@amboss/design-system 1.14.5 → 1.14.6

package/build/esm/src/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\n\nimport styled from \"@emotion/styled\";\nimport React from \"react\";\n\nimport { mq } from \"../../shared/mediaQueries\";\nimport { MQ, SpaceSizes } from \"../../types\";\nimport { Icon, IconName } from \"../Icon/Icon\";\nimport { Stack } from \"../Stack/Stack\";\n\nconst BORDER_BOTTOM_WIDTH = 4;\n\nconst StyledContainer = styled.div<{\n  horizontalPadding: SpaceSizes | MQ<SpaceSizes>;\n}>(({ theme, horizontalPadding }) => ({\n  display: \"flex\",\n  flexDirection: \"row\",\n  ...mq({\n    gap: [[\"m\", \"l\", \"l\"], theme.variables.size.spacing],\n    paddingInline: [horizontalPadding, theme.variables.size.spacing],\n  }),\n\n  paddingTop: theme.variables.size.spacing.m,\n  borderBottom: `1px solid ${theme.values.color.border.secondary.default}`,\n\n  whiteSpace: \"nowrap\",\n\n  // Scrollbar\n  overflow: \"auto\",\n  scrollbarWidth: \"none\", // Firefox\n  msOverflowStyle: \"none\", // IE 10+\n  \"::-webkit-scrollbar\": {\n    display: \"none\", // Chrome\n  },\n}));\n\nconst StyledTab = styled.button<{ active: boolean }>(({ theme, active }) => ({\n  display: \"flex\",\n  gap: theme.variables.size.spacing.xxs,\n  alignItems: \"center\",\n\n  background: 0,\n  border: 0,\n  boxSizing: \"border-box\",\n  color: theme.values.color.text.secondary.default,\n  padding: 0,\n  fontFamily: theme.variables.fontFamily.lato,\n  fontWeight: theme.variables.weight.bold,\n  fontSize: theme.variables.size.font.text.s,\n  lineHeight: theme.variables.size.lineHeight.text.s,\n  transition: \"background-color 0.15s\",\n  textDecoration: \"none\",\n\n  // Required to maintain consistent height for the selected tab\n  borderBottom: `${BORDER_BOTTOM_WIDTH}px solid transparent`,\n  paddingBottom: `calc(${theme.variables.size.spacing.m} - ${BORDER_BOTTOM_WIDTH}px)`,\n\n  ...(active && {\n    color: theme.values.color.text.accent.default,\n    borderBottom: `${BORDER_BOTTOM_WIDTH}px solid ${theme.values.color.background.accent.default}`,\n  }),\n  ...(!active && {\n    cursor: \"pointer\",\n    \"&:hover\": {\n      color: theme.values.color.text.primary.default,\n      borderBottom: `${BORDER_BOTTOM_WIDTH}px solid ${theme.values.color.background.transparent.hover}`,\n    },\n    \"&:active\": {\n      color: theme.values.color.text.primary.default,\n      borderBottom: `${BORDER_BOTTOM_WIDTH}px  solid ${theme.values.color.background.hightlight.default}`,\n    },\n  }),\n}));\n\nconst addSubtitle = (text: string) => (text ? `(${text})` : ``);\n\n/**\n * @param label - The text to display in the tab\n * @param sublabel - A subtext, encased in parentheses\n * @param icon - An icon to display to the left of the label\n * @param as - The element to render the tab as, defaults to `button`\n */\ntype Tab = {\n  label: string;\n  sublabel?: string;\n  icon?: IconName;\n  as?: \"a\" | \"button\" | React.ComponentType;\n} & Partial<React.ComponentProps<\"button\">> &\n  Partial<React.ComponentProps<\"a\">>;\n\nexport type TabsProps = {\n  children?: React.ReactElement;\n  /** The index of the active tab */\n  activeTab?: number;\n  onTabSelect?: (selectedTab: number) => void;\n  /** An array of tabs, contains `header`, `subtitle`, `iconLeft`, `as` (defining the tab as a button or a link) */\n  tabs: Tab[];\n  /** Horizontal padding space for the tab container, suited for tabs within a Card element */\n  horizontalPadding?: SpaceSizes | MQ<SpaceSizes>; // 'm' | ['m', 'l', 'l']\n  \"data-e2e-test-id\"?: string;\n};\n\nexport function Tabs({\n  tabs,\n  horizontalPadding,\n  activeTab = 0,\n  children,\n  onTabSelect,\n  \"data-e2e-test-id\": dataE2eTestId,\n}: TabsProps): React.ReactElement {\n  return (\n    <Stack data-e2e-test-id={dataE2eTestId} data-ds-id=\"Tabs\">\n      <StyledContainer horizontalPadding={horizontalPadding}>\n        {tabs.map(({ label, sublabel, icon, as = \"button\", ...rest }, i) => (\n          <StyledTab\n            type={as !== \"button\" ? undefined : \"button\"}\n            as={as}\n            key={label}\n            active={activeTab === i}\n            onClick={() => onTabSelect && onTabSelect(i)}\n            {...rest}\n          >\n            {icon && <Icon size=\"s\" name={icon} />}\n            {label} {addSubtitle(sublabel)}\n          </StyledTab>\n        ))}\n      </StyledContainer>\n      {children}\n    </Stack>\n  );\n}\n"],"names":["BORDER_BOTTOM_WIDTH","StyledContainer","_styled","process","env","NODE_ENV","target","label","_ref","theme","horizontalPadding","display","flexDirection","mq","gap","variables","size","spacing","paddingInline","paddingTop","m","borderBottom","values","color","border","secondary","default","whiteSpace","overflow","scrollbarWidth","msOverflowStyle","StyledTab","_ref2","active","xxs","alignItems","background","boxSizing","text","padding","fontFamily","lato","fontWeight","weight","bold","fontSize","font","s","lineHeight","transition","textDecoration","paddingBottom","accent","cursor","primary","transparent","hover","hightlight","addSubtitle","Tabs","_ref3","tabs","activeTab","children","onTabSelect","dataE2eTestId","React","createElement","Stack","map","_ref4","i","sublabel","icon","as","rest","_extends","type","undefined","key","onClick","Icon","name"],"mappings":";;;;;;;AAUA,MAAMA,mBAAmB,GAAG,CAAC,CAAA;AAE7B,MAAMC,eAAe,gBAAGC,OAAA,CAAA,KAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,QAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,QAAA;EAAAC,KAAA,EAAA,iBAAA;AAAA,CAAA,CAAA,CAErBC,IAAA,IAAA;EAAA,IAAC;IAAEC,KAAK;AAAEC,IAAAA,iBAAAA;AAAkB,GAAC,GAAAF,IAAA,CAAA;EAAA,OAAM;AACpCG,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,aAAa,EAAE,KAAK;AACpB,IAAA,GAAGC,EAAE,CAAC;AACJC,MAAAA,GAAG,EAAE,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,EAAEL,KAAK,CAACM,SAAS,CAACC,IAAI,CAACC,OAAO,CAAC;MACpDC,aAAa,EAAE,CAACR,iBAAiB,EAAED,KAAK,CAACM,SAAS,CAACC,IAAI,CAACC,OAAO,CAAA;AACjE,KAAC,CAAC;IAEFE,UAAU,EAAEV,KAAK,CAACM,SAAS,CAACC,IAAI,CAACC,OAAO,CAACG,CAAC;AAC1CC,IAAAA,YAAY,EAAG,CAAA,UAAA,EAAYZ,KAAK,CAACa,MAAM,CAACC,KAAK,CAACC,MAAM,CAACC,SAAS,CAACC,OAAQ,CAAC,CAAA;AAExEC,IAAAA,UAAU,EAAE,QAAQ;AAEpB;AACAC,IAAAA,QAAQ,EAAE,MAAM;AAChBC,IAAAA,cAAc,EAAE,MAAM;AAAE;AACxBC,IAAAA,eAAe,EAAE,MAAM;AAAE;AACzB,IAAA,qBAAqB,EAAE;MACrBnB,OAAO,EAAE,MAAM;AACjB,KAAA;GACD,CAAA;AAAA,CAAC,EAAAR,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAC,YAAA,GAAA,EAAA,GAAA,y5LAAA,CAAA,CAAA;AAEH,MAAM0B,SAAS,gBAAG7B,OAAA,CAAA,QAAA,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAA,YAAA,GAAA;EAAAC,MAAA,EAAA,QAAA;AAAA,CAAA,GAAA;EAAAA,MAAA,EAAA,QAAA;EAAAC,KAAA,EAAA,WAAA;AAAA,CAAA,CAAA,CAAmCyB,KAAA,IAAA;EAAA,IAAC;IAAEvB,KAAK;AAAEwB,IAAAA,MAAAA;AAAO,GAAC,GAAAD,KAAA,CAAA;EAAA,OAAM;AAC3ErB,IAAAA,OAAO,EAAE,MAAM;IACfG,GAAG,EAAEL,KAAK,CAACM,SAAS,CAACC,IAAI,CAACC,OAAO,CAACiB,GAAG;AACrCC,IAAAA,UAAU,EAAE,QAAQ;AAEpBC,IAAAA,UAAU,EAAE,CAAC;AACbZ,IAAAA,MAAM,EAAE,CAAC;AACTa,IAAAA,SAAS,EAAE,YAAY;IACvBd,KAAK,EAAEd,KAAK,CAACa,MAAM,CAACC,KAAK,CAACe,IAAI,CAACb,SAAS,CAACC,OAAO;AAChDa,IAAAA,OAAO,EAAE,CAAC;AACVC,IAAAA,UAAU,EAAE/B,KAAK,CAACM,SAAS,CAACyB,UAAU,CAACC,IAAI;AAC3CC,IAAAA,UAAU,EAAEjC,KAAK,CAACM,SAAS,CAAC4B,MAAM,CAACC,IAAI;IACvCC,QAAQ,EAAEpC,KAAK,CAACM,SAAS,CAACC,IAAI,CAAC8B,IAAI,CAACR,IAAI,CAACS,CAAC;IAC1CC,UAAU,EAAEvC,KAAK,CAACM,SAAS,CAACC,IAAI,CAACgC,UAAU,CAACV,IAAI,CAACS,CAAC;AAClDE,IAAAA,UAAU,EAAE,wBAAwB;AACpCC,IAAAA,cAAc,EAAE,MAAM;AAEtB;IACA7B,YAAY,EAAG,CAAErB,EAAAA,mBAAoB,CAAqB,oBAAA,CAAA;AAC1DmD,IAAAA,aAAa,EAAG,CAAA,KAAA,EAAO1C,KAAK,CAACM,SAAS,CAACC,IAAI,CAACC,OAAO,CAACG,CAAE,CAAA,GAAA,EAAKpB,mBAAoB,CAAI,GAAA,CAAA;AAEnF,IAAA,IAAIiC,MAAM,IAAI;MACZV,KAAK,EAAEd,KAAK,CAACa,MAAM,CAACC,KAAK,CAACe,IAAI,CAACc,MAAM,CAAC1B,OAAO;AAC7CL,MAAAA,YAAY,EAAG,CAAA,EAAErB,mBAAoB,CAAA,SAAA,EAAWS,KAAK,CAACa,MAAM,CAACC,KAAK,CAACa,UAAU,CAACgB,MAAM,CAAC1B,OAAQ,CAAA,CAAA;AAC/F,KAAC,CAAC;IACF,IAAI,CAACO,MAAM,IAAI;AACboB,MAAAA,MAAM,EAAE,SAAS;AACjB,MAAA,SAAS,EAAE;QACT9B,KAAK,EAAEd,KAAK,CAACa,MAAM,CAACC,KAAK,CAACe,IAAI,CAACgB,OAAO,CAAC5B,OAAO;AAC9CL,QAAAA,YAAY,EAAG,CAAA,EAAErB,mBAAoB,CAAA,SAAA,EAAWS,KAAK,CAACa,MAAM,CAACC,KAAK,CAACa,UAAU,CAACmB,WAAW,CAACC,KAAM,CAAA,CAAA;OACjG;AACD,MAAA,UAAU,EAAE;QACVjC,KAAK,EAAEd,KAAK,CAACa,MAAM,CAACC,KAAK,CAACe,IAAI,CAACgB,OAAO,CAAC5B,OAAO;AAC9CL,QAAAA,YAAY,EAAG,CAAA,EAAErB,mBAAoB,CAAA,UAAA,EAAYS,KAAK,CAACa,MAAM,CAACC,KAAK,CAACa,UAAU,CAACqB,UAAU,CAAC/B,OAAQ,CAAA,CAAA;AACpG,OAAA;KACD,CAAA;GACF,CAAA;AAAA,CAAC,EAAAvB,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAC,YAAA,GAAA,EAAA,GAAA,y5LAAA,CAAA,CAAA;AAEH,MAAMqD,WAAW,GAAIpB,IAAY,IAAMA,IAAI,GAAI,CAAGA,CAAAA,EAAAA,IAAK,CAAE,CAAA,CAAA,GAAI,CAAE,CAAA,CAAA;;AAE/D;AACA;AACA;AACA;AACA;AACA;;AAqBO,SAASqB,IAAIA,CAAAC,KAAA,EAOc;EAAA,IAPb;IACnBC,IAAI;IACJnD,iBAAiB;AACjBoD,IAAAA,SAAS,GAAG,CAAC;IACbC,QAAQ;IACRC,WAAW;AACX,IAAA,kBAAkB,EAAEC,aAAAA;AACX,GAAC,GAAAL,KAAA,CAAA;AACV,EAAA,oBACEM,KAAA,CAAAC,aAAA,CAACC,KAAK,EAAA;AAAC,IAAA,kBAAA,EAAkBH,aAAc;IAAC,YAAW,EAAA,MAAA;AAAM,GAAA,eACvDC,KAAA,CAAAC,aAAA,CAAClE,eAAe,EAAA;AAACS,IAAAA,iBAAiB,EAAEA,iBAAAA;AAAkB,GAAA,EACnDmD,IAAI,CAACQ,GAAG,CAAC,CAAAC,KAAA,EAAoDC,CAAC,KAAA;IAAA,IAApD;MAAEhE,KAAK;MAAEiE,QAAQ;MAAEC,IAAI;AAAEC,MAAAA,EAAE,GAAG,QAAQ;MAAE,GAAGC,IAAAA;AAAK,KAAC,GAAAL,KAAA,CAAA;AAAA,IAAA,oBAC1DJ,KAAA,CAAAC,aAAA,CAACpC,SAAS,EAAA6C,QAAA,CAAA;AACRC,MAAAA,IAAI,EAAEH,EAAE,KAAK,QAAQ,GAAGI,SAAS,GAAG,QAAS;AAC7CJ,MAAAA,EAAE,EAAEA,EAAG;AACPK,MAAAA,GAAG,EAAExE,KAAM;MACX0B,MAAM,EAAE6B,SAAS,KAAKS,CAAE;AACxBS,MAAAA,OAAO,EAAEA,MAAMhB,WAAW,IAAIA,WAAW,CAACO,CAAC,CAAA;KACvCI,EAAAA,IAAI,GAEPF,IAAI,iBAAIP,KAAA,CAAAC,aAAA,CAACc,IAAI,EAAA;AAACjE,MAAAA,IAAI,EAAC,GAAG;AAACkE,MAAAA,IAAI,EAAET,IAAAA;KAAO,CAAC,EACrClE,KAAK,EAAC,GAAC,EAACmD,WAAW,CAACc,QAAQ,CACpB,CAAC,CAAA;AAAA,GACb,CACc,CAAC,EACjBT,QACI,CAAC,CAAA;AAEZ;;;;"}
+{"version":3,"file":"Tabs.js","sources":["../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["/* eslint-disable react/jsx-props-no-spreading */\n\nimport styled from \"@emotion/styled\";\nimport React from \"react\";\n\nimport { mq } from \"../../shared/mediaQueries\";\nimport { MQ, SpaceSizes } from \"../../types\";\nimport { Icon, IconName } from \"../Icon/Icon\";\nimport { Stack } from \"../Stack/Stack\";\n\nconst BORDER_BOTTOM_WIDTH = 4;\n\nconst StyledContainer = styled.div<{\n  horizontalPadding: SpaceSizes | MQ<SpaceSizes>;\n}>(({ theme, horizontalPadding }) => ({\n  display: \"flex\",\n  flexDirection: \"row\",\n  ...mq({\n    gap: [[\"m\", \"l\", \"l\"], theme.variables.size.spacing],\n    paddingInline: [horizontalPadding, theme.variables.size.spacing],\n  }),\n\n  paddingTop: theme.variables.size.spacing.m,\n  borderBottom: `1px solid ${theme.values.color.border.secondary.default}`,\n\n  whiteSpace: \"nowrap\",\n\n  // Scrollbar\n  overflow: \"auto\",\n  scrollbarWidth: \"none\", // Firefox\n  msOverflowStyle: \"none\", // IE 10+\n  \"::-webkit-scrollbar\": {\n    display: \"none\", // Chrome\n  },\n}));\n\nconst StyledTab = styled.button<{ active: boolean }>(({ theme, active }) => ({\n  display: \"flex\",\n  gap: theme.variables.size.spacing.xxs,\n  alignItems: \"center\",\n\n  background: 0,\n  border: 0,\n  boxSizing: \"border-box\",\n  color: theme.values.color.text.secondary.default,\n  padding: 0,\n  fontFamily: theme.variables.fontFamily.lato,\n  fontWeight: theme.variables.weight.bold,\n  fontSize: theme.variables.size.font.text.s,\n  lineHeight: theme.variables.size.lineHeight.text.s,\n  transition: \"background-color 0.15s\",\n  textDecoration: \"none\",\n\n  // Required to maintain consistent height for the selected tab\n  borderBottom: `${BORDER_BOTTOM_WIDTH}px solid transparent`,\n  paddingBottom: `calc(${theme.variables.size.spacing.m} - ${BORDER_BOTTOM_WIDTH}px)`,\n\n  ...(active && {\n    color: theme.values.color.text.accent.default,\n    borderBottom: `${BORDER_BOTTOM_WIDTH}px solid ${theme.values.color.background.accent.default}`,\n  }),\n  ...(!active && {\n    cursor: \"pointer\",\n    \"&:hover\": {\n      color: theme.values.color.text.primary.default,\n      borderBottom: `${BORDER_BOTTOM_WIDTH}px solid ${theme.values.color.background.transparent.hover}`,\n    },\n    \"&:active\": {\n      color: theme.values.color.text.primary.default,\n      borderBottom: `${BORDER_BOTTOM_WIDTH}px  solid ${theme.values.color.background.highlight.default}`,\n    },\n  }),\n}));\n\nconst addSubtitle = (text: string) => (text ? `(${text})` : ``);\n\n/**\n * @param label - The text to display in the tab\n * @param sublabel - A subtext, encased in parentheses\n * @param icon - An icon to display to the left of the label\n * @param as - The element to render the tab as, defaults to `button`\n */\ntype Tab = {\n  label: string;\n  sublabel?: string;\n  icon?: IconName;\n  as?: \"a\" | \"button\" | React.ComponentType;\n} & Partial<React.ComponentProps<\"button\">> &\n  Partial<React.ComponentProps<\"a\">>;\n\nexport type TabsProps = {\n  children?: React.ReactElement;\n  /** The index of the active tab */\n  activeTab?: number;\n  onTabSelect?: (selectedTab: number) => void;\n  /** An array of tabs, contains `header`, `subtitle`, `iconLeft`, `as` (defining the tab as a button or a link) */\n  tabs: Tab[];\n  /** Horizontal padding space for the tab container, suited for tabs within a Card element */\n  horizontalPadding?: SpaceSizes | MQ<SpaceSizes>; // 'm' | ['m', 'l', 'l']\n  \"data-e2e-test-id\"?: string;\n};\n\nexport function Tabs({\n  tabs,\n  horizontalPadding,\n  activeTab = 0,\n  children,\n  onTabSelect,\n  \"data-e2e-test-id\": dataE2eTestId,\n}: TabsProps): React.ReactElement {\n  return (\n    <Stack data-e2e-test-id={dataE2eTestId} data-ds-id=\"Tabs\">\n      <StyledContainer horizontalPadding={horizontalPadding}>\n        {tabs.map(({ label, sublabel, icon, as = \"button\", ...rest }, i) => (\n          <StyledTab\n            type={as !== \"button\" ? undefined : \"button\"}\n            as={as}\n            key={label}\n            active={activeTab === i}\n            onClick={() => onTabSelect && onTabSelect(i)}\n            {...rest}\n          >\n            {icon && <Icon size=\"s\" name={icon} />}\n            {label} {addSubtitle(sublabel)}\n          </StyledTab>\n        ))}\n      </StyledContainer>\n      {children}\n    </Stack>\n  );\n}\n"],"names":["BORDER_BOTTOM_WIDTH","StyledContainer","_styled","process","env","NODE_ENV","target","label","_ref","theme","horizontalPadding","display","flexDirection","mq","gap","variables","size","spacing","paddingInline","paddingTop","m","borderBottom","values","color","border","secondary","default","whiteSpace","overflow","scrollbarWidth","msOverflowStyle","StyledTab","_ref2","active","xxs","alignItems","background","boxSizing","text","padding","fontFamily","lato","fontWeight","weight","bold","fontSize","font","s","lineHeight","transition","textDecoration","paddingBottom","accent","cursor","primary","transparent","hover","highlight","addSubtitle","Tabs","_ref3","tabs","activeTab","children","onTabSelect","dataE2eTestId","React","createElement","Stack","map","_ref4","i","sublabel","icon","as","rest","_extends","type","undefined","key","onClick","Icon","name"],"mappings":"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"}

