@atom-learning/components 11.6.0 → 12.0.0-beta.2

package/dist/components/stepper/StepperStepBullet.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperStepBullet.js","names":[],"sources":["../../../src/components/stepper/StepperStepBullet.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const StepperStepBullet = styled('div', {\n  base: [\n    'flex',\n    'relative',\n    'p-2',\n    'justify-center',\n    'items-center',\n    'size-8',\n    'rounded-[50%]',\n    'border-0',\n    'bg-grey-200',\n    'z-1',\n    'flex-none'\n  ],\n  variants: {\n    status: {\n      default: ['bg-grey-200', 'text-grey-700'],\n      active: ['bg-white', 'border-2', 'border-current', 'text-primary-900'],\n      viewed: ['bg-white', 'border-2', 'border-grey-600', 'text-grey-1000'],\n      completed: ['bg-primary-800', 'text-white'],\n      reviewed: ['bg-primary-900', 'text-white'],\n      success: ['bg-success', 'text-white']\n    }\n  }\n})\n"],"mappings":";;AAEA,IAAa,oBAAoB,OAAO,OAAO;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,QAAQ;EACN,SAAS,CAAC,eAAe,eAAe;EACxC,QAAQ;GAAC;GAAY;GAAY;GAAkB;EAAkB;EACrE,QAAQ;GAAC;GAAY;GAAY;GAAmB;EAAgB;EACpE,WAAW,CAAC,kBAAkB,YAAY;EAC1C,UAAU,CAAC,kBAAkB,YAAY;EACzC,SAAS,CAAC,cAAc,YAAY;CACtC,EACF;AACF,CAAC"}
+{"version":3,"file":"StepperStepBullet.js","names":[],"sources":["../../../src/components/stepper/StepperStepBullet.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const StepperStepBullet = styled('div', {\n  base: [\n    'flex',\n    'relative',\n    'p-2',\n    'justify-center',\n    'items-center',\n    'size-8',\n    'rounded-[50%]',\n    'border-0',\n    'bg-neutral',\n    'z-1',\n    'flex-none'\n  ],\n  variants: {\n    status: {\n      default: ['bg-neutral', 'text-subtlest'],\n      active: ['bg-surface', 'border-2', 'border-current', 'text-accent-hover'],\n      viewed: [\n        'bg-surface',\n        'border-2',\n        'border-neutral-solid',\n        'text-default'\n      ],\n      completed: ['bg-accent-solid', 'text-on-accent'],\n      reviewed: ['bg-accent-solid-hover', 'text-on-accent'],\n      success: ['bg-success-solid', 'text-on-success']\n    }\n  }\n})\n"],"mappings":";;AAEA,IAAa,oBAAoB,OAAO,OAAO;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,QAAQ;EACN,SAAS,CAAC,cAAc,eAAe;EACvC,QAAQ;GAAC;GAAc;GAAY;GAAkB;EAAmB;EACxE,QAAQ;GACN;GACA;GACA;GACA;EACF;EACA,WAAW,CAAC,mBAAmB,gBAAgB;EAC/C,UAAU,CAAC,yBAAyB,gBAAgB;EACpD,SAAS,CAAC,oBAAoB,iBAAiB;CACjD,EACF;AACF,CAAC"}

package/dist/components/stepper/StepperStepContainer.js

