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

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      // Between theme and state: dark overrides either theme's background,\n      // and the error background still wins over dark\n      colorMode: {\n        light: [],\n        dark: ['bg-grey-900', 'text-grey-200', 'hover:bg-grey-800']\n      },\n      state: {\n        error: ['bg-danger-light', 'data-[focus-visible]:outline-danger']\n      }\n    },\n    compoundVariants: [\n      {\n        // Error keeps its light look on dark, hover included\n        colorMode: 'dark',\n        state: 'error',\n        class: ['text-grey-1000', 'hover:bg-danger-light']\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    colorMode: {\n      light: [],\n      dark: ['text-grey-200']\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, colorMode, state } = useSelectMenuContext()\n\n  return (\n    <Trigger\n      ref={ref}\n      size={size}\n      theme={theme}\n      colorMode={colorMode}\n      state={state}\n      {...rest}\n    >\n      <AriaComponents.SelectValue className=\"truncate\">\n        {({ isPlaceholder, selectedText }) =>\n          isPlaceholder ? (placeholder ?? '') : (children ?? selectedText)\n        }\n      </AriaComponents.SelectValue>\n      <TriggerIcon is={ChevronDown} size={size} colorMode={colorMode} />\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;EAGA,WAAW;GACT,OAAO,CAAC;GACR,MAAM;IAAC;IAAe;IAAiB;GAAmB;EAC5D;EACA,OAAO,EACL,OAAO,CAAC,mBAAmB,qCAAqC,EAClE;CACF;CACA,kBAAkB,CAChB;EAEE,WAAW;EACX,OAAO;EACP,OAAO,CAAC,kBAAkB,uBAAuB;CACnD,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;GACJ,IAAI,CAAC,WAAW,QAAQ;GACxB,IAAI,CAAC,WAAW,QAAQ;GACxB,IAAI,CAAC,WAAW,QAAQ;EAC1B;EACA,WAAW;GACT,OAAO,CAAC;GACR,MAAM,CAAC,eAAe;EACxB;CACF;AACF,CAAC;AAcD,IAAa,qBAAqB,EAChC,KACA,aACA,UACA,GAAG,WACyB;CAC5B,MAAM,EAAE,MAAM,OAAO,WAAW,UAAU,qBAAqB;CAE/D,OACE,qBAAC,SAAD;EACO;EACC;EACC;EACI;EACJ;EACP,GAAI;YANN,CAQE,oBAAC,eAAe,aAAhB;GAA4B,WAAU;cAClC,EAAE,eAAe,mBACjB,gBAAiB,eAAe,KAAO,YAAY;EAE3B,CAAA,GAC5B,oBAAC,aAAD;GAAa,IAAI;GAAmB;GAAiB;EAAY,CAAA,CAC1D;;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 })]
 			})
 		})
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"SideBar.js","names":[],"sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, Theme, cn } from '../../styled'\nimport { SideBarContext } from './SideBar.context'\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\n\nconst light = {\n  '--background': 'white',\n  '--text': 'var(--color-grey-800)',\n  '--border': 'var(--color-grey-200)'\n}\n\nconst Root = styled('div', {\n  base: ['sticky', 'z-1'],\n  variants: {\n    type: {\n      static: [],\n      expandable: ['w-22']\n    }\n  }\n})\n\nconst Content = styled('div', {\n  base: [\n    'bg-(--background)',\n    'border-r',\n    'border-r-(--border)',\n    'shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]',\n    'flex',\n    'flex-col',\n    'h-full',\n    'overflow-hidden',\n    'will-change-width',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[shadow,width]'\n  ],\n  variants: {\n    type: {\n      static: [],\n      expandable: []\n    },\n    isExpanded: {\n      true: ['w-[16rem]'],\n      false: ['w-22']\n    }\n  },\n  compoundVariants: [\n    {\n      isExpanded: true,\n      type: 'expandable',\n      class: ['shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]']\n    }\n  ]\n})\n\nconst PointerBlocker = styled('div', {\n  base: [\n    'bottom-0',\n    'left-0',\n    'absolute',\n    'right-0',\n    'top-0',\n    'transition-all'\n  ],\n  variants: {\n    isVisible: {\n      true: ['delay-0', 'visible'],\n      false: ['delay-50', 'invisible']\n    }\n  }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n  className?: string\n  offset?: number | string\n} & React.ComponentProps<typeof Theme>\n\nconst SideBarComponent = ({\n  theme,\n  className,\n  children,\n  type = 'expandable',\n  offset = '0px',\n  style,\n  ...rest\n}: SideBarProps) => {\n  const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  useInteractOutside({\n    ref,\n    onInteractOutside: () => setIsExpanded(false)\n  })\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: () => setIsExpanded(true),\n    onBlurWithin: () => setIsExpanded(false)\n  })\n  const { hoverProps, isHovered } = useHover({\n    onHoverStart: () => setIsExpanded(true),\n    onHoverEnd: () => setIsExpanded(false)\n  })\n  const touchProps = {\n    onTouchEnd: () => setIsExpanded(true)\n  }\n\n  const expandableProps =\n    type === 'expandable'\n      ? {\n          ...focusWithinProps,\n          ...hoverProps,\n          ...touchProps,\n          ref\n        }\n      : {}\n\n  const sideBarContextValue = React.useMemo(\n    () => ({ isExpanded }),\n    [isExpanded]\n  )\n\n  return (\n    <SideBarContext value={sideBarContextValue}>\n      <Theme theme={theme || light}>\n        <Root\n          {...rest}\n          style={{ ...style, '--offset': offset }}\n          type={type}\n          className={cn(\n            'h-[calc(100svh-var(--offset))]',\n            'top-(--offset)',\n            className\n          )}\n        >\n          <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n            {children}\n            {/**\n             * When the SideBar is collapsed, ensure that the initial tap event\n             * is used to expand the nav first before making the items available\n             */}\n            {type === 'expandable' && (\n              <PointerBlocker isVisible={!isHovered && !isExpanded} />\n            )}\n          </Content>\n        </Root>\n      </Theme>\n    </SideBarContext>\n  )\n}\n\nexport const SideBar = /* @__PURE__ */ Object.assign(SideBarComponent, {\n  Brand: SideBarBrand,\n  BrandLogo: SideBarBrandLogo,\n  BrandName: SideBarBrandName,\n  Header: SideBarHeader,\n  Body: SideBarBody,\n  Footer: SideBarFooter,\n  displayName: 'SideBar'\n})\n"],"mappings":";;;;;;;;AAcA,IAAM,QAAQ;CACZ,gBAAgB;CAChB,UAAU;CACV,YAAY;AACd;AAEA,IAAM,OAAO,OAAO,OAAO;CACzB,MAAM,CAAC,UAAU,KAAK;CACtB,UAAU,EACR,MAAM;EACJ,QAAQ,CAAC;EACT,YAAY,CAAC,MAAM;CACrB,EACF;AACF,CAAC;AAED,IAAM,UAAU,OAAO,OAAO;CAC5B,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,QAAQ,CAAC;GACT,YAAY,CAAC;EACf;EACA,YAAY;GACV,MAAM,CAAC,WAAW;GAClB,OAAO,CAAC,MAAM;EAChB;CACF;CACA,kBAAkB,CAChB;EACE,YAAY;EACZ,MAAM;EACN,OAAO,CAAC,4CAA4C;CACtD,CACF;AACF,CAAC;AAED,IAAM,iBAAiB,OAAO,OAAO;CACnC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,WAAW;EACT,MAAM,CAAC,WAAW,SAAS;EAC3B,OAAO,CAAC,YAAY,WAAW;CACjC,EACF;AACF,CAAC;AAOD,IAAM,oBAAoB,EACxB,OACA,WACA,UACA,OAAO,cACP,SAAS,OACT,OACA,GAAG,WACe;CAClB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,SAAS,QAAQ;CACpE,MAAM,MAAM,QAAM,OAAuB,IAAI;CAE7C,mBAAmB;EACjB;EACA,yBAAyB,cAAc,KAAK;CAC9C,CAAC;CACD,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB,cAAc,IAAI;EACvC,oBAAoB,cAAc,KAAK;CACzC,CAAC;CACD,MAAM,EAAE,YAAY,cAAc,SAAS;EACzC,oBAAoB,cAAc,IAAI;EACtC,kBAAkB,cAAc,KAAK;CACvC,CAAC;CACD,MAAM,aAAa,EACjB,kBAAkB,cAAc,IAAI,EACtC;CAEA,MAAM,kBACJ,SAAS,eACL;EACE,GAAG;EACH,GAAG;EACH,GAAG;EACH;CACF,IACA,CAAC;CAOP,OACE,oBAAC,gBAAD;EAAgB,OANU,QAAM,eACzB,EAAE,WAAW,IACpB,CAAC,UAAU,CAIY;YACrB,oBAAC,OAAD;GAAO,OAAO,SAAS;aACrB,oBAAC,MAAD;IACE,GAAI;IACJ,OAAO;KAAE,GAAG;KAAO,YAAY;IAAO;IAChC;IACN,WAAW,GACT,kCACA,kBACA,SACF;cAEA,qBAAC,SAAD;KAAS,GAAI;KAA6B;KAAkB;eAA5D,CACG,UAKA,SAAS,gBACR,oBAAC,gBAAD,EAAgB,WAAW,CAAC,aAAa,CAAC,WAAa,CAAA,CAElD;;GACL,CAAA;EACD,CAAA;CACO,CAAA;AAEpB;AAEA,IAAa,UAA0B,uBAAO,OAAO,kBAAkB;CACrE,OAAO;CACP,WAAW;CACX,WAAW;CACX,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,aAAa;AACf,CAAC"}
+{"version":3,"file":"SideBar.js","names":[],"sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, cn } from '../../styled'\nimport { SideBarContext } from './SideBar.context'\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\n\nconst Root = styled('div', {\n  base: ['sticky', 'z-1'],\n  variants: {\n    type: {\n      static: [],\n      expandable: ['w-22']\n    }\n  }\n})\n\nconst Content = styled('div', {\n  base: [\n    'bg-surface',\n    'text-default',\n    'border-r',\n    'border-r-subtle',\n    // Transparent so the expanded edge shadow transitions in\n    'shadow-[4px_0_4px_-2px_transparent]',\n    'flex',\n    'flex-col',\n    'h-full',\n    'overflow-hidden',\n    'will-change-width',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[shadow,width]'\n  ],\n  variants: {\n    type: {\n      static: [],\n      expandable: []\n    },\n    isExpanded: {\n      true: ['w-[16rem]'],\n      false: ['w-22']\n    }\n  },\n  compoundVariants: [\n    {\n      isExpanded: true,\n      type: 'expandable',\n      class: ['shadow-(--shadow-edge-end)']\n    }\n  ]\n})\n\nconst PointerBlocker = styled('div', {\n  base: [\n    'bottom-0',\n    'left-0',\n    'absolute',\n    'right-0',\n    'top-0',\n    'transition-all'\n  ],\n  variants: {\n    isVisible: {\n      true: ['delay-0', 'visible'],\n      false: ['delay-50', 'invisible']\n    }\n  }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n  className?: string\n  offset?: number | string\n}\n\nconst SideBarComponent = ({\n  className,\n  children,\n  type = 'expandable',\n  offset = '0px',\n  style,\n  ...rest\n}: SideBarProps) => {\n  const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  useInteractOutside({\n    ref,\n    onInteractOutside: () => setIsExpanded(false)\n  })\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: () => setIsExpanded(true),\n    onBlurWithin: () => setIsExpanded(false)\n  })\n  const { hoverProps, isHovered } = useHover({\n    onHoverStart: () => setIsExpanded(true),\n    onHoverEnd: () => setIsExpanded(false)\n  })\n  const touchProps = {\n    onTouchEnd: () => setIsExpanded(true)\n  }\n\n  const expandableProps =\n    type === 'expandable'\n      ? {\n          ...focusWithinProps,\n          ...hoverProps,\n          ...touchProps,\n          ref\n        }\n      : {}\n\n  const sideBarContextValue = React.useMemo(\n    () => ({ isExpanded }),\n    [isExpanded]\n  )\n\n  return (\n    <SideBarContext value={sideBarContextValue}>\n      <Root\n        {...rest}\n        style={{ ...style, '--offset': offset }}\n        type={type}\n        className={cn(\n          'h-[calc(100svh-var(--offset))]',\n          'top-(--offset)',\n          className\n        )}\n      >\n        <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n          {children}\n          {/**\n           * When the SideBar is collapsed, ensure that the initial tap event\n           * is used to expand the nav first before making the items available\n           */}\n          {type === 'expandable' && (\n            <PointerBlocker isVisible={!isHovered && !isExpanded} />\n          )}\n        </Content>\n      </Root>\n    </SideBarContext>\n  )\n}\n\nexport const SideBar = /* @__PURE__ */ Object.assign(SideBarComponent, {\n  Brand: SideBarBrand,\n  BrandLogo: SideBarBrandLogo,\n  BrandName: SideBarBrandName,\n  Header: SideBarHeader,\n  Body: SideBarBody,\n  Footer: SideBarFooter,\n  displayName: 'SideBar'\n})\n"],"mappings":";;;;;;;;AAcA,IAAM,OAAO,OAAO,OAAO;CACzB,MAAM,CAAC,UAAU,KAAK;CACtB,UAAU,EACR,MAAM;EACJ,QAAQ,CAAC;EACT,YAAY,CAAC,MAAM;CACrB,EACF;AACF,CAAC;AAED,IAAM,UAAU,OAAO,OAAO;CAC5B,MAAM;EACJ;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,MAAM;GACJ,QAAQ,CAAC;GACT,YAAY,CAAC;EACf;EACA,YAAY;GACV,MAAM,CAAC,WAAW;GAClB,OAAO,CAAC,MAAM;EAChB;CACF;CACA,kBAAkB,CAChB;EACE,YAAY;EACZ,MAAM;EACN,OAAO,CAAC,4BAA4B;CACtC,CACF;AACF,CAAC;AAED,IAAM,iBAAiB,OAAO,OAAO;CACnC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,WAAW;EACT,MAAM,CAAC,WAAW,SAAS;EAC3B,OAAO,CAAC,YAAY,WAAW;CACjC,EACF;AACF,CAAC;AAOD,IAAM,oBAAoB,EACxB,WACA,UACA,OAAO,cACP,SAAS,OACT,OACA,GAAG,WACe;CAClB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,SAAS,QAAQ;CACpE,MAAM,MAAM,QAAM,OAAuB,IAAI;CAE7C,mBAAmB;EACjB;EACA,yBAAyB,cAAc,KAAK;CAC9C,CAAC;CACD,MAAM,EAAE,qBAAqB,eAAe;EAC1C,qBAAqB,cAAc,IAAI;EACvC,oBAAoB,cAAc,KAAK;CACzC,CAAC;CACD,MAAM,EAAE,YAAY,cAAc,SAAS;EACzC,oBAAoB,cAAc,IAAI;EACtC,kBAAkB,cAAc,KAAK;CACvC,CAAC;CACD,MAAM,aAAa,EACjB,kBAAkB,cAAc,IAAI,EACtC;CAEA,MAAM,kBACJ,SAAS,eACL;EACE,GAAG;EACH,GAAG;EACH,GAAG;EACH;CACF,IACA,CAAC;CAOP,OACE,oBAAC,gBAAD;EAAgB,OANU,QAAM,eACzB,EAAE,WAAW,IACpB,CAAC,UAAU,CAIY;YACrB,oBAAC,MAAD;GACE,GAAI;GACJ,OAAO;IAAE,GAAG;IAAO,YAAY;GAAO;GAChC;GACN,WAAW,GACT,kCACA,kBACA,SACF;aAEA,qBAAC,SAAD;IAAS,GAAI;IAA6B;IAAkB;cAA5D,CACG,UAKA,SAAS,gBACR,oBAAC,gBAAD,EAAgB,WAAW,CAAC,aAAa,CAAC,WAAa,CAAA,CAElD;;EACL,CAAA;CACQ,CAAA;AAEpB;AAEA,IAAa,UAA0B,uBAAO,OAAO,kBAAkB;CACrE,OAAO;CACP,WAAW;CACX,WAAW;CACX,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,aAAa;AACf,CAAC"}

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

