npm - @atom-learning/components - Versions diffs - 6.9.0 → 6.10.0 - Mend

@atom-learning/components 6.9.0 → 6.10.0

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 (43) hide show

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

@@ -3,12 +3,15 @@ import * as React$1 from "react";
 import { FormProvider, useForm } from "react-hook-form";
 //#region src/components/form/Form.tsx
 var Form = (props) => {
-	const { children, defaultValues, validationMode = "onBlur", onSubmit, onError, appearance, ...rest } = props;
+	const { children, defaultValues, validationMode = "onBlur", onSubmit, onError, appearance, theme, ...rest } = props;
 	const methods = useForm({
 		defaultValues,
 		mode: validationMode
 	});
-	return /* @__PURE__ */ React$1.createElement(FormProvider, methods, /* @__PURE__ */ React$1.createElement(FormCustomContext.Provider, { value: { appearance } }, /* @__PURE__ */ React$1.createElement("form", {
+	return /* @__PURE__ */ React$1.createElement(FormProvider, methods, /* @__PURE__ */ React$1.createElement(FormCustomContext.Provider, { value: {
+		appearance,
+		theme
+	} }, /* @__PURE__ */ React$1.createElement("form", {
 		"aria-label": "form",
 		onSubmit: methods.handleSubmit(onSubmit, onError),
 		...rest

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import * as React from 'react'\nimport type {\n DefaultValues,\n FieldValues,\n Mode,\n SubmitErrorHandler,\n SubmitHandler,\n UseFormMethods\n} from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\n\nimport {\n type FormCustomContextType,\n FormCustomContext\n} from './useFormCustomContext'\n\ntype FormProps<TFormData extends FieldValues> = Omit<\n React.HTMLAttributes<HTMLFormElement>,\n 'onSubmit' \| 'onError' \| 'children'\n> & {\n defaultValues?: DefaultValues<TFormData>\n validationMode?: Mode\n onSubmit: SubmitHandler<TFormData>\n onError?: SubmitErrorHandler<TFormData>\n noValidate?: boolean\n children:\n \| React.ReactNode\n \| ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n props: FormProps<TFormData> & FormCustomContextType\n) => {\n const {\n children,\n defaultValues,\n validationMode = 'onBlur',\n onSubmit,\n onError,\n appearance,\n ...rest\n } = props\n\n const methods = useForm<TFormData>({\n defaultValues,\n mode: validationMode\n })\n\n return (\n <FormProvider {...methods}>\n <FormCustomContext.Provider value={{ appearance }}>\n <form\n aria-label=\"form\"\n onSubmit={methods.handleSubmit(onSubmit, onError)}\n {...rest}\n >\n {typeof children === 'function' ? children(methods) : children}\n </form>\n </FormCustomContext.Provider>\n </FormProvider>\n )\n}\n\nForm.displayName = 'Form'\n"],"mappings":";;;;AA8BA,IAAa,QACX,UACG;CACH,MAAM,EACJ,UACA,eACA,iBAAiB,UACjB,UACA,SACA,YACA,GAAG,SACD;CAEJ,MAAM,UAAU,QAAmB;EACjC;EACA,MAAM;EACP,CAAC;AAEF,QACE,wBAAA,cAAC,cAAiB,SAChB,wBAAA,cAAC,kBAAkB,UAAnB,EAA4B,OAAO,EAAE,~~YAAY~~,~~EAQpB,~~EAP3B,wBAAA,cAAC,QAAD;EACE,cAAW;EACX,UAAU,QAAQ,aAAa,UAAU,QAAQ;EACjD,GAAI;EAGC,EADJ,OAAO,aAAa,aAAa,SAAS,QAAQ,GAAG,SACjD,CACoB,CAChB;;AAInB,KAAK,cAAc"}
1	+ {"version":3,"file":"Form.js","names":[],"sources":["../../../src/components/form/Form.tsx"],"sourcesContent":["import * as React from 'react'\nimport type {\n DefaultValues,\n FieldValues,\n Mode,\n SubmitErrorHandler,\n SubmitHandler,\n UseFormMethods\n} from 'react-hook-form'\nimport { FormProvider, useForm } from 'react-hook-form'\n\nimport {\n type FormCustomContextType,\n FormCustomContext\n} from './useFormCustomContext'\n\ntype FormProps<TFormData extends FieldValues> = Omit<\n React.HTMLAttributes<HTMLFormElement>,\n 'onSubmit' \| 'onError' \| 'children'\n> & {\n defaultValues?: DefaultValues<TFormData>\n validationMode?: Mode\n onSubmit: SubmitHandler<TFormData>\n onError?: SubmitErrorHandler<TFormData>\n noValidate?: boolean\n children:\n \| React.ReactNode\n \| ((methods: UseFormMethods<TFormData>) => React.ReactNode)\n}\n\nexport const Form = <TFormData extends FieldValues>(\n props: FormProps<TFormData> & FormCustomContextType\n) => {\n const {\n children,\n defaultValues,\n validationMode = 'onBlur',\n onSubmit,\n onError,\n appearance,\n theme,\n ...rest\n } = props\n\n const methods = useForm<TFormData>({\n defaultValues,\n mode: validationMode\n })\n\n return (\n <FormProvider {...methods}>\n <FormCustomContext.Provider value={{ appearance, theme }}>\n <form\n aria-label=\"form\"\n onSubmit={methods.handleSubmit(onSubmit, onError)}\n {...rest}\n >\n {typeof children === 'function' ? children(methods) : children}\n </form>\n </FormCustomContext.Provider>\n </FormProvider>\n )\n}\n\nForm.displayName = 'Form'\n"],"mappings":";;;;AA8BA,IAAa,QACX,UACG;CACH,MAAM,EACJ,UACA,eACA,iBAAiB,UACjB,UACA,SACA,YACA,OACA,GAAG,SACD;CAEJ,MAAM,UAAU,QAAmB;EACjC;EACA,MAAM;EACP,CAAC;AAEF,QACE,wBAAA,cAAC,cAAiB,SAChB,wBAAA,cAAC,kBAAkB,UAAnB,EAA4B,OAAO;EAAE;EAAY;EAAO,EAQ3B,EAP3B,wBAAA,cAAC,QAAD;EACE,cAAW;EACX,UAAU,QAAQ,aAAa,UAAU,QAAQ;EACjD,GAAI;EAGC,EADJ,OAAO,aAAa,aAAa,SAAS,QAAQ,GAAG,SACjD,CACoB,CAChB;;AAInB,KAAK,cAAc"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"useFormCustomContext.js","names":[],"sources":["../../../src/components/form/useFormCustomContext.ts"],"sourcesContent":["import * as React from 'react'\n\nimport { ~~InputField~~ } from '../input~~-field~~/~~InputField~~'\n\nexport type FormCustomContextType =\n \| {\n appearance?: ~~React.ComponentProps<typeof InputField>~~['appearance']\n }\n \| undefined\n\nexport const FormCustomContext = React.createContext<FormCustomContextType>({\n appearance: 'standard'\n})\n\nexport const useFormCustomContext = () => React.useContext(FormCustomContext)\n"],"mappings":";;~~AAUA~~,IAAa,oBAAoB,QAAM,cAAqC,EAC1E,YAAY,YACb,CAAC;AAEF,IAAa,6BAA6B,QAAM,WAAW,kBAAkB"}
1	+ {"version":3,"file":"useFormCustomContext.js","names":[],"sources":["../../../src/components/form/useFormCustomContext.ts"],"sourcesContent":["import * as React from 'react'\n\nimport type { InputProps } from '../input/Input'\n\nexport type FormCustomContextType =\n \| {\n appearance?: InputProps['appearance']\n theme?: InputProps['theme']\n }\n \| undefined\n\nexport const FormCustomContext = React.createContext<FormCustomContextType>({\n appearance: 'standard'\n})\n\nexport const useFormCustomContext = () => React.useContext(FormCustomContext)\n"],"mappings":";;AAWA,IAAa,oBAAoB,QAAM,cAAqC,EAC1E,YAAY,YACb,CAAC;AAEF,IAAa,6BAA6B,QAAM,WAAW,kBAAkB"}

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

@@ -1,11 +1,12 @@
 import * as React from 'react';
 export declare const InputBackground: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
-}, "appearance" | "size" | "disabled" | "state"> & {
+}, "appearance" | "size" | "theme" | "disabled" | "state"> & {
     appearance?: "standard" | "modern" | undefined;
     size?: "sm" | "md" | "lg" | "xl" | undefined;
     disabled?: boolean | undefined;
     state?: "error" | undefined;
+    theme?: "grey" | "white" | undefined;
 } & {
     as?: React.ElementType;
 }>;
@@ -34,6 +35,7 @@ export type InputProps = Omit<React.ComponentProps<typeof InputText>, 'size' | '
     size?: InputBackgroundProps['size'];
     state?: InputBackgroundProps['state'];
     appearance?: InputBackgroundProps['appearance'];
+    theme?: InputBackgroundProps['theme'];
     disabled?: boolean;
     name?: string;
     readOnly?: boolean;

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

@@ -39,17 +39,34 @@ var InputBackground = styled("div", {
 			xl: ["h-16"]
 		},
 		disabled: { true: ["cursor-not-allowed", "opacity-30"] },
-		state: { error: [] }
+		state: { error: [] },
+		theme: {
+			white: [],
+			grey: []
+		}
 	},
-	compoundVariants: [{
-		state: "error",
-		appearance: "standard",
-		class: ["border-danger"]
-	}, {
-		state: "error",
-		appearance: "modern",
-		class: ["bg-danger-light", "focus-within:outline-danger"]
-	}]
+	compoundVariants: [
+		{
+			state: "error",
+			appearance: "standard",
+			class: ["border-danger"]
+		},
+		{
+			state: "error",
+			appearance: "modern",
+			class: ["bg-danger-light", "focus-within:outline-danger"]
+		},
+		{
+			appearance: "modern",
+			theme: "white",
+			class: ["bg-white"]
+		},
+		{
+			appearance: "modern",
+			theme: "grey",
+			class: ["bg-grey-100"]
+		}
+	]
 });
 InputBackground.displayName = "InputBackground";
 var StyledInputText = styled(Text, { base: [
@@ -84,10 +101,11 @@ var InputText = React$1.forwardRef(({ type = "text", size, ...rest }, ref) => {
 	});
 });
 InputText.displayName = "InputText";
-var Input = React$1.forwardRef(({ className, size = "md", appearance = "standard", state, disabled, style, ...rest }, ref) => {
+var Input = React$1.forwardRef(({ className, size = "md", appearance = "standard", theme, state, disabled, style, ...rest }, ref) => {
 	return /* @__PURE__ */ React$1.createElement(InputBackground, {
 		size,
 		appearance,
+		theme,
 		disabled,
 		state,
 		className,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Text } from '../text/Text'\n\nexport const InputBackground = styled('div', {\n base: [\n 'flex',\n 'text-grey-1000',\n 'transition-[background,border-color]',\n 'duration-100',\n 'ease-out',\n 'w-full'\n ],\n variants: {\n appearance: {\n standard: [\n 'bg-white',\n 'border',\n 'border-grey-800',\n 'focus-within:border-blue-800',\n 'rounded-md'\n ],\n modern: [\n 'bg-grey-100',\n 'border-none',\n 'focus-within:outline-2',\n 'focus-within:outline-blue-800',\n 'focus-within:outline-offset-1',\n 'focus-within:outline-solid',\n 'focus-within:z-1',\n 'rounded-md'\n ]\n },\n size: {\n sm: ['h-8'],\n md: ['h-10'],\n lg: ['h-12'],\n xl: ['h-16']\n },\n disabled: {\n true: ['cursor-not-allowed', 'opacity-30']\n },\n state: {\n error: []\n }\n },\n compoundVariants: [\n {\n state: 'error',\n appearance: 'standard',\n class: ['border-danger']\n },\n {\n state: 'error',\n appearance: 'modern',\n class: ['bg-danger-light', 'focus-within:outline-danger']\n }\n ]\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled(Text, {\n base: [\n 'appearance-none',\n 'border-none',\n 'bg-none',\n 'bg-transparent',\n 'shadow-none',\n 'box-border',\n 'focus:outline-none',\n 'px-3',\n 'size-full',\n 'placeholder:opacity-100',\n 'placeholder:text-grey-700'\n ]\n})\n\nexport type InputTextProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'size'\n> &\n Omit<React.ComponentProps<typeof StyledInputText>, 'type' \| 'as'> & {\n // override default 'type' property to prevent Input from being used to render\n // checkboxes, radios etc — we have dedicated components for them\n type?: 'text' \| 'number' \| 'email' \| 'password' \| 'tel' \| 'url' \| 'search'\n as?: never\n disabled?: boolean\n }\n\nconst toTextSize = {\n sm: 'sm',\n md: 'md',\n lg: 'md',\n xl: 'lg'\n}\n\nexport const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(\n ({ type = 'text', size, ...rest }, ref) => {\n const textSize = React.useMemo(\n () => overrideStyledVariantValue(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 as any)}\n />\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 disabled?: boolean\n name?: string\n readOnly?: boolean\n value?: string \| number\n onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n size = 'md',\n appearance = 'standard',\n state,\n disabled,\n style,\n ...rest\n },\n ref\n ) => {\n return (\n <InputBackground\n size={size}\n appearance={appearance}\n disabled={disabled}\n state={state}\n className={className}\n style={style}\n >\n <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n </InputBackground>\n )\n }\n)\n\nInput.displayName = 'Input'\n"],"mappings":";;;;;AAOA,IAAa,kBAAkB,OAAO,OAAO;CAC3C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACb;EACD,UAAU,EACR,MAAM,CAAC,sBAAsB,aAAa,EAC3C;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACF;CACD,kBAAkB~~,CAChB~~;~~EACE~~,OAAO;~~EACP~~,YAAY;~~EACZ~~,OAAO,CAAC,gBAAgB;~~EACzB,~~EACD;~~EACE~~,OAAO;~~EACP~~,YAAY;~~EACZ~~,OAAO,CAAC,mBAAmB,8BAA8B;~~EAC1D~~,~~CACF~~;CACF,CAAC;AAEF,gBAAgB,cAAc;AAE9B,IAAM,kBAAkB,OAAO,MAAM,EACnC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAcF,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,YAAY,QAAM,YAC5B,EAAE,OAAO,QAAQ,MAAM,GAAG,QAAQ,QAAQ;CACzC,MAAM,WAAW,QAAM,cACf,2BAA2B,OAAO,MAAM,WAAW,GAAG,EAC5D,CAAC,KAAK,CACP;AAED,QACE,wBAAA,cAAC,iBAAD;EACO;EACL,IAAG;EACH,MAAM,SAAS,WAAW,SAAS;EACnC,WAAW,SAAS,WAAW,YAAY,KAAA;EAC3C,SAAS,SAAS,WAAW,WAAW,KAAA;EACxC,MAAM;EACN,GAAK;EACL,CAAA;EAGP;AAED,UAAU,cAAc;~~AAiBxB~~,IAAa,QAAQ,QAAM,YAEvB,EACE,WACA,OAAO,MACP,aAAa,YACb,OACA,UACA,OACA,GAAG,QAEL,QACG;AACH,QACE,wBAAA,cAAC,iBAAD;EACQ;EACM;~~EACF~~;EACH;EACI;EACJ;EAGS,EADhB,wBAAA,cAAC,WAAD;EAAiB;EAAW;EAAe;EAAU,GAAI;EAAQ,CAAA,CACjD;EAGvB;AAED,MAAM,cAAc"}
1	+ {"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { overrideStyledVariantValue } from '~/utilities/override-styled-variant-value/overrideStyledVariantValue'\n\nimport { Text } from '../text/Text'\n\nexport const InputBackground = styled('div', {\n base: [\n 'flex',\n 'text-grey-1000',\n 'transition-[background,border-color]',\n 'duration-100',\n 'ease-out',\n 'w-full'\n ],\n variants: {\n appearance: {\n standard: [\n 'bg-white',\n 'border',\n 'border-grey-800',\n 'focus-within:border-blue-800',\n 'rounded-md'\n ],\n modern: [\n 'bg-grey-100',\n 'border-none',\n 'focus-within:outline-2',\n 'focus-within:outline-blue-800',\n 'focus-within:outline-offset-1',\n 'focus-within:outline-solid',\n 'focus-within:z-1',\n 'rounded-md'\n ]\n },\n size: {\n sm: ['h-8'],\n md: ['h-10'],\n lg: ['h-12'],\n xl: ['h-16']\n },\n disabled: {\n true: ['cursor-not-allowed', 'opacity-30']\n },\n state: {\n error: []\n },\n theme: {\n white: [],\n grey: []\n }\n },\n compoundVariants: [\n {\n state: 'error',\n appearance: 'standard',\n class: ['border-danger']\n },\n {\n state: 'error',\n appearance: 'modern',\n class: ['bg-danger-light', 'focus-within:outline-danger']\n },\n {\n appearance: 'modern',\n theme: 'white',\n class: ['bg-white']\n },\n {\n appearance: 'modern',\n theme: 'grey',\n class: ['bg-grey-100']\n }\n ]\n})\n\nInputBackground.displayName = 'InputBackground'\n\nconst StyledInputText = styled(Text, {\n base: [\n 'appearance-none',\n 'border-none',\n 'bg-none',\n 'bg-transparent',\n 'shadow-none',\n 'box-border',\n 'focus:outline-none',\n 'px-3',\n 'size-full',\n 'placeholder:opacity-100',\n 'placeholder:text-grey-700'\n ]\n})\n\nexport type InputTextProps = Omit<\n React.InputHTMLAttributes<HTMLInputElement>,\n 'size'\n> &\n Omit<React.ComponentProps<typeof StyledInputText>, 'type' \| 'as'> & {\n // override default 'type' property to prevent Input from being used to render\n // checkboxes, radios etc — we have dedicated components for them\n type?: 'text' \| 'number' \| 'email' \| 'password' \| 'tel' \| 'url' \| 'search'\n as?: never\n disabled?: boolean\n }\n\nconst toTextSize = {\n sm: 'sm',\n md: 'md',\n lg: 'md',\n xl: 'lg'\n}\n\nexport const InputText = React.forwardRef<HTMLInputElement, InputTextProps>(\n ({ type = 'text', size, ...rest }, ref) => {\n const textSize = React.useMemo(\n () => overrideStyledVariantValue(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 as any)}\n />\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 theme?: InputBackgroundProps['theme']\n disabled?: boolean\n name?: string\n readOnly?: boolean\n value?: string \| number\n onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n (\n {\n className,\n size = 'md',\n appearance = 'standard',\n theme,\n state,\n disabled,\n style,\n ...rest\n },\n ref\n ) => {\n return (\n <InputBackground\n size={size}\n appearance={appearance}\n theme={theme}\n disabled={disabled}\n state={state}\n className={className}\n style={style}\n >\n <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n </InputBackground>\n )\n }\n)\n\nInput.displayName = 'Input'\n"],"mappings":";;;;;AAOA,IAAa,kBAAkB,OAAO,OAAO;CAC3C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACZ,IAAI,CAAC,OAAO;GACb;EACD,UAAU,EACR,MAAM,CAAC,sBAAsB,aAAa,EAC3C;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACD,OAAO;GACL,OAAO,EAAE;GACT,MAAM,EAAE;GACT;EACF;CACD,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,gBAAgB;GACzB;EACD;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,8BAA8B;GAC1D;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,WAAW;GACpB;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,cAAc;GACvB;EACF;CACF,CAAC;AAEF,gBAAgB,cAAc;AAE9B,IAAM,kBAAkB,OAAO,MAAM,EACnC,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,EACF,CAAC;AAcF,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,IAAa,YAAY,QAAM,YAC5B,EAAE,OAAO,QAAQ,MAAM,GAAG,QAAQ,QAAQ;CACzC,MAAM,WAAW,QAAM,cACf,2BAA2B,OAAO,MAAM,WAAW,GAAG,EAC5D,CAAC,KAAK,CACP;AAED,QACE,wBAAA,cAAC,iBAAD;EACO;EACL,IAAG;EACH,MAAM,SAAS,WAAW,SAAS;EACnC,WAAW,SAAS,WAAW,YAAY,KAAA;EAC3C,SAAS,SAAS,WAAW,WAAW,KAAA;EACxC,MAAM;EACN,GAAK;EACL,CAAA;EAGP;AAED,UAAU,cAAc;AAkBxB,IAAa,QAAQ,QAAM,YAEvB,EACE,WACA,OAAO,MACP,aAAa,YACb,OACA,OACA,UACA,OACA,GAAG,QAEL,QACG;AACH,QACE,wBAAA,cAAC,iBAAD;EACQ;EACM;EACL;EACG;EACH;EACI;EACJ;EAGS,EADhB,wBAAA,cAAC,WAAD;EAAiB;EAAW;EAAe;EAAU,GAAI;EAAQ,CAAA,CACjD;EAGvB;AAED,MAAM,cAAc"}

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

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

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

@@ -5,12 +5,13 @@ import { Input } from "../input/Input.js";
 import * as React$1 from "react";
 import { useFormContext } from "react-hook-form";
 //#region src/components/input-field/InputField.tsx
-var InputField = ({ className, label, name, validation, prompt, description, hideLabel, appearance, ...remainingProps }) => {
+var InputField = ({ className, label, name, validation, prompt, description, hideLabel, appearance, theme, ...remainingProps }) => {
 	const { register } = useFormContext();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
 		className,
 		description,
@@ -26,6 +27,7 @@ var InputField = ({ className, label, name, validation, prompt, description, hid
 		name,
 		ref,
 		appearance: formAppearance,
+		theme: formTheme,
 		...error && { state: "error" },
 		...remainingProps
 	}));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"InputField.js","names":[],"sources":["../../../src/components/input-field/InputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { Input, InputProps } from '~/components/input/Input'\n\ntype InputFieldProps = InputProps & FieldElementWrapperProps\n\nexport const InputField = ({\n className,\n label,\n name,\n validation,\n prompt,\n description,\n hideLabel,\n appearance,\n ...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 className={className}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={formAppearance}\n >\n <Input\n id={name}\n name={name}\n ref={ref}\n appearance={formAppearance}\n {...(error && { state: 'error' })}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nInputField.displayName = 'InputField'\n"],"mappings":";;;;;;;AAaA,IAAa,cAAc,EACzB,WACA,OACA,MACA,YACA,QACA,aACA,WACA,YACA,GAAG,qBACkB;CACrB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;~~AAE9C~~,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;~~EAUC~~,~~EARb~~,wBAAA,cAAC,OAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,CAAA,CACW;;AAInB,WAAW,cAAc"}
1	+ {"version":3,"file":"InputField.js","names":[],"sources":["../../../src/components/input-field/InputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { Input, InputProps } from '~/components/input/Input'\n\ntype InputFieldProps = InputProps & FieldElementWrapperProps\n\nexport const InputField = ({\n className,\n label,\n name,\n validation,\n prompt,\n description,\n hideLabel,\n appearance,\n theme,\n ...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 const formTheme = context?.theme ?? theme\n\n return (\n <FieldWrapper\n className={className}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={formAppearance}\n >\n <Input\n id={name}\n name={name}\n ref={ref}\n appearance={formAppearance}\n theme={formTheme}\n {...(error && { state: 'error' })}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nInputField.displayName = 'InputField'\n"],"mappings":";;;;;;;AAaA,IAAa,cAAc,EACzB,WACA,OACA,MACA,YACA,QACA,aACA,WACA,YACA,OACA,GAAG,qBACkB;CACrB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAWC,EATb,wBAAA,cAAC,OAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,OAAO;EACP,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,CAAA,CACW;;AAInB,WAAW,cAAc"}

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

@@ -10,6 +10,7 @@ export interface NumberInputProps {
     readonly?: boolean;
     size?: 'sm' | 'md' | 'lg';
     appearance?: 'standard' | 'modern';
+    theme?: 'white' | 'grey';
     emphasis?: 'bold';
     onValueChange?: (value: number) => void;
     stepperButtonLabels?: {

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

@@ -16,7 +16,7 @@ var NumberInputContainer = styled("div", {
 		emphasis: { bold: ["gap-0"] }
 	}
 });
-var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, disabled: isDisabled = false, readonly: isReadOnly = false, size = "md", stepperButtonLabels: stepperButtonLabelsProp, disabledTooltipContent: disabledTooltipContentProp, className, appearance = "standard", emphasis, ...rest }, ref) => {
+var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, disabled: isDisabled = false, readonly: isReadOnly = false, size = "md", stepperButtonLabels: stepperButtonLabelsProp, disabledTooltipContent: disabledTooltipContentProp, className, appearance = "standard", theme, emphasis, ...rest }, ref) => {
 	const [internalValue, setInternalValue] = React$1.useState(value || defaultValue);
 	React$1.useEffect(() => {
 		if (typeof value !== "undefined") setInternalValue(value);
@@ -109,6 +109,7 @@ var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange,
 		onKeyDown,
 		size,
 		appearance,
+		theme,
 		state: externalState || (hasError ? "error" : void 0),
 		"aria-invalid": externalAriaInvalid || hasError || void 0,
 		className: clsx("rounded-none", "w-16", "[&_>_input]:text-center", "disabled:opacity-30", "disabled:pointer-events-none", emphasis === "bold" && [
@@ -140,6 +141,7 @@ var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange,
 		className: clsx(emphasis !== "bold" && "border-r-none rounded-r-none"),
 		size: iconSize,
 		fieldAppearance: appearance,
+		fieldTheme: theme,
 		emphasis,
 		disabled: isAtMin || isDisabled,
 		showTooltip: isAtMin && !isDisabled,
@@ -151,6 +153,7 @@ var NumberInput = React$1.forwardRef(({ value, defaultValue = 0, onValueChange,
 		className: clsx(emphasis !== "bold" && "border-l-none rounded-l-none"),
 		size: iconSize,
 		fieldAppearance: appearance,
+		fieldTheme: theme,
 		emphasis,
 		disabled: isAtMax || isDisabled,
 		showTooltip: isAtMax && !isDisabled,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInput.js","names":[],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nimport { Input } from '../input/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 emphasis?: 'bold'\n onValueChange?: (value: number) => void\n stepperButtonLabels?: { increment?: string; decrement?: string }\n disabledTooltipContent?: { increment?: string; decrement?: string }\n className?: string\n}\n\nconst NumberInputContainer = styled('div', {\n base: ['flex'],\n variants: {\n appearance: {\n standard: [],\n modern: ['gap-px']\n },\n emphasis: {\n bold: ['gap-0']\n }\n }\n})\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\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 className,\n appearance = 'standard',\n emphasis,\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 hasError = internalValue < min \|\| internalValue > max\n const {\n state: externalState,\n 'aria-invalid': externalAriaInvalid,\n ...restProps\n } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n const inputProps: React.ComponentProps<typeof Input> = {\n type: 'number',\n value: internalValue,\n ...restProps,\n onChange: onInputChange,\n onKeyDown,\n size,\n appearance,\n state: externalState \|\| (hasError ? 'error' : undefined),\n 'aria-invalid': externalAriaInvalid \|\| hasError \|\| undefined,\n className: clsx(\n 'rounded-none',\n 'w-16',\n '[&_>_input]:text-center',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none',\n emphasis === 'bold' && [\n 'rounded-1',\n '[&_>_input[aria-invalid=true]]:text-danger',\n 'focus-within:[&_>_input]:text-grey-1000'\n ],\n emphasis === 'bold' &&\n appearance === 'standard' && [\n 'border-none',\n '[&:has([aria-invalid=true])]:border-2',\n '[&:has([aria-invalid=true])]:border-danger',\n 'focus-within:border-2',\n 'focus-within:border-blue-800'\n ]\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\n appearance={appearance}\n emphasis={emphasis}\n className={className}\n >\n <NumberInputStepper\n onClick={decrement}\n icon={Minus}\n className={clsx(\n emphasis !== 'bold' && 'border-r-none rounded-r-none'\n )}\n size={iconSize}\n fieldAppearance={appearance}\n emphasis={emphasis}\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 className={clsx(\n emphasis !== 'bold' && 'border-l-none rounded-l-none'\n )}\n size={iconSize}\n fieldAppearance={appearance}\n emphasis={emphasis}\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"],"mappings":"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"}
1	+ {"version":3,"file":"NumberInput.js","names":[],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nimport { Input } from '../input/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 theme?: 'white' \| 'grey'\n emphasis?: 'bold'\n onValueChange?: (value: number) => void\n stepperButtonLabels?: { increment?: string; decrement?: string }\n disabledTooltipContent?: { increment?: string; decrement?: string }\n className?: string\n}\n\nconst NumberInputContainer = styled('div', {\n base: ['flex'],\n variants: {\n appearance: {\n standard: [],\n modern: ['gap-px']\n },\n emphasis: {\n bold: ['gap-0']\n }\n }\n})\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\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 className,\n appearance = 'standard',\n theme,\n emphasis,\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 hasError = internalValue < min \|\| internalValue > max\n const {\n state: externalState,\n 'aria-invalid': externalAriaInvalid,\n ...restProps\n } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n const inputProps: React.ComponentProps<typeof Input> = {\n type: 'number',\n value: internalValue,\n ...restProps,\n onChange: onInputChange,\n onKeyDown,\n size,\n appearance,\n theme,\n state: externalState \|\| (hasError ? 'error' : undefined),\n 'aria-invalid': externalAriaInvalid \|\| hasError \|\| undefined,\n className: clsx(\n 'rounded-none',\n 'w-16',\n '[&_>_input]:text-center',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none',\n emphasis === 'bold' && [\n 'rounded-1',\n '[&_>_input[aria-invalid=true]]:text-danger',\n 'focus-within:[&_>_input]:text-grey-1000'\n ],\n emphasis === 'bold' &&\n appearance === 'standard' && [\n 'border-none',\n '[&:has([aria-invalid=true])]:border-2',\n '[&:has([aria-invalid=true])]:border-danger',\n 'focus-within:border-2',\n 'focus-within:border-blue-800'\n ]\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\n appearance={appearance}\n emphasis={emphasis}\n className={className}\n >\n <NumberInputStepper\n onClick={decrement}\n icon={Minus}\n className={clsx(\n emphasis !== 'bold' && 'border-r-none rounded-r-none'\n )}\n size={iconSize}\n fieldAppearance={appearance}\n fieldTheme={theme}\n emphasis={emphasis}\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 className={clsx(\n emphasis !== 'bold' && 'border-l-none rounded-l-none'\n )}\n size={iconSize}\n fieldAppearance={appearance}\n fieldTheme={theme}\n emphasis={emphasis}\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"],"mappings":"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"}

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

@@ -12,8 +12,9 @@ declare const StyledStepperButton: React.ForwardRefExoticComponent<Omit<Omit<Omi
 }, "children" | "label" | "hasTooltip" | "tooltipSide" | keyof import("../../types/navigatorActions.types").NavigatorActions> & {
     children: React.ReactNode;
     label: string;
-} & Omit<import("../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types/navigatorActions.types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "emphasis" | "fieldAppearance"> & {
+} & Omit<import("../../utilities/optional-tooltip-wrapper/OptionalTooltipWrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types/navigatorActions.types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "emphasis" | "fieldAppearance" | "fieldTheme"> & {
     fieldAppearance?: "standard" | "modern" | undefined;
+    fieldTheme?: "grey" | "white" | undefined;
     emphasis?: "bold" | undefined;
 } & {
     as?: React.ElementType;

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

@@ -26,6 +26,10 @@ var StyledStepperButton = styled(ActionIcon, {
 				"hover:bg-grey-200!"
 			]
 		},
+		fieldTheme: {
+			white: [],
+			grey: []
+		},
 		emphasis: { bold: [
 			"[&_svg]:text-primary-700",
 			"hover:bg-primary-100!",
@@ -34,18 +38,26 @@ var StyledStepperButton = styled(ActionIcon, {
 			"active:[&_svg]:text-primary-900!"
 		] }
 	},
-	compoundVariants: [{
-		fieldAppearance: "standard",
-		emphasis: "bold",
-		class: ["bg-white", "border-primary-800!"]
-	}, {
-		fieldAppearance: "modern",
-		emphasis: "bold",
-		class: ["bg-white!", "hover:bg-primary-100!"]
-	}]
+	compoundVariants: [
+		{
+			fieldAppearance: "modern",
+			fieldTheme: "white",
+			class: ["bg-white"]
+		},
+		{
+			fieldAppearance: "standard",
+			emphasis: "bold",
+			class: ["bg-white", "border-primary-800!"]
+		},
+		{
+			fieldAppearance: "modern",
+			emphasis: "bold",
+			class: ["bg-white!", "hover:bg-primary-100!"]
+		}
+	]
 });
 var NumberInputStepper = React$1.forwardRef((props, forwardedRef) => {
-	const { icon, disabledTooltipContent, showTooltip, fieldAppearance = "standard", ...rest } = props;
+	const { icon, disabledTooltipContent, showTooltip, fieldAppearance = "standard", fieldTheme, ...rest } = props;
 	/**
 	* Focus has been removed from the button
 	* as the increment and decrement buttons should be keyboard accessible via arrow keys.
@@ -59,6 +71,7 @@ var NumberInputStepper = React$1.forwardRef((props, forwardedRef) => {
 		tabIndex: -1,
 		appearance: "outline",
 		fieldAppearance,
+		fieldTheme,
 		ref: forwardedRef,
 		...rest
 	}, /* @__PURE__ */ React$1.createElement(Icon, { is: icon })))), showTooltip && /* @__PURE__ */ React$1.createElement(Tooltip.Content, null, disabledTooltipContent));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInputStepper.js","names":[],"sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Tooltip } from '../tooltip/Tooltip'\n\nconst StyledStepperButton = styled(ActionIcon, {\n base: [\n 'rounded-md',\n 'z-1',\n 'h-full!',\n 'hover:[&_svg]:text-grey-800',\n 'hover:bg-grey-100',\n '[&_svg]:text-grey-700',\n 'active:[&_svg]:text-grey-900',\n 'active:bg-grey-200',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none'\n ],\n variants: {\n fieldAppearance: {\n standard: ['bg-white', 'border-grey-800!'],\n modern: ['bg-grey-100', 'border-grey-100!', 'hover:bg-grey-200!']\n },\n emphasis: {\n bold: [\n '[&_svg]:text-primary-700',\n 'hover:bg-primary-100!',\n 'hover:[&_svg]:text-primary-800!',\n 'active:bg-primary-200!',\n 'active:[&_svg]:text-primary-900!'\n ]\n }\n },\n compoundVariants: [\n {\n fieldAppearance: 'standard',\n emphasis: 'bold',\n class: ['bg-white', 'border-primary-800!']\n },\n {\n fieldAppearance: 'modern',\n emphasis: 'bold',\n class: ['bg-white!', 'hover:bg-primary-100!']\n }\n ]\n})\n\ntype NumberInputStepperProps = Omit<\n React.ComponentProps<typeof ActionIcon>,\n 'children'\n> &\n Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n icon: React.FC<React.SVGProps<SVGSVGElement>>\n showTooltip?: boolean\n disabledTooltipContent?: string\n }\n\nexport const NumberInputStepper = React.forwardRef<\n HTMLButtonElement,\n NumberInputStepperProps\n>((props, forwardedRef) => {\n const {\n icon,\n disabledTooltipContent,\n showTooltip,\n fieldAppearance = 'standard',\n ...rest\n } = props\n\n /*\n Focus has been removed from the button\n * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n */\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <span className=\"z-1\" tabIndex={-1}>\n <StyledStepperButton\n hasTooltip={false}\n tabIndex={-1}\n appearance=\"outline\"\n fieldAppearance={fieldAppearance}\n ref={forwardedRef}\n {...rest}\n >\n <Icon is={icon} />\n </StyledStepperButton>\n </span>\n </Tooltip.Trigger>\n {showTooltip && (\n <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n )}\n </Tooltip>\n )\n})\n"],"mappings":";;;;;;AAQA,IAAM,sBAAsB,OAAO,YAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,iBAAiB;GACf,UAAU,CAAC,YAAY,mBAAmB;GAC1C,QAAQ;IAAC;IAAe;IAAoB;IAAqB;GAClE;EACD,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACD,kBAAkB,~~CAChB~~;~~EACE~~,iBAAiB;~~EACjB~~,UAAU;~~EACV~~,OAAO,CAAC,YAAY,sBAAsB;~~EAC3C,~~EACD;~~EACE~~,iBAAiB;~~EACjB~~,UAAU;~~EACV~~,OAAO,CAAC,aAAa,wBAAwB;~~EAC9C,CACF~~;CACF,CAAC;AAYF,IAAa,qBAAqB,QAAM,YAGrC,OAAO,iBAAiB;CACzB,MAAM,EACJ,MACA,wBACA,aACA,kBAAkB,YAClB,GAAG,SACD;;;;;;AAOJ,QACE,wBAAA,cAAC,SAAA,MACC,wBAAA,cAAC,QAAQ,SAAT,EAAiB,SAAA,~~MAaC~~,~~EAZhB~~,wBAAA,cAAC,QAAD;EAAM,WAAU;EAAM,UAAU;~~EAWzB~~,~~EAVL~~,wBAAA,cAAC,qBAAD;EACE,YAAY;EACZ,UAAU;EACV,YAAW;EACM;~~EACjB~~,KAAK;EACL,GAAI;EAGgB,EADpB,wBAAA,cAAC,MAAD,EAAM,IAAI,MAAQ,CAAA,CACE,CACjB,CACS,EACjB,eACC,wBAAA,cAAC,QAAQ,SAAA,MAAS,uBAAyC,CAErD;EAEZ"}
1	+ {"version":3,"file":"NumberInputStepper.js","names":[],"sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Tooltip } from '../tooltip/Tooltip'\n\nconst StyledStepperButton = styled(ActionIcon, {\n base: [\n 'rounded-md',\n 'z-1',\n 'h-full!',\n 'hover:[&_svg]:text-grey-800',\n 'hover:bg-grey-100',\n '[&_svg]:text-grey-700',\n 'active:[&_svg]:text-grey-900',\n 'active:bg-grey-200',\n 'disabled:opacity-30',\n 'disabled:pointer-events-none'\n ],\n variants: {\n fieldAppearance: {\n standard: ['bg-white', 'border-grey-800!'],\n modern: ['bg-grey-100', 'border-grey-100!', 'hover:bg-grey-200!']\n },\n fieldTheme: {\n white: [],\n grey: []\n },\n emphasis: {\n bold: [\n '[&_svg]:text-primary-700',\n 'hover:bg-primary-100!',\n 'hover:[&_svg]:text-primary-800!',\n 'active:bg-primary-200!',\n 'active:[&_svg]:text-primary-900!'\n ]\n }\n },\n compoundVariants: [\n {\n fieldAppearance: 'modern',\n fieldTheme: 'white',\n class: ['bg-white']\n },\n {\n fieldAppearance: 'standard',\n emphasis: 'bold',\n class: ['bg-white', 'border-primary-800!']\n },\n {\n fieldAppearance: 'modern',\n emphasis: 'bold',\n class: ['bg-white!', 'hover:bg-primary-100!']\n }\n ]\n})\n\ntype NumberInputStepperProps = Omit<\n React.ComponentProps<typeof ActionIcon>,\n 'children'\n> &\n Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n icon: React.FC<React.SVGProps<SVGSVGElement>>\n showTooltip?: boolean\n disabledTooltipContent?: string\n }\n\nexport const NumberInputStepper = React.forwardRef<\n HTMLButtonElement,\n NumberInputStepperProps\n>((props, forwardedRef) => {\n const {\n icon,\n disabledTooltipContent,\n showTooltip,\n fieldAppearance = 'standard',\n fieldTheme,\n ...rest\n } = props\n\n /*\n Focus has been removed from the button\n * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n */\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <span className=\"z-1\" tabIndex={-1}>\n <StyledStepperButton\n hasTooltip={false}\n tabIndex={-1}\n appearance=\"outline\"\n fieldAppearance={fieldAppearance}\n fieldTheme={fieldTheme}\n ref={forwardedRef}\n {...rest}\n >\n <Icon is={icon} />\n </StyledStepperButton>\n </span>\n </Tooltip.Trigger>\n {showTooltip && (\n <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n )}\n </Tooltip>\n )\n})\n"],"mappings":";;;;;;AAQA,IAAM,sBAAsB,OAAO,YAAY;CAC7C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,iBAAiB;GACf,UAAU,CAAC,YAAY,mBAAmB;GAC1C,QAAQ;IAAC;IAAe;IAAoB;IAAqB;GAClE;EACD,YAAY;GACV,OAAO,EAAE;GACT,MAAM,EAAE;GACT;EACD,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACD,kBAAkB;EAChB;GACE,iBAAiB;GACjB,YAAY;GACZ,OAAO,CAAC,WAAW;GACpB;EACD;GACE,iBAAiB;GACjB,UAAU;GACV,OAAO,CAAC,YAAY,sBAAsB;GAC3C;EACD;GACE,iBAAiB;GACjB,UAAU;GACV,OAAO,CAAC,aAAa,wBAAwB;GAC9C;EACF;CACF,CAAC;AAYF,IAAa,qBAAqB,QAAM,YAGrC,OAAO,iBAAiB;CACzB,MAAM,EACJ,MACA,wBACA,aACA,kBAAkB,YAClB,YACA,GAAG,SACD;;;;;;AAOJ,QACE,wBAAA,cAAC,SAAA,MACC,wBAAA,cAAC,QAAQ,SAAT,EAAiB,SAAA,MAcC,EAbhB,wBAAA,cAAC,QAAD;EAAM,WAAU;EAAM,UAAU;EAYzB,EAXL,wBAAA,cAAC,qBAAD;EACE,YAAY;EACZ,UAAU;EACV,YAAW;EACM;EACL;EACZ,KAAK;EACL,GAAI;EAGgB,EADpB,wBAAA,cAAC,MAAD,EAAM,IAAI,MAAQ,CAAA,CACE,CACjB,CACS,EACjB,eACC,wBAAA,cAAC,QAAQ,SAAA,MAAS,uBAAyC,CAErD;EAEZ"}

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

@@ -14,6 +14,6 @@ export interface NumberInputFieldProps extends NumberInputProps {
     validation?: ValidationOptions;
 }
 export declare const NumberInputField: {
-    ({ className, defaultValue, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, ...remainingProps }: NumberInputFieldProps): React.JSX.Element;
+    ({ className, defaultValue, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, theme, ...remainingProps }: NumberInputFieldProps): React.JSX.Element;
     displayName: string;
 };

package/dist/components/number-input-field/NumberInputField.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { NumberInput } from "../number-input/NumberInput.js";
 import * as React$1 from "react";
 import { useController, useFormContext } from "react-hook-form";
 //#region src/components/number-input-field/NumberInputField.tsx
-var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, ...remainingProps }) => {
+var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, theme, ...remainingProps }) => {
 	const { control } = useFormContext();
 	const context = useFormCustomContext();
 	const { field: { ref, onChange, value: innerValue, name: innerName } } = useController({
@@ -16,6 +16,7 @@ var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt,
 	});
 	const { error } = useFieldError(name);
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	React$1.useEffect(() => {
 		if (typeof value !== "undefined") onChange(value);
 	}, [value]);
@@ -44,6 +45,7 @@ var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt,
 		},
 		value: innerValue,
 		appearance: formAppearance,
+		theme: formTheme,
 		...remainingProps
 	}));
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInputField.js","names":[],"sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { ValidationOptions } from '~/components/form/validation'\n\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n className?: string\n hideLabel?: boolean\n description?: string\n label: string\n name: string\n prompt?: { link: string; label: string }\n validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n className,\n defaultValue = 0,\n hideLabel,\n value,\n prompt,\n description,\n label,\n name,\n validation,\n onValueChange,\n appearance,\n ...remainingProps\n}: NumberInputFieldProps) => {\n const { control } = useFormContext()\n const context = useFormCustomContext()\n const {\n field: { ref, onChange, value: innerValue, name: innerName }\n } = useController({\n name,\n control,\n rules: validation,\n defaultValue\n })\n const { error } = useFieldError(name)\n\n const formAppearance = context?.appearance \|\| appearance\n\n React.useEffect(() => {\n // Update the react-hook-form inner value to match what is passed in.\n if (typeof value !== 'undefined') onChange(value)\n }, [value])\n\n return (\n <FieldWrapper\n className={className}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={formAppearance}\n >\n <NumberInput\n id={name}\n name={innerName}\n ref={ref}\n {...(error && { state: 'error', 'aria-invalid': true })}\n defaultValue={defaultValue}\n onValueChange={(newValue) => {\n onChange(newValue)\n onValueChange?.(newValue)\n }}\n value={innerValue}\n appearance={formAppearance}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"mappings":";;;;;;;AAqBA,IAAa,oBAAoB,EAC/B,WACA,eAAe,GACf,WACA,OACA,QACA,aACA,OACA,MACA,YACA,eACA,YACA,GAAG,qBACwB;CAC3B,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC;CACF,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,iBAAiB,SAAS,cAAc;~~AAE9C~~,SAAM,gBAAgB;AAEpB,MAAI,OAAO,UAAU,YAAa,UAAS,MAAM;IAChD,CAAC,MAAM,CAAC;AAEX,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;~~EAgBC~~,~~EAdb~~,wBAAA,cAAC,aAAD;EACE,IAAI;EACJ,MAAM;EACD;EACL,GAAK,SAAS;GAAE,OAAO;GAAS,gBAAgB;GAAM;EACxC;EACd,gBAAgB,aAAa;AAC3B,YAAS,SAAS;AAClB,mBAAgB,SAAS;;EAE3B,OAAO;EACP,YAAY;EACZ,GAAI;EACJ,CAAA,CACW;;AAInB,iBAAiB,cAAc"}
1	+ {"version":3,"file":"NumberInputField.js","names":[],"sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { ValidationOptions } from '~/components/form/validation'\n\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n className?: string\n hideLabel?: boolean\n description?: string\n label: string\n name: string\n prompt?: { link: string; label: string }\n validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n className,\n defaultValue = 0,\n hideLabel,\n value,\n prompt,\n description,\n label,\n name,\n validation,\n onValueChange,\n appearance,\n theme,\n ...remainingProps\n}: NumberInputFieldProps) => {\n const { control } = useFormContext()\n const context = useFormCustomContext()\n const {\n field: { ref, onChange, value: innerValue, name: innerName }\n } = useController({\n name,\n control,\n rules: validation,\n defaultValue\n })\n const { error } = useFieldError(name)\n\n const formAppearance = context?.appearance \|\| appearance\n const formTheme = context?.theme ?? theme\n\n React.useEffect(() => {\n // Update the react-hook-form inner value to match what is passed in.\n if (typeof value !== 'undefined') onChange(value)\n }, [value])\n\n return (\n <FieldWrapper\n className={className}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={formAppearance}\n >\n <NumberInput\n id={name}\n name={innerName}\n ref={ref}\n {...(error && { state: 'error', 'aria-invalid': true })}\n defaultValue={defaultValue}\n onValueChange={(newValue) => {\n onChange(newValue)\n onValueChange?.(newValue)\n }}\n value={innerValue}\n appearance={formAppearance}\n theme={formTheme}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"mappings":";;;;;;;AAqBA,IAAa,oBAAoB,EAC/B,WACA,eAAe,GACf,WACA,OACA,QACA,aACA,OACA,MACA,YACA,eACA,YACA,OACA,GAAG,qBACwB;CAC3B,MAAM,EAAE,YAAY,gBAAgB;CACpC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;EACD,CAAC;CACF,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,SAAM,gBAAgB;AAEpB,MAAI,OAAO,UAAU,YAAa,UAAS,MAAM;IAChD,CAAC,MAAM,CAAC;AAEX,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAiBC,EAfb,wBAAA,cAAC,aAAD;EACE,IAAI;EACJ,MAAM;EACD;EACL,GAAK,SAAS;GAAE,OAAO;GAAS,gBAAgB;GAAM;EACxC;EACd,gBAAgB,aAAa;AAC3B,YAAS,SAAS;AAClB,mBAAgB,SAAS;;EAE3B,OAAO;EACP,YAAY;EACZ,OAAO;EACP,GAAI;EACJ,CAAA,CACW;;AAInB,iBAAiB,cAAc"}

package/dist/components/password-field/PasswordField.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ type PasswordFieldProps = React.ComponentProps<typeof PasswordInput> & Omit<Fiel
     label?: string;
 };
 export declare const PasswordField: {
-    ({ className, hideLabel, label, name, prompt, description, validation, appearance, ...remainingProps }: PasswordFieldProps): React.JSX.Element;
+    ({ className, hideLabel, label, name, prompt, description, validation, appearance, theme, ...remainingProps }: PasswordFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/password-field/PasswordField.js CHANGED Viewed

@@ -6,12 +6,13 @@ import clsx from "clsx";
 import * as React$1 from "react";
 import { useFormContext } from "react-hook-form";
 //#region src/components/password-field/PasswordField.tsx
-var PasswordField = ({ className, hideLabel, label = "Password", name, prompt = void 0, description, validation, appearance, ...remainingProps }) => {
+var PasswordField = ({ className, hideLabel, label = "Password", name, prompt = void 0, description, validation, appearance, theme, ...remainingProps }) => {
 	const { register } = useFormContext();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
 		description,
 		error,
@@ -28,6 +29,7 @@ var PasswordField = ({ className, hideLabel, label = "Password", name, prompt =
 		id: name,
 		ref,
 		appearance: formAppearance,
+		theme: formTheme,
 		...error !== void 0 && { state: "error" },
 		...remainingProps
 	}));

package/dist/components/password-field/PasswordField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordField.js","names":[],"sources":["../../../src/components/password-field/PasswordField.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { PasswordInput } from '~/components/password-input/PasswordInput'\n\ntype PasswordFieldProps = React.ComponentProps<typeof PasswordInput> &\n Omit<FieldElementWrapperProps, 'label'> & {\n label?: string\n }\n\nexport const PasswordField = ({\n className,\n hideLabel,\n label = 'Password',\n name,\n prompt = undefined,\n description,\n validation,\n appearance,\n ...remainingProps\n}: PasswordFieldProps) => {\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 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 className={clsx(className, 'relative')}\n >\n <PasswordInput\n autoComplete=\"current-password\"\n name={name}\n id={name}\n ref={ref}\n appearance={formAppearance}\n {...(error !== undefined && { state: 'error' })}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nPasswordField.displayName = 'PasswordField'\n"],"mappings":";;;;;;;;AAiBA,IAAa,iBAAiB,EAC5B,WACA,WACA,QAAQ,YACR,MACA,SAAS,KAAA,GACT,aACA,YACA,YACA,GAAG,qBACqB;CACxB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;~~AAE9C~~,QACE,wBAAA,cAAC,cAAD;EACe;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EACZ,WAAW,KAAK,WAAW,WAAW;~~EAWzB~~,~~EATb~~,wBAAA,cAAC,eAAD;EACE,cAAa;EACP;EACN,IAAI;EACC;EACL,YAAY;EACZ,GAAK,UAAU,KAAA,KAAa,EAAE,OAAO,SAAS;EAC9C,GAAI;EACJ,CAAA,CACW;;AAInB,cAAc,cAAc"}
1	+ {"version":3,"file":"PasswordField.js","names":[],"sources":["../../../src/components/password-field/PasswordField.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport { PasswordInput } from '~/components/password-input/PasswordInput'\n\ntype PasswordFieldProps = React.ComponentProps<typeof PasswordInput> &\n Omit<FieldElementWrapperProps, 'label'> & {\n label?: string\n }\n\nexport const PasswordField = ({\n className,\n hideLabel,\n label = 'Password',\n name,\n prompt = undefined,\n description,\n validation,\n appearance,\n theme,\n ...remainingProps\n}: PasswordFieldProps) => {\n const { register } = useFormContext()\n const context = useFormCustomContext()\n const { error } = useFieldError(name)\n\n const ref = validation ? register(validation) : register\n const formAppearance = context?.appearance \|\| appearance\n const formTheme = context?.theme ?? theme\n\n return (\n <FieldWrapper\n 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 className={clsx(className, 'relative')}\n >\n <PasswordInput\n autoComplete=\"current-password\"\n name={name}\n id={name}\n ref={ref}\n appearance={formAppearance}\n theme={formTheme}\n {...(error !== undefined && { state: 'error' })}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nPasswordField.displayName = 'PasswordField'\n"],"mappings":";;;;;;;;AAiBA,IAAa,iBAAiB,EAC5B,WACA,WACA,QAAQ,YACR,MACA,SAAS,KAAA,GACT,aACA,YACA,YACA,OACA,GAAG,qBACqB;CACxB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,wBAAA,cAAC,cAAD;EACe;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EACZ,WAAW,KAAK,WAAW,WAAW;EAYzB,EAVb,wBAAA,cAAC,eAAD;EACE,cAAa;EACP;EACN,IAAI;EACC;EACL,YAAY;EACZ,OAAO;EACP,GAAK,UAAU,KAAA,KAAa,EAAE,OAAO,SAAS;EAC9C,GAAI;EACJ,CAAA,CACW;;AAInB,cAAc,cAAc"}

package/dist/components/search-field/SearchField.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWr
 import { SearchInputProps } from '../../components/search-input/SearchInput';
 type SearchFieldProps = SearchInputProps & FieldElementWrapperProps;
 export declare const SearchField: {
-    ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }: SearchFieldProps): React.JSX.Element;
+    ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }: SearchFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/search-field/SearchField.js CHANGED Viewed

@@ -5,12 +5,13 @@ import { SearchInput } from "../search-input/SearchInput.js";
 import * as React$1 from "react";
 import { useFormContext } from "react-hook-form";
 //#region src/components/search-field/SearchField.tsx
-var SearchField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }) => {
+var SearchField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, theme, ...remainingProps }) => {
 	const { register } = useFormContext();
 	const context = useFormCustomContext();
 	const { error } = useFieldError(name);
 	const ref = validation ? register(validation) : register;
 	const formAppearance = context?.appearance || appearance;
+	const formTheme = context?.theme ?? theme;
 	return /* @__PURE__ */ React$1.createElement(FieldWrapper, {
 		className,
 		description,
@@ -26,6 +27,7 @@ var SearchField = ({ className, hideLabel, label, name, validation, prompt, desc
 		name,
 		ref,
 		appearance: formAppearance,
+		theme: formTheme,
 		...error && { state: "error" },
 		...remainingProps
 	}));

package/dist/components/search-field/SearchField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchField.js","names":[],"sources":["../../../src/components/search-field/SearchField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport {\n SearchInput,\n SearchInputProps\n} from '~/components/search-input/SearchInput'\n\ntype SearchFieldProps = SearchInputProps & FieldElementWrapperProps\n\nexport const SearchField = ({\n className,\n hideLabel,\n label,\n name,\n validation,\n prompt,\n description,\n appearance,\n ...remainingProps\n}: SearchFieldProps) => {\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 className={className}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={formAppearance}\n >\n <SearchInput\n id={name}\n name={name}\n ref={ref}\n appearance={formAppearance}\n {...(error && { state: 'error' })}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nSearchField.displayName = 'SearchField'\n"],"mappings":";;;;;;;AAgBA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,GAAG,qBACmB;CACtB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;~~AAE9C~~,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;~~EAUC~~,~~EARb~~,wBAAA,cAAC,aAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,CAAA,CACW;;AAInB,YAAY,cAAc"}
1	+ {"version":3,"file":"SearchField.js","names":[],"sources":["../../../src/components/search-field/SearchField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper/FieldWrapper'\nimport { useFieldError } from '~/components/form/useFieldError'\nimport { useFormCustomContext } from '~/components/form/useFormCustomContext'\nimport {\n SearchInput,\n SearchInputProps\n} from '~/components/search-input/SearchInput'\n\ntype SearchFieldProps = SearchInputProps & FieldElementWrapperProps\n\nexport const SearchField = ({\n className,\n hideLabel,\n label,\n name,\n validation,\n prompt,\n description,\n appearance,\n theme,\n ...remainingProps\n}: SearchFieldProps) => {\n const { register } = useFormContext()\n const context = useFormCustomContext()\n const { error } = useFieldError(name)\n\n const ref = validation ? register(validation) : register\n const formAppearance = context?.appearance \|\| appearance\n const formTheme = context?.theme ?? theme\n\n return (\n <FieldWrapper\n className={className}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={formAppearance}\n >\n <SearchInput\n id={name}\n name={name}\n ref={ref}\n appearance={formAppearance}\n theme={formTheme}\n {...(error && { state: 'error' })}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nSearchField.displayName = 'SearchField'\n"],"mappings":";;;;;;;AAgBA,IAAa,eAAe,EAC1B,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,OACA,GAAG,qBACmB;CACtB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CAErC,MAAM,MAAM,aAAa,SAAS,WAAW,GAAG;CAChD,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;AAEpC,QACE,wBAAA,cAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,SAAS;EACvC,YAAY;EAWC,EATb,wBAAA,cAAC,aAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,OAAO;EACP,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,CAAA,CACW;;AAInB,YAAY,cAAc"}

package/dist/components/search-input/SearchInput.js CHANGED Viewed

@@ -25,7 +25,7 @@ var StyledIcon = styled(Icon, {
 		lg: ["right-2.5", "size-5"]
 	} }
 });
-var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...remainingProps }, ref) => {
+var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", theme, className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...remainingProps }, ref) => {
 	const [inputElRef, setInputElRef] = useCallbackRef();
 	const [innerValue, setInnerValue] = React$1.useState(defaultValue);
 	const [activeIcon, setActiveIcon] = React$1.useState(defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH);
@@ -69,6 +69,7 @@ var SearchInput = React$1.forwardRef(({ size = "md", appearance = "standard", cl
 	return /* @__PURE__ */ React$1.createElement(InputBackground, {
 		size,
 		appearance,
+		theme,
 		className: clsx("relative", "w-auto", className)
 	}, /* @__PURE__ */ React$1.createElement(InputText, {
 		ref: setInputElRef,