npm - @atom-learning/components - Versions diffs - 5.7.0 → 6.0.0-beta.1 - Mend

@atom-learning/components 5.7.0 → 6.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/dist/components/form/Form.js CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 { 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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Heading.js","sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport type { Override } from '~/utilities'\nimport { capsize } from '~/utilities'\n\nexport const StyledHeading = styled('h2', {\n ~~fontWeight: 700,\n~~ m: 0,\n variants: {\n size: {\n xs: {\n fontFamily: '$body',\n fontSize: '$md',\n lineHeight: 1.5,\n ...capsize(0.3864)\n },\n sm: {\n fontFamily: '$body',\n fontSize: '$lg',\n lineHeight: 1.14,\n ...capsize(0.2078)\n },\n md: {\n fontFamily: '$body',\n fontSize: '$xl',\n lineHeight: 1.14,\n ...capsize(0.2078)\n },\n lg: {\n fontFamily: '$display',\n fontSize: '$2xl',\n lineHeight: 1.08,\n letterSpacing: '0.01em',\n ...capsize(0.1405, 0.2405)\n },\n xl: {\n fontFamily: '$display',\n fontSize: '$3xl',\n lineHeight: 1.12,\n ...capsize(0.16, 0.26)\n },\n xxl: {\n fontFamily: '$display',\n fontSize: '$4xl',\n lineHeight: 1,\n ...capsize(0.1, 0.2)\n }\n },\n noCapsize: {\n true: {\n '&::before, &::after': { display: 'none !important' }\n }\n }\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.ForwardRefExoticComponent<HeadingProps> =\n React.forwardRef(({ size = 'md', ...remainingProps }, ref) => (\n <StyledHeading ref={ref} size={size} {...remainingProps} />\n ))\n\nHeading.displayName = 'Heading'\n"],"names":["StyledHeading","styled","capsize","Heading","React","size","remainingProps","ref"],"mappings":"~~sTAMO~~,~~MAAMA,~~EAAgBC,EAAO,KAAM,CACxC,~~WAAY,IACZ,~~EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAI,CACF,WAAY,QACZ,SAAU,MACV,WAAY,IACZ,GAAGC,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,WAAY,QACZ,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,WAAY,QACZ,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,WAAY,WACZ,SAAU,OACV,WAAY,KACZ,cAAe,SACf,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,WAAY,WACZ,SAAU,OACV,WAAY,KACZ,GAAGA,EAAQ,IAAM,GAAI,CACvB,EACA,IAAK,CACH,WAAY,WACZ,SAAU,OACV,WAAY,EACZ,GAAGA,EAAQ,GAAK,EAAG,CACrB,CACF,EACA,UAAW,CACT,KAAM,CACJ,sBAAuB,CAAE,QAAS,iBAAkB,CACtD,CACF,CACF,CACF,CAAC,EAiBYC,EACXC,EAAM,~~WAAW~~,CAAC,CAAE,KAAAC,EAAO,~~QAASC~~,CAAe,EAAGC,~~IACpDH~~,EAAA,cAACJ,~~EAAc~~,~~CAAA~~,~~IAAKO~~,~~EAAK~~,~~KAAMF~~,~~EAAO~~,GAAGC,~~CAAAA~~,~~CAAgB~~,~~CAC1D~~,~~EAEHH,~~EAAQ,YAAc"}
1	+ {"version":3,"file":"Heading.js","sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport type { Override } from '~/utilities'\nimport { capsize } from '~/utilities'\n\nexport const StyledHeading = styled('h2', {\n m: 0,\n variants: {\n size: {\n xs: {\n fontFamily: '$body',\n fontSize: '$md',\n lineHeight: 1.5,\n ...capsize(0.3864)\n },\n sm: {\n fontFamily: '$body',\n fontSize: '$lg',\n lineHeight: 1.14,\n ...capsize(0.2078)\n },\n md: {\n fontFamily: '$body',\n fontSize: '$xl',\n lineHeight: 1.14,\n ...capsize(0.2078)\n },\n lg: {\n fontFamily: '$display',\n fontSize: '$2xl',\n lineHeight: 1.08,\n letterSpacing: '0.01em',\n ...capsize(0.1405, 0.2405)\n },\n xl: {\n fontFamily: '$display',\n fontSize: '$3xl',\n lineHeight: 1.12,\n ...capsize(0.16, 0.26)\n },\n xxl: {\n fontFamily: '$display',\n fontSize: '$4xl',\n lineHeight: 1,\n ...capsize(0.1, 0.2)\n }\n },\n noCapsize: {\n true: {\n '&::before, &::after': { display: 'none !important' }\n }\n },\n weight: {\n medium: { fontWeight: 500 },\n bold: { fontWeight: 700 }\n }\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.ForwardRefExoticComponent<HeadingProps> =\n React.forwardRef(\n ({ size = 'md', weight = 'bold', ...remainingProps }, ref) => (\n <StyledHeading\n ref={ref}\n size={size}\n weight={weight}\n {...remainingProps}\n />\n )\n )\n\nHeading.displayName = 'Heading'\n"],"names":["StyledHeading","styled","capsize","Heading","React","size","weight","remainingProps","ref"],"mappings":"4TAMaA,EAAgBC,EAAO,KAAM,CACxC,EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAI,CACF,WAAY,QACZ,SAAU,MACV,WAAY,IACZ,GAAGC,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,WAAY,QACZ,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,WAAY,QACZ,SAAU,MACV,WAAY,KACZ,GAAGA,EAAQ,KAAM,CACnB,EACA,GAAI,CACF,WAAY,WACZ,SAAU,OACV,WAAY,KACZ,cAAe,SACf,GAAGA,EAAQ,MAAQ,KAAM,CAC3B,EACA,GAAI,CACF,WAAY,WACZ,SAAU,OACV,WAAY,KACZ,GAAGA,EAAQ,IAAM,GAAI,CACvB,EACA,IAAK,CACH,WAAY,WACZ,SAAU,OACV,WAAY,EACZ,GAAGA,EAAQ,GAAK,EAAG,CACrB,CACF,EACA,UAAW,CACT,KAAM,CACJ,sBAAuB,CAAE,QAAS,iBAAkB,CACtD,CACF,EACA,OAAQ,CACN,OAAQ,CAAE,WAAY,GAAI,EAC1B,KAAM,CAAE,WAAY,GAAI,CAC1B,CACF,CACF,CAAC,EAiBYC,EACXC,EAAM,WACJ,CAAC,CAAE,KAAAC,EAAO,KAAM,OAAAC,EAAS,UAAWC,CAAe,EAAGC,IACpDJ,EAAA,cAACJ,GACC,IAAKQ,EACL,KAAMH,EACN,OAAQC,EACP,GAAGC,EACN,CAEJ,EAEFJ,EAAQ,YAAc"}

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

@@ -375,6 +375,7 @@ export declare const InputBackground: import("@atom-learning/stitches-react/type
         marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
 }>>, {
+    appearance?: "standard" | "modern" | undefined;
     size?: "sm" | "md" | "lg" | "xl" | undefined;
     disabled?: boolean | "true" | undefined;
     state?: "error" | undefined;
@@ -1123,9 +1124,10 @@ export type InputTextProps = Omit<React.ComponentProps<typeof StyledInputText>,
 };
 export declare const InputText: React.ForwardRefExoticComponent<InputTextProps>;
 type InputBackgroundProps = React.ComponentProps<typeof InputBackground>;
-export type InputProps = Omit<React.ComponentProps<typeof InputText>, 'size' | 'state'> & {
+export type InputProps = Omit<React.ComponentProps<typeof InputText>, 'size' | 'state' | 'appearance'> & {
     size?: InputBackgroundProps['size'];
     state?: InputBackgroundProps['state'];
+    appearance?: InputBackgroundProps['appearance'];
 };
 export declare const Input: React.ForwardRefExoticComponent<InputProps>;
 export {};

package/dist/components/input/Input.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as r from"react";import{styled as l}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{overrideStitchesVariantValue as u}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{disabledStyle as c}from"../../utilities/style/disabledStyle.js";import{Flex as b}from"../flex/Flex.js";import{Text as g}from"../text/Text.js";const d=l(b,{background:"white",color:"$grey1000",border:"1px solid $grey800",borderRadius:"$0",transition:"background 100ms ease-out, borderColor 100ms ease-out",width:"100%","&:focus-within":{borderColor:"$blue800"},variants:{size:{sm:{height:"$3"},md:{height:"$4"},lg:{height:"$5"},xl:{height:"$6"}},disabled:{true:c},state:{error:{borderColor:"$danger"}}}});d.displayName="InputBackground";const h=l.withConfig({shouldForwardStitchesProp:e=>["as"].includes(e)})(g,{appearance:"none",border:"none",background:"none",backgroundImage:"none",backgroundColor:"transparent",boxShadow:"none",boxSizing:"border-box","&:focus":{outline:"none"},px:"$3",size:"100%"}),f={sm:"sm",md:"md",lg:"md",xl:"lg"},m=r.forwardRef(({type:e="text",css:s,size:o,...t},n)=>{const i=r.useMemo(()=>u(o,a=>f[a]),[o]);return r.createElement(h,{ref:n,as:"input",type:e==="number"?"text":e,inputMode:e==="number"?"numeric":void 0,pattern:e==="number"?"[0-9]*":void 0,size:i,...t})});m.displayName="InputText";const p=r.forwardRef(({className:e,size:s="md",state:o,disabled:t,css:n,...i},a)=>r.createElement(d,{size:s,disabled:t,state:o,css:n,className:e},r.createElement(m,{size:s,ref:a,disabled:t,...i})));p.displayName="Input";export{p as Input,d as InputBackground,m as InputText};
+import*as r from"react";import{styled as m}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{overrideStitchesVariantValue as u}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{disabledStyle as b}from"../../utilities/style/disabledStyle.js";import{Flex as g}from"../flex/Flex.js";import{Text as h}from"../text/Text.js";const i=m(g,{color:"$grey1000",transition:"background 100ms ease-out, borderColor 100ms ease-out",width:"100%","&::placeholder":{color:"$grey700",opacity:1},variants:{appearance:{standard:{background:"white",border:"1px solid $grey800",borderRadius:"$0","&:focus-within":{borderColor:"$blue800"}},modern:{background:"$grey100",border:"none",borderRadius:"$1","&:focus-within":{outline:"2px solid $blue800",outlineOffset:1,zIndex:1}}},size:{sm:{height:"$3"},md:{height:"$4"},lg:{height:"$5"},xl:{height:"$6"}},disabled:{true:b},state:{error:{}}},compoundVariants:[{state:"error",appearance:"standard",css:{borderColor:"$danger"}},{state:"error",appearance:"modern",css:{bg:"$dangerLight","&:focus-within":{outlineColor:"$danger"}}}]});i.displayName="InputBackground";const f=m.withConfig({shouldForwardStitchesProp:e=>["as"].includes(e)})(h,{appearance:"none",border:"none",background:"none",backgroundImage:"none",backgroundColor:"transparent",boxShadow:"none",boxSizing:"border-box","&:focus":{outline:"none"},px:"$3",size:"100%"}),x={sm:"sm",md:"md",lg:"md",xl:"lg"},p=r.forwardRef(({type:e="text",css:a,size:o,...n},t)=>{const s=r.useMemo(()=>u(o,d=>x[d]),[o]);return r.createElement(f,{ref:t,as:"input",type:e==="number"?"text":e,inputMode:e==="number"?"numeric":void 0,pattern:e==="number"?"[0-9]*":void 0,size:s,...n})});p.displayName="InputText";const c=r.forwardRef(({className:e,size:a="md",appearance:o="standard",state:n,disabled:t,css:s,...d},l)=>r.createElement(i,{size:a,appearance:o,disabled:t,state:n,css:s,className:e},r.createElement(p,{size:a,ref:l,disabled:t,...d})));c.displayName="Input";export{c as Input,i as InputBackground,p as InputText};
 //# sourceMappingURL=Input.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Flex } from '../flex'\nimport { Text } from '../text'\n\nexport const InputBackground = styled(Flex, {\n background: '~~white~~',\n color: '$~~grey1000~~',\n border: '1px solid $grey800',\n borderRadius: '$0',\n ~~transition:~~ '~~background 100ms ease~~-~~out,~~ borderColor ~~100ms~~ ~~ease-out~~',\n ~~width~~: '~~100%~~',\n '&:focus-within': {\n ~~borderColor~~: '$blue800'\n },\n ~~variants~~: {\n size: {\n sm: {\n height: '$3'\n },\n md: {\n height: '$4'\n },\n lg: {\n height: '$5'\n },\n xl: {\n height: '$6'\n }\n },\n disabled: {\n true: disabledStyle\n },\n state: {\n error: {\n borderColor: '$danger'\n }\n }\n }\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled.withConfig({\n shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Text as unknown as 'input', {\n // unsets\n appearance: 'none',\n border: 'none',\n background: 'none',\n backgroundImage: 'none',\n backgroundColor: 'transparent',\n boxShadow: 'none', // prevent default iOS default styling\n boxSizing: 'border-box',\n '&:focus': {\n outline: 'none'\n },\n //\n px: '$3',\n size: '100%'\n})\n\nexport type InputTextProps = Omit<\n React.ComponentProps<typeof StyledInputText>,\n 'size' \| 'type' \| 'as'\n> & {\n size: React.ComponentProps<typeof Text>['size']\n // override default 'type' property to prevent Input from being used to render\n // checkboxes, radios etc — we have dedicated components for them\n type?: 'text' \| 'number' \| 'email' \| 'password' \| 'tel' \| 'url' \| 'search'\n as?: never\n}\n\nconst toTextSize = {\n sm: 'sm',\n md: 'md',\n lg: 'md',\n xl: 'lg'\n}\n\nexport const InputText: React.ForwardRefExoticComponent<InputTextProps> =\n React.forwardRef(({ type = 'text', css, size, ...rest }, ref) => {\n const textSize = React.useMemo(\n () => overrideStitchesVariantValue(size, (s) => toTextSize[s]),\n [size]\n )\n\n return (\n <StyledInputText\n ref={ref}\n as=\"input\"\n type={type === 'number' ? 'text' : type}\n inputMode={type === 'number' ? 'numeric' : undefined}\n pattern={type === 'number' ? '[0-9]*' : undefined}\n size={textSize}\n {...rest}\n />\n )\n })\n\nInputText.displayName = 'InputText'\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n React.ComponentProps<typeof InputText>,\n 'size' \| 'state'\n> & {\n size?: InputBackgroundProps['size']\n state?: InputBackgroundProps['state']\n}\n\nexport const Input: React.ForwardRefExoticComponent<InputProps> =\n React.forwardRef(\n ({ className, size = 'md', state, disabled, css, ...rest }, ref) => {\n return (\n <InputBackground\n size={size}\n disabled={disabled}\n state={state}\n css={css}\n className={className}\n >\n <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n </InputBackground>\n )\n }\n )\n\nInput.displayName = 'Input'\n"],"names":["InputBackground","styled","Flex","disabledStyle","StyledInputText","propName","Text","toTextSize","InputText","React","type","css","size","rest","ref","textSize","overrideStitchesVariantValue","s","Input","className","state","disabled"],"mappings":"+~~gBASa~~,~~MAAAA~~,EAAkBC,EAAOC,EAAM,CAC1C,WAAY,~~QACZ~~,MAAO,~~YACP~~,OAAQ,qBACR,aAAc,KACd,WAAY,~~wDACZ~~,~~MAAO~~,~~OACP~~,iBAAkB,CAChB,~~YAAa~~,~~UACf~~,~~EACA~~,~~SAAU~~,~~CACR~~,KAAM,CACJ,GAAI,~~CACF~~,OAAQ,~~IACV~~,~~EACA~~,GAAI,~~CACF~~,OAAQ,~~IACV~~,~~EACA~~,GAAI,~~CACF~~,OAAQ,~~IACV~~,~~EACA~~,GAAI,~~CACF~~,OAAQ,~~IACV~~,~~CACF~~,EACA,SAAU,CACR,KAAMC,CACR,EACA,MAAO,CACL,MAAO,~~CACL~~,YAAa,~~SACf~~,CACF,CACF,CACF,CAAC,EAEDH,EAAgB,YAAc,kBAE9B,MAAMI,EAAkBH,EAAO,WAAW,CACxC,0BAA4BI,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAA4B,CAE7B,WAAY,OACZ,OAAQ,OACR,WAAY,OACZ,gBAAiB,OACjB,gBAAiB,cACjB,UAAW,OACX,UAAW,aACX,UAAW,CACT,QAAS,MACX,EAEA,GAAI,KACJ,KAAM,MACR,CAAC,EAaKC,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,OAAQ,IAAAC,EAAK,KAAAC,KAASC,CAAK,EAAGC,IAAQ,CAC/D,MAAMC,EAAWN,EAAM,QACrB,IAAMO,EAA6BJ,EAAOK,GAAMV,EAAWU,EAAE,EAC7D,CAACL,CAAI,CACP,EAEA,OACEH,EAAA,cAACL,EAAA,CACC,IAAKU,EACL,GAAG,QACH,KAAMJ,IAAS,SAAW,OAASA,EACnC,UAAWA,IAAS,SAAW,UAAY,OAC3C,QAASA,IAAS,SAAW,SAAW,OACxC,KAAMK,EACL,GAAGF,CACN,~~CAAA,~~CAEJ,CAAC,EAEHL,EAAU,YAAc,~~YAWjB~~,MAAMU,EACXT,EAAM,WACJ,~~CAAC~~,~~CAAE~~,UAAAU,~~EAAW~~,KAAAP,EAAO,~~KAAM~~,~~MAAAQ~~,~~EAAO~~,SAAAC,~~EAAU~~,~~IAAAV~~,~~KAAQE~~,~~CAAK~~,~~EAAGC~~,~~IAExDL~~,EAAA,cAACT,EAAA,CACC,KAAMY,EACN,~~SAAUS~~,EACV,MAAOD,EACP,~~IAAKT~~,EACL,UAAWQ,~~CAAAA~~,~~EAEXV~~,EAAA,cAACD,~~EAAU~~,~~CAAA~~,KAAMI,EAAM,IAAKE,EAAK,~~SAAUO~~,EAAW,~~GAAGR~~,CAAM,~~CAAA,~~CACjE,CAGN,EAEFK,EAAM,YAAc"}
1	+ {"version":3,"file":"Input.js","sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\nimport { overrideStitchesVariantValue } from '~/utilities/override-stitches-variant-value/overrideStitchesVariantValue'\n\nimport { Flex } from '../flex'\nimport { Text } from '../text'\n\nexport const InputBackground = styled(Flex, {\n color: '$grey1000',\n transition: 'background 100ms ease-out, borderColor 100ms ease-out',\n width: '100%',\n '&::placeholder': {\n color: '$grey700',\n opacity: 1\n },\n variants: {\n appearance: {\n standard: {\n background: 'white',\n border: '1px solid $grey800',\n borderRadius: '$0',\n '&:focus-within': {\n borderColor: '$blue800'\n }\n },\n modern: {\n background: '$grey100',\n border: 'none',\n borderRadius: '$1',\n '&:focus-within': {\n outline: '2px solid $blue800',\n outlineOffset: 1,\n zIndex: 1\n }\n }\n },\n size: {\n sm: { height: '$3' },\n md: { height: '$4' },\n lg: { height: '$5' },\n xl: { height: '$6' }\n },\n disabled: {\n true: disabledStyle\n },\n state: {\n error: {}\n }\n },\n compoundVariants: [\n {\n state: 'error',\n appearance: 'standard',\n css: { borderColor: '$danger' }\n },\n {\n state: 'error',\n appearance: 'modern',\n css: {\n bg: '$dangerLight',\n '&:focus-within': {\n outlineColor: '$danger'\n }\n }\n }\n ]\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled.withConfig({\n shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Text as unknown as 'input', {\n // unsets\n appearance: 'none',\n border: 'none',\n background: 'none',\n backgroundImage: 'none',\n backgroundColor: 'transparent',\n boxShadow: 'none', // prevent default iOS default styling\n boxSizing: 'border-box',\n '&:focus': {\n outline: 'none'\n },\n //\n px: '$3',\n size: '100%'\n})\n\nexport type InputTextProps = Omit<\n React.ComponentProps<typeof StyledInputText>,\n 'size' \| 'type' \| 'as'\n> & {\n size: React.ComponentProps<typeof Text>['size']\n // override default 'type' property to prevent Input from being used to render\n // checkboxes, radios etc — we have dedicated components for them\n type?: 'text' \| 'number' \| 'email' \| 'password' \| 'tel' \| 'url' \| 'search'\n as?: never\n}\n\nconst toTextSize = {\n sm: 'sm',\n md: 'md',\n lg: 'md',\n xl: 'lg'\n}\n\nexport const InputText: React.ForwardRefExoticComponent<InputTextProps> =\n React.forwardRef(({ type = 'text', css, size, ...rest }, ref) => {\n const textSize = React.useMemo(\n () => overrideStitchesVariantValue(size, (s) => toTextSize[s]),\n [size]\n )\n\n return (\n <StyledInputText\n ref={ref}\n as=\"input\"\n type={type === 'number' ? 'text' : type}\n inputMode={type === 'number' ? 'numeric' : undefined}\n pattern={type === 'number' ? '[0-9]*' : undefined}\n size={textSize}\n {...rest}\n />\n )\n })\n\nInputText.displayName = 'InputText'\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n React.ComponentProps<typeof InputText>,\n 'size' \| 'state' \| 'appearance'\n> & {\n size?: InputBackgroundProps['size']\n state?: InputBackgroundProps['state']\n appearance?: InputBackgroundProps['appearance']\n}\n\nexport const Input: React.ForwardRefExoticComponent<InputProps> =\n React.forwardRef(\n (\n {\n className,\n size = 'md',\n appearance = 'standard',\n state,\n disabled,\n css,\n ...rest\n },\n ref\n ) => {\n return (\n <InputBackground\n size={size}\n appearance={appearance}\n disabled={disabled}\n state={state}\n css={css}\n className={className}\n >\n <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n </InputBackground>\n )\n }\n )\n\nInput.displayName = 'Input'\n"],"names":["InputBackground","styled","Flex","disabledStyle","StyledInputText","propName","Text","toTextSize","InputText","React","type","css","size","rest","ref","textSize","overrideStitchesVariantValue","s","Input","className","appearance","state","disabled"],"mappings":"+gBASO,MAAMA,EAAkBC,EAAOC,EAAM,CAC1C,MAAO,YACP,WAAY,wDACZ,MAAO,OACP,iBAAkB,CAChB,MAAO,WACP,QAAS,CACX,EACA,SAAU,CACR,WAAY,CACV,SAAU,CACR,WAAY,QACZ,OAAQ,qBACR,aAAc,KACd,iBAAkB,CAChB,YAAa,UACf,CACF,EACA,OAAQ,CACN,WAAY,WACZ,OAAQ,OACR,aAAc,KACd,iBAAkB,CAChB,QAAS,qBACT,cAAe,EACf,OAAQ,CACV,CACF,CACF,EACA,KAAM,CACJ,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,CACrB,EACA,SAAU,CACR,KAAMC,CACR,EACA,MAAO,CACL,MAAO,CAAA,CACT,CACF,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,IAAK,CAAE,YAAa,SAAU,CAChC,EACA,CACE,MAAO,QACP,WAAY,SACZ,IAAK,CACH,GAAI,eACJ,iBAAkB,CAChB,aAAc,SAChB,CACF,CACF,CACF,CACF,CAAC,EAEDH,EAAgB,YAAc,kBAE9B,MAAMI,EAAkBH,EAAO,WAAW,CACxC,0BAA4BI,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAA4B,CAE7B,WAAY,OACZ,OAAQ,OACR,WAAY,OACZ,gBAAiB,OACjB,gBAAiB,cACjB,UAAW,OACX,UAAW,aACX,UAAW,CACT,QAAS,MACX,EAEA,GAAI,KACJ,KAAM,MACR,CAAC,EAaKC,EAAa,CACjB,GAAI,KACJ,GAAI,KACJ,GAAI,KACJ,GAAI,IACN,EAEaC,EACXC,EAAM,WAAW,CAAC,CAAE,KAAAC,EAAO,OAAQ,IAAAC,EAAK,KAAAC,KAASC,CAAK,EAAGC,IAAQ,CAC/D,MAAMC,EAAWN,EAAM,QACrB,IAAMO,EAA6BJ,EAAOK,GAAMV,EAAWU,EAAE,EAC7D,CAACL,CAAI,CACP,EAEA,OACEH,EAAA,cAACL,EAAA,CACC,IAAKU,EACL,GAAG,QACH,KAAMJ,IAAS,SAAW,OAASA,EACnC,UAAWA,IAAS,SAAW,UAAY,OAC3C,QAASA,IAAS,SAAW,SAAW,OACxC,KAAMK,EACL,GAAGF,CAAAA,CACN,CAEJ,CAAC,EAEHL,EAAU,YAAc,YAYjB,MAAMU,EACXT,EAAM,WACJ,CACE,CACE,UAAAU,EACA,KAAAP,EAAO,KACP,WAAAQ,EAAa,WACb,MAAAC,EACA,SAAAC,EACA,IAAAX,KACGE,CACL,EACAC,IAGEL,EAAA,cAACT,EAAA,CACC,KAAMY,EACN,WAAYQ,EACZ,SAAUE,EACV,MAAOD,EACP,IAAKV,EACL,UAAWQ,CAEXV,EAAAA,EAAA,cAACD,EAAA,CAAU,KAAMI,EAAM,IAAKE,EAAK,SAAUQ,EAAW,GAAGT,CAAAA,CAAM,CACjE,CAGN,EAEFK,EAAM,YAAc"}

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InputField.js","sources":["../../../src/components/input-field/InputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\nimport { Input, InputProps } from '~/components/input'\n\ntype InputFieldProps = InputProps & FieldElementWrapperProps\n\nexport const InputField = ({\n css,\n label,\n name,\n validation,\n prompt,\n description,\n hideLabel,\n ...remainingProps\n}: InputFieldProps) => {\n const { register } = 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 <Input\n id={name}\n name={name}\n ref={ref}\n {...(error && { state: 'error' })}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nInputField.displayName = 'InputField'\n"],"names":["InputField","css","label","name","validation","prompt","description","hideLabel","remainingProps","register","useFormContext","error","useFieldError","ref","React","FieldWrapper","Input"],"mappings":"~~yTAYaA~~,EAAa,CAAC,CACzB,IAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,UAAAC,KACGC,CACL,IAAuB,CACrB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,~~EAC9B~~,CAAE,MAAAC,CAAM,EAAIC,~~EAAcT~~,CAAI,~~EAC9BU~~,~~EAAMT~~,~~EAAaK~~,~~EAASL~~,CAAU,~~EAAIK~~,~~EAEhD~~,~~OACEK~~,EAAA,cAACC,EAAA,CACC,~~IAAKd~~,EACL,YAAaK,EACb,~~MAAOK~~,EACP,~~QAASR~~,EACT,UAAWI,EACX,MAAOL,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,~~YAAAA~~,EAAY,QAAQ,~~CAEtCU~~,~~EAAAA~~,EAAA,cAACE,EAAA,CACC,~~GAAIb~~,EACJ,KAAMA,EACN,~~IAAKU~~,~~EACJ~~,~~GAAIF~~,GAAS,CAAE,MAAO,OAAQ,EAC9B,~~GAAGH~~,~~EACN~~,CACF,CAEJ,~~EAEAR~~,EAAW,YAAc"}
1	+ {"version":3,"file":"InputField.js","sources":["../../../src/components/input-field/InputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError, useFormCustomContext } from '~/components/form'\nimport { Input, InputProps } from '~/components/input'\n\ntype InputFieldProps = InputProps & FieldElementWrapperProps\n\nexport const InputField = ({\n css,\n label,\n name,\n validation,\n prompt,\n description,\n hideLabel,\n appearance,\n ...remainingProps\n}: InputFieldProps) => {\n const { register } = useFormContext()\n const context = useFormCustomContext()\n const { error } = useFieldError(name)\n\n const ref = validation ? register(validation) : register\n const formAppearance = context?.appearance \|\| appearance\n\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={formAppearance}\n >\n <Input\n id={name}\n name={name}\n ref={ref}\n appearance={formAppearance}\n {...(error && { state: 'error' })}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nInputField.displayName = 'InputField'\n"],"names":["InputField","css","label","name","validation","prompt","description","hideLabel","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","Input"],"mappings":"0XAYa,MAAAA,EAAa,CAAC,CACzB,IAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,UAAAC,EACA,WAAAC,KACGC,CACL,IAAuB,CACrB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9BC,EAAUC,EACV,EAAA,CAAE,MAAAC,CAAM,EAAIC,EAAcZ,CAAI,EAE9Ba,EAAMZ,EAAaM,EAASN,CAAU,EAAIM,EAC1CO,GAAiBL,GAAA,KAAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,IAAKlB,EACL,YAAaK,EACb,MAAOQ,EACP,QAASX,EACT,UAAWI,EACX,MAAOL,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYa,CAAAA,EAEZC,EAAA,cAACE,EAAA,CACC,GAAIjB,EACJ,KAAMA,EACN,IAAKa,EACL,WAAYC,EACX,GAAIH,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGL,CAAAA,CACN,CACF,CAEJ,EAEAT,EAAW,YAAc"}

package/dist/components/label/Label.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ declare const StyledLabel: import("@atom-learning/stitches-react/types/styled-co
     type?: "inline" | "block" | undefined;
     align?: "center" | "start" | undefined;
     direction?: "row" | "reverse" | undefined;
+    appearance?: "standard" | "modern" | undefined;
 }, {
     sm: string;
     md: string;
@@ -374,7 +375,7 @@ declare const StyledLabel: import("@atom-learning/stitches-react/types/styled-co
         marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-type LabelProps = Override<React.ComponentPropsWithoutRef<typeof StyledLabel>, {
+export type LabelProps = Override<React.ComponentPropsWithoutRef<typeof StyledLabel>, {
     as?: 'label' | 'legend';
     required?: boolean;
 }>;

package/dist/components/label/Label.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as i}from"../../stitches.js";import{getTextVariant as t}from"../text/Text.js";const p=i("label",{color:"$grey900",fontFamily:"$body",m:0,variants:{size:{sm:t({size:"sm"}),md:t({size:"md"})},type:{block:{display:"block",fontWeight:600},inline:{display:"flex",fontWeight:400,maxWidth:"max-content"}},align:{start:{},center:{}},direction:{reverse:{},row:{}}},compoundVariants:[{type:"inline",align:"start",css:{alignItems:"flex-start"}},{type:"inline",align:"center",css:{alignItems:"center"}},{type:"inline",direction:"reverse",css:{flexDirection:"row-reverse"}},{type:"inline",direction:"row",css:{flexDirection:"row"}}]}),y=i("span",{color:"$danger",ml:"$1",fontWeight:400}),n=({align:r="start",as:a="label",direction:l="row",size:o="md",type:s="block",children:c,required:m,...d})=>e.createElement(p,{as:a,size:o,type:s,align:r,direction:l,...d},c,m&&e.createElement(y,{"aria-hidden":!0},"*"));n.displayName="Label";export{n as Label};
+import*as e from"react";import{styled as t}from"../../stitches.js";import{getTextVariant as i}from"../text/Text.js";const p=t("label",{color:"$grey900",fontFamily:"$body",m:0,variants:{size:{sm:i({size:"sm"}),md:i({size:"md"})},type:{block:{display:"block",fontWeight:600},inline:{display:"flex",fontWeight:400,maxWidth:"max-content"}},align:{start:{},center:{}},direction:{reverse:{},row:{}},appearance:{standard:{},modern:{}}},compoundVariants:[{type:"inline",align:"start",css:{alignItems:"flex-start"}},{type:"inline",align:"center",css:{alignItems:"center"}},{type:"inline",direction:"reverse",css:{flexDirection:"row-reverse"}},{type:"inline",direction:"row",css:{flexDirection:"row"}},{type:"block",appearance:"modern",css:{fontWeight:400}}]}),y=t("span",{color:"$danger",ml:"$1",fontWeight:400}),n=({align:r="start",as:a="label",direction:o="row",size:s="md",type:l="block",children:c,required:m,...d})=>e.createElement(p,{as:a,size:s,type:l,align:r,direction:o,...d},c,m&&e.createElement(y,{"aria-hidden":!0},"*"));n.displayName="Label";export{n as Label};
 //# sourceMappingURL=Label.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Label.js","sources":["../../../src/components/label/Label.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport type { Override } from '~/utilities/types'\n\nimport { getTextVariant } from '../text'\n\nconst StyledLabel = styled('label', {\n color: '$grey900',\n fontFamily: '$body',\n m: 0,\n variants: {\n size: {\n sm: getTextVariant({ size: 'sm' }),\n md: getTextVariant({ size: 'md' })\n },\n type: {\n block: {\n display: 'block',\n fontWeight: 600\n },\n inline: {\n display: 'flex',\n fontWeight: 400,\n maxWidth: 'max-content'\n }\n },\n align: { start: {}, center: {} },\n direction: { reverse: {}, row: {} }\n },\n compoundVariants: [\n {\n type: 'inline',\n align: 'start',\n css: { alignItems: 'flex-start' }\n },\n {\n type: 'inline',\n align: 'center',\n css: { alignItems: 'center' }\n },\n {\n type: 'inline',\n direction: 'reverse',\n css: { flexDirection: 'row-reverse' }\n },\n {\n type: 'inline',\n direction: 'row',\n css: { flexDirection: 'row' }\n }\n ]\n})\n\nconst StyledAsterisk = styled('span', {\n color: '$danger',\n ml: '$1',\n fontWeight: 400\n})\n\~~ntype~~ LabelProps = Override<\n React.ComponentPropsWithoutRef<typeof StyledLabel>,\n {\n as?: 'label' \| 'legend'\n required?: boolean\n }\n>\n\nexport const Label = ({\n align = 'start',\n as = 'label',\n direction = 'row',\n size = 'md',\n type = 'block',\n children,\n required,\n ...rest\n}: LabelProps) => (\n <StyledLabel\n as={as}\n size={size}\n type={type}\n align={align}\n direction={direction}\n {...rest}\n >\n {children}\n {required && <StyledAsterisk aria-hidden>*</StyledAsterisk>}\n </StyledLabel>\n)\n\nLabel.displayName = 'Label'\n"],"names":["StyledLabel","styled","getTextVariant","StyledAsterisk","Label","align","as","direction","size","type","children","required","rest","React"],"mappings":"oHAOA,MAAMA,EAAcC,EAAO,QAAS,CAClC,MAAO,WACP,WAAY,QACZ,EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAIC,EAAe,CAAE,KAAM,IAAK,CAAC,EACjC,GAAIA,EAAe,CAAE,KAAM,IAAK,CAAC,CACnC,EACA,KAAM,CACJ,MAAO,CACL,QAAS,QACT,WAAY,GACd,EACA,OAAQ,CACN,QAAS,OACT,WAAY,IACZ,SAAU,aACZ,CACF,EACA,MAAO,CAAE,MAAO,~~CAAA~~,~~EAAI,~~OAAQ,CAAG,~~CAAA,~~EAC/B,UAAW,CAAE,QAAS,~~CAAI~~,~~EAAA~~,IAAK,EAAG,~~CACpC~~,EACA,iBAAkB,CAChB,CACE,KAAM,SACN,MAAO,QACP,IAAK,CAAE,WAAY,YAAa,CAClC,EACA,CACE,KAAM,SACN,MAAO,SACP,IAAK,CAAE,WAAY,QAAS,CAC9B,EACA,CACE,KAAM,SACN,UAAW,UACX,IAAK,CAAE,cAAe,aAAc,CACtC,EACA,CACE,KAAM,SACN,UAAW,MACX,IAAK,CAAE,cAAe,KAAM,CAC9B,CACF,CACF,CAAC,EAEKC,EAAiBF,EAAO,OAAQ,CACpC,MAAO,UACP,GAAI,KACJ,WAAY,GACd,CAAC,EAUYG,EAAQ,CAAC,CACpB,MAAAC,EAAQ,QACR,GAAAC,EAAK,QACL,UAAAC,EAAY,MACZ,KAAAC,EAAO,KACP,KAAAC,EAAO,QACP,SAAAC,EACA,SAAAC,KACGC,CACL,IACEC,EAAA,cAACb,EAAA,CACC,GAAIM,EACJ,KAAME,EACN,KAAMC,EACN,MAAOJ,EACP,UAAWE,EACV,GAAGK,~~CAEHF~~,~~EAAAA~~,EACAC,GAAYE,EAAA,cAACV,EAAA,CAAe,cAAW,IAAC,GAAC,CAC5C,EAGFC,EAAM,YAAc"}
1	+ {"version":3,"file":"Label.js","sources":["../../../src/components/label/Label.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport type { Override } from '~/utilities/types'\n\nimport { getTextVariant } from '../text'\n\nconst StyledLabel = styled('label', {\n color: '$grey900',\n fontFamily: '$body',\n m: 0,\n variants: {\n size: {\n sm: getTextVariant({ size: 'sm' }),\n md: getTextVariant({ size: 'md' })\n },\n type: {\n block: {\n display: 'block',\n fontWeight: 600\n },\n inline: {\n display: 'flex',\n fontWeight: 400,\n maxWidth: 'max-content'\n }\n },\n align: { start: {}, center: {} },\n direction: { reverse: {}, row: {} },\n appearance: { standard: {}, modern: {} }\n },\n compoundVariants: [\n {\n type: 'inline',\n align: 'start',\n css: { alignItems: 'flex-start' }\n },\n {\n type: 'inline',\n align: 'center',\n css: { alignItems: 'center' }\n },\n {\n type: 'inline',\n direction: 'reverse',\n css: { flexDirection: 'row-reverse' }\n },\n {\n type: 'inline',\n direction: 'row',\n css: { flexDirection: 'row' }\n },\n {\n type: 'block',\n appearance: 'modern',\n css: { fontWeight: 400 }\n }\n ]\n})\n\nconst StyledAsterisk = styled('span', {\n color: '$danger',\n ml: '$1',\n fontWeight: 400\n})\n\nexport type LabelProps = Override<\n React.ComponentPropsWithoutRef<typeof StyledLabel>,\n {\n as?: 'label' \| 'legend'\n required?: boolean\n }\n>\n\nexport const Label = ({\n align = 'start',\n as = 'label',\n direction = 'row',\n size = 'md',\n type = 'block',\n children,\n required,\n ...rest\n}: LabelProps) => (\n <StyledLabel\n as={as}\n size={size}\n type={type}\n align={align}\n direction={direction}\n {...rest}\n >\n {children}\n {required && <StyledAsterisk aria-hidden>*</StyledAsterisk>}\n </StyledLabel>\n)\n\nLabel.displayName = 'Label'\n"],"names":["StyledLabel","styled","getTextVariant","StyledAsterisk","Label","align","as","direction","size","type","children","required","rest","React"],"mappings":"oHAOA,MAAMA,EAAcC,EAAO,QAAS,CAClC,MAAO,WACP,WAAY,QACZ,EAAG,EACH,SAAU,CACR,KAAM,CACJ,GAAIC,EAAe,CAAE,KAAM,IAAK,CAAC,EACjC,GAAIA,EAAe,CAAE,KAAM,IAAK,CAAC,CACnC,EACA,KAAM,CACJ,MAAO,CACL,QAAS,QACT,WAAY,GACd,EACA,OAAQ,CACN,QAAS,OACT,WAAY,IACZ,SAAU,aACZ,CACF,EACA,MAAO,CAAE,MAAO,GAAI,OAAQ,CAAA,CAAG,EAC/B,UAAW,CAAE,QAAS,CAAA,EAAI,IAAK,EAAG,EAClC,WAAY,CAAE,SAAU,CAAC,EAAG,OAAQ,CAAA,CAAG,CACzC,EACA,iBAAkB,CAChB,CACE,KAAM,SACN,MAAO,QACP,IAAK,CAAE,WAAY,YAAa,CAClC,EACA,CACE,KAAM,SACN,MAAO,SACP,IAAK,CAAE,WAAY,QAAS,CAC9B,EACA,CACE,KAAM,SACN,UAAW,UACX,IAAK,CAAE,cAAe,aAAc,CACtC,EACA,CACE,KAAM,SACN,UAAW,MACX,IAAK,CAAE,cAAe,KAAM,CAC9B,EACA,CACE,KAAM,QACN,WAAY,SACZ,IAAK,CAAE,WAAY,GAAI,CACzB,CACF,CACF,CAAC,EAEKC,EAAiBF,EAAO,OAAQ,CACpC,MAAO,UACP,GAAI,KACJ,WAAY,GACd,CAAC,EAUYG,EAAQ,CAAC,CACpB,MAAAC,EAAQ,QACR,GAAAC,EAAK,QACL,UAAAC,EAAY,MACZ,KAAAC,EAAO,KACP,KAAAC,EAAO,QACP,SAAAC,EACA,SAAAC,KACGC,CACL,IACEC,EAAA,cAACb,EAAA,CACC,GAAIM,EACJ,KAAME,EACN,KAAMC,EACN,MAAOJ,EACP,UAAWE,EACV,GAAGK,CAAAA,EAEHF,EACAC,GAAYE,EAAA,cAACV,EAAA,CAAe,cAAW,IAAC,GAAC,CAC5C,EAGFC,EAAM,YAAc"}

package/dist/components/number-input/NumberInput.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CSS } from '../../stitches';
+import { type CSS } from '../../stitches';
 export interface NumberInputProps {
     name: string;
     min?: number;
@@ -10,6 +10,7 @@ export interface NumberInputProps {
     disabled?: boolean;
     readonly?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    appearance?: 'standard' | 'modern';
     onValueChange?: (value: number) => void;
     stepperButtonLabels?: {
         increment?: string;

package/dist/components/number-input/NumberInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Minus as B,Plus as F}from"@atom-learning/icons";import*as t from"react";import"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as H}from"../../utilities/style/get-icon-size.js";import{Flex as $}from"../flex/Flex.js";import{Input as V}from"../input/Input.js";import{NumberInputStepper as k}from"./NumberInputStepper.js";const N=t.forwardRef(({value:m,defaultValue:T=0,onValueChange:C,min:n=0,max:a=Number.MAX_SAFE_INTEGER,step:d=1,disabled:s=!1,readonly:u=!1,size:w="md",stepperButtonLabels:y,disabledTooltipContent:A,css:M,...z},I)=>{const[o,E]=t.useState(m||T);t.useEffect(()=>{typeof m<"u"&&E(m)},[m]);const l=t.useRef(null);t.useImperativeHandle(I,()=>l.current);const R=t.useMemo(()=>H(w),[w]),g={increment:"increment",decrement:"decrement",...y},h={decrement:`Cannot enter values below ${n}`,increment:`Cannot enter values above ${a}`,...A},c=o>=a,p=o<=n,b=t.useCallback(e=>Math.min(Math.max(e,n),a),[a,n]),r=t.useCallback(e=>{C==null||C(e),E(e)},[C]),L=t.useCallback(e=>{const i=Number(e.target.value.replace(/\D/g,""));r(i)},[r]),f=t.useCallback(()=>{var e;if(c||u)return;(e=l==null?void 0:l.current)==null||e.focus();const i=Number(o)+d;r(b(i))},[b,c,u,d,r,o]),v=t.useCallback(()=>{var e;if(p||u)return;(e=l==null?void 0:l.current)==null||e.focus();const i=Number(o)-d;r(b(i))},[b,p,u,n,d,r,o]),D=t.useCallback(e=>{if(e.nativeEvent.isComposing)return;const i=e.key,x={ArrowUp:f,ArrowRight:f,ArrowDown:v,ArrowLeft:v,Home:()=>r(n),End:()=>r(a)}[i];x&&(e.preventDefault(),x(e))},[f,v,r,n,a]),S={type:"number",value:o,...z,onChange:L,onKeyDown:D,size:w,css:{borderRadius:"0px",width:"$6","&:disabled":{opacity:.3,pointerEvents:"none"}},ref:l,readOnly:u,disabled:s,"aria-valuemin":n,"aria-valuemax":a,"aria-valuenow":o,role:"spinbutton"};return t.createElement($,{css:M},t.createElement(k,{onClick:v,icon:B,css:{borderRight:"none",borderTopRightRadius:"0px",borderBottomRightRadius:"0px"},size:R,disabled:p||s,showTooltip:p&&!s,disabledTooltipContent:h.decrement,label:g.decrement}),t.createElement(V,{...S}),t.createElement(k,{onClick:f,icon:F,css:{borderLeft:"none",borderTopLeftRadius:"0px",borderBottomLeftRadius:"0px"},size:R,disabled:c||s,showTooltip:c&&!s,disabledTooltipContent:h.increment,label:g.increment}))});N.displayName="NumberInput";export{N as NumberInput};
+import{Minus as F,Plus as H}from"@atom-learning/icons";import*as r from"react";import{styled as $}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as V}from"../../utilities/style/get-icon-size.js";import{Flex as X}from"../flex/Flex.js";import{Input as _}from"../input/Input.js";import{NumberInputStepper as k}from"./NumberInputStepper.js";const G=$(X,{variants:{appearance:{standard:{},modern:{gap:"1px"}}}}),N=r.forwardRef(({value:u,defaultValue:T=0,onValueChange:w,min:n=0,max:o=Number.MAX_SAFE_INTEGER,step:m=1,disabled:s=!1,readonly:p=!1,size:x="md",stepperButtonLabels:A,disabledTooltipContent:I,css:M,appearance:d="standard",...z},L)=>{const[a,E]=r.useState(u||T);r.useEffect(()=>{typeof u<"u"&&E(u)},[u]);const l=r.useRef(null);r.useImperativeHandle(L,()=>l.current);const R=r.useMemo(()=>V(x),[x]),h={increment:"increment",decrement:"decrement",...A},y={decrement:`Cannot enter values below ${n}`,increment:`Cannot enter values above ${o}`,...I},c=a>=o,b=a<=n,f=r.useCallback(e=>Math.min(Math.max(e,n),o),[o,n]),t=r.useCallback(e=>{w==null||w(e),E(e)},[w]),B=r.useCallback(e=>{const i=Number(e.target.value.replace(/\D/g,""));t(i)},[t]),v=r.useCallback(()=>{var e;if(c||p)return;(e=l==null?void 0:l.current)==null||e.focus();const i=Number(a)+m;t(f(i))},[f,c,p,m,t,a]),C=r.useCallback(()=>{var e;if(b||p)return;(e=l==null?void 0:l.current)==null||e.focus();const i=Number(a)-m;t(f(i))},[f,b,p,n,m,t,a]),D=r.useCallback(e=>{if(e.nativeEvent.isComposing)return;const i=e.key,g={ArrowUp:v,ArrowRight:v,ArrowDown:C,ArrowLeft:C,Home:()=>t(n),End:()=>t(o)}[i];g&&(e.preventDefault(),g(e))},[v,C,t,n,o]),S={type:"number",value:a,...z,onChange:B,onKeyDown:D,size:x,appearance:d,css:{borderRadius:"0px",width:"$6","&:disabled":{opacity:.3,pointerEvents:"none"}},ref:l,readOnly:p,disabled:s,"aria-valuemin":n,"aria-valuemax":o,"aria-valuenow":a,role:"spinbutton"};return r.createElement(G,{appearance:d,css:M},r.createElement(k,{onClick:C,icon:F,css:{borderRight:"none",borderTopRightRadius:"0px",borderBottomRightRadius:"0px"},size:R,fieldAppearance:d,disabled:b||s,showTooltip:b&&!s,disabledTooltipContent:y.decrement,label:h.decrement}),r.createElement(_,{...S}),r.createElement(k,{onClick:v,icon:H,css:{borderLeft:"none",borderTopLeftRadius:"0px",borderBottomLeftRadius:"0px"},size:R,fieldAppearance:d,disabled:c||s,showTooltip:c&&!s,disabledTooltipContent:y.increment,label:h.increment}))});N.displayName="NumberInput";export{N as NumberInput};
 //# sourceMappingURL=NumberInput.js.map

package/dist/components/number-input/NumberInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInput.js","sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport type { CSS } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\n\nimport { Flex } from '../flex'\nimport { Input } from '../input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n name: string\n min?: number\n max?: number\n step?: number\n value?: number\n defaultValue?: number\n disabled?: boolean\n readonly?: boolean\n size?: 'sm' \| 'md' \| 'lg'\n onValueChange?: (value: number) => void\n stepperButtonLabels?: { increment?: string; decrement?: string }\n disabledTooltipContent?: { increment?: string; decrement?: string }\n css?: CSS\n}\n\nexport const NumberInput: React.ForwardRefExoticComponent<\n NumberInputProps & { ref: React.Ref<HTMLInputElement> }\n> = React.forwardRef(\n (\n {\n value,\n defaultValue = 0,\n onValueChange,\n min = 0,\n max = Number.MAX_SAFE_INTEGER,\n step = 1,\n disabled: isDisabled = false,\n readonly: isReadOnly = false,\n size = 'md',\n stepperButtonLabels: stepperButtonLabelsProp,\n disabledTooltipContent: disabledTooltipContentProp,\n css,\n ...rest\n },\n ref\n ): JSX.Element => {\n const [internalValue, setInternalValue] = React.useState<number>(\n value \|\| defaultValue\n )\n React.useEffect(() => {\n // Update the internal value to match what is passed in.\n if (typeof value !== 'undefined') setInternalValue(value)\n }, [value])\n\n const inputRef = React.useRef<HTMLInputElement \| null>(null)\n\n React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n const stepperButtonLabels = {\n increment: 'increment',\n decrement: 'decrement',\n ...stepperButtonLabelsProp\n }\n\n const disabledTooltipContent = {\n decrement: `Cannot enter values below ${min}`,\n increment: `Cannot enter values above ${max}`,\n ...disabledTooltipContentProp\n }\n\n const isAtMax = internalValue >= max\n const isAtMin = internalValue <= min\n\n const clamp = React.useCallback(\n (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n [max, min]\n )\n\n const updateValue = React.useCallback(\n (newValue: number) => {\n onValueChange?.(newValue)\n setInternalValue(newValue)\n },\n [onValueChange]\n )\n\n const onInputChange = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n updateValue(parsedValue)\n },\n [updateValue]\n )\n\n const increment = React.useCallback(() => {\n if (isAtMax \|\| isReadOnly) return\n inputRef?.current?.focus()\n const newValue = Number(internalValue) + step\n updateValue(clamp(newValue))\n }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n const decrement = React.useCallback(() => {\n if (isAtMin \|\| isReadOnly) return\n inputRef?.current?.focus()\n const newValue = Number(internalValue) - step\n updateValue(clamp(newValue))\n }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n const onKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.nativeEvent.isComposing) return\n\n /*\n Keyboard Accessibility\n \n We want to increase or decrease the input's value\n * based on if the user the arrow keys.\n \n @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n */\n const eventKey = event.key\n\n const keyMap: Record<string, React.KeyboardEventHandler> = {\n ArrowUp: increment,\n ArrowRight: increment,\n ArrowDown: decrement,\n ArrowLeft: decrement,\n Home: () => updateValue(min),\n End: () => updateValue(max)\n }\n\n const action = keyMap[eventKey]\n\n if (action) {\n event.preventDefault()\n action(event)\n }\n },\n [increment, decrement, updateValue, min, max]\n )\n\n const inputProps: React.ComponentProps<typeof Input> = {\n type: 'number',\n value: internalValue,\n ...rest,\n onChange: onInputChange,\n onKeyDown,\n size,\n css: {\n borderRadius: '0px',\n width: '$6',\n '&:disabled': { opacity: 0.3, pointerEvents: 'none' }\n },\n ref: inputRef,\n readOnly: isReadOnly,\n disabled: isDisabled,\n 'aria-valuemin': min,\n 'aria-valuemax': max,\n 'aria-valuenow': internalValue,\n role: 'spinbutton'\n }\n\n return (\n <~~Flex~~ css={css}>\n <NumberInputStepper\n onClick={decrement}\n icon={Minus}\n css={{\n borderRight: 'none',\n borderTopRightRadius: '0px',\n borderBottomRightRadius: '0px'\n }}\n size={iconSize}\n disabled={isAtMin \|\| isDisabled}\n showTooltip={isAtMin && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.decrement}\n label={stepperButtonLabels.decrement}\n />\n <Input {...inputProps} />\n <NumberInputStepper\n onClick={increment}\n icon={Plus}\n css={{\n borderLeft: 'none',\n borderTopLeftRadius: '0px',\n borderBottomLeftRadius: '0px'\n }}\n size={iconSize}\n disabled={isAtMax \|\| isDisabled}\n showTooltip={isAtMax && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.increment}\n label={stepperButtonLabels.increment}\n />\n </~~Flex~~>\n )\n }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","css","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","inputProps","~~Flex","~~NumberInputStepper","Minus","Input","Plus"],"mappings":"~~yfA0BO~~,MAAMA,EAETC,EAAM,WACR,CACE,CACE,MAAAC,EACA,aAAAC,EAAe,EACf,cAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,OAAO,iBACb,KAAAC,EAAO,EACP,SAAUC,EAAa,GACvB,SAAUC,EAAa,GACvB,KAAAC,EAAO,KACP,oBAAqBC,EACrB,uBAAwBC,EACxB,IAAAC,~~KACGC~~,CACL,EACAC,IACgB,CAChB,KAAM,CAACC,EAAeC,CAAgB,~~EAAIhB~~,EAAM,SAC9CC,GAASC,CACX,EACAF,EAAM,UAAU,IAAM,CAEhB,OAAOC,EAAU,~~KAAae~~,~~EAAiBf~~,CAAK,CAC1D,EAAG,CAACA,CAAK,CAAC,EAEV,~~MAAMgB~~,~~EAAWjB~~,EAAM,OAAgC,IAAI,EAE3DA,EAAM,~~oBAAoBc~~,EAAK,IAAMG,EAAS,OAA2B,EAEzE,MAAMC,~~EAAWlB~~,EAAM,QAAQ,~~IAAMmB~~,~~EAAiBV~~,CAAI,EAAG,CAACA,CAAI,CAAC,~~EAE7DW~~,EAAsB,CAC1B,UAAW,YACX,UAAW,YACX,~~GAAGV~~,CACL,~~EAEMW~~,EAAyB,CAC7B,UAAW,~~6BAA6BjB~~,IACxC,UAAW,6BAA6BC,IACxC,GAAGM,CACL,~~EAEMW~~,EAAUP,~~GAAiBV~~,~~EAC3BkB~~,EAAUR,~~GAAiBX~~,~~EAE3BoB~~,~~EAAQxB~~,EAAM,~~YACjBe~~,GAA0B,KAAK,IAAI,KAAK,IAAIA,~~EAAeX~~,CAAG,EAAGC,CAAG,EACrE,CAACA,EAAKD,CAAG,CACX,~~EAEMqB~~,~~EAAczB~~,EAAM,~~YACvB0B~~,GAAqB,~~CACpBvB~~,GAAA,MAAAA,~~EAAgBuB~~,CAChBV,EAAAA,EAAiBU,CAAQ,CAC3B,EACA,~~CAACvB~~,CAAa,CAChB,~~EAEMwB~~,~~EAAgB3B~~,EAAM,~~YACzB4B~~,GAA+C,CAC9C,MAAMC,EAAc,OAAOD,EAAM,OAAO,MAAM,QAAQ,MAAO,EAAE,CAAC,EAChEH,EAAYI,CAAW,CACzB,EACA,CAACJ,CAAW,CACd,EAEMK,~~EAAY9B~~,EAAM,YAAY,IAAM,~~CAjG9C~~,~~IAAA+B~~,~~EAkGM~~,GAAIT,~~GAAWd~~,EAAY,~~QAC3BuB~~,EAAAd,GAAA,~~KAAA~~,OAAAA,EAAU,UAAV,MAAAc,EAAmB,~~MAAA~~,~~EACnB,~~MAAML,EAAW,OAAOX,CAAa,~~EAAIT~~,~~EACzCmB~~,EAAYD,EAAME,CAAQ,CAAC,CAC7B,EAAG,CAACF,EAAOF,~~EAASd~~,EAAYF,~~EAAMmB~~,EAAaV,CAAa,CAAC,EAE3DiB,~~EAAYhC~~,EAAM,YAAY,IAAM,~~CAxG9C~~,~~IAAA+B~~,~~EAyGM~~,GAAIR,~~GAAWf~~,EAAY,~~QAC3BuB~~,EAAAd,GAAA,~~KAAA~~,OAAAA,EAAU,UAAV,MAAAc,EAAmB,~~QACnB~~,MAAML,EAAW,OAAOX,CAAa,~~EAAIT~~,~~EACzCmB~~,EAAYD,EAAME,CAAQ,CAAC,CAC7B,EAAG,CAACF,EAAOD,~~EAASf~~,EAAYJ,EAAKE,~~EAAMmB~~,EAAaV,CAAa,CAAC,EAEhEkB,~~EAAYjC~~,EAAM,~~YACrB4B~~,GAA+B,CAC9B,GAAIA,EAAM,YAAY,YAAa,OAUnC,MAAMM,EAAWN,EAAM,IAWjBO,EATqD,CACzD,QAASL,EACT,WAAYA,EACZ,UAAWE,EACX,UAAWA,EACX,KAAM,IAAMP,~~EAAYrB~~,CAAG,EAC3B,IAAK,~~IAAMqB~~,~~EAAYpB~~,CAAG,CAC5B,~~EAEsB6B~~,GAElBC,IACFP,EAAM,~~iBACNO~~,EAAOP,CAAK,EAEhB,EACA,CAACE,EAAWE,EAAWP,~~EAAarB~~,EAAKC,CAAG,CAC9C,~~EAEM+B~~,EAAiD,CACrD,KAAM,SACN,MAAOrB,EACP,GAAGF,EACH,SAAUc,EACV,UAAAM,EACA,~~KAAAxB~~,EACA,IAAK,CACH,aAAc,MACd,MAAO,KACP,aAAc,CAAE,QAAS,GAAK,cAAe,MAAO,CACtD,EACA,~~IAAKQ~~,EACL,~~SAAUT~~,EACV,SAAUD,EACV,gBAAiBH,EACjB,gBAAiBC,EACjB,~~gBAAiBU~~,EACjB,KAAM,YACR,EAEA,~~OACEf~~,EAAA,~~cAACqC~~,EAAA,~~CAAK~~,~~IAAKzB~~,~~CACTZ~~,~~EAAAA~~,EAAA,cAACsC,EAAA,CACC,~~QAASN~~,EACT,~~KAAMO~~,EACN,IAAK,CACH,YAAa,OACb,qBAAsB,MACtB,wBAAyB,KAC3B,EACA,~~KAAMrB~~,EACN,~~SAAUK~~,~~GAAWhB~~,EACrB,~~YAAagB~~,GAAW,~~CAAChB~~,EACzB,~~uBAAwBc~~,EAAuB,UAC/C,MAAOD,EAAoB,~~SAAA~~,~~CAC7B~~,~~EACApB~~,EAAA,cAACwC,EAAA,CAAO,~~GAAGJ~~,CAAAA,CAAY,~~EACvBpC~~,EAAA,cAACsC,EAAA,CACC,~~QAASR~~,EACT,~~KAAMW~~,EACN,IAAK,CACH,WAAY,OACZ,oBAAqB,MACrB,uBAAwB,KAC1B,EACA,~~KAAMvB~~,EACN,~~SAAUI~~,~~GAAWf~~,EACrB,~~YAAae~~,GAAW,~~CAACf~~,EACzB,~~uBAAwBc~~,EAAuB,UAC/C,MAAOD,EAAoB,SAC7B,CAAA,CACF,CAEJ,CACF,~~EAEArB~~,EAAY,YAAc"}
1	+ {"version":3,"file":"NumberInput.js","sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled, type CSS } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\n\nimport { Flex } from '../flex'\nimport { Input } from '../input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n name: string\n min?: number\n max?: number\n step?: number\n value?: number\n defaultValue?: number\n disabled?: boolean\n readonly?: boolean\n size?: 'sm' \| 'md' \| 'lg'\n appearance?: 'standard' \| 'modern'\n onValueChange?: (value: number) => void\n stepperButtonLabels?: { increment?: string; decrement?: string }\n disabledTooltipContent?: { increment?: string; decrement?: string }\n css?: CSS\n}\n\nconst NumberInputContainer = styled(Flex, {\n variants: {\n appearance: {\n standard: {},\n modern: { gap: '1px' }\n }\n }\n})\n\nexport const NumberInput: React.ForwardRefExoticComponent<\n NumberInputProps & { ref: React.Ref<HTMLInputElement> }\n> = React.forwardRef(\n (\n {\n value,\n defaultValue = 0,\n onValueChange,\n min = 0,\n max = Number.MAX_SAFE_INTEGER,\n step = 1,\n disabled: isDisabled = false,\n readonly: isReadOnly = false,\n size = 'md',\n stepperButtonLabels: stepperButtonLabelsProp,\n disabledTooltipContent: disabledTooltipContentProp,\n css,\n appearance = 'standard',\n ...rest\n },\n ref\n ): JSX.Element => {\n const [internalValue, setInternalValue] = React.useState<number>(\n value \|\| defaultValue\n )\n React.useEffect(() => {\n // Update the internal value to match what is passed in.\n if (typeof value !== 'undefined') setInternalValue(value)\n }, [value])\n\n const inputRef = React.useRef<HTMLInputElement \| null>(null)\n\n React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n const stepperButtonLabels = {\n increment: 'increment',\n decrement: 'decrement',\n ...stepperButtonLabelsProp\n }\n\n const disabledTooltipContent = {\n decrement: `Cannot enter values below ${min}`,\n increment: `Cannot enter values above ${max}`,\n ...disabledTooltipContentProp\n }\n\n const isAtMax = internalValue >= max\n const isAtMin = internalValue <= min\n\n const clamp = React.useCallback(\n (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n [max, min]\n )\n\n const updateValue = React.useCallback(\n (newValue: number) => {\n onValueChange?.(newValue)\n setInternalValue(newValue)\n },\n [onValueChange]\n )\n\n const onInputChange = React.useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n updateValue(parsedValue)\n },\n [updateValue]\n )\n\n const increment = React.useCallback(() => {\n if (isAtMax \|\| isReadOnly) return\n inputRef?.current?.focus()\n const newValue = Number(internalValue) + step\n updateValue(clamp(newValue))\n }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n const decrement = React.useCallback(() => {\n if (isAtMin \|\| isReadOnly) return\n inputRef?.current?.focus()\n const newValue = Number(internalValue) - step\n updateValue(clamp(newValue))\n }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n const onKeyDown = React.useCallback(\n (event: React.KeyboardEvent) => {\n if (event.nativeEvent.isComposing) return\n\n /*\n Keyboard Accessibility\n \n We want to increase or decrease the input's value\n * based on if the user the arrow keys.\n \n @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n */\n const eventKey = event.key\n\n const keyMap: Record<string, React.KeyboardEventHandler> = {\n ArrowUp: increment,\n ArrowRight: increment,\n ArrowDown: decrement,\n ArrowLeft: decrement,\n Home: () => updateValue(min),\n End: () => updateValue(max)\n }\n\n const action = keyMap[eventKey]\n\n if (action) {\n event.preventDefault()\n action(event)\n }\n },\n [increment, decrement, updateValue, min, max]\n )\n\n const inputProps: React.ComponentProps<typeof Input> = {\n type: 'number',\n value: internalValue,\n ...rest,\n onChange: onInputChange,\n onKeyDown,\n size,\n appearance,\n css: {\n borderRadius: '0px',\n width: '$6',\n '&:disabled': { opacity: 0.3, pointerEvents: 'none' }\n },\n ref: inputRef,\n readOnly: isReadOnly,\n disabled: isDisabled,\n 'aria-valuemin': min,\n 'aria-valuemax': max,\n 'aria-valuenow': internalValue,\n role: 'spinbutton'\n }\n\n return (\n <NumberInputContainer appearance={appearance} css={css}>\n <NumberInputStepper\n onClick={decrement}\n icon={Minus}\n css={{\n borderRight: 'none',\n borderTopRightRadius: '0px',\n borderBottomRightRadius: '0px'\n }}\n size={iconSize}\n fieldAppearance={appearance}\n disabled={isAtMin \|\| isDisabled}\n showTooltip={isAtMin && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.decrement}\n label={stepperButtonLabels.decrement}\n />\n <Input {...inputProps} />\n <NumberInputStepper\n onClick={increment}\n icon={Plus}\n css={{\n borderLeft: 'none',\n borderTopLeftRadius: '0px',\n borderBottomLeftRadius: '0px'\n }}\n size={iconSize}\n fieldAppearance={appearance}\n disabled={isAtMax \|\| isDisabled}\n showTooltip={isAtMax && !isDisabled}\n disabledTooltipContent={disabledTooltipContent.increment}\n label={stepperButtonLabels.increment}\n />\n </NumberInputContainer>\n )\n }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInputContainer","styled","Flex","NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","css","appearance","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","inputProps","NumberInputStepper","Minus","Input","Plus"],"mappings":"0gBA2BA,MAAMA,EAAuBC,EAAOC,EAAM,CACxC,SAAU,CACR,WAAY,CACV,SAAU,CAAC,EACX,OAAQ,CAAE,IAAK,KAAM,CACvB,CACF,CACF,CAAC,EAEYC,EAETC,EAAM,WACR,CACE,CACE,MAAAC,EACA,aAAAC,EAAe,EACf,cAAAC,EACA,IAAAC,EAAM,EACN,IAAAC,EAAM,OAAO,iBACb,KAAAC,EAAO,EACP,SAAUC,EAAa,GACvB,SAAUC,EAAa,GACvB,KAAAC,EAAO,KACP,oBAAqBC,EACrB,uBAAwBC,EACxB,IAAAC,EACA,WAAAC,EAAa,cACVC,CACL,EACAC,IACgB,CAChB,KAAM,CAACC,EAAeC,CAAgB,EAAIjB,EAAM,SAC9CC,GAASC,CACX,EACAF,EAAM,UAAU,IAAM,CAEhB,OAAOC,EAAU,KAAagB,EAAiBhB,CAAK,CAC1D,EAAG,CAACA,CAAK,CAAC,EAEV,MAAMiB,EAAWlB,EAAM,OAAgC,IAAI,EAE3DA,EAAM,oBAAoBe,EAAK,IAAMG,EAAS,OAA2B,EAEzE,MAAMC,EAAWnB,EAAM,QAAQ,IAAMoB,EAAiBX,CAAI,EAAG,CAACA,CAAI,CAAC,EAE7DY,EAAsB,CAC1B,UAAW,YACX,UAAW,YACX,GAAGX,CACL,EAEMY,EAAyB,CAC7B,UAAW,6BAA6BlB,IACxC,UAAW,6BAA6BC,IACxC,GAAGM,CACL,EAEMY,EAAUP,GAAiBX,EAC3BmB,EAAUR,GAAiBZ,EAE3BqB,EAAQzB,EAAM,YACjBgB,GAA0B,KAAK,IAAI,KAAK,IAAIA,EAAeZ,CAAG,EAAGC,CAAG,EACrE,CAACA,EAAKD,CAAG,CACX,EAEMsB,EAAc1B,EAAM,YACvB2B,GAAqB,CACpBxB,GAAA,MAAAA,EAAgBwB,CAChBV,EAAAA,EAAiBU,CAAQ,CAC3B,EACA,CAACxB,CAAa,CAChB,EAEMyB,EAAgB5B,EAAM,YACzB6B,GAA+C,CAC9C,MAAMC,EAAc,OAAOD,EAAM,OAAO,MAAM,QAAQ,MAAO,EAAE,CAAC,EAChEH,EAAYI,CAAW,CACzB,EACA,CAACJ,CAAW,CACd,EAEMK,EAAY/B,EAAM,YAAY,IAAM,CA5G9C,IAAAgC,EA6GM,GAAIT,GAAWf,EAAY,QAC3BwB,EAAAd,GAAA,KAAAA,OAAAA,EAAU,UAAV,MAAAc,EAAmB,QACnB,MAAML,EAAW,OAAOX,CAAa,EAAIV,EACzCoB,EAAYD,EAAME,CAAQ,CAAC,CAC7B,EAAG,CAACF,EAAOF,EAASf,EAAYF,EAAMoB,EAAaV,CAAa,CAAC,EAE3DiB,EAAYjC,EAAM,YAAY,IAAM,CAnH9C,IAAAgC,EAoHM,GAAIR,GAAWhB,EAAY,QAC3BwB,EAAAd,GAAA,KAAAA,OAAAA,EAAU,UAAV,MAAAc,EAAmB,MAAA,EACnB,MAAML,EAAW,OAAOX,CAAa,EAAIV,EACzCoB,EAAYD,EAAME,CAAQ,CAAC,CAC7B,EAAG,CAACF,EAAOD,EAAShB,EAAYJ,EAAKE,EAAMoB,EAAaV,CAAa,CAAC,EAEhEkB,EAAYlC,EAAM,YACrB6B,GAA+B,CAC9B,GAAIA,EAAM,YAAY,YAAa,OAUnC,MAAMM,EAAWN,EAAM,IAWjBO,EATqD,CACzD,QAASL,EACT,WAAYA,EACZ,UAAWE,EACX,UAAWA,EACX,KAAM,IAAMP,EAAYtB,CAAG,EAC3B,IAAK,IAAMsB,EAAYrB,CAAG,CAC5B,EAEsB8B,GAElBC,IACFP,EAAM,eACNO,EAAAA,EAAOP,CAAK,EAEhB,EACA,CAACE,EAAWE,EAAWP,EAAatB,EAAKC,CAAG,CAC9C,EAEMgC,EAAiD,CACrD,KAAM,SACN,MAAOrB,EACP,GAAGF,EACH,SAAUc,EACV,UAAAM,EACA,KAAAzB,EACA,WAAAI,EACA,IAAK,CACH,aAAc,MACd,MAAO,KACP,aAAc,CAAE,QAAS,GAAK,cAAe,MAAO,CACtD,EACA,IAAKK,EACL,SAAUV,EACV,SAAUD,EACV,gBAAiBH,EACjB,gBAAiBC,EACjB,gBAAiBW,EACjB,KAAM,YACR,EAEA,OACEhB,EAAA,cAACJ,EAAA,CAAqB,WAAYiB,EAAY,IAAKD,CAAAA,EACjDZ,EAAA,cAACsC,EAAA,CACC,QAASL,EACT,KAAMM,EACN,IAAK,CACH,YAAa,OACb,qBAAsB,MACtB,wBAAyB,KAC3B,EACA,KAAMpB,EACN,gBAAiBN,EACjB,SAAUW,GAAWjB,EACrB,YAAaiB,GAAW,CAACjB,EACzB,uBAAwBe,EAAuB,UAC/C,MAAOD,EAAoB,SAC7B,CAAA,EACArB,EAAA,cAACwC,EAAA,CAAO,GAAGH,CAAAA,CAAY,EACvBrC,EAAA,cAACsC,EAAA,CACC,QAASP,EACT,KAAMU,EACN,IAAK,CACH,WAAY,OACZ,oBAAqB,MACrB,uBAAwB,KAC1B,EACA,KAAMtB,EACN,gBAAiBN,EACjB,SAAUU,GAAWhB,EACrB,YAAagB,GAAW,CAAChB,EACzB,uBAAwBe,EAAuB,UAC/C,MAAOD,EAAoB,SAC7B,CAAA,CACF,CAEJ,CACF,EAEAtB,EAAY,YAAc"}