npm - @atom-learning/components - Versions diffs - 5.11.0 → 5.12.1 - Mend

@atom-learning/components 5.11.0 → 5.12.1

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

Files changed (312) 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,{borderRadius:"$1",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"},modern:{backgroundColor:"$grey100",borderColor:"$grey100 !important"}}}}),b=e.forwardRef((t,n)=>{const{icon:a,disabledTooltipContent:i,showTooltip:l,fieldAppearance:p="standard",...d}=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:p,ref:n,...d},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 borderRadius: '$1',\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 variants: {\n fieldAppearance: {\n standard: {\n backgroundColor: 'white',\n borderColor: '$grey800 !important'\n },\n modern: {\n backgroundColor: '$grey100',\n borderColor: '$grey100 !important'\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,aAAc,KACd,OAAQ,EACR,OAAQ,kBACR,UAAW,CACT,GAAI,WACJ,QAAS,CACP,MAAO,UACT,CACF,EACA,QAAS,CACP,MAAO,UACT,EACA,WAAY,CACV,GAAI,WACJ,QAAS,CACP,MAAO,UACT,CACF,EACA,aAAc,CACZ,QAAS,GACT,cAAe,MACjB,EACA,SAAU,CACR,gBAAiB,CACf,SAAU,CACR,gBAAiB,QACjB,YAAa,qBACf,EACA,OAAQ,CACN,gBAAiB,WACjB,YAAa,qBACf,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" | "white" | "neutral" | undefined;
+    theme?: "success" | "danger" | "warning" | "neutral" | "white" | "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" | "white" | "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" | "white" | "primary" | undefined;
     appearance?: "outline" | "solid" | "simple" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | undefined;
     isRounded?: boolean | "true" | undefined;

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

@@ -1,2 +1,2 @@
-import*as m from"react";import{styled as u}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as h}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as $}from"../../utilities/style/disabledStyle.js";import{usePagination as f}from"./usePagination.js";const v=u("button",{alignItems:"center",border:"1px solid transparent",borderRadius:"$0",cursor:"pointer",fontFamily:"$body",justifyContent:"center",whiteSpace:"nowrap",width:"max-content",display:"flex",flexDirection:"column",p:"0",fontWeight:400,color:"$textSubtle",bg:"$base1",position:"relative","&:not(:disabled)":{"&:hover":{color:"$textRegular",bg:"$base2"},"&:active":{color:"$textBold",bg:"$base3"},"&:focus-visible":{...h()}},"&[disabled]":{...$,pointerEvents:"none"},variants:{size:{md:{width:"$4",height:"$4"}},selected:{true:{border:"1px solid $accent9",color:"$accent9",fontWeight:600,"&:not(:disabled)":{"&:hover":{borderColor:"$accent10",color:"$accent10"},"&:active":{borderColor:"$accent11",fontColor:"$accent11"}}}},indicated:{true:{fontWeight:600,color:"white",bg:"$accent9","&:not(:disabled)":{"&:hover":{color:"white",bg:"$accent10"},"&:active":{color:"white",bg:"$accent11"}}}}},compoundVariants:[{selected:!0,indicated:!0,css:{fontWeight:600,color:"white",bg:"$accent9",boxShadow:"$colors$accent9 0px 0px 0px 1px","&:not(:focus-visible)":{borderColor:"white !important"},"&:not(:disabled)":{"&:hover":{color:"white",bg:"$accent10"},"&:active":{color:"white",bg:"$accent11"}}}}]}),x=({pageNumber:e,css:c,onClick:i})=>{const{currentPage:n,goToPage:a,indicatedPages:l,disabledPages:s,onItemHover:r}=f(),d=l.includes(e),o=s.includes(e),t=n===e,b=()=>{t||o||r==null||r(e)},p=g=>{i==null||i(),a(g)};return m.createElement(v,{selected:t,size:"md",onClick:()=>p(e),css:c,indicated:d,disabled:o,"aria-current":t&&"page","aria-disabled":o,onMouseOver:b},e)};export{x as PaginationPage};
+import*as u from"react";import{styled as x}from"../../stitches.js";import{usePagination as h}from"./usePagination.js";const $=x("button",{alignItems:"center",border:"1px solid transparent",borderRadius:"$0",cursor:"pointer",fontFamily:"$body",justifyContent:"center",whiteSpace:"nowrap",width:"max-content",display:"flex",flexDirection:"column",p:"0",fontWeight:400,color:"$textSubtle",bg:"$base1",position:"relative","&:not(:disabled)":{"&:hover":{color:"$textRegular",bg:"$base2"},"&:active":{color:"$textBold",bg:"$base3"},"&:focus-visible":{outline:"none",position:"relative",zIndex:1,boxShadow:"white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px"}},"&[disabled]":{opacity:.3,cursor:"not-allowed",pointerEvents:"none"},variants:{size:{md:{width:"$4",height:"$4"}},selected:{true:{border:"1px solid $accent9",color:"$accent9",fontWeight:600,"&:not(:disabled)":{"&:hover":{borderColor:"$accent10",color:"$accent10"},"&:active":{borderColor:"$accent11",color:"$accent11"}}}},indicated:{true:{fontWeight:600,color:"white",bg:"$accent9","&:not(:disabled)":{"&:hover":{color:"white",bg:"$accent10"},"&:active":{color:"white",bg:"$accent11"}}}}},compoundVariants:[{selected:!0,indicated:!0,css:{fontWeight:600,color:"white",bg:"$accent9",boxShadow:"$colors$accent9 0px 0px 0px 1px","&:not(:focus-visible)":{borderColor:"white !important"},"&:not(:disabled)":{"&:hover":{color:"white",bg:"$accent10"},"&:active":{color:"white",bg:"$accent11"}}}}]}),m=({pageNumber:e,css:n,onClick:i})=>{const{currentPage:r,goToPage:a,indicatedPages:l,disabledPages:s,onItemHover:c}=h(),d=l.includes(e),o=s.includes(e),t=r===e,b=()=>{t||o||c==null||c(e)},p=g=>{i==null||i(),a(g)};return u.createElement($,{selected:t,size:"md",onClick:()=>p(e),css:n,indicated:d,disabled:o,"aria-current":t&&"page","aria-disabled":o,onMouseOver:b},e)};export{m as PaginationPage};
 //# sourceMappingURL=PaginationPage.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PaginationPage.js","sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ~~disabledStyle, focusVisibleStyleBlock } from '~/utilities'\n\nimport {~~ styled } from '../../stitches'\nimport type { PaginationPageProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst StyledButton = styled('button', {\n alignItems: 'center',\n border: '1px solid transparent',\n borderRadius: '$0',\n cursor: 'pointer',\n fontFamily: '$body',\n justifyContent: 'center',\n whiteSpace: 'nowrap',\n width: 'max-content',\n display: 'flex',\n flexDirection: 'column',\n p: '0',\n fontWeight: 400,\n color: '$textSubtle',\n bg: '$base1',\n position: 'relative',\n\n '&:not(:disabled)': {\n '&:hover': {\n color: '$textRegular',\n bg: '$base2'\n },\n '&:active': {\n color: '$textBold',\n bg: '$base3'\n },\n '&:focus-visible': {\n ~~...focusVisibleStyleBlock()\~~n }\n },\n '&[disabled]': {\n ~~...disabledStyle~~,\n pointerEvents: 'none'\n },\n variants: {\n size: {\n md: {\n width: '$4',\n height: '$4'\n }\n },\n selected: {\n true: {\n border: '1px solid $accent9',\n color: '$accent9',\n fontWeight: 600,\n '&:not(:disabled)': {\n '&:hover': {\n borderColor: '$accent10',\n color: '$accent10'\n },\n '&:active': {\n borderColor: '$accent11',\n ~~fontColor~~: '$accent11'\n }\n }\n }\n },\n indicated: {\n true: {\n fontWeight: 600,\n color: 'white',\n bg: '$accent9',\n '&:not(:disabled)': {\n '&:hover': {\n color: 'white',\n bg: '$accent10'\n },\n '&:active': {\n color: 'white',\n bg: '$accent11'\n }\n }\n }\n }\n },\n\n compoundVariants: [\n {\n selected: true,\n indicated: true,\n css: {\n fontWeight: 600,\n color: 'white',\n bg: '$accent9',\n boxShadow: '$colors$accent9 0px 0px 0px 1px',\n '&:not(:focus-visible)': {\n borderColor: 'white !important'\n },\n '&:not(:disabled)': {\n '&:hover': {\n color: 'white',\n bg: '$accent10'\n },\n '&:active': {\n color: 'white',\n bg: '$accent11'\n }\n }\n }\n }\n ]\n})\n\nexport const PaginationPage = ({\n pageNumber,\n css,\n onClick\n}: PaginationPageProps) => {\n const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n usePagination()\n\n const isIndicated = indicatedPages.includes(pageNumber)\n const isDisabled = disabledPages.includes(pageNumber)\n\n const isSelected = currentPage === pageNumber\n\n const handleOnHover = () => {\n if (isSelected \|\| isDisabled) return\n onItemHover?.(pageNumber)\n }\n\n const handleOnClick = (pageNumber) => {\n onClick?.()\n goToPage(pageNumber)\n }\n\n return (\n <StyledButton\n selected={isSelected}\n size=\"md\"\n onClick={() => handleOnClick(pageNumber)}\n css={css}\n indicated={isIndicated}\n disabled={isDisabled}\n aria-current={isSelected && 'page'}\n aria-disabled={isDisabled}\n onMouseOver={handleOnHover}\n >\n {pageNumber}\n </StyledButton>\n )\n}\n"],"names":["StyledButton","styled","~~focusVisibleStyleBlock","disabledStyle","~~PaginationPage","pageNumber","css","onClick","currentPage","goToPage","indicatedPages","disabledPages","onItemHover","usePagination","isIndicated","isDisabled","isSelected","handleOnHover","handleOnClick","React"],"mappings":"~~idAQA~~,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,SACZ,OAAQ,wBACR,aAAc,KACd,OAAQ,UACR,WAAY,QACZ,eAAgB,SAChB,WAAY,SACZ,MAAO,cACP,QAAS,OACT,cAAe,SACf,EAAG,IACH,WAAY,IACZ,MAAO,cACP,GAAI,SACJ,SAAU,WAEV,mBAAoB,CAClB,UAAW,CACT,MAAO,eACP,GAAI,QACN,EACA,WAAY,CACV,MAAO,YACP,GAAI,QACN,EACA,kBAAmB,CACjB,~~GAAGC~~,~~GACL~~,CACF,EACA,cAAe,CACb,~~GAAGC~~,~~EACH~~,cAAe,MACjB,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,OAAQ,IACV,CACF,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,qBACR,MAAO,WACP,WAAY,IACZ,mBAAoB,CAClB,UAAW,CACT,YAAa,YACb,MAAO,WACT,EACA,WAAY,CACV,YAAa,YACb,~~UAAW~~,~~WACb~~,CACF,CACF,CACF,EACA,UAAW,CACT,KAAM,CACJ,WAAY,IACZ,MAAO,QACP,GAAI,WACJ,mBAAoB,CAClB,UAAW,CACT,MAAO,QACP,GAAI,WACN,EACA,WAAY,CACV,MAAO,QACP,GAAI,WACN,CACF,CACF,CACF,CACF,EAEA,iBAAkB,CAChB,CACE,SAAU,GACV,UAAW,GACX,IAAK,CACH,WAAY,IACZ,MAAO,QACP,GAAI,WACJ,UAAW,kCACX,wBAAyB,CACvB,YAAa,kBACf,EACA,mBAAoB,CAClB,UAAW,CACT,MAAO,QACP,GAAI,WACN,EACA,WAAY,CACV,MAAO,QACP,GAAI,WACN,CACF,CACF,CACF,CACF,CACF,CAAC,EAEYC,EAAiB,CAAC,CAC7B,WAAAC,EACA,IAAAC,EACA,QAAAC,CACF,IAA2B,CACzB,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,eAAAC,EAAgB,cAAAC,EAAe,YAAAC,CAAY,EACxEC,~~EAAc~~,~~EAEVC~~,EAAcJ,EAAe,SAASL,CAAU,EAChDU,EAAaJ,EAAc,SAASN,CAAU,EAE9CW,EAAaR,IAAgBH,EAE7BY,EAAgB,IAAM,CACtBD,GAAcD,GAClBH,GAAA,MAAAA,EAAcP,~~CAAAA,~~CAChB,EAEMa,EAAiBb,GAAe,CACpCE,GAAA,MAAAA,EAAAA,~~EACAE,~~EAASJ,CAAU,CACrB,EAEA,OACEc,EAAA,~~cAACnB~~,EAAA,CACC,~~SAAUgB~~,EACV,KAAK,KACL,QAAS,IAAME,EAAcb,CAAU,EACvC,IAAKC,EACL,UAAWQ,EACX,SAAUC,EACV,eAAcC,GAAc,OAC5B,gBAAeD,EACf,YAAaE,CAAAA,EAEZZ,CACH,CAEJ"}
