@backstage/ui 0.12.0-next.2 → 0.12.0

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

@@ -1 +1 @@
-{"version":3,"file":"Card.esm.js","sources":["../../../src/components/Card/Card.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 { useStyles } from '../../hooks/useStyles';\nimport { CardDefinition } from './definition';\nimport type {\n  CardProps,\n  CardHeaderProps,\n  CardBodyProps,\n  CardFooterProps,\n} from './types';\nimport styles from './Card.module.css';\n\n/**\n * Card component.\n *\n * @public\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {\n  const { classNames, cleanedProps } = useStyles(CardDefinition, props);\n  const { className, ...rest } = cleanedProps;\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...rest}\n    />\n  );\n});\n\n/**\n * CardHeader component.\n *\n * @public\n */\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(\n  (props, ref) => {\n    const { classNames, cleanedProps } = useStyles(CardDefinition, props);\n    const { className, ...rest } = cleanedProps;\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          classNames.header,\n          styles[classNames.header],\n          className,\n        )}\n        {...rest}\n      />\n    );\n  },\n);\n\n/**\n * CardBody component.\n *\n * @public\n */\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(\n  (props, ref) => {\n    const { classNames, cleanedProps } = useStyles(CardDefinition, props);\n    const { className, ...rest } = cleanedProps;\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(classNames.body, styles[classNames.body], className)}\n        {...rest}\n      />\n    );\n  },\n);\n\n/**\n * CardFooter component.\n *\n * @public\n */\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(\n  (props, ref) => {\n    const { classNames, cleanedProps } = useStyles(CardDefinition, props);\n    const { className, ...rest } = cleanedProps;\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          classNames.footer,\n          styles[classNames.footer],\n          className,\n        )}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;AAiCO,MAAM,IAAA,GAAO,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACxE,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,gBAAgB,KAAK,CAAA;AACpE,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;AAOM,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,gBAAgB,KAAK,CAAA;AACpE,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,MAAA;AAAA,UACX,MAAA,CAAO,WAAW,MAAM,CAAA;AAAA,UACxB;AAAA,SACF;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AAOO,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,gBAAgB,KAAK,CAAA;AACpE,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QAClE,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AAOO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,gBAAgB,KAAK,CAAA;AACpE,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,MAAA;AAAA,UACX,MAAA,CAAO,WAAW,MAAM,CAAA;AAAA,UACxB;AAAA,SACF;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"Card.esm.js","sources":["../../../src/components/Card/Card.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 { useDefinition } from '../../hooks/useDefinition';\nimport {\n  CardDefinition,\n  CardHeaderDefinition,\n  CardBodyDefinition,\n  CardFooterDefinition,\n} from './definition';\nimport type {\n  CardProps,\n  CardHeaderProps,\n  CardBodyProps,\n  CardFooterProps,\n} from './types';\nimport { Box } from '../Box/Box';\n\n/**\n * Card component.\n *\n * @public\n */\nexport const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {\n  const { ownProps, restProps, dataAttributes } = useDefinition(\n    CardDefinition,\n    props,\n  );\n  const { classes, children } = ownProps;\n\n  return (\n    <Box\n      bg=\"neutral-auto\"\n      ref={ref}\n      className={classes.root}\n      {...dataAttributes}\n      {...restProps}\n    >\n      {children}\n    </Box>\n  );\n});\n\nCard.displayName = 'Card';\n\n/**\n * CardHeader component.\n *\n * @public\n */\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(CardHeaderDefinition, props);\n    const { classes, children } = ownProps;\n\n    return (\n      <div ref={ref} className={classes.root} {...restProps}>\n        {children}\n      </div>\n    );\n  },\n);\n\nCardHeader.displayName = 'CardHeader';\n\n/**\n * CardBody component.\n *\n * @public\n */\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(CardBodyDefinition, props);\n    const { classes, children } = ownProps;\n\n    return (\n      <div ref={ref} className={classes.root} {...restProps}>\n        {children}\n      </div>\n    );\n  },\n);\n\nCardBody.displayName = 'CardBody';\n\n/**\n * CardFooter component.\n *\n * @public\n */\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(CardFooterDefinition, props);\n    const { classes, children } = ownProps;\n\n    return (\n      <div ref={ref} className={classes.root} {...restProps}>\n        {children}\n      </div>\n    );\n  },\n);\n\nCardFooter.displayName = 'CardFooter';\n"],"names":[],"mappings":";;;;;;AAqCO,MAAM,IAAA,GAAO,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACxE,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,IAC9C,cAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAS,GAAI,QAAA;AAE9B,EAAA,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAG,cAAA;AAAA,MACH,GAAA;AAAA,MACA,WAAW,OAAA,CAAQ,IAAA;AAAA,MAClB,GAAG,cAAA;AAAA,MACH,GAAG,SAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;AAOZ,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,sBAAsB,KAAK,CAAA;AACzE,IAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAS,GAAI,QAAA;AAE9B,IAAA,uBACE,GAAA,CAAC,SAAI,GAAA,EAAU,SAAA,EAAW,QAAQ,IAAA,EAAO,GAAG,WACzC,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AAOlB,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,oBAAoB,KAAK,CAAA;AACvE,IAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAS,GAAI,QAAA;AAE9B,IAAA,uBACE,GAAA,CAAC,SAAI,GAAA,EAAU,SAAA,EAAW,QAAQ,IAAA,EAAO,GAAG,WACzC,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;AAOhB,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,sBAAsB,KAAK,CAAA;AACzE,IAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAS,GAAI,QAAA;AAE9B,IAAA,uBACE,GAAA,CAAC,SAAI,GAAA,EAAU,SAAA,EAAW,QAAQ,IAAA,EAAO,GAAG,WACzC,QAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}

package/dist/components/Card/Card.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  .Card_bui-Card__e4b6b3d7c7 {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-3);\n    background-color: var(--bui-bg-neutral-1);\n    border-radius: var(--bui-radius-3);\n    padding-block: var(--bui-space-3);\n    color: var(--bui-fg-primary);\n    border: 1px solid var(--bui-border);\n    overflow: hidden;\n    min-height: 0;\n    width: 100%;\n  }\n\n  .Card_bui-CardBody__e4b6b3d7c7 {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    padding-inline: var(--bui-space-3);\n  }\n\n  .Card_bui-CardHeader__e4b6b3d7c7 {\n    padding-inline: var(--bui-space-3);\n  }\n\n  .Card_bui-CardFooter__e4b6b3d7c7 {\n    padding-inline: var(--bui-space-3);\n  }\n}\n";
-var styles = {"bui-Card":"Card_bui-Card__e4b6b3d7c7","bui-CardBody":"Card_bui-CardBody__e4b6b3d7c7","bui-CardHeader":"Card_bui-CardHeader__e4b6b3d7c7","bui-CardFooter":"Card_bui-CardFooter__e4b6b3d7c7"};
+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  .Card_bui-Card__b58d4a84f0 {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-3);\n    border-radius: var(--bui-radius-3);\n    padding-block: var(--bui-space-3);\n    color: var(--bui-fg-primary);\n    overflow: hidden;\n    min-height: 0;\n    width: 100%;\n  }\n\n  .Card_bui-CardBody__b58d4a84f0 {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    padding-inline: var(--bui-space-3);\n  }\n\n  .Card_bui-CardHeader__b58d4a84f0 {\n    padding-inline: var(--bui-space-3);\n  }\n\n  .Card_bui-CardFooter__b58d4a84f0 {\n    padding-inline: var(--bui-space-3);\n  }\n}\n";
+var styles = {"bui-Card":"Card_bui-Card__b58d4a84f0","bui-CardBody":"Card_bui-CardBody__b58d4a84f0","bui-CardHeader":"Card_bui-CardHeader__b58d4a84f0","bui-CardFooter":"Card_bui-CardFooter__b58d4a84f0"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -1,11 +1,51 @@
-const CardDefinition = {
+import 'react/jsx-runtime';
+import 'clsx';
+import 'react';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './Card.module.css.esm.js';
+
+const CardDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-Card"
+  },
+  propDefs: {
+    children: {},
+    className: {}
+  }
+});
+const CardHeaderDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-CardHeader"
+  },
+  propDefs: {
+    children: {},
+    className: {}
+  }
+});
+const CardBodyDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-CardBody"
+  },
+  propDefs: {
+    children: {},
+    className: {}
+  }
+});
+const CardFooterDefinition = defineComponent()({
+  styles,
   classNames: {
-    root: "bui-Card",
-    header: "bui-CardHeader",
-    body: "bui-CardBody",
-    footer: "bui-CardFooter"
+    root: "bui-CardFooter"
+  },
+  propDefs: {
+    children: {},
+    className: {}
   }
-};
+});
 
