@bitrise/bitkit 12.72.13-0 → 12.73.1

package/README.md

@@ -11,7 +11,7 @@ Based on [Chakra UI](https://chakra-ui.com/).
 ```
 git clone git@github.com:bitrise-io/bitkit.git
 cd bitkit
-npm i
+yarn install
 ```
 
 ### Technology
@@ -23,19 +23,19 @@ npm i
 
 ### Scripts
 
-#### `$ npm run storybook`
+#### `$ yarn storybook`
 
 Runs Storybook server
 
-#### `$ npm run start`
+#### `$ yarn start`
 
-Runs `npm run storybook`
+Runs `yarn storybook`
 
-#### `$ npm run lint`
+#### `$ yarn lint`
 
 Runs Javascript linting
 
-#### `$ npm run test`
+#### `$ yarn test`
 
 Runs the unit tests for the library components
 

package/package.json

@@ -1,22 +1,20 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.72.13-0",
-  "repository": {
-    "type": "git",
-    "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
-  },
+  "version": "12.73.1",
+  "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
   "scripts": {
-    "build-storybook": "storybook build",
+    "commitlint": "commitlint",
     "lint": "eslint src --ext ts,tsx",
-    "start": "npm run storybook",
-    "storybook": "storybook dev -p 6006",
+    "semantic-release": "semantic-release",
+    "start": "yarn storybook",
     "test": "jest",
-    "typecheck": "tsc -p src --noEmit",
-    "release": "npm version patch && npm publish",
-    "release-alpha": "npm version prepatch && npm publish --tag alpha"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "theme": "chakra-cli tokens ./src/theme.ts",
+    "theme:watch": "chakra-cli tokens ./src/theme.ts --watch"
   },
   "alias": {
     "@bitrise/bitkit": "./src",
@@ -29,10 +27,10 @@
     "@chakra-ui/theme": "^3.3.1",
     "@chakra-ui/theme-tools": "^2.1.2",
     "@chakra-ui/utils": "^2.0.15",
-    "@emotion/react": "^11.11.3",
+    "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@floating-ui/react-dom-interactions": "^0.8.1",
-    "framer-motion": "^10.18.0",
+    "framer-motion": "^10.16.16",
     "luxon": "^3.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -44,37 +42,43 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
-    "@babel/preset-env": "^7.23.8",
+    "@babel/core": "^7.23.6",
+    "@babel/preset-env": "^7.23.6",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@bitrise/eslint-plugin": "^2.3.3",
+    "@chakra-ui/cli": "^2.4.1",
+    "@commitlint/cli": "^17.8.0",
+    "@commitlint/config-conventional": "^17.8.0",
     "@google-cloud/storage": "^7.7.0",
-    "@storybook/addon-actions": "^7.6.7",
-    "@storybook/addon-essentials": "^7.6.7",
-    "@storybook/addon-interactions": "^7.6.7",
-    "@storybook/addon-links": "^7.6.7",
-    "@storybook/addons": "^7.6.7",
-    "@storybook/blocks": "^7.6.7",
-    "@storybook/react": "^7.6.7",
-    "@storybook/react-webpack5": "^7.6.7",
-    "@storybook/theming": "^7.6.7",
-    "@testing-library/dom": "^9.3.4",
-    "@testing-library/jest-dom": "^6.2.0",
+    "@semantic-release/commit-analyzer": "^11.1.0",
+    "@semantic-release/git": "^10.0.1",
+    "@storybook/addon-actions": "^7.6.4",
+    "@storybook/addon-essentials": "^7.6.4",
+    "@storybook/addon-interactions": "^7.6.4",
+    "@storybook/addon-links": "^7.6.4",
+    "@storybook/addons": "^7.6.4",
+    "@storybook/blocks": "^7.6.4",
+    "@storybook/react": "^7.6.4",
+    "@storybook/react-webpack5": "^7.6.4",
+    "@storybook/testing-library": "^0.2.2",
+    "@storybook/theming": "^7.6.4",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "^14.5.2",
+    "@testing-library/user-event": "^14.5.1",
     "@types/jest": "^29.5.11",
-    "@types/luxon": "^3.4.0",
-    "@types/react": "^18.2.47",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.18.1",
-    "@typescript-eslint/parser": "^6.18.1",
-    "axios": "^1.6.5",
-    "eslint": "^8.56.0",
+    "@types/luxon": "^3.3.7",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "axios": "^1.6.2",
+    "eslint": "^8.55.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.6.2",
+    "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.15",
@@ -82,12 +86,13 @@
     "glob": "^10.3.10",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "jsdom": "^23.2.0",
+    "jsdom": "^23.0.1",
     "prettier": "^3.1.1",
-    "react-hook-form": "^7.49.3",
-    "storybook": "^7.6.7",
+    "react-hook-form": "^7.49.2",
+    "semantic-release": "^22.0.12",
+    "storybook": "^7.6.4",
     "ts-jest": "^29.1.1",
-    "typescript": "^5.3.3"
+    "typescript": "^4.8.4"
   },
   "files": [
     "src",
@@ -96,9 +101,5 @@
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
-  },
-  "engines": {
-    "node": "20.10.0",
-    "npm": "10.2.3"
   }
 }