1	+ {"version":3,"file":"PaginationPage.js","sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../stitches'\nimport type { PaginationPageProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst StyledButton = styled('button', {\n alignItems: 'center',\n border: '1px solid transparent',\n borderRadius: '$0',\n cursor: 'pointer',\n fontFamily: '$body',\n justifyContent: 'center',\n whiteSpace: 'nowrap',\n width: 'max-content',\n display: 'flex',\n flexDirection: 'column',\n p: '0',\n fontWeight: 400,\n color: '$textSubtle',\n bg: '$base1',\n position: 'relative',\n\n '&:not(:disabled)': {\n '&:hover': {\n color: '$textRegular',\n bg: '$base2'\n },\n '&:active': {\n color: '$textBold',\n bg: '$base3'\n },\n '&:focus-visible': {\n outline: 'none',\n position: 'relative',\n zIndex: 1,\n boxShadow: `white 0px 0px 0px 2px, $colors$primary800 0px 0px 0px 4px`\n }\n },\n '&[disabled]': {\n opacity: 0.3,\n cursor: 'not-allowed',\n pointerEvents: 'none'\n },\n variants: {\n size: {\n md: {\n width: '$4',\n height: '$4'\n }\n },\n selected: {\n true: {\n border: '1px solid $accent9',\n color: '$accent9',\n fontWeight: 600,\n '&:not(:disabled)': {\n '&:hover': {\n borderColor: '$accent10',\n color: '$accent10'\n },\n '&:active': {\n borderColor: '$accent11',\n color: '$accent11'\n }\n }\n }\n },\n indicated: {\n true: {\n fontWeight: 600,\n color: 'white',\n bg: '$accent9',\n '&:not(:disabled)': {\n '&:hover': {\n color: 'white',\n bg: '$accent10'\n },\n '&:active': {\n color: 'white',\n bg: '$accent11'\n }\n }\n }\n }\n },\n\n compoundVariants: [\n {\n selected: true,\n indicated: true,\n css: {\n fontWeight: 600,\n color: 'white',\n bg: '$accent9',\n boxShadow: '$colors$accent9 0px 0px 0px 1px',\n '&:not(:focus-visible)': {\n borderColor: 'white !important'\n },\n '&:not(:disabled)': {\n '&:hover': {\n color: 'white',\n bg: '$accent10'\n },\n '&:active': {\n color: 'white',\n bg: '$accent11'\n }\n }\n }\n }\n ]\n})\n\nexport const PaginationPage = ({\n pageNumber,\n css,\n onClick\n}: PaginationPageProps) => {\n const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n usePagination()\n\n const isIndicated = indicatedPages.includes(pageNumber)\n const isDisabled = disabledPages.includes(pageNumber)\n\n const isSelected = currentPage === pageNumber\n\n const handleOnHover = () => {\n if (isSelected \|\| isDisabled) return\n onItemHover?.(pageNumber)\n }\n\n const handleOnClick = (pageNumber) => {\n onClick?.()\n goToPage(pageNumber)\n }\n\n return (\n <StyledButton\n selected={isSelected}\n size=\"md\"\n onClick={() => handleOnClick(pageNumber)}\n css={css}\n indicated={isIndicated}\n disabled={isDisabled}\n aria-current={isSelected && 'page'}\n aria-disabled={isDisabled}\n onMouseOver={handleOnHover}\n >\n {pageNumber}\n </StyledButton>\n )\n}\n"],"names":["StyledButton","styled","PaginationPage","pageNumber","css","onClick","currentPage","goToPage","indicatedPages","disabledPages","onItemHover","usePagination","isIndicated","isDisabled","isSelected","handleOnHover","handleOnClick","React"],"mappings":"sHAMA,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,SACZ,OAAQ,wBACR,aAAc,KACd,OAAQ,UACR,WAAY,QACZ,eAAgB,SAChB,WAAY,SACZ,MAAO,cACP,QAAS,OACT,cAAe,SACf,EAAG,IACH,WAAY,IACZ,MAAO,cACP,GAAI,SACJ,SAAU,WAEV,mBAAoB,CAClB,UAAW,CACT,MAAO,eACP,GAAI,QACN,EACA,WAAY,CACV,MAAO,YACP,GAAI,QACN,EACA,kBAAmB,CACjB,QAAS,OACT,SAAU,WACV,OAAQ,EACR,UAAW,2DACb,CACF,EACA,cAAe,CACb,QAAS,GACT,OAAQ,cACR,cAAe,MACjB,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,OAAQ,IACV,CACF,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,qBACR,MAAO,WACP,WAAY,IACZ,mBAAoB,CAClB,UAAW,CACT,YAAa,YACb,MAAO,WACT,EACA,WAAY,CACV,YAAa,YACb,MAAO,WACT,CACF,CACF,CACF,EACA,UAAW,CACT,KAAM,CACJ,WAAY,IACZ,MAAO,QACP,GAAI,WACJ,mBAAoB,CAClB,UAAW,CACT,MAAO,QACP,GAAI,WACN,EACA,WAAY,CACV,MAAO,QACP,GAAI,WACN,CACF,CACF,CACF,CACF,EAEA,iBAAkB,CAChB,CACE,SAAU,GACV,UAAW,GACX,IAAK,CACH,WAAY,IACZ,MAAO,QACP,GAAI,WACJ,UAAW,kCACX,wBAAyB,CACvB,YAAa,kBACf,EACA,mBAAoB,CAClB,UAAW,CACT,MAAO,QACP,GAAI,WACN,EACA,WAAY,CACV,MAAO,QACP,GAAI,WACN,CACF,CACF,CACF,CACF,CACF,CAAC,EAEYC,EAAiB,CAAC,CAC7B,WAAAC,EACA,IAAAC,EACA,QAAAC,CACF,IAA2B,CACzB,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,eAAAC,EAAgB,cAAAC,EAAe,YAAAC,CAAY,EACxEC,EAEIC,EAAAA,EAAcJ,EAAe,SAASL,CAAU,EAChDU,EAAaJ,EAAc,SAASN,CAAU,EAE9CW,EAAaR,IAAgBH,EAE7BY,EAAgB,IAAM,CACtBD,GAAcD,GAClBH,GAAA,MAAAA,EAAcP,CAChB,CAAA,EAEMa,EAAiBb,GAAe,CACpCE,GAAA,MAAAA,EACAE,EAAAA,EAASJ,CAAU,CACrB,EAEA,OACEc,EAAA,cAACjB,EAAA,CACC,SAAUc,EACV,KAAK,KACL,QAAS,IAAME,EAAcb,CAAU,EACvC,IAAKC,EACL,UAAWQ,EACX,SAAUC,EACV,eAAcC,GAAc,OAC5B,gBAAeD,EACf,YAAaE,CAAAA,EAEZZ,CACH,CAEJ"}

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" | "white" | "neutral" | undefined;
+    theme?: "success" | "danger" | "warning" | "neutral" | "white" | "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" | "white" | "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" | "white" | "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'\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' }}\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":"mZAeO,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/password-input/PasswordInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Eye as f,EyeCrossed as w}from"@atom-learning/icons";import*as e from"react";import{useState as u}from"react";import{ActionIcon as x}from"../action-icon/ActionIcon.js";import{Box as E}from"../box/Box.js";import{Icon as I}from"../icon/Icon.js";import{Input as h}from"../input/Input.js";import"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as z}from"../../utilities/style/get-icon-size.js";const s=e.forwardRef(({css:i,hidePasswordText:m="Hide password",showPasswordText:p="Show password",size:o="md",...a},n)=>{const[t,c]=u(!1),d=()=>c(r=>!r),l=e.useMemo(()=>z(o),[o]);return e.createElement(E,{css:{position:"relative",...i}},e.createElement(h,{...a,size:o,type:t?"text":"password",ref:n,css:{pr:"$sizes$2"}}),e.createElement(x,{appearance:"simple",theme:"neutral",css:{bottom:o==="lg"?"4px":0,position:"absolute",right:0},label:t?m:p,onClick:d,onMouseDown:r=>r.preventDefault(),size:l},e.createElement(I,{is:t?f:w})))});s.displayName="PasswordInput";export{s as PasswordInput};
+import{Eye as f,EyeCrossed as w}from"@atom-learning/icons";import*as e from"react";import{useState as u}from"react";import{ActionIcon as x}from"../action-icon/ActionIcon.js";import{Box as E}from"../box/Box.js";import{Icon as I}from"../icon/Icon.js";import{Input as h}from"../input/Input.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as z}from"../../utilities/style/get-icon-size.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";const s=e.forwardRef(({css:i,hidePasswordText:m="Hide password",showPasswordText:p="Show password",size:o="md",...a},n)=>{const[t,c]=u(!1),l=()=>c(r=>!r),d=e.useMemo(()=>z(o),[o]);return e.createElement(E,{css:{position:"relative",...i}},e.createElement(h,{...a,size:o,type:t?"text":"password",ref:n,css:{pr:"$sizes$2"}}),e.createElement(x,{appearance:"simple",theme:"neutral",css:{bottom:o==="lg"?"4px":0,position:"absolute",right:0},label:t?m:p,onClick:l,onMouseDown:r=>r.preventDefault(),size:d},e.createElement(I,{is:t?f:w})))});s.displayName="PasswordInput";export{s as PasswordInput};
 //# sourceMappingURL=PasswordInput.js.map