package/build/esm/src/types/index.d.ts

@@ -28,7 +28,7 @@ declare const TextColorsRuntype: Union<[Union<[Union<[Literal<"primary">, Litera
 export declare type TextColors = Static<typeof TextColorsRuntype>;
 declare const TextVariationsRuntype: Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>, Literal<"info">, Literal<"error">, Literal<"warning">]>;
 export declare type TextVariations = Static<typeof TextVariationsRuntype>;
-declare const IconsColorsRuntime: Union<[Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>, Literal<"accent">]>, Literal<"info">, Literal<"error">, Literal<"warning">, Literal<"inherit">, Literal<"brand">]>;
+declare const IconsColorsRuntime: Union<[Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>, Literal<"accent">]>, Literal<"info">, Literal<"error">, Literal<"warning">, Literal<"inherit">, Literal<"brand">, Literal<"quaternary">]>;
 export declare type IconsColors = Static<typeof IconsColorsRuntime>;
 declare const IconsVariationsRuntype: Union<[Union<[Literal<"primary">, Literal<"secondary">, Literal<"tertiary">]>, Literal<"info">, Literal<"error">, Literal<"warning">, Literal<"inherit">, Literal<"brand">]>;
 export declare type IconsVariations = Static<typeof IconsVariationsRuntype>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amboss/design-system",
