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

package/CHANGELOG.md

@@ -1,5 +1,100 @@
 # @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
+
+- 539cf26: **BREAKING**: Migrated Avatar component from Base UI to custom implementation with size changes:
+
+  - Base UI-specific props are no longer supported
+  - Size values have been updated:
+    - New `x-small` size added (1.25rem / 20px)
+    - `small` size unchanged (1.5rem / 24px)
+    - `medium` size unchanged (2rem / 32px, default)
+    - `large` size **changed from 3rem to 2.5rem** (40px)
+    - New `x-large` size added (3rem / 48px)
+
+  Migration:
+
+  ```diff
+  # Remove Base UI-specific props
+  - <Avatar src="..." name="..." render={...} />
+  + <Avatar src="..." name="..." />
+
+  # Update large size usage to x-large for same visual size
+  - <Avatar src="..." name="..." size="large" />
+  + <Avatar src="..." name="..." size="x-large" />
+  ```
+
+  Added `purpose` prop for accessibility control (`'informative'` or `'decoration'`).
+
+- 134151f: Fixing styles on SearchField in Backstage UI after migration to CSS modules. `SearchField` has now its own set of class names. We previously used class names from `TextField` but this approach was creating some confusion so going forward in your theme you'll be able to theme `TextField` and `SearchField` separately.
+
+### Patch Changes
+
+- d01de00: Fix broken external links in Backstage UI Header component.
+- deaa427: Fixed Text component to prevent `truncate` prop from being spread to the underlying DOM element.
+- 1059f95: Improved the Link component structure in Backstage UI.
+- 6874094: Migrated CellProfile component from Base UI Avatar to Backstage UI Avatar component.
+- 719d772: Avatar components in x-small and small sizes now display only one initial instead of two, improving readability at smaller dimensions.
+- 3b18d80: Fixed RadioGroup radio button ellipse distortion by preventing flex shrink and grow.
+- e16ece5: Set the color-scheme property depending on theme
+
 ## 0.9.0-next.1
 
 ### Minor Changes

package/css/styles.css

@@ -247,6 +247,14 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+
+  [data-theme-mode="dark"] {
+    color-scheme: dark;
+  }
+
+  [data-theme-mode="light"] {
+    color-scheme: light;
+  }
 }
 
 @layer components;

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/Avatar/Avatar.esm.js

@@ -1,6 +1,5 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Avatar as Avatar$1 } from '@base-ui-components/react/avatar';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect } from 'react';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import styles from './Avatar.module.css.esm.js';
@@ -8,36 +7,53 @@ import styles from './Avatar.module.css.esm.js';
 const Avatar = forwardRef((props, ref) => {
   const { classNames, dataAttributes, cleanedProps } = useStyles("Avatar", {
     size: "medium",
+    purpose: "informative",
     ...props
   });
-  const { className, src, name, ...rest } = cleanedProps;
-  return /* @__PURE__ */ jsxs(
-    Avatar$1.Root,
+  const { className, src, name, purpose, ...rest } = cleanedProps;
+  const [imageStatus, setImageStatus] = useState("loading");
+  useEffect(() => {
+    setImageStatus("loading");
+    const img = new Image();
+    img.onload = () => setImageStatus("loaded");
+    img.onerror = () => setImageStatus("error");
+    img.src = src;
+    return () => {
+      img.onload = null;
+      img.onerror = null;
+    };
+  }, [src]);
+  const initialsCount = ["x-small", "small"].includes(cleanedProps.size) ? 1 : 2;
+  const initials = name.split(" ").map((word) => word[0]).join("").toLocaleUpperCase("en-US").slice(0, initialsCount);
+  return /* @__PURE__ */ jsx(
+    "div",
     {
       ref,
+      role: "img",
+      "aria-label": purpose === "informative" ? name : void 0,
+      "aria-hidden": purpose === "decoration" ? true : void 0,
       className: clsx(classNames.root, styles[classNames.root], className),
       ...dataAttributes,
       ...rest,
-      children: [
-        /* @__PURE__ */ jsx(
-          Avatar$1.Image,
-          {
-            className: clsx(classNames.image, styles[classNames.image]),
-            src
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Avatar$1.Fallback,
-          {
-            className: clsx(classNames.fallback, styles[classNames.fallback]),
-            children: (name || "").split(" ").map((word) => word[0]).join("").toLocaleUpperCase("en-US").slice(0, 2)
-          }
-        )
-      ]
+      children: imageStatus === "loaded" ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src,
+          alt: "",
+          className: clsx(classNames.image, styles[classNames.image])
+        }
+      ) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": "true",
+          className: clsx(classNames.fallback, styles[classNames.fallback]),
+          children: initials
+        }
+      )
     }
   );
 });
