@atom-learning/components 6.2.2 → 6.4.0

package/dist/components/field-wrapper/FieldDescription.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldDescription.js","sources":["../../../src/components/field-wrapper/FieldDescription.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Text } from '~/components/text'\n\nexport const Description = ({\n  children,\n  className\n}: React.PropsWithChildren<{ className?: string }>) => (\n  <Text size=\"sm\" className={clsx('text-grey-700', 'max-w-[80ch]', className)}>\n    {children}\n  </Text>\n)\n"],"names":["Description","children","className","React","Text","clsx"],"mappings":"mFAKO,MAAMA,EAAc,CAAC,CAC1B,SAAAC,EACA,UAAAC,CACF,IACEC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,UAAWC,EAAK,gBAAiB,eAAgBH,CAAS,GACvED,CACH"}
+{"version":3,"file":"FieldDescription.js","sources":["../../../src/components/field-wrapper/FieldDescription.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Text } from '~/components/text/Text'\n\nexport const Description = ({\n  children,\n  className\n}: React.PropsWithChildren<{ className?: string }>) => (\n  <Text size=\"sm\" className={clsx('text-grey-700', 'max-w-[80ch]', className)}>\n    {children}\n  </Text>\n)\n"],"names":["Description","children","className","React","Text","clsx"],"mappings":"mFAKO,MAAMA,EAAc,CAAC,CAC1B,SAAAC,EACA,UAAAC,CACF,IACEC,EAAA,cAACC,EAAA,CAAK,KAAK,KAAK,UAAWC,EAAK,gBAAiB,eAAgBH,CAAS,GACvED,CACH"}

