@atom-learning/components 2.61.2 → 2.62.0

package/dist/components/link/Link.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as a}from"../../stitches.js";import{StyledHeading as p}from"../heading/Heading.js";import{StyledLi as s}from"../list/List.js";import"../markdown-content/components/MarkdownCode.js";import{StyledMarkdownEmphasis as f}from"../markdown-content/components/MarkdownEmphasis.js";import"../markdown-content/components/MarkdownInlineCode.js";import"../image/Image.js";import{StyledText as d,textVariants as l}from"../text/Text.js";import"../markdown-content/components/MarkdownStrong.js";import"../divider/Divider.js";const e=a("a",{bg:"unset",border:"unset",p:"unset",color:"$primary",cursor:"pointer",fontFamily:"$body",textDecoration:"none","&:focus, &:hover":{color:"$primaryMid",textDecoration:"underline"},"&:active":{color:"$primaryDark"},[`${d} > &, ${p} > &, ${s} > &, ${f} > &`]:{fontSize:"100%",lineHeight:1,"&::before, &::after":{content:"none"}},variants:l}),o=t.forwardRef(({size:i="md",href:r,...n},m)=>t.createElement(e,{...!r&&{as:"button",noCapsize:!0},size:i,href:r,...n,ref:m}));o.displayName="Link";export{o as Link,e as StyledLink};
+import*as e from"react";import{styled as a}from"../../stitches.js";import{StyledHeading as p}from"../heading/Heading.js";import{StyledLi as s}from"../list/List.js";import"../markdown-content/components/MarkdownCode.js";import{StyledMarkdownEmphasis as f}from"../markdown-content/components/MarkdownEmphasis.js";import"../markdown-content/components/MarkdownInlineCode.js";import"../image/Image.js";import{StyledText as d,textVariants as l}from"../text/Text.js";import"../markdown-content/components/MarkdownStrong.js";import"../divider/Divider.js";const t=a("a",{bg:"unset",border:"unset",p:"unset",color:"$primary",cursor:"pointer",fontFamily:"$body",textDecoration:"none","&:focus, &:hover":{color:"$primaryMid",textDecoration:"underline"},"&:active":{color:"$primaryDark"},[`${d} > &, ${p} > &, ${s} > &, ${f} > &`]:{fontSize:"100%",lineHeight:1,"&::before, &::after":{content:"none"}},variants:l}),o=e.forwardRef(({size:i="md",href:r,...n},m)=>e.createElement(t,{...!r&&{as:"button",noCapsize:!0},size:i,href:r,...n,ref:m}));o.displayName="Link";export{o as Link,t as StyledLink};
 //# sourceMappingURL=Link.js.map

package/dist/components/list/List.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as i}from"../../stitches.js";import{textVariants as d}from"../text/Text.js";const t=i("li",{}),l=i("ul",{listStylePosition:"inside",fontFamily:"$body",m:"unset",p:"unset",[`& > ${t}`]:{"&:not(:last-child)":{mb:"$2"},"&:last-child":{mb:0}},variants:{...d,as:{ol:{pl:"$4",listStyleType:"decimal",[`& > ${t}`]:{pl:"$1","&::marker":{fontSize:".875em",fontWeight:"bold"}}},ul:{pl:"$3",[`& > ${t}`]:{pl:"$2","&::marker":{content:"\u2022 ",fontWeight:"bold"}}}},theme:{primary:{[`& > ${t}`]:{"&::marker":{color:"$primary"}}}}}}),o=e.forwardRef(({size:r="md",noCapsize:m=!0,ordered:s,...a},n)=>e.createElement(l,{ref:n,as:s?"ol":"ul",size:r,noCapsize:m,...a}));o.Item=t;export{o as List,t as StyledLi,l as StyledList};
+import*as t from"react";import{styled as i}from"../../stitches.js";import{textVariants as d}from"../text/Text.js";const e=i("li",{}),l=i("ul",{listStylePosition:"inside",fontFamily:"$body",m:"unset",p:"unset",[`& > ${e}`]:{"&:not(:last-child)":{mb:"$2"},"&:last-child":{mb:0}},variants:{...d,as:{ol:{pl:"$4",listStyleType:"decimal",[`& > ${e}`]:{pl:"$1","&::marker":{fontSize:".875em",fontWeight:"bold"}}},ul:{pl:"$3",[`& > ${e}`]:{pl:"$2","&::marker":{content:"\u2022 ",fontWeight:"bold"}}}},theme:{primary:{[`& > ${e}`]:{"&::marker":{color:"$primary"}}}}}}),o=t.forwardRef(({size:r="md",noCapsize:m=!0,ordered:s,...a},n)=>t.createElement(l,{ref:n,as:s?"ol":"ul",size:r,noCapsize:m,...a}));o.Item=e;export{o as List,e as StyledLi,l as StyledList};
 //# sourceMappingURL=List.js.map

package/dist/components/markdown-content/MarkdownContent.js

@@ -1,2 +1,2 @@
-import d from"mdast-util-directive";import k from"mdast-util-from-markdown";import f from"micromark-extension-directive";import*as p from"react";import{StackContent as l}from"../stack-content/StackContent.js";import{MarkdownCode as c}from"./components/MarkdownCode.js";import{MarkdownEmphasis as w}from"./components/MarkdownEmphasis.js";import{MarkdownHeading as M}from"./components/MarkdownHeading.js";import{MarkdownInlineCode as h}from"./components/MarkdownInlineCode.js";import{MarkdownImage as u}from"./components/MarkdownImage.js";import{MarkdownLink as g}from"./components/MarkdownLink.js";import{MarkdownList as C}from"./components/MarkdownList.js";import{MarkdownListItem as $}from"./components/MarkdownListItem.js";import{MarkdownParagraph as x}from"./components/MarkdownParagraph.js";import{MarkdownStrong as y}from"./components/MarkdownStrong.js";import{MarkdownText as E}from"./components/MarkdownText.js";import{MarkdownThematicBreak as I}from"./components/MarkdownThematicBreak.js";const L={code:c,emphasis:w,heading:M,inlineCode:h,image:u,link:g,list:C,listItem:$,paragraph:x,strong:y,text:E,thematicBreak:I},v=o=>{var r,t;if((r=o.position)!=null&&r.start){const{line:e,column:m,offset:n}=(t=o.position)==null?void 0:t.start;return`${o.type}${e}${m}${n}`}return`${o.type}${+new Date}`},s=({content:o,customComponents:r={},css:t})=>{const e=k(o,{extensions:[f()],mdastExtensions:[d.fromMarkdown]}),m={...L,...r},n=a=>{const i=m[a.type];return i?p.createElement(i,{key:v(a),node:a,handleNode:n}):null};return p.createElement(l,{css:t},e.children.map(n))};s.displayName="MarkdownContent";export{s as MarkdownContent};
+import d from"mdast-util-directive";import k from"mdast-util-from-markdown";import f from"micromark-extension-directive";import*as p from"react";import{StackContent as l}from"../stack-content/StackContent.js";import{MarkdownCode as c}from"./components/MarkdownCode.js";import{MarkdownEmphasis as w}from"./components/MarkdownEmphasis.js";import{MarkdownHeading as M}from"./components/MarkdownHeading.js";import{MarkdownInlineCode as h}from"./components/MarkdownInlineCode.js";import{MarkdownImage as u}from"./components/MarkdownImage.js";import{MarkdownLink as g}from"./components/MarkdownLink.js";import{MarkdownList as $}from"./components/MarkdownList.js";import{MarkdownListItem as C}from"./components/MarkdownListItem.js";import{MarkdownParagraph as x}from"./components/MarkdownParagraph.js";import{MarkdownStrong as y}from"./components/MarkdownStrong.js";import{MarkdownText as E}from"./components/MarkdownText.js";import{MarkdownThematicBreak as I}from"./components/MarkdownThematicBreak.js";const L={code:c,emphasis:w,heading:M,inlineCode:h,image:u,link:g,list:$,listItem:C,paragraph:x,strong:y,text:E,thematicBreak:I},v=o=>{var r,t;if((r=o.position)!=null&&r.start){const{line:e,column:m,offset:n}=(t=o.position)==null?void 0:t.start;return`${o.type}${e}${m}${n}`}return`${o.type}${+new Date}`},s=({content:o,customComponents:r={},css:t})=>{const e=k(o,{extensions:[f()],mdastExtensions:[d.fromMarkdown]}),m={...L,...r},n=a=>{const i=m[a.type];return i?p.createElement(i,{key:v(a),node:a,handleNode:n}):null};return p.createElement(l,{css:t},e.children.map(n))};s.displayName="MarkdownContent";export{s as MarkdownContent};
 //# sourceMappingURL=MarkdownContent.js.map

package/dist/components/markdown-content/components/MarkdownCode.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as e}from"../../../stitches.js";import{Box as r}from"../../box/Box.js";const m=e(r,{bg:"$tonal100",borderRadius:"$1",color:"$tonal600",fontFamily:"$mono",fontSize:"$sm",lineHeight:1.4,my:"$4",p:"$3"}),n=({node:o})=>t.createElement(m,{as:"pre"},o.value);export{n as MarkdownCode};
+import*as e from"react";import{styled as t}from"../../../stitches.js";import{Box as r}from"../../box/Box.js";const m=t(r,{bg:"$tonal100",borderRadius:"$1",color:"$tonal600",fontFamily:"$mono",fontSize:"$sm",lineHeight:1.4,my:"$4",p:"$3"}),n=({node:o})=>e.createElement(m,{as:"pre"},o.value);export{n as MarkdownCode};
 //# sourceMappingURL=MarkdownCode.js.map

package/dist/components/markdown-content/components/MarkdownEmphasis.js

@@ -1,2 +1,2 @@
-import*as l from"react";import{styled as n}from"../../../stitches.js";const o=n("em",{fontStyle:"italic"}),a=({node:t,handleNode:r})=>{var e;return l.createElement(o,null,(e=t.children)==null?void 0:e.map(r))};export{a as MarkdownEmphasis,o as StyledMarkdownEmphasis};
+import*as l from"react";import{styled as n}from"../../../stitches.js";const o=n("em",{fontStyle:"italic"}),a=({node:r,handleNode:t})=>{var e;return l.createElement(o,null,(e=r.children)==null?void 0:e.map(t))};export{a as MarkdownEmphasis,o as StyledMarkdownEmphasis};
 //# sourceMappingURL=MarkdownEmphasis.js.map