-Avatar.displayName = Avatar$1.Root.displayName;
+Avatar.displayName = "Avatar";
 
 export { Avatar };
 //# sourceMappingURL=Avatar.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.esm.js","sources":["../../../src/components/Avatar/Avatar.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, ElementRef } from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui-components/react/avatar';\nimport clsx from 'clsx';\nimport { AvatarProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Avatar.module.css';\n\n/** @public */\nexport const Avatar = forwardRef<\n  ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>((props, ref) => {\n  const { classNames, dataAttributes, cleanedProps } = useStyles('Avatar', {\n    size: 'medium',\n    ...props,\n  });\n\n  const { className, src, name, ...rest } = cleanedProps;\n\n  return (\n    <AvatarPrimitive.Root\n      ref={ref}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...dataAttributes}\n      {...rest}\n    >\n      <AvatarPrimitive.Image\n        className={clsx(classNames.image, styles[classNames.image])}\n        src={src}\n      />\n      <AvatarPrimitive.Fallback\n        className={clsx(classNames.fallback, styles[classNames.fallback])}\n      >\n        {(name || '')\n          .split(' ')\n          .map(word => word[0])\n          .join('')\n          .toLocaleUpperCase('en-US')\n          .slice(0, 2)}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  );\n});\n\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n"],"names":["AvatarPrimitive"],"mappings":";;;;;;;AAwBO,MAAM,MAAA,GAAS,UAAA,CAGpB,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,QAAA,EAAU;AAAA,IACvE,IAAA,EAAM,QAAA;AAAA,IACN,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,GAAA,EAAK,IAAA,EAAM,GAAG,MAAK,GAAI,YAAA;AAE1C,EAAA,uBACE,IAAA;AAAA,IAACA,QAAA,CAAgB,IAAA;AAAA,IAAhB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,cAAA;AAAA,MACH,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAACA,QAAA,CAAgB,KAAA;AAAA,UAAhB;AAAA,YACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,YAC1D;AAAA;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAACA,QAAA,CAAgB,QAAA;AAAA,UAAhB;AAAA,YACC,WAAW,IAAA,CAAK,UAAA,CAAW,UAAU,MAAA,CAAO,UAAA,CAAW,QAAQ,CAAC,CAAA;AAAA,YAE9D,mBAAQ,EAAA,EACP,KAAA,CAAM,GAAG,CAAA,CACT,GAAA,CAAI,UAAQ,IAAA,CAAK,CAAC,CAAC,CAAA,CACnB,IAAA,CAAK,EAAE,CAAA,CACP,iBAAA,CAAkB,OAAO,CAAA,CACzB,KAAA,CAAM,GAAG,CAAC;AAAA;AAAA;AACf;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,MAAA,CAAO,WAAA,GAAcA,SAAgB,IAAA,CAAK,WAAA;;;;"}