package/dist/components/field-wrapper/FieldWrapper.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ValidationOptions } from '../../components/form';
+import { ValidationOptions } from '../../components/form/validation';
 import { type LabelProps } from '../label/Label';
 export type FieldWrapperProps = {
     className?: string;

package/dist/components/field-wrapper/FieldWrapper.js

@@ -1,2 +1,2 @@
-import*as f from"@radix-ui/react-visually-hidden";import*as r from"react";import{Flex as b}from"../flex/Flex.js";import{InlineMessage as u}from"../inline-message/InlineMessage.js";import{Label as E}from"../label/Label.js";import{Link as h}from"../link/Link.js";import{Description as k}from"./FieldDescription.js";const i=({children:l,error:t,fieldId:a,label:o,prompt:e,description:m,required:n,hideLabel:p,appearance:c,...s})=>{const d=p?f.Root:b;return r.createElement("div",{...s},r.createElement(d,{className:"mb-3 items-center justify-between"},r.createElement(E,{htmlFor:a,required:n,appearance:c},o),e&&r.createElement(h,{href:e==null?void 0:e.link,onClick:e==null?void 0:e.onClick,size:"sm"},e.label)),m&&r.createElement(k,{className:"mb-3"},m),l,t&&r.createElement(u,{className:"mt-2"},t))};i.displayName="FieldWrapper";export{i as FieldWrapper};
+import*as f from"@radix-ui/react-visually-hidden";import*as r from"react";import{InlineMessage as b}from"../inline-message/InlineMessage.js";import{Label as u}from"../label/Label.js";import{Link as E}from"../link/Link.js";import{Description as h}from"./FieldDescription.js";const l=({children:m,error:t,fieldId:a,label:o,prompt:e,description:i,required:n,hideLabel:p,appearance:c,...s})=>{const d=p?f.Root:"div";return r.createElement("div",{...s},r.createElement(d,{className:"mb-3 flex items-center justify-between"},r.createElement(u,{htmlFor:a,required:n,appearance:c},o),e&&r.createElement(E,{href:e==null?void 0:e.link,onClick:e==null?void 0:e.onClick,size:"sm"},e.label)),i&&r.createElement(h,{className:"mb-3"},i),m,t&&r.createElement(b,{className:"mt-2"},t))};l.displayName="FieldWrapper";export{l as FieldWrapper};
 //# sourceMappingURL=FieldWrapper.js.map

package/dist/components/field-wrapper/FieldWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldWrapper.js","sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { ValidationOptions } from '~/components/form'\nimport { InlineMessage } from '~/components/inline-message'\nimport { Label } from '~/components/label'\nimport { Link } from '~/components/link'\n\nimport { type LabelProps } from '../label/Label'\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n  className?: string\n  error?: string\n  fieldId: string\n  label: string\n  prompt?: { link?: string; label: string; onClick?: () => void }\n  description?: string\n  required?: boolean\n  hideLabel?: boolean\n  appearance?: LabelProps['appearance']\n}\n\nexport type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {\n  name: string\n  validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n  children,\n  error,\n  fieldId,\n  label,\n  prompt,\n  description,\n  required,\n  hideLabel,\n  appearance,\n  ...rest\n}: React.PropsWithChildren<FieldWrapperProps>) => {\n  const LabelContainer = hideLabel ? VisuallyHidden.Root : Flex\n\n  return (\n    <div {...rest}>\n      <LabelContainer className=\"mb-3 items-center justify-between\">\n        <Label htmlFor={fieldId} required={required} appearance={appearance}>\n          {label}\n        </Label>\n        {prompt && (\n          <Link href={prompt?.link} onClick={prompt?.onClick} size=\"sm\">\n            {prompt.label}\n          </Link>\n        )}\n      </LabelContainer>\n      {description && <Description className=\"mb-3\">{description}</Description>}\n      {children}\n      {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    </div>\n  )\n}\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"names":["FieldWrapper","children","error","fieldId","label","prompt","description","required","hideLabel","appearance","rest","LabelContainer","VisuallyHidden","Flex","React","Label","Link","Description","InlineMessage"],"mappings":"yTA6BO,MAAMA,EAAe,CAAC,CAC3B,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,WAAAC,EACA,GAAGC,CACL,IAAkD,CAChD,MAAMC,EAAiBH,EAAYI,EAAe,KAAOC,EAEzD,OACEC,EAAA,cAAC,MAAK,CAAA,GAAGJ,CACPI,EAAAA,EAAA,cAACH,EAAA,CAAe,UAAU,mCACxBG,EAAAA,EAAA,cAACC,EAAA,CAAM,QAASZ,EAAS,SAAUI,EAAU,WAAYE,CACtDL,EAAAA,CACH,EACCC,GACCS,EAAA,cAACE,EAAA,CAAK,KAAMX,GAAA,KAAAA,OAAAA,EAAQ,KAAM,QAASA,GAAA,KAAA,OAAAA,EAAQ,QAAS,KAAK,IAAA,EACtDA,EAAO,KACV,CAEJ,EACCC,GAAeQ,EAAA,cAACG,EAAA,CAAY,UAAU,MAAQX,EAAAA,CAAY,EAC1DL,EACAC,GAASY,EAAA,cAACI,EAAA,CAAc,UAAU,MAAQhB,EAAAA,CAAM,CACnD,CAEJ,EAEAF,EAAa,YAAc"}
+{"version":3,"file":"FieldWrapper.js","sources":["../../../src/components/field-wrapper/FieldWrapper.tsx"],"sourcesContent":["import * as VisuallyHidden from '@radix-ui/react-visually-hidden'\nimport * as React from 'react'\n\nimport { ValidationOptions } from '~/components/form/validation'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { Link } from '~/components/link/Link'\n\nimport { type LabelProps } from '../label/Label'\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n  className?: string\n  error?: string\n  fieldId: string\n  label: string\n  prompt?: { link?: string; label: string; onClick?: () => void }\n  description?: string\n  required?: boolean\n  hideLabel?: boolean\n  appearance?: LabelProps['appearance']\n}\n\nexport type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {\n  name: string\n  validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n  children,\n  error,\n  fieldId,\n  label,\n  prompt,\n  description,\n  required,\n  hideLabel,\n  appearance,\n  ...rest\n}: React.PropsWithChildren<FieldWrapperProps>) => {\n  const LabelContainer = hideLabel ? VisuallyHidden.Root : 'div'\n\n  return (\n    <div {...rest}>\n      <LabelContainer className=\"mb-3 flex items-center justify-between\">\n        <Label htmlFor={fieldId} required={required} appearance={appearance}>\n          {label}\n        </Label>\n        {prompt && (\n          <Link href={prompt?.link} onClick={prompt?.onClick} size=\"sm\">\n            {prompt.label}\n          </Link>\n        )}\n      </LabelContainer>\n      {description && <Description className=\"mb-3\">{description}</Description>}\n      {children}\n      {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    </div>\n  )\n}\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"names":["FieldWrapper","children","error","fieldId","label","prompt","description","required","hideLabel","appearance","rest","LabelContainer","VisuallyHidden","React","Label","Link","Description","InlineMessage"],"mappings":"kRA4Ba,MAAAA,EAAe,CAAC,CAC3B,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,WAAAC,EACA,GAAGC,CACL,IAAkD,CAChD,MAAMC,EAAiBH,EAAYI,EAAe,KAAO,MAEzD,OACEC,EAAA,cAAC,MAAK,CAAA,GAAGH,CACPG,EAAAA,EAAA,cAACF,EAAA,CAAe,UAAU,wCAAA,EACxBE,EAAA,cAACC,EAAA,CAAM,QAASX,EAAS,SAAUI,EAAU,WAAYE,CAAAA,EACtDL,CACH,EACCC,GACCQ,EAAA,cAACE,EAAA,CAAK,KAAMV,GAAA,KAAA,OAAAA,EAAQ,KAAM,QAASA,GAAA,KAAAA,OAAAA,EAAQ,QAAS,KAAK,IAAA,EACtDA,EAAO,KACV,CAEJ,EACCC,GAAeO,EAAA,cAACG,EAAA,CAAY,UAAU,MAAQV,EAAAA,CAAY,EAC1DL,EACAC,GAASW,EAAA,cAACI,EAAA,CAAc,UAAU,MAAQf,EAAAA,CAAM,CACnD,CAEJ,EAEAF,EAAa,YAAc"}

package/dist/components/field-wrapper/InlineFieldWrapper.js

@@ -1,2 +1,2 @@
-import o from"clsx";import*as r from"react";import{Checkbox as v}from"../checkbox/Checkbox.js";import{InlineMessage as u}from"../inline-message/InlineMessage.js";import{Label as f}from"../label/Label.js";import{RadioButton as N}from"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import{Description as y}from"./FieldDescription.js";const a=({align:n="start",children:p,className:s,description:l,direction:i="row",error:t,label:c,required:d})=>r.createElement("div",{className:s},r.createElement(f,{align:n,direction:i,required:d,type:"inline"},r.Children.map(p,e=>{var m;return r.createElement("div",{className:o(i==="reverse"&&"ml-3",i==="row"&&"mr-3",((e==null?void 0:e.type)===v||(e==null?void 0:e.type)===N)&&((m=e==null?void 0:e.props)==null?void 0:m.size)!=="lg"&&"translate-y-1")},e)}),c),t&&r.createElement(u,{className:"mt-2"},t),l&&r.createElement(y,{className:o("mt-2",i==="reverse"&&"mr-7",i==="row"&&"ml-7")},l));a.displayName="InlineFieldWrapper";export{a as InlineFieldWrapper};
+import o from"clsx";import*as r from"react";import{Checkbox as v}from"../checkbox/Checkbox.js";import{InlineMessage as u}from"../inline-message/InlineMessage.js";import{Label as f}from"../label/Label.js";import{RadioButton as N}from"../radio-button/RadioButton.js";import{Description as y}from"./FieldDescription.js";const a=({align:n="start",children:p,className:s,description:l,direction:i="row",error:t,label:c,required:d})=>r.createElement("div",{className:s},r.createElement(f,{align:n,direction:i,required:d,type:"inline"},r.Children.map(p,e=>{var m;return r.createElement("div",{className:o(i==="reverse"&&"ml-3",i==="row"&&"mr-3",((e==null?void 0:e.type)===v||(e==null?void 0:e.type)===N)&&((m=e==null?void 0:e.props)==null?void 0:m.size)!=="lg"&&"translate-y-1")},e)}),c),t&&r.createElement(u,{className:"mt-2"},t),l&&r.createElement(y,{className:o("mt-2",i==="reverse"&&"mr-7",i==="row"&&"ml-7")},l));a.displayName="InlineFieldWrapper";export{a as InlineFieldWrapper};
 //# sourceMappingURL=InlineFieldWrapper.js.map

package/dist/components/field-wrapper/InlineFieldWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineFieldWrapper.js","sources":["../../../src/components/field-wrapper/InlineFieldWrapper.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Checkbox } from '~/components/checkbox'\nimport { InlineMessage } from '~/components/inline-message'\nimport { Label } from '~/components/label'\nimport { RadioButton } from '~/components/radio-button'\n\nimport { Description } from './FieldDescription'\n\ntype InlineFieldWrapperProps = {\n  className?: string\n  error?: string\n  label: string\n  required?: boolean\n  align?: 'start' | 'center'\n  direction?: 'row' | 'reverse'\n  description?: string\n}\n\nexport const InlineFieldWrapper = ({\n  align = 'start',\n  children,\n  className,\n  description,\n  direction = 'row',\n  error,\n  label,\n  required\n}: React.PropsWithChildren<InlineFieldWrapperProps>) => (\n  <div className={className}>\n    <Label\n      align={align}\n      direction={direction}\n      required={required}\n      type=\"inline\"\n    >\n      {React.Children.map(children, (child: any) => (\n        <div\n          className={clsx(\n            direction === 'reverse' && 'ml-3',\n            direction === 'row' && 'mr-3',\n            (child?.type === Checkbox || child?.type === RadioButton) &&\n              child?.props?.size !== 'lg' &&\n              'translate-y-1'\n          )}\n        >\n          {child}\n        </div>\n      ))}\n      {label}\n    </Label>\n    {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    {description && (\n      <Description\n        className={clsx(\n          'mt-2',\n          direction === 'reverse' && 'mr-7',\n          direction === 'row' && 'ml-7'\n        )}\n      >\n        {description}\n      </Description>\n    )}\n  </div>\n)\n\nInlineFieldWrapper.displayName = 'InlineFieldWrapper'\n"],"names":["InlineFieldWrapper","align","children","className","description","direction","error","label","required","React","Label","child","_a","clsx","Checkbox","RadioButton","InlineMessage","Description"],"mappings":"yWAoBO,MAAMA,EAAqB,CAAC,CACjC,MAAAC,EAAQ,QACR,SAAAC,EACA,UAAAC,EACA,YAAAC,EACA,UAAAC,EAAY,MACZ,MAAAC,EACA,MAAAC,EACA,SAAAC,CACF,IACEC,EAAA,cAAC,MAAA,CAAI,UAAWN,CAAAA,EACdM,EAAA,cAACC,EAAA,CACC,MAAOT,EACP,UAAWI,EACX,SAAUG,EACV,KAAK,QAEJC,EAAAA,EAAM,SAAS,IAAIP,EAAWS,GAAY,CArCjD,IAAAC,EAsCQ,OAAAH,EAAA,cAAC,MACC,CAAA,UAAWI,EACTR,IAAc,WAAa,OAC3BA,IAAc,OAAS,SACtBM,GAAA,KAAA,OAAAA,EAAO,QAASG,IAAYH,GAAA,KAAAA,OAAAA,EAAO,QAASI,MAC3CH,EAAAD,GAAA,KAAA,OAAAA,EAAO,QAAP,KAAAC,OAAAA,EAAc,QAAS,MACvB,eACJ,CAECD,EAAAA,CACH,CACD,CAAA,EACAJ,CACH,EACCD,GAASG,EAAA,cAACO,EAAA,CAAc,UAAU,MAAA,EAAQV,CAAM,EAChDF,GACCK,EAAA,cAACQ,EAAA,CACC,UAAWJ,EACT,OACAR,IAAc,WAAa,OAC3BA,IAAc,OAAS,MACzB,CAECD,EAAAA,CACH,CAEJ,EAGFJ,EAAmB,YAAc"}
+{"version":3,"file":"InlineFieldWrapper.js","sources":["../../../src/components/field-wrapper/InlineFieldWrapper.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Checkbox } from '~/components/checkbox/Checkbox'\nimport { InlineMessage } from '~/components/inline-message/InlineMessage'\nimport { Label } from '~/components/label/Label'\nimport { RadioButton } from '~/components/radio-button/RadioButton'\n\nimport { Description } from './FieldDescription'\n\ntype InlineFieldWrapperProps = {\n  className?: string\n  error?: string\n  label: string\n  required?: boolean\n  align?: 'start' | 'center'\n  direction?: 'row' | 'reverse'\n  description?: string\n}\n\nexport const InlineFieldWrapper = ({\n  align = 'start',\n  children,\n  className,\n  description,\n  direction = 'row',\n  error,\n  label,\n  required\n}: React.PropsWithChildren<InlineFieldWrapperProps>) => (\n  <div className={className}>\n    <Label\n      align={align}\n      direction={direction}\n      required={required}\n      type=\"inline\"\n    >\n      {React.Children.map(children, (child: any) => (\n        <div\n          className={clsx(\n            direction === 'reverse' && 'ml-3',\n            direction === 'row' && 'mr-3',\n            (child?.type === Checkbox || child?.type === RadioButton) &&\n              child?.props?.size !== 'lg' &&\n              'translate-y-1'\n          )}\n        >\n          {child}\n        </div>\n      ))}\n      {label}\n    </Label>\n    {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    {description && (\n      <Description\n        className={clsx(\n          'mt-2',\n          direction === 'reverse' && 'mr-7',\n          direction === 'row' && 'ml-7'\n        )}\n      >\n        {description}\n      </Description>\n    )}\n  </div>\n)\n\nInlineFieldWrapper.displayName = 'InlineFieldWrapper'\n"],"names":["InlineFieldWrapper","align","children","className","description","direction","error","label","required","React","Label","child","_a","clsx","Checkbox","RadioButton","InlineMessage","Description"],"mappings":"6TAoBO,MAAMA,EAAqB,CAAC,CACjC,MAAAC,EAAQ,QACR,SAAAC,EACA,UAAAC,EACA,YAAAC,EACA,UAAAC,EAAY,MACZ,MAAAC,EACA,MAAAC,EACA,SAAAC,CACF,IACEC,EAAA,cAAC,MAAA,CAAI,UAAWN,CAAAA,EACdM,EAAA,cAACC,EAAA,CACC,MAAOT,EACP,UAAWI,EACX,SAAUG,EACV,KAAK,QAEJC,EAAAA,EAAM,SAAS,IAAIP,EAAWS,GAAY,CArCjD,IAAAC,EAsCQ,OAAAH,EAAA,cAAC,MACC,CAAA,UAAWI,EACTR,IAAc,WAAa,OAC3BA,IAAc,OAAS,SACtBM,GAAA,KAAA,OAAAA,EAAO,QAASG,IAAYH,GAAA,KAAAA,OAAAA,EAAO,QAASI,MAC3CH,EAAAD,GAAA,KAAA,OAAAA,EAAO,QAAP,KAAAC,OAAAA,EAAc,QAAS,MACvB,eACJ,CAECD,EAAAA,CACH,CACD,CAAA,EACAJ,CACH,EACCD,GAASG,EAAA,cAACO,EAAA,CAAc,UAAU,MAAA,EAAQV,CAAM,EAChDF,GACCK,EAAA,cAACQ,EAAA,CACC,UAAWJ,EACT,OACAR,IAAc,WAAa,OAC3BA,IAAc,OAAS,MACzB,CAECD,EAAAA,CACH,CAEJ,EAGFJ,EAAmB,YAAc"}

package/dist/components/file-drop/FileDrop.d.ts

@@ -1,15 +1,13 @@
 import * as React from 'react';
-import { Flex } from '../flex';
 import { type FileDropContextValue } from './types';
-interface FileDropProps extends Omit<React.ComponentProps<typeof Flex>, 'onDrop'> {
+interface FileDropProps extends Omit<React.ComponentProps<'div'>, 'onDrop' | 'ref'> {
     onDrop: (files: File[]) => void;
     children?: React.ReactNode | ((value: FileDropContextValue) => React.ReactNode);
     accept?: React.InputHTMLAttributes<HTMLInputElement>['accept'];
     multiple?: React.InputHTMLAttributes<HTMLInputElement>['multiple'];
-    className?: string;
 }
 export declare const FileDrop: {
-    ({ className, children, accept, multiple, onDrop, ...props }: FileDropProps): JSX.Element;
+    ({ children, accept, multiple, onDrop, ...props }: FileDropProps): React.JSX.Element;
     displayName: string;
 };
 export {};

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

@@ -1,2 +1,2 @@
-import x from"clsx";import*as r from"react";import{Flex as F}from"../flex/Flex.js";import{FileDropContext as h}from"./FileDropContext.js";const c=({className:p,children:n,accept:s,multiple:u,onDrop:m,...d})=>{const[f,o]=r.useState(!1),[v,D]=r.useState([]),l=r.useRef(null),g=e=>{e.preventDefault(),o(!0)},y=()=>o(!1),i=e=>{if(!e)return;o(!1);const t=Array.from(e);m(t),D(t)},b=e=>{var t;["Space","Enter"].includes(e.key)&&((t=l.current)==null||t.click())},a={isDragging:f,files:v};return r.createElement(h.Provider,{value:a},r.createElement(F,{direction:"column",gap:"24",align:"center",onDragOver:g,onDragLeave:y,onDrop:e=>{e.preventDefault(),i(e.dataTransfer.files)},onClick:()=>{var e;return(e=l.current)==null?void 0:e.click()},role:"button",onKeyDown:b,tabIndex:0,...d,className:x("border","border-dashed","border-grey-500","px-12","py-8","rounded-md","cursor-pointer","**:pointer-events-none",p)},typeof n=="function"?n(a):n,r.createElement("input",{type:"file",ref:l,style:{visibility:"hidden"},accept:s,multiple:u,onChange:e=>{i(e.target.files)}})))};c.displayName="FileDrop";export{c as FileDrop};
+import*as r from"react";import{styled as b}from"../../styled.js";import{FileDropContext as x}from"./FileDropContext.js";const h=b("div",{base:["flex","flex-col","gap-6","items-center","border","border-dashed","border-grey-500","px-12","py-8","rounded-md","cursor-pointer","**:pointer-events-none"]}),c=({children:n,accept:p,multiple:s,onDrop:u,...d})=>{const[f,o]=r.useState(!1),[m,v]=r.useState([]),l=r.useRef(null),y=e=>{e.preventDefault(),o(!0)},D=()=>o(!1),i=e=>{if(!e)return;o(!1);const t=Array.from(e);u(t),v(t)},g=e=>{var t;["Space","Enter"].includes(e.key)&&((t=l.current)==null||t.click())},a={isDragging:f,files:m};return r.createElement(x.Provider,{value:a},r.createElement(h,{onDragOver:y,onDragLeave:D,onDrop:e=>{e.preventDefault(),i(e.dataTransfer.files)},onClick:()=>{var e;return(e=l.current)==null?void 0:e.click()},role:"button",onKeyDown:g,tabIndex:0,...d},typeof n=="function"?n(a):n,r.createElement("input",{type:"file",ref:l,style:{visibility:"hidden"},accept:p,multiple:s,onChange:e=>{i(e.target.files)}})))};c.displayName="FileDrop";export{c as FileDrop};
 //# sourceMappingURL=FileDrop.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FileDrop.js","sources":["../../../src/components/file-drop/FileDrop.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { Flex } from '../flex'\nimport { FileDropContext } from './FileDropContext'\nimport { type FileDropContextValue } from './types'\n\ninterface FileDropProps\n  extends Omit<React.ComponentProps<typeof Flex>, 'onDrop'> {\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  className?: string\n}\n\nexport const FileDrop = ({\n  className,\n  children,\n  accept,\n  multiple,\n  onDrop,\n  ...props\n}: FileDropProps): JSX.Element => {\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 = Array.from(fileList)\n    onDrop(files)\n    setFiles(files)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (['Space', 'Enter'].includes(event.key)) {\n      fileUploadInputRef.current?.click()\n    }\n  }\n\n  const value: FileDropContextValue = { isDragging, files }\n\n  return (\n    <FileDropContext.Provider value={value}>\n      <Flex\n        direction=\"column\"\n        gap=\"24\"\n        align=\"center\"\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={(event) => {\n          event.preventDefault()\n          handleDrop(event.dataTransfer.files)\n        }}\n        onClick={() => fileUploadInputRef.current?.click()}\n        role=\"button\"\n        onKeyDown={handleKeyDown}\n        tabIndex={0}\n        {...props}\n        className={clsx(\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          className\n        )}\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      </Flex>\n    </FileDropContext.Provider>\n  )\n}\n\nFileDrop.displayName = 'FileDrop'\n"],"names":["FileDrop","className","children","accept","multiple","onDrop","props","isDragging","setIsDragging","React","files","setFiles","fileUploadInputRef","handleDragOver","event","handleDragLeave","handleDrop","fileList","handleKeyDown","_a","value","FileDropContext","Flex","clsx"],"mappings":"0IAkBa,MAAAA,EAAW,CAAC,CACvB,UAAAC,EACA,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,OAAAC,EACA,GAAGC,CACL,IAAkC,CAChC,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAS,EAAK,EAClD,CAACC,EAAOC,CAAQ,EAAIF,EAAM,SAAiB,CAAA,CAAE,EAC7CG,EAAqBH,EAAM,OAAyB,IAAI,EAExDI,EAAkBC,GAA2C,CACjEA,EAAM,eACNN,EAAAA,EAAc,EAAI,CACpB,EAEMO,EAAkB,IAAMP,EAAc,EAAK,EAE3CQ,EAAcC,GAA8B,CAChD,GAAI,CAACA,EAAU,OAEfT,EAAc,EAAK,EAEnB,MAAME,EAAQ,MAAM,KAAKO,CAAQ,EACjCZ,EAAOK,CAAK,EACZC,EAASD,CAAK,CAChB,EAEMQ,EAAiBJ,GAA+C,CA/CxE,IAAAK,EAgDQ,CAAC,QAAS,OAAO,EAAE,SAASL,EAAM,GAAG,KACvCK,EAAAP,EAAmB,UAAnB,MAAAO,EAA4B,MAAA,EAEhC,EAEMC,EAA8B,CAAE,WAAAb,EAAY,MAAAG,CAAM,EAExD,OACED,EAAA,cAACY,EAAgB,SAAhB,CAAyB,MAAOD,CAC/BX,EAAAA,EAAA,cAACa,EAAA,CACC,UAAU,SACV,IAAI,KACJ,MAAM,SACN,WAAYT,EACZ,YAAaE,EACb,OAASD,GAAU,CACjBA,EAAM,eAAA,EACNE,EAAWF,EAAM,aAAa,KAAK,CACrC,EACA,QAAS,IAAG,CAnEpB,IAAAK,EAmEuB,OAAAA,EAAAP,EAAmB,UAAnB,KAAA,OAAAO,EAA4B,MAAA,CAAA,EAC3C,KAAK,SACL,UAAWD,EACX,SAAU,EACT,GAAGZ,EACJ,UAAWiB,EACT,SACA,gBACA,kBACA,QACA,OACA,aACA,iBACA,yBACAtB,CACF,CAEC,EAAA,OAAOC,GAAa,WAAaA,EAASkB,CAAK,EAAIlB,EACpDO,EAAA,cAAC,QAAA,CACC,KAAK,OACL,IAAKG,EACL,MAAO,CAAE,WAAY,QAAS,EAC9B,OAAQT,EACR,SAAUC,EACV,SAAWU,GAAU,CACnBE,EAAWF,EAAM,OAAO,KAAK,CAC/B,CACF,CAAA,CACF,CACF,CAEJ,EAEAd,EAAS,YAAc"}
+{"version":3,"file":"FileDrop.js","sources":["../../../src/components/file-drop/FileDrop.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { FileDropContext } from './FileDropContext'\nimport { type FileDropContextValue } from './types'\n\ninterface FileDropProps extends Omit<\n  React.ComponentProps<'div'>,\n  'onDrop' | 'ref'\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  ...props\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 = Array.from(fileList)\n    onDrop(files)\n    setFiles(files)\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (['Space', 'Enter'].includes(event.key)) {\n      fileUploadInputRef.current?.click()\n    }\n  }\n\n  const value: FileDropContextValue = { isDragging, files }\n\n  return (\n    <FileDropContext.Provider 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        role=\"button\"\n        onKeyDown={handleKeyDown}\n        tabIndex={0}\n        {...props}\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.Provider>\n  )\n}\n\nFileDrop.displayName = 'FileDrop'\n"],"names":["StyledContainer","styled","FileDrop","children","accept","multiple","onDrop","props","isDragging","setIsDragging","React","files","setFiles","fileUploadInputRef","handleDragOver","event","handleDragLeave","handleDrop","fileList","handleKeyDown","_a","value","FileDropContext"],"mappings":"wHAmBA,MAAMA,EAAkBC,EAAO,MAAO,CACpC,KAAM,CACJ,OACA,WACA,QACA,eACA,SACA,gBACA,kBACA,QACA,OACA,aACA,iBACA,wBACF,CACF,CAAC,EAEYC,EAAW,CAAC,CACvB,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,OAAAC,EACA,GAAGC,CACL,IAAqB,CACnB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAAS,EAAK,EAClD,CAACC,EAAOC,CAAQ,EAAIF,EAAM,SAAiB,EAAE,EAC7CG,EAAqBH,EAAM,OAAyB,IAAI,EAExDI,EAAkBC,GAA2C,CACjEA,EAAM,iBACNN,EAAc,EAAI,CACpB,EAEMO,EAAkB,IAAMP,EAAc,EAAK,EAE3CQ,EAAcC,GAA8B,CAChD,GAAI,CAACA,EAAU,OAEfT,EAAc,EAAK,EAEnB,MAAME,EAAQ,MAAM,KAAKO,CAAQ,EACjCZ,EAAOK,CAAK,EACZC,EAASD,CAAK,CAChB,EAEMQ,EAAiBJ,GAA+C,CAhExE,IAAAK,EAiEQ,CAAC,QAAS,OAAO,EAAE,SAASL,EAAM,GAAG,KACvCK,EAAAP,EAAmB,UAAnB,MAAAO,EAA4B,QAEhC,EAEMC,EAA8B,CAAE,WAAAb,EAAY,MAAAG,CAAM,EAExD,OACED,EAAA,cAACY,EAAgB,SAAhB,CAAyB,MAAOD,CAC/BX,EAAAA,EAAA,cAACV,EAAA,CACC,WAAYc,EACZ,YAAaE,EACb,OAASD,GAAU,CACjBA,EAAM,eAAA,EACNE,EAAWF,EAAM,aAAa,KAAK,CACrC,EACA,QAAS,IAAG,CAjFpB,IAAAK,EAiFuB,OAAAA,EAAAP,EAAmB,UAAnB,YAAAO,EAA4B,MAAA,CAAA,EAC3C,KAAK,SACL,UAAWD,EACX,SAAU,EACT,GAAGZ,CAEH,EAAA,OAAOJ,GAAa,WAAaA,EAASkB,CAAK,EAAIlB,EACpDO,EAAA,cAAC,QAAA,CACC,KAAK,OACL,IAAKG,EACL,MAAO,CAAE,WAAY,QAAS,EAC9B,OAAQT,EACR,SAAUC,EACV,SAAWU,GAAU,CACnBE,EAAWF,EAAM,OAAO,KAAK,CAC/B,CACF,CAAA,CACF,CACF,CAEJ,EAEAb,EAAS,YAAc"}

package/dist/components/file-input/FileInput.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button } from '../button';
+import { Button } from '../button/Button';
 export type FileInputProps = React.ComponentProps<typeof Button> & {
     onFileSelect: (selection: FileList | null) => void;
     accept?: string;

package/dist/components/file-input/FileInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.js","sources":["../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { Upload } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { Button } from '../button'\nimport { Icon } from '../icon'\n\nexport type FileInputProps = React.ComponentProps<typeof Button> & {\n  onFileSelect: (selection: FileList | null) => void\n  accept?: string\n  multiple?: boolean\n}\n\nexport const FileInput = ({\n  accept,\n  children,\n  multiple = false,\n  onFileSelect,\n  ...rest\n}: FileInputProps) => {\n  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const { files } = event.target\n\n    onFileSelect(files)\n  }\n\n  return (\n    <Button as=\"label\" {...rest}>\n      <Icon is={Upload} />\n      {children}\n      <input\n        type=\"file\"\n        onChange={handleFileSelect}\n        accept={accept}\n        multiple={multiple}\n        hidden\n      />\n    </Button>\n  )\n}\n\nFileInput.displayName = 'FileInput'\n"],"names":["FileInput","accept","children","multiple","onFileSelect","rest","handleFileSelect","event","files","React","Button","Icon","Upload"],"mappings":"0JAYa,MAAAA,EAAY,CAAC,CACxB,OAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,GACX,aAAAC,EACA,GAAGC,CACL,IAAsB,CACpB,MAAMC,EAAoBC,GAA+C,CACvE,KAAM,CAAE,MAAAC,CAAM,EAAID,EAAM,OAExBH,EAAaI,CAAK,CACpB,EAEA,OACEC,EAAA,cAACC,EAAA,CAAO,GAAG,QAAS,GAAGL,CAAAA,EACrBI,EAAA,cAACE,EAAA,CAAK,GAAIC,CAAAA,CAAQ,EACjBV,EACDO,EAAA,cAAC,QAAA,CACC,KAAK,OACL,SAAUH,EACV,OAAQL,EACR,SAAUE,EACV,OAAM,EAAA,CACR,CACF,CAEJ,EAEAH,EAAU,YAAc"}
+{"version":3,"file":"FileInput.js","sources":["../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import { Upload } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { Button } from '../button/Button'\nimport { Icon } from '../icon/Icon'\n\nexport type FileInputProps = React.ComponentProps<typeof Button> & {\n  onFileSelect: (selection: FileList | null) => void\n  accept?: string\n  multiple?: boolean\n}\n\nexport const FileInput = ({\n  accept,\n  children,\n  multiple = false,\n  onFileSelect,\n  ...rest\n}: FileInputProps) => {\n  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const { files } = event.target\n\n    onFileSelect(files)\n  }\n\n  return (\n    <Button as=\"label\" {...rest}>\n      <Icon is={Upload} />\n      {children}\n      <input\n        type=\"file\"\n        onChange={handleFileSelect}\n        accept={accept}\n        multiple={multiple}\n        hidden\n      />\n    </Button>\n  )\n}\n\nFileInput.displayName = 'FileInput'\n"],"names":["FileInput","accept","children","multiple","onFileSelect","rest","handleFileSelect","event","files","React","Button","Icon","Upload"],"mappings":"0JAYa,MAAAA,EAAY,CAAC,CACxB,OAAAC,EACA,SAAAC,EACA,SAAAC,EAAW,GACX,aAAAC,EACA,GAAGC,CACL,IAAsB,CACpB,MAAMC,EAAoBC,GAA+C,CACvE,KAAM,CAAE,MAAAC,CAAM,EAAID,EAAM,OAExBH,EAAaI,CAAK,CACpB,EAEA,OACEC,EAAA,cAACC,EAAA,CAAO,GAAG,QAAS,GAAGL,CAAAA,EACrBI,EAAA,cAACE,EAAA,CAAK,GAAIC,CAAAA,CAAQ,EACjBV,EACDO,EAAA,cAAC,QAAA,CACC,KAAK,OACL,SAAUH,EACV,OAAQL,EACR,SAAUE,EACV,OAAM,EAAA,CACR,CACF,CAEJ,EAEAH,EAAU,YAAc"}

package/dist/components/flex/Flex.d.ts

@@ -1,11 +1,11 @@
 export declare const Flex: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "direction" | "align" | "wrap" | "justify" | "gap"> & {
-    direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
+}, "gap" | "wrap" | "direction" | "align" | "justify"> & {
+    direction?: ("row" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "column" | "column-reverse" | "row-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "column" | "column-reverse" | "row-reverse">>) | undefined;
     wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
-    justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
-    align?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline">>) | undefined;
-    gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
+    justify?: ("end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "normal" | "revert" | "revert-layer" | "unset" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "unsafe" | "safe" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "left" | "right" | "start" | "inherit" | "initial" | "center" | "normal" | "revert" | "revert-layer" | "unset" | "space-around" | "space-between" | "space-evenly" | "stretch" | "flex-end" | "flex-start" | "unsafe" | "safe">>) | undefined;
+    align?: ("end" | "start" | "inherit" | "baseline" | "initial" | "center" | "normal" | "self-start" | "revert" | "revert-layer" | "unset" | "stretch" | "flex-end" | "flex-start" | "self-end" | "unsafe" | "safe" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "baseline" | "initial" | "center" | "normal" | "self-start" | "revert" | "revert-layer" | "unset" | "stretch" | "flex-end" | "flex-start" | "self-end" | "unsafe" | "safe" | "first baseline" | "last baseline">>) | undefined;
+    gap?: (0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24>>) | undefined;
 } & {
     as?: import("react").ElementType;
 }>;

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

@@ -1 +1 @@
-{"version":3,"file":"Form.js","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  FormCustomContext,\n  type FormCustomContextType\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    ...rest\n  } = props\n\n  const methods = useForm<TFormData>({\n    defaultValues,\n    mode: validationMode\n  })\n\n  return (\n    <FormProvider {...methods}>\n      <FormCustomContext.Provider value={{ appearance }}>\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.Provider>\n    </FormProvider>\n  )\n}\n\nForm.displayName = 'Form'\n"],"names":["Form","props","children","defaultValues","validationMode","onSubmit","onError","appearance","rest","methods","useForm","React","FormProvider","FormCustomContext"],"mappings":"kJA8Ba,MAAAA,EACXC,GACG,CACH,KAAM,CACJ,SAAAC,EACA,cAAAC,EACA,eAAAC,EAAiB,SACjB,SAAAC,EACA,QAAAC,EACA,WAAAC,EACA,GAAGC,CACL,EAAIP,EAEEQ,EAAUC,EAAmB,CACjC,cAAAP,EACA,KAAMC,CACR,CAAC,EAED,OACEO,EAAA,cAACC,EAAA,CAAc,GAAGH,CAAAA,EAChBE,EAAA,cAACE,EAAkB,SAAlB,CAA2B,MAAO,CAAE,WAAAN,CAAW,CAC9CI,EAAAA,EAAA,cAAC,OACC,CAAA,aAAW,OACX,SAAUF,EAAQ,aAAaJ,EAAUC,CAAO,EAC/C,GAAGE,GAEH,OAAON,GAAa,WAAaA,EAASO,CAAO,EAAIP,CACxD,CACF,CACF,CAEJ,EAEAF,EAAK,YAAc"}
+{"version":3,"file":"Form.js","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    ...rest\n  } = props\n\n  const methods = useForm<TFormData>({\n    defaultValues,\n    mode: validationMode\n  })\n\n  return (\n    <FormProvider {...methods}>\n      <FormCustomContext.Provider value={{ appearance }}>\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.Provider>\n    </FormProvider>\n  )\n}\n\nForm.displayName = 'Form'\n"],"names":["Form","props","children","defaultValues","validationMode","onSubmit","onError","appearance","rest","methods","useForm","React","FormProvider","FormCustomContext"],"mappings":"kJA8Ba,MAAAA,EACXC,GACG,CACH,KAAM,CACJ,SAAAC,EACA,cAAAC,EACA,eAAAC,EAAiB,SACjB,SAAAC,EACA,QAAAC,EACA,WAAAC,EACA,GAAGC,CACL,EAAIP,EAEEQ,EAAUC,EAAmB,CACjC,cAAAP,EACA,KAAMC,CACR,CAAC,EAED,OACEO,EAAA,cAACC,EAAA,CAAc,GAAGH,CAAAA,EAChBE,EAAA,cAACE,EAAkB,SAAlB,CAA2B,MAAO,CAAE,WAAAN,CAAW,CAC9CI,EAAAA,EAAA,cAAC,OACC,CAAA,aAAW,OACX,SAAUF,EAAQ,aAAaJ,EAAUC,CAAO,EAC/C,GAAGE,GAEH,OAAON,GAAa,WAAaA,EAASO,CAAO,EAAIP,CACxD,CACF,CACF,CAEJ,EAEAF,EAAK,YAAc"}

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { InputField } from '../input-field';
+import { InputField } from '../input-field/InputField';
 export type FormCustomContextType = {
     appearance?: React.ComponentProps<typeof InputField>['appearance'];
 } | undefined;

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

@@ -1 +1 @@
-{"version":3,"file":"useFormCustomContext.js","sources":["../../../src/components/form/useFormCustomContext.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { InputField } from '../input-field'\n\nexport type FormCustomContextType =\n  | {\n      appearance?: React.ComponentProps<typeof InputField>['appearance']\n    }\n  | undefined\n\nexport const FormCustomContext = React.createContext<FormCustomContextType>({\n  appearance: 'standard'\n})\n\nexport const useFormCustomContext = () => React.useContext(FormCustomContext)\n"],"names":["FormCustomContext","React","useFormCustomContext"],"mappings":"wBAUa,MAAAA,EAAoBC,EAAM,cAAqC,CAC1E,WAAY,UACd,CAAC,EAEYC,EAAuB,IAAMD,EAAM,WAAWD,CAAiB"}
+{"version":3,"file":"useFormCustomContext.js","sources":["../../../src/components/form/useFormCustomContext.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { InputField } from '../input-field/InputField'\n\nexport type FormCustomContextType =\n  | {\n      appearance?: React.ComponentProps<typeof InputField>['appearance']\n    }\n  | undefined\n\nexport const FormCustomContext = React.createContext<FormCustomContextType>({\n  appearance: 'standard'\n})\n\nexport const useFormCustomContext = () => React.useContext(FormCustomContext)\n"],"names":["FormCustomContext","React","useFormCustomContext"],"mappings":"wBAUa,MAAAA,EAAoBC,EAAM,cAAqC,CAC1E,WAAY,UACd,CAAC,EAEYC,EAAuB,IAAMD,EAAM,WAAWD,CAAiB"}

package/dist/components/grid/Grid.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 declare const GridContainer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, "gap"> & {
-    gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
+    gap?: (0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | "0" | "1" | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "24" | 24>>) | undefined;
 } & {
     as?: React.ElementType;
 }>;

package/dist/components/grid/Grid.js

@@ -1,2 +1,2 @@
-import r from"clsx";import*as g from"react";import{styled as o}from"../../styled.js";const n=o("div",{base:["grid"],variants:{gap:{0:["gap-0.5"],1:["gap-1"],2:["gap-2"],3:["gap-3"],4:["gap-4"],24:["gap-6"],5:["gap-8"],6:["gap-10"],7:["gap-12"],8:["gap-16"],9:["gap-20"]}}},{enabledResponsiveVariants:!0}),i=({className:m,style:t,gap:p="2",minItemSize:a,maxItemSize:e="1fr",...s})=>g.createElement(n,{...s,style:{...t,...a&&{"--min-item-size":a},...e&&{"--max-item-size":e}},gap:p,className:r(a&&["grid-cols-[repeat(auto-fit,minmax(var(--min-item-size,0),var(--max-item-size,0)))]"],m)});i.displayName="Grid";export{i as Grid};
+import r from"clsx";import*as g from"react";import{styled as o}from"../../styled.js";const n=o("div",{base:["grid"],variants:{gap:{0:["gap-0.5"],1:["gap-1"],2:["gap-2"],3:["gap-3"],4:["gap-4"],24:["gap-6"],5:["gap-8"],6:["gap-10"],7:["gap-12"],8:["gap-16"],9:["gap-20"]}}},{enabledResponsiveVariants:!0}),i=({className:m,style:p,gap:t="2",minItemSize:a,maxItemSize:e="1fr",...s})=>g.createElement(n,{...s,style:{...p,...a&&{"--min-item-size":a},...e&&{"--max-item-size":e}},gap:t,className:r(a&&["grid-cols-[repeat(auto-fit,minmax(var(--min-item-size,0),var(--max-item-size,0)))]"],m)});i.displayName="Grid";export{i as Grid};
 //# sourceMappingURL=Grid.js.map

package/dist/components/heading/Heading.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Override } from '../../utilities';
+import type { Override } from '../../utilities/types';
 export declare const StyledHeading: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
     ref?: ((instance: HTMLHeadingElement | null) => void) | React.RefObject<HTMLHeadingElement> | null | undefined;
 }, "size" | "noCapsize" | "weight"> & {

package/dist/components/heading/Heading.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as s}from"../../styled.js";const a=s("h2",{base:["m-0"],variants:{size:{xs:["font-body","text-md","leading-normal","capsize-[0.3864]"],sm:["font-body","text-lg","leading-[1.14]","capsize-[0.2078]"],md:["font-display","text-xl","leading-[1.14]","tracking-[0.01em]","capsize-before-[0.2114]","capsize-after-[0.2634]"],lg:["font-display","text-2xl","leading-[1.08]","tracking-[0.01em]","capsize-before-[0.1405]","capsize-after-[0.2405]"],xl:["font-display","text-3xl","leading-[1.12]","capsize-before-[0.16]","capsize-after-[0.26]"],xxl:["font-display","text-4xl","leading-none","capsize-before-[0.1]","capsize-after-[0.2]"]},noCapsize:{true:["before:hidden!","after:hidden!"]},weight:{medium:["font-medium"],bold:["font-bold"]}}},{enabledResponsiveVariants:!0}),i=e.forwardRef(({size:t="md",weight:d="bold",...n},o)=>e.createElement(a,{ref:o,size:t,weight:d,...n}));i.displayName="Heading";export{i as Heading,a as StyledHeading};
+import*as e from"react";import{styled as d}from"../../styled.js";const a=d("h2",{base:[],variants:{size:{xs:["font-body","text-md","leading-normal","capsize-[0.3864]"],sm:["font-body","text-lg","leading-[1.14]","capsize-[0.2078]"],md:["font-display","text-xl","leading-[1.14]","tracking-[0.01em]","capsize-before-[0.2114]","capsize-after-[0.2634]"],lg:["font-display","text-2xl","leading-[1.08]","tracking-[0.01em]","capsize-before-[0.1405]","capsize-after-[0.2405]"],xl:["font-display","text-3xl","leading-[1.12]","capsize-before-[0.16]","capsize-after-[0.26]"],xxl:["font-display","text-4xl","leading-none","capsize-before-[0.1]","capsize-after-[0.2]"]},noCapsize:{true:["capsize-none"]},weight:{medium:["font-medium"],bold:["font-bold"]}}},{enabledResponsiveVariants:!0}),i=e.forwardRef(({size:t="md",weight:n="bold",...s},o)=>e.createElement(a,{ref:o,size:t,weight:n,...s}));i.displayName="Heading";export{i as Heading,a as StyledHeading};
 //# sourceMappingURL=Heading.js.map

