@backstage/ui 0.12.0 → 0.13.0-next.1

package/dist/components/PluginHeader/PluginHeader.esm.js

@@ -1,26 +1,31 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { PluginHeaderToolbar } from './PluginHeaderToolbar.esm.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Tabs, TabList, Tab } from '../Tabs/Tabs.esm.js';
-import { useStyles } from '../../hooks/useStyles.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import '../Tabs/Tabs.module.css.esm.js';
 import { PluginHeaderDefinition } from './definition.esm.js';
 import { useRef } from 'react';
 import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect.esm.js';
-import styles from './PluginHeader.module.css.esm.js';
-import clsx from 'clsx';
+import { Link } from 'react-aria-components';
+import { RiShapesLine } from '@remixicon/react';
+import { Text } from '../Text/Text.esm.js';
+import '../Text/Text.module.css.esm.js';
 
 const PluginHeader = (props) => {
-  const { classNames, cleanedProps } = useStyles(PluginHeaderDefinition, props);
+  const { ownProps } = useDefinition(PluginHeaderDefinition, props);
   const {
-    className,
+    classes,
     tabs,
     icon,
     title,
     titleLink,
     customActions,
     onTabSelectionChange
-  } = cleanedProps;
+  } = ownProps;
   const hasTabs = tabs && tabs.length > 0;
   const headerRef = useRef(null);
+  const toolbarWrapperRef = useRef(null);
+  const toolbarContentRef = useRef(null);
+  const toolbarControlsRef = useRef(null);
   useIsomorphicLayoutEffect(() => {
     const el = headerRef.current;
     if (!el) return void 0;
@@ -44,44 +49,26 @@ const PluginHeader = (props) => {
       document.documentElement.style.removeProperty("--bui-header-height");
     };
   }, []);
-  return /* @__PURE__ */ jsxs(
-    "header",
-    {
-      ref: headerRef,
-      className: clsx(classNames.root, styles[classNames.root], className),
-      children: [
-        /* @__PURE__ */ jsx(
-          PluginHeaderToolbar,
-          {
-            icon,
-            title,
-            titleLink,
-            customActions,
-            hasTabs
-          }
-        ),
-        tabs && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: clsx(
-              classNames.tabsWrapper,
-              styles[classNames.tabsWrapper]
-            ),
-            children: /* @__PURE__ */ jsx(Tabs, { onSelectionChange: onTabSelectionChange, children: /* @__PURE__ */ jsx(TabList, { children: tabs?.map((tab) => /* @__PURE__ */ jsx(
-              Tab,
-              {
-                id: tab.id,
-                href: tab.href,
-                matchStrategy: tab.matchStrategy,
-                children: tab.label
-              },
-              tab.id
-            )) }) })
-          }
-        )
-      ]
-    }
-  );
+  const titleContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: classes.toolbarIcon, children: icon || /* @__PURE__ */ jsx(RiShapesLine, {}) }),
+    /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: title || "Your plugin" })
+  ] });
+  return /* @__PURE__ */ jsxs("header", { ref: headerRef, className: classes.root, children: [
+    /* @__PURE__ */ jsx("div", { className: classes.toolbar, "data-has-tabs": hasTabs, children: /* @__PURE__ */ jsxs("div", { className: classes.toolbarWrapper, ref: toolbarWrapperRef, children: [
+      /* @__PURE__ */ jsx("div", { className: classes.toolbarContent, ref: toolbarContentRef, children: /* @__PURE__ */ jsx(Text, { as: "h1", variant: "body-medium", children: titleLink ? /* @__PURE__ */ jsx(Link, { className: classes.toolbarName, href: titleLink, children: titleContent }) : /* @__PURE__ */ jsx("div", { className: classes.toolbarName, children: titleContent }) }) }),
+      /* @__PURE__ */ jsx("div", { className: classes.toolbarControls, ref: toolbarControlsRef, children: customActions })
+    ] }) }),
+    tabs && /* @__PURE__ */ jsx("div", { className: classes.tabs, children: /* @__PURE__ */ jsx(Tabs, { onSelectionChange: onTabSelectionChange, children: /* @__PURE__ */ jsx(TabList, { children: tabs?.map((tab) => /* @__PURE__ */ jsx(
+      Tab,
+      {
+        id: tab.id,
+        href: tab.href,
+        matchStrategy: tab.matchStrategy,
+        children: tab.label
+      },
+      tab.id
+    )) }) }) })
+  ] });
 };
 
 export { PluginHeader };

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

