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

package/dist/components/textarea/Textarea.js

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/tile/Tile.js

@@ -1,5 +1,4 @@
 import { styled } from "../../styled.js";
-import { ColorScheme } from "../../experiments/color-scheme/ColorScheme.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/tile/Tile.tsx
@@ -10,8 +9,8 @@ var StyledTile = styled("div", {
 		"flex-col",
 		"relative",
 		"border",
-		"bg-(--base-1)",
-		"text-(--foreground)",
+		"bg-surface",
+		"text-default",
 		"border-transparent"
 	],
 	variants: {
@@ -20,22 +19,29 @@ var StyledTile = styled("div", {
 			md: ["rounded-md"],
 			lg: ["rounded-xl"]
 		},
-		border: { true: ["border-(--base-3)"] },
-		diffused: { true: ["supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]", "supports-color-mix:backdrop-blur-sm"] }
-	}
+		border: { true: ["border-subtle"] },
+		fill: {
+			surface: [],
+			inset: ["bg-inset"],
+			accent: ["bg-accent-subtle"]
+		},
+		diffused: { true: ["supports-color-mix:bg-[color-mix(in_hsl,var(--background-color-surface)_70%,transparent)]", "supports-color-mix:backdrop-blur-sm"] }
+	},
+	compoundVariants: [{
+		fill: "inset",
+		border: true,
+		class: ["border-default"]
+	}, {
+		fill: "inset",
+		diffused: true,
+		class: ["supports-color-mix:bg-[color-mix(in_hsl,var(--background-color-inset)_70%,transparent)]"]
+	}]
 }, { enableResponsiveVariants: true });
