@bitrise/bitkit 12.117.0 → 12.118.1-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.117.0",
+  "version": "12.118.1-alpha.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -42,7 +42,7 @@
     "luxon": "^3.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-focus-lock": "^2.10.1",
+    "react-focus-lock": "^2.11.1",
     "react-imask": "^7.4.0",
     "react-markdown": "^9.0.1"
   },
@@ -58,34 +58,34 @@
     "@bitrise/eslint-plugin": "^2.5.0",
     "@chakra-ui/cli": "^2.4.1",
     "@google-cloud/storage": "^7.7.0",
-    "@storybook/addon-actions": "^7.6.15",
-    "@storybook/addon-essentials": "^7.6.15",
-    "@storybook/addon-interactions": "^7.6.15",
-    "@storybook/addon-links": "^7.6.15",
-    "@storybook/addons": "^7.6.15",
-    "@storybook/blocks": "^7.6.15",
-    "@storybook/react": "^7.6.15",
-    "@storybook/react-webpack5": "^7.6.15",
-    "@storybook/theming": "^7.6.15",
+    "@storybook/addon-actions": "^7.6.17",
+    "@storybook/addon-essentials": "^7.6.17",
+    "@storybook/addon-interactions": "^7.6.17",
+    "@storybook/addon-links": "^7.6.17",
+    "@storybook/addons": "^7.6.17",
+    "@storybook/blocks": "^7.6.17",
+    "@storybook/react": "^7.6.17",
+    "@storybook/react-webpack5": "^7.6.17",
+    "@storybook/theming": "^7.6.17",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/luxon": "^3.4.2",
-    "@types/react": "^18.2.55",
+    "@types/react": "^18.2.57",
     "@types/react-dom": "^18.2.19",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "axios": "^1.6.7",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.8.0",
+    "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-testing-library": "^6.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
@@ -93,8 +93,8 @@
     "jsdom": "^24.0.0",
     "prettier": "^3.2.5",
     "react-hook-form": "^7.50.1",
-    "release-it": "^17.0.5",
-    "storybook": "^7.6.15",
+    "release-it": "^17.1.1",
+    "storybook": "^7.6.17",
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3"
   },

package/src/Components/Button/Button.theme.ts

