@atom-learning/components 6.0.0-beta.31 → 6.0.0-beta.33

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

@@ -10,6 +10,7 @@ export interface NumberInputProps {
     readonly?: boolean;
     size?: 'sm' | 'md' | 'lg';
     appearance?: 'standard' | 'modern';
+    emphasis?: 'bold';
     onValueChange?: (value: number) => void;
     stepperButtonLabels?: {
         increment?: string;

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

@@ -1,2 +1,2 @@
-import{Minus as H,Plus as K}from"@atom-learning/icons";import L from"clsx";import*as n from"react";import{styled as V}from"../../styled.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{getFieldIconSize as _}from"../../utilities/style/get-icon-size.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{Flex as B}from"../flex/Flex.js";import{Input as O}from"../input/Input.js";import{NumberInputStepper as A}from"./NumberInputStepper.js";const P=V(B,{base:[],variants:{appearance:{standard:[],modern:["gap-px"]}}}),I=n.forwardRef(({value:u,defaultValue:x=0,onValueChange:N,min:r=0,max:o=Number.MAX_SAFE_INTEGER,step:c=1,disabled:i=!1,readonly:m=!1,size:w="md",stepperButtonLabels:M,disabledTooltipContent:T,className:z,appearance:d="standard",...D},R)=>{const[t,E]=n.useState(u||x);n.useEffect(()=>{typeof u<"u"&&E(u)},[u]);const s=n.useRef(null);n.useImperativeHandle(R,()=>s.current);const y=n.useMemo(()=>_(w),[w]),g={increment:"increment",decrement:"decrement",...M},k={decrement:`Cannot enter values below ${r}`,increment:`Cannot enter values above ${o}`,...T},p=t>=o,b=t<=r,f=n.useCallback(e=>Math.min(Math.max(e,r),o),[o,r]),a=n.useCallback(e=>{N==null||N(e),E(e)},[N]),S=n.useCallback(e=>{const l=Number(e.target.value.replace(/\D/g,""));a(l)},[a]),v=n.useCallback(()=>{var e;if(p||m)return;(e=s==null?void 0:s.current)==null||e.focus();const l=Number(t)+c;a(f(l))},[f,p,m,c,a,t]),C=n.useCallback(()=>{var e;if(b||m)return;(e=s==null?void 0:s.current)==null||e.focus();const l=Number(t)-c;a(f(l))},[f,b,m,r,c,a,t]),F=n.useCallback(e=>{if(e.nativeEvent.isComposing)return;const l=e.key,h={ArrowUp:v,ArrowRight:v,ArrowDown:C,ArrowLeft:C,Home:()=>a(r),End:()=>a(o)}[l];h&&(e.preventDefault(),h(e))},[v,C,a,r,o]),G={type:"number",value:t,...D,onChange:S,onKeyDown:F,size:w,appearance:d,className:L("rounded-none","w-16","disabled:opacity-30","disabled:pointer-events-none"),ref:s,readOnly:m,disabled:i,"aria-valuemin":r,"aria-valuemax":o,"aria-valuenow":t,role:"spinbutton"};return n.createElement(P,{appearance:d,className:z},n.createElement(A,{onClick:C,icon:H,size:y,fieldAppearance:d,disabled:b||i,showTooltip:b&&!i,disabledTooltipContent:k.decrement,label:g.decrement,className:"border-r-none rounded-r-none"}),n.createElement(O,{...G}),n.createElement(A,{onClick:v,icon:K,size:y,fieldAppearance:d,disabled:p||i,showTooltip:p&&!i,disabledTooltipContent:k.increment,label:g.increment,className:"border-l-none rounded-l-none"}))});I.displayName="NumberInput";export{I as NumberInput};
+import{Minus as X,Plus as G}from"@atom-learning/icons";import y from"clsx";import*as a from"react";import{styled as O}from"../../styled.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{getFieldIconSize as P}from"../../utilities/style/get-icon-size.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{Flex as U}from"../flex/Flex.js";import{Input as j}from"../input/Input.js";import{NumberInputStepper as _}from"./NumberInputStepper.js";const q=O(U,{base:[],variants:{appearance:{standard:[],modern:["gap-px"]},emphasis:{bold:["gap-0"]}}}),T=a.forwardRef(({value:p,defaultValue:z=0,onValueChange:w,min:r=0,max:o=Number.MAX_SAFE_INTEGER,step:c=1,disabled:d=!1,readonly:u=!1,size:N="md",stepperButtonLabels:M,disabledTooltipContent:D,className:F,appearance:m="standard",emphasis:l,...R},S)=>{const[n,E]=a.useState(p||z);a.useEffect(()=>{typeof p<"u"&&E(p)},[p]);const s=a.useRef(null);a.useImperativeHandle(S,()=>s.current);const g=a.useMemo(()=>P(N),[N]),k={increment:"increment",decrement:"decrement",...M},x={decrement:`Cannot enter values below ${r}`,increment:`Cannot enter values above ${o}`,...D},b=n>=o,f=n<=r,v=a.useCallback(e=>Math.min(Math.max(e,r),o),[o,r]),t=a.useCallback(e=>{w==null||w(e),E(e)},[w]),V=a.useCallback(e=>{const i=Number(e.target.value.replace(/\D/g,""));t(i)},[t]),h=a.useCallback(()=>{var e;if(b||u)return;(e=s==null?void 0:s.current)==null||e.focus();const i=Number(n)+c;t(v(i))},[v,b,u,c,t,n]),C=a.useCallback(()=>{var e;if(f||u)return;(e=s==null?void 0:s.current)==null||e.focus();const i=Number(n)-c;t(v(i))},[v,f,u,r,c,t,n]),$=a.useCallback(e=>{if(e.nativeEvent.isComposing)return;const i=e.key,I={ArrowUp:h,ArrowRight:h,ArrowDown:C,ArrowLeft:C,Home:()=>t(r),End:()=>t(o)}[i];I&&(e.preventDefault(),I(e))},[h,C,t,r,o]),A=n<r||n>o,{state:B,"aria-invalid":H,...K}=R,L={type:"number",value:n,...K,onChange:V,onKeyDown:$,size:N,appearance:m,state:B||(A?"error":void 0),"aria-invalid":H||A||void 0,className:y("rounded-none","w-16","[&_>_input]:text-center","disabled:opacity-30","disabled:pointer-events-none",l==="bold"&&["rounded-1","[&_>_input[aria-invalid=true]]:text-danger","focus-within:[&_>_input]:text-grey-1000"],l==="bold"&&m==="standard"&&["border-none","[&:has([aria-invalid=true])]:border-2","[&:has([aria-invalid=true])]:border-danger","focus-within:border-2","focus-within:border-blue-800"]),ref:s,readOnly:u,disabled:d,"aria-valuemin":r,"aria-valuemax":o,"aria-valuenow":n,role:"spinbutton"};return a.createElement(q,{appearance:m,emphasis:l,className:F},a.createElement(_,{onClick:C,icon:X,className:y(l!=="bold"&&"border-r-none rounded-r-none"),size:g,fieldAppearance:m,emphasis:l,disabled:f||d,showTooltip:f&&!d,disabledTooltipContent:x.decrement,label:k.decrement}),a.createElement(j,{...L}),a.createElement(_,{onClick:h,icon:G,className:y(l!=="bold"&&"border-l-none rounded-l-none"),size:g,fieldAppearance:m,emphasis:l,disabled:b||d,showTooltip:b&&!d,disabledTooltipContent:x.increment,label:k.increment}))});T.displayName="NumberInput";export{T 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 clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\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  appearance?: 'standard' | 'modern'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  className?: string\n}\n\nconst NumberInputContainer = styled(Flex, {\n  base: [],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    }\n  }\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      className,\n      appearance = 'standard',\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      appearance,\n      className: clsx(\n        'rounded-none',\n        'w-16',\n        'disabled:opacity-30',\n        'disabled:pointer-events-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      <NumberInputContainer appearance={appearance} className={className}>\n        <NumberInputStepper\n          onClick={decrement}\n          icon={Minus}\n          size={iconSize}\n          fieldAppearance={appearance}\n          disabled={isAtMin || isDisabled}\n          showTooltip={isAtMin && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.decrement}\n          label={stepperButtonLabels.decrement}\n          className=\"border-r-none rounded-r-none\"\n        />\n        <Input {...inputProps} />\n        <NumberInputStepper\n          onClick={increment}\n          icon={Plus}\n          size={iconSize}\n          fieldAppearance={appearance}\n          disabled={isAtMax || isDisabled}\n          showTooltip={isAtMax && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.increment}\n          label={stepperButtonLabels.increment}\n          className=\"border-l-none rounded-l-none\"\n        />\n      </NumberInputContainer>\n    )\n  }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInputContainer","styled","Flex","NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","className","appearance","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","inputProps","clsx","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 clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\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  appearance?: 'standard' | 'modern'\n  emphasis?: 'bold'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  className?: string\n}\n\nconst NumberInputContainer = styled(Flex, {\n  base: [],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    },\n    emphasis: {\n      bold: ['gap-0']\n    }\n  }\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      className,\n      appearance = 'standard',\n      emphasis,\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 hasError = internalValue < min || internalValue > max\n    const {\n      state: externalState,\n      'aria-invalid': externalAriaInvalid,\n      ...restProps\n    } = rest as { state?: 'error'; 'aria-invalid'?: boolean } & typeof rest\n\n    const inputProps: React.ComponentProps<typeof Input> = {\n      type: 'number',\n      value: internalValue,\n      ...restProps,\n      onChange: onInputChange,\n      onKeyDown,\n      size,\n      appearance,\n      state: externalState || (hasError ? 'error' : undefined),\n      'aria-invalid': externalAriaInvalid || hasError || undefined,\n      className: clsx(\n        'rounded-none',\n        'w-16',\n        '[&_>_input]:text-center',\n        'disabled:opacity-30',\n        'disabled:pointer-events-none',\n        emphasis === 'bold' && [\n          'rounded-1',\n          '[&_>_input[aria-invalid=true]]:text-danger',\n          'focus-within:[&_>_input]:text-grey-1000'\n        ],\n        emphasis === 'bold' &&\n          appearance === 'standard' && [\n            'border-none',\n            '[&:has([aria-invalid=true])]:border-2',\n            '[&:has([aria-invalid=true])]:border-danger',\n            'focus-within:border-2',\n            'focus-within:border-blue-800'\n          ]\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      <NumberInputContainer\n        appearance={appearance}\n        emphasis={emphasis}\n        className={className}\n      >\n        <NumberInputStepper\n          onClick={decrement}\n          icon={Minus}\n          className={clsx(\n            emphasis !== 'bold' && 'border-r-none rounded-r-none'\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\n          emphasis={emphasis}\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          className={clsx(\n            emphasis !== 'bold' && 'border-l-none rounded-l-none'\n          )}\n          size={iconSize}\n          fieldAppearance={appearance}\n          emphasis={emphasis}\n          disabled={isAtMax || isDisabled}\n          showTooltip={isAtMax && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.increment}\n          label={stepperButtonLabels.increment}\n        />\n      </NumberInputContainer>\n    )\n  }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInputContainer","styled","Flex","NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","className","appearance","emphasis","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","hasError","externalState","externalAriaInvalid","restProps","inputProps","clsx","NumberInputStepper","Minus","Input","Plus"],"mappings":"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"}

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

@@ -12,8 +12,9 @@ declare const StyledStepperButton: React.ForwardRefExoticComponent<Omit<Omit<Omi
 }, "children" | "label" | keyof import("../../types").NavigatorActions | "hasTooltip" | "tooltipSide"> & {
     children: React.ReactNode;
     label: string;
-} & Omit<import("../../utilities/optional-tooltip-wrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "fieldAppearance"> & {
+} & Omit<import("../../utilities/optional-tooltip-wrapper").TOptionalTooltipWrapperProps, "label"> & import("../../types").NavigatorActions, "ref"> & React.RefAttributes<HTMLButtonElement>, "emphasis" | "fieldAppearance"> & {
     fieldAppearance?: "standard" | "modern" | undefined;
+    emphasis?: "bold" | undefined;
 } & {
     as?: React.ElementType;
 }>;

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

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as r}from"../../styled.js";import{ActionIcon as s}from"../action-icon/ActionIcon.js";import{Icon as c}from"../icon/Icon.js";import{Tooltip as t}from"../tooltip/Tooltip.js";const m=r("span",{base:["z-1"]}),g=r(s,{base:["rounded-md","z-1","h-full!","hover:[&_svg]:text-grey-800","hover:bg-grey-100","[&_svg]:text-grey-700","active:[&_svg]:text-grey-900","active:bg-grey-200","disabled:opacity-30","disabled:pointer-events-none"],variants:{fieldAppearance:{standard:["bg-white","border-grey-800!"],modern:["bg-grey-100","border-grey-100!"]}}}),b=e.forwardRef((o,n)=>{const{icon:a,disabledTooltipContent:i,showTooltip:d,fieldAppearance:l="standard",...p}=o;return e.createElement(t,null,e.createElement(t.Trigger,{asChild:!0},e.createElement(m,{tabIndex:-1},e.createElement(g,{hasTooltip:!1,tabIndex:-1,appearance:"outline",fieldAppearance:l,ref:n,...p},e.createElement(c,{is:a})))),d&&e.createElement(t.Content,null,i))});export{b as NumberInputStepper};
+import*as e from"react";import{styled as t}from"../../styled.js";import{ActionIcon as l}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";import{Tooltip as r}from"../tooltip/Tooltip.js";const g=t("span",{base:["z-1"]}),c=t(l,{base:["rounded-md","z-1","h-full!","hover:[&_svg]:text-grey-800","hover:bg-grey-100","[&_svg]:text-grey-700","active:[&_svg]:text-grey-900","active:bg-grey-200","disabled:opacity-30","disabled:pointer-events-none"],variants:{fieldAppearance:{standard:["bg-white","border-grey-800!"],modern:["bg-grey-100","border-grey-100!","hover:bg-grey-200!"]},emphasis:{bold:["[&_svg]:text-primary-700","hover:bg-primary-100!","hover:[&_svg]:text-primary-800!","active:bg-primary-200!","active:[&_svg]:text-primary-900!"]}},compoundVariants:[{fieldAppearance:"standard",emphasis:"bold",class:["bg-white","border-primary-800!"]},{fieldAppearance:"modern",emphasis:"bold",class:["bg-white!","hover:bg-primary-100!"]}]}),b=e.forwardRef((a,o)=>{const{icon:i,disabledTooltipContent:n,showTooltip:p,fieldAppearance:s="standard",...d}=a;return e.createElement(r,null,e.createElement(r.Trigger,{asChild:!0},e.createElement(g,{tabIndex:-1},e.createElement(c,{hasTooltip:!1,tabIndex:-1,appearance:"outline",fieldAppearance:s,ref:o,...d},e.createElement(m,{is:i})))),p&&e.createElement(r.Content,null,n))});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 '~/styled'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { Tooltip } from '../tooltip'\n\nconst StyledSpan = styled('span', {\n  base: ['z-1']\n})\n\nconst StyledStepperButton = styled(ActionIcon, {\n  base: [\n    'rounded-md',\n    'z-1',\n    'h-full!',\n    'hover:[&_svg]:text-grey-800',\n    'hover:bg-grey-100',\n    '[&_svg]:text-grey-700',\n    'active:[&_svg]:text-grey-900',\n    'active:bg-grey-200',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    fieldAppearance: {\n      standard: ['bg-white', 'border-grey-800!'],\n      modern: ['bg-grey-100', 'border-grey-100!']\n    }\n  }\n})\n\ntype NumberInputStepperProps = Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'children'\n> &\n  Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n    icon: React.FC<React.SVGProps<SVGSVGElement>>\n    showTooltip?: boolean\n    disabledTooltipContent?: string\n  }\n\nexport const NumberInputStepper = React.forwardRef<\n  HTMLButtonElement,\n  NumberInputStepperProps\n>((props, forwardedRef) => {\n  const {\n    icon,\n    disabledTooltipContent,\n    showTooltip,\n    fieldAppearance = 'standard',\n    ...rest\n  } = props\n\n  /**\n   * Focus has been removed from the button\n   * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n   * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n   */\n  return (\n    <Tooltip>\n      <Tooltip.Trigger asChild>\n        <StyledSpan tabIndex={-1}>\n          <StyledStepperButton\n            hasTooltip={false}\n            tabIndex={-1}\n            appearance=\"outline\"\n            fieldAppearance={fieldAppearance}\n            ref={forwardedRef}\n            {...rest}\n          >\n            <Icon is={icon} />\n          </StyledStepperButton>\n        </StyledSpan>\n      </Tooltip.Trigger>\n      {showTooltip && (\n        <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n      )}\n    </Tooltip>\n  )\n})\n"],"names":["StyledSpan","styled","StyledStepperButton","ActionIcon","NumberInputStepper","React","props","forwardedRef","icon","disabledTooltipContent","showTooltip","fieldAppearance","rest","Tooltip","Icon"],"mappings":"kNAQA,MAAMA,EAAaC,EAAO,OAAQ,CAChC,KAAM,CAAC,KAAK,CACd,CAAC,EAEKC,EAAsBD,EAAOE,EAAY,CAC7C,KAAM,CACJ,aACA,MACA,UACA,8BACA,oBACA,wBACA,+BACA,qBACA,sBACA,8BACF,EACA,SAAU,CACR,gBAAiB,CACf,SAAU,CAAC,WAAY,kBAAkB,EACzC,OAAQ,CAAC,cAAe,kBAAkB,CAC5C,CACF,CACF,CAAC,EAYYC,EAAqBC,EAAM,WAGtC,CAACC,EAAOC,IAAiB,CACzB,KAAM,CACJ,KAAAC,EACA,uBAAAC,EACA,YAAAC,EACA,gBAAAC,EAAkB,WAClB,GAAGC,CACL,EAAIN,EAOJ,OACED,EAAA,cAACQ,EAAA,KACCR,EAAA,cAACQ,EAAQ,QAAR,CAAgB,QAAO,EAAA,EACtBR,EAAA,cAACL,EAAA,CAAW,SAAU,EACpBK,EAAAA,EAAA,cAACH,EAAA,CACC,WAAY,GACZ,SAAU,GACV,WAAW,UACX,gBAAiBS,EACjB,IAAKJ,EACJ,GAAGK,CAAAA,EAEJP,EAAA,cAACS,EAAA,CAAK,GAAIN,CAAM,CAAA,CAClB,CACF,CACF,EACCE,GACCL,EAAA,cAACQ,EAAQ,QAAR,KAAiBJ,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 '~/styled'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { Tooltip } from '../tooltip'\n\nconst StyledSpan = styled('span', {\n  base: ['z-1']\n})\n\nconst StyledStepperButton = styled(ActionIcon, {\n  base: [\n    'rounded-md',\n    'z-1',\n    'h-full!',\n    'hover:[&_svg]:text-grey-800',\n    'hover:bg-grey-100',\n    '[&_svg]:text-grey-700',\n    'active:[&_svg]:text-grey-900',\n    'active:bg-grey-200',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    fieldAppearance: {\n      standard: ['bg-white', 'border-grey-800!'],\n      modern: ['bg-grey-100', 'border-grey-100!', 'hover:bg-grey-200!']\n    },\n    emphasis: {\n      bold: [\n        '[&_svg]:text-primary-700',\n        'hover:bg-primary-100!',\n        'hover:[&_svg]:text-primary-800!',\n        'active:bg-primary-200!',\n        'active:[&_svg]:text-primary-900!'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      fieldAppearance: 'standard',\n      emphasis: 'bold',\n      class: ['bg-white', 'border-primary-800!']\n    },\n    {\n      fieldAppearance: 'modern',\n      emphasis: 'bold',\n      class: ['bg-white!', 'hover:bg-primary-100!']\n    }\n  ]\n})\n\ntype NumberInputStepperProps = Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'children'\n> &\n  Omit<React.ComponentProps<typeof StyledStepperButton>, 'children'> & {\n    icon: React.FC<React.SVGProps<SVGSVGElement>>\n    showTooltip?: boolean\n    disabledTooltipContent?: string\n  }\n\nexport const NumberInputStepper = React.forwardRef<\n  HTMLButtonElement,\n  NumberInputStepperProps\n>((props, forwardedRef) => {\n  const {\n    icon,\n    disabledTooltipContent,\n    showTooltip,\n    fieldAppearance = 'standard',\n    ...rest\n  } = props\n\n  /**\n   * Focus has been removed from the button\n   * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n   * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n   */\n  return (\n    <Tooltip>\n      <Tooltip.Trigger asChild>\n        <StyledSpan tabIndex={-1}>\n          <StyledStepperButton\n            hasTooltip={false}\n            tabIndex={-1}\n            appearance=\"outline\"\n            fieldAppearance={fieldAppearance}\n            ref={forwardedRef}\n            {...rest}\n          >\n            <Icon is={icon} />\n          </StyledStepperButton>\n        </StyledSpan>\n      </Tooltip.Trigger>\n      {showTooltip && (\n        <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n      )}\n    </Tooltip>\n  )\n})\n"],"names":["StyledSpan","styled","StyledStepperButton","ActionIcon","NumberInputStepper","React","props","forwardedRef","icon","disabledTooltipContent","showTooltip","fieldAppearance","rest","Tooltip","Icon"],"mappings":"kNAQA,MAAMA,EAAaC,EAAO,OAAQ,CAChC,KAAM,CAAC,KAAK,CACd,CAAC,EAEKC,EAAsBD,EAAOE,EAAY,CAC7C,KAAM,CACJ,aACA,MACA,UACA,8BACA,oBACA,wBACA,+BACA,qBACA,sBACA,8BACF,EACA,SAAU,CACR,gBAAiB,CACf,SAAU,CAAC,WAAY,kBAAkB,EACzC,OAAQ,CAAC,cAAe,mBAAoB,oBAAoB,CAClE,EACA,SAAU,CACR,KAAM,CACJ,2BACA,wBACA,kCACA,yBACA,kCACF,CACF,CACF,EACA,iBAAkB,CAChB,CACE,gBAAiB,WACjB,SAAU,OACV,MAAO,CAAC,WAAY,qBAAqB,CAC3C,EACA,CACE,gBAAiB,SACjB,SAAU,OACV,MAAO,CAAC,YAAa,uBAAuB,CAC9C,CACF,CACF,CAAC,EAYYC,EAAqBC,EAAM,WAGtC,CAACC,EAAOC,IAAiB,CACzB,KAAM,CACJ,KAAAC,EACA,uBAAAC,EACA,YAAAC,EACA,gBAAAC,EAAkB,WAClB,GAAGC,CACL,EAAIN,EAOJ,OACED,EAAA,cAACQ,EAAA,KACCR,EAAA,cAACQ,EAAQ,QAAR,CAAgB,QAAO,IACtBR,EAAA,cAACL,EAAA,CAAW,SAAU,IACpBK,EAAA,cAACH,EAAA,CACC,WAAY,GACZ,SAAU,GACV,WAAW,UACX,gBAAiBS,EACjB,IAAKJ,EACJ,GAAGK,CAAAA,EAEJP,EAAA,cAACS,EAAA,CAAK,GAAIN,CAAAA,CAAM,CAClB,CACF,CACF,EACCE,GACCL,EAAA,cAACQ,EAAQ,QAAR,KAAiBJ,CAAuB,CAE7C,CAEJ,CAAC"}