package/dist/components/heading/Heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.js","sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities'\n\nexport const StyledHeading = styled(\n  'h2',\n  {\n    base: ['m-0'],\n    variants: {\n      size: {\n        xs: ['font-body', 'text-md', 'leading-normal', 'capsize-[0.3864]'],\n        sm: ['font-body', 'text-lg', 'leading-[1.14]', 'capsize-[0.2078]'],\n        md: [\n          'font-display',\n          'text-xl',\n          'leading-[1.14]',\n          'tracking-[0.01em]',\n          'capsize-before-[0.2114]',\n          'capsize-after-[0.2634]'\n        ],\n        lg: [\n          'font-display',\n          'text-2xl',\n          'leading-[1.08]',\n          'tracking-[0.01em]',\n          'capsize-before-[0.1405]',\n          'capsize-after-[0.2405]'\n        ],\n        xl: [\n          'font-display',\n          'text-3xl',\n          'leading-[1.12]',\n          'capsize-before-[0.16]',\n          'capsize-after-[0.26]'\n        ],\n        xxl: [\n          'font-display',\n          'text-4xl',\n          'leading-none',\n          'capsize-before-[0.1]',\n          'capsize-after-[0.2]'\n        ]\n      },\n      noCapsize: {\n        true: ['before:hidden!', 'after:hidden!']\n      },\n      weight: {\n        medium: ['font-medium'],\n        bold: ['font-bold']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nexport type HeadingProps = Override<\n  React.ComponentProps<typeof StyledHeading>,\n  {\n    as?:\n      | 'h1'\n      | 'h2'\n      | 'h3'\n      | 'h4'\n      | 'h5'\n      | 'h6'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n\nexport const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(\n  ({ size = 'md', weight = 'bold', ...remainingProps }, ref) => (\n    <StyledHeading ref={ref} size={size} weight={weight} {...remainingProps} />\n  )\n)\n\nHeading.displayName = 'Heading'\n"],"names":["StyledHeading","styled","Heading","React","size","weight","remainingProps","ref"],"mappings":"iEAKO,MAAMA,EAAgBC,EAC3B,KACA,CACE,KAAM,CAAC,KAAK,EACZ,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,YAAa,UAAW,iBAAkB,kBAAkB,EACjE,GAAI,CAAC,YAAa,UAAW,iBAAkB,kBAAkB,EACjE,GAAI,CACF,eACA,UACA,iBACA,oBACA,0BACA,wBACF,EACA,GAAI,CACF,eACA,WACA,iBACA,oBACA,0BACA,wBACF,EACA,GAAI,CACF,eACA,WACA,iBACA,wBACA,sBACF,EACA,IAAK,CACH,eACA,WACA,eACA,uBACA,qBACF,CACF,EACA,UAAW,CACT,KAAM,CAAC,iBAAkB,eAAe,CAC1C,EACA,OAAQ,CACN,OAAQ,CAAC,aAAa,EACtB,KAAM,CAAC,WAAW,CACpB,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAiBaC,EAAUC,EAAM,WAC3B,CAAC,CAAE,KAAAC,EAAO,KAAM,OAAAC,EAAS,OAAQ,GAAGC,CAAe,EAAGC,IACpDJ,EAAA,cAACH,EAAc,CAAA,IAAKO,EAAK,KAAMH,EAAM,OAAQC,EAAS,GAAGC,CAAgB,CAAA,CAE7E,EAEAJ,EAAQ,YAAc"}
+{"version":3,"file":"Heading.js","sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport type { Override } from '~/utilities/types'\n\nexport const StyledHeading = styled(\n  'h2',\n  {\n    base: [],\n    variants: {\n      size: {\n        xs: ['font-body', 'text-md', 'leading-normal', 'capsize-[0.3864]'],\n        sm: ['font-body', 'text-lg', 'leading-[1.14]', 'capsize-[0.2078]'],\n        md: [\n          'font-display',\n          'text-xl',\n          'leading-[1.14]',\n          'tracking-[0.01em]',\n          'capsize-before-[0.2114]',\n          'capsize-after-[0.2634]'\n        ],\n        lg: [\n          'font-display',\n          'text-2xl',\n          'leading-[1.08]',\n          'tracking-[0.01em]',\n          'capsize-before-[0.1405]',\n          'capsize-after-[0.2405]'\n        ],\n        xl: [\n          'font-display',\n          'text-3xl',\n          'leading-[1.12]',\n          'capsize-before-[0.16]',\n          'capsize-after-[0.26]'\n        ],\n        xxl: [\n          'font-display',\n          'text-4xl',\n          'leading-none',\n          'capsize-before-[0.1]',\n          'capsize-after-[0.2]'\n        ]\n      },\n      noCapsize: {\n        true: ['capsize-none']\n      },\n      weight: {\n        medium: ['font-medium'],\n        bold: ['font-bold']\n      }\n    }\n  },\n  {\n    enabledResponsiveVariants: true\n  }\n)\n\nexport type HeadingProps = Override<\n  React.ComponentProps<typeof StyledHeading>,\n  {\n    as?:\n      | 'h1'\n      | 'h2'\n      | 'h3'\n      | 'h4'\n      | 'h5'\n      | 'h6'\n      | React.ComponentType\n      | React.ElementType\n  }\n>\n\nexport const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(\n  ({ size = 'md', weight = 'bold', ...remainingProps }, ref) => (\n    <StyledHeading ref={ref} size={size} weight={weight} {...remainingProps} />\n  )\n)\n\nHeading.displayName = 'Heading'\n"],"names":["StyledHeading","styled","Heading","React","size","weight","remainingProps","ref"],"mappings":"iEAKO,MAAMA,EAAgBC,EAC3B,KACA,CACE,KAAM,CAAA,EACN,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,YAAa,UAAW,iBAAkB,kBAAkB,EACjE,GAAI,CAAC,YAAa,UAAW,iBAAkB,kBAAkB,EACjE,GAAI,CACF,eACA,UACA,iBACA,oBACA,0BACA,wBACF,EACA,GAAI,CACF,eACA,WACA,iBACA,oBACA,0BACA,wBACF,EACA,GAAI,CACF,eACA,WACA,iBACA,wBACA,sBACF,EACA,IAAK,CACH,eACA,WACA,eACA,uBACA,qBACF,CACF,EACA,UAAW,CACT,KAAM,CAAC,cAAc,CACvB,EACA,OAAQ,CACN,OAAQ,CAAC,aAAa,EACtB,KAAM,CAAC,WAAW,CACpB,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAiBaC,EAAUC,EAAM,WAC3B,CAAC,CAAE,KAAAC,EAAO,KAAM,OAAAC,EAAS,OAAQ,GAAGC,CAAe,EAAGC,IACpDJ,EAAA,cAACH,EAAc,CAAA,IAAKO,EAAK,KAAMH,EAAM,OAAQC,EAAS,GAAGC,CAAgB,CAAA,CAE7E,EAEAJ,EAAQ,YAAc"}

