@backstage/ui 0.7.2-next.1 → 0.8.0

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  RouterProvider,\n} from 'react-aria-components';\nimport { ScrollArea } from '../ScrollArea';\nimport { useStyles } from '../../hooks/useStyles';\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 { isExternalLink } from '../../utils/isExternalLink';\nimport { useNavigate, useHref } from 'react-router-dom';\n\nconst MenuEmptyState = () => {\n  const { classNames } = useStyles('Menu');\n\n  return <div className={classNames.emptyState}>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 { placement = 'bottom start', ...rest } = props;\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <RAPopover className={classNames.popover} placement={placement}>\n      <ScrollArea.Root>\n        <ScrollArea.Viewport>\n          <RAMenu className={classNames.content} {...rest}>\n            {props.children}\n          </RAMenu>\n        </ScrollArea.Viewport>\n        <ScrollArea.Scrollbar orientation=\"vertical\" style={{}}>\n          <ScrollArea.Thumb />\n        </ScrollArea.Scrollbar>\n      </ScrollArea.Root>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuListBox = (props: MenuListBoxProps<object>) => {\n  const {\n    selectionMode = 'single',\n    placement = 'bottom start',\n    ...rest\n  } = props;\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <RAPopover className={classNames.popover} placement={placement}>\n      <ScrollArea.Root>\n        <ScrollArea.Viewport>\n          <RAListBox\n            className={classNames.content}\n            selectionMode={selectionMode}\n            {...rest}\n          />\n        </ScrollArea.Viewport>\n        <ScrollArea.Scrollbar orientation=\"vertical\" style={{}}>\n          <ScrollArea.Thumb />\n        </ScrollArea.Scrollbar>\n      </ScrollArea.Root>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuAutocomplete = (props: MenuAutocompleteProps<object>) => {\n  const { placement = 'bottom start', ...rest } = props;\n  const { classNames } = useStyles('Menu');\n  const { contains } = useFilter({ sensitivity: 'base' });\n\n  return (\n    <RAPopover className={classNames.popover} placement={placement}>\n      <RAAutocomplete filter={contains}>\n        <RASearchField className={classNames.searchField}>\n          <RAInput\n            className={classNames.searchFieldInput}\n            aria-label=\"Search\"\n            placeholder={props.placeholder || 'Search...'}\n          />\n          <RAButton className={classNames.searchFieldClear}>\n            <RiCloseCircleLine />\n          </RAButton>\n        </RASearchField>\n        <ScrollArea.Root>\n          <ScrollArea.Viewport>\n            <RAMenu\n              className={classNames.content}\n              renderEmptyState={() => <MenuEmptyState />}\n              {...rest}\n            />\n          </ScrollArea.Viewport>\n          <ScrollArea.Scrollbar orientation=\"vertical\" style={{}}>\n            <ScrollArea.Thumb />\n          </ScrollArea.Scrollbar>\n        </ScrollArea.Root>\n      </RAAutocomplete>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuAutocompleteListbox = (\n  props: MenuAutocompleteListBoxProps<object>,\n) => {\n  const {\n    selectionMode = 'single',\n    placement = 'bottom start',\n    ...rest\n  } = props;\n  const { classNames } = useStyles('Menu');\n  const { contains } = useFilter({ sensitivity: 'base' });\n\n  return (\n    <RAPopover className={classNames.popover} placement={placement}>\n      <RAAutocomplete filter={contains}>\n        <RASearchField className={classNames.searchField}>\n          <RAInput\n            className={classNames.searchFieldInput}\n            aria-label=\"Search\"\n            placeholder={props.placeholder || 'Search...'}\n          />\n          <RAButton className={classNames.searchFieldClear}>\n            <RiCloseCircleLine />\n          </RAButton>\n        </RASearchField>\n        <ScrollArea.Root>\n          <ScrollArea.Viewport>\n            <RAListBox\n              className={classNames.content}\n              renderEmptyState={() => <MenuEmptyState />}\n              selectionMode={selectionMode}\n              {...rest}\n            />\n          </ScrollArea.Viewport>\n          <ScrollArea.Scrollbar orientation=\"vertical\" style={{}}>\n            <ScrollArea.Thumb />\n          </ScrollArea.Scrollbar>\n        </ScrollArea.Root>\n      </RAAutocomplete>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuItem = (props: MenuItemProps) => {\n  const { iconStart, color = 'primary', children, href, ...rest } = props;\n  const { classNames } = useStyles('Menu');\n  const navigate = useNavigate();\n\n  const isLink = href !== undefined;\n  const isExternal = isExternalLink(href);\n\n  const content = (\n    <RAMenuItem\n      className={classNames.item}\n      data-color={color}\n      href={href}\n      textValue={typeof children === 'string' ? children : undefined}\n      {...rest}\n    >\n      <div className={classNames.itemContent}>\n        {iconStart}\n        {children}\n      </div>\n      <div className={classNames.itemArrow}>\n        <RiArrowRightSLine />\n      </div>\n    </RAMenuItem>\n  );\n\n  if (isLink && !isExternal) {\n    return (\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        {content}\n      </RouterProvider>\n    );\n  }\n\n  return content;\n};\n\n/** @public */\nexport const MenuListBoxItem = (props: MenuListBoxItemProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <RAListBoxItem\n      textValue={\n        typeof props.children === 'string' ? props.children : undefined\n      }\n      className={classNames.itemListBox}\n      {...rest}\n    >\n      <div className={classNames.itemContent}>\n        <div className={classNames.itemListBoxCheck}>\n          <RiCheckLine />\n        </div>\n        {children}\n      </div>\n    </RAListBoxItem>\n  );\n};\n\n/** @public */\nexport const MenuSection = (props: MenuSectionProps<object>) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <RAMenuSection className={classNames.section} {...props}>\n      <RAMenuHeader className={classNames.sectionHeader}>\n        {props.title}\n      </RAMenuHeader>\n      {props.children}\n    </RAMenuSection>\n  );\n};\n\n/** @public */\nexport const MenuSeparator = (props: MenuSeparatorProps) => {\n  const { classNames } = useStyles('Menu');\n\n  return <RAMenuSeparator className={classNames.separator} {...props} />;\n};\n"],"names":["RAMenuTrigger","RAMenuSubmenuTrigger","RAPopover","RAMenu","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  RouterProvider,\n  Virtualizer,\n  ListLayout,\n  OverlayTriggerStateContext,\n} from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\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 { useNavigate, useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport { useRef, useEffect, useContext } from 'react';\nimport styles from './Menu.module.css';\nimport clsx from 'clsx';\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('Menu');\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('Menu', props);\n  const {\n    placement = 'bottom start',\n    virtualized = false,\n    maxWidth,\n    maxHeight,\n    style,\n    ...rest\n  } = cleanedProps;\n\n  const navigate = useNavigate();\n  let newMaxWidth = maxWidth || (virtualized ? '260px' : 'undefined');\n  const popoverRef = useRef<HTMLDivElement>(null);\n  const state = useContext(OverlayTriggerStateContext);\n\n  // Custom click-outside handler for non-modal popovers\n  useEffect(() => {\n    if (!state?.isOpen) return;\n\n    const handleClickOutside = (event: MouseEvent) => {\n      const target = event.target as Node;\n\n      // Check if click is outside the popover\n      if (popoverRef.current && !popoverRef.current.contains(target)) {\n        // Check if click is on a trigger button or submenu\n        const isOnTrigger = (target as Element).closest('[data-trigger]');\n        const isOnSubmenu = (target as Element).closest('[role=\"menu\"]');\n\n        if (!isOnTrigger && !isOnSubmenu) {\n          state.close();\n        }\n      }\n    };\n\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, [state]);\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    <RAPopover\n      ref={popoverRef}\n      className={clsx(classNames.popover, styles[classNames.popover])}\n      placement={placement}\n      isNonModal={true}\n      isKeyboardDismissDisabled={false}\n    >\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        {virtualized ? (\n          <Virtualizer\n            layout={ListLayout}\n            layoutOptions={{\n              rowHeight,\n            }}\n          >\n            {menuContent}\n          </Virtualizer>\n        ) : (\n          menuContent\n        )}\n      </RouterProvider>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuListBox = (props: MenuListBoxProps<object>) => {\n  const { classNames, cleanedProps } = useStyles('Menu', props);\n  const {\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(classNames.popover, styles[classNames.popover])}\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('Menu', props);\n  const {\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  const navigate = useNavigate();\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    <RAPopover\n      className={clsx(classNames.popover, styles[classNames.popover])}\n      placement={placement}\n    >\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        <RAAutocomplete filter={contains}>\n          <RASearchField\n            className={clsx(\n              classNames.searchField,\n              styles[classNames.searchField],\n            )}\n          >\n            <RAInput\n              className={clsx(\n                classNames.searchFieldInput,\n                styles[classNames.searchFieldInput],\n              )}\n              aria-label=\"Search\"\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      </RouterProvider>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuAutocompleteListbox = (\n  props: MenuAutocompleteListBoxProps<object>,\n) => {\n  const { classNames, cleanedProps } = useStyles('Menu', props);\n  const {\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(classNames.popover, styles[classNames.popover])}\n      placement={placement}\n    >\n      <RAAutocomplete filter={contains}>\n        <RASearchField\n          className={clsx(\n            classNames.searchField,\n            styles[classNames.searchField],\n          )}\n        >\n          <RAInput\n            className={clsx(\n              classNames.searchFieldInput,\n              styles[classNames.searchFieldInput],\n            )}\n            aria-label=\"Search\"\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('Menu', props);\n  const {\n    iconStart,\n    color = 'primary',\n    children,\n    href,\n    ...rest\n  } = cleanedProps;\n\n  const isLink = href !== undefined;\n  const isExternal = isExternalLink(href);\n\n  if (isLink && isExternal) {\n    return (\n      <RAMenuItem\n        className={clsx(classNames.item, styles[classNames.item])}\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])}\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('Menu', props);\n  const { children, ...rest } = cleanedProps;\n\n  return (\n    <RAListBoxItem\n      textValue={\n        typeof props.children === 'string' ? props.children : undefined\n      }\n      className={clsx(classNames.itemListBox, styles[classNames.itemListBox])}\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('Menu', props);\n  const { children, title, ...rest } = cleanedProps;\n\n  return (\n    <RAMenuSection\n      className={clsx(classNames.section, styles[classNames.section])}\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('Menu', props);\n\n  return (\n    <RAMenuSeparator\n      className={clsx(classNames.separator, styles[classNames.separator])}\n      {...cleanedProps}\n    />\n  );\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

@@ -0,0 +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 components {\n  .Menu-module_bui-MenuPopover__2_pRD {\n    display: flex;\n    flex-direction: column;\n    border: 1px solid var(--bui-border);\n    border-radius: var(--bui-radius-2);\n    background: var(--bui-bg-surface-1);\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-module_bui-MenuContent__3DAPp {\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-module_bui-MenuItem__2UbNh {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &[data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-open] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-color='danger'] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-color='danger'][data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-danger);\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-has-submenu] {\n      & > .Menu-module_bui-MenuItemWrapper__3SEGE > .Menu-module_bui-MenuItemArrow__2Gdal {\n        display: block;\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuItemWrapper__3SEGE {\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-module_bui-MenuItemListBox__3OVkY {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &:hover .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-selected] .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n      & > svg {\n        opacity: 1;\n        color: var(--bui-fg-primary);\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuItemListBoxCheck__3flwX {\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-module_bui-MenuItemContent__2jc-_ {\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-module_bui-MenuItemArrow__2Gdal {\n    display: none;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuSection__3OeyZ {\n    &:first-child .Menu-module_bui-MenuSectionHeader__yFmfK {\n      padding-top: 0;\n    }\n  }\n\n  .Menu-module_bui-MenuSectionHeader__yFmfK {\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-module_bui-MenuSeparator__-EtU8 {\n    height: 1px;\n    background: var(--bui-border);\n    margin-inline: var(--bui-space-1_5);\n    margin-block: var(--bui-space-1);\n  }\n\n  .Menu-module_bui-MenuSearchField__1sNMj {\n    position: relative;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n\n    &[data-empty] {\n      .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n        display: none;\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuSearchFieldInput__2jPs5 {\n    display: flex;\n    align-items: center;\n    padding: 0 var(--bui-space-3);\n    border: none;\n    border-bottom: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\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: 2rem;\n    cursor: inherit;\n    outline: none;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n  }\n\n  .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n    position: absolute;\n    right: var(--bui-space-2);\n    top: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-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\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuEmptyState__wPwuq {\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-module_bui-MenuPopover__2_pRD","bui-MenuContent":"Menu-module_bui-MenuContent__3DAPp","bui-MenuItem":"Menu-module_bui-MenuItem__2UbNh","bui-MenuItemWrapper":"Menu-module_bui-MenuItemWrapper__3SEGE","bui-MenuItemArrow":"Menu-module_bui-MenuItemArrow__2Gdal","bui-MenuItemListBox":"Menu-module_bui-MenuItemListBox__3OVkY","bui-MenuItemListBoxCheck":"Menu-module_bui-MenuItemListBoxCheck__3flwX","bui-MenuItemContent":"Menu-module_bui-MenuItemContent__2jc-_","bui-MenuSection":"Menu-module_bui-MenuSection__3OeyZ","bui-MenuSectionHeader":"Menu-module_bui-MenuSectionHeader__yFmfK","bui-MenuSeparator":"Menu-module_bui-MenuSeparator__-EtU8","bui-MenuSearchField":"Menu-module_bui-MenuSearchField__1sNMj","bui-MenuSearchFieldClear":"Menu-module_bui-MenuSearchFieldClear__3bwIe","bui-MenuSearchFieldInput":"Menu-module_bui-MenuSearchFieldInput__2jPs5","bui-MenuEmptyState":"Menu-module_bui-MenuEmptyState__wPwuq"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=Menu.module.css.esm.js.map

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

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

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

@@ -0,0 +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 components {\n  .Popover-module_bui-Popover__100-n {\n    margin-right: 12px;\n    overflow: scroll;\n    background-color: var(--bui-bg-surface-1);\n    border: 1px solid var(--bui-border);\n    border-radius: var(--bui-radius-3);\n    padding-block: var(--bui-space-1);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  }\n}\n";
+var stylesPopover = {"bui-Popover":"Popover-module_bui-Popover__100-n"};
+styleInject(css_248z);
+
+export { stylesPopover as default };
+//# sourceMappingURL=Popover.module.css.esm.js.map

package/dist/components/Popover/Popover.module.css.esm.js.map

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

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

@@ -5,9 +5,11 @@ 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';
+import styles from './RadioGroup.module.css.esm.js';
 
 const RadioGroup = forwardRef(
   (props, ref) => {
+    const { classNames, cleanedProps } = useStyles("RadioGroup", props);
     const {
       className,
       label,
@@ -18,8 +20,7 @@ const RadioGroup = forwardRef(
       "aria-labelledby": ariaLabelledBy,
       children,
       ...rest
-    } = props;
-    const { classNames } = useStyles("RadioGroup");
+    } = cleanedProps;
     useEffect(() => {
       if (!label && !ariaLabel && !ariaLabelledBy) {
         console.warn(
@@ -31,7 +32,7 @@ const RadioGroup = forwardRef(
     return /* @__PURE__ */ jsxs(
       RadioGroup$1,
       {
-        className: clsx(classNames.root, className),
+        className: clsx(classNames.root, styles[classNames.root], className),
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
         ...rest,
@@ -45,7 +46,7 @@ const RadioGroup = forwardRef(
               description
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: classNames.content, children }),
+          /* @__PURE__ */ jsx("div", { className: clsx(classNames.content, styles[classNames.content]), children }),
           /* @__PURE__ */ jsx(FieldError, {})
         ]
       }
@@ -59,7 +60,7 @@ const Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     Radio$1,
     {
-      className: clsx(classNames.radio, className),
+      className: clsx(classNames.radio, styles[classNames.radio], className),
       ...rest,
       ref
     }

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

@@ -1 +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,GAAA,KAAQ;AACd,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA,EAAc,SAAA;AAAA,MACd,iBAAA,EAAmB,cAAA;AAAA,MACnB,QAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,YAAY,CAAA;AAE7C,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC3C,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,EAAW,cAAc,CAAC,CAAA;AAGrC,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAE/C,IAAA,uBACE,IAAA;AAAA,MAACA,YAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,YAAA,EAAY,SAAA;AAAA,QACZ,iBAAA,EAAiB,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,cAAA,EAAgB,kBAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,SAAU,QAAA,EAAS,CAAA;AAAA,8BAC7C,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AAGlB,MAAM,KAAA,GAAQ,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,YAAY,CAAA;AAE7C,EAAA,uBACE,GAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,KAAA,EAAO,SAAS,CAAA;AAAA,MAC1C,GAAG,IAAA;AAAA,MACJ;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
+{"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';\nimport styles from './RadioGroup.module.css';\n\nimport type { RadioGroupProps, RadioProps } from './types';\n\n/** @public */\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (props, ref) => {\n    const { classNames, cleanedProps } = useStyles('RadioGroup', props);\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    } = cleanedProps;\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, styles[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={clsx(classNames.content, styles[classNames.content])}>\n          {children}\n        </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, styles[classNames.radio], className)}\n      {...rest}\n      ref={ref}\n    />\n  );\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"names":["AriaRadioGroup","AriaRadio"],"mappings":";;;;;;;;;AA8BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,cAAc,KAAK,CAAA;AAClE,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA,EAAc,SAAA;AAAA,MACd,iBAAA,EAAmB,cAAA;AAAA,MACnB,QAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,YAAA;AAEJ,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC3C,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,EAAW,cAAc,CAAC,CAAA;AAGrC,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAE/C,IAAA,uBACE,IAAA;AAAA,MAACA,YAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,YAAA,EAAY,SAAA;AAAA,QACZ,iBAAA,EAAiB,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,cAAA,EAAgB,kBAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,OAAA,EAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA,EAChE,QAAA,EACH,CAAA;AAAA,8BACC,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AAGlB,MAAM,KAAA,GAAQ,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,YAAY,CAAA;AAE7C,EAAA,uBACE,GAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,KAAA,EAAO,OAAO,UAAA,CAAW,KAAK,GAAG,SAAS,CAAA;AAAA,MACpE,GAAG,IAAA;AAAA,MACJ;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}

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

@@ -0,0 +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 components {\n  .RadioGroup-module_bui-RadioGroup__v70Qu {\n    display: flex;\n    flex-direction: column;\n    color: var(--bui-fg-primary);\n  }\n\n  .RadioGroup-module_bui-RadioGroup__v70Qu[data-orientation='horizontal'] .RadioGroup-module_bui-RadioGroupContent__1rG0a {\n    flex-direction: row;\n    gap: var(--bui-space-4);\n  }\n\n  .RadioGroup-module_bui-RadioGroupContent__1rG0a {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-2);\n  }\n\n  .RadioGroup-module_bui-Radio__1769d {\n    display: flex;\n    /* This is needed so the HiddenInput is positioned correctly */\n    position: relative;\n    align-items: center;\n    gap: var(--bui-space-2);\n    font-size: var(--bui-font-size-2);\n    color: var(--bui-fg-primary);\n    forced-color-adjust: none;\n\n    &:before {\n      content: '';\n      display: block;\n      width: 1rem;\n      height: 1rem;\n      box-sizing: border-box;\n      border: 0.125rem solid var(--bui-border);\n      background: var(--bui-gray-1);\n      border-radius: var(--bui-radius-full);\n      transition: all 200ms;\n    }\n\n    &[data-pressed]:before {\n      border-color: var(--bui-border);\n    }\n\n    &[data-selected] {\n      &:before {\n        border-color: var(--bui-bg-solid);\n        border-width: 0.25rem;\n      }\n\n      &[data-pressed]:before {\n        border-color: var(--bui-bg-solid);\n      }\n    }\n\n    &[data-focus-visible]:before {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n\n      &:before {\n        border-color: var(--bui-border-disabled);\n        background: var(--bui-bg-disabled);\n      }\n\n      &[data-selected]:before {\n        border-color: var(--bui-border-disabled);\n      }\n    }\n\n    &[data-invalid]:before {\n      border-color: var(--bui-border-danger);\n    }\n\n    &[data-invalid][data-selected]:before {\n      border-color: var(--bui-border-danger);\n    }\n\n    /* Ensure disabled state prevails over invalid state */\n    &[data-disabled][data-invalid] {\n      color: var(--bui-fg-disabled);\n\n      &:before {\n        border-color: var(--bui-border-disabled);\n        background: var(--bui-bg-disabled);\n      }\n\n      &[data-selected]:before {\n        border-color: var(--bui-border-disabled);\n      }\n    }\n  }\n}\n";
+var styles = {"bui-RadioGroup":"RadioGroup-module_bui-RadioGroup__v70Qu","bui-RadioGroupContent":"RadioGroup-module_bui-RadioGroupContent__1rG0a","bui-Radio":"RadioGroup-module_bui-Radio__1769d"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=RadioGroup.module.css.esm.js.map

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

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

package/dist/components/SearchField/SearchField.esm.js

@@ -6,23 +6,15 @@ import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
 import { FieldError } from '../FieldError/FieldError.esm.js';
 import { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import stylesSearchField from './SearchField.module.css.esm.js';
+import stylesTextField from '../TextField/TextField.module.css.esm.js';
 
 const SearchField = forwardRef(
   (props, ref) => {
     const {
-      className,
-      icon,
-      size = "small",
       label,
-      secondaryLabel,
-      description,
-      isRequired,
-      onChange,
-      placeholder = "Search",
-      startCollapsed = false,
       "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      ...rest
+      "aria-labelledby": ariaLabelledBy
     } = props;
     const [isCollapsed, setIsCollapsed] = useState(false);
     const [shouldCollapse, setShouldCollapse] = useState(true);
@@ -33,13 +25,28 @@ const SearchField = forwardRef(
         );
       }
     }, [label, ariaLabel, ariaLabelledBy]);
-    const { classNames: textFieldClassNames, dataAttributes } = useStyles(
-      "TextField",
-      {
-        size
-      }
-    );
-    const { classNames: searchFieldClassNames } = useStyles("SearchField", {});
+    const { classNames: textFieldClassNames } = useStyles("TextField");
+    const {
+      classNames: searchFieldClassNames,
+      dataAttributes,
+      style,
+      cleanedProps
+    } = useStyles("SearchField", {
+      size: "small",
+      placeholder: "Search",
+      startCollapsed: false,
+      ...props
+    });
+    const {
+      className,
+      description,
+      icon,
+      isRequired,
+      secondaryLabel,
+      placeholder,
+      startCollapsed,
+      ...rest
+    } = cleanedProps;
     const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
     const handleClick = (isFocused) => {
       props.onFocusChange?.(isFocused);
@@ -65,15 +72,17 @@ const SearchField = forwardRef(
         className: clsx(
           textFieldClassNames.root,
           searchFieldClassNames.root,
+          stylesTextField[textFieldClassNames.root],
+          stylesSearchField[searchFieldClassNames.root],
           className
         ),
         ...dataAttributes,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
-        "data-start-collapsed": startCollapsed,
         "data-collapsed": isCollapsed,
         onFocusChange: handleClick,
         onChange: handleChange,
+        style,
         ...rest,
         ref,
         children: [
@@ -88,13 +97,19 @@ const SearchField = forwardRef(
           /* @__PURE__ */ jsxs(
             "div",
             {
-              className: textFieldClassNames.inputWrapper,
+              className: clsx(
+                textFieldClassNames.inputWrapper,
+                stylesTextField[textFieldClassNames.inputWrapper]
+              ),
               "data-size": dataAttributes["data-size"],
               children: [
                 icon !== false && /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: textFieldClassNames.inputIcon,
+                    className: clsx(
+                      textFieldClassNames.inputIcon,
+                      stylesTextField[textFieldClassNames.inputIcon]
+                    ),
                     "data-size": dataAttributes["data-size"],
                     "aria-hidden": "true",
                     children: icon || /* @__PURE__ */ jsx(RiSearch2Line, {})
@@ -103,7 +118,10 @@ const SearchField = forwardRef(
                 /* @__PURE__ */ jsx(
                   Input,
                   {
-                    className: textFieldClassNames.input,
+                    className: clsx(
+                      textFieldClassNames.input,
+                      stylesTextField[textFieldClassNames.input]
+                    ),
                     ...icon !== false && { "data-icon": true },
                     placeholder
                   }
@@ -111,7 +129,10 @@ const SearchField = forwardRef(
                 /* @__PURE__ */ jsx(
                   Button,
                   {
-                    className: searchFieldClassNames.clear,
+                    className: clsx(
+                      searchFieldClassNames.clear,
+                      stylesSearchField[searchFieldClassNames.clear]
+                    ),
                     "data-size": dataAttributes["data-size"],
                     children: /* @__PURE__ */ jsx(RiCloseCircleLine, {})
                   }

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.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  SearchField as AriaSearchField,\n  Button,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useStyles } from '../../hooks/useStyles';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n  (props, ref) => {\n    const {\n      className,\n      icon,\n      size = 'small',\n      label,\n      secondaryLabel,\n      description,\n      isRequired,\n      onChange,\n      placeholder = 'Search',\n      startCollapsed = false,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      ...rest\n    } = props;\n\n    const [isCollapsed, setIsCollapsed] = useState(false);\n    const [shouldCollapse, setShouldCollapse] = useState(true);\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const { classNames: textFieldClassNames, dataAttributes } = useStyles(\n      'TextField',\n      {\n        size,\n      },\n    );\n\n    const { classNames: searchFieldClassNames } = useStyles('SearchField', {});\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    const handleClick = (isFocused: boolean) => {\n      props.onFocusChange?.(isFocused);\n      if (shouldCollapse) {\n        if (isFocused) {\n          setIsCollapsed(true);\n        } else {\n          setIsCollapsed(false);\n        }\n      }\n    };\n\n    const handleChange = (value: string) => {\n      props.onChange?.(value);\n      if (value.length > 0) {\n        setShouldCollapse(false);\n      } else {\n        setShouldCollapse(true);\n      }\n    };\n\n    return (\n      <AriaSearchField\n        className={clsx(\n          textFieldClassNames.root,\n          searchFieldClassNames.root,\n          className,\n        )}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        data-start-collapsed={startCollapsed}\n        data-collapsed={isCollapsed}\n        onFocusChange={handleClick}\n        onChange={handleChange}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={textFieldClassNames.inputWrapper}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon !== false && (\n            <div\n              className={textFieldClassNames.inputIcon}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon || <RiSearch2Line />}\n            </div>\n          )}\n          <Input\n            className={textFieldClassNames.input}\n            {...(icon !== false && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n          <Button\n            className={searchFieldClassNames.clear}\n            data-size={dataAttributes['data-size']}\n          >\n            <RiCloseCircleLine />\n          </Button>\n        </div>\n        <FieldError />\n      </AriaSearchField>\n    );\n  },\n);\n\nSearchField.displayName = 'searchField';\n"],"names":["AriaSearchField"],"mappings":"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"}
+{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.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  SearchField as AriaSearchField,\n  Button,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useStyles } from '../../hooks/useStyles';\nimport stylesSearchField from './SearchField.module.css';\nimport stylesTextField from '../TextField/TextField.module.css';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n  (props, ref) => {\n    const {\n      label,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n    } = props;\n\n    const [isCollapsed, setIsCollapsed] = useState(false);\n    const [shouldCollapse, setShouldCollapse] = useState(true);\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const { classNames: textFieldClassNames } = useStyles('TextField');\n\n    const {\n      classNames: searchFieldClassNames,\n      dataAttributes,\n      style,\n      cleanedProps,\n    } = useStyles('SearchField', {\n      size: 'small',\n      placeholder: 'Search',\n      startCollapsed: false,\n      ...props,\n    });\n\n    const {\n      className,\n      description,\n      icon,\n      isRequired,\n      secondaryLabel,\n      placeholder,\n      startCollapsed,\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    const handleClick = (isFocused: boolean) => {\n      props.onFocusChange?.(isFocused);\n      if (shouldCollapse) {\n        if (isFocused) {\n          setIsCollapsed(true);\n        } else {\n          setIsCollapsed(false);\n        }\n      }\n    };\n\n    const handleChange = (value: string) => {\n      props.onChange?.(value);\n      if (value.length > 0) {\n        setShouldCollapse(false);\n      } else {\n        setShouldCollapse(true);\n      }\n    };\n\n    return (\n      <AriaSearchField\n        className={clsx(\n          textFieldClassNames.root,\n          searchFieldClassNames.root,\n          stylesTextField[textFieldClassNames.root],\n          stylesSearchField[searchFieldClassNames.root],\n          className,\n        )}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        data-collapsed={isCollapsed}\n        onFocusChange={handleClick}\n        onChange={handleChange}\n        style={style}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={clsx(\n            textFieldClassNames.inputWrapper,\n            stylesTextField[textFieldClassNames.inputWrapper],\n          )}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon !== false && (\n            <div\n              className={clsx(\n                textFieldClassNames.inputIcon,\n                stylesTextField[textFieldClassNames.inputIcon],\n              )}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon || <RiSearch2Line />}\n            </div>\n          )}\n          <Input\n            className={clsx(\n              textFieldClassNames.input,\n              stylesTextField[textFieldClassNames.input],\n            )}\n            {...(icon !== false && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n          <Button\n            className={clsx(\n              searchFieldClassNames.clear,\n              stylesSearchField[searchFieldClassNames.clear],\n            )}\n            data-size={dataAttributes['data-size']}\n          >\n            <RiCloseCircleLine />\n          </Button>\n        </div>\n        <FieldError />\n      </AriaSearchField>\n    );\n  },\n);\n\nSearchField.displayName = 'searchField';\n"],"names":["AriaSearchField"],"mappings":"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"}

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

@@ -0,0 +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 components {\n  .SearchField-module_bui-SearchField__2TyT_ {\n    flex: 1;\n    flex-shrink: 0;\n\n    &[data-empty] {\n      .SearchField-module_bui-InputClear__JCu80 {\n        display: none;\n      }\n    }\n\n    &[data-startCollapsed='true'] {\n      transition: flex-basis 0.3s ease-in-out;\n      padding: 0;\n      flex: 0 1 auto;\n\n      &[data-collapsed='true'] {\n        flex-basis: 200px;\n      }\n\n      &[data-collapsed='false'] {\n        cursor: pointer;\n\n        &[data-size='medium'] {\n          flex-basis: 2.5rem;\n          height: 2.5rem;\n        }\n\n        &[data-size='small'] {\n          flex-basis: 2rem;\n          height: 2rem;\n        }\n\n        &[data-size='medium'] .SearchField-module_bui-Input__FcOCK {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        &[data-size='small'] .SearchField-module_bui-Input__FcOCK {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        .SearchField-module_bui-InputWrapper__2WERV {\n          .SearchField-module_bui-Input__FcOCK[data-icon] {\n            padding-right: 0px;\n          }\n        }\n      }\n    }\n  }\n\n  .SearchField-module_bui-SearchField__2TyT_ .SearchField-module_bui-Input__FcOCK {\n    transition: padding 0.3s ease-in-out, border-color 0.2s ease-in-out,\n      outline-color 0.2s ease-in-out;\n\n    &[data-hovered] {\n      border-color: var(--bui-border-hover);\n    }\n\n    &[data-focused] {\n      border-color: var(--bui-border-pressed);\n      outline-width: 0px;\n    }\n  }\n\n  .SearchField-module_bui-SearchField__2TyT_ .SearchField-module_bui-InputWrapper__2WERV {\n    .SearchField-module_bui-Input__FcOCK[data-icon] {\n      padding-right: var(--bui-space-6);\n    }\n  }\n\n  .SearchField-module_bui-SearchField__2TyT_ .SearchField-module_bui-InputIcon__37FbR {\n    left: 0;\n    display: flex;\n    justify-content: center;\n\n    &[data-size='small'] {\n      width: var(--bui-space-8);\n    }\n\n    &[data-size='medium'] {\n      width: var(--bui-space-10);\n    }\n  }\n\n  .SearchField-module_bui-InputClear__JCu80 {\n    position: absolute;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-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  }\n\n  .SearchField-module_bui-InputClear__JCu80:hover {\n    color: var(--bui-fg-primary);\n  }\n\n  .SearchField-module_bui-InputClear__JCu80[data-size='small'] {\n    width: 2rem;\n    height: 2rem;\n  }\n\n  .SearchField-module_bui-InputClear__JCu80[data-size='medium'] {\n    width: 2.5rem;\n    height: 2.5rem;\n  }\n\n  .SearchField-module_bui-InputClear__JCu80 svg {\n    width: 1rem;\n    height: 1rem;\n  }\n}\n";
+var stylesSearchField = {"bui-SearchField":"SearchField-module_bui-SearchField__2TyT_","bui-InputClear":"SearchField-module_bui-InputClear__JCu80","bui-Input":"SearchField-module_bui-Input__FcOCK","bui-InputWrapper":"SearchField-module_bui-InputWrapper__2WERV","bui-InputIcon":"SearchField-module_bui-InputIcon__37FbR"};
+styleInject(css_248z);
+
+export { stylesSearchField as default };
+//# sourceMappingURL=SearchField.module.css.esm.js.map

package/dist/components/SearchField/SearchField.module.css.esm.js.map

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

package/dist/components/Select/Select.esm.js

@@ -4,19 +4,25 @@ import { Select as Select$1, Button, SelectValue, Popover, ListBox, ListBoxItem,
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
-import '@remixicon/react';
-import { Icon } from '../Icon/Icon.esm.js';
-import '../Icon/context.esm.js';
 import { FieldError } from '../FieldError/FieldError.esm.js';
+import styles from './Select.module.css.esm.js';
+import stylesPopover from '../Popover/Popover.module.css.esm.js';
+import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react';
 
 const Select = forwardRef((props, ref) => {
+  const { classNames: popoverClassNames } = useStyles("Popover");
+  const { classNames, dataAttributes, cleanedProps } = useStyles("Select", {
+    size: "small",
+    placeholder: "Select an option",
+    ...props
+  });
   const {
     className,
     label,
     description,
     options,
-    placeholder = "Select an option",
-    size = "small",
+    placeholder,
+    size,
     icon,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
@@ -24,11 +30,7 @@ const Select = forwardRef((props, ref) => {
     secondaryLabel,
     style,
     ...rest
-  } = props;
-  const { classNames: popoverClassNames } = useStyles("Popover");
-  const { classNames, dataAttributes } = useStyles("Select", {
-    size
-  });
+  } = cleanedProps;
   useEffect(() => {
     if (!label && !ariaLabel && !ariaLabelledBy) {
       console.warn(
@@ -40,7 +42,7 @@ const Select = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsxs(
     Select$1,
     {
-      className: clsx(classNames.root, className),
+      className: clsx(classNames.root, styles[classNames.root], className),
       ...dataAttributes,
       ref,
       "aria-label": ariaLabel,
@@ -58,28 +60,61 @@ const Select = forwardRef((props, ref) => {
         /* @__PURE__ */ jsxs(
           Button,
           {
-            className: classNames.trigger,
+            className: clsx(classNames.trigger, styles[classNames.trigger]),
             "data-size": dataAttributes["data-size"],
             children: [
               icon,
-              /* @__PURE__ */ jsx(SelectValue, { className: classNames.value }),
-              /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", name: "chevron-down" })
+              /* @__PURE__ */ jsx(
+                SelectValue,
+                {
+                  className: clsx(classNames.value, styles[classNames.value])
+                }
+              ),
+              /* @__PURE__ */ jsx(RiArrowDownSLine, { "aria-hidden": "true" })
             ]
           }
         ),
         /* @__PURE__ */ jsx(FieldError, {}),
-        /* @__PURE__ */ jsx(Popover, { className: popoverClassNames.root, children: /* @__PURE__ */ jsx(ListBox, { className: classNames.list, children: options?.map((option) => /* @__PURE__ */ jsxs(
-          ListBoxItem,
+        /* @__PURE__ */ jsx(
+          Popover,
           {
-            id: option.value,
-            className: classNames.item,
-            children: [
-              /* @__PURE__ */ jsx("div", { className: classNames.itemIndicator, children: /* @__PURE__ */ jsx(Icon, { name: "check" }) }),
-              /* @__PURE__ */ jsx(Text, { slot: "label", className: classNames.itemLabel, children: option.label })
-            ]
-          },
-          option.value
-        )) }) })
+            className: clsx(
+              popoverClassNames.root,
+              stylesPopover[popoverClassNames.root]
+            ),
+            children: /* @__PURE__ */ jsx(ListBox, { className: clsx(classNames.list, styles[classNames.list]), children: options?.map((option) => /* @__PURE__ */ jsxs(
+              ListBoxItem,
+              {
+                id: option.value,
+                className: clsx(classNames.item, styles[classNames.item]),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: clsx(
+                        classNames.itemIndicator,
+                        styles[classNames.itemIndicator]
+                      ),
+                      children: /* @__PURE__ */ jsx(RiCheckLine, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      slot: "label",
+                      className: clsx(
+                        classNames.itemLabel,
+                        styles[classNames.itemLabel]
+                      ),
+                      children: option.label
+                    }
+                  )
+                ]
+              },
+              option.value
+            )) })
+          }
+        )
       ]
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"Select.esm.js","sources":["../../../src/components/Select/Select.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  Select as AriaSelect,\n  SelectValue,\n  Button,\n  Popover,\n  ListBox,\n  ListBoxItem,\n  Text,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { SelectProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { FieldLabel } from '../FieldLabel';\nimport { Icon } from '../Icon';\nimport { FieldError } from '../FieldError';\n\n/** @public */\nexport const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {\n  const {\n    className,\n    label,\n    description,\n    options,\n    placeholder = 'Select an option',\n    size = 'small',\n    icon,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    isRequired,\n    secondaryLabel,\n    style,\n    ...rest\n  } = props;\n\n  const { classNames: popoverClassNames } = useStyles('Popover');\n  const { classNames, dataAttributes } = useStyles('Select', {\n    size,\n  });\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        'Select 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 = secondaryLabel || (isRequired ? 'Required' : null);\n\n  return (\n    <AriaSelect\n      className={clsx(classNames.root, className)}\n      {...dataAttributes}\n      ref={ref}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      {...rest}\n    >\n      <FieldLabel\n        label={label}\n        secondaryLabel={secondaryLabelText}\n        description={description}\n      />\n      <Button\n        className={classNames.trigger}\n        data-size={dataAttributes['data-size']}\n      >\n        {icon}\n        <SelectValue className={classNames.value} />\n        <Icon aria-hidden=\"true\" name=\"chevron-down\" />\n      </Button>\n      <FieldError />\n      <Popover className={popoverClassNames.root}>\n        <ListBox className={classNames.list}>\n          {options?.map(option => (\n            <ListBoxItem\n              key={option.value}\n              id={option.value}\n              className={classNames.item}\n            >\n              <div className={classNames.itemIndicator}>\n                <Icon name=\"check\" />\n              </div>\n              <Text slot=\"label\" className={classNames.itemLabel}>\n                {option.label}\n              </Text>\n            </ListBoxItem>\n          ))}\n        </ListBox>\n      </Popover>\n    </AriaSelect>\n  );\n});\n\nSelect.displayName = 'Select';\n"],"names":["AriaSelect"],"mappings":"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"}
+{"version":3,"file":"Select.esm.js","sources":["../../../src/components/Select/Select.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  Select as AriaSelect,\n  SelectValue,\n  Button,\n  Popover,\n  ListBox,\n  ListBoxItem,\n  Text,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { SelectProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport styles from './Select.module.css';\nimport stylesPopover from '../Popover/Popover.module.css';\nimport { RiArrowDownSLine, RiCheckLine } from '@remixicon/react';\n\n/** @public */\nexport const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {\n  const { classNames: popoverClassNames } = useStyles('Popover');\n  const { classNames, dataAttributes, cleanedProps } = useStyles('Select', {\n    size: 'small',\n    placeholder: 'Select an option',\n    ...props,\n  });\n\n  const {\n    className,\n    label,\n    description,\n    options,\n    placeholder,\n    size,\n    icon,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    isRequired,\n    secondaryLabel,\n    style,\n    ...rest\n  } = cleanedProps;\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        'Select 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 = secondaryLabel || (isRequired ? 'Required' : null);\n\n  return (\n    <AriaSelect\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...dataAttributes}\n      ref={ref}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      {...rest}\n    >\n      <FieldLabel\n        label={label}\n        secondaryLabel={secondaryLabelText}\n        description={description}\n      />\n      <Button\n        className={clsx(classNames.trigger, styles[classNames.trigger])}\n        data-size={dataAttributes['data-size']}\n      >\n        {icon}\n        <SelectValue\n          className={clsx(classNames.value, styles[classNames.value])}\n        />\n        <RiArrowDownSLine aria-hidden=\"true\" />\n      </Button>\n      <FieldError />\n      <Popover\n        className={clsx(\n          popoverClassNames.root,\n          stylesPopover[popoverClassNames.root],\n        )}\n      >\n        <ListBox className={clsx(classNames.list, styles[classNames.list])}>\n          {options?.map(option => (\n            <ListBoxItem\n              key={option.value}\n              id={option.value}\n              className={clsx(classNames.item, styles[classNames.item])}\n            >\n              <div\n                className={clsx(\n                  classNames.itemIndicator,\n                  styles[classNames.itemIndicator],\n                )}\n              >\n                <RiCheckLine />\n              </div>\n              <Text\n                slot=\"label\"\n                className={clsx(\n                  classNames.itemLabel,\n                  styles[classNames.itemLabel],\n                )}\n              >\n                {option.label}\n              </Text>\n            </ListBoxItem>\n          ))}\n        </ListBox>\n      </Popover>\n    </AriaSelect>\n  );\n});\n\nSelect.displayName = 'Select';\n"],"names":["AriaSelect"],"mappings":"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"}

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

@@ -0,0 +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 components {\n  .Select-module_bui-Select__LDZ15[data-invalid] {\n    & .Select-module_bui-SelectTrigger__3kJBt {\n      border-color: var(--bui-fg-danger);\n    }\n  }\n\n  .Select-module_bui-SelectTrigger__3kJBt {\n    box-sizing: border-box;\n    border-radius: var(--bui-radius-3);\n    border: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n    gap: var(--bui-space-2);\n    width: 100%;\n\n    & svg {\n      flex-shrink: 0;\n      color: var(--bui-fg-secondary);\n    }\n\n    &[data-size='small'] {\n      height: 2rem;\n      padding-inline: var(--bui-space-3);\n    }\n\n    &[data-size='medium'] {\n      height: 3rem;\n      padding-inline: var(--bui-space-4);\n    }\n\n    &[data-size='small'] svg {\n      width: 1rem;\n      height: 1rem;\n    }\n\n    &[data-size='medium'] svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &:hover {\n      transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n      border-color: var(--bui-border-hover);\n    }\n\n    &:focus-visible {\n      border-color: var(--bui-border-pressed);\n      outline: 0;\n    }\n\n    &[data-invalid] {\n      border-color: var(--bui-fg-danger);\n    }\n    &[data-invalid]:hover {\n      border-width: 2px;\n    }\n\n    &[data-invalid]:focus-visible {\n      border-width: 2px;\n    }\n\n    &[disabled] {\n      cursor: not-allowed;\n      border-color: var(--bui-border-disabled);\n      color: var(--bui-fg-disabled);\n    }\n\n    &[disabled] .Select-module_bui-SelectValue__jdoc- {\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-popup-open] .Select-module_bui-SelectIcon__e97yW {\n      transform: rotate(180deg);\n    }\n  }\n\n  .Select-module_bui-SelectValue__jdoc- {\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    width: 100%;\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    text-align: left;\n\n    & .Select-module_bui-SelectItemIndicator__1y7zW {\n      display: none;\n    }\n\n    &[disabled] {\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select-module_bui-SelectItem__145pz {\n    position: relative;\n    width: var(--anchor-width);\n    display: grid;\n    grid-template-areas: 'icon text';\n    grid-template-columns: 1rem 1fr;\n    align-items: center;\n    padding-block: var(--bui-space-2);\n    padding-left: var(--bui-space-3);\n    padding-right: var(--bui-space-4);\n    color: var(--bui-fg-primary);\n    border-radius: var(--bui-radius-3);\n    cursor: pointer;\n    user-select: none;\n    font-size: var(--bui-font-size-3);\n    gap: var(--bui-space-1);\n    outline: none;\n\n    &[data-focused] {\n      z-index: 0;\n      position: relative;\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-focused]::before {\n      content: '';\n      z-index: -1;\n      position: absolute;\n      inset-block: 0;\n      inset-inline: 0.25rem;\n      border-radius: 0.25rem;\n      background-color: var(--bui-bg-tint-hover);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-selected] .Select-module_bui-SelectItemIndicator__1y7zW {\n      opacity: 1;\n    }\n  }\n\n  .Select-module_bui-SelectItemIndicator__1y7zW {\n    grid-area: icon;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  .Select-module_bui-SelectItemLabel__1N_y- {\n    flex: 1;\n    grid-area: text;\n  }\n}\n";
+var styles = {"bui-Select":"Select-module_bui-Select__LDZ15","bui-SelectTrigger":"Select-module_bui-SelectTrigger__3kJBt","bui-SelectValue":"Select-module_bui-SelectValue__jdoc-","bui-SelectIcon":"Select-module_bui-SelectIcon__e97yW","bui-SelectItemIndicator":"Select-module_bui-SelectItemIndicator__1y7zW","bui-SelectItem":"Select-module_bui-SelectItem__145pz","bui-SelectItemLabel":"Select-module_bui-SelectItemLabel__1N_y-"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=Select.module.css.esm.js.map

package/dist/components/Select/Select.module.css.esm.js.map

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