npm - @atom-learning/components - Versions diffs - 5.4.3 → 5.5.0-beta.0 - Mend

@atom-learning/components 5.4.3 → 5.5.0-beta.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 (82) hide show

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

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as t}from"../../stitches.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";import{Tooltip as o}from"../tooltip/Tooltip.js";const s=t("span",{zIndex:1}),g=t(c,{borderColor:"$grey800 !important",zIndex:1,height:"100% !important","&:hover":{bg:"$grey100",svg:{color:"$grey800"}},svg:{color:"$grey700"},"&:active":{bg:"$grey200",svg:{color:"$grey900"}},"&:disabled":{opacity:.3,pointerEvents:"none"}}),d=e.forwardRef((r,n)=>{const{icon:i,disabledTooltipContent:l,showTooltip:a,...p}=r;return e.createElement(o,null,e.createElement(o.Trigger,{asChild:!0},e.createElement(s,{tabIndex:-1},e.createElement(g,{hasTooltip:!1,tabIndex:-1,appearance:"outline",ref:n,...p},e.createElement(m,{is:i})))),a&&e.createElement(o.Content,null,l))});export{d as NumberInputStepper};
+import*as e from"react";import{styled as o}from"../../stitches.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";import{Tooltip as r}from"../tooltip/Tooltip.js";const s=o("span",{zIndex:1}),g=o(c,{zIndex:1,height:"100% !important","&:hover":{bg:"$grey100",svg:{color:"$grey800"}},svg:{color:"$grey700"},"&:active":{bg:"$grey200",svg:{color:"$grey900"}},"&:disabled":{opacity:.3,pointerEvents:"none"},variants:{fieldAppearance:{standard:{backgroundColor:"white",borderColor:"$grey800 !important",borderRadius:"$0"},modern:{backgroundColor:"$grey100",borderColor:"$grey100 !important",borderRadius:"$1"}}}}),b=e.forwardRef((t,n)=>{const{icon:a,disabledTooltipContent:i,showTooltip:l,fieldAppearance:d="standard",...p}=t;return e.createElement(r,null,e.createElement(r.Trigger,{asChild:!0},e.createElement(s,{tabIndex:-1},e.createElement(g,{hasTooltip:!1,tabIndex:-1,appearance:"outline",fieldAppearance:d,ref:n,...p},e.createElement(m,{is:a})))),l&&e.createElement(r.Content,null,i))});export{b as NumberInputStepper};
 //# sourceMappingURL=NumberInputStepper.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInputStepper.js","sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { Tooltip } from '../tooltip'\n\nconst StyledSpan = styled('span', { zIndex: 1 })\n\nconst StyledStepperButton = styled(ActionIcon, {\n ~~borderColor: '$grey800 !important',\n~~ zIndex: 1,\n height: '100% !important',\n '&:hover': {\n bg: '$grey100',\n svg: {\n color: '$grey800'\n }\n },\n svg: {\n color: '$grey700'\n },\n '&:active': {\n bg: '$grey200',\n svg: {\n color: '$grey900'\n }\n },\n '&:disabled': {\n opacity: 0.3,\n pointerEvents: 'none'\n }\n})\n\ntype NumberInputStepperProps = Omit<\n React.ComponentProps<typeof ActionIcon>,\n 'children'\n> & {\n icon: React.FC<React.SVGProps<SVGSVGElement>>\n showTooltip?: boolean\n disabledTooltipContent?: string\n}\n\nexport const NumberInputStepper: React.ForwardRefExoticComponent<NumberInputStepperProps> =\n React.forwardRef((props, forwardedRef) => {\n const { icon, disabledTooltipContent, showTooltip, ...rest } = 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 <StyledSpan tabIndex={-1}>\n <StyledStepperButton\n hasTooltip={false}\n tabIndex={-1}\n appearance=\"outline\"\n ref={forwardedRef}\n {...rest}\n >\n <Icon is={icon} />\n </StyledStepperButton>\n </StyledSpan>\n </Tooltip.Trigger>\n {showTooltip && (\n <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n )}\n </Tooltip>\n )\n })\n"],"names":["StyledSpan","styled","StyledStepperButton","ActionIcon","NumberInputStepper","React","props","forwardedRef","icon","disabledTooltipContent","showTooltip","rest","Tooltip","Icon"],"mappings":"oNAQA,MAAMA,EAAaC,EAAO,OAAQ,CAAE,OAAQ,CAAE,CAAC,EAEzCC,EAAsBD,EAAOE,EAAY,CAC7C,~~YAAa,sBACb,~~OAAQ,EACR,OAAQ,kBACR,UAAW,CACT,GAAI,WACJ,IAAK,~~CACH~~,MAAO,~~UACT~~,~~CACF~~,EACA,IAAK,CACH,MAAO,UACT,EACA,WAAY,CACV,GAAI,WACJ,IAAK,~~CACH~~,MAAO,~~UACT~~,~~CACF~~,EACA,aAAc,CACZ,QAAS,GACT,cAAe,MACjB,CACF,CAAC,~~EAWYC~~,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAiB,CACxC,KAAM,~~CAAE~~,KAAAC,~~EAAM~~,uBAAAC,~~EAAwB~~,YAAAC,~~KAAgBC~~,~~CAAK~~,~~EAAIL~~,~~EAO/D~~,OACED,EAAA,~~cAACO~~,EAAA,~~KACCP~~,EAAA,~~cAACO~~,EAAQ,QAAR,CAAgB,QAAO,~~EACtBP~~,~~EAAAA~~,EAAA,cAACL,EAAA,CAAW,SAAU,~~EAAA,~~EACpBK,EAAA,cAACH,EAAA,CACC,WAAY,GACZ,SAAU,GACV,WAAW,UACX,~~IAAKK~~,EACJ,~~GAAGI~~,~~GAEJN~~,EAAA,~~cAACQ~~,EAAA,CAAK,~~GAAIL~~,~~CAAAA,~~CAAM,CAClB,CACF,CACF,EACCE,GACCL,EAAA,~~cAACO~~,EAAQ,QAAR,~~KAAiBH~~,CAAuB,CAE7C,CAEJ,CAAC"}
