@backstage/ui 0.8.2 → 0.9.0-next.2

package/CHANGELOG.md

@@ -1,19 +1,132 @@
 # @backstage/ui
 
-## 0.8.2
+## 0.9.0-next.2
+
+### Minor Changes
+
+- 539cf26: **BREAKING**: Migrated Avatar component from Base UI to custom implementation with size changes:
+
+  - Base UI-specific props are no longer supported
+  - Size values have been updated:
+    - New `x-small` size added (1.25rem / 20px)
+    - `small` size unchanged (1.5rem / 24px)
+    - `medium` size unchanged (2rem / 32px, default)
+    - `large` size **changed from 3rem to 2.5rem** (40px)
+    - New `x-large` size added (3rem / 48px)
+
+  Migration:
+
+  ```diff
+  # Remove Base UI-specific props
+  - <Avatar src="..." name="..." render={...} />
+  + <Avatar src="..." name="..." />
+
+  # Update large size usage to x-large for same visual size
+  - <Avatar src="..." name="..." size="large" />
+  + <Avatar src="..." name="..." size="x-large" />
+  ```
+
+  Added `purpose` prop for accessibility control (`'informative'` or `'decoration'`).
+
+- 134151f: Fixing styles on SearchField in Backstage UI after migration to CSS modules. `SearchField` has now its own set of class names. We previously used class names from `TextField` but this approach was creating some confusion so going forward in your theme you'll be able to theme `TextField` and `SearchField` separately.
+
+### Patch Changes
+
+- d01de00: Fix broken external links in Backstage UI Header component.
+- deaa427: Fixed Text component to prevent `truncate` prop from being spread to the underlying DOM element.
+- 1059f95: Improved the Link component structure in Backstage UI.
+- 6874094: Migrated CellProfile component from Base UI Avatar to Backstage UI Avatar component.
+- 719d772: Avatar components in x-small and small sizes now display only one initial instead of two, improving readability at smaller dimensions.
+- 3b18d80: Fixed RadioGroup radio button ellipse distortion by preventing flex shrink and grow.
+- e16ece5: Set the color-scheme property depending on theme
+
+## 0.9.0-next.1
+
+### Minor Changes
+
+- 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>
+  ```
+
+- 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.
 
 ### Patch Changes
 
-- 424a156: Fix CSS layer ordering in Backstage UI to make sure component styles are loaded after tokens and base declarations.
-- b5390a5: Fix font smoothing as default in Backstage UI.
+- ff9f0c3: Enable tree-shaking of imports other than `*.css`.
+- 1ef3ca4: Added new VisuallyHidden component for hiding content visually while keeping it accessible to screen readers.
 
-## 0.8.1
+## 0.8.2-next.0
 
 ### Patch Changes
 
-- 3f9b002: Fix default text color in Backstage UI
-- f842c8c: Fix the default font size in Backstage UI.
-- 247d799: Fix default font wight and font family in Backstage UI.
+- 26c6a78: Fix default text color in Backstage UI
+- 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.
+- 4eb455c: Fix font smoothing as default in Backstage UI.
+- 00bfb83: Fix default font wight and font family in Backstage UI.
 
 ## 0.8.0
 

package/css/styles.css

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Avatar.esm.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, ElementRef } from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui-components/react/avatar';\nimport clsx from 'clsx';\nimport { AvatarProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Avatar.module.css';\n\n/** @public */\nexport const Avatar = forwardRef<\n  ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>((props, ref) => {\n  const { classNames, dataAttributes, cleanedProps } = useStyles('Avatar', {\n    size: 'medium',\n    ...props,\n  });\n\n  const { className, src, name, ...rest } = cleanedProps;\n\n  return (\n    <AvatarPrimitive.Root\n      ref={ref}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...dataAttributes}\n      {...rest}\n    >\n      <AvatarPrimitive.Image\n        className={clsx(classNames.image, styles[classNames.image])}\n        src={src}\n      />\n      <AvatarPrimitive.Fallback\n        className={clsx(classNames.fallback, styles[classNames.fallback])}\n      >\n        {(name || '')\n          .split(' ')\n          .map(word => word[0])\n          .join('')\n          .toLocaleUpperCase('en-US')\n          .slice(0, 2)}\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  );\n});\n\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n"],"names":["AvatarPrimitive"],"mappings":";;;;;;;AAwBO,MAAM,MAAA,GAAS,UAAA,CAGpB,CAAC,KAAA,EAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,QAAA,EAAU;AAAA,IACvE,IAAA,EAAM,QAAA;AAAA,IACN,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,GAAA,EAAK,IAAA,EAAM,GAAG,MAAK,GAAI,YAAA;AAE1C,EAAA,uBACE,IAAA;AAAA,IAACA,QAAA,CAAgB,IAAA;AAAA,IAAhB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,cAAA;AAAA,MACH,GAAG,IAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAACA,QAAA,CAAgB,KAAA;AAAA,UAAhB;AAAA,YACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,YAC1D;AAAA;AAAA,SACF;AAAA,wBACA,GAAA;AAAA,UAACA,QAAA,CAAgB,QAAA;AAAA,UAAhB;AAAA,YACC,WAAW,IAAA,CAAK,UAAA,CAAW,UAAU,MAAA,CAAO,UAAA,CAAW,QAAQ,CAAC,CAAA;AAAA,YAE9D,mBAAQ,EAAA,EACP,KAAA,CAAM,GAAG,CAAA,CACT,GAAA,CAAI,UAAQ,IAAA,CAAK,CAAC,CAAC,CAAA,CACnB,IAAA,CAAK,EAAE,CAAA,CACP,iBAAA,CAAkB,OAAO,CAAA,CACzB,KAAA,CAAM,GAAG,CAAC;AAAA;AAAA;AACf;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,MAAA,CAAO,WAAA,GAAcA,SAAgB,IAAA,CAAK,WAAA;;;;"}
+{"version":3,"file":"Avatar.esm.js","sources":["../../../src/components/Avatar/Avatar.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, useState, useEffect } from 'react';\nimport clsx from 'clsx';\nimport { AvatarProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Avatar.module.css';\n\n/** @public */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {\n  const { classNames, dataAttributes, cleanedProps } = useStyles('Avatar', {\n    size: 'medium',\n    purpose: 'informative',\n    ...props,\n  });\n\n  const { className, src, name, purpose, ...rest } = cleanedProps;\n\n  const [imageStatus, setImageStatus] = useState<\n    'loading' | 'loaded' | 'error'\n  >('loading');\n\n  useEffect(() => {\n    setImageStatus('loading');\n    const img = new Image();\n    img.onload = () => setImageStatus('loaded');\n    img.onerror = () => setImageStatus('error');\n    img.src = src;\n\n    return () => {\n      img.onload = null;\n      img.onerror = null;\n    };\n  }, [src]);\n\n  const initialsCount = ['x-small', 'small'].includes(cleanedProps.size)\n    ? 1\n    : 2;\n\n  const initials = name\n    .split(' ')\n    .map(word => word[0])\n    .join('')\n    .toLocaleUpperCase('en-US')\n    .slice(0, initialsCount);\n\n  return (\n    <div\n      ref={ref}\n      role=\"img\"\n      aria-label={purpose === 'informative' ? name : undefined}\n      aria-hidden={purpose === 'decoration' ? true : undefined}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...dataAttributes}\n      {...rest}\n    >\n      {imageStatus === 'loaded' ? (\n        <img\n          src={src}\n          alt=\"\"\n          className={clsx(classNames.image, styles[classNames.image])}\n        />\n      ) : (\n        <div\n          aria-hidden=\"true\"\n          className={clsx(classNames.fallback, styles[classNames.fallback])}\n        >\n          {initials}\n        </div>\n      )}\n    </div>\n  );\n});\n\nAvatar.displayName = 'Avatar';\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,MAAA,GAAS,UAAA,CAAwC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,QAAA,EAAU;AAAA,IACvE,IAAA,EAAM,QAAA;AAAA,IACN,OAAA,EAAS,aAAA;AAAA,IACT,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,GAAA,EAAK,MAAM,OAAA,EAAS,GAAG,MAAK,GAAI,YAAA;AAEnD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAEpC,SAAS,CAAA;AAEX,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,cAAA,CAAe,SAAS,CAAA;AACxB,IAAA,MAAM,GAAA,GAAM,IAAI,KAAA,EAAM;AACtB,IAAA,GAAA,CAAI,MAAA,GAAS,MAAM,cAAA,CAAe,QAAQ,CAAA;AAC1C,IAAA,GAAA,CAAI,OAAA,GAAU,MAAM,cAAA,CAAe,OAAO,CAAA;AAC1C,IAAA,GAAA,CAAI,GAAA,GAAM,GAAA;AAEV,IAAA,OAAO,MAAM;AACX,MAAA,GAAA,CAAI,MAAA,GAAS,IAAA;AACb,MAAA,GAAA,CAAI,OAAA,GAAU,IAAA;AAAA,IAChB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAER,EAAA,MAAM,aAAA,GAAgB,CAAC,SAAA,EAAW,OAAO,EAAE,QAAA,CAAS,YAAA,CAAa,IAAI,CAAA,GACjE,CAAA,GACA,CAAA;AAEJ,EAAA,MAAM,WAAW,IAAA,CACd,KAAA,CAAM,GAAG,CAAA,CACT,GAAA,CAAI,UAAQ,IAAA,CAAK,CAAC,CAAC,CAAA,CACnB,IAAA,CAAK,EAAE,CAAA,CACP,iBAAA,CAAkB,OAAO,CAAA,CACzB,KAAA,CAAM,GAAG,aAAa,CAAA;AAEzB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA,EAAK,KAAA;AAAA,MACL,YAAA,EAAY,OAAA,KAAY,aAAA,GAAgB,IAAA,GAAO,MAAA;AAAA,MAC/C,aAAA,EAAa,OAAA,KAAY,YAAA,GAAe,IAAA,GAAO,MAAA;AAAA,MAC/C,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,cAAA;AAAA,MACH,GAAG,IAAA;AAAA,MAEH,0BAAgB,QAAA,mBACf,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,GAAA,EAAI,EAAA;AAAA,UACJ,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC;AAAA;AAAA,OAC5D,mBAEA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAY,MAAA;AAAA,UACZ,WAAW,IAAA,CAAK,UAAA,CAAW,UAAU,MAAA,CAAO,UAAA,CAAW,QAAQ,CAAC,CAAA;AAAA,UAE/D,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,GAEJ;AAEJ,CAAC;AAED,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}

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

@@ -1,6 +1,6 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Avatar-module_bui-AvatarRoot__3BSck {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    vertical-align: middle;\n    border-radius: 100%;\n    user-select: none;\n    font-weight: 500;\n    color: var(--bui-fg-primary);\n    background-color: var(--bui-bg-surface-2);\n    font-size: 1rem;\n    line-height: 1;\n    overflow: hidden;\n    height: 2rem;\n    width: 2rem;\n  }\n\n  .Avatar-module_bui-AvatarRoot__3BSck[data-size='small'] {\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n\n  .Avatar-module_bui-AvatarRoot__3BSck[data-size='medium'] {\n    height: 2rem;\n    width: 2rem;\n  }\n\n  .Avatar-module_bui-AvatarRoot__3BSck[data-size='large'] {\n    height: 3rem;\n    width: 3rem;\n  }\n\n  .Avatar-module_bui-AvatarImage__2ehc- {\n    object-fit: cover;\n    height: 100%;\n    width: 100%;\n  }\n\n  .Avatar-module_bui-AvatarFallback__3qnqR {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n    height: 100%;\n    width: 100%;\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-regular);\n    box-shadow: inset 0 0 0 1px var(--bui-border);\n    border-radius: var(--bui-radius-full);\n  }\n}\n";
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Avatar-module_bui-AvatarRoot__3BSck {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    vertical-align: middle;\n    border-radius: 100%;\n    user-select: none;\n    font-weight: 500;\n    color: var(--bui-fg-primary);\n    background-color: var(--bui-bg-surface-2);\n    font-size: 1rem;\n    line-height: 1;\n    overflow: hidden;\n    height: 2rem;\n    width: 2rem;\n  }\n\n  .Avatar-module_bui-AvatarRoot__3BSck[data-size='x-small'] {\n    height: 1.25rem;\n    width: 1.25rem;\n  }\n\n  .Avatar-module_bui-AvatarRoot__3BSck[data-size='small'] {\n    height: 1.5rem;\n    width: 1.5rem;\n  }\n\n  .Avatar-module_bui-AvatarRoot__3BSck[data-size='medium'] {\n    height: 2rem;\n    width: 2rem;\n  }\n\n  .Avatar-module_bui-AvatarRoot__3BSck[data-size='large'] {\n    height: 2.5rem;\n    width: 2.5rem;\n  }\n\n  .Avatar-module_bui-AvatarRoot__3BSck[data-size='x-large'] {\n    height: 3rem;\n    width: 3rem;\n  }\n\n  .Avatar-module_bui-AvatarImage__2ehc- {\n    object-fit: cover;\n    height: 100%;\n    width: 100%;\n    display: block;\n  }\n\n  .Avatar-module_bui-AvatarFallback__3qnqR {\n    align-items: center;\n    display: flex;\n    justify-content: center;\n    height: 100%;\n    width: 100%;\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-regular);\n    box-shadow: inset 0 0 0 1px var(--bui-border);\n    border-radius: var(--bui-radius-full);\n  }\n}\n";
 var styles = {"bui-AvatarRoot":"Avatar-module_bui-AvatarRoot__3BSck","bui-AvatarImage":"Avatar-module_bui-AvatarImage__2ehc-","bui-AvatarFallback":"Avatar-module_bui-AvatarFallback__3qnqR"};
 styleInject(css_248z);
 

package/dist/components/Checkbox/Checkbox.esm.js

@@ -1,6 +1,6 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { Checkbox as Checkbox$1 } from '@base-ui-components/react/checkbox';
+import { Checkbox as Checkbox$1 } from 'react-aria-components';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import clsx from 'clsx';
 import styles from './Checkbox.module.css.esm.js';
@@ -8,28 +8,26 @@ import { RiCheckLine } from '@remixicon/react';
 
 const Checkbox = forwardRef(
   (props, ref) => {
-    const { classNames, cleanedProps } = useStyles("Checkbox", props);
-    const { label, onChange, className, ...rest } = cleanedProps;
-    const checkboxElement = /* @__PURE__ */ jsx(
-      Checkbox$1.Root,
+    const { classNames } = useStyles("Checkbox");
+    const { className, children, ...rest } = props;
+    return /* @__PURE__ */ jsxs(
+      Checkbox$1,
       {
         ref,
         className: clsx(classNames.root, styles[classNames.root], className),
-        onCheckedChange: onChange,
         ...rest,
-        children: /* @__PURE__ */ jsx(
-          Checkbox$1.Indicator,
-          {
-            className: clsx(classNames.indicator, styles[classNames.indicator]),
-            children: /* @__PURE__ */ jsx(RiCheckLine, { size: 12 })
-          }
-        )
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(classNames.indicator, styles[classNames.indicator]),
+              children: /* @__PURE__ */ jsx(RiCheckLine, { size: 12 })
+            }
+          ),
+          children
+        ]
       }
     );
-    return label ? /* @__PURE__ */ jsxs("label", { className: clsx(classNames.label, styles[classNames.label]), children: [
-      checkboxElement,
-      label
-    ] }) : checkboxElement;
   }
 );
 

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.esm.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui-components/react/checkbox';\nimport type { CheckboxProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport clsx from 'clsx';\nimport styles from './Checkbox.module.css';\nimport { RiCheckLine } from '@remixicon/react';\n\n/** @public */\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(\n  (props, ref) => {\n    const { classNames, cleanedProps } = useStyles('Checkbox', props);\n    const { label, onChange, className, ...rest } = cleanedProps;\n\n    const checkboxElement = (\n      <CheckboxPrimitive.Root\n        ref={ref}\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        onCheckedChange={onChange}\n        {...rest}\n      >\n        <CheckboxPrimitive.Indicator\n          className={clsx(classNames.indicator, styles[classNames.indicator])}\n        >\n          <RiCheckLine size={12} />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n\n    return label ? (\n      <label className={clsx(classNames.label, styles[classNames.label])}>\n        {checkboxElement}\n        {label}\n      </label>\n    ) : (\n      checkboxElement\n    );\n  },\n);\n"],"names":["CheckboxPrimitive"],"mappings":";;;;;;;;AAyBO,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,YAAY,KAAK,CAAA;AAChE,IAAA,MAAM,EAAE,KAAA,EAAO,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,YAAA;AAEhD,IAAA,MAAM,eAAA,mBACJ,GAAA;AAAA,MAACA,UAAA,CAAkB,IAAA;AAAA,MAAlB;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,eAAA,EAAiB,QAAA;AAAA,QAChB,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA;AAAA,UAACA,UAAA,CAAkB,SAAA;AAAA,UAAlB;AAAA,YACC,WAAW,IAAA,CAAK,UAAA,CAAW,WAAW,MAAA,CAAO,UAAA,CAAW,SAAS,CAAC,CAAA;AAAA,YAElE,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,IAAA,EAAM,EAAA,EAAI;AAAA;AAAA;AACzB;AAAA,KACF;AAGF,IAAA,OAAO,KAAA,mBACL,IAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,KAAA,EAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA,EAC9D,QAAA,EAAA;AAAA,MAAA,eAAA;AAAA,MACA;AAAA,KAAA,EACH,CAAA,GAEA,eAAA;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"Checkbox.esm.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { Checkbox as RACheckbox } from 'react-aria-components';\nimport type { CheckboxProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport clsx from 'clsx';\nimport styles from './Checkbox.module.css';\nimport { RiCheckLine } from '@remixicon/react';\n\n/** @public */\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n  (props, ref) => {\n    const { classNames } = useStyles('Checkbox');\n    const { className, children, ...rest } = props;\n\n    return (\n      <RACheckbox\n        ref={ref}\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        {...rest}\n      >\n        <div\n          className={clsx(classNames.indicator, styles[classNames.indicator])}\n        >\n          <RiCheckLine size={12} />\n        </div>\n        {children}\n      </RACheckbox>\n    );\n  },\n);\n"],"names":["RACheckbox"],"mappings":";;;;;;;;AAyBO,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,UAAU,CAAA;AAC3C,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,MAAK,GAAI,KAAA;AAEzC,IAAA,uBACE,IAAA;AAAA,MAACA,UAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QAClE,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,WAAW,MAAA,CAAO,UAAA,CAAW,SAAS,CAAC,CAAA;AAAA,cAElE,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,IAAA,EAAM,EAAA,EAAI;AAAA;AAAA,WACzB;AAAA,UACC;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}

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

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Checkbox-module_bui-CheckboxRoot__3-TFM {\n    border: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1rem;\n    height: 1rem;\n    box-shadow: inset 0 0 0 1px var(--bui-border);\n    cursor: pointer;\n    border-radius: 2px;\n    transition: background-color 0.2s ease-in-out;\n    background-color: var(--bui-bg-surface-1);\n    padding: 0;\n    flex-shrink: 0;\n  }\n\n  .Checkbox-module_bui-CheckboxRoot__3-TFM:focus-visible {\n    transition: none;\n    outline: 2px solid var(--bui-ring);\n    outline-offset: 2px;\n  }\n\n  .Checkbox-module_bui-CheckboxRoot__3-TFM[data-checked] {\n    background-color: var(--bui-bg-solid);\n    box-shadow: none;\n    color: var(--bui-fg-solid);\n  }\n\n  .Checkbox-module_bui-CheckboxLabel__2sjLA {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    user-select: none;\n\n    &:hover {\n      & .Checkbox-module_bui-CheckboxRoot__3-TFM:not([data-checked]) {\n        box-shadow: inset 0 0 0 1px var(--bui-border-hover);\n      }\n    }\n  }\n\n  .Checkbox-module_bui-CheckboxIndicator__2ZJtl {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--bui-fg-solid);\n  }\n}\n";
-var styles = {"bui-CheckboxRoot":"Checkbox-module_bui-CheckboxRoot__3-TFM","bui-CheckboxLabel":"Checkbox-module_bui-CheckboxLabel__2sjLA","bui-CheckboxIndicator":"Checkbox-module_bui-CheckboxIndicator__2ZJtl"};
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Checkbox-module_bui-Checkbox__1Oiwl {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .Checkbox-module_bui-Checkbox__1Oiwl[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .Checkbox-module_bui-CheckboxIndicator__2ZJtl {\n    border: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1rem;\n    height: 1rem;\n    box-shadow: inset 0 0 0 1px var(--bui-border);\n    border-radius: 2px;\n    transition: background-color 0.2s ease-in-out;\n    background-color: var(--bui-bg-surface-1);\n    padding: 0;\n    flex-shrink: 0;\n    color: var(--bui-fg-solid);\n\n    @media (prefers-reduced-motion: reduce) {\n      & {\n        transition: none;\n      }\n    }\n  }\n\n  .Checkbox-module_bui-Checkbox__1Oiwl[data-focus-visible] .Checkbox-module_bui-CheckboxIndicator__2ZJtl {\n    transition: none;\n    outline: 2px solid var(--bui-ring);\n    outline-offset: 2px;\n  }\n\n  .Checkbox-module_bui-Checkbox__1Oiwl[data-selected] .Checkbox-module_bui-CheckboxIndicator__2ZJtl {\n    background-color: var(--bui-bg-solid);\n    box-shadow: none;\n  }\n\n  .Checkbox-module_bui-Checkbox__1Oiwl[data-hovered]:not([data-selected]) .Checkbox-module_bui-CheckboxIndicator__2ZJtl {\n    box-shadow: inset 0 0 0 1px var(--bui-border-hover);\n  }\n}\n";
+var styles = {"bui-Checkbox":"Checkbox-module_bui-Checkbox__1Oiwl","bui-CheckboxIndicator":"Checkbox-module_bui-CheckboxIndicator__2ZJtl"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/FieldLabel/FieldLabel.esm.js

@@ -8,12 +8,20 @@ import clsx from 'clsx';
 const FieldLabel = forwardRef(
   (props, ref) => {
     const { classNames, cleanedProps } = useStyles("FieldLabel", props);
-    const { label, secondaryLabel, description, htmlFor, id, ...rest } = cleanedProps;
+    const {
+      className,
+      label,
+      secondaryLabel,
+      description,
+      htmlFor,
+      id,
+      ...rest
+    } = cleanedProps;
     if (!label) return null;
     return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: clsx(classNames.root, styles[classNames.root]),
+        className: clsx(classNames.root, styles[classNames.root], className),
         ...rest,
         ref,
         children: [

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

@@ -1 +1 @@
-{"version":3,"file":"FieldLabel.esm.js","sources":["../../../src/components/FieldLabel/FieldLabel.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 */\nimport { Label } from 'react-aria-components';\nimport { forwardRef } from 'react';\nimport type { FieldLabelProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './FieldLabel.module.css';\nimport clsx from 'clsx';\n\n/** @public */\nexport const FieldLabel = forwardRef<HTMLDivElement, FieldLabelProps>(\n  (props: FieldLabelProps, ref) => {\n    const { classNames, cleanedProps } = useStyles('FieldLabel', props);\n    const { label, secondaryLabel, description, htmlFor, id, ...rest } =\n      cleanedProps;\n\n    if (!label) return null;\n\n    return (\n      <div\n        className={clsx(classNames.root, styles[classNames.root])}\n        {...rest}\n        ref={ref}\n      >\n        {label && (\n          <Label\n            className={clsx(classNames.label, styles[classNames.label])}\n            htmlFor={htmlFor}\n            id={id}\n          >\n            {label}\n            {secondaryLabel && (\n              <span\n                aria-hidden=\"true\"\n                className={clsx(\n                  classNames.secondaryLabel,\n                  styles[classNames.secondaryLabel],\n                )}\n              >\n                ({secondaryLabel})\n              </span>\n            )}\n          </Label>\n        )}\n        {description && (\n          <div\n            className={clsx(\n              classNames.description,\n              styles[classNames.description],\n            )}\n          >\n            {description}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nFieldLabel.displayName = 'FieldLabel';\n"],"names":[],"mappings":";;;;;;;AAuBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAQ;AAC/B,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,cAAc,KAAK,CAAA;AAClE,IAAA,MAAM,EAAE,OAAO,cAAA,EAAgB,WAAA,EAAa,SAAS,EAAA,EAAI,GAAG,MAAK,GAC/D,YAAA;AAEF,IAAA,IAAI,CAAC,OAAO,OAAO,IAAA;AAEnB,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,UAAA,CAAW,MAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAC,CAAA;AAAA,QACvD,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,KAAA,oBACC,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,cAC1D,OAAA;AAAA,cACA,EAAA;AAAA,cAEC,QAAA,EAAA;AAAA,gBAAA,KAAA;AAAA,gBACA,cAAA,oBACC,IAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,aAAA,EAAY,MAAA;AAAA,oBACZ,SAAA,EAAW,IAAA;AAAA,sBACT,UAAA,CAAW,cAAA;AAAA,sBACX,MAAA,CAAO,WAAW,cAAc;AAAA,qBAClC;AAAA,oBACD,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,sBACG,cAAA;AAAA,sBAAe;AAAA;AAAA;AAAA;AACnB;AAAA;AAAA,WAEJ;AAAA,UAED,WAAA,oBACC,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,WAAA;AAAA,gBACX,MAAA,CAAO,WAAW,WAAW;AAAA,eAC/B;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
+{"version":3,"file":"FieldLabel.esm.js","sources":["../../../src/components/FieldLabel/FieldLabel.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 */\nimport { Label } from 'react-aria-components';\nimport { forwardRef } from 'react';\nimport type { FieldLabelProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './FieldLabel.module.css';\nimport clsx from 'clsx';\n\n/** @public */\nexport const FieldLabel = forwardRef<HTMLDivElement, FieldLabelProps>(\n  (props: FieldLabelProps, ref) => {\n    const { classNames, cleanedProps } = useStyles('FieldLabel', props);\n    const {\n      className,\n      label,\n      secondaryLabel,\n      description,\n      htmlFor,\n      id,\n      ...rest\n    } = cleanedProps;\n\n    if (!label) return null;\n\n    return (\n      <div\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        {...rest}\n        ref={ref}\n      >\n        {label && (\n          <Label\n            className={clsx(classNames.label, styles[classNames.label])}\n            htmlFor={htmlFor}\n            id={id}\n          >\n            {label}\n            {secondaryLabel && (\n              <span\n                aria-hidden=\"true\"\n                className={clsx(\n                  classNames.secondaryLabel,\n                  styles[classNames.secondaryLabel],\n                )}\n              >\n                ({secondaryLabel})\n              </span>\n            )}\n          </Label>\n        )}\n        {description && (\n          <div\n            className={clsx(\n              classNames.description,\n              styles[classNames.description],\n            )}\n          >\n            {description}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nFieldLabel.displayName = 'FieldLabel';\n"],"names":[],"mappings":";;;;;;;AAuBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAQ;AAC/B,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,cAAc,KAAK,CAAA;AAClE,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,EAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,YAAA;AAEJ,IAAA,IAAI,CAAC,OAAO,OAAO,IAAA;AAEnB,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QAClE,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,KAAA,oBACC,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,cAC1D,OAAA;AAAA,cACA,EAAA;AAAA,cAEC,QAAA,EAAA;AAAA,gBAAA,KAAA;AAAA,gBACA,cAAA,oBACC,IAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,aAAA,EAAY,MAAA;AAAA,oBACZ,SAAA,EAAW,IAAA;AAAA,sBACT,UAAA,CAAW,cAAA;AAAA,sBACX,MAAA,CAAO,WAAW,cAAc;AAAA,qBAClC;AAAA,oBACD,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,sBACG,cAAA;AAAA,sBAAe;AAAA;AAAA;AAAA;AACnB;AAAA;AAAA,WAEJ;AAAA,UAED,WAAA,oBACC,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,WAAA;AAAA,gBACX,MAAA,CAAO,WAAW,WAAW;AAAA,eAC/B;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}

package/dist/components/Header/Header.esm.js

@@ -7,7 +7,15 @@ import clsx from 'clsx';
 
 const Header = (props) => {
   const { classNames, cleanedProps } = useStyles("Header", props);
-  const { tabs, icon, title, titleLink, customActions, onTabSelectionChange } = cleanedProps;
+  const {
+    className,
+    tabs,
+    icon,
+    title,
+    titleLink,
+    customActions,
+    onTabSelectionChange
+  } = cleanedProps;
   const hasTabs = tabs && tabs.length > 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -25,7 +33,8 @@ const Header = (props) => {
       {
         className: clsx(
           classNames.tabsWrapper,
-          styles[classNames.tabsWrapper]
+          styles[classNames.tabsWrapper],
+          className
         ),
         children: /* @__PURE__ */ jsx(Tabs, { onSelectionChange: onTabSelectionChange, children: /* @__PURE__ */ jsx(TabList, { children: tabs?.map((tab) => /* @__PURE__ */ jsx(
           Tab,

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

@@ -1 +1 @@
-{"version":3,"file":"Header.esm.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { HeaderProps } from './types';\nimport { HeaderToolbar } from './HeaderToolbar';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\nimport { type NavigateOptions } from 'react-router-dom';\nimport styles from './Header.module.css';\nimport clsx from 'clsx';\n\ndeclare module 'react-aria-components' {\n  interface RouterConfig {\n    routerOptions: NavigateOptions;\n  }\n}\n\n/**\n * A component that renders a toolbar.\n *\n * @public\n */\nexport const Header = (props: HeaderProps) => {\n  const { classNames, cleanedProps } = useStyles('Header', props);\n  const { tabs, icon, title, titleLink, customActions, onTabSelectionChange } =\n    cleanedProps;\n\n  const hasTabs = tabs && tabs.length > 0;\n\n  return (\n    <>\n      <HeaderToolbar\n        icon={icon}\n        title={title}\n        titleLink={titleLink}\n        customActions={customActions}\n        hasTabs={hasTabs}\n      />\n      {tabs && (\n        <div\n          className={clsx(\n            classNames.tabsWrapper,\n            styles[classNames.tabsWrapper],\n          )}\n        >\n          <Tabs onSelectionChange={onTabSelectionChange}>\n            <TabList>\n              {tabs?.map(tab => (\n                <Tab\n                  key={tab.id}\n                  id={tab.id}\n                  href={tab.href}\n                  matchStrategy={tab.matchStrategy}\n                >\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAmCO,MAAM,MAAA,GAAS,CAAC,KAAA,KAAuB;AAC5C,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,UAAU,KAAK,CAAA;AAC9D,EAAA,MAAM,EAAE,IAAA,EAAM,IAAA,EAAM,OAAO,SAAA,EAAW,aAAA,EAAe,sBAAqB,GACxE,YAAA;AAEF,EAAA,MAAM,OAAA,GAAU,IAAA,IAAQ,IAAA,CAAK,MAAA,GAAS,CAAA;AAEtC,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,aAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,IACC,IAAA,oBACC,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,WAAA;AAAA,UACX,MAAA,CAAO,WAAW,WAAW;AAAA,SAC/B;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,QAAK,iBAAA,EAAmB,oBAAA,EACvB,8BAAC,OAAA,EAAA,EACE,QAAA,EAAA,IAAA,EAAM,IAAI,CAAA,GAAA,qBACT,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YAEC,IAAI,GAAA,CAAI,EAAA;AAAA,YACR,MAAM,GAAA,CAAI,IAAA;AAAA,YACV,eAAe,GAAA,CAAI,aAAA;AAAA,YAElB,QAAA,EAAA,GAAA,CAAI;AAAA,WAAA;AAAA,UALA,GAAA,CAAI;AAAA,SAOZ,GACH,CAAA,EACF;AAAA;AAAA;AACF,GAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Header.esm.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { HeaderProps } from './types';\nimport { HeaderToolbar } from './HeaderToolbar';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\nimport { type NavigateOptions } from 'react-router-dom';\nimport styles from './Header.module.css';\nimport clsx from 'clsx';\n\ndeclare module 'react-aria-components' {\n  interface RouterConfig {\n    routerOptions: NavigateOptions;\n  }\n}\n\n/**\n * A component that renders a toolbar.\n *\n * @public\n */\nexport const Header = (props: HeaderProps) => {\n  const { classNames, cleanedProps } = useStyles('Header', props);\n  const {\n    className,\n    tabs,\n    icon,\n    title,\n    titleLink,\n    customActions,\n    onTabSelectionChange,\n  } = cleanedProps;\n\n  const hasTabs = tabs && tabs.length > 0;\n\n  return (\n    <>\n      <HeaderToolbar\n        icon={icon}\n        title={title}\n        titleLink={titleLink}\n        customActions={customActions}\n        hasTabs={hasTabs}\n      />\n      {tabs && (\n        <div\n          className={clsx(\n            classNames.tabsWrapper,\n            styles[classNames.tabsWrapper],\n            className,\n          )}\n        >\n          <Tabs onSelectionChange={onTabSelectionChange}>\n            <TabList>\n              {tabs?.map(tab => (\n                <Tab\n                  key={tab.id}\n                  id={tab.id}\n                  href={tab.href}\n                  matchStrategy={tab.matchStrategy}\n                >\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAmCO,MAAM,MAAA,GAAS,CAAC,KAAA,KAAuB;AAC5C,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,UAAU,KAAK,CAAA;AAC9D,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACF,GAAI,YAAA;AAEJ,EAAA,MAAM,OAAA,GAAU,IAAA,IAAQ,IAAA,CAAK,MAAA,GAAS,CAAA;AAEtC,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,aAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,IACC,IAAA,oBACC,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,WAAA;AAAA,UACX,MAAA,CAAO,WAAW,WAAW,CAAA;AAAA,UAC7B;AAAA,SACF;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,QAAK,iBAAA,EAAmB,oBAAA,EACvB,8BAAC,OAAA,EAAA,EACE,QAAA,EAAA,IAAA,EAAM,IAAI,CAAA,GAAA,qBACT,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YAEC,IAAI,GAAA,CAAI,EAAA;AAAA,YACR,MAAM,GAAA,CAAI,IAAA;AAAA,YACV,eAAe,GAAA,CAAI,aAAA;AAAA,YAElB,QAAA,EAAA,GAAA,CAAI;AAAA,WAAA;AAAA,UALA,GAAA,CAAI;AAAA,SAOZ,GACH,CAAA,EACF;AAAA;AAAA;AACF,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/components/Header/HeaderToolbar.esm.js

@@ -1,17 +1,15 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { RouterProvider, Link } from 'react-aria-components';
+import { Link } from 'react-aria-components';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import { useRef } from 'react';
 import { RiShapesLine } from '@remixicon/react';
 import { Text } from '../Text/Text.esm.js';
-import { useNavigate, useHref } from 'react-router-dom';
 import styles from './Header.module.css.esm.js';
 import clsx from 'clsx';
 
 const HeaderToolbar = (props) => {
   const { classNames, cleanedProps } = useStyles("Header", props);
-  const { icon, title, titleLink, customActions, hasTabs } = cleanedProps;
-  let navigate = useNavigate();
+  const { className, icon, title, titleLink, customActions, hasTabs } = cleanedProps;
   const toolbarWrapperRef = useRef(null);
   const toolbarContentRef = useRef(null);
   const toolbarControlsRef = useRef(null);
@@ -25,10 +23,14 @@ const HeaderToolbar = (props) => {
     ),
     /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: title || "Your plugin" })
   ] });
-  return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      className: clsx(classNames.toolbar, styles[classNames.toolbar]),
+      className: clsx(
+        classNames.toolbar,
+        styles[classNames.toolbar],
+        className
+      ),
       "data-has-tabs": hasTabs,
       children: /* @__PURE__ */ jsxs(
         "div",
@@ -84,7 +86,7 @@ const HeaderToolbar = (props) => {
         }
       )
     }
-  ) });
+  );
 };
 
 export { HeaderToolbar };

package/dist/components/Header/HeaderToolbar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderToolbar.esm.js","sources":["../../../src/components/Header/HeaderToolbar.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 { Link, RouterProvider } from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { useRef } from 'react';\nimport { RiShapesLine } from '@remixicon/react';\nimport type { HeaderToolbarProps } from './types';\nimport { Text } from '../Text';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport styles from './Header.module.css';\nimport clsx from 'clsx';\n\n/**\n * A component that renders a toolbar.\n *\n * @internal\n */\nexport const HeaderToolbar = (props: HeaderToolbarProps) => {\n  const { classNames, cleanedProps } = useStyles('Header', props);\n  const { icon, title, titleLink, customActions, hasTabs } = cleanedProps;\n  let navigate = useNavigate();\n\n  // Refs for collision detection\n  const toolbarWrapperRef = useRef<HTMLDivElement>(null);\n  const toolbarContentRef = useRef<HTMLDivElement>(null);\n  const toolbarControlsRef = useRef<HTMLDivElement>(null);\n\n  const titleContent = (\n    <>\n      <div\n        className={clsx(classNames.toolbarIcon, styles[classNames.toolbarIcon])}\n      >\n        {icon || <RiShapesLine />}\n      </div>\n      <Text variant=\"body-medium\">{title || 'Your plugin'}</Text>\n    </>\n  );\n\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <div\n        className={clsx(classNames.toolbar, styles[classNames.toolbar])}\n        data-has-tabs={hasTabs}\n      >\n        <div\n          className={clsx(\n            classNames.toolbarWrapper,\n            styles[classNames.toolbarWrapper],\n          )}\n          ref={toolbarWrapperRef}\n        >\n          <div\n            className={clsx(\n              classNames.toolbarContent,\n              styles[classNames.toolbarContent],\n            )}\n            ref={toolbarContentRef}\n          >\n            <Text as=\"h1\" variant=\"body-medium\">\n              {titleLink ? (\n                <Link\n                  className={clsx(\n                    classNames.toolbarName,\n                    styles[classNames.toolbarName],\n                  )}\n                  href={titleLink}\n                >\n                  {titleContent}\n                </Link>\n              ) : (\n                <div\n                  className={clsx(\n                    classNames.toolbarName,\n                    styles[classNames.toolbarName],\n                  )}\n                >\n                  {titleContent}\n                </div>\n              )}\n            </Text>\n          </div>\n          <div\n            className={clsx(\n              classNames.toolbarControls,\n              styles[classNames.toolbarControls],\n            )}\n            ref={toolbarControlsRef}\n          >\n            {customActions}\n          </div>\n        </div>\n      </div>\n    </RouterProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA+BO,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA8B;AAC1D,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,UAAU,KAAK,CAAA;AAC9D,EAAA,MAAM,EAAE,IAAA,EAAM,KAAA,EAAO,SAAA,EAAW,aAAA,EAAe,SAAQ,GAAI,YAAA;AAC3D,EAAA,IAAI,WAAW,WAAA,EAAY;AAG3B,EAAA,MAAM,iBAAA,GAAoB,OAAuB,IAAI,CAAA;AACrD,EAAA,MAAM,iBAAA,GAAoB,OAAuB,IAAI,CAAA;AACrD,EAAA,MAAM,kBAAA,GAAqB,OAAuB,IAAI,CAAA;AAEtD,EAAA,MAAM,+BACJ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,UAAA,CAAW,aAAa,MAAA,CAAO,UAAA,CAAW,WAAW,CAAC,CAAA;AAAA,QAErE,QAAA,EAAA,IAAA,wBAAS,YAAA,EAAA,EAAa;AAAA;AAAA,KACzB;AAAA,oBACA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,aAAA,EAAe,mBAAS,aAAA,EAAc;AAAA,GAAA,EACtD,CAAA;AAGF,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,MAC9D,eAAA,EAAe,OAAA;AAAA,MAEf,QAAA,kBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,cAAA;AAAA,YACX,MAAA,CAAO,WAAW,cAAc;AAAA,WAClC;AAAA,UACA,GAAA,EAAK,iBAAA;AAAA,UAEL,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,cAAA;AAAA,kBACX,MAAA,CAAO,WAAW,cAAc;AAAA,iBAClC;AAAA,gBACA,GAAA,EAAK,iBAAA;AAAA,gBAEL,8BAAC,IAAA,EAAA,EAAK,EAAA,EAAG,IAAA,EAAK,OAAA,EAAQ,eACnB,QAAA,EAAA,SAAA,mBACC,GAAA;AAAA,kBAAC,IAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,IAAA;AAAA,sBACT,UAAA,CAAW,WAAA;AAAA,sBACX,MAAA,CAAO,WAAW,WAAW;AAAA,qBAC/B;AAAA,oBACA,IAAA,EAAM,SAAA;AAAA,oBAEL,QAAA,EAAA;AAAA;AAAA,iBACH,mBAEA,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,IAAA;AAAA,sBACT,UAAA,CAAW,WAAA;AAAA,sBACX,MAAA,CAAO,WAAW,WAAW;AAAA,qBAC/B;AAAA,oBAEC,QAAA,EAAA;AAAA;AAAA,iBACH,EAEJ;AAAA;AAAA,aACF;AAAA,4BACA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,eAAA;AAAA,kBACX,MAAA,CAAO,WAAW,eAAe;AAAA,iBACnC;AAAA,gBACA,GAAA,EAAK,kBAAA;AAAA,gBAEJ,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA;AACF;AAAA,GACF,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"HeaderToolbar.esm.js","sources":["../../../src/components/Header/HeaderToolbar.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 { Link } from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { useRef } from 'react';\nimport { RiShapesLine } from '@remixicon/react';\nimport type { HeaderToolbarProps } from './types';\nimport { Text } from '../Text';\nimport styles from './Header.module.css';\nimport clsx from 'clsx';\n\n/**\n * A component that renders a toolbar.\n *\n * @internal\n */\nexport const HeaderToolbar = (props: HeaderToolbarProps) => {\n  const { classNames, cleanedProps } = useStyles('Header', props);\n  const { className, icon, title, titleLink, customActions, hasTabs } =\n    cleanedProps;\n\n  // Refs for collision detection\n  const toolbarWrapperRef = useRef<HTMLDivElement>(null);\n  const toolbarContentRef = useRef<HTMLDivElement>(null);\n  const toolbarControlsRef = useRef<HTMLDivElement>(null);\n\n  const titleContent = (\n    <>\n      <div\n        className={clsx(classNames.toolbarIcon, styles[classNames.toolbarIcon])}\n      >\n        {icon || <RiShapesLine />}\n      </div>\n      <Text variant=\"body-medium\">{title || 'Your plugin'}</Text>\n    </>\n  );\n\n  return (\n    <div\n      className={clsx(\n        classNames.toolbar,\n        styles[classNames.toolbar],\n        className,\n      )}\n      data-has-tabs={hasTabs}\n    >\n      <div\n        className={clsx(\n          classNames.toolbarWrapper,\n          styles[classNames.toolbarWrapper],\n        )}\n        ref={toolbarWrapperRef}\n      >\n        <div\n          className={clsx(\n            classNames.toolbarContent,\n            styles[classNames.toolbarContent],\n          )}\n          ref={toolbarContentRef}\n        >\n          <Text as=\"h1\" variant=\"body-medium\">\n            {titleLink ? (\n              <Link\n                className={clsx(\n                  classNames.toolbarName,\n                  styles[classNames.toolbarName],\n                )}\n                href={titleLink}\n              >\n                {titleContent}\n              </Link>\n            ) : (\n              <div\n                className={clsx(\n                  classNames.toolbarName,\n                  styles[classNames.toolbarName],\n                )}\n              >\n                {titleContent}\n              </div>\n            )}\n          </Text>\n        </div>\n        <div\n          className={clsx(\n            classNames.toolbarControls,\n            styles[classNames.toolbarControls],\n          )}\n          ref={toolbarControlsRef}\n        >\n          {customActions}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA8BO,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA8B;AAC1D,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,UAAU,KAAK,CAAA;AAC9D,EAAA,MAAM,EAAE,SAAA,EAAW,IAAA,EAAM,OAAO,SAAA,EAAW,aAAA,EAAe,SAAQ,GAChE,YAAA;AAGF,EAAA,MAAM,iBAAA,GAAoB,OAAuB,IAAI,CAAA;AACrD,EAAA,MAAM,iBAAA,GAAoB,OAAuB,IAAI,CAAA;AACrD,EAAA,MAAM,kBAAA,GAAqB,OAAuB,IAAI,CAAA;AAEtD,EAAA,MAAM,+BACJ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,UAAA,CAAW,aAAa,MAAA,CAAO,UAAA,CAAW,WAAW,CAAC,CAAA;AAAA,QAErE,QAAA,EAAA,IAAA,wBAAS,YAAA,EAAA,EAAa;AAAA;AAAA,KACzB;AAAA,oBACA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,aAAA,EAAe,mBAAS,aAAA,EAAc;AAAA,GAAA,EACtD,CAAA;AAGF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,OAAA;AAAA,QACX,MAAA,CAAO,WAAW,OAAO,CAAA;AAAA,QACzB;AAAA,OACF;AAAA,MACA,eAAA,EAAe,OAAA;AAAA,MAEf,QAAA,kBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,cAAA;AAAA,YACX,MAAA,CAAO,WAAW,cAAc;AAAA,WAClC;AAAA,UACA,GAAA,EAAK,iBAAA;AAAA,UAEL,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,cAAA;AAAA,kBACX,MAAA,CAAO,WAAW,cAAc;AAAA,iBAClC;AAAA,gBACA,GAAA,EAAK,iBAAA;AAAA,gBAEL,8BAAC,IAAA,EAAA,EAAK,EAAA,EAAG,IAAA,EAAK,OAAA,EAAQ,eACnB,QAAA,EAAA,SAAA,mBACC,GAAA;AAAA,kBAAC,IAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,IAAA;AAAA,sBACT,UAAA,CAAW,WAAA;AAAA,sBACX,MAAA,CAAO,WAAW,WAAW;AAAA,qBAC/B;AAAA,oBACA,IAAA,EAAM,SAAA;AAAA,oBAEL,QAAA,EAAA;AAAA;AAAA,iBACH,mBAEA,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,IAAA;AAAA,sBACT,UAAA,CAAW,WAAA;AAAA,sBACX,MAAA,CAAO,WAAW,WAAW;AAAA,qBAC/B;AAAA,oBAEC,QAAA,EAAA;AAAA;AAAA,iBACH,EAEJ;AAAA;AAAA,aACF;AAAA,4BACA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,eAAA;AAAA,kBACX,MAAA,CAAO,WAAW,eAAe;AAAA,iBACnC;AAAA,gBACA,GAAA,EAAK,kBAAA;AAAA,gBAEJ,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}