package/dist/components/markdown-content/components/MarkdownImage.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{Image as o}from"../../image/Image.js";const m=({node:r,css:a})=>{var t;return e.createElement(o,{src:r.url,alt:(t=r.alt)!=null?t:void 0,css:a})};export{m as MarkdownImage};
+import*as o from"react";import{Image as t}from"../../image/Image.js";const m=({node:r,css:a})=>{var e;return o.createElement(t,{src:r.url,alt:(e=r.alt)!=null?e:void 0,css:a})};export{m as MarkdownImage};
 //# sourceMappingURL=MarkdownImage.js.map

package/dist/components/markdown-content/components/MarkdownInlineCode.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as n}from"../../../stitches.js";import{Box as t}from"../../box/Box.js";const r=n(t,{bg:"$tonal100",borderRadius:"$0",color:"$tonal600",display:"inline-block",fontFamily:"$mono",fontSize:"85%",p:"$0 $1"}),l=({node:o})=>e.createElement(r,{as:"code"},o.value);export{l as MarkdownInlineCode};
+import*as e from"react";import{styled as n}from"../../../stitches.js";import{Box as r}from"../../box/Box.js";const t=n(r,{bg:"$tonal100",borderRadius:"$0",color:"$tonal600",display:"inline-block",fontFamily:"$mono",fontSize:"85%",p:"$0 $1"}),l=({node:o})=>e.createElement(t,{as:"code"},o.value);export{l as MarkdownInlineCode};
 //# sourceMappingURL=MarkdownInlineCode.js.map

package/dist/components/markdown-content/components/MarkdownListItem.js

@@ -1,2 +1,2 @@
-import*as o from"react";import{List as n}from"../../list/List.js";const m=({node:e,handleNode:r})=>{var t;return o.createElement(n.Item,null,(t=e.children)==null?void 0:t.map(r))};export{m as MarkdownListItem};
+import*as o from"react";import{List as n}from"../../list/List.js";const m=({node:t,handleNode:r})=>{var e;return o.createElement(n.Item,null,(e=t.children)==null?void 0:e.map(r))};export{m as MarkdownListItem};
 //# sourceMappingURL=MarkdownListItem.js.map

package/dist/components/markdown-content/components/MarkdownParagraph.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{Text as n}from"../../text/Text.js";const d=({node:e,handleNode:a,...o})=>{var r;return t.createElement(n,{...o},(r=e.children)==null?void 0:r.map(a))};export{d as MarkdownParagraph};
+import*as n from"react";import{Text as t}from"../../text/Text.js";const d=({node:e,handleNode:a,...o})=>{var r;return n.createElement(t,{...o},(r=e.children)==null?void 0:r.map(a))};export{d as MarkdownParagraph};
 //# sourceMappingURL=MarkdownParagraph.js.map

package/dist/components/markdown-content/components/MarkdownStrong.js

@@ -1,2 +1,2 @@
-import*as r from"react";import{styled as e}from"../../../stitches.js";const d=e("strong",{fontWeight:600}),l=({node:t,handleNode:n})=>{var o;return r.createElement(d,null,(o=t.children)==null?void 0:o.map(n))};export{l as MarkdownStrong};
+import*as r from"react";import{styled as t}from"../../../stitches.js";const d=t("strong",{fontWeight:600}),l=({node:e,handleNode:n})=>{var o;return r.createElement(d,null,(o=e.children)==null?void 0:o.map(n))};export{l as MarkdownStrong};
 //# sourceMappingURL=MarkdownStrong.js.map

package/dist/components/markdown-content/components/MarkdownThematicBreak.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{Divider as e}from"../../divider/Divider.js";const o=({css:r})=>t.createElement(e,{css:{width:"100%",...r}});export{o as MarkdownThematicBreak};
+import*as r from"react";import{Divider as t}from"../../divider/Divider.js";const o=({css:e})=>r.createElement(t,{css:{width:"100%",...e}});export{o as MarkdownThematicBreak};
 //# sourceMappingURL=MarkdownThematicBreak.js.map

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