@@ -1,150 +1,100 @@
-export const disabledStates = {
-  primary: {
-    _disabled: {
-      bgGradient: 'linear(to-b, neutral.80, neutral.70)',
-      borderColor: 'neutral.70',
-    },
-  },
-  secondary: {
-    _disabled: {
-      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
-      borderColor: 'neutral.90',
-      color: 'neutral.70',
-    },
-  },
-  tertiary: {
-    _disabled: {
-      background: 'transparent',
-      borderColor: 'transparent',
-      color: 'neutral.70',
-    },
-  },
+/* eslint-disable sort/object-properties */
+import { defineStyle, defineStyleConfig, SystemStyleInterpolation } from '@chakra-ui/styled-system';
+import { rem } from '../../utils/utils';
+import { ButtonProps } from './Button';
+
+const baseStyle = defineStyle({
+  borderRadius: '4',
+});
+
+const sizes = {
+  lg: defineStyle((props) => {
+    return {
+      paddingBlock: rem(11),
+      paddingInlineEnd: props.rightIcon ? rem(11) : rem(15),
+      paddingInlineStart: props.leftIcon ? rem(11) : rem(15),
+      textStyle: 'comp/button/lg',
+      minWidth: 48,
+      minHeight: 48,
+    };
+  }),
+  md: defineStyle((props) => {
+    return {
+      paddingBlock: rem(9),
+      paddingInlineEnd: props.rightIcon ? rem(11) : rem(15),
+      paddingInlineStart: props.leftIcon ? rem(11) : rem(15),
+      textStyle: 'comp/button/md',
+      minWidth: 40,
+      minHeight: 40,
+    };
+  }),
+  sm: defineStyle((props) => {
+    return {
+      paddingBlock: rem(5),
+      paddingInlineEnd: props.rightIcon ? rem(7) : rem(11),
+      paddingInlineStart: props.leftIcon ? rem(7) : rem(11),
+      textStyle: 'comp/button/sm',
+      minWidth: 32,
+      minHeight: 32,
+    };
+  }),
 };
 
-const ButtonTheme = {
-  baseStyle: {
-    _disabled: {
-      cursor: 'not-allowed',
-    },
-    _hover: {
-      _disabled: {
-        bg: 'initial',
-      },
-    },
-    border: '0.0625rem solid',
-    borderRadius: '4',
-  },
-  sizes: {
-    medium: {
-      fontSize: '3',
-      height: '48',
-      minWidth: '48',
-      paddingX: '16',
-    },
-    small: {
-      fontSize: '2',
-      height: '32',
-      minWidth: '32',
-      paddingX: '12',
-    },
-  },
-  variants: {
-    primary: {
-      _active: {
-        bgGradient: 'linear(to-b, purple.10, purple.10)',
-        ...disabledStates.primary,
-      },
-      _hover: {
-        bgGradient: 'linear(to-b, purple.30, purple.10)',
-        ...disabledStates.primary,
-      },
-      bgGradient: 'linear(to-b, purple.40, purple.20)',
-      borderColor: 'purple.40',
-      color: 'neutral.95',
-      fontWeight: 'bold',
-      ...disabledStates.primary,
-    },
-    'primary--danger': {
-      _active: {
-        bgGradient: 'linear(to-b, red.20, red.20)',
-        borderColor: 'red.20',
-        ...disabledStates.primary,
-      },
-      _hover: {
-        bgGradient: 'linear(to-b, red.40, red.20)',
-        borderColor: 'red.40',
-        ...disabledStates.primary,
-      },
-      bgGradient: 'linear(to-b, red.50, red.30)',
-      borderColor: 'red.50',
-      color: 'neutral.95',
-      fontWeight: 'bold',
-      ...disabledStates.primary,
-    },
-    secondary: {
-      _active: {
-        bgGradient: 'linear(to-b, neutral.90, neutral.90)',
-        borderColor: 'neutral.80',
-        ...disabledStates.secondary,
-      },
-      _hover: {
-        bgGradient: 'linear(to-b, neutral.93, neutral.93)',
-        ...disabledStates.secondary,
-      },
-      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
-      borderColor: 'neutral.90',
-      color: 'purple.10',
-      ...disabledStates.secondary,
-    },
-    'secondary--danger': {
-      _active: {
-        bgGradient: 'linear(to-b, red.90, red.90)',
-        borderColor: 'red.70',
-        ...disabledStates.secondary,
-      },
-      _hover: {
-        bgGradient: 'linear(to-b, red.93, red.93)',
-        borderColor: 'red.70',
-        ...disabledStates.secondary,
-      },
-      bgGradient: 'linear(to-b, neutral.100, neutral.93)',
-      borderColor: 'neutral.90',
-      color: 'red.50',
-      ...disabledStates.secondary,
-    },
-    tertiary: {
-      _active: {
-        background: 'neutral.90',
-        borderColor: 'neutral.90',
-        ...disabledStates.tertiary,
-      },
+const variants = (
+  [
+    'primary',
+    'secondary',
+    'tertiary',
+    'danger-primary',
+    'danger-secondary',
+    'danger-tertiary',
+  ] as ButtonProps['variant'][]
+).reduce(
+  (obj, variant) => {
+    let borderColor = variant?.includes('secondary') ? `button/${variant}/border` : `button/${variant}/bg`;
+    let disabledBorderColor = variant?.includes('secondary')
+      ? `button/${variant}/border-disabled`
+      : `button/${variant}/bg-disabled`;
+    if (variant?.includes('tertiary')) {
+      borderColor = 'transparent';
+      disabledBorderColor = 'transparent';
+    }
+    obj[variant as NonNullable<ButtonProps['variant']>] = defineStyle({
       _hover: {
-        background: 'neutral.95',
-        borderColor: 'neutral.95',
-        ...disabledStates.tertiary,
+        backgroundColor: `button/${variant}/bg-hover`,
+        borderColor: variant?.includes('secondary') ? `button/${variant}/border-hover` : `button/${variant}/bg-hover`,
+        color: `button/${variant}/fg-hover`,
       },
-      background: 'transparent',
-      borderColor: 'transparent',
-      color: 'purple.50',
-      ...disabledStates.tertiary,
-    },
-    'tertiary--danger': {
       _active: {
-        background: 'red.90',
-        borderColor: 'red.90',
-        ...disabledStates.tertiary,
+        backgroundColor: `button/${variant}/bg-active`,
+        borderColor: variant?.includes('secondary') ? `button/${variant}/border-active` : `button/${variant}/bg-active`,
+        color: `button/${variant}/fg-active`,
       },
-      _hover: {
-        background: 'red.93',
-        borderColor: 'red.93',
-        ...disabledStates.tertiary,
+      _disabled: {
+        backgroundColor: `button/${variant}/bg-disabled`,
+        borderColor: disabledBorderColor,
+        color: `button/${variant}/fg-disabled`,
+        cursor: 'not-allowed',
       },
-      background: 'transparent',
-      borderColor: 'transparent',
-      color: 'red.50',
-      ...disabledStates.tertiary,
-    },
+      backgroundColor: `button/${variant}/bg`,
+      borderColor,
+      borderStyle: 'solid',
+      borderWidth: rem(1),
+      color: `button/${variant}/fg`,
+    });
+    return obj;
   },
-};
+  {} as Record<NonNullable<ButtonProps['variant']>, SystemStyleInterpolation>,
+);
+
+const buttonTheme = defineStyleConfig({
+  baseStyle,
+  defaultProps: {
+    size: 'lg',
+    variant: 'primary',
+  },
+  sizes,
+  variants,
+});
 
-export default ButtonTheme;
+export default buttonTheme;

package/src/Components/Button/Button.tsx

@@ -3,43 +3,39 @@ import Icon, { TypeIconName } from '../Icon/Icon';
 
 export interface ButtonProps extends ChakraButtonProps {
   as?: 'a' | 'button';
+  disabled?: never;
   isDanger?: boolean;
   leftIconName?: TypeIconName;
   rightIconName?: TypeIconName;
-  size?: 'small' | 'medium';
-  variant?: 'primary' | 'secondary' | 'tertiary';
-  disabled?: never;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger-primary' | 'danger-secondary' | 'danger-tertiary';
 }
 
 /**
  * The Button component is used to trigger an action or event, such as submitting a form, opening a dialog, canceling an action, or performing a delete operation.
  */
 const Button = forwardRef<ButtonProps, 'button'>((props, ref) => {
-  const { as, isDanger, isDisabled, leftIconName, rightIconName, size = 'medium', variant, ...rest } = props;
+  const { as, isDanger, isDisabled, leftIconName, rightIconName, size = 'lg', variant, ...rest } = props;
   const properties: ChakraButtonProps = {
     as: isDisabled ? 'button' : as,
     isDisabled,
     size,
-    variant: isDanger ? `${variant}--danger` : variant,
+    variant: isDanger ? `danger-${variant}` : variant,
     ...rest,
   };
-  const iconSize = size === 'medium' ? '24' : '16';
+  const iconSize = size === 'lg' ? '24' : '16';
   if (leftIconName) {
     properties.leftIcon = <Icon name={leftIconName} size={iconSize} />;
   }
   if (rightIconName) {
     properties.rightIcon = <Icon name={rightIconName} size={iconSize} />;
   }
-  if ((properties.leftIcon || properties.rightIcon) && !properties.iconSpacing) {
-    properties.iconSpacing = size === 'medium' ? '0.625rem' : '0.375rem';
-  }
-
   return <ChakraButton {...properties} ref={ref} />;
 });
 
 Button.defaultProps = {
   as: 'button',
-  size: 'medium',
+  size: 'lg',
   variant: 'primary',
 } as ButtonProps;
 

package/src/Components/CodeBlock/CodeBlock.tsx

@@ -24,7 +24,7 @@ const CodeBlock = ({ children, isCopiable, ...props }: CodeBlockProps) => {
           aria-label="Copy to clipboard"
           iconName="Duplicate"
           onClick={onCopy}
-          size="small"
+          size="sm"
           sx={style.copyIcon}
           variant="secondary"
         />

package/src/Components/DatePicker/DatePickerFooter.tsx

@@ -38,7 +38,7 @@ const DatePickerFooter = ({
           gridColumn="1"
           gridRow={styleGrid('2', '1')}
           onClick={() => onClear()}
-          size="small"
+          size="sm"
           variant="tertiary"
           width="fit-content"
         >
@@ -68,11 +68,11 @@ const DatePickerFooter = ({
         )}
       </Text>
       <ButtonGroup gridColumn={styleGrid('2 / 4', '3')} gridRow={styleGrid('2', '1')} justifyContent="end">
-        <Button onClick={onClose} size="small" variant="secondary">
+        <Button onClick={onClose} size="sm" variant="secondary">
           Cancel
         </Button>
 
-        <Button onClick={onApply} size="small">
+        <Button onClick={onApply} size="sm">
           Apply
         </Button>
       </ButtonGroup>

package/src/Components/DatePicker/DatePickerHeader.tsx

@@ -23,7 +23,7 @@ export const DatePickerHeaderPrevious = ({ label }: { label: string }) => {
       iconName="ChevronLeft"
       isTooltipDisabled
       onClick={onPrevious}
-      size="small"
+      size="sm"
       variant="tertiary"
       visibility={controls === 'right' ? 'hidden' : undefined}
     />
@@ -39,7 +39,7 @@ export const DatePickerHeaderNext = ({ label }: { label: string }) => {
       iconName="ChevronRight"
       isTooltipDisabled
       onClick={onNext}
-      size="small"
+      size="sm"
       variant="tertiary"
       visibility={controls === 'left' ? 'hidden' : undefined}
     />

package/src/Components/DatePicker/DatePickerMonth.tsx

@@ -59,7 +59,7 @@ const DatePickerMonth = ({ controls, onMonthClick, onViewDateChange, viewDate }:
             flexShrink={0}
             onClick={onMonthClick}
             rightIconName="ChevronDown"
-            size="small"
+            size="sm"
             variant="tertiary"
           >
             {viewDate.monthLong}

package/src/Components/Filter/Filter.theme.ts

@@ -1,6 +1,5 @@
 import { createMultiStyleConfigHelpers, SystemStyleObject } from '@chakra-ui/styled-system';
 import { rem } from '../../utils/utils';
-import { disabledStates } from '../Button/Button.theme';
 
 export const parts = [
   'container',
@@ -23,6 +22,8 @@ export type FilterStyle = Record<(typeof parts)[number], SystemStyleObject>;
 
 const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(parts);
 
+const disabledState = { background: 'transparent', borderColor: 'transparent', color: 'neutral.70' };
+
 const FilterTheme = defineMultiStyleConfig({
   baseStyle: {
     container: {
@@ -116,9 +117,9 @@ const FilterTheme = defineMultiStyleConfig({
       },
       _disabled: {
         cursor: 'not-allowed',
-        ...disabledStates.tertiary,
-        _active: disabledStates.tertiary,
-        _hover: disabledStates.tertiary,
+        ...disabledState,
+        _active: disabledState,
+        _hover: disabledState,
       },
       _hover: {
         background: 'neutral.93',
@@ -139,9 +140,9 @@ const FilterTheme = defineMultiStyleConfig({
       },
       _disabled: {
         cursor: 'not-allowed',
-        ...disabledStates.tertiary,
-        _active: disabledStates.tertiary,
-        _hover: disabledStates.tertiary,
+        ...disabledState,
+        _active: disabledState,
+        _hover: disabledState,
       },
       _hover: {
         background: 'neutral.93',

package/src/Components/Filter/Filter.tsx

@@ -163,7 +163,7 @@ const Filter = (props: FilterProps) => {
                 leftIconName="CloseSmall"
                 minWidth="7.5rem"
                 onClick={onClearFilters}
-                size="small"
+                size="sm"
                 variant="tertiary"
               >
                 Clear filters

package/src/Components/Filter/FilterAdd/FilterAdd.tsx

@@ -57,7 +57,7 @@ const FilterAdd = (props: FilterAddProps) => {
         isLoading={isLoading}
         leftIconName="PlusOpen"
         position={isOpen ? 'relative' : undefined}
-        size="small"
+        size="sm"
         variant="tertiary"
         zIndex={isOpen ? 'dialog' : undefined}
       >

package/src/Components/Filter/FilterForm/FilterForm.tsx

@@ -170,14 +170,14 @@ const FilterForm = (props: FilterFormProps) => {
       )}
       <ButtonGroup spacing="12" sx={filterStyle.formButtonGroup}>
         {isEditMode && (
-          <Button marginInlineEnd="auto" onClick={onClearClick} size="small" variant="tertiary">
+          <Button marginInlineEnd="auto" onClick={onClearClick} size="sm" variant="tertiary">
             Clear
           </Button>
         )}
-        <Button onClick={onCancelClick} size="small" type="reset" variant="secondary">
+        <Button onClick={onCancelClick} size="sm" type="reset" variant="secondary">
           Cancel
         </Button>
-        <Button isDisabled={isDisabled} size="small" type="submit">
+        <Button isDisabled={isDisabled} size="sm" type="submit">
           {(selected.length === 0 || selected[0] === '') && isEditMode ? 'Remove' : 'Apply'}
         </Button>
       </ButtonGroup>

package/src/Components/Filter/FilterItem/FilterItem.tsx

@@ -79,7 +79,7 @@ const FilterItem = (props: FilterItemProps) => {
               iconName="CloseSmall"
               isDisabled={isLoading}
               onClick={() => onFilterClear(category)}
-              size="small"
+              size="sm"
               sx={filterStyle.tagClear}
               tooltipProps={{ shouldWrapChildren: false }}
               variant="tertiary"

package/src/Components/Filter/FilterSearch/FilterSearch.tsx

@@ -56,7 +56,7 @@ const FilterSearch = (props: FilterSearchProps) => {
       <Input {...inputProps} />
       {!!searchValue && (
         <InputRightElement>
-          <IconButton aria-label="Clear" iconName="CloseSmall" onClick={onClearClick} size="small" variant="tertiary" />
+          <IconButton aria-label="Clear" iconName="CloseSmall" onClick={onClearClick} size="sm" variant="tertiary" />
         </InputRightElement>
       )}
     </InputGroup>

package/src/Components/Form/FileInput/FileInput.tsx

@@ -104,7 +104,7 @@ const FileInput = forwardRef<FileInputProps, 'div'>((props, ref) => {
               </Text>
               <Text as="span">{selectedFileNames[0]}</Text>
             </Box>
-            <Button flexShrink={0} leftIconName="MinusRemove" onClick={onRemoveClick} size="small" variant="secondary">
+            <Button flexShrink={0} leftIconName="MinusRemove" onClick={onRemoveClick} size="sm" variant="secondary">
               Remove
             </Button>
           </>

package/src/Components/IconButton/IconButton.tsx

@@ -4,15 +4,16 @@ import Tooltip, { TooltipProps } from '../Tooltip/Tooltip';
 
 export interface IconButtonProps extends ChakraIconButtonProps {
   as?: 'a' | 'button';
+  disabled?: never;
   iconName: TypeIconName;
   isDanger?: boolean;
   iconSize?: IconProps['size'];
   isTooltipDisabled?: boolean;
   label?: string;
-  size?: 'small' | 'medium';
+  size?: 'sm' | 'md' | 'lg';
   tooltipCloseDelay?: number;
   tooltipProps?: Omit<TooltipProps, 'children'>;
-  variant?: 'primary' | 'secondary' | 'tertiary';
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'danger-primary' | 'danger-secondary' | 'danger-tertiary';
 }
 
 /**
@@ -35,10 +36,10 @@ const IconButton = forwardRef<IconButtonProps, 'button'>((props, ref) => {
   } = props;
   const properties: ChakraIconButtonProps = {
     as: isDisabled ? 'button' : as,
-    icon: <Icon name={iconName} size={iconSize || (size === 'small' ? '16' : '24')} />,
+    icon: <Icon name={iconName} size={iconSize || (size === 'lg' ? '24' : '16')} />,
     isDisabled,
     size,
-    variant: isDanger ? `${variant}--danger` : variant,
+    variant: isDanger ? `danger-${variant}` : variant,
     ...rest,
   };
   return (
@@ -56,7 +57,7 @@ const IconButton = forwardRef<IconButtonProps, 'button'>((props, ref) => {
 
 IconButton.defaultProps = {
   as: 'button',
-  size: 'medium',
+  size: 'lg',
   tooltipCloseDelay: 0,
   variant: 'primary',
 } as IconButtonProps;

package/src/Components/Icons/16x16/Android.tsx

@@ -3,10 +3,8 @@ import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
 const Android = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 16 16" {...props}>
     <path
-      clipRule="evenodd"
-      d="M6.533 3.333c.467-.2.934-.267 1.467-.267.467 0 .867.067 1.267.2L10.333 2.2a.645.645 0 0 1 .934 0 .644.644 0 0 1 0 .933l-.8.8A3.979 3.979 0 0 1 12 7.062H4c0-1.199.533-2.265 1.4-2.998l-.933-.932a.644.644 0 0 1 0-.933.645.645 0 0 1 .933 0l1.133 1.133Zm-1.2 7.729h-.666c-.4 0-.667-.267-.667-.667V7.73h8v2.665c0 .4-.267.667-.667.667h-.666v1.998a.668.668 0 0 1-.667.667c-.4 0-.667-.267-.667-.667v-1.998H6.667v1.998a.668.668 0 0 1-.667.667c-.4 0-.667-.267-.667-.667v-1.998ZM14 7.73v2.732a.668.668 0 0 1-.667.666c-.4 0-.666-.266-.666-.666V7.73c0-.333.266-.666.666-.666S14 7.33 14 7.73ZM2.667 7.064c.4 0 .666.266.666.666v2.665a.668.668 0 0 1-.666.667c-.4 0-.667-.267-.667-.667V7.73c0-.4.267-.666.667-.666ZM10 6.397c.4 0 .667-.266.667-.666A.668.668 0 0 0 10 5.065c-.4 0-.667.333-.667.666 0 .4.267.667.667.667Zm-4 0c.4 0 .667-.266.667-.666A.668.668 0 0 0 6 5.065c-.4 0-.667.333-.667.666 0 .4.267.667.667.667Z"
+      d="M11.2218 9.60336C11.1065 9.60339 10.9938 9.5709 10.8979 9.51C10.802 9.44911 10.7272 9.36255 10.6831 9.26127C10.6389 9.15999 10.6274 9.04853 10.6498 8.941C10.6723 8.83347 10.7278 8.73468 10.8093 8.65715C10.8909 8.57961 10.9947 8.52679 11.1078 8.50539C11.2209 8.48398 11.3381 8.49493 11.4447 8.53687C11.5512 8.57881 11.6423 8.64984 11.7064 8.74099C11.7705 8.83213 11.8047 8.9393 11.8047 9.04893C11.8045 9.19589 11.7431 9.33679 11.6338 9.44072C11.5245 9.54465 11.3764 9.60314 11.2218 9.60336ZM4.77821 9.60336C4.66291 9.60339 4.55018 9.5709 4.45429 9.51C4.3584 9.44911 4.28366 9.36255 4.23951 9.26127C4.19537 9.15999 4.1838 9.04853 4.20627 8.941C4.22875 8.83347 4.28425 8.73468 4.36577 8.65715C4.44729 8.57961 4.55117 8.52679 4.66426 8.50539C4.77735 8.48398 4.89457 8.49493 5.00111 8.53687C5.10765 8.57881 5.19872 8.64984 5.2628 8.74099C5.32688 8.83213 5.3611 8.9393 5.36112 9.04893C5.36097 9.1959 5.29952 9.33681 5.19024 9.44075C5.08096 9.54469 4.93279 9.60317 4.77821 9.60336ZM11.4308 6.26456L12.5959 4.34599C12.6118 4.31979 12.6222 4.29085 12.6263 4.26085C12.6305 4.23084 12.6284 4.20034 12.6202 4.1711C12.612 4.14185 12.5978 4.11444 12.5784 4.09041C12.5591 4.06639 12.5349 4.04622 12.5073 4.03107C12.4798 4.01592 12.4493 4.00608 12.4178 4.00211C12.3862 3.99814 12.3541 4.00013 12.3234 4.00794C12.2926 4.01576 12.2638 4.02926 12.2385 4.04768C12.2133 4.06609 12.1921 4.08905 12.1761 4.11526L10.9964 6.05806C10.0942 5.66658 9.081 5.44859 7.99989 5.44859C6.91879 5.44859 5.90568 5.66689 5.00353 6.05806L3.82388 4.11526C3.80797 4.08905 3.78678 4.06607 3.76153 4.04764C3.73628 4.02922 3.70746 4.0157 3.67671 4.00786C3.64597 4.00002 3.6139 3.99802 3.58234 4.00197C3.55078 4.00591 3.52034 4.01573 3.49277 4.03086C3.4652 4.04599 3.44104 4.06614 3.42166 4.09015C3.40228 4.11416 3.38806 4.14156 3.37982 4.17079C3.37157 4.20003 3.36947 4.23052 3.37362 4.26052C3.37777 4.29053 3.3881 4.31947 3.40401 4.34568L4.56916 6.26456C2.56854 7.29916 1.20016 9.22483 1 11.5H15C14.7996 9.22483 13.4313 7.29916 11.4308 6.26456Z"
       fill="currentColor"
-      fillRule="evenodd"
     />
   </Icon>
 ));

package/src/Components/Icons/16x16/AppStore.tsx

@@ -0,0 +1,14 @@
+import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
+
+const AppStore = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      clipRule="evenodd"
+      d="M3.82765 1H12.1706C13.7332 1 14.9983 2.26509 15 3.82765V12.1706C15 13.7332 13.7332 14.9983 12.1724 14.9983H3.82765C2.26509 14.9983 1 13.7332 1 12.1724V3.82765C1 2.26509 2.26509 1 3.82765 1ZM8.22309 3.72618L7.93963 4.21612L7.66141 3.72443C7.48294 3.41822 7.09623 3.31499 6.79002 3.48996C6.48381 3.66844 6.38057 4.05514 6.55555 4.36136L7.20472 5.48821L5.12598 9.09101H3.50218C3.14873 9.09101 2.86526 9.37448 2.86526 9.72793C2.86526 10.0814 3.14873 10.3649 3.50218 10.3649H9.29396C9.57217 9.84342 9.21347 9.09101 8.57305 9.09101H6.59755L9.32895 4.3631C9.50393 4.05689 9.4007 3.66669 9.09448 3.49171C8.78827 3.31674 8.39807 3.41997 8.22309 3.72618ZM4.87051 12.0831L5.48294 11.021C5.15223 10.6221 4.73403 10.4996 4.21959 10.6588L3.76465 11.4462C3.58967 11.7524 3.69291 12.1426 3.99912 12.3176C4.30533 12.4926 4.69553 12.3894 4.87051 12.0831ZM12.4138 9.09451H10.7568C10.6299 8.87475 10.5078 8.66335 10.3906 8.46035C9.73694 7.32827 9.23387 6.45699 8.87926 5.84867C8.50306 6.16188 8.12161 7.08576 8.65529 8.00615C8.88671 8.40765 9.17018 8.89841 9.50539 9.47875C9.92545 10.206 10.4268 11.0739 11.0087 12.0831C11.1872 12.3894 11.5739 12.4926 11.8801 12.3176C12.1863 12.1391 12.2896 11.7524 12.1146 11.4462L11.4934 10.3684H12.4138C12.7673 10.3684 13.0507 10.0849 13.0507 9.73143C13.0507 9.37798 12.7673 9.09451 12.4138 9.09451Z"
+      fill="currentColor"
+      fillRule="evenodd"
+    />
+  </Icon>
+));
+
+export default AppStore;

package/src/Components/Icons/16x16/AppStoreColor.tsx

@@ -0,0 +1,26 @@
+import { forwardRef, Icon, IconProps } from '@chakra-ui/react';
+import { useIconId } from '../utils';
+
+const AppStoreColor = forwardRef<IconProps, 'svg'>((props, ref) => {
+  const iconPrefix = useIconId();
+  return (
+    <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+      <path
+        d="M12.1706 1H3.82765C2.26509 1 1 2.26509 1 3.82765V12.1724C1 13.7332 2.26509 14.9983 3.82765 14.9983H12.1724C13.7332 14.9983 15 13.7332 15 12.1706V3.82765C14.9983 2.26509 13.7332 1 12.1706 1Z"
+        fill={`url(#${iconPrefix}__a)`}
+      />
+      <path
+        d="M7.9405 4.2161L8.224 3.72616C8.399 3.41995 8.78925 3.31671 9.0955 3.49169C9.40175 3.66667 9.505 4.05687 9.33 4.36308L6.59825 9.09099H8.574C9.2145 9.09099 9.57325 9.8434 9.295 10.3648H3.5025C3.149 10.3648 2.8655 10.0814 2.8655 9.72791C2.8655 9.37445 3.149 9.09099 3.5025 9.09099H5.1265L7.2055 5.48819L6.55625 4.36133C6.38125 4.05512 6.4845 3.66842 6.79075 3.48994C7.097 3.31496 7.48375 3.4182 7.66225 3.72441L7.9405 4.2161ZM5.4835 11.021L4.871 12.0831C4.696 12.3893 4.30575 12.4926 3.9995 12.3176C3.69325 12.1426 3.59 11.7524 3.765 11.4462L4.22 10.6588C4.7345 10.4996 5.15275 10.622 5.4835 11.021ZM10.758 9.09449H12.4152C12.7687 9.09449 13.0522 9.37795 13.0522 9.73141C13.0522 10.0849 12.7687 10.3683 12.4152 10.3683H11.4947L12.116 11.4462C12.291 11.7524 12.1877 12.1391 11.8815 12.3176C11.5752 12.4926 11.1885 12.3893 11.01 12.0831C9.9635 10.2686 9.17775 8.91076 8.65625 8.00612C8.1225 7.08574 8.504 6.16186 8.88025 5.84864C9.2985 6.56605 9.92325 7.64917 10.758 9.09449Z"
+        fill="#fff"
+      />
+      <defs>
+        <linearGradient gradientUnits="userSpaceOnUse" id={`${iconPrefix}__a`} x1={8} x2={8} y1={1} y2={14.9983}>
+          <stop stopColor="#18BFFB" />
+          <stop offset={1} stopColor="#2072F3" />
+        </linearGradient>
+      </defs>
+    </Icon>
+  );
+});
+
+export default AppStoreColor;