@atom-learning/components 11.5.0 → 12.0.0-beta.1

package/dist/components/switch/Switch.js

@@ -6,8 +6,8 @@ import * as RadixSwitch from "@radix-ui/react-switch";
 var StyledSwitch = styled(RadixSwitch.Root, {
 	base: [
 		"appearance-none",
-		"bg-grey-600",
-		"border-none",
+		"bg-neutral-solid",
+		"border-0",
 		"rounded-full",
 		"cursor-pointer",
 		"flex",
@@ -16,13 +16,15 @@ var StyledSwitch = styled(RadixSwitch.Root, {
 		"transition-all",
 		"duration-50",
 		"ease-out",
-		"hover:bg-grey-700",
-		"focus:outline-2",
-		"focus:outline-offset-1",
-		"focus:outline-primary-800",
-		"focus:outline-solid",
-		"data-[state=checked]:bg-primary-800",
-		"data-[state=checked]:hover:bg-primary-900",
+		"hover:bg-neutral-solid-hover",
+		"focus-visible:outline-2",
+		"focus-visible:outline-offset-2",
+		"focus-visible:outline-focus",
+		"focus-visible:outline-solid",
+		"data-[state=checked]:bg-accent-solid",
+		"data-[state=checked]:hover:bg-accent-solid-hover",
+		"forced-colors:border",
+		"forced-colors:border-[CanvasText]",
 		"disabled:cursor-not-allowed",
 		"disabled:opacity-30"
 	],
@@ -33,7 +35,9 @@ var StyledSwitch = styled(RadixSwitch.Root, {
 });
 var StyledThumb = styled(RadixSwitch.Thumb, {
 	base: [
-		"bg-white",
+		"bg-(--text-color-on-accent)",
+		"forced-colors:forced-color-adjust-none",
+		"forced-colors:bg-[CanvasText]",
 		"rounded-full",
 		"block",
 		"transition-transform",

package/dist/components/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","names":[],"sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import * as RadixSwitch from '@radix-ui/react-switch'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledSwitch = styled(RadixSwitch.Root, {\n  base: [\n    'appearance-none',\n    'bg-grey-600',\n    'border-none',\n    'rounded-full',\n    'cursor-pointer',\n    'flex',\n    'overflow-hidden',\n    'relative',\n    'transition-all',\n    'duration-50',\n    'ease-out',\n    'hover:bg-grey-700',\n    'focus:outline-2',\n    'focus:outline-offset-1',\n    'focus:outline-primary-800',\n    'focus:outline-solid',\n    'data-[state=checked]:bg-primary-800',\n    'data-[state=checked]:hover:bg-primary-900',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    size: {\n      md: ['p-0.5', 'w-10'],\n      lg: ['p-1', 'w-16']\n    }\n  }\n})\n\nconst StyledThumb = styled(RadixSwitch.Thumb, {\n  base: [\n    'bg-white',\n    'rounded-full',\n    'block',\n    'transition-transform',\n    'duration-50',\n    'will-change-transform'\n  ],\n  variants: {\n    size: {\n      md: ['data-[state=checked]:translate-x-5', 'size-4'],\n      lg: ['data-[state=checked]:translate-x-8', 'size-6']\n    }\n  }\n})\n\ntype SwitchProps = React.ComponentProps<typeof StyledSwitch>\n\nexport const Switch = ({ size = 'md', ...rest }: SwitchProps) => (\n  <StyledSwitch size={size} {...rest}>\n    <StyledThumb size={size} />\n  </StyledSwitch>\n)\n\nSwitch.displayName = 'Switch'\n"],"mappings":";;;;;AAKA,IAAM,eAAe,OAAO,YAAY,MAAM;CAC5C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,SAAS,MAAM;EACpB,IAAI,CAAC,OAAO,MAAM;CACpB,EACF;AACF,CAAC;AAED,IAAM,cAAc,OAAO,YAAY,OAAO;CAC5C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,sCAAsC,QAAQ;EACnD,IAAI,CAAC,sCAAsC,QAAQ;CACrD,EACF;AACF,CAAC;AAID,IAAa,UAAU,EAAE,OAAO,MAAM,GAAG,WACvC,oBAAC,cAAD;CAAoB;CAAM,GAAI;WAC5B,oBAAC,aAAD,EAAmB,KAAO,CAAA;AACd,CAAA;AAGhB,OAAO,cAAc"}
+{"version":3,"file":"Switch.js","names":[],"sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import * as RadixSwitch from '@radix-ui/react-switch'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledSwitch = styled(RadixSwitch.Root, {\n  base: [\n    'appearance-none',\n    'bg-neutral-solid',\n    'border-0',\n    'rounded-full',\n    'cursor-pointer',\n    'flex',\n    'overflow-hidden',\n    'relative',\n    'transition-all',\n    'duration-50',\n    'ease-out',\n    'hover:bg-neutral-solid-hover',\n    'focus-visible:outline-2',\n    'focus-visible:outline-offset-2',\n    'focus-visible:outline-focus',\n    'focus-visible:outline-solid',\n    'data-[state=checked]:bg-accent-solid',\n    'data-[state=checked]:hover:bg-accent-solid-hover',\n    // Forced colours drop the track fill; the border and thumb carry the state\n    'forced-colors:border',\n    'forced-colors:border-[CanvasText]',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    size: {\n      md: ['p-0.5', 'w-10'],\n      lg: ['p-1', 'w-16']\n    }\n  }\n})\n\nconst StyledThumb = styled(RadixSwitch.Thumb, {\n  base: [\n    'bg-(--text-color-on-accent)',\n    'forced-colors:forced-color-adjust-none',\n    'forced-colors:bg-[CanvasText]',\n    'rounded-full',\n    'block',\n    'transition-transform',\n    'duration-50',\n    'will-change-transform'\n  ],\n  variants: {\n    size: {\n      md: ['data-[state=checked]:translate-x-5', 'size-4'],\n      lg: ['data-[state=checked]:translate-x-8', 'size-6']\n    }\n  }\n})\n\ntype SwitchProps = React.ComponentProps<typeof StyledSwitch>\n\nexport const Switch = ({ size = 'md', ...rest }: SwitchProps) => (\n  <StyledSwitch size={size} {...rest}>\n    <StyledThumb size={size} />\n  </StyledSwitch>\n)\n\nSwitch.displayName = 'Switch'\n"],"mappings":";;;;;AAKA,IAAM,eAAe,OAAO,YAAY,MAAM;CAC5C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,SAAS,MAAM;EACpB,IAAI,CAAC,OAAO,MAAM;CACpB,EACF;AACF,CAAC;AAED,IAAM,cAAc,OAAO,YAAY,OAAO;CAC5C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,sCAAsC,QAAQ;EACnD,IAAI,CAAC,sCAAsC,QAAQ;CACrD,EACF;AACF,CAAC;AAID,IAAa,UAAU,EAAE,OAAO,MAAM,GAAG,WACvC,oBAAC,cAAD;CAAoB;CAAM,GAAI;WAC5B,oBAAC,aAAD,EAAmB,KAAO,CAAA;AACd,CAAA;AAGhB,OAAO,cAAc"}

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

@@ -22,12 +22,12 @@ export declare const Table: (({ ref, size, corners, numberOfStickyColumns, scrol
     Footer: import("../..").PolymorphicComponent<"tfoot", unknown>;
     FooterCell: import("../..").PolymorphicComponent<"td", unknown>;
     Header: {
-        ({ theme, isSticky, ...rest }: {
-            theme?: "light" | "primary" | "primaryDark" | "primaryLight" | "white" | undefined;
+        ({ appearance, isSticky, ...rest }: {
+            appearance?: "emphasis" | "inset" | "surface" | undefined;
             isSticky?: boolean | undefined;
         } & {
             as?: never;
-        } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "as" | "isSticky" | "theme">): React.JSX.Element;
+        } & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "appearance" | "as" | "isSticky">): React.JSX.Element;
         displayName: string;
     };
     HeaderCell: import("../..").PolymorphicComponent<"th", unknown>;

package/dist/components/table/TableBody.js

@@ -5,8 +5,8 @@ import { jsx } from "react/jsx-runtime";
 var StyledTableBody = styled("tbody", {
 	base: [],
 	variants: { striped: {
-		true: ["[&_tr]:even:bg-grey-100", "[&_tr]:odd:bg-white"],
-		false: ["[&_tr]:bg-white"]
+		true: ["[&_tr]:even:bg-inset", "[&_tr]:odd:bg-surface"],
+		false: ["[&_tr]:bg-surface"]
 	} }
 });
 var TableBody = ({ striped = true, ...rest }) => /* @__PURE__ */ jsx(StyledTableBody, {

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

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","names":[],"sources":["../../../src/components/table/TableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledTableBody = styled('tbody', {\n  base: [],\n  variants: {\n    striped: {\n      true: ['[&_tr]:even:bg-grey-100', '[&_tr]:odd:bg-white'],\n      false: ['[&_tr]:bg-white']\n    }\n  }\n})\n\ntype TableBodyProps = React.ComponentProps<typeof StyledTableBody>\n\nexport const TableBody = ({ striped = true, ...rest }: TableBodyProps) => (\n  <StyledTableBody striped={striped} {...rest} />\n)\n\nTableBody.displayName = 'TableBody'\n"],"mappings":";;;;AAIA,IAAM,kBAAkB,OAAO,SAAS;CACtC,MAAM,CAAC;CACP,UAAU,EACR,SAAS;EACP,MAAM,CAAC,2BAA2B,qBAAqB;EACvD,OAAO,CAAC,iBAAiB;CAC3B,EACF;AACF,CAAC;AAID,IAAa,aAAa,EAAE,UAAU,MAAM,GAAG,WAC7C,oBAAC,iBAAD;CAA0B;CAAS,GAAI;AAAO,CAAA;AAGhD,UAAU,cAAc"}
+{"version":3,"file":"TableBody.js","names":[],"sources":["../../../src/components/table/TableBody.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledTableBody = styled('tbody', {\n  base: [],\n  variants: {\n    striped: {\n      true: ['[&_tr]:even:bg-inset', '[&_tr]:odd:bg-surface'],\n      false: ['[&_tr]:bg-surface']\n    }\n  }\n})\n\ntype TableBodyProps = React.ComponentProps<typeof StyledTableBody>\n\nexport const TableBody = ({ striped = true, ...rest }: TableBodyProps) => (\n  <StyledTableBody striped={striped} {...rest} />\n)\n\nTableBody.displayName = 'TableBody'\n"],"mappings":";;;;AAIA,IAAM,kBAAkB,OAAO,SAAS;CACtC,MAAM,CAAC;CACP,UAAU,EACR,SAAS;EACP,MAAM,CAAC,wBAAwB,uBAAuB;EACtD,OAAO,CAAC,mBAAmB;CAC7B,EACF;AACF,CAAC;AAID,IAAa,aAAa,EAAE,UAAU,MAAM,GAAG,WAC7C,oBAAC,iBAAD;CAA0B;CAAS,GAAI;AAAO,CAAA;AAGhD,UAAU,cAAc"}

package/dist/components/table/TableCell.js

@@ -2,9 +2,9 @@ import { styled } from "../../styled.js";
 //#region src/components/table/TableCell.tsx
 var TableCell = styled("td", { base: [
 	"border-t",
-	"border-t-grey-100",
+	"border-t-subtlest",
 	"box-border",
-	"text-grey-800",
+	"text-subtle",
 	"font-body",
 	"leading-normal",
 	"text-left",

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

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","names":[],"sources":["../../../src/components/table/TableCell.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const TableCell = styled('td', {\n  base: [\n    'border-t',\n    'border-t-grey-100',\n    'box-border',\n    'text-grey-800',\n    'font-body',\n    'leading-normal',\n    'text-left',\n    'align-middle',\n    'first:font-semibold'\n  ]\n})\n\nTableCell.displayName = 'TableCell'\n"],"mappings":";;AAEA,IAAa,YAAY,OAAO,MAAM,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,UAAU,cAAc"}
+{"version":3,"file":"TableCell.js","names":[],"sources":["../../../src/components/table/TableCell.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const TableCell = styled('td', {\n  base: [\n    'border-t',\n    'border-t-subtlest',\n    'box-border',\n    'text-subtle',\n    'font-body',\n    'leading-normal',\n    'text-left',\n    'align-middle',\n    'first:font-semibold'\n  ]\n})\n\nTableCell.displayName = 'TableCell'\n"],"mappings":";;AAEA,IAAa,YAAY,OAAO,MAAM,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,UAAU,cAAc"}

package/dist/components/table/TableFooterCell.js

@@ -1,7 +1,7 @@
 import { styled } from "../../styled.js";
 //#region src/components/table/TableFooterCell.tsx
 var TableFooterCell = styled("td", { base: [
-	"text-grey-800",
+	"text-subtle",
 	"font-body",
 	"font-semibold",
 	"text-left",

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

@@ -1 +1 @@
-{"version":3,"file":"TableFooterCell.js","names":[],"sources":["../../../src/components/table/TableFooterCell.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const TableFooterCell = styled('td', {\n  base: [\n    'text-grey-800',\n    'font-body',\n    'font-semibold',\n    'text-left',\n    'align-middle'\n  ]\n})\n\nTableFooterCell.displayName = 'TableFooterCell'\n"],"mappings":";;AAEA,IAAa,kBAAkB,OAAO,MAAM,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,gBAAgB,cAAc"}
+{"version":3,"file":"TableFooterCell.js","names":[],"sources":["../../../src/components/table/TableFooterCell.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const TableFooterCell = styled('td', {\n  base: [\n    'text-subtle',\n    'font-body',\n    'font-semibold',\n    'text-left',\n    'align-middle'\n  ]\n})\n\nTableFooterCell.displayName = 'TableFooterCell'\n"],"mappings":";;AAEA,IAAa,kBAAkB,OAAO,MAAM,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,gBAAgB,cAAc"}

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

@@ -1,17 +1,15 @@
 import * as React from 'react';
-export declare const TABLE_HEADER_THEMES: {
-    readonly PRIMARY: 'primary';
-    readonly PRIMARY_DARK: 'primaryDark';
-    readonly PRIMARY_LIGHT: 'primaryLight';
-    readonly LIGHT: 'light';
-    readonly WHITE: 'white';
+export declare const TABLE_HEADER_APPEARANCES: {
+    readonly EMPHASIS: 'emphasis';
+    readonly INSET: 'inset';
+    readonly SURFACE: 'surface';
 };
 declare const StyledTableHeader: import("../..").PolymorphicComponent<"thead", {
-    theme?: "light" | "primary" | "primaryDark" | "primaryLight" | "white" | undefined;
+    appearance?: "emphasis" | "inset" | "surface" | undefined;
     isSticky?: boolean | undefined;
 }>;
 type TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>;
-export declare function TableHeader({ theme, isSticky, ...rest }: TableHeaderProps): React.JSX.Element;
+export declare function TableHeader({ appearance, isSticky, ...rest }: TableHeaderProps): React.JSX.Element;
 export declare namespace TableHeader {
     var displayName: string;
 }

package/dist/components/table/TableHeader.js

@@ -2,22 +2,18 @@ import { styled } from "../../styled.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/table/TableHeader.tsx
-var TABLE_HEADER_THEMES = {
-	PRIMARY: "primary",
-	PRIMARY_DARK: "primaryDark",
-	PRIMARY_LIGHT: "primaryLight",
-	LIGHT: "light",
-	WHITE: "white"
+var TABLE_HEADER_APPEARANCES = {
+	EMPHASIS: "emphasis",
+	INSET: "inset",
+	SURFACE: "surface"
 };
 var StyledTableHeader = /* @__PURE__ */ styled("thead", {
 	base: [],
 	variants: {
-		theme: {
-			[TABLE_HEADER_THEMES.PRIMARY]: ["[&_th]:bg-primary-800"],
-			[TABLE_HEADER_THEMES.PRIMARY_DARK]: ["[&_th]:bg-primary-1000"],
-			[TABLE_HEADER_THEMES.PRIMARY_LIGHT]: ["[&_th]:bg-primary-200", "[&_th]:text-grey-1000"],
-			[TABLE_HEADER_THEMES.LIGHT]: ["[&_th]:bg-grey-100", "[&_th]:text-grey-1000"],
-			[TABLE_HEADER_THEMES.WHITE]: ["[&_th]:bg-white", "[&_th]:text-grey-1000"]
+		appearance: {
+			[TABLE_HEADER_APPEARANCES.EMPHASIS]: ["[&_th]:bg-accent-emphasis"],
+			[TABLE_HEADER_APPEARANCES.INSET]: ["[&_th]:bg-inset", "[&_th]:text-default"],
+			[TABLE_HEADER_APPEARANCES.SURFACE]: ["[&_th]:bg-surface", "[&_th]:text-default"]
 		},
 		isSticky: { true: [
 			"sticky",
@@ -26,15 +22,15 @@ var StyledTableHeader = /* @__PURE__ */ styled("thead", {
 		] }
 	}
 });
-var TableHeader = ({ theme = "primaryDark", isSticky = false, ...rest }) => {
+var TableHeader = ({ appearance = "emphasis", isSticky = false, ...rest }) => {
 	return /* @__PURE__ */ jsx(StyledTableHeader, {
-		theme,
+		appearance,
 		isSticky,
 		...rest
 	});
 };
 TableHeader.displayName = "TableHeader";
 //#endregion
-export { TABLE_HEADER_THEMES, TableHeader };
+export { TABLE_HEADER_APPEARANCES, TableHeader };
 
 //# sourceMappingURL=TableHeader.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","names":[],"sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\n\nexport const TABLE_HEADER_THEMES = {\n  PRIMARY: 'primary',\n  PRIMARY_DARK: 'primaryDark',\n  PRIMARY_LIGHT: 'primaryLight',\n  LIGHT: 'light',\n  WHITE: 'white'\n} as const\n\nconst StyledTableHeader = /* @__PURE__ */ styled('thead', {\n  base: [],\n  variants: {\n    theme: {\n      [TABLE_HEADER_THEMES.PRIMARY]: ['[&_th]:bg-primary-800'],\n      [TABLE_HEADER_THEMES.PRIMARY_DARK]: ['[&_th]:bg-primary-1000'],\n      [TABLE_HEADER_THEMES.PRIMARY_LIGHT]: [\n        '[&_th]:bg-primary-200',\n        '[&_th]:text-grey-1000'\n      ],\n      [TABLE_HEADER_THEMES.LIGHT]: [\n        '[&_th]:bg-grey-100',\n        '[&_th]:text-grey-1000'\n      ],\n      [TABLE_HEADER_THEMES.WHITE]: ['[&_th]:bg-white', '[&_th]:text-grey-1000']\n    },\n    isSticky: {\n      true: ['sticky', 'top-0', 'z-3']\n    }\n  }\n})\n\ntype TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>\n\nexport const TableHeader = ({\n  theme = 'primaryDark',\n  isSticky = false,\n  ...rest\n}: TableHeaderProps) => {\n  return <StyledTableHeader theme={theme} isSticky={isSticky} {...rest} />\n}\n\nTableHeader.displayName = 'TableHeader'\n"],"mappings":";;;;AAIA,IAAa,sBAAsB;CACjC,SAAS;CACT,cAAc;CACd,eAAe;CACf,OAAO;CACP,OAAO;AACT;AAEA,IAAM,oBAAoC,uBAAO,SAAS;CACxD,MAAM,CAAC;CACP,UAAU;EACR,OAAO;IACJ,oBAAoB,UAAU,CAAC,uBAAuB;IACtD,oBAAoB,eAAe,CAAC,wBAAwB;IAC5D,oBAAoB,gBAAgB,CACnC,yBACA,uBACF;IACC,oBAAoB,QAAQ,CAC3B,sBACA,uBACF;IACC,oBAAoB,QAAQ,CAAC,mBAAmB,uBAAuB;EAC1E;EACA,UAAU,EACR,MAAM;GAAC;GAAU;GAAS;EAAK,EACjC;CACF;AACF,CAAC;AAID,IAAa,eAAe,EAC1B,QAAQ,eACR,WAAW,OACX,GAAG,WACmB;CACtB,OAAO,oBAAC,mBAAD;EAA0B;EAAiB;EAAU,GAAI;CAAO,CAAA;AACzE;AAEA,YAAY,cAAc"}
+{"version":3,"file":"TableHeader.js","names":[],"sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\n\nexport const TABLE_HEADER_APPEARANCES = {\n  EMPHASIS: 'emphasis',\n  INSET: 'inset',\n  SURFACE: 'surface'\n} as const\n\nconst StyledTableHeader = /* @__PURE__ */ styled('thead', {\n  base: [],\n  variants: {\n    appearance: {\n      [TABLE_HEADER_APPEARANCES.EMPHASIS]: ['[&_th]:bg-accent-emphasis'],\n      [TABLE_HEADER_APPEARANCES.INSET]: [\n        '[&_th]:bg-inset',\n        '[&_th]:text-default'\n      ],\n      [TABLE_HEADER_APPEARANCES.SURFACE]: [\n        '[&_th]:bg-surface',\n        '[&_th]:text-default'\n      ]\n    },\n    isSticky: {\n      true: ['sticky', 'top-0', 'z-3']\n    }\n  }\n})\n\ntype TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>\n\nexport const TableHeader = ({\n  appearance = 'emphasis',\n  isSticky = false,\n  ...rest\n}: TableHeaderProps) => {\n  return (\n    <StyledTableHeader appearance={appearance} isSticky={isSticky} {...rest} />\n  )\n}\n\nTableHeader.displayName = 'TableHeader'\n"],"mappings":";;;;AAIA,IAAa,2BAA2B;CACtC,UAAU;CACV,OAAO;CACP,SAAS;AACX;AAEA,IAAM,oBAAoC,uBAAO,SAAS;CACxD,MAAM,CAAC;CACP,UAAU;EACR,YAAY;IACT,yBAAyB,WAAW,CAAC,2BAA2B;IAChE,yBAAyB,QAAQ,CAChC,mBACA,qBACF;IACC,yBAAyB,UAAU,CAClC,qBACA,qBACF;EACF;EACA,UAAU,EACR,MAAM;GAAC;GAAU;GAAS;EAAK,EACjC;CACF;AACF,CAAC;AAID,IAAa,eAAe,EAC1B,aAAa,YACb,WAAW,OACX,GAAG,WACmB;CACtB,OACE,oBAAC,mBAAD;EAA+B;EAAsB;EAAU,GAAI;CAAO,CAAA;AAE9E;AAEA,YAAY,cAAc"}

package/dist/components/table/TableHeaderCell.js

@@ -1,7 +1,7 @@
 import { styled } from "../../styled.js";
 //#region src/components/table/TableHeaderCell.tsx
 var TableHeaderCell = styled("th", { base: [
-	"text-white",
+	"text-on-accent-emphasis",
 	"font-body",
 	"font-semibold",
 	"leading-normal",

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

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderCell.js","names":[],"sources":["../../../src/components/table/TableHeaderCell.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const TableHeaderCell = styled('th', {\n  base: [\n    'text-white',\n    'font-body',\n    'font-semibold',\n    'leading-normal',\n    'text-left',\n    'align-middle',\n    '[[colspan]]:text-center'\n  ]\n})\n\nTableHeaderCell.displayName = 'TableHeaderCell'\n"],"mappings":";;AAEA,IAAa,kBAAkB,OAAO,MAAM,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,gBAAgB,cAAc"}
+{"version":3,"file":"TableHeaderCell.js","names":[],"sources":["../../../src/components/table/TableHeaderCell.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const TableHeaderCell = styled('th', {\n  base: [\n    'text-on-accent-emphasis',\n    'font-body',\n    'font-semibold',\n    'leading-normal',\n    'text-left',\n    'align-middle',\n    '[[colspan]]:text-center'\n  ]\n})\n\nTableHeaderCell.displayName = 'TableHeaderCell'\n"],"mappings":";;AAEA,IAAa,kBAAkB,OAAO,MAAM,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,gBAAgB,cAAc"}

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

@@ -1,8 +1,6 @@
 export declare const Tabs: import("../..").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsProps & import("react").RefAttributes<HTMLDivElement>>, unknown> & {
     TriggerList: {
-        ({ children, colorScheme, ...rest }: React.ComponentProps<import("../..").PolymorphicComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>>, unknown>> & {
-            colorScheme?: import("../..").TcolorScheme;
-        }): import("react").JSX.Element;
+        ({ children, ...rest }: React.ComponentProps<import("../..").PolymorphicComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>>, unknown>>): import("react").JSX.Element;
         displayName: string;
     };
     Trigger: ({ ref, children, ...rest }: React.ComponentProps<import("../..").PolymorphicComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, unknown>> & {

package/dist/components/tabs/TabsTrigger.js

@@ -9,7 +9,7 @@ var StyledTabsTriggerHoverBackground = styled("div", { base: [
 	"inset-0",
 	"h-[calc(100%+2px)]",
 	"opacity-0",
-	"bg-(--interactive-1)"
+	"bg-accent-solid"
 ] });
 var StyledTabsTrigger = styled(Trigger, { base: [
 	"bg-none",
@@ -22,20 +22,21 @@ var StyledTabsTrigger = styled(Trigger, { base: [
 	"relative",
 	"data-[state=active]:border-current",
 	"data-[state=active]:font-semibold",
-	"data-[state=active]:text-(--interactive-1)",
+	"data-[state=active]:text-accent",
 	"data-[state=active]:tracking-[-0.005em]",
 	"disabled:cursor-not-allowed",
 	"disabled:opacity-30",
-	"not-disabled:active:text-(--interactive-3)",
+	"not-disabled:active:text-accent-active",
 	"not-disabled:focus-visible:[&_div]:opacity-7",
-	"not-disabled:focus-visible:outline-none",
+	"not-disabled:focus-visible:outline-2",
+	"not-disabled:focus-visible:-outline-offset-2",
+	"not-disabled:focus-visible:outline-solid",
+	"not-disabled:focus-visible:outline-focus",
 	"not-disabled:focus-visible:relative",
-	"not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
-	"not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
-	"not-disabled:focus-visible:text-(--interactive-2)",
+	"not-disabled:focus-visible:text-accent-hover",
 	"not-disabled:focus-visible:z-1",
 	"not-disabled:hover:[&_div]:opacity-7",
-	"not-disabled:hover:text-(--interactive-2)"
+	"not-disabled:hover:text-accent-hover"
 ] });
 var TabsTrigger = ({ ref, children, ...rest }) => /* @__PURE__ */ jsxs(StyledTabsTrigger, {
 	...rest,

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

@@ -1 +1 @@
-{"version":3,"file":"TabsTrigger.js","names":[],"sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n  base: [\n    'absolute',\n    'inset-0',\n    'h-[calc(100%+2px)]',\n    'opacity-0',\n    'bg-(--interactive-1)'\n  ]\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n  base: [\n    'bg-none',\n    'cursor-pointer',\n    'shrink-0',\n    'p-4',\n    'select-none',\n    'border-b-2',\n    'border-b-transparent',\n    'relative',\n    'data-[state=active]:border-current',\n    'data-[state=active]:font-semibold',\n    'data-[state=active]:text-(--interactive-1)',\n    'data-[state=active]:tracking-[-0.005em]',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:text-(--interactive-3)',\n    'not-disabled:focus-visible:[&_div]:opacity-7',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:text-(--interactive-2)',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:[&_div]:opacity-7',\n    'not-disabled:hover:text-(--interactive-2)'\n  ]\n})\n\nexport const TabsTrigger = ({\n  ref,\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledTabsTrigger> & { value: string }) => (\n  <StyledTabsTrigger {...rest} ref={ref}>\n    <Text size=\"sm\" as=\"span\">\n      {children}\n    </Text>\n    <StyledTabsTriggerHoverBackground />\n  </StyledTabsTrigger>\n)\n"],"mappings":";;;;;;AAMA,IAAM,mCAAmC,OAAO,OAAO,EACrD,MAAM;CACJ;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,oBAAoB,OAAO,SAAS,EACxC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,eAAe,EAC1B,KACA,UACA,GAAG,WAEH,qBAAC,mBAAD;CAAmB,GAAI;CAAW;WAAlC,CACE,oBAAC,MAAD;EAAM,MAAK;EAAK,IAAG;EAChB;CACG,CAAA,GACN,oBAAC,kCAAD,CAAmC,CAAA,CAClB"}
+{"version":3,"file":"TabsTrigger.js","names":[],"sources":["../../../src/components/tabs/TabsTrigger.tsx"],"sourcesContent":["import { Trigger } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\n\nconst StyledTabsTriggerHoverBackground = styled('div', {\n  base: [\n    'absolute',\n    'inset-0',\n    'h-[calc(100%+2px)]',\n    'opacity-0',\n    'bg-accent-solid'\n  ]\n})\n\nconst StyledTabsTrigger = styled(Trigger, {\n  base: [\n    'bg-none',\n    'cursor-pointer',\n    'shrink-0',\n    'p-4',\n    'select-none',\n    'border-b-2',\n    'border-b-transparent',\n    'relative',\n    'data-[state=active]:border-current',\n    'data-[state=active]:font-semibold',\n    'data-[state=active]:text-accent',\n    'data-[state=active]:tracking-[-0.005em]',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:text-accent-active',\n    'not-disabled:focus-visible:[&_div]:opacity-7',\n    'not-disabled:focus-visible:outline-2',\n    // Inset: the trigger list scrolls (overflow-x-auto), which clips an outer ring\n    'not-disabled:focus-visible:-outline-offset-2',\n    'not-disabled:focus-visible:outline-solid',\n    'not-disabled:focus-visible:outline-focus',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:text-accent-hover',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:[&_div]:opacity-7',\n    'not-disabled:hover:text-accent-hover'\n  ]\n})\n\nexport const TabsTrigger = ({\n  ref,\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledTabsTrigger> & { value: string }) => (\n  <StyledTabsTrigger {...rest} ref={ref}>\n    <Text size=\"sm\" as=\"span\">\n      {children}\n    </Text>\n    <StyledTabsTriggerHoverBackground />\n  </StyledTabsTrigger>\n)\n"],"mappings":";;;;;;AAMA,IAAM,mCAAmC,OAAO,OAAO,EACrD,MAAM;CACJ;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,oBAAoB,OAAO,SAAS,EACxC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,eAAe,EAC1B,KACA,UACA,GAAG,WAEH,qBAAC,mBAAD;CAAmB,GAAI;CAAW;WAAlC,CACE,oBAAC,MAAD;EAAM,MAAK;EAAK,IAAG;EAChB;CACG,CAAA,GACN,oBAAC,kCAAD,CAAmC,CAAA,CAClB"}

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

@@ -1,9 +1,6 @@
 import * as React from 'react';
-import { type TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
 declare const StyledTriggerList: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>>, unknown>;
-export declare function TabsTriggerList({ children, colorScheme, ...rest }: React.ComponentProps<typeof StyledTriggerList> & {
-    colorScheme?: TcolorScheme;
-}): React.JSX.Element;
+export declare function TabsTriggerList({ children, ...rest }: React.ComponentProps<typeof StyledTriggerList>): React.JSX.Element;
 export declare namespace TabsTriggerList {
     var displayName: string;
 }

package/dist/components/tabs/TabsTriggerList.js

@@ -1,5 +1,4 @@
 import { styled } from "../../styled.js";
-import { ColorScheme } from "../../experiments/color-scheme/ColorScheme.js";
 import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { useCallbackRefState } from "../../utilities/hooks/useCallbackRef.js";
@@ -10,10 +9,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "@atom-learning/icons";
 import { List } from "@radix-ui/react-tabs";
 //#region src/components/tabs/TabsTriggerList.tsx
-var StyledContainer = styled(ColorScheme, { base: [
+var StyledContainer = styled("div", { base: [
 	"relative",
 	"border-b",
-	"border-b-(--base-4)",
+	"border-b-default",
 	"w-full"
 ] });
 var StyledTriggerList = styled(List, { base: [
@@ -29,13 +28,13 @@ var StyledChevronActionIcon = styled(ActionIcon, { base: [
 	"top-1/2",
 	"-translate-y-1/2",
 	"cursor-pointer",
-	"bg-(--base-1)!",
-	"text-(--interactive-1)!",
+	"bg-surface!",
+	"text-accent!",
 	"rounded-none",
 	"opacity-90"
 ] });
 var SCROLL_STEP = .8;
-var TabsTriggerList = ({ children, colorScheme = {}, ...rest }) => {
+var TabsTriggerList = ({ children, ...rest }) => {
 	const [listRef, setListRefCallback] = useCallbackRefState();
 	const { width } = useSize({
 		element: listRef,
@@ -70,10 +69,6 @@ var TabsTriggerList = ({ children, colorScheme = {}, ...rest }) => {
 		});
 	}, [listRef]);
 	return /* @__PURE__ */ jsxs(StyledContainer, {
-		base: "grey1",
-		accent: "primary1",
-		interactive: "hiContrast",
-		...colorScheme,
 		...rest,
 		children: [
 			/* @__PURE__ */ jsx(StyledTriggerList, {

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

@@ -1 +1 @@
-{"version":3,"file":"TabsTriggerList.js","names":[],"sources":["../../../src/components/tabs/TabsTriggerList.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport { List } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport {\n  ColorScheme,\n  type TcolorScheme\n} from '../../experiments/color-scheme/ColorScheme'\nimport { styled } from '../../styled'\nimport { useCallbackRefState } from '../../utilities/hooks/useCallbackRef'\nimport { useScrollPosition } from '../../utilities/hooks/useScrollPosition'\nimport { useSize } from '../../utilities/hooks/useSize'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContainer = styled(ColorScheme, {\n  base: ['relative', 'border-b', 'border-b-(--base-4)', 'w-full']\n})\n\nconst StyledTriggerList = styled(List, {\n  base: ['shrink-0', 'flex', 'w-full', 'overflow-x-auto', 'scrollbar-none']\n})\n\nconst StyledChevronActionIcon = styled(ActionIcon, {\n  base: [\n    'h-full!',\n    'absolute',\n    'top-1/2',\n    '-translate-y-1/2',\n    'cursor-pointer',\n    'bg-(--base-1)!',\n    'text-(--interactive-1)!',\n    'rounded-none',\n    'opacity-90'\n  ]\n})\n\nconst SCROLL_STEP = 0.8 // Used to scroll 80% of clientWidth\n\nexport const TabsTriggerList = ({\n  children,\n  colorScheme = {},\n  ...rest\n}: React.ComponentProps<typeof StyledTriggerList> & {\n  colorScheme?: TcolorScheme\n}) => {\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          onClick={() => scrollList(-SCROLL_STEP)}\n          tabIndex={-1}\n          className=\"left-0\"\n        >\n          <Icon is={ChevronLeft} />\n        </StyledChevronActionIcon>\n      )}\n\n      {canScrollRight && (\n        <StyledChevronActionIcon\n          label=\"scroll right\"\n          size=\"md\"\n          onClick={() => scrollList(SCROLL_STEP)}\n          tabIndex={-1}\n          className=\"right-0\"\n        >\n          <Icon is={ChevronRight} />\n        </StyledChevronActionIcon>\n      )}\n    </StyledContainer>\n  )\n}\n\nTabsTriggerList.displayName = 'TabsTriggerList'\n"],"mappings":";;;;;;;;;;;;AAeA,IAAM,kBAAkB,OAAO,aAAa,EAC1C,MAAM;CAAC;CAAY;CAAY;CAAuB;AAAQ,EAChE,CAAC;AAED,IAAM,oBAAoB,OAAO,MAAM,EACrC,MAAM;CAAC;CAAY;CAAQ;CAAU;CAAmB;AAAgB,EAC1E,CAAC;AAED,IAAM,0BAA0B,OAAO,YAAY,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,cAAc;AAEpB,IAAa,mBAAmB,EAC9B,UACA,cAAc,CAAC,GACf,GAAG,WAGC;CACJ,MAAM,CAAC,SAAS,sBAAsB,oBAAoB;CAE1D,MAAM,EAAE,UAAU,QAAQ;EAAE,SAAS;EAAS,OAAO;CAAI,CAAC;CAC1D,MAAM,EAAE,SAAS,kBAAkB;EACjC,SAAS;EACT,OAAO;EACP,aAAa;CACf,CAAC;CAED,MAAM,iBAAiB,QAAM,cAAc;EACzC,IAAI,CAAC,SAAS,OAAO;EACrB,OAAO,QAAQ,cAAc,QAAQ;CACvC,GAAG,CAAC,OAAO,OAAO,CAAC;CAEnB,MAAM,gBAAgB,QAAM,cAAc;EACxC,IAAI,CAAC,gBAAgB,OAAO;EAC5B,OAAO,OAAO;CAChB,GAAG,CAAC,MAAM,cAAc,CAAC;CAEzB,MAAM,iBAAiB,QAAM,cAAc;EACzC,IAAI,CAAC,WAAW,CAAC,gBAAgB,OAAO;EACxC,OAAO,QAAQ,cAAc,OAAO,QAAQ,cAAc;CAC5D,GAAG;EAAC;EAAS;EAAM;CAAc,CAAC;CAElC,MAAM,aAAa,QAAM,aACtB,iBAAiB;EAChB,IAAI,CAAC,SAAS;EACd,QAAQ,OAAO;GACb,MAAM,QAAQ,aAAa,QAAQ,cAAc;GACjD,UAAU;EACZ,CAAC;CACH,GACA,CAAC,OAAO,CACV;CAEA,OACE,qBAAC,iBAAD;EACE,MAAK;EACL,QAAO;EACP,aAAY;EACZ,GAAI;EACJ,GAAI;YALN;GAOE,oBAAC,mBAAD;IAAmB,KAAK;IAAqB;GAA4B,CAAA;GAExE,iBACC,oBAAC,yBAAD;IACE,OAAM;IACN,MAAK;IACL,eAAe,WAAW,GAAY;IACtC,UAAU;IACV,WAAU;cAEV,oBAAC,MAAD,EAAM,IAAI,YAAc,CAAA;GACD,CAAA;GAG1B,kBACC,oBAAC,yBAAD;IACE,OAAM;IACN,MAAK;IACL,eAAe,WAAW,WAAW;IACrC,UAAU;IACV,WAAU;cAEV,oBAAC,MAAD,EAAM,IAAI,aAAe,CAAA;GACF,CAAA;EAEZ;;AAErB;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"TabsTriggerList.js","names":[],"sources":["../../../src/components/tabs/TabsTriggerList.tsx"],"sourcesContent":["import { ChevronLeft, ChevronRight } from '@atom-learning/icons'\nimport { List } from '@radix-ui/react-tabs'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { useCallbackRefState } from '../../utilities/hooks/useCallbackRef'\nimport { useScrollPosition } from '../../utilities/hooks/useScrollPosition'\nimport { useSize } from '../../utilities/hooks/useSize'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContainer = styled('div', {\n  base: ['relative', 'border-b', 'border-b-default', 'w-full']\n})\n\nconst StyledTriggerList = styled(List, {\n  base: ['shrink-0', 'flex', 'w-full', 'overflow-x-auto', 'scrollbar-none']\n})\n\nconst StyledChevronActionIcon = styled(ActionIcon, {\n  base: [\n    'h-full!',\n    'absolute',\n    'top-1/2',\n    '-translate-y-1/2',\n    'cursor-pointer',\n    'bg-surface!',\n    'text-accent!',\n    'rounded-none',\n    'opacity-90'\n  ]\n})\n\nconst SCROLL_STEP = 0.8 // Used to scroll 80% of clientWidth\n\nexport const TabsTriggerList = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledTriggerList>) => {\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 {...rest}>\n      <StyledTriggerList ref={setListRefCallback}>{children}</StyledTriggerList>\n\n      {canScrollLeft && (\n        <StyledChevronActionIcon\n          label=\"scroll left\"\n          size=\"md\"\n          onClick={() => scrollList(-SCROLL_STEP)}\n          tabIndex={-1}\n          className=\"left-0\"\n        >\n          <Icon is={ChevronLeft} />\n        </StyledChevronActionIcon>\n      )}\n\n      {canScrollRight && (\n        <StyledChevronActionIcon\n          label=\"scroll right\"\n          size=\"md\"\n          onClick={() => scrollList(SCROLL_STEP)}\n          tabIndex={-1}\n          className=\"right-0\"\n        >\n          <Icon is={ChevronRight} />\n        </StyledChevronActionIcon>\n      )}\n    </StyledContainer>\n  )\n}\n\nTabsTriggerList.displayName = 'TabsTriggerList'\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CAAC;CAAY;CAAY;CAAoB;AAAQ,EAC7D,CAAC;AAED,IAAM,oBAAoB,OAAO,MAAM,EACrC,MAAM;CAAC;CAAY;CAAQ;CAAU;CAAmB;AAAgB,EAC1E,CAAC;AAED,IAAM,0BAA0B,OAAO,YAAY,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,cAAc;AAEpB,IAAa,mBAAmB,EAC9B,UACA,GAAG,WACiD;CACpD,MAAM,CAAC,SAAS,sBAAsB,oBAAoB;CAE1D,MAAM,EAAE,UAAU,QAAQ;EAAE,SAAS;EAAS,OAAO;CAAI,CAAC;CAC1D,MAAM,EAAE,SAAS,kBAAkB;EACjC,SAAS;EACT,OAAO;EACP,aAAa;CACf,CAAC;CAED,MAAM,iBAAiB,QAAM,cAAc;EACzC,IAAI,CAAC,SAAS,OAAO;EACrB,OAAO,QAAQ,cAAc,QAAQ;CACvC,GAAG,CAAC,OAAO,OAAO,CAAC;CAEnB,MAAM,gBAAgB,QAAM,cAAc;EACxC,IAAI,CAAC,gBAAgB,OAAO;EAC5B,OAAO,OAAO;CAChB,GAAG,CAAC,MAAM,cAAc,CAAC;CAEzB,MAAM,iBAAiB,QAAM,cAAc;EACzC,IAAI,CAAC,WAAW,CAAC,gBAAgB,OAAO;EACxC,OAAO,QAAQ,cAAc,OAAO,QAAQ,cAAc;CAC5D,GAAG;EAAC;EAAS;EAAM;CAAc,CAAC;CAElC,MAAM,aAAa,QAAM,aACtB,iBAAiB;EAChB,IAAI,CAAC,SAAS;EACd,QAAQ,OAAO;GACb,MAAM,QAAQ,aAAa,QAAQ,cAAc;GACjD,UAAU;EACZ,CAAC;CACH,GACA,CAAC,OAAO,CACV;CAEA,OACE,qBAAC,iBAAD;EAAiB,GAAI;YAArB;GACE,oBAAC,mBAAD;IAAmB,KAAK;IAAqB;GAA4B,CAAA;GAExE,iBACC,oBAAC,yBAAD;IACE,OAAM;IACN,MAAK;IACL,eAAe,WAAW,GAAY;IACtC,UAAU;IACV,WAAU;cAEV,oBAAC,MAAD,EAAM,IAAI,YAAc,CAAA;GACD,CAAA;GAG1B,kBACC,oBAAC,yBAAD;IACE,OAAM;IACN,MAAK;IACL,eAAe,WAAW,WAAW;IACrC,UAAU;IACV,WAAU;cAEV,oBAAC,MAAD,EAAM,IAAI,aAAe,CAAA;GACF,CAAA;EAEZ;;AAErB;AAEA,gBAAgB,cAAc"}

package/dist/components/textarea/Textarea.d.ts

@@ -2,6 +2,6 @@ import * as React from 'react';
 export declare const Textarea: import("../..").StyledComponent<"textarea", {
     appearance?: "modern" | "standard" | undefined;
     state?: "error" | undefined;
-    theme?: "grey" | "white" | undefined;
+    fill?: "subtle" | "surface" | undefined;
 }>;
 export type TextareaProps = React.ComponentProps<typeof Textarea>;

package/dist/components/textarea/Textarea.js

@@ -7,7 +7,7 @@ var Textarea = styled("textarea", {
 		"appearance-none",
 		"rounded-md",
 		"box-border",
-		"text-grey-1000",
+		"text-default",
 		"font-body",
 		"font-normal",
 		"text-md",
@@ -18,35 +18,35 @@ var Textarea = styled("textarea", {
 		"py-3",
 		"resize-y",
 		"w-full",
-		"disabled:bg-grey-200",
 		"disabled:cursor-not-allowed",
-		"disabled:text-grey-800",
+		"disabled:opacity-30",
 		"placeholder:opacity-100",
-		"placeholder:text-grey-700"
+		"placeholder:text-subtlest"
 	],
 	variants: {
 		appearance: {
 			standard: [
-				"bg-white",
+				"bg-surface",
 				"border",
-				"border-grey-800",
-				"focus-within:border-primary-800",
+				"border-strong",
+				"focus-within:border-focus",
 				"focus-within:outline-none"
 			],
 			modern: [
-				"bg-grey-100",
+				"bg-input",
+				"[--autofill-fill:var(--background-color-input)]",
 				"border-none",
 				"focus-within:outline-2",
-				"focus-within:outline-blue-800",
+				"focus-within:outline-focus",
 				"focus-within:outline-offset-1",
 				"focus-within:outline-solid",
 				"focus-within:z-1"
 			]
 		},
 		state: { error: [] },
-		theme: {
-			white: [],
-			grey: []
+		fill: {
+			surface: [],
+			subtle: []
 		}
 	},
 	defaultVariants: { appearance: "standard" },
@@ -54,22 +54,22 @@ var Textarea = styled("textarea", {
 		{
 			state: "error",
 			appearance: "standard",
-			class: ["border-danger"]
+			class: ["border-danger-solid"]
 		},
 		{
 			state: "error",
 			appearance: "modern",
-			class: ["bg-danger-light", "focus-within:outline-danger"]
+			class: ["bg-danger-subtle", "focus-within:outline-danger"]
 		},
 		{
 			appearance: "modern",
-			theme: "white",
-			class: ["bg-white"]
+			fill: "surface",
+			class: ["bg-surface", "[--autofill-fill:var(--background-color-surface)]"]
 		},
 		{
 			appearance: "modern",
-			theme: "grey",
-			class: ["bg-grey-100"]
+			fill: "subtle",
+			class: ["bg-input", "[--autofill-fill:var(--background-color-input)]"]
 		}
 	]
 }, { enablePolymorphism: false });

package/dist/components/textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\n\nexport const Textarea = styled(\n  'textarea',\n  {\n    base: [\n      'shadow-none',\n      'appearance-none',\n      'rounded-md',\n      'box-border',\n      'text-grey-1000',\n      'font-body',\n      'font-normal',\n      'text-md',\n      'leading-[1.4]',\n      'm-0',\n      'min-h-24',\n      'px-3',\n      'py-3',\n      'resize-y',\n      'w-full',\n      'disabled:bg-grey-200',\n      'disabled:cursor-not-allowed',\n      'disabled:text-grey-800',\n      'placeholder:opacity-100',\n      'placeholder:text-grey-700'\n    ],\n    variants: {\n      appearance: {\n        standard: [\n          'bg-white',\n          'border',\n          'border-grey-800',\n          'focus-within:border-primary-800',\n          'focus-within:outline-none'\n        ],\n        modern: [\n          'bg-grey-100',\n          'border-none',\n          'focus-within:outline-2',\n          'focus-within:outline-blue-800',\n          'focus-within:outline-offset-1',\n          'focus-within:outline-solid',\n          'focus-within:z-1'\n        ]\n      },\n      state: {\n        error: []\n      },\n      theme: {\n        white: [],\n        grey: []\n      }\n    },\n    defaultVariants: {\n      appearance: 'standard'\n    },\n    compoundVariants: [\n      {\n        state: 'error',\n        appearance: 'standard',\n        class: ['border-danger']\n      },\n      {\n        state: 'error',\n        appearance: 'modern',\n        class: ['bg-danger-light', 'focus-within:outline-danger']\n      },\n      {\n        appearance: 'modern',\n        theme: 'white',\n        class: ['bg-white']\n      },\n      {\n        appearance: 'modern',\n        theme: 'grey',\n        class: ['bg-grey-100']\n      }\n    ]\n  },\n  { enablePolymorphism: false }\n)\n\nexport type TextareaProps = React.ComponentProps<typeof Textarea>\n"],"mappings":";;;AAIA,IAAa,WAAW,OACtB,YACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,OAAO,EACL,OAAO,CAAC,EACV;EACA,OAAO;GACL,OAAO,CAAC;GACR,MAAM,CAAC;EACT;CACF;CACA,iBAAiB,EACf,YAAY,WACd;CACA,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,eAAe;EACzB;EACA;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,6BAA6B;EAC1D;EACA;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,UAAU;EACpB;EACA;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,aAAa;EACvB;CACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B"}
+{"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\n\nexport const Textarea = styled(\n  'textarea',\n  {\n    base: [\n      'shadow-none',\n      'appearance-none',\n      'rounded-md',\n      'box-border',\n      'text-default',\n      'font-body',\n      'font-normal',\n      'text-md',\n      'leading-[1.4]',\n      'm-0',\n      'min-h-24',\n      'px-3',\n      'py-3',\n      'resize-y',\n      'w-full',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'placeholder:opacity-100',\n      'placeholder:text-subtlest'\n    ],\n    variants: {\n      appearance: {\n        standard: [\n          'bg-surface',\n          'border',\n          'border-strong',\n          'focus-within:border-focus',\n          'focus-within:outline-none'\n        ],\n        modern: [\n          'bg-input',\n          '[--autofill-fill:var(--background-color-input)]',\n          'border-none',\n          'focus-within:outline-2',\n          'focus-within:outline-focus',\n          'focus-within:outline-offset-1',\n          'focus-within:outline-solid',\n          'focus-within:z-1'\n        ]\n      },\n      state: {\n        error: []\n      },\n      fill: {\n        surface: [],\n        subtle: []\n      }\n    },\n    defaultVariants: {\n      appearance: 'standard'\n    },\n    compoundVariants: [\n      {\n        state: 'error',\n        appearance: 'standard',\n        class: ['border-danger-solid']\n      },\n      {\n        state: 'error',\n        appearance: 'modern',\n        class: ['bg-danger-subtle', 'focus-within:outline-danger']\n      },\n      {\n        appearance: 'modern',\n        fill: 'surface',\n        class: [\n          'bg-surface',\n          '[--autofill-fill:var(--background-color-surface)]'\n        ]\n      },\n      {\n        appearance: 'modern',\n        fill: 'subtle',\n        class: ['bg-input', '[--autofill-fill:var(--background-color-input)]']\n      }\n    ]\n  },\n  { enablePolymorphism: false }\n)\n\nexport type TextareaProps = React.ComponentProps<typeof Textarea>\n"],"mappings":";;;AAIA,IAAa,WAAW,OACtB,YACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,OAAO,EACL,OAAO,CAAC,EACV;EACA,MAAM;GACJ,SAAS,CAAC;GACV,QAAQ,CAAC;EACX;CACF;CACA,iBAAiB,EACf,YAAY,WACd;CACA,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,qBAAqB;EAC/B;EACA;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,oBAAoB,6BAA6B;EAC3D;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CACL,cACA,mDACF;EACF;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,iDAAiD;EACvE;CACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B"}

package/dist/components/textarea-field/TextareaField.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type FieldElementWrapperProps } from '../field-wrapper/FieldWrapper';
 import { type TextareaProps } from '../textarea/Textarea';
 type TextareaFieldProps = TextareaProps & FieldElementWrapperProps;
-export declare function TextareaField({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...rest }: TextareaFieldProps): React.JSX.Element;
+export declare function TextareaField({ className, hideLabel, label, name, validation, prompt, description, appearance, fill, ...rest }: TextareaFieldProps): React.JSX.Element;
 export declare namespace TextareaField {
     var displayName: string;
 }

package/dist/components/textarea-field/TextareaField.js

@@ -6,13 +6,13 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
 //#region src/components/textarea-field/TextareaField.tsx
-var TextareaField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...rest }) => {
+var TextareaField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, fill, ...rest }) => {
 	const { register } = useFormContext();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
-	const formTheme = context?.theme ?? theme;
+	const formFill = context?.fill ?? fill;
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		className,
 		description,
@@ -28,7 +28,7 @@ var TextareaField = ({ className, hideLabel, label, name, validation, prompt, de
 			name,
 			ref,
 			appearance: formAppearance,
-			theme: formTheme,
+			fill: formFill,
 			...error && { state: "error" },
 			...rest
 		})

package/dist/components/textarea-field/TextareaField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaField.js","names":[],"sources":["../../../src/components/textarea-field/TextareaField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\nimport { Textarea, type TextareaProps } from '../textarea/Textarea'\n\ntype TextareaFieldProps = TextareaProps & FieldElementWrapperProps\n\nexport const TextareaField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  theme,\n  ...rest\n}: TextareaFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Textarea\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error && { state: 'error' })}\n        {...rest}\n      />\n    </FieldWrapper>\n  )\n}\n\nTextareaField.displayName = 'TextareaField'\n"],"mappings":";;;;;;;;AAaA,IAAa,iBAAiB,EAC5B,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,OACA,GAAG,WACqB;CACxB,MAAM,EAAE,aAAa,eAAe;CACpC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CACpC,MAAM,MAAM,aAAa,SAAS,UAAU,IAAI;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;CAEpC,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;YAEZ,oBAAC,UAAD;GACE,IAAI;GACE;GACD;GACL,YAAY;GACZ,OAAO;GACP,GAAK,SAAS,EAAE,OAAO,QAAQ;GAC/B,GAAI;EACL,CAAA;CACW,CAAA;AAElB;AAEA,cAAc,cAAc"}
+{"version":3,"file":"TextareaField.js","names":[],"sources":["../../../src/components/textarea-field/TextareaField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n  type FieldElementWrapperProps,\n  FieldWrapper\n} from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\nimport { Textarea, type TextareaProps } from '../textarea/Textarea'\n\ntype TextareaFieldProps = TextareaProps & FieldElementWrapperProps\n\nexport const TextareaField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  fill,\n  ...rest\n}: TextareaFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formFill = context?.fill ?? fill\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Textarea\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        fill={formFill}\n        {...(error && { state: 'error' })}\n        {...rest}\n      />\n    </FieldWrapper>\n  )\n}\n\nTextareaField.displayName = 'TextareaField'\n"],"mappings":";;;;;;;;AAaA,IAAa,iBAAiB,EAC5B,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,MACA,GAAG,WACqB;CACxB,MAAM,EAAE,aAAa,eAAe;CACpC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CACpC,MAAM,MAAM,aAAa,SAAS,UAAU,IAAI;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,WAAW,SAAS,QAAQ;CAElC,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;YAEZ,oBAAC,UAAD;GACE,IAAI;GACE;GACD;GACL,YAAY;GACZ,MAAM;GACN,GAAK,SAAS,EAAE,OAAO,QAAQ;GAC/B,GAAI;EACL,CAAA;CACW,CAAA;AAElB;AAEA,cAAc,cAAc"}

package/dist/components/tile/Tile.d.ts

@@ -1,13 +1,10 @@
-import { type TcolorScheme } from '../../experiments/color-scheme/ColorScheme';
 import { type PolymorphicComponent } from '../../styled';
 export declare const StyledTile: PolymorphicComponent<"div", {
     borderRadius?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
     border?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    fill?: ("accent" | "inset" | "surface" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "accent" | "inset" | "surface">>) | undefined;
     diffused?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 }>;
 type StyledTileOwnProps = typeof StyledTile extends PolymorphicComponent<infer _Element, infer OwnProps> ? OwnProps : never;
-type TileOwnProps = StyledTileOwnProps & {
-    colorScheme?: TcolorScheme;
-};
-export declare const Tile: PolymorphicComponent<'div', TileOwnProps>;
+export declare const Tile: PolymorphicComponent<'div', StyledTileOwnProps>;
 export {};