@backstage/ui 0.9.0-next.2 → 0.9.0-next.3

package/CHANGELOG.md

@@ -1,5 +1,60 @@
 # @backstage/ui
 
+## 0.9.0-next.3
+
+### Minor Changes
+
+- 83c100e: **BREAKING**: Removed `Collapsible` component. Migrate to `Accordion` or use React Aria `Disclosure`.
+
+  ## Migration Path 1: Accordion (Opinionated Styled Component)
+
+  Accordion provides preset styling with a similar component structure.
+
+  ```diff
+  - import { Collapsible } from '@backstage/ui';
+  + import { Accordion, AccordionTrigger, AccordionPanel } from '@backstage/ui';
+
+  - <Collapsible.Root>
+  -   <Collapsible.Trigger render={(props) => <Button {...props}>Toggle</Button>} />
+  -   <Collapsible.Panel>Content</Collapsible.Panel>
+  - </Collapsible.Root>
+
+  + <Accordion>
+  +   <AccordionTrigger title="Toggle" />
+  +   <AccordionPanel>Content</AccordionPanel>
+  + </Accordion>
+  ```
+
+  CSS classes: `.bui-CollapsibleRoot` → `.bui-Accordion`, `.bui-CollapsibleTrigger` → `.bui-AccordionTrigger` (now on heading element), `.bui-CollapsiblePanel` → `.bui-AccordionPanel`
+
+  ## Migration Path 2: React Aria Disclosure (Full Customization)
+
+  For custom styling without preset styles:
+
+  ```tsx
+  import { Disclosure, Button, DisclosurePanel } from 'react-aria-components';
+
+  <Disclosure>
+    <Button slot="trigger">Toggle</Button>
+    <DisclosurePanel>Content</DisclosurePanel>
+  </Disclosure>;
+  ```
+
+- 816af0f: **BREAKING**: The `SelectProps` interface now accepts a generic type parameter for selection mode.
+
+  Added searchable and multiple selection support to Select component. The component now accepts `searchable`, `selectionMode`, and `searchPlaceholder` props to enable filtering and multi-selection modes.
+
+  Migration: If you're using `SelectProps` type directly, update from `SelectProps` to `SelectProps<'single' | 'multiple'>`. Component usage remains backward compatible.
+
+### Patch Changes
+
+- 35a3614: Fixed CSS issues in Select component including popover width constraints, focus outline behavior, and overflow handling.
+- 01476f0: Improved visual consistency of PasswordField, SearchField, and MenuAutocomplete components.
+- 836b0c7: Fixed dialog backdrop appearance in dark mode.
+- 6d35a6b: Removed `@base-ui-components/react` dependency as all components now use React Aria Components.
+- 7839e7b: Added `loading` prop to Button and ButtonIcon components for displaying spinner during async operations.
+- a00fb88: Fixed Table Row component to properly support opening links in new tabs via right-click or Cmd+Click when using the href prop.
+
 ## 0.9.0-next.2
 
 ### Minor Changes