package/dist/components/image/Image.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as s}from"../../styled.js";const a=s("img",{base:["align-middle","max-w-full"],variants:{fluid:{true:["[[src$='.svg']]:h-auto","[[src$='.svg']]:max-w-none","[[src$='.svg']]:w-full","[[width]]:[[height]]:h-auto","[[width]]:w-auto"]}}}),t=e.forwardRef((r,m)=>e.createElement(a,{...r,ref:m}));t.displayName="Image";export{t as Image,a as StyledImage};
+import*as e from"react";import{styled as m}from"../../styled.js";const t=m("img",{base:[],variants:{fluid:{true:["[[src$='.svg']]:h-auto","[[src$='.svg']]:max-w-none","[[src$='.svg']]:w-full","[[width]]:[[height]]:h-auto","[[width]]:w-auto"]}}}),a=e.forwardRef((r,s)=>e.createElement(t,{...r,ref:s}));a.displayName="Image";export{a as Image,t as StyledImage};
 //# sourceMappingURL=Image.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../../../src/components/image/Image.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\n// default styling lifted from https://www.zachleat.com/web/fluid-images/#copy-and-paste\nexport const StyledImage = styled('img', {\n  base: ['align-middle', 'max-w-full'],\n  variants: {\n    fluid: {\n      true: [\n        \"[[src$='.svg']]:h-auto\",\n        \"[[src$='.svg']]:max-w-none\",\n        \"[[src$='.svg']]:w-full\",\n        '[[width]]:[[height]]:h-auto',\n        '[[width]]:w-auto'\n      ]\n    }\n  }\n})\n\ntype ImageProps = Override<\n  React.ComponentProps<typeof StyledImage>,\n  { as?: never }\n>\n\nexport const Image = React.forwardRef<HTMLImageElement, ImageProps>(\n  (props, ref) => <StyledImage {...props} ref={ref} />\n)\n\nImage.displayName = 'Image'\n"],"names":["StyledImage","styled","Image","React","props","ref"],"mappings":"iEAMO,MAAMA,EAAcC,EAAO,MAAO,CACvC,KAAM,CAAC,eAAgB,YAAY,EACnC,SAAU,CACR,MAAO,CACL,KAAM,CACJ,yBACA,6BACA,yBACA,8BACA,kBACF,CACF,CACF,CACF,CAAC,EAOYC,EAAQC,EAAM,WACzB,CAACC,EAAOC,IAAQF,EAAA,cAACH,GAAa,GAAGI,EAAO,IAAKC,CAAK,CAAA,CACpD,EAEAH,EAAM,YAAc"}
