@backstage/ui 0.13.2 → 0.14.0-next.1

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__1c7774ee5f {\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__1c7774ee5f {\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__1c7774ee5f {\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__1c7774ee5f {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &[data-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__1c7774ee5f {\n      background: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-open] .Menu_bui-MenuItemWrapper__1c7774ee5f {\n      background: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-color='danger'] .Menu_bui-MenuItemWrapper__1c7774ee5f {\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-color='danger'][data-focused] .Menu_bui-MenuItemWrapper__1c7774ee5f {\n      background: var(--bui-bg-danger);\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-has-submenu] {\n      & > .Menu_bui-MenuItemWrapper__1c7774ee5f > .Menu_bui-MenuItemArrow__1c7774ee5f {\n        display: block;\n      }\n    }\n  }\n\n  .Menu_bui-MenuItemWrapper__1c7774ee5f {\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__1c7774ee5f {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &:hover .Menu_bui-MenuItemWrapper__1c7774ee5f {\n      background: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-selected] .Menu_bui-MenuItemListBoxCheck__1c7774ee5f {\n      & > svg {\n        opacity: 1;\n        color: var(--bui-fg-primary);\n      }\n    }\n  }\n\n  .Menu_bui-MenuItemListBoxCheck__1c7774ee5f {\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__1c7774ee5f {\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__1c7774ee5f {\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__1c7774ee5f {\n    &:first-child .Menu_bui-MenuSectionHeader__1c7774ee5f {\n      padding-top: 0;\n    }\n  }\n\n  .Menu_bui-MenuSectionHeader__1c7774ee5f {\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__1c7774ee5f {\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__1c7774ee5f {\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__1c7774ee5f {\n        visibility: hidden;\n      }\n    }\n  }\n\n  .Menu_bui-MenuSearchFieldInput__1c7774ee5f {\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__1c7774ee5f {\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__1c7774ee5f {\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__1c7774ee5f","bui-MenuInner":"Menu_bui-MenuInner__1c7774ee5f","bui-MenuContent":"Menu_bui-MenuContent__1c7774ee5f","bui-MenuItem":"Menu_bui-MenuItem__1c7774ee5f","bui-MenuItemWrapper":"Menu_bui-MenuItemWrapper__1c7774ee5f","bui-MenuItemArrow":"Menu_bui-MenuItemArrow__1c7774ee5f","bui-MenuItemListBox":"Menu_bui-MenuItemListBox__1c7774ee5f","bui-MenuItemListBoxCheck":"Menu_bui-MenuItemListBoxCheck__1c7774ee5f","bui-MenuItemContent":"Menu_bui-MenuItemContent__1c7774ee5f","bui-MenuSection":"Menu_bui-MenuSection__1c7774ee5f","bui-MenuSectionHeader":"Menu_bui-MenuSectionHeader__1c7774ee5f","bui-MenuSeparator":"Menu_bui-MenuSeparator__1c7774ee5f","bui-MenuSearchField":"Menu_bui-MenuSearchField__1c7774ee5f","bui-MenuSearchFieldClear":"Menu_bui-MenuSearchFieldClear__1c7774ee5f","bui-MenuSearchFieldInput":"Menu_bui-MenuSearchFieldInput__1c7774ee5f","bui-MenuEmptyState":"Menu_bui-MenuEmptyState__1c7774ee5f"};
+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__1811272318 {\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__1811272318 {\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__1811272318 {\n    max-height: inherit;\n    box-sizing: border-box;\n    overflow: auto;\n    min-width: 150px;\n    outline: none;\n    padding-block: var(--bui-space-1);\n  }\n\n  .Menu_bui-MenuItem__1811272318 {\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    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-3);\n    gap: var(--bui-space-6);\n    cursor: pointer;\n    margin-inline: var(--bui-space-1);\n\n    &[data-focus-visible] {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: -2px;\n    }\n\n    &[data-focused] {\n      background: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-open] {\n      background: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-color='danger'] {\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-color='danger'][data-focused] {\n      background: var(--bui-bg-danger);\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-has-submenu] {\n      & > .Menu_bui-MenuItemArrow__1811272318 {\n        display: block;\n      }\n    }\n  }\n\n  .Menu_bui-MenuItemListBox__1811272318 {\n    display: flex;\n    align-items: center;\n    height: 2rem;\n    padding-inline: var(--bui-space-2);\n    border-radius: var(--bui-radius-2);\n    outline: none;\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-3);\n    cursor: pointer;\n\n    &[data-focus-visible] {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: -2px;\n    }\n\n    &[data-hovered],\n    &[data-focused] {\n      background: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-selected] .Menu_bui-MenuItemListBoxCheck__1811272318 {\n      & > svg {\n        opacity: 1;\n        color: var(--bui-fg-primary);\n      }\n    }\n  }\n\n  .Menu_bui-MenuItemListBoxCheck__1811272318 {\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__1811272318 {\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__1811272318 {\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__1811272318 {\n    &:first-child .Menu_bui-MenuSectionHeader__1811272318 {\n      padding-top: 0;\n    }\n  }\n\n  .Menu_bui-MenuSectionHeader__1811272318 {\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__1811272318 {\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__1811272318 {\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__1811272318 {\n        visibility: hidden;\n      }\n    }\n  }\n\n  .Menu_bui-MenuSearchFieldInput__1811272318 {\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__1811272318 {\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__1811272318 {\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__1811272318","bui-MenuInner":"Menu_bui-MenuInner__1811272318","bui-MenuContent":"Menu_bui-MenuContent__1811272318","bui-MenuItem":"Menu_bui-MenuItem__1811272318","bui-MenuItemArrow":"Menu_bui-MenuItemArrow__1811272318","bui-MenuItemListBox":"Menu_bui-MenuItemListBox__1811272318","bui-MenuItemListBoxCheck":"Menu_bui-MenuItemListBoxCheck__1811272318","bui-MenuItemContent":"Menu_bui-MenuItemContent__1811272318","bui-MenuSection":"Menu_bui-MenuSection__1811272318","bui-MenuSectionHeader":"Menu_bui-MenuSectionHeader__1811272318","bui-MenuSeparator":"Menu_bui-MenuSeparator__1811272318","bui-MenuSearchField":"Menu_bui-MenuSearchField__1811272318","bui-MenuSearchFieldClear":"Menu_bui-MenuSearchFieldClear__1811272318","bui-MenuSearchFieldInput":"Menu_bui-MenuSearchFieldInput__1811272318","bui-MenuEmptyState":"Menu_bui-MenuEmptyState__1811272318"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -61,7 +61,6 @@ const MenuItemDefinition = defineComponent()({
   styles,
   classNames: {
     root: "bui-MenuItem",
-    itemWrapper: "bui-MenuItemWrapper",
     itemContent: "bui-MenuItemContent",
     itemArrow: "bui-MenuItemArrow"
   },
@@ -81,7 +80,6 @@ const MenuListBoxItemDefinition = defineComponent()({
   resolveHref: true,
   classNames: {
     root: "bui-MenuItemListBox",
-    itemWrapper: "bui-MenuItemWrapper",
     itemContent: "bui-MenuItemContent",
     check: "bui-MenuItemListBoxCheck"
   },

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 { 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  analytics: true,\n  resolveHref: true,\n  propDefs: {\n    iconStart: {},\n    children: {},\n    color: { dataAttribute: true, default: 'primary' },\n    href: {},\n    noTrack: {},\n    className: {},\n  },\n});\n\n/** @internal */\nexport const MenuListBoxItemDefinition =\n  defineComponent<MenuListBoxItemOwnProps>()({\n    styles,\n    resolveHref: true,\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":";;;;;;;;;;AA8BA,MAAM,qBAAA,GAAwB;AAAA,EAC5B,IAAA,EAAM,iBAAA;AAAA,EACN,KAAA,EAAO,eAAA;AAAA,EACP,OAAA,EAAS;AACX,CAAA;AAGA,MAAM,0BAAA,GAA6B;AAAA,EACjC,GAAG,qBAAA;AAAA,EACH,WAAA,EAAa,qBAAA;AAAA,EACb,gBAAA,EAAkB,0BAAA;AAAA,EAClB,gBAAA,EAAkB;AACpB,CAAA;AAGA,MAAM,mBAAA,GAAsB;AAAA,EAC1B,SAAA,EAAW,EAAE,OAAA,EAAS,cAAA,EAAe;AAAA,EACrC,WAAA,EAAa,EAAE,OAAA,EAAS,KAAA,EAAM;AAAA,EAC9B,UAAU,EAAC;AAAA,EACX,WAAW,EAAC;AAAA,EACZ,OAAO,EAAC;AAAA,EACR,WAAW;AACb,CAAA;AAMO,MAAM,cAAA,GAAiB,iBAA8B,CAAE;AAAA,EAC5D,MAAA;AAAA,EACA,UAAA,EAAY,qBAAA;AAAA,EACZ,QAAA,EAAU;AACZ,CAAC;AAGM,MAAM,qBAAA,GAAwB,iBAAqC,CAAE;AAAA,EAC1E,MAAA;AAAA,EACA,UAAA,EAAY,qBAAA;AAAA,EACZ,QAAA,EAAU;AAAA,IACR,GAAG,mBAAA;AAAA,IACH,aAAA,EAAe,EAAE,OAAA,EAAS,QAAA;AAAS;AAEvC,CAAC;AAGM,MAAM,0BAAA,GACX,iBAA0C,CAAE;AAAA,EAC1C,MAAA;AAAA,EACA,UAAA,EAAY,0BAAA;AAAA,EACZ,QAAA,EAAU;AAAA,IACR,GAAG,mBAAA;AAAA,IACH,aAAa;AAAC;AAElB,CAAC;AAGI,MAAM,iCAAA,GACX,iBAAiD,CAAE;AAAA,EACjD,MAAA;AAAA,EACA,UAAA,EAAY,0BAAA;AAAA,EACZ,QAAA,EAAU;AAAA,IACR,GAAG,mBAAA;AAAA,IACH,aAAa,EAAC;AAAA,IACd,aAAA,EAAe,EAAE,OAAA,EAAS,QAAA;AAAS;AAEvC,CAAC;AAGI,MAAM,kBAAA,GAAqB,iBAAkC,CAAE;AAAA,EACpE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,cAAA;AAAA,IACN,WAAA,EAAa,qBAAA;AAAA,IACb,WAAA,EAAa,qBAAA;AAAA,IACb,SAAA,EAAW;AAAA,GACb;AAAA,EACA,SAAA,EAAW,IAAA;AAAA,EACX,WAAA,EAAa,IAAA;AAAA,EACb,QAAA,EAAU;AAAA,IACR,WAAW,EAAC;AAAA,IACZ,UAAU,EAAC;AAAA,IACX,KAAA,EAAO,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,SAAA,EAAU;AAAA,IACjD,MAAM,EAAC;AAAA,IACP,SAAS,EAAC;AAAA,IACV,WAAW;AAAC;AAEhB,CAAC;AAGM,MAAM,yBAAA,GACX,iBAAyC,CAAE;AAAA,EACzC,MAAA;AAAA,EACA,WAAA,EAAa,IAAA;AAAA,EACb,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,qBAAA;AAAA,IACN,WAAA,EAAa,qBAAA;AAAA,IACb,WAAA,EAAa,qBAAA;AAAA,IACb,KAAA,EAAO;AAAA,GACT;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;AAGI,MAAM,qBAAA,GAAwB,iBAAqC,CAAE;AAAA,EAC1E,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,iBAAA;AAAA,IACN,MAAA,EAAQ;AAAA,GACV;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAO,EAAC;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;AAGM,MAAM,0BAA0B,eAAA,EAAuC;AAAA,EAC5E;AAAA,IACE,MAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,KACR;AAAA,IACA,QAAA,EAAU;AAAA,MACR,WAAW;AAAC;AACd;AAEJ;AAGO,MAAM,wBAAA,GAA2B,iBAAoB,CAAE;AAAA,EAC5D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,UAAU;AACZ,CAAC;;;;"}
+{"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    itemContent: 'bui-MenuItemContent',\n    itemArrow: 'bui-MenuItemArrow',\n  },\n  analytics: true,\n  resolveHref: true,\n  propDefs: {\n    iconStart: {},\n    children: {},\n    color: { dataAttribute: true, default: 'primary' },\n    href: {},\n    noTrack: {},\n    className: {},\n  },\n});\n\n/** @internal */\nexport const MenuListBoxItemDefinition =\n  defineComponent<MenuListBoxItemOwnProps>()({\n    styles,\n    resolveHref: true,\n    classNames: {\n      root: 'bui-MenuItemListBox',\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.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 { 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;;;;"}
+{"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/**\n * A text input for password entry with a toggleable visibility button, integrated label, and inline error display.\n *\n * @public\n */\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":";;;;;;;;;;;AAmCO,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/PluginHeader/PluginHeader.esm.js

@@ -1,4 +1,4 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Tabs, TabList, Tab } from '../Tabs/Tabs.esm.js';
 import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
 import '../Tabs/Tabs.module.css.esm.js';
@@ -7,10 +7,12 @@ import { useRef, useMemo, Children } from 'react';
 import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect.esm.js';
 import { Box } from '../Box/Box.esm.js';
 import '../Box/Box.module.css.esm.js';
-import { Link } from 'react-aria-components';
+import { Link } from '../Link/Link.esm.js';
+import '../Link/Link.module.css.esm.js';
 import { RiShapesLine } from '@remixicon/react';
 import { Text } from '../Text/Text.esm.js';
 import '../Text/Text.module.css.esm.js';
+import { BgReset } from '../../hooks/useBg.esm.js';
 
 const PluginHeader = (props) => {
   const { ownProps } = useDefinition(PluginHeaderDefinition, props);
@@ -25,9 +27,6 @@ const PluginHeader = (props) => {
   } = ownProps;
   const hasTabs = tabs && tabs.length > 0;
   const headerRef = useRef(null);
-  const toolbarWrapperRef = useRef(null);
-  const toolbarContentRef = useRef(null);
-  const toolbarControlsRef = useRef(null);
   const animationFrameRef = useRef(void 0);
   const lastAppliedHeightRef = useRef(void 0);
   const actionChildren = useMemo(() => {
@@ -81,15 +80,23 @@ const PluginHeader = (props) => {
       document.documentElement.style.removeProperty("--bui-header-height");
     };
   }, []);
-  const titleContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: classes.toolbarIcon, "aria-hidden": "true", children: icon || /* @__PURE__ */ jsx(RiShapesLine, {}) }),
-    /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: title || "Your plugin" })
-  ] });
-  return /* @__PURE__ */ jsxs("header", { ref: headerRef, className: classes.root, children: [
-    /* @__PURE__ */ jsx("div", { className: classes.toolbar, "data-has-tabs": hasTabs, children: /* @__PURE__ */ jsxs("div", { className: classes.toolbarWrapper, ref: toolbarWrapperRef, children: [
-      /* @__PURE__ */ jsx("div", { className: classes.toolbarContent, ref: toolbarContentRef, children: /* @__PURE__ */ jsx(Text, { as: "h1", variant: "body-medium", children: titleLink ? /* @__PURE__ */ jsx(Link, { className: classes.toolbarName, href: titleLink, children: titleContent }) : /* @__PURE__ */ jsx("div", { className: classes.toolbarName, children: titleContent }) }) }),
-      /* @__PURE__ */ jsx("div", { className: classes.toolbarControls, ref: toolbarControlsRef, children: actionChildren })
-    ] }) }),
+  const titleText = title || "Your plugin";
+  return /* @__PURE__ */ jsx(BgReset, { children: /* @__PURE__ */ jsxs("header", { ref: headerRef, className: classes.root, children: [
+    /* @__PURE__ */ jsxs(Box, { bg: "neutral", className: classes.toolbar, "data-has-tabs": hasTabs, children: [
+      /* @__PURE__ */ jsxs("div", { className: classes.toolbarContent, children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            bg: "neutral",
+            className: classes.toolbarIcon,
+            "aria-hidden": "true",
+            children: icon || /* @__PURE__ */ jsx(RiShapesLine, {})
+          }
+        ),
+        /* @__PURE__ */ jsx("h1", { className: classes.toolbarName, children: titleLink ? /* @__PURE__ */ jsx(Link, { href: titleLink, standalone: true, variant: "body-medium", children: titleText }) : /* @__PURE__ */ jsx(Text, { as: "span", variant: "body-medium", children: titleText }) })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: classes.toolbarControls, children: actionChildren })
+    ] }),
     tabs && /* @__PURE__ */ jsx(Box, { bg: "neutral", className: classes.tabs, children: /* @__PURE__ */ jsx(Tabs, { onSelectionChange: onTabSelectionChange, children: /* @__PURE__ */ jsx(TabList, { children: tabs?.map((tab) => /* @__PURE__ */ jsx(
       Tab,
       {
@@ -100,7 +107,7 @@ const PluginHeader = (props) => {
       },
       tab.id
     )) }) }) })
-  ] });
+  ] }) });
 };
 
 export { PluginHeader };

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

@@ -1 +1 @@
-{"version":3,"file":"PluginHeader.esm.js","sources":["../../../src/components/PluginHeader/PluginHeader.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 type { PluginHeaderProps } from './types';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { PluginHeaderDefinition } from './definition';\nimport { type NavigateOptions } from 'react-router-dom';\nimport { Children, useMemo, useRef } from 'react';\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect';\nimport { Box } from '../Box';\nimport { Link } from 'react-aria-components';\nimport { RiShapesLine } from '@remixicon/react';\nimport { Text } from '../Text';\n\ndeclare module 'react-aria-components' {\n  interface RouterConfig {\n    routerOptions: NavigateOptions;\n  }\n}\n\n/**\n * A component that renders a plugin header with icon, title, custom actions,\n * and navigation tabs.\n *\n * @public\n */\nexport const PluginHeader = (props: PluginHeaderProps) => {\n  const { ownProps } = useDefinition(PluginHeaderDefinition, props);\n  const {\n    classes,\n    tabs,\n    icon,\n    title,\n    titleLink,\n    customActions,\n    onTabSelectionChange,\n  } = ownProps;\n\n  const hasTabs = tabs && tabs.length > 0;\n  const headerRef = useRef<HTMLElement>(null);\n  const toolbarWrapperRef = useRef<HTMLDivElement>(null);\n  const toolbarContentRef = useRef<HTMLDivElement>(null);\n  const toolbarControlsRef = useRef<HTMLDivElement>(null);\n  const animationFrameRef = useRef<number | undefined>(undefined);\n  const lastAppliedHeightRef = useRef<number | undefined>(undefined);\n\n  const actionChildren = useMemo(() => {\n    return Children.toArray(customActions);\n  }, [customActions]);\n\n  useIsomorphicLayoutEffect(() => {\n    const el = headerRef.current;\n    if (!el) {\n      return undefined;\n    }\n\n    const cancelScheduledUpdate = () => {\n      if (animationFrameRef.current === undefined) {\n        return;\n      }\n\n      cancelAnimationFrame(animationFrameRef.current);\n      animationFrameRef.current = undefined;\n    };\n\n    const applyHeight = (height: number) => {\n      if (lastAppliedHeightRef.current === height) {\n        return;\n      }\n\n      lastAppliedHeightRef.current = height;\n      document.documentElement.style.setProperty(\n        '--bui-header-height',\n        `${height}px`,\n      );\n    };\n\n    const scheduleHeightUpdate = () => {\n      cancelScheduledUpdate();\n      animationFrameRef.current = requestAnimationFrame(() => {\n        animationFrameRef.current = undefined;\n        applyHeight(el.offsetHeight);\n      });\n    };\n\n    // Set height once immediately so the initial layout is correct.\n    applyHeight(el.offsetHeight);\n\n    // Observe for resize changes if ResizeObserver is available\n    // (not present in Jest/jsdom by default)\n    if (typeof ResizeObserver === 'undefined') {\n      return () => {\n        cancelScheduledUpdate();\n        lastAppliedHeightRef.current = undefined;\n        document.documentElement.style.removeProperty('--bui-header-height');\n      };\n    }\n\n    const observer = new ResizeObserver(() => {\n      scheduleHeightUpdate();\n    });\n    observer.observe(el);\n\n    return () => {\n      observer.disconnect();\n      cancelScheduledUpdate();\n      lastAppliedHeightRef.current = undefined;\n      document.documentElement.style.removeProperty('--bui-header-height');\n    };\n  }, []);\n\n  const titleContent = (\n    <>\n      <div className={classes.toolbarIcon} aria-hidden=\"true\">\n        {icon || <RiShapesLine />}\n      </div>\n      <Text variant=\"body-medium\">{title || 'Your plugin'}</Text>\n    </>\n  );\n\n  return (\n    <header ref={headerRef} className={classes.root}>\n      <div className={classes.toolbar} data-has-tabs={hasTabs}>\n        <div className={classes.toolbarWrapper} ref={toolbarWrapperRef}>\n          <div className={classes.toolbarContent} ref={toolbarContentRef}>\n            <Text as=\"h1\" variant=\"body-medium\">\n              {titleLink ? (\n                <Link className={classes.toolbarName} href={titleLink}>\n                  {titleContent}\n                </Link>\n              ) : (\n                <div className={classes.toolbarName}>{titleContent}</div>\n              )}\n            </Text>\n          </div>\n          <div className={classes.toolbarControls} ref={toolbarControlsRef}>\n            {actionChildren}\n          </div>\n        </div>\n      </div>\n      {tabs && (\n        <Box bg=\"neutral\" className={classes.tabs}>\n          <Tabs onSelectionChange={onTabSelectionChange}>\n            <TabList>\n              {tabs?.map(tab => (\n                <Tab\n                  key={tab.id}\n                  id={tab.id}\n                  href={tab.href}\n                  matchStrategy={tab.matchStrategy}\n                >\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </Box>\n      )}\n    </header>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PluginHeader.esm.js","sources":["../../../src/components/PluginHeader/PluginHeader.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 type { PluginHeaderProps } from './types';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { PluginHeaderDefinition } from './definition';\nimport { type NavigateOptions } from 'react-router-dom';\nimport { Children, useMemo, useRef } from 'react';\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect';\nimport { Box } from '../Box';\nimport { Link } from '../Link';\nimport { RiShapesLine } from '@remixicon/react';\nimport { Text } from '../Text';\nimport { BgReset } from '../../hooks/useBg';\n\ndeclare module 'react-aria-components' {\n  interface RouterConfig {\n    routerOptions: NavigateOptions;\n  }\n}\n\n/**\n * Renders a plugin header with icon, title, custom actions, and optional tabs.\n * Always participates in the background context system so descendants (e.g. buttons)\n * get the correct `data-on-bg` styling inside the toolbar and tabs.\n *\n * @public\n */\nexport const PluginHeader = (props: PluginHeaderProps) => {\n  const { ownProps } = useDefinition(PluginHeaderDefinition, props);\n  const {\n    classes,\n    tabs,\n    icon,\n    title,\n    titleLink,\n    customActions,\n    onTabSelectionChange,\n  } = ownProps;\n\n  const hasTabs = tabs && tabs.length > 0;\n  const headerRef = useRef<HTMLElement>(null);\n  const animationFrameRef = useRef<number | undefined>(undefined);\n  const lastAppliedHeightRef = useRef<number | undefined>(undefined);\n\n  const actionChildren = useMemo(() => {\n    return Children.toArray(customActions);\n  }, [customActions]);\n\n  useIsomorphicLayoutEffect(() => {\n    const el = headerRef.current;\n    if (!el) {\n      return undefined;\n    }\n\n    const cancelScheduledUpdate = () => {\n      if (animationFrameRef.current === undefined) {\n        return;\n      }\n\n      cancelAnimationFrame(animationFrameRef.current);\n      animationFrameRef.current = undefined;\n    };\n\n    const applyHeight = (height: number) => {\n      if (lastAppliedHeightRef.current === height) {\n        return;\n      }\n\n      lastAppliedHeightRef.current = height;\n      document.documentElement.style.setProperty(\n        '--bui-header-height',\n        `${height}px`,\n      );\n    };\n\n    const scheduleHeightUpdate = () => {\n      cancelScheduledUpdate();\n      animationFrameRef.current = requestAnimationFrame(() => {\n        animationFrameRef.current = undefined;\n        applyHeight(el.offsetHeight);\n      });\n    };\n\n    // Set height once immediately so the initial layout is correct.\n    applyHeight(el.offsetHeight);\n\n    // Observe for resize changes if ResizeObserver is available\n    // (not present in Jest/jsdom by default)\n    if (typeof ResizeObserver === 'undefined') {\n      return () => {\n        cancelScheduledUpdate();\n        lastAppliedHeightRef.current = undefined;\n        document.documentElement.style.removeProperty('--bui-header-height');\n      };\n    }\n\n    const observer = new ResizeObserver(() => {\n      scheduleHeightUpdate();\n    });\n    observer.observe(el);\n\n    return () => {\n      observer.disconnect();\n      cancelScheduledUpdate();\n      lastAppliedHeightRef.current = undefined;\n      document.documentElement.style.removeProperty('--bui-header-height');\n    };\n  }, []);\n\n  const titleText = title || 'Your plugin';\n\n  return (\n    <BgReset>\n      <header ref={headerRef} className={classes.root}>\n        <Box bg=\"neutral\" className={classes.toolbar} data-has-tabs={hasTabs}>\n          <div className={classes.toolbarContent}>\n            <Box\n              bg=\"neutral\"\n              className={classes.toolbarIcon}\n              aria-hidden=\"true\"\n            >\n              {icon || <RiShapesLine />}\n            </Box>\n            <h1 className={classes.toolbarName}>\n              {titleLink ? (\n                <Link href={titleLink} standalone variant=\"body-medium\">\n                  {titleText}\n                </Link>\n              ) : (\n                <Text as=\"span\" variant=\"body-medium\">\n                  {titleText}\n                </Text>\n              )}\n            </h1>\n          </div>\n          <div className={classes.toolbarControls}>{actionChildren}</div>\n        </Box>\n        {tabs && (\n          <Box bg=\"neutral\" className={classes.tabs}>\n            <Tabs onSelectionChange={onTabSelectionChange}>\n              <TabList>\n                {tabs?.map(tab => (\n                  <Tab\n                    key={tab.id}\n                    id={tab.id}\n                    href={tab.href}\n                    matchStrategy={tab.matchStrategy}\n                  >\n                    {tab.label}\n                  </Tab>\n                ))}\n              </TabList>\n            </Tabs>\n          </Box>\n        )}\n      </header>\n    </BgReset>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/PluginHeader/PluginHeader.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  .PluginHeader_bui-PluginHeaderToolbarWrapper__f902e1eb9c {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    padding-inline: var(--bui-space-5);\n    border-bottom: 1px solid var(--bui-border-1);\n    color: var(--bui-fg-primary);\n    height: 52px;\n  }\n\n  .PluginHeader_bui-PluginHeaderToolbarContent__f902e1eb9c {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .PluginHeader_bui-PluginHeaderToolbarName__f902e1eb9c {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-regular);\n    flex-shrink: 0;\n  }\n\n  .PluginHeader_bui-PluginHeaderToolbarIcon__f902e1eb9c {\n    width: 16px;\n    height: 16px;\n    color: var(--bui-fg-primary);\n\n    & svg {\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  .PluginHeader_bui-PluginHeaderToolbarControls__f902e1eb9c {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .PluginHeader_bui-PluginHeaderTabsWrapper__f902e1eb9c {\n    padding-inline: var(--bui-space-3);\n    border-bottom: 1px solid var(--bui-border-1);\n  }\n}\n";
-var styles = {"bui-PluginHeaderToolbarWrapper":"PluginHeader_bui-PluginHeaderToolbarWrapper__f902e1eb9c","bui-PluginHeaderToolbarContent":"PluginHeader_bui-PluginHeaderToolbarContent__f902e1eb9c","bui-PluginHeaderToolbarName":"PluginHeader_bui-PluginHeaderToolbarName__f902e1eb9c","bui-PluginHeaderToolbarIcon":"PluginHeader_bui-PluginHeaderToolbarIcon__f902e1eb9c","bui-PluginHeaderToolbarControls":"PluginHeader_bui-PluginHeaderToolbarControls__f902e1eb9c","bui-PluginHeaderTabsWrapper":"PluginHeader_bui-PluginHeaderTabsWrapper__f902e1eb9c"};
+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  .PluginHeader_bui-PluginHeaderToolbar__a74579b2ac {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    padding-inline: var(--bui-space-5);\n    color: var(--bui-fg-primary);\n    height: 52px;\n    border-bottom: 1px solid var(--bui-border-1);\n  }\n\n  .PluginHeader_bui-PluginHeaderToolbarContent__a74579b2ac {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .PluginHeader_bui-PluginHeaderToolbarName__a74579b2ac {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-regular);\n    flex-shrink: 0;\n  }\n\n  .PluginHeader_bui-PluginHeaderToolbarIcon__a74579b2ac {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    width: 2rem;\n    height: 2rem;\n    border-radius: var(--bui-radius-2);\n    color: var(--bui-fg-primary);\n\n    & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .PluginHeader_bui-PluginHeaderToolbarControls__a74579b2ac {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .PluginHeader_bui-PluginHeaderTabsWrapper__a74579b2ac {\n    padding-inline: var(--bui-space-3);\n    border-bottom: 1px solid var(--bui-border-1);\n  }\n}\n";
+var styles = {"bui-PluginHeaderToolbar":"PluginHeader_bui-PluginHeaderToolbar__a74579b2ac","bui-PluginHeaderToolbarContent":"PluginHeader_bui-PluginHeaderToolbarContent__a74579b2ac","bui-PluginHeaderToolbarName":"PluginHeader_bui-PluginHeaderToolbarName__a74579b2ac","bui-PluginHeaderToolbarIcon":"PluginHeader_bui-PluginHeaderToolbarIcon__a74579b2ac","bui-PluginHeaderToolbarControls":"PluginHeader_bui-PluginHeaderToolbarControls__a74579b2ac","bui-PluginHeaderTabsWrapper":"PluginHeader_bui-PluginHeaderTabsWrapper__a74579b2ac"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -13,7 +13,6 @@ const PluginHeaderDefinition = defineComponent()({
   classNames: {
     root: "bui-PluginHeader",
     toolbar: "bui-PluginHeaderToolbar",
-    toolbarWrapper: "bui-PluginHeaderToolbarWrapper",
     toolbarContent: "bui-PluginHeaderToolbarContent",
     toolbarControls: "bui-PluginHeaderToolbarControls",
     toolbarIcon: "bui-PluginHeaderToolbarIcon",

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/PluginHeader/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 { PluginHeaderOwnProps } from './types';\nimport styles from './PluginHeader.module.css';\n\n/**\n * Component definition for PluginHeader\n * @public\n */\nexport const PluginHeaderDefinition = defineComponent<PluginHeaderOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-PluginHeader',\n    toolbar: 'bui-PluginHeaderToolbar',\n    toolbarWrapper: 'bui-PluginHeaderToolbarWrapper',\n    toolbarContent: 'bui-PluginHeaderToolbarContent',\n    toolbarControls: 'bui-PluginHeaderToolbarControls',\n    toolbarIcon: 'bui-PluginHeaderToolbarIcon',\n    toolbarName: 'bui-PluginHeaderToolbarName',\n    tabs: 'bui-PluginHeaderTabsWrapper',\n  },\n  propDefs: {\n    icon: {},\n    title: {},\n    titleLink: {},\n    customActions: {},\n    tabs: {},\n    onTabSelectionChange: {},\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;;;AAwBO,MAAM,sBAAA,GAAyB,iBAAsC,CAAE;AAAA,EAC5E,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,kBAAA;AAAA,IACN,OAAA,EAAS,yBAAA;AAAA,IACT,cAAA,EAAgB,gCAAA;AAAA,IAChB,cAAA,EAAgB,gCAAA;AAAA,IAChB,eAAA,EAAiB,iCAAA;AAAA,IACjB,WAAA,EAAa,6BAAA;AAAA,IACb,WAAA,EAAa,6BAAA;AAAA,IACb,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,MAAM,EAAC;AAAA,IACP,OAAO,EAAC;AAAA,IACR,WAAW,EAAC;AAAA,IACZ,eAAe,EAAC;AAAA,IAChB,MAAM,EAAC;AAAA,IACP,sBAAsB,EAAC;AAAA,IACvB,WAAW;AAAC;AAEhB,CAAC;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/PluginHeader/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 { PluginHeaderOwnProps } from './types';\nimport styles from './PluginHeader.module.css';\n\n/**\n * Component definition for PluginHeader\n * @public\n */\nexport const PluginHeaderDefinition = defineComponent<PluginHeaderOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-PluginHeader',\n    toolbar: 'bui-PluginHeaderToolbar',\n    toolbarContent: 'bui-PluginHeaderToolbarContent',\n    toolbarControls: 'bui-PluginHeaderToolbarControls',\n    toolbarIcon: 'bui-PluginHeaderToolbarIcon',\n    toolbarName: 'bui-PluginHeaderToolbarName',\n    tabs: 'bui-PluginHeaderTabsWrapper',\n  },\n  propDefs: {\n    icon: {},\n    title: {},\n    titleLink: {},\n    customActions: {},\n    tabs: {},\n    onTabSelectionChange: {},\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;;;AAwBO,MAAM,sBAAA,GAAyB,iBAAsC,CAAE;AAAA,EAC5E,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,kBAAA;AAAA,IACN,OAAA,EAAS,yBAAA;AAAA,IACT,cAAA,EAAgB,gCAAA;AAAA,IAChB,eAAA,EAAiB,iCAAA;AAAA,IACjB,WAAA,EAAa,6BAAA;AAAA,IACb,WAAA,EAAa,6BAAA;AAAA,IACb,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,MAAM,EAAC;AAAA,IACP,OAAO,EAAC;AAAA,IACR,WAAW,EAAC;AAAA,IACZ,eAAe,EAAC;AAAA,IAChB,MAAM,EAAC;AAAA,IACP,sBAAsB,EAAC;AAAA,IACvB,WAAW;AAAC;AAEhB,CAAC;;;;"}

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 { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { RadioGroupDefinition, RadioDefinition } from './definition';\n\nimport type { RadioGroupProps, RadioProps } from './types';\n\n/** @public */\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(RadioGroupDefinition, props);\n    const {\n      classes,\n      label,\n      secondaryLabel,\n      description,\n      isRequired,\n      children,\n    } = ownProps;\n\n    const ariaLabel = restProps['aria-label'];\n    const ariaLabelledBy = restProps['aria-labelledby'];\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 className={classes.root} {...restProps} ref={ref}>\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div className={classes.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 { ownProps, restProps } = useDefinition(RadioDefinition, props);\n\n  return (\n    <AriaRadio className={ownProps.classes.root} {...restProps} ref={ref} />\n  );\n});\n\nRadio.displayName = 'Radio';\n"],"names":["AriaRadioGroup","AriaRadio"],"mappings":";;;;;;;;;;AA6BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,sBAAsB,KAAK,CAAA;AACzE,IAAA,MAAM;AAAA,MACJ,OAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACF,GAAI,QAAA;AAEJ,IAAA,MAAM,SAAA,GAAY,UAAU,YAAY,CAAA;AACxC,IAAA,MAAM,cAAA,GAAiB,UAAU,iBAAiB,CAAA;AAElD,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,4BACGA,YAAA,EAAA,EAAe,SAAA,EAAW,QAAQ,IAAA,EAAO,GAAG,WAAW,GAAA,EACtD,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,KAAA;AAAA,UACA,cAAA,EAAgB,kBAAA;AAAA,UAChB;AAAA;AAAA,OACF;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,SAAU,QAAA,EAAS,CAAA;AAAA,0BAC1C,UAAA,EAAA,EAAW;AAAA,KAAA,EACd,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AAGlB,MAAM,KAAA,GAAQ,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,iBAAiB,KAAK,CAAA;AAEpE,EAAA,uBACE,GAAA,CAACC,WAAU,SAAA,EAAW,QAAA,CAAS,QAAQ,IAAA,EAAO,GAAG,WAAW,GAAA,EAAU,CAAA;AAE1E,CAAC;AAED,KAAA,CAAM,WAAA,GAAc,OAAA;;;;"}
+{"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 { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { RadioGroupDefinition, RadioDefinition } from './definition';\n\nimport type { RadioGroupProps, RadioProps } from './types';\n\n/**\n * A group of radio buttons for selecting a single option from a set, with an integrated label, description, and error display.\n *\n * @public\n */\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(RadioGroupDefinition, props);\n    const {\n      classes,\n      label,\n      secondaryLabel,\n      description,\n      isRequired,\n      children,\n    } = ownProps;\n\n    const ariaLabel = restProps['aria-label'];\n    const ariaLabelledBy = restProps['aria-labelledby'];\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 className={classes.root} {...restProps} ref={ref}>\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div className={classes.content}>{children}</div>\n        <FieldError />\n      </AriaRadioGroup>\n    );\n  },\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\n/**\n * A single radio button for use within a RadioGroup.\n *\n * @public\n */\nexport const Radio = forwardRef<HTMLLabelElement, RadioProps>((props, ref) => {\n  const { ownProps, restProps } = useDefinition(RadioDefinition, props);\n\n  return (\n    <AriaRadio className={ownProps.classes.root} {...restProps} ref={ref} />\n  );\n});\n\nRadio.displayName = 'Radio';\n"],"names":["AriaRadioGroup","AriaRadio"],"mappings":";;;;;;;;;;AAiCO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,sBAAsB,KAAK,CAAA;AACzE,IAAA,MAAM;AAAA,MACJ,OAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACF,GAAI,QAAA;AAEJ,IAAA,MAAM,SAAA,GAAY,UAAU,YAAY,CAAA;AACxC,IAAA,MAAM,cAAA,GAAiB,UAAU,iBAAiB,CAAA;AAElD,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,4BACGA,YAAA,EAAA,EAAe,SAAA,EAAW,QAAQ,IAAA,EAAO,GAAG,WAAW,GAAA,EACtD,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,KAAA;AAAA,UACA,cAAA,EAAgB,kBAAA;AAAA,UAChB;AAAA;AAAA,OACF;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,SAAU,QAAA,EAAS,CAAA;AAAA,0BAC1C,UAAA,EAAA,EAAW;AAAA,KAAA,EACd,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AAOlB,MAAM,KAAA,GAAQ,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,iBAAiB,KAAK,CAAA;AAEpE,EAAA,uBACE,GAAA,CAACC,WAAU,SAAA,EAAW,QAAA,CAAS,QAAQ,IAAA,EAAO,GAAG,WAAW,GAAA,EAAU,CAAA;AAE1E,CAAC;AAED,KAAA,CAAM,WAAA,GAAc,OAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"SearchAutocomplete.esm.js","sources":["../../../src/components/SearchAutocomplete/SearchAutocomplete.tsx"],"sourcesContent":["/*\n * Copyright 2026 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 { Children, useRef } from 'react';\nimport { useInteractOutside } from '@react-aria/interactions';\nimport {\n  Autocomplete,\n  SearchField as RASearchField,\n  Input,\n  Button as RAButton,\n  Popover as RAPopover,\n  ListBox,\n  ListBoxItem,\n  OverlayTriggerStateContext,\n} from 'react-aria-components';\nimport { useOverlayTriggerState } from '@react-stately/overlays';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n  SearchAutocompleteDefinition,\n  SearchAutocompleteItemDefinition,\n} from './definition';\nimport { Box } from '../Box';\nimport { BgReset } from '../../hooks/useBg';\nimport { VisuallyHidden } from '../VisuallyHidden';\n\nimport type {\n  SearchAutocompleteProps,\n  SearchAutocompleteItemProps,\n} from './types';\n\nconst SearchAutocompleteEmptyState = () => {\n  const { ownProps } = useDefinition(SearchAutocompleteDefinition, {});\n  return <div className={ownProps.classes.emptyState}>No results found.</div>;\n};\n\n/** @public */\nexport function SearchAutocomplete(props: SearchAutocompleteProps) {\n  const { ownProps, dataAttributes } = useDefinition(\n    SearchAutocompleteDefinition,\n    props,\n  );\n  const {\n    classes,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    inputValue,\n    onInputChange,\n    placeholder,\n    popoverWidth,\n    popoverPlacement = 'bottom start',\n    children,\n    isLoading,\n    defaultOpen,\n    style,\n  } = ownProps;\n\n  const triggerRef = useRef<HTMLDivElement | null>(null);\n  const popoverRef = useRef<HTMLElement | null>(null);\n  const hasValue = !!inputValue;\n  const hasChildren = Children.count(children) > 0;\n\n  let liveMessage = '';\n  if (isLoading) {\n    liveMessage = 'Searching';\n  } else if (hasValue && !hasChildren) {\n    liveMessage = 'No results found';\n  }\n  const overlayState = useOverlayTriggerState({ defaultOpen });\n\n  // Close on interact outside — same pattern as ComboBox.\n  // isNonModal disables useOverlay's built-in useInteractOutside,\n  // so we add our own that filters out clicks on the trigger.\n  useInteractOutside({\n    ref: popoverRef,\n    onInteractOutside: e => {\n      const target = e.target as Element;\n      if (triggerRef.current?.contains(target)) {\n        return;\n      }\n      overlayState.close();\n    },\n    isDisabled: !overlayState.isOpen,\n  });\n\n  return (\n    <OverlayTriggerStateContext.Provider value={overlayState}>\n      <Autocomplete\n        inputValue={inputValue}\n        onInputChange={value => {\n          onInputChange?.(value);\n          if (value) {\n            overlayState.open();\n          } else {\n            overlayState.close();\n          }\n        }}\n      >\n        <RASearchField\n          className={classes.searchField}\n          aria-label={ariaLabel ?? (ariaLabelledBy ? undefined : placeholder)}\n          aria-labelledby={ariaLabelledBy}\n          data-size={dataAttributes['data-size']}\n          onKeyDown={e => {\n            if (e.key === 'Enter' && !overlayState.isOpen && hasValue) {\n              e.preventDefault();\n              overlayState.open();\n            }\n          }}\n        >\n          <div\n            ref={triggerRef}\n            className={classes.root}\n            {...dataAttributes}\n            style={style}\n          >\n            <div aria-hidden=\"true\">\n              <RiSearch2Line />\n            </div>\n            <Input\n              className={classes.searchFieldInput}\n              placeholder={placeholder}\n            />\n            <RAButton\n              className={classes.searchFieldClear}\n              style={{ visibility: hasValue ? 'visible' : 'hidden' }}\n            >\n              <RiCloseCircleLine />\n            </RAButton>\n          </div>\n        </RASearchField>\n        {/* isNonModal keeps the page interactive while the popover is open,\n            required for virtual focus (aria-activedescendant) to work correctly */}\n        <RAPopover\n          ref={popoverRef}\n          className={classes.popover}\n          triggerRef={triggerRef}\n          isNonModal\n          placement={popoverPlacement}\n          {...(popoverWidth ? { style: { width: popoverWidth } } : {})}\n        >\n          <BgReset>\n            <Box bg=\"neutral\" className={classes.inner}>\n              <ListBox\n                className={classes.listBox}\n                autoFocus=\"first\"\n                shouldFocusOnHover\n                aria-busy={isLoading || undefined}\n                data-stale={isLoading || undefined}\n                renderEmptyState={() =>\n                  isLoading ? (\n                    <div className={classes.loadingState}>Searching...</div>\n                  ) : (\n                    <SearchAutocompleteEmptyState />\n                  )\n                }\n                onAction={() => {\n                  overlayState.close();\n                }}\n              >\n                {children}\n              </ListBox>\n            </Box>\n          </BgReset>\n        </RAPopover>\n        <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n          {liveMessage}\n        </VisuallyHidden>\n      </Autocomplete>\n    </OverlayTriggerStateContext.Provider>\n  );\n}\n\n/** @public */\nexport function SearchAutocompleteItem(props: SearchAutocompleteItemProps) {\n  const { ownProps, restProps } = useDefinition(\n    SearchAutocompleteItemDefinition,\n    props,\n  );\n  const { classes, children } = ownProps;\n\n  return (\n    <ListBoxItem\n      textValue={typeof children === 'string' ? children : undefined}\n      className={classes.root}\n      {...restProps}\n    >\n      <div className={classes.itemContent}>{children}</div>\n    </ListBoxItem>\n  );\n}\n"],"names":["RASearchField","RAButton","RAPopover"],"mappings":"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"}
+{"version":3,"file":"SearchAutocomplete.esm.js","sources":["../../../src/components/SearchAutocomplete/SearchAutocomplete.tsx"],"sourcesContent":["/*\n * Copyright 2026 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 { Children, useRef } from 'react';\nimport { useInteractOutside } from '@react-aria/interactions';\nimport {\n  Autocomplete,\n  SearchField as RASearchField,\n  Input,\n  Button as RAButton,\n  Popover as RAPopover,\n  ListBox,\n  ListBoxItem,\n  OverlayTriggerStateContext,\n} from 'react-aria-components';\nimport { useOverlayTriggerState } from '@react-stately/overlays';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n  SearchAutocompleteDefinition,\n  SearchAutocompleteItemDefinition,\n} from './definition';\nimport { Box } from '../Box';\nimport { BgReset } from '../../hooks/useBg';\nimport { VisuallyHidden } from '../VisuallyHidden';\n\nimport type {\n  SearchAutocompleteProps,\n  SearchAutocompleteItemProps,\n} from './types';\n\nconst SearchAutocompleteEmptyState = () => {\n  const { ownProps } = useDefinition(SearchAutocompleteDefinition, {});\n  return <div className={ownProps.classes.emptyState}>No results found.</div>;\n};\n\n/**\n * A search input that shows a dropdown list of suggestions as the user types, with loading and empty states.\n *\n * @public\n */\nexport function SearchAutocomplete(props: SearchAutocompleteProps) {\n  const { ownProps, dataAttributes } = useDefinition(\n    SearchAutocompleteDefinition,\n    props,\n  );\n  const {\n    classes,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    inputValue,\n    onInputChange,\n    placeholder,\n    popoverWidth,\n    popoverPlacement = 'bottom start',\n    children,\n    isLoading,\n    defaultOpen,\n    style,\n  } = ownProps;\n\n  const triggerRef = useRef<HTMLDivElement | null>(null);\n  const popoverRef = useRef<HTMLElement | null>(null);\n  const hasValue = !!inputValue;\n  const hasChildren = Children.count(children) > 0;\n\n  let liveMessage = '';\n  if (isLoading) {\n    liveMessage = 'Searching';\n  } else if (hasValue && !hasChildren) {\n    liveMessage = 'No results found';\n  }\n  const overlayState = useOverlayTriggerState({ defaultOpen });\n\n  // Close on interact outside — same pattern as ComboBox.\n  // isNonModal disables useOverlay's built-in useInteractOutside,\n  // so we add our own that filters out clicks on the trigger.\n  useInteractOutside({\n    ref: popoverRef,\n    onInteractOutside: e => {\n      const target = e.target as Element;\n      if (triggerRef.current?.contains(target)) {\n        return;\n      }\n      overlayState.close();\n    },\n    isDisabled: !overlayState.isOpen,\n  });\n\n  return (\n    <OverlayTriggerStateContext.Provider value={overlayState}>\n      <Autocomplete\n        inputValue={inputValue}\n        onInputChange={value => {\n          onInputChange?.(value);\n          if (value) {\n            overlayState.open();\n          } else {\n            overlayState.close();\n          }\n        }}\n      >\n        <RASearchField\n          className={classes.searchField}\n          aria-label={ariaLabel ?? (ariaLabelledBy ? undefined : placeholder)}\n          aria-labelledby={ariaLabelledBy}\n          data-size={dataAttributes['data-size']}\n          onKeyDown={e => {\n            if (e.key === 'Enter' && !overlayState.isOpen && hasValue) {\n              e.preventDefault();\n              overlayState.open();\n            }\n          }}\n        >\n          <div\n            ref={triggerRef}\n            className={classes.root}\n            {...dataAttributes}\n            style={style}\n          >\n            <div aria-hidden=\"true\">\n              <RiSearch2Line />\n            </div>\n            <Input\n              className={classes.searchFieldInput}\n              placeholder={placeholder}\n            />\n            <RAButton\n              className={classes.searchFieldClear}\n              style={{ visibility: hasValue ? 'visible' : 'hidden' }}\n            >\n              <RiCloseCircleLine />\n            </RAButton>\n          </div>\n        </RASearchField>\n        {/* isNonModal keeps the page interactive while the popover is open,\n            required for virtual focus (aria-activedescendant) to work correctly */}\n        <RAPopover\n          ref={popoverRef}\n          className={classes.popover}\n          triggerRef={triggerRef}\n          isNonModal\n          placement={popoverPlacement}\n          {...(popoverWidth ? { style: { width: popoverWidth } } : {})}\n        >\n          <BgReset>\n            <Box bg=\"neutral\" className={classes.inner}>\n              <ListBox\n                className={classes.listBox}\n                autoFocus=\"first\"\n                shouldFocusOnHover\n                aria-busy={isLoading || undefined}\n                data-stale={isLoading || undefined}\n                renderEmptyState={() =>\n                  isLoading ? (\n                    <div className={classes.loadingState}>Searching...</div>\n                  ) : (\n                    <SearchAutocompleteEmptyState />\n                  )\n                }\n                onAction={() => {\n                  overlayState.close();\n                }}\n              >\n                {children}\n              </ListBox>\n            </Box>\n          </BgReset>\n        </RAPopover>\n        <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n          {liveMessage}\n        </VisuallyHidden>\n      </Autocomplete>\n    </OverlayTriggerStateContext.Provider>\n  );\n}\n\n/**\n * An individual option item within a SearchAutocomplete dropdown.\n *\n * @public\n */\nexport function SearchAutocompleteItem(props: SearchAutocompleteItemProps) {\n  const { ownProps, restProps } = useDefinition(\n    SearchAutocompleteItemDefinition,\n    props,\n  );\n  const { classes, children } = ownProps;\n\n  return (\n    <ListBoxItem\n      textValue={typeof children === 'string' ? children : undefined}\n      className={classes.root}\n      {...restProps}\n    >\n      <div className={classes.itemContent}>{children}</div>\n    </ListBoxItem>\n  );\n}\n"],"names":["RASearchField","RAButton","RAPopover"],"mappings":"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"}

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, useRef } from 'react';\nimport {\n  Input,\n  SearchField as AriaSearchField,\n  Button,\n} from 'react-aria-components';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SearchFieldDefinition } from './definition';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n  (props, ref) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      SearchFieldDefinition,\n      props,\n    );\n    const {\n      classes,\n      label,\n      icon,\n      secondaryLabel,\n      placeholder,\n      startCollapsed,\n      description,\n    } = ownProps;\n\n    useEffect(() => {\n      if (!label && !restProps['aria-label'] && !restProps['aria-labelledby']) {\n        console.warn(\n          'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, restProps['aria-label'], restProps['aria-labelledby']]);\n\n    const [isFocused, setIsFocused] = useState(false);\n    const inputRef = useRef<HTMLInputElement>(null);\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    const handleFocusChange = (isFocused: boolean) => {\n      restProps.onFocusChange?.(isFocused);\n      setIsFocused(isFocused);\n    };\n\n    const handleContainerClick = () => {\n      inputRef.current?.focus();\n    };\n\n    const hasInputRef = !!inputRef.current;\n    const hasValue = !!inputRef.current?.value;\n\n    const isCollapsed = hasInputRef\n      ? startCollapsed && !hasValue && !isFocused\n      : startCollapsed &&\n        !restProps.value &&\n        !restProps.defaultValue &&\n        !isFocused;\n\n    return (\n      <AriaSearchField\n        className={classes.root}\n        {...dataAttributes}\n        data-collapsed={isCollapsed}\n        {...restProps}\n        onFocusChange={handleFocusChange}\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          onClick={handleContainerClick}\n        >\n          {icon !== false && (\n            <div\n              className={classes.inputIcon}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon || <RiSearch2Line />}\n            </div>\n          )}\n          <Input\n            ref={inputRef}\n            className={classes.input}\n            {...(icon !== false && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n          <Button\n            className={classes.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":["isFocused","AriaSearchField"],"mappings":";;;;;;;;;;;AA+BO,MAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,qBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM;AAAA,MACJ,OAAA;AAAA,MACA,KAAA;AAAA,MACA,IAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA;AAAA,KACF,GAAI,QAAA;AAEJ,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;AAEjE,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,KAAK,CAAA;AAChD,IAAA,MAAM,QAAA,GAAW,OAAyB,IAAI,CAAA;AAG9C,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,SAAA,CAAU,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAEzD,IAAA,MAAM,iBAAA,GAAoB,CAACA,UAAAA,KAAuB;AAChD,MAAA,SAAA,CAAU,gBAAgBA,UAAS,CAAA;AACnC,MAAA,YAAA,CAAaA,UAAS,CAAA;AAAA,IACxB,CAAA;AAEA,IAAA,MAAM,uBAAuB,MAAM;AACjC,MAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,IAC1B,CAAA;AAEA,IAAA,MAAM,WAAA,GAAc,CAAC,CAAC,QAAA,CAAS,OAAA;AAC/B,IAAA,MAAM,QAAA,GAAW,CAAC,CAAC,QAAA,CAAS,OAAA,EAAS,KAAA;AAErC,IAAA,MAAM,WAAA,GAAc,WAAA,GAChB,cAAA,IAAkB,CAAC,YAAY,CAAC,SAAA,GAChC,cAAA,IACA,CAAC,SAAA,CAAU,KAAA,IACX,CAAC,SAAA,CAAU,gBACX,CAAC,SAAA;AAEL,IAAA,uBACE,IAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,IAAA;AAAA,QAClB,GAAG,cAAA;AAAA,QACJ,gBAAA,EAAgB,WAAA;AAAA,QACf,GAAG,SAAA;AAAA,QACJ,aAAA,EAAe,iBAAA;AAAA,QACf,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,cACrC,OAAA,EAAS,oBAAA;AAAA,cAER,QAAA,EAAA;AAAA,gBAAA,IAAA,KAAS,KAAA,oBACR,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,IAAA,wBAAS,aAAA,EAAA,EAAc;AAAA;AAAA,iBAC1B;AAAA,gCAEF,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,GAAA,EAAK,QAAA;AAAA,oBACL,WAAW,OAAA,CAAQ,KAAA;AAAA,oBAClB,GAAI,IAAA,KAAS,KAAA,IAAS,EAAE,aAAa,IAAA,EAAK;AAAA,oBAC3C;AAAA;AAAA,iBACF;AAAA,gCACA,GAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,OAAA,CAAQ,KAAA;AAAA,oBACnB,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBAErC,8BAAC,iBAAA,EAAA,EAAkB;AAAA;AAAA;AACrB;AAAA;AAAA,WACF;AAAA,8BACC,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;;;;"}
+{"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, useRef } from 'react';\nimport {\n  Input,\n  SearchField as AriaSearchField,\n  Button,\n} from 'react-aria-components';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SearchFieldDefinition } from './definition';\n\nimport type { SearchFieldProps } from './types';\n\n/**\n * A text input optimized for search queries, with a built-in clear button, optional icon, and support for a collapsible mode.\n *\n * @public\n */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n  (props, ref) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      SearchFieldDefinition,\n      props,\n    );\n    const {\n      classes,\n      label,\n      icon,\n      secondaryLabel,\n      placeholder,\n      startCollapsed,\n      description,\n    } = ownProps;\n\n    useEffect(() => {\n      if (!label && !restProps['aria-label'] && !restProps['aria-labelledby']) {\n        console.warn(\n          'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, restProps['aria-label'], restProps['aria-labelledby']]);\n\n    const [isFocused, setIsFocused] = useState(false);\n    const inputRef = useRef<HTMLInputElement>(null);\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    const handleFocusChange = (isFocused: boolean) => {\n      restProps.onFocusChange?.(isFocused);\n      setIsFocused(isFocused);\n    };\n\n    const handleContainerClick = () => {\n      inputRef.current?.focus();\n    };\n\n    const hasInputRef = !!inputRef.current;\n    const hasValue = !!inputRef.current?.value;\n\n    const isCollapsed = hasInputRef\n      ? startCollapsed && !hasValue && !isFocused\n      : startCollapsed &&\n        !restProps.value &&\n        !restProps.defaultValue &&\n        !isFocused;\n\n    return (\n      <AriaSearchField\n        className={classes.root}\n        {...dataAttributes}\n        data-collapsed={isCollapsed}\n        {...restProps}\n        onFocusChange={handleFocusChange}\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          onClick={handleContainerClick}\n        >\n          {icon !== false && (\n            <div\n              className={classes.inputIcon}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon || <RiSearch2Line />}\n            </div>\n          )}\n          <Input\n            ref={inputRef}\n            className={classes.input}\n            {...(icon !== false && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n          <Button\n            className={classes.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":["isFocused","AriaSearchField"],"mappings":"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"}

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 { Select as AriaSelect, Popover } from 'react-aria-components';\nimport { SelectProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SelectDefinition } from './definition';\nimport { PopoverDefinition } from '../Popover/definition';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { SelectTrigger } from './SelectTrigger';\nimport { SelectContent } from './SelectContent';\n\n/** @public */\nexport const Select = forwardRef<\n  HTMLDivElement,\n  SelectProps<'single' | 'multiple'>\n>((props, ref) => {\n  const { ownProps, restProps, dataAttributes } = useDefinition(\n    SelectDefinition,\n    {\n      placeholder: 'Select an option',\n      ...props,\n    },\n  );\n  const { ownProps: popoverOwnProps } = useDefinition(PopoverDefinition, {});\n\n  const {\n    classes,\n    label,\n    description,\n    options,\n    icon,\n    searchable,\n    searchPlaceholder,\n    isRequired,\n    secondaryLabel,\n  } = ownProps;\n\n  const ariaLabel = restProps['aria-label'];\n  const ariaLabelledBy = restProps['aria-labelledby'];\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  const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null);\n\n  return (\n    <AriaSelect\n      className={classes.root}\n      {...dataAttributes}\n      ref={ref}\n      {...restProps}\n    >\n      <FieldLabel\n        label={label}\n        secondaryLabel={secondaryLabelText}\n        description={description}\n      />\n      <SelectTrigger icon={icon} />\n      <FieldError />\n      <Popover\n        className={clsx(popoverOwnProps.classes.root, classes.popover)}\n        {...dataAttributes}\n      >\n        <SelectContent\n          searchable={searchable}\n          searchPlaceholder={searchPlaceholder}\n          options={options}\n        />\n      </Popover>\n    </AriaSelect>\n  );\n});\n\nSelect.displayName = 'Select';\n"],"names":["AriaSelect"],"mappings":";;;;;;;;;;;;;;AA6BO,MAAM,MAAA,GAAS,UAAA,CAGpB,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,IAC9C,gBAAA;AAAA,IACA;AAAA,MACE,WAAA,EAAa,kBAAA;AAAA,MACb,GAAG;AAAA;AACL,GACF;AACA,EAAA,MAAM,EAAE,QAAA,EAAU,eAAA,KAAoB,aAAA,CAAc,iBAAA,EAAmB,EAAE,CAAA;AAEzE,EAAA,MAAM;AAAA,IACJ,OAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,QAAA;AAEJ,EAAA,MAAM,SAAA,GAAY,UAAU,YAAY,CAAA;AACxC,EAAA,MAAM,cAAA,GAAiB,UAAU,iBAAiB,CAAA;AAElD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC3C,MAAA,OAAA,CAAQ,IAAA;AAAA,QACN;AAAA,OACF;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,EAAW,cAAc,CAAC,CAAA;AAErC,EAAA,MAAM,kBAAA,GAAqB,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAExE,EAAA,uBACE,IAAA;AAAA,IAACA,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAA,CAAQ,IAAA;AAAA,MAClB,GAAG,cAAA;AAAA,MACJ,GAAA;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,KAAA;AAAA,YACA,cAAA,EAAgB,kBAAA;AAAA,YAChB;AAAA;AAAA,SACF;AAAA,wBACA,GAAA,CAAC,iBAAc,IAAA,EAAY,CAAA;AAAA,4BAC1B,UAAA,EAAA,EAAW,CAAA;AAAA,wBACZ,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,WAAW,IAAA,CAAK,eAAA,CAAgB,OAAA,CAAQ,IAAA,EAAM,QAAQ,OAAO,CAAA;AAAA,YAC5D,GAAG,cAAA;AAAA,YAEJ,QAAA,kBAAA,GAAA;AAAA,cAAC,aAAA;AAAA,cAAA;AAAA,gBACC,UAAA;AAAA,gBACA,iBAAA;AAAA,gBACA;AAAA;AAAA;AACF;AAAA;AACF;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}
+{"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 { Select as AriaSelect, Popover } from 'react-aria-components';\nimport { SelectProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SelectDefinition } from './definition';\nimport { PopoverDefinition } from '../Popover/definition';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { SelectTrigger } from './SelectTrigger';\nimport { SelectContent } from './SelectContent';\n\n/**\n * A dropdown picker for selecting one or multiple options from a list, with optional search filtering and inline error display.\n *\n * @public\n */\nexport const Select = forwardRef<\n  HTMLDivElement,\n  SelectProps<'single' | 'multiple'>\n>((props, ref) => {\n  const { ownProps, restProps, dataAttributes } = useDefinition(\n    SelectDefinition,\n    {\n      placeholder: 'Select an option',\n      ...props,\n    },\n  );\n  const { ownProps: popoverOwnProps } = useDefinition(PopoverDefinition, {});\n\n  const {\n    classes,\n    label,\n    description,\n    options,\n    icon,\n    searchable,\n    searchPlaceholder,\n    isRequired,\n    secondaryLabel,\n  } = ownProps;\n\n  const ariaLabel = restProps['aria-label'];\n  const ariaLabelledBy = restProps['aria-labelledby'];\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  const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null);\n\n  return (\n    <AriaSelect\n      className={classes.root}\n      {...dataAttributes}\n      ref={ref}\n      {...restProps}\n    >\n      <FieldLabel\n        label={label}\n        secondaryLabel={secondaryLabelText}\n        description={description}\n      />\n      <SelectTrigger icon={icon} />\n      <FieldError />\n      <Popover\n        className={clsx(popoverOwnProps.classes.root, classes.popover)}\n        {...dataAttributes}\n      >\n        <SelectContent\n          searchable={searchable}\n          searchPlaceholder={searchPlaceholder}\n          options={options}\n        />\n      </Popover>\n    </AriaSelect>\n  );\n});\n\nSelect.displayName = 'Select';\n"],"names":["AriaSelect"],"mappings":";;;;;;;;;;;;;;AAiCO,MAAM,MAAA,GAAS,UAAA,CAGpB,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,IAC9C,gBAAA;AAAA,IACA;AAAA,MACE,WAAA,EAAa,kBAAA;AAAA,MACb,GAAG;AAAA;AACL,GACF;AACA,EAAA,MAAM,EAAE,QAAA,EAAU,eAAA,KAAoB,aAAA,CAAc,iBAAA,EAAmB,EAAE,CAAA;AAEzE,EAAA,MAAM;AAAA,IACJ,OAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,GACF,GAAI,QAAA;AAEJ,EAAA,MAAM,SAAA,GAAY,UAAU,YAAY,CAAA;AACxC,EAAA,MAAM,cAAA,GAAiB,UAAU,iBAAiB,CAAA;AAElD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC3C,MAAA,OAAA,CAAQ,IAAA;AAAA,QACN;AAAA,OACF;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,EAAW,cAAc,CAAC,CAAA;AAErC,EAAA,MAAM,kBAAA,GAAqB,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAExE,EAAA,uBACE,IAAA;AAAA,IAACA,QAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAA,CAAQ,IAAA;AAAA,MAClB,GAAG,cAAA;AAAA,MACJ,GAAA;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,KAAA;AAAA,YACA,cAAA,EAAgB,kBAAA;AAAA,YAChB;AAAA;AAAA,SACF;AAAA,wBACA,GAAA,CAAC,iBAAc,IAAA,EAAY,CAAA;AAAA,4BAC1B,UAAA,EAAA,EAAW,CAAA;AAAA,wBACZ,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,WAAW,IAAA,CAAK,eAAA,CAAgB,OAAA,CAAQ,IAAA,EAAM,QAAQ,OAAO,CAAA;AAAA,YAC5D,GAAG,cAAA;AAAA,YAEJ,QAAA,kBAAA,GAAA;AAAA,cAAC,aAAA;AAAA,cAAA;AAAA,gBACC,UAAA;AAAA,gBACA,iBAAA;AAAA,gBACA;AAAA;AAAA;AACF;AAAA;AACF;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.esm.js","sources":["../../../src/components/Skeleton/Skeleton.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 type { SkeletonProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SkeletonDefinition } from './definition';\n\n/** @public */\nexport const Skeleton = (props: SkeletonProps) => {\n  const { ownProps, restProps, dataAttributes } = useDefinition(\n    SkeletonDefinition,\n    props,\n  );\n  const { classes, width, height, style } = ownProps;\n\n  return (\n    <div\n      className={classes.root}\n      {...dataAttributes}\n      style={{\n        width,\n        height,\n        ...style,\n      }}\n      {...restProps}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AAqBO,MAAM,QAAA,GAAW,CAAC,KAAA,KAAyB;AAChD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,IAC9C,kBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAO,MAAA,EAAQ,OAAM,GAAI,QAAA;AAE1C,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAA,CAAQ,IAAA;AAAA,MAClB,GAAG,cAAA;AAAA,MACJ,KAAA,EAAO;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,GAAG;AAAA,OACL;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}
+{"version":3,"file":"Skeleton.esm.js","sources":["../../../src/components/Skeleton/Skeleton.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 type { SkeletonProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SkeletonDefinition } from './definition';\n\n/**\n * A placeholder shape displayed while content is loading, matching the size and layout of the content it replaces.\n *\n * @public\n */\nexport const Skeleton = (props: SkeletonProps) => {\n  const { ownProps, restProps, dataAttributes } = useDefinition(\n    SkeletonDefinition,\n    props,\n  );\n  const { classes, width, height, style } = ownProps;\n\n  return (\n    <div\n      className={classes.root}\n      {...dataAttributes}\n      style={{\n        width,\n        height,\n        ...style,\n      }}\n      {...restProps}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AAyBO,MAAM,QAAA,GAAW,CAAC,KAAA,KAAyB;AAChD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,IAC9C,kBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAO,MAAA,EAAQ,OAAM,GAAI,QAAA;AAE1C,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAA,CAAQ,IAAA;AAAA,MAClB,GAAG,cAAA;AAAA,MACJ,KAAA,EAAO;AAAA,QACL,KAAA;AAAA,QACA,MAAA;AAAA,QACA,GAAG;AAAA,OACL;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/components/Slider/Slider.esm.js

@@ -0,0 +1,76 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useId, useEffect } from 'react';
+import { Slider as Slider$1, SliderOutput, SliderTrack, SliderThumb } 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 '../FieldError/FieldError.module.css.esm.js';
+import { SliderDefinition } from './definition.esm.js';
+
+function SliderImpl(props, ref) {
+  const { ownProps, restProps } = useDefinition(SliderDefinition, props);
+  const { classes, className, label, secondaryLabel, description, isRequired } = ownProps;
+  const labelId = useId();
+  const descriptionId = useId();
+  useEffect(() => {
+    if (!label && !restProps["aria-label"] && !restProps["aria-labelledby"]) {
+      console.warn(
+        "Slider requires either a visible label, aria-label, or aria-labelledby for accessibility"
+      );
+    }
+  }, [label, restProps]);
+  const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
+  return /* @__PURE__ */ jsxs(
+    Slider$1,
+    {
+      className: clsx(classes.root, className),
+      "aria-labelledby": label ? labelId : void 0,
+      "aria-describedby": label && description ? descriptionId : void 0,
+      ...restProps,
+      ref,
+      children: [
+        label && /* @__PURE__ */ jsxs("div", { className: classes.header, children: [
+          /* @__PURE__ */ jsx(
+            FieldLabel,
+            {
+              id: labelId,
+              label,
+              secondaryLabel: secondaryLabelText,
+              description,
+              descriptionId: description ? descriptionId : void 0
+            }
+          ),
+          /* @__PURE__ */ jsx(SliderOutput, { className: classes.output, children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") })
+        ] }),
+        /* @__PURE__ */ jsx(SliderTrack, { className: classes.track, children: ({ state }) => {
+          const numThumbs = state.values.length;
+          let trackFillStyle;
+          if (numThumbs === 1) {
+            const percent = state.getThumbPercent(0);
+            const isVertical = state.orientation === "vertical";
+            trackFillStyle = isVertical ? { bottom: 0, height: `${percent * 100}%` } : { left: 0, width: `${percent * 100}%` };
+          } else {
+            const start = state.getThumbPercent(0);
+            const end = state.getThumbPercent(1);
+            const rangePercent = (end - start) * 100;
+            const isVertical = state.orientation === "vertical";
+            trackFillStyle = isVertical ? { bottom: `${start * 100}%`, height: `${rangePercent}%` } : { left: `${start * 100}%`, width: `${rangePercent}%` };
+          }
+          return /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: classes.trackFill, style: trackFillStyle }),
+            /* @__PURE__ */ jsx(SliderThumb, { index: 0, className: classes.thumb }),
+            numThumbs > 1 && /* @__PURE__ */ jsx(SliderThumb, { index: 1, className: classes.thumb })
+          ] });
+        } }),
+        /* @__PURE__ */ jsx(FieldError, {})
+      ]
+    }
+  );
+}
+const Slider = forwardRef(SliderImpl);
+Slider.displayName = "Slider";
+
+export { Slider };
+//# sourceMappingURL=Slider.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.esm.js","sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["/*\n * Copyright 2026 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, useId } from 'react';\nimport {\n  Slider as AriaSlider,\n  SliderTrack,\n  SliderThumb,\n  SliderOutput,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport type { SliderProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SliderDefinition } from './definition';\n\nfunction SliderImpl<T extends number | number[]>(\n  props: SliderProps<T>,\n  ref: React.ForwardedRef<HTMLDivElement>,\n) {\n  const { ownProps, restProps } = useDefinition(SliderDefinition, props);\n  const { classes, className, label, secondaryLabel, description, isRequired } =\n    ownProps;\n\n  const labelId = useId();\n  const descriptionId = useId();\n\n  useEffect(() => {\n    if (!label && !restProps['aria-label'] && !restProps['aria-labelledby']) {\n      console.warn(\n        'Slider requires either a visible label, aria-label, or aria-labelledby for accessibility',\n      );\n    }\n  }, [label, restProps]);\n\n  const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null);\n\n  return (\n    <AriaSlider\n      className={clsx(classes.root, className)}\n      aria-labelledby={label ? labelId : undefined}\n      aria-describedby={label && description ? descriptionId : undefined}\n      {...restProps}\n      ref={ref}\n    >\n      {label && (\n        <div className={classes.header}>\n          <FieldLabel\n            id={labelId}\n            label={label}\n            secondaryLabel={secondaryLabelText}\n            description={description}\n            descriptionId={description ? descriptionId : undefined}\n          />\n          <SliderOutput className={classes.output}>\n            {({ state }) =>\n              state.values\n                .map((_, i) => state.getThumbValueLabel(i))\n                .join(' – ')\n            }\n          </SliderOutput>\n        </div>\n      )}\n      <SliderTrack className={classes.track}>\n        {({ state }) => {\n          const numThumbs = state.values.length;\n\n          // Calculate track fill\n          let trackFillStyle: React.CSSProperties;\n          if (numThumbs === 1) {\n            // Single thumb: fill from start to thumb\n            const percent = state.getThumbPercent(0);\n            const isVertical = state.orientation === 'vertical';\n            trackFillStyle = isVertical\n              ? { bottom: 0, height: `${percent * 100}%` }\n              : { left: 0, width: `${percent * 100}%` };\n          } else {\n            // Range: fill between thumbs\n            const start = state.getThumbPercent(0);\n            const end = state.getThumbPercent(1);\n            const rangePercent = (end - start) * 100;\n            const isVertical = state.orientation === 'vertical';\n            trackFillStyle = isVertical\n              ? { bottom: `${start * 100}%`, height: `${rangePercent}%` }\n              : { left: `${start * 100}%`, width: `${rangePercent}%` };\n          }\n\n          return (\n            <>\n              <div className={classes.trackFill} style={trackFillStyle} />\n              <SliderThumb index={0} className={classes.thumb} />\n              {numThumbs > 1 && (\n                <SliderThumb index={1} className={classes.thumb} />\n              )}\n            </>\n          );\n        }}\n      </SliderTrack>\n      <FieldError />\n    </AriaSlider>\n  );\n}\n\n/**\n * A draggable input for selecting a numeric value or range within a defined interval, with an integrated label and value output.\n *\n * @public\n */\nexport const Slider = forwardRef(SliderImpl) as (<T extends number | number[]>(\n  props: SliderProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> },\n) => JSX.Element) & { displayName: string };\n\nSlider.displayName = 'Slider';\n"],"names":["AriaSlider"],"mappings":"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"}

package/dist/components/Slider/Slider.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 2026 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  .Slider_bui-Slider__85bc3f8b8e {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-2);\n    width: 100%;\n    color: var(--bui-fg-primary);\n\n    &[data-orientation='vertical'] {\n      height: 200px;\n      width: auto;\n    }\n  }\n\n  .Slider_bui-SliderHeader__85bc3f8b8e {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: var(--bui-space-3);\n  }\n\n  .Slider_bui-SliderOutput__85bc3f8b8e {\n    font-size: var(--bui-font-size-2);\n    font-weight: var(--bui-font-weight-medium);\n    color: var(--bui-fg-secondary);\n    white-space: nowrap;\n  }\n\n  .Slider_bui-SliderTrack__85bc3f8b8e {\n    position: relative;\n    height: 4px;\n    width: 100%;\n    background: var(--bui-bg-neutral-3);\n    border-radius: var(--bui-radius-sm);\n    cursor: pointer;\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n\n    /* Vertical orientation */\n    [data-orientation='vertical'] & {\n      width: 4px;\n      height: 100%;\n    }\n  }\n\n  .Slider_bui-SliderTrackFill__85bc3f8b8e {\n    position: absolute;\n    top: 0;\n    height: 100%;\n    background: var(--bui-bg-solid);\n    border-radius: var(--bui-radius-sm);\n    pointer-events: none;\n\n    /* Vertical orientation */\n    [data-orientation='vertical'] & {\n      width: 100%;\n      height: auto;\n      left: 0;\n      right: 0;\n      top: auto;\n    }\n  }\n\n  .Slider_bui-SliderThumb__85bc3f8b8e {\n    width: 20px;\n    height: 20px;\n    border-radius: 50%;\n    background: var(--bui-bg-solid);\n    border: 2px solid var(--bui-bg-solid);\n    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n    cursor: grab;\n    transition: transform 200ms;\n\n    /* Fix: Ensure thumb is vertically centered on track */\n    top: 50%;\n    transform: translateY(-50%);\n\n    &[data-focus-visible] {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n\n    &[data-dragging] {\n      cursor: grabbing;\n      box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1),\n        0 2px 4px -2px rgb(0 0 0 / 0.1);\n      transform: translateY(-50%) scale(1.1);\n    }\n\n    /* Hover effect */\n    &:hover:not([data-disabled]) {\n      transform: translateY(-50%) scale(1.1);\n    }\n  }\n\n  /* Improved disabled state */\n  .Slider_bui-Slider__85bc3f8b8e[data-disabled] {\n    opacity: 0.6;\n    cursor: not-allowed;\n\n    & .Slider_bui-SliderTrack__85bc3f8b8e {\n      background: var(--bui-bg-neutral-2);\n    }\n\n    & .Slider_bui-SliderTrackFill__85bc3f8b8e {\n      background: var(--bui-bg-neutral-4);\n    }\n\n    & .Slider_bui-SliderThumb__85bc3f8b8e {\n      cursor: not-allowed;\n      background: var(--bui-bg-neutral-4);\n      border-color: var(--bui-border-neutral);\n    }\n  }\n}\n";
+var styles = {"bui-Slider":"Slider_bui-Slider__85bc3f8b8e","bui-SliderHeader":"Slider_bui-SliderHeader__85bc3f8b8e","bui-SliderOutput":"Slider_bui-SliderOutput__85bc3f8b8e","bui-SliderTrack":"Slider_bui-SliderTrack__85bc3f8b8e","bui-SliderTrackFill":"Slider_bui-SliderTrackFill__85bc3f8b8e","bui-SliderThumb":"Slider_bui-SliderThumb__85bc3f8b8e"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=Slider.module.css.esm.js.map

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

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