package/dist/components/pagination/PaginationPopover.js

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

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

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

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

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

package/dist/components/popover/Popover.d.ts

@@ -8,5 +8,6 @@ export declare const Popover: import("react").FC<import("@radix-ui/react-popover
         showCloseButton?: boolean;
     }) => import("react").JSX.Element;
     Portal: import("react").FC<import("@radix-ui/react-popover").PopoverPortalProps>;
+    Anchor: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
     Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 };

package/dist/components/popover/Popover.js

@@ -1,2 +1,2 @@
-import{Root as o,Portal as r,Trigger as t}from"@radix-ui/react-popover";import{PopoverContent as e}from"./PopoverContent.js";const p=Object.assign(o,{Content:e,Portal:r,Trigger:t});o.displayName="Popover";export{p as Popover};
+import{Root as o,Portal as r,Anchor as t,Trigger as e}from"@radix-ui/react-popover";import{PopoverContent as n}from"./PopoverContent.js";const p=Object.assign(o,{Content:n,Portal:r,Anchor:t,Trigger:e});o.displayName="Popover";export{p as Popover};
 //# sourceMappingURL=Popover.js.map

package/dist/components/popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../src/components/popover/Popover.tsx"],"sourcesContent":["import { Portal, Root, Trigger } from '@radix-ui/react-popover'\n\nimport { PopoverContent } from './PopoverContent'\n\nexport const Popover = Object.assign(Root, {\n  Content: PopoverContent,\n  Portal: Portal,\n  Trigger: Trigger\n})\n\nRoot.displayName = 'Popover'\n"],"names":["Popover","Root","PopoverContent","Portal","Trigger"],"mappings":"6HAIa,MAAAA,EAAU,OAAO,OAAOC,EAAM,CACzC,QAASC,EACT,OAAQC,EACR,QAASC,CACX,CAAC,EAEDH,EAAK,YAAc"}
+{"version":3,"file":"Popover.js","sources":["../../../src/components/popover/Popover.tsx"],"sourcesContent":["import { Anchor, Portal, Root, Trigger } from '@radix-ui/react-popover'\n\nimport { PopoverContent } from './PopoverContent'\n\nexport const Popover = Object.assign(Root, {\n  Content: PopoverContent,\n  Portal,\n  Anchor,\n  Trigger\n})\n\nRoot.displayName = 'Popover'\n"],"names":["Popover","Root","PopoverContent","Portal","Anchor","Trigger"],"mappings":"yIAIa,MAAAA,EAAU,OAAO,OAAOC,EAAM,CACzC,QAASC,EACT,OAAAC,EACA,OAAAC,EACA,QAAAC,CACF,CAAC,EAEDJ,EAAK,YAAc"}

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

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

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

