How to use the @lskjs/utils/removeProps function in @lskjs/utils

/* eslint import/no-extraneous-dependencies: 0 */
import styled from 'react-emotion';
import getTheme from '@lskjs/theme/getTheme';
import removeProps from '@lskjs/utils/removeProps';

export default styled(removeProps('div', ['align', 'size']))`
  padding: ${(props) => {
    switch (props.size) {
      case 'large': return '32px 16px 24px';
      default: return '16px 16px 16px';
    }
  }};
  position: relative;
  font-family: ${p => getTheme(p.theme, 'fontFamily')};
  text-align: ${props => props.align};
  display: flex;
  flex-direction: column;
  align-items: ${(props) => {
    switch (props.align) {
      case 'left': return 'flex-start';
      case 'right': return 'flex-end';
      case 'center': return 'center';

import styled, { css } from 'react-emotion';
import createDynamicTag from '@lskjs/utils/createDynamicTag';
import removeProps from '@lskjs/utils/removeProps';
import getTheme from '@lskjs/theme/getTheme';

const dynamicTag = createDynamicTag('button');
const filteredTag = removeProps(dynamicTag, [
  'small',
  'transparent',
  'child',
  'inverse',
]);

export default styled(filteredTag)`
  width: ${p => (p.small ? 22 : 24)}px;
  height: ${p => (p.small ? 22 : 24)}px;
  border-radius: 100px;
  background-color: ${p => getTheme(p.theme, 'colors.lighterPrimary')};
  color: ${p => getTheme(p.theme, 'colors.primary')};
  display: flex;
  font-size: 18px;
  align-items: center;
  justify-content: center;

import styled from 'react-emotion';
import getTheme from '@lskjs/theme/getTheme';
import removeProps from '@lskjs/utils/removeProps';

const filteredTag = removeProps('div');

export default styled(filteredTag)`
  font-family: ${p => getTheme(p.theme, 'fontFamily')};
  height: 1px;
  background-color: rgba(0,0,0,.1);
  margin: 0 1.25rem;
`;

import styled, { css } from 'react-emotion';
import getTheme from '@lskjs/theme/getTheme';
import removeProps from '@lskjs/utils/removeProps';

const filteredTag = removeProps('section', ['padded', 'paint']);

export default styled(filteredTag)`
  line-height: 2.15em;
  font-weight: 600;
  font-family: ${p => getTheme(p.theme, 'fontFamily')};
  ${p => (p.padded && css`
    padding: 12px 20px;
    font-size: 16px;
    border-bottom: 1px solid transparent;
    font-weight: 500;
  `)}
  ${(p) => {
    switch (p.paint) {
      case 'light':
        return css`
          background-color: ${getTheme(p.theme, 'colors.lightGray')};

import styled, { css } from 'react-emotion';
import creacteDynamicTag from '@lskjs/utils/createDynamicTag';
import removeProps from '@lskjs/utils/removeProps';

const dynamicTag = creacteDynamicTag('div');
const filteredTag = removeProps(dynamicTag, ['padded', 'paint']);

const paintColors = (p) => {
  switch (p.paint) {
    case 'light':
      return css`
        background-color: ${p.theme.colors.lightGray};
        color: ${p.theme.colors.main};`;
    case 'dark':
      return css`
        background-color: ${p.theme.colors.black};
        color: ${p.theme.colors.white};`;
    case 'primary':
      return css`
        background-color: ${p.theme.colors.primary};
        color: ${p.theme.colors.white};`;
    case 'info':

content: '';
    height: 1px;
    width: 0;
    bottom: 1px;
    background: ${p => p.theme.colors.darkGray};
    transition: all .25s;
  }
  &:before {
    left: 50%;
  }
  &:after {
    right: 50%;
  }
`;

const filteredInput = removeProps('input', ['right']);
export const Input = styled(filteredInput)`
  position: relative;
  font-family: ${p => p.theme.fontFamily};
  flex: 1 1 auto;
  padding: ${p => (p.right ? '9px 10px 3px' : '7px 10px 5px')};
  width: 1%;
  margin-bottom: 0;
  border: none;
  background: transparent;
  &:focus {
    outline: none;
  }

  &:focus ~ ${Bar}:before,
  &:focus ~ ${Bar}:after {
    width: 50%;

import styled, { css } from 'react-emotion';
import removeProps from '@lskjs/utils/removeProps';
import getTheme from '@lskjs/theme/getTheme';

const filteredTag = removeProps('section', ['padded', 'paint']);

export default styled(filteredTag)`
    font-family: ${p => getTheme(p.theme, 'fontFamily')};
    line-height: 2.15em;
    font-size: 12px;
    font-weight: 600;
    ${p => (p.padded && css`
        padding: 12px 20px;
        font-size: 16px;
        border-bottom: 1px solid transparent;
        font-weight: 500;
    `)}
    ${(p) => {
    switch (p.paint) {
      case 'light':
        return css` 

import styled, { css } from 'react-emotion';
import GridCol from '../GridCol';
import getTheme from '@lskjs/theme/getTheme';
import removeProps from '@lskjs/utils/removeProps';

const filter = removeProps('div', ['vertical', 'gap']);
export default styled(filter)`
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin-right: -${p => (p.gap || getTheme(p.theme, 'gridGap'))}px;
  margin-left: -${p => (p.gap || getTheme(p.theme, 'gridGap'))}px;

  ${p => p.gap && css`
    > div {
        padding-left: ${p.gap || getTheme(p.theme, 'gridGap')}px;
        padding-right: ${p.gap || getTheme(p.theme, 'gridGap')}px;
    }
  `}

  ${p => (p.vertical && css`
    margin-top: -${p.gap || getTheme(p.theme, 'gridGap')}px;

export const Image = styled('img')`
  width: 32px;
  height: 32px;
  border-radius: 4px;
  flex-shrink: 0;
`;


export const Title = styled('div')`
  margin-left: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`;

const filteredTag = removeProps('div', ['color']);
export const IconWrapper = styled(filteredTag)`
  font-size: 24px;
  color: ${p => p.color};
  display: inline-flex;
  margin-left: 8px;
`;

}
`;
const sizeExtra11Style = css`
  @media (min-width: 1200px) {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
  }
`;
const sizeExtra12Style = css`
  @media (min-width: 1200px) {
    flex: 0 0 100%;
    max-width: 100%;
  }
`;

const filter = removeProps('div', ['xs', 'sm', 'md', 'lg', 'xl']);
export default styled(filter)`
  box-sizing: border-box;
  position: relative;
  width: 100%;
  min-height: 1px;
  flex-shrink: 0;
  padding-right: ${p => getTheme(p.theme, 'gridGap')}px;
  padding-left: ${p => getTheme(p.theme, 'gridGap')}px;

  ${(p) => {
    if (p.xs && !['number', 'string'].includes(typeof p.xs)) {
      return defaultStyle;
    }
    switch (p.xs) {
      case 'auto': return autoStyle;
      case 1: return size1Style;