package/dist/components/password-input/PasswordInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordInput.js","sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Box } from '~/components/box'\nimport { Icon } from '~/components/icon'\nimport type { InputProps } from '~/components/input'\nimport { Input } from '~/components/input'\nimport ~~type~~ { ~~CSS } from '~/stitches'\nimport {~~ getFieldIconSize } from '~/utilities'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n hidePasswordText?: string\n showPasswordText?: string\n}\n\nexport const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps> =\n React.forwardRef(\n (\n {\n css,\n hidePasswordText = 'Hide password',\n showPasswordText = 'Show password',\n size = 'md',\n ...restProps\n },\n ref\n ) => {\n const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n const togglePasswordVisibility = () =>\n setIsPasswordVisible((currentState) => !currentState)\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n return (\n <Box css={{ position: 'relative', ...css } ~~as CSS~~}>\n <Input\n {...restProps}\n size={size}\n type={isPasswordVisible ? 'text' : 'password'}\n ref={ref}\n css={{ pr: '$sizes$2' }}\n />\n <ActionIcon\n appearance=\"simple\"\n theme=\"neutral\"\n css={{\n bottom: size === 'lg' ? '4px' : 0,\n position: 'absolute',\n right: 0\n }}\n label={isPasswordVisible ? hidePasswordText : showPasswordText}\n onClick={togglePasswordVisibility}\n onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n size={iconSize}\n >\n <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n </ActionIcon>\n </Box>\n )\n }\n )\n\nPasswordInput.displayName = 'PasswordInput'\n"],"names":["PasswordInput","React","css","hidePasswordText","showPasswordText","size","restProps","ref","isPasswordVisible","setIsPasswordVisible","useState","togglePasswordVisibility","currentState","iconSize","getFieldIconSize","Box","Input","ActionIcon","e","Icon","Eye","EyeCrossed"],"mappings":"~~+jBAiBO~~,MAAMA,EACXC,EAAM,WACJ,CACE,CACE,IAAAC,EACA,iBAAAC,EAAmB,gBACnB,iBAAAC,EAAmB,gBACnB,KAAAC,EAAO,QACJC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAmBC,CAAoB,EAAIC,EAAkB,EAAK,EACnEC,EAA2B,IAC/BF,EAAsBG,GAAiB,CAACA,CAAY,EAEhDC,EAAWZ,EAAM,QAAQ,IAAMa,EAAiBT,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnE,OACEJ,EAAA,cAACc,EAAA,CAAI,IAAK,CAAE,SAAU,WAAY,GAAGb,CAAI,CAAA,EACvCD,EAAA,cAACe,EAAA,CACE,GAAGV,EACJ,KAAMD,EACN,KAAMG,EAAoB,OAAS,WACnC,IAAKD,EACL,IAAK,CAAE,GAAI,UAAW,CACxB,CAAA,EACAN,EAAA,cAACgB,EAAA,CACC,WAAW,SACX,MAAM,UACN,IAAK,CACH,OAAQZ,IAAS,KAAO,MAAQ,EAChC,SAAU,WACV,MAAO,CACT,EACA,MAAOG,EAAoBL,EAAmBC,EAC9C,QAASO,EACT,YAAcO,GAAMA,EAAE,iBACtB,KAAML,CAAAA,EAENZ,EAAA,cAACkB,EAAA,CAAK,GAAIX,EAAoBY,EAAMC,EAAY,CAClD,CACF,CAEJ,CACF,EAEFrB,EAAc,YAAc"}
1	+ {"version":3,"file":"PasswordInput.js","sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { ActionIcon } from '~/components/action-icon'\nimport { Box } from '~/components/box'\nimport { Icon } from '~/components/icon'\nimport type { InputProps } from '~/components/input'\nimport { Input } from '~/components/input'\nimport { getFieldIconSize } from '~/utilities'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n hidePasswordText?: string\n showPasswordText?: string\n}\n\nexport const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps> =\n React.forwardRef(\n (\n {\n css,\n hidePasswordText = 'Hide password',\n showPasswordText = 'Show password',\n size = 'md',\n ...restProps\n },\n ref\n ) => {\n const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n const togglePasswordVisibility = () =>\n setIsPasswordVisible((currentState) => !currentState)\n\n const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n return (\n <Box css={{ position: 'relative', ...css }}>\n <Input\n {...restProps}\n size={size}\n type={isPasswordVisible ? 'text' : 'password'}\n ref={ref}\n css={{ pr: '$sizes$2' }}\n />\n <ActionIcon\n appearance=\"simple\"\n theme=\"neutral\"\n css={{\n bottom: size === 'lg' ? '4px' : 0,\n position: 'absolute',\n right: 0\n }}\n label={isPasswordVisible ? hidePasswordText : showPasswordText}\n onClick={togglePasswordVisibility}\n onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n size={iconSize}\n >\n <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n </ActionIcon>\n </Box>\n )\n }\n )\n\nPasswordInput.displayName = 'PasswordInput'\n"],"names":["PasswordInput","React","css","hidePasswordText","showPasswordText","size","restProps","ref","isPasswordVisible","setIsPasswordVisible","useState","togglePasswordVisibility","currentState","iconSize","getFieldIconSize","Box","Input","ActionIcon","e","Icon","Eye","EyeCrossed"],"mappings":"qiBAgBO,MAAMA,EACXC,EAAM,WACJ,CACE,CACE,IAAAC,EACA,iBAAAC,EAAmB,gBACnB,iBAAAC,EAAmB,gBACnB,KAAAC,EAAO,QACJC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAmBC,CAAoB,EAAIC,EAAkB,EAAK,EACnEC,EAA2B,IAC/BF,EAAsBG,GAAiB,CAACA,CAAY,EAEhDC,EAAWZ,EAAM,QAAQ,IAAMa,EAAiBT,CAAI,EAAG,CAACA,CAAI,CAAC,EAEnE,OACEJ,EAAA,cAACc,EAAA,CAAI,IAAK,CAAE,SAAU,WAAY,GAAGb,CAAI,CAAA,EACvCD,EAAA,cAACe,EAAA,CACE,GAAGV,EACJ,KAAMD,EACN,KAAMG,EAAoB,OAAS,WACnC,IAAKD,EACL,IAAK,CAAE,GAAI,UAAW,CACxB,CAAA,EACAN,EAAA,cAACgB,EAAA,CACC,WAAW,SACX,MAAM,UACN,IAAK,CACH,OAAQZ,IAAS,KAAO,MAAQ,EAChC,SAAU,WACV,MAAO,CACT,EACA,MAAOG,EAAoBL,EAAmBC,EAC9C,QAASO,EACT,YAAcO,GAAMA,EAAE,iBACtB,KAAML,CAAAA,EAENZ,EAAA,cAACkB,EAAA,CAAK,GAAIX,EAAoBY,EAAMC,EAAY,CAClD,CACF,CAEJ,CACF,EAEFrB,EAAc,YAAc"}