@@ -5,7 +5,7 @@ import "react";
 //#region src/components/side-bar/SideBarComponents.tsx
 var SideBarHeader = styled("div", { base: [
 	"border-b",
-	"border-b-(--border)",
+	"border-b-subtle",
 	"p-4",
 	"w-full"
 ] });
@@ -18,13 +18,12 @@ var SideBarBody = styled("div", { base: [
 ] });
 var SideBarFooter = styled("div", { base: [
 	"border-t",
-	"border-t-(--border)",
+	"border-t-subtle",
 	"p-4",
 	"w-full"
 ] });
 var SideBarBrand = /* @__PURE__ */ styled("a", { base: [
 	"items-end",
-	"text-text",
 	"flex",
 	"gap-4",
 	"no-underline",
@@ -32,7 +31,7 @@ var SideBarBrand = /* @__PURE__ */ styled("a", { base: [
 	"focus:no-underline"
 ] });
 var SideBarBrandLogo = Image;
-var SideBarBrandName = styled(Text, { base: ["text-text", "whitespace-nowrap"] });
+var SideBarBrandName = styled(Text, { base: ["whitespace-nowrap"] });
 //#endregion
 export { SideBarBody, SideBarBrand, SideBarBrandLogo, SideBarBrandName, SideBarFooter, SideBarHeader };
 

package/dist/components/side-bar/SideBarComponents.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideBarComponents.js","names":[],"sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Image } from '../image/Image'\nimport { Text } from '../text/Text'\n\nexport const SideBarHeader = styled('div', {\n  base: ['border-b', 'border-b-(--border)', 'p-4', 'w-full']\n})\n\nexport const SideBarBody = styled('div', {\n  base: ['grow', 'overflow-y-auto', 'overflow-x-hidden', 'p-4', 'w-full']\n})\n\nexport const SideBarFooter = styled('div', {\n  base: ['border-t', 'border-t-(--border)', 'p-4', 'w-full']\n})\n\nconst StyledSideBarBrand = /* @__PURE__ */ styled('a', {\n  base: [\n    'items-end',\n    'text-text',\n    'flex',\n    'gap-4',\n    'no-underline',\n    'hover:no-underline',\n    'focus:no-underline'\n  ]\n})\n\nexport const SideBarBrand = StyledSideBarBrand as React.FC<\n  React.ComponentPropsWithRef<'a'> & { as?: React.ElementType }\n>\n\nexport const SideBarBrandLogo = Image\n\nexport const SideBarBrandName = styled(Text, {\n  base: ['text-text', 'whitespace-nowrap']\n})\n"],"mappings":";;;;;AAMA,IAAa,gBAAgB,OAAO,OAAO,EACzC,MAAM;CAAC;CAAY;CAAuB;CAAO;AAAQ,EAC3D,CAAC;AAED,IAAa,cAAc,OAAO,OAAO,EACvC,MAAM;CAAC;CAAQ;CAAmB;CAAqB;CAAO;AAAQ,EACxE,CAAC;AAED,IAAa,gBAAgB,OAAO,OAAO,EACzC,MAAM;CAAC;CAAY;CAAuB;CAAO;AAAQ,EAC3D,CAAC;AAcD,IAAa,eAAe,gBAZe,OAAO,KAAK,EACrD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAE4B;AAI5B,IAAa,mBAAmB;AAEhC,IAAa,mBAAmB,OAAO,MAAM,EAC3C,MAAM,CAAC,aAAa,mBAAmB,EACzC,CAAC"}
+{"version":3,"file":"SideBarComponents.js","names":[],"sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Image } from '../image/Image'\nimport { Text } from '../text/Text'\n\nexport const SideBarHeader = styled('div', {\n  base: ['border-b', 'border-b-subtle', 'p-4', 'w-full']\n})\n\nexport const SideBarBody = styled('div', {\n  base: ['grow', 'overflow-y-auto', 'overflow-x-hidden', 'p-4', 'w-full']\n})\n\nexport const SideBarFooter = styled('div', {\n  base: ['border-t', 'border-t-subtle', 'p-4', 'w-full']\n})\n\nconst StyledSideBarBrand = /* @__PURE__ */ styled('a', {\n  base: [\n    'items-end',\n    'flex',\n    'gap-4',\n    'no-underline',\n    'hover:no-underline',\n    'focus:no-underline'\n  ]\n})\n\nexport const SideBarBrand = StyledSideBarBrand as React.FC<\n  React.ComponentPropsWithRef<'a'> & { as?: React.ElementType }\n>\n\nexport const SideBarBrandLogo = Image\n\nexport const SideBarBrandName = styled(Text, {\n  base: ['whitespace-nowrap']\n})\n"],"mappings":";;;;;AAMA,IAAa,gBAAgB,OAAO,OAAO,EACzC,MAAM;CAAC;CAAY;CAAmB;CAAO;AAAQ,EACvD,CAAC;AAED,IAAa,cAAc,OAAO,OAAO,EACvC,MAAM;CAAC;CAAQ;CAAmB;CAAqB;CAAO;AAAQ,EACxE,CAAC;AAED,IAAa,gBAAgB,OAAO,OAAO,EACzC,MAAM;CAAC;CAAY;CAAmB;CAAO;AAAQ,EACvD,CAAC;AAaD,IAAa,eAAe,gBAXe,OAAO,KAAK,EACrD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAE4B;AAI5B,IAAa,mBAAmB;AAEhC,IAAa,mBAAmB,OAAO,MAAM,EAC3C,MAAM,CAAC,mBAAmB,EAC5B,CAAC"}

package/dist/components/skeleton-loader/Skeleton.js

@@ -1,7 +1,7 @@
 import { styled } from "../../styled.js";
 //#region src/components/skeleton-loader/Skeleton.tsx
 var SkeletonLoader = styled("div", { base: [
-	"bg-grey-300",
+	"bg-neutral",
 	"size-16",
 	"animate-shimmer"
 ] });

package/dist/components/skeleton-loader/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../src/components/skeleton-loader/Skeleton.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const SkeletonLoader = styled('div', {\n  base: ['bg-grey-300', 'size-16', 'animate-shimmer']\n})\n\nSkeletonLoader.displayName = 'Skeleton'\n"],"mappings":";;AAEA,IAAa,iBAAiB,OAAO,OAAO,EAC1C,MAAM;CAAC;CAAe;CAAW;AAAiB,EACpD,CAAC;AAED,eAAe,cAAc"}
+{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../src/components/skeleton-loader/Skeleton.tsx"],"sourcesContent":["import { styled } from '../../styled'\n\nexport const SkeletonLoader = styled('div', {\n  base: ['bg-neutral', 'size-16', 'animate-shimmer']\n})\n\nSkeletonLoader.displayName = 'Skeleton'\n"],"mappings":";;AAEA,IAAa,iBAAiB,OAAO,OAAO,EAC1C,MAAM;CAAC;CAAc;CAAW;AAAiB,EACnD,CAAC;AAED,eAAe,cAAc"}

package/dist/components/skeleton-loader/SkeletonCard.js

@@ -12,7 +12,7 @@ var SkeletonCard = ({ numberOfRows = 3, withChart, className }) => /* @__PURE__
 		className: "align-center flex w-full gap-6",
 		children: [withChart && /* @__PURE__ */ jsx(SkeletonDoughnutChart, {}), /* @__PURE__ */ jsx("div", {
 			className: "flex grow flex-col gap-6",
-			children: Array.from({ length: numberOfRows }, (_, index) => index).map((rowNumber) => /* @__PURE__ */ jsx(SkeletonLoader, { className: "bg-grey-200 h-10 w-full min-w-25 rounded-md" }, rowNumber))
+			children: Array.from({ length: numberOfRows }, (_, index) => index).map((rowNumber) => /* @__PURE__ */ jsx(SkeletonLoader, { className: "bg-neutral h-10 w-full min-w-25 rounded-md" }, rowNumber))
 		})]
 	}), /* @__PURE__ */ jsx(SkeletonButton, {})]
 });