@@ -9,7 +9,7 @@ export interface NumberInputProps {
     defaultValue?: number;
     disabled?: boolean;
     readonly?: boolean;
-    size?: 'sm' | 'md';
+    size?: 'sm' | 'md' | 'lg';
     onValueChange?: (value: number) => void;
     stepperButtonLabels?: {
         increment?: string;

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

@@ -1,2 +1,2 @@
-import{Minus as S,Plus as B}from"@atom-learning/icons";import*as t from"react";import{Flex as H}from"../flex/Flex.js";import{Input as $}from"../input/Input.js";import{NumberInputStepper as g}from"./NumberInputStepper.js";const k=t.forwardRef(({value:d,defaultValue:N=0,onValueChange:C,min:r=0,max:o=Number.MAX_SAFE_INTEGER,step:m=1,disabled:i=!1,readonly:u=!1,size:w="md",stepperButtonLabels:T,disabledTooltipContent:y,css:A,...L},z)=>{const[a,E]=t.useState(d||N);t.useEffect(()=>{typeof d<"u"&&E(d)},[d]);const s=t.useRef(null);t.useImperativeHandle(z,()=>s.current);const R={increment:"increment",decrement:"decrement",...T},h={decrement:`Cannot enter values below ${r}`,increment:`Cannot enter values above ${o}`,...y},c=a>=o,b=a<=r,p=t.useCallback(e=>Math.min(Math.max(e,r),o),[o,r]),n=t.useCallback(e=>{C==null||C(e),E(e)},[C]),D=t.useCallback(e=>{const l=Number(e.target.value.replace(/\D/g,""));n(l)},[n]),f=t.useCallback(()=>{var e;if(c||u)return;(e=s==null?void 0:s.current)==null||e.focus();const l=Number(a)+m;n(p(l))},[p,c,u,m,n,a]),v=t.useCallback(()=>{var e;if(b||u)return;(e=s==null?void 0:s.current)==null||e.focus();const l=Number(a)-m;n(p(l))},[p,b,u,r,m,n,a]),I=t.useCallback(e=>{if(e.nativeEvent.isComposing)return;const l=e.key,x={ArrowUp:f,ArrowRight:f,ArrowDown:v,ArrowLeft:v,Home:()=>n(r),End:()=>n(o)}[l];x&&(e.preventDefault(),x(e))},[f,v,n,r,o]),M={type:"number",value:a,...L,onChange:D,onKeyDown:I,size:w,css:{borderRadius:"0px",width:"$6","&:disabled":{opacity:.3,pointerEvents:"none"}},ref:s,readOnly:u,disabled:i,"aria-valuemin":r,"aria-valuemax":o,"aria-valuenow":a,role:"spinbutton"};return t.createElement(H,{css:A},t.createElement(g,{onClick:v,icon:S,css:{borderRight:"none",borderTopRightRadius:"0px",borderBottomRightRadius:"0px"},size:w,disabled:b||i,showTooltip:b&&!i,disabledTooltipContent:h.decrement,label:R.decrement}),t.createElement($,{...M}),t.createElement(g,{onClick:f,icon:B,css:{borderLeft:"none",borderTopLeftRadius:"0px",borderBottomLeftRadius:"0px"},size:w,disabled:c||i,showTooltip:c&&!i,disabledTooltipContent:h.increment,label:R.increment}))});k.displayName="NumberInput";export{k as NumberInput};
+import{Minus as B,Plus as F}from"@atom-learning/icons";import*as t from"react";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 H}from"../../utilities/style/get-icon-size.js";import{Flex as $}from"../flex/Flex.js";import{Input as V}from"../input/Input.js";import{NumberInputStepper as E}from"./NumberInputStepper.js";const N=t.forwardRef(({value:m,defaultValue:T=0,onValueChange:C,min:n=0,max:a=Number.MAX_SAFE_INTEGER,step:d=1,disabled:s=!1,readonly:u=!1,size:w="md",stepperButtonLabels:y,disabledTooltipContent:I,css:A,...M},z)=>{const[o,R]=t.useState(m||T);t.useEffect(()=>{typeof m<"u"&&R(m)},[m]);const l=t.useRef(null);t.useImperativeHandle(z,()=>l.current);const g=t.useMemo(()=>H(w),[w]),h={increment:"increment",decrement:"decrement",...y},x={decrement:`Cannot enter values below ${n}`,increment:`Cannot enter values above ${a}`,...I},c=o>=a,p=o<=n,b=t.useCallback(e=>Math.min(Math.max(e,n),a),[a,n]),r=t.useCallback(e=>{C==null||C(e),R(e)},[C]),L=t.useCallback(e=>{const i=Number(e.target.value.replace(/\D/g,""));r(i)},[r]),f=t.useCallback(()=>{var e;if(c||u)return;(e=l==null?void 0:l.current)==null||e.focus();const i=Number(o)+d;r(b(i))},[b,c,u,d,r,o]),v=t.useCallback(()=>{var e;if(p||u)return;(e=l==null?void 0:l.current)==null||e.focus();const i=Number(o)-d;r(b(i))},[b,p,u,n,d,r,o]),D=t.useCallback(e=>{if(e.nativeEvent.isComposing)return;const i=e.key,k={ArrowUp:f,ArrowRight:f,ArrowDown:v,ArrowLeft:v,Home:()=>r(n),End:()=>r(a)}[i];k&&(e.preventDefault(),k(e))},[f,v,r,n,a]),S={type:"number",value:o,...M,onChange:L,onKeyDown:D,size:w,css:{borderRadius:"0px",width:"$6","&:disabled":{opacity:.3,pointerEvents:"none"}},ref:l,readOnly:u,disabled:s,"aria-valuemin":n,"aria-valuemax":a,"aria-valuenow":o,role:"spinbutton"};return t.createElement($,{css:A},t.createElement(E,{onClick:v,icon:B,css:{borderRight:"none",borderTopRightRadius:"0px",borderBottomRightRadius:"0px"},size:g,disabled:p||s,showTooltip:p&&!s,disabledTooltipContent:x.decrement,label:h.decrement}),t.createElement(V,{...S}),t.createElement(E,{onClick:f,icon:F,css:{borderLeft:"none",borderTopLeftRadius:"0px",borderBottomLeftRadius:"0px"},size:g,disabled:c||s,showTooltip:c&&!s,disabledTooltipContent:x.increment,label:h.increment}))});N.displayName="NumberInput";export{N as NumberInput};
 //# sourceMappingURL=NumberInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport type { CSS } from '~/stitches'\n\nimport { Flex } from '../flex'\nimport { Input } from '../input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  css?: CSS\n}\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      value,\n      defaultValue = 0,\n      onValueChange,\n      min = 0,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      disabled: isDisabled = false,\n      readonly: isReadOnly = false,\n      size = 'md',\n      stepperButtonLabels: stepperButtonLabelsProp,\n      disabledTooltipContent: disabledTooltipContentProp,\n      css,\n      ...rest\n    },\n    ref\n  ): JSX.Element => {\n    const [internalValue, setInternalValue] = React.useState<number>(\n      value || defaultValue\n    )\n    React.useEffect(() => {\n      // Update the internal value to match what is passed in.\n      if (typeof value !== 'undefined') setInternalValue(value)\n    }, [value])\n\n    const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n    const stepperButtonLabels = {\n      increment: 'increment',\n      decrement: 'decrement',\n      ...stepperButtonLabelsProp\n    }\n\n    const disabledTooltipContent = {\n      decrement: `Cannot enter values below ${min}`,\n      increment: `Cannot enter values above ${max}`,\n      ...disabledTooltipContentProp\n    }\n\n    const isAtMax = internalValue >= max\n    const isAtMin = internalValue <= min\n\n    const clamp = React.useCallback(\n      (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n      [max, min]\n    )\n\n    const updateValue = React.useCallback(\n      (newValue: number) => {\n        onValueChange?.(newValue)\n        setInternalValue(newValue)\n      },\n      [onValueChange]\n    )\n\n    const onInputChange = React.useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n        updateValue(parsedValue)\n      },\n      [updateValue]\n    )\n\n    const increment = React.useCallback(() => {\n      if (isAtMax || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) + step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n    const decrement = React.useCallback(() => {\n      if (isAtMin || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) - step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n    const onKeyDown = React.useCallback(\n      (event: React.KeyboardEvent) => {\n        if (event.nativeEvent.isComposing) return\n\n        /**\n         * Keyboard Accessibility\n         *\n         * We want to increase or decrease the input's value\n         * based on if the user the arrow keys.\n         *\n         * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n         */\n        const eventKey = event.key\n\n        const keyMap: Record<string, React.KeyboardEventHandler> = {\n          ArrowUp: increment,\n          ArrowRight: increment,\n          ArrowDown: decrement,\n          ArrowLeft: decrement,\n          Home: () => updateValue(min),\n          End: () => updateValue(max)\n        }\n\n        const action = keyMap[eventKey]\n\n        if (action) {\n          event.preventDefault()\n          action(event)\n        }\n      },\n      [increment, decrement, updateValue, min, max]\n    )\n\n    const inputProps: React.ComponentProps<typeof Input> = {\n      type: 'number',\n      value: internalValue,\n      ...rest,\n      onChange: onInputChange,\n      onKeyDown,\n      size,\n      css: {\n        borderRadius: '0px',\n        width: '$6',\n        '&:disabled': { opacity: 0.3, pointerEvents: 'none' }\n      },\n      ref: inputRef,\n      readOnly: isReadOnly,\n      disabled: isDisabled,\n      'aria-valuemin': min,\n      'aria-valuemax': max,\n      'aria-valuenow': internalValue,\n      role: 'spinbutton'\n    }\n\n    return (\n      <Flex css={css}>\n        <NumberInputStepper\n          onClick={decrement}\n          icon={Minus}\n          css={{\n            borderRight: 'none',\n            borderTopRightRadius: '0px',\n            borderBottomRightRadius: '0px'\n          }}\n          size={size}\n          disabled={isAtMin || isDisabled}\n          showTooltip={isAtMin && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.decrement}\n          label={stepperButtonLabels.decrement}\n        />\n        <Input {...inputProps} />\n        <NumberInputStepper\n          onClick={increment}\n          icon={Plus}\n          css={{\n            borderLeft: 'none',\n            borderTopLeftRadius: '0px',\n            borderBottomLeftRadius: '0px'\n          }}\n          size={size}\n          disabled={isAtMax || isDisabled}\n          showTooltip={isAtMax && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.increment}\n          label={stepperButtonLabels.increment}\n        />\n      </Flex>\n    )\n  }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","css","rest","ref","internalValue","setInternalValue","inputRef","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","inputProps","Flex","NumberInputStepper","Minus","Input","Plus"],"mappings":"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"}
+{"version":3,"file":"NumberInput.js","sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport type { CSS } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\n\nimport { Flex } from '../flex'\nimport { Input } from '../input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  css?: CSS\n}\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      value,\n      defaultValue = 0,\n      onValueChange,\n      min = 0,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      disabled: isDisabled = false,\n      readonly: isReadOnly = false,\n      size = 'md',\n      stepperButtonLabels: stepperButtonLabelsProp,\n      disabledTooltipContent: disabledTooltipContentProp,\n      css,\n      ...rest\n    },\n    ref\n  ): JSX.Element => {\n    const [internalValue, setInternalValue] = React.useState<number>(\n      value || defaultValue\n    )\n    React.useEffect(() => {\n      // Update the internal value to match what is passed in.\n      if (typeof value !== 'undefined') setInternalValue(value)\n    }, [value])\n\n    const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    const stepperButtonLabels = {\n      increment: 'increment',\n      decrement: 'decrement',\n      ...stepperButtonLabelsProp\n    }\n\n    const disabledTooltipContent = {\n      decrement: `Cannot enter values below ${min}`,\n      increment: `Cannot enter values above ${max}`,\n      ...disabledTooltipContentProp\n    }\n\n    const isAtMax = internalValue >= max\n    const isAtMin = internalValue <= min\n\n    const clamp = React.useCallback(\n      (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n      [max, min]\n    )\n\n    const updateValue = React.useCallback(\n      (newValue: number) => {\n        onValueChange?.(newValue)\n        setInternalValue(newValue)\n      },\n      [onValueChange]\n    )\n\n    const onInputChange = React.useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n        updateValue(parsedValue)\n      },\n      [updateValue]\n    )\n\n    const increment = React.useCallback(() => {\n      if (isAtMax || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) + step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n    const decrement = React.useCallback(() => {\n      if (isAtMin || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) - step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n    const onKeyDown = React.useCallback(\n      (event: React.KeyboardEvent) => {\n        if (event.nativeEvent.isComposing) return\n\n        /**\n         * Keyboard Accessibility\n         *\n         * We want to increase or decrease the input's value\n         * based on if the user the arrow keys.\n         *\n         * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n         */\n        const eventKey = event.key\n\n        const keyMap: Record<string, React.KeyboardEventHandler> = {\n          ArrowUp: increment,\n          ArrowRight: increment,\n          ArrowDown: decrement,\n          ArrowLeft: decrement,\n          Home: () => updateValue(min),\n          End: () => updateValue(max)\n        }\n\n        const action = keyMap[eventKey]\n\n        if (action) {\n          event.preventDefault()\n          action(event)\n        }\n      },\n      [increment, decrement, updateValue, min, max]\n    )\n\n    const inputProps: React.ComponentProps<typeof Input> = {\n      type: 'number',\n      value: internalValue,\n      ...rest,\n      onChange: onInputChange,\n      onKeyDown,\n      size,\n      css: {\n        borderRadius: '0px',\n        width: '$6',\n        '&:disabled': { opacity: 0.3, pointerEvents: 'none' }\n      },\n      ref: inputRef,\n      readOnly: isReadOnly,\n      disabled: isDisabled,\n      'aria-valuemin': min,\n      'aria-valuemax': max,\n      'aria-valuenow': internalValue,\n      role: 'spinbutton'\n    }\n\n    return (\n      <Flex css={css}>\n        <NumberInputStepper\n          onClick={decrement}\n          icon={Minus}\n          css={{\n            borderRight: 'none',\n            borderTopRightRadius: '0px',\n            borderBottomRightRadius: '0px'\n          }}\n          size={iconSize}\n          disabled={isAtMin || isDisabled}\n          showTooltip={isAtMin && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.decrement}\n          label={stepperButtonLabels.decrement}\n        />\n        <Input {...inputProps} />\n        <NumberInputStepper\n          onClick={increment}\n          icon={Plus}\n          css={{\n            borderLeft: 'none',\n            borderTopLeftRadius: '0px',\n            borderBottomLeftRadius: '0px'\n          }}\n          size={iconSize}\n          disabled={isAtMax || isDisabled}\n          showTooltip={isAtMax && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.increment}\n          label={stepperButtonLabels.increment}\n        />\n      </Flex>\n    )\n  }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","css","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","inputProps","Flex","NumberInputStepper","Minus","Input","Plus"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import*as o from"react";import{styled as t}from"../../stitches.js";import{ActionIcon as p}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";import{Tooltip as e}from"../tooltip/Tooltip.js";const s=t("span",{zIndex:1}),d=t(p,{borderColor:"$tonal400 !important",zIndex:1,"&:hover":{bg:"$tonal50",svg:{color:"$tonal400"}},svg:{color:"$tonal300"},"&:active":{bg:"$tonal100",svg:{color:"$tonal500"}},"&:disabled":{opacity:.3,pointerEvents:"none"}}),b=o.forwardRef((n,r)=>{const{icon:l,disabledTooltipContent:a,showTooltip:i,...c}=n;return o.createElement(e,null,o.createElement(e.Trigger,{asChild:!0},o.createElement(s,{tabIndex:-1},o.createElement(d,{hasTooltip:!1,tabIndex:-1,appearance:"outline",ref:r,...c},o.createElement(m,{is:l})))),i&&o.createElement(e.Content,null,a))});export{b as NumberInputStepper};
+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}),d=t(c,{borderColor:"$tonal400 !important",zIndex:1,height:"100% !important","&:hover":{bg:"$tonal50",svg:{color:"$tonal400"}},svg:{color:"$tonal300"},"&:active":{bg:"$tonal100",svg:{color:"$tonal500"}},"&:disabled":{opacity:.3,pointerEvents:"none"}}),b=e.forwardRef((n,r)=>{const{icon:l,disabledTooltipContent:a,showTooltip:i,...p}=n;return e.createElement(o,null,e.createElement(o.Trigger,{asChild:!0},e.createElement(s,{tabIndex:-1},e.createElement(d,{hasTooltip:!1,tabIndex:-1,appearance:"outline",ref:r,...p},e.createElement(m,{is:l})))),i&&e.createElement(o.Content,null,a))});export{b as NumberInputStepper};
 //# sourceMappingURL=NumberInputStepper.js.map

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