@@ -1,2 +1,2 @@
-import{TooltipProvider as m}from"@radix-ui/react-tooltip";import t from"react";import{styled as a}from"../../styled.js";import{Dismissible as c}from"../dismissible/index.js";import{Flex as g}from"../flex/Flex.js";import{SectionMessageProvider as l,useSectionMessageContext as p}from"./SectionMessageContext.js";import{SectionMessageDescription as f}from"./SectionMessageDescription.js";import{SectionMessageDismiss as h}from"./SectionMessageDismiss.js";import{SectionMessageIcon as d}from"./SectionMessageIcon.js";import{SectionMessageContent as u,SectionMessageActions as x}from"./SectionMessageLayout.js";import{SectionMessageTitle as b}from"./SectionMessageTitle.js";const M=a(c,{base:["relative","rounded-md","flex","min-h-12","p-4","border","border-white"],variants:{theme:{success:["bg-success-light","text-success-dark"],warning:["bg-warning-light","text-warning-text"],error:["bg-danger-light","text-danger-dark"],neutral:["bg-grey-100","text-grey-1000"],info:["bg-info-light","text-info-dark"]},hasIcon:{true:["pl-10"]},hasDismiss:{true:["pr-12"]}}}),S=({children:s,...r})=>{const{theme:i,hasIcon:o,hasDismiss:n}=p();return t.createElement(M,{...r,theme:i,hasIcon:o,hasDismiss:n},t.createElement(g,{gap:3,justify:"space-between",className:"grow"},s))},e=({theme:s="info",...r})=>t.createElement(m,null,t.createElement(l,{theme:s},t.createElement(S,{...r})));e.Title=b,e.Description=f,e.Icon=d,e.Dismiss=h,e.Content=u,e.Actions=x;export{e as SectionMessage};
+import{TooltipProvider as m}from"@radix-ui/react-tooltip";import t from"react";import{styled as a}from"../../styled.js";import{Dismissible as c}from"../dismissible/index.js";import{Flex as g}from"../flex/Flex.js";import{SectionMessageProvider as l,useSectionMessageContext as p}from"./SectionMessageContext.js";import{SectionMessageDescription as h}from"./SectionMessageDescription.js";import{SectionMessageDismiss as f}from"./SectionMessageDismiss.js";import{SectionMessageIcon as d}from"./SectionMessageIcon.js";import{SectionMessageContent as u,SectionMessageActions as x}from"./SectionMessageLayout.js";import{SectionMessageTitle as b}from"./SectionMessageTitle.js";const M=a(c,{base:["relative","rounded-md","flex","shrink","min-h-12","p-4","border","border-white"],variants:{theme:{success:["bg-success-light","text-success-dark"],warning:["bg-warning-light","text-warning-text"],error:["bg-danger-light","text-danger-dark"],neutral:["bg-grey-100","text-grey-1000"],info:["bg-info-light","text-info-dark"]},hasIcon:{true:["pl-10"]},hasDismiss:{true:["pr-12"]}}}),S=({children:s,...r})=>{const{theme:i,hasIcon:o,hasDismiss:n}=p();return t.createElement(M,{...r,theme:i,hasIcon:o,hasDismiss:n},t.createElement(g,{gap:3,justify:"space-between",className:"grow"},s))},e=({theme:s="info",...r})=>t.createElement(m,null,t.createElement(l,{theme:s},t.createElement(S,{...r})));e.Title=b,e.Description=h,e.Icon=d,e.Dismiss=f,e.Content=u,e.Actions=x;export{e as SectionMessage};
 //# sourceMappingURL=SectionMessage.js.map

