@atom-learning/components 5.4.4 → 5.5.0-beta.1

package/dist/components/create-password-field/CreatePasswordField.d.ts

@@ -12,7 +12,7 @@ type CreatePasswordFieldProps = Override<React.ComponentProps<typeof PasswordInp
     messageDirection?: CSS['flexDirection'];
 }>;
 export declare const CreatePasswordField: {
-    ({ validate, defaultValidation, messageDirection, label, name, css, validation, ...remainingProps }: CreatePasswordFieldProps): React.JSX.Element;
+    ({ validate, defaultValidation, messageDirection, label, name, css, validation, appearance, ...remainingProps }: CreatePasswordFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/create-password-field/CreatePasswordField.js

@@ -1,2 +1,2 @@
-import j from"invariant";import*as a from"react";import{useFormContext as E}from"react-hook-form";import{throttle as k}from"throttle-debounce";import{Box as P}from"../box/Box.js";import{Flex as S}from"../flex/Flex.js";import{InlineMessage as B}from"../inline-message/InlineMessage.js";import{PasswordField as D}from"../password-field/PasswordField.js";const c=({validate:d,defaultValidation:u,messageDirection:p="row",label:f="Create a password",name:r="password",css:v,validation:b,...w})=>{var s;const{formState:l}=E(),[i,n]=a.useState(!1),[C,m]=a.useState(u),g=l.touched[r],F=((s=l.errors[r])==null?void 0:s.type)==="validate",o=a.useCallback(async e=>{const t=await d(e);return t?(j(typeof t=="object","The validate function must return an object"),m(t),Object.values(t).every(h=>h)):!1},[m]),x=a.useCallback(k(500,o),[o]),y=(e,t)=>e?"success":t?"neutral":"error";return a.createElement(P,{css:v},a.createElement(D,{label:f,name:r,onChange:e=>x(e.target.value),onBlur:()=>n(!1),onFocus:()=>n(!0),validation:{...b,validate:o},...w}),(g||i||F)&&a.createElement(S,{css:{mt:"$2",gap:"$2",flexWrap:"wrap",flexDirection:p}},Object.entries(C).map(([e,t])=>a.createElement(B,{key:e,theme:y(t,i)},e))))};c.displayName="CreatePasswordField";export{c as CreatePasswordField};
+import E from"invariant";import*as a from"react";import{useFormContext as k}from"react-hook-form";import{throttle as B}from"throttle-debounce";import{Box as P}from"../box/Box.js";import{Flex as D}from"../flex/Flex.js";import{InlineMessage as I}from"../inline-message/InlineMessage.js";import{PasswordField as M}from"../password-field/PasswordField.js";const p=({validate:u,defaultValidation:f,messageDirection:v="row",label:b="Create a password",name:r="password",css:w,validation:y,appearance:C,...x})=>{var i;const{formState:o,control:n}=k(),[s,m]=a.useState(!1),[c,d]=a.useState(f),F=o.touched[r],g=((i=o.errors[r])==null?void 0:i.type)==="validate"||Object.values(c).every(e=>!e),l=a.useCallback(async e=>{const t=await u(e);return t?(E(typeof t=="object","The validate function must return an object"),d(t),Object.values(t).every(S=>S)):!1},[d]),h=a.useCallback(B(500,l),[l]),j=(e,t)=>e?"success":t?"neutral":"error",O=n.mode.isOnBlur&&(s||F)||n.mode.isOnSubmit&&(s||o.isSubmitted&&g);return a.createElement(P,{css:w},a.createElement(M,{label:b,name:r,onChange:e=>h(e.target.value),onBlur:()=>m(!1),onFocus:()=>m(!0),validation:{...y,validate:l},appearance:C,...x}),O&&a.createElement(D,{css:{mt:"$2",gap:"$2",flexWrap:"wrap",flexDirection:v}},Object.entries(c).map(([e,t])=>a.createElement(I,{key:e,theme:j(t,s)},e))))};p.displayName="CreatePasswordField";export{p as CreatePasswordField};
 //# sourceMappingURL=CreatePasswordField.js.map

package/dist/components/create-password-field/CreatePasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreatePasswordField.js","sources":["../../../src/components/create-password-field/CreatePasswordField.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { throttle } from 'throttle-debounce'\n\nimport type { CSS } from '~/stitches'\nimport { Override } from '~/utilities'\n\nimport { Box } from '../box'\nimport { FieldElementWrapperProps } from '../field-wrapper'\nimport { Flex } from '../flex'\nimport { InlineMessage } from '../inline-message'\nimport { PasswordField } from '../password-field'\nimport { PasswordInput } from '../password-input'\n\ntype ValidationResult = Record<string, boolean>\n\ntype CreatePasswordFieldProps = Override<\n  React.ComponentProps<typeof PasswordInput> & FieldElementWrapperProps,\n  {\n    label?: string\n    name?: string\n    validate: (\n      password: string\n    ) => Promise<ValidationResult | undefined> | ValidationResult\n    defaultValidation: ValidationResult\n    messageDirection?: CSS['flexDirection']\n  }\n>\n\nexport const CreatePasswordField = ({\n  validate,\n  defaultValidation,\n  messageDirection = 'row',\n  label = 'Create a password',\n  name = 'password',\n  css,\n  validation,\n  ...remainingProps\n}: CreatePasswordFieldProps) => {\n  const { formState } = useFormContext()\n  const [isFocused, setIsFocused] = React.useState<boolean>(false)\n  const [validationResult, setValidationResult] =\n    React.useState<ValidationResult>(defaultValidation)\n\n  const touched = formState.touched[name]\n  const error = formState.errors[name]?.type === 'validate'\n\n  const validatePassword = React.useCallback(\n    async (password: string) => {\n      const result = await validate(password)\n\n      if (result) {\n        invariant(\n          typeof result === 'object',\n          'The validate function must return an object'\n        )\n\n        setValidationResult(result)\n        return Object.values(result).every((isValid) => isValid)\n      }\n\n      return false\n    },\n    [setValidationResult]\n  )\n\n  const handleChange = React.useCallback(throttle(500, validatePassword), [\n    validatePassword\n  ])\n\n  const getMessageTheme = (result: boolean, isFocused: boolean) => {\n    if (result) return 'success'\n\n    return isFocused ? 'neutral' : 'error'\n  }\n\n  return (\n    <Box css={css}>\n      <PasswordField\n        label={label}\n        name={name}\n        onChange={(e) => handleChange(e.target.value)}\n        onBlur={() => setIsFocused(false)}\n        onFocus={() => setIsFocused(true)}\n        validation={{ ...validation, validate: validatePassword }}\n        {...remainingProps}\n      />\n      {(touched || isFocused || error) && (\n        <Flex\n          css={{\n            mt: '$2',\n            gap: '$2',\n            flexWrap: 'wrap',\n            flexDirection: messageDirection\n          }}\n        >\n          {Object.entries(validationResult).map(([message, result]) => (\n            <InlineMessage\n              key={message}\n              theme={getMessageTheme(result, isFocused)}\n            >\n              {message}\n            </InlineMessage>\n          ))}\n        </Flex>\n      )}\n    </Box>\n  )\n}\n\nCreatePasswordField.displayName = 'CreatePasswordField'\n"],"names":["CreatePasswordField","validate","defaultValidation","messageDirection","label","name","css","validation","remainingProps","_a","formState","useFormContext","isFocused","setIsFocused","React","validationResult","setValidationResult","touched","error","validatePassword","password","result","invariant","isValid","handleChange","throttle","getMessageTheme","Box","PasswordField","Flex","message","InlineMessage"],"mappings":"gWA8Ba,MAAAA,EAAsB,CAAC,CAClC,SAAAC,EACA,kBAAAC,EACA,iBAAAC,EAAmB,MACnB,MAAAC,EAAQ,oBACR,KAAAC,EAAO,WACP,IAAAC,EACA,WAAAC,KACGC,CACL,IAAgC,CAvChC,IAAAC,EAwCE,KAAM,CAAE,UAAAC,CAAU,EAAIC,EAAAA,EAChB,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzD,CAACC,EAAkBC,CAAmB,EAC1CF,EAAM,SAA2BZ,CAAiB,EAE9Ce,EAAUP,EAAU,QAAQL,GAC5Ba,IAAQT,EAAAC,EAAU,OAAOL,KAAjB,KAAA,OAAAI,EAAwB,QAAS,WAEzCU,EAAmBL,EAAM,YAC7B,MAAOM,GAAqB,CAC1B,MAAMC,EAAS,MAAMpB,EAASmB,CAAQ,EAEtC,OAAIC,GACFC,EACE,OAAOD,GAAW,SAClB,6CACF,EAEAL,EAAoBK,CAAM,EACnB,OAAO,OAAOA,CAAM,EAAE,MAAOE,GAAYA,CAAO,GAGlD,EACT,EACA,CAACP,CAAmB,CACtB,EAEMQ,EAAeV,EAAM,YAAYW,EAAS,IAAKN,CAAgB,EAAG,CACtEA,CACF,CAAC,EAEKO,EAAkB,CAACL,EAAiBT,IACpCS,EAAe,UAEZT,EAAY,UAAY,QAGjC,OACEE,EAAA,cAACa,EAAA,CAAI,IAAKrB,CAAAA,EACRQ,EAAA,cAACc,EAAA,CACC,MAAOxB,EACP,KAAMC,EACN,SAAW,GAAMmB,EAAa,EAAE,OAAO,KAAK,EAC5C,OAAQ,IAAMX,EAAa,EAAK,EAChC,QAAS,IAAMA,EAAa,EAAI,EAChC,WAAY,CAAE,GAAGN,EAAY,SAAUY,CAAiB,EACvD,GAAGX,CAAAA,CACN,GACES,GAAWL,GAAaM,IACxBJ,EAAA,cAACe,EAAA,CACC,IAAK,CACH,GAAI,KACJ,IAAK,KACL,SAAU,OACV,cAAe1B,CACjB,CAAA,EAEC,OAAO,QAAQY,CAAgB,EAAE,IAAI,CAAC,CAACe,EAAST,CAAM,IACrDP,EAAA,cAACiB,EAAA,CACC,IAAKD,EACL,MAAOJ,EAAgBL,EAAQT,CAAS,CAEvCkB,EAAAA,CACH,CACD,CACH,CAEJ,CAEJ,EAEA9B,EAAoB,YAAc"}
+{"version":3,"file":"CreatePasswordField.js","sources":["../../../src/components/create-password-field/CreatePasswordField.tsx"],"sourcesContent":["import invariant from 'invariant'\nimport * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\nimport { throttle } from 'throttle-debounce'\n\nimport type { CSS } from '~/stitches'\nimport { Override } from '~/utilities'\n\nimport { Box } from '../box'\nimport { FieldElementWrapperProps } from '../field-wrapper'\nimport { Flex } from '../flex'\nimport { InlineMessage } from '../inline-message'\nimport { PasswordField } from '../password-field'\nimport { PasswordInput } from '../password-input'\n\ntype ValidationResult = Record<string, boolean>\n\ntype CreatePasswordFieldProps = Override<\n  React.ComponentProps<typeof PasswordInput> & FieldElementWrapperProps,\n  {\n    label?: string\n    name?: string\n    validate: (\n      password: string\n    ) => Promise<ValidationResult | undefined> | ValidationResult\n    defaultValidation: ValidationResult\n    messageDirection?: CSS['flexDirection']\n  }\n>\n\nexport const CreatePasswordField = ({\n  validate,\n  defaultValidation,\n  messageDirection = 'row',\n  label = 'Create a password',\n  name = 'password',\n  css,\n  validation,\n  appearance,\n  ...remainingProps\n}: CreatePasswordFieldProps) => {\n  const { formState, control } = useFormContext()\n  const [isFocused, setIsFocused] = React.useState<boolean>(false)\n  const [validationResult, setValidationResult] =\n    React.useState<ValidationResult>(defaultValidation)\n\n  const touched: boolean = formState.touched[name]\n  const error =\n    formState.errors[name]?.type === 'validate' ||\n    Object.values(validationResult).every((isValid) => !isValid)\n\n  const validatePassword = React.useCallback(\n    async (password: string) => {\n      const result = await validate(password)\n\n      if (result) {\n        invariant(\n          typeof result === 'object',\n          'The validate function must return an object'\n        )\n\n        setValidationResult(result)\n        return Object.values(result).every((isValid) => isValid)\n      }\n\n      return false\n    },\n    [setValidationResult]\n  )\n\n  const handleChange = React.useCallback(throttle(500, validatePassword), [\n    validatePassword\n  ])\n\n  const getMessageTheme = (result: boolean, isFocused: boolean) => {\n    if (result) return 'success'\n\n    return isFocused ? 'neutral' : 'error'\n  }\n\n  const showValidation: boolean =\n    (control.mode.isOnBlur && (isFocused || touched)) ||\n    (control.mode.isOnSubmit && (isFocused || (formState.isSubmitted && error)))\n\n  return (\n    <Box css={css}>\n      <PasswordField\n        label={label}\n        name={name}\n        onChange={(e) => handleChange(e.target.value)}\n        onBlur={() => setIsFocused(false)}\n        onFocus={() => setIsFocused(true)}\n        validation={{ ...validation, validate: validatePassword }}\n        appearance={appearance}\n        {...remainingProps}\n      />\n      {showValidation && (\n        <Flex\n          css={{\n            mt: '$2',\n            gap: '$2',\n            flexWrap: 'wrap',\n            flexDirection: messageDirection\n          }}\n        >\n          {Object.entries(validationResult).map(([message, result]) => (\n            <InlineMessage\n              key={message}\n              theme={getMessageTheme(result, isFocused)}\n            >\n              {message}\n            </InlineMessage>\n          ))}\n        </Flex>\n      )}\n    </Box>\n  )\n}\n\nCreatePasswordField.displayName = 'CreatePasswordField'\n"],"names":["CreatePasswordField","validate","defaultValidation","messageDirection","label","name","css","validation","appearance","remainingProps","_a","formState","control","useFormContext","isFocused","setIsFocused","React","validationResult","setValidationResult","touched","error","isValid","validatePassword","password","result","invariant","handleChange","throttle","getMessageTheme","showValidation","Box","PasswordField","Flex","message","InlineMessage"],"mappings":"gWA8Ba,MAAAA,EAAsB,CAAC,CAClC,SAAAC,EACA,kBAAAC,EACA,iBAAAC,EAAmB,MACnB,MAAAC,EAAQ,oBACR,KAAAC,EAAO,WACP,IAAAC,EACA,WAAAC,EACA,WAAAC,KACGC,CACL,IAAgC,CAxChC,IAAAC,EAyCE,KAAM,CAAE,UAAAC,EAAW,QAAAC,CAAQ,EAAIC,EAAe,EACxC,CAACC,EAAWC,CAAY,EAAIC,EAAM,SAAkB,EAAK,EACzD,CAACC,EAAkBC,CAAmB,EAC1CF,EAAM,SAA2Bd,CAAiB,EAE9CiB,EAAmBR,EAAU,QAAQN,GACrCe,IACJV,EAAAC,EAAU,OAAON,KAAjB,KAAA,OAAAK,EAAwB,QAAS,YACjC,OAAO,OAAOO,CAAgB,EAAE,MAAOI,GAAY,CAACA,CAAO,EAEvDC,EAAmBN,EAAM,YAC7B,MAAOO,GAAqB,CAC1B,MAAMC,EAAS,MAAMvB,EAASsB,CAAQ,EAEtC,OAAIC,GACFC,EACE,OAAOD,GAAW,SAClB,6CACF,EAEAN,EAAoBM,CAAM,EACnB,OAAO,OAAOA,CAAM,EAAE,MAAOH,GAAYA,CAAO,GAGlD,EACT,EACA,CAACH,CAAmB,CACtB,EAEMQ,EAAeV,EAAM,YAAYW,EAAS,IAAKL,CAAgB,EAAG,CACtEA,CACF,CAAC,EAEKM,EAAkB,CAACJ,EAAiBV,IACpCU,EAAe,UAEZV,EAAY,UAAY,QAG3Be,EACHjB,EAAQ,KAAK,WAAaE,GAAaK,IACvCP,EAAQ,KAAK,aAAeE,GAAcH,EAAU,aAAeS,GAEtE,OACEJ,EAAA,cAACc,EAAA,CAAI,IAAKxB,CACRU,EAAAA,EAAA,cAACe,EAAA,CACC,MAAO3B,EACP,KAAMC,EACN,SAAW,GAAMqB,EAAa,EAAE,OAAO,KAAK,EAC5C,OAAQ,IAAMX,EAAa,EAAK,EAChC,QAAS,IAAMA,EAAa,EAAI,EAChC,WAAY,CAAE,GAAGR,EAAY,SAAUe,CAAiB,EACxD,WAAYd,EACX,GAAGC,CAAAA,CACN,EACCoB,GACCb,EAAA,cAACgB,EAAA,CACC,IAAK,CACH,GAAI,KACJ,IAAK,KACL,SAAU,OACV,cAAe7B,CACjB,CAAA,EAEC,OAAO,QAAQc,CAAgB,EAAE,IAAI,CAAC,CAACgB,EAAST,CAAM,IACrDR,EAAA,cAACkB,EAAA,CACC,IAAKD,EACL,MAAOL,EAAgBJ,EAAQV,CAAS,CAAA,EAEvCmB,CACH,CACD,CACH,CAEJ,CAEJ,EAEAjC,EAAoB,YAAc"}

package/dist/components/data-table/DataTable.d.ts

@@ -6,7 +6,7 @@
 export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defaultSort, initialState, disabledRows, enableRowSelection, onRowSelectionChange, children }: {
     columns: any;
     defaultSort?: import("./DataTable.types").TDefaultSort;
-    children: import("react").ReactNode;
+    children: React.ReactNode;
     initialState?: import("./DataTable.types").InitialState;
     disabledRows?: Record<string, boolean>;
     enableRowSelection?: boolean | ((row: import("@tanstack/table-core").Row<unknown>) => boolean);
@@ -24,9 +24,9 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * you can build your own implementation with `useDataTable()` and the UI-only `Table` components.
      */
     Body: ({ striped, ...props }: {
-        color?: string | undefined;
-        content?: string | undefined;
-        translate?: "yes" | "no" | undefined;
+        color?: string | undefined | undefined;
+        content?: string | undefined | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
         css?: import("@atom-learning/stitches-react/types/css-util").CSS<{
             sm: string;
             md: string;
@@ -383,105 +383,105 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
                 marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
             };
         }> | undefined;
-        prefix?: string | undefined;
-        slot?: string | undefined;
+        prefix?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
         style?: import("react").CSSProperties | undefined;
-        title?: string | undefined;
+        title?: string | undefined | undefined;
         ref?: ((instance: HTMLTableSectionElement | null) => void) | import("react").RefObject<HTMLTableSectionElement> | null | undefined;
         key?: import("react").Key | null | undefined;
-        defaultChecked?: boolean | undefined;
+        defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined;
-        suppressHydrationWarning?: boolean | undefined;
-        accessKey?: string | undefined;
-        autoFocus?: boolean | undefined;
-        className?: string | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
-        contextMenu?: string | undefined;
-        dir?: string | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        accessKey?: string | undefined | undefined;
+        autoFocus?: boolean | undefined | undefined;
+        className?: string | undefined | undefined;
+        contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+        contextMenu?: string | undefined | undefined;
+        dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
-        hidden?: boolean | undefined;
-        id?: string | undefined;
-        lang?: string | undefined;
-        nonce?: string | undefined;
-        placeholder?: string | undefined;
+        hidden?: boolean | undefined | undefined;
+        id?: string | undefined | undefined;
+        lang?: string | undefined | undefined;
+        nonce?: string | undefined | undefined;
+        placeholder?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        tabIndex?: number | undefined;
-        radioGroup?: string | undefined;
+        tabIndex?: number | undefined | undefined;
+        radioGroup?: string | undefined | undefined;
         role?: import("react").AriaRole | undefined;
-        about?: string | undefined;
-        datatype?: string | undefined;
+        about?: string | undefined | undefined;
+        datatype?: string | undefined | undefined;
         inlist?: any;
-        property?: string | undefined;
-        rel?: string | undefined;
-        resource?: string | undefined;
-        rev?: string | undefined;
-        typeof?: string | undefined;
-        vocab?: string | undefined;
-        autoCapitalize?: string | undefined;
-        autoCorrect?: string | undefined;
-        autoSave?: string | undefined;
-        itemProp?: string | undefined;
-        itemScope?: boolean | undefined;
-        itemType?: string | undefined;
-        itemID?: string | undefined;
-        itemRef?: string | undefined;
-        results?: number | undefined;
-        security?: string | undefined;
-        unselectable?: "on" | "off" | undefined;
-        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
-        is?: string | undefined;
-        "aria-activedescendant"?: string | undefined;
+        property?: string | undefined | undefined;
+        rel?: string | undefined | undefined;
+        resource?: string | undefined | undefined;
+        rev?: string | undefined | undefined;
+        typeof?: string | undefined | undefined;
+        vocab?: string | undefined | undefined;
+        autoCapitalize?: string | undefined | undefined;
+        autoCorrect?: string | undefined | undefined;
+        autoSave?: string | undefined | undefined;
+        itemProp?: string | undefined | undefined;
+        itemScope?: boolean | undefined | undefined;
+        itemType?: string | undefined | undefined;
+        itemID?: string | undefined | undefined;
+        itemRef?: string | undefined | undefined;
+        results?: number | undefined | undefined;
+        security?: string | undefined | undefined;
+        unselectable?: "on" | "off" | undefined | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        is?: string | undefined | undefined;
+        "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
-        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
         "aria-busy"?: (boolean | "true" | "false") | undefined;
-        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
-        "aria-colcount"?: number | undefined;
-        "aria-colindex"?: number | undefined;
-        "aria-colspan"?: number | undefined;
-        "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
-        "aria-describedby"?: string | undefined;
-        "aria-details"?: string | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
+        "aria-colcount"?: number | undefined | undefined;
+        "aria-colindex"?: number | undefined | undefined;
+        "aria-colspan"?: number | undefined | undefined;
+        "aria-controls"?: string | undefined | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+        "aria-describedby"?: string | undefined | undefined;
+        "aria-details"?: string | undefined | undefined;
         "aria-disabled"?: (boolean | "true" | "false") | undefined;
-        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
-        "aria-errormessage"?: string | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+        "aria-errormessage"?: string | undefined | undefined;
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
-        "aria-flowto"?: string | undefined;
+        "aria-flowto"?: string | undefined | undefined;
         "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
         "aria-hidden"?: (boolean | "true" | "false") | undefined;
-        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
-        "aria-keyshortcuts"?: string | undefined;
-        "aria-label"?: string | undefined;
-        "aria-labelledby"?: string | undefined;
-        "aria-level"?: number | undefined;
-        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+        "aria-keyshortcuts"?: string | undefined | undefined;
+        "aria-label"?: string | undefined | undefined;
+        "aria-labelledby"?: string | undefined | undefined;
+        "aria-level"?: number | undefined | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
         "aria-modal"?: (boolean | "true" | "false") | undefined;
         "aria-multiline"?: (boolean | "true" | "false") | undefined;
         "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-        "aria-orientation"?: "horizontal" | "vertical" | undefined;
-        "aria-owns"?: string | undefined;
-        "aria-placeholder"?: string | undefined;
-        "aria-posinset"?: number | undefined;
-        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+        "aria-owns"?: string | undefined | undefined;
+        "aria-placeholder"?: string | undefined | undefined;
+        "aria-posinset"?: number | undefined | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
         "aria-readonly"?: (boolean | "true" | "false") | undefined;
-        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
         "aria-required"?: (boolean | "true" | "false") | undefined;
-        "aria-roledescription"?: string | undefined;
-        "aria-rowcount"?: number | undefined;
-        "aria-rowindex"?: number | undefined;
-        "aria-rowspan"?: number | undefined;
+        "aria-roledescription"?: string | undefined | undefined;
+        "aria-rowcount"?: number | undefined | undefined;
+        "aria-rowindex"?: number | undefined | undefined;
+        "aria-rowspan"?: number | undefined | undefined;
         "aria-selected"?: (boolean | "true" | "false") | undefined;
-        "aria-setsize"?: number | undefined;
-        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-        "aria-valuemax"?: number | undefined;
-        "aria-valuemin"?: number | undefined;
-        "aria-valuenow"?: number | undefined;
-        "aria-valuetext"?: string | undefined;
+        "aria-setsize"?: number | undefined | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+        "aria-valuemax"?: number | undefined | undefined;
+        "aria-valuemin"?: number | undefined | undefined;
+        "aria-valuenow"?: number | undefined | undefined;
+        "aria-valuetext"?: string | undefined | undefined;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
-        } | undefined;
+        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLTableSectionElement> | undefined;
@@ -2170,10 +2170,10 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
             };
         }> | undefined;
     }, "size" | "as" | "type"> & {
-        size: import("react").ComponentProps<typeof import("..").Text>["size"];
+        size: React.ComponentProps<typeof import("..").Text>["size"];
         type?: "text" | "number" | "email" | "password" | "tel" | "url" | "search";
         as?: never;
-    }, "size" | "state"> & {
+    }, "appearance" | "size" | "state"> & {
         size?: "sm" | "md" | "lg" | "xl" | ({
             "@sm"?: "sm" | "md" | "lg" | "xl" | undefined;
             "@md"?: "sm" | "md" | "lg" | "xl" | undefined;
@@ -2198,6 +2198,18 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         } & {
             [x: string]: "error" | undefined;
         }) | undefined;
+        appearance?: "standard" | "modern" | ({
+            "@sm"?: "standard" | "modern" | undefined;
+            "@md"?: "standard" | "modern" | undefined;
+            "@lg"?: "standard" | "modern" | undefined;
+            "@xl"?: "standard" | "modern" | undefined;
+            "@reducedMotion"?: "standard" | "modern" | undefined;
+            "@allowMotion"?: "standard" | "modern" | undefined;
+            "@hover"?: "standard" | "modern" | undefined;
+            "@initial"?: "standard" | "modern" | undefined;
+        } & {
+            [x: string]: "standard" | "modern" | undefined;
+        }) | undefined;
     } & {
         size?: "sm" | "md" | "lg";
         css?: import("../..").CSS;
@@ -2205,7 +2217,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         defaultValue?: string;
         onValueChange?: (newValue: string) => void;
         clearText?: string;
-        onChange?: (e: import("react").ChangeEvent<HTMLInputElement>) => void;
+        onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
     } & {
         label: string;
         hideLabel?: boolean;
@@ -3381,7 +3393,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      * If you need more customisation, you can compose your own implentation, `asyncDataState`
      * can be retrieved from `useDataTable`
      */
-    Loading: (props: import("react").ComponentProps<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<({ css, message, size, ...props }: {
+    Loading: (props: React.ComponentProps<import("@atom-learning/stitches-react/types/styled-component").StyledComponent<({ css, message, size, ...props }: {
         message?: string;
         size?: "sm" | "md" | "lg";
         css?: import("../..").CSS;
@@ -3761,7 +3773,7 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
      *
      */
     Error: ({ children }: {
-        children: (retry?: import("./DataTable.types").DataTableContextType["runAsyncData"]) => import("react").ReactElement;
+        children: (retry?: import("./DataTable.types").DataTableContextType["runAsyncData"]) => React.ReactElement;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
     /** Empty state implementation for `DataTable`.
      *
@@ -4524,31 +4536,31 @@ export declare const DataTable: (({ columns, data: dataProp, getAsyncData, defau
         checked: boolean | "indeterminate";
         onCheckedChange: (value: boolean) => void;
         label?: string;
-    }) => import("react").ReactElement;
+    }) => React.ReactElement;
     /** Empty state implementation for `DataTable`.
      *
      * Renders a checkbox on the header, allowing for individual selection/deselection of any selectable row
      */
     BulkActions: (({ children, ...rest }: {
         css?: import("../..").CSS;
-        children: import("react").ReactElement<import("react").ComponentProps<({ children }: {
-            children: import("react").ReactElement;
-        }) => import("react").ReactElement | null>> | import("react").ReactElement<import("react").ComponentProps<({ cancelLabel, children }: {
+        children: React.ReactElement<React.ComponentProps<({ children }: {
+            children: React.ReactElement;
+        }) => React.ReactElement | null>> | React.ReactElement<React.ComponentProps<({ cancelLabel, children }: {
             cancelLabel?: string;
-            children: import("react").ReactNode;
-        }) => import("react").JSX.Element | null>> | [import("react").ReactElement<import("react").ComponentProps<({ children }: {
-            children: import("react").ReactElement;
-        }) => import("react").ReactElement | null>>, import("react").ReactElement<import("react").ComponentProps<({ cancelLabel, children }: {
+            children: React.ReactNode;
+        }) => import("react").JSX.Element | null>> | [React.ReactElement<React.ComponentProps<({ children }: {
+            children: React.ReactElement;
+        }) => React.ReactElement | null>>, React.ReactElement<React.ComponentProps<({ cancelLabel, children }: {
             cancelLabel?: string;
-            children: import("react").ReactNode;
+            children: React.ReactNode;
         }) => import("react").JSX.Element | null>>];
     }) => import("react").JSX.Element) & {
         DefaultActions: ({ children }: {
-            children: import("react").ReactElement;
-        }) => import("react").ReactElement | null;
+            children: React.ReactElement;
+        }) => React.ReactElement | null;
         SelectedRowActions: ({ cancelLabel, children }: {
             cancelLabel?: string;
-            children: import("react").ReactNode;
+            children: React.ReactNode;
         }) => import("react").JSX.Element | null;
     };
 };

package/dist/components/date-field/DateField.d.ts

@@ -3,7 +3,7 @@ import { DateInputProps } from '../../components/date-input';
 import { FieldElementWrapperProps } from '../../components/field-wrapper';
 type DateFieldProps = DateInputProps & FieldElementWrapperProps;
 export declare const DateField: {
-    ({ css, hideLabel, label, name, validation, prompt, description, ...remainingProps }: DateFieldProps): React.JSX.Element;
+    ({ css, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }: DateFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/date-field/DateField.js

@@ -1,2 +1,2 @@
-import*as i from"react";import{useFormContext as u}from"react-hook-form";import{DateInput as F}from"../date-input/DateInput.js";import{FieldWrapper as b}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as g}from"../form/useFieldError.js";const a=({css:m,hideLabel:l,label:p,name:e,validation:r,prompt:d,description:n,...s})=>{const{register:t,trigger:c}=u(),{error:o}=g(e),f=r?t(r):t;return i.createElement(b,{css:m,description:n,error:o,fieldId:e,hideLabel:l,label:p,prompt:d,required:Boolean(r==null?void 0:r.required)},i.createElement(F,{id:e,name:e,ref:f,...o&&{state:"error"},...s,revalidate:c}))};a.displayName="DateField";export{a as DateField};
+import*as i from"react";import{useFormContext as F}from"react-hook-form";import{DateInput as b}from"../date-input/DateInput.js";import{FieldWrapper as g}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as v}from"../form/useFieldError.js";import"../form/useFormCustomContext.js";const p=({css:m,hideLabel:l,label:d,name:e,validation:r,prompt:n,description:s,appearance:t,...c})=>{const{register:o,trigger:f}=F(),{error:a}=v(e),u=r?o(r):o;return i.createElement(g,{css:m,description:s,error:a,fieldId:e,hideLabel:l,label:d,prompt:n,required:Boolean(r==null?void 0:r.required),appearance:t},i.createElement(b,{id:e,name:e,ref:u,appearance:t,...a&&{state:"error"},...c,revalidate:f}))};p.displayName="DateField";export{p as DateField};
 //# sourceMappingURL=DateField.js.map

package/dist/components/date-field/DateField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateField.js","sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, DateInputProps } from '~/components/date-input'\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n  css,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  ...remainingProps\n}: DateFieldProps) => {\n  const { register, trigger } = useFormContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n\n  return (\n    <FieldWrapper\n      css={css}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n    >\n      <DateInput\n        id={name}\n        name={name}\n        ref={ref}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n        revalidate={trigger}\n      />\n    </FieldWrapper>\n  )\n}\n\nDateField.displayName = 'DateField'\n"],"names":["DateField","css","hideLabel","label","name","validation","prompt","description","remainingProps","register","trigger","useFormContext","error","useFieldError","ref","React","FieldWrapper","DateInput"],"mappings":"gUAYO,MAAMA,EAAY,CAAC,CACxB,IAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,KACGC,CACL,IAAsB,CACpB,KAAM,CAAE,SAAAC,EAAU,QAAAC,CAAQ,EAAIC,EACxB,EAAA,CAAE,MAAAC,CAAM,EAAIC,EAAcT,CAAI,EAC9BU,EAAMT,EAAaI,EAASJ,CAAU,EAAII,EAEhD,OACEM,EAAA,cAACC,EAAA,CACC,IAAKf,EACL,YAAaM,EACb,MAAOK,EACP,QAASR,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAA,OAAAA,EAAY,QAAQ,CAAA,EAEtCU,EAAA,cAACE,EAAA,CACC,GAAIb,EACJ,KAAMA,EACN,IAAKU,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGJ,EACJ,WAAYE,CAAAA,CACd,CACF,CAEJ,EAEAV,EAAU,YAAc"}
+{"version":3,"file":"DateField.js","sources":["../../../src/components/date-field/DateField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport { DateInput, DateInputProps } from '~/components/date-input'\nimport {\n  FieldElementWrapperProps,\n  FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\n\ntype DateFieldProps = DateInputProps & FieldElementWrapperProps\n\nexport const DateField = ({\n  css,\n  hideLabel,\n  label,\n  name,\n  validation,\n  prompt,\n  description,\n  appearance,\n  ...remainingProps\n}: DateFieldProps) => {\n  const { register, trigger } = useFormContext()\n  const { error } = useFieldError(name)\n  const ref = validation ? register(validation) : register\n\n  return (\n    <FieldWrapper\n      css={css}\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={appearance}\n    >\n      <DateInput\n        id={name}\n        name={name}\n        ref={ref}\n        appearance={appearance}\n        {...(error && { state: 'error' })}\n        {...remainingProps}\n        revalidate={trigger}\n      />\n    </FieldWrapper>\n  )\n}\n\nDateField.displayName = 'DateField'\n"],"names":["DateField","css","hideLabel","label","name","validation","prompt","description","appearance","remainingProps","register","trigger","useFormContext","error","useFieldError","ref","React","FieldWrapper","DateInput"],"mappings":"wWAYa,MAAAA,EAAY,CAAC,CACxB,IAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,KACGC,CACL,IAAsB,CACpB,KAAM,CAAE,SAAAC,EAAU,QAAAC,CAAQ,EAAIC,EAAe,EACvC,CAAE,MAAAC,CAAM,EAAIC,EAAcV,CAAI,EAC9BW,EAAMV,EAAaK,EAASL,CAAU,EAAIK,EAEhD,OACEM,EAAA,cAACC,EAAA,CACC,IAAKhB,EACL,YAAaM,EACb,MAAOM,EACP,QAAST,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYG,CAAAA,EAEZQ,EAAA,cAACE,EAAA,CACC,GAAId,EACJ,KAAMA,EACN,IAAKW,EACL,WAAYP,EACX,GAAIK,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGJ,EACJ,WAAYE,CAAAA,CACd,CACF,CAEJ,EAEAX,EAAU,YAAc"}

package/dist/components/dialog/Dialog.d.ts

@@ -1824,8 +1824,8 @@ export declare const Dialog: import("@atom-learning/stitches-react/types/styled-
         closeDialogText?: string;
         showCloseButton?: boolean;
     }) => import("react").JSX.Element;
-    Heading: ({ css, ...props }: import("react").ComponentProps<typeof import("..").Heading>) => import("react").JSX.Element;
-    Footer: ({ css, ...props }: import("react").ComponentProps<typeof import("..").Flex>) => import("react").JSX.Element;
+    Heading: ({ css, ...props }: React.ComponentProps<typeof import("..").Heading>) => import("react").JSX.Element;
+    Footer: ({ css, ...props }: React.ComponentProps<typeof import("..").Flex>) => import("react").JSX.Element;
     Description: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
     Title: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
     Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/dismissible/index.d.ts

@@ -1,6 +1,6 @@
 export declare const Dismissible: {
-    ({ disabled, dismissed, onDismiss, ...rest }: import("react").PropsWithChildren<import("./DismissibleRoot").IDismissibleRootInternalProps & import("./DismissibleRoot").IDismissibleRootProps>): import("react").JSX.Element;
+    ({ disabled, dismissed, onDismiss, ...rest }: React.PropsWithChildren<import("./DismissibleRoot").IDismissibleRootInternalProps & import("./DismissibleRoot").IDismissibleRootProps>): import("react").JSX.Element;
     displayName: string;
 } & {
-    Trigger: ({ asChild, ...rest }: import("react").PropsWithChildren<import("./DismissibleTrigger").IDismissibleTriggerProps>) => import("react").JSX.Element;
+    Trigger: ({ asChild, ...rest }: React.PropsWithChildren<import("./DismissibleTrigger").IDismissibleTriggerProps>) => import("react").JSX.Element;
 };

package/dist/components/dismissible-group/index.d.ts

@@ -1,7 +1,7 @@
 export declare const DismissibleGroup: {
-    ({ as: Component, disabled, onDismiss, ...rest }: import("react").PropsWithChildren<import("./DismissibleGroupRoot").IDismissibleGroupRootProps>): import("react").JSX.Element;
+    ({ as: Component, disabled, onDismiss, ...rest }: React.PropsWithChildren<import("./DismissibleGroupRoot").IDismissibleGroupRootProps>): import("react").JSX.Element;
     displayName: string;
 } & {
-    Item: ({ children, value, disabled: itemDisabled, ...rest }: import("react").PropsWithChildren<import("./DismissibleGroupItem").TDismissibleGroupItemProps>) => import("react").JSX.Element;
-    Trigger: ({ asChild, ...rest }: import("react").PropsWithChildren<import("../../components/dismissible/DismissibleTrigger").IDismissibleTriggerProps>) => import("react").JSX.Element;
+    Item: ({ children, value, disabled: itemDisabled, ...rest }: React.PropsWithChildren<import("./DismissibleGroupItem").TDismissibleGroupItemProps>) => import("react").JSX.Element;
+    Trigger: ({ asChild, ...rest }: React.PropsWithChildren<import("../../components/dismissible/DismissibleTrigger").IDismissibleTriggerProps>) => import("react").JSX.Element;
 };

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ValidationOptions } from '../../components/form';
 import type { CSS } from '../../stitches';
+import { type LabelProps } from '../label/Label';
 export type FieldWrapperProps = {
     css?: CSS;
     error?: string;
@@ -14,12 +15,13 @@ export type FieldWrapperProps = {
     description?: string;
     required?: boolean;
     hideLabel?: boolean;
+    appearance?: LabelProps['appearance'];
 };
 export type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {
     name: string;
     validation?: ValidationOptions;
 };
 export declare const FieldWrapper: {
-    ({ css, children, error, fieldId, label, prompt, description, required, hideLabel }: React.PropsWithChildren<FieldWrapperProps>): React.JSX.Element;
+    ({ css, children, error, fieldId, label, prompt, description, required, hideLabel, appearance }: React.PropsWithChildren<FieldWrapperProps>): React.JSX.Element;
     displayName: string;
 };

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

@@ -1,2 +1,2 @@
-import*as d from"@radix-ui/react-visually-hidden";import*as r from"react";import{Box as f}from"../box/Box.js";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 m=({css:l,children:i,error:t,fieldId:n,label:s,prompt:e,description:o,required:c,hideLabel:a})=>{const p=a?d.Root:b;return r.createElement(f,{css:l},r.createElement(p,{css:{justifyContent:"space-between",alignItems:"center",mb:"$3"}},r.createElement(E,{htmlFor:n,required:c},s),e&&r.createElement(h,{href:e==null?void 0:e.link,onClick:e==null?void 0:e.onClick,size:"sm"},e.label)),o&&r.createElement(k,{css:{mb:"$3"}},o),i,t&&r.createElement(u,{css:{mt:"$2"}},t))};m.displayName="FieldWrapper";export{m as FieldWrapper};
+import*as f from"@radix-ui/react-visually-hidden";import*as r from"react";import{Box as b}from"../box/Box.js";import{Flex as u}from"../flex/Flex.js";import{InlineMessage as E}from"../inline-message/InlineMessage.js";import{Label as h}from"../label/Label.js";import{Link as k}from"../link/Link.js";import{Description as F}from"./FieldDescription.js";const o=({css:m,children:l,error:t,fieldId:n,label:a,prompt:e,description:i,required:s,hideLabel:p,appearance:c})=>{const d=p?f.Root:u;return r.createElement(b,{css:m},r.createElement(d,{css:{justifyContent:"space-between",alignItems:"center",mb:"$3"}},r.createElement(h,{htmlFor:n,required:s,appearance:c},a),e&&r.createElement(k,{href:e==null?void 0:e.link,onClick:e==null?void 0:e.onClick,size:"sm"},e.label)),i&&r.createElement(F,{css:{mb:"$3"}},i),l,t&&r.createElement(E,{css:{mt:"$2"}},t))};o.displayName="FieldWrapper";export{o 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 { Box } from '~/components/box'\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'\nimport type { CSS } from '~/stitches'\n\nimport { Description } from './FieldDescription'\n\nexport type FieldWrapperProps = {\n  css?: CSS\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}\n\nexport type FieldElementWrapperProps = Omit<FieldWrapperProps, 'fieldId'> & {\n  name: string\n  validation?: ValidationOptions\n}\n\nexport const FieldWrapper = ({\n  css,\n  children,\n  error,\n  fieldId,\n  label,\n  prompt,\n  description,\n  required,\n  hideLabel\n}: React.PropsWithChildren<FieldWrapperProps>) => {\n  const LabelContainer = hideLabel ? VisuallyHidden.Root : Flex\n\n  return (\n    <Box css={css}>\n      <LabelContainer\n        css={{\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          mb: '$3'\n        }}\n      >\n        <Label htmlFor={fieldId} required={required}>\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 && (\n        <Description css={{ mb: '$3' }}>{description}</Description>\n      )}\n      {children}\n      {error && <InlineMessage css={{ mt: '$2' }}>{error}</InlineMessage>}\n    </Box>\n  )\n}\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"names":["FieldWrapper","css","children","error","fieldId","label","prompt","description","required","hideLabel","LabelContainer","VisuallyHidden","Flex","React","Box","Label","Link","Description","InlineMessage"],"mappings":"6VA6BO,MAAMA,EAAe,CAAC,CAC3B,IAAAC,EACA,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,CACF,IAAkD,CAChD,MAAMC,EAAiBD,EAAYE,EAAe,KAAOC,EAEzD,OACEC,EAAA,cAACC,EAAA,CAAI,IAAKb,CAAAA,EACRY,EAAA,cAACH,EAAA,CACC,IAAK,CACH,eAAgB,gBAChB,WAAY,SACZ,GAAI,IACN,CAAA,EAEAG,EAAA,cAACE,EAAA,CAAM,QAASX,EAAS,SAAUI,CAChCH,EAAAA,CACH,EACCC,GACCO,EAAA,cAACG,EAAA,CAAK,KAAMV,GAAA,KAAA,OAAAA,EAAQ,KAAM,QAASA,GAAA,YAAAA,EAAQ,QAAS,KAAK,IAAA,EACtDA,EAAO,KACV,CAEJ,EACCC,GACCM,EAAA,cAACI,EAAA,CAAY,IAAK,CAAE,GAAI,IAAK,GAAIV,CAAY,EAE9CL,EACAC,GAASU,EAAA,cAACK,EAAA,CAAc,IAAK,CAAE,GAAI,IAAK,CAAA,EAAIf,CAAM,CACrD,CAEJ,EAEAH,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 { Box } from '~/components/box'\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'\nimport type { CSS } from '~/stitches'\n\nimport { Description } from './FieldDescription'\nimport { type LabelProps } from '../label/Label'\n\nexport type FieldWrapperProps = {\n  css?: CSS\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  css,\n  children,\n  error,\n  fieldId,\n  label,\n  prompt,\n  description,\n  required,\n  hideLabel,\n  appearance\n}: React.PropsWithChildren<FieldWrapperProps>) => {\n  const LabelContainer = hideLabel ? VisuallyHidden.Root : Flex\n\n  return (\n    <Box css={css}>\n      <LabelContainer\n        css={{\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          mb: '$3'\n        }}\n      >\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 && (\n        <Description css={{ mb: '$3' }}>{description}</Description>\n      )}\n      {children}\n      {error && <InlineMessage css={{ mt: '$2' }}>{error}</InlineMessage>}\n    </Box>\n  )\n}\n\nFieldWrapper.displayName = 'FieldWrapper'\n"],"names":["FieldWrapper","css","children","error","fieldId","label","prompt","description","required","hideLabel","appearance","LabelContainer","VisuallyHidden","Flex","React","Box","Label","Link","Description","InlineMessage"],"mappings":"6VA+Ba,MAAAA,EAAe,CAAC,CAC3B,IAAAC,EACA,SAAAC,EACA,MAAAC,EACA,QAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,EACA,WAAAC,CACF,IAAkD,CAChD,MAAMC,EAAiBF,EAAYG,EAAe,KAAOC,EAEzD,OACEC,EAAA,cAACC,EAAA,CAAI,IAAKd,CAAAA,EACRa,EAAA,cAACH,EAAA,CACC,IAAK,CACH,eAAgB,gBAChB,WAAY,SACZ,GAAI,IACN,CAEAG,EAAAA,EAAA,cAACE,EAAA,CAAM,QAASZ,EAAS,SAAUI,EAAU,WAAYE,CAAAA,EACtDL,CACH,EACCC,GACCQ,EAAA,cAACG,EAAA,CAAK,KAAMX,GAAA,KAAAA,OAAAA,EAAQ,KAAM,QAASA,GAAA,KAAAA,OAAAA,EAAQ,QAAS,KAAK,IACtDA,EAAAA,EAAO,KACV,CAEJ,EACCC,GACCO,EAAA,cAACI,EAAA,CAAY,IAAK,CAAE,GAAI,IAAK,CAAIX,EAAAA,CAAY,EAE9CL,EACAC,GAASW,EAAA,cAACK,EAAA,CAAc,IAAK,CAAE,GAAI,IAAK,GAAIhB,CAAM,CACrD,CAEJ,EAEAH,EAAa,YAAc"}

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

@@ -1,5 +1,6 @@
-import React from 'react';
+import * as React from 'react';
 import type { DefaultValues, FieldValues, Mode, SubmitErrorHandler, SubmitHandler, UseFormMethods } from 'react-hook-form';
+import { type FormCustomContextType } from './useFormCustomContext';
 declare const StyledForm: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"form", {}, {
     sm: string;
     md: string;
@@ -373,7 +374,7 @@ interface FormProps<TFormData extends FieldValues> extends StyledFormProps {
     children: React.ReactNode | ((methods: UseFormMethods<TFormData>) => React.ReactNode);
 }
 export declare const Form: {
-    <TFormData extends FieldValues>(props: FormProps<TFormData>): React.JSX.Element;
+    <TFormData extends FieldValues>(props: FormProps<TFormData> & FormCustomContextType): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/form/Form.js

@@ -1,2 +1,2 @@
-import r from"react";import{useForm as u,FormProvider as f}from"react-hook-form";import{styled as s}from"../../stitches.js";const c=s("form",{}),t=m=>{const{children:o,defaultValues:a,validationMode:l="onBlur",onSubmit:n,onError:i,...d}=m,e=u({defaultValues:a,mode:l});return r.createElement(f,{...e},r.createElement(c,{"aria-label":"form",onSubmit:e.handleSubmit(n,i),...d},typeof o=="function"?o(e):o))};t.displayName="Form";export{t as Form};
+import*as r from"react";import{useForm as f,FormProvider as p}from"react-hook-form";import{styled as s}from"../../stitches.js";import{FormCustomContext as c}from"./useFormCustomContext.js";const F=s("form",{}),t=m=>{const{children:e,defaultValues:a,validationMode:n="onBlur",onSubmit:l,onError:i,appearance:u,...d}=m,o=f({defaultValues:a,mode:n});return r.createElement(p,{...o},r.createElement(c.Provider,{value:{appearance:u}},r.createElement(F,{"aria-label":"form",onSubmit:o.handleSubmit(l,i),...d},typeof e=="function"?e(o):e)))};t.displayName="Form";export{t as Form};
 //# sourceMappingURL=Form.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import 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 { styled } from '~/stitches'\n\nconst StyledForm = styled('form', {})\n\ntype StyledFormProps = Omit<\n  React.ComponentPropsWithoutRef<typeof StyledForm>,\n  'onSubmit' | 'onError'\n>\n\ninterface FormProps<TFormData extends FieldValues> extends StyledFormProps {\n  defaultValues?: DefaultValues<TFormData>\n  validationMode?: Mode\n  onSubmit: SubmitHandler<TFormData>\n  onError?: SubmitErrorHandler<TFormData>\n  children:\n    | React.ReactNode\n    | ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n  props: FormProps<TFormData>\n) => {\n  const {\n    children,\n    defaultValues,\n    validationMode = 'onBlur',\n    onSubmit,\n    onError,\n    ...rest\n  } = props\n\n  const methods = useForm<TFormData>({\n    defaultValues,\n    mode: validationMode\n  })\n\n  return (\n    <FormProvider {...methods}>\n      <StyledForm\n        aria-label=\"form\"\n        onSubmit={methods.handleSubmit(onSubmit, onError)}\n        {...rest}\n      >\n        {typeof children === 'function' ? children(methods) : children}\n      </StyledForm>\n    </FormProvider>\n  )\n}\n\nForm.displayName = 'Form'\n"],"names":["StyledForm","styled","Form","props","children","defaultValues","validationMode","onSubmit","onError","rest","methods","useForm","React","FormProvider"],"mappings":"4HAaA,MAAMA,EAAaC,EAAO,OAAQ,CAAA,CAAE,EAiBvBC,EACXC,GACG,CACH,KAAM,CACJ,SAAAC,EACA,cAAAC,EACA,eAAAC,EAAiB,SACjB,SAAAC,EACA,QAAAC,KACGC,CACL,EAAIN,EAEEO,EAAUC,EAAmB,CACjC,cAAAN,EACA,KAAMC,CACR,CAAC,EAED,OACEM,EAAA,cAACC,EAAA,CAAc,GAAGH,CAAAA,EAChBE,EAAA,cAACZ,EAAA,CACC,aAAW,OACX,SAAUU,EAAQ,aAAaH,EAAUC,CAAO,EAC/C,GAAGC,GAEH,OAAOL,GAAa,WAAaA,EAASM,CAAO,EAAIN,CACxD,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 { styled } from '~/stitches'\nimport {\n  type FormCustomContextType,\n  FormCustomContext\n} from './useFormCustomContext'\n\nconst StyledForm = styled('form', {})\n\ntype StyledFormProps = Omit<\n  React.ComponentPropsWithoutRef<typeof StyledForm>,\n  'onSubmit' | 'onError'\n>\n\ninterface FormProps<TFormData extends FieldValues> extends StyledFormProps {\n  defaultValues?: DefaultValues<TFormData>\n  validationMode?: Mode\n  onSubmit: SubmitHandler<TFormData>\n  onError?: SubmitErrorHandler<TFormData>\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        <StyledForm\n          aria-label=\"form\"\n          onSubmit={methods.handleSubmit(onSubmit, onError)}\n          {...rest}\n        >\n          {typeof children === 'function' ? children(methods) : children}\n        </StyledForm>\n      </FormCustomContext.Provider>\n    </FormProvider>\n  )\n}\n\nForm.displayName = 'Form'\n"],"names":["StyledForm","styled","Form","props","children","defaultValues","validationMode","onSubmit","onError","appearance","rest","methods","useForm","React","FormProvider","FormCustomContext"],"mappings":"6LAiBA,MAAMA,EAAaC,EAAO,OAAQ,CAAE,CAAA,EAiBvBC,EACXC,GACG,CACH,KAAM,CACJ,SAAAC,EACA,cAAAC,EACA,eAAAC,EAAiB,SACjB,SAAAC,EACA,QAAAC,EACA,WAAAC,KACGC,CACL,EAAIP,EAEEQ,EAAUC,EAAmB,CACjC,cAAAP,EACA,KAAMC,CACR,CAAC,EAED,OACEO,EAAA,cAACC,EAAA,CAAc,GAAGH,GAChBE,EAAA,cAACE,EAAkB,SAAlB,CAA2B,MAAO,CAAE,WAAAN,CAAW,CAAA,EAC9CI,EAAA,cAACb,EAAA,CACC,aAAW,OACX,SAAUW,EAAQ,aAAaJ,EAAUC,CAAO,EAC/C,GAAGE,CAEH,EAAA,OAAON,GAAa,WAAaA,EAASO,CAAO,EAAIP,CACxD,CACF,CACF,CAEJ,EAEAF,EAAK,YAAc"}

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

@@ -1,3 +1,4 @@
 export { Form } from './Form';
 export type { ValidationOptions } from './validation';
 export { useFieldError } from './useFieldError';
+export { useFormCustomContext } from './useFormCustomContext';

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { InputField } from '../input-field';
+export type FormCustomContextType = {
+    appearance?: React.ComponentProps<typeof InputField>['appearance'];
+} | undefined;
+export declare const FormCustomContext: React.Context<FormCustomContextType>;
+export declare const useFormCustomContext: () => FormCustomContextType;

package/dist/components/form/useFormCustomContext.js

@@ -0,0 +1,2 @@
+import*as t from"react";const e=t.createContext({appearance:"standard"}),o=()=>t.useContext(e);export{e as FormCustomContext,o as useFormCustomContext};
+//# sourceMappingURL=useFormCustomContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFormCustomContext.js","sources":["../../../src/components/form/useFormCustomContext.ts"],"sourcesContent":["import * as React from 'react'\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":"wBASa,MAAAA,EAAoBC,EAAM,cAAqC,CAC1E,WAAY,UACd,CAAC,EAEYC,EAAuB,IAAMD,EAAM,WAAWD,CAAiB"}

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

@@ -3,6 +3,7 @@ import type { Override } from '../../utilities';
 export declare const StyledHeading: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"h2", {
     size?: "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | undefined;
     noCapsize?: boolean | "true" | undefined;
+    weight?: "bold" | "medium" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/heading/Heading.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as m}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{capsize as i}from"../../utilities/style/capsize.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const t=m("h2",{fontWeight:700,m:0,variants:{size:{xs:{fontFamily:"$body",fontSize:"$md",lineHeight:1.5,...i(.3864)},sm:{fontFamily:"$body",fontSize:"$lg",lineHeight:1.14,...i(.2078)},md:{fontFamily:"$body",fontSize:"$xl",lineHeight:1.14,...i(.2078)},lg:{fontFamily:"$display",fontSize:"$2xl",lineHeight:1.08,letterSpacing:"0.01em",...i(.1405,.2405)},xl:{fontFamily:"$display",fontSize:"$3xl",lineHeight:1.12,...i(.16,.26)},xxl:{fontFamily:"$display",fontSize:"$4xl",lineHeight:1,...i(.1,.2)}},noCapsize:{true:{"&::before, &::after":{display:"none !important"}}}}}),o=e.forwardRef(({size:n="md",...l},a)=>e.createElement(t,{ref:a,size:n,...l}));o.displayName="Heading";export{o as Heading,t as StyledHeading};
+import*as e from"react";import{styled as f}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{capsize as i}from"../../utilities/style/capsize.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const t=f("h2",{m:0,variants:{size:{xs:{fontFamily:"$body",fontSize:"$md",lineHeight:1.5,...i(.3864)},sm:{fontFamily:"$body",fontSize:"$lg",lineHeight:1.14,...i(.2078)},md:{fontFamily:"$body",fontSize:"$xl",lineHeight:1.14,...i(.2078)},lg:{fontFamily:"$display",fontSize:"$2xl",lineHeight:1.08,letterSpacing:"0.01em",...i(.1405,.2405)},xl:{fontFamily:"$display",fontSize:"$3xl",lineHeight:1.12,...i(.16,.26)},xxl:{fontFamily:"$display",fontSize:"$4xl",lineHeight:1,...i(.1,.2)}},noCapsize:{true:{"&::before, &::after":{display:"none !important"}}},weight:{medium:{fontWeight:500},bold:{fontWeight:700}}}}),o=e.forwardRef(({size:l="md",weight:n="bold",...m},a)=>e.createElement(t,{ref:a,size:l,weight:n,...m}));o.displayName="Heading";export{o as Heading,t as StyledHeading};
 //# sourceMappingURL=Heading.js.map