npm - @atom-learning/components - Versions diffs - 5.8.0 → 6.0.0-beta.2 - Mend

@atom-learning/components 5.8.0 → 6.0.0-beta.2

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 (113) 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 o from"react";import{useFormContext as E,useController as N}from"react-hook-form";import{FieldWrapper as g}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as y}from"../form/useFieldError.js";import{useFormCustomContext as q}from"../form/useFormCustomContext.js";import{NumberInput as L}from"../number-input/NumberInput.js";const d=({css:s,defaultValue:l=0,hideLabel:f,value:r,prompt:c,description:C,label:b,name:e,validation:a,onValueChange:t,appearance:v,...F})=>{const{control:h}=E(),n=q(),{field:{ref:I,onChange:u,value:V,name:x}}=N({name:e,control:h,rules:a,defaultValue:l}),{error:i}=y(e),p=(n==null?void 0:n.appearance)||v;return o.useEffect(()=>{typeof r<"u"&&u(r)},[r]),o.createElement(g,{css:s,description:C,error:i,fieldId:e,hideLabel:f,label:b,prompt:c,required:Boolean(a==null?void 0:a.required),appearance:p},o.createElement(L,{id:e,name:x,ref:I,...i&&{state:"error","aria-invalid":!0},defaultValue:l,onValueChange:m=>{u(m),t==null||t(m)},value:V,appearance:p,...F}))};d.displayName="NumberInputField";export{d 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 {\n useFieldError,\n useFormCustomContext,\n ValidationOptions\n} 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 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 css={css}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={formAppearance}\n >\n <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"],"names":["NumberInputField","css","defaultValue","hideLabel","value","prompt","description","label","name","validation","onValueChange","appearance","remainingProps","control","useFormContext","context","useFormCustomContext","ref","onChange","innerValue","innerName","useController","error","useFieldError","formAppearance","React","FieldWrapper","NumberInput","newValue"],"mappings":"gaAwBa,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,EAAe,EAC7BC,EAAUC,EAAqB,EAC/B,CACJ,MAAO,CAAE,IAAAC,EAAK,SAAAC,EAAU,MAAOC,EAAY,KAAMC,CAAU,CAC7D,EAAIC,EAAc,CAChB,KAAAb,EACA,QAAAK,EACA,MAAOJ,EACP,aAAAP,CACF,CAAC,EACK,CAAE,MAAAoB,CAAM,EAAIC,EAAcf,CAAI,EAE9BgB,GAAiBT,GAAA,KAAA,OAAAA,EAAS,aAAcJ,EAE9C,OAAAc,EAAM,UAAU,IAAM,CAEhB,OAAOrB,EAAU,KAAac,EAASd,CAAK,CAClD,EAAG,CAACA,CAAK,CAAC,EAGRqB,EAAA,cAACC,EAAA,CACC,IAAKzB,EACL,YAAaK,EACb,MAAOgB,EACP,QAASd,EACT,UAAWL,EACX,MAAOI,EACP,OAAQF,EACR,SAAU,QAAQI,GAAA,KAAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYe,CAEZC,EAAAA,EAAA,cAACE,EAAA,CACC,GAAInB,EACJ,KAAMY,EACN,IAAKH,EACJ,GAAIK,GAAS,CAAE,MAAO,QAAS,eAAgB,EAAK,EACrD,aAAcpB,EACd,cAAgB0B,GAAa,CAC3BV,EAASU,CAAQ,EACjBlB,GAAA,MAAAA,EAAgBkB,CAClB,CAAA,EACA,MAAOT,EACP,WAAYK,EACX,GAAGZ,CAAAA,CACN,CACF,CAEJ,EAEAZ,EAAiB,YAAc"}

package/dist/components/pagination/PaginationNextButton.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import * as React from 'react';
 declare const StyledActionIcon: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
+    theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
     appearance?: "outline" | "solid" | "simple" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     isRounded?: boolean | "true" | undefined;
@@ -376,8 +376,8 @@ declare const StyledActionIcon: import("@atom-learning/stitches-react/types/styl
             marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
         };
     }> | undefined;
-}, "appearance" | "size" | "theme" | "label" | "children" | "as" | "hasTooltip" | "tooltipSide" | "isRounded" | keyof import("../../types").NavigatorActions> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
+}, "appearance" | "size" | "theme" | "label" | "children" | "as" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+    theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
     appearance?: "outline" | "solid" | "simple" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     isRounded?: boolean | "true" | undefined;

package/dist/components/pagination/PaginationPopover.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Ellypsis as s}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-group/CheckboxGroup.js";import"../checkbox-tree/CheckboxTree.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../drawer/Drawer.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as g}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as f}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../navigation-menu-vertical/NavigationMenuVertical.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/SideBarContext.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../spacer/Spacer.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import"../toast/Toast.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../tree/Tree.js";import"../video/Video.js";import"../keyboard-shortcut/index.js";import"../segmented-control/SegmentedControlContext.js";import"../segmented-control/SegmentedControlContent.js";import"../segmented-control/SegmentedControlDescription.js";import"../segmented-control/SegmentedControlHeading.js";import"../segmented-control/SegmentedControlItem.js";import"../segmented-control/SegmentedControlItemList.js";import"../segmented-control/SegmentedControlRoot.js";import"../file-drop/FileDrop.js";import"../file-drop/FileDropContext.js";import{PaginationPage as u}from"./PaginationPage.js";import{usePagination as d}from"./usePagination.js";const E=({children:e})=>{const{pagesCount:n,labels:i}=d(),p=Array.from({length:n},(o,l)=>l+1),[a,m]=t.useState(!1);return t.createElement(r,{open:a,onOpenChange:m,defaultOpen:!1},t.createElement(r.Trigger,{asChild:!0},e||t.createElement(c,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(f,{is:s}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,css:{p:0}},t.createElement(g,{css:{p:"$4",display:"flex",flexWrap:"wrap",gap:"$1",justifyContent:"center"}},p==null?void 0:p.map(o=>t.createElement(u,{key:o,pageNumber:o,onClick:()=>m(!1)})))))};export{E as PaginationPopover};
+import{Ellypsis as s}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-group/CheckboxGroup.js";import"../checkbox-tree/CheckboxTree.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../drawer/Drawer.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as g}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../form/useFormCustomContext.js";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as f}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../navigation-menu-vertical/NavigationMenuVertical.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/SideBarContext.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../spacer/Spacer.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import"../toast/Toast.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../tree/Tree.js";import"../video/Video.js";import"../keyboard-shortcut/index.js";import"../segmented-control/SegmentedControlContext.js";import"../segmented-control/SegmentedControlContent.js";import"../segmented-control/SegmentedControlDescription.js";import"../segmented-control/SegmentedControlHeading.js";import"../segmented-control/SegmentedControlItem.js";import"../segmented-control/SegmentedControlItemList.js";import"../segmented-control/SegmentedControlRoot.js";import"../file-drop/FileDrop.js";import"../file-drop/FileDropContext.js";import{PaginationPage as u}from"./PaginationPage.js";import{usePagination as d}from"./usePagination.js";const E=({children:e})=>{const{pagesCount:n,labels:i}=d(),p=Array.from({length:n},(o,l)=>l+1),[a,m]=t.useState(!1);return t.createElement(r,{open:a,onOpenChange:m,defaultOpen:!1},t.createElement(r.Trigger,{asChild:!0},e||t.createElement(c,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(f,{is:s}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,css:{p:0}},t.createElement(g,{css:{p:"$4",display:"flex",flexWrap:"wrap",gap:"$1",justifyContent:"center"}},p==null?void 0:p.map(o=>t.createElement(u,{key:o,pageNumber:o,onClick:()=>m(!1)})))))};export{E as PaginationPopover};
 //# sourceMappingURL=PaginationPopover.js.map

