@doist/reactist 21.1.1 → 22.0.0-beta

package/es/text-area/text-area.module.css.js

@@ -1,4 +1,4 @@
-var modules_2728c236 = {"textAreaContainer":"_21dbfa84","innerContainer":"_43588660","bordered":"f081b428","error":"a862f0e5","autoExpand":"_46360b15"};
+var modules_2728c236 = {"textAreaContainer":"fdc243b3","innerContainer":"_5c1dd8bc","bordered":"_269f9e63","error":"d1e4b585","autoExpand":"_10c6f2ef"};
 
 export default modules_2728c236;
 //# sourceMappingURL=text-area.module.css.js.map

package/es/text-field/text-field.module.css.js

@@ -1,4 +1,4 @@
-var modules_aaf25250 = {"inputWrapper":"_6c84b26d","bordered":"_8522aec5","error":"d4d62845","slot":"_9c20ca38"};
+var modules_aaf25250 = {"inputWrapper":"_483abe7b","bordered":"fce9399c","error":"_603b8c4b","slot":"_79ca0da5"};
 
 export default modules_aaf25250;
 //# sourceMappingURL=text-field.module.css.js.map

package/lib/base-field/base-field.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"_2e189908",auxiliaryLabel:"_83051e0a",bordered:"fd20ef50",error:"d1a17d92",primaryLabel:"_75e0afa0",secondaryLabel:"d04a867d",messageIcon:"_77b2107e"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={container:"_616a033e",auxiliaryLabel:"_0b88d85e",bordered:"c466cda3",error:"_4156d9cb",primaryLabel:"_274ef80a",secondaryLabel:"_2c4a8aed",messageIcon:"cd105f69"};
 //# sourceMappingURL=base-field.module.css.js.map

package/lib/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./box/box.js"),t=require("./columns/columns.js"),r=require("./divider/divider.js"),o=require("./inline/inline.js"),s=require("./stack/stack.js"),i=require("./hidden/hidden.js"),a=require("./hidden-visually/hidden-visually.js"),d=require("./tooltip/tooltip.js"),n=require("./button/button.js"),p=require("./alert/alert.js"),u=require("./banner/banner.js"),l=require("./loading/loading.js"),x=require("./notice/notice.js"),c=require("./text/text.js"),j=require("./toast/static-toast.js"),q=require("./toast/use-toasts.js"),M=require("./heading/heading.js"),b=require("./prose/prose.js"),T=require("./button-link/button-link.js"),m=require("./text-link/text-link.js"),k=require("./checkbox-field/checkbox-field.js"),B=require("./text-field/text-field.js"),D=require("./password-field/password-field.js"),f=require("./select-field/select-field.js"),S=require("./switch-field/switch-field.js"),g=require("./text-area/text-area.js"),h=require("./avatar/avatar.js"),C=require("./badge/badge.js"),y=require("./modal/modal.js"),P=require("./tabs/tabs.js"),v=require("./menu/menu.js"),F=require("./components/deprecated-button/index.js"),w=require("./components/deprecated-dropdown/index.js"),A=require("./components/color-picker/color-picker.js"),L=require("./components/color-picker/index.js"),H=require("./components/keyboard-shortcut/index.js"),O=require("./components/key-capturer/key-capturer.js"),I=require("./components/key-capturer/index.js"),E=require("./components/progress-bar/index.js"),K=require("./components/time/index.js"),R=require("./components/deprecated-input/index.js"),_=require("./components/deprecated-select/index.js"),G=require("./deprecated-modal/modal.js");exports.Box=e.Box,exports.Column=t.Column,exports.Columns=t.Columns,exports.Divider=r.Divider,exports.Inline=o.Inline,exports.Stack=s.Stack,exports.Hidden=i.Hidden,exports.HiddenVisually=a.HiddenVisually,exports.Tooltip=d.Tooltip,exports.Button=n.Button,exports.Alert=p.Alert,exports.Banner=u.Banner,exports.Loading=l.Loading,exports.Notice=x.Notice,exports.Text=c.Text,exports.StaticToast=j.StaticToast,exports.Toast=q.Toast,exports.ToastsProvider=q.ToastsProvider,exports.useToasts=q.useToasts,exports.Heading=M.Heading,exports.Prose=b.Prose,exports.ButtonLink=T.ButtonLink,exports.TextLink=m.TextLink,exports.CheckboxField=k.CheckboxField,exports.TextField=B.TextField,exports.PasswordField=D.PasswordField,exports.SelectField=f.SelectField,exports.SwitchField=S.SwitchField,exports.TextArea=g.TextArea,exports.Avatar=h.Avatar,exports.Badge=C.Badge,exports.Modal=y.Modal,exports.ModalActions=y.ModalActions,exports.ModalBody=y.ModalBody,exports.ModalCloseButton=y.ModalCloseButton,exports.ModalFooter=y.ModalFooter,exports.ModalHeader=y.ModalHeader,exports.Tab=P.Tab,exports.TabAwareSlot=P.TabAwareSlot,exports.TabList=P.TabList,exports.TabPanel=P.TabPanel,exports.Tabs=P.Tabs,exports.ContextMenuTrigger=v.ContextMenuTrigger,exports.Menu=v.Menu,exports.MenuButton=v.MenuButton,exports.MenuGroup=v.MenuGroup,exports.MenuItem=v.MenuItem,exports.MenuList=v.MenuList,exports.SubMenu=v.SubMenu,exports.DeprecatedButton=F.default,exports.DeprecatedDropdown=w.default,exports.COLORS=A.COLORS,exports.ColorPicker=L.default,exports.KeyboardShortcut=H.default,exports.SUPPORTED_KEYS=O.SUPPORTED_KEYS,exports.KeyCapturer=I.default,exports.ProgressBar=E.default,exports.Time=K.default,exports.DeprecatedInput=R.default,exports.DeprecatedSelect=_.default,exports.DeprecatedModal=G.DeprecatedModal,exports.DeprecatedModalActions=G.DeprecatedModalActions,exports.DeprecatedModalBody=G.DeprecatedModalBody,exports.DeprecatedModalCloseButton=G.DeprecatedModalCloseButton,exports.DeprecatedModalFooter=G.DeprecatedModalFooter,exports.DeprecatedModalHeader=G.DeprecatedModalHeader;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./box/box.js"),t=require("./columns/columns.js"),r=require("./divider/divider.js"),o=require("./inline/inline.js"),s=require("./stack/stack.js"),i=require("./hidden/hidden.js"),a=require("./hidden-visually/hidden-visually.js"),d=require("./tooltip/tooltip.js"),n=require("./button/button.js"),p=require("./alert/alert.js"),u=require("./banner/banner.js"),l=require("./loading/loading.js"),x=require("./notice/notice.js"),c=require("./text/text.js"),M=require("./toast/static-toast.js"),j=require("./toast/use-toasts.js"),q=require("./heading/heading.js"),b=require("./prose/prose.js"),T=require("./button-link/button-link.js"),m=require("./text-link/text-link.js"),k=require("./checkbox-field/checkbox-field.js"),S=require("./text-field/text-field.js"),B=require("./password-field/password-field.js"),D=require("./select-field/select-field.js"),f=require("./switch-field/switch-field.js"),g=require("./text-area/text-area.js"),h=require("./avatar/avatar.js"),C=require("./badge/badge.js"),y=require("./modal/modal.js"),P=require("./tabs/tabs.js"),v=require("./menu/menu.js"),F=require("./components/deprecated-button/index.js"),L=require("./components/deprecated-dropdown/index.js"),I=require("./components/color-picker/color-picker.js"),w=require("./components/color-picker/index.js"),A=require("./components/keyboard-shortcut/index.js"),H=require("./components/key-capturer/key-capturer.js"),O=require("./components/key-capturer/index.js"),E=require("./components/progress-bar/index.js"),G=require("./components/time/index.js"),K=require("./components/deprecated-input/index.js"),R=require("./components/deprecated-select/index.js"),_=require("./deprecated-modal/modal.js");exports.Box=e.Box,exports.Column=t.Column,exports.Columns=t.Columns,exports.Divider=r.Divider,exports.Inline=o.Inline,exports.Stack=s.Stack,exports.Hidden=i.Hidden,exports.HiddenVisually=a.HiddenVisually,exports.Tooltip=d.Tooltip,exports.Button=n.Button,exports.Alert=p.Alert,exports.Banner=u.Banner,exports.Loading=l.Loading,exports.Notice=x.Notice,exports.Text=c.Text,exports.StaticToast=M.StaticToast,exports.Toast=j.Toast,exports.ToastsProvider=j.ToastsProvider,exports.useToasts=j.useToasts,exports.Heading=q.Heading,exports.Prose=b.Prose,exports.ButtonLink=T.ButtonLink,exports.TextLink=m.TextLink,exports.CheckboxField=k.CheckboxField,exports.TextField=S.TextField,exports.PasswordField=B.PasswordField,exports.SelectField=D.SelectField,exports.SwitchField=f.SwitchField,exports.TextArea=g.TextArea,exports.Avatar=h.Avatar,exports.Badge=C.Badge,exports.Modal=y.Modal,exports.ModalActions=y.ModalActions,exports.ModalBody=y.ModalBody,exports.ModalCloseButton=y.ModalCloseButton,exports.ModalFooter=y.ModalFooter,exports.ModalHeader=y.ModalHeader,exports.Tab=P.Tab,exports.TabAwareSlot=P.TabAwareSlot,exports.TabList=P.TabList,exports.TabPanel=P.TabPanel,exports.Tabs=P.Tabs,exports.ContextMenuTrigger=v.ContextMenuTrigger,exports.IconMenuItem=v.IconMenuItem,exports.IconsMenuGroup=v.IconsMenuGroup,exports.Menu=v.Menu,exports.MenuButton=v.MenuButton,exports.MenuGroup=v.MenuGroup,exports.MenuItem=v.MenuItem,exports.MenuList=v.MenuList,exports.SubMenu=v.SubMenu,exports.SubMenuItem=v.SubMenuItem,exports.SubMenuList=v.SubMenuList,exports.DeprecatedButton=F.default,exports.DeprecatedDropdown=L.default,exports.COLORS=I.COLORS,exports.ColorPicker=w.default,exports.KeyboardShortcut=A.default,exports.SUPPORTED_KEYS=H.SUPPORTED_KEYS,exports.KeyCapturer=O.default,exports.ProgressBar=E.default,exports.Time=G.default,exports.DeprecatedInput=K.default,exports.DeprecatedSelect=R.default,exports.DeprecatedModal=_.DeprecatedModal,exports.DeprecatedModalActions=_.DeprecatedModalActions,exports.DeprecatedModalBody=_.DeprecatedModalBody,exports.DeprecatedModalCloseButton=_.DeprecatedModalCloseButton,exports.DeprecatedModalFooter=_.DeprecatedModalFooter,exports.DeprecatedModalHeader=_.DeprecatedModalHeader;
 //# sourceMappingURL=index.js.map

package/lib/menu/index.d.ts

@@ -1,2 +1 @@
-export { Menu, MenuButton, ContextMenuTrigger, MenuList, MenuItem, SubMenu, MenuGroup, } from './menu';
-export type { MenuItemProps, MenuGroupProps } from './menu';
+export * from './menu';

package/lib/menu/menu.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import * as Ariakit from 'ariakit/menu';
-import './menu.less';
 declare type NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>;
 declare type MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {
     /**
@@ -17,33 +16,102 @@ declare type MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {
      */
     onItemSelect?: (value: string | null | undefined) => void;
 };
+declare type MenuHandle = {
+    open: () => void;
+};
 /**
  * Wrapper component to control a menu. It does not render anything, only providing the state
  * management for the menu components inside it.
  */
-declare function Menu({ children, onItemSelect, ...props }: MenuProps): JSX.Element;
+declare const Menu: React.ForwardRefExoticComponent<Omit<Ariakit.MenuStateProps<{
+    [x: string]: string | number | boolean | (string | number)[];
+}>, "visible"> & {
+    /**
+     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a
+     * `MenuButton` that triggers the menu to be opened or closed.
+     */
+    children: React.ReactNode;
+    /**
+     * An optional callback that will be called back whenever a menu item is selected. It receives
+     * the `value` of the selected `MenuItem`.
+     *
+     * If you pass down this callback, it is recommended that you properly memoize it so it does not
+     * change on every render.
+     */
+    onItemSelect?: ((value: string | null | undefined) => void) | undefined;
+} & React.RefAttributes<MenuHandle>>;
 declare type MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>;
 /**
  * A button to toggle a dropdown menu open or closed.
  */
 declare const MenuButton: import("../utils/polymorphism").PolymorphicComponent<"button", MenuButtonProps, "obfuscateClassName">;
+declare type SubMenuItemProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as' | 'children'> & Pick<MenuItemProps, 'label' | 'icon'>;
+/**
+ * A menu item to toggle a sub-menu open or closed.
+ */
+declare const SubMenuItem: import("../utils/polymorphism").PolymorphicComponent<"button", SubMenuItemProps, "obfuscateClassName">;
 declare const ContextMenuTrigger: import("../utils/polymorphism").PolymorphicComponent<"div", unknown, "obfuscateClassName">;
 declare type MenuListProps = Omit<Ariakit.MenuProps, 'state' | 'className'>;
 /**
  * The dropdown menu itself, containing a list of menu items.
  */
 declare const MenuList: import("../utils/polymorphism").PolymorphicComponent<"div", MenuListProps, "obfuscateClassName">;
