@backstage/ui 0.12.0 → 0.13.0-next.1

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ToggleButton/definition.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 */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for ToggleButton\n * @public\n */\nexport const ToggleButtonDefinition = {\n  classNames: {\n    root: 'bui-ToggleButton',\n    content: 'bui-ToggleButtonContent',\n  },\n  dataAttributes: {\n    size: ['small', 'medium'] as const,\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;AAAA,GACX;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,IAAA,EAAM,CAAC,OAAA,EAAS,QAAQ;AAAA;AAE5B;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ToggleButton/definition.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 */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { ToggleButtonOwnProps } from './types';\nimport styles from './ToggleButton.module.css';\n\n/**\n * Component definition for ToggleButton\n * @public\n */\nexport const ToggleButtonDefinition = defineComponent<ToggleButtonOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-ToggleButton',\n    content: 'bui-ToggleButtonContent',\n  },\n  propDefs: {\n    size: { dataAttribute: true, default: 'small' },\n    iconStart: {},\n    iconEnd: {},\n    children: {},\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;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,WAAW,EAAC;AAAA,IACZ,SAAS,EAAC;AAAA,IACV,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;;;;"}

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.esm.js

@@ -1,30 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { ToggleButtonGroup as ToggleButtonGroup$1 } from 'react-aria-components';
-import { useStyles } from '../../hooks/useStyles.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
 import { ToggleButtonGroupDefinition } from './definition.esm.js';
-import styles from './ToggleButtonGroup.module.css.esm.js';
 
 const ToggleButtonGroup = forwardRef(
   (props, ref) => {
-    const { classNames, dataAttributes, cleanedProps } = useStyles(
+    const { ownProps, restProps } = useDefinition(
       ToggleButtonGroupDefinition,
-      {
-        ...props
-      }
-    );
-    const { className, children, ...rest } = cleanedProps;
-    return /* @__PURE__ */ jsx(
-      ToggleButtonGroup$1,
-      {
-        className: clsx(classNames.root, styles[classNames.root], className),
-        ref,
-        ...dataAttributes,
-        ...rest,
-        children
-      }
+      props
     );
+    const { classes, children } = ownProps;
+    return /* @__PURE__ */ jsx(ToggleButtonGroup$1, { className: classes.root, ref, ...restProps, children });
   }
 );
 ToggleButtonGroup.displayName = "ToggleButtonGroup";

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleButtonGroup.esm.js","sources":["../../../src/components/ToggleButtonGroup/ToggleButtonGroup.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { ToggleButtonGroup as AriaToggleButtonGroup } from 'react-aria-components';\nimport type { ToggleButtonGroupProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ToggleButtonGroupDefinition } from './definition';\nimport styles from './ToggleButtonGroup.module.css';\n\n/** @public */\nexport const ToggleButtonGroup = forwardRef(\n  (props: ToggleButtonGroupProps, ref: Ref<HTMLDivElement>) => {\n    const { classNames, dataAttributes, cleanedProps } = useStyles(\n      ToggleButtonGroupDefinition,\n      {\n        ...props,\n      },\n    );\n\n    const { className, children, ...rest } = cleanedProps;\n\n    return (\n      <AriaToggleButtonGroup\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        ref={ref}\n        {...dataAttributes}\n        {...rest}\n      >\n        {children}\n      </AriaToggleButtonGroup>\n    );\n  },\n);\n\nToggleButtonGroup.displayName = 'ToggleButtonGroup';\n"],"names":["AriaToggleButtonGroup"],"mappings":";;;;;;;;AAyBO,MAAM,iBAAA,GAAoB,UAAA;AAAA,EAC/B,CAAC,OAA+B,GAAA,KAA6B;AAC3D,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,SAAA;AAAA,MACnD,2BAAA;AAAA,MACA;AAAA,QACE,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,MAAK,GAAI,YAAA;AAEzC,IAAA,uBACE,GAAA;AAAA,MAACA,mBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;;;;"}
+{"version":3,"file":"ToggleButtonGroup.esm.js","sources":["../../../src/components/ToggleButtonGroup/ToggleButtonGroup.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, Ref } from 'react';\nimport { ToggleButtonGroup as AriaToggleButtonGroup } from 'react-aria-components';\nimport type { ToggleButtonGroupProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { ToggleButtonGroupDefinition } from './definition';\n\n/** @public */\nexport const ToggleButtonGroup = forwardRef(\n  (props: ToggleButtonGroupProps, ref: Ref<HTMLDivElement>) => {\n    const { ownProps, restProps } = useDefinition(\n      ToggleButtonGroupDefinition,\n      props,\n    );\n    const { classes, children } = ownProps;\n\n    return (\n      <AriaToggleButtonGroup className={classes.root} ref={ref} {...restProps}>\n        {children}\n      </AriaToggleButtonGroup>\n    );\n  },\n);\n\nToggleButtonGroup.displayName = 'ToggleButtonGroup';\n"],"names":["AriaToggleButtonGroup"],"mappings":";;;;;;AAuBO,MAAM,iBAAA,GAAoB,UAAA;AAAA,EAC/B,CAAC,OAA+B,GAAA,KAA6B;AAC3D,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA;AAAA,MAC9B,2BAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAS,GAAI,QAAA;AAE9B,IAAA,uBACE,GAAA,CAACA,uBAAsB,SAAA,EAAW,OAAA,CAAQ,MAAM,GAAA,EAAW,GAAG,WAC3D,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEA,iBAAA,CAAkB,WAAA,GAAc,mBAAA;;;;"}

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

@@ -1,11 +1,21 @@
-const ToggleButtonGroupDefinition = {
+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 './ToggleButtonGroup.module.css.esm.js';
+
+const ToggleButtonGroupDefinition = defineComponent()({
+  styles,
   classNames: {
     root: "bui-ToggleButtonGroup"
   },
-  dataAttributes: {
-    orientation: ["horizontal", "vertical"]
+  propDefs: {
+    className: {},
+    children: {}
   }
-};
+});
 
 export { ToggleButtonGroupDefinition };
 //# sourceMappingURL=definition.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ToggleButtonGroup/definition.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 */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for ToggleButtonGroup\n * @public\n */\nexport const ToggleButtonGroupDefinition = {\n  classNames: {\n    root: 'bui-ToggleButtonGroup',\n  },\n  dataAttributes: {\n    orientation: ['horizontal', 'vertical'] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,2BAAA,GAA8B;AAAA,EACzC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,WAAA,EAAa,CAAC,YAAA,EAAc,UAAU;AAAA;AAE1C;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ToggleButtonGroup/definition.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 */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { ToggleButtonGroupOwnProps } from './types';\nimport styles from './ToggleButtonGroup.module.css';\n\n/**\n * Component definition for ToggleButtonGroup\n * @public\n */\nexport const ToggleButtonGroupDefinition =\n  defineComponent<ToggleButtonGroupOwnProps>()({\n    styles,\n    classNames: {\n      root: 'bui-ToggleButtonGroup',\n    },\n    propDefs: {\n      className: {},\n      children: {},\n    },\n  });\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,2BAAA,GACX,iBAA2C,CAAE;AAAA,EAC3C,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW,EAAC;AAAA,IACZ,UAAU;AAAC;AAEf,CAAC;;;;"}

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

@@ -1,10 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { useId } from 'react-aria';
 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 { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
 import { TooltipDefinition } from './definition.esm.js';
-import styles from './Tooltip.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 TooltipTrigger = (props) => {
   const { delay = 600 } = props;
@@ -12,33 +14,25 @@ const TooltipTrigger = (props) => {
 };
 const Tooltip = forwardRef(
   (props, ref) => {
-    const { classNames, cleanedProps } = useStyles(TooltipDefinition, props);
-    const { className, children, ...rest } = cleanedProps;
-    return /* @__PURE__ */ jsxs(
-      Tooltip$1,
-      {
-        className: clsx(
-          classNames.tooltip,
-          styles[classNames.tooltip],
-          className
-        ),
-        ...rest,
-        ref,
-        children: [
-          /* @__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
-        ]
-      }
-    );
+    const { ownProps, restProps } = useDefinition(TooltipDefinition, props);
+    const { classes, children } = ownProps;
+    const svgPathId = useId();
+    return /* @__PURE__ */ jsxs(Tooltip$1, { className: classes.tooltip, ...restProps, ref, children: [
+      /* @__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 }) })
+    ] });
   }
 );
 Tooltip.displayName = "Tooltip";

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';\nimport { TooltipDefinition } from './definition';\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(TooltipDefinition, 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":";;;;;;;;AA8BO,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,mBAAmB,KAAK,CAAA;AACvE,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;;;;"}
+{"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 { useId } from 'react-aria';\nimport {\n  OverlayArrow,\n  Tooltip as AriaTooltip,\n  TooltipTrigger as AriaTooltipTrigger,\n  TooltipTriggerComponentProps,\n} from 'react-aria-components';\nimport type { TooltipProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { TooltipDefinition } from './definition';\nimport { Box } from '../Box';\nimport { BgReset } from '../../hooks/useBg';\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 { ownProps, restProps } = useDefinition(TooltipDefinition, props);\n    const { classes, children } = ownProps;\n    const svgPathId = useId();\n\n    return (\n      <AriaTooltip className={classes.tooltip} {...restProps} ref={ref}>\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        <BgReset>\n          <Box bg=\"neutral\" className={classes.content}>\n            {children}\n          </Box>\n        </BgReset>\n      </AriaTooltip>\n    );\n  },\n);\n\nTooltip.displayName = 'Tooltip';\n"],"names":["AriaTooltipTrigger","AriaTooltip"],"mappings":";;;;;;;;;;AA+BO,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,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,mBAAmB,KAAK,CAAA;AACtE,IAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAS,GAAI,QAAA;AAC9B,IAAA,MAAM,YAAY,KAAA,EAAM;AAExB,IAAA,4BACGC,SAAA,EAAA,EAAY,SAAA,EAAW,QAAQ,OAAA,EAAU,GAAG,WAAW,GAAA,EACtD,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAW,OAAA,CAAQ,KAAA,EAC/B,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,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,sBACA,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;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA;;;;"}

package/dist/components/Tooltip/Tooltip.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  .Tooltip_bui-Tooltip__fd7a4c2f9a {\n    box-shadow: var(--bui-shadow);\n    border-radius: 4px;\n    background: var(--bui-bg-popover);\n    border: 1px solid var(--bui-border-1);\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_bui-TooltipArrow__fd7a4c2f9a {\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-popover);\n      }\n\n      path:nth-child(2) {\n        fill: var(--bui-border-1);\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";
-var styles = {"bui-Tooltip":"Tooltip_bui-Tooltip__fd7a4c2f9a","bui-TooltipArrow":"Tooltip_bui-TooltipArrow__fd7a4c2f9a"};
+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  .Tooltip_bui-Tooltip__9a58b614bf {\n    --tooltip-border-radius: 4px;\n    box-shadow: var(--bui-shadow);\n    border-radius: var(--tooltip-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-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_bui-TooltipContent__9a58b614bf {\n    padding: var(--bui-space-2) var(--bui-space-3);\n    border-radius: var(--tooltip-border-radius);\n  }\n\n  .Tooltip_bui-TooltipArrow__9a58b614bf {\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      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 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";
+var styles = {"bui-Tooltip":"Tooltip_bui-Tooltip__9a58b614bf","bui-TooltipContent":"Tooltip_bui-TooltipContent__9a58b614bf","bui-TooltipArrow":"Tooltip_bui-TooltipArrow__9a58b614bf"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -1,9 +1,23 @@
-const TooltipDefinition = {
+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 './Tooltip.module.css.esm.js';
+
+const TooltipDefinition = defineComponent()({
+  styles,
   classNames: {
     tooltip: "bui-Tooltip",
+    content: "bui-TooltipContent",
     arrow: "bui-TooltipArrow"
+  },
+  propDefs: {
+    children: {},
+    className: {}
   }
-};
+});
 
 export { TooltipDefinition };
 //# sourceMappingURL=definition.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Tooltip/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 Tooltip\n * @public\n */\nexport const TooltipDefinition = {\n  classNames: {\n    tooltip: 'bui-Tooltip',\n    arrow: 'bui-TooltipArrow',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,iBAAA,GAAoB;AAAA,EAC/B,UAAA,EAAY;AAAA,IACV,OAAA,EAAS,aAAA;AAAA,IACT,KAAA,EAAO;AAAA;AAEX;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Tooltip/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 { TooltipOwnProps } from './types';\nimport styles from './Tooltip.module.css';\n\n/**\n * Component definition for Tooltip\n * @public\n */\nexport const TooltipDefinition = defineComponent<TooltipOwnProps>()({\n  styles,\n  classNames: {\n    tooltip: 'bui-Tooltip',\n    content: 'bui-TooltipContent',\n    arrow: 'bui-TooltipArrow',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,iBAAA,GAAoB,iBAAiC,CAAE;AAAA,EAClE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,OAAA,EAAS,aAAA;AAAA,IACT,OAAA,EAAS,oBAAA;AAAA,IACT,KAAA,EAAO;AAAA,GACT;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;;;;"}

package/dist/components/VisuallyHidden/VisuallyHidden.esm.js

@@ -1,22 +1,14 @@
 import { jsx } from 'react/jsx-runtime';
-import { useStyles } from '../../hooks/useStyles.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
 import { VisuallyHiddenDefinition } from './definition.esm.js';
-import styles from './VisuallyHidden.module.css.esm.js';
-import clsx from 'clsx';
 
 const VisuallyHidden = (props) => {
-  const { classNames, cleanedProps } = useStyles(
+  const { ownProps, restProps } = useDefinition(
     VisuallyHiddenDefinition,
     props
   );
-  const { className, ...rest } = cleanedProps;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: clsx(classNames.root, styles[classNames.root], className),
-      ...rest
-    }
-  );
+  const { classes } = ownProps;
+  return /* @__PURE__ */ jsx("div", { className: classes.root, ...restProps });
 };
 
 export { VisuallyHidden };

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

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.esm.js","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.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 { useStyles } from '../../hooks/useStyles';\nimport { VisuallyHiddenDefinition } from './definition';\nimport { VisuallyHiddenProps } from './types';\nimport styles from './VisuallyHidden.module.css';\nimport clsx from 'clsx';\n\n/**\n * Visually hides content while keeping it accessible to screen readers.\n * Useful for descriptive labels and other screen-reader-only content.\n *\n * Note: This component is for content that should ALWAYS remain visually hidden.\n * For skip links that become visible on focus, use a different approach.\n *\n * @public\n */\nexport const VisuallyHidden = (props: VisuallyHiddenProps) => {\n  const { classNames, cleanedProps } = useStyles(\n    VisuallyHiddenDefinition,\n    props,\n  );\n  const { className, ...rest } = cleanedProps;\n\n  return (\n    <div\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...rest}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AA+BO,MAAM,cAAA,GAAiB,CAAC,KAAA,KAA+B;AAC5D,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA;AAAA,IACnC,wBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG;AAAA;AAAA,GACN;AAEJ;;;;"}
+{"version":3,"file":"VisuallyHidden.esm.js","sources":["../../../src/components/VisuallyHidden/VisuallyHidden.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 { useDefinition } from '../../hooks/useDefinition';\nimport { VisuallyHiddenDefinition } from './definition';\nimport { VisuallyHiddenProps } from './types';\n\n/**\n * Visually hides content while keeping it accessible to screen readers.\n * Useful for descriptive labels and other screen-reader-only content.\n *\n * Note: This component is for content that should ALWAYS remain visually hidden.\n * For skip links that become visible on focus, use a different approach.\n *\n * @public\n */\nexport const VisuallyHidden = (props: VisuallyHiddenProps) => {\n  const { ownProps, restProps } = useDefinition(\n    VisuallyHiddenDefinition,\n    props,\n  );\n  const { classes } = ownProps;\n\n  return <div className={classes.root} {...restProps} />;\n};\n"],"names":[],"mappings":";;;;AA6BO,MAAM,cAAA,GAAiB,CAAC,KAAA,KAA+B;AAC5D,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA;AAAA,IAC9B,wBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,SAAQ,GAAI,QAAA;AAEpB,EAAA,2BAAQ,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,IAAA,EAAO,GAAG,SAAA,EAAW,CAAA;AACtD;;;;"}

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

@@ -1,8 +1,20 @@
-const VisuallyHiddenDefinition = {
+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 './VisuallyHidden.module.css.esm.js';
+
+const VisuallyHiddenDefinition = defineComponent()({
+  styles,
   classNames: {
     root: "bui-VisuallyHidden"
+  },
+  propDefs: {
+    className: {}
   }
-};
+});
 
 export { VisuallyHiddenDefinition };
 //# sourceMappingURL=definition.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/VisuallyHidden/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 VisuallyHidden\n * @public\n */\nexport const VisuallyHiddenDefinition = {\n  classNames: {\n    root: 'bui-VisuallyHidden',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,wBAAA,GAA2B;AAAA,EACtC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA;AAEV;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/VisuallyHidden/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 { VisuallyHiddenOwnProps } from './types';\nimport styles from './VisuallyHidden.module.css';\n\n/**\n * Component definition for VisuallyHidden\n * @public\n */\nexport const VisuallyHiddenDefinition =\n  defineComponent<VisuallyHiddenOwnProps>()({\n    styles,\n    classNames: {\n      root: 'bui-VisuallyHidden',\n    },\n    propDefs: {\n      className: {},\n    },\n  });\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,wBAAA,GACX,iBAAwC,CAAE;AAAA,EACxC,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW;AAAC;AAEhB,CAAC;;;;"}

package/dist/css/styles.css

@@ -96,11 +96,10 @@
 
     /* Neutral background colors */
     --bui-bg-app: #f8f8f8;
-    --bui-bg-popover: #ffffff;
 
     --bui-bg-neutral-1: #fff;
-    --bui-bg-neutral-1-hover: oklch(0% 0 0 / 12%);
-    --bui-bg-neutral-1-pressed: oklch(0% 0 0 / 16%);
+    --bui-bg-neutral-1-hover: oklch(0% 0 0 / 6%);
+    --bui-bg-neutral-1-pressed: oklch(0% 0 0 / 12%);
     --bui-bg-neutral-1-disabled: oklch(0% 0 0 / 6%);
 
     --bui-bg-neutral-2: oklch(0% 0 0 / 6%);
@@ -171,7 +170,6 @@
 
     /* Neutral background colors */
     --bui-bg-app: #333333;
-    --bui-bg-popover: #1a1a1a;
 
     --bui-bg-neutral-1: oklch(100% 0 0 / 10%);
     --bui-bg-neutral-1-hover: oklch(100% 0 0 / 14%);

package/dist/hooks/useBg.esm.js

@@ -15,6 +15,15 @@ function incrementNeutralBg(bg) {
 const BgProvider = ({ bg, children }) => {
   return /* @__PURE__ */ jsx(BgContext.Provider, { value: createVersionedValueMap({ 1: { bg } }), children });
 };
+const BgReset = ({ children }) => {
+  return /* @__PURE__ */ jsx(
+    BgContext.Provider,
+    {
+      value: createVersionedValueMap({ 1: { bg: void 0 } }),
+      children
+    }
+  );
+};
 function useBgConsumer() {
   const value = useContext(BgContext)?.atVersion(1);
   return value ?? { bg: void 0 };
@@ -26,11 +35,11 @@ function useBgProvider(bg) {
     return { bg: void 0 };
   }
   const resolved = resolveResponsiveValue(bg, breakpoint);
-  if (resolved === "neutral-auto") {
+  if (resolved === "neutral") {
     return { bg: incrementNeutralBg(context.bg) };
   }
   return { bg: resolved };
 }
 
-export { BgProvider, useBgConsumer, useBgProvider };
+export { BgProvider, BgReset, useBgConsumer, useBgProvider };
 //# sourceMappingURL=useBg.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useBg.esm.js","sources":["../../src/hooks/useBg.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 { useContext, ReactNode } from 'react';\nimport {\n  createVersionedContext,\n  createVersionedValueMap,\n} from '@backstage/version-bridge';\nimport { ContainerBg, ProviderBg, Responsive } from '../types';\nimport { useBreakpoint } from './useBreakpoint';\nimport { resolveResponsiveValue } from './useDefinition/helpers';\n\n/** @public */\nexport interface BgContextValue {\n  bg: ContainerBg | undefined;\n}\n\n/** @public */\nexport interface BgProviderProps {\n  bg: ContainerBg;\n  children: ReactNode;\n}\n\nconst BgContext = createVersionedContext<{\n  1: BgContextValue;\n}>('bg-context');\n\n/**\n * Increments a neutral bg level by one, capping at 'neutral-3'.\n * Intent backgrounds (danger, warning, success) pass through unchanged.\n *\n * The 'neutral-4' level is reserved for consumer component CSS and is\n * never set on providers.\n *\n * @internal\n */\nfunction incrementNeutralBg(bg: ContainerBg | undefined): ContainerBg {\n  if (!bg) return 'neutral-1';\n  if (bg === 'neutral-1') return 'neutral-2';\n  if (bg === 'neutral-2') return 'neutral-3';\n  if (bg === 'neutral-3') return 'neutral-3'; // capped at neutral-3\n  // Intent values pass through unchanged\n  return bg;\n}\n\n/**\n * Provider component that establishes the bg context for child components.\n *\n * @public\n */\nexport const BgProvider = ({ bg, children }: BgProviderProps) => {\n  return (\n    <BgContext.Provider value={createVersionedValueMap({ 1: { bg } })}>\n      {children}\n    </BgContext.Provider>\n  );\n};\n\n/**\n * Hook for consumer components (e.g. Button) to read the parent bg context.\n *\n * Returns the parent container's bg unchanged. The consumer component's CSS\n * handles the visual step-up (e.g. on a neutral-1 surface, the consumer\n * uses neutral-2 tokens via `data-on-bg`).\n *\n * @public\n */\nexport function useBgConsumer(): BgContextValue {\n  const value = useContext(BgContext)?.atVersion(1);\n  return value ?? { bg: undefined };\n}\n\n/**\n * Hook for provider components (e.g. Box, Card) to resolve and provide bg context.\n *\n * **Resolution rules:**\n *\n * - `bg` is `undefined` -- transparent, no context change, returns `{ bg: undefined }`.\n *   This is the default for Box, Flex, and Grid (they do **not** auto-increment).\n * - `bg` is a `ContainerBg` value -- uses that value directly (e.g. `'neutral-1'`).\n * - `bg` is `'neutral-auto'` -- increments the neutral level from the parent context,\n *   capping at `neutral-3`. Only components that explicitly pass `'neutral-auto'`\n *   (e.g. Card) will auto-increment; it is never implicit.\n *\n * **Capping:**\n *\n * Provider components cap at `neutral-3`. The `neutral-4` level is **not** a valid\n * prop value -- it exists only in consumer component CSS (e.g. a Button on a\n * `neutral-3` surface renders with `neutral-4` tokens via `data-on-bg`).\n *\n * The caller is responsible for wrapping children with `BgProvider` when the\n * resolved bg is defined.\n *\n * @public\n */\nexport function useBgProvider(bg?: Responsive<ProviderBg>): BgContextValue {\n  const { breakpoint } = useBreakpoint();\n  const context = useBgConsumer();\n\n  if (bg === undefined) {\n    return { bg: undefined };\n  }\n\n  const resolved = resolveResponsiveValue(bg, breakpoint);\n\n  if (resolved === 'neutral-auto') {\n    return { bg: incrementNeutralBg(context.bg) };\n  }\n\n  return { bg: resolved };\n}\n"],"names":[],"mappings":";;;;;;AAoCA,MAAM,SAAA,GAAY,uBAEf,YAAY,CAAA;AAWf,SAAS,mBAAmB,EAAA,EAA0C;AACpE,EAAA,IAAI,CAAC,IAAI,OAAO,WAAA;AAChB,EAAA,IAAI,EAAA,KAAO,aAAa,OAAO,WAAA;AAC/B,EAAA,IAAI,EAAA,KAAO,aAAa,OAAO,WAAA;AAC/B,EAAA,IAAI,EAAA,KAAO,aAAa,OAAO,WAAA;AAE/B,EAAA,OAAO,EAAA;AACT;AAOO,MAAM,UAAA,GAAa,CAAC,EAAE,EAAA,EAAI,UAAS,KAAuB;AAC/D,EAAA,uBACE,GAAA,CAAC,SAAA,CAAU,QAAA,EAAV,EAAmB,KAAA,EAAO,uBAAA,CAAwB,EAAE,CAAA,EAAG,EAAE,EAAA,EAAG,EAAG,GAC7D,QAAA,EACH,CAAA;AAEJ;AAWO,SAAS,aAAA,GAAgC;AAC9C,EAAA,MAAM,KAAA,GAAQ,UAAA,CAAW,SAAS,CAAA,EAAG,UAAU,CAAC,CAAA;AAChD,EAAA,OAAO,KAAA,IAAS,EAAE,EAAA,EAAI,MAAA,EAAU;AAClC;AAyBO,SAAS,cAAc,EAAA,EAA6C;AACzE,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,aAAA,EAAc;AACrC,EAAA,MAAM,UAAU,aAAA,EAAc;AAE9B,EAAA,IAAI,OAAO,MAAA,EAAW;AACpB,IAAA,OAAO,EAAE,IAAI,MAAA,EAAU;AAAA,EACzB;AAEA,EAAA,MAAM,QAAA,GAAW,sBAAA,CAAuB,EAAA,EAAI,UAAU,CAAA;AAEtD,EAAA,IAAI,aAAa,cAAA,EAAgB;AAC/B,IAAA,OAAO,EAAE,EAAA,EAAI,kBAAA,CAAmB,OAAA,CAAQ,EAAE,CAAA,EAAE;AAAA,EAC9C;AAEA,EAAA,OAAO,EAAE,IAAI,QAAA,EAAS;AACxB;;;;"}
+{"version":3,"file":"useBg.esm.js","sources":["../../src/hooks/useBg.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 { useContext, ReactNode } from 'react';\nimport {\n  createVersionedContext,\n  createVersionedValueMap,\n} from '@backstage/version-bridge';\nimport { ContainerBg, ProviderBg, Responsive } from '../types';\nimport { useBreakpoint } from './useBreakpoint';\nimport { resolveResponsiveValue } from './useDefinition/helpers';\n\n/** @public */\nexport interface BgContextValue {\n  bg: ContainerBg | undefined;\n}\n\n/** @public */\nexport interface BgProviderProps {\n  bg: ContainerBg;\n  children: ReactNode;\n}\n\nconst BgContext = createVersionedContext<{\n  1: BgContextValue;\n}>('bg-context');\n\n/**\n * Increments a neutral bg level by one, capping at 'neutral-3'.\n * Intent backgrounds (danger, warning, success) pass through unchanged.\n *\n * The 'neutral-4' level is reserved for consumer component CSS and is\n * never set on providers.\n *\n * @internal\n */\nfunction incrementNeutralBg(bg: ContainerBg | undefined): ContainerBg {\n  if (!bg) return 'neutral-1';\n  if (bg === 'neutral-1') return 'neutral-2';\n  if (bg === 'neutral-2') return 'neutral-3';\n  if (bg === 'neutral-3') return 'neutral-3'; // capped at neutral-3\n  // Intent values pass through unchanged\n  return bg;\n}\n\n/**\n * Provider component that establishes the bg context for child components.\n *\n * @public\n */\nexport const BgProvider = ({ bg, children }: BgProviderProps) => {\n  return (\n    <BgContext.Provider value={createVersionedValueMap({ 1: { bg } })}>\n      {children}\n    </BgContext.Provider>\n  );\n};\n\n/**\n * Resets the bg context to undefined, cutting any inherited neutral chain.\n * Use this inside overlay components (Popover, Tooltip, Dialog, Menu) so\n * their content always starts from neutral-1 regardless of where the trigger\n * is placed in the tree.\n *\n * @internal\n */\nexport const BgReset = ({ children }: { children: ReactNode }) => {\n  return (\n    <BgContext.Provider\n      value={createVersionedValueMap({ 1: { bg: undefined } })}\n    >\n      {children}\n    </BgContext.Provider>\n  );\n};\n\n/**\n * Hook for consumer components (e.g. Button) to read the parent bg context.\n *\n * Returns the parent container's bg unchanged. The consumer component's CSS\n * handles the visual step-up (e.g. on a neutral-1 surface, the consumer\n * uses neutral-2 tokens via `data-on-bg`).\n *\n * @public\n */\nexport function useBgConsumer(): BgContextValue {\n  const value = useContext(BgContext)?.atVersion(1);\n  return value ?? { bg: undefined };\n}\n\n/**\n * Hook for provider components (e.g. Box, Card) to resolve and provide bg context.\n *\n * **Resolution rules:**\n *\n * - `bg` is `undefined` -- transparent, no context change, returns `{ bg: undefined }`.\n *   This is the default for Box, Flex, and Grid (they do **not** auto-increment).\n * - `bg` is `'neutral'` -- when the parent bg is neutral, increments the neutral\n *   level from the parent context, capping at `neutral-3`. When the parent bg is\n *   an intent (`'danger'` | `'warning'` | `'success'`), the intent passes through\n *   unchanged (i.e. `bg: 'neutral'` does not override the parent intent). The\n *   increment is always relative to the parent; it is not possible to pin a\n *   container to an explicit neutral level.\n * - `bg` is `'danger'` | `'warning'` | `'success'` -- sets the bg to that intent\n *   explicitly, regardless of the parent value.\n *\n * **Capping:**\n *\n * Provider components cap at `neutral-3`. The `neutral-4` level is **not** a valid\n * prop value -- it exists only in consumer component CSS (e.g. a Button on a\n * `neutral-3` surface renders with `neutral-4` tokens via `data-on-bg`).\n *\n * The caller is responsible for wrapping children with `BgProvider` when the\n * resolved bg is defined.\n *\n * @public\n */\nexport function useBgProvider(bg?: Responsive<ProviderBg>): BgContextValue {\n  const { breakpoint } = useBreakpoint();\n  const context = useBgConsumer();\n\n  if (bg === undefined) {\n    return { bg: undefined };\n  }\n\n  const resolved = resolveResponsiveValue(bg, breakpoint);\n\n  if (resolved === 'neutral') {\n    return { bg: incrementNeutralBg(context.bg) };\n  }\n\n  return { bg: resolved };\n}\n"],"names":[],"mappings":";;;;;;AAoCA,MAAM,SAAA,GAAY,uBAEf,YAAY,CAAA;AAWf,SAAS,mBAAmB,EAAA,EAA0C;AACpE,EAAA,IAAI,CAAC,IAAI,OAAO,WAAA;AAChB,EAAA,IAAI,EAAA,KAAO,aAAa,OAAO,WAAA;AAC/B,EAAA,IAAI,EAAA,KAAO,aAAa,OAAO,WAAA;AAC/B,EAAA,IAAI,EAAA,KAAO,aAAa,OAAO,WAAA;AAE/B,EAAA,OAAO,EAAA;AACT;AAOO,MAAM,UAAA,GAAa,CAAC,EAAE,EAAA,EAAI,UAAS,KAAuB;AAC/D,EAAA,uBACE,GAAA,CAAC,SAAA,CAAU,QAAA,EAAV,EAAmB,KAAA,EAAO,uBAAA,CAAwB,EAAE,CAAA,EAAG,EAAE,EAAA,EAAG,EAAG,GAC7D,QAAA,EACH,CAAA;AAEJ;AAUO,MAAM,OAAA,GAAU,CAAC,EAAE,QAAA,EAAS,KAA+B;AAChE,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA,CAAU,QAAA;AAAA,IAAV;AAAA,MACC,KAAA,EAAO,wBAAwB,EAAE,CAAA,EAAG,EAAE,EAAA,EAAI,MAAA,IAAa,CAAA;AAAA,MAEtD;AAAA;AAAA,GACH;AAEJ;AAWO,SAAS,aAAA,GAAgC;AAC9C,EAAA,MAAM,KAAA,GAAQ,UAAA,CAAW,SAAS,CAAA,EAAG,UAAU,CAAC,CAAA;AAChD,EAAA,OAAO,KAAA,IAAS,EAAE,EAAA,EAAI,MAAA,EAAU;AAClC;AA6BO,SAAS,cAAc,EAAA,EAA6C;AACzE,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,aAAA,EAAc;AACrC,EAAA,MAAM,UAAU,aAAA,EAAc;AAE9B,EAAA,IAAI,OAAO,MAAA,EAAW;AACpB,IAAA,OAAO,EAAE,IAAI,MAAA,EAAU;AAAA,EACzB;AAEA,EAAA,MAAM,QAAA,GAAW,sBAAA,CAAuB,EAAA,EAAI,UAAU,CAAA;AAEtD,EAAA,IAAI,aAAa,SAAA,EAAW;AAC1B,IAAA,OAAO,EAAE,EAAA,EAAI,kBAAA,CAAmB,OAAA,CAAQ,EAAE,CAAA,EAAE;AAAA,EAC9C;AAEA,EAAA,OAAO,EAAE,IAAI,QAAA,EAAS;AACxB;;;;"}

package/dist/hooks/useBreakpoint.esm.js

@@ -1,4 +1,5 @@
-import { useMediaQuery } from './useMediaQuery.esm.js';
+import { useMemo } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
 const breakpoints = [
   { name: "Initial", id: "initial", value: 0 },
@@ -8,35 +9,74 @@ const breakpoints = [
   { name: "Large", id: "lg", value: 1280 },
   { name: "Extra Large", id: "xl", value: 1536 }
 ];
-const useBreakpoint = () => {
-  const matches = breakpoints.map((breakpoint2) => {
-    return useMediaQuery(`(min-width: ${breakpoint2.value}px)`);
-  });
-  const upMatches = new Map(
-    breakpoints.map((bp) => [bp.id, useMediaQuery(`(min-width: ${bp.value}px)`)])
-  );
-  const downMatches = new Map(
-    breakpoints.map((bp) => [
-      bp.id,
-      useMediaQuery(`(max-width: ${bp.value - 1}px)`)
-    ])
-  );
-  let breakpoint = breakpoints[0].id;
-  for (let i = matches.length - 1; i >= 0; i--) {
-    if (matches[i]) {
-      breakpoint = breakpoints[i].id;
-      break;
-    }
+const breakpointIndex = new Map(
+  breakpoints.map((bp, i) => [bp.id, i])
+);
+function bpIndex(key) {
+  return breakpointIndex.get(key) ?? 0;
+}
+const IS_SERVER = typeof window === "undefined" || typeof window.matchMedia === "undefined";
+function computeBreakpoint() {
+  if (IS_SERVER) {
+    return "initial";
   }
-  return {
-    breakpoint,
-    up: (key) => {
-      return upMatches.get(key) ?? false;
-    },
-    down: (key) => {
-      return downMatches.get(key) ?? false;
+  for (let i = breakpoints.length - 1; i >= 0; i--) {
+    if (window.matchMedia(`(min-width: ${breakpoints[i].value}px)`).matches) {
+      return breakpoints[i].id;
     }
+  }
+  return "initial";
+}
+let current;
+const listeners = /* @__PURE__ */ new Set();
+let initialized = false;
+function ensureInitialized() {
+  if (initialized || IS_SERVER) {
+    return;
+  }
+  initialized = true;
+  current = computeBreakpoint();
+  for (const bp of breakpoints) {
+    const mql = window.matchMedia(`(min-width: ${bp.value}px)`);
+    mql.addEventListener("change", () => {
+      const next = computeBreakpoint();
+      if (next !== current) {
+        current = next;
+        for (const cb of listeners) {
+          cb();
+        }
+      }
+    });
+  }
+}
+function subscribe(callback) {
+  ensureInitialized();
+  listeners.add(callback);
+  return () => {
+    listeners.delete(callback);
   };
+}
+function getSnapshot() {
+  ensureInitialized();
+  return current ?? "initial";
+}
+function getServerSnapshot() {
+  return "initial";
+}
+const useBreakpoint = () => {
+  const breakpoint = useSyncExternalStore(
+    subscribe,
+    getSnapshot,
+    getServerSnapshot
+  );
+  return useMemo(
+    () => ({
+      breakpoint,
+      up: (key) => bpIndex(breakpoint) >= bpIndex(key),
+      down: (key) => bpIndex(breakpoint) < bpIndex(key)
+    }),
+    [breakpoint]
+  );
 };
 
 export { breakpoints, useBreakpoint };

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

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.esm.js","sources":["../../src/hooks/useBreakpoint.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 { useMediaQuery } from './useMediaQuery';\nimport type { Breakpoint } from '../types';\n\nexport const breakpoints: { name: string; id: Breakpoint; value: number }[] = [\n  { name: 'Initial', id: 'initial', value: 0 },\n  { name: 'Extra Small', id: 'xs', value: 640 },\n  { name: 'Small', id: 'sm', value: 768 },\n  { name: 'Medium', id: 'md', value: 1024 },\n  { name: 'Large', id: 'lg', value: 1280 },\n  { name: 'Extra Large', id: 'xl', value: 1536 },\n];\n\n/** @public */\nexport const useBreakpoint = () => {\n  // Call all media queries at the top level\n  const matches = breakpoints.map(breakpoint => {\n    return useMediaQuery(`(min-width: ${breakpoint.value}px)`);\n  });\n\n  // Pre-calculate all the up/down values we need\n  const upMatches = new Map(\n    breakpoints.map(bp => [bp.id, useMediaQuery(`(min-width: ${bp.value}px)`)]),\n  );\n\n  const downMatches = new Map(\n    breakpoints.map(bp => [\n      bp.id,\n      useMediaQuery(`(max-width: ${bp.value - 1}px)`),\n    ]),\n  );\n\n  let breakpoint: Breakpoint = breakpoints[0].id;\n  for (let i = matches.length - 1; i >= 0; i--) {\n    if (matches[i]) {\n      breakpoint = breakpoints[i].id;\n      break;\n    }\n  }\n\n  return {\n    breakpoint,\n    up: (key: Breakpoint): boolean => {\n      return upMatches.get(key) ?? false;\n    },\n    down: (key: Breakpoint): boolean => {\n      return downMatches.get(key) ?? false;\n    },\n  };\n};\n"],"names":["breakpoint"],"mappings":";;AAkBO,MAAM,WAAA,GAAiE;AAAA,EAC5E,EAAE,IAAA,EAAM,SAAA,EAAW,EAAA,EAAI,SAAA,EAAW,OAAO,CAAA,EAAE;AAAA,EAC3C,EAAE,IAAA,EAAM,aAAA,EAAe,EAAA,EAAI,IAAA,EAAM,OAAO,GAAA,EAAI;AAAA,EAC5C,EAAE,IAAA,EAAM,OAAA,EAAS,EAAA,EAAI,IAAA,EAAM,OAAO,GAAA,EAAI;AAAA,EACtC,EAAE,IAAA,EAAM,QAAA,EAAU,EAAA,EAAI,IAAA,EAAM,OAAO,IAAA,EAAK;AAAA,EACxC,EAAE,IAAA,EAAM,OAAA,EAAS,EAAA,EAAI,IAAA,EAAM,OAAO,IAAA,EAAK;AAAA,EACvC,EAAE,IAAA,EAAM,aAAA,EAAe,EAAA,EAAI,IAAA,EAAM,OAAO,IAAA;AAC1C;AAGO,MAAM,gBAAgB,MAAM;AAEjC,EAAA,MAAM,OAAA,GAAU,WAAA,CAAY,GAAA,CAAI,CAAAA,WAAAA,KAAc;AAC5C,IAAA,OAAO,aAAA,CAAc,CAAA,YAAA,EAAeA,WAAAA,CAAW,KAAK,CAAA,GAAA,CAAK,CAAA;AAAA,EAC3D,CAAC,CAAA;AAGD,EAAA,MAAM,YAAY,IAAI,GAAA;AAAA,IACpB,WAAA,CAAY,GAAA,CAAI,CAAA,EAAA,KAAM,CAAC,EAAA,CAAG,EAAA,EAAI,aAAA,CAAc,CAAA,YAAA,EAAe,EAAA,CAAG,KAAK,CAAA,GAAA,CAAK,CAAC,CAAC;AAAA,GAC5E;AAEA,EAAA,MAAM,cAAc,IAAI,GAAA;AAAA,IACtB,WAAA,CAAY,IAAI,CAAA,EAAA,KAAM;AAAA,MACpB,EAAA,CAAG,EAAA;AAAA,MACH,aAAA,CAAc,CAAA,YAAA,EAAe,EAAA,CAAG,KAAA,GAAQ,CAAC,CAAA,GAAA,CAAK;AAAA,KAC/C;AAAA,GACH;AAEA,EAAA,IAAI,UAAA,GAAyB,WAAA,CAAY,CAAC,CAAA,CAAE,EAAA;AAC5C,EAAA,KAAA,IAAS,IAAI,OAAA,CAAQ,MAAA,GAAS,CAAA,EAAG,CAAA,IAAK,GAAG,CAAA,EAAA,EAAK;AAC5C,IAAA,IAAI,OAAA,CAAQ,CAAC,CAAA,EAAG;AACd,MAAA,UAAA,GAAa,WAAA,CAAY,CAAC,CAAA,CAAE,EAAA;AAC5B,MAAA;AAAA,IACF;AAAA,EACF;AAEA,EAAA,OAAO;AAAA,IACL,UAAA;AAAA,IACA,EAAA,EAAI,CAAC,GAAA,KAA6B;AAChC,MAAA,OAAO,SAAA,CAAU,GAAA,CAAI,GAAG,CAAA,IAAK,KAAA;AAAA,IAC/B,CAAA;AAAA,IACA,IAAA,EAAM,CAAC,GAAA,KAA6B;AAClC,MAAA,OAAO,WAAA,CAAY,GAAA,CAAI,GAAG,CAAA,IAAK,KAAA;AAAA,IACjC;AAAA,GACF;AACF;;;;"}
+{"version":3,"file":"useBreakpoint.esm.js","sources":["../../src/hooks/useBreakpoint.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 { useMemo } from 'react';\nimport { useSyncExternalStore } from 'use-sync-external-store/shim';\nimport type { Breakpoint } from '../types';\n\nexport const breakpoints: { name: string; id: Breakpoint; value: number }[] = [\n  { name: 'Initial', id: 'initial', value: 0 },\n  { name: 'Extra Small', id: 'xs', value: 640 },\n  { name: 'Small', id: 'sm', value: 768 },\n  { name: 'Medium', id: 'md', value: 1024 },\n  { name: 'Large', id: 'lg', value: 1280 },\n  { name: 'Extra Large', id: 'xl', value: 1536 },\n];\n\nconst breakpointIndex = new Map<Breakpoint, number>(\n  breakpoints.map((bp, i) => [bp.id, i]),\n);\n\nfunction bpIndex(key: Breakpoint): number {\n  return breakpointIndex.get(key) ?? 0;\n}\n\nconst IS_SERVER =\n  typeof window === 'undefined' || typeof window.matchMedia === 'undefined';\n\nfunction computeBreakpoint(): Breakpoint {\n  if (IS_SERVER) {\n    return 'initial';\n  }\n  for (let i = breakpoints.length - 1; i >= 0; i--) {\n    if (window.matchMedia(`(min-width: ${breakpoints[i].value}px)`).matches) {\n      return breakpoints[i].id;\n    }\n  }\n  return 'initial';\n}\n\n// --- Module-scoped singleton store ---\n// This is intentionally not a global singleton. Multiple copies of this module\n// (e.g. different package versions or module federation remotes) each get their\n// own store. This avoids cross-version coupling at the cost of a few extra\n// listeners, which is a fine trade-off.\n// `current` is initialized lazily on first client-side access.\n\nlet current: Breakpoint | undefined;\nconst listeners = new Set<() => void>();\nlet initialized = false;\n\nfunction ensureInitialized(): void {\n  if (initialized || IS_SERVER) {\n    return;\n  }\n  initialized = true;\n  current = computeBreakpoint();\n\n  // Register one listener per breakpoint. When any query fires, re-evaluate\n  // all breakpoints to find the new active one. Notify subscribers only if\n  // the active breakpoint actually changed.\n  for (const bp of breakpoints) {\n    const mql = window.matchMedia(`(min-width: ${bp.value}px)`);\n    mql.addEventListener('change', () => {\n      const next = computeBreakpoint();\n      if (next !== current) {\n        current = next;\n        for (const cb of listeners) {\n          cb();\n        }\n      }\n    });\n  }\n}\n\nfunction subscribe(callback: () => void): () => void {\n  ensureInitialized();\n  listeners.add(callback);\n  return () => {\n    listeners.delete(callback);\n  };\n}\n\nfunction getSnapshot(): Breakpoint {\n  ensureInitialized();\n  return current ?? 'initial';\n}\n\nfunction getServerSnapshot(): Breakpoint {\n  return 'initial';\n}\n\n/** @public */\nexport const useBreakpoint = () => {\n  const breakpoint = useSyncExternalStore(\n    subscribe,\n    getSnapshot,\n    getServerSnapshot,\n  );\n\n  return useMemo(\n    () => ({\n      breakpoint,\n      up: (key: Breakpoint): boolean => bpIndex(breakpoint) >= bpIndex(key),\n      down: (key: Breakpoint): boolean => bpIndex(breakpoint) < bpIndex(key),\n    }),\n    [breakpoint],\n  );\n};\n"],"names":[],"mappings":";;;AAmBO,MAAM,WAAA,GAAiE;AAAA,EAC5E,EAAE,IAAA,EAAM,SAAA,EAAW,EAAA,EAAI,SAAA,EAAW,OAAO,CAAA,EAAE;AAAA,EAC3C,EAAE,IAAA,EAAM,aAAA,EAAe,EAAA,EAAI,IAAA,EAAM,OAAO,GAAA,EAAI;AAAA,EAC5C,EAAE,IAAA,EAAM,OAAA,EAAS,EAAA,EAAI,IAAA,EAAM,OAAO,GAAA,EAAI;AAAA,EACtC,EAAE,IAAA,EAAM,QAAA,EAAU,EAAA,EAAI,IAAA,EAAM,OAAO,IAAA,EAAK;AAAA,EACxC,EAAE,IAAA,EAAM,OAAA,EAAS,EAAA,EAAI,IAAA,EAAM,OAAO,IAAA,EAAK;AAAA,EACvC,EAAE,IAAA,EAAM,aAAA,EAAe,EAAA,EAAI,IAAA,EAAM,OAAO,IAAA;AAC1C;AAEA,MAAM,kBAAkB,IAAI,GAAA;AAAA,EAC1B,WAAA,CAAY,IAAI,CAAC,EAAA,EAAI,MAAM,CAAC,EAAA,CAAG,EAAA,EAAI,CAAC,CAAC;AACvC,CAAA;AAEA,SAAS,QAAQ,GAAA,EAAyB;AACxC,EAAA,OAAO,eAAA,CAAgB,GAAA,CAAI,GAAG,CAAA,IAAK,CAAA;AACrC;AAEA,MAAM,YACJ,OAAO,MAAA,KAAW,WAAA,IAAe,OAAO,OAAO,UAAA,KAAe,WAAA;AAEhE,SAAS,iBAAA,GAAgC;AACvC,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,OAAO,SAAA;AAAA,EACT;AACA,EAAA,KAAA,IAAS,IAAI,WAAA,CAAY,MAAA,GAAS,CAAA,EAAG,CAAA,IAAK,GAAG,CAAA,EAAA,EAAK;AAChD,IAAA,IAAI,MAAA,CAAO,WAAW,CAAA,YAAA,EAAe,WAAA,CAAY,CAAC,CAAA,CAAE,KAAK,CAAA,GAAA,CAAK,CAAA,CAAE,OAAA,EAAS;AACvE,MAAA,OAAO,WAAA,CAAY,CAAC,CAAA,CAAE,EAAA;AAAA,IACxB;AAAA,EACF;AACA,EAAA,OAAO,SAAA;AACT;AASA,IAAI,OAAA;AACJ,MAAM,SAAA,uBAAgB,GAAA,EAAgB;AACtC,IAAI,WAAA,GAAc,KAAA;AAElB,SAAS,iBAAA,GAA0B;AACjC,EAAA,IAAI,eAAe,SAAA,EAAW;AAC5B,IAAA;AAAA,EACF;AACA,EAAA,WAAA,GAAc,IAAA;AACd,EAAA,OAAA,GAAU,iBAAA,EAAkB;AAK5B,EAAA,KAAA,MAAW,MAAM,WAAA,EAAa;AAC5B,IAAA,MAAM,MAAM,MAAA,CAAO,UAAA,CAAW,CAAA,YAAA,EAAe,EAAA,CAAG,KAAK,CAAA,GAAA,CAAK,CAAA;AAC1D,IAAA,GAAA,CAAI,gBAAA,CAAiB,UAAU,MAAM;AACnC,MAAA,MAAM,OAAO,iBAAA,EAAkB;AAC/B,MAAA,IAAI,SAAS,OAAA,EAAS;AACpB,QAAA,OAAA,GAAU,IAAA;AACV,QAAA,KAAA,MAAW,MAAM,SAAA,EAAW;AAC1B,UAAA,EAAA,EAAG;AAAA,QACL;AAAA,MACF;AAAA,IACF,CAAC,CAAA;AAAA,EACH;AACF;AAEA,SAAS,UAAU,QAAA,EAAkC;AACnD,EAAA,iBAAA,EAAkB;AAClB,EAAA,SAAA,CAAU,IAAI,QAAQ,CAAA;AACtB,EAAA,OAAO,MAAM;AACX,IAAA,SAAA,CAAU,OAAO,QAAQ,CAAA;AAAA,EAC3B,CAAA;AACF;AAEA,SAAS,WAAA,GAA0B;AACjC,EAAA,iBAAA,EAAkB;AAClB,EAAA,OAAO,OAAA,IAAW,SAAA;AACpB;AAEA,SAAS,iBAAA,GAAgC;AACvC,EAAA,OAAO,SAAA;AACT;AAGO,MAAM,gBAAgB,MAAM;AACjC,EAAA,MAAM,UAAA,GAAa,oBAAA;AAAA,IACjB,SAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,OAAO,OAAA;AAAA,IACL,OAAO;AAAA,MACL,UAAA;AAAA,MACA,IAAI,CAAC,GAAA,KAA6B,QAAQ,UAAU,CAAA,IAAK,QAAQ,GAAG,CAAA;AAAA,MACpE,MAAM,CAAC,GAAA,KAA6B,QAAQ,UAAU,CAAA,GAAI,QAAQ,GAAG;AAAA,KACvE,CAAA;AAAA,IACA,CAAC,UAAU;AAAA,GACb;AACF;;;;"}

package/dist/hooks/useDefinition/helpers.esm.js

@@ -24,6 +24,29 @@ function resolveResponsiveValue(value, breakpoint) {
   }
   return value;
 }
+function resolveDefinitionProps(definition, props, breakpoint) {
+  const ownPropKeys = new Set(Object.keys(definition.propDefs));
+  const utilityPropKeys = new Set(definition.utilityProps ?? []);
+  const ownPropsRaw = {};
+  const restProps = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (ownPropKeys.has(key)) {
+      ownPropsRaw[key] = value;
+    } else if (!utilityPropKeys.has(key)) {
+      restProps[key] = value;
+    }
+  }
+  const ownPropsResolved = {};
+  for (const [key, config] of Object.entries(definition.propDefs)) {
+    const rawValue = ownPropsRaw[key];
+    const resolvedValue = resolveResponsiveValue(rawValue, breakpoint);
+    const finalValue = resolvedValue ?? config.default;
+    if (finalValue !== void 0) {
+      ownPropsResolved[key] = finalValue;
+    }
+  }
+  return { ownPropsResolved, restProps };
+}
 function processUtilityProps(props, utilityPropKeys) {
   const utilityClassList = [];
   const generatedStyle = {};
@@ -65,5 +88,5 @@ function processUtilityProps(props, utilityPropKeys) {
   };
 }
 
-export { processUtilityProps, resolveResponsiveValue };
+export { processUtilityProps, resolveDefinitionProps, resolveResponsiveValue };
 //# sourceMappingURL=helpers.esm.js.map