package/dist/components/pagination/PaginationPopover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon, Flex, Icon, Popover } from '..'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n children\n}: React.PropsWithChildren<unknown>) => {\n const { pagesCount, labels } = usePagination()\n const paginationItems = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n return (\n <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n <Popover.Trigger asChild>\n {children \|\| (\n <ActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n label={labels?.popoverTriggerLabel \|\| 'Open pagination popover'}\n data-testid=\"pagination_popover_trigger\"\n >\n <Icon is={Ellypsis} />\n </ActionIcon>\n )}\n </Popover.Trigger>\n <Popover.Content size=\"md\" showCloseButton={false} css={{ p: 0 }}>\n <Flex\n css={{\n p: '$4',\n display: 'flex',\n flexWrap: 'wrap',\n gap: '$1',\n justifyContent: 'center'\n }}\n >\n {paginationItems?.map((pageNumber) => {\n return (\n <PaginationPage\n key={pageNumber}\n pageNumber={pageNumber}\n onClick={() => setIsOpen(false)}\n />\n )\n })}\n </Flex>\n </Popover.Content>\n </Popover>\n )\n}\n"],"names":["PaginationPopover","children","pagesCount","labels","usePagination","paginationItems","_","index","isOpen","setIsOpen","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationPage"],"mappings":"~~2kIAOO~~,MAAMA,EAAoB,CAAC,CAChC,SAAAC,CACF,IAAwC,CACtC,KAAM,CAAE,WAAAC,EAAY,OAAAC,CAAO,EAAIC,EAAc,EACvCC,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEM,CAACC,EAAQC,CAAS,EAAIC,EAAM,SAAkB,EAAK,EAEzD,OACEA,EAAA,cAACC,EAAA,CAAQ,KAAMH,EAAQ,aAAcC,EAAW,YAAa,EAC3DC,EAAAA,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,EAAA,EACrBV,GACCS,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOT,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAEZO,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,CAAAA,CAAU,CACtB,CAEJ,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,IAAK,CAAE,EAAG,CAAE,CAC7DD,EAAAA,EAAA,cAACK,EAAA,CACC,IAAK,CACH,EAAG,KACH,QAAS,OACT,SAAU,OACV,IAAK,KACL,eAAgB,QAClB,GAECV,GAAA,KAAA,OAAAA,EAAiB,IAAKW,GAEnBN,EAAA,cAACO,EAAA,CACC,IAAKD,EACL,WAAYA,EACZ,QAAS,IAAMP,EAAU,EAAK,EAChC,CAGN,CAAA,CACF,CACF,CAEJ"}
1	+ {"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon, Flex, Icon, Popover } from '..'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n children\n}: React.PropsWithChildren<unknown>) => {\n const { pagesCount, labels } = usePagination()\n const paginationItems = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n return (\n <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n <Popover.Trigger asChild>\n {children \|\| (\n <ActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n label={labels?.popoverTriggerLabel \|\| 'Open pagination popover'}\n data-testid=\"pagination_popover_trigger\"\n >\n <Icon is={Ellypsis} />\n </ActionIcon>\n )}\n </Popover.Trigger>\n <Popover.Content size=\"md\" showCloseButton={false} css={{ p: 0 }}>\n <Flex\n css={{\n p: '$4',\n display: 'flex',\n flexWrap: 'wrap',\n gap: '$1',\n justifyContent: 'center'\n }}\n >\n {paginationItems?.map((pageNumber) => {\n return (\n <PaginationPage\n key={pageNumber}\n pageNumber={pageNumber}\n onClick={() => setIsOpen(false)}\n />\n )\n })}\n </Flex>\n </Popover.Content>\n </Popover>\n )\n}\n"],"names":["PaginationPopover","children","pagesCount","labels","usePagination","paginationItems","_","index","isOpen","setIsOpen","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationPage"],"mappings":"mnIAOO,MAAMA,EAAoB,CAAC,CAChC,SAAAC,CACF,IAAwC,CACtC,KAAM,CAAE,WAAAC,EAAY,OAAAC,CAAO,EAAIC,EAAc,EACvCC,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEM,CAACC,EAAQC,CAAS,EAAIC,EAAM,SAAkB,EAAK,EAEzD,OACEA,EAAA,cAACC,EAAA,CAAQ,KAAMH,EAAQ,aAAcC,EAAW,YAAa,EAC3DC,EAAAA,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,EAAA,EACrBV,GACCS,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOT,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAEZO,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,CAAAA,CAAU,CACtB,CAEJ,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,IAAK,CAAE,EAAG,CAAE,CAC7DD,EAAAA,EAAA,cAACK,EAAA,CACC,IAAK,CACH,EAAG,KACH,QAAS,OACT,SAAU,OACV,IAAK,KACL,eAAgB,QAClB,GAECV,GAAA,KAAA,OAAAA,EAAiB,IAAKW,GAEnBN,EAAA,cAACO,EAAA,CACC,IAAKD,EACL,WAAYA,EACZ,QAAS,IAAMP,EAAU,EAAK,EAChC,CAGN,CAAA,CACF,CACF,CAEJ"}

package/dist/components/pagination/PaginationPreviousButton.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import * as React from 'react';
 declare const StyledActionIcon: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
+    theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
     appearance?: "outline" | "solid" | "simple" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     isRounded?: boolean | "true" | undefined;
@@ -376,8 +376,8 @@ declare const StyledActionIcon: import("@atom-learning/stitches-react/types/styl
             marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
         };
     }> | undefined;