@@ -33,10 +33,10 @@ var StepperStepContainer = styled("div", {
 			]
 		},
 		separator: {
-			default: ["not-last:after:bg-grey-200"],
-			active: ["not-last:after:bg-primary-800"],
-			success: ["not-last:after:bg-success"],
-			viewed: ["not-last:after:bg-grey-600"]
+			default: ["not-last:after:bg-(--border-color-subtle)"],
+			active: ["not-last:after:bg-accent-solid"],
+			success: ["not-last:after:bg-success-solid"],
+			viewed: ["not-last:after:bg-neutral-solid"]
 		},
 		status: {
 			completed: [],
@@ -52,49 +52,49 @@ var StepperStepContainer = styled("div", {
 			canInteract: true,
 			status: "completed",
 			class: [
-				"focus-visible:first:outline-2",
-				"focus-visible:first:outline-offset-2",
-				"focus-visible:first:outline-primary-800",
-				"focus-visible:first:outline-solid",
-				"hover:first:bg-primary-900",
-				"hover:first:text-white!",
-				"hover:last:text-primary-900"
+				"focus-visible:*:first:outline-2",
+				"focus-visible:*:first:outline-offset-2",
+				"focus-visible:*:first:outline-focus",
+				"focus-visible:*:first:outline-solid",
+				"hover:*:first:bg-accent-solid-hover",
+				"hover:*:first:text-on-accent!",
+				"hover:*:last:text-accent-hover"
 			]
 		},
 		{
 			canInteract: true,
 			status: "active",
 			class: [
-				"focus-visible:first:outline-2",
-				"focus-visible:first:outline-offset-2",
-				"focus-visible:first:outline-primary-800",
-				"focus-visible:first:outline-solid",
-				"hover:first:border-grey-800",
-				"hover:first:text-grey-1000",
-				"hover:last:text-grey-1000"
+				"focus-visible:*:first:outline-2",
+				"focus-visible:*:first:outline-offset-2",
+				"focus-visible:*:first:outline-focus",
+				"focus-visible:*:first:outline-solid",
+				"hover:*:first:border-strong",
+				"hover:*:first:text-default",
+				"hover:*:last:text-default"
 			]
 		},
 		{
 			canInteract: true,
 			status: "viewed",
 			class: [
-				"focus-visible:first:outline-2!",
-				"focus-visible:first:outline-offset-2!",
-				"focus-visible:first:outline-primary-800!",
-				"focus-visible:first:outline-solid!",
-				"hover:first:border-grey-800",
-				"hover:first:text-grey-1000",
-				"hover:last:text-grey-1000"
+				"focus-visible:*:first:outline-2!",
+				"focus-visible:*:first:outline-offset-2!",
+				"focus-visible:*:first:outline-focus!",
+				"focus-visible:*:first:outline-solid!",
+				"hover:*:first:border-strong",
+				"hover:*:first:text-default",
+				"hover:*:last:text-default"
 			]
 		},
 		{
 			canInteract: true,
 			status: "reviewed",
 			class: [
-				"focus-visible:first:outline-2!",
-				"focus-visible:first:outline-offset-2!",
-				"focus-visible:first:outline-primary-800!",
-				"focus-visible:first:outline-solid!"
+				"focus-visible:*:first:outline-2!",
+				"focus-visible:*:first:outline-offset-2!",
+				"focus-visible:*:first:outline-focus!",
+				"focus-visible:*:first:outline-solid!"
 			]
 		}
 	]

package/dist/components/stepper/StepperStepContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperStepContainer.js","names":[],"sources":["../../../src/components/stepper/StepperStepContainer.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const StepperStepContainer = styled('div', {\n  base: [\n    'flex',\n    'relative',\n    'font-body',\n    'font-semibold',\n    'text-md',\n    'items-center',\n    'not-last:after:absolute',\n    \"not-last:after:content-['']\",\n    'focus-visible:outline-none'\n  ],\n  variants: {\n    canInteract: {\n      true: []\n    },\n    direction: {\n      vertical: [\n        'flex-row',\n        'not-last:after:h-full',\n        'not-last:after:left-3.5',\n        'not-last:after:top-1/2',\n        'not-last:after:w-1',\n        'py-3'\n      ],\n      horizontal: [\n        'flex-col',\n        'not-last:after:h-1',\n        'not-last:after:left-1/2',\n        'not-last:after:top-3.5',\n        'not-last:after:w-full',\n        'px-2'\n      ]\n    },\n    separator: {\n      default: ['not-last:after:bg-grey-200'],\n      active: ['not-last:after:bg-primary-800'],\n      success: ['not-last:after:bg-success'],\n      viewed: ['not-last:after:bg-grey-600']\n    },\n    status: {\n      completed: [],\n      active: [],\n      default: [],\n      viewed: [],\n      success: [],\n      reviewed: []\n    }\n  },\n  compoundVariants: [\n    {\n      canInteract: true,\n      status: 'completed',\n      class: [\n        'focus-visible:first:outline-2',\n        'focus-visible:first:outline-offset-2',\n        'focus-visible:first:outline-primary-800',\n        'focus-visible:first:outline-solid',\n        'hover:first:bg-primary-900',\n        'hover:first:text-white!',\n        'hover:last:text-primary-900'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'active',\n      class: [\n        'focus-visible:first:outline-2',\n        'focus-visible:first:outline-offset-2',\n        'focus-visible:first:outline-primary-800',\n        'focus-visible:first:outline-solid',\n        'hover:first:border-grey-800',\n        'hover:first:text-grey-1000',\n        'hover:last:text-grey-1000'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'viewed',\n      class: [\n        'focus-visible:first:outline-2!',\n        'focus-visible:first:outline-offset-2!',\n        'focus-visible:first:outline-primary-800!',\n        'focus-visible:first:outline-solid!',\n        'hover:first:border-grey-800',\n        'hover:first:text-grey-1000',\n        'hover:last:text-grey-1000'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'reviewed',\n      class: [\n        'focus-visible:first:outline-2!',\n        'focus-visible:first:outline-offset-2!',\n        'focus-visible:first:outline-primary-800!',\n        'focus-visible:first:outline-solid!'\n      ]\n    }\n  ]\n})\n"],"mappings":";;AAEA,IAAa,uBAAuB,OAAO,OAAO;CAChD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,aAAa,EACX,MAAM,CAAC,EACT;EACA,WAAW;GACT,UAAU;IACR;IACA;IACA;IACA;IACA;IACA;GACF;GACA,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,WAAW;GACT,SAAS,CAAC,4BAA4B;GACtC,QAAQ,CAAC,+BAA+B;GACxC,SAAS,CAAC,2BAA2B;GACrC,QAAQ,CAAC,4BAA4B;EACvC;EACA,QAAQ;GACN,WAAW,CAAC;GACZ,QAAQ,CAAC;GACT,SAAS,CAAC;GACV,QAAQ,CAAC;GACT,SAAS,CAAC;GACV,UAAU,CAAC;EACb;CACF;CACA,kBAAkB;EAChB;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;CACF;AACF,CAAC"}
+{"version":3,"file":"StepperStepContainer.js","names":[],"sources":["../../../src/components/stepper/StepperStepContainer.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const StepperStepContainer = styled('div', {\n  base: [\n    'flex',\n    'relative',\n    'font-body',\n    'font-semibold',\n    'text-md',\n    'items-center',\n    'not-last:after:absolute',\n    \"not-last:after:content-['']\",\n    'focus-visible:outline-none'\n  ],\n  variants: {\n    canInteract: {\n      true: []\n    },\n    direction: {\n      vertical: [\n        'flex-row',\n        'not-last:after:h-full',\n        'not-last:after:left-3.5',\n        'not-last:after:top-1/2',\n        'not-last:after:w-1',\n        'py-3'\n      ],\n      horizontal: [\n        'flex-col',\n        'not-last:after:h-1',\n        'not-last:after:left-1/2',\n        'not-last:after:top-3.5',\n        'not-last:after:w-full',\n        'px-2'\n      ]\n    },\n    separator: {\n      default: ['not-last:after:bg-(--border-color-subtle)'],\n      active: ['not-last:after:bg-accent-solid'],\n      success: ['not-last:after:bg-success-solid'],\n      viewed: ['not-last:after:bg-neutral-solid']\n    },\n    status: {\n      completed: [],\n      active: [],\n      default: [],\n      viewed: [],\n      success: [],\n      reviewed: []\n    }\n  },\n  compoundVariants: [\n    {\n      canInteract: true,\n      status: 'completed',\n      class: [\n        'focus-visible:*:first:outline-2',\n        'focus-visible:*:first:outline-offset-2',\n        'focus-visible:*:first:outline-focus',\n        'focus-visible:*:first:outline-solid',\n        'hover:*:first:bg-accent-solid-hover',\n        'hover:*:first:text-on-accent!',\n        'hover:*:last:text-accent-hover'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'active',\n      class: [\n        'focus-visible:*:first:outline-2',\n        'focus-visible:*:first:outline-offset-2',\n        'focus-visible:*:first:outline-focus',\n        'focus-visible:*:first:outline-solid',\n        'hover:*:first:border-strong',\n        'hover:*:first:text-default',\n        'hover:*:last:text-default'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'viewed',\n      class: [\n        'focus-visible:*:first:outline-2!',\n        'focus-visible:*:first:outline-offset-2!',\n        'focus-visible:*:first:outline-focus!',\n        'focus-visible:*:first:outline-solid!',\n        'hover:*:first:border-strong',\n        'hover:*:first:text-default',\n        'hover:*:last:text-default'\n      ]\n    },\n    {\n      canInteract: true,\n      status: 'reviewed',\n      class: [\n        'focus-visible:*:first:outline-2!',\n        'focus-visible:*:first:outline-offset-2!',\n        'focus-visible:*:first:outline-focus!',\n        'focus-visible:*:first:outline-solid!'\n      ]\n    }\n  ]\n})\n"],"mappings":";;AAEA,IAAa,uBAAuB,OAAO,OAAO;CAChD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,aAAa,EACX,MAAM,CAAC,EACT;EACA,WAAW;GACT,UAAU;IACR;IACA;IACA;IACA;IACA;IACA;GACF;GACA,YAAY;IACV;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,WAAW;GACT,SAAS,CAAC,2CAA2C;GACrD,QAAQ,CAAC,gCAAgC;GACzC,SAAS,CAAC,iCAAiC;GAC3C,QAAQ,CAAC,iCAAiC;EAC5C;EACA,QAAQ;GACN,WAAW,CAAC;GACZ,QAAQ,CAAC;GACT,SAAS,CAAC;GACV,QAAQ,CAAC;GACT,SAAS,CAAC;GACV,UAAU,CAAC;EACb;CACF;CACA,kBAAkB;EAChB;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA;GACE,aAAa;GACb,QAAQ;GACR,OAAO;IACL;IACA;IACA;IACA;GACF;EACF;CACF;AACF,CAAC"}

package/dist/components/stepper/StepperStepLabel.js

@@ -9,10 +9,10 @@ var StepperStepLabel = styled(Text, {
 			horizontal: ["mt-3", "text-center"]
 		},
 		status: {
-			default: ["font-normal", "text-grey-700"],
-			active: ["text-primary-900"],
-			viewed: ["text-grey-1000"],
-			completed: ["text-primary-800"],
+			default: ["font-normal", "text-subtlest"],
+			active: ["text-accent-hover"],
+			viewed: ["text-default"],
+			completed: ["text-accent"],
 			success: ["text-success"],
 			reviewed: []
 		}

package/dist/components/stepper/StepperStepLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperStepLabel.js","names":[],"sources":["../../../src/components/stepper/StepperStepLabel.tsx"],"sourcesContent":["import { styled } from '../../styled'\nimport { Text } from '../text/Text'\n\nexport const StepperStepLabel = styled(Text, {\n  base: ['font-semibold'],\n  variants: {\n    direction: {\n      vertical: ['ml-3', 'text-left'],\n      horizontal: ['mt-3', 'text-center']\n    },\n    status: {\n      default: ['font-normal', 'text-grey-700'],\n      active: ['text-primary-900'],\n      viewed: ['text-grey-1000'],\n      completed: ['text-primary-800'],\n      success: ['text-success'],\n      reviewed: []\n    }\n  }\n})\n"],"mappings":";;;AAGA,IAAa,mBAAmB,OAAO,MAAM;CAC3C,MAAM,CAAC,eAAe;CACtB,UAAU;EACR,WAAW;GACT,UAAU,CAAC,QAAQ,WAAW;GAC9B,YAAY,CAAC,QAAQ,aAAa;EACpC;EACA,QAAQ;GACN,SAAS,CAAC,eAAe,eAAe;GACxC,QAAQ,CAAC,kBAAkB;GAC3B,QAAQ,CAAC,gBAAgB;GACzB,WAAW,CAAC,kBAAkB;GAC9B,SAAS,CAAC,cAAc;GACxB,UAAU,CAAC;EACb;CACF;AACF,CAAC"}
+{"version":3,"file":"StepperStepLabel.js","names":[],"sources":["../../../src/components/stepper/StepperStepLabel.tsx"],"sourcesContent":["import { styled } from '../../styled'\nimport { Text } from '../text/Text'\n\nexport const StepperStepLabel = styled(Text, {\n  base: ['font-semibold'],\n  variants: {\n    direction: {\n      vertical: ['ml-3', 'text-left'],\n      horizontal: ['mt-3', 'text-center']\n    },\n    status: {\n      default: ['font-normal', 'text-subtlest'],\n      active: ['text-accent-hover'],\n      viewed: ['text-default'],\n      completed: ['text-accent'],\n      success: ['text-success'],\n      reviewed: []\n    }\n  }\n})\n"],"mappings":";;;AAGA,IAAa,mBAAmB,OAAO,MAAM;CAC3C,MAAM,CAAC,eAAe;CACtB,UAAU;EACR,WAAW;GACT,UAAU,CAAC,QAAQ,WAAW;GAC9B,YAAY,CAAC,QAAQ,aAAa;EACpC;EACA,QAAQ;GACN,SAAS,CAAC,eAAe,eAAe;GACxC,QAAQ,CAAC,mBAAmB;GAC5B,QAAQ,CAAC,cAAc;GACvB,WAAW,CAAC,aAAa;GACzB,SAAS,CAAC,cAAc;GACxB,UAAU,CAAC;EACb;CACF;AACF,CAAC"}

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>;