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

package/dist/components/popover/PopoverContent.js

@@ -8,9 +8,11 @@ import { Arrow, Close as Close$1, Content } from "@radix-ui/react-popover";
 //#region src/components/popover/PopoverContent.tsx
 var StyledContent = styled(Content, {
 	base: [
-		"bg-white",
+		"bg-surface-overlay",
 		"rounded-md",
-		"shadow-lg",
+		"shadow-(--shadow-floating-lg)",
+		"forced-colors:border",
+		"forced-colors:border-[CanvasText]",
 		"max-w-[90vw]",
 		"p-6",
 		"pr-10",
@@ -34,7 +36,7 @@ var StyledContent = styled(Content, {
 	} }
 });
 var StyledArrow = styled(Arrow, { base: [
-	"fill-white",
+	"fill-(--background-color-surface-overlay)",
 	"z-1",
 	"in-data-[align=end]:mx-6"
 ] });
@@ -49,7 +51,7 @@ var PopoverContent = ({ children, side = "top", sideOffset = 8, closePopoverText
 			label: closePopoverText,
 			size: "md",
 			hasTooltip: false,
-			theme: "neutral",
+			tone: "neutral",
 			className: "absolute top-0.5 right-0.5",
 			children: /* @__PURE__ */ jsx(Icon, { is: Close })
 		}),

package/dist/components/popover/PopoverContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverContent.js","names":[],"sources":["../../../src/components/popover/PopoverContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Arrow, Close, Content } from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContent = styled(Content, {\n  base: [\n    'bg-white',\n    'rounded-md',\n    'shadow-lg',\n    'max-w-[90vw]',\n    'p-6',\n    'pr-10',\n    'relative',\n    'z-10',\n    'will-change-transform',\n    'will-change-opacity',\n    'animation-duration-75',\n    '[--slide-opacity-out:0]',\n    'data-[side=top]:[--slide-direction-out-y:-4px]',\n    'data-[side=right]:[--slide-direction-out-x:4px]',\n    'data-[side=bottom]:[--slide-direction-out-y:4px]',\n    'data-[side=left]:[--slide-direction-out-x:-4px]',\n    'motion-safe:data-[state=open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    size: {\n      sm: ['max-w-50'],\n      md: ['max-w-100'],\n      lg: ['max-w-150']\n    }\n  }\n})\n\nconst StyledArrow = styled(Arrow, {\n  base: ['fill-white', 'z-1', 'in-data-[align=end]:mx-6']\n})\n\ntype PopoverContentProps = React.ComponentProps<typeof StyledContent> &\n  React.ComponentProps<typeof Content> & {\n    closePopoverText?: string\n    showCloseButton?: boolean\n  }\n\nexport const PopoverContent = ({\n  children,\n  side = 'top',\n  sideOffset = 8,\n  closePopoverText = 'Close popover',\n  showCloseButton = true,\n  size = 'md',\n  ...rest\n}: PopoverContentProps) => (\n  <StyledContent size={size} side={side} sideOffset={sideOffset} {...rest}>\n    {showCloseButton && (\n      <ActionIcon\n        as={Close}\n        label={closePopoverText}\n        size=\"md\"\n        hasTooltip={false}\n        theme=\"neutral\"\n        className=\"absolute top-0.5 right-0.5\"\n      >\n        <Icon is={CloseIcon} />\n      </ActionIcon>\n    )}\n    {children}\n    <StyledArrow width={16} height={8} />\n  </StyledContent>\n)\n"],"mappings":";;;;;;;;AAQA,IAAM,gBAAgB,OAAO,SAAS;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,WAAW;EAChB,IAAI,CAAC,WAAW;CAClB,EACF;AACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CAAC;CAAc;CAAO;AAA0B,EACxD,CAAC;AAQD,IAAa,kBAAkB,EAC7B,UACA,OAAO,OACP,aAAa,GACb,mBAAmB,iBACnB,kBAAkB,MAClB,OAAO,MACP,GAAG,WAEH,qBAAC,eAAD;CAAqB;CAAY;CAAkB;CAAY,GAAI;WAAnE;EACG,mBACC,oBAAC,YAAD;GACE,IAAI;GACJ,OAAO;GACP,MAAK;GACL,YAAY;GACZ,OAAM;GACN,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,MAAY,CAAA;EACZ,CAAA;EAEb;EACD,oBAAC,aAAD;GAAa,OAAO;GAAI,QAAQ;EAAI,CAAA;CACvB"}
+{"version":3,"file":"PopoverContent.js","names":[],"sources":["../../../src/components/popover/PopoverContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Arrow, Close, Content } from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContent = styled(Content, {\n  base: [\n    'bg-surface-overlay',\n    'rounded-md',\n    'shadow-(--shadow-floating-lg)',\n    // Forced colours drop box-shadow, so the edge needs a real border\n    'forced-colors:border',\n    'forced-colors:border-[CanvasText]',\n    'max-w-[90vw]',\n    'p-6',\n    'pr-10',\n    'relative',\n    'z-10',\n    'will-change-transform',\n    'will-change-opacity',\n    'animation-duration-75',\n    '[--slide-opacity-out:0]',\n    'data-[side=top]:[--slide-direction-out-y:-4px]',\n    'data-[side=right]:[--slide-direction-out-x:4px]',\n    'data-[side=bottom]:[--slide-direction-out-y:4px]',\n    'data-[side=left]:[--slide-direction-out-x:-4px]',\n    'motion-safe:data-[state=open]:animate-slide-direction-in',\n    'motion-safe:data-[state=closed]:animate-slide-direction-out'\n  ],\n  variants: {\n    size: {\n      sm: ['max-w-50'],\n      md: ['max-w-100'],\n      lg: ['max-w-150']\n    }\n  }\n})\n\nconst StyledArrow = styled(Arrow, {\n  base: [\n    'fill-(--background-color-surface-overlay)',\n    'z-1',\n    'in-data-[align=end]:mx-6'\n  ]\n})\n\ntype PopoverContentProps = React.ComponentProps<typeof StyledContent> &\n  React.ComponentProps<typeof Content> & {\n    closePopoverText?: string\n    showCloseButton?: boolean\n  }\n\nexport const PopoverContent = ({\n  children,\n  side = 'top',\n  sideOffset = 8,\n  closePopoverText = 'Close popover',\n  showCloseButton = true,\n  size = 'md',\n  ...rest\n}: PopoverContentProps) => (\n  <StyledContent size={size} side={side} sideOffset={sideOffset} {...rest}>\n    {showCloseButton && (\n      <ActionIcon\n        as={Close}\n        label={closePopoverText}\n        size=\"md\"\n        hasTooltip={false}\n        tone=\"neutral\"\n        className=\"absolute top-0.5 right-0.5\"\n      >\n        <Icon is={CloseIcon} />\n      </ActionIcon>\n    )}\n    {children}\n    <StyledArrow width={16} height={8} />\n  </StyledContent>\n)\n"],"mappings":";;;;;;;;AAQA,IAAM,gBAAgB,OAAO,SAAS;CACpC,MAAM;EACJ;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,WAAW;EAChB,IAAI,CAAC,WAAW;CAClB,EACF;AACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;AACF,EACF,CAAC;AAQD,IAAa,kBAAkB,EAC7B,UACA,OAAO,OACP,aAAa,GACb,mBAAmB,iBACnB,kBAAkB,MAClB,OAAO,MACP,GAAG,WAEH,qBAAC,eAAD;CAAqB;CAAY;CAAkB;CAAY,GAAI;WAAnE;EACG,mBACC,oBAAC,YAAD;GACE,IAAI;GACJ,OAAO;GACP,MAAK;GACL,YAAY;GACZ,MAAK;GACL,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,MAAY,CAAA;EACZ,CAAA;EAEb;EACD,oBAAC,aAAD;GAAa,OAAO;GAAI,QAAQ;EAAI,CAAA;CACvB"}

package/dist/components/progress-bar/ProgressBar.d.ts

@@ -1,17 +1,21 @@
 import * as Progress from '@radix-ui/react-progress';
 import * as React from 'react';
+import type { TColorAccent } from '../../experiments/theme/Theme';
 declare const StyledProgressBar: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<Progress.ProgressProps & React.RefAttributes<HTMLDivElement>>, {
     size?: ("md" | "sm" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "md" | "sm">>) | undefined;
-    theme?: ("danger" | "info" | "neutral" | "primary" | "success" | "warning" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "info" | "neutral" | "primary" | "success" | "warning">>) | undefined;
 }>;
-type ProgressBarProps = React.ComponentPropsWithoutRef<typeof StyledProgressBar> & ({
+type ProgressBarTone = 'neutral' | Extract<TColorAccent, 'info' | 'success' | 'warning' | 'danger'>;
+type ProgressBarProps = React.ComponentPropsWithoutRef<typeof StyledProgressBar> & {
+    /** Unset inherits the accent from the nearest <Theme> or palette. */
+    tone?: ProgressBarTone;
+} & ({
     id: string;
     'aria-label'?: string;
 } | {
     'aria-label': string;
     id?: string;
 });
-export declare function ProgressBar({ value, max, size, theme, ...rest }: ProgressBarProps): React.JSX.Element;
+export declare function ProgressBar({ value, max, size, tone, ...rest }: ProgressBarProps): React.JSX.Element;
 export declare namespace ProgressBar {
     var displayName: string;
 }

package/dist/components/progress-bar/ProgressBar.js

@@ -6,25 +6,16 @@ import * as Progress from "@radix-ui/react-progress";
 var StyledProgressBar = styled(Progress.Root, {
 	base: [
 		"rounded-full",
-		"bg-grey-200",
+		"bg-neutral",
 		"relative",
 		"overflow-hidden",
-		"w-full"
+		"w-full",
+		"text-(--background-color-accent-solid)"
 	],
-	variants: {
-		size: {
-			sm: ["h-1"],
-			md: ["h-2"]
-		},
-		theme: {
-			primary: ["text-primary-800"],
-			info: ["text-info"],
-			success: ["text-success"],
-			warning: ["text-warning"],
-			danger: ["text-danger"],
-			neutral: ["bg-grey-400", "text-grey-800"]
-		}
-	}
+	variants: { size: {
+		sm: ["h-1"],
+		md: ["h-2"]
+	} }
 }, { enableResponsiveVariants: true });
 var StyledIndicator = styled(Progress.Indicator, { base: [
 	"bg-current",
@@ -36,11 +27,11 @@ var StyledIndicator = styled(Progress.Indicator, { base: [
 	"duration-300",
 	"ease-out"
 ] });
-var ProgressBar = ({ value, max = 100, size = "md", theme = "primary", ...rest }) => /* @__PURE__ */ jsx(StyledProgressBar, {
+var ProgressBar = ({ value, max = 100, size = "md", tone, ...rest }) => /* @__PURE__ */ jsx(StyledProgressBar, {
 	value,
 	max,
-	theme,
 	size,
+	"data-color-accent": tone === "neutral" ? "grey" : tone,
 	...rest,
 	children: /* @__PURE__ */ jsx(StyledIndicator, {
 		className: "w-full translate-x-(--progress)",

package/dist/components/progress-bar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import * as Progress from '@radix-ui/react-progress'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledProgressBar = styled(\n  Progress.Root,\n  {\n    base: [\n      'rounded-full',\n      'bg-grey-200',\n      'relative',\n      'overflow-hidden',\n      'w-full'\n    ],\n    variants: {\n      size: {\n        sm: ['h-1'],\n        md: ['h-2']\n      },\n      theme: {\n        primary: ['text-primary-800'],\n        info: ['text-info'],\n        success: ['text-success'],\n        warning: ['text-warning'],\n        danger: ['text-danger'],\n        neutral: ['bg-grey-400', 'text-grey-800']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(Progress.Indicator, {\n  base: [\n    'bg-current',\n    'rounded-full',\n    'box-border',\n    'h-full',\n    'absolute',\n    'transition-all',\n    'duration-300',\n    'ease-out'\n  ]\n})\n\ntype ProgressBarProps = React.ComponentPropsWithoutRef<\n  typeof StyledProgressBar\n> &\n  (\n    | { id: string; 'aria-label'?: string }\n    | { 'aria-label': string; id?: string }\n  )\n\nexport const ProgressBar = ({\n  value,\n  max = 100,\n  size = 'md',\n  theme = 'primary',\n  ...rest\n}: ProgressBarProps) => (\n  <StyledProgressBar\n    value={value}\n    max={max}\n    theme={theme}\n    size={size}\n    {...rest}\n  >\n    <StyledIndicator\n      className=\"w-full translate-x-(--progress)\"\n      style={{\n        '--progress': `-${100 - ((value || 0) / max) * 100}%`\n      }}\n    />\n  </StyledProgressBar>\n)\n\nProgressBar.displayName = 'ProgressBar'\n"],"mappings":";;;;;AAKA,IAAM,oBAAoB,OACxB,SAAS,MACT;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI,CAAC,KAAK;GACV,IAAI,CAAC,KAAK;EACZ;EACA,OAAO;GACL,SAAS,CAAC,kBAAkB;GAC5B,MAAM,CAAC,WAAW;GAClB,SAAS,CAAC,cAAc;GACxB,SAAS,CAAC,cAAc;GACxB,QAAQ,CAAC,aAAa;GACtB,SAAS,CAAC,eAAe,eAAe;EAC1C;CACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAM,kBAAkB,OAAO,SAAS,WAAW,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAUD,IAAa,eAAe,EAC1B,OACA,MAAM,KACN,OAAO,MACP,QAAQ,WACR,GAAG,WAEH,oBAAC,mBAAD;CACS;CACF;CACE;CACD;CACN,GAAI;WAEJ,oBAAC,iBAAD;EACE,WAAU;EACV,OAAO,EACL,cAAc,IAAI,OAAQ,SAAS,KAAK,MAAO,IAAI,GACrD;CACD,CAAA;AACgB,CAAA;AAGrB,YAAY,cAAc"}
+{"version":3,"file":"ProgressBar.js","names":[],"sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import * as Progress from '@radix-ui/react-progress'\nimport * as React from 'react'\n\nimport type { TColorAccent } from '../../experiments/theme/Theme'\nimport { styled } from '../../styled'\n\nconst StyledProgressBar = styled(\n  Progress.Root,\n  {\n    base: [\n      'rounded-full',\n      'bg-neutral',\n      'relative',\n      'overflow-hidden',\n      'w-full',\n      // Accent role only: data-color-accent (from `tone`, or inherited) picks\n      // the scale it resolves to; neutral resolves to grey\n      'text-(--background-color-accent-solid)'\n    ],\n    variants: {\n      size: {\n        sm: ['h-1'],\n        md: ['h-2']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(Progress.Indicator, {\n  base: [\n    'bg-current',\n    'rounded-full',\n    'box-border',\n    'h-full',\n    'absolute',\n    'transition-all',\n    'duration-300',\n    'ease-out'\n  ]\n})\n\n// Intent, not hue: each tone resolves to a fixed status scale\ntype ProgressBarTone =\n  | 'neutral'\n  | Extract<TColorAccent, 'info' | 'success' | 'warning' | 'danger'>\n\ntype ProgressBarProps = React.ComponentPropsWithoutRef<\n  typeof StyledProgressBar\n> & {\n  /** Unset inherits the accent from the nearest <Theme> or palette. */\n  tone?: ProgressBarTone\n} & (\n    | { id: string; 'aria-label'?: string }\n    | { 'aria-label': string; id?: string }\n  )\n\nexport const ProgressBar = ({\n  value,\n  max = 100,\n  size = 'md',\n  tone,\n  ...rest\n}: ProgressBarProps) => (\n  <StyledProgressBar\n    value={value}\n    max={max}\n    size={size}\n    data-color-accent={tone === 'neutral' ? 'grey' : tone}\n    {...rest}\n  >\n    <StyledIndicator\n      className=\"w-full translate-x-(--progress)\"\n      style={{\n        '--progress': `-${100 - ((value || 0) / max) * 100}%`\n      }}\n    />\n  </StyledProgressBar>\n)\n\nProgressBar.displayName = 'ProgressBar'\n"],"mappings":";;;;;AAMA,IAAM,oBAAoB,OACxB,SAAS,MACT;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EAGA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,KAAK;EACV,IAAI,CAAC,KAAK;CACZ,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAEA,IAAM,kBAAkB,OAAO,SAAS,WAAW,EACjD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAiBD,IAAa,eAAe,EAC1B,OACA,MAAM,KACN,OAAO,MACP,MACA,GAAG,WAEH,oBAAC,mBAAD;CACS;CACF;CACC;CACN,qBAAmB,SAAS,YAAY,SAAS;CACjD,GAAI;WAEJ,oBAAC,iBAAD;EACE,WAAU;EACV,OAAO,EACL,cAAc,IAAI,OAAQ,SAAS,KAAK,MAAO,IAAI,GACrD;CACD,CAAA;AACgB,CAAA;AAGrB,YAAY,cAAc"}

package/dist/components/radio-button/RadioButton.js

@@ -9,9 +9,9 @@ var StyledRadioButton = styled(RadioGroup.Item, {
 		"appearance-none",
 		"bg-transparent",
 		"border",
-		"border-grey-800",
+		"border-strong",
 		"rounded-full",
-		"text-white",
+		"text-on-accent",
 		"cursor-pointer",
 		"flex",
 		"justify-center",
@@ -20,18 +20,14 @@ var StyledRadioButton = styled(RadioGroup.Item, {
 		"transition-all",
 		"duration-50",
 		"ease-out",
-		"focus:outline-2",
-		"focus:outline-offset-1",
-		"focus:outline-primary-800",
-		"focus:outline-solid",
-		"data-[state=checked]:bg-primary-800",
-		"data-[state=checked]:border-primary-800",
-		"disabled:bg-grey-200",
-		"disabled:border-grey-800",
+		"focus-visible:outline-2",
+		"focus-visible:outline-offset-2",
+		"focus-visible:outline-focus",
+		"focus-visible:outline-solid",
+		"data-[state=checked]:bg-accent-solid",
+		"data-[state=checked]:border-accent-solid",
 		"disabled:cursor-not-allowed",
-		"disabled:text-grey-800",
-		"disabled:data-[state=checked]:bg-grey-800",
-		"disabled:data-[state=checked]:border-grey-800"
+		"disabled:opacity-30"
 	],
 	variants: { size: {
 		md: ["size-4"],
@@ -46,7 +42,9 @@ var StyledIndicator = styled(RadioGroup.Indicator, {
 		"size-1.5",
 		"rounded-full",
 		"bg-current",
-		"absolute"
+		"absolute",
+		"forced-colors:forced-color-adjust-none",
+		"forced-colors:bg-[CanvasText]"
 	],
 	variants: { size: {
 		md: ["size-1.5"],

package/dist/components/radio-button/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":[],"sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\n\nconst StyledRadioButton = styled(\n  RadioGroup.Item,\n  {\n    base: [\n      'items-center',\n      'appearance-none',\n      'bg-transparent',\n      'border',\n      'border-grey-800',\n      'rounded-full',\n      'text-white',\n      'cursor-pointer',\n      'flex',\n      'justify-center',\n      'p-0',\n      'size-4',\n      'transition-all',\n      'duration-50',\n      'ease-out',\n      'focus:outline-2',\n      'focus:outline-offset-1',\n      'focus:outline-primary-800',\n      'focus:outline-solid',\n      'data-[state=checked]:bg-primary-800',\n      'data-[state=checked]:border-primary-800',\n      'disabled:bg-grey-200',\n      'disabled:border-grey-800',\n      'disabled:cursor-not-allowed',\n      'disabled:text-grey-800',\n      'disabled:data-[state=checked]:bg-grey-800',\n      'disabled:data-[state=checked]:border-grey-800'\n    ],\n    variants: {\n      size: {\n        md: ['size-4'],\n        lg: ['-mt-1', 'size-6']\n      }\n    }\n  },\n  { enablePolymorphism: false, enableResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(\n  RadioGroup.Indicator,\n  {\n    base: ['size-1.5', 'rounded-full', 'bg-current', 'absolute'],\n    variants: {\n      size: {\n        md: ['size-1.5'],\n        lg: ['size-3']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype RadioButtonProps = Override<\n  React.ComponentProps<typeof StyledRadioButton>,\n  {\n    'aria-label'?: string\n  }\n>\n\nexport const RadioButton = ({ size, ...rest }: RadioButtonProps) => (\n  <StyledRadioButton {...rest} size={size}>\n    <StyledIndicator size={size} />\n  </StyledRadioButton>\n)\n\nRadioButton.displayName = 'RadioButton'\n"],"mappings":";;;;;AAMA,IAAM,oBAAoB,OACxB,WAAW,MACX;CACE,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;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,SAAS,QAAQ;CACxB,EACF;AACF,GACA;CAAE,oBAAoB;CAAO,0BAA0B;AAAK,CAC9D;AAEA,IAAM,kBAAkB,OACtB,WAAW,WACX;CACE,MAAM;EAAC;EAAY;EAAgB;EAAc;CAAU;CAC3D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,QAAQ;CACf,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AASA,IAAa,eAAe,EAAE,MAAM,GAAG,WACrC,oBAAC,mBAAD;CAAmB,GAAI;CAAY;WACjC,oBAAC,iBAAD,EAAuB,KAAO,CAAA;AACb,CAAA;AAGrB,YAAY,cAAc"}
+{"version":3,"file":"RadioButton.js","names":[],"sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\n\nconst StyledRadioButton = styled(\n  RadioGroup.Item,\n  {\n    base: [\n      'items-center',\n      'appearance-none',\n      'bg-transparent',\n      'border',\n      'border-strong',\n      'rounded-full',\n      'text-on-accent',\n      'cursor-pointer',\n      'flex',\n      'justify-center',\n      'p-0',\n      'size-4',\n      'transition-all',\n      'duration-50',\n      'ease-out',\n      'focus-visible:outline-2',\n      'focus-visible:outline-offset-2',\n      'focus-visible:outline-focus',\n      'focus-visible:outline-solid',\n      'data-[state=checked]:bg-accent-solid',\n      'data-[state=checked]:border-accent-solid',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30'\n    ],\n    variants: {\n      size: {\n        md: ['size-4'],\n        lg: ['-mt-1', 'size-6']\n      }\n    }\n  },\n  { enablePolymorphism: false, enableResponsiveVariants: true }\n)\n\nconst StyledIndicator = styled(\n  RadioGroup.Indicator,\n  {\n    base: [\n      'size-1.5',\n      'rounded-full',\n      'bg-current',\n      'absolute',\n      // Forced colours drop backgrounds, which would hide the dot\n      'forced-colors:forced-color-adjust-none',\n      'forced-colors:bg-[CanvasText]'\n    ],\n    variants: {\n      size: {\n        md: ['size-1.5'],\n        lg: ['size-3']\n      }\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype RadioButtonProps = Override<\n  React.ComponentProps<typeof StyledRadioButton>,\n  {\n    'aria-label'?: string\n  }\n>\n\nexport const RadioButton = ({ size, ...rest }: RadioButtonProps) => (\n  <StyledRadioButton {...rest} size={size}>\n    <StyledIndicator size={size} />\n  </StyledRadioButton>\n)\n\nRadioButton.displayName = 'RadioButton'\n"],"mappings":";;;;;AAMA,IAAM,oBAAoB,OACxB,WAAW,MACX;CACE,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;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,QAAQ;EACb,IAAI,CAAC,SAAS,QAAQ;CACxB,EACF;AACF,GACA;CAAE,oBAAoB;CAAO,0BAA0B;AAAK,CAC9D;AAEA,IAAM,kBAAkB,OACtB,WAAW,WACX;CACE,MAAM;EACJ;EACA;EACA;EACA;EAEA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,QAAQ;CACf,EACF;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AASA,IAAa,eAAe,EAAE,MAAM,GAAG,WACrC,oBAAC,mBAAD;CAAmB,GAAI;CAAY;WACjC,oBAAC,iBAAD,EAAuB,KAAO,CAAA;AACb,CAAA;AAGrB,YAAY,cAAc"}

package/dist/components/radio-button-field/RadioButtonField.js

@@ -57,6 +57,7 @@ var RadioButtonFieldComponent = ({ children, className, direction = "column", de
 				children
 			}),
 			error && /* @__PURE__ */ jsx(InlineMessage, {
+				tone: "danger",
 				className: "mt-2",
 				children: error
 			})

package/dist/components/radio-button-field/RadioButtonField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonField.js","names":[],"sources":["../../../src/components/radio-button-field/RadioButtonField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { styled } from '../../styled'\nimport { Description as FieldDescription } from '../field-wrapper/FieldDescription'\nimport type { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { Label } from '../label/Label'\nimport { RadioButtonGroup } from '../radio-button/RadioButtonGroup'\nimport { RadioField } from './RadioField'\n\nconst Fieldset = styled('fieldset', {\n  base: ['border-0', 'p-0', 'm-0', 'min-w-0']\n})\n\ntype RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> &\n  FieldElementWrapperProps\n\nconst RadioButtonFieldComponent = ({\n  children,\n  className,\n  direction = 'column',\n  defaultValue,\n  value,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  ...rest\n}: RadioButtonFieldProps) => {\n  const { control, setValue } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  React.useEffect(() => {\n    // Sync an externally-controlled `value` into react-hook-form without\n    // marking the field dirty/touched — this isn't user input.\n    if (typeof value !== 'undefined')\n      setValue(name, value, { shouldDirty: false })\n  }, [value, name, setValue])\n\n  return (\n    <Fieldset className={className}>\n      <Label\n        as=\"legend\"\n        required={Boolean(validation?.required)}\n        className=\"mb-3 p-0\"\n      >\n        {label}\n      </Label>\n      {description && (\n        <FieldDescription className=\"mb-3\">{description}</FieldDescription>\n      )}\n\n      <RadioButtonGroup\n        ref={ref}\n        direction={direction}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        {...rest}\n      >\n        {children}\n      </RadioButtonGroup>\n\n      {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    </Fieldset>\n  )\n}\n\nexport const RadioButtonField = /* @__PURE__ */ Object.assign(\n  RadioButtonFieldComponent,\n  {\n    Item: RadioField\n  }\n)\n\nRadioButtonFieldComponent.displayName = 'RadioButtonField'\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,WAAW,OAAO,YAAY,EAClC,MAAM;CAAC;CAAY;CAAO;CAAO;AAAS,EAC5C,CAAC;AAKD,IAAM,6BAA6B,EACjC,UACA,WACA,YAAY,UACZ,cACA,OACA,aACA,OACA,MACA,YACA,eACA,GAAG,WACwB;CAC3B,MAAM,EAAE,SAAS,aAAa,eAAe;CAC7C,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,iBAC7B,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CACD,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,QAAM,gBAAgB;EAGpB,IAAI,OAAO,UAAU,aACnB,SAAS,MAAM,OAAO,EAAE,aAAa,MAAM,CAAC;CAChD,GAAG;EAAC;EAAO;EAAM;CAAQ,CAAC;CAE1B,OACE,qBAAC,UAAD;EAAqB;YAArB;GACE,oBAAC,OAAD;IACE,IAAG;IACH,UAAU,QAAQ,YAAY,QAAQ;IACtC,WAAU;cAET;GACI,CAAA;GACN,eACC,oBAAC,aAAD;IAAkB,WAAU;cAAQ;GAA8B,CAAA;GAGpE,oBAAC,kBAAD;IACO;IACM;IACG;IACd,gBAAgB,aAAa;KAC3B,SAAS,QAAQ;KACjB,gBAAgB,QAAQ;IAC1B;IACA,OAAO;IACP,GAAI;IAEH;GACe,CAAA;GAEjB,SAAS,oBAAC,eAAD;IAAe,WAAU;cAAQ;GAAqB,CAAA;EACxD;;AAEd;AAEA,IAAa,mBAAmC,uBAAO,OACrD,2BACA,EACE,MAAM,WACR,CACF;AAEA,0BAA0B,cAAc"}
+{"version":3,"file":"RadioButtonField.js","names":[],"sources":["../../../src/components/radio-button-field/RadioButtonField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { styled } from '../../styled'\nimport { Description as FieldDescription } from '../field-wrapper/FieldDescription'\nimport type { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { Label } from '../label/Label'\nimport { RadioButtonGroup } from '../radio-button/RadioButtonGroup'\nimport { RadioField } from './RadioField'\n\nconst Fieldset = styled('fieldset', {\n  base: ['border-0', 'p-0', 'm-0', 'min-w-0']\n})\n\ntype RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> &\n  FieldElementWrapperProps\n\nconst RadioButtonFieldComponent = ({\n  children,\n  className,\n  direction = 'column',\n  defaultValue,\n  value,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  ...rest\n}: RadioButtonFieldProps) => {\n  const { control, setValue } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  React.useEffect(() => {\n    // Sync an externally-controlled `value` into react-hook-form without\n    // marking the field dirty/touched — this isn't user input.\n    if (typeof value !== 'undefined')\n      setValue(name, value, { shouldDirty: false })\n  }, [value, name, setValue])\n\n  return (\n    <Fieldset className={className}>\n      <Label\n        as=\"legend\"\n        required={Boolean(validation?.required)}\n        className=\"mb-3 p-0\"\n      >\n        {label}\n      </Label>\n      {description && (\n        <FieldDescription className=\"mb-3\">{description}</FieldDescription>\n      )}\n\n      <RadioButtonGroup\n        ref={ref}\n        direction={direction}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        {...rest}\n      >\n        {children}\n      </RadioButtonGroup>\n\n      {error && (\n        <InlineMessage tone=\"danger\" className=\"mt-2\">\n          {error}\n        </InlineMessage>\n      )}\n    </Fieldset>\n  )\n}\n\nexport const RadioButtonField = /* @__PURE__ */ Object.assign(\n  RadioButtonFieldComponent,\n  {\n    Item: RadioField\n  }\n)\n\nRadioButtonFieldComponent.displayName = 'RadioButtonField'\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,WAAW,OAAO,YAAY,EAClC,MAAM;CAAC;CAAY;CAAO;CAAO;AAAS,EAC5C,CAAC;AAKD,IAAM,6BAA6B,EACjC,UACA,WACA,YAAY,UACZ,cACA,OACA,aACA,OACA,MACA,YACA,eACA,GAAG,WACwB;CAC3B,MAAM,EAAE,SAAS,aAAa,eAAe;CAC7C,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,iBAC7B,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CACD,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,QAAM,gBAAgB;EAGpB,IAAI,OAAO,UAAU,aACnB,SAAS,MAAM,OAAO,EAAE,aAAa,MAAM,CAAC;CAChD,GAAG;EAAC;EAAO;EAAM;CAAQ,CAAC;CAE1B,OACE,qBAAC,UAAD;EAAqB;YAArB;GACE,oBAAC,OAAD;IACE,IAAG;IACH,UAAU,QAAQ,YAAY,QAAQ;IACtC,WAAU;cAET;GACI,CAAA;GACN,eACC,oBAAC,aAAD;IAAkB,WAAU;cAAQ;GAA8B,CAAA;GAGpE,oBAAC,kBAAD;IACO;IACM;IACG;IACd,gBAAgB,aAAa;KAC3B,SAAS,QAAQ;KACjB,gBAAgB,QAAQ;IAC1B;IACA,OAAO;IACP,GAAI;IAEH;GACe,CAAA;GAEjB,SACC,oBAAC,eAAD;IAAe,MAAK;IAAS,WAAU;cACpC;GACY,CAAA;EAET;;AAEd;AAEA,IAAa,mBAAmC,uBAAO,OACrD,2BACA,EACE,MAAM,WACR,CACF;AAEA,0BAA0B,cAAc"}

package/dist/components/radio-card/RadioCard.js

@@ -6,16 +6,16 @@ import * as RadioGroup from "@radix-ui/react-radio-group";
 var StyledRadioCard = styled(RadioGroup.Item, {
 	base: [
 		"items-center",
-		"bg-white",
+		"bg-surface",
 		"border",
-		"border-grey-600",
+		"border-neutral-solid",
 		"rounded-sm",
 		"cursor-pointer",
 		"flex",
 		"text-left",
 		"data-[state=checked]:-outline-offset-2",
 		"data-[state=checked]:outline-2",
-		"data-[state=checked]:outline-primary-800",
+		"data-[state=checked]:outline-accent",
 		"data-[state=checked]:outline-solid"
 	],
 	variants: {
@@ -39,7 +39,7 @@ var RadioButton = styled("div", {
 		"appearance-none",
 		"bg-transparent",
 		"border",
-		"border-grey-900",
+		"border-strong",
 		"rounded-full",
 		"flex",
 		"shrink-0",
@@ -49,8 +49,8 @@ var RadioButton = styled("div", {
 		"transition-all",
 		"duration-50",
 		"ease-out",
-		"in-data-[state=checked]:bg-primary-800",
-		"in-data-[state=checked]:border-primary-800"
+		"in-data-[state=checked]:bg-accent-solid",
+		"in-data-[state=checked]:border-accent-solid"
 	],
 	variants: {
 		containerIsFullWidth: {
@@ -73,7 +73,7 @@ var RadioButton = styled("div", {
 	}]
 });
 var Indicator = styled(RadioGroup.Indicator, { base: [
-	"bg-white",
+	"bg-(--text-color-on-accent)",
 	"rounded-full",
 	"absolute",
 	"size-1.5"

package/dist/components/radio-card/RadioCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioCard.js","names":[],"sources":["../../../src/components/radio-card/RadioCard.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledRadioCard = styled(RadioGroup.Item, {\n  base: [\n    'items-center',\n    'bg-white',\n    'border',\n    'border-grey-600',\n    'rounded-sm',\n    'cursor-pointer',\n    'flex',\n    'text-left',\n    'data-[state=checked]:-outline-offset-2',\n    'data-[state=checked]:outline-2',\n    'data-[state=checked]:outline-primary-800',\n    'data-[state=checked]:outline-solid'\n  ],\n  variants: {\n    align: {\n      left: ['flex-row'],\n      right: ['flex-row-reverse']\n    },\n    size: {\n      md: ['px-4', 'py-3'],\n      lg: ['px-8', 'py-4']\n    },\n    isFullWidth: {\n      true: ['w-full'],\n      false: ['w-max']\n    }\n  }\n})\n\nconst RadioButton = styled('div', {\n  base: [\n    'items-center',\n    'appearance-none',\n    'bg-transparent',\n    'border',\n    'border-grey-900',\n    'rounded-full',\n    'flex',\n    'shrink-0',\n    'justify-center',\n    'p-0',\n    'size-4',\n    'transition-all',\n    'duration-50',\n    'ease-out',\n    'in-data-[state=checked]:bg-primary-800',\n    'in-data-[state=checked]:border-primary-800'\n  ],\n  variants: {\n    containerIsFullWidth: {\n      true: [],\n      false: []\n    },\n    align: {\n      left: ['mr-4'],\n      right: []\n    }\n  },\n  compoundVariants: [\n    {\n      containerIsFullWidth: true,\n      align: 'right',\n      class: ['ml-auto']\n    },\n    {\n      containerIsFullWidth: false,\n      align: 'right',\n      class: ['ml-4']\n    }\n  ]\n})\n\nconst Indicator = styled(RadioGroup.Indicator, {\n  base: ['bg-white', 'rounded-full', 'absolute', 'size-1.5']\n})\n\ntype RadioCardProps = React.ComponentProps<typeof StyledRadioCard>\n\nexport const RadioCard = ({\n  children,\n  isFullWidth = false,\n  size = 'md',\n  align = 'left',\n  ...rest\n}: RadioCardProps) => (\n  <StyledRadioCard\n    {...rest}\n    align={align}\n    isFullWidth={isFullWidth}\n    size={size}\n  >\n    <RadioButton align={align} containerIsFullWidth={isFullWidth}>\n      <Indicator />\n    </RadioButton>\n    <div>{children}</div>\n  </StyledRadioCard>\n)\n"],"mappings":";;;;;AAKA,IAAM,kBAAkB,OAAO,WAAW,MAAM;CAC9C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,MAAM,CAAC,UAAU;GACjB,OAAO,CAAC,kBAAkB;EAC5B;EACA,MAAM;GACJ,IAAI,CAAC,QAAQ,MAAM;GACnB,IAAI,CAAC,QAAQ,MAAM;EACrB;EACA,aAAa;GACX,MAAM,CAAC,QAAQ;GACf,OAAO,CAAC,OAAO;EACjB;CACF;AACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,sBAAsB;GACpB,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,OAAO;GACL,MAAM,CAAC,MAAM;GACb,OAAO,CAAC;EACV;CACF;CACA,kBAAkB,CAChB;EACE,sBAAsB;EACtB,OAAO;EACP,OAAO,CAAC,SAAS;CACnB,GACA;EACE,sBAAsB;EACtB,OAAO;EACP,OAAO,CAAC,MAAM;CAChB,CACF;AACF,CAAC;AAED,IAAM,YAAY,OAAO,WAAW,WAAW,EAC7C,MAAM;CAAC;CAAY;CAAgB;CAAY;AAAU,EAC3D,CAAC;AAID,IAAa,aAAa,EACxB,UACA,cAAc,OACd,OAAO,MACP,QAAQ,QACR,GAAG,WAEH,qBAAC,iBAAD;CACE,GAAI;CACG;CACM;CACP;WAJR,CAME,oBAAC,aAAD;EAAoB;EAAO,sBAAsB;YAC/C,oBAAC,WAAD,CAAY,CAAA;CACD,CAAA,GACb,oBAAC,OAAD,EAAM,SAAc,CAAA,CACL"}
+{"version":3,"file":"RadioCard.js","names":[],"sources":["../../../src/components/radio-card/RadioCard.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\n\nconst StyledRadioCard = styled(RadioGroup.Item, {\n  base: [\n    'items-center',\n    'bg-surface',\n    'border',\n    'border-neutral-solid',\n    'rounded-sm',\n    'cursor-pointer',\n    'flex',\n    'text-left',\n    'data-[state=checked]:-outline-offset-2',\n    'data-[state=checked]:outline-2',\n    'data-[state=checked]:outline-accent',\n    'data-[state=checked]:outline-solid'\n  ],\n  variants: {\n    align: {\n      left: ['flex-row'],\n      right: ['flex-row-reverse']\n    },\n    size: {\n      md: ['px-4', 'py-3'],\n      lg: ['px-8', 'py-4']\n    },\n    isFullWidth: {\n      true: ['w-full'],\n      false: ['w-max']\n    }\n  }\n})\n\nconst RadioButton = styled('div', {\n  base: [\n    'items-center',\n    'appearance-none',\n    'bg-transparent',\n    'border',\n    'border-strong',\n    'rounded-full',\n    'flex',\n    'shrink-0',\n    'justify-center',\n    'p-0',\n    'size-4',\n    'transition-all',\n    'duration-50',\n    'ease-out',\n    'in-data-[state=checked]:bg-accent-solid',\n    'in-data-[state=checked]:border-accent-solid'\n  ],\n  variants: {\n    containerIsFullWidth: {\n      true: [],\n      false: []\n    },\n    align: {\n      left: ['mr-4'],\n      right: []\n    }\n  },\n  compoundVariants: [\n    {\n      containerIsFullWidth: true,\n      align: 'right',\n      class: ['ml-auto']\n    },\n    {\n      containerIsFullWidth: false,\n      align: 'right',\n      class: ['ml-4']\n    }\n  ]\n})\n\nconst Indicator = styled(RadioGroup.Indicator, {\n  base: ['bg-(--text-color-on-accent)', 'rounded-full', 'absolute', 'size-1.5']\n})\n\ntype RadioCardProps = React.ComponentProps<typeof StyledRadioCard>\n\nexport const RadioCard = ({\n  children,\n  isFullWidth = false,\n  size = 'md',\n  align = 'left',\n  ...rest\n}: RadioCardProps) => (\n  <StyledRadioCard\n    {...rest}\n    align={align}\n    isFullWidth={isFullWidth}\n    size={size}\n  >\n    <RadioButton align={align} containerIsFullWidth={isFullWidth}>\n      <Indicator />\n    </RadioButton>\n    <div>{children}</div>\n  </StyledRadioCard>\n)\n"],"mappings":";;;;;AAKA,IAAM,kBAAkB,OAAO,WAAW,MAAM;CAC9C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,OAAO;GACL,MAAM,CAAC,UAAU;GACjB,OAAO,CAAC,kBAAkB;EAC5B;EACA,MAAM;GACJ,IAAI,CAAC,QAAQ,MAAM;GACnB,IAAI,CAAC,QAAQ,MAAM;EACrB;EACA,aAAa;GACX,MAAM,CAAC,QAAQ;GACf,OAAO,CAAC,OAAO;EACjB;CACF;AACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,sBAAsB;GACpB,MAAM,CAAC;GACP,OAAO,CAAC;EACV;EACA,OAAO;GACL,MAAM,CAAC,MAAM;GACb,OAAO,CAAC;EACV;CACF;CACA,kBAAkB,CAChB;EACE,sBAAsB;EACtB,OAAO;EACP,OAAO,CAAC,SAAS;CACnB,GACA;EACE,sBAAsB;EACtB,OAAO;EACP,OAAO,CAAC,MAAM;CAChB,CACF;AACF,CAAC;AAED,IAAM,YAAY,OAAO,WAAW,WAAW,EAC7C,MAAM;CAAC;CAA+B;CAAgB;CAAY;AAAU,EAC9E,CAAC;AAID,IAAa,aAAa,EACxB,UACA,cAAc,OACd,OAAO,MACP,QAAQ,QACR,GAAG,WAEH,qBAAC,iBAAD;CACE,GAAI;CACG;CACM;CACP;WAJR,CAME,oBAAC,aAAD;EAAoB;EAAO,sBAAsB;YAC/C,oBAAC,WAAD,CAAY,CAAA;CACD,CAAA,GACb,oBAAC,OAAD,EAAM,SAAc,CAAA,CACL"}

package/dist/components/search-field/SearchField.d.ts

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

package/dist/components/search-field/SearchField.js

@@ -6,13 +6,13 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { useFormContext } from "react-hook-form";
 //#region src/components/search-field/SearchField.tsx
-var SearchField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...rest }) => {
+var SearchField = ({ 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 SearchField = ({ className, hideLabel, label, name, validation, prompt, desc
 			name,
 			ref,
 			appearance: formAppearance,
-			theme: formTheme,
+			fill: formFill,
 			...error && { state: "error" },
 			...rest
 		})

package/dist/components/search-field/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","names":[],"sources":["../../../src/components/search-field/SearchField.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 { SearchInput, type SearchInputProps } from '../search-input/SearchInput'\n\ntype SearchFieldProps = SearchInputProps & FieldElementWrapperProps\n\nexport const SearchField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  theme,\n  ...rest\n}: SearchFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\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      <SearchInput\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\nSearchField.displayName = 'SearchField'\n"],"mappings":";;;;;;;;AAaA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,OACA,GAAG,WACmB;CACtB,MAAM,EAAE,aAAa,eAAe;CACpC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,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,aAAD;GACE,IAAI;GACE;GACD;GACL,YAAY;GACZ,OAAO;GACP,GAAK,SAAS,EAAE,OAAO,QAAQ;GAC/B,GAAI;EACL,CAAA;CACW,CAAA;AAElB;AAEA,YAAY,cAAc"}
+{"version":3,"file":"SearchField.js","names":[],"sources":["../../../src/components/search-field/SearchField.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 { SearchInput, type SearchInputProps } from '../search-input/SearchInput'\n\ntype SearchFieldProps = SearchInputProps & FieldElementWrapperProps\n\nexport const SearchField = ({\n  className,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  fill,\n  ...rest\n}: SearchFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\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      <SearchInput\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\nSearchField.displayName = 'SearchField'\n"],"mappings":";;;;;;;;AAaA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,MACA,GAAG,WACmB;CACtB,MAAM,EAAE,aAAa,eAAe;CACpC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,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,aAAD;GACE,IAAI;GACE;GACD;GACL,YAAY;GACZ,MAAM;GACN,GAAK,SAAS,EAAE,OAAO,QAAQ;GAC/B,GAAI;EACL,CAAA;CACW,CAAA;AAElB;AAEA,YAAY,cAAc"}

package/dist/components/search-input/SearchInput.d.ts

@@ -9,4 +9,4 @@ export type SearchInputProps = React.ComponentProps<typeof Input> & {
     clearText?: string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
-export declare const SearchInput: ({ ref, size, appearance, theme, className, value, defaultValue, onValueChange, clearText, onChange, ...rest }: SearchInputProps) => React.JSX.Element;
+export declare const SearchInput: ({ ref, size, appearance, fill, className, value, defaultValue, onValueChange, clearText, onChange, ...rest }: SearchInputProps) => React.JSX.Element;

package/dist/components/search-input/SearchInput.js

@@ -12,7 +12,7 @@ import { Close, Search } from "@atom-learning/icons";
 //#region src/components/search-input/SearchInput.tsx
 var StyledIcon = styled(Icon, {
 	base: [
-		"text-grey-700",
+		"text-icon-subtle",
 		"absolute",
 		"pointer-events-none"
 	],
@@ -22,7 +22,7 @@ var StyledIcon = styled(Icon, {
 		lg: ["right-2.5", "size-5"]
 	} }
 });
-var SearchInput = ({ ref, size = "md", appearance = "standard", theme, className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...rest }) => {
+var SearchInput = ({ ref, size = "md", appearance = "standard", fill, className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...rest }) => {
 	const [inputElRef, setInputElRef] = useCallbackRef();
 	const [innerValue, setInnerValue] = React$1.useState(defaultValue);
 	const currentValue = value ?? innerValue;
@@ -52,7 +52,7 @@ var SearchInput = ({ ref, size = "md", appearance = "standard", theme, className
 		});
 		return /* @__PURE__ */ jsx(ActionIcon, {
 			label: clearText,
-			theme: "neutral",
+			tone: "neutral",
 			size: iconSize,
 			onClick: handleClear,
 			className: "absolute top-1/2 right-1 -translate-y-1/2",
@@ -62,7 +62,7 @@ var SearchInput = ({ ref, size = "md", appearance = "standard", theme, className
 	return /* @__PURE__ */ jsxs(InputBackground, {
 		size,
 		appearance,
-		theme,
+		fill,
 		className: cn("relative", "w-auto", className),
 		children: [/* @__PURE__ */ jsx(InputText, {
 			ref: composedInputRef,

package/dist/components/search-input/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport { useComposedRefs } from '@radix-ui/react-compose-refs'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { useCallbackRef } from '../../utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Input, InputBackground, InputText } from '../input/Input'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  base: ['text-grey-700', 'absolute', 'pointer-events-none'],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-2.5', 'size-5'],\n      lg: ['right-2.5', 'size-5']\n    }\n  }\n})\n\nexport const SearchInput = ({\n  ref,\n  size = 'md',\n  appearance = 'standard',\n  theme,\n  className,\n  value,\n  defaultValue = '',\n  onValueChange,\n  clearText = 'Clear',\n  onChange,\n  ...rest\n}: SearchInputProps) => {\n  const [inputElRef, setInputElRef] = useCallbackRef()\n  const [innerValue, setInnerValue] = React.useState(defaultValue)\n  // Derived during render — mirroring `value` into state via an effect would\n  // paint one stale frame per controlled update.\n  const currentValue = value ?? innerValue\n  const activeIcon = currentValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n\n  const iconSize = getFieldIconSize(size)\n\n  const composedInputRef = useComposedRefs(\n    ref as React.Ref<HTMLElement>,\n    setInputElRef\n  )\n\n  const handleClear = () => {\n    const inputEl = inputElRef.current\n    if (!inputEl) return\n\n    // https://stackoverflow.com/a/46012210\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      window.HTMLInputElement.prototype,\n      'value'\n    )?.set\n    nativeInputValueSetter?.call?.(inputEl, '')\n    const ev2 = new Event('input', {\n      bubbles: true\n    })\n    inputEl.dispatchEvent(ev2)\n    inputEl.focus()\n    onValueChange?.('')\n  }\n\n  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event)\n\n    const newValue = event.target.value\n    setInnerValue(newValue)\n    onValueChange?.(newValue)\n  }\n\n  const getIcon = () => {\n    if (activeIcon === INPUT_ICON.SEARCH)\n      return (\n        <StyledIcon\n          is={Search}\n          size={size}\n          className={cn(\n            size == 'sm' ? 'size-4' : 'size-5',\n            'top-1/2',\n            '-translate-y-1/2'\n          )}\n        />\n      )\n\n    return (\n      <ActionIcon\n        label={clearText}\n        theme=\"neutral\"\n        size={iconSize}\n        onClick={handleClear}\n        className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    )\n  }\n\n  return (\n    <InputBackground\n      size={size}\n      appearance={appearance}\n      theme={theme}\n      className={cn('relative', 'w-auto', className)}\n    >\n      <InputText\n        ref={composedInputRef}\n        size={size}\n        type=\"search\"\n        {...rest}\n        value={currentValue}\n        onChange={handleOnChange}\n        className={cn(\n          size === 'sm' ? 'pr-8' : 'pr-10',\n          '[&::-webkit-search-decoration]:appearance-none',\n          '[&::-webkit-search-cancel-button]:appearance-none',\n          '[&::-webkit-search-results-button]:appearance-none'\n        )}\n      />\n      {getIcon()}\n    </InputBackground>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AA0BA,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;CAAqB;CACzD,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,aAAa,QAAQ;EAC1B,IAAI,CAAC,aAAa,QAAQ;CAC5B,EACF;AACF,CAAC;AAED,IAAa,eAAe,EAC1B,KACA,OAAO,MACP,aAAa,YACb,OACA,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,WACmB;CACtB,MAAM,CAAC,YAAY,iBAAiB,eAAe;CACnD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,YAAY;CAG/D,MAAM,eAAe,SAAS;CAC9B,MAAM,aAAa,eAAA,UAAA;CAEnB,MAAM,WAAW,iBAAiB,IAAI;CAEtC,MAAM,mBAAmB,gBACvB,KACA,aACF;CAEA,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAOd,CAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,OACF,CAAC,EAAE,IAAA,EACqB,OAAO,SAAS,EAAE;EAC1C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,KACX,CAAC;EACD,QAAQ,cAAc,GAAG;EACzB,QAAQ,MAAM;EACd,gBAAgB,EAAE;CACpB;CAEA,MAAM,kBAAkB,UAA+C;EACrE,WAAW,KAAK;EAEhB,MAAM,WAAW,MAAM,OAAO;EAC9B,cAAc,QAAQ;EACtB,gBAAgB,QAAQ;CAC1B;CAEA,MAAM,gBAAgB;EACpB,IAAI,eAAA,UACF,OACE,oBAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,GACT,QAAQ,OAAO,WAAW,UAC1B,WACA,kBACF;EACD,CAAA;EAGL,OACE,oBAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACR,CAAA;CAEhB;CAEA,OACE,qBAAC,iBAAD;EACQ;EACM;EACL;EACP,WAAW,GAAG,YAAY,UAAU,SAAS;YAJ/C,CAME,oBAAC,WAAD;GACE,KAAK;GACC;GACN,MAAK;GACL,GAAI;GACJ,OAAO;GACP,UAAU;GACV,WAAW,GACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,oDACF;EACD,CAAA,GACA,QAAQ,CACM;;AAErB"}
+{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport { useComposedRefs } from '@radix-ui/react-compose-refs'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { useCallbackRef } from '../../utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Input, InputBackground, InputText } from '../input/Input'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md' | 'lg'\n  className?: string\n  value?: string\n  defaultValue?: string\n  onValueChange?: (newValue: string) => void\n  clearText?: string\n  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n  SEARCH = 'SEARCH',\n  CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n  base: ['text-icon-subtle', 'absolute', 'pointer-events-none'],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-2.5', 'size-5'],\n      lg: ['right-2.5', 'size-5']\n    }\n  }\n})\n\nexport const SearchInput = ({\n  ref,\n  size = 'md',\n  appearance = 'standard',\n  fill,\n  className,\n  value,\n  defaultValue = '',\n  onValueChange,\n  clearText = 'Clear',\n  onChange,\n  ...rest\n}: SearchInputProps) => {\n  const [inputElRef, setInputElRef] = useCallbackRef()\n  const [innerValue, setInnerValue] = React.useState(defaultValue)\n  // Derived during render — mirroring `value` into state via an effect would\n  // paint one stale frame per controlled update.\n  const currentValue = value ?? innerValue\n  const activeIcon = currentValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n\n  const iconSize = getFieldIconSize(size)\n\n  const composedInputRef = useComposedRefs(\n    ref as React.Ref<HTMLElement>,\n    setInputElRef\n  )\n\n  const handleClear = () => {\n    const inputEl = inputElRef.current\n    if (!inputEl) return\n\n    // https://stackoverflow.com/a/46012210\n    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n      window.HTMLInputElement.prototype,\n      'value'\n    )?.set\n    nativeInputValueSetter?.call?.(inputEl, '')\n    const ev2 = new Event('input', {\n      bubbles: true\n    })\n    inputEl.dispatchEvent(ev2)\n    inputEl.focus()\n    onValueChange?.('')\n  }\n\n  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(event)\n\n    const newValue = event.target.value\n    setInnerValue(newValue)\n    onValueChange?.(newValue)\n  }\n\n  const getIcon = () => {\n    if (activeIcon === INPUT_ICON.SEARCH)\n      return (\n        <StyledIcon\n          is={Search}\n          size={size}\n          className={cn(\n            size == 'sm' ? 'size-4' : 'size-5',\n            'top-1/2',\n            '-translate-y-1/2'\n          )}\n        />\n      )\n\n    return (\n      <ActionIcon\n        label={clearText}\n        tone=\"neutral\"\n        size={iconSize}\n        onClick={handleClear}\n        className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    )\n  }\n\n  return (\n    <InputBackground\n      size={size}\n      appearance={appearance}\n      fill={fill}\n      className={cn('relative', 'w-auto', className)}\n    >\n      <InputText\n        ref={composedInputRef}\n        size={size}\n        type=\"search\"\n        {...rest}\n        value={currentValue}\n        onChange={handleOnChange}\n        className={cn(\n          size === 'sm' ? 'pr-8' : 'pr-10',\n          '[&::-webkit-search-decoration]:appearance-none',\n          '[&::-webkit-search-cancel-button]:appearance-none',\n          '[&::-webkit-search-results-button]:appearance-none'\n        )}\n      />\n      {getIcon()}\n    </InputBackground>\n  )\n}\n"],"mappings":";;;;;;;;;;;;AA0BA,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAoB;EAAY;CAAqB;CAC5D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,aAAa,QAAQ;EAC1B,IAAI,CAAC,aAAa,QAAQ;CAC5B,EACF;AACF,CAAC;AAED,IAAa,eAAe,EAC1B,KACA,OAAO,MACP,aAAa,YACb,MACA,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,WACmB;CACtB,MAAM,CAAC,YAAY,iBAAiB,eAAe;CACnD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,YAAY;CAG/D,MAAM,eAAe,SAAS;CAC9B,MAAM,aAAa,eAAA,UAAA;CAEnB,MAAM,WAAW,iBAAiB,IAAI;CAEtC,MAAM,mBAAmB,gBACvB,KACA,aACF;CAEA,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;EAC3B,IAAI,CAAC,SAAS;EAOd,CAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,OACF,CAAC,EAAE,IAAA,EACqB,OAAO,SAAS,EAAE;EAC1C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,KACX,CAAC;EACD,QAAQ,cAAc,GAAG;EACzB,QAAQ,MAAM;EACd,gBAAgB,EAAE;CACpB;CAEA,MAAM,kBAAkB,UAA+C;EACrE,WAAW,KAAK;EAEhB,MAAM,WAAW,MAAM,OAAO;EAC9B,cAAc,QAAQ;EACtB,gBAAgB,QAAQ;CAC1B;CAEA,MAAM,gBAAgB;EACpB,IAAI,eAAA,UACF,OACE,oBAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,GACT,QAAQ,OAAO,WAAW,UAC1B,WACA,kBACF;EACD,CAAA;EAGL,OACE,oBAAC,YAAD;GACE,OAAO;GACP,MAAK;GACL,MAAM;GACN,SAAS;GACT,WAAU;aAEV,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACR,CAAA;CAEhB;CAEA,OACE,qBAAC,iBAAD;EACQ;EACM;EACN;EACN,WAAW,GAAG,YAAY,UAAU,SAAS;YAJ/C,CAME,oBAAC,WAAD;GACE,KAAK;GACC;GACN,MAAK;GACL,GAAI;GACJ,OAAO;GACP,UAAU;GACV,WAAW,GACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,oDACF;EACD,CAAA,GACA,QAAQ,CACM;;AAErB"}

package/dist/components/section-message/SectionMessage.context.d.ts

@@ -1,16 +1,18 @@
 import * as React from 'react';
-import type { SectionMessageTheme } from './SectionMessage';
+import type { SectionMessageFill, SectionMessageTone } from './SectionMessage';
 export type SectionMessageContextValue = {
-    theme: SectionMessageTheme;
+    tone?: SectionMessageTone;
+    fill: SectionMessageFill;
     hasIcon: boolean;
     setHasIcon: React.Dispatch<React.SetStateAction<boolean>>;
     hasDismiss: boolean;
     setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>;
 };
 export type SectionMessageProviderProps = {
-    theme: SectionMessageTheme;
+    tone?: SectionMessageTone;
+    fill: SectionMessageFill;
     children: React.ReactNode;
 };
 export declare const SectionMessageContext: React.Context<SectionMessageContextValue | null>;
-export declare const SectionMessageProvider: ({ theme, children }: SectionMessageProviderProps) => React.JSX.Element;
+export declare const SectionMessageProvider: ({ tone, fill, children }: SectionMessageProviderProps) => React.JSX.Element;
 export declare const useSectionMessageContext: () => SectionMessageContextValue;

package/dist/components/section-message/SectionMessage.context.js

@@ -2,18 +2,20 @@ import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/section-message/SectionMessage.context.tsx
 var SectionMessageContext = React$1.createContext(null);
-var SectionMessageProvider = ({ theme = "info", children }) => {
+var SectionMessageProvider = ({ tone, fill, children }) => {
 	const [hasIcon, setHasIcon] = React$1.useState(false);
 	const [hasDismiss, setHasDismiss] = React$1.useState(false);
 	return /* @__PURE__ */ jsx(SectionMessageContext, {
 		value: React$1.useMemo(() => ({
-			theme,
+			tone,
+			fill,
 			hasIcon,
 			setHasIcon,
 			hasDismiss,
 			setHasDismiss
 		}), [
-			theme,
+			tone,
+			fill,
 			hasIcon,
 			setHasIcon,
 			hasDismiss,

package/dist/components/section-message/SectionMessage.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessage.context.js","names":[],"sources":["../../../src/components/section-message/SectionMessage.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { SectionMessageTheme } from './SectionMessage'\n\nexport type SectionMessageContextValue = {\n  theme: SectionMessageTheme\n  hasIcon: boolean\n  setHasIcon: React.Dispatch<React.SetStateAction<boolean>>\n  hasDismiss: boolean\n  setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>\n}\nexport type SectionMessageProviderProps = {\n  theme: SectionMessageTheme\n  children: React.ReactNode\n}\n\nexport const SectionMessageContext =\n  React.createContext<SectionMessageContextValue | null>(null)\n\nexport const SectionMessageProvider = ({\n  theme = 'info',\n  children\n}: SectionMessageProviderProps) => {\n  const [hasIcon, setHasIcon] = React.useState(false)\n  const [hasDismiss, setHasDismiss] = React.useState(false)\n\n  const value = React.useMemo<SectionMessageContextValue>(\n    () => ({ theme, hasIcon, setHasIcon, hasDismiss, setHasDismiss }),\n    [theme, hasIcon, setHasIcon, hasDismiss, setHasDismiss]\n  )\n\n  return <SectionMessageContext value={value}>{children}</SectionMessageContext>\n}\n\nexport const useSectionMessageContext = (): SectionMessageContextValue => {\n  const context = React.use(SectionMessageContext)\n\n  if (!context) {\n    throw new Error(\n      'useSectionMessageContext must be used within a SectionMessageProvider'\n    )\n  }\n\n  return context\n}\n"],"mappings":";;;AAgBA,IAAa,wBACX,QAAM,cAAiD,IAAI;AAE7D,IAAa,0BAA0B,EACrC,QAAQ,QACR,eACiC;CACjC,MAAM,CAAC,SAAS,cAAc,QAAM,SAAS,KAAK;CAClD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,KAAK;CAOxD,OAAO,oBAAC,uBAAD;EAA8B,OALvB,QAAM,eACX;GAAE;GAAO;GAAS;GAAY;GAAY;EAAc,IAC/D;GAAC;GAAO;GAAS;GAAY;GAAY;EAAa,CAGnB;EAAQ;CAAgC,CAAA;AAC/E;AAEA,IAAa,iCAA6D;CACxE,MAAM,UAAU,QAAM,IAAI,qBAAqB;CAE/C,IAAI,CAAC,SACH,MAAM,IAAI,MACR,uEACF;CAGF,OAAO;AACT"}
+{"version":3,"file":"SectionMessage.context.js","names":[],"sources":["../../../src/components/section-message/SectionMessage.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport type { SectionMessageFill, SectionMessageTone } from './SectionMessage'\n\nexport type SectionMessageContextValue = {\n  tone?: SectionMessageTone\n  fill: SectionMessageFill\n  hasIcon: boolean\n  setHasIcon: React.Dispatch<React.SetStateAction<boolean>>\n  hasDismiss: boolean\n  setHasDismiss: React.Dispatch<React.SetStateAction<boolean>>\n}\nexport type SectionMessageProviderProps = {\n  tone?: SectionMessageTone\n  fill: SectionMessageFill\n  children: React.ReactNode\n}\n\nexport const SectionMessageContext =\n  React.createContext<SectionMessageContextValue | null>(null)\n\nexport const SectionMessageProvider = ({\n  tone,\n  fill,\n  children\n}: SectionMessageProviderProps) => {\n  const [hasIcon, setHasIcon] = React.useState(false)\n  const [hasDismiss, setHasDismiss] = React.useState(false)\n\n  const value = React.useMemo<SectionMessageContextValue>(\n    () => ({ tone, fill, hasIcon, setHasIcon, hasDismiss, setHasDismiss }),\n    [tone, fill, hasIcon, setHasIcon, hasDismiss, setHasDismiss]\n  )\n\n  return <SectionMessageContext value={value}>{children}</SectionMessageContext>\n}\n\nexport const useSectionMessageContext = (): SectionMessageContextValue => {\n  const context = React.use(SectionMessageContext)\n\n  if (!context) {\n    throw new Error(\n      'useSectionMessageContext must be used within a SectionMessageProvider'\n    )\n  }\n\n  return context\n}\n"],"mappings":";;;AAkBA,IAAa,wBACX,QAAM,cAAiD,IAAI;AAE7D,IAAa,0BAA0B,EACrC,MACA,MACA,eACiC;CACjC,MAAM,CAAC,SAAS,cAAc,QAAM,SAAS,KAAK;CAClD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,KAAK;CAOxD,OAAO,oBAAC,uBAAD;EAA8B,OALvB,QAAM,eACX;GAAE;GAAM;GAAM;GAAS;GAAY;GAAY;EAAc,IACpE;GAAC;GAAM;GAAM;GAAS;GAAY;GAAY;EAAa,CAGxB;EAAQ;CAAgC,CAAA;AAC/E;AAEA,IAAa,iCAA6D;CACxE,MAAM,UAAU,QAAM,IAAI,qBAAqB;CAE/C,IAAI,CAAC,SACH,MAAM,IAAI,MACR,uEACF;CAGF,OAAO;AACT"}

package/dist/components/section-message/SectionMessage.d.ts

@@ -1,22 +1,34 @@
 import * as React from 'react';
+import type { TColorAccent } from '../../experiments/theme/Theme';
 declare const StyledSectionMessage: import("../..").PolymorphicComponent<{
     ({ disabled, dismissed, onDismiss, ...rest }: React.PropsWithChildren<import("../dismissible/DismissibleRoot").DismissibleRootInternalProps & import("../dismissible/DismissibleRoot").DismissibleRootProps>): React.JSX.Element;
     displayName: string;
 } & {
     Trigger: ({ asChild, ...rest }: React.PropsWithChildren<import("../dismissible/DismissibleTrigger").DismissibleTriggerProps>) => React.JSX.Element;
 }, {
-    theme?: "error" | "info" | "neutral" | "success" | "warning" | undefined;
+    fill?: "bold" | "muted" | "subtle" | "surface" | undefined;
+    paleText?: boolean | undefined;
     hasIcon?: boolean | undefined;
     hasDismiss?: boolean | undefined;
 }>;
-declare const SectionMessageRoot: ({ children, ...rest }: React.ComponentProps<typeof StyledSectionMessage> & {
+declare const SectionMessageRoot: ({ children, accent, ...rest }: Omit<React.ComponentProps<typeof StyledSectionMessage>, 'fill' | 'paleText'> & {
+    accent?: SectionMessageAccent;
     className?: string;
 }) => React.JSX.Element;
-export type SectionMessageTheme = 'success' | 'warning' | 'error' | 'neutral' | 'info';
-export type SectionMessageProps = React.ComponentProps<typeof SectionMessageRoot> & {
-    theme?: SectionMessageTheme;
+export type SectionMessageTone = 'neutral' | Extract<TColorAccent, 'success' | 'warning' | 'info' | 'danger'>;
+export type SectionMessageAccent = Exclude<TColorAccent, 'success' | 'warning' | 'info' | 'danger'>;
+export type SectionMessageFill = 'subtle' | 'muted' | 'surface' | 'bold';
+export type SectionMessageColorProps = {
+    tone?: SectionMessageTone;
+    accent?: never;
+} | {
+    accent?: SectionMessageAccent;
+    tone?: never;
 };
-export declare const SectionMessage: (({ theme, ...rest }: SectionMessageProps) => React.JSX.Element) & {
+export type SectionMessageProps = Omit<React.ComponentProps<typeof SectionMessageRoot>, 'accent'> & SectionMessageColorProps & {
+    fill?: SectionMessageFill;
+};
+export declare const SectionMessage: (({ tone, accent, fill, ...rest }: SectionMessageProps) => React.JSX.Element) & {
     Title: (props: import("../text/Text").TextProps) => React.JSX.Element;
     Description: ({ className, ...rest }: React.ComponentProps<typeof import("..").Text>) => React.JSX.Element;
     Icon: ({ className, is, ...rest }: Partial<Omit<{
@@ -27,7 +39,7 @@ export declare const SectionMessage: (({ theme, ...rest }: SectionMessageProps)
         is: React.FC<React.SVGProps<SVGSVGElement>>;
         as?: never;
     }>) => React.JSX.Element;
-    Dismiss: ({ label, className, ...rest }: React.ComponentProps<typeof import("..").ActionIcon>) => React.JSX.Element;
+    Dismiss: ({ label, className, ...rest }: Omit<React.ComponentProps<typeof import("..").ActionIcon>, 'label' | 'children'> & Partial<Pick<React.ComponentProps<typeof import("..").ActionIcon>, 'label' | 'children'>>) => React.JSX.Element;
     Content: import("../..").PolymorphicComponent<"div", unknown>;
     Actions: ({ className, ...rest }: React.ComponentProps<'div'>) => React.JSX.Element;
 };

package/dist/components/section-message/SectionMessage.js

@@ -19,25 +19,31 @@ var StyledSectionMessage = styled(Dismissible, {
 		"min-h-12",
 		"p-4",
 		"border",
-		"border-white"
+		"text-on-accent-subtle"
 	],
 	variants: {
-		theme: {
-			success: ["bg-success-light", "text-success-dark"],
-			warning: ["bg-warning-light", "text-warning-text"],
-			error: ["bg-danger-light", "text-danger-dark"],
-			neutral: ["bg-grey-100", "text-grey-1000"],
-			info: ["bg-info-light", "text-info-dark"]
+		fill: {
+			subtle: ["border-(--background-color-surface)", "bg-accent-subtle"],
+			muted: ["border-(--background-color-surface)", "bg-accent-muted"],
+			surface: ["border-accent", "bg-surface"],
+			bold: [
+				"border-(--background-color-surface)",
+				"bg-accent-emphasis",
+				"text-on-accent-emphasis"
+			]
 		},
+		paleText: { true: ["text-accent"] },
 		hasIcon: { true: ["pl-10"] },
 		hasDismiss: { true: ["pr-12"] }
 	}
 });
-var SectionMessageRoot = ({ children, ...rest }) => {
-	const { theme, hasIcon, hasDismiss } = useSectionMessageContext();
+var SectionMessageRoot = ({ children, accent, ...rest }) => {
+	const { tone, fill, hasIcon, hasDismiss } = useSectionMessageContext();
 	return /* @__PURE__ */ jsx(StyledSectionMessage, {
 		...rest,
-		theme,
+		fill,
+		paleText: tone === "warning" && fill !== "bold",
+		"data-color-accent": accent ?? (tone === "neutral" ? "grey" : tone),
 		hasIcon,
 		hasDismiss,
 		children: /* @__PURE__ */ jsx("div", {
@@ -46,9 +52,13 @@ var SectionMessageRoot = ({ children, ...rest }) => {
 		})
 	});
 };
-var SectionMessageComponent = ({ theme = "info", ...rest }) => /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(SectionMessageProvider, {
-	theme,
-	children: /* @__PURE__ */ jsx(SectionMessageRoot, { ...rest })
+var SectionMessageComponent = ({ tone, accent, fill = "subtle", ...rest }) => /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(SectionMessageProvider, {
+	tone: accent ? void 0 : tone ?? "neutral",
+	fill,
+	children: /* @__PURE__ */ jsx(SectionMessageRoot, {
+		accent,
+		...rest
+	})
 }) });
 var SectionMessage = /* @__PURE__ */ Object.assign(SectionMessageComponent, {
 	Title: SectionMessageTitle,