@atom-learning/components 3.10.0 → 3.11.0

package/dist/components/table/TableCell.d.ts

@@ -16,9 +16,10 @@ export declare const TableCell: import("@stitches/react/types/styled-component")
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -165,11 +166,6 @@ export declare const TableCell: import("@stitches/react/types/styled-component")
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -178,6 +174,10 @@ export declare const TableCell: import("@stitches/react/types/styled-component")
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -201,6 +201,18 @@ export declare const TableCell: import("@stitches/react/types/styled-component")
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;

package/dist/components/table/TableFooter.d.ts

@@ -16,9 +16,10 @@ export declare const TableFooter: import("@stitches/react/types/styled-component
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -165,11 +166,6 @@ export declare const TableFooter: import("@stitches/react/types/styled-component
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -178,6 +174,10 @@ export declare const TableFooter: import("@stitches/react/types/styled-component
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -201,6 +201,18 @@ export declare const TableFooter: import("@stitches/react/types/styled-component
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;

package/dist/components/table/TableFooterCell.d.ts

@@ -16,9 +16,10 @@ export declare const TableFooterCell: import("@stitches/react/types/styled-compo
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -165,11 +166,6 @@ export declare const TableFooterCell: import("@stitches/react/types/styled-compo
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -178,6 +174,10 @@ export declare const TableFooterCell: import("@stitches/react/types/styled-compo
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -201,6 +201,18 @@ export declare const TableFooterCell: import("@stitches/react/types/styled-compo
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;

package/dist/components/table/TableHeader.d.ts

@@ -25,9 +25,10 @@ declare const StyledTableHeader: import("@stitches/react/types/styled-component"
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -174,11 +175,6 @@ declare const StyledTableHeader: import("@stitches/react/types/styled-component"
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -187,6 +183,10 @@ declare const StyledTableHeader: import("@stitches/react/types/styled-component"
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -210,6 +210,18 @@ declare const StyledTableHeader: import("@stitches/react/types/styled-component"
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;

package/dist/components/table/TableHeader.js

@@ -1,2 +1,2 @@
-import m from"react";import{styled as l}from"../../stitches.js";import{TableHeaderCell as r}from"./TableHeaderCell.js";const e={PRIMARY:"primary",PRIMARY_DARK:"primaryDark",LIGHT:"light"},p=l("thead",{variants:{theme:{[e.PRIMARY]:{[`${r}`]:{bg:"$primary"}},[e.PRIMARY_DARK]:{[`${r}`]:{bg:"$primaryDark"}},[e.LIGHT]:{[`${r}`]:{bg:"$tonal50",color:"$tonal600"}}},isSticky:{true:{position:"sticky",top:0,zIndex:3}}}}),t=({theme:a="primaryDark",isSticky:i=!1,...o})=>m.createElement(p,{theme:a,isSticky:i,...o});t.displayName="TableHeader";export{e as TABLE_HEADER_THEMES,t as TableHeader};
+import m from"react";import{styled as l}from"../../stitches.js";import{TableHeaderCell as r}from"./TableHeaderCell.js";const e={PRIMARY:"primary",PRIMARY_DARK:"primaryDark",LIGHT:"light"},p=l("thead",{variants:{theme:{[e.PRIMARY]:{[`${r}`]:{bg:"$primary800"}},[e.PRIMARY_DARK]:{[`${r}`]:{bg:"$primary1000"}},[e.LIGHT]:{[`${r}`]:{bg:"$tonal50",color:"$tonal600"}}},isSticky:{true:{position:"sticky",top:0,zIndex:3}}}}),t=({theme:a="primaryDark",isSticky:i=!1,...o})=>m.createElement(p,{theme:a,isSticky:i,...o});t.displayName="TableHeader";export{e as TABLE_HEADER_THEMES,t as TableHeader};
 //# sourceMappingURL=TableHeader.js.map

package/dist/components/table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { TableHeaderCell } from './TableHeaderCell'\n\nexport const TABLE_HEADER_THEMES = {\n  PRIMARY: 'primary',\n  PRIMARY_DARK: 'primaryDark',\n  LIGHT: 'light'\n}\n\nconst StyledTableHeader = styled('thead', {\n  variants: {\n    theme: {\n      [TABLE_HEADER_THEMES.PRIMARY]: {\n        [`${TableHeaderCell}`]: {\n          bg: '$primary'\n        }\n      },\n      [TABLE_HEADER_THEMES.PRIMARY_DARK]: {\n        [`${TableHeaderCell}`]: {\n          bg: '$primaryDark'\n        }\n      },\n      [TABLE_HEADER_THEMES.LIGHT]: {\n        [`${TableHeaderCell}`]: {\n          bg: '$tonal50',\n          color: '$tonal600'\n        }\n      }\n    },\n    isSticky: {\n      true: {\n        position: 'sticky',\n        top: 0,\n        zIndex: 3\n      }\n    }\n  }\n})\n\ntype TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>\n\nexport const TableHeader: React.FC<TableHeaderProps> = ({\n  theme = 'primaryDark',\n  isSticky = false,\n  ...rest\n}: TableHeaderProps) => {\n  return <StyledTableHeader theme={theme} isSticky={isSticky} {...rest} />\n}\n\nTableHeader.displayName = 'TableHeader'\n"],"names":["TABLE_HEADER_THEMES","StyledTableHeader","styled","TableHeaderCell","TableHeader","theme","isSticky","rest","React"],"mappings":"uHAMO,MAAMA,EAAsB,CACjC,QAAS,UACT,aAAc,cACd,MAAO,OACT,EAEMC,EAAoBC,EAAO,QAAS,CACxC,SAAU,CACR,MAAO,CACL,CAACF,EAAoB,SAAU,CAC7B,CAAC,GAAGG,KAAoB,CACtB,GAAI,UACN,CACF,EACA,CAACH,EAAoB,cAAe,CAClC,CAAC,GAAGG,KAAoB,CACtB,GAAI,cACN,CACF,EACA,CAACH,EAAoB,OAAQ,CAC3B,CAAC,GAAGG,KAAoB,CACtB,GAAI,WACJ,MAAO,WACT,CACF,CACF,EACA,SAAU,CACR,KAAM,CACJ,SAAU,SACV,IAAK,EACL,OAAQ,CACV,CACF,CACF,CACF,CAAC,EAIYC,EAA0C,CAAC,CACtD,MAAAC,EAAQ,cACR,SAAAC,EAAW,MACRC,CACL,IACSC,EAAA,cAACP,EAAA,CAAkB,MAAOI,EAAO,SAAUC,EAAW,GAAGC,CAAAA,CAAM,EAGxEH,EAAY,YAAc"}
+{"version":3,"file":"TableHeader.js","sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { TableHeaderCell } from './TableHeaderCell'\n\nexport const TABLE_HEADER_THEMES = {\n  PRIMARY: 'primary',\n  PRIMARY_DARK: 'primaryDark',\n  LIGHT: 'light'\n}\n\nconst StyledTableHeader = styled('thead', {\n  variants: {\n    theme: {\n      [TABLE_HEADER_THEMES.PRIMARY]: {\n        [`${TableHeaderCell}`]: {\n          bg: '$primary800'\n        }\n      },\n      [TABLE_HEADER_THEMES.PRIMARY_DARK]: {\n        [`${TableHeaderCell}`]: {\n          bg: '$primary1000'\n        }\n      },\n      [TABLE_HEADER_THEMES.LIGHT]: {\n        [`${TableHeaderCell}`]: {\n          bg: '$tonal50',\n          color: '$tonal600'\n        }\n      }\n    },\n    isSticky: {\n      true: {\n        position: 'sticky',\n        top: 0,\n        zIndex: 3\n      }\n    }\n  }\n})\n\ntype TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>\n\nexport const TableHeader: React.FC<TableHeaderProps> = ({\n  theme = 'primaryDark',\n  isSticky = false,\n  ...rest\n}: TableHeaderProps) => {\n  return <StyledTableHeader theme={theme} isSticky={isSticky} {...rest} />\n}\n\nTableHeader.displayName = 'TableHeader'\n"],"names":["TABLE_HEADER_THEMES","StyledTableHeader","styled","TableHeaderCell","TableHeader","theme","isSticky","rest","React"],"mappings":"uHAMO,MAAMA,EAAsB,CACjC,QAAS,UACT,aAAc,cACd,MAAO,OACT,EAEMC,EAAoBC,EAAO,QAAS,CACxC,SAAU,CACR,MAAO,CACL,CAACF,EAAoB,SAAU,CAC7B,CAAC,GAAGG,KAAoB,CACtB,GAAI,aACN,CACF,EACA,CAACH,EAAoB,cAAe,CAClC,CAAC,GAAGG,KAAoB,CACtB,GAAI,cACN,CACF,EACA,CAACH,EAAoB,OAAQ,CAC3B,CAAC,GAAGG,KAAoB,CACtB,GAAI,WACJ,MAAO,WACT,CACF,CACF,EACA,SAAU,CACR,KAAM,CACJ,SAAU,SACV,IAAK,EACL,OAAQ,CACV,CACF,CACF,CACF,CAAC,EAIYC,EAA0C,CAAC,CACtD,MAAAC,EAAQ,cACR,SAAAC,EAAW,MACRC,CACL,IACSC,EAAA,cAACP,EAAA,CAAkB,MAAOI,EAAO,SAAUC,EAAW,GAAGC,CAAAA,CAAM,EAGxEH,EAAY,YAAc"}

package/dist/components/table/TableHeaderCell.d.ts

@@ -16,9 +16,10 @@ export declare const TableHeaderCell: import("@stitches/react/types/styled-compo
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -165,11 +166,6 @@ export declare const TableHeaderCell: import("@stitches/react/types/styled-compo
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -178,6 +174,10 @@ export declare const TableHeaderCell: import("@stitches/react/types/styled-compo
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -201,6 +201,18 @@ export declare const TableHeaderCell: import("@stitches/react/types/styled-compo
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;

package/dist/components/table/TableRow.d.ts

@@ -17,9 +17,10 @@ export declare const StyledRow: import("@stitches/react/types/styled-component")
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -166,11 +167,6 @@ export declare const StyledRow: import("@stitches/react/types/styled-component")
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -179,6 +175,10 @@ export declare const StyledRow: import("@stitches/react/types/styled-component")
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -202,6 +202,18 @@ export declare const StyledRow: import("@stitches/react/types/styled-component")
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;
@@ -339,9 +351,10 @@ export declare const TableRow: React.ForwardRefExoticComponent<Pick<Omit<Pick<Re
         hover: string;
     }, {
         colors: {
-            textForeground: any;
+            textBold: any;
+            textRegular: any;
             textSubtle: any;
-            textPlaceholder: any;
+            textMinimal: any;
             background: any;
             backgroundAccent: any;
             grey100: any;
@@ -488,11 +501,6 @@ export declare const TableRow: React.ForwardRefExoticComponent<Pick<Omit<Pick<Re
             alpha200: any;
             alpha250: any;
             alpha600: any;
-            primaryLight: any;
-            primary: any;
-            primaryMid: any;
-            primaryDark: any;
-            secondary: any;
             brandRed: any;
             brandRedAccent: any;
             brandGreen: any;
@@ -501,6 +509,10 @@ export declare const TableRow: React.ForwardRefExoticComponent<Pick<Omit<Pick<Re
             brandPurpleAccent: any;
             brandYellow: any;
             brandYellowAccent: any;
+            infoLight: any;
+            info: any;
+            infoMid: any;
+            infoDark: any;
             successLight: any;
             success: any;
             successMid: any;
@@ -524,6 +536,18 @@ export declare const TableRow: React.ForwardRefExoticComponent<Pick<Omit<Pick<Re
             glBlueLight: any;
             glBluePrimary: any;
             glBlueDark: any;
+            primary100: any;
+            primary200: any;
+            primary300: any;
+            primary400: any;
+            primary500: any;
+            primary600: any;
+            primary700: any;
+            primary800: any;
+            primary900: any;
+            primary1000: any;
+            primary1100: any;
+            primary1200: any;
         };
         space: {
             "0": any;

package/dist/components/tabs/Tabs.d.ts

@@ -21,9 +21,10 @@ declare const StyledRoot: import("@stitches/react/types/styled-component").Style
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -170,11 +171,6 @@ declare const StyledRoot: import("@stitches/react/types/styled-component").Style
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -183,6 +179,10 @@ declare const StyledRoot: import("@stitches/react/types/styled-component").Style
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -206,6 +206,18 @@ declare const StyledRoot: import("@stitches/react/types/styled-component").Style
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;

package/dist/components/tabs/TabsContent.d.ts

@@ -17,9 +17,10 @@ export declare const TabsContent: import("@stitches/react/types/styled-component
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -166,11 +167,6 @@ export declare const TabsContent: import("@stitches/react/types/styled-component
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -179,6 +175,10 @@ export declare const TabsContent: import("@stitches/react/types/styled-component
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -202,6 +202,18 @@ export declare const TabsContent: import("@stitches/react/types/styled-component
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;

package/dist/components/tabs/TabsTrigger.d.ts

@@ -17,9 +17,10 @@ declare const StyledTabsTrigger: import("@stitches/react/types/styled-component"
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -166,11 +167,6 @@ declare const StyledTabsTrigger: import("@stitches/react/types/styled-component"
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -179,6 +175,10 @@ declare const StyledTabsTrigger: import("@stitches/react/types/styled-component"
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -202,6 +202,18 @@ declare const StyledTabsTrigger: import("@stitches/react/types/styled-component"
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;

package/dist/components/tabs/TabsTriggerList.d.ts

@@ -18,9 +18,10 @@ declare const StyledTriggerList: import("@stitches/react/types/styled-component"
     hover: string;
 }, {
     colors: {
-        textForeground: any;
+        textBold: any;
+        textRegular: any;
         textSubtle: any;
-        textPlaceholder: any;
+        textMinimal: any;
         background: any;
         backgroundAccent: any;
         grey100: any;
@@ -167,11 +168,6 @@ declare const StyledTriggerList: import("@stitches/react/types/styled-component"
         alpha200: any;
         alpha250: any;
         alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
         brandRed: any;
         brandRedAccent: any;
         brandGreen: any;
@@ -180,6 +176,10 @@ declare const StyledTriggerList: import("@stitches/react/types/styled-component"
         brandPurpleAccent: any;
         brandYellow: any;
         brandYellowAccent: any;
+        infoLight: any;
+        info: any;
+        infoMid: any;
+        infoDark: any;
         successLight: any;
         success: any;
         successMid: any;
@@ -203,6 +203,18 @@ declare const StyledTriggerList: import("@stitches/react/types/styled-component"
         glBlueLight: any;
         glBluePrimary: any;
         glBlueDark: any;
+        primary100: any;
+        primary200: any;
+        primary300: any;
+        primary400: any;
+        primary500: any;
+        primary600: any;
+        primary700: any;
+        primary800: any;
+        primary900: any;
+        primary1000: any;
+        primary1100: any;
+        primary1200: any;
     };
     space: {
         "0": any;

package/dist/components/tabs/TabsTriggerList.js

@@ -1,2 +1,2 @@
-import{ChevronLeft as y,ChevronRight as C}from"@atom-learning/icons";import{List as k}from"@radix-ui/react-tabs";import t from"react";import{ColorScheme as v}from"../../experiments/color-scheme/ColorScheme.js";import{styled as i}from"../../stitches.js";import{useCallbackRefState as x}from"../../utilities/hooks/useCallbackRef.js";import{useScrollPosition as E}from"../../utilities/hooks/useScrollPosition.js";import{useSize as S}from"../../utilities/hooks/useSize.js";import{ActionIcon as W}from"../action-icon/ActionIcon.js";import{Icon as s}from"../icon/Icon.js";const w=i(v,{position:"relative",borderBottom:"1px solid $base4",width:"100%"}),I=i(k,{flexShrink:0,display:"flex",width:"100%",overflowX:"auto","&::-webkit-scrollbar":{display:"none"},scrollbarWidth:"none"}),a=i(W,{height:"100% !important",position:"absolute",top:"50%",transform:"translateY(-50%)",cursor:"pointer",background:"$base1 !important",color:"$interactive1 !important",borderRadius:0,opacity:.9}),n=.8,c=({children:m,colorScheme:d={},...h})=>{const[e,f]=x(),{width:p}=S({element:e,delay:500}),{left:o}=E({element:e,delay:100,delayMethod:"debounce"}),r=t.useMemo(()=>e?e.scrollWidth>e.clientWidth:!1,[p,e]),b=t.useMemo(()=>r?o>0:!1,[o,r]),u=t.useMemo(()=>!e||!r?!1:e.scrollWidth-o-e.clientWidth>1,[e,o,r]),l=t.useCallback(g=>{!e||e.scroll({left:e.scrollLeft+e.clientWidth*g,behavior:"smooth"})},[e]);return t.createElement(w,{base:"grey1",accent:"blue1",interactive:"hiContrast",...d,...h},t.createElement(I,{ref:f},m),b&&t.createElement(a,{label:"scroll left",size:"md",css:{left:0},onClick:()=>l(-n),tabIndex:-1},t.createElement(s,{is:y})),u&&t.createElement(a,{label:"scroll right",size:"md",css:{right:0},onClick:()=>l(n),tabIndex:-1},t.createElement(s,{is:C})))};c.displayName="TabsTriggerList";export{c as TabsTriggerList};
+import{ChevronLeft as y,ChevronRight as C}from"@atom-learning/icons";import{List as k}from"@radix-ui/react-tabs";import t from"react";import{ColorScheme as v}from"../../experiments/color-scheme/ColorScheme.js";import{styled as i}from"../../stitches.js";import{useCallbackRefState as x}from"../../utilities/hooks/useCallbackRef.js";import{useScrollPosition as E}from"../../utilities/hooks/useScrollPosition.js";import{useSize as S}from"../../utilities/hooks/useSize.js";import{ActionIcon as W}from"../action-icon/ActionIcon.js";import{Icon as s}from"../icon/Icon.js";const w=i(v,{position:"relative",borderBottom:"1px solid $base4",width:"100%"}),I=i(k,{flexShrink:0,display:"flex",width:"100%",overflowX:"auto","&::-webkit-scrollbar":{display:"none"},scrollbarWidth:"none"}),a=i(W,{height:"100% !important",position:"absolute",top:"50%",transform:"translateY(-50%)",cursor:"pointer",background:"$base1 !important",color:"$interactive1 !important",borderRadius:0,opacity:.9}),n=.8,c=({children:m,colorScheme:d={},...h})=>{const[e,p]=x(),{width:f}=S({element:e,delay:500}),{left:o}=E({element:e,delay:100,delayMethod:"debounce"}),r=t.useMemo(()=>e?e.scrollWidth>e.clientWidth:!1,[f,e]),b=t.useMemo(()=>r?o>0:!1,[o,r]),u=t.useMemo(()=>!e||!r?!1:e.scrollWidth-o-e.clientWidth>1,[e,o,r]),l=t.useCallback(g=>{!e||e.scroll({left:e.scrollLeft+e.clientWidth*g,behavior:"smooth"})},[e]);return t.createElement(w,{base:"grey1",accent:"primary1",interactive:"hiContrast",...d,...h},t.createElement(I,{ref:p},m),b&&t.createElement(a,{label:"scroll left",size:"md",css:{left:0},onClick:()=>l(-n),tabIndex:-1},t.createElement(s,{is:y})),u&&t.createElement(a,{label:"scroll right",size:"md",css:{right:0},onClick:()=>l(n),tabIndex:-1},t.createElement(s,{is:C})))};c.displayName="TabsTriggerList";export{c as TabsTriggerList};
 //# sourceMappingURL=TabsTriggerList.js.map

package/dist/components/tabs/TabsTriggerList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsTriggerList.js","sources":["../../../src/components/tabs/TabsTriggerList.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport { List } from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useScrollPosition } from '~/utilities/hooks/useScrollPosition'\nimport { useSize } from '~/utilities/hooks/useSize'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\n\nconst StyledContainer = styled(ColorScheme, {\n  position: 'relative',\n  borderBottom: '1px solid $base4',\n  width: '100%'\n})\n\nconst StyledTriggerList = styled(List, {\n  flexShrink: 0,\n  display: 'flex',\n  width: '100%',\n  overflowX: 'auto',\n  '&::-webkit-scrollbar': { display: 'none' },\n  scrollbarWidth: 'none'\n})\n\nconst StyledChevronActionIcon = styled(ActionIcon, {\n  height: '100% !important',\n  position: 'absolute',\n  top: '50%',\n  transform: 'translateY(-50%)',\n  cursor: 'pointer',\n  background: '$base1 !important',\n  color: '$interactive1 !important',\n  borderRadius: 0,\n  opacity: 0.9\n})\n\nconst SCROLL_STEP = 0.8 // Used to scroll 80% of clientWidth\n\nexport const TabsTriggerList: React.FC<\n  React.ComponentProps<typeof StyledTriggerList> & {\n    colorScheme?: TcolorScheme\n  }\n> = ({ children, colorScheme = {}, ...rest }) => {\n  const [listRef, setListRefCallback] = useCallbackRefState()\n\n  const { width } = useSize({ element: listRef, delay: 500 })\n  const { left } = useScrollPosition({\n    element: listRef,\n    delay: 100,\n    delayMethod: 'debounce'\n  })\n\n  const canScrollXAxis = React.useMemo(() => {\n    if (!listRef) return false\n    return listRef.scrollWidth > listRef.clientWidth\n  }, [width, listRef])\n\n  const canScrollLeft = React.useMemo(() => {\n    if (!canScrollXAxis) return false\n    return left > 0\n  }, [left, canScrollXAxis])\n\n  const canScrollRight = React.useMemo(() => {\n    if (!listRef || !canScrollXAxis) return false\n    return listRef.scrollWidth - left - listRef.clientWidth > 1 // 1 rather than 0 to account for sub-pixel widths and calculations\n  }, [listRef, left, canScrollXAxis])\n\n  const scrollList = React.useCallback(\n    (stepModifier) => {\n      if (!listRef) return\n      listRef.scroll({\n        left: listRef.scrollLeft + listRef.clientWidth * stepModifier,\n        behavior: 'smooth'\n      })\n    },\n    [listRef]\n  )\n\n  return (\n    <StyledContainer\n      base=\"grey1\"\n      accent=\"blue1\"\n      interactive=\"hiContrast\"\n      {...colorScheme}\n      {...rest}\n    >\n      <StyledTriggerList ref={setListRefCallback}>{children}</StyledTriggerList>\n\n      {canScrollLeft && (\n        <StyledChevronActionIcon\n          label=\"scroll left\"\n          size=\"md\"\n          css={{\n            left: 0\n          }}\n          onClick={() => scrollList(-SCROLL_STEP)}\n          tabIndex={-1}\n        >\n          <Icon is={ChevronLeft} />\n        </StyledChevronActionIcon>\n      )}\n\n      {canScrollRight && (\n        <StyledChevronActionIcon\n          label=\"scroll right\"\n          size=\"md\"\n          css={{\n            right: 0\n          }}\n          onClick={() => scrollList(SCROLL_STEP)}\n          tabIndex={-1}\n        >\n          <Icon is={ChevronRight} />\n        </StyledChevronActionIcon>\n      )}\n    </StyledContainer>\n  )\n}\n\nTabsTriggerList.displayName = 'TabsTriggerList'\n"],"names":["StyledContainer","styled","ColorScheme","StyledTriggerList","List","StyledChevronActionIcon","ActionIcon","SCROLL_STEP","TabsTriggerList","children","colorScheme","rest","listRef","setListRefCallback","useCallbackRefState","width","useSize","left","useScrollPosition","canScrollXAxis","React","canScrollLeft","canScrollRight","scrollList","stepModifier","Icon","ChevronLeft","ChevronRight"],"mappings":"sjBAaA,MAAMA,EAAkBC,EAAOC,EAAa,CAC1C,SAAU,WACV,aAAc,mBACd,MAAO,MACT,CAAC,EAEKC,EAAoBF,EAAOG,EAAM,CACrC,WAAY,EACZ,QAAS,OACT,MAAO,OACP,UAAW,OACX,uBAAwB,CAAE,QAAS,MAAO,EAC1C,eAAgB,MAClB,CAAC,EAEKC,EAA0BJ,EAAOK,EAAY,CACjD,OAAQ,kBACR,SAAU,WACV,IAAK,MACL,UAAW,mBACX,OAAQ,UACR,WAAY,oBACZ,MAAO,2BACP,aAAc,EACd,QAAS,EACX,CAAC,EAEKC,EAAc,GAEPC,EAIT,CAAC,CAAE,SAAAC,EAAU,YAAAC,EAAc,CAAA,KAAOC,CAAK,IAAM,CAC/C,KAAM,CAACC,EAASC,CAAkB,EAAIC,IAEhC,CAAE,MAAAC,CAAM,EAAIC,EAAQ,CAAE,QAASJ,EAAS,MAAO,GAAI,CAAC,EACpD,CAAE,KAAAK,CAAK,EAAIC,EAAkB,CACjC,QAASN,EACT,MAAO,IACP,YAAa,UACf,CAAC,EAEKO,EAAiBC,EAAM,QAAQ,IAC9BR,EACEA,EAAQ,YAAcA,EAAQ,YADhB,GAEpB,CAACG,EAAOH,CAAO,CAAC,EAEbS,EAAgBD,EAAM,QAAQ,IAC7BD,EACEF,EAAO,EADc,GAE3B,CAACA,EAAME,CAAc,CAAC,EAEnBG,EAAiBF,EAAM,QAAQ,IAC/B,CAACR,GAAW,CAACO,EAAuB,GACjCP,EAAQ,YAAcK,EAAOL,EAAQ,YAAc,EACzD,CAACA,EAASK,EAAME,CAAc,CAAC,EAE5BI,EAAaH,EAAM,YACtBI,GAAiB,CACZ,CAACZ,GACLA,EAAQ,OAAO,CACb,KAAMA,EAAQ,WAAaA,EAAQ,YAAcY,EACjD,SAAU,QACZ,CAAC,CACH,EACA,CAACZ,CAAO,CACV,EAEA,OACEQ,EAAA,cAACpB,EAAA,CACC,KAAK,QACL,OAAO,QACP,YAAY,aACX,GAAGU,EACH,GAAGC,CAAAA,EAEJS,EAAA,cAACjB,EAAA,CAAkB,IAAKU,GAAqBJ,CAAS,EAErDY,GACCD,EAAA,cAACf,EAAA,CACC,MAAM,cACN,KAAK,KACL,IAAK,CACH,KAAM,CACR,EACA,QAAS,IAAMkB,EAAW,CAAChB,CAAW,EACtC,SAAU,EAAA,EAEVa,EAAA,cAACK,EAAA,CAAK,GAAIC,CAAa,CAAA,CACzB,EAGDJ,GACCF,EAAA,cAACf,EAAA,CACC,MAAM,eACN,KAAK,KACL,IAAK,CACH,MAAO,CACT,EACA,QAAS,IAAMkB,EAAWhB,CAAW,EACrC,SAAU,EAAA,EAEVa,EAAA,cAACK,EAAA,CAAK,GAAIE,EAAc,CAC1B,CAEJ,CAEJ,EAEAnB,EAAgB,YAAc"}
+{"version":3,"file":"TabsTriggerList.js","sources":["../../../src/components/tabs/TabsTriggerList.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport { List } from '@radix-ui/react-tabs'\nimport React from 'react'\n\nimport { ColorScheme, TcolorScheme } from '~/experiments/color-scheme'\nimport { styled } from '~/stitches'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\nimport { useScrollPosition } from '~/utilities/hooks/useScrollPosition'\nimport { useSize } from '~/utilities/hooks/useSize'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\n\nconst StyledContainer = styled(ColorScheme, {\n  position: 'relative',\n  borderBottom: '1px solid $base4',\n  width: '100%'\n})\n\nconst StyledTriggerList = styled(List, {\n  flexShrink: 0,\n  display: 'flex',\n  width: '100%',\n  overflowX: 'auto',\n  '&::-webkit-scrollbar': { display: 'none' },\n  scrollbarWidth: 'none'\n})\n\nconst StyledChevronActionIcon = styled(ActionIcon, {\n  height: '100% !important',\n  position: 'absolute',\n  top: '50%',\n  transform: 'translateY(-50%)',\n  cursor: 'pointer',\n  background: '$base1 !important',\n  color: '$interactive1 !important',\n  borderRadius: 0,\n  opacity: 0.9\n})\n\nconst SCROLL_STEP = 0.8 // Used to scroll 80% of clientWidth\n\nexport const TabsTriggerList: React.FC<\n  React.ComponentProps<typeof StyledTriggerList> & {\n    colorScheme?: TcolorScheme\n  }\n> = ({ children, colorScheme = {}, ...rest }) => {\n  const [listRef, setListRefCallback] = useCallbackRefState()\n\n  const { width } = useSize({ element: listRef, delay: 500 })\n  const { left } = useScrollPosition({\n    element: listRef,\n    delay: 100,\n    delayMethod: 'debounce'\n  })\n\n  const canScrollXAxis = React.useMemo(() => {\n    if (!listRef) return false\n    return listRef.scrollWidth > listRef.clientWidth\n  }, [width, listRef])\n\n  const canScrollLeft = React.useMemo(() => {\n    if (!canScrollXAxis) return false\n    return left > 0\n  }, [left, canScrollXAxis])\n\n  const canScrollRight = React.useMemo(() => {\n    if (!listRef || !canScrollXAxis) return false\n    return listRef.scrollWidth - left - listRef.clientWidth > 1 // 1 rather than 0 to account for sub-pixel widths and calculations\n  }, [listRef, left, canScrollXAxis])\n\n  const scrollList = React.useCallback(\n    (stepModifier) => {\n      if (!listRef) return\n      listRef.scroll({\n        left: listRef.scrollLeft + listRef.clientWidth * stepModifier,\n        behavior: 'smooth'\n      })\n    },\n    [listRef]\n  )\n\n  return (\n    <StyledContainer\n      base=\"grey1\"\n      accent=\"primary1\"\n      interactive=\"hiContrast\"\n      {...colorScheme}\n      {...rest}\n    >\n      <StyledTriggerList ref={setListRefCallback}>{children}</StyledTriggerList>\n\n      {canScrollLeft && (\n        <StyledChevronActionIcon\n          label=\"scroll left\"\n          size=\"md\"\n          css={{\n            left: 0\n          }}\n          onClick={() => scrollList(-SCROLL_STEP)}\n          tabIndex={-1}\n        >\n          <Icon is={ChevronLeft} />\n        </StyledChevronActionIcon>\n      )}\n\n      {canScrollRight && (\n        <StyledChevronActionIcon\n          label=\"scroll right\"\n          size=\"md\"\n          css={{\n            right: 0\n          }}\n          onClick={() => scrollList(SCROLL_STEP)}\n          tabIndex={-1}\n        >\n          <Icon is={ChevronRight} />\n        </StyledChevronActionIcon>\n      )}\n    </StyledContainer>\n  )\n}\n\nTabsTriggerList.displayName = 'TabsTriggerList'\n"],"names":["StyledContainer","styled","ColorScheme","StyledTriggerList","List","StyledChevronActionIcon","ActionIcon","SCROLL_STEP","TabsTriggerList","children","colorScheme","rest","listRef","setListRefCallback","useCallbackRefState","width","useSize","left","useScrollPosition","canScrollXAxis","React","canScrollLeft","canScrollRight","scrollList","stepModifier","Icon","ChevronLeft","ChevronRight"],"mappings":"sjBAaA,MAAMA,EAAkBC,EAAOC,EAAa,CAC1C,SAAU,WACV,aAAc,mBACd,MAAO,MACT,CAAC,EAEKC,EAAoBF,EAAOG,EAAM,CACrC,WAAY,EACZ,QAAS,OACT,MAAO,OACP,UAAW,OACX,uBAAwB,CAAE,QAAS,MAAO,EAC1C,eAAgB,MAClB,CAAC,EAEKC,EAA0BJ,EAAOK,EAAY,CACjD,OAAQ,kBACR,SAAU,WACV,IAAK,MACL,UAAW,mBACX,OAAQ,UACR,WAAY,oBACZ,MAAO,2BACP,aAAc,EACd,QAAS,EACX,CAAC,EAEKC,EAAc,GAEPC,EAIT,CAAC,CAAE,SAAAC,EAAU,YAAAC,EAAc,CAAA,KAAOC,CAAK,IAAM,CAC/C,KAAM,CAACC,EAASC,CAAkB,EAAIC,IAEhC,CAAE,MAAAC,CAAM,EAAIC,EAAQ,CAAE,QAASJ,EAAS,MAAO,GAAI,CAAC,EACpD,CAAE,KAAAK,CAAK,EAAIC,EAAkB,CACjC,QAASN,EACT,MAAO,IACP,YAAa,UACf,CAAC,EAEKO,EAAiBC,EAAM,QAAQ,IAC9BR,EACEA,EAAQ,YAAcA,EAAQ,YADhB,GAEpB,CAACG,EAAOH,CAAO,CAAC,EAEbS,EAAgBD,EAAM,QAAQ,IAC7BD,EACEF,EAAO,EADc,GAE3B,CAACA,EAAME,CAAc,CAAC,EAEnBG,EAAiBF,EAAM,QAAQ,IAC/B,CAACR,GAAW,CAACO,EAAuB,GACjCP,EAAQ,YAAcK,EAAOL,EAAQ,YAAc,EACzD,CAACA,EAASK,EAAME,CAAc,CAAC,EAE5BI,EAAaH,EAAM,YACtBI,GAAiB,CACZ,CAACZ,GACLA,EAAQ,OAAO,CACb,KAAMA,EAAQ,WAAaA,EAAQ,YAAcY,EACjD,SAAU,QACZ,CAAC,CACH,EACA,CAACZ,CAAO,CACV,EAEA,OACEQ,EAAA,cAACpB,EAAA,CACC,KAAK,QACL,OAAO,WACP,YAAY,aACX,GAAGU,EACH,GAAGC,CAAAA,EAEJS,EAAA,cAACjB,EAAA,CAAkB,IAAKU,GAAqBJ,CAAS,EAErDY,GACCD,EAAA,cAACf,EAAA,CACC,MAAM,cACN,KAAK,KACL,IAAK,CACH,KAAM,CACR,EACA,QAAS,IAAMkB,EAAW,CAAChB,CAAW,EACtC,SAAU,EAAA,EAEVa,EAAA,cAACK,EAAA,CAAK,GAAIC,CAAa,CAAA,CACzB,EAGDJ,GACCF,EAAA,cAACf,EAAA,CACC,MAAM,eACN,KAAK,KACL,IAAK,CACH,MAAO,CACT,EACA,QAAS,IAAMkB,EAAWhB,CAAW,EACrC,SAAU,EAAA,EAEVa,EAAA,cAACK,EAAA,CAAK,GAAIE,EAAc,CAC1B,CAEJ,CAEJ,EAEAnB,EAAgB,YAAc"}