-export { CardDefinition };
+export { CardBodyDefinition, CardDefinition, CardFooterDefinition, CardHeaderDefinition };
 //# sourceMappingURL=definition.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Card/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 Card\n * @public\n */\nexport const CardDefinition = {\n  classNames: {\n    root: 'bui-Card',\n    header: 'bui-CardHeader',\n    body: 'bui-CardBody',\n    footer: 'bui-CardFooter',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,cAAA,GAAiB;AAAA,EAC5B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,UAAA;AAAA,IACN,MAAA,EAAQ,gBAAA;AAAA,IACR,IAAA,EAAM,cAAA;AAAA,IACN,MAAA,EAAQ;AAAA;AAEZ;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Card/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 {\n  CardOwnProps,\n  CardHeaderOwnProps,\n  CardBodyOwnProps,\n  CardFooterOwnProps,\n} from './types';\nimport styles from './Card.module.css';\n\n/**\n * Component definition for Card\n * @public\n */\nexport const CardDefinition = defineComponent<CardOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Card',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n  },\n});\n\n/**\n * Component definition for CardHeader\n * @public\n */\nexport const CardHeaderDefinition = defineComponent<CardHeaderOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-CardHeader',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n  },\n});\n\n/**\n * Component definition for CardBody\n * @public\n */\nexport const CardBodyDefinition = defineComponent<CardBodyOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-CardBody',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n  },\n});\n\n/**\n * Component definition for CardFooter\n * @public\n */\nexport const CardFooterDefinition = defineComponent<CardFooterOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-CardFooter',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AA6BO,MAAM,cAAA,GAAiB,iBAA8B,CAAE;AAAA,EAC5D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;AAMM,MAAM,oBAAA,GAAuB,iBAAoC,CAAE;AAAA,EACxE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;AAMM,MAAM,kBAAA,GAAqB,iBAAkC,CAAE;AAAA,EACpE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;AAMM,MAAM,oBAAA,GAAuB,iBAAoC,CAAE;AAAA,EACxE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;;;;"}