@@ -1 +1 @@
-{"version":3,"file":"PluginHeader.esm.js","sources":["../../../src/components/PluginHeader/PluginHeader.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 { PluginHeaderProps } from './types';\nimport { PluginHeaderToolbar } from './PluginHeaderToolbar';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\nimport { PluginHeaderDefinition } from './definition';\nimport { type NavigateOptions } from 'react-router-dom';\nimport { useRef } from 'react';\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect';\nimport styles from './PluginHeader.module.css';\nimport clsx from 'clsx';\n\ndeclare module 'react-aria-components' {\n  interface RouterConfig {\n    routerOptions: NavigateOptions;\n  }\n}\n\n/**\n * A component that renders a plugin header with icon, title, custom actions,\n * and navigation tabs.\n *\n * @public\n */\nexport const PluginHeader = (props: PluginHeaderProps) => {\n  const { classNames, cleanedProps } = useStyles(PluginHeaderDefinition, props);\n  const {\n    className,\n    tabs,\n    icon,\n    title,\n    titleLink,\n    customActions,\n    onTabSelectionChange,\n  } = cleanedProps;\n\n  const hasTabs = tabs && tabs.length > 0;\n  const headerRef = useRef<HTMLElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    const el = headerRef.current;\n    if (!el) return undefined;\n\n    const updateHeight = () => {\n      const height = el.offsetHeight;\n      document.documentElement.style.setProperty(\n        '--bui-header-height',\n        `${height}px`,\n      );\n    };\n\n    // Set height once immediately\n    updateHeight();\n\n    // Observe for resize changes if ResizeObserver is available\n    // (not present in Jest/jsdom by default)\n    if (typeof ResizeObserver === 'undefined') {\n      return () => {\n        document.documentElement.style.removeProperty('--bui-header-height');\n      };\n    }\n\n    const observer = new ResizeObserver(updateHeight);\n    observer.observe(el);\n\n    return () => {\n      observer.disconnect();\n      document.documentElement.style.removeProperty('--bui-header-height');\n    };\n  }, []);\n\n  return (\n    <header\n      ref={headerRef}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n    >\n      <PluginHeaderToolbar\n        icon={icon}\n        title={title}\n        titleLink={titleLink}\n        customActions={customActions}\n        hasTabs={hasTabs}\n      />\n      {tabs && (\n        <div\n          className={clsx(\n            classNames.tabsWrapper,\n            styles[classNames.tabsWrapper],\n          )}\n        >\n          <Tabs onSelectionChange={onTabSelectionChange}>\n            <TabList>\n              {tabs?.map(tab => (\n                <Tab\n                  key={tab.id}\n                  id={tab.id}\n                  href={tab.href}\n                  matchStrategy={tab.matchStrategy}\n                >\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </div>\n      )}\n    </header>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAuCO,MAAM,YAAA,GAAe,CAAC,KAAA,KAA6B;AACxD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,wBAAwB,KAAK,CAAA;AAC5E,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACF,GAAI,YAAA;AAEJ,EAAA,MAAM,OAAA,GAAU,IAAA,IAAQ,IAAA,CAAK,MAAA,GAAS,CAAA;AACtC,EAAA,MAAM,SAAA,GAAY,OAAoB,IAAI,CAAA;AAE1C,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,MAAM,KAAK,SAAA,CAAU,OAAA;AACrB,IAAA,IAAI,CAAC,IAAI,OAAO,MAAA;AAEhB,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,MAAM,SAAS,EAAA,CAAG,YAAA;AAClB,MAAA,QAAA,CAAS,gBAAgB,KAAA,CAAM,WAAA;AAAA,QAC7B,qBAAA;AAAA,QACA,GAAG,MAAM,CAAA,EAAA;AAAA,OACX;AAAA,IACF,CAAA;AAGA,IAAA,YAAA,EAAa;AAIb,IAAA,IAAI,OAAO,mBAAmB,WAAA,EAAa;AACzC,MAAA,OAAO,MAAM;AACX,QAAA,QAAA,CAAS,eAAA,CAAgB,KAAA,CAAM,cAAA,CAAe,qBAAqB,CAAA;AAAA,MACrE,CAAA;AAAA,IACF;AAEA,IAAA,MAAM,QAAA,GAAW,IAAI,cAAA,CAAe,YAAY,CAAA;AAChD,IAAA,QAAA,CAAS,QAAQ,EAAE,CAAA;AAEnB,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,UAAA,EAAW;AACpB,MAAA,QAAA,CAAS,eAAA,CAAgB,KAAA,CAAM,cAAA,CAAe,qBAAqB,CAAA;AAAA,IACrE,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,SAAA;AAAA,MACL,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAEnE,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,mBAAA;AAAA,UAAA;AAAA,YACC,IAAA;AAAA,YACA,KAAA;AAAA,YACA,SAAA;AAAA,YACA,aAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,QACC,IAAA,oBACC,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA;AAAA,cACT,UAAA,CAAW,WAAA;AAAA,cACX,MAAA,CAAO,WAAW,WAAW;AAAA,aAC/B;AAAA,YAEA,QAAA,kBAAA,GAAA,CAAC,QAAK,iBAAA,EAAmB,oBAAA,EACvB,8BAAC,OAAA,EAAA,EACE,QAAA,EAAA,IAAA,EAAM,IAAI,CAAA,GAAA,qBACT,GAAA;AAAA,cAAC,GAAA;AAAA,cAAA;AAAA,gBAEC,IAAI,GAAA,CAAI,EAAA;AAAA,gBACR,MAAM,GAAA,CAAI,IAAA;AAAA,gBACV,eAAe,GAAA,CAAI,aAAA;AAAA,gBAElB,QAAA,EAAA,GAAA,CAAI;AAAA,eAAA;AAAA,cALA,GAAA,CAAI;AAAA,aAOZ,GACH,CAAA,EACF;AAAA;AAAA;AACF;AAAA;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"PluginHeader.esm.js","sources":["../../../src/components/PluginHeader/PluginHeader.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 { PluginHeaderProps } from './types';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { PluginHeaderDefinition } from './definition';\nimport { type NavigateOptions } from 'react-router-dom';\nimport { useRef } from 'react';\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect';\nimport { Link } from 'react-aria-components';\nimport { RiShapesLine } from '@remixicon/react';\nimport { Text } from '../Text';\n\ndeclare module 'react-aria-components' {\n  interface RouterConfig {\n    routerOptions: NavigateOptions;\n  }\n}\n\n/**\n * A component that renders a plugin header with icon, title, custom actions,\n * and navigation tabs.\n *\n * @public\n */\nexport const PluginHeader = (props: PluginHeaderProps) => {\n  const { ownProps } = useDefinition(PluginHeaderDefinition, props);\n  const {\n    classes,\n    tabs,\n    icon,\n    title,\n    titleLink,\n    customActions,\n    onTabSelectionChange,\n  } = ownProps;\n\n  const hasTabs = tabs && tabs.length > 0;\n  const headerRef = useRef<HTMLElement>(null);\n  const toolbarWrapperRef = useRef<HTMLDivElement>(null);\n  const toolbarContentRef = useRef<HTMLDivElement>(null);\n  const toolbarControlsRef = useRef<HTMLDivElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    const el = headerRef.current;\n    if (!el) return undefined;\n\n    const updateHeight = () => {\n      const height = el.offsetHeight;\n      document.documentElement.style.setProperty(\n        '--bui-header-height',\n        `${height}px`,\n      );\n    };\n\n    // Set height once immediately\n    updateHeight();\n\n    // Observe for resize changes if ResizeObserver is available\n    // (not present in Jest/jsdom by default)\n    if (typeof ResizeObserver === 'undefined') {\n      return () => {\n        document.documentElement.style.removeProperty('--bui-header-height');\n      };\n    }\n\n    const observer = new ResizeObserver(updateHeight);\n    observer.observe(el);\n\n    return () => {\n      observer.disconnect();\n      document.documentElement.style.removeProperty('--bui-header-height');\n    };\n  }, []);\n\n  const titleContent = (\n    <>\n      <div className={classes.toolbarIcon}>{icon || <RiShapesLine />}</div>\n      <Text variant=\"body-medium\">{title || 'Your plugin'}</Text>\n    </>\n  );\n\n  return (\n    <header ref={headerRef} className={classes.root}>\n      <div className={classes.toolbar} data-has-tabs={hasTabs}>\n        <div className={classes.toolbarWrapper} ref={toolbarWrapperRef}>\n          <div className={classes.toolbarContent} ref={toolbarContentRef}>\n            <Text as=\"h1\" variant=\"body-medium\">\n              {titleLink ? (\n                <Link className={classes.toolbarName} href={titleLink}>\n                  {titleContent}\n                </Link>\n              ) : (\n                <div className={classes.toolbarName}>{titleContent}</div>\n              )}\n            </Text>\n          </div>\n          <div className={classes.toolbarControls} ref={toolbarControlsRef}>\n            {customActions}\n          </div>\n        </div>\n      </div>\n      {tabs && (\n        <div className={classes.tabs}>\n          <Tabs onSelectionChange={onTabSelectionChange}>\n            <TabList>\n              {tabs?.map(tab => (\n                <Tab\n                  key={tab.id}\n                  id={tab.id}\n                  href={tab.href}\n                  matchStrategy={tab.matchStrategy}\n                >\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </div>\n      )}\n    </header>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAuCO,MAAM,YAAA,GAAe,CAAC,KAAA,KAA6B;AACxD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,wBAAwB,KAAK,CAAA;AAChE,EAAA,MAAM;AAAA,IACJ,OAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACF,GAAI,QAAA;AAEJ,EAAA,MAAM,OAAA,GAAU,IAAA,IAAQ,IAAA,CAAK,MAAA,GAAS,CAAA;AACtC,EAAA,MAAM,SAAA,GAAY,OAAoB,IAAI,CAAA;AAC1C,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,yBAAA,CAA0B,MAAM;AAC9B,IAAA,MAAM,KAAK,SAAA,CAAU,OAAA;AACrB,IAAA,IAAI,CAAC,IAAI,OAAO,MAAA;AAEhB,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,MAAM,SAAS,EAAA,CAAG,YAAA;AAClB,MAAA,QAAA,CAAS,gBAAgB,KAAA,CAAM,WAAA;AAAA,QAC7B,qBAAA;AAAA,QACA,GAAG,MAAM,CAAA,EAAA;AAAA,OACX;AAAA,IACF,CAAA;AAGA,IAAA,YAAA,EAAa;AAIb,IAAA,IAAI,OAAO,mBAAmB,WAAA,EAAa;AACzC,MAAA,OAAO,MAAM;AACX,QAAA,QAAA,CAAS,eAAA,CAAgB,KAAA,CAAM,cAAA,CAAe,qBAAqB,CAAA;AAAA,MACrE,CAAA;AAAA,IACF;AAEA,IAAA,MAAM,QAAA,GAAW,IAAI,cAAA,CAAe,YAAY,CAAA;AAChD,IAAA,QAAA,CAAS,QAAQ,EAAE,CAAA;AAEnB,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,UAAA,EAAW;AACpB,MAAA,QAAA,CAAS,eAAA,CAAgB,KAAA,CAAM,cAAA,CAAe,qBAAqB,CAAA;AAAA,IACrE,CAAA;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,+BACJ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAI,SAAA,EAAW,OAAA,CAAQ,aAAc,QAAA,EAAA,IAAA,oBAAQ,GAAA,CAAC,gBAAa,CAAA,EAAG,CAAA;AAAA,oBAC/D,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,aAAA,EAAe,mBAAS,aAAA,EAAc;AAAA,GAAA,EACtD,CAAA;AAGF,EAAA,4BACG,QAAA,EAAA,EAAO,GAAA,EAAK,SAAA,EAAW,SAAA,EAAW,QAAQ,IAAA,EACzC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,OAAA,EAAS,eAAA,EAAe,OAAA,EAC9C,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,cAAA,EAAgB,GAAA,EAAK,iBAAA,EAC3C,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,cAAA,EAAgB,GAAA,EAAK,iBAAA,EAC3C,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,OAAA,CAAQ,WAAA,EAAa,IAAA,EAAM,SAAA,EACzC,QAAA,EAAA,YAAA,EACH,CAAA,mBAEA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,WAAA,EAAc,QAAA,EAAA,YAAA,EAAa,GAEvD,CAAA,EACF,CAAA;AAAA,0BACC,KAAA,EAAA,EAAI,SAAA,EAAW,QAAQ,eAAA,EAAiB,GAAA,EAAK,oBAC3C,QAAA,EAAA,aAAA,EACH;AAAA,KAAA,EACF,CAAA,EACF,CAAA;AAAA,IACC,IAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,QAAQ,IAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,iBAAA,EAAmB,oBAAA,EACvB,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACE,QAAA,EAAA,IAAA,EAAM,IAAI,CAAA,GAAA,qBACT,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QAEC,IAAI,GAAA,CAAI,EAAA;AAAA,QACR,MAAM,GAAA,CAAI,IAAA;AAAA,QACV,eAAe,GAAA,CAAI,aAAA;AAAA,QAElB,QAAA,EAAA,GAAA,CAAI;AAAA,OAAA;AAAA,MALA,GAAA,CAAI;AAAA,KAOZ,CAAA,EACH,CAAA,EACF,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

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

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .PluginHeader_bui-PluginHeader__efdec6e38f {\n    display: block;\n  }\n\n  .PluginHeader_bui-PluginHeaderToolbar__efdec6e38f {\n    &::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0px;\n      right: 0px;\n      height: 16px;\n      background-color: var(--bui-bg-app);\n      z-index: 0;\n    }\n  }\n\n  .PluginHeader_bui-PluginHeaderToolbarWrapper__efdec6e38f {\n    position: relative;\n    z-index: 1;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    background-color: var(--bui-bg-neutral-1);\n    padding-inline: var(--bui-space-5);\n    border-bottom: 1px solid var(--bui-border-1);\n    color: var(--bui-fg-primary);\n    height: 52px;\n  }\n\n  .PluginHeader_bui-PluginHeaderToolbarContent__efdec6e38f {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .PluginHeader_bui-PluginHeaderToolbarName__efdec6e38f {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-regular);\n    flex-shrink: 0;\n  }\n\n  .PluginHeader_bui-PluginHeaderToolbarIcon__efdec6e38f {\n    width: 16px;\n    height: 16px;\n    color: var(--bui-fg-primary);\n\n    & svg {\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  .PluginHeader_bui-PluginHeaderToolbarControls__efdec6e38f {\n    position: absolute;\n    right: var(--bui-space-5);\n    top: 50%;\n    transform: translateY(-50%);\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .PluginHeader_bui-PluginHeaderTabsWrapper__efdec6e38f {\n    padding-inline: var(--bui-space-3);\n    border-bottom: 1px solid var(--bui-border-1);\n    background-color: var(--bui-bg-neutral-1);\n  }\n}\n";
-var styles = {"bui-PluginHeader":"PluginHeader_bui-PluginHeader__efdec6e38f","bui-PluginHeaderToolbar":"PluginHeader_bui-PluginHeaderToolbar__efdec6e38f","bui-PluginHeaderToolbarWrapper":"PluginHeader_bui-PluginHeaderToolbarWrapper__efdec6e38f","bui-PluginHeaderToolbarContent":"PluginHeader_bui-PluginHeaderToolbarContent__efdec6e38f","bui-PluginHeaderToolbarName":"PluginHeader_bui-PluginHeaderToolbarName__efdec6e38f","bui-PluginHeaderToolbarIcon":"PluginHeader_bui-PluginHeaderToolbarIcon__efdec6e38f","bui-PluginHeaderToolbarControls":"PluginHeader_bui-PluginHeaderToolbarControls__efdec6e38f","bui-PluginHeaderTabsWrapper":"PluginHeader_bui-PluginHeaderTabsWrapper__efdec6e38f"};
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .PluginHeader_bui-PluginHeaderToolbarWrapper__56dbd6a833 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    background-color: var(--bui-bg-neutral-1);\n    padding-inline: var(--bui-space-5);\n    border-bottom: 1px solid var(--bui-border-1);\n    color: var(--bui-fg-primary);\n    height: 52px;\n  }\n\n  .PluginHeader_bui-PluginHeaderToolbarContent__56dbd6a833 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .PluginHeader_bui-PluginHeaderToolbarName__56dbd6a833 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-regular);\n    flex-shrink: 0;\n  }\n\n  .PluginHeader_bui-PluginHeaderToolbarIcon__56dbd6a833 {\n    width: 16px;\n    height: 16px;\n    color: var(--bui-fg-primary);\n\n    & svg {\n      width: 100%;\n      height: 100%;\n    }\n  }\n\n  .PluginHeader_bui-PluginHeaderToolbarControls__56dbd6a833 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .PluginHeader_bui-PluginHeaderTabsWrapper__56dbd6a833 {\n    padding-inline: var(--bui-space-3);\n    border-bottom: 1px solid var(--bui-border-1);\n    background-color: var(--bui-bg-neutral-1);\n  }\n}\n";
+var styles = {"bui-PluginHeaderToolbarWrapper":"PluginHeader_bui-PluginHeaderToolbarWrapper__56dbd6a833","bui-PluginHeaderToolbarContent":"PluginHeader_bui-PluginHeaderToolbarContent__56dbd6a833","bui-PluginHeaderToolbarName":"PluginHeader_bui-PluginHeaderToolbarName__56dbd6a833","bui-PluginHeaderToolbarIcon":"PluginHeader_bui-PluginHeaderToolbarIcon__56dbd6a833","bui-PluginHeaderToolbarControls":"PluginHeader_bui-PluginHeaderToolbarControls__56dbd6a833","bui-PluginHeaderTabsWrapper":"PluginHeader_bui-PluginHeaderTabsWrapper__56dbd6a833"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/PluginHeader/definition.esm.js

@@ -1,4 +1,13 @@
-const PluginHeaderDefinition = {
+import 'react/jsx-runtime';
+import 'clsx';
+import '../../hooks/useBreakpoint.esm.js';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './PluginHeader.module.css.esm.js';
+
+const PluginHeaderDefinition = defineComponent()({
+  styles,
   classNames: {
     root: "bui-PluginHeader",
     toolbar: "bui-PluginHeaderToolbar",
@@ -7,9 +16,18 @@ const PluginHeaderDefinition = {
     toolbarControls: "bui-PluginHeaderToolbarControls",
     toolbarIcon: "bui-PluginHeaderToolbarIcon",
     toolbarName: "bui-PluginHeaderToolbarName",
-    tabsWrapper: "bui-PluginHeaderTabsWrapper"
+    tabs: "bui-PluginHeaderTabsWrapper"
+  },
+  propDefs: {
+    icon: {},
+    title: {},
+    titleLink: {},
+    customActions: {},
+    tabs: {},
+    onTabSelectionChange: {},
+    className: {}
   }
-};
+});
 
 export { PluginHeaderDefinition };
 //# sourceMappingURL=definition.esm.js.map

package/dist/components/PluginHeader/definition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/PluginHeader/definition.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\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for PluginHeader\n * @public\n */\nexport const PluginHeaderDefinition = {\n  classNames: {\n    root: 'bui-PluginHeader',\n    toolbar: 'bui-PluginHeaderToolbar',\n    toolbarWrapper: 'bui-PluginHeaderToolbarWrapper',\n    toolbarContent: 'bui-PluginHeaderToolbarContent',\n    toolbarControls: 'bui-PluginHeaderToolbarControls',\n    toolbarIcon: 'bui-PluginHeaderToolbarIcon',\n    toolbarName: 'bui-PluginHeaderToolbarName',\n    tabsWrapper: 'bui-PluginHeaderTabsWrapper',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,sBAAA,GAAyB;AAAA,EACpC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,kBAAA;AAAA,IACN,OAAA,EAAS,yBAAA;AAAA,IACT,cAAA,EAAgB,gCAAA;AAAA,IAChB,cAAA,EAAgB,gCAAA;AAAA,IAChB,eAAA,EAAiB,iCAAA;AAAA,IACjB,WAAA,EAAa,6BAAA;AAAA,IACb,WAAA,EAAa,6BAAA;AAAA,IACb,WAAA,EAAa;AAAA;AAEjB;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/PluginHeader/definition.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\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { PluginHeaderOwnProps } from './types';\nimport styles from './PluginHeader.module.css';\n\n/**\n * Component definition for PluginHeader\n * @public\n */\nexport const PluginHeaderDefinition = defineComponent<PluginHeaderOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-PluginHeader',\n    toolbar: 'bui-PluginHeaderToolbar',\n    toolbarWrapper: 'bui-PluginHeaderToolbarWrapper',\n    toolbarContent: 'bui-PluginHeaderToolbarContent',\n    toolbarControls: 'bui-PluginHeaderToolbarControls',\n    toolbarIcon: 'bui-PluginHeaderToolbarIcon',\n    toolbarName: 'bui-PluginHeaderToolbarName',\n    tabs: 'bui-PluginHeaderTabsWrapper',\n  },\n  propDefs: {\n    icon: {},\n    title: {},\n    titleLink: {},\n    customActions: {},\n    tabs: {},\n    onTabSelectionChange: {},\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,sBAAA,GAAyB,iBAAsC,CAAE;AAAA,EAC5E,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,kBAAA;AAAA,IACN,OAAA,EAAS,yBAAA;AAAA,IACT,cAAA,EAAgB,gCAAA;AAAA,IAChB,cAAA,EAAgB,gCAAA;AAAA,IAChB,eAAA,EAAiB,iCAAA;AAAA,IACjB,WAAA,EAAa,6BAAA;AAAA,IACb,WAAA,EAAa,6BAAA;AAAA,IACb,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,MAAM,EAAC;AAAA,IACP,OAAO,EAAC;AAAA,IACR,WAAW,EAAC;AAAA,IACZ,eAAe,EAAC;AAAA,IAChB,MAAM,EAAC;AAAA,IACP,sBAAsB,EAAC;AAAA,IACvB,WAAW;AAAC;AAEhB,CAAC;;;;"}

package/dist/components/Popover/Popover.esm.js

@@ -1,42 +1,34 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { useId } from 'react-aria';
 import { Popover as Popover$1, OverlayArrow } from 'react-aria-components';
-import clsx from 'clsx';
-import { useStyles } from '../../hooks/useStyles.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
 import { PopoverDefinition } from './definition.esm.js';
-import styles from './Popover.module.css.esm.js';
+import { Box } from '../Box/Box.esm.js';
+import '../Box/Box.module.css.esm.js';
+import { BgReset } from '../../hooks/useBg.esm.js';
 
 const Popover = forwardRef(
   (props, ref) => {
-    const { classNames, cleanedProps } = useStyles(PopoverDefinition, props);
-    const { className, children, hideArrow, ...rest } = cleanedProps;
-    return /* @__PURE__ */ jsx(
-      Popover$1,
-      {
-        className: clsx(classNames.root, styles[classNames.root], className),
-        ...rest,
-        ref,
-        children: ({ trigger }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          !hideArrow && trigger !== "MenuTrigger" && trigger !== "SubmenuTrigger" && /* @__PURE__ */ jsx(
-            OverlayArrow,
-            {
-              className: clsx(classNames.arrow, styles[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" })
-              ] })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: clsx(classNames.content, styles[classNames.content]),
-              children
-            }
-          )
-        ] })
-      }
-    );
+    const { ownProps, restProps } = useDefinition(PopoverDefinition, props);
+    const { classes, children, hideArrow } = ownProps;
+    const svgPathId = useId();
+    return /* @__PURE__ */ jsx(Popover$1, { className: classes.root, ...restProps, ref, children: ({ trigger }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      !hideArrow && trigger !== "MenuTrigger" && trigger !== "SubmenuTrigger" && /* @__PURE__ */ jsx(OverlayArrow, { className: classes.arrow, children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            id: svgPathId,
+            fillRule: "evenodd",
+            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 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"
+          }
+        ) }),
+        /* @__PURE__ */ jsx("use", { href: `#${svgPathId}` }),
+        /* @__PURE__ */ jsx("use", { href: `#${svgPathId}` }),
+        /* @__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" })
+      ] }) }),
+      /* @__PURE__ */ jsx(BgReset, { children: /* @__PURE__ */ jsx(Box, { bg: "neutral", className: classes.content, children }) })
+    ] }) });
   }
 );
 Popover.displayName = "Popover";

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