package/dist/components/popover/PopoverContent.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{Close as d}from"@atom-learning/icons";import{Content as l,Arrow as p,Close as h}from"@radix-ui/react-popover";import*as e from"react";import{POPOVER_Z_INDEX as c}from"../../constants/zIndices.js";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{slideDownAndFade as f,slideLeftAndFade as x,slideUpAndFade as $,slideRightAndFade as g}from"../../utilities/style/keyframe-animations.js";import{ActionIcon as w}from"../action-icon/ActionIcon.js";import{Icon as z}from"../icon/Icon.js";const b=t(l,{bg:"white",borderRadius:"$1",boxShadow:"$2",maxWidth:"90vw",p:"$sizes$2",pr:"$6",position:"relative",zIndex:c,"@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:f},'&[data-side="right"]':{animationName:x},'&[data-side="bottom"]':{animationName:$},'&[data-side="left"]':{animationName:g}}},variants:{size:{sm:{maxWidth:"200px"},md:{maxWidth:"400px"},lg:{maxWidth:"600px"}}}}),C=t(p,{fill:"white",zIndex:1,'[data-align="end"] &':{mr:"$sizes$2"},'[data-align="start"] &':{ml:"$sizes$2"}}),u=({children:i,side:o="top",sideOffset:a=8,closePopoverText:s="Close popover",showCloseButton:n=!0,size:m="md",...r})=>e.createElement(b,{size:m,side:o,sideOffset:a,...r},n&&e.createElement(w,{as:h,css:{position:"absolute",right:"$0",top:"$0"},label:s,size:"md",hasTooltip:!1,theme:"neutral"},e.createElement(z,{is:d})),i,e.createElement(C,{width:16,height:8}));export{u as PopoverContent};
+import{Close as r}from"@atom-learning/icons";import{Content as l,Arrow as p,Close as h}from"@radix-ui/react-popover";import*as e from"react";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"color2k";import{slideDownAndFade as c,slideLeftAndFade as f,slideUpAndFade as $,slideRightAndFade as x}from"../../utilities/style/keyframe-animations.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{ActionIcon as g}from"../action-icon/ActionIcon.js";import{Icon as w}from"../icon/Icon.js";const z=t(l,{bg:"white",borderRadius:"$1",boxShadow:"$2",maxWidth:"90vw",p:"$sizes$2",pr:"$6",position:"relative",zIndex:10,"@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:c},'&[data-side="right"]':{animationName:f},'&[data-side="bottom"]':{animationName:$},'&[data-side="left"]':{animationName:x}}},variants:{size:{sm:{maxWidth:"200px"},md:{maxWidth:"400px"},lg:{maxWidth:"600px"}}}}),b=t(p,{fill:"white",zIndex:1,'[data-align="end"] &':{mr:"$sizes$2"},'[data-align="start"] &':{ml:"$sizes$2"}}),C=({children:i,side:o="top",sideOffset:a=8,closePopoverText:s="Close popover",showCloseButton:n=!0,size:m="md",...d})=>e.createElement(z,{size:m,side:o,sideOffset:a,...d},n&&e.createElement(g,{as:h,css:{position:"absolute",right:"$0",top:"$0"},label:s,size:"md",hasTooltip:!1,theme:"neutral"},e.createElement(w,{is:r})),i,e.createElement(b,{width:16,height:8}));export{C as PopoverContent};
 //# sourceMappingURL=PopoverContent.js.map

