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

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Link as RALink, RouterProvider } from 'react-aria-components';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport type { ButtonLinkProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport stylesButton from '../Button/Button.module.css';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n  (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n    const navigate = useNavigate();\n\n    const { classNames, dataAttributes, cleanedProps } = useStyles('Button', {\n      size: 'small',\n      variant: 'primary',\n      ...props,\n    });\n\n    const { classNames: classNamesButtonLink } = useStyles('ButtonLink');\n\n    const { children, className, iconStart, iconEnd, href, ...rest } =\n      cleanedProps;\n\n    const isExternal = isExternalLink(href);\n\n    // If it's an external link, render RALink without RouterProvider\n    if (isExternal) {\n      return (\n        <RALink\n          className={clsx(\n            classNames.root,\n            classNamesButtonLink.root,\n            stylesButton[classNames.root],\n            className,\n          )}\n          ref={ref}\n          {...dataAttributes}\n          href={href}\n          {...rest}\n        >\n          {iconStart}\n          {children}\n          {iconEnd}\n        </RALink>\n      );\n    }\n\n    // For internal links, use RouterProvider\n    return (\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        <RALink\n          className={clsx(\n            classNames.root,\n            classNamesButtonLink.root,\n            stylesButton[classNames.root],\n            className,\n          )}\n          ref={ref}\n          {...dataAttributes}\n          href={href}\n          {...rest}\n        >\n          {iconStart}\n          {children}\n          {iconEnd}\n        </RALink>\n      </RouterProvider>\n    );\n  },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;;;;AA0BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,QAAA,EAAU;AAAA,MACvE,IAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS,SAAA;AAAA,MACT,GAAG;AAAA,KACJ,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GAAI,UAAU,YAAY,CAAA;AAEnE,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,SAAA,EAAW,SAAS,IAAA,EAAM,GAAG,MAAK,GAC7D,YAAA;AAEF,IAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAGtC,IAAA,IAAI,UAAA,EAAY;AACd,MAAA,uBACE,IAAA;AAAA,QAACA,IAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,IAAA;AAAA,YACX,oBAAA,CAAqB,IAAA;AAAA,YACrB,YAAA,CAAa,WAAW,IAAI,CAAA;AAAA,YAC5B;AAAA,WACF;AAAA,UACA,GAAA;AAAA,UACC,GAAG,cAAA;AAAA,UACJ,IAAA;AAAA,UACC,GAAG,IAAA;AAAA,UAEH,QAAA,EAAA;AAAA,YAAA,SAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA;AAAA;AAAA,OACH;AAAA,IAEJ;AAGA,IAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,IAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,IAAA;AAAA,UACX,oBAAA,CAAqB,IAAA;AAAA,UACrB,YAAA,CAAa,WAAW,IAAI,CAAA;AAAA,UAC5B;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACJ,IAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
+{"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Link as RALink, RouterProvider } from 'react-aria-components';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport type { ButtonLinkProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport stylesButton from '../Button/Button.module.css';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n  (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n    const navigate = useNavigate();\n\n    const { classNames, dataAttributes, cleanedProps } = useStyles('Button', {\n      size: 'small',\n      variant: 'primary',\n      ...props,\n    });\n\n    const { classNames: classNamesButtonLink } = useStyles('ButtonLink');\n\n    const { children, className, iconStart, iconEnd, href, ...rest } =\n      cleanedProps;\n\n    const isExternal = isExternalLink(href);\n\n    const linkButton = (\n      <RALink\n        className={clsx(\n          classNames.root,\n          classNamesButtonLink.root,\n          stylesButton[classNames.root],\n          className,\n        )}\n        ref={ref}\n        {...dataAttributes}\n        href={href}\n        {...rest}\n      >\n        <span\n          className={clsx(classNames.content, stylesButton[classNames.content])}\n        >\n          {iconStart}\n          {children}\n          {iconEnd}\n        </span>\n      </RALink>\n    );\n\n    // If it's an external link, render RALink without RouterProvider\n    if (isExternal) {\n      return linkButton;\n    }\n\n    // For internal links, use RouterProvider\n    return (\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        {linkButton}\n      </RouterProvider>\n    );\n  },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;;;;AA0BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,QAAA,EAAU;AAAA,MACvE,IAAA,EAAM,OAAA;AAAA,MACN,OAAA,EAAS,SAAA;AAAA,MACT,GAAG;AAAA,KACJ,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GAAI,UAAU,YAAY,CAAA;AAEnE,IAAA,MAAM,EAAE,UAAU,SAAA,EAAW,SAAA,EAAW,SAAS,IAAA,EAAM,GAAG,MAAK,GAC7D,YAAA;AAEF,IAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAEtC,IAAA,MAAM,UAAA,mBACJ,GAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,IAAA;AAAA,UACX,oBAAA,CAAqB,IAAA;AAAA,UACrB,YAAA,CAAa,WAAW,IAAI,CAAA;AAAA,UAC5B;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACJ,IAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEJ,QAAA,kBAAA,IAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,YAAA,CAAa,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,YAEnE,QAAA,EAAA;AAAA,cAAA,SAAA;AAAA,cACA,QAAA;AAAA,cACA;AAAA;AAAA;AAAA;AACH;AAAA,KACF;AAIF,IAAA,IAAI,UAAA,EAAY;AACd,MAAA,OAAO,UAAA;AAAA,IACT;AAGA,IAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EACjC,QAAA,EAAA,UAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}

package/dist/components/Dialog/Dialog.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  .Dialog-module_bui-DialogOverlay__5nqD5 {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: rgba(232, 232, 232, 0.8);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n  }\n\n  [data-theme='dark'] .Dialog-module_bui-Dialog__Cnu24 {\n    background: rgba(0, 0, 0, 0.5);\n  }\n\n  .Dialog-module_bui-DialogOverlay__5nqD5[data-entering] {\n    animation: Dialog-module_fade-in__17nJR 200ms ease-out forwards;\n  }\n\n  .Dialog-module_bui-DialogOverlay__5nqD5[data-exiting] {\n    animation: Dialog-module_fade-out__jMAaZ 150ms ease-out forwards;\n  }\n\n  .Dialog-module_bui-Dialog__Cnu24 {\n    background: var(--bui-bg-surface-1);\n    border-radius: 0.5rem;\n    border: 1px solid var(--bui-border);\n    color: var(--bui-fg-primary);\n    position: relative;\n    width: min(var(--bui-dialog-min-width, 400px), calc(100vw - 3rem));\n    max-width: calc(100vw - 3rem);\n    height: min(var(--bui-dialog-min-height, auto), calc(100vh - 3rem));\n    max-height: calc(100vh - 3rem);\n    display: flex;\n    flex-direction: column;\n    outline: none;\n  }\n\n  /* Dialog entering animation */\n  .Dialog-module_bui-DialogOverlay__5nqD5[data-entering] .Dialog-module_bui-Dialog__Cnu24 {\n    animation: Dialog-module_dialog-enter__3NC2w 150ms ease-out forwards;\n  }\n\n  /* Dialog exiting animation */\n  .Dialog-module_bui-DialogOverlay__5nqD5[data-exiting] .Dialog-module_bui-Dialog__Cnu24 {\n    animation: Dialog-module_dialog-exit__21RUM 150ms ease-out forwards;\n  }\n\n  .Dialog-module_bui-DialogHeader__D340y {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    border-bottom: 1px solid var(--bui-border);\n  }\n\n  .Dialog-module_bui-DialogHeaderTitle__1UEkF {\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-bold);\n    margin: 0;\n  }\n\n  .Dialog-module_bui-DialogFooter__k2SK8 {\n    display: flex;\n    align-items: center;\n    justify-content: end;\n    gap: var(--bui-space-2);\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-3);\n    border-top: 1px solid var(--bui-border);\n  }\n\n  .Dialog-module_bui-DialogBody__2olLx {\n    padding: var(--bui-space-3);\n    flex: 1;\n    overflow-y: auto;\n  }\n\n  /* Keyframe animations */\n  @keyframes Dialog-module_fade-in__17nJR {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes Dialog-module_fade-out__jMAaZ {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  @keyframes Dialog-module_dialog-enter__3NC2w {\n    from {\n      opacity: 0.5;\n      transform: scale(0.8);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  @keyframes Dialog-module_dialog-exit__21RUM {\n    from {\n      opacity: 1;\n      transform: scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: scale(0.95);\n    }\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  .Dialog-module_bui-DialogOverlay__5nqD5 {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: color-mix(in srgb, var(--bui-gray-2) 80%, transparent);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n  }\n\n  [data-theme='dark'] .Dialog-module_bui-Dialog__Cnu24 {\n    background: rgba(0, 0, 0, 0.5);\n  }\n\n  .Dialog-module_bui-DialogOverlay__5nqD5[data-entering] {\n    animation: Dialog-module_fade-in__17nJR 200ms ease-out forwards;\n  }\n\n  .Dialog-module_bui-DialogOverlay__5nqD5[data-exiting] {\n    animation: Dialog-module_fade-out__jMAaZ 150ms ease-out forwards;\n  }\n\n  .Dialog-module_bui-Dialog__Cnu24 {\n    background: var(--bui-bg-surface-1);\n    border-radius: 0.5rem;\n    border: 1px solid var(--bui-border);\n    color: var(--bui-fg-primary);\n    position: relative;\n    width: min(var(--bui-dialog-min-width, 400px), calc(100vw - 3rem));\n    max-width: calc(100vw - 3rem);\n    height: min(var(--bui-dialog-min-height, auto), calc(100vh - 3rem));\n    max-height: calc(100vh - 3rem);\n    display: flex;\n    flex-direction: column;\n    outline: none;\n  }\n\n  /* Dialog entering animation */\n  .Dialog-module_bui-DialogOverlay__5nqD5[data-entering] .Dialog-module_bui-Dialog__Cnu24 {\n    animation: Dialog-module_dialog-enter__3NC2w 150ms ease-out forwards;\n  }\n\n  /* Dialog exiting animation */\n  .Dialog-module_bui-DialogOverlay__5nqD5[data-exiting] .Dialog-module_bui-Dialog__Cnu24 {\n    animation: Dialog-module_dialog-exit__21RUM 150ms ease-out forwards;\n  }\n\n  .Dialog-module_bui-DialogHeader__D340y {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    border-bottom: 1px solid var(--bui-border);\n  }\n\n  .Dialog-module_bui-DialogHeaderTitle__1UEkF {\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-bold);\n    margin: 0;\n  }\n\n  .Dialog-module_bui-DialogFooter__k2SK8 {\n    display: flex;\n    align-items: center;\n    justify-content: end;\n    gap: var(--bui-space-2);\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-3);\n    border-top: 1px solid var(--bui-border);\n  }\n\n  .Dialog-module_bui-DialogBody__2olLx {\n    padding: var(--bui-space-3);\n    flex: 1;\n    overflow-y: auto;\n  }\n\n  /* Keyframe animations */\n  @keyframes Dialog-module_fade-in__17nJR {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes Dialog-module_fade-out__jMAaZ {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  @keyframes Dialog-module_dialog-enter__3NC2w {\n    from {\n      opacity: 0.5;\n      transform: scale(0.8);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  @keyframes Dialog-module_dialog-exit__21RUM {\n    from {\n      opacity: 1;\n      transform: scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: scale(0.95);\n    }\n  }\n}\n";
 var styles = {"bui-DialogOverlay":"Dialog-module_bui-DialogOverlay__5nqD5","bui-Dialog":"Dialog-module_bui-Dialog__Cnu24","fade-in":"Dialog-module_fade-in__17nJR","fade-out":"Dialog-module_fade-out__jMAaZ","dialog-enter":"Dialog-module_dialog-enter__3NC2w","dialog-exit":"Dialog-module_dialog-exit__21RUM","bui-DialogHeader":"Dialog-module_bui-DialogHeader__D340y","bui-DialogHeaderTitle":"Dialog-module_bui-DialogHeaderTitle__1UEkF","bui-DialogFooter":"Dialog-module_bui-DialogFooter__k2SK8","bui-DialogBody":"Dialog-module_bui-DialogBody__2olLx"};
 styleInject(css_248z);
 

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 { className, icon, title, titleLink, customActions, hasTabs } = cleanedProps;
-  let navigate = useNavigate();
   const toolbarWrapperRef = useRef(null);
   const toolbarContentRef = useRef(null);
   const toolbarControlsRef = useRef(null);
@@ -25,7 +23,7 @@ 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(
@@ -88,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 { className, icon, title, titleLink, customActions, hasTabs } =\n    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(\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    </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,SAAA,EAAW,IAAA,EAAM,OAAO,SAAA,EAAW,aAAA,EAAe,SAAQ,GAChE,YAAA;AACF,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,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,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;;;;"}

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

@@ -5,60 +5,32 @@ 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';
+import styles from './Link.module.css.esm.js';
 
 const Link = forwardRef((props, ref) => {
   const navigate = useNavigate();
-  const { classNames: classNamesLink } = useStyles("Link", props);
-  const {
-    classNames: classNamesText,
-    dataAttributes: textDataAttributes,
-    cleanedProps
-  } = useStyles("Text", {
+  const { classNames, dataAttributes, cleanedProps } = useStyles("Link", {
     variant: "body",
     weight: "regular",
     color: "primary",
     ...props
   });
-  const { className, variant, weight, color, truncate, href, ...restProps } = cleanedProps;
+  const { className, href, ...restProps } = cleanedProps;
   const isExternal = isExternalLink(href);
-  if (isExternal) {
-    return /* @__PURE__ */ jsx(
-      Link$1,
-      {
-        ref,
-        className: clsx(
-          classNamesText.root,
-          classNamesLink.root,
-          stylesText[classNamesText.root],
-          stylesLink[classNamesLink.root],
-          className
-        ),
-        "data-truncate": truncate,
-        href,
-        ...textDataAttributes,
-        ...restProps
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsx(
+  const component = /* @__PURE__ */ jsx(
     Link$1,
     {
       ref,
-      className: clsx(
-        classNamesText.root,
-        classNamesLink.root,
-        stylesText[classNamesText.root],
-        stylesLink[classNamesLink.root],
-        className
-      ),
-      "data-truncate": truncate,
-      ...textDataAttributes,
+      className: clsx(classNames.root, styles[classNames.root], className),
       href,
+      ...dataAttributes,
       ...restProps
     }
-  ) });
+  );
+  if (isExternal) {
+    return component;
+  }
+  return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: component });
 });
 Link.displayName = "Link";
 

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

@@ -1 +1 @@
-{"version":3,"file":"Link.esm.js","sources":["../../../src/components/Link/Link.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 { Link as AriaLink, RouterProvider } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport type { LinkProps } from './types';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport stylesLink from './Link.module.css';\nimport stylesText from '../Text/Text.module.css';\n\n/** @public */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n  const navigate = useNavigate();\n  const { classNames: classNamesLink } = useStyles('Link', props);\n  const {\n    classNames: classNamesText,\n    dataAttributes: textDataAttributes,\n    cleanedProps,\n  } = useStyles('Text', {\n    variant: 'body',\n    weight: 'regular',\n    color: 'primary',\n    ...props,\n  });\n  const { className, variant, weight, color, truncate, href, ...restProps } =\n    cleanedProps;\n\n  const isExternal = isExternalLink(href);\n\n  // If it's an external link, render AriaLink without RouterProvider\n  if (isExternal) {\n    return (\n      <AriaLink\n        ref={ref}\n        className={clsx(\n          classNamesText.root,\n          classNamesLink.root,\n          stylesText[classNamesText.root],\n          stylesLink[classNamesLink.root],\n          className,\n        )}\n        data-truncate={truncate}\n        href={href}\n        {...textDataAttributes}\n        {...restProps}\n      />\n    );\n  }\n\n  // For internal links, use RouterProvider\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <AriaLink\n        ref={ref}\n        className={clsx(\n          classNamesText.root,\n          classNamesLink.root,\n          stylesText[classNamesText.root],\n          stylesLink[classNamesLink.root],\n          className,\n        )}\n        data-truncate={truncate}\n        {...textDataAttributes}\n        href={href}\n        {...restProps}\n      />\n    </RouterProvider>\n  );\n});\n\nLink.displayName = 'Link';\n"],"names":["AriaLink"],"mappings":";;;;;;;;;;AA2BO,MAAM,IAAA,GAAO,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC3E,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,SAAA,CAAU,QAAQ,KAAK,CAAA;AAC9D,EAAA,MAAM;AAAA,IACJ,UAAA,EAAY,cAAA;AAAA,IACZ,cAAA,EAAgB,kBAAA;AAAA,IAChB;AAAA,GACF,GAAI,UAAU,MAAA,EAAQ;AAAA,IACpB,OAAA,EAAS,MAAA;AAAA,IACT,MAAA,EAAQ,SAAA;AAAA,IACR,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACJ,CAAA;AACD,EAAA,MAAM,EAAE,WAAW,OAAA,EAAS,MAAA,EAAQ,OAAO,QAAA,EAAU,IAAA,EAAM,GAAG,SAAA,EAAU,GACtE,YAAA;AAEF,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAGtC,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,uBACE,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA;AAAA,UACT,cAAA,CAAe,IAAA;AAAA,UACf,cAAA,CAAe,IAAA;AAAA,UACf,UAAA,CAAW,eAAe,IAAI,CAAA;AAAA,UAC9B,UAAA,CAAW,eAAe,IAAI,CAAA;AAAA,UAC9B;AAAA,SACF;AAAA,QACA,eAAA,EAAe,QAAA;AAAA,QACf,IAAA;AAAA,QACC,GAAG,kBAAA;AAAA,QACH,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AAGA,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,GAAA;AAAA,IAACA,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,cAAA,CAAe,IAAA;AAAA,QACf,cAAA,CAAe,IAAA;AAAA,QACf,UAAA,CAAW,eAAe,IAAI,CAAA;AAAA,QAC9B,UAAA,CAAW,eAAe,IAAI,CAAA;AAAA,QAC9B;AAAA,OACF;AAAA,MACA,eAAA,EAAe,QAAA;AAAA,MACd,GAAG,kBAAA;AAAA,MACJ,IAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
+{"version":3,"file":"Link.esm.js","sources":["../../../src/components/Link/Link.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 { Link as AriaLink, RouterProvider } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport type { LinkProps } from './types';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport styles from './Link.module.css';\n\n/** @public */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n  const navigate = useNavigate();\n  const { classNames, dataAttributes, cleanedProps } = useStyles('Link', {\n    variant: 'body',\n    weight: 'regular',\n    color: 'primary',\n    ...props,\n  });\n\n  const { className, href, ...restProps } = cleanedProps;\n\n  const isExternal = isExternalLink(href);\n\n  const component = (\n    <AriaLink\n      ref={ref}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      href={href}\n      {...dataAttributes}\n      {...restProps}\n    />\n  );\n\n  // If it's an external link, render AriaLink without RouterProvider\n  if (isExternal) {\n    return component;\n  }\n\n  // For internal links, use RouterProvider\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      {component}\n    </RouterProvider>\n  );\n});\n\nLink.displayName = 'Link';\n"],"names":["AriaLink"],"mappings":";;;;;;;;;AA0BO,MAAM,IAAA,GAAO,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC3E,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,MAAA,EAAQ;AAAA,IACrE,OAAA,EAAS,MAAA;AAAA,IACT,MAAA,EAAQ,SAAA;AAAA,IACR,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,IAAA,EAAM,GAAG,WAAU,GAAI,YAAA;AAE1C,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAEtC,EAAA,MAAM,SAAA,mBACJ,GAAA;AAAA,IAACA,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MACnE,IAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAIF,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,OAAO,SAAA;AAAA,EACT;AAGA,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EACjC,QAAA,EAAA,SAAA,EACH,CAAA;AAEJ,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}

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

@@ -1,8 +1,8 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Link-module_bui-Link__3bbuU {\n    font-family: var(--bui-font-regular);\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    text-decoration-line: none;\n    display: inline-block;\n\n    &:hover {\n      text-decoration-line: underline;\n      text-decoration-style: solid;\n      text-decoration-thickness: min(2px, max(1px, 0.05em));\n      text-underline-offset: calc(0.025em + 2px);\n      text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);\n    }\n  }\n}\n";
-var stylesLink = {"bui-Link":"Link-module_bui-Link__3bbuU"};
+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  .Link-module_bui-Link__3bbuU {\n    font-family: var(--bui-font-regular);\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    text-decoration-line: none;\n    display: inline-block;\n\n    &:hover {\n      text-decoration-line: underline;\n      text-decoration-style: solid;\n      text-decoration-thickness: min(2px, max(1px, 0.05em));\n      text-underline-offset: calc(0.025em + 2px);\n      text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);\n    }\n  }\n\n  .Link-module_bui-Link__3bbuU[data-variant='title-large'] {\n    font-size: var(--bui-font-size-8);\n    line-height: 140%;\n  }\n\n  .Link-module_bui-Link__3bbuU[data-variant='title-medium'] {\n    font-size: var(--bui-font-size-7);\n    line-height: 140%;\n  }\n\n  .Link-module_bui-Link__3bbuU[data-variant='title-small'] {\n    font-size: var(--bui-font-size-6);\n    line-height: 140%;\n  }\n\n  .Link-module_bui-Link__3bbuU[data-variant='title-x-small'] {\n    font-size: var(--bui-font-size-5);\n    line-height: 140%;\n  }\n\n  .Link-module_bui-Link__3bbuU[data-variant='body-large'] {\n    font-size: var(--bui-font-size-4);\n    line-height: 140%;\n  }\n\n  .Link-module_bui-Link__3bbuU[data-variant='body-medium'] {\n    font-size: var(--bui-font-size-3);\n    line-height: 140%;\n  }\n\n  .Link-module_bui-Link__3bbuU[data-variant='body-small'] {\n    font-size: var(--bui-font-size-2);\n    line-height: 140%;\n  }\n\n  .Link-module_bui-Link__3bbuU[data-variant='body-x-small'] {\n    font-size: var(--bui-font-size-1);\n    line-height: 140%;\n  }\n\n  .Link-module_bui-Link__3bbuU[data-weight='regular'] {\n    font-weight: var(--bui-font-weight-regular);\n  }\n\n  .Link-module_bui-Link__3bbuU[data-weight='bold'] {\n    font-weight: var(--bui-font-weight-bold);\n  }\n\n  .Link-module_bui-Link__3bbuU[data-color='primary'] {\n    color: var(--bui-fg-primary);\n  }\n\n  .Link-module_bui-Link__3bbuU[data-color='secondary'] {\n    color: var(--bui-fg-secondary);\n  }\n\n  .Link-module_bui-Link__3bbuU[data-color='danger'] {\n    color: var(--bui-fg-danger);\n  }\n\n  .Link-module_bui-Link__3bbuU[data-color='warning'] {\n    color: var(--bui-fg-warning);\n  }\n\n  .Link-module_bui-Link__3bbuU[data-color='success'] {\n    color: var(--bui-fg-success);\n  }\n\n  .Link-module_bui-Link__3bbuU[data-truncate] {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n}\n";
+var styles = {"bui-Link":"Link-module_bui-Link__3bbuU"};
 styleInject(css_248z);
 
-export { stylesLink as default };
+export { styles as default };
 //# sourceMappingURL=Link.module.css.esm.js.map

package/dist/components/Menu/Menu.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  .Menu-module_bui-MenuPopover__2_pRD {\n    display: flex;\n    flex-direction: column;\n    border: 1px solid var(--bui-border);\n    border-radius: var(--bui-radius-2);\n    background: var(--bui-bg-surface-1);\n    color: var(--bui-fg-primary);\n    outline: none;\n    transition: transform 200ms, opacity 200ms;\n    /* Let React Aria handle height constraints naturally */\n    min-height: 0;\n    /* Remove overflow from popover since ScrollArea will handle it */\n    overflow: hidden;\n\n    &[data-entering],\n    &[data-exiting] {\n      transform: var(--origin);\n      opacity: 0;\n    }\n\n    &[data-placement='top'] {\n      --origin: translateY(8px);\n    }\n\n    &[data-placement='bottom'] {\n      --origin: translateY(-8px);\n    }\n\n    &[data-placement='right'] {\n      --origin: translateX(-8px);\n    }\n\n    &[data-placement='left'] {\n      --origin: translateX(8px);\n    }\n  }\n\n  .Menu-module_bui-MenuContent__3DAPp {\n    max-height: inherit;\n    box-sizing: border-box;\n    overflow: auto;\n    min-width: 150px;\n    box-sizing: border-box;\n    outline: none;\n    padding-block: var(--bui-space-1);\n  }\n\n  .Menu-module_bui-MenuItem__2UbNh {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &[data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-open] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-color='danger'] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-color='danger'][data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-danger);\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-has-submenu] {\n      & > .Menu-module_bui-MenuItemWrapper__3SEGE > .Menu-module_bui-MenuItemArrow__2Gdal {\n        display: block;\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuItemWrapper__3SEGE {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    height: 2rem;\n    padding-inline: var(--bui-space-2);\n    border-radius: var(--bui-radius-2);\n    outline: none;\n    cursor: default;\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-3);\n    gap: var(--bui-space-6);\n  }\n\n  .Menu-module_bui-MenuItemListBox__3OVkY {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &:hover .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-selected] .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n      & > svg {\n        opacity: 1;\n        color: var(--bui-fg-primary);\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      opacity: 0;\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuItemContent__2jc-_ {\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuItemArrow__2Gdal {\n    display: none;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuSection__3OeyZ {\n    &:first-child .Menu-module_bui-MenuSectionHeader__yFmfK {\n      padding-top: 0;\n    }\n  }\n\n  .Menu-module_bui-MenuSectionHeader__yFmfK {\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    padding-top: var(--bui-space-3);\n    padding-left: var(--bui-space-3);\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-1);\n    font-weight: bold;\n    letter-spacing: 0.05rem;\n    text-transform: uppercase;\n  }\n\n  .Menu-module_bui-MenuSeparator__-EtU8 {\n    height: 1px;\n    background: var(--bui-border);\n    margin-inline: var(--bui-space-1_5);\n    margin-block: var(--bui-space-1);\n  }\n\n  .Menu-module_bui-MenuSearchField__1sNMj {\n    position: relative;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n\n    &[data-empty] {\n      .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n        display: none;\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuSearchFieldInput__2jPs5 {\n    display: flex;\n    align-items: center;\n    padding: 0 var(--bui-space-3);\n    border: none;\n    border-bottom: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\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    width: 100%;\n    height: 2rem;\n    cursor: inherit;\n    outline: none;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n  }\n\n  .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n    position: absolute;\n    right: var(--bui-space-2);\n    top: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuEmptyState__wPwuq {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    color: var(--bui-fg-secondary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\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  .Menu-module_bui-MenuPopover__2_pRD {\n    display: flex;\n    flex-direction: column;\n    border: 1px solid var(--bui-border);\n    border-radius: var(--bui-radius-2);\n    background: var(--bui-bg-surface-1);\n    color: var(--bui-fg-primary);\n    outline: none;\n    transition: transform 200ms, opacity 200ms;\n    /* Let React Aria handle height constraints naturally */\n    min-height: 0;\n    /* Remove overflow from popover since ScrollArea will handle it */\n    overflow: hidden;\n\n    &[data-entering],\n    &[data-exiting] {\n      transform: var(--origin);\n      opacity: 0;\n    }\n\n    &[data-placement='top'] {\n      --origin: translateY(8px);\n    }\n\n    &[data-placement='bottom'] {\n      --origin: translateY(-8px);\n    }\n\n    &[data-placement='right'] {\n      --origin: translateX(-8px);\n    }\n\n    &[data-placement='left'] {\n      --origin: translateX(8px);\n    }\n  }\n\n  .Menu-module_bui-MenuContent__3DAPp {\n    max-height: inherit;\n    box-sizing: border-box;\n    overflow: auto;\n    min-width: 150px;\n    box-sizing: border-box;\n    outline: none;\n    padding-block: var(--bui-space-1);\n  }\n\n  .Menu-module_bui-MenuItem__2UbNh {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &[data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-open] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-color='danger'] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-color='danger'][data-focused] .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-danger);\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-has-submenu] {\n      & > .Menu-module_bui-MenuItemWrapper__3SEGE > .Menu-module_bui-MenuItemArrow__2Gdal {\n        display: block;\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuItemWrapper__3SEGE {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    height: 2rem;\n    padding-inline: var(--bui-space-2);\n    border-radius: var(--bui-radius-2);\n    outline: none;\n    cursor: default;\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-3);\n    gap: var(--bui-space-6);\n  }\n\n  .Menu-module_bui-MenuItemListBox__3OVkY {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &:hover .Menu-module_bui-MenuItemWrapper__3SEGE {\n      background: var(--bui-bg-surface-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-selected] .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n      & > svg {\n        opacity: 1;\n        color: var(--bui-fg-primary);\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuItemListBoxCheck__3flwX {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      opacity: 0;\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuItemContent__2jc-_ {\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuItemArrow__2Gdal {\n    display: none;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuSection__3OeyZ {\n    &:first-child .Menu-module_bui-MenuSectionHeader__yFmfK {\n      padding-top: 0;\n    }\n  }\n\n  .Menu-module_bui-MenuSectionHeader__yFmfK {\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    padding-top: var(--bui-space-3);\n    padding-left: var(--bui-space-3);\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-1);\n    font-weight: bold;\n    letter-spacing: 0.05rem;\n    text-transform: uppercase;\n  }\n\n  .Menu-module_bui-MenuSeparator__-EtU8 {\n    height: 1px;\n    background: var(--bui-border);\n    margin-inline: var(--bui-space-1_5);\n    margin-block: var(--bui-space-1);\n  }\n\n  .Menu-module_bui-MenuSearchField__1sNMj {\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\n    height: 2rem;\n\n    &[data-empty] {\n      .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n        visibility: hidden;\n      }\n    }\n  }\n\n  .Menu-module_bui-MenuSearchFieldInput__2jPs5 {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0;\n    border: none;\n    background-color: transparent;\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    width: 100%;\n    height: 100%;\n    outline: none;\n    cursor: inherit;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &:first-child {\n      padding-inline: var(--bui-space-3) 0;\n    }\n  }\n\n  .Menu-module_bui-MenuSearchFieldClear__3bwIe {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n    width: 2rem;\n    height: 2rem;\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu-module_bui-MenuEmptyState__wPwuq {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    color: var(--bui-fg-secondary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n  }\n}\n";
 var styles = {"bui-MenuPopover":"Menu-module_bui-MenuPopover__2_pRD","bui-MenuContent":"Menu-module_bui-MenuContent__3DAPp","bui-MenuItem":"Menu-module_bui-MenuItem__2UbNh","bui-MenuItemWrapper":"Menu-module_bui-MenuItemWrapper__3SEGE","bui-MenuItemArrow":"Menu-module_bui-MenuItemArrow__2Gdal","bui-MenuItemListBox":"Menu-module_bui-MenuItemListBox__3OVkY","bui-MenuItemListBoxCheck":"Menu-module_bui-MenuItemListBoxCheck__3flwX","bui-MenuItemContent":"Menu-module_bui-MenuItemContent__2jc-_","bui-MenuSection":"Menu-module_bui-MenuSection__3OeyZ","bui-MenuSectionHeader":"Menu-module_bui-MenuSectionHeader__yFmfK","bui-MenuSeparator":"Menu-module_bui-MenuSeparator__-EtU8","bui-MenuSearchField":"Menu-module_bui-MenuSearchField__1sNMj","bui-MenuSearchFieldClear":"Menu-module_bui-MenuSearchFieldClear__3bwIe","bui-MenuSearchFieldInput":"Menu-module_bui-MenuSearchFieldInput__2jPs5","bui-MenuEmptyState":"Menu-module_bui-MenuEmptyState__wPwuq"};
 styleInject(css_248z);
 

package/dist/components/Popover/Popover.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  .Popover-module_bui-Popover__100-n {\n    margin-right: 12px;\n    overflow: scroll;\n    background-color: var(--bui-bg-surface-1);\n    border: 1px solid var(--bui-border);\n    border-radius: var(--bui-radius-3);\n    padding-block: var(--bui-space-1);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\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  .Popover-module_bui-Popover__100-n {\n    margin-right: 12px;\n    overflow-x: hidden;\n    overflow-y: auto;\n    background-color: var(--bui-bg-surface-1);\n    border: 1px solid var(--bui-border);\n    border-radius: var(--bui-radius-3);\n    padding-block: var(--bui-space-1);\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n  }\n}\n";
 var stylesPopover = {"bui-Popover":"Popover-module_bui-Popover__100-n"};
 styleInject(css_248z);
 

package/dist/components/RadioGroup/RadioGroup.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  .RadioGroup-module_bui-RadioGroup__v70Qu {\n    display: flex;\n    flex-direction: column;\n    color: var(--bui-fg-primary);\n  }\n\n  .RadioGroup-module_bui-RadioGroup__v70Qu[data-orientation='horizontal'] .RadioGroup-module_bui-RadioGroupContent__1rG0a {\n    flex-direction: row;\n    gap: var(--bui-space-4);\n  }\n\n  .RadioGroup-module_bui-RadioGroupContent__1rG0a {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-2);\n  }\n\n  .RadioGroup-module_bui-Radio__1769d {\n    display: flex;\n    /* This is needed so the HiddenInput is positioned correctly */\n    position: relative;\n    align-items: center;\n    gap: var(--bui-space-2);\n    font-size: var(--bui-font-size-2);\n    color: var(--bui-fg-primary);\n    forced-color-adjust: none;\n\n    &:before {\n      content: '';\n      display: block;\n      width: 1rem;\n      height: 1rem;\n      box-sizing: border-box;\n      border: 0.125rem solid var(--bui-border);\n      background: var(--bui-gray-1);\n      border-radius: var(--bui-radius-full);\n      transition: all 200ms;\n    }\n\n    &[data-pressed]:before {\n      border-color: var(--bui-border);\n    }\n\n    &[data-selected] {\n      &:before {\n        border-color: var(--bui-bg-solid);\n        border-width: 0.25rem;\n      }\n\n      &[data-pressed]:before {\n        border-color: var(--bui-bg-solid);\n      }\n    }\n\n    &[data-focus-visible]:before {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n\n      &:before {\n        border-color: var(--bui-border-disabled);\n        background: var(--bui-bg-disabled);\n      }\n\n      &[data-selected]:before {\n        border-color: var(--bui-border-disabled);\n      }\n    }\n\n    &[data-invalid]:before {\n      border-color: var(--bui-border-danger);\n    }\n\n    &[data-invalid][data-selected]:before {\n      border-color: var(--bui-border-danger);\n    }\n\n    /* Ensure disabled state prevails over invalid state */\n    &[data-disabled][data-invalid] {\n      color: var(--bui-fg-disabled);\n\n      &:before {\n        border-color: var(--bui-border-disabled);\n        background: var(--bui-bg-disabled);\n      }\n\n      &[data-selected]:before {\n        border-color: var(--bui-border-disabled);\n      }\n    }\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  .RadioGroup-module_bui-RadioGroup__v70Qu {\n    display: flex;\n    flex-direction: column;\n    color: var(--bui-fg-primary);\n  }\n\n  .RadioGroup-module_bui-RadioGroup__v70Qu[data-orientation='horizontal'] .RadioGroup-module_bui-RadioGroupContent__1rG0a {\n    flex-direction: row;\n    gap: var(--bui-space-4);\n  }\n\n  .RadioGroup-module_bui-RadioGroupContent__1rG0a {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-2);\n  }\n\n  .RadioGroup-module_bui-Radio__1769d {\n    display: flex;\n    /* This is needed so the HiddenInput is positioned correctly */\n    position: relative;\n    align-items: center;\n    gap: var(--bui-space-2);\n    font-size: var(--bui-font-size-2);\n    color: var(--bui-fg-primary);\n    forced-color-adjust: none;\n\n    &:before {\n      content: '';\n      display: block;\n      width: 1rem;\n      height: 1rem;\n      box-sizing: border-box;\n      border: 0.125rem solid var(--bui-border);\n      background: var(--bui-gray-1);\n      border-radius: var(--bui-radius-full);\n      transition: all 200ms;\n      flex-shrink: 0;\n      flex-grow: 0;\n    }\n\n    &[data-pressed]:before {\n      border-color: var(--bui-border);\n    }\n\n    &[data-selected] {\n      &:before {\n        border-color: var(--bui-bg-solid);\n        border-width: 0.25rem;\n      }\n\n      &[data-pressed]:before {\n        border-color: var(--bui-bg-solid);\n      }\n    }\n\n    &[data-focus-visible]:before {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n\n      &:before {\n        border-color: var(--bui-border-disabled);\n        background: var(--bui-bg-disabled);\n      }\n\n      &[data-selected]:before {\n        border-color: var(--bui-border-disabled);\n      }\n    }\n\n    &[data-invalid]:before {\n      border-color: var(--bui-border-danger);\n    }\n\n    &[data-invalid][data-selected]:before {\n      border-color: var(--bui-border-danger);\n    }\n\n    /* Ensure disabled state prevails over invalid state */\n    &[data-disabled][data-invalid] {\n      color: var(--bui-fg-disabled);\n\n      &:before {\n        border-color: var(--bui-border-disabled);\n        background: var(--bui-bg-disabled);\n      }\n\n      &[data-selected]:before {\n        border-color: var(--bui-border-disabled);\n      }\n    }\n  }\n}\n";
 var styles = {"bui-RadioGroup":"RadioGroup-module_bui-RadioGroup__v70Qu","bui-RadioGroupContent":"RadioGroup-module_bui-RadioGroupContent__1rG0a","bui-Radio":"RadioGroup-module_bui-Radio__1769d"};
 styleInject(css_248z);
 

package/dist/components/SearchField/SearchField.esm.js

@@ -6,8 +6,7 @@ import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
 import { FieldError } from '../FieldError/FieldError.esm.js';
 import { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';
 import { useStyles } from '../../hooks/useStyles.esm.js';
-import stylesSearchField from './SearchField.module.css.esm.js';
-import stylesTextField from '../TextField/TextField.module.css.esm.js';
+import styles from './SearchField.module.css.esm.js';
 
 const SearchField = forwardRef(
   (props, ref) => {
@@ -25,18 +24,15 @@ const SearchField = forwardRef(
         );
       }
     }, [label, ariaLabel, ariaLabelledBy]);
-    const { classNames: textFieldClassNames } = useStyles("TextField");
-    const {
-      classNames: searchFieldClassNames,
-      dataAttributes,
-      style,
-      cleanedProps
-    } = useStyles("SearchField", {
-      size: "small",
-      placeholder: "Search",
-      startCollapsed: false,
-      ...props
-    });
+    const { classNames, dataAttributes, style, cleanedProps } = useStyles(
+      "SearchField",
+      {
+        size: "small",
+        placeholder: "Search",
+        startCollapsed: false,
+        ...props
+      }
+    );
     const {
       className,
       description,
@@ -69,13 +65,7 @@ const SearchField = forwardRef(
     return /* @__PURE__ */ jsxs(
       SearchField$1,
       {
-        className: clsx(
-          textFieldClassNames.root,
-          searchFieldClassNames.root,
-          stylesTextField[textFieldClassNames.root],
-          stylesSearchField[searchFieldClassNames.root],
-          className
-        ),
+        className: clsx(classNames.root, styles[classNames.root], className),
         ...dataAttributes,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
@@ -98,8 +88,8 @@ const SearchField = forwardRef(
             "div",
             {
               className: clsx(
-                textFieldClassNames.inputWrapper,
-                stylesTextField[textFieldClassNames.inputWrapper]
+                classNames.inputWrapper,
+                styles[classNames.inputWrapper]
               ),
               "data-size": dataAttributes["data-size"],
               children: [
@@ -107,8 +97,8 @@ const SearchField = forwardRef(
                   "div",
                   {
                     className: clsx(
-                      textFieldClassNames.inputIcon,
-                      stylesTextField[textFieldClassNames.inputIcon]
+                      classNames.inputIcon,
+                      styles[classNames.inputIcon]
                     ),
                     "data-size": dataAttributes["data-size"],
                     "aria-hidden": "true",
@@ -118,10 +108,7 @@ const SearchField = forwardRef(
                 /* @__PURE__ */ jsx(
                   Input,
                   {
-                    className: clsx(
-                      textFieldClassNames.input,
-                      stylesTextField[textFieldClassNames.input]
-                    ),
+                    className: clsx(classNames.input, styles[classNames.input]),
                     ...icon !== false && { "data-icon": true },
                     placeholder
                   }
@@ -129,10 +116,7 @@ const SearchField = forwardRef(
                 /* @__PURE__ */ jsx(
                   Button,
                   {
-                    className: clsx(
-                      searchFieldClassNames.clear,
-                      stylesSearchField[searchFieldClassNames.clear]
-                    ),
+                    className: clsx(classNames.clear, styles[classNames.clear]),
                     "data-size": dataAttributes["data-size"],
                     children: /* @__PURE__ */ jsx(RiCloseCircleLine, {})
                   }

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.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, useEffect, useState } from 'react';\nimport {\n  Input,\n  SearchField as AriaSearchField,\n  Button,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useStyles } from '../../hooks/useStyles';\nimport stylesSearchField from './SearchField.module.css';\nimport stylesTextField from '../TextField/TextField.module.css';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n  (props, ref) => {\n    const {\n      label,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n    } = props;\n\n    const [isCollapsed, setIsCollapsed] = useState(false);\n    const [shouldCollapse, setShouldCollapse] = useState(true);\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const { classNames: textFieldClassNames } = useStyles('TextField');\n\n    const {\n      classNames: searchFieldClassNames,\n      dataAttributes,\n      style,\n      cleanedProps,\n    } = useStyles('SearchField', {\n      size: 'small',\n      placeholder: 'Search',\n      startCollapsed: false,\n      ...props,\n    });\n\n    const {\n      className,\n      description,\n      icon,\n      isRequired,\n      secondaryLabel,\n      placeholder,\n      startCollapsed,\n      ...rest\n    } = cleanedProps;\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    const handleClick = (isFocused: boolean) => {\n      props.onFocusChange?.(isFocused);\n      if (shouldCollapse) {\n        if (isFocused) {\n          setIsCollapsed(true);\n        } else {\n          setIsCollapsed(false);\n        }\n      }\n    };\n\n    const handleChange = (value: string) => {\n      props.onChange?.(value);\n      if (value.length > 0) {\n        setShouldCollapse(false);\n      } else {\n        setShouldCollapse(true);\n      }\n    };\n\n    return (\n      <AriaSearchField\n        className={clsx(\n          textFieldClassNames.root,\n          searchFieldClassNames.root,\n          stylesTextField[textFieldClassNames.root],\n          stylesSearchField[searchFieldClassNames.root],\n          className,\n        )}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        data-collapsed={isCollapsed}\n        onFocusChange={handleClick}\n        onChange={handleChange}\n        style={style}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={clsx(\n            textFieldClassNames.inputWrapper,\n            stylesTextField[textFieldClassNames.inputWrapper],\n          )}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon !== false && (\n            <div\n              className={clsx(\n                textFieldClassNames.inputIcon,\n                stylesTextField[textFieldClassNames.inputIcon],\n              )}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon || <RiSearch2Line />}\n            </div>\n          )}\n          <Input\n            className={clsx(\n              textFieldClassNames.input,\n              stylesTextField[textFieldClassNames.input],\n            )}\n            {...(icon !== false && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n          <Button\n            className={clsx(\n              searchFieldClassNames.clear,\n              stylesSearchField[searchFieldClassNames.clear],\n            )}\n            data-size={dataAttributes['data-size']}\n          >\n            <RiCloseCircleLine />\n          </Button>\n        </div>\n        <FieldError />\n      </AriaSearchField>\n    );\n  },\n);\n\nSearchField.displayName = 'searchField';\n"],"names":["AriaSearchField"],"mappings":";;;;;;;;;;;AAiCO,MAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM;AAAA,MACJ,KAAA;AAAA,MACA,YAAA,EAAc,SAAA;AAAA,MACd,iBAAA,EAAmB;AAAA,KACrB,GAAI,KAAA;AAEJ,IAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,KAAK,CAAA;AACpD,IAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAS,IAAI,CAAA;AAEzD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC3C,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,EAAW,cAAc,CAAC,CAAA;AAErC,IAAA,MAAM,EAAE,UAAA,EAAY,mBAAA,EAAoB,GAAI,UAAU,WAAW,CAAA;AAEjE,IAAA,MAAM;AAAA,MACJ,UAAA,EAAY,qBAAA;AAAA,MACZ,cAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,KACF,GAAI,UAAU,aAAA,EAAe;AAAA,MAC3B,IAAA,EAAM,OAAA;AAAA,MACN,WAAA,EAAa,QAAA;AAAA,MACb,cAAA,EAAgB,KAAA;AAAA,MAChB,GAAG;AAAA,KACJ,CAAA;AAED,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,cAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,YAAA;AAGJ,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAE/C,IAAA,MAAM,WAAA,GAAc,CAAC,SAAA,KAAuB;AAC1C,MAAA,KAAA,CAAM,gBAAgB,SAAS,CAAA;AAC/B,MAAA,IAAI,cAAA,EAAgB;AAClB,QAAA,IAAI,SAAA,EAAW;AACb,UAAA,cAAA,CAAe,IAAI,CAAA;AAAA,QACrB,CAAA,MAAO;AACL,UAAA,cAAA,CAAe,KAAK,CAAA;AAAA,QACtB;AAAA,MACF;AAAA,IACF,CAAA;AAEA,IAAA,MAAM,YAAA,GAAe,CAAC,KAAA,KAAkB;AACtC,MAAA,KAAA,CAAM,WAAW,KAAK,CAAA;AACtB,MAAA,IAAI,KAAA,CAAM,SAAS,CAAA,EAAG;AACpB,QAAA,iBAAA,CAAkB,KAAK,CAAA;AAAA,MACzB,CAAA,MAAO;AACL,QAAA,iBAAA,CAAkB,IAAI,CAAA;AAAA,MACxB;AAAA,IACF,CAAA;AAEA,IAAA,uBACE,IAAA;AAAA,MAACA,aAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,mBAAA,CAAoB,IAAA;AAAA,UACpB,qBAAA,CAAsB,IAAA;AAAA,UACtB,eAAA,CAAgB,oBAAoB,IAAI,CAAA;AAAA,UACxC,iBAAA,CAAkB,sBAAsB,IAAI,CAAA;AAAA,UAC5C;AAAA,SACF;AAAA,QACC,GAAG,cAAA;AAAA,QACJ,YAAA,EAAY,SAAA;AAAA,QACZ,iBAAA,EAAiB,cAAA;AAAA,QACjB,gBAAA,EAAgB,WAAA;AAAA,QAChB,aAAA,EAAe,WAAA;AAAA,QACf,QAAA,EAAU,YAAA;AAAA,QACV,KAAA;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAA,EAAgB,kBAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BACA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,mBAAA,CAAoB,YAAA;AAAA,gBACpB,eAAA,CAAgB,oBAAoB,YAAY;AAAA,eAClD;AAAA,cACA,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,cAEpC,QAAA,EAAA;AAAA,gBAAA,IAAA,KAAS,KAAA,oBACR,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,IAAA;AAAA,sBACT,mBAAA,CAAoB,SAAA;AAAA,sBACpB,eAAA,CAAgB,oBAAoB,SAAS;AAAA,qBAC/C;AAAA,oBACA,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBACrC,aAAA,EAAY,MAAA;AAAA,oBAEX,QAAA,EAAA,IAAA,wBAAS,aAAA,EAAA,EAAc;AAAA;AAAA,iBAC1B;AAAA,gCAEF,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,IAAA;AAAA,sBACT,mBAAA,CAAoB,KAAA;AAAA,sBACpB,eAAA,CAAgB,oBAAoB,KAAK;AAAA,qBAC3C;AAAA,oBACC,GAAI,IAAA,KAAS,KAAA,IAAS,EAAE,aAAa,IAAA,EAAK;AAAA,oBAC3C;AAAA;AAAA,iBACF;AAAA,gCACA,GAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,IAAA;AAAA,sBACT,qBAAA,CAAsB,KAAA;AAAA,sBACtB,iBAAA,CAAkB,sBAAsB,KAAK;AAAA,qBAC/C;AAAA,oBACA,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBAErC,8BAAC,iBAAA,EAAA,EAAkB;AAAA;AAAA;AACrB;AAAA;AAAA,WACF;AAAA,8BACC,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;;;;"}
+{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.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, useEffect, useState } from 'react';\nimport {\n  Input,\n  SearchField as AriaSearchField,\n  Button,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './SearchField.module.css';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n  (props, ref) => {\n    const {\n      label,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n    } = props;\n\n    const [isCollapsed, setIsCollapsed] = useState(false);\n    const [shouldCollapse, setShouldCollapse] = useState(true);\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const { classNames, dataAttributes, style, cleanedProps } = useStyles(\n      'SearchField',\n      {\n        size: 'small',\n        placeholder: 'Search',\n        startCollapsed: false,\n        ...props,\n      },\n    );\n\n    const {\n      className,\n      description,\n      icon,\n      isRequired,\n      secondaryLabel,\n      placeholder,\n      startCollapsed,\n      ...rest\n    } = cleanedProps;\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    const handleClick = (isFocused: boolean) => {\n      props.onFocusChange?.(isFocused);\n      if (shouldCollapse) {\n        if (isFocused) {\n          setIsCollapsed(true);\n        } else {\n          setIsCollapsed(false);\n        }\n      }\n    };\n\n    const handleChange = (value: string) => {\n      props.onChange?.(value);\n      if (value.length > 0) {\n        setShouldCollapse(false);\n      } else {\n        setShouldCollapse(true);\n      }\n    };\n\n    return (\n      <AriaSearchField\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        data-collapsed={isCollapsed}\n        onFocusChange={handleClick}\n        onChange={handleChange}\n        style={style}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={clsx(\n            classNames.inputWrapper,\n            styles[classNames.inputWrapper],\n          )}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon !== false && (\n            <div\n              className={clsx(\n                classNames.inputIcon,\n                styles[classNames.inputIcon],\n              )}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon || <RiSearch2Line />}\n            </div>\n          )}\n          <Input\n            className={clsx(classNames.input, styles[classNames.input])}\n            {...(icon !== false && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n          <Button\n            className={clsx(classNames.clear, styles[classNames.clear])}\n            data-size={dataAttributes['data-size']}\n          >\n            <RiCloseCircleLine />\n          </Button>\n        </div>\n        <FieldError />\n      </AriaSearchField>\n    );\n  },\n);\n\nSearchField.displayName = 'searchField';\n"],"names":["AriaSearchField"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .SearchField-module_bui-SearchField__2TyT_ {\n    flex: 1;\n    flex-shrink: 0;\n\n    &[data-empty] {\n      .SearchField-module_bui-InputClear__JCu80 {\n        display: none;\n      }\n    }\n\n    &[data-startCollapsed='true'] {\n      transition: flex-basis 0.3s ease-in-out;\n      padding: 0;\n      flex: 0 1 auto;\n\n      &[data-collapsed='true'] {\n        flex-basis: 200px;\n      }\n\n      &[data-collapsed='false'] {\n        cursor: pointer;\n\n        &[data-size='medium'] {\n          flex-basis: 2.5rem;\n          height: 2.5rem;\n        }\n\n        &[data-size='small'] {\n          flex-basis: 2rem;\n          height: 2rem;\n        }\n\n        &[data-size='medium'] .SearchField-module_bui-Input__FcOCK {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        &[data-size='small'] .SearchField-module_bui-Input__FcOCK {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        .SearchField-module_bui-InputWrapper__2WERV {\n          .SearchField-module_bui-Input__FcOCK[data-icon] {\n            padding-right: 0px;\n          }\n        }\n      }\n    }\n  }\n\n  .SearchField-module_bui-SearchField__2TyT_ .SearchField-module_bui-Input__FcOCK {\n    transition: padding 0.3s ease-in-out, border-color 0.2s ease-in-out,\n      outline-color 0.2s ease-in-out;\n\n    &[data-hovered] {\n      border-color: var(--bui-border-hover);\n    }\n\n    &[data-focused] {\n      border-color: var(--bui-border-pressed);\n      outline-width: 0px;\n    }\n  }\n\n  .SearchField-module_bui-SearchField__2TyT_ .SearchField-module_bui-InputWrapper__2WERV {\n    .SearchField-module_bui-Input__FcOCK[data-icon] {\n      padding-right: var(--bui-space-6);\n    }\n  }\n\n  .SearchField-module_bui-SearchField__2TyT_ .SearchField-module_bui-InputIcon__37FbR {\n    left: 0;\n    display: flex;\n    justify-content: center;\n\n    &[data-size='small'] {\n      width: var(--bui-space-8);\n    }\n\n    &[data-size='medium'] {\n      width: var(--bui-space-10);\n    }\n  }\n\n  .SearchField-module_bui-InputClear__JCu80 {\n    position: absolute;\n    right: 0;\n    top: 0;\n    bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n  }\n\n  .SearchField-module_bui-InputClear__JCu80:hover {\n    color: var(--bui-fg-primary);\n  }\n\n  .SearchField-module_bui-InputClear__JCu80[data-size='small'] {\n    width: 2rem;\n    height: 2rem;\n  }\n\n  .SearchField-module_bui-InputClear__JCu80[data-size='medium'] {\n    width: 2.5rem;\n    height: 2.5rem;\n  }\n\n  .SearchField-module_bui-InputClear__JCu80 svg {\n    width: 1rem;\n    height: 1rem;\n  }\n}\n";
-var stylesSearchField = {"bui-SearchField":"SearchField-module_bui-SearchField__2TyT_","bui-InputClear":"SearchField-module_bui-InputClear__JCu80","bui-Input":"SearchField-module_bui-Input__FcOCK","bui-InputWrapper":"SearchField-module_bui-InputWrapper__2WERV","bui-InputIcon":"SearchField-module_bui-InputIcon__37FbR"};
+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  .SearchField-module_bui-SearchField__2TyT_ {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex: 1;\n    flex-shrink: 0;\n\n    &[data-size='small'] {\n      --search-field-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --search-field-item-height: 2.5rem;\n    }\n\n    &[data-empty] {\n      .SearchField-module_bui-SearchFieldClear__1gJQc {\n        display: none;\n      }\n    }\n\n    &[data-startCollapsed='true'] {\n      transition: flex-basis 0.3s ease-in-out;\n      padding: 0;\n      flex: 0 1 auto;\n\n      &[data-collapsed='true'] {\n        flex-basis: 200px;\n      }\n\n      &[data-collapsed='false'] {\n        cursor: pointer;\n\n        &[data-size='medium'] {\n          flex-basis: 2.5rem;\n          height: 2.5rem;\n        }\n\n        &[data-size='small'] {\n          flex-basis: 2rem;\n          height: 2rem;\n        }\n\n        &[data-size='medium'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        &[data-size='small'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        .SearchField-module_bui-SearchFieldInputWrapper__1JEG8 {\n          .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n            padding-right: 0px;\n          }\n        }\n      }\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldInputWrapper__1JEG8 {\n    display: flex;\n    align-items: center;\n    border-radius: var(--bui-radius-2);\n    border: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\n    transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n\n    &[data-size='small'] {\n      height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      height: 2.5rem;\n    }\n\n    &:focus-within {\n      border-color: var(--bui-border-pressed);\n      outline-width: 0px;\n    }\n\n    &:hover {\n      border-color: var(--bui-border-hover);\n    }\n\n    &[data-invalid] {\n      border-color: var(--bui-fg-danger);\n    }\n\n    &[data-disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n      border: 1px solid var(--bui-border-disabled);\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldInputIcon__EA0t9 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    color: var(--bui-fg-primary);\n    pointer-events: none;\n    width: var(--search-field-item-height);\n    height: var(--search-field-item-height);\n    /* To animate the icon when the input is collapsed */\n    transition: opacity 0.2s ease-in-out;\n\n    & svg {\n      .SearchField-module_bui-SearchField__2TyT_[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .SearchField-module_bui-SearchField__2TyT_[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldInput__3Opoj {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0;\n    border: none;\n    background-color: transparent;\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    transition: padding 0.3s ease-in-out;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    cursor: inherit;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n\n    &:first-child {\n      .SearchField-module_bui-SearchField__2TyT_[data-size='small'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n\n      .SearchField-module_bui-SearchField__2TyT_[data-size='medium'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n    }\n  }\n\n  .SearchField-module_bui-SearchFieldClear__1gJQc {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n    width: var(--search-field-item-height);\n    height: var(--search-field-item-height);\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n}\n";
+var styles = {"bui-SearchField":"SearchField-module_bui-SearchField__2TyT_","bui-SearchFieldClear":"SearchField-module_bui-SearchFieldClear__1gJQc","bui-SearchFieldInput":"SearchField-module_bui-SearchFieldInput__3Opoj","bui-SearchFieldInputWrapper":"SearchField-module_bui-SearchFieldInputWrapper__1JEG8","bui-SearchFieldInputIcon":"SearchField-module_bui-SearchFieldInputIcon__EA0t9"};
 styleInject(css_248z);
 
-export { stylesSearchField as default };
+export { styles as default };
 //# sourceMappingURL=SearchField.module.css.esm.js.map

package/dist/components/Select/Select.esm.js

@@ -1,13 +1,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useEffect } from 'react';
-import { Select as Select$1, Button, SelectValue, Popover, ListBox, ListBoxItem, Text } from 'react-aria-components';
+import { Select as Select$1, Popover } from 'react-aria-components';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
 import { FieldError } from '../FieldError/FieldError.esm.js';
 import styles from './Select.module.css.esm.js';
 import stylesPopover from '../Popover/Popover.module.css.esm.js';
-import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react';
+import { SelectTrigger } from './SelectTrigger.esm.js';
+import { SelectContent } from './SelectContent.esm.js';
 
 const Select = forwardRef((props, ref) => {
   const { classNames: popoverClassNames } = useStyles("Popover");
@@ -21,14 +22,13 @@ const Select = forwardRef((props, ref) => {
     label,
     description,
     options,
-    placeholder,
-    size,
     icon,
+    searchable,
+    searchPlaceholder,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     isRequired,
     secondaryLabel,
-    style,
     ...rest
   } = cleanedProps;
   useEffect(() => {
@@ -57,62 +57,26 @@ const Select = forwardRef((props, ref) => {
             description
           }
         ),
-        /* @__PURE__ */ jsxs(
-          Button,
-          {
-            className: clsx(classNames.trigger, styles[classNames.trigger]),
-            "data-size": dataAttributes["data-size"],
-            children: [
-              icon,
-              /* @__PURE__ */ jsx(
-                SelectValue,
-                {
-                  className: clsx(classNames.value, styles[classNames.value])
-                }
-              ),
-              /* @__PURE__ */ jsx(RiArrowDownSLine, { "aria-hidden": "true" })
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsx(SelectTrigger, { icon }),
         /* @__PURE__ */ jsx(FieldError, {}),
         /* @__PURE__ */ jsx(
           Popover,
           {
             className: clsx(
               popoverClassNames.root,
-              stylesPopover[popoverClassNames.root]
+              stylesPopover[popoverClassNames.root],
+              classNames.popover,
+              styles[classNames.popover]
             ),
-            children: /* @__PURE__ */ jsx(ListBox, { className: clsx(classNames.list, styles[classNames.list]), children: options?.map((option) => /* @__PURE__ */ jsxs(
-              ListBoxItem,
+            ...dataAttributes,
+            children: /* @__PURE__ */ jsx(
+              SelectContent,
               {
-                id: option.value,
-                className: clsx(classNames.item, styles[classNames.item]),
-                children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: clsx(
-                        classNames.itemIndicator,
-                        styles[classNames.itemIndicator]
-                      ),
-                      children: /* @__PURE__ */ jsx(RiCheckLine, {})
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Text,
-                    {
-                      slot: "label",
-                      className: clsx(
-                        classNames.itemLabel,
-                        styles[classNames.itemLabel]
-                      ),
-                      children: option.label
-                    }
-                  )
-                ]
-              },
-              option.value
-            )) })
+                searchable,
+                searchPlaceholder,
+                options
+              }
+            )
           }
         )
       ]