+{"version":3,"file":"Image.js","sources":["../../../src/components/image/Image.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\n// default styling lifted from https://www.zachleat.com/web/fluid-images/#copy-and-paste\n// (potentially unnecessary now we've moved to Tailwind)\nexport const StyledImage = styled('img', {\n  base: [],\n  variants: {\n    fluid: {\n      true: [\n        \"[[src$='.svg']]:h-auto\",\n        \"[[src$='.svg']]:max-w-none\",\n        \"[[src$='.svg']]:w-full\",\n        '[[width]]:[[height]]:h-auto',\n        '[[width]]:w-auto'\n      ]\n    }\n  }\n})\n\ntype ImageProps = Override<\n  React.ComponentProps<typeof StyledImage>,\n  { as?: never }\n>\n\nexport const Image = React.forwardRef<HTMLImageElement, ImageProps>(\n  (props, ref) => <StyledImage {...props} ref={ref} />\n)\n\nImage.displayName = 'Image'\n"],"names":["StyledImage","styled","Image","React","props","ref"],"mappings":"iEAOO,MAAMA,EAAcC,EAAO,MAAO,CACvC,KAAM,CAAA,EACN,SAAU,CACR,MAAO,CACL,KAAM,CACJ,yBACA,6BACA,yBACA,8BACA,kBACF,CACF,CACF,CACF,CAAC,EAOYC,EAAQC,EAAM,WACzB,CAACC,EAAOC,IAAQF,EAAA,cAACH,GAAa,GAAGI,EAAO,IAAKC,CAAK,CAAA,CACpD,EAEAH,EAAM,YAAc"}

