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

package/dist/components/checkbox/Checkbox.js

@@ -12,10 +12,10 @@ var StyledCheckbox = styled(RadixCheckbox.Root, {
 		"relative",
 		"bg-transparent",
 		"border",
-		"border-grey-800",
+		"border-strong",
 		"rounded-[3px]",
-		"text-white",
-		"bg-white",
+		"text-on-accent",
+		"bg-surface",
 		"cursor-pointer",
 		"size-4",
 		"p-0",
@@ -29,7 +29,7 @@ var StyledCheckbox = styled(RadixCheckbox.Root, {
 		"not-disabled:before:-inset-2",
 		"not-disabled:before:-z-1",
 		"not-disabled:before:absolute",
-		"not-disabled:before:bg-primary-300",
+		"not-disabled:before:bg-accent-subtle-active",
 		"not-disabled:before:content-['']",
 		"not-disabled:before:duration-125",
 		"not-disabled:before:ease-in-out",
@@ -39,19 +39,19 @@ var StyledCheckbox = styled(RadixCheckbox.Root, {
 		"not-disabled:before:transition-[opacity,scale]",
 		"not-disabled:hover:before:opacity-100",
 		"not-disabled:hover:before:scale-100",
-		"data-[state=checked]:bg-primary-800",
-		"data-[state=checked]:border-primary-800",
-		"data-[state=indeterminate]:bg-primary-800",
-		"data-[state=indeterminate]:border-primary-800",
-		"focus:-outline-offset-1",
-		"focus:outline-2",
-		"focus:outline-primary-800",
-		"focus:outline-solid",
+		"data-[state=checked]:bg-accent-solid",
+		"data-[state=checked]:border-accent-solid",
+		"data-[state=indeterminate]:bg-accent-solid",
+		"data-[state=indeterminate]:border-accent-solid",
+		"focus-visible:outline-offset-2",
+		"focus-visible:outline-2",
+		"focus-visible:outline-focus",
+		"focus-visible:outline-solid",
 		"disabled:cursor-not-allowed",
 		"disabled:opacity-30"
 	],
 	variants: {
-		state: { error: ["border-danger"] },
+		state: { error: ["border-danger-solid"] },
 		size: {
 			md: ["size-4"],
 			lg: ["mt-px", "size-6"]

package/dist/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { Minus, Ok } from '@atom-learning/icons'\nimport * as RadixCheckbox from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Icon } from '../icon/Icon'\n\nconst StyledCheckbox = styled(RadixCheckbox.Root, {\n  base: [\n    'appearance-none',\n    'relative',\n    'bg-transparent',\n    'border',\n    'border-grey-800',\n    'rounded-[3px]',\n    'text-white',\n    'bg-white',\n    'cursor-pointer',\n    'size-4',\n    'p-0',\n    'flex',\n    'items-center',\n    'justify-center',\n    'transition-all',\n    'duration-50',\n    'ease-out',\n    'shrink-0',\n    'not-disabled:before:-inset-2',\n    'not-disabled:before:-z-1',\n    'not-disabled:before:absolute',\n    'not-disabled:before:bg-primary-300',\n    \"not-disabled:before:content-['']\",\n    'not-disabled:before:duration-125',\n    'not-disabled:before:ease-in-out',\n    'not-disabled:before:opacity-0',\n    'not-disabled:before:rounded-[50%]',\n    'not-disabled:before:scale-0',\n    'not-disabled:before:transition-[opacity,scale]',\n    'not-disabled:hover:before:opacity-100',\n    'not-disabled:hover:before:scale-100',\n    'data-[state=checked]:bg-primary-800',\n    'data-[state=checked]:border-primary-800',\n    'data-[state=indeterminate]:bg-primary-800',\n    'data-[state=indeterminate]:border-primary-800',\n    'focus:-outline-offset-1',\n    'focus:outline-2',\n    'focus:outline-primary-800',\n    'focus:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    state: {\n      error: ['border-danger']\n    },\n    size: {\n      md: ['size-4'],\n      lg: ['mt-px', 'size-6']\n    }\n  }\n})\n\nconst toIconSize = {\n  md: 'sm',\n  lg: 'sm'\n}\n\nexport const Checkbox = ({\n  ref,\n  size = 'md',\n  checked,\n  ...rest\n}: React.ComponentProps<typeof StyledCheckbox>) => {\n  const iconSize = overrideStyledVariantValue(size, (s) => toIconSize[s])\n\n  return (\n    <div className=\"relative z-1\">\n      <StyledCheckbox ref={ref} checked={checked} size={size} {...rest}>\n        <div className=\"absolute -inset-3 opacity-50\" />\n        <RadixCheckbox.Indicator asChild>\n          <Icon\n            is={checked === 'indeterminate' ? Minus : Ok}\n            size={iconSize}\n            className=\"stroke-3\"\n          />\n        </RadixCheckbox.Indicator>\n      </StyledCheckbox>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,iBAAiB,OAAO,cAAc,MAAM;CAChD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO,EACL,OAAO,CAAC,eAAe,EACzB;EACA,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS,QAAQ;EACxB;CACF;AACF,CAAC;AAED,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,YAAY,EACvB,KACA,OAAO,MACP,SACA,GAAG,WAC8C;CACjD,MAAM,WAAW,2BAA2B,OAAO,MAAM,WAAW,EAAE;CAEtE,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,gBAAD;GAAqB;GAAc;GAAe;GAAM,GAAI;aAA5D,CACE,oBAAC,OAAD,EAAK,WAAU,+BAAgC,CAAA,GAC/C,oBAAC,cAAc,WAAf;IAAyB,SAAA;cACvB,oBAAC,MAAD;KACE,IAAI,YAAY,kBAAkB,QAAQ;KAC1C,MAAM;KACN,WAAU;IACX,CAAA;GACsB,CAAA,CACX;;CACb,CAAA;AAET"}
+{"version":3,"file":"Checkbox.js","names":[],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import { Minus, Ok } from '@atom-learning/icons'\nimport * as RadixCheckbox from '@radix-ui/react-checkbox'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Icon } from '../icon/Icon'\n\nconst StyledCheckbox = styled(RadixCheckbox.Root, {\n  base: [\n    'appearance-none',\n    'relative',\n    'bg-transparent',\n    'border',\n    'border-strong',\n    'rounded-[3px]',\n    'text-on-accent',\n    'bg-surface',\n    'cursor-pointer',\n    'size-4',\n    'p-0',\n    'flex',\n    'items-center',\n    'justify-center',\n    'transition-all',\n    'duration-50',\n    'ease-out',\n    'shrink-0',\n    'not-disabled:before:-inset-2',\n    'not-disabled:before:-z-1',\n    'not-disabled:before:absolute',\n    'not-disabled:before:bg-accent-subtle-active',\n    \"not-disabled:before:content-['']\",\n    'not-disabled:before:duration-125',\n    'not-disabled:before:ease-in-out',\n    'not-disabled:before:opacity-0',\n    'not-disabled:before:rounded-[50%]',\n    'not-disabled:before:scale-0',\n    'not-disabled:before:transition-[opacity,scale]',\n    'not-disabled:hover:before:opacity-100',\n    'not-disabled:hover:before:scale-100',\n    'data-[state=checked]:bg-accent-solid',\n    'data-[state=checked]:border-accent-solid',\n    'data-[state=indeterminate]:bg-accent-solid',\n    'data-[state=indeterminate]:border-accent-solid',\n    'focus-visible:outline-offset-2',\n    'focus-visible:outline-2',\n    'focus-visible:outline-focus',\n    'focus-visible:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n  variants: {\n    state: {\n      error: ['border-danger-solid']\n    },\n    size: {\n      md: ['size-4'],\n      lg: ['mt-px', 'size-6']\n    }\n  }\n})\n\nconst toIconSize = {\n  md: 'sm',\n  lg: 'sm'\n}\n\nexport const Checkbox = ({\n  ref,\n  size = 'md',\n  checked,\n  ...rest\n}: React.ComponentProps<typeof StyledCheckbox>) => {\n  const iconSize = overrideStyledVariantValue(size, (s) => toIconSize[s])\n\n  return (\n    <div className=\"relative z-1\">\n      <StyledCheckbox ref={ref} checked={checked} size={size} {...rest}>\n        <div className=\"absolute -inset-3 opacity-50\" />\n        <RadixCheckbox.Indicator asChild>\n          <Icon\n            is={checked === 'indeterminate' ? Minus : Ok}\n            size={iconSize}\n            className=\"stroke-3\"\n          />\n        </RadixCheckbox.Indicator>\n      </StyledCheckbox>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,iBAAiB,OAAO,cAAc,MAAM;CAChD,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO,EACL,OAAO,CAAC,qBAAqB,EAC/B;EACA,MAAM;GACJ,IAAI,CAAC,QAAQ;GACb,IAAI,CAAC,SAAS,QAAQ;EACxB;CACF;AACF,CAAC;AAED,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,YAAY,EACvB,KACA,OAAO,MACP,SACA,GAAG,WAC8C;CACjD,MAAM,WAAW,2BAA2B,OAAO,MAAM,WAAW,EAAE;CAEtE,OACE,oBAAC,OAAD;EAAK,WAAU;YACb,qBAAC,gBAAD;GAAqB;GAAc;GAAe;GAAM,GAAI;aAA5D,CACE,oBAAC,OAAD,EAAK,WAAU,+BAAgC,CAAA,GAC/C,oBAAC,cAAc,WAAf;IAAyB,SAAA;cACvB,oBAAC,MAAD;KACE,IAAI,YAAY,kBAAkB,QAAQ;KAC1C,MAAM;KACN,WAAU;IACX,CAAA;GACsB,CAAA,CACX;;CACb,CAAA;AAET"}

package/dist/components/chip/Chip.js

@@ -54,9 +54,9 @@ var StyledRoot = styled("div", {
 		"items-center",
 		"font-body",
 		"max-w-full",
-		"border-primary-800",
-		"text-primary-900",
-		"bg-primary-100",
+		"border-accent-solid",
+		"text-on-accent-subtle",
+		"bg-accent-subtle",
 		"disabled:opacity-30",
 		"disabled:pointer-events-none"
 	],
@@ -84,9 +84,9 @@ var StyledRoot = styled("div", {
 		appearance: {
 			standard: [],
 			modern: [
-				"border-grey-900",
-				"text-grey-900",
-				"bg-grey-100"
+				"border-strong",
+				"text-default",
+				"bg-inset"
 			]
 		}
 	}

package/dist/components/chip/Chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.js","names":[],"sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Icon } from '../icon/Icon'\n\nexport const StyledChipContent = styled('span', {\n  base: [\n    'inline-flex',\n    'items-center',\n    'px-1',\n    'grow',\n    'overflow-hidden',\n    'text-ellipsis',\n    'whitespace-nowrap',\n    '*:not-last:mr-1'\n  ]\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n  const rootContext = React.use(ChipRootContext)\n  const { size } = rootContext\n  const iconSize = overrideStyledVariantValue(size, (s) => toIconSize[s])\n  return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  return (\n    <StyledChipContent {...rest}>\n      {\n        childrenArray.map((child) => {\n          if (!isSingleChild && typeof child === 'string')\n            return (\n              <span\n                key={child}\n                className=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n              >\n                {child}\n              </span>\n            )\n          if (React.isValidElement(child) && child.type === Icon) {\n            const iconProps = child.props as React.ComponentProps<typeof Icon>\n            // `React.Children.toArray` already assigns each child a stable key.\n            return <ChipIcon key={child.key} {...iconProps} />\n          }\n          return child\n        }) as React.ReactElement<unknown>[]\n      }\n    </StyledChipContent>\n  )\n}\n\nexport const StyledRoot = styled('div', {\n  base: [\n    'flex',\n    'px-2',\n    'border',\n    'rounded-md',\n    'items-center',\n    'font-body',\n    'max-w-full',\n    'border-primary-800',\n    'text-primary-900',\n    'bg-primary-100',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    size: {\n      sm: ['h-6', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      md: ['h-8', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      lg: ['h-10', 'text-md', 'leading-normal', 'capsize-[0.3864]']\n    },\n    appearance: {\n      standard: [],\n      modern: ['border-grey-900', 'text-grey-900', 'bg-grey-100']\n    }\n  }\n})\n\nexport type ChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type ChipRootProviderProps = ChipRootContext\n\nexport const ChipRootContext = React.createContext<ChipRootContext>({})\n\nexport const ChipRootProvider = ({ size, children }: ChipRootProviderProps) => {\n  const value = React.useMemo<ChipRootContext>(() => ({ size }), [size])\n  return <ChipRootContext value={value}>{children}</ChipRootContext>\n}\n\nexport type ChipRootProps = ChipRootProviderProps\n\nconst ChipRoot = ({ ref, size = 'md', ...rest }: ChipRootProps) => (\n  <ChipRootProvider size={size}>\n    <StyledRoot ref={ref} size={size} {...rest} />\n  </ChipRootProvider>\n)\n\nexport const Chip = /* @__PURE__ */ Object.assign(ChipRoot, {\n  Content: ChipContent,\n  Icon: ChipIcon\n})\n"],"mappings":";;;;;;AAMA,IAAa,oBAAoB,OAAO,QAAQ,EAC9C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,aAAa;CAAE,IAAI;CAAM,IAAI;CAAM,IAAI;AAAK;AAElD,IAAa,YAAY,UAA6C;CAEpE,MAAM,EAAE,SADY,QAAM,IAAI,eACb;CACjB,MAAM,WAAW,2BAA2B,OAAO,MAAM,WAAW,EAAE;CACtE,OAAO,oBAAC,MAAD;EAAM,GAAI;EAAO,MAAM;CAAW,CAAA;AAC3C;AAEA,IAAM,eAAe,EAAE,UAAU,GAAG,WAAW;CAC7C,MAAM,gBAAgB,QAAM,SAAS,QAAQ,QAAQ;CACrD,MAAM,gBAAgB,cAAc,UAAU;CAC9C,OACE,oBAAC,mBAAD;EAAmB,GAAI;YAEnB,cAAc,KAAK,UAAU;GAC3B,IAAI,CAAC,iBAAiB,OAAO,UAAU,UACrC,OACE,oBAAC,QAAD;IAEE,WAAU;cAET;GACG,GAJC,KAID;GAEV,IAAI,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,MAAM;IACtD,MAAM,YAAY,MAAM;IAExB,OAAO,oBAAC,UAAD,EAA0B,GAAI,UAAY,GAA3B,MAAM,GAAqB;GACnD;GACA,OAAO;EACT,CAAC;CAEc,CAAA;AAEvB;AAEA,IAAa,aAAa,OAAO,OAAO;CACtC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAW;IAAkB;GAAkB;GAC3D,IAAI;IAAC;IAAO;IAAW;IAAkB;GAAkB;GAC3D,IAAI;IAAC;IAAQ;IAAW;IAAkB;GAAkB;EAC9D;EACA,YAAY;GACV,UAAU,CAAC;GACX,QAAQ;IAAC;IAAmB;IAAiB;GAAa;EAC5D;CACF;AACF,CAAC;AAKD,IAAa,kBAAkB,QAAM,cAA+B,CAAC,CAAC;AAEtE,IAAa,oBAAoB,EAAE,MAAM,eAAsC;CAE7E,OAAO,oBAAC,iBAAD;EAAwB,OADjB,QAAM,eAAgC,EAAE,KAAK,IAAI,CAAC,IAAI,CACrC;EAAQ;CAA0B,CAAA;AACnE;AAIA,IAAM,YAAY,EAAE,KAAK,OAAO,MAAM,GAAG,WACvC,oBAAC,kBAAD;CAAwB;WACtB,oBAAC,YAAD;EAAiB;EAAW;EAAM,GAAI;CAAO,CAAA;AAC7B,CAAA;AAGpB,IAAa,OAAuB,uBAAO,OAAO,UAAU;CAC1D,SAAS;CACT,MAAM;AACR,CAAC"}
+{"version":3,"file":"Chip.js","names":[],"sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Icon } from '../icon/Icon'\n\nexport const StyledChipContent = styled('span', {\n  base: [\n    'inline-flex',\n    'items-center',\n    'px-1',\n    'grow',\n    'overflow-hidden',\n    'text-ellipsis',\n    'whitespace-nowrap',\n    '*:not-last:mr-1'\n  ]\n})\n\nconst toIconSize = { sm: 'sm', md: 'sm', lg: 'md' }\n\nexport const ChipIcon = (props: React.ComponentProps<typeof Icon>) => {\n  const rootContext = React.use(ChipRootContext)\n  const { size } = rootContext\n  const iconSize = overrideStyledVariantValue(size, (s) => toIconSize[s])\n  return <Icon {...props} size={iconSize} />\n}\n\nconst ChipContent = ({ children, ...rest }) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  return (\n    <StyledChipContent {...rest}>\n      {\n        childrenArray.map((child) => {\n          if (!isSingleChild && typeof child === 'string')\n            return (\n              <span\n                key={child}\n                className=\"overflow-hidden text-ellipsis whitespace-nowrap\"\n              >\n                {child}\n              </span>\n            )\n          if (React.isValidElement(child) && child.type === Icon) {\n            const iconProps = child.props as React.ComponentProps<typeof Icon>\n            // `React.Children.toArray` already assigns each child a stable key.\n            return <ChipIcon key={child.key} {...iconProps} />\n          }\n          return child\n        }) as React.ReactElement<unknown>[]\n      }\n    </StyledChipContent>\n  )\n}\n\nexport const StyledRoot = styled('div', {\n  base: [\n    'flex',\n    'px-2',\n    'border',\n    'rounded-md',\n    'items-center',\n    'font-body',\n    'max-w-full',\n    'border-accent-solid',\n    'text-on-accent-subtle',\n    'bg-accent-subtle',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    size: {\n      sm: ['h-6', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      md: ['h-8', 'text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      lg: ['h-10', 'text-md', 'leading-normal', 'capsize-[0.3864]']\n    },\n    appearance: {\n      standard: [],\n      modern: ['border-strong', 'text-default', 'bg-inset']\n    }\n  }\n})\n\nexport type ChipRootContext = React.ComponentProps<typeof StyledRoot>\nexport type ChipRootProviderProps = ChipRootContext\n\nexport const ChipRootContext = React.createContext<ChipRootContext>({})\n\nexport const ChipRootProvider = ({ size, children }: ChipRootProviderProps) => {\n  const value = React.useMemo<ChipRootContext>(() => ({ size }), [size])\n  return <ChipRootContext value={value}>{children}</ChipRootContext>\n}\n\nexport type ChipRootProps = ChipRootProviderProps\n\nconst ChipRoot = ({ ref, size = 'md', ...rest }: ChipRootProps) => (\n  <ChipRootProvider size={size}>\n    <StyledRoot ref={ref} size={size} {...rest} />\n  </ChipRootProvider>\n)\n\nexport const Chip = /* @__PURE__ */ Object.assign(ChipRoot, {\n  Content: ChipContent,\n  Icon: ChipIcon\n})\n"],"mappings":";;;;;;AAMA,IAAa,oBAAoB,OAAO,QAAQ,EAC9C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,aAAa;CAAE,IAAI;CAAM,IAAI;CAAM,IAAI;AAAK;AAElD,IAAa,YAAY,UAA6C;CAEpE,MAAM,EAAE,SADY,QAAM,IAAI,eACb;CACjB,MAAM,WAAW,2BAA2B,OAAO,MAAM,WAAW,EAAE;CACtE,OAAO,oBAAC,MAAD;EAAM,GAAI;EAAO,MAAM;CAAW,CAAA;AAC3C;AAEA,IAAM,eAAe,EAAE,UAAU,GAAG,WAAW;CAC7C,MAAM,gBAAgB,QAAM,SAAS,QAAQ,QAAQ;CACrD,MAAM,gBAAgB,cAAc,UAAU;CAC9C,OACE,oBAAC,mBAAD;EAAmB,GAAI;YAEnB,cAAc,KAAK,UAAU;GAC3B,IAAI,CAAC,iBAAiB,OAAO,UAAU,UACrC,OACE,oBAAC,QAAD;IAEE,WAAU;cAET;GACG,GAJC,KAID;GAEV,IAAI,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,MAAM;IACtD,MAAM,YAAY,MAAM;IAExB,OAAO,oBAAC,UAAD,EAA0B,GAAI,UAAY,GAA3B,MAAM,GAAqB;GACnD;GACA,OAAO;EACT,CAAC;CAEc,CAAA;AAEvB;AAEA,IAAa,aAAa,OAAO,OAAO;CACtC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAW;IAAkB;GAAkB;GAC3D,IAAI;IAAC;IAAO;IAAW;IAAkB;GAAkB;GAC3D,IAAI;IAAC;IAAQ;IAAW;IAAkB;GAAkB;EAC9D;EACA,YAAY;GACV,UAAU,CAAC;GACX,QAAQ;IAAC;IAAiB;IAAgB;GAAU;EACtD;CACF;AACF,CAAC;AAKD,IAAa,kBAAkB,QAAM,cAA+B,CAAC,CAAC;AAEtE,IAAa,oBAAoB,EAAE,MAAM,eAAsC;CAE7E,OAAO,oBAAC,iBAAD;EAAwB,OADjB,QAAM,eAAgC,EAAE,KAAK,IAAI,CAAC,IAAI,CACrC;EAAQ;CAA0B,CAAA;AACnE;AAIA,IAAM,YAAY,EAAE,KAAK,OAAO,MAAM,GAAG,WACvC,oBAAC,kBAAD;CAAwB;WACtB,oBAAC,YAAD;EAAiB;EAAW;EAAM,GAAI;CAAO,CAAA;AAC7B,CAAA;AAGpB,IAAa,OAAuB,uBAAO,OAAO,UAAU;CAC1D,SAAS;CACT,MAAM;AACR,CAAC"}

package/dist/components/chip-dismissible-group/ChipDismissibleGroupItem.js

@@ -18,7 +18,7 @@ var ChipDismissibleGroupItem = ({ size = "md", children, dismissActionLabel = "D
 			children: /* @__PURE__ */ jsx(ActionIcon, {
 				label: dismissActionLabel,
 				size: size === "sm" ? "xs" : "sm",
-				className: "text-grey-600",
+				className: "text-subtlest",
 				children: /* @__PURE__ */ jsx(Icon, { is: Close })
 			})
 		})]

package/dist/components/chip-dismissible-group/ChipDismissibleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipDismissibleGroupItem.js","names":[],"sources":["../../../src/components/chip-dismissible-group/ChipDismissibleGroupItem.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Chip } from '../chip/Chip'\nimport { DismissibleGroup } from '../dismissible-group'\nimport { Icon } from '../icon/Icon'\n\nconst StyledChipDismissibleGroupItem = styled(Chip, {\n  base: ['flex', 'px-1']\n})\n\nexport type ChipDismissibleGroupItem = React.ComponentProps<\n  typeof DismissibleGroup.Item\n> &\n  React.ComponentProps<typeof StyledChipDismissibleGroupItem> & {\n    dismissActionLabel: string\n  }\n\nexport const ChipDismissibleGroupItem = ({\n  size = 'md',\n  children,\n  dismissActionLabel = 'Dismiss',\n  ...rest\n}: ChipDismissibleGroupItem) => (\n  <DismissibleGroup.Item asChild {...rest}>\n    <StyledChipDismissibleGroupItem size={size}>\n      <Chip.Content>{children}</Chip.Content>\n      <DismissibleGroup.Trigger asChild>\n        <ActionIcon\n          label={dismissActionLabel}\n          size={size === 'sm' ? 'xs' : 'sm'}\n          className=\"text-grey-600\"\n        >\n          <Icon is={Close} />\n        </ActionIcon>\n      </DismissibleGroup.Trigger>\n    </StyledChipDismissibleGroupItem>\n  </DismissibleGroup.Item>\n)\n"],"mappings":";;;;;;;;;AASA,IAAM,iCAAiC,OAAO,MAAM,EAClD,MAAM,CAAC,QAAQ,MAAM,EACvB,CAAC;AASD,IAAa,4BAA4B,EACvC,OAAO,MACP,UACA,qBAAqB,WACrB,GAAG,WAEH,oBAAC,iBAAiB,MAAlB;CAAuB,SAAA;CAAQ,GAAI;WACjC,qBAAC,gCAAD;EAAsC;YAAtC,CACE,oBAAC,KAAK,SAAN,EAAe,SAAuB,CAAA,GACtC,oBAAC,iBAAiB,SAAlB;GAA0B,SAAA;aACxB,oBAAC,YAAD;IACE,OAAO;IACP,MAAM,SAAS,OAAO,OAAO;IAC7B,WAAU;cAEV,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;GACR,CAAA;EACY,CAAA,CACI;;AACX,CAAA"}
+{"version":3,"file":"ChipDismissibleGroupItem.js","names":[],"sources":["../../../src/components/chip-dismissible-group/ChipDismissibleGroupItem.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Chip } from '../chip/Chip'\nimport { DismissibleGroup } from '../dismissible-group'\nimport { Icon } from '../icon/Icon'\n\nconst StyledChipDismissibleGroupItem = styled(Chip, {\n  base: ['flex', 'px-1']\n})\n\nexport type ChipDismissibleGroupItem = React.ComponentProps<\n  typeof DismissibleGroup.Item\n> &\n  React.ComponentProps<typeof StyledChipDismissibleGroupItem> & {\n    dismissActionLabel: string\n  }\n\nexport const ChipDismissibleGroupItem = ({\n  size = 'md',\n  children,\n  dismissActionLabel = 'Dismiss',\n  ...rest\n}: ChipDismissibleGroupItem) => (\n  <DismissibleGroup.Item asChild {...rest}>\n    <StyledChipDismissibleGroupItem size={size}>\n      <Chip.Content>{children}</Chip.Content>\n      <DismissibleGroup.Trigger asChild>\n        <ActionIcon\n          label={dismissActionLabel}\n          size={size === 'sm' ? 'xs' : 'sm'}\n          className=\"text-subtlest\"\n        >\n          <Icon is={Close} />\n        </ActionIcon>\n      </DismissibleGroup.Trigger>\n    </StyledChipDismissibleGroupItem>\n  </DismissibleGroup.Item>\n)\n"],"mappings":";;;;;;;;;AASA,IAAM,iCAAiC,OAAO,MAAM,EAClD,MAAM,CAAC,QAAQ,MAAM,EACvB,CAAC;AASD,IAAa,4BAA4B,EACvC,OAAO,MACP,UACA,qBAAqB,WACrB,GAAG,WAEH,oBAAC,iBAAiB,MAAlB;CAAuB,SAAA;CAAQ,GAAI;WACjC,qBAAC,gCAAD;EAAsC;YAAtC,CACE,oBAAC,KAAK,SAAN,EAAe,SAAuB,CAAA,GACtC,oBAAC,iBAAiB,SAAlB;GAA0B,SAAA;aACxB,oBAAC,YAAD;IACE,OAAO;IACP,MAAM,SAAS,OAAO,OAAO;IAC7B,WAAU;cAEV,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;GACR,CAAA;EACY,CAAA,CACI;;AACX,CAAA"}

package/dist/components/chip-toggle-group/ChipToggleGroupItem.js

@@ -11,29 +11,30 @@ var StyledChipToggleGroupItem = styled(Chip, {
 	base: [
 		"flex",
 		"not-disabled:cursor-pointer",
-		"not-disabled:data-[state=on]:hover:bg-white",
-		"not-disabled:data-[state=on]:hover:text-primary-1000",
-		"not-disabled:focus-visible:outline-none",
+		"not-disabled:data-[state=on]:hover:bg-surface",
+		"not-disabled:data-[state=on]:hover:text-accent-active",
+		"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:z-1",
-		"not-disabled:hover:bg-grey-200",
+		"not-disabled:hover:bg-surface-hover",
 		"not-disabled:hover:border-current",
-		"not-disabled:hover:text-grey-1000",
-		"data-[state=off]:bg-white",
-		"data-[state=off]:border-grey-600",
-		"data-[state=off]:text-grey-800",
+		"not-disabled:hover:text-default",
+		"data-[state=off]:bg-surface",
+		"data-[state=off]:border-neutral-solid",
+		"data-[state=off]:text-subtle",
 		"data-[state=on]:[&_svg]:block"
 	],
 	variants: { appearance: {
 		standard: [],
 		modern: [
-			"data-[state=off]:bg-grey-100",
+			"data-[state=off]:bg-inset",
 			"data-[state=off]:border-transparent",
-			"data-[state=on]:border-grey-900",
-			"data-[state=on]:text-grey-900",
-			"data-[state=on]:bg-white",
+			"data-[state=on]:border-strong",
+			"data-[state=on]:text-default",
+			"data-[state=on]:bg-surface",
 			"data-[state=on]:font-bold"
 		]
 	} }

package/dist/components/chip-toggle-group/ChipToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipToggleGroupItem.js","names":[],"sources":["../../../src/components/chip-toggle-group/ChipToggleGroupItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Chip } from '../chip/Chip'\nimport { Icon } from '../icon/Icon'\n\nconst StyledChipToggleIcon = styled(Icon, {\n  base: ['hidden']\n})\n\nconst StyledChipToggleGroupItem = styled(Chip, {\n  base: [\n    'flex',\n    'not-disabled:cursor-pointer',\n    'not-disabled:data-[state=on]:hover:bg-white',\n    'not-disabled:data-[state=on]:hover:text-primary-1000',\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:z-1',\n    'not-disabled:hover:bg-grey-200',\n    'not-disabled:hover:border-current',\n    'not-disabled:hover:text-grey-1000',\n    'data-[state=off]:bg-white',\n    'data-[state=off]:border-grey-600',\n    'data-[state=off]:text-grey-800',\n    'data-[state=on]:[&_svg]:block'\n  ],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: [\n        'data-[state=off]:bg-grey-100',\n        'data-[state=off]:border-transparent',\n        'data-[state=on]:border-grey-900',\n        'data-[state=on]:text-grey-900',\n        'data-[state=on]:bg-white',\n        'data-[state=on]:font-bold'\n      ]\n    }\n  }\n})\n\ntype ChipToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledChipToggleGroupItem>\n\nexport const ChipToggleGroupItem = ({\n  size = 'md',\n  appearance,\n  children,\n  ...rest\n}: ChipToggleGroupItem) => (\n  <ToggleGroup.Item {...rest} asChild>\n    <StyledChipToggleGroupItem as=\"button\" appearance={appearance}>\n      <StyledChipToggleIcon is={Ok} size={size === 'lg' ? 'md' : 'sm'} />\n      <Chip.Content>{children}</Chip.Content>\n    </StyledChipToggleGroupItem>\n  </ToggleGroup.Item>\n)\n"],"mappings":";;;;;;;;AAQA,IAAM,uBAAuB,OAAO,MAAM,EACxC,MAAM,CAAC,QAAQ,EACjB,CAAC;AAED,IAAM,4BAA4B,OAAO,MAAM;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,YAAY;EACV,UAAU,CAAC;EACX,QAAQ;GACN;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;AACF,CAAC;AAKD,IAAa,uBAAuB,EAClC,OAAO,MACP,YACA,UACA,GAAG,WAEH,oBAAC,YAAY,MAAb;CAAkB,GAAI;CAAM,SAAA;WAC1B,qBAAC,2BAAD;EAA2B,IAAG;EAAqB;YAAnD,CACE,oBAAC,sBAAD;GAAsB,IAAI;GAAI,MAAM,SAAS,OAAO,OAAO;EAAO,CAAA,GAClE,oBAAC,KAAK,SAAN,EAAe,SAAuB,CAAA,CACb;;AACX,CAAA"}
+{"version":3,"file":"ChipToggleGroupItem.js","names":[],"sources":["../../../src/components/chip-toggle-group/ChipToggleGroupItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Chip } from '../chip/Chip'\nimport { Icon } from '../icon/Icon'\n\nconst StyledChipToggleIcon = styled(Icon, {\n  base: ['hidden']\n})\n\nconst StyledChipToggleGroupItem = styled(Chip, {\n  base: [\n    'flex',\n    'not-disabled:cursor-pointer',\n    'not-disabled:data-[state=on]:hover:bg-surface',\n    'not-disabled:data-[state=on]:hover:text-accent-active',\n    'not-disabled:focus-visible:outline-2',\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:z-1',\n    'not-disabled:hover:bg-surface-hover',\n    'not-disabled:hover:border-current',\n    'not-disabled:hover:text-default',\n    'data-[state=off]:bg-surface',\n    'data-[state=off]:border-neutral-solid',\n    'data-[state=off]:text-subtle',\n    'data-[state=on]:[&_svg]:block'\n  ],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: [\n        'data-[state=off]:bg-inset',\n        'data-[state=off]:border-transparent',\n        'data-[state=on]:border-strong',\n        'data-[state=on]:text-default',\n        'data-[state=on]:bg-surface',\n        'data-[state=on]:font-bold'\n      ]\n    }\n  }\n})\n\ntype ChipToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledChipToggleGroupItem>\n\nexport const ChipToggleGroupItem = ({\n  size = 'md',\n  appearance,\n  children,\n  ...rest\n}: ChipToggleGroupItem) => (\n  <ToggleGroup.Item {...rest} asChild>\n    <StyledChipToggleGroupItem as=\"button\" appearance={appearance}>\n      <StyledChipToggleIcon is={Ok} size={size === 'lg' ? 'md' : 'sm'} />\n      <Chip.Content>{children}</Chip.Content>\n    </StyledChipToggleGroupItem>\n  </ToggleGroup.Item>\n)\n"],"mappings":";;;;;;;;AAQA,IAAM,uBAAuB,OAAO,MAAM,EACxC,MAAM,CAAC,QAAQ,EACjB,CAAC;AAED,IAAM,4BAA4B,OAAO,MAAM;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,YAAY;EACV,UAAU,CAAC;EACX,QAAQ;GACN;GACA;GACA;GACA;GACA;GACA;EACF;CACF,EACF;AACF,CAAC;AAKD,IAAa,uBAAuB,EAClC,OAAO,MACP,YACA,UACA,GAAG,WAEH,oBAAC,YAAY,MAAb;CAAkB,GAAI;CAAM,SAAA;WAC1B,qBAAC,2BAAD;EAA2B,IAAG;EAAqB;YAAnD,CACE,oBAAC,sBAAD;GAAsB,IAAI;GAAI,MAAM,SAAS,OAAO,OAAO;EAAO,CAAA,GAClE,oBAAC,KAAK,SAAN,EAAe,SAAuB,CAAA,CACb;;AACX,CAAA"}

package/dist/components/combobox/Combobox.d.ts

@@ -3,7 +3,7 @@ export declare const Combobox: import("@reach/utils/polymorphic/dist/reach-utils
     displayName: string;
     Option: import("../..").StyledComponent<import("@reach/utils/polymorphic/dist/reach-utils-polymorphic.cjs").ForwardRefComponent<"li", import("@reach/combobox").ComboboxOptionProps>, unknown>;
     Input: ({ ref, size, appearance, ...rest }: import("./ComboboxInput").ComboboxInputProps) => import("react").JSX.Element;
-    Popover: import("../..").StyledComponent<import("@reach/utils/polymorphic/dist/reach-utils-polymorphic.cjs").ForwardRefComponent<"div", import("@reach/combobox").ComboboxPopoverProps & Partial<import("@reach/popover").PopoverProps>>, unknown>;
+    Popover: ({ children, ...rest }: React.ComponentProps<import("../..").StyledComponent<import("@reach/utils/polymorphic/dist/reach-utils-polymorphic.cjs").ForwardRefComponent<"div", import("@reach/combobox").ComboboxPopoverProps & Partial<import("@reach/popover").PopoverProps>>, unknown>>) => import("react").JSX.Element;
     List: import("../..").StyledComponent<import("@reach/utils/polymorphic/dist/reach-utils-polymorphic.cjs").ForwardRefComponent<"ul", import("@reach/combobox").ComboboxListProps>, unknown>;
     OptionText: typeof ComboboxOptionText;
 };

package/dist/components/combobox/ComboboxInput.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export declare const StyledComboboxInput: import("../..").PolymorphicComponent<import("@reach/utils/polymorphic/dist/reach-utils-polymorphic.cjs").ForwardRefComponent<"input", import("@reach/combobox").ComboboxInputProps>, {
     size?: "lg" | "md" | "sm" | undefined;
     appearance?: "modern" | "standard" | undefined;
-    theme?: "grey" | "white" | undefined;
+    fill?: "subtle" | "surface" | undefined;
     state?: "error" | undefined;
 }>;
 export type ComboboxInputProps = React.ComponentProps<typeof StyledComboboxInput>;

package/dist/components/combobox/ComboboxInput.js

@@ -13,7 +13,7 @@ var StyledComboboxInput = styled(ComboboxInput, {
 		"appearance-none",
 		"rounded-md",
 		"box-border",
-		"text-grey-1000",
+		"text-default",
 		"cursor-text",
 		"block",
 		"font-body",
@@ -25,10 +25,9 @@ var StyledComboboxInput = styled(ComboboxInput, {
 		"ease-out",
 		"w-full",
 		"placeholder:opacity-100",
-		"placeholder:text-grey-700",
-		"disabled:bg-grey-200",
+		"placeholder:text-subtlest",
 		"disabled:cursor-not-allowed",
-		"disabled:text-grey-800"
+		"disabled:opacity-30"
 	],
 	variants: {
 		size: {
@@ -50,25 +49,25 @@ var StyledComboboxInput = styled(ComboboxInput, {
 		},
 		appearance: {
 			standard: [
-				"bg-white",
+				"bg-surface",
 				"border",
-				"border-grey-700",
-				"focus-within:border-primary-800",
+				"border-strong",
+				"focus-within:border-focus",
 				"focus-within:outline-none"
 			],
 			modern: [
-				"bg-grey-100",
+				"bg-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"
 			]
 		},
-		theme: {
-			white: [],
-			grey: []
+		fill: {
+			surface: [],
+			subtle: []
 		},
 		state: { error: [] }
 	},
@@ -76,22 +75,22 @@ var StyledComboboxInput = styled(ComboboxInput, {
 		{
 			state: "error",
 			appearance: "standard",
-			class: ["border", "border-danger"]
+			class: ["border", "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"]
 		},
 		{
 			appearance: "modern",
-			theme: "grey",
-			class: ["bg-grey-100"]
+			fill: "subtle",
+			class: ["bg-input"]
 		}
 	]
 });

package/dist/components/combobox/ComboboxInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxInput.js","names":[],"sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\n\nexport const StyledComboboxInput = styled(BaseComboboxInput, {\n  base: [\n    'bg-(image:--bg-chevron)',\n    'bg-position-[right_--spacing(3)_top_50%,0_0]',\n    '[background-repeat:no-repeat,repeat-x]',\n    'bg-size-[--spacing(5)_auto,100%]',\n    'shadow-none',\n    'appearance-none',\n    'rounded-md',\n    'box-border',\n    'text-grey-1000',\n    'cursor-text',\n    'block',\n    'font-body',\n    'h-10',\n    'pl-3',\n    'pr-10',\n    'transition-all',\n    'duration-100',\n    'ease-out',\n    'w-full',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700',\n    'disabled:bg-grey-200',\n    'disabled:cursor-not-allowed',\n    'disabled:text-grey-800'\n  ],\n\n  variants: {\n    size: {\n      sm: ['h-8', 'text-sm', 'leading-[1.7]'],\n      md: ['h-10', 'text-md', 'leading-loose'],\n      lg: ['h-12', 'text-md', 'leading-loose']\n    },\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-700',\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    theme: {\n      white: [],\n      grey: []\n    },\n    state: {\n      error: []\n    }\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border', '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\nexport type ComboboxInputProps = React.ComponentProps<\n  typeof StyledComboboxInput\n>\n\nexport const ComboboxInput = ({\n  ref,\n  size = 'md',\n  appearance = 'standard',\n  ...rest\n}: ComboboxInputProps) => (\n  <StyledComboboxInput\n    size={size}\n    appearance={appearance}\n    {...rest}\n    ref={ref}\n  />\n)\n"],"mappings":";;;;;AAKA,IAAa,sBAAsB,OAAO,eAAmB;CAC3D,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAW;GAAe;GACtC,IAAI;IAAC;IAAQ;IAAW;GAAe;GACvC,IAAI;IAAC;IAAQ;IAAW;GAAe;EACzC;EACA,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,OAAO;GACL,OAAO,CAAC;GACR,MAAM,CAAC;EACT;EACA,OAAO,EACL,OAAO,CAAC,EACV;CACF;CACA,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,UAAU,eAAe;EACnC;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,CAAC;AAMD,IAAa,mBAAiB,EAC5B,KACA,OAAO,MACP,aAAa,YACb,GAAG,WAEH,oBAAC,qBAAD;CACQ;CACM;CACZ,GAAI;CACC;AACN,CAAA"}
+{"version":3,"file":"ComboboxInput.js","names":[],"sources":["../../../src/components/combobox/ComboboxInput.tsx"],"sourcesContent":["import { ComboboxInput as BaseComboboxInput } from '@reach/combobox'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\n\nexport const StyledComboboxInput = styled(BaseComboboxInput, {\n  base: [\n    'bg-(image:--bg-chevron)',\n    'bg-position-[right_--spacing(3)_top_50%,0_0]',\n    '[background-repeat:no-repeat,repeat-x]',\n    'bg-size-[--spacing(5)_auto,100%]',\n    'shadow-none',\n    'appearance-none',\n    'rounded-md',\n    'box-border',\n    'text-default',\n    'cursor-text',\n    'block',\n    'font-body',\n    'h-10',\n    'pl-3',\n    'pr-10',\n    'transition-all',\n    'duration-100',\n    'ease-out',\n    'w-full',\n    'placeholder:opacity-100',\n    'placeholder:text-subtlest',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ],\n\n  variants: {\n    size: {\n      sm: ['h-8', 'text-sm', 'leading-[1.7]'],\n      md: ['h-10', 'text-md', 'leading-loose'],\n      lg: ['h-12', 'text-md', 'leading-loose']\n    },\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        '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    fill: {\n      surface: [],\n      subtle: []\n    },\n    state: {\n      error: []\n    }\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border', '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: ['bg-surface']\n    },\n    {\n      appearance: 'modern',\n      fill: 'subtle',\n      class: ['bg-input']\n    }\n  ]\n})\n\nexport type ComboboxInputProps = React.ComponentProps<\n  typeof StyledComboboxInput\n>\n\nexport const ComboboxInput = ({\n  ref,\n  size = 'md',\n  appearance = 'standard',\n  ...rest\n}: ComboboxInputProps) => (\n  <StyledComboboxInput\n    size={size}\n    appearance={appearance}\n    {...rest}\n    ref={ref}\n  />\n)\n"],"mappings":";;;;;AAKA,IAAa,sBAAsB,OAAO,eAAmB;CAC3D,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CAEA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAO;IAAW;GAAe;GACtC,IAAI;IAAC;IAAQ;IAAW;GAAe;GACvC,IAAI;IAAC;IAAQ;IAAW;GAAe;EACzC;EACA,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,SAAS,CAAC;GACV,QAAQ,CAAC;EACX;EACA,OAAO,EACL,OAAO,CAAC,EACV;CACF;CACA,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,UAAU,qBAAqB;EACzC;EACA;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,oBAAoB,6BAA6B;EAC3D;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY;EACtB;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,UAAU;EACpB;CACF;AACF,CAAC;AAMD,IAAa,mBAAiB,EAC5B,KACA,OAAO,MACP,aAAa,YACb,GAAG,WAEH,oBAAC,qBAAD;CACQ;CACM;CACZ,GAAI;CACC;AACN,CAAA"}

package/dist/components/combobox/ComboboxOption.js

@@ -2,15 +2,15 @@ import { styled } from "../../styled.js";
 import { ComboboxOption } from "@reach/combobox";
 //#region src/components/combobox/ComboboxOption.tsx
 var ComboboxOption$1 = styled(ComboboxOption, { base: [
-	"text-grey-900",
+	"text-default",
 	"cursor-pointer",
 	"m-0",
 	"p-2",
-	"hover:bg-grey-100",
+	"hover:bg-hover",
 	"hover:rounded-sm",
-	"aria-selected:bg-grey-100",
+	"aria-selected:bg-hover",
 	"aria-selected:rounded-sm",
-	"data-user-value:text-primary-800"
+	"data-user-value:text-accent"
 ] }, { enablePolymorphism: false });
 //#endregion
 export { ComboboxOption$1 as ComboboxOption };

package/dist/components/combobox/ComboboxOption.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxOption.js","names":[],"sources":["../../../src/components/combobox/ComboboxOption.tsx"],"sourcesContent":["import { ComboboxOption as BaseComboboxOption } from '@reach/combobox'\n\nimport { styled } from '../../styled'\n\nexport const ComboboxOption = styled(\n  BaseComboboxOption,\n  {\n    base: [\n      'text-grey-900',\n      'cursor-pointer',\n      'm-0',\n      'p-2',\n      'hover:bg-grey-100',\n      'hover:rounded-sm',\n      'aria-selected:bg-grey-100',\n      'aria-selected:rounded-sm',\n      'data-user-value:text-primary-800'\n    ]\n  },\n  { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,mBAAiB,OAC5B,gBACA,EACE,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,GACA,EAAE,oBAAoB,MAAM,CAC9B"}
+{"version":3,"file":"ComboboxOption.js","names":[],"sources":["../../../src/components/combobox/ComboboxOption.tsx"],"sourcesContent":["import { ComboboxOption as BaseComboboxOption } from '@reach/combobox'\n\nimport { styled } from '../../styled'\n\nexport const ComboboxOption = styled(\n  BaseComboboxOption,\n  {\n    base: [\n      'text-default',\n      'cursor-pointer',\n      'm-0',\n      'p-2',\n      'hover:bg-hover',\n      'hover:rounded-sm',\n      'aria-selected:bg-hover',\n      'aria-selected:rounded-sm',\n      'data-user-value:text-accent'\n    ]\n  },\n  { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,mBAAiB,OAC5B,gBACA,EACE,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,GACA,EAAE,oBAAoB,MAAM,CAC9B"}

package/dist/components/combobox/ComboboxPopover.d.ts

@@ -1 +1,4 @@
-export declare const ComboboxPopover: import("../..").StyledComponent<import("@reach/utils/polymorphic/dist/reach-utils-polymorphic.cjs").ForwardRefComponent<"div", import("@reach/combobox").ComboboxPopoverProps & Partial<import("@reach/popover").PopoverProps>>, unknown>;
+import * as React from 'react';
+declare const StyledPopover: import("../..").StyledComponent<import("@reach/utils/polymorphic/dist/reach-utils-polymorphic.cjs").ForwardRefComponent<"div", import("@reach/combobox").ComboboxPopoverProps & Partial<import("@reach/popover").PopoverProps>>, unknown>;
+export declare const ComboboxPopover: ({ children, ...rest }: React.ComponentProps<typeof StyledPopover>) => React.JSX.Element;
+export {};

package/dist/components/combobox/ComboboxPopover.js

@@ -1,19 +1,28 @@
 import { styled } from "../../styled.js";
+import { ThemePortalScope } from "../../experiments/theme/Theme.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
 import { ComboboxPopover } from "@reach/combobox";
 //#region src/components/combobox/ComboboxPopover.tsx
-var ComboboxPopover$1 = styled(ComboboxPopover, { base: [
-	"bg-white",
-	"border",
-	"border-grey-200",
-	"rounded-md",
-	"shadow-md",
-	"box-border",
+var StyledPopover = styled(ComboboxPopover, { base: [
 	"font-body",
 	"text-md",
 	"outline-none",
-	"p-1",
 	"translate-y-2"
 ] }, { enablePolymorphism: false });
+var StyledSurface = styled("div", { base: [
+	"bg-surface-overlay",
+	"border",
+	"border-subtle",
+	"rounded-md",
+	"shadow-(--shadow-floating-md)",
+	"box-border",
+	"p-1"
+] });
+var ComboboxPopover$1 = ({ children, ...rest }) => /* @__PURE__ */ jsx(StyledPopover, {
+	...rest,
+	children: /* @__PURE__ */ jsx(ThemePortalScope, { children: /* @__PURE__ */ jsx(StyledSurface, { children }) })
+});
 //#endregion
 export { ComboboxPopover$1 as ComboboxPopover };
 

package/dist/components/combobox/ComboboxPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboboxPopover.js","names":[],"sources":["../../../src/components/combobox/ComboboxPopover.tsx"],"sourcesContent":["import { ComboboxPopover as BaseComboboxPopover } from '@reach/combobox'\n\nimport { styled } from '../../styled'\n\nexport const ComboboxPopover = styled(\n  BaseComboboxPopover,\n  {\n    base: [\n      'bg-white',\n      'border',\n      'border-grey-200',\n      'rounded-md',\n      'shadow-md',\n      'box-border',\n      'font-body',\n      'text-md',\n      'outline-none',\n      'p-1',\n      'translate-y-2'\n    ]\n  },\n  { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,oBAAkB,OAC7B,iBACA,EACE,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,GACA,EAAE,oBAAoB,MAAM,CAC9B"}
+{"version":3,"file":"ComboboxPopover.js","names":[],"sources":["../../../src/components/combobox/ComboboxPopover.tsx"],"sourcesContent":["import { ComboboxPopover as BaseComboboxPopover } from '@reach/combobox'\nimport * as React from 'react'\n\nimport { ThemePortalScope } from '../../experiments/theme/Theme'\nimport { styled } from '../../styled'\n\nconst StyledPopover = styled(\n  BaseComboboxPopover,\n  {\n    base: ['font-body', 'text-md', 'outline-none', 'translate-y-2']\n  },\n  { enablePolymorphism: false }\n)\n\n// Reach portals the popover element itself, outside any nested <Theme>, so\n// the surface styles live inside ThemePortalScope where the theme applies.\nconst StyledSurface = styled('div', {\n  base: [\n    'bg-surface-overlay',\n    'border',\n    'border-subtle',\n    'rounded-md',\n    'shadow-(--shadow-floating-md)',\n    'box-border',\n    'p-1'\n  ]\n})\n\nexport const ComboboxPopover = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledPopover>) => (\n  <StyledPopover {...rest}>\n    <ThemePortalScope>\n      <StyledSurface>{children}</StyledSurface>\n    </ThemePortalScope>\n  </StyledPopover>\n)\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,OACpB,iBACA,EACE,MAAM;CAAC;CAAa;CAAW;CAAgB;AAAe,EAChE,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAIA,IAAM,gBAAgB,OAAO,OAAO,EAClC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,qBAAmB,EAC9B,UACA,GAAG,WAEH,oBAAC,eAAD;CAAe,GAAI;WACjB,oBAAC,kBAAD,EAAA,UACE,oBAAC,eAAD,EAAgB,SAAwB,CAAA,EACxB,CAAA;AACL,CAAA"}

package/dist/components/create-password-field/CreatePasswordField.js

@@ -6,9 +6,9 @@ import invariant from "tiny-invariant";
 import { throttle } from "throttle-debounce";
 import { useFormContext } from "react-hook-form";
 //#region src/components/create-password-field/CreatePasswordField.tsx
-var getMessageTheme = (result, isFocused) => {
+var getMessageTone = (result, isFocused) => {
 	if (result) return "success";
-	return isFocused ? "neutral" : "error";
+	return isFocused ? void 0 : "danger";
 };
 var CreatePasswordField = ({ validate, defaultValidation, messageDirection = "row", label = "Create a password", name = "password", className, validation, appearance, ...rest }) => {
 	const { formState, control } = useFormContext();
@@ -45,7 +45,7 @@ var CreatePasswordField = ({ validate, defaultValidation, messageDirection = "ro
 			style: { "--direction": messageDirection },
 			className: "direction-(--direction) mt-2 flex flex-wrap gap-2",
 			children: Object.entries(validationResult).map(([message, result]) => /* @__PURE__ */ jsx(InlineMessage, {
-				theme: getMessageTheme(result, isFocused),
+				tone: getMessageTone(result, isFocused),
 				children: message
 			}, message))
 		})]

package/dist/components/create-password-field/CreatePasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreatePasswordField.js","names":[],"sources":["../../../src/components/create-password-field/CreatePasswordField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { throttle } from 'throttle-debounce'\nimport invariant from 'tiny-invariant'\n\nimport type { Override } from '../../utilities/types'\nimport type { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { PasswordField } from '../password-field/PasswordField'\nimport { PasswordInput } from '../password-input/PasswordInput'\n\ntype ValidationResult = Record<string, boolean>\n\nconst getMessageTheme = (result: boolean, isFocused: boolean) => {\n  if (result) return 'success'\n\n  return isFocused ? 'neutral' : 'error'\n}\n\ntype CreatePasswordFieldProps = Override<\n  React.ComponentProps<typeof PasswordInput> & FieldElementWrapperProps,\n  {\n    label?: string\n    name?: string\n    validate: (\n      password: string\n    ) => Promise<ValidationResult | undefined> | ValidationResult\n    defaultValidation: ValidationResult\n    messageDirection?: 'row' | 'column'\n  }\n>\n\nexport const CreatePasswordField = ({\n  validate,\n  defaultValidation,\n  messageDirection = 'row',\n  label = 'Create a password',\n  name = 'password',\n  className,\n  validation,\n  appearance,\n  ...rest\n}: CreatePasswordFieldProps) => {\n  const { formState, control } = useFormContext()\n  const [isFocused, setIsFocused] = React.useState<boolean>(false)\n  const [validationResult, setValidationResult] =\n    React.useState<ValidationResult>(defaultValidation)\n\n  const touched: boolean = formState.touched[name]\n  const error =\n    formState.errors[name]?.type === 'validate' ||\n    Object.values(validationResult).every((isValid) => !isValid)\n\n  const validatePassword = React.useCallback(\n    async (password: string) => {\n      const result = await validate(password)\n\n      if (result) {\n        invariant(\n          typeof result === 'object',\n          'The validate function must return an object'\n        )\n\n        setValidationResult(result)\n        return Object.values(result).every((isValid) => isValid)\n      }\n\n      return false\n    },\n    [setValidationResult]\n  )\n\n  // useMemo, not useCallback(throttle(...)): the throttler must survive\n  // re-renders or its timing window resets every render.\n  const handleChange = React.useMemo(\n    () => throttle(500, validatePassword),\n    [validatePassword]\n  )\n\n  const showValidation: boolean =\n    (control.mode.isOnBlur && (isFocused || touched)) ||\n    (control.mode.isOnSubmit && (isFocused || (formState.isSubmitted && error)))\n\n  return (\n    <div className={className}>\n      <PasswordField\n        label={label}\n        name={name}\n        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n          handleChange(e.target.value)\n        }\n        onBlur={() => setIsFocused(false)}\n        onFocus={() => setIsFocused(true)}\n        validation={{ ...validation, validate: validatePassword }}\n        appearance={appearance}\n        {...rest}\n      />\n      {showValidation && (\n        <div\n          style={{ '--direction': messageDirection }}\n          className=\"direction-(--direction) mt-2 flex flex-wrap gap-2\"\n        >\n          {Object.entries(validationResult).map(([message, result]) => (\n            <InlineMessage\n              key={message}\n              theme={getMessageTheme(result, isFocused)}\n            >\n              {message}\n            </InlineMessage>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nCreatePasswordField.displayName = 'CreatePasswordField'\n"],"mappings":";;;;;;;;AAaA,IAAM,mBAAmB,QAAiB,cAAuB;CAC/D,IAAI,QAAQ,OAAO;CAEnB,OAAO,YAAY,YAAY;AACjC;AAeA,IAAa,uBAAuB,EAClC,UACA,mBACA,mBAAmB,OACnB,QAAQ,qBACR,OAAO,YACP,WACA,YACA,YACA,GAAG,WAC2B;CAC9B,MAAM,EAAE,WAAW,YAAY,eAAe;CAC9C,MAAM,CAAC,WAAW,gBAAgB,QAAM,SAAkB,KAAK;CAC/D,MAAM,CAAC,kBAAkB,uBACvB,QAAM,SAA2B,iBAAiB;CAEpD,MAAM,UAAmB,UAAU,QAAQ;CAC3C,MAAM,QACJ,UAAU,OAAO,KAAK,EAAE,SAAS,cACjC,OAAO,OAAO,gBAAgB,CAAC,CAAC,OAAO,YAAY,CAAC,OAAO;CAE7D,MAAM,mBAAmB,QAAM,YAC7B,OAAO,aAAqB;EAC1B,MAAM,SAAS,MAAM,SAAS,QAAQ;EAEtC,IAAI,QAAQ;GACV,UACE,OAAO,WAAW,UAClB,6CACF;GAEA,oBAAoB,MAAM;GAC1B,OAAO,OAAO,OAAO,MAAM,CAAC,CAAC,OAAO,YAAY,OAAO;EACzD;EAEA,OAAO;CACT,GACA,CAAC,mBAAmB,CACtB;CAIA,MAAM,eAAe,QAAM,cACnB,SAAS,KAAK,gBAAgB,GACpC,CAAC,gBAAgB,CACnB;CAEA,MAAM,iBACH,QAAQ,KAAK,aAAa,aAAa,YACvC,QAAQ,KAAK,eAAe,aAAc,UAAU,eAAe;CAEtE,OACE,qBAAC,OAAD;EAAgB;YAAhB,CACE,oBAAC,eAAD;GACS;GACD;GACN,WAAW,MACT,aAAa,EAAE,OAAO,KAAK;GAE7B,cAAc,aAAa,KAAK;GAChC,eAAe,aAAa,IAAI;GAChC,YAAY;IAAE,GAAG;IAAY,UAAU;GAAiB;GAC5C;GACZ,GAAI;EACL,CAAA,GACA,kBACC,oBAAC,OAAD;GACE,OAAO,EAAE,eAAe,iBAAiB;GACzC,WAAU;aAET,OAAO,QAAQ,gBAAgB,CAAC,CAAC,KAAK,CAAC,SAAS,YAC/C,oBAAC,eAAD;IAEE,OAAO,gBAAgB,QAAQ,SAAS;cAEvC;GACY,GAJR,OAIQ,CAChB;EACE,CAAA,CAEJ;;AAET;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"CreatePasswordField.js","names":[],"sources":["../../../src/components/create-password-field/CreatePasswordField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { throttle } from 'throttle-debounce'\nimport invariant from 'tiny-invariant'\n\nimport type { Override } from '../../utilities/types'\nimport type { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { PasswordField } from '../password-field/PasswordField'\nimport { PasswordInput } from '../password-input/PasswordInput'\n\ntype ValidationResult = Record<string, boolean>\n\nconst getMessageTone = (result: boolean, isFocused: boolean) => {\n  if (result) return 'success'\n\n  return isFocused ? undefined : 'danger'\n}\n\ntype CreatePasswordFieldProps = Override<\n  React.ComponentProps<typeof PasswordInput> & FieldElementWrapperProps,\n  {\n    label?: string\n    name?: string\n    validate: (\n      password: string\n    ) => Promise<ValidationResult | undefined> | ValidationResult\n    defaultValidation: ValidationResult\n    messageDirection?: 'row' | 'column'\n  }\n>\n\nexport const CreatePasswordField = ({\n  validate,\n  defaultValidation,\n  messageDirection = 'row',\n  label = 'Create a password',\n  name = 'password',\n  className,\n  validation,\n  appearance,\n  ...rest\n}: CreatePasswordFieldProps) => {\n  const { formState, control } = useFormContext()\n  const [isFocused, setIsFocused] = React.useState<boolean>(false)\n  const [validationResult, setValidationResult] =\n    React.useState<ValidationResult>(defaultValidation)\n\n  const touched: boolean = formState.touched[name]\n  const error =\n    formState.errors[name]?.type === 'validate' ||\n    Object.values(validationResult).every((isValid) => !isValid)\n\n  const validatePassword = React.useCallback(\n    async (password: string) => {\n      const result = await validate(password)\n\n      if (result) {\n        invariant(\n          typeof result === 'object',\n          'The validate function must return an object'\n        )\n\n        setValidationResult(result)\n        return Object.values(result).every((isValid) => isValid)\n      }\n\n      return false\n    },\n    [setValidationResult]\n  )\n\n  // useMemo, not useCallback(throttle(...)): the throttler must survive\n  // re-renders or its timing window resets every render.\n  const handleChange = React.useMemo(\n    () => throttle(500, validatePassword),\n    [validatePassword]\n  )\n\n  const showValidation: boolean =\n    (control.mode.isOnBlur && (isFocused || touched)) ||\n    (control.mode.isOnSubmit && (isFocused || (formState.isSubmitted && error)))\n\n  return (\n    <div className={className}>\n      <PasswordField\n        label={label}\n        name={name}\n        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>\n          handleChange(e.target.value)\n        }\n        onBlur={() => setIsFocused(false)}\n        onFocus={() => setIsFocused(true)}\n        validation={{ ...validation, validate: validatePassword }}\n        appearance={appearance}\n        {...rest}\n      />\n      {showValidation && (\n        <div\n          style={{ '--direction': messageDirection }}\n          className=\"direction-(--direction) mt-2 flex flex-wrap gap-2\"\n        >\n          {Object.entries(validationResult).map(([message, result]) => (\n            <InlineMessage\n              key={message}\n              tone={getMessageTone(result, isFocused)}\n            >\n              {message}\n            </InlineMessage>\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n\nCreatePasswordField.displayName = 'CreatePasswordField'\n"],"mappings":";;;;;;;;AAaA,IAAM,kBAAkB,QAAiB,cAAuB;CAC9D,IAAI,QAAQ,OAAO;CAEnB,OAAO,YAAY,KAAA,IAAY;AACjC;AAeA,IAAa,uBAAuB,EAClC,UACA,mBACA,mBAAmB,OACnB,QAAQ,qBACR,OAAO,YACP,WACA,YACA,YACA,GAAG,WAC2B;CAC9B,MAAM,EAAE,WAAW,YAAY,eAAe;CAC9C,MAAM,CAAC,WAAW,gBAAgB,QAAM,SAAkB,KAAK;CAC/D,MAAM,CAAC,kBAAkB,uBACvB,QAAM,SAA2B,iBAAiB;CAEpD,MAAM,UAAmB,UAAU,QAAQ;CAC3C,MAAM,QACJ,UAAU,OAAO,KAAK,EAAE,SAAS,cACjC,OAAO,OAAO,gBAAgB,CAAC,CAAC,OAAO,YAAY,CAAC,OAAO;CAE7D,MAAM,mBAAmB,QAAM,YAC7B,OAAO,aAAqB;EAC1B,MAAM,SAAS,MAAM,SAAS,QAAQ;EAEtC,IAAI,QAAQ;GACV,UACE,OAAO,WAAW,UAClB,6CACF;GAEA,oBAAoB,MAAM;GAC1B,OAAO,OAAO,OAAO,MAAM,CAAC,CAAC,OAAO,YAAY,OAAO;EACzD;EAEA,OAAO;CACT,GACA,CAAC,mBAAmB,CACtB;CAIA,MAAM,eAAe,QAAM,cACnB,SAAS,KAAK,gBAAgB,GACpC,CAAC,gBAAgB,CACnB;CAEA,MAAM,iBACH,QAAQ,KAAK,aAAa,aAAa,YACvC,QAAQ,KAAK,eAAe,aAAc,UAAU,eAAe;CAEtE,OACE,qBAAC,OAAD;EAAgB;YAAhB,CACE,oBAAC,eAAD;GACS;GACD;GACN,WAAW,MACT,aAAa,EAAE,OAAO,KAAK;GAE7B,cAAc,aAAa,KAAK;GAChC,eAAe,aAAa,IAAI;GAChC,YAAY;IAAE,GAAG;IAAY,UAAU;GAAiB;GAC5C;GACZ,GAAI;EACL,CAAA,GACA,kBACC,oBAAC,OAAD;GACE,OAAO,EAAE,eAAe,iBAAiB;GACzC,WAAU;aAET,OAAO,QAAQ,gBAAgB,CAAC,CAAC,KAAK,CAAC,SAAS,YAC/C,oBAAC,eAAD;IAEE,MAAM,eAAe,QAAQ,SAAS;cAErC;GACY,GAJR,OAIQ,CAChB;EACE,CAAA,CAEJ;;AAET;AAEA,oBAAoB,cAAc"}

package/dist/components/data-table/DataTable.d.ts

@@ -40,7 +40,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
     /**
      * Used in place of `DataTable.Table` to render a table with rows that the user can sort by drag-and-drop
      */
-    DragAndDropTable: ({ idColumn, onDragAndDrop, sortable, striped, theme, className, ...rest }: Omit<{
+    DragAndDropTable: ({ idColumn, onDragAndDrop, sortable, striped, appearance, className, ...rest }: Omit<{
         size?: "lg" | "md" | "xl" | undefined;
         corners?: "round" | "square" | undefined;
     } & {
@@ -51,17 +51,17 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         scrollContainerkey?: string;
         maxRowDepth?: number;
     }, "children" | "numberOfStickyColumns"> & Partial<Pick<Omit<{
-        theme?: "light" | "primary" | "primaryDark" | "primaryLight" | "white" | undefined;
+        appearance?: "emphasis" | "inset" | "surface" | undefined;
         isSticky?: boolean | undefined;
     } & {
         as?: never;
-    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "as" | "isSticky" | "theme">, "children"> & {
+    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "appearance" | "as" | "isSticky">, "children"> & {
         sortable?: boolean;
         isSticky?: boolean;
         stickyOffset?: number;
         showTotalInFirstColumn?: boolean;
         totalSuffix?: string;
-    }, "sortable" | "theme">> & Partial<Pick<{
+    }, "appearance" | "sortable">> & Partial<Pick<{
         striped?: boolean | undefined;
     } & {
         as?: never;
@@ -113,7 +113,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         size?: "lg" | "md" | "sm" | "xl" | undefined;
         state?: "error" | undefined;
         appearance?: "modern" | "standard" | undefined;
-        theme?: "grey" | "white" | undefined;
+        fill?: "subtle" | "surface" | undefined;
         disabled?: boolean;
         name?: string;
         readOnly?: boolean;
@@ -137,12 +137,12 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * If you need more customisation options, you can build your own implementation
      * with `useDataTable` and the UI-only `Table` components.
      */
-    Head: ({ sortable, theme, isSticky, stickyOffset, showTotalInFirstColumn, totalSuffix, style, className, ...rest }: Omit<{
-        theme?: "light" | "primary" | "primaryDark" | "primaryLight" | "white" | undefined;
+    Head: ({ sortable, appearance, isSticky, stickyOffset, showTotalInFirstColumn, totalSuffix, style, className, ...rest }: Omit<{
+        appearance?: "emphasis" | "inset" | "surface" | undefined;
         isSticky?: boolean | undefined;
     } & {
         as?: never;
-    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "as" | "isSticky" | "theme">, "children"> & {
+    } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "appearance" | "as" | "isSticky">, "children"> & {
         sortable?: boolean;
         isSticky?: boolean;
         stickyOffset?: number;
@@ -180,11 +180,9 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      *
      */
     Pagination: {
-        ({ colorScheme, ...rest }: {
+        (props: {
             as?: never;
-        } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "as"> & {
-            colorScheme?: import("../..").TcolorScheme;
-        }): import("react").JSX.Element | null;
+        } & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "as">): import("react").JSX.Element | null;
         displayName: string;
     };
     /** Default row implementation for `DataTable`
@@ -202,7 +200,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * scratch with `useDataTable` and the UI-only `Table` components.
      *
      */
-    Table: ({ sortable, striped, theme, className, scrollOptions, rowAction, withContainer, ...rest }: import("./DataTableTable").DataTableTableProps) => React.JSX.Element | null;
+    Table: ({ sortable, striped, appearance, className, scrollOptions, rowAction, withContainer, ...rest }: import("./DataTableTable").DataTableTableProps) => React.JSX.Element | null;
     /** Default loading implementation for remote data
      *
      * Renders a loading component while fetching the paginated data using `getAsyncData`.

package/dist/components/data-table/DataTableBulkActions.js

@@ -17,7 +17,7 @@ var StyledContainer = styled("div", {
 		"min-h-16",
 		"rounded-t-sm"
 	],
-	variants: { isRowSelected: { true: ["bg-primary-100"] } }
+	variants: { isRowSelected: { true: ["bg-accent-subtle"] } }
 });
 var BulkActionsDefaultActions = ({ children }) => {
 	const { rowSelection } = useDataTable();
@@ -35,7 +35,7 @@ var BulkActionsSelectedRowActions = ({ cancelLabel = "Cancel", children }) => {
 			className: "mx-4"
 		}),
 		/* @__PURE__ */ jsx(Button, {
-			theme: "neutral",
+			appearance: "outline",
 			onClick: handleDeselectAllPageRows,
 			children: cancelLabel
 		})

package/dist/components/data-table/DataTableBulkActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableBulkActions.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Button } from '../button/Button'\nimport { Divider } from '../divider/Divider'\nimport { useDataTable } from './DataTable.context'\nimport { DataTableMetaData } from './DataTableMetaData'\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'p-2',\n    'w-full',\n    'mb-2',\n    'justify-between',\n    'items-center',\n    'min-h-16',\n    'rounded-t-sm'\n  ],\n  variants: {\n    isRowSelected: {\n      true: ['bg-primary-100']\n    }\n  }\n})\n\nconst BulkActionsDefaultActions = ({\n  children\n}: {\n  children: React.ReactElement<unknown>\n}): React.ReactElement<unknown> | null => {\n  const { rowSelection } = useDataTable()\n\n  if (Object.keys(rowSelection || {}).length > 0) return null\n\n  return children\n}\n\nconst BulkActionsSelectedRowActions = ({\n  cancelLabel = 'Cancel',\n  children\n}: {\n  cancelLabel?: string\n  children: React.ReactNode\n}) => {\n  const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n  const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n  if (Object.keys(rowSelection || {}).length === 0) return null\n\n  return (\n    <>\n      {children}\n      {React.Children.count(children) > 0 && (\n        <Divider orientation=\"vertical\" className=\"mx-4\" />\n      )}\n      <Button theme=\"neutral\" onClick={handleDeselectAllPageRows}>\n        {cancelLabel}\n      </Button>\n    </>\n  )\n}\n\nexport const DataTableBulkActions = /* @__PURE__ */ Object.assign(\n  ({\n    children,\n    ...rest\n  }: {\n    children:\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsDefaultActions>\n        >\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsSelectedRowActions>\n        >\n      | [\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsDefaultActions>\n          >,\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsSelectedRowActions>\n          >\n        ]\n  }) => {\n    const { rowSelection } = useDataTable()\n\n    const isRowSelected = Object.keys(rowSelection || {}).length > 0\n\n    return (\n      <StyledContainer isRowSelected={isRowSelected} {...rest}>\n        <DataTableMetaData />\n        <div className=\"flex items-center justify-end\">{children}</div>\n      </StyledContainer>\n    )\n  },\n  {\n    DefaultActions: BulkActionsDefaultActions,\n    SelectedRowActions: BulkActionsSelectedRowActions\n  }\n)\n"],"mappings":";;;;;;;;AAQA,IAAM,kBAAkB,OAAO,OAAO;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,eAAe,EACb,MAAM,CAAC,gBAAgB,EACzB,EACF;AACF,CAAC;AAED,IAAM,6BAA6B,EACjC,eAGwC;CACxC,MAAM,EAAE,iBAAiB,aAAa;CAEtC,IAAI,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,OAAO;CAEvD,OAAO;AACT;AAEA,IAAM,iCAAiC,EACrC,cAAc,UACd,eAII;CACJ,MAAM,EAAE,2BAA2B,iBAAiB,aAAa;CAEjE,MAAM,kCAAkC,0BAA0B,KAAK;CAEvE,IAAI,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,OAAO;CAEzD,OACE,qBAAA,UAAA,EAAA,UAAA;EACG;EACA,QAAM,SAAS,MAAM,QAAQ,IAAI,KAChC,oBAAC,SAAD;GAAS,aAAY;GAAW,WAAU;EAAQ,CAAA;EAEpD,oBAAC,QAAD;GAAQ,OAAM;GAAU,SAAS;aAC9B;EACK,CAAA;CACR,EAAA,CAAA;AAEN;AAEA,IAAa,uBAAuC,uBAAO,QACxD,EACC,UACA,GAAG,WAiBC;CACJ,MAAM,EAAE,iBAAiB,aAAa;CAItC,OACE,qBAAC,iBAAD;EAAgC,eAHZ,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS;EAGd,GAAI;YAAnD,CACE,oBAAC,mBAAD,CAAoB,CAAA,GACpB,oBAAC,OAAD;GAAK,WAAU;GAAiC;EAAc,CAAA,CAC/C;;AAErB,GACA;CACE,gBAAgB;CAChB,oBAAoB;AACtB,CACF"}
+{"version":3,"file":"DataTableBulkActions.js","names":[],"sources":["../../../src/components/data-table/DataTableBulkActions.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Button } from '../button/Button'\nimport { Divider } from '../divider/Divider'\nimport { useDataTable } from './DataTable.context'\nimport { DataTableMetaData } from './DataTableMetaData'\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'p-2',\n    'w-full',\n    'mb-2',\n    'justify-between',\n    'items-center',\n    'min-h-16',\n    'rounded-t-sm'\n  ],\n  variants: {\n    isRowSelected: {\n      true: ['bg-accent-subtle']\n    }\n  }\n})\n\nconst BulkActionsDefaultActions = ({\n  children\n}: {\n  children: React.ReactElement<unknown>\n}): React.ReactElement<unknown> | null => {\n  const { rowSelection } = useDataTable()\n\n  if (Object.keys(rowSelection || {}).length > 0) return null\n\n  return children\n}\n\nconst BulkActionsSelectedRowActions = ({\n  cancelLabel = 'Cancel',\n  children\n}: {\n  cancelLabel?: string\n  children: React.ReactNode\n}) => {\n  const { toggleAllPageRowsSelected, rowSelection } = useDataTable()\n\n  const handleDeselectAllPageRows = () => toggleAllPageRowsSelected(false)\n\n  if (Object.keys(rowSelection || {}).length === 0) return null\n\n  return (\n    <>\n      {children}\n      {React.Children.count(children) > 0 && (\n        <Divider orientation=\"vertical\" className=\"mx-4\" />\n      )}\n      <Button appearance=\"outline\" onClick={handleDeselectAllPageRows}>\n        {cancelLabel}\n      </Button>\n    </>\n  )\n}\n\nexport const DataTableBulkActions = /* @__PURE__ */ Object.assign(\n  ({\n    children,\n    ...rest\n  }: {\n    children:\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsDefaultActions>\n        >\n      | React.ReactElement<\n          React.ComponentProps<typeof BulkActionsSelectedRowActions>\n        >\n      | [\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsDefaultActions>\n          >,\n          React.ReactElement<\n            React.ComponentProps<typeof BulkActionsSelectedRowActions>\n          >\n        ]\n  }) => {\n    const { rowSelection } = useDataTable()\n\n    const isRowSelected = Object.keys(rowSelection || {}).length > 0\n\n    return (\n      <StyledContainer isRowSelected={isRowSelected} {...rest}>\n        <DataTableMetaData />\n        <div className=\"flex items-center justify-end\">{children}</div>\n      </StyledContainer>\n    )\n  },\n  {\n    DefaultActions: BulkActionsDefaultActions,\n    SelectedRowActions: BulkActionsSelectedRowActions\n  }\n)\n"],"mappings":";;;;;;;;AAQA,IAAM,kBAAkB,OAAO,OAAO;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,eAAe,EACb,MAAM,CAAC,kBAAkB,EAC3B,EACF;AACF,CAAC;AAED,IAAM,6BAA6B,EACjC,eAGwC;CACxC,MAAM,EAAE,iBAAiB,aAAa;CAEtC,IAAI,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,OAAO;CAEvD,OAAO;AACT;AAEA,IAAM,iCAAiC,EACrC,cAAc,UACd,eAII;CACJ,MAAM,EAAE,2BAA2B,iBAAiB,aAAa;CAEjE,MAAM,kCAAkC,0BAA0B,KAAK;CAEvE,IAAI,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,WAAW,GAAG,OAAO;CAEzD,OACE,qBAAA,UAAA,EAAA,UAAA;EACG;EACA,QAAM,SAAS,MAAM,QAAQ,IAAI,KAChC,oBAAC,SAAD;GAAS,aAAY;GAAW,WAAU;EAAQ,CAAA;EAEpD,oBAAC,QAAD;GAAQ,YAAW;GAAU,SAAS;aACnC;EACK,CAAA;CACR,EAAA,CAAA;AAEN;AAEA,IAAa,uBAAuC,uBAAO,QACxD,EACC,UACA,GAAG,WAiBC;CACJ,MAAM,EAAE,iBAAiB,aAAa;CAItC,OACE,qBAAC,iBAAD;EAAgC,eAHZ,OAAO,KAAK,gBAAgB,CAAC,CAAC,CAAC,CAAC,SAAS;EAGd,GAAI;YAAnD,CACE,oBAAC,mBAAD,CAAoB,CAAA,GACpB,oBAAC,OAAD;GAAK,WAAU;GAAiC;EAAc,CAAA,CAC/C;;AAErB,GACA;CACE,gBAAgB;CAChB,oBAAoB;AACtB,CACF"}