@backstage/ui 0.12.0 → 0.13.0-next.1

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.esm.js","sources":["../../../src/components/Menu/Menu.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  MenuTrigger as RAMenuTrigger,\n  Popover as RAPopover,\n  MenuItem as RAMenuItem,\n  Menu as RAMenu,\n  MenuSection as RAMenuSection,\n  Header as RAMenuHeader,\n  Separator as RAMenuSeparator,\n  SubmenuTrigger as RAMenuSubmenuTrigger,\n  Autocomplete as RAAutocomplete,\n  SearchField as RASearchField,\n  Input as RAInput,\n  Button as RAButton,\n  ListBox as RAListBox,\n  ListBoxItem as RAListBoxItem,\n  useFilter,\n  Virtualizer,\n  ListLayout,\n} from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { MenuDefinition } from './definition';\nimport type {\n  MenuTriggerProps,\n  SubmenuTriggerProps,\n  MenuProps,\n  MenuAutocompleteProps,\n  MenuItemProps,\n  MenuSectionProps,\n  MenuSeparatorProps,\n  MenuListBoxProps,\n  MenuListBoxItemProps,\n  MenuAutocompleteListBoxProps,\n} from './types';\nimport {\n  RiArrowRightSLine,\n  RiCheckLine,\n  RiCloseCircleLine,\n} from '@remixicon/react';\nimport {\n  isInternalLink,\n  createRoutingRegistration,\n} from '../InternalLinkProvider';\nimport styles from './Menu.module.css';\nimport clsx from 'clsx';\n\nconst { RoutingProvider, useRoutingRegistrationEffect } =\n  createRoutingRegistration();\n\n// The height will be used for virtualized menus. It should match the size set in CSS for each menu item.\nconst rowHeight = 32;\n\nconst MenuEmptyState = () => {\n  const { classNames } = useStyles(MenuDefinition);\n\n  return (\n    <div className={clsx(classNames.emptyState, styles[classNames.emptyState])}>\n      No results found.\n    </div>\n  );\n};\n\n/** @public */\nexport const MenuTrigger = (props: MenuTriggerProps) => {\n  return <RAMenuTrigger {...props} />;\n};\n\n/** @public */\nexport const SubmenuTrigger = (props: SubmenuTriggerProps) => {\n  return <RAMenuSubmenuTrigger {...props} />;\n};\n\n/** @public */\nexport const Menu = (props: MenuProps<object>) => {\n  const { classNames, cleanedProps } = useStyles(MenuDefinition, props);\n  const {\n    className,\n    placement = 'bottom start',\n    virtualized = false,\n    maxWidth,\n    maxHeight,\n    style,\n    ...rest\n  } = cleanedProps;\n\n  let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');\n\n  const menuContent = (\n    <RAMenu\n      className={clsx(classNames.content, styles[classNames.content])}\n      renderEmptyState={() => <MenuEmptyState />}\n      style={{ width: newMaxWidth, maxHeight, ...style }}\n      {...rest}\n    />\n  );\n\n  return (\n    <RoutingProvider>\n      <RAPopover\n        className={clsx(\n          classNames.popover,\n          styles[classNames.popover],\n          className,\n        )}\n        placement={placement}\n      >\n        {virtualized ? (\n          <Virtualizer\n            layout={ListLayout}\n            layoutOptions={{\n              rowHeight,\n            }}\n          >\n            {menuContent}\n          </Virtualizer>\n        ) : (\n          menuContent\n        )}\n      </RAPopover>\n    </RoutingProvider>\n  );\n};\n\n/** @public */\nexport const MenuListBox = (props: MenuListBoxProps<object>) => {\n  const { classNames, cleanedProps } = useStyles(MenuDefinition, props);\n  const {\n    className,\n    selectionMode = 'single',\n    placement = 'bottom start',\n    virtualized = false,\n    maxWidth,\n    maxHeight,\n    style,\n    ...rest\n  } = cleanedProps;\n  let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');\n\n  const listBoxContent = (\n    <RAListBox\n      className={clsx(classNames.content, styles[classNames.content])}\n      selectionMode={selectionMode}\n      style={{ width: newMaxWidth, maxHeight, ...style }}\n      {...rest}\n    />\n  );\n\n  return (\n    <RAPopover\n      className={clsx(\n        classNames.popover,\n        styles[classNames.popover],\n        className,\n      )}\n      placement={placement}\n    >\n      {virtualized ? (\n        <Virtualizer\n          layout={ListLayout}\n          layoutOptions={{\n            rowHeight,\n          }}\n        >\n          {listBoxContent}\n        </Virtualizer>\n      ) : (\n        listBoxContent\n      )}\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuAutocomplete = (props: MenuAutocompleteProps<object>) => {\n  const { classNames, cleanedProps } = useStyles(MenuDefinition, props);\n  const {\n    className,\n    placement = 'bottom start',\n    virtualized = false,\n    maxWidth,\n    maxHeight,\n    style,\n    ...rest\n  } = cleanedProps;\n  const { contains } = useFilter({ sensitivity: 'base' });\n  let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');\n\n  const menuContent = (\n    <RAMenu\n      className={clsx(classNames.content, styles[classNames.content])}\n      renderEmptyState={() => <MenuEmptyState />}\n      style={{ width: newMaxWidth, maxHeight, ...style }}\n      {...rest}\n    />\n  );\n\n  return (\n    <RoutingProvider>\n      <RAPopover\n        className={clsx(\n          classNames.popover,\n          styles[classNames.popover],\n          className,\n        )}\n        placement={placement}\n      >\n        <RAAutocomplete filter={contains}>\n          <RASearchField\n            className={clsx(\n              classNames.searchField,\n              styles[classNames.searchField],\n            )}\n            aria-label={props.placeholder || 'Search'}\n          >\n            <RAInput\n              className={clsx(\n                classNames.searchFieldInput,\n                styles[classNames.searchFieldInput],\n              )}\n              placeholder={props.placeholder || 'Search...'}\n            />\n            <RAButton\n              className={clsx(\n                classNames.searchFieldClear,\n                styles[classNames.searchFieldClear],\n              )}\n            >\n              <RiCloseCircleLine />\n            </RAButton>\n          </RASearchField>\n          {virtualized ? (\n            <Virtualizer\n              layout={ListLayout}\n              layoutOptions={{\n                rowHeight,\n              }}\n            >\n              {menuContent}\n            </Virtualizer>\n          ) : (\n            menuContent\n          )}\n        </RAAutocomplete>\n      </RAPopover>\n    </RoutingProvider>\n  );\n};\n\n/** @public */\nexport const MenuAutocompleteListbox = (\n  props: MenuAutocompleteListBoxProps<object>,\n) => {\n  const { classNames, cleanedProps } = useStyles(MenuDefinition, props);\n  const {\n    className,\n    selectionMode = 'single',\n    placement = 'bottom start',\n    virtualized = false,\n    maxWidth,\n    maxHeight,\n    style,\n    ...rest\n  } = cleanedProps;\n  const { contains } = useFilter({ sensitivity: 'base' });\n  let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');\n\n  const listBoxContent = (\n    <RAListBox\n      className={clsx(classNames.content, styles[classNames.content])}\n      renderEmptyState={() => <MenuEmptyState />}\n      selectionMode={selectionMode}\n      style={{ width: newMaxWidth, maxHeight, ...style }}\n      {...rest}\n    />\n  );\n\n  return (\n    <RAPopover\n      className={clsx(\n        classNames.popover,\n        styles[classNames.popover],\n        className,\n      )}\n      placement={placement}\n    >\n      <RAAutocomplete filter={contains}>\n        <RASearchField\n          className={clsx(\n            classNames.searchField,\n            styles[classNames.searchField],\n          )}\n          aria-label={props.placeholder || 'Search'}\n        >\n          <RAInput\n            className={clsx(\n              classNames.searchFieldInput,\n              styles[classNames.searchFieldInput],\n            )}\n            placeholder={props.placeholder || 'Search...'}\n          />\n          <RAButton\n            className={clsx(\n              classNames.searchFieldClear,\n              styles[classNames.searchFieldClear],\n            )}\n          >\n            <RiCloseCircleLine />\n          </RAButton>\n        </RASearchField>\n        {virtualized ? (\n          <Virtualizer\n            layout={ListLayout}\n            layoutOptions={{\n              rowHeight,\n            }}\n          >\n            {listBoxContent}\n          </Virtualizer>\n        ) : (\n          listBoxContent\n        )}\n      </RAAutocomplete>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuItem = (props: MenuItemProps) => {\n  const { classNames, cleanedProps } = useStyles(MenuDefinition, props);\n  const {\n    className,\n    iconStart,\n    color = 'primary',\n    children,\n    href,\n    ...rest\n  } = cleanedProps;\n\n  useRoutingRegistrationEffect(href);\n\n  // External links open in new tab via window.open instead of client-side routing\n  if (href && !isInternalLink(href)) {\n    return (\n      <RAMenuItem\n        className={clsx(classNames.item, styles[classNames.item], className)}\n        data-color={color}\n        textValue={typeof children === 'string' ? children : undefined}\n        onAction={() => window.open(href, '_blank', 'noopener,noreferrer')}\n        {...rest}\n      >\n        <div\n          className={clsx(\n            classNames.itemWrapper,\n            styles[classNames.itemWrapper],\n          )}\n        >\n          <div\n            className={clsx(\n              classNames.itemContent,\n              styles[classNames.itemContent],\n            )}\n          >\n            {iconStart}\n            {children}\n          </div>\n          <div\n            className={clsx(classNames.itemArrow, styles[classNames.itemArrow])}\n          >\n            <RiArrowRightSLine />\n          </div>\n        </div>\n      </RAMenuItem>\n    );\n  }\n\n  return (\n    <RAMenuItem\n      className={clsx(classNames.item, styles[classNames.item], className)}\n      data-color={color}\n      href={href}\n      textValue={typeof children === 'string' ? children : undefined}\n      {...rest}\n    >\n      <div\n        className={clsx(classNames.itemWrapper, styles[classNames.itemWrapper])}\n      >\n        <div\n          className={clsx(\n            classNames.itemContent,\n            styles[classNames.itemContent],\n          )}\n        >\n          {iconStart}\n          {children}\n        </div>\n        <div\n          className={clsx(classNames.itemArrow, styles[classNames.itemArrow])}\n        >\n          <RiArrowRightSLine />\n        </div>\n      </div>\n    </RAMenuItem>\n  );\n};\n\n/** @public */\nexport const MenuListBoxItem = (props: MenuListBoxItemProps) => {\n  const { classNames, cleanedProps } = useStyles(MenuDefinition, props);\n  const { children, className, ...rest } = cleanedProps;\n\n  return (\n    <RAListBoxItem\n      textValue={\n        typeof props.children === 'string' ? props.children : undefined\n      }\n      className={clsx(\n        classNames.itemListBox,\n        styles[classNames.itemListBox],\n        className,\n      )}\n      {...rest}\n    >\n      <div\n        className={clsx(classNames.itemWrapper, styles[classNames.itemWrapper])}\n      >\n        <div\n          className={clsx(\n            classNames.itemContent,\n            styles[classNames.itemContent],\n          )}\n        >\n          <div\n            className={clsx(\n              classNames.itemListBoxCheck,\n              styles[classNames.itemListBoxCheck],\n            )}\n          >\n            <RiCheckLine />\n          </div>\n          {children}\n        </div>\n      </div>\n    </RAListBoxItem>\n  );\n};\n\n/** @public */\nexport const MenuSection = (props: MenuSectionProps<object>) => {\n  const { classNames, cleanedProps } = useStyles(MenuDefinition, props);\n  const { children, className, title, ...rest } = cleanedProps;\n\n  return (\n    <RAMenuSection\n      className={clsx(\n        classNames.section,\n        styles[classNames.section],\n        className,\n      )}\n      {...rest}\n    >\n      <RAMenuHeader\n        className={clsx(\n          classNames.sectionHeader,\n          styles[classNames.sectionHeader],\n        )}\n      >\n        {title}\n      </RAMenuHeader>\n      {children}\n    </RAMenuSection>\n  );\n};\n\n/** @public */\nexport const MenuSeparator = (props: MenuSeparatorProps) => {\n  const { classNames, cleanedProps } = useStyles(MenuDefinition, props);\n  const { className, ...rest } = cleanedProps;\n\n  return (\n    <RAMenuSeparator\n      className={clsx(\n        classNames.separator,\n        styles[classNames.separator],\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n"],"names":["RAMenuTrigger","RAMenuSubmenuTrigger","RAMenu","RAPopover","RAListBox","RAAutocomplete","RASearchField","RAInput","RAButton","RAMenuItem","RAListBoxItem","RAMenuSection","RAMenuHeader","RAMenuSeparator"],"mappings":"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"}
+{"version":3,"file":"Menu.esm.js","sources":["../../../src/components/Menu/Menu.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  MenuTrigger as RAMenuTrigger,\n  Popover as RAPopover,\n  MenuItem as RAMenuItem,\n  Menu as RAMenu,\n  MenuSection as RAMenuSection,\n  Header as RAMenuHeader,\n  Separator as RAMenuSeparator,\n  SubmenuTrigger as RAMenuSubmenuTrigger,\n  Autocomplete as RAAutocomplete,\n  SearchField as RASearchField,\n  Input as RAInput,\n  Button as RAButton,\n  ListBox as RAListBox,\n  ListBoxItem as RAListBoxItem,\n  useFilter,\n  Virtualizer,\n  ListLayout,\n} from 'react-aria-components';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n  MenuDefinition,\n  MenuListBoxDefinition,\n  MenuAutocompleteDefinition,\n  MenuAutocompleteListboxDefinition,\n  MenuItemDefinition,\n  MenuListBoxItemDefinition,\n  MenuSectionDefinition,\n  MenuSeparatorDefinition,\n  MenuEmptyStateDefinition,\n} from './definition';\nimport type {\n  MenuTriggerProps,\n  SubmenuTriggerProps,\n  MenuProps,\n  MenuAutocompleteProps,\n  MenuItemProps,\n  MenuSectionProps,\n  MenuSeparatorProps,\n  MenuListBoxProps,\n  MenuListBoxItemProps,\n  MenuAutocompleteListBoxProps,\n} from './types';\nimport {\n  RiArrowRightSLine,\n  RiCheckLine,\n  RiCloseCircleLine,\n} from '@remixicon/react';\nimport {\n  isInternalLink,\n  createRoutingRegistration,\n} from '../InternalLinkProvider';\nimport { Box } from '../Box';\nimport { BgReset } from '../../hooks/useBg';\n\nconst { RoutingProvider, useRoutingRegistrationEffect } =\n  createRoutingRegistration();\n\n// The height will be used for virtualized menus. It should match the size set in CSS for each menu item.\nconst rowHeight = 32;\n\nconst MenuEmptyState = () => {\n  const { ownProps } = useDefinition(MenuEmptyStateDefinition, {});\n\n  return <div className={ownProps.classes.root}>No results found.</div>;\n};\n\n/** @public */\nexport const MenuTrigger = (props: MenuTriggerProps) => {\n  return <RAMenuTrigger {...props} />;\n};\n\n/** @public */\nexport const SubmenuTrigger = (props: SubmenuTriggerProps) => {\n  return <RAMenuSubmenuTrigger {...props} />;\n};\n\n/** @public */\nexport const Menu = (props: MenuProps<object>) => {\n  const { ownProps, restProps } = useDefinition(MenuDefinition, props);\n  const { classes, placement, virtualized, maxWidth, maxHeight, style } =\n    ownProps;\n\n  let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');\n\n  const menuContent = (\n    <RAMenu\n      className={classes.content}\n      renderEmptyState={() => <MenuEmptyState />}\n      style={{ width: newMaxWidth, maxHeight, ...style }}\n      {...restProps}\n    />\n  );\n\n  return (\n    <RoutingProvider>\n      <RAPopover className={classes.root} placement={placement}>\n        <BgReset>\n          <Box bg=\"neutral\" className={classes.inner}>\n            {virtualized ? (\n              <Virtualizer\n                layout={ListLayout}\n                layoutOptions={{\n                  rowHeight,\n                }}\n              >\n                {menuContent}\n              </Virtualizer>\n            ) : (\n              menuContent\n            )}\n          </Box>\n        </BgReset>\n      </RAPopover>\n    </RoutingProvider>\n  );\n};\n\n/** @public */\nexport const MenuListBox = (props: MenuListBoxProps<object>) => {\n  const { ownProps, restProps } = useDefinition(MenuListBoxDefinition, props);\n  const {\n    classes,\n    selectionMode,\n    placement,\n    virtualized,\n    maxWidth,\n    maxHeight,\n    style,\n  } = ownProps;\n  let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');\n\n  const listBoxContent = (\n    <RAListBox\n      className={classes.content}\n      selectionMode={selectionMode}\n      style={{ width: newMaxWidth, maxHeight, ...style }}\n      {...restProps}\n    />\n  );\n\n  return (\n    <RAPopover className={classes.root} placement={placement}>\n      <BgReset>\n        <Box bg=\"neutral\" className={classes.inner}>\n          {virtualized ? (\n            <Virtualizer\n              layout={ListLayout}\n              layoutOptions={{\n                rowHeight,\n              }}\n            >\n              {listBoxContent}\n            </Virtualizer>\n          ) : (\n            listBoxContent\n          )}\n        </Box>\n      </BgReset>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuAutocomplete = (props: MenuAutocompleteProps<object>) => {\n  const { ownProps, restProps } = useDefinition(\n    MenuAutocompleteDefinition,\n    props,\n  );\n  const {\n    classes,\n    placement,\n    virtualized,\n    maxWidth,\n    maxHeight,\n    style,\n    placeholder,\n  } = ownProps;\n  const { contains } = useFilter({ sensitivity: 'base' });\n  let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');\n\n  const menuContent = (\n    <RAMenu\n      className={classes.content}\n      renderEmptyState={() => <MenuEmptyState />}\n      style={{ width: newMaxWidth, maxHeight, ...style }}\n      {...restProps}\n    />\n  );\n\n  return (\n    <RoutingProvider>\n      <RAPopover className={classes.root} placement={placement}>\n        <BgReset>\n          <Box bg=\"neutral\" className={classes.inner}>\n            <RAAutocomplete filter={contains}>\n              <RASearchField\n                className={classes.searchField}\n                aria-label={placeholder || 'Search'}\n              >\n                <RAInput\n                  className={classes.searchFieldInput}\n                  placeholder={placeholder || 'Search...'}\n                />\n                <RAButton className={classes.searchFieldClear}>\n                  <RiCloseCircleLine />\n                </RAButton>\n              </RASearchField>\n              {virtualized ? (\n                <Virtualizer\n                  layout={ListLayout}\n                  layoutOptions={{\n                    rowHeight,\n                  }}\n                >\n                  {menuContent}\n                </Virtualizer>\n              ) : (\n                menuContent\n              )}\n            </RAAutocomplete>\n          </Box>\n        </BgReset>\n      </RAPopover>\n    </RoutingProvider>\n  );\n};\n\n/** @public */\nexport const MenuAutocompleteListbox = (\n  props: MenuAutocompleteListBoxProps<object>,\n) => {\n  const { ownProps, restProps } = useDefinition(\n    MenuAutocompleteListboxDefinition,\n    props,\n  );\n  const {\n    classes,\n    selectionMode,\n    placement,\n    virtualized,\n    maxWidth,\n    maxHeight,\n    style,\n    placeholder,\n  } = ownProps;\n  const { contains } = useFilter({ sensitivity: 'base' });\n  let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');\n\n  const listBoxContent = (\n    <RAListBox\n      className={classes.content}\n      renderEmptyState={() => <MenuEmptyState />}\n      selectionMode={selectionMode}\n      style={{ width: newMaxWidth, maxHeight, ...style }}\n      {...restProps}\n    />\n  );\n\n  return (\n    <RAPopover className={classes.root} placement={placement}>\n      <BgReset>\n        <Box bg=\"neutral\" className={classes.inner}>\n          <RAAutocomplete filter={contains}>\n            <RASearchField\n              className={classes.searchField}\n              aria-label={placeholder || 'Search'}\n            >\n              <RAInput\n                className={classes.searchFieldInput}\n                placeholder={placeholder || 'Search...'}\n              />\n              <RAButton className={classes.searchFieldClear}>\n                <RiCloseCircleLine />\n              </RAButton>\n            </RASearchField>\n            {virtualized ? (\n              <Virtualizer\n                layout={ListLayout}\n                layoutOptions={{\n                  rowHeight,\n                }}\n              >\n                {listBoxContent}\n              </Virtualizer>\n            ) : (\n              listBoxContent\n            )}\n          </RAAutocomplete>\n        </Box>\n      </BgReset>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuItem = (props: MenuItemProps) => {\n  const { ownProps, restProps, dataAttributes } = useDefinition(\n    MenuItemDefinition,\n    props,\n  );\n  const { classes, iconStart, children, href } = ownProps;\n\n  useRoutingRegistrationEffect(href);\n\n  // External links open in new tab via window.open instead of client-side routing\n  if (href && !isInternalLink(href)) {\n    return (\n      <RAMenuItem\n        className={classes.root}\n        {...dataAttributes}\n        textValue={typeof children === 'string' ? children : undefined}\n        onAction={() => window.open(href, '_blank', 'noopener,noreferrer')}\n        {...restProps}\n      >\n        <div className={classes.itemWrapper}>\n          <div className={classes.itemContent}>\n            {iconStart}\n            {children}\n          </div>\n          <div className={classes.itemArrow}>\n            <RiArrowRightSLine />\n          </div>\n        </div>\n      </RAMenuItem>\n    );\n  }\n\n  return (\n    <RAMenuItem\n      className={classes.root}\n      {...dataAttributes}\n      href={href}\n      textValue={typeof children === 'string' ? children : undefined}\n      {...restProps}\n    >\n      <div className={classes.itemWrapper}>\n        <div className={classes.itemContent}>\n          {iconStart}\n          {children}\n        </div>\n        <div className={classes.itemArrow}>\n          <RiArrowRightSLine />\n        </div>\n      </div>\n    </RAMenuItem>\n  );\n};\n\n/** @public */\nexport const MenuListBoxItem = (props: MenuListBoxItemProps) => {\n  const { ownProps, restProps } = useDefinition(\n    MenuListBoxItemDefinition,\n    props,\n  );\n  const { classes, children } = ownProps;\n\n  return (\n    <RAListBoxItem\n      textValue={typeof children === 'string' ? children : undefined}\n      className={classes.root}\n      {...restProps}\n    >\n      <div className={classes.itemWrapper}>\n        <div className={classes.itemContent}>\n          <div className={classes.check}>\n            <RiCheckLine />\n          </div>\n          {children}\n        </div>\n      </div>\n    </RAListBoxItem>\n  );\n};\n\n/** @public */\nexport const MenuSection = (props: MenuSectionProps<object>) => {\n  const { ownProps, restProps } = useDefinition(MenuSectionDefinition, props);\n  const { classes, children, title } = ownProps;\n\n  return (\n    <RAMenuSection className={classes.root} {...restProps}>\n      <RAMenuHeader className={classes.header}>{title}</RAMenuHeader>\n      {children}\n    </RAMenuSection>\n  );\n};\n\n/** @public */\nexport const MenuSeparator = (props: MenuSeparatorProps) => {\n  const { ownProps, restProps } = useDefinition(MenuSeparatorDefinition, props);\n\n  return <RAMenuSeparator className={ownProps.classes.root} {...restProps} />;\n};\n"],"names":["RAMenuTrigger","RAMenuSubmenuTrigger","RAMenu","RAPopover","RAListBox","RAAutocomplete","RASearchField","RAInput","RAButton","RAMenuItem","RAListBoxItem","RAMenuSection","RAMenuHeader","RAMenuSeparator"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Menu_bui-MenuPopover__3ab632bf18 {\n    display: flex;\n    flex-direction: column;\n    box-shadow: var(--bui-shadow);\n    border: 1px solid var(--bui-border-1);\n    border-radius: var(--bui-radius-2);\n    background: var(--bui-bg-popover);\n    color: var(--bui-fg-primary);\n    outline: none;\n    transition: transform 200ms, opacity 200ms;\n    /* Let React Aria handle height constraints naturally */\n    min-height: 0;\n    /* Remove overflow from popover since ScrollArea will handle it */\n    overflow: hidden;\n\n    &[data-entering],\n    &[data-exiting] {\n      transform: var(--origin);\n      opacity: 0;\n    }\n\n    &[data-placement='top'] {\n      --origin: translateY(8px);\n    }\n\n    &[data-placement='bottom'] {\n      --origin: translateY(-8px);\n    }\n\n    &[data-placement='right'] {\n      --origin: translateX(-8px);\n    }\n\n    &[data-placement='left'] {\n      --origin: translateX(8px);\n    }\n  }\n\n  .Menu_bui-MenuContent__3ab632bf18 {\n    max-height: inherit;\n    box-sizing: border-box;\n    overflow: auto;\n    min-width: 150px;\n    box-sizing: border-box;\n    outline: none;\n    padding-block: var(--bui-space-1);\n  }\n\n  .Menu_bui-MenuItem__3ab632bf18 {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &[data-focused] .Menu_bui-MenuItemWrapper__3ab632bf18 {\n      background: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-open] .Menu_bui-MenuItemWrapper__3ab632bf18 {\n      background: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-color='danger'] .Menu_bui-MenuItemWrapper__3ab632bf18 {\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-color='danger'][data-focused] .Menu_bui-MenuItemWrapper__3ab632bf18 {\n      background: var(--bui-bg-danger);\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-has-submenu] {\n      & > .Menu_bui-MenuItemWrapper__3ab632bf18 > .Menu_bui-MenuItemArrow__3ab632bf18 {\n        display: block;\n      }\n    }\n  }\n\n  .Menu_bui-MenuItemWrapper__3ab632bf18 {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    height: 2rem;\n    padding-inline: var(--bui-space-2);\n    border-radius: var(--bui-radius-2);\n    outline: none;\n    cursor: default;\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-3);\n    gap: var(--bui-space-6);\n  }\n\n  .Menu_bui-MenuItemListBox__3ab632bf18 {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &:hover .Menu_bui-MenuItemWrapper__3ab632bf18 {\n      background: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-selected] .Menu_bui-MenuItemListBoxCheck__3ab632bf18 {\n      & > svg {\n        opacity: 1;\n        color: var(--bui-fg-primary);\n      }\n    }\n  }\n\n  .Menu_bui-MenuItemListBoxCheck__3ab632bf18 {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      opacity: 0;\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu_bui-MenuItemContent__3ab632bf18 {\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu_bui-MenuItemArrow__3ab632bf18 {\n    display: none;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu_bui-MenuSection__3ab632bf18 {\n    &:first-child .Menu_bui-MenuSectionHeader__3ab632bf18 {\n      padding-top: 0;\n    }\n  }\n\n  .Menu_bui-MenuSectionHeader__3ab632bf18 {\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    padding-top: var(--bui-space-3);\n    padding-left: var(--bui-space-3);\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-1);\n    font-weight: bold;\n    letter-spacing: 0.05rem;\n    text-transform: uppercase;\n  }\n\n  .Menu_bui-MenuSeparator__3ab632bf18 {\n    height: 1px;\n    background: var(--bui-border-1);\n    margin-inline: var(--bui-space-1_5);\n    margin-block: var(--bui-space-1);\n  }\n\n  .Menu_bui-MenuSearchField__3ab632bf18 {\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid var(--bui-border-1);\n    background-color: var(--bui-bg-neutral-1);\n    height: 2rem;\n\n    &[data-empty] {\n      .Menu_bui-MenuSearchFieldClear__3ab632bf18 {\n        visibility: hidden;\n      }\n    }\n  }\n\n  .Menu_bui-MenuSearchFieldInput__3ab632bf18 {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0;\n    border: none;\n    background-color: transparent;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    width: 100%;\n    height: 100%;\n    outline: none;\n    cursor: inherit;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &:first-child {\n      padding-inline: var(--bui-space-3) 0;\n    }\n  }\n\n  .Menu_bui-MenuSearchFieldClear__3ab632bf18 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n    width: 2rem;\n    height: 2rem;\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu_bui-MenuEmptyState__3ab632bf18 {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    color: var(--bui-fg-secondary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n  }\n}\n";
-var styles = {"bui-MenuPopover":"Menu_bui-MenuPopover__3ab632bf18","bui-MenuContent":"Menu_bui-MenuContent__3ab632bf18","bui-MenuItem":"Menu_bui-MenuItem__3ab632bf18","bui-MenuItemWrapper":"Menu_bui-MenuItemWrapper__3ab632bf18","bui-MenuItemArrow":"Menu_bui-MenuItemArrow__3ab632bf18","bui-MenuItemListBox":"Menu_bui-MenuItemListBox__3ab632bf18","bui-MenuItemListBoxCheck":"Menu_bui-MenuItemListBoxCheck__3ab632bf18","bui-MenuItemContent":"Menu_bui-MenuItemContent__3ab632bf18","bui-MenuSection":"Menu_bui-MenuSection__3ab632bf18","bui-MenuSectionHeader":"Menu_bui-MenuSectionHeader__3ab632bf18","bui-MenuSeparator":"Menu_bui-MenuSeparator__3ab632bf18","bui-MenuSearchField":"Menu_bui-MenuSearchField__3ab632bf18","bui-MenuSearchFieldClear":"Menu_bui-MenuSearchFieldClear__3ab632bf18","bui-MenuSearchFieldInput":"Menu_bui-MenuSearchFieldInput__3ab632bf18","bui-MenuEmptyState":"Menu_bui-MenuEmptyState__3ab632bf18"};
+var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Menu_bui-MenuPopover__4a32956efb {\n    --menu-border-radius: var(--bui-radius-2);\n    display: flex;\n    flex-direction: column;\n    box-shadow: var(--bui-shadow);\n    border: 1px solid var(--bui-border-1);\n    border-radius: var(--menu-border-radius);\n    background: var(--bui-bg-app);\n    color: var(--bui-fg-primary);\n    outline: none;\n    transition: transform 200ms, opacity 200ms;\n    /* Let React Aria handle height constraints naturally */\n    min-height: 0;\n    /* Remove overflow from popover since ScrollArea will handle it */\n    overflow: hidden;\n\n    &[data-entering],\n    &[data-exiting] {\n      transform: var(--origin);\n      opacity: 0;\n    }\n\n    &[data-placement='top'] {\n      --origin: translateY(8px);\n    }\n\n    &[data-placement='bottom'] {\n      --origin: translateY(-8px);\n    }\n\n    &[data-placement='right'] {\n      --origin: translateX(-8px);\n    }\n\n    &[data-placement='left'] {\n      --origin: translateX(8px);\n    }\n  }\n\n  .Menu_bui-MenuInner__4a32956efb {\n    border-radius: var(--menu-border-radius);\n    display: flex;\n    flex-direction: column;\n    min-height: 0;\n    overflow: hidden;\n  }\n\n  .Menu_bui-MenuContent__4a32956efb {\n    max-height: inherit;\n    box-sizing: border-box;\n    overflow: auto;\n    min-width: 150px;\n    box-sizing: border-box;\n    outline: none;\n    padding-block: var(--bui-space-1);\n  }\n\n  .Menu_bui-MenuItem__4a32956efb {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &:focus-visible {\n      outline: none;\n    }\n\n    &[data-focus-visible] {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: -2px;\n    }\n\n    &[data-focused] .Menu_bui-MenuItemWrapper__4a32956efb {\n      background: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-open] .Menu_bui-MenuItemWrapper__4a32956efb {\n      background: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-color='danger'] .Menu_bui-MenuItemWrapper__4a32956efb {\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-color='danger'][data-focused] .Menu_bui-MenuItemWrapper__4a32956efb {\n      background: var(--bui-bg-danger);\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-has-submenu] {\n      & > .Menu_bui-MenuItemWrapper__4a32956efb > .Menu_bui-MenuItemArrow__4a32956efb {\n        display: block;\n      }\n    }\n  }\n\n  .Menu_bui-MenuItemWrapper__4a32956efb {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    height: 2rem;\n    padding-inline: var(--bui-space-2);\n    border-radius: var(--bui-radius-2);\n    outline: none;\n    cursor: default;\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-3);\n    gap: var(--bui-space-6);\n  }\n\n  .Menu_bui-MenuItemListBox__4a32956efb {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &:hover .Menu_bui-MenuItemWrapper__4a32956efb {\n      background: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-selected] .Menu_bui-MenuItemListBoxCheck__4a32956efb {\n      & > svg {\n        opacity: 1;\n        color: var(--bui-fg-primary);\n      }\n    }\n  }\n\n  .Menu_bui-MenuItemListBoxCheck__4a32956efb {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      opacity: 0;\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu_bui-MenuItemContent__4a32956efb {\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu_bui-MenuItemArrow__4a32956efb {\n    display: none;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu_bui-MenuSection__4a32956efb {\n    &:first-child .Menu_bui-MenuSectionHeader__4a32956efb {\n      padding-top: 0;\n    }\n  }\n\n  .Menu_bui-MenuSectionHeader__4a32956efb {\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    padding-top: var(--bui-space-3);\n    padding-left: var(--bui-space-3);\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-1);\n    font-weight: bold;\n    letter-spacing: 0.05rem;\n    text-transform: uppercase;\n  }\n\n  .Menu_bui-MenuSeparator__4a32956efb {\n    height: 1px;\n    background: var(--bui-border-1);\n    margin-inline: var(--bui-space-1_5);\n    margin-block: var(--bui-space-1);\n  }\n\n  .Menu_bui-MenuSearchField__4a32956efb {\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid var(--bui-border-1);\n    background-color: var(--bui-bg-neutral-1);\n    height: 2rem;\n\n    &[data-empty] {\n      .Menu_bui-MenuSearchFieldClear__4a32956efb {\n        visibility: hidden;\n      }\n    }\n  }\n\n  .Menu_bui-MenuSearchFieldInput__4a32956efb {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0;\n    border: none;\n    background-color: transparent;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    width: 100%;\n    height: 100%;\n    outline: none;\n    cursor: inherit;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &:first-child {\n      padding-inline: var(--bui-space-3) 0;\n    }\n  }\n\n  .Menu_bui-MenuSearchFieldClear__4a32956efb {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n    width: 2rem;\n    height: 2rem;\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu_bui-MenuEmptyState__4a32956efb {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    color: var(--bui-fg-secondary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n  }\n}\n";
+var styles = {"bui-MenuPopover":"Menu_bui-MenuPopover__4a32956efb","bui-MenuInner":"Menu_bui-MenuInner__4a32956efb","bui-MenuContent":"Menu_bui-MenuContent__4a32956efb","bui-MenuItem":"Menu_bui-MenuItem__4a32956efb","bui-MenuItemWrapper":"Menu_bui-MenuItemWrapper__4a32956efb","bui-MenuItemArrow":"Menu_bui-MenuItemArrow__4a32956efb","bui-MenuItemListBox":"Menu_bui-MenuItemListBox__4a32956efb","bui-MenuItemListBoxCheck":"Menu_bui-MenuItemListBoxCheck__4a32956efb","bui-MenuItemContent":"Menu_bui-MenuItemContent__4a32956efb","bui-MenuSection":"Menu_bui-MenuSection__4a32956efb","bui-MenuSectionHeader":"Menu_bui-MenuSectionHeader__4a32956efb","bui-MenuSeparator":"Menu_bui-MenuSeparator__4a32956efb","bui-MenuSearchField":"Menu_bui-MenuSearchField__4a32956efb","bui-MenuSearchFieldClear":"Menu_bui-MenuSearchFieldClear__4a32956efb","bui-MenuSearchFieldInput":"Menu_bui-MenuSearchFieldInput__4a32956efb","bui-MenuEmptyState":"Menu_bui-MenuEmptyState__4a32956efb"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -1,23 +1,119 @@
-const MenuDefinition = {
+import 'react/jsx-runtime';
+import 'clsx';
+import '../../hooks/useBreakpoint.esm.js';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './Menu.module.css.esm.js';
+
+const menuPopoverClassNames = {
+  root: "bui-MenuPopover",
+  inner: "bui-MenuInner",
+  content: "bui-MenuContent"
+};
+const menuAutocompleteClassNames = {
+  ...menuPopoverClassNames,
+  searchField: "bui-MenuSearchField",
+  searchFieldInput: "bui-MenuSearchFieldInput",
+  searchFieldClear: "bui-MenuSearchFieldClear"
+};
+const menuPopoverPropDefs = {
+  placement: { default: "bottom start" },
+  virtualized: { default: false },
+  maxWidth: {},
+  maxHeight: {},
+  style: {},
+  className: {}
+};
+const MenuDefinition = defineComponent()({
+  styles,
+  classNames: menuPopoverClassNames,
+  propDefs: menuPopoverPropDefs
+});
+const MenuListBoxDefinition = defineComponent()({
+  styles,
+  classNames: menuPopoverClassNames,
+  propDefs: {
+    ...menuPopoverPropDefs,
+    selectionMode: { default: "single" }
+  }
+});
+const MenuAutocompleteDefinition = defineComponent()({
+  styles,
+  classNames: menuAutocompleteClassNames,
+  propDefs: {
+    ...menuPopoverPropDefs,
+    placeholder: {}
+  }
+});
+const MenuAutocompleteListboxDefinition = defineComponent()({
+  styles,
+  classNames: menuAutocompleteClassNames,
+  propDefs: {
+    ...menuPopoverPropDefs,
+    placeholder: {},
+    selectionMode: { default: "single" }
+  }
+});
+const MenuItemDefinition = defineComponent()({
+  styles,
   classNames: {
-    root: "bui-Menu",
-    popover: "bui-MenuPopover",
-    content: "bui-MenuContent",
-    section: "bui-MenuSection",
-    sectionHeader: "bui-MenuSectionHeader",
-    item: "bui-MenuItem",
-    itemListBox: "bui-MenuItemListBox",
-    itemListBoxCheck: "bui-MenuItemListBoxCheck",
+    root: "bui-MenuItem",
     itemWrapper: "bui-MenuItemWrapper",
     itemContent: "bui-MenuItemContent",
-    itemArrow: "bui-MenuItemArrow",
-    separator: "bui-MenuSeparator",
-    searchField: "bui-MenuSearchField",
-    searchFieldInput: "bui-MenuSearchFieldInput",
-    searchFieldClear: "bui-MenuSearchFieldClear",
-    emptyState: "bui-MenuEmptyState"
+    itemArrow: "bui-MenuItemArrow"
+  },
+  propDefs: {
+    iconStart: {},
+    children: {},
+    color: { dataAttribute: true, default: "primary" },
+    href: {},
+    className: {}
   }
-};
+});
+const MenuListBoxItemDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-MenuItemListBox",
+    itemWrapper: "bui-MenuItemWrapper",
+    itemContent: "bui-MenuItemContent",
+    check: "bui-MenuItemListBoxCheck"
+  },
+  propDefs: {
+    children: {},
+    className: {}
+  }
+});
+const MenuSectionDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-MenuSection",
+    header: "bui-MenuSectionHeader"
+  },
+  propDefs: {
+    title: {},
+    children: {},
+    className: {}
+  }
+});
+const MenuSeparatorDefinition = defineComponent()(
+  {
+    styles,
+    classNames: {
+      root: "bui-MenuSeparator"
+    },
+    propDefs: {
+      className: {}
+    }
+  }
+);
+const MenuEmptyStateDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-MenuEmptyState"
+  },
+  propDefs: {}
+});
 