+{"version":3,"file":"Avatar.esm.js","sources":["../../../src/components/Avatar/Avatar.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, useState, useEffect } from 'react';\nimport clsx from 'clsx';\nimport { AvatarProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Avatar.module.css';\n\n/** @public */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {\n  const { classNames, dataAttributes, cleanedProps } = useStyles('Avatar', {\n    size: 'medium',\n    purpose: 'informative',\n    ...props,\n  });\n\n  const { className, src, name, purpose, ...rest } = cleanedProps;\n\n  const [imageStatus, setImageStatus] = useState<\n    'loading' | 'loaded' | 'error'\n  >('loading');\n\n  useEffect(() => {\n    setImageStatus('loading');\n    const img = new Image();\n    img.onload = () => setImageStatus('loaded');\n    img.onerror = () => setImageStatus('error');\n    img.src = src;\n\n    return () => {\n      img.onload = null;\n      img.onerror = null;\n    };\n  }, [src]);\n\n  const initialsCount = ['x-small', 'small'].includes(cleanedProps.size)\n    ? 1\n    : 2;\n\n  const initials = name\n    .split(' ')\n    .map(word => word[0])\n    .join('')\n    .toLocaleUpperCase('en-US')\n    .slice(0, initialsCount);\n\n  return (\n    <div\n      ref={ref}\n      role=\"img\"\n      aria-label={purpose === 'informative' ? name : undefined}\n      aria-hidden={purpose === 'decoration' ? true : undefined}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...dataAttributes}\n      {...rest}\n    >\n      {imageStatus === 'loaded' ? (\n        <img\n          src={src}\n          alt=\"\"\n          className={clsx(classNames.image, styles[classNames.image])}\n        />\n      ) : (\n        <div\n          aria-hidden=\"true\"\n          className={clsx(classNames.fallback, styles[classNames.fallback])}\n        >\n          {initials}\n        </div>\n      )}\n    </div>\n  );\n});\n\nAvatar.displayName = 'Avatar';\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,MAAA,GAAS,UAAA,CAAwC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,QAAA,EAAU;AAAA,IACvE,IAAA,EAAM,QAAA;AAAA,IACN,OAAA,EAAS,aAAA;AAAA,IACT,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,GAAA,EAAK,MAAM,OAAA,EAAS,GAAG,MAAK,GAAI,YAAA;AAEnD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAEpC,SAAS,CAAA;AAEX,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,cAAA,CAAe,SAAS,CAAA;AACxB,IAAA,MAAM,GAAA,GAAM,IAAI,KAAA,EAAM;AACtB,IAAA,GAAA,CAAI,MAAA,GAAS,MAAM,cAAA,CAAe,QAAQ,CAAA;AAC1C,IAAA,GAAA,CAAI,OAAA,GAAU,MAAM,cAAA,CAAe,OAAO,CAAA;AAC1C,IAAA,GAAA,CAAI,GAAA,GAAM,GAAA;AAEV,IAAA,OAAO,MAAM;AACX,MAAA,GAAA,CAAI,MAAA,GAAS,IAAA;AACb,MAAA,GAAA,CAAI,OAAA,GAAU,IAAA;AAAA,IAChB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAER,EAAA,MAAM,aAAA,GAAgB,CAAC,SAAA,EAAW,OAAO,EAAE,QAAA,CAAS,YAAA,CAAa,IAAI,CAAA,GACjE,CAAA,GACA,CAAA;AAEJ,EAAA,MAAM,WAAW,IAAA,CACd,KAAA,CAAM,GAAG,CAAA,CACT,GAAA,CAAI,UAAQ,IAAA,CAAK,CAAC,CAAC,CAAA,CACnB,IAAA,CAAK,EAAE,CAAA,CACP,iBAAA,CAAkB,OAAO,CAAA,CACzB,KAAA,CAAM,GAAG,aAAa,CAAA;AAEzB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA,EAAK,KAAA;AAAA,MACL,YAAA,EAAY,OAAA,KAAY,aAAA,GAAgB,IAAA,GAAO,MAAA;AAAA,MAC/C,aAAA,EAAa,OAAA,KAAY,YAAA,GAAe,IAAA,GAAO,MAAA;AAAA,MAC/C,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,cAAA;AAAA,MACH,GAAG,IAAA;AAAA,MAEH,0BAAgB,QAAA,mBACf,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,GAAA,EAAI,EAAA;AAAA,UACJ,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC;AAAA;AAAA,OAC5D,mBAEA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAY,MAAA;AAAA,UACZ,WAAW,IAAA,CAAK,UAAA,CAAW,UAAU,MAAA,CAAO,UAAA,CAAW,QAAQ,CAAC,CAAA;AAAA,UAE/D,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,GAEJ;AAEJ,CAAC;AAED,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}

package/dist/components/Avatar/Avatar.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  .Avatar-module_bui-AvatarRoot__3BSck {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    vertical-align: middle;\n    border-radius: 100%;\n    user-select: none;\n    font-weight: 500;\n    color: var(--bui-fg-primary);\n    background-color: var(--bui-bg-surface-2);\n    font-size: 1rem;\n    line-height: 1;\n    overflow: hidden;\n    height: 2rem;\n    width: 2rem;\n  }\n\n  .Avatar-module_bui-AvatarRoot__3BSck[data-size='small'] {\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n\n  .Avatar-module_bui-AvatarRoot__3BSck[data-size='medium'] {\n    height: 2rem;\n    width: 2rem;\n  }\n\n  .Avatar-module_bui-AvatarRoot__3BSck[data-size='large'] {\n    height: 3rem;\n    width: 3rem;\n  }\n\n  .Avatar-module_bui-AvatarImage__2ehc- {\n    object-fit: cover;\n    height: 100%;\n    width: 100%;\n  }\n\n  .Avatar-module_bui-AvatarFallback__3qnqR {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n    height: 100%;\n    width: 100%;\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-regular);\n    box-shadow: inset 0 0 0 1px var(--bui-border);\n    border-radius: var(--bui-radius-full);\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  .Avatar-module_bui-AvatarRoot__3BSck {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    vertical-align: middle;\n    border-radius: 100%;\n    user-select: none;\n    font-weight: 500;\n    color: var(--bui-fg-primary);\n    background-color: var(--bui-bg-surface-2);\n    font-size: 1rem;\n    line-height: 1;\n    overflow: hidden;\n    height: 2rem;\n    width: 2rem;\n  }\n\n  .Avatar-module_bui-AvatarRoot__3BSck[data-size='x-small'] {\n    height: 1.25rem;\n    width: 1.25rem;\n  }\n\n  .Avatar-module_bui-AvatarRoot__3BSck[data-size='small'] {\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n\n  .Avatar-module_bui-AvatarRoot__3BSck[data-size='medium'] {\n    height: 2rem;\n    width: 2rem;\n  }\n\n  .Avatar-module_bui-AvatarRoot__3BSck[data-size='large'] {\n    height: 2.5rem;\n    width: 2.5rem;\n  }\n\n  .Avatar-module_bui-AvatarRoot__3BSck[data-size='x-large'] {\n    height: 3rem;\n    width: 3rem;\n  }\n\n  .Avatar-module_bui-AvatarImage__2ehc- {\n    object-fit: cover;\n    height: 100%;\n    width: 100%;\n    display: block;\n  }\n\n  .Avatar-module_bui-AvatarFallback__3qnqR {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n    height: 100%;\n    width: 100%;\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-regular);\n    box-shadow: inset 0 0 0 1px var(--bui-border);\n    border-radius: var(--bui-radius-full);\n  }\n}\n";
 var styles = {"bui-AvatarRoot":"Avatar-module_bui-AvatarRoot__3BSck","bui-AvatarImage":"Avatar-module_bui-AvatarImage__2ehc-","bui-AvatarFallback":"Avatar-module_bui-AvatarFallback__3qnqR"};
 styleInject(css_248z);
 

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";