@loja-integrada/admin-components 0.17.0 → 0.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loja-integrada/admin-components",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "author": "Loja Integrada Front-End Team",
   "license": "MIT",
   "main": "dist/index.js",

package/src/Forms/RadioButton/RadioButton.spec.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+import { composeStories } from '@storybook/testing-react'
+import { mount } from '@cypress/react'
+import * as stories from './RadioButton.stories'
+
+const { Default, Grouped, Disabled } = composeStories(stories)
+
+describe('Toggle tests', () => {
+  it('Default', () => {
+    mount(<Default />)
+    cy.get('input').should('not.be.checked')
+    cy.get('.radioLabel').contains('label')
+  })
+
+  it('Grouped', () => {
+    mount(<Grouped />)
+    cy.get('input[type=radio]:checked').should('have.length', 1)
+    cy.get('.radioLabel').contains('label')
+  })
+
+  it('Disabled', () => {
+    mount(<Disabled />)
+    cy.get('input[type=radio]').should('be.checked')
+    cy.get('.checkmark').should('have.class', 'pointer-events-none')
+  })
+})

package/src/Forms/RadioButton/RadioButton.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+
+import { RadioButton, RadioButtonProps } from '.'
+
+export default {
+  title: 'Forms/RadioButton',
+  component: RadioButton,
+} as Meta
+
+const Template: Story<RadioButtonProps> = (args) => <RadioButton {...args} />
+
+const TemplateGrouped: Story<RadioButtonProps> = (args) => {
+  return (
+    <> 
+    <RadioButton {...args} id='1' value={1} name='form' defaultChecked/>
+    <RadioButton {...args} id='2' value={2} name='form'/>
+    <RadioButton {...args} id='3' value={3} name='form'/>
+  </>
+  )
+}
+ 
+export const Default = Template.bind({})
+Default.args = {
+  label: 'label',
+  name: '',
+}
+
+export const Grouped= TemplateGrouped.bind({})
+Grouped.args = {
+  label: 'label',
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  disabled: true,
+  label: 'label',
+  name: '',
+  defaultChecked: true,
+}

package/src/Forms/RadioButton/RadioButton.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+
+const RadioButtonComponent = (
+  {
+    label,
+    id,
+    name,
+    value,
+    className = '',
+    onChange,
+    disabled = false,
+    ...props
+  }: RadioButtonProps,
+  ref: React.ForwardedRef<HTMLInputElement>
+): JSX.Element => {
+  const inputId = id || name
+  const toggleClasses = disabled
+    ? `pointer-events-none border-card-stroke text-on-base-2 font-semibold peer-checked:bg-base-3`
+    : `peer-checked:bg-primary cursor-pointer`
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange && onChange(event)
+  }
+
+  return (
+    <div
+      className={`radioContainer relative inline-flex justify-center items-center text-f6 text-inverted-1 font-semibold mx-2`}
+    >
+      <label
+        className={`${className} relative inline-flex justify-center items-center border border-base-4 rounded-full w-4 h-4 mr-1 m-auto focus-within:border-focus focus-within:border-2
+        }`}
+      >
+        <input
+          ref={ref}
+          className={`absolute peer opacity-0 ${toggleClasses}`}
+          type="radio"
+          name={name}
+          value={value}
+          id={inputId}
+          onChange={handleChange}
+          {...props}
+          disabled={disabled}
+        />
+        <span
+          className={`checkmark rounded-full w-2 h-2 ${toggleClasses} peer-checked:inline-block`}
+        ></span>
+      </label>
+      <label htmlFor={inputId} className={`radioLabel ${toggleClasses}`}>
+        {label}
+      </label>
+    </div>
+  )
+}
+
+const RadioButtonWithForwardRef = React.forwardRef(RadioButtonComponent)
+export const RadioButton = React.memo(RadioButtonWithForwardRef)
+
+export interface RadioButtonProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * Custom class name
+   * */
+  className?: string
+  /**
+   * Custom id
+   * */
+  id?: string
+  /**
+   * Custom name
+   * */
+  name?: string
+  /**
+   * Custom value
+   * */
+  value?: string | number
+  /**
+   * Text label of the radio button
+   * */
+  label?: string | React.ReactNode
+}

package/src/Forms/RadioButton/index.tsx

@@ -0,0 +1 @@
+export * from './RadioButton'

package/src/Forms/ToggleButton/ToggleButton.spec.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { composeStories } from '@storybook/testing-react'
+import { mount } from '@cypress/react'
+import * as stories from './ToggleButton.stories'
+
+const { WithIcon, WithText, Disabled} = composeStories(stories)
+
+describe('Toggle Button tests', () => {
+  it('With Icon', () => {
+    mount(<WithIcon />)
+    cy.get('input[type=radio]:checked').should('have.length', 1)
+    cy.get('ul').children().should('have.lengthOf.above', 0)
+    cy.get('svg').children().should('have.lengthOf.above', 0)
+  })
+
+  it('With Text', () => {
+    mount(<WithText />)
+    cy.get('input[type=radio]:checked').should('have.length', 1)
+    cy.get('ul').children().should('have.lengthOf.above', 0)
+    cy.get('.checkmark').children().should('have.lengthOf.above', 0).contains('span',`Text`)
+  })
+
+  it('Disabled', () => {
+    mount(<Disabled />)
+    cy.get('input[type=radio]:checked').should('have.length', 1)
+    cy.get('.checkmark').should('have.class', 'pointer-events-none')
+  })
+})

