@backstage/ui 0.7.0-next.3 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @backstage/ui
 
+## 0.7.0
+
+### Minor Changes
+
+- 0615e54: We are moving our DataTable component to React Aria. We removed our DataTable to only use Table as a single and opinionated option for tables. This new structure is made possible by using React Aria under the hood.
+- b245c9d: Backstage UI - HeaderPage - We are updating the breadcrumb to be more visible and accessible.
+- 800f593: **Breaking change** We are updating the Menu component to use React Aria under the hood. The structure and all props are changing to follow React Aria's guidance.
+- b0e47f3: **Breaking** We are upgrading our `Text` component to support all font sizes making the `Heading` component redundant. The new `Text` component introduces 4 sizes for title and 4 sizes for body text. All of these work in multiple colors and font weights. We improved the `as` prop to include all possible values. The `Link` component has also been updated to match the new `Text` component.
+
+### Patch Changes
+
+- de89a3d: Fixes some styles on the Select component in BUI.
+- a251b3e: Export CardHeader, CardBody and CardFooter from Card component index
+- f761306: Add new TagGroup component to Backstage UI.
+- 75fead9: Fixes a couple of small bugs in BUI including setting H1 and H2 correctly on the Header and HeaderPage.
+- e7ff178: Update styling of Tooltip element
+- 230b410: **Breaking change** Move breadcrumb to fit in the `HeaderPage` instead of the `Header` in Backstage UI.
+- 2f9a084: We are motion away from `motion` to use `gsap` instead to make Backstage UI backward compatible with React 17.
+- d4e603e: Updated Menu component in Backstage UI to use useId() from React Aria instead of React to support React 17.
+- 8bdc491: Remove stylesheet import from Select component.
+- 404b426: Add `startCollapsed` prop on the `SearchField` component in BUI.
+- e0e886f: Adds onTabSelectionChange to ui header component.
+
 ## 0.7.0-next.3
 
 ### Minor Changes

package/css/styles.css

@@ -9182,7 +9182,7 @@
   --bui-animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
 }
 