package/dist/components/Checkbox/Checkbox.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  .Checkbox_bui-Checkbox__ec409ffa14 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .Checkbox_bui-Checkbox__ec409ffa14[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .Checkbox_bui-CheckboxIndicator__ec409ffa14 {\n    border: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1rem;\n    height: 1rem;\n    box-shadow: inset 0 0 0 1px var(--bui-border);\n    border-radius: 2px;\n    transition: background-color 0.2s ease-in-out;\n    background-color: var(--bui-bg-neutral-1);\n    padding: 0;\n    flex-shrink: 0;\n    color: transparent;\n\n    .Checkbox_bui-Checkbox__ec409ffa14[data-focus-visible] & {\n      transition: none;\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n\n    .Checkbox_bui-Checkbox__ec409ffa14[data-selected] & {\n      background-color: var(--bui-bg-solid);\n      box-shadow: none;\n      color: var(--bui-fg-solid);\n    }\n\n    .Checkbox_bui-Checkbox__ec409ffa14[data-indeterminate] & {\n      background-color: var(--bui-bg-neutral-1);\n      box-shadow: inset 0 0 0 1px var(--bui-border);\n      color: var(--bui-fg-primary);\n    }\n\n    .Checkbox_bui-Checkbox__ec409ffa14[data-hovered]:not([data-selected]):not([data-indeterminate])\n      & {\n      box-shadow: inset 0 0 0 1px var(--bui-border-hover);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      & {\n        transition: none;\n      }\n    }\n  }\n}\n";
-var styles = {"bui-Checkbox":"Checkbox_bui-Checkbox__ec409ffa14","bui-CheckboxIndicator":"Checkbox_bui-CheckboxIndicator__ec409ffa14"};
+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  .Checkbox_bui-Checkbox__2699cf9993 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .Checkbox_bui-Checkbox__2699cf9993[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n  .Checkbox_bui-CheckboxIndicator__2699cf9993 {\n    border: none;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1rem;\n    height: 1rem;\n    box-shadow: inset 0 0 0 1px var(--bui-border-2);\n    border-radius: 2px;\n    transition: background-color 0.2s ease-in-out;\n    background-color: var(--bui-bg-neutral-1);\n    padding: 0;\n    flex-shrink: 0;\n    color: transparent;\n\n    .Checkbox_bui-Checkbox__2699cf9993[data-focus-visible] & {\n      transition: none;\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n\n    .Checkbox_bui-Checkbox__2699cf9993[data-selected] & {\n      background-color: var(--bui-bg-solid);\n      box-shadow: none;\n      color: var(--bui-fg-solid);\n    }\n\n    .Checkbox_bui-Checkbox__2699cf9993[data-indeterminate] & {\n      background-color: var(--bui-bg-neutral-1);\n      box-shadow: inset 0 0 0 1px var(--bui-border-2);\n      color: var(--bui-fg-primary);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      & {\n        transition: none;\n      }\n    }\n  }\n}\n";
+var styles = {"bui-Checkbox":"Checkbox_bui-Checkbox__2699cf9993","bui-CheckboxIndicator":"Checkbox_bui-CheckboxIndicator__2699cf9993"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/Dialog/Dialog.esm.js

@@ -4,7 +4,7 @@ import { Modal, Dialog as Dialog$1, Heading, DialogTrigger as DialogTrigger$1 }
 import clsx from 'clsx';
 import { RiCloseLine } from '@remixicon/react';
 import { Button } from '../Button/Button.esm.js';
-import '../../hooks/useSurface.esm.js';
+import '../../hooks/useBg.esm.js';
 import '../../hooks/useDefinition/helpers.esm.js';
 import '../Button/Button.module.css.esm.js';
 import { useStyles } from '../../hooks/useStyles.esm.js';

package/dist/components/Dialog/Dialog.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  .Dialog_bui-DialogOverlay__9038fccb28 {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: color-mix(in srgb, var(--bui-bg-neutral-2) 80%, transparent);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n  }\n\n  [data-theme='dark'] .Dialog_bui-Dialog__9038fccb28 {\n    background: rgba(0, 0, 0, 0.5);\n  }\n\n  .Dialog_bui-DialogOverlay__9038fccb28[data-entering] {\n    animation: Dialog_fade-in__9038fccb28 200ms ease-out forwards;\n  }\n\n  .Dialog_bui-DialogOverlay__9038fccb28[data-exiting] {\n    animation: Dialog_fade-out__9038fccb28 150ms ease-out forwards;\n  }\n\n  .Dialog_bui-Dialog__9038fccb28 {\n    background: var(--bui-bg-neutral-1);\n    border-radius: 0.5rem;\n    border: 1px solid var(--bui-border);\n    color: var(--bui-fg-primary);\n    position: relative;\n    width: min(var(--bui-dialog-min-width, 400px), calc(100vw - 3rem));\n    max-width: calc(100vw - 3rem);\n    height: min(var(--bui-dialog-min-height, auto), calc(100vh - 3rem));\n    max-height: calc(100vh - 3rem);\n    display: flex;\n    flex-direction: column;\n    outline: none;\n  }\n\n  /* Dialog entering animation */\n  .Dialog_bui-DialogOverlay__9038fccb28[data-entering] .Dialog_bui-Dialog__9038fccb28 {\n    animation: Dialog_dialog-enter__9038fccb28 150ms ease-out forwards;\n  }\n\n  /* Dialog exiting animation */\n  .Dialog_bui-DialogOverlay__9038fccb28[data-exiting] .Dialog_bui-Dialog__9038fccb28 {\n    animation: Dialog_dialog-exit__9038fccb28 150ms ease-out forwards;\n  }\n\n  .Dialog_bui-DialogHeader__9038fccb28 {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    border-bottom: 1px solid var(--bui-border);\n  }\n\n  .Dialog_bui-DialogHeaderTitle__9038fccb28 {\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-bold);\n    margin: 0;\n  }\n\n  .Dialog_bui-DialogFooter__9038fccb28 {\n    display: flex;\n    align-items: center;\n    justify-content: end;\n    gap: var(--bui-space-2);\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-3);\n    border-top: 1px solid var(--bui-border);\n  }\n\n  .Dialog_bui-DialogBody__9038fccb28 {\n    padding: var(--bui-space-3);\n    flex: 1;\n    overflow-y: auto;\n  }\n\n  /* Keyframe animations */\n  @keyframes Dialog_fade-in__9038fccb28 {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes Dialog_fade-out__9038fccb28 {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  @keyframes Dialog_dialog-enter__9038fccb28 {\n    from {\n      opacity: 0.5;\n      transform: scale(0.8);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  @keyframes Dialog_dialog-exit__9038fccb28 {\n    from {\n      opacity: 1;\n      transform: scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: scale(0.95);\n    }\n  }\n}\n";
-var styles = {"bui-DialogOverlay":"Dialog_bui-DialogOverlay__9038fccb28","bui-Dialog":"Dialog_bui-Dialog__9038fccb28","fade-in":"Dialog_fade-in__9038fccb28","fade-out":"Dialog_fade-out__9038fccb28","dialog-enter":"Dialog_dialog-enter__9038fccb28","dialog-exit":"Dialog_dialog-exit__9038fccb28","bui-DialogHeader":"Dialog_bui-DialogHeader__9038fccb28","bui-DialogHeaderTitle":"Dialog_bui-DialogHeaderTitle__9038fccb28","bui-DialogFooter":"Dialog_bui-DialogFooter__9038fccb28","bui-DialogBody":"Dialog_bui-DialogBody__9038fccb28"};
+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  .Dialog_bui-DialogOverlay__c76e5a4658 {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: color-mix(in srgb, var(--bui-bg-neutral-2) 80%, transparent);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    z-index: 1000;\n  }\n\n  [data-theme='dark'] .Dialog_bui-Dialog__c76e5a4658 {\n    background: rgba(0, 0, 0, 0.5);\n  }\n\n  .Dialog_bui-DialogOverlay__c76e5a4658[data-entering] {\n    animation: Dialog_fade-in__c76e5a4658 200ms ease-out forwards;\n  }\n\n  .Dialog_bui-DialogOverlay__c76e5a4658[data-exiting] {\n    animation: Dialog_fade-out__c76e5a4658 150ms ease-out forwards;\n  }\n\n  .Dialog_bui-Dialog__c76e5a4658 {\n    background: var(--bui-bg-popover);\n    border-radius: 0.5rem;\n    border: 1px solid var(--bui-border-1);\n    color: var(--bui-fg-primary);\n    position: relative;\n    width: min(var(--bui-dialog-min-width, 400px), calc(100vw - 3rem));\n    max-width: calc(100vw - 3rem);\n    height: min(var(--bui-dialog-min-height, auto), calc(100vh - 3rem));\n    max-height: calc(100vh - 3rem);\n    display: flex;\n    flex-direction: column;\n    outline: none;\n  }\n\n  /* Dialog entering animation */\n  .Dialog_bui-DialogOverlay__c76e5a4658[data-entering] .Dialog_bui-Dialog__c76e5a4658 {\n    animation: Dialog_dialog-enter__c76e5a4658 150ms ease-out forwards;\n  }\n\n  /* Dialog exiting animation */\n  .Dialog_bui-DialogOverlay__c76e5a4658[data-exiting] .Dialog_bui-Dialog__c76e5a4658 {\n    animation: Dialog_dialog-exit__c76e5a4658 150ms ease-out forwards;\n  }\n\n  .Dialog_bui-DialogHeader__c76e5a4658 {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    border-bottom: 1px solid var(--bui-border-1);\n  }\n\n  .Dialog_bui-DialogHeaderTitle__c76e5a4658 {\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-bold);\n    margin: 0;\n  }\n\n  .Dialog_bui-DialogFooter__c76e5a4658 {\n    display: flex;\n    align-items: center;\n    justify-content: end;\n    gap: var(--bui-space-2);\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-3);\n    border-top: 1px solid var(--bui-border-1);\n  }\n\n  .Dialog_bui-DialogBody__c76e5a4658 {\n    padding: var(--bui-space-3);\n    flex: 1;\n    overflow-y: auto;\n  }\n\n  /* Keyframe animations */\n  @keyframes Dialog_fade-in__c76e5a4658 {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes Dialog_fade-out__c76e5a4658 {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  @keyframes Dialog_dialog-enter__c76e5a4658 {\n    from {\n      opacity: 0.5;\n      transform: scale(0.8);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n\n  @keyframes Dialog_dialog-exit__c76e5a4658 {\n    from {\n      opacity: 1;\n      transform: scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: scale(0.95);\n    }\n  }\n}\n";
+var styles = {"bui-DialogOverlay":"Dialog_bui-DialogOverlay__c76e5a4658","bui-Dialog":"Dialog_bui-Dialog__c76e5a4658","fade-in":"Dialog_fade-in__c76e5a4658","fade-out":"Dialog_fade-out__c76e5a4658","dialog-enter":"Dialog_dialog-enter__c76e5a4658","dialog-exit":"Dialog_dialog-exit__c76e5a4658","bui-DialogHeader":"Dialog_bui-DialogHeader__c76e5a4658","bui-DialogHeaderTitle":"Dialog_bui-DialogHeaderTitle__c76e5a4658","bui-DialogFooter":"Dialog_bui-DialogFooter__c76e5a4658","bui-DialogBody":"Dialog_bui-DialogBody__c76e5a4658"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/Flex/Flex.esm.js

@@ -4,19 +4,17 @@ import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import { FlexDefinition } from './definition.esm.js';
 import styles from './Flex.module.css.esm.js';
-import { useSurface, SurfaceProvider } from '../../hooks/useSurface.esm.js';
+import { useBgProvider, BgProvider } from '../../hooks/useBg.esm.js';
 
 const Flex = forwardRef((props, ref) => {
-  const { surface: resolvedSurface } = useSurface({
-    surface: props.surface
-  });
+  const { bg: resolvedBg } = useBgProvider(props.bg);
   const { classNames, dataAttributes, utilityClasses, style, cleanedProps } = useStyles(FlexDefinition, {
     gap: "4",
     ...props,
-    surface: resolvedSurface
-    // Use resolved surface for data attribute
+    bg: resolvedBg
+    // Use resolved bg for data attribute
   });
-  const { className, surface, ...rest } = cleanedProps;
+  const { className, bg, ...rest } = cleanedProps;
   const content = /* @__PURE__ */ jsx(
     "div",
     {
@@ -32,7 +30,7 @@ const Flex = forwardRef((props, ref) => {
       ...rest
     }
   );
-  return resolvedSurface ? /* @__PURE__ */ jsx(SurfaceProvider, { surface: resolvedSurface, children: content }) : content;
+  return resolvedBg ? /* @__PURE__ */ jsx(BgProvider, { bg: resolvedBg, children: content }) : content;
 });
 
 export { Flex };

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.esm.js","sources":["../../../src/components/Flex/Flex.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 { FlexProps } from './types';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { FlexDefinition } from './definition';\nimport styles from './Flex.module.css';\nimport { SurfaceProvider, useSurface } from '../../hooks/useSurface';\n\n/** @public */\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {\n  // Resolve the surface this Flex creates for its children\n  // Using 'surface' parameter = container behavior (auto increments)\n  const { surface: resolvedSurface } = useSurface({\n    surface: props.surface,\n  });\n\n  const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =\n    useStyles(FlexDefinition, {\n      gap: '4',\n      ...props,\n      surface: resolvedSurface, // Use resolved surface for data attribute\n    });\n\n  const { className, surface, ...rest } = cleanedProps;\n\n  const content = (\n    <div\n      ref={ref}\n      className={clsx(\n        classNames.root,\n        utilityClasses,\n        styles[classNames.root],\n        className,\n      )}\n      style={style}\n      {...dataAttributes}\n      {...rest}\n    />\n  );\n\n  return resolvedSurface ? (\n    <SurfaceProvider surface={resolvedSurface}>{content}</SurfaceProvider>\n  ) : (\n    content\n  );\n});\n"],"names":[],"mappings":";;;;;;;;AAyBO,MAAM,IAAA,GAAO,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAGxE,EAAA,MAAM,EAAE,OAAA,EAAS,eAAA,EAAgB,GAAI,UAAA,CAAW;AAAA,IAC9C,SAAS,KAAA,CAAM;AAAA,GAChB,CAAA;AAED,EAAA,MAAM,EAAE,YAAY,cAAA,EAAgB,cAAA,EAAgB,OAAO,YAAA,EAAa,GACtE,UAAU,cAAA,EAAgB;AAAA,IACxB,GAAA,EAAK,GAAA;AAAA,IACL,GAAG,KAAA;AAAA,IACH,OAAA,EAAS;AAAA;AAAA,GACV,CAAA;AAEH,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,GAAG,MAAK,GAAI,YAAA;AAExC,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,IAAA;AAAA,QACX,cAAA;AAAA,QACA,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,OAAO,kCACL,GAAA,CAAC,eAAA,EAAA,EAAgB,OAAA,EAAS,eAAA,EAAkB,mBAAQ,CAAA,GAEpD,OAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Flex.esm.js","sources":["../../../src/components/Flex/Flex.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 { FlexProps } from './types';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { FlexDefinition } from './definition';\nimport styles from './Flex.module.css';\nimport { BgProvider, useBgProvider } from '../../hooks/useBg';\n\n/** @public */\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {\n  const { bg: resolvedBg } = useBgProvider(props.bg);\n\n  const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =\n    useStyles(FlexDefinition, {\n      gap: '4',\n      ...props,\n      bg: resolvedBg, // Use resolved bg for data attribute\n    });\n\n  const { className, bg, ...rest } = cleanedProps;\n\n  const content = (\n    <div\n      ref={ref}\n      className={clsx(\n        classNames.root,\n        utilityClasses,\n        styles[classNames.root],\n        className,\n      )}\n      style={style}\n      {...dataAttributes}\n      {...rest}\n    />\n  );\n\n  return resolvedBg ? (\n    <BgProvider bg={resolvedBg}>{content}</BgProvider>\n  ) : (\n    content\n  );\n});\n"],"names":[],"mappings":";;;;;;;;AAyBO,MAAM,IAAA,GAAO,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACxE,EAAA,MAAM,EAAE,EAAA,EAAI,UAAA,EAAW,GAAI,aAAA,CAAc,MAAM,EAAE,CAAA;AAEjD,EAAA,MAAM,EAAE,YAAY,cAAA,EAAgB,cAAA,EAAgB,OAAO,YAAA,EAAa,GACtE,UAAU,cAAA,EAAgB;AAAA,IACxB,GAAA,EAAK,GAAA;AAAA,IACL,GAAG,KAAA;AAAA,IACH,EAAA,EAAI;AAAA;AAAA,GACL,CAAA;AAEH,EAAA,MAAM,EAAE,SAAA,EAAW,EAAA,EAAI,GAAG,MAAK,GAAI,YAAA;AAEnC,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,IAAA;AAAA,QACX,cAAA;AAAA,QACA,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,OAAO,6BACL,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAI,UAAA,EAAa,mBAAQ,CAAA,GAErC,OAAA;AAEJ,CAAC;;;;"}

package/dist/components/Flex/Flex.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  .Flex_bui-Flex__d21378eb09 {\n    display: flex;\n\n    /* This helps when using `truncate` on text inside a flex container */\n    min-width: 0;\n  }\n\n  .Flex_bui-Flex__d21378eb09[data-surface='0'] {\n    background-color: var(--bui-bg-neutral-0);\n  }\n\n  .Flex_bui-Flex__d21378eb09[data-surface='1'] {\n    background-color: var(--bui-bg-neutral-1);\n  }\n\n  .Flex_bui-Flex__d21378eb09[data-surface='2'] {\n    background-color: var(--bui-bg-neutral-2);\n  }\n\n  .Flex_bui-Flex__d21378eb09[data-surface='3'] {\n    background-color: var(--bui-bg-neutral-3);\n  }\n\n  .Flex_bui-Flex__d21378eb09[data-surface='danger'] {\n    background-color: var(--bui-bg-danger);\n  }\n\n  .Flex_bui-Flex__d21378eb09[data-surface='warning'] {\n    background-color: var(--bui-bg-warning);\n  }\n\n  .Flex_bui-Flex__d21378eb09[data-surface='success'] {\n    background-color: var(--bui-bg-success);\n  }\n}\n";
-var styles = {"bui-Flex":"Flex_bui-Flex__d21378eb09"};
+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  .Flex_bui-Flex__13abc0796b {\n    display: flex;\n\n    /* This helps when using `truncate` on text inside a flex container */\n    min-width: 0;\n  }\n\n  .Flex_bui-Flex__13abc0796b[data-bg='neutral-1'] {\n    background-color: var(--bui-bg-neutral-1);\n  }\n\n  .Flex_bui-Flex__13abc0796b[data-bg='neutral-2'] {\n    background-color: var(--bui-bg-neutral-2);\n  }\n\n  .Flex_bui-Flex__13abc0796b[data-bg='neutral-3'] {\n    background-color: var(--bui-bg-neutral-3);\n  }\n\n  .Flex_bui-Flex__13abc0796b[data-bg='danger'] {\n    background-color: var(--bui-bg-danger);\n  }\n\n  .Flex_bui-Flex__13abc0796b[data-bg='warning'] {\n    background-color: var(--bui-bg-warning);\n  }\n\n  .Flex_bui-Flex__13abc0796b[data-bg='success'] {\n    background-color: var(--bui-bg-success);\n  }\n}\n";
+var styles = {"bui-Flex":"Flex_bui-Flex__13abc0796b"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -23,7 +23,14 @@ const FlexDefinition = {
     "direction"
   ],
   dataAttributes: {
-    surface: ["0", "1", "2", "3", "danger", "warning", "success"]
+    bg: [
+      "neutral-1",
+      "neutral-2",
+      "neutral-3",
+      "danger",
+      "warning",
+      "success"
+    ]
   }
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Flex/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 Flex\n * @public\n */\nexport const FlexDefinition = {\n  classNames: {\n    root: 'bui-Flex',\n  },\n  utilityProps: [\n    'm',\n    'mb',\n    'ml',\n    'mr',\n    'mt',\n    'mx',\n    'my',\n    'p',\n    'pb',\n    'pl',\n    'pr',\n    'pt',\n    'px',\n    'py',\n    'gap',\n    'align',\n    'justify',\n    'direction',\n  ],\n  dataAttributes: {\n    surface: ['0', '1', '2', '3', 'danger', 'warning', 'success'] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,cAAA,GAAiB;AAAA,EAC5B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,OAAA,EAAS,CAAC,GAAA,EAAK,GAAA,EAAK,KAAK,GAAA,EAAK,QAAA,EAAU,WAAW,SAAS;AAAA;AAEhE;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Flex/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 Flex\n * @public\n */\nexport const FlexDefinition = {\n  classNames: {\n    root: 'bui-Flex',\n  },\n  utilityProps: [\n    'm',\n    'mb',\n    'ml',\n    'mr',\n    'mt',\n    'mx',\n    'my',\n    'p',\n    'pb',\n    'pl',\n    'pr',\n    'pt',\n    'px',\n    'py',\n    'gap',\n    'align',\n    'justify',\n    'direction',\n  ],\n  dataAttributes: {\n    bg: [\n      'neutral-1',\n      'neutral-2',\n      'neutral-3',\n      'danger',\n      'warning',\n      'success',\n    ] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,cAAA,GAAiB;AAAA,EAC5B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,EAAA,EAAI;AAAA,MACF,WAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA;AACF;AAEJ;;;;"}

package/dist/components/FullPage/FullPage.esm.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useStyles } from '../../hooks/useStyles.esm.js';
+import { FullPageDefinition } from './definition.esm.js';
+import styles from './FullPage.module.css.esm.js';
+import clsx from 'clsx';
+
+const FullPage = forwardRef((props, ref) => {
+  const { classNames, cleanedProps } = useStyles(FullPageDefinition, props);
+  const { className, ...rest } = cleanedProps;
+  return /* @__PURE__ */ jsx(
+    "main",
+    {
+      ref,
+      className: clsx(classNames.root, styles[classNames.root], className),
+      ...rest
+    }
+  );
+});
+
+export { FullPage };
+//# sourceMappingURL=FullPage.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FullPage.esm.js","sources":["../../../src/components/FullPage/FullPage.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport type { FullPageProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { FullPageDefinition } from './definition';\nimport styles from './FullPage.module.css';\nimport clsx from 'clsx';\n\n/**\n * A component that fills the remaining viewport height below the Header.\n *\n * The FullPage component consumes the `--bui-header-height` CSS custom property\n * set by the Header component to calculate its height as\n * `calc(100dvh - var(--bui-header-height, 0px))`. Content inside the FullPage\n * scrolls independently while the Header stays visible.\n *\n * @public\n */\nexport const FullPage = forwardRef<HTMLElement, FullPageProps>((props, ref) => {\n  const { classNames, cleanedProps } = useStyles(FullPageDefinition, props);\n  const { className, ...rest } = cleanedProps;\n\n  return (\n    <main\n      ref={ref}\n      className={clsx(classNames.root, styles[classNames.root], className)}\n      {...rest}\n    />\n  );\n});\n"],"names":[],"mappings":";;;;;;;AAiCO,MAAM,QAAA,GAAW,UAAA,CAAuC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC7E,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,oBAAoB,KAAK,CAAA;AACxE,EAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}

package/dist/components/FullPage/FullPage.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 tokens, base, components, utilities;\n\n@layer components {\n  .FullPage_bui-FullPage__aef86a5319 {\n    height: calc(100dvh - var(--bui-header-height, 0px));\n    overflow-y: auto;\n  }\n}\n";
+var styles = {"bui-FullPage":"FullPage_bui-FullPage__aef86a5319"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=FullPage.module.css.esm.js.map

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

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

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

@@ -0,0 +1,8 @@
+const FullPageDefinition = {
+  classNames: {
+    root: "bui-FullPage"
+  }
+};
+
+export { FullPageDefinition };
+//# sourceMappingURL=definition.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/FullPage/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 FullPage\n * @public\n */\nexport const FullPageDefinition = {\n  classNames: {\n    root: 'bui-FullPage',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,kBAAA,GAAqB;AAAA,EAChC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA;AAEV;;;;"}

package/dist/components/Grid/Grid.esm.js

@@ -4,20 +4,18 @@ import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import { GridDefinition, GridItemDefinition } from './definition.esm.js';
 import styles from './Grid.module.css.esm.js';
-import { useSurface, SurfaceProvider } from '../../hooks/useSurface.esm.js';
+import { useBgProvider, BgProvider } from '../../hooks/useBg.esm.js';
 
 const GridRoot = forwardRef((props, ref) => {
-  const { surface: resolvedSurface } = useSurface({
-    surface: props.surface
-  });
+  const { bg: resolvedBg } = useBgProvider(props.bg);
   const { classNames, dataAttributes, utilityClasses, style, cleanedProps } = useStyles(GridDefinition, {
     columns: "auto",
     gap: "4",
     ...props,
-    surface: resolvedSurface
-    // Use resolved surface for data attribute
+    bg: resolvedBg
+    // Use resolved bg for data attribute
   });
-  const { className, surface, ...rest } = cleanedProps;
+  const { className, bg, ...rest } = cleanedProps;
   const content = /* @__PURE__ */ jsx(
     "div",
     {
@@ -33,18 +31,16 @@ const GridRoot = forwardRef((props, ref) => {
       ...rest
     }
   );
-  return resolvedSurface ? /* @__PURE__ */ jsx(SurfaceProvider, { surface: resolvedSurface, children: content }) : content;
+  return resolvedBg ? /* @__PURE__ */ jsx(BgProvider, { bg: resolvedBg, children: content }) : content;
 });
 const GridItem = forwardRef((props, ref) => {
-  const { surface: resolvedSurface } = useSurface({
-    surface: props.surface
-  });
+  const { bg: resolvedBg } = useBgProvider(props.bg);
   const { classNames, dataAttributes, utilityClasses, style, cleanedProps } = useStyles(GridItemDefinition, {
     ...props,
-    surface: resolvedSurface
-    // Use resolved surface for data attribute
+    bg: resolvedBg
+    // Use resolved bg for data attribute
   });
-  const { className, surface, ...rest } = cleanedProps;
+  const { className, bg, ...rest } = cleanedProps;
   const content = /* @__PURE__ */ jsx(
     "div",
     {
@@ -60,7 +56,7 @@ const GridItem = forwardRef((props, ref) => {
       ...rest
     }
   );
-  return resolvedSurface ? /* @__PURE__ */ jsx(SurfaceProvider, { surface: resolvedSurface, children: content }) : content;
+  return resolvedBg ? /* @__PURE__ */ jsx(BgProvider, { bg: resolvedBg, children: content }) : content;
 });
 const Grid = {
   Root: GridRoot,

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.esm.js","sources":["../../../src/components/Grid/Grid.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 { GridItemProps, GridProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { GridDefinition, GridItemDefinition } from './definition';\nimport styles from './Grid.module.css';\nimport { SurfaceProvider, useSurface } from '../../hooks/useSurface';\n\nconst GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {\n  // Resolve the surface this Grid creates for its children\n  // Using 'surface' parameter = container behavior (auto increments)\n  const { surface: resolvedSurface } = useSurface({\n    surface: props.surface,\n  });\n\n  const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =\n    useStyles(GridDefinition, {\n      columns: 'auto',\n      gap: '4',\n      ...props,\n      surface: resolvedSurface, // Use resolved surface for data attribute\n    });\n\n  const { className, surface, ...rest } = cleanedProps;\n\n  const content = (\n    <div\n      ref={ref}\n      className={clsx(\n        classNames.root,\n        utilityClasses,\n        styles[classNames.root],\n        className,\n      )}\n      style={style}\n      {...dataAttributes}\n      {...rest}\n    />\n  );\n\n  return resolvedSurface ? (\n    <SurfaceProvider surface={resolvedSurface}>{content}</SurfaceProvider>\n  ) : (\n    content\n  );\n});\n\nconst GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {\n  // Resolve the surface this GridItem creates for its children\n  // Using 'surface' parameter = container behavior (auto increments)\n  const { surface: resolvedSurface } = useSurface({\n    surface: props.surface,\n  });\n\n  const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =\n    useStyles(GridItemDefinition, {\n      ...props,\n      surface: resolvedSurface, // Use resolved surface for data attribute\n    });\n\n  const { className, surface, ...rest } = cleanedProps;\n\n  const content = (\n    <div\n      ref={ref}\n      className={clsx(\n        classNames.root,\n        utilityClasses,\n        styles[classNames.root],\n        className,\n      )}\n      style={style}\n      {...dataAttributes}\n      {...rest}\n    />\n  );\n\n  return resolvedSurface ? (\n    <SurfaceProvider surface={resolvedSurface}>{content}</SurfaceProvider>\n  ) : (\n    content\n  );\n});\n\n/** @public */\nexport const Grid = {\n  Root: GridRoot,\n  Item: GridItem,\n};\n"],"names":[],"mappings":";;;;;;;;AAwBA,MAAM,QAAA,GAAW,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAGrE,EAAA,MAAM,EAAE,OAAA,EAAS,eAAA,EAAgB,GAAI,UAAA,CAAW;AAAA,IAC9C,SAAS,KAAA,CAAM;AAAA,GAChB,CAAA;AAED,EAAA,MAAM,EAAE,YAAY,cAAA,EAAgB,cAAA,EAAgB,OAAO,YAAA,EAAa,GACtE,UAAU,cAAA,EAAgB;AAAA,IACxB,OAAA,EAAS,MAAA;AAAA,IACT,GAAA,EAAK,GAAA;AAAA,IACL,GAAG,KAAA;AAAA,IACH,OAAA,EAAS;AAAA;AAAA,GACV,CAAA;AAEH,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,GAAG,MAAK,GAAI,YAAA;AAExC,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,IAAA;AAAA,QACX,cAAA;AAAA,QACA,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,OAAO,kCACL,GAAA,CAAC,eAAA,EAAA,EAAgB,OAAA,EAAS,eAAA,EAAkB,mBAAQ,CAAA,GAEpD,OAAA;AAEJ,CAAC,CAAA;AAED,MAAM,QAAA,GAAW,UAAA,CAA0C,CAAC,KAAA,EAAO,GAAA,KAAQ;AAGzE,EAAA,MAAM,EAAE,OAAA,EAAS,eAAA,EAAgB,GAAI,UAAA,CAAW;AAAA,IAC9C,SAAS,KAAA,CAAM;AAAA,GAChB,CAAA;AAED,EAAA,MAAM,EAAE,YAAY,cAAA,EAAgB,cAAA,EAAgB,OAAO,YAAA,EAAa,GACtE,UAAU,kBAAA,EAAoB;AAAA,IAC5B,GAAG,KAAA;AAAA,IACH,OAAA,EAAS;AAAA;AAAA,GACV,CAAA;AAEH,EAAA,MAAM,EAAE,SAAA,EAAW,OAAA,EAAS,GAAG,MAAK,GAAI,YAAA;AAExC,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,IAAA;AAAA,QACX,cAAA;AAAA,QACA,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,OAAO,kCACL,GAAA,CAAC,eAAA,EAAA,EAAgB,OAAA,EAAS,eAAA,EAAkB,mBAAQ,CAAA,GAEpD,OAAA;AAEJ,CAAC,CAAA;AAGM,MAAM,IAAA,GAAO;AAAA,EAClB,IAAA,EAAM,QAAA;AAAA,EACN,IAAA,EAAM;AACR;;;;"}
+{"version":3,"file":"Grid.esm.js","sources":["../../../src/components/Grid/Grid.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 { GridItemProps, GridProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { GridDefinition, GridItemDefinition } from './definition';\nimport styles from './Grid.module.css';\nimport { BgProvider, useBgProvider } from '../../hooks/useBg';\n\nconst GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {\n  const { bg: resolvedBg } = useBgProvider(props.bg);\n\n  const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =\n    useStyles(GridDefinition, {\n      columns: 'auto',\n      gap: '4',\n      ...props,\n      bg: resolvedBg, // Use resolved bg for data attribute\n    });\n\n  const { className, bg, ...rest } = cleanedProps;\n\n  const content = (\n    <div\n      ref={ref}\n      className={clsx(\n        classNames.root,\n        utilityClasses,\n        styles[classNames.root],\n        className,\n      )}\n      style={style}\n      {...dataAttributes}\n      {...rest}\n    />\n  );\n\n  return resolvedBg ? (\n    <BgProvider bg={resolvedBg}>{content}</BgProvider>\n  ) : (\n    content\n  );\n});\n\nconst GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {\n  const { bg: resolvedBg } = useBgProvider(props.bg);\n\n  const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =\n    useStyles(GridItemDefinition, {\n      ...props,\n      bg: resolvedBg, // Use resolved bg for data attribute\n    });\n\n  const { className, bg, ...rest } = cleanedProps;\n\n  const content = (\n    <div\n      ref={ref}\n      className={clsx(\n        classNames.root,\n        utilityClasses,\n        styles[classNames.root],\n        className,\n      )}\n      style={style}\n      {...dataAttributes}\n      {...rest}\n    />\n  );\n\n  return resolvedBg ? (\n    <BgProvider bg={resolvedBg}>{content}</BgProvider>\n  ) : (\n    content\n  );\n});\n\n/** @public */\nexport const Grid = {\n  Root: GridRoot,\n  Item: GridItem,\n};\n"],"names":[],"mappings":";;;;;;;;AAwBA,MAAM,QAAA,GAAW,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACrE,EAAA,MAAM,EAAE,EAAA,EAAI,UAAA,EAAW,GAAI,aAAA,CAAc,MAAM,EAAE,CAAA;AAEjD,EAAA,MAAM,EAAE,YAAY,cAAA,EAAgB,cAAA,EAAgB,OAAO,YAAA,EAAa,GACtE,UAAU,cAAA,EAAgB;AAAA,IACxB,OAAA,EAAS,MAAA;AAAA,IACT,GAAA,EAAK,GAAA;AAAA,IACL,GAAG,KAAA;AAAA,IACH,EAAA,EAAI;AAAA;AAAA,GACL,CAAA;AAEH,EAAA,MAAM,EAAE,SAAA,EAAW,EAAA,EAAI,GAAG,MAAK,GAAI,YAAA;AAEnC,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,IAAA;AAAA,QACX,cAAA;AAAA,QACA,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,OAAO,6BACL,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAI,UAAA,EAAa,mBAAQ,CAAA,GAErC,OAAA;AAEJ,CAAC,CAAA;AAED,MAAM,QAAA,GAAW,UAAA,CAA0C,CAAC,KAAA,EAAO,GAAA,KAAQ;AACzE,EAAA,MAAM,EAAE,EAAA,EAAI,UAAA,EAAW,GAAI,aAAA,CAAc,MAAM,EAAE,CAAA;AAEjD,EAAA,MAAM,EAAE,YAAY,cAAA,EAAgB,cAAA,EAAgB,OAAO,YAAA,EAAa,GACtE,UAAU,kBAAA,EAAoB;AAAA,IAC5B,GAAG,KAAA;AAAA,IACH,EAAA,EAAI;AAAA;AAAA,GACL,CAAA;AAEH,EAAA,MAAM,EAAE,SAAA,EAAW,EAAA,EAAI,GAAG,MAAK,GAAI,YAAA;AAEnC,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,IAAA;AAAA,QACX,cAAA;AAAA,QACA,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,OAAO,6BACL,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAI,UAAA,EAAa,mBAAQ,CAAA,GAErC,OAAA;AAEJ,CAAC,CAAA;AAGM,MAAM,IAAA,GAAO;AAAA,EAClB,IAAA,EAAM,QAAA;AAAA,EACN,IAAA,EAAM;AACR;;;;"}

package/dist/components/Grid/Grid.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  .Grid_bui-Grid__9f67130f09 {\n    display: grid;\n  }\n\n  .Grid_bui-Grid__9f67130f09[data-surface='0'],\n  .Grid_bui-GridItem__9f67130f09[data-surface='0'] {\n    background-color: var(--bui-bg-neutral-0);\n  }\n\n  .Grid_bui-Grid__9f67130f09[data-surface='1'],\n  .Grid_bui-GridItem__9f67130f09[data-surface='1'] {\n    background-color: var(--bui-bg-neutral-1);\n  }\n\n  .Grid_bui-Grid__9f67130f09[data-surface='2'],\n  .Grid_bui-GridItem__9f67130f09[data-surface='2'] {\n    background-color: var(--bui-bg-neutral-2);\n  }\n\n  .Grid_bui-Grid__9f67130f09[data-surface='3'],\n  .Grid_bui-GridItem__9f67130f09[data-surface='3'] {\n    background-color: var(--bui-bg-neutral-3);\n  }\n\n  .Grid_bui-Grid__9f67130f09[data-surface='danger'],\n  .Grid_bui-GridItem__9f67130f09[data-surface='danger'] {\n    background-color: var(--bui-bg-danger);\n  }\n\n  .Grid_bui-Grid__9f67130f09[data-surface='warning'],\n  .Grid_bui-GridItem__9f67130f09[data-surface='warning'] {\n    background-color: var(--bui-bg-warning);\n  }\n\n  .Grid_bui-Grid__9f67130f09[data-surface='success'],\n  .Grid_bui-GridItem__9f67130f09[data-surface='success'] {\n    background-color: var(--bui-bg-success);\n  }\n}\n";
-var styles = {"bui-Grid":"Grid_bui-Grid__9f67130f09","bui-GridItem":"Grid_bui-GridItem__9f67130f09"};
+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  .Grid_bui-Grid__90096dfd16 {\n    display: grid;\n  }\n\n  .Grid_bui-Grid__90096dfd16[data-bg='neutral-1'],\n  .Grid_bui-GridItem__90096dfd16[data-bg='neutral-1'] {\n    background-color: var(--bui-bg-neutral-1);\n  }\n\n  .Grid_bui-Grid__90096dfd16[data-bg='neutral-2'],\n  .Grid_bui-GridItem__90096dfd16[data-bg='neutral-2'] {\n    background-color: var(--bui-bg-neutral-2);\n  }\n\n  .Grid_bui-Grid__90096dfd16[data-bg='neutral-3'],\n  .Grid_bui-GridItem__90096dfd16[data-bg='neutral-3'] {\n    background-color: var(--bui-bg-neutral-3);\n  }\n\n  .Grid_bui-Grid__90096dfd16[data-bg='danger'],\n  .Grid_bui-GridItem__90096dfd16[data-bg='danger'] {\n    background-color: var(--bui-bg-danger);\n  }\n\n  .Grid_bui-Grid__90096dfd16[data-bg='warning'],\n  .Grid_bui-GridItem__90096dfd16[data-bg='warning'] {\n    background-color: var(--bui-bg-warning);\n  }\n\n  .Grid_bui-Grid__90096dfd16[data-bg='success'],\n  .Grid_bui-GridItem__90096dfd16[data-bg='success'] {\n    background-color: var(--bui-bg-success);\n  }\n}\n";
+var styles = {"bui-Grid":"Grid_bui-Grid__90096dfd16","bui-GridItem":"Grid_bui-GridItem__90096dfd16"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -21,7 +21,14 @@ const GridDefinition = {
     "py"
   ],
   dataAttributes: {
-    surface: ["0", "1", "2", "3", "danger", "warning", "success"]
+    bg: [
+      "neutral-1",
+      "neutral-2",
+      "neutral-3",
+      "danger",
+      "warning",
+      "success"
+    ]
   }
 };
 const GridItemDefinition = {
@@ -30,7 +37,14 @@ const GridItemDefinition = {
   },
   utilityProps: ["colSpan", "colEnd", "colStart", "rowSpan"],
   dataAttributes: {
-    surface: ["0", "1", "2", "3", "danger", "warning", "success"]
+    bg: [
+      "neutral-1",
+      "neutral-2",
+      "neutral-3",
+      "danger",
+      "warning",
+      "success"
+    ]
   }
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Grid/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 Grid\n * @public\n */\nexport const GridDefinition = {\n  classNames: {\n    root: 'bui-Grid',\n  },\n  utilityProps: [\n    'columns',\n    'gap',\n    'm',\n    'mb',\n    'ml',\n    'mr',\n    'mt',\n    'mx',\n    'my',\n    'p',\n    'pb',\n    'pl',\n    'pr',\n    'pt',\n    'px',\n    'py',\n  ],\n  dataAttributes: {\n    surface: ['0', '1', '2', '3', 'danger', 'warning', 'success'] as const,\n  },\n} as const satisfies ComponentDefinition;\n\n/**\n * Component definition for GridItem\n * @public\n */\nexport const GridItemDefinition = {\n  classNames: {\n    root: 'bui-GridItem',\n  },\n  utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'],\n  dataAttributes: {\n    surface: ['0', '1', '2', '3', 'danger', 'warning', 'success'] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,cAAA,GAAiB;AAAA,EAC5B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,SAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,OAAA,EAAS,CAAC,GAAA,EAAK,GAAA,EAAK,KAAK,GAAA,EAAK,QAAA,EAAU,WAAW,SAAS;AAAA;AAEhE;AAMO,MAAM,kBAAA,GAAqB;AAAA,EAChC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc,CAAC,SAAA,EAAW,QAAA,EAAU,YAAY,SAAS,CAAA;AAAA,EACzD,cAAA,EAAgB;AAAA,IACd,OAAA,EAAS,CAAC,GAAA,EAAK,GAAA,EAAK,KAAK,GAAA,EAAK,QAAA,EAAU,WAAW,SAAS;AAAA;AAEhE;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Grid/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 Grid\n * @public\n */\nexport const GridDefinition = {\n  classNames: {\n    root: 'bui-Grid',\n  },\n  utilityProps: [\n    'columns',\n    'gap',\n    'm',\n    'mb',\n    'ml',\n    'mr',\n    'mt',\n    'mx',\n    'my',\n    'p',\n    'pb',\n    'pl',\n    'pr',\n    'pt',\n    'px',\n    'py',\n  ],\n  dataAttributes: {\n    bg: [\n      'neutral-1',\n      'neutral-2',\n      'neutral-3',\n      'danger',\n      'warning',\n      'success',\n    ] as const,\n  },\n} as const satisfies ComponentDefinition;\n\n/**\n * Component definition for GridItem\n * @public\n */\nexport const GridItemDefinition = {\n  classNames: {\n    root: 'bui-GridItem',\n  },\n  utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'],\n  dataAttributes: {\n    bg: [\n      'neutral-1',\n      'neutral-2',\n      'neutral-3',\n      'danger',\n      'warning',\n      'success',\n    ] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,cAAA,GAAiB;AAAA,EAC5B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,SAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,EAAA,EAAI;AAAA,MACF,WAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA;AACF;AAEJ;AAMO,MAAM,kBAAA,GAAqB;AAAA,EAChC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc,CAAC,SAAA,EAAW,QAAA,EAAU,YAAY,SAAS,CAAA;AAAA,EACzD,cAAA,EAAgB;AAAA,IACd,EAAA,EAAI;AAAA,MACF,WAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA;AACF;AAEJ;;;;"}

package/dist/components/Menu/Menu.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  .Menu_bui-MenuPopover__02d9661e47 {\n    display: flex;\n    flex-direction: column;\n    box-shadow: var(--bui-shadow);\n    border: 1px solid var(--bui-border);\n    border-radius: var(--bui-radius-2);\n    background: var(--bui-bg-neutral-1);\n    color: var(--bui-fg-primary);\n    outline: none;\n    transition: transform 200ms, opacity 200ms;\n    /* Let React Aria handle height constraints naturally */\n    min-height: 0;\n    /* Remove overflow from popover since ScrollArea will handle it */\n    overflow: hidden;\n\n    &[data-entering],\n    &[data-exiting] {\n      transform: var(--origin);\n      opacity: 0;\n    }\n\n    &[data-placement='top'] {\n      --origin: translateY(8px);\n    }\n\n    &[data-placement='bottom'] {\n      --origin: translateY(-8px);\n    }\n\n    &[data-placement='right'] {\n      --origin: translateX(-8px);\n    }\n\n    &[data-placement='left'] {\n      --origin: translateX(8px);\n    }\n  }\n\n  .Menu_bui-MenuContent__02d9661e47 {\n    max-height: inherit;\n    box-sizing: border-box;\n    overflow: auto;\n    min-width: 150px;\n    box-sizing: border-box;\n    outline: none;\n    padding-block: var(--bui-space-1);\n  }\n\n  .Menu_bui-MenuItem__02d9661e47 {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &[data-focused] .Menu_bui-MenuItemWrapper__02d9661e47 {\n      background: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-open] .Menu_bui-MenuItemWrapper__02d9661e47 {\n      background: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-color='danger'] .Menu_bui-MenuItemWrapper__02d9661e47 {\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-color='danger'][data-focused] .Menu_bui-MenuItemWrapper__02d9661e47 {\n      background: var(--bui-bg-danger);\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-has-submenu] {\n      & > .Menu_bui-MenuItemWrapper__02d9661e47 > .Menu_bui-MenuItemArrow__02d9661e47 {\n        display: block;\n      }\n    }\n  }\n\n  .Menu_bui-MenuItemWrapper__02d9661e47 {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    height: 2rem;\n    padding-inline: var(--bui-space-2);\n    border-radius: var(--bui-radius-2);\n    outline: none;\n    cursor: default;\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-3);\n    gap: var(--bui-space-6);\n  }\n\n  .Menu_bui-MenuItemListBox__02d9661e47 {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &:hover .Menu_bui-MenuItemWrapper__02d9661e47 {\n      background: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-selected] .Menu_bui-MenuItemListBoxCheck__02d9661e47 {\n      & > svg {\n        opacity: 1;\n        color: var(--bui-fg-primary);\n      }\n    }\n  }\n\n  .Menu_bui-MenuItemListBoxCheck__02d9661e47 {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      opacity: 0;\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu_bui-MenuItemContent__02d9661e47 {\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu_bui-MenuItemArrow__02d9661e47 {\n    display: none;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu_bui-MenuSection__02d9661e47 {\n    &:first-child .Menu_bui-MenuSectionHeader__02d9661e47 {\n      padding-top: 0;\n    }\n  }\n\n  .Menu_bui-MenuSectionHeader__02d9661e47 {\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    padding-top: var(--bui-space-3);\n    padding-left: var(--bui-space-3);\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-1);\n    font-weight: bold;\n    letter-spacing: 0.05rem;\n    text-transform: uppercase;\n  }\n\n  .Menu_bui-MenuSeparator__02d9661e47 {\n    height: 1px;\n    background: var(--bui-border);\n    margin-inline: var(--bui-space-1_5);\n    margin-block: var(--bui-space-1);\n  }\n\n  .Menu_bui-MenuSearchField__02d9661e47 {\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-neutral-1);\n    height: 2rem;\n\n    &[data-empty] {\n      .Menu_bui-MenuSearchFieldClear__02d9661e47 {\n        visibility: hidden;\n      }\n    }\n  }\n\n  .Menu_bui-MenuSearchFieldInput__02d9661e47 {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0;\n    border: none;\n    background-color: transparent;\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    width: 100%;\n    height: 100%;\n    outline: none;\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    &:first-child {\n      padding-inline: var(--bui-space-3) 0;\n    }\n  }\n\n  .Menu_bui-MenuSearchFieldClear__02d9661e47 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n    width: 2rem;\n    height: 2rem;\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu_bui-MenuEmptyState__02d9661e47 {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    color: var(--bui-fg-secondary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n  }\n}\n";
-var styles = {"bui-MenuPopover":"Menu_bui-MenuPopover__02d9661e47","bui-MenuContent":"Menu_bui-MenuContent__02d9661e47","bui-MenuItem":"Menu_bui-MenuItem__02d9661e47","bui-MenuItemWrapper":"Menu_bui-MenuItemWrapper__02d9661e47","bui-MenuItemArrow":"Menu_bui-MenuItemArrow__02d9661e47","bui-MenuItemListBox":"Menu_bui-MenuItemListBox__02d9661e47","bui-MenuItemListBoxCheck":"Menu_bui-MenuItemListBoxCheck__02d9661e47","bui-MenuItemContent":"Menu_bui-MenuItemContent__02d9661e47","bui-MenuSection":"Menu_bui-MenuSection__02d9661e47","bui-MenuSectionHeader":"Menu_bui-MenuSectionHeader__02d9661e47","bui-MenuSeparator":"Menu_bui-MenuSeparator__02d9661e47","bui-MenuSearchField":"Menu_bui-MenuSearchField__02d9661e47","bui-MenuSearchFieldClear":"Menu_bui-MenuSearchFieldClear__02d9661e47","bui-MenuSearchFieldInput":"Menu_bui-MenuSearchFieldInput__02d9661e47","bui-MenuEmptyState":"Menu_bui-MenuEmptyState__02d9661e47"};
+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  .Menu_bui-MenuPopover__3ab632bf18 {\n    display: flex;\n    flex-direction: column;\n    box-shadow: var(--bui-shadow);\n    border: 1px solid var(--bui-border-1);\n    border-radius: var(--bui-radius-2);\n    background: var(--bui-bg-popover);\n    color: var(--bui-fg-primary);\n    outline: none;\n    transition: transform 200ms, opacity 200ms;\n    /* Let React Aria handle height constraints naturally */\n    min-height: 0;\n    /* Remove overflow from popover since ScrollArea will handle it */\n    overflow: hidden;\n\n    &[data-entering],\n    &[data-exiting] {\n      transform: var(--origin);\n      opacity: 0;\n    }\n\n    &[data-placement='top'] {\n      --origin: translateY(8px);\n    }\n\n    &[data-placement='bottom'] {\n      --origin: translateY(-8px);\n    }\n\n    &[data-placement='right'] {\n      --origin: translateX(-8px);\n    }\n\n    &[data-placement='left'] {\n      --origin: translateX(8px);\n    }\n  }\n\n  .Menu_bui-MenuContent__3ab632bf18 {\n    max-height: inherit;\n    box-sizing: border-box;\n    overflow: auto;\n    min-width: 150px;\n    box-sizing: border-box;\n    outline: none;\n    padding-block: var(--bui-space-1);\n  }\n\n  .Menu_bui-MenuItem__3ab632bf18 {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &[data-focused] .Menu_bui-MenuItemWrapper__3ab632bf18 {\n      background: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-open] .Menu_bui-MenuItemWrapper__3ab632bf18 {\n      background: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-color='danger'] .Menu_bui-MenuItemWrapper__3ab632bf18 {\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-color='danger'][data-focused] .Menu_bui-MenuItemWrapper__3ab632bf18 {\n      background: var(--bui-bg-danger);\n      color: var(--bui-fg-danger);\n    }\n\n    &[data-has-submenu] {\n      & > .Menu_bui-MenuItemWrapper__3ab632bf18 > .Menu_bui-MenuItemArrow__3ab632bf18 {\n        display: block;\n      }\n    }\n  }\n\n  .Menu_bui-MenuItemWrapper__3ab632bf18 {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    height: 2rem;\n    padding-inline: var(--bui-space-2);\n    border-radius: var(--bui-radius-2);\n    outline: none;\n    cursor: default;\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-3);\n    gap: var(--bui-space-6);\n  }\n\n  .Menu_bui-MenuItemListBox__3ab632bf18 {\n    padding-inline: var(--bui-space-1);\n    display: block;\n\n    &:hover .Menu_bui-MenuItemWrapper__3ab632bf18 {\n      background: var(--bui-bg-neutral-2);\n      color: var(--bui-fg-primary);\n    }\n\n    &[data-selected] .Menu_bui-MenuItemListBoxCheck__3ab632bf18 {\n      & > svg {\n        opacity: 1;\n        color: var(--bui-fg-primary);\n      }\n    }\n  }\n\n  .Menu_bui-MenuItemListBoxCheck__3ab632bf18 {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      opacity: 0;\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu_bui-MenuItemContent__3ab632bf18 {\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu_bui-MenuItemArrow__3ab632bf18 {\n    display: none;\n    width: 1rem;\n    height: 1rem;\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu_bui-MenuSection__3ab632bf18 {\n    &:first-child .Menu_bui-MenuSectionHeader__3ab632bf18 {\n      padding-top: 0;\n    }\n  }\n\n  .Menu_bui-MenuSectionHeader__3ab632bf18 {\n    height: 2rem;\n    display: flex;\n    align-items: center;\n    padding-top: var(--bui-space-3);\n    padding-left: var(--bui-space-3);\n    color: var(--bui-fg-primary);\n    font-size: var(--bui-font-size-1);\n    font-weight: bold;\n    letter-spacing: 0.05rem;\n    text-transform: uppercase;\n  }\n\n  .Menu_bui-MenuSeparator__3ab632bf18 {\n    height: 1px;\n    background: var(--bui-border-1);\n    margin-inline: var(--bui-space-1_5);\n    margin-block: var(--bui-space-1);\n  }\n\n  .Menu_bui-MenuSearchField__3ab632bf18 {\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid var(--bui-border-1);\n    background-color: var(--bui-bg-neutral-1);\n    height: 2rem;\n\n    &[data-empty] {\n      .Menu_bui-MenuSearchFieldClear__3ab632bf18 {\n        visibility: hidden;\n      }\n    }\n  }\n\n  .Menu_bui-MenuSearchFieldInput__3ab632bf18 {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0;\n    border: none;\n    background-color: transparent;\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    width: 100%;\n    height: 100%;\n    outline: none;\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    &:first-child {\n      padding-inline: var(--bui-space-3) 0;\n    }\n  }\n\n  .Menu_bui-MenuSearchFieldClear__3ab632bf18 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n    width: 2rem;\n    height: 2rem;\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & > svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Menu_bui-MenuEmptyState__3ab632bf18 {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    color: var(--bui-fg-secondary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n  }\n}\n";
+var styles = {"bui-MenuPopover":"Menu_bui-MenuPopover__3ab632bf18","bui-MenuContent":"Menu_bui-MenuContent__3ab632bf18","bui-MenuItem":"Menu_bui-MenuItem__3ab632bf18","bui-MenuItemWrapper":"Menu_bui-MenuItemWrapper__3ab632bf18","bui-MenuItemArrow":"Menu_bui-MenuItemArrow__3ab632bf18","bui-MenuItemListBox":"Menu_bui-MenuItemListBox__3ab632bf18","bui-MenuItemListBoxCheck":"Menu_bui-MenuItemListBoxCheck__3ab632bf18","bui-MenuItemContent":"Menu_bui-MenuItemContent__3ab632bf18","bui-MenuSection":"Menu_bui-MenuSection__3ab632bf18","bui-MenuSectionHeader":"Menu_bui-MenuSectionHeader__3ab632bf18","bui-MenuSeparator":"Menu_bui-MenuSeparator__3ab632bf18","bui-MenuSearchField":"Menu_bui-MenuSearchField__3ab632bf18","bui-MenuSearchFieldClear":"Menu_bui-MenuSearchFieldClear__3ab632bf18","bui-MenuSearchFieldInput":"Menu_bui-MenuSearchFieldInput__3ab632bf18","bui-MenuEmptyState":"Menu_bui-MenuEmptyState__3ab632bf18"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/PasswordField/PasswordField.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  .PasswordField_bui-PasswordField__12ac503195 {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n\n    &[data-size='small'] {\n      --password-field-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --password-field-item-height: 2.5rem;\n    }\n  }\n\n  .PasswordField_bui-PasswordFieldInputWrapper__12ac503195 {\n    display: flex;\n    align-items: center;\n    border-radius: var(--bui-radius-2);\n    border: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-neutral-1);\n    transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n\n    &[data-size='small'] {\n      height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      height: 2.5rem;\n    }\n\n    &:focus-within {\n      border-color: var(--bui-border-pressed);\n      outline-width: 0px;\n    }\n\n    &:hover {\n      border-color: var(--bui-border-hover);\n    }\n\n    &:has([data-invalid]) {\n      border-color: var(--bui-fg-danger);\n    }\n\n    &:has([data-disabled]) {\n      opacity: 0.5;\n      cursor: not-allowed;\n      border: 1px solid var(--bui-border-disabled);\n    }\n  }\n\n  .PasswordField_bui-PasswordFieldIcon__12ac503195 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    color: var(--bui-fg-primary);\n    pointer-events: none;\n    width: var(--password-field-item-height);\n    height: var(--password-field-item-height);\n\n    & svg {\n      .PasswordField_bui-PasswordField__12ac503195[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .PasswordField_bui-PasswordField__12ac503195[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n  }\n\n  .PasswordField_bui-PasswordFieldInput__12ac503195 {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0;\n    border: none;\n    background-color: transparent;\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    width: 100%;\n    height: 100%;\n    outline: none;\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-disabled] {\n      cursor: not-allowed;\n    }\n\n    &:first-child {\n      .PasswordField_bui-PasswordField__12ac503195[data-size='small'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n\n      .PasswordField_bui-PasswordField__12ac503195[data-size='medium'] & {\n        padding-inline: var(--bui-space-4) 0;\n      }\n    }\n  }\n\n  .PasswordField_bui-PasswordFieldVisibility__12ac503195 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    cursor: pointer;\n    border: none;\n    padding: 0;\n    margin: 0;\n    color: var(--bui-fg-primary);\n    width: var(--password-field-item-height);\n    height: var(--password-field-item-height);\n\n    & svg {\n      .PasswordField_bui-PasswordField__12ac503195[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .PasswordField_bui-PasswordField__12ac503195[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n  }\n}\n";
-var stylesPasswordField = {"bui-PasswordField":"PasswordField_bui-PasswordField__12ac503195","bui-PasswordFieldInputWrapper":"PasswordField_bui-PasswordFieldInputWrapper__12ac503195","bui-PasswordFieldIcon":"PasswordField_bui-PasswordFieldIcon__12ac503195","bui-PasswordFieldInput":"PasswordField_bui-PasswordFieldInput__12ac503195","bui-PasswordFieldVisibility":"PasswordField_bui-PasswordFieldVisibility__12ac503195"};
+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  .PasswordField_bui-PasswordField__aa0b36a0a3 {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n\n    &[data-size='small'] {\n      --password-field-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --password-field-item-height: 2.5rem;\n    }\n  }\n\n  .PasswordField_bui-PasswordFieldInputWrapper__aa0b36a0a3 {\n    display: flex;\n    align-items: center;\n    border-radius: var(--bui-radius-2);\n    border: 1px solid var(--bui-border-2);\n    background-color: var(--bui-bg-neutral-1);\n    transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n\n    &[data-size='small'] {\n      height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      height: 2.5rem;\n    }\n\n    &:has([data-invalid]) {\n      border-color: var(--bui-fg-danger);\n    }\n\n    &:has([data-disabled]) {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n\n  .PasswordField_bui-PasswordFieldIcon__aa0b36a0a3 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    color: var(--bui-fg-primary);\n    pointer-events: none;\n    width: var(--password-field-item-height);\n    height: var(--password-field-item-height);\n\n    & svg {\n      .PasswordField_bui-PasswordField__aa0b36a0a3[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .PasswordField_bui-PasswordField__aa0b36a0a3[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n  }\n\n  .PasswordField_bui-PasswordFieldInput__aa0b36a0a3 {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0;\n    border: none;\n    background-color: transparent;\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    width: 100%;\n    height: 100%;\n    outline: none;\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-disabled] {\n      cursor: not-allowed;\n    }\n\n    &:first-child {\n      .PasswordField_bui-PasswordField__aa0b36a0a3[data-size='small'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n\n      .PasswordField_bui-PasswordField__aa0b36a0a3[data-size='medium'] & {\n        padding-inline: var(--bui-space-4) 0;\n      }\n    }\n  }\n\n  .PasswordField_bui-PasswordFieldVisibility__aa0b36a0a3 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    cursor: pointer;\n    border: none;\n    padding: 0;\n    margin: 0;\n    color: var(--bui-fg-primary);\n    width: var(--password-field-item-height);\n    height: var(--password-field-item-height);\n\n    & svg {\n      .PasswordField_bui-PasswordField__aa0b36a0a3[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .PasswordField_bui-PasswordField__aa0b36a0a3[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n  }\n}\n";
+var stylesPasswordField = {"bui-PasswordField":"PasswordField_bui-PasswordField__aa0b36a0a3","bui-PasswordFieldInputWrapper":"PasswordField_bui-PasswordFieldInputWrapper__aa0b36a0a3","bui-PasswordFieldIcon":"PasswordField_bui-PasswordFieldIcon__aa0b36a0a3","bui-PasswordFieldInput":"PasswordField_bui-PasswordFieldInput__aa0b36a0a3","bui-PasswordFieldVisibility":"PasswordField_bui-PasswordFieldVisibility__aa0b36a0a3"};
 styleInject(css_248z);
 
 export { stylesPasswordField as default };