@@ -1 +1 @@
-{"version":3,"file":"Popover.esm.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { OverlayArrow, Popover as AriaPopover } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { PopoverProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { PopoverDefinition } from './definition';\nimport styles from './Popover.module.css';\n\n/**\n * A popover component built on React Aria Components that displays floating\n * content anchored to a trigger element.\n *\n * @remarks\n * The Popover component supports multiple placements (top, right, bottom, left),\n * automatic viewport-constrained scrolling, and conditional arrow rendering. It\n * automatically handles positioning, collision detection, and ARIA attributes for\n * accessibility. Content is automatically padded and scrollable when it exceeds\n * available space.\n *\n * @example\n * Basic usage with DialogTrigger:\n * ```tsx\n * <DialogTrigger>\n *   <Button>Open Popover</Button>\n *   <Popover>\n *     <Text>Popover content</Text>\n *   </Popover>\n * </DialogTrigger>\n * ```\n *\n * @example\n * With custom placement and no arrow:\n * ```tsx\n * <DialogTrigger>\n *   <Button>Open</Button>\n *   <Popover placement=\"right\" hideArrow>\n *     <Text>Content without arrow</Text>\n *   </Popover>\n * </DialogTrigger>\n * ```\n *\n * @public\n */\nexport const Popover = forwardRef<HTMLDivElement, PopoverProps>(\n  (props, ref) => {\n    const { classNames, cleanedProps } = useStyles(PopoverDefinition, props);\n    const { className, children, hideArrow, ...rest } = cleanedProps;\n\n    return (\n      <AriaPopover\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        {...rest}\n        ref={ref}\n      >\n        {({ trigger }) => (\n          <>\n            {!hideArrow &&\n              trigger !== 'MenuTrigger' &&\n              trigger !== 'SubmenuTrigger' && (\n                <OverlayArrow\n                  className={clsx(classNames.arrow, styles[classNames.arrow])}\n                >\n                  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <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\" />\n                    <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\" />\n                  </svg>\n                </OverlayArrow>\n              )}\n            <div\n              className={clsx(classNames.content, styles[classNames.content])}\n            >\n              {children}\n            </div>\n          </>\n        )}\n      </AriaPopover>\n    );\n  },\n);\n\nPopover.displayName = 'Popover';\n"],"names":["AriaPopover"],"mappings":";;;;;;;;AA2DO,MAAM,OAAA,GAAU,UAAA;AAAA,EACrB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,mBAAmB,KAAK,CAAA;AACvE,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,SAAA,EAAW,GAAG,MAAK,GAAI,YAAA;AAEpD,IAAA,uBACE,GAAA;AAAA,MAACA,SAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QAClE,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEC,QAAA,EAAA,CAAC,EAAE,OAAA,EAAQ,qBACV,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,UAAA,CAAC,SAAA,IACA,OAAA,KAAY,aAAA,IACZ,OAAA,KAAY,gBAAA,oBACV,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,cAE1D,QAAA,kBAAA,IAAA,CAAC,SAAI,KAAA,EAAM,IAAA,EAAK,QAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EACnD,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,8NAAA,EAA+N,CAAA;AAAA,gCACvO,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,qSAAA,EAAsS;AAAA,eAAA,EAChT;AAAA;AAAA,WACF;AAAA,0BAEJ,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,cAE7D;AAAA;AAAA;AACH,SAAA,EACF;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA;;;;"}
+{"version":3,"file":"Popover.esm.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { useId } from 'react-aria';\nimport { OverlayArrow, Popover as AriaPopover } from 'react-aria-components';\nimport { PopoverProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { PopoverDefinition } from './definition';\nimport { Box } from '../Box';\nimport { BgReset } from '../../hooks/useBg';\n\n/**\n * A popover component built on React Aria Components that displays floating\n * content anchored to a trigger element.\n *\n * @remarks\n * The Popover component supports multiple placements (top, right, bottom, left),\n * automatic viewport-constrained scrolling, and conditional arrow rendering. It\n * automatically handles positioning, collision detection, and ARIA attributes for\n * accessibility. Content is automatically padded and scrollable when it exceeds\n * available space.\n *\n * @example\n * Basic usage with DialogTrigger:\n * ```tsx\n * <DialogTrigger>\n *   <Button>Open Popover</Button>\n *   <Popover>\n *     <Text>Popover content</Text>\n *   </Popover>\n * </DialogTrigger>\n * ```\n *\n * @example\n * With custom placement and no arrow:\n * ```tsx\n * <DialogTrigger>\n *   <Button>Open</Button>\n *   <Popover placement=\"right\" hideArrow>\n *     <Text>Content without arrow</Text>\n *   </Popover>\n * </DialogTrigger>\n * ```\n *\n * @public\n */\nexport const Popover = forwardRef<HTMLDivElement, PopoverProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(PopoverDefinition, props);\n    const { classes, children, hideArrow } = ownProps;\n    const svgPathId = useId();\n\n    return (\n      <AriaPopover className={classes.root} {...restProps} ref={ref}>\n        {({ trigger }) => (\n          <>\n            {!hideArrow &&\n              trigger !== 'MenuTrigger' &&\n              trigger !== 'SubmenuTrigger' && (\n                <OverlayArrow className={classes.arrow}>\n                  <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <defs>\n                      <path\n                        id={svgPathId}\n                        fillRule=\"evenodd\"\n                        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 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\"\n                      />\n                    </defs>\n\n                    <use href={`#${svgPathId}`} />\n                    <use href={`#${svgPathId}`} />\n\n                    <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\" />\n                  </svg>\n                </OverlayArrow>\n              )}\n            <BgReset>\n              <Box bg=\"neutral\" className={classes.content}>\n                {children}\n              </Box>\n            </BgReset>\n          </>\n        )}\n      </AriaPopover>\n    );\n  },\n);\n\nPopover.displayName = 'Popover';\n"],"names":["AriaPopover"],"mappings":";;;;;;;;;;AA4DO,MAAM,OAAA,GAAU,UAAA;AAAA,EACrB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,mBAAmB,KAAK,CAAA;AACtE,IAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAU,SAAA,EAAU,GAAI,QAAA;AACzC,IAAA,MAAM,YAAY,KAAA,EAAM;AAExB,IAAA,uBACE,GAAA,CAACA,SAAA,EAAA,EAAY,SAAA,EAAW,OAAA,CAAQ,IAAA,EAAO,GAAG,SAAA,EAAW,GAAA,EAClD,QAAA,EAAA,CAAC,EAAE,OAAA,EAAQ,qBACV,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,MAAA,CAAC,aACA,OAAA,KAAY,aAAA,IACZ,YAAY,gBAAA,oBACV,GAAA,CAAC,gBAAa,SAAA,EAAW,OAAA,CAAQ,OAC/B,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,OAAM,IAAA,EAAK,MAAA,EAAO,MAAK,OAAA,EAAQ,WAAA,EAAY,MAAK,MAAA,EACnD,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI,SAAA;AAAA,YACJ,QAAA,EAAS,SAAA;AAAA,YACT,CAAA,EAAE;AAAA;AAAA,SACJ,EACF,CAAA;AAAA,wBAEA,GAAA,CAAC,KAAA,EAAA,EAAI,IAAA,EAAM,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,EAAI,CAAA;AAAA,wBAC5B,GAAA,CAAC,KAAA,EAAA,EAAI,IAAA,EAAM,CAAA,CAAA,EAAI,SAAS,CAAA,CAAA,EAAI,CAAA;AAAA,wBAE5B,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,qSAAA,EAAsS;AAAA,OAAA,EAChT,CAAA,EACF,CAAA;AAAA,sBAEJ,GAAA,CAAC,OAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,WAAU,SAAA,EAAW,OAAA,CAAQ,OAAA,EAClC,QAAA,EACH,CAAA,EACF;AAAA,KAAA,EACF,CAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Popover_bui-Popover__d086d67b7e {\n    box-shadow: var(--bui-shadow);\n    border-radius: var(--bui-radius-3);\n    background: var(--bui-bg-popover);\n    border: 1px solid var(--bui-border-1);\n    forced-color-adjust: none;\n    outline: none;\n    max-height: inherit;\n    display: flex;\n    flex-direction: column;\n    /* fixes FF gap */\n    transform: translate3d(0, 0, 0);\n    transition: transform 200ms, opacity 200ms;\n\n    &[data-entering],\n    &[data-exiting] {\n      transform: var(--origin);\n      opacity: 0;\n    }\n\n    &[data-placement='top'] {\n      --origin: translateY(4px);\n\n      &:has(.Popover_bui-PopoverArrow__d086d67b7e) {\n        margin-bottom: var(--bui-space-3);\n      }\n    }\n\n    &[data-placement='right'] {\n      --origin: translateX(-4px);\n\n      &:has(.Popover_bui-PopoverArrow__d086d67b7e) {\n        margin-left: var(--bui-space-3);\n      }\n    }\n\n    &[data-placement='bottom'] {\n      --origin: translateY(-4px);\n\n      &:has(.Popover_bui-PopoverArrow__d086d67b7e) {\n        margin-top: var(--bui-space-3);\n      }\n    }\n\n    &[data-placement='left'] {\n      --origin: translateX(4px);\n\n      &:has(.Popover_bui-PopoverArrow__d086d67b7e) {\n        margin-right: var(--bui-space-3);\n      }\n    }\n  }\n\n  .Popover_bui-PopoverContent__d086d67b7e {\n    overflow-x: hidden;\n    overflow-y: auto;\n    padding: var(--bui-space-4);\n    flex: 1 1 auto;\n    min-height: 0;\n  }\n\n  .Popover_bui-PopoverArrow__d086d67b7e {\n    & svg {\n      display: block;\n\n      /* The popover is rendered overlaying the main\n      popover element by 1px. This causes the borders\n      to overlap, which causes minor visual artifacts\n      with transparent border colors. To mitigate this,\n      we split the stroke and fill across separate\n      elements in order to guarantee that the stroke is\n      always overlaying a consistent color. */\n      path:nth-child(1) {\n        fill: var(--bui-bg-popover);\n      }\n\n      path:nth-child(2) {\n        fill: var(--bui-border-1);\n      }\n\n      /* The arrow svg overlaps the popover by 2px, so we\n      need to adjust the margins accordingly. */\n      --popover-arrow-overlap: -2px;\n    }\n\n    &[data-placement='top'] svg {\n      margin-top: var(--popover-arrow-overlap);\n    }\n\n    &[data-placement='bottom'] svg {\n      margin-bottom: var(--popover-arrow-overlap);\n      transform: rotate(180deg);\n    }\n\n    &[data-placement='right'] svg {\n      margin-right: var(--popover-arrow-overlap);\n      transform: rotate(90deg);\n    }\n\n    &[data-placement='left'] svg {\n      margin-left: var(--popover-arrow-overlap);\n      transform: rotate(-90deg);\n    }\n  }\n}\n";
-var styles = {"bui-Popover":"Popover_bui-Popover__d086d67b7e","bui-PopoverArrow":"Popover_bui-PopoverArrow__d086d67b7e","bui-PopoverContent":"Popover_bui-PopoverContent__d086d67b7e"};
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Popover_bui-Popover__f3b0d50727 {\n    --popover-border-radius: var(--bui-radius-3);\n    box-shadow: var(--bui-shadow);\n    border-radius: var(--popover-border-radius);\n    background: var(--bui-bg-app);\n    border: 1px solid var(--bui-border-1);\n    forced-color-adjust: none;\n    outline: none;\n    max-height: inherit;\n    display: flex;\n    flex-direction: column;\n    /* fixes FF gap */\n    transform: translate3d(0, 0, 0);\n    transition: transform 200ms, opacity 200ms;\n\n    &[data-entering],\n    &[data-exiting] {\n      transform: var(--origin);\n      opacity: 0;\n    }\n\n    &[data-placement='top'] {\n      --origin: translateY(4px);\n\n      &:has(.Popover_bui-PopoverArrow__f3b0d50727) {\n        margin-bottom: var(--bui-space-3);\n      }\n    }\n\n    &[data-placement='right'] {\n      --origin: translateX(-4px);\n\n      &:has(.Popover_bui-PopoverArrow__f3b0d50727) {\n        margin-left: var(--bui-space-3);\n      }\n    }\n\n    &[data-placement='bottom'] {\n      --origin: translateY(-4px);\n\n      &:has(.Popover_bui-PopoverArrow__f3b0d50727) {\n        margin-top: var(--bui-space-3);\n      }\n    }\n\n    &[data-placement='left'] {\n      --origin: translateX(4px);\n\n      &:has(.Popover_bui-PopoverArrow__f3b0d50727) {\n        margin-right: var(--bui-space-3);\n      }\n    }\n  }\n\n  .Popover_bui-PopoverContent__f3b0d50727 {\n    overflow-x: hidden;\n    overflow-y: auto;\n    padding: var(--bui-space-4);\n    flex: 1 1 auto;\n    min-height: 0;\n    border-radius: var(--popover-border-radius);\n  }\n\n  .Popover_bui-PopoverArrow__f3b0d50727 {\n    & svg {\n      display: block;\n\n      /* The popover is rendered overlaying the main\n      popover element by 1px. This causes the borders\n      to overlap, which causes minor visual artifacts\n      with transparent border colors. To mitigate this,\n      we split the stroke and fill across separate\n      elements in order to guarantee that the stroke is\n      always overlaying a consistent color. */\n      use:nth-of-type(1) {\n        fill: var(--bui-bg-app);\n      }\n      use:nth-of-type(2) {\n        fill: var(--bui-bg-neutral-1);\n      }\n\n      path {\n        fill: var(--bui-border-1);\n      }\n\n      /* The arrow svg overlaps the popover by 2px, so we\n      need to adjust the margins accordingly. */\n      --popover-arrow-overlap: -2px;\n    }\n\n    &[data-placement='top'] svg {\n      margin-top: var(--popover-arrow-overlap);\n    }\n\n    &[data-placement='bottom'] svg {\n      margin-bottom: var(--popover-arrow-overlap);\n      transform: rotate(180deg);\n    }\n\n    &[data-placement='right'] svg {\n      margin-right: var(--popover-arrow-overlap);\n      transform: rotate(90deg);\n    }\n\n    &[data-placement='left'] svg {\n      margin-left: var(--popover-arrow-overlap);\n      transform: rotate(-90deg);\n    }\n  }\n}\n";
+var styles = {"bui-Popover":"Popover_bui-Popover__f3b0d50727","bui-PopoverArrow":"Popover_bui-PopoverArrow__f3b0d50727","bui-PopoverContent":"Popover_bui-PopoverContent__f3b0d50727"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/Popover/definition.esm.js

@@ -1,10 +1,24 @@
-const PopoverDefinition = {
+import 'react/jsx-runtime';
+import 'clsx';
+import '../../hooks/useBreakpoint.esm.js';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './Popover.module.css.esm.js';
+
+const PopoverDefinition = defineComponent()({
+  styles,
   classNames: {
     root: "bui-Popover",
     arrow: "bui-PopoverArrow",
     content: "bui-PopoverContent"
+  },
+  propDefs: {
+    children: {},
+    hideArrow: {},
+    className: {}
   }
-};
+});
 
 export { PopoverDefinition };
 //# sourceMappingURL=definition.esm.js.map

package/dist/components/Popover/definition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Popover/definition.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\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Popover\n * @public\n */\nexport const PopoverDefinition = {\n  classNames: {\n    root: 'bui-Popover',\n    arrow: 'bui-PopoverArrow',\n    content: 'bui-PopoverContent',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,iBAAA,GAAoB;AAAA,EAC/B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,aAAA;AAAA,IACN,KAAA,EAAO,kBAAA;AAAA,IACP,OAAA,EAAS;AAAA;AAEb;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Popover/definition.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\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { PopoverOwnProps } from './types';\nimport styles from './Popover.module.css';\n\n/**\n * Component definition for Popover\n * @public\n */\nexport const PopoverDefinition = defineComponent<PopoverOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Popover',\n    arrow: 'bui-PopoverArrow',\n    content: 'bui-PopoverContent',\n  },\n  propDefs: {\n    children: {},\n    hideArrow: {},\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,iBAAA,GAAoB,iBAAiC,CAAE;AAAA,EAClE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,aAAA;AAAA,IACN,KAAA,EAAO,kBAAA;AAAA,IACP,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,WAAW;AAAC;AAEhB,CAAC;;;;"}

package/dist/components/RadioGroup/RadioGroup.esm.js

@@ -1,27 +1,26 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useEffect } from 'react';
 import { RadioGroup as RadioGroup$1, Radio as Radio$1 } from 'react-aria-components';
-import clsx from 'clsx';
 import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import '../FieldLabel/FieldLabel.module.css.esm.js';
 import { FieldError } from '../FieldError/FieldError.esm.js';
-import { useStyles } from '../../hooks/useStyles.esm.js';
-import { RadioGroupDefinition } from './definition.esm.js';
-import styles from './RadioGroup.module.css.esm.js';
+import '../FieldError/FieldError.module.css.esm.js';
+import { RadioGroupDefinition, RadioDefinition } from './definition.esm.js';
 
 const RadioGroup = forwardRef(
   (props, ref) => {
-    const { classNames, cleanedProps } = useStyles(RadioGroupDefinition, props);
+    const { ownProps, restProps } = useDefinition(RadioGroupDefinition, props);
     const {
-      className,
+      classes,
       label,
       secondaryLabel,
       description,
       isRequired,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      children,
-      ...rest
-    } = cleanedProps;
+      children
+    } = ownProps;
+    const ariaLabel = restProps["aria-label"];
+    const ariaLabelledBy = restProps["aria-labelledby"];
     useEffect(() => {
       if (!label && !ariaLabel && !ariaLabelledBy) {
         console.warn(
@@ -30,44 +29,26 @@ const RadioGroup = forwardRef(
       }
     }, [label, ariaLabel, ariaLabelledBy]);
     const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
-    return /* @__PURE__ */ jsxs(
-      RadioGroup$1,
-      {
-        className: clsx(classNames.root, styles[classNames.root], className),
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        ...rest,
-        ref,
-        children: [
-          /* @__PURE__ */ jsx(
-            FieldLabel,
-            {
-              label,
-              secondaryLabel: secondaryLabelText,
-              description
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: clsx(classNames.content, styles[classNames.content]), children }),
-          /* @__PURE__ */ jsx(FieldError, {})
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxs(RadioGroup$1, { className: classes.root, ...restProps, ref, children: [
+      /* @__PURE__ */ jsx(
+        FieldLabel,
+        {
+          label,
+          secondaryLabel: secondaryLabelText,
+          description
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: classes.content, children }),
+      /* @__PURE__ */ jsx(FieldError, {})
+    ] });
   }
 );
 RadioGroup.displayName = "RadioGroup";
 const Radio = forwardRef((props, ref) => {
-  const { className, ...rest } = props;
-  const { classNames } = useStyles(RadioGroupDefinition);
-  return /* @__PURE__ */ jsx(
-    Radio$1,
-    {
-      className: clsx(classNames.radio, styles[classNames.radio], className),
-      ...rest,
-      ref
-    }
-  );
+  const { ownProps, restProps } = useDefinition(RadioDefinition, props);
+  return /* @__PURE__ */ jsx(Radio$1, { className: ownProps.classes.root, ...restProps, ref });
 });
-RadioGroup.displayName = "RadioGroup";
+Radio.displayName = "Radio";
 
 export { Radio, RadioGroup };
 //# sourceMappingURL=RadioGroup.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.esm.js","sources":["../../../src/components/RadioGroup/RadioGroup.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  RadioGroup as AriaRadioGroup,\n  Radio as AriaRadio,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { useStyles } from '../../hooks/useStyles';\nimport { RadioGroupDefinition } from './definition';\nimport styles from './RadioGroup.module.css';\n\nimport type { RadioGroupProps, RadioProps } from './types';\n\n/** @public */\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (props, ref) => {\n    const { classNames, cleanedProps } = useStyles(RadioGroupDefinition, props);\n    const {\n      className,\n      label,\n      secondaryLabel,\n      description,\n      isRequired,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      children,\n      ...rest\n    } = cleanedProps;\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'RadioGroup 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 =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    return (\n      <AriaRadioGroup\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div className={clsx(classNames.content, styles[classNames.content])}>\n          {children}\n        </div>\n        <FieldError />\n      </AriaRadioGroup>\n    );\n  },\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\n/** @public */\nexport const Radio = forwardRef<HTMLLabelElement, RadioProps>((props, ref) => {\n  const { className, ...rest } = props;\n\n  const { classNames } = useStyles(RadioGroupDefinition);\n\n  return (\n    <AriaRadio\n      className={clsx(classNames.radio, styles[classNames.radio], className)}\n      {...rest}\n      ref={ref}\n    />\n  );\n});\n\nRadioGroup.displayName = 'RadioGroup';\n"],"names":["AriaRadioGroup","AriaRadio"],"mappings":";;;;;;;;;;AA+BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,sBAAsB,KAAK,CAAA;AAC1E,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA,EAAc,SAAA;AAAA,MACd,iBAAA,EAAmB,cAAA;AAAA,MACnB,QAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,YAAA;AAEJ,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC3C,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,EAAW,cAAc,CAAC,CAAA;AAGrC,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAE/C,IAAA,uBACE,IAAA;AAAA,MAACA,YAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,YAAA,EAAY,SAAA;AAAA,QACZ,iBAAA,EAAiB,cAAA;AAAA,QAChB,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAA,EAAgB,kBAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,OAAA,EAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA,EAChE,QAAA,EACH,CAAA;AAAA,8BACC,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AAGlB,MAAM,KAAA,GAAQ,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,KAAA;AAE/B,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,oBAAoB,CAAA;AAErD,EAAA,uBACE,GAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,KAAA,EAAO,OAAO,UAAA,CAAW,KAAK,GAAG,SAAS,CAAA;AAAA,MACpE,GAAG,IAAA;AAAA,MACJ;AAAA;AAAA,GACF;AAEJ,CAAC;AAED,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
+{"version":3,"file":"RadioGroup.esm.js","sources":["../../../src/components/RadioGroup/RadioGroup.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  RadioGroup as AriaRadioGroup,\n  Radio as AriaRadio,\n} from 'react-aria-components';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { RadioGroupDefinition, RadioDefinition } from './definition';\n\nimport type { RadioGroupProps, RadioProps } from './types';\n\n/** @public */\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(RadioGroupDefinition, props);\n    const {\n      classes,\n      label,\n      secondaryLabel,\n      description,\n      isRequired,\n      children,\n    } = ownProps;\n\n    const ariaLabel = restProps['aria-label'];\n    const ariaLabelledBy = restProps['aria-labelledby'];\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'RadioGroup 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 =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    return (\n      <AriaRadioGroup className={classes.root} {...restProps} ref={ref}>\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div className={classes.content}>{children}</div>\n        <FieldError />\n      </AriaRadioGroup>\n    );\n  },\n);\n\nRadioGroup.displayName = 'RadioGroup';\n\n/** @public */\nexport const Radio = forwardRef<HTMLLabelElement, RadioProps>((props, ref) => {\n  const { ownProps, restProps } = useDefinition(RadioDefinition, props);\n\n  return (\n    <AriaRadio className={ownProps.classes.root} {...restProps} ref={ref} />\n  );\n});\n\nRadio.displayName = 'Radio';\n"],"names":["AriaRadioGroup","AriaRadio"],"mappings":";;;;;;;;;;AA6BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,sBAAsB,KAAK,CAAA;AACzE,IAAA,MAAM;AAAA,MACJ,OAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACF,GAAI,QAAA;AAEJ,IAAA,MAAM,SAAA,GAAY,UAAU,YAAY,CAAA;AACxC,IAAA,MAAM,cAAA,GAAiB,UAAU,iBAAiB,CAAA;AAElD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC3C,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,EAAW,cAAc,CAAC,CAAA;AAGrC,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAE/C,IAAA,4BACGA,YAAA,EAAA,EAAe,SAAA,EAAW,QAAQ,IAAA,EAAO,GAAG,WAAW,GAAA,EACtD,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,KAAA;AAAA,UACA,cAAA,EAAgB,kBAAA;AAAA,UAChB;AAAA;AAAA,OACF;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,SAAU,QAAA,EAAS,CAAA;AAAA,0BAC1C,UAAA,EAAA,EAAW;AAAA,KAAA,EACd,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AAGlB,MAAM,KAAA,GAAQ,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,iBAAiB,KAAK,CAAA;AAEpE,EAAA,uBACE,GAAA,CAACC,WAAU,SAAA,EAAW,QAAA,CAAS,QAAQ,IAAA,EAAO,GAAG,WAAW,GAAA,EAAU,CAAA;AAE1E,CAAC;AAED,KAAA,CAAM,WAAA,GAAc,OAAA;;;;"}

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

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .RadioGroup_bui-RadioGroup__3998cb3970 {\n    display: flex;\n    flex-direction: column;\n    color: var(--bui-fg-primary);\n  }\n\n  .RadioGroup_bui-RadioGroup__3998cb3970[data-orientation='horizontal'] .RadioGroup_bui-RadioGroupContent__3998cb3970 {\n    flex-direction: row;\n    gap: var(--bui-space-4);\n  }\n\n  .RadioGroup_bui-RadioGroupContent__3998cb3970 {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-2);\n  }\n\n  .RadioGroup_bui-Radio__3998cb3970 {\n    display: flex;\n    /* This is needed so the HiddenInput is positioned correctly */\n    position: relative;\n    align-items: center;\n    gap: var(--bui-space-2);\n    font-size: var(--bui-font-size-2);\n    color: var(--bui-fg-primary);\n    forced-color-adjust: none;\n\n    &:before {\n      content: '';\n      display: block;\n      width: 1rem;\n      height: 1rem;\n      box-sizing: border-box;\n      border: 0.125rem solid var(--bui-border-2);\n      background: var(--bui-bg-neutral-1);\n      border-radius: var(--bui-radius-full);\n      transition: all 200ms;\n      flex-shrink: 0;\n      flex-grow: 0;\n    }\n\n    &[data-pressed]:before {\n      border-color: var(--bui-border-2);\n    }\n\n    &[data-selected] {\n      &:before {\n        border-color: var(--bui-bg-solid);\n        border-width: 0.25rem;\n      }\n\n      &[data-pressed]:before {\n        border-color: var(--bui-bg-solid);\n      }\n    }\n\n    &[data-focus-visible]:before {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n\n      &:before {\n        background: var(--bui-bg-disabled);\n      }\n    }\n\n    &[data-invalid]:before {\n      border-color: var(--bui-border-danger);\n    }\n\n    &[data-invalid][data-selected]:before {\n      border-color: var(--bui-border-danger);\n    }\n\n    /* Ensure disabled state prevails over invalid state */\n    &[data-disabled][data-invalid] {\n      color: var(--bui-fg-disabled);\n\n      &:before {\n        background: var(--bui-bg-disabled);\n      }\n    }\n  }\n}\n";
-var styles = {"bui-RadioGroup":"RadioGroup_bui-RadioGroup__3998cb3970","bui-RadioGroupContent":"RadioGroup_bui-RadioGroupContent__3998cb3970","bui-Radio":"RadioGroup_bui-Radio__3998cb3970"};
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .RadioGroup_bui-RadioGroup__5d12209cff {\n    display: flex;\n    flex-direction: column;\n    color: var(--bui-fg-primary);\n  }\n\n  .RadioGroup_bui-RadioGroup__5d12209cff[data-orientation='horizontal'] .RadioGroup_bui-RadioGroupContent__5d12209cff {\n    flex-direction: row;\n    gap: var(--bui-space-4);\n  }\n\n  .RadioGroup_bui-RadioGroupContent__5d12209cff {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-2);\n  }\n\n  .RadioGroup_bui-Radio__5d12209cff {\n    display: flex;\n    /* This is needed so the HiddenInput is positioned correctly */\n    position: relative;\n    align-items: center;\n    gap: var(--bui-space-2);\n    font-size: var(--bui-font-size-2);\n    color: var(--bui-fg-primary);\n    forced-color-adjust: none;\n    cursor: pointer;\n\n    &:before {\n      content: '';\n      display: block;\n      width: 1rem;\n      height: 1rem;\n      box-sizing: border-box;\n      border: 0.125rem solid var(--bui-border-2);\n      background: var(--bui-bg-neutral-1);\n      border-radius: var(--bui-radius-full);\n      transition: all 200ms;\n      flex-shrink: 0;\n      flex-grow: 0;\n    }\n\n    &[data-pressed]:before {\n      border-color: var(--bui-border-2);\n    }\n\n    &[data-selected] {\n      &:before {\n        border-color: var(--bui-bg-solid);\n        border-width: 0.25rem;\n      }\n\n      &[data-pressed]:before {\n        border-color: var(--bui-bg-solid);\n      }\n    }\n\n    &[data-focus-visible]:before {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n\n      &:before {\n        background: var(--bui-bg-disabled);\n      }\n    }\n\n    &[data-invalid]:before {\n      border-color: var(--bui-border-danger);\n    }\n\n    &[data-invalid][data-selected]:before {\n      border-color: var(--bui-border-danger);\n    }\n\n    /* Ensure disabled state prevails over invalid state */\n    &[data-disabled][data-invalid] {\n      color: var(--bui-fg-disabled);\n\n      &:before {\n        background: var(--bui-bg-disabled);\n      }\n    }\n\n    &[data-readonly] {\n      cursor: not-allowed;\n    }\n  }\n}\n";
+var styles = {"bui-RadioGroup":"RadioGroup_bui-RadioGroup__5d12209cff","bui-RadioGroupContent":"RadioGroup_bui-RadioGroupContent__5d12209cff","bui-Radio":"RadioGroup_bui-Radio__5d12209cff"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/RadioGroup/definition.esm.js

@@ -1,10 +1,35 @@
-const RadioGroupDefinition = {
+import 'react/jsx-runtime';
+import 'clsx';
+import '../../hooks/useBreakpoint.esm.js';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './RadioGroup.module.css.esm.js';
+
+const RadioGroupDefinition = defineComponent()({
+  styles,
   classNames: {
     root: "bui-RadioGroup",
-    content: "bui-RadioGroupContent",
-    radio: "bui-Radio"
+    content: "bui-RadioGroupContent"
+  },
+  propDefs: {
+    children: {},
+    className: {},
+    label: {},
+    secondaryLabel: {},
+    description: {},
+    isRequired: {}
+  }
+});
+const RadioDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-Radio"
+  },
+  propDefs: {
+    className: {}
   }
-};
+});
 