-}, "appearance" | "size" | "theme" | "label" | "children" | "as" | "hasTooltip" | "tooltipSide" | "isRounded" | keyof import("../../types").NavigatorActions> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
+}, "appearance" | "size" | "theme" | "label" | "children" | "as" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+    theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
     appearance?: "outline" | "solid" | "simple" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     isRounded?: boolean | "true" | undefined;

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 p from"react";import{useFormContext as F}from"react-hook-form";import{FieldWrapper as w}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as b}from"../form/useFieldError.js";import{useFormCustomContext as C}from"../form/useFormCustomContext.js";import{PasswordInput as P}from"../password-input/PasswordInput.js";const s=({css:m={},hideLabel:d,label:l="Password",name:e,prompt:n=void 0,description:c,validation:r,appearance:u,...f})=>{const{register:o}=F(),t=C(),{error:a}=b(e),v=r?o(r):o,i=(t==null?void 0:t.appearance)||u;return p.createElement(w,{css:{...m,position:"relative"},description:c,error:a,fieldId:e,hideLabel:d,label:l,prompt:n,required:Boolean(r==null?void 0:r.required),appearance:i},p.createElement(P,{autoComplete:"current-password",name:e,id:e,ref:v,appearance:i,...a!==void 0&&{state:"error"},...f}))};s.displayName="PasswordField";export{s 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, useFormCustomContext } 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 context = useFormCustomContext()\n const { error } = useFieldError(name)\n\n const ref = validation ? register(validation) : register\n const formAppearance = context?.appearance \|\| appearance\n\n return (\n <FieldWrapper\n css={{ ...css, 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={formAppearance}\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"],"names":["PasswordField","css","hideLabel","label","name","prompt","description","validation","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","PasswordInput"],"mappings":"mZAgBO,MAAMA,EAAgB,CAAC,CAC5B,IAAAC,EAAM,CAAA,EACN,UAAAC,EACA,MAAAC,EAAQ,WACR,KAAAC,EACA,OAAAC,EAAS,OACT,YAAAC,EACA,WAAAC,EACA,WAAAC,KACGC,CACL,IAA0B,CACxB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9BC,EAAUC,IACV,CAAE,MAAAC,CAAM,EAAIC,EAAcX,CAAI,EAE9BY,EAAMT,EAAaG,EAASH,CAAU,EAAIG,EAC1CO,GAAiBL,GAAA,KAAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,IAAK,CAAE,GAAGlB,EAAK,SAAU,UAAW,EACpC,YAAaK,EACb,MAAOQ,EACP,QAASV,EACT,UAAWF,EACX,MAAOC,EACP,OAAQE,EACR,SAAU,QAAQE,GAAA,KAAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYU,CAAAA,EAEZC,EAAA,cAACE,EAAA,CACC,aAAa,mBACb,KAAMhB,EACN,GAAIA,EACJ,IAAKY,EACL,WAAYC,EACX,GAAIH,IAAU,QAAa,CAAE,MAAO,OAAQ,EAC5C,GAAGL,CACN,CAAA,CACF,CAEJ,EAEAT,EAAc,YAAc"}

package/dist/components/progress-bar/ProgressBar.d.ts CHANGED Viewed

@@ -1,7 +1,8 @@
 import * as Progress from '@radix-ui/react-progress';
 import * as React from 'react';
 declare const StyledProgressBar: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Progress.ProgressProps & React.RefAttributes<HTMLDivElement>>, {
-    theme?: "info" | "success" | "danger" | "warning" | "primary" | undefined;
+    size?: "sm" | "md" | undefined;
+    theme?: "info" | "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
 }, {
     sm: string;
     md: string;
@@ -379,7 +380,7 @@ type ProgressBarProps = React.ComponentPropsWithoutRef<typeof StyledProgressBar>
     id?: string;
 });
 export declare const ProgressBar: {
-    ({ value, max, theme, ...remainingProps }: ProgressBarProps): React.JSX.Element;
+    ({ value, max, size, theme, ...remainingProps }: ProgressBarProps): React.JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/progress-bar/ProgressBar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as e from"@radix-ui/react-progress";import*as a from"react";import{styled as t}from"../../stitches.js";const l=t(e.Root,{borderRadius:"$round",background:"$grey200",height:"$0",position:"relative",overflow:"hidden",width:"100%",variants:{theme:{primary:{color:"$primary800"},info:{color:"$info"},success:{color:"$success"},warning:{color:"$warning"},danger:{color:"$danger"}}}}),d=t(e.Indicator,{backgroundColor:"currentcolor",borderRadius:"$round",boxSizing:"border-box",height:"100%",position:"absolute",transition:"all 300ms ease-out"}),i=({value:r,max:o=100,theme:s="primary",...n})=>a.createElement(l,{value:r,max:o,theme:s,...n},a.createElement(d,{style:{width:"100%",transform:`translateX(-${100-(r||0)/o*100}%)`}}));i.displayName="ProgressBar";export{i as ProgressBar};
+import*as o from"@radix-ui/react-progress";import*as a from"react";import{styled as t}from"../../stitches.js";const m=t(o.Root,{borderRadius:"$round",background:"$grey200",position:"relative",overflow:"hidden",width:"100%",variants:{size:{sm:{height:"4px"},md:{height:"$0"}},theme:{primary:{color:"$primary800"},info:{color:"$info"},success:{color:"$success"},warning:{color:"$warning"},danger:{color:"$danger"},neutral:{color:"$grey800",bg:"$grey400"}}}}),d=t(o.Indicator,{backgroundColor:"currentcolor",borderRadius:"$round",boxSizing:"border-box",height:"100%",position:"absolute",transition:"all 300ms ease-out"}),i=({value:r,max:e=100,size:s="md",theme:n="primary",...l})=>a.createElement(m,{value:r,max:e,theme:n,size:s,...l},a.createElement(d,{style:{width:"100%",transform:`translateX(-${100-(r||0)/e*100}%)`}}));i.displayName="ProgressBar";export{i as ProgressBar};
 //# sourceMappingURL=ProgressBar.js.map

package/dist/components/progress-bar/ProgressBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProgressBar.js","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import * as Progress from '@radix-ui/react-progress'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nconst StyledProgressBar = styled(Progress.Root, {\n borderRadius: '$round',\n background: '$grey200',\n ~~height: '$0',\n~~ position: 'relative',\n overflow: 'hidden',\n width: '100%',\n variants: {\n theme: {\n primary: { color: '$primary800' },\n info: { color: '$info' },\n success: { color: '$success' },\n warning: { color: '$warning' },\n danger: { color: '$danger' }\n }\n }\n})\n\nconst StyledIndicator = styled(Progress.Indicator, {\n backgroundColor: 'currentcolor',\n borderRadius: '$round',\n boxSizing: 'border-box',\n height: '100%',\n position: 'absolute',\n transition: 'all 300ms ease-out'\n})\n\ntype ProgressBarProps = React.ComponentPropsWithoutRef<\n typeof StyledProgressBar\n> &\n (\n \| { id: string; 'aria-label'?: string }\n \| { 'aria-label': string; id?: string }\n )\n\nexport const ProgressBar = ({\n value,\n max = 100,\n theme = 'primary',\n ...remainingProps\n}: ProgressBarProps) => (\n <StyledProgressBar value={value} max={max} theme={theme} {...remainingProps}>\n <StyledIndicator\n style={{\n width: '100%',\n transform: `translateX(-${100 - ((value \|\| 0) / max) * 100}%)`\n }}\n />\n </StyledProgressBar>\n)\n\nProgressBar.displayName = 'ProgressBar'\n"],"names":["StyledProgressBar","styled","Progress","StyledIndicator","ProgressBar","value","max","theme","remainingProps","React"],"mappings":"8GAKA,MAAMA,EAAoBC,EAAOC,EAAS,KAAM,CAC9C,aAAc,SACd,WAAY,WACZ,~~OAAQ,KACR,~~SAAU,WACV,SAAU,SACV,MAAO,OACP,SAAU,CACR,MAAO,CACL,QAAS,CAAE,MAAO,aAAc,EAChC,KAAM,CAAE,MAAO,OAAQ,EACvB,QAAS,CAAE,MAAO,UAAW,EAC7B,QAAS,CAAE,MAAO,UAAW,EAC7B,OAAQ,CAAE,MAAO,SAAU,~~CAC7B~~,CACF,CACF,CAAC,EAEKC,EAAkBF,EAAOC,EAAS,UAAW,CACjD,gBAAiB,eACjB,aAAc,SACd,UAAW,aACX,OAAQ,OACR,SAAU,WACV,WAAY,oBACd,CAAC,EAUYE,EAAc,CAAC,CAC1B,MAAAC,EACA,IAAAC,EAAM,IACN,MAAAC,EAAQ,aACLC,CACL,IACEC,EAAA,~~cAACT~~,EAAA,~~CAAkB~~,MAAOK,~~EAAO~~,IAAKC,~~EAAK~~,~~MAAOC~~,~~EAAQ~~,~~GAAGC~~,~~CAC3DC~~,~~EAAAA~~,EAAA,~~cAACN~~,EAAA,CACC,MAAO,CACL,MAAO,OACP,UAAW,eAAe,KAAQE,GAAS,GAAKC,EAAO,OACzD,~~CACF,~~CAAA,CACF,EAGFF,EAAY,YAAc"}
1	+ {"version":3,"file":"ProgressBar.js","sources":["../../../src/components/progress-bar/ProgressBar.tsx"],"sourcesContent":["import * as Progress from '@radix-ui/react-progress'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nconst StyledProgressBar = styled(Progress.Root, {\n borderRadius: '$round',\n background: '$grey200',\n position: 'relative',\n overflow: 'hidden',\n width: '100%',\n variants: {\n size: {\n sm: { height: '4px' },\n md: { height: '$0' }\n },\n theme: {\n primary: { color: '$primary800' },\n info: { color: '$info' },\n success: { color: '$success' },\n warning: { color: '$warning' },\n danger: { color: '$danger' },\n neutral: { color: '$grey800', bg: '$grey400' }\n }\n }\n})\n\nconst StyledIndicator = styled(Progress.Indicator, {\n backgroundColor: 'currentcolor',\n borderRadius: '$round',\n boxSizing: 'border-box',\n height: '100%',\n position: 'absolute',\n transition: 'all 300ms ease-out'\n})\n\ntype ProgressBarProps = React.ComponentPropsWithoutRef<\n typeof StyledProgressBar\n> &\n (\n \| { id: string; 'aria-label'?: string }\n \| { 'aria-label': string; id?: string }\n )\n\nexport const ProgressBar = ({\n value,\n max = 100,\n size = 'md',\n theme = 'primary',\n ...remainingProps\n}: ProgressBarProps) => (\n <StyledProgressBar\n value={value}\n max={max}\n theme={theme}\n size={size}\n {...remainingProps}\n >\n <StyledIndicator\n style={{\n width: '100%',\n transform: `translateX(-${100 - ((value \|\| 0) / max) * 100}%)`\n }}\n />\n </StyledProgressBar>\n)\n\nProgressBar.displayName = 'ProgressBar'\n"],"names":["StyledProgressBar","styled","Progress","StyledIndicator","ProgressBar","value","max","size","theme","remainingProps","React"],"mappings":"8GAKA,MAAMA,EAAoBC,EAAOC,EAAS,KAAM,CAC9C,aAAc,SACd,WAAY,WACZ,SAAU,WACV,SAAU,SACV,MAAO,OACP,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,OAAQ,KAAM,EACpB,GAAI,CAAE,OAAQ,IAAK,CACrB,EACA,MAAO,CACL,QAAS,CAAE,MAAO,aAAc,EAChC,KAAM,CAAE,MAAO,OAAQ,EACvB,QAAS,CAAE,MAAO,UAAW,EAC7B,QAAS,CAAE,MAAO,UAAW,EAC7B,OAAQ,CAAE,MAAO,SAAU,EAC3B,QAAS,CAAE,MAAO,WAAY,GAAI,UAAW,CAC/C,CACF,CACF,CAAC,EAEKC,EAAkBF,EAAOC,EAAS,UAAW,CACjD,gBAAiB,eACjB,aAAc,SACd,UAAW,aACX,OAAQ,OACR,SAAU,WACV,WAAY,oBACd,CAAC,EAUYE,EAAc,CAAC,CAC1B,MAAAC,EACA,IAAAC,EAAM,IACN,KAAAC,EAAO,KACP,MAAAC,EAAQ,aACLC,CACL,IACEC,EAAA,cAACV,EAAA,CACC,MAAOK,EACP,IAAKC,EACL,MAAOE,EACP,KAAMD,EACL,GAAGE,GAEJC,EAAA,cAACP,EAAA,CACC,MAAO,CACL,MAAO,OACP,UAAW,eAAe,KAAQE,GAAS,GAAKC,EAAO,OACzD,CAAA,CACF,CACF,EAGFF,EAAY,YAAc"}

package/dist/components/radio-button-field/RadioButtonField.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as e from"react";import{useFormContext as v,useController as F}from"react-hook-form";import{Description as R}from"../field-wrapper/FieldDescription.js";import"../form/Form.js";import{useFieldError as V}from"../form/useFieldError.js";import{InlineMessage as h}from"../inline-message/InlineMessage.js";import{Label as B}from"../label/Label.js";import"../radio-button/RadioButton.js";import{RadioButtonGroup as x}from"../radio-button/RadioButtonGroup.js";import{styled as y}from"../../stitches.js";import{RadioField as q}from"./RadioField.js";const I=y("fieldset",{all:"unset"}),u=({children:c,css:d,direction:f="column",defaultValue:r,value:o,description:l,label:p,name:n,validation:t,onValueChange:a,...E})=>{const{control:b}=v(),{field:{ref:g,onChange:i,value:C,name:D}}=F({name:n,control:b,rules:t,defaultValue:r}),{error:m}=V(n);return e.useEffect(()=>{typeof o<"u"&&i(o)},[o]),e.createElement(I,{css:d},e.createElement(B,{as:"legend",css:{p:0,mb:"$3"},required:Boolean(t==null?void 0:t.required)},p),l&&e.createElement(R,{css:{mb:"$3"}},l),e.createElement(x,{ref:g,direction:f,defaultValue:r,onValueChange:s=>{i(s),a==null||a(s)},value:C,...E},c),m&&e.createElement(h,{css:{mt:"$2"}},m))},j=Object.assign(u,{Item:q});u.displayName="RadioButtonField";export{j as RadioButtonField};
+import*as e from"react";import{useFormContext as v,useController as F}from"react-hook-form";import{Description as R}from"../field-wrapper/FieldDescription.js";import"../form/Form.js";import{useFieldError as V}from"../form/useFieldError.js";import"../form/useFormCustomContext.js";import{InlineMessage as h}from"../inline-message/InlineMessage.js";import{Label as B}from"../label/Label.js";import"../radio-button/RadioButton.js";import{RadioButtonGroup as x}from"../radio-button/RadioButtonGroup.js";import{styled as y}from"../../stitches.js";import{RadioField as q}from"./RadioField.js";const I=y("fieldset",{all:"unset"}),u=({children:c,css:d,direction:p="column",defaultValue:r,value:o,description:l,label:f,name:n,validation:t,onValueChange:a,...E})=>{const{control:b}=v(),{field:{ref:g,onChange:i,value:C,name:D}}=F({name:n,control:b,rules:t,defaultValue:r}),{error:m}=V(n);return e.useEffect(()=>{typeof o<"u"&&i(o)},[o]),e.createElement(I,{css:d},e.createElement(B,{as:"legend",css:{p:0,mb:"$3"},required:Boolean(t==null?void 0:t.required)},f),l&&e.createElement(R,{css:{mb:"$3"}},l),e.createElement(x,{ref:g,direction:p,defaultValue:r,onValueChange:s=>{i(s),a==null||a(s)},value:C,...E},c),m&&e.createElement(h,{css:{mt:"$2"}},m))},j=Object.assign(u,{Item:q});u.displayName="RadioButtonField";export{j as RadioButtonField};
 //# sourceMappingURL=RadioButtonField.js.map

package/dist/components/radio-button-field/RadioButtonField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButtonField.js","sources":["../../../src/components/radio-button-field/RadioButtonField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldElementWrapperProps } from '~/components/field-wrapper'\nimport { Description as FieldDescription } from '~/components/field-wrapper/FieldDescription'\nimport { useFieldError } from '~/components/form'\nimport { InlineMessage } from '~/components/inline-message'\nimport { Label } from '~/components/label'\nimport { RadioButtonGroup } from '~/components/radio-button'\nimport { styled } from '~/stitches'\n\nimport { RadioField } from './RadioField'\n\nconst Fieldset = styled('fieldset', {\n all: 'unset'\n})\n\ntype RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> &\n FieldElementWrapperProps\n\nconst RadioButtonFieldComponent = ({\n children,\n css,\n direction = 'column',\n defaultValue,\n value,\n description,\n label,\n name,\n validation,\n onValueChange,\n ...remainingProps\n}: RadioButtonFieldProps) => {\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 <Fieldset css={css}>\n <Label\n as=\"legend\"\n css={{ p: 0, mb: '$3' }}\n required={Boolean(validation?.required)}\n >\n {label}\n </Label>\n {description && (\n <FieldDescription css={{ mb: '$3' }}>{description}</FieldDescription>\n )}\n\n <RadioButtonGroup\n ref={ref}\n direction={direction}\n defaultValue={defaultValue}\n onValueChange={(newValue) => {\n onChange(newValue)\n onValueChange?.(newValue)\n }}\n value={innerValue}\n {...remainingProps}\n >\n {children}\n </RadioButtonGroup>\n\n {error && <InlineMessage css={{ mt: '$2' }}>{error}</InlineMessage>}\n </Fieldset>\n )\n}\n\nexport const RadioButtonField = Object.assign(RadioButtonFieldComponent, {\n Item: RadioField\n})\n\nRadioButtonFieldComponent.displayName = 'RadioButtonField'\n"],"names":["Fieldset","styled","RadioButtonFieldComponent","children","css","direction","defaultValue","value","description","label","name","validation","onValueChange","remainingProps","control","useFormContext","ref","onChange","innerValue","innerName","useController","error","useFieldError","React","Label","FieldDescription","RadioButtonGroup","newValue","InlineMessage","RadioButtonField","RadioField"],"mappings":"~~miBAaA~~,MAAMA,EAAWC,EAAO,WAAY,CAClC,IAAK,OACP,CAAC,EAKKC,EAA4B,CAAC,CACjC,SAAAC,EACA,IAAAC,EACA,UAAAC,EAAY,SACZ,aAAAC,EACA,MAAAC,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,aAAAL,CACF,CAAC,EACK,CAAE,MAAAe,CAAM,EAAIC,EAAcZ,CAAI,EAEpC,OAAAa,EAAM,UAAU,IAAM,CAEhB,OAAOhB,EAAU,KAAaU,EAASV,CAAK,CAClD,EAAG,CAACA,CAAK,CAAC,EAGRgB,EAAA,cAACvB,EAAA,CAAS,IAAKI,CAAAA,EACbmB,EAAA,cAACC,EAAA,CACC,GAAG,SACH,IAAK,CAAE,EAAG,EAAG,GAAI,IAAK,EACtB,SAAU,QAAQb,GAAA,KAAAA,OAAAA,EAAY,QAAQ,CAErCF,EAAAA,CACH,EACCD,GACCe,EAAA,cAACE,EAAA,CAAiB,IAAK,CAAE,GAAI,IAAK,CAAA,EAAIjB,CAAY,EAGpDe,EAAA,cAACG,EAAA,CACC,IAAKV,EACL,UAAWX,EACX,aAAcC,EACd,cAAgBqB,GAAa,CAC3BV,EAASU,CAAQ,EACjBf,GAAA,MAAAA,EAAgBe,EAClB,EACA,MAAOT,EACN,GAAGL,CAEHV,EAAAA,CACH,EAECkB,GAASE,EAAA,cAACK,EAAA,CAAc,IAAK,CAAE,GAAI,IAAK,CAAIP,EAAAA,CAAM,CACrD,CAEJ,EAEaQ,EAAmB,OAAO,OAAO3B,EAA2B,CACvE,KAAM4B,CACR,CAAC,EAED5B,EAA0B,YAAc"}
1	+ {"version":3,"file":"RadioButtonField.js","sources":["../../../src/components/radio-button-field/RadioButtonField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldElementWrapperProps } from '~/components/field-wrapper'\nimport { Description as FieldDescription } from '~/components/field-wrapper/FieldDescription'\nimport { useFieldError } from '~/components/form'\nimport { InlineMessage } from '~/components/inline-message'\nimport { Label } from '~/components/label'\nimport { RadioButtonGroup } from '~/components/radio-button'\nimport { styled } from '~/stitches'\n\nimport { RadioField } from './RadioField'\n\nconst Fieldset = styled('fieldset', {\n all: 'unset'\n})\n\ntype RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> &\n FieldElementWrapperProps\n\nconst RadioButtonFieldComponent = ({\n children,\n css,\n direction = 'column',\n defaultValue,\n value,\n description,\n label,\n name,\n validation,\n onValueChange,\n ...remainingProps\n}: RadioButtonFieldProps) => {\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 <Fieldset css={css}>\n <Label\n as=\"legend\"\n css={{ p: 0, mb: '$3' }}\n required={Boolean(validation?.required)}\n >\n {label}\n </Label>\n {description && (\n <FieldDescription css={{ mb: '$3' }}>{description}</FieldDescription>\n )}\n\n <RadioButtonGroup\n ref={ref}\n direction={direction}\n defaultValue={defaultValue}\n onValueChange={(newValue) => {\n onChange(newValue)\n onValueChange?.(newValue)\n }}\n value={innerValue}\n {...remainingProps}\n >\n {children}\n </RadioButtonGroup>\n\n {error && <InlineMessage css={{ mt: '$2' }}>{error}</InlineMessage>}\n </Fieldset>\n )\n}\n\nexport const RadioButtonField = Object.assign(RadioButtonFieldComponent, {\n Item: RadioField\n})\n\nRadioButtonFieldComponent.displayName = 'RadioButtonField'\n"],"names":["Fieldset","styled","RadioButtonFieldComponent","children","css","direction","defaultValue","value","description","label","name","validation","onValueChange","remainingProps","control","useFormContext","ref","onChange","innerValue","innerName","useController","error","useFieldError","React","Label","FieldDescription","RadioButtonGroup","newValue","InlineMessage","RadioButtonField","RadioField"],"mappings":"2kBAaA,MAAMA,EAAWC,EAAO,WAAY,CAClC,IAAK,OACP,CAAC,EAKKC,EAA4B,CAAC,CACjC,SAAAC,EACA,IAAAC,EACA,UAAAC,EAAY,SACZ,aAAAC,EACA,MAAAC,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,aAAAL,CACF,CAAC,EACK,CAAE,MAAAe,CAAM,EAAIC,EAAcZ,CAAI,EAEpC,OAAAa,EAAM,UAAU,IAAM,CAEhB,OAAOhB,EAAU,KAAaU,EAASV,CAAK,CAClD,EAAG,CAACA,CAAK,CAAC,EAGRgB,EAAA,cAACvB,EAAA,CAAS,IAAKI,CAAAA,EACbmB,EAAA,cAACC,EAAA,CACC,GAAG,SACH,IAAK,CAAE,EAAG,EAAG,GAAI,IAAK,EACtB,SAAU,QAAQb,GAAA,KAAAA,OAAAA,EAAY,QAAQ,CAErCF,EAAAA,CACH,EACCD,GACCe,EAAA,cAACE,EAAA,CAAiB,IAAK,CAAE,GAAI,IAAK,CAAA,EAAIjB,CAAY,EAGpDe,EAAA,cAACG,EAAA,CACC,IAAKV,EACL,UAAWX,EACX,aAAcC,EACd,cAAgBqB,GAAa,CAC3BV,EAASU,CAAQ,EACjBf,GAAA,MAAAA,EAAgBe,EAClB,EACA,MAAOT,EACN,GAAGL,CAEHV,EAAAA,CACH,EAECkB,GAASE,EAAA,cAACK,EAAA,CAAc,IAAK,CAAE,GAAI,IAAK,CAAIP,EAAAA,CAAM,CACrD,CAEJ,EAEaQ,EAAmB,OAAO,OAAO3B,EAA2B,CACvE,KAAM4B,CACR,CAAC,EAED5B,EAA0B,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 p from"react";import{useFormContext as h}from"react-hook-form";import{FieldWrapper as b}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as v}from"../form/useFieldError.js";import{useFormCustomContext as x}from"../form/useFormCustomContext.js";import{SearchInput as C}from"../search-input/SearchInput.js";const m=({css:l,hideLabel:n,label:d,name:e,validation:r,prompt:s,description:c,appearance:u,...f})=>{const{register:o}=h(),a=x(),{error:t}=v(e),F=r?o(r):o,i=(a==null?void 0:a.appearance)||u;return p.createElement(b,{css:l,description:c,error:t,fieldId:e,hideLabel:n,label:d,prompt:s,required:Boolean(r==null?void 0:r.required),appearance:i},p.createElement(C,{id:e,name:e,ref:F,appearance:i,...t&&{state:"error"},...f}))};m.displayName="SearchField";export{m 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, useFormCustomContext } 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 context = useFormCustomContext()\n const { error } = useFieldError(name)\n\n const ref = validation ? register(validation) : register\n const formAppearance = context?.appearance \|\| appearance\n\n return (\n <FieldWrapper\n css={css}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={formAppearance}\n >\n <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"],"names":["SearchField","css","hideLabel","label","name","validation","prompt","description","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","SearchInput"],"mappings":"6YAYa,MAAAA,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,EAC9BC,EAAUC,EACV,EAAA,CAAE,MAAAC,CAAM,EAAIC,EAAcX,CAAI,EAE9BY,EAAMX,EAAaK,EAASL,CAAU,EAAIK,EAC1CO,GAAiBL,GAAA,KAAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,IAAKlB,EACL,YAAaM,EACb,MAAOO,EACP,QAASV,EACT,UAAWF,EACX,MAAOC,EACP,OAAQG,EACR,SAAU,QAAQD,GAAA,KAAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYY,CAAAA,EAEZC,EAAA,cAACE,EAAA,CACC,GAAIhB,EACJ,KAAMA,EACN,IAAKY,EACL,WAAYC,EACX,GAAIH,GAAS,CAAE,MAAO,OAAQ,EAC9B,GAAGL,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"}