package/dist/components/Accordion/Accordion.esm.js

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Disclosure, Heading, Button, DisclosurePanel, DisclosureGroup } from 'react-aria-components';
+import { RiArrowDownSLine } from '@remixicon/react';
+import clsx from 'clsx';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+import styles from './Accordion.module.css.esm.js';
+import { Flex } from '../Flex/Flex.esm.js';
+
+const Accordion = forwardRef(({ className, ...props }, ref) => {
+  const { classNames, cleanedProps } = useStyles("Accordion", props);
+  return /* @__PURE__ */ jsx(
+    Disclosure,
+    {
+      ref,
+      className: clsx(classNames.root, styles[classNames.root], className),
+      ...cleanedProps
+    }
+  );
+});
+Accordion.displayName = "Accordion";
+const AccordionTrigger = forwardRef(({ className, title, subtitle, children, ...props }, ref) => {
+  const { classNames, cleanedProps } = useStyles("Accordion", props);
+  return /* @__PURE__ */ jsx(
+    Heading,
+    {
+      ref,
+      className: clsx(
+        classNames.trigger,
+        styles[classNames.trigger],
+        className
+      ),
+      ...cleanedProps,
+      children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          slot: "trigger",
+          className: clsx(
+            classNames.triggerButton,
+            styles[classNames.triggerButton]
+          ),
+          children: [
+            children ? children : /* @__PURE__ */ jsxs(Flex, { gap: "2", align: "center", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: clsx(
+                    classNames.triggerTitle,
+                    styles[classNames.triggerTitle]
+                  ),
+                  children: title
+                }
+              ),
+              subtitle && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: clsx(
+                    classNames.triggerSubtitle,
+                    styles[classNames.triggerSubtitle]
+                  ),
+                  children: subtitle
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              RiArrowDownSLine,
+              {
+                className: clsx(
+                  classNames.triggerIcon,
+                  styles[classNames.triggerIcon]
+                ),
+                size: 16
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+AccordionTrigger.displayName = "AccordionTrigger";
+const AccordionPanel = forwardRef(({ className, ...props }, ref) => {
+  const { classNames, cleanedProps } = useStyles("Accordion", props);
+  return /* @__PURE__ */ jsx(
+    DisclosurePanel,
+    {
+      ref,
+      className: clsx(classNames.panel, styles[classNames.panel], className),
+      ...cleanedProps
+    }
+  );
+});
+AccordionPanel.displayName = "AccordionPanel";
+const AccordionGroup = forwardRef(({ className, allowsMultiple = false, ...props }, ref) => {
+  const { classNames, cleanedProps } = useStyles("Accordion", props);
+  return /* @__PURE__ */ jsx(
+    DisclosureGroup,
+    {
+      ref,
+      allowsMultipleExpanded: allowsMultiple,
+      className: clsx(classNames.group, styles[classNames.group], className),
+      ...cleanedProps
+    }
+  );
+});
+AccordionGroup.displayName = "AccordionGroup";
+
+export { Accordion, AccordionGroup, AccordionPanel, AccordionTrigger };
+//# sourceMappingURL=Accordion.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.esm.js","sources":["../../../src/components/Accordion/Accordion.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 { forwardRef } from 'react';\nimport {\n  Disclosure as RADisclosure,\n  Button as RAButton,\n  DisclosurePanel as RADisclosurePanel,\n  DisclosureGroup as RADisclosureGroup,\n  Heading as RAHeading,\n} from 'react-aria-components';\nimport { RiArrowDownSLine } from '@remixicon/react';\nimport clsx from 'clsx';\nimport type {\n  AccordionProps,\n  AccordionTriggerProps,\n  AccordionPanelProps,\n  AccordionGroupProps,\n} from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Accordion.module.css';\nimport { Flex } from '../Flex';\n\n/** @public */\nexport const Accordion = forwardRef<\n  React.ElementRef<typeof RADisclosure>,\n  AccordionProps\n>(({ className, ...props }, ref) => {\n  const { classNames, cleanedProps } = useStyles('Accordion', props);\n\n  return (\n    <RADisclosure\n      ref={ref}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...cleanedProps}\n    />\n  );\n});\n\nAccordion.displayName = 'Accordion';\n\n/** @public */\nexport const AccordionTrigger = forwardRef<\n  React.ElementRef<typeof RAHeading>,\n  AccordionTriggerProps\n>(({ className, title, subtitle, children, ...props }, ref) => {\n  const { classNames, cleanedProps } = useStyles('Accordion', props);\n\n  return (\n    <RAHeading\n      ref={ref}\n      className={clsx(\n        classNames.trigger,\n        styles[classNames.trigger],\n        className,\n      )}\n      {...cleanedProps}\n    >\n      <RAButton\n        slot=\"trigger\"\n        className={clsx(\n          classNames.triggerButton,\n          styles[classNames.triggerButton],\n        )}\n      >\n        {children ? (\n          children\n        ) : (\n          <Flex gap=\"2\" align=\"center\">\n            <span\n              className={clsx(\n                classNames.triggerTitle,\n                styles[classNames.triggerTitle],\n              )}\n            >\n              {title}\n            </span>\n            {subtitle && (\n              <span\n                className={clsx(\n                  classNames.triggerSubtitle,\n                  styles[classNames.triggerSubtitle],\n                )}\n              >\n                {subtitle}\n              </span>\n            )}\n          </Flex>\n        )}\n\n        <RiArrowDownSLine\n          className={clsx(\n            classNames.triggerIcon,\n            styles[classNames.triggerIcon],\n          )}\n          size={16}\n        />\n      </RAButton>\n    </RAHeading>\n  );\n});\n\nAccordionTrigger.displayName = 'AccordionTrigger';\n\n/** @public */\nexport const AccordionPanel = forwardRef<\n  React.ElementRef<typeof RADisclosurePanel>,\n  AccordionPanelProps\n>(({ className, ...props }, ref) => {\n  const { classNames, cleanedProps } = useStyles('Accordion', props);\n\n  return (\n    <RADisclosurePanel\n      ref={ref}\n      className={clsx(classNames.panel, styles[classNames.panel], className)}\n      {...cleanedProps}\n    />\n  );\n});\n\nAccordionPanel.displayName = 'AccordionPanel';\n\n/** @public */\nexport const AccordionGroup = forwardRef<\n  React.ElementRef<typeof RADisclosureGroup>,\n  AccordionGroupProps\n>(({ className, allowsMultiple = false, ...props }, ref) => {\n  const { classNames, cleanedProps } = useStyles('Accordion', props);\n\n  return (\n    <RADisclosureGroup\n      ref={ref}\n      allowsMultipleExpanded={allowsMultiple}\n      className={clsx(classNames.group, styles[classNames.group], className)}\n      {...cleanedProps}\n    />\n  );\n});\n\nAccordionGroup.displayName = 'AccordionGroup';\n"],"names":["RADisclosure","RAHeading","RAButton","RADisclosurePanel","RADisclosureGroup"],"mappings":";;;;;;;;;AAqCO,MAAM,SAAA,GAAY,WAGvB,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAClC,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,aAAa,KAAK,CAAA;AAEjE,EAAA,uBACE,GAAA;AAAA,IAACA,UAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;AAED,SAAA,CAAU,WAAA,GAAc,WAAA;AAGjB,MAAM,gBAAA,GAAmB,UAAA,CAG9B,CAAC,EAAE,SAAA,EAAW,KAAA,EAAO,QAAA,EAAU,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC7D,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,aAAa,KAAK,CAAA;AAEjE,EAAA,uBACE,GAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,OAAA;AAAA,QACX,MAAA,CAAO,WAAW,OAAO,CAAA;AAAA,QACzB;AAAA,OACF;AAAA,MACC,GAAG,YAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA;AAAA,QAACC,MAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,SAAA;AAAA,UACL,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,aAAA;AAAA,YACX,MAAA,CAAO,WAAW,aAAa;AAAA,WACjC;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,QAAA,GACC,2BAEA,IAAA,CAAC,IAAA,EAAA,EAAK,GAAA,EAAI,GAAA,EAAI,OAAM,QAAA,EAClB,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,IAAA;AAAA,oBACT,UAAA,CAAW,YAAA;AAAA,oBACX,MAAA,CAAO,WAAW,YAAY;AAAA,mBAChC;AAAA,kBAEC,QAAA,EAAA;AAAA;AAAA,eACH;AAAA,cACC,QAAA,oBACC,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,IAAA;AAAA,oBACT,UAAA,CAAW,eAAA;AAAA,oBACX,MAAA,CAAO,WAAW,eAAe;AAAA,mBACnC;AAAA,kBAEC,QAAA,EAAA;AAAA;AAAA;AACH,aAAA,EAEJ,CAAA;AAAA,4BAGF,GAAA;AAAA,cAAC,gBAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,WAAA;AAAA,kBACX,MAAA,CAAO,WAAW,WAAW;AAAA,iBAC/B;AAAA,gBACA,IAAA,EAAM;AAAA;AAAA;AACR;AAAA;AAAA;AACF;AAAA,GACF;AAEJ,CAAC;AAED,gBAAA,CAAiB,WAAA,GAAc,kBAAA;AAGxB,MAAM,cAAA,GAAiB,WAG5B,CAAC,EAAE,WAAW,GAAG,KAAA,IAAS,GAAA,KAAQ;AAClC,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,aAAa,KAAK,CAAA;AAEjE,EAAA,uBACE,GAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,KAAA,EAAO,OAAO,UAAA,CAAW,KAAK,GAAG,SAAS,CAAA;AAAA,MACpE,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;AAED,cAAA,CAAe,WAAA,GAAc,gBAAA;AAGtB,MAAM,cAAA,GAAiB,UAAA,CAG5B,CAAC,EAAE,SAAA,EAAW,iBAAiB,KAAA,EAAO,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC1D,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,aAAa,KAAK,CAAA;AAEjE,EAAA,uBACE,GAAA;AAAA,IAACC,eAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,sBAAA,EAAwB,cAAA;AAAA,MACxB,SAAA,EAAW,KAAK,UAAA,CAAW,KAAA,EAAO,OAAO,UAAA,CAAW,KAAK,GAAG,SAAS,CAAA;AAAA,MACpE,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;AAED,cAAA,CAAe,WAAA,GAAc,gBAAA;;;;"}

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

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Accordion-module_bui-Accordion__wEbQl {\n    width: 100%;\n    background-color: var(--bui-bg-surface-1);\n    border-radius: var(--bui-radius-3);\n    padding: var(--bui-space-3);\n  }\n\n  .Accordion-module_bui-AccordionTrigger__1fPAs {\n    all: unset;\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .Accordion-module_bui-AccordionTriggerButton__3RF1r {\n    all: unset;\n    width: 100%;\n    color: var(--bui-fg-primary);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    cursor: pointer;\n    text-align: left;\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n\n    &[data-disabled='true'] {\n      background-color: transparent;\n      color: var(--bui-fg-disabled);\n      cursor: not-allowed;\n    }\n  }\n\n  .Accordion-module_bui-AccordionTriggerTitle__3DOpr {\n    font-size: var(--bui-font-size-4);\n    font-weight: var(--bui-font-weight-bold);\n    line-height: 140%;\n  }\n\n  .Accordion-module_bui-AccordionTriggerSubtitle__jU446 {\n    font-size: var(--bui-font-size-2);\n    line-height: 140%;\n    color: var(--bui-fg-secondary);\n  }\n\n  .Accordion-module_bui-AccordionTriggerIcon__1953s {\n    transition: transform 150ms ease-out;\n    flex-shrink: 0;\n    width: 1rem;\n    height: 1rem;\n\n    [data-expanded='true'] & {\n      transform: rotate(180deg);\n    }\n  }\n\n  .Accordion-module_bui-AccordionPanel__1bJFQ {\n    [data-expanded='true'] & {\n      padding-top: var(--bui-space-1);\n    }\n  }\n\n  .Accordion-module_bui-AccordionGroup__3bll0 {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-3);\n    width: 100%;\n  }\n}\n";
+var styles = {"bui-Accordion":"Accordion-module_bui-Accordion__wEbQl","bui-AccordionTrigger":"Accordion-module_bui-AccordionTrigger__1fPAs","bui-AccordionTriggerButton":"Accordion-module_bui-AccordionTriggerButton__3RF1r","bui-AccordionTriggerTitle":"Accordion-module_bui-AccordionTriggerTitle__3DOpr","bui-AccordionTriggerSubtitle":"Accordion-module_bui-AccordionTriggerSubtitle__jU446","bui-AccordionTriggerIcon":"Accordion-module_bui-AccordionTriggerIcon__1953s","bui-AccordionPanel":"Accordion-module_bui-AccordionPanel__1bJFQ","bui-AccordionGroup":"Accordion-module_bui-AccordionGroup__3bll0"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=Accordion.module.css.esm.js.map

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

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

package/dist/components/Button/Button.esm.js

@@ -1,7 +1,8 @@
-import { jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { Button as Button$1 } from 'react-aria-components';
+import { Button as Button$1, ProgressBar } from 'react-aria-components';
+import { RiLoader4Line } from '@remixicon/react';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import stylesButton from './Button.module.css.esm.js';
 
@@ -12,19 +13,37 @@ const Button = forwardRef(
       variant: "primary",
       ...props
     });
-    const { children, className, iconStart, iconEnd, ...rest } = cleanedProps;
-    return /* @__PURE__ */ jsxs(
+    const { children, className, iconStart, iconEnd, loading, ...rest } = cleanedProps;
+    return /* @__PURE__ */ jsx(
       Button$1,
       {
         className: clsx(classNames.root, stylesButton[classNames.root], className),
         ref,
+        isPending: loading,
         ...dataAttributes,
         ...rest,
-        children: [
-          iconStart,
-          children,
-          iconEnd
-        ]
+        children: ({ isPending }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: clsx(classNames.content, stylesButton[classNames.content]),
+              children: [
+                iconStart,
+                children,
+                iconEnd
+              ]
+            }
+          ),
+          isPending && /* @__PURE__ */ jsx(
+            ProgressBar,
+            {
+              "aria-label": "Loading",
+              isIndeterminate: true,
+              className: clsx(classNames.spinner, stylesButton[classNames.spinner]),
+              children: /* @__PURE__ */ jsx(RiLoader4Line, { "aria-hidden": "true" })
+            }
+          )
+        ] })
       }
     );
   }

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

@@ -1 +1 @@
-{"version":3,"file":"Button.esm.js","sources":["../../../src/components/Button/Button.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton } from 'react-aria-components';\nimport type { ButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Button.module.css';\n\n/** @public */\nexport const Button = forwardRef(\n  (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\n    const { classNames, dataAttributes, cleanedProps } = useStyles('Button', {\n      size: 'small',\n      variant: 'primary',\n      ...props,\n    });\n\n    const { children, className, iconStart, iconEnd, ...rest } = cleanedProps;\n\n    return (\n      <RAButton\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        ref={ref}\n        {...dataAttributes}\n        {...rest}\n      >\n        {iconStart}\n        {children}\n        {iconEnd}\n      </RAButton>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n"],"names":["RAButton","styles"],"mappings":";;;;;;;AAwBO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAoB,GAAA,KAAgC;AACnD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,QAAA,EAAU;AAAA,MACvE,IAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS,SAAA;AAAA,MACT,GAAG;AAAA,KACJ,CAAA;AAED,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,WAAW,OAAA,EAAS,GAAG,MAAK,GAAI,YAAA;AAE7D,IAAA,uBACE,IAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAMC,aAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}
+{"version":3,"file":"Button.esm.js","sources":["../../../src/components/Button/Button.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton, ProgressBar } from 'react-aria-components';\nimport { RiLoader4Line } from '@remixicon/react';\nimport type { ButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Button.module.css';\n\n/** @public */\nexport const Button = forwardRef(\n  (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\n    const { classNames, dataAttributes, cleanedProps } = useStyles('Button', {\n      size: 'small',\n      variant: 'primary',\n      ...props,\n    });\n\n    const { children, className, iconStart, iconEnd, loading, ...rest } =\n      cleanedProps;\n\n    return (\n      <RAButton\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        ref={ref}\n        isPending={loading}\n        {...dataAttributes}\n        {...rest}\n      >\n        {({ isPending }) => (\n          <>\n            <span\n              className={clsx(classNames.content, styles[classNames.content])}\n            >\n              {iconStart}\n              {children}\n              {iconEnd}\n            </span>\n\n            {isPending && (\n              <ProgressBar\n                aria-label=\"Loading\"\n                isIndeterminate\n                className={clsx(classNames.spinner, styles[classNames.spinner])}\n              >\n                <RiLoader4Line aria-hidden=\"true\" />\n              </ProgressBar>\n            )}\n          </>\n        )}\n      </RAButton>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n"],"names":["RAButton","styles"],"mappings":";;;;;;;;AAyBO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAoB,GAAA,KAAgC;AACnD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,QAAA,EAAU;AAAA,MACvE,IAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS,SAAA;AAAA,MACT,GAAG;AAAA,KACJ,CAAA;AAED,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,SAAA,EAAW,SAAS,OAAA,EAAS,GAAG,MAAK,GAChE,YAAA;AAEF,IAAA,uBACE,GAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAMC,aAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACA,SAAA,EAAW,OAAA;AAAA,QACV,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,CAAC,EAAE,SAAA,EAAU,qBACZ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAASA,YAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,cAE7D,QAAA,EAAA;AAAA,gBAAA,SAAA;AAAA,gBACA,QAAA;AAAA,gBACA;AAAA;AAAA;AAAA,WACH;AAAA,UAEC,SAAA,oBACC,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,YAAA,EAAW,SAAA;AAAA,cACX,eAAA,EAAe,IAAA;AAAA,cACf,WAAW,IAAA,CAAK,UAAA,CAAW,SAASA,YAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,cAE9D,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,aAAA,EAAY,MAAA,EAAO;AAAA;AAAA;AACpC,SAAA,EAEJ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}

package/dist/components/Button/Button.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 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\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Button-module_bui-Button__1BvMm {\n    border: none;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    user-select: none;\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    padding: 0;\n    cursor: pointer;\n    border-radius: var(--bui-radius-2);\n    gap: var(--bui-space-1_5);\n    flex-shrink: 0;\n\n    &[data-disabled='true'] {\n      cursor: not-allowed;\n    }\n  }\n\n  .Button-module_bui-Button__1BvMm[data-variant='primary'] {\n    background-color: var(--bui-bg-solid);\n    color: var(--bui-fg-solid);\n\n    &:hover {\n      background-color: var(--bui-bg-solid-hover);\n      transition: background-color 150ms ease;\n    }\n\n    &:active {\n      background-color: var(--bui-bg-solid-pressed);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n\n    &[data-disabled='true'] {\n      background-color: var(--bui-bg-solid-disabled);\n      color: var(--bui-fg-solid-disabled);\n    }\n  }\n\n  .Button-module_bui-Button__1BvMm[data-variant='secondary'] {\n    background-color: var(--bui-bg-surface-1);\n    box-shadow: inset 0 0 0 1px var(--bui-border);\n    color: var(--bui-fg-primary);\n\n    &:hover {\n      box-shadow: inset 0 0 0 1px var(--bui-border-hover);\n      transition: box-shadow 150ms ease;\n    }\n\n    &:active {\n      box-shadow: inset 0 0 0 1px var(--bui-border-pressed);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n\n    &[data-disabled='true'] {\n      box-shadow: inset 0 0 0 1px var(--bui-border-disabled);\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Button-module_bui-Button__1BvMm[data-variant='tertiary'] {\n    background-color: transparent;\n    color: var(--bui-fg-primary);\n\n    &:hover {\n      background-color: var(--bui-bg-surface-1);\n      transition: background-color 200ms ease;\n    }\n\n    &:active {\n      background-color: var(--bui-bg-surface-2);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n\n    &[data-disabled='true'] {\n      background-color: transparent;\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Button-module_bui-Button__1BvMm[data-size='medium'] {\n    font-size: var(--bui-font-size-4);\n    padding: 0 var(--bui-space-3);\n    height: 2.5rem;\n  }\n\n  .Button-module_bui-Button__1BvMm[data-size='small'] {\n    font-size: var(--bui-font-size-3);\n    padding: 0 var(--bui-space-2);\n    height: 2rem;\n  }\n\n  .Button-module_bui-Button__1BvMm[data-size='small'] svg {\n    width: 1rem;\n    height: 1rem;\n  }\n\n  .Button-module_bui-Button__1BvMm[data-size='medium'] svg {\n    width: 1.25rem;\n    height: 1.25rem;\n  }\n}\n";
-var stylesButton = {"bui-Button":"Button-module_bui-Button__1BvMm"};
+var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Button-module_bui-Button__1BvMm {\n    --loading-duration: 200ms;\n    position: relative;\n    display: inline-flex;\n    border: none;\n    user-select: none;\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    padding: 0;\n    cursor: pointer;\n    border-radius: var(--bui-radius-2);\n    flex-shrink: 0;\n    transition: background-color var(--loading-duration) ease-out,\n      box-shadow var(--loading-duration) ease-out;\n\n    &[data-disabled='true'] {\n      cursor: not-allowed;\n    }\n\n    &[data-loading='true'] {\n      cursor: wait;\n    }\n  }\n\n  .Button-module_bui-Button__1BvMm[data-variant='primary'] {\n    background-color: var(--bui-bg-solid);\n    color: var(--bui-fg-solid);\n\n    &:hover {\n      background-color: var(--bui-bg-solid-hover);\n      transition: background-color 150ms ease;\n    }\n\n    &:active {\n      background-color: var(--bui-bg-solid-pressed);\n    }\n\n    &:focus-visible {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      background-color: var(--bui-bg-solid-disabled);\n      color: var(--bui-fg-solid-disabled);\n    }\n  }\n\n  .Button-module_bui-Button__1BvMm[data-variant='secondary'] {\n    background-color: var(--bui-bg-surface-1);\n    box-shadow: inset 0 0 0 1px var(--bui-border);\n    color: var(--bui-fg-primary);\n\n    &:hover {\n      box-shadow: inset 0 0 0 1px var(--bui-border-hover);\n      transition: box-shadow 150ms ease;\n    }\n\n    &:active {\n      box-shadow: inset 0 0 0 1px var(--bui-border-pressed);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      box-shadow: inset 0 0 0 1px var(--bui-border-disabled);\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Button-module_bui-Button__1BvMm[data-variant='tertiary'] {\n    background-color: transparent;\n    color: var(--bui-fg-primary);\n\n    &:hover {\n      background-color: var(--bui-bg-surface-1);\n      transition: background-color 200ms ease;\n    }\n\n    &:active {\n      background-color: var(--bui-bg-surface-2);\n    }\n\n    &:focus-visible {\n      outline: none;\n      transition: none;\n      box-shadow: inset 0 0 0 2px var(--bui-ring);\n    }\n\n    &[data-disabled='true'],\n    &[data-loading='true'] {\n      background-color: transparent;\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Button-module_bui-Button__1BvMm[data-size='small'] {\n    font-size: var(--bui-font-size-3);\n    padding: 0 var(--bui-space-2);\n    height: 2rem;\n\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Button-module_bui-Button__1BvMm[data-size='medium'] {\n    font-size: var(--bui-font-size-4);\n    padding: 0 var(--bui-space-3);\n    height: 2.5rem;\n\n    svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .Button-module_bui-ButtonContent__2x-bP {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--bui-space-1_5);\n    height: 100%;\n    width: 100%;\n    transition: opacity var(--loading-duration) ease-out;\n\n    .Button-module_bui-Button__1BvMm[data-loading='true'] & {\n      opacity: 0;\n    }\n  }\n\n  .Button-module_bui-ButtonSpinner__1MWbK {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    display: flex;\n    opacity: 0;\n    transition: opacity var(--loading-duration) ease-in;\n\n    .Button-module_bui-Button__1BvMm[data-loading='true'] & {\n      opacity: 1;\n    }\n\n    & svg {\n      animation: Button-module_bui-spin__yALtH 1s linear infinite;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .Button-module_bui-Button__1BvMm {\n      transition-duration: 50ms;\n    }\n\n    .Button-module_bui-ButtonContent__2x-bP {\n      transition-duration: 50ms;\n    }\n\n    .Button-module_bui-ButtonSpinner__1MWbK {\n      transition-duration: 50ms;\n    }\n\n    .Button-module_bui-ButtonSpinner__1MWbK svg {\n      animation: none;\n    }\n  }\n\n  @keyframes Button-module_bui-spin__yALtH {\n    from {\n      transform: rotate(0deg);\n    }\n\n    to {\n      transform: rotate(360deg);\n    }\n  }\n}\n";
+var stylesButton = {"bui-Button":"Button-module_bui-Button__1BvMm","bui-ButtonContent":"Button-module_bui-ButtonContent__2x-bP","bui-ButtonSpinner":"Button-module_bui-ButtonSpinner__1MWbK","bui-spin":"Button-module_bui-spin__yALtH"};
 styleInject(css_248z);
 
 export { stylesButton as default };

package/dist/components/ButtonIcon/ButtonIcon.esm.js

@@ -1,7 +1,8 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { Button } from 'react-aria-components';
+import { Button, ProgressBar } from 'react-aria-components';
+import { RiLoader4Line } from '@remixicon/react';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import stylesButtonIcon from './ButtonIcon.module.css.esm.js';
 import stylesButton from '../Button/Button.module.css.esm.js';
@@ -14,7 +15,7 @@ const ButtonIcon = forwardRef(
       ...props
     });
     const { classNames: classNamesButtonIcon } = useStyles("ButtonIcon");
-    const { className, icon, ...rest } = cleanedProps;
+    const { className, icon, loading, ...rest } = cleanedProps;
     return /* @__PURE__ */ jsx(
       Button,
       {
@@ -26,9 +27,39 @@ const ButtonIcon = forwardRef(
           className
         ),
         ref,
+        isPending: loading,
         ...dataAttributes,
         ...rest,
-        children: icon
+        children: ({ isPending }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: clsx(
+                classNames.content,
+                classNamesButtonIcon.content,
+                stylesButton[classNames.content],
+                stylesButtonIcon[classNamesButtonIcon.content],
+                className
+              ),
+              children: icon
+            }
+          ),
+          isPending && /* @__PURE__ */ jsx(
+            ProgressBar,
+            {
+              "aria-label": "Loading",
+              isIndeterminate: true,
+              className: clsx(
+                classNames.spinner,
+                classNamesButtonIcon.spinner,
+                stylesButton[classNames.spinner],
+                stylesButtonIcon[classNamesButtonIcon.spinner],
+                className
+              ),
+              children: /* @__PURE__ */ jsx(RiLoader4Line, { "aria-hidden": "true" })
+            }
+          )
+        ] })
       }
     );
   }

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.esm.js","sources":["../../../src/components/ButtonIcon/ButtonIcon.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton } from 'react-aria-components';\nimport type { ButtonIconProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport stylesButtonIcon from './ButtonIcon.module.css';\nimport stylesButton from '../Button/Button.module.css';\n\n/** @public */\nexport const ButtonIcon = forwardRef(\n  (props: ButtonIconProps, ref: Ref<HTMLButtonElement>) => {\n    const { classNames, dataAttributes, cleanedProps } = useStyles('Button', {\n      size: 'small',\n      variant: 'primary',\n      ...props,\n    });\n\n    const { classNames: classNamesButtonIcon } = useStyles('ButtonIcon');\n\n    const { className, icon, ...rest } = cleanedProps;\n\n    return (\n      <RAButton\n        className={clsx(\n          classNames.root,\n          classNamesButtonIcon.root,\n          stylesButton[classNames.root],\n          stylesButtonIcon[classNamesButtonIcon.root],\n          className,\n        )}\n        ref={ref}\n        {...dataAttributes}\n        {...rest}\n      >\n        {icon}\n      </RAButton>\n    );\n  },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"],"names":["RAButton"],"mappings":";;;;;;;;AAyBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,QAAA,EAAU;AAAA,MACvE,IAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS,SAAA;AAAA,MACT,GAAG;AAAA,KACJ,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GAAI,UAAU,YAAY,CAAA;AAEnE,IAAA,MAAM,EAAE,SAAA,EAAW,IAAA,EAAM,GAAG,MAAK,GAAI,YAAA;AAErC,IAAA,uBACE,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,IAAA;AAAA,UACX,oBAAA,CAAqB,IAAA;AAAA,UACrB,YAAA,CAAa,WAAW,IAAI,CAAA;AAAA,UAC5B,gBAAA,CAAiB,qBAAqB,IAAI,CAAA;AAAA,UAC1C;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
+{"version":3,"file":"ButtonIcon.esm.js","sources":["../../../src/components/ButtonIcon/ButtonIcon.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Button as RAButton, ProgressBar } from 'react-aria-components';\nimport { RiLoader4Line } from '@remixicon/react';\nimport type { ButtonIconProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport stylesButtonIcon from './ButtonIcon.module.css';\nimport stylesButton from '../Button/Button.module.css';\n\n/** @public */\nexport const ButtonIcon = forwardRef(\n  (props: ButtonIconProps, ref: Ref<HTMLButtonElement>) => {\n    const { classNames, dataAttributes, cleanedProps } = useStyles('Button', {\n      size: 'small',\n      variant: 'primary',\n      ...props,\n    });\n\n    const { classNames: classNamesButtonIcon } = useStyles('ButtonIcon');\n\n    const { className, icon, loading, ...rest } = cleanedProps;\n\n    return (\n      <RAButton\n        className={clsx(\n          classNames.root,\n          classNamesButtonIcon.root,\n          stylesButton[classNames.root],\n          stylesButtonIcon[classNamesButtonIcon.root],\n          className,\n        )}\n        ref={ref}\n        isPending={loading}\n        {...dataAttributes}\n        {...rest}\n      >\n        {({ isPending }) => (\n          <>\n            <span\n              className={clsx(\n                classNames.content,\n                classNamesButtonIcon.content,\n                stylesButton[classNames.content],\n                stylesButtonIcon[classNamesButtonIcon.content],\n                className,\n              )}\n            >\n              {icon}\n            </span>\n\n            {isPending && (\n              <ProgressBar\n                aria-label=\"Loading\"\n                isIndeterminate\n                className={clsx(\n                  classNames.spinner,\n                  classNamesButtonIcon.spinner,\n                  stylesButton[classNames.spinner],\n                  stylesButtonIcon[classNamesButtonIcon.spinner],\n                  className,\n                )}\n              >\n                <RiLoader4Line aria-hidden=\"true\" />\n              </ProgressBar>\n            )}\n          </>\n        )}\n      </RAButton>\n    );\n  },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"],"names":["RAButton"],"mappings":";;;;;;;;;AA0BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,QAAA,EAAU;AAAA,MACvE,IAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS,SAAA;AAAA,MACT,GAAG;AAAA,KACJ,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GAAI,UAAU,YAAY,CAAA;AAEnE,IAAA,MAAM,EAAE,SAAA,EAAW,IAAA,EAAM,OAAA,EAAS,GAAG,MAAK,GAAI,YAAA;AAE9C,IAAA,uBACE,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,IAAA;AAAA,UACX,oBAAA,CAAqB,IAAA;AAAA,UACrB,YAAA,CAAa,WAAW,IAAI,CAAA;AAAA,UAC5B,gBAAA,CAAiB,qBAAqB,IAAI,CAAA;AAAA,UAC1C;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,SAAA,EAAW,OAAA;AAAA,QACV,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,CAAC,EAAE,SAAA,EAAU,qBACZ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,OAAA;AAAA,gBACX,oBAAA,CAAqB,OAAA;AAAA,gBACrB,YAAA,CAAa,WAAW,OAAO,CAAA;AAAA,gBAC/B,gBAAA,CAAiB,qBAAqB,OAAO,CAAA;AAAA,gBAC7C;AAAA,eACF;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAEC,SAAA,oBACC,GAAA;AAAA,YAAC,WAAA;AAAA,YAAA;AAAA,cACC,YAAA,EAAW,SAAA;AAAA,cACX,eAAA,EAAe,IAAA;AAAA,cACf,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,OAAA;AAAA,gBACX,oBAAA,CAAqB,OAAA;AAAA,gBACrB,YAAA,CAAa,WAAW,OAAO,CAAA;AAAA,gBAC/B,gBAAA,CAAiB,qBAAqB,OAAO,CAAA;AAAA,gBAC7C;AAAA,eACF;AAAA,cAEA,QAAA,kBAAA,GAAA,CAAC,aAAA,EAAA,EAAc,aAAA,EAAY,MAAA,EAAO;AAAA;AAAA;AACpC,SAAA,EAEJ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}

package/dist/components/ButtonLink/ButtonLink.esm.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Link, RouterProvider } from 'react-aria-components';
@@ -18,29 +18,7 @@ const ButtonLink = forwardRef(
     const { classNames: classNamesButtonLink } = useStyles("ButtonLink");
     const { children, className, iconStart, iconEnd, href, ...rest } = cleanedProps;
     const isExternal = isExternalLink(href);
-    if (isExternal) {
-      return /* @__PURE__ */ jsxs(
-        Link,
-        {
-          className: clsx(
-            classNames.root,
-            classNamesButtonLink.root,
-            stylesButton[classNames.root],
-            className
-          ),
-          ref,
-          ...dataAttributes,
-          href,
-          ...rest,
-          children: [
-            iconStart,
-            children,
-            iconEnd
-          ]
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsxs(
+    const linkButton = /* @__PURE__ */ jsx(
       Link,
       {
         className: clsx(
@@ -53,13 +31,23 @@ const ButtonLink = forwardRef(
         ...dataAttributes,
         href,
         ...rest,
-        children: [
-          iconStart,
-          children,
-          iconEnd
-        ]
+        children: /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: clsx(classNames.content, stylesButton[classNames.content]),
+            children: [
+              iconStart,
+              children,
+              iconEnd
+            ]
+          }
+        )
       }
-    ) });
+    );
+    if (isExternal) {
+      return linkButton;
+    }
+    return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: linkButton });
   }
 );
 ButtonLink.displayName = "ButtonLink";

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Link as RALink, RouterProvider } from 'react-aria-components';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport type { ButtonLinkProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport stylesButton from '../Button/Button.module.css';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n  (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n    const navigate = useNavigate();\n\n    const { classNames, dataAttributes, cleanedProps } = useStyles('Button', {\n      size: 'small',\n      variant: 'primary',\n      ...props,\n    });\n\n    const { classNames: classNamesButtonLink } = useStyles('ButtonLink');\n\n    const { children, className, iconStart, iconEnd, href, ...rest } =\n      cleanedProps;\n\n    const isExternal = isExternalLink(href);\n\n    // If it's an external link, render RALink without RouterProvider\n    if (isExternal) {\n      return (\n        <RALink\n          className={clsx(\n            classNames.root,\n            classNamesButtonLink.root,\n            stylesButton[classNames.root],\n            className,\n          )}\n          ref={ref}\n          {...dataAttributes}\n          href={href}\n          {...rest}\n        >\n          {iconStart}\n          {children}\n          {iconEnd}\n        </RALink>\n      );\n    }\n\n    // For internal links, use RouterProvider\n    return (\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        <RALink\n          className={clsx(\n            classNames.root,\n            classNamesButtonLink.root,\n            stylesButton[classNames.root],\n            className,\n          )}\n          ref={ref}\n          {...dataAttributes}\n          href={href}\n          {...rest}\n        >\n          {iconStart}\n          {children}\n          {iconEnd}\n        </RALink>\n      </RouterProvider>\n    );\n  },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;;;;AA0BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,QAAA,EAAU;AAAA,MACvE,IAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS,SAAA;AAAA,MACT,GAAG;AAAA,KACJ,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GAAI,UAAU,YAAY,CAAA;AAEnE,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,SAAA,EAAW,SAAS,IAAA,EAAM,GAAG,MAAK,GAC7D,YAAA;AAEF,IAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAGtC,IAAA,IAAI,UAAA,EAAY;AACd,MAAA,uBACE,IAAA;AAAA,QAACA,IAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,IAAA;AAAA,YACX,oBAAA,CAAqB,IAAA;AAAA,YACrB,YAAA,CAAa,WAAW,IAAI,CAAA;AAAA,YAC5B;AAAA,WACF;AAAA,UACA,GAAA;AAAA,UACC,GAAG,cAAA;AAAA,UACJ,IAAA;AAAA,UACC,GAAG,IAAA;AAAA,UAEH,QAAA,EAAA;AAAA,YAAA,SAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA;AAAA;AAAA,OACH;AAAA,IAEJ;AAGA,IAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,IAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,IAAA;AAAA,UACX,oBAAA,CAAqB,IAAA;AAAA,UACrB,YAAA,CAAa,WAAW,IAAI,CAAA;AAAA,UAC5B;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACJ,IAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
+{"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Link as RALink, RouterProvider } from 'react-aria-components';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport type { ButtonLinkProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport stylesButton from '../Button/Button.module.css';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n  (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n    const navigate = useNavigate();\n\n    const { classNames, dataAttributes, cleanedProps } = useStyles('Button', {\n      size: 'small',\n      variant: 'primary',\n      ...props,\n    });\n\n    const { classNames: classNamesButtonLink } = useStyles('ButtonLink');\n\n    const { children, className, iconStart, iconEnd, href, ...rest } =\n      cleanedProps;\n\n    const isExternal = isExternalLink(href);\n\n    const linkButton = (\n      <RALink\n        className={clsx(\n          classNames.root,\n          classNamesButtonLink.root,\n          stylesButton[classNames.root],\n          className,\n        )}\n        ref={ref}\n        {...dataAttributes}\n        href={href}\n        {...rest}\n      >\n        <span\n          className={clsx(classNames.content, stylesButton[classNames.content])}\n        >\n          {iconStart}\n          {children}\n          {iconEnd}\n        </span>\n      </RALink>\n    );\n\n    // If it's an external link, render RALink without RouterProvider\n    if (isExternal) {\n      return linkButton;\n    }\n\n    // For internal links, use RouterProvider\n    return (\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        {linkButton}\n      </RouterProvider>\n    );\n  },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;;;;AA0BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,QAAA,EAAU;AAAA,MACvE,IAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS,SAAA;AAAA,MACT,GAAG;AAAA,KACJ,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GAAI,UAAU,YAAY,CAAA;AAEnE,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,SAAA,EAAW,SAAS,IAAA,EAAM,GAAG,MAAK,GAC7D,YAAA;AAEF,IAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAEtC,IAAA,MAAM,UAAA,mBACJ,GAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,IAAA;AAAA,UACX,oBAAA,CAAqB,IAAA;AAAA,UACrB,YAAA,CAAa,WAAW,IAAI,CAAA;AAAA,UAC5B;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACJ,IAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,IAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,YAAA,CAAa,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,YAEnE,QAAA,EAAA;AAAA,cAAA,SAAA;AAAA,cACA,QAAA;AAAA,cACA;AAAA;AAAA;AAAA;AACH;AAAA,KACF;AAIF,IAAA,IAAI,UAAA,EAAY;AACd,MAAA,OAAO,UAAA;AAAA,IACT;AAGA,IAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EACjC,QAAA,EAAA,UAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}

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

@@ -1,6 +1,6 @@
 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  .Dialog-module_bui-DialogOverlay__5nqD5 {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(232, 232, 232, 0.8);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n  }\n\n  [data-theme='dark'] .Dialog-module_bui-Dialog__Cnu24 {\n    background: rgba(0, 0, 0, 0.5);\n  }\n\n  .Dialog-module_bui-DialogOverlay__5nqD5[data-entering] {\n    animation: Dialog-module_fade-in__17nJR 200ms ease-out forwards;\n  }\n\n  .Dialog-module_bui-DialogOverlay__5nqD5[data-exiting] {\n    animation: Dialog-module_fade-out__jMAaZ 150ms ease-out forwards;\n  }\n\n  .Dialog-module_bui-Dialog__Cnu24 {\n    background: var(--bui-bg-surface-1);\n    border-radius: 0.5rem;\n    border: 1px solid var(--bui-border);\n    color: var(--bui-fg-primary);\n    position: relative;\n    width: min(var(--bui-dialog-min-width, 400px), calc(100vw - 3rem));\n    max-width: calc(100vw - 3rem);\n    height: min(var(--bui-dialog-min-height, auto), calc(100vh - 3rem));\n    max-height: calc(100vh - 3rem);\n    display: flex;\n    flex-direction: column;\n    outline: none;\n  }\n\n  /* Dialog entering animation */\n  .Dialog-module_bui-DialogOverlay__5nqD5[data-entering] .Dialog-module_bui-Dialog__Cnu24 {\n    animation: Dialog-module_dialog-enter__3NC2w 150ms ease-out forwards;\n  }\n\n  /* Dialog exiting animation */\n  .Dialog-module_bui-DialogOverlay__5nqD5[data-exiting] .Dialog-module_bui-Dialog__Cnu24 {\n    animation: Dialog-module_dialog-exit__21RUM 150ms ease-out forwards;\n  }\n\n  .Dialog-module_bui-DialogHeader__D340y {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    border-bottom: 1px solid var(--bui-border);\n  }\n\n  .Dialog-module_bui-DialogHeaderTitle__1UEkF {\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-bold);\n    margin: 0;\n  }\n\n  .Dialog-module_bui-DialogFooter__k2SK8 {\n    display: flex;\n    align-items: center;\n    justify-content: end;\n    gap: var(--bui-space-2);\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-3);\n    border-top: 1px solid var(--bui-border);\n  }\n\n  .Dialog-module_bui-DialogBody__2olLx {\n    padding: var(--bui-space-3);\n    flex: 1;\n    overflow-y: auto;\n  }\n\n  /* Keyframe animations */\n  @keyframes Dialog-module_fade-in__17nJR {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes Dialog-module_fade-out__jMAaZ {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  @keyframes Dialog-module_dialog-enter__3NC2w {\n    from {\n      opacity: 0.5;\n      transform: scale(0.8);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  @keyframes Dialog-module_dialog-exit__21RUM {\n    from {\n      opacity: 1;\n      transform: scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: scale(0.95);\n    }\n  }\n}\n";
+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  .Dialog-module_bui-DialogOverlay__5nqD5 {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: color-mix(in srgb, var(--bui-gray-2) 80%, transparent);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n  }\n\n  [data-theme='dark'] .Dialog-module_bui-Dialog__Cnu24 {\n    background: rgba(0, 0, 0, 0.5);\n  }\n\n  .Dialog-module_bui-DialogOverlay__5nqD5[data-entering] {\n    animation: Dialog-module_fade-in__17nJR 200ms ease-out forwards;\n  }\n\n  .Dialog-module_bui-DialogOverlay__5nqD5[data-exiting] {\n    animation: Dialog-module_fade-out__jMAaZ 150ms ease-out forwards;\n  }\n\n  .Dialog-module_bui-Dialog__Cnu24 {\n    background: var(--bui-bg-surface-1);\n    border-radius: 0.5rem;\n    border: 1px solid var(--bui-border);\n    color: var(--bui-fg-primary);\n    position: relative;\n    width: min(var(--bui-dialog-min-width, 400px), calc(100vw - 3rem));\n    max-width: calc(100vw - 3rem);\n    height: min(var(--bui-dialog-min-height, auto), calc(100vh - 3rem));\n    max-height: calc(100vh - 3rem);\n    display: flex;\n    flex-direction: column;\n    outline: none;\n  }\n\n  /* Dialog entering animation */\n  .Dialog-module_bui-DialogOverlay__5nqD5[data-entering] .Dialog-module_bui-Dialog__Cnu24 {\n    animation: Dialog-module_dialog-enter__3NC2w 150ms ease-out forwards;\n  }\n\n  /* Dialog exiting animation */\n  .Dialog-module_bui-DialogOverlay__5nqD5[data-exiting] .Dialog-module_bui-Dialog__Cnu24 {\n    animation: Dialog-module_dialog-exit__21RUM 150ms ease-out forwards;\n  }\n\n  .Dialog-module_bui-DialogHeader__D340y {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    border-bottom: 1px solid var(--bui-border);\n  }\n\n  .Dialog-module_bui-DialogHeaderTitle__1UEkF {\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-bold);\n    margin: 0;\n  }\n\n  .Dialog-module_bui-DialogFooter__k2SK8 {\n    display: flex;\n    align-items: center;\n    justify-content: end;\n    gap: var(--bui-space-2);\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-3);\n    border-top: 1px solid var(--bui-border);\n  }\n\n  .Dialog-module_bui-DialogBody__2olLx {\n    padding: var(--bui-space-3);\n    flex: 1;\n    overflow-y: auto;\n  }\n\n  /* Keyframe animations */\n  @keyframes Dialog-module_fade-in__17nJR {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes Dialog-module_fade-out__jMAaZ {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  @keyframes Dialog-module_dialog-enter__3NC2w {\n    from {\n      opacity: 0.5;\n      transform: scale(0.8);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  @keyframes Dialog-module_dialog-exit__21RUM {\n    from {\n      opacity: 1;\n      transform: scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: scale(0.95);\n    }\n  }\n}\n";
 var styles = {"bui-DialogOverlay":"Dialog-module_bui-DialogOverlay__5nqD5","bui-Dialog":"Dialog-module_bui-Dialog__Cnu24","fade-in":"Dialog-module_fade-in__17nJR","fade-out":"Dialog-module_fade-out__jMAaZ","dialog-enter":"Dialog-module_dialog-enter__3NC2w","dialog-exit":"Dialog-module_dialog-exit__21RUM","bui-DialogHeader":"Dialog-module_bui-DialogHeader__D340y","bui-DialogHeaderTitle":"Dialog-module_bui-DialogHeaderTitle__1UEkF","bui-DialogFooter":"Dialog-module_bui-DialogFooter__k2SK8","bui-DialogBody":"Dialog-module_bui-DialogBody__2olLx"};
 styleInject(css_248z);
 

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

@@ -1,6 +1,6 @@
 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-module_bui-MenuPopover__2_pRD {\n    display: flex;\n    flex-direction: column;\n    border: 1px solid var(--bui-border);\n    border-radius: var(--bui-radius-2);\n    background: var(--bui-bg-surface-1);\n    color: var(--bui-fg-primary);\n    outline: none;\n    transition: transform 200ms, opacity 200ms;\n    /* Let React Aria handle height constraints naturally */\n    min-height: 0;\n    /* Remove overflow from popover since ScrollArea will handle it */\n    overflow: hidden;\n\n    &[data-entering],\n    &[data-exiting] {\n      transform: var(--origin);\n      opacity: 0;\n    }\n\n    &[data-placement='top'] {\n      --origin: translateY(8px);\n    }\n\n    &[data-placement='bottom'] {\n      --origin: translateY(-8px);\n    }\n\n    &[data-placement='right'] {\n      --origin: translateX(-8px);\n    }\n\n    &[data-placement='left'] {\n      --origin: translateX(8px);\n    }\n  }\n\n  .Menu-module_bui-MenuContent__3DAPp {\n    max-height: inherit;\n    box-sizing: border-box;\n    overflow: auto;\n    min-width: 150px;\n    box-sizing: border-box;\n    outline: none;\n    padding-block: var(--bui-space-1);\n  }\n\n  .Menu-module_bui-MenuItem__2UbNh {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &[data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-open] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-color='danger'] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-color='danger'][data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-danger);\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-has-submenu] {\n      & > .Menu-module_bui-MenuItemWrapper__3SEGE > .Menu-module_bui-MenuItemArrow__2Gdal {\n        display: block;\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuItemWrapper__3SEGE {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    height: 2rem;\n    padding-inline: var(--bui-space-2);\n    border-radius: var(--bui-radius-2);\n    outline: none;\n    cursor: default;\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-3);\n    gap: var(--bui-space-6);\n  }\n\n  .Menu-module_bui-MenuItemListBox__3OVkY {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &:hover .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-selected] .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n      & > svg {\n        opacity: 1;\n        color: var(--bui-fg-primary);\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      opacity: 0;\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuItemContent__2jc-_ {\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuItemArrow__2Gdal {\n    display: none;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuSection__3OeyZ {\n    &:first-child .Menu-module_bui-MenuSectionHeader__yFmfK {\n      padding-top: 0;\n    }\n  }\n\n  .Menu-module_bui-MenuSectionHeader__yFmfK {\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    padding-top: var(--bui-space-3);\n    padding-left: var(--bui-space-3);\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-1);\n    font-weight: bold;\n    letter-spacing: 0.05rem;\n    text-transform: uppercase;\n  }\n\n  .Menu-module_bui-MenuSeparator__-EtU8 {\n    height: 1px;\n    background: var(--bui-border);\n    margin-inline: var(--bui-space-1_5);\n    margin-block: var(--bui-space-1);\n  }\n\n  .Menu-module_bui-MenuSearchField__1sNMj {\n    position: relative;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n\n    &[data-empty] {\n      .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n        display: none;\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuSearchFieldInput__2jPs5 {\n    display: flex;\n    align-items: center;\n    padding: 0 var(--bui-space-3);\n    border: none;\n    border-bottom: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    width: 100%;\n    height: 2rem;\n    cursor: inherit;\n    outline: none;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n  }\n\n  .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n    position: absolute;\n    right: var(--bui-space-2);\n    top: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuEmptyState__wPwuq {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    color: var(--bui-fg-secondary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n  }\n}\n";
+var 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-module_bui-MenuPopover__2_pRD {\n    display: flex;\n    flex-direction: column;\n    border: 1px solid var(--bui-border);\n    border-radius: var(--bui-radius-2);\n    background: var(--bui-bg-surface-1);\n    color: var(--bui-fg-primary);\n    outline: none;\n    transition: transform 200ms, opacity 200ms;\n    /* Let React Aria handle height constraints naturally */\n    min-height: 0;\n    /* Remove overflow from popover since ScrollArea will handle it */\n    overflow: hidden;\n\n    &[data-entering],\n    &[data-exiting] {\n      transform: var(--origin);\n      opacity: 0;\n    }\n\n    &[data-placement='top'] {\n      --origin: translateY(8px);\n    }\n\n    &[data-placement='bottom'] {\n      --origin: translateY(-8px);\n    }\n\n    &[data-placement='right'] {\n      --origin: translateX(-8px);\n    }\n\n    &[data-placement='left'] {\n      --origin: translateX(8px);\n    }\n  }\n\n  .Menu-module_bui-MenuContent__3DAPp {\n    max-height: inherit;\n    box-sizing: border-box;\n    overflow: auto;\n    min-width: 150px;\n    box-sizing: border-box;\n    outline: none;\n    padding-block: var(--bui-space-1);\n  }\n\n  .Menu-module_bui-MenuItem__2UbNh {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &[data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-open] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-color='danger'] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-color='danger'][data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-danger);\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-has-submenu] {\n      & > .Menu-module_bui-MenuItemWrapper__3SEGE > .Menu-module_bui-MenuItemArrow__2Gdal {\n        display: block;\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuItemWrapper__3SEGE {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    height: 2rem;\n    padding-inline: var(--bui-space-2);\n    border-radius: var(--bui-radius-2);\n    outline: none;\n    cursor: default;\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-3);\n    gap: var(--bui-space-6);\n  }\n\n  .Menu-module_bui-MenuItemListBox__3OVkY {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &:hover .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-selected] .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n      & > svg {\n        opacity: 1;\n        color: var(--bui-fg-primary);\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      opacity: 0;\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuItemContent__2jc-_ {\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuItemArrow__2Gdal {\n    display: none;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuSection__3OeyZ {\n    &:first-child .Menu-module_bui-MenuSectionHeader__yFmfK {\n      padding-top: 0;\n    }\n  }\n\n  .Menu-module_bui-MenuSectionHeader__yFmfK {\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    padding-top: var(--bui-space-3);\n    padding-left: var(--bui-space-3);\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-1);\n    font-weight: bold;\n    letter-spacing: 0.05rem;\n    text-transform: uppercase;\n  }\n\n  .Menu-module_bui-MenuSeparator__-EtU8 {\n    height: 1px;\n    background: var(--bui-border);\n    margin-inline: var(--bui-space-1_5);\n    margin-block: var(--bui-space-1);\n  }\n\n  .Menu-module_bui-MenuSearchField__1sNMj {\n    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);\n    background-color: var(--bui-bg-surface-1);\n    height: 2rem;\n\n    &[data-empty] {\n      .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n        visibility: hidden;\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuSearchFieldInput__2jPs5 {\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-module_bui-MenuSearchFieldClear__3bwIe {\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-module_bui-MenuEmptyState__wPwuq {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    color: var(--bui-fg-secondary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n  }\n}\n";
 var styles = {"bui-MenuPopover":"Menu-module_bui-MenuPopover__2_pRD","bui-MenuContent":"Menu-module_bui-MenuContent__3DAPp","bui-MenuItem":"Menu-module_bui-MenuItem__2UbNh","bui-MenuItemWrapper":"Menu-module_bui-MenuItemWrapper__3SEGE","bui-MenuItemArrow":"Menu-module_bui-MenuItemArrow__2Gdal","bui-MenuItemListBox":"Menu-module_bui-MenuItemListBox__3OVkY","bui-MenuItemListBoxCheck":"Menu-module_bui-MenuItemListBoxCheck__3flwX","bui-MenuItemContent":"Menu-module_bui-MenuItemContent__2jc-_","bui-MenuSection":"Menu-module_bui-MenuSection__3OeyZ","bui-MenuSectionHeader":"Menu-module_bui-MenuSectionHeader__yFmfK","bui-MenuSeparator":"Menu-module_bui-MenuSeparator__-EtU8","bui-MenuSearchField":"Menu-module_bui-MenuSearchField__1sNMj","bui-MenuSearchFieldClear":"Menu-module_bui-MenuSearchFieldClear__3bwIe","bui-MenuSearchFieldInput":"Menu-module_bui-MenuSearchFieldInput__2jPs5","bui-MenuEmptyState":"Menu-module_bui-MenuEmptyState__wPwuq"};
 styleInject(css_248z);
 

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

@@ -1,6 +1,6 @@
 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  .Popover-module_bui-Popover__100-n {\n    margin-right: 12px;\n    overflow: scroll;\n    background-color: var(--bui-bg-surface-1);\n    border: 1px solid var(--bui-border);\n    border-radius: var(--bui-radius-3);\n    padding-block: var(--bui-space-1);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  }\n}\n";
+var 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  .Popover-module_bui-Popover__100-n {\n    margin-right: 12px;\n    overflow-x: hidden;\n    overflow-y: auto;\n    background-color: var(--bui-bg-surface-1);\n    border: 1px solid var(--bui-border);\n    border-radius: var(--bui-radius-3);\n    padding-block: var(--bui-space-1);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  }\n}\n";
 var stylesPopover = {"bui-Popover":"Popover-module_bui-Popover__100-n"};
 styleInject(css_248z);
 

package/dist/components/SearchField/SearchField.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  .SearchField-module_bui-SearchField__2TyT_ {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex: 1;\n    flex-shrink: 0;\n\n    &[data-empty] {\n      .SearchField-module_bui-SearchFieldClear__1gJQc {\n        display: none;\n      }\n    }\n\n    &[data-startCollapsed='true'] {\n      transition: flex-basis 0.3s ease-in-out;\n      padding: 0;\n      flex: 0 1 auto;\n\n      &[data-collapsed='true'] {\n        flex-basis: 200px;\n      }\n\n      &[data-collapsed='false'] {\n        cursor: pointer;\n\n        &[data-size='medium'] {\n          flex-basis: 2.5rem;\n          height: 2.5rem;\n        }\n\n        &[data-size='small'] {\n          flex-basis: 2rem;\n          height: 2rem;\n        }\n\n        &[data-size='medium'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        &[data-size='small'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        .SearchField-module_bui-SearchFieldWrapper__37bMg {\n          .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n            padding-right: 0px;\n          }\n        }\n      }\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldWrapper__37bMg {\n    position: relative;\n\n    .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n      padding-right: var(--bui-space-6);\n    }\n\n    &[data-size='small'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n      height: 2rem;\n    }\n\n    &[data-size='medium'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n      height: 2.5rem;\n    }\n\n    &[data-size='small'] .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n      padding-left: var(--bui-space-8);\n    }\n\n    &[data-size='medium'] .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n      padding-left: var(--bui-space-9);\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldInputIcon__EA0t9 {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    margin-right: var(--bui-space-1);\n    color: var(--bui-fg-primary);\n    pointer-events: none;\n    /* To animate the icon when the input is collapsed */\n    transition: left 0.2s ease-in-out;\n\n    &[data-size='small'] {\n      width: 2rem;\n    }\n\n    &[data-size='medium'] {\n      width: 2.5rem;\n    }\n\n    &[data-size='small'] svg {\n      width: 1rem;\n      height: 1rem;\n    }\n\n    &[data-size='medium'] svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldInput__3Opoj {\n    display: flex;\n    align-items: center;\n    padding: 0 var(--bui-space-3);\n    border-radius: var(--bui-radius-2);\n    border: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    transition: padding 0.3s ease-in-out, border-color 0.2s ease-in-out,\n      outline-color 0.2s ease-in-out;\n    width: 100%;\n    height: 100%;\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    &[data-focused] {\n      outline-color: var(--bui-border-pressed);\n      outline-width: 0px;\n    }\n\n    &[data-hovered] {\n      border-color: var(--bui-border-hover);\n    }\n\n    &[data-focused] {\n      border-color: var(--bui-border-pressed);\n      outline-width: 0px;\n    }\n\n    &[data-invalid] {\n      border-color: var(--bui-fg-danger);\n    }\n\n    &[data-disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n      border: 1px solid var(--bui-border-disabled);\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldClear__1gJQc {\n    position: absolute;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-size='small'] {\n      width: 2rem;\n      height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      width: 2.5rem;\n      height: 2.5rem;\n    }\n\n    & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n}\n";
-var styles = {"bui-SearchField":"SearchField-module_bui-SearchField__2TyT_","bui-SearchFieldClear":"SearchField-module_bui-SearchFieldClear__1gJQc","bui-SearchFieldInput":"SearchField-module_bui-SearchFieldInput__3Opoj","bui-SearchFieldWrapper":"SearchField-module_bui-SearchFieldWrapper__37bMg","bui-SearchFieldInputIcon":"SearchField-module_bui-SearchFieldInputIcon__EA0t9"};
+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  .SearchField-module_bui-SearchField__2TyT_ {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex: 1;\n    flex-shrink: 0;\n\n    &[data-size='small'] {\n      --search-field-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --search-field-item-height: 2.5rem;\n    }\n\n    &[data-empty] {\n      .SearchField-module_bui-SearchFieldClear__1gJQc {\n        display: none;\n      }\n    }\n\n    &[data-startCollapsed='true'] {\n      transition: flex-basis 0.3s ease-in-out;\n      padding: 0;\n      flex: 0 1 auto;\n\n      &[data-collapsed='true'] {\n        flex-basis: 200px;\n      }\n\n      &[data-collapsed='false'] {\n        cursor: pointer;\n\n        &[data-size='medium'] {\n          flex-basis: 2.5rem;\n          height: 2.5rem;\n        }\n\n        &[data-size='small'] {\n          flex-basis: 2rem;\n          height: 2rem;\n        }\n\n        &[data-size='medium'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        &[data-size='small'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        .SearchField-module_bui-SearchFieldInputWrapper__1JEG8 {\n          .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n            padding-right: 0px;\n          }\n        }\n      }\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldInputWrapper__1JEG8 {\n    display: flex;\n    align-items: center;\n    border-radius: var(--bui-radius-2);\n    border: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\n    transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n\n    &[data-size='small'] {\n      height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      height: 2.5rem;\n    }\n\n    &:focus-within {\n      border-color: var(--bui-border-pressed);\n      outline-width: 0px;\n    }\n\n    &:hover {\n      border-color: var(--bui-border-hover);\n    }\n\n    &[data-invalid] {\n      border-color: var(--bui-fg-danger);\n    }\n\n    &[data-disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n      border: 1px solid var(--bui-border-disabled);\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldInputIcon__EA0t9 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    color: var(--bui-fg-primary);\n    pointer-events: none;\n    width: var(--search-field-item-height);\n    height: var(--search-field-item-height);\n    /* To animate the icon when the input is collapsed */\n    transition: opacity 0.2s ease-in-out;\n\n    & svg {\n      .SearchField-module_bui-SearchField__2TyT_[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .SearchField-module_bui-SearchField__2TyT_[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldInput__3Opoj {\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    transition: padding 0.3s ease-in-out;\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    &[data-disabled] {\n      cursor: not-allowed;\n    }\n\n    &:first-child {\n      .SearchField-module_bui-SearchField__2TyT_[data-size='small'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n\n      .SearchField-module_bui-SearchField__2TyT_[data-size='medium'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldClear__1gJQc {\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: var(--search-field-item-height);\n    height: var(--search-field-item-height);\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n}\n";
+var styles = {"bui-SearchField":"SearchField-module_bui-SearchField__2TyT_","bui-SearchFieldClear":"SearchField-module_bui-SearchFieldClear__1gJQc","bui-SearchFieldInput":"SearchField-module_bui-SearchFieldInput__3Opoj","bui-SearchFieldInputWrapper":"SearchField-module_bui-SearchFieldInputWrapper__1JEG8","bui-SearchFieldInputIcon":"SearchField-module_bui-SearchFieldInputIcon__EA0t9"};
 styleInject(css_248z);
 
 export { styles as default };