package/src/Forms/ToggleButton/ToggleButton.stories.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+import { Icon } from '../../Icons/Icon'
+import { ToggleButton, ToggleButtonProps } from '.'
+
+export default {
+  title: 'Forms/ToggleButton',
+  component: ToggleButton,
+} as Meta
+
+const Template: Story<ToggleButtonProps> = (args) => <ToggleButton {...args} />
+
+export const WithIcon = Template.bind({})
+WithIcon.args = {  
+  disabled: false,
+  children: [
+    <Icon icon='desktop' key={1} />,
+    <Icon icon='mobile' key={2}/>,
+  ]
+}
+
+export const WithText = Template.bind({})
+WithText.args = {  
+  disabled: false,
+  children: [ 
+    <span key={1}>With Text</span>,
+    <span key={2}>With Text</span>,
+    <span key={3}>With Text</span>,
+  ]
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {  
+  disabled: true,
+  children: [ 
+    <span key={1}>Disabled</span>,
+    <span key={2}>Disabled</span>,
+  ]
+}
+
+export const WithOnChange = Template.bind({})
+WithOnChange.args = {
+  disabled: false,
+  children: [
+    <Icon icon='desktop' key={1} />,
+    <Icon icon='mobile' key={2}/>,
+  ],
+  onChange: (e) => {
+    console.log(e.target.name)
+  },
+}

package/src/Forms/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+
+const ToggleButtonComponent = (
+  {
+    value,
+    className = '',
+    id,
+    children,
+    disabled,
+    defaultCheckedIndex = 0,
+    onChange,
+    ...props
+  }: ToggleButtonProps,
+  ref: React.ForwardedRef<HTMLInputElement>
+) => {
+  const toggleClasses = disabled
+    ? `pointer-events-none bg-base-3 border-card-stroke text-on-base-2`
+    : `peer-checked:bg-primary peer-checked:border-primary peer-checked:text-base-1 text-primary`
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
+    onChange && onChange(e)
+  }
+
+  const toggleItems = children.map((item, index) => {
+    const borderRadius =
+      index === 0
+        ? 'rounded-l'
+        : children.length - 1 === index
+        ? 'border-r rounded-r'
+        : ''
+    return (
+      <li
+        key={`toggle-btn-[${index}]`}
+        className="inline-flex justify-center items-center h-12"
+      >
+        <label className="relative inline-flex justify-center items-center h-12">
+          <input
+            ref={ref}
+            className="peer absolute top-0 bottom-0 left-0 right-0 cursor-pointer opacity-0 z-20"
+            type="radio"
+            id={id}
+            name="toggleButton"
+            value={value}
+            onChange={handleChange}
+            {...props}
+            defaultChecked={defaultCheckedIndex === index ? true : false}
+            disabled={disabled}
+          />
+          <div
+            className={`${className} checkmark ${toggleClasses} inline-flex justify-center items-center ${borderRadius} py-4 px-6 border-y border-l h-12`}
+          >
+            {item}
+          </div>
+        </label>
+      </li>
+    )
+  })
+
+  return (
+    <div
+      className={`${className} inline-flex justify-center items-center h-12 ${toggleClasses}} rounded text-f6 tracking-4 font-semibold`}
+    >
+      <ul className="list-none inline-flex justify-center items-center h-12">
+        {toggleItems}
+      </ul>
+    </div>
+  )
+}
+
+const ToggleButtonWithForwardRef = React.forwardRef(ToggleButtonComponent)
+export const ToggleButton = React.memo(ToggleButtonWithForwardRef)
+
+export interface ToggleButtonProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  /**
+   * Custom class name
+   * */
+  className?: string
+  /**
+   * Custom id
+   * */
+  id?: string
+  /**
+   * Custom value
+   * */
+  value?: string | number
+  /**
+   * Set icon or an text element to be a children
+   * */
+  children: React.ReactNode[]
+  /**
+   * Set element should be a checked
+   * */
+  defaultCheckedIndex: number
+}

package/src/Forms/ToggleButton/index.tsx

@@ -0,0 +1 @@
+export * from './ToggleButton'

package/src/Forms/index.ts

@@ -1,10 +1,12 @@
 export * from './Input'
 export * from './InputMask'
+export * from './RadioButton'
 export * from './InputCurrency'
 export * from './InputLabel'
 export * from './InputHelpText'
 export * from './Select'
 export * from './Toggle'
+export * from './ToggleButton'
 export * from './Dropdown'
 export * from './Checkbox'
 export * from './FloatingLabelInput'

package/src/Icons/Icon.stories.tsx

