@atom-learning/components 11.6.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,8 +1,7 @@
 import * as React from 'react';
 type SelectMenuContextValue = {
     size: 'sm' | 'md' | 'lg';
-    theme: 'white' | 'grey';
-    colorMode: 'light' | 'dark';
+    fill: 'surface' | 'subtle';
     state?: 'error';
 };
 export declare const SelectMenuContext: React.Context<SelectMenuContextValue>;

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

@@ -2,8 +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",
-	colorMode: "light"
+	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  colorMode: 'light' | 'dark'\n  state?: 'error'\n}\n\nexport const SelectMenuContext = React.createContext<SelectMenuContextValue>({\n  size: 'md',\n  theme: 'grey',\n  colorMode: 'light'\n})\n\nexport const useSelectMenuContext = () => React.use(SelectMenuContext)\n"],"mappings":";;AASA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,MAAM;CACN,OAAO;CACP,WAAW;AACb,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,13 +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';
-    colorMode?: 'light' | 'dark';
+    fill?: 'surface' | 'subtle';
     state?: 'error';
     className?: string;
     children?: React.ReactNode;
 };
-export declare const SelectMenu: (({ size, theme, colorMode, 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;
@@ -25,8 +24,6 @@ export declare const SelectMenu: (({ size, theme, colorMode, state, className, c
         ({ className, ...rest }: AriaComponents.HeaderProps & React.RefAttributes<HTMLElement>): React.JSX.Element;
         displayName: string;
     };
-    Separator: (props: Omit<React.ComponentProps<import("../..").StyledComponent<(props: AriaComponents.SeparatorProps & React.RefAttributes<HTMLElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null, {
-        colorMode?: "dark" | "light" | undefined;
-    }>>, 'colorMode'>) => React.JSX.Element;
+    Separator: import("../..").StyledComponent<(props: AriaComponents.SeparatorProps & React.RefAttributes<HTMLElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null, unknown>;
 };
 export {};

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

@@ -9,17 +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", colorMode = "light", state, className, children, ...rest }) => {
+var SelectMenuRoot = ({ size = "md", fill = "subtle", state, className, children, ...rest }) => {
 	return /* @__PURE__ */ jsx(SelectMenuContext, {
 		value: React$1.useMemo(() => ({
 			size,
-			theme,
-			colorMode,
+			fill,
 			state
 		}), [
 			size,
-			theme,
-			colorMode,
+			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  colorMode?: 'light' | 'dark'\n  state?: 'error'\n  className?: string\n  children?: React.ReactNode\n}\n\nconst SelectMenuRoot = ({\n  size = 'md',\n  theme = 'grey',\n  colorMode = 'light',\n  state,\n  className,\n  children,\n  ...rest\n}: SelectMenuProps) => {\n  const value = React.useMemo(\n    () => ({ size, theme, colorMode, state }),\n    [size, theme, colorMode, 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":";;;;;;;;;;;AAuBA,IAAM,kBAAkB,EACtB,OAAO,MACP,QAAQ,QACR,YAAY,SACZ,OACA,WACA,UACA,GAAG,WACkB;CAKrB,OACE,oBAAC,mBAAD;EAA0B,OALd,QAAM,eACX;GAAE;GAAM;GAAO;GAAW;EAAM,IACvC;GAAC;GAAM;GAAO;GAAW;EAAK,CAGJ;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,48 +1,41 @@
 import { styled } from "../../styled.js";
-import { useSelectMenuContext } from "./SelectMenu.context.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: {
-		colorMode: {
-			light: [],
-			dark: ["bg-grey-900"]
-		},
-		matchTriggerWidth: {
-			true: ["w-(--trigger-width)"],
-			false: ["min-w-(--trigger-width)", "max-w-[min(calc(100vw-(--spacing(4))),--spacing(100))]"]
-		}
-	}
+	variants: { matchTriggerWidth: {
+		true: ["w-(--trigger-width)"],
+		false: ["min-w-(--trigger-width)", "max-w-[min(calc(100vw-(--spacing(4))),--spacing(100))]"]
+	} }
 }, { 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",
 	"outline-none"
 ] }, { enablePolymorphism: false });
-var SelectMenuContent = ({ ref, children, offset = 4, matchTriggerWidth = false, ...rest }) => {
-	const { colorMode } = useSelectMenuContext();
-	return /* @__PURE__ */ jsx(Content, {
-		ref,
-		offset,
-		containerPadding: 8,
-		colorMode,
-		matchTriggerWidth,
-		...rest,
-		children: /* @__PURE__ */ jsx(Viewport, { children })
-	});
-};
+var SelectMenuContent = ({ ref, children, offset = 4, matchTriggerWidth = false, ...rest }) => /* @__PURE__ */ jsx(Content, {
+	ref,
+	offset,
+	containerPadding: 8,
+	matchTriggerWidth,
+	...rest,
+	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'\nimport { useSelectMenuContext } from './SelectMenu.context'\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      colorMode: {\n        light: [],\n        dark: ['bg-grey-900']\n      },\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  const { colorMode } = useSelectMenuContext()\n\n  return (\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      colorMode={colorMode}\n      matchTriggerWidth={matchTriggerWidth}\n      {...rest}\n    >\n      <Viewport>{children}</Viewport>\n    </Content>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,UAAU,OACd,eAAe,SACf;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,WAAW;GACT,OAAO,CAAC;GACR,MAAM,CAAC,aAAa;EACtB;EACA,mBAAmB;GAIjB,MAAM,CAAC,qBAAqB;GAI5B,OAAO,CACL,2BACA,wDACF;EACF;CACF;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,WACyB;CAC5B,MAAM,EAAE,cAAc,qBAAqB;CAE3C,OAIE,oBAAC,SAAD;EACO;EACG;EACR,kBAAkB;EACP;EACQ;EACnB,GAAI;YAEJ,oBAAC,UAAD,EAAW,SAAmB,CAAA;CACvB,CAAA;AAEb"}
+{"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,44 +20,33 @@ 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: {
-			sm: [
-				"py-2",
-				"pl-7",
-				"pr-4",
-				"text-sm"
-			],
-			md: [
-				"py-2.5",
-				"pl-8",
-				"pr-6"
-			],
-			lg: [
-				"py-2.5",
-				"pl-8",
-				"pr-6"
-			]
-		},
-		colorMode: {
-			light: [],
-			dark: [
-				"text-white",
-				"data-[hovered]:bg-grey-800",
-				"data-[focused]:bg-grey-800"
-			]
-		}
-	}
+	variants: { size: {
+		sm: [
+			"py-2",
+			"pl-7",
+			"pr-4",
+			"text-sm"
+		],
+		md: [
+			"py-2.5",
+			"pl-8",
+			"pr-6"
+		],
+		lg: [
+			"py-2.5",
+			"pl-8",
+			"pr-6"
+		]
+	} }
 }, { enablePolymorphism: false });
 var SelectMenuItem = ({ children, textValue, ...rest }) => {
-	const { size, colorMode } = useSelectMenuContext();
+	const { size } = useSelectMenuContext();
 	return /* @__PURE__ */ jsx(Item, {
 		size,
-		colorMode,
 		textValue: textValue ?? (typeof children === "string" || typeof children === "number" ? String(children) : void 0),
 		...rest,
 		children: ({ isSelected }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {

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      colorMode: {\n        light: [],\n        dark: [\n          'text-white',\n          'data-[hovered]:bg-grey-800',\n          'data-[focused]:bg-grey-800'\n        ]\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, colorMode } = 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\n      size={size}\n      colorMode={colorMode}\n      textValue={resolvedTextValue}\n      {...rest}\n    >\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;GACJ,IAAI;IAAC;IAAQ;IAAQ;IAAQ;GAAS;GACtC,IAAI;IAAC;IAAU;IAAQ;GAAM;GAC7B,IAAI;IAAC;IAAU;IAAQ;GAAM;EAC/B;EACA,WAAW;GACT,OAAO,CAAC;GACR,MAAM;IACJ;IACA;IACA;GACF;EACF;CACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAMA,IAAa,kBAAkB,EAC7B,UACA,WACA,GAAG,WACsB;CACzB,MAAM,EAAE,MAAM,cAAc,qBAAqB;CAWjD,OACE,oBAAC,MAAD;EACQ;EACK;EACX,WATF,cACC,OAAO,aAAa,YAAY,OAAO,aAAa,WACjD,OAAO,QAAQ,IACf,KAAA;EAOF,GAAI;aAEF,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

@@ -1,19 +1,15 @@
 import { cn } from "../../utilities/tw-merge/index.js";
 import { Text } from "../text/Text.js";
-import { useSelectMenuContext } from "./SelectMenu.context.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import * as AriaComponents from "react-aria-components";
 //#region src/components/select-menu/SelectMenuLabel.tsx
-var SelectMenuLabel = ({ className, ...rest }) => {
-	const { colorMode } = useSelectMenuContext();
-	return /* @__PURE__ */ jsx(Text, {
-		as: AriaComponents.Header,
-		size: "sm",
-		className: cn("p-2", "mb-1", colorMode === "dark" ? "text-grey-500" : "text-text-subtle", className),
-		...rest
-	});
-};
+var SelectMenuLabel = ({ className, ...rest }) => /* @__PURE__ */ jsx(Text, {
+	as: AriaComponents.Header,
+	size: "sm",
+	className: cn("p-2", "mb-1", "text-subtle", className),
+	...rest
+});
 SelectMenuLabel.displayName = "SelectMenuLabel";
 //#endregion
 export { 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'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\ntype SelectMenuLabelProps = React.ComponentProps<typeof AriaComponents.Header>\n\nexport const SelectMenuLabel = ({\n  className,\n  ...rest\n}: SelectMenuLabelProps) => {\n  const { colorMode } = useSelectMenuContext()\n\n  return (\n    <Text\n      as={AriaComponents.Header}\n      size=\"sm\"\n      className={cn(\n        'p-2',\n        'mb-1',\n        colorMode === 'dark' ? 'text-grey-500' : 'text-text-subtle',\n        className\n      )}\n      {...rest}\n    />\n  )\n}\n\nSelectMenuLabel.displayName = 'SelectMenuLabel'\n"],"mappings":";;;;;;;AASA,IAAa,mBAAmB,EAC9B,WACA,GAAG,WACuB;CAC1B,MAAM,EAAE,cAAc,qBAAqB;CAE3C,OACE,oBAAC,MAAD;EACE,IAAI,eAAe;EACnB,MAAK;EACL,WAAW,GACT,OACA,QACA,cAAc,SAAS,kBAAkB,oBACzC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,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.d.ts

@@ -1,7 +1,2 @@
-import * as React from 'react';
 import * as AriaComponents from 'react-aria-components';
-declare const Separator: import("../..").StyledComponent<(props: AriaComponents.SeparatorProps & React.RefAttributes<HTMLElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null, {
-    colorMode?: "dark" | "light" | undefined;
-}>;
-export declare const SelectMenuSeparator: (props: Omit<React.ComponentProps<typeof Separator>, 'colorMode'>) => React.JSX.Element;
-export {};
+export declare const SelectMenuSeparator: import("../..").StyledComponent<(props: AriaComponents.SeparatorProps & React.RefAttributes<HTMLElement>) => React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null, unknown>;

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

@@ -1,28 +1,12 @@
 import { styled } from "../../styled.js";
-import { useSelectMenuContext } from "./SelectMenu.context.js";
-import "react";
-import { jsx } from "react/jsx-runtime";
 import * as AriaComponents from "react-aria-components";
 //#region src/components/select-menu/SelectMenuSeparator.tsx
-var Separator = styled(AriaComponents.Separator, {
-	base: [
-		"h-px",
-		"bg-grey-200",
-		"my-2",
-		"mx-1"
-	],
-	variants: { colorMode: {
-		light: [],
-		dark: ["bg-grey-800"]
-	} }
-}, { enablePolymorphism: false });
-var SelectMenuSeparator = (props) => {
-	const { colorMode } = useSelectMenuContext();
-	return /* @__PURE__ */ jsx(Separator, {
-		colorMode,
-		...props
-	});
-};
+var SelectMenuSeparator = styled(AriaComponents.Separator, { base: [
+	"h-px",
+	"bg-(--border-color-subtle)",
+	"my-2",
+	"mx-1"
+] }, { enablePolymorphism: false });
 //#endregion
 export { SelectMenuSeparator };
 

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 React from 'react'\nimport * as AriaComponents from 'react-aria-components'\n\nimport { styled } from '../../styled'\nimport { useSelectMenuContext } from './SelectMenu.context'\n\nconst Separator = styled(\n  AriaComponents.Separator,\n  {\n    base: ['h-px', 'bg-grey-200', 'my-2', 'mx-1'],\n    variants: {\n      colorMode: {\n        light: [],\n        dark: ['bg-grey-800']\n      }\n    }\n  },\n  { enablePolymorphism: false }\n)\n\nexport const SelectMenuSeparator = (\n  props: Omit<React.ComponentProps<typeof Separator>, 'colorMode'>\n) => {\n  const { colorMode } = useSelectMenuContext()\n\n  return <Separator colorMode={colorMode} {...props} />\n}\n"],"mappings":";;;;;;AAMA,IAAM,YAAY,OAChB,eAAe,WACf;CACE,MAAM;EAAC;EAAQ;EAAe;EAAQ;CAAM;CAC5C,UAAU,EACR,WAAW;EACT,OAAO,CAAC;EACR,MAAM,CAAC,aAAa;CACtB,EACF;AACF,GACA,EAAE,oBAAoB,MAAM,CAC9B;AAEA,IAAa,uBACX,UACG;CACH,MAAM,EAAE,cAAc,qBAAqB;CAE3C,OAAO,oBAAC,WAAD;EAAsB;EAAW,GAAI;CAAQ,CAAA;AACtD"}
+{"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,25 +51,12 @@ var Trigger = styled(AriaComponents.Button, {
 				"text-md"
 			]
 		},
-		theme: {
-			white: ["bg-white"],
-			grey: ["bg-grey-100"]
+		fill: {
+			surface: ["bg-surface"],
+			subtle: ["bg-input"]
 		},
-		colorMode: {
-			light: [],
-			dark: [
-				"bg-grey-900",
-				"text-grey-200",
-				"hover:bg-grey-800"
-			]
-		},
-		state: { error: ["bg-danger-light", "data-[focus-visible]:outline-danger"] }
-	},
-	compoundVariants: [{
-		colorMode: "dark",
-		state: "error",
-		class: ["text-grey-1000", "hover:bg-danger-light"]
-	}]
+		state: { error: ["bg-danger-subtle", "data-[focus-visible]:outline-danger"] }
+	}
 }, { enablePolymorphism: false });
 var TriggerIcon = styled(Icon, {
 	base: [
@@ -77,27 +64,20 @@ 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"],
-			md: ["right-3", "size-5"],
-			lg: ["right-3", "size-5"]
-		},
-		colorMode: {
-			light: [],
-			dark: ["text-grey-200"]
-		}
-	}
+	variants: { size: {
+		sm: ["right-2", "size-4"],
+		md: ["right-3", "size-5"],
+		lg: ["right-3", "size-5"]
+	} }
 });
 var SelectMenuTrigger = ({ ref, placeholder, children, ...rest }) => {
-	const { size, theme, colorMode, state } = useSelectMenuContext();
+	const { size, fill, state } = useSelectMenuContext();
 	return /* @__PURE__ */ jsxs(Trigger, {
 		ref,
 		size,
-		theme,
-		colorMode,
+		fill,
 		state,
 		...rest,
 		children: [/* @__PURE__ */ jsx(AriaComponents.SelectValue, {
@@ -105,8 +85,7 @@ var SelectMenuTrigger = ({ ref, placeholder, children, ...rest }) => {
 			children: ({ isPlaceholder, selectedText }) => isPlaceholder ? placeholder ?? "" : children ?? selectedText
 		}), /* @__PURE__ */ jsx(TriggerIcon, {
 			is: ChevronDown,
-			size,
-			colorMode
+			size
 		})]
 	});
 };