@backstage/ui 0.9.0-next.3 → 0.9.1-next.0

package/CHANGELOG.md

@@ -1,5 +1,192 @@
 # @backstage/ui
 
+## 0.9.1-next.0
+
+### Patch Changes
+
+- b3ad928: Fixed Table Row component to correctly handle cases where no `href` is provided, preventing unnecessary router provider wrapping and fixing the cursor incorrectly showing as a pointer despite the element not being a link.
+
+  Affected components: Row
+
+- fe7c751: Fixed `useTable` hook to prioritize `providedRowCount` over data length for accurate row count in server-side pagination scenarios.
+- c145031: Fixed Table column sorting indicator to show up arrow when no sort is active, correctly indicating that clicking will sort ascending.
+
+  Affected components: Column
+
+## 0.9.0
+
+### 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'`).
+
+- 5c614ff: **BREAKING**: Migrated Checkbox component from Base UI to React Aria Components.
+
+  API changes required:
+
+  - `checked` → `isSelected`
+  - `defaultChecked` → `defaultSelected`
+  - `disabled` → `isDisabled`
+  - `required` → `isRequired`
+  - `label` prop removed - use `children` instead
+  - CSS: `bui-CheckboxLabel` class removed
+  - Data attribute: `data-checked` → `data-selected`
+  - Use without label is no longer supported
+
+  Migration examples:
+
+  Before:
+
+  ```tsx
+  <Checkbox label="Accept terms" checked={agreed} onChange={setAgreed} />
+  ```
+
+  After:
+
+  ```tsx
+  <Checkbox isSelected={agreed} onChange={setAgreed}>
+    Accept terms
+  </Checkbox>
+  ```
+
+  Before:
+
+  ```tsx
+  <Checkbox label="Option" disabled />
+  ```
+
+  After:
+
+  ```tsx
+  <Checkbox isDisabled>Option</Checkbox>
+  ```
+
+  Before:
+
+  ```tsx
+  <Checkbox />
+  ```
+
+  After:
+
+  ```tsx
+  <Checkbox>
+    <VisuallyHidden>Accessible label</VisuallyHidden>
+  </Checkbox>
+  ```
+
+- 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.
+- a67670d: **BREAKING**: Removed central `componentDefinitions` object and related type utilities (`ComponentDefinitionName`, `ComponentClassNames`).
+
+  Component definitions are primarily intended for documenting the CSS class API for theming purposes, not for programmatic use in JavaScript/TypeScript.
+
+  **Migration Guide:**
+
+  If you were using component definitions or class names to build custom components, we recommend migrating to either:
+
+  - Use Backstage UI components directly as building blocks, or
+  - Duplicate the component CSS in your own stylesheets instead of relying on internal class names
+
+- b78fc45: **BREAKING**: Changed className prop behavior to augment default styles instead of being ignored or overriding them.
+
+  Affected components:
+
+  - Menu, MenuListBox, MenuAutocomplete, MenuAutocompleteListbox, MenuItem, MenuListBoxItem, MenuSection, MenuSeparator
+  - Switch
+  - Skeleton
+  - FieldLabel
+  - Header, HeaderToolbar
+  - HeaderPage
+  - Tabs, TabList, Tab, TabPanel
+
+  If you were passing custom className values to any of these components that relied on the previous behavior, you may need to adjust your styles to account for the default classes now being applied alongside your custom classes.
+
+- 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
+
+- d01de00: Fix broken external links in Backstage UI Header component.
+- 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.
+- 26c6a78: Fix default text color in Backstage UI
+- 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.
+- 836b0c7: Fixed dialog backdrop appearance in dark mode.
+- 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.
+- 6d35a6b: Removed `@base-ui-components/react` dependency as all components now use React Aria Components.
+- dac851f: Fix the default font size in Backstage UI.
+- 3c0ea67: Fix CSS layer ordering in Backstage UI to make sure component styles are loaded after tokens and base declarations.
+- 3b18d80: Fixed RadioGroup radio button ellipse distortion by preventing flex shrink and grow.
+- 4eb455c: Fix font smoothing as default in Backstage UI.
+- ff9f0c3: Enable tree-shaking of imports other than `*.css`.
+- 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.
+- e16ece5: Set the color-scheme property depending on theme
+- 1ef3ca4: Added new VisuallyHidden component for hiding content visually while keeping it accessible to screen readers.
+- 00bfb83: Fix default font wight and font family in Backstage UI.
+
 ## 0.9.0-next.3
 
 ### Minor Changes

