@atom-learning/components 9.0.0-beta.5 → 10.0.0

package/dist/components/form/useFormCustomContext.js

@@ -1,7 +1,7 @@
 import * as React$1 from "react";
 //#region src/components/form/useFormCustomContext.ts
 var FormCustomContext = React$1.createContext({ appearance: "standard" });
-var useFormCustomContext = () => React$1.useContext(FormCustomContext);
+var useFormCustomContext = () => React$1.use(FormCustomContext);
 //#endregion
 export { FormCustomContext, useFormCustomContext };
 

package/dist/components/form/useFormCustomContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormCustomContext.js","names":[],"sources":["../../../src/components/form/useFormCustomContext.ts"],"sourcesContent":["import * as React from 'react'\n\nimport type { InputProps } from '../input/Input'\n\nexport type FormCustomContextType =\n  | {\n      appearance?: InputProps['appearance']\n      theme?: InputProps['theme']\n    }\n  | undefined\n\nexport const FormCustomContext = React.createContext<FormCustomContextType>({\n  appearance: 'standard'\n})\n\nexport const useFormCustomContext = () => React.useContext(FormCustomContext)\n"],"mappings":";;AAWA,IAAa,oBAAoB,QAAM,cAAqC,EAC1E,YAAY,WACd,CAAC;AAED,IAAa,6BAA6B,QAAM,WAAW,iBAAiB"}
+{"version":3,"file":"useFormCustomContext.js","names":[],"sources":["../../../src/components/form/useFormCustomContext.ts"],"sourcesContent":["import * as React from 'react'\n\nimport type { InputProps } from '../input/Input'\n\nexport type FormCustomContextType =\n  | {\n      appearance?: InputProps['appearance']\n      theme?: InputProps['theme']\n    }\n  | undefined\n\nexport const FormCustomContext = React.createContext<FormCustomContextType>({\n  appearance: 'standard'\n})\n\nexport const useFormCustomContext = () => React.use(FormCustomContext)\n"],"mappings":";;AAWA,IAAa,oBAAoB,QAAM,cAAqC,EAC1E,YAAY,WACd,CAAC;AAED,IAAa,6BAA6B,QAAM,IAAI,iBAAiB"}

package/dist/components/index.d.ts

@@ -10,7 +10,6 @@ export { Avatar } from './avatar/Avatar';
 export { Badge, type BadgeProps } from './badge/Badge';
 export { BannerRegular } from './banner/banner-regular/BannerRegular';
 export { BannerSlim } from './banner/banner-slim/BannerSlim';
-export { Box } from './box/Box';
 export { Button, StyledButton } from './button/Button';
 export { Carousel, useCarousel } from './carousel/Carousel';
 export { Checkbox } from './checkbox/Checkbox';
@@ -37,9 +36,7 @@ export { EmptyState } from './empty-state/EmptyState';
 export { FieldWrapper } from './field-wrapper/FieldWrapper';
 export { InlineFieldWrapper } from './field-wrapper/InlineFieldWrapper';
 export { FileInput } from './file-input/FileInput';
-export { Flex } from './flex/Flex';
 export { Form } from './form/Form';
-export { Grid } from './grid/Grid';
 export { Heading, type HeadingProps } from './heading/Heading';
 export { Icon } from './icon/Icon';
 export { Image } from './image/Image';

package/dist/components/index.js

@@ -15,7 +15,6 @@ import { Badge } from "./badge/Badge.js";
 import { Dismissible } from "./dismissible/index.js";
 import { BannerRegular } from "./banner/banner-regular/BannerRegular.js";
 import { BannerSlim } from "./banner/banner-slim/BannerSlim.js";
-import { Box } from "./box/Box.js";
 import { Carousel, useCarousel } from "./carousel/Carousel.js";
 import { Checkbox } from "./checkbox/Checkbox.js";
 import { CheckboxGroup } from "./checkbox-group/CheckboxGroup.js";