-[data-theme="dark"] {
+[data-theme-mode="dark"] {
   --bui-gray-1: #191919;
   --bui-gray-2: #242424;
   --bui-gray-3: #373737;
@@ -9659,66 +9659,13 @@
   margin-left: -8px;
 }
 
-.bui-HeaderPageControls {
-  align-items: center;
-  gap: var(--bui-space-2);
-  flex-direction: row;
-  display: flex;
-}
-
-.bui-HeaderPageSticky {
-  z-index: -1;
-  height: 0;
-  color: var(--bui-fg-primary);
-  position: sticky;
-  top: 0;
-}
-
-.bui-HeaderPageStickyWrapper {
-  background-color: var(--bui-bg-surface-1);
-  border-bottom: 1px solid var(--bui-border);
-  opacity: 0;
-}
-
-.bui-HeaderPageStickyContent {
-  justify-content: space-between;
-  align-items: center;
-  height: 48px;
-  display: flex;
-}
-
-.bui-HeaderPageBreadcrumbs {
-  align-items: center;
-  gap: var(--bui-space-2);
-  font-size: var(--bui-font-size-3);
-  font-weight: var(--bui-font-weight-regular);
-  flex-direction: row;
-  display: flex;
-}
-
-.bui-HeaderPageBreadcrumb {
+.bui-HeaderPageControls, .bui-HeaderPageBreadcrumbs {
   align-items: center;
   gap: var(--bui-space-2);
   flex-direction: row;
   display: flex;
 }
 
-.bui-HeaderPageBreadcrumbLink {
-  color: var(--bui-fg-secondary);
-  cursor: pointer;
-  text-decoration: none;
-
-  &[data-active="true"] {
-    color: var(--bui-fg-primary);
-  }
-}
-
-.bui-HeaderPageBreadcrumbSeparator {
-  width: 16px;
-  height: 16px;
-  color: var(--bui-fg-secondary);
-}
-
 .bui-Icon {
   width: 1rem;
   height: 1rem;
@@ -9741,184 +9688,245 @@
   }
 }
 
-.bui-MenuPositioner {
-  z-index: 100;
-  outline: 0;
-}
-
-.bui-MenuPopup {
-  background-color: var(--bui-bg-surface-1);
+.bui-MenuPopover {
   border: 1px solid var(--bui-border);
+  border-radius: var(--bui-radius-2);
+  background: var(--bui-bg-surface-1);
   color: var(--bui-fg-primary);
-  transform-origin: var(--transform-origin);
-  max-width: min(var(--available-width), 340px);
-  max-height: min(var(--available-height), 500px);
-  padding-bottom: var(--bui-space-1);
-  border-radius: .375rem;
   outline: none;
   flex-direction: column;
-  transition: transform .15s, opacity .15s;
+  min-height: 0;
+  transition: transform .2s, opacity .2s;
   display: flex;
-  position: relative;
-  overflow: auto;
+  overflow: hidden;
 
-  &[data-starting-style], &[data-ending-style] {
+  &[data-entering], &[data-exiting] {
+    transform: var(--origin);
     opacity: 0;
-    transform: scale(.9);
   }
-}
 
-.bui-MenuItem {
-  user-select: none;
-  align-items: center;
-  gap: var(--bui-space-2);
-  height: 32px;
-  color: var(--bui-fg-primary);
-  border-radius: var(--bui-radius-2);
-  margin-inline: var(--bui-space-1);
-  padding-inline: var(--bui-space-2);
-  font-size: var(--bui-font-size-3);
-  cursor: pointer;
-  outline: 0;
-  flex-shrink: 0;
-  text-decoration: none;
-  display: flex;
+  &[data-placement="top"] {
+    --origin: translateY(8px);
+  }
 
-  &:first-child {
-    margin-top: var(--bui-space-1);
+  &[data-placement="bottom"] {
+    --origin: translateY(-8px);
+  }
+
+  &[data-placement="right"] {
+    --origin: translateX(-8px);
   }
 
-  &[data-highlighted] {
-    background-color: var(--bui-gray-3);
+  &[data-placement="left"] {
+    --origin: translateX(8px);
   }
 }
 
-.bui-MenuSubmenuTrigger {
-  user-select: none;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--bui-space-2);
-  height: 32px;
-  color: var(--bui-fg-primary);
-  border-radius: var(--bui-radius-2);
-  margin-inline: var(--bui-space-1);
+.bui-MenuContent {
+  max-height: inherit;
+  box-sizing: border-box;
+  padding: var(--bui-space-1);
+  outline: none;
+  min-width: 150px;
+  overflow: auto;
+}
+
+.bui-MenuPopover .bui-ScrollAreaRoot {
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+}
+
+.bui-MenuPopover .bui-ScrollAreaScrollbar {
+  margin-inline: var(--bui-space-1_5);
+}
+
+.bui-MenuItem {
+  height: 2rem;
   padding-inline: var(--bui-space-2);
+  border-radius: var(--bui-radius-2);
+  cursor: default;
+  color: var(--bui-fg-primary);
   font-size: var(--bui-font-size-3);
-  cursor: pointer;
-  outline: 0;
-  flex-shrink: 0;
-  text-decoration: none;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--bui-space-6);
+  outline: none;
   display: flex;
 
-  & .bui-Icon {
-    color: var(--bui-fg-secondary);
+  &[data-focused], &[data-open] {
+    background: var(--bui-bg-surface-2);
+    color: var(--bui-fg-primary);
   }
 
-  &:first-child {
-    margin-top: var(--bui-space-1);
+  &[data-color="danger"] {
+    color: var(--bui-fg-danger);
   }
 
-  &[data-popup-open], &[data-highlighted] {
-    background-color: var(--bui-gray-3);
+  &[data-color="danger"][data-focused] {
+    background: var(--bui-bg-danger);
+    color: var(--bui-fg-danger);
+  }
 
-    & .bui-Icon {
-      color: var(--bui-fg-primary);
+  &[data-has-submenu] {
+    & > .bui-MenuItemArrow {
+      display: block;
     }
   }
 }
 
-.bui-MenuSeparator {
-  background-color: var(--color-gray-200);
-  height: 1px;
-  margin: .375rem 1rem;
-}
-
-.bui-SubmenuComboboxSearch {
-  padding-inline: var(--bui-space-3);
-  border: none;
-  border-bottom: 1px solid var(--bui-border);
-  background-color: var(--bui-bg-surface-1);
-  width: 100%;
-  height: 32px;
+.bui-MenuItemListBox {
+  height: 2rem;
+  padding-inline: var(--bui-space-2);
+  border-radius: var(--bui-radius-2);
+  cursor: default;
   color: var(--bui-fg-primary);
-  line-height: 140%;
   font-size: var(--bui-font-size-3);
-  z-index: 1;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--bui-space-6);
   outline: none;
-  position: sticky;
-  top: 0;
+  display: flex;
 
-  &::placeholder {
-    color: var(--bui-fg-secondary);
+  &:hover {
+    background: var(--bui-bg-surface-2);
+    color: var(--bui-fg-primary);
   }
 
-  &:disabled {
-    opacity: .6;
-    cursor: not-allowed;
+  &[data-selected] .bui-MenuItemListBoxCheck {
+    & > svg {
+      opacity: 1;
+      color: var(--bui-fg-primary);
+    }
   }
 }
 
-.bui-SubmenuComboboxItems {
-  padding-top: var(--bui-space-2);
-  outline: none;
-  flex-direction: column;
+.bui-MenuItemListBoxCheck {
+  justify-content: center;
+  align-items: center;
+  width: 1rem;
+  height: 1rem;
   display: flex;
-  overflow-y: auto;
-}
 
-.bui-SubmenuComboboxNoResults {
-  padding-inline: var(--bui-space-3);
-  padding-top: var(--bui-space-2);
-  padding-bottom: var(--bui-space-4);
-  color: var(--bui-fg-secondary);
-  font-size: var(--bui-font-size-3);
+  & > svg {
+    opacity: 0;
+    width: 1rem;
+    height: 1rem;
+  }
 }
 
-.bui-SubmenuComboboxItem {
-  user-select: none;
-  justify-content: space-between;
+.bui-MenuItemContent {
   align-items: center;
   gap: var(--bui-space-2);
-  height: 32px;
-  color: var(--bui-fg-primary);
-  border-radius: var(--bui-radius-2);
-  margin-inline: var(--bui-space-1);
-  padding-inline: var(--bui-space-2);
-  font-size: var(--bui-font-size-3);
-  cursor: pointer;
-  outline: 0;
-  flex-shrink: 0;
-  text-decoration: none;
   display: flex;
 
-  &[data-highlighted] {
-    background-color: var(--bui-gray-3);
+  & > svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
+.bui-MenuItemArrow {
+  width: 1rem;
+  height: 1rem;
+  display: none;
+
+  & > svg {
+    width: 1rem;
+    height: 1rem;
   }
+}
 
-  &[data-disabled] {
-    opacity: .5;
-    cursor: not-allowed;
+.bui-MenuSection {
+  &:first-child .bui-MenuSectionHeader {
+    padding-top: 0;
   }
 }
 
-.bui-SubmenuComboboxItemCheckbox {
-  width: 16px;
-  height: 16px;
+.bui-MenuSectionHeader {
+  height: 2rem;
+  padding-top: var(--bui-space-3);
+  padding-left: var(--bui-space-2);
   color: var(--bui-fg-primary);
-  border-radius: var(--bui-radius-2);
-  border: 1px solid var(--bui-border);
-  background: var(--bui-bg-surface-1);
+  font-size: var(--bui-font-size-1);
+  letter-spacing: .05rem;
+  text-transform: uppercase;
+  align-items: center;
+  font-weight: bold;
+  display: flex;
+}
+
+.bui-MenuSeparator {
+  background: var(--bui-border);
+  height: 1px;
+  margin-inline: var(--bui-space-1_5);
+  margin-block: var(--bui-space-1);
+}
+
+.bui-MenuSearchField {
+  font-family: var(--bui-font-regular);
   flex-shrink: 0;
+  width: 100%;
+  position: relative;
+
+  &[data-empty] {
+    & .bui-MenuSearchFieldClear {
+      display: none;
+    }
+  }
+}
+
+.bui-MenuSearchFieldInput {
+  padding: 0 var(--bui-space-3);
+  border: none;
+  border-bottom: 1px solid var(--bui-border);
+  background-color: var(--bui-bg-surface-1);
+  font-size: var(--bui-font-size-3);
+  font-family: var(--bui-font-regular);
+  font-weight: var(--bui-font-weight-regular);
+  color: var(--bui-fg-primary);
+  width: 100%;
+  height: 2rem;
+  cursor: inherit;
+  outline: none;
+  align-items: center;
+  display: flex;
+
+  &::-webkit-search-cancel-button, &::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+}
+
+.bui-MenuSearchFieldClear {
+  right: var(--bui-space-2);
+  cursor: pointer;
+  color: var(--bui-fg-secondary);
+  background-color: #0000;
+  border: none;
   justify-content: center;
   align-items: center;
+  margin: 0;
+  padding: 0;
+  transition: color .2s ease-in-out;
   display: flex;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+
+  & > svg {
+    width: 1rem;
+    height: 1rem;
+  }
 }
 
-.bui-SubmenuComboboxItemLabel {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  overflow: hidden;
+.bui-MenuEmptyState {
+  padding: var(--bui-space-1);
+  color: var(--bui-fg-secondary);
+  font-size: var(--bui-font-size-3);
+  font-family: var(--bui-font-regular);
+  font-weight: var(--bui-font-weight-regular);
 }
 
 .bui-Popover {
@@ -10252,6 +10260,81 @@
   padding-top: var(--bui-space-4);
 }
 
+.bui-TagList {
+  gap: var(--bui-space-2);
+  flex-wrap: wrap;
+  display: flex;
+}
+
+.bui-Tag {
+  color: var(--bui-fg-primary);
+  background-color: var(--bui-gray-2);
+  border-radius: var(--bui-radius-2);
+  font-weight: var(--bui-font-weight-regular);
+  justify-content: center;
+  align-items: center;
+  gap: var(--bui-space-1);
+  box-sizing: border-box;
+  transition-property: background-color, box-shadow, color;
+  transition-duration: .2s;
+  transition-timing-function: ease-in-out;
+  display: flex;
+}
+
+.bui-Tag[data-size="small"] {
+  height: 26px;
+  padding: 0 var(--bui-space-2);
+  font-size: var(--bui-font-size-1);
+}
+
+.bui-Tag[data-size="medium"] {
+  height: 32px;
+  padding: 0 var(--bui-space-2);
+  font-size: var(--bui-font-size-2);
+}
+
+.bui-Tag[data-hovered] {
+  background-color: var(--bui-gray-3);
+  cursor: pointer;
+}
+
+.bui-Tag[data-focus-visible] {
+  outline: 2px solid var(--bui-ring);
+  outline-offset: 1px;
+}
+
+.bui-Tag[data-selected] {
+  box-shadow: inset 0 0 0 1px var(--bui-gray-8);
+}
+
+.bui-Tag[data-disabled] {
+  color: var(--bui-fg-disabled);
+  cursor: not-allowed;
+}
+
+.bui-TagRemoveButton {
+  cursor: pointer;
+  color: var(--bui-fg-primary);
+  background-color: #0000;
+  border: none;
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  padding: 0;
+}
+
+.bui-TagIcon {
+  justify-content: center;
+  align-items: center;
+  transition: color .2s ease-in-out;
+  display: flex;
+
+  & svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
 .bui-Text {
   font-family: var(--bui-font-regular);
   margin: 0;

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';\n\n/** @public */\nexport const Avatar = forwardRef<\n  ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>((props, ref) => {\n  const { className, src, name, size = 'medium', ...rest } = props;\n  const { classNames } = useStyles('Avatar', {\n    size,\n  });\n\n  return (\n    <AvatarPrimitive.Root\n      ref={ref}\n      className={clsx(classNames.root, className)}\n      data-size={size}\n      {...rest}\n    >\n      <AvatarPrimitive.Image className={classNames.image} src={src} />\n      <AvatarPrimitive.Fallback className={classNames.fallback}>\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":";;;;;;AAuBO,MAAM,MAAS,GAAA,UAAA,CAGpB,CAAC,KAAA,EAAO,GAAQ,KAAA;AAChB,EAAM,MAAA,EAAE,WAAW,GAAK,EAAA,IAAA,EAAM,OAAO,QAAU,EAAA,GAAG,MAAS,GAAA,KAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,QAAU,EAAA;AAAA,IACzC;AAAA,GACD,CAAA;AAED,EACE,uBAAA,IAAA;AAAA,IAACA,QAAgB,CAAA,IAAA;AAAA,IAAhB;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,WAAW,EAAA,IAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAACA,SAAgB,KAAhB,EAAA,EAAsB,SAAW,EAAA,UAAA,CAAW,OAAO,GAAU,EAAA,CAAA;AAAA,wBAC9D,GAAA,CAACA,QAAgB,CAAA,QAAA,EAAhB,EAAyB,SAAA,EAAW,UAAW,CAAA,QAAA,EAC5C,QAAQ,EAAA,CAAA,IAAA,IAAA,EAAA,EACP,KAAM,CAAA,GAAG,CACT,CAAA,GAAA,CAAI,CAAQ,IAAA,KAAA,IAAA,CAAK,CAAC,CAAC,CACnB,CAAA,IAAA,CAAK,EAAE,CAAA,CACP,iBAAkB,CAAA,OAAO,CACzB,CAAA,KAAA,CAAM,CAAG,EAAA,CAAC,CACf,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,MAAO,CAAA,WAAA,GAAcA,SAAgB,IAAK,CAAA,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, 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';\n\n/** @public */\nexport const Avatar = forwardRef<\n  ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>((props, ref) => {\n  const { className, src, name, size = 'medium', ...rest } = props;\n  const { classNames } = useStyles('Avatar', {\n    size,\n  });\n\n  return (\n    <AvatarPrimitive.Root\n      ref={ref}\n      className={clsx(classNames.root, className)}\n      data-size={size}\n      {...rest}\n    >\n      <AvatarPrimitive.Image className={classNames.image} src={src} />\n      <AvatarPrimitive.Fallback className={classNames.fallback}>\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":";;;;;;AAuBO,MAAM,MAAA,GAAS,UAAA,CAGpB,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,WAAW,GAAA,EAAK,IAAA,EAAM,OAAO,QAAA,EAAU,GAAG,MAAK,GAAI,KAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,QAAA,EAAU;AAAA,IACzC;AAAA,GACD,CAAA;AAED,EAAA,uBACE,IAAA;AAAA,IAACA,QAAA,CAAgB,IAAA;AAAA,IAAhB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,WAAA,EAAW,IAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAACA,SAAgB,KAAA,EAAhB,EAAsB,SAAA,EAAW,UAAA,CAAW,OAAO,GAAA,EAAU,CAAA;AAAA,wBAC9D,GAAA,CAACA,QAAA,CAAgB,QAAA,EAAhB,EAAyB,SAAA,EAAW,UAAA,CAAW,QAAA,EAC5C,QAAA,EAAA,CAAA,IAAA,IAAQ,EAAA,EACP,KAAA,CAAM,GAAG,CAAA,CACT,GAAA,CAAI,CAAA,IAAA,KAAQ,IAAA,CAAK,CAAC,CAAC,CAAA,CACnB,IAAA,CAAK,EAAE,CAAA,CACP,iBAAA,CAAkB,OAAO,CAAA,CACzB,KAAA,CAAM,CAAA,EAAG,CAAC,CAAA,EACf;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,MAAA,CAAO,WAAA,GAAcA,SAAgB,IAAA,CAAK,WAAA;;;;"}

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 { extractProps } from '../../utils/extractProps';\nimport { spacingPropDefs } from '../../props/spacing.props';\nimport { boxPropDefs } from './Box.props';\nimport { widthPropDefs } from '../../props/width.props';\nimport { heightPropDefs } from '../../props/height.props';\nimport { positionPropDefs } from '../../props/position.props';\nimport { displayPropDefs } from '../../props/display.props';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {\n  const { children } = props;\n\n  const propDefs = {\n    ...spacingPropDefs,\n    ...widthPropDefs,\n    ...heightPropDefs,\n    ...positionPropDefs,\n    ...displayPropDefs,\n    ...boxPropDefs,\n  };\n\n  const { classNames } = useStyles('Box');\n  const { className, style } = extractProps(props, propDefs);\n\n  return createElement(props.as || 'div', {\n    ref,\n    className: clsx(classNames.root, className),\n    style,\n    children,\n  });\n});\n\nBox.displayName = 'Box';\n"],"names":[],"mappings":";;;;;;;;;;;AA6BO,MAAM,GAAM,GAAA,UAAA,CAAqC,CAAC,KAAA,EAAO,GAAQ,KAAA;AACtE,EAAM,MAAA,EAAE,UAAa,GAAA,KAAA;AAErB,EAAA,MAAM,QAAW,GAAA;AAAA,IACf,GAAG,eAAA;AAAA,IACH,GAAG,aAAA;AAAA,IACH,GAAG,cAAA;AAAA,IACH,GAAG,gBAAA;AAAA,IACH,GAAG,eAAA;AAAA,IACH,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,KAAK,CAAA;AACtC,EAAA,MAAM,EAAE,SAAW,EAAA,KAAA,EAAU,GAAA,YAAA,CAAa,OAAO,QAAQ,CAAA;AAEzD,EAAO,OAAA,aAAA,CAAc,KAAM,CAAA,EAAA,IAAM,KAAO,EAAA;AAAA,IACtC,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,IAC1C,KAAA;AAAA,IACA;AAAA,GACD,CAAA;AACH,CAAC;AAED,GAAA,CAAI,WAAc,GAAA,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 { extractProps } from '../../utils/extractProps';\nimport { spacingPropDefs } from '../../props/spacing.props';\nimport { boxPropDefs } from './Box.props';\nimport { widthPropDefs } from '../../props/width.props';\nimport { heightPropDefs } from '../../props/height.props';\nimport { positionPropDefs } from '../../props/position.props';\nimport { displayPropDefs } from '../../props/display.props';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {\n  const { children } = props;\n\n  const propDefs = {\n    ...spacingPropDefs,\n    ...widthPropDefs,\n    ...heightPropDefs,\n    ...positionPropDefs,\n    ...displayPropDefs,\n    ...boxPropDefs,\n  };\n\n  const { classNames } = useStyles('Box');\n  const { className, style } = extractProps(props, propDefs);\n\n  return createElement(props.as || 'div', {\n    ref,\n    className: clsx(classNames.root, className),\n    style,\n    children,\n  });\n});\n\nBox.displayName = 'Box';\n"],"names":[],"mappings":";;;;;;;;;;;AA6BO,MAAM,GAAA,GAAM,UAAA,CAAqC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACtE,EAAA,MAAM,EAAE,UAAS,GAAI,KAAA;AAErB,EAAA,MAAM,QAAA,GAAW;AAAA,IACf,GAAG,eAAA;AAAA,IACH,GAAG,aAAA;AAAA,IACH,GAAG,cAAA;AAAA,IACH,GAAG,gBAAA;AAAA,IACH,GAAG,eAAA;AAAA,IACH,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,KAAK,CAAA;AACtC,EAAA,MAAM,EAAE,SAAA,EAAW,KAAA,EAAM,GAAI,YAAA,CAAa,OAAO,QAAQ,CAAA;AAEzD,EAAA,OAAO,aAAA,CAAc,KAAA,CAAM,EAAA,IAAM,KAAA,EAAO;AAAA,IACtC,GAAA;AAAA,IACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,IAC1C,KAAA;AAAA,IACA;AAAA,GACD,CAAA;AACH,CAAC;AAED,GAAA,CAAI,WAAA,GAAc,KAAA;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Box.props.esm.js","sources":["../../../src/components/Box/Box.props.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { PropDef, GetPropDefTypes } from '../../props/prop-def';\n\nconst as = ['div', 'span'] as const;\n\n/** @public */\nconst boxPropDefs = {\n  as: { type: 'enum', values: as, default: 'div' },\n} satisfies {\n  as: PropDef<(typeof as)[number]>;\n};\n\n// Use all of the imported prop defs to ensure that JSDoc works\n/** @public */\ntype BoxOwnProps = GetPropDefTypes<typeof boxPropDefs>;\n\nexport { boxPropDefs };\nexport type { BoxOwnProps };\n"],"names":[],"mappings":"AAkBA,MAAM,EAAA,GAAK,CAAC,KAAA,EAAO,MAAM,CAAA;AAGzB,MAAM,WAAc,GAAA;AAAA,EAClB,IAAI,EAAE,IAAA,EAAM,QAAQ,MAAQ,EAAA,EAAA,EAAI,SAAS,KAAM;AACjD;;;;"}
+{"version":3,"file":"Box.props.esm.js","sources":["../../../src/components/Box/Box.props.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { PropDef, GetPropDefTypes } from '../../props/prop-def';\n\nconst as = ['div', 'span'] as const;\n\n/** @public */\nconst boxPropDefs = {\n  as: { type: 'enum', values: as, default: 'div' },\n} satisfies {\n  as: PropDef<(typeof as)[number]>;\n};\n\n// Use all of the imported prop defs to ensure that JSDoc works\n/** @public */\ntype BoxOwnProps = GetPropDefTypes<typeof boxPropDefs>;\n\nexport { boxPropDefs };\nexport type { BoxOwnProps };\n"],"names":[],"mappings":"AAkBA,MAAM,EAAA,GAAK,CAAC,KAAA,EAAO,MAAM,CAAA;AAGzB,MAAM,WAAA,GAAc;AAAA,EAClB,IAAI,EAAE,IAAA,EAAM,QAAQ,MAAA,EAAQ,EAAA,EAAI,SAAS,KAAA;AAC3C;;;;"}

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';\n\n/** @public */\nexport const Button = forwardRef(\n  (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\n    const {\n      size = 'small',\n      variant = 'primary',\n      iconStart,\n      iconEnd,\n      children,\n      className,\n      ...rest\n    } = props;\n\n    const { classNames, dataAttributes } = useStyles('Button', {\n      size,\n      variant,\n    });\n\n    return (\n      <RAButton\n        className={clsx(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"],"mappings":";;;;;;AAuBO,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,CAAC,OAAoB,GAAgC,KAAA;AACnD,IAAM,MAAA;AAAA,MACJ,IAAO,GAAA,OAAA;AAAA,MACP,OAAU,GAAA,SAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,QAAU,EAAA;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IACE,uBAAA,IAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,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;AAGN;AAEA,MAAA,CAAO,WAAc,GAAA,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 } from 'react-aria-components';\nimport type { ButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Button = forwardRef(\n  (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\n    const {\n      size = 'small',\n      variant = 'primary',\n      iconStart,\n      iconEnd,\n      children,\n      className,\n      ...rest\n    } = props;\n\n    const { classNames, dataAttributes } = useStyles('Button', {\n      size,\n      variant,\n    });\n\n    return (\n      <RAButton\n        className={clsx(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"],"mappings":";;;;;;AAuBO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAoB,GAAA,KAAgC;AACnD,IAAA,MAAM;AAAA,MACJ,IAAA,GAAO,OAAA;AAAA,MACP,OAAA,GAAU,SAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,UAAU,QAAA,EAAU;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,uBACE,IAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,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;;;;"}

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';\n\n/** @public */\nexport const ButtonIcon = forwardRef(\n  (props: ButtonIconProps, ref: Ref<HTMLButtonElement>) => {\n    const {\n      size = 'small',\n      variant = 'primary',\n      icon,\n      className,\n      style,\n      ...rest\n    } = props;\n\n    const { classNames, dataAttributes } = useStyles('Button', {\n      size,\n      variant,\n    });\n\n    const { classNames: classNamesButtonIcon } = useStyles('ButtonIcon');\n\n    return (\n      <RAButton\n        className={clsx(classNames.root, classNamesButtonIcon.root, className)}\n        ref={ref}\n        {...dataAttributes}\n        {...rest}\n      >\n        {icon}\n      </RAButton>\n    );\n  },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"],"names":["RAButton"],"mappings":";;;;;;AAuBO,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAgC,KAAA;AACvD,IAAM,MAAA;AAAA,MACJ,IAAO,GAAA,OAAA;AAAA,MACP,OAAU,GAAA,SAAA;AAAA,MACV,IAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,QAAU,EAAA;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAqB,EAAA,GAAI,UAAU,YAAY,CAAA;AAEnE,IACE,uBAAA,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAK,CAAA,UAAA,CAAW,IAAM,EAAA,oBAAA,CAAqB,MAAM,SAAS,CAAA;AAAA,QACrE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA;AAAA,KACH;AAAA;AAGN;AAEA,UAAA,CAAW,WAAc,GAAA,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 } from 'react-aria-components';\nimport type { ButtonIconProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const ButtonIcon = forwardRef(\n  (props: ButtonIconProps, ref: Ref<HTMLButtonElement>) => {\n    const {\n      size = 'small',\n      variant = 'primary',\n      icon,\n      className,\n      style,\n      ...rest\n    } = props;\n\n    const { classNames, dataAttributes } = useStyles('Button', {\n      size,\n      variant,\n    });\n\n    const { classNames: classNamesButtonIcon } = useStyles('ButtonIcon');\n\n    return (\n      <RAButton\n        className={clsx(classNames.root, classNamesButtonIcon.root, className)}\n        ref={ref}\n        {...dataAttributes}\n        {...rest}\n      >\n        {icon}\n      </RAButton>\n    );\n  },\n);\n\nButtonIcon.displayName = 'ButtonIcon';\n"],"names":["RAButton"],"mappings":";;;;;;AAuBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM;AAAA,MACJ,IAAA,GAAO,OAAA;AAAA,MACP,OAAA,GAAU,SAAA;AAAA,MACV,IAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,UAAU,QAAA,EAAU;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GAAI,UAAU,YAAY,CAAA;AAEnE,IAAA,uBACE,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,oBAAA,CAAqB,MAAM,SAAS,CAAA;AAAA,QACrE,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;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Link as RALink } from 'react-aria-components';\nimport type { ButtonLinkProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n  (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n    const {\n      size = 'small',\n      variant = 'primary',\n      iconStart,\n      iconEnd,\n      children,\n      className,\n      ...rest\n    } = props;\n\n    const { classNames, dataAttributes } = useStyles('Button', {\n      size,\n      variant,\n    });\n\n    const { classNames: classNamesButtonLink } = useStyles('ButtonLink');\n\n    return (\n      <RALink\n        className={clsx(classNames.root, classNamesButtonLink.root, className)}\n        ref={ref}\n        {...dataAttributes}\n        {...rest}\n      >\n        {iconStart}\n        {children}\n        {iconEnd}\n      </RALink>\n    );\n  },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;AAuBO,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAgC,KAAA;AACvD,IAAM,MAAA;AAAA,MACJ,IAAO,GAAA,OAAA;AAAA,MACP,OAAU,GAAA,SAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,QAAU,EAAA;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAqB,EAAA,GAAI,UAAU,YAAY,CAAA;AAEnE,IACE,uBAAA,IAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAK,CAAA,UAAA,CAAW,IAAM,EAAA,oBAAA,CAAqB,MAAM,SAAS,CAAA;AAAA,QACrE,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;AAGN;AAEA,UAAA,CAAW,WAAc,GAAA,YAAA;;;;"}
+{"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Link as RALink } from 'react-aria-components';\nimport type { ButtonLinkProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n  (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n    const {\n      size = 'small',\n      variant = 'primary',\n      iconStart,\n      iconEnd,\n      children,\n      className,\n      ...rest\n    } = props;\n\n    const { classNames, dataAttributes } = useStyles('Button', {\n      size,\n      variant,\n    });\n\n    const { classNames: classNamesButtonLink } = useStyles('ButtonLink');\n\n    return (\n      <RALink\n        className={clsx(classNames.root, classNamesButtonLink.root, className)}\n        ref={ref}\n        {...dataAttributes}\n        {...rest}\n      >\n        {iconStart}\n        {children}\n        {iconEnd}\n      </RALink>\n    );\n  },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;AAuBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM;AAAA,MACJ,IAAA,GAAO,OAAA;AAAA,MACP,OAAA,GAAU,SAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,UAAU,QAAA,EAAU;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GAAI,UAAU,YAAY,CAAA;AAEnE,IAAA,uBACE,IAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,oBAAA,CAAqB,MAAM,SAAS,CAAA;AAAA,QACrE,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,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}