@backstage/ui 0.12.0 → 0.13.0-next.1

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

@@ -1,13 +1,24 @@
-const CheckboxDefinition = {
+import 'react/jsx-runtime';
+import 'clsx';
+import '../../hooks/useBreakpoint.esm.js';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './Checkbox.module.css.esm.js';
+
+const CheckboxDefinition = defineComponent()({
+  styles,
   classNames: {
     root: "bui-Checkbox",
     indicator: "bui-CheckboxIndicator"
   },
-  dataAttributes: {
-    selected: [true, false],
-    indeterminate: [true, false]
+  propDefs: {
+    selected: { dataAttribute: true },
+    indeterminate: { dataAttribute: true },
+    children: {},
+    className: {}
   }
-};
+});
 
 export { CheckboxDefinition };
 //# sourceMappingURL=definition.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Checkbox/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 Checkbox\n * @public\n */\nexport const CheckboxDefinition = {\n  classNames: {\n    root: 'bui-Checkbox',\n    indicator: 'bui-CheckboxIndicator',\n  },\n  dataAttributes: {\n    selected: [true, false] as const,\n    indeterminate: [true, false] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,kBAAA,GAAqB;AAAA,EAChC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,cAAA;AAAA,IACN,SAAA,EAAW;AAAA,GACb;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,QAAA,EAAU,CAAC,IAAA,EAAM,KAAK,CAAA;AAAA,IACtB,aAAA,EAAe,CAAC,IAAA,EAAM,KAAK;AAAA;AAE/B;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Checkbox/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 { CheckboxOwnProps } from './types';\nimport styles from './Checkbox.module.css';\n\n/**\n * Component definition for Checkbox\n * @public\n */\nexport const CheckboxDefinition = defineComponent<CheckboxOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Checkbox',\n    indicator: 'bui-CheckboxIndicator',\n  },\n  propDefs: {\n    selected: { dataAttribute: true },\n    indeterminate: { dataAttribute: true },\n    children: {},\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,kBAAA,GAAqB,iBAAkC,CAAE;AAAA,EACpE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,cAAA;AAAA,IACN,SAAA,EAAW;AAAA,GACb;AAAA,EACA,QAAA,EAAU;AAAA,IACR,QAAA,EAAU,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAChC,aAAA,EAAe,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IACrC,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;;;;"}

package/dist/components/Container/Container.esm.js

@@ -1,33 +1,28 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import clsx from 'clsx';
-import { useStyles } from '../../hooks/useStyles.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
 import { ContainerDefinition } from './definition.esm.js';
-import styles from './Container.module.css.esm.js';
 
 const Container = forwardRef(
   (props, ref) => {
-    const { classNames, utilityClasses, style, cleanedProps } = useStyles(
+    const { ownProps, restProps, utilityStyle } = useDefinition(
       ContainerDefinition,
       props
     );
-    const { className, ...rest } = cleanedProps;
+    const { classes, children, style } = ownProps;
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        className: clsx(
-          classNames.root,
-          utilityClasses,
-          styles[classNames.root],
-          className
-        ),
-        style,
-        ...rest
+        className: classes.root,
+        style: { ...utilityStyle, ...style },
+        ...restProps,
+        children
       }
     );
   }
 );
