@backstage/ui 0.6.1 → 0.7.0-next.1

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 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 { Link } from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { useRef, useState, useEffect } from 'react';\nimport { RiArrowRightSLine, RiMore2Line, RiShapesLine } from '@remixicon/react';\nimport type { HeaderToolbarProps } from './types';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Menu } from '../Menu';\nimport { Text } from '../Text';\nimport { motion, useScroll, useTransform } from 'motion/react';\n\n/**\n * A component that renders a toolbar.\n *\n * @internal\n */\nexport const HeaderToolbar = (props: HeaderToolbarProps) => {\n  const { icon, title, menuItems, breadcrumbs, customActions, hasTabs } = props;\n  const { classNames } = useStyles('Header');\n\n  const { scrollY } = useScroll();\n  const breadcrumbOpacity = useTransform(scrollY, [80, 120], [0, 1]);\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  // State for breadcrumb visibility\n  const [showBreadcrumbs, setShowBreadcrumbs] = useState(true);\n\n  // Set up resize observer\n  useEffect(() => {\n    const wrapper = toolbarWrapperRef.current;\n    if (!wrapper) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      const wrapper = toolbarWrapperRef.current;\n      const content = toolbarContentRef.current;\n      const options = toolbarControlsRef.current;\n\n      if (!wrapper || !content) return;\n\n      // Get dimensions\n      const wrapperRect = wrapper.getBoundingClientRect();\n      const wrapperWidth = wrapperRect.width;\n      const wrapperPadding = 24; // 12px on each side (var(--bui-space-3))\n      const availableWidth = wrapperWidth - wrapperPadding;\n\n      // Calculate required width for content\n      const contentRect = content.getBoundingClientRect();\n      const contentWidth = contentRect?.width || 0;\n\n      // Calculate options width (if exists)\n      const optionsRect = options?.getBoundingClientRect();\n      const optionsWidth = optionsRect?.width || 0;\n\n      // Check if we need to hide breadcrumbs\n      const shouldShowBreadcrumbs =\n        contentWidth + optionsWidth + 32 <= availableWidth;\n\n      // Only update state if the value actually changed to prevent flickering\n      setShowBreadcrumbs(prev =>\n        prev !== shouldShowBreadcrumbs ? shouldShowBreadcrumbs : prev,\n      );\n    });\n\n    resizeObserver.observe(wrapper);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, []);\n\n  return (\n    <div className={classNames.toolbar} data-has-tabs={hasTabs}>\n      <div className={classNames.toolbarWrapper} ref={toolbarWrapperRef}>\n        <div className={classNames.toolbarContent} ref={toolbarContentRef}>\n          <div className={classNames.toolbarName}>\n            <div className={classNames.toolbarIcon}>\n              {icon || <RiShapesLine />}\n            </div>\n            <Text variant=\"body\">{title || 'Your plugin'}</Text>\n          </div>\n          {breadcrumbs && (\n            <motion.div\n              className={classNames.breadcrumbs}\n              style={{\n                opacity: breadcrumbOpacity,\n                visibility: showBreadcrumbs ? 'visible' : 'hidden',\n              }}\n            >\n              <RiArrowRightSLine\n                size={16}\n                className={classNames.breadcrumbSeparator}\n              />\n              {breadcrumbs.map((breadcrumb, index) => (\n                <div key={breadcrumb.label} className={classNames.breadcrumb}>\n                  <Link\n                    href={breadcrumb.href}\n                    className={classNames.breadcrumbLink}\n                    data-active={index === breadcrumbs.length - 1}\n                  >\n                    {breadcrumb.label}\n                  </Link>\n                  {index < breadcrumbs.length - 1 && (\n                    <RiArrowRightSLine\n                      size={16}\n                      className={classNames.breadcrumbSeparator}\n                    />\n                  )}\n                </div>\n              ))}\n            </motion.div>\n          )}\n        </div>\n        <div className={classNames.toolbarControls} ref={toolbarControlsRef}>\n          {customActions}\n          {menuItems && (\n            <Menu.Root>\n              <Menu.Trigger\n                render={props => (\n                  <ButtonIcon\n                    size=\"small\"\n                    icon={<RiMore2Line />}\n                    variant=\"tertiary\"\n                    {...props}\n                  />\n                )}\n              />\n              <Menu.Portal>\n                <Menu.Positioner sideOffset={4} align=\"end\">\n                  <Menu.Popup>\n                    {menuItems.map(option => (\n                      <Menu.Item\n                        key={option.value}\n                        onClick={() => option.onClick?.()}\n                      >\n                        {option.label}\n                      </Menu.Item>\n                    ))}\n                  </Menu.Popup>\n                </Menu.Positioner>\n              </Menu.Portal>\n            </Menu.Root>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"names":["wrapper","props"],"mappings":";;;;;;;;;;AA+Ba,MAAA,aAAA,GAAgB,CAAC,KAA8B,KAAA;AAC1D,EAAA,MAAM,EAAE,IAAM,EAAA,KAAA,EAAO,WAAW,WAAa,EAAA,aAAA,EAAe,SAAY,GAAA,KAAA;AACxE,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,QAAQ,CAAA;AAEzC,EAAM,MAAA,EAAE,OAAQ,EAAA,GAAI,SAAU,EAAA;AAC9B,EAAM,MAAA,iBAAA,GAAoB,YAAa,CAAA,OAAA,EAAS,CAAC,EAAA,EAAI,GAAG,CAAG,EAAA,CAAC,CAAG,EAAA,CAAC,CAAC,CAAA;AAGjE,EAAM,MAAA,iBAAA,GAAoB,OAAuB,IAAI,CAAA;AACrD,EAAM,MAAA,iBAAA,GAAoB,OAAuB,IAAI,CAAA;AACrD,EAAM,MAAA,kBAAA,GAAqB,OAAuB,IAAI,CAAA;AAGtD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAG3D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,UAAU,iBAAkB,CAAA,OAAA;AAClC,IAAA,IAAI,CAAC,OAAS,EAAA;AAEd,IAAM,MAAA,cAAA,GAAiB,IAAI,cAAA,CAAe,MAAM;AAC9C,MAAA,MAAMA,WAAU,iBAAkB,CAAA,OAAA;AAClC,MAAA,MAAM,UAAU,iBAAkB,CAAA,OAAA;AAClC,MAAA,MAAM,UAAU,kBAAmB,CAAA,OAAA;AAEnC,MAAI,IAAA,CAACA,QAAW,IAAA,CAAC,OAAS,EAAA;AAG1B,MAAM,MAAA,WAAA,GAAcA,SAAQ,qBAAsB,EAAA;AAClD,MAAA,MAAM,eAAe,WAAY,CAAA,KAAA;AACjC,MAAA,MAAM,cAAiB,GAAA,EAAA;AACvB,MAAA,MAAM,iBAAiB,YAAe,GAAA,cAAA;AAGtC,MAAM,MAAA,WAAA,GAAc,QAAQ,qBAAsB,EAAA;AAClD,MAAM,MAAA,YAAA,GAAe,aAAa,KAAS,IAAA,CAAA;AAG3C,MAAM,MAAA,WAAA,GAAc,SAAS,qBAAsB,EAAA;AACnD,MAAM,MAAA,YAAA,GAAe,aAAa,KAAS,IAAA,CAAA;AAG3C,MAAM,MAAA,qBAAA,GACJ,YAAe,GAAA,YAAA,GAAe,EAAM,IAAA,cAAA;AAGtC,MAAA,kBAAA;AAAA,QAAmB,CAAA,IAAA,KACjB,IAAS,KAAA,qBAAA,GAAwB,qBAAwB,GAAA;AAAA,OAC3D;AAAA,KACD,CAAA;AAED,IAAA,cAAA,CAAe,QAAQ,OAAO,CAAA;AAE9B,IAAA,OAAO,MAAM;AACX,MAAA,cAAA,CAAe,UAAW,EAAA;AAAA,KAC5B;AAAA,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,OAAS,EAAA,eAAA,EAAe,OACjD,EAAA,QAAA,kBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,UAAW,CAAA,cAAA,EAAgB,KAAK,iBAC9C,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,UAAW,CAAA,cAAA,EAAgB,KAAK,iBAC9C,EAAA,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,WACzB,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAI,SAAW,EAAA,UAAA,CAAW,aACxB,QAAQ,EAAA,IAAA,oBAAA,GAAA,CAAC,gBAAa,CACzB,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAQ,mBAAS,aAAc,EAAA;AAAA,OAC/C,EAAA,CAAA;AAAA,MACC,WACC,oBAAA,IAAA;AAAA,QAAC,MAAO,CAAA,GAAA;AAAA,QAAP;AAAA,UACC,WAAW,UAAW,CAAA,WAAA;AAAA,UACtB,KAAO,EAAA;AAAA,YACL,OAAS,EAAA,iBAAA;AAAA,YACT,UAAA,EAAY,kBAAkB,SAAY,GAAA;AAAA,WAC5C;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,iBAAA;AAAA,cAAA;AAAA,gBACC,IAAM,EAAA,EAAA;AAAA,gBACN,WAAW,UAAW,CAAA;AAAA;AAAA,aACxB;AAAA,YACC,WAAA,CAAY,IAAI,CAAC,UAAA,EAAY,0BAC3B,IAAA,CAAA,KAAA,EAAA,EAA2B,SAAW,EAAA,UAAA,CAAW,UAChD,EAAA,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,IAAA;AAAA,gBAAA;AAAA,kBACC,MAAM,UAAW,CAAA,IAAA;AAAA,kBACjB,WAAW,UAAW,CAAA,cAAA;AAAA,kBACtB,aAAA,EAAa,KAAU,KAAA,WAAA,CAAY,MAAS,GAAA,CAAA;AAAA,kBAE3C,QAAW,EAAA,UAAA,CAAA;AAAA;AAAA,eACd;AAAA,cACC,KAAA,GAAQ,WAAY,CAAA,MAAA,GAAS,CAC5B,oBAAA,GAAA;AAAA,gBAAC,iBAAA;AAAA,gBAAA;AAAA,kBACC,IAAM,EAAA,EAAA;AAAA,kBACN,WAAW,UAAW,CAAA;AAAA;AAAA;AACxB,aAZM,EAAA,EAAA,UAAA,CAAW,KAcrB,CACD;AAAA;AAAA;AAAA;AACH,KAEJ,EAAA,CAAA;AAAA,yBACC,KAAI,EAAA,EAAA,SAAA,EAAW,UAAW,CAAA,eAAA,EAAiB,KAAK,kBAC9C,EAAA,QAAA,EAAA;AAAA,MAAA,aAAA;AAAA,MACA,SACC,oBAAA,IAAA,CAAC,IAAK,CAAA,IAAA,EAAL,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,IAAK,CAAA,OAAA;AAAA,UAAL;AAAA,YACC,MAAA,EAAQ,CAAAC,MACN,qBAAA,GAAA;AAAA,cAAC,UAAA;AAAA,cAAA;AAAA,gBACC,IAAK,EAAA,OAAA;AAAA,gBACL,IAAA,sBAAO,WAAY,EAAA,EAAA,CAAA;AAAA,gBACnB,OAAQ,EAAA,UAAA;AAAA,gBACP,GAAGA;AAAA;AAAA;AACN;AAAA,SAEJ;AAAA,4BACC,IAAK,CAAA,MAAA,EAAL,EACC,QAAC,kBAAA,GAAA,CAAA,IAAA,CAAK,YAAL,EAAgB,UAAA,EAAY,CAAG,EAAA,KAAA,EAAM,OACpC,QAAC,kBAAA,GAAA,CAAA,IAAA,CAAK,OAAL,EACE,QAAA,EAAA,SAAA,CAAU,IAAI,CACb,MAAA,qBAAA,GAAA;AAAA,UAAC,IAAK,CAAA,IAAA;AAAA,UAAL;AAAA,YAEC,OAAA,EAAS,MAAM,MAAA,CAAO,OAAU,IAAA;AAAA,YAE/B,QAAO,EAAA,MAAA,CAAA;AAAA,WAAA;AAAA,UAHH,MAAO,CAAA;AAAA,SAKf,CACH,EAAA,CAAA,EACF,CACF,EAAA;AAAA,OACF,EAAA;AAAA,KAEJ,EAAA;AAAA,GAAA,EACF,CACF,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"HeaderToolbar.esm.js","sources":["../../../src/components/Header/HeaderToolbar.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 { Link, RouterProvider } from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { useRef, useState, useEffect } from 'react';\nimport { RiArrowRightSLine, RiMore2Line, RiShapesLine } from '@remixicon/react';\nimport type { HeaderToolbarProps } from './types';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Menu } from '../Menu';\nimport { Text } from '../Text';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport { useGSAP } from '@gsap/react';\n\ngsap.registerPlugin(ScrollTrigger);\n\n/**\n * A component that renders a toolbar.\n *\n * @internal\n */\nexport const HeaderToolbar = (props: HeaderToolbarProps) => {\n  const {\n    icon,\n    title,\n    titleLink,\n    menuItems,\n    breadcrumbs,\n    customActions,\n    hasTabs,\n  } = props;\n  const { classNames } = useStyles('Header');\n  let navigate = useNavigate();\n\n  // Refs for collision detection\n  const toolbarWrapperRef = useRef<HTMLDivElement>(null);\n  const toolbarContentRef = useRef<HTMLDivElement>(null);\n  const toolbarControlsRef = useRef<HTMLDivElement>(null);\n  const breadcrumbsRef = useRef<HTMLDivElement>(null);\n\n  // State for breadcrumb visibility\n  const [showBreadcrumbs, setShowBreadcrumbs] = useState(true);\n\n  // Set up resize observer\n  useEffect(() => {\n    const wrapper = toolbarWrapperRef.current;\n    if (!wrapper) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      const wrapper = toolbarWrapperRef.current;\n      const content = toolbarContentRef.current;\n      const options = toolbarControlsRef.current;\n\n      if (!wrapper || !content) return;\n\n      // Get dimensions\n      const wrapperRect = wrapper.getBoundingClientRect();\n      const wrapperWidth = wrapperRect.width;\n      const wrapperPadding = 24; // 12px on each side (var(--bui-space-3))\n      const availableWidth = wrapperWidth - wrapperPadding;\n\n      // Calculate required width for content\n      const contentRect = content.getBoundingClientRect();\n      const contentWidth = contentRect?.width || 0;\n\n      // Calculate options width (if exists)\n      const optionsRect = options?.getBoundingClientRect();\n      const optionsWidth = optionsRect?.width || 0;\n\n      // Check if we need to hide breadcrumbs\n      const shouldShowBreadcrumbs =\n        contentWidth + optionsWidth + 32 <= availableWidth;\n\n      // Only update state if the value actually changed to prevent flickering\n      setShowBreadcrumbs(prev =>\n        prev !== shouldShowBreadcrumbs ? shouldShowBreadcrumbs : prev,\n      );\n    });\n\n    resizeObserver.observe(wrapper);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, []);\n\n  useGSAP(() => {\n    gsap.to(breadcrumbsRef.current, {\n      scrollTrigger: {\n        start: '10% 10%',\n        end: '20% 20%',\n        scrub: true,\n      },\n      opacity: 1,\n      duration: 1,\n      ease: 'power2.inOut',\n    });\n  });\n\n  const titleContent = (\n    <>\n      <div className={classNames.toolbarIcon}>{icon || <RiShapesLine />}</div>\n      <Text variant=\"body-medium\">{title || 'Your plugin'}</Text>\n    </>\n  );\n\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <div className={classNames.toolbar} data-has-tabs={hasTabs}>\n        <div className={classNames.toolbarWrapper} ref={toolbarWrapperRef}>\n          <div className={classNames.toolbarContent} ref={toolbarContentRef}>\n            <Text as=\"h1\" variant=\"body-medium\">\n              {titleLink ? (\n                <Link className={classNames.toolbarName} href={titleLink}>\n                  {titleContent}\n                </Link>\n              ) : (\n                <div className={classNames.toolbarName}>{titleContent}</div>\n              )}\n            </Text>\n            {breadcrumbs && (\n              <div\n                ref={breadcrumbsRef}\n                className={classNames.breadcrumbs}\n                style={{\n                  opacity: 0,\n                  visibility: showBreadcrumbs ? 'visible' : 'hidden',\n                }}\n              >\n                <RiArrowRightSLine\n                  size={16}\n                  className={classNames.breadcrumbSeparator}\n                />\n                {breadcrumbs.map((breadcrumb, index) => (\n                  <div key={breadcrumb.label} className={classNames.breadcrumb}>\n                    <Link\n                      href={breadcrumb.href}\n                      className={classNames.breadcrumbLink}\n                      data-active={index === breadcrumbs.length - 1}\n                    >\n                      {breadcrumb.label}\n                    </Link>\n                    {index < breadcrumbs.length - 1 && (\n                      <RiArrowRightSLine\n                        size={16}\n                        className={classNames.breadcrumbSeparator}\n                      />\n                    )}\n                  </div>\n                ))}\n              </div>\n            )}\n          </div>\n          <div className={classNames.toolbarControls} ref={toolbarControlsRef}>\n            {customActions}\n            {menuItems && (\n              <Menu.Root>\n                <Menu.Trigger\n                  render={props => (\n                    <ButtonIcon\n                      size=\"small\"\n                      icon={<RiMore2Line />}\n                      variant=\"tertiary\"\n                      {...props}\n                    />\n                  )}\n                />\n                <Menu.Portal>\n                  <Menu.Positioner sideOffset={4} align=\"end\">\n                    <Menu.Popup>\n                      {menuItems.map(option => (\n                        <Menu.Item\n                          key={option.value}\n                          onClick={() => option.onClick?.()}\n                        >\n                          {option.label}\n                        </Menu.Item>\n                      ))}\n                    </Menu.Popup>\n                  </Menu.Positioner>\n                </Menu.Portal>\n              </Menu.Root>\n            )}\n          </div>\n        </div>\n      </div>\n    </RouterProvider>\n  );\n};\n"],"names":["wrapper","props"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Heading } from '../Heading/Heading.esm.js';
 import { Menu } from '../Menu/Menu.esm.js';
+import { Text } from '../Text/Text.esm.js';
 import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
 import { RiMore2Line } from '@remixicon/react';
 import { Tabs, TabList, Tab } from '../Tabs/Tabs.esm.js';
@@ -11,7 +11,7 @@ const HeaderPage = (props) => {
   const { classNames } = useStyles("HeaderPage");
   return /* @__PURE__ */ jsxs("div", { className: classNames.root, children: [
     /* @__PURE__ */ jsxs("div", { className: classNames.content, children: [
-      /* @__PURE__ */ jsx(Heading, { variant: "title4", children: title }),
+      /* @__PURE__ */ jsx(Text, { variant: "title-small", weight: "bold", as: "h2", children: title }),
       /* @__PURE__ */ jsxs("div", { className: classNames.controls, children: [
         customActions,
         menuItems && /* @__PURE__ */ jsxs(Menu.Root, { children: [
@@ -40,7 +40,16 @@ const HeaderPage = (props) => {
         ] })
       ] })
     ] }),
-    tabs && /* @__PURE__ */ jsx("div", { className: classNames.tabsWrapper, children: /* @__PURE__ */ jsx(Tabs, { children: /* @__PURE__ */ jsx(TabList, { children: tabs.map((tab) => /* @__PURE__ */ jsx(Tab, { id: tab.id, href: tab.href, children: tab.label }, tab.id)) }) }) })
+    tabs && /* @__PURE__ */ jsx("div", { className: classNames.tabsWrapper, children: /* @__PURE__ */ jsx(Tabs, { children: /* @__PURE__ */ jsx(TabList, { children: tabs.map((tab) => /* @__PURE__ */ jsx(
+      Tab,
+      {
+        id: tab.id,
+        href: tab.href,
+        matchStrategy: tab.matchStrategy,
+        children: tab.label
+      },
+      tab.id
+    )) }) }) })
   ] });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderPage.esm.js","sources":["../../../src/components/HeaderPage/HeaderPage.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { HeaderPageProps } from './types';\nimport { Heading } from '../Heading';\nimport { Menu } from '../Menu';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { RiMore2Line } from '@remixicon/react';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\n\n/**\n * A component that renders a header page.\n *\n * @public\n */\nexport const HeaderPage = (props: HeaderPageProps) => {\n  const { title, menuItems, tabs, customActions } = props;\n  const { classNames } = useStyles('HeaderPage');\n\n  return (\n    <div className={classNames.root}>\n      <div className={classNames.content}>\n        <Heading variant=\"title4\">{title}</Heading>\n        <div className={classNames.controls}>\n          {customActions}\n          {menuItems && (\n            <Menu.Root>\n              <Menu.Trigger\n                render={props => (\n                  <ButtonIcon\n                    {...props}\n                    size=\"small\"\n                    icon={<RiMore2Line />}\n                    variant=\"tertiary\"\n                  />\n                )}\n              />\n              <Menu.Portal>\n                <Menu.Positioner sideOffset={4} align=\"end\">\n                  <Menu.Popup>\n                    {menuItems.map(menuItem => (\n                      <Menu.Item\n                        key={menuItem.value}\n                        onClick={() => menuItem.onClick?.()}\n                      >\n                        {menuItem.label}\n                      </Menu.Item>\n                    ))}\n                  </Menu.Popup>\n                </Menu.Positioner>\n              </Menu.Portal>\n            </Menu.Root>\n          )}\n        </div>\n      </div>\n      {tabs && (\n        <div className={classNames.tabsWrapper}>\n          <Tabs>\n            <TabList>\n              {tabs.map(tab => (\n                <Tab key={tab.id} id={tab.id} href={tab.href}>\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["props"],"mappings":";;;;;;;;AA6Ba,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AACpD,EAAA,MAAM,EAAE,KAAA,EAAO,SAAW,EAAA,IAAA,EAAM,eAAkB,GAAA,KAAA;AAClD,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,IACzB,EAAA,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,OACzB,EAAA,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,OAAA,EAAA,EAAQ,OAAQ,EAAA,QAAA,EAAU,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,sBAChC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,QACxB,EAAA,QAAA,EAAA;AAAA,QAAA,aAAA;AAAA,QACA,SACC,oBAAA,IAAA,CAAC,IAAK,CAAA,IAAA,EAAL,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,IAAK,CAAA,OAAA;AAAA,YAAL;AAAA,cACC,MAAA,EAAQ,CAAAA,MACN,qBAAA,GAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACE,GAAGA,MAAAA;AAAA,kBACJ,IAAK,EAAA,OAAA;AAAA,kBACL,IAAA,sBAAO,WAAY,EAAA,EAAA,CAAA;AAAA,kBACnB,OAAQ,EAAA;AAAA;AAAA;AACV;AAAA,WAEJ;AAAA,8BACC,IAAK,CAAA,MAAA,EAAL,EACC,QAAC,kBAAA,GAAA,CAAA,IAAA,CAAK,YAAL,EAAgB,UAAA,EAAY,CAAG,EAAA,KAAA,EAAM,OACpC,QAAC,kBAAA,GAAA,CAAA,IAAA,CAAK,OAAL,EACE,QAAA,EAAA,SAAA,CAAU,IAAI,CACb,QAAA,qBAAA,GAAA;AAAA,YAAC,IAAK,CAAA,IAAA;AAAA,YAAL;AAAA,cAEC,OAAA,EAAS,MAAM,QAAA,CAAS,OAAU,IAAA;AAAA,cAEjC,QAAS,EAAA,QAAA,CAAA;AAAA,aAAA;AAAA,YAHL,QAAS,CAAA;AAAA,WAKjB,CACH,EAAA,CAAA,EACF,CACF,EAAA;AAAA,SACF,EAAA;AAAA,OAEJ,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,IACC,IACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,UAAW,CAAA,WAAA,EACzB,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,OAAA,EAAA,EACE,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,CACR,GAAA,qBAAA,GAAA,CAAC,GAAiB,EAAA,EAAA,EAAA,EAAI,GAAI,CAAA,EAAA,EAAI,IAAM,EAAA,GAAA,CAAI,IACrC,EAAA,QAAA,EAAA,GAAA,CAAI,KADG,EAAA,EAAA,GAAA,CAAI,EAEd,CACD,CACH,EAAA,CAAA,EACF,CACF,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"HeaderPage.esm.js","sources":["../../../src/components/HeaderPage/HeaderPage.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { HeaderPageProps } from './types';\nimport { Menu } from '../Menu';\nimport { Text } from '../Text';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { RiMore2Line } from '@remixicon/react';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\n\n/**\n * A component that renders a header page.\n *\n * @public\n */\nexport const HeaderPage = (props: HeaderPageProps) => {\n  const { title, menuItems, tabs, customActions } = props;\n  const { classNames } = useStyles('HeaderPage');\n\n  return (\n    <div className={classNames.root}>\n      <div className={classNames.content}>\n        <Text variant=\"title-small\" weight=\"bold\" as=\"h2\">\n          {title}\n        </Text>\n        <div className={classNames.controls}>\n          {customActions}\n          {menuItems && (\n            <Menu.Root>\n              <Menu.Trigger\n                render={props => (\n                  <ButtonIcon\n                    {...props}\n                    size=\"small\"\n                    icon={<RiMore2Line />}\n                    variant=\"tertiary\"\n                  />\n                )}\n              />\n              <Menu.Portal>\n                <Menu.Positioner sideOffset={4} align=\"end\">\n                  <Menu.Popup>\n                    {menuItems.map(menuItem => (\n                      <Menu.Item\n                        key={menuItem.value}\n                        onClick={() => menuItem.onClick?.()}\n                      >\n                        {menuItem.label}\n                      </Menu.Item>\n                    ))}\n                  </Menu.Popup>\n                </Menu.Positioner>\n              </Menu.Portal>\n            </Menu.Root>\n          )}\n        </div>\n      </div>\n      {tabs && (\n        <div className={classNames.tabsWrapper}>\n          <Tabs>\n            <TabList>\n              {tabs.map(tab => (\n                <Tab\n                  key={tab.id}\n                  id={tab.id}\n                  href={tab.href}\n                  matchStrategy={tab.matchStrategy}\n                >\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["props"],"mappings":";;;;;;;;AA6Ba,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AACpD,EAAA,MAAM,EAAE,KAAA,EAAO,SAAW,EAAA,IAAA,EAAM,eAAkB,GAAA,KAAA;AAClD,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,YAAY,CAAA;AAE7C,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,IACzB,EAAA,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,OACzB,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,QAAK,OAAQ,EAAA,aAAA,EAAc,QAAO,MAAO,EAAA,EAAA,EAAG,MAC1C,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,sBACC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,UAAA,CAAW,QACxB,EAAA,QAAA,EAAA;AAAA,QAAA,aAAA;AAAA,QACA,SACC,oBAAA,IAAA,CAAC,IAAK,CAAA,IAAA,EAAL,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,IAAK,CAAA,OAAA;AAAA,YAAL;AAAA,cACC,MAAA,EAAQ,CAAAA,MACN,qBAAA,GAAA;AAAA,gBAAC,UAAA;AAAA,gBAAA;AAAA,kBACE,GAAGA,MAAAA;AAAA,kBACJ,IAAK,EAAA,OAAA;AAAA,kBACL,IAAA,sBAAO,WAAY,EAAA,EAAA,CAAA;AAAA,kBACnB,OAAQ,EAAA;AAAA;AAAA;AACV;AAAA,WAEJ;AAAA,8BACC,IAAK,CAAA,MAAA,EAAL,EACC,QAAC,kBAAA,GAAA,CAAA,IAAA,CAAK,YAAL,EAAgB,UAAA,EAAY,CAAG,EAAA,KAAA,EAAM,OACpC,QAAC,kBAAA,GAAA,CAAA,IAAA,CAAK,OAAL,EACE,QAAA,EAAA,SAAA,CAAU,IAAI,CACb,QAAA,qBAAA,GAAA;AAAA,YAAC,IAAK,CAAA,IAAA;AAAA,YAAL;AAAA,cAEC,OAAA,EAAS,MAAM,QAAA,CAAS,OAAU,IAAA;AAAA,cAEjC,QAAS,EAAA,QAAA,CAAA;AAAA,aAAA;AAAA,YAHL,QAAS,CAAA;AAAA,WAKjB,CACH,EAAA,CAAA,EACF,CACF,EAAA;AAAA,SACF,EAAA;AAAA,OAEJ,EAAA;AAAA,KACF,EAAA,CAAA;AAAA,IACC,IACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,UAAW,CAAA,WAAA,EACzB,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,OAAA,EAAA,EACE,QAAK,EAAA,IAAA,CAAA,GAAA,CAAI,CACR,GAAA,qBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QAEC,IAAI,GAAI,CAAA,EAAA;AAAA,QACR,MAAM,GAAI,CAAA,IAAA;AAAA,QACV,eAAe,GAAI,CAAA,aAAA;AAAA,QAElB,QAAI,EAAA,GAAA,CAAA;AAAA,OAAA;AAAA,MALA,GAAI,CAAA;AAAA,KAOZ,CACH,EAAA,CAAA,EACF,CACF,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

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

@@ -25,10 +25,12 @@ const Link = forwardRef((props, ref) => {
     variant = "body",
     weight = "regular",
     color = "primary",
+    truncate,
     href,
     ...restProps
   } = props;
-  const { classNames, dataAttributes } = useStyles("Link", {
+  const { classNames: linkClassNames } = useStyles("Link");
+  const { classNames: textClassNames, dataAttributes: textDataAttributes } = useStyles("Text", {
     variant,
     weight,
     color
@@ -39,9 +41,10 @@ const Link = forwardRef((props, ref) => {
       Link$1,
       {
         ref,
-        className: clsx(classNames.root, className),
+        className: clsx(textClassNames.root, linkClassNames.root, className),
+        "data-truncate": truncate,
         href,
-        ...dataAttributes,
+        ...textDataAttributes,
         ...restProps
       }
     );
@@ -50,9 +53,10 @@ const Link = forwardRef((props, ref) => {
     Link$1,
     {
       ref,
-      className: clsx(classNames.root, className),
+      className: clsx(textClassNames.root, linkClassNames.root, className),
+      "data-truncate": truncate,
+      ...textDataAttributes,
       href,
-      ...dataAttributes,
       ...restProps
     }
   ) });

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';\n\n// Helper function to determine if a link is external\nfunction isExternalLink(href?: string): boolean {\n  if (!href) return false;\n\n  // Check if it's an absolute URL with protocol\n  if (href.startsWith('http://') || href.startsWith('https://')) {\n    return true;\n  }\n\n  // Check if it's a protocol-relative URL\n  if (href.startsWith('//')) {\n    return true;\n  }\n\n  // Check if it's a mailto: or tel: link\n  if (href.startsWith('mailto:') || href.startsWith('tel:')) {\n    return true;\n  }\n\n  return false;\n}\n\n/** @public */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n  const navigate = useNavigate();\n  const {\n    className,\n    variant = 'body',\n    weight = 'regular',\n    color = 'primary',\n    href,\n    ...restProps\n  } = props;\n\n  const { classNames, dataAttributes } = useStyles('Link', {\n    variant,\n    weight,\n    color,\n  });\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(classNames.root, className)}\n        href={href}\n        {...dataAttributes}\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(classNames.root, className)}\n        href={href}\n        {...dataAttributes}\n        {...restProps}\n      />\n    </RouterProvider>\n  );\n});\n\nLink.displayName = 'Link';\n"],"names":["AriaLink"],"mappings":";;;;;;;AAwBA,SAAS,eAAe,IAAwB,EAAA;AAC9C,EAAI,IAAA,CAAC,MAAa,OAAA,KAAA;AAGlB,EAAA,IAAI,KAAK,UAAW,CAAA,SAAS,KAAK,IAAK,CAAA,UAAA,CAAW,UAAU,CAAG,EAAA;AAC7D,IAAO,OAAA,IAAA;AAAA;AAIT,EAAI,IAAA,IAAA,CAAK,UAAW,CAAA,IAAI,CAAG,EAAA;AACzB,IAAO,OAAA,IAAA;AAAA;AAIT,EAAA,IAAI,KAAK,UAAW,CAAA,SAAS,KAAK,IAAK,CAAA,UAAA,CAAW,MAAM,CAAG,EAAA;AACzD,IAAO,OAAA,IAAA;AAAA;AAGT,EAAO,OAAA,KAAA;AACT;AAGO,MAAM,IAAO,GAAA,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAQ,KAAA;AAC3E,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,OAAU,GAAA,MAAA;AAAA,IACV,MAAS,GAAA,SAAA;AAAA,IACT,KAAQ,GAAA,SAAA;AAAA,IACR,IAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,MAAQ,EAAA;AAAA,IACvD,OAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,UAAA,GAAa,eAAe,IAAI,CAAA;AAGtC,EAAA,IAAI,UAAY,EAAA;AACd,IACE,uBAAA,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,IAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG;AAAA;AAAA,KACN;AAAA;AAKJ,EACE,uBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAoB,OAClC,EAAA,QAAA,kBAAA,GAAA;AAAA,IAACA,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,IAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GAER,EAAA,CAAA;AAEJ,CAAC;AAED,IAAA,CAAK,WAAc,GAAA,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';\n\n// Helper function to determine if a link is external\nfunction isExternalLink(href?: string): boolean {\n  if (!href) return false;\n\n  // Check if it's an absolute URL with protocol\n  if (href.startsWith('http://') || href.startsWith('https://')) {\n    return true;\n  }\n\n  // Check if it's a protocol-relative URL\n  if (href.startsWith('//')) {\n    return true;\n  }\n\n  // Check if it's a mailto: or tel: link\n  if (href.startsWith('mailto:') || href.startsWith('tel:')) {\n    return true;\n  }\n\n  return false;\n}\n\n/** @public */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n  const navigate = useNavigate();\n  const {\n    className,\n    variant = 'body',\n    weight = 'regular',\n    color = 'primary',\n    truncate,\n    href,\n    ...restProps\n  } = props;\n\n  const { classNames: linkClassNames } = useStyles('Link');\n  const { classNames: textClassNames, dataAttributes: textDataAttributes } =\n    useStyles('Text', {\n      variant,\n      weight,\n      color,\n    });\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(textClassNames.root, linkClassNames.root, className)}\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(textClassNames.root, linkClassNames.root, className)}\n        data-truncate={truncate}\n        {...textDataAttributes}\n        href={href}\n        {...restProps}\n      />\n    </RouterProvider>\n  );\n});\n\nLink.displayName = 'Link';\n"],"names":["AriaLink"],"mappings":";;;;;;;AAwBA,SAAS,eAAe,IAAwB,EAAA;AAC9C,EAAI,IAAA,CAAC,MAAa,OAAA,KAAA;AAGlB,EAAA,IAAI,KAAK,UAAW,CAAA,SAAS,KAAK,IAAK,CAAA,UAAA,CAAW,UAAU,CAAG,EAAA;AAC7D,IAAO,OAAA,IAAA;AAAA;AAIT,EAAI,IAAA,IAAA,CAAK,UAAW,CAAA,IAAI,CAAG,EAAA;AACzB,IAAO,OAAA,IAAA;AAAA;AAIT,EAAA,IAAI,KAAK,UAAW,CAAA,SAAS,KAAK,IAAK,CAAA,UAAA,CAAW,MAAM,CAAG,EAAA;AACzD,IAAO,OAAA,IAAA;AAAA;AAGT,EAAO,OAAA,KAAA;AACT;AAGO,MAAM,IAAO,GAAA,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAQ,KAAA;AAC3E,EAAA,MAAM,WAAW,WAAY,EAAA;AAC7B,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,OAAU,GAAA,MAAA;AAAA,IACV,MAAS,GAAA,SAAA;AAAA,IACT,KAAQ,GAAA,SAAA;AAAA,IACR,QAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,MAAM,CAAA;AACvD,EAAA,MAAM,EAAE,UAAY,EAAA,cAAA,EAAgB,gBAAgB,kBAAmB,EAAA,GACrE,UAAU,MAAQ,EAAA;AAAA,IAChB,OAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAEH,EAAM,MAAA,UAAA,GAAa,eAAe,IAAI,CAAA;AAGtC,EAAA,IAAI,UAAY,EAAA;AACd,IACE,uBAAA,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAW,IAAK,CAAA,cAAA,CAAe,IAAM,EAAA,cAAA,CAAe,MAAM,SAAS,CAAA;AAAA,QACnE,eAAe,EAAA,QAAA;AAAA,QACf,IAAA;AAAA,QACC,GAAG,kBAAA;AAAA,QACH,GAAG;AAAA;AAAA,KACN;AAAA;AAKJ,EACE,uBAAA,GAAA,CAAC,cAAe,EAAA,EAAA,QAAA,EAAoB,OAClC,EAAA,QAAA,kBAAA,GAAA;AAAA,IAACA,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAW,IAAK,CAAA,cAAA,CAAe,IAAM,EAAA,cAAA,CAAe,MAAM,SAAS,CAAA;AAAA,MACnE,eAAe,EAAA,QAAA;AAAA,MACd,GAAG,kBAAA;AAAA,MACJ,IAAA;AAAA,MACC,GAAG;AAAA;AAAA,GAER,EAAA,CAAA;AAEJ,CAAC;AAED,IAAA,CAAK,WAAc,GAAA,MAAA;;;;"}

package/dist/components/Menu/Combobox.esm.js

@@ -6,20 +6,18 @@ import '../Box/Box.esm.js';
 import '../Grid/Grid.esm.js';
 import '../Flex/Flex.esm.js';
 import '../Container/Container.esm.js';
-import '../Text/Text.esm.js';
-import '../Heading/Heading.esm.js';
 import '../Avatar/Avatar.esm.js';
 import '../Button/Button.esm.js';
 import '../Card/Card.esm.js';
 import '../Collapsible/Collapsible.esm.js';
 import '../DataTable/DataTable.esm.js';
 import '../FieldLabel/FieldLabel.esm.js';
-import 'react-aria-components';
-import '@remixicon/react';
-import '../ButtonIcon/ButtonIcon.esm.js';
-import './Menu.esm.js';
-import 'motion/react';
+import '../Header/HeaderToolbar.esm.js';
 import '../Tabs/Tabs.esm.js';
+import './Menu.esm.js';
+import '../Text/Text.esm.js';
+import '../ButtonIcon/ButtonIcon.esm.js';
+import '@remixicon/react';
 import { Icon } from '../Icon/Icon.esm.js';
 import '../ButtonLink/ButtonLink.esm.js';
 import '../Checkbox/Checkbox.esm.js';

package/dist/components/Menu/Combobox.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.esm.js","sources":["../../../src/components/Menu/Combobox.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 {\n  forwardRef,\n  useState,\n  useMemo,\n  useCallback,\n  useId,\n  ChangeEvent,\n  KeyboardEvent,\n  useRef,\n  useEffect,\n} from 'react';\nimport clsx from 'clsx';\nimport { MenuComboboxOption, MenuComboboxProps } from './types';\nimport { Icon } from '../..';\n\nconst getListboxItemId = (listboxId: string, optionValue: string): string =>\n  `${listboxId}-option-${optionValue}`;\n\n// Internal component for rendering individual items\nfunction ComboboxItem({\n  option,\n  optionIndex,\n  value,\n  activeOptionIndex,\n  onItemActive,\n  onItemSelect,\n  listboxId,\n}: {\n  option: MenuComboboxOption;\n  optionIndex: number;\n  value?: string[];\n  activeOptionIndex: number;\n  onItemActive: (index: number) => void;\n  onItemSelect: (value: string) => void;\n  listboxId: string;\n}) {\n  const isSelected = value?.includes(option.value) ?? false;\n  const isHighlighted = optionIndex === activeOptionIndex;\n  const itemId = getListboxItemId(listboxId, option.value);\n\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  // Scroll the item into view when it becomes highlighted\n  useEffect(() => {\n    if (isHighlighted && itemRef.current) {\n      itemRef.current.scrollIntoView({ block: 'nearest' });\n    }\n  }, [isHighlighted]);\n\n  return (\n    <div\n      ref={itemRef}\n      className=\"bui-SubmenuComboboxItem\"\n      id={itemId}\n      role=\"option\"\n      aria-selected={isSelected}\n      data-highlighted={isHighlighted ? true : undefined}\n      data-selected={isSelected ? true : undefined}\n      data-disabled={option.disabled ? true : undefined}\n      onMouseOver={() => !option.disabled && onItemActive(optionIndex)}\n      onClick={() => !option.disabled && onItemSelect(option.value)}\n    >\n      <div className=\"bui-SubmenuComboboxItemCheckbox\">\n        {isSelected && <Icon aria-hidden=\"true\" name=\"check\" size={12} />}\n      </div>\n      <div className=\"bui-SubmenuComboboxItemLabel\">{option.label}</div>\n    </div>\n  );\n}\n\n/** @public */\nexport const Combobox = forwardRef<HTMLDivElement, MenuComboboxProps>(\n  (props, ref) => {\n    const {\n      options,\n      value,\n      onValueChange,\n      multiselect = false,\n      className,\n      ...rest\n    } = props;\n\n    const triggerId = useId();\n    const listboxId = `${triggerId}-listbox`;\n\n    // State management\n    const [filterString, setFilterString] = useState<string>('');\n    const [activeOptionIndex, setActiveOptionIndex] = useState<number>(0);\n\n    // Filter options based on input\n    const filteredOptions = useMemo(() => {\n      if (!filterString) return options;\n      const lowerFilterString = filterString.toLocaleLowerCase('en-US');\n      return options.filter(option =>\n        option.label.toLocaleLowerCase('en-US').includes(lowerFilterString),\n      );\n    }, [filterString, options]);\n\n    // Get the active descendant ID for accessibility\n    const activeDescendantId =\n      activeOptionIndex >= 0 && filteredOptions.length > 0\n        ? getListboxItemId(listboxId, filteredOptions[activeOptionIndex].value)\n        : undefined;\n\n    const handleValueChange = useCallback(\n      (toggledValue: string) => {\n        let newValue: string[];\n        if (multiselect) {\n          newValue = value?.includes(toggledValue)\n            ? value.filter(v => v !== toggledValue)\n            : [...(value ?? []), toggledValue];\n        } else {\n          newValue = value?.includes(toggledValue) ? [] : [toggledValue];\n        }\n\n        onValueChange?.(newValue);\n      },\n      [multiselect, onValueChange, value],\n    );\n\n    const handleSearchChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        setFilterString(e.target.value);\n        setActiveOptionIndex(0);\n        e.preventDefault();\n      },\n      [],\n    );\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        let wasEscapeKey = false;\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault();\n            setActiveOptionIndex(prev =>\n              Math.min(prev + 1, filteredOptions.length - 1),\n            );\n            break;\n          case 'ArrowUp':\n            e.preventDefault();\n            setActiveOptionIndex(prev => Math.max(prev - 1, 0));\n            break;\n          case 'Home':\n            e.preventDefault();\n            setActiveOptionIndex(0);\n            break;\n          case 'End':\n            e.preventDefault();\n            setActiveOptionIndex(Math.max(filteredOptions.length - 1, 0));\n            break;\n          case 'Enter':\n            e.preventDefault();\n            if (\n              activeOptionIndex >= 0 &&\n              !filteredOptions[activeOptionIndex].disabled\n            ) {\n              handleValueChange(filteredOptions[activeOptionIndex].value);\n            }\n            break;\n          case 'Escape':\n            // The Menu component should handle this\n            wasEscapeKey = true;\n            break;\n          default:\n            break;\n        }\n\n        if (!wasEscapeKey) {\n          // Stop propagation so Menu components don't prevent the input from updating\n          e.stopPropagation();\n        }\n      },\n      [filteredOptions, activeOptionIndex, handleValueChange],\n    );\n\n    return (\n      <div\n        ref={ref}\n        role=\"combobox\"\n        className={clsx('bui-MenuCombobox', className)}\n        {...rest}\n      >\n        <input\n          className=\"bui-SubmenuComboboxSearch\"\n          type=\"text\"\n          role=\"combobox\"\n          placeholder=\"Filter...\"\n          aria-labelledby={triggerId}\n          aria-controls={listboxId}\n          aria-autocomplete=\"list\"\n          aria-activedescendant={activeDescendantId}\n          aria-expanded=\"true\"\n          aria-haspopup=\"listbox\"\n          value={filterString}\n          onKeyDown={handleKeyDown}\n          onChange={handleSearchChange}\n        />\n        <div\n          role=\"listbox\"\n          id={listboxId}\n          tabIndex={-1}\n          aria-multiselectable={multiselect ? true : undefined}\n          className=\"bui-SubmenuComboboxItems\"\n        >\n          {filteredOptions.length === 0 ? (\n            <div className=\"bui-SubmenuComboboxNoResults\">No results found</div>\n          ) : (\n            filteredOptions.map((option, index) => (\n              <ComboboxItem\n                key={option.value}\n                option={option}\n                optionIndex={index}\n                value={value}\n                activeOptionIndex={activeOptionIndex}\n                onItemActive={setActiveOptionIndex}\n                onItemSelect={handleValueChange}\n                listboxId={listboxId}\n              />\n            ))\n          )}\n        </div>\n      </div>\n    );\n  },\n);\nCombobox.displayName = 'Combobox';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Combobox.esm.js","sources":["../../../src/components/Menu/Combobox.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 {\n  forwardRef,\n  useState,\n  useMemo,\n  useCallback,\n  useId,\n  ChangeEvent,\n  KeyboardEvent,\n  useRef,\n  useEffect,\n} from 'react';\nimport clsx from 'clsx';\nimport { MenuComboboxOption, MenuComboboxProps } from './types';\nimport { Icon } from '../..';\n\nconst getListboxItemId = (listboxId: string, optionValue: string): string =>\n  `${listboxId}-option-${optionValue}`;\n\n// Internal component for rendering individual items\nfunction ComboboxItem({\n  option,\n  optionIndex,\n  value,\n  activeOptionIndex,\n  onItemActive,\n  onItemSelect,\n  listboxId,\n}: {\n  option: MenuComboboxOption;\n  optionIndex: number;\n  value?: string[];\n  activeOptionIndex: number;\n  onItemActive: (index: number) => void;\n  onItemSelect: (value: string) => void;\n  listboxId: string;\n}) {\n  const isSelected = value?.includes(option.value) ?? false;\n  const isHighlighted = optionIndex === activeOptionIndex;\n  const itemId = getListboxItemId(listboxId, option.value);\n\n  const itemRef = useRef<HTMLDivElement>(null);\n\n  // Scroll the item into view when it becomes highlighted\n  useEffect(() => {\n    if (isHighlighted && itemRef.current) {\n      itemRef.current.scrollIntoView({ block: 'nearest' });\n    }\n  }, [isHighlighted]);\n\n  return (\n    <div\n      ref={itemRef}\n      className=\"bui-SubmenuComboboxItem\"\n      id={itemId}\n      role=\"option\"\n      aria-selected={isSelected}\n      data-highlighted={isHighlighted ? true : undefined}\n      data-selected={isSelected ? true : undefined}\n      data-disabled={option.disabled ? true : undefined}\n      onMouseOver={() => !option.disabled && onItemActive(optionIndex)}\n      onClick={() => !option.disabled && onItemSelect(option.value)}\n    >\n      <div className=\"bui-SubmenuComboboxItemCheckbox\">\n        {isSelected && <Icon aria-hidden=\"true\" name=\"check\" size={12} />}\n      </div>\n      <div className=\"bui-SubmenuComboboxItemLabel\">{option.label}</div>\n    </div>\n  );\n}\n\n/** @public */\nexport const Combobox = forwardRef<HTMLDivElement, MenuComboboxProps>(\n  (props, ref) => {\n    const {\n      options,\n      value,\n      onValueChange,\n      multiselect = false,\n      className,\n      ...rest\n    } = props;\n\n    const triggerId = useId();\n    const listboxId = `${triggerId}-listbox`;\n\n    // State management\n    const [filterString, setFilterString] = useState<string>('');\n    const [activeOptionIndex, setActiveOptionIndex] = useState<number>(0);\n\n    // Filter options based on input\n    const filteredOptions = useMemo(() => {\n      if (!filterString) return options;\n      const lowerFilterString = filterString.toLocaleLowerCase('en-US');\n      return options.filter(option =>\n        option.label.toLocaleLowerCase('en-US').includes(lowerFilterString),\n      );\n    }, [filterString, options]);\n\n    // Get the active descendant ID for accessibility\n    const activeDescendantId =\n      activeOptionIndex >= 0 && filteredOptions.length > 0\n        ? getListboxItemId(listboxId, filteredOptions[activeOptionIndex].value)\n        : undefined;\n\n    const handleValueChange = useCallback(\n      (toggledValue: string) => {\n        let newValue: string[];\n        if (multiselect) {\n          newValue = value?.includes(toggledValue)\n            ? value.filter(v => v !== toggledValue)\n            : [...(value ?? []), toggledValue];\n        } else {\n          newValue = value?.includes(toggledValue) ? [] : [toggledValue];\n        }\n\n        onValueChange?.(newValue);\n      },\n      [multiselect, onValueChange, value],\n    );\n\n    const handleSearchChange = useCallback(\n      (e: ChangeEvent<HTMLInputElement>) => {\n        setFilterString(e.target.value);\n        setActiveOptionIndex(0);\n        e.preventDefault();\n      },\n      [],\n    );\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        let wasEscapeKey = false;\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault();\n            setActiveOptionIndex(prev =>\n              Math.min(prev + 1, filteredOptions.length - 1),\n            );\n            break;\n          case 'ArrowUp':\n            e.preventDefault();\n            setActiveOptionIndex(prev => Math.max(prev - 1, 0));\n            break;\n          case 'Home':\n            e.preventDefault();\n            setActiveOptionIndex(0);\n            break;\n          case 'End':\n            e.preventDefault();\n            setActiveOptionIndex(Math.max(filteredOptions.length - 1, 0));\n            break;\n          case 'Enter':\n            e.preventDefault();\n            if (\n              activeOptionIndex >= 0 &&\n              !filteredOptions[activeOptionIndex].disabled\n            ) {\n              handleValueChange(filteredOptions[activeOptionIndex].value);\n            }\n            break;\n          case 'Escape':\n            // The Menu component should handle this\n            wasEscapeKey = true;\n            break;\n          default:\n            break;\n        }\n\n        if (!wasEscapeKey) {\n          // Stop propagation so Menu components don't prevent the input from updating\n          e.stopPropagation();\n        }\n      },\n      [filteredOptions, activeOptionIndex, handleValueChange],\n    );\n\n    return (\n      <div\n        ref={ref}\n        role=\"combobox\"\n        className={clsx('bui-MenuCombobox', className)}\n        {...rest}\n      >\n        <input\n          className=\"bui-SubmenuComboboxSearch\"\n          type=\"text\"\n          role=\"combobox\"\n          placeholder=\"Filter...\"\n          aria-labelledby={triggerId}\n          aria-controls={listboxId}\n          aria-autocomplete=\"list\"\n          aria-activedescendant={activeDescendantId}\n          aria-expanded=\"true\"\n          aria-haspopup=\"listbox\"\n          value={filterString}\n          onKeyDown={handleKeyDown}\n          onChange={handleSearchChange}\n        />\n        <div\n          role=\"listbox\"\n          id={listboxId}\n          tabIndex={-1}\n          aria-multiselectable={multiselect ? true : undefined}\n          className=\"bui-SubmenuComboboxItems\"\n        >\n          {filteredOptions.length === 0 ? (\n            <div className=\"bui-SubmenuComboboxNoResults\">No results found</div>\n          ) : (\n            filteredOptions.map((option, index) => (\n              <ComboboxItem\n                key={option.value}\n                option={option}\n                optionIndex={index}\n                value={value}\n                activeOptionIndex={activeOptionIndex}\n                onItemActive={setActiveOptionIndex}\n                onItemSelect={handleValueChange}\n                listboxId={listboxId}\n              />\n            ))\n          )}\n        </div>\n      </div>\n    );\n  },\n);\nCombobox.displayName = 'Combobox';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,mBAAmB,CAAC,SAAA,EAAmB,gBAC3C,CAAG,EAAA,SAAS,WAAW,WAAW,CAAA,CAAA;AAGpC,SAAS,YAAa,CAAA;AAAA,EACpB,MAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,iBAAA;AAAA,EACA,YAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAQG,EAAA;AACD,EAAA,MAAM,UAAa,GAAA,KAAA,EAAO,QAAS,CAAA,MAAA,CAAO,KAAK,CAAK,IAAA,KAAA;AACpD,EAAA,MAAM,gBAAgB,WAAgB,KAAA,iBAAA;AACtC,EAAA,MAAM,MAAS,GAAA,gBAAA,CAAiB,SAAW,EAAA,MAAA,CAAO,KAAK,CAAA;AAEvD,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA;AAG3C,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,aAAA,IAAiB,QAAQ,OAAS,EAAA;AACpC,MAAA,OAAA,CAAQ,OAAQ,CAAA,cAAA,CAAe,EAAE,KAAA,EAAO,WAAW,CAAA;AAAA;AACrD,GACF,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,OAAA;AAAA,MACL,SAAU,EAAA,yBAAA;AAAA,MACV,EAAI,EAAA,MAAA;AAAA,MACJ,IAAK,EAAA,QAAA;AAAA,MACL,eAAe,EAAA,UAAA;AAAA,MACf,kBAAA,EAAkB,gBAAgB,IAAO,GAAA,KAAA,CAAA;AAAA,MACzC,eAAA,EAAe,aAAa,IAAO,GAAA,KAAA,CAAA;AAAA,MACnC,eAAA,EAAe,MAAO,CAAA,QAAA,GAAW,IAAO,GAAA,KAAA,CAAA;AAAA,MACxC,aAAa,MAAM,CAAC,MAAO,CAAA,QAAA,IAAY,aAAa,WAAW,CAAA;AAAA,MAC/D,SAAS,MAAM,CAAC,OAAO,QAAY,IAAA,YAAA,CAAa,OAAO,KAAK,CAAA;AAAA,MAE5D,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,iCACZ,EAAA,QAAA,EAAA,UAAA,oBAAe,GAAA,CAAA,IAAA,EAAA,EAAK,aAAY,EAAA,MAAA,EAAO,IAAK,EAAA,OAAA,EAAQ,IAAM,EAAA,EAAA,EAAI,CACjE,EAAA,CAAA;AAAA,wBACC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,8BAAA,EAAgC,iBAAO,KAAM,EAAA;AAAA;AAAA;AAAA,GAC9D;AAEJ;AAGO,MAAM,QAAW,GAAA,UAAA;AAAA,EACtB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAM,MAAA;AAAA,MACJ,OAAA;AAAA,MACA,KAAA;AAAA,MACA,aAAA;AAAA,MACA,WAAc,GAAA,KAAA;AAAA,MACd,SAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,YAAY,KAAM,EAAA;AACxB,IAAM,MAAA,SAAA,GAAY,GAAG,SAAS,CAAA,QAAA,CAAA;AAG9B,IAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAiB,EAAE,CAAA;AAC3D,IAAA,MAAM,CAAC,iBAAA,EAAmB,oBAAoB,CAAA,GAAI,SAAiB,CAAC,CAAA;AAGpE,IAAM,MAAA,eAAA,GAAkB,QAAQ,MAAM;AACpC,MAAI,IAAA,CAAC,cAAqB,OAAA,OAAA;AAC1B,MAAM,MAAA,iBAAA,GAAoB,YAAa,CAAA,iBAAA,CAAkB,OAAO,CAAA;AAChE,MAAA,OAAO,OAAQ,CAAA,MAAA;AAAA,QAAO,YACpB,MAAO,CAAA,KAAA,CAAM,kBAAkB,OAAO,CAAA,CAAE,SAAS,iBAAiB;AAAA,OACpE;AAAA,KACC,EAAA,CAAC,YAAc,EAAA,OAAO,CAAC,CAAA;AAG1B,IAAA,MAAM,kBACJ,GAAA,iBAAA,IAAqB,CAAK,IAAA,eAAA,CAAgB,MAAS,GAAA,CAAA,GAC/C,gBAAiB,CAAA,SAAA,EAAW,eAAgB,CAAA,iBAAiB,CAAE,CAAA,KAAK,CACpE,GAAA,KAAA,CAAA;AAEN,IAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,MACxB,CAAC,YAAyB,KAAA;AACxB,QAAI,IAAA,QAAA;AACJ,QAAA,IAAI,WAAa,EAAA;AACf,UAAA,QAAA,GAAW,KAAO,EAAA,QAAA,CAAS,YAAY,CAAA,GACnC,MAAM,MAAO,CAAA,CAAA,CAAA,KAAK,CAAM,KAAA,YAAY,IACpC,CAAC,GAAI,KAAS,IAAA,IAAK,YAAY,CAAA;AAAA,SAC9B,MAAA;AACL,UAAA,QAAA,GAAW,OAAO,QAAS,CAAA,YAAY,IAAI,EAAC,GAAI,CAAC,YAAY,CAAA;AAAA;AAG/D,QAAA,aAAA,GAAgB,QAAQ,CAAA;AAAA,OAC1B;AAAA,MACA,CAAC,WAAa,EAAA,aAAA,EAAe,KAAK;AAAA,KACpC;AAEA,IAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,MACzB,CAAC,CAAqC,KAAA;AACpC,QAAgB,eAAA,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA;AAC9B,QAAA,oBAAA,CAAqB,CAAC,CAAA;AACtB,QAAA,CAAA,CAAE,cAAe,EAAA;AAAA,OACnB;AAAA,MACA;AAAC,KACH;AAEA,IAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,MACpB,CAAC,CAAqB,KAAA;AACpB,QAAA,IAAI,YAAe,GAAA,KAAA;AACnB,QAAA,QAAQ,EAAE,GAAK;AAAA,UACb,KAAK,WAAA;AACH,YAAA,CAAA,CAAE,cAAe,EAAA;AACjB,YAAA,oBAAA;AAAA,cAAqB,UACnB,IAAK,CAAA,GAAA,CAAI,OAAO,CAAG,EAAA,eAAA,CAAgB,SAAS,CAAC;AAAA,aAC/C;AACA,YAAA;AAAA,UACF,KAAK,SAAA;AACH,YAAA,CAAA,CAAE,cAAe,EAAA;AACjB,YAAA,oBAAA,CAAqB,UAAQ,IAAK,CAAA,GAAA,CAAI,IAAO,GAAA,CAAA,EAAG,CAAC,CAAC,CAAA;AAClD,YAAA;AAAA,UACF,KAAK,MAAA;AACH,YAAA,CAAA,CAAE,cAAe,EAAA;AACjB,YAAA,oBAAA,CAAqB,CAAC,CAAA;AACtB,YAAA;AAAA,UACF,KAAK,KAAA;AACH,YAAA,CAAA,CAAE,cAAe,EAAA;AACjB,YAAA,oBAAA,CAAqB,KAAK,GAAI,CAAA,eAAA,CAAgB,MAAS,GAAA,CAAA,EAAG,CAAC,CAAC,CAAA;AAC5D,YAAA;AAAA,UACF,KAAK,OAAA;AACH,YAAA,CAAA,CAAE,cAAe,EAAA;AACjB,YAAA,IACE,qBAAqB,CACrB,IAAA,CAAC,eAAgB,CAAA,iBAAiB,EAAE,QACpC,EAAA;AACA,cAAkB,iBAAA,CAAA,eAAA,CAAgB,iBAAiB,CAAA,CAAE,KAAK,CAAA;AAAA;AAE5D,YAAA;AAAA,UACF,KAAK,QAAA;AAEH,YAAe,YAAA,GAAA,IAAA;AACf,YAAA;AAEA;AAGJ,QAAA,IAAI,CAAC,YAAc,EAAA;AAEjB,UAAA,CAAA,CAAE,eAAgB,EAAA;AAAA;AACpB,OACF;AAAA,MACA,CAAC,eAAiB,EAAA,iBAAA,EAAmB,iBAAiB;AAAA,KACxD;AAEA,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAK,EAAA,UAAA;AAAA,QACL,SAAA,EAAW,IAAK,CAAA,kBAAA,EAAoB,SAAS,CAAA;AAAA,QAC5C,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,SAAU,EAAA,2BAAA;AAAA,cACV,IAAK,EAAA,MAAA;AAAA,cACL,IAAK,EAAA,UAAA;AAAA,cACL,WAAY,EAAA,WAAA;AAAA,cACZ,iBAAiB,EAAA,SAAA;AAAA,cACjB,eAAe,EAAA,SAAA;AAAA,cACf,mBAAkB,EAAA,MAAA;AAAA,cAClB,uBAAuB,EAAA,kBAAA;AAAA,cACvB,eAAc,EAAA,MAAA;AAAA,cACd,eAAc,EAAA,SAAA;AAAA,cACd,KAAO,EAAA,YAAA;AAAA,cACP,SAAW,EAAA,aAAA;AAAA,cACX,QAAU,EAAA;AAAA;AAAA,WACZ;AAAA,0BACA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,IAAK,EAAA,SAAA;AAAA,cACL,EAAI,EAAA,SAAA;AAAA,cACJ,QAAU,EAAA,CAAA,CAAA;AAAA,cACV,sBAAA,EAAsB,cAAc,IAAO,GAAA,KAAA,CAAA;AAAA,cAC3C,SAAU,EAAA,0BAAA;AAAA,cAET,QAAgB,EAAA,eAAA,CAAA,MAAA,KAAW,CAC1B,mBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,8BAA+B,EAAA,QAAA,EAAA,kBAAA,EAAgB,CAE9D,GAAA,eAAA,CAAgB,GAAI,CAAA,CAAC,QAAQ,KAC3B,qBAAA,GAAA;AAAA,gBAAC,YAAA;AAAA,gBAAA;AAAA,kBAEC,MAAA;AAAA,kBACA,WAAa,EAAA,KAAA;AAAA,kBACb,KAAA;AAAA,kBACA,iBAAA;AAAA,kBACA,YAAc,EAAA,oBAAA;AAAA,kBACd,YAAc,EAAA,iBAAA;AAAA,kBACd;AAAA,iBAAA;AAAA,gBAPK,MAAO,CAAA;AAAA,eASf;AAAA;AAAA;AAEL;AAAA;AAAA,KACF;AAAA;AAGN;AACA,QAAA,CAAS,WAAc,GAAA,UAAA;;;;"}

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

@@ -33,7 +33,7 @@ const Select = forwardRef((props, ref) => {
   useEffect(() => {
     if (!label && !ariaLabel && !ariaLabelledBy) {
       console.warn(
-        "TextField requires either a visible label, aria-label, or aria-labelledby for accessibility"
+        "Select requires either a visible label, aria-label, or aria-labelledby for accessibility"
       );
     }
   }, [label, ariaLabel, ariaLabelledBy]);

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

@@ -1 +1 @@
-{"version":3,"file":"Select.esm.js","sources":["../../../src/components/Select/Select.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 } from 'react';\nimport {\n  Select as AriaSelect,\n  SelectValue,\n  Button,\n  Popover,\n  ListBox,\n  ListBoxItem,\n  Text,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport './Select.styles.css';\nimport { SelectProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { FieldLabel } from '../FieldLabel';\nimport { Icon } from '../Icon';\nimport { FieldError } from '../FieldError';\n\n/** @public */\nexport const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {\n  const {\n    className,\n    label,\n    description,\n    options,\n    placeholder = 'Select an option',\n    size = 'small',\n    icon,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    isRequired,\n    secondaryLabel,\n    style,\n    ...rest\n  } = props;\n\n  const { classNames: popoverClassNames } = useStyles('Popover');\n  const { classNames, dataAttributes } = useStyles('Select', {\n    size,\n  });\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        'TextField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n      );\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n  const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null);\n\n  return (\n    <AriaSelect\n      className={clsx(classNames.root, className)}\n      {...dataAttributes}\n      ref={ref}\n      {...rest}\n    >\n      <FieldLabel\n        label={label}\n        secondaryLabel={secondaryLabelText}\n        description={description}\n      />\n      <Button\n        className={classNames.trigger}\n        data-size={dataAttributes['data-size']}\n      >\n        {icon}\n        <SelectValue className={classNames.value} />\n        <Icon aria-hidden=\"true\" name=\"chevron-down\" />\n      </Button>\n      <FieldError />\n      <Popover className={popoverClassNames.root}>\n        <ListBox className={classNames.list}>\n          {options?.map(option => (\n            <ListBoxItem\n              key={option.value}\n              id={option.value}\n              className={classNames.item}\n            >\n              <div className={classNames.itemIndicator}>\n                <Icon name=\"check\" />\n              </div>\n              <Text slot=\"label\" className={classNames.itemLabel}>\n                {option.label}\n              </Text>\n            </ListBoxItem>\n          ))}\n        </ListBox>\n      </Popover>\n    </AriaSelect>\n  );\n});\n\nSelect.displayName = 'Select';\n"],"names":["AriaSelect"],"mappings":"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"}
+{"version":3,"file":"Select.esm.js","sources":["../../../src/components/Select/Select.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 } from 'react';\nimport {\n  Select as AriaSelect,\n  SelectValue,\n  Button,\n  Popover,\n  ListBox,\n  ListBoxItem,\n  Text,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport './Select.styles.css';\nimport { SelectProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { FieldLabel } from '../FieldLabel';\nimport { Icon } from '../Icon';\nimport { FieldError } from '../FieldError';\n\n/** @public */\nexport const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {\n  const {\n    className,\n    label,\n    description,\n    options,\n    placeholder = 'Select an option',\n    size = 'small',\n    icon,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    isRequired,\n    secondaryLabel,\n    style,\n    ...rest\n  } = props;\n\n  const { classNames: popoverClassNames } = useStyles('Popover');\n  const { classNames, dataAttributes } = useStyles('Select', {\n    size,\n  });\n\n  useEffect(() => {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        'Select requires either a visible label, aria-label, or aria-labelledby for accessibility',\n      );\n    }\n  }, [label, ariaLabel, ariaLabelledBy]);\n\n  // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n  const secondaryLabelText = secondaryLabel || (isRequired ? 'Required' : null);\n\n  return (\n    <AriaSelect\n      className={clsx(classNames.root, className)}\n      {...dataAttributes}\n      ref={ref}\n      {...rest}\n    >\n      <FieldLabel\n        label={label}\n        secondaryLabel={secondaryLabelText}\n        description={description}\n      />\n      <Button\n        className={classNames.trigger}\n        data-size={dataAttributes['data-size']}\n      >\n        {icon}\n        <SelectValue className={classNames.value} />\n        <Icon aria-hidden=\"true\" name=\"chevron-down\" />\n      </Button>\n      <FieldError />\n      <Popover className={popoverClassNames.root}>\n        <ListBox className={classNames.list}>\n          {options?.map(option => (\n            <ListBoxItem\n              key={option.value}\n              id={option.value}\n              className={classNames.item}\n            >\n              <div className={classNames.itemIndicator}>\n                <Icon name=\"check\" />\n              </div>\n              <Text slot=\"label\" className={classNames.itemLabel}>\n                {option.label}\n              </Text>\n            </ListBoxItem>\n          ))}\n        </ListBox>\n      </Popover>\n    </AriaSelect>\n  );\n});\n\nSelect.displayName = 'Select';\n"],"names":["AriaSelect"],"mappings":"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"}

package/dist/components/Select/Select.styles.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 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\n.bui-Select[data-invalid] {\n  & .bui-SelectTrigger {\n    border-color: var(--bui-fg-danger);\n  }\n}\n\n.bui-SelectTrigger {\n  box-sizing: border-box;\n  border-radius: var(--bui-radius-3);\n  border: 1px solid var(--bui-border);\n  background-color: var(--bui-bg-surface-1);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n  cursor: pointer;\n  gap: var(--bui-space-2);\n  max-width: 100%;\n\n  & svg {\n    flex-shrink: 0;\n  }\n\n  &[data-size='small'] {\n    height: 2rem;\n    padding-inline: var(--bui-space-3);\n  }\n\n  &[data-size='medium'] {\n    height: 3rem;\n    padding-inline: var(--bui-space-4);\n  }\n\n  &[data-size='small'] svg {\n    width: 1rem;\n    height: 1rem;\n  }\n\n  &[data-size='medium'] svg {\n    width: 1.25rem;\n    height: 1.25rem;\n  }\n\n  &::placeholder {\n    color: var(--bui-fg-secondary);\n  }\n\n  &:hover {\n    border-color: var(--bui-border-hover);\n  }\n\n  &:focus-visible {\n    border-color: var(--bui-border-pressed);\n    outline: 0;\n  }\n\n  &[data-invalid] {\n    border-color: var(--bui-fg-danger);\n  }\n  &[data-invalid]:hover {\n    border-width: 2px;\n  }\n\n  &[data-invalid]:focus-visible {\n    border-width: 2px;\n  }\n\n  &[disabled] {\n    cursor: not-allowed;\n    border-color: var(--bui-border-disabled);\n    color: var(--bui-fg-disabled);\n  }\n\n  &[disabled] .bui-SelectValue {\n    color: var(--bui-fg-disabled);\n  }\n\n  &[data-popup-open] .bui-SelectIcon {\n    transform: rotate(180deg);\n  }\n}\n\n.bui-SelectValue {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  width: 100%;\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\n  & .bui-SelectItemIndicator {\n    display: none;\n  }\n\n  &[disabled] {\n    color: var(--bui-fg-disabled);\n  }\n}\n\n.bui-SelectItem {\n  position: relative;\n  width: var(--anchor-width);\n  display: grid;\n  grid-template-areas: 'icon text';\n  grid-template-columns: 1rem 1fr;\n  align-items: center;\n  padding-block: var(--bui-space-2);\n  padding-inline: var(--bui-space-4);\n  color: var(--bui-fg-primary);\n  border-radius: var(--bui-radius-3);\n  cursor: pointer;\n  user-select: none;\n  font-size: var(--bui-font-size-3);\n  gap: var(--bui-space-2);\n  outline: none;\n\n  &[data-focused] {\n    z-index: 0;\n    position: relative;\n    color: var(--bui-fg-primary);\n  }\n\n  &[data-focused]::before {\n    content: '';\n    z-index: -1;\n    position: absolute;\n    inset-block: 0;\n    inset-inline: 0.25rem;\n    border-radius: 0.25rem;\n    background-color: var(--bui-bg-tint-hover);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    color: var(--bui-fg-disabled);\n  }\n\n  &[data-selected] .bui-SelectItemIndicator {\n    opacity: 1;\n  }\n}\n\n.bui-SelectItemIndicator {\n  grid-area: icon;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n.bui-SelectItemLabel {\n  flex: 1;\n  grid-area: text;\n}\n";
+var css_248z = "/*\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\n.bui-Select[data-invalid] {\n  & .bui-SelectTrigger {\n    border-color: var(--bui-fg-danger);\n  }\n}\n\n.bui-SelectTrigger {\n  box-sizing: border-box;\n  border-radius: var(--bui-radius-3);\n  border: 1px solid var(--bui-border);\n  background-color: var(--bui-bg-surface-1);\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  cursor: pointer;\n  gap: var(--bui-space-2);\n  width: 100%;\n\n  & svg {\n    flex-shrink: 0;\n    color: var(--bui-fg-secondary);\n  }\n\n  &[data-size='small'] {\n    height: 2rem;\n    padding-inline: var(--bui-space-3);\n  }\n\n  &[data-size='medium'] {\n    height: 3rem;\n    padding-inline: var(--bui-space-4);\n  }\n\n  &[data-size='small'] svg {\n    width: 1rem;\n    height: 1rem;\n  }\n\n  &[data-size='medium'] svg {\n    width: 1.25rem;\n    height: 1.25rem;\n  }\n\n  &::placeholder {\n    color: var(--bui-fg-secondary);\n  }\n\n  &:hover {\n    transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n    border-color: var(--bui-border-hover);\n  }\n\n  &:focus-visible {\n    border-color: var(--bui-border-pressed);\n    outline: 0;\n  }\n\n  &[data-invalid] {\n    border-color: var(--bui-fg-danger);\n  }\n  &[data-invalid]:hover {\n    border-width: 2px;\n  }\n\n  &[data-invalid]:focus-visible {\n    border-width: 2px;\n  }\n\n  &[disabled] {\n    cursor: not-allowed;\n    border-color: var(--bui-border-disabled);\n    color: var(--bui-fg-disabled);\n  }\n\n  &[disabled] .bui-SelectValue {\n    color: var(--bui-fg-disabled);\n  }\n\n  &[data-popup-open] .bui-SelectIcon {\n    transform: rotate(180deg);\n  }\n}\n\n.bui-SelectValue {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  width: 100%;\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  text-align: left;\n\n  & .bui-SelectItemIndicator {\n    display: none;\n  }\n\n  &[disabled] {\n    color: var(--bui-fg-disabled);\n  }\n}\n\n.bui-SelectItem {\n  position: relative;\n  width: var(--anchor-width);\n  display: grid;\n  grid-template-areas: 'icon text';\n  grid-template-columns: 1rem 1fr;\n  align-items: center;\n  padding-block: var(--bui-space-2);\n  padding-left: var(--bui-space-3);\n  padding-right: var(--bui-space-4);\n  color: var(--bui-fg-primary);\n  border-radius: var(--bui-radius-3);\n  cursor: pointer;\n  user-select: none;\n  font-size: var(--bui-font-size-3);\n  gap: var(--bui-space-1);\n  outline: none;\n\n  &[data-focused] {\n    z-index: 0;\n    position: relative;\n    color: var(--bui-fg-primary);\n  }\n\n  &[data-focused]::before {\n    content: '';\n    z-index: -1;\n    position: absolute;\n    inset-block: 0;\n    inset-inline: 0.25rem;\n    border-radius: 0.25rem;\n    background-color: var(--bui-bg-tint-hover);\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    color: var(--bui-fg-disabled);\n  }\n\n  &[data-selected] .bui-SelectItemIndicator {\n    opacity: 1;\n  }\n}\n\n.bui-SelectItemIndicator {\n  grid-area: icon;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 0;\n  transition: opacity 0.2s ease-in-out;\n}\n\n.bui-SelectItemLabel {\n  flex: 1;\n  grid-area: text;\n}\n";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist/components/Table/TableCellLink/TableCellLink.esm.js

@@ -16,7 +16,7 @@ const TableCellLink = forwardRef(
         ...props,
         children: [
           title && /* @__PURE__ */ jsx(Link, { href, children: title }),
-          description && /* @__PURE__ */ jsx(Text, { variant: "body", color: "secondary", children: description })
+          description && /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: description })
         ]
       }
     );

package/dist/components/Table/TableCellLink/TableCellLink.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCellLink.esm.js","sources":["../../../../src/components/Table/TableCellLink/TableCellLink.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { TableCellLinkProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { Link } from '../../Link/Link';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellLink = forwardRef<HTMLDivElement, TableCellLinkProps>(\n  ({ className, title, description, href, render, ...props }, ref) => {\n    const { classNames } = useStyles('Table');\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.cellLink, className)}\n        {...props}\n      >\n        {title && <Link href={href}>{title}</Link>}\n        {description && (\n          <Text variant=\"body\" color=\"secondary\">\n            {description}\n          </Text>\n        )}\n      </div>\n    );\n  },\n);\nTableCellLink.displayName = 'TableCellLink';\n\nexport { TableCellLink };\n"],"names":[],"mappings":";;;;;;;AAwBA,MAAM,aAAgB,GAAA,UAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,KAAO,EAAA,WAAA,EAAa,MAAM,MAAQ,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AAClE,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,QAC7C,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAS,KAAA,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAa,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,UAClC,+BACE,GAAA,CAAA,IAAA,EAAA,EAAK,SAAQ,MAAO,EAAA,KAAA,EAAM,aACxB,QACH,EAAA,WAAA,EAAA;AAAA;AAAA;AAAA,KAEJ;AAAA;AAGN;AACA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;"}
+{"version":3,"file":"TableCellLink.esm.js","sources":["../../../../src/components/Table/TableCellLink/TableCellLink.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { TableCellLinkProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { Link } from '../../Link/Link';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellLink = forwardRef<HTMLDivElement, TableCellLinkProps>(\n  ({ className, title, description, href, render, ...props }, ref) => {\n    const { classNames } = useStyles('Table');\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.cellLink, className)}\n        {...props}\n      >\n        {title && <Link href={href}>{title}</Link>}\n        {description && (\n          <Text variant=\"body-medium\" color=\"secondary\">\n            {description}\n          </Text>\n        )}\n      </div>\n    );\n  },\n);\nTableCellLink.displayName = 'TableCellLink';\n\nexport { TableCellLink };\n"],"names":[],"mappings":";;;;;;;AAwBA,MAAM,aAAgB,GAAA,UAAA;AAAA,EACpB,CAAC,EAAE,SAAA,EAAW,KAAO,EAAA,WAAA,EAAa,MAAM,MAAQ,EAAA,GAAG,KAAM,EAAA,EAAG,GAAQ,KAAA;AAClE,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,QAC7C,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAS,KAAA,oBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAa,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,UAClC,+BACE,GAAA,CAAA,IAAA,EAAA,EAAK,SAAQ,aAAc,EAAA,KAAA,EAAM,aAC/B,QACH,EAAA,WAAA,EAAA;AAAA;AAAA;AAAA,KAEJ;AAAA;AAGN;AACA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;"}

package/dist/components/Table/TableCellProfile/TableCellProfile.esm.js

@@ -28,7 +28,7 @@ const TableCellProfile = forwardRef(
             ),
             /* @__PURE__ */ jsx(Avatar.Fallback, { className: classNames.cellProfileAvatarFallback, children: (name || "").split(" ").map((word) => word[0]).join("").toLocaleUpperCase("en-US").slice(0, 1) })
           ] }),
-          name && to ? /* @__PURE__ */ jsx(Link, { href: to, children: name }) : /* @__PURE__ */ jsx(Text, { variant: "body", children: name })
+          name && to ? /* @__PURE__ */ jsx(Link, { href: to, children: name }) : /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: name })
         ]
       }
     );

package/dist/components/Table/TableCellProfile/TableCellProfile.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCellProfile.esm.js","sources":["../../../../src/components/Table/TableCellProfile/TableCellProfile.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { TableCellProfileProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { Link } from '../../Link/Link';\nimport { Avatar } from '@base-ui-components/react/avatar';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellProfile = forwardRef<HTMLDivElement, TableCellProfileProps>(\n  ({ className, src, name, to, withImage = true, ...rest }, ref) => {\n    const { classNames } = useStyles('Table');\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.cellProfile, className)}\n        {...rest}\n      >\n        {withImage && (\n          <Avatar.Root className={classNames.cellProfileAvatar}>\n            <Avatar.Image\n              src={src}\n              width=\"20\"\n              height=\"20\"\n              className={classNames.cellProfileAvatarImage}\n            />\n            <Avatar.Fallback className={classNames.cellProfileAvatarFallback}>\n              {(name || '')\n                .split(' ')\n                .map(word => word[0])\n                .join('')\n                .toLocaleUpperCase('en-US')\n                .slice(0, 1)}\n            </Avatar.Fallback>\n          </Avatar.Root>\n        )}\n        {name && to ? (\n          <Link href={to}>{name}</Link>\n        ) : (\n          <Text variant=\"body\">{name}</Text>\n        )}\n      </div>\n    );\n  },\n);\nTableCellProfile.displayName = 'TableCellProfile';\n\nexport { TableCellProfile };\n"],"names":[],"mappings":";;;;;;;;AAyBA,MAAM,gBAAmB,GAAA,UAAA;AAAA,EACvB,CAAC,EAAE,SAAA,EAAW,GAAK,EAAA,IAAA,EAAM,EAAI,EAAA,SAAA,GAAY,IAAM,EAAA,GAAG,IAAK,EAAA,EAAG,GAAQ,KAAA;AAChE,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,WAAA,EAAa,SAAS,CAAA;AAAA,QAChD,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA,yBACE,MAAO,CAAA,IAAA,EAAP,EAAY,SAAA,EAAW,WAAW,iBACjC,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,MAAO,CAAA,KAAA;AAAA,cAAP;AAAA,gBACC,GAAA;AAAA,gBACA,KAAM,EAAA,IAAA;AAAA,gBACN,MAAO,EAAA,IAAA;AAAA,gBACP,WAAW,UAAW,CAAA;AAAA;AAAA,aACxB;AAAA,4BACA,GAAA,CAAC,MAAO,CAAA,QAAA,EAAP,EAAgB,SAAA,EAAW,UAAW,CAAA,yBAAA,EACnC,QAAQ,EAAA,CAAA,IAAA,IAAA,EAAA,EACP,KAAM,CAAA,GAAG,CACT,CAAA,GAAA,CAAI,CAAQ,IAAA,KAAA,IAAA,CAAK,CAAC,CAAC,CACnB,CAAA,IAAA,CAAK,EAAE,CAAA,CACP,iBAAkB,CAAA,OAAO,CACzB,CAAA,KAAA,CAAM,CAAG,EAAA,CAAC,CACf,EAAA;AAAA,WACF,EAAA,CAAA;AAAA,UAED,IAAQ,IAAA,EAAA,mBACN,GAAA,CAAA,IAAA,EAAA,EAAK,IAAM,EAAA,EAAA,EAAK,QAAK,EAAA,IAAA,EAAA,CAAA,mBAErB,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAQ,QAAK,EAAA,IAAA,EAAA;AAAA;AAAA;AAAA,KAE/B;AAAA;AAGN;AACA,gBAAA,CAAiB,WAAc,GAAA,kBAAA;;;;"}
+{"version":3,"file":"TableCellProfile.esm.js","sources":["../../../../src/components/Table/TableCellProfile/TableCellProfile.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { TableCellProfileProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { Link } from '../../Link/Link';\nimport { Avatar } from '@base-ui-components/react/avatar';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellProfile = forwardRef<HTMLDivElement, TableCellProfileProps>(\n  ({ className, src, name, to, withImage = true, ...rest }, ref) => {\n    const { classNames } = useStyles('Table');\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.cellProfile, className)}\n        {...rest}\n      >\n        {withImage && (\n          <Avatar.Root className={classNames.cellProfileAvatar}>\n            <Avatar.Image\n              src={src}\n              width=\"20\"\n              height=\"20\"\n              className={classNames.cellProfileAvatarImage}\n            />\n            <Avatar.Fallback className={classNames.cellProfileAvatarFallback}>\n              {(name || '')\n                .split(' ')\n                .map(word => word[0])\n                .join('')\n                .toLocaleUpperCase('en-US')\n                .slice(0, 1)}\n            </Avatar.Fallback>\n          </Avatar.Root>\n        )}\n        {name && to ? (\n          <Link href={to}>{name}</Link>\n        ) : (\n          <Text variant=\"body-medium\">{name}</Text>\n        )}\n      </div>\n    );\n  },\n);\nTableCellProfile.displayName = 'TableCellProfile';\n\nexport { TableCellProfile };\n"],"names":[],"mappings":";;;;;;;;AAyBA,MAAM,gBAAmB,GAAA,UAAA;AAAA,EACvB,CAAC,EAAE,SAAA,EAAW,GAAK,EAAA,IAAA,EAAM,EAAI,EAAA,SAAA,GAAY,IAAM,EAAA,GAAG,IAAK,EAAA,EAAG,GAAQ,KAAA;AAChE,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,WAAA,EAAa,SAAS,CAAA;AAAA,QAChD,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA,yBACE,MAAO,CAAA,IAAA,EAAP,EAAY,SAAA,EAAW,WAAW,iBACjC,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,MAAO,CAAA,KAAA;AAAA,cAAP;AAAA,gBACC,GAAA;AAAA,gBACA,KAAM,EAAA,IAAA;AAAA,gBACN,MAAO,EAAA,IAAA;AAAA,gBACP,WAAW,UAAW,CAAA;AAAA;AAAA,aACxB;AAAA,4BACA,GAAA,CAAC,MAAO,CAAA,QAAA,EAAP,EAAgB,SAAA,EAAW,UAAW,CAAA,yBAAA,EACnC,QAAQ,EAAA,CAAA,IAAA,IAAA,EAAA,EACP,KAAM,CAAA,GAAG,CACT,CAAA,GAAA,CAAI,CAAQ,IAAA,KAAA,IAAA,CAAK,CAAC,CAAC,CACnB,CAAA,IAAA,CAAK,EAAE,CAAA,CACP,iBAAkB,CAAA,OAAO,CACzB,CAAA,KAAA,CAAM,CAAG,EAAA,CAAC,CACf,EAAA;AAAA,WACF,EAAA,CAAA;AAAA,UAED,IAAQ,IAAA,EAAA,mBACN,GAAA,CAAA,IAAA,EAAA,EAAK,IAAM,EAAA,EAAA,EAAK,QAAK,EAAA,IAAA,EAAA,CAAA,mBAErB,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,aAAA,EAAe,QAAK,EAAA,IAAA,EAAA;AAAA;AAAA;AAAA,KAEtC;AAAA;AAGN;AACA,gBAAA,CAAiB,WAAc,GAAA,kBAAA;;;;"}

package/dist/components/Table/TableCellText/TableCellText.esm.js

@@ -14,8 +14,8 @@ const TableCellText = forwardRef(
         className: clsx(classNames.cellText, className),
         ...props,
         children: [
-          title && /* @__PURE__ */ jsx(Text, { variant: "body", children: title }),
-          description && /* @__PURE__ */ jsx(Text, { variant: "body", color: "secondary", children: description })
+          title && /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: title }),
+          description && /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: description })
         ]
       }
     );