1	+ {"version":3,"file":"NumberInputStepper.js","sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { Tooltip } from '../tooltip'\n\nconst StyledSpan = styled('span', { zIndex: 1 })\n\nconst StyledStepperButton = styled(ActionIcon, {\n zIndex: 1,\n height: '100% !important',\n '&:hover': {\n bg: '$grey100',\n svg: { color: '$grey800' }\n },\n svg: {\n color: '$grey700'\n },\n '&:active': {\n bg: '$grey200',\n svg: { color: '$grey900' }\n },\n '&:disabled': {\n opacity: 0.3,\n pointerEvents: 'none'\n },\n variants: {\n fieldAppearance: {\n standard: {\n backgroundColor: 'white',\n borderColor: '$grey800 !important',\n borderRadius: '$0'\n },\n modern: {\n backgroundColor: '$grey100',\n borderColor: '$grey100 !important',\n borderRadius: '$1'\n }\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.ForwardRefExoticComponent<NumberInputStepperProps> =\n React.forwardRef((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 <StyledSpan 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 </StyledSpan>\n </Tooltip.Trigger>\n {showTooltip && (\n <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n )}\n </Tooltip>\n )\n })\n"],"names":["StyledSpan","styled","StyledStepperButton","ActionIcon","NumberInputStepper","React","props","forwardedRef","icon","disabledTooltipContent","showTooltip","fieldAppearance","rest","Tooltip","Icon"],"mappings":"oNAQA,MAAMA,EAAaC,EAAO,OAAQ,CAAE,OAAQ,CAAE,CAAC,EAEzCC,EAAsBD,EAAOE,EAAY,CAC7C,OAAQ,EACR,OAAQ,kBACR,UAAW,CACT,GAAI,WACJ,IAAK,CAAE,MAAO,UAAW,CAC3B,EACA,IAAK,CACH,MAAO,UACT,EACA,WAAY,CACV,GAAI,WACJ,IAAK,CAAE,MAAO,UAAW,CAC3B,EACA,aAAc,CACZ,QAAS,GACT,cAAe,MACjB,EACA,SAAU,CACR,gBAAiB,CACf,SAAU,CACR,gBAAiB,QACjB,YAAa,sBACb,aAAc,IAChB,EACA,OAAQ,CACN,gBAAiB,WACjB,YAAa,sBACb,aAAc,IAChB,CACF,CACF,CACF,CAAC,EAYYC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAiB,CACxC,KAAM,CACJ,KAAAC,EACA,uBAAAC,EACA,YAAAC,EACA,gBAAAC,EAAkB,cACfC,CACL,EAAIN,EAOJ,OACED,EAAA,cAACQ,EAAA,KACCR,EAAA,cAACQ,EAAQ,QAAR,CAAgB,QAAO,EAAA,EACtBR,EAAA,cAACL,EAAA,CAAW,SAAU,EACpBK,EAAAA,EAAA,cAACH,EAAA,CACC,WAAY,GACZ,SAAU,GACV,WAAW,UACX,gBAAiBS,EACjB,IAAKJ,EACJ,GAAGK,CAEJP,EAAAA,EAAA,cAACS,EAAA,CAAK,GAAIN,CAAM,CAAA,CAClB,CACF,CACF,EACCE,GACCL,EAAA,cAACQ,EAAQ,QAAR,KAAiBJ,CAAuB,CAE7C,CAEJ,CAAC"}

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

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

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

