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

package/dist/components/file-drop/FileDrop.js

@@ -10,7 +10,7 @@ var StyledContainer = styled("div", { base: [
 	"items-center",
 	"border",
 	"border-dashed",
-	"border-grey-500",
+	"border-default",
 	"px-12",
 	"py-8",
 	"rounded-md",

package/dist/components/file-drop/FileDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDrop.js","names":[],"sources":["../../../src/components/file-drop/FileDrop.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { FileDropContext } from './FileDrop.context'\nimport { type FileDropContextValue } from './types'\n\ninterface FileDropProps extends Omit<\n  React.ComponentProps<'div'>,\n  'onDrop' | 'ref' | 'children'\n> {\n  onDrop: (files: File[]) => void\n  children?:\n    | React.ReactNode\n    | ((value: FileDropContextValue) => React.ReactNode)\n  accept?: React.InputHTMLAttributes<HTMLInputElement>['accept']\n  multiple?: React.InputHTMLAttributes<HTMLInputElement>['multiple']\n}\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'flex-col',\n    'gap-6',\n    'items-center',\n    'border',\n    'border-dashed',\n    'border-grey-500',\n    'px-12',\n    'py-8',\n    'rounded-md',\n    'cursor-pointer',\n    '**:pointer-events-none'\n  ]\n})\n\nexport const FileDrop = ({\n  children,\n  accept,\n  multiple,\n  onDrop,\n  ...rest\n}: FileDropProps) => {\n  const [isDragging, setIsDragging] = React.useState(false)\n  const [files, setFiles] = React.useState<File[]>([])\n  const fileUploadInputRef = React.useRef<HTMLInputElement>(null)\n\n  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleDragLeave = () => setIsDragging(false)\n\n  const handleDrop = (fileList: FileList | null) => {\n    if (!fileList) return\n\n    setIsDragging(false)\n\n    const files = [...fileList]\n    onDrop(files)\n    setFiles(files)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if ('Space' === event.key || 'Enter' === event.key) {\n      fileUploadInputRef.current?.click()\n    }\n  }\n\n  // Memoized: consumers otherwise re-render at drag-over event frequency.\n  const value = React.useMemo<FileDropContextValue>(\n    () => ({ isDragging, files }),\n    [isDragging, files]\n  )\n\n  return (\n    <FileDropContext value={value}>\n      <StyledContainer\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={(event) => {\n          event.preventDefault()\n          handleDrop(event.dataTransfer.files)\n        }}\n        onClick={() => fileUploadInputRef.current?.click()}\n        // A drop zone wraps a file input and arbitrary (possibly interactive)\n        // children, which a native <button> may not contain, so the button role\n        // lives on this container instead.\n        // eslint-disable-next-line jsx-a11y/prefer-tag-over-role\n        role=\"button\"\n        onKeyDown={handleKeyDown}\n        tabIndex={0}\n        {...rest}\n      >\n        {typeof children === 'function' ? children(value) : children}\n        <input\n          type=\"file\"\n          ref={fileUploadInputRef}\n          style={{ visibility: 'hidden' }}\n          accept={accept}\n          multiple={multiple}\n          onChange={(event) => {\n            handleDrop(event.target.files)\n          }}\n        />\n      </StyledContainer>\n    </FileDropContext>\n  )\n}\n\nFileDrop.displayName = 'FileDrop'\n"],"mappings":";;;;;AAkBA,IAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,YAAY,EACvB,UACA,QACA,UACA,QACA,GAAG,WACgB;CACnB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,KAAK;CACxD,MAAM,CAAC,OAAO,YAAY,QAAM,SAAiB,CAAC,CAAC;CACnD,MAAM,qBAAqB,QAAM,OAAyB,IAAI;CAE9D,MAAM,kBAAkB,UAA2C;EACjE,MAAM,eAAe;EACrB,cAAc,IAAI;CACpB;CAEA,MAAM,wBAAwB,cAAc,KAAK;CAEjD,MAAM,cAAc,aAA8B;EAChD,IAAI,CAAC,UAAU;EAEf,cAAc,KAAK;EAEnB,MAAM,QAAQ,CAAC,GAAG,QAAQ;EAC1B,OAAO,KAAK;EACZ,SAAS,KAAK;CAChB;CAEA,MAAM,iBAAiB,UAA+C;EACpE,IAAI,YAAY,MAAM,OAAO,YAAY,MAAM,KAC7C,mBAAmB,SAAS,MAAM;CAEtC;CAGA,MAAM,QAAQ,QAAM,eACX;EAAE;EAAY;CAAM,IAC3B,CAAC,YAAY,KAAK,CACpB;CAEA,OACE,oBAAC,iBAAD;EAAwB;YACtB,qBAAC,iBAAD;GACE,YAAY;GACZ,aAAa;GACb,SAAS,UAAU;IACjB,MAAM,eAAe;IACrB,WAAW,MAAM,aAAa,KAAK;GACrC;GACA,eAAe,mBAAmB,SAAS,MAAM;GAKjD,MAAK;GACL,WAAW;GACX,UAAU;GACV,GAAI;aAfN,CAiBG,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI,UACpD,oBAAC,SAAD;IACE,MAAK;IACL,KAAK;IACL,OAAO,EAAE,YAAY,SAAS;IACtB;IACE;IACV,WAAW,UAAU;KACnB,WAAW,MAAM,OAAO,KAAK;IAC/B;GACD,CAAA,CACc;;CACF,CAAA;AAErB;AAEA,SAAS,cAAc"}
+{"version":3,"file":"FileDrop.js","names":[],"sources":["../../../src/components/file-drop/FileDrop.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { FileDropContext } from './FileDrop.context'\nimport { type FileDropContextValue } from './types'\n\ninterface FileDropProps extends Omit<\n  React.ComponentProps<'div'>,\n  'onDrop' | 'ref' | 'children'\n> {\n  onDrop: (files: File[]) => void\n  children?:\n    | React.ReactNode\n    | ((value: FileDropContextValue) => React.ReactNode)\n  accept?: React.InputHTMLAttributes<HTMLInputElement>['accept']\n  multiple?: React.InputHTMLAttributes<HTMLInputElement>['multiple']\n}\n\nconst StyledContainer = styled('div', {\n  base: [\n    'flex',\n    'flex-col',\n    'gap-6',\n    'items-center',\n    'border',\n    'border-dashed',\n    'border-default',\n    'px-12',\n    'py-8',\n    'rounded-md',\n    'cursor-pointer',\n    '**:pointer-events-none'\n  ]\n})\n\nexport const FileDrop = ({\n  children,\n  accept,\n  multiple,\n  onDrop,\n  ...rest\n}: FileDropProps) => {\n  const [isDragging, setIsDragging] = React.useState(false)\n  const [files, setFiles] = React.useState<File[]>([])\n  const fileUploadInputRef = React.useRef<HTMLInputElement>(null)\n\n  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    setIsDragging(true)\n  }\n\n  const handleDragLeave = () => setIsDragging(false)\n\n  const handleDrop = (fileList: FileList | null) => {\n    if (!fileList) return\n\n    setIsDragging(false)\n\n    const files = [...fileList]\n    onDrop(files)\n    setFiles(files)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if ('Space' === event.key || 'Enter' === event.key) {\n      fileUploadInputRef.current?.click()\n    }\n  }\n\n  // Memoized: consumers otherwise re-render at drag-over event frequency.\n  const value = React.useMemo<FileDropContextValue>(\n    () => ({ isDragging, files }),\n    [isDragging, files]\n  )\n\n  return (\n    <FileDropContext value={value}>\n      <StyledContainer\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={(event) => {\n          event.preventDefault()\n          handleDrop(event.dataTransfer.files)\n        }}\n        onClick={() => fileUploadInputRef.current?.click()}\n        // A drop zone wraps a file input and arbitrary (possibly interactive)\n        // children, which a native <button> may not contain, so the button role\n        // lives on this container instead.\n        // eslint-disable-next-line jsx-a11y/prefer-tag-over-role\n        role=\"button\"\n        onKeyDown={handleKeyDown}\n        tabIndex={0}\n        {...rest}\n      >\n        {typeof children === 'function' ? children(value) : children}\n        <input\n          type=\"file\"\n          ref={fileUploadInputRef}\n          style={{ visibility: 'hidden' }}\n          accept={accept}\n          multiple={multiple}\n          onChange={(event) => {\n            handleDrop(event.target.files)\n          }}\n        />\n      </StyledContainer>\n    </FileDropContext>\n  )\n}\n\nFileDrop.displayName = 'FileDrop'\n"],"mappings":";;;;;AAkBA,IAAM,kBAAkB,OAAO,OAAO,EACpC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAED,IAAa,YAAY,EACvB,UACA,QACA,UACA,QACA,GAAG,WACgB;CACnB,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,KAAK;CACxD,MAAM,CAAC,OAAO,YAAY,QAAM,SAAiB,CAAC,CAAC;CACnD,MAAM,qBAAqB,QAAM,OAAyB,IAAI;CAE9D,MAAM,kBAAkB,UAA2C;EACjE,MAAM,eAAe;EACrB,cAAc,IAAI;CACpB;CAEA,MAAM,wBAAwB,cAAc,KAAK;CAEjD,MAAM,cAAc,aAA8B;EAChD,IAAI,CAAC,UAAU;EAEf,cAAc,KAAK;EAEnB,MAAM,QAAQ,CAAC,GAAG,QAAQ;EAC1B,OAAO,KAAK;EACZ,SAAS,KAAK;CAChB;CAEA,MAAM,iBAAiB,UAA+C;EACpE,IAAI,YAAY,MAAM,OAAO,YAAY,MAAM,KAC7C,mBAAmB,SAAS,MAAM;CAEtC;CAGA,MAAM,QAAQ,QAAM,eACX;EAAE;EAAY;CAAM,IAC3B,CAAC,YAAY,KAAK,CACpB;CAEA,OACE,oBAAC,iBAAD;EAAwB;YACtB,qBAAC,iBAAD;GACE,YAAY;GACZ,aAAa;GACb,SAAS,UAAU;IACjB,MAAM,eAAe;IACrB,WAAW,MAAM,aAAa,KAAK;GACrC;GACA,eAAe,mBAAmB,SAAS,MAAM;GAKjD,MAAK;GACL,WAAW;GACX,UAAU;GACV,GAAI;aAfN,CAiBG,OAAO,aAAa,aAAa,SAAS,KAAK,IAAI,UACpD,oBAAC,SAAD;IACE,MAAK;IACL,KAAK;IACL,OAAO,EAAE,YAAY,SAAS;IACtB;IACE;IACV,WAAW,UAAU;KACnB,WAAW,MAAM,OAAO,KAAK;IAC/B;GACD,CAAA,CACc;;CACF,CAAA;AAErB;AAEA,SAAS,cAAc"}

package/dist/components/form/Form.js

@@ -4,15 +4,15 @@ import { jsx } from "react/jsx-runtime";
 import { FormProvider, useForm } from "react-hook-form";
 //#region src/components/form/Form.tsx
 var Form = (props) => {
-	const { children, defaultValues, validationMode = "onBlur", onSubmit, onError, appearance, theme, ...rest } = props;
+	const { children, defaultValues, validationMode = "onBlur", onSubmit, onError, appearance, fill, ...rest } = props;
 	const methods = useForm({
 		defaultValues,
 		mode: validationMode
 	});
 	const customContextValue = React$1.useMemo(() => ({
 		appearance,
-		theme
-	}), [appearance, theme]);
+		fill
+	}), [appearance, fill]);
 	return /* @__PURE__ */ jsx(FormProvider, {
 		...methods,
 		children: /* @__PURE__ */ jsx(FormCustomContext, {

package/dist/components/form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import * as React from 'react'\nimport type {\n  DefaultValues,\n  FieldValues,\n  Mode,\n  SubmitErrorHandler,\n  SubmitHandler,\n  UseFormMethods\n} from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\n\nimport {\n  type FormCustomContextType,\n  FormCustomContext\n} from './useFormCustomContext'\n\ntype FormProps<TFormData extends FieldValues> = Omit<\n  React.HTMLAttributes<HTMLFormElement>,\n  'onSubmit' | 'onError' | 'children'\n> & {\n  defaultValues?: DefaultValues<TFormData>\n  validationMode?: Mode\n  onSubmit: SubmitHandler<TFormData>\n  onError?: SubmitErrorHandler<TFormData>\n  noValidate?: boolean\n  children:\n    | React.ReactNode\n    | ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n  props: FormProps<TFormData> & FormCustomContextType\n) => {\n  const {\n    children,\n    defaultValues,\n    validationMode = 'onBlur',\n    onSubmit,\n    onError,\n    appearance,\n    theme,\n    ...rest\n  } = props\n\n  const methods = useForm<TFormData>({\n    defaultValues,\n    mode: validationMode\n  })\n\n  // Memoized: the form re-renders on every RHF state change and would\n  // otherwise push a fresh context value to every consumer each time.\n  const customContextValue = React.useMemo(\n    () => ({ appearance, theme }),\n    [appearance, theme]\n  )\n\n  return (\n    <FormProvider {...methods}>\n      <FormCustomContext value={customContextValue}>\n        <form\n          aria-label=\"form\"\n          onSubmit={methods.handleSubmit(onSubmit, onError)}\n          {...rest}\n        >\n          {typeof children === 'function' ? children(methods) : children}\n        </form>\n      </FormCustomContext>\n    </FormProvider>\n  )\n}\n\nForm.displayName = 'Form'\n"],"mappings":";;;;;AA8BA,IAAa,QACX,UACG;CACH,MAAM,EACJ,UACA,eACA,iBAAiB,UACjB,UACA,SACA,YACA,OACA,GAAG,SACD;CAEJ,MAAM,UAAU,QAAmB;EACjC;EACA,MAAM;CACR,CAAC;CAID,MAAM,qBAAqB,QAAM,eACxB;EAAE;EAAY;CAAM,IAC3B,CAAC,YAAY,KAAK,CACpB;CAEA,OACE,oBAAC,cAAD;EAAc,GAAI;YAChB,oBAAC,mBAAD;GAAmB,OAAO;aACxB,oBAAC,QAAD;IACE,cAAW;IACX,UAAU,QAAQ,aAAa,UAAU,OAAO;IAChD,GAAI;cAEH,OAAO,aAAa,aAAa,SAAS,OAAO,IAAI;GAClD,CAAA;EACW,CAAA;CACP,CAAA;AAElB;AAEA,KAAK,cAAc"}
+{"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import * as React from 'react'\nimport type {\n  DefaultValues,\n  FieldValues,\n  Mode,\n  SubmitErrorHandler,\n  SubmitHandler,\n  UseFormMethods\n} from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\n\nimport {\n  type FormCustomContextType,\n  FormCustomContext\n} from './useFormCustomContext'\n\ntype FormProps<TFormData extends FieldValues> = Omit<\n  React.HTMLAttributes<HTMLFormElement>,\n  'onSubmit' | 'onError' | 'children'\n> & {\n  defaultValues?: DefaultValues<TFormData>\n  validationMode?: Mode\n  onSubmit: SubmitHandler<TFormData>\n  onError?: SubmitErrorHandler<TFormData>\n  noValidate?: boolean\n  children:\n    | React.ReactNode\n    | ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n  props: FormProps<TFormData> & FormCustomContextType\n) => {\n  const {\n    children,\n    defaultValues,\n    validationMode = 'onBlur',\n    onSubmit,\n    onError,\n    appearance,\n    fill,\n    ...rest\n  } = props\n\n  const methods = useForm<TFormData>({\n    defaultValues,\n    mode: validationMode\n  })\n\n  // Memoized: the form re-renders on every RHF state change and would\n  // otherwise push a fresh context value to every consumer each time.\n  const customContextValue = React.useMemo(\n    () => ({ appearance, fill }),\n    [appearance, fill]\n  )\n\n  return (\n    <FormProvider {...methods}>\n      <FormCustomContext value={customContextValue}>\n        <form\n          aria-label=\"form\"\n          onSubmit={methods.handleSubmit(onSubmit, onError)}\n          {...rest}\n        >\n          {typeof children === 'function' ? children(methods) : children}\n        </form>\n      </FormCustomContext>\n    </FormProvider>\n  )\n}\n\nForm.displayName = 'Form'\n"],"mappings":";;;;;AA8BA,IAAa,QACX,UACG;CACH,MAAM,EACJ,UACA,eACA,iBAAiB,UACjB,UACA,SACA,YACA,MACA,GAAG,SACD;CAEJ,MAAM,UAAU,QAAmB;EACjC;EACA,MAAM;CACR,CAAC;CAID,MAAM,qBAAqB,QAAM,eACxB;EAAE;EAAY;CAAK,IAC1B,CAAC,YAAY,IAAI,CACnB;CAEA,OACE,oBAAC,cAAD;EAAc,GAAI;YAChB,oBAAC,mBAAD;GAAmB,OAAO;aACxB,oBAAC,QAAD;IACE,cAAW;IACX,UAAU,QAAQ,aAAa,UAAU,OAAO;IAChD,GAAI;cAEH,OAAO,aAAa,aAAa,SAAS,OAAO,IAAI;GAClD,CAAA;EACW,CAAA;CACP,CAAA;AAElB;AAEA,KAAK,cAAc"}

package/dist/components/form/useFormCustomContext.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { InputProps } from '../input/Input';
 export type FormCustomContextType = {
     appearance?: InputProps['appearance'];
-    theme?: InputProps['theme'];
+    fill?: InputProps['fill'];
 } | undefined;
 export declare const FormCustomContext: React.Context<FormCustomContextType>;
 export declare const useFormCustomContext: () => FormCustomContextType;

package/dist/components/form/useFormCustomContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormCustomContext.js","names":[],"sources":["../../../src/components/form/useFormCustomContext.ts"],"sourcesContent":["import * as React from 'react'\n\nimport type { InputProps } from '../input/Input'\n\nexport type FormCustomContextType =\n  | {\n      appearance?: InputProps['appearance']\n      theme?: InputProps['theme']\n    }\n  | undefined\n\nexport const FormCustomContext = React.createContext<FormCustomContextType>({\n  appearance: 'standard'\n})\n\nexport const useFormCustomContext = () => React.use(FormCustomContext)\n"],"mappings":";;AAWA,IAAa,oBAAoB,QAAM,cAAqC,EAC1E,YAAY,WACd,CAAC;AAED,IAAa,6BAA6B,QAAM,IAAI,iBAAiB"}
+{"version":3,"file":"useFormCustomContext.js","names":[],"sources":["../../../src/components/form/useFormCustomContext.ts"],"sourcesContent":["import * as React from 'react'\n\nimport type { InputProps } from '../input/Input'\n\nexport type FormCustomContextType =\n  | {\n      appearance?: InputProps['appearance']\n      fill?: InputProps['fill']\n    }\n  | undefined\n\nexport const FormCustomContext = React.createContext<FormCustomContextType>({\n  appearance: 'standard'\n})\n\nexport const useFormCustomContext = () => React.use(FormCustomContext)\n"],"mappings":";;AAWA,IAAa,oBAAoB,QAAM,cAAqC,EAC1E,YAAY,WACd,CAAC;AAED,IAAa,6BAA6B,QAAM,IAAI,iBAAiB"}

package/dist/components/image/ImageCredit.js

@@ -9,8 +9,10 @@ import { Close, Info } from "@atom-learning/icons";
 var overlayControlClasses = [
 	"not-disabled:hover:bg-black/75",
 	"focus:outline-none",
-	"focus-visible:ring-2",
-	"focus-visible:ring-white/70"
+	"focus-visible:outline-2",
+	"focus-visible:outline-offset-2",
+	"focus-visible:outline-solid",
+	"focus-visible:outline-white/70"
 ];
 var overlayLinkClasses = [
 	"text-white",
@@ -23,7 +25,7 @@ var ImageCredit = ({ author, sourceUrl, licenseName, licenseUrl }) => {
 	const [expanded, setExpanded] = React$1.useState(false);
 	if (!expanded) return /* @__PURE__ */ jsx(ActionIcon, {
 		label: "Show image credit",
-		theme: "white",
+		inverse: true,
 		isRounded: true,
 		hasTooltip: false,
 		onClick: () => setExpanded(true),
@@ -53,7 +55,7 @@ var ImageCredit = ({ author, sourceUrl, licenseName, licenseUrl }) => {
 			}) : null]
 		}), /* @__PURE__ */ jsx(ActionIcon, {
 			label: "Hide credit",
-			theme: "white",
+			inverse: true,
 			isRounded: true,
 			hasTooltip: false,
 			onClick: () => setExpanded(false),

package/dist/components/image/ImageCredit.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageCredit.js","names":[],"sources":["../../../src/components/image/ImageCredit.tsx"],"sourcesContent":["import { Close, Info } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Link } from '../link/Link'\n\nexport type ImageCreditProps = {\n  /** Creator name, shown once the credit is revealed. */\n  author: string\n  /** Link to the author / image source. */\n  sourceUrl?: string\n  /** Human-readable license name, e.g. \"CC BY 4.0\". */\n  licenseName?: string\n  /** Link to the license terms. */\n  licenseUrl?: string\n}\n\n// Shared surface/interaction styles for the controls overlaid on the image.\nconst overlayControlClasses = [\n  'not-disabled:hover:bg-black/75',\n  'focus:outline-none',\n  'focus-visible:ring-2',\n  'focus-visible:ring-white/70'\n]\nconst overlayLinkClasses = [\n  'text-white',\n  'underline-offset-2',\n  'hover:text-white',\n  'focus:text-white',\n  'active:text-white'\n]\n\nexport const ImageCredit = ({\n  author,\n  sourceUrl,\n  licenseName,\n  licenseUrl\n}: ImageCreditProps) => {\n  const [expanded, setExpanded] = React.useState(false)\n\n  if (!expanded) {\n    return (\n      <ActionIcon\n        label=\"Show image credit\"\n        theme=\"white\"\n        isRounded\n        hasTooltip={false}\n        onClick={() => setExpanded(true)}\n        className={cn(\n          'absolute',\n          'right-2',\n          'bottom-2',\n          'bg-black/60',\n          'backdrop-blur-sm',\n          overlayControlClasses\n        )}\n      >\n        <Icon is={Info} />\n      </ActionIcon>\n    )\n  }\n\n  return (\n    <div\n      className={cn(\n        'absolute',\n        'right-2',\n        'bottom-2',\n        'flex',\n        'max-w-[calc(100%-1rem)]',\n        'items-center',\n        'gap-1',\n        'rounded-md',\n        'bg-black/60',\n        'pl-2',\n        'text-xs',\n        'text-white',\n        'backdrop-blur-sm'\n      )}\n    >\n      {/* Author and licence sit on one line when they fit, and wrap onto\n          separate rows (each kept whole) when they don't. */}\n      <figcaption className=\"flex min-w-0 flex-wrap items-center gap-x-1\">\n        {sourceUrl ? (\n          <Link href={sourceUrl} size=\"xs\" className={cn(overlayLinkClasses)}>\n            {author}\n          </Link>\n        ) : (\n          <span>{author}</span>\n        )}\n        {licenseName ? (\n          <span className=\"flex items-center gap-x-1\">\n            <span aria-hidden=\"true\">·</span>\n            {licenseUrl ? (\n              <Link\n                href={licenseUrl}\n                size=\"xs\"\n                className={cn(overlayLinkClasses)}\n              >\n                {licenseName}\n              </Link>\n            ) : (\n              <span>{licenseName}</span>\n            )}\n          </span>\n        ) : null}\n      </figcaption>\n      <ActionIcon\n        label=\"Hide credit\"\n        theme=\"white\"\n        isRounded\n        hasTooltip={false}\n        onClick={() => setExpanded(false)}\n        className={cn(overlayControlClasses)}\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    </div>\n  )\n}\n\nImageCredit.displayName = 'Image.Credit'\n"],"mappings":";;;;;;;;AAoBA,IAAM,wBAAwB;CAC5B;CACA;CACA;CACA;AACF;AACA,IAAM,qBAAqB;CACzB;CACA;CACA;CACA;CACA;AACF;AAEA,IAAa,eAAe,EAC1B,QACA,WACA,aACA,iBACsB;CACtB,MAAM,CAAC,UAAU,eAAe,QAAM,SAAS,KAAK;CAEpD,IAAI,CAAC,UACH,OACE,oBAAC,YAAD;EACE,OAAM;EACN,OAAM;EACN,WAAA;EACA,YAAY;EACZ,eAAe,YAAY,IAAI;EAC/B,WAAW,GACT,YACA,WACA,YACA,eACA,oBACA,qBACF;YAEA,oBAAC,MAAD,EAAM,IAAI,KAAO,CAAA;CACP,CAAA;CAIhB,OACE,qBAAC,OAAD;EACE,WAAW,GACT,YACA,WACA,YACA,QACA,2BACA,gBACA,SACA,cACA,eACA,QACA,WACA,cACA,kBACF;YAfF,CAmBE,qBAAC,cAAD;GAAY,WAAU;aAAtB,CACG,YACC,oBAAC,MAAD;IAAM,MAAM;IAAW,MAAK;IAAK,WAAW,GAAG,kBAAkB;cAC9D;GACG,CAAA,IAEN,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA,GAErB,cACC,qBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,oBAAC,QAAD;KAAM,eAAY;eAAO;IAAO,CAAA,GAC/B,aACC,oBAAC,MAAD;KACE,MAAM;KACN,MAAK;KACL,WAAW,GAAG,kBAAkB;eAE/B;IACG,CAAA,IAEN,oBAAC,QAAD,EAAA,UAAO,YAAkB,CAAA,CAEvB;QACJ,IACM;MACZ,oBAAC,YAAD;GACE,OAAM;GACN,OAAM;GACN,WAAA;GACA,YAAY;GACZ,eAAe,YAAY,KAAK;GAChC,WAAW,GAAG,qBAAqB;aAEnC,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACR,CAAA,CACT;;AAET;AAEA,YAAY,cAAc"}
+{"version":3,"file":"ImageCredit.js","names":[],"sources":["../../../src/components/image/ImageCredit.tsx"],"sourcesContent":["import { Close, Info } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { cn } from '../../styled'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Link } from '../link/Link'\n\nexport type ImageCreditProps = {\n  /** Creator name, shown once the credit is revealed. */\n  author: string\n  /** Link to the author / image source. */\n  sourceUrl?: string\n  /** Human-readable license name, e.g. \"CC BY 4.0\". */\n  licenseName?: string\n  /** Link to the license terms. */\n  licenseUrl?: string\n}\n\n// Shared surface/interaction styles for the controls overlaid on the image.\n// Fixed black/white rather than roles: the overlay sits on a photo, which\n// looks the same in every scheme and palette.\nconst overlayControlClasses = [\n  'not-disabled:hover:bg-black/75',\n  'focus:outline-none',\n  'focus-visible:outline-2',\n  'focus-visible:outline-offset-2',\n  'focus-visible:outline-solid',\n  'focus-visible:outline-white/70'\n]\nconst overlayLinkClasses = [\n  'text-white',\n  'underline-offset-2',\n  'hover:text-white',\n  'focus:text-white',\n  'active:text-white'\n]\n\nexport const ImageCredit = ({\n  author,\n  sourceUrl,\n  licenseName,\n  licenseUrl\n}: ImageCreditProps) => {\n  const [expanded, setExpanded] = React.useState(false)\n\n  if (!expanded) {\n    return (\n      <ActionIcon\n        label=\"Show image credit\"\n        inverse\n        isRounded\n        hasTooltip={false}\n        onClick={() => setExpanded(true)}\n        className={cn(\n          'absolute',\n          'right-2',\n          'bottom-2',\n          'bg-black/60',\n          'backdrop-blur-sm',\n          overlayControlClasses\n        )}\n      >\n        <Icon is={Info} />\n      </ActionIcon>\n    )\n  }\n\n  return (\n    <div\n      className={cn(\n        'absolute',\n        'right-2',\n        'bottom-2',\n        'flex',\n        'max-w-[calc(100%-1rem)]',\n        'items-center',\n        'gap-1',\n        'rounded-md',\n        'bg-black/60',\n        'pl-2',\n        'text-xs',\n        'text-white',\n        'backdrop-blur-sm'\n      )}\n    >\n      {/* Author and licence sit on one line when they fit, and wrap onto\n          separate rows (each kept whole) when they don't. */}\n      <figcaption className=\"flex min-w-0 flex-wrap items-center gap-x-1\">\n        {sourceUrl ? (\n          <Link href={sourceUrl} size=\"xs\" className={cn(overlayLinkClasses)}>\n            {author}\n          </Link>\n        ) : (\n          <span>{author}</span>\n        )}\n        {licenseName ? (\n          <span className=\"flex items-center gap-x-1\">\n            <span aria-hidden=\"true\">·</span>\n            {licenseUrl ? (\n              <Link\n                href={licenseUrl}\n                size=\"xs\"\n                className={cn(overlayLinkClasses)}\n              >\n                {licenseName}\n              </Link>\n            ) : (\n              <span>{licenseName}</span>\n            )}\n          </span>\n        ) : null}\n      </figcaption>\n      <ActionIcon\n        label=\"Hide credit\"\n        inverse\n        isRounded\n        hasTooltip={false}\n        onClick={() => setExpanded(false)}\n        className={cn(overlayControlClasses)}\n      >\n        <Icon is={Close} />\n      </ActionIcon>\n    </div>\n  )\n}\n\nImageCredit.displayName = 'Image.Credit'\n"],"mappings":";;;;;;;;AAsBA,IAAM,wBAAwB;CAC5B;CACA;CACA;CACA;CACA;CACA;AACF;AACA,IAAM,qBAAqB;CACzB;CACA;CACA;CACA;CACA;AACF;AAEA,IAAa,eAAe,EAC1B,QACA,WACA,aACA,iBACsB;CACtB,MAAM,CAAC,UAAU,eAAe,QAAM,SAAS,KAAK;CAEpD,IAAI,CAAC,UACH,OACE,oBAAC,YAAD;EACE,OAAM;EACN,SAAA;EACA,WAAA;EACA,YAAY;EACZ,eAAe,YAAY,IAAI;EAC/B,WAAW,GACT,YACA,WACA,YACA,eACA,oBACA,qBACF;YAEA,oBAAC,MAAD,EAAM,IAAI,KAAO,CAAA;CACP,CAAA;CAIhB,OACE,qBAAC,OAAD;EACE,WAAW,GACT,YACA,WACA,YACA,QACA,2BACA,gBACA,SACA,cACA,eACA,QACA,WACA,cACA,kBACF;YAfF,CAmBE,qBAAC,cAAD;GAAY,WAAU;aAAtB,CACG,YACC,oBAAC,MAAD;IAAM,MAAM;IAAW,MAAK;IAAK,WAAW,GAAG,kBAAkB;cAC9D;GACG,CAAA,IAEN,oBAAC,QAAD,EAAA,UAAO,OAAa,CAAA,GAErB,cACC,qBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,oBAAC,QAAD;KAAM,eAAY;eAAO;IAAO,CAAA,GAC/B,aACC,oBAAC,MAAD;KACE,MAAM;KACN,MAAK;KACL,WAAW,GAAG,kBAAkB;eAE/B;IACG,CAAA,IAEN,oBAAC,QAAD,EAAA,UAAO,YAAkB,CAAA,CAEvB;QACJ,IACM;MACZ,oBAAC,YAAD;GACE,OAAM;GACN,SAAA;GACA,WAAA;GACA,YAAY;GACZ,eAAe,YAAY,KAAK;GAChC,WAAW,GAAG,qBAAqB;aAEnC,oBAAC,MAAD,EAAM,IAAI,MAAQ,CAAA;EACR,CAAA,CACT;;AAET;AAEA,YAAY,cAAc"}

package/dist/components/inline-message/InlineMessage.config.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import type { InlineMessageTheme } from './InlineMessage.types';
-export declare const INLINE_MESSAGE_ICONS: Record<InlineMessageTheme, React.FC<React.SVGProps<SVGSVGElement>>>;
+import type { InlineMessageTone } from './InlineMessage.types';
+export declare const INLINE_MESSAGE_ICONS: Record<InlineMessageTone, React.FC<React.SVGProps<SVGSVGElement>>>;

package/dist/components/inline-message/InlineMessage.config.js

@@ -6,7 +6,7 @@ var INLINE_MESSAGE_ICONS = {
 	warning: Danger,
 	info: Info,
 	neutral: Info,
-	error: Error
+	danger: Error
 };
 //#endregion
 export { INLINE_MESSAGE_ICONS };

package/dist/components/inline-message/InlineMessage.config.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineMessage.config.js","names":[],"sources":["../../../src/components/inline-message/InlineMessage.config.ts"],"sourcesContent":["import { Danger, Error, Info, OkCircle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport type { InlineMessageTheme } from './InlineMessage.types'\n\nexport const INLINE_MESSAGE_ICONS: Record<\n  InlineMessageTheme,\n  React.FC<React.SVGProps<SVGSVGElement>>\n> = {\n  success: OkCircle,\n  warning: Danger,\n  info: Info,\n  neutral: Info,\n  error: Error\n}\n"],"mappings":";;;AAKA,IAAa,uBAGT;CACF,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,OAAO;AACT"}
+{"version":3,"file":"InlineMessage.config.js","names":[],"sources":["../../../src/components/inline-message/InlineMessage.config.ts"],"sourcesContent":["import { Danger, Error, Info, OkCircle } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport type { InlineMessageTone } from './InlineMessage.types'\n\nexport const INLINE_MESSAGE_ICONS: Record<\n  InlineMessageTone,\n  React.FC<React.SVGProps<SVGSVGElement>>\n> = {\n  success: OkCircle,\n  warning: Danger,\n  info: Info,\n  neutral: Info,\n  danger: Error\n}\n"],"mappings":";;;AAKA,IAAa,uBAGT;CACF,SAAS;CACT,SAAS;CACT,MAAM;CACN,SAAS;CACT,QAAQ;AACV"}

package/dist/components/inline-message/InlineMessage.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
+import type { InlineMessageTone } from './InlineMessage.types';
 declare const InlineMessageContainer: import("../..").PolymorphicComponent<"div", {
-    theme?: "error" | "info" | "neutral" | "success" | "warning" | undefined;
+    tone?: "danger" | "info" | "neutral" | "success" | "warning" | undefined;
 }>;
-type InlineMessageProps = React.ComponentProps<typeof InlineMessageContainer> & {
+type InlineMessageProps = Omit<React.ComponentProps<typeof InlineMessageContainer>, 'tone'> & {
+    tone?: InlineMessageTone;
     showIcon?: boolean;
     size?: 'xs' | 'sm' | 'md';
 };
-export declare const InlineMessage: ({ className, showIcon, theme, size, children, ...rest }: InlineMessageProps) => React.JSX.Element;
+export declare const InlineMessage: ({ className, showIcon, tone, size, children, ...rest }: InlineMessageProps) => React.JSX.Element;
 export {};

package/dist/components/inline-message/InlineMessage.js

@@ -6,22 +6,23 @@ import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/inline-message/InlineMessage.tsx
 var InlineMessageContainer = styled("div", {
-	base: ["flex"],
-	variants: { theme: {
-		success: ["text-success"],
-		warning: ["[&_svg]:text-warning-dark", "text-warning-text"],
-		info: ["text-info"],
-		neutral: ["text-grey-800"],
-		error: ["text-danger"]
+	base: ["flex", "text-accent"],
+	variants: { tone: {
+		neutral: [],
+		success: [],
+		warning: ["[&_svg]:text-on-accent-subtle"],
+		info: [],
+		danger: []
 	} }
 });
-var InlineMessage = ({ className, showIcon = true, theme = "error", size = "sm", children, ...rest }) => /* @__PURE__ */ jsxs(InlineMessageContainer, {
-	theme,
+var InlineMessage = ({ className, showIcon = true, tone = "neutral", size = "sm", children, ...rest }) => /* @__PURE__ */ jsxs(InlineMessageContainer, {
+	tone,
+	"data-color-accent": tone === "neutral" ? "grey" : tone,
 	className,
 	...rest,
 	children: [showIcon && /* @__PURE__ */ jsx(Icon, {
 		size: "sm",
-		is: INLINE_MESSAGE_ICONS[theme],
+		is: INLINE_MESSAGE_ICONS[tone],
 		className: "mr-2"
 	}), /* @__PURE__ */ jsx(Text, {
 		as: "span",

package/dist/components/inline-message/InlineMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineMessage.js","names":[],"sources":["../../../src/components/inline-message/InlineMessage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { INLINE_MESSAGE_ICONS } from './InlineMessage.config'\nimport type { InlineMessageTheme } from './InlineMessage.types'\n\nconst InlineMessageContainer = styled('div', {\n  base: ['flex'],\n  variants: {\n    theme: {\n      success: ['text-success'],\n      warning: ['[&_svg]:text-warning-dark', 'text-warning-text'],\n      info: ['text-info'],\n      neutral: ['text-grey-800'],\n      error: ['text-danger']\n    }\n  }\n})\n\ntype InlineMessageProps = React.ComponentProps<\n  typeof InlineMessageContainer\n> & {\n  showIcon?: boolean\n  size?: 'xs' | 'sm' | 'md'\n}\n\nexport const InlineMessage = ({\n  className,\n  showIcon = true,\n  theme = 'error',\n  size = 'sm',\n  children,\n  ...rest\n}: InlineMessageProps) => (\n  <InlineMessageContainer theme={theme} className={className} {...rest}>\n    {showIcon && (\n      <Icon\n        size=\"sm\"\n        is={INLINE_MESSAGE_ICONS[theme as InlineMessageTheme]}\n        className=\"mr-2\"\n      />\n    )}\n    <Text as=\"span\" size={size} className=\"translate-y-0.5\">\n      {children}\n    </Text>\n  </InlineMessageContainer>\n)\n"],"mappings":";;;;;;;AAQA,IAAM,yBAAyB,OAAO,OAAO;CAC3C,MAAM,CAAC,MAAM;CACb,UAAU,EACR,OAAO;EACL,SAAS,CAAC,cAAc;EACxB,SAAS,CAAC,6BAA6B,mBAAmB;EAC1D,MAAM,CAAC,WAAW;EAClB,SAAS,CAAC,eAAe;EACzB,OAAO,CAAC,aAAa;CACvB,EACF;AACF,CAAC;AASD,IAAa,iBAAiB,EAC5B,WACA,WAAW,MACX,QAAQ,SACR,OAAO,MACP,UACA,GAAG,WAEH,qBAAC,wBAAD;CAA+B;CAAkB;CAAW,GAAI;WAAhE,CACG,YACC,oBAAC,MAAD;EACE,MAAK;EACL,IAAI,qBAAqB;EACzB,WAAU;CACX,CAAA,GAEH,oBAAC,MAAD;EAAM,IAAG;EAAa;EAAM,WAAU;EACnC;CACG,CAAA,CACgB"}
+{"version":3,"file":"InlineMessage.js","names":[],"sources":["../../../src/components/inline-message/InlineMessage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { Text } from '../text/Text'\nimport { INLINE_MESSAGE_ICONS } from './InlineMessage.config'\nimport type { InlineMessageTone } from './InlineMessage.types'\n\nconst InlineMessageContainer = styled('div', {\n  base: ['flex', 'text-accent'],\n  variants: {\n    tone: {\n      neutral: [],\n      success: [],\n      warning: ['[&_svg]:text-on-accent-subtle'],\n      info: [],\n      danger: []\n    }\n  }\n})\n\ntype InlineMessageProps = Omit<\n  React.ComponentProps<typeof InlineMessageContainer>,\n  'tone'\n> & {\n  tone?: InlineMessageTone\n  showIcon?: boolean\n  size?: 'xs' | 'sm' | 'md'\n}\n\nexport const InlineMessage = ({\n  className,\n  showIcon = true,\n  tone = 'neutral',\n  size = 'sm',\n  children,\n  ...rest\n}: InlineMessageProps) => (\n  <InlineMessageContainer\n    tone={tone}\n    // Neutral is set explicitly: unset would inherit the surrounding accent\n    data-color-accent={tone === 'neutral' ? 'grey' : tone}\n    className={className}\n    {...rest}\n  >\n    {showIcon && (\n      <Icon size=\"sm\" is={INLINE_MESSAGE_ICONS[tone]} className=\"mr-2\" />\n    )}\n    <Text as=\"span\" size={size} className=\"translate-y-0.5\">\n      {children}\n    </Text>\n  </InlineMessageContainer>\n)\n"],"mappings":";;;;;;;AAQA,IAAM,yBAAyB,OAAO,OAAO;CAC3C,MAAM,CAAC,QAAQ,aAAa;CAC5B,UAAU,EACR,MAAM;EACJ,SAAS,CAAC;EACV,SAAS,CAAC;EACV,SAAS,CAAC,+BAA+B;EACzC,MAAM,CAAC;EACP,QAAQ,CAAC;CACX,EACF;AACF,CAAC;AAWD,IAAa,iBAAiB,EAC5B,WACA,WAAW,MACX,OAAO,WACP,OAAO,MACP,UACA,GAAG,WAEH,qBAAC,wBAAD;CACQ;CAEN,qBAAmB,SAAS,YAAY,SAAS;CACtC;CACX,GAAI;WALN,CAOG,YACC,oBAAC,MAAD;EAAM,MAAK;EAAK,IAAI,qBAAqB;EAAO,WAAU;CAAQ,CAAA,GAEpE,oBAAC,MAAD;EAAM,IAAG;EAAa;EAAM,WAAU;EACnC;CACG,CAAA,CACgB"}

package/dist/components/inline-message/InlineMessage.types.d.ts

@@ -1 +1,2 @@
-export type InlineMessageTheme = 'warning' | 'error' | 'success' | 'info' | 'neutral';
+import type { TColorAccent } from '../../experiments/theme/Theme';
+export type InlineMessageTone = 'neutral' | Extract<TColorAccent, 'success' | 'warning' | 'info' | 'danger'>;

package/dist/components/input/Input.d.ts

@@ -4,7 +4,7 @@ export declare const InputBackground: import("../..").PolymorphicComponent<"div"
     size?: "lg" | "md" | "sm" | "xl" | undefined;
     disabled?: boolean | undefined;
     state?: "error" | undefined;
-    theme?: "grey" | "white" | undefined;
+    fill?: "subtle" | "surface" | undefined;
 }>;
 declare const StyledInputText: import("../..").PolymorphicComponent<import("../..").PolymorphicComponent<"p", {
     size?: ("2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs" | Partial<Record<"@initial" | "@lg" | "@md" | "@sm" | "@xl", "2xl" | "3xl" | "4xl" | "lg" | "md" | "sm" | "xl" | "xs">>) | undefined;
@@ -29,12 +29,12 @@ export type InputProps = Omit<React.ComponentProps<typeof InputText>, 'size' | '
     size?: InputBackgroundProps['size'];
     state?: InputBackgroundProps['state'];
     appearance?: InputBackgroundProps['appearance'];
-    theme?: InputBackgroundProps['theme'];
+    fill?: InputBackgroundProps['fill'];
     disabled?: boolean;
     name?: string;
     readOnly?: boolean;
     value?: string | number;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
 };
-export declare const Input: ({ ref, className, size, appearance, theme, state, disabled, style, ...rest }: InputProps) => React.JSX.Element;
+export declare const Input: ({ ref, className, size, appearance, fill, state, disabled, style, ...rest }: InputProps) => React.JSX.Element;
 export {};

package/dist/components/input/Input.js

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 var InputBackground = styled("div", {
 	base: [
 		"flex",
-		"text-grey-1000",
+		"text-default",
 		"transition-[background,border-color]",
 		"duration-100",
 		"ease-out",
@@ -16,17 +16,18 @@ var InputBackground = styled("div", {
 	variants: {
 		appearance: {
 			standard: [
-				"bg-white",
+				"bg-surface",
 				"border",
-				"border-grey-800",
-				"focus-within:border-blue-800",
+				"border-strong",
+				"focus-within:border-focus",
 				"rounded-md"
 			],
 			modern: [
-				"bg-grey-100",
+				"bg-input",
+				"[--autofill-fill:var(--background-color-input)]",
 				"border-none",
 				"focus-within:outline-2",
-				"focus-within:outline-blue-800",
+				"focus-within:outline-focus",
 				"focus-within:outline-offset-1",
 				"focus-within:outline-solid",
 				"focus-within:z-1",
@@ -41,31 +42,31 @@ var InputBackground = styled("div", {
 		},
 		disabled: { true: ["cursor-not-allowed", "opacity-30"] },
 		state: { error: [] },
-		theme: {
-			white: [],
-			grey: []
+		fill: {
+			surface: [],
+			subtle: []
 		}
 	},
 	compoundVariants: [
 		{
 			state: "error",
 			appearance: "standard",
-			class: ["border-danger"]
+			class: ["border-danger-solid"]
 		},
 		{
 			state: "error",
 			appearance: "modern",
-			class: ["bg-danger-light", "focus-within:outline-danger"]
+			class: ["bg-danger-subtle", "focus-within:outline-danger"]
 		},
 		{
 			appearance: "modern",
-			theme: "white",
-			class: ["bg-white"]
+			fill: "surface",
+			class: ["bg-surface", "[--autofill-fill:var(--background-color-surface)]"]
 		},
 		{
 			appearance: "modern",
-			theme: "grey",
-			class: ["bg-grey-100"]
+			fill: "subtle",
+			class: ["bg-input", "[--autofill-fill:var(--background-color-input)]"]
 		}
 	]
 });
@@ -82,7 +83,7 @@ var StyledInputText = /* @__PURE__ */ styled(Text, { base: [
 	"px-3",
 	"size-full",
 	"placeholder:opacity-100",
-	"placeholder:text-grey-700"
+	"placeholder:text-subtlest"
 ] });
 var toTextSize = {
 	sm: "sm",
@@ -102,10 +103,10 @@ var InputText = ({ ref, type = "text", size, ...rest }) => {
 		...rest
 	});
 };
-var Input = ({ ref, className, size = "md", appearance = "standard", theme, state, disabled, style, ...rest }) => /* @__PURE__ */ jsx(InputBackground, {
+var Input = ({ ref, className, size = "md", appearance = "standard", fill, state, disabled, style, ...rest }) => /* @__PURE__ */ jsx(InputBackground, {
 	size,
 	appearance,
-	theme,
+	fill,
 	disabled,
 	state,
 	className,

package/dist/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Text } from '../text/Text'\n\nexport const InputBackground = styled('div', {\n  base: [\n    'flex',\n    'text-grey-1000',\n    'transition-[background,border-color]',\n    'duration-100',\n    'ease-out',\n    'w-full'\n  ],\n  variants: {\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-800',\n        'focus-within:border-blue-800',\n        'rounded-md'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1',\n        'rounded-md'\n      ]\n    },\n    size: {\n      sm: ['h-8'],\n      md: ['h-10'],\n      lg: ['h-12'],\n      xl: ['h-16']\n    },\n    disabled: {\n      true: ['cursor-not-allowed', 'opacity-30']\n    },\n    state: {\n      error: []\n    },\n    theme: {\n      white: [],\n      grey: []\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-within:outline-danger']\n    },\n    {\n      appearance: 'modern',\n      theme: 'white',\n      class: ['bg-white']\n    },\n    {\n      appearance: 'modern',\n      theme: 'grey',\n      class: ['bg-grey-100']\n    }\n  ]\n})\n\nInputBackground.displayName = 'InputBackground'\n\n// @__PURE__ keeps this tree-shakable for consumers importing only\n// InputBackground from this module.\nconst StyledInputText = /* @__PURE__ */ styled(Text, {\n  base: [\n    'appearance-none',\n    'border-none',\n    'bg-none',\n    'bg-transparent',\n    'shadow-none',\n    'box-border',\n    'focus:outline-none',\n    'px-3',\n    'size-full',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700'\n  ]\n})\n\nexport type InputTextProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'size'\n> &\n  Omit<React.ComponentProps<typeof StyledInputText>, 'type' | 'as' | 'ref'> & {\n    // override default 'type' property to prevent Input from being used to render\n    // checkboxes, radios etc — we have dedicated components for them\n    type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n    as?: never\n    disabled?: boolean\n    // StyledInputText wraps Text (default element 'p'), but InputText always\n    // renders it as=\"input\", so the inherited paragraph ref must be overridden\n    ref?: React.Ref<HTMLInputElement>\n  }\n\nconst toTextSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg'\n}\n\nexport const InputText = ({\n  ref,\n  type = 'text',\n  size,\n  ...rest\n}: InputTextProps) => {\n  const textSize = overrideStyledVariantValue(size, (s) => toTextSize[s])\n\n  return (\n    <StyledInputText\n      ref={ref}\n      as=\"input\"\n      type={type === 'number' ? 'text' : type}\n      inputMode={type === 'number' ? 'numeric' : undefined}\n      pattern={type === 'number' ? '[0-9]*' : undefined}\n      size={textSize}\n      {...rest}\n    />\n  )\n}\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n  React.ComponentProps<typeof InputText>,\n  'size' | 'state' | 'appearance'\n> & {\n  size?: InputBackgroundProps['size']\n  state?: InputBackgroundProps['state']\n  appearance?: InputBackgroundProps['appearance']\n  theme?: InputBackgroundProps['theme']\n  disabled?: boolean\n  name?: string\n  readOnly?: boolean\n  value?: string | number\n  onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\nexport const Input = ({\n  ref,\n  className,\n  size = 'md',\n  appearance = 'standard',\n  theme,\n  state,\n  disabled,\n  style,\n  ...rest\n}: InputProps) => (\n  <InputBackground\n    size={size}\n    appearance={appearance}\n    theme={theme}\n    disabled={disabled}\n    state={state}\n    className={className}\n    style={style}\n  >\n    <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n  </InputBackground>\n)\n"],"mappings":";;;;;;AAMA,IAAa,kBAAkB,OAAO,OAAO;CAC3C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,KAAK;GACV,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;EACb;EACA,UAAU,EACR,MAAM,CAAC,sBAAsB,YAAY,EAC3C;EACA,OAAO,EACL,OAAO,CAAC,EACV;EACA,OAAO;GACL,OAAO,CAAC;GACR,MAAM,CAAC;EACT;CACF;CACA,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,eAAe;EACzB;EACA;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,6BAA6B;EAC1D;EACA;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,UAAU;EACpB;EACA;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,aAAa;EACvB;CACF;AACF,CAAC;AAED,gBAAgB,cAAc;;AAI9B,IAAM,kBAAkC,uBAAO,MAAM,EACnD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAiBD,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,aAAa,EACxB,KACA,OAAO,QACP,MACA,GAAG,WACiB;CACpB,MAAM,WAAW,2BAA2B,OAAO,MAAM,WAAW,EAAE;CAEtE,OACE,oBAAC,iBAAD;EACO;EACL,IAAG;EACH,MAAM,SAAS,WAAW,SAAS;EACnC,WAAW,SAAS,WAAW,YAAY,KAAA;EAC3C,SAAS,SAAS,WAAW,WAAW,KAAA;EACxC,MAAM;EACN,GAAI;CACL,CAAA;AAEL;AAkBA,IAAa,SAAS,EACpB,KACA,WACA,OAAO,MACP,aAAa,YACb,OACA,OACA,UACA,OACA,GAAG,WAEH,oBAAC,iBAAD;CACQ;CACM;CACL;CACG;CACH;CACI;CACJ;WAEP,oBAAC,WAAD;EAAiB;EAAW;EAAe;EAAU,GAAI;CAAO,CAAA;AACjD,CAAA"}
+{"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Text } from '../text/Text'\n\nexport const InputBackground = styled('div', {\n  base: [\n    'flex',\n    'text-default',\n    'transition-[background,border-color]',\n    'duration-100',\n    'ease-out',\n    'w-full'\n  ],\n  variants: {\n    appearance: {\n      standard: [\n        'bg-surface',\n        'border',\n        'border-strong',\n        'focus-within:border-focus',\n        'rounded-md'\n      ],\n      modern: [\n        'bg-input',\n        '[--autofill-fill:var(--background-color-input)]',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-focus',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1',\n        'rounded-md'\n      ]\n    },\n    size: {\n      sm: ['h-8'],\n      md: ['h-10'],\n      lg: ['h-12'],\n      xl: ['h-16']\n    },\n    disabled: {\n      true: ['cursor-not-allowed', 'opacity-30']\n    },\n    state: {\n      error: []\n    },\n    fill: {\n      surface: [],\n      subtle: []\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-within:outline-danger']\n    },\n    {\n      appearance: 'modern',\n      fill: 'surface',\n      class: ['bg-surface', '[--autofill-fill:var(--background-color-surface)]']\n    },\n    {\n      appearance: 'modern',\n      fill: 'subtle',\n      class: ['bg-input', '[--autofill-fill:var(--background-color-input)]']\n    }\n  ]\n})\n\nInputBackground.displayName = 'InputBackground'\n\n// @__PURE__ keeps this tree-shakable for consumers importing only\n// InputBackground from this module.\nconst StyledInputText = /* @__PURE__ */ styled(Text, {\n  base: [\n    'appearance-none',\n    'border-none',\n    'bg-none',\n    'bg-transparent',\n    'shadow-none',\n    'box-border',\n    'focus:outline-none',\n    'px-3',\n    'size-full',\n    'placeholder:opacity-100',\n    'placeholder:text-subtlest'\n  ]\n})\n\nexport type InputTextProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'size'\n> &\n  Omit<React.ComponentProps<typeof StyledInputText>, 'type' | 'as' | 'ref'> & {\n    // override default 'type' property to prevent Input from being used to render\n    // checkboxes, radios etc — we have dedicated components for them\n    type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n    as?: never\n    disabled?: boolean\n    // StyledInputText wraps Text (default element 'p'), but InputText always\n    // renders it as=\"input\", so the inherited paragraph ref must be overridden\n    ref?: React.Ref<HTMLInputElement>\n  }\n\nconst toTextSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg'\n}\n\nexport const InputText = ({\n  ref,\n  type = 'text',\n  size,\n  ...rest\n}: InputTextProps) => {\n  const textSize = overrideStyledVariantValue(size, (s) => toTextSize[s])\n\n  return (\n    <StyledInputText\n      ref={ref}\n      as=\"input\"\n      type={type === 'number' ? 'text' : type}\n      inputMode={type === 'number' ? 'numeric' : undefined}\n      pattern={type === 'number' ? '[0-9]*' : undefined}\n      size={textSize}\n      {...rest}\n    />\n  )\n}\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n  React.ComponentProps<typeof InputText>,\n  'size' | 'state' | 'appearance'\n> & {\n  size?: InputBackgroundProps['size']\n  state?: InputBackgroundProps['state']\n  appearance?: InputBackgroundProps['appearance']\n  fill?: InputBackgroundProps['fill']\n  disabled?: boolean\n  name?: string\n  readOnly?: boolean\n  value?: string | number\n  onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\nexport const Input = ({\n  ref,\n  className,\n  size = 'md',\n  appearance = 'standard',\n  fill,\n  state,\n  disabled,\n  style,\n  ...rest\n}: InputProps) => (\n  <InputBackground\n    size={size}\n    appearance={appearance}\n    fill={fill}\n    disabled={disabled}\n    state={state}\n    className={className}\n    style={style}\n  >\n    <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n  </InputBackground>\n)\n"],"mappings":";;;;;;AAMA,IAAa,kBAAkB,OAAO,OAAO;CAC3C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,KAAK;GACV,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;EACb;EACA,UAAU,EACR,MAAM,CAAC,sBAAsB,YAAY,EAC3C;EACA,OAAO,EACL,OAAO,CAAC,EACV;EACA,MAAM;GACJ,SAAS,CAAC;GACV,QAAQ,CAAC;EACX;CACF;CACA,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,qBAAqB;EAC/B;EACA;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,oBAAoB,6BAA6B;EAC3D;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,cAAc,mDAAmD;EAC3E;EACA;GACE,YAAY;GACZ,MAAM;GACN,OAAO,CAAC,YAAY,iDAAiD;EACvE;CACF;AACF,CAAC;AAED,gBAAgB,cAAc;;AAI9B,IAAM,kBAAkC,uBAAO,MAAM,EACnD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAiBD,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,aAAa,EACxB,KACA,OAAO,QACP,MACA,GAAG,WACiB;CACpB,MAAM,WAAW,2BAA2B,OAAO,MAAM,WAAW,EAAE;CAEtE,OACE,oBAAC,iBAAD;EACO;EACL,IAAG;EACH,MAAM,SAAS,WAAW,SAAS;EACnC,WAAW,SAAS,WAAW,YAAY,KAAA;EAC3C,SAAS,SAAS,WAAW,WAAW,KAAA;EACxC,MAAM;EACN,GAAI;CACL,CAAA;AAEL;AAkBA,IAAa,SAAS,EACpB,KACA,WACA,OAAO,MACP,aAAa,YACb,MACA,OACA,UACA,OACA,GAAG,WAEH,oBAAC,iBAAD;CACQ;CACM;CACN;CACI;CACH;CACI;CACJ;WAEP,oBAAC,WAAD;EAAiB;EAAW;EAAe;EAAU,GAAI;CAAO,CAAA;AACjD,CAAA"}

package/dist/components/input-field/InputField.d.ts

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

package/dist/components/input-field/InputField.js

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

package/dist/components/input-field/InputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.js","names":[],"sources":["../../../src/components/input-field/InputField.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 { Input, type InputProps } from '../input/Input'\n\ntype InputFieldProps = InputProps & FieldElementWrapperProps\n\nexport const InputField = ({\n  className,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  hideLabel,\n  appearance,\n  theme,\n  ...rest\n}: InputFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Input\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...(error && { state: 'error' })}\n        {...rest}\n      />\n    </FieldWrapper>\n  )\n}\n\nInputField.displayName = 'InputField'\n"],"mappings":";;;;;;;;AAaA,IAAa,cAAc,EACzB,WACA,OACA,MACA,YACA,QACA,aACA,WACA,YACA,OACA,GAAG,WACkB;CACrB,MAAM,EAAE,aAAa,eAAe;CACpC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,MAAM,MAAM,aAAa,SAAS,UAAU,IAAI;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;CAEpC,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;YAEZ,oBAAC,OAAD;GACE,IAAI;GACE;GACD;GACL,YAAY;GACZ,OAAO;GACP,GAAK,SAAS,EAAE,OAAO,QAAQ;GAC/B,GAAI;EACL,CAAA;CACW,CAAA;AAElB;AAEA,WAAW,cAAc"}
+{"version":3,"file":"InputField.js","names":[],"sources":["../../../src/components/input-field/InputField.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 { Input, type InputProps } from '../input/Input'\n\ntype InputFieldProps = InputProps & FieldElementWrapperProps\n\nexport const InputField = ({\n  className,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  hideLabel,\n  appearance,\n  fill,\n  ...rest\n}: InputFieldProps) => {\n  const { register } = useFormContext()\n  const context = useFormCustomContext()\n  const { error } = useFieldError(name)\n\n  const ref = validation ? register(validation) : register\n  const formAppearance = context?.appearance || appearance\n  const formFill = context?.fill ?? fill\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <Input\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={formAppearance}\n        fill={formFill}\n        {...(error && { state: 'error' })}\n        {...rest}\n      />\n    </FieldWrapper>\n  )\n}\n\nInputField.displayName = 'InputField'\n"],"mappings":";;;;;;;;AAaA,IAAa,cAAc,EACzB,WACA,OACA,MACA,YACA,QACA,aACA,WACA,YACA,MACA,GAAG,WACkB;CACrB,MAAM,EAAE,aAAa,eAAe;CACpC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,MAAM,MAAM,aAAa,SAAS,UAAU,IAAI;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,WAAW,SAAS,QAAQ;CAElC,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;YAEZ,oBAAC,OAAD;GACE,IAAI;GACE;GACD;GACL,YAAY;GACZ,MAAM;GACN,GAAK,SAAS,EAAE,OAAO,QAAQ;GAC/B,GAAI;EACL,CAAA;CACW,CAAA;AAElB;AAEA,WAAW,cAAc"}

package/dist/components/keyboard-shortcut/KeyboardShortcut.js

@@ -33,8 +33,8 @@ var KeyboardShortcut = ({ ref, asChild, config, targetWindow = false, onKeyDown,
 	});
 };
 var StyledKeyboardShortcutIndicator = /* @__PURE__ */ styled(Text, { base: [
-	"bg-grey-100",
-	"text-text-subtle",
+	"bg-inset",
+	"text-subtle",
 	"px-2",
 	"py-0.5",
 	"min-w-6",

package/dist/components/keyboard-shortcut/KeyboardShortcut.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardShortcut.js","names":[],"sources":["../../../src/components/keyboard-shortcut/KeyboardShortcut.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\n\ntype KeyboardEventWindowOrElement =\n  | KeyboardEvent\n  | React.KeyboardEvent<HTMLDivElement>\ntype ShortcutConfig = Partial<KeyboardEvent>\n\ntype KeyboardShortcutProps = React.HTMLAttributes<HTMLDivElement> & {\n  asChild?: boolean\n  config: {\n    shortcut: ShortcutConfig\n    action: ({\n      event,\n      shortcut\n    }: {\n      event: KeyboardEvent | React.KeyboardEvent<HTMLDivElement>\n      shortcut: ShortcutConfig\n    }) => void\n  }[]\n  targetWindow?: boolean\n  onKeyDown?: (e: KeyboardEventWindowOrElement) => void\n  ref?: React.Ref<HTMLDivElement>\n}\n\nexport const KeyboardShortcut = ({\n  ref,\n  asChild,\n  config,\n  targetWindow = false,\n  onKeyDown,\n  ...rest\n}: KeyboardShortcutProps) => {\n  const handleOnKeydown = React.useCallback(\n    (e: KeyboardEventWindowOrElement) => {\n      config.forEach(({ shortcut, action }) => {\n        if (Object.entries(shortcut).every(([key, value]) => e[key] === value))\n          action({ event: e, shortcut })\n      })\n      onKeyDown?.(e)\n    },\n    [config, onKeyDown]\n  )\n\n  // Latest-ref so the window listener subscribes once — keyed on the handler\n  // it would re-subscribe whenever an inline `config` array changes identity.\n  const handleOnKeydownRef = React.useRef(handleOnKeydown)\n  React.useLayoutEffect(() => {\n    handleOnKeydownRef.current = handleOnKeydown\n  })\n\n  React.useEffect(() => {\n    if (!targetWindow) return\n\n    const listener = (e: KeyboardEvent) => handleOnKeydownRef.current(e)\n    window.addEventListener('keydown', listener)\n\n    return () => {\n      window.removeEventListener('keydown', listener)\n    }\n  }, [targetWindow])\n\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <Component\n      onKeyDown={targetWindow ? undefined : handleOnKeydown}\n      ref={ref}\n      {...rest}\n    />\n  )\n}\n\nconst StyledKeyboardShortcutIndicator = /* @__PURE__ */ styled(Text, {\n  base: [\n    'bg-grey-100',\n    'text-text-subtle',\n    'px-2',\n    'py-0.5',\n    'min-w-6',\n    'min-h-6',\n    'font-normal',\n    'inline-flex',\n    'justify-center',\n    'items-center',\n    'rounded-md',\n    'shrink-0',\n    'capsize-none'\n  ]\n})\n\ntype KeyboardShortcutIndicatorProps = React.ComponentProps<\n  typeof StyledKeyboardShortcutIndicator\n>\n\nexport const KeyboardShortcutIndicator = (\n  props: KeyboardShortcutIndicatorProps\n) => {\n  return <StyledKeyboardShortcutIndicator size=\"sm\" as=\"kbd\" {...props} />\n}\n"],"mappings":";;;;;;AA4BA,IAAa,oBAAoB,EAC/B,KACA,SACA,QACA,eAAe,OACf,WACA,GAAG,WACwB;CAC3B,MAAM,kBAAkB,QAAM,aAC3B,MAAoC;EACnC,OAAO,SAAS,EAAE,UAAU,aAAa;GACvC,IAAI,OAAO,QAAQ,QAAQ,CAAC,CAAC,OAAO,CAAC,KAAK,WAAW,EAAE,SAAS,KAAK,GACnE,OAAO;IAAE,OAAO;IAAG;GAAS,CAAC;EACjC,CAAC;EACD,YAAY,CAAC;CACf,GACA,CAAC,QAAQ,SAAS,CACpB;CAIA,MAAM,qBAAqB,QAAM,OAAO,eAAe;CACvD,QAAM,sBAAsB;EAC1B,mBAAmB,UAAU;CAC/B,CAAC;CAED,QAAM,gBAAgB;EACpB,IAAI,CAAC,cAAc;EAEnB,MAAM,YAAY,MAAqB,mBAAmB,QAAQ,CAAC;EACnE,OAAO,iBAAiB,WAAW,QAAQ;EAE3C,aAAa;GACX,OAAO,oBAAoB,WAAW,QAAQ;EAChD;CACF,GAAG,CAAC,YAAY,CAAC;CAIjB,OACE,oBAHgB,UAAU,OAAO,OAGjC;EACE,WAAW,eAAe,KAAA,IAAY;EACjC;EACL,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,kCAAkD,uBAAO,MAAM,EACnE,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAMD,IAAa,6BACX,UACG;CACH,OAAO,oBAAC,iCAAD;EAAiC,MAAK;EAAK,IAAG;EAAM,GAAI;CAAQ,CAAA;AACzE"}
+{"version":3,"file":"KeyboardShortcut.js","names":[],"sources":["../../../src/components/keyboard-shortcut/KeyboardShortcut.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\n\ntype KeyboardEventWindowOrElement =\n  | KeyboardEvent\n  | React.KeyboardEvent<HTMLDivElement>\ntype ShortcutConfig = Partial<KeyboardEvent>\n\ntype KeyboardShortcutProps = React.HTMLAttributes<HTMLDivElement> & {\n  asChild?: boolean\n  config: {\n    shortcut: ShortcutConfig\n    action: ({\n      event,\n      shortcut\n    }: {\n      event: KeyboardEvent | React.KeyboardEvent<HTMLDivElement>\n      shortcut: ShortcutConfig\n    }) => void\n  }[]\n  targetWindow?: boolean\n  onKeyDown?: (e: KeyboardEventWindowOrElement) => void\n  ref?: React.Ref<HTMLDivElement>\n}\n\nexport const KeyboardShortcut = ({\n  ref,\n  asChild,\n  config,\n  targetWindow = false,\n  onKeyDown,\n  ...rest\n}: KeyboardShortcutProps) => {\n  const handleOnKeydown = React.useCallback(\n    (e: KeyboardEventWindowOrElement) => {\n      config.forEach(({ shortcut, action }) => {\n        if (Object.entries(shortcut).every(([key, value]) => e[key] === value))\n          action({ event: e, shortcut })\n      })\n      onKeyDown?.(e)\n    },\n    [config, onKeyDown]\n  )\n\n  // Latest-ref so the window listener subscribes once — keyed on the handler\n  // it would re-subscribe whenever an inline `config` array changes identity.\n  const handleOnKeydownRef = React.useRef(handleOnKeydown)\n  React.useLayoutEffect(() => {\n    handleOnKeydownRef.current = handleOnKeydown\n  })\n\n  React.useEffect(() => {\n    if (!targetWindow) return\n\n    const listener = (e: KeyboardEvent) => handleOnKeydownRef.current(e)\n    window.addEventListener('keydown', listener)\n\n    return () => {\n      window.removeEventListener('keydown', listener)\n    }\n  }, [targetWindow])\n\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <Component\n      onKeyDown={targetWindow ? undefined : handleOnKeydown}\n      ref={ref}\n      {...rest}\n    />\n  )\n}\n\nconst StyledKeyboardShortcutIndicator = /* @__PURE__ */ styled(Text, {\n  base: [\n    'bg-inset',\n    'text-subtle',\n    'px-2',\n    'py-0.5',\n    'min-w-6',\n    'min-h-6',\n    'font-normal',\n    'inline-flex',\n    'justify-center',\n    'items-center',\n    'rounded-md',\n    'shrink-0',\n    'capsize-none'\n  ]\n})\n\ntype KeyboardShortcutIndicatorProps = React.ComponentProps<\n  typeof StyledKeyboardShortcutIndicator\n>\n\nexport const KeyboardShortcutIndicator = (\n  props: KeyboardShortcutIndicatorProps\n) => {\n  return <StyledKeyboardShortcutIndicator size=\"sm\" as=\"kbd\" {...props} />\n}\n"],"mappings":";;;;;;AA4BA,IAAa,oBAAoB,EAC/B,KACA,SACA,QACA,eAAe,OACf,WACA,GAAG,WACwB;CAC3B,MAAM,kBAAkB,QAAM,aAC3B,MAAoC;EACnC,OAAO,SAAS,EAAE,UAAU,aAAa;GACvC,IAAI,OAAO,QAAQ,QAAQ,CAAC,CAAC,OAAO,CAAC,KAAK,WAAW,EAAE,SAAS,KAAK,GACnE,OAAO;IAAE,OAAO;IAAG;GAAS,CAAC;EACjC,CAAC;EACD,YAAY,CAAC;CACf,GACA,CAAC,QAAQ,SAAS,CACpB;CAIA,MAAM,qBAAqB,QAAM,OAAO,eAAe;CACvD,QAAM,sBAAsB;EAC1B,mBAAmB,UAAU;CAC/B,CAAC;CAED,QAAM,gBAAgB;EACpB,IAAI,CAAC,cAAc;EAEnB,MAAM,YAAY,MAAqB,mBAAmB,QAAQ,CAAC;EACnE,OAAO,iBAAiB,WAAW,QAAQ;EAE3C,aAAa;GACX,OAAO,oBAAoB,WAAW,QAAQ;EAChD;CACF,GAAG,CAAC,YAAY,CAAC;CAIjB,OACE,oBAHgB,UAAU,OAAO,OAGjC;EACE,WAAW,eAAe,KAAA,IAAY;EACjC;EACL,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,kCAAkD,uBAAO,MAAM,EACnE,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAMD,IAAa,6BACX,UACG;CACH,OAAO,oBAAC,iCAAD;EAAiC,MAAK;EAAK,IAAG;EAAM,GAAI;CAAQ,CAAA;AACzE"}

package/dist/components/label/Label.js

@@ -4,7 +4,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/label/Label.tsx
 var StyledLabel = styled("label", {
 	base: [
-		"text-grey-900",
+		"text-default",
 		"font-body",
 		"m-0"
 	],

package/dist/components/label/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":[],"sources":["../../../src/components/label/Label.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\n\nconst StyledLabel = styled('label', {\n  base: ['text-grey-900', 'font-body', 'm-0'],\n  variants: {\n    size: {\n      sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      md: ['text-md', 'leading-normal', 'capsize-[0.3864]']\n    },\n    type: {\n      block: ['block', 'font-semibold'],\n      inline: ['flex', 'font-normal', 'max-w-max']\n    },\n    align: { start: [], center: [] },\n    direction: { reverse: [], row: [] },\n    appearance: { standard: [], modern: [] }\n  },\n  compoundVariants: [\n    {\n      type: 'inline',\n      align: 'start',\n      class: ['items-start']\n    },\n    {\n      type: 'inline',\n      align: 'center',\n      class: ['items-center']\n    },\n    {\n      type: 'inline',\n      direction: 'reverse',\n      class: ['flex-row-reverse']\n    },\n    {\n      type: 'inline',\n      direction: 'row',\n      class: ['flex-row']\n    },\n    {\n      type: 'block',\n      appearance: 'modern',\n      class: ['font-normal']\n    }\n  ]\n})\n\nexport type LabelProps = Override<\n  React.ComponentPropsWithoutRef<typeof StyledLabel>,\n  {\n    as?: 'label' | 'legend'\n    required?: boolean\n  }\n>\n\nexport const Label = ({\n  align = 'start',\n  as = 'label',\n  direction = 'row',\n  size = 'md',\n  type = 'block',\n  children,\n  required,\n  ...rest\n}: LabelProps) => (\n  <StyledLabel\n    as={as}\n    size={size}\n    type={type}\n    align={align}\n    direction={direction}\n    {...rest}\n  >\n    {children}\n    {required && (\n      <span className=\"text-danger ml-1 font-normal\" aria-hidden>\n        *\n      </span>\n    )}\n  </StyledLabel>\n)\n\nLabel.displayName = 'Label'\n"],"mappings":";;;;AAKA,IAAM,cAAc,OAAO,SAAS;CAClC,MAAM;EAAC;EAAiB;EAAa;CAAK;CAC1C,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;EACtD;EACA,MAAM;GACJ,OAAO,CAAC,SAAS,eAAe;GAChC,QAAQ;IAAC;IAAQ;IAAe;GAAW;EAC7C;EACA,OAAO;GAAE,OAAO,CAAC;GAAG,QAAQ,CAAC;EAAE;EAC/B,WAAW;GAAE,SAAS,CAAC;GAAG,KAAK,CAAC;EAAE;EAClC,YAAY;GAAE,UAAU,CAAC;GAAG,QAAQ,CAAC;EAAE;CACzC;CACA,kBAAkB;EAChB;GACE,MAAM;GACN,OAAO;GACP,OAAO,CAAC,aAAa;EACvB;EACA;GACE,MAAM;GACN,OAAO;GACP,OAAO,CAAC,cAAc;EACxB;EACA;GACE,MAAM;GACN,WAAW;GACX,OAAO,CAAC,kBAAkB;EAC5B;EACA;GACE,MAAM;GACN,WAAW;GACX,OAAO,CAAC,UAAU;EACpB;EACA;GACE,MAAM;GACN,YAAY;GACZ,OAAO,CAAC,aAAa;EACvB;CACF;AACF,CAAC;AAUD,IAAa,SAAS,EACpB,QAAQ,SACR,KAAK,SACL,YAAY,OACZ,OAAO,MACP,OAAO,SACP,UACA,UACA,GAAG,WAEH,qBAAC,aAAD;CACM;CACE;CACA;CACC;CACI;CACX,GAAI;WANN,CAQG,UACA,YACC,oBAAC,QAAD;EAAM,WAAU;EAA+B,eAAA;YAAY;CAErD,CAAA,CAEG;;AAGf,MAAM,cAAc"}
+{"version":3,"file":"Label.js","names":[],"sources":["../../../src/components/label/Label.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\n\nconst StyledLabel = styled('label', {\n  base: ['text-default', 'font-body', 'm-0'],\n  variants: {\n    size: {\n      sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      md: ['text-md', 'leading-normal', 'capsize-[0.3864]']\n    },\n    type: {\n      block: ['block', 'font-semibold'],\n      inline: ['flex', 'font-normal', 'max-w-max']\n    },\n    align: { start: [], center: [] },\n    direction: { reverse: [], row: [] },\n    appearance: { standard: [], modern: [] }\n  },\n  compoundVariants: [\n    {\n      type: 'inline',\n      align: 'start',\n      class: ['items-start']\n    },\n    {\n      type: 'inline',\n      align: 'center',\n      class: ['items-center']\n    },\n    {\n      type: 'inline',\n      direction: 'reverse',\n      class: ['flex-row-reverse']\n    },\n    {\n      type: 'inline',\n      direction: 'row',\n      class: ['flex-row']\n    },\n    {\n      type: 'block',\n      appearance: 'modern',\n      class: ['font-normal']\n    }\n  ]\n})\n\nexport type LabelProps = Override<\n  React.ComponentPropsWithoutRef<typeof StyledLabel>,\n  {\n    as?: 'label' | 'legend'\n    required?: boolean\n  }\n>\n\nexport const Label = ({\n  align = 'start',\n  as = 'label',\n  direction = 'row',\n  size = 'md',\n  type = 'block',\n  children,\n  required,\n  ...rest\n}: LabelProps) => (\n  <StyledLabel\n    as={as}\n    size={size}\n    type={type}\n    align={align}\n    direction={direction}\n    {...rest}\n  >\n    {children}\n    {required && (\n      <span className=\"text-danger ml-1 font-normal\" aria-hidden>\n        *\n      </span>\n    )}\n  </StyledLabel>\n)\n\nLabel.displayName = 'Label'\n"],"mappings":";;;;AAKA,IAAM,cAAc,OAAO,SAAS;CAClC,MAAM;EAAC;EAAgB;EAAa;CAAK;CACzC,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;EACtD;EACA,MAAM;GACJ,OAAO,CAAC,SAAS,eAAe;GAChC,QAAQ;IAAC;IAAQ;IAAe;GAAW;EAC7C;EACA,OAAO;GAAE,OAAO,CAAC;GAAG,QAAQ,CAAC;EAAE;EAC/B,WAAW;GAAE,SAAS,CAAC;GAAG,KAAK,CAAC;EAAE;EAClC,YAAY;GAAE,UAAU,CAAC;GAAG,QAAQ,CAAC;EAAE;CACzC;CACA,kBAAkB;EAChB;GACE,MAAM;GACN,OAAO;GACP,OAAO,CAAC,aAAa;EACvB;EACA;GACE,MAAM;GACN,OAAO;GACP,OAAO,CAAC,cAAc;EACxB;EACA;GACE,MAAM;GACN,WAAW;GACX,OAAO,CAAC,kBAAkB;EAC5B;EACA;GACE,MAAM;GACN,WAAW;GACX,OAAO,CAAC,UAAU;EACpB;EACA;GACE,MAAM;GACN,YAAY;GACZ,OAAO,CAAC,aAAa;EACvB;CACF;AACF,CAAC;AAUD,IAAa,SAAS,EACpB,QAAQ,SACR,KAAK,SACL,YAAY,OACZ,OAAO,MACP,OAAO,SACP,UACA,UACA,GAAG,WAEH,qBAAC,aAAD;CACM;CACE;CACA;CACC;CACI;CACX,GAAI;WANN,CAQG,UACA,YACC,oBAAC,QAAD;EAAM,WAAU;EAA+B,eAAA;YAAY;CAErD,CAAA,CAEG;;AAGf,MAAM,cAAc"}

package/dist/components/link/Link.js

@@ -7,15 +7,15 @@ import { jsx } from "react/jsx-runtime";
 var StyledLink = styled("a", {
 	base: [
 		"bg-[unset]",
-		"text-primary-800",
+		"text-link",
 		"cursor-pointer",
 		"font-body",
 		"no-underline",
-		"focus:text-primary-900",
+		"focus:text-link-hover",
 		"focus:underline",
-		"hover:text-primary-900",
+		"hover:text-link-hover",
 		"hover:underline",
-		"active:text-primary-1000",
+		"active:text-link-hover",
 		"disabled:cursor-not-allowed",
 		"disabled:opacity-30",
 		"disabled:pointer-events-none",

package/dist/components/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { type PolymorphicComponent, styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\n\nexport const StyledLink = styled(\n  'a',\n  {\n    base: [\n      'bg-[unset]',\n      'text-primary-800',\n      'cursor-pointer',\n      'font-body',\n      'no-underline',\n      'focus:text-primary-900',\n      'focus:underline',\n      'hover:text-primary-900',\n      'hover:underline',\n      'active:text-primary-1000',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'disabled:pointer-events-none',\n      '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:after:content-none',\n      '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:before:content-none',\n      '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:text-[100%]/none'\n    ],\n    variants: {\n      size: {\n        xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n        sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n        md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n        lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n        xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]']\n      },\n      noCapsize: {\n        true: ['capsize-none']\n      }\n    },\n    defaultVariants: {\n      size: 'md'\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype LinkCustomProps = {\n  disabled?: boolean\n  reloadDocument?: boolean\n}\n\ntype LinkProps = Override<\n  React.ComponentProps<typeof StyledLink>,\n  LinkCustomProps & { as?: React.ElementType }\n>\n\n// Re-expose StyledLink's variant props merged with our own, so the public\n// polymorphic type re-checks props against whatever `as` target is passed\ntype StyledLinkOwnProps =\n  typeof StyledLink extends PolymorphicComponent<\n    infer _Element extends React.ElementType,\n    infer OwnProps\n  >\n    ? OwnProps\n    : never\n\ntype LinkOwnProps = Override<StyledLinkOwnProps, LinkCustomProps>\n\nexport const Link = (({\n  ref,\n  as,\n  disabled,\n  href,\n  reloadDocument,\n  ...rest\n}: LinkProps) => {\n  const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n\n  return (\n    <StyledLink\n      as={as || routerLinkProps.as || (!href ? 'button' : undefined)}\n      noCapsize={!href ? true : undefined}\n      href={href}\n      {...(disabled && { disabled: true })}\n      {...rest}\n      {...getExternalAnchorProps(href)}\n      ref={ref}\n    />\n  )\n}) as PolymorphicComponent<'a', LinkOwnProps>\n"],"mappings":";;;;;;AAOA,IAAa,aAAa,OACxB,KACA;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;IAAC;IAAW;IAAiB;GAAkB;GACnD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;EACtD;EACA,WAAW,EACT,MAAM,CAAC,cAAc,EACvB;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAwBA,IAAa,SAAS,EACpB,KACA,IACA,UACA,MACA,gBACA,GAAG,WACY;CACf,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,eAAe,CAAC;CAEnE,OACE,oBAAC,YAAD;EACE,IAAI,MAAM,gBAAgB,OAAO,CAAC,OAAO,WAAW,KAAA;EACpD,WAAW,CAAC,OAAO,OAAO,KAAA;EACpB;EACN,GAAK,YAAY,EAAE,UAAU,KAAK;EAClC,GAAI;EACJ,GAAI,uBAAuB,IAAI;EAC1B;CACN,CAAA;AAEL"}
+{"version":3,"file":"Link.js","names":[],"sources":["../../../src/components/link/Link.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { type PolymorphicComponent, styled } from '../../styled'\nimport type { Override } from '../../utilities/types'\nimport { getExternalAnchorProps } from '../../utilities/uri'\nimport { useRouterLinkProps } from '../router-provider/RouterProvider'\n\nexport const StyledLink = styled(\n  'a',\n  {\n    base: [\n      'bg-[unset]',\n      'text-link',\n      'cursor-pointer',\n      'font-body',\n      'no-underline',\n      'focus:text-link-hover',\n      'focus:underline',\n      'hover:text-link-hover',\n      'hover:underline',\n      'active:text-link-hover',\n      'disabled:cursor-not-allowed',\n      'disabled:opacity-30',\n      'disabled:pointer-events-none',\n      '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:after:content-none',\n      '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:before:content-none',\n      '[p>&,h1>&,h2>&,h3>&,h4>&,li>&,em>&]:text-[100%]/none'\n    ],\n    variants: {\n      size: {\n        xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n        sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n        md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n        lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n        xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]']\n      },\n      noCapsize: {\n        true: ['capsize-none']\n      }\n    },\n    defaultVariants: {\n      size: 'md'\n    }\n  },\n  { enableResponsiveVariants: true }\n)\n\ntype LinkCustomProps = {\n  disabled?: boolean\n  reloadDocument?: boolean\n}\n\ntype LinkProps = Override<\n  React.ComponentProps<typeof StyledLink>,\n  LinkCustomProps & { as?: React.ElementType }\n>\n\n// Re-expose StyledLink's variant props merged with our own, so the public\n// polymorphic type re-checks props against whatever `as` target is passed\ntype StyledLinkOwnProps =\n  typeof StyledLink extends PolymorphicComponent<\n    infer _Element extends React.ElementType,\n    infer OwnProps\n  >\n    ? OwnProps\n    : never\n\ntype LinkOwnProps = Override<StyledLinkOwnProps, LinkCustomProps>\n\nexport const Link = (({\n  ref,\n  as,\n  disabled,\n  href,\n  reloadDocument,\n  ...rest\n}: LinkProps) => {\n  const routerLinkProps = useRouterLinkProps(href, { reloadDocument })\n\n  return (\n    <StyledLink\n      as={as || routerLinkProps.as || (!href ? 'button' : undefined)}\n      noCapsize={!href ? true : undefined}\n      href={href}\n      {...(disabled && { disabled: true })}\n      {...rest}\n      {...getExternalAnchorProps(href)}\n      ref={ref}\n    />\n  )\n}) as PolymorphicComponent<'a', LinkOwnProps>\n"],"mappings":";;;;;;AAOA,IAAa,aAAa,OACxB,KACA;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;IAAC;IAAW;IAAiB;GAAkB;GACnD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;EACtD;EACA,WAAW,EACT,MAAM,CAAC,cAAc,EACvB;CACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,GACA,EAAE,0BAA0B,KAAK,CACnC;AAwBA,IAAa,SAAS,EACpB,KACA,IACA,UACA,MACA,gBACA,GAAG,WACY;CACf,MAAM,kBAAkB,mBAAmB,MAAM,EAAE,eAAe,CAAC;CAEnE,OACE,oBAAC,YAAD;EACE,IAAI,MAAM,gBAAgB,OAAO,CAAC,OAAO,WAAW,KAAA;EACpD,WAAW,CAAC,OAAO,OAAO,KAAA;EACpB;EACN,GAAK,YAAY,EAAE,UAAU,KAAK;EAClC,GAAI;EACJ,GAAI,uBAAuB,IAAI;EAC1B;CACN,CAAA;AAEL"}

package/dist/components/list/List.d.ts

@@ -4,7 +4,6 @@ export declare const StyledList: import("../..").PolymorphicComponent<"ul", {
     size?: "lg" | "md" | "sm" | "xl" | "xs" | undefined;
     noCapsize?: boolean | undefined;
     ordered?: boolean | undefined;
-    theme?: "primary" | undefined;
 }>;
 type ListProps = React.ComponentProps<typeof StyledList> & {
     ordered?: boolean;

package/dist/components/list/List.js

@@ -47,8 +47,7 @@ var StyledList = styled("ul", {
 				"list-disc",
 				"[&_>_li]:pl-2"
 			]
-		},
-		theme: { primary: ["marker:text-primary-800"] }
+		}
 	}
 });
 var ListComponent = ({ ref, size = "md", noCapsize = true, ordered = false, ...rest }) => /* @__PURE__ */ jsx(StyledList, {

package/dist/components/list/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","names":[],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\n\nexport const StyledLi = styled('li', {\n  base: ['last:mb-0', 'not-last:mb-2']\n})\n\nexport const StyledList = styled('ul', {\n  base: ['list-inside', 'font-body'],\n  variants: {\n    size: {\n      xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n      sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n      lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n      xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]']\n    },\n    noCapsize: {\n      true: ['capsize-none']\n    },\n    ordered: {\n      true: [\n        'pl-4',\n        'list-decimal',\n        '[&_>_li]:pl-1',\n        '[&_>_li::marker]:font-medium',\n        '[&_>_li::marker]:text-sm'\n      ],\n      false: ['pl-3', 'list-disc', '[&_>_li]:pl-2']\n    },\n    theme: {\n      primary: ['marker:text-primary-800']\n    }\n  }\n})\n\ntype ListProps = React.ComponentProps<typeof StyledList> & {\n  ordered?: boolean\n}\n\nconst ListComponent = ({\n  ref,\n  size = 'md',\n  noCapsize = true,\n  ordered = false,\n  ...rest\n}: ListProps) => (\n  <StyledList\n    ref={ref}\n    as={ordered ? 'ol' : 'ul'}\n    ordered={ordered}\n    size={size}\n    noCapsize={noCapsize}\n    {...rest}\n  />\n)\n\nexport const List = /* @__PURE__ */ Object.assign(ListComponent, {\n  Item: StyledLi\n})\n"],"mappings":";;;;AAIA,IAAa,WAAW,OAAO,MAAM,EACnC,MAAM,CAAC,aAAa,eAAe,EACrC,CAAC;AAED,IAAa,aAAa,OAAO,MAAM;CACrC,MAAM,CAAC,eAAe,WAAW;CACjC,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAiB;GAAkB;GACnD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;EACtD;EACA,WAAW,EACT,MAAM,CAAC,cAAc,EACvB;EACA,SAAS;GACP,MAAM;IACJ;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IAAC;IAAQ;IAAa;GAAe;EAC9C;EACA,OAAO,EACL,SAAS,CAAC,yBAAyB,EACrC;CACF;AACF,CAAC;AAMD,IAAM,iBAAiB,EACrB,KACA,OAAO,MACP,YAAY,MACZ,UAAU,OACV,GAAG,WAEH,oBAAC,YAAD;CACO;CACL,IAAI,UAAU,OAAO;CACZ;CACH;CACK;CACX,GAAI;AACL,CAAA;AAGH,IAAa,OAAuB,uBAAO,OAAO,eAAe,EAC/D,MAAM,SACR,CAAC"}
+{"version":3,"file":"List.js","names":[],"sources":["../../../src/components/list/List.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\n\nexport const StyledLi = styled('li', {\n  base: ['last:mb-0', 'not-last:mb-2']\n})\n\nexport const StyledList = styled('ul', {\n  base: ['list-inside', 'font-body'],\n  variants: {\n    size: {\n      xs: ['text-xs', 'leading-[1.6]', 'capsize-[0.4364]'],\n      sm: ['text-sm', 'leading-[1.53]', 'capsize-[0.4056]'],\n      md: ['text-md', 'leading-normal', 'capsize-[0.3864]'],\n      lg: ['text-lg', 'leading-[1.52]', 'capsize-[0.3983]'],\n      xl: ['text-xl', 'leading-[1.42]', 'capsize-[0.3506]']\n    },\n    noCapsize: {\n      true: ['capsize-none']\n    },\n    ordered: {\n      true: [\n        'pl-4',\n        'list-decimal',\n        '[&_>_li]:pl-1',\n        '[&_>_li::marker]:font-medium',\n        '[&_>_li::marker]:text-sm'\n      ],\n      false: ['pl-3', 'list-disc', '[&_>_li]:pl-2']\n    }\n  }\n})\n\ntype ListProps = React.ComponentProps<typeof StyledList> & {\n  ordered?: boolean\n}\n\nconst ListComponent = ({\n  ref,\n  size = 'md',\n  noCapsize = true,\n  ordered = false,\n  ...rest\n}: ListProps) => (\n  <StyledList\n    ref={ref}\n    as={ordered ? 'ol' : 'ul'}\n    ordered={ordered}\n    size={size}\n    noCapsize={noCapsize}\n    {...rest}\n  />\n)\n\nexport const List = /* @__PURE__ */ Object.assign(ListComponent, {\n  Item: StyledLi\n})\n"],"mappings":";;;;AAIA,IAAa,WAAW,OAAO,MAAM,EACnC,MAAM,CAAC,aAAa,eAAe,EACrC,CAAC;AAED,IAAa,aAAa,OAAO,MAAM;CACrC,MAAM,CAAC,eAAe,WAAW;CACjC,UAAU;EACR,MAAM;GACJ,IAAI;IAAC;IAAW;IAAiB;GAAkB;GACnD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;GACpD,IAAI;IAAC;IAAW;IAAkB;GAAkB;EACtD;EACA,WAAW,EACT,MAAM,CAAC,cAAc,EACvB;EACA,SAAS;GACP,MAAM;IACJ;IACA;IACA;IACA;IACA;GACF;GACA,OAAO;IAAC;IAAQ;IAAa;GAAe;EAC9C;CACF;AACF,CAAC;AAMD,IAAM,iBAAiB,EACrB,KACA,OAAO,MACP,YAAY,MACZ,UAAU,OACV,GAAG,WAEH,oBAAC,YAAD;CACO;CACL,IAAI,UAAU,OAAO;CACZ;CACH;CACK;CACX,GAAI;AACL,CAAA;AAGH,IAAa,OAAuB,uBAAO,OAAO,eAAe,EAC/D,MAAM,SACR,CAAC"}