package/dist/components/Table/TableCellText/TableCellText.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableCellText.esm.js","sources":["../../../../src/components/Table/TableCellText/TableCellText.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { TableCellTextProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellText = forwardRef<HTMLDivElement, TableCellTextProps>(\n  ({ className, title, description, ...props }, ref) => {\n    const { classNames } = useStyles('Table');\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.cellText, className)}\n        {...props}\n      >\n        {title && <Text variant=\"body\">{title}</Text>}\n        {description && (\n          <Text variant=\"body\" color=\"secondary\">\n            {description}\n          </Text>\n        )}\n      </div>\n    );\n  },\n);\nTableCellText.displayName = 'TableCellText';\n\nexport { TableCellText };\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,aAAgB,GAAA,UAAA;AAAA,EACpB,CAAC,EAAE,SAAW,EAAA,KAAA,EAAO,aAAa,GAAG,KAAA,IAAS,GAAQ,KAAA;AACpD,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,QAC7C,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,KAAA,oBAAU,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,MAAA,EAAQ,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,UACrC,+BACE,GAAA,CAAA,IAAA,EAAA,EAAK,SAAQ,MAAO,EAAA,KAAA,EAAM,aACxB,QACH,EAAA,WAAA,EAAA;AAAA;AAAA;AAAA,KAEJ;AAAA;AAGN;AACA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;"}
+{"version":3,"file":"TableCellText.esm.js","sources":["../../../../src/components/Table/TableCellText/TableCellText.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport { TableCellTextProps } from './types';\nimport { Text } from '../../Text/Text';\nimport { useStyles } from '../../../hooks/useStyles';\n\n/** @public */\nconst TableCellText = forwardRef<HTMLDivElement, TableCellTextProps>(\n  ({ className, title, description, ...props }, ref) => {\n    const { classNames } = useStyles('Table');\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.cellText, className)}\n        {...props}\n      >\n        {title && <Text variant=\"body-medium\">{title}</Text>}\n        {description && (\n          <Text variant=\"body-medium\" color=\"secondary\">\n            {description}\n          </Text>\n        )}\n      </div>\n    );\n  },\n);\nTableCellText.displayName = 'TableCellText';\n\nexport { TableCellText };\n"],"names":[],"mappings":";;;;;;AAuBA,MAAM,aAAgB,GAAA,UAAA;AAAA,EACpB,CAAC,EAAE,SAAW,EAAA,KAAA,EAAO,aAAa,GAAG,KAAA,IAAS,GAAQ,KAAA;AACpD,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,OAAO,CAAA;AAExC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,QAC7C,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,KAAA,oBAAU,GAAA,CAAA,IAAA,EAAA,EAAK,OAAQ,EAAA,aAAA,EAAe,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,UAC5C,+BACE,GAAA,CAAA,IAAA,EAAA,EAAK,SAAQ,aAAc,EAAA,KAAA,EAAM,aAC/B,QACH,EAAA,WAAA,EAAA;AAAA;AAAA;AAAA,KAEJ;AAAA;AAGN;AACA,aAAA,CAAc,WAAc,GAAA,eAAA;;;;"}

package/dist/components/Tabs/Tabs.esm.js

@@ -13,6 +13,15 @@ const useTabsContext = () => {
   }
   return context;
 };
