@bitrise/bitkit 12.113.1-alpha.0 → 12.114.1-alpha.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "12.113.1-alpha.0",
+  "version": "12.114.1-alpha.0",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/bitrise-io/bitkit.git"
@@ -38,11 +38,11 @@
     "@floating-ui/react-dom-interactions": "^0.8.1",
     "@fontsource/figtree": "^5.0.18",
     "@fontsource/source-code-pro": "^5.0.16",
-    "framer-motion": "^11.0.3",
+    "framer-motion": "^11.0.5",
     "luxon": "^3.4.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-focus-lock": "^2.9.8",
+    "react-focus-lock": "^2.10.1",
     "react-imask": "^7.4.0",
     "react-markdown": "^9.0.1"
   },
@@ -58,15 +58,15 @@
     "@bitrise/eslint-plugin": "^2.5.0",
     "@chakra-ui/cli": "^2.4.1",
     "@google-cloud/storage": "^7.7.0",
-    "@storybook/addon-actions": "^7.6.14",
-    "@storybook/addon-essentials": "^7.6.14",
-    "@storybook/addon-interactions": "^7.6.14",
-    "@storybook/addon-links": "^7.6.14",
-    "@storybook/addons": "^7.6.14",
-    "@storybook/blocks": "^7.6.14",
-    "@storybook/react": "^7.6.14",
-    "@storybook/react-webpack5": "^7.6.14",
-    "@storybook/theming": "^7.6.14",
+    "@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",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
     "@testing-library/react": "^14.2.1",
@@ -80,7 +80,7 @@
     "axios": "^1.6.7",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest": "^27.6.3",
+    "eslint-plugin-jest": "^27.8.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.33.2",
@@ -93,8 +93,8 @@
     "jsdom": "^24.0.0",
     "prettier": "^3.2.5",
     "react-hook-form": "^7.50.1",
-    "release-it": "^17.0.3",
-    "storybook": "^7.6.14",
+    "release-it": "^17.0.5",
+    "storybook": "^7.6.15",
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3"
   },

package/src/Components/Card/Card.tsx

@@ -1,9 +1,7 @@
 import { forwardRef, HTMLChakraProps, useStyleConfig } from '@chakra-ui/react';
