@bitrise/bitkit 9.4.1 → 9.4.3-alpha-chakra.2

package/src/Dropdown/Dropdown.tsx

@@ -41,17 +41,15 @@ const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
   const { children, options, onChange, selected, maxHeight, ...rest } = props;
   const [visible, setVisible] = useState(false);
 
-  const handleToggleVisible = () => setVisible(!visible);
-
   const handleChange = (value: DropdownValue) => {
     if (onChange) {
       onChange(value);
     }
-    handleToggleVisible();
+    setVisible(false);
   };
 
   const renderOption = ({ text, value }: Option) => (
-    <DropdownMenuItem onClick={() => handleChange(value)} selected={selected === value}>
+    <DropdownMenuItem onClick={() => handleChange(value)} selected={selected === value} width="100%">
       {text}
     </DropdownMenuItem>
   );
@@ -60,15 +58,22 @@ const Dropdown: React.FunctionComponent<Props> = (props: Props) => {
     <PlacementManager>
       <PlacementReference>
         {({ ref }) => (
-          <DropdownButton {...rest} alignChildrenHorizontal="start" innerRef={ref} onClick={handleToggleVisible}>
+          <DropdownButton
+            {...rest}
+            alignChildrenHorizontal="start"
+            innerRef={ref}
+            onClick={() => {
+              setVisible(!visible);
+            }}
+          >
             <Text ellipsis>{children}</Text>
           </DropdownButton>
         )}
       </PlacementReference>
 
-      <Placement onClose={handleToggleVisible} visible={visible}>
-        {({ width }) => (
-          <DropdownMenu maxHeight={maxHeight} width={width}>
+      <Placement onClose={() => setVisible(false)} sameWidth visible={visible}>
+        {() => (
+          <DropdownMenu maxHeight={maxHeight} width="100%">
             {options.map((option) => (
               <React.Fragment key={option.text}>
                 {'options' in option ? (

package/src/Dropdown/DropdownMenu.css

@@ -15,7 +15,7 @@
 .DropdownMenu__group-text::after {
   content: '';
   flex: 1;
-  /* stylelint-disable-next-line unit-blacklist */
+  /* stylelint-disable-next-line unit-disallowed-list */
   height: 1px;
   background-color: var(--color-gray--3);
 }

package/src/Foundations/Colors/Colors.examples.tsx

@@ -0,0 +1,13 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ColorPalette, ColorItem } from '@storybook/addon-docs';
+import colors from './Colors';
+
+export const Palette = () => (
+  <ColorPalette>
+    {Object.keys(colors).map((key) => (
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      /* @ts-ignore */
+      <ColorItem title={key.toUpperCase()} subtitle="subtitle" colors={colors[key]} key={key} />
+    ))}
+  </ColorPalette>
+);

package/src/Foundations/Colors/Colors.stories.mdx

@@ -0,0 +1,8 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import { Palette } from './Colors.examples';
+
+<Meta title="Foundations/Colors" />
+
+# Colors
+
+<Palette />

package/src/Foundations/Colors/Colors.ts

@@ -0,0 +1,128 @@
+const colors = {
+  neutral: {
+    10: '#201B22',
+    20: '#362D39',
+    30: '#49404F',
+    40: '#6B6071',
+    50: '#7D7184',
+    60: '#94879B',
+    70: '#AFA4B4',
+    80: '#C9C1CD',
+    90: '#DFDAE1',
+    93: '#EFEBEF',
+    95: '#F6F4F6',
+    100: '#FFFFFF',
+  },
+  purple: {
+    10: '#2B0E3F',
+    20: '#421560',
+    30: '#5C2A7E',
+    40: '#7B3BA5',
+    50: '#9247C2',
+    60: '#AE63DE',
+    70: '#C289E6',
+    80: '#D5ADEB',
+    90: '#EAD4F2',
+    93: '#F3E7F9',
+    95: '#F9F2FD',
+    100: '#FFFFFF',
+  },
+  red: {
+    10: '#47060C',
+    20: '#630811',
+    30: '#78111C',
+    40: '#A91E2E',
+    50: '#D72D40',
+    60: '#F7596C',
+    70: '#FF8091',
+    80: '#FFA8B5',
+    90: '#FFCCD5',
+    93: '#FFE5EB',
+    95: '#FFF0F3',
+    100: '#FFFFFF',
+  },
+  orange: {
+    10: '#421000',
+    20: '#661900',
+    30: '#7A2200',
+    40: '#A33500',
+    50: '#D45202',
+    60: '#ED720C',
+    70: '#FD9730',
+    80: '#FFB766',
+    90: '#FFD5A3',
+    93: '#FFE9CF',
+    95: '#FFF4E5',
+    100: '#FFFFFF',
+  },
+  yellow: {
+    10: '#2E1C00',
+    20: '#4D2F00',
+    30: '#613E00',
+    40: '#875B00',
+    50: '#B27E00',
+    60: '#D6A200',
+    70: '#EBBA00',
+    80: '#F9CC15',
+    90: '#FBE074',
+    93: '#FFEFAD',
+    95: '#FFF6D1',
+    100: '#FFFFFF',
+  },
+  green: {
+    10: '#042A0F',
+    20: '#064217',
+    30: '#0B5620',
+    40: '#167231',
+    50: '#2A9D4C',
+    60: '#4EB76C',
+    70: '#77CF8F',
+    80: '#A1DEB2',
+    90: '#C3EACE',
+    93: '#E1F4E7',
+    95: '#EEF9F1',
+    100: '#FFFFFF',
+  },
+  turquoise: {
+    10: '#002924',
+    20: '#003D36',
+    30: '#005248',
+    40: '#007366',
+    50: '#009E8E',
+    60: '#11BBA9',
+    70: '#55CEC3',
+    80: '#8AE0D7',
+    90: '#AEEFE8',
+    93: '#D8F8F4',
+    95: '#E9FBF9',
+    100: '#FFFFFF',
+  },
+  blue: {
+    10: '#002442',
+    20: '#00315C',
+    30: '#044781',
+    40: '#1066AC',
+    50: '#2582D0',
+    60: '#4F9BDE',
+    70: '#71B8EF',
+    80: '#99D1F5',
+    90: '#C2E7FA',
+    93: '#DEF2FC',
+    95: '#ECF8FD',
+    100: '#FFFFFF',
+  },
+  brand: {
+    primary: '#5C2A7E', // purple.30
+  },
+  text: {
+    body: '#201B22', // neutral.10
+    secondary: '#6B6071', // neutral.40
+    link: '#9247C2', // purple.50
+    linkHover: '#5C2A7E', // purple.30
+  },
+  separator: {
+    primary: '#DFDAE1', // neutral.90,
+  },
+};
+
+export default colors;

package/src/Foundations/Radii/Radii.examples.tsx

@@ -0,0 +1,17 @@
+import { Box, HStack, VStack } from '@chakra-ui/react';
+import Provider from '@/Components/Provider/Provider';
+import Text from '@/Components/Text/Text';
+import radii from './Radii.theme';
+
+export const Radii = () => (
+  <Provider>
+    <HStack alignItems="flex-end" spacing="24">
+      {Object.keys(radii).map((size) => (
+        <VStack key={size}>
+          <Box width="64" height="64" border="3px solid" borderColor="brand.primary" borderRadius={size} />
+          <Text>{size}</Text>
+        </VStack>
+      ))}
+    </HStack>
+  </Provider>
+);

package/src/Foundations/Radii/Radii.stories.mdx

@@ -0,0 +1,8 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { Radii } from './Radii.examples';
+
+<Meta title="Foundations/Radii (round corners)" />
+
+# Radii (round corners)
+
+<Canvas><Radii /></Canvas>

package/src/Foundations/Radii/Radii.theme.ts

@@ -0,0 +1,9 @@
+const radii = {
+  4: '4px',
+  8: '8px',
+  12: '12px',
+  16: '16px',
+  24: '24px',
+};
+
+export default radii;

package/src/Foundations/Shadows/Shadows.examples.tsx

@@ -0,0 +1,17 @@
+import { Box, HStack, VStack } from '@chakra-ui/react';
+import Provider from '@/Components/Provider/Provider';
+import Text from '@/Components/Text/Text';
+import shadows from './Shadows';
+
+export const Shadows = () => (
+  <Provider>
+    <HStack alignItems="flex-end" spacing="32">
+      {Object.keys(shadows).map((key) => (
+        <VStack key={key}>
+          <Box width="32" height="32" background="purple.80" boxShadow={key} />
+          <Text>{key}</Text>
+        </VStack>
+      ))}
+    </HStack>
+  </Provider>
+);

package/src/Foundations/Shadows/Shadows.stories.mdx

@@ -0,0 +1,8 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { Shadows } from './Shadows.examples';
+
+<Meta title="Foundations/Shadows" />
+
+# Shadows
+
+<Canvas><Shadows /></Canvas>

package/src/Foundations/Shadows/Shadows.ts

@@ -0,0 +1,9 @@
+const shadows = {
+  small: '0 2px 4px 0 rgba(0, 0, 0, 0.06)',
+  medium: '0 2px 12px 0 rgba(0, 0, 0, 0.06)',
+  large: '0 2px 24px 0 rgba(0, 0, 0, 0.08)',
+  inner: '0 2px 3px 0 rgba(0, 0, 0, 0.1) inset',
+  none: 'none',
+};
+
+export default shadows;

package/src/Foundations/Sizes/Sizes.examples.tsx

@@ -0,0 +1,17 @@
+import { Box, HStack, VStack } from '@chakra-ui/react';
+import Provider from '@/Components/Provider/Provider';
+import Text from '@/Components/Text/Text';
+import sizes from './Sizes';
+
+export const Sizes = () => (
+  <Provider>
+    <HStack alignItems="flex-end" spacing="24">
+      {Object.keys(sizes).map((size) => (
+        <VStack key={size}>
+          <Box width={size} height={size} background="brand.primary" />
+          <Text>{size}</Text>
+        </VStack>
+      ))}
+    </HStack>
+  </Provider>
+);

package/src/Foundations/Sizes/Sizes.stories.mdx

@@ -0,0 +1,8 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { Sizes } from './Sizes.examples';
+
+<Meta title="Foundations/Sizes" />
+
+# Sizes
+
+<Canvas><Sizes /></Canvas>

package/src/Foundations/Sizes/Sizes.ts

@@ -0,0 +1,14 @@
+const sizes = {
+  4: '4px',
+  8: '8px',
+  12: '12px',
+  16: '16px',
+  24: '24px',
+  32: '32px',
+  48: '48px',
+  64: '64px',
+  96: '96px',
+  128: '128px',
+};
+
+export default sizes;

package/src/Foundations/Typography/Typography.examples.tsx

@@ -0,0 +1,50 @@
+import { VStack } from '@chakra-ui/react';
+import Provider from '@/Components/Provider/Provider';
+import Text from '@/Components/Text/Text';
+import typography from './Typography';
+
+const style = {
+  counterReset: 'sizes',
+  listStyle: 'none',
+  li: {
+    counterIncrement: 'sizes',
+    _before: {
+      content: '"Size " counter(sizes) ":"',
+      display: 'inline-block',
+      minWidth: '150px',
+      marginRight: '16px',
+      textAlign: 'left',
+    },
+  },
+};
+
+export const FontSizes = () => (
+  <Provider>
+    <VStack as="ol" alignItems="flex-start" spacing={24} sx={style}>
+      <Text as="li" size="1">
+        {typography.fontSizes[1]} / {typography.lineHeights[1]} / Normal / Uppercase
+      </Text>
+      <Text as="li" size="2">
+        {typography.fontSizes[2]} / {typography.lineHeights[2]} / Normal
+      </Text>
+      <Text as="li" size="3">
+        {typography.fontSizes[3]} / {typography.lineHeights[3]} / Normal
+      </Text>
+      <Text as="li" size="4">
+        {typography.fontSizes[4]} / {typography.lineHeights[4]} / Normal
+      </Text>
+      <Text as="li" size="5">
+        {typography.fontSizes[5]} / {typography.lineHeights[5]} / Bold
+      </Text>
+      <Text as="li" size="6">
+        {typography.fontSizes[6]} / {typography.lineHeights[6]} / Bold
+      </Text>
+      <Text as="li" size="7">
+        {typography.fontSizes[7]} / {typography.lineHeights[7]} / Bold
+      </Text>
+      <Text as="li" size="8">
+        {typography.fontSizes[8]} / {typography.lineHeights[8]} / Bold
+      </Text>
+    </VStack>
+  </Provider>
+);

package/src/Foundations/Typography/Typography.stories.mdx

@@ -0,0 +1,14 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { FontSizes } from './Typography.examples';
+
+<Meta title="Foundations/Typography" />
+
+# Typography
+
+**Font:** TT Norms Pro
+
+**Weights:** 400(regular), **700(bold)**
+
+<Canvas><FontSizes /></Canvas>
+
+[Go to `Text` component](?path=/story/components-text--with-props)

package/src/Foundations/Typography/Typography.ts

@@ -0,0 +1,32 @@
+const typography = {
+  fonts: {
+    body: `"TT Norms Pro", sans-serif`,
+    mono: `"Source Code Pro Bitrise", monospace`,
+  },
+  fontSizes: {
+    1: '11px',
+    2: '14px',
+    3: '16px',
+    4: '19px',
+    5: '24px',
+    6: '30px',
+    7: '36px',
+    8: '48px',
+  },
+  fontWeights: {
+    normal: 400,
+    bold: 700,
+  },
+  lineHeights: {
+    1: '16px',
+    2: '20px',
+    3: '24px',
+    4: '28px',
+    5: '36px',
+    6: '40px',
+    7: '48px',
+    8: '60px',
+  },
+};
+
+export default typography;

package/src/Icon/tsx/IconsAddOns.tsx

@@ -2,11 +2,12 @@
 import * as React from 'react';
 
 const SvgIconsAddOns = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg { ...props } viewBox="0 0 24 24">
+  <svg {...props} viewBox="0 0 24 24">
     <path
-        d="M20 17.767a.502.502 0 0 1-.25.434l-3.001 1.732a.5.5 0 0 1-.499-.001l-2.999-1.73a.504.504 0 0 1-.251-.435V14.15c0-.178.096-.343.248-.432l.002-.001 3-1.732.001-.001a.503.503 0 0 1 .499 0l2.999 1.73c.155.09.251.257.251.436v3.616zm-9.25.434-3.001 1.732a.5.5 0 0 1-.499-.001l-2.999-1.73A.504.504 0 0 1 4 17.767V14.15c0-.18.096-.345.25-.434l3.001-1.732a.503.503 0 0 1 .499 0l3 1.733h.002c.153.09.248.255.248.433v3.616a.502.502 0 0 1-.25.434zM8.5 6.23c0-.178.096-.344.25-.433l3.001-1.732a.503.503 0 0 1 .499 0l2.999 1.73c.155.09.251.257.251.436V9.82a.501.501 0 0 1-.25.432l-3.001 1.733h-.001a.496.496 0 0 1-.496 0l-.002-.001-2.108-1.217-.892-.515a.501.501 0 0 1-.25-.432V6.23zm12.25 5.754-2.999-1.731c-.093-.053-.195-.08-.293-.121.014-.104.042-.206.042-.312V6.23a2.51 2.51 0 0 0-1.25-2.165l-2.999-1.731a2.505 2.505 0 0 0-2.501-.001L7.749 4.067A2.51 2.51 0 0 0 6.5 6.232V9.82c0 .106.028.208.042.312-.098.04-.199.067-.292.12l-3.001 1.733A2.51 2.51 0 0 0 2 14.15v3.616c0 .89.479 1.719 1.25 2.166l2.999 1.73a2.49 2.49 0 0 0 1.251.335c.433 0 .865-.111 1.25-.334l3.001-1.732c.092-.054.165-.128.249-.192.084.064.157.139.25.193l2.999 1.73a2.49 2.49 0 0 0 1.251.335c.433 0 .865-.111 1.25-.334l3.001-1.732A2.51 2.51 0 0 0 22 17.767V14.15c0-.89-.479-1.72-1.25-2.166z"
-        fill="currentColor"
-        fillRule="evenodd"/>
+      d="M20 17.767a.502.502 0 0 1-.25.434l-3.001 1.732a.5.5 0 0 1-.499-.001l-2.999-1.73a.504.504 0 0 1-.251-.435V14.15c0-.178.096-.343.248-.432l.002-.001 3-1.732.001-.001a.503.503 0 0 1 .499 0l2.999 1.73c.155.09.251.257.251.436v3.616zm-9.25.434-3.001 1.732a.5.5 0 0 1-.499-.001l-2.999-1.73A.504.504 0 0 1 4 17.767V14.15c0-.18.096-.345.25-.434l3.001-1.732a.503.503 0 0 1 .499 0l3 1.733h.002c.153.09.248.255.248.433v3.616a.502.502 0 0 1-.25.434zM8.5 6.23c0-.178.096-.344.25-.433l3.001-1.732a.503.503 0 0 1 .499 0l2.999 1.73c.155.09.251.257.251.436V9.82a.501.501 0 0 1-.25.432l-3.001 1.733h-.001a.496.496 0 0 1-.496 0l-.002-.001-2.108-1.217-.892-.515a.501.501 0 0 1-.25-.432V6.23zm12.25 5.754-2.999-1.731c-.093-.053-.195-.08-.293-.121.014-.104.042-.206.042-.312V6.23a2.51 2.51 0 0 0-1.25-2.165l-2.999-1.731a2.505 2.505 0 0 0-2.501-.001L7.749 4.067A2.51 2.51 0 0 0 6.5 6.232V9.82c0 .106.028.208.042.312-.098.04-.199.067-.292.12l-3.001 1.733A2.51 2.51 0 0 0 2 14.15v3.616c0 .89.479 1.719 1.25 2.166l2.999 1.73a2.49 2.49 0 0 0 1.251.335c.433 0 .865-.111 1.25-.334l3.001-1.732c.092-.054.165-.128.249-.192.084.064.157.139.25.193l2.999 1.73a2.49 2.49 0 0 0 1.251.335c.433 0 .865-.111 1.25-.334l3.001-1.732A2.51 2.51 0 0 0 22 17.767V14.15c0-.89-.479-1.72-1.25-2.166z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
   </svg>
 );
 

package/src/Icon/tsx/IconsAddOnsColorTuorqouise.tsx

@@ -1,17 +1,17 @@
 // THIS IS AN AUTOGERENATED FILE. DO NOT EDIT IT. CHECK README ON HOW TO MANAGE ICONS INSTEAD.
 import * as React from 'react';
 
-const SvgIconsAddOnsColorTuorqouise = (
-  props: React.SVGProps<SVGSVGElement>
-) => (
-  <svg { ...props } viewBox="0 0 24 24">
+const SvgIconsAddOnsColorTuorqouise = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg {...props} viewBox="0 0 24 24">
     <g fill="#0DD3C5" fillRule="evenodd">
       <path
-          d="M12 13.433v5.973l-4.001 2.322a1.988 1.988 0 0 1-1.998 0l-3-1.741A2.015 2.015 0 0 1 2 18.244v-3.649c0-.72.382-1.384 1.001-1.742L7 10.532l5 2.901z"
-          opacity={ 0.8 }/>
+        d="M12 13.433v5.973l-4.001 2.322a1.988 1.988 0 0 1-1.998 0l-3-1.741A2.015 2.015 0 0 1 2 18.244v-3.649c0-.72.382-1.384 1.001-1.742L7 10.532l5 2.901z"
+        opacity={0.8}
+      />
       <path
-          d="M22 14.595v3.65c0 .718-.382 1.383-1.001 1.741l-3 1.742a1.992 1.992 0 0 1-1.998 0L12 19.406v-5.972l5-2.902 3.999 2.321A2.012 2.012 0 0 1 22 14.595"
-          opacity={ 0.5 }/>
+        d="M22 14.595v3.65c0 .718-.382 1.383-1.001 1.741l-3 1.742a1.992 1.992 0 0 1-1.998 0L12 19.406v-5.972l5-2.902 3.999 2.321A2.012 2.012 0 0 1 22 14.595"
+        opacity={0.5}
+      />
       <path d="M17 5.753v4.779l-5 2.902-5-2.902v-4.78a2.01 2.01 0 0 1 1.001-1.741l3-1.742a1.992 1.992 0 0 1 1.998 0l3 1.742A2.012 2.012 0 0 1 17 5.753" />
     </g>
   </svg>

package/src/Icon/tsx/IconsAddOnsColorViolet.tsx

@@ -2,14 +2,16 @@
 import * as React from 'react';
 
 const SvgIconsAddOnsColorViolet = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg { ...props } viewBox="0 0 24 24">
+  <svg {...props} viewBox="0 0 24 24">
     <g fill="#990FC3" fillRule="evenodd">
       <path
-          d="M12 13.433v5.973l-4.001 2.322a1.988 1.988 0 0 1-1.998 0l-3-1.741A2.015 2.015 0 0 1 2 18.244v-3.649c0-.72.382-1.384 1.001-1.742L7 10.532l5 2.901z"
-          opacity={ 0.8 }/>
+        d="M12 13.433v5.973l-4.001 2.322a1.988 1.988 0 0 1-1.998 0l-3-1.741A2.015 2.015 0 0 1 2 18.244v-3.649c0-.72.382-1.384 1.001-1.742L7 10.532l5 2.901z"
+        opacity={0.8}
+      />
       <path
-          d="M22 14.595v3.65c0 .718-.382 1.383-1.001 1.741l-3 1.742a1.992 1.992 0 0 1-1.998 0L12 19.406v-5.972l5-2.902 3.999 2.321A2.012 2.012 0 0 1 22 14.595"
-          opacity={ 0.5 }/>
+        d="M22 14.595v3.65c0 .718-.382 1.383-1.001 1.741l-3 1.742a1.992 1.992 0 0 1-1.998 0L12 19.406v-5.972l5-2.902 3.999 2.321A2.012 2.012 0 0 1 22 14.595"
+        opacity={0.5}
+      />
       <path d="M17 5.753v4.779l-5 2.902-5-2.902v-4.78a2.01 2.01 0 0 1 1.001-1.741l3-1.742a1.992 1.992 0 0 1 1.998 0l3 1.742A2.012 2.012 0 0 1 17 5.753" />
     </g>
   </svg>

package/src/Icon/tsx/IconsAddOnsWhite.tsx

@@ -2,14 +2,16 @@
 import * as React from 'react';
 
 const SvgIconsAddOnsWhite = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg { ...props } viewBox="0 0 24 24">
+  <svg {...props} viewBox="0 0 24 24">
     <g fill="#FFF" fillRule="evenodd">
       <path
-          d="M12 13.433v5.973l-4.001 2.322a1.988 1.988 0 0 1-1.998 0l-3-1.741A2.015 2.015 0 0 1 2 18.244v-3.649c0-.72.382-1.384 1.001-1.742L7 10.532l5 2.901z"
-          opacity={ 0.8 }/>
+        d="M12 13.433v5.973l-4.001 2.322a1.988 1.988 0 0 1-1.998 0l-3-1.741A2.015 2.015 0 0 1 2 18.244v-3.649c0-.72.382-1.384 1.001-1.742L7 10.532l5 2.901z"
+        opacity={0.8}
+      />
       <path
-          d="M22 14.595v3.65c0 .718-.382 1.383-1.001 1.741l-3 1.742a1.992 1.992 0 0 1-1.998 0L12 19.406v-5.972l5-2.902 3.999 2.321A2.012 2.012 0 0 1 22 14.595"
-          opacity={ 0.5 }/>
+        d="M22 14.595v3.65c0 .718-.382 1.383-1.001 1.741l-3 1.742a1.992 1.992 0 0 1-1.998 0L12 19.406v-5.972l5-2.902 3.999 2.321A2.012 2.012 0 0 1 22 14.595"
+        opacity={0.5}
+      />
       <path d="M17 5.753v4.779l-5 2.902-5-2.902v-4.78a2.01 2.01 0 0 1 1.001-1.741l3-1.742a1.992 1.992 0 0 1 1.998 0l3 1.742A2.012 2.012 0 0 1 17 5.753" />
     </g>
   </svg>

package/src/Icon/tsx/IconsApp.tsx

@@ -2,11 +2,12 @@
 import * as React from 'react';
 
 const SvgIconsApp = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg { ...props } viewBox="0 0 24 24">
+  <svg {...props} viewBox="0 0 24 24">
     <defs>
       <path
-          d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4 10c0 .7-.2 1.4-.6 2l-2-2 2-2c.4.6.6 1.3.6 2zm-8 0c0-.7.2-1.4.6-2l2 2-2 2c-.4-.6-.6-1.3-.6-2zm2-3.4c.6-.4 1.3-.6 2-.6s1.4.2 2 .6l-2 2-2-2zm2 4.8 2 2c-.6.4-1.3.6-2 .6s-1.4-.2-2-.6l2-2zm3.5-6.3C14.5 6.4 13.3 6 12 6c-1.3 0-2.5.4-3.5 1.1L5.4 4h13.2l-3.1 3.1zM7.1 8.5C6.4 9.5 6 10.7 6 12c0 1.3.4 2.5 1.1 3.5L4 18.6V5.4l3.1 3.1zm1.4 8.4c1 .7 2.2 1.1 3.5 1.1 1.3 0 2.5-.4 3.5-1.1l3.1 3.1H5.4l3.1-3.1zm8.4-1.4c.7-1 1.1-2.2 1.1-3.5 0-1.3-.4-2.5-1.1-3.5L20 5.4v13.2l-3.1-3.1z"
-          id="icons-app_svg__a"/>
+        d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4 10c0 .7-.2 1.4-.6 2l-2-2 2-2c.4.6.6 1.3.6 2zm-8 0c0-.7.2-1.4.6-2l2 2-2 2c-.4-.6-.6-1.3-.6-2zm2-3.4c.6-.4 1.3-.6 2-.6s1.4.2 2 .6l-2 2-2-2zm2 4.8 2 2c-.6.4-1.3.6-2 .6s-1.4-.2-2-.6l2-2zm3.5-6.3C14.5 6.4 13.3 6 12 6c-1.3 0-2.5.4-3.5 1.1L5.4 4h13.2l-3.1 3.1zM7.1 8.5C6.4 9.5 6 10.7 6 12c0 1.3.4 2.5 1.1 3.5L4 18.6V5.4l3.1 3.1zm1.4 8.4c1 .7 2.2 1.1 3.5 1.1 1.3 0 2.5-.4 3.5-1.1l3.1 3.1H5.4l3.1-3.1zm8.4-1.4c.7-1 1.1-2.2 1.1-3.5 0-1.3-.4-2.5-1.1-3.5L20 5.4v13.2l-3.1-3.1z"
+        id="icons-app_svg__a"
+      />
     </defs>
     <use fill="currentColor" fillRule="evenodd" xlinkHref="#icons-app_svg__a" />
   </svg>

package/src/Icon/tsx/IconsArrowBack.tsx

@@ -2,11 +2,12 @@
 import * as React from 'react';
 
 const SvgIconsArrowBack = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg { ...props } viewBox="0 0 24 24">
+  <svg {...props} viewBox="0 0 24 24">
     <path
-        d="M5.615 11h8.199v2H5.642l3.23 3.23-1.415 1.414L1.8 11.987 7.457 6.33 8.87 7.744 5.615 11zm16.199 0v2h-2v-2h2zm-3 0v2h-4v-2h4z"
-        fill="currentColor"
-        fillRule="evenodd"/>
+      d="M5.615 11h8.199v2H5.642l3.23 3.23-1.415 1.414L1.8 11.987 7.457 6.33 8.87 7.744 5.615 11zm16.199 0v2h-2v-2h2zm-3 0v2h-4v-2h4z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
   </svg>
 );
 

package/src/Icon/tsx/IconsArrowDown.tsx

@@ -2,17 +2,19 @@
 import * as React from 'react';
 
 const SvgIconsArrowDown = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg { ...props } viewBox="0 0 24 24">
+  <svg {...props} viewBox="0 0 24 24">
     <defs>
       <path
-          d="m18.308 10.92-3.255-3.256 1.414-1.414 5.657 5.657-5.657 5.657-1.414-1.415 3.23-3.229H10.11v-2h8.198zm-16.198 0h2v2h-2v-2zm3 0h4v2h-4v-2z"
-          id="icons-arrow-down_svg__a"/>
+        d="m18.308 10.92-3.255-3.256 1.414-1.414 5.657 5.657-5.657 5.657-1.414-1.415 3.23-3.229H10.11v-2h8.198zm-16.198 0h2v2h-2v-2zm3 0h4v2h-4v-2z"
+        id="icons-arrow-down_svg__a"
+      />
     </defs>
     <use
-        fill="currentColor"
-        fillRule="evenodd"
-        transform="rotate(90 12.017 11.907)"
-        xlinkHref="#icons-arrow-down_svg__a"/>
+      fill="currentColor"
+      fillRule="evenodd"
+      transform="rotate(90 12.017 11.907)"
+      xlinkHref="#icons-arrow-down_svg__a"
+    />
   </svg>
 );
 

package/src/Icon/tsx/IconsArrowForward.tsx

@@ -2,16 +2,14 @@
 import * as React from 'react';
 
 const SvgIconsArrowForward = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg { ...props } viewBox="0 0 24 24">
+  <svg {...props} viewBox="0 0 24 24">
     <defs>
       <path
-          d="m18.198 11-3.255-3.256 1.414-1.414 5.657 5.657-5.657 5.657-1.414-1.415L18.173 13H10v-2h8.198zM2 11h2v2H2v-2zm3 0h4v2H5v-2z"
-          id="icons-arrow-forward_svg__a"/>
+        d="m18.198 11-3.255-3.256 1.414-1.414 5.657 5.657-5.657 5.657-1.414-1.415L18.173 13H10v-2h8.198zM2 11h2v2H2v-2zm3 0h4v2H5v-2z"
+        id="icons-arrow-forward_svg__a"
+      />
     </defs>
-    <use
-        fill="currentColor"
-        fillRule="evenodd"
-        xlinkHref="#icons-arrow-forward_svg__a"/>
+    <use fill="currentColor" fillRule="evenodd" xlinkHref="#icons-arrow-forward_svg__a" />
   </svg>
 );
 

package/src/Icon/tsx/IconsArrowQuit.tsx

@@ -2,11 +2,12 @@
 import * as React from 'react';
 
 const SvgIconsArrowQuit = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg { ...props } viewBox="0 0 24 24">
+  <svg {...props} viewBox="0 0 24 24">
     <path
-        d="M12.994 15H22v2h-9a2 2 0 0 1-2-2h-.006V7.492l-3.23 3.23L6.35 9.306l5.657-5.657 5.657 5.657-1.415 1.414-3.255-3.256V15z"
-        fill="currentColor"
-        fillRule="evenodd"/>
+      d="M12.994 15H22v2h-9a2 2 0 0 1-2-2h-.006V7.492l-3.23 3.23L6.35 9.306l5.657-5.657 5.657 5.657-1.415 1.414-3.255-3.256V15z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
   </svg>
 );
 

package/src/Icon/tsx/IconsArrowUp.tsx

@@ -2,11 +2,12 @@
 import * as React from 'react';
 
 const SvgIconsArrowUp = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg { ...props } viewBox="0 0 24 24">
+  <svg {...props} viewBox="0 0 24 24">
     <path
-        d="M10.92 5.695 7.664 8.951 6.25 7.537l5.657-5.657 5.657 5.657-1.415 1.414-3.229-3.23v8.173h-2V5.695zm0 16.199v-2h2v2h-2zm0-3v-4h2v4h-2z"
-        fill="currentColor"
-        fillRule="evenodd"/>
+      d="M10.92 5.695 7.664 8.951 6.25 7.537l5.657-5.657 5.657 5.657-1.415 1.414-3.229-3.23v8.173h-2V5.695zm0 16.199v-2h2v2h-2zm0-3v-4h2v4h-2z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
   </svg>
 );