package/dist/components/skeleton-loader/SkeletonCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonCard.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\nimport { SkeletonButton } from './SkeletonButton'\nimport { SkeletonDoughnutChart } from './SkeletonDoughnutChart'\n\nexport const SkeletonCard = ({\n  numberOfRows = 3,\n  withChart,\n  className\n}: {\n  numberOfRows?: number\n  withChart?: boolean\n  className?: string\n}) => (\n  <Tile\n    className={cn(\n      'relative',\n      'w-full',\n      'flex-col',\n      'items-center',\n      'gap-6',\n      'p-6',\n      className\n    )}\n  >\n    <div className=\"align-center flex w-full gap-6\">\n      {withChart && <SkeletonDoughnutChart />}\n      <div className=\"flex grow flex-col gap-6\">\n        {Array.from({ length: numberOfRows }, (_, index) => index).map(\n          (rowNumber) => (\n            <SkeletonLoader\n              key={rowNumber}\n              className=\"bg-grey-200 h-10 w-full min-w-25 rounded-md\"\n            />\n          )\n        )}\n      </div>\n    </div>\n    <SkeletonButton />\n  </Tile>\n)\n"],"mappings":";;;;;;;;AAQA,IAAa,gBAAgB,EAC3B,eAAe,GACf,WACA,gBAMA,qBAAC,MAAD;CACE,WAAW,GACT,YACA,UACA,YACA,gBACA,SACA,OACA,SACF;WATF,CAWE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,aAAa,oBAAC,uBAAD,CAAwB,CAAA,GACtC,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KACxD,cACC,oBAAC,gBAAD,EAEE,WAAU,8CACX,GAFM,SAEN,CAEL;EACG,CAAA,CACF;KACL,oBAAC,gBAAD,CAAiB,CAAA,CACb"}
+{"version":3,"file":"SkeletonCard.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonCard.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\nimport { SkeletonButton } from './SkeletonButton'\nimport { SkeletonDoughnutChart } from './SkeletonDoughnutChart'\n\nexport const SkeletonCard = ({\n  numberOfRows = 3,\n  withChart,\n  className\n}: {\n  numberOfRows?: number\n  withChart?: boolean\n  className?: string\n}) => (\n  <Tile\n    className={cn(\n      'relative',\n      'w-full',\n      'flex-col',\n      'items-center',\n      'gap-6',\n      'p-6',\n      className\n    )}\n  >\n    <div className=\"align-center flex w-full gap-6\">\n      {withChart && <SkeletonDoughnutChart />}\n      <div className=\"flex grow flex-col gap-6\">\n        {Array.from({ length: numberOfRows }, (_, index) => index).map(\n          (rowNumber) => (\n            <SkeletonLoader\n              key={rowNumber}\n              className=\"bg-neutral h-10 w-full min-w-25 rounded-md\"\n            />\n          )\n        )}\n      </div>\n    </div>\n    <SkeletonButton />\n  </Tile>\n)\n"],"mappings":";;;;;;;;AAQA,IAAa,gBAAgB,EAC3B,eAAe,GACf,WACA,gBAMA,qBAAC,MAAD;CACE,WAAW,GACT,YACA,UACA,YACA,gBACA,SACA,OACA,SACF;WATF,CAWE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACG,aAAa,oBAAC,uBAAD,CAAwB,CAAA,GACtC,oBAAC,OAAD;GAAK,WAAU;aACZ,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KACxD,cACC,oBAAC,gBAAD,EAEE,WAAU,6CACX,GAFM,SAEN,CAEL;EACG,CAAA,CACF;KACL,oBAAC,gBAAD,CAAiB,CAAA,CACb"}