package/dist/components/index.d.ts

@@ -1,88 +1,98 @@
-export type { ValidationOptions } from './form';
-export { Accordion } from './accordion';
-export { ActionIcon } from './action-icon';
-export { AlertDialog, useAlert, AlertProvider } from './alert-dialog';
-export { Avatar } from './avatar';
-export { Badge } from './badge';
-export { BannerRegular, BannerSlim } from './banner';
-export { Box } from './box';
-export { Button, StyledButton } from './button';
-export { Carousel, useCarousel } from './carousel';
-export { Checkbox } from './checkbox';
-export { CheckboxGroup } from './checkbox-group';
-export { CheckboxTree } from './checkbox-tree';
-export { CheckboxField } from './checkbox-field';
-export { Chip, ChipGroup } from './chip';
+export type { ValidationOptions } from './form/validation';
+export { Accordion } from './accordion/Accordion';
+export { ActionIcon } from './action-icon/ActionIcon';
+export { AlertDialog } from './alert-dialog/AlertDialog';
+export { useAlert, AlertProvider } from './alert-dialog/alert-context/AlertContext';
+export { Avatar } from './avatar/Avatar';
+export { Badge } from './badge/Badge';
+export { BannerRegular } from './banner/banner-regular/BannerRegular';
+export { BannerSlim } from './banner/banner-slim/BannerSlim';
+export { Box } from './box/Box';
+export { Button, StyledButton } from './button/Button';
+export { Carousel, useCarousel } from './carousel/Carousel';
+export { Checkbox } from './checkbox/Checkbox';
+export { CheckboxGroup } from './checkbox-group/CheckboxGroup';
+export { CheckboxTree } from './checkbox-tree/CheckboxTree';
+export { CheckboxField } from './checkbox-field/CheckboxField';
+export { Chip } from './chip/Chip';
+export { ChipGroup } from './chip/ChipGroup';
 export { ChipDismissibleGroup } from './chip-dismissible-group';
 export { ChipToggleGroup } from './chip-toggle-group';