@@ -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: '$tonal400 !important',\n  zIndex: 1,\n  '&:hover': {\n    bg: '$tonal50',\n    svg: {\n      color: '$tonal400'\n    }\n  },\n  svg: {\n    color: '$tonal300'\n  },\n  '&:active': {\n    bg: '$tonal100',\n    svg: {\n      color: '$tonal500'\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,uBACb,OAAQ,EACR,UAAW,CACT,GAAI,WACJ,IAAK,CACH,MAAO,WACT,CACF,EACA,IAAK,CACH,MAAO,WACT,EACA,WAAY,CACV,GAAI,YACJ,IAAK,CACH,MAAO,WACT,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,EAAA,EACtBP,EAAA,cAACL,EAAA,CAAW,SAAU,EACpBK,EAAAA,EAAA,cAACH,EAAA,CACC,WAAY,GACZ,SAAU,GACV,WAAW,UACX,IAAKK,EACJ,GAAGI,CAAAA,EAEJN,EAAA,cAACQ,EAAA,CAAK,GAAIL,CAAM,CAAA,CAClB,CACF,CACF,EACCE,GACCL,EAAA,cAACO,EAAQ,QAAR,KAAiBH,CAAuB,CAE7C,CAEJ,CAAC"}
+{"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: '$tonal400 !important',\n  zIndex: 1,\n  height: '100% !important',\n  '&:hover': {\n    bg: '$tonal50',\n    svg: {\n      color: '$tonal400'\n    }\n  },\n  svg: {\n    color: '$tonal300'\n  },\n  '&:active': {\n    bg: '$tonal100',\n    svg: {\n      color: '$tonal500'\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,uBACb,OAAQ,EACR,OAAQ,kBACR,UAAW,CACT,GAAI,WACJ,IAAK,CACH,MAAO,WACT,CACF,EACA,IAAK,CACH,MAAO,WACT,EACA,WAAY,CACV,GAAI,YACJ,IAAK,CACH,MAAO,WACT,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"}

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

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

package/dist/components/pagination/PaginationItem.js

@@ -1,2 +1,2 @@
-import*as d from"react";import{styled as b}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as m}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{usePagination as g}from"./usePagination.js";const p=b("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:"$grey800",bg:"$base1",position:"relative","&:not(:disabled)":{"&:hover":{color:"$accent10",bg:"$base2"},"&:active":{bg:"$base3",color:"$grey1000"},"&:focus-visible":{...m()}},"&:disabled":{opacity:"0.3",cursor:"not-allowed"},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:"$accent9","&:after":{content:"",position:"absolute",bottom:"$1",left:"50%",transform:"translateX(-50%)",borderRadius:"$round",size:"4px",bg:"$accent9"},"&:not(:disabled)":{"&:hover":{color:"$accent10","&:after":{bg:"$accent10"}},"&:active":{color:"$accent11","&:after":{bg:"$accent11"}}}}}}}),u=({pageNumber:e,css:a})=>{const{currentPage:c,goToPage:i,indicatedPages:n,disabledPages:s,onItemHover:r}=g(),l=n.includes(e),o=s.includes(e),t=c===e;return d.createElement(p,{selected:t,size:"md",onClick:()=>i(e),css:a,indicated:l,disabled:o,"aria-current":t&&"page","aria-disabled":o,onMouseOver:()=>{t||o||r==null||r(e)}},e)};export{u as PaginationItem};
+import*as d from"react";import{styled as b}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as $}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{usePagination as m}from"./usePagination.js";const g=b("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:"$grey800",bg:"$base1",position:"relative","&:not(:disabled)":{"&:hover":{color:"$accent10",bg:"$base2"},"&:active":{bg:"$base3",color:"$grey1000"},"&:focus-visible":{...$()}},"&:disabled":{opacity:"0.3",cursor:"not-allowed"},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:"$accent9","&:after":{content:"",position:"absolute",bottom:"$1",left:"50%",transform:"translateX(-50%)",borderRadius:"$round",size:"4px",bg:"$accent9"},"&:not(:disabled)":{"&:hover":{color:"$accent10","&:after":{bg:"$accent10"}},"&:active":{color:"$accent11","&:after":{bg:"$accent11"}}}}}}}),p=({pageNumber:e,css:a})=>{const{currentPage:c,goToPage:i,indicatedPages:n,disabledPages:s,onItemHover:r}=m(),l=n.includes(e),o=s.includes(e),t=c===e;return d.createElement(g,{selected:t,size:"md",onClick:()=>i(e),css:a,indicated:l,disabled:o,"aria-current":t&&"page","aria-disabled":o,onMouseOver:()=>{t||o||r==null||r(e)}},e)};export{p as PaginationItem};
 //# sourceMappingURL=PaginationItem.js.map

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

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

package/dist/components/password-input/PasswordInput.js

@@ -1,2 +1,2 @@
-import{Eye as l,EyeCrossed as f}from"@atom-learning/icons";import*as e from"react";import{useState as w}from"react";import{ActionIcon as u}from"../action-icon/ActionIcon.js";import{Box as E}from"../box/Box.js";import{Icon as h}from"../icon/Icon.js";import{Input as x}from"../input/Input.js";const r=e.forwardRef(({css:a,hidePasswordText:i="Hide password",showPasswordText:m="Show password",size:t="md",...p},n)=>{const[o,c]=w(!1),d=()=>c(s=>!s);return e.createElement(E,{css:{position:"relative",...a}},e.createElement(x,{...p,size:t,type:o?"text":"password",ref:n,css:{pr:"$sizes$2"}}),e.createElement(u,{appearance:"simple",theme:"neutral",css:{bottom:0,position:"absolute",right:0},label:o?i:m,onClick:d,onMouseDown:s=>s.preventDefault(),size:t},e.createElement(h,{is:o?l:f})))});r.displayName="PasswordInput";export{r 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"../../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),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

@@ -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'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n  hidePasswordText?: string\n  showPasswordText?: string\n}\n\nexport const PasswordInput: React.FC<PasswordInputProps> = 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    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={{ bottom: 0, position: 'absolute', right: 0 }}\n          label={isPasswordVisible ? hidePasswordText : showPasswordText}\n          onClick={togglePasswordVisibility}\n          onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n          size={size}\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","Box","Input","ActionIcon","e","Icon","Eye","EyeCrossed"],"mappings":"mSAgBO,MAAMA,EAA8CC,EAAM,WAC/D,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,EAEtD,OACEX,EAAA,cAACY,EAAA,CAAI,IAAK,CAAE,SAAU,WAAY,GAAGX,CAAI,CAAA,EACvCD,EAAA,cAACa,EAAA,CACE,GAAGR,EACJ,KAAMD,EACN,KAAMG,EAAoB,OAAS,WACnC,IAAKD,EACL,IAAK,CAAE,GAAI,UAAW,EACxB,EACAN,EAAA,cAACc,EAAA,CACC,WAAW,SACX,MAAM,UACN,IAAK,CAAE,OAAQ,EAAG,SAAU,WAAY,MAAO,CAAE,EACjD,MAAOP,EAAoBL,EAAmBC,EAC9C,QAASO,EACT,YAAcK,GAAMA,EAAE,iBACtB,KAAMX,CAAAA,EAENJ,EAAA,cAACgB,EAAA,CAAK,GAAIT,EAAoBU,EAAMC,CAAY,CAAA,CAClD,CACF,CAEJ,CACF,EAEAnB,EAAc,YAAc"}
+{"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.FC<PasswordInputProps> = 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,EAA8CC,EAAM,WAC/D,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,EAEArB,EAAc,YAAc"}

package/dist/components/popover/PopoverContent.js

@@ -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 t from"react";import{POPOVER_Z_INDEX as c}from"../../constants/zIndices.js";import{styled as e}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=e(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=e(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})=>t.createElement(b,{size:m,side:o,sideOffset:a,...r},n&&t.createElement(w,{as:h,css:{position:"absolute",right:"$0",top:"$0"},label:s,size:"md",hasTooltip:!1,theme:"neutral"},t.createElement(z,{is:d})),i,t.createElement(C,{width:16,height:8}));export{u as PopoverContent};
+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};
 //# sourceMappingURL=PopoverContent.js.map

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

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

package/dist/components/radio-button-field/RadioField.js

@@ -1,2 +1,2 @@
-import*as e from"react";import"../field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as r}from"../field-wrapper/InlineFieldWrapper.js";import{RadioButton as m}from"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";const o=({css:t,label:a,value:i,...l})=>e.createElement(r,{css:t,label:a},e.createElement(m,{value:i,...l}));o.displayName="RadioField";export{o as RadioField};
+import*as e from"react";import"../field-wrapper/FieldWrapper.js";import{InlineFieldWrapper as t}from"../field-wrapper/InlineFieldWrapper.js";import{RadioButton as m}from"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";const o=({css:a,label:i,value:l,...r})=>e.createElement(t,{css:a,label:i},e.createElement(m,{value:l,...r}));o.displayName="RadioField";export{o as RadioField};
 //# sourceMappingURL=RadioField.js.map

package/dist/components/radio-card/RadioCardGroup.js

@@ -1,2 +1,2 @@
-import*as d from"@radix-ui/react-radio-group";import*as t from"react";import{Stack as p}from"../stack/Stack.js";import{RadioCard as c}from"./RadioCard.js";const f=({css:e,children:r,size:l,isFullWidth:a,align:o,gap:s="3",justify:m,...n})=>t.createElement(d.Root,{...n},t.createElement(p,{direction:"row",justify:m,gap:s,css:e},t.Children.map(r,i=>t.isValidElement(i)&&(i==null?void 0:i.type)===c?t.cloneElement(i,{size:l,isFullWidth:a,align:o}):i)));export{f as RadioCardGroup};
+import*as d from"@radix-ui/react-radio-group";import*as e from"react";import{Stack as p}from"../stack/Stack.js";import{RadioCard as c}from"./RadioCard.js";const f=({css:t,children:r,size:l,isFullWidth:a,align:o,gap:s="3",justify:m,...n})=>e.createElement(d.Root,{...n},e.createElement(p,{direction:"row",justify:m,gap:s,css:t},e.Children.map(r,i=>e.isValidElement(i)&&(i==null?void 0:i.type)===c?e.cloneElement(i,{size:l,isFullWidth:a,align:o}):i)));export{f as RadioCardGroup};
 //# sourceMappingURL=RadioCardGroup.js.map

package/dist/components/search-input/SearchInput.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Input } from '../../components/input';
 import { CSS } from '../../stitches';
 export declare type SearchInputProps = React.ComponentProps<typeof Input> & {
-    size?: 'sm' | 'md';
+    size?: 'sm' | 'md' | 'lg';
     css?: CSS;
     value?: string;
     defaultValue?: string;

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

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

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

@@ -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 { Box } from '~/components/box/'\nimport { Icon } from '~/components/icon/'\nimport { Input } from '~/components/input/'\nimport { CSS, styled } from '~/stitches'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\n\nexport type SearchInputProps = React.ComponentProps<typeof Input> & {\n  size?: 'sm' | 'md'\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: '$tonal300',\n  position: 'absolute',\n  pointerEvents: 'none',\n  variants: {\n    size: {\n      sm: {\n        top: '$2',\n        right: '$2',\n        size: '$1'\n      },\n      md: {\n        top: 10,\n        right: 10,\n        size: 20\n      }\n    }\n  }\n})\n\nconst StyledSearchInput = styled(Input, {\n  '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, & input[type=\"search\"]::-webkit-search-results-decoration':\n    {\n      display: 'none'\n    }\n})\n\nexport const SearchInput: React.FC<SearchInputProps> = 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    React.useImperativeHandle(ref, () => inputElRef.current as HTMLInputElement)\n\n    const handleClear = () => {\n      const inputEl = inputElRef.current\n      if (!inputEl) return\n\n      // https://stackoverflow.com/a/46012210\n      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n        window.HTMLInputElement.prototype,\n        'value'\n      )?.set\n      nativeInputValueSetter?.call?.(inputEl, '')\n      const ev2 = new Event('input', {\n        bubbles: true\n      })\n      inputEl.dispatchEvent(ev2)\n      inputEl.focus()\n      onValueChange?.('')\n    }\n\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(event)\n\n      const newValue = event.target.value\n      setInnerValue(newValue)\n      onValueChange?.(newValue)\n      setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n    }\n\n    const getIcon = () => {\n      if (activeIcon === INPUT_ICON.SEARCH)\n        return (\n          <StyledIcon\n            is={Search}\n            size={size}\n            css={{ size: size == 'sm' ? '$1' : 20 }}\n          />\n        )\n\n      return (\n        <ActionIcon\n          label={clearText}\n          theme=\"neutral\"\n          size={size}\n          css={{ position: 'absolute', top: '0', right: '$1' }}\n          onClick={handleClear}\n        >\n          <Icon is={Close} />\n        </ActionIcon>\n      )\n    }\n\n    return (\n      <Box css={{ position: 'relative', ...css }}>\n        <StyledSearchInput\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      </Box>\n    )\n  }\n)\n\nSearchInput.displayName = 'SearchInput'\n"],"names":["INPUT_ICON","$","StyledIcon","styled","Icon","StyledSearchInput","Input","SearchInput","React","size","css","value","defaultValue","onValueChange","clearText","onChange","remainingProps","ref","inputElRef","setInputElRef","useCallbackRef","innerValue","setInnerValue","activeIcon","setActiveIcon","handleClear","_a","_b","inputEl","nativeInputValueSetter","ev2","handleOnChange","event","newValue","getIcon","Search","ActionIcon","Close","Box"],"mappings":"oXAoBA,IAAKA,OACHA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFLA,IAAAC,GAAA,CAAA,CAAA,EAKL,MAAMC,EAAaC,EAAOC,EAAM,CAC9B,MAAO,YACP,SAAU,WACV,cAAe,OACf,SAAU,CACR,KAAM,CACJ,GAAI,CACF,IAAK,KACL,MAAO,KACP,KAAM,IACR,EACA,GAAI,CACF,IAAK,GACL,MAAO,GACP,KAAM,EACR,CACF,CACF,CACF,CAAC,EAEKC,EAAoBF,EAAOG,EAAO,CACtC,6JACE,CACE,QAAS,MACX,CACJ,CAAC,EAEYC,EAA0CC,EAAM,WAC3D,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,EAAe,EAC7C,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,EAEVH,EAAM,oBAAoBS,EAAK,IAAMC,EAAW,OAA2B,EAE3E,MAAMO,EAAc,IAAM,CA/E9B,IAAAC,EAAAC,EAgFM,MAAMC,EAAUV,EAAW,QAC3B,GAAI,CAACU,EAAS,OAGd,MAAMC,GAAyBH,EAAA,OAAO,yBACpC,OAAO,iBAAiB,UACxB,OACF,IAH+B,KAAAA,OAAAA,EAG5B,KACHC,EAAAE,GAAA,KAAAA,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,QACRf,GAAA,MAAAA,EAAgB,EAAA,CAClB,EAEMkB,EAAkBC,GAA+C,CACrEjB,GAAA,MAAAA,EAAWiB,CAAAA,EAEX,MAAMC,EAAWD,EAAM,OAAO,MAC9BV,EAAcW,CAAQ,EACtBpB,GAAA,MAAAA,EAAgBoB,GAChBT,EAAcS,EAAW,QAAmB,QAAiB,CAC/D,EAEMC,EAAU,IACVX,IAAe,SAEff,EAAA,cAACN,EAAA,CACC,GAAIiC,EACJ,KAAM1B,EACN,IAAK,CAAE,KAAMA,GAAQ,KAAO,KAAO,EAAG,CAAA,CACxC,EAIFD,EAAA,cAAC4B,EAAA,CACC,MAAOtB,EACP,MAAM,UACN,KAAML,EACN,IAAK,CAAE,SAAU,WAAY,IAAK,IAAK,MAAO,IAAK,EACnD,QAASgB,CAAAA,EAETjB,EAAA,cAACJ,EAAA,CAAK,GAAIiC,CAAAA,CAAO,CACnB,EAIJ,OACE7B,EAAA,cAAC8B,EAAA,CAAI,IAAK,CAAE,SAAU,WAAY,GAAG5B,CAAI,CAAA,EACvCF,EAAA,cAACH,EAAA,CACC,IAAKc,EACL,KAAMV,EACN,KAAK,SACJ,GAAGO,EACJ,MAAOK,EACP,SAAUU,EACV,IAAK,CAAE,GAAItB,IAAS,KAAO,KAAO,IAAK,CAAA,CACzC,EACCyB,EAAQ,CACX,CAEJ,CACF,EAEA3B,EAAY,YAAc"}
+{"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 { Box } from '~/components/box/'\nimport { Icon } from '~/components/icon/'\nimport { Input } from '~/components/input/'\nimport { CSS, styled } from '~/stitches'\nimport { useCallbackRef } from '~/utilities/hooks/useCallbackRef'\nimport { getFieldIconSize } from '~/utilities'\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: '$tonal300',\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 StyledSearchInput = styled(Input, {\n  '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, & input[type=\"search\"]::-webkit-search-results-decoration':\n    {\n      display: 'none'\n    }\n})\n\nexport const SearchInput: React.FC<SearchInputProps> = 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(ref, () => inputElRef.current as HTMLInputElement)\n\n    const handleClear = () => {\n      const inputEl = inputElRef.current\n      if (!inputEl) return\n\n      // https://stackoverflow.com/a/46012210\n      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(\n        window.HTMLInputElement.prototype,\n        'value'\n      )?.set\n      nativeInputValueSetter?.call?.(inputEl, '')\n      const ev2 = new Event('input', {\n        bubbles: true\n      })\n      inputEl.dispatchEvent(ev2)\n      inputEl.focus()\n      onValueChange?.('')\n    }\n\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(event)\n\n      const newValue = event.target.value\n      setInnerValue(newValue)\n      onValueChange?.(newValue)\n      setActiveIcon(newValue ? INPUT_ICON.CLEAR : INPUT_ICON.SEARCH)\n    }\n\n    const getIcon = () => {\n      if (activeIcon === INPUT_ICON.SEARCH)\n        return (\n          <StyledIcon\n            is={Search}\n            size={size}\n            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      <Box css={{ position: 'relative', height: 'max-content', ...css }}>\n        <StyledSearchInput\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      </Box>\n    )\n  }\n)\n\nSearchInput.displayName = 'SearchInput'\n"],"names":["INPUT_ICON","StyledIcon","styled","Icon","StyledSearchInput","Input","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","Box"],"mappings":"snBAqBA,IAAKA,GACHA,IAAAA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAFLA,IAAAA,GAAA,CAAA,CAKL,EAAA,MAAMC,EAAaC,EAAOC,EAAM,CAC9B,MAAO,YACP,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,EAAoBF,EAAOG,EAAO,CACtC,6JACE,CACE,QAAS,MACX,CACJ,CAAC,EAEYC,EAA0CC,EAAM,WAC3D,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,oBAAoBS,EAAK,IAAMC,EAAW,OAA2B,EAE3E,MAAMS,EAAc,IAAM,CApF9B,IAAAC,EAAAC,EAqFM,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,SAEff,EAAA,cAACN,EAAA,CACC,GAAImC,EACJ,KAAM5B,EACN,IAAK,CACH,KAAMA,GAAQ,KAAO,KAAO,GAC5B,IAAK,MACL,UAAW,kBACb,CACF,CAAA,EAIFD,EAAA,cAAC8B,EAAA,CACC,MAAOxB,EACP,MAAM,UACN,KAAMW,EACN,IAAK,CACH,SAAU,WACV,IAAK,MACL,UAAW,mBACX,MAAO,IACT,EACA,QAASE,CAETnB,EAAAA,EAAA,cAACJ,EAAA,CAAK,GAAImC,CAAO,CAAA,CACnB,EAIJ,OACE/B,EAAA,cAACgC,EAAA,CAAI,IAAK,CAAE,SAAU,WAAY,OAAQ,cAAe,GAAG9B,CAAI,CAAA,EAC9DF,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,EAEA7B,EAAY,YAAc"}

package/dist/components/section-message/SectionMessageDescription.js

@@ -1,2 +1,2 @@
-import o from"react";import{Text as s}from"../text/Text.js";const r=({css:e,...t})=>o.createElement(s,{css:{color:"$grey900",...e},size:"sm",...t});export{r as SectionMessageDescription};
+import s from"react";import{Text as t}from"../text/Text.js";const r=({css:e,...o})=>s.createElement(t,{css:{color:"$grey900",...e},size:"sm",...o});export{r as SectionMessageDescription};
 //# sourceMappingURL=SectionMessageDescription.js.map

package/dist/components/section-message/SectionMessageIcon.js

@@ -1,2 +1,2 @@
-import{OkCircle as c,Danger as i,Error as m,Info as e}from"@atom-learning/icons";import a,{useEffect as f}from"react";import{Icon as l}from"../icon/Icon.js";import{useSectionMessageContext as u}from"./SectionMessageContext.js";const p={success:c,warning:i,error:m,neutral:e,info:e},g=({css:t,is:r,...s})=>{const{theme:n,setHasIcon:o}=u();return f(()=>(o(!0),()=>o(!1)),[o]),a.createElement(l,{css:{m:"auto",position:"absolute",left:"$4",top:"$4",color:"currentColor",...t},is:r||p[n],size:"sm",...s})};export{g as SectionMessageIcon};
+import{OkCircle as c,Danger as i,Error as m,Info as e}from"@atom-learning/icons";import a,{useEffect as f}from"react";import{Icon as l}from"../icon/Icon.js";import{useSectionMessageContext as u}from"./SectionMessageContext.js";const p={success:c,warning:i,error:m,neutral:e,info:e},g=({css:r,is:t,...s})=>{const{theme:n,setHasIcon:o}=u();return f(()=>(o(!0),()=>o(!1)),[o]),a.createElement(l,{css:{m:"auto",position:"absolute",left:"$4",top:"$4",color:"currentColor",...r},is:t||p[n],size:"sm",...s})};export{g as SectionMessageIcon};
 //# sourceMappingURL=SectionMessageIcon.js.map

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Override } from '../../utilities/types';
 declare const StyledSelect: import("@stitches/react/types/styled-component").StyledComponent<"select", {
-    size?: "sm" | "md" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
     state?: "error" | undefined;
 }, {
     sm: string;

package/dist/components/select/Select.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select', {\n  appearance: 'none',\n  backgroundColor: 'white',\n  backgroundImage: encodeBackgroundIcon(theme.colors.tonal300.value, 'chevron'),\n  backgroundRepeat: 'no-repeat, repeat',\n  border: '1px solid $tonal300',\n  borderRadius: '$0',\n  color: '$tonal600',\n  display: 'block',\n  fontFamily: '$body',\n  fontWeight: 400,\n  lineHeight: 1.4,\n  transition: 'all 75ms ease-out',\n  width: '100%',\n  '&:hover': {\n    cursor: 'pointer'\n  },\n  '&:focus': {\n    borderColor: '$primary',\n    outline: 'none'\n  },\n  '&::-ms-expand': {\n    display: 'none'\n  },\n  '&[disabled], > option[disabled]': {\n    backgroundColor: '$tonal100',\n    color: '$tonal400',\n    cursor: 'not-allowed'\n  },\n  variants: {\n    size: {\n      sm: {\n        backgroundPosition: 'right $space$2 top 50%, 0 0',\n        backgroundSize: '18px auto, 100%',\n        fontSize: '$sm',\n        height: '$3',\n        pl: '$2',\n        pr: '$5'\n      },\n      md: {\n        backgroundPosition: 'right $space$3 top 50%, 0 0',\n        backgroundSize: '20px auto, 100%',\n        fontSize: '$md',\n        height: '$4',\n        pl: '$3',\n        pr: '$6'\n      }\n    },\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    as?: never\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select: React.FC<SelectProps> = React.forwardRef(\n  ({ placeholder, children, size = 'md', ...remainingProps }, ref) => {\n    const props = { size, ref, ...remainingProps }\n\n    if (\n      [remainingProps.value, remainingProps.defaultValue].every(\n        (value) => value === undefined\n      )\n    ) {\n      props.defaultValue = ''\n    }\n\n    return (\n      <StyledSelect {...props}>\n        {placeholder && (\n          <option disabled hidden value=\"\">\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n    )\n  }\n)\n\nSelect.displayName = 'Select'\n"],"names":["StyledSelect","styled","encodeBackgroundIcon","theme","Select","React","placeholder","children","size","remainingProps","ref","props","value"],"mappings":"6UAMA,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,OACZ,gBAAiB,QACjB,gBAAiBC,EAAqBC,EAAM,OAAO,SAAS,MAAO,SAAS,EAC5E,iBAAkB,oBAClB,OAAQ,sBACR,aAAc,KACd,MAAO,YACP,QAAS,QACT,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,WAAY,oBACZ,MAAO,OACP,UAAW,CACT,OAAQ,SACV,EACA,UAAW,CACT,YAAa,WACb,QAAS,MACX,EACA,gBAAiB,CACf,QAAS,MACX,EACA,kCAAmC,CACjC,gBAAiB,YACjB,MAAO,YACP,OAAQ,aACV,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAgBYC,EAAgCC,EAAM,WACjD,CAAC,CAAE,YAAAC,EAAa,SAAAC,EAAU,KAAAC,EAAO,QAASC,CAAe,EAAGC,IAAQ,CAClE,MAAMC,EAAQ,CAAE,KAAAH,EAAM,IAAAE,EAAK,GAAGD,CAAe,EAE7C,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,IAIrBN,EAAA,cAACL,EAAA,CAAc,GAAGW,CACfL,EAAAA,GACCD,EAAA,cAAC,SAAA,CAAO,SAAQ,GAAC,OAAM,GAAC,MAAM,EAAA,EAC3BC,CACH,EAEDC,CACH,CAEJ,CACF,EAEAH,EAAO,YAAc"}
+{"version":3,"file":"Select.js","sources":["../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, theme } from '~/stitches'\nimport { encodeBackgroundIcon } from '~/utilities'\nimport { Override } from '~/utilities/types'\n\nconst StyledSelect = styled('select', {\n  appearance: 'none',\n  backgroundColor: 'white',\n  backgroundImage: encodeBackgroundIcon(theme.colors.tonal300.value, 'chevron'),\n  backgroundRepeat: 'no-repeat, repeat',\n  border: '1px solid $tonal300',\n  borderRadius: '$0',\n  color: '$tonal600',\n  display: 'block',\n  fontFamily: '$body',\n  fontWeight: 400,\n  lineHeight: 1.4,\n  transition: 'all 75ms ease-out',\n  width: '100%',\n  '&:hover': {\n    cursor: 'pointer'\n  },\n  '&:focus': {\n    borderColor: '$primary',\n    outline: 'none'\n  },\n  '&::-ms-expand': {\n    display: 'none'\n  },\n  '&[disabled], > option[disabled]': {\n    backgroundColor: '$tonal100',\n    color: '$tonal400',\n    cursor: 'not-allowed'\n  },\n  variants: {\n    size: {\n      sm: {\n        backgroundPosition: 'right $space$2 top 50%, 0 0',\n        backgroundSize: '18px auto, 100%',\n        fontSize: '$sm',\n        height: '$3',\n        pl: '$2',\n        pr: '$5'\n      },\n      md: {\n        backgroundPosition: 'right $space$3 top 50%, 0 0',\n        backgroundSize: '20px auto, 100%',\n        fontSize: '$md',\n        height: '$4',\n        pl: '$3',\n        pr: '$6'\n      },\n      lg: {\n        backgroundPosition: 'right $space$3 top 50%, 0 0',\n        backgroundSize: '20px auto, 100%',\n        fontSize: '$md',\n        height: '$5',\n        pl: '$3',\n        pr: '$6'\n      }\n    },\n    state: {\n      error: {\n        border: '1px solid $danger'\n      }\n    }\n  }\n})\n\nexport type SelectProps = Override<\n  React.ComponentProps<typeof StyledSelect>,\n  {\n    as?: never\n    placeholder?: string\n  }\n  // TODO: figure out why uncommenting this causes TS errors in\n  // component declaration\n  // & (\n  //   | { id: string; 'aria-label'?: string }\n  //   | { 'aria-label': string; id?: string }\n  // )\n>\n\nexport const Select: React.FC<SelectProps> = React.forwardRef(\n  ({ placeholder, children, size = 'md', ...remainingProps }, ref) => {\n    const props = { size, ref, ...remainingProps }\n\n    if (\n      [remainingProps.value, remainingProps.defaultValue].every(\n        (value) => value === undefined\n      )\n    ) {\n      props.defaultValue = ''\n    }\n\n    return (\n      <StyledSelect {...props}>\n        {placeholder && (\n          <option disabled hidden value=\"\">\n            {placeholder}\n          </option>\n        )}\n        {children}\n      </StyledSelect>\n    )\n  }\n)\n\nSelect.displayName = 'Select'\n"],"names":["StyledSelect","styled","encodeBackgroundIcon","theme","Select","React","placeholder","children","size","remainingProps","ref","props","value"],"mappings":"6UAMA,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,OACZ,gBAAiB,QACjB,gBAAiBC,EAAqBC,EAAM,OAAO,SAAS,MAAO,SAAS,EAC5E,iBAAkB,oBAClB,OAAQ,sBACR,aAAc,KACd,MAAO,YACP,QAAS,QACT,WAAY,QACZ,WAAY,IACZ,WAAY,IACZ,WAAY,oBACZ,MAAO,OACP,UAAW,CACT,OAAQ,SACV,EACA,UAAW,CACT,YAAa,WACb,QAAS,MACX,EACA,gBAAiB,CACf,QAAS,MACX,EACA,kCAAmC,CACjC,gBAAiB,YACjB,MAAO,YACP,OAAQ,aACV,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,EACA,GAAI,CACF,mBAAoB,8BACpB,eAAgB,kBAChB,SAAU,MACV,OAAQ,KACR,GAAI,KACJ,GAAI,IACN,CACF,EACA,MAAO,CACL,MAAO,CACL,OAAQ,mBACV,CACF,CACF,CACF,CAAC,EAgBYC,EAAgCC,EAAM,WACjD,CAAC,CAAE,YAAAC,EAAa,SAAAC,EAAU,KAAAC,EAAO,QAASC,CAAe,EAAGC,IAAQ,CAClE,MAAMC,EAAQ,CAAE,KAAAH,EAAM,IAAAE,EAAK,GAAGD,CAAe,EAE7C,MACE,CAACA,EAAe,MAAOA,EAAe,YAAY,EAAE,MACjDG,GAAUA,IAAU,MACvB,IAEAD,EAAM,aAAe,IAIrBN,EAAA,cAACL,EAAA,CAAc,GAAGW,GACfL,GACCD,EAAA,cAAC,SAAA,CAAO,SAAQ,GAAC,OAAM,GAAC,MAAM,IAC3BC,CACH,EAEDC,CACH,CAEJ,CACF,EAEAH,EAAO,YAAc"}

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

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

package/dist/components/sortable/SortableHandle.js

@@ -1,2 +1,2 @@
-import{useSortable as n}from"@dnd-kit/sortable";import*as b from"react";import{Handle as g}from"./Handle.js";const t=({targetId:a,disabled:e=!1,label:r="drag handle",...l})=>{const{attributes:o,listeners:i,isDragging:s,setActivatorNodeRef:d}=n({id:a});return b.createElement(g,{ref:d,isDragging:s,label:r,disabled:e,...e?{}:i,...e?{}:o,...l})};t.displayName="SortableHandle";export{t as SortableHandle};
+import{useSortable as n}from"@dnd-kit/sortable";import*as b from"react";import{Handle as g}from"./Handle.js";const a=({targetId:r,disabled:e=!1,label:t="drag handle",...l})=>{const{attributes:o,listeners:i,isDragging:s,setActivatorNodeRef:d}=n({id:r});return b.createElement(g,{ref:d,isDragging:s,label:t,disabled:e,...e?{}:i,...e?{}:o,...l})};a.displayName="SortableHandle";export{a as SortableHandle};
 //# sourceMappingURL=SortableHandle.js.map

package/dist/components/stepper/StepperStepBack.js

@@ -1,2 +1,2 @@
-import*as i from"react";import{Button as n}from"../button/Button.js";import{useStepper as a}from"./stepper-context/StepperContext.js";const l=({label:e,children:o,...r})=>{const{activeStep:t,goToPreviousStep:p}=a();return i.createElement(n,{size:"sm",appearance:"outline",...r,disabled:t===0,onClick:p},o||(e==null?void 0:e(t)))};export{l as StepperStepBack};
+import*as i from"react";import{Button as n}from"../button/Button.js";import{useStepper as a}from"./stepper-context/StepperContext.js";const l=({label:e,children:t,...r})=>{const{activeStep:o,goToPreviousStep:p}=a();return i.createElement(n,{size:"sm",appearance:"outline",...r,disabled:o===0,onClick:p},t||(e==null?void 0:e(o)))};export{l as StepperStepBack};
 //# sourceMappingURL=StepperStepBack.js.map

package/dist/components/stepper/StepperStepForward.js

@@ -1,2 +1,2 @@
-import*as n from"react";import{Button as p}from"../button/Button.js";import{useStepper as m}from"./stepper-context/StepperContext.js";const c=({label:e,children:r,onClick:o,...i})=>{const{goToNextStep:t,activeStep:l}=m();return n.createElement(p,{size:"sm",...i,onClick:()=>{if(o)return o(t);t==null||t()},css:{ml:"auto"}},r||(e==null?void 0:e(l)))};export{c as StepperStepForward};
+import*as n from"react";import{Button as p}from"../button/Button.js";import{useStepper as m}from"./stepper-context/StepperContext.js";const c=({label:t,children:r,onClick:o,...i})=>{const{goToNextStep:e,activeStep:l}=m();return n.createElement(p,{size:"sm",...i,onClick:()=>{if(o)return o(e);e==null||e()},css:{ml:"auto"}},r||(t==null?void 0:t(l)))};export{c as StepperStepForward};
 //# sourceMappingURL=StepperStepForward.js.map

package/dist/components/table/TableHeader.js

@@ -1,2 +1,2 @@
-import l from"react";import{styled as o}from"../../stitches.js";import{TableHeaderCell as e}from"./TableHeaderCell.js";const r={PRIMARY:"primary",PRIMARY_DARK:"primaryDark",LIGHT:"light"},i=o("thead",{variants:{theme:{[r.PRIMARY]:{[`${e}`]:{bg:"$primary"}},[r.PRIMARY_DARK]:{[`${e}`]:{bg:"$primaryDark"}},[r.LIGHT]:{[`${e}`]:{bg:"$tonal50",color:"$tonal600"}}}}}),a=({theme:t="primaryDark",...m})=>l.createElement(i,{theme:t,...m});a.displayName="TableHeader";export{r as TABLE_HEADER_THEMES,a as TableHeader};
+import l from"react";import{styled as o}from"../../stitches.js";import{TableHeaderCell as r}from"./TableHeaderCell.js";const e={PRIMARY:"primary",PRIMARY_DARK:"primaryDark",LIGHT:"light"},i=o("thead",{variants:{theme:{[e.PRIMARY]:{[`${r}`]:{bg:"$primary"}},[e.PRIMARY_DARK]:{[`${r}`]:{bg:"$primaryDark"}},[e.LIGHT]:{[`${r}`]:{bg:"$tonal50",color:"$tonal600"}}}}}),a=({theme:t="primaryDark",...m})=>l.createElement(i,{theme:t,...m});a.displayName="TableHeader";export{e as TABLE_HEADER_THEMES,a as TableHeader};
 //# sourceMappingURL=TableHeader.js.map

package/dist/components/table/TableRow.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as l}from"../../stitches.js";const t=l("tr",{bg:"unset"}),o=e.forwardRef((r,a)=>e.createElement(t,{...r,ref:a}));o.displayName="TableRow";export{t as StyledRow,o as TableRow};
+import*as e from"react";import{styled as l}from"../../stitches.js";const o=l("tr",{bg:"unset"}),r=e.forwardRef((t,a)=>e.createElement(o,{...t,ref:a}));r.displayName="TableRow";export{o as StyledRow,r as TableRow};
 //# sourceMappingURL=TableRow.js.map