package/src/Components/ColorButton/ColorButton.theme.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from '../../Foundations/Colors/Colors';
+import { ColorScheme } from '../../tokens/tokens';
 
 const schemeColors: Record<ColorScheme, any> = {
   blue: {

package/src/Components/ColorButton/ColorButton.tsx

@@ -1,5 +1,5 @@
 import { Button as ChakraButton, ButtonProps as ChakraButtonProps, forwardRef, useStyleConfig } from '@chakra-ui/react';
-import { ColorScheme } from '../../Foundations/Colors/Colors';
+import { ColorScheme } from '../../tokens/tokens';
 
 export interface ColorButtonProps extends ChakraButtonProps {
   as?: 'a' | 'button';

package/src/Components/Form/Input/Input.tsx

@@ -14,7 +14,7 @@ import {
   InputRightElement,
   SystemStyleObject,
 } from '@chakra-ui/react';
-import { TypeColors } from '../../../Foundations/Colors/Colors';
+import { TypeColors } from '../../../tokens/tokens';
 import Icon, { TypeIconName } from '../../Icon/Icon';
 import Text from '../../Text/Text';
 import Box from '../../Box/Box';

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

@@ -3,8 +3,10 @@ import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 const ArrowDown = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 16 16" {...props}>
     <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.63972 9.44538L10.3906 7.69748L11.3333 8.70588L7.96632 12L4.66666 8.70588L5.60942 7.76471L7.29292 9.37815V4H8.63972V9.44538Z"
       fill="currentColor"
-      d="M8.669 1.333v1.334H7.336V1.333h1.333Zm0 2V6H7.336V3.333h1.333Zm3.113 7.572-.943-.943-2.17 2.17V6.667H7.336v5.448L5.183 9.962l-.943.943 3.771 3.77 3.771-3.77Z"
     />
   </Icon>
 ));

package/src/Components/Icons/16x16/{BackArrow.tsx → ArrowLeft.tsx}

@@ -1,6 +1,6 @@
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
-const BackArrow = forwardRef<IconProps, 'svg'>((props, ref) => (
+const ArrowLeft = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
@@ -11,4 +11,4 @@ const BackArrow = forwardRef<IconProps, 'svg'>((props, ref) => (
   </Icon>
 ));
 
-export default BackArrow;
+export default ArrowLeft;

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

@@ -0,0 +1,12 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const ArrowMoveDown = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      d="M8.669 1.333v1.334H7.336V1.333h1.333Zm0 2V6H7.336V3.333h1.333Zm3.113 7.572-.943-.943-2.17 2.17V6.667H7.336v5.448L5.183 9.962l-.943.943 3.771 3.77 3.771-3.77Z"
+    />
+  </Icon>
+));
+
+export default ArrowMoveDown;

package/src/Components/Icons/16x16/{ArrowBack.tsx → ArrowMoveLeft.tsx}

@@ -1,6 +1,6 @@
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
-const ArrowBack = forwardRef<IconProps, 'svg'>((props, ref) => (
+const ArrowMoveLeft = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
@@ -11,4 +11,4 @@ const ArrowBack = forwardRef<IconProps, 'svg'>((props, ref) => (
   </Icon>
 ));
 
-export default ArrowBack;
+export default ArrowMoveLeft;

package/src/Components/Icons/16x16/{ArrowForward.tsx → ArrowMoveRight.tsx}

@@ -1,6 +1,6 @@
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
-const ArrowForward = forwardRef<IconProps, 'svg'>((props, ref) => (
+const ArrowMoveRight = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 16 16" {...props}>
     <path
       fill="currentColor"
@@ -11,4 +11,4 @@ const ArrowForward = forwardRef<IconProps, 'svg'>((props, ref) => (
   </Icon>
 ));
 
-export default ArrowForward;
+export default ArrowMoveRight;

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

@@ -0,0 +1,14 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const ArrowMoveUp = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fill="currentColor"
+      fillRule="evenodd"
+      d="m7.28 3.797-2.17 2.17-.943-.942 3.771-3.772 3.771 3.772-.943.942-2.153-2.153v5.448H7.28V3.797Zm0 10.799v-1.334h1.333v1.334H7.28Zm0-2V9.929h1.333v2.667H7.28Z"
+      clipRule="evenodd"
+    />
+  </Icon>
+));
+
+export default ArrowMoveUp;

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

@@ -0,0 +1,14 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const ArrowRight = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 16 16" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M9.44538 7.36035L7.69748 5.60951L8.70588 4.66675L12 8.03375L8.70588 11.3334L7.76471 10.3907L9.37815 8.70715H4V7.36035H9.44538Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default ArrowRight;

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

@@ -3,10 +3,10 @@ import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 const ArrowUp = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 16 16" {...props}>
     <path
-      fill="currentColor"
       fillRule="evenodd"
-      d="m7.28 3.797-2.17 2.17-.943-.942 3.771-3.772 3.771 3.772-.943.942-2.153-2.153v5.448H7.28V3.797Zm0 10.799v-1.334h1.333v1.334H7.28Zm0-2V9.929h1.333v2.667H7.28Z"
       clipRule="evenodd"
+      d="M7.36026 6.55462L5.60942 8.30252L4.66666 7.29412L8.03366 4L11.3333 7.29412L10.3906 8.23529L8.70706 6.62185V12H7.36026V6.55462Z"
+      fill="currentColor"
     />
   </Icon>
 ));

package/src/Components/Icons/16x16/index.ts

@@ -8,12 +8,15 @@ export { default as Android } from './Android';
 export { default as App } from './App';
 export { default as AppleFill } from './AppleFill';
 export { default as Apple } from './Apple';
-export { default as ArrowBack } from './ArrowBack';
-export { default as ArrowDown } from './ArrowDown';
-export { default as ArrowForward } from './ArrowForward';
+export { default as ArrowMoveLeft } from './ArrowMoveLeft';
+export { default as ArrowMoveDown } from './ArrowMoveDown';
+export { default as ArrowMoveUp } from './ArrowMoveUp';
+export { default as ArrowMoveRight } from './ArrowMoveRight';
 export { default as ArrowQuit } from './ArrowQuit';
+export { default as ArrowLeft } from './ArrowLeft';
+export { default as ArrowRight } from './ArrowRight';
 export { default as ArrowUp } from './ArrowUp';
-export { default as BackArrow } from './BackArrow';
+export { default as ArrowDown } from './ArrowDown';
 export { default as Badge3rdParty } from './Badge3rdParty';
 export { default as BadgeBitrise } from './BadgeBitrise';
 export { default as Bazel } from './Bazel';

package/src/Components/Icons/24x24/ArrowDown.tsx

@@ -3,7 +3,9 @@ import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 const ArrowDown = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 24 24" {...props}>
     <path
-      d="M13.003 2v2h-2V2h2ZM13.003 5v4h-2V5h2ZM17.673 16.357l-1.414-1.414-3.256 3.255V10h-2v8.172l-3.23-3.23-1.413 1.415 5.657 5.657 5.656-5.657Z"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12.9596 14.1681L15.5859 11.5462L17 13.0588L11.9495 18L7 13.0588L8.41414 11.6471L10.9394 14.0672V6H12.9596V14.1681Z"
       fill="currentColor"
     />
   </Icon>

package/src/Components/Icons/24x24/{BackArrow.tsx → ArrowLeft.tsx}

@@ -1,6 +1,6 @@
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
-const BackArrow = forwardRef<IconProps, 'svg'>((props, ref) => (
+const ArrowLeft = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 24 24" {...props}>
     <path
       fillRule="evenodd"
@@ -11,4 +11,4 @@ const BackArrow = forwardRef<IconProps, 'svg'>((props, ref) => (
   </Icon>
 ));
 
-export default BackArrow;
+export default ArrowLeft;

package/src/Components/Icons/24x24/ArrowMoveDown.tsx

@@ -0,0 +1,12 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const ArrowMoveDown = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path
+      d="M13.003 2v2h-2V2h2ZM13.003 5v4h-2V5h2ZM17.673 16.357l-1.414-1.414-3.256 3.255V10h-2v8.172l-3.23-3.23-1.413 1.415 5.657 5.657 5.656-5.657Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default ArrowMoveDown;

package/src/Components/Icons/24x24/{ArrowBack.tsx → ArrowMoveLeft.tsx}

@@ -1,6 +1,6 @@
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
-const ArrowBack = forwardRef<IconProps, 'svg'>((props, ref) => (
+const ArrowMoveLeft = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 24 24" {...props}>
     <path
       fillRule="evenodd"
@@ -11,4 +11,4 @@ const ArrowBack = forwardRef<IconProps, 'svg'>((props, ref) => (
   </Icon>
 ));
 
-export default ArrowBack;
+export default ArrowMoveLeft;

package/src/Components/Icons/24x24/{ArrowForward.tsx → ArrowMoveRight.tsx}

@@ -1,6 +1,6 @@
 import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
 
-const ArrowForward = forwardRef<IconProps, 'svg'>((props, ref) => (
+const ArrowMoveRight = forwardRef<IconProps, 'svg'>((props, ref) => (
   <Icon ref={ref} viewBox="0 0 24 24" {...props}>
     <path
       fillRule="evenodd"
@@ -11,4 +11,4 @@ const ArrowForward = forwardRef<IconProps, 'svg'>((props, ref) => (
   </Icon>
 ));
 
-export default ArrowForward;
+export default ArrowMoveRight;

package/src/Components/Icons/24x24/ArrowMoveUp.tsx

@@ -0,0 +1,14 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const ArrowMoveUp = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="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"
+    />
+  </Icon>
+));
+
+export default ArrowMoveUp;

package/src/Components/Icons/24x24/ArrowRight.tsx

@@ -0,0 +1,14 @@
+import { Icon, IconProps, forwardRef } from '@chakra-ui/react';
+
+const ArrowRight = forwardRef<IconProps, 'svg'>((props, ref) => (
+  <Icon ref={ref} viewBox="0 0 24 24" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14.1681 11.0404L11.5462 8.41414L13.0588 7L18 12.0505L13.0588 17L11.6471 15.5859L14.0672 13.0606H6V11.0404H14.1681Z"
+      fill="currentColor"
+    />
+  </Icon>
+));
+
+export default ArrowRight;

package/src/Components/Icons/24x24/ArrowUp.tsx

@@ -5,7 +5,7 @@ const ArrowUp = forwardRef<IconProps, 'svg'>((props, ref) => (
     <path
       fillRule="evenodd"
       clipRule="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"
+      d="M11.0404 9.83193L8.41414 12.4538L7 10.9412L12.0505 6L17 10.9412L15.5859 12.3529L13.0606 9.93277V18H11.0404V9.83193Z"
       fill="currentColor"
     />
   </Icon>

package/src/Components/Icons/24x24/index.ts

@@ -8,12 +8,15 @@ export { default as Android } from './Android';
 export { default as App } from './App';
 export { default as AppleFill } from './AppleFill';
 export { default as Apple } from './Apple';
-export { default as ArrowBack } from './ArrowBack';
-export { default as ArrowDown } from './ArrowDown';
-export { default as ArrowForward } from './ArrowForward';
+export { default as ArrowMoveLeft } from './ArrowMoveLeft';
+export { default as ArrowMoveDown } from './ArrowMoveDown';
+export { default as ArrowMoveUp } from './ArrowMoveUp';
+export { default as ArrowMoveRight } from './ArrowMoveRight';
 export { default as ArrowQuit } from './ArrowQuit';
+export { default as ArrowLeft } from './ArrowLeft';
+export { default as ArrowRight } from './ArrowRight';
 export { default as ArrowUp } from './ArrowUp';
-export { default as BackArrow } from './BackArrow';
+export { default as ArrowDown } from './ArrowDown';
 export { default as Badge3rdParty } from './Badge3rdParty';
 export { default as BadgeBitrise } from './BadgeBitrise';
 export { default as Bazel } from './Bazel';

package/src/Components/Menu/MenuItem.tsx

@@ -1,5 +1,5 @@
 import { MenuItem as ChakraMenuItem, MenuItemProps as ChakraMenuItemProps, forwardRef } from '@chakra-ui/react';
-import { TypeColors } from '../../Foundations/Colors/Colors';
+import { TypeColors } from '../../tokens/tokens';
 import Box from '../Box/Box';
 import Icon, { TypeIconName } from '../Icon/Icon';
 

package/src/Components/Notification/Notification.tsx

@@ -1,7 +1,7 @@
 import { cloneElement, createContext, ReactElement, useContext, useMemo } from 'react';
 import { Alert as ChakraAlert, AlertProps, forwardRef } from '@chakra-ui/react';
 
-import { ColorScheme } from '../../Foundations/Colors/Colors';
+import { ColorScheme } from '../../tokens/tokens';
 import Box from '../Box/Box';
 import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';

package/src/Components/Ribbon/Ribbon.tsx

@@ -1,7 +1,7 @@
 import { createContext, useContext, useMemo } from 'react';
 import { Alert as ChakraAlert, AlertProps, forwardRef } from '@chakra-ui/react';
 
-import { ColorScheme } from '../../Foundations/Colors/Colors';
+import { ColorScheme } from '../../tokens/tokens';
 import CloseButton from '../CloseButton/CloseButton';
 import ColorButton, { ColorButtonProps } from '../ColorButton/ColorButton';
 import Box from '../Box/Box';

package/src/Components/Select/Select.tsx

@@ -20,9 +20,9 @@ export interface SelectProps extends Omit<FormControlProps, 'label' | 'onBlur' |
   isLoading?: boolean;
   label?: ReactNode;
   name?: string;
+  placeholder?: ChakraSelectProps['placeholder'];
   onBlur?: ChakraSelectProps['onBlur'];
   onChange?: ChakraSelectProps['onChange'];
-  placeholder?: ChakraSelectProps['placeholder'];
   size?: 'small' | 'medium';
   value?: ChakraSelectProps['value'];
 }

package/src/Components/Table/Table.theme.ts

@@ -6,7 +6,7 @@ const Tabletheme = {
     return {
       caption: {
         textAlign: 'left',
-        marginBottom: '24',
+        marginBottom: '12',
       },
       captionTitle: {
         fontSize: '4',

package/src/Components/Tabs/ContainedTab.tsx

@@ -1,5 +1,5 @@
 import { Button, TabProps as ChakraTabProps, forwardRef, useTab, useTabsStyles } from '@chakra-ui/react';
-import { TypeColors } from '../../Foundations/Colors/Colors';
+import { TypeColors } from '../../tokens/tokens';
 import Box from '../Box/Box';
 import Icon, { TypeIconName } from '../Icon/Icon';
 import Text from '../Text/Text';

package/src/Components/Tag/Tag.tsx

@@ -4,7 +4,7 @@ import Skeleton from '../Skeleton/Skeleton';
 import SkeletonBox from '../Skeleton/SkeletonBox';
 import Text from '../Text/Text';
 import Tooltip from '../Tooltip/Tooltip';
-import { TypeColors } from '../../Foundations/Colors/Colors';
+import { TypeColors } from '../../tokens/tokens';
 
 export interface TagProps extends Omit<ChakraTagProps, 'colorScheme' | 'size' | 'variant'> {
   closeButtonTooltip?: string;

package/src/Foundations/Colors/Colors.tsx

@@ -0,0 +1,20 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Unstyled } from '@storybook/blocks';
+import Provider from '../../Components/Provider/Provider';
+import Divider from '../../Components/Divider/Divider';
+import Palette from './Palette';
+import SystemTokens from './SystemTokens';
+
+const Colors = () => {
+  return (
+    <Unstyled>
+      <Provider>
+        <Palette />
+        <Divider marginTop="48" marginBottom="32" size="1" />
+        <SystemTokens />
+      </Provider>
+    </Unstyled>
+  );
+};
+
+export default Colors;

package/src/Foundations/Colors/SystemTokens.tsx

@@ -0,0 +1,26 @@
+import { semanticTokens } from '../../tokens/tokens';
+import Card from '../../Components/Card/Card';
+import Text from '../../Components/Text/Text';
+import TokenTable from '../docComponents/TokenTable';
+
+const SystemColorKeys = Object.keys(semanticTokens.colors.sys);
+
+const SystemTokens = () => (
+  <>
+    <Text as="h2" size="8" color="pal.purple.10" fontWeight="normal" marginBlockEnd="8">
+      System Tokens
+    </Text>
+    <Card boxShadow="medium" padding="24">
+      {SystemColorKeys.map((groupName) => (
+        <TokenTable
+          data={semanticTokens.colors.sys[groupName]}
+          groupName={groupName}
+          key={groupName}
+          marginBottom="24"
+        />
+      ))}
+    </Card>
+  </>
+);
+
+export default SystemTokens;

package/src/Foundations/Icons/figmaIcons.ts

@@ -12,17 +12,17 @@ export const figmaIcons: {
   [category: string]: FigmaIcon[];
 } = {
   'Arrows and Chevrons': [
-    { iconName: 'BackArrow', figmaToken: 'arrow-left' },
-    { iconName: '', figmaToken: 'arrow-down' },
-    { iconName: '', figmaToken: 'arrow-right' },
-    { iconName: '', figmaToken: 'arrow-up' },
+    { iconName: 'ArrowLeft', figmaToken: 'arrow-left' },
+    { iconName: 'ArrowDown', figmaToken: 'arrow-down' },
+    { iconName: 'ArrowRight', figmaToken: 'arrow-right' },
+    { iconName: 'ArrowUp', figmaToken: 'arrow-up' },
     { iconName: 'Request', figmaToken: 'arrow-left-over-right', tags: 'request' },
     { iconName: 'SortArrows', figmaToken: 'arrow-up-down' },
     { iconName: 'ArrowQuit', figmaToken: 'arrow-back-and-up', tags: 'quit' },
-    { iconName: 'ArrowDown', figmaToken: 'arrow-move-down' },
-    { iconName: 'ArrowBack', figmaToken: 'arrow-move-left' },
-    { iconName: 'ArrowForward', figmaToken: 'arrow-move-right' },
-    { iconName: 'ArrowUp', figmaToken: 'arrow-move-up' },
+    { iconName: 'ArrowMoveDown', figmaToken: 'arrow-move-down' },
+    { iconName: 'ArrowMoveLeft', figmaToken: 'arrow-move-left' },
+    { iconName: 'ArrowMoveRight', figmaToken: 'arrow-move-right' },
+    { iconName: 'ArrowMoveUp', figmaToken: 'arrow-move-up' },
     { iconName: 'ChevronDown', figmaToken: 'chevron-down' },
     { iconName: 'ChevronLeft', figmaToken: 'chevron-left' },
     { iconName: 'ChevronRight', figmaToken: 'chevron-right' },

package/src/Foundations/Themes/Alert.theme.ts

@@ -1,4 +1,4 @@
-import { ColorScheme } from '../Colors/Colors';
+import { ColorScheme } from '../../tokens/tokens';
 
 const AlertTheme = {
   parts: ['container', 'title', 'icon', 'body'],