-export { Combobox } from './combobox';
-export { CreatePasswordField } from './create-password-field';
-export { DataTable, useDataTable } from './data-table';
-export { DateField } from './date-field';
-export { DateInput } from './date-input';
-export { Dialog } from './dialog';
+export { Combobox } from './combobox/Combobox';
+export { CreatePasswordField } from './create-password-field/CreatePasswordField';
+export { DataTable } from './data-table/DataTable';
+export { useDataTable } from './data-table/DataTableContext';
+export { DateField } from './date-field/DateField';
+export { DateInput } from './date-input/DateInput';
+export { Dialog } from './dialog/Dialog';
 export { Dismissible } from './dismissible';
 export { DismissibleGroup } from './dismissible-group';
-export { Divider } from './divider';
-export { Drawer } from './drawer';
-export { DropdownMenu } from './dropdown-menu';
-export { EmptyState } from './empty-state';
-export { FieldWrapper, InlineFieldWrapper } from './field-wrapper';
-export { FileInput } from './file-input';
-export { Flex } from './flex';
-export { Form } from './form';
-export { Grid } from './grid';
-export { Heading } from './heading';
-export { Icon } from './icon';
-export { Image } from './image';
-export { InlineMessage } from './inline-message';
-export { Input, InputBackground, InputText } from './input';
-export { InputField } from './input-field';
-export { Label } from './label';
-export { Link, StyledLink } from './link';
-export { List } from './list';
-export { Loader } from './loader';
-export { MarkdownContent } from './markdown-content';
-export { NavigationMenu } from './navigation';
-export { NavigationMenuVertical } from './navigation-menu-vertical';
-export { NotificationBadge } from './notification-badge';
-export { NumberInput } from './number-input';
-export { NumberInputField } from './number-input-field';
-export { Pagination } from './pagination';
-export { PasswordField } from './password-field';
-export { PasswordInput } from './password-input';
-export { Popover } from './popover';
-export { ProgressBar } from './progress-bar';
-export { RadioButton, RadioButtonGroup } from './radio-button';
-export { RadioButtonField } from './radio-button-field';
-export { RadioCard, RadioCardGroup } from './radio-card';
-export { SearchField } from './search-field';
-export { SearchInput } from './search-input';
-export { SectionMessage } from './section-message';
-export { Select } from './select';
-export { SelectField } from './select-field';
-export { SideBar, useSidebarState } from './side-bar';
-export { Slider } from './slider';
-export { SliderField } from './slider-field';
+export { Divider } from './divider/Divider';
+export { Drawer } from './drawer/Drawer';
+export { DropdownMenu } from './dropdown-menu/DropdownMenu';
+export { EmptyState } from './empty-state/EmptyState';
+export { FieldWrapper } from './field-wrapper/FieldWrapper';
+export { InlineFieldWrapper } from './field-wrapper/InlineFieldWrapper';
+export { FileInput } from './file-input/FileInput';
+export { Flex } from './flex/Flex';
+export { Form } from './form/Form';
+export { Grid } from './grid/Grid';
+export { Heading } from './heading/Heading';
+export { Icon } from './icon/Icon';
+export { Image } from './image/Image';
+export { InlineMessage } from './inline-message/InlineMessage';
+export { Input, InputBackground, InputText } from './input/Input';
+export { InputField } from './input-field/InputField';
+export { Label } from './label/Label';
+export { Link, StyledLink } from './link/Link';
+export { List } from './list/List';
+export { Loader } from './loader/Loader';
+export { MarkdownContent } from './markdown-content/MarkdownContent';
+export { NavigationMenu } from './navigation/NavigationMenu';
+export { NavigationMenuVertical } from './navigation-menu-vertical/NavigationMenuVertical';
+export { NotificationBadge } from './notification-badge/NotificationBadge';
+export { NumberInput } from './number-input/NumberInput';
+export { NumberInputField } from './number-input-field/NumberInputField';
+export { Pagination } from './pagination/Pagination';
+export { PasswordField } from './password-field/PasswordField';
+export { PasswordInput } from './password-input/PasswordInput';
+export { Popover } from './popover/Popover';
+export { ProgressBar } from './progress-bar/ProgressBar';
+export { RadioButton } from './radio-button/RadioButton';
+export { RadioButtonGroup } from './radio-button/RadioButtonGroup';
+export { RadioButtonField } from './radio-button-field/RadioButtonField';
+export { RadioCard } from './radio-card/RadioCard';
+export { RadioCardGroup } from './radio-card/RadioCardGroup';
+export { SearchField } from './search-field/SearchField';
+export { SearchInput } from './search-input/SearchInput';
+export { SectionMessage } from './section-message/SectionMessage';
+export { Select } from './select/Select';
+export { SelectField } from './select-field/SelectField';
+export { SideBar } from './side-bar/SideBar';
+export { useSidebarState } from './side-bar/SideBarContext';
+export { Slider } from './slider/Slider';
+export { SliderField } from './slider-field/SliderField';
+export * as Sortable from './sortable';
 export * as Skeleton from './skeleton-loader';
-export { Sortable } from './sortable';
-export { Spacer } from './spacer';
-export { Stepper } from './stepper';
-export { Switch } from './switch';
-export { Table } from './table';
-export { Tabs } from './tabs';
-export { Text } from './text';
-export { Textarea } from './textarea';
-export { TextareaField } from './textarea-field';
-export { Tile, TileGroup } from './tile';
-export { TileInteractive } from './tile-interactive';
+export { Spacer } from './spacer/Spacer';
+export { Stepper } from './stepper/Stepper';
+export { Switch } from './switch/Switch';
+export { Table } from './table/Table';
+export { Tabs } from './tabs/Tabs';
+export { Text } from './text/Text';
+export { Textarea } from './textarea/Textarea';
+export { TextareaField } from './textarea-field/TextareaField';
+export { Tile } from './tile/Tile';
+export { TileInteractive } from './tile-interactive/TileInteractive';
 export { TileToggleGroup } from './tile-toggle-group';
-export { ToastProvider, Toast, toast } from './toast';
+export { ToastProvider, toast } from './toast/ToastProvider';
+export { Toast } from './toast/Toast';
 export { ToggleGroup } from './toggle-group';
-export { Tooltip } from './tooltip';
-export { TopBar } from './top-bar';
-export { Tree } from './tree';
-export { Video } from './video';
+export { Tooltip } from './tooltip/Tooltip';
+export { TopBar } from './top-bar/TopBar';
+export { Tree } from './tree/Tree';
+export { Video } from './video/Video';
 export { KeyboardShortcut } from './keyboard-shortcut';
-export { SegmentedControl } from './segmented-control';
-export { FileDrop, useFileDrop } from './file-drop';
+export { SegmentedControl } from './segmented-control/SegmentedControl';
+export { FileDrop } from './file-drop/FileDrop';
+export { useFileDrop } from './file-drop/useFileDrop';

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

@@ -1,16 +1,8 @@
 import * as React from 'react';