+Container.displayName = "Container";
 
 export { Container };
 //# sourceMappingURL=Container.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Container.esm.js","sources":["../../../src/components/Container/Container.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 { ContainerProps } from './types';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { ContainerDefinition } from './definition';\nimport styles from './Container.module.css';\n\n/** @public */\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(\n  (props, ref) => {\n    const { classNames, utilityClasses, style, cleanedProps } = useStyles(\n      ContainerDefinition,\n      props,\n    );\n\n    const { className, ...rest } = cleanedProps;\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          classNames.root,\n          utilityClasses,\n          styles[classNames.root],\n          className,\n        )}\n        style={style}\n        {...rest}\n      />\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;AAwBO,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,KAAA,EAAO,cAAa,GAAI,SAAA;AAAA,MAC1D,mBAAA;AAAA,MACA;AAAA,KACF;AAEA,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,IAAA;AAAA,UACX,cAAA;AAAA,UACA,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,UACtB;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"Container.esm.js","sources":["../../../src/components/Container/Container.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 type { ContainerProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { ContainerDefinition } from './definition';\n\n/** @public */\nexport const Container = forwardRef<HTMLDivElement, ContainerProps>(\n  (props, ref) => {\n    const { ownProps, restProps, utilityStyle } = useDefinition(\n      ContainerDefinition,\n      props,\n    );\n    const { classes, children, style } = ownProps;\n\n    return (\n      <div\n        ref={ref}\n        className={classes.root}\n        style={{ ...utilityStyle, ...style }}\n        {...restProps}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nContainer.displayName = 'Container';\n"],"names":[],"mappings":";;;;;AAsBO,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,YAAA,EAAa,GAAI,aAAA;AAAA,MAC5C,mBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAU,KAAA,EAAM,GAAI,QAAA;AAErC,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAW,OAAA,CAAQ,IAAA;AAAA,QACnB,KAAA,EAAO,EAAE,GAAG,YAAA,EAAc,GAAG,KAAA,EAAM;AAAA,QAClC,GAAG,SAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;;;;"}

package/dist/components/Container/Container.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  .Container_bui-Container__10ae690c55 {\n    max-width: 120rem;\n    padding-inline: var(--bui-space-4);\n    margin-inline: auto;\n    transition: padding 0.2s ease-in-out;\n  }\n\n  @media (min-width: 640px) {\n    .Container_bui-Container__10ae690c55 {\n      padding-inline: var(--bui-space-5);\n    }\n  }\n}\n";
-var styles = {"bui-Container":"Container_bui-Container__10ae690c55"};
+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  .Container_bui-Container__6b0c367fdf {\n    max-width: 120rem;\n    padding-inline: var(--bui-space-4);\n    margin-inline: auto;\n    padding-bottom: var(--bui-space-8);\n  }\n\n  @media (min-width: 640px) {\n    .Container_bui-Container__6b0c367fdf {\n      padding-inline: var(--bui-space-5);\n    }\n  }\n}\n";
+var styles = {"bui-Container":"Container_bui-Container__6b0c367fdf"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -1,9 +1,23 @@
-const ContainerDefinition = {
+import 'react/jsx-runtime';
+import 'clsx';
+import '../../hooks/useBreakpoint.esm.js';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './Container.module.css.esm.js';
+
+const ContainerDefinition = defineComponent()({
+  styles,
   classNames: {
     root: "bui-Container"
   },
+  propDefs: {
+    children: {},
+    className: {},
+    style: {}
+  },
   utilityProps: ["my", "mt", "mb", "py", "pt", "pb", "display"]
-};
+});
 
 export { ContainerDefinition };
 //# sourceMappingURL=definition.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Container/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 Container\n * @public\n */\nexport const ContainerDefinition = {\n  classNames: {\n    root: 'bui-Container',\n  },\n  utilityProps: ['my', 'mt', 'mb', 'py', 'pt', 'pb', 'display'],\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,mBAAA,GAAsB;AAAA,EACjC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc,CAAC,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,SAAS;AAC9D;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Container/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 { ContainerOwnProps } from './types';\nimport styles from './Container.module.css';\n\n/**\n * Component definition for Container\n * @public\n */\nexport const ContainerDefinition = defineComponent<ContainerOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Container',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n    style: {},\n  },\n  utilityProps: ['my', 'mt', 'mb', 'py', 'pt', 'pb', 'display'],\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,mBAAA,GAAsB,iBAAmC,CAAE;AAAA,EACtE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC,GACV;AAAA,EACA,YAAA,EAAc,CAAC,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,SAAS;AAC9D,CAAC;;;;"}

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

@@ -1,46 +1,44 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Modal, Dialog as Dialog$1, Heading, DialogTrigger as DialogTrigger$1 } from 'react-aria-components';
-import clsx from 'clsx';
 import { RiCloseLine } from '@remixicon/react';
 import { Button } from '../Button/Button.esm.js';
