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

package/dist/components/select/Select.js

@@ -8,7 +8,7 @@ var StyledSelect = styled("select", {
 		"appearance-none",
 		"[background-repeat:no-repeat,repeat-x]",
 		"rounded-md",
-		"text-grey-1000",
+		"text-default",
 		"block",
 		"font-body",
 		"font-normal",
@@ -49,23 +49,23 @@ var StyledSelect = styled("select", {
 			]
 		},
 		state: { error: [] },
-		theme: {
-			white: [],
-			grey: []
+		fill: {
+			surface: [],
+			subtle: []
 		},
 		appearance: {
 			standard: [
-				"bg-white",
+				"bg-surface",
 				"border",
-				"border-grey-700",
-				"focus:border-primary-800",
+				"border-strong",
+				"focus:border-focus",
 				"focus:outline-none"
 			],
 			modern: [
-				"bg-grey-100",
+				"bg-input",
 				"border-none",
 				"focus:outline-2",
-				"focus:outline-blue-800",
+				"focus:outline-focus",
 				"focus:outline-offset-1",
 				"focus:outline-solid",
 				"focus:z-1"
@@ -76,22 +76,22 @@ var StyledSelect = styled("select", {
 		{
 			state: "error",
 			appearance: "standard",
-			class: ["border-danger"]
+			class: ["border-danger-solid"]
 		},
 		{
 			state: "error",
 			appearance: "modern",
-			class: ["bg-danger-light", "focus:outline-danger"]
+			class: ["bg-danger-subtle", "focus:outline-danger"]
 		},
 		{
 			appearance: "modern",
-			theme: "white",
-			class: ["bg-white"]
+			fill: "surface",
+			class: ["bg-surface"]
 		},
 		{
 			appearance: "modern",
-			theme: "grey",
-			class: ["bg-grey-100"]
+			fill: "subtle",
+			class: ["bg-input"]
 		}
 	]
 }, {

package/dist/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\n\nconst StyledSelect = styled(\n  'select',\n  {\n    base: [\n      'bg-(image:--bg-chevron)',\n      'appearance-none',\n      '[background-repeat:no-repeat,repeat-x]',\n      'rounded-md',\n      'text-grey-1000',\n      'block',\n      'font-body',\n      'font-normal',\n      'leading-[1.4]',\n      'w-full',\n      'hover:cursor-pointer',\n      '-ms-expand:hidden',\n      'disabled:opacity-30',\n      'disabled:cursor-not-allowed',\n      '*[[disabled]]:opacity-30',\n      '*[[disabled]]:cursor-not-allowed'\n    ],\n    variants: {\n      size: {\n        sm: [\n          'bg-position-[right_--spacing(2)_top_50%,0_0]',\n          'bg-size-[18px_auto,100%]',\n          'text-sm',\n          'h-8',\n          'pl-2',\n          'pr-8'\n        ],\n        md: [\n          'bg-position-[right_--spacing(3)_top_50%,0_0]',\n          'bg-size-[20px_auto,100%]',\n          'text-md',\n          'h-10',\n          'pl-3',\n          'pr-10'\n        ],\n        lg: [\n          'bg-position-[right_--spacing(3)_top_50%,0_0]',\n          'bg-size-[20px_auto,100%]',\n          'text-md',\n          'h-12',\n          'pl-3',\n          'pr-10'\n        ]\n      },\n      state: {\n        error: []\n      },\n      theme: {\n        white: [],\n        grey: []\n      },\n      appearance: {\n        standard: [\n          'bg-white',\n          'border',\n          'border-grey-700',\n          'focus:border-primary-800',\n          'focus:outline-none'\n        ],\n        modern: [\n          'bg-grey-100',\n          'border-none',\n          'focus:outline-2',\n          'focus:outline-blue-800',\n          'focus:outline-offset-1',\n          'focus:outline-solid',\n          'focus:z-1'\n        ]\n      }\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: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, enableResponsiveVariants: true }\n)\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select = ({\n  ref,\n  placeholder,\n  children,\n  size = 'md',\n  appearance = 'standard',\n  ...rest\n}: SelectProps) => {\n  // Type assertion needed due to responsive variant size prop compatibility\n  const props: React.ComponentProps<typeof StyledSelect> = {\n    size,\n    appearance,\n    ref,\n    ...rest\n  }\n\n  if ([rest.value, rest.defaultValue].every((value) => value === undefined)) {\n    props.defaultValue = ''\n  }\n\n  return (\n    <StyledSelect {...props}>\n      {placeholder && (\n        <option disabled hidden value=\"\">\n          {placeholder}\n        </option>\n      )}\n      {children}\n    </StyledSelect>\n  )\n}\n"],"mappings":";;;;AAKA,IAAM,eAAe,OACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,OAAO,EACL,OAAO,CAAC,EACV;EACA,OAAO;GACL,OAAO,CAAC;GACR,MAAM,CAAC;EACT;EACA,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;CACF;CACA,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,eAAe;EACzB;EACA;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,sBAAsB;EACnD;EACA;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,UAAU;EACpB;EACA;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,aAAa;EACvB;CACF;AACF,GACA;CAAE,oBAAoB;CAAO,0BAA0B;AAAK,CAC9D;AAeA,IAAa,UAAU,EACrB,KACA,aACA,UACA,OAAO,MACP,aAAa,YACb,GAAG,WACc;CAEjB,MAAM,QAAmD;EACvD;EACA;EACA;EACA,GAAG;CACL;CAEA,IAAI,CAAC,KAAK,OAAO,KAAK,YAAY,CAAC,CAAC,OAAO,UAAU,UAAU,KAAA,CAAS,GACtE,MAAM,eAAe;CAGvB,OACE,qBAAC,cAAD;EAAc,GAAI;YAAlB,CACG,eACC,oBAAC,UAAD;GAAQ,UAAA;GAAS,QAAA;GAAO,OAAM;aAC3B;EACK,CAAA,GAET,QACW;;AAElB"}
+{"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\n\nconst StyledSelect = styled(\n  'select',\n  {\n    base: [\n      'bg-(image:--bg-chevron)',\n      'appearance-none',\n      '[background-repeat:no-repeat,repeat-x]',\n      'rounded-md',\n      'text-default',\n      'block',\n      'font-body',\n      'font-normal',\n      'leading-[1.4]',\n      'w-full',\n      'hover:cursor-pointer',\n      '-ms-expand:hidden',\n      'disabled:opacity-30',\n      'disabled:cursor-not-allowed',\n      '*[[disabled]]:opacity-30',\n      '*[[disabled]]:cursor-not-allowed'\n    ],\n    variants: {\n      size: {\n        sm: [\n          'bg-position-[right_--spacing(2)_top_50%,0_0]',\n          'bg-size-[18px_auto,100%]',\n          'text-sm',\n          'h-8',\n          'pl-2',\n          'pr-8'\n        ],\n        md: [\n          'bg-position-[right_--spacing(3)_top_50%,0_0]',\n          'bg-size-[20px_auto,100%]',\n          'text-md',\n          'h-10',\n          'pl-3',\n          'pr-10'\n        ],\n        lg: [\n          'bg-position-[right_--spacing(3)_top_50%,0_0]',\n          'bg-size-[20px_auto,100%]',\n          'text-md',\n          'h-12',\n          'pl-3',\n          'pr-10'\n        ]\n      },\n      state: {\n        error: []\n      },\n      fill: {\n        surface: [],\n        subtle: []\n      },\n      appearance: {\n        standard: [\n          'bg-surface',\n          'border',\n          'border-strong',\n          'focus:border-focus',\n          'focus:outline-none'\n        ],\n        modern: [\n          'bg-input',\n          'border-none',\n          'focus:outline-2',\n          'focus:outline-focus',\n          'focus:outline-offset-1',\n          'focus:outline-solid',\n          'focus:z-1'\n        ]\n      }\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:outline-danger']\n      },\n      {\n        appearance: 'modern',\n        fill: 'surface',\n        class: ['bg-surface']\n      },\n      {\n        appearance: 'modern',\n        fill: 'subtle',\n        class: ['bg-input']\n      }\n    ]\n  },\n  { enablePolymorphism: false, enableResponsiveVariants: true }\n)\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select = ({\n  ref,\n  placeholder,\n  children,\n  size = 'md',\n  appearance = 'standard',\n  ...rest\n}: SelectProps) => {\n  // Type assertion needed due to responsive variant size prop compatibility\n  const props: React.ComponentProps<typeof StyledSelect> = {\n    size,\n    appearance,\n    ref,\n    ...rest\n  }\n\n  if ([rest.value, rest.defaultValue].every((value) => value === undefined)) {\n    props.defaultValue = ''\n  }\n\n  return (\n    <StyledSelect {...props}>\n      {placeholder && (\n        <option disabled hidden value=\"\">\n          {placeholder}\n        </option>\n      )}\n      {children}\n    </StyledSelect>\n  )\n}\n"],"mappings":";;;;AAKA,IAAM,eAAe,OACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;GACA,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,OAAO,EACL,OAAO,CAAC,EACV;EACA,MAAM;GACJ,SAAS,CAAC;GACV,QAAQ,CAAC;EACX;EACA,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;CACF;CACA,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,qBAAqB;EAC/B;EACA;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,oBAAoB,sBAAsB;EACpD;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY;EACtB;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,UAAU;EACpB;CACF;AACF,GACA;CAAE,oBAAoB;CAAO,0BAA0B;AAAK,CAC9D;AAeA,IAAa,UAAU,EACrB,KACA,aACA,UACA,OAAO,MACP,aAAa,YACb,GAAG,WACc;CAEjB,MAAM,QAAmD;EACvD;EACA;EACA;EACA,GAAG;CACL;CAEA,IAAI,CAAC,KAAK,OAAO,KAAK,YAAY,CAAC,CAAC,OAAO,UAAU,UAAU,KAAA,CAAS,GACtE,MAAM,eAAe;CAGvB,OACE,qBAAC,cAAD;EAAc,GAAI;YAAlB,CACG,eACC,oBAAC,UAAD;GAAQ,UAAA;GAAS,QAAA;GAAO,OAAM;aAC3B;EACK,CAAA,GAET,QACW;;AAElB"}

package/dist/components/select-field/SelectField.d.ts

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

package/dist/components/select-field/SelectField.js

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

package/dist/components/select-field/SelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","names":[],"sources":["../../../src/components/select-field/SelectField.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 { Select, type SelectProps } from '../select/Select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n  className,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  appearance,\n  theme,\n  ...rest\n}: SelectFieldProps) => {\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      <Select\n        name={name}\n        id={name}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...rest}\n        ref={ref}\n        {...(error && { state: 'error' })}\n      >\n        {children}\n      </Select>\n    </FieldWrapper>\n  )\n}\n\nSelectField.displayName = 'SelectField'\n"],"mappings":";;;;;;;;AAaA,IAAa,eAAe,EAC1B,WACA,WACA,UACA,MACA,OACA,YACA,QACA,aACA,YACA,OACA,GAAG,WACmB;CACtB,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,QAAD;GACQ;GACN,IAAI;GACJ,YAAY;GACZ,OAAO;GACP,GAAI;GACC;GACL,GAAK,SAAS,EAAE,OAAO,QAAQ;GAE9B;EACK,CAAA;CACI,CAAA;AAElB;AAEA,YAAY,cAAc"}
+{"version":3,"file":"SelectField.js","names":[],"sources":["../../../src/components/select-field/SelectField.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 { Select, type SelectProps } from '../select/Select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n  className,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  appearance,\n  fill,\n  ...rest\n}: SelectFieldProps) => {\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      <Select\n        name={name}\n        id={name}\n        appearance={formAppearance}\n        fill={formFill}\n        {...rest}\n        ref={ref}\n        {...(error && { state: 'error' })}\n      >\n        {children}\n      </Select>\n    </FieldWrapper>\n  )\n}\n\nSelectField.displayName = 'SelectField'\n"],"mappings":";;;;;;;;AAaA,IAAa,eAAe,EAC1B,WACA,WACA,UACA,MACA,OACA,YACA,QACA,aACA,YACA,MACA,GAAG,WACmB;CACtB,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,QAAD;GACQ;GACN,IAAI;GACJ,YAAY;GACZ,MAAM;GACN,GAAI;GACC;GACL,GAAK,SAAS,EAAE,OAAO,QAAQ;GAE9B;EACK,CAAA;CACI,CAAA;AAElB;AAEA,YAAY,cAAc"}

package/dist/components/select-menu/SelectMenu.context.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 type SelectMenuContextValue = {
     size: 'sm' | 'md' | 'lg';
-    theme: 'white' | 'grey';
+    fill: 'surface' | 'subtle';
     state?: 'error';
 };
 export declare const SelectMenuContext: React.Context<SelectMenuContextValue>;

package/dist/components/select-menu/SelectMenu.context.js

@@ -2,7 +2,7 @@ import * as React$1 from "react";
 //#region src/components/select-menu/SelectMenu.context.tsx
 var SelectMenuContext = React$1.createContext({
 	size: "md",
-	theme: "grey"
+	fill: "subtle"
 });
 var useSelectMenuContext = () => React$1.use(SelectMenuContext);
 //#endregion

package/dist/components/select-menu/SelectMenu.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenu.context.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.context.tsx"],"sourcesContent":["import * as React from 'react'\n\ntype SelectMenuContextValue = {\n  size: 'sm' | 'md' | 'lg'\n  theme: 'white' | 'grey'\n  state?: 'error'\n}\n\nexport const SelectMenuContext = React.createContext<SelectMenuContextValue>({\n  size: 'md',\n  theme: 'grey'\n})\n\nexport const useSelectMenuContext = () => React.use(SelectMenuContext)\n"],"mappings":";;AAQA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,MAAM;CACN,OAAO;AACT,CAAC;AAED,IAAa,6BAA6B,QAAM,IAAI,iBAAiB"}
+{"version":3,"file":"SelectMenu.context.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.context.tsx"],"sourcesContent":["import * as React from 'react'\n\ntype SelectMenuContextValue = {\n  size: 'sm' | 'md' | 'lg'\n  fill: 'surface' | 'subtle'\n  state?: 'error'\n}\n\nexport const SelectMenuContext = React.createContext<SelectMenuContextValue>({\n  size: 'md',\n  fill: 'subtle'\n})\n\nexport const useSelectMenuContext = () => React.use(SelectMenuContext)\n"],"mappings":";;AAQA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,MAAM;CACN,MAAM;AACR,CAAC;AAED,IAAa,6BAA6B,QAAM,IAAI,iBAAiB"}

package/dist/components/select-menu/SelectMenu.d.ts

@@ -2,12 +2,12 @@ import * as React from 'react';
 import * as AriaComponents from 'react-aria-components';
 type SelectMenuProps = Omit<AriaComponents.SelectProps<object>, 'className' | 'style' | 'children'> & {
     size?: 'sm' | 'md' | 'lg';
-    theme?: 'white' | 'grey';
+    fill?: 'surface' | 'subtle';
     state?: 'error';
     className?: string;
     children?: React.ReactNode;
 };
-export declare const SelectMenu: (({ size, theme, state, className, children, ...rest }: SelectMenuProps) => React.JSX.Element) & {
+export declare const SelectMenu: (({ size, fill, state, className, children, ...rest }: SelectMenuProps) => React.JSX.Element) & {
     Trigger: ({ ref, placeholder, children, ...rest }: Omit<AriaComponents.ButtonProps & React.RefAttributes<HTMLButtonElement>, "aria-label" | "children"> & {
         placeholder?: string;
         children?: React.ReactNode;

package/dist/components/select-menu/SelectMenu.js

@@ -9,15 +9,15 @@ import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import * as AriaComponents from "react-aria-components";
 //#region src/components/select-menu/SelectMenu.tsx
-var SelectMenuRoot = ({ size = "md", theme = "grey", state, className, children, ...rest }) => {
+var SelectMenuRoot = ({ size = "md", fill = "subtle", state, className, children, ...rest }) => {
 	return /* @__PURE__ */ jsx(SelectMenuContext, {
 		value: React$1.useMemo(() => ({
 			size,
-			theme,
+			fill,
 			state
 		}), [
 			size,
-			theme,
+			fill,
 			state
 		]),
 		children: /* @__PURE__ */ jsx(AriaComponents.Select, {

package/dist/components/select-menu/SelectMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenu.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { cn } from '../../styled'\nimport { SelectMenuContext } from './SelectMenu.context'\nimport { SelectMenuContent } from './SelectMenuContent'\nimport { SelectMenuItem } from './SelectMenuItem'\nimport { SelectMenuLabel } from './SelectMenuLabel'\nimport { SelectMenuSeparator } from './SelectMenuSeparator'\nimport { SelectMenuTrigger } from './SelectMenuTrigger'\n\ntype SelectMenuProps = Omit<\n  AriaComponents.SelectProps<object>,\n  'className' | 'style' | 'children'\n> & {\n  size?: 'sm' | 'md' | 'lg'\n  theme?: 'white' | 'grey'\n  state?: 'error'\n  className?: string\n  children?: React.ReactNode\n}\n\nconst SelectMenuRoot = ({\n  size = 'md',\n  theme = 'grey',\n  state,\n  className,\n  children,\n  ...rest\n}: SelectMenuProps) => {\n  const value = React.useMemo(\n    () => ({ size, theme, state }),\n    [size, theme, state]\n  )\n  return (\n    <SelectMenuContext value={value}>\n      {/* w-full so the trigger fills its container even in flex/inline layouts\n          (react-aria wraps the trigger in an extra div). Consumers can override\n          the width — or anything else — via className, e.g. w-auto / w-64. */}\n      <AriaComponents.Select className={cn('w-full', className)} {...rest}>\n        {children}\n      </AriaComponents.Select>\n    </SelectMenuContext>\n  )\n}\n\nexport const SelectMenu = /* @__PURE__ */ Object.assign(SelectMenuRoot, {\n  Trigger: SelectMenuTrigger,\n  Content: SelectMenuContent,\n  Item: SelectMenuItem,\n  Group: AriaComponents.ListBoxSection,\n  Label: SelectMenuLabel,\n  Separator: SelectMenuSeparator\n})\n"],"mappings":";;;;;;;;;;;AAsBA,IAAM,kBAAkB,EACtB,OAAO,MACP,QAAQ,QACR,OACA,WACA,UACA,GAAG,WACkB;CAKrB,OACE,oBAAC,mBAAD;EAA0B,OALd,QAAM,eACX;GAAE;GAAM;GAAO;EAAM,IAC5B;GAAC;GAAM;GAAO;EAAK,CAGO;YAIxB,oBAAC,eAAe,QAAhB;GAAuB,WAAW,GAAG,UAAU,SAAS;GAAG,GAAI;GAC5D;EACoB,CAAA;CACN,CAAA;AAEvB;AAEA,IAAa,aAA6B,uBAAO,OAAO,gBAAgB;CACtE,SAAS;CACT,SAAS;CACT,MAAM;CACN,OAAO,eAAe;CACtB,OAAO;CACP,WAAW;AACb,CAAC"}
+{"version":3,"file":"SelectMenu.js","names":[],"sources":["../../../src/components/select-menu/SelectMenu.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { cn } from '../../styled'\nimport { SelectMenuContext } from './SelectMenu.context'\nimport { SelectMenuContent } from './SelectMenuContent'\nimport { SelectMenuItem } from './SelectMenuItem'\nimport { SelectMenuLabel } from './SelectMenuLabel'\nimport { SelectMenuSeparator } from './SelectMenuSeparator'\nimport { SelectMenuTrigger } from './SelectMenuTrigger'\n\ntype SelectMenuProps = Omit<\n  AriaComponents.SelectProps<object>,\n  'className' | 'style' | 'children'\n> & {\n  size?: 'sm' | 'md' | 'lg'\n  fill?: 'surface' | 'subtle'\n  state?: 'error'\n  className?: string\n  children?: React.ReactNode\n}\n\nconst SelectMenuRoot = ({\n  size = 'md',\n  fill = 'subtle',\n  state,\n  className,\n  children,\n  ...rest\n}: SelectMenuProps) => {\n  const value = React.useMemo(\n    () => ({ size, fill, state }),\n    [size, fill, state]\n  )\n  return (\n    <SelectMenuContext value={value}>\n      {/* w-full so the trigger fills its container even in flex/inline layouts\n          (react-aria wraps the trigger in an extra div). Consumers can override\n          the width — or anything else — via className, e.g. w-auto / w-64. */}\n      <AriaComponents.Select className={cn('w-full', className)} {...rest}>\n        {children}\n      </AriaComponents.Select>\n    </SelectMenuContext>\n  )\n}\n\nexport const SelectMenu = /* @__PURE__ */ Object.assign(SelectMenuRoot, {\n  Trigger: SelectMenuTrigger,\n  Content: SelectMenuContent,\n  Item: SelectMenuItem,\n  Group: AriaComponents.ListBoxSection,\n  Label: SelectMenuLabel,\n  Separator: SelectMenuSeparator\n})\n"],"mappings":";;;;;;;;;;;AAsBA,IAAM,kBAAkB,EACtB,OAAO,MACP,OAAO,UACP,OACA,WACA,UACA,GAAG,WACkB;CAKrB,OACE,oBAAC,mBAAD;EAA0B,OALd,QAAM,eACX;GAAE;GAAM;GAAM;EAAM,IAC3B;GAAC;GAAM;GAAM;EAAK,CAGQ;YAIxB,oBAAC,eAAe,QAAhB;GAAuB,WAAW,GAAG,UAAU,SAAS;GAAG,GAAI;GAC5D;EACoB,CAAA;CACN,CAAA;AAEvB;AAEA,IAAa,aAA6B,uBAAO,OAAO,gBAAgB;CACtE,SAAS;CACT,SAAS;CACT,MAAM;CACN,OAAO,eAAe;CACtB,OAAO;CACP,WAAW;AACb,CAAC"}

package/dist/components/select-menu/SelectMenuContent.js

@@ -1,15 +1,14 @@
 import { styled } from "../../styled.js";
+import { ThemePortalScope } from "../../experiments/theme/Theme.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import * as AriaComponents from "react-aria-components";
 //#region src/components/select-menu/SelectMenuContent.tsx
 var Content = styled(AriaComponents.Popover, {
 	base: [
-		"bg-white",
-		"rounded-md",
-		"shadow-lg",
+		"flex",
+		"flex-col",
 		"z-10",
-		"overflow-hidden",
 		"will-change-transform"
 	],
 	variants: { matchTriggerWidth: {
@@ -18,7 +17,12 @@ var Content = styled(AriaComponents.Popover, {
 	} }
 }, { enablePolymorphism: false });
 var Viewport = styled(AriaComponents.ListBox, { base: [
-	"max-h-[inherit]",
+	"bg-surface-overlay",
+	"rounded-md",
+	"shadow-(--shadow-floating-lg)",
+	"forced-colors:border",
+	"forced-colors:border-[CanvasText]",
+	"min-h-0",
 	"w-full",
 	"overflow-auto",
 	"p-1",
@@ -30,7 +34,7 @@ var SelectMenuContent = ({ ref, children, offset = 4, matchTriggerWidth = false,
 	containerPadding: 8,
 	matchTriggerWidth,
 	...rest,
-	children: /* @__PURE__ */ jsx(Viewport, { children })
+	children: /* @__PURE__ */ jsx(ThemePortalScope, { children: /* @__PURE__ */ jsx(Viewport, { children }) })
 });
 //#endregion
 export { SelectMenuContent };

package/dist/components/select-menu/SelectMenuContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuContent.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuContent.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\n\nconst Content = styled(\n  AriaComponents.Popover,\n  {\n    base: [\n      'bg-white',\n      'rounded-md',\n      'shadow-lg',\n      'z-10',\n      'overflow-hidden',\n      'will-change-transform'\n    ],\n    variants: {\n      matchTriggerWidth: {\n        // Pinned to exactly the trigger width — the dropdown never grows or\n        // shrinks to its content. The trigger is on-screen, so no viewport cap\n        // is needed.\n        true: ['w-(--trigger-width)'],\n        // Floors at the trigger width; caps at min(viewport − 8px per edge,\n        // 400px) on the --spacing() scale: --spacing(4)=16px (2×8px),\n        // --spacing(100)=400px.\n        false: [\n          'min-w-(--trigger-width)',\n          'max-w-[min(calc(100vw-(--spacing(4))),--spacing(100))]'\n        ]\n      }\n    }\n  },\n  { enablePolymorphism: false }\n)\n\nconst Viewport = styled(\n  AriaComponents.ListBox,\n  {\n    base: ['max-h-[inherit]', 'w-full', 'overflow-auto', 'p-1', 'outline-none']\n  },\n  { enablePolymorphism: false }\n)\n\ntype SelectMenuContentProps = Omit<\n  React.ComponentPropsWithRef<typeof AriaComponents.Popover>,\n  'children'\n> & {\n  children?: React.ReactNode\n  /** Pins the dropdown to the trigger's width instead of letting it grow to fit its content. */\n  matchTriggerWidth?: boolean\n}\n\nexport const SelectMenuContent = ({\n  ref,\n  children,\n  offset = 4,\n  matchTriggerWidth = false,\n  ...rest\n}: SelectMenuContentProps) => (\n  // offset/containerPadding are react-aria positioner props in px (JS numbers,\n  // not CSS), so they can't use the --spacing() scale: 4px gap from the trigger,\n  // 8px minimum inset from every viewport edge (the 2×8px behind the max-width).\n  <Content\n    ref={ref}\n    offset={offset}\n    containerPadding={8}\n    matchTriggerWidth={matchTriggerWidth}\n    {...rest}\n  >\n    <Viewport>{children}</Viewport>\n  </Content>\n)\n"],"mappings":";;;;;AAKA,IAAM,UAAU,OACd,eAAe,SACf;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,mBAAmB;EAIjB,MAAM,CAAC,qBAAqB;EAI5B,OAAO,CACL,2BACA,wDACF;CACF,EACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAEA,IAAM,WAAW,OACf,eAAe,SACf,EACE,MAAM;CAAC;CAAmB;CAAU;CAAiB;CAAO;AAAc,EAC5E,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAWA,IAAa,qBAAqB,EAChC,KACA,UACA,SAAS,GACT,oBAAoB,OACpB,GAAG,WAKH,oBAAC,SAAD;CACO;CACG;CACR,kBAAkB;CACC;CACnB,GAAI;WAEJ,oBAAC,UAAD,EAAW,SAAmB,CAAA;AACvB,CAAA"}
+{"version":3,"file":"SelectMenuContent.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuContent.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { ThemePortalScope } from '../../experiments/theme/Theme'\nimport { styled } from '../../styled'\n\nconst Content = styled(\n  AriaComponents.Popover,\n  {\n    // react-aria sets max-height inline here; the flex column lets the\n    // Viewport shrink to it through ThemePortalScope's display: contents.\n    base: ['flex', 'flex-col', 'z-10', 'will-change-transform'],\n    variants: {\n      matchTriggerWidth: {\n        // Pinned to exactly the trigger width — the dropdown never grows or\n        // shrinks to its content. The trigger is on-screen, so no viewport cap\n        // is needed.\n        true: ['w-(--trigger-width)'],\n        // Floors at the trigger width; caps at min(viewport − 8px per edge,\n        // 400px) on the --spacing() scale: --spacing(4)=16px (2×8px),\n        // --spacing(100)=400px.\n        false: [\n          'min-w-(--trigger-width)',\n          'max-w-[min(calc(100vw-(--spacing(4))),--spacing(100))]'\n        ]\n      }\n    }\n  },\n  { enablePolymorphism: false }\n)\n\nconst Viewport = styled(\n  AriaComponents.ListBox,\n  {\n    // The surface sits inside ThemePortalScope: react-aria portals the\n    // Popover element itself, outside any nested <Theme>.\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      'min-h-0',\n      'w-full',\n      'overflow-auto',\n      'p-1',\n      'outline-none'\n    ]\n  },\n  { enablePolymorphism: false }\n)\n\ntype SelectMenuContentProps = Omit<\n  React.ComponentPropsWithRef<typeof AriaComponents.Popover>,\n  'children'\n> & {\n  children?: React.ReactNode\n  /** Pins the dropdown to the trigger's width instead of letting it grow to fit its content. */\n  matchTriggerWidth?: boolean\n}\n\nexport const SelectMenuContent = ({\n  ref,\n  children,\n  offset = 4,\n  matchTriggerWidth = false,\n  ...rest\n}: SelectMenuContentProps) => (\n  // offset/containerPadding are react-aria positioner props in px (JS numbers,\n  // not CSS), so they can't use the --spacing() scale: 4px gap from the trigger,\n  // 8px minimum inset from every viewport edge (the 2×8px behind the max-width).\n  <Content\n    ref={ref}\n    offset={offset}\n    containerPadding={8}\n    matchTriggerWidth={matchTriggerWidth}\n    {...rest}\n  >\n    <ThemePortalScope>\n      <Viewport>{children}</Viewport>\n    </ThemePortalScope>\n  </Content>\n)\n"],"mappings":";;;;;;AAMA,IAAM,UAAU,OACd,eAAe,SACf;CAGE,MAAM;EAAC;EAAQ;EAAY;EAAQ;CAAuB;CAC1D,UAAU,EACR,mBAAmB;EAIjB,MAAM,CAAC,qBAAqB;EAI5B,OAAO,CACL,2BACA,wDACF;CACF,EACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAEA,IAAM,WAAW,OACf,eAAe,SACf,EAGE,MAAM;CACJ;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAWA,IAAa,qBAAqB,EAChC,KACA,UACA,SAAS,GACT,oBAAoB,OACpB,GAAG,WAKH,oBAAC,SAAD;CACO;CACG;CACR,kBAAkB;CACC;CACnB,GAAI;WAEJ,oBAAC,kBAAD,EAAA,UACE,oBAAC,UAAD,EAAW,SAAmB,CAAA,EACd,CAAA;AACX,CAAA"}

package/dist/components/select-menu/SelectMenuItem.js

@@ -11,7 +11,7 @@ var Item = styled(AriaComponents.ListBoxItem, {
 		"relative",
 		"flex",
 		"items-center",
-		"text-grey-1000",
+		"text-default",
 		"font-body",
 		"font-normal",
 		"leading-normal",
@@ -20,8 +20,8 @@ var Item = styled(AriaComponents.ListBoxItem, {
 		"outline-none",
 		"data-[disabled]:cursor-not-allowed",
 		"data-[disabled]:opacity-30",
-		"data-[hovered]:bg-grey-100",
-		"data-[focused]:bg-grey-100",
+		"data-[hovered]:bg-hover",
+		"data-[focused]:bg-hover",
 		"data-[focus-visible]:outline-none"
 	],
 	variants: { size: {

package/dist/components/select-menu/SelectMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuItem.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Item = styled(\n  AriaComponents.ListBoxItem,\n  {\n    base: [\n      'relative',\n      'flex',\n      'items-center',\n      'text-grey-1000',\n      'font-body',\n      'font-normal',\n      // Explicit line-height so `sm` (text-sm) doesn't inherit Tailwind's tight\n      // 1.25 ratio; keeps rows comfortable rather than cramped.\n      'leading-normal',\n      'cursor-pointer',\n      'rounded-sm',\n      'outline-none',\n      'data-[disabled]:cursor-not-allowed',\n      'data-[disabled]:opacity-30',\n      // react-aria's data-hovered (pointer only, ignores touch) — not `hover:`,\n      // whose :hover sticks after a tap on touchscreens (this menu targets\n      // webviews). data-focused covers keyboard navigation; together they\n      // replicate the old Radix data-highlighted.\n      'data-[hovered]:bg-grey-100',\n      'data-[focused]:bg-grey-100',\n      'data-[focus-visible]:outline-none'\n    ],\n    variants: {\n      size: {\n        sm: ['py-2', 'pl-7', 'pr-4', 'text-sm'],\n        md: ['py-2.5', 'pl-8', 'pr-6'],\n        lg: ['py-2.5', 'pl-8', 'pr-6']\n      }\n    }\n  },\n  { enablePolymorphism: false }\n)\n\ntype SelectMenuItemProps = Omit<AriaComponents.ListBoxItemProps, 'children'> & {\n  children?: React.ReactNode\n}\n\nexport const SelectMenuItem = ({\n  children,\n  textValue,\n  ...rest\n}: SelectMenuItemProps) => {\n  const { size } = useSelectMenuContext()\n  // SelectMenuItem always passes a render function to ListBoxItem (for the\n  // isSelected checkmark), which disables RAC's own textValue inference — so\n  // this derivation is the only source. Numbers are plain text too; without\n  // them the trigger blanks on selection (#893).\n  const resolvedTextValue =\n    textValue ??\n    (typeof children === 'string' || typeof children === 'number'\n      ? String(children)\n      : undefined)\n\n  return (\n    <Item size={size} textValue={resolvedTextValue} {...rest}>\n      {({ isSelected }) => (\n        <>\n          <span className=\"absolute left-2 inline-flex items-center\">\n            {isSelected && (\n              <Icon is={Ok} className={size === 'sm' ? 'size-3' : 'size-4'} />\n            )}\n          </span>\n          {children}\n        </>\n      )}\n    </Item>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,OAAO,OACX,eAAe,aACf;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GAAC;GAAQ;GAAQ;GAAQ;EAAS;EACtC,IAAI;GAAC;GAAU;GAAQ;EAAM;EAC7B,IAAI;GAAC;GAAU;GAAQ;EAAM;CAC/B,EACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAMA,IAAa,kBAAkB,EAC7B,UACA,WACA,GAAG,WACsB;CACzB,MAAM,EAAE,SAAS,qBAAqB;CAWtC,OACE,oBAAC,MAAD;EAAY;EAAM,WANlB,cACC,OAAO,aAAa,YAAY,OAAO,aAAa,WACjD,OAAO,QAAQ,IACf,KAAA;EAG4C,GAAI;aAChD,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;aACb,cACC,oBAAC,MAAD;IAAM,IAAI;IAAI,WAAW,SAAS,OAAO,WAAW;GAAW,CAAA;EAE7D,CAAA,GACL,QACD,EAAA,CAAA;CAEA,CAAA;AAEV"}
+{"version":3,"file":"SelectMenuItem.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Item = styled(\n  AriaComponents.ListBoxItem,\n  {\n    base: [\n      'relative',\n      'flex',\n      'items-center',\n      'text-default',\n      'font-body',\n      'font-normal',\n      // Explicit line-height so `sm` (text-sm) doesn't inherit Tailwind's tight\n      // 1.25 ratio; keeps rows comfortable rather than cramped.\n      'leading-normal',\n      'cursor-pointer',\n      'rounded-sm',\n      'outline-none',\n      'data-[disabled]:cursor-not-allowed',\n      'data-[disabled]:opacity-30',\n      // react-aria's data-hovered (pointer only, ignores touch) — not `hover:`,\n      // whose :hover sticks after a tap on touchscreens (this menu targets\n      // webviews). data-focused covers keyboard navigation; together they\n      // replicate the old Radix data-highlighted.\n      'data-[hovered]:bg-hover',\n      'data-[focused]:bg-hover',\n      'data-[focus-visible]:outline-none'\n    ],\n    variants: {\n      size: {\n        sm: ['py-2', 'pl-7', 'pr-4', 'text-sm'],\n        md: ['py-2.5', 'pl-8', 'pr-6'],\n        lg: ['py-2.5', 'pl-8', 'pr-6']\n      }\n    }\n  },\n  { enablePolymorphism: false }\n)\n\ntype SelectMenuItemProps = Omit<AriaComponents.ListBoxItemProps, 'children'> & {\n  children?: React.ReactNode\n}\n\nexport const SelectMenuItem = ({\n  children,\n  textValue,\n  ...rest\n}: SelectMenuItemProps) => {\n  const { size } = useSelectMenuContext()\n  // SelectMenuItem always passes a render function to ListBoxItem (for the\n  // isSelected checkmark), which disables RAC's own textValue inference — so\n  // this derivation is the only source. Numbers are plain text too; without\n  // them the trigger blanks on selection (#893).\n  const resolvedTextValue =\n    textValue ??\n    (typeof children === 'string' || typeof children === 'number'\n      ? String(children)\n      : undefined)\n\n  return (\n    <Item size={size} textValue={resolvedTextValue} {...rest}>\n      {({ isSelected }) => (\n        <>\n          <span className=\"absolute left-2 inline-flex items-center\">\n            {isSelected && (\n              <Icon is={Ok} className={size === 'sm' ? 'size-3' : 'size-4'} />\n            )}\n          </span>\n          {children}\n        </>\n      )}\n    </Item>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,OAAO,OACX,eAAe,aACf;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAKA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI;GAAC;GAAQ;GAAQ;GAAQ;EAAS;EACtC,IAAI;GAAC;GAAU;GAAQ;EAAM;EAC7B,IAAI;GAAC;GAAU;GAAQ;EAAM;CAC/B,EACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAMA,IAAa,kBAAkB,EAC7B,UACA,WACA,GAAG,WACsB;CACzB,MAAM,EAAE,SAAS,qBAAqB;CAWtC,OACE,oBAAC,MAAD;EAAY;EAAM,WANlB,cACC,OAAO,aAAa,YAAY,OAAO,aAAa,WACjD,OAAO,QAAQ,IACf,KAAA;EAG4C,GAAI;aAChD,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,WAAU;aACb,cACC,oBAAC,MAAD;IAAM,IAAI;IAAI,WAAW,SAAS,OAAO,WAAW;GAAW,CAAA;EAE7D,CAAA,GACL,QACD,EAAA,CAAA;CAEA,CAAA;AAEV"}

package/dist/components/select-menu/SelectMenuLabel.js

@@ -7,7 +7,7 @@ import * as AriaComponents from "react-aria-components";
 var SelectMenuLabel = ({ className, ...rest }) => /* @__PURE__ */ jsx(Text, {
 	as: AriaComponents.Header,
 	size: "sm",
-	className: cn("p-2", "mb-1", "text-text-subtle", className),
+	className: cn("p-2", "mb-1", "text-subtle", className),
 	...rest
 });
 SelectMenuLabel.displayName = "SelectMenuLabel";

package/dist/components/select-menu/SelectMenuLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuLabel.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuLabel.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { cn } from '../../styled'\nimport { Text } from '../text/Text'\n\ntype SelectMenuLabelProps = React.ComponentProps<typeof AriaComponents.Header>\n\nexport const SelectMenuLabel = ({\n  className,\n  ...rest\n}: SelectMenuLabelProps) => (\n  <Text\n    as={AriaComponents.Header}\n    size=\"sm\"\n    className={cn('p-2', 'mb-1', 'text-text-subtle', className)}\n    {...rest}\n  />\n)\n\nSelectMenuLabel.displayName = 'SelectMenuLabel'\n"],"mappings":";;;;;;AAQA,IAAa,mBAAmB,EAC9B,WACA,GAAG,WAEH,oBAAC,MAAD;CACE,IAAI,eAAe;CACnB,MAAK;CACL,WAAW,GAAG,OAAO,QAAQ,oBAAoB,SAAS;CAC1D,GAAI;AACL,CAAA;AAGH,gBAAgB,cAAc"}
+{"version":3,"file":"SelectMenuLabel.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuLabel.tsx"],"sourcesContent":["import * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { cn } from '../../styled'\nimport { Text } from '../text/Text'\n\ntype SelectMenuLabelProps = React.ComponentProps<typeof AriaComponents.Header>\n\nexport const SelectMenuLabel = ({\n  className,\n  ...rest\n}: SelectMenuLabelProps) => (\n  <Text\n    as={AriaComponents.Header}\n    size=\"sm\"\n    className={cn('p-2', 'mb-1', 'text-subtle', className)}\n    {...rest}\n  />\n)\n\nSelectMenuLabel.displayName = 'SelectMenuLabel'\n"],"mappings":";;;;;;AAQA,IAAa,mBAAmB,EAC9B,WACA,GAAG,WAEH,oBAAC,MAAD;CACE,IAAI,eAAe;CACnB,MAAK;CACL,WAAW,GAAG,OAAO,QAAQ,eAAe,SAAS;CACrD,GAAI;AACL,CAAA;AAGH,gBAAgB,cAAc"}

package/dist/components/select-menu/SelectMenuSeparator.js

@@ -3,7 +3,7 @@ import * as AriaComponents from "react-aria-components";
 //#region src/components/select-menu/SelectMenuSeparator.tsx
 var SelectMenuSeparator = styled(AriaComponents.Separator, { base: [
 	"h-px",
-	"bg-grey-200",
+	"bg-(--border-color-subtle)",
 	"my-2",
 	"mx-1"
 ] }, { enablePolymorphism: false });

package/dist/components/select-menu/SelectMenuSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuSeparator.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuSeparator.tsx"],"sourcesContent":["import * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\n\nexport const SelectMenuSeparator = styled(\n  AriaComponents.Separator,\n  {\n    base: ['h-px', 'bg-grey-200', 'my-2', 'mx-1']\n  },\n  { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,sBAAsB,OACjC,eAAe,WACf,EACE,MAAM;CAAC;CAAQ;CAAe;CAAQ;AAAM,EAC9C,GACA,EAAE,oBAAoB,MAAM,CAC9B"}
+{"version":3,"file":"SelectMenuSeparator.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuSeparator.tsx"],"sourcesContent":["import * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\n\nexport const SelectMenuSeparator = styled(\n  AriaComponents.Separator,\n  {\n    base: ['h-px', 'bg-(--border-color-subtle)', 'my-2', 'mx-1']\n  },\n  { enablePolymorphism: false }\n)\n"],"mappings":";;;AAIA,IAAa,sBAAsB,OACjC,eAAe,WACf,EACE,MAAM;CAAC;CAAQ;CAA8B;CAAQ;AAAM,EAC7D,GACA,EAAE,oBAAoB,MAAM,CAC9B"}

package/dist/components/select-menu/SelectMenuTrigger.js

@@ -15,7 +15,7 @@ var Trigger = styled(AriaComponents.Button, {
 		"font-body",
 		"font-normal",
 		"leading-[1.4]",
-		"text-grey-1000",
+		"text-default",
 		"text-left",
 		"relative",
 		"inline-flex",
@@ -25,7 +25,7 @@ var Trigger = styled(AriaComponents.Button, {
 		"disabled:opacity-30",
 		"disabled:cursor-not-allowed",
 		"data-[focus-visible]:outline-2",
-		"data-[focus-visible]:outline-blue-800",
+		"data-[focus-visible]:outline-focus",
 		"data-[focus-visible]:outline-offset-1",
 		"data-[focus-visible]:outline-solid",
 		"data-[focus-visible]:z-1"
@@ -51,11 +51,11 @@ var Trigger = styled(AriaComponents.Button, {
 				"text-md"
 			]
 		},
-		theme: {
-			white: ["bg-white"],
-			grey: ["bg-grey-100"]
+		fill: {
+			surface: ["bg-surface"],
+			subtle: ["bg-input"]
 		},
-		state: { error: ["bg-danger-light", "data-[focus-visible]:outline-danger"] }
+		state: { error: ["bg-danger-subtle", "data-[focus-visible]:outline-danger"] }
 	}
 }, { enablePolymorphism: false });
 var TriggerIcon = styled(Icon, {
@@ -64,7 +64,7 @@ var TriggerIcon = styled(Icon, {
 		"top-1/2",
 		"-translate-y-1/2",
 		"pointer-events-none",
-		"text-grey-700"
+		"text-icon-subtle"
 	],
 	variants: { size: {
 		sm: ["right-2", "size-4"],
@@ -73,11 +73,11 @@ var TriggerIcon = styled(Icon, {
 	} }
 });
 var SelectMenuTrigger = ({ ref, placeholder, children, ...rest }) => {
-	const { size, theme, state } = useSelectMenuContext();
+	const { size, fill, state } = useSelectMenuContext();
 	return /* @__PURE__ */ jsxs(Trigger, {
 		ref,
 		size,
-		theme,
+		fill,
 		state,
 		...rest,
 		children: [/* @__PURE__ */ jsx(AriaComponents.SelectValue, {

package/dist/components/select-menu/SelectMenuTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuTrigger.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Trigger = styled(\n  AriaComponents.Button,\n  {\n    base: [\n      'appearance-none',\n      'rounded-md',\n      'block',\n      'w-full',\n      'font-body',\n      'font-normal',\n      'leading-[1.4]',\n      'text-grey-1000',\n      'text-left',\n      'relative',\n      'inline-flex',\n      'items-center',\n      'border-none',\n      'hover:cursor-pointer',\n      'disabled:opacity-30',\n      'disabled:cursor-not-allowed',\n      'data-[focus-visible]:outline-2',\n      'data-[focus-visible]:outline-blue-800',\n      'data-[focus-visible]:outline-offset-1',\n      'data-[focus-visible]:outline-solid',\n      'data-[focus-visible]:z-1'\n    ],\n    variants: {\n      size: {\n        sm: ['h-8', 'pl-2', 'pr-8', 'text-sm'],\n        md: ['h-10', 'pl-3', 'pr-10', 'text-md'],\n        lg: ['h-12', 'pl-3', 'pr-10', 'text-md']\n      },\n      theme: {\n        white: ['bg-white'],\n        grey: ['bg-grey-100']\n      },\n      state: {\n        error: ['bg-danger-light', 'data-[focus-visible]:outline-danger']\n      }\n    }\n  },\n  { enablePolymorphism: false }\n)\n\nconst TriggerIcon = styled(Icon, {\n  base: [\n    'absolute',\n    'top-1/2',\n    '-translate-y-1/2',\n    'pointer-events-none',\n    'text-grey-700'\n  ],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-3', 'size-5'],\n      lg: ['right-3', 'size-5']\n    }\n  }\n})\n\n// aria-labelledby set here overrides react-aria's default (which points the\n// trigger at the SelectValue span, so the accessible name becomes the value).\n// SelectMenuField uses it to point the trigger at the visible field label. Use\n// aria-labelledby, not aria-label, so a single referenced label wins cleanly.\ntype SelectMenuTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof AriaComponents.Button>,\n  'children' | 'aria-label'\n> & {\n  placeholder?: string\n  children?: React.ReactNode\n}\n\nexport const SelectMenuTrigger = ({\n  ref,\n  placeholder,\n  children,\n  ...rest\n}: SelectMenuTriggerProps) => {\n  const { size, theme, state } = useSelectMenuContext()\n\n  return (\n    <Trigger ref={ref} size={size} theme={theme} state={state} {...rest}>\n      <AriaComponents.SelectValue className=\"truncate\">\n        {({ isPlaceholder, selectedText }) =>\n          isPlaceholder ? (placeholder ?? '') : (children ?? selectedText)\n        }\n      </AriaComponents.SelectValue>\n      <TriggerIcon is={ChevronDown} size={size} />\n    </Trigger>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,UAAU,OACd,eAAe,QACf;CACE,MAAM;EACJ;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;GACJ,IAAI;IAAC;IAAO;IAAQ;IAAQ;GAAS;GACrC,IAAI;IAAC;IAAQ;IAAQ;IAAS;GAAS;GACvC,IAAI;IAAC;IAAQ;IAAQ;IAAS;GAAS;EACzC;EACA,OAAO;GACL,OAAO,CAAC,UAAU;GAClB,MAAM,CAAC,aAAa;EACtB;EACA,OAAO,EACL,OAAO,CAAC,mBAAmB,qCAAqC,EAClE;CACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAEA,IAAM,cAAc,OAAO,MAAM;CAC/B,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,WAAW,QAAQ;CAC1B,EACF;AACF,CAAC;AAcD,IAAa,qBAAqB,EAChC,KACA,aACA,UACA,GAAG,WACyB;CAC5B,MAAM,EAAE,MAAM,OAAO,UAAU,qBAAqB;CAEpD,OACE,qBAAC,SAAD;EAAc;EAAW;EAAa;EAAc;EAAO,GAAI;YAA/D,CACE,oBAAC,eAAe,aAAhB;GAA4B,WAAU;cAClC,EAAE,eAAe,mBACjB,gBAAiB,eAAe,KAAO,YAAY;EAE3B,CAAA,GAC5B,oBAAC,aAAD;GAAa,IAAI;GAAmB;EAAO,CAAA,CACpC;;AAEb"}
+{"version":3,"file":"SelectMenuTrigger.js","names":[],"sources":["../../../src/components/select-menu/SelectMenuTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport * as React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Trigger = styled(\n  AriaComponents.Button,\n  {\n    base: [\n      'appearance-none',\n      'rounded-md',\n      'block',\n      'w-full',\n      'font-body',\n      'font-normal',\n      'leading-[1.4]',\n      'text-default',\n      'text-left',\n      'relative',\n      'inline-flex',\n      'items-center',\n      'border-none',\n      'hover:cursor-pointer',\n      'disabled:opacity-30',\n      'disabled:cursor-not-allowed',\n      'data-[focus-visible]:outline-2',\n      'data-[focus-visible]:outline-focus',\n      'data-[focus-visible]:outline-offset-1',\n      'data-[focus-visible]:outline-solid',\n      'data-[focus-visible]:z-1'\n    ],\n    variants: {\n      size: {\n        sm: ['h-8', 'pl-2', 'pr-8', 'text-sm'],\n        md: ['h-10', 'pl-3', 'pr-10', 'text-md'],\n        lg: ['h-12', 'pl-3', 'pr-10', 'text-md']\n      },\n      fill: {\n        surface: ['bg-surface'],\n        subtle: ['bg-input']\n      },\n      state: {\n        error: ['bg-danger-subtle', 'data-[focus-visible]:outline-danger']\n      }\n    }\n  },\n  { enablePolymorphism: false }\n)\n\nconst TriggerIcon = styled(Icon, {\n  base: [\n    'absolute',\n    'top-1/2',\n    '-translate-y-1/2',\n    'pointer-events-none',\n    'text-icon-subtle'\n  ],\n  variants: {\n    size: {\n      sm: ['right-2', 'size-4'],\n      md: ['right-3', 'size-5'],\n      lg: ['right-3', 'size-5']\n    }\n  }\n})\n\n// aria-labelledby set here overrides react-aria's default (which points the\n// trigger at the SelectValue span, so the accessible name becomes the value).\n// SelectMenuField uses it to point the trigger at the visible field label. Use\n// aria-labelledby, not aria-label, so a single referenced label wins cleanly.\ntype SelectMenuTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof AriaComponents.Button>,\n  'children' | 'aria-label'\n> & {\n  placeholder?: string\n  children?: React.ReactNode\n}\n\nexport const SelectMenuTrigger = ({\n  ref,\n  placeholder,\n  children,\n  ...rest\n}: SelectMenuTriggerProps) => {\n  const { size, fill, state } = useSelectMenuContext()\n\n  return (\n    <Trigger ref={ref} size={size} fill={fill} state={state} {...rest}>\n      <AriaComponents.SelectValue className=\"truncate\">\n        {({ isPlaceholder, selectedText }) =>\n          isPlaceholder ? (placeholder ?? '') : (children ?? selectedText)\n        }\n      </AriaComponents.SelectValue>\n      <TriggerIcon is={ChevronDown} size={size} />\n    </Trigger>\n  )\n}\n"],"mappings":";;;;;;;;AAQA,IAAM,UAAU,OACd,eAAe,QACf;CACE,MAAM;EACJ;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;GACJ,IAAI;IAAC;IAAO;IAAQ;IAAQ;GAAS;GACrC,IAAI;IAAC;IAAQ;IAAQ;IAAS;GAAS;GACvC,IAAI;IAAC;IAAQ;IAAQ;IAAS;GAAS;EACzC;EACA,MAAM;GACJ,SAAS,CAAC,YAAY;GACtB,QAAQ,CAAC,UAAU;EACrB;EACA,OAAO,EACL,OAAO,CAAC,oBAAoB,qCAAqC,EACnE;CACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAEA,IAAM,cAAc,OAAO,MAAM;CAC/B,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,WAAW,QAAQ;EACxB,IAAI,CAAC,WAAW,QAAQ;CAC1B,EACF;AACF,CAAC;AAcD,IAAa,qBAAqB,EAChC,KACA,aACA,UACA,GAAG,WACyB;CAC5B,MAAM,EAAE,MAAM,MAAM,UAAU,qBAAqB;CAEnD,OACE,qBAAC,SAAD;EAAc;EAAW;EAAY;EAAa;EAAO,GAAI;YAA7D,CACE,oBAAC,eAAe,aAAhB;GAA4B,WAAU;cAClC,EAAE,eAAe,mBACjB,gBAAiB,eAAe,KAAO,YAAY;EAE3B,CAAA,GAC5B,oBAAC,aAAD;GAAa,IAAI;GAAmB;EAAO,CAAA,CACpC;;AAEb"}

package/dist/components/select-menu-field/SelectMenuField.d.ts

@@ -3,11 +3,11 @@ import { type FieldElementWrapperProps } from '../field-wrapper/FieldWrapper';
 type SelectMenuFieldProps = React.PropsWithChildren<FieldElementWrapperProps & {
     placeholder?: string;
     size?: 'sm' | 'md' | 'lg';
-    theme?: 'white' | 'grey';
+    fill?: 'surface' | 'subtle';
     disabled?: boolean;
     className?: string;
 }>;
-export declare function SelectMenuField({ className, hideLabel, children, name, label, validation, prompt, description, theme, size, placeholder, disabled, ...rest }: SelectMenuFieldProps): React.JSX.Element;
+export declare function SelectMenuField({ className, hideLabel, children, name, label, validation, prompt, description, fill, size, placeholder, disabled, ...rest }: SelectMenuFieldProps): React.JSX.Element;
 export declare namespace SelectMenuField {
     var displayName: string;
 }

package/dist/components/select-menu-field/SelectMenuField.js

@@ -6,11 +6,11 @@ import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useController, useFormContext } from "react-hook-form";
 //#region src/components/select-menu-field/SelectMenuField.tsx
-var SelectMenuField = ({ className, hideLabel, children, name, label, validation, prompt, description, theme, size, placeholder, disabled, ...rest }) => {
+var SelectMenuField = ({ className, hideLabel, children, name, label, validation, prompt, description, fill, size, placeholder, disabled, ...rest }) => {
 	const { control } = useFormContext();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
-	const formTheme = context?.theme ?? theme;
+	const formFill = context?.fill ?? fill;
 	const labelId = `${name}-label`;
 	const { field: { ref, onChange, value } } = useController({
 		name,
@@ -33,7 +33,7 @@ var SelectMenuField = ({ className, hideLabel, children, name, label, validation
 			selectedKey: value === "" ? null : value,
 			onSelectionChange: onChange,
 			size,
-			theme: formTheme,
+			fill: formFill,
 			isDisabled: disabled,
 			...error && { state: "error" },
 			...rest,

package/dist/components/select-menu-field/SelectMenuField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuField.js","names":[],"sources":["../../../src/components/select-menu-field/SelectMenuField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, 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 { SelectMenu } from '../select-menu/SelectMenu'\n\ntype SelectMenuFieldProps = React.PropsWithChildren<\n  FieldElementWrapperProps & {\n    placeholder?: string\n    size?: 'sm' | 'md' | 'lg'\n    theme?: 'white' | 'grey'\n    disabled?: boolean\n    className?: string\n  }\n>\n\nexport const SelectMenuField = ({\n  className,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  theme,\n  size,\n  placeholder,\n  disabled,\n  ...rest\n}: SelectMenuFieldProps) => {\n  const { control } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const formTheme = context?.theme ?? theme\n  const labelId = `${name}-label`\n\n  const {\n    field: { ref, onChange, value }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue: ''\n  })\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      labelId={labelId}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n    >\n      <SelectMenu\n        aria-labelledby={labelId}\n        selectedKey={value === '' ? null : value}\n        onSelectionChange={onChange}\n        size={size}\n        theme={formTheme}\n        isDisabled={disabled}\n        {...(error && { state: 'error' })}\n        {...rest}\n      >\n        {/* id makes FieldWrapper's <Label htmlFor={name}> associate with the\n            trigger; aria-labelledby points the accessible name at that visible\n            label (react-aria would otherwise derive it from the value). #888 */}\n        <SelectMenu.Trigger\n          ref={ref}\n          id={name}\n          aria-labelledby={labelId}\n          placeholder={placeholder}\n        />\n        <SelectMenu.Content>{children}</SelectMenu.Content>\n      </SelectMenu>\n    </FieldWrapper>\n  )\n}\n\nSelectMenuField.displayName = 'SelectMenuField'\n"],"mappings":";;;;;;;;AAqBA,IAAa,mBAAmB,EAC9B,WACA,WACA,UACA,MACA,OACA,YACA,QACA,aACA,OACA,MACA,aACA,UACA,GAAG,WACuB;CAC1B,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CACpC,MAAM,YAAY,SAAS,SAAS;CACpC,MAAM,UAAU,GAAG,KAAK;CAExB,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,YACtB,cAAc;EAChB;EACA;EACA,OAAO;EACP,cAAc;CAChB,CAAC;CAED,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACE;EACD;EACR,UAAU,QAAQ,YAAY,QAAQ;YAEtC,qBAAC,YAAD;GACE,mBAAiB;GACjB,aAAa,UAAU,KAAK,OAAO;GACnC,mBAAmB;GACb;GACN,OAAO;GACP,YAAY;GACZ,GAAK,SAAS,EAAE,OAAO,QAAQ;GAC/B,GAAI;aARN,CAaE,oBAAC,WAAW,SAAZ;IACO;IACL,IAAI;IACJ,mBAAiB;IACJ;GACd,CAAA,GACD,oBAAC,WAAW,SAAZ,EAAqB,SAA6B,CAAA,CACxC;;CACA,CAAA;AAElB;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"SelectMenuField.js","names":[],"sources":["../../../src/components/select-menu-field/SelectMenuField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, 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 { SelectMenu } from '../select-menu/SelectMenu'\n\ntype SelectMenuFieldProps = React.PropsWithChildren<\n  FieldElementWrapperProps & {\n    placeholder?: string\n    size?: 'sm' | 'md' | 'lg'\n    fill?: 'surface' | 'subtle'\n    disabled?: boolean\n    className?: string\n  }\n>\n\nexport const SelectMenuField = ({\n  className,\n  hideLabel,\n  children,\n  name,\n  label,\n  validation,\n  prompt,\n  description,\n  fill,\n  size,\n  placeholder,\n  disabled,\n  ...rest\n}: SelectMenuFieldProps) => {\n  const { control } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n  const formFill = context?.fill ?? fill\n  const labelId = `${name}-label`\n\n  const {\n    field: { ref, onChange, value }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue: ''\n  })\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      labelId={labelId}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n    >\n      <SelectMenu\n        aria-labelledby={labelId}\n        selectedKey={value === '' ? null : value}\n        onSelectionChange={onChange}\n        size={size}\n        fill={formFill}\n        isDisabled={disabled}\n        {...(error && { state: 'error' })}\n        {...rest}\n      >\n        {/* id makes FieldWrapper's <Label htmlFor={name}> associate with the\n            trigger; aria-labelledby points the accessible name at that visible\n            label (react-aria would otherwise derive it from the value). #888 */}\n        <SelectMenu.Trigger\n          ref={ref}\n          id={name}\n          aria-labelledby={labelId}\n          placeholder={placeholder}\n        />\n        <SelectMenu.Content>{children}</SelectMenu.Content>\n      </SelectMenu>\n    </FieldWrapper>\n  )\n}\n\nSelectMenuField.displayName = 'SelectMenuField'\n"],"mappings":";;;;;;;;AAqBA,IAAa,mBAAmB,EAC9B,WACA,WACA,UACA,MACA,OACA,YACA,QACA,aACA,MACA,MACA,aACA,UACA,GAAG,WACuB;CAC1B,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CACpC,MAAM,WAAW,SAAS,QAAQ;CAClC,MAAM,UAAU,GAAG,KAAK;CAExB,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,YACtB,cAAc;EAChB;EACA;EACA,OAAO;EACP,cAAc;CAChB,CAAC;CAED,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACE;EACD;EACR,UAAU,QAAQ,YAAY,QAAQ;YAEtC,qBAAC,YAAD;GACE,mBAAiB;GACjB,aAAa,UAAU,KAAK,OAAO;GACnC,mBAAmB;GACb;GACN,MAAM;GACN,YAAY;GACZ,GAAK,SAAS,EAAE,OAAO,QAAQ;GAC/B,GAAI;aARN,CAaE,oBAAC,WAAW,SAAZ;IACO;IACL,IAAI;IACJ,mBAAiB;IACJ;GACd,CAAA,GACD,oBAAC,WAAW,SAAZ,EAAqB,SAA6B,CAAA,CACxC;;CACA,CAAA;AAElB;AAEA,gBAAgB,cAAc"}

package/dist/components/side-bar/SideBar.d.ts

@@ -1,13 +1,12 @@
 import * as React from 'react';
-import { Theme } from '../../styled';
 declare const Root: import("../..").PolymorphicComponent<"div", {
     type?: "expandable" | "static" | undefined;
 }>;
 type SideBarProps = React.ComponentProps<typeof Root> & {
     className?: string;
     offset?: number | string;
-} & React.ComponentProps<typeof Theme>;
-export declare const SideBar: (({ theme, className, children, type, offset, style, ...rest }: SideBarProps) => React.JSX.Element) & {
+};
+export declare const SideBar: (({ className, children, type, offset, style, ...rest }: SideBarProps) => React.JSX.Element) & {
     Brand: React.FC<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
         as?: React.ElementType;
     }>;

package/dist/components/side-bar/SideBar.js

@@ -1,16 +1,11 @@
 import { cn } from "../../utilities/tw-merge/index.js";
-import { Theme, styled } from "../../styled.js";
+import { styled } from "../../styled.js";
 import { SideBarContext } from "./SideBar.context.js";
 import { SideBarBody, SideBarBrand, SideBarBrandLogo, SideBarBrandName, SideBarFooter, SideBarHeader } from "./SideBarComponents.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFocusWithin, useHover, useInteractOutside } from "react-aria";
 //#region src/components/side-bar/SideBar.tsx
-var light = {
-	"--background": "white",
-	"--text": "var(--color-grey-800)",
-	"--border": "var(--color-grey-200)"
-};
 var Root = styled("div", {
 	base: ["sticky", "z-1"],
 	variants: { type: {
@@ -20,10 +15,11 @@ var Root = styled("div", {
 });
 var Content = styled("div", {
 	base: [
-		"bg-(--background)",
+		"bg-surface",
+		"text-default",
 		"border-r",
-		"border-r-(--border)",
-		"shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]",
+		"border-r-subtle",
+		"shadow-[4px_0_4px_-2px_transparent]",
 		"flex",
 		"flex-col",
 		"h-full",
@@ -46,7 +42,7 @@ var Content = styled("div", {
 	compoundVariants: [{
 		isExpanded: true,
 		type: "expandable",
-		class: ["shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]"]
+		class: ["shadow-(--shadow-edge-end)"]
 	}]
 });
 var PointerBlocker = styled("div", {
@@ -63,7 +59,7 @@ var PointerBlocker = styled("div", {
 		false: ["delay-50", "invisible"]
 	} }
 });
-var SideBarComponent = ({ theme, className, children, type = "expandable", offset = "0px", style, ...rest }) => {
+var SideBarComponent = ({ className, children, type = "expandable", offset = "0px", style, ...rest }) => {
 	const [isExpanded, setIsExpanded] = React$1.useState(type === "static");
 	const ref = React$1.useRef(null);
 	useInteractOutside({
@@ -87,22 +83,19 @@ var SideBarComponent = ({ theme, className, children, type = "expandable", offse
 	} : {};
 	return /* @__PURE__ */ jsx(SideBarContext, {
 		value: React$1.useMemo(() => ({ isExpanded }), [isExpanded]),
-		children: /* @__PURE__ */ jsx(Theme, {
-			theme: theme || light,
-			children: /* @__PURE__ */ jsx(Root, {
-				...rest,
-				style: {
-					...style,
-					"--offset": offset
-				},
+		children: /* @__PURE__ */ jsx(Root, {
+			...rest,
+			style: {
+				...style,
+				"--offset": offset
+			},
+			type,
+			className: cn("h-[calc(100svh-var(--offset))]", "top-(--offset)", className),
+			children: /* @__PURE__ */ jsxs(Content, {
+				...expandableProps,
+				isExpanded,
 				type,
-				className: cn("h-[calc(100svh-var(--offset))]", "top-(--offset)", className),
-				children: /* @__PURE__ */ jsxs(Content, {
-					...expandableProps,
-					isExpanded,
-					type,
-					children: [children, type === "expandable" && /* @__PURE__ */ jsx(PointerBlocker, { isVisible: !isHovered && !isExpanded })]
-				})
+				children: [children, type === "expandable" && /* @__PURE__ */ jsx(PointerBlocker, { isVisible: !isHovered && !isExpanded })]
 			})
 		})
 	});