@atom-learning/components 9.0.0 → 10.0.0

package/dist/components/navigation/NavigationMenu.js

@@ -34,10 +34,10 @@ var ViewportPosition = styled("div", { base: [
 var NavigationMenuComponent = ({ children, className, ...rest }) => {
 	const [offset, setOffset] = React$1.useState();
 	const [activeItem, setActiveItem] = React$1.useState();
-	const [listWidth, setListWidth] = React$1.useState(0);
 	const listRef = React$1.useRef(null);
-	React$1.useEffect(() => {
-		if (listRef.current) setListWidth(listRef.current.offsetWidth);
+	const listWidthRef = React$1.useRef(0);
+	React$1.useLayoutEffect(() => {
+		if (listRef.current) listWidthRef.current = listRef.current.offsetWidth;
 	}, [React$1.Children.toArray(children).length]);
 	React$1.useEffect(() => {
 		let timer;
@@ -46,16 +46,17 @@ var NavigationMenuComponent = ({ children, className, ...rest }) => {
 			if (timer !== null) clearTimeout(timer);
 		};
 	}, [activeItem]);
-	const onNodeUpdate = (trigger, itemValue) => {
+	const onNodeUpdate = React$1.useCallback((trigger, itemValue) => {
+		const listWidth = listWidthRef.current;
 		if (trigger && listWidth && activeItem === itemValue) {
 			const listCenter = listWidth / 2;
 			const triggerOffsetRight = listWidth - trigger.offsetLeft - trigger.offsetWidth + trigger.offsetWidth / 2;
 			setOffset(Math.round(listCenter - triggerOffsetRight));
 		}
 		return trigger;
-	};
-	return /* @__PURE__ */ jsx(NavigationMenuContext.Provider, {
-		value: { onNodeUpdate },
+	}, [activeItem]);
+	return /* @__PURE__ */ jsx(NavigationMenuContext, {
+		value: React$1.useMemo(() => ({ onNodeUpdate }), [onNodeUpdate]),
 		children: /* @__PURE__ */ jsxs(StyledMenu, {
 			className: cn(className),
 			style: colorSchemes["light"],

package/dist/components/navigation/NavigationMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenu.context'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n  NavigationMenuDropdownItem,\n  NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n  base: ['flex', 'justify-center', 'relative']\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n  base: ['flex', 'justify-center', 'items-center', 'gap-1', 'list-none']\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n  base: ['z-2147483647']\n})\n\nconst ViewportPosition = styled('div', {\n  base: ['absolute', 'left-0', 'top-full', 'w-full', 'flex', 'justify-center']\n})\n\nconst NavigationMenuComponent = ({\n  children,\n  className,\n  ...rest\n}: React.ComponentProps<typeof StyledMenu>) => {\n  const [offset, setOffset] = React.useState<number | null | undefined>()\n  const [activeItem, setActiveItem] = React.useState<string | undefined>()\n  const [listWidth, setListWidth] = React.useState(0)\n  const listRef = React.useRef<HTMLUListElement>(null)\n\n  React.useEffect(() => {\n    if (listRef.current) {\n      setListWidth(listRef.current.offsetWidth)\n    }\n  }, [React.Children.toArray(children).length])\n\n  React.useEffect(() => {\n    let timer: ReturnType<typeof setTimeout>\n\n    // Delay transitioning back to initial position\n    // to allow enough time for fadeOut animation to complete\n    if (activeItem === '') {\n      timer = setTimeout(() => setOffset(null), 200)\n    }\n\n    return () => {\n      if (timer !== null) {\n        clearTimeout(timer)\n      }\n    }\n  }, [activeItem])\n\n  // https://github.com/radix-ui/primitives/issues/1462\n  const onNodeUpdate = (trigger: HTMLButtonElement, itemValue: string) => {\n    if (trigger && listWidth && activeItem === itemValue) {\n      const listCenter = listWidth / 2\n\n      const triggerOffsetRight =\n        listWidth -\n        trigger.offsetLeft -\n        trigger.offsetWidth +\n        trigger.offsetWidth / 2\n\n      setOffset(Math.round(listCenter - triggerOffsetRight))\n    }\n\n    return trigger\n  }\n\n  return (\n    <NavigationMenuContext.Provider value={{ onNodeUpdate }}>\n      <StyledMenu\n        className={cn(className)}\n        style={navigationMenuColorSchemes['light']}\n        onValueChange={setActiveItem}\n        {...rest}\n      >\n        <StyledList ref={listRef}>{children}</StyledList>\n        <ViewportPosition>\n          <StyledViewport\n            style={{ '--navigation-menu-viewport-offset': `${offset || 0}px` }}\n            className={cn([\n              'data-[state=open]:animate-fade-in',\n              'data-[state=closed]:animate-fade-out',\n              'translate-x-(--navigation-menu-viewport-offset)'\n            ])}\n          />\n        </ViewportPosition>\n      </StyledMenu>\n    </NavigationMenuContext.Provider>\n  )\n}\n\nexport const NavigationMenu = /* @__PURE__ */ Object.assign(\n  NavigationMenuComponent,\n  {\n    Link: NavigationMenuLink,\n    Dropdown: NavigationMenuDropdown,\n    DropdownContent: NavigationMenuDropdownContent,\n    DropdownItem: NavigationMenuDropdownItem,\n    DropdownItemTitle: NavigationMenuDropdownItemTitle,\n    DropdownTrigger: NavigationMenuDropdownTrigger\n  }\n)\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;;AAeA,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;AAAU,EAC7C,CAAC;AAED,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;CAAS;AAAW,EACvE,CAAC;AAED,IAAM,iBAAiB,OAAO,wBAAwB,UAAU,EAC9D,MAAM,CAAC,cAAc,EACvB,CAAC;AAED,IAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;AAAgB,EAC7E,CAAC;AAED,IAAM,2BAA2B,EAC/B,UACA,WACA,GAAG,WAC0C;CAC7C,MAAM,CAAC,QAAQ,aAAa,QAAM,SAAoC;CACtE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAA6B;CACvE,MAAM,CAAC,WAAW,gBAAgB,QAAM,SAAS,CAAC;CAClD,MAAM,UAAU,QAAM,OAAyB,IAAI;CAEnD,QAAM,gBAAgB;EACpB,IAAI,QAAQ,SACV,aAAa,QAAQ,QAAQ,WAAW;CAE5C,GAAG,CAAC,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,CAAC;CAE5C,QAAM,gBAAgB;EACpB,IAAI;EAIJ,IAAI,eAAe,IACjB,QAAQ,iBAAiB,UAAU,IAAI,GAAG,GAAG;EAG/C,aAAa;GACX,IAAI,UAAU,MACZ,aAAa,KAAK;EAEtB;CACF,GAAG,CAAC,UAAU,CAAC;CAGf,MAAM,gBAAgB,SAA4B,cAAsB;EACtE,IAAI,WAAW,aAAa,eAAe,WAAW;GACpD,MAAM,aAAa,YAAY;GAE/B,MAAM,qBACJ,YACA,QAAQ,aACR,QAAQ,cACR,QAAQ,cAAc;GAExB,UAAU,KAAK,MAAM,aAAa,kBAAkB,CAAC;EACvD;EAEA,OAAO;CACT;CAEA,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO,EAAE,aAAa;YACpD,qBAAC,YAAD;GACE,WAAW,GAAG,SAAS;GACvB,OAAO,aAA2B;GAClC,eAAe;GACf,GAAI;aAJN,CAME,oBAAC,YAAD;IAAY,KAAK;IAAU;GAAqB,CAAA,GAChD,oBAAC,kBAAD,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,qCAAqC,GAAG,UAAU,EAAE,IAAI;IACjE,WAAW,GAAG;KACZ;KACA;KACA;IACF,CAAC;GACF,CAAA,EACe,CAAA,CACR;;CACkB,CAAA;AAEpC;AAEA,IAAa,iBAAiC,uBAAO,OACnD,yBACA;CACE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;AACnB,CACF;AAEA,wBAAwB,cAAc"}
+{"version":3,"file":"NavigationMenu.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { colorSchemes as navigationMenuColorSchemes } from './NavigationMenu.colorscheme.config'\nimport { NavigationMenuContext } from './NavigationMenu.context'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n  NavigationMenuDropdownItem,\n  NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n  base: ['flex', 'justify-center', 'relative']\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n  base: ['flex', 'justify-center', 'items-center', 'gap-1', 'list-none']\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n  base: ['z-2147483647']\n})\n\nconst ViewportPosition = styled('div', {\n  base: ['absolute', 'left-0', 'top-full', 'w-full', 'flex', 'justify-center']\n})\n\nconst NavigationMenuComponent = ({\n  children,\n  className,\n  ...rest\n}: React.ComponentProps<typeof StyledMenu>) => {\n  const [offset, setOffset] = React.useState<number | null | undefined>()\n  const [activeItem, setActiveItem] = React.useState<string | undefined>()\n  const listRef = React.useRef<HTMLUListElement>(null)\n  const listWidthRef = React.useRef(0)\n\n  // Cache the resting list width. It must be measured while the menu is closed:\n  // as a dropdown opens, its content is briefly laid out inline in the trigger\n  // row, so a width read during the open transition is inflated. Held in a ref\n  // (not state) since it only feeds the imperative offset calc below and never\n  // renders. Re-measured when the item count changes; stale on resize.\n  React.useLayoutEffect(() => {\n    if (listRef.current) {\n      listWidthRef.current = listRef.current.offsetWidth\n    }\n  }, [React.Children.toArray(children).length])\n\n  React.useEffect(() => {\n    let timer: ReturnType<typeof setTimeout>\n\n    // Delay transitioning back to initial position\n    // to allow enough time for fadeOut animation to complete\n    if (activeItem === '') {\n      timer = setTimeout(() => setOffset(null), 200)\n    }\n\n    return () => {\n      if (timer !== null) {\n        clearTimeout(timer)\n      }\n    }\n  }, [activeItem])\n\n  // Radix has no built-in way to align the viewport with the active trigger, so\n  // the offset is computed here. https://github.com/radix-ui/primitives/issues/1462\n  const onNodeUpdate = React.useCallback(\n    (trigger: HTMLButtonElement, itemValue: string) => {\n      const listWidth = listWidthRef.current\n      if (trigger && listWidth && activeItem === itemValue) {\n        const listCenter = listWidth / 2\n\n        const triggerOffsetRight =\n          listWidth -\n          trigger.offsetLeft -\n          trigger.offsetWidth +\n          trigger.offsetWidth / 2\n\n        setOffset(Math.round(listCenter - triggerOffsetRight))\n      }\n\n      return trigger\n    },\n    [activeItem]\n  )\n\n  const contextValue = React.useMemo(() => ({ onNodeUpdate }), [onNodeUpdate])\n\n  return (\n    <NavigationMenuContext value={contextValue}>\n      <StyledMenu\n        className={cn(className)}\n        style={navigationMenuColorSchemes['light']}\n        onValueChange={setActiveItem}\n        {...rest}\n      >\n        <StyledList ref={listRef}>{children}</StyledList>\n        <ViewportPosition>\n          <StyledViewport\n            style={{ '--navigation-menu-viewport-offset': `${offset || 0}px` }}\n            className={cn([\n              'data-[state=open]:animate-fade-in',\n              'data-[state=closed]:animate-fade-out',\n              'translate-x-(--navigation-menu-viewport-offset)'\n            ])}\n          />\n        </ViewportPosition>\n      </StyledMenu>\n    </NavigationMenuContext>\n  )\n}\n\nexport const NavigationMenu = /* @__PURE__ */ Object.assign(\n  NavigationMenuComponent,\n  {\n    Link: NavigationMenuLink,\n    Dropdown: NavigationMenuDropdown,\n    DropdownContent: NavigationMenuDropdownContent,\n    DropdownItem: NavigationMenuDropdownItem,\n    DropdownItemTitle: NavigationMenuDropdownItemTitle,\n    DropdownTrigger: NavigationMenuDropdownTrigger\n  }\n)\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"mappings":";;;;;;;;;;;;AAeA,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;AAAU,EAC7C,CAAC;AAED,IAAM,aAAa,OAAO,wBAAwB,MAAM,EACtD,MAAM;CAAC;CAAQ;CAAkB;CAAgB;CAAS;AAAW,EACvE,CAAC;AAED,IAAM,iBAAiB,OAAO,wBAAwB,UAAU,EAC9D,MAAM,CAAC,cAAc,EACvB,CAAC;AAED,IAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CAAC;CAAY;CAAU;CAAY;CAAU;CAAQ;AAAgB,EAC7E,CAAC;AAED,IAAM,2BAA2B,EAC/B,UACA,WACA,GAAG,WAC0C;CAC7C,MAAM,CAAC,QAAQ,aAAa,QAAM,SAAoC;CACtE,MAAM,CAAC,YAAY,iBAAiB,QAAM,SAA6B;CACvE,MAAM,UAAU,QAAM,OAAyB,IAAI;CACnD,MAAM,eAAe,QAAM,OAAO,CAAC;CAOnC,QAAM,sBAAsB;EAC1B,IAAI,QAAQ,SACV,aAAa,UAAU,QAAQ,QAAQ;CAE3C,GAAG,CAAC,QAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,MAAM,CAAC;CAE5C,QAAM,gBAAgB;EACpB,IAAI;EAIJ,IAAI,eAAe,IACjB,QAAQ,iBAAiB,UAAU,IAAI,GAAG,GAAG;EAG/C,aAAa;GACX,IAAI,UAAU,MACZ,aAAa,KAAK;EAEtB;CACF,GAAG,CAAC,UAAU,CAAC;CAIf,MAAM,eAAe,QAAM,aACxB,SAA4B,cAAsB;EACjD,MAAM,YAAY,aAAa;EAC/B,IAAI,WAAW,aAAa,eAAe,WAAW;GACpD,MAAM,aAAa,YAAY;GAE/B,MAAM,qBACJ,YACA,QAAQ,aACR,QAAQ,cACR,QAAQ,cAAc;GAExB,UAAU,KAAK,MAAM,aAAa,kBAAkB,CAAC;EACvD;EAEA,OAAO;CACT,GACA,CAAC,UAAU,CACb;CAIA,OACE,oBAAC,uBAAD;EAAuB,OAHJ,QAAM,eAAe,EAAE,aAAa,IAAI,CAAC,YAAY,CAG1C;YAC5B,qBAAC,YAAD;GACE,WAAW,GAAG,SAAS;GACvB,OAAO,aAA2B;GAClC,eAAe;GACf,GAAI;aAJN,CAME,oBAAC,YAAD;IAAY,KAAK;IAAU;GAAqB,CAAA,GAChD,oBAAC,kBAAD,EAAA,UACE,oBAAC,gBAAD;IACE,OAAO,EAAE,qCAAqC,GAAG,UAAU,EAAE,IAAI;IACjE,WAAW,GAAG;KACZ;KACA;KACA;IACF,CAAC;GACF,CAAA,EACe,CAAA,CACR;;CACS,CAAA;AAE3B;AAEA,IAAa,iBAAiC,uBAAO,OACnD,yBACA;CACE,MAAM;CACN,UAAU;CACV,iBAAiB;CACjB,cAAc;CACd,mBAAmB;CACnB,iBAAiB;AACnB,CACF;AAEA,wBAAwB,cAAc"}

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordion.d.ts

@@ -2,8 +2,8 @@ import { Root } from '@radix-ui/react-collapsible';
 import * as React from 'react';
 import { NavigationMenuVerticalItem } from './NavigationMenuVerticalItem';
 type NavigationMenuVerticalAccordionContextValue = {
-    triggerRef?: React.MutableRefObject<HTMLElement | null>;
-    setTriggerRef?: (HTMLElement: any) => void;
+    triggerRef?: React.RefObject<HTMLElement | null>;
+    setTriggerRef?: (el: HTMLElement | null) => void | (() => void);
 };
 export declare const NavigationMenuVerticalAccordionContext: React.Context<NavigationMenuVerticalAccordionContextValue>;
 type NavigationMenuVerticalAccordionProps = React.ComponentProps<typeof Root> & React.ComponentProps<typeof NavigationMenuVerticalItem>;

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordion.js

@@ -7,11 +7,11 @@ import { Root } from "@radix-ui/react-collapsible";
 var NavigationMenuVerticalAccordionContext = React$1.createContext({});
 var NavigationMenuVerticalAccordionProvider = ({ children }) => {
 	const [triggerRef, setTriggerRef] = useCallbackRef();
-	return /* @__PURE__ */ jsx(NavigationMenuVerticalAccordionContext.Provider, {
-		value: {
+	return /* @__PURE__ */ jsx(NavigationMenuVerticalAccordionContext, {
+		value: React$1.useMemo(() => ({
 			triggerRef,
 			setTriggerRef
-		},
+		}), [triggerRef, setTriggerRef]),
 		children
 	});
 };

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalAccordion.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordion.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-collapsible'\nimport * as React from 'react'\n\nimport { useCallbackRef } from '../../utilities/hooks/useCallbackRef'\nimport { NavigationMenuVerticalItem } from './NavigationMenuVerticalItem'\n\ntype NavigationMenuVerticalAccordionContextValue = {\n  triggerRef?: React.MutableRefObject<HTMLElement | null>\n  setTriggerRef?: (HTMLElement) => void\n}\nexport const NavigationMenuVerticalAccordionContext =\n  React.createContext<NavigationMenuVerticalAccordionContextValue>({})\nconst NavigationMenuVerticalAccordionProvider = ({ children }) => {\n  const [triggerRef, setTriggerRef] = useCallbackRef()\n  return (\n    <NavigationMenuVerticalAccordionContext.Provider\n      value={{ triggerRef, setTriggerRef }}\n    >\n      {children}\n    </NavigationMenuVerticalAccordionContext.Provider>\n  )\n}\n\ntype NavigationMenuVerticalAccordionProps = React.ComponentProps<typeof Root> &\n  React.ComponentProps<typeof NavigationMenuVerticalItem>\nexport const NavigationMenuVerticalAccordion = ({\n  defaultOpen,\n  open,\n  onOpenChange,\n  disabled,\n  ...rest\n}: NavigationMenuVerticalAccordionProps) => {\n  const collapsibleProps = { defaultOpen, open, onOpenChange, disabled }\n  return (\n    <NavigationMenuVerticalAccordionProvider>\n      <Root {...collapsibleProps} asChild>\n        <NavigationMenuVerticalItem {...rest} />\n      </Root>\n    </NavigationMenuVerticalAccordionProvider>\n  )\n}\n"],"mappings":";;;;;;AAUA,IAAa,yCACX,QAAM,cAA2D,CAAC,CAAC;AACrE,IAAM,2CAA2C,EAAE,eAAe;CAChE,MAAM,CAAC,YAAY,iBAAiB,eAAe;CACnD,OACE,oBAAC,uCAAuC,UAAxC;EACE,OAAO;GAAE;GAAY;EAAc;EAElC;CAC8C,CAAA;AAErD;AAIA,IAAa,mCAAmC,EAC9C,aACA,MACA,cACA,UACA,GAAG,WACuC;CAE1C,OACE,oBAAC,yCAAD,EAAA,UACE,oBAAC,MAAD;EAHuB;EAAa;EAAM;EAAc;EAG5B,SAAA;YAC1B,oBAAC,4BAAD,EAA4B,GAAI,KAAO,CAAA;CACnC,CAAA,EACiC,CAAA;AAE7C"}
+{"version":3,"file":"NavigationMenuVerticalAccordion.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordion.tsx"],"sourcesContent":["import { Root } from '@radix-ui/react-collapsible'\nimport * as React from 'react'\n\nimport { useCallbackRef } from '../../utilities/hooks/useCallbackRef'\nimport { NavigationMenuVerticalItem } from './NavigationMenuVerticalItem'\n\ntype NavigationMenuVerticalAccordionContextValue = {\n  triggerRef?: React.RefObject<HTMLElement | null>\n  setTriggerRef?: (el: HTMLElement | null) => void | (() => void)\n}\nexport const NavigationMenuVerticalAccordionContext =\n  React.createContext<NavigationMenuVerticalAccordionContextValue>({})\nconst NavigationMenuVerticalAccordionProvider = ({ children }) => {\n  const [triggerRef, setTriggerRef] = useCallbackRef()\n  const value = React.useMemo(\n    () => ({ triggerRef, setTriggerRef }),\n    [triggerRef, setTriggerRef]\n  )\n  return (\n    <NavigationMenuVerticalAccordionContext value={value}>\n      {children}\n    </NavigationMenuVerticalAccordionContext>\n  )\n}\n\ntype NavigationMenuVerticalAccordionProps = React.ComponentProps<typeof Root> &\n  React.ComponentProps<typeof NavigationMenuVerticalItem>\nexport const NavigationMenuVerticalAccordion = ({\n  defaultOpen,\n  open,\n  onOpenChange,\n  disabled,\n  ...rest\n}: NavigationMenuVerticalAccordionProps) => {\n  const collapsibleProps = { defaultOpen, open, onOpenChange, disabled }\n  return (\n    <NavigationMenuVerticalAccordionProvider>\n      <Root {...collapsibleProps} asChild>\n        <NavigationMenuVerticalItem {...rest} />\n      </Root>\n    </NavigationMenuVerticalAccordionProvider>\n  )\n}\n"],"mappings":";;;;;;AAUA,IAAa,yCACX,QAAM,cAA2D,CAAC,CAAC;AACrE,IAAM,2CAA2C,EAAE,eAAe;CAChE,MAAM,CAAC,YAAY,iBAAiB,eAAe;CAKnD,OACE,oBAAC,wCAAD;EAA+C,OALnC,QAAM,eACX;GAAE;GAAY;EAAc,IACnC,CAAC,YAAY,aAAa,CAGqB;EAC5C;CACqC,CAAA;AAE5C;AAIA,IAAa,mCAAmC,EAC9C,aACA,MACA,cACA,UACA,GAAG,WACuC;CAE1C,OACE,oBAAC,yCAAD,EAAA,UACE,oBAAC,MAAD;EAHuB;EAAa;EAAM;EAAc;EAG5B,SAAA;YAC1B,oBAAC,4BAAD,EAA4B,GAAI,KAAO,CAAA;CACnC,CAAA,EACiC,CAAA;AAE7C"}

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.js

@@ -6,7 +6,7 @@ import { Content } from "@radix-ui/react-collapsible";
 //#region src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.tsx
 var StyledNavigationMenuVerticalAccordionContent = Content;
 var NavigationMenuVerticalAccordionContent = ({ children, ...rest }) => {
-	const { triggerRef } = React$1.useContext(NavigationMenuVerticalAccordionContext);
+	const { triggerRef } = React$1.use(NavigationMenuVerticalAccordionContext);
 	const handleOnKeydown = (e) => {
 		if (!triggerRef?.current) return;
 		if (e.key === "Escape") {

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalAccordionContent.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-collapsible'\nimport * as React from 'react'\n\nimport { NavigationMenuVerticalAccordionContext } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalList } from './NavigationMenuVerticalList'\n\nconst StyledNavigationMenuVerticalAccordionContent = Content\n\ntype NavigationMenuVerticalAccordionContentProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalAccordionContent\n> &\n  React.ComponentProps<typeof NavigationMenuVerticalList>\n\nexport const NavigationMenuVerticalAccordionContent = ({\n  children,\n  ...rest\n}: NavigationMenuVerticalAccordionContentProps) => {\n  const { triggerRef } = React.useContext(\n    NavigationMenuVerticalAccordionContext\n  )\n\n  const handleOnKeydown = (e) => {\n    if (!triggerRef?.current) return\n    if (e.key === 'Escape') {\n      e.stopPropagation()\n      e.preventDefault()\n      triggerRef.current.focus()\n      triggerRef.current.click()\n    }\n  }\n\n  return (\n    <StyledNavigationMenuVerticalAccordionContent\n      onKeyDown={handleOnKeydown}\n      {...rest}\n    >\n      <NavigationMenuVerticalList>{children}</NavigationMenuVerticalList>\n    </StyledNavigationMenuVerticalAccordionContent>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,+CAA+C;AAOrD,IAAa,0CAA0C,EACrD,UACA,GAAG,WAC8C;CACjD,MAAM,EAAE,eAAe,QAAM,WAC3B,sCACF;CAEA,MAAM,mBAAmB,MAAM;EAC7B,IAAI,CAAC,YAAY,SAAS;EAC1B,IAAI,EAAE,QAAQ,UAAU;GACtB,EAAE,gBAAgB;GAClB,EAAE,eAAe;GACjB,WAAW,QAAQ,MAAM;GACzB,WAAW,QAAQ,MAAM;EAC3B;CACF;CAEA,OACE,oBAAC,8CAAD;EACE,WAAW;EACX,GAAI;YAEJ,oBAAC,4BAAD,EAA6B,SAAqC,CAAA;CACtB,CAAA;AAElD"}
+{"version":3,"file":"NavigationMenuVerticalAccordionContent.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionContent.tsx"],"sourcesContent":["import { Content } from '@radix-ui/react-collapsible'\nimport * as React from 'react'\n\nimport { NavigationMenuVerticalAccordionContext } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalList } from './NavigationMenuVerticalList'\n\nconst StyledNavigationMenuVerticalAccordionContent = Content\n\ntype NavigationMenuVerticalAccordionContentProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalAccordionContent\n> &\n  React.ComponentProps<typeof NavigationMenuVerticalList>\n\nexport const NavigationMenuVerticalAccordionContent = ({\n  children,\n  ...rest\n}: NavigationMenuVerticalAccordionContentProps) => {\n  const { triggerRef } = React.use(NavigationMenuVerticalAccordionContext)\n\n  const handleOnKeydown = (e) => {\n    if (!triggerRef?.current) return\n    if (e.key === 'Escape') {\n      e.stopPropagation()\n      e.preventDefault()\n      triggerRef.current.focus()\n      triggerRef.current.click()\n    }\n  }\n\n  return (\n    <StyledNavigationMenuVerticalAccordionContent\n      onKeyDown={handleOnKeydown}\n      {...rest}\n    >\n      <NavigationMenuVerticalList>{children}</NavigationMenuVerticalList>\n    </StyledNavigationMenuVerticalAccordionContent>\n  )\n}\n"],"mappings":";;;;;;AAMA,IAAM,+CAA+C;AAOrD,IAAa,0CAA0C,EACrD,UACA,GAAG,WAC8C;CACjD,MAAM,EAAE,eAAe,QAAM,IAAI,sCAAsC;CAEvE,MAAM,mBAAmB,MAAM;EAC7B,IAAI,CAAC,YAAY,SAAS;EAC1B,IAAI,EAAE,QAAQ,UAAU;GACtB,EAAE,gBAAgB;GAClB,EAAE,eAAe;GACjB,WAAW,QAAQ,MAAM;GACzB,WAAW,QAAQ,MAAM;EAC3B;CACF;CAEA,OACE,oBAAC,8CAAD;EACE,WAAW;EACX,GAAI;YAEJ,oBAAC,4BAAD,EAA6B,SAAqC,CAAA;CACtB,CAAA;AAElD"}

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordionTrigger.js

@@ -22,7 +22,7 @@ var StyledIcon = styled(Icon, { base: [
 	"[[data-state=open]>&]:rotate-180"
 ] });
 var NavigationMenuVerticalAccordionTrigger = ({ children, ...rest }) => {
-	const { setTriggerRef } = React$1.useContext(NavigationMenuVerticalAccordionContext);
+	const { setTriggerRef } = React$1.use(NavigationMenuVerticalAccordionContext);
 	return /* @__PURE__ */ jsx(Link, {
 		asChild: true,
 		children: /* @__PURE__ */ jsx(StyledNavigationMenuVerticalAccordionTrigger, {

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalAccordionTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVerticalAccordionTrigger.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-collapsible'\nimport { Link } from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { navigationMenuVerticalItemStyles } from './NavigationMenuVertical.styles'\nimport { NavigationMenuVerticalAccordionContext } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\n\nconst StyledNavigationMenuVerticalAccordionTrigger = styled(Trigger, {\n  base: navigationMenuVerticalItemStyles,\n  variants: {\n    size: {\n      md: ['min-h-10'],\n      lg: ['min-h-12']\n    }\n  }\n})\n\nconst StyledIcon = styled(Icon, {\n  base: [\n    'transition-transform',\n    'duration-300',\n    '[[data-state=open]>&]:rotate-180'\n  ]\n})\n\ntype NavigationMenuAccordionTriggerProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalAccordionTrigger\n>\n\nexport const NavigationMenuVerticalAccordionTrigger = ({\n  children,\n  ...rest\n}: NavigationMenuAccordionTriggerProps) => {\n  const { setTriggerRef } = React.useContext(\n    NavigationMenuVerticalAccordionContext\n  )\n\n  return (\n    <Link asChild>\n      <StyledNavigationMenuVerticalAccordionTrigger size=\"lg\" {...rest} asChild>\n        <button\n          type=\"button\"\n          className=\"flex items-center justify-between gap-3\"\n          ref={setTriggerRef}\n        >\n          <NavigationMenuVerticalItemContent>\n            {children}\n          </NavigationMenuVerticalItemContent>\n          <StyledIcon size=\"sm\" is={ChevronDown} />\n        </button>\n      </StyledNavigationMenuVerticalAccordionTrigger>\n    </Link>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,+CAA+C,OAAO,SAAS;CACnE,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;CACjB,EACF;AACF,CAAC;AAED,IAAM,aAAa,OAAO,MAAM,EAC9B,MAAM;CACJ;CACA;CACA;AACF,EACF,CAAC;AAMD,IAAa,0CAA0C,EACrD,UACA,GAAG,WACsC;CACzC,MAAM,EAAE,kBAAkB,QAAM,WAC9B,sCACF;CAEA,OACE,oBAAC,MAAD;EAAM,SAAA;YACJ,oBAAC,8CAAD;GAA8C,MAAK;GAAK,GAAI;GAAM,SAAA;aAChE,qBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,KAAK;cAHP,CAKE,oBAAC,mCAAD,EACG,SACgC,CAAA,GACnC,oBAAC,YAAD;KAAY,MAAK;KAAK,IAAI;IAAc,CAAA,CAClC;;EACoC,CAAA;CAC1C,CAAA;AAEV"}
+{"version":3,"file":"NavigationMenuVerticalAccordionTrigger.js","names":[],"sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalAccordionTrigger.tsx"],"sourcesContent":["import { ChevronDown } from '@atom-learning/icons'\nimport { Trigger } from '@radix-ui/react-collapsible'\nimport { Link } from '@radix-ui/react-navigation-menu'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Icon } from '../icon/Icon'\nimport { navigationMenuVerticalItemStyles } from './NavigationMenuVertical.styles'\nimport { NavigationMenuVerticalAccordionContext } from './NavigationMenuVerticalAccordion'\nimport { NavigationMenuVerticalItemContent } from './NavigationMenuVerticalItemContent'\n\nconst StyledNavigationMenuVerticalAccordionTrigger = styled(Trigger, {\n  base: navigationMenuVerticalItemStyles,\n  variants: {\n    size: {\n      md: ['min-h-10'],\n      lg: ['min-h-12']\n    }\n  }\n})\n\nconst StyledIcon = styled(Icon, {\n  base: [\n    'transition-transform',\n    'duration-300',\n    '[[data-state=open]>&]:rotate-180'\n  ]\n})\n\ntype NavigationMenuAccordionTriggerProps = React.ComponentProps<\n  typeof StyledNavigationMenuVerticalAccordionTrigger\n>\n\nexport const NavigationMenuVerticalAccordionTrigger = ({\n  children,\n  ...rest\n}: NavigationMenuAccordionTriggerProps) => {\n  const { setTriggerRef } = React.use(NavigationMenuVerticalAccordionContext)\n\n  return (\n    <Link asChild>\n      <StyledNavigationMenuVerticalAccordionTrigger size=\"lg\" {...rest} asChild>\n        <button\n          type=\"button\"\n          className=\"flex items-center justify-between gap-3\"\n          ref={setTriggerRef}\n        >\n          <NavigationMenuVerticalItemContent>\n            {children}\n          </NavigationMenuVerticalItemContent>\n          <StyledIcon size=\"sm\" is={ChevronDown} />\n        </button>\n      </StyledNavigationMenuVerticalAccordionTrigger>\n    </Link>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAWA,IAAM,+CAA+C,OAAO,SAAS;CACnE,MAAM;CACN,UAAU,EACR,MAAM;EACJ,IAAI,CAAC,UAAU;EACf,IAAI,CAAC,UAAU;CACjB,EACF;AACF,CAAC;AAED,IAAM,aAAa,OAAO,MAAM,EAC9B,MAAM;CACJ;CACA;CACA;AACF,EACF,CAAC;AAMD,IAAa,0CAA0C,EACrD,UACA,GAAG,WACsC;CACzC,MAAM,EAAE,kBAAkB,QAAM,IAAI,sCAAsC;CAE1E,OACE,oBAAC,MAAD;EAAM,SAAA;YACJ,oBAAC,8CAAD;GAA8C,MAAK;GAAK,GAAI;GAAM,SAAA;aAChE,qBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,KAAK;cAHP,CAKE,oBAAC,mCAAD,EACG,SACgC,CAAA,GACnC,oBAAC,YAAD;KAAY,MAAK;KAAK,IAAI;IAAc,CAAA,CAClC;;EACoC,CAAA;CAC1C,CAAA;AAEV"}

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

@@ -3,6 +3,7 @@ import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
 import { Input } from "../input/Input.js";
 import { NumberInputStepper } from "./NumberInputStepper.js";
 import * as React$1 from "react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Minus, Plus } from "@atom-learning/icons";
 //#region src/components/number-input/NumberInput.tsx
@@ -17,13 +18,11 @@ var NumberInputContainer = styled("div", {
 	}
 });
 var NumberInput = ({ ref, value, defaultValue = 0, onValueChange, min = 0, max = Number.MAX_SAFE_INTEGER, step = 1, disabled: isDisabled = false, readonly: isReadOnly = false, size = "md", stepperButtonLabels: stepperButtonLabelsProp, disabledTooltipContent: disabledTooltipContentProp, className, appearance = "standard", theme, emphasis, ...rest }) => {
-	const [internalValue, setInternalValue] = React$1.useState(value || defaultValue);
-	React$1.useEffect(() => {
-		if (typeof value !== "undefined") setInternalValue(value);
-	}, [value]);
+	const [internalValue, setInternalValue] = React$1.useState(value ?? defaultValue);
+	const currentValue = value ?? internalValue;
 	const inputRef = React$1.useRef(null);
-	React$1.useImperativeHandle(ref, () => inputRef.current);
-	const iconSize = React$1.useMemo(() => getFieldIconSize(size), [size]);
+	const composedInputRef = useComposedRefs(ref, inputRef);
+	const iconSize = getFieldIconSize(size);
 	const stepperButtonLabels = {
 		increment: "increment",
 		decrement: "decrement",
@@ -34,8 +33,8 @@ var NumberInput = ({ ref, value, defaultValue = 0, onValueChange, min = 0, max =
 		increment: `Cannot enter values above ${max}`,
 		...disabledTooltipContentProp
 	};
-	const isAtMax = internalValue >= max;
-	const isAtMin = internalValue <= min;
+	const isAtMax = currentValue >= max;
+	const isAtMin = currentValue <= min;
 	const clamp = React$1.useCallback((internalValue) => Math.min(Math.max(internalValue, min), max), [max, min]);
 	const updateValue = React$1.useCallback((newValue) => {
 		onValueChange?.(newValue);
@@ -47,19 +46,19 @@ var NumberInput = ({ ref, value, defaultValue = 0, onValueChange, min = 0, max =
 	const increment = React$1.useCallback(() => {
 		if (isAtMax || isReadOnly) return;
 		inputRef?.current?.focus();
-		updateValue(clamp(Number(internalValue) + step));
+		updateValue(clamp(Number(currentValue) + step));
 	}, [
 		clamp,
 		isAtMax,
 		isReadOnly,
 		step,
 		updateValue,
-		internalValue
+		currentValue
 	]);
 	const decrement = React$1.useCallback(() => {
 		if (isAtMin || isReadOnly) return;
 		inputRef?.current?.focus();
-		updateValue(clamp(Number(internalValue) - step));
+		updateValue(clamp(Number(currentValue) - step));
 	}, [
 		clamp,
 		isAtMin,
@@ -67,7 +66,7 @@ var NumberInput = ({ ref, value, defaultValue = 0, onValueChange, min = 0, max =
 		min,
 		step,
 		updateValue,
-		internalValue
+		currentValue
 	]);
 	const onKeyDown = React$1.useCallback((event) => {
 		if (event.nativeEvent.isComposing) return;
@@ -99,11 +98,11 @@ var NumberInput = ({ ref, value, defaultValue = 0, onValueChange, min = 0, max =
 		min,
 		max
 	]);
-	const hasError = internalValue < min || internalValue > max;
+	const hasError = currentValue < min || currentValue > max;
 	const { state: externalState, "aria-invalid": externalAriaInvalid, ...restProps } = rest;
 	const inputProps = {
 		type: "number",
-		value: internalValue,
+		value: currentValue,
 		...restProps,
 		onChange: onInputChange,
 		onKeyDown,
@@ -123,12 +122,12 @@ var NumberInput = ({ ref, value, defaultValue = 0, onValueChange, min = 0, max =
 			"focus-within:border-2",
 			"focus-within:border-blue-800"
 		]),
-		ref: inputRef,
+		ref: composedInputRef,
 		readOnly: isReadOnly,
 		disabled: isDisabled,
 		"aria-valuemin": min,
 		"aria-valuemax": max,
-		"aria-valuenow": internalValue,
+		"aria-valuenow": currentValue,
 		role: "spinbutton"
 	};
 	return /* @__PURE__ */ jsxs(NumberInputContainer, {

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","names":[],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { Input } from '../input/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  theme?: 'white' | 'grey'\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('div', {\n  base: ['flex'],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    },\n    emphasis: {\n      bold: ['gap-0']\n    }\n  }\n})\n\nexport const NumberInput = ({\n  ref,\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  theme,\n  emphasis,\n  ...rest\n}: NumberInputProps & {\n  ref?: React.Ref<HTMLInputElement>\n}) => {\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    theme,\n    state: externalState || (hasError ? 'error' : undefined),\n    'aria-invalid': externalAriaInvalid || hasError || undefined,\n    className: cn(\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={cn(\n          emphasis !== 'bold' && ['border-r-none', 'rounded-r-none']\n        )}\n        size={iconSize}\n        fieldAppearance={appearance}\n        fieldTheme={theme}\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={cn(\n          emphasis !== 'bold' && ['border-l-none', 'rounded-l-none']\n        )}\n        size={iconSize}\n        fieldAppearance={appearance}\n        fieldTheme={theme}\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"],"mappings":"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"}
+{"version":3,"file":"NumberInput.js","names":[],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport { useComposedRefs } from '@radix-ui/react-compose-refs'\nimport * as React from 'react'\n\nimport { styled, cn } from '../../styled'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { Input } from '../input/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  theme?: 'white' | 'grey'\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('div', {\n  base: ['flex'],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    },\n    emphasis: {\n      bold: ['gap-0']\n    }\n  }\n})\n\nexport const NumberInput = ({\n  ref,\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  theme,\n  emphasis,\n  ...rest\n}: NumberInputProps & {\n  ref?: React.Ref<HTMLInputElement>\n}) => {\n  // `?? defaultValue` (not `||`): a controlled `value={0}` is a value, not\n  // an absence. `currentValue` is derived during render — mirroring the prop\n  // into state via an effect would paint one stale frame per update.\n  const [internalValue, setInternalValue] = React.useState<number>(\n    value ?? defaultValue\n  )\n  const currentValue = value ?? internalValue\n\n  const inputRef = React.useRef<HTMLInputElement | null>(null)\n  const composedInputRef = useComposedRefs(ref, inputRef)\n\n  const iconSize = getFieldIconSize(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 = currentValue >= max\n  const isAtMin = currentValue <= 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(currentValue) + step\n    updateValue(clamp(newValue))\n  }, [clamp, isAtMax, isReadOnly, step, updateValue, currentValue])\n\n  const decrement = React.useCallback(() => {\n    if (isAtMin || isReadOnly) return\n    inputRef?.current?.focus()\n    const newValue = Number(currentValue) - step\n    updateValue(clamp(newValue))\n  }, [clamp, isAtMin, isReadOnly, min, step, updateValue, currentValue])\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 = currentValue < min || currentValue > 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: currentValue,\n    ...restProps,\n    onChange: onInputChange,\n    onKeyDown,\n    size,\n    appearance,\n    theme,\n    state: externalState || (hasError ? 'error' : undefined),\n    'aria-invalid': externalAriaInvalid || hasError || undefined,\n    className: cn(\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: composedInputRef,\n    readOnly: isReadOnly,\n    disabled: isDisabled,\n    'aria-valuemin': min,\n    'aria-valuemax': max,\n    'aria-valuenow': currentValue,\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={cn(\n          emphasis !== 'bold' && ['border-r-none', 'rounded-r-none']\n        )}\n        size={iconSize}\n        fieldAppearance={appearance}\n        fieldTheme={theme}\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={cn(\n          emphasis !== 'bold' && ['border-l-none', 'rounded-l-none']\n        )}\n        size={iconSize}\n        fieldAppearance={appearance}\n        fieldTheme={theme}\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"],"mappings":"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"}

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

@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
 import { useController, useFormContext } from "react-hook-form";
 //#region src/components/number-input-field/NumberInputField.tsx
 var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt, description, label, name, validation, onValueChange, appearance, theme, ...rest }) => {
-	const { control } = useFormContext();
+	const { control, setValue } = useFormContext();
 	const context = useFormCustomContext();
 	const { field: { ref, onChange, value: innerValue, name: innerName } } = useController({
 		name,
@@ -19,8 +19,12 @@ var NumberInputField = ({ className, defaultValue = 0, hideLabel, value, prompt,
 	const formAppearance = context?.appearance || appearance;
 	const formTheme = context?.theme ?? theme;
 	React$1.useEffect(() => {
-		if (typeof value !== "undefined") onChange(value);
-	}, [value]);
+		if (typeof value !== "undefined") setValue(name, value, { shouldDirty: false });
+	}, [
+		value,
+		name,
+		setValue
+	]);
 	return /* @__PURE__ */ jsx(FieldWrapper, {
 		className,
 		description,

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInputField.js","names":[],"sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\nimport type { ValidationOptions } from '../form/validation'\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n  className?: string\n  hideLabel?: boolean\n  description?: string\n  label: string\n  name: string\n  prompt?: { link: string; label: string }\n  validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n  className,\n  defaultValue = 0,\n  hideLabel,\n  value,\n  prompt,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  appearance,\n  theme,\n  ...rest\n}: NumberInputFieldProps) => {\n  const { control } = useFormContext()\n  const context = useFormCustomContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (typeof value !== 'undefined') onChange(value)\n  }, [value])\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <NumberInput\n        id={name}\n        name={innerName}\n        ref={ref}\n        {...(error && { state: 'error', 'aria-invalid': true })}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...rest}\n      />\n    </FieldWrapper>\n  )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"mappings":";;;;;;;;AAoBA,IAAa,oBAAoB,EAC/B,WACA,eAAe,GACf,WACA,OACA,QACA,aACA,OACA,MACA,YACA,eACA,YACA,OACA,GAAG,WACwB;CAC3B,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,UAAU,qBAAqB;CACrC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CACD,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;CAEpC,QAAM,gBAAgB;EAEpB,IAAI,OAAO,UAAU,aAAa,SAAS,KAAK;CAClD,GAAG,CAAC,KAAK,CAAC;CAEV,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;YAEZ,oBAAC,aAAD;GACE,IAAI;GACJ,MAAM;GACD;GACL,GAAK,SAAS;IAAE,OAAO;IAAS,gBAAgB;GAAK;GACvC;GACd,gBAAgB,aAAa;IAC3B,SAAS,QAAQ;IACjB,gBAAgB,QAAQ;GAC1B;GACA,OAAO;GACP,YAAY;GACZ,OAAO;GACP,GAAI;EACL,CAAA;CACW,CAAA;AAElB;AAEA,iBAAiB,cAAc"}
+{"version":3,"file":"NumberInputField.js","names":[],"sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { useFormCustomContext } from '../form/useFormCustomContext'\nimport type { ValidationOptions } from '../form/validation'\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n  className?: string\n  hideLabel?: boolean\n  description?: string\n  label: string\n  name: string\n  prompt?: { link: string; label: string }\n  validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n  className,\n  defaultValue = 0,\n  hideLabel,\n  value,\n  prompt,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  appearance,\n  theme,\n  ...rest\n}: NumberInputFieldProps) => {\n  const { control, setValue } = useFormContext()\n  const context = useFormCustomContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  const formAppearance = context?.appearance || appearance\n  const formTheme = context?.theme ?? theme\n\n  React.useEffect(() => {\n    // Sync an externally-controlled `value` into react-hook-form without\n    // marking the field dirty/touched — this isn't user input.\n    if (typeof value !== 'undefined')\n      setValue(name, value, { shouldDirty: false })\n  }, [value, name, setValue])\n\n  return (\n    <FieldWrapper\n      className={className}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n      appearance={formAppearance}\n    >\n      <NumberInput\n        id={name}\n        name={innerName}\n        ref={ref}\n        {...(error && { state: 'error', 'aria-invalid': true })}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        appearance={formAppearance}\n        theme={formTheme}\n        {...rest}\n      />\n    </FieldWrapper>\n  )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"mappings":";;;;;;;;AAoBA,IAAa,oBAAoB,EAC/B,WACA,eAAe,GACf,WACA,OACA,QACA,aACA,OACA,MACA,YACA,eACA,YACA,OACA,GAAG,WACwB;CAC3B,MAAM,EAAE,SAAS,aAAa,eAAe;CAC7C,MAAM,UAAU,qBAAqB;CACrC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,YAAY,MAAM,gBAC/C,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CACD,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,MAAM,iBAAiB,SAAS,cAAc;CAC9C,MAAM,YAAY,SAAS,SAAS;CAEpC,QAAM,gBAAgB;EAGpB,IAAI,OAAO,UAAU,aACnB,SAAS,MAAM,OAAO,EAAE,aAAa,MAAM,CAAC;CAChD,GAAG;EAAC;EAAO;EAAM;CAAQ,CAAC;CAE1B,OACE,oBAAC,cAAD;EACa;EACE;EACN;EACP,SAAS;EACE;EACJ;EACC;EACR,UAAU,QAAQ,YAAY,QAAQ;EACtC,YAAY;YAEZ,oBAAC,aAAD;GACE,IAAI;GACJ,MAAM;GACD;GACL,GAAK,SAAS;IAAE,OAAO;IAAS,gBAAgB;GAAK;GACvC;GACd,gBAAgB,aAAa;IAC3B,SAAS,QAAQ;IACjB,gBAAgB,QAAQ;GAC1B;GACA,OAAO;GACP,YAAY;GACZ,OAAO;GACP,GAAI;EACL,CAAA;CACW,CAAA;AAElB;AAEA,iBAAiB,cAAc"}

package/dist/components/pagination/Pagination.context.js

@@ -15,7 +15,11 @@ var PaginationContext = React$1.createContext({
 	indicatedPages: [],
 	disabledPages: []
 });
-var PaginationProvider = ({ onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = [], disabledPages = [], onItemHover = () => null, labels = {}, children }) => {
+var DEFAULT_LABELS = {};
+var DEFAULT_ON_ITEM_HOVER = () => null;
+var DEFAULT_INDICATED_PAGES = [];
+var DEFAULT_DISABLED_PAGES = [];
+var PaginationProvider = ({ onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = DEFAULT_INDICATED_PAGES, disabledPages = DEFAULT_DISABLED_PAGES, onItemHover = DEFAULT_ON_ITEM_HOVER, labels = DEFAULT_LABELS, children }) => {
 	const [internalCurrentPage, setInternalCurrentPage] = React$1.useState(1);
 	const currentPage = selectedPage || internalCurrentPage;
 	const goToPage = React$1.useCallback((pageNumber) => {
@@ -30,38 +34,41 @@ var PaginationProvider = ({ onSelectedPageChange, selectedPage, visibleElementsC
 	const goToNextPage = React$1.useCallback(() => {
 		if (nextAvailablePage) goToPage(nextAvailablePage);
 	}, [goToPage, nextAvailablePage]);
-	const paginationItems = getPaginationElementsToRender(currentPage, pagesCount, visibleElementsCount);
-	const value = React$1.useMemo(() => {
-		return {
+	const paginationItems = React$1.useMemo(() => getPaginationElementsToRender(currentPage, pagesCount, visibleElementsCount), [
+		currentPage,
+		pagesCount,
+		visibleElementsCount
+	]);
+	return /* @__PURE__ */ jsx(PaginationContext, {
+		value: React$1.useMemo(() => {
+			return {
+				goToNextPage,
+				goToPreviousPage,
+				goToPage,
+				currentPage,
+				paginationItems,
+				indicatedPages,
+				disabledPages,
+				pagesCount,
+				onItemHover,
+				previousAvailablePage,
+				nextAvailablePage,
+				labels
+			};
+		}, [
 			goToNextPage,
 			goToPreviousPage,
 			goToPage,
 			currentPage,
-			paginationItems,
 			indicatedPages,
+			paginationItems,
 			disabledPages,
 			pagesCount,
 			onItemHover,
 			previousAvailablePage,
 			nextAvailablePage,
 			labels
-		};
-	}, [
-		goToNextPage,
-		goToPreviousPage,
-		goToPage,
-		currentPage,
-		indicatedPages,
-		paginationItems,
-		disabledPages,
-		pagesCount,
-		onItemHover,
-		previousAvailablePage,
-		nextAvailablePage,
-		labels
-	]);
-	return /* @__PURE__ */ jsx(PaginationContext.Provider, {
-		value,
+		]),
 		children
 	});
 };

package/dist/components/pagination/Pagination.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.context.js","names":[],"sources":["../../../src/components/pagination/Pagination.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { VisibleElementsAmount } from './pagination.constants'\nimport {\n  findNextAvailablePage,\n  findPreviousAvailablePage,\n  getPaginationElementsToRender\n} from './pagination.helper'\nimport type { PaginationContextValue, PaginationProviderProps } from './types'\n\nexport const PaginationContext = React.createContext<PaginationContextValue>({\n  goToPage: () => null,\n  goToPreviousPage: () => null,\n  goToNextPage: () => null,\n  currentPage: 1,\n  pagesCount: 0,\n  onItemHover: () => null,\n  paginationItems: [],\n  labels: {},\n  indicatedPages: [],\n  disabledPages: []\n})\n\nexport const PaginationProvider = ({\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = [],\n  disabledPages = [],\n  onItemHover = () => null,\n  labels = {},\n  children\n}: React.PropsWithChildren<PaginationProviderProps>) => {\n  const [internalCurrentPage, setInternalCurrentPage] = React.useState(1)\n\n  const currentPage = selectedPage || internalCurrentPage\n\n  const goToPage = React.useCallback(\n    (pageNumber: number) => {\n      setInternalCurrentPage(pageNumber)\n      onSelectedPageChange?.(pageNumber)\n    },\n    [onSelectedPageChange]\n  )\n\n  const previousPage = currentPage - 1\n  const previousAvailablePage = findPreviousAvailablePage(\n    previousPage,\n    disabledPages\n  )\n\n  const goToPreviousPage = React.useCallback(() => {\n    if (previousAvailablePage) goToPage(previousAvailablePage)\n  }, [goToPage, previousAvailablePage])\n\n  const nextPage = currentPage + 1\n  const nextAvailablePage = findNextAvailablePage(\n    nextPage,\n    disabledPages,\n    pagesCount\n  )\n  const goToNextPage = React.useCallback(() => {\n    if (nextAvailablePage) goToPage(nextAvailablePage)\n  }, [goToPage, nextAvailablePage])\n\n  const paginationItems = getPaginationElementsToRender(\n    currentPage,\n    pagesCount,\n    visibleElementsCount\n  )\n\n  const value = React.useMemo(() => {\n    return {\n      goToNextPage,\n      goToPreviousPage,\n      goToPage,\n      currentPage,\n      paginationItems,\n      indicatedPages,\n      disabledPages,\n      pagesCount,\n      onItemHover,\n      previousAvailablePage,\n      nextAvailablePage,\n      labels\n    }\n  }, [\n    goToNextPage,\n    goToPreviousPage,\n    goToPage,\n    currentPage,\n    indicatedPages,\n    paginationItems,\n    disabledPages,\n    pagesCount,\n    onItemHover,\n    previousAvailablePage,\n    nextAvailablePage,\n    labels\n  ])\n\n  return (\n    <PaginationContext.Provider value={value}>\n      {children}\n    </PaginationContext.Provider>\n  )\n}\n"],"mappings":";;;;;AAUA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,gBAAgB;CAChB,wBAAwB;CACxB,oBAAoB;CACpB,aAAa;CACb,YAAY;CACZ,mBAAmB;CACnB,iBAAiB,CAAC;CAClB,QAAQ,CAAC;CACT,gBAAgB,CAAC;CACjB,eAAe,CAAC;AAClB,CAAC;AAED,IAAa,sBAAsB,EACjC,sBACA,cACA,uBAAuB,sBAAsB,MAC7C,YACA,iBAAiB,CAAC,GAClB,gBAAgB,CAAC,GACjB,oBAAoB,MACpB,SAAS,CAAC,GACV,eACsD;CACtD,MAAM,CAAC,qBAAqB,0BAA0B,QAAM,SAAS,CAAC;CAEtE,MAAM,cAAc,gBAAgB;CAEpC,MAAM,WAAW,QAAM,aACpB,eAAuB;EACtB,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;CACnC,GACA,CAAC,oBAAoB,CACvB;CAGA,MAAM,wBAAwB,0BADT,cAAc,GAGjC,aACF;CAEA,MAAM,mBAAmB,QAAM,kBAAkB;EAC/C,IAAI,uBAAuB,SAAS,qBAAqB;CAC3D,GAAG,CAAC,UAAU,qBAAqB,CAAC;CAGpC,MAAM,oBAAoB,sBADT,cAAc,GAG7B,eACA,UACF;CACA,MAAM,eAAe,QAAM,kBAAkB;EAC3C,IAAI,mBAAmB,SAAS,iBAAiB;CACnD,GAAG,CAAC,UAAU,iBAAiB,CAAC;CAEhC,MAAM,kBAAkB,8BACtB,aACA,YACA,oBACF;CAEA,MAAM,QAAQ,QAAM,cAAc;EAChC,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;CACF,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,kBAAkB,UAAnB;EAAmC;EAChC;CACyB,CAAA;AAEhC"}
+{"version":3,"file":"Pagination.context.js","names":[],"sources":["../../../src/components/pagination/Pagination.context.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { VisibleElementsAmount } from './pagination.constants'\nimport {\n  findNextAvailablePage,\n  findPreviousAvailablePage,\n  getPaginationElementsToRender\n} from './pagination.helper'\nimport type { PaginationContextValue, PaginationProviderProps } from './types'\n\nexport const PaginationContext = React.createContext<PaginationContextValue>({\n  goToPage: () => null,\n  goToPreviousPage: () => null,\n  goToNextPage: () => null,\n  currentPage: 1,\n  pagesCount: 0,\n  onItemHover: () => null,\n  paginationItems: [],\n  labels: {},\n  indicatedPages: [],\n  disabledPages: []\n})\n\n// Module-level defaults: inline `= {}` / `= () => null` defaults would mint\n// a new identity every render and the value useMemo below could never hit.\nconst DEFAULT_LABELS = {}\nconst DEFAULT_ON_ITEM_HOVER = () => null\nconst DEFAULT_INDICATED_PAGES: number[] = []\nconst DEFAULT_DISABLED_PAGES: number[] = []\n\nexport const PaginationProvider = ({\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = DEFAULT_INDICATED_PAGES,\n  disabledPages = DEFAULT_DISABLED_PAGES,\n  onItemHover = DEFAULT_ON_ITEM_HOVER,\n  labels = DEFAULT_LABELS,\n  children\n}: React.PropsWithChildren<PaginationProviderProps>) => {\n  const [internalCurrentPage, setInternalCurrentPage] = React.useState(1)\n\n  const currentPage = selectedPage || internalCurrentPage\n\n  const goToPage = React.useCallback(\n    (pageNumber: number) => {\n      setInternalCurrentPage(pageNumber)\n      onSelectedPageChange?.(pageNumber)\n    },\n    [onSelectedPageChange]\n  )\n\n  const previousPage = currentPage - 1\n  const previousAvailablePage = findPreviousAvailablePage(\n    previousPage,\n    disabledPages\n  )\n\n  const goToPreviousPage = React.useCallback(() => {\n    if (previousAvailablePage) goToPage(previousAvailablePage)\n  }, [goToPage, previousAvailablePage])\n\n  const nextPage = currentPage + 1\n  const nextAvailablePage = findNextAvailablePage(\n    nextPage,\n    disabledPages,\n    pagesCount\n  )\n  const goToNextPage = React.useCallback(() => {\n    if (nextAvailablePage) goToPage(nextAvailablePage)\n  }, [goToPage, nextAvailablePage])\n\n  const paginationItems = React.useMemo(\n    () =>\n      getPaginationElementsToRender(\n        currentPage,\n        pagesCount,\n        visibleElementsCount\n      ),\n    [currentPage, pagesCount, visibleElementsCount]\n  )\n\n  const value = React.useMemo(() => {\n    return {\n      goToNextPage,\n      goToPreviousPage,\n      goToPage,\n      currentPage,\n      paginationItems,\n      indicatedPages,\n      disabledPages,\n      pagesCount,\n      onItemHover,\n      previousAvailablePage,\n      nextAvailablePage,\n      labels\n    }\n  }, [\n    goToNextPage,\n    goToPreviousPage,\n    goToPage,\n    currentPage,\n    indicatedPages,\n    paginationItems,\n    disabledPages,\n    pagesCount,\n    onItemHover,\n    previousAvailablePage,\n    nextAvailablePage,\n    labels\n  ])\n\n  return <PaginationContext value={value}>{children}</PaginationContext>\n}\n"],"mappings":";;;;;AAUA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,gBAAgB;CAChB,wBAAwB;CACxB,oBAAoB;CACpB,aAAa;CACb,YAAY;CACZ,mBAAmB;CACnB,iBAAiB,CAAC;CAClB,QAAQ,CAAC;CACT,gBAAgB,CAAC;CACjB,eAAe,CAAC;AAClB,CAAC;AAID,IAAM,iBAAiB,CAAC;AACxB,IAAM,8BAA8B;AACpC,IAAM,0BAAoC,CAAC;AAC3C,IAAM,yBAAmC,CAAC;AAE1C,IAAa,sBAAsB,EACjC,sBACA,cACA,uBAAuB,sBAAsB,MAC7C,YACA,iBAAiB,yBACjB,gBAAgB,wBAChB,cAAc,uBACd,SAAS,gBACT,eACsD;CACtD,MAAM,CAAC,qBAAqB,0BAA0B,QAAM,SAAS,CAAC;CAEtE,MAAM,cAAc,gBAAgB;CAEpC,MAAM,WAAW,QAAM,aACpB,eAAuB;EACtB,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;CACnC,GACA,CAAC,oBAAoB,CACvB;CAGA,MAAM,wBAAwB,0BADT,cAAc,GAGjC,aACF;CAEA,MAAM,mBAAmB,QAAM,kBAAkB;EAC/C,IAAI,uBAAuB,SAAS,qBAAqB;CAC3D,GAAG,CAAC,UAAU,qBAAqB,CAAC;CAGpC,MAAM,oBAAoB,sBADT,cAAc,GAG7B,eACA,UACF;CACA,MAAM,eAAe,QAAM,kBAAkB;EAC3C,IAAI,mBAAmB,SAAS,iBAAiB;CACnD,GAAG,CAAC,UAAU,iBAAiB,CAAC;CAEhC,MAAM,kBAAkB,QAAM,cAE1B,8BACE,aACA,YACA,oBACF,GACF;EAAC;EAAa;EAAY;CAAoB,CAChD;CAgCA,OAAO,oBAAC,mBAAD;EAA0B,OA9BnB,QAAM,cAAc;GAChC,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF,GAAG;GACD;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAEiC;EAAQ;CAA4B,CAAA;AACvE"}

package/dist/components/pagination/usePagination.js

@@ -2,7 +2,7 @@ import { PaginationContext } from "./Pagination.context.js";
 import * as React$1 from "react";
 //#region src/components/pagination/usePagination.tsx
 var usePagination = () => {
-	const context = React$1.useContext(PaginationContext);
+	const context = React$1.use(PaginationContext);
 	if (!context) throw new Error("Ensure that you wrap any components with the PaginationProvider component");
 	return context;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"usePagination.js","names":[],"sources":["../../../src/components/pagination/usePagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PaginationContext } from './Pagination.context'\nimport type { PaginationContextValue } from './types'\n\nexport const usePagination = (): PaginationContextValue => {\n  const context = React.useContext(PaginationContext)\n\n  if (!context) {\n    throw new Error(\n      'Ensure that you wrap any components with the PaginationProvider component'\n    )\n  }\n\n  return context\n}\n"],"mappings":";;;AAKA,IAAa,sBAA8C;CACzD,MAAM,UAAU,QAAM,WAAW,iBAAiB;CAElD,IAAI,CAAC,SACH,MAAM,IAAI,MACR,2EACF;CAGF,OAAO;AACT"}
+{"version":3,"file":"usePagination.js","names":[],"sources":["../../../src/components/pagination/usePagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { PaginationContext } from './Pagination.context'\nimport type { PaginationContextValue } from './types'\n\nexport const usePagination = (): PaginationContextValue => {\n  const context = React.use(PaginationContext)\n\n  if (!context) {\n    throw new Error(\n      'Ensure that you wrap any components with the PaginationProvider component'\n    )\n  }\n\n  return context\n}\n"],"mappings":";;;AAKA,IAAa,sBAA8C;CACzD,MAAM,UAAU,QAAM,IAAI,iBAAiB;CAE3C,IAAI,CAAC,SACH,MAAM,IAAI,MACR,2EACF;CAGF,OAAO;AACT"}

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

@@ -3,7 +3,6 @@ import { Icon } from "../icon/Icon.js";
 import { ActionIcon } from "../action-icon/ActionIcon.js";
 import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
 import { Input } from "../input/Input.js";
-import * as React$1 from "react";
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Eye, EyeCrossed } from "@atom-learning/icons";
@@ -11,7 +10,7 @@ import { Eye, EyeCrossed } from "@atom-learning/icons";
 var PasswordInput = ({ ref, className, hidePasswordText = "Hide password", showPasswordText = "Show password", size = "md", ...restProps }) => {
 	const [isPasswordVisible, setIsPasswordVisible] = useState(false);
 	const togglePasswordVisibility = () => setIsPasswordVisible((currentState) => !currentState);
-	const iconSize = React$1.useMemo(() => getFieldIconSize(size), [size]);
+	const iconSize = getFieldIconSize(size);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("relative", className),
 		children: [/* @__PURE__ */ jsx(Input, {

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordInput.js","names":[],"sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { cn } from '../../styled'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport type { InputProps } from '../input/Input'\nimport { Input } from '../input/Input'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n  hidePasswordText?: string\n  showPasswordText?: string\n}\n\nexport const PasswordInput = ({\n  ref,\n  className,\n  hidePasswordText = 'Hide password',\n  showPasswordText = 'Show password',\n  size = 'md',\n  ...restProps\n}: PasswordInputProps) => {\n  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n  const togglePasswordVisibility = () =>\n    setIsPasswordVisible((currentState) => !currentState)\n\n  const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n  return (\n    <div className={cn('relative', className)}>\n      <Input\n        {...restProps}\n        size={size}\n        type={isPasswordVisible ? 'text' : 'password'}\n        ref={ref}\n        className=\"pr-6\"\n      />\n      <ActionIcon\n        appearance=\"simple\"\n        theme=\"neutral\"\n        label={isPasswordVisible ? hidePasswordText : showPasswordText}\n        onClick={togglePasswordVisibility}\n        onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n        size={iconSize}\n        className={cn(\n          size === 'lg' ? 'bottom-1' : 'bottom-0',\n          'absolute',\n          'right-0'\n        )}\n      >\n        <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n      </ActionIcon>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;AAgBA,IAAa,iBAAiB,EAC5B,KACA,WACA,mBAAmB,iBACnB,mBAAmB,iBACnB,OAAO,MACP,GAAG,gBACqB;CACxB,MAAM,CAAC,mBAAmB,wBAAwB,SAAkB,KAAK;CACzE,MAAM,iCACJ,sBAAsB,iBAAiB,CAAC,YAAY;CAEtD,MAAM,WAAW,QAAM,cAAc,iBAAiB,IAAI,GAAG,CAAC,IAAI,CAAC;CAEnE,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,SAAS;YAAxC,CACE,oBAAC,OAAD;GACE,GAAI;GACE;GACN,MAAM,oBAAoB,SAAS;GAC9B;GACL,WAAU;EACX,CAAA,GACD,oBAAC,YAAD;GACE,YAAW;GACX,OAAM;GACN,OAAO,oBAAoB,mBAAmB;GAC9C,SAAS;GACT,cAAc,MAAM,EAAE,eAAe;GACrC,MAAM;GACN,WAAW,GACT,SAAS,OAAO,aAAa,YAC7B,YACA,SACF;aAEA,oBAAC,MAAD,EAAM,IAAI,oBAAoB,MAAM,WAAa,CAAA;EACvC,CAAA,CACT;;AAET"}
+{"version":3,"file":"PasswordInput.js","names":[],"sources":["../../../src/components/password-input/PasswordInput.tsx"],"sourcesContent":["import { Eye, EyeCrossed } from '@atom-learning/icons'\nimport * as React from 'react'\nimport { useState } from 'react'\n\nimport { cn } from '../../styled'\nimport { getFieldIconSize } from '../../utilities/style/get-icon-size'\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport type { InputProps } from '../input/Input'\nimport { Input } from '../input/Input'\n\ntype PasswordInputProps = Omit<InputProps, 'type'> & {\n  hidePasswordText?: string\n  showPasswordText?: string\n}\n\nexport const PasswordInput = ({\n  ref,\n  className,\n  hidePasswordText = 'Hide password',\n  showPasswordText = 'Show password',\n  size = 'md',\n  ...restProps\n}: PasswordInputProps) => {\n  const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false)\n  const togglePasswordVisibility = () =>\n    setIsPasswordVisible((currentState) => !currentState)\n\n  const iconSize = getFieldIconSize(size)\n\n  return (\n    <div className={cn('relative', className)}>\n      <Input\n        {...restProps}\n        size={size}\n        type={isPasswordVisible ? 'text' : 'password'}\n        ref={ref}\n        className=\"pr-6\"\n      />\n      <ActionIcon\n        appearance=\"simple\"\n        theme=\"neutral\"\n        label={isPasswordVisible ? hidePasswordText : showPasswordText}\n        onClick={togglePasswordVisibility}\n        onMouseDown={(e) => e.preventDefault()} // prevent focus being lost from password input\n        size={iconSize}\n        className={cn(\n          size === 'lg' ? 'bottom-1' : 'bottom-0',\n          'absolute',\n          'right-0'\n        )}\n      >\n        <Icon is={isPasswordVisible ? Eye : EyeCrossed} />\n      </ActionIcon>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AAgBA,IAAa,iBAAiB,EAC5B,KACA,WACA,mBAAmB,iBACnB,mBAAmB,iBACnB,OAAO,MACP,GAAG,gBACqB;CACxB,MAAM,CAAC,mBAAmB,wBAAwB,SAAkB,KAAK;CACzE,MAAM,iCACJ,sBAAsB,iBAAiB,CAAC,YAAY;CAEtD,MAAM,WAAW,iBAAiB,IAAI;CAEtC,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,SAAS;YAAxC,CACE,oBAAC,OAAD;GACE,GAAI;GACE;GACN,MAAM,oBAAoB,SAAS;GAC9B;GACL,WAAU;EACX,CAAA,GACD,oBAAC,YAAD;GACE,YAAW;GACX,OAAM;GACN,OAAO,oBAAoB,mBAAmB;GAC9C,SAAS;GACT,cAAc,MAAM,EAAE,eAAe;GACrC,MAAM;GACN,WAAW,GACT,SAAS,OAAO,aAAa,YAC7B,YACA,SACF;aAEA,oBAAC,MAAD,EAAM,IAAI,oBAAoB,MAAM,WAAa,CAAA;EACvC,CAAA,CACT;;AAET"}

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

@@ -16,7 +16,7 @@ var Fieldset = styled("fieldset", { base: [
 	"min-w-0"
 ] });
 var RadioButtonFieldComponent = ({ children, className, direction = "column", defaultValue, value, description, label, name, validation, onValueChange, ...rest }) => {
-	const { control } = useFormContext();
+	const { control, setValue } = useFormContext();
 	const { field: { ref, onChange, value: innerValue } } = useController({
 		name,
 		control,
@@ -25,8 +25,12 @@ var RadioButtonFieldComponent = ({ children, className, direction = "column", de
 	});
 	const { error } = useFieldError(name);
 	React$1.useEffect(() => {
-		if (typeof value !== "undefined") onChange(value);
-	}, [value]);
+		if (typeof value !== "undefined") setValue(name, value, { shouldDirty: false });
+	}, [
+		value,
+		name,
+		setValue
+	]);
 	return /* @__PURE__ */ jsxs(Fieldset, {
 		className,
 		children: [

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

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonField.js","names":[],"sources":["../../../src/components/radio-button-field/RadioButtonField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { styled } from '../../styled'\nimport { Description as FieldDescription } from '../field-wrapper/FieldDescription'\nimport type { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { Label } from '../label/Label'\nimport { RadioButtonGroup } from '../radio-button/RadioButtonGroup'\nimport { RadioField } from './RadioField'\n\nconst Fieldset = styled('fieldset', {\n  base: ['border-0', 'p-0', 'm-0', 'min-w-0']\n})\n\ntype RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> &\n  FieldElementWrapperProps\n\nconst RadioButtonFieldComponent = ({\n  children,\n  className,\n  direction = 'column',\n  defaultValue,\n  value,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  ...rest\n}: RadioButtonFieldProps) => {\n  const { control } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (typeof value !== 'undefined') onChange(value)\n  }, [value])\n\n  return (\n    <Fieldset className={className}>\n      <Label\n        as=\"legend\"\n        required={Boolean(validation?.required)}\n        className=\"mb-3 p-0\"\n      >\n        {label}\n      </Label>\n      {description && (\n        <FieldDescription className=\"mb-3\">{description}</FieldDescription>\n      )}\n\n      <RadioButtonGroup\n        ref={ref}\n        direction={direction}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        {...rest}\n      >\n        {children}\n      </RadioButtonGroup>\n\n      {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    </Fieldset>\n  )\n}\n\nexport const RadioButtonField = /* @__PURE__ */ Object.assign(\n  RadioButtonFieldComponent,\n  {\n    Item: RadioField\n  }\n)\n\nRadioButtonFieldComponent.displayName = 'RadioButtonField'\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,WAAW,OAAO,YAAY,EAClC,MAAM;CAAC;CAAY;CAAO;CAAO;AAAS,EAC5C,CAAC;AAKD,IAAM,6BAA6B,EACjC,UACA,WACA,YAAY,UACZ,cACA,OACA,aACA,OACA,MACA,YACA,eACA,GAAG,WACwB;CAC3B,MAAM,EAAE,YAAY,eAAe;CACnC,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,iBAC7B,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CACD,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,QAAM,gBAAgB;EAEpB,IAAI,OAAO,UAAU,aAAa,SAAS,KAAK;CAClD,GAAG,CAAC,KAAK,CAAC;CAEV,OACE,qBAAC,UAAD;EAAqB;YAArB;GACE,oBAAC,OAAD;IACE,IAAG;IACH,UAAU,QAAQ,YAAY,QAAQ;IACtC,WAAU;cAET;GACI,CAAA;GACN,eACC,oBAAC,aAAD;IAAkB,WAAU;cAAQ;GAA8B,CAAA;GAGpE,oBAAC,kBAAD;IACO;IACM;IACG;IACd,gBAAgB,aAAa;KAC3B,SAAS,QAAQ;KACjB,gBAAgB,QAAQ;IAC1B;IACA,OAAO;IACP,GAAI;IAEH;GACe,CAAA;GAEjB,SAAS,oBAAC,eAAD;IAAe,WAAU;cAAQ;GAAqB,CAAA;EACxD;;AAEd;AAEA,IAAa,mBAAmC,uBAAO,OACrD,2BACA,EACE,MAAM,WACR,CACF;AAEA,0BAA0B,cAAc"}
+{"version":3,"file":"RadioButtonField.js","names":[],"sources":["../../../src/components/radio-button-field/RadioButtonField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { styled } from '../../styled'\nimport { Description as FieldDescription } from '../field-wrapper/FieldDescription'\nimport type { FieldElementWrapperProps } from '../field-wrapper/FieldWrapper'\nimport { useFieldError } from '../form/useFieldError'\nimport { InlineMessage } from '../inline-message/InlineMessage'\nimport { Label } from '../label/Label'\nimport { RadioButtonGroup } from '../radio-button/RadioButtonGroup'\nimport { RadioField } from './RadioField'\n\nconst Fieldset = styled('fieldset', {\n  base: ['border-0', 'p-0', 'm-0', 'min-w-0']\n})\n\ntype RadioButtonFieldProps = React.ComponentProps<typeof RadioButtonGroup> &\n  FieldElementWrapperProps\n\nconst RadioButtonFieldComponent = ({\n  children,\n  className,\n  direction = 'column',\n  defaultValue,\n  value,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  ...rest\n}: RadioButtonFieldProps) => {\n  const { control, setValue } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  React.useEffect(() => {\n    // Sync an externally-controlled `value` into react-hook-form without\n    // marking the field dirty/touched — this isn't user input.\n    if (typeof value !== 'undefined')\n      setValue(name, value, { shouldDirty: false })\n  }, [value, name, setValue])\n\n  return (\n    <Fieldset className={className}>\n      <Label\n        as=\"legend\"\n        required={Boolean(validation?.required)}\n        className=\"mb-3 p-0\"\n      >\n        {label}\n      </Label>\n      {description && (\n        <FieldDescription className=\"mb-3\">{description}</FieldDescription>\n      )}\n\n      <RadioButtonGroup\n        ref={ref}\n        direction={direction}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        {...rest}\n      >\n        {children}\n      </RadioButtonGroup>\n\n      {error && <InlineMessage className=\"mt-2\">{error}</InlineMessage>}\n    </Fieldset>\n  )\n}\n\nexport const RadioButtonField = /* @__PURE__ */ Object.assign(\n  RadioButtonFieldComponent,\n  {\n    Item: RadioField\n  }\n)\n\nRadioButtonFieldComponent.displayName = 'RadioButtonField'\n"],"mappings":";;;;;;;;;;;AAYA,IAAM,WAAW,OAAO,YAAY,EAClC,MAAM;CAAC;CAAY;CAAO;CAAO;AAAS,EAC5C,CAAC;AAKD,IAAM,6BAA6B,EACjC,UACA,WACA,YAAY,UACZ,cACA,OACA,aACA,OACA,MACA,YACA,eACA,GAAG,WACwB;CAC3B,MAAM,EAAE,SAAS,aAAa,eAAe;CAC7C,MAAM,EACJ,OAAO,EAAE,KAAK,UAAU,OAAO,iBAC7B,cAAc;EAChB;EACA;EACA,OAAO;EACP;CACF,CAAC;CACD,MAAM,EAAE,UAAU,cAAc,IAAI;CAEpC,QAAM,gBAAgB;EAGpB,IAAI,OAAO,UAAU,aACnB,SAAS,MAAM,OAAO,EAAE,aAAa,MAAM,CAAC;CAChD,GAAG;EAAC;EAAO;EAAM;CAAQ,CAAC;CAE1B,OACE,qBAAC,UAAD;EAAqB;YAArB;GACE,oBAAC,OAAD;IACE,IAAG;IACH,UAAU,QAAQ,YAAY,QAAQ;IACtC,WAAU;cAET;GACI,CAAA;GACN,eACC,oBAAC,aAAD;IAAkB,WAAU;cAAQ;GAA8B,CAAA;GAGpE,oBAAC,kBAAD;IACO;IACM;IACG;IACd,gBAAgB,aAAa;KAC3B,SAAS,QAAQ;KACjB,gBAAgB,QAAQ;IAC1B;IACA,OAAO;IACP,GAAI;IAEH;GACe,CAAA;GAEjB,SAAS,oBAAC,eAAD;IAAe,WAAU;cAAQ;GAAqB,CAAA;EACxD;;AAEd;AAEA,IAAa,mBAAmC,uBAAO,OACrD,2BACA,EACE,MAAM,WACR,CACF;AAEA,0BAA0B,cAAc"}

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

@@ -5,6 +5,7 @@ import { useCallbackRef } from "../../utilities/hooks/useCallbackRef.js";
 import { getFieldIconSize } from "../../utilities/style/get-icon-size.js";
 import { InputBackground, InputText } from "../input/Input.js";
 import * as React$1 from "react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close, Search } from "@atom-learning/icons";
 //#region src/components/search-input/SearchInput.tsx
@@ -23,14 +24,10 @@ var StyledIcon = styled(Icon, {
 var SearchInput = ({ ref, size = "md", appearance = "standard", theme, className, value, defaultValue = "", onValueChange, clearText = "Clear", onChange, ...rest }) => {
 	const [inputElRef, setInputElRef] = useCallbackRef();
 	const [innerValue, setInnerValue] = React$1.useState(defaultValue);
-	const [activeIcon, setActiveIcon] = React$1.useState(defaultValue ? "CLEAR" : "SEARCH");
-	React$1.useEffect(() => {
-		if (typeof value === "undefined") return;
-		setInnerValue(value);
-		setActiveIcon(value ? "CLEAR" : "SEARCH");
-	}, [value]);
-	const iconSize = React$1.useMemo(() => getFieldIconSize(size), [size]);
-	React$1.useImperativeHandle(ref, () => inputElRef.current);
+	const currentValue = value ?? innerValue;
+	const activeIcon = currentValue ? "CLEAR" : "SEARCH";
+	const iconSize = getFieldIconSize(size);
+	const composedInputRef = useComposedRefs(ref, setInputElRef);
 	const handleClear = () => {
 		const inputEl = inputElRef.current;
 		if (!inputEl) return;
@@ -45,7 +42,6 @@ var SearchInput = ({ ref, size = "md", appearance = "standard", theme, className
 		const newValue = event.target.value;
 		setInnerValue(newValue);
 		onValueChange?.(newValue);
-		setActiveIcon(newValue ? "CLEAR" : "SEARCH");
 	};
 	const getIcon = () => {
 		if (activeIcon === "SEARCH") return /* @__PURE__ */ jsx(StyledIcon, {
@@ -68,11 +64,11 @@ var SearchInput = ({ ref, size = "md", appearance = "standard", theme, className
 		theme,
 		className: cn("relative", "w-auto", className),
 		children: [/* @__PURE__ */ jsx(InputText, {
-			ref: setInputElRef,
+			ref: composedInputRef,
 			size,
 			type: "search",
 			...rest,
-			value: innerValue,
+			value: currentValue,
 			onChange: handleOnChange,
 			className: cn(size === "sm" ? "pr-8" : "pr-10", "[&::-webkit-search-decoration]:appearance-none", "[&::-webkit-search-cancel-button]:appearance-none", "[&::-webkit-search-results-button]:appearance-none")
 		}), getIcon()]