-import '../../hooks/useBg.esm.js';
-import '../../hooks/useDefinition/helpers.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
 import '../Button/Button.module.css.esm.js';
-import { useStyles } from '../../hooks/useStyles.esm.js';
-import { DialogDefinition } from './definition.esm.js';
+import { DialogDefinition, DialogHeaderDefinition, DialogBodyDefinition, DialogFooterDefinition } from './definition.esm.js';
+import { Box } from '../Box/Box.esm.js';
+import '../Box/Box.module.css.esm.js';
+import { BgReset } from '../../hooks/useBg.esm.js';
 import { Flex } from '../Flex/Flex.esm.js';
-import styles from './Dialog.module.css.esm.js';
+import '../Flex/Flex.module.css.esm.js';
 
 const DialogTrigger = (props) => {
   return /* @__PURE__ */ jsx(DialogTrigger$1, { ...props });
 };
 const Dialog = forwardRef(
   (props, ref) => {
-    const { classNames, cleanedProps } = useStyles(DialogDefinition, props);
-    const { className, children, width, height, style, ...rest } = cleanedProps;
+    const { ownProps, restProps } = useDefinition(DialogDefinition, props, {
+      classNameTarget: "dialog"
+    });
+    const { classes, children, width, height, style } = ownProps;
     return /* @__PURE__ */ jsx(
       Modal,
       {
         ref,
-        className: clsx(classNames.overlay, styles[classNames.overlay]),
+        className: classes.root,
         isDismissable: true,
         isKeyboardDismissDisabled: false,
-        ...rest,
+        ...restProps,
         children: /* @__PURE__ */ jsx(
           Dialog$1,
           {
-            className: clsx(
-              classNames.dialog,
-              styles[classNames.dialog],
-              className
-            ),
+            className: classes.dialog,
             style: {
               ["--bui-dialog-min-width"]: typeof width === "number" ? `${width}px` : width || "400px",
               ["--bui-dialog-min-height"]: height ? typeof height === "number" ? `${height}px` : height : "auto",
               ...style
             },
-            children
+            children: /* @__PURE__ */ jsx(BgReset, { children: /* @__PURE__ */ jsx(Box, { bg: "neutral", className: classes.content, children }) })
           }
         )
       }
@@ -49,57 +47,26 @@ const Dialog = forwardRef(
 );
 Dialog.displayName = "Dialog";
 const DialogHeader = forwardRef((props, ref) => {
-  const { classNames, cleanedProps } = useStyles(DialogDefinition, props);
-  const { className, children, ...rest } = cleanedProps;
-  return /* @__PURE__ */ jsxs(
-    Flex,
-    {
-      ref,
-      className: clsx(classNames.header, styles[classNames.header], className),
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx(
-          Heading,
-          {
-            slot: "title",
-            className: clsx(classNames.headerTitle, styles[classNames.headerTitle]),
-            children
-          }
-        ),
-        /* @__PURE__ */ jsx(Button, { name: "close", "aria-label": "Close", variant: "tertiary", slot: "close", children: /* @__PURE__ */ jsx(RiCloseLine, {}) })
-      ]
-    }
-  );
+  const { ownProps, restProps } = useDefinition(DialogHeaderDefinition, props);
+  const { classes, children } = ownProps;
+  return /* @__PURE__ */ jsxs(Flex, { ref, className: classes.root, ...restProps, children: [
+    /* @__PURE__ */ jsx(Heading, { slot: "title", className: classes.title, children }),
+    /* @__PURE__ */ jsx(Button, { name: "close", "aria-label": "Close", variant: "tertiary", slot: "close", children: /* @__PURE__ */ jsx(RiCloseLine, {}) })
+  ] });
 });
 DialogHeader.displayName = "DialogHeader";
 const DialogBody = forwardRef(
   (props, ref) => {
-    const { classNames, cleanedProps } = useStyles(DialogDefinition, props);
-    const { className, children, ...rest } = cleanedProps;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: clsx(classNames.body, styles[classNames.body], className),
-        ref,
-        ...rest,
-        children
-      }
-    );
+    const { ownProps, restProps } = useDefinition(DialogBodyDefinition, props);
+    const { classes, children } = ownProps;
+    return /* @__PURE__ */ jsx("div", { className: classes.root, ref, ...restProps, children });
   }
 );
 DialogBody.displayName = "DialogBody";
 const DialogFooter = forwardRef((props, ref) => {
-  const { classNames, cleanedProps } = useStyles(DialogDefinition, props);
-  const { className, children, ...rest } = cleanedProps;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: clsx(classNames.footer, styles[classNames.footer], className),
-      ...rest,
-      children
-    }
-  );
+  const { ownProps, restProps } = useDefinition(DialogFooterDefinition, props);
+  const { classes, children } = ownProps;
+  return /* @__PURE__ */ jsx("div", { ref, className: classes.root, ...restProps, children });
 });
 DialogFooter.displayName = "DialogFooter";
 

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.esm.js","sources":["../../../src/components/Dialog/Dialog.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 {\n  Dialog as RADialog,\n  DialogTrigger as RADialogTrigger,\n  Modal,\n  Heading,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport type {\n  DialogTriggerProps,\n  DialogHeaderProps,\n  DialogProps,\n  DialogBodyProps,\n} from './types';\nimport { RiCloseLine } from '@remixicon/react';\nimport { Button } from '../Button';\nimport { useStyles } from '../../hooks/useStyles';\nimport { DialogDefinition } from './definition';\nimport { Flex } from '../Flex';\nimport styles from './Dialog.module.css';\n\n/** @public */\nexport const DialogTrigger = (props: DialogTriggerProps) => {\n  return <RADialogTrigger {...props} />;\n};\n\n/** @public */\nexport const Dialog = forwardRef<React.ElementRef<typeof Modal>, DialogProps>(\n  (props, ref) => {\n    const { classNames, cleanedProps } = useStyles(DialogDefinition, props);\n    const { className, children, width, height, style, ...rest } = cleanedProps;\n\n    return (\n      <Modal\n        ref={ref}\n        className={clsx(classNames.overlay, styles[classNames.overlay])}\n        isDismissable\n        isKeyboardDismissDisabled={false}\n        {...rest}\n      >\n        <RADialog\n          className={clsx(\n            classNames.dialog,\n            styles[classNames.dialog],\n            className,\n          )}\n          style={{\n            ['--bui-dialog-min-width' as keyof React.CSSProperties]:\n              typeof width === 'number' ? `${width}px` : width || '400px',\n            ['--bui-dialog-min-height' as keyof React.CSSProperties]: height\n              ? typeof height === 'number'\n                ? `${height}px`\n                : height\n              : 'auto',\n            ...style,\n          }}\n        >\n          {children}\n        </RADialog>\n      </Modal>\n    );\n  },\n);\n\nDialog.displayName = 'Dialog';\n\n/** @public */\nexport const DialogHeader = forwardRef<\n  React.ElementRef<'div'>,\n  DialogHeaderProps\n>((props, ref) => {\n  const { classNames, cleanedProps } = useStyles(DialogDefinition, props);\n  const { className, children, ...rest } = cleanedProps;\n\n  return (\n    <Flex\n      ref={ref}\n      className={clsx(classNames.header, styles[classNames.header], className)}\n      {...rest}\n    >\n      <Heading\n        slot=\"title\"\n        className={clsx(classNames.headerTitle, styles[classNames.headerTitle])}\n      >\n        {children}\n      </Heading>\n      <Button name=\"close\" aria-label=\"Close\" variant=\"tertiary\" slot=\"close\">\n        <RiCloseLine />\n      </Button>\n    </Flex>\n  );\n});\nDialogHeader.displayName = 'DialogHeader';\n\n/** @public */\nexport const DialogBody = forwardRef<React.ElementRef<'div'>, DialogBodyProps>(\n  (props, ref) => {\n    const { classNames, cleanedProps } = useStyles(DialogDefinition, props);\n    const { className, children, ...rest } = cleanedProps;\n\n    return (\n      <div\n        className={clsx(classNames.body, styles[classNames.body], className)}\n        ref={ref}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nDialogBody.displayName = 'DialogBody';\n\n/** @public */\nexport const DialogFooter = forwardRef<\n  React.ElementRef<'div'>,\n  React.ComponentPropsWithoutRef<'div'>\n>((props, ref) => {\n  const { classNames, cleanedProps } = useStyles(DialogDefinition, props);\n  const { className, children, ...rest } = cleanedProps;\n\n  return (\n    <div\n      ref={ref}\n      className={clsx(classNames.footer, styles[classNames.footer], className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\nDialogFooter.displayName = 'DialogFooter';\n"],"names":["RADialogTrigger","RADialog"],"mappings":"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"}
+{"version":3,"file":"Dialog.esm.js","sources":["../../../src/components/Dialog/Dialog.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 {\n  Dialog as RADialog,\n  DialogTrigger as RADialogTrigger,\n  Modal,\n  Heading,\n} from 'react-aria-components';\nimport type {\n  DialogTriggerProps,\n  DialogHeaderProps,\n  DialogProps,\n  DialogBodyProps,\n  DialogFooterProps,\n} from './types';\nimport { RiCloseLine } from '@remixicon/react';\nimport { Button } from '../Button';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n  DialogDefinition,\n  DialogHeaderDefinition,\n  DialogBodyDefinition,\n  DialogFooterDefinition,\n} from './definition';\nimport { Box } from '../Box';\nimport { BgReset } from '../../hooks/useBg';\nimport { Flex } from '../Flex';\n\n/** @public */\nexport const DialogTrigger = (props: DialogTriggerProps) => {\n  return <RADialogTrigger {...props} />;\n};\n\n/** @public */\nexport const Dialog = forwardRef<React.ElementRef<typeof Modal>, DialogProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(DialogDefinition, props, {\n      classNameTarget: 'dialog',\n    });\n    const { classes, children, width, height, style } = ownProps;\n\n    return (\n      <Modal\n        ref={ref}\n        className={classes.root}\n        isDismissable\n        isKeyboardDismissDisabled={false}\n        {...restProps}\n      >\n        <RADialog\n          className={classes.dialog}\n          style={{\n            ['--bui-dialog-min-width' as keyof React.CSSProperties]:\n              typeof width === 'number' ? `${width}px` : width || '400px',\n            ['--bui-dialog-min-height' as keyof React.CSSProperties]: height\n              ? typeof height === 'number'\n                ? `${height}px`\n                : height\n              : 'auto',\n            ...style,\n          }}\n        >\n          <BgReset>\n            <Box bg=\"neutral\" className={classes.content}>\n              {children}\n            </Box>\n          </BgReset>\n        </RADialog>\n      </Modal>\n    );\n  },\n);\n\nDialog.displayName = 'Dialog';\n\n/** @public */\nexport const DialogHeader = forwardRef<\n  React.ElementRef<'div'>,\n  DialogHeaderProps\n>((props, ref) => {\n  const { ownProps, restProps } = useDefinition(DialogHeaderDefinition, props);\n  const { classes, children } = ownProps;\n\n  return (\n    <Flex ref={ref} className={classes.root} {...restProps}>\n      <Heading slot=\"title\" className={classes.title}>\n        {children}\n      </Heading>\n      <Button name=\"close\" aria-label=\"Close\" variant=\"tertiary\" slot=\"close\">\n        <RiCloseLine />\n      </Button>\n    </Flex>\n  );\n});\nDialogHeader.displayName = 'DialogHeader';\n\n/** @public */\nexport const DialogBody = forwardRef<React.ElementRef<'div'>, DialogBodyProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(DialogBodyDefinition, props);\n    const { classes, children } = ownProps;\n\n    return (\n      <div className={classes.root} ref={ref} {...restProps}>\n        {children}\n      </div>\n    );\n  },\n);\n\nDialogBody.displayName = 'DialogBody';\n\n/** @public */\nexport const DialogFooter = forwardRef<\n  React.ElementRef<'div'>,\n  DialogFooterProps\n>((props, ref) => {\n  const { ownProps, restProps } = useDefinition(DialogFooterDefinition, props);\n  const { classes, children } = ownProps;\n\n  return (\n    <div ref={ref} className={classes.root} {...restProps}>\n      {children}\n    </div>\n  );\n});\nDialogFooter.displayName = 'DialogFooter';\n"],"names":["RADialogTrigger","RADialog"],"mappings":"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"}

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__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"};
+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__dedd12875c {\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__dedd12875c {\n    background: rgba(0, 0, 0, 0.5);\n  }\n\n  .Dialog_bui-DialogOverlay__dedd12875c[data-entering] {\n    animation: Dialog_fade-in__dedd12875c 200ms ease-out forwards;\n  }\n\n  .Dialog_bui-DialogOverlay__dedd12875c[data-exiting] {\n    animation: Dialog_fade-out__dedd12875c 150ms ease-out forwards;\n  }\n\n  .Dialog_bui-Dialog__dedd12875c {\n    --dialog-border-radius: 0.5rem;\n    background: var(--bui-bg-app);\n    box-shadow: var(--bui-shadow);\n    border-radius: var(--dialog-border-radius);\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    outline: none;\n  }\n\n  .Dialog_bui-DialogContent__dedd12875c {\n    display: flex;\n    flex-direction: column;\n    border-radius: var(--dialog-border-radius);\n    height: 100%;\n  }\n\n  /* Dialog entering animation */\n  .Dialog_bui-DialogOverlay__dedd12875c[data-entering] .Dialog_bui-Dialog__dedd12875c {\n    animation: Dialog_dialog-enter__dedd12875c 150ms ease-out forwards;\n  }\n\n  /* Dialog exiting animation */\n  .Dialog_bui-DialogOverlay__dedd12875c[data-exiting] .Dialog_bui-Dialog__dedd12875c {\n    animation: Dialog_dialog-exit__dedd12875c 150ms ease-out forwards;\n  }\n\n  .Dialog_bui-DialogHeader__dedd12875c {\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__dedd12875c {\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__dedd12875c {\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__dedd12875c {\n    padding: var(--bui-space-3);\n    flex: 1;\n    overflow-y: auto;\n  }\n\n  /* Keyframe animations */\n  @keyframes Dialog_fade-in__dedd12875c {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes Dialog_fade-out__dedd12875c {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  @keyframes Dialog_dialog-enter__dedd12875c {\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__dedd12875c {\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__dedd12875c","bui-Dialog":"Dialog_bui-Dialog__dedd12875c","fade-in":"Dialog_fade-in__dedd12875c","fade-out":"Dialog_fade-out__dedd12875c","bui-DialogContent":"Dialog_bui-DialogContent__dedd12875c","dialog-enter":"Dialog_dialog-enter__dedd12875c","dialog-exit":"Dialog_dialog-exit__dedd12875c","bui-DialogHeader":"Dialog_bui-DialogHeader__dedd12875c","bui-DialogHeaderTitle":"Dialog_bui-DialogHeaderTitle__dedd12875c","bui-DialogFooter":"Dialog_bui-DialogFooter__dedd12875c","bui-DialogBody":"Dialog_bui-DialogBody__dedd12875c"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -1,13 +1,57 @@
-const DialogDefinition = {
+import 'react/jsx-runtime';
+import 'clsx';
+import '../../hooks/useBreakpoint.esm.js';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './Dialog.module.css.esm.js';
+
+const DialogDefinition = defineComponent()({
+  styles,
   classNames: {
-    overlay: "bui-DialogOverlay",
+    root: "bui-DialogOverlay",
     dialog: "bui-Dialog",
-    header: "bui-DialogHeader",
-    headerTitle: "bui-DialogHeaderTitle",
-    body: "bui-DialogBody",
-    footer: "bui-DialogFooter"
+    content: "bui-DialogContent"
+  },
+  propDefs: {
+    children: {},
+    className: {},
+    width: {},
+    height: {},
+    style: {}
+  }
+});
+const DialogHeaderDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-DialogHeader",
+    title: "bui-DialogHeaderTitle"
+  },
+  propDefs: {
+    children: {},
+    className: {}
+  }
+});
+const DialogBodyDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-DialogBody"
+  },
+  propDefs: {
+    children: {},
+    className: {}
+  }
+});
+const DialogFooterDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-DialogFooter"
+  },
+  propDefs: {
+    children: {},
+    className: {}
   }
-};
+});
 
-export { DialogDefinition };
+export { DialogBodyDefinition, DialogDefinition, DialogFooterDefinition, DialogHeaderDefinition };
 //# sourceMappingURL=definition.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Dialog/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 Dialog\n * @public\n */\nexport const DialogDefinition = {\n  classNames: {\n    overlay: 'bui-DialogOverlay',\n    dialog: 'bui-Dialog',\n    header: 'bui-DialogHeader',\n    headerTitle: 'bui-DialogHeaderTitle',\n    body: 'bui-DialogBody',\n    footer: 'bui-DialogFooter',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,gBAAA,GAAmB;AAAA,EAC9B,UAAA,EAAY;AAAA,IACV,OAAA,EAAS,mBAAA;AAAA,IACT,MAAA,EAAQ,YAAA;AAAA,IACR,MAAA,EAAQ,kBAAA;AAAA,IACR,WAAA,EAAa,uBAAA;AAAA,IACb,IAAA,EAAM,gBAAA;AAAA,IACN,MAAA,EAAQ;AAAA;AAEZ;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Dialog/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  DialogOwnProps,\n  DialogHeaderOwnProps,\n  DialogBodyOwnProps,\n  DialogFooterOwnProps,\n} from './types';\nimport styles from './Dialog.module.css';\n\n/**\n * Component definition for Dialog\n * @public\n */\nexport const DialogDefinition = defineComponent<DialogOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-DialogOverlay',\n    dialog: 'bui-Dialog',\n    content: 'bui-DialogContent',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n    width: {},\n    height: {},\n    style: {},\n  },\n});\n\n/**\n * Component definition for DialogHeader\n * @public\n */\nexport const DialogHeaderDefinition = defineComponent<DialogHeaderOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-DialogHeader',\n    title: 'bui-DialogHeaderTitle',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n  },\n});\n\n/**\n * Component definition for DialogBody\n * @public\n */\nexport const DialogBodyDefinition = defineComponent<DialogBodyOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-DialogBody',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n  },\n});\n\n/**\n * Component definition for DialogFooter\n * @public\n */\nexport const DialogFooterDefinition = defineComponent<DialogFooterOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-DialogFooter',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AA6BO,MAAM,gBAAA,GAAmB,iBAAgC,CAAE;AAAA,EAChE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,mBAAA;AAAA,IACN,MAAA,EAAQ,YAAA;AAAA,IACR,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,OAAO,EAAC;AAAA,IACR,QAAQ,EAAC;AAAA,IACT,OAAO;AAAC;AAEZ,CAAC;AAMM,MAAM,sBAAA,GAAyB,iBAAsC,CAAE;AAAA,EAC5E,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,kBAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACT;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,sBAAA,GAAyB,iBAAsC,CAAE;AAAA,EAC5E,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/FieldError/FieldError.esm.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"FieldError.esm.js","sources":["../../../src/components/FieldError/FieldError.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 {\n  FieldError as AriaFieldError,\n  type FieldErrorProps,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport styles from './FieldError.module.css';\nimport { useStyles } from '../../hooks/useStyles';\nimport { FieldErrorDefinition } from './definition';\n\n/** @public */\nexport const FieldError = forwardRef<HTMLDivElement, FieldErrorProps>(\n  (props: FieldErrorProps, ref) => {\n    const { classNames, cleanedProps } = useStyles(FieldErrorDefinition, props);\n    const { className, ...rest } = cleanedProps;\n\n    return (\n      <AriaFieldError\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        ref={ref}\n        {...rest}\n      />\n    );\n  },\n);\n\nFieldError.displayName = 'FieldError';\n"],"names":["AriaFieldError"],"mappings":";;;;;;;;AA2BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAQ;AAC/B,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,sBAAsB,KAAK,CAAA;AAC1E,IAAA,MAAM,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,GAAI,YAAA;AAE/B,IAAA,uBACE,GAAA;AAAA,MAACA,YAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QACnE,GAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
+{"version":3,"file":"FieldError.esm.js","sources":["../../../src/components/FieldError/FieldError.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 { FieldError as AriaFieldError } from 'react-aria-components';\nimport type { FieldErrorProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { FieldErrorDefinition } from './definition';\n\n/** @public */\nexport const FieldError = forwardRef<HTMLDivElement, FieldErrorProps>(\n  (props: FieldErrorProps, ref) => {\n    const { ownProps, restProps } = useDefinition(FieldErrorDefinition, props);\n    const { classes } = ownProps;\n\n    return <AriaFieldError className={classes.root} ref={ref} {...restProps} />;\n  },\n);\n\nFieldError.displayName = 'FieldError';\n"],"names":["AriaFieldError"],"mappings":";;;;;;AAuBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAQ;AAC/B,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,sBAAsB,KAAK,CAAA;AACzE,IAAA,MAAM,EAAE,SAAQ,GAAI,QAAA;AAEpB,IAAA,2BAAQA,YAAA,EAAA,EAAe,SAAA,EAAW,QAAQ,IAAA,EAAM,GAAA,EAAW,GAAG,SAAA,EAAW,CAAA;AAAA,EAC3E;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}

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

@@ -1,8 +1,20 @@
-const FieldErrorDefinition = {
+import 'react/jsx-runtime';
+import 'clsx';
+import '../../hooks/useBreakpoint.esm.js';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './FieldError.module.css.esm.js';
+
+const FieldErrorDefinition = defineComponent()({
+  styles,
   classNames: {
     root: "bui-FieldError"
+  },
+  propDefs: {
+    className: {}
   }
-};
+});
 
 export { FieldErrorDefinition };
 //# sourceMappingURL=definition.esm.js.map

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

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

package/dist/components/FieldLabel/FieldLabel.esm.js

@@ -1,70 +1,25 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Label } from 'react-aria-components';
 import { forwardRef } from 'react';
-import { useStyles } from '../../hooks/useStyles.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
 import { FieldLabelDefinition } from './definition.esm.js';
-import styles from './FieldLabel.module.css.esm.js';
-import clsx from 'clsx';
 
 const FieldLabel = forwardRef(
   (props, ref) => {
-    const { classNames, cleanedProps } = useStyles(FieldLabelDefinition, props);
-    const {
-      className,
-      label,
-      secondaryLabel,
-      description,
-      htmlFor,
-      id,
-      ...rest
-    } = cleanedProps;
+    const { ownProps, restProps } = useDefinition(FieldLabelDefinition, props);
+    const { classes, label, secondaryLabel, description, htmlFor, id } = ownProps;
     if (!label) return null;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: clsx(classNames.root, styles[classNames.root], className),
-        ...rest,
-        ref,
-        children: [
-          label && /* @__PURE__ */ jsxs(
-            Label,
-            {
-              className: clsx(classNames.label, styles[classNames.label]),
-              htmlFor,
-              id,
-              children: [
-                label,
-                secondaryLabel && /* @__PURE__ */ jsxs(
-                  "span",
-                  {
-                    "aria-hidden": "true",
-                    className: clsx(
-                      classNames.secondaryLabel,
-                      styles[classNames.secondaryLabel]
-                    ),
-                    children: [
-                      "(",
-                      secondaryLabel,
-                      ")"
-                    ]
-                  }
-                )
-              ]
-            }
-          ),
-          description && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: clsx(
-                classNames.description,
-                styles[classNames.description]
-              ),
-              children: description
-            }
-          )
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxs("div", { className: classes.root, ...restProps, ref, children: [
+      label && /* @__PURE__ */ jsxs(Label, { className: classes.label, htmlFor, id, children: [
+        label,
+        secondaryLabel && /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: classes.secondaryLabel, children: [
+          "(",
+          secondaryLabel,
+          ")"
+        ] })
+      ] }),
+      description && /* @__PURE__ */ jsx("div", { className: classes.description, children: description })
+    ] });
   }
 );
 FieldLabel.displayName = "FieldLabel";