@atom-learning/components 9.0.0 → 10.0.1

package/dist/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Text } from '../text/Text'\n\nexport const InputBackground = styled('div', {\n  base: [\n    'flex',\n    'text-grey-1000',\n    'transition-[background,border-color]',\n    'duration-100',\n    'ease-out',\n    'w-full'\n  ],\n  variants: {\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-800',\n        'focus-within:border-blue-800',\n        'rounded-md'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1',\n        'rounded-md'\n      ]\n    },\n    size: {\n      sm: ['h-8'],\n      md: ['h-10'],\n      lg: ['h-12'],\n      xl: ['h-16']\n    },\n    disabled: {\n      true: ['cursor-not-allowed', 'opacity-30']\n    },\n    state: {\n      error: []\n    },\n    theme: {\n      white: [],\n      grey: []\n    }\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    },\n    {\n      appearance: 'modern',\n      theme: 'white',\n      class: ['bg-white']\n    },\n    {\n      appearance: 'modern',\n      theme: 'grey',\n      class: ['bg-grey-100']\n    }\n  ]\n})\n\nInputBackground.displayName = 'InputBackground'\n\n// @__PURE__ keeps this tree-shakable for consumers importing only\n// InputBackground from this module.\nconst StyledInputText = /* @__PURE__ */ styled(Text, {\n  base: [\n    'appearance-none',\n    'border-none',\n    'bg-none',\n    'bg-transparent',\n    'shadow-none',\n    'box-border',\n    'focus:outline-none',\n    'px-3',\n    'size-full',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700'\n  ]\n})\n\nexport type InputTextProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'size'\n> &\n  Omit<React.ComponentProps<typeof StyledInputText>, 'type' | 'as' | 'ref'> & {\n    // override default 'type' property to prevent Input from being used to render\n    // checkboxes, radios etc — we have dedicated components for them\n    type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n    as?: never\n    disabled?: boolean\n    // StyledInputText wraps Text (default element 'p'), but InputText always\n    // renders it as=\"input\", so the inherited paragraph ref must be overridden\n    ref?: React.Ref<HTMLInputElement>\n  }\n\nconst toTextSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg'\n}\n\nexport const InputText = ({\n  ref,\n  type = 'text',\n  size,\n  ...rest\n}: InputTextProps) => {\n  const textSize = React.useMemo(\n    () => overrideStyledVariantValue(size, (s) => toTextSize[s]),\n    [size]\n  )\n\n  return (\n    <StyledInputText\n      ref={ref}\n      as=\"input\"\n      type={type === 'number' ? 'text' : type}\n      inputMode={type === 'number' ? 'numeric' : undefined}\n      pattern={type === 'number' ? '[0-9]*' : undefined}\n      size={textSize}\n      {...rest}\n    />\n  )\n}\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n  React.ComponentProps<typeof InputText>,\n  'size' | 'state' | 'appearance'\n> & {\n  size?: InputBackgroundProps['size']\n  state?: InputBackgroundProps['state']\n  appearance?: InputBackgroundProps['appearance']\n  theme?: InputBackgroundProps['theme']\n  disabled?: boolean\n  name?: string\n  readOnly?: boolean\n  value?: string | number\n  onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\nexport const Input = ({\n  ref,\n  className,\n  size = 'md',\n  appearance = 'standard',\n  theme,\n  state,\n  disabled,\n  style,\n  ...rest\n}: InputProps) => (\n  <InputBackground\n    size={size}\n    appearance={appearance}\n    theme={theme}\n    disabled={disabled}\n    state={state}\n    className={className}\n    style={style}\n  >\n    <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n  </InputBackground>\n)\n"],"mappings":";;;;;;AAMA,IAAa,kBAAkB,OAAO,OAAO;CAC3C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,KAAK;GACV,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;EACb;EACA,UAAU,EACR,MAAM,CAAC,sBAAsB,YAAY,EAC3C;EACA,OAAO,EACL,OAAO,CAAC,EACV;EACA,OAAO;GACL,OAAO,CAAC;GACR,MAAM,CAAC;EACT;CACF;CACA,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,eAAe;EACzB;EACA;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,6BAA6B;EAC1D;EACA;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,UAAU;EACpB;EACA;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,aAAa;EACvB;CACF;AACF,CAAC;AAED,gBAAgB,cAAc;;AAI9B,IAAM,kBAAkC,uBAAO,MAAM,EACnD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAiBD,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,aAAa,EACxB,KACA,OAAO,QACP,MACA,GAAG,WACiB;CACpB,MAAM,WAAW,QAAM,cACf,2BAA2B,OAAO,MAAM,WAAW,EAAE,GAC3D,CAAC,IAAI,CACP;CAEA,OACE,oBAAC,iBAAD;EACO;EACL,IAAG;EACH,MAAM,SAAS,WAAW,SAAS;EACnC,WAAW,SAAS,WAAW,YAAY,KAAA;EAC3C,SAAS,SAAS,WAAW,WAAW,KAAA;EACxC,MAAM;EACN,GAAI;CACL,CAAA;AAEL;AAkBA,IAAa,SAAS,EACpB,KACA,WACA,OAAO,MACP,aAAa,YACb,OACA,OACA,UACA,OACA,GAAG,WAEH,oBAAC,iBAAD;CACQ;CACM;CACL;CACG;CACH;CACI;CACJ;WAEP,oBAAC,WAAD;EAAiB;EAAW;EAAe;EAAU,GAAI;CAAO,CAAA;AACjD,CAAA"}
+{"version":3,"file":"Input.js","names":[],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { overrideStyledVariantValue } from '../../utilities/override-styled-variant-value/overrideStyledVariantValue'\nimport { Text } from '../text/Text'\n\nexport const InputBackground = styled('div', {\n  base: [\n    'flex',\n    'text-grey-1000',\n    'transition-[background,border-color]',\n    'duration-100',\n    'ease-out',\n    'w-full'\n  ],\n  variants: {\n    appearance: {\n      standard: [\n        'bg-white',\n        'border',\n        'border-grey-800',\n        'focus-within:border-blue-800',\n        'rounded-md'\n      ],\n      modern: [\n        'bg-grey-100',\n        'border-none',\n        'focus-within:outline-2',\n        'focus-within:outline-blue-800',\n        'focus-within:outline-offset-1',\n        'focus-within:outline-solid',\n        'focus-within:z-1',\n        'rounded-md'\n      ]\n    },\n    size: {\n      sm: ['h-8'],\n      md: ['h-10'],\n      lg: ['h-12'],\n      xl: ['h-16']\n    },\n    disabled: {\n      true: ['cursor-not-allowed', 'opacity-30']\n    },\n    state: {\n      error: []\n    },\n    theme: {\n      white: [],\n      grey: []\n    }\n  },\n  compoundVariants: [\n    {\n      state: 'error',\n      appearance: 'standard',\n      class: ['border-danger']\n    },\n    {\n      state: 'error',\n      appearance: 'modern',\n      class: ['bg-danger-light', 'focus-within:outline-danger']\n    },\n    {\n      appearance: 'modern',\n      theme: 'white',\n      class: ['bg-white']\n    },\n    {\n      appearance: 'modern',\n      theme: 'grey',\n      class: ['bg-grey-100']\n    }\n  ]\n})\n\nInputBackground.displayName = 'InputBackground'\n\n// @__PURE__ keeps this tree-shakable for consumers importing only\n// InputBackground from this module.\nconst StyledInputText = /* @__PURE__ */ styled(Text, {\n  base: [\n    'appearance-none',\n    'border-none',\n    'bg-none',\n    'bg-transparent',\n    'shadow-none',\n    'box-border',\n    'focus:outline-none',\n    'px-3',\n    'size-full',\n    'placeholder:opacity-100',\n    'placeholder:text-grey-700'\n  ]\n})\n\nexport type InputTextProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'size'\n> &\n  Omit<React.ComponentProps<typeof StyledInputText>, 'type' | 'as' | 'ref'> & {\n    // override default 'type' property to prevent Input from being used to render\n    // checkboxes, radios etc — we have dedicated components for them\n    type?: 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search'\n    as?: never\n    disabled?: boolean\n    // StyledInputText wraps Text (default element 'p'), but InputText always\n    // renders it as=\"input\", so the inherited paragraph ref must be overridden\n    ref?: React.Ref<HTMLInputElement>\n  }\n\nconst toTextSize = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'md',\n  xl: 'lg'\n}\n\nexport const InputText = ({\n  ref,\n  type = 'text',\n  size,\n  ...rest\n}: InputTextProps) => {\n  const textSize = overrideStyledVariantValue(size, (s) => toTextSize[s])\n\n  return (\n    <StyledInputText\n      ref={ref}\n      as=\"input\"\n      type={type === 'number' ? 'text' : type}\n      inputMode={type === 'number' ? 'numeric' : undefined}\n      pattern={type === 'number' ? '[0-9]*' : undefined}\n      size={textSize}\n      {...rest}\n    />\n  )\n}\n\ntype InputBackgroundProps = React.ComponentProps<typeof InputBackground>\nexport type InputProps = Omit<\n  React.ComponentProps<typeof InputText>,\n  'size' | 'state' | 'appearance'\n> & {\n  size?: InputBackgroundProps['size']\n  state?: InputBackgroundProps['state']\n  appearance?: InputBackgroundProps['appearance']\n  theme?: InputBackgroundProps['theme']\n  disabled?: boolean\n  name?: string\n  readOnly?: boolean\n  value?: string | number\n  onChange?: React.ChangeEventHandler<HTMLInputElement>\n}\n\nexport const Input = ({\n  ref,\n  className,\n  size = 'md',\n  appearance = 'standard',\n  theme,\n  state,\n  disabled,\n  style,\n  ...rest\n}: InputProps) => (\n  <InputBackground\n    size={size}\n    appearance={appearance}\n    theme={theme}\n    disabled={disabled}\n    state={state}\n    className={className}\n    style={style}\n  >\n    <InputText size={size} ref={ref} disabled={disabled} {...rest} />\n  </InputBackground>\n)\n"],"mappings":";;;;;;AAMA,IAAa,kBAAkB,OAAO,OAAO;CAC3C,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;CACF;CACA,UAAU;EACR,YAAY;GACV,UAAU;IACR;IACA;IACA;IACA;IACA;GACF;GACA,QAAQ;IACN;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EACA,MAAM;GACJ,IAAI,CAAC,KAAK;GACV,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;GACX,IAAI,CAAC,MAAM;EACb;EACA,UAAU,EACR,MAAM,CAAC,sBAAsB,YAAY,EAC3C;EACA,OAAO,EACL,OAAO,CAAC,EACV;EACA,OAAO;GACL,OAAO,CAAC;GACR,MAAM,CAAC;EACT;CACF;CACA,kBAAkB;EAChB;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,eAAe;EACzB;EACA;GACE,OAAO;GACP,YAAY;GACZ,OAAO,CAAC,mBAAmB,6BAA6B;EAC1D;EACA;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,UAAU;EACpB;EACA;GACE,YAAY;GACZ,OAAO;GACP,OAAO,CAAC,aAAa;EACvB;CACF;AACF,CAAC;AAED,gBAAgB,cAAc;;AAI9B,IAAM,kBAAkC,uBAAO,MAAM,EACnD,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAiBD,IAAM,aAAa;CACjB,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,IAAa,aAAa,EACxB,KACA,OAAO,QACP,MACA,GAAG,WACiB;CACpB,MAAM,WAAW,2BAA2B,OAAO,MAAM,WAAW,EAAE;CAEtE,OACE,oBAAC,iBAAD;EACO;EACL,IAAG;EACH,MAAM,SAAS,WAAW,SAAS;EACnC,WAAW,SAAS,WAAW,YAAY,KAAA;EAC3C,SAAS,SAAS,WAAW,WAAW,KAAA;EACxC,MAAM;EACN,GAAI;CACL,CAAA;AAEL;AAkBA,IAAa,SAAS,EACpB,KACA,WACA,OAAO,MACP,aAAa,YACb,OACA,OACA,UACA,OACA,GAAG,WAEH,oBAAC,iBAAD;CACQ;CACM;CACL;CACG;CACH;CACI;CACJ;WAEP,oBAAC,WAAD;EAAiB;EAAW;EAAe;EAAU,GAAI;CAAO,CAAA;AACjD,CAAA"}

package/dist/components/keyboard-shortcut/KeyboardShortcut.js

@@ -1,13 +1,10 @@
 import { styled } from "../../styled.js";
 import { Text } from "../text/Text.js";
-import { useCallbackRefState } from "../../utilities/hooks/useCallbackRef.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 //#region src/components/keyboard-shortcut/KeyboardShortcut.tsx
 var KeyboardShortcut = ({ ref, asChild, config, targetWindow = false, onKeyDown, ...rest }) => {
-	const [targetElRef, setTargetElRef] = useCallbackRefState();
-	React$1.useImperativeHandle(ref, () => targetElRef);
 	const handleOnKeydown = React$1.useCallback((e) => {
 		config.forEach(({ shortcut, action }) => {
 			if (Object.entries(shortcut).every(([key, value]) => e[key] === value)) action({
@@ -17,15 +14,21 @@ var KeyboardShortcut = ({ ref, asChild, config, targetWindow = false, onKeyDown,
 		});
 		onKeyDown?.(e);
 	}, [config, onKeyDown]);
+	const handleOnKeydownRef = React$1.useRef(handleOnKeydown);
+	React$1.useLayoutEffect(() => {
+		handleOnKeydownRef.current = handleOnKeydown;
+	});
 	React$1.useEffect(() => {
-		if (targetWindow) window.addEventListener("keydown", handleOnKeydown);
+		if (!targetWindow) return;
+		const listener = (e) => handleOnKeydownRef.current(e);
+		window.addEventListener("keydown", listener);
 		return () => {
-			window.removeEventListener("keydown", handleOnKeydown);
+			window.removeEventListener("keydown", listener);
 		};
-	}, [targetWindow, handleOnKeydown]);
+	}, [targetWindow]);
 	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
 		onKeyDown: targetWindow ? void 0 : handleOnKeydown,
-		ref: setTargetElRef,
+		ref,
 		...rest
 	});
 };

package/dist/components/keyboard-shortcut/KeyboardShortcut.js.map

@@ -1 +1 @@
-{"version":3,"file":"KeyboardShortcut.js","names":[],"sources":["../../../src/components/keyboard-shortcut/KeyboardShortcut.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { useCallbackRefState } from '../../utilities/hooks/useCallbackRef'\nimport { Text } from '../text/Text'\n\ntype KeyboardEventWindowOrElement =\n  | KeyboardEvent\n  | React.KeyboardEvent<HTMLDivElement>\ntype ShortcutConfig = Partial<KeyboardEvent>\n\ntype KeyboardShortcutProps = React.HTMLAttributes<HTMLDivElement> & {\n  asChild?: boolean\n  config: {\n    shortcut: ShortcutConfig\n    action: ({\n      event,\n      shortcut\n    }: {\n      event: KeyboardEvent | React.KeyboardEvent<HTMLDivElement>\n      shortcut: ShortcutConfig\n    }) => void\n  }[]\n  targetWindow?: boolean\n  onKeyDown?: (e: KeyboardEventWindowOrElement) => void\n  ref?: React.Ref<HTMLDivElement>\n}\n\nexport const KeyboardShortcut = ({\n  ref,\n  asChild,\n  config,\n  targetWindow = false,\n  onKeyDown,\n  ...rest\n}: KeyboardShortcutProps) => {\n  const [targetElRef, setTargetElRef] = useCallbackRefState()\n  React.useImperativeHandle(ref, () => targetElRef as HTMLDivElement)\n\n  const handleOnKeydown = React.useCallback(\n    (e: KeyboardEventWindowOrElement) => {\n      config.forEach(({ shortcut, action }) => {\n        if (Object.entries(shortcut).every(([key, value]) => e[key] === value))\n          action({ event: e, shortcut })\n      })\n      onKeyDown?.(e)\n    },\n    [config, onKeyDown]\n  )\n\n  React.useEffect(() => {\n    if (targetWindow) window.addEventListener('keydown', handleOnKeydown)\n\n    return () => {\n      window.removeEventListener('keydown', handleOnKeydown)\n    }\n  }, [targetWindow, handleOnKeydown])\n\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <Component\n      onKeyDown={targetWindow ? undefined : handleOnKeydown}\n      ref={setTargetElRef}\n      {...rest}\n    />\n  )\n}\n\nconst StyledKeyboardShortcutIndicator = /* @__PURE__ */ styled(Text, {\n  base: [\n    'bg-grey-100',\n    'text-text-subtle',\n    'px-2',\n    'py-0.5',\n    'min-w-6',\n    'min-h-6',\n    'font-normal',\n    'inline-flex',\n    'justify-center',\n    'items-center',\n    'rounded-md',\n    'shrink-0',\n    'capsize-none'\n  ]\n})\n\ntype KeyboardShortcutIndicatorProps = React.ComponentProps<\n  typeof StyledKeyboardShortcutIndicator\n>\n\nexport const KeyboardShortcutIndicator = (\n  props: KeyboardShortcutIndicatorProps\n) => {\n  return <StyledKeyboardShortcutIndicator size=\"sm\" as=\"kbd\" {...props} />\n}\n"],"mappings":";;;;;;;AA6BA,IAAa,oBAAoB,EAC/B,KACA,SACA,QACA,eAAe,OACf,WACA,GAAG,WACwB;CAC3B,MAAM,CAAC,aAAa,kBAAkB,oBAAoB;CAC1D,QAAM,oBAAoB,WAAW,WAA6B;CAElE,MAAM,kBAAkB,QAAM,aAC3B,MAAoC;EACnC,OAAO,SAAS,EAAE,UAAU,aAAa;GACvC,IAAI,OAAO,QAAQ,QAAQ,CAAC,CAAC,OAAO,CAAC,KAAK,WAAW,EAAE,SAAS,KAAK,GACnE,OAAO;IAAE,OAAO;IAAG;GAAS,CAAC;EACjC,CAAC;EACD,YAAY,CAAC;CACf,GACA,CAAC,QAAQ,SAAS,CACpB;CAEA,QAAM,gBAAgB;EACpB,IAAI,cAAc,OAAO,iBAAiB,WAAW,eAAe;EAEpE,aAAa;GACX,OAAO,oBAAoB,WAAW,eAAe;EACvD;CACF,GAAG,CAAC,cAAc,eAAe,CAAC;CAIlC,OACE,oBAHgB,UAAU,OAAO,OAGjC;EACE,WAAW,eAAe,KAAA,IAAY;EACtC,KAAK;EACL,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,kCAAkD,uBAAO,MAAM,EACnE,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAMD,IAAa,6BACX,UACG;CACH,OAAO,oBAAC,iCAAD;EAAiC,MAAK;EAAK,IAAG;EAAM,GAAI;CAAQ,CAAA;AACzE"}
+{"version":3,"file":"KeyboardShortcut.js","names":[],"sources":["../../../src/components/keyboard-shortcut/KeyboardShortcut.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { Text } from '../text/Text'\n\ntype KeyboardEventWindowOrElement =\n  | KeyboardEvent\n  | React.KeyboardEvent<HTMLDivElement>\ntype ShortcutConfig = Partial<KeyboardEvent>\n\ntype KeyboardShortcutProps = React.HTMLAttributes<HTMLDivElement> & {\n  asChild?: boolean\n  config: {\n    shortcut: ShortcutConfig\n    action: ({\n      event,\n      shortcut\n    }: {\n      event: KeyboardEvent | React.KeyboardEvent<HTMLDivElement>\n      shortcut: ShortcutConfig\n    }) => void\n  }[]\n  targetWindow?: boolean\n  onKeyDown?: (e: KeyboardEventWindowOrElement) => void\n  ref?: React.Ref<HTMLDivElement>\n}\n\nexport const KeyboardShortcut = ({\n  ref,\n  asChild,\n  config,\n  targetWindow = false,\n  onKeyDown,\n  ...rest\n}: KeyboardShortcutProps) => {\n  const handleOnKeydown = React.useCallback(\n    (e: KeyboardEventWindowOrElement) => {\n      config.forEach(({ shortcut, action }) => {\n        if (Object.entries(shortcut).every(([key, value]) => e[key] === value))\n          action({ event: e, shortcut })\n      })\n      onKeyDown?.(e)\n    },\n    [config, onKeyDown]\n  )\n\n  // Latest-ref so the window listener subscribes once — keyed on the handler\n  // it would re-subscribe whenever an inline `config` array changes identity.\n  const handleOnKeydownRef = React.useRef(handleOnKeydown)\n  React.useLayoutEffect(() => {\n    handleOnKeydownRef.current = handleOnKeydown\n  })\n\n  React.useEffect(() => {\n    if (!targetWindow) return\n\n    const listener = (e: KeyboardEvent) => handleOnKeydownRef.current(e)\n    window.addEventListener('keydown', listener)\n\n    return () => {\n      window.removeEventListener('keydown', listener)\n    }\n  }, [targetWindow])\n\n  const Component = asChild ? Slot : 'div'\n\n  return (\n    <Component\n      onKeyDown={targetWindow ? undefined : handleOnKeydown}\n      ref={ref}\n      {...rest}\n    />\n  )\n}\n\nconst StyledKeyboardShortcutIndicator = /* @__PURE__ */ styled(Text, {\n  base: [\n    'bg-grey-100',\n    'text-text-subtle',\n    'px-2',\n    'py-0.5',\n    'min-w-6',\n    'min-h-6',\n    'font-normal',\n    'inline-flex',\n    'justify-center',\n    'items-center',\n    'rounded-md',\n    'shrink-0',\n    'capsize-none'\n  ]\n})\n\ntype KeyboardShortcutIndicatorProps = React.ComponentProps<\n  typeof StyledKeyboardShortcutIndicator\n>\n\nexport const KeyboardShortcutIndicator = (\n  props: KeyboardShortcutIndicatorProps\n) => {\n  return <StyledKeyboardShortcutIndicator size=\"sm\" as=\"kbd\" {...props} />\n}\n"],"mappings":";;;;;;AA4BA,IAAa,oBAAoB,EAC/B,KACA,SACA,QACA,eAAe,OACf,WACA,GAAG,WACwB;CAC3B,MAAM,kBAAkB,QAAM,aAC3B,MAAoC;EACnC,OAAO,SAAS,EAAE,UAAU,aAAa;GACvC,IAAI,OAAO,QAAQ,QAAQ,CAAC,CAAC,OAAO,CAAC,KAAK,WAAW,EAAE,SAAS,KAAK,GACnE,OAAO;IAAE,OAAO;IAAG;GAAS,CAAC;EACjC,CAAC;EACD,YAAY,CAAC;CACf,GACA,CAAC,QAAQ,SAAS,CACpB;CAIA,MAAM,qBAAqB,QAAM,OAAO,eAAe;CACvD,QAAM,sBAAsB;EAC1B,mBAAmB,UAAU;CAC/B,CAAC;CAED,QAAM,gBAAgB;EACpB,IAAI,CAAC,cAAc;EAEnB,MAAM,YAAY,MAAqB,mBAAmB,QAAQ,CAAC;EACnE,OAAO,iBAAiB,WAAW,QAAQ;EAE3C,aAAa;GACX,OAAO,oBAAoB,WAAW,QAAQ;EAChD;CACF,GAAG,CAAC,YAAY,CAAC;CAIjB,OACE,oBAHgB,UAAU,OAAO,OAGjC;EACE,WAAW,eAAe,KAAA,IAAY;EACjC;EACL,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,kCAAkD,uBAAO,MAAM,EACnE,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAMD,IAAa,6BACX,UACG;CACH,OAAO,oBAAC,iCAAD;EAAiC,MAAK;EAAK,IAAG;EAAM,GAAI;CAAQ,CAAA;AACzE"}

package/dist/components/markdown-content/MarkdownContent.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-type HandleNode = (node: any) => React.JSX.Element | null;
+type HandleNode = (node: any, index?: number) => React.JSX.Element | null;
 declare const StyledMarkdownContent: import("../..").PolymorphicComponent<"div", unknown>;
 type MarkdownContentProps = React.ComponentProps<typeof StyledMarkdownContent> & {
     content: string;

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

@@ -13,9 +13,9 @@ import { MarkdownText } from "./components/MarkdownText.js";
 import { MarkdownThematicBreak } from "./components/MarkdownThematicBreak.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
-import directive from "mdast-util-directive";
-import fromMarkdown from "mdast-util-from-markdown";
-import syntax from "micromark-extension-directive";
+import { directiveFromMarkdown } from "mdast-util-directive";
+import { fromMarkdown } from "mdast-util-from-markdown";
+import { directive } from "micromark-extension-directive";
 //#region src/components/markdown-content/MarkdownContent.tsx
 var StyledMarkdownContent = styled("div", { base: [
 	"flex",
@@ -42,28 +42,28 @@ var defaultComponentsMap = {
 	text: MarkdownText,
 	thematicBreak: MarkdownThematicBreak
 };
-var generateNodeKey = (node) => {
+var generateNodeKey = (node, index) => {
 	if (node.position?.start) {
 		const { line, column, offset } = node.position.start;
 		return `${node.type}${line}${column}${offset}`;
 	}
-	return `${node.type}${+/* @__PURE__ */ new Date()}`;
+	return `${node.type}${index}`;
 };
 var MarkdownContent = ({ content, customComponents = {}, className }) => {
 	const AST = fromMarkdown(content, {
-		extensions: [syntax()],
-		mdastExtensions: [directive.fromMarkdown]
+		extensions: [directive()],
+		mdastExtensions: [directiveFromMarkdown()]
 	});
 	const componentsMap = {
 		...defaultComponentsMap,
 		...customComponents
 	};
-	const handleNode = (node) => {
+	const handleNode = (node, index = 0) => {
 		const MarkdownComponent = componentsMap[node.type];
 		return MarkdownComponent ? /* @__PURE__ */ jsx(MarkdownComponent, {
 			node,
 			handleNode
-		}, generateNodeKey(node)) : null;
+		}, generateNodeKey(node, index)) : null;
 	};
 	return /* @__PURE__ */ jsx(StyledMarkdownContent, {
 		className,

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

@@ -1 +1 @@
-{"version":3,"file":"MarkdownContent.js","names":[],"sources":["../../../src/components/markdown-content/MarkdownContent.tsx"],"sourcesContent":["import directive from 'mdast-util-directive'\nimport fromMarkdown from 'mdast-util-from-markdown'\nimport syntax from 'micromark-extension-directive'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { MarkdownCode } from './components/MarkdownCode'\nimport { MarkdownEmphasis } from './components/MarkdownEmphasis'\nimport { MarkdownHeading } from './components/MarkdownHeading'\nimport { MarkdownImage } from './components/MarkdownImage'\nimport { MarkdownInlineCode } from './components/MarkdownInlineCode'\nimport { MarkdownLink } from './components/MarkdownLink'\nimport { MarkdownList } from './components/MarkdownList'\nimport { MarkdownListItem } from './components/MarkdownListItem'\nimport { MarkdownParagraph } from './components/MarkdownParagraph'\nimport { MarkdownStrong } from './components/MarkdownStrong'\nimport { MarkdownText } from './components/MarkdownText'\nimport { MarkdownThematicBreak } from './components/MarkdownThematicBreak'\n\ntype HandleNode = (node) => React.JSX.Element | null\n\nconst StyledMarkdownContent = styled('div', {\n  base: [\n    'flex',\n    'flex-col',\n    'gap-8',\n    '[&>h1]:max-w-[65ch]',\n    '[&>h2]:max-w-[65ch]',\n    '[&>h3]:max-w-[65ch]',\n    '[&>h4]:max-w-[65ch]',\n    '[&>p]:max-w-[75ch]',\n    '[&>ul]:max-w-[75ch]'\n  ]\n})\n\ntype MarkdownContentProps = React.ComponentProps<\n  typeof StyledMarkdownContent\n> & {\n  content: string\n  customComponents?: {\n    [key: string]: (props: {\n      node: any\n      handleNode: HandleNode\n    }) => React.JSX.Element\n  }\n}\n\nconst defaultComponentsMap = {\n  code: MarkdownCode,\n  emphasis: MarkdownEmphasis,\n  heading: MarkdownHeading,\n  inlineCode: MarkdownInlineCode,\n  image: MarkdownImage,\n  link: MarkdownLink,\n  list: MarkdownList,\n  listItem: MarkdownListItem,\n  paragraph: MarkdownParagraph,\n  strong: MarkdownStrong,\n  text: MarkdownText,\n  thematicBreak: MarkdownThematicBreak\n}\n\nconst generateNodeKey = (node) => {\n  if (node.position?.start) {\n    const { line, column, offset } = node.position.start\n    return `${node.type}${line}${column}${offset}`\n  }\n\n  return `${node.type}${+new Date()}`\n}\n\nexport const MarkdownContent = ({\n  content,\n  customComponents = {},\n  className\n}: MarkdownContentProps) => {\n  const AST = fromMarkdown(content, {\n    extensions: [syntax()],\n    mdastExtensions: [directive.fromMarkdown]\n  })\n\n  const componentsMap = {\n    ...defaultComponentsMap,\n    ...customComponents\n  }\n\n  const handleNode: HandleNode = (node) => {\n    const MarkdownComponent = componentsMap[node.type]\n\n    return MarkdownComponent ? (\n      <MarkdownComponent\n        key={generateNodeKey(node)}\n        node={node}\n        handleNode={handleNode}\n      />\n    ) : null\n  }\n\n  return (\n    <StyledMarkdownContent className={className}>\n      {AST.children.map(handleNode)}\n    </StyledMarkdownContent>\n  )\n}\n\nMarkdownContent.displayName = 'MarkdownContent'\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,IAAM,wBAAwB,OAAO,OAAO,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAcD,IAAM,uBAAuB;CAC3B,MAAM;CACN,UAAU;CACV,SAAS;CACT,YAAY;CACZ,OAAO;CACP,MAAM;CACN,MAAM;CACN,UAAU;CACV,WAAW;CACX,QAAQ;CACR,MAAM;CACN,eAAe;AACjB;AAEA,IAAM,mBAAmB,SAAS;CAChC,IAAI,KAAK,UAAU,OAAO;EACxB,MAAM,EAAE,MAAM,QAAQ,WAAW,KAAK,SAAS;EAC/C,OAAO,GAAG,KAAK,OAAO,OAAO,SAAS;CACxC;CAEA,OAAO,GAAG,KAAK,OAAO,iBAAC,IAAI,KAAK;AAClC;AAEA,IAAa,mBAAmB,EAC9B,SACA,mBAAmB,CAAC,GACpB,gBAC0B;CAC1B,MAAM,MAAM,aAAa,SAAS;EAChC,YAAY,CAAC,OAAO,CAAC;EACrB,iBAAiB,CAAC,UAAU,YAAY;CAC1C,CAAC;CAED,MAAM,gBAAgB;EACpB,GAAG;EACH,GAAG;CACL;CAEA,MAAM,cAA0B,SAAS;EACvC,MAAM,oBAAoB,cAAc,KAAK;EAE7C,OAAO,oBACL,oBAAC,mBAAD;GAEQ;GACM;EACb,GAHM,gBAAgB,IAAI,CAG1B,IACC;CACN;CAEA,OACE,oBAAC,uBAAD;EAAkC;YAC/B,IAAI,SAAS,IAAI,UAAU;CACP,CAAA;AAE3B;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"MarkdownContent.js","names":[],"sources":["../../../src/components/markdown-content/MarkdownContent.tsx"],"sourcesContent":["import { directiveFromMarkdown } from 'mdast-util-directive'\nimport { fromMarkdown } from 'mdast-util-from-markdown'\nimport { directive } from 'micromark-extension-directive'\nimport * as React from 'react'\n\nimport { styled } from '../../styled'\nimport { MarkdownCode } from './components/MarkdownCode'\nimport { MarkdownEmphasis } from './components/MarkdownEmphasis'\nimport { MarkdownHeading } from './components/MarkdownHeading'\nimport { MarkdownImage } from './components/MarkdownImage'\nimport { MarkdownInlineCode } from './components/MarkdownInlineCode'\nimport { MarkdownLink } from './components/MarkdownLink'\nimport { MarkdownList } from './components/MarkdownList'\nimport { MarkdownListItem } from './components/MarkdownListItem'\nimport { MarkdownParagraph } from './components/MarkdownParagraph'\nimport { MarkdownStrong } from './components/MarkdownStrong'\nimport { MarkdownText } from './components/MarkdownText'\nimport { MarkdownThematicBreak } from './components/MarkdownThematicBreak'\n\ntype HandleNode = (node, index?: number) => React.JSX.Element | null\n\nconst StyledMarkdownContent = styled('div', {\n  base: [\n    'flex',\n    'flex-col',\n    'gap-8',\n    '[&>h1]:max-w-[65ch]',\n    '[&>h2]:max-w-[65ch]',\n    '[&>h3]:max-w-[65ch]',\n    '[&>h4]:max-w-[65ch]',\n    '[&>p]:max-w-[75ch]',\n    '[&>ul]:max-w-[75ch]'\n  ]\n})\n\ntype MarkdownContentProps = React.ComponentProps<\n  typeof StyledMarkdownContent\n> & {\n  content: string\n  customComponents?: {\n    [key: string]: (props: {\n      node: any\n      handleNode: HandleNode\n    }) => React.JSX.Element\n  }\n}\n\nconst defaultComponentsMap = {\n  code: MarkdownCode,\n  emphasis: MarkdownEmphasis,\n  heading: MarkdownHeading,\n  inlineCode: MarkdownInlineCode,\n  image: MarkdownImage,\n  link: MarkdownLink,\n  list: MarkdownList,\n  listItem: MarkdownListItem,\n  paragraph: MarkdownParagraph,\n  strong: MarkdownStrong,\n  text: MarkdownText,\n  thematicBreak: MarkdownThematicBreak\n}\n\nconst generateNodeKey = (node, index: number) => {\n  if (node.position?.start) {\n    const { line, column, offset } = node.position.start\n    return `${node.type}${line}${column}${offset}`\n  }\n\n  // Deterministic fallback: keys must be stable across renders and identical\n  // between server and client, so no timestamps or random values.\n  return `${node.type}${index}`\n}\n\nexport const MarkdownContent = ({\n  content,\n  customComponents = {},\n  className\n}: MarkdownContentProps) => {\n  const AST = fromMarkdown(content, {\n    extensions: [directive()],\n    mdastExtensions: [directiveFromMarkdown()]\n  })\n\n  const componentsMap = {\n    ...defaultComponentsMap,\n    ...customComponents\n  }\n\n  const handleNode: HandleNode = (node, index = 0) => {\n    const MarkdownComponent = componentsMap[node.type]\n\n    return MarkdownComponent ? (\n      <MarkdownComponent\n        key={generateNodeKey(node, index)}\n        node={node}\n        handleNode={handleNode}\n      />\n    ) : null\n  }\n\n  return (\n    <StyledMarkdownContent className={className}>\n      {AST.children.map(handleNode)}\n    </StyledMarkdownContent>\n  )\n}\n\nMarkdownContent.displayName = 'MarkdownContent'\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqBA,IAAM,wBAAwB,OAAO,OAAO,EAC1C,MAAM;CACJ;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,EACF,CAAC;AAcD,IAAM,uBAAuB;CAC3B,MAAM;CACN,UAAU;CACV,SAAS;CACT,YAAY;CACZ,OAAO;CACP,MAAM;CACN,MAAM;CACN,UAAU;CACV,WAAW;CACX,QAAQ;CACR,MAAM;CACN,eAAe;AACjB;AAEA,IAAM,mBAAmB,MAAM,UAAkB;CAC/C,IAAI,KAAK,UAAU,OAAO;EACxB,MAAM,EAAE,MAAM,QAAQ,WAAW,KAAK,SAAS;EAC/C,OAAO,GAAG,KAAK,OAAO,OAAO,SAAS;CACxC;CAIA,OAAO,GAAG,KAAK,OAAO;AACxB;AAEA,IAAa,mBAAmB,EAC9B,SACA,mBAAmB,CAAC,GACpB,gBAC0B;CAC1B,MAAM,MAAM,aAAa,SAAS;EAChC,YAAY,CAAC,UAAU,CAAC;EACxB,iBAAiB,CAAC,sBAAsB,CAAC;CAC3C,CAAC;CAED,MAAM,gBAAgB;EACpB,GAAG;EACH,GAAG;CACL;CAEA,MAAM,cAA0B,MAAM,QAAQ,MAAM;EAClD,MAAM,oBAAoB,cAAc,KAAK;EAE7C,OAAO,oBACL,oBAAC,mBAAD;GAEQ;GACM;EACb,GAHM,gBAAgB,MAAM,KAAK,CAGjC,IACC;CACN;CAEA,OACE,oBAAC,uBAAD;EAAkC;YAC/B,IAAI,SAAS,IAAI,UAAU;CACP,CAAA;AAE3B;AAEA,gBAAgB,cAAc"}

package/dist/components/markdown-content/components/MarkdownEmphasis.d.ts

@@ -1,8 +1,8 @@
-import type { Content, Emphasis } from 'mdast';
+import type { RootContent, Emphasis } from 'mdast';
 import * as React from 'react';
 type MarkdownEmphasisProps = {
     node: Emphasis;
-    handleNode: (node: Content) => React.ReactElement<unknown>;
+    handleNode: (node: RootContent) => React.ReactElement<unknown>;
 };
 export declare const StyledMarkdownEmphasis: import("../../..").PolymorphicComponent<"em", unknown>;
 export declare const MarkdownEmphasis: ({ node, handleNode }: MarkdownEmphasisProps) => React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"MarkdownEmphasis.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownEmphasis.tsx"],"sourcesContent":["import type { Content, Emphasis } from 'mdast'\nimport * as React from 'react'\n\nimport { styled } from '../../../styled'\n\ntype MarkdownEmphasisProps = {\n  node: Emphasis\n  handleNode: (node: Content) => React.ReactElement<unknown>\n}\n\nexport const StyledMarkdownEmphasis = styled('em', {\n  base: ['italic']\n})\n\nexport const MarkdownEmphasis = ({\n  node,\n  handleNode\n}: MarkdownEmphasisProps) => (\n  <StyledMarkdownEmphasis>\n    {node.children?.map(handleNode)}\n  </StyledMarkdownEmphasis>\n)\n"],"mappings":";;;;AAUA,IAAa,yBAAyB,OAAO,MAAM,EACjD,MAAM,CAAC,QAAQ,EACjB,CAAC;AAED,IAAa,oBAAoB,EAC/B,MACA,iBAEA,oBAAC,wBAAD,EAAA,UACG,KAAK,UAAU,IAAI,UAAU,EACR,CAAA"}
+{"version":3,"file":"MarkdownEmphasis.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownEmphasis.tsx"],"sourcesContent":["import type { RootContent, Emphasis } from 'mdast'\nimport * as React from 'react'\n\nimport { styled } from '../../../styled'\n\ntype MarkdownEmphasisProps = {\n  node: Emphasis\n  handleNode: (node: RootContent) => React.ReactElement<unknown>\n}\n\nexport const StyledMarkdownEmphasis = styled('em', {\n  base: ['italic']\n})\n\nexport const MarkdownEmphasis = ({\n  node,\n  handleNode\n}: MarkdownEmphasisProps) => (\n  <StyledMarkdownEmphasis>\n    {node.children?.map(handleNode)}\n  </StyledMarkdownEmphasis>\n)\n"],"mappings":";;;;AAUA,IAAa,yBAAyB,OAAO,MAAM,EACjD,MAAM,CAAC,QAAQ,EACjB,CAAC;AAED,IAAa,oBAAoB,EAC/B,MACA,iBAEA,oBAAC,wBAAD,EAAA,UACG,KAAK,UAAU,IAAI,UAAU,EACR,CAAA"}

package/dist/components/markdown-content/components/MarkdownHeading.d.ts

@@ -1,8 +1,8 @@
-import type { Content, Heading as HeadingType } from 'mdast';
+import type { RootContent, Heading as HeadingType } from 'mdast';
 import * as React from 'react';
 type MarkdownHeadingProps = {
     node: HeadingType;
-    handleNode: (node: Content) => React.ReactElement<unknown>;
+    handleNode: (node: RootContent) => React.ReactElement<unknown>;
 };
 export declare const MarkdownHeading: ({ node, handleNode, ...rest }: MarkdownHeadingProps) => React.JSX.Element;
 export {};

package/dist/components/markdown-content/components/MarkdownHeading.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownHeading.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownHeading.tsx"],"sourcesContent":["import type { Content, Heading as HeadingType } from 'mdast'\nimport * as React from 'react'\n\nimport { Heading, type HeadingProps } from '../../heading/Heading'\n\ntype MarkdownHeadingProps = {\n  node: HeadingType\n  handleNode: (node: Content) => React.ReactElement<unknown>\n}\n\nconst getHeadingProps = (depth: number): HeadingProps => {\n  switch (depth) {\n    case 1:\n      return { size: 'xl', as: 'h1' }\n    case 2:\n      return { size: 'lg', as: 'h2' }\n    case 3:\n      return { size: 'md', as: 'h3' }\n    case 4:\n      return { size: 'sm', as: 'h4' }\n    case 5:\n      return { size: 'xs', as: 'h5' }\n    default:\n      return { size: 'xs', as: 'h6' }\n  }\n}\n\nexport const MarkdownHeading = ({\n  node,\n  handleNode,\n  ...rest\n}: MarkdownHeadingProps) => {\n  const { as, size } = getHeadingProps(node.depth)\n\n  return (\n    <Heading as={as} size={size} {...rest}>\n      {node.children?.map(handleNode)}\n    </Heading>\n  )\n}\n"],"mappings":";;;;AAUA,IAAM,mBAAmB,UAAgC;CACvD,QAAQ,OAAR;EACE,KAAK,GACH,OAAO;GAAE,MAAM;GAAM,IAAI;EAAK;EAChC,KAAK,GACH,OAAO;GAAE,MAAM;GAAM,IAAI;EAAK;EAChC,KAAK,GACH,OAAO;GAAE,MAAM;GAAM,IAAI;EAAK;EAChC,KAAK,GACH,OAAO;GAAE,MAAM;GAAM,IAAI;EAAK;EAChC,KAAK,GACH,OAAO;GAAE,MAAM;GAAM,IAAI;EAAK;EAChC,SACE,OAAO;GAAE,MAAM;GAAM,IAAI;EAAK;CAClC;AACF;AAEA,IAAa,mBAAmB,EAC9B,MACA,YACA,GAAG,WACuB;CAC1B,MAAM,EAAE,IAAI,SAAS,gBAAgB,KAAK,KAAK;CAE/C,OACE,oBAAC,SAAD;EAAa;EAAU;EAAM,GAAI;YAC9B,KAAK,UAAU,IAAI,UAAU;CACvB,CAAA;AAEb"}
+{"version":3,"file":"MarkdownHeading.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownHeading.tsx"],"sourcesContent":["import type { RootContent, Heading as HeadingType } from 'mdast'\nimport * as React from 'react'\n\nimport { Heading, type HeadingProps } from '../../heading/Heading'\n\ntype MarkdownHeadingProps = {\n  node: HeadingType\n  handleNode: (node: RootContent) => React.ReactElement<unknown>\n}\n\nconst getHeadingProps = (depth: number): HeadingProps => {\n  switch (depth) {\n    case 1:\n      return { size: 'xl', as: 'h1' }\n    case 2:\n      return { size: 'lg', as: 'h2' }\n    case 3:\n      return { size: 'md', as: 'h3' }\n    case 4:\n      return { size: 'sm', as: 'h4' }\n    case 5:\n      return { size: 'xs', as: 'h5' }\n    default:\n      return { size: 'xs', as: 'h6' }\n  }\n}\n\nexport const MarkdownHeading = ({\n  node,\n  handleNode,\n  ...rest\n}: MarkdownHeadingProps) => {\n  const { as, size } = getHeadingProps(node.depth)\n\n  return (\n    <Heading as={as} size={size} {...rest}>\n      {node.children?.map(handleNode)}\n    </Heading>\n  )\n}\n"],"mappings":";;;;AAUA,IAAM,mBAAmB,UAAgC;CACvD,QAAQ,OAAR;EACE,KAAK,GACH,OAAO;GAAE,MAAM;GAAM,IAAI;EAAK;EAChC,KAAK,GACH,OAAO;GAAE,MAAM;GAAM,IAAI;EAAK;EAChC,KAAK,GACH,OAAO;GAAE,MAAM;GAAM,IAAI;EAAK;EAChC,KAAK,GACH,OAAO;GAAE,MAAM;GAAM,IAAI;EAAK;EAChC,KAAK,GACH,OAAO;GAAE,MAAM;GAAM,IAAI;EAAK;EAChC,SACE,OAAO;GAAE,MAAM;GAAM,IAAI;EAAK;CAClC;AACF;AAEA,IAAa,mBAAmB,EAC9B,MACA,YACA,GAAG,WACuB;CAC1B,MAAM,EAAE,IAAI,SAAS,gBAAgB,KAAK,KAAK;CAE/C,OACE,oBAAC,SAAD;EAAa;EAAU;EAAM,GAAI;YAC9B,KAAK,UAAU,IAAI,UAAU;CACvB,CAAA;AAEb"}

package/dist/components/markdown-content/components/MarkdownLink.d.ts

@@ -1,8 +1,8 @@
-import type { Content, Link as LinkType } from 'mdast';
+import type { RootContent, Link as LinkType } from 'mdast';
 import * as React from 'react';
 type MarkdownLinkProps = {
     node: LinkType;
-    handleNode: (node: Content) => React.ReactElement<unknown>;
+    handleNode: (node: RootContent) => React.ReactElement<unknown>;
 };
 export declare const MarkdownLink: ({ node, handleNode }: MarkdownLinkProps) => React.JSX.Element;
 export {};

package/dist/components/markdown-content/components/MarkdownLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownLink.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownLink.tsx"],"sourcesContent":["import type { Content, Link as LinkType } from 'mdast'\nimport * as React from 'react'\n\nimport { Link } from '../../link/Link'\n\ntype MarkdownLinkProps = {\n  node: LinkType\n  handleNode: (node: Content) => React.ReactElement<unknown>\n}\n\nexport const MarkdownLink = ({ node, handleNode }: MarkdownLinkProps) => (\n  <Link title={node.title ?? undefined} href={node.url}>\n    {node.children?.map(handleNode)}\n  </Link>\n)\n"],"mappings":";;;;AAUA,IAAa,gBAAgB,EAAE,MAAM,iBACnC,oBAAC,MAAD;CAAM,OAAO,KAAK,SAAS,KAAA;CAAW,MAAM,KAAK;WAC9C,KAAK,UAAU,IAAI,UAAU;AAC1B,CAAA"}
+{"version":3,"file":"MarkdownLink.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownLink.tsx"],"sourcesContent":["import type { RootContent, Link as LinkType } from 'mdast'\nimport * as React from 'react'\n\nimport { Link } from '../../link/Link'\n\ntype MarkdownLinkProps = {\n  node: LinkType\n  handleNode: (node: RootContent) => React.ReactElement<unknown>\n}\n\nexport const MarkdownLink = ({ node, handleNode }: MarkdownLinkProps) => (\n  <Link title={node.title ?? undefined} href={node.url}>\n    {node.children?.map(handleNode)}\n  </Link>\n)\n"],"mappings":";;;;AAUA,IAAa,gBAAgB,EAAE,MAAM,iBACnC,oBAAC,MAAD;CAAM,OAAO,KAAK,SAAS,KAAA;CAAW,MAAM,KAAK;WAC9C,KAAK,UAAU,IAAI,UAAU;AAC1B,CAAA"}

package/dist/components/markdown-content/components/MarkdownList.d.ts

@@ -1,8 +1,8 @@
-import type { Content, List as ListType } from 'mdast';
+import type { RootContent, List as ListType } from 'mdast';
 import * as React from 'react';
 type MarkdownListProps = {
     node: ListType;
-    handleNode: (node: Content) => React.ReactElement<unknown>;
+    handleNode: (node: RootContent) => React.ReactElement<unknown>;
     className?: string;
 };
 export declare const MarkdownList: ({ node, handleNode, className }: MarkdownListProps) => React.JSX.Element;

package/dist/components/markdown-content/components/MarkdownList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MarkdownList.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownList.tsx"],"sourcesContent":["import type { Content, List as ListType } from 'mdast'\nimport * as React from 'react'\n\nimport { cn } from '../../../styled'\nimport { List } from '../../list/List'\n\ntype MarkdownListProps = {\n  node: ListType\n  handleNode: (node: Content) => React.ReactElement<unknown>\n  className?: string\n}\n\nexport const MarkdownList = ({\n  node,\n  handleNode,\n  className\n}: MarkdownListProps) => (\n  <List\n    ordered={node.ordered || undefined}\n    className={cn(\n      '[&_p]:inline',\n      '[&_p]:before:hidden',\n      '[&_p]:after:hidden',\n      className\n    )}\n  >\n    {node.children?.map(handleNode)}\n  </List>\n)\n"],"mappings":";;;;;AAYA,IAAa,gBAAgB,EAC3B,MACA,YACA,gBAEA,oBAAC,MAAD;CACE,SAAS,KAAK,WAAW,KAAA;CACzB,WAAW,GACT,gBACA,uBACA,sBACA,SACF;WAEC,KAAK,UAAU,IAAI,UAAU;AAC1B,CAAA"}
+{"version":3,"file":"MarkdownList.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownList.tsx"],"sourcesContent":["import type { RootContent, List as ListType } from 'mdast'\nimport * as React from 'react'\n\nimport { cn } from '../../../styled'\nimport { List } from '../../list/List'\n\ntype MarkdownListProps = {\n  node: ListType\n  handleNode: (node: RootContent) => React.ReactElement<unknown>\n  className?: string\n}\n\nexport const MarkdownList = ({\n  node,\n  handleNode,\n  className\n}: MarkdownListProps) => (\n  <List\n    ordered={node.ordered || undefined}\n    className={cn(\n      '[&_p]:inline',\n      '[&_p]:before:hidden',\n      '[&_p]:after:hidden',\n      className\n    )}\n  >\n    {node.children?.map(handleNode)}\n  </List>\n)\n"],"mappings":";;;;;AAYA,IAAa,gBAAgB,EAC3B,MACA,YACA,gBAEA,oBAAC,MAAD;CACE,SAAS,KAAK,WAAW,KAAA;CACzB,WAAW,GACT,gBACA,uBACA,sBACA,SACF;WAEC,KAAK,UAAU,IAAI,UAAU;AAC1B,CAAA"}

package/dist/components/markdown-content/components/MarkdownListItem.d.ts

@@ -1,8 +1,8 @@
-import type { Content, ListItem } from 'mdast';
+import type { RootContent, ListItem } from 'mdast';
 import * as React from 'react';
 type MarkdownListItemProps = {
     node: ListItem;
-    handleNode: (node: Content) => React.ReactElement<unknown>;
+    handleNode: (node: RootContent) => React.ReactElement<unknown>;
 };
 export declare const MarkdownListItem: ({ node, handleNode }: MarkdownListItemProps) => React.JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"MarkdownListItem.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownListItem.tsx"],"sourcesContent":["import type { Content, ListItem } from 'mdast'\nimport * as React from 'react'\n\nimport { List } from '../../list/List'\n\ntype MarkdownListItemProps = {\n  node: ListItem\n  handleNode: (node: Content) => React.ReactElement<unknown>\n}\n\nexport const MarkdownListItem = ({\n  node,\n  handleNode\n}: MarkdownListItemProps) => (\n  <List.Item>{node.children?.map(handleNode)}</List.Item>\n)\n"],"mappings":";;;;AAUA,IAAa,oBAAoB,EAC/B,MACA,iBAEA,oBAAC,KAAK,MAAN,EAAA,UAAY,KAAK,UAAU,IAAI,UAAU,EAAa,CAAA"}
+{"version":3,"file":"MarkdownListItem.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownListItem.tsx"],"sourcesContent":["import type { RootContent, ListItem } from 'mdast'\nimport * as React from 'react'\n\nimport { List } from '../../list/List'\n\ntype MarkdownListItemProps = {\n  node: ListItem\n  handleNode: (node: RootContent) => React.ReactElement<unknown>\n}\n\nexport const MarkdownListItem = ({\n  node,\n  handleNode\n}: MarkdownListItemProps) => (\n  <List.Item>{node.children?.map(handleNode)}</List.Item>\n)\n"],"mappings":";;;;AAUA,IAAa,oBAAoB,EAC/B,MACA,iBAEA,oBAAC,KAAK,MAAN,EAAA,UAAY,KAAK,UAAU,IAAI,UAAU,EAAa,CAAA"}

package/dist/components/markdown-content/components/MarkdownParagraph.d.ts

@@ -1,8 +1,8 @@
-import type { Content, Paragraph } from 'mdast';
+import type { RootContent, Paragraph } from 'mdast';
 import * as React from 'react';
 type MarkdownParagraphProps = {
     node: Paragraph;
-    handleNode: (node: Content) => React.ReactElement<unknown>;
+    handleNode: (node: RootContent) => React.ReactElement<unknown>;
 };
 export declare const MarkdownParagraph: ({ node, handleNode, ...rest }: MarkdownParagraphProps) => React.JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"MarkdownParagraph.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownParagraph.tsx"],"sourcesContent":["import type { Content, Paragraph } from 'mdast'\nimport * as React from 'react'\n\nimport { Text } from '../../text/Text'\n\ntype MarkdownParagraphProps = {\n  node: Paragraph\n  handleNode: (node: Content) => React.ReactElement<unknown>\n}\n\nexport const MarkdownParagraph = ({\n  node,\n  handleNode,\n  ...rest\n}: MarkdownParagraphProps) => (\n  <Text {...rest}>{node.children?.map(handleNode)}</Text>\n)\n"],"mappings":";;;;AAUA,IAAa,qBAAqB,EAChC,MACA,YACA,GAAG,WAEH,oBAAC,MAAD;CAAM,GAAI;WAAO,KAAK,UAAU,IAAI,UAAU;AAAQ,CAAA"}
