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/search-input/SearchInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport { Input, InputBackground, InputText } from '~/components/input/Input'\nimport { styled } from '~/styled'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n size?: 'sm' \| 'md' \| 'lg'\n className?: string\n value?: string\n defaultValue?: string\n onValueChange?: (newValue: string) => void\n clearText?: string\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n SEARCH = 'SEARCH',\n CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n base: ['text-grey-700', 'absolute', 'pointer-events-none'],\n variants: {\n size: {\n sm: ['right-2', 'size-4'],\n md: ['right-2.5', 'size-5'],\n lg: ['right-2.5', 'size-5']\n }\n }\n})\n\nexport const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(\n (\n {\n size = 'md',\n appearance = 'standard',\n className,\n value,\n defaultValue = '',\n onValueChange,\n clearText = 'Clear',\n onChange,\n ...remainingProps\n },\n ref\n ) => {\n const [inputElRef, setInputElRef] = useCallbackRef()\n const [innerValue, setInnerValue] = React.useState(defaultValue)\n const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n )\n React.useEffect(() => {\n if (typeof value === 'undefined') return\n setInnerValue(value)\n setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n }, [value])\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n React.useImperativeHandle(ref, () => inputElRef.current as HTMLInputElement)\n\n const handleClear = () => {\n const inputEl = inputElRef.current\n if (!inputEl) return\n\n // https://stackoverflow.com/a/46012210\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value'\n )?.set\n nativeInputValueSetter?.call?.(inputEl, '')\n const ev2 = new Event('input', {\n bubbles: true\n })\n inputEl.dispatchEvent(ev2)\n inputEl.focus()\n onValueChange?.('')\n }\n\n const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event)\n\n const newValue = event.target.value\n setInnerValue(newValue)\n onValueChange?.(newValue)\n setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n }\n\n const getIcon = () => {\n if (activeIcon === INPUT_ICON.SEARCH)\n return (\n <StyledIcon\n is={Search}\n size={size}\n className={clsx(\n size == 'sm' ? 'size-4' : 'size-5',\n 'top-1/2',\n '-translate-y-1/2'\n )}\n />\n )\n\n return (\n <ActionIcon\n label={clearText}\n theme=\"neutral\"\n size={iconSize}\n onClick={handleClear}\n className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n >\n <Icon is={Close} />\n </ActionIcon>\n )\n }\n\n return (\n <InputBackground\n size={size}\n appearance={appearance}\n className={clsx('relative', 'w-auto', className)}\n >\n <InputText\n ref={setInputElRef}\n size={size}\n type=\"search\"\n {...remainingProps}\n value={innerValue}\n onChange={handleOnChange}\n className={clsx(\n size === 'sm' ? 'pr-8' : 'pr-10',\n '[&::-webkit-search-decoration]:appearance-none',\n '[&::-webkit-search-cancel-button]:appearance-none',\n '[&::-webkit-search-results-button]:appearance-none'\n )}\n />\n {getIcon()}\n </InputBackground>\n )\n }\n)\n\nSearchInput.displayName = 'SearchInput'\n"],"mappings":";;;;;;;;;;AAqBA,IAAK,aAAL,yBAAA,YAAA;AACE,YAAA,YAAA;AACA,YAAA,WAAA;;EAFG,cAAA,EAAA,CAGJ;AAED,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;EAAsB;CAC1D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,aAAa,SAAS;EAC3B,IAAI,CAAC,aAAa,SAAS;EAC5B,EACF;CACF,CAAC;AAEF,IAAa,cAAc,QAAM,YAE7B,EACE,OAAO,MACP,aAAa,YACb,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,kBAEL,QACG;CACH,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;CACpD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,aAAa;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SACxC,eAAe,WAAW,QAAQ,WAAW,OAC9C;AACD,SAAM,gBAAgB;AACpB,MAAI,OAAO,UAAU,YAAa;AAClC,gBAAc,MAAM;AACpB,gBAAc,QAAQ,WAAW,QAAQ,WAAW,OAAO;IAC1D,CAAC,MAAM,CAAC;CAEX,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,SAAM,oBAAoB,WAAW,WAAW,QAA4B;CAE5E,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;AAOd,GAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,QACD,EAAE,MACqB,OAAO,SAAS,GAAG;EAC3C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,MACV,CAAC;AACF,UAAQ,cAAc,IAAI;AAC1B,UAAQ,OAAO;AACf,kBAAgB,GAAG;;CAGrB,MAAM,kBAAkB,UAA+C;AACrE,aAAW,MAAM;EAEjB,MAAM,WAAW,MAAM,OAAO;AAC9B,gBAAc,SAAS;AACvB,kBAAgB,SAAS;AACzB,gBAAc,WAAW,WAAW,QAAQ,WAAW,OAAO;;CAGhE,MAAM,gBAAgB;AACpB,MAAI,eAAe,WAAW,OAC5B,QACE,wBAAA,cAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,KACT,QAAQ,OAAO,WAAW,UAC1B,WACA,mBACD;GACD,CAAA;AAGN,SACE,wBAAA,cAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;GAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR;;AAIjB,QACE,wBAAA,cAAC,iBAAD;EACQ;EACM;~~EACZ~~,WAAW,KAAK,YAAY,UAAU,UAAU;EAiBhC,EAfhB,wBAAA,cAAC,WAAD;EACE,KAAK;EACC;EACN,MAAK;EACL,GAAI;EACJ,OAAO;EACP,UAAU;EACV,WAAW,KACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,qDACD;EACD,CAAA,EACD,SAAS,CACM;EAGvB;AAED,YAAY,cAAc"}
1	+ {"version":3,"file":"SearchInput.js","names":[],"sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon/ActionIcon'\nimport { Icon } from '~/components/icon/Icon'\nimport { Input, InputBackground, InputText } from '~/components/input/Input'\nimport { styled } from '~/styled'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities/style/get-icon-size'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n size?: 'sm' \| 'md' \| 'lg'\n className?: string\n value?: string\n defaultValue?: string\n onValueChange?: (newValue: string) => void\n clearText?: string\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void\n}\n\nenum INPUT_ICON {\n SEARCH = 'SEARCH',\n CLEAR = 'CLEAR'\n}\n\nconst StyledIcon = styled(Icon, {\n base: ['text-grey-700', 'absolute', 'pointer-events-none'],\n variants: {\n size: {\n sm: ['right-2', 'size-4'],\n md: ['right-2.5', 'size-5'],\n lg: ['right-2.5', 'size-5']\n }\n }\n})\n\nexport const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(\n (\n {\n size = 'md',\n appearance = 'standard',\n theme,\n className,\n value,\n defaultValue = '',\n onValueChange,\n clearText = 'Clear',\n onChange,\n ...remainingProps\n },\n ref\n ) => {\n const [inputElRef, setInputElRef] = useCallbackRef()\n const [innerValue, setInnerValue] = React.useState(defaultValue)\n const [activeIcon, setActiveIcon] = React.useState<INPUT_ICON>(\n defaultValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH\n )\n React.useEffect(() => {\n if (typeof value === 'undefined') return\n setInnerValue(value)\n setActiveIcon(value ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n }, [value])\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n React.useImperativeHandle(ref, () => inputElRef.current as HTMLInputElement)\n\n const handleClear = () => {\n const inputEl = inputElRef.current\n if (!inputEl) return\n\n // https://stackoverflow.com/a/46012210\n const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n 'value'\n )?.set\n nativeInputValueSetter?.call?.(inputEl, '')\n const ev2 = new Event('input', {\n bubbles: true\n })\n inputEl.dispatchEvent(ev2)\n inputEl.focus()\n onValueChange?.('')\n }\n\n const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(event)\n\n const newValue = event.target.value\n setInnerValue(newValue)\n onValueChange?.(newValue)\n setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n }\n\n const getIcon = () => {\n if (activeIcon === INPUT_ICON.SEARCH)\n return (\n <StyledIcon\n is={Search}\n size={size}\n className={clsx(\n size == 'sm' ? 'size-4' : 'size-5',\n 'top-1/2',\n '-translate-y-1/2'\n )}\n />\n )\n\n return (\n <ActionIcon\n label={clearText}\n theme=\"neutral\"\n size={iconSize}\n onClick={handleClear}\n className=\"absolute top-1/2 right-1 -translate-y-1/2\"\n >\n <Icon is={Close} />\n </ActionIcon>\n )\n }\n\n return (\n <InputBackground\n size={size}\n appearance={appearance}\n theme={theme}\n className={clsx('relative', 'w-auto', className)}\n >\n <InputText\n ref={setInputElRef}\n size={size}\n type=\"search\"\n {...remainingProps}\n value={innerValue}\n onChange={handleOnChange}\n className={clsx(\n size === 'sm' ? 'pr-8' : 'pr-10',\n '[&::-webkit-search-decoration]:appearance-none',\n '[&::-webkit-search-cancel-button]:appearance-none',\n '[&::-webkit-search-results-button]:appearance-none'\n )}\n />\n {getIcon()}\n </InputBackground>\n )\n }\n)\n\nSearchInput.displayName = 'SearchInput'\n"],"mappings":";;;;;;;;;;AAqBA,IAAK,aAAL,yBAAA,YAAA;AACE,YAAA,YAAA;AACA,YAAA,WAAA;;EAFG,cAAA,EAAA,CAGJ;AAED,IAAM,aAAa,OAAO,MAAM;CAC9B,MAAM;EAAC;EAAiB;EAAY;EAAsB;CAC1D,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,WAAW,SAAS;EACzB,IAAI,CAAC,aAAa,SAAS;EAC3B,IAAI,CAAC,aAAa,SAAS;EAC5B,EACF;CACF,CAAC;AAEF,IAAa,cAAc,QAAM,YAE7B,EACE,OAAO,MACP,aAAa,YACb,OACA,WACA,OACA,eAAe,IACf,eACA,YAAY,SACZ,UACA,GAAG,kBAEL,QACG;CACH,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;CACpD,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAAS,aAAa;CAChE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SACxC,eAAe,WAAW,QAAQ,WAAW,OAC9C;AACD,SAAM,gBAAgB;AACpB,MAAI,OAAO,UAAU,YAAa;AAClC,gBAAc,MAAM;AACpB,gBAAc,QAAQ,WAAW,QAAQ,WAAW,OAAO;IAC1D,CAAC,MAAM,CAAC;CAEX,MAAM,WAAW,QAAM,cAAc,iBAAiB,KAAK,EAAE,CAAC,KAAK,CAAC;AAEpE,SAAM,oBAAoB,WAAW,WAAW,QAA4B;CAE5E,MAAM,oBAAoB;EACxB,MAAM,UAAU,WAAW;AAC3B,MAAI,CAAC,QAAS;AAOd,GAJ+B,OAAO,yBACpC,OAAO,iBAAiB,WACxB,QACD,EAAE,MACqB,OAAO,SAAS,GAAG;EAC3C,MAAM,MAAM,IAAI,MAAM,SAAS,EAC7B,SAAS,MACV,CAAC;AACF,UAAQ,cAAc,IAAI;AAC1B,UAAQ,OAAO;AACf,kBAAgB,GAAG;;CAGrB,MAAM,kBAAkB,UAA+C;AACrE,aAAW,MAAM;EAEjB,MAAM,WAAW,MAAM,OAAO;AAC9B,gBAAc,SAAS;AACvB,kBAAgB,SAAS;AACzB,gBAAc,WAAW,WAAW,QAAQ,WAAW,OAAO;;CAGhE,MAAM,gBAAgB;AACpB,MAAI,eAAe,WAAW,OAC5B,QACE,wBAAA,cAAC,YAAD;GACE,IAAI;GACE;GACN,WAAW,KACT,QAAQ,OAAO,WAAW,UAC1B,WACA,mBACD;GACD,CAAA;AAGN,SACE,wBAAA,cAAC,YAAD;GACE,OAAO;GACP,OAAM;GACN,MAAM;GACN,SAAS;GACT,WAAU;GAGC,EADX,wBAAA,cAAC,MAAD,EAAM,IAAI,OAAS,CAAA,CACR;;AAIjB,QACE,wBAAA,cAAC,iBAAD;EACQ;EACM;EACL;EACP,WAAW,KAAK,YAAY,UAAU,UAAU;EAiBhC,EAfhB,wBAAA,cAAC,WAAD;EACE,KAAK;EACC;EACN,MAAK;EACL,GAAI;EACJ,OAAO;EACP,UAAU;EACV,WAAW,KACT,SAAS,OAAO,SAAS,SACzB,kDACA,qDACA,qDACD;EACD,CAAA,EACD,SAAS,CACM;EAGvB;AAED,YAAY,cAAc"}

package/dist/components/select/Select.d.ts CHANGED Viewed

@@ -2,9 +2,10 @@ import * as React from 'react';
 import { Override } from '../../utilities/types';
 declare const StyledSelect: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & {
     ref?: ((instance: HTMLSelectElement | null) => void) | React.RefObject<HTMLSelectElement> | null | undefined;
-}, "appearance" | "size" | "state"> & {
+}, "appearance" | "size" | "theme" | "state"> & {
     size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
     state?: ("error" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "error">>) | undefined;
+    theme?: ("grey" | "white" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "grey" | "white">>) | undefined;
     appearance?: ("standard" | "modern" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "standard" | "modern">>) | undefined;
 } & {
     as?: React.ElementType;

package/dist/components/select/Select.js CHANGED Viewed

@@ -48,6 +48,10 @@ var StyledSelect = styled("select", {
 			]
 		},
 		state: { error: [] },
+		theme: {
+			white: [],
+			grey: []
+		},
 		appearance: {
 			standard: [
 				"bg-white",
@@ -67,15 +71,28 @@ var StyledSelect = styled("select", {
 			]
 		}
 	},
-	compoundVariants: [{
-		state: "error",
-		appearance: "standard",
-		class: ["border-danger"]
-	}, {
-		state: "error",
-		appearance: "modern",
-		class: ["bg-danger-light", "focus:outline-danger"]
-	}]
+	compoundVariants: [
+		{
+			state: "error",
+			appearance: "standard",
+			class: ["border-danger"]
+		},
+		{
+			state: "error",
+			appearance: "modern",
+			class: ["bg-danger-light", "focus:outline-danger"]
+		},
+		{
+			appearance: "modern",
+			theme: "white",
+			class: ["bg-white"]
+		},
+		{
+			appearance: "modern",
+			theme: "grey",
+			class: ["bg-grey-100"]
+		}
+	]
 }, { enabledResponsiveVariants: true });
 var Select = React$1.forwardRef(({ placeholder, children, size = "md", appearance = "standard", ...remainingProps }, ref) => {
 	const props = {

package/dist/components/select/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled(\n 'select',\n {\n base: [\n 'bg-(image:--bg-chevron)',\n 'appearance-none',\n '[background-repeat:no-repeat,repeat-x]',\n 'rounded-md',\n 'text-grey-1000',\n 'block',\n 'font-body',\n 'font-normal',\n 'leading-[1.4]',\n 'w-full',\n 'hover:cursor-pointer',\n '-ms-expand:hidden',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n '[[disabled]]:opacity-30',\n '[[disabled]]:cursor-not-allowed'\n ],\n variants: {\n size: {\n sm: [\n 'bg-position-[right_--spacing(2)_top_50%,0_0]',\n 'bg-size-[18px_auto,100%]',\n 'text-sm',\n 'h-8',\n 'pl-2',\n 'pr-8'\n ],\n md: [\n 'bg-position-[right_--spacing(3)_top_50%,0_0]',\n 'bg-size-[20px_auto,100%]',\n 'text-md',\n 'h-10',\n 'pl-3',\n 'pr-10'\n ],\n lg: [\n 'bg-position-[right_--spacing(3)_top_50%,0_0]',\n 'bg-size-[20px_auto,100%]',\n 'text-md',\n 'h-12',\n 'pl-3',\n 'pr-10'\n ]\n },\n state: {\n error: []\n },\n appearance: {\n standard: [\n 'bg-white',\n 'border',\n 'border-grey-700',\n 'focus:border-primary-800',\n 'focus:outline-none'\n ],\n modern: [\n 'bg-grey-100',\n 'border-none',\n 'focus:outline-2',\n 'focus:outline-blue-800',\n 'focus:outline-offset-1',\n 'focus:outline-solid',\n 'focus:z-1'\n ]\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:outline-danger']\n }\n ]\n },\n { enabledResponsiveVariants: true }\n)\n\nexport type SelectProps = Override<\n React.ComponentProps<typeof StyledSelect>,\n {\n as?: never\n placeholder?: string\n }\n // TODO: figure out why uncommenting this causes TS errors in\n // component declaration\n // & (\n // \| { id: string; 'aria-label'?: string }\n // \| { 'aria-label': string; id?: string }\n // )\n>\n\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n (\n {\n placeholder,\n children,\n size = 'md',\n appearance = 'standard',\n ...remainingProps\n },\n ref\n ) => {\n // Type assertion needed due to responsive variant size prop compatibility\n const props: React.ComponentProps<typeof StyledSelect> = {\n size,\n appearance,\n ref,\n ...remainingProps\n }\n\n if (\n [remainingProps.value, remainingProps.defaultValue].every(\n (value) => value === undefined\n )\n ) {\n props.defaultValue = ''\n }\n\n return (\n <StyledSelect {...props}>\n {placeholder && (\n <option disabled hidden value=\"\">\n {placeholder}\n </option>\n )}\n {children}\n </StyledSelect>\n )\n }\n)\n\nSelect.displayName = 'Select'\n"],"mappings":";;;AAKA,IAAM,eAAe,OACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACD,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACF;CACD,kBAAkB~~,CAChB~~;~~EACE~~,OAAO;~~EACP~~,YAAY;~~EACZ~~,OAAO,CAAC,gBAAgB;~~EACzB,~~EACD;~~EACE~~,OAAO;~~EACP~~,YAAY;~~EACZ~~,OAAO,CAAC,mBAAmB,uBAAuB;~~EACnD~~,~~CACF~~;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAgBD,IAAa,SAAS,QAAM,YAExB,EACE,aACA,UACA,OAAO,MACP,aAAa,YACb,GAAG,kBAEL,QACG;CAEH,MAAM,QAAmD;EACvD;EACA;EACA;EACA,GAAG;EACJ;AAED,KACE,CAAC,eAAe,OAAO,eAAe,aAAa,CAAC,OACjD,UAAU,UAAU,KAAA,EACtB,CAED,OAAM,eAAe;AAGvB,QACE,wBAAA,cAAC,cAAiB,OACf,eACC,wBAAA,cAAC,UAAD;EAAQ,UAAA;EAAS,QAAA;EAAO,OAAM;EAErB,EADN,YACM,EAEV,SACY;EAGpB;AAED,OAAO,cAAc"}
1	+ {"version":3,"file":"Select.js","names":[],"sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled(\n 'select',\n {\n base: [\n 'bg-(image:--bg-chevron)',\n 'appearance-none',\n '[background-repeat:no-repeat,repeat-x]',\n 'rounded-md',\n 'text-grey-1000',\n 'block',\n 'font-body',\n 'font-normal',\n 'leading-[1.4]',\n 'w-full',\n 'hover:cursor-pointer',\n '-ms-expand:hidden',\n 'disabled:opacity-30',\n 'disabled:cursor-not-allowed',\n '[[disabled]]:opacity-30',\n '[[disabled]]:cursor-not-allowed'\n ],\n variants: {\n size: {\n sm: [\n 'bg-position-[right_--spacing(2)_top_50%,0_0]',\n 'bg-size-[18px_auto,100%]',\n 'text-sm',\n 'h-8',\n 'pl-2',\n 'pr-8'\n ],\n md: [\n 'bg-position-[right_--spacing(3)_top_50%,0_0]',\n 'bg-size-[20px_auto,100%]',\n 'text-md',\n 'h-10',\n 'pl-3',\n 'pr-10'\n ],\n lg: [\n 'bg-position-[right_--spacing(3)_top_50%,0_0]',\n 'bg-size-[20px_auto,100%]',\n 'text-md',\n 'h-12',\n 'pl-3',\n 'pr-10'\n ]\n },\n state: {\n error: []\n },\n theme: {\n white: [],\n grey: []\n },\n appearance: {\n standard: [\n 'bg-white',\n 'border',\n 'border-grey-700',\n 'focus:border-primary-800',\n 'focus:outline-none'\n ],\n modern: [\n 'bg-grey-100',\n 'border-none',\n 'focus:outline-2',\n 'focus:outline-blue-800',\n 'focus:outline-offset-1',\n 'focus:outline-solid',\n 'focus:z-1'\n ]\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: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 { enabledResponsiveVariants: true }\n)\n\nexport type SelectProps = Override<\n React.ComponentProps<typeof StyledSelect>,\n {\n as?: never\n placeholder?: string\n }\n // TODO: figure out why uncommenting this causes TS errors in\n // component declaration\n // & (\n // \| { id: string; 'aria-label'?: string }\n // \| { 'aria-label': string; id?: string }\n // )\n>\n\nexport const Select = React.forwardRef<HTMLSelectElement, SelectProps>(\n (\n {\n placeholder,\n children,\n size = 'md',\n appearance = 'standard',\n ...remainingProps\n },\n ref\n ) => {\n // Type assertion needed due to responsive variant size prop compatibility\n const props: React.ComponentProps<typeof StyledSelect> = {\n size,\n appearance,\n ref,\n ...remainingProps\n }\n\n if (\n [remainingProps.value, remainingProps.defaultValue].every(\n (value) => value === undefined\n )\n ) {\n props.defaultValue = ''\n }\n\n return (\n <StyledSelect {...props}>\n {placeholder && (\n <option disabled hidden value=\"\">\n {placeholder}\n </option>\n )}\n {children}\n </StyledSelect>\n )\n }\n)\n\nSelect.displayName = 'Select'\n"],"mappings":";;;AAKA,IAAM,eAAe,OACnB,UACA;CACE,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM;GACJ,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACD,IAAI;IACF;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACD,OAAO;GACL,OAAO,EAAE;GACT,MAAM,EAAE;GACT;EACD,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;IACD;GACD,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACD;GACF;EACF;CACD,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,gBAAgB;GACzB;EACD;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,uBAAuB;GACnD;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,WAAW;GACpB;EACD;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,cAAc;GACvB;EACF;CACF,EACD,EAAE,2BAA2B,MAAM,CACpC;AAgBD,IAAa,SAAS,QAAM,YAExB,EACE,aACA,UACA,OAAO,MACP,aAAa,YACb,GAAG,kBAEL,QACG;CAEH,MAAM,QAAmD;EACvD;EACA;EACA;EACA,GAAG;EACJ;AAED,KACE,CAAC,eAAe,OAAO,eAAe,aAAa,CAAC,OACjD,UAAU,UAAU,KAAA,EACtB,CAED,OAAM,eAAe;AAGvB,QACE,wBAAA,cAAC,cAAiB,OACf,eACC,wBAAA,cAAC,UAAD;EAAQ,UAAA;EAAS,QAAA;EAAO,OAAM;EAErB,EADN,YACM,EAEV,SACY;EAGpB;AAED,OAAO,cAAc"}

package/dist/components/select-field/SelectField.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { FieldElementWrapperProps } from '../../components/field-wrapper/FieldWr
 import { SelectProps } from '../../components/select/Select';
 type SelectFieldProps = SelectProps & FieldElementWrapperProps;
 export declare const SelectField: {
-    ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, ...remainingProps }: SelectFieldProps): React.JSX.Element;
+    ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, theme, ...remainingProps }: SelectFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/select-field/SelectField.js CHANGED Viewed

@@ -5,12 +5,13 @@ import { Select } from "../select/Select.js";
 import * as React$1 from "react";
 import { useFormContext } from "react-hook-form";
 //#region src/components/select-field/SelectField.tsx
-var SelectField = ({ className, hideLabel, children, name, label, validation, prompt, description, appearance, ...remainingProps }) => {
+var SelectField = ({ className, hideLabel, children, name, label, 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,
@@ -25,6 +26,7 @@ var SelectField = ({ className, hideLabel, children, name, label, validation, pr
 		name,
 		id: name,
 		appearance: formAppearance,
+		theme: formTheme,
 		...remainingProps,
 		ref,
 		...error && { state: "error" }

package/dist/components/select-field/SelectField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectField.js","names":[],"sources":["../../../src/components/select-field/SelectField.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 { Select, SelectProps } from '~/components/select/Select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n className,\n hideLabel,\n children,\n name,\n label,\n validation,\n prompt,\n description,\n appearance,\n ...remainingProps\n}: SelectFieldProps) => {\n const { register } = useFormContext()\n const context = useFormCustomContext()\n const { error } = useFieldError(name)\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 <Select\n name={name}\n id={name}\n appearance={formAppearance}\n {...remainingProps}\n ref={ref}\n {...(error && { state: 'error' })}\n >\n {children}\n </Select>\n </FieldWrapper>\n )\n}\n\nSelectField.displayName = 'SelectField'\n"],"mappings":";;;;;;;AAaA,IAAa,eAAe,EAC1B,WACA,WACA,UACA,MACA,OACA,YACA,QACA,aACA,YACA,GAAG,qBACmB;CACtB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,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;~~EAYC~~,~~EAVb~~,wBAAA,cAAC,QAAD;EACQ;EACN,IAAI;EACJ,YAAY;EACZ,GAAI;EACC;EACL,GAAK,SAAS,EAAE,OAAO,SAAS;EAGzB,EADN,SACM,CACI;;AAInB,YAAY,cAAc"}
1	+ {"version":3,"file":"SelectField.js","names":[],"sources":["../../../src/components/select-field/SelectField.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 { Select, SelectProps } from '~/components/select/Select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n className,\n hideLabel,\n children,\n name,\n label,\n validation,\n prompt,\n description,\n appearance,\n theme,\n ...remainingProps\n}: SelectFieldProps) => {\n const { register } = useFormContext()\n const context = useFormCustomContext()\n const { error } = useFieldError(name)\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 <Select\n name={name}\n id={name}\n appearance={formAppearance}\n theme={formTheme}\n {...remainingProps}\n ref={ref}\n {...(error && { state: 'error' })}\n >\n {children}\n </Select>\n </FieldWrapper>\n )\n}\n\nSelectField.displayName = 'SelectField'\n"],"mappings":";;;;;;;AAaA,IAAa,eAAe,EAC1B,WACA,WACA,UACA,MACA,OACA,YACA,QACA,aACA,YACA,OACA,GAAG,qBACmB;CACtB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,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;EAaC,EAXb,wBAAA,cAAC,QAAD;EACQ;EACN,IAAI;EACJ,YAAY;EACZ,OAAO;EACP,GAAI;EACC;EACL,GAAK,SAAS,EAAE,OAAO,SAAS;EAGzB,EADN,SACM,CACI;;AAInB,YAAY,cAAc"}

package/dist/components/textarea/Textarea.d.ts CHANGED Viewed

@@ -1,18 +1,20 @@
 import * as React from 'react';
 declare const StyledTextarea: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
     ref?: ((instance: HTMLTextAreaElement | null) => void) | React.RefObject<HTMLTextAreaElement> | null | undefined;
-}, "appearance" | "state"> & {
+}, "appearance" | "theme" | "state"> & {
     appearance?: "standard" | "modern" | undefined;
     state?: "error" | undefined;
+    theme?: "grey" | "white" | undefined;
 } & {
     as?: React.ElementType;
 }>;
 export type TextareaProps = React.ComponentProps<typeof StyledTextarea>;
 export declare const Textarea: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & {
     ref?: ((instance: HTMLTextAreaElement | null) => void) | React.RefObject<HTMLTextAreaElement> | null | undefined;
-}, "appearance" | "state"> & {
+}, "appearance" | "theme" | "state"> & {
     appearance?: "standard" | "modern" | undefined;
     state?: "error" | undefined;
+    theme?: "grey" | "white" | undefined;
 } & {
     as?: React.ElementType;
 }, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/textarea/Textarea.js CHANGED Viewed

@@ -43,18 +43,35 @@ var StyledTextarea = styled("textarea", {
 				"focus-within:z-1"
 			]
 		},
-		state: { error: [] }
+		state: { error: [] },
+		theme: {
+			white: [],
+			grey: []
+		}
 	},
 	defaultVariants: { appearance: "standard" },
-	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"]
+		}
+	]
 });
 var Textarea = React$1.forwardRef((props, ref) => /* @__PURE__ */ React$1.createElement(StyledTextarea, {
 	...props,

package/dist/components/textarea/Textarea.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledTextarea = styled('textarea', {\n base: [\n 'shadow-none',\n 'appearance-none',\n 'rounded-md',\n 'box-border',\n 'text-grey-1000',\n 'font-body',\n 'font-normal',\n 'text-md',\n 'leading-[1.4]',\n 'm-0',\n 'min-h-24',\n 'px-3',\n 'py-3',\n 'resize-y',\n 'w-full',\n 'disabled:bg-grey-200',\n 'disabled:cursor-not-allowed',\n 'disabled:text-grey-800',\n 'placeholder:opacity-100',\n 'placeholder:text-grey-700'\n ],\n variants: {\n appearance: {\n standard: [\n 'bg-white',\n 'border',\n 'border-grey-800',\n 'focus-within:border-primary-800',\n 'focus-within:outline-none'\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 ]\n },\n state: {\n error: []\n }\n },\n defaultVariants: {\n appearance: 'standard'\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\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n (props, ref) => <StyledTextarea {...props} ref={ref} />\n)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;AAIA,IAAM,iBAAiB,OAAO,YAAY;CACxC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;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;IACD;GACF;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACF;CACD,iBAAiB,EACf,YAAY,YACb;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;AAIF,IAAa,WAAW,QAAM,YAC3B,OAAO,QAAQ,wBAAA,cAAC,gBAAD;CAAgB,GAAI;CAAY;CAAO,CAAA,CACxD;AAED,SAAS,cAAc"}
1	+ {"version":3,"file":"Textarea.js","names":[],"sources":["../../../src/components/textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nconst StyledTextarea = styled('textarea', {\n base: [\n 'shadow-none',\n 'appearance-none',\n 'rounded-md',\n 'box-border',\n 'text-grey-1000',\n 'font-body',\n 'font-normal',\n 'text-md',\n 'leading-[1.4]',\n 'm-0',\n 'min-h-24',\n 'px-3',\n 'py-3',\n 'resize-y',\n 'w-full',\n 'disabled:bg-grey-200',\n 'disabled:cursor-not-allowed',\n 'disabled:text-grey-800',\n 'placeholder:opacity-100',\n 'placeholder:text-grey-700'\n ],\n variants: {\n appearance: {\n standard: [\n 'bg-white',\n 'border',\n 'border-grey-800',\n 'focus-within:border-primary-800',\n 'focus-within:outline-none'\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 ]\n },\n state: {\n error: []\n },\n theme: {\n white: [],\n grey: []\n }\n },\n defaultVariants: {\n appearance: 'standard'\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\nexport type TextareaProps = React.ComponentProps<typeof StyledTextarea>\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n (props, ref) => <StyledTextarea {...props} ref={ref} />\n)\n\nTextarea.displayName = 'Textarea'\n"],"mappings":";;;AAIA,IAAM,iBAAiB,OAAO,YAAY;CACxC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;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;IACD;GACF;EACD,OAAO,EACL,OAAO,EAAE,EACV;EACD,OAAO;GACL,OAAO,EAAE;GACT,MAAM,EAAE;GACT;EACF;CACD,iBAAiB,EACf,YAAY,YACb;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;AAIF,IAAa,WAAW,QAAM,YAC3B,OAAO,QAAQ,wBAAA,cAAC,gBAAD;CAAgB,GAAI;CAAY;CAAO,CAAA,CACxD;AAED,SAAS,cAAc"}

package/dist/components/textarea-field/TextareaField.d.ts CHANGED Viewed

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

package/dist/components/textarea-field/TextareaField.js CHANGED Viewed

@@ -5,12 +5,13 @@ import { Textarea } from "../textarea/Textarea.js";
 import * as React$1 from "react";
 import { useFormContext } from "react-hook-form";
 //#region src/components/textarea-field/TextareaField.tsx
-var TextareaField = ({ className, hideLabel, label, name, validation, prompt, description, appearance, ...remainingProps }) => {
+var TextareaField = ({ 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 TextareaField = ({ className, hideLabel, label, name, validation, prompt, de
 		name,
 		ref,
 		appearance: formAppearance,
+		theme: formTheme,
 		...error && { state: "error" },
 		...remainingProps
 	}));

package/dist/components/textarea-field/TextareaField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextareaField.js","names":[],"sources":["../../../src/components/textarea-field/TextareaField.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 { Textarea, TextareaProps } from '~/components/textarea/Textarea'\n\ntype TextareaFieldProps = TextareaProps & FieldElementWrapperProps\n\nexport const TextareaField = ({\n className,\n hideLabel,\n label,\n name,\n validation,\n prompt,\n description,\n appearance,\n ...remainingProps\n}: TextareaFieldProps) => {\n const { register } = useFormContext()\n const context = useFormCustomContext()\n const { error } = useFieldError(name)\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 <Textarea\n id={name}\n name={name}\n ref={ref}\n appearance={formAppearance}\n {...(error && { state: 'error' })}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nTextareaField.displayName = 'TextareaField'\n"],"mappings":";;;;;;;AAaA,IAAa,iBAAiB,EAC5B,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,GAAG,qBACqB;CACxB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,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,UAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,CAAA,CACW;;AAInB,cAAc,cAAc"}
1	+ {"version":3,"file":"TextareaField.js","names":[],"sources":["../../../src/components/textarea-field/TextareaField.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 { Textarea, TextareaProps } from '~/components/textarea/Textarea'\n\ntype TextareaFieldProps = TextareaProps & FieldElementWrapperProps\n\nexport const TextareaField = ({\n className,\n hideLabel,\n label,\n name,\n validation,\n prompt,\n description,\n appearance,\n theme,\n ...remainingProps\n}: TextareaFieldProps) => {\n const { register } = useFormContext()\n const context = useFormCustomContext()\n const { error } = useFieldError(name)\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 <Textarea\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\nTextareaField.displayName = 'TextareaField'\n"],"mappings":";;;;;;;AAaA,IAAa,iBAAiB,EAC5B,WACA,WACA,OACA,MACA,YACA,QACA,aACA,YACA,OACA,GAAG,qBACqB;CACxB,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,UAAU,sBAAsB;CACtC,MAAM,EAAE,UAAU,cAAc,KAAK;CACrC,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,UAAD;EACE,IAAI;EACE;EACD;EACL,YAAY;EACZ,OAAO;EACP,GAAK,SAAS,EAAE,OAAO,SAAS;EAChC,GAAI;EACJ,CAAA,CACW;;AAInB,cAAc,cAAc"}