@backstage/ui 0.7.2-next.2 → 0.8.0

package/dist/components/TagGroup/TagGroup.esm.js

@@ -5,28 +5,35 @@ import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import { isExternalLink } from '../../utils/isExternalLink.esm.js';
 import { useNavigate, useHref } from 'react-router-dom';
+import styles from './TagGroup.module.css.esm.js';
 
-const TagGroup = ({
-  items,
-  children,
-  renderEmptyState,
-  ...props
-}) => {
-  const { classNames } = useStyles("TagGroup");
-  return /* @__PURE__ */ jsx(TagGroup$1, { className: classNames.group, ...props, children: /* @__PURE__ */ jsx(
-    TagList,
+const TagGroup = (props) => {
+  const { classNames, cleanedProps } = useStyles("TagGroup", props);
+  const { items, children, renderEmptyState, ...rest } = cleanedProps;
+  return /* @__PURE__ */ jsx(
+    TagGroup$1,
     {
-      className: classNames.list,
-      items,
-      renderEmptyState,
-      children
+      className: clsx(classNames.group, styles[classNames.group]),
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        TagList,
+        {
+          className: clsx(classNames.list, styles[classNames.list]),
+          items,
+          renderEmptyState,
+          children
+        }
+      )
     }
-  ) });
+  );
 };
 const Tag = (props) => {
-  const { children, className, icon, size = "small", href, ...rest } = props;
+  const { classNames, cleanedProps } = useStyles("TagGroup", {
+    size: "small",
+    ...props
+  });
+  const { children, className, icon, size, href, ...rest } = cleanedProps;
   const textValue = typeof children === "string" ? children : void 0;
-  const { classNames } = useStyles("TagGroup");
   const navigate = useNavigate();
   const isLink = href !== void 0;
   const isExternal = isExternalLink(href);
@@ -34,17 +41,26 @@ const Tag = (props) => {
     Tag$1,
     {
       textValue,
-      className: clsx(classNames.tag, className),
+      className: clsx(classNames.tag, styles[classNames.tag], className),
       "data-size": size,
       href,
       ...rest,
       children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-        icon && /* @__PURE__ */ jsx("span", { className: classNames.tagIcon, children: icon }),
+        icon && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: clsx(classNames.tagIcon, styles[classNames.tagIcon]),
+            children: icon
+          }
+        ),
         children,
         allowsRemoving && /* @__PURE__ */ jsx(
           Button,
           {
-            className: classNames.tagRemoveButton,
+            className: clsx(
+              classNames.tagRemoveButton,
+              styles[classNames.tagRemoveButton]
+            ),
             slot: "remove",
             children: /* @__PURE__ */ jsx(RiCloseCircleLine, { size: 16 })
           }

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

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.esm.js","sources":["../../../src/components/TagGroup/TagGroup.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 { TagProps, TagGroupProps } from './types';\nimport {\n  TagGroup as ReactAriaTagGroup,\n  TagList as ReactAriaTagList,\n  Tag as ReactAriaTag,\n  Button as ReactAriaButton,\n  RouterProvider,\n} from 'react-aria-components';\nimport type { ReactNode } from 'react';\nimport { RiCloseCircleLine } from '@remixicon/react';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport { useNavigate, useHref } from 'react-router-dom';\n\n/**\n * A component that renders a list of tags.\n *\n * @public\n */\nexport const TagGroup = <T extends object>({\n  items,\n  children,\n  renderEmptyState,\n  ...props\n}: TagGroupProps<T>) => {\n  const { classNames } = useStyles('TagGroup');\n  return (\n    <ReactAriaTagGroup className={classNames.group} {...props}>\n      <ReactAriaTagList\n        className={classNames.list}\n        items={items}\n        renderEmptyState={renderEmptyState}\n      >\n        {children}\n      </ReactAriaTagList>\n    </ReactAriaTagGroup>\n  );\n};\n\n/**\n * A component that renders a tag.\n *\n * @public\n */\nexport const Tag = (props: TagProps) => {\n  const { children, className, icon, size = 'small', href, ...rest } = props;\n  const textValue = typeof children === 'string' ? children : undefined;\n  const { classNames } = useStyles('TagGroup');\n  const navigate = useNavigate();\n  const isLink = href !== undefined;\n  const isExternal = isExternalLink(href);\n\n  const content = (\n    <ReactAriaTag\n      textValue={textValue}\n      className={clsx(classNames.tag, className)}\n      data-size={size}\n      href={href}\n      {...rest}\n    >\n      {({ allowsRemoving }) => (\n        <>\n          {icon && <span className={classNames.tagIcon}>{icon}</span>}\n          {children as ReactNode}\n          {allowsRemoving && (\n            <ReactAriaButton\n              className={classNames.tagRemoveButton}\n              slot=\"remove\"\n            >\n              <RiCloseCircleLine size={16} />\n            </ReactAriaButton>\n          )}\n        </>\n      )}\n    </ReactAriaTag>\n  );\n\n  if (isLink && !isExternal) {\n    return (\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        {content}\n      </RouterProvider>\n    );\n  }\n\n  return content;\n};\n"],"names":["ReactAriaTagGroup","ReactAriaTagList","ReactAriaTag","ReactAriaButton"],"mappings":";;;;;;;;AAoCO,MAAM,WAAW,CAAmB;AAAA,EACzC,KAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAwB;AACtB,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,UAAU,CAAA;AAC3C,EAAA,2BACGA,UAAA,EAAA,EAAkB,SAAA,EAAW,UAAA,CAAW,KAAA,EAAQ,GAAG,KAAA,EAClD,QAAA,kBAAA,GAAA;AAAA,IAACC,OAAA;AAAA,IAAA;AAAA,MACC,WAAW,UAAA,CAAW,IAAA;AAAA,MACtB,KAAA;AAAA,MACA,gBAAA;AAAA,MAEC;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAOO,MAAM,GAAA,GAAM,CAAC,KAAA,KAAoB;AACtC,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,IAAA,EAAM,OAAO,OAAA,EAAS,IAAA,EAAM,GAAG,IAAA,EAAK,GAAI,KAAA;AACrE,EAAA,MAAM,SAAA,GAAY,OAAO,QAAA,KAAa,QAAA,GAAW,QAAA,GAAW,MAAA;AAC5D,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,UAAU,CAAA;AAC3C,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,SAAS,IAAA,KAAS,MAAA;AACxB,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAEtC,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAACC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,GAAA,EAAK,SAAS,CAAA;AAAA,MACzC,WAAA,EAAW,IAAA;AAAA,MACX,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA,CAAC,EAAE,cAAA,EAAe,qBACjB,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,UAAA,CAAW,SAAU,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,QACnD,QAAA;AAAA,QACA,cAAA,oBACC,GAAA;AAAA,UAACC,MAAA;AAAA,UAAA;AAAA,YACC,WAAW,UAAA,CAAW,eAAA;AAAA,YACtB,IAAA,EAAK,QAAA;AAAA,YAEL,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,EAAA,EAAI;AAAA;AAAA;AAC/B,OAAA,EAEJ;AAAA;AAAA,GAEJ;AAGF,EAAA,IAAI,MAAA,IAAU,CAAC,UAAA,EAAY;AACzB,IAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EACjC,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,OAAA;AACT;;;;"}
+{"version":3,"file":"TagGroup.esm.js","sources":["../../../src/components/TagGroup/TagGroup.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 { TagProps, TagGroupProps } from './types';\nimport {\n  TagGroup as ReactAriaTagGroup,\n  TagList as ReactAriaTagList,\n  Tag as ReactAriaTag,\n  Button as ReactAriaButton,\n  RouterProvider,\n} from 'react-aria-components';\nimport type { ReactNode } from 'react';\nimport { RiCloseCircleLine } from '@remixicon/react';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport styles from './TagGroup.module.css';\n\n/**\n * A component that renders a list of tags.\n *\n * @public\n */\nexport const TagGroup = <T extends object>(props: TagGroupProps<T>) => {\n  const { classNames, cleanedProps } = useStyles('TagGroup', props);\n  const { items, children, renderEmptyState, ...rest } = cleanedProps;\n\n  return (\n    <ReactAriaTagGroup\n      className={clsx(classNames.group, styles[classNames.group])}\n      {...rest}\n    >\n      <ReactAriaTagList\n        className={clsx(classNames.list, styles[classNames.list])}\n        items={items}\n        renderEmptyState={renderEmptyState}\n      >\n        {children}\n      </ReactAriaTagList>\n    </ReactAriaTagGroup>\n  );\n};\n\n/**\n * A component that renders a tag.\n *\n * @public\n */\nexport const Tag = (props: TagProps) => {\n  const { classNames, cleanedProps } = useStyles('TagGroup', {\n    size: 'small',\n    ...props,\n  });\n  const { children, className, icon, size, href, ...rest } = cleanedProps;\n  const textValue = typeof children === 'string' ? children : undefined;\n  const navigate = useNavigate();\n  const isLink = href !== undefined;\n  const isExternal = isExternalLink(href);\n\n  const content = (\n    <ReactAriaTag\n      textValue={textValue}\n      className={clsx(classNames.tag, styles[classNames.tag], className)}\n      data-size={size}\n      href={href}\n      {...rest}\n    >\n      {({ allowsRemoving }) => (\n        <>\n          {icon && (\n            <span\n              className={clsx(classNames.tagIcon, styles[classNames.tagIcon])}\n            >\n              {icon}\n            </span>\n          )}\n          {children as ReactNode}\n          {allowsRemoving && (\n            <ReactAriaButton\n              className={clsx(\n                classNames.tagRemoveButton,\n                styles[classNames.tagRemoveButton],\n              )}\n              slot=\"remove\"\n            >\n              <RiCloseCircleLine size={16} />\n            </ReactAriaButton>\n          )}\n        </>\n      )}\n    </ReactAriaTag>\n  );\n\n  if (isLink && !isExternal) {\n    return (\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        {content}\n      </RouterProvider>\n    );\n  }\n\n  return content;\n};\n"],"names":["ReactAriaTagGroup","ReactAriaTagList","ReactAriaTag","ReactAriaButton"],"mappings":";;;;;;;;;AAqCO,MAAM,QAAA,GAAW,CAAmB,KAAA,KAA4B;AACrE,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,YAAY,KAAK,CAAA;AAChE,EAAA,MAAM,EAAE,KAAA,EAAO,QAAA,EAAU,gBAAA,EAAkB,GAAG,MAAK,GAAI,YAAA;AAEvD,EAAA,uBACE,GAAA;AAAA,IAACA,UAAA;AAAA,IAAA;AAAA,MACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,MACzD,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAACC,OAAA;AAAA,QAAA;AAAA,UACC,WAAW,IAAA,CAAK,UAAA,CAAW,MAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAC,CAAA;AAAA,UACxD,KAAA;AAAA,UACA,gBAAA;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAOO,MAAM,GAAA,GAAM,CAAC,KAAA,KAAoB;AACtC,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAAU,UAAA,EAAY;AAAA,IACzD,IAAA,EAAM,OAAA;AAAA,IACN,GAAG;AAAA,GACJ,CAAA;AACD,EAAA,MAAM,EAAE,UAAU,SAAA,EAAW,IAAA,EAAM,MAAM,IAAA,EAAM,GAAG,MAAK,GAAI,YAAA;AAC3D,EAAA,MAAM,SAAA,GAAY,OAAO,QAAA,KAAa,QAAA,GAAW,QAAA,GAAW,MAAA;AAC5D,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,SAAS,IAAA,KAAS,MAAA;AACxB,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAEtC,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAACC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,GAAA,EAAK,OAAO,UAAA,CAAW,GAAG,GAAG,SAAS,CAAA;AAAA,MACjE,WAAA,EAAW,IAAA;AAAA,MACX,IAAA;AAAA,MACC,GAAG,IAAA;AAAA,MAEH,QAAA,EAAA,CAAC,EAAE,cAAA,EAAe,qBACjB,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,QAAA,IAAA,oBACC,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA;AAAA,YAE7D,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAED,QAAA;AAAA,QACA,cAAA,oBACC,GAAA;AAAA,UAACC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA;AAAA,cACT,UAAA,CAAW,eAAA;AAAA,cACX,MAAA,CAAO,WAAW,eAAe;AAAA,aACnC;AAAA,YACA,IAAA,EAAK,QAAA;AAAA,YAEL,QAAA,kBAAA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,EAAA,EAAI;AAAA;AAAA;AAC/B,OAAA,EAEJ;AAAA;AAAA,GAEJ;AAGF,EAAA,IAAI,MAAA,IAAU,CAAC,UAAA,EAAY;AACzB,IAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EACjC,QAAA,EAAA,OAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,OAAO,OAAA;AACT;;;;"}

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

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer components {\n  .TagGroup-module_bui-TagList__3GmM2 {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--bui-space-2);\n  }\n\n  .TagGroup-module_bui-Tag__29R-y {\n    color: var(--bui-fg-primary);\n    background-color: var(--bui-gray-2);\n    border-radius: var(--bui-radius-2);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-weight: var(--bui-font-weight-regular);\n    gap: var(--bui-space-1);\n    transition-property: background-color, box-shadow, color;\n    transition-duration: 0.2s;\n    transition-timing-function: ease-in-out;\n    box-sizing: border-box;\n  }\n\n  .TagGroup-module_bui-Tag__29R-y[data-size='small'] {\n    height: 26px;\n    padding: 0 var(--bui-space-2);\n    font-size: var(--bui-font-size-1);\n  }\n\n  .TagGroup-module_bui-Tag__29R-y[data-size='medium'] {\n    height: 32px;\n    padding: 0 var(--bui-space-2);\n    font-size: var(--bui-font-size-2);\n  }\n\n  .TagGroup-module_bui-Tag__29R-y[data-hovered] {\n    background-color: var(--bui-gray-3);\n    cursor: pointer;\n  }\n\n  .TagGroup-module_bui-Tag__29R-y[data-focus-visible] {\n    outline: 2px solid var(--bui-ring);\n    outline-offset: 1px;\n  }\n\n  .TagGroup-module_bui-Tag__29R-y[data-selected] {\n    box-shadow: inset 0 0 0 1px var(--bui-gray-8);\n  }\n\n  .TagGroup-module_bui-Tag__29R-y[data-disabled] {\n    color: var(--bui-fg-disabled);\n    cursor: not-allowed;\n  }\n\n  .TagGroup-module_bui-TagRemoveButton__2uLh- {\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n    color: var(--bui-fg-primary);\n    padding: 0;\n    margin: 0;\n    width: 1rem;\n    height: 1rem;\n  }\n\n  .TagGroup-module_bui-TagIcon__3Hl1U {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: color 0.2s ease-in-out;\n\n    svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n}\n";
+var styles = {"bui-TagList":"TagGroup-module_bui-TagList__3GmM2","bui-Tag":"TagGroup-module_bui-Tag__29R-y","bui-TagRemoveButton":"TagGroup-module_bui-TagRemoveButton__2uLh-","bui-TagIcon":"TagGroup-module_bui-TagIcon__3Hl1U"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=TagGroup.module.css.esm.js.map

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

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

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

@@ -2,32 +2,23 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import stylesText from './Text.module.css.esm.js';
 
-function TextComponent({
-  as,
-  variant = "body-medium",
-  weight = "regular",
-  color = "primary",
-  className,
-  truncate,
-  style,
-  ...restProps
-}, ref) {
-  const Component = as || "span";
-  const { classNames, dataAttributes } = useStyles("Text", {
-    variant,
-    weight,
-    color
+function TextComponent(props, ref) {
+  const Component = props.as || "span";
+  const { classNames, dataAttributes, cleanedProps } = useStyles("Text", {
+    variant: "body-medium",
+    weight: "regular",
+    color: "primary",
+    ...props
   });
+  const { className, ...restProps } = cleanedProps;
   return /* @__PURE__ */ jsx(
     Component,
     {
       ref,
-      className: clsx(classNames.root, className),
-      "data-truncate": truncate,
-      "data-as": as,
+      className: clsx(classNames.root, stylesText[classNames.root], className),
       ...dataAttributes,
-      style,
       ...restProps
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"Text.esm.js","sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { ElementType } from 'react';\nimport type { TextProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\nfunction TextComponent<T extends ElementType = 'span'>(\n  {\n    as,\n    variant = 'body-medium',\n    weight = 'regular',\n    color = 'primary',\n    className,\n    truncate,\n    style,\n    ...restProps\n  }: TextProps<T>,\n  ref: React.Ref<any>,\n) {\n  const Component = as || 'span';\n\n  const { classNames, dataAttributes } = useStyles('Text', {\n    variant,\n    weight,\n    color,\n  });\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(classNames.root, className)}\n      data-truncate={truncate}\n      data-as={as}\n      {...dataAttributes}\n      style={style}\n      {...restProps}\n    />\n  );\n}\n\nTextComponent.displayName = 'Text';\n\n/** @public */\nexport const Text = forwardRef(TextComponent) as {\n  <T extends ElementType = 'p'>(\n    props: TextProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n  ): React.ReactElement<TextProps<T>, T>;\n  displayName: string;\n};\n\nText.displayName = 'Text';\n"],"names":[],"mappings":";;;;;AAsBA,SAAS,aAAA,CACP;AAAA,EACE,EAAA;AAAA,EACA,OAAA,GAAU,aAAA;AAAA,EACV,MAAA,GAAS,SAAA;AAAA,EACT,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,YAAY,EAAA,IAAM,MAAA;AAExB,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,UAAU,MAAA,EAAQ;AAAA,IACvD,OAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,MAC1C,eAAA,EAAe,QAAA;AAAA,MACf,SAAA,EAAS,EAAA;AAAA,MACR,GAAG,cAAA;AAAA,MACJ,KAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,aAAA,CAAc,WAAA,GAAc,MAAA;AAGrB,MAAM,IAAA,GAAO,WAAW,aAAa;AAO5C,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
+{"version":3,"file":"Text.esm.js","sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { ElementType } from 'react';\nimport type { TextProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Text.module.css';\n\nfunction TextComponent<T extends ElementType = 'span'>(\n  props: TextProps<T>,\n  ref: React.Ref<any>,\n) {\n  const Component = props.as || 'span';\n\n  const { classNames, dataAttributes, cleanedProps } = useStyles('Text', {\n    variant: 'body-medium',\n    weight: 'regular',\n    color: 'primary',\n    ...props,\n  });\n\n  const { className, ...restProps } = cleanedProps;\n\n  return (\n    <Component\n      ref={ref}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...dataAttributes}\n      {...restProps}\n    />\n  );\n}\n\nTextComponent.displayName = 'Text';\n\n/** @public */\nexport const Text = forwardRef(TextComponent) as {\n  <T extends ElementType = 'p'>(\n    props: TextProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n  ): React.ReactElement<TextProps<T>, T>;\n  displayName: string;\n};\n\nText.displayName = 'Text';\n"],"names":["styles"],"mappings":";;;;;;AAuBA,SAAS,aAAA,CACP,OACA,GAAA,EACA;AACA,EAAA,MAAM,SAAA,GAAY,MAAM,EAAA,IAAM,MAAA;AAE9B,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,MAAA,EAAQ;AAAA,IACrE,OAAA,EAAS,aAAA;AAAA,IACT,MAAA,EAAQ,SAAA;AAAA,IACR,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,SAAA,EAAU,GAAI,YAAA;AAEpC,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAMA,WAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,aAAA,CAAc,WAAA,GAAc,MAAA;AAGrB,MAAM,IAAA,GAAO,WAAW,aAAa;AAO5C,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}

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

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

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

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

package/dist/components/TextField/TextField.esm.js

@@ -5,21 +5,14 @@ import clsx from 'clsx';
 import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
 import { FieldError } from '../FieldError/FieldError.esm.js';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import stylesTextField from './TextField.module.css.esm.js';
 
 const TextField = forwardRef(
   (props, ref) => {
     const {
-      className,
-      icon,
-      size = "small",
       label,
-      secondaryLabel,
-      description,
-      isRequired,
       "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      placeholder,
-      ...rest
+      "aria-labelledby": ariaLabelledBy
     } = props;
     useEffect(() => {
       if (!label && !ariaLabel && !ariaLabelledBy) {
@@ -28,17 +21,31 @@ const TextField = forwardRef(
         );
       }
     }, [label, ariaLabel, ariaLabelledBy]);
-    const { classNames, dataAttributes } = useStyles("TextField", {
-      size
-    });
+    const { classNames, dataAttributes, style, cleanedProps } = useStyles(
+      "TextField",
+      {
+        size: "small",
+        ...props
+      }
+    );
+    const {
+      className,
+      description,
+      icon,
+      isRequired,
+      secondaryLabel,
+      placeholder,
+      ...rest
+    } = cleanedProps;
     const secondaryLabelText = secondaryLabel || (isRequired ? "Required" : null);
     return /* @__PURE__ */ jsxs(
       TextField$1,
       {
-        className: clsx(classNames.root, className),
+        className: clsx(classNames.root, stylesTextField[classNames.root], className),
         ...dataAttributes,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
+        style,
         ...rest,
         ref,
         children: [
@@ -53,13 +60,19 @@ const TextField = forwardRef(
           /* @__PURE__ */ jsxs(
             "div",
             {
-              className: classNames.inputWrapper,
+              className: clsx(
+                classNames.inputWrapper,
+                stylesTextField[classNames.inputWrapper]
+              ),
               "data-size": dataAttributes["data-size"],
               children: [
                 icon && /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: classNames.inputIcon,
+                    className: clsx(
+                      classNames.inputIcon,
+                      stylesTextField[classNames.inputIcon]
+                    ),
                     "data-size": dataAttributes["data-size"],
                     "aria-hidden": "true",
                     children: icon
@@ -68,7 +81,7 @@ const TextField = forwardRef(
                 /* @__PURE__ */ jsx(
                   Input,
                   {
-                    className: classNames.input,
+                    className: clsx(classNames.input, stylesTextField[classNames.input]),
                     ...icon && { "data-icon": true },
                     placeholder
                   }

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.esm.js","sources":["../../../src/components/TextField/TextField.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 { Input, TextField as AriaTextField } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\n\nimport type { TextFieldProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const TextField = forwardRef<HTMLDivElement, TextFieldProps>(\n  (props, ref) => {\n    const {\n      className,\n      icon,\n      size = 'small',\n      label,\n      secondaryLabel,\n      description,\n      isRequired,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      placeholder,\n      ...rest\n    } = props;\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'TextField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const { classNames, dataAttributes } = useStyles('TextField', {\n      size,\n    });\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      <AriaTextField\n        className={clsx(classNames.root, className)}\n        {...dataAttributes}\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\n          className={classNames.inputWrapper}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon && (\n            <div\n              className={classNames.inputIcon}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon}\n            </div>\n          )}\n          <Input\n            className={classNames.input}\n            {...(icon && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n        </div>\n        <FieldError />\n      </AriaTextField>\n    );\n  },\n);\n\nTextField.displayName = 'TextField';\n"],"names":["AriaTextField"],"mappings":";;;;;;;;AA0BO,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA,GAAO,OAAA;AAAA,MACP,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,YAAA,EAAc,SAAA;AAAA,MACd,iBAAA,EAAmB,cAAA;AAAA,MACnB,WAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;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;AAErC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,UAAU,WAAA,EAAa;AAAA,MAC5D;AAAA,KACD,CAAA;AAGD,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAE/C,IAAA,uBACE,IAAA;AAAA,MAACA,WAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,QACzC,GAAG,cAAA;AAAA,QACJ,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,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,UAAA,CAAW,YAAA;AAAA,cACtB,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,cAEpC,QAAA,EAAA;AAAA,gBAAA,IAAA,oBACC,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,UAAA,CAAW,SAAA;AAAA,oBACtB,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBACrC,aAAA,EAAY,MAAA;AAAA,oBAEX,QAAA,EAAA;AAAA;AAAA,iBACH;AAAA,gCAEF,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,UAAA,CAAW,KAAA;AAAA,oBACrB,GAAI,IAAA,IAAQ,EAAE,WAAA,EAAa,IAAA,EAAK;AAAA,oBACjC;AAAA;AAAA;AACF;AAAA;AAAA,WACF;AAAA,8BACC,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,EAEJ;AACF;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;;;;"}
+{"version":3,"file":"TextField.esm.js","sources":["../../../src/components/TextField/TextField.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 { Input, TextField as AriaTextField } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport type { TextFieldProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './TextField.module.css';\n\n/** @public */\nexport const TextField = forwardRef<HTMLDivElement, TextFieldProps>(\n  (props, ref) => {\n    const {\n      label,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n    } = props;\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'TextField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const { classNames, dataAttributes, style, cleanedProps } = useStyles(\n      'TextField',\n      {\n        size: 'small',\n        ...props,\n      },\n    );\n\n    const {\n      className,\n      description,\n      icon,\n      isRequired,\n      secondaryLabel,\n      placeholder,\n      ...rest\n    } = cleanedProps;\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    return (\n      <AriaTextField\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        style={style}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={clsx(\n            classNames.inputWrapper,\n            styles[classNames.inputWrapper],\n          )}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon && (\n            <div\n              className={clsx(\n                classNames.inputIcon,\n                styles[classNames.inputIcon],\n              )}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon}\n            </div>\n          )}\n          <Input\n            className={clsx(classNames.input, styles[classNames.input])}\n            {...(icon && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n        </div>\n        <FieldError />\n      </AriaTextField>\n    );\n  },\n);\n\nTextField.displayName = 'TextField';\n"],"names":["AriaTextField","styles"],"mappings":";;;;;;;;;AA0BO,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM;AAAA,MACJ,KAAA;AAAA,MACA,YAAA,EAAc,SAAA;AAAA,MACd,iBAAA,EAAmB;AAAA,KACrB,GAAI,KAAA;AAEJ,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC3C,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,EAAW,cAAc,CAAC,CAAA;AAErC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,KAAA,EAAO,cAAa,GAAI,SAAA;AAAA,MAC1D,WAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,OAAA;AAAA,QACN,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,YAAA;AAGJ,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAE/C,IAAA,uBACE,IAAA;AAAA,MAACA,WAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAMC,gBAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QAClE,GAAG,cAAA;AAAA,QACJ,YAAA,EAAY,SAAA;AAAA,QACZ,iBAAA,EAAiB,cAAA;AAAA,QACjB,KAAA;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAA,EAAgB,kBAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BACA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,YAAA;AAAA,gBACXA,eAAA,CAAO,WAAW,YAAY;AAAA,eAChC;AAAA,cACA,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,cAEpC,QAAA,EAAA;AAAA,gBAAA,IAAA,oBACC,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,IAAA;AAAA,sBACT,UAAA,CAAW,SAAA;AAAA,sBACXA,eAAA,CAAO,WAAW,SAAS;AAAA,qBAC7B;AAAA,oBACA,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBACrC,aAAA,EAAY,MAAA;AAAA,oBAEX,QAAA,EAAA;AAAA;AAAA,iBACH;AAAA,gCAEF,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAOA,eAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,oBACzD,GAAI,IAAA,IAAQ,EAAE,WAAA,EAAa,IAAA,EAAK;AAAA,oBACjC;AAAA;AAAA;AACF;AAAA;AAAA,WACF;AAAA,8BACC,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,EAEJ;AACF;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;;;;"}

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

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer components {\n  .TextField-module_bui-TextField__1KBy4 {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n  }\n\n  .TextField-module_bui-InputWrapper__25yD_ {\n    position: relative;\n\n    &[data-size='small'] .TextField-module_bui-Input__1Uojs {\n      height: 2rem;\n    }\n\n    &[data-size='medium'] .TextField-module_bui-Input__1Uojs {\n      height: 2.5rem;\n    }\n\n    &[data-size='small'] .TextField-module_bui-Input__1Uojs[data-icon] {\n      padding-left: var(--bui-space-8);\n    }\n\n    &[data-size='medium'] .TextField-module_bui-Input__1Uojs[data-icon] {\n      padding-left: var(--bui-space-9);\n    }\n  }\n\n  .TextField-module_bui-InputIcon__2KDAe {\n    position: absolute;\n    left: var(--bui-space-3);\n    top: 50%;\n    transform: translateY(-50%);\n    margin-right: var(--bui-space-1);\n    color: var(--bui-fg-primary);\n    flex-shrink: 0;\n    pointer-events: none;\n    /* To animate the icon when the input is collapsed */\n    transition: left 0.2s ease-in-out;\n\n    &[data-size='small'],\n    &[data-size='small'] svg {\n      width: 1rem;\n      height: 1rem;\n    }\n\n    &[data-size='medium'],\n    &[data-size='medium'] svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .TextField-module_bui-Input__1Uojs {\n    display: flex;\n    align-items: center;\n    padding: 0 var(--bui-space-3);\n    border-radius: var(--bui-radius-2);\n    border: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n    width: 100%;\n    height: 100%;\n    cursor: inherit;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[data-focused] {\n      outline-color: var(--bui-border-pressed);\n      outline-width: 0px;\n    }\n\n    &[data-hovered] {\n      border-color: var(--bui-border-hover);\n    }\n\n    &[data-focused] {\n      border-color: var(--bui-border-pressed);\n      outline-width: 0px;\n    }\n\n    &[data-invalid] {\n      border-color: var(--bui-fg-danger);\n    }\n\n    &[data-disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n      border: 1px solid var(--bui-border-disabled);\n    }\n  }\n}\n";
+var stylesTextField = {"bui-TextField":"TextField-module_bui-TextField__1KBy4","bui-InputWrapper":"TextField-module_bui-InputWrapper__25yD_","bui-Input":"TextField-module_bui-Input__1Uojs","bui-InputIcon":"TextField-module_bui-InputIcon__2KDAe"};
+styleInject(css_248z);
+
+export { stylesTextField as default };
+//# sourceMappingURL=TextField.module.css.esm.js.map

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

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

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

@@ -3,25 +3,37 @@ import { forwardRef } from 'react';
 import { Tooltip as Tooltip$1, OverlayArrow, TooltipTrigger as TooltipTrigger$1 } from 'react-aria-components';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import styles from './Tooltip.module.css.esm.js';
 
 const TooltipTrigger = (props) => {
   const { delay = 600 } = props;
   return /* @__PURE__ */ jsx(TooltipTrigger$1, { delay, ...props });
 };
 const Tooltip = forwardRef(
-  ({ className, children, ...rest }, ref) => {
-    const { classNames } = useStyles("Tooltip");
+  (props, ref) => {
+    const { classNames, cleanedProps } = useStyles("Tooltip", props);
+    const { className, children, ...rest } = cleanedProps;
     return /* @__PURE__ */ jsxs(
       Tooltip$1,
       {
-        className: clsx(classNames.tooltip, className),
+        className: clsx(
+          classNames.tooltip,
+          styles[classNames.tooltip],
+          className
+        ),
         ...rest,
         ref,
         children: [
-          /* @__PURE__ */ jsx(OverlayArrow, { className: classNames.arrow, children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
-            /* @__PURE__ */ jsx("path", { d: "M10.3356 7.39793L15.1924 3.02682C15.9269 2.36577 16.8801 2 17.8683 2H20V7.94781e-07L1.74846e-07 -9.53674e-07L0 2L1.4651 2C2.4532 2 3.4064 2.36577 4.1409 3.02682L8.9977 7.39793C9.378 7.7402 9.9553 7.74021 10.3356 7.39793Z" }),
-            /* @__PURE__ */ jsx("path", { d: "M11.0046 8.14124C10.2439 8.82575 9.08939 8.82578 8.32869 8.14122L3.47189 3.77011C2.92109 3.27432 2.20619 2.99999 1.46509 2.99999L4.10999 3L8.99769 7.39793C9.37799 7.7402 9.95529 7.7402 10.3356 7.39793L15.2226 3L17.8683 2.99999C17.1271 2.99999 16.4122 3.27432 15.8614 3.77011L11.0046 8.14124Z" })
-          ] }) }),
+          /* @__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" })
+              ] })
+            }
+          ),
           children
         ]
       }

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.esm.js","sources":["../../../src/components/Tooltip/Tooltip.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 {\n  OverlayArrow,\n  Tooltip as AriaTooltip,\n  TooltipTrigger as AriaTooltipTrigger,\n  TooltipTriggerComponentProps,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { TooltipProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const TooltipTrigger = (props: TooltipTriggerComponentProps) => {\n  const { delay = 600 } = props;\n\n  return <AriaTooltipTrigger delay={delay} {...props} />;\n};\n\n/** @public */\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  ({ className, children, ...rest }, ref) => {\n    const { classNames } = useStyles('Tooltip');\n\n    return (\n      <AriaTooltip\n        className={clsx(classNames.tooltip, className)}\n        {...rest}\n        ref={ref}\n      >\n        <OverlayArrow className={classNames.arrow}>\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        {children}\n      </AriaTooltip>\n    );\n  },\n);\n\nTooltip.displayName = 'Tooltip';\n"],"names":["AriaTooltipTrigger","AriaTooltip"],"mappings":";;;;;;AA4BO,MAAM,cAAA,GAAiB,CAAC,KAAA,KAAwC;AACrE,EAAA,MAAM,EAAE,KAAA,GAAQ,GAAA,EAAI,GAAI,KAAA;AAExB,EAAA,uBAAO,GAAA,CAACA,gBAAA,EAAA,EAAmB,KAAA,EAAe,GAAG,KAAA,EAAO,CAAA;AACtD;AAGO,MAAM,OAAA,GAAU,UAAA;AAAA,EACrB,CAAC,EAAE,SAAA,EAAW,UAAU,GAAG,IAAA,IAAQ,GAAA,KAAQ;AACzC,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,SAAS,CAAA;AAE1C,IAAA,uBACE,IAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,OAAA,EAAS,SAAS,CAAA;AAAA,QAC5C,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAW,UAAA,CAAW,KAAA,EAClC,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,MAAK,MAAA,EACnD,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,8NAAA,EAA+N,CAAA;AAAA,4BACvO,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,qSAAA,EAAsS;AAAA,WAAA,EAChT,CAAA,EACF,CAAA;AAAA,UACC;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA;;;;"}
+{"version":3,"file":"Tooltip.esm.js","sources":["../../../src/components/Tooltip/Tooltip.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 {\n  OverlayArrow,\n  Tooltip as AriaTooltip,\n  TooltipTrigger as AriaTooltipTrigger,\n  TooltipTriggerComponentProps,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { TooltipProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Tooltip.module.css';\n\n/** @public */\nexport const TooltipTrigger = (props: TooltipTriggerComponentProps) => {\n  const { delay = 600 } = props;\n\n  return <AriaTooltipTrigger delay={delay} {...props} />;\n};\n\n/** @public */\nexport const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(\n  (props, ref) => {\n    const { classNames, cleanedProps } = useStyles('Tooltip', props);\n    const { className, children, ...rest } = cleanedProps;\n\n    return (\n      <AriaTooltip\n        className={clsx(\n          classNames.tooltip,\n          styles[classNames.tooltip],\n          className,\n        )}\n        {...rest}\n        ref={ref}\n      >\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        {children}\n      </AriaTooltip>\n    );\n  },\n);\n\nTooltip.displayName = 'Tooltip';\n"],"names":["AriaTooltipTrigger","AriaTooltip"],"mappings":";;;;;;;AA6BO,MAAM,cAAA,GAAiB,CAAC,KAAA,KAAwC;AACrE,EAAA,MAAM,EAAE,KAAA,GAAQ,GAAA,EAAI,GAAI,KAAA;AAExB,EAAA,uBAAO,GAAA,CAACA,gBAAA,EAAA,EAAmB,KAAA,EAAe,GAAG,KAAA,EAAO,CAAA;AACtD;AAGO,MAAM,OAAA,GAAU,UAAA;AAAA,EACrB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,WAAW,KAAK,CAAA;AAC/D,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,MAAK,GAAI,YAAA;AAEzC,IAAA,uBACE,IAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,OAAA;AAAA,UACX,MAAA,CAAO,WAAW,OAAO,CAAA;AAAA,UACzB;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,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,UACC;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA;;;;"}

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

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer components {\n  .Tooltip-module_bui-Tooltip__1xkDA {\n    box-shadow: 0 10px 15px -3px rgba(0 0 0 / 0.1),\n      0 4px 6px -4px rgba(0 0 0 / 0.1);\n    border-radius: 4px;\n    background: var(--bui-bg-surface-1);\n    border: 1px solid var(--bui-gray-3);\n    forced-color-adjust: none;\n    outline: none;\n    padding: var(--bui-space-2) var(--bui-space-3);\n    max-width: 240px;\n    /* fixes FF gap */\n    transform: translate3d(0, 0, 0);\n    transition: transform 200ms, opacity 200ms;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    color: var(--bui-fg-primary);\n\n    &[data-entering],\n    &[data-exiting] {\n      transform: var(--origin);\n      opacity: 0;\n    }\n\n    --tooltip-offset: var(--bui-space-3);\n\n    &[data-placement='top'] {\n      margin-bottom: var(--tooltip-offset);\n      --origin: translateY(4px);\n    }\n\n    &[data-placement='right'] {\n      margin-left: var(--tooltip-offset);\n      --origin: translateX(-4px);\n    }\n\n    &[data-placement='bottom'] {\n      margin-top: var(--tooltip-offset);\n      --origin: translateY(-4px);\n    }\n\n    &[data-placement='left'] {\n      margin-right: var(--tooltip-offset);\n      --origin: translateX(4px);\n    }\n  }\n\n  .Tooltip-module_bui-TooltipArrow__3lFI0 {\n    & svg {\n      display: block;\n\n      /* The tooltip is rendered overlaying the main\n      tooltip 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-surface-1);\n      }\n\n      path:nth-child(2) {\n        fill: var(--bui-gray-3);\n      }\n\n      /* The arrow svg overlaps the tooltip by 2px, so we\n      need to adjust the margins accordingly. */\n      --tooltip-arrow-overlap: -2px;\n    }\n\n    &[data-placement='top'] svg {\n      margin-top: var(--tooltip-arrow-overlap);\n    }\n\n    &[data-placement='bottom'] svg {\n      margin-bottom: var(--tooltip-arrow-overlap);\n      transform: rotate(180deg);\n    }\n\n    &[data-placement='right'] svg {\n      margin-right: var(--tooltip-arrow-overlap);\n      transform: rotate(90deg);\n    }\n\n    &[data-placement='left'] svg {\n      margin-left: var(--tooltip-arrow-overlap);\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-theme='dark'] {\n    .Tooltip-module_bui-Tooltip__1xkDA {\n      background: var(--bui-bg-surface-2);\n      box-shadow: none;\n      border: 1px solid var(--bui-gray-4);\n    }\n\n    .Tooltip-module_bui-TooltipArrow__3lFI0 {\n      svg path:nth-child(1) {\n        fill: var(--bui-bg-surface-2);\n      }\n\n      svg path:nth-child(2) {\n        fill: var(--bui-gray-4);\n      }\n    }\n  }\n}\n";
+var styles = {"bui-Tooltip":"Tooltip-module_bui-Tooltip__1xkDA","bui-TooltipArrow":"Tooltip-module_bui-TooltipArrow__3lFI0"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=Tooltip.module.css.esm.js.map

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

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

package/dist/hooks/useStyles.esm.js

@@ -1,5 +1,6 @@
 import { useBreakpoint, breakpoints } from './useBreakpoint.esm.js';
 import { componentDefinitions } from '../utils/componentDefinitions.esm.js';
+import { utilityClassMap } from '../utils/utilityClassMap.esm.js';
 
 function resolveResponsiveValue(value, breakpoint) {
   if (typeof value === "string") {
@@ -22,23 +23,78 @@ function resolveResponsiveValue(value, breakpoint) {
 }
 function useStyles(componentName, props = {}) {
   const { breakpoint } = useBreakpoint();
-  const classNames = componentDefinitions[componentName].classNames;
+  const componentDefinition = componentDefinitions[componentName];
+  const classNames = componentDefinition.classNames;
+  const utilityPropNames = ("utilityProps" in componentDefinition ? componentDefinition.utilityProps : []) || [];
+  const dataAttributeNames = "dataAttributes" in componentDefinition ? Object.keys(componentDefinition.dataAttributes || {}) : [];
+  const incomingStyle = props.style || {};
   const dataAttributes = {};
-  const resolvedProps = {};
-  for (const [key, value] of Object.entries(props)) {
+  for (const key of dataAttributeNames) {
+    const value = props[key];
     if (value !== void 0 && value !== null) {
-      const resolvedValue = resolveResponsiveValue(value, breakpoint);
-      if (resolvedValue !== void 0) {
-        resolvedProps[key] = resolvedValue;
-        dataAttributes[`data-${key}`] = resolvedValue;
+      if (typeof value === "boolean" || typeof value === "number") {
+        dataAttributes[`data-${key}`] = String(value);
+      } else {
+        const resolvedValue = resolveResponsiveValue(value, breakpoint);
+        if (resolvedValue !== void 0) {
+          dataAttributes[`data-${key}`] = resolvedValue;
+        }
       }
     }
   }
+  const utilityClassList = [];
+  const generatedStyle = {};
+  const handleUtilityValue = (key, val, prefix = "") => {
+    const utilityConfig = utilityClassMap[key];
+    if (!utilityConfig) {
+      return;
+    }
+    if (utilityConfig.values.length > 0 && utilityConfig.values.includes(val)) {
+      const className = prefix ? `${prefix}${utilityConfig.class}-${val}` : `${utilityConfig.class}-${val}`;
+      utilityClassList.push(className);
+    } else if (utilityConfig.cssVar) {
+      const cssVarKey = prefix ? `${utilityConfig.cssVar}-${prefix.slice(0, -1)}` : utilityConfig.cssVar;
+      generatedStyle[cssVarKey] = val;
+      const className = prefix ? `${prefix}${utilityConfig.class}` : utilityConfig.class;
+      utilityClassList.push(className);
+    }
+  };
+  for (const key of utilityPropNames) {
+    const value = props[key];
+    if (value === void 0 || value === null) {
+      continue;
+    }
+    if (typeof value === "object" && value !== null) {
+      const breakpointValues = value;
+      for (const bp in breakpointValues) {
+        const prefix = bp === "initial" ? "" : `${bp}:`;
+        handleUtilityValue(key, breakpointValues[bp], prefix);
+      }
+    } else {
+      handleUtilityValue(key, value);
+    }
+  }
+  const utilityPropsSet = new Set(utilityPropNames);
+  const cleanedPropsBase = Object.keys(props).reduce((acc, key) => {
+    if (!utilityPropsSet.has(key)) {
+      acc[key] = props[key];
+    }
+    return acc;
+  }, {});
+  const mergedStyle = {
+    ...generatedStyle,
+    ...incomingStyle
+  };
+  const cleanedProps = {
+    ...cleanedPropsBase,
+    style: mergedStyle
+  };
   return {
     classNames,
     dataAttributes,
-    resolvedProps
-    // Also return resolved props for convenience
+    utilityClasses: utilityClassList.join(" "),
+    style: mergedStyle,
+    cleanedProps
   };
 }
 

package/dist/hooks/useStyles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useStyles.esm.js","sources":["../../src/hooks/useStyles.ts"],"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 */\nimport { useBreakpoint, breakpoints } from './useBreakpoint';\nimport { componentDefinitions } from '../utils/componentDefinitions';\nimport type { ComponentDefinitionName, ComponentClassNames } from '../types';\n\n/**\n * Resolve a responsive value based on the current breakpoint\n * @param value - The responsive value (string or object with breakpoint keys)\n * @param breakpoint - The current breakpoint\n * @returns The resolved value for the current breakpoint\n */\nfunction resolveResponsiveValue(\n  value: string | Record<string, string>,\n  breakpoint: string,\n): string | undefined {\n  if (typeof value === 'string') {\n    return value;\n  }\n\n  if (typeof value === 'object' && value !== null) {\n    const index = breakpoints.findIndex(b => b.id === breakpoint);\n\n    // Look for value at current breakpoint or smaller\n    for (let i = index; i >= 0; i--) {\n      if (value[breakpoints[i].id]) {\n        return value[breakpoints[i].id];\n      }\n    }\n\n    // If no value found, check from smallest breakpoint up\n    for (let i = 0; i < breakpoints.length; i++) {\n      if (value[breakpoints[i].id]) {\n        return value[breakpoints[i].id];\n      }\n    }\n  }\n\n  return undefined;\n}\n\n/**\n * React hook to get class names and data attributes for a component with responsive support\n * @param componentName - The name of the component\n * @param props - Object with prop values (can be responsive)\n * @returns Object with classNames and dataAttributes\n */\nexport function useStyles<T extends ComponentDefinitionName>(\n  componentName: T,\n  props: Record<string, any> = {},\n): {\n  classNames: ComponentClassNames<T>;\n  dataAttributes: Record<string, string>;\n  resolvedProps: Record<string, string>;\n} {\n  const { breakpoint } = useBreakpoint();\n  const classNames = componentDefinitions[componentName]\n    .classNames as ComponentClassNames<T>;\n\n  // Resolve responsive values and generate data attributes\n  const dataAttributes: Record<string, string> = {};\n  const resolvedProps: Record<string, string> = {};\n\n  for (const [key, value] of Object.entries(props)) {\n    if (value !== undefined && value !== null) {\n      const resolvedValue = resolveResponsiveValue(value, breakpoint);\n      if (resolvedValue !== undefined) {\n        resolvedProps[key] = resolvedValue;\n        dataAttributes[`data-${key}`] = resolvedValue;\n      }\n    }\n  }\n\n  return {\n    classNames,\n    dataAttributes,\n    resolvedProps, // Also return resolved props for convenience\n  };\n}\n"],"names":[],"mappings":";;;AAyBA,SAAS,sBAAA,CACP,OACA,UAAA,EACoB;AACpB,EAAA,IAAI,OAAO,UAAU,QAAA,EAAU;AAC7B,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,IAAI,OAAO,KAAA,KAAU,QAAA,IAAY,KAAA,KAAU,IAAA,EAAM;AAC/C,IAAA,MAAM,QAAQ,WAAA,CAAY,SAAA,CAAU,CAAA,CAAA,KAAK,CAAA,CAAE,OAAO,UAAU,CAAA;AAG5D,IAAA,KAAA,IAAS,CAAA,GAAI,KAAA,EAAO,CAAA,IAAK,CAAA,EAAG,CAAA,EAAA,EAAK;AAC/B,MAAA,IAAI,KAAA,CAAM,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAA,EAAG;AAC5B,QAAA,OAAO,KAAA,CAAM,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAA;AAAA,MAChC;AAAA,IACF;AAGA,IAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,WAAA,CAAY,QAAQ,CAAA,EAAA,EAAK;AAC3C,MAAA,IAAI,KAAA,CAAM,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAA,EAAG;AAC5B,QAAA,OAAO,KAAA,CAAM,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAA;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AAEA,EAAA,OAAO,MAAA;AACT;AAQO,SAAS,SAAA,CACd,aAAA,EACA,KAAA,GAA6B,EAAC,EAK9B;AACA,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,aAAA,EAAc;AACrC,EAAA,MAAM,UAAA,GAAa,oBAAA,CAAqB,aAAa,CAAA,CAClD,UAAA;AAGH,EAAA,MAAM,iBAAyC,EAAC;AAChD,EAAA,MAAM,gBAAwC,EAAC;AAE/C,EAAA,KAAA,MAAW,CAAC,GAAA,EAAK,KAAK,KAAK,MAAA,CAAO,OAAA,CAAQ,KAAK,CAAA,EAAG;AAChD,IAAA,IAAI,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,IAAA,EAAM;AACzC,MAAA,MAAM,aAAA,GAAgB,sBAAA,CAAuB,KAAA,EAAO,UAAU,CAAA;AAC9D,MAAA,IAAI,kBAAkB,MAAA,EAAW;AAC/B,QAAA,aAAA,CAAc,GAAG,CAAA,GAAI,aAAA;AACrB,QAAA,cAAA,CAAe,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAAA,GAAI,aAAA;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAEA,EAAA,OAAO;AAAA,IACL,UAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useStyles.esm.js","sources":["../../src/hooks/useStyles.ts"],"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 */\nimport { useBreakpoint, breakpoints } from './useBreakpoint';\nimport { componentDefinitions } from '../utils/componentDefinitions';\nimport type { ComponentDefinitionName, ComponentClassNames } from '../types';\nimport { utilityClassMap } from '../utils/utilityClassMap';\n\n/**\n * Resolve a responsive value based on the current breakpoint\n * @param value - The responsive value (string or object with breakpoint keys)\n * @param breakpoint - The current breakpoint\n * @returns The resolved value for the current breakpoint\n */\nfunction resolveResponsiveValue(\n  value: string | Record<string, string>,\n  breakpoint: string,\n): string | undefined {\n  if (typeof value === 'string') {\n    return value;\n  }\n\n  if (typeof value === 'object' && value !== null) {\n    const index = breakpoints.findIndex(b => b.id === breakpoint);\n\n    // Look for value at current breakpoint or smaller\n    for (let i = index; i >= 0; i--) {\n      if (value[breakpoints[i].id]) {\n        return value[breakpoints[i].id];\n      }\n    }\n\n    // If no value found, check from smallest breakpoint up\n    for (let i = 0; i < breakpoints.length; i++) {\n      if (value[breakpoints[i].id]) {\n        return value[breakpoints[i].id];\n      }\n    }\n  }\n\n  return undefined;\n}\n\n/**\n * React hook to get class names and data attributes for a component with responsive support\n * @param componentName - The name of the component\n * @param props - All component props\n * @returns Object with classNames, dataAttributes, utilityClasses, style, and cleanedProps\n */\nexport function useStyles<\n  T extends ComponentDefinitionName,\n  P extends Record<string, any> = Record<string, any>,\n>(\n  componentName: T,\n  props: P = {} as P,\n): {\n  classNames: ComponentClassNames<T>;\n  dataAttributes: Record<string, string>;\n  utilityClasses: string;\n  style: React.CSSProperties;\n  cleanedProps: P;\n} {\n  const { breakpoint } = useBreakpoint();\n  const componentDefinition = componentDefinitions[componentName];\n  const classNames = componentDefinition.classNames as ComponentClassNames<T>;\n  const utilityPropNames =\n    ('utilityProps' in componentDefinition\n      ? componentDefinition.utilityProps\n      : []) || [];\n\n  // Extract data attribute names from component definition\n  const dataAttributeNames =\n    'dataAttributes' in componentDefinition\n      ? Object.keys(componentDefinition.dataAttributes || {})\n      : [];\n\n  // Extract existing style from props\n  const incomingStyle = props.style || {};\n\n  // Generate data attributes from component definition\n  const dataAttributes: Record<string, string> = {};\n  for (const key of dataAttributeNames) {\n    const value = props[key];\n    if (value !== undefined && value !== null) {\n      // Handle boolean and number values directly\n      if (typeof value === 'boolean' || typeof value === 'number') {\n        dataAttributes[`data-${key}`] = String(value);\n      } else {\n        const resolvedValue = resolveResponsiveValue(value, breakpoint);\n        if (resolvedValue !== undefined) {\n          dataAttributes[`data-${key}`] = resolvedValue;\n        }\n      }\n    }\n  }\n\n  // Generate utility classes and custom styles from component's allowed utility props\n  const utilityClassList: string[] = [];\n  const generatedStyle: React.CSSProperties = {};\n\n  const handleUtilityValue = (\n    key: string,\n    val: unknown,\n    prefix: string = '',\n  ) => {\n    // Get utility class configuration for this key\n    const utilityConfig = utilityClassMap[key as keyof typeof utilityClassMap];\n\n    if (!utilityConfig) {\n      // Skip if no config found for this key\n      return;\n    }\n\n    // Check if value is in the list of valid values for this utility\n    if (\n      utilityConfig.values.length > 0 &&\n      utilityConfig.values.includes(val as string | number)\n    ) {\n      // Generate utility class with value suffix and optional breakpoint prefix\n      const className = prefix\n        ? `${prefix}${utilityConfig.class}-${val}`\n        : `${utilityConfig.class}-${val}`;\n      utilityClassList.push(className);\n    } else if (utilityConfig.cssVar) {\n      // Custom value - add CSS custom property AND utility class name\n      // Only if cssVar is defined (properties with fixed values don't have cssVar)\n      const cssVarKey = prefix\n        ? `${utilityConfig.cssVar}-${prefix.slice(0, -1)}`\n        : utilityConfig.cssVar;\n      // CSS custom properties need to be set on the style object as strings\n      (generatedStyle as Record<string, unknown>)[cssVarKey] = val;\n\n      // Add utility class name (without value suffix) with optional breakpoint prefix\n      const className = prefix\n        ? `${prefix}${utilityConfig.class}`\n        : utilityConfig.class;\n      utilityClassList.push(className);\n    }\n    // If no cssVar and value is not in valid values, skip (invalid value for fixed-value property)\n  };\n\n  for (const key of utilityPropNames) {\n    const value = props[key];\n    if (value === undefined || value === null) {\n      continue;\n    }\n\n    // Check if value is a responsive object\n    if (typeof value === 'object' && value !== null) {\n      const breakpointValues = value as { [key: string]: unknown };\n      // Handle responsive object values\n      for (const bp in breakpointValues) {\n        const prefix = bp === 'initial' ? '' : `${bp}:`;\n        handleUtilityValue(key, breakpointValues[bp], prefix);\n      }\n    } else {\n      // Handle simple value\n      handleUtilityValue(key, value);\n    }\n  }\n\n  // Create cleaned props by excluding only utility props\n  // All other props (including data attributes, style, children, etc.) remain\n  const utilityPropsSet = new Set<string>(utilityPropNames);\n\n  const cleanedPropsBase = Object.keys(props).reduce((acc, key) => {\n    if (!utilityPropsSet.has(key)) {\n      acc[key] = props[key];\n    }\n    return acc;\n  }, {} as any);\n\n  // Merge incoming style with generated styles (incoming styles take precedence)\n  const mergedStyle = {\n    ...generatedStyle,\n    ...incomingStyle,\n  };\n\n  // Add merged style to cleanedProps\n  const cleanedProps = {\n    ...cleanedPropsBase,\n    style: mergedStyle,\n  } as P;\n\n  return {\n    classNames,\n    dataAttributes,\n    utilityClasses: utilityClassList.join(' '),\n    style: mergedStyle,\n    cleanedProps,\n  };\n}\n"],"names":[],"mappings":";;;;AA0BA,SAAS,sBAAA,CACP,OACA,UAAA,EACoB;AACpB,EAAA,IAAI,OAAO,UAAU,QAAA,EAAU;AAC7B,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,IAAI,OAAO,KAAA,KAAU,QAAA,IAAY,KAAA,KAAU,IAAA,EAAM;AAC/C,IAAA,MAAM,QAAQ,WAAA,CAAY,SAAA,CAAU,CAAA,CAAA,KAAK,CAAA,CAAE,OAAO,UAAU,CAAA;AAG5D,IAAA,KAAA,IAAS,CAAA,GAAI,KAAA,EAAO,CAAA,IAAK,CAAA,EAAG,CAAA,EAAA,EAAK;AAC/B,MAAA,IAAI,KAAA,CAAM,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAA,EAAG;AAC5B,QAAA,OAAO,KAAA,CAAM,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAA;AAAA,MAChC;AAAA,IACF;AAGA,IAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,WAAA,CAAY,QAAQ,CAAA,EAAA,EAAK;AAC3C,MAAA,IAAI,KAAA,CAAM,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAA,EAAG;AAC5B,QAAA,OAAO,KAAA,CAAM,WAAA,CAAY,CAAC,CAAA,CAAE,EAAE,CAAA;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AAEA,EAAA,OAAO,MAAA;AACT;AAQO,SAAS,SAAA,CAId,aAAA,EACA,KAAA,GAAW,EAAC,EAOZ;AACA,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,aAAA,EAAc;AACrC,EAAA,MAAM,mBAAA,GAAsB,qBAAqB,aAAa,CAAA;AAC9D,EAAA,MAAM,aAAa,mBAAA,CAAoB,UAAA;AACvC,EAAA,MAAM,oBACH,cAAA,IAAkB,mBAAA,GACf,oBAAoB,YAAA,GACpB,OAAO,EAAC;AAGd,EAAA,MAAM,kBAAA,GACJ,gBAAA,IAAoB,mBAAA,GAChB,MAAA,CAAO,IAAA,CAAK,oBAAoB,cAAA,IAAkB,EAAE,CAAA,GACpD,EAAC;AAGP,EAAA,MAAM,aAAA,GAAgB,KAAA,CAAM,KAAA,IAAS,EAAC;AAGtC,EAAA,MAAM,iBAAyC,EAAC;AAChD,EAAA,KAAA,MAAW,OAAO,kBAAA,EAAoB;AACpC,IAAA,MAAM,KAAA,GAAQ,MAAM,GAAG,CAAA;AACvB,IAAA,IAAI,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,IAAA,EAAM;AAEzC,MAAA,IAAI,OAAO,KAAA,KAAU,SAAA,IAAa,OAAO,UAAU,QAAA,EAAU;AAC3D,QAAA,cAAA,CAAe,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAAA,GAAI,OAAO,KAAK,CAAA;AAAA,MAC9C,CAAA,MAAO;AACL,QAAA,MAAM,aAAA,GAAgB,sBAAA,CAAuB,KAAA,EAAO,UAAU,CAAA;AAC9D,QAAA,IAAI,kBAAkB,MAAA,EAAW;AAC/B,UAAA,cAAA,CAAe,CAAA,KAAA,EAAQ,GAAG,CAAA,CAAE,CAAA,GAAI,aAAA;AAAA,QAClC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAGA,EAAA,MAAM,mBAA6B,EAAC;AACpC,EAAA,MAAM,iBAAsC,EAAC;AAE7C,EAAA,MAAM,kBAAA,GAAqB,CACzB,GAAA,EACA,GAAA,EACA,SAAiB,EAAA,KACd;AAEH,IAAA,MAAM,aAAA,GAAgB,gBAAgB,GAAmC,CAAA;AAEzE,IAAA,IAAI,CAAC,aAAA,EAAe;AAElB,MAAA;AAAA,IACF;AAGA,IAAA,IACE,aAAA,CAAc,OAAO,MAAA,GAAS,CAAA,IAC9B,cAAc,MAAA,CAAO,QAAA,CAAS,GAAsB,CAAA,EACpD;AAEA,MAAA,MAAM,SAAA,GAAY,MAAA,GACd,CAAA,EAAG,MAAM,GAAG,aAAA,CAAc,KAAK,CAAA,CAAA,EAAI,GAAG,CAAA,CAAA,GACtC,CAAA,EAAG,aAAA,CAAc,KAAK,IAAI,GAAG,CAAA,CAAA;AACjC,MAAA,gBAAA,CAAiB,KAAK,SAAS,CAAA;AAAA,IACjC,CAAA,MAAA,IAAW,cAAc,MAAA,EAAQ;AAG/B,MAAA,MAAM,SAAA,GAAY,MAAA,GACd,CAAA,EAAG,aAAA,CAAc,MAAM,CAAA,CAAA,EAAI,MAAA,CAAO,KAAA,CAAM,CAAA,EAAG,EAAE,CAAC,CAAA,CAAA,GAC9C,aAAA,CAAc,MAAA;AAElB,MAAC,cAAA,CAA2C,SAAS,CAAA,GAAI,GAAA;AAGzD,MAAA,MAAM,SAAA,GAAY,SACd,CAAA,EAAG,MAAM,GAAG,aAAA,CAAc,KAAK,KAC/B,aAAA,CAAc,KAAA;AAClB,MAAA,gBAAA,CAAiB,KAAK,SAAS,CAAA;AAAA,IACjC;AAAA,EAEF,CAAA;AAEA,EAAA,KAAA,MAAW,OAAO,gBAAA,EAAkB;AAClC,IAAA,MAAM,KAAA,GAAQ,MAAM,GAAG,CAAA;AACvB,IAAA,IAAI,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,IAAA,EAAM;AACzC,MAAA;AAAA,IACF;AAGA,IAAA,IAAI,OAAO,KAAA,KAAU,QAAA,IAAY,KAAA,KAAU,IAAA,EAAM;AAC/C,MAAA,MAAM,gBAAA,GAAmB,KAAA;AAEzB,MAAA,KAAA,MAAW,MAAM,gBAAA,EAAkB;AACjC,QAAA,MAAM,MAAA,GAAS,EAAA,KAAO,SAAA,GAAY,EAAA,GAAK,GAAG,EAAE,CAAA,CAAA,CAAA;AAC5C,QAAA,kBAAA,CAAmB,GAAA,EAAK,gBAAA,CAAiB,EAAE,CAAA,EAAG,MAAM,CAAA;AAAA,MACtD;AAAA,IACF,CAAA,MAAO;AAEL,MAAA,kBAAA,CAAmB,KAAK,KAAK,CAAA;AAAA,IAC/B;AAAA,EACF;AAIA,EAAA,MAAM,eAAA,GAAkB,IAAI,GAAA,CAAY,gBAAgB,CAAA;AAExD,EAAA,MAAM,gBAAA,GAAmB,OAAO,IAAA,CAAK,KAAK,EAAE,MAAA,CAAO,CAAC,KAAK,GAAA,KAAQ;AAC/D,IAAA,IAAI,CAAC,eAAA,CAAgB,GAAA,CAAI,GAAG,CAAA,EAAG;AAC7B,MAAA,GAAA,CAAI,GAAG,CAAA,GAAI,KAAA,CAAM,GAAG,CAAA;AAAA,IACtB;AACA,IAAA,OAAO,GAAA;AAAA,EACT,CAAA,EAAG,EAAS,CAAA;AAGZ,EAAA,MAAM,WAAA,GAAc;AAAA,IAClB,GAAG,cAAA;AAAA,IACH,GAAG;AAAA,GACL;AAGA,EAAA,MAAM,YAAA,GAAe;AAAA,IACnB,GAAG,gBAAA;AAAA,IACH,KAAA,EAAO;AAAA,GACT;AAEA,EAAA,OAAO;AAAA,IACL,UAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA,EAAgB,gBAAA,CAAiB,IAAA,CAAK,GAAG,CAAA;AAAA,IACzC,KAAA,EAAO,WAAA;AAAA,IACP;AAAA,GACF;AACF;;;;"}