@backstage/ui 0.7.2-next.1 → 0.8.0

package/dist/components/Flex/Flex.esm.js

@@ -1,25 +1,29 @@
-import { forwardRef, createElement } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import clsx from 'clsx';
-import { flexPropDefs } from './Flex.props.esm.js';
-import { extractProps } from '../../utils/extractProps.esm.js';
-import { gapPropDefs } from '../../props/gap-props.esm.js';
-import { spacingPropDefs } from '../../props/spacing.props.esm.js';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import styles from './Flex.module.css.esm.js';
 
 const Flex = forwardRef((props, ref) => {
-  const propDefs = {
-    ...gapPropDefs,
-    ...flexPropDefs,
-    ...spacingPropDefs
-  };
-  const { classNames } = useStyles("Flex");
-  const { className, style } = extractProps(props, propDefs);
-  return createElement("div", {
-    ref,
-    className: clsx(classNames.root, className),
-    style,
-    children: props.children
-  });
+  const { classNames, utilityClasses, style, cleanedProps } = useStyles(
+    "Flex",
+    { gap: "4", ...props }
+  );
+  const { className, ...rest } = cleanedProps;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: clsx(
+        classNames.root,
+        utilityClasses,
+        styles[classNames.root],
+        className
+      ),
+      style,
+      ...rest
+    }
+  );
 });
 
 export { Flex };

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.esm.js","sources":["../../../src/components/Flex/Flex.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 { FlexProps } from './types';\nimport clsx from 'clsx';\nimport { flexPropDefs } from './Flex.props';\nimport { extractProps } from '../../utils/extractProps';\nimport { gapPropDefs } from '../../props/gap-props';\nimport { spacingPropDefs } from '../../props/spacing.props';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {\n  const propDefs = {\n    ...gapPropDefs,\n    ...flexPropDefs,\n    ...spacingPropDefs,\n  };\n\n  const { classNames } = useStyles('Flex');\n  const { className, style } = extractProps(props, propDefs);\n\n  return createElement('div', {\n    ref,\n    className: clsx(classNames.root, className),\n    style,\n    children: props.children,\n  });\n});\n"],"names":[],"mappings":";;;;;;;;AA0BO,MAAM,IAAA,GAAO,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACxE,EAAA,MAAM,QAAA,GAAW;AAAA,IACf,GAAG,WAAA;AAAA,IACH,GAAG,YAAA;AAAA,IACH,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,MAAM,CAAA;AACvC,EAAA,MAAM,EAAE,SAAA,EAAW,KAAA,EAAM,GAAI,YAAA,CAAa,OAAO,QAAQ,CAAA;AAEzD,EAAA,OAAO,cAAc,KAAA,EAAO;AAAA,IAC1B,GAAA;AAAA,IACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,IAC1C,KAAA;AAAA,IACA,UAAU,KAAA,CAAM;AAAA,GACjB,CAAA;AACH,CAAC;;;;"}
+{"version":3,"file":"Flex.esm.js","sources":["../../../src/components/Flex/Flex.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 { FlexProps } from './types';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Flex.module.css';\n\n/** @public */\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {\n  const { classNames, utilityClasses, style, cleanedProps } = useStyles(\n    'Flex',\n    { gap: '4', ...props },\n  );\n\n  const { className, ...rest } = cleanedProps;\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        classNames.root,\n        utilityClasses,\n        styles[classNames.root],\n        className,\n      )}\n      style={style}\n      {...rest}\n    />\n  );\n});\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,IAAA,GAAO,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACxE,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,KAAA,EAAO,cAAa,GAAI,SAAA;AAAA,IAC1D,MAAA;AAAA,IACA,EAAE,GAAA,EAAK,GAAA,EAAK,GAAG,KAAA;AAAM,GACvB;AAEA,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,IAAA;AAAA,QACX,cAAA;AAAA,QACA,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}

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

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer components {\n  .Flex-module_bui-Flex__3kax7 {\n    display: flex;\n\n    /* This helps when using `truncate` on text inside a flex container */\n    min-width: 0;\n  }\n}\n";
+var styles = {"bui-Flex":"Flex-module_bui-Flex__3kax7"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=Flex.module.css.esm.js.map

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

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

package/dist/components/Grid/Grid.esm.js

@@ -1,38 +1,50 @@
-import { forwardRef, createElement } from 'react';
-import { gapPropDefs } from '../../props/gap-props.esm.js';
-import { extractProps } from '../../utils/extractProps.esm.js';
-import { gridPropDefs, gridItemPropDefs } from './Grid.props.esm.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import clsx from 'clsx';
-import { spacingPropDefs } from '../../props/spacing.props.esm.js';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import styles from './Grid.module.css.esm.js';
 
 const GridRoot = forwardRef((props, ref) => {
-  const propDefs = {
-    ...gapPropDefs,
-    ...gridPropDefs,
-    ...spacingPropDefs
-  };
-  const { classNames } = useStyles("Grid");
-  const { className, style } = extractProps(props, propDefs);
-  return createElement("div", {
-    ref,
-    className: clsx(classNames.root, className),
-    style,
-    children: props.children
-  });
+  const { classNames, utilityClasses, style, cleanedProps } = useStyles(
+    "Grid",
+    { columns: "auto", gap: "4", ...props }
+  );
+  const { className, ...rest } = cleanedProps;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: clsx(
+        classNames.root,
+        utilityClasses,
+        styles[classNames.root],
+        className
+      ),
+      style,
+      ...rest
+    }
+  );
 });
 const GridItem = forwardRef((props, ref) => {
-  const propDefs = {
-    ...gridItemPropDefs
-  };
-  const { classNames } = useStyles("Grid");
-  const { className, style } = extractProps(props, propDefs);
-  return createElement("div", {
-    ref,
-    className: clsx(classNames.item, className),
-    style,
-    children: props.children
-  });
+  const { classNames, utilityClasses, style, cleanedProps } = useStyles(
+    "GridItem",
+    props
+  );
+  const { className, ...rest } = cleanedProps;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: clsx(
+        classNames.root,
+        utilityClasses,
+        styles[classNames.root],
+        className
+      ),
+      style,
+      ...rest
+    }
+  );
 });
 const Grid = {
   Root: GridRoot,

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.esm.js","sources":["../../../src/components/Grid/Grid.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 { gapPropDefs } from '../../props/gap-props';\nimport { extractProps } from '../../utils/extractProps';\nimport { gridItemPropDefs, gridPropDefs } from './Grid.props';\nimport clsx from 'clsx';\nimport type { GridItemProps, GridProps } from './types';\nimport { spacingPropDefs } from '../../props/spacing.props';\nimport { useStyles } from '../../hooks/useStyles';\n\nconst GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {\n  const propDefs = {\n    ...gapPropDefs,\n    ...gridPropDefs,\n    ...spacingPropDefs,\n  };\n\n  const { classNames } = useStyles('Grid');\n\n  const { className, style } = extractProps(props, propDefs);\n\n  return createElement('div', {\n    ref,\n    className: clsx(classNames.root, className),\n    style,\n    children: props.children,\n  });\n});\n\nconst GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {\n  const propDefs = {\n    ...gridItemPropDefs,\n  };\n\n  const { classNames } = useStyles('Grid');\n  const { className, style } = extractProps(props, propDefs);\n\n  return createElement('div', {\n    ref,\n    className: clsx(classNames.item, className),\n    style,\n    children: props.children,\n  });\n});\n\n/** @public */\nexport const Grid = {\n  Root: GridRoot,\n  Item: GridItem,\n};\n"],"names":[],"mappings":";;;;;;;;AAyBA,MAAM,QAAA,GAAW,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACrE,EAAA,MAAM,QAAA,GAAW;AAAA,IACf,GAAG,WAAA;AAAA,IACH,GAAG,YAAA;AAAA,IACH,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,MAAM,CAAA;AAEvC,EAAA,MAAM,EAAE,SAAA,EAAW,KAAA,EAAM,GAAI,YAAA,CAAa,OAAO,QAAQ,CAAA;AAEzD,EAAA,OAAO,cAAc,KAAA,EAAO;AAAA,IAC1B,GAAA;AAAA,IACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,IAC1C,KAAA;AAAA,IACA,UAAU,KAAA,CAAM;AAAA,GACjB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,QAAA,GAAW,UAAA,CAA0C,CAAC,KAAA,EAAO,GAAA,KAAQ;AACzE,EAAA,MAAM,QAAA,GAAW;AAAA,IACf,GAAG;AAAA,GACL;AAEA,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,MAAM,CAAA;AACvC,EAAA,MAAM,EAAE,SAAA,EAAW,KAAA,EAAM,GAAI,YAAA,CAAa,OAAO,QAAQ,CAAA;AAEzD,EAAA,OAAO,cAAc,KAAA,EAAO;AAAA,IAC1B,GAAA;AAAA,IACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,IAC1C,KAAA;AAAA,IACA,UAAU,KAAA,CAAM;AAAA,GACjB,CAAA;AACH,CAAC,CAAA;AAGM,MAAM,IAAA,GAAO;AAAA,EAClB,IAAA,EAAM,QAAA;AAAA,EACN,IAAA,EAAM;AACR;;;;"}
+{"version":3,"file":"Grid.esm.js","sources":["../../../src/components/Grid/Grid.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 clsx from 'clsx';\nimport type { GridItemProps, GridProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Grid.module.css';\n\nconst GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {\n  const { classNames, utilityClasses, style, cleanedProps } = useStyles(\n    'Grid',\n    { columns: 'auto', gap: '4', ...props },\n  );\n\n  const { className, ...rest } = cleanedProps;\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        classNames.root,\n        utilityClasses,\n        styles[classNames.root],\n        className,\n      )}\n      style={style}\n      {...rest}\n    />\n  );\n});\n\nconst GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {\n  const { classNames, utilityClasses, style, cleanedProps } = useStyles(\n    'GridItem',\n    props,\n  );\n\n  const { className, ...rest } = cleanedProps;\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(\n        classNames.root,\n        utilityClasses,\n        styles[classNames.root],\n        className,\n      )}\n      style={style}\n      {...rest}\n    />\n  );\n});\n\n/** @public */\nexport const Grid = {\n  Root: GridRoot,\n  Item: GridItem,\n};\n"],"names":[],"mappings":";;;;;;AAsBA,MAAM,QAAA,GAAW,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACrE,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,KAAA,EAAO,cAAa,GAAI,SAAA;AAAA,IAC1D,MAAA;AAAA,IACA,EAAE,OAAA,EAAS,MAAA,EAAQ,GAAA,EAAK,GAAA,EAAK,GAAG,KAAA;AAAM,GACxC;AAEA,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,IAAA;AAAA,QACX,cAAA;AAAA,QACA,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AAED,MAAM,QAAA,GAAW,UAAA,CAA0C,CAAC,KAAA,EAAO,GAAA,KAAQ;AACzE,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,KAAA,EAAO,cAAa,GAAI,SAAA;AAAA,IAC1D,UAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,IAAA;AAAA,QACX,cAAA;AAAA,QACA,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC,CAAA;AAGM,MAAM,IAAA,GAAO;AAAA,EAClB,IAAA,EAAM,QAAA;AAAA,EACN,IAAA,EAAM;AACR;;;;"}

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

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer components {\n  .Grid-module_bui-Grid__3vX0y {\n    display: grid;\n  }\n}\n";
+var styles = {"bui-Grid":"Grid-module_bui-Grid__3vX0y"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=Grid.module.css.esm.js.map

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

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

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

@@ -2,10 +2,12 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { HeaderToolbar } from './HeaderToolbar.esm.js';
 import { Tabs, TabList, Tab } from '../Tabs/Tabs.esm.js';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import styles from './Header.module.css.esm.js';
+import clsx from 'clsx';
 
 const Header = (props) => {
-  const { tabs, icon, title, titleLink, customActions, onTabSelectionChange } = props;
-  const { classNames } = useStyles("Header");
+  const { classNames, cleanedProps } = useStyles("Header", props);
+  const { tabs, icon, title, titleLink, customActions, onTabSelectionChange } = cleanedProps;
   const hasTabs = tabs && tabs.length > 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
@@ -18,16 +20,25 @@ const Header = (props) => {
         hasTabs
       }
     ),
-    tabs && /* @__PURE__ */ jsx("div", { className: classNames.tabsWrapper, children: /* @__PURE__ */ jsx(Tabs, { onSelectionChange: onTabSelectionChange, children: /* @__PURE__ */ jsx(TabList, { children: tabs?.map((tab) => /* @__PURE__ */ jsx(
-      Tab,
+    tabs && /* @__PURE__ */ jsx(
+      "div",
       {
-        id: tab.id,
-        href: tab.href,
-        matchStrategy: tab.matchStrategy,
-        children: tab.label
-      },
-      tab.id
-    )) }) }) })
+        className: clsx(
+          classNames.tabsWrapper,
+          styles[classNames.tabsWrapper]
+        ),
+        children: /* @__PURE__ */ jsx(Tabs, { onSelectionChange: onTabSelectionChange, children: /* @__PURE__ */ jsx(TabList, { children: tabs?.map((tab) => /* @__PURE__ */ jsx(
+          Tab,
+          {
+            id: tab.id,
+            href: tab.href,
+            matchStrategy: tab.matchStrategy,
+            children: tab.label
+          },
+          tab.id
+        )) }) })
+      }
+    )
   ] });
 };
 

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';\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 { tabs, icon, title, titleLink, customActions, onTabSelectionChange } =\n    props;\n\n  const { classNames } = useStyles('Header');\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 className={classNames.tabsWrapper}>\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":";;;;;AAiCO,MAAM,MAAA,GAAS,CAAC,KAAA,KAAuB;AAC5C,EAAA,MAAM,EAAE,IAAA,EAAM,IAAA,EAAM,OAAO,SAAA,EAAW,aAAA,EAAe,sBAAqB,GACxE,KAAA;AAEF,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,QAAQ,CAAA;AAEzC,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,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,WAAW,WAAA,EACzB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,iBAAA,EAAmB,oBAAA,EACvB,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACE,QAAA,EAAA,IAAA,EAAM,IAAI,CAAA,GAAA,qBACT,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QAEC,IAAI,GAAA,CAAI,EAAA;AAAA,QACR,MAAM,GAAA,CAAI,IAAA;AAAA,QACV,eAAe,GAAA,CAAI,aAAA;AAAA,QAElB,QAAA,EAAA,GAAA,CAAI;AAAA,OAAA;AAAA,MALA,GAAA,CAAI;AAAA,KAOZ,CAAA,EACH,CAAA,EACF,CAAA,EACF;AAAA,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 { 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;;;;"}

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

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer components {\n  .Header-module_bui-HeaderToolbar__1HcPN {\n    margin-bottom: var(--bui-space-6);\n\n    &::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0px;\n      right: 0px;\n      height: 16px;\n      background-color: var(--bui-bg);\n      z-index: 0;\n    }\n\n    &[data-has-tabs='true'] {\n      margin-bottom: 0;\n    }\n  }\n\n  .Header-module_bui-HeaderToolbarWrapper__1WJwf {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    background-color: var(--bui-bg-surface-1);\n    padding-inline: var(--bui-space-5);\n    border-bottom: 1px solid var(--bui-border);\n    color: var(--bui-fg-primary);\n    height: 52px;\n  }\n\n  .Header-module_bui-HeaderToolbarContent__8b9nS {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .Header-module_bui-HeaderToolbarName__2E-_b {\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-weight: var(--bui-font-weight-regular);\n    flex-shrink: 0;\n  }\n\n  .Header-module_bui-HeaderToolbarIcon__1JjN5 {\n    width: 16px;\n    height: 16px;\n    color: var(--bui-fg-primary);\n\n    & svg {\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  .Header-module_bui-HeaderToolbarControls__1EtQC {\n    position: absolute;\n    right: var(--bui-space-5);\n    top: 50%;\n    transform: translateY(-50%);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .Header-module_bui-HeaderTabsWrapper__19BXF {\n    margin-bottom: var(--bui-space-4);\n    padding-inline: var(--bui-space-3);\n    border-bottom: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\n  }\n}\n";
+var styles = {"bui-HeaderToolbar":"Header-module_bui-HeaderToolbar__1HcPN","bui-HeaderToolbarWrapper":"Header-module_bui-HeaderToolbarWrapper__1WJwf","bui-HeaderToolbarContent":"Header-module_bui-HeaderToolbarContent__8b9nS","bui-HeaderToolbarName":"Header-module_bui-HeaderToolbarName__2E-_b","bui-HeaderToolbarIcon":"Header-module_bui-HeaderToolbarIcon__1JjN5","bui-HeaderToolbarControls":"Header-module_bui-HeaderToolbarControls__1EtQC","bui-HeaderTabsWrapper":"Header-module_bui-HeaderTabsWrapper__19BXF"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=Header.module.css.esm.js.map

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

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

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

@@ -5,22 +5,86 @@ 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 { icon, title, titleLink, customActions, hasTabs } = props;
-  const { classNames } = useStyles("Header");
+  const { classNames, cleanedProps } = useStyles("Header", props);
+  const { icon, title, titleLink, customActions, hasTabs } = cleanedProps;
   let navigate = useNavigate();
   const toolbarWrapperRef = useRef(null);
   const toolbarContentRef = useRef(null);
   const toolbarControlsRef = useRef(null);
   const titleContent = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: classNames.toolbarIcon, children: icon || /* @__PURE__ */ jsx(RiShapesLine, {}) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(classNames.toolbarIcon, styles[classNames.toolbarIcon]),
+        children: icon || /* @__PURE__ */ jsx(RiShapesLine, {})
+      }
+    ),
     /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: title || "Your plugin" })
   ] });
