@backstage/ui 0.6.0 → 0.7.0-next.0

package/dist/components/Menu/Combobox.esm.js

@@ -0,0 +1,212 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useId, useState, useMemo, useCallback, useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import '../Icon/context.esm.js';
+import '../Box/Box.esm.js';
+import '../Grid/Grid.esm.js';
+import '../Flex/Flex.esm.js';
+import '../Container/Container.esm.js';
+import '../Avatar/Avatar.esm.js';
+import '../Button/Button.esm.js';
+import '../Card/Card.esm.js';
+import '../Collapsible/Collapsible.esm.js';
+import '../DataTable/DataTable.esm.js';
+import '../FieldLabel/FieldLabel.esm.js';
+import 'react-aria-components';
+import '@remixicon/react';
+import '../ButtonIcon/ButtonIcon.esm.js';
+import './Menu.esm.js';
+import '../Text/Text.esm.js';
+import 'motion/react';
+import 'react-router-dom';
+import '../Tabs/Tabs.esm.js';
+import { Icon } from '../Icon/Icon.esm.js';
+import '../ButtonLink/ButtonLink.esm.js';
+import '../Checkbox/Checkbox.esm.js';
+import '../RadioGroup/RadioGroup.esm.js';
+import '../Table/Table.esm.js';
+import '../TextField/TextField.esm.js';
+import '../Tooltip/Tooltip.esm.js';
+import '../ScrollArea/ScrollArea.esm.js';
+import '../SearchField/SearchField.esm.js';
+import '../Link/Link.esm.js';
+import '../Select/Select.esm.js';
+import '../Switch/Switch.esm.js';
+
+const getListboxItemId = (listboxId, optionValue) => `${listboxId}-option-${optionValue}`;
+function ComboboxItem({
+  option,
+  optionIndex,
+  value,
+  activeOptionIndex,
+  onItemActive,
+  onItemSelect,
+  listboxId
+}) {
+  const isSelected = value?.includes(option.value) ?? false;
+  const isHighlighted = optionIndex === activeOptionIndex;
+  const itemId = getListboxItemId(listboxId, option.value);
+  const itemRef = useRef(null);
+  useEffect(() => {
+    if (isHighlighted && itemRef.current) {
+      itemRef.current.scrollIntoView({ block: "nearest" });
+    }
+  }, [isHighlighted]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: itemRef,
+      className: "bui-SubmenuComboboxItem",
+      id: itemId,
+      role: "option",
+      "aria-selected": isSelected,
+      "data-highlighted": isHighlighted ? true : void 0,
+      "data-selected": isSelected ? true : void 0,
+      "data-disabled": option.disabled ? true : void 0,
+      onMouseOver: () => !option.disabled && onItemActive(optionIndex),
+      onClick: () => !option.disabled && onItemSelect(option.value),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "bui-SubmenuComboboxItemCheckbox", children: isSelected && /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", name: "check", size: 12 }) }),
+        /* @__PURE__ */ jsx("div", { className: "bui-SubmenuComboboxItemLabel", children: option.label })
+      ]
+    }
+  );
+}
+const Combobox = forwardRef(
+  (props, ref) => {
+    const {
+      options,
+      value,
+      onValueChange,
+      multiselect = false,
+      className,
+      ...rest
+    } = props;
+    const triggerId = useId();
+    const listboxId = `${triggerId}-listbox`;
+    const [filterString, setFilterString] = useState("");
+    const [activeOptionIndex, setActiveOptionIndex] = useState(0);
+    const filteredOptions = useMemo(() => {
+      if (!filterString) return options;
+      const lowerFilterString = filterString.toLocaleLowerCase("en-US");
+      return options.filter(
+        (option) => option.label.toLocaleLowerCase("en-US").includes(lowerFilterString)
+      );
+    }, [filterString, options]);
+    const activeDescendantId = activeOptionIndex >= 0 && filteredOptions.length > 0 ? getListboxItemId(listboxId, filteredOptions[activeOptionIndex].value) : void 0;
+    const handleValueChange = useCallback(
+      (toggledValue) => {
+        let newValue;
+        if (multiselect) {
+          newValue = value?.includes(toggledValue) ? value.filter((v) => v !== toggledValue) : [...value ?? [], toggledValue];
+        } else {
+          newValue = value?.includes(toggledValue) ? [] : [toggledValue];
+        }
+        onValueChange?.(newValue);
+      },
+      [multiselect, onValueChange, value]
+    );
+    const handleSearchChange = useCallback(
+      (e) => {
+        setFilterString(e.target.value);
+        setActiveOptionIndex(0);
+        e.preventDefault();
+      },
+      []
+    );
+    const handleKeyDown = useCallback(
+      (e) => {
+        let wasEscapeKey = false;
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault();
+            setActiveOptionIndex(
+              (prev) => Math.min(prev + 1, filteredOptions.length - 1)
+            );
+            break;
+          case "ArrowUp":
+            e.preventDefault();
+            setActiveOptionIndex((prev) => Math.max(prev - 1, 0));
+            break;
+          case "Home":
+            e.preventDefault();
+            setActiveOptionIndex(0);
+            break;
+          case "End":
+            e.preventDefault();
+            setActiveOptionIndex(Math.max(filteredOptions.length - 1, 0));
+            break;
+          case "Enter":
+            e.preventDefault();
+            if (activeOptionIndex >= 0 && !filteredOptions[activeOptionIndex].disabled) {
+              handleValueChange(filteredOptions[activeOptionIndex].value);
+            }
+            break;
+          case "Escape":
+            wasEscapeKey = true;
+            break;
+        }
+        if (!wasEscapeKey) {
+          e.stopPropagation();
+        }
+      },
+      [filteredOptions, activeOptionIndex, handleValueChange]
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "combobox",
+        className: clsx("bui-MenuCombobox", className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              className: "bui-SubmenuComboboxSearch",
+              type: "text",
+              role: "combobox",
+              placeholder: "Filter...",
+              "aria-labelledby": triggerId,
+              "aria-controls": listboxId,
+              "aria-autocomplete": "list",
+              "aria-activedescendant": activeDescendantId,
+              "aria-expanded": "true",
+              "aria-haspopup": "listbox",
+              value: filterString,
+              onKeyDown: handleKeyDown,
+              onChange: handleSearchChange
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "listbox",
+              id: listboxId,
+              tabIndex: -1,
+              "aria-multiselectable": multiselect ? true : void 0,
+              className: "bui-SubmenuComboboxItems",
+              children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "bui-SubmenuComboboxNoResults", children: "No results found" }) : filteredOptions.map((option, index) => /* @__PURE__ */ jsx(
+                ComboboxItem,
+                {
+                  option,
+                  optionIndex: index,
+                  value,
+                  activeOptionIndex,
+                  onItemActive: setActiveOptionIndex,
+                  onItemSelect: handleValueChange,
+                  listboxId
+                },
+                option.value
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Combobox.displayName = "Combobox";
+
+export { Combobox };
+//# sourceMappingURL=Combobox.esm.js.map

package/dist/components/Menu/Combobox.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.esm.js","sources":["../../../src/components/Menu/Combobox.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n  forwardRef,\n  useState,\n  useMemo,\n  useCallback,\n  useId,\n  ChangeEvent,\n  KeyboardEvent,\n  useRef,\n  useEffect,\n} from 'react';\nimport clsx from 'clsx';\nimport { MenuComboboxOption, MenuComboboxProps } from './types';\nimport { Icon } from '../..';\n\nconst getListboxItemId = (listboxId: string, optionValue: string): string =>\n  `${listboxId}-option-${optionValue}`;\n\n// Internal component for rendering individual items\nfunction ComboboxItem({\n  option,\n  optionIndex,\n  value,\n  activeOptionIndex,\n  onItemActive,\n  onItemSelect,\n  listboxId,\n}: {\n  option: MenuComboboxOption;\n  optionIndex: number;\n  value?: string[];\n  activeOptionIndex: number;\n  onItemActive: (index: number) => void;\n  onItemSelect: (value: string) => void;\n  listboxId: string;\n}) {\n  const isSelected = value?.includes(option.value) ?? false;\n  const isHighlighted = optionIndex === activeOptionIndex;\n  const itemId = getListboxItemId(listboxId, option.value);\n\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  // Scroll the item into view when it becomes highlighted\n  useEffect(() => {\n    if (isHighlighted && itemRef.current) {\n      itemRef.current.scrollIntoView({ block: 'nearest' });\n    }\n  }, [isHighlighted]);\n\n  return (\n    <div\n      ref={itemRef}\n      className=\"bui-SubmenuComboboxItem\"\n      id={itemId}\n      role=\"option\"\n      aria-selected={isSelected}\n      data-highlighted={isHighlighted ? true : undefined}\n      data-selected={isSelected ? true : undefined}\n      data-disabled={option.disabled ? true : undefined}\n      onMouseOver={() => !option.disabled && onItemActive(optionIndex)}\n      onClick={() => !option.disabled && onItemSelect(option.value)}\n    >\n      <div className=\"bui-SubmenuComboboxItemCheckbox\">\n        {isSelected && <Icon aria-hidden=\"true\" name=\"check\" size={12} />}\n      </div>\n      <div className=\"bui-SubmenuComboboxItemLabel\">{option.label}</div>\n    </div>\n  );\n}\n\n/** @public */\nexport const Combobox = forwardRef<HTMLDivElement, MenuComboboxProps>(\n  (props, ref) => {\n    const {\n      options,\n      value,\n      onValueChange,\n      multiselect = false,\n      className,\n      ...rest\n    } = props;\n\n    const triggerId = useId();\n    const listboxId = `${triggerId}-listbox`;\n\n    // State management\n    const [filterString, setFilterString] = useState<string>('');\n    const [activeOptionIndex, setActiveOptionIndex] = useState<number>(0);\n\n    // Filter options based on input\n    const filteredOptions = useMemo(() => {\n      if (!filterString) return options;\n      const lowerFilterString = filterString.toLocaleLowerCase('en-US');\n      return options.filter(option =>\n        option.label.toLocaleLowerCase('en-US').includes(lowerFilterString),\n      );\n    }, [filterString, options]);\n\n    // Get the active descendant ID for accessibility\n    const activeDescendantId =\n      activeOptionIndex >= 0 && filteredOptions.length > 0\n        ? getListboxItemId(listboxId, filteredOptions[activeOptionIndex].value)\n        : undefined;\n\n    const handleValueChange = useCallback(\n      (toggledValue: string) => {\n        let newValue: string[];\n        if (multiselect) {\n          newValue = value?.includes(toggledValue)\n            ? value.filter(v => v !== toggledValue)\n            : [...(value ?? []), toggledValue];\n        } else {\n          newValue = value?.includes(toggledValue) ? [] : [toggledValue];\n        }\n\n        onValueChange?.(newValue);\n      },\n      [multiselect, onValueChange, value],\n    );\n\n    const handleSearchChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        setFilterString(e.target.value);\n        setActiveOptionIndex(0);\n        e.preventDefault();\n      },\n      [],\n    );\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        let wasEscapeKey = false;\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault();\n            setActiveOptionIndex(prev =>\n              Math.min(prev + 1, filteredOptions.length - 1),\n            );\n            break;\n          case 'ArrowUp':\n            e.preventDefault();\n            setActiveOptionIndex(prev => Math.max(prev - 1, 0));\n            break;\n          case 'Home':\n            e.preventDefault();\n            setActiveOptionIndex(0);\n            break;\n          case 'End':\n            e.preventDefault();\n            setActiveOptionIndex(Math.max(filteredOptions.length - 1, 0));\n            break;\n          case 'Enter':\n            e.preventDefault();\n            if (\n              activeOptionIndex >= 0 &&\n              !filteredOptions[activeOptionIndex].disabled\n            ) {\n              handleValueChange(filteredOptions[activeOptionIndex].value);\n            }\n            break;\n          case 'Escape':\n            // The Menu component should handle this\n            wasEscapeKey = true;\n            break;\n          default:\n            break;\n        }\n\n        if (!wasEscapeKey) {\n          // Stop propagation so Menu components don't prevent the input from updating\n          e.stopPropagation();\n        }\n      },\n      [filteredOptions, activeOptionIndex, handleValueChange],\n    );\n\n    return (\n      <div\n        ref={ref}\n        role=\"combobox\"\n        className={clsx('bui-MenuCombobox', className)}\n        {...rest}\n      >\n        <input\n          className=\"bui-SubmenuComboboxSearch\"\n          type=\"text\"\n          role=\"combobox\"\n          placeholder=\"Filter...\"\n          aria-labelledby={triggerId}\n          aria-controls={listboxId}\n          aria-autocomplete=\"list\"\n          aria-activedescendant={activeDescendantId}\n          aria-expanded=\"true\"\n          aria-haspopup=\"listbox\"\n          value={filterString}\n          onKeyDown={handleKeyDown}\n          onChange={handleSearchChange}\n        />\n        <div\n          role=\"listbox\"\n          id={listboxId}\n          tabIndex={-1}\n          aria-multiselectable={multiselect ? true : undefined}\n          className=\"bui-SubmenuComboboxItems\"\n        >\n          {filteredOptions.length === 0 ? (\n            <div className=\"bui-SubmenuComboboxNoResults\">No results found</div>\n          ) : (\n            filteredOptions.map((option, index) => (\n              <ComboboxItem\n                key={option.value}\n                option={option}\n                optionIndex={index}\n                value={value}\n                activeOptionIndex={activeOptionIndex}\n                onItemActive={setActiveOptionIndex}\n                onItemSelect={handleValueChange}\n                listboxId={listboxId}\n              />\n            ))\n          )}\n        </div>\n      </div>\n    );\n  },\n);\nCombobox.displayName = 'Combobox';\n"],"names":[],"mappings":"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"}

package/dist/components/Menu/Menu.esm.js

@@ -0,0 +1,224 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Menu as Menu$1 } from '@base-ui-components/react/menu';
+import clsx from 'clsx';
+import { Combobox } from './Combobox.esm.js';
+import '@remixicon/react';
+import { Icon } from '../Icon/Icon.esm.js';
+import '../Icon/context.esm.js';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const MenuTrigger = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.Trigger,
+    {
+      ref,
+      className: clsx(classNames.trigger, className),
+      ...props
+    }
+  );
+});
+MenuTrigger.displayName = Menu$1.Trigger.displayName;
+const MenuBackdrop = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.Backdrop,
+    {
+      ref,
+      className: clsx(classNames.backdrop, className),
+      ...props
+    }
+  );
+});
+MenuBackdrop.displayName = Menu$1.Backdrop.displayName;
+const MenuPositioner = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.Positioner,
+    {
+      ref,
+      className: clsx(classNames.positioner, className),
+      ...props
+    }
+  );
+});
+MenuPositioner.displayName = Menu$1.Positioner.displayName;
+const MenuPopup = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.Popup,
+    {
+      ref,
+      className: clsx(classNames.popup, className),
+      ...props
+    }
+  );
+});
+MenuPopup.displayName = Menu$1.Popup.displayName;
+const MenuArrow = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.Arrow,
+    {
+      ref,
+      className: clsx(classNames.arrow, className),
+      ...props
+    }
+  );
+});
+MenuArrow.displayName = Menu$1.Arrow.displayName;
+const MenuItem = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.Item,
+    {
+      ref,
+      className: clsx(classNames.item, className),
+      ...props
+    }
+  );
+});
+MenuItem.displayName = Menu$1.Item.displayName;
+const MenuGroup = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.Group,
+    {
+      ref,
+      className: clsx(classNames.group, className),
+      ...props
+    }
+  );
+});
+MenuGroup.displayName = Menu$1.Group.displayName;
+const MenuGroupLabel = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.GroupLabel,
+    {
+      ref,
+      className: clsx(classNames.groupLabel, className),
+      ...props
+    }
+  );
+});
+MenuGroupLabel.displayName = Menu$1.GroupLabel.displayName;
+const MenuRadioGroup = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.RadioGroup,
+    {
+      ref,
+      className: clsx(classNames.radioGroup, className),
+      ...props
+    }
+  );
+});
+MenuRadioGroup.displayName = Menu$1.RadioGroup.displayName;
+const MenuRadioItem = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.RadioItem,
+    {
+      ref,
+      className: clsx(classNames.radioItem, className),
+      ...props
+    }
+  );
+});
+MenuRadioItem.displayName = Menu$1.RadioItem.displayName;
+const MenuRadioItemIndicator = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.RadioItemIndicator,
+    {
+      ref,
+      className: clsx(classNames.radioItemIndicator, className),
+      ...props
+    }
+  );
+});
+MenuRadioItemIndicator.displayName = Menu$1.RadioItemIndicator.displayName;
+const MenuCheckboxItem = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.CheckboxItem,
+    {
+      ref,
+      className: clsx(classNames.checkboxItem, className),
+      ...props
+    }
+  );
+});
+MenuCheckboxItem.displayName = Menu$1.CheckboxItem.displayName;
+const MenuCheckboxItemIndicator = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.CheckboxItemIndicator,
+    {
+      ref,
+      className: clsx(classNames.checkboxItemIndicator, className),
+      ...props
+    }
+  );
+});
+MenuCheckboxItemIndicator.displayName = Menu$1.CheckboxItemIndicator.displayName;
+const MenuSubmenuTrigger = forwardRef(({ className, children, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsxs(
+    Menu$1.SubmenuTrigger,
+    {
+      ref,
+      className: clsx(classNames.submenuTrigger, className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { children }),
+        /* @__PURE__ */ jsx(
+          Icon,
+          {
+            "aria-label": "Submenu indicator icon",
+            name: "chevron-right",
+            size: 20
+          }
+        )
+      ]
+    }
+  );
+});
+MenuSubmenuTrigger.displayName = Menu$1.SubmenuTrigger.displayName;
+const MenuSeparator = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("Menu");
+  return /* @__PURE__ */ jsx(
+    Menu$1.Separator,
+    {
+      ref,
+      className: clsx(classNames.separator, className),
+      ...props
+    }
+  );
+});
+MenuSeparator.displayName = Menu$1.Separator.displayName;
+const Menu = {
+  Root: Menu$1.Root,
+  Trigger: MenuTrigger,
+  Portal: Menu$1.Portal,
+  Backdrop: MenuBackdrop,
+  Positioner: MenuPositioner,
+  Popup: MenuPopup,
+  Arrow: MenuArrow,
+  Item: MenuItem,
+  Group: MenuGroup,
+  GroupLabel: MenuGroupLabel,
+  RadioGroup: MenuRadioGroup,
+  RadioItem: MenuRadioItem,
+  RadioItemIndicator: MenuRadioItemIndicator,
+  CheckboxItem: MenuCheckboxItem,
+  CheckboxItemIndicator: MenuCheckboxItemIndicator,
+  SubmenuTrigger: MenuSubmenuTrigger,
+  Separator: MenuSeparator,
+  Combobox
+};
+
+export { Menu };
+//# sourceMappingURL=Menu.esm.js.map