+const isTabActive = (tabHref, currentPathname, matchStrategy) => {
+  if (matchStrategy === "exact") {
+    return tabHref === currentPathname;
+  }
+  if (tabHref === currentPathname) {
+    return true;
+  }
+  return currentPathname.startsWith(`${tabHref}/`);
+};
 const Tabs = (props) => {
   const { children, ...rest } = props;
   const { classNames } = useStyles("Tabs");
@@ -35,8 +44,11 @@ const Tabs = (props) => {
       if (isValidElement(child) && child.type === TabList) {
         const tabListChildren = Children.toArray(child.props.children);
         for (const tabChild of tabListChildren) {
-          if (isValidElement(tabChild) && tabChild.props.href === location.pathname) {
-            return tabChild.props.id;
+          if (isValidElement(tabChild) && tabChild.props.href) {
+            const strategy = tabChild.props.matchStrategy || "exact";
+            if (isTabActive(tabChild.props.href, location.pathname, strategy)) {
+              return tabChild.props.id;
+            }
           }
         }
       }
@@ -102,7 +114,7 @@ const TabList = (props) => {
   ] });
 };
 const Tab = (props) => {
-  const { href, children, id, ...rest } = props;
+  const { href, children, id, matchStrategy: _matchStrategy, ...rest } = props;
   const { classNames } = useStyles("Tabs");
   const { setTabRef } = useTabsContext();
   return /* @__PURE__ */ jsx(

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.esm.js","sources":["../../../src/components/Tabs/Tabs.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 {\n  useRef,\n  useState,\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactNode,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  TabsProps,\n  TabListProps,\n  TabPanelProps,\n  TabsContextValue,\n} from './types';\nimport { useLocation, useNavigate, useHref } from 'react-router-dom';\nimport { TabsIndicators } from './TabsIndicators';\nimport {\n  Tabs as AriaTabs,\n  TabList as AriaTabList,\n  Tab as AriaTab,\n  TabPanel as AriaTabPanel,\n  RouterProvider,\n  TabProps as AriaTabProps,\n} from 'react-aria-components';\n\nimport { useStyles } from '../../hooks/useStyles';\n\nconst TabsContext = createContext<TabsContextValue | undefined>(undefined);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('Tab components must be used within a Tabs component');\n  }\n  return context;\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const Tabs = (props: TabsProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  const [hoveredKey, setHoveredKey] = useState<string | null>(null);\n  const prevHoveredKey = useRef<string | null>(null);\n  let navigate = useNavigate();\n  const location = useLocation();\n\n  const setTabRef = (key: string, element: HTMLDivElement | null) => {\n    if (element) {\n      tabRefs.current.set(key, element);\n    } else {\n      tabRefs.current.delete(key);\n    }\n  };\n\n  // If selectedKey is not provided, try to determine it from the current route\n  const computedSelectedKey = (() => {\n    const childrenArray = Children.toArray(children as ReactNode);\n    for (const child of childrenArray) {\n      if (isValidElement(child) && child.type === TabList) {\n        const tabListChildren = Children.toArray(child.props.children);\n        for (const tabChild of tabListChildren) {\n          if (\n            isValidElement(tabChild) &&\n            tabChild.props.href === location.pathname\n          ) {\n            return tabChild.props.id;\n          }\n        }\n      }\n    }\n    return undefined;\n  })();\n\n  if (!children) return null;\n\n  const contextValue: TabsContextValue = {\n    tabsRef,\n    tabRefs,\n    hoveredKey,\n    prevHoveredKey,\n    setHoveredKey,\n    setTabRef,\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        <AriaTabs\n          className={classNames.tabs}\n          keyboardActivation=\"manual\"\n          selectedKey={computedSelectedKey}\n          ref={tabsRef}\n          {...rest}\n        >\n          {children as ReactNode}\n        </AriaTabs>\n      </RouterProvider>\n    </TabsContext.Provider>\n  );\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const TabList = (props: TabListProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } =\n    useTabsContext();\n\n  const handleHover = (key: string | null) => {\n    setHoveredKey(key);\n  };\n\n  // Clone children with additional props for hover and ref management\n  const enhancedChildren = Children.map(children as ReactNode, child => {\n    if (isValidElement(child)) {\n      return cloneElement(child, {\n        onHoverStart: () => handleHover(child.props.id as string),\n        onHoverEnd: () => handleHover(null),\n      } as Partial<AriaTabProps>);\n    }\n    return child;\n  });\n\n  return (\n    <div className={classNames.tabListWrapper}>\n      <AriaTabList\n        className={classNames.tabList}\n        aria-label=\"Toolbar tabs\"\n        {...rest}\n      >\n        {enhancedChildren}\n      </AriaTabList>\n      <TabsIndicators\n        tabRefs={tabRefs}\n        tabsRef={tabsRef}\n        hoveredKey={hoveredKey}\n        prevHoveredKey={prevHoveredKey}\n      />\n    </div>\n  );\n};\n\n/**\n * A component that renders a tab.\n *\n * @public\n */\nexport const Tab = (props: AriaTabProps) => {\n  const { href, children, id, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const { setTabRef } = useTabsContext();\n\n  return (\n    <AriaTab\n      id={id}\n      className={classNames.tab}\n      ref={el => setTabRef(id as string, el as HTMLDivElement)}\n      href={href}\n      {...rest}\n    >\n      {children}\n    </AriaTab>\n  );\n};\n\n/**\n * A component that renders the content of a tab.\n *\n * @public\n */\nexport const TabPanel = (props: TabPanelProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n\n  return (\n    <AriaTabPanel className={classNames.panel} {...rest}>\n      {children}\n    </AriaTabPanel>\n  );\n};\n"],"names":["AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}
+{"version":3,"file":"Tabs.esm.js","sources":["../../../src/components/Tabs/Tabs.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 {\n  useRef,\n  useState,\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactNode,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  TabsProps,\n  TabListProps,\n  TabPanelProps,\n  TabsContextValue,\n  TabProps,\n} from './types';\nimport { useLocation, useNavigate, useHref } from 'react-router-dom';\nimport { TabsIndicators } from './TabsIndicators';\nimport {\n  Tabs as AriaTabs,\n  TabList as AriaTabList,\n  Tab as AriaTab,\n  TabPanel as AriaTabPanel,\n  RouterProvider,\n  TabProps as AriaTabProps,\n} from 'react-aria-components';\n\nimport { useStyles } from '../../hooks/useStyles';\n\nconst TabsContext = createContext<TabsContextValue | undefined>(undefined);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('Tab components must be used within a Tabs component');\n  }\n  return context;\n};\n\n/**\n * Utility function to determine if a tab should be active based on the matching strategy.\n * This follows the pattern used in WorkaroundNavLink from the sidebar.\n */\nconst isTabActive = (\n  tabHref: string,\n  currentPathname: string,\n  matchStrategy: 'exact' | 'prefix',\n): boolean => {\n  if (matchStrategy === 'exact') {\n    return tabHref === currentPathname;\n  }\n\n  // Prefix matching - similar to WorkaroundNavLink behavior\n  if (tabHref === currentPathname) {\n    return true;\n  }\n\n  // Check if current path starts with tab href followed by a slash\n  // This prevents /foo matching /foobar\n  return currentPathname.startsWith(`${tabHref}/`);\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const Tabs = (props: TabsProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  const [hoveredKey, setHoveredKey] = useState<string | null>(null);\n  const prevHoveredKey = useRef<string | null>(null);\n  let navigate = useNavigate();\n  const location = useLocation();\n\n  const setTabRef = (key: string, element: HTMLDivElement | null) => {\n    if (element) {\n      tabRefs.current.set(key, element);\n    } else {\n      tabRefs.current.delete(key);\n    }\n  };\n\n  // If selectedKey is not provided, try to determine it from the current route\n  const computedSelectedKey = (() => {\n    const childrenArray = Children.toArray(children as ReactNode);\n    for (const child of childrenArray) {\n      if (isValidElement(child) && child.type === TabList) {\n        const tabListChildren = Children.toArray(child.props.children);\n        for (const tabChild of tabListChildren) {\n          if (isValidElement(tabChild) && tabChild.props.href) {\n            // Use tab-specific strategy, defaulting to 'exact'\n            const strategy = tabChild.props.matchStrategy || 'exact';\n            if (isTabActive(tabChild.props.href, location.pathname, strategy)) {\n              return tabChild.props.id;\n            }\n          }\n        }\n      }\n    }\n    return undefined;\n  })();\n\n  if (!children) return null;\n\n  const contextValue: TabsContextValue = {\n    tabsRef,\n    tabRefs,\n    hoveredKey,\n    prevHoveredKey,\n    setHoveredKey,\n    setTabRef,\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        <AriaTabs\n          className={classNames.tabs}\n          keyboardActivation=\"manual\"\n          selectedKey={computedSelectedKey}\n          ref={tabsRef}\n          {...rest}\n        >\n          {children as ReactNode}\n        </AriaTabs>\n      </RouterProvider>\n    </TabsContext.Provider>\n  );\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const TabList = (props: TabListProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } =\n    useTabsContext();\n\n  const handleHover = (key: string | null) => {\n    setHoveredKey(key);\n  };\n\n  // Clone children with additional props for hover and ref management\n  const enhancedChildren = Children.map(children as ReactNode, child => {\n    if (isValidElement(child)) {\n      return cloneElement(child, {\n        onHoverStart: () => handleHover(child.props.id as string),\n        onHoverEnd: () => handleHover(null),\n      } as Partial<AriaTabProps>);\n    }\n    return child;\n  });\n\n  return (\n    <div className={classNames.tabListWrapper}>\n      <AriaTabList\n        className={classNames.tabList}\n        aria-label=\"Toolbar tabs\"\n        {...rest}\n      >\n        {enhancedChildren}\n      </AriaTabList>\n      <TabsIndicators\n        tabRefs={tabRefs}\n        tabsRef={tabsRef}\n        hoveredKey={hoveredKey}\n        prevHoveredKey={prevHoveredKey}\n      />\n    </div>\n  );\n};\n\n/**\n * A component that renders a tab.\n *\n * @public\n */\nexport const Tab = (props: TabProps) => {\n  const { href, children, id, matchStrategy: _matchStrategy, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const { setTabRef } = useTabsContext();\n\n  return (\n    <AriaTab\n      id={id}\n      className={classNames.tab}\n      ref={el => setTabRef(id as string, el as HTMLDivElement)}\n      href={href}\n      {...rest}\n    >\n      {children}\n    </AriaTab>\n  );\n};\n\n/**\n * A component that renders the content of a tab.\n *\n * @public\n */\nexport const TabPanel = (props: TabPanelProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n\n  return (\n    <AriaTabPanel className={classNames.panel} {...rest}>\n      {children}\n    </AriaTabPanel>\n  );\n};\n"],"names":["AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}

package/dist/components/Text/Text.esm.js

@@ -5,7 +5,7 @@ import { useStyles } from '../../hooks/useStyles.esm.js';
 
 function TextComponent({
   as,
-  variant = "body",
+  variant = "body-medium",
   weight = "regular",
   color = "primary",
   className,
@@ -13,7 +13,7 @@ function TextComponent({
   style,
   ...restProps
 }, ref) {
-  const Component = as || "p";
+  const Component = as || "span";
   const { classNames, dataAttributes } = useStyles("Text", {
     variant,
     weight,
@@ -25,6 +25,7 @@ function TextComponent({
       ref,
       className: clsx(classNames.root, className),
       "data-truncate": truncate,
+      "data-as": as,
       ...dataAttributes,
       style,
       ...restProps

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

@@ -1 +1 @@
-{"version":3,"file":"Text.esm.js","sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { ElementType } from 'react';\nimport type { TextProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\nfunction TextComponent<T extends ElementType = 'p'>(\n  {\n    as,\n    variant = 'body',\n    weight = 'regular',\n    color = 'primary',\n    className,\n    truncate,\n    style,\n    ...restProps\n  }: TextProps<T>,\n  ref: React.Ref<any>,\n) {\n  const Component = as || 'p';\n\n  const { classNames, dataAttributes } = useStyles('Text', {\n    variant,\n    weight,\n    color,\n  });\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(classNames.root, className)}\n      data-truncate={truncate}\n      {...dataAttributes}\n      style={style}\n      {...restProps}\n    />\n  );\n}\n\nTextComponent.displayName = 'Text';\n\n/** @public */\nexport const Text = forwardRef(TextComponent) as {\n  <T extends ElementType = 'p'>(\n    props: TextProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n  ): React.ReactElement<TextProps<T>, T>;\n  displayName: string;\n};\n\nText.displayName = 'Text';\n"],"names":[],"mappings":";;;;;AAsBA,SAAS,aACP,CAAA;AAAA,EACE,EAAA;AAAA,EACA,OAAU,GAAA,MAAA;AAAA,EACV,MAAS,GAAA,SAAA;AAAA,EACT,KAAQ,GAAA,SAAA;AAAA,EACR,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,YAAY,EAAM,IAAA,GAAA;AAExB,EAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,MAAQ,EAAA;AAAA,IACvD,OAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,eAAe,EAAA,QAAA;AAAA,MACd,GAAG,cAAA;AAAA,MACJ,KAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,aAAA,CAAc,WAAc,GAAA,MAAA;AAGf,MAAA,IAAA,GAAO,WAAW,aAAa;AAO5C,IAAA,CAAK,WAAc,GAAA,MAAA;;;;"}
+{"version":3,"file":"Text.esm.js","sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { ElementType } from 'react';\nimport type { TextProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\nfunction TextComponent<T extends ElementType = 'span'>(\n  {\n    as,\n    variant = 'body-medium',\n    weight = 'regular',\n    color = 'primary',\n    className,\n    truncate,\n    style,\n    ...restProps\n  }: TextProps<T>,\n  ref: React.Ref<any>,\n) {\n  const Component = as || 'span';\n\n  const { classNames, dataAttributes } = useStyles('Text', {\n    variant,\n    weight,\n    color,\n  });\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(classNames.root, className)}\n      data-truncate={truncate}\n      data-as={as}\n      {...dataAttributes}\n      style={style}\n      {...restProps}\n    />\n  );\n}\n\nTextComponent.displayName = 'Text';\n\n/** @public */\nexport const Text = forwardRef(TextComponent) as {\n  <T extends ElementType = 'p'>(\n    props: TextProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n  ): React.ReactElement<TextProps<T>, T>;\n  displayName: string;\n};\n\nText.displayName = 'Text';\n"],"names":[],"mappings":";;;;;AAsBA,SAAS,aACP,CAAA;AAAA,EACE,EAAA;AAAA,EACA,OAAU,GAAA,aAAA;AAAA,EACV,MAAS,GAAA,SAAA;AAAA,EACT,KAAQ,GAAA,SAAA;AAAA,EACR,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,YAAY,EAAM,IAAA,MAAA;AAExB,EAAA,MAAM,EAAE,UAAA,EAAY,cAAe,EAAA,GAAI,UAAU,MAAQ,EAAA;AAAA,IACvD,OAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,eAAe,EAAA,QAAA;AAAA,MACf,SAAS,EAAA,EAAA;AAAA,MACR,GAAG,cAAA;AAAA,MACJ,KAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,aAAA,CAAc,WAAc,GAAA,MAAA;AAGf,MAAA,IAAA,GAAO,WAAW,aAAa;AAO5C,IAAA,CAAK,WAAc,GAAA,MAAA;;;;"}

package/dist/components/Tooltip/Tooltip.esm.js

@@ -18,14 +18,17 @@ const Tooltip = forwardRef(
         ...rest,
         ref,
         children: [
-          /* @__PURE__ */ jsx(OverlayArrow, { className: classNames.arrow, children: /* @__PURE__ */ jsx("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx("path", { d: "M0 0 L4 4 L8 0" }) }) }),
+          /* @__PURE__ */ jsx(OverlayArrow, { className: classNames.arrow, children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
+            /* @__PURE__ */ jsx("path", { d: "M10.3356 7.39793L15.1924 3.02682C15.9269 2.36577 16.8801 2 17.8683 2H20V7.94781e-07L1.74846e-07 -9.53674e-07L0 2L1.4651 2C2.4532 2 3.4064 2.36577 4.1409 3.02682L8.9977 7.39793C9.378 7.7402 9.9553 7.74021 10.3356 7.39793Z" }),
+            /* @__PURE__ */ jsx("path", { d: "M11.0046 8.14124C10.2439 8.82575 9.08939 8.82578 8.32869 8.14122L3.47189 3.77011C2.92109 3.27432 2.20619 2.99999 1.46509 2.99999L4.10999 3L8.99769 7.39793C9.37799 7.7402 9.95529 7.7402 10.3356 7.39793L15.2226 3L17.8683 2.99999C17.1271 2.99999 16.4122 3.27432 15.8614 3.77011L11.0046 8.14124Z" })
+          ] }) }),
           children
         ]
       }
     );
   }
 );
-Tooltip.displayName = Tooltip.displayName;
+Tooltip.displayName = "Tooltip";
 
 export { Tooltip, TooltipTrigger };
 //# sourceMappingURL=Tooltip.esm.js.map