+{"version":3,"file":"MarkdownParagraph.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownParagraph.tsx"],"sourcesContent":["import type { RootContent, Paragraph } from 'mdast'\nimport * as React from 'react'\n\nimport { Text } from '../../text/Text'\n\ntype MarkdownParagraphProps = {\n  node: Paragraph\n  handleNode: (node: RootContent) => React.ReactElement<unknown>\n}\n\nexport const MarkdownParagraph = ({\n  node,\n  handleNode,\n  ...rest\n}: MarkdownParagraphProps) => (\n  <Text {...rest}>{node.children?.map(handleNode)}</Text>\n)\n"],"mappings":";;;;AAUA,IAAa,qBAAqB,EAChC,MACA,YACA,GAAG,WAEH,oBAAC,MAAD;CAAM,GAAI;WAAO,KAAK,UAAU,IAAI,UAAU;AAAQ,CAAA"}

package/dist/components/markdown-content/components/MarkdownStrong.d.ts

@@ -1,8 +1,8 @@
-import type { Content, Strong } from 'mdast';
+import type { RootContent, Strong } from 'mdast';
 import * as React from 'react';
 type MarkdownStrongProps = {
     node: Strong;
-    handleNode: (node: Content) => React.ReactElement<unknown>;
+    handleNode: (node: RootContent) => React.ReactElement<unknown>;
 };
 export declare const MarkdownStrong: ({ node, handleNode }: MarkdownStrongProps) => React.JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"MarkdownStrong.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownStrong.tsx"],"sourcesContent":["import type { Content, Strong } from 'mdast'\nimport * as React from 'react'\n\nimport { styled } from '../../../styled'\n\ntype MarkdownStrongProps = {\n  node: Strong\n  handleNode: (node: Content) => React.ReactElement<unknown>\n}\n\nconst StyledMarkdownStrong = styled('strong', {\n  base: ['font-semibold']\n})\n\nexport const MarkdownStrong = ({ node, handleNode }: MarkdownStrongProps) => (\n  <StyledMarkdownStrong>{node.children?.map(handleNode)}</StyledMarkdownStrong>\n)\n"],"mappings":";;;;AAUA,IAAM,uBAAuB,OAAO,UAAU,EAC5C,MAAM,CAAC,eAAe,EACxB,CAAC;AAED,IAAa,kBAAkB,EAAE,MAAM,iBACrC,oBAAC,sBAAD,EAAA,UAAuB,KAAK,UAAU,IAAI,UAAU,EAAwB,CAAA"}