package/dist/components/Menu/Menu.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.esm.js","sources":["../../../src/components/Menu/Menu.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { Menu as MenuPrimitive } from '@base-ui-components/react/menu';\nimport clsx from 'clsx';\nimport { MenuComponent } from './types';\nimport { Combobox } from './Combobox';\nimport { Icon } from '../Icon';\nimport { useStyles } from '../../hooks/useStyles';\n\nconst MenuTrigger = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Trigger>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Trigger\n      ref={ref}\n      className={clsx(classNames.trigger, className)}\n      {...props}\n    />\n  );\n});\nMenuTrigger.displayName = MenuPrimitive.Trigger.displayName;\n\nconst MenuBackdrop = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Backdrop>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Backdrop>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Backdrop\n      ref={ref}\n      className={clsx(classNames.backdrop, className)}\n      {...props}\n    />\n  );\n});\nMenuBackdrop.displayName = MenuPrimitive.Backdrop.displayName;\n\nconst MenuPositioner = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Positioner>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Positioner>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Positioner\n      ref={ref}\n      className={clsx(classNames.positioner, className)}\n      {...props}\n    />\n  );\n});\nMenuPositioner.displayName = MenuPrimitive.Positioner.displayName;\n\nconst MenuPopup = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Popup>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Popup>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Popup\n      ref={ref}\n      className={clsx(classNames.popup, className)}\n      {...props}\n    />\n  );\n});\nMenuPopup.displayName = MenuPrimitive.Popup.displayName;\n\nconst MenuArrow = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Arrow>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Arrow>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Arrow\n      ref={ref}\n      className={clsx(classNames.arrow, className)}\n      {...props}\n    />\n  );\n});\nMenuArrow.displayName = MenuPrimitive.Arrow.displayName;\n\nconst MenuItem = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Item>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Item\n      ref={ref}\n      className={clsx(classNames.item, className)}\n      {...props}\n    />\n  );\n});\nMenuItem.displayName = MenuPrimitive.Item.displayName;\n\nconst MenuGroup = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Group>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Group\n      ref={ref}\n      className={clsx(classNames.group, className)}\n      {...props}\n    />\n  );\n});\nMenuGroup.displayName = MenuPrimitive.Group.displayName;\n\nconst MenuGroupLabel = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.GroupLabel>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.GroupLabel>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.GroupLabel\n      ref={ref}\n      className={clsx(classNames.groupLabel, className)}\n      {...props}\n    />\n  );\n});\nMenuGroupLabel.displayName = MenuPrimitive.GroupLabel.displayName;\n\nconst MenuRadioGroup = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.RadioGroup>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioGroup>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.RadioGroup\n      ref={ref}\n      className={clsx(classNames.radioGroup, className)}\n      {...props}\n    />\n  );\n});\nMenuRadioGroup.displayName = MenuPrimitive.RadioGroup.displayName;\n\nconst MenuRadioItem = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.RadioItem>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.RadioItem\n      ref={ref}\n      className={clsx(classNames.radioItem, className)}\n      {...props}\n    />\n  );\n});\nMenuRadioItem.displayName = MenuPrimitive.RadioItem.displayName;\n\nconst MenuRadioItemIndicator = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.RadioItemIndicator>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItemIndicator>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.RadioItemIndicator\n      ref={ref}\n      className={clsx(classNames.radioItemIndicator, className)}\n      {...props}\n    />\n  );\n});\nMenuRadioItemIndicator.displayName =\n  MenuPrimitive.RadioItemIndicator.displayName;\n\nconst MenuCheckboxItem = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.CheckboxItem>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.CheckboxItem\n      ref={ref}\n      className={clsx(classNames.checkboxItem, className)}\n      {...props}\n    />\n  );\n});\nMenuCheckboxItem.displayName = MenuPrimitive.CheckboxItem.displayName;\n\nconst MenuCheckboxItemIndicator = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.CheckboxItemIndicator>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItemIndicator>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.CheckboxItemIndicator\n      ref={ref}\n      className={clsx(classNames.checkboxItemIndicator, className)}\n      {...props}\n    />\n  );\n});\nMenuCheckboxItemIndicator.displayName =\n  MenuPrimitive.CheckboxItemIndicator.displayName;\n\nconst MenuSubmenuTrigger = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.SubmenuTrigger>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.SubmenuTrigger>\n>(({ className, children, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      ref={ref}\n      className={clsx(classNames.submenuTrigger, className)}\n      {...props}\n    >\n      <div>{children}</div>\n      <Icon\n        aria-label=\"Submenu indicator icon\"\n        name=\"chevron-right\"\n        size={20}\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  );\n});\nMenuSubmenuTrigger.displayName = MenuPrimitive.SubmenuTrigger.displayName;\n\nconst MenuSeparator = forwardRef<\n  React.ElementRef<typeof MenuPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <MenuPrimitive.Separator\n      ref={ref}\n      className={clsx(classNames.separator, className)}\n      {...props}\n    />\n  );\n});\nMenuSeparator.displayName = MenuPrimitive.Separator.displayName;\n\n/** @public */\nexport const Menu: MenuComponent = {\n  Root: MenuPrimitive.Root,\n  Trigger: MenuTrigger,\n  Portal: MenuPrimitive.Portal,\n  Backdrop: MenuBackdrop,\n  Positioner: MenuPositioner,\n  Popup: MenuPopup,\n  Arrow: MenuArrow,\n  Item: MenuItem,\n  Group: MenuGroup,\n  GroupLabel: MenuGroupLabel,\n  RadioGroup: MenuRadioGroup,\n  RadioItem: MenuRadioItem,\n  RadioItemIndicator: MenuRadioItemIndicator,\n  CheckboxItem: MenuCheckboxItem,\n  CheckboxItemIndicator: MenuCheckboxItemIndicator,\n  SubmenuTrigger: MenuSubmenuTrigger,\n  Separator: MenuSeparator,\n  Combobox,\n};\n"],"names":["MenuPrimitive"],"mappings":"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"}

package/dist/components/RadioGroup/RadioGroup.esm.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useEffect } from 'react';
+import { RadioGroup as RadioGroup$1, Radio as Radio$1 } from 'react-aria-components';
+import clsx from 'clsx';
+import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
+import { FieldError } from '../FieldError/FieldError.esm.js';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const RadioGroup = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      label,
+      secondaryLabel,
+      description,
+      isRequired,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      children,
+      ...rest
+    } = props;
+    const { classNames } = useStyles("RadioGroup");
+    useEffect(() => {
+      if (!label && !ariaLabel && !ariaLabelledBy) {
+        console.warn(
+          "RadioGroup requires either a visible label, aria-label, or aria-labelledby for accessibility"
+        );
+      }
+    }, [label, ariaLabel, ariaLabelledBy]);
+    const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
+    return /* @__PURE__ */ jsxs(
+      RadioGroup$1,
+      {
+        className: clsx(classNames.root, className),
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        ...rest,
+        ref,
+        children: [
+          /* @__PURE__ */ jsx(
+            FieldLabel,
+            {
+              label,
+              secondaryLabel: secondaryLabelText,
+              description
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: classNames.content, children }),
+          /* @__PURE__ */ jsx(FieldError, {})
+        ]
+      }
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+const Radio = forwardRef((props, ref) => {
+  const { className, ...rest } = props;
+  const { classNames } = useStyles("RadioGroup");
+  return /* @__PURE__ */ jsx(
+    Radio$1,
+    {
+      className: clsx(classNames.radio, className),
+      ...rest,
+      ref
+    }
+  );
+});
+RadioGroup.displayName = "RadioGroup";
+
+export { Radio, RadioGroup };
+//# sourceMappingURL=RadioGroup.esm.js.map

package/dist/components/RadioGroup/RadioGroup.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.esm.js","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, useEffect } from 'react';\nimport {\n  RadioGroup as AriaRadioGroup,\n  Radio as AriaRadio,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { useStyles } from '../../hooks/useStyles';\n\nimport type { RadioGroupProps, RadioProps } from './types';\n\n/** @public */\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (props, ref) => {\n    const {\n      className,\n      label,\n      secondaryLabel,\n      description,\n      isRequired,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      children,\n      ...rest\n    } = props;\n\n    const { classNames } = useStyles('RadioGroup');\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'RadioGroup requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    return (\n      <AriaRadioGroup\n        className={clsx(classNames.root, className)}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div className={classNames.content}>{children}</div>\n        <FieldError />\n      </AriaRadioGroup>\n    );\n  },\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\n/** @public */\nexport const Radio = forwardRef<HTMLLabelElement, RadioProps>((props, ref) => {\n  const { className, ...rest } = props;\n\n  const { classNames } = useStyles('RadioGroup');\n\n  return (\n    <AriaRadio\n      className={clsx(classNames.radio, className)}\n      {...rest}\n      ref={ref}\n    />\n  );\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"names":["AriaRadioGroup","AriaRadio"],"mappings":";;;;;;;;AA6BO,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAc,EAAA,SAAA;AAAA,MACd,iBAAmB,EAAA,cAAA;AAAA,MACnB,QAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAgB,EAAA;AAC3C,QAAQ,OAAA,CAAA,IAAA;AAAA,UACN;AAAA,SACF;AAAA;AACF,KACC,EAAA,CAAC,KAAO,EAAA,SAAA,EAAW,cAAc,CAAC,CAAA;AAGrC,IAAM,MAAA,kBAAA,GACJ,cAAmB,KAAA,UAAA,GAAa,UAAa,GAAA,IAAA,CAAA;AAE/C,IACE,uBAAA,IAAA;AAAA,MAACA,YAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,YAAY,EAAA,SAAA;AAAA,QACZ,iBAAiB,EAAA,cAAA;AAAA,QAChB,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAgB,EAAA,kBAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BACC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,SAAU,QAAS,EAAA,CAAA;AAAA,8BAC7C,UAAW,EAAA,EAAA;AAAA;AAAA;AAAA,KACd;AAAA;AAGN;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;AAGlB,MAAM,KAAQ,GAAA,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAQ,KAAA;AAC5E,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAS,GAAA,KAAA;AAE/B,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EACE,uBAAA,GAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,GAAG,IAAA;AAAA,MACJ;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}

package/dist/components/ScrollArea/ScrollArea.esm.js

@@ -0,0 +1,63 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { ScrollArea as ScrollArea$1 } from '@base-ui-components/react/scroll-area';
+import clsx from 'clsx';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+
+const ScrollAreaRoot = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("ScrollArea");
+  return /* @__PURE__ */ jsx(
+    ScrollArea$1.Root,
+    {
+      ref,
+      className: clsx(classNames.root, className),
+      ...props
+    }
+  );
+});
+ScrollAreaRoot.displayName = ScrollArea$1.Root.displayName;
+const ScrollAreaViewport = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("ScrollArea");
+  return /* @__PURE__ */ jsx(
+    ScrollArea$1.Viewport,
+    {
+      ref,
+      className: clsx(classNames.viewport, className),
+      ...props
+    }
+  );
+});
+ScrollAreaViewport.displayName = ScrollArea$1.Viewport.displayName;
+const ScrollAreaScrollbar = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("ScrollArea");
+  return /* @__PURE__ */ jsx(
+    ScrollArea$1.Scrollbar,
+    {
+      ref,
+      className: clsx(classNames.scrollbar, className),
+      ...props
+    }
+  );
+});
+ScrollAreaScrollbar.displayName = ScrollArea$1.Scrollbar.displayName;
+const ScrollAreaThumb = forwardRef(({ className, ...props }, ref) => {
+  const { classNames } = useStyles("ScrollArea");
+  return /* @__PURE__ */ jsx(
+    ScrollArea$1.Thumb,
+    {
+      ref,
+      className: clsx(classNames.thumb, className),
+      ...props
+    }
+  );
+});
+ScrollAreaThumb.displayName = ScrollArea$1.Thumb.displayName;
+const ScrollArea = {
+  Root: ScrollAreaRoot,
+  Viewport: ScrollAreaViewport,
+  Scrollbar: ScrollAreaScrollbar,
+  Thumb: ScrollAreaThumb
+};
+
+export { ScrollArea };
+//# sourceMappingURL=ScrollArea.esm.js.map