package/dist/components/popover/PopoverContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PopoverContent.js","sources":["../../../src/components/popover/PopoverContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Arrow, Close, Content } from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { ~~POPOVER_Z_INDEX } from '~/constants/zIndices'\nimport {~~ styled } from '~/stitches'\nimport {\n slideDownAndFade,\n slideLeftAndFade,\n slideRightAndFade,\n slideUpAndFade\n} from '~/utilities'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContent = styled(Content, {\n bg: 'white',\n borderRadius: '$1',\n boxShadow: '$2',\n maxWidth: '90vw',\n p: '$sizes$2',\n pr: '$6',\n position: 'relative',\n zIndex: ~~POPOVER_Z_INDEX~~,\n '@allowMotion': {\n animationDuration: '75ms',\n animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',\n willChange: 'transform, opacity',\n '&[data-state=\"open\"]': {\n '&[data-side=\"top\"]': { animationName: slideDownAndFade },\n '&[data-side=\"right\"]': { animationName: slideLeftAndFade },\n '&[data-side=\"bottom\"]': { animationName: slideUpAndFade },\n '&[data-side=\"left\"]': { animationName: slideRightAndFade }\n }\n },\n variants: {\n size: {\n sm: { maxWidth: '200px' },\n md: { maxWidth: '400px' },\n lg: { maxWidth: '600px' }\n }\n }\n})\n\nconst StyledArrow = styled(Arrow, {\n fill: 'white',\n zIndex: 1,\n '[data-align=\"end\"] &': { mr: '$sizes$2' },\n '[data-align=\"start\"] &': { ml: '$sizes$2' }\n})\n\ntype PopoverContentProps = React.ComponentProps<typeof StyledContent> &\n React.ComponentProps<typeof Content> & {\n closePopoverText?: string\n showCloseButton?: boolean\n }\n\nexport const PopoverContent = ({\n children,\n side = 'top',\n sideOffset = 8,\n closePopoverText = 'Close popover',\n showCloseButton = true,\n size = 'md',\n ...remainingProps\n}: PopoverContentProps) => (\n <StyledContent\n size={size}\n side={side}\n sideOffset={sideOffset}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n css={{ position: 'absolute', right: '$0', top: '$0' }}\n label={closePopoverText}\n size=\"md\"\n hasTooltip={false}\n theme=\"neutral\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {children}\n <StyledArrow width={16} height={8} />\n </StyledContent>\n)\n"],"names":["StyledContent","styled","Content","~~POPOVER_Z_INDEX","~~slideDownAndFade","slideLeftAndFade","slideUpAndFade","slideRightAndFade","StyledArrow","Arrow","PopoverContent","children","side","sideOffset","closePopoverText","showCloseButton","size","remainingProps","React","ActionIcon","Close","Icon","CloseIcon"],"mappings":"~~2mBAgBA~~,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,GAAI,QACJ,aAAc,KACd,UAAW,KACX,SAAU,OACV,EAAG,WACH,GAAI,KACJ,SAAU,WACV,~~OAAQC~~,~~EACR~~,eAAgB,CACd,kBAAmB,OACnB,wBAAyB,gCACzB,WAAY,qBACZ,uBAAwB,CACtB,qBAAsB,CAAE,cAAeC,CAAiB,EACxD,uBAAwB,CAAE,cAAeC,CAAiB,EAC1D,wBAAyB,CAAE,cAAeC,CAAe,EACzD,sBAAuB,CAAE,cAAeC,CAAkB,CAC5D,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,CAC1B,CACF,CACF,CAAC,EAEKC,~~EAAcP~~,~~EAAOQ~~,EAAO,CAChC,KAAM,QACN,OAAQ,EACR,uBAAwB,CAAE,GAAI,UAAW,EACzC,yBAA0B,CAAE,GAAI,UAAW,CAC7C,CAAC,EAQYC,EAAiB,CAAC,CAC7B,SAAAC,EACA,KAAAC,EAAO,MACP,WAAAC,EAAa,EACb,iBAAAC,EAAmB,gBACnB,gBAAAC,EAAkB,GAClB,KAAAC,EAAO,QACJC,CACL,IACEC,EAAA,~~cAAClB~~,EAAA,CACC,~~KAAMgB~~,EACN,KAAMJ,EACN,WAAYC,EACX,GAAGI,~~CAAAA~~,~~EAEHF~~,GACCG,EAAA,cAACC,EAAA,CACC,GAAIC,EACJ,IAAK,CAAE,SAAU,WAAY,MAAO,KAAM,IAAK,IAAK,EACpD,MAAON,EACP,KAAK,KACL,WAAY,GACZ,MAAM,SAENI,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,EAAW,CACvB,EAEDX,EACDO,EAAA,cAACV,EAAA,CAAY,MAAO,GAAI,OAAQ,CAAA,CAAG,CACrC"}
1	+ {"version":3,"file":"PopoverContent.js","sources":["../../../src/components/popover/PopoverContent.tsx"],"sourcesContent":["import { Close as CloseIcon } from '@atom-learning/icons'\nimport { Arrow, Close, Content } from '@radix-ui/react-popover'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport {\n slideDownAndFade,\n slideLeftAndFade,\n slideRightAndFade,\n slideUpAndFade\n} from '~/utilities'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\n\nconst StyledContent = styled(Content, {\n bg: 'white',\n borderRadius: '$1',\n boxShadow: '$2',\n maxWidth: '90vw',\n p: '$sizes$2',\n pr: '$6',\n position: 'relative',\n zIndex: 10,\n '@allowMotion': {\n animationDuration: '75ms',\n animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',\n willChange: 'transform, opacity',\n '&[data-state=\"open\"]': {\n '&[data-side=\"top\"]': { animationName: slideDownAndFade },\n '&[data-side=\"right\"]': { animationName: slideLeftAndFade },\n '&[data-side=\"bottom\"]': { animationName: slideUpAndFade },\n '&[data-side=\"left\"]': { animationName: slideRightAndFade }\n }\n },\n variants: {\n size: {\n sm: { maxWidth: '200px' },\n md: { maxWidth: '400px' },\n lg: { maxWidth: '600px' }\n }\n }\n})\n\nconst StyledArrow = styled(Arrow, {\n fill: 'white',\n zIndex: 1,\n '[data-align=\"end\"] &': { mr: '$sizes$2' },\n '[data-align=\"start\"] &': { ml: '$sizes$2' }\n})\n\ntype PopoverContentProps = React.ComponentProps<typeof StyledContent> &\n React.ComponentProps<typeof Content> & {\n closePopoverText?: string\n showCloseButton?: boolean\n }\n\nexport const PopoverContent = ({\n children,\n side = 'top',\n sideOffset = 8,\n closePopoverText = 'Close popover',\n showCloseButton = true,\n size = 'md',\n ...remainingProps\n}: PopoverContentProps) => (\n <StyledContent\n size={size}\n side={side}\n sideOffset={sideOffset}\n {...remainingProps}\n >\n {showCloseButton && (\n <ActionIcon\n as={Close}\n css={{ position: 'absolute', right: '$0', top: '$0' }}\n label={closePopoverText}\n size=\"md\"\n hasTooltip={false}\n theme=\"neutral\"\n >\n <Icon is={CloseIcon} />\n </ActionIcon>\n )}\n {children}\n <StyledArrow width={16} height={8} />\n </StyledContent>\n)\n"],"names":["StyledContent","styled","Content","slideDownAndFade","slideLeftAndFade","slideUpAndFade","slideRightAndFade","StyledArrow","Arrow","PopoverContent","children","side","sideOffset","closePopoverText","showCloseButton","size","remainingProps","React","ActionIcon","Close","Icon","CloseIcon"],"mappings":"6iBAeA,MAAMA,EAAgBC,EAAOC,EAAS,CACpC,GAAI,QACJ,aAAc,KACd,UAAW,KACX,SAAU,OACV,EAAG,WACH,GAAI,KACJ,SAAU,WACV,OAAQ,GACR,eAAgB,CACd,kBAAmB,OACnB,wBAAyB,gCACzB,WAAY,qBACZ,uBAAwB,CACtB,qBAAsB,CAAE,cAAeC,CAAiB,EACxD,uBAAwB,CAAE,cAAeC,CAAiB,EAC1D,wBAAyB,CAAE,cAAeC,CAAe,EACzD,sBAAuB,CAAE,cAAeC,CAAkB,CAC5D,CACF,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,EACxB,GAAI,CAAE,SAAU,OAAQ,CAC1B,CACF,CACF,CAAC,EAEKC,EAAcN,EAAOO,EAAO,CAChC,KAAM,QACN,OAAQ,EACR,uBAAwB,CAAE,GAAI,UAAW,EACzC,yBAA0B,CAAE,GAAI,UAAW,CAC7C,CAAC,EAQYC,EAAiB,CAAC,CAC7B,SAAAC,EACA,KAAAC,EAAO,MACP,WAAAC,EAAa,EACb,iBAAAC,EAAmB,gBACnB,gBAAAC,EAAkB,GAClB,KAAAC,EAAO,QACJC,CACL,IACEC,EAAA,cAACjB,EAAA,CACC,KAAMe,EACN,KAAMJ,EACN,WAAYC,EACX,GAAGI,CAEHF,EAAAA,GACCG,EAAA,cAACC,EAAA,CACC,GAAIC,EACJ,IAAK,CAAE,SAAU,WAAY,MAAO,KAAM,IAAK,IAAK,EACpD,MAAON,EACP,KAAK,KACL,WAAY,GACZ,MAAM,SAENI,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,EAAW,CACvB,EAEDX,EACDO,EAAA,cAACV,EAAA,CAAY,MAAO,GAAI,OAAQ,CAAA,CAAG,CACrC"}

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/RadioButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import*as o from"@radix-ui/react-radio-group";import*as e from"react";import{styled as t}from"../../stitches.js";const s=t(o.Item,{alignItems:"center",appearance:"none",backgroundColor:"transparent",border:"1px solid $grey800",borderRadius:"$round",color:"white",cursor:"pointer",display:"flex",justifyContent:"center",p:0,size:"$1",variants:{size:{md:{size:"$1"},lg:{size:"$2",mt:"-$1"}}},transition:"all 50ms ease-out","&:focus":{outline:"2px solid $primary800",outlineOffset:"1px"},'&[data-state="checked"]':{backgroundColor:"$primary800",borderColor:"$primary800"},"&[disabled]":{backgroundColor:"$grey200",borderColor:"$grey800",color:"$grey800",cursor:"not-allowed"}}),n=t(o.Indicator,{size:"6px",borderRadius:"$round",backgroundColor:"currentcolor",position:"absolute",variants:{size:{md:{size:"6px"},lg:{size:"12px"}}}}),a=({size:r,...i})=>e.createElement(s,{...i,size:r},e.createElement(n,{size:r}));a.displayName="RadioButton";export{a as RadioButton};
+import*as o from"@radix-ui/react-radio-group";import*as e from"react";import{styled as t}from"../../stitches.js";const s=t(o.Item,{alignItems:"center",appearance:"none",backgroundColor:"transparent",border:"1px solid $grey800",borderRadius:"$round",color:"white",cursor:"pointer",display:"flex",justifyContent:"center",p:0,size:"$1",variants:{size:{md:{size:"$1"},lg:{size:"$2",mt:"-$1"}}},transition:"all 50ms ease-out","&:focus":{outline:"2px solid $primary800",outlineOffset:"1px"},'&[data-state="checked"]':{backgroundColor:"$primary800",borderColor:"$primary800"},"&[disabled]":{backgroundColor:"$grey200",borderColor:"$grey800",color:"$grey800",cursor:"not-allowed"}}),n=t(o.Indicator,{size:"6px",borderRadius:"$round",backgroundColor:"currentColor",position:"absolute",variants:{size:{md:{size:"6px"},lg:{size:"12px"}}}}),a=({size:r,...i})=>e.createElement(s,{...i,size:r},e.createElement(n,{size:r}));a.displayName="RadioButton";export{a as RadioButton};
 //# sourceMappingURL=RadioButton.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.js","sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { Override } from '~/utilities/types'\n\nconst StyledRadioButton = styled(RadioGroup.Item, {\n alignItems: 'center',\n appearance: 'none',\n backgroundColor: 'transparent',\n border: '1px solid $grey800',\n borderRadius: '$round',\n color: 'white',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n p: 0,\n size: '$1',\n variants: {\n size: {\n md: {\n size: '$1'\n },\n lg: {\n size: '$2',\n mt: '-$1'\n }\n }\n },\n transition: 'all 50ms ease-out',\n '&:focus': {\n outline: '2px solid $primary800',\n outlineOffset: '1px'\n },\n '&[data-state=\"checked\"]': {\n backgroundColor: '$primary800',\n borderColor: '$primary800'\n },\n '&[disabled]': {\n backgroundColor: '$grey200',\n borderColor: '$grey800',\n color: '$grey800',\n cursor: 'not-allowed'\n }\n})\n\nconst StyledIndicator = styled(RadioGroup.Indicator, {\n size: '6px',\n borderRadius: '$round',\n backgroundColor: '~~currentcolor~~',\n position: 'absolute',\n variants: {\n size: {\n md: {\n size: '6px'\n },\n lg: {\n size: '12px'\n }\n }\n }\n})\n\ntype RadioButtonProps = Override<\n React.ComponentProps<typeof StyledRadioButton>,\n {\n as?: never\n } & {\n 'aria-label'?: string\n }\n>\n\nexport const RadioButton = ({ size, ...props }: RadioButtonProps) => {\n return (\n <StyledRadioButton {...props} size={size}>\n <StyledIndicator size={size} />\n </StyledRadioButton>\n )\n}\n\nRadioButton.displayName = 'RadioButton'\n"],"names":["StyledRadioButton","styled","RadioGroup","StyledIndicator","RadioButton","size","props","React"],"mappings":"iHAMA,MAAMA,EAAoBC,EAAOC,EAAW,KAAM,CAChD,WAAY,SACZ,WAAY,OACZ,gBAAiB,cACjB,OAAQ,qBACR,aAAc,SACd,MAAO,QACP,OAAQ,UACR,QAAS,OACT,eAAgB,SAChB,EAAG,EACH,KAAM,KACN,SAAU,CACR,KAAM,CACJ,GAAI,CACF,KAAM,IACR,EACA,GAAI,CACF,KAAM,KACN,GAAI,KACN,CACF,CACF,EACA,WAAY,oBACZ,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,0BAA2B,CACzB,gBAAiB,cACjB,YAAa,aACf,EACA,cAAe,CACb,gBAAiB,WACjB,YAAa,WACb,MAAO,WACP,OAAQ,aACV,CACF,CAAC,EAEKC,EAAkBF,EAAOC,EAAW,UAAW,CACnD,KAAM,MACN,aAAc,SACd,gBAAiB,eACjB,SAAU,WACV,SAAU,CACR,KAAM,CACJ,GAAI,CACF,KAAM,KACR,EACA,GAAI,CACF,KAAM,MACR,CACF,CACF,CACF,CAAC,EAWYE,EAAc,CAAC,CAAE,KAAAC,KAASC,CAAM,IAEzCC,EAAA,cAACP,EAAA,CAAmB,GAAGM,EAAO,KAAMD,GAClCE,EAAA,cAACJ,EAAA,CAAgB,KAAME,CAAAA,CAAM,CAC/B,EAIJD,EAAY,YAAc"}
1	+ {"version":3,"file":"RadioButton.js","sources":["../../../src/components/radio-button/RadioButton.tsx"],"sourcesContent":["import * as RadioGroup from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { Override } from '~/utilities/types'\n\nconst StyledRadioButton = styled(RadioGroup.Item, {\n alignItems: 'center',\n appearance: 'none',\n backgroundColor: 'transparent',\n border: '1px solid $grey800',\n borderRadius: '$round',\n color: 'white',\n cursor: 'pointer',\n display: 'flex',\n justifyContent: 'center',\n p: 0,\n size: '$1',\n variants: {\n size: {\n md: {\n size: '$1'\n },\n lg: {\n size: '$2',\n mt: '-$1'\n }\n }\n },\n transition: 'all 50ms ease-out',\n '&:focus': {\n outline: '2px solid $primary800',\n outlineOffset: '1px'\n },\n '&[data-state=\"checked\"]': {\n backgroundColor: '$primary800',\n borderColor: '$primary800'\n },\n '&[disabled]': {\n backgroundColor: '$grey200',\n borderColor: '$grey800',\n color: '$grey800',\n cursor: 'not-allowed'\n }\n})\n\nconst StyledIndicator = styled(RadioGroup.Indicator, {\n size: '6px',\n borderRadius: '$round',\n backgroundColor: 'currentColor',\n position: 'absolute',\n variants: {\n size: {\n md: {\n size: '6px'\n },\n lg: {\n size: '12px'\n }\n }\n }\n})\n\ntype RadioButtonProps = Override<\n React.ComponentProps<typeof StyledRadioButton>,\n {\n as?: never\n } & {\n 'aria-label'?: string\n }\n>\n\nexport const RadioButton = ({ size, ...props }: RadioButtonProps) => {\n return (\n <StyledRadioButton {...props} size={size}>\n <StyledIndicator size={size} />\n </StyledRadioButton>\n )\n}\n\nRadioButton.displayName = 'RadioButton'\n"],"names":["StyledRadioButton","styled","RadioGroup","StyledIndicator","RadioButton","size","props","React"],"mappings":"iHAMA,MAAMA,EAAoBC,EAAOC,EAAW,KAAM,CAChD,WAAY,SACZ,WAAY,OACZ,gBAAiB,cACjB,OAAQ,qBACR,aAAc,SACd,MAAO,QACP,OAAQ,UACR,QAAS,OACT,eAAgB,SAChB,EAAG,EACH,KAAM,KACN,SAAU,CACR,KAAM,CACJ,GAAI,CACF,KAAM,IACR,EACA,GAAI,CACF,KAAM,KACN,GAAI,KACN,CACF,CACF,EACA,WAAY,oBACZ,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,0BAA2B,CACzB,gBAAiB,cACjB,YAAa,aACf,EACA,cAAe,CACb,gBAAiB,WACjB,YAAa,WACb,MAAO,WACP,OAAQ,aACV,CACF,CAAC,EAEKC,EAAkBF,EAAOC,EAAW,UAAW,CACnD,KAAM,MACN,aAAc,SACd,gBAAiB,eACjB,SAAU,WACV,SAAU,CACR,KAAM,CACJ,GAAI,CACF,KAAM,KACR,EACA,GAAI,CACF,KAAM,MACR,CACF,CACF,CACF,CAAC,EAWYE,EAAc,CAAC,CAAE,KAAAC,KAASC,CAAM,IAEzCC,EAAA,cAACP,EAAA,CAAmB,GAAGM,EAAO,KAAMD,GAClCE,EAAA,cAACJ,EAAA,CAAgB,KAAME,CAAAA,CAAM,CAC/B,EAIJD,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"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as M}from"../../utilities/style/get-icon-size.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.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"}