@@ -1,2 +1,2 @@
-import*as o from"react";import{useFormContext as I,useController as N}from"react-hook-form";import{FieldWrapper as V}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as E}from"../form/useFieldError.js";import{NumberInput as g}from"../number-input/NumberInput.js";const m=({css:d,defaultValue:a=0,hideLabel:p,value:r,prompt:s,description:f,label:c,name:e,validation:l,onValueChange:t,...b})=>{const{control:v}=I(),{field:{ref:F,onChange:n,value:h,name:C}}=N({name:e,control:v,rules:l,defaultValue:a}),{error:i}=E(e);return o.useEffect(()=>{typeof r<"u"&&n(r)},[r]),o.createElement(V,{css:d,description:f,error:i,fieldId:e,hideLabel:p,label:c,prompt:s,required:Boolean(l==null?void 0:l.required)},o.createElement(g,{id:e,name:C,ref:F,...i&&{state:"error","aria-invalid":!0},defaultValue:a,onValueChange:u=>{n(u),t==null||t(u)},value:h,...b}))};m.displayName="NumberInputField";export{m as NumberInputField};
+import*as l from"react";import{useFormContext as N,useController as V}from"react-hook-form";import{FieldWrapper as E}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as g}from"../form/useFieldError.js";import{NumberInput as x}from"../number-input/NumberInput.js";const p=({css:d,defaultValue:o=0,hideLabel:s,value:r,prompt:f,description:c,label:b,name:e,validation:a,onValueChange:t,appearance:n,...v})=>{const{control:F}=N(),{field:{ref:h,onChange:i,value:C,name:I}}=V({name:e,control:F,rules:a,defaultValue:o}),{error:u}=g(e);return l.useEffect(()=>{typeof r<"u"&&i(r)},[r]),l.createElement(E,{css:d,description:c,error:u,fieldId:e,hideLabel:s,label:b,prompt:f,required:Boolean(a==null?void 0:a.required),appearance:n},l.createElement(x,{id:e,name:I,ref:h,...u&&{state:"error","aria-invalid":!0},defaultValue:o,onValueChange:m=>{i(m),t==null||t(m)},value:C,appearance:n,...v}))};p.displayName="NumberInputField";export{p as NumberInputField};
 //# sourceMappingURL=NumberInputField.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"NumberInputField.js","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'\nimport { useFieldError, ValidationOptions } from '~/components/form'\nimport type { CSS } from '~/stitches'\n\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n css?: CSS\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 css,\n defaultValue = 0,\n hideLabel,\n value,\n prompt,\n description,\n label,\n name,\n validation,\n onValueChange,\n ...remainingProps\n}: NumberInputFieldProps) => {\n const { control } = useFormContext()\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 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 css={css}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n >\n <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 {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"names":["NumberInputField","css","defaultValue","hideLabel","value","prompt","description","label","name","validation","onValueChange","remainingProps","control","useFormContext","ref","onChange","innerValue","innerName","useController","error","useFieldError","React","FieldWrapper","NumberInput","newValue"],"mappings":"~~yVAoBO~~,~~MAAMA~~,EAAmB,CAAC,CAC/B,IAAAC,EACA,aAAAC,EAAe,EACf,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,cAAAC,KACGC,CACL,IAA6B,CAC3B,KAAM,CAAE,QAAAC,CAAQ,EAAIC,~~EAAe~~,~~EAC7B,~~CACJ,MAAO,CAAE,IAAAC,EAAK,SAAAC,EAAU,MAAOC,EAAY,KAAMC,CAAU,CAC7D,EAAIC,EAAc,CAChB,~~KAAAV~~,EACA,~~QAAAI~~,EACA,~~MAAOH~~,EACP,aAAAP,CACF,CAAC,EACK,CAAE,~~MAAAiB~~,CAAM,EAAIC,~~EAAcZ~~,CAAI,EAEpC,~~OAAAa~~,EAAM,UAAU,IAAM,CAEhB,~~OAAOjB~~,EAAU,~~KAAaW~~,~~EAASX~~,CAAK,CAClD,EAAG,CAACA,CAAK,CAAC,~~EAGRiB~~,EAAA,cAACC,EAAA,CACC,~~IAAKrB~~,EACL,YAAaK,EACb,~~MAAOa~~,EACP,~~QAASX~~,EACT,UAAWL,EACX,MAAOI,EACP,OAAQF,EACR,SAAU,QAAQI,GAAA,~~KAAAA~~,OAAAA,EAAY,QAAQ,~~CAAA~~,~~EAEtCY~~,EAAA,cAACE,EAAA,CACC,~~GAAIf~~,EACJ,~~KAAMS~~,EACN,IAAKH,EACJ,GAAIK,GAAS,CAAE,MAAO,QAAS,eAAgB,EAAK,EACrD,~~aAAcjB~~,EACd,~~cAAgBsB~~,GAAa,CAC3BT,EAASS,CAAQ,~~EACjBd~~,GAAA,MAAAA,~~EAAgBc~~,~~CAAAA,~~CAClB,EACA,MAAOR,~~EACN~~,~~GAAGL~~,CAAAA,CACN,CACF,CAEJ,~~EAEAX~~,EAAiB,YAAc"}