-  "version": "1.14.5",
+  "version": "1.14.6",
   "description": "the design system for AMBOSS products",
   "author": "Bagrat Gobedashvili",
   "license": "ISC",
@@ -55,17 +55,19 @@
   "scripts": {
     "clean": "rimraf build build-tokens",
     "build": "./scripts/build.sh",
-    "prestart": "npm run tokens",
+    "prestart": "npm run tokens:web",
     "start": "npm run tokens:watch & npm run storybook",
     "static": "http-server storybook-static/ -p 6006",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "npm run tokens && storybook build",
+    "build-storybook": "npm run tokens:web && storybook build",
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "TZ=Europe/Berlin jest --coverage",
     "test:ci": "NODE_OPTIONS=\"--max-old-space-size=6144\" npm run test:coverage -- --ci --maxWorkers=2 --reporters=jest-junit",
-    "tokens": "node style-dictionary/style-dictionary.build.js",
-    "tokens:watch": "chokidar  \"tokens/**/*.json\" -c \"npm run tokens\"",
+    "tokens:web": "node style-dictionary/web/web.build.js",
+    "tokens:android": "node style-dictionary/android/android.build.js",
+    "tokens:ios": "node style-dictionary/ios/ios.build.js",
+    "tokens:watch": "chokidar  \"tokens/**/*.json\" \"style-dictionary/**/*.*\" -c \"npm run tokens:web\"",
     "tokens:prettier": "prettier --write \"build-tokens/*.(t|j)s*\"",
     "chromatic": "npx chromatic --project-token ${CHROMATIC_TOKEN} --exit-zero-on-changes --only-changed",
     "chromatic:ci": "npx chromatic --project-token ${CHROMATIC_TOKEN}  --skip 'dependabot/**' --exit-zero-on-changes --only-changed",
@@ -89,7 +91,7 @@
     "typescript"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.21.0",
+    "@babel/runtime": "^7.22.10",
     "react-is": "^17.0.1",
     "runtypes": "^6.3.0"
   },