+{"version":3,"file":"MarkdownStrong.js","names":[],"sources":["../../../../src/components/markdown-content/components/MarkdownStrong.tsx"],"sourcesContent":["import type { RootContent, Strong } from 'mdast'\nimport * as React from 'react'\n\nimport { styled } from '../../../styled'\n\ntype MarkdownStrongProps = {\n  node: Strong\n  handleNode: (node: RootContent) => React.ReactElement<unknown>\n}\n\nconst StyledMarkdownStrong = styled('strong', {\n  base: ['font-semibold']\n})\n\nexport const MarkdownStrong = ({ node, handleNode }: MarkdownStrongProps) => (\n  <StyledMarkdownStrong>{node.children?.map(handleNode)}</StyledMarkdownStrong>\n)\n"],"mappings":";;;;AAUA,IAAM,uBAAuB,OAAO,UAAU,EAC5C,MAAM,CAAC,eAAe,EACxB,CAAC;AAED,IAAa,kBAAkB,EAAE,MAAM,iBACrC,oBAAC,sBAAD,EAAA,UAAuB,KAAK,UAAU,IAAI,UAAU,EAAwB,CAAA"}

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

@@ -2,7 +2,7 @@ import * as React$1 from "react";
 //#region src/components/navigation/NavigationMenu.context.tsx
 var NavigationMenuContext = React$1.createContext(void 0);
 var useNavigationMenuContext = () => {
-	const context = React$1.useContext(NavigationMenuContext);
+	const context = React$1.use(NavigationMenuContext);
 	if (context === void 0) throw new Error("useNavigationMenuContext must be used within a NavigationMenuContextProvider");
 	return context;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenu.context.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.context.tsx"],"sourcesContent":["import * as React from 'react'\n\ninterface NavigationMenuContextValue {\n  onNodeUpdate: (\n    trigger: HTMLButtonElement,\n    itemValue: string\n  ) => HTMLButtonElement\n}\n\nexport const NavigationMenuContext = React.createContext<\n  NavigationMenuContextValue | undefined\n>(undefined)\n\nexport const useNavigationMenuContext = (): NavigationMenuContextValue => {\n  const context = React.useContext(NavigationMenuContext)\n\n  if (context === undefined) {\n    throw new Error(\n      'useNavigationMenuContext must be used within a NavigationMenuContextProvider'\n    )\n  }\n\n  return context\n}\n"],"mappings":";;AASA,IAAa,wBAAwB,QAAM,cAEzC,KAAA,CAAS;AAEX,IAAa,iCAA6D;CACxE,MAAM,UAAU,QAAM,WAAW,qBAAqB;CAEtD,IAAI,YAAY,KAAA,GACd,MAAM,IAAI,MACR,8EACF;CAGF,OAAO;AACT"}
+{"version":3,"file":"NavigationMenu.context.js","names":[],"sources":["../../../src/components/navigation/NavigationMenu.context.tsx"],"sourcesContent":["import * as React from 'react'\n\ninterface NavigationMenuContextValue {\n  onNodeUpdate: (\n    trigger: HTMLButtonElement,\n    itemValue: string\n  ) => HTMLButtonElement\n}\n\nexport const NavigationMenuContext = React.createContext<\n  NavigationMenuContextValue | undefined\n>(undefined)\n\nexport const useNavigationMenuContext = (): NavigationMenuContextValue => {\n  const context = React.use(NavigationMenuContext)\n\n  if (context === undefined) {\n    throw new Error(\n      'useNavigationMenuContext must be used within a NavigationMenuContextProvider'\n    )\n  }\n\n  return context\n}\n"],"mappings":";;AASA,IAAa,wBAAwB,QAAM,cAEzC,KAAA,CAAS;AAEX,IAAa,iCAA6D;CACxE,MAAM,UAAU,QAAM,IAAI,qBAAqB;CAE/C,IAAI,YAAY,KAAA,GACd,MAAM,IAAI,MACR,8EACF;CAGF,OAAO;AACT"}

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, {