-import { Shadows } from '../../Foundations/Shadows/Shadows';
 import Box, { BoxProps } from '../Box/Box';
 
 export interface CardProps extends BoxProps {
-  boxShadow?: keyof Shadows;
   href?: string;
   variant?: 'elevated' | 'outline';
   withHover?: boolean;

package/src/Components/Dialog/Dialog.tsx

@@ -10,7 +10,7 @@ import {
   useBreakpointValue,
   usePrefersReducedMotion,
 } from '@chakra-ui/react';
-import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
+import { BREAKPOINTS } from '../../types/bitkit';
 import Icon from '../Icon/Icon';
 import Text from '../Text/Text';
 import Tooltip from '../Tooltip/Tooltip';

package/src/Components/Filter/Filter.storyData.ts

@@ -84,7 +84,7 @@ export const FILTER_STORY_DATA: FilterData = {
 export const FILTER_STORY_INIT_STATE: FilterState = {
   app: ['46b6b9a78a418ee8'],
   cache_type: ['gradle'],
-  pipeline: ['ipsum'],
+  pipeline: ['ipsum', 'dolor'],
 };
 
 export const FILTER_STORY_CONTEXT: FilterContextType = {

package/src/Components/Filter/Filter.tsx

@@ -43,7 +43,8 @@ const Filter = (props: FilterProps) => {
     if (values?.length) {
       const cleanValues = values.filter((v) => v !== null && v !== '' && v !== undefined);
       if (cleanValues.length) {
-        cleanState[category] = cleanValues;
+        const { isMultiple } = data[category];
+        cleanState[category] = isMultiple ? cleanValues : cleanValues.slice(0, 1);
       }
     }
   });

package/src/Components/LightBox/LightBox.tsx

@@ -6,7 +6,7 @@ import {
   useBreakpointValue,
   usePrefersReducedMotion,
 } from '@chakra-ui/react';
-import { BREAKPOINTS } from '../../Foundations/Breakpoints/Breakpoints';
+import { BREAKPOINTS } from '../../types/bitkit';
 
 export interface LightBoxProps extends Omit<HTMLChakraProps<'section'>, 'scrollBehavior'> {
   dataTestid?: string;

package/src/Components/components.theme.ts

@@ -1,4 +1,4 @@
-import Alert from '../Foundations/Themes/Alert.theme';
+import Alert from './Alert/Alert.theme';
 import Accordion from './AccordionLegacy/Accordion.theme';
 import Avatar from './Avatar/Avatar.theme';
 import Badge from './Badge/Badge.theme';

package/src/hooks/useResponsive.ts

@@ -1,5 +1,6 @@
 import { useMediaQuery } from '@chakra-ui/react';
-import breakpoints, { BREAKPOINTS } from '../Foundations/Breakpoints/Breakpoints';
+import { breakpoints } from '../theme';
+import { BREAKPOINTS } from '../types/bitkit';
 
 const minusOnePixel = (value: string) => {
   const valueInPixels = parseInt(value, 10) * 16;

package/src/index.ts

@@ -3,7 +3,7 @@ export * from './types/chakra';
 export * from './utils/reexports';
 export * from './hooks';
 
-export { default as theme } from './theme';
+export { default as theme, breakpoints } from './theme';
 
 export type { LinkProps } from './Components/Link/Link';
 export { default as Link } from './Components/Link/Link';
@@ -157,8 +157,6 @@ export {
 export type { NotificationProps } from './Components/Notification/Notification';
 export { default as Notification } from './Components/Notification/Notification';
 
-export { BREAKPOINTS } from './Foundations/Breakpoints/Breakpoints';
-
 export type { AccordionProps } from './Components/Accordion/Accordion';
 export { default as Accordion } from './Components/Accordion/Accordion';
 

package/src/theme.ts

@@ -1,10 +1,14 @@
 import tokens from './tokens/tokensToTheme.json';
 
-import breakpoints from './Foundations/Breakpoints/Breakpoints';
-import shadows from './Foundations/Shadows/Shadows';
-import zIndices from './Foundations/Zindex/Zindex';
-
 import components from './Components/components.theme';
+import { BREAKPOINTS } from './types/bitkit';
+
+export const breakpoints = {
+  [BREAKPOINTS.MOBILE]: '0rem',
+  [BREAKPOINTS.TABLET]: '53rem', // 848px
+  [BREAKPOINTS.DESKTOP]: '80rem', // 1280px
+  [BREAKPOINTS.WIDEDESKTOP]: '101rem', // 1616px
+};
 
 const theme = {
   ...tokens,
@@ -13,7 +17,6 @@ const theme = {
   config: {
     cssVarPrefix: '',
   },
-  shadows,
   space: tokens.sizes,
   styles: {
     global: {
@@ -38,7 +41,6 @@ const theme = {
       },
     },
   },
-  zIndices,
 };
 
 export default theme;

package/src/tokens/tokensToTheme.json

@@ -835,6 +835,17 @@
       "utilities/skeleton-strong": "sys.fg.minimal"
     }
   },
+  "shadows": {
+    "formFocus": "0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset, 0 0 0 3px var(--colors-purple-70)",
+    "inner": "0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset",
+    "innerSmall": "0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.1) inset",
+    "large": "0 0.125rem 1.5rem 0 rgba(0, 0, 0, 0.08)",
+    "medium": "0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.06)",
+    "none": "none",
+    "outline": "0 0 0 3px var(--colors-purple-70)",
+    "small": "0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.06)",
+    "tooltip": "0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2)"
+  },
   "sizes": {
     "4": "0.25rem",
     "8": "0.5rem",
@@ -1221,5 +1232,17 @@
       "letterSpacing": "2",
       "textTransform": "uppercase"
     }
+  },
+  "zIndices": {
+    "auto": "auto",
+    "base": 0,
+    "dialog": 1300,
+    "dialogOverlay": 1299,
+    "fullDialog": 1200,
+    "fullDialogOverlay": 1199,
+    "header": 1100,
+    "hide": -1,
+    "popover": 1400,
+    "tooltip": 1500
   }
 }

package/src/types/bitkit.ts

@@ -1,22 +1,11 @@
 import tokens from '../tokens/tokensToTheme.json';
 
-export const TOKEN_STRINGS = [
-  'heading.h1',
-  'heading.h2',
-  'heading.h3',
-  'heading.h4',
-  'heading.h5',
-  'heading.h6',
-  'body.lg.regular',
-  'body.lg.semibold',
-  'body.lg.underline',
-  'body.md.regular',
-  'body.md.semibold',
-  'body.sm.regular',
-  'body.sm.semibold',
-  'code.lg',
-  'code.md',
-] as const;
+export const BREAKPOINTS = {
+  DESKTOP: 'desktop',
+  MOBILE: 'base',
+  TABLET: 'tablet',
+  WIDEDESKTOP: 'wideDesktop',
+};
 
 export type Radii = keyof typeof tokens.radii;
 export type TypeColors = `${
@@ -32,6 +21,8 @@ export type TypeColors = `${
 
 export type ColorScheme = 'blue' | 'red' | 'orange' | 'yellow' | 'green' | 'purple' | 'neutral';
 
+export type Shadows = keyof typeof tokens.shadows;
+
 export type TextSizes = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8';
 
 export type TypeSizes = keyof typeof tokens.sizes;

package/src/Foundations/Breakpoints/Breakpoints.ts

@@ -1,15 +0,0 @@
-export const BREAKPOINTS = {
-  DESKTOP: 'desktop',
-  MOBILE: 'base',
-  TABLET: 'tablet',
-  WIDEDESKTOP: 'wideDesktop',
-};
-
-const breakpoints = {
-  [BREAKPOINTS.MOBILE]: '0rem',
-  [BREAKPOINTS.TABLET]: '53rem', // 848px
-  [BREAKPOINTS.DESKTOP]: '80rem', // 1280px
-  [BREAKPOINTS.WIDEDESKTOP]: '101rem', // 1616px
-};
-
-export default breakpoints;

package/src/Foundations/Colors/Colors.tsx

@@ -1,49 +0,0 @@
-// 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 tokens from '../../tokens/tokensToTheme.json';
-import Card from '../../Components/Card/Card';
-import TokenTable from '../docComponents/TokenTable';
-import DocTitle from '../docComponents/DocTitle';
-import Palette from './Palette';
-
-const commonColorKeys = ['background', 'border', 'icon', 'text'];
-const systemColorKeys = Object.keys(tokens.semanticTokens.colors.sys);
-
-const Colors = () => {
-  return (
-    <Unstyled>
-      <Provider>
-        <DocTitle>Common Tokens</DocTitle>
-        <Card boxShadow="medium" padding="24">
-          {commonColorKeys.map((groupName) => (
-            <TokenTable
-              key={groupName}
-              data={tokens.semanticTokens.colors[groupName as keyof typeof tokens.semanticTokens.colors]}
-              groupName={groupName}
-              marginBottom="24"
-            />
-          ))}
-        </Card>
-        <Divider marginBottom="32" marginTop="48" size="1" />
-        <DocTitle>System Tokens</DocTitle>
-        <Card boxShadow="medium" padding="24">
-          {systemColorKeys.map((groupName) => (
-            <TokenTable
-              key={groupName}
-              data={tokens.semanticTokens.colors.sys[groupName as keyof typeof tokens.semanticTokens.colors.sys]}
-              groupName={groupName}
-              marginBottom="24"
-              tokenPrefix="sys"
-            />
-          ))}
-        </Card>
-        <Divider marginBottom="32" marginTop="48" size="1" />
-        <Palette />
-      </Provider>
-    </Unstyled>
-  );
-};
-
-export default Colors;

package/src/Foundations/Icons/figmaIcons.ts

@@ -1,319 +0,0 @@
-import { SystemStyleObject } from '@chakra-ui/styled-system';
-import { TypeIconName } from '../../Components/Icon/Icon';
-
-export type FigmaIcon = {
-  iconName: TypeIconName | '';
-  figmaToken: string;
-  tags?: string;
-  css?: SystemStyleObject;
-};
-
-export const figmaIcons: {
-  [category: string]: FigmaIcon[];
-} = {
-  Actions: [
-    { figmaToken: 'plus', iconName: 'PlusOpen' },
-    { figmaToken: 'plus-circle', iconName: 'PlusAdd', tags: 'add' },
-    { figmaToken: 'plus-circle-filled', iconName: '' },
-    { figmaToken: 'minus', iconName: 'MinusClose' },
-    { figmaToken: 'minus-circle', iconName: 'MinusRemove', tags: 'remove' },
-    { figmaToken: 'minus-circle-filled', iconName: '' },
-    { figmaToken: 'cross', iconName: 'CloseSmall', tags: 'cancel, close, x, x-mark' },
-    { figmaToken: 'cross-circle', iconName: 'CrossCircle', tags: 'clear, dismiss, remove' },
-    { figmaToken: 'cross-circle-filled', iconName: 'BuildstatusFailedSolid', tags: 'failed, error, status' },
-  ],
-  'Arrows and Chevrons': [
-    { figmaToken: 'arrow-left', iconName: 'ArrowLeft' },
-    { figmaToken: 'arrow-down', iconName: 'ArrowDown' },
-    { figmaToken: 'arrow-right', iconName: 'ArrowRight' },
-    { figmaToken: 'arrow-up', iconName: 'ArrowUp' },
-    { figmaToken: 'arrow-left-over-right', iconName: 'Request', tags: 'request' },
-    { figmaToken: 'arrow-up-down', iconName: 'SortArrows' },
-    { figmaToken: 'arrow-back-and-up', iconName: 'ArrowQuit', tags: 'quit' },
-    { figmaToken: 'arrow-move-down', iconName: 'ArrowMoveDown' },
-    { figmaToken: 'arrow-move-left', iconName: 'ArrowMoveLeft' },
-    { figmaToken: 'arrow-move-right', iconName: 'ArrowMoveRight' },
-    { figmaToken: 'arrow-move-up', iconName: 'ArrowMoveUp' },
-    { figmaToken: 'chevron-down', iconName: 'ChevronDown' },
-    { figmaToken: 'chevron-left', iconName: 'ChevronLeft' },
-    { figmaToken: 'chevron-right', iconName: 'ChevronRight' },
-    { figmaToken: 'chevron-up', iconName: 'ChevronUp' },
-  ],
-  Bitrise: [
-    { figmaToken: 'addons', iconName: 'Addons' },
-    { figmaToken: 'addons-purple', iconName: 'AddonsViolet' },
-    { figmaToken: 'addons-turqouise', iconName: 'AddonsTuorqouise' },
-    { figmaToken: 'addons-white', iconName: 'AddonsWhite' },
-    { figmaToken: 'steps', iconName: 'Steps' },
-    { figmaToken: 'steps-purple', iconName: 'StepsViolet' },
-    { figmaToken: 'steps-turqouise', iconName: 'StepsTuorqouise' },
-    { figmaToken: 'steps-white', iconName: 'StepsWhite' },
-    { figmaToken: 'build', iconName: 'Build' },
-    { figmaToken: 'workflow', iconName: 'Workflow' },
-    { figmaToken: 'workflow-flow', iconName: 'WorkflowFlow' },
-    { figmaToken: 'bitbot', iconName: 'Bitbot' },
-    { figmaToken: 'bitbot-error', iconName: 'BitbotError' },
-    { figmaToken: 'ship', iconName: 'Ship' },
-    { figmaToken: 'trace', iconName: 'Trace' },
-    { figmaToken: 'badge-bitrise', iconName: 'BadgeBitrise' },
-    { figmaToken: 'badge-3rd-party', iconName: 'Badge3rdParty' },
-    { figmaToken: 'step-upgrade', iconName: 'StepUpgrade' },
-    { figmaToken: 'step-version-ok', iconName: 'StepVersionOk' },
-  ],
-  Computer: [
-    { figmaToken: 'memory', iconName: 'Cache', tags: 'cache, ram' },
-    { figmaToken: 'configure', iconName: 'Configure' },
-    { figmaToken: 'cpu', iconName: 'Cpu' },
-    { figmaToken: 'file-doc', iconName: 'FileDoc' },
-    { figmaToken: 'file-pdf', iconName: 'FilePdf' },
-    { figmaToken: 'file-plist', iconName: 'FilePlist' },
-    { figmaToken: 'file-zip', iconName: 'FileZip' },
-    { figmaToken: 'login', iconName: 'Login' },
-    { figmaToken: 'logout', iconName: 'Logout' },
-    { figmaToken: 'filter', iconName: 'Filter', tags: 'configuration, preferences' },
-    { figmaToken: 'copy', iconName: 'Duplicate', tags: 'clone, duplicate' },
-    { figmaToken: 'download', iconName: 'Download' },
-    { figmaToken: 'install', iconName: '' },
-    { figmaToken: 'upload', iconName: 'Upload' },
-    { figmaToken: 'folder', iconName: 'Folder' },
-    { figmaToken: 'save', iconName: 'Save' },
-    { figmaToken: 'fullscreen', iconName: 'Fullscreen' },
-    { figmaToken: 'fullscreen-exit', iconName: 'FullscreenExit' },
-    { figmaToken: 'mobile', iconName: 'Mobile' },
-    { figmaToken: 'laptop', iconName: 'Laptop' },
-    { figmaToken: 'screenshare', iconName: 'Screenshare' },
-    { figmaToken: 'microphone', iconName: 'Podcast' },
-    { figmaToken: 'headset', iconName: 'Webinar', tags: 'webinar' },
-    { figmaToken: 'chat', iconName: 'Chat' },
-    { figmaToken: 'message', iconName: 'Message' },
-    { figmaToken: 'message-alert', iconName: 'ChatMessage', tags: 'chat' },
-    { figmaToken: 'terminal', iconName: 'Window', tags: 'prompt, window' },
-    { figmaToken: 'monitor-chart', iconName: 'MonitorChart' },
-    { figmaToken: 'open-in-new', iconName: 'OpenInBrowser', tags: 'link, new-tab, browser' },
-  ],
-  Developer: [
-    { figmaToken: 'app', iconName: 'App' },
-    { figmaToken: 'branch', iconName: 'Branch' },
-    { figmaToken: 'commit', iconName: '' },
-    { figmaToken: 'pull', iconName: 'Pull' },
-    { figmaToken: 'push', iconName: 'Commit' },
-    { figmaToken: 'bug', iconName: 'Bug' },
-    { figmaToken: 'trigger', iconName: 'Trigger' },
-    { figmaToken: 'stack', iconName: 'Stack' },
-    { figmaToken: 'code', iconName: 'Code' },
-    { figmaToken: 'code-signing', iconName: 'CodeSigning' },
-    { figmaToken: 'deployment', iconName: 'Deployment' },
-    { figmaToken: 'security-shield', iconName: 'SecurityShield' },
-    { figmaToken: 'validate-shield', iconName: 'ValidateShield' },
-    { figmaToken: 'web ui', iconName: 'WebUi' },
-    { figmaToken: 'webhooks', iconName: 'Webhooks' },
-    { figmaToken: 'agent', iconName: 'Agent' },
-  ],
-  Logos: [
-    { figmaToken: 'android', iconName: 'Android' },
-    { figmaToken: 'apple', iconName: 'Apple', tags: 'ios' },
-    { figmaToken: 'apple-filled', iconName: 'AppleFill', tags: 'ios' },
-    { figmaToken: 'macos', iconName: 'Macos' },
-    { figmaToken: 'twitter', iconName: 'Twitter' },
-    { figmaToken: 'bitbucket', iconName: 'BitbucketPlain' },
-    { figmaToken: 'bitbucket-color', iconName: 'BitbucketBlue' },
-    { figmaToken: 'bitbucket-white', iconName: 'BitbucketShadedWhite' },
-    { figmaToken: 'cordova', iconName: 'Cordova' },
-    { figmaToken: 'fastlane', iconName: 'Fastlane' },
-    { figmaToken: 'flutter', iconName: 'Flutter' },
-    { figmaToken: 'go', iconName: 'Go' },
-    { figmaToken: 'github', iconName: 'Github' },
-    { figmaToken: 'gitlab', iconName: 'GitlabPlain' },
-    { figmaToken: 'gitlab-color', iconName: 'GitlabColor' },
-    { figmaToken: 'gitlab-white', iconName: 'GitlabShadedWhite' },
-    { figmaToken: 'ionic', iconName: 'Ionic' },
-    { figmaToken: 'nodejs', iconName: 'Nodejs' },
-    { figmaToken: 'react', iconName: 'ReactIcon' },
-    { figmaToken: 'xamarin', iconName: 'Xamarin' },
-    { figmaToken: 'other', iconName: 'Other' },
-    { figmaToken: 'google', iconName: 'GoogleColor' },
-    { figmaToken: 'bazel', iconName: 'Bazel' },
-    { figmaToken: 'gradle', iconName: 'Gradle' },
-    { figmaToken: 'launchdarkly', iconName: 'LaunchDarkly' },
-  ],
-  Media: [
-    { figmaToken: 'pause', iconName: 'Pause' },
-    { figmaToken: 'play', iconName: 'Play' },
-    { figmaToken: 'shuffle', iconName: 'Shuffle' },
-    { figmaToken: 'video', iconName: 'Video' },
-  ],
-  Navigation: [
-    { figmaToken: 'dashboard', iconName: '' },
-    { figmaToken: 'dashboard-filled', iconName: '' },
-    { figmaToken: 'build-test', iconName: 'BuildTest', tags: 'automation, ci/cd' },
-    { figmaToken: 'build-test-filled', iconName: 'BuildTestSolid', tags: 'automation, ci/cd' },
-    { figmaToken: 'build-cache', iconName: 'BuildCache' },
-    { figmaToken: 'build-cache-filled', iconName: 'BuildCacheSolid' },
-    { figmaToken: 'release', iconName: 'Release' },
-    { figmaToken: 'release-filled', iconName: 'ReleaseSolid' },
-    { figmaToken: 'insights', iconName: 'Insights' },
-    { figmaToken: 'insights-filled', iconName: 'InsightsSolid' },
-    { figmaToken: 'settings', iconName: 'Settings' },
-    { figmaToken: 'settings-filled', iconName: 'SettingsSolid' },
-  ],
-  Objects: [
-    { figmaToken: 'anchor', iconName: 'Anchor' },
-    { figmaToken: 'bell', iconName: 'Bell' },
-    { figmaToken: 'book', iconName: 'Book' },
-    { figmaToken: 'calendar', iconName: 'Calendar' },
-    { figmaToken: 'coffee', iconName: 'Coffee' },
-    { figmaToken: 'creditcard', iconName: 'Creditcard' },
-    { figmaToken: 'credits', iconName: 'Credits' },
-    { figmaToken: 'crown', iconName: 'Owner' },
-    { figmaToken: 'doc', iconName: 'Doc' },
-    { figmaToken: 'enterprise', iconName: 'Enterprise' },
-    { figmaToken: 'flag', iconName: 'Flag' },
-    { figmaToken: 'japanese', iconName: 'Japanese' },
-    { figmaToken: 'gauge', iconName: 'Gauge' },
-    { figmaToken: 'globe', iconName: 'Globe' },
-    { figmaToken: 'heart', iconName: 'Heart' },
-    { figmaToken: 'hourglass', iconName: 'Time', tags: 'time, sand' },
-    { figmaToken: 'image', iconName: 'Image' },
-    { figmaToken: 'invoice', iconName: 'Invoice' },
-    { figmaToken: 'key', iconName: 'Key' },
-    { figmaToken: 'lightbulb', iconName: 'Lightbulb' },
-    { figmaToken: 'link', iconName: 'Link' },
-    { figmaToken: 'lock', iconName: 'Lock', tags: 'private' },
-    { figmaToken: 'lock-open', iconName: 'LockOpen', tags: 'public, unlocked' },
-    { figmaToken: 'magnifier', iconName: 'Magnifier' },
-    { figmaToken: 'mail', iconName: 'Mail', tags: 'email, envelope, message' },
-    { figmaToken: 'news', iconName: 'News' },
-    { figmaToken: 'no-tie', iconName: 'NoTie' },
-    { figmaToken: 'pencil', iconName: 'Pencil' },
-    { figmaToken: 'star', iconName: 'Star' },
-    { figmaToken: 'stopwatch', iconName: 'Stopwatch' },
-    { figmaToken: 'tag', iconName: 'Tag' },
-    { figmaToken: 'tools', iconName: 'Tools' },
-    { figmaToken: 'trash', iconName: 'Trash', tags: 'delete, remove' },
-    { figmaToken: 'siren', iconName: 'Siren', tags: 'alert, alarm, emergency' },
-  ],
-  People: [
-    { figmaToken: 'person', iconName: 'Person', tags: 'account, user' },
-    { figmaToken: 'connected-accounts', iconName: 'ConnectedAccounts' },
-    { figmaToken: 'people', iconName: 'Dudes', tags: 'dudes, team' },
-    { figmaToken: 'person-with-desk', iconName: 'Conference' },
-    { figmaToken: 'eye', iconName: 'ShowPassword', tags: 'password, show, view' },
-    { figmaToken: 'eye-slash', iconName: 'HidePassword', tags: 'hide, password' },
-  ],
-  Status: [
-    { figmaToken: 'circle', iconName: 'BuildstatusNeverbuilt' },
-    { figmaToken: 'circle-dashed', iconName: 'StageIncomplete' },
-    { figmaToken: 'circle-half-full', iconName: 'StageCurrent', tags: 'in-progress' },
-    {
-      figmaToken: 'block-circle',
-      iconName: '',
-      tags: 'abort, aborted, ban, block, forbidden, restricted, status, progress',
-    },
-    { figmaToken: 'question-circle', iconName: '', tags: 'help, support' },
-    { figmaToken: 'question-circle-filled', iconName: '' },
-    { figmaToken: 'skip-circle', iconName: 'StepstatusSkip', tags: 'progress' },
-    { figmaToken: 'skip-circle-filled', iconName: '' },
-    { figmaToken: 'check', iconName: 'Tick', tags: 'tick' },
-    { figmaToken: 'check-circle', iconName: 'BuildstatusSuccessful', tags: 'success' },
-    { figmaToken: 'check-circle-filled', iconName: 'BuildstatusSuccessfulSolid', tags: 'success' },
-    { figmaToken: 'error-circle', iconName: 'StepstatusWarning' },
-    { figmaToken: 'error-circle-filled', iconName: 'ErrorCircleFilled' },
-    { figmaToken: 'info-circle', iconName: '', tags: 'tooltip' },
-    { figmaToken: 'info-circle-filled', iconName: '' },
-    { figmaToken: 'warning', iconName: 'Warning' },
-    { figmaToken: 'warning-yellow', iconName: 'WarningColored' },
-  ],
-  'Status (old)': [
-    { figmaToken: 'test-failed', iconName: 'TestFailed' },
-    { figmaToken: 'test-inconclusive', iconName: 'TestInconclusive' },
-    { figmaToken: 'test-info', iconName: 'TestInfo' },
-    { figmaToken: 'test-inprogress', iconName: 'TestInprogress' },
-    { figmaToken: 'test-skipped', iconName: 'TestSkipped' },
-    { figmaToken: 'test-success', iconName: 'TestSuccess' },
-    { figmaToken: 'test-warning', iconName: 'TestWarning' },
-    { figmaToken: 'spinner-eggplant', iconName: 'ProgressEggplant', tags: 'loading, progress' },
-    { figmaToken: 'spinner-violet', iconName: 'ProgressViolet', tags: 'loading, progress' },
-    { figmaToken: 'spinner-white', iconName: 'ProgressWhite', tags: 'loading, progress' },
-    { figmaToken: 'build-spinner-white', iconName: 'BuildstatusProgressWhite', tags: 'progress, running, status' },
-    {
-      figmaToken: 'build-spinner-eggplant',
-      iconName: 'BuildstatusProgressEggplant',
-      tags: 'progress, running, status',
-    },
-  ],
-  Symbols: [
-    { figmaToken: 'expand', iconName: 'Expand' },
-    { figmaToken: 'refresh', iconName: 'Refresh' },
-    { figmaToken: 'replace', iconName: 'Replace' },
-    { figmaToken: 'history', iconName: 'History' },
-    { figmaToken: 'responsiveness', iconName: 'Responsiveness' },
-    { figmaToken: 'power', iconName: 'Power' },
-    { figmaToken: 'menu-grid', iconName: 'MenuGrid' },
-    { figmaToken: 'menu-hamburger', iconName: 'MenuHamburger' },
-    { figmaToken: 'more-horizontal', iconName: 'MoreHorizontal' },
-    { figmaToken: 'more-vertical', iconName: 'MoreVertical' },
-    { figmaToken: 'overview', iconName: 'Overview' },
-    { figmaToken: 'dot', iconName: 'Bulletpoint', tags: 'bullet, bulletpoint' },
-    { figmaToken: 'group', iconName: 'Group' },
-    { figmaToken: 'percent', iconName: 'Percent' },
-    { figmaToken: 'box-arrow-down', iconName: 'BoxWithArrowDown' },
-    { figmaToken: 'box-dot', iconName: 'BoxWithDot' },
-    { figmaToken: 'box-lines-overflow', iconName: 'OverflowingLines', tags: 'text, wrap' },
-    { figmaToken: 'box-lines-wrap', iconName: 'WrappedLines', tags: 'text' },
-    { figmaToken: 'change-plan', iconName: 'ChangePlan' },
-    { figmaToken: 'dollar', iconName: 'Dollars' },
-    { figmaToken: 'hashtag', iconName: 'Numero', tags: 'numero' },
-    { figmaToken: 'cycle', iconName: 'Cycle' },
-    { figmaToken: 'interaction', iconName: 'Interaction' },
-    { figmaToken: 'stability', iconName: 'Stability' },
-    { figmaToken: 'swag', iconName: 'Swag' },
-    { figmaToken: 'tasks', iconName: 'Testing', tags: 'checklist, list, testing' },
-    { figmaToken: 'wow', iconName: 'Wow' },
-    { figmaToken: 'details', iconName: 'Details' },
-  ],
-  'UI Components': [
-    {
-      css: {
-        path: {
-          fill: 'neutral.80',
-        },
-      },
-      figmaToken: 'table-sort: Not sorted',
-      iconName: 'Sort',
-    },
-    {
-      css: {
-        path: {
-          fill: 'neutral.10',
-        },
-      },
-      figmaToken: 'table-sort: Hover',
-      iconName: 'Sort',
-    },
-    {
-      css: {
-        path: {
-          fill: 'neutral.80',
-        },
-        'path:first-of-type': {
-          fill: 'neutral.10',
-        },
-      },
-      figmaToken: 'table-sort: Up',
-      iconName: 'Sort',
-    },
-    {
-      css: {
-        path: {
-          fill: 'neutral.80',
-        },
-        'path:last-of-type': {
-          fill: 'neutral.10',
-        },
-      },
-      figmaToken: 'table-sort: Descending',
-      iconName: 'Sort',
-    },
-    { figmaToken: 'dropdown-arrows', iconName: 'DropdownArrows' },
-  ],
-};

package/src/Foundations/Shadows/Shadows.ts

@@ -1,14 +0,0 @@
-const shadows = {
-  formFocus: '0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset, 0 0 0 3px var(--colors-purple-70)',
-  inner: '0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1) inset',
-  innerSmall: '0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.1) inset',
-  large: '0 0.125rem 1.5rem 0 rgba(0, 0, 0, 0.08)',
-  medium: '0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.06)',
-  none: 'none',
-  outline: '0 0 0 3px var(--colors-purple-70)',
-  small: '0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.06)',
-  tooltip: '0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2)',
-};
-
-export type Shadows = typeof shadows;
-export default shadows;

package/src/Foundations/Typography/Typography.tsx

@@ -1,25 +0,0 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
-import { Unstyled } from '@storybook/blocks';
-import Provider from '../../Components/Provider/Provider';
-import DocTitle from '../docComponents/DocTitle';
-import TokenTable from '../docComponents/TokenTable';
-import { textStyles } from '../../tokens/tokensToTheme.json';
-
-const getStyles = (filterString: string) => {
-  return Object.fromEntries(Object.entries(textStyles).filter(([key]) => key.includes(filterString)));
-};
-
-const Typography = () => {
-  return (
-    <Unstyled>
-      <Provider>
-        <DocTitle>Text Styles</DocTitle>
-        <TokenTable data={getStyles('heading/')} groupName="heading" marginBottom="24" type="text" />
-        <TokenTable data={getStyles('body/')} groupName="body" marginBottom="24" type="text" />
-        <TokenTable data={getStyles('code/')} groupName="code" type="text" />
-      </Provider>
-    </Unstyled>
-  );
-};
-
-export default Typography;

package/src/Foundations/Zindex/Zindex.ts

@@ -1,14 +0,0 @@
-const zIndices = {
-  auto: 'auto',
-  base: 0,
-  dialog: 1300,
-  dialogOverlay: 1299,
-  fullDialog: 1200,
-  fullDialogOverlay: 1199,
-  header: 1100,
-  hide: -1,
-  popover: 1400,
-  tooltip: 1500,
-};
-
-export default zIndices;

package/src/Foundations/docComponents/DocTitle.tsx

@@ -1,11 +0,0 @@
-import Text from '../../Components/Text/Text';
-
-const DocTitle = ({ children }: { children: string }) => {
-  return (
-    <Text as="h2" color="pal.purple.10" fontWeight="normal" marginBlockEnd="8" size="8">
-      {children}
-    </Text>
-  );
-};
-
-export default DocTitle;

package/src/Foundations/docComponents/TokenTable.tsx

@@ -1,106 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import { useEffect, useRef, useState } from 'react';
-import { useToken } from '@chakra-ui/react';
-import CodeSnippet from '../../Components/CodeSnippet/CodeSnippet';
-import Dot from '../../Components/Dot/Dot';
-import Table from '../../Components/Table/Table';
-import TableCaption from '../../Components/Table/TableCaption';
-import TableContainer, { TableContainerProps } from '../../Components/Table/TableContainer';
-import Tbody from '../../Components/Table/Tbody';
-import Td from '../../Components/Table/Td';
-import Text from '../../Components/Text/Text';
-import Th from '../../Components/Table/Th';
-import Thead from '../../Components/Table/Thead';
-import Tr from '../../Components/Table/Tr';
-import { textStyles } from '../../tokens/tokensToTheme.json';
-
-type RowType = {
-  groupName: string;
-  token: string;
-  tokenPrefix?: string;
-  type?: 'color' | 'text';
-  value: string;
-};
-
-const Row = ({ groupName, token, tokenPrefix, type, value }: RowType) => {
-  const themeValue = useToken('colors', value);
-  const [hexa, setHexa] = useState(themeValue);
-
-  const dotRef = useRef<HTMLDivElement>(null);
-
-  const tokenKey = type === 'color' ? [tokenPrefix, groupName, token].filter(Boolean).join('/') : token;
-
-  useEffect(() => {
-    if (dotRef.current && hexa.includes('var(')) {
-      setHexa(getComputedStyle(dotRef.current).getPropertyValue(hexa.replace('var(', '').replace(')', '')));
-    }
-  }, []);
-
-  return (
-    <Tr role="group">
-      <Td>
-        <CodeSnippet _groupHover={{ backgroundColor: 'neutral.93' }}>{tokenKey}</CodeSnippet>
-      </Td>
-      <Td>
-        <>
-          {type === 'color' && (
-            <>
-              <Text marginBottom="8" size="2">
-                {hexa}
-              </Text>
-              <Text size="2">({value})</Text>
-            </>
-          )}
-          {type === 'text' && (
-            <Text as="pre" textStyle="code/lg" whiteSpace="normal">
-              {JSON.stringify(textStyles[tokenKey as keyof typeof textStyles]).replace(/,/, ', ')}
-            </Text>
-          )}
-        </>
-      </Td>
-      <Td>
-        {type === 'color' && <Dot ref={dotRef} backgroundColor={value} border="1px solid" size="48" />}
-        {type === 'text' && <Text textStyle={tokenKey}>{tokenKey}</Text>}
-      </Td>
-    </Tr>
-  );
-};
-
-export interface TokenTableProps extends TableContainerProps {
-  data: any;
-  groupName: string;
-  tokenPrefix?: string;
-  type?: 'color' | 'text';
-}
-
-const TokenTable = (props: TokenTableProps) => {
-  const { data, groupName, tokenPrefix, type = 'color', ...rest } = props;
-  return (
-    <TableContainer {...rest}>
-      <Table isFixed>
-        <TableCaption>{groupName}</TableCaption>
-        <Thead>
-          <Tr>
-            <Th width="30%">Token</Th>
-            <Th>Value</Th>
-            <Th width="20%">Example</Th>
-          </Tr>
-        </Thead>
-        <Tbody>
-          {Object.entries(data).map(([token, value]) => (
-            <Row
-              key={token}
-              groupName={groupName}
-              token={token}
-              tokenPrefix={tokenPrefix}
-              type={type}
-              value={`${value}`}
-            />
-          ))}
-        </Tbody>
-      </Table>
-    </TableContainer>
-  );
-};
-
-export default TokenTable;