-declare const InlineMessageContainer: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const InlineMessageContainer: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "direction" | "align" | "wrap" | "justify" | "gap"> & {
-    direction?: ("row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "row" | "row-reverse" | "column" | "column-reverse" | "inherit" | "initial" | "revert" | "revert-layer" | "unset">>) | undefined;
-    wrap?: ("wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "wrap" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "nowrap" | "wrap-reverse">>) | undefined;
-    justify?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "left" | "right" | "space-between" | "space-around" | "space-evenly" | "stretch">>) | undefined;
-    align?: ("end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "end" | "start" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "normal" | "unsafe" | "safe" | "center" | "flex-start" | "flex-end" | "stretch" | "self-start" | "self-end" | "baseline" | "first baseline" | "last baseline">>) | undefined;
-    gap?: (0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24 | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", 0 | 1 | 2 | "0" | 3 | 4 | 5 | 6 | 7 | 8 | 9 | "1" | "2" | "3" | "4" | "24" | "5" | "6" | "7" | "8" | "9" | 24>>) | undefined;
-} & {
-    as?: React.ElementType;
 }, "theme"> & {
-    theme?: "warning" | "error" | "success" | "info" | "neutral" | undefined;
+    theme?: "neutral" | "success" | "warning" | "info" | "error" | undefined;
 } & {
     as?: React.ElementType;
 }>;

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

@@ -1,2 +1,2 @@
-import*as e from"react";import{Flex as o}from"../flex/Flex.js";import{Icon as i}from"../icon/Icon.js";import{Text as c}from"../text/Text.js";import{styled as l}from"../../styled.js";import{INLINE_MESSAGE_ICONS as x}from"./InlineMessage.config.js";const f=l(o,{base:[],variants:{theme:{success:["text-success"],warning:["[&_svg]:text-warning-dark","text-warning-text"],info:["text-info"],neutral:["text-grey-800"],error:["text-danger"]}}}),p=({className:r,showIcon:s=!0,theme:t="error",size:a="sm",children:m,...n})=>e.createElement(f,{theme:t,className:r,...n},s&&e.createElement(i,{size:"sm",is:x[t],className:"mr-2"}),e.createElement(c,{as:"span",size:a,className:"translate-y-0.5"},m));export{p as InlineMessage};
+import*as e from"react";import{Icon as o}from"../icon/Icon.js";import{Text as i}from"../text/Text.js";import{styled as c}from"../../styled.js";import{INLINE_MESSAGE_ICONS as l}from"./InlineMessage.config.js";const x=c("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"]}}}),f=({className:s,showIcon:r=!0,theme:t="error",size:a="sm",children:m,...n})=>e.createElement(x,{theme:t,className:s,...n},r&&e.createElement(o,{size:"sm",is:l[t],className:"mr-2"}),e.createElement(i,{as:"span",size:a,className:"translate-y-0.5"},m));export{f as InlineMessage};
 //# sourceMappingURL=InlineMessage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InlineMessage.js","sources":["../../../src/components/inline-message/InlineMessage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { Icon } from '~/components/icon'\nimport { Text } from '~/components/text'\nimport { styled } from '~/styled'\n\nimport { INLINE_MESSAGE_ICONS } from './InlineMessage.config'\nimport { InlineMessageTheme } from './InlineMessage.types'\n\nconst InlineMessageContainer = styled(Flex, {\n  base: [],\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 TInlineMessageProps = 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}: TInlineMessageProps) => (\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"],"names":["InlineMessageContainer","styled","Flex","InlineMessage","className","showIcon","theme","size","children","rest","React","Icon","INLINE_MESSAGE_ICONS","Text"],"mappings":"uPAUA,MAAMA,EAAyBC,EAAOC,EAAM,CAC1C,KAAM,GACN,SAAU,CACR,MAAO,CACL,QAAS,CAAC,cAAc,EACxB,QAAS,CAAC,4BAA6B,mBAAmB,EAC1D,KAAM,CAAC,WAAW,EAClB,QAAS,CAAC,eAAe,EACzB,MAAO,CAAC,aAAa,CACvB,CACF,CACF,CAAC,EASYC,EAAgB,CAAC,CAC5B,UAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,KAAAC,EAAO,KACP,SAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACV,EAAA,CAAuB,MAAOM,EAAO,UAAWF,EAAY,GAAGK,CAAAA,EAC7DJ,GACCK,EAAA,cAACC,EAAA,CACC,KAAK,KACL,GAAIC,EAAqBN,CAA2B,EACpD,UAAU,OACZ,EAEFI,EAAA,cAACG,EAAA,CAAK,GAAG,OAAO,KAAMN,EAAM,UAAU,iBACnCC,EAAAA,CACH,CACF"}
+{"version":3,"file":"InlineMessage.js","sources":["../../../src/components/inline-message/InlineMessage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Icon } from '~/components/icon/Icon'\nimport { Text } from '~/components/text/Text'\nimport { styled } from '~/styled'\n\nimport { INLINE_MESSAGE_ICONS } from './InlineMessage.config'\nimport { 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 TInlineMessageProps = 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}: TInlineMessageProps) => (\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"],"names":["InlineMessageContainer","styled","InlineMessage","className","showIcon","theme","size","children","rest","React","Icon","INLINE_MESSAGE_ICONS","Text"],"mappings":"gNASA,MAAMA,EAAyBC,EAAO,MAAO,CAC3C,KAAM,CAAC,MAAM,EACb,SAAU,CACR,MAAO,CACL,QAAS,CAAC,cAAc,EACxB,QAAS,CAAC,4BAA6B,mBAAmB,EAC1D,KAAM,CAAC,WAAW,EAClB,QAAS,CAAC,eAAe,EACzB,MAAO,CAAC,aAAa,CACvB,CACF,CACF,CAAC,EASYC,EAAgB,CAAC,CAC5B,UAAAC,EACA,SAAAC,EAAW,GACX,MAAAC,EAAQ,QACR,KAAAC,EAAO,KACP,SAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACT,EAAA,CAAuB,MAAOK,EAAO,UAAWF,EAAY,GAAGK,CAC7DJ,EAAAA,GACCK,EAAA,cAACC,EAAA,CACC,KAAK,KACL,GAAIC,EAAqBN,CAA2B,EACpD,UAAU,OACZ,EAEFI,EAAA,cAACG,EAAA,CAAK,GAAG,OAAO,KAAMN,EAAM,UAAU,iBACnCC,EAAAA,CACH,CACF"}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export declare const InputBackground: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "disabled" | "size" | "appearance" | "state"> & {
+}, "appearance" | "size" | "disabled" | "state"> & {
     appearance?: "standard" | "modern" | undefined;
     size?: "sm" | "md" | "lg" | "xl" | undefined;
     disabled?: boolean | undefined;
@@ -15,7 +15,7 @@ declare const StyledInputText: React.ForwardRefExoticComponent<Omit<Omit<Omit<Om
     size?: ("sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | "3xl" | "4xl">>) | undefined;
     noCapsize?: (boolean | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", boolean>>) | undefined;
     weight?: ("bold" | "normal" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "bold" | "normal">>) | undefined;
-    family?: ("body" | "display" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "body" | "display" | "mono">>) | undefined;
+    family?: ("display" | "body" | "mono" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "display" | "body" | "mono">>) | undefined;
 } & {
     as?: React.ElementType;
 }, "as"> & {

package/dist/components/input/Input.js

@@ -1,2 +1,2 @@
-import*as r from"react";import{styled as l}from"../../styled.js";import{overrideStyledVariantValue as m}from"../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";import{Text as b}from"../text/Text.js";const d=l("div",{base:["flex","text-grey-1000","transition-[background,border-color]","duration-100","ease-out","w-full"],variants:{appearance:{standard:["bg-white","border","border-grey-800","focus-within:border-blue-800","rounded-md"],modern:["bg-grey-100","border-none","focus-within:outline-2","focus-within:outline-blue-800","focus-within:outline-offset-1","focus-within:outline-solid","focus-within:z-1","rounded-md"]},size:{sm:["h-8"],md:["h-10"],lg:["h-12"],xl:["h-16"]},disabled:{true:["cursor-not-allowed","opacity-30"]},state:{error:[]}},compoundVariants:[{state:"error",appearance:"standard",class:["border-danger"]},{state:"error",appearance:"modern",class:["bg-danger-light","focus-within:outline-danger"]}]});d.displayName="InputBackground";const f=l(b,{base:["appearance-none","border-none","bg-none","bg-transparent","shadow-none","box-border","focus:outline-none","px-3","size-full","placeholder:opacity-100","placeholder:text-grey-700"]}),g={sm:"sm",md:"md",lg:"md",xl:"lg"},i=r.forwardRef(({type:e="text",size:t,...o},n)=>{const a=r.useMemo(()=>m(t,s=>g[s]),[t]);return r.createElement(f,{ref:n,as:"input",type:e==="number"?"text":e,inputMode:e==="number"?"numeric":void 0,pattern:e==="number"?"[0-9]*":void 0,size:a,...o})});i.displayName="InputText";const u=r.forwardRef(({className:e,size:t="md",appearance:o="standard",state:n,disabled:a,style:s,...c},p)=>r.createElement(d,{size:t,appearance:o,disabled:a,state:n,className:e,style:s},r.createElement(i,{size:t,ref:p,disabled:a,...c})));u.displayName="Input";export{u as Input,d as InputBackground,i as InputText};
+import*as t from"react";import{styled as l}from"../../styled.js";import{overrideStyledVariantValue as m}from"../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";import{Text as f}from"../text/Text.js";const d=l("div",{base:["flex","text-grey-1000","transition-[background,border-color]","duration-100","ease-out","w-full"],variants:{appearance:{standard:["bg-white","border","border-grey-800","focus-within:border-blue-800","rounded-md"],modern:["bg-grey-100","border-none","focus-within:outline-2","focus-within:outline-blue-800","focus-within:outline-offset-1","focus-within:outline-solid","focus-within:z-1","rounded-md"]},size:{sm:["h-8"],md:["h-10"],lg:["h-12"],xl:["h-16"]},disabled:{true:["cursor-not-allowed","opacity-30"]},state:{error:[]}},compoundVariants:[{state:"error",appearance:"standard",class:["border-danger"]},{state:"error",appearance:"modern",class:["bg-danger-light","focus-within:outline-danger"]}]});d.displayName="InputBackground";const b=l(f,{base:["appearance-none","bg-none","shadow-none","focus:outline-none","px-3","size-full","placeholder:opacity-100","placeholder:text-grey-700"]}),g={sm:"sm",md:"md",lg:"md",xl:"lg"},i=t.forwardRef(({type:e="text",size:r,...o},n)=>{const a=t.useMemo(()=>m(r,s=>g[s]),[r]);return t.createElement(b,{ref:n,as:"input",type:e==="number"?"text":e,inputMode:e==="number"?"numeric":void 0,pattern:e==="number"?"[0-9]*":void 0,size:a,...o})});i.displayName="InputText";const u=t.forwardRef(({className:e,size:r="md",appearance:o="standard",state:n,disabled:a,style:s,...c},p)=>t.createElement(d,{size:r,appearance:o,disabled:a,state:n,className:e,style:s},t.createElement(i,{size:r,ref:p,disabled:a,...c})));u.displayName="Input";export{u as Input,d as InputBackground,i as InputText};
 //# sourceMappingURL=Input.js.map