package/dist/components/section-message/SectionMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionMessage.js","sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Dismissible } from '../dismissible'\nimport { Flex } from '../flex'\nimport {\n  SectionMessageProvider,\n  useSectionMessageContext\n} from './SectionMessageContext'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n  SectionMessageActions,\n  SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n  base: [\n    'relative',\n    'rounded-md',\n    'flex',\n    'min-h-12',\n    'p-4',\n    'border',\n    'border-white'\n  ],\n  variants: {\n    theme: {\n      success: ['bg-success-light', 'text-success-dark'],\n      warning: ['bg-warning-light', 'text-warning-text'],\n      error: ['bg-danger-light', 'text-danger-dark'],\n      neutral: ['bg-grey-100', 'text-grey-1000'],\n      info: ['bg-info-light', 'text-info-dark']\n    },\n    hasIcon: {\n      true: ['pl-10']\n    },\n    hasDismiss: {\n      true: ['pr-12']\n    }\n  }\n})\n\nconst SectionMessageRoot = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledSectionMessage> & {\n  className?: string\n}) => {\n  const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n  return (\n    <StyledSectionMessage\n      {...rest}\n      theme={theme}\n      hasIcon={hasIcon}\n      hasDismiss={hasDismiss}\n    >\n      <Flex gap={3} justify=\"space-between\" className=\"grow\">\n        {children}\n      </Flex>\n    </StyledSectionMessage>\n  )\n}\n\nexport type SectionMessageTheme =\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral'\n  | 'info'\n\nexport type SectionMessageProps = React.ComponentProps<\n  typeof SectionMessageRoot\n> & {\n  theme?: SectionMessageTheme\n}\n\nexport const SectionMessage = ({\n  theme = 'info',\n  ...rest\n}: SectionMessageProps) => (\n  <TooltipProvider>\n    <SectionMessageProvider theme={theme}>\n      <SectionMessageRoot {...rest} />\n    </SectionMessageProvider>\n  </TooltipProvider>\n)\n\nSectionMessage.Title = SectionMessageTitle\nSectionMessage.Description = SectionMessageDescription\nSectionMessage.Icon = SectionMessageIcon\nSectionMessage.Dismiss = SectionMessageDismiss\nSectionMessage.Content = SectionMessageContent\nSectionMessage.Actions = SectionMessageActions\n"],"names":["StyledSectionMessage","styled","Dismissible","SectionMessageRoot","children","rest","theme","hasIcon","hasDismiss","useSectionMessageContext","React","Flex","SectionMessage","TooltipProvider","SectionMessageProvider","SectionMessageTitle","SectionMessageDescription","SectionMessageIcon","SectionMessageDismiss","SectionMessageContent","SectionMessageActions"],"mappings":"8pBAoBA,MAAMA,EAAuBC,EAAOC,EAAa,CAC/C,KAAM,CACJ,WACA,aACA,OACA,WACA,MACA,SACA,cACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CAAC,mBAAoB,mBAAmB,EACjD,QAAS,CAAC,mBAAoB,mBAAmB,EACjD,MAAO,CAAC,kBAAmB,kBAAkB,EAC7C,QAAS,CAAC,cAAe,gBAAgB,EACzC,KAAM,CAAC,gBAAiB,gBAAgB,CAC1C,EACA,QAAS,CACP,KAAM,CAAC,OAAO,CAChB,EACA,WAAY,CACV,KAAM,CAAC,OAAO,CAChB,CACF,CACF,CAAC,EAEKC,EAAqB,CAAC,CAC1B,SAAAC,EACA,GAAGC,CACL,IAEM,CACJ,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,WAAAC,CAAW,EAAIC,EAAyB,EAEhE,OACEC,EAAA,cAACV,EAAA,CACE,GAAGK,EACJ,MAAOC,EACP,QAASC,EACT,WAAYC,CAAAA,EAEZE,EAAA,cAACC,EAAA,CAAK,IAAK,EAAG,QAAQ,gBAAgB,UAAU,MAAA,EAC7CP,CACH,CACF,CAEJ,EAeaQ,EAAiB,CAAC,CAC7B,MAAAN,EAAQ,OACR,GAAGD,CACL,IACEK,EAAA,cAACG,EAAA,KACCH,EAAA,cAACI,EAAA,CAAuB,MAAOR,CAC7BI,EAAAA,EAAA,cAACP,EAAA,CAAoB,GAAGE,CAAM,CAAA,CAChC,CACF,EAGFO,EAAe,MAAQG,EACvBH,EAAe,YAAcI,EAC7BJ,EAAe,KAAOK,EACtBL,EAAe,QAAUM,EACzBN,EAAe,QAAUO,EACzBP,EAAe,QAAUQ"}
+{"version":3,"file":"SectionMessage.js","sources":["../../../src/components/section-message/SectionMessage.tsx"],"sourcesContent":["import { TooltipProvider } from '@radix-ui/react-tooltip'\nimport React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Dismissible } from '../dismissible'\nimport { Flex } from '../flex'\nimport {\n  SectionMessageProvider,\n  useSectionMessageContext\n} from './SectionMessageContext'\nimport { SectionMessageDescription } from './SectionMessageDescription'\nimport { SectionMessageDismiss } from './SectionMessageDismiss'\nimport { SectionMessageIcon } from './SectionMessageIcon'\nimport {\n  SectionMessageActions,\n  SectionMessageContent\n} from './SectionMessageLayout'\nimport { SectionMessageTitle } from './SectionMessageTitle'\n\nconst StyledSectionMessage = styled(Dismissible, {\n  base: [\n    'relative',\n    'rounded-md',\n    'flex',\n    'shrink',\n    'min-h-12',\n    'p-4',\n    'border',\n    'border-white'\n  ],\n  variants: {\n    theme: {\n      success: ['bg-success-light', 'text-success-dark'],\n      warning: ['bg-warning-light', 'text-warning-text'],\n      error: ['bg-danger-light', 'text-danger-dark'],\n      neutral: ['bg-grey-100', 'text-grey-1000'],\n      info: ['bg-info-light', 'text-info-dark']\n    },\n    hasIcon: {\n      true: ['pl-10']\n    },\n    hasDismiss: {\n      true: ['pr-12']\n    }\n  }\n})\n\nconst SectionMessageRoot = ({\n  children,\n  ...rest\n}: React.ComponentProps<typeof StyledSectionMessage> & {\n  className?: string\n}) => {\n  const { theme, hasIcon, hasDismiss } = useSectionMessageContext()\n\n  return (\n    <StyledSectionMessage\n      {...rest}\n      theme={theme}\n      hasIcon={hasIcon}\n      hasDismiss={hasDismiss}\n    >\n      <Flex gap={3} justify=\"space-between\" className=\"grow\">\n        {children}\n      </Flex>\n    </StyledSectionMessage>\n  )\n}\n\nexport type SectionMessageTheme =\n  | 'success'\n  | 'warning'\n  | 'error'\n  | 'neutral'\n  | 'info'\n\nexport type SectionMessageProps = React.ComponentProps<\n  typeof SectionMessageRoot\n> & {\n  theme?: SectionMessageTheme\n}\n\nexport const SectionMessage = ({\n  theme = 'info',\n  ...rest\n}: SectionMessageProps) => (\n  <TooltipProvider>\n    <SectionMessageProvider theme={theme}>\n      <SectionMessageRoot {...rest} />\n    </SectionMessageProvider>\n  </TooltipProvider>\n)\n\nSectionMessage.Title = SectionMessageTitle\nSectionMessage.Description = SectionMessageDescription\nSectionMessage.Icon = SectionMessageIcon\nSectionMessage.Dismiss = SectionMessageDismiss\nSectionMessage.Content = SectionMessageContent\nSectionMessage.Actions = SectionMessageActions\n"],"names":["StyledSectionMessage","styled","Dismissible","SectionMessageRoot","children","rest","theme","hasIcon","hasDismiss","useSectionMessageContext","React","Flex","SectionMessage","TooltipProvider","SectionMessageProvider","SectionMessageTitle","SectionMessageDescription","SectionMessageIcon","SectionMessageDismiss","SectionMessageContent","SectionMessageActions"],"mappings":"8pBAoBA,MAAMA,EAAuBC,EAAOC,EAAa,CAC/C,KAAM,CACJ,WACA,aACA,OACA,SACA,WACA,MACA,SACA,cACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CAAC,mBAAoB,mBAAmB,EACjD,QAAS,CAAC,mBAAoB,mBAAmB,EACjD,MAAO,CAAC,kBAAmB,kBAAkB,EAC7C,QAAS,CAAC,cAAe,gBAAgB,EACzC,KAAM,CAAC,gBAAiB,gBAAgB,CAC1C,EACA,QAAS,CACP,KAAM,CAAC,OAAO,CAChB,EACA,WAAY,CACV,KAAM,CAAC,OAAO,CAChB,CACF,CACF,CAAC,EAEKC,EAAqB,CAAC,CAC1B,SAAAC,EACA,GAAGC,CACL,IAEM,CACJ,KAAM,CAAE,MAAAC,EAAO,QAAAC,EAAS,WAAAC,CAAW,EAAIC,IAEvC,OACEC,EAAA,cAACV,EAAA,CACE,GAAGK,EACJ,MAAOC,EACP,QAASC,EACT,WAAYC,GAEZE,EAAA,cAACC,EAAA,CAAK,IAAK,EAAG,QAAQ,gBAAgB,UAAU,QAC7CP,CACH,CACF,CAEJ,EAeaQ,EAAiB,CAAC,CAC7B,MAAAN,EAAQ,OACR,GAAGD,CACL,IACEK,EAAA,cAACG,EAAA,KACCH,EAAA,cAACI,EAAA,CAAuB,MAAOR,CAC7BI,EAAAA,EAAA,cAACP,EAAA,CAAoB,GAAGE,CAAM,CAAA,CAChC,CACF,EAGFO,EAAe,MAAQG,EACvBH,EAAe,YAAcI,EAC7BJ,EAAe,KAAOK,EACtBL,EAAe,QAAUM,EACzBN,EAAe,QAAUO,EACzBP,EAAe,QAAUQ"}

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

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

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

@@ -1,2 +1,2 @@
-import{Close as i}from"@atom-learning/icons";import r from"clsx";import s,{useEffect as a}from"react";import{ActionIcon as l}from"../action-icon/ActionIcon.js";import{Dismissible as c}from"../dismissible/index.js";import{Icon as n}from"../icon/Icon.js";import{useSectionMessageContext as p}from"./SectionMessageContext.js";const f=({label:t="Dismiss",className:o,...m})=>{const{setHasDismiss:e}=p();return a(()=>(e(!0),()=>e(!1)),[e]),s.createElement(c.Trigger,{asChild:!0},s.createElement(l,{label:t,size:"sm",appearance:"simple",theme:"neutral",...m,className:r("m-auto","absolute","top-2","right-2",o)},s.createElement(n,{is:i})))};export{f as SectionMessageDismiss};
+import{Close as i}from"@atom-learning/icons";import r from"clsx";import s,{useEffect as a}from"react";import{ActionIcon as l}from"../action-icon/ActionIcon.js";import{Dismissible as c}from"../dismissible/index.js";import{Icon as n}from"../icon/Icon.js";import{useSectionMessageContext as p}from"./SectionMessageContext.js";const f=({label:t="Dismiss",className:m,...o})=>{const{setHasDismiss:e}=p();return a(()=>(e(!0),()=>e(!1)),[e]),s.createElement(c.Trigger,{asChild:!0},s.createElement(l,{label:t,size:"sm",appearance:"simple",theme:"neutral",...o,className:r("m-auto","absolute","top-2","right-2",m)},s.createElement(n,{is:i})))};export{f as SectionMessageDismiss};
 //# sourceMappingURL=SectionMessageDismiss.js.map

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

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

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

@@ -1,2 +1,2 @@
-import s from"clsx";import t from"react";import{Flex as m}from"../flex/Flex.js";const l=({className:e,...a})=>t.createElement("div",{...a,className:s("max-w-full","shrink-0","pt-0.5","*:not-last:mb-2",e)}),o=({className:e,...a})=>t.createElement("div",{className:s("max-w-full","shrink-0",e)},t.createElement(m,{wrap:"wrap",gap:3,...a}));export{o as SectionMessageActions,l as SectionMessageContent};
+import s from"clsx";import t from"react";import{Flex as m}from"../flex/Flex.js";const l=({className:e,...a})=>t.createElement("div",{...a,className:s("max-w-full","shrink-0","pt-0.5","*:not-last:mb-2",e)}),r=({className:e,...a})=>t.createElement("div",{className:s("max-w-full","shrink-0",e)},t.createElement(m,{wrap:"wrap",gap:3,...a}));export{r as SectionMessageActions,l as SectionMessageContent};
 //# sourceMappingURL=SectionMessageLayout.js.map