-var Tile = (({ ref, children, borderRadius = "lg", colorScheme = {}, ...rest }) => /* @__PURE__ */ jsx(ColorScheme, {
-	asChild: true,
-	base: "grey1",
-	accent: "primary2",
-	interactive: "loContrast",
-	...colorScheme,
-	children: /* @__PURE__ */ jsx(StyledTile, {
-		ref,
-		borderRadius,
-		...rest,
-		children
-	})
+var Tile = (({ ref, children, borderRadius = "lg", ...rest }) => /* @__PURE__ */ jsx(StyledTile, {
+	ref,
+	borderRadius,
+	...rest,
+	children
 }));
 //#endregion
 export { StyledTile, Tile };

package/dist/components/tile/Tile.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tile.js","names":[],"sources":["../../../src/components/tile/Tile.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  ColorScheme,\n  type TcolorScheme\n} from '../../experiments/color-scheme/ColorScheme'\nimport { type PolymorphicComponent, styled } from '../../styled'\n\nexport const StyledTile = styled(\n  'div',\n  {\n    base: [\n      'box-border',\n      'flex',\n      'flex-col',\n      'relative',\n      'border',\n      'bg-(--base-1)',\n      'text-(--foreground)',\n      'border-transparent'\n    ],\n    variants: {\n      borderRadius: {\n        sm: ['rounded-sm'],\n        md: ['rounded-md'],\n        lg: ['rounded-xl']\n      },\n      border: {\n        true: ['border-(--base-3)']\n      },\n      diffused: {\n        true: [\n          'supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]',\n          'supports-color-mix:backdrop-blur-sm'\n        ]\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\n// Re-expose StyledTile's own props so Tile stays polymorphic (keeps `as`, e.g.\n// `<Tile as=\"a\" href>`). Typing with React.ComponentProps<typeof StyledTile>\n// would collapse to the default element and drop `as` (as?: never).\ntype StyledTileOwnProps =\n  typeof StyledTile extends PolymorphicComponent<infer _Element, infer OwnProps>\n    ? OwnProps\n    : never\n\ntype TileOwnProps = StyledTileOwnProps & { colorScheme?: TcolorScheme }\n\nexport const Tile = (({\n  ref,\n  children,\n  borderRadius = 'lg',\n  colorScheme = {},\n  ...rest\n}: React.ComponentProps<typeof StyledTile> & {\n  colorScheme?: TcolorScheme\n}) => (\n  <ColorScheme\n    asChild\n    base=\"grey1\"\n    accent=\"primary2\"\n    interactive=\"loContrast\"\n    {...colorScheme}\n  >\n    <StyledTile ref={ref} borderRadius={borderRadius} {...rest}>\n      {children}\n    </StyledTile>\n  </ColorScheme>\n)) as PolymorphicComponent<'div', TileOwnProps>\n"],"mappings":";;;;;AAQA,IAAa,aAAa,OACxB,OACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,cAAc;GACZ,IAAI,CAAC,YAAY;GACjB,IAAI,CAAC,YAAY;GACjB,IAAI,CAAC,YAAY;EACnB;EACA,QAAQ,EACN,MAAM,CAAC,mBAAmB,EAC5B;EACA,UAAU,EACR,MAAM,CACJ,wEACA,qCACF,EACF;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAYA,IAAa,SAAS,EACpB,KACA,UACA,eAAe,MACf,cAAc,CAAC,GACf,GAAG,WAIH,oBAAC,aAAD;CACE,SAAA;CACA,MAAK;CACL,QAAO;CACP,aAAY;CACZ,GAAI;WAEJ,oBAAC,YAAD;EAAiB;EAAmB;EAAc,GAAI;EACnD;CACS,CAAA;AACD,CAAA"}
+{"version":3,"file":"Tile.js","names":[],"sources":["../../../src/components/tile/Tile.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { type PolymorphicComponent, styled } from '../../styled'\n\nexport const StyledTile = styled(\n  'div',\n  {\n    base: [\n      'box-border',\n      'flex',\n      'flex-col',\n      'relative',\n      'border',\n      'bg-surface',\n      'text-default',\n      'border-transparent'\n    ],\n    variants: {\n      borderRadius: {\n        sm: ['rounded-sm'],\n        md: ['rounded-md'],\n        lg: ['rounded-xl']\n      },\n      border: {\n        true: ['border-subtle']\n      },\n      // inset: a sunken tile set into a white surface. accent: a tinted tile in\n      // the surrounding accent (wrap in <Theme accent> to pick the hue)\n      fill: {\n        surface: [],\n        inset: ['bg-inset'],\n        accent: ['bg-accent-subtle']\n      },\n      diffused: {\n        true: [\n          'supports-color-mix:bg-[color-mix(in_hsl,var(--background-color-surface)_70%,transparent)]',\n          'supports-color-mix:backdrop-blur-sm'\n        ]\n      }\n    },\n    compoundVariants: [\n      { fill: 'inset', border: true, class: ['border-default'] },\n      {\n        fill: 'inset',\n        diffused: true,\n        class: [\n          'supports-color-mix:bg-[color-mix(in_hsl,var(--background-color-inset)_70%,transparent)]'\n        ]\n      }\n    ]\n  },\n  { enableResponsiveVariants: true }\n)\n\n// Re-expose StyledTile's own props so Tile stays polymorphic (keeps `as`, e.g.\n// `<Tile as=\"a\" href>`). Typing with React.ComponentProps<typeof StyledTile>\n// would collapse to the default element and drop `as` (as?: never).\ntype StyledTileOwnProps =\n  typeof StyledTile extends PolymorphicComponent<infer _Element, infer OwnProps>\n    ? OwnProps\n    : never\n\nexport const Tile = (({\n  ref,\n  children,\n  borderRadius = 'lg',\n  ...rest\n}: React.ComponentProps<typeof StyledTile>) => (\n  <StyledTile ref={ref} borderRadius={borderRadius} {...rest}>\n    {children}\n  </StyledTile>\n)) as PolymorphicComponent<'div', StyledTileOwnProps>\n"],"mappings":";;;;AAIA,IAAa,aAAa,OACxB,OACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,cAAc;GACZ,IAAI,CAAC,YAAY;GACjB,IAAI,CAAC,YAAY;GACjB,IAAI,CAAC,YAAY;EACnB;EACA,QAAQ,EACN,MAAM,CAAC,eAAe,EACxB;EAGA,MAAM;GACJ,SAAS,CAAC;GACV,OAAO,CAAC,UAAU;GAClB,QAAQ,CAAC,kBAAkB;EAC7B;EACA,UAAU,EACR,MAAM,CACJ,6FACA,qCACF,EACF;CACF;CACA,kBAAkB,CAChB;EAAE,MAAM;EAAS,QAAQ;EAAM,OAAO,CAAC,gBAAgB;CAAE,GACzD;EACE,MAAM;EACN,UAAU;EACV,OAAO,CACL,yFACF;CACF,CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAUA,IAAa,SAAS,EACpB,KACA,UACA,eAAe,MACf,GAAG,WAEH,oBAAC,YAAD;CAAiB;CAAmB;CAAc,GAAI;CACnD;AACS,CAAA"}

package/dist/components/tile-interactive/TileInteractive.d.ts

@@ -3,15 +3,13 @@ import type { Override } from '../../utilities/types';
 declare const StyledTileInteractive: import("../..").PolymorphicComponent<import("../..").PolymorphicComponent<"div", {
     borderRadius?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
     border?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    fill?: ("accent" | "inset" | "surface" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "accent" | "inset" | "surface">>) | undefined;
     diffused?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
-} & {
-    colorScheme?: import("../..").TcolorScheme;
 }>, {
     borderRadius?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
     border?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    fill?: ("accent" | "inset" | "surface" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "accent" | "inset" | "surface">>) | undefined;
     diffused?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
-} & {
-    colorScheme?: import("../..").TcolorScheme;
 }>;
 type TileInteractiveProps = Override<React.ComponentProps<typeof StyledTileInteractive> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     href?: string;

package/dist/components/tile-interactive/TileInteractive.js

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 var StyledTileInteractive = styled(Tile, { base: [
 	"disabled:cursor-not-allowed",
 	"disabled:opacity-30",
-	"not-disabled:active:bg-(--base-2)",
+	"not-disabled:active:bg-active",
 	"not-disabled:after:absolute",
 	"not-disabled:after:duration-250",
 	"not-disabled:after:ease-out",
@@ -15,15 +15,16 @@ var StyledTileInteractive = styled(Tile, { base: [
 	"not-disabled:after:opacity-0",
 	"not-disabled:after:pointer-events-none",
 	"not-disabled:after:rounded-[inherit]",
-	"not-disabled:after:shadow-lg",
+	"not-disabled:after:shadow-(--shadow-floating-lg)",
 	"not-disabled:after:transition-opacity",
 	"not-disabled:cursor-pointer",
 	"not-disabled:duration-250",
 	"not-disabled:ease-in",
-	"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:z-1",
 	"not-disabled:hover:after:opacity-100",
 	"not-disabled:hover:-translate-y-0.5",

package/dist/components/tile-interactive/TileInteractive.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileInteractive.js","names":[],"sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\nimport { Tile } from '../tile/Tile'\n\nconst StyledTileInteractive = styled(Tile, {\n  base: [\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:bg-(--base-2)',\n    'not-disabled:after:absolute',\n    'not-disabled:after:duration-250',\n    'not-disabled:after:ease-out',\n    'not-disabled:after:inset-0',\n    'not-disabled:after:opacity-0',\n    'not-disabled:after:pointer-events-none',\n    'not-disabled:after:rounded-[inherit]',\n    'not-disabled:after:shadow-lg',\n    'not-disabled:after:transition-opacity',\n    'not-disabled:cursor-pointer',\n    'not-disabled:duration-250',\n    'not-disabled:ease-in',\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:after:opacity-100',\n    'not-disabled:hover:-translate-y-0.5',\n    'not-disabled:transition-transform',\n    'not-disabled:translate-y-0'\n  ]\n})\n\ntype TileInteractiveProps = Override<\n  React.ComponentProps<typeof StyledTileInteractive> &\n    React.ButtonHTMLAttributes<HTMLButtonElement> & {\n      href?: string\n      reloadDocument?: boolean\n    },\n  { as?: React.ElementType }\n>\n\nexport const TileInteractive = ({\n  ref,\n  onClick,\n  href,\n  type = 'button',\n  as,\n  reloadDocument,\n  ...rest\n}: TileInteractiveProps) => {\n  const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n  const isLink = !!href\n  const elementSpecificProps = isLink\n    ? {\n        as: as || routerLinkProps.as || 'a',\n        href,\n        onClick: undefined\n      }\n    : {\n        as: as || 'button',\n        type,\n        onClick\n      }\n\n  return <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n}\n"],"mappings":";;;;;;AAOA,IAAM,wBAAwB,OAAO,MAAM,EACzC,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;AAWD,IAAa,mBAAmB,EAC9B,KACA,SACA,MACA,OAAO,UACP,IACA,gBACA,GAAG,WACuB;CAC1B,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,eAAe,CAAC;CAEnE,MAAM,uBAAuB,CADb,CAAC,OAEb;EACE,IAAI,MAAM,gBAAgB,MAAM;EAChC;EACA,SAAS,KAAA;CACX,IACA;EACE,IAAI,MAAM;EACV;EACA;CACF;CAEJ,OAAO,oBAAC,uBAAD;EAAuB,GAAI;EAAM,GAAI;EAA2B;CAAM,CAAA;AAC/E"}
+{"version":3,"file":"TileInteractive.js","names":[],"sources":["../../../src/components/tile-interactive/TileInteractive.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\nimport { Tile } from '../tile/Tile'\n\nconst StyledTileInteractive = styled(Tile, {\n  base: [\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'not-disabled:active:bg-active',\n    'not-disabled:after:absolute',\n    'not-disabled:after:duration-250',\n    'not-disabled:after:ease-out',\n    'not-disabled:after:inset-0',\n    'not-disabled:after:opacity-0',\n    'not-disabled:after:pointer-events-none',\n    'not-disabled:after:rounded-[inherit]',\n    'not-disabled:after:shadow-(--shadow-floating-lg)',\n    'not-disabled:after:transition-opacity',\n    'not-disabled:cursor-pointer',\n    'not-disabled:duration-250',\n    'not-disabled:ease-in',\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:after:opacity-100',\n    'not-disabled:hover:-translate-y-0.5',\n    'not-disabled:transition-transform',\n    'not-disabled:translate-y-0'\n  ]\n})\n\ntype TileInteractiveProps = Override<\n  React.ComponentProps<typeof StyledTileInteractive> &\n    React.ButtonHTMLAttributes<HTMLButtonElement> & {\n      href?: string\n      reloadDocument?: boolean\n    },\n  { as?: React.ElementType }\n>\n\nexport const TileInteractive = ({\n  ref,\n  onClick,\n  href,\n  type = 'button',\n  as,\n  reloadDocument,\n  ...rest\n}: TileInteractiveProps) => {\n  const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n  const isLink = !!href\n  const elementSpecificProps = isLink\n    ? {\n        as: as || routerLinkProps.as || 'a',\n        href,\n        onClick: undefined\n      }\n    : {\n        as: as || 'button',\n        type,\n        onClick\n      }\n\n  return <StyledTileInteractive {...rest} {...elementSpecificProps} ref={ref} />\n}\n"],"mappings":";;;;;;AAOA,IAAM,wBAAwB,OAAO,MAAM,EACzC,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;CACA;AACF,EACF,CAAC;AAWD,IAAa,mBAAmB,EAC9B,KACA,SACA,MACA,OAAO,UACP,IACA,gBACA,GAAG,WACuB;CAC1B,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,eAAe,CAAC;CAEnE,MAAM,uBAAuB,CADb,CAAC,OAEb;EACE,IAAI,MAAM,gBAAgB,MAAM;EAChC;EACA,SAAS,KAAA;CACX,IACA;EACE,IAAI,MAAM;EACV;EACA;CACF;CAEJ,OAAO,oBAAC,uBAAD;EAAuB,GAAI;EAAM,GAAI;EAA2B;CAAM,CAAA;AAC/E"}

package/dist/components/tile-toggle-group/TileToggleGroupItem.d.ts

@@ -3,20 +3,18 @@ import * as React from 'react';
 declare const StyledTileToggleGroupItem: import("../..").PolymorphicComponent<({ ref, onClick, href, type, as, reloadDocument, ...rest }: Omit<{
     borderRadius?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
     border?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    fill?: ("accent" | "inset" | "surface" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "accent" | "inset" | "surface">>) | undefined;
     diffused?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
-} & {
-    colorScheme?: import("../..").TcolorScheme;
 } & {
     as?: never;
 } & Omit<{
     borderRadius?: ("lg" | "md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm">>) | undefined;
     border?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
+    fill?: ("accent" | "inset" | "surface" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "accent" | "inset" | "surface">>) | undefined;
     diffused?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
-} & {
-    colorScheme?: import("../..").TcolorScheme;
 } & {
     as?: never;
-} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "as" | "border" | "borderRadius" | "colorScheme" | "diffused">, "as" | "border" | "borderRadius" | "colorScheme" | "diffused"> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
+} & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "as" | "border" | "borderRadius" | "diffused" | "fill">, "as" | "border" | "borderRadius" | "diffused" | "fill"> & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     href?: string;
     reloadDocument?: boolean;
 }, "as"> & {

package/dist/components/tile-toggle-group/TileToggleGroupItem.js

@@ -6,15 +6,15 @@ import * as ToggleGroup from "@radix-ui/react-toggle-group";
 //#region src/components/tile-toggle-group/TileToggleGroupItem.tsx
 var StyledTileToggleGroupItem = styled(TileInteractive, { base: [
 	"text-left",
-	"not-disabled:data-[state=on]:active:bg-(--interactive-3)",
-	"not-disabled:data-[state=on]:hover:bg-(--interactive-2)",
+	"not-disabled:data-[state=on]:active:bg-accent-subtle-active",
+	"not-disabled:data-[state=on]:hover:bg-accent-subtle-hover",
 	"data-[state=on]:before:-inset-px",
 	"data-[state=on]:before:absolute",
 	"data-[state=on]:before:rounded-[inherit]",
-	"data-[state=on]:before:inset-shadow-[var(--accent-8)_0px_0px_0px_2px]",
+	"data-[state=on]:before:inset-shadow-[var(--border-color-accent-solid)_0px_0px_0px_2px]",
 	"data-[state=on]:before:z-1",
-	"data-[state=on]:bg-(--interactive-1)",
-	"data-[state=on]:border-(--accent-8)"
+	"data-[state=on]:bg-accent-subtle",
+	"data-[state=on]:border-accent-solid"
 ] });
 var TileToggleGroupItem = ({ children, ...rest }) => /* @__PURE__ */ jsx(ToggleGroup.Item, {
 	...rest,

package/dist/components/tile-toggle-group/TileToggleGroupItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"TileToggleGroupItem.js","names":[],"sources":["../../../src/components/tile-toggle-group/TileToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { TileInteractive } from '../tile-interactive/TileInteractive'\n\nconst StyledTileToggleGroupItem = styled(TileInteractive, {\n  base: [\n    'text-left',\n    'not-disabled:data-[state=on]:active:bg-(--interactive-3)',\n    'not-disabled:data-[state=on]:hover:bg-(--interactive-2)',\n    'data-[state=on]:before:-inset-px',\n    'data-[state=on]:before:absolute',\n    'data-[state=on]:before:rounded-[inherit]',\n    'data-[state=on]:before:inset-shadow-[var(--accent-8)_0px_0px_0px_2px]',\n    'data-[state=on]:before:z-1',\n    'data-[state=on]:bg-(--interactive-1)',\n    'data-[state=on]:border-(--accent-8)'\n  ]\n})\n\ntype TileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledTileToggleGroupItem>\n\nexport const TileToggleGroupItem = ({\n  children,\n  ...rest\n}: TileToggleGroupItem) => (\n  <ToggleGroup.Item {...rest} asChild>\n    <StyledTileToggleGroupItem as=\"button\">\n      {children}\n    </StyledTileToggleGroupItem>\n  </ToggleGroup.Item>\n)\n"],"mappings":";;;;;;AAMA,IAAM,4BAA4B,OAAO,iBAAiB,EACxD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAKD,IAAa,uBAAuB,EAClC,UACA,GAAG,WAEH,oBAAC,YAAY,MAAb;CAAkB,GAAI;CAAM,SAAA;WAC1B,oBAAC,2BAAD;EAA2B,IAAG;EAC3B;CACwB,CAAA;AACX,CAAA"}
+{"version":3,"file":"TileToggleGroupItem.js","names":[],"sources":["../../../src/components/tile-toggle-group/TileToggleGroupItem.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { TileInteractive } from '../tile-interactive/TileInteractive'\n\nconst StyledTileToggleGroupItem = styled(TileInteractive, {\n  base: [\n    'text-left',\n    'not-disabled:data-[state=on]:active:bg-accent-subtle-active',\n    'not-disabled:data-[state=on]:hover:bg-accent-subtle-hover',\n    'data-[state=on]:before:-inset-px',\n    'data-[state=on]:before:absolute',\n    'data-[state=on]:before:rounded-[inherit]',\n    'data-[state=on]:before:inset-shadow-[var(--border-color-accent-solid)_0px_0px_0px_2px]',\n    'data-[state=on]:before:z-1',\n    'data-[state=on]:bg-accent-subtle',\n    'data-[state=on]:border-accent-solid'\n  ]\n})\n\ntype TileToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n  React.ComponentProps<typeof StyledTileToggleGroupItem>\n\nexport const TileToggleGroupItem = ({\n  children,\n  ...rest\n}: TileToggleGroupItem) => (\n  <ToggleGroup.Item {...rest} asChild>\n    <StyledTileToggleGroupItem as=\"button\">\n      {children}\n    </StyledTileToggleGroupItem>\n  </ToggleGroup.Item>\n)\n"],"mappings":";;;;;;AAMA,IAAM,4BAA4B,OAAO,iBAAiB,EACxD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAKD,IAAa,uBAAuB,EAClC,UACA,GAAG,WAEH,oBAAC,YAAY,MAAb;CAAkB,GAAI;CAAM,SAAA;WAC1B,oBAAC,2BAAD;EAA2B,IAAG;EAC3B;CACwB,CAAA;AACX,CAAA"}

package/dist/components/toast/Toast.js

@@ -11,9 +11,11 @@ var StyledToast = styled("div", {
 		"items-center",
 		"pointer-events-auto",
 		"rounded-md",
-		"shadow-md",
+		"shadow-(--shadow-floating-md)",
+		"forced-colors:border",
+		"forced-colors:border-[CanvasText]",
 		"box-border",
-		"text-white",
+		"text-on-accent-emphasis",
 		"min-h-12",
 		"relative",
 		"px-4",
@@ -23,17 +25,25 @@ var StyledToast = styled("div", {
 		"motion-safe:transition-[colors,transform]"
 	],
 	variants: { type: {
-		loading: ["bg-info"],
-		blank: ["bg-info"],
-		success: ["bg-success"],
-		error: ["bg-danger"]
+		loading: ["bg-accent-emphasis"],
+		blank: ["bg-accent-emphasis"],
+		success: ["bg-accent-emphasis"],
+		error: ["bg-accent-emphasis"]
 	} }
 });
+var toastAccents = {
+	loading: "info",
+	blank: "info",
+	success: "success",
+	error: "danger"
+};
 var ToastComponent = (props) => {
 	const { type } = useToastContext();
 	const styledType = type === "custom" ? void 0 : type;
+	const resolvedType = props.type || styledType;
 	return /* @__PURE__ */ jsx(StyledToast, {
-		type: props.type || styledType,
+		type: resolvedType,
+		"data-color-accent": resolvedType && toastAccents[resolvedType],
 		...props
 	});
 };

package/dist/components/toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","names":[],"sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { useToastContext } from './Toast.context'\nimport { ToastCloseButton } from './ToastCloseButton'\nimport { ToastIcon } from './ToastIcon'\n\nexport const StyledToast = styled('div', {\n  base: [\n    'flex',\n    'items-center',\n    'pointer-events-auto',\n    'rounded-md',\n    'shadow-md',\n    'box-border',\n    'text-white',\n    'min-h-12',\n    'relative',\n    'px-4',\n    'py-1',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[colors,transform]'\n  ],\n  variants: {\n    type: {\n      loading: ['bg-info'],\n      blank: ['bg-info'],\n      success: ['bg-success'],\n      error: ['bg-danger']\n    }\n  }\n})\n\nconst ToastComponent = (props: React.ComponentProps<typeof StyledToast>) => {\n  const { type } = useToastContext()\n  const styledType = type === 'custom' ? undefined : type\n  return <StyledToast type={props.type || styledType} {...props} />\n}\n\nexport const Toast = /* @__PURE__ */ Object.assign(ToastComponent, {\n  Icon: ToastIcon,\n  Close: ToastCloseButton\n})\n"],"mappings":";;;;;;;AAOA,IAAa,cAAc,OAAO,OAAO;CACvC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,SAAS,CAAC,SAAS;EACnB,OAAO,CAAC,SAAS;EACjB,SAAS,CAAC,YAAY;EACtB,OAAO,CAAC,WAAW;CACrB,EACF;AACF,CAAC;AAED,IAAM,kBAAkB,UAAoD;CAC1E,MAAM,EAAE,SAAS,gBAAgB;CACjC,MAAM,aAAa,SAAS,WAAW,KAAA,IAAY;CACnD,OAAO,oBAAC,aAAD;EAAa,MAAM,MAAM,QAAQ;EAAY,GAAI;CAAQ,CAAA;AAClE;AAEA,IAAa,QAAwB,uBAAO,OAAO,gBAAgB;CACjE,MAAM;CACN,OAAO;AACT,CAAC"}
+{"version":3,"file":"Toast.js","names":[],"sources":["../../../src/components/toast/Toast.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { useToastContext } from './Toast.context'\nimport { ToastCloseButton } from './ToastCloseButton'\nimport { ToastIcon } from './ToastIcon'\n\nexport const StyledToast = styled('div', {\n  base: [\n    'flex',\n    'items-center',\n    'pointer-events-auto',\n    'rounded-md',\n    'shadow-(--shadow-floating-md)',\n    // Forced colours drop box-shadow, so the edge needs a real border\n    'forced-colors:border',\n    'forced-colors:border-[CanvasText]',\n    'box-border',\n    'text-on-accent-emphasis',\n    'min-h-12',\n    'relative',\n    'px-4',\n    'py-1',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[colors,transform]'\n  ],\n  variants: {\n    type: {\n      loading: ['bg-accent-emphasis'],\n      blank: ['bg-accent-emphasis'],\n      success: ['bg-accent-emphasis'],\n      error: ['bg-accent-emphasis']\n    }\n  }\n})\n\nconst toastAccents = {\n  loading: 'info',\n  blank: 'info',\n  success: 'success',\n  error: 'danger'\n}\n\nconst ToastComponent = (props: React.ComponentProps<typeof StyledToast>) => {\n  const { type } = useToastContext()\n  const styledType = type === 'custom' ? undefined : type\n  const resolvedType = props.type || styledType\n  return (\n    <StyledToast\n      type={resolvedType}\n      data-color-accent={resolvedType && toastAccents[resolvedType]}\n      {...props}\n    />\n  )\n}\n\nexport const Toast = /* @__PURE__ */ Object.assign(ToastComponent, {\n  Icon: ToastIcon,\n  Close: ToastCloseButton\n})\n"],"mappings":";;;;;;;AAOA,IAAa,cAAc,OAAO,OAAO;CACvC,MAAM;EACJ;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,SAAS,CAAC,oBAAoB;EAC9B,OAAO,CAAC,oBAAoB;EAC5B,SAAS,CAAC,oBAAoB;EAC9B,OAAO,CAAC,oBAAoB;CAC9B,EACF;AACF,CAAC;AAED,IAAM,eAAe;CACnB,SAAS;CACT,OAAO;CACP,SAAS;CACT,OAAO;AACT;AAEA,IAAM,kBAAkB,UAAoD;CAC1E,MAAM,EAAE,SAAS,gBAAgB;CACjC,MAAM,aAAa,SAAS,WAAW,KAAA,IAAY;CACnD,MAAM,eAAe,MAAM,QAAQ;CACnC,OACE,oBAAC,aAAD;EACE,MAAM;EACN,qBAAmB,gBAAgB,aAAa;EAChD,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,QAAwB,uBAAO,OAAO,gBAAgB;CACjE,MAAM;CACN,OAAO;AACT,CAAC"}

package/dist/components/toast/ToastCloseButton.js

@@ -16,7 +16,7 @@ var ToastCloseButton = ({ onDismiss, label = "Close alert", ...rest }) => {
 			onDismiss?.();
 		},
 		...rest,
-		className: cn("text-white", "-mr-2", "hover:opacity-80", "hover:text-white", "focus:opacity-80", "focus:text-white"),
+		className: cn("text-on-accent-emphasis", "-mr-2", "hover:opacity-80", "hover:text-on-accent-emphasis", "focus:opacity-80", "focus:text-on-accent-emphasis"),
 		children: /* @__PURE__ */ jsx(Icon, { is: Close })
 	});
 };

package/dist/components/toast/ToastCloseButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastCloseButton.js","names":[],"sources":["../../../src/components/toast/ToastCloseButton.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { toast } from 'react-hot-toast'\n\nimport { cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { useToastContext } from './Toast.context'\n\nexport interface ToastCloseButtonProps extends Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'label' | 'children'\n> {\n  onDismiss?: () => void\n  label?: string\n}\n\nexport const ToastCloseButton = ({\n  onDismiss,\n  label = 'Close alert',\n  ...rest\n}: ToastCloseButtonProps) => {\n  const { id } = useToastContext()\n\n  return (\n    <ActionIcon\n      label={label}\n      onClick={() => {\n        toast.dismiss(id)\n        onDismiss?.()\n      }}\n      {...rest}\n      className={cn(\n        'text-white',\n        '-mr-2',\n        'hover:opacity-80',\n        'hover:text-white',\n        'focus:opacity-80',\n        'focus:text-white'\n      )}\n    >\n      <Icon is={Close} />\n    </ActionIcon>\n  )\n}\n"],"mappings":";;;;;;;;;AAiBA,IAAa,oBAAoB,EAC/B,WACA,QAAQ,eACR,GAAG,WACwB;CAC3B,MAAM,EAAE,OAAO,gBAAgB;CAE/B,OACE,oBAAC,YAAD;EACS;EACP,eAAe;GACb,MAAM,QAAQ,EAAE;GAChB,YAAY;EACd;EACA,GAAI;EACJ,WAAW,GACT,cACA,SACA,oBACA,oBACA,oBACA,kBACF;YAEA,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;CACR,CAAA;AAEhB"}
+{"version":3,"file":"ToastCloseButton.js","names":[],"sources":["../../../src/components/toast/ToastCloseButton.tsx"],"sourcesContent":["import { Close } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { toast } from 'react-hot-toast'\n\nimport { cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { useToastContext } from './Toast.context'\n\nexport interface ToastCloseButtonProps extends Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'label' | 'children'\n> {\n  onDismiss?: () => void\n  label?: string\n}\n\nexport const ToastCloseButton = ({\n  onDismiss,\n  label = 'Close alert',\n  ...rest\n}: ToastCloseButtonProps) => {\n  const { id } = useToastContext()\n\n  return (\n    <ActionIcon\n      label={label}\n      onClick={() => {\n        toast.dismiss(id)\n        onDismiss?.()\n      }}\n      {...rest}\n      className={cn(\n        'text-on-accent-emphasis',\n        '-mr-2',\n        'hover:opacity-80',\n        'hover:text-on-accent-emphasis',\n        'focus:opacity-80',\n        'focus:text-on-accent-emphasis'\n      )}\n    >\n      <Icon is={Close} />\n    </ActionIcon>\n  )\n}\n"],"mappings":";;;;;;;;;AAiBA,IAAa,oBAAoB,EAC/B,WACA,QAAQ,eACR,GAAG,WACwB;CAC3B,MAAM,EAAE,OAAO,gBAAgB;CAE/B,OACE,oBAAC,YAAD;EACS;EACP,eAAe;GACb,MAAM,QAAQ,EAAE;GAChB,YAAY;EACd;EACA,GAAI;EACJ,WAAW,GACT,2BACA,SACA,oBACA,iCACA,oBACA,+BACF;YAEA,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;CACR,CAAA;AAEhB"}

package/dist/components/toggle-group/ToggleGroupButton.d.ts

@@ -3,7 +3,6 @@ import * as React from 'react';
 export declare const StyledButton: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<ToggleGroup.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>>, {
     size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
     isIconOnly?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
-    theme?: ("modern" | "standard" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "modern" | "standard">>) | undefined;
-    colorMode?: ("dark" | "light" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "dark" | "light">>) | undefined;
+    appearance?: ("modern" | "standard" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "modern" | "standard">>) | undefined;
 }>;
-export declare const ToggleGroupButton: ({ ref, size, theme, colorMode, children, ...rest }: React.ComponentProps<typeof StyledButton>) => React.JSX.Element;
+export declare const ToggleGroupButton: ({ ref, size, appearance, children, ...rest }: React.ComponentProps<typeof StyledButton>) => React.JSX.Element;

package/dist/components/toggle-group/ToggleGroupButton.js

@@ -1,6 +1,6 @@
 import { styled } from "../../styled.js";
 import { Icon } from "../icon/Icon.js";
-import { modernDarkVariant, modernVariant, standardDarkVariant, standardVariant } from "./ToggleGroupItem.js";
+import { modernVariant, standardVariant } from "./ToggleGroupItem.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import * as ToggleGroup from "@radix-ui/react-toggle-group";
@@ -46,26 +46,12 @@ var StyledButton = styled(ToggleGroup.Item, {
 			]
 		},
 		isIconOnly: { true: [] },
-		theme: {
+		appearance: {
 			standard: standardVariant,
 			modern: modernVariant
-		},
-		colorMode: {
-			light: [],
-			dark: []
 		}
 	},
 	compoundVariants: [
-		{
-			theme: "standard",
-			colorMode: "dark",
-			class: standardDarkVariant
-		},
-		{
-			theme: "modern",
-			colorMode: "dark",
-			class: modernDarkVariant
-		},
 		{
 			isIconOnly: true,
 			size: "xs",
@@ -89,33 +75,32 @@ var StyledButton = styled(ToggleGroup.Item, {
 		{
 			isIconOnly: true,
 			size: "sm",
-			theme: "modern",
+			appearance: "modern",
 			class: ["min-w-10", "p-0"]
 		},
 		{
 			isIconOnly: true,
 			size: "md",
-			theme: "modern",
+			appearance: "modern",
 			class: ["min-w-12", "p-0"]
 		},
 		{
 			isIconOnly: true,
 			size: "lg",
-			theme: "modern",
+			appearance: "modern",
 			class: ["min-w-15", "p-0"]
 		}
 	]
 }, { enableResponsiveVariants: true });
 var toIconSize = (size) => typeof size === "object" ? Object.fromEntries(Object.entries(size).map(([bp, s]) => [bp, s === "xs" ? "sm" : s])) : size === "xs" ? "sm" : size;
-var ToggleGroupButton = ({ ref, size = "md", theme = "standard", colorMode = "light", children, ...rest }) => {
+var ToggleGroupButton = ({ ref, size = "md", appearance = "standard", children, ...rest }) => {
 	const childrenArray = React$1.Children.toArray(children);
 	const isSingleChild = childrenArray.length <= 1;
 	return /* @__PURE__ */ jsx(StyledButton, {
 		ref,
 		size,
 		isIconOnly: isSingleChild && React$1.isValidElement(childrenArray[0]) && childrenArray[0]?.type === Icon,
-		theme,
-		colorMode,
+		appearance,
 		...rest,
 		children: childrenArray.map((child) => {
 			if (!isSingleChild && (typeof child === "string" || typeof child === "number")) return /* @__PURE__ */ jsx("span", { children: child }, child);

package/dist/components/toggle-group/ToggleGroupButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroupButton.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupButton.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport {\n  modernDarkVariant,\n  modernVariant,\n  standardDarkVariant,\n  standardVariant\n} from './ToggleGroupItem'\n\nexport const StyledButton = styled(\n  ToggleGroup.Item,\n  {\n    base: [\n      'cursor-pointer',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'grow',\n      'flex',\n      'items-center',\n      'justify-center',\n      'font-semibold',\n      'leading-none',\n      'py-1'\n    ],\n    variants: {\n      size: {\n        xs: ['*:not-last:mr-2', 'min-h-8', 'px-3', 'text-sm'],\n        sm: ['*:not-last:mr-2', 'min-h-8', 'px-4', 'text-sm'],\n        md: ['*:not-last:mr-3', 'min-h-10', 'px-8', 'text-md'],\n        lg: ['*:not-last:mr-3', 'min-h-12', 'px-8', 'text-lg']\n      },\n      isIconOnly: {\n        true: []\n      },\n      theme: {\n        standard: standardVariant,\n        modern: modernVariant\n      },\n      colorMode: {\n        light: [],\n        dark: []\n      }\n    },\n    compoundVariants: [\n      { theme: 'standard', colorMode: 'dark', class: standardDarkVariant },\n      { theme: 'modern', colorMode: 'dark', class: modernDarkVariant },\n      {\n        isIconOnly: true,\n        size: 'xs',\n        class: ['min-w-8', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'sm',\n        class: ['min-w-8', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'md',\n        class: ['min-w-10', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'lg',\n        class: ['min-w-12', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'sm',\n        theme: 'modern',\n        class: ['min-w-10', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'md',\n        theme: 'modern',\n        class: ['min-w-12', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'lg',\n        theme: 'modern',\n        class: ['min-w-15', 'p-0']\n      }\n    ]\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype ButtonSize = React.ComponentProps<typeof StyledButton>['size']\ntype IconSize = React.ComponentProps<typeof Icon>['size']\n\n// Icon has no xs; its sm is the 16px icon an xs tab needs. Size may be a\n// responsive object, so each breakpoint is mapped.\nconst toIconSize = (size: ButtonSize): IconSize =>\n  typeof size === 'object'\n    ? (Object.fromEntries(\n        Object.entries(size).map(([bp, s]) => [bp, s === 'xs' ? 'sm' : s])\n      ) as IconSize)\n    : size === 'xs'\n      ? 'sm'\n      : size\n\nexport const ToggleGroupButton = ({\n  ref,\n  size = 'md',\n  theme = 'standard',\n  colorMode = 'light',\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledButton>) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  const isIconOnly =\n    isSingleChild &&\n    React.isValidElement(childrenArray[0]) &&\n    childrenArray[0]?.type === Icon\n\n  return (\n    <StyledButton\n      ref={ref}\n      size={size}\n      isIconOnly={isIconOnly}\n      theme={theme}\n      colorMode={colorMode}\n      {...rest}\n    >\n      {\n        childrenArray.map((child) => {\n          if (\n            !isSingleChild &&\n            (typeof child === 'string' || typeof child === 'number')\n          )\n            return <span key={child}>{child}</span>\n          if (\n            React.isValidElement<React.ComponentPropsWithoutRef<typeof Icon>>(\n              child\n            )\n          ) {\n            if (child?.type === Icon)\n              return React.cloneElement(child, {\n                ...child.props,\n                size: toIconSize(size)\n              })\n          }\n          return child\n        }) as React.ReactElement<unknown>[]\n      }\n    </StyledButton>\n  )\n}\n"],"mappings":";;;;;;;AAYA,IAAa,eAAe,OAC1B,YAAY,MACZ;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAmB;IAAW;IAAQ;GAAS;GACpD,IAAI;IAAC;IAAmB;IAAW;IAAQ;GAAS;GACpD,IAAI;IAAC;IAAmB;IAAY;IAAQ;GAAS;GACrD,IAAI;IAAC;IAAmB;IAAY;IAAQ;GAAS;EACvD;EACA,YAAY,EACV,MAAM,CAAC,EACT;EACA,OAAO;GACL,UAAU;GACV,QAAQ;EACV;EACA,WAAW;GACT,OAAO,CAAC;GACR,MAAM,CAAC;EACT;CACF;CACA,kBAAkB;EAChB;GAAE,OAAO;GAAY,WAAW;GAAQ,OAAO;EAAoB;EACnE;GAAE,OAAO;GAAU,WAAW;GAAQ,OAAO;EAAkB;EAC/D;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,WAAW,KAAK;EAC1B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,WAAW,KAAK;EAC1B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO;GACP,OAAO,CAAC,YAAY,KAAK;EAC3B;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAOA,IAAM,cAAc,SAClB,OAAO,SAAS,WACX,OAAO,YACN,OAAO,QAAQ,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,IAAI,MAAM,OAAO,OAAO,CAAC,CAAC,CACnE,IACA,SAAS,OACP,OACA;AAER,IAAa,qBAAqB,EAChC,KACA,OAAO,MACP,QAAQ,YACR,YAAY,SACZ,UACA,GAAG,WAC4C;CAC/C,MAAM,gBAAgB,QAAM,SAAS,QAAQ,QAAQ;CACrD,MAAM,gBAAgB,cAAc,UAAU;CAM9C,OACE,oBAAC,cAAD;EACO;EACC;EACM,YARd,iBACA,QAAM,eAAe,cAAc,EAAE,KACrC,cAAc,EAAE,EAAE,SAAS;EAOlB;EACI;EACX,GAAI;YAGF,cAAc,KAAK,UAAU;GAC3B,IACE,CAAC,kBACA,OAAO,UAAU,YAAY,OAAO,UAAU,WAE/C,OAAO,oBAAC,QAAD,EAAA,UAAmB,MAAY,GAApB,KAAoB;GACxC,IACE,QAAM,eACJ,KACF;QAEI,OAAO,SAAS,MAClB,OAAO,QAAM,aAAa,OAAO;KAC/B,GAAG,MAAM;KACT,MAAM,WAAW,IAAI;IACvB,CAAC;GAAA;GAEL,OAAO;EACT,CAAC;CAES,CAAA;AAElB"}
+{"version":3,"file":"ToggleGroupButton.js","names":[],"sources":["../../../src/components/toggle-group/ToggleGroupButton.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { modernVariant, standardVariant } from './ToggleGroupItem'\n\nexport const StyledButton = styled(\n  ToggleGroup.Item,\n  {\n    base: [\n      'cursor-pointer',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'grow',\n      'flex',\n      'items-center',\n      'justify-center',\n      'font-semibold',\n      'leading-none',\n      'py-1'\n    ],\n    variants: {\n      size: {\n        xs: ['*:not-last:mr-2', 'min-h-8', 'px-3', 'text-sm'],\n        sm: ['*:not-last:mr-2', 'min-h-8', 'px-4', 'text-sm'],\n        md: ['*:not-last:mr-3', 'min-h-10', 'px-8', 'text-md'],\n        lg: ['*:not-last:mr-3', 'min-h-12', 'px-8', 'text-lg']\n      },\n      isIconOnly: {\n        true: []\n      },\n      appearance: {\n        standard: standardVariant,\n        modern: modernVariant\n      }\n    },\n    compoundVariants: [\n      {\n        isIconOnly: true,\n        size: 'xs',\n        class: ['min-w-8', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'sm',\n        class: ['min-w-8', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'md',\n        class: ['min-w-10', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'lg',\n        class: ['min-w-12', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'sm',\n        appearance: 'modern',\n        class: ['min-w-10', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'md',\n        appearance: 'modern',\n        class: ['min-w-12', 'p-0']\n      },\n      {\n        isIconOnly: true,\n        size: 'lg',\n        appearance: 'modern',\n        class: ['min-w-15', 'p-0']\n      }\n    ]\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype ButtonSize = React.ComponentProps<typeof StyledButton>['size']\ntype IconSize = React.ComponentProps<typeof Icon>['size']\n\n// Icon has no xs; its sm is the 16px icon an xs tab needs. Size may be a\n// responsive object, so each breakpoint is mapped.\nconst toIconSize = (size: ButtonSize): IconSize =>\n  typeof size === 'object'\n    ? (Object.fromEntries(\n        Object.entries(size).map(([bp, s]) => [bp, s === 'xs' ? 'sm' : s])\n      ) as IconSize)\n    : size === 'xs'\n      ? 'sm'\n      : size\n\nexport const ToggleGroupButton = ({\n  ref,\n  size = 'md',\n  appearance = 'standard',\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledButton>) => {\n  const childrenArray = React.Children.toArray(children)\n  const isSingleChild = childrenArray.length <= 1\n  const isIconOnly =\n    isSingleChild &&\n    React.isValidElement(childrenArray[0]) &&\n    childrenArray[0]?.type === Icon\n\n  return (\n    <StyledButton\n      ref={ref}\n      size={size}\n      isIconOnly={isIconOnly}\n      appearance={appearance}\n      {...rest}\n    >\n      {\n        childrenArray.map((child) => {\n          if (\n            !isSingleChild &&\n            (typeof child === 'string' || typeof child === 'number')\n          )\n            return <span key={child}>{child}</span>\n          if (\n            React.isValidElement<React.ComponentPropsWithoutRef<typeof Icon>>(\n              child\n            )\n          ) {\n            if (child?.type === Icon)\n              return React.cloneElement(child, {\n                ...child.props,\n                size: toIconSize(size)\n              })\n          }\n          return child\n        }) as React.ReactElement<unknown>[]\n      }\n    </StyledButton>\n  )\n}\n"],"mappings":";;;;;;;AAOA,IAAa,eAAe,OAC1B,YAAY,MACZ;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAmB;IAAW;IAAQ;GAAS;GACpD,IAAI;IAAC;IAAmB;IAAW;IAAQ;GAAS;GACpD,IAAI;IAAC;IAAmB;IAAY;IAAQ;GAAS;GACrD,IAAI;IAAC;IAAmB;IAAY;IAAQ;GAAS;EACvD;EACA,YAAY,EACV,MAAM,CAAC,EACT;EACA,YAAY;GACV,UAAU;GACV,QAAQ;EACV;CACF;CACA,kBAAkB;EAChB;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,WAAW,KAAK;EAC1B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,WAAW,KAAK;EAC1B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,YAAY;GACZ,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,YAAY;GACZ,OAAO,CAAC,YAAY,KAAK;EAC3B;EACA;GACE,YAAY;GACZ,MAAM;GACN,YAAY;GACZ,OAAO,CAAC,YAAY,KAAK;EAC3B;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAOA,IAAM,cAAc,SAClB,OAAO,SAAS,WACX,OAAO,YACN,OAAO,QAAQ,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,OAAO,CAAC,IAAI,MAAM,OAAO,OAAO,CAAC,CAAC,CACnE,IACA,SAAS,OACP,OACA;AAER,IAAa,qBAAqB,EAChC,KACA,OAAO,MACP,aAAa,YACb,UACA,GAAG,WAC4C;CAC/C,MAAM,gBAAgB,QAAM,SAAS,QAAQ,QAAQ;CACrD,MAAM,gBAAgB,cAAc,UAAU;CAM9C,OACE,oBAAC,cAAD;EACO;EACC;EACM,YARd,iBACA,QAAM,eAAe,cAAc,EAAE,KACrC,cAAc,EAAE,EAAE,SAAS;EAOb;EACZ,GAAI;YAGF,cAAc,KAAK,UAAU;GAC3B,IACE,CAAC,kBACA,OAAO,UAAU,YAAY,OAAO,UAAU,WAE/C,OAAO,oBAAC,QAAD,EAAA,UAAmB,MAAY,GAApB,KAAoB;GACxC,IACE,QAAM,eACJ,KACF;QAEI,OAAO,SAAS,MAClB,OAAO,QAAM,aAAa,OAAO;KAC/B,GAAG,MAAM;KACT,MAAM,WAAW,IAAI;IACvB,CAAC;GAAA;GAEL,OAAO;EACT,CAAC;CAES,CAAA;AAElB"}

package/dist/components/toggle-group/ToggleGroupItem.d.ts

@@ -1,9 +1,6 @@
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 export declare const standardVariant: string[];
 export declare const modernVariant: string[];
-export declare const standardDarkVariant: string[];
-export declare const modernDarkVariant: string[];
 export declare const ToggleGroupItem: import("../..").StyledComponent<import("react").ForwardRefExoticComponent<ToggleGroup.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, {
-    theme?: "modern" | "standard" | undefined;
-    colorMode?: "dark" | "light" | undefined;
+    appearance?: "modern" | "standard" | undefined;
 }>;