-export { MenuDefinition };
+export { MenuAutocompleteDefinition, MenuAutocompleteListboxDefinition, MenuDefinition, MenuEmptyStateDefinition, MenuItemDefinition, MenuListBoxDefinition, MenuListBoxItemDefinition, MenuSectionDefinition, MenuSeparatorDefinition };
 //# sourceMappingURL=definition.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Menu/definition.ts"],"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 type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Menu\n * @public\n */\nexport const MenuDefinition = {\n  classNames: {\n    root: 'bui-Menu',\n    popover: 'bui-MenuPopover',\n    content: 'bui-MenuContent',\n    section: 'bui-MenuSection',\n    sectionHeader: 'bui-MenuSectionHeader',\n    item: 'bui-MenuItem',\n    itemListBox: 'bui-MenuItemListBox',\n    itemListBoxCheck: 'bui-MenuItemListBoxCheck',\n    itemWrapper: 'bui-MenuItemWrapper',\n    itemContent: 'bui-MenuItemContent',\n    itemArrow: 'bui-MenuItemArrow',\n    separator: 'bui-MenuSeparator',\n    searchField: 'bui-MenuSearchField',\n    searchFieldInput: 'bui-MenuSearchFieldInput',\n    searchFieldClear: 'bui-MenuSearchFieldClear',\n    emptyState: 'bui-MenuEmptyState',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,cAAA,GAAiB;AAAA,EAC5B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,UAAA;AAAA,IACN,OAAA,EAAS,iBAAA;AAAA,IACT,OAAA,EAAS,iBAAA;AAAA,IACT,OAAA,EAAS,iBAAA;AAAA,IACT,aAAA,EAAe,uBAAA;AAAA,IACf,IAAA,EAAM,cAAA;AAAA,IACN,WAAA,EAAa,qBAAA;AAAA,IACb,gBAAA,EAAkB,0BAAA;AAAA,IAClB,WAAA,EAAa,qBAAA;AAAA,IACb,WAAA,EAAa,qBAAA;AAAA,IACb,SAAA,EAAW,mBAAA;AAAA,IACX,SAAA,EAAW,mBAAA;AAAA,IACX,WAAA,EAAa,qBAAA;AAAA,IACb,gBAAA,EAAkB,0BAAA;AAAA,IAClB,gBAAA,EAAkB,0BAAA;AAAA,IAClB,UAAA,EAAY;AAAA;AAEhB;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Menu/definition.ts"],"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 { defineComponent } from '../../hooks/useDefinition';\nimport type {\n  MenuOwnProps,\n  MenuListBoxOwnProps,\n  MenuAutocompleteOwnProps,\n  MenuAutocompleteListBoxOwnProps,\n  MenuItemOwnProps,\n  MenuListBoxItemOwnProps,\n  MenuSectionOwnProps,\n  MenuSeparatorOwnProps,\n} from './types';\nimport styles from './Menu.module.css';\n\n// Shared classNames for all popover-based menu variants\nconst menuPopoverClassNames = {\n  root: 'bui-MenuPopover',\n  inner: 'bui-MenuInner',\n  content: 'bui-MenuContent',\n} as const;\n\n// Shared classNames for autocomplete menu variants\nconst menuAutocompleteClassNames = {\n  ...menuPopoverClassNames,\n  searchField: 'bui-MenuSearchField',\n  searchFieldInput: 'bui-MenuSearchFieldInput',\n  searchFieldClear: 'bui-MenuSearchFieldClear',\n} as const;\n\n// Shared propDefs for all popover-based menu variants\nconst menuPopoverPropDefs = {\n  placement: { default: 'bottom start' },\n  virtualized: { default: false },\n  maxWidth: {},\n  maxHeight: {},\n  style: {},\n  className: {},\n} as const;\n\n/**\n * Component definition for Menu\n * @public\n */\nexport const MenuDefinition = defineComponent<MenuOwnProps>()({\n  styles,\n  classNames: menuPopoverClassNames,\n  propDefs: menuPopoverPropDefs,\n});\n\n/** @internal */\nexport const MenuListBoxDefinition = defineComponent<MenuListBoxOwnProps>()({\n  styles,\n  classNames: menuPopoverClassNames,\n  propDefs: {\n    ...menuPopoverPropDefs,\n    selectionMode: { default: 'single' },\n  },\n});\n\n/** @internal */\nexport const MenuAutocompleteDefinition =\n  defineComponent<MenuAutocompleteOwnProps>()({\n    styles,\n    classNames: menuAutocompleteClassNames,\n    propDefs: {\n      ...menuPopoverPropDefs,\n      placeholder: {},\n    },\n  });\n\n/** @internal */\nexport const MenuAutocompleteListboxDefinition =\n  defineComponent<MenuAutocompleteListBoxOwnProps>()({\n    styles,\n    classNames: menuAutocompleteClassNames,\n    propDefs: {\n      ...menuPopoverPropDefs,\n      placeholder: {},\n      selectionMode: { default: 'single' },\n    },\n  });\n\n/** @internal */\nexport const MenuItemDefinition = defineComponent<MenuItemOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-MenuItem',\n    itemWrapper: 'bui-MenuItemWrapper',\n    itemContent: 'bui-MenuItemContent',\n    itemArrow: 'bui-MenuItemArrow',\n  },\n  propDefs: {\n    iconStart: {},\n    children: {},\n    color: { dataAttribute: true, default: 'primary' },\n    href: {},\n    className: {},\n  },\n});\n\n/** @internal */\nexport const MenuListBoxItemDefinition =\n  defineComponent<MenuListBoxItemOwnProps>()({\n    styles,\n    classNames: {\n      root: 'bui-MenuItemListBox',\n      itemWrapper: 'bui-MenuItemWrapper',\n      itemContent: 'bui-MenuItemContent',\n      check: 'bui-MenuItemListBoxCheck',\n    },\n    propDefs: {\n      children: {},\n      className: {},\n    },\n  });\n\n/** @internal */\nexport const MenuSectionDefinition = defineComponent<MenuSectionOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-MenuSection',\n    header: 'bui-MenuSectionHeader',\n  },\n  propDefs: {\n    title: {},\n    children: {},\n    className: {},\n  },\n});\n\n/** @internal */\nexport const MenuSeparatorDefinition = defineComponent<MenuSeparatorOwnProps>()(\n  {\n    styles,\n    classNames: {\n      root: 'bui-MenuSeparator',\n    },\n    propDefs: {\n      className: {},\n    },\n  },\n);\n\n/** @internal */\nexport const MenuEmptyStateDefinition = defineComponent<{}>()({\n  styles,\n  classNames: {\n    root: 'bui-MenuEmptyState',\n  },\n  propDefs: {},\n});\n"],"names":[],"mappings":"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"}