package/dist/components/section-message/SectionMessage.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ declare const StyledSectionMessage: import("@atom-learning/stitches-react/types/
 } & {
     Trigger: ({ asChild, ...rest }: React.PropsWithChildren<import("../dismissible/DismissibleTrigger").IDismissibleTriggerProps>) => React.JSX.Element;
 }, {
-    theme?: "info" | "success" | "warning" | "neutral" | "error" | undefined;
+    theme?: "info" | "success" | "warning" | "error" | "neutral" | undefined;
     hasIcon?: boolean | "true" | undefined;
     hasDismiss?: boolean | "true" | undefined;
 }, {

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

@@ -3,6 +3,7 @@ import { Override } from '../../utilities/types';
 declare const StyledSelect: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"select", {
     size?: "sm" | "md" | "lg" | undefined;
     state?: "error" | undefined;
+    appearance?: "standard" | "modern" | undefined;
 }, {
     sm: string;
     md: string;

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

@@ -1,2 +1,2 @@
-import*as o from"react";import{styled as p,theme as s}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{encodeBackgroundIcon as c}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as u}from"../../utilities/style/disabledStyle.js";const m=p("select",{appearance:"none",backgroundColor:"white",backgroundImage:c(s.colors.grey700.value,"chevron"),backgroundRepeat:"no-repeat, repeat",border:"1px solid $grey700",borderRadius:"$0",color:"$grey1000",display:"block",fontFamily:"$body",fontWeight:400,lineHeight:1.4,transition:"all 75ms ease-out",width:"100%","&:hover":{cursor:"pointer"},"&:focus":{borderColor:"$primary800",outline:"none"},"&::-ms-expand":{display:"none"},"&[disabled], > option[disabled]":u,variants:{size:{sm:{backgroundPosition:"right $space$2 top 50%, 0 0",backgroundSize:"18px auto, 100%",fontSize:"$sm",height:"$3",pl:"$2",pr:"$5"},md:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$4",pl:"$3",pr:"$6"},lg:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$5",pl:"$3",pr:"$6"}},state:{error:{border:"1px solid $danger"}}}}),i=o.forwardRef(({placeholder:r,children:a,size:n="md",...e},d)=>{const t={size:n,ref:d,...e};return[e.value,e.defaultValue].every(l=>l===void 0)&&(t.defaultValue=""),o.createElement(m,{...t},r&&o.createElement("option",{disabled:!0,hidden:!0,value:""},r),a)});i.displayName="Select";export{i as Select};
+import*as o from"react";import{styled as l,theme as c}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{encodeBackgroundIcon as u}from"../../utilities/style/encode-background-icon.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as g}from"../../utilities/style/disabledStyle.js";const m=l("select",{appearance:"none",backgroundImage:u(c.colors.grey700.value,"chevron"),backgroundRepeat:"no-repeat, repeat",color:"$grey1000",display:"block",fontFamily:"$body",fontWeight:400,lineHeight:1.4,width:"100%","&:hover":{cursor:"pointer"},"&::-ms-expand":{display:"none"},"&[disabled], > option[disabled]":g,variants:{size:{sm:{backgroundPosition:"right $space$2 top 50%, 0 0",backgroundSize:"18px auto, 100%",fontSize:"$sm",height:"$3",pl:"$2",pr:"$5"},md:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$4",pl:"$3",pr:"$6"},lg:{backgroundPosition:"right $space$3 top 50%, 0 0",backgroundSize:"20px auto, 100%",fontSize:"$md",height:"$5",pl:"$3",pr:"$6"}},state:{error:{}},appearance:{standard:{backgroundColor:"white",border:"1px solid $grey700",borderRadius:"$0","&:focus":{borderColor:"$primary800",outline:"none"}},modern:{backgroundColor:"$grey100",border:"none",borderRadius:"$1","&:focus":{outline:"2px solid $blue800",outlineOffset:1,zIndex:1}}}},compoundVariants:[{state:"error",appearance:"standard",css:{borderColor:"$danger"}},{state:"error",appearance:"modern",css:{backgroundColor:"$dangerLight","&:focus":{outlineColor:"$danger"}}}]}),t=o.forwardRef(({placeholder:r,children:n,size:d="md",appearance:i="standard",...e},p)=>{const a={size:d,appearance:i,ref:p,...e};return[e.value,e.defaultValue].every(s=>s===void 0)&&(a.defaultValue=""),o.createElement(m,{...a},r&&o.createElement("option",{disabled:!0,hidden:!0,value:""},r),n)});t.displayName="Select";export{t as Select};
 //# sourceMappingURL=Select.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { disabledStyle, encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select', {\n appearance: 'none',\n ~~backgroundColor: 'white',\n~~ backgroundImage: encodeBackgroundIcon(theme.colors.grey700.value, 'chevron'),\n backgroundRepeat: 'no-repeat, repeat',\n ~~border: '1px solid $grey700',\n borderRadius: '$0',\n~~ color: '$grey1000',\n display: 'block',\n fontFamily: '$body',\n fontWeight: 400,\n lineHeight: 1.4,\n ~~transition: 'all 75ms ease-out',\n~~ width: '100%',\n '&:hover': {\n cursor: 'pointer'\n },\n '~~&:focus': {\n borderColor: '$primary800',\n outline: 'none'\n },\n '~~&::-ms-expand': {\n display: 'none'\n },\n '&[disabled], > option[disabled]': disabledStyle,\n variants: {\n size: {\n sm: {\n backgroundPosition: 'right $space$2 top 50%, 0 0',\n backgroundSize: '18px auto, 100%',\n fontSize: '$sm',\n height: '$3',\n pl: '$2',\n pr: '$5'\n },\n md: {\n backgroundPosition: 'right $space$3 top 50%, 0 0',\n backgroundSize: '20px auto, 100%',\n fontSize: '$md',\n height: '$4',\n pl: '$3',\n pr: '$6'\n },\n lg: {\n backgroundPosition: 'right $space$3 top 50%, 0 0',\n backgroundSize: '20px auto, 100%',\n fontSize: '$md',\n height: '$5',\n pl: '$3',\n pr: '$6'\n }\n },\n state: {\n error: {\n border: '1px solid $~~danger~~'\n }\n }\n }\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.ForwardRefExoticComponent<SelectProps> =\n React.forwardRef(\n ({ placeholder, children, size = 'md', ...remainingProps }, ref) => {\n const props = { size, ref, ...remainingProps }\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"],"names":["StyledSelect","styled","encodeBackgroundIcon","theme","disabledStyle","Select","React","placeholder","children","size","remainingProps","ref","props","value"],"mappings":"oZAMA,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,OACZ,~~gBAAiB,QACjB,~~gBAAiBC,EAAqBC,EAAM,OAAO,QAAQ,MAAO,SAAS,EAC3E,iBAAkB,oBAClB,~~OAAQ,qBACR,aAAc,KACd,~~MAAO,YACP,QAAS,QACT,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,~~WAAY,oBACZ,~~MAAO,OACP,UAAW,CACT,OAAQ,SACV,EACA,~~UAAW,CACT,YAAa,cACb,QAAS,MACX,EACA,~~gBAAiB,CACf,QAAS,MACX,EACA,kCAAmCC,EACnC,SAAU,CACR,KAAM,CACJ,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,CACF,EACA,MAAO,CACL,MAAO,~~CACL~~,OAAQ,~~mBACV~~,CACF,CACF,CACF,CAAC,EAgBYC,EACXC,EAAM,WACJ,~~CAAC~~,~~CAAE~~,YAAAC,~~EAAa~~,SAAAC,~~EAAU~~,KAAAC,EAAO,~~QAASC~~,~~CAAe~~,~~EAAGC~~,~~IAAQ~~,~~CAClE~~,MAAMC,EAAQ,CAAE,~~KAAAH~~,EAAM,IAAAE,EAAK,GAAGD,CAAe,~~EAE7C~~,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,~~IAIrBN~~,EAAA,cAACN,EAAA,CAAc,~~GAAGY~~,~~CAAAA~~,~~EACfL~~,GACCD,EAAA,cAAC,~~UAAO~~,SAAQ,GAAC,OAAM,GAAC,MAAM,~~IAC3BC~~,CACH,EAEDC,CACH,CAEJ,CACF,EAEFH,EAAO,YAAc"}