package/dist/components/ScrollArea/ScrollArea.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.esm.js","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { ScrollArea as ScrollAreaPrimitive } from '@base-ui-components/react/scroll-area';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\n\nconst ScrollAreaRoot = forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('ScrollArea');\n\n  return (\n    <ScrollAreaPrimitive.Root\n      ref={ref}\n      className={clsx(classNames.root, className)}\n      {...props}\n    />\n  );\n});\nScrollAreaRoot.displayName = ScrollAreaPrimitive.Root.displayName;\n\nconst ScrollAreaViewport = forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Viewport>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Viewport>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('ScrollArea');\n\n  return (\n    <ScrollAreaPrimitive.Viewport\n      ref={ref}\n      className={clsx(classNames.viewport, className)}\n      {...props}\n    />\n  );\n});\nScrollAreaViewport.displayName = ScrollAreaPrimitive.Viewport.displayName;\n\nconst ScrollAreaScrollbar = forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Scrollbar>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('ScrollArea');\n\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      ref={ref}\n      className={clsx(classNames.scrollbar, className)}\n      {...props}\n    />\n  );\n});\nScrollAreaScrollbar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;\n\nconst ScrollAreaThumb = forwardRef<\n  React.ElementRef<typeof ScrollAreaPrimitive.Thumb>,\n  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Thumb>\n>(({ className, ...props }, ref) => {\n  const { classNames } = useStyles('ScrollArea');\n\n  return (\n    <ScrollAreaPrimitive.Thumb\n      ref={ref}\n      className={clsx(classNames.thumb, className)}\n      {...props}\n    />\n  );\n});\nScrollAreaThumb.displayName = ScrollAreaPrimitive.Thumb.displayName;\n\n/** @public */\nexport const ScrollArea = {\n  Root: ScrollAreaRoot,\n  Viewport: ScrollAreaViewport,\n  Scrollbar: ScrollAreaScrollbar,\n  Thumb: ScrollAreaThumb,\n};\n"],"names":["ScrollAreaPrimitive"],"mappings":";;;;;;AAqBA,MAAM,cAAA,GAAiB,WAGrB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EACE,uBAAA,GAAA;AAAA,IAACA,YAAoB,CAAA,IAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MACzC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,cAAe,CAAA,WAAA,GAAcA,aAAoB,IAAK,CAAA,WAAA;AAEtD,MAAM,kBAAA,GAAqB,WAGzB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EACE,uBAAA,GAAA;AAAA,IAACA,YAAoB,CAAA,QAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,MAC7C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,kBAAmB,CAAA,WAAA,GAAcA,aAAoB,QAAS,CAAA,WAAA;AAE9D,MAAM,mBAAA,GAAsB,WAG1B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EACE,uBAAA,GAAA;AAAA,IAACA,YAAoB,CAAA,SAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAC9C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,mBAAoB,CAAA,WAAA,GAAcA,aAAoB,SAAU,CAAA,WAAA;AAEhE,MAAM,eAAA,GAAkB,WAGtB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAQ,KAAA;AAClC,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EACE,uBAAA,GAAA;AAAA,IAACA,YAAoB,CAAA,KAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AACD,eAAgB,CAAA,WAAA,GAAcA,aAAoB,KAAM,CAAA,WAAA;AAGjD,MAAM,UAAa,GAAA;AAAA,EACxB,IAAM,EAAA,cAAA;AAAA,EACN,QAAU,EAAA,kBAAA;AAAA,EACV,SAAW,EAAA,mBAAA;AAAA,EACX,KAAO,EAAA;AACT;;;;"}