1	+ {"version":3,"file":"NumberInputField.js","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'\nimport { useFieldError, ValidationOptions } from '~/components/form'\nimport type { CSS } from '~/stitches'\n\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n css?: CSS\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 css,\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 {\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 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 css={css}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={appearance}\n >\n <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={appearance}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"names":["NumberInputField","css","defaultValue","hideLabel","value","prompt","description","label","name","validation","onValueChange","appearance","remainingProps","control","useFormContext","ref","onChange","innerValue","innerName","useController","error","useFieldError","React","FieldWrapper","NumberInput","newValue"],"mappings":"yVAoBa,MAAAA,EAAmB,CAAC,CAC/B,IAAAC,EACA,aAAAC,EAAe,EACf,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,cAAAC,EACA,WAAAC,KACGC,CACL,IAA6B,CAC3B,KAAM,CAAE,QAAAC,CAAQ,EAAIC,IACd,CACJ,MAAO,CAAE,IAAAC,EAAK,SAAAC,EAAU,MAAOC,EAAY,KAAMC,CAAU,CAC7D,EAAIC,EAAc,CAChB,KAAAX,EACA,QAAAK,EACA,MAAOJ,EACP,aAAAP,CACF,CAAC,EACK,CAAE,MAAAkB,CAAM,EAAIC,EAAcb,CAAI,EAEpC,OAAAc,EAAM,UAAU,IAAM,CAEhB,OAAOlB,EAAU,KAAaY,EAASZ,CAAK,CAClD,EAAG,CAACA,CAAK,CAAC,EAGRkB,EAAA,cAACC,EAAA,CACC,IAAKtB,EACL,YAAaK,EACb,MAAOc,EACP,QAASZ,EACT,UAAWL,EACX,MAAOI,EACP,OAAQF,EACR,SAAU,QAAQI,GAAA,KAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYE,CAAAA,EAEZW,EAAA,cAACE,EAAA,CACC,GAAIhB,EACJ,KAAMU,EACN,IAAKH,EACJ,GAAIK,GAAS,CAAE,MAAO,QAAS,eAAgB,EAAK,EACrD,aAAclB,EACd,cAAgBuB,GAAa,CAC3BT,EAASS,CAAQ,EACjBf,GAAA,MAAAA,EAAgBe,CAClB,CAAA,EACA,MAAOR,EACP,WAAYN,EACX,GAAGC,CAAAA,CACN,CACF,CAEJ,EAEAZ,EAAiB,YAAc"}

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: {
-    ({ css, hideLabel, label, name, prompt, description, validation, ...remainingProps }: PasswordFieldProps): React.JSX.Element;
+    ({ css, hideLabel, label, name, prompt, description, validation, appearance, ...remainingProps }: PasswordFieldProps): React.JSX.Element;
     displayName: string;
 };
 export {};

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordField.js","sources":["../../../src/components/password-field/PasswordField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\nimport { PasswordInput } from '~/components/password-input'\nimport { CSS } from '~/stitches'\n\ntype PasswordFieldProps = React.ComponentProps<typeof PasswordInput> &\n Omit<FieldElementWrapperProps, 'label'> & {\n label?: string\n }\n\nexport const PasswordField = ({\n css = {},\n hideLabel,\n label = 'Password',\n name,\n prompt = undefined,\n description,\n validation,\n ...remainingProps\n}: PasswordFieldProps) => {\n const { register } = useFormContext()\n const { error } = useFieldError(name)\n\n const ref = validation ? register(validation) : register\n\n return (\n <FieldWrapper\n css={{ ...css, position: 'relative' } as CSS}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n >\n <PasswordInput\n autoComplete=\"current-password\"\n name={name}\n id={name}\n ref={ref}\n {...(error !== undefined && { state: 'error' })}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nPasswordField.displayName = 'PasswordField'\n"],"names":["PasswordField","css","hideLabel","label","name","prompt","description","validation","remainingProps","register","useFormContext","error","useFieldError","ref","React","FieldWrapper","PasswordInput"],"mappings":"4UAgBa,MAAAA,EAAgB,CAAC,CAC5B,IAAAC,EAAM,~~CAAA~~,~~EACN~~,UAAAC,EACA,MAAAC,EAAQ,WACR,KAAAC,EACA,OAAAC,EAAS,OACT,YAAAC,EACA,WAAAC,KACGC,CACL,IAA0B,CACxB,KAAM,CAAE,SAAAC,CAAS,EAAIC,IACf,CAAE,MAAAC,CAAM,EAAIC,~~EAAcR~~,CAAI,~~EAE9BS~~,~~EAAMN~~,~~EAAaE~~,~~EAASF~~,CAAU,~~EAAIE~~,EAEhD,OACEK,EAAA,cAACC,EAAA,CACC,IAAK,CAAE,~~GAAGd~~,EAAK,SAAU,UAAW,EACpC,YAAaK,EACb,~~MAAOK~~,EACP,~~QAASP~~,EACT,UAAWF,EACX,MAAOC,EACP,OAAQE,EACR,SAAU,QAAQE,GAAA,~~YAAAA~~,EAAY,QAAQ,~~CAEtCO~~,~~EAAAA~~,EAAA,cAACE,EAAA,CACC,aAAa,mBACb,~~KAAMZ~~,EACN,GAAIA,EACJ,~~IAAKS~~,~~EACJ~~,~~GAAIF~~,IAAU,QAAa,CAAE,MAAO,OAAQ,EAC5C,GAAGH,~~CAAAA,~~CACN,CACF,CAEJ,~~EAEAR~~,EAAc,YAAc"}
1	+ {"version":3,"file":"PasswordField.js","sources":["../../../src/components/password-field/PasswordField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useFormContext } from 'react-hook-form'\n\nimport {\n FieldElementWrapperProps,\n FieldWrapper\n} from '~/components/field-wrapper'\nimport { useFieldError } from '~/components/form'\nimport { PasswordInput } from '~/components/password-input'\nimport { CSS } from '~/stitches'\n\ntype PasswordFieldProps = React.ComponentProps<typeof PasswordInput> &\n Omit<FieldElementWrapperProps, 'label'> & {\n label?: string\n }\n\nexport const PasswordField = ({\n css = {},\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 { error } = useFieldError(name)\n\n const ref = validation ? register(validation) : register\n\n return (\n <FieldWrapper\n css={{ ...css, position: 'relative' } as CSS}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={appearance}\n >\n <PasswordInput\n autoComplete=\"current-password\"\n name={name}\n id={name}\n ref={ref}\n appearance={appearance}\n {...(error !== undefined && { state: 'error' })}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nPasswordField.displayName = 'PasswordField'\n"],"names":["PasswordField","css","hideLabel","label","name","prompt","description","validation","appearance","remainingProps","register","useFormContext","error","useFieldError","ref","React","FieldWrapper","PasswordInput"],"mappings":"4UAgBa,MAAAA,EAAgB,CAAC,CAC5B,IAAAC,EAAM,CAAC,EACP,UAAAC,EACA,MAAAC,EAAQ,WACR,KAAAC,EACA,OAAAC,EAAS,OACT,YAAAC,EACA,WAAAC,EACA,WAAAC,KACGC,CACL,IAA0B,CACxB,KAAM,CAAE,SAAAC,CAAS,EAAIC,IACf,CAAE,MAAAC,CAAM,EAAIC,EAAcT,CAAI,EAE9BU,EAAMP,EAAaG,EAASH,CAAU,EAAIG,EAEhD,OACEK,EAAA,cAACC,EAAA,CACC,IAAK,CAAE,GAAGf,EAAK,SAAU,UAAW,EACpC,YAAaK,EACb,MAAOM,EACP,QAASR,EACT,UAAWF,EACX,MAAOC,EACP,OAAQE,EACR,SAAU,QAAQE,GAAA,KAAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYC,CAAAA,EAEZO,EAAA,cAACE,EAAA,CACC,aAAa,mBACb,KAAMb,EACN,GAAIA,EACJ,IAAKU,EACL,WAAYN,EACX,GAAII,IAAU,QAAa,CAAE,MAAO,OAAQ,EAC5C,GAAGH,CACN,CAAA,CACF,CAEJ,EAEAT,EAAc,YAAc"}

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchField.js","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'\nimport { useFieldError } from '~/components/form'\nimport { SearchInput, SearchInputProps } from '~/components/search-input'\n\ntype SearchFieldProps = SearchInputProps & FieldElementWrapperProps\n\nexport const SearchField = ({\n css,\n hideLabel,\n label,\n name,\n validation,\n prompt,\n description,\n ...remainingProps\n}: SearchFieldProps) => {\n const { register } = useFormContext()\n const { error } = useFieldError(name)\n const ref = validation ? register(validation) : register\n\n return (\n <FieldWrapper\n css={css}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n >\n <SearchInput\n id={name}\n name={name}\n ref={ref}\n {...(error && { state: 'error' })}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nSearchField.displayName = 'SearchField'\n"],"names":["SearchField","css","hideLabel","label","name","validation","prompt","description","remainingProps","register","useFormContext","error","useFieldError","ref","React","FieldWrapper","SearchInput"],"mappings":"~~4UAYaA~~,EAAc,CAAC,CAC1B,IAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,KACGC,CACL,IAAwB,CACtB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9B,CAAE,MAAAC,CAAM,EAAIC,~~EAAcR~~,CAAI,~~EAC9BS~~,~~EAAMR~~,~~EAAaI~~,~~EAASJ~~,CAAU,~~EAAII~~,EAEhD,OACEK,EAAA,cAACC,EAAA,CACC,~~IAAKd~~,EACL,YAAaM,EACb,~~MAAOI~~,EACP,~~QAASP~~,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,~~YAAAA~~,EAAY,QAAQ,~~CAEtCS~~,EAAAA,EAAA,cAACE,EAAA,CACC,~~GAAIZ~~,EACJ,KAAMA,EACN,~~IAAKS~~,~~EACJ~~,~~GAAIF~~,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGH,~~EACN~~,CACF,CAEJ,~~EAEAR~~,EAAY,YAAc"}
1	+ {"version":3,"file":"SearchField.js","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'\nimport { useFieldError } from '~/components/form'\nimport { SearchInput, SearchInputProps } from '~/components/search-input'\n\ntype SearchFieldProps = SearchInputProps & FieldElementWrapperProps\n\nexport const SearchField = ({\n css,\n hideLabel,\n label,\n name,\n validation,\n prompt,\n description,\n appearance,\n ...remainingProps\n}: SearchFieldProps) => {\n const { register } = useFormContext()\n const { error } = useFieldError(name)\n const ref = validation ? register(validation) : register\n\n return (\n <FieldWrapper\n css={css}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={appearance}\n >\n <SearchInput\n id={name}\n name={name}\n ref={ref}\n appearance={appearance}\n {...(error && { state: 'error' })}\n {...remainingProps}\n />\n </FieldWrapper>\n )\n}\n\nSearchField.displayName = 'SearchField'\n"],"names":["SearchField","css","hideLabel","label","name","validation","prompt","description","appearance","remainingProps","register","useFormContext","error","useFieldError","ref","React","FieldWrapper","SearchInput"],"mappings":"sUAYO,MAAMA,EAAc,CAAC,CAC1B,IAAAC,EACA,UAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,KACGC,CACL,IAAwB,CACtB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9B,CAAE,MAAAC,CAAM,EAAIC,EAAcT,CAAI,EAC9BU,EAAMT,EAAaK,EAASL,CAAU,EAAIK,EAEhD,OACEK,EAAA,cAACC,EAAA,CACC,IAAKf,EACL,YAAaM,EACb,MAAOK,EACP,QAASR,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYG,CAEZO,EAAAA,EAAA,cAACE,EAAA,CACC,GAAIb,EACJ,KAAMA,EACN,IAAKU,EACL,WAAYN,EACX,GAAII,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGH,CAAAA,CACN,CACF,CAEJ,EAEAT,EAAY,YAAc"}

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