-  return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsx("div", { className: classNames.toolbar, "data-has-tabs": hasTabs, children: /* @__PURE__ */ jsxs("div", { className: classNames.toolbarWrapper, ref: toolbarWrapperRef, children: [
-    /* @__PURE__ */ jsx("div", { className: classNames.toolbarContent, ref: toolbarContentRef, children: /* @__PURE__ */ jsx(Text, { as: "h1", variant: "body-medium", children: titleLink ? /* @__PURE__ */ jsx(Link, { className: classNames.toolbarName, href: titleLink, children: titleContent }) : /* @__PURE__ */ jsx("div", { className: classNames.toolbarName, children: titleContent }) }) }),
-    /* @__PURE__ */ jsx("div", { className: classNames.toolbarControls, ref: toolbarControlsRef, children: customActions })
-  ] }) }) });
+  return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(classNames.toolbar, styles[classNames.toolbar]),
+      "data-has-tabs": hasTabs,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx(
+            classNames.toolbarWrapper,
+            styles[classNames.toolbarWrapper]
+          ),
+          ref: toolbarWrapperRef,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(
+                  classNames.toolbarContent,
+                  styles[classNames.toolbarContent]
+                ),
+                ref: toolbarContentRef,
+                children: /* @__PURE__ */ jsx(Text, { as: "h1", variant: "body-medium", children: titleLink ? /* @__PURE__ */ jsx(
+                  Link,
+                  {
+                    className: clsx(
+                      classNames.toolbarName,
+                      styles[classNames.toolbarName]
+                    ),
+                    href: titleLink,
+                    children: titleContent
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: clsx(
+                      classNames.toolbarName,
+                      styles[classNames.toolbarName]
+                    ),
+                    children: titleContent
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(
+                  classNames.toolbarControls,
+                  styles[classNames.toolbarControls]
+                ),
+                ref: toolbarControlsRef,
+                children: customActions
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
 };
 
 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';\n\n/**\n * A component that renders a toolbar.\n *\n * @internal\n */\nexport const HeaderToolbar = (props: HeaderToolbarProps) => {\n  const { icon, title, titleLink, customActions, hasTabs } = props;\n  const { classNames } = useStyles('Header');\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 className={classNames.toolbarIcon}>{icon || <RiShapesLine />}</div>\n      <Text variant=\"body-medium\">{title || 'Your plugin'}</Text>\n    </>\n  );\n\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <div className={classNames.toolbar} data-has-tabs={hasTabs}>\n        <div className={classNames.toolbarWrapper} ref={toolbarWrapperRef}>\n          <div className={classNames.toolbarContent} ref={toolbarContentRef}>\n            <Text as=\"h1\" variant=\"body-medium\">\n              {titleLink ? (\n                <Link className={classNames.toolbarName} href={titleLink}>\n                  {titleContent}\n                </Link>\n              ) : (\n                <div className={classNames.toolbarName}>{titleContent}</div>\n              )}\n            </Text>\n          </div>\n          <div className={classNames.toolbarControls} ref={toolbarControlsRef}>\n            {customActions}\n          </div>\n        </div>\n      </div>\n    </RouterProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA6BO,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA8B;AAC1D,EAAA,MAAM,EAAE,IAAA,EAAM,KAAA,EAAO,SAAA,EAAW,aAAA,EAAe,SAAQ,GAAI,KAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,QAAQ,CAAA;AACzC,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,CAAC,SAAI,SAAA,EAAW,UAAA,CAAW,aAAc,QAAA,EAAA,IAAA,oBAAQ,GAAA,CAAC,gBAAa,CAAA,EAAG,CAAA;AAAA,oBAClE,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,aAAA,EAAe,mBAAS,aAAA,EAAc;AAAA,GAAA,EACtD,CAAA;AAGF,EAAA,2BACG,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,GAAA,CAAC,SAAI,SAAA,EAAW,UAAA,CAAW,OAAA,EAAS,eAAA,EAAe,SACjD,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAW,UAAA,CAAW,cAAA,EAAgB,KAAK,iBAAA,EAC9C,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,cAAA,EAAgB,GAAA,EAAK,iBAAA,EAC9C,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,IAAA,EAAK,OAAA,EAAQ,aAAA,EACnB,QAAA,EAAA,SAAA,mBACC,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,UAAA,CAAW,WAAA,EAAa,IAAA,EAAM,SAAA,EAC5C,QAAA,EAAA,YAAA,EACH,CAAA,mBAEA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,WAAA,EAAc,QAAA,EAAA,YAAA,EAAa,GAE1D,CAAA,EACF,CAAA;AAAA,wBACC,KAAA,EAAA,EAAI,SAAA,EAAW,WAAW,eAAA,EAAiB,GAAA,EAAK,oBAC9C,QAAA,EAAA,aAAA,EACH;AAAA,GAAA,EACF,GACF,CAAA,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, 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;;;;"}

package/dist/components/HeaderPage/HeaderPage.esm.js

@@ -5,42 +5,62 @@ import { Tabs, TabList, Tab } from '../Tabs/Tabs.esm.js';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import { Container } from '../Container/Container.esm.js';
 import { Link } from '../Link/Link.esm.js';
+import styles from './HeaderPage.module.css.esm.js';
+import clsx from 'clsx';
 
 const HeaderPage = (props) => {
-  const { title, tabs, customActions, breadcrumbs } = props;
-  const { classNames } = useStyles("HeaderPage");
-  return /* @__PURE__ */ jsxs(Container, { className: classNames.root, children: [
-    /* @__PURE__ */ jsxs("div", { className: classNames.content, children: [
-      /* @__PURE__ */ jsxs("div", { className: classNames.breadcrumbs, children: [
-        breadcrumbs && breadcrumbs.map((breadcrumb) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            Link,
-            {
-              href: breadcrumb.href,
-              variant: "title-small",
-              weight: "bold",
-              color: "secondary",
-              truncate: true,
-              style: { maxWidth: "240px" },
-              children: breadcrumb.label
-            }
+  const { classNames, cleanedProps } = useStyles("HeaderPage", props);
+  const { title, tabs, customActions, breadcrumbs } = cleanedProps;
+  return /* @__PURE__ */ jsxs(Container, { className: clsx(classNames.root, styles[classNames.root]), children: [
+    /* @__PURE__ */ jsxs("div", { className: clsx(classNames.content, styles[classNames.content]), children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx(
+            classNames.breadcrumbs,
+            styles[classNames.breadcrumbs]
           ),
-          /* @__PURE__ */ jsx(RiArrowRightSLine, { size: 16, color: "var(--bui-fg-secondary)" })
-        ] }, breadcrumb.label)),
-        /* @__PURE__ */ jsx(Text, { variant: "title-small", weight: "bold", as: "h2", children: title })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: classNames.controls, children: customActions })
+          children: [
+            breadcrumbs && breadcrumbs.map((breadcrumb) => /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Link,
+                {
+                  href: breadcrumb.href,
+                  variant: "title-small",
+                  weight: "bold",
+                  color: "secondary",
+                  truncate: true,
+                  style: { maxWidth: "240px" },
+                  children: breadcrumb.label
+                }
+              ),
+              /* @__PURE__ */ jsx(RiArrowRightSLine, { size: 16, color: "var(--bui-fg-secondary)" })
+            ] }, breadcrumb.label)),
+            /* @__PURE__ */ jsx(Text, { variant: "title-small", weight: "bold", as: "h2", children: title })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: clsx(classNames.controls, styles[classNames.controls]), children: customActions })
     ] }),
-    tabs && /* @__PURE__ */ jsx("div", { className: classNames.tabsWrapper, children: /* @__PURE__ */ jsx(Tabs, { children: /* @__PURE__ */ jsx(TabList, { children: tabs.map((tab) => /* @__PURE__ */ jsx(
-      Tab,
+    tabs && /* @__PURE__ */ jsx(
+      "div",
       {
-        id: tab.id,
-        href: tab.href,
-        matchStrategy: tab.matchStrategy,
-        children: tab.label
-      },
-      tab.id
-    )) }) }) })
+        className: clsx(
+          classNames.tabsWrapper,
+          styles[classNames.tabsWrapper]
+        ),
+        children: /* @__PURE__ */ jsx(Tabs, { children: /* @__PURE__ */ jsx(TabList, { children: tabs.map((tab) => /* @__PURE__ */ jsx(
+          Tab,
+          {
+            id: tab.id,
+            href: tab.href,
+            matchStrategy: tab.matchStrategy,
+            children: tab.label
+          },
+          tab.id
+        )) }) })
+      }
+    )
   ] });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderPage.esm.js","sources":["../../../src/components/HeaderPage/HeaderPage.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 { HeaderPageProps } from './types';\nimport { Text } from '../Text';\nimport { RiArrowRightSLine } from '@remixicon/react';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\nimport { Container } from '../Container';\nimport { Link } from '../Link';\nimport { Fragment } from 'react/jsx-runtime';\n\n/**\n * A component that renders a header page.\n *\n * @public\n */\nexport const HeaderPage = (props: HeaderPageProps) => {\n  const { title, tabs, customActions, breadcrumbs } = props;\n  const { classNames } = useStyles('HeaderPage');\n\n  return (\n    <Container className={classNames.root}>\n      <div className={classNames.content}>\n        <div className={classNames.breadcrumbs}>\n          {breadcrumbs &&\n            breadcrumbs.map(breadcrumb => (\n              <Fragment key={breadcrumb.label}>\n                <Link\n                  href={breadcrumb.href}\n                  variant=\"title-small\"\n                  weight=\"bold\"\n                  color=\"secondary\"\n                  truncate\n                  style={{ maxWidth: '240px' }}\n                >\n                  {breadcrumb.label}\n                </Link>\n                <RiArrowRightSLine size={16} color=\"var(--bui-fg-secondary)\" />\n              </Fragment>\n            ))}\n          <Text variant=\"title-small\" weight=\"bold\" as=\"h2\">\n            {title}\n          </Text>\n        </div>\n        <div className={classNames.controls}>{customActions}</div>\n      </div>\n      {tabs && (\n        <div className={classNames.tabsWrapper}>\n          <Tabs>\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    </Container>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA8BO,MAAM,UAAA,GAAa,CAAC,KAAA,KAA2B;AACpD,EAAA,MAAM,EAAE,KAAA,EAAO,IAAA,EAAM,aAAA,EAAe,aAAY,GAAI,KAAA;AACpD,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,YAAY,CAAA;AAE7C,EAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,UAAA,CAAW,IAAA,EAC/B,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,OAAA,EACzB,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,WAAA,EACxB,QAAA,EAAA;AAAA,QAAA,WAAA,IACC,WAAA,CAAY,GAAA,CAAI,CAAA,UAAA,qBACd,IAAA,CAAC,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,MAAM,UAAA,CAAW,IAAA;AAAA,cACjB,OAAA,EAAQ,aAAA;AAAA,cACR,MAAA,EAAO,MAAA;AAAA,cACP,KAAA,EAAM,WAAA;AAAA,cACN,QAAA,EAAQ,IAAA;AAAA,cACR,KAAA,EAAO,EAAE,QAAA,EAAU,OAAA,EAAQ;AAAA,cAE1B,QAAA,EAAA,UAAA,CAAW;AAAA;AAAA,WACd;AAAA,0BACA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,EAAA,EAAI,OAAM,yBAAA,EAA0B;AAAA,SAAA,EAAA,EAXhD,UAAA,CAAW,KAY1B,CACD,CAAA;AAAA,wBACH,GAAA,CAAC,QAAK,OAAA,EAAQ,aAAA,EAAc,QAAO,MAAA,EAAO,EAAA,EAAG,MAC1C,QAAA,EAAA,KAAA,EACH;AAAA,OAAA,EACF,CAAA;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,UAAW,QAAA,EAAA,aAAA,EAAc;AAAA,KAAA,EACtD,CAAA;AAAA,IACC,IAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,WAAA,EACzB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACE,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAA,GAAA,qBACR,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QAEC,IAAI,GAAA,CAAI,EAAA;AAAA,QACR,MAAM,GAAA,CAAI,IAAA;AAAA,QACV,eAAe,GAAA,CAAI,aAAA;AAAA,QAElB,QAAA,EAAA,GAAA,CAAI;AAAA,OAAA;AAAA,MALA,GAAA,CAAI;AAAA,KAOZ,CAAA,EACH,CAAA,EACF,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"HeaderPage.esm.js","sources":["../../../src/components/HeaderPage/HeaderPage.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 { HeaderPageProps } from './types';\nimport { Text } from '../Text';\nimport { RiArrowRightSLine } from '@remixicon/react';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\nimport { Container } from '../Container';\nimport { Link } from '../Link';\nimport { Fragment } from 'react/jsx-runtime';\nimport styles from './HeaderPage.module.css';\nimport clsx from 'clsx';\n\n/**\n * A component that renders a header page.\n *\n * @public\n */\nexport const HeaderPage = (props: HeaderPageProps) => {\n  const { classNames, cleanedProps } = useStyles('HeaderPage', props);\n  const { title, tabs, customActions, breadcrumbs } = cleanedProps;\n\n  return (\n    <Container className={clsx(classNames.root, styles[classNames.root])}>\n      <div className={clsx(classNames.content, styles[classNames.content])}>\n        <div\n          className={clsx(\n            classNames.breadcrumbs,\n            styles[classNames.breadcrumbs],\n          )}\n        >\n          {breadcrumbs &&\n            breadcrumbs.map(breadcrumb => (\n              <Fragment key={breadcrumb.label}>\n                <Link\n                  href={breadcrumb.href}\n                  variant=\"title-small\"\n                  weight=\"bold\"\n                  color=\"secondary\"\n                  truncate\n                  style={{ maxWidth: '240px' }}\n                >\n                  {breadcrumb.label}\n                </Link>\n                <RiArrowRightSLine size={16} color=\"var(--bui-fg-secondary)\" />\n              </Fragment>\n            ))}\n          <Text variant=\"title-small\" weight=\"bold\" as=\"h2\">\n            {title}\n          </Text>\n        </div>\n        <div className={clsx(classNames.controls, styles[classNames.controls])}>\n          {customActions}\n        </div>\n      </div>\n      {tabs && (\n        <div\n          className={clsx(\n            classNames.tabsWrapper,\n            styles[classNames.tabsWrapper],\n          )}\n        >\n          <Tabs>\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    </Container>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAgCO,MAAM,UAAA,GAAa,CAAC,KAAA,KAA2B;AACpD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,cAAc,KAAK,CAAA;AAClE,EAAA,MAAM,EAAE,KAAA,EAAO,IAAA,EAAM,aAAA,EAAe,aAAY,GAAI,YAAA;AAEpD,EAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,MAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAC,CAAA,EACjE,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA,EACjE,QAAA,EAAA;AAAA,sBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,WAAA;AAAA,YACX,MAAA,CAAO,WAAW,WAAW;AAAA,WAC/B;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,WAAA,IACC,WAAA,CAAY,GAAA,CAAI,CAAA,UAAA,qBACd,IAAA,CAAC,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,IAAA;AAAA,gBAAA;AAAA,kBACC,MAAM,UAAA,CAAW,IAAA;AAAA,kBACjB,OAAA,EAAQ,aAAA;AAAA,kBACR,MAAA,EAAO,MAAA;AAAA,kBACP,KAAA,EAAM,WAAA;AAAA,kBACN,QAAA,EAAQ,IAAA;AAAA,kBACR,KAAA,EAAO,EAAE,QAAA,EAAU,OAAA,EAAQ;AAAA,kBAE1B,QAAA,EAAA,UAAA,CAAW;AAAA;AAAA,eACd;AAAA,8BACA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,EAAA,EAAI,OAAM,yBAAA,EAA0B;AAAA,aAAA,EAAA,EAXhD,UAAA,CAAW,KAY1B,CACD,CAAA;AAAA,4BACH,GAAA,CAAC,QAAK,OAAA,EAAQ,aAAA,EAAc,QAAO,MAAA,EAAO,EAAA,EAAG,MAC1C,QAAA,EAAA,KAAA,EACH;AAAA;AAAA;AAAA,OACF;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,QAAA,EAAU,MAAA,CAAO,UAAA,CAAW,QAAQ,CAAC,CAAA,EAClE,QAAA,EAAA,aAAA,EACH;AAAA,KAAA,EACF,CAAA;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,8BAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACE,QAAA,EAAA,IAAA,CAAK,IAAI,CAAA,GAAA,qBACR,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/HeaderPage/HeaderPage.module.css.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer components {\n  .HeaderPage-module_bui-HeaderPage__1V9A4 {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-1);\n    margin-top: var(--bui-space-6);\n    margin-bottom: var(--bui-space-6);\n  }\n\n  .HeaderPage-module_bui-HeaderPageContent__ImRWi {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n  }\n\n  .HeaderPage-module_bui-HeaderPageTabsWrapper__1Fcx4 {\n    margin-left: -8px;\n  }\n\n  .HeaderPage-module_bui-HeaderPageControls__2tefX {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .HeaderPage-module_bui-HeaderPageBreadcrumbs__wUkYx {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n}\n";
+var styles = {"bui-HeaderPage":"HeaderPage-module_bui-HeaderPage__1V9A4","bui-HeaderPageContent":"HeaderPage-module_bui-HeaderPageContent__ImRWi","bui-HeaderPageTabsWrapper":"HeaderPage-module_bui-HeaderPageTabsWrapper__1Fcx4","bui-HeaderPageControls":"HeaderPage-module_bui-HeaderPageControls__2tefX","bui-HeaderPageBreadcrumbs":"HeaderPage-module_bui-HeaderPageBreadcrumbs__wUkYx"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=HeaderPage.module.css.esm.js.map

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

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

package/dist/components/Link/Link.esm.js

@@ -5,31 +5,36 @@ import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import { useNavigate, useHref } from 'react-router-dom';
 import { isExternalLink } from '../../utils/isExternalLink.esm.js';
+import stylesLink from './Link.module.css.esm.js';
+import stylesText from '../Text/Text.module.css.esm.js';
 
 const Link = forwardRef((props, ref) => {
   const navigate = useNavigate();
+  const { classNames: classNamesLink } = useStyles("Link", props);
   const {
-    className,
-    variant = "body",
-    weight = "regular",
-    color = "primary",
-    truncate,
-    href,
-    ...restProps
-  } = props;
-  const { classNames: linkClassNames } = useStyles("Link");
-  const { classNames: textClassNames, dataAttributes: textDataAttributes } = useStyles("Text", {
-    variant,
-    weight,
-    color
+    classNames: classNamesText,
+    dataAttributes: textDataAttributes,
+    cleanedProps
+  } = useStyles("Text", {
+    variant: "body",
+    weight: "regular",
+    color: "primary",
+    ...props
   });
+  const { className, variant, weight, color, truncate, href, ...restProps } = cleanedProps;
   const isExternal = isExternalLink(href);
   if (isExternal) {
     return /* @__PURE__ */ jsx(
       Link$1,
       {
         ref,
-        className: clsx(textClassNames.root, linkClassNames.root, className),
+        className: clsx(
+          classNamesText.root,
+          classNamesLink.root,
+          stylesText[classNamesText.root],
+          stylesLink[classNamesLink.root],
+          className
+        ),
         "data-truncate": truncate,
         href,
         ...textDataAttributes,
@@ -41,7 +46,13 @@ const Link = forwardRef((props, ref) => {
     Link$1,
     {
       ref,
-      className: clsx(textClassNames.root, linkClassNames.root, className),
+      className: clsx(
+        classNamesText.root,
+        classNamesLink.root,
+        stylesText[classNamesText.root],
+        stylesLink[classNamesLink.root],
+        className
+      ),
       "data-truncate": truncate,
       ...textDataAttributes,
       href,