package/dist/components/skeleton-loader/SkeletonDoughnutChart.js

@@ -10,9 +10,9 @@ var buildConicGradient = () => {
 	const stops = [];
 	let current = 0;
 	Array.from({ length: numberOfSegments }).forEach(() => {
-		stops.push(`var(--color-grey-300) ${current}deg ${current + segmentAngle}deg`);
+		stops.push(`var(--background-color-neutral) ${current}deg ${current + segmentAngle}deg`);
 		current += segmentAngle;
-		stops.push(`white ${current}deg ${current + gap}deg`);
+		stops.push(`var(--background-color-surface) ${current}deg ${current + gap}deg`);
 		current += gap;
 	});
 	return `conic-gradient(${stops.join(", ")})`;
@@ -22,7 +22,7 @@ var SkeletonDoughnutChart = ({ className }) => /* @__PURE__ */ jsx(Tile, {
 	children: /* @__PURE__ */ jsx("div", {
 		className: "animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding",
 		style: { "--gradient": buildConicGradient() },
-		children: /* @__PURE__ */ jsx("div", { className: "mt-[20%] ml-[20%] size-[60%] rounded-full bg-white" })
+		children: /* @__PURE__ */ jsx("div", { className: "bg-surface mt-[20%] ml-[20%] size-[60%] rounded-full" })
 	})
 });
 //#endregion

package/dist/components/skeleton-loader/SkeletonDoughnutChart.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonDoughnutChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonDoughnutChart.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Tile } from '../tile/Tile'\n\nconst buildConicGradient = () => {\n  const numberOfSegments = 5\n  const gap = 4\n  const segmentAngle = (360 - numberOfSegments * gap) / numberOfSegments\n  const stops: string[] = []\n  let current = 0\n\n  Array.from({ length: numberOfSegments }).forEach(() => {\n    stops.push(\n      `var(--color-grey-300) ${current}deg ${current + segmentAngle}deg`\n    )\n    current += segmentAngle\n    stops.push(`white ${current}deg ${current + gap}deg`)\n    current += gap\n  })\n\n  return `conic-gradient(${stops.join(', ')})`\n}\n\nexport const SkeletonDoughnutChart = ({\n  className\n}: {\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'size-60', className)}>\n    <div\n      className=\"animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding\"\n      style={{ '--gradient': buildConicGradient() }}\n    >\n      <div className=\"mt-[20%] ml-[20%] size-[60%] rounded-full bg-white\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;AAKA,IAAM,2BAA2B;CAC/B,MAAM,mBAAmB;CACzB,MAAM,MAAM;CACZ,MAAM,gBAAgB,MAAM,mBAAmB,OAAO;CACtD,MAAM,QAAkB,CAAC;CACzB,IAAI,UAAU;CAEd,MAAM,KAAK,EAAE,QAAQ,iBAAiB,CAAC,CAAC,CAAC,cAAc;EACrD,MAAM,KACJ,yBAAyB,QAAQ,MAAM,UAAU,aAAa,IAChE;EACA,WAAW;EACX,MAAM,KAAK,SAAS,QAAQ,MAAM,UAAU,IAAI,IAAI;EACpD,WAAW;CACb,CAAC;CAED,OAAO,kBAAkB,MAAM,KAAK,IAAI,EAAE;AAC5C;AAEA,IAAa,yBAAyB,EACpC,gBAIA,oBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,WAAW,SAAS;WAC7C,oBAAC,OAAD;EACE,WAAU;EACV,OAAO,EAAE,cAAc,mBAAmB,EAAE;YAE5C,oBAAC,OAAD,EAAK,WAAU,qDAAsD,CAAA;CAClE,CAAA;AACD,CAAA"}
+{"version":3,"file":"SkeletonDoughnutChart.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonDoughnutChart.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Tile } from '../tile/Tile'\n\nconst buildConicGradient = () => {\n  const numberOfSegments = 5\n  const gap = 4\n  const segmentAngle = (360 - numberOfSegments * gap) / numberOfSegments\n  const stops: string[] = []\n  let current = 0\n\n  Array.from({ length: numberOfSegments }).forEach(() => {\n    stops.push(\n      `var(--background-color-neutral) ${current}deg ${current + segmentAngle}deg`\n    )\n    current += segmentAngle\n    stops.push(\n      `var(--background-color-surface) ${current}deg ${current + gap}deg`\n    )\n    current += gap\n  })\n\n  return `conic-gradient(${stops.join(', ')})`\n}\n\nexport const SkeletonDoughnutChart = ({\n  className\n}: {\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'size-60', className)}>\n    <div\n      className=\"animate-shimmer aspect-square w-full rounded-full [background-image:var(--gradient)] bg-clip-padding\"\n      style={{ '--gradient': buildConicGradient() }}\n    >\n      <div className=\"bg-surface mt-[20%] ml-[20%] size-[60%] rounded-full\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;AAKA,IAAM,2BAA2B;CAC/B,MAAM,mBAAmB;CACzB,MAAM,MAAM;CACZ,MAAM,gBAAgB,MAAM,mBAAmB,OAAO;CACtD,MAAM,QAAkB,CAAC;CACzB,IAAI,UAAU;CAEd,MAAM,KAAK,EAAE,QAAQ,iBAAiB,CAAC,CAAC,CAAC,cAAc;EACrD,MAAM,KACJ,mCAAmC,QAAQ,MAAM,UAAU,aAAa,IAC1E;EACA,WAAW;EACX,MAAM,KACJ,mCAAmC,QAAQ,MAAM,UAAU,IAAI,IACjE;EACA,WAAW;CACb,CAAC;CAED,OAAO,kBAAkB,MAAM,KAAK,IAAI,EAAE;AAC5C;AAEA,IAAa,yBAAyB,EACpC,gBAIA,oBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,WAAW,SAAS;WAC7C,oBAAC,OAAD;EACE,WAAU;EACV,OAAO,EAAE,cAAc,mBAAmB,EAAE;YAE5C,oBAAC,OAAD,EAAK,WAAU,uDAAwD,CAAA;CACpE,CAAA;AACD,CAAA"}