package/dist/components/segmented-control/SegmentedControl.d.ts

@@ -1,5 +1,5 @@
 export declare const SegmentedControl: {
-    Root: ({ size, theme, defaultValue, children, ...props }: React.PropsWithChildren<import("./SegmentedControlRoot").SegmentedControlRootProps>) => React.JSX.Element;
+    Root: ({ size, theme, defaultValue, children, ...props }: import("react").PropsWithChildren<import("./SegmentedControlRoot").SegmentedControlRootProps>) => import("react").JSX.Element;
     Item: import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>, never> & {
         as?: import("react").ElementType;
     } & {
@@ -10,7 +10,7 @@ export declare const SegmentedControl: {
     } & {
         as?: import("react").ElementType;
     }, "size">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-    Heading: (props: Omit<React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    Heading: (props: Omit<import("react").ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
         ref?: ((instance: HTMLParagraphElement | null) => void) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
     }, "size" | "noCapsize" | "weight" | "family"> & {
         size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
@@ -20,13 +20,13 @@ export declare const SegmentedControl: {
     } & {
         as?: import("react").ElementType;
     }, "as"> & {
-        as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+        as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | import("react").ComponentType | import("react").ElementType;
     }, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, "size"> & {
         size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
     } & {
         as?: import("react").ElementType;
     }>>, "size">) => JSX.Element;
-    Description: (props: Omit<React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    Description: (props: Omit<import("react").ComponentProps<import("react").ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
         ref?: ((instance: HTMLParagraphElement | null) => void) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
     }, "size" | "noCapsize" | "weight" | "family"> & {
         size?: ("sm" | "md" | "lg" | "xs" | "xl" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg" | "xs" | "xl">>) | undefined;
@@ -36,19 +36,19 @@ export declare const SegmentedControl: {
     } & {
         as?: import("react").ElementType;
     }, "as"> & {
-        as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+        as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | import("react").ComponentType | import("react").ElementType;
     }, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, "size"> & {
         size?: ("sm" | "md" | "lg" | Partial<Record<"@initial" | "@sm" | "@md" | "@lg" | "@xl", "sm" | "md" | "lg">>) | undefined;
     } & {
         as?: import("react").ElementType;
     }>>, "size">) => JSX.Element;
-    Icon: (props: Omit<React.ComponentProps<typeof import("..").Icon>, "size">) => JSX.Element;
+    Icon: (props: Omit<import("react").ComponentProps<typeof import("..").Icon>, "size">) => JSX.Element;
     Content: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsContentProps & import("react").RefAttributes<HTMLDivElement>, never> & {
         as?: import("react").ElementType;
     }>;
-    Badge: ({ className, ...props }: Omit<React.ComponentProps<typeof import("..").Badge>, "size">) => JSX.Element;
-    ItemList: (props: React.ComponentProps<{
-        ({ children, colorScheme, ...rest }: React.ComponentProps<import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>, never> & {
+    Badge: ({ className, ...props }: Omit<import("react").ComponentProps<typeof import("..").Badge>, "size">) => JSX.Element;
+    ItemList: (props: import("react").ComponentProps<{
+        ({ children, colorScheme, ...rest }: import("react").ComponentProps<import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>, never> & {
             as?: import("react").ElementType;
         }>> & {
             colorScheme?: import("../..").TcolorScheme;

package/dist/components/segmented-control/SegmentedControlItemList.js

@@ -1,2 +1,2 @@
-import*as t from"react";import{styled as l}from"../../styled.js";import{Tabs as v}from"../tabs/Tabs.js";import{SegmentedControlContext as g}from"./SegmentedControlContext.js";const b=l(v.TriggerList,{base:["relative","p-1","rounded-xl","overflow-hidden","[&>div[role=tablist]]:relative","[&>button]:z-2"],variants:{theme:{primary:["bg-primary-200"],marsh:["bg-marsh-200"]}}}),C=l("div",{base:["content-['']","absolute","bg-white","rounded-lg"],variants:{interacted:{true:["duration-300","ease-in","transition-all"],false:["transition-none"]}}}),w=s=>{const{theme:d,defaultValue:u,value:c}=t.useContext(g),a=t.useRef([]),i=t.Children.toArray(s.children).findIndex(e=>(e==null?void 0:e.props.value)===c),[m,f]=t.useState({left:0,height:0,width:0}),[h,p]=t.useState(!1),n=t.useCallback(()=>{const e=a.current[i];if(!e)return;const{width:o,height:r}=e.getBoundingClientRect();f({left:e.offsetLeft,height:r,width:o})},[i]);return t.useEffect(()=>{const e=new ResizeObserver(n),o=a.current;return o.forEach(r=>{r&&e.observe(r)}),()=>{o.forEach(r=>{r&&e.unobserve(r)}),e.disconnect()}},[i,n]),t.useEffect(()=>(window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}),[n]),t.useEffect(()=>{n()},[i,n]),t.createElement(b,{theme:d,defaultValue:u,...s},t.createElement(C,{interacted:h,style:m}),t.Children.map(s.children,(e,o)=>{if(!t.isValidElement(e))throw new Error("Child passed to SegmentedControlItemList is not a valid element");return t.cloneElement(e,{onClick:r=>{p(!0),e.props.onClick&&e.props.onClick(r)},ref:r=>a.current[o]=r})}))};export{w as SegmentedControlItemList};
+import*as t from"react";import{styled as l}from"../../styled.js";import{Tabs as v}from"../tabs/Tabs.js";import{SegmentedControlContext as g}from"./SegmentedControlContext.js";const b=l(v.TriggerList,{base:["relative","p-1","rounded-xl","overflow-hidden","[&>div[role=tablist]]:relative","[&>button]:z-2"],variants:{theme:{primary:["bg-primary-200"],marsh:["bg-marsh-200"]}}}),C=l("div",{base:["absolute","bg-white","rounded-lg"],variants:{interacted:{true:["duration-300","ease-in","transition-all"],false:["transition-none"]}}}),w=s=>{const{theme:d,defaultValue:u,value:c}=t.useContext(g),a=t.useRef([]),i=t.Children.toArray(s.children).findIndex(e=>(e==null?void 0:e.props.value)===c),[m,f]=t.useState({left:0,height:0,width:0}),[h,p]=t.useState(!1),n=t.useCallback(()=>{const e=a.current[i];if(!e)return;const{width:o,height:r}=e.getBoundingClientRect();f({left:e.offsetLeft,height:r,width:o})},[i]);return t.useEffect(()=>{const e=new ResizeObserver(n),o=a.current;return o.forEach(r=>{r&&e.observe(r)}),()=>{o.forEach(r=>{r&&e.unobserve(r)}),e.disconnect()}},[i,n]),t.useEffect(()=>(window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}),[n]),t.useEffect(()=>{n()},[i,n]),t.createElement(b,{theme:d,defaultValue:u,...s},t.createElement(C,{interacted:h,style:m}),t.Children.map(s.children,(e,o)=>{if(!t.isValidElement(e))throw new Error("Child passed to SegmentedControlItemList is not a valid element");return t.cloneElement(e,{onClick:r=>{p(!0),e.props.onClick&&e.props.onClick(r)},ref:r=>a.current[o]=r})}))};export{w as SegmentedControlItemList};
 //# sourceMappingURL=SegmentedControlItemList.js.map

package/dist/components/segmented-control/SegmentedControlItemList.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  base: [\n    'relative',\n    'p-1',\n    'rounded-xl',\n    'overflow-hidden',\n    '[&>div[role=tablist]]:relative',\n    '[&>button]:z-2'\n  ],\n  variants: {\n    theme: {\n      primary: ['bg-primary-200'],\n      marsh: ['bg-marsh-200']\n    }\n  }\n})\n\nconst SelectionIndicator = styled('div', {\n  base: [\"content-['']\", 'absolute', 'bg-white', 'rounded-lg'],\n  variants: {\n    interacted: {\n      true: ['duration-300', 'ease-in', 'transition-all'],\n      false: ['transition-none']\n    }\n  }\n})\n\nexport const SegmentedControlItemList = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n  const { theme, defaultValue, value } = React.useContext(\n    SegmentedControlContext\n  )\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n  const selectedIndex = React.Children.toArray(props.children).findIndex(\n    (child) => (child as React.ReactElement)?.props.value === value\n  )\n\n  const [indicatorStyles, setIndicatorStyles] = React.useState({\n    left: 0,\n    height: 0,\n    width: 0\n  })\n  const [hasInteracted, setHasInteracted] = React.useState(false)\n\n  const updateIndicatorPosition = React.useCallback(() => {\n    const currentTab = tabsRef.current[selectedIndex]\n    if (!currentTab) return\n\n    const { width, height } = currentTab.getBoundingClientRect()\n    setIndicatorStyles({ left: currentTab.offsetLeft, height, width })\n  }, [selectedIndex])\n\n  React.useEffect(() => {\n    const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n    const currentTabs = tabsRef.current\n    currentTabs.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab)\n    })\n\n    return () => {\n      currentTabs.forEach((tab) => {\n        if (tab) resizeObserver.unobserve(tab)\n      })\n      resizeObserver.disconnect()\n    }\n  }, [selectedIndex, updateIndicatorPosition])\n\n  React.useEffect(() => {\n    window.addEventListener('resize', updateIndicatorPosition)\n    return () => {\n      window.removeEventListener('resize', updateIndicatorPosition)\n    }\n  }, [updateIndicatorPosition])\n\n  React.useEffect(() => {\n    updateIndicatorPosition()\n  }, [selectedIndex, updateIndicatorPosition])\n\n  return (\n    <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n      <SelectionIndicator interacted={hasInteracted} style={indicatorStyles} />\n      {React.Children.map(props.children, (child, index) => {\n        if (!React.isValidElement(child)) {\n          throw new Error(\n            `Child passed to SegmentedControlItemList is not a valid element`\n          )\n        }\n\n        return React.cloneElement(\n          child as React.ReactElement<\n            React.ComponentProps<typeof SegmentedControlItem>\n          >,\n          {\n            onClick: (e) => {\n              setHasInteracted(true)\n              if (child.props.onClick) child.props.onClick(e)\n            },\n            ref: (el) => (tabsRef.current[index] = el)\n          }\n        )\n      })}\n    </StyledTriggerList>\n  )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SelectionIndicator","SegmentedControlItemList","props","theme","defaultValue","value","React","SegmentedControlContext","tabsRef","selectedIndex","child","indicatorStyles","setIndicatorStyles","hasInteracted","setHasInteracted","updateIndicatorPosition","currentTab","width","height","resizeObserver","currentTabs","tab","index","e","el"],"mappings":"+KAQA,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,KAAM,CACJ,WACA,MACA,aACA,kBACA,iCACA,gBACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CAAC,gBAAgB,EAC1B,MAAO,CAAC,cAAc,CACxB,CACF,CACF,CAAC,EAEKC,EAAqBF,EAAO,MAAO,CACvC,KAAM,CAAC,eAAgB,WAAY,WAAY,YAAY,EAC3D,SAAU,CACR,WAAY,CACV,KAAM,CAAC,eAAgB,UAAW,gBAAgB,EAClD,MAAO,CAAC,iBAAiB,CAC3B,CACF,CACF,CAAC,EAEYG,EACXC,GACgB,CAChB,KAAM,CAAE,MAAAC,EAAO,aAAAC,EAAc,MAAAC,CAAM,EAAIC,EAAM,WAC3CC,CACF,EAEMC,EAAUF,EAAM,OAA+B,CAAE,CAAA,EAEjDG,EAAgBH,EAAM,SAAS,QAAQJ,EAAM,QAAQ,EAAE,UAC1DQ,IAAWA,GAAA,KAAA,OAAAA,EAA8B,MAAM,SAAUL,CAC5D,EAEM,CAACM,EAAiBC,CAAkB,EAAIN,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EACK,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAAS,EAAK,EAExDS,EAA0BT,EAAM,YAAY,IAAM,CACtD,MAAMU,EAAaR,EAAQ,QAAQC,CAAa,EAChD,GAAI,CAACO,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,sBAAsB,EAC3DJ,EAAmB,CAAE,KAAMI,EAAW,WAAY,OAAAE,EAAQ,MAAAD,CAAM,CAAC,CACnE,EAAG,CAACR,CAAa,CAAC,EAElB,OAAAH,EAAM,UAAU,IAAM,CACpB,MAAMa,EAAiB,IAAI,eAAeJ,CAAuB,EAC3DK,EAAcZ,EAAQ,QAC5B,OAAAY,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,QAAQE,CAAG,CACrC,CAAC,EAEM,IAAM,CACXD,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,UAAUE,CAAG,CACvC,CAAC,EACDF,EAAe,WACjB,CAAA,CACF,EAAG,CAACV,EAAeM,CAAuB,CAAC,EAE3CT,EAAM,UAAU,KACd,OAAO,iBAAiB,SAAUS,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACA,CAAuB,CAAC,EAE5BT,EAAM,UAAU,IAAM,CACpBS,EACF,CAAA,EAAG,CAACN,EAAeM,CAAuB,CAAC,EAGzCT,EAAA,cAACT,EAAA,CAAkB,MAAOM,EAAO,aAAcC,EAAe,GAAGF,CAC/DI,EAAAA,EAAA,cAACN,EAAA,CAAmB,WAAYa,EAAe,MAAOF,CAAiB,CAAA,EACtEL,EAAM,SAAS,IAAIJ,EAAM,SAAU,CAACQ,EAAOY,IAAU,CACpD,GAAI,CAAChB,EAAM,eAAeI,CAAK,EAC7B,MAAM,IAAI,MACR,iEACF,EAGF,OAAOJ,EAAM,aACXI,EAGA,CACE,QAAUa,GAAM,CACdT,EAAiB,EAAI,EACjBJ,EAAM,MAAM,SAASA,EAAM,MAAM,QAAQa,CAAC,CAChD,EACA,IAAMC,GAAQhB,EAAQ,QAAQc,CAAK,EAAIE,CACzC,CACF,CACF,CAAC,CACH,CAEJ"}
+{"version":3,"file":"SegmentedControlItemList.js","sources":["../../../src/components/segmented-control/SegmentedControlItemList.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs'\nimport { SegmentedControlContext } from './SegmentedControlContext'\nimport { SegmentedControlItem } from './SegmentedControlItem'\n\nconst StyledTriggerList = styled(Tabs.TriggerList, {\n  base: [\n    'relative',\n    'p-1',\n    'rounded-xl',\n    'overflow-hidden',\n    '[&>div[role=tablist]]:relative',\n    '[&>button]:z-2'\n  ],\n  variants: {\n    theme: {\n      primary: ['bg-primary-200'],\n      marsh: ['bg-marsh-200']\n    }\n  }\n})\n\nconst SelectionIndicator = styled('div', {\n  base: ['absolute', 'bg-white', 'rounded-lg'],\n  variants: {\n    interacted: {\n      true: ['duration-300', 'ease-in', 'transition-all'],\n      false: ['transition-none']\n    }\n  }\n})\n\nexport const SegmentedControlItemList = (\n  props: React.ComponentProps<typeof Tabs.TriggerList>\n): JSX.Element => {\n  const { theme, defaultValue, value } = React.useContext(\n    SegmentedControlContext\n  )\n\n  const tabsRef = React.useRef<(HTMLElement | null)[]>([])\n\n  const selectedIndex = React.Children.toArray(props.children).findIndex(\n    (child) => (child as React.ReactElement)?.props.value === value\n  )\n\n  const [indicatorStyles, setIndicatorStyles] = React.useState({\n    left: 0,\n    height: 0,\n    width: 0\n  })\n  const [hasInteracted, setHasInteracted] = React.useState(false)\n\n  const updateIndicatorPosition = React.useCallback(() => {\n    const currentTab = tabsRef.current[selectedIndex]\n    if (!currentTab) return\n\n    const { width, height } = currentTab.getBoundingClientRect()\n    setIndicatorStyles({ left: currentTab.offsetLeft, height, width })\n  }, [selectedIndex])\n\n  React.useEffect(() => {\n    const resizeObserver = new ResizeObserver(updateIndicatorPosition)\n    const currentTabs = tabsRef.current\n    currentTabs.forEach((tab) => {\n      if (tab) resizeObserver.observe(tab)\n    })\n\n    return () => {\n      currentTabs.forEach((tab) => {\n        if (tab) resizeObserver.unobserve(tab)\n      })\n      resizeObserver.disconnect()\n    }\n  }, [selectedIndex, updateIndicatorPosition])\n\n  React.useEffect(() => {\n    window.addEventListener('resize', updateIndicatorPosition)\n    return () => {\n      window.removeEventListener('resize', updateIndicatorPosition)\n    }\n  }, [updateIndicatorPosition])\n\n  React.useEffect(() => {\n    updateIndicatorPosition()\n  }, [selectedIndex, updateIndicatorPosition])\n\n  return (\n    <StyledTriggerList theme={theme} defaultValue={defaultValue} {...props}>\n      <SelectionIndicator interacted={hasInteracted} style={indicatorStyles} />\n      {React.Children.map(props.children, (child, index) => {\n        if (!React.isValidElement(child)) {\n          throw new Error(\n            `Child passed to SegmentedControlItemList is not a valid element`\n          )\n        }\n\n        return React.cloneElement(\n          child as React.ReactElement<\n            React.ComponentProps<typeof SegmentedControlItem>\n          >,\n          {\n            onClick: (e) => {\n              setHasInteracted(true)\n              if (child.props.onClick) child.props.onClick(e)\n            },\n            ref: (el) => (tabsRef.current[index] = el)\n          }\n        )\n      })}\n    </StyledTriggerList>\n  )\n}\n"],"names":["StyledTriggerList","styled","Tabs","SelectionIndicator","SegmentedControlItemList","props","theme","defaultValue","value","React","SegmentedControlContext","tabsRef","selectedIndex","child","indicatorStyles","setIndicatorStyles","hasInteracted","setHasInteracted","updateIndicatorPosition","currentTab","width","height","resizeObserver","currentTabs","tab","index","e","el"],"mappings":"+KAQA,MAAMA,EAAoBC,EAAOC,EAAK,YAAa,CACjD,KAAM,CACJ,WACA,MACA,aACA,kBACA,iCACA,gBACF,EACA,SAAU,CACR,MAAO,CACL,QAAS,CAAC,gBAAgB,EAC1B,MAAO,CAAC,cAAc,CACxB,CACF,CACF,CAAC,EAEKC,EAAqBF,EAAO,MAAO,CACvC,KAAM,CAAC,WAAY,WAAY,YAAY,EAC3C,SAAU,CACR,WAAY,CACV,KAAM,CAAC,eAAgB,UAAW,gBAAgB,EAClD,MAAO,CAAC,iBAAiB,CAC3B,CACF,CACF,CAAC,EAEYG,EACXC,GACgB,CAChB,KAAM,CAAE,MAAAC,EAAO,aAAAC,EAAc,MAAAC,CAAM,EAAIC,EAAM,WAC3CC,CACF,EAEMC,EAAUF,EAAM,OAA+B,CAAA,CAAE,EAEjDG,EAAgBH,EAAM,SAAS,QAAQJ,EAAM,QAAQ,EAAE,UAC1DQ,IAAWA,GAAA,KAAA,OAAAA,EAA8B,MAAM,SAAUL,CAC5D,EAEM,CAACM,EAAiBC,CAAkB,EAAIN,EAAM,SAAS,CAC3D,KAAM,EACN,OAAQ,EACR,MAAO,CACT,CAAC,EACK,CAACO,EAAeC,CAAgB,EAAIR,EAAM,SAAS,EAAK,EAExDS,EAA0BT,EAAM,YAAY,IAAM,CACtD,MAAMU,EAAaR,EAAQ,QAAQC,CAAa,EAChD,GAAI,CAACO,EAAY,OAEjB,KAAM,CAAE,MAAAC,EAAO,OAAAC,CAAO,EAAIF,EAAW,sBAAsB,EAC3DJ,EAAmB,CAAE,KAAMI,EAAW,WAAY,OAAAE,EAAQ,MAAAD,CAAM,CAAC,CACnE,EAAG,CAACR,CAAa,CAAC,EAElB,OAAAH,EAAM,UAAU,IAAM,CACpB,MAAMa,EAAiB,IAAI,eAAeJ,CAAuB,EAC3DK,EAAcZ,EAAQ,QAC5B,OAAAY,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,QAAQE,CAAG,CACrC,CAAC,EAEM,IAAM,CACXD,EAAY,QAASC,GAAQ,CACvBA,GAAKF,EAAe,UAAUE,CAAG,CACvC,CAAC,EACDF,EAAe,YACjB,CACF,EAAG,CAACV,EAAeM,CAAuB,CAAC,EAE3CT,EAAM,UAAU,KACd,OAAO,iBAAiB,SAAUS,CAAuB,EAClD,IAAM,CACX,OAAO,oBAAoB,SAAUA,CAAuB,CAC9D,GACC,CAACA,CAAuB,CAAC,EAE5BT,EAAM,UAAU,IAAM,CACpBS,EAAwB,CAC1B,EAAG,CAACN,EAAeM,CAAuB,CAAC,EAGzCT,EAAA,cAACT,EAAA,CAAkB,MAAOM,EAAO,aAAcC,EAAe,GAAGF,CAC/DI,EAAAA,EAAA,cAACN,EAAA,CAAmB,WAAYa,EAAe,MAAOF,CAAiB,CAAA,EACtEL,EAAM,SAAS,IAAIJ,EAAM,SAAU,CAACQ,EAAOY,IAAU,CACpD,GAAI,CAAChB,EAAM,eAAeI,CAAK,EAC7B,MAAM,IAAI,MACR,iEACF,EAGF,OAAOJ,EAAM,aACXI,EAGA,CACE,QAAUa,GAAM,CACdT,EAAiB,EAAI,EACjBJ,EAAM,MAAM,SAASA,EAAM,MAAM,QAAQa,CAAC,CAChD,EACA,IAAMC,GAAQhB,EAAQ,QAAQc,CAAK,EAAIE,CACzC,CACF,CACF,CAAC,CACH,CAEJ"}

package/dist/components/segmented-control/SegmentedControlRoot.js

@@ -1,2 +1,2 @@
-import*as o from"react";import{styled as v}from"../../styled.js";import{Tabs as c}from"../tabs/Tabs.js";import{SegmentedControlContext as f}from"./SegmentedControlContext.js";const p=v(c,{base:["[&>div]:border-none"],variants:{size:{sm:["w-[unset]"],md:[],lg:[]}}},{enabledResponsiveVariants:!0}),C=({size:n,theme:s="primary",defaultValue:e,children:i,...t})=>{const a=t.value!==void 0,[u,m]=o.useState(e),r=a?t.value:u,l=a?t.onValueChange:m;o.useEffect(()=>{!a&&e&&m(e)},[e,a]);const d=o.useMemo(()=>({size:n,theme:s,defaultValue:e,onValueChange:l,value:r}),[n,s,e,l,r]);return o.createElement(f.Provider,{value:d},o.createElement(p,{size:n,value:r,onValueChange:l,...t},i))};export{C as SegmentedControlRoot};
+import*as o from"react";import{styled as v}from"../../styled.js";import{Tabs as c}from"../tabs/Tabs.js";import{SegmentedControlContext as f}from"./SegmentedControlContext.js";const p=v(c,{base:["[&>div]:border-none"],variants:{size:{sm:["w-[unset]!"],md:[],lg:[]}}},{enabledResponsiveVariants:!0}),C=({size:n,theme:s="primary",defaultValue:e,children:i,...t})=>{const a=t.value!==void 0,[u,m]=o.useState(e),r=a?t.value:u,l=a?t.onValueChange:m;o.useEffect(()=>{!a&&e&&m(e)},[e,a]);const d=o.useMemo(()=>({size:n,theme:s,defaultValue:e,onValueChange:l,value:r}),[n,s,e,l,r]);return o.createElement(f.Provider,{value:d},o.createElement(p,{size:n,value:r,onValueChange:l,...t},i))};export{C as SegmentedControlRoot};
 //# sourceMappingURL=SegmentedControlRoot.js.map

package/dist/components/segmented-control/SegmentedControlRoot.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControlRoot.js","sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledSegmentedControlRoot = styled(\n  Tabs,\n  {\n    base: ['[&>div]:border-none'],\n    variants: {\n      size: {\n        sm: ['w-[unset]'],\n        md: [],\n        lg: []\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport interface SegmentedControlRootProps\n  extends React.ComponentProps<typeof StyledSegmentedControlRoot> {\n  theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n  size,\n  theme = 'primary',\n  defaultValue,\n  children,\n  ...props\n}: React.PropsWithChildren<SegmentedControlRootProps>): React.JSX.Element => {\n  const isControlled = props.value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? props.value : internalValue\n  const handleValueChange = isControlled\n    ? props.onValueChange\n    : setInternalValue\n\n  React.useEffect(() => {\n    if (!isControlled && defaultValue) {\n      setInternalValue(defaultValue)\n    }\n  }, [defaultValue, isControlled])\n\n  const value = React.useMemo(\n    () => ({\n      size,\n      theme,\n      defaultValue,\n      onValueChange: handleValueChange,\n      value: currentValue\n    }),\n    [size, theme, defaultValue, handleValueChange, currentValue]\n  )\n\n  return (\n    <SegmentedControlContext.Provider value={value}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...props}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext.Provider>\n  )\n}\n"],"names":["StyledSegmentedControlRoot","styled","Tabs","SegmentedControlRoot","size","theme","defaultValue","children","props","isControlled","internalValue","setInternalValue","React","currentValue","handleValueChange","value","SegmentedControlContext"],"mappings":"+KAQA,MAAMA,EAA6BC,EACjCC,EACA,CACE,KAAM,CAAC,qBAAqB,EAC5B,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,WAAW,EAChB,GAAI,GACJ,GAAI,CACN,CAAA,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAOaC,EAAuB,CAAC,CACnC,KAAAC,EACA,MAAAC,EAAQ,UACR,aAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAA6E,CAC3E,MAAMC,EAAeD,EAAM,QAAU,OAE/B,CAACE,EAAeC,CAAgB,EAAIC,EAAM,SAASN,CAAY,EAE/DO,EAAeJ,EAAeD,EAAM,MAAQE,EAC5CI,EAAoBL,EACtBD,EAAM,cACNG,EAEJC,EAAM,UAAU,IAAM,CAChB,CAACH,GAAgBH,GACnBK,EAAiBL,CAAY,CAEjC,EAAG,CAACA,EAAcG,CAAY,CAAC,EAE/B,MAAMM,EAAQH,EAAM,QAClB,KAAO,CACL,KAAAR,EACA,MAAAC,EACA,aAAAC,EACA,cAAeQ,EACf,MAAOD,CACT,GACA,CAACT,EAAMC,EAAOC,EAAcQ,EAAmBD,CAAY,CAC7D,EAEA,OACED,EAAA,cAACI,EAAwB,SAAxB,CAAiC,MAAOD,CACvCH,EAAAA,EAAA,cAACZ,EAAA,CACC,KAAMI,EACN,MAAOS,EACP,cAAeC,EACd,GAAGN,CAEHD,EAAAA,CACH,CACF,CAEJ"}
+{"version":3,"file":"SegmentedControlRoot.js","sources":["../../../src/components/segmented-control/SegmentedControlRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Tabs } from '../tabs'\nimport type { SegmentedControlTheme } from './SegmentedControl.types'\nimport { SegmentedControlContext } from './SegmentedControlContext'\n\nconst StyledSegmentedControlRoot = styled(\n  Tabs,\n  {\n    base: ['[&>div]:border-none'],\n    variants: {\n      size: {\n        sm: ['w-[unset]!'],\n        md: [],\n        lg: []\n      }\n    }\n  },\n  { enabledResponsiveVariants: true }\n)\n\nexport interface SegmentedControlRootProps\n  extends React.ComponentProps<typeof StyledSegmentedControlRoot> {\n  theme?: SegmentedControlTheme\n}\n\nexport const SegmentedControlRoot = ({\n  size,\n  theme = 'primary',\n  defaultValue,\n  children,\n  ...props\n}: React.PropsWithChildren<SegmentedControlRootProps>): React.JSX.Element => {\n  const isControlled = props.value !== undefined\n\n  const [internalValue, setInternalValue] = React.useState(defaultValue)\n\n  const currentValue = isControlled ? props.value : internalValue\n  const handleValueChange = isControlled\n    ? props.onValueChange\n    : setInternalValue\n\n  React.useEffect(() => {\n    if (!isControlled && defaultValue) {\n      setInternalValue(defaultValue)\n    }\n  }, [defaultValue, isControlled])\n\n  const value = React.useMemo(\n    () => ({\n      size,\n      theme,\n      defaultValue,\n      onValueChange: handleValueChange,\n      value: currentValue\n    }),\n    [size, theme, defaultValue, handleValueChange, currentValue]\n  )\n\n  return (\n    <SegmentedControlContext.Provider value={value}>\n      <StyledSegmentedControlRoot\n        size={size}\n        value={currentValue}\n        onValueChange={handleValueChange}\n        {...props}\n      >\n        {children}\n      </StyledSegmentedControlRoot>\n    </SegmentedControlContext.Provider>\n  )\n}\n"],"names":["StyledSegmentedControlRoot","styled","Tabs","SegmentedControlRoot","size","theme","defaultValue","children","props","isControlled","internalValue","setInternalValue","React","currentValue","handleValueChange","value","SegmentedControlContext"],"mappings":"+KAQA,MAAMA,EAA6BC,EACjCC,EACA,CACE,KAAM,CAAC,qBAAqB,EAC5B,SAAU,CACR,KAAM,CACJ,GAAI,CAAC,YAAY,EACjB,GAAI,GACJ,GAAI,CACN,CAAA,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAOaC,EAAuB,CAAC,CACnC,KAAAC,EACA,MAAAC,EAAQ,UACR,aAAAC,EACA,SAAAC,EACA,GAAGC,CACL,IAA6E,CAC3E,MAAMC,EAAeD,EAAM,QAAU,OAE/B,CAACE,EAAeC,CAAgB,EAAIC,EAAM,SAASN,CAAY,EAE/DO,EAAeJ,EAAeD,EAAM,MAAQE,EAC5CI,EAAoBL,EACtBD,EAAM,cACNG,EAEJC,EAAM,UAAU,IAAM,CAChB,CAACH,GAAgBH,GACnBK,EAAiBL,CAAY,CAEjC,EAAG,CAACA,EAAcG,CAAY,CAAC,EAE/B,MAAMM,EAAQH,EAAM,QAClB,KAAO,CACL,KAAAR,EACA,MAAAC,EACA,aAAAC,EACA,cAAeQ,EACf,MAAOD,CACT,GACA,CAACT,EAAMC,EAAOC,EAAcQ,EAAmBD,CAAY,CAC7D,EAEA,OACED,EAAA,cAACI,EAAwB,SAAxB,CAAiC,MAAOD,CACvCH,EAAAA,EAAA,cAACZ,EAAA,CACC,KAAMI,EACN,MAAOS,EACP,cAAeC,EACd,GAAGN,CAEHD,EAAAA,CACH,CACF,CAEJ"}

package/dist/components/side-bar/SideBarComponents.d.ts

@@ -37,7 +37,7 @@ export declare const SideBarBrandName: import("react").ForwardRefExoticComponent
 } & {
     as?: import("react").ElementType;
 }, "as"> & {
-    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | React.ComponentType | React.ElementType;
+    as?: "blockquote" | "caption" | "dd" | "dt" | "figcaption" | "li" | "p" | "span" | "legend" | import("react").ComponentType | import("react").ElementType;
 }, "ref"> & import("react").RefAttributes<HTMLParagraphElement>, never> & {
     as?: import("react").ElementType;
 }>;

package/dist/components/skeleton-loader/Skeleton.d.ts

@@ -0,0 +1,5 @@
+export declare const SkeletonLoader: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never> & {
+    as?: import("react").ElementType;
+}>;

package/dist/components/skeleton-loader/Skeleton.js

@@ -0,0 +1,2 @@
+import{styled as o}from"../../styled.js";const e=o("div",{base:["bg-grey-300","size-16","animate-[shimmer]"]});e.displayName="Skeleton";export{e as SkeletonLoader};
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/skeleton-loader/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../src/components/skeleton-loader/Skeleton.tsx"],"sourcesContent":["import {  styled } from '~/styled'\n\n\nexport const SkeletonLoader = styled('div', {\n  base: [\n    'bg-grey-300',\n    'size-16',\n    'animate-[shimmer]'\n  ]\n})\n\n\nSkeletonLoader.displayName = 'Skeleton'\n"],"names":["SkeletonLoader","styled"],"mappings":"yCAGa,MAAAA,EAAiBC,EAAO,MAAO,CAC1C,KAAM,CACJ,cACA,UACA,mBACF,CACF,CAAC,EAGDD,EAAe,YAAc"}

package/dist/components/skeleton-loader/SkeletonButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SkeletonLoader } from './Skeleton';
+export declare const SkeletonButton: ({ className }: {
+    className?: React.ComponentProps<typeof SkeletonLoader>["className"];
+}) => React.JSX.Element;

package/dist/components/skeleton-loader/SkeletonButton.js

@@ -0,0 +1,2 @@
+import o from"react";import{SkeletonLoader as t}from"./Skeleton.js";import m from"clsx";const r=({className:e})=>o.createElement(t,{className:m("w-[10rem]","h-8","rounded-sm",e)});export{r as SkeletonButton};
+//# sourceMappingURL=SkeletonButton.js.map

package/dist/components/skeleton-loader/SkeletonButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonButton.js","sources":["../../../src/components/skeleton-loader/SkeletonButton.tsx"],"sourcesContent":["import React from 'react'\n\n\nimport { SkeletonLoader } from './Skeleton'\nimport clsx from \"clsx\";\n\nexport const SkeletonButton = ({ className }: { className?: React.ComponentProps<typeof SkeletonLoader>['className'] }) => (\n  <SkeletonLoader className={clsx('w-[10rem]', 'h-8', 'rounded-sm', className)}\n  />\n)\n"],"names":["SkeletonButton","className","React","SkeletonLoader","clsx"],"mappings":"wFAMa,MAAAA,EAAiB,CAAC,CAAE,UAAAC,CAAU,IACzCC,EAAA,cAACC,EAAA,CAAe,UAAWC,EAAK,YAAa,MAAO,aAAcH,CAAS,CAC3E,CAAA"}

package/dist/components/skeleton-loader/SkeletonHeading.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { SkeletonLoader } from './Skeleton';
+export declare const SkeletonHeading: ({ className }: {
+    className?: React.ComponentProps<typeof SkeletonLoader>["className"];
+}) => React.JSX.Element;

package/dist/components/skeleton-loader/SkeletonHeading.js

@@ -0,0 +1,2 @@
+import o from"react";import{SkeletonLoader as r}from"./Skeleton.js";import t from"clsx";const m=({className:e})=>o.createElement(r,{className:t("w-64","h-6","rounded-2xl",e)});export{m as SkeletonHeading};
+//# sourceMappingURL=SkeletonHeading.js.map

package/dist/components/skeleton-loader/SkeletonHeading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonHeading.js","sources":["../../../src/components/skeleton-loader/SkeletonHeading.tsx"],"sourcesContent":["import React from 'react'\n\n\nimport { SkeletonLoader } from './Skeleton'\nimport clsx from \"clsx\";\n\nexport const SkeletonHeading = ({ className }: { className?: React.ComponentProps<typeof SkeletonLoader>['className'] }) => (\n  <SkeletonLoader className={clsx('w-64', 'h-6', 'rounded-2xl', className)}\n  />\n)\n"],"names":["SkeletonHeading","className","React","SkeletonLoader","clsx"],"mappings":"wFAMa,MAAAA,EAAkB,CAAC,CAAE,UAAAC,CAAU,IAC1CC,EAAA,cAACC,EAAA,CAAe,UAAWC,EAAK,OAAQ,MAAO,cAAeH,CAAS,CACvE,CAAA"}

package/dist/components/skeleton-loader/SkeletonTabs.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const SkeletonTabs: ({ numberOfTabs, containerCss, tabCss }: {
+    numberOfTabs: number;
+    containerCss?: string;
+    tabCss?: string;
+}) => React.JSX.Element;

package/dist/components/skeleton-loader/SkeletonTabs.js

@@ -0,0 +1,2 @@
+import r from"react";import{Tile as l}from"../tile/Tile.js";import"../flex/Flex.js";import{SkeletonLoader as n}from"./Skeleton.js";import o from"clsx";const p=({numberOfTabs:t,containerCss:m,tabCss:a})=>r.createElement(l,{className:o("p-6","flex-row","gap-4",m)},Array.from({length:t},(e,s)=>`tab_${s}`).map(e=>r.createElement(n,{key:e,className:o("w-32","h-6","rounded-sm",a)})));export{p as SkeletonTabs};
+//# sourceMappingURL=SkeletonTabs.js.map

package/dist/components/skeleton-loader/SkeletonTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonTabs.js","sources":["../../../src/components/skeleton-loader/SkeletonTabs.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Tile } from '../tile'\nimport { SkeletonLoader } from './Skeleton'\nimport clsx from \"clsx\";\n\nexport const SkeletonTabs = ({\n  numberOfTabs,\n  containerCss,\n  tabCss\n}: {\n  numberOfTabs: number\n  containerCss?: string\n  tabCss?: string\n}) => (\n  <Tile className={clsx('p-6', 'flex-row', 'gap-4', containerCss)}>\n    {Array.from(\n      {\n        length: numberOfTabs\n      },\n      (_, index) => `tab_${index}`\n    ).map((key) => (\n      <SkeletonLoader\n        key={key} className={clsx('w-32', 'h-6', 'rounded-sm', tabCss)}\n      />\n    ))}\n  </Tile>\n)\n"],"names":["SkeletonTabs","numberOfTabs","containerCss","tabCss","React","Tile","clsx","_","index","key","SkeletonLoader"],"mappings":"uJAMa,MAAAA,EAAe,CAAC,CAC3B,aAAAC,EACA,aAAAC,EACA,OAAAC,CACF,IAKEC,EAAA,cAACC,EAAA,CAAK,UAAWC,EAAK,MAAO,WAAY,QAASJ,CAAY,CAC3D,EAAA,MAAM,KACL,CACE,OAAQD,CACV,EACA,CAACM,EAAGC,IAAU,OAAOA,CAAK,EAC5B,EAAE,IAAKC,GACLL,EAAA,cAACM,EAAA,CACC,IAAKD,EAAK,UAAWH,EAAK,OAAQ,MAAO,aAAcH,CAAM,CAAA,CAC/D,CACD,CACH"}

package/dist/components/skeleton-loader/index.d.ts

@@ -0,0 +1,4 @@
+export { SkeletonLoader as Loader } from './Skeleton';
+export { SkeletonHeading as Heading } from './SkeletonHeading';
+export { SkeletonButton as Button } from './SkeletonButton';
+export { SkeletonTabs as Tabs } from './SkeletonTabs';

package/dist/components/skeleton-loader/index.js

@@ -0,0 +1,2 @@
+import{SkeletonLoader as t}from"./Skeleton.js";import{SkeletonHeading as r}from"./SkeletonHeading.js";import{SkeletonButton as s}from"./SkeletonButton.js";import{SkeletonTabs as f}from"./SkeletonTabs.js";export{s as Button,r as Heading,t as Loader,f as Tabs};
+//# sourceMappingURL=index.js.map

package/dist/components/skeleton-loader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/sortable/index.d.ts

@@ -1,7 +1,7 @@
 export declare const Sortable: {
     Root: {
-        ({ sortableIds, onSortChange, children }: React.PropsWithChildren<{
-            sortableIds: React.ReactText[];
+        ({ sortableIds, onSortChange, children }: import("react").PropsWithChildren<{
+            sortableIds: import("react").ReactText[];
             onSortChange: (onSortChangeData: {
                 order: import("@dnd-kit/core").UniqueIdentifier[];
                 oldIndex: number;
@@ -11,7 +11,7 @@ export declare const Sortable: {
         displayName: string;
     };
     Item: {
-        ({ id, asChild, className, style, isDragHandle, disabled, ...rest }: React.PropsWithChildren<import("./SortableItem").TSortableItemProps>): import("react").JSX.Element;
+        ({ id, asChild, className, style, isDragHandle, disabled, ...rest }: import("react").PropsWithChildren<import("./SortableItem").TSortableItemProps>): import("react").JSX.Element;
         displayName: string;
     };
     Handle: {

package/dist/components/stepper/StepperStepBullet.js

@@ -1,2 +1,2 @@
-import{styled as e}from"../../styled.js";import{Flex as t}from"../flex/Flex.js";const r=e(t,{base:["relative","p-2","justify-center","items-center","size-8","rounded-[50%]","border-none","bg-grey-200","z-1","flex-none"],variants:{status:{default:["bg-grey-200","text-grey-700"],active:["bg-white","border-2","border-current","text-primary-900"],viewed:["bg-white","border-2","border-grey-600","text-grey-1000"],completed:["bg-primary-800","text-white"],reviewed:["bg-primary-900","text-white"],success:["bg-success","text-white"]}}});export{r as StepperStepBullet};
+import{styled as e}from"../../styled.js";import{Flex as t}from"../flex/Flex.js";const r=e(t,{base:["relative","p-2","justify-center","items-center","size-8","rounded-[50%]","border-0","bg-grey-200","z-1","flex-none"],variants:{status:{default:["bg-grey-200","text-grey-700"],active:["bg-white","border-2","border-current","text-primary-900"],viewed:["bg-white","border-2","border-grey-600","text-grey-1000"],completed:["bg-primary-800","text-white"],reviewed:["bg-primary-900","text-white"],success:["bg-success","text-white"]}}});export{r as StepperStepBullet};
 //# sourceMappingURL=StepperStepBullet.js.map