package/README.md

@@ -16,3 +16,26 @@ yarn add @backstage/ui
 - [Backstage UI Documentation](https://ui.backstage.io)
 - [Backstage Readme](https://github.com/backstage/backstage/blob/master/README.md)
 - [Backstage Documentation](https://backstage.io/docs)
+
+## Writing Changesets for Components
+
+When creating changesets for component-specific changes, add component metadata to help maintain documentation:
+
+```markdown
+---
+'@backstage/ui': patch
+---
+
+Fixed size prop handling for Avatar component.
+
+Affected components: Avatar
+```
+
+**Guidelines:**
+
+- **Component names**: Use PascalCase as they appear in imports (Avatar, ButtonIcon, SearchField)
+- **Multiple components**: `Affected components: Button, ButtonLink, ButtonIcon`
+- **General changes**: Omit the metadata line (build changes, package-level updates)
+- **Placement**: The line can appear anywhere in the description
+
+The changelog sync tool will parse these tags and update the documentation site automatically.

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

@@ -4,11 +4,12 @@ import { Disclosure, Heading, Button, DisclosurePanel, DisclosureGroup } from 'r
 import { RiArrowDownSLine } from '@remixicon/react';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import { AccordionDefinition } from './definition.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);
+  const { classNames, cleanedProps } = useStyles(AccordionDefinition, props);
   return /* @__PURE__ */ jsx(
     Disclosure,
     {
@@ -20,7 +21,7 @@ const Accordion = forwardRef(({ className, ...props }, ref) => {
 });
 Accordion.displayName = "Accordion";
 const AccordionTrigger = forwardRef(({ className, title, subtitle, children, ...props }, ref) => {
-  const { classNames, cleanedProps } = useStyles("Accordion", props);
+  const { classNames, cleanedProps } = useStyles(AccordionDefinition, props);
   return /* @__PURE__ */ jsx(
     Heading,
     {
@@ -80,7 +81,7 @@ const AccordionTrigger = forwardRef(({ className, title, subtitle, children, ...
 });
 AccordionTrigger.displayName = "AccordionTrigger";
 const AccordionPanel = forwardRef(({ className, ...props }, ref) => {
-  const { classNames, cleanedProps } = useStyles("Accordion", props);
+  const { classNames, cleanedProps } = useStyles(AccordionDefinition, props);
   return /* @__PURE__ */ jsx(
     DisclosurePanel,
     {
@@ -92,7 +93,7 @@ const AccordionPanel = forwardRef(({ className, ...props }, ref) => {
 });
 AccordionPanel.displayName = "AccordionPanel";
 const AccordionGroup = forwardRef(({ className, allowsMultiple = false, ...props }, ref) => {
-  const { classNames, cleanedProps } = useStyles("Accordion", props);
+  const { classNames, cleanedProps } = useStyles(AccordionDefinition, props);
   return /* @__PURE__ */ jsx(
     DisclosureGroup,
     {

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

@@ -1 +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":"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"}
+{"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 { AccordionDefinition } from './definition';\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(AccordionDefinition, 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(AccordionDefinition, 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(AccordionDefinition, 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(AccordionDefinition, 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":"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"}

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

@@ -0,0 +1,15 @@
+const AccordionDefinition = {
+  classNames: {
+    root: "bui-Accordion",
+    trigger: "bui-AccordionTrigger",
+    triggerButton: "bui-AccordionTriggerButton",
+    triggerTitle: "bui-AccordionTriggerTitle",
+    triggerSubtitle: "bui-AccordionTriggerSubtitle",
+    triggerIcon: "bui-AccordionTriggerIcon",
+    panel: "bui-AccordionPanel",
+    group: "bui-AccordionGroup"
+  }
+};
+
+export { AccordionDefinition };
+//# sourceMappingURL=definition.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Accordion/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Accordion\n * @public\n */\nexport const AccordionDefinition = {\n  classNames: {\n    root: 'bui-Accordion',\n    trigger: 'bui-AccordionTrigger',\n    triggerButton: 'bui-AccordionTriggerButton',\n    triggerTitle: 'bui-AccordionTriggerTitle',\n    triggerSubtitle: 'bui-AccordionTriggerSubtitle',\n    triggerIcon: 'bui-AccordionTriggerIcon',\n    panel: 'bui-AccordionPanel',\n    group: 'bui-AccordionGroup',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,mBAAA,GAAsB;AAAA,EACjC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,eAAA;AAAA,IACN,OAAA,EAAS,sBAAA;AAAA,IACT,aAAA,EAAe,4BAAA;AAAA,IACf,YAAA,EAAc,2BAAA;AAAA,IACd,eAAA,EAAiB,8BAAA;AAAA,IACjB,WAAA,EAAa,0BAAA;AAAA,IACb,KAAA,EAAO,oBAAA;AAAA,IACP,KAAA,EAAO;AAAA;AAEX;;;;"}

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

@@ -2,14 +2,18 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useEffect } from 'react';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import { AvatarDefinition } from './definition.esm.js';
 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 { classNames, dataAttributes, cleanedProps } = useStyles(
+    AvatarDefinition,
+    {
+      size: "medium",
+      purpose: "informative",
+      ...props
+    }
+  );
   const { className, src, name, purpose, ...rest } = cleanedProps;
   const [imageStatus, setImageStatus] = useState("loading");
   useEffect(() => {

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, 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;;;;"}
+{"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 { AvatarDefinition } from './definition';\nimport styles from './Avatar.module.css';\n\n/** @public */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {\n  const { classNames, dataAttributes, cleanedProps } = useStyles(\n    AvatarDefinition,\n    {\n      size: 'medium',\n      purpose: 'informative',\n      ...props,\n    },\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":";;;;;;;AAwBO,MAAM,MAAA,GAAS,UAAA,CAAwC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,IACnD,gBAAA;AAAA,IACA;AAAA,MACE,IAAA,EAAM,QAAA;AAAA,MACN,OAAA,EAAS,aAAA;AAAA,MACT,GAAG;AAAA;AACL,GACF;AAEA,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/definition.esm.js

@@ -0,0 +1,13 @@
+const AvatarDefinition = {
+  classNames: {
+    root: "bui-AvatarRoot",
+    image: "bui-AvatarImage",
+    fallback: "bui-AvatarFallback"
+  },
+  dataAttributes: {
+    size: ["small", "medium", "large"]
+  }
+};
+
+export { AvatarDefinition };
+//# sourceMappingURL=definition.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Avatar/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Avatar\n * @public\n */\nexport const AvatarDefinition = {\n  classNames: {\n    root: 'bui-AvatarRoot',\n    image: 'bui-AvatarImage',\n    fallback: 'bui-AvatarFallback',\n  },\n  dataAttributes: {\n    size: ['small', 'medium', 'large'] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,gBAAA,GAAmB;AAAA,EAC9B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,gBAAA;AAAA,IACN,KAAA,EAAO,iBAAA;AAAA,IACP,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,IAAA,EAAM,CAAC,OAAA,EAAS,QAAA,EAAU,OAAO;AAAA;AAErC;;;;"}

package/dist/components/Box/Box.esm.js

@@ -2,10 +2,11 @@ import { forwardRef, createElement } from 'react';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import styles from './Box.module.css.esm.js';
+import { BoxDefinition } from './definition.esm.js';
 
 const Box = forwardRef((props, ref) => {
   const { classNames, utilityClasses, style, cleanedProps } = useStyles(
-    "Box",
+    BoxDefinition,
     props
   );
   const { as = "div", children, className, ...rest } = cleanedProps;

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

@@ -1 +1 @@
-{"version":3,"file":"Box.esm.js","sources":["../../../src/components/Box/Box.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 { createElement, forwardRef } from 'react';\nimport { BoxProps } from './types';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Box.module.css';\n\n/** @public */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {\n  const { classNames, utilityClasses, style, cleanedProps } = useStyles(\n    'Box',\n    props,\n  );\n\n  const { as = 'div', children, className, ...rest } = cleanedProps;\n\n  return createElement(\n    as,\n    {\n      ref,\n      className: clsx(\n        classNames.root,\n        styles[classNames.root],\n        utilityClasses,\n        className,\n      ),\n      style,\n      ...rest,\n    },\n    children,\n  );\n});\n\nBox.displayName = 'Box';\n"],"names":[],"mappings":";;;;;AAuBO,MAAM,GAAA,GAAM,UAAA,CAAqC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACtE,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,KAAA,EAAO,cAAa,GAAI,SAAA;AAAA,IAC1D,KAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,EAAE,EAAA,GAAK,KAAA,EAAO,UAAU,SAAA,EAAW,GAAG,MAAK,GAAI,YAAA;AAErD,EAAA,OAAO,aAAA;AAAA,IACL,EAAA;AAAA,IACA;AAAA,MACE,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,IAAA;AAAA,QACX,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,QACtB,cAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACL;AAAA,IACA;AAAA,GACF;AACF,CAAC;AAED,GAAA,CAAI,WAAA,GAAc,KAAA;;;;"}
+{"version":3,"file":"Box.esm.js","sources":["../../../src/components/Box/Box.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 { createElement, forwardRef } from 'react';\nimport { BoxProps } from './types';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Box.module.css';\nimport { BoxDefinition } from './definition';\n\n/** @public */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {\n  const { classNames, utilityClasses, style, cleanedProps } = useStyles(\n    BoxDefinition,\n    props,\n  );\n\n  const { as = 'div', children, className, ...rest } = cleanedProps;\n\n  return createElement(\n    as,\n    {\n      ref,\n      className: clsx(\n        classNames.root,\n        styles[classNames.root],\n        utilityClasses,\n        className,\n      ),\n      style,\n      ...rest,\n    },\n    children,\n  );\n});\n\nBox.displayName = 'Box';\n"],"names":[],"mappings":";;;;;;AAwBO,MAAM,GAAA,GAAM,UAAA,CAAqC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACtE,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,KAAA,EAAO,cAAa,GAAI,SAAA;AAAA,IAC1D,aAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,EAAE,EAAA,GAAK,KAAA,EAAO,UAAU,SAAA,EAAW,GAAG,MAAK,GAAI,YAAA;AAErD,EAAA,OAAO,aAAA;AAAA,IACL,EAAA;AAAA,IACA;AAAA,MACE,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,IAAA;AAAA,QACX,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,QACtB,cAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACL;AAAA,IACA;AAAA,GACF;AACF,CAAC;AAED,GAAA,CAAI,WAAA,GAAc,KAAA;;;;"}

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

@@ -0,0 +1,32 @@
+const BoxDefinition = {
+  classNames: {
+    root: "bui-Box"
+  },
+  utilityProps: [
+    "m",
+    "mb",
+    "ml",
+    "mr",
+    "mt",
+    "mx",
+    "my",
+    "p",
+    "pb",
+    "pl",
+    "pr",
+    "pt",
+    "px",
+    "py",
+    "position",
+    "display",
+    "width",
+    "minWidth",
+    "maxWidth",
+    "height",
+    "minHeight",
+    "maxHeight"
+  ]
+};
+
+export { BoxDefinition };
+//# sourceMappingURL=definition.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Box/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Box\n * @public\n */\nexport const BoxDefinition = {\n  classNames: {\n    root: 'bui-Box',\n  },\n  utilityProps: [\n    'm',\n    'mb',\n    'ml',\n    'mr',\n    'mt',\n    'mx',\n    'my',\n    'p',\n    'pb',\n    'pl',\n    'pr',\n    'pt',\n    'px',\n    'py',\n    'position',\n    'display',\n    'width',\n    'minWidth',\n    'maxWidth',\n    'height',\n    'minHeight',\n    'maxHeight',\n  ],\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,aAAA,GAAgB;AAAA,EAC3B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,OAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA;AAEJ;;;;"}

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

@@ -4,15 +4,19 @@ import { forwardRef } from 'react';
 import { Button as Button$1, ProgressBar } from 'react-aria-components';
 import { RiLoader4Line } from '@remixicon/react';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import { ButtonDefinition } from './definition.esm.js';
 import stylesButton from './Button.module.css.esm.js';
 
 const Button = forwardRef(
   (props, ref) => {
-    const { classNames, dataAttributes, cleanedProps } = useStyles("Button", {
-      size: "small",
-      variant: "primary",
-      ...props
-    });
+    const { classNames, dataAttributes, cleanedProps } = useStyles(
+      ButtonDefinition,
+      {
+        size: "small",
+        variant: "primary",
+        ...props
+      }
+    );
     const { children, className, iconStart, iconEnd, loading, ...rest } = cleanedProps;
     return /* @__PURE__ */ jsx(
       Button$1,

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, 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;;;;"}
+{"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 { ButtonDefinition } from './definition';\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(\n      ButtonDefinition,\n      {\n        size: 'small',\n        variant: 'primary',\n        ...props,\n      },\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":";;;;;;;;;AA0BO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAoB,GAAA,KAAgC;AACnD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,MACnD,gBAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,OAAA;AAAA,QACN,OAAA,EAAS,SAAA;AAAA,QACT,GAAG;AAAA;AACL,KACF;AAEA,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/definition.esm.js

@@ -0,0 +1,15 @@
+const ButtonDefinition = {
+  classNames: {
+    root: "bui-Button",
+    content: "bui-ButtonContent",
+    spinner: "bui-ButtonSpinner"
+  },
+  dataAttributes: {
+    size: ["small", "medium", "large"],
+    variant: ["primary", "secondary", "tertiary"],
+    loading: [true, false]
+  }
+};
+
+export { ButtonDefinition };
+//# sourceMappingURL=definition.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Button/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Button\n * @public\n */\nexport const ButtonDefinition = {\n  classNames: {\n    root: 'bui-Button',\n    content: 'bui-ButtonContent',\n    spinner: 'bui-ButtonSpinner',\n  },\n  dataAttributes: {\n    size: ['small', 'medium', 'large'] as const,\n    variant: ['primary', 'secondary', 'tertiary'] as const,\n    loading: [true, false] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,gBAAA,GAAmB;AAAA,EAC9B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,OAAA,EAAS,mBAAA;AAAA,IACT,OAAA,EAAS;AAAA,GACX;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,IAAA,EAAM,CAAC,OAAA,EAAS,QAAA,EAAU,OAAO,CAAA;AAAA,IACjC,OAAA,EAAS,CAAC,SAAA,EAAW,WAAA,EAAa,UAAU,CAAA;AAAA,IAC5C,OAAA,EAAS,CAAC,IAAA,EAAM,KAAK;AAAA;AAEzB;;;;"}

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

@@ -4,17 +4,22 @@ import { forwardRef } from 'react';
 import { Button, ProgressBar } from 'react-aria-components';
 import { RiLoader4Line } from '@remixicon/react';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import { ButtonDefinition } from '../Button/definition.esm.js';
+import { ButtonIconDefinition } from './definition.esm.js';
 import stylesButtonIcon from './ButtonIcon.module.css.esm.js';
 import stylesButton from '../Button/Button.module.css.esm.js';
 
 const ButtonIcon = forwardRef(
   (props, ref) => {
-    const { classNames, dataAttributes, cleanedProps } = useStyles("Button", {
-      size: "small",
-      variant: "primary",
-      ...props
-    });
-    const { classNames: classNamesButtonIcon } = useStyles("ButtonIcon");
+    const { classNames, dataAttributes, cleanedProps } = useStyles(
+      ButtonDefinition,
+      {
+        size: "small",
+        variant: "primary",
+        ...props
+      }
+    );
+    const { classNames: classNamesButtonIcon } = useStyles(ButtonIconDefinition);
     const { className, icon, loading, ...rest } = cleanedProps;
     return /* @__PURE__ */ jsx(
       Button,

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, 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;;;;"}
+{"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 { ButtonDefinition } from '../Button/definition';\nimport { ButtonIconDefinition } from './definition';\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(\n      ButtonDefinition,\n      {\n        size: 'small',\n        variant: 'primary',\n        ...props,\n      },\n    );\n\n    const { classNames: classNamesButtonIcon } =\n      useStyles(ButtonIconDefinition);\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":";;;;;;;;;;;AA4BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,MACnD,gBAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,OAAA;AAAA,QACN,OAAA,EAAS,SAAA;AAAA,QACT,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GACvC,UAAU,oBAAoB,CAAA;AAEhC,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/ButtonIcon/definition.esm.js

@@ -0,0 +1,10 @@
+const ButtonIconDefinition = {
+  classNames: {
+    root: "bui-ButtonIcon",
+    content: "bui-ButtonIconContent",
+    spinner: "bui-ButtonIconSpinner"
+  }
+};
+
+export { ButtonIconDefinition };
+//# sourceMappingURL=definition.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ButtonIcon/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for ButtonIcon\n * @public\n */\nexport const ButtonIconDefinition = {\n  classNames: {\n    root: 'bui-ButtonIcon',\n    content: 'bui-ButtonIconContent',\n    spinner: 'bui-ButtonIconSpinner',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,oBAAA,GAAuB;AAAA,EAClC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,gBAAA;AAAA,IACN,OAAA,EAAS,uBAAA;AAAA,IACT,OAAA,EAAS;AAAA;AAEb;;;;"}

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

@@ -4,18 +4,23 @@ import { forwardRef } from 'react';
 import { Link, RouterProvider } from 'react-aria-components';
 import { useNavigate, useHref } from 'react-router-dom';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import { ButtonDefinition } from '../Button/definition.esm.js';
+import { ButtonLinkDefinition } from './definition.esm.js';
 import { isExternalLink } from '../../utils/isExternalLink.esm.js';
 import stylesButton from '../Button/Button.module.css.esm.js';
 
 const ButtonLink = forwardRef(
   (props, ref) => {
     const navigate = useNavigate();
-    const { classNames, dataAttributes, cleanedProps } = useStyles("Button", {
-      size: "small",
-      variant: "primary",
-      ...props
-    });
-    const { classNames: classNamesButtonLink } = useStyles("ButtonLink");
+    const { classNames, dataAttributes, cleanedProps } = useStyles(
+      ButtonDefinition,
+      {
+        size: "small",
+        variant: "primary",
+        ...props
+      }
+    );
+    const { classNames: classNamesButtonLink } = useStyles(ButtonLinkDefinition);
     const { children, className, iconStart, iconEnd, href, ...rest } = cleanedProps;
     const isExternal = isExternalLink(href);
     const linkButton = /* @__PURE__ */ jsx(