package/dist/components/skeleton-loader/SkeletonPanelList.js

@@ -7,7 +7,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var SkeletonPanelList = ({ className }) => /* @__PURE__ */ jsx(Tile, {
 	className: cn("px-6", "flex-col", "w-full", className),
 	children: /* @__PURE__ */ jsxs("div", {
-		className: "border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0",
+		className: "border-subtlest flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0",
 		children: [
 			/* @__PURE__ */ jsx(SkeletonLoader, { className: "size-10 rounded-full" }),
 			/* @__PURE__ */ jsx("div", {

package/dist/components/skeleton-loader/SkeletonPanelList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonPanelList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonPanelList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonPanelList = ({ className }: { className?: string }) => (\n  <Tile className={cn('px-6', 'flex-col', 'w-full', className)}>\n    <div className=\"border-grey-100 flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0\">\n      <SkeletonLoader className=\"size-10 rounded-full\" />\n      <div className=\"grow\">\n        <SkeletonLoader className=\"h-4 w-2/3 rounded-full\" />\n      </div>\n      <SkeletonLoader className=\"h-8 w-28 rounded-md\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;;AAMA,IAAa,qBAAqB,EAAE,gBAClC,oBAAC,MAAD;CAAM,WAAW,GAAG,QAAQ,YAAY,UAAU,SAAS;WACzD,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,gBAAD,EAAgB,WAAU,uBAAwB,CAAA;GAClD,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA;GACjD,CAAA;GACL,oBAAC,gBAAD,EAAgB,WAAU,sBAAuB,CAAA;EAC9C;;AACD,CAAA"}
+{"version":3,"file":"SkeletonPanelList.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonPanelList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonPanelList = ({ className }: { className?: string }) => (\n  <Tile className={cn('px-6', 'flex-col', 'w-full', className)}>\n    <div className=\"border-subtlest flex flex-wrap items-center gap-4 border-b py-4 last:border-b-0\">\n      <SkeletonLoader className=\"size-10 rounded-full\" />\n      <div className=\"grow\">\n        <SkeletonLoader className=\"h-4 w-2/3 rounded-full\" />\n      </div>\n      <SkeletonLoader className=\"h-8 w-28 rounded-md\" />\n    </div>\n  </Tile>\n)\n"],"mappings":";;;;;;AAMA,IAAa,qBAAqB,EAAE,gBAClC,oBAAC,MAAD;CAAM,WAAW,GAAG,QAAQ,YAAY,UAAU,SAAS;WACzD,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,gBAAD,EAAgB,WAAU,uBAAwB,CAAA;GAClD,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,gBAAD,EAAgB,WAAU,yBAA0B,CAAA;GACjD,CAAA;GACL,oBAAC,gBAAD,EAAgB,WAAU,sBAAuB,CAAA;EAC9C;;AACD,CAAA"}

package/dist/components/skeleton-loader/SkeletonTable.js

@@ -10,7 +10,7 @@ var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, class
 	children: /* @__PURE__ */ jsxs(Table, {
 		size: "md",
 		children: [/* @__PURE__ */ jsx(Table.Header, {
-			theme: "white",
+			appearance: "surface",
 			children: /* @__PURE__ */ jsx(Table.Row, { children: Array.from({ length: numberOfColumns }, (_, index) => index).map((columnIndex) => /* @__PURE__ */ jsx(Table.HeaderCell, { children: /* @__PURE__ */ jsx(SkeletonLoader, {
 				style: { "--width": columnWidth?.[columnIndex] || "100px" },
 				className: "h-4 w-(--width) rounded-xl"
@@ -21,7 +21,7 @@ var SkeletonTable = ({ numberOfColumns = 4, numberOfRows = 4, columnWidth, class
 				className: "border-none",
 				children: /* @__PURE__ */ jsx(SkeletonLoader, {
 					style: { "--width": columnWidth?.[columnIndex] || "100px" },
-					className: "bg-grey-200 h-4 w-(--width) rounded-xl"
+					className: "bg-neutral h-4 w-(--width) rounded-xl"
 				})
 			}, columnIndex)) }, rowIndex))
 		})]

package/dist/components/skeleton-loader/SkeletonTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"SkeletonTable.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTable = ({\n  numberOfColumns = 4,\n  numberOfRows = 4,\n  columnWidth,\n  className\n}: {\n  numberOfColumns?: number\n  numberOfRows?: number\n  columnWidth?: Record<number, string>\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'flex-row', 'gap-4', 'relative', className)}>\n    <Table size=\"md\">\n      <Table.Header theme=\"white\">\n        {/* A <thead> may only contain <tr>, so the cells need a Table.Row\n            around them as they do in Table.Body below. */}\n        <Table.Row>\n          {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n            (columnIndex) => (\n              <Table.HeaderCell key={columnIndex}>\n                <SkeletonLoader\n                  style={{ '--width': columnWidth?.[columnIndex] || '100px' }}\n                  className=\"h-4 w-(--width) rounded-xl\"\n                />\n              </Table.HeaderCell>\n            )\n          )}\n        </Table.Row>\n      </Table.Header>\n      <Table.Body striped={false}>\n        {Array.from({ length: numberOfRows }, (_, index) => index).map(\n          (rowIndex) => (\n            <Table.Row key={rowIndex}>\n              {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n                (columnIndex) => (\n                  <Table.Cell key={columnIndex} className=\"border-none\">\n                    <SkeletonLoader\n                      style={{\n                        '--width': columnWidth?.[columnIndex] || '100px'\n                      }}\n                      className=\"bg-grey-200 h-4 w-(--width) rounded-xl\"\n                    />\n                  </Table.Cell>\n                )\n              )}\n            </Table.Row>\n          )\n        )}\n      </Table.Body>\n    </Table>\n  </Tile>\n)\n"],"mappings":";;;;;;;AAOA,IAAa,iBAAiB,EAC5B,kBAAkB,GAClB,eAAe,GACf,aACA,gBAOA,oBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,YAAY,SAAS,YAAY,SAAS;WACnE,qBAAC,OAAD;EAAO,MAAK;YAAZ,CACE,oBAAC,MAAM,QAAP;GAAc,OAAM;aAGlB,oBAAC,MAAM,KAAP,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KAC3D,gBACC,oBAAC,MAAM,YAAP,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,WAAW,cAAc,gBAAgB,QAAQ;IAC1D,WAAU;GACX,CAAA,EACe,GALK,WAKL,CAEtB,EACS,CAAA;EACC,CAAA,GACd,oBAAC,MAAM,MAAP;GAAY,SAAS;aAClB,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KACxD,aACC,oBAAC,MAAM,KAAP,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KAC3D,gBACC,oBAAC,MAAM,MAAP;IAA8B,WAAU;cACtC,oBAAC,gBAAD;KACE,OAAO,EACL,WAAW,cAAc,gBAAgB,QAC3C;KACA,WAAU;IACX,CAAA;GACS,GAPK,WAOL,CAEhB,EACS,GAbK,QAaL,CAEf;EACU,CAAA,CACP;;AACH,CAAA"}
+{"version":3,"file":"SkeletonTable.js","names":[],"sources":["../../../src/components/skeleton-loader/SkeletonTable.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { Table } from '../table/Table'\nimport { Tile } from '../tile/Tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTable = ({\n  numberOfColumns = 4,\n  numberOfRows = 4,\n  columnWidth,\n  className\n}: {\n  numberOfColumns?: number\n  numberOfRows?: number\n  columnWidth?: Record<number, string>\n  className?: string\n}) => (\n  <Tile className={cn('p-6', 'flex-row', 'gap-4', 'relative', className)}>\n    <Table size=\"md\">\n      <Table.Header appearance=\"surface\">\n        {/* A <thead> may only contain <tr>, so the cells need a Table.Row\n            around them as they do in Table.Body below. */}\n        <Table.Row>\n          {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n            (columnIndex) => (\n              <Table.HeaderCell key={columnIndex}>\n                <SkeletonLoader\n                  style={{ '--width': columnWidth?.[columnIndex] || '100px' }}\n                  className=\"h-4 w-(--width) rounded-xl\"\n                />\n              </Table.HeaderCell>\n            )\n          )}\n        </Table.Row>\n      </Table.Header>\n      <Table.Body striped={false}>\n        {Array.from({ length: numberOfRows }, (_, index) => index).map(\n          (rowIndex) => (\n            <Table.Row key={rowIndex}>\n              {Array.from({ length: numberOfColumns }, (_, index) => index).map(\n                (columnIndex) => (\n                  <Table.Cell key={columnIndex} className=\"border-none\">\n                    <SkeletonLoader\n                      style={{\n                        '--width': columnWidth?.[columnIndex] || '100px'\n                      }}\n                      className=\"bg-neutral h-4 w-(--width) rounded-xl\"\n                    />\n                  </Table.Cell>\n                )\n              )}\n            </Table.Row>\n          )\n        )}\n      </Table.Body>\n    </Table>\n  </Tile>\n)\n"],"mappings":";;;;;;;AAOA,IAAa,iBAAiB,EAC5B,kBAAkB,GAClB,eAAe,GACf,aACA,gBAOA,oBAAC,MAAD;CAAM,WAAW,GAAG,OAAO,YAAY,SAAS,YAAY,SAAS;WACnE,qBAAC,OAAD;EAAO,MAAK;YAAZ,CACE,oBAAC,MAAM,QAAP;GAAc,YAAW;aAGvB,oBAAC,MAAM,KAAP,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KAC3D,gBACC,oBAAC,MAAM,YAAP,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,WAAW,cAAc,gBAAgB,QAAQ;IAC1D,WAAU;GACX,CAAA,EACe,GALK,WAKL,CAEtB,EACS,CAAA;EACC,CAAA,GACd,oBAAC,MAAM,MAAP;GAAY,SAAS;aAClB,MAAM,KAAK,EAAE,QAAQ,aAAa,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KACxD,aACC,oBAAC,MAAM,KAAP,EAAA,UACG,MAAM,KAAK,EAAE,QAAQ,gBAAgB,IAAI,GAAG,UAAU,KAAK,CAAC,CAAC,KAC3D,gBACC,oBAAC,MAAM,MAAP;IAA8B,WAAU;cACtC,oBAAC,gBAAD;KACE,OAAO,EACL,WAAW,cAAc,gBAAgB,QAC3C;KACA,WAAU;IACX,CAAA;GACS,GAPK,WAOL,CAEhB,EACS,GAbK,QAaL,CAEf;EACU,CAAA,CACP;;AACH,CAAA"}

package/dist/components/slider/Slider.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
 declare const StyledTrack: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderTrackProps & React.RefAttributes<HTMLSpanElement>>, {
-    theme?: "light" | "tonal" | undefined;
+    appearance?: "light" | "tonal" | undefined;
 }>;
 declare const StyledSlider: import("../..").PolymorphicComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderProps & React.RefAttributes<HTMLSpanElement>>, unknown>;
-export type SliderProps = React.ComponentProps<typeof StyledSlider> & Pick<React.ComponentProps<typeof StyledTrack>, 'theme'>;
-export declare const Slider: (({ ref, value, defaultValue, min, max, theme, className, children, ...rest }: SliderProps) => React.JSX.Element) & {
+export type SliderProps = React.ComponentProps<typeof StyledSlider> & Pick<React.ComponentProps<typeof StyledTrack>, 'appearance'>;
+export declare const Slider: (({ ref, value, defaultValue, min, max, appearance, className, children, ...rest }: SliderProps) => React.JSX.Element) & {
     Value: ({ value, outputLabel }: import("./SliderValue").SliderValueType & {
         value?: number[];
     }) => React.JSX.Element;

package/dist/components/slider/Slider.js

@@ -14,9 +14,9 @@ var StyledTrack = styled(Track, {
 		"data-[orientation=horizontal]:h-1",
 		"data-[orientation=vertical]:w-1"
 	],
-	variants: { theme: {
-		light: ["bg-white"],
-		tonal: ["bg-grey-600"]
+	variants: { appearance: {
+		light: ["bg-surface"],
+		tonal: ["bg-neutral-solid"]
 	} }
 });
 var StyledSlider = styled(Root, { base: [
@@ -33,7 +33,7 @@ var StyledSlider = styled(Root, { base: [
 	"disabled:opacity-30"
 ] });
 var StyledRange = styled(Range, { base: [
-	"bg-primary-800",
+	"bg-accent-solid",
 	"rounded-full",
 	"h-full",
 	"absolute",
@@ -41,19 +41,19 @@ var StyledRange = styled(Range, { base: [
 	"disabled:opacity-30"
 ] });
 var StyledThumb = styled(Thumb, { base: [
-	"bg-primary-900",
+	"bg-accent-solid-hover",
 	"rounded-full",
 	"block",
 	"size-4",
-	"hover:bg-primary-1000",
-	"focus:outline-2",
-	"focus:outline-offset-2",
-	"focus:outline-primary-900",
-	"focus:outline-solid",
+	"hover:bg-accent-solid-active",
+	"focus-visible:outline-2",
+	"focus-visible:outline-offset-2",
+	"focus-visible:outline-focus",
+	"focus-visible:outline-solid",
 	"disabled:cursor-not-allowed",
 	"disabled:opacity-30"
 ] });
-var SliderComponent = ({ ref, value, defaultValue, min = 0, max = 100, theme = "tonal", className, children, ...rest }) => {
+var SliderComponent = ({ ref, value, defaultValue, min = 0, max = 100, appearance = "tonal", className, children, ...rest }) => {
 	const values = value || defaultValue;
 	return /* @__PURE__ */ jsxs(CSSWrapper, {
 		className,
@@ -65,7 +65,7 @@ var SliderComponent = ({ ref, value, defaultValue, min = 0, max = 100, theme = "
 			ref,
 			...rest,
 			children: [/* @__PURE__ */ jsx(StyledTrack, {
-				theme,
+				appearance,
 				children: /* @__PURE__ */ jsx(StyledRange, {})
 			}), values?.length && values.map((_, i) => /* @__PURE__ */ jsx(StyledThumb, {}, `thumb${i}`))]
 		}), children]

package/dist/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { CSSWrapper } from '../../utilities/css-wrapper/CSSWrapper'\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  base: [\n    'rounded-full',\n    'grow',\n    'relative',\n    'data-[orientation=horizontal]:h-1',\n    'data-[orientation=vertical]:w-1'\n  ],\n  variants: {\n    theme: {\n      light: ['bg-white'],\n      tonal: ['bg-grey-600']\n    }\n  }\n})\n\nconst StyledSlider = styled(Root, {\n  base: [\n    'items-center',\n    'flex',\n    'relative',\n    'touch-none',\n    'select-none',\n    'cursor-pointer',\n    'data-[orientation=horizontal]:h-4',\n    'data-[orientation=vertical]:flex-col',\n    'data-[orientation=vertical]:w-4',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledRange = styled(Range, {\n  base: [\n    'bg-primary-800',\n    'rounded-full',\n    'h-full',\n    'absolute',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledThumb = styled(Thumb, {\n  base: [\n    'bg-primary-900',\n    'rounded-full',\n    'block',\n    'size-4',\n    'hover:bg-primary-1000',\n    'focus:outline-2',\n    'focus:outline-offset-2',\n    'focus:outline-primary-900',\n    'focus:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider> &\n  Pick<React.ComponentProps<typeof StyledTrack>, 'theme'>\n\nconst SliderComponent = ({\n  ref,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  theme = 'tonal',\n  className,\n  children,\n  ...rest\n}: SliderProps) => {\n  const values = value || defaultValue\n  return (\n    <CSSWrapper className={className}>\n      <StyledSlider\n        defaultValue={defaultValue}\n        value={value}\n        min={min}\n        max={max}\n        ref={ref}\n        {...rest}\n      >\n        <StyledTrack theme={theme}>\n          <StyledRange />\n        </StyledTrack>\n        {values?.length &&\n          // Thumbs are positional and can share a value, so the index is their\n          // stable identity.\n          // eslint-disable-next-line react/no-array-index-key\n          values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n      </StyledSlider>\n      {children}\n    </CSSWrapper>\n  )\n}\n\nexport const Slider = /* @__PURE__ */ Object.assign(SliderComponent, {\n  Value: SliderValue,\n  Steps: SliderSteps\n})\n"],"mappings":";;;;;;;;AAQA,IAAM,cAAc,OAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,OAAO;EACL,OAAO,CAAC,UAAU;EAClB,OAAO,CAAC,aAAa;CACvB,EACF;AACF,CAAC;AAED,IAAM,eAAe,OAAO,MAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAKD,IAAM,mBAAmB,EACvB,KACA,OACA,cACA,MAAM,GACN,MAAM,KACN,QAAQ,SACR,WACA,UACA,GAAG,WACc;CACjB,MAAM,SAAS,SAAS;CACxB,OACE,qBAAC,YAAD;EAAuB;YAAvB,CACE,qBAAC,cAAD;GACgB;GACP;GACF;GACA;GACA;GACL,GAAI;aANN,CAQE,oBAAC,aAAD;IAAoB;cAClB,oBAAC,aAAD,CAAc,CAAA;GACH,CAAA,GACZ,QAAQ,UAIP,OAAO,KAAK,GAAG,MAAM,oBAAC,aAAD,CAAgC,GAAd,QAAQ,GAAM,CAAC,CAC5C;MACb,QACS;;AAEhB;AAEA,IAAa,SAAyB,uBAAO,OAAO,iBAAiB;CACnE,OAAO;CACP,OAAO;AACT,CAAC"}
+{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { Range, Root, Thumb, Track } from '@radix-ui/react-slider'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { CSSWrapper } from '../../utilities/css-wrapper/CSSWrapper'\nimport { SliderSteps } from './SliderSteps'\nimport { SliderValue } from './SliderValue'\n\nconst StyledTrack = styled(Track, {\n  base: [\n    'rounded-full',\n    'grow',\n    'relative',\n    'data-[orientation=horizontal]:h-1',\n    'data-[orientation=vertical]:w-1'\n  ],\n  variants: {\n    appearance: {\n      light: ['bg-surface'],\n      tonal: ['bg-neutral-solid']\n    }\n  }\n})\n\nconst StyledSlider = styled(Root, {\n  base: [\n    'items-center',\n    'flex',\n    'relative',\n    'touch-none',\n    'select-none',\n    'cursor-pointer',\n    'data-[orientation=horizontal]:h-4',\n    'data-[orientation=vertical]:flex-col',\n    'data-[orientation=vertical]:w-4',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledRange = styled(Range, {\n  base: [\n    'bg-accent-solid',\n    'rounded-full',\n    'h-full',\n    'absolute',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nconst StyledThumb = styled(Thumb, {\n  base: [\n    'bg-accent-solid-hover',\n    'rounded-full',\n    'block',\n    'size-4',\n    'hover:bg-accent-solid-active',\n    'focus-visible:outline-2',\n    'focus-visible:outline-offset-2',\n    'focus-visible:outline-focus',\n    'focus-visible:outline-solid',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30'\n  ]\n})\n\nexport type SliderProps = React.ComponentProps<typeof StyledSlider> &\n  Pick<React.ComponentProps<typeof StyledTrack>, 'appearance'>\n\nconst SliderComponent = ({\n  ref,\n  value,\n  defaultValue,\n  min = 0,\n  max = 100,\n  appearance = 'tonal',\n  className,\n  children,\n  ...rest\n}: SliderProps) => {\n  const values = value || defaultValue\n  return (\n    <CSSWrapper className={className}>\n      <StyledSlider\n        defaultValue={defaultValue}\n        value={value}\n        min={min}\n        max={max}\n        ref={ref}\n        {...rest}\n      >\n        <StyledTrack appearance={appearance}>\n          <StyledRange />\n        </StyledTrack>\n        {values?.length &&\n          // Thumbs are positional and can share a value, so the index is their\n          // stable identity.\n          // eslint-disable-next-line react/no-array-index-key\n          values.map((_, i) => <StyledThumb key={`thumb${i}`} />)}\n      </StyledSlider>\n      {children}\n    </CSSWrapper>\n  )\n}\n\nexport const Slider = /* @__PURE__ */ Object.assign(SliderComponent, {\n  Value: SliderValue,\n  Steps: SliderSteps\n})\n"],"mappings":";;;;;;;;AAQA,IAAM,cAAc,OAAO,OAAO;CAChC,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF;CACA,UAAU,EACR,YAAY;EACV,OAAO,CAAC,YAAY;EACpB,OAAO,CAAC,kBAAkB;CAC5B,EACF;AACF,CAAC;AAED,IAAM,eAAe,OAAO,MAAM,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAKD,IAAM,mBAAmB,EACvB,KACA,OACA,cACA,MAAM,GACN,MAAM,KACN,aAAa,SACb,WACA,UACA,GAAG,WACc;CACjB,MAAM,SAAS,SAAS;CACxB,OACE,qBAAC,YAAD;EAAuB;YAAvB,CACE,qBAAC,cAAD;GACgB;GACP;GACF;GACA;GACA;GACL,GAAI;aANN,CAQE,oBAAC,aAAD;IAAyB;cACvB,oBAAC,aAAD,CAAc,CAAA;GACH,CAAA,GACZ,QAAQ,UAIP,OAAO,KAAK,GAAG,MAAM,oBAAC,aAAD,CAAgC,GAAd,QAAQ,GAAM,CAAC,CAC5C;MACb,QACS;;AAEhB;AAEA,IAAa,SAAyB,uBAAO,OAAO,iBAAiB;CACnE,OAAO;CACP,OAAO;AACT,CAAC"}

package/dist/components/slider/SliderSteps.js

@@ -21,7 +21,7 @@ var SliderSteps = ({ min, max, steps = [] }) => {
 				"--left": `${getPercentValue(step.value, min, max)}%`,
 				"--translate-x": `-${getTransformValue(step.value, min, max)}%`
 			},
-			className: "text-grey-700 absolute left-(--left) translate-x-(--translate-x)",
+			className: "text-subtlest absolute left-(--left) translate-x-(--translate-x)",
 			children: step.label
 		}, step.value))
 	});

package/dist/components/slider/SliderSteps.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderSteps.js","names":[],"sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderStepsType = {\n  steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n  min: number\n  max: number\n} & SliderStepsType\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n  return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n  const percentage = getPercentValue(value, min, max)\n\n  if (percentage <= 10) return 0\n  if (percentage >= 90) return 100\n  return 50\n}\n\nexport const SliderSteps = ({ min, max, steps = [] }: SliderStepsProps) => {\n  if (steps.length === 0) return null\n\n  return (\n    <div className=\"relative mt-3 h-3 w-full\">\n      {steps.map((step) => (\n        <Text\n          as=\"span\"\n          key={step.value}\n          style={{\n            '--left': `${getPercentValue(step.value, min, max)}%`,\n            '--translate-x': `-${getTransformValue(step.value, min, max)}%`\n          }}\n          className=\"text-grey-700 absolute left-(--left) translate-x-(--translate-x)\"\n        >\n          {step.label}\n        </Text>\n      ))}\n    </div>\n  )\n}\n"],"mappings":";;;;AAaA,IAAM,mBAAmB,OAAe,KAAa,QAAwB;CAC3E,QAAS,QAAQ,QAAQ,MAAM,OAAQ;AACzC;AAEA,IAAM,qBAAqB,OAAe,KAAa,QAAwB;CAC7E,MAAM,aAAa,gBAAgB,OAAO,KAAK,GAAG;CAElD,IAAI,cAAc,IAAI,OAAO;CAC7B,IAAI,cAAc,IAAI,OAAO;CAC7B,OAAO;AACT;AAEA,IAAa,eAAe,EAAE,KAAK,KAAK,QAAQ,CAAC,QAA0B;CACzE,IAAI,MAAM,WAAW,GAAG,OAAO;CAE/B,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,SACV,oBAAC,MAAD;GACE,IAAG;GAEH,OAAO;IACL,UAAU,GAAG,gBAAgB,KAAK,OAAO,KAAK,GAAG,EAAE;IACnD,iBAAiB,IAAI,kBAAkB,KAAK,OAAO,KAAK,GAAG,EAAE;GAC/D;GACA,WAAU;aAET,KAAK;EACF,GARC,KAAK,KAQN,CACP;CACE,CAAA;AAET"}
+{"version":3,"file":"SliderSteps.js","names":[],"sources":["../../../src/components/slider/SliderSteps.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderStepsType = {\n  steps?: { label: string; value: number }[]\n}\n\ntype SliderStepsProps = {\n  min: number\n  max: number\n} & SliderStepsType\n\nconst getPercentValue = (value: number, min: number, max: number): number => {\n  return ((value - min) / (max - min)) * 100\n}\n\nconst getTransformValue = (value: number, min: number, max: number): number => {\n  const percentage = getPercentValue(value, min, max)\n\n  if (percentage <= 10) return 0\n  if (percentage >= 90) return 100\n  return 50\n}\n\nexport const SliderSteps = ({ min, max, steps = [] }: SliderStepsProps) => {\n  if (steps.length === 0) return null\n\n  return (\n    <div className=\"relative mt-3 h-3 w-full\">\n      {steps.map((step) => (\n        <Text\n          as=\"span\"\n          key={step.value}\n          style={{\n            '--left': `${getPercentValue(step.value, min, max)}%`,\n            '--translate-x': `-${getTransformValue(step.value, min, max)}%`\n          }}\n          className=\"text-subtlest absolute left-(--left) translate-x-(--translate-x)\"\n        >\n          {step.label}\n        </Text>\n      ))}\n    </div>\n  )\n}\n"],"mappings":";;;;AAaA,IAAM,mBAAmB,OAAe,KAAa,QAAwB;CAC3E,QAAS,QAAQ,QAAQ,MAAM,OAAQ;AACzC;AAEA,IAAM,qBAAqB,OAAe,KAAa,QAAwB;CAC7E,MAAM,aAAa,gBAAgB,OAAO,KAAK,GAAG;CAElD,IAAI,cAAc,IAAI,OAAO;CAC7B,IAAI,cAAc,IAAI,OAAO;CAC7B,OAAO;AACT;AAEA,IAAa,eAAe,EAAE,KAAK,KAAK,QAAQ,CAAC,QAA0B;CACzE,IAAI,MAAM,WAAW,GAAG,OAAO;CAE/B,OACE,oBAAC,OAAD;EAAK,WAAU;YACZ,MAAM,KAAK,SACV,oBAAC,MAAD;GACE,IAAG;GAEH,OAAO;IACL,UAAU,GAAG,gBAAgB,KAAK,OAAO,KAAK,GAAG,EAAE;IACnD,iBAAiB,IAAI,kBAAkB,KAAK,OAAO,KAAK,GAAG,EAAE;GAC/D;GACA,WAAU;aAET,KAAK;EACF,GARC,KAAK,KAQN,CACP;CACE,CAAA;AAET"}

package/dist/components/slider/SliderValue.js

@@ -3,7 +3,7 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/slider/SliderValue.tsx
 var SliderValue = ({ value = [], outputLabel = (value) => `Current value is ${value}` }) => /* @__PURE__ */ jsx(Text, {
-	className: "text-grey-700 mt-4 w-full",
+	className: "text-subtlest mt-4 w-full",
 	children: outputLabel(value.length === 1 ? value[0] : value)
 });
 //#endregion

package/dist/components/slider/SliderValue.js.map

@@ -1 +1 @@
-{"version":3,"file":"SliderValue.js","names":[],"sources":["../../../src/components/slider/SliderValue.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderValueType = {\n  outputLabel?: (value: number | number[]) => string\n}\n\ntype SliderValueProps = SliderValueType & {\n  value?: number[]\n}\n\nexport const SliderValue = ({\n  value = [],\n  outputLabel = (value) => `Current value is ${value}`\n}: SliderValueProps) => (\n  <Text className=\"text-grey-700 mt-4 w-full\">\n    {outputLabel(value.length === 1 ? value[0] : value)}\n  </Text>\n)\n"],"mappings":";;;;AAYA,IAAa,eAAe,EAC1B,QAAQ,CAAC,GACT,eAAe,UAAU,oBAAoB,cAE7C,oBAAC,MAAD;CAAM,WAAU;WACb,YAAY,MAAM,WAAW,IAAI,MAAM,KAAK,KAAK;AAC9C,CAAA"}
+{"version":3,"file":"SliderValue.js","names":[],"sources":["../../../src/components/slider/SliderValue.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Text } from '../text/Text'\n\nexport type SliderValueType = {\n  outputLabel?: (value: number | number[]) => string\n}\n\ntype SliderValueProps = SliderValueType & {\n  value?: number[]\n}\n\nexport const SliderValue = ({\n  value = [],\n  outputLabel = (value) => `Current value is ${value}`\n}: SliderValueProps) => (\n  <Text className=\"text-subtlest mt-4 w-full\">\n    {outputLabel(value.length === 1 ? value[0] : value)}\n  </Text>\n)\n"],"mappings":";;;;AAYA,IAAa,eAAe,EAC1B,QAAQ,CAAC,GACT,eAAe,UAAU,oBAAoB,cAE7C,oBAAC,MAAD;CAAM,WAAU;WACb,YAAY,MAAM,WAAW,IAAI,MAAM,KAAK,KAAK;AAC9C,CAAA"}

package/dist/components/sortable/Handle.d.ts

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { Icon } from '../icon/Icon';
-export declare const StyledHandle: import("../..").PolymorphicComponent<({ ref, children, theme, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<{
-    theme?: ("danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "danger" | "neutral" | "primary" | "primaryDark" | "success" | "warning" | "white">>) | undefined;
+export declare const StyledHandle: import("../..").PolymorphicComponent<({ ref, children, tone, inverse, appearance, size, label, href, disabled, hasTooltip, tooltipSide, reloadDocument, ...rest }: Omit<Omit<{
+    colorRole?: ("accent" | "inverse" | "neutral" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "accent" | "inverse" | "neutral">>) | undefined;
     appearance?: ("outline" | "simple" | "solid" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "outline" | "simple" | "solid">>) | undefined;
     size?: ("lg" | "md" | "sm" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "lg" | "md" | "sm" | "xs">>) | undefined;
     isRounded?: (boolean | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", boolean>>) | undefined;
 } & {
     as?: never;
-} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "isRounded" | "size" | "theme">, "as" | "children" | "hasTooltip" | "href" | "label" | "reloadDocument" | "tooltipSide"> & {
+} & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "appearance" | "as" | "colorRole" | "isRounded" | "size">, "colorRole">, "as" | "children" | "hasTooltip" | "href" | "inverse" | "label" | "reloadDocument" | "tone" | "tooltipSide"> & {
+    tone?: "danger" | "neutral" | "success" | "warning";
+    inverse?: boolean;
     as?: React.ElementType;
     children: React.ReactNode;
     href?: string;

package/dist/components/stepper/StepperStepBullet.js

@@ -10,27 +10,27 @@ var StepperStepBullet = styled("div", {
 		"size-8",
 		"rounded-[50%]",
 		"border-0",
-		"bg-grey-200",
+		"bg-neutral",
 		"z-1",
 		"flex-none"
 	],
 	variants: { status: {
-		default: ["bg-grey-200", "text-grey-700"],
+		default: ["bg-neutral", "text-subtlest"],
 		active: [
-			"bg-white",
+			"bg-surface",
 			"border-2",
 			"border-current",
-			"text-primary-900"
+			"text-accent-hover"
 		],
 		viewed: [
-			"bg-white",
+			"bg-surface",
 			"border-2",
-			"border-grey-600",
-			"text-grey-1000"
+			"border-neutral-solid",
+			"text-default"
 		],
-		completed: ["bg-primary-800", "text-white"],
-		reviewed: ["bg-primary-900", "text-white"],
-		success: ["bg-success", "text-white"]
+		completed: ["bg-accent-solid", "text-on-accent"],
+		reviewed: ["bg-accent-solid-hover", "text-on-accent"],
+		success: ["bg-success-solid", "text-on-success"]
 	} }
 });
 //#endregion