+/**
+ * Mostly equivalent to the `MenuList`, but to be used inside a `SubMenu`.
+ */
+declare const SubMenuList: import("../utils/polymorphism").PolymorphicComponent<"div", MenuListProps, "obfuscateClassName">;
 declare type MenuItemProps = {
     /**
-     * An optional value given to this menu item. It is passed on to the parent `Menu`'s
-     * `onItemSelect` when you provide that instead of (or alongside) providing individual
-     * `onSelect` callbacks to each menu item.
+     * An optional value given to this menu item.
+     *
+     * It is passed on to the parent `Menu`'s `onItemSelect` when you provide that instead of (or
+     * alongside) providing individual `onSelect` callbacks to each menu item.
      */
     value?: string;
     /**
-     * The content inside the menu item.
+     * The menu item's content.
+     *
+     * Prefer using `label` instead. In addition to `label`, you can also use `description`, `icon`
+     * and `shortcut`, to provide richer content inside the menu item.
+     *
+     * However, you can still use `children` to provide arbitrary content inside the menu item. You
+     * can even combine `children` with the other props to provide a richer menu item. The
+     * `children` content will be rendered first, followed by the regular menu item content
+     * generated using the `label`, `description`, `icon` and `shortcut` props (if the `label` is
+     * present).
+     */
+    children?: React.ReactNode;
+    /**
+     * The menu item's label.
      */
-    children: React.ReactNode;
+    label?: NonNullable<React.ReactNode>;
+    /**
+     * The menu item's description, typically used to provide additional information about what the
+     * menu item does.
+     *
+     * When used, it is rendered below the label. The label is also shown more prominently (e.g.
+     * using bold text), while the description is rendered using text in secondary tone.
+     *
+     * Therefore, for the description to be rendered, you must also provide a `label`.
+     */
+    description?: React.ReactNode;
+    /**
+     * An optional icon to render next to the menu item's label.
+     *
+     * For the icon to be rendered, you must also provide a `label`.
+     */
+    icon?: NonNullable<React.ReactNode>;
+    /**
+     * An optional element to render to the right of the menu item's label. It is often used to
+     * show a keyboard shortcut for the menu item.
+     *
+     * For the shortcut to be rendered, you must also provide a `label`.
+     */
+    shortcut?: React.ReactNode;
+    /**
+     * The tone to use for the menu item.
+     */
+    tone?: 'normal' | 'destructive';
     /**
      * When `true` the menu item is disabled and won't be selectable or be part of the keyboard
      * navigation across the menu options.
@@ -90,32 +158,71 @@ declare type MenuItemProps = {
 declare const MenuItem: import("../utils/polymorphism").PolymorphicComponent<"button", MenuItemProps, "obfuscateClassName">;
 declare type SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>;
 /**
- * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have
- * a sub-menu.
+ * This component can be rendered alongside other `MenuItem` elements inside a `MenuList` to show a
+ * sub-menu.
+ *
+ * Its children are expected to be exactly two elements, in the following order:
  *
- * Its children are expected to have the structure of a first level menu (a `MenuButton` and a
- * `MenuList`).
+ * 1. A `SubMenuItem` element: the menu item that triggers the sub-menu to open.
+ * 2. A `SubMenuList` element: the list of menu items that will be shown when the sub-menu is open.
+ *
+ * ## Usage
  *
  * ```jsx
- * <MenuItem label="Edit profile" />
- * <SubMenu>
- *   <MenuButton>More options</MenuButton>
+ * <Menu>
+ *   <MenuButton>Menu</MenuButton>
  *   <MenuList>
- *     <MenuItem label="Preferences" />
- *     <MenuItem label="Sign out" />
+ *     <MenuItem label="Item 1" />
+ *     <MenuItem label="Item 2" />
+ *     <SubMenu>
+ *       <SubMenuItem label="Submenu" />
+ *       <SubMenuList>
+ *         <MenuItem label="Submenu Item 1" />
+ *         <MenuItem label="Submenu Item 2" />
+ *       </SubMenuList>
+ *     </SubMenu>
  *   </MenuList>
- * </SubMenu>
+ * </Menu>
  * ```
- *
- * The `MenuButton` will become a menu item in the current menu items list, and it will lead to
- * opening a sub-menu with the menu items list below it.
  */
 declare const SubMenu: React.ForwardRefExoticComponent<SubMenuProps & React.RefAttributes<HTMLDivElement>>;
 declare type MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {
     /**
      * A label to be shown visually and also used to semantically label the group.
      */
-    label: string;
+    label: NonNullable<React.ReactNode>;
+    /**
+     * An optional info element to be shown to the right of the label.
+     *
+     * This is useful and often used to:
+     * - Provide a link to any documentation related to the menu items in the group
+     * - Show a keyboard shortcut that triggers the menu items in the group
+     *
+     * It is strongly recommended that this should be a icon-only element. It is also strongly
+     * recommended that, when using it to provide a link, you use the very `IconMenuItem` component
+     * to make the link be yet another menu item accessible in the menu via keyboard navigation.
+     * Here's an example of how to do that:
+     *
+     * ```jsx
+     * <MenuGroup
+     *   label="A group of related options"
+     *   info={
+     *     <IconMenuItem
+     *       label="Help about this group of options"
+     *       icon="ℹ️"
+     *       as="a"
+     *       href="http://help.example.com"
+     *       target="_blank"
+     *       rel="noreferrer noopener"
+     *     />
+     *   }
+     * >
+     *   <MenuItem label="First option" icon={<FirstIcon />} />
+     *   <MenuItem label="Second option" icon={<SecondIcon />} />
+     * </MenuGroup>
+     * ```
+     */
+    info?: React.ReactNode;
 };
 /**
  * A way to semantically group some menu items.
@@ -124,5 +231,38 @@ declare type MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {
  * before and/or after the group if you so wish.
  */
 declare const MenuGroup: import("../utils/polymorphism").PolymorphicComponent<"div", MenuGroupProps, "obfuscateClassName">;
-export { ContextMenuTrigger, Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup };
-export type { MenuButtonProps, MenuListProps, MenuItemProps, MenuGroupProps };
+declare type IconMenuItemProps = Pick<MenuItemProps, 'value' | 'hideOnSelect' | 'onSelect' | 'onClick'> & {
+    /**
+     * A label for assistive technologies to describe the menu item.
+     *
+     * When not provided, the `label` is used. But this is useful when you want the tooltip label
+     * to be different from the label for assistive technologies.
+     */
+    'aria-label'?: string;
+    /**
+     * The menu item's label, which is not shown visually on the menu item, but it is used to
+     * show a tooltip for the menu item when hovered or focused.
+     *
+     * It is also used as the semantic label for assistive technologies, unless you provide an
+     * `aria-label` as well.
+     */
+    label: string;
+    /**
+     * A description for assistive technologies to describe the menu item.
+     */
+    description?: React.ReactNode;
+    /**
+     * The icon to show on the menu item.
+     */
+    icon: NonNullable<React.ReactNode>;
+};
+/**
+ * A menu item that visually only shows as an icon. It must be used inside an `IconsMenuGroup`.
+ */
+declare const IconMenuItem: import("../utils/polymorphism").PolymorphicComponent<"button", IconMenuItemProps, "obfuscateClassName">;
+/**
+ * Semantically equivalent to `MenuGroup`, but meant to group `IconMenuItem`s only.
+ */
+declare const IconsMenuGroup: import("../utils/polymorphism").PolymorphicComponent<"div", MenuGroupProps, "obfuscateClassName">;
+export { ContextMenuTrigger, IconMenuItem, IconsMenuGroup, Menu, MenuButton, MenuGroup, MenuItem, MenuList, SubMenu, SubMenuItem, SubMenuList, };
+export type { IconMenuItemProps, MenuButtonProps, MenuGroupProps, MenuHandle, MenuItemProps, MenuListProps, MenuProps, SubMenuItemProps, SubMenuProps, };

package/lib/menu/menu.js

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../_virtual/_rollupPluginBabelHelpers.js"),n=require("react"),o=(e(n),e(require("classnames"))),l=require("../utils/polymorphism.js"),r=require("ariakit/portal"),a=require("ariakit/menu");const c=["children","onItemSelect"],s=["exceptionallySetClassName"],u=["as"],i=["exceptionallySetClassName","modal"],p=["value","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName","as"],m=["label","children","exceptionallySetClassName"],d=n.createContext({});function h(e){let{children:o,onItemSelect:l}=e,r=t.objectWithoutProperties(e,c);const[s,u]=n.useState(null),i=n.useMemo(()=>s?()=>s:void 0,[s]),p=a.useMenuState(t.objectSpread2({focusLoop:!0,gutter:8,shift:4,getAnchorRect:i},r));n.useEffect(()=>{p.open||u(null)},[p.open]);const m=n.useCallback((function(e){l&&l(e)}),[l]),h=n.useMemo(()=>({state:p,handleItemSelect:m,handleAnchorRectChange:u}),[p,m]);return n.createElement(d.Provider,{value:h},o)}const C=l.polymorphicComponent((function(e,l){let{exceptionallySetClassName:r}=e,c=t.objectWithoutProperties(e,s);const{state:u}=n.useContext(d);return n.createElement(a.MenuButton,t.objectSpread2(t.objectSpread2({},c),{},{state:u,ref:l,className:o("reactist_menubutton",r)}))})),S=l.polymorphicComponent((function(e,o){let{as:l="div"}=e,r=t.objectWithoutProperties(e,u);const{handleAnchorRectChange:a,state:c}=n.useContext(d),s=n.useCallback(e=>{e.preventDefault(),a({x:e.clientX,y:e.clientY}),c.show()},[a,c]);return n.createElement(l,t.objectSpread2(t.objectSpread2({},r),{},{onContextMenu:s,ref:o}))})),b=l.polymorphicComponent((function(e,l){let{exceptionallySetClassName:c,modal:s=!0}=e,u=t.objectWithoutProperties(e,i);const{state:p}=n.useContext(d);return p.open?n.createElement(r.Portal,{preserveTabOrder:!0},n.createElement(a.Menu,t.objectSpread2(t.objectSpread2({},u),{},{state:p,ref:l,className:o("reactist_menulist",c),modal:s}))):null})),f=l.polymorphicComponent((function(e,o){let{value:l,children:r,onSelect:c,hideOnSelect:s=!0,onClick:u,exceptionallySetClassName:i,as:m="button"}=e,h=t.objectWithoutProperties(e,p);const{handleItemSelect:C,state:S}=n.useContext(d),{hide:b}=S,f=n.useCallback((function(e){null==u||u(e);const t=!1!==(c&&!e.defaultPrevented?c():void 0)&&s;C(l),t&&b()}),[c,u,C,s,b,l]);return n.createElement(a.MenuItem,t.objectSpread2(t.objectSpread2({},h),{},{as:m,state:S,ref:o,onClick:f,className:i,hideOnClick:!1}),r)})),x=n.forwardRef((function({children:e,onItemSelect:t},o){const{handleItemSelect:l,state:r}=n.useContext(d),{hide:c}=r,s=n.useCallback((function(e){t&&t(e),l(e),c()}),[c,l,t]),[u,i]=n.Children.toArray(e),p=n.useCallback((function(e){return n.cloneElement(u,e)}),[u]);return n.createElement(h,{onItemSelect:s},n.createElement(a.MenuItem,{as:"div",state:r,ref:o,hideOnClick:!1},p),i)})),j=l.polymorphicComponent((function(e,o){let{label:l,children:r,exceptionallySetClassName:c}=e,s=t.objectWithoutProperties(e,m);const{state:u}=n.useContext(d);return n.createElement(a.MenuGroup,t.objectSpread2(t.objectSpread2({},s),{},{ref:o,state:u,className:c}),l?n.createElement("div",{role:"presentation",className:"reactist_menugroup__label"},l):null,r)}));exports.ContextMenuTrigger=S,exports.Menu=h,exports.MenuButton=C,exports.MenuGroup=j,exports.MenuItem=f,exports.MenuList=b,exports.SubMenu=x;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../_virtual/_rollupPluginBabelHelpers.js"),l=require("react"),n=(e(l),e(require("classnames"))),o=require("../utils/polymorphism.js"),a=require("../box/box.js"),r=require("../tooltip/tooltip.js"),c=require("../utils/common-helpers.js"),i=require("../text/text.js"),s=require("ariakit/portal"),u=require("ariakit/menu"),d=require("./menu.module.css.js");const m=["children","onItemSelect"],p=["exceptionallySetClassName"],b=["exceptionallySetClassName","label","icon"],f=["as"],h=["exceptionallySetClassName","modal"],x=["exceptionallySetClassName","modal"],S=["value","label","description","icon","shortcut","tone","children","onSelect","hideOnSelect","onClick","exceptionallySetClassName","as"],C=["label","info","children","exceptionallySetClassName"],y=["value","label","description","icon","onSelect","hideOnSelect","onClick","exceptionallySetClassName","as"],j=["children"],v=l.createContext({}),E=l.forwardRef((function(e,n){let{children:o,onItemSelect:a}=e,r=t.objectWithoutProperties(e,m);const[c,i]=l.useState(null),s=l.useMemo(()=>c?()=>c:void 0,[c]),d=u.useMenuState(t.objectSpread2({focusLoop:!0,gutter:8,shift:4,getAnchorRect:s},r));l.useEffect(()=>{d.open||i(null)},[d.open]),l.useImperativeHandle(n,()=>({open:d.show}));const p=l.useCallback((function(e){a&&a(e)}),[a]),b=l.useMemo(()=>({state:d,handleItemSelect:p,handleAnchorRectChange:i}),[d,p]);return l.createElement(v.Provider,{value:b},o)})),I=o.polymorphicComponent((function(e,n){let{exceptionallySetClassName:o}=e,a=t.objectWithoutProperties(e,p);const{state:r}=l.useContext(v);return l.createElement(u.MenuButton,t.objectSpread2(t.objectSpread2({},a),{},{state:r,ref:n,className:o}))}));function M({label:e,description:t,icon:n,shortcut:o,id:r}){return e?l.createElement(a.Box,{display:"flex",gap:"small",alignItems:"center",width:"full","aria-hidden":!0},n?l.createElement("div",{className:d.default.menuItemIcon},n):null,l.createElement(a.Box,{display:"inlineFlex",flexDirection:"column",gap:"xsmall",paddingY:"xsmall",alignItems:"flexStart",overflow:"hidden",flexGrow:1},l.createElement(i.Text,{id:r+"-label",weight:t?"semibold":"regular",size:"copy",lineClamp:1,exceptionallySetClassName:d.default.menuItemLabel},e),t?l.createElement(i.Text,{id:r+"-description",size:"copy",tone:"secondary",exceptionallySetClassName:d.default.menuItemDescription},t):null),o?l.createElement("div",null,o):null):null}function N(){return l.createElement("svg",{width:"24",height:"24"},l.createElement("path",{d:"M14.243 12L9.646 7.404a.5.5 0 1 1 .708-.707l4.95 4.95a.5.5 0 0 1 0 .707l-4.95 4.95a.5.5 0 0 1-.708-.708L14.243 12z",fill:"currentColor",fillRule:"evenodd"}))}const g=o.polymorphicComponent((function(e,o){let{exceptionallySetClassName:a,label:r,icon:i}=e,s=t.objectWithoutProperties(e,b);const m=c.useId(s.id),{state:p}=l.useContext(v);return l.createElement(u.MenuButton,t.objectSpread2(t.objectSpread2({"aria-labelledby":r&&!s["aria-label"]?m+"-label":void 0},s),{},{state:p,ref:o,className:n(d.default.menuItem,a)}),l.createElement(M,{id:m,icon:i,label:r,shortcut:l.createElement(N,null)}))})),k=o.polymorphicComponent((function(e,n){let{as:o="div"}=e,a=t.objectWithoutProperties(e,f);const{handleAnchorRectChange:r,state:c}=l.useContext(v),i=l.useCallback(e=>{e.preventDefault(),r({x:e.clientX,y:e.clientY}),c.show()},[r,c]);return l.createElement(o,t.objectSpread2(t.objectSpread2({},a),{},{onContextMenu:i,ref:n}))})),P=o.polymorphicComponent((function(e,o){let{exceptionallySetClassName:a,modal:r=!0}=e,c=t.objectWithoutProperties(e,h);const{state:i}=l.useContext(v);return i.open?l.createElement(s.Portal,{preserveTabOrder:!0},l.createElement(u.Menu,t.objectSpread2(t.objectSpread2({},c),{},{state:i,ref:o,className:n(d.default.menuList,a),modal:r}))):null})),O=o.polymorphicComponent((function(e,o){let{exceptionallySetClassName:a,modal:r=!0}=e,c=t.objectWithoutProperties(e,x);const{state:i}=l.useContext(v);return i.open?l.createElement(s.Portal,{preserveTabOrder:!0},l.createElement(u.Menu,t.objectSpread2(t.objectSpread2({},c),{},{state:i,ref:o,className:n(d.default.menuList,d.default.subMenuList,a),modal:r}))):null}));function q({value:e,hideOnSelect:t,onClick:n,onSelect:o}){const{handleItemSelect:a,state:r}=l.useContext(v),{hide:c}=r;return l.useCallback((function(l){null==n||n(l);const r=!1!==(o&&!l.defaultPrevented?o():void 0)&&t;a(e),r&&c()}),[o,n,a,t,c,e])}const w=o.polymorphicComponent((function(e,o){let{value:r,label:i,description:s,icon:m,shortcut:p,tone:b,children:f,onSelect:h,hideOnSelect:x=!0,onClick:C,exceptionallySetClassName:y,as:j="button"}=e,E=t.objectWithoutProperties(e,S);const I=c.useId(E.id),{state:N}=l.useContext(v),g=q({value:r,onSelect:h,onClick:C,hideOnSelect:x});return l.createElement(u.MenuItem,t.objectSpread2(t.objectSpread2({"aria-labelledby":i&&!E["aria-label"]?I+"-label":void 0,"aria-describedby":i&&s?I+"-description":void 0},E),{},{as:j,state:N,ref:o,onClick:g,className:n(d.default.menuItem,"destructive"===b?d.default.destructive:null,y),hideOnClick:!1}),f?l.createElement(a.Box,{width:"full",className:i?void 0:d.default.legacyLayout},f):null,l.createElement(M,{id:I,icon:m,label:i,description:s,shortcut:p}))})),L=l.forwardRef((function({children:e,onItemSelect:t},n){const{handleItemSelect:o,state:a}=l.useContext(v),{hide:r}=a,c=l.useCallback((function(e){t&&t(e),o(e),r()}),[r,o,t]),[i,s]=l.Children.toArray(e),m=l.useCallback((function(e){return l.cloneElement(i,e)}),[i]);return l.createElement(E,{onItemSelect:c},l.createElement(u.MenuItem,{as:"div",state:a,ref:n,hideOnClick:!1},m),l.createElement("div",{className:d.default.subMenuContainer},s))})),W=o.polymorphicComponent((function(e,n){let{label:o,info:r,children:s,exceptionallySetClassName:m}=e,p=t.objectWithoutProperties(e,C);const b=c.useId(p.id),{state:f}=l.useContext(v);return l.createElement(u.MenuGroup,t.objectSpread2(t.objectSpread2({"aria-labelledby":"menugroup-label-"+b},p),{},{id:b,ref:n,state:f,className:m}),l.createElement(a.Box,{display:"flex",alignItems:"center",gap:"small",className:d.default.menuGroupLabel},l.createElement(i.Text,{id:"menugroup-label-"+b,size:"copy",weight:"semibold"},o),r?l.createElement(a.Box,{flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",className:d.default.menuGroupInfo},r):null),s)})),B=o.polymorphicComponent((function(e,o){let{value:a,label:i,icon:s,onSelect:m,hideOnSelect:p=!0,onClick:b,exceptionallySetClassName:f,as:h="button"}=e,x=t.objectWithoutProperties(e,y);const S=c.useId(x.id),{state:C}=l.useContext(v),j=q({value:a,onSelect:m,onClick:b,hideOnSelect:p});return l.createElement(r.Tooltip,{content:i},l.createElement(u.MenuItem,t.objectSpread2(t.objectSpread2({"aria-label":i,"aria-describedby":S+"-description"},x),{},{as:h,state:C,ref:o,onClick:j,className:n(d.default.iconMenuItem,f),hideOnClick:!1}),s))})),G=o.polymorphicComponent((function(e,n){let{children:o}=e,a=t.objectWithoutProperties(e,j);return l.createElement(W,t.objectSpread2(t.objectSpread2({},a),{},{ref:n}),l.createElement("div",{className:d.default.iconsMenuGroup},o))}));exports.ContextMenuTrigger=k,exports.IconMenuItem=B,exports.IconsMenuGroup=G,exports.Menu=E,exports.MenuButton=I,exports.MenuGroup=W,exports.MenuItem=w,exports.MenuList=P,exports.SubMenu=L,exports.SubMenuItem=g,exports.SubMenuList=O;
 //# sourceMappingURL=menu.js.map

package/lib/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../src/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { polymorphicComponent } from '../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Ariakit from 'ariakit/menu'\nimport { Portal } from 'ariakit/portal'\n\nimport './menu.less'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n    state: Ariakit.MenuState\n    handleItemSelect: (value: string | null | undefined) => void\n    handleAnchorRectChange: (value: { x: number; y: number } | null) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nfunction Menu({ children, onItemSelect, ...props }: MenuProps) {\n    const [anchorRect, handleAnchorRectChange] = React.useState<{ x: number; y: number } | null>(\n        null,\n    )\n    const getAnchorRect = React.useMemo(() => {\n        return anchorRect ? () => anchorRect : undefined\n    }, [anchorRect])\n\n    const state = Ariakit.useMenuState({\n        focusLoop: true,\n        gutter: 8,\n        shift: 4,\n        getAnchorRect,\n        ...props,\n    })\n\n    React.useEffect(() => {\n        if (!state.open) handleAnchorRectChange(null)\n    }, [state.open])\n\n    const handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({\n            state,\n            handleItemSelect,\n            handleAnchorRectChange,\n        }),\n        [state, handleItemSelect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n}\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuButton\n            {...props}\n            state={state}\n            ref={ref}\n            className={classNames('reactist_menubutton', exceptionallySetClassName)}\n        />\n    )\n})\n\n//\n// ContextMenuTrigger\n//\nconst ContextMenuTrigger = polymorphicComponent<'div', unknown>(function ContextMenuTrigger(\n    { as: component = 'div', ...props },\n    ref,\n) {\n    const { handleAnchorRectChange, state } = React.useContext(MenuContext)\n    const handleContextMenu = React.useCallback(\n        (event: React.MouseEvent) => {\n            event.preventDefault()\n            handleAnchorRectChange({ x: event.clientX, y: event.clientY })\n            state.show()\n        },\n        [handleAnchorRectChange, state],\n    )\n\n    return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\n})\n\n//\n// MenuList\n//\n\ntype MenuListProps = Omit<Ariakit.MenuProps, 'state' | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n    { exceptionallySetClassName, modal = true, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n\n    return state.open ? (\n        <Portal preserveTabOrder>\n            <Ariakit.Menu\n                {...props}\n                state={state}\n                ref={ref}\n                className={classNames('reactist_menulist', exceptionallySetClassName)}\n                modal={modal}\n            />\n        </Portal>\n    ) : null\n})\n\n//\n// MenuItem\n//\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item. It is passed on to the parent `Menu`'s\n     * `onItemSelect` when you provide that instead of (or alongside) providing individual\n     * `onSelect` callbacks to each menu item.\n     */\n    value?: string\n    /**\n     * The content inside the menu item.\n     */\n    children: React.ReactNode\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n    {\n        value,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        as = 'button',\n        ...props\n    },\n    ref,\n) {\n    const { handleItemSelect, state } = React.useContext(MenuContext)\n    const { hide } = state\n\n    const handleClick = React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n\n    return (\n        <Ariakit.MenuItem\n            {...props}\n            as={as}\n            state={state}\n            ref={ref}\n            onClick={handleClick}\n            className={exceptionallySetClassName}\n            hideOnClick={false}\n        >\n            {children}\n        </Ariakit.MenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` inside a `MenuList` in order to have\n * a sub-menu.\n *\n * Its children are expected to have the structure of a first level menu (a `MenuButton` and a\n * `MenuList`).\n *\n * ```jsx\n * <MenuItem label=\"Edit profile\" />\n * <SubMenu>\n *   <MenuButton>More options</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Preferences\" />\n *     <MenuItem label=\"Sign out\" />\n *   </MenuList>\n * </SubMenu>\n * ```\n *\n * The `MenuButton` will become a menu item in the current menu items list, and it will lead to\n * opening a sub-menu with the menu items list below it.\n */\nconst SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, state } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = state\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n            parentMenuItemSelect(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    // Ariakit needs to be able to pass props to the MenuButton\n    // and combine it with the MenuItem component\n    const renderMenuButton = React.useCallback(\n        function renderMenuButton(props: MenuButtonProps) {\n            return React.cloneElement(button as React.ReactElement, props)\n        },\n        [button],\n    )\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            <Ariakit.MenuItem as=\"div\" state={state} ref={ref} hideOnClick={false}>\n                {renderMenuButton}\n            </Ariakit.MenuItem>\n            {list}\n        </Menu>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: string\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroup(\n    { label, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuGroup {...props} ref={ref} state={state} className={exceptionallySetClassName}>\n            {label ? (\n                <div role=\"presentation\" className=\"reactist_menugroup__label\">\n                    {label}\n                </div>\n            ) : null}\n            {children}\n        </Ariakit.MenuGroup>\n    )\n})\n\nexport { ContextMenuTrigger, Menu, MenuButton, MenuList, MenuItem, SubMenu, MenuGroup }\nexport type { MenuButtonProps, MenuListProps, MenuItemProps, MenuGroupProps }\n"],"names":["MenuContext","React","Menu","children","onItemSelect","props","anchorRect","handleAnchorRectChange","getAnchorRect","undefined","state","Ariakit","focusLoop","gutter","shift","open","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","ref","exceptionallySetClassName","className","classNames","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","show","onContextMenu","MenuList","modal","Portal","preserveTabOrder","MenuItem","onSelect","hideOnSelect","onClick","hide","handleClick","shouldClose","defaultPrevented","hideOnClick","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","MenuGroup","label","role"],"mappings":"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"}
+{"version":3,"file":"menu.js","sources":["../../src/menu/menu.tsx"],"sourcesContent":["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport { polymorphicComponent } from '../utils/polymorphism'\n\n//\n// Reactist menu is a thin wrapper around Ariakit's menu components. This may or may not be\n// temporary. Our goal is to make it transparent for the users of Reactist of this implementation\n// detail. We may change in the future the external lib we use, or even implement it all internally,\n// as long as we keep the same outer interface as intact as possible.\n//\n// Around the heavy lifting of the external lib we just add some features to better integrate the\n// menu to Reactist's more opinionated approach (e.g. using our button with its custom variants and\n// other features, easily show keyboard shortcuts in menu items, etc.)\n//\nimport * as Ariakit from 'ariakit/menu'\nimport { Portal } from 'ariakit/portal'\n\nimport { Box } from '../box'\nimport { Text } from '../text'\nimport { useId } from '../utils/common-helpers'\n\nimport styles from './menu.module.css'\nimport { Tooltip } from '../tooltip'\n\ntype NativeProps<E extends HTMLElement> = React.DetailedHTMLProps<React.HTMLAttributes<E>, E>\n\ntype MenuContextState = {\n    state: Ariakit.MenuState\n    handleItemSelect: (value: string | null | undefined) => void\n    handleAnchorRectChange: (value: { x: number; y: number } | null) => void\n}\n\nconst MenuContext = React.createContext<MenuContextState>(\n    // Ariakit gives us no means to obtain a valid initial/default value of type MenuStateReturn\n    // (it is normally obtained by calling useMenuState but we can't call hooks outside components).\n    // This is however of little consequence since this value is only used if some of the components\n    // are used outside Menu, something that should not happen and we do not support.\n    // @ts-expect-error\n    {},\n)\n\n//\n// Menu\n//\n\ntype MenuProps = Omit<Ariakit.MenuStateProps, 'visible'> & {\n    /**\n     * The `Menu` must contain a `MenuList` that defines the menu options. It must also contain a\n     * `MenuButton` that triggers the menu to be opened or closed.\n     */\n    children: React.ReactNode\n\n    /**\n     * An optional callback that will be called back whenever a menu item is selected. It receives\n     * the `value` of the selected `MenuItem`.\n     *\n     * If you pass down this callback, it is recommended that you properly memoize it so it does not\n     * change on every render.\n     */\n    onItemSelect?: (value: string | null | undefined) => void\n}\n\ntype MenuHandle = {\n    open: () => void\n}\n\n/**\n * Wrapper component to control a menu. It does not render anything, only providing the state\n * management for the menu components inside it.\n */\nconst Menu = React.forwardRef<MenuHandle, MenuProps>(function Menu(\n    { children, onItemSelect, ...props },\n    ref,\n) {\n    const [anchorRect, handleAnchorRectChange] = React.useState<{ x: number; y: number } | null>(\n        null,\n    )\n    const getAnchorRect = React.useMemo(() => {\n        return anchorRect ? () => anchorRect : undefined\n    }, [anchorRect])\n\n    const state = Ariakit.useMenuState({\n        focusLoop: true,\n        gutter: 8,\n        shift: 4,\n        getAnchorRect,\n        ...props,\n    })\n\n    React.useEffect(() => {\n        if (!state.open) handleAnchorRectChange(null)\n    }, [state.open])\n\n    React.useImperativeHandle(ref, () => ({ open: state.show }))\n\n    const handleItemSelect = React.useCallback(\n        function handleItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n        },\n        [onItemSelect],\n    )\n\n    const value: MenuContextState = React.useMemo(\n        () => ({\n            state,\n            handleItemSelect,\n            handleAnchorRectChange,\n        }),\n        [state, handleItemSelect],\n    )\n\n    return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>\n})\n\n//\n// MenuButton\n//\n\ntype MenuButtonProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as'>\n\n/**\n * A button to toggle a dropdown menu open or closed.\n */\nconst MenuButton = polymorphicComponent<'button', MenuButtonProps>(function MenuButton(\n    { exceptionallySetClassName, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuButton\n            {...props}\n            state={state}\n            ref={ref}\n            className={exceptionallySetClassName}\n        />\n    )\n})\n\n//\n// MenuItemContent\n//\n\ntype MenuItemContentProps = {\n    id: string\n\n    /**\n     * The menu item's label.\n     */\n    label?: NonNullable<React.ReactNode>\n\n    /**\n     * The menu item's description, typically used to provide additional information about what the\n     * menu item does.\n     *\n     * When used, it is rendered below the label. The label is also shown more prominently (e.g.\n     * using bold text), while the description is rendered using text in secondary tone.\n     *\n     * Therefore, for the description to be rendered, you must also provide a `label`.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An optional icon to render next to the menu item's label.\n     *\n     * For the icon to be rendered, you must also provide a `label`.\n     */\n    icon?: React.ReactNode\n\n    /**\n     * An optional element to render to the right of the menu item's label. It is often used to\n     * show a keyboard shortcut for the menu item.\n     *\n     * For the shortcut to be rendered, you must also provide a `label`.\n     */\n    shortcut?: React.ReactNode\n}\n\n/**\n * Renders the content inside a standard MenuItem. It is extracted into a component for reuse in\n * the SubMenuItem, which is a MenuItem visually, but semantically it's closer to be a MenuButton.\n * @private\n */\nfunction MenuItemContent({ label, description, icon, shortcut, id }: MenuItemContentProps) {\n    if (!label) return null\n    return (\n        <Box\n            display=\"flex\"\n            gap=\"small\"\n            alignItems=\"center\"\n            width=\"full\"\n            aria-hidden // the menu item is labelled via aria-labelledby and aria-describedby\n        >\n            {icon ? <div className={styles.menuItemIcon}>{icon}</div> : null}\n            <Box\n                display=\"inlineFlex\"\n                flexDirection=\"column\"\n                gap=\"xsmall\"\n                paddingY=\"xsmall\"\n                alignItems=\"flexStart\"\n                overflow=\"hidden\"\n                flexGrow={1}\n            >\n                <Text\n                    id={`${id}-label`}\n                    weight={description ? 'semibold' : 'regular'}\n                    size=\"copy\"\n                    lineClamp={1}\n                    exceptionallySetClassName={styles.menuItemLabel}\n                >\n                    {label}\n                </Text>\n                {description ? (\n                    <Text\n                        id={`${id}-description`}\n                        size=\"copy\"\n                        tone=\"secondary\"\n                        exceptionallySetClassName={styles.menuItemDescription}\n                    >\n                        {description}\n                    </Text>\n                ) : null}\n            </Box>\n            {shortcut ? <div>{shortcut}</div> : null}\n        </Box>\n    )\n}\n\n//\n// SubMenuItem\n//\n\nfunction ArrowRightIcon() {\n    return (\n        <svg width=\"24\" height=\"24\">\n            <path\n                d=\"M14.243 12L9.646 7.404a.5.5 0 1 1 .708-.707l4.95 4.95a.5.5 0 0 1 0 .707l-4.95 4.95a.5.5 0 0 1-.708-.708L14.243 12z\"\n                fill=\"currentColor\"\n                fillRule=\"evenodd\"\n            />\n        </svg>\n    )\n}\n\ntype SubMenuItemProps = Omit<Ariakit.MenuButtonProps, 'state' | 'className' | 'as' | 'children'> &\n    Pick<MenuItemProps, 'label' | 'icon'>\n\n/**\n * A menu item to toggle a sub-menu open or closed.\n */\nconst SubMenuItem = polymorphicComponent<'button', SubMenuItemProps>(function SubMenuItem(\n    { exceptionallySetClassName, label, icon, ...props },\n    ref,\n) {\n    const id = useId(props.id)\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuButton\n            aria-labelledby={label && !props['aria-label'] ? `${id}-label` : undefined}\n            {...props}\n            state={state}\n            ref={ref}\n            className={classNames(styles.menuItem, exceptionallySetClassName)}\n        >\n            <MenuItemContent id={id} icon={icon} label={label} shortcut={<ArrowRightIcon />} />\n        </Ariakit.MenuButton>\n    )\n})\n\n//\n// ContextMenuTrigger\n//\nconst ContextMenuTrigger = polymorphicComponent<'div', unknown>(function ContextMenuTrigger(\n    { as: component = 'div', ...props },\n    ref,\n) {\n    const { handleAnchorRectChange, state } = React.useContext(MenuContext)\n    const handleContextMenu = React.useCallback(\n        (event: React.MouseEvent) => {\n            event.preventDefault()\n            handleAnchorRectChange({ x: event.clientX, y: event.clientY })\n            state.show()\n        },\n        [handleAnchorRectChange, state],\n    )\n\n    return React.createElement(component, { ...props, onContextMenu: handleContextMenu, ref })\n})\n\n//\n// MenuList and SubMenuList\n//\n\ntype MenuListProps = Omit<Ariakit.MenuProps, 'state' | 'className'>\n\n/**\n * The dropdown menu itself, containing a list of menu items.\n */\nconst MenuList = polymorphicComponent<'div', MenuListProps>(function MenuList(\n    { exceptionallySetClassName, modal = true, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    if (!state.open) return null\n\n    return (\n        <Portal preserveTabOrder>\n            <Ariakit.Menu\n                {...props}\n                state={state}\n                ref={ref}\n                className={classNames(styles.menuList, exceptionallySetClassName)}\n                modal={modal}\n            />\n        </Portal>\n    )\n})\n\n/**\n * Mostly equivalent to the `MenuList`, but to be used inside a `SubMenu`.\n */\nconst SubMenuList = polymorphicComponent<'div', MenuListProps>(function SubMenuList(\n    { exceptionallySetClassName, modal = true, ...props },\n    ref,\n) {\n    const { state } = React.useContext(MenuContext)\n    if (!state.open) return null\n\n    return (\n        <Portal preserveTabOrder>\n            <Ariakit.Menu\n                {...props}\n                state={state}\n                ref={ref}\n                className={classNames(\n                    styles.menuList,\n                    styles.subMenuList,\n                    exceptionallySetClassName,\n                )}\n                modal={modal}\n            />\n        </Portal>\n    )\n})\n\n//\n// MenuItem\n//\n\nfunction useMenuItemClickHandler({\n    value,\n    hideOnSelect,\n    onClick,\n    onSelect,\n}: Pick<MenuItemProps, 'value' | 'hideOnSelect' | 'onClick' | 'onSelect'>) {\n    const { handleItemSelect, state } = React.useContext(MenuContext)\n    const { hide } = state\n\n    return React.useCallback(\n        function handleClick(event: React.MouseEvent<HTMLButtonElement>) {\n            onClick?.(event)\n            const onSelectResult: unknown =\n                onSelect && !event.defaultPrevented ? onSelect() : undefined\n            const shouldClose = onSelectResult !== false && hideOnSelect\n            handleItemSelect(value)\n            if (shouldClose) hide()\n        },\n        [onSelect, onClick, handleItemSelect, hideOnSelect, hide, value],\n    )\n}\n\ntype MenuItemProps = {\n    /**\n     * An optional value given to this menu item.\n     *\n     * It is passed on to the parent `Menu`'s `onItemSelect` when you provide that instead of (or\n     * alongside) providing individual `onSelect` callbacks to each menu item.\n     */\n    value?: string\n\n    /**\n     * The menu item's content.\n     *\n     * Prefer using `label` instead. In addition to `label`, you can also use `description`, `icon`\n     * and `shortcut`, to provide richer content inside the menu item.\n     *\n     * However, you can still use `children` to provide arbitrary content inside the menu item. You\n     * can even combine `children` with the other props to provide a richer menu item. The\n     * `children` content will be rendered first, followed by the regular menu item content\n     * generated using the `label`, `description`, `icon` and `shortcut` props (if the `label` is\n     * present).\n     */\n    children?: React.ReactNode\n\n    /**\n     * The menu item's label.\n     */\n    label?: NonNullable<React.ReactNode>\n\n    /**\n     * The menu item's description, typically used to provide additional information about what the\n     * menu item does.\n     *\n     * When used, it is rendered below the label. The label is also shown more prominently (e.g.\n     * using bold text), while the description is rendered using text in secondary tone.\n     *\n     * Therefore, for the description to be rendered, you must also provide a `label`.\n     */\n    description?: React.ReactNode\n\n    /**\n     * An optional icon to render next to the menu item's label.\n     *\n     * For the icon to be rendered, you must also provide a `label`.\n     */\n    icon?: NonNullable<React.ReactNode>\n\n    /**\n     * An optional element to render to the right of the menu item's label. It is often used to\n     * show a keyboard shortcut for the menu item.\n     *\n     * For the shortcut to be rendered, you must also provide a `label`.\n     */\n    shortcut?: React.ReactNode\n\n    /**\n     * The tone to use for the menu item.\n     */\n    tone?: 'normal' | 'destructive'\n\n    /**\n     * When `true` the menu item is disabled and won't be selectable or be part of the keyboard\n     * navigation across the menu options.\n     *\n     * @default true\n     */\n    disabled?: boolean\n\n    /**\n     * When `true` the menu will close when the menu item is selected, in addition to performing the\n     * action that the menu item is set out to do.\n     *\n     * Set this to `false` to make sure that a given menu item does not auto-closes the menu when\n     * selected. This should be the exception and not the norm, as the default is to auto-close.\n     *\n     * @default true\n     */\n    hideOnSelect?: boolean\n\n    /**\n     * The action to perform when the menu item is selected.\n     *\n     * If you return `false` from this function, the menu will not auto-close when this menu item\n     * is selected. Though you should use `hideOnSelect` for this purpose, this allows you to\n     * achieve the same effect conditionally and dynamically deciding at run time.\n     */\n    onSelect?: () => unknown\n\n    /**\n     * The event handler called when the menu item is clicked.\n     *\n     * This is similar to `onSelect`, but a bit different. You can certainly use it to trigger the\n     * action that the menu item represents. But in general you should prefer `onSelect` for that.\n     *\n     * The main use for this handler is to get access to the click event. This can be used, for\n     * example, to call `event.preventDefault()`, which will effectively prevent the rest of the\n     * consequences of the click, including preventing `onSelect` from being called. In particular,\n     * this is useful in menu items that are links, and you want the click to not trigger navigation\n     * under some circumstances.\n     */\n    onClick?: (event: React.MouseEvent) => void\n}\n\n/**\n * A menu item inside a menu list. It can be selected by the user, triggering the `onSelect`\n * callback.\n */\nconst MenuItem = polymorphicComponent<'button', MenuItemProps>(function MenuItem(\n    {\n        value,\n        label,\n        description,\n        icon,\n        shortcut,\n        tone,\n        children,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        as = 'button',\n        ...props\n    },\n    ref,\n) {\n    const id = useId(props.id)\n    const { state } = React.useContext(MenuContext)\n    const handleClick = useMenuItemClickHandler({ value, onSelect, onClick, hideOnSelect })\n\n    return (\n        <Ariakit.MenuItem\n            aria-labelledby={label && !props['aria-label'] ? `${id}-label` : undefined}\n            aria-describedby={label && description ? `${id}-description` : undefined}\n            {...props}\n            as={as}\n            state={state}\n            ref={ref}\n            onClick={handleClick}\n            className={classNames(\n                styles.menuItem,\n                tone === 'destructive' ? styles.destructive : null,\n                exceptionallySetClassName,\n            )}\n            hideOnClick={false}\n        >\n            {children ? (\n                <Box width=\"full\" className={label ? undefined : styles.legacyLayout}>\n                    {children}\n                </Box>\n            ) : null}\n\n            <MenuItemContent\n                id={id}\n                icon={icon}\n                label={label}\n                description={description}\n                shortcut={shortcut}\n            />\n        </Ariakit.MenuItem>\n    )\n})\n\n//\n// SubMenu\n//\n\ntype SubMenuProps = Pick<MenuProps, 'children' | 'onItemSelect'>\n\n/**\n * This component can be rendered alongside other `MenuItem` elements inside a `MenuList` to show a\n * sub-menu.\n *\n * Its children are expected to be exactly two elements, in the following order:\n *\n * 1. A `SubMenuItem` element: the menu item that triggers the sub-menu to open.\n * 2. A `SubMenuList` element: the list of menu items that will be shown when the sub-menu is open.\n *\n * ## Usage\n *\n * ```jsx\n * <Menu>\n *   <MenuButton>Menu</MenuButton>\n *   <MenuList>\n *     <MenuItem label=\"Item 1\" />\n *     <MenuItem label=\"Item 2\" />\n *     <SubMenu>\n *       <SubMenuItem label=\"Submenu\" />\n *       <SubMenuList>\n *         <MenuItem label=\"Submenu Item 1\" />\n *         <MenuItem label=\"Submenu Item 2\" />\n *       </SubMenuList>\n *     </SubMenu>\n *   </MenuList>\n * </Menu>\n * ```\n */\nconst SubMenu = React.forwardRef<HTMLDivElement, SubMenuProps>(function SubMenu(\n    { children, onItemSelect },\n    ref,\n) {\n    const { handleItemSelect: parentMenuItemSelect, state } = React.useContext(MenuContext)\n    const { hide: parentMenuHide } = state\n\n    const handleSubItemSelect = React.useCallback(\n        function handleSubItemSelect(value: string | null | undefined) {\n            if (onItemSelect) onItemSelect(value)\n            parentMenuItemSelect(value)\n            parentMenuHide()\n        },\n        [parentMenuHide, parentMenuItemSelect, onItemSelect],\n    )\n\n    const [button, list] = React.Children.toArray(children)\n\n    // Ariakit needs to be able to pass props to the MenuButton\n    // and combine it with the MenuItem component\n    const renderMenuButton = React.useCallback(\n        function renderMenuButton(props: MenuButtonProps) {\n            return React.cloneElement(button as React.ReactElement, props)\n        },\n        [button],\n    )\n\n    return (\n        <Menu onItemSelect={handleSubItemSelect}>\n            <Ariakit.MenuItem as=\"div\" state={state} ref={ref} hideOnClick={false}>\n                {renderMenuButton}\n            </Ariakit.MenuItem>\n            <div className={styles.subMenuContainer}>{list}</div>\n        </Menu>\n    )\n})\n\n//\n// MenuGroup\n//\n\ntype MenuGroupProps = Omit<NativeProps<HTMLDivElement>, 'className'> & {\n    /**\n     * A label to be shown visually and also used to semantically label the group.\n     */\n    label: NonNullable<React.ReactNode>\n\n    /**\n     * An optional info element to be shown to the right of the label.\n     *\n     * This is useful and often used to:\n     * - Provide a link to any documentation related to the menu items in the group\n     * - Show a keyboard shortcut that triggers the menu items in the group\n     *\n     * It is strongly recommended that this should be a icon-only element. It is also strongly\n     * recommended that, when using it to provide a link, you use the very `IconMenuItem` component\n     * to make the link be yet another menu item accessible in the menu via keyboard navigation.\n     * Here's an example of how to do that:\n     *\n     * ```jsx\n     * <MenuGroup\n     *   label=\"A group of related options\"\n     *   info={\n     *     <IconMenuItem\n     *       label=\"Help about this group of options\"\n     *       icon=\"ℹ️\"\n     *       as=\"a\"\n     *       href=\"http://help.example.com\"\n     *       target=\"_blank\"\n     *       rel=\"noreferrer noopener\"\n     *     />\n     *   }\n     * >\n     *   <MenuItem label=\"First option\" icon={<FirstIcon />} />\n     *   <MenuItem label=\"Second option\" icon={<SecondIcon />} />\n     * </MenuGroup>\n     * ```\n     */\n    info?: React.ReactNode\n}\n\n/**\n * A way to semantically group some menu items.\n *\n * This group does not add any visual separator. You can do that yourself adding `<hr />` elements\n * before and/or after the group if you so wish.\n */\nconst MenuGroup = polymorphicComponent<'div', MenuGroupProps>(function MenuGroup(\n    { label, info, children, exceptionallySetClassName, ...props },\n    ref,\n) {\n    const id = useId(props.id)\n    const { state } = React.useContext(MenuContext)\n    return (\n        <Ariakit.MenuGroup\n            aria-labelledby={`menugroup-label-${id}`}\n            {...props}\n            id={id}\n            ref={ref}\n            state={state}\n            className={exceptionallySetClassName}\n        >\n            <Box display=\"flex\" alignItems=\"center\" gap=\"small\" className={styles.menuGroupLabel}>\n                <Text id={`menugroup-label-${id}`} size=\"copy\" weight=\"semibold\">\n                    {label}\n                </Text>\n                {info ? (\n                    <Box\n                        flexShrink={0}\n                        display=\"flex\"\n                        alignItems=\"center\"\n                        justifyContent=\"center\"\n                        className={styles.menuGroupInfo}\n                    >\n                        {info}\n                    </Box>\n                ) : null}\n            </Box>\n            {children}\n        </Ariakit.MenuGroup>\n    )\n})\n\n//\n// IconMenuItem & IconsMenuGroup\n//\n\ntype IconMenuItemProps = Pick<MenuItemProps, 'value' | 'hideOnSelect' | 'onSelect' | 'onClick'> & {\n    /**\n     * A label for assistive technologies to describe the menu item.\n     *\n     * When not provided, the `label` is used. But this is useful when you want the tooltip label\n     * to be different from the label for assistive technologies.\n     */\n    'aria-label'?: string\n\n    /**\n     * The menu item's label, which is not shown visually on the menu item, but it is used to\n     * show a tooltip for the menu item when hovered or focused.\n     *\n     * It is also used as the semantic label for assistive technologies, unless you provide an\n     * `aria-label` as well.\n     */\n    label: string\n\n    /**\n     * A description for assistive technologies to describe the menu item.\n     */\n    description?: React.ReactNode\n\n    /**\n     * The icon to show on the menu item.\n     */\n    icon: NonNullable<React.ReactNode>\n}\n\n/**\n * A menu item that visually only shows as an icon. It must be used inside an `IconsMenuGroup`.\n */\nconst IconMenuItem = polymorphicComponent<'button', IconMenuItemProps>(function IconMenuItem(\n    {\n        value,\n        label,\n        description,\n        icon,\n        onSelect,\n        hideOnSelect = true,\n        onClick,\n        exceptionallySetClassName,\n        as = 'button',\n        ...props\n    },\n    ref,\n) {\n    const id = useId(props.id)\n    const { state } = React.useContext(MenuContext)\n    const handleClick = useMenuItemClickHandler({ value, onSelect, onClick, hideOnSelect })\n\n    return (\n        <Tooltip content={label}>\n            <Ariakit.MenuItem\n                aria-label={label}\n                aria-describedby={`${id}-description`}\n                {...props}\n                as={as}\n                state={state}\n                ref={ref}\n                onClick={handleClick}\n                className={classNames(styles.iconMenuItem, exceptionallySetClassName)}\n                hideOnClick={false}\n            >\n                {icon}\n            </Ariakit.MenuItem>\n        </Tooltip>\n    )\n})\n\n/**\n * Semantically equivalent to `MenuGroup`, but meant to group `IconMenuItem`s only.\n */\nconst IconsMenuGroup = polymorphicComponent<'div', MenuGroupProps>(function IconsMenuGroup(\n    { children, ...props },\n    ref,\n) {\n    return (\n        <MenuGroup {...props} ref={ref}>\n            <div className={styles.iconsMenuGroup}>{children}</div>\n        </MenuGroup>\n    )\n})\n\nexport {\n    ContextMenuTrigger,\n    IconMenuItem,\n    IconsMenuGroup,\n    Menu,\n    MenuButton,\n    MenuGroup,\n    MenuItem,\n    MenuList,\n    SubMenu,\n    SubMenuItem,\n    SubMenuList,\n}\n\nexport type {\n    IconMenuItemProps,\n    MenuButtonProps,\n    MenuGroupProps,\n    MenuHandle,\n    MenuItemProps,\n    MenuListProps,\n    MenuProps,\n    SubMenuItemProps,\n    SubMenuProps,\n}\n"],"names":["MenuContext","React","Menu","ref","children","onItemSelect","props","anchorRect","handleAnchorRectChange","getAnchorRect","undefined","state","Ariakit","focusLoop","gutter","shift","open","show","handleItemSelect","value","Provider","MenuButton","polymorphicComponent","exceptionallySetClassName","className","MenuItemContent","label","description","icon","shortcut","id","Box","display","gap","alignItems","width","styles","menuItemIcon","flexDirection","paddingY","overflow","flexGrow","Text","weight","size","lineClamp","menuItemLabel","tone","menuItemDescription","ArrowRightIcon","height","d","fill","fillRule","SubMenuItem","useId","classNames","menuItem","ContextMenuTrigger","as","component","handleContextMenu","event","preventDefault","x","clientX","y","clientY","onContextMenu","MenuList","modal","Portal","preserveTabOrder","menuList","SubMenuList","subMenuList","useMenuItemClickHandler","hideOnSelect","onClick","onSelect","hide","shouldClose","defaultPrevented","MenuItem","handleClick","destructive","hideOnClick","legacyLayout","SubMenu","parentMenuItemSelect","parentMenuHide","handleSubItemSelect","button","list","toArray","renderMenuButton","subMenuContainer","MenuGroup","info","menuGroupLabel","flexShrink","justifyContent","menuGroupInfo","IconMenuItem","Tooltip","content","iconMenuItem","IconsMenuGroup","iconsMenuGroup"],"mappings":"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"}

package/lib/menu/menu.module.css.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={menuList:"c63e79f3",subMenuList:"_1e89cfc6",iconMenuItem:"_1b808bea",menuItem:"_8607099d",legacyLayout:"_609759d5",menuGroupLabel:"f1730843",menuItemIcon:"_7cec7dce",menuItemLabel:"_91c012d8",menuItemDescription:"bb494fd4",destructive:"_503b074a",menuGroupInfo:"ad6d2e4a",iconsMenuGroup:"_410b11f2"};
+//# sourceMappingURL=menu.module.css.js.map

package/lib/menu/menu.module.css.js.map

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

package/lib/select-field/select-field.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={selectWrapper:"a804edbf",bordered:"_50a3655f",error:"a6d38abf"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={selectWrapper:"a9cbb3a6",bordered:"f3869290",error:"aefdbdaa"};
 //# sourceMappingURL=select-field.module.css.js.map

package/lib/text-area/text-area.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={textAreaContainer:"_21dbfa84",innerContainer:"_43588660",bordered:"f081b428",error:"a862f0e5",autoExpand:"_46360b15"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={textAreaContainer:"fdc243b3",innerContainer:"_5c1dd8bc",bordered:"_269f9e63",error:"d1e4b585",autoExpand:"_10c6f2ef"};
 //# sourceMappingURL=text-area.module.css.js.map

package/lib/text-field/text-field.module.css.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={inputWrapper:"_6c84b26d",bordered:"_8522aec5",error:"d4d62845",slot:"_9c20ca38"};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default={inputWrapper:"_483abe7b",bordered:"fce9399c",error:"_603b8c4b",slot:"_79ca0da5"};
 //# sourceMappingURL=text-field.module.css.js.map

package/package.json

@@ -6,7 +6,7 @@
         "email": "henning@doist.com",
         "url": "http://doist.com"
     },
-    "version": "21.1.1",
+    "version": "22.0.0-beta",
     "license": "MIT",
     "homepage": "https://github.com/Doist/reactist#readme",
     "repository": {

package/styles/base-field.css

@@ -4,6 +4,6 @@
 ._68ab48ca{min-width:0}._6fa2b565{min-width:var(--reactist-width-xsmall)}.dd50fabd{min-width:var(--reactist-width-small)}.e7e2c808{min-width:var(--reactist-width-medium)}._6abbe25e{min-width:var(--reactist-width-large)}._54f479ac{min-width:var(--reactist-width-xlarge)}._148492bc{max-width:var(--reactist-width-xsmall)}.bd023b96{max-width:var(--reactist-width-small)}.e102903f{max-width:var(--reactist-width-medium)}._0e8d76d7{max-width:var(--reactist-width-large)}._47a031d0{max-width:var(--reactist-width-xlarge)}.cd4c8183{max-width:100%}._5f5959e8{width:0}._8c75067a{width:100%}._56a651f6{width:auto}._26f87bb8{width:-moz-max-content;width:-webkit-max-content;width:max-content}._07a6ab44{width:-moz-min-content;width:-webkit-min-content;width:min-content}.a87016fa{width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}._1a972e50{width:var(--reactist-width-xsmall)}.c96d8261{width:var(--reactist-width-small)}.f3829d42{width:var(--reactist-width-medium)}._2caef228{width:var(--reactist-width-large)}._069e1491{width:var(--reactist-width-xlarge)}
 ._64ed24f4{gap:0}._2580a74b{gap:var(--reactist-spacing-xsmall)}.c68f8bf6{gap:var(--reactist-spacing-small)}._43e5f8e9{gap:var(--reactist-spacing-medium)}._966b120f{gap:var(--reactist-spacing-large)}.f957894c{gap:var(--reactist-spacing-xlarge)}._8cca104b{gap:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5797cee2{gap:0}._9015672f{gap:var(--reactist-spacing-xsmall)}._7ec86eec{gap:var(--reactist-spacing-small)}._714d7179{gap:var(--reactist-spacing-medium)}.ae1deb59{gap:var(--reactist-spacing-large)}.e1cfce55{gap:var(--reactist-spacing-xlarge)}._168a8ff8{gap:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._43e2b619{gap:0}._0ea9bf88{gap:var(--reactist-spacing-xsmall)}.d451307a{gap:var(--reactist-spacing-small)}.bf93cf66{gap:var(--reactist-spacing-medium)}._1430cddf{gap:var(--reactist-spacing-large)}.fa00c93e{gap:var(--reactist-spacing-xlarge)}._6f3aee54{gap:var(--reactist-spacing-xxlarge)}}
 .a83bd4e0{font-family:var(--reactist-font-family);font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-regular);color:var(--reactist-content-primary)}._266d6623{font-size:var(--reactist-font-size-caption)}.a8d37c6e{font-size:var(--reactist-font-size-copy)}._39f4eb1f{font-size:var(--reactist-font-size-subtitle)}._7be5c531{font-weight:var(--reactist-font-weight-medium)}.e214ff2e{font-weight:var(--reactist-font-weight-strong)}._6a3e5ade{color:var(--reactist-content-secondary)}._8f5b5f2b{color:var(--reactist-content-danger)}._9ae47ae4{color:var(--reactist-content-positive)}._969f18f7{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}._2f303ac3{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.d3e04245{-webkit-line-clamp:2}._33411704{-webkit-line-clamp:3}.bfc32640{-webkit-line-clamp:4}.f813c82f{-webkit-line-clamp:5}
-._2e189908{font-family:var(--reactist-font-family)}._2e189908 ._83051e0a,._2e189908 label{padding-bottom:var(--reactist-spacing-small)}._2e189908.fd20ef50{border-radius:var(--reactist-border-radius-large);border:1px solid var(--reactist-divider-secondary);padding:var(--reactist-spacing-small);padding-bottom:var(--reactist-spacing-xsmall);overflow:clip}._2e189908.fd20ef50 label{flex-grow:1;cursor:text}._2e189908.fd20ef50 label span{cursor:default}._2e189908.fd20ef50:focus-within{border-color:var(--reactist-divider-primary)!important}._2e189908.fd20ef50.d1a17d92{border-color:var(--reactist-alert-tone-critical-border)!important}._2e189908.fd20ef50 ._75e0afa0{font-weight:500}._2e189908.fd20ef50 ._83051e0a{font-size:var(--reactist-font-size-caption)}._2e189908:not(.fd20ef50) ._75e0afa0{font-weight:var(--reactist-font-weight-strong)}._2e189908:not(.fd20ef50) ._83051e0a{font-size:var(--reactist-font-size-body)}.d04a867d{color:var(--reactist-content-secondary)}._83051e0a{text-align:right}._77b2107e{vertical-align:bottom}
+._616a033e{font-family:var(--reactist-font-family)}._616a033e ._0b88d85e,._616a033e label{padding-bottom:var(--reactist-spacing-small)}._616a033e.c466cda3{border-radius:var(--reactist-border-radius-large);border:1px solid var(--reactist-inputs-idle);padding:var(--reactist-spacing-small);padding-bottom:var(--reactist-spacing-xsmall);overflow:clip}._616a033e.c466cda3 label{flex-grow:1;cursor:text}._616a033e.c466cda3 label span{cursor:default}._616a033e.c466cda3:focus-within{border-color:var(--reactist-inputs-focus)!important}._616a033e.c466cda3._4156d9cb{border-color:var(--reactist-alert-tone-critical-border)!important}._616a033e.c466cda3 ._274ef80a{font-weight:500}._616a033e.c466cda3 ._0b88d85e{font-size:var(--reactist-font-size-caption)}._616a033e:not(.c466cda3) ._274ef80a{font-weight:var(--reactist-font-weight-strong)}._616a033e:not(.c466cda3) ._0b88d85e{font-size:var(--reactist-font-size-body)}._2c4a8aed{color:var(--reactist-content-secondary)}._0b88d85e{text-align:right}.cd105f69{vertical-align:bottom}
 ._3f3a401c{border-bottom:1px solid var(--reactist-divider-primary)}._03b05b70{border-bottom:1px solid var(--reactist-divider-secondary)}.b6f67ff8{border-bottom:1px solid var(--reactist-divider-tertiary)}
 :root{--reactist-spinner-tint:var(--reactist-bg-brand);--reactist-spinner-fill:var(--reactist-framework-fill-crest)}@-webkit-keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes _54fbe2b3{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}._51539197{-webkit-animation-name:_54fbe2b3;animation-name:_54fbe2b3;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.a0c466ed{fill:var(--reactist-spinner-tint)}._745b73d3{fill:var(--reactist-spinner-fill)}

package/styles/base-field.module.css.css

@@ -1 +1 @@
-._2e189908{font-family:var(--reactist-font-family)}._2e189908 ._83051e0a,._2e189908 label{padding-bottom:var(--reactist-spacing-small)}._2e189908.fd20ef50{border-radius:var(--reactist-border-radius-large);border:1px solid var(--reactist-divider-secondary);padding:var(--reactist-spacing-small);padding-bottom:var(--reactist-spacing-xsmall);overflow:clip}._2e189908.fd20ef50 label{flex-grow:1;cursor:text}._2e189908.fd20ef50 label span{cursor:default}._2e189908.fd20ef50:focus-within{border-color:var(--reactist-divider-primary)!important}._2e189908.fd20ef50.d1a17d92{border-color:var(--reactist-alert-tone-critical-border)!important}._2e189908.fd20ef50 ._75e0afa0{font-weight:500}._2e189908.fd20ef50 ._83051e0a{font-size:var(--reactist-font-size-caption)}._2e189908:not(.fd20ef50) ._75e0afa0{font-weight:var(--reactist-font-weight-strong)}._2e189908:not(.fd20ef50) ._83051e0a{font-size:var(--reactist-font-size-body)}.d04a867d{color:var(--reactist-content-secondary)}._83051e0a{text-align:right}._77b2107e{vertical-align:bottom}
+._616a033e{font-family:var(--reactist-font-family)}._616a033e ._0b88d85e,._616a033e label{padding-bottom:var(--reactist-spacing-small)}._616a033e.c466cda3{border-radius:var(--reactist-border-radius-large);border:1px solid var(--reactist-inputs-idle);padding:var(--reactist-spacing-small);padding-bottom:var(--reactist-spacing-xsmall);overflow:clip}._616a033e.c466cda3 label{flex-grow:1;cursor:text}._616a033e.c466cda3 label span{cursor:default}._616a033e.c466cda3:focus-within{border-color:var(--reactist-inputs-focus)!important}._616a033e.c466cda3._4156d9cb{border-color:var(--reactist-alert-tone-critical-border)!important}._616a033e.c466cda3 ._274ef80a{font-weight:500}._616a033e.c466cda3 ._0b88d85e{font-size:var(--reactist-font-size-caption)}._616a033e:not(.c466cda3) ._274ef80a{font-weight:var(--reactist-font-weight-strong)}._616a033e:not(.c466cda3) ._0b88d85e{font-size:var(--reactist-font-size-body)}._2c4a8aed{color:var(--reactist-content-secondary)}._0b88d85e{text-align:right}.cd105f69{vertical-align:bottom}

package/styles/menu.css

@@ -1 +1,8 @@
-.reactist_menulist[role=menu]{min-height:44px;max-height:var(--popover-available-height);overflow:auto;display:block;white-space:nowrap;background:hsla(0,0%,100%,.99);outline:none;font-size:var(--reactist-font-size-copy);padding:4px 0;min-width:180px;border:1px solid var(--reactist-divider-secondary);border-radius:3px;margin:-4px;z-index:var(--reactist-stacking-order-menu)}.reactist_menulist[role=menu] .reactist_menugroup__label,.reactist_menulist[role=menu] [role=menuitem]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;text-align:left;display:flex;align-items:center;padding:5px 10px;color:inherit;border:none;background-color:transparent;font-family:var(--reactist-font-family);font-size:var(--reactist-font-size-copy)}.reactist_menulist[role=menu] .reactist_menugroup__label{color:var(--reactist-content-secondary);font-size:var(--reactist-font-size-copy)}.reactist_menulist[role=menu] [role=menuitem]{width:100%;box-sizing:border-box}.reactist_menulist[role=menu] [role=menuitem]:focus,.reactist_menulist[role=menu] [role=menuitem]:hover,.reactist_menulist[role=menu] [role=menuitem][aria-expanded=true]{color:var(--reactist-content-primary);background-color:var(--reactist-bg-selected)}.reactist_menulist[role=menu] [role=menuitem]:disabled,.reactist_menulist[role=menu] [role=menuitem][aria-disabled=true]{color:var(--reactist-content-secondary);pointer-events:none}.reactist_menulist[role=menu] a[role=menuitem]{cursor:default;text-decoration:none}.reactist_menulist[role=menu] a[role=menuitem]:hover{text-decoration:none}.reactist_menulist[role=menu] [role=menu]{margin-top:-5px}.reactist_menulist[role=menu] hr{border:none;height:1px;background-color:var(--reactist-bg-selected);margin:4px 0}
+._2a3b75a1{box-sizing:border-box;border:0;margin:0;padding:0;font-size:var(--reactist-font-size-body);font-family:inherit;vertical-align:baseline;background-color:transparent;list-style:none}pre._2a3b75a1{font-family:monospace}._2a3b75a1[hidden]{display:none!important}._2286072d{position:absolute}._0847ebf3{position:fixed}._9015266f{position:relative}._572136cd{position:-webkit-sticky;position:sticky}@media (min-width:768px){.dec0da3c{position:absolute}.eb3f61a4{position:fixed}._6a9d01dd{position:relative}.cf9268ba{position:-webkit-sticky;position:sticky}}@media (min-width:992px){._6579cc9c{position:absolute}._3a6a421f{position:fixed}._3a6950ac{position:relative}._142cd372{position:-webkit-sticky;position:sticky}}._9a084bff{display:block}._509a57b4{display:flex}._4a786bb9{display:inline}._5d644b40{display:inline-block}._973d00d0{display:inline-flex}._3e4f26a6{display:none}@media (min-width:768px){.d525fe3a{display:block}._316c9f4b{display:flex}._5e788d98{display:inline}._851fc6b8{display:inline-block}.c16ba46a{display:inline-flex}._759c0c1a{display:none}}@media (min-width:992px){.c374b455{display:block}._8a854d8f{display:flex}._805fa8dc{display:inline}.ab26af05{display:inline-block}._9bd12ba4{display:inline-flex}._581476ce{display:none}}._1fb9d90e{flex-direction:column}.e5a9206f{flex-direction:row}@media (min-width:768px){._3e6a0be1{flex-direction:column}.e9e2e53a{flex-direction:row}}@media (min-width:992px){.c7d6b073{flex-direction:column}._935269b4{flex-direction:row}}._3692f9c2{flex-wrap:wrap}._55f6f487{flex-wrap:nowrap}.d5d0d34a{flex-shrink:0}.d8ff7933{flex-grow:0}._4a93668a{flex-grow:1}._5a8c5a77{align-items:flex-start}._50ba6b6b{align-items:center}._3963f790{align-items:flex-end}._55ef2d4e{align-items:baseline}@media (min-width:768px){._3e2bfb5d{align-items:flex-start}.a99be1ab{align-items:center}.fa8221fe{align-items:flex-end}.e83669a0{align-items:baseline}}@media (min-width:992px){._65e6b537{align-items:flex-start}.db356482{align-items:center}.acc08587{align-items:flex-end}.ad033867{align-items:baseline}}._985b733f{justify-content:flex-start}._95a98d2a{justify-content:center}.be9bf31a{justify-content:flex-end}.a89d8798{justify-content:space-around}._904ef8fe{justify-content:space-between}._489975d5{justify-content:space-evenly}@media (min-width:768px){.a7175ae7{justify-content:flex-start}._7334dead{justify-content:center}._746de733{justify-content:flex-end}._6d09398a{justify-content:space-around}.c2324c1d{justify-content:space-between}._04bd6e07{justify-content:space-evenly}}@media (min-width:992px){._39b310de{justify-content:flex-start}._0dc77292{justify-content:center}._96c15bd8{justify-content:flex-end}._6d09398a{justify-content:space-around}._096111a6{justify-content:space-between}._04bd6e07{justify-content:space-evenly}}._35d69587{align-self:stretch}.f46f3a67{align-self:flex-start}.fb6a8035{align-self:center}.d3193acd{align-self:flex-end}._1154f656{align-self:baseline}@media (min-width:768px){._298e04af{align-self:stretch}._2c729d24{align-self:flex-start}._9ea5e943{align-self:center}._02266425{align-self:flex-end}.c16a5800{align-self:baseline}}@media (min-width:992px){._2ec9eb74{align-self:stretch}._34f1fb03{align-self:flex-start}._77c58550{align-self:center}._9ffa429f{align-self:flex-end}._6cc14c5d{align-self:baseline}}.f6342c26{overflow:hidden}._10a2f952{overflow:auto}.f20b8b87{overflow:visible}._4954f87c{overflow:scroll}.a83fb2f5{height:100%}.d85cf739{background-color:var(--reactist-bg-default)}._4eb1d749{background-color:var(--reactist-bg-aside)}.da1ccaa5{background-color:var(--reactist-bg-highlight)}._82dc28e7{background-color:var(--reactist-bg-selected)}._63ba3dfa{background-color:var(--reactist-bg-toast);color:var(--reactist-content-primary);--reactist-content-primary:var(--reactist-toast-content-primary);--reactist-content-secondary:var(--reactist-toast-content-secondary);--reactist-text-link-idle-tint:var(--reactist-content-primary);--reactist-text-link-idle-decoration:var(--reactist-text-link-hover-decoration);--reactist-actionable-tertiary-idle-tint:var(--reactist-toast-actionable-primary-tint);--reactist-actionable-tertiary-hover-tint:var(--reactist-toast-actionable-primary-tint);--reactist-actionable-tertiary-hover-fill:var(--reactist-toast-actionable-hover-fill);--reactist-actionable-quaternary-idle-tint:var(--reactist-toast-actionable-secondary-tint);--reactist-actionable-quaternary-hover-tint:var(--reactist-toast-actionable-secondary-tint);--reactist-actionable-quaternary-hover-fill:var(--reactist-toast-actionable-hover-fill)}._34cd2b5e{border-radius:var(--reactist-border-radius-small)}._5fe4d5e3{border-radius:var(--reactist-border-radius-large)}._1b34ffd9{border:1px solid var(--reactist-divider-primary)}._705519b0{border:1px solid var(--reactist-divider-secondary)}._67adc238{border:1px solid var(--reactist-divider-tertiary)}.fff8bff0{text-align:start}.f973eed0{text-align:center}._225acbd7{text-align:end}.dea1e8ba{text-align:justify}@media (min-width:768px){._919d6c8f{text-align:start}.ab9d970e{text-align:center}.b5b45e0e{text-align:end}.bd6e42e0{text-align:justify}}@media (min-width:992px){._15120506{text-align:start}._337333b5{text-align:center}._221db0fb{text-align:end}._29ea9711{text-align:justify}}
+.c4803194{padding-top:var(--reactist-spacing-xsmall)}._4e9ab24b{padding-top:var(--reactist-spacing-small)}._1d226e27{padding-top:var(--reactist-spacing-medium)}.eb6097f1{padding-top:var(--reactist-spacing-large)}.d3229ba4{padding-top:var(--reactist-spacing-xlarge)}._47978ba4{padding-top:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.f987719c{padding-top:var(--reactist-spacing-xsmall)}._8dbc4b4d{padding-top:var(--reactist-spacing-small)}.ae44fe07{padding-top:var(--reactist-spacing-medium)}.ffe9548d{padding-top:var(--reactist-spacing-large)}.f2b76a44{padding-top:var(--reactist-spacing-xlarge)}.c6eb8f43{padding-top:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._8699b560{padding-top:var(--reactist-spacing-xsmall)}._02c374b7{padding-top:var(--reactist-spacing-small)}._0dd0332f{padding-top:var(--reactist-spacing-medium)}.da55f1f6{padding-top:var(--reactist-spacing-large)}._8ef2a278{padding-top:var(--reactist-spacing-xlarge)}._8b493b28{padding-top:var(--reactist-spacing-xxlarge)}}._211eebc7{padding-right:var(--reactist-spacing-xsmall)}.ad0ccf15{padding-right:var(--reactist-spacing-small)}.a03e39af{padding-right:var(--reactist-spacing-medium)}.f0941ead{padding-right:var(--reactist-spacing-large)}.e47c5a43{padding-right:var(--reactist-spacing-xlarge)}.e849a5cf{padding-right:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._85374228{padding-right:var(--reactist-spacing-xsmall)}._89df37b9{padding-right:var(--reactist-spacing-small)}._1cc50ebe{padding-right:var(--reactist-spacing-medium)}._1060982b{padding-right:var(--reactist-spacing-large)}.be58847d{padding-right:var(--reactist-spacing-xlarge)}._45093484{padding-right:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.f8d99d6a{padding-right:var(--reactist-spacing-xsmall)}.efa076d9{padding-right:var(--reactist-spacing-small)}.e59caa64{padding-right:var(--reactist-spacing-medium)}.da42f46a{padding-right:var(--reactist-spacing-large)}.b3ee2580{padding-right:var(--reactist-spacing-xlarge)}._3ef94658{padding-right:var(--reactist-spacing-xxlarge)}}.b0e6eab4{padding-bottom:var(--reactist-spacing-xsmall)}._9510d053{padding-bottom:var(--reactist-spacing-small)}.d7af60c9{padding-bottom:var(--reactist-spacing-medium)}.b75f86cd{padding-bottom:var(--reactist-spacing-large)}.fbd4ce29{padding-bottom:var(--reactist-spacing-xlarge)}._33e3ad63{padding-bottom:var(--reactist-spacing-xxlarge)}@media (min-width:768px){.f0302da7{padding-bottom:var(--reactist-spacing-xsmall)}._4f9b8012{padding-bottom:var(--reactist-spacing-small)}._4333e20e{padding-bottom:var(--reactist-spacing-medium)}._30bbc76c{padding-bottom:var(--reactist-spacing-large)}.ba5a4008{padding-bottom:var(--reactist-spacing-xlarge)}._423a3b1a{padding-bottom:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.b40139b7{padding-bottom:var(--reactist-spacing-xsmall)}.f96071fa{padding-bottom:var(--reactist-spacing-small)}.fe803c9a{padding-bottom:var(--reactist-spacing-medium)}._01686eb9{padding-bottom:var(--reactist-spacing-large)}.afa763d8{padding-bottom:var(--reactist-spacing-xlarge)}.a95785f1{padding-bottom:var(--reactist-spacing-xxlarge)}}.cad4e2ec{padding-left:var(--reactist-spacing-xsmall)}.d70b3c17{padding-left:var(--reactist-spacing-small)}._8c851bd6{padding-left:var(--reactist-spacing-medium)}._078feb3c{padding-left:var(--reactist-spacing-large)}._76ab968c{padding-left:var(--reactist-spacing-xlarge)}.aaca85d7{padding-left:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5eb0e5aa{padding-left:var(--reactist-spacing-xsmall)}._0384fb4f{padding-left:var(--reactist-spacing-small)}.edffff6f{padding-left:var(--reactist-spacing-medium)}._873b9a46{padding-left:var(--reactist-spacing-large)}._89105db5{padding-left:var(--reactist-spacing-xlarge)}.db1966fe{padding-left:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){.b17f826b{padding-left:var(--reactist-spacing-xsmall)}._6dc83610{padding-left:var(--reactist-spacing-small)}._3421b8b2{padding-left:var(--reactist-spacing-medium)}._68cec7a6{padding-left:var(--reactist-spacing-large)}._94bde020{padding-left:var(--reactist-spacing-xlarge)}.b94ee579{padding-left:var(--reactist-spacing-xxlarge)}}
+.c7813d79{margin-top:var(--reactist-spacing-xsmall)}.d3449da6{margin-top:var(--reactist-spacing-small)}._4ea254c1{margin-top:var(--reactist-spacing-medium)}.c0844f64{margin-top:var(--reactist-spacing-large)}._213145b4{margin-top:var(--reactist-spacing-xlarge)}.df61c84c{margin-top:var(--reactist-spacing-xxlarge)}.efe72b13{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}._870c2768{margin-top:calc(var(--reactist-spacing-small)*-1)}._0b927c57{margin-top:calc(var(--reactist-spacing-medium)*-1)}._461db014{margin-top:calc(var(--reactist-spacing-large)*-1)}._2a3a8cb8{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}._9bcda921{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6add01e4{margin-top:var(--reactist-spacing-xsmall)}._735ef86b{margin-top:var(--reactist-spacing-small)}._0477d068{margin-top:var(--reactist-spacing-medium)}._2c90af97{margin-top:var(--reactist-spacing-large)}._63a82db6{margin-top:var(--reactist-spacing-xlarge)}._03cd7726{margin-top:var(--reactist-spacing-xxlarge)}.c986a62a{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.be2bdcdd{margin-top:calc(var(--reactist-spacing-small)*-1)}._47d2686b{margin-top:calc(var(--reactist-spacing-medium)*-1)}._25e5af9d{margin-top:calc(var(--reactist-spacing-large)*-1)}.ee82f441{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.a6f9d404{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._4d8d9a36{margin-top:var(--reactist-spacing-xsmall)}.e813cee7{margin-top:var(--reactist-spacing-small)}._56975b7d{margin-top:var(--reactist-spacing-medium)}._53b367f6{margin-top:var(--reactist-spacing-large)}.d69e7311{margin-top:var(--reactist-spacing-xlarge)}._92f57c7e{margin-top:var(--reactist-spacing-xxlarge)}._96880d3e{margin-top:calc(var(--reactist-spacing-xsmall)*-1)}.dc3f3555{margin-top:calc(var(--reactist-spacing-small)*-1)}._86dd06bb{margin-top:calc(var(--reactist-spacing-medium)*-1)}.c93ef12e{margin-top:calc(var(--reactist-spacing-large)*-1)}.bc8fd4a2{margin-top:calc(var(--reactist-spacing-xlarge)*-1)}.b12a9124{margin-top:calc(var(--reactist-spacing-xxlarge)*-1)}}._6016f4fb{margin-right:var(--reactist-spacing-xsmall)}.b85e3dfa{margin-right:var(--reactist-spacing-small)}._297575f4{margin-right:var(--reactist-spacing-medium)}.b401ac6c{margin-right:var(--reactist-spacing-large)}.dc3ec387{margin-right:var(--reactist-spacing-xlarge)}._24694604{margin-right:var(--reactist-spacing-xxlarge)}._8e9bf2ee{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.ae9d1115{margin-right:calc(var(--reactist-spacing-small)*-1)}._14e46fc3{margin-right:calc(var(--reactist-spacing-medium)*-1)}._3370631b{margin-right:calc(var(--reactist-spacing-large)*-1)}._3f0e9b50{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}.bc13e010{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._6fa1aae3{margin-right:var(--reactist-spacing-xsmall)}._2976c5cb{margin-right:var(--reactist-spacing-small)}._38d94802{margin-right:var(--reactist-spacing-medium)}.db9569b5{margin-right:var(--reactist-spacing-large)}._4a52f06d{margin-right:var(--reactist-spacing-xlarge)}._8a0f0410{margin-right:var(--reactist-spacing-xxlarge)}.e7d40e9d{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}._680fde91{margin-right:calc(var(--reactist-spacing-small)*-1)}._021010ca{margin-right:calc(var(--reactist-spacing-medium)*-1)}._9e52c87c{margin-right:calc(var(--reactist-spacing-large)*-1)}._4d602613{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._21b1b65a{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._7321bc07{margin-right:var(--reactist-spacing-xsmall)}.fa1721f4{margin-right:var(--reactist-spacing-small)}._3fd7b4b8{margin-right:var(--reactist-spacing-medium)}._4fdc2f74{margin-right:var(--reactist-spacing-large)}.c0254761{margin-right:var(--reactist-spacing-xlarge)}._710a5f09{margin-right:var(--reactist-spacing-xxlarge)}.e08bee7f{margin-right:calc(var(--reactist-spacing-xsmall)*-1)}.e5ab73d2{margin-right:calc(var(--reactist-spacing-small)*-1)}._5e731477{margin-right:calc(var(--reactist-spacing-medium)*-1)}._0f57a22e{margin-right:calc(var(--reactist-spacing-large)*-1)}._25f26ed3{margin-right:calc(var(--reactist-spacing-xlarge)*-1)}._11a3b4e0{margin-right:calc(var(--reactist-spacing-xxlarge)*-1)}}._6a4f69f7{margin-bottom:var(--reactist-spacing-xsmall)}.db26b033{margin-bottom:var(--reactist-spacing-small)}.c7313022{margin-bottom:var(--reactist-spacing-medium)}.a5885889{margin-bottom:var(--reactist-spacing-large)}._33dfbd8e{margin-bottom:var(--reactist-spacing-xlarge)}._795ad2de{margin-bottom:var(--reactist-spacing-xxlarge)}.a329dbd3{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._85e739fb{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._681f65ff{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.caf50d8f{margin-bottom:calc(var(--reactist-spacing-large)*-1)}._1e084cbf{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._3dfb1c7e{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){.ef4735be{margin-bottom:var(--reactist-spacing-xsmall)}.de55afba{margin-bottom:var(--reactist-spacing-small)}._0e33ce88{margin-bottom:var(--reactist-spacing-medium)}._8ca391fc{margin-bottom:var(--reactist-spacing-large)}._3a609d23{margin-bottom:var(--reactist-spacing-xlarge)}._3e1177e4{margin-bottom:var(--reactist-spacing-xxlarge)}.d384884d{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._75254cec{margin-bottom:calc(var(--reactist-spacing-small)*-1)}._5d9f127d{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}._835f1089{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.dad52a72{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}._8703a4bf{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){._90fd20e9{margin-bottom:var(--reactist-spacing-xsmall)}.f3769191{margin-bottom:var(--reactist-spacing-small)}._156410f8{margin-bottom:var(--reactist-spacing-medium)}._7fed74d0{margin-bottom:var(--reactist-spacing-large)}._477dc10e{margin-bottom:var(--reactist-spacing-xlarge)}._85c82d89{margin-bottom:var(--reactist-spacing-xxlarge)}._4f09c1e0{margin-bottom:calc(var(--reactist-spacing-xsmall)*-1)}._9523e048{margin-bottom:calc(var(--reactist-spacing-small)*-1)}.efe10240{margin-bottom:calc(var(--reactist-spacing-medium)*-1)}.c43971e6{margin-bottom:calc(var(--reactist-spacing-large)*-1)}.f9b4da15{margin-bottom:calc(var(--reactist-spacing-xlarge)*-1)}.a10fdf70{margin-bottom:calc(var(--reactist-spacing-xxlarge)*-1)}}.f9be90b4{margin-left:var(--reactist-spacing-xsmall)}.f53218d5{margin-left:var(--reactist-spacing-small)}.c4a9b3ab{margin-left:var(--reactist-spacing-medium)}._5755e2c3{margin-left:var(--reactist-spacing-large)}._33fc9354{margin-left:var(--reactist-spacing-xlarge)}._4749a3bf{margin-left:var(--reactist-spacing-xxlarge)}.c76cb3c7{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}._96003c07{margin-left:calc(var(--reactist-spacing-small)*-1)}._09988d07{margin-left:calc(var(--reactist-spacing-medium)*-1)}.b4a486f6{margin-left:calc(var(--reactist-spacing-large)*-1)}.f396e75e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._81d1f26d{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}@media (min-width:768px){._0a46e8f1{margin-left:var(--reactist-spacing-xsmall)}._57c970af{margin-left:var(--reactist-spacing-small)}._4b6099d3{margin-left:var(--reactist-spacing-medium)}._378fcff5{margin-left:var(--reactist-spacing-large)}.f8785663{margin-left:var(--reactist-spacing-xlarge)}._72f957ee{margin-left:var(--reactist-spacing-xxlarge)}._2288c7e1{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.b27c1c05{margin-left:calc(var(--reactist-spacing-small)*-1)}._702cbb13{margin-left:calc(var(--reactist-spacing-medium)*-1)}._1a2748b4{margin-left:calc(var(--reactist-spacing-large)*-1)}.b8c043a5{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}._8dc8ff63{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}@media (min-width:992px){.c2af646d{margin-left:var(--reactist-spacing-xsmall)}.c03d07be{margin-left:var(--reactist-spacing-small)}._915fb1d3{margin-left:var(--reactist-spacing-medium)}._64214ee1{margin-left:var(--reactist-spacing-large)}._7be4a22c{margin-left:var(--reactist-spacing-xlarge)}._5ec0a401{margin-left:var(--reactist-spacing-xxlarge)}.ea29f1ee{margin-left:calc(var(--reactist-spacing-xsmall)*-1)}.c26652c7{margin-left:calc(var(--reactist-spacing-small)*-1)}.c24f6af9{margin-left:calc(var(--reactist-spacing-medium)*-1)}.c2671f27{margin-left:calc(var(--reactist-spacing-large)*-1)}.cc51a04e{margin-left:calc(var(--reactist-spacing-xlarge)*-1)}.fd581f54{margin-left:calc(var(--reactist-spacing-xxlarge)*-1)}}
+._68ab48ca{min-width:0}._6fa2b565{min-width:var(--reactist-width-xsmall)}.dd50fabd{min-width:var(--reactist-width-small)}.e7e2c808{min-width:var(--reactist-width-medium)}._6abbe25e{min-width:var(--reactist-width-large)}._54f479ac{min-width:var(--reactist-width-xlarge)}._148492bc{max-width:var(--reactist-width-xsmall)}.bd023b96{max-width:var(--reactist-width-small)}.e102903f{max-width:var(--reactist-width-medium)}._0e8d76d7{max-width:var(--reactist-width-large)}._47a031d0{max-width:var(--reactist-width-xlarge)}.cd4c8183{max-width:100%}._5f5959e8{width:0}._8c75067a{width:100%}._56a651f6{width:auto}._26f87bb8{width:-moz-max-content;width:-webkit-max-content;width:max-content}._07a6ab44{width:-moz-min-content;width:-webkit-min-content;width:min-content}.a87016fa{width:-moz-fit-content;width:-webkit-fit-content;width:fit-content}._1a972e50{width:var(--reactist-width-xsmall)}.c96d8261{width:var(--reactist-width-small)}.f3829d42{width:var(--reactist-width-medium)}._2caef228{width:var(--reactist-width-large)}._069e1491{width:var(--reactist-width-xlarge)}
+._64ed24f4{gap:0}._2580a74b{gap:var(--reactist-spacing-xsmall)}.c68f8bf6{gap:var(--reactist-spacing-small)}._43e5f8e9{gap:var(--reactist-spacing-medium)}._966b120f{gap:var(--reactist-spacing-large)}.f957894c{gap:var(--reactist-spacing-xlarge)}._8cca104b{gap:var(--reactist-spacing-xxlarge)}@media (min-width:768px){._5797cee2{gap:0}._9015672f{gap:var(--reactist-spacing-xsmall)}._7ec86eec{gap:var(--reactist-spacing-small)}._714d7179{gap:var(--reactist-spacing-medium)}.ae1deb59{gap:var(--reactist-spacing-large)}.e1cfce55{gap:var(--reactist-spacing-xlarge)}._168a8ff8{gap:var(--reactist-spacing-xxlarge)}}@media (min-width:992px){._43e2b619{gap:0}._0ea9bf88{gap:var(--reactist-spacing-xsmall)}.d451307a{gap:var(--reactist-spacing-small)}.bf93cf66{gap:var(--reactist-spacing-medium)}._1430cddf{gap:var(--reactist-spacing-large)}.fa00c93e{gap:var(--reactist-spacing-xlarge)}._6f3aee54{gap:var(--reactist-spacing-xxlarge)}}
+.a83bd4e0{font-family:var(--reactist-font-family);font-size:var(--reactist-font-size-body);font-weight:var(--reactist-font-weight-regular);color:var(--reactist-content-primary)}._266d6623{font-size:var(--reactist-font-size-caption)}.a8d37c6e{font-size:var(--reactist-font-size-copy)}._39f4eb1f{font-size:var(--reactist-font-size-subtitle)}._7be5c531{font-weight:var(--reactist-font-weight-medium)}.e214ff2e{font-weight:var(--reactist-font-weight-strong)}._6a3e5ade{color:var(--reactist-content-secondary)}._8f5b5f2b{color:var(--reactist-content-danger)}._9ae47ae4{color:var(--reactist-content-positive)}._969f18f7{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}._2f303ac3{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.d3e04245{-webkit-line-clamp:2}._33411704{-webkit-line-clamp:3}.bfc32640{-webkit-line-clamp:4}.f813c82f{-webkit-line-clamp:5}
+.c63e79f3{background-color:var(--reactist-bg-raised);border-color:var(--reactist-divider-secondary);border-radius:var(--reactist-border-radius-large);border:1px solid var(--reactist-divider-secondary);box-shadow:0 0 8px rgba(0,0,0,.12);color:var(--reactist-content-primary);display:block;font-size:var(--reactist-font-size-copy);line-height:normal;margin:-4px;max-height:var(--popover-available-height);max-width:350px;min-height:44px;min-width:280px;outline:none;overflow-x:hidden;overflow-y:auto;padding:6px 0;white-space:nowrap;width:auto;z-index:var(--reactist-stacking-order-menu)}._1e89cfc6{margin-top:-11px}.c63e79f3 hr{background-color:var(--reactist-divider-primary);border:none;height:1px;margin:4px 0}.c63e79f3 hr+hr{display:none}._1b808bea,._8607099d{background-color:transparent;border-radius:var(--reactist-border-radius-small);border:none;box-sizing:border-box;color:inherit;cursor:pointer;display:flex;flex-direction:column;font-family:var(--reactist-font-family);font-size:var(--reactist-font-size-copy);outline:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}._8607099d{gap:var(--reactist-spacing-small);justify-content:center;margin:0 6px;max-width:calc(100% - 12px);min-height:32px;padding:0 6px;text-align:left;width:100%}.c63e79f3 [role=menuitem],a._1b808bea,a._8607099d{cursor:pointer;text-decoration:none}.c63e79f3 [role=menuitem]:hover,a._1b808bea:hover,a._8607099d:hover{text-decoration:none}._8607099d ._609759d5{display:flex;align-items:center;flex-direction:row;justify-content:flex-start;padding:0 10px}._1b808bea:focus,._1b808bea:hover,._1b808bea[aria-expanded=true],._8607099d:focus,._8607099d:hover,._8607099d[aria-expanded=true]{color:var(--reactist-content-primary);background-color:var(--reactist-bg-highlight)}._8607099d:disabled,._8607099d[aria-disabled=true]{opacity:1;color:var(--reactist-content-secondary)!important;cursor:default}.f1730843{background-color:transparent;border:none;outline:none;padding:5px 10px;text-align:left;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.f1730843>:first-child{flex-grow:1}._7cec7dce{color:var(--product-library-display-secondary-idle-tint);display:flex;align-items:center;justify-content:center;flex-shrink:0}._1b808bea img,._1b808bea svg,._7cec7dce,._7cec7dce img,._7cec7dce svg{width:24px;height:24px}._7cec7dce img{box-sizing:border-box;padding:4px}._91c012d8{width:100%}.bb494fd4{white-space:normal}._503b074a,._503b074a ._7cec7dce,._503b074a ._91c012d8{color:var(--reactist-actionable-secondary-destructive-idle-tint)!important}._503b074a:focus,._503b074a:focus ._7cec7dce,._503b074a:focus ._91c012d8,._503b074a:hover,._503b074a:hover ._7cec7dce,._503b074a:hover ._91c012d8{color:var(--reactist-actionable-secondary-destructive-hover-tint)!important}._1b808bea{display:flex;align-items:center;justify-content:center;flex-grow:0;flex-shrink:0;gap:var(--reactist-spacing-small);outline:none;padding:0 6px;text-align:left;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:32px;height:32px}.ad6d2e4a ._1b808bea{width:24px;height:24px;padding:0}._410b11f2{display:flex;align-items:center;gap:var(--reactist-spacing-xsmall);justify-content:flex-start;margin:0 6px;min-height:32px}
+._487c82cd{text-overflow:ellipsis;max-width:300px;z-index:var(--reactist-stacking-order-tooltip)}