@@ -14,16 +14,16 @@ Example.args = { icon: 'cog' }
 export const IconsList = () => {
   return (
     <>
-      <div className="text-center">
+      <div className="text-center mb-6">
         There are {Object.keys(icons).length} icons
       </div>
       <ul className="grid grid-cols-6 gap-4 list-none">
         {(Object.keys(icons) as Array<keyof typeof icons>).map(key => (
-          <li key={key} className="flex items-center py-4 min-w-0">
-            <div className="shrink-0">
+          <li key={key} className="flex items-center min-w-0 group">
+            <div className="shrink-0 border border-transparent group-hover:border-card-stroke rounded flex">
               <IconComponent icon={key} />
             </div>
-            <div className="pl-2 overflow-hidden text-ellipsis min-w-0">{key}</div>
+            <div className="ml-4 overflow-hidden text-ellipsis min-w-0 text-f6">{key}</div>
           </li>
         ))}
       </ul>

package/src/Icons/icons-path/AngleDown.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const AngleDown = () => (
+  <path
+    fillRule="evenodd"
+    d="M9 12.25c-.286 0-.558-.123-.748-.336l-4-4.5a1 1 0 0 1 1.495-1.329L9 9.745l3.252-3.66a1 1 0 1 1 1.495 1.33l-4 4.5a1 1 0 0 1-.747.334Z"
+    clipRule="evenodd"
+  />
+)

package/src/Icons/icons-path/Bell.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 
 export const Bell = () => (
   <path
-    clipRule="evenodd"
-    d="M14.6667 11.5556C14.6667 11.8 14.4667 12 14.2222 12H1.77778C1.53333 12 1.33333 11.8 1.33333 11.5556V11.2284C1.33333 11.0738 1.416 10.9271 1.54844 10.848L1.64533 10.7902C2.76533 10.1182 3.55644 9.05067 3.87289 7.78311L4.32533 5.97245C4.74667 4.288 6.25422 3.11111 7.99022 3.11111H8.00978C9.74578 3.11111 11.2533 4.288 11.6747 5.97245L12.1271 7.78311C12.4436 9.05067 13.2347 10.1182 14.3547 10.7902L14.4507 10.848C14.584 10.9271 14.6667 11.0738 14.6667 11.2284V11.5556ZM9.33333 13.3333C9.33333 14.0684 8.73511 14.6667 8 14.6667C7.26489 14.6667 6.66667 14.0684 6.66667 13.3333H9.33333ZM15.1369 9.704L15.0409 9.64711C14.232 9.16178 13.6489 8.37511 13.4204 7.46044L12.968 5.64889C12.4978 3.76711 11.0169 2.35289 9.192 1.91911C9.27911 1.74133 9.33333 1.54489 9.33333 1.33333C9.33333 0.596444 8.73689 0 8 0C7.26311 0 6.66667 0.596444 6.66667 1.33333C6.66667 1.54489 6.72089 1.74133 6.808 1.91911C4.98311 2.35289 3.50222 3.76711 3.032 5.64889L2.57956 7.46044C2.35111 8.37511 1.768 9.16178 0.959111 9.64711L0.863111 9.704C0.328 10.0258 0 10.6044 0 11.2284V11.5556C0 12.5369 0.796444 13.3333 1.77778 13.3333H5.33333C5.33333 14.8062 6.52711 16 8 16C9.47289 16 10.6667 14.8062 10.6667 13.3333H14.2222C15.2036 13.3333 16 12.5369 16 11.5556V11.2284C16 10.6044 15.672 10.0258 15.1369 9.704Z"
     fillRule="evenodd"
+    d="M16.5 13c0 .275-.225.5-.5.5H2c-.275 0-.5-.225-.5-.5v-.368c0-.174.093-.339.242-.428l.109-.065c1.26-.756 2.15-1.957 2.506-3.383l.509-2.037C5.34 4.824 7.036 3.5 8.989 3.5h.022c1.953 0 3.649 1.324 4.123 3.219l.509 2.037c.356 1.426 1.246 2.627 2.506 3.383l.108.065c.15.089.243.254.243.428V13Zm-6 2c0 .827-.673 1.5-1.5 1.5s-1.5-.673-1.5-1.5h3Zm6.529-4.083-.108-.064c-.91-.546-1.566-1.431-1.823-2.46l-.509-2.038c-.529-2.117-2.195-3.708-4.248-4.196.098-.2.159-.421.159-.659C10.5.671 9.829 0 9 0S7.5.671 7.5 1.5c0 .238.061.459.159.659-2.053.488-3.719 2.079-4.248 4.196l-.509 2.038c-.257 1.029-.913 1.914-1.823 2.46l-.108.064C.369 11.279 0 11.93 0 12.632V13c0 1.104.896 2 2 2h4c0 1.657 1.343 3 3 3s3-1.343 3-3h4c1.104 0 2-.896 2-2v-.368c0-.702-.369-1.353-.971-1.715Z"
+    clipRule="evenodd"
   />
 )

package/src/Icons/icons-path/Calculator.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Calculator = () => (
+  <path
+    fillRule="evenodd"
+    d="M15.6248 14.6389V2.36111C15.6248 1.05683 14.5679 0 13.2636-1e-7L4.76365-5e-7C3.45937-5e-7 2.40253 1.05683 2.40253 2.36111V14.6389C2.40253 15.9422 3.45937 17 4.76365 17h8.49995c1.3043 0 2.3612-1.0578 2.3612-2.3611Zm-1.4167 0c0 .5204-.4231.9444-.9445.9444H4.76364c-.52133 0-.94444-.424-.94444-.9444V2.36111c0-.52133.42311-.94444.94445-.94444h8.49995c.5214 0 .9445.42311.9445.94444V14.6389ZM5.9442 2.71528c-.4564 0-.82639.36998-.82639.82639v1.41666c0 .4564.36999.82639.82639.82639h6.1389c.4564 0 .8264-.36998.8264-.82639V3.54167c0-.4564-.37-.82639-.8264-.82639H5.9442Zm.35417 1.88889v-.70834h5.43053v.70834H6.29837ZM5.9442 7.08333h.47222c.3912 0 .70834.31714.70834.70834v.47222c0 .3912-.31714.70833-.70834.70833H5.9442c-.3912 0-.70833-.31713-.70833-.70833v-.47222c0-.3912.31713-.70834.70833-.70834Zm.47222 2.83334H5.9442c-.3912 0-.70833.31713-.70833.70833v.4722c0 .3912.31713.7084.70833.7084h.47222c.39121 0 .70834-.3172.70834-.7084v-.4722c0-.3912-.31714-.70833-.70834-.70833Zm0 2.83333H5.9442c-.3912 0-.70833.3171-.70833.7083v.4723c0 .3912.31713.7083.70833.7083h.47222c.39121 0 .70834-.3171.70834-.7083v-.4723c0-.3912-.31713-.7083-.70834-.7083Zm2.83334-5.66667h-.47223c-.3912 0-.70833.31714-.70833.70834v.47222c0 .3912.31713.70833.70833.70833h.47223c.3912 0 .70833-.31713.70833-.70833v-.47222c0-.3912-.31713-.70834-.70833-.70834Zm0 2.83334h-.47223c-.3912 0-.70833.31713-.70833.70833v.4722c0 .3912.31713.7084.70833.7084h.47223c.3912 0 .70833-.3172.70833-.7084v-.4722c0-.3912-.31713-.70833-.70833-.70833Zm0 2.83333h-.47223c-.3912 0-.70833.3171-.70833.7083v.4723c0 .3912.31713.7083.70833.7083h.47223c.3912 0 .70833-.3171.70833-.7083v-.4723c0-.3912-.31713-.7083-.70833-.7083Zm2.83334-5.66667h-.4722c-.3912 0-.7084.31713-.7084.70834v.47222c0 .3912.3172.70833.7084.70833h.4722c.3912 0 .7083-.31713.7083-.70833v-.47222c0-.39121-.3171-.70834-.7083-.70834Zm0 2.83334h-.4722c-.3912 0-.7084.31713-.7084.70833v3.3056c0 .3912.3172.7083.7084.7083h.4722c.3912 0 .7083-.3171.7083-.7083V10.625c0-.3912-.3171-.70833-.7083-.70833Z"
+    clipRule="evenodd"
+  />
+)

package/src/Icons/icons-path/Copy.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 export const Copy = () => (
   <path
     fillRule="evenodd"
-    d="M10 15.5h1.5v.5a2 2 0 01-2 2h-7a2 2 0 01-2-2V6a2 2 0 012-2H3v1.5h-.5A.5.5 0 002 6v10a.5.5 0 00.5.5h7a.5.5 0 00.5-.5v-.5zm3.5-3h-7A.501.501 0 016 12V2c0-.275.225-.5.5-.5h3.9v2c0 1.158.942 2.1 2.1 2.1H14V12c0 .275-.225.5-.5.5zm.354-8.775a.503.503 0 01.146.353V4.4h-1.5a.901.901 0 01-.9-.9V1.535a.517.517 0 01.175.111l2.079 2.079zm1.06-1.061L12.836.586A2 2 0 0011.422 0H6.5a2 2 0 00-2 2v10a2 2 0 002 2h7a2 2 0 002-2V4.078a2 2 0 00-.586-1.414z"
+    d="M11 15.5h1.5v.5c0 1.104-.896 2-2 2h-7c-1.104 0-2-.896-2-2V6c0-1.104.896-2 2-2H4v1.5h-.5c-.276 0-.5.225-.5.5v10c0 .275.224.5.5.5h7c.276 0 .5-.225.5-.5v-.5Zm3.5-3h-7c-.275 0-.5-.225-.5-.5V2c0-.275.225-.5.5-.5h3.9v2c0 1.158.942 2.1 2.1 2.1H15V12c0 .275-.225.5-.5.5Zm.354-8.775c.093.093.146.222.146.353V4.4h-1.5c-.496 0-.9-.404-.9-.9V1.535c.065.026.126.062.175.111l2.079 2.079Zm1.06-1.061L13.836.586C13.461.211 12.952 0 12.422 0H7.5c-1.104 0-2 .896-2 2v10c0 1.104.896 2 2 2h7c1.104 0 2-.896 2-2V4.078c0-.53-.211-1.039-.586-1.414Z"
     clipRule="evenodd"
   />
 )

package/src/Icons/icons-path/Desktop.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Desktop = () => (
+  <path
+    fillRule="evenodd"
+    d="M16.5 11c0 .275-.225.5-.5.5H2a.501.501 0 0 1-.5-.5V2c0-.275.225-.5.5-.5h14c.275 0 .5.225.5.5v9Zm-6.009 5.5H7.509l1.05-3.5h.882l1.05 3.5ZM16 0H2a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h4.991l-1.05 3.5H2.5V18h13v-1.5h-3.441l-1.05-3.5H16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Z"
+    clipRule="evenodd"
+  />
+)

package/src/Icons/icons-path/Image.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 export const Image = () => (
   <path
     fillRule="evenodd"
-    d="M10.5 5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm5.5 7.5H2a.5.5 0 0 1-.5-.5v-.937L5.176 8.39a2.247 2.247 0 0 1 2.647 0l2.188 1.59a3.759 3.759 0 0 0 4.027.246L16.5 8.857V12a.5.5 0 0 1-.5.5ZM2 1.5h14a.5.5 0 0 1 .5.5v5.261a.704.704 0 0 0-.364.084l-2.827 1.57a2.258 2.258 0 0 1-2.416-.147L8.706 7.177a3.743 3.743 0 0 0-4.412 0L1.5 9.209V2a.5.5 0 0 1 .5-.5ZM16 0H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Z"
+    d="M10.5 7c0-.828.671-1.5 1.5-1.5s1.5.672 1.5 1.5-.671 1.5-1.5 1.5-1.5-.672-1.5-1.5Zm5.5 7.5H2c-.276 0-.5-.225-.5-.5v-.937l3.676-2.673c.792-.575 1.856-.575 2.647 0l2.188 1.59c1.176.857 2.758.952 4.027.246l2.462-1.369V14c0 .275-.224.5-.5.5ZM2 3.5h14c.276 0 .5.225.5.5v5.261c-.124-.001-.249.018-.364.084l-2.827 1.57c-.762.424-1.711.365-2.416-.147L8.706 9.177c-1.32-.959-3.092-.959-4.412 0L1.5 11.209V4c0-.275.224-.5.5-.5ZM16 2H2C.896 2 0 2.896 0 4v10c0 1.104.896 2 2 2h14c1.104 0 2-.896 2-2V4c0-1.104-.896-2-2-2Z"
     clipRule="evenodd"
   />
 )

package/src/Icons/icons-path/Mobile.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Mobile = () => (
+  <path
+    fillRule="evenodd"
+    d="M9 13c-.553 0-1 .447-1 1 0 .553.447 1 1 1 .553 0 1-.447 1-1 0-.553-.447-1-1-1Zm3.5-13h-7c-1.104 0-2 .896-2 2v14c0 1.104.896 2 2 2h7c1.104 0 2-.896 2-2V2c0-1.104-.896-2-2-2Zm0 1.5c.275 0 .5.225.5.5v14c0 .275-.225.5-.5.5h-7c-.275 0-.5-.225-.5-.5V2c0-.275.225-.5.5-.5h7Z"
+    clipRule="evenodd"
+  />
+)

package/src/Icons/icons-path/MoneyBill.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 export const MoneyBill = () => (
   <path
     fillRule="evenodd"
-    d="M3.245 12.2h11.51a1.995 1.995 0 0 1 1.945-1.945v-6.51A1.995 1.995 0 0 1 14.755 1.8H3.245A1.995 1.995 0 0 1 1.3 3.745v6.51A1.995 1.995 0 0 1 3.245 12.2ZM18 2v10a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 0 12V2A1.5 1.5 0 0 1 1.5.5h15A1.5 1.5 0 0 1 18 2Zm-6.5 5c0 2-1 3-2.5 3S6.5 9 6.5 7s1-3 2.5-3 2.5 1 2.5 3Z"
+    d="M3.245 14.2h11.51c.027-1.064.881-1.918 1.945-1.945v-6.51c-1.064-.027-1.918-.881-1.945-1.945H3.245C3.218 4.864 2.364 5.718 1.3 5.745v6.51c1.064.027 1.918.881 1.945 1.945ZM18 4v10c0 .828-.672 1.5-1.5 1.5h-15C.672 15.5 0 14.828 0 14V4c0-.828.672-1.5 1.5-1.5h15c.828 0 1.5.672 1.5 1.5Zm-6.5 5c0 2-1 3-2.5 3s-2.5-1-2.5-3 1-3 2.5-3 2.5 1 2.5 3Z"
     clipRule="evenodd"
   />
 )

package/src/Icons/icons-path/Move.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 export const Move = () => (
   <path
     fillRule="evenodd"
-    d="M9.5 14c0-.828-.672-1.5-1.5-1.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5 1.5-.672 1.5-1.5zm-6 0c0-.828-.671-1.5-1.5-1.5S.5 13.172.5 14s.671 1.5 1.5 1.5 1.5-.672 1.5-1.5zm6-12C9.5 1.172 8.828.5 8 .5S6.5 1.172 6.5 2 7.172 3.5 8 3.5 9.5 2.828 9.5 2zm-6 0C3.5 1.172 2.829.5 2 .5S.5 1.172.5 2 1.171 3.5 2 3.5 3.5 2.828 3.5 2zm6 6c0-.828-.672-1.5-1.5-1.5S6.5 7.172 6.5 8 7.172 9.5 8 9.5 9.5 8.828 9.5 8zM2 9.5C1.171 9.5.5 8.828.5 8S1.171 6.5 2 6.5s1.5.672 1.5 1.5S2.829 9.5 2 9.5z"
+    d="M13.5 15c0-.828-.672-1.5-1.5-1.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5 1.5-.672 1.5-1.5Zm-6 0c0-.828-.671-1.5-1.5-1.5s-1.5.672-1.5 1.5.671 1.5 1.5 1.5 1.5-.672 1.5-1.5Zm6-12c0-.828-.672-1.5-1.5-1.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5 1.5-.672 1.5-1.5Zm-6 0c0-.828-.671-1.5-1.5-1.5S4.5 2.172 4.5 3 5.171 4.5 6 4.5 7.5 3.828 7.5 3Zm6 6c0-.828-.672-1.5-1.5-1.5s-1.5.672-1.5 1.5.672 1.5 1.5 1.5 1.5-.672 1.5-1.5ZM6 10.5c-.829 0-1.5-.672-1.5-1.5S5.171 7.5 6 7.5s1.5.672 1.5 1.5-.671 1.5-1.5 1.5Z"
     clipRule="evenodd"
   />
 )

package/src/Icons/icons-path/PaperList.tsx

@@ -2,8 +2,8 @@ import React from 'react'
 
 export const PaperList = () => (
   <path
-    clipRule="evenodd"
-    d="M16 3C16 1.343 14.657 0 13 0H3C1.343 0 0 1.343 0 3V15C0 16.657 1.343 18 3 18H13C14.657 18 16 16.657 16 15V3ZM13 16.5C13.827 16.5 14.5 15.827 14.5 15V3C14.5 2.173 13.827 1.5 13 1.5H3C2.173 1.5 1.5 2.173 1.5 3V15C1.5 15.827 2.173 16.5 3 16.5H13ZM4 5H12V4H4V5ZM4 8H12V7H4V8ZM4 11H12V10H4V11ZM4 14H12V13H4V14Z"
     fillRule="evenodd"
+    d="M17 3c0-1.657-1.343-3-3-3H4C2.343 0 1 1.343 1 3v12c0 1.657 1.343 3 3 3h10c1.657 0 3-1.343 3-3V3Zm-3 13.5c.827 0 1.5-.673 1.5-1.5V3c0-.827-.673-1.5-1.5-1.5H4c-.827 0-1.5.673-1.5 1.5v12c0 .827.673 1.5 1.5 1.5h10ZM5 5h8V4H5v1Zm0 3h8V7H5v1Zm0 3h8v-1H5v1Zm0 3h8v-1H5v1Z"
+    clipRule="evenodd"
   />
 )

package/src/Icons/icons-path/Pix.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 export const Pix = () => (
   <path
     fillRule="evenodd"
-    d="M3.71455 3.77848l-.4728.47279.4728-.00001c.40012 0 .78508.09931 1.12661.28623.19426.10633.37448.241.53543.40188l2.40858 2.40901c.17347.17354.4567.17419.63059-.0002l2.39984-2.40003c.1284-.1284.2692-.24011.4195-.33404.3692-.23064.7964-.35407 1.2425-.35407h.2891L9.71865 1.21195c-.94935-.949268-2.48837-.949268-3.43757 0L3.71455 3.77848zm5.06128-1.62373c-.4287-.42861-1.12347-.42849-1.55191-.00002l-1.4153 1.4153c.18102.12536.35193.26776.51055.4263l1.78122 1.78154 1.77234-1.77249c.12705-.12699.26227-.2439.40397-.34971L8.77583 2.15475zM9.87289 12.9946L8.1006 11.2222l-1.78105 1.7812c-.15864.1585-.32982.3012-.51087.4265l1.41533 1.4153c.42846.4285 1.12329.4286 1.55189.0001l1.5009-1.501c-.1417-.1058-.27685-.2227-.40391-.3497zm1.36241-.6088c.3692.2307.7964.3541 1.2425.3541h.289l-3.04808 3.0482c-.94927.9492-2.48831.9492-3.43751 0l-3.03946-3.0394h.47294c.40008 0 .78501-.0993 1.12651-.2862.19431-.1064.37455-.241.53553-.4019l2.40858-2.4087c.16843-.16843.46209-.16893.63059 0l2.3998 2.3999c.1285.1284.2692.2401.4196.334zm1.2425-.3515c-.433 0-.8568-.1756-1.1628-.4817L8.91529 9.15296c-.21748-.21768-.51595-.32648-.81448-.32648-.2985.00001-.59704.10879-.8147.32627L4.87752 11.5613c-.30595.3062-.7298.4818-1.16277.4818H2.68497c-.04393 0-.08498.0103-.12379.0249L.711953 10.2188c-.949271-.9493-.949271-2.48826 0-3.43753l1.849297-1.8493c.03875.01459.07979.02494.12372.02494h1.02978c.43297 0 .85682.17555 1.16277.48179l2.40881 2.4088c.2245.22436.51938.33672.81448.33672.29481 0 .5899-.11236.81448-.33694L11.315 5.44747c.306-.30617.7298-.48179 1.1628-.48179h.8375c.0464 0 .0903-.01014.1308-.02638l1.842 1.84197c.9492.94926.9492 2.48822 0 3.43753l-1.842 1.8419c-.0405-.0162-.0844-.0264-.1308-.0264h-.8375zm-.22-1.4246l-2.1097-2.10959 2.1101-2.11016c.0558-.05583.1403-.09094.2196-.09094h.4424l1.4251 1.42507c.4285.42858.4285 1.12334 0 1.55191L12.9202 10.701h-.4424c-.0793 0-.1642-.0355-.22-.0913zM3.93472 6.38151l2.11851 2.1185-2.11885 2.11889c-.05568.0557-.14017.0908-.21963.0908h-.62623L1.65476 9.27596c-.42857-.42857-.42857-1.12331 0-1.55189l1.43383-1.43382h.62616c.07945 0 .16432.03556.21997.09126z"
-    clipRule="evenodd"
+    d="m4.179688 3.6875-.53125.53125h.53125c.449218 0 .882812.113281 1.265624.324219.21875.117187.421876.269531.601563.453125l2.710937 2.707031c.195313.195313.515626.195313.710938 0l2.699219-2.699219c.144531-.144531.300781-.269531.472656-.375.414063-.261718.894531-.398437 1.398437-.398437h.324219L10.933594.800781c-1.066406-1.066406-2.800782-1.066406-3.867188 0Zm5.691406-1.824219c-.480469-.484375-1.261719-.484375-1.746094 0L6.535156 3.453125c.203125.140625.394532.300781.574219.480469L9.113281 5.9375l1.992188-1.992188c.144531-.144531.296875-.277343.457031-.394531Zm1.234375 12.191407L9.113281 12.0625l-2.003906 2.003906c-.179687.179688-.371094.339844-.574219.480469l1.59375 1.589844c.480469.484375 1.261719.484375 1.742188 0l1.691406-1.6875c-.160156-.117188-.3125-.25-.457031-.394531Zm1.535156-.683594c.414063.261718.894531.398437 1.398437.398437h.324219l-3.429687 3.429688c-1.066406 1.066406-2.800782 1.066406-3.867188 0L3.648438 13.78125h.53125c.449218 0 .882812-.113281 1.265624-.324219.21875-.117187.421876-.269531.601563-.453125l2.710937-2.707031c.191407-.191406.519532-.191406.710938 0l2.699219 2.699219c.144531.144531.300781.269531.472656.375Zm1.398437-.394532c-.488281 0-.964843-.199218-1.308593-.542968L10.03125 9.734375c-.246094-.246094-.582031-.367187-.917969-.367187-.335937 0-.671875.121093-.917969.367187l-2.707031 2.710937c-.34375.34375-.820312.539063-1.308593.539063H3.019531c-.046875 0-.09375.011719-.136719.03125L.800781 10.933594c-1.066406-1.066406-1.066406-2.800782 0-3.867188l2.082031-2.082031c.042969.019531.089844.03125.136719.03125h1.160157c.488281 0 .964843.195313 1.308593.539063l2.707031 2.710937c.253907.253906.585938.378906.917969.378906.332031 0 .664063-.125.917969-.378906l2.699219-2.699219c.34375-.34375.820312-.542968 1.308593-.542968h.941407c.050781 0 .101562-.011719.144531-.027344l2.074219 2.070312c1.066406 1.066406 1.066406 2.800782 0 3.867188L15.125 13.003906c-.042969-.015625-.09375-.027344-.144531-.027344Zm-.25-1.601562L11.417969 9l2.371093-2.375c.0625-.0625.160157-.101562.25-.101562h.496094l1.601563 1.605468c.484375.480469.484375 1.261719 0 1.742188l-1.601563 1.605468h-.496094c-.089843 0-.1875-.039062-.25-.101562ZM4.425781 6.617188 6.808594 9l-2.382813 2.382812c-.0625.0625-.15625.101563-.246093.101563h-.707032L1.863281 9.871094c-.484375-.480469-.484375-1.261719 0-1.742188l1.613281-1.613281h.703126c.089843 0 .183593.039063.246093.101563Zm0 0"
   />
 )

package/src/Icons/icons-path/Plus.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+export const Plus = () => (
+  <path
+    fillRule="evenodd"
+    d="M16.5 7.75h-6.25V1.5h-2.5v6.25H1.5v2.5h6.25v6.25h2.5v-6.25h6.25v-2.5Z"
+    clipRule="evenodd"
+  />
+)

package/src/Icons/icons-path/Sync.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 export const Sync = () => (
   <path
     fillRule="evenodd"
-    d="M15.228 1.731 14.12 2.938C12.175.9 10.174 0 7.64 0 3.935 0 0 2.667 0 7.556h1.347c0-4 3.165-6.173 6.292-6.173 2.182 0 3.86.762 5.56 2.561l-1.405 1.534a.444.444 0 0 0 .327.745h3.435c.245 0 .444-.2.444-.445V2.031a.444.444 0 0 0-.772-.3Zm-.574 6.714H16C16 13.334 12.064 16 8.36 16c-2.534 0-4.535-.9-6.482-2.938L.772 14.268a.444.444 0 0 1-.772-.3v-3.745c0-.247.199-.445.445-.445h3.432c.386 0 .588.46.328.745L2.8 12.055c1.702 1.8 3.379 2.562 5.56 2.562 3.127 0 6.294-2.172 6.294-6.172Z"
+    d="m17.1315 1.947-1.245 1.358C13.6965 1.011 11.4455 0 8.59449 0 4.42749 0 .0004883 3 .0004883 8.5H1.51549c0-4.5 3.561-6.945 7.079-6.945 2.45401 0 4.34101.858 6.25401 2.882l-1.58 1.725c-.294.32-.067.838.368.838h3.864c.276 0 .5-.224.5-.5V2.285c0-.456-.561-.674-.869-.338Zm-.646 7.553h1.515c0 5.5-4.428 8.5-8.59501 8.5-2.851 0-5.102-1.012-7.293-3.306L.868488 16.051c-.103.114-.235.164-.364.164-.257 0-.5039997-.198-.5039997-.501V11.5c0-.277.2229997-.5.4999997-.5H4.36149c.435 0 .662.517.369.838l-1.58 1.723c1.914 2.025 3.801 2.883 6.255 2.883 3.51801 0 7.08001-2.444 7.08001-6.944Z"
     clipRule="evenodd"
   />
 )

package/src/Icons/icons-path/index.ts

@@ -1,6 +1,7 @@
 import { Adjust } from './Adjust'
 import { AngleLeft } from './AngleLeft'
 import { AngleRight } from './AngleRight'
+import { AngleDown } from './AngleDown'
 import { App } from './App'
 import { ArrowLeft } from './ArrowLeft'
 import { SortDown } from './SortDown'
@@ -11,6 +12,7 @@ import { BarcodeRead } from './BarcodeRead'
 import { Bell } from './Bell'
 import { Blog } from './Blog'
 import { Bullhorn } from './Bullhorn'
+import { Calculator } from './Calculator'
 import { CalendarAlt } from './CalendarAlt'
 import { Cog } from './Cog'
 import { Copy } from './Copy'
@@ -36,6 +38,7 @@ import { Order } from './Order'
 import { Pagali } from './Pagali'
 import { PaperList } from './PaperList'
 import { PieChart } from './PieChart'
+import { Plus } from './Plus'
 import { PlusCircle } from './PlusCircle'
 import { Print } from './Print'
 import { InfoCircle } from './InfoCircle'
@@ -46,6 +49,8 @@ import { Trash } from './Trash'
 import { TimesCircle } from './TimesCircle'
 import { Minus } from './Minus'
 import { Tv } from './Tv'
+import { Desktop } from './Desktop'
+import { Mobile } from './Mobile'
 import { Truck } from './Truck'
 import { UsdCircle } from './UsdCircle'
 import { QuestionCircle } from './QuestionCircle'
@@ -64,6 +69,7 @@ export const icons = {
   adjust: Adjust,
   angleLeft: AngleLeft,
   angleRight: AngleRight,
+  angleDown: AngleDown,
   angleDiagonal: AngleDiagonal,
   angleHeight: AngleHeight,
   angleWidth: AngleWidth,
@@ -77,6 +83,7 @@ export const icons = {
   bell: Bell,
   blog: Blog,
   bullhorn: Bullhorn,
+  calculator: Calculator,
   calendarAlt: CalendarAlt,
   camera: Camera,
   check: Check,
@@ -105,6 +112,7 @@ export const icons = {
   pagali: Pagali,
   paperList: PaperList,
   pieChart: PieChart,
+  plus: Plus,
   plusCircle: PlusCircle,
   print: Print,
   shoppingCart: ShoppingCart,
@@ -118,6 +126,8 @@ export const icons = {
   timesCircle: TimesCircle,
   minus: Minus,
   tv: Tv,
+  desktop: Desktop,
+  mobile: Mobile,
   truck: Truck,
   usdCircle: UsdCircle,
   questionCircle: QuestionCircle,