@@ -52,9 +51,7 @@ import { Dialog } from "./dialog/Dialog.js";
 import { Drawer } from "./drawer/Drawer.js";
 import { DropdownMenu } from "./dropdown-menu/DropdownMenu.js";
 import { FileInput } from "./file-input/FileInput.js";
-import { Flex } from "./flex/Flex.js";
 import { Form } from "./form/Form.js";
-import { Grid } from "./grid/Grid.js";
 import { InputField } from "./input-field/InputField.js";
 import { List } from "./list/List.js";
 import { MarkdownContent } from "./markdown-content/MarkdownContent.js";
@@ -100,6 +97,6 @@ import { useFileDrop } from "./file-drop/useFileDrop.js";
 //#region src/components/index.ts
 var Alert = { Provider: AlertProvider };
 //#endregion
-export { Accordion, ActionIcon, Alert, AlertDialog, Avatar, Badge, BannerRegular, BannerSlim, Box, Button, Carousel, Checkbox, CheckboxField, CheckboxGroup, CheckboxTree, Chip, ChipDismissibleGroup, ChipGroup, ChipToggleGroup, Combobox, CreatePasswordField, DataTable, DateField, DateInput, Dialog, Dismissible, DismissibleGroup, Divider, Drawer, DropdownMenu, EmptyState, FieldWrapper, FileDrop, FileInput, Flex, Form, Grid, Heading, Icon, Image, InlineFieldWrapper, InlineMessage, Input, InputBackground, InputField, InputText, KeyboardShortcut, Label, Link, List, Loader, MarkdownContent, NavigationMenu, NavigationMenuVertical, NotificationBadge, NumberInput, NumberInputField, Pagination, PasswordField, PasswordInput, Popover, ProgressBar, RadioButton, RadioButtonField, RadioButtonGroup, RadioCard, RadioCardGroup, SearchField, SearchInput, SectionMessage, SegmentedControl, Select, SelectField, SelectMenu, SelectMenuField, SideBar, skeleton_loader_exports as Skeleton, Slider, SliderField, sortable_exports as Sortable, Spacer, Stepper, StyledButton, StyledLink, Switch, Table, Tabs, Text, Textarea, TextareaField, Tile, TileInteractive, TileToggleGroup, Toast, ToggleGroup, Tooltip, TopBar, Tree, Video, toast, useAlert, useCarousel, useDataTable, useFileDrop, useSidebarState };
+export { Accordion, ActionIcon, Alert, AlertDialog, Avatar, Badge, BannerRegular, BannerSlim, Button, Carousel, Checkbox, CheckboxField, CheckboxGroup, CheckboxTree, Chip, ChipDismissibleGroup, ChipGroup, ChipToggleGroup, Combobox, CreatePasswordField, DataTable, DateField, DateInput, Dialog, Dismissible, DismissibleGroup, Divider, Drawer, DropdownMenu, EmptyState, FieldWrapper, FileDrop, FileInput, Form, Heading, Icon, Image, InlineFieldWrapper, InlineMessage, Input, InputBackground, InputField, InputText, KeyboardShortcut, Label, Link, List, Loader, MarkdownContent, NavigationMenu, NavigationMenuVertical, NotificationBadge, NumberInput, NumberInputField, Pagination, PasswordField, PasswordInput, Popover, ProgressBar, RadioButton, RadioButtonField, RadioButtonGroup, RadioCard, RadioCardGroup, SearchField, SearchInput, SectionMessage, SegmentedControl, Select, SelectField, SelectMenu, SelectMenuField, SideBar, skeleton_loader_exports as Skeleton, Slider, SliderField, sortable_exports as Sortable, Spacer, Stepper, StyledButton, StyledLink, Switch, Table, Tabs, Text, Textarea, TextareaField, Tile, TileInteractive, TileToggleGroup, Toast, ToggleGroup, Tooltip, TopBar, Tree, Video, toast, useAlert, useCarousel, useDataTable, useFileDrop, useSidebarState };
 
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/components/index.ts"],"sourcesContent":["import { AlertProvider } from './alert-dialog/AlertDialog.context'\n\nexport type { ValidationOptions } from './form/validation'\n\nexport { Accordion } from './accordion/Accordion'\nexport { ActionIcon } from './action-icon/ActionIcon'\nexport { AlertDialog } from './alert-dialog/AlertDialog'\nexport { useAlert } from './alert-dialog/AlertDialog.context'\n\n// The alert system's provider lives under the `Alert` name; the alert UI\n// itself is imperative (`useAlert`), so there is no root component to render.\nexport const Alert = { Provider: AlertProvider }\nexport { Avatar } from './avatar/Avatar'\nexport { Badge, type BadgeProps } from './badge/Badge'\nexport { BannerRegular } from './banner/banner-regular/BannerRegular'\nexport { BannerSlim } from './banner/banner-slim/BannerSlim'\nexport { Box } from './box/Box'\nexport { Button, StyledButton } from './button/Button'\nexport { Carousel, useCarousel } from './carousel/Carousel'\nexport { Checkbox } from './checkbox/Checkbox'\nexport { CheckboxGroup } from './checkbox-group/CheckboxGroup'\nexport { CheckboxTree } from './checkbox-tree/CheckboxTree'\nexport { CheckboxField } from './checkbox-field/CheckboxField'\nexport { Chip } from './chip/Chip'\nexport { ChipGroup } from './chip/ChipGroup'\nexport { ChipDismissibleGroup } from './chip-dismissible-group'\nexport { ChipToggleGroup } from './chip-toggle-group'\nexport { Combobox } from './combobox/Combobox'\nexport { CreatePasswordField } from './create-password-field/CreatePasswordField'\nexport { DataTable } from './data-table/DataTable'\nexport { useDataTable } from './data-table/DataTable.context'\nexport { DateField } from './date-field/DateField'\nexport { DateInput } from './date-input/DateInput'\nexport { Dialog } from './dialog/Dialog'\nexport { Dismissible } from './dismissible'\nexport { DismissibleGroup } from './dismissible-group'\nexport { Divider } from './divider/Divider'\nexport { Drawer } from './drawer/Drawer'\nexport { DropdownMenu } from './dropdown-menu/DropdownMenu'\nexport { EmptyState } from './empty-state/EmptyState'\nexport { FieldWrapper } from './field-wrapper/FieldWrapper'\nexport { InlineFieldWrapper } from './field-wrapper/InlineFieldWrapper'\nexport { FileInput } from './file-input/FileInput'\nexport { Flex } from './flex/Flex'\nexport { Form } from './form/Form'\nexport { Grid } from './grid/Grid'\nexport { Heading, type HeadingProps } from './heading/Heading'\nexport { Icon } from './icon/Icon'\nexport { Image } from './image/Image'\n// Exported so consumers can name the type of `Image.Credit` — without it,\n// `styled(Image)` (and other inferences over `typeof Image`) can't be named\n// under `declaration: true` (TS2883).\nexport type { ImageCreditProps } from './image/ImageCredit'\nexport { InlineMessage } from './inline-message/InlineMessage'\nexport { Input, InputBackground, InputText } from './input/Input'\nexport { InputField } from './input-field/InputField'\nexport { Label } from './label/Label'\nexport { Link, StyledLink } from './link/Link'\nexport { List } from './list/List'\nexport { Loader } from './loader/Loader'\nexport { MarkdownContent } from './markdown-content/MarkdownContent'\nexport { NavigationMenu } from './navigation/NavigationMenu'\nexport { NavigationMenuVertical } from './navigation-menu-vertical/NavigationMenuVertical'\nexport { NotificationBadge } from './notification-badge/NotificationBadge'\nexport { NumberInput } from './number-input/NumberInput'\nexport { NumberInputField } from './number-input-field/NumberInputField'\nexport { Pagination } from './pagination/Pagination'\nexport { PasswordField } from './password-field/PasswordField'\nexport { PasswordInput } from './password-input/PasswordInput'\nexport { Popover } from './popover/Popover'\nexport { ProgressBar } from './progress-bar/ProgressBar'\nexport { RadioButton } from './radio-button/RadioButton'\nexport { RadioButtonGroup } from './radio-button/RadioButtonGroup'\nexport { RadioButtonField } from './radio-button-field/RadioButtonField'\nexport { RadioCard } from './radio-card/RadioCard'\nexport { RadioCardGroup } from './radio-card/RadioCardGroup'\nexport { SearchField } from './search-field/SearchField'\nexport { SearchInput } from './search-input/SearchInput'\nexport { SectionMessage } from './section-message/SectionMessage'\nexport { Select } from './select/Select'\nexport { SelectField } from './select-field/SelectField'\nexport { SelectMenu } from './select-menu/SelectMenu'\nexport { SelectMenuField } from './select-menu-field/SelectMenuField'\nexport { SideBar } from './side-bar/SideBar'\nexport { useSidebarState } from './side-bar/SideBar.context'\nexport { Slider } from './slider/Slider'\nexport { SliderField } from './slider-field/SliderField'\nexport * as Sortable from './sortable'\nexport * as Skeleton from './skeleton-loader'\nexport { Spacer } from './spacer/Spacer'\nexport { Stepper } from './stepper/Stepper'\n// Exported so consumers can name the compound's member types — without these,\n// inferences over `typeof Stepper` (e.g. `styled(Stepper)`) can't be named\n// under `declaration: true` (TS2883).\nexport type {\n  StepperProps,\n  StepperStepsProps,\n  StepperNavigateProps\n} from './stepper/types'\nexport { Switch } from './switch/Switch'\nexport { Table } from './table/Table'\nexport { Tabs } from './tabs/Tabs'\nexport { Text } from './text/Text'\nexport { Textarea } from './textarea/Textarea'\nexport { TextareaField } from './textarea-field/TextareaField'\nexport { Tile } from './tile/Tile'\nexport { TileInteractive } from './tile-interactive/TileInteractive'\nexport { TileToggleGroup } from './tile-toggle-group'\nexport { Toast, toast } from './toast'\n// Exported so consumers can name `Toast.Close`'s props — without it, inferences\n// over `typeof Toast` (e.g. `styled(Toast)`) can't be named under\n// `declaration: true` (TS2883).\nexport type { ToastCloseButtonProps } from './toast/ToastCloseButton'\nexport { ToggleGroup } from './toggle-group'\nexport { Tooltip } from './tooltip/Tooltip'\nexport { TopBar } from './top-bar/TopBar'\nexport { Tree } from './tree/Tree'\nexport { Video } from './video/Video'\nexport { KeyboardShortcut } from './keyboard-shortcut'\nexport { SegmentedControl } from './segmented-control/SegmentedControl'\nexport { FileDrop } from './file-drop/FileDrop'\nexport { useFileDrop } from './file-drop/useFileDrop'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,IAAa,QAAQ,EAAE,UAAU,cAAc"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/components/index.ts"],"sourcesContent":["import { AlertProvider } from './alert-dialog/AlertDialog.context'\n\nexport type { ValidationOptions } from './form/validation'\n\nexport { Accordion } from './accordion/Accordion'\nexport { ActionIcon } from './action-icon/ActionIcon'\nexport { AlertDialog } from './alert-dialog/AlertDialog'\nexport { useAlert } from './alert-dialog/AlertDialog.context'\n\n// The alert system's provider lives under the `Alert` name; the alert UI\n// itself is imperative (`useAlert`), so there is no root component to render.\nexport const Alert = { Provider: AlertProvider }\nexport { Avatar } from './avatar/Avatar'\nexport { Badge, type BadgeProps } from './badge/Badge'\nexport { BannerRegular } from './banner/banner-regular/BannerRegular'\nexport { BannerSlim } from './banner/banner-slim/BannerSlim'\nexport { Button, StyledButton } from './button/Button'\nexport { Carousel, useCarousel } from './carousel/Carousel'\nexport { Checkbox } from './checkbox/Checkbox'\nexport { CheckboxGroup } from './checkbox-group/CheckboxGroup'\nexport { CheckboxTree } from './checkbox-tree/CheckboxTree'\nexport { CheckboxField } from './checkbox-field/CheckboxField'\nexport { Chip } from './chip/Chip'\nexport { ChipGroup } from './chip/ChipGroup'\nexport { ChipDismissibleGroup } from './chip-dismissible-group'\nexport { ChipToggleGroup } from './chip-toggle-group'\nexport { Combobox } from './combobox/Combobox'\nexport { CreatePasswordField } from './create-password-field/CreatePasswordField'\nexport { DataTable } from './data-table/DataTable'\nexport { useDataTable } from './data-table/DataTable.context'\nexport { DateField } from './date-field/DateField'\nexport { DateInput } from './date-input/DateInput'\nexport { Dialog } from './dialog/Dialog'\nexport { Dismissible } from './dismissible'\nexport { DismissibleGroup } from './dismissible-group'\nexport { Divider } from './divider/Divider'\nexport { Drawer } from './drawer/Drawer'\nexport { DropdownMenu } from './dropdown-menu/DropdownMenu'\nexport { EmptyState } from './empty-state/EmptyState'\nexport { FieldWrapper } from './field-wrapper/FieldWrapper'\nexport { InlineFieldWrapper } from './field-wrapper/InlineFieldWrapper'\nexport { FileInput } from './file-input/FileInput'\nexport { Form } from './form/Form'\nexport { Heading, type HeadingProps } from './heading/Heading'\nexport { Icon } from './icon/Icon'\nexport { Image } from './image/Image'\n// Exported so consumers can name the type of `Image.Credit` — without it,\n// `styled(Image)` (and other inferences over `typeof Image`) can't be named\n// under `declaration: true` (TS2883).\nexport type { ImageCreditProps } from './image/ImageCredit'\nexport { InlineMessage } from './inline-message/InlineMessage'\nexport { Input, InputBackground, InputText } from './input/Input'\nexport { InputField } from './input-field/InputField'\nexport { Label } from './label/Label'\nexport { Link, StyledLink } from './link/Link'\nexport { List } from './list/List'\nexport { Loader } from './loader/Loader'\nexport { MarkdownContent } from './markdown-content/MarkdownContent'\nexport { NavigationMenu } from './navigation/NavigationMenu'\nexport { NavigationMenuVertical } from './navigation-menu-vertical/NavigationMenuVertical'\nexport { NotificationBadge } from './notification-badge/NotificationBadge'\nexport { NumberInput } from './number-input/NumberInput'\nexport { NumberInputField } from './number-input-field/NumberInputField'\nexport { Pagination } from './pagination/Pagination'\nexport { PasswordField } from './password-field/PasswordField'\nexport { PasswordInput } from './password-input/PasswordInput'\nexport { Popover } from './popover/Popover'\nexport { ProgressBar } from './progress-bar/ProgressBar'\nexport { RadioButton } from './radio-button/RadioButton'\nexport { RadioButtonGroup } from './radio-button/RadioButtonGroup'\nexport { RadioButtonField } from './radio-button-field/RadioButtonField'\nexport { RadioCard } from './radio-card/RadioCard'\nexport { RadioCardGroup } from './radio-card/RadioCardGroup'\nexport { SearchField } from './search-field/SearchField'\nexport { SearchInput } from './search-input/SearchInput'\nexport { SectionMessage } from './section-message/SectionMessage'\nexport { Select } from './select/Select'\nexport { SelectField } from './select-field/SelectField'\nexport { SelectMenu } from './select-menu/SelectMenu'\nexport { SelectMenuField } from './select-menu-field/SelectMenuField'\nexport { SideBar } from './side-bar/SideBar'\nexport { useSidebarState } from './side-bar/SideBar.context'\nexport { Slider } from './slider/Slider'\nexport { SliderField } from './slider-field/SliderField'\nexport * as Sortable from './sortable'\nexport * as Skeleton from './skeleton-loader'\nexport { Spacer } from './spacer/Spacer'\nexport { Stepper } from './stepper/Stepper'\n// Exported so consumers can name the compound's member types — without these,\n// inferences over `typeof Stepper` (e.g. `styled(Stepper)`) can't be named\n// under `declaration: true` (TS2883).\nexport type {\n  StepperProps,\n  StepperStepsProps,\n  StepperNavigateProps\n} from './stepper/types'\nexport { Switch } from './switch/Switch'\nexport { Table } from './table/Table'\nexport { Tabs } from './tabs/Tabs'\nexport { Text } from './text/Text'\nexport { Textarea } from './textarea/Textarea'\nexport { TextareaField } from './textarea-field/TextareaField'\nexport { Tile } from './tile/Tile'\nexport { TileInteractive } from './tile-interactive/TileInteractive'\nexport { TileToggleGroup } from './tile-toggle-group'\nexport { Toast, toast } from './toast'\n// Exported so consumers can name `Toast.Close`'s props — without it, inferences\n// over `typeof Toast` (e.g. `styled(Toast)`) can't be named under\n// `declaration: true` (TS2883).\nexport type { ToastCloseButtonProps } from './toast/ToastCloseButton'\nexport { ToggleGroup } from './toggle-group'\nexport { Tooltip } from './tooltip/Tooltip'\nexport { TopBar } from './top-bar/TopBar'\nexport { Tree } from './tree/Tree'\nexport { Video } from './video/Video'\nexport { KeyboardShortcut } from './keyboard-shortcut'\nexport { SegmentedControl } from './segmented-control/SegmentedControl'\nexport { FileDrop } from './file-drop/FileDrop'\nexport { useFileDrop } from './file-drop/useFileDrop'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,IAAa,QAAQ,EAAE,UAAU,cAAc"}