-export { RadioGroupDefinition };
+export { RadioDefinition, RadioGroupDefinition };
 //# sourceMappingURL=definition.esm.js.map

package/dist/components/RadioGroup/definition.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/RadioGroup/definition.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\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for RadioGroup\n * @public\n */\nexport const RadioGroupDefinition = {\n  classNames: {\n    root: 'bui-RadioGroup',\n    content: 'bui-RadioGroupContent',\n    radio: 'bui-Radio',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,oBAAA,GAAuB;AAAA,EAClC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,gBAAA;AAAA,IACN,OAAA,EAAS,uBAAA;AAAA,IACT,KAAA,EAAO;AAAA;AAEX;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/RadioGroup/definition.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\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { RadioGroupOwnProps, RadioOwnProps } from './types';\nimport styles from './RadioGroup.module.css';\n\n/**\n * Component definition for RadioGroup\n * @public\n */\nexport const RadioGroupDefinition = defineComponent<RadioGroupOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-RadioGroup',\n    content: 'bui-RadioGroupContent',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n    label: {},\n    secondaryLabel: {},\n    description: {},\n    isRequired: {},\n  },\n});\n\n/**\n * Component definition for Radio\n * @public\n */\nexport const RadioDefinition = defineComponent<RadioOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Radio',\n  },\n  propDefs: {\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,oBAAA,GAAuB,iBAAoC,CAAE;AAAA,EACxE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,gBAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,OAAO,EAAC;AAAA,IACR,gBAAgB,EAAC;AAAA,IACjB,aAAa,EAAC;AAAA,IACd,YAAY;AAAC;AAEjB,CAAC;AAMM,MAAM,eAAA,GAAkB,iBAA+B,CAAE;AAAA,EAC9D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW;AAAC;AAEhB,CAAC;;;;"}