package/dist/components/PasswordField/PasswordField.esm.js

@@ -1,60 +1,37 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useEffect, useState } from 'react';
 import { TextField, Input, Button } from 'react-aria-components';
-import clsx from 'clsx';
 import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import '../FieldLabel/FieldLabel.module.css.esm.js';
 import { FieldError } from '../FieldError/FieldError.esm.js';
-import { useStyles } from '../../hooks/useStyles.esm.js';
+import '../FieldError/FieldError.module.css.esm.js';
 import { PasswordFieldDefinition } from './definition.esm.js';
 import { RiEyeLine, RiEyeOffLine } from '@remixicon/react';
-import stylesPasswordField from './PasswordField.module.css.esm.js';
 
 const PasswordField = forwardRef(
   (props, ref) => {
-    const {
-      label,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy
-    } = props;
+    const { ownProps, restProps, dataAttributes } = useDefinition(
+      PasswordFieldDefinition,
+      props
+    );
+    const { classes, label, icon, secondaryLabel, placeholder, description } = ownProps;
     useEffect(() => {
-      if (!label && !ariaLabel && !ariaLabelledBy) {
+      if (!label && !restProps["aria-label"] && !restProps["aria-labelledby"]) {
         console.warn(
           "PasswordField requires either a visible label, aria-label, or aria-labelledby for accessibility"
         );
       }
-    }, [label, ariaLabel, ariaLabelledBy]);
-    const {
-      classNames: classNamesPasswordField,
-      dataAttributes,
-      cleanedProps
-    } = useStyles(PasswordFieldDefinition, {
-      size: "small",
-      ...props
-    });
-    const {
-      className,
-      description,
-      icon,
-      isRequired,
-      secondaryLabel,
-      placeholder,
-      ...rest
-    } = cleanedProps;
-    const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
+    }, [label, restProps["aria-label"], restProps["aria-labelledby"]]);
+    const secondaryLabelText = secondaryLabel || (restProps.isRequired ? "Required" : null);
     const [isVisible, setIsVisible] = useState(false);
     return /* @__PURE__ */ jsxs(
       TextField,
       {
-        className: clsx(
-          classNamesPasswordField.root,
-          stylesPasswordField[classNamesPasswordField.root],
-          className
-        ),
+        className: classes.root,
         ...dataAttributes,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
         type: "password",
-        ...rest,
+        ...restProps,
         ref,
         children: [
           /* @__PURE__ */ jsx(
@@ -68,19 +45,13 @@ const PasswordField = forwardRef(
           /* @__PURE__ */ jsxs(
             "div",
             {
-              className: clsx(
-                classNamesPasswordField.inputWrapper,
-                stylesPasswordField[classNamesPasswordField.inputWrapper]
-              ),
+              className: classes.inputWrapper,
               "data-size": dataAttributes["data-size"],
               children: [
                 icon && /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: clsx(
-                      classNamesPasswordField.inputIcon,
-                      stylesPasswordField[classNamesPasswordField.inputIcon]
-                    ),
+                    className: classes.inputIcon,
                     "data-size": dataAttributes["data-size"],
                     "aria-hidden": "true",
                     children: icon
@@ -89,10 +60,7 @@ const PasswordField = forwardRef(
                 /* @__PURE__ */ jsx(
                   Input,
                   {
-                    className: clsx(
-                      classNamesPasswordField.input,
-                      stylesPasswordField[classNamesPasswordField.input]
-                    ),
+                    className: classes.input,
                     ...icon && { "data-icon": true },
                     placeholder,
                     type: isVisible ? "text" : "password"
@@ -107,10 +75,7 @@ const PasswordField = forwardRef(
                     "aria-controls": isVisible ? "text" : "password",
                     "aria-expanded": isVisible,
                     onPress: () => setIsVisible((v) => !v),
-                    className: clsx(
-                      classNamesPasswordField.inputVisibility,
-                      stylesPasswordField[classNamesPasswordField.inputVisibility]
-                    ),
+                    className: classes.inputVisibility,
                     children: isVisible ? /* @__PURE__ */ jsx(RiEyeLine, {}) : /* @__PURE__ */ jsx(RiEyeOffLine, {})
                   }
                 )

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.esm.js","sources":["../../../src/components/PasswordField/PasswordField.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, useState } from 'react';\nimport {\n  Input,\n  TextField as AriaTextField,\n  Button as RAButton,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\n\nimport type { PasswordFieldProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { PasswordFieldDefinition } from './definition';\nimport { RiEyeLine, RiEyeOffLine } from '@remixicon/react';\nimport stylesPasswordField from './PasswordField.module.css';\n\n/** @public */\nexport const PasswordField = forwardRef<HTMLDivElement, PasswordFieldProps>(\n  (props, ref) => {\n    const {\n      label,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n    } = props;\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'PasswordField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const {\n      classNames: classNamesPasswordField,\n      dataAttributes,\n      cleanedProps,\n    } = useStyles(PasswordFieldDefinition, {\n      size: 'small',\n      ...props,\n    });\n\n    const {\n      className,\n      description,\n      icon,\n      isRequired,\n      secondaryLabel,\n      placeholder,\n      ...rest\n    } = cleanedProps;\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    // Manage secret visibility toggle\n    const [isVisible, setIsVisible] = useState(false);\n\n    return (\n      <AriaTextField\n        className={clsx(\n          classNamesPasswordField.root,\n          stylesPasswordField[classNamesPasswordField.root],\n          className,\n        )}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        type=\"password\"\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={clsx(\n            classNamesPasswordField.inputWrapper,\n            stylesPasswordField[classNamesPasswordField.inputWrapper],\n          )}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon && (\n            <div\n              className={clsx(\n                classNamesPasswordField.inputIcon,\n                stylesPasswordField[classNamesPasswordField.inputIcon],\n              )}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon}\n            </div>\n          )}\n          <Input\n            className={clsx(\n              classNamesPasswordField.input,\n              stylesPasswordField[classNamesPasswordField.input],\n            )}\n            {...(icon && { 'data-icon': true })}\n            placeholder={placeholder}\n            type={isVisible ? 'text' : 'password'}\n          />\n          <RAButton\n            data-size={dataAttributes['data-size']}\n            data-variant={'tertiary'}\n            aria-label={isVisible ? 'Hide value' : 'Show value'}\n            aria-controls={isVisible ? 'text' : 'password'}\n            aria-expanded={isVisible}\n            onPress={() => setIsVisible(v => !v)}\n            className={clsx(\n              classNamesPasswordField.inputVisibility,\n              stylesPasswordField[classNamesPasswordField.inputVisibility],\n            )}\n          >\n            {isVisible ? <RiEyeLine /> : <RiEyeOffLine />}\n          </RAButton>\n        </div>\n        <FieldError />\n      </AriaTextField>\n    );\n  },\n);\n\nPasswordField.displayName = 'PasswordField';\n"],"names":["AriaTextField","RAButton"],"mappings":"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"}
+{"version":3,"file":"PasswordField.esm.js","sources":["../../../src/components/PasswordField/PasswordField.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, useState } from 'react';\nimport {\n  Input,\n  TextField as AriaTextField,\n  Button as RAButton,\n} from 'react-aria-components';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\n\nimport type { PasswordFieldProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { PasswordFieldDefinition } from './definition';\nimport { RiEyeLine, RiEyeOffLine } from '@remixicon/react';\n\n/** @public */\nexport const PasswordField = forwardRef<HTMLDivElement, PasswordFieldProps>(\n  (props, ref) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      PasswordFieldDefinition,\n      props,\n    );\n    const { classes, label, icon, secondaryLabel, placeholder, description } =\n      ownProps;\n\n    useEffect(() => {\n      if (!label && !restProps['aria-label'] && !restProps['aria-labelledby']) {\n        console.warn(\n          'PasswordField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, restProps['aria-label'], restProps['aria-labelledby']]);\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (restProps.isRequired ? 'Required' : null);\n\n    // Manage secret visibility toggle\n    const [isVisible, setIsVisible] = useState(false);\n\n    return (\n      <AriaTextField\n        className={classes.root}\n        {...dataAttributes}\n        type=\"password\"\n        {...restProps}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={classes.inputWrapper}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon && (\n            <div\n              className={classes.inputIcon}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon}\n            </div>\n          )}\n          <Input\n            className={classes.input}\n            {...(icon && { 'data-icon': true })}\n            placeholder={placeholder}\n            type={isVisible ? 'text' : 'password'}\n          />\n          <RAButton\n            data-size={dataAttributes['data-size']}\n            data-variant={'tertiary'}\n            aria-label={isVisible ? 'Hide value' : 'Show value'}\n            aria-controls={isVisible ? 'text' : 'password'}\n            aria-expanded={isVisible}\n            onPress={() => setIsVisible(v => !v)}\n            className={classes.inputVisibility}\n          >\n            {isVisible ? <RiEyeLine /> : <RiEyeOffLine />}\n          </RAButton>\n        </div>\n        <FieldError />\n      </AriaTextField>\n    );\n  },\n);\n\nPasswordField.displayName = 'PasswordField';\n"],"names":["AriaTextField","RAButton"],"mappings":";;;;;;;;;;;AA+BO,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,uBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAO,MAAM,cAAA,EAAgB,WAAA,EAAa,aAAY,GACrE,QAAA;AAEF,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,SAAS,CAAC,SAAA,CAAU,YAAY,CAAA,IAAK,CAAC,SAAA,CAAU,iBAAiB,CAAA,EAAG;AACvE,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,CAAU,YAAY,CAAA,EAAG,SAAA,CAAU,iBAAiB,CAAC,CAAC,CAAA;AAGjE,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,SAAA,CAAU,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAGzD,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAEhD,IAAA,uBACE,IAAA;AAAA,MAACA,SAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,IAAA;AAAA,QAClB,GAAG,cAAA;AAAA,QACJ,IAAA,EAAK,UAAA;AAAA,QACJ,GAAG,SAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAA,EAAgB,kBAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BACA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,OAAA,CAAQ,YAAA;AAAA,cACnB,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,cAEpC,QAAA,EAAA;AAAA,gBAAA,IAAA,oBACC,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,OAAA,CAAQ,SAAA;AAAA,oBACnB,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBACrC,aAAA,EAAY,MAAA;AAAA,oBAEX,QAAA,EAAA;AAAA;AAAA,iBACH;AAAA,gCAEF,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,OAAA,CAAQ,KAAA;AAAA,oBAClB,GAAI,IAAA,IAAQ,EAAE,WAAA,EAAa,IAAA,EAAK;AAAA,oBACjC,WAAA;AAAA,oBACA,IAAA,EAAM,YAAY,MAAA,GAAS;AAAA;AAAA,iBAC7B;AAAA,gCACA,GAAA;AAAA,kBAACC,MAAA;AAAA,kBAAA;AAAA,oBACC,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBACrC,cAAA,EAAc,UAAA;AAAA,oBACd,YAAA,EAAY,YAAY,YAAA,GAAe,YAAA;AAAA,oBACvC,eAAA,EAAe,YAAY,MAAA,GAAS,UAAA;AAAA,oBACpC,eAAA,EAAe,SAAA;AAAA,oBACf,OAAA,EAAS,MAAM,YAAA,CAAa,CAAA,CAAA,KAAK,CAAC,CAAC,CAAA;AAAA,oBACnC,WAAW,OAAA,CAAQ,eAAA;AAAA,oBAElB,QAAA,EAAA,SAAA,mBAAY,GAAA,CAAC,SAAA,EAAA,EAAU,CAAA,uBAAM,YAAA,EAAA,EAAa;AAAA;AAAA;AAC7C;AAAA;AAAA,WACF;AAAA,8BACC,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,EAEJ;AACF;AAEA,aAAA,CAAc,WAAA,GAAc,eAAA;;;;"}

package/dist/components/PasswordField/PasswordField.module.css.esm.js

@@ -1,8 +1,8 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
 var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .PasswordField_bui-PasswordField__aa0b36a0a3 {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n\n    &[data-size='small'] {\n      --password-field-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --password-field-item-height: 2.5rem;\n    }\n  }\n\n  .PasswordField_bui-PasswordFieldInputWrapper__aa0b36a0a3 {\n    display: flex;\n    align-items: center;\n    border-radius: var(--bui-radius-2);\n    border: 1px solid var(--bui-border-2);\n    background-color: var(--bui-bg-neutral-1);\n    transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n\n    &[data-size='small'] {\n      height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      height: 2.5rem;\n    }\n\n    &:has([data-invalid]) {\n      border-color: var(--bui-fg-danger);\n    }\n\n    &:has([data-disabled]) {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n\n  .PasswordField_bui-PasswordFieldIcon__aa0b36a0a3 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    color: var(--bui-fg-primary);\n    pointer-events: none;\n    width: var(--password-field-item-height);\n    height: var(--password-field-item-height);\n\n    & svg {\n      .PasswordField_bui-PasswordField__aa0b36a0a3[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .PasswordField_bui-PasswordField__aa0b36a0a3[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n  }\n\n  .PasswordField_bui-PasswordFieldInput__aa0b36a0a3 {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0;\n    border: none;\n    background-color: transparent;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    width: 100%;\n    height: 100%;\n    outline: none;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n\n    &:first-child {\n      .PasswordField_bui-PasswordField__aa0b36a0a3[data-size='small'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n\n      .PasswordField_bui-PasswordField__aa0b36a0a3[data-size='medium'] & {\n        padding-inline: var(--bui-space-4) 0;\n      }\n    }\n  }\n\n  .PasswordField_bui-PasswordFieldVisibility__aa0b36a0a3 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    cursor: pointer;\n    border: none;\n    padding: 0;\n    margin: 0;\n    color: var(--bui-fg-primary);\n    width: var(--password-field-item-height);\n    height: var(--password-field-item-height);\n\n    & svg {\n      .PasswordField_bui-PasswordField__aa0b36a0a3[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .PasswordField_bui-PasswordField__aa0b36a0a3[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n  }\n}\n";
-var stylesPasswordField = {"bui-PasswordField":"PasswordField_bui-PasswordField__aa0b36a0a3","bui-PasswordFieldInputWrapper":"PasswordField_bui-PasswordFieldInputWrapper__aa0b36a0a3","bui-PasswordFieldIcon":"PasswordField_bui-PasswordFieldIcon__aa0b36a0a3","bui-PasswordFieldInput":"PasswordField_bui-PasswordFieldInput__aa0b36a0a3","bui-PasswordFieldVisibility":"PasswordField_bui-PasswordFieldVisibility__aa0b36a0a3"};
+var styles = {"bui-PasswordField":"PasswordField_bui-PasswordField__aa0b36a0a3","bui-PasswordFieldInputWrapper":"PasswordField_bui-PasswordFieldInputWrapper__aa0b36a0a3","bui-PasswordFieldIcon":"PasswordField_bui-PasswordFieldIcon__aa0b36a0a3","bui-PasswordFieldInput":"PasswordField_bui-PasswordFieldInput__aa0b36a0a3","bui-PasswordFieldVisibility":"PasswordField_bui-PasswordFieldVisibility__aa0b36a0a3"};
 styleInject(css_248z);
 
-export { stylesPasswordField as default };
+export { styles as default };
 //# sourceMappingURL=PasswordField.module.css.esm.js.map

package/dist/components/PasswordField/definition.esm.js

@@ -1,15 +1,32 @@
-const PasswordFieldDefinition = {
-  classNames: {
-    root: "bui-PasswordField",
-    inputWrapper: "bui-PasswordFieldInputWrapper",
-    input: "bui-PasswordFieldInput",
-    inputIcon: "bui-PasswordFieldIcon",
-    inputVisibility: "bui-PasswordFieldVisibility"
-  },
-  dataAttributes: {
-    size: ["small", "medium"]
+import 'react/jsx-runtime';
+import 'clsx';
+import '../../hooks/useBreakpoint.esm.js';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './PasswordField.module.css.esm.js';
+
+const PasswordFieldDefinition = defineComponent()(
+  {
+    styles,
+    classNames: {
+      root: "bui-PasswordField",
+      inputWrapper: "bui-PasswordFieldInputWrapper",
+      input: "bui-PasswordFieldInput",
+      inputIcon: "bui-PasswordFieldIcon",
+      inputVisibility: "bui-PasswordFieldVisibility"
+    },
+    propDefs: {
+      size: { dataAttribute: true, default: "small" },
+      className: {},
+      icon: {},
+      placeholder: {},
+      label: {},
+      description: {},
+      secondaryLabel: {}
+    }
   }
-};
+);
 
 export { PasswordFieldDefinition };
 //# sourceMappingURL=definition.esm.js.map

package/dist/components/PasswordField/definition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/PasswordField/definition.ts"],"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 type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for PasswordField\n * @public\n */\nexport const PasswordFieldDefinition = {\n  classNames: {\n    root: 'bui-PasswordField',\n    inputWrapper: 'bui-PasswordFieldInputWrapper',\n    input: 'bui-PasswordFieldInput',\n    inputIcon: 'bui-PasswordFieldIcon',\n    inputVisibility: 'bui-PasswordFieldVisibility',\n  },\n  dataAttributes: {\n    size: ['small', 'medium'] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,uBAAA,GAA0B;AAAA,EACrC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,mBAAA;AAAA,IACN,YAAA,EAAc,+BAAA;AAAA,IACd,KAAA,EAAO,wBAAA;AAAA,IACP,SAAA,EAAW,uBAAA;AAAA,IACX,eAAA,EAAiB;AAAA,GACnB;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,IAAA,EAAM,CAAC,OAAA,EAAS,QAAQ;AAAA;AAE5B;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/PasswordField/definition.ts"],"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 { defineComponent } from '../../hooks/useDefinition';\nimport type { PasswordFieldOwnProps } from './types';\nimport styles from './PasswordField.module.css';\n\n/**\n * Component definition for PasswordField\n * @public\n */\nexport const PasswordFieldDefinition = defineComponent<PasswordFieldOwnProps>()(\n  {\n    styles,\n    classNames: {\n      root: 'bui-PasswordField',\n      inputWrapper: 'bui-PasswordFieldInputWrapper',\n      input: 'bui-PasswordFieldInput',\n      inputIcon: 'bui-PasswordFieldIcon',\n      inputVisibility: 'bui-PasswordFieldVisibility',\n    },\n    propDefs: {\n      size: { dataAttribute: true, default: 'small' },\n      className: {},\n      icon: {},\n      placeholder: {},\n      label: {},\n      description: {},\n      secondaryLabel: {},\n    },\n  },\n);\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,0BAA0B,eAAA,EAAuC;AAAA,EAC5E;AAAA,IACE,MAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,mBAAA;AAAA,MACN,YAAA,EAAc,+BAAA;AAAA,MACd,KAAA,EAAO,wBAAA;AAAA,MACP,SAAA,EAAW,uBAAA;AAAA,MACX,eAAA,EAAiB;AAAA,KACnB;AAAA,IACA,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,MAC9C,WAAW,EAAC;AAAA,MACZ,MAAM,EAAC;AAAA,MACP,aAAa,EAAC;AAAA,MACd,OAAO,EAAC;AAAA,MACR,aAAa,EAAC;AAAA,MACd,gBAAgB;AAAC;AACnB;AAEJ;;;;"}