1	+ {"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { disabledStyle, encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select', {\n appearance: 'none',\n backgroundImage: encodeBackgroundIcon(theme.colors.grey700.value, 'chevron'),\n backgroundRepeat: 'no-repeat, repeat',\n color: '$grey1000',\n display: 'block',\n fontFamily: '$body',\n fontWeight: 400,\n lineHeight: 1.4,\n width: '100%',\n '&:hover': {\n cursor: 'pointer'\n },\n '&::-ms-expand': {\n display: 'none'\n },\n '&[disabled], > option[disabled]': disabledStyle,\n variants: {\n size: {\n sm: {\n backgroundPosition: 'right $space$2 top 50%, 0 0',\n backgroundSize: '18px auto, 100%',\n fontSize: '$sm',\n height: '$3',\n pl: '$2',\n pr: '$5'\n },\n md: {\n backgroundPosition: 'right $space$3 top 50%, 0 0',\n backgroundSize: '20px auto, 100%',\n fontSize: '$md',\n height: '$4',\n pl: '$3',\n pr: '$6'\n },\n lg: {\n backgroundPosition: 'right $space$3 top 50%, 0 0',\n backgroundSize: '20px auto, 100%',\n fontSize: '$md',\n height: '$5',\n pl: '$3',\n pr: '$6'\n }\n },\n state: {\n error: {}\n },\n appearance: {\n standard: {\n backgroundColor: 'white',\n border: '1px solid $grey700',\n borderRadius: '$0',\n '&:focus': {\n borderColor: '$primary800',\n outline: 'none'\n }\n },\n modern: {\n backgroundColor: '$grey100',\n border: 'none',\n borderRadius: '$1',\n '&:focus': {\n outline: '2px solid $blue800',\n outlineOffset: 1,\n zIndex: 1\n }\n }\n }\n },\n compoundVariants: [\n {\n state: 'error',\n appearance: 'standard',\n css: { borderColor: '$danger' }\n },\n {\n state: 'error',\n appearance: 'modern',\n css: {\n backgroundColor: '$dangerLight',\n '&:focus': {\n outlineColor: '$danger'\n }\n }\n }\n ]\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.ForwardRefExoticComponent<SelectProps> =\n React.forwardRef(\n (\n {\n placeholder,\n children,\n size = 'md',\n appearance = 'standard',\n ...remainingProps\n },\n ref\n ) => {\n const props = { size, appearance, ref, ...remainingProps }\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"],"names":["StyledSelect","styled","encodeBackgroundIcon","theme","disabledStyle","Select","React","placeholder","children","size","appearance","remainingProps","ref","props","value"],"mappings":"oZAMA,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,OACZ,gBAAiBC,EAAqBC,EAAM,OAAO,QAAQ,MAAO,SAAS,EAC3E,iBAAkB,oBAClB,MAAO,YACP,QAAS,QACT,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,MAAO,OACP,UAAW,CACT,OAAQ,SACV,EACA,gBAAiB,CACf,QAAS,MACX,EACA,kCAAmCC,EACnC,SAAU,CACR,KAAM,CACJ,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,CACF,EACA,MAAO,CACL,MAAO,CACT,CAAA,EACA,WAAY,CACV,SAAU,CACR,gBAAiB,QACjB,OAAQ,qBACR,aAAc,KACd,UAAW,CACT,YAAa,cACb,QAAS,MACX,CACF,EACA,OAAQ,CACN,gBAAiB,WACjB,OAAQ,OACR,aAAc,KACd,UAAW,CACT,QAAS,qBACT,cAAe,EACf,OAAQ,CACV,CACF,CACF,CACF,EACA,iBAAkB,CAChB,CACE,MAAO,QACP,WAAY,WACZ,IAAK,CAAE,YAAa,SAAU,CAChC,EACA,CACE,MAAO,QACP,WAAY,SACZ,IAAK,CACH,gBAAiB,eACjB,UAAW,CACT,aAAc,SAChB,CACF,CACF,CACF,CACF,CAAC,EAgBYC,EACXC,EAAM,WACJ,CACE,CACE,YAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,KACP,WAAAC,EAAa,cACVC,CACL,EACAC,IACG,CACH,MAAMC,EAAQ,CAAE,KAAAJ,EAAM,WAAAC,EAAY,IAAAE,EAAK,GAAGD,CAAe,EAEzD,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,IAIrBP,EAAA,cAACN,EAAA,CAAc,GAAGa,CACfN,EAAAA,GACCD,EAAA,cAAC,SAAO,CAAA,SAAQ,GAAC,OAAM,GAAC,MAAM,EAC3BC,EAAAA,CACH,EAEDC,CACH,CAEJ,CACF,EAEFH,EAAO,YAAc"}

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

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