package/dist/components/input/Input.js

@@ -1,7 +1,7 @@
 import { styled } from "../../styled.js";
 import { Text } from "../text/Text.js";
 import { overrideStyledVariantValue } from "../../utilities/override-styled-variant-value/overrideStyledVariantValue.js";
-import * as React$1 from "react";
+import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/input/Input.tsx
 var InputBackground = styled("div", {
@@ -91,7 +91,7 @@ var toTextSize = {
 	xl: "lg"
 };
 var InputText = ({ ref, type = "text", size, ...rest }) => {
-	const textSize = React$1.useMemo(() => overrideStyledVariantValue(size, (s) => toTextSize[s]), [size]);
+	const textSize = overrideStyledVariantValue(size, (s) => toTextSize[s]);
 	return /* @__PURE__ */ jsx(StyledInputText, {
 		ref,
 		as: "input",

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

@@ -42,12 +42,12 @@ 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, {
@@ -58,12 +58,12 @@ var MarkdownContent = ({ content, customComponents = {}, className }) => {
 		...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 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, 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: [syntax()],\n    mdastExtensions: [directive.fromMarkdown]\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,OAAO,CAAC;EACrB,iBAAiB,CAAC,UAAU,YAAY;CAC1C,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/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);
+	const listWidthRef = React$1.useRef(0);
 	React$1.useLayoutEffect(() => {
-		if (listRef.current) setListWidth(listRef.current.offsetWidth);
+		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.useLayoutEffect(() => {\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,sBAAsB;EAC1B,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, {