@@ -123,16 +125,16 @@
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
-    "@storybook/addon-a11y": "^7.0.6",
-    "@storybook/addon-essentials": "^7.0.6",
-    "@storybook/addon-interactions": "^7.0.6",
-    "@storybook/addon-links": "^7.0.6",
-    "@storybook/addon-storysource": "^7.2.3",
-    "@storybook/blocks": "^7.0.6",
-    "@storybook/manager-api": "^7.0.6",
-    "@storybook/react": "^7.0.6",
-    "@storybook/react-webpack5": "^7.0.6",
-    "@storybook/theming": "^7.0.6",
+    "@storybook/addon-a11y": "^7.3.2",
+    "@storybook/addon-essentials": "^7.3.2",
+    "@storybook/addon-interactions": "^7.3.2",
+    "@storybook/addon-links": "^7.3.2",
+    "@storybook/addon-storysource": "^7.3.2",
+    "@storybook/blocks": "^7.3.2",
+    "@storybook/manager-api": "^7.3.2",
+    "@storybook/react": "^7.3.2",
+    "@storybook/react-webpack5": "^7.3.2",
+    "@storybook/theming": "^7.3.2",
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^13.0.1",
@@ -169,13 +171,15 @@
     "jest-environment-jsdom": "^29.6.2",
     "jest-junit": "^16.0.0",
     "lint-staged": "^13.2.2",
+    "lodash": "^4.17.21",
     "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rollup": "^3.21.0",
     "slackify-markdown": "^4.1.0",
-    "storybook": "^7.0.6",
+    "storybook": "^7.3.2",
     "style-dictionary": "^3.8.0",
+    "tinycolor2": "^1.6.0",
     "ts-jest": "^29.1.1",
     "typescript": "^4.1.2",
     "webpack": "^5.73.0",