@@ -1,2 +1,2 @@
-import{Search as H,Close as $}from"@atom-learning/icons";import*as t from"react";import{ActionIcon as k}from"../action-icon/ActionIcon.js";import{Icon as E}from"../icon/Icon.js";import{InputText as L,InputBackground as x}from"../input/Input.js";import{styled as f}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as T}from"../../utilities/style/get-icon-size.js";import{useCallbackRef as M}from"../../utilities/hooks/useCallbackRef.js";var N=(e=>(e.SEARCH="SEARCH",e.CLEAR="CLEAR",e))(N||{});const O=f(E,{color:"$grey700",position:"absolute",pointerEvents:"none",variants:{size:{sm:{right:"$2",size:"$1"},md:{right:10,size:20},lg:{right:10,size:20}}}}),V=f(L,{"&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button":{display:"none"}}),h=t.forwardRef(({size:e="md",css:C,value:s,defaultValue:l="",onValueChange:n,clearText:d="Clear",onChange:c,...b},v)=>{const[u,R]=M(),[g,m]=t.useState(l),[A,p]=t.useState(l?"CLEAR":"SEARCH");t.useEffect(()=>{typeof s>"u"||(m(s),p(s?"CLEAR":"SEARCH"))},[s]);const z=t.useMemo(()=>T(e),[e]);t.useImperativeHandle(v,()=>u.current);const S=()=>{var r,o;const a=u.current;if(!a)return;const i=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;(o=i==null?void 0:i.call)==null||o.call(i,a,"");const y=new Event("input",{bubbles:!0});a.dispatchEvent(y),a.focus(),n==null||n("")},w=r=>{c==null||c(r);const o=r.target.value;m(o),n==null||n(o),p(o?"CLEAR":"SEARCH")},I=()=>A==="SEARCH"?t.createElement(O,{is:H,size:e,css:{size:e=="sm"?"$1":20,top:"50%",transform:"translateY(-50%)"}}):t.createElement(k,{label:d,theme:"neutral",size:z,css:{position:"absolute",top:"50%",transform:"translateY(-50%)",right:"$1"},onClick:S},t.createElement(E,{is:$}));return t.createElement(x,{css:{position:"relative",width:"auto",...C},size:e},t.createElement(V,{ref:R,size:e,type:"search",...b,value:g,onChange:w,css:{pr:e==="sm"?"$5":"$6"}}),I())});h.displayName="SearchInput";export{h as SearchInput};
+import{Search as $,Close as k}from"@atom-learning/icons";import*as t from"react";import{ActionIcon as L}from"../action-icon/ActionIcon.js";import{Icon as E}from"../icon/Icon.js";import{InputText as x,InputBackground as T}from"../input/Input.js";import{styled as f}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as M}from"../../utilities/style/get-icon-size.js";import{useCallbackRef as N}from"../../utilities/hooks/useCallbackRef.js";var O=(e=>(e.SEARCH="SEARCH",e.CLEAR="CLEAR",e))(O||{});const V=f(E,{color:"$grey700",position:"absolute",pointerEvents:"none",variants:{size:{sm:{right:"$2",size:"$1"},md:{right:10,size:20},lg:{right:10,size:20}}}}),Y=f(x,{"&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button":{display:"none"}}),d=t.forwardRef(({size:e="md",appearance:h="standard",css:C,value:o,defaultValue:l="",onValueChange:a,clearText:b="Clear",onChange:c,...v},g)=>{const[u,A]=N(),[R,p]=t.useState(l),[z,m]=t.useState(l?"CLEAR":"SEARCH");t.useEffect(()=>{typeof o>"u"||(p(o),m(o?"CLEAR":"SEARCH"))},[o]);const S=t.useMemo(()=>M(e),[e]);t.useImperativeHandle(g,()=>u.current);const w=()=>{var n,r;const s=u.current;if(!s)return;const i=(n=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:n.set;(r=i==null?void 0:i.call)==null||r.call(i,s,"");const H=new Event("input",{bubbles:!0});s.dispatchEvent(H),s.focus(),a==null||a("")},I=n=>{c==null||c(n);const r=n.target.value;p(r),a==null||a(r),m(r?"CLEAR":"SEARCH")},y=()=>z==="SEARCH"?t.createElement(V,{is:$,size:e,css:{size:e=="sm"?"$1":20,top:"50%",transform:"translateY(-50%)"}}):t.createElement(L,{label:b,theme:"neutral",size:S,css:{position:"absolute",top:"50%",transform:"translateY(-50%)",right:"$1"},onClick:w},t.createElement(E,{is:k}));return t.createElement(T,{css:{position:"relative",width:"auto",...C},size:e,appearance:h},t.createElement(Y,{ref:A,size:e,type:"search",...v,value:R,onChange:I,css:{pr:e==="sm"?"$5":"$6"}}),y())});d.displayName="SearchInput";export{d as SearchInput};
 //# sourceMappingURL=SearchInput.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Icon } from '~/components/icon/'\nimport { Input, InputBackground, InputText } from '~/components/input/'\nimport { CSS, styled } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n size?: 'sm' \| 'md' \| 'lg'\n css?: CSS\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 color: '$grey700',\n position: 'absolute',\n pointerEvents: 'none',\n variants: {\n size: {\n sm: {\n right: '$2',\n size: '$1'\n },\n md: {\n right: 10,\n size: 20\n },\n lg: {\n right: 10,\n size: 20\n }\n }\n }\n})\n\nconst StyledSearchInputText = styled(InputText, {\n '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button':\n {\n display: 'none'\n }\n})\n\nexport const SearchInput: React.ForwardRefExoticComponent<SearchInputProps> =\n React.forwardRef(\n (\n {\n size = 'md',\n css,\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(\n ref,\n () => inputElRef.current as HTMLInputElement\n )\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 css={{\n size: size == 'sm' ? '$1' : 20,\n top: '50%',\n transform: 'translateY(-50%)'\n }}\n />\n )\n\n return (\n <ActionIcon\n label={clearText}\n theme=\"neutral\"\n size={iconSize}\n css={{\n position: 'absolute',\n top: '50%',\n transform: 'translateY(-50%)',\n right: '$1'\n }}\n onClick={handleClear}\n >\n <Icon is={Close} />\n </ActionIcon>\n )\n }\n\n return (\n <InputBackground\n css={{ position: 'relative', width: 'auto', ...css }}\n size={size}\n >\n <StyledSearchInputText\n ref={setInputElRef}\n size={size}\n type=\"search\"\n {...remainingProps}\n value={innerValue}\n onChange={handleOnChange}\n css={{ pr: size === 'sm' ? '$5' : '$6' }}\n />\n {getIcon()}\n </InputBackground>\n )\n }\n )\n\nSearchInput.displayName = 'SearchInput'\n"],"names":["INPUT_ICON","StyledIcon","styled","Icon","StyledSearchInputText","InputText","SearchInput","React","size","css","value","defaultValue","onValueChange","clearText","onChange","remainingProps","ref","inputElRef","setInputElRef","useCallbackRef","innerValue","setInnerValue","activeIcon","setActiveIcon","iconSize","getFieldIconSize","handleClear","_a","_b","inputEl","nativeInputValueSetter","ev2","handleOnChange","event","newValue","getIcon","Search","ActionIcon","Close","InputBackground"],"mappings":"2mBAoBA,IAAKA,~~GAAAA~~,~~IACHA~~,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFLA,~~OAAA~~,CAAA,~~CAKL~~,~~EAAA,~~MAAMC,EAAaC,EAAOC,EAAM,CAC9B,MAAO,WACP,SAAU,WACV,cAAe,OACf,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,KAAM,IACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,CACF,CACF,CACF,CAAC,EAEKC,EAAwBF,EAAOG,EAAW,CAC9C,kGACE,CACE,QAAS,MACX,CACJ,CAAC,EAEYC,EACXC,EAAM,WACJ,CACE,CACE,KAAAC,EAAO,KACP,IAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,cAAAC,EACA,UAAAC,EAAY,QACZ,SAAAC,KACGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAYC,CAAa,EAAIC,~~IAC9B~~,CAACC,EAAYC,CAAa,~~EAAId~~,EAAM,~~SAASI~~,CAAY,EACzD,CAACW,EAAYC,CAAa,~~EAAIhB~~,EAAM,~~SACxCI~~,EAAe,QAAmB,QACpC,~~EACAJ~~,EAAM,UAAU,IAAM,CAChB,~~OAAOG~~,EAAU,MACrBW,EAAcX,CAAK,EACnBa,EAAcb,EAAQ,QAAmB,QAAiB,EAC5D,EAAG,CAACA,CAAK,CAAC,EAEV,MAAMc,~~EAAWjB~~,EAAM,QAAQ,~~IAAMkB~~,~~EAAiBjB~~,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnED,EAAM,~~oBACJS~~,EACA,IAAMC,EAAW,OACnB,EAEA,MAAMS,EAAc,IAAM,~~CAvFhC~~,IAAAC,EAAAC,~~EAwFQ~~,MAAMC,EAAUZ,EAAW,QAC3B,GAAI,CAACY,EAAS,OAGd,MAAMC,GAAyBH,EAAA,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,IAH+B,~~KAAAA~~,~~OAAAA,~~EAG5B,KACHC,EAAAE,GAAA,~~YAAAA~~,EAAwB,OAAxB,MAAAF,EAAA,KAAAE,EAA+BD,EAAS,EAAA,~~EACxC,~~MAAME,EAAM,IAAI,MAAM,QAAS,CAC7B,QAAS,EACX,CAAC,EACDF,EAAQ,cAAcE,CAAG,EACzBF,EAAQ,~~MACRjB~~,~~EAAAA,~~GAAA,MAAAA,EAAgB,~~EAAA~~,~~CAClB~~,EAEMoB,EAAkBC,GAA+C,CACrEnB,GAAA,MAAAA,EAAWmB,~~CAEX~~,~~EAAA,~~MAAMC,EAAWD,EAAM,OAAO,MAC9BZ,EAAca,CAAQ,EACtBtB,GAAA,MAAAA,EAAgBsB,~~CAChBX~~,~~EAAAA,~~EAAcW,EAAW,QAAmB,QAAiB,CAC/D,EAEMC,EAAU,IACVb,IAAe,~~SAEff~~,EAAA,cAACN,EAAA,CACC,~~GAAImC~~,EACJ,~~KAAM5B~~,EACN,IAAK,CACH,KAAMA,GAAQ,KAAO,KAAO,GAC5B,IAAK,MACL,UAAW,kBACb,~~CAAA~~,~~CACF,~~EAIFD,EAAA,~~cAAC8B~~,EAAA,CACC,MAAOxB,EACP,MAAM,UACN,KAAMW,EACN,IAAK,CACH,SAAU,WACV,IAAK,MACL,UAAW,mBACX,MAAO,IACT,EACA,QAASE,~~CAAAA~~,~~EAETnB,~~EAAA,cAACJ,EAAA,CAAK,~~GAAImC~~,~~CAAAA~~,~~CAAO,~~CACnB,EAIJ,~~OACE/B~~,EAAA,~~cAACgC~~,EAAA,CACC,IAAK,CAAE,SAAU,WAAY,MAAO,OAAQ,GAAG9B,CAAI,EACnD,~~KAAMD~~,CAAAA,~~EAEND~~,EAAA,cAACH,EAAA,CACC,~~IAAKc~~,EACL,~~KAAMV~~,EACN,KAAK,SACJ,~~GAAGO~~,EACJ,MAAOK,EACP,SAAUY,EACV,IAAK,CAAE,~~GAAIxB~~,IAAS,KAAO,KAAO,IAAK,CAAA,CACzC,~~EACC2B~~,EACH,CAAA,CAEJ,CACF,~~EAEF7B~~,EAAY,YAAc"}
1	+ {"version":3,"file":"SearchInput.js","sources":["../../../src/components/search-input/SearchInput.tsx"],"sourcesContent":["import { Close, Search } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Icon } from '~/components/icon'\nimport { Input, InputBackground, InputText } from '~/components/input'\nimport { CSS, styled } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n size?: 'sm' \| 'md' \| 'lg'\n css?: CSS\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 color: '$grey700',\n position: 'absolute',\n pointerEvents: 'none',\n variants: {\n size: {\n sm: {\n right: '$2',\n size: '$1'\n },\n md: {\n right: 10,\n size: 20\n },\n lg: {\n right: 10,\n size: 20\n }\n }\n }\n})\n\nconst StyledSearchInputText = styled(InputText, {\n '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button':\n {\n display: 'none'\n }\n})\n\nexport const SearchInput: React.ForwardRefExoticComponent<SearchInputProps> =\n React.forwardRef(\n (\n {\n size = 'md',\n appearance = 'standard',\n css,\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(\n ref,\n () => inputElRef.current as HTMLInputElement\n )\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 css={{\n size: size == 'sm' ? '$1' : 20,\n top: '50%',\n transform: 'translateY(-50%)'\n }}\n />\n )\n\n return (\n <ActionIcon\n label={clearText}\n theme=\"neutral\"\n size={iconSize}\n css={{\n position: 'absolute',\n top: '50%',\n transform: 'translateY(-50%)',\n right: '$1'\n }}\n onClick={handleClear}\n >\n <Icon is={Close} />\n </ActionIcon>\n )\n }\n\n return (\n <InputBackground\n css={{ position: 'relative', width: 'auto', ...css }}\n size={size}\n appearance={appearance}\n >\n <StyledSearchInputText\n ref={setInputElRef}\n size={size}\n type=\"search\"\n {...remainingProps}\n value={innerValue}\n onChange={handleOnChange}\n css={{ pr: size === 'sm' ? '$5' : '$6' }}\n />\n {getIcon()}\n </InputBackground>\n )\n }\n )\n\nSearchInput.displayName = 'SearchInput'\n"],"names":["INPUT_ICON","StyledIcon","styled","Icon","StyledSearchInputText","InputText","SearchInput","React","size","appearance","css","value","defaultValue","onValueChange","clearText","onChange","remainingProps","ref","inputElRef","setInputElRef","useCallbackRef","innerValue","setInnerValue","activeIcon","setActiveIcon","iconSize","getFieldIconSize","handleClear","_a","_b","inputEl","nativeInputValueSetter","ev2","handleOnChange","event","newValue","getIcon","Search","ActionIcon","Close","InputBackground"],"mappings":"2mBAoBA,IAAKA,GACHA,IAAAA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFLA,IAAAA,GAAA,CAAA,GAKL,MAAMC,EAAaC,EAAOC,EAAM,CAC9B,MAAO,WACP,SAAU,WACV,cAAe,OACf,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,KAAM,IACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,EACA,GAAI,CACF,MAAO,GACP,KAAM,EACR,CACF,CACF,CACF,CAAC,EAEKC,EAAwBF,EAAOG,EAAW,CAC9C,kGACE,CACE,QAAS,MACX,CACJ,CAAC,EAEYC,EACXC,EAAM,WACJ,CACE,CACE,KAAAC,EAAO,KACP,WAAAC,EAAa,WACb,IAAAC,EACA,MAAAC,EACA,aAAAC,EAAe,GACf,cAAAC,EACA,UAAAC,EAAY,QACZ,SAAAC,KACGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAC9B,EAAA,CAACC,EAAYC,CAAa,EAAIf,EAAM,SAASK,CAAY,EACzD,CAACW,EAAYC,CAAa,EAAIjB,EAAM,SACxCK,EAAe,QAAmB,QACpC,EACAL,EAAM,UAAU,IAAM,CAChB,OAAOI,EAAU,MACrBW,EAAcX,CAAK,EACnBa,EAAcb,EAAQ,QAAmB,QAAiB,EAC5D,EAAG,CAACA,CAAK,CAAC,EAEV,MAAMc,EAAWlB,EAAM,QAAQ,IAAMmB,EAAiBlB,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnED,EAAM,oBACJU,EACA,IAAMC,EAAW,OACnB,EAEA,MAAMS,EAAc,IAAM,CAxFhC,IAAAC,EAAAC,EAyFQ,MAAMC,EAAUZ,EAAW,QAC3B,GAAI,CAACY,EAAS,OAGd,MAAMC,GAAyBH,EAAA,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,IAH+B,YAAAA,EAG5B,KACHC,EAAAE,GAAA,KAAA,OAAAA,EAAwB,OAAxB,MAAAF,EAAA,KAAAE,EAA+BD,EAAS,EACxC,EAAA,MAAME,EAAM,IAAI,MAAM,QAAS,CAC7B,QAAS,EACX,CAAC,EACDF,EAAQ,cAAcE,CAAG,EACzBF,EAAQ,QACRjB,GAAA,MAAAA,EAAgB,EAClB,CAAA,EAEMoB,EAAkBC,GAA+C,CACrEnB,GAAA,MAAAA,EAAWmB,GAEX,MAAMC,EAAWD,EAAM,OAAO,MAC9BZ,EAAca,CAAQ,EACtBtB,GAAA,MAAAA,EAAgBsB,GAChBX,EAAcW,EAAW,QAAmB,QAAiB,CAC/D,EAEMC,EAAU,IACVb,IAAe,SAEfhB,EAAA,cAACN,EAAA,CACC,GAAIoC,EACJ,KAAM7B,EACN,IAAK,CACH,KAAMA,GAAQ,KAAO,KAAO,GAC5B,IAAK,MACL,UAAW,kBACb,EACF,EAIFD,EAAA,cAAC+B,EAAA,CACC,MAAOxB,EACP,MAAM,UACN,KAAMW,EACN,IAAK,CACH,SAAU,WACV,IAAK,MACL,UAAW,mBACX,MAAO,IACT,EACA,QAASE,GAETpB,EAAA,cAACJ,EAAA,CAAK,GAAIoC,EAAO,CACnB,EAIJ,OACEhC,EAAA,cAACiC,EAAA,CACC,IAAK,CAAE,SAAU,WAAY,MAAO,OAAQ,GAAG9B,CAAI,EACnD,KAAMF,EACN,WAAYC,CAAAA,EAEZF,EAAA,cAACH,EAAA,CACC,IAAKe,EACL,KAAMX,EACN,KAAK,SACJ,GAAGQ,EACJ,MAAOK,EACP,SAAUY,EACV,IAAK,CAAE,GAAIzB,IAAS,KAAO,KAAO,IAAK,CAAA,CACzC,EACC4B,EACH,CAAA,CAEJ,CACF,EAEF9B,EAAY,YAAc"}