package/dist/components/tabs/Tabs.js

@@ -1,2 +1,2 @@
-import{Root as i}from"@radix-ui/react-tabs";import*as e from"react";import{styled as m}from"../../stitches.js";import{TabsContent as s}from"./TabsContent.js";import{TabsTrigger as a}from"./TabsTrigger.js";import{TabsTriggerList as g}from"./TabsTriggerList.js";const T=m(i,{width:"100%"}),r=({children:t,...o})=>e.createElement(T,{...o},t);r.TriggerList=g,r.Trigger=a,r.Content=s,r.displayName="Tabs";export{r as Tabs};
+import{Root as e}from"@radix-ui/react-tabs";import*as i from"react";import{styled as m}from"../../stitches.js";import{TabsContent as s}from"./TabsContent.js";import{TabsTrigger as a}from"./TabsTrigger.js";import{TabsTriggerList as g}from"./TabsTriggerList.js";const T=m(e,{width:"100%"}),r=({children:t,...o})=>i.createElement(T,{...o},t);r.TriggerList=g,r.Trigger=a,r.Content=s,r.displayName="Tabs";export{r as Tabs};
 //# sourceMappingURL=Tabs.js.map

package/dist/components/tabs/TabsTrigger.js

@@ -1,2 +1,2 @@
-import{Trigger as c}from"@radix-ui/react-tabs";import*as e from"react";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as n}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{Text as l}from"../text/Text.js";const o=t("div",{position:"absolute",inset:0,height:"calc(100% + 2px)",opacity:0,bg:"$interactive1"}),s=t(c,{background:"none",border:"none",cursor:"pointer",flexShrink:0,p:"$4",userSelect:"none",borderBottom:"2px solid transparent",position:"relative",'&[data-state="active"]':{color:"$interactive1",fontWeight:600,letterSpacing:"-0.005em",borderColor:"currentColor"},"&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{"&:hover, &:focus-visible":{color:"$interactive2",[`& ${o}`]:{opacity:.07}},"&:active":{color:"$interactive3"},"&:focus-visible":{...n()}}}),r=({children:i,...a})=>e.createElement(s,{...a},e.createElement(l,{size:"sm",as:"span"},i),e.createElement(o,null));r.displayName="TabsTrigger";export{r as TabsTrigger};
+import{Trigger as c}from"@radix-ui/react-tabs";import*as e from"react";import{styled as o}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as n}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{Text as l}from"../text/Text.js";const t=o("div",{position:"absolute",inset:0,height:"calc(100% + 2px)",opacity:0,bg:"$interactive1"}),s=o(c,{background:"none",border:"none",cursor:"pointer",flexShrink:0,p:"$4",userSelect:"none",borderBottom:"2px solid transparent",position:"relative",'&[data-state="active"]':{color:"$interactive1",fontWeight:600,letterSpacing:"-0.005em",borderColor:"currentColor"},"&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{"&:hover, &:focus-visible":{color:"$interactive2",[`& ${t}`]:{opacity:.07}},"&:active":{color:"$interactive3"},"&:focus-visible":{...n()}}}),r=({children:i,...a})=>e.createElement(s,{...a},e.createElement(l,{size:"sm",as:"span"},i),e.createElement(t,null));r.displayName="TabsTrigger";export{r as TabsTrigger};
 //# sourceMappingURL=TabsTrigger.js.map

package/dist/components/text/Text.js

@@ -1,2 +1,2 @@
-import*as n from"react";import{styled as m}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{capsize as e}from"../../utilities/style/capsize.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const t={size:{xs:{fontSize:"$xs",lineHeight:1.6,...e(.4364)},sm:{fontSize:"$sm",lineHeight:1.53,...e(.4056)},md:{fontSize:"$md",lineHeight:1.5,...e(.3864)},lg:{fontSize:"$lg",lineHeight:1.52,...e(.3983)},xl:{fontSize:"$xl",lineHeight:1.42,...e(.3506)}},noCapsize:{true:{"&::before, &::after":{display:"none !important"}}}},f=({size:i,noCapsize:o})=>({...t.size[i],...t.noCapsize[`${o}`]}),r=m("p",{fontFamily:"$body",fontWeight:400,margin:0,"& > &":{"&:before, &:after":{display:"none"}},variants:t}),a=n.forwardRef(({size:i="md",...o},s)=>n.createElement(r,{size:i,...o,ref:s}));a.displayName="Text";export{r as StyledText,a as Text,f as getTextVariant,t as textVariants};
+import*as n from"react";import{styled as m}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{capsize as e}from"../../utilities/style/capsize.js";import"color2k";import"../../utilities/style/keyframe-animations.js";const i={size:{xs:{fontSize:"$xs",lineHeight:1.6,...e(.4364)},sm:{fontSize:"$sm",lineHeight:1.53,...e(.4056)},md:{fontSize:"$md",lineHeight:1.5,...e(.3864)},lg:{fontSize:"$lg",lineHeight:1.52,...e(.3983)},xl:{fontSize:"$xl",lineHeight:1.42,...e(.3506)}},noCapsize:{true:{"&::before, &::after":{display:"none !important"}}}},f=({size:t,noCapsize:o})=>({...i.size[t],...i.noCapsize[`${o}`]}),r=m("p",{fontFamily:"$body",fontWeight:400,margin:0,"& > &":{"&:before, &:after":{display:"none"}},variants:i}),a=n.forwardRef(({size:t="md",...o},s)=>n.createElement(r,{size:t,...o,ref:s}));a.displayName="Text";export{r as StyledText,a as Text,f as getTextVariant,i as textVariants};
 //# sourceMappingURL=Text.js.map

package/dist/components/tile-toggle-group/TileToggleGroupItem.js

@@ -1,2 +1,2 @@
-import*as r from"@radix-ui/react-toggle-group";import*as t from"react";import{TileInteractive as a}from"../tile-interactive/TileInteractive.js";import{styled as i}from"../../stitches.js";const n=i(a,{"&:not([disabled])":{'&[data-state="on"]':{"&:hover":{bg:"$interactive2"},"&:active":{bg:"$interactive3"}}},'&[data-state="on"]':{bg:"$interactive1",borderColor:"$accent8","&::before":{content:"",position:"absolute",inset:-1,boxShadow:"inset $colors$accent8 0px 0px 0px 2px",borderRadius:"inherit",zIndex:1}}}),c=({children:e,...o})=>t.createElement(r.Item,{...o,asChild:!0},t.createElement(n,{asWorkaround:"button"},e));export{c as TileToggleGroupItem};
+import*as r from"@radix-ui/react-toggle-group";import*as e from"react";import{TileInteractive as a}from"../tile-interactive/TileInteractive.js";import{styled as i}from"../../stitches.js";const n=i(a,{"&:not([disabled])":{'&[data-state="on"]':{"&:hover":{bg:"$interactive2"},"&:active":{bg:"$interactive3"}}},'&[data-state="on"]':{bg:"$interactive1",borderColor:"$accent8","&::before":{content:"",position:"absolute",inset:-1,boxShadow:"inset $colors$accent8 0px 0px 0px 2px",borderRadius:"inherit",zIndex:1}}}),c=({children:t,...o})=>e.createElement(r.Item,{...o,asChild:!0},e.createElement(n,{asWorkaround:"button"},t));export{c as TileToggleGroupItem};
 //# sourceMappingURL=TileToggleGroupItem.js.map

package/dist/components/toast/Toast.js

@@ -1,2 +1,2 @@
-import{Error as g,Close as h}from"@atom-learning/icons";import*as t from"react";import{toast as v}from"react-hot-toast";import{keyframes as a,styled as i}from"../../stitches.js";import{ActionIcon as y}from"../action-icon/ActionIcon.js";import{Icon as s}from"../icon/Icon.js";import{Loader as $}from"../loader/Loader.js";import{Text as w}from"../text/Text.js";const n=400,x=a({"0%":{transform:"translate3d(0,-100%,0)",opacity:0},"100%":{transform:"translate3d(0,0,0)",opacity:1}}),E=a({"0%":{transform:"translate3d(0,0,0)",opacity:1},"100%":{transform:"translate3d(0,-100%,0)",opacity:0}}),k=i("div",{position:"absolute",width:"100%",variants:{visible:{true:{"@allowMotion":{animation:`${x} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}},false:{opacity:0,"@allowMotion":{animation:`${E} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}}}}}),I=i("div",{pointerEvents:"auto",alignItems:"center",borderRadius:"$0",boxShadow:"$1",boxSizing:"border-box",color:"white",display:"flex",minHeight:"$5",pl:"$4",position:"relative",pr:"$6",py:"$4",transition:"background-color 50ms ease-out",width:"100%","@sm":{width:n},"@allowMotion":{transition:"background-color 50ms ease-out, transform 150ms ease-out"},variants:{status:{blank:{bg:"$primary"},error:{bg:"$danger"},loading:{bg:"$primary"},success:{bg:"$success"}}}}),T=t.memo(({ariaLive:l,height:m,id:e,message:c,role:p,type:o="blank",visible:d,calculateOffset:u,updateHeight:b})=>{const f=u(e,{reverseOrder:!0,margin:8});return t.createElement(k,{visible:d},t.createElement(I,{ref:r=>{r&&m===void 0&&b(e,r.getBoundingClientRect().height)},status:o,role:p,"aria-live":l,style:{transform:`translateY(${f}px)`}},o==="error"&&t.createElement(s,{size:"sm",css:{mr:"$3",flex:"0 0 auto"},is:g}),t.createElement(w,null,c),o==="loading"?t.createElement($,{css:{flex:"0 0 auto",ml:"auto"}}):t.createElement(y,{css:{position:"absolute",top:"$2",right:"$2",color:"white","&:hover,&:focus":{color:"white",opacity:.5}},label:"Close alert",onClick:()=>v.dismiss(e)},t.createElement(s,{is:h}))))});export{n as TOAST_WIDTH,T as Toast};
+import{Error as g,Close as $}from"@atom-learning/icons";import*as e from"react";import{toast as h}from"react-hot-toast";import{keyframes as a,styled as i}from"../../stitches.js";import{ActionIcon as v}from"../action-icon/ActionIcon.js";import{Icon as s}from"../icon/Icon.js";import{Loader as y}from"../loader/Loader.js";import{Text as w}from"../text/Text.js";const n=400,x=a({"0%":{transform:"translate3d(0,-100%,0)",opacity:0},"100%":{transform:"translate3d(0,0,0)",opacity:1}}),E=a({"0%":{transform:"translate3d(0,0,0)",opacity:1},"100%":{transform:"translate3d(0,-100%,0)",opacity:0}}),k=i("div",{position:"absolute",width:"100%",variants:{visible:{true:{"@allowMotion":{animation:`${x} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}},false:{opacity:0,"@allowMotion":{animation:`${E} 250ms cubic-bezier(0.22, 1, 0.36, 1)`}}}}}),I=i("div",{pointerEvents:"auto",alignItems:"center",borderRadius:"$0",boxShadow:"$1",boxSizing:"border-box",color:"white",display:"flex",minHeight:"$5",pl:"$4",position:"relative",pr:"$6",py:"$4",transition:"background-color 50ms ease-out",width:"100%","@sm":{width:n},"@allowMotion":{transition:"background-color 50ms ease-out, transform 150ms ease-out"},variants:{status:{blank:{bg:"$primary"},error:{bg:"$danger"},loading:{bg:"$primary"},success:{bg:"$success"}}}}),T=e.memo(({ariaLive:l,height:m,id:t,message:c,role:p,type:o="blank",visible:d,calculateOffset:u,updateHeight:b})=>{const f=u(t,{reverseOrder:!0,margin:8});return e.createElement(k,{visible:d},e.createElement(I,{ref:r=>{r&&m===void 0&&b(t,r.getBoundingClientRect().height)},status:o,role:p,"aria-live":l,style:{transform:`translateY(${f}px)`}},o==="error"&&e.createElement(s,{size:"sm",css:{mr:"$3",flex:"0 0 auto"},is:g}),e.createElement(w,null,c),o==="loading"?e.createElement(y,{css:{flex:"0 0 auto",ml:"auto"}}):e.createElement(v,{css:{position:"absolute",top:"$2",right:"$2",color:"white","&:hover,&:focus":{color:"white",opacity:.5}},label:"Close alert",onClick:()=>h.dismiss(t)},e.createElement(s,{is:$}))))});export{n as TOAST_WIDTH,T as Toast};
 //# sourceMappingURL=Toast.js.map

package/dist/components/toast/ToastProvider.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{useToaster as p}from"react-hot-toast";import{default as P}from"react-hot-toast";import{styled as c}from"../../stitches.js";import{TOAST_WIDTH as d,Toast as f}from"./Toast.js";import{MAX_Z_INDEX as u}from"../../constants/zIndices.js";const T=c("div",{left:"$2",position:"fixed",top:"$2",right:"$2",zIndex:u,"@sm":{top:"$3",right:"auto",left:`calc(50% - ${d/2}px)`}}),o=({children:a})=>{const{toasts:r,handlers:s}=p(),{startPause:i,endPause:m,calculateOffset:n,updateHeight:l}=s;return t.createElement(t.Fragment,null,t.createElement(T,{onMouseEnter:i,onMouseLeave:m},r.map(e=>t.createElement(f,{key:e.id,calculateOffset:n,updateHeight:l,...e}))),a)};o.displayName="ToastProvider";export{o as ToastProvider,P as toast};
+import*as e from"react";import{useToaster as p}from"react-hot-toast";import{default as P}from"react-hot-toast";import{styled as c}from"../../stitches.js";import{TOAST_WIDTH as d,Toast as f}from"./Toast.js";import{MAX_Z_INDEX as u}from"../../constants/zIndices.js";const T=c("div",{left:"$2",position:"fixed",top:"$2",right:"$2",zIndex:u,"@sm":{top:"$3",right:"auto",left:`calc(50% - ${d/2}px)`}}),o=({children:a})=>{const{toasts:r,handlers:s}=p(),{startPause:i,endPause:m,calculateOffset:n,updateHeight:l}=s;return e.createElement(e.Fragment,null,e.createElement(T,{onMouseEnter:i,onMouseLeave:m},r.map(t=>e.createElement(f,{key:t.id,calculateOffset:n,updateHeight:l,...t}))),a)};o.displayName="ToastProvider";export{o as ToastProvider,P as toast};
 //# sourceMappingURL=ToastProvider.js.map