@backstage/ui 0.7.0-next.2 → 0.7.0

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, 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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"}
+{"version":3,"file":"HeaderToolbar.esm.js","sources":["../../../src/components/Header/HeaderToolbar.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Link, RouterProvider } from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { useRef } from 'react';\nimport { RiShapesLine } from '@remixicon/react';\nimport type { HeaderToolbarProps } from './types';\nimport { Text } from '../Text';\nimport { useNavigate, useHref } from 'react-router-dom';\n\n/**\n * A component that renders a toolbar.\n *\n * @internal\n */\nexport const HeaderToolbar = (props: HeaderToolbarProps) => {\n  const { icon, title, titleLink, customActions, hasTabs } = props;\n  const { classNames } = useStyles('Header');\n  let navigate = useNavigate();\n\n  // Refs for collision detection\n  const toolbarWrapperRef = useRef<HTMLDivElement>(null);\n  const toolbarContentRef = useRef<HTMLDivElement>(null);\n  const toolbarControlsRef = useRef<HTMLDivElement>(null);\n\n  const titleContent = (\n    <>\n      <div className={classNames.toolbarIcon}>{icon || <RiShapesLine />}</div>\n      <Text variant=\"body-medium\">{title || 'Your plugin'}</Text>\n    </>\n  );\n\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <div className={classNames.toolbar} data-has-tabs={hasTabs}>\n        <div className={classNames.toolbarWrapper} ref={toolbarWrapperRef}>\n          <div className={classNames.toolbarContent} ref={toolbarContentRef}>\n            <Text as=\"h1\" variant=\"body-medium\">\n              {titleLink ? (\n                <Link className={classNames.toolbarName} href={titleLink}>\n                  {titleContent}\n                </Link>\n              ) : (\n                <div className={classNames.toolbarName}>{titleContent}</div>\n              )}\n            </Text>\n          </div>\n          <div className={classNames.toolbarControls} ref={toolbarControlsRef}>\n            {customActions}\n          </div>\n        </div>\n      </div>\n    </RouterProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA6BO,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA8B;AAC1D,EAAA,MAAM,EAAE,IAAA,EAAM,KAAA,EAAO,SAAA,EAAW,aAAA,EAAe,SAAQ,GAAI,KAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,QAAQ,CAAA;AACzC,EAAA,IAAI,WAAW,WAAA,EAAY;AAG3B,EAAA,MAAM,iBAAA,GAAoB,OAAuB,IAAI,CAAA;AACrD,EAAA,MAAM,iBAAA,GAAoB,OAAuB,IAAI,CAAA;AACrD,EAAA,MAAM,kBAAA,GAAqB,OAAuB,IAAI,CAAA;AAEtD,EAAA,MAAM,+BACJ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAI,SAAA,EAAW,UAAA,CAAW,aAAc,QAAA,EAAA,IAAA,oBAAQ,GAAA,CAAC,gBAAa,CAAA,EAAG,CAAA;AAAA,oBAClE,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,aAAA,EAAe,mBAAS,aAAA,EAAc;AAAA,GAAA,EACtD,CAAA;AAGF,EAAA,2BACG,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,GAAA,CAAC,SAAI,SAAA,EAAW,UAAA,CAAW,OAAA,EAAS,eAAA,EAAe,SACjD,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAW,UAAA,CAAW,cAAA,EAAgB,KAAK,iBAAA,EAC9C,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,cAAA,EAAgB,GAAA,EAAK,iBAAA,EAC9C,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,IAAA,EAAK,OAAA,EAAQ,aAAA,EACnB,QAAA,EAAA,SAAA,mBACC,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,UAAA,CAAW,WAAA,EAAa,IAAA,EAAM,SAAA,EAC5C,QAAA,EAAA,YAAA,EACH,CAAA,mBAEA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,WAAA,EAAc,QAAA,EAAA,YAAA,EAAa,GAE1D,CAAA,EACF,CAAA;AAAA,wBACC,KAAA,EAAA,EAAI,SAAA,EAAW,WAAW,eAAA,EAAiB,GAAA,EAAK,oBAC9C,QAAA,EAAA,aAAA,EACH;AAAA,GAAA,EACF,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,44 +1,35 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Menu } from '../Menu/Menu.esm.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Text } from '../Text/Text.esm.js';
-import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
-import { RiMore2Line } from '@remixicon/react';
+import { RiArrowRightSLine } from '@remixicon/react';
 import { Tabs, TabList, Tab } from '../Tabs/Tabs.esm.js';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import { Container } from '../Container/Container.esm.js';
+import { Link } from '../Link/Link.esm.js';
 
 const HeaderPage = (props) => {
-  const { title, menuItems, tabs, customActions } = props;
+  const { title, tabs, customActions, breadcrumbs } = props;
   const { classNames } = useStyles("HeaderPage");
-  return /* @__PURE__ */ jsxs("div", { className: classNames.root, children: [
+  return /* @__PURE__ */ jsxs(Container, { className: classNames.root, children: [
     /* @__PURE__ */ jsxs("div", { className: classNames.content, children: [
-      /* @__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: [
+      /* @__PURE__ */ jsxs("div", { className: classNames.breadcrumbs, children: [
+        breadcrumbs && breadcrumbs.map((breadcrumb) => /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
-            Menu.Trigger,
+            Link,
             {
-              render: (props2) => /* @__PURE__ */ jsx(
-                ButtonIcon,
-                {
-                  ...props2,
-                  size: "small",
-                  icon: /* @__PURE__ */ jsx(RiMore2Line, {}),
-                  variant: "tertiary"
-                }
-              )
+              href: breadcrumb.href,
+              variant: "title-small",
+              weight: "bold",
+              color: "secondary",
+              truncate: true,
+              style: { maxWidth: "240px" },
+              children: breadcrumb.label
             }
           ),
-          /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { sideOffset: 4, align: "end", children: /* @__PURE__ */ jsx(Menu.Popup, { children: menuItems.map((menuItem) => /* @__PURE__ */ jsx(
-            Menu.Item,
-            {
-              onClick: () => menuItem.onClick?.(),
-              children: menuItem.label
-            },
-            menuItem.value
-          )) }) }) })
-        ] })
-      ] })
+          /* @__PURE__ */ jsx(RiArrowRightSLine, { size: 16, color: "var(--bui-fg-secondary)" })
+        ] }, breadcrumb.label)),
+        /* @__PURE__ */ jsx(Text, { variant: "title-small", weight: "bold", as: "h2", children: title })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: classNames.controls, children: customActions })
     ] }),
     tabs && /* @__PURE__ */ jsx("div", { className: classNames.tabsWrapper, children: /* @__PURE__ */ jsx(Tabs, { children: /* @__PURE__ */ jsx(TabList, { children: tabs.map((tab) => /* @__PURE__ */ jsx(
       Tab,

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 { 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;;;;"}
+{"version":3,"file":"HeaderPage.esm.js","sources":["../../../src/components/HeaderPage/HeaderPage.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { HeaderPageProps } from './types';\nimport { Text } from '../Text';\nimport { RiArrowRightSLine } from '@remixicon/react';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\nimport { Container } from '../Container';\nimport { Link } from '../Link';\nimport { Fragment } from 'react/jsx-runtime';\n\n/**\n * A component that renders a header page.\n *\n * @public\n */\nexport const HeaderPage = (props: HeaderPageProps) => {\n  const { title, tabs, customActions, breadcrumbs } = props;\n  const { classNames } = useStyles('HeaderPage');\n\n  return (\n    <Container className={classNames.root}>\n      <div className={classNames.content}>\n        <div className={classNames.breadcrumbs}>\n          {breadcrumbs &&\n            breadcrumbs.map(breadcrumb => (\n              <Fragment key={breadcrumb.label}>\n                <Link\n                  href={breadcrumb.href}\n                  variant=\"title-small\"\n                  weight=\"bold\"\n                  color=\"secondary\"\n                  truncate\n                  style={{ maxWidth: '240px' }}\n                >\n                  {breadcrumb.label}\n                </Link>\n                <RiArrowRightSLine size={16} color=\"var(--bui-fg-secondary)\" />\n              </Fragment>\n            ))}\n          <Text variant=\"title-small\" weight=\"bold\" as=\"h2\">\n            {title}\n          </Text>\n        </div>\n        <div className={classNames.controls}>{customActions}</div>\n      </div>\n      {tabs && (\n        <div className={classNames.tabsWrapper}>\n          <Tabs>\n            <TabList>\n              {tabs.map(tab => (\n                <Tab\n                  key={tab.id}\n                  id={tab.id}\n                  href={tab.href}\n                  matchStrategy={tab.matchStrategy}\n                >\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </div>\n      )}\n    </Container>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA8BO,MAAM,UAAA,GAAa,CAAC,KAAA,KAA2B;AACpD,EAAA,MAAM,EAAE,KAAA,EAAO,IAAA,EAAM,aAAA,EAAe,aAAY,GAAI,KAAA;AACpD,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,YAAY,CAAA;AAE7C,EAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,UAAA,CAAW,IAAA,EAC/B,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,OAAA,EACzB,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,WAAA,EACxB,QAAA,EAAA;AAAA,QAAA,WAAA,IACC,WAAA,CAAY,GAAA,CAAI,CAAA,UAAA,qBACd,IAAA,CAAC,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,MAAM,UAAA,CAAW,IAAA;AAAA,cACjB,OAAA,EAAQ,aAAA;AAAA,cACR,MAAA,EAAO,MAAA;AAAA,cACP,KAAA,EAAM,WAAA;AAAA,cACN,QAAA,EAAQ,IAAA;AAAA,cACR,KAAA,EAAO,EAAE,QAAA,EAAU,OAAA,EAAQ;AAAA,cAE1B,QAAA,EAAA,UAAA,CAAW;AAAA;AAAA,WACd;AAAA,0BACA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,EAAA,EAAI,OAAM,yBAAA,EAA0B;AAAA,SAAA,EAAA,EAXhD,UAAA,CAAW,KAY1B,CACD,CAAA;AAAA,wBACH,GAAA,CAAC,QAAK,OAAA,EAAQ,aAAA,EAAc,QAAO,MAAA,EAAO,EAAA,EAAG,MAC1C,QAAA,EAAA,KAAA,EACH;AAAA,OAAA,EACF,CAAA;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,UAAW,QAAA,EAAA,aAAA,EAAc;AAAA,KAAA,EACtD,CAAA;AAAA,IACC,IAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,WAAA,EACzB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACE,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAA,GAAA,qBACR,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QAEC,IAAI,GAAA,CAAI,EAAA;AAAA,QACR,MAAM,GAAA,CAAI,IAAA;AAAA,QACV,eAAe,GAAA,CAAI,aAAA;AAAA,QAElB,QAAA,EAAA,GAAA,CAAI;AAAA,OAAA;AAAA,MALA,GAAA,CAAI;AAAA,KAOZ,CAAA,EACH,CAAA,EACF,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.esm.js","sources":["../../../src/components/Icon/Icon.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 { ComponentType } from 'react';\nimport { useIcons } from './context';\nimport type { IconProps } from './types';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Icon = (props: IconProps) => {\n  const { name, size, className, style, ...restProps } = props;\n  const { icons } = useIcons();\n\n  const BckstageIcon = icons[name] as ComponentType<Omit<IconProps, 'name'>>;\n\n  if (!BckstageIcon) {\n    console.error(`Icon \"${name}\" not found or is not a valid component.`);\n    return null;\n  }\n\n  const { classNames } = useStyles('Icon');\n\n  return (\n    <BckstageIcon\n      className={clsx(classNames.root, className)}\n      style={{\n        ...(size ? { width: size, height: size } : {}),\n        ...style,\n      }}\n      {...restProps}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAuBa,MAAA,IAAA,GAAO,CAAC,KAAqB,KAAA;AACxC,EAAA,MAAM,EAAE,IAAM,EAAA,IAAA,EAAM,WAAW,KAAO,EAAA,GAAG,WAAc,GAAA,KAAA;AACvD,EAAM,MAAA,EAAE,KAAM,EAAA,GAAI,QAAS,EAAA;AAE3B,EAAM,MAAA,YAAA,GAAe,MAAM,IAAI,CAAA;AAE/B,EAAA,IAAI,CAAC,YAAc,EAAA;AACjB,IAAQ,OAAA,CAAA,KAAA,CAAM,CAAS,MAAA,EAAA,IAAI,CAA0C,wCAAA,CAAA,CAAA;AACrE,IAAO,OAAA,IAAA;AAAA;AAGT,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,MAAM,CAAA;AAEvC,EACE,uBAAA,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,KAAO,EAAA;AAAA,QACL,GAAI,OAAO,EAAE,KAAA,EAAO,MAAM,MAAQ,EAAA,IAAA,KAAS,EAAC;AAAA,QAC5C,GAAG;AAAA,OACL;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}
+{"version":3,"file":"Icon.esm.js","sources":["../../../src/components/Icon/Icon.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 { ComponentType } from 'react';\nimport { useIcons } from './context';\nimport type { IconProps } from './types';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Icon = (props: IconProps) => {\n  const { name, size, className, style, ...restProps } = props;\n  const { icons } = useIcons();\n\n  const BckstageIcon = icons[name] as ComponentType<Omit<IconProps, 'name'>>;\n\n  if (!BckstageIcon) {\n    console.error(`Icon \"${name}\" not found or is not a valid component.`);\n    return null;\n  }\n\n  const { classNames } = useStyles('Icon');\n\n  return (\n    <BckstageIcon\n      className={clsx(classNames.root, className)}\n      style={{\n        ...(size ? { width: size, height: size } : {}),\n        ...style,\n      }}\n      {...restProps}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAuBO,MAAM,IAAA,GAAO,CAAC,KAAA,KAAqB;AACxC,EAAA,MAAM,EAAE,IAAA,EAAM,IAAA,EAAM,WAAW,KAAA,EAAO,GAAG,WAAU,GAAI,KAAA;AACvD,EAAA,MAAM,EAAE,KAAA,EAAM,GAAI,QAAA,EAAS;AAE3B,EAAA,MAAM,YAAA,GAAe,MAAM,IAAI,CAAA;AAE/B,EAAA,IAAI,CAAC,YAAA,EAAc;AACjB,IAAA,OAAA,CAAQ,KAAA,CAAM,CAAA,MAAA,EAAS,IAAI,CAAA,wCAAA,CAA0C,CAAA;AACrE,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,MAAM,CAAA;AAEvC,EAAA,uBACE,GAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,KAAA,EAAO;AAAA,QACL,GAAI,OAAO,EAAE,KAAA,EAAO,MAAM,MAAA,EAAQ,IAAA,KAAS,EAAC;AAAA,QAC5C,GAAG;AAAA,OACL;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}

package/dist/components/Icon/context.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.esm.js","sources":["../../../src/components/Icon/context.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 { createContext, useContext } from 'react';\nimport { icons } from './icons';\nimport type { IconContextProps } from './types';\n\n/** @public */\nexport const IconContext = createContext<IconContextProps>({\n  icons,\n});\n\n/** @public */\nexport const useIcons = () => useContext(IconContext);\n"],"names":[],"mappings":";;;AAqBO,MAAM,cAAc,aAAgC,CAAA;AAAA,EACzD;AACF,CAAC;AAGY,MAAA,QAAA,GAAW,MAAM,UAAA,CAAW,WAAW;;;;"}
+{"version":3,"file":"context.esm.js","sources":["../../../src/components/Icon/context.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 { createContext, useContext } from 'react';\nimport { icons } from './icons';\nimport type { IconContextProps } from './types';\n\n/** @public */\nexport const IconContext = createContext<IconContextProps>({\n  icons,\n});\n\n/** @public */\nexport const useIcons = () => useContext(IconContext);\n"],"names":[],"mappings":";;;AAqBO,MAAM,cAAc,aAAA,CAAgC;AAAA,EACzD;AACF,CAAC;AAGM,MAAM,QAAA,GAAW,MAAM,UAAA,CAAW,WAAW;;;;"}

package/dist/components/Icon/icons.esm.js

@@ -1,4 +1,4 @@
-import { RiAccountCircleLine, RiAlertLine, RiArrowDownLine, RiArrowDownCircleLine, RiArrowDropDownLine, RiArrowDropLeftLine, RiArrowDropRightLine, RiArrowDropUpLine, RiArrowLeftLine, RiArrowLeftCircleLine, RiArrowLeftDownLine, RiArrowLeftUpLine, RiArrowRightLine, RiArrowRightCircleLine, RiArrowRightDownLine, RiArrowRightUpLine, RiArrowUpLine, RiArrowUpCircleLine, RiBracesLine, RiBracketsLine, RiBugLine, RiCheckLine, RiCheckDoubleLine, RiArrowDownSLine, RiArrowLeftSLine, RiArrowRightSLine, RiArrowUpSLine, RiCloseLine, RiCloudLine, RiCodeLine, RiDiscordLine, RiDownloadLine, RiExternalLinkLine, RiEyeLine, RiEyeOffLine, RiFilterLine, RiFlowerLine, RiGithubLine, RiGitRepositoryLine, RiGroupLine, RiHeartLine, RiMoonLine, RiAddLine, RiSearchLine, RiSidebarFoldLine, RiSidebarUnfoldLine, RiSparklingLine, RiStarLine, RiSunLine, RiTerminalLine, RiDeleteBin6Line, RiUploadLine, RiUserLine, RiYoutubeLine, RiZoomInLine, RiZoomOutLine } from '@remixicon/react';
+import { RiZoomOutLine, RiZoomInLine, RiYoutubeLine, RiUserLine, RiUploadLine, RiDeleteBin6Line, RiTerminalLine, RiSunLine, RiStarLine, RiSparklingLine, RiSidebarUnfoldLine, RiSidebarFoldLine, RiSearchLine, RiAddLine, RiMoonLine, RiHeartLine, RiGroupLine, RiGitRepositoryLine, RiGithubLine, RiFlowerLine, RiFilterLine, RiEyeOffLine, RiEyeLine, RiExternalLinkLine, RiDownloadLine, RiDiscordLine, RiCodeLine, RiCloudLine, RiCloseLine, RiArrowUpSLine, RiArrowRightSLine, RiArrowLeftSLine, RiArrowDownSLine, RiCheckDoubleLine, RiCheckLine, RiBugLine, RiBracketsLine, RiBracesLine, RiArrowUpCircleLine, RiArrowUpLine, RiArrowRightUpLine, RiArrowRightDownLine, RiArrowRightCircleLine, RiArrowRightLine, RiArrowLeftUpLine, RiArrowLeftDownLine, RiArrowLeftCircleLine, RiArrowLeftLine, RiArrowDropUpLine, RiArrowDropRightLine, RiArrowDropLeftLine, RiArrowDropDownLine, RiArrowDownCircleLine, RiArrowDownLine, RiAlertLine, RiAccountCircleLine } from '@remixicon/react';
 
 const icons = {
   "account-circle": RiAccountCircleLine,

package/dist/components/Icon/icons.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.esm.js","sources":["../../../src/components/Icon/icons.ts"],"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\n// We can add custom icons to the list outside of Remix\n\nimport type { IconMap } from './types';\nimport {\n  RiHeartLine,\n  RiArrowDownLine,\n  RiCloudLine,\n  RiArrowLeftLine,\n  RiArrowRightLine,\n  RiArrowUpLine,\n  RiDeleteBin6Line,\n  RiAddLine,\n  RiArrowDownSLine,\n  RiArrowUpSLine,\n  RiArrowLeftSLine,\n  RiArrowRightSLine,\n  RiArrowDownCircleLine,\n  RiArrowLeftCircleLine,\n  RiArrowRightCircleLine,\n  RiArrowUpCircleLine,\n  RiCheckLine,\n  RiMoonLine,\n  RiSunLine,\n  RiExternalLinkLine,\n  RiArrowLeftDownLine,\n  RiArrowRightDownLine,\n  RiArrowLeftUpLine,\n  RiArrowRightUpLine,\n  RiArrowDropDownLine,\n  RiArrowDropUpLine,\n  RiArrowDropLeftLine,\n  RiArrowDropRightLine,\n  RiSparklingLine,\n  RiFlowerLine,\n  RiCodeLine,\n  RiTerminalLine,\n  RiBracketsLine,\n  RiBracesLine,\n  RiBugLine,\n  RiGitRepositoryLine,\n  RiCheckDoubleLine,\n  RiFilterLine,\n  RiEyeLine,\n  RiEyeOffLine,\n  RiDownloadLine,\n  RiUploadLine,\n  RiStarLine,\n  RiSidebarFoldLine,\n  RiSidebarUnfoldLine,\n  RiZoomInLine,\n  RiZoomOutLine,\n  RiAlertLine,\n  RiAccountCircleLine,\n  RiGroupLine,\n  RiUserLine,\n  RiGithubLine,\n  RiDiscordLine,\n  RiYoutubeLine,\n  RiCloseLine,\n  RiSearchLine,\n} from '@remixicon/react';\n\n/** @public */\nexport const icons: IconMap = {\n  'account-circle': RiAccountCircleLine,\n  alert: RiAlertLine,\n  'arrow-down': RiArrowDownLine,\n  'arrow-down-circle': RiArrowDownCircleLine,\n  'caret-down': RiArrowDropDownLine,\n  'caret-left': RiArrowDropLeftLine,\n  'caret-right': RiArrowDropRightLine,\n  'caret-up': RiArrowDropUpLine,\n  'arrow-left': RiArrowLeftLine,\n  'arrow-left-circle': RiArrowLeftCircleLine,\n  'arrow-left-down': RiArrowLeftDownLine,\n  'arrow-left-up': RiArrowLeftUpLine,\n  'arrow-right': RiArrowRightLine,\n  'arrow-right-circle': RiArrowRightCircleLine,\n  'arrow-right-down': RiArrowRightDownLine,\n  'arrow-right-up': RiArrowRightUpLine,\n  'arrow-up': RiArrowUpLine,\n  'arrow-up-circle': RiArrowUpCircleLine,\n  braces: RiBracesLine,\n  brackets: RiBracketsLine,\n  bug: RiBugLine,\n  check: RiCheckLine,\n  'check-double': RiCheckDoubleLine,\n  'chevron-down': RiArrowDownSLine,\n  'chevron-left': RiArrowLeftSLine,\n  'chevron-right': RiArrowRightSLine,\n  'chevron-up': RiArrowUpSLine,\n  close: RiCloseLine,\n  cloud: RiCloudLine,\n  code: RiCodeLine,\n  discord: RiDiscordLine,\n  download: RiDownloadLine,\n  'external-link': RiExternalLinkLine,\n  eye: RiEyeLine,\n  'eye-off': RiEyeOffLine,\n  filter: RiFilterLine,\n  flower: RiFlowerLine,\n  github: RiGithubLine,\n  'git-repository': RiGitRepositoryLine,\n  group: RiGroupLine,\n  heart: RiHeartLine,\n  moon: RiMoonLine,\n  plus: RiAddLine,\n  search: RiSearchLine,\n  'sidebar-fold': RiSidebarFoldLine,\n  'sidebar-unfold': RiSidebarUnfoldLine,\n  sparkling: RiSparklingLine,\n  star: RiStarLine,\n  sun: RiSunLine,\n  terminal: RiTerminalLine,\n  trash: RiDeleteBin6Line,\n  upload: RiUploadLine,\n  user: RiUserLine,\n  youtube: RiYoutubeLine,\n  'zoom-in': RiZoomInLine,\n  'zoom-out': RiZoomOutLine,\n} as const;\n"],"names":[],"mappings":";;AA+EO,MAAM,KAAiB,GAAA;AAAA,EAC5B,gBAAkB,EAAA,mBAAA;AAAA,EAClB,KAAO,EAAA,WAAA;AAAA,EACP,YAAc,EAAA,eAAA;AAAA,EACd,mBAAqB,EAAA,qBAAA;AAAA,EACrB,YAAc,EAAA,mBAAA;AAAA,EACd,YAAc,EAAA,mBAAA;AAAA,EACd,aAAe,EAAA,oBAAA;AAAA,EACf,UAAY,EAAA,iBAAA;AAAA,EACZ,YAAc,EAAA,eAAA;AAAA,EACd,mBAAqB,EAAA,qBAAA;AAAA,EACrB,iBAAmB,EAAA,mBAAA;AAAA,EACnB,eAAiB,EAAA,iBAAA;AAAA,EACjB,aAAe,EAAA,gBAAA;AAAA,EACf,oBAAsB,EAAA,sBAAA;AAAA,EACtB,kBAAoB,EAAA,oBAAA;AAAA,EACpB,gBAAkB,EAAA,kBAAA;AAAA,EAClB,UAAY,EAAA,aAAA;AAAA,EACZ,iBAAmB,EAAA,mBAAA;AAAA,EACnB,MAAQ,EAAA,YAAA;AAAA,EACR,QAAU,EAAA,cAAA;AAAA,EACV,GAAK,EAAA,SAAA;AAAA,EACL,KAAO,EAAA,WAAA;AAAA,EACP,cAAgB,EAAA,iBAAA;AAAA,EAChB,cAAgB,EAAA,gBAAA;AAAA,EAChB,cAAgB,EAAA,gBAAA;AAAA,EAChB,eAAiB,EAAA,iBAAA;AAAA,EACjB,YAAc,EAAA,cAAA;AAAA,EACd,KAAO,EAAA,WAAA;AAAA,EACP,KAAO,EAAA,WAAA;AAAA,EACP,IAAM,EAAA,UAAA;AAAA,EACN,OAAS,EAAA,aAAA;AAAA,EACT,QAAU,EAAA,cAAA;AAAA,EACV,eAAiB,EAAA,kBAAA;AAAA,EACjB,GAAK,EAAA,SAAA;AAAA,EACL,SAAW,EAAA,YAAA;AAAA,EACX,MAAQ,EAAA,YAAA;AAAA,EACR,MAAQ,EAAA,YAAA;AAAA,EACR,MAAQ,EAAA,YAAA;AAAA,EACR,gBAAkB,EAAA,mBAAA;AAAA,EAClB,KAAO,EAAA,WAAA;AAAA,EACP,KAAO,EAAA,WAAA;AAAA,EACP,IAAM,EAAA,UAAA;AAAA,EACN,IAAM,EAAA,SAAA;AAAA,EACN,MAAQ,EAAA,YAAA;AAAA,EACR,cAAgB,EAAA,iBAAA;AAAA,EAChB,gBAAkB,EAAA,mBAAA;AAAA,EAClB,SAAW,EAAA,eAAA;AAAA,EACX,IAAM,EAAA,UAAA;AAAA,EACN,GAAK,EAAA,SAAA;AAAA,EACL,QAAU,EAAA,cAAA;AAAA,EACV,KAAO,EAAA,gBAAA;AAAA,EACP,MAAQ,EAAA,YAAA;AAAA,EACR,IAAM,EAAA,UAAA;AAAA,EACN,OAAS,EAAA,aAAA;AAAA,EACT,SAAW,EAAA,YAAA;AAAA,EACX,UAAY,EAAA;AACd;;;;"}
+{"version":3,"file":"icons.esm.js","sources":["../../../src/components/Icon/icons.ts"],"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\n// We can add custom icons to the list outside of Remix\n\nimport type { IconMap } from './types';\nimport {\n  RiHeartLine,\n  RiArrowDownLine,\n  RiCloudLine,\n  RiArrowLeftLine,\n  RiArrowRightLine,\n  RiArrowUpLine,\n  RiDeleteBin6Line,\n  RiAddLine,\n  RiArrowDownSLine,\n  RiArrowUpSLine,\n  RiArrowLeftSLine,\n  RiArrowRightSLine,\n  RiArrowDownCircleLine,\n  RiArrowLeftCircleLine,\n  RiArrowRightCircleLine,\n  RiArrowUpCircleLine,\n  RiCheckLine,\n  RiMoonLine,\n  RiSunLine,\n  RiExternalLinkLine,\n  RiArrowLeftDownLine,\n  RiArrowRightDownLine,\n  RiArrowLeftUpLine,\n  RiArrowRightUpLine,\n  RiArrowDropDownLine,\n  RiArrowDropUpLine,\n  RiArrowDropLeftLine,\n  RiArrowDropRightLine,\n  RiSparklingLine,\n  RiFlowerLine,\n  RiCodeLine,\n  RiTerminalLine,\n  RiBracketsLine,\n  RiBracesLine,\n  RiBugLine,\n  RiGitRepositoryLine,\n  RiCheckDoubleLine,\n  RiFilterLine,\n  RiEyeLine,\n  RiEyeOffLine,\n  RiDownloadLine,\n  RiUploadLine,\n  RiStarLine,\n  RiSidebarFoldLine,\n  RiSidebarUnfoldLine,\n  RiZoomInLine,\n  RiZoomOutLine,\n  RiAlertLine,\n  RiAccountCircleLine,\n  RiGroupLine,\n  RiUserLine,\n  RiGithubLine,\n  RiDiscordLine,\n  RiYoutubeLine,\n  RiCloseLine,\n  RiSearchLine,\n} from '@remixicon/react';\n\n/** @public */\nexport const icons: IconMap = {\n  'account-circle': RiAccountCircleLine,\n  alert: RiAlertLine,\n  'arrow-down': RiArrowDownLine,\n  'arrow-down-circle': RiArrowDownCircleLine,\n  'caret-down': RiArrowDropDownLine,\n  'caret-left': RiArrowDropLeftLine,\n  'caret-right': RiArrowDropRightLine,\n  'caret-up': RiArrowDropUpLine,\n  'arrow-left': RiArrowLeftLine,\n  'arrow-left-circle': RiArrowLeftCircleLine,\n  'arrow-left-down': RiArrowLeftDownLine,\n  'arrow-left-up': RiArrowLeftUpLine,\n  'arrow-right': RiArrowRightLine,\n  'arrow-right-circle': RiArrowRightCircleLine,\n  'arrow-right-down': RiArrowRightDownLine,\n  'arrow-right-up': RiArrowRightUpLine,\n  'arrow-up': RiArrowUpLine,\n  'arrow-up-circle': RiArrowUpCircleLine,\n  braces: RiBracesLine,\n  brackets: RiBracketsLine,\n  bug: RiBugLine,\n  check: RiCheckLine,\n  'check-double': RiCheckDoubleLine,\n  'chevron-down': RiArrowDownSLine,\n  'chevron-left': RiArrowLeftSLine,\n  'chevron-right': RiArrowRightSLine,\n  'chevron-up': RiArrowUpSLine,\n  close: RiCloseLine,\n  cloud: RiCloudLine,\n  code: RiCodeLine,\n  discord: RiDiscordLine,\n  download: RiDownloadLine,\n  'external-link': RiExternalLinkLine,\n  eye: RiEyeLine,\n  'eye-off': RiEyeOffLine,\n  filter: RiFilterLine,\n  flower: RiFlowerLine,\n  github: RiGithubLine,\n  'git-repository': RiGitRepositoryLine,\n  group: RiGroupLine,\n  heart: RiHeartLine,\n  moon: RiMoonLine,\n  plus: RiAddLine,\n  search: RiSearchLine,\n  'sidebar-fold': RiSidebarFoldLine,\n  'sidebar-unfold': RiSidebarUnfoldLine,\n  sparkling: RiSparklingLine,\n  star: RiStarLine,\n  sun: RiSunLine,\n  terminal: RiTerminalLine,\n  trash: RiDeleteBin6Line,\n  upload: RiUploadLine,\n  user: RiUserLine,\n  youtube: RiYoutubeLine,\n  'zoom-in': RiZoomInLine,\n  'zoom-out': RiZoomOutLine,\n} as const;\n"],"names":[],"mappings":";;AA+EO,MAAM,KAAA,GAAiB;AAAA,EAC5B,gBAAA,EAAkB,mBAAA;AAAA,EAClB,KAAA,EAAO,WAAA;AAAA,EACP,YAAA,EAAc,eAAA;AAAA,EACd,mBAAA,EAAqB,qBAAA;AAAA,EACrB,YAAA,EAAc,mBAAA;AAAA,EACd,YAAA,EAAc,mBAAA;AAAA,EACd,aAAA,EAAe,oBAAA;AAAA,EACf,UAAA,EAAY,iBAAA;AAAA,EACZ,YAAA,EAAc,eAAA;AAAA,EACd,mBAAA,EAAqB,qBAAA;AAAA,EACrB,iBAAA,EAAmB,mBAAA;AAAA,EACnB,eAAA,EAAiB,iBAAA;AAAA,EACjB,aAAA,EAAe,gBAAA;AAAA,EACf,oBAAA,EAAsB,sBAAA;AAAA,EACtB,kBAAA,EAAoB,oBAAA;AAAA,EACpB,gBAAA,EAAkB,kBAAA;AAAA,EAClB,UAAA,EAAY,aAAA;AAAA,EACZ,iBAAA,EAAmB,mBAAA;AAAA,EACnB,MAAA,EAAQ,YAAA;AAAA,EACR,QAAA,EAAU,cAAA;AAAA,EACV,GAAA,EAAK,SAAA;AAAA,EACL,KAAA,EAAO,WAAA;AAAA,EACP,cAAA,EAAgB,iBAAA;AAAA,EAChB,cAAA,EAAgB,gBAAA;AAAA,EAChB,cAAA,EAAgB,gBAAA;AAAA,EAChB,eAAA,EAAiB,iBAAA;AAAA,EACjB,YAAA,EAAc,cAAA;AAAA,EACd,KAAA,EAAO,WAAA;AAAA,EACP,KAAA,EAAO,WAAA;AAAA,EACP,IAAA,EAAM,UAAA;AAAA,EACN,OAAA,EAAS,aAAA;AAAA,EACT,QAAA,EAAU,cAAA;AAAA,EACV,eAAA,EAAiB,kBAAA;AAAA,EACjB,GAAA,EAAK,SAAA;AAAA,EACL,SAAA,EAAW,YAAA;AAAA,EACX,MAAA,EAAQ,YAAA;AAAA,EACR,MAAA,EAAQ,YAAA;AAAA,EACR,MAAA,EAAQ,YAAA;AAAA,EACR,gBAAA,EAAkB,mBAAA;AAAA,EAClB,KAAA,EAAO,WAAA;AAAA,EACP,KAAA,EAAO,WAAA;AAAA,EACP,IAAA,EAAM,UAAA;AAAA,EACN,IAAA,EAAM,SAAA;AAAA,EACN,MAAA,EAAQ,YAAA;AAAA,EACR,cAAA,EAAgB,iBAAA;AAAA,EAChB,gBAAA,EAAkB,mBAAA;AAAA,EAClB,SAAA,EAAW,eAAA;AAAA,EACX,IAAA,EAAM,UAAA;AAAA,EACN,GAAA,EAAK,SAAA;AAAA,EACL,QAAA,EAAU,cAAA;AAAA,EACV,KAAA,EAAO,gBAAA;AAAA,EACP,MAAA,EAAQ,YAAA;AAAA,EACR,IAAA,EAAM,UAAA;AAAA,EACN,OAAA,EAAS,aAAA;AAAA,EACT,SAAA,EAAW,YAAA;AAAA,EACX,UAAA,EAAY;AACd;;;;"}

package/dist/components/Icon/provider.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"provider.esm.js","sources":["../../../src/components/Icon/provider.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 { icons } from './icons';\nimport { IconContext } from './context';\nimport type { IconProviderProps } from './types';\n\n/** @public */\nexport const IconProvider = (props: IconProviderProps) => {\n  const { children, overrides } = props;\n\n  // Merge provided overrides with default icons\n  const combinedIcons = { ...icons, ...overrides };\n\n  return (\n    <IconContext.Provider value={{ icons: combinedIcons }}>\n      {children}\n    </IconContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;AAqBa,MAAA,YAAA,GAAe,CAAC,KAA6B,KAAA;AACxD,EAAM,MAAA,EAAE,QAAU,EAAA,SAAA,EAAc,GAAA,KAAA;AAGhC,EAAA,MAAM,aAAgB,GAAA,EAAE,GAAG,KAAA,EAAO,GAAG,SAAU,EAAA;AAE/C,EACE,uBAAA,GAAA,CAAC,YAAY,QAAZ,EAAA,EAAqB,OAAO,EAAE,KAAA,EAAO,aAAc,EAAA,EACjD,QACH,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"provider.esm.js","sources":["../../../src/components/Icon/provider.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 { icons } from './icons';\nimport { IconContext } from './context';\nimport type { IconProviderProps } from './types';\n\n/** @public */\nexport const IconProvider = (props: IconProviderProps) => {\n  const { children, overrides } = props;\n\n  // Merge provided overrides with default icons\n  const combinedIcons = { ...icons, ...overrides };\n\n  return (\n    <IconContext.Provider value={{ icons: combinedIcons }}>\n      {children}\n    </IconContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;;AAqBO,MAAM,YAAA,GAAe,CAAC,KAAA,KAA6B;AACxD,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,KAAA;AAGhC,EAAA,MAAM,aAAA,GAAgB,EAAE,GAAG,KAAA,EAAO,GAAG,SAAA,EAAU;AAE/C,EAAA,uBACE,GAAA,CAAC,YAAY,QAAA,EAAZ,EAAqB,OAAO,EAAE,KAAA,EAAO,aAAA,EAAc,EACjD,QAAA,EACH,CAAA;AAEJ;;;;"}

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

@@ -4,20 +4,8 @@ import { Link as Link$1, RouterProvider } from 'react-aria-components';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import { useNavigate, useHref } from 'react-router-dom';
+import { isExternalLink } from '../../utils/isExternalLink.esm.js';
 
-function isExternalLink(href) {
-  if (!href) return false;
-  if (href.startsWith("http://") || href.startsWith("https://")) {
-    return true;
-  }
-  if (href.startsWith("//")) {
-    return true;
-  }
-  if (href.startsWith("mailto:") || href.startsWith("tel:")) {
-    return true;
-  }
-  return false;
-}
 const Link = forwardRef((props, ref) => {
   const navigate = useNavigate();
   const {

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    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;;;;"}
+{"version":3,"file":"Link.esm.js","sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { Link as AriaLink, RouterProvider } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport type { LinkProps } from './types';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../utils/isExternalLink';\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":";;;;;;;;AAyBO,MAAM,IAAA,GAAO,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC3E,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,OAAA,GAAU,MAAA;AAAA,IACV,MAAA,GAAS,SAAA;AAAA,IACT,KAAA,GAAQ,SAAA;AAAA,IACR,QAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,UAAU,MAAM,CAAA;AACvD,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,gBAAgB,kBAAA,EAAmB,GACrE,UAAU,MAAA,EAAQ;AAAA,IAChB,OAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAEH,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAGtC,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,uBACE,GAAA;AAAA,MAACA,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAW,IAAA,CAAK,cAAA,CAAe,IAAA,EAAM,cAAA,CAAe,MAAM,SAAS,CAAA;AAAA,QACnE,eAAA,EAAe,QAAA;AAAA,QACf,IAAA;AAAA,QACC,GAAG,kBAAA;AAAA,QACH,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AAGA,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,GAAA;AAAA,IAACA,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAW,IAAA,CAAK,cAAA,CAAe,IAAA,EAAM,cAAA,CAAe,MAAM,SAAS,CAAA;AAAA,MACnE,eAAA,EAAe,QAAA;AAAA,MACd,GAAG,kBAAA;AAAA,MACJ,IAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}