package/dist/components/select-field/SelectField.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 b}from"../form/useFieldError.js";import{Select as h}from"../select/Select.js";const l=({css:m=void 0,hideLabel:d,children:p,name:e,label:a,validation:r,prompt:n,description:s,...c})=>{const{register:o}=u(),{error:i}=b(e),f=r?o(r):o;return t.createElement(F,{css:m,description:s,error:i,fieldId:e,hideLabel:d,label:a,prompt:n,required:Boolean(r==null?void 0:r.required)},t.createElement(h,{name:e,id:e,...c,ref:f,...i&&{state:"error"}},p))};l.displayName="SelectField";export{l as SelectField};
+import*as p from"react";import{useFormContext as v}from"react-hook-form";import{FieldWrapper as S}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as h}from"../form/useFieldError.js";import{useFormCustomContext as x}from"../form/useFormCustomContext.js";import{Select as C}from"../select/Select.js";const l=({css:m=void 0,hideLabel:n,children:d,name:e,label:s,validation:r,prompt:c,description:u,appearance:f,...F})=>{const{register:o}=v(),t=x(),{error:i}=h(e),b=r?o(r):o,a=(t==null?void 0:t.appearance)||f;return p.createElement(S,{css:m,description:u,error:i,fieldId:e,hideLabel:n,label:s,prompt:c,required:Boolean(r==null?void 0:r.required),appearance:a},p.createElement(C,{name:e,id:e,appearance:a,...F,ref:b,...i&&{state:"error"}},d))};l.displayName="SelectField";export{l as SelectField};
 //# sourceMappingURL=SelectField.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"SelectField.js","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'\nimport { useFieldError } from '~/components/form'\nimport { Select, SelectProps } from '~/components/select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n css = undefined,\n hideLabel,\n children,\n name,\n label,\n validation,\n prompt,\n description,\n ...remainingProps\n}: SelectFieldProps) => {\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 <Select\n name={name}\n id={name}\n {...remainingProps}\n ref={ref}\n {...(error && { state: 'error' })}\n >\n {children}\n </Select>\n </FieldWrapper>\n )\n}\n\nSelectField.displayName = 'SelectField'\n"],"names":["SelectField","css","hideLabel","children","name","label","validation","prompt","description","remainingProps","register","useFormContext","error","useFieldError","ref","React","FieldWrapper","Select"],"mappings":"~~sTAYO~~,~~MAAMA~~,EAAc,CAAC,CAC1B,IAAAC,EAAM,OACN,UAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,KACGC,CACL,IAAwB,CACtB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,~~EAC9B~~,CAAE,MAAAC,CAAM,EAAIC,~~EAAcT~~,CAAI,~~EAC9BU~~,~~EAAMR~~,~~EAAaI~~,~~EAASJ~~,CAAU,~~EAAII~~,~~EAEhD~~,~~OACEK~~,EAAA,cAACC,EAAA,CACC,~~IAAKf~~,EACL,YAAaO,EACb,~~MAAOI~~,EACP,~~QAASR~~,EACT,UAAWF,EACX,MAAOG,EACP,OAAQE,EACR,SAAU,QAAQD,GAAA,~~YAAAA~~,EAAY,QAAQ,~~CAEtCS~~,~~EAAAA~~,EAAA,cAACE,EAAA,CACC,~~KAAMb~~,EACN,GAAIA,~~EACH~~,~~GAAGK~~,EACJ,~~IAAKK~~,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,~~CAE9BT~~,~~EAAAA~~,CACH,CACF,CAEJ,EAEAH,EAAY,YAAc"}
1	+ {"version":3,"file":"SelectField.js","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'\nimport { useFieldError, useFormCustomContext } from '~/components/form'\nimport { Select, SelectProps } from '~/components/select'\n\ntype SelectFieldProps = SelectProps & FieldElementWrapperProps\n\nexport const SelectField = ({\n css = undefined,\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 css={css}\n description={description}\n error={error}\n fieldId={name}\n hideLabel={hideLabel}\n label={label}\n prompt={prompt}\n required={Boolean(validation?.required)}\n appearance={formAppearance}\n >\n <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"],"names":["SelectField","css","hideLabel","children","name","label","validation","prompt","description","appearance","remainingProps","register","useFormContext","context","useFormCustomContext","error","useFieldError","ref","formAppearance","React","FieldWrapper","Select"],"mappings":"6XAYa,MAAAA,EAAc,CAAC,CAC1B,IAAAC,EAAM,OACN,UAAAC,EACA,SAAAC,EACA,KAAAC,EACA,MAAAC,EACA,WAAAC,EACA,OAAAC,EACA,YAAAC,EACA,WAAAC,KACGC,CACL,IAAwB,CACtB,KAAM,CAAE,SAAAC,CAAS,EAAIC,EAAe,EAC9BC,EAAUC,EAAAA,EACV,CAAE,MAAAC,CAAM,EAAIC,EAAcZ,CAAI,EAC9Ba,EAAMX,EAAaK,EAASL,CAAU,EAAIK,EAC1CO,GAAiBL,GAAA,KAAA,OAAAA,EAAS,aAAcJ,EAE9C,OACEU,EAAA,cAACC,EAAA,CACC,IAAKnB,EACL,YAAaO,EACb,MAAOO,EACP,QAASX,EACT,UAAWF,EACX,MAAOG,EACP,OAAQE,EACR,SAAU,QAAQD,GAAA,KAAAA,OAAAA,EAAY,QAAQ,EACtC,WAAYY,CAAAA,EAEZC,EAAA,cAACE,EAAA,CACC,KAAMjB,EACN,GAAIA,EACJ,WAAYc,EACX,GAAGR,EACJ,IAAKO,EACJ,GAAIF,GAAS,CAAE,MAAO,OAAQ,CAAA,EAE9BZ,CACH,CACF,CAEJ,EAEAH,EAAY,YAAc"}

package/dist/components/sortable/Handle.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import { Icon } from '../icon';
 export declare const StyledHandle: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
 }, "appearance" | "size" | "css" | "theme" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
+    theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
     appearance?: "outline" | "solid" | "simple" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     isRounded?: boolean | "true" | undefined;
@@ -377,8 +377,8 @@ export declare const StyledHandle: import("@atom-learning/stitches-react/types/s
             marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
         };
     }> | undefined;
-}, "appearance" | "size" | "theme" | "label" | "children" | "as" | "hasTooltip" | "tooltipSide" | "isRounded" | keyof import("../../types").NavigatorActions> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
-    theme?: "success" | "danger" | "warning" | "primary" | "neutral" | undefined;
+}, "appearance" | "size" | "theme" | "label" | "children" | "as" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide" | "isRounded"> & import("@atom-learning/stitches-react/types/styled-component").TransformProps<{
+    theme?: "success" | "danger" | "warning" | "neutral" | "primary" | undefined;
     appearance?: "outline" | "solid" | "simple" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     isRounded?: boolean | "true" | undefined;

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 declare const StyledTextarea: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<"textarea", {
+    appearance?: "standard" | "modern" | undefined;
     state?: "error" | undefined;
 }, {
     sm: string;

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

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as t}from"../../stitches.js";const i=t("textarea",{boxShadow:"none",fontSize:"$md",appearance:"none",border:"1px solid $grey800",borderRadius:"$0",boxSizing:"border-box",color:"$grey1000",fontFamily:"$body",fontWeight:400,lineHeight:1.4,minHeight:"$7",px:"$3",py:"calc($2 + $1)",resize:"vertical",transition:"all 75ms ease-out",width:"100%","&:focus":{borderColor:"$primary800",outline:"none"},"&[disabled]":{backgroundColor:"$grey200",color:"$grey800",cursor:"not-allowed"},"&::placeholder":{color:"$grey700",opacity:1},variants:{state:{error:{border:"1px solid $danger"}}}}),o=e.forwardRef((r,a)=>e.createElement(i,{...r,ref:a}));o.displayName="Textarea";export{o as Textarea};
+import*as e from"react";import{styled as n}from"../../stitches.js";const t=n("textarea",{boxShadow:"none",fontSize:"$md",appearance:"none",boxSizing:"border-box",color:"$grey1000",fontFamily:"$body",fontWeight:400,lineHeight:1.4,m:0,minHeight:"$7",px:"$3",py:"calc($2 + $1)",resize:"vertical",width:"100%","&[disabled]":{backgroundColor:"$grey200",color:"$grey800",cursor:"not-allowed"},"&::placeholder":{color:"$grey700",opacity:1},variants:{appearance:{standard:{background:"white",border:"1px solid $grey800",borderRadius:"$0","&:focus-within":{borderColor:"$primary800",outline:"none"}},modern:{background:"$grey100",border:"none",borderRadius:"$1","&:focus-within":{outline:"2px solid $blue800",outlineOffset:1,zIndex:1}}},state:{error:{}}},defaultVariants:{appearance:"standard"},compoundVariants:[{state:"error",appearance:"standard",css:{borderColor:"$danger"}},{state:"error",appearance:"modern",css:{bg:"$dangerLight","&:focus-within":{outlineColor:"$danger"}}}]}),r=e.forwardRef((o,a)=>e.createElement(t,{...o,ref:a}));r.displayName="Textarea";export{r as Textarea};
 //# sourceMappingURL=Textarea.js.map