@backstage/ui 0.12.1-next.0 → 0.13.0-next.2

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.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, Ref } from 'react';\nimport { Link as RALink } from 'react-aria-components';\nimport type { ButtonLinkProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { ButtonLinkDefinition } from './definition';\nimport { InternalLinkProvider } from '../InternalLinkProvider';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n  (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      ButtonLinkDefinition,\n      props,\n    );\n    const { classes, iconStart, iconEnd, children } = ownProps;\n\n    return (\n      <InternalLinkProvider href={restProps.href}>\n        <RALink\n          className={classes.root}\n          ref={ref}\n          {...dataAttributes}\n          {...restProps}\n        >\n          <span className={classes.content}>\n            {iconStart}\n            {children}\n            {iconEnd}\n          </span>\n        </RALink>\n      </InternalLinkProvider>\n    );\n  },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;;AAwBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,oBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,OAAA,EAAS,UAAS,GAAI,QAAA;AAElD,IAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,IAAA,EAAM,SAAA,CAAU,IAAA,EACpC,QAAA,kBAAA,GAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,IAAA;AAAA,QACnB,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QAEJ,QAAA,kBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAA,CAAQ,OAAA,EACtB,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA,SAAA,EACH;AAAA;AAAA,KACF,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
+{"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.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, Ref } from 'react';\nimport { Link as RALink } from 'react-aria-components';\nimport type { ButtonLinkProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { ButtonLinkDefinition } from './definition';\nimport { InternalLinkProvider } from '../InternalLinkProvider';\nimport { getNodeText } from '../../analytics/getNodeText';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n  (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n    const { ownProps, restProps, dataAttributes, analytics } = useDefinition(\n      ButtonLinkDefinition,\n      props,\n    );\n    const { classes, iconStart, iconEnd, children } = ownProps;\n\n    const handlePress: typeof restProps.onPress = e => {\n      restProps.onPress?.(e);\n      const text =\n        restProps['aria-label'] ??\n        getNodeText(children) ??\n        String(restProps.href ?? '');\n      analytics.captureEvent('click', text, {\n        attributes: { to: String(restProps.href ?? '') },\n      });\n    };\n\n    return (\n      <InternalLinkProvider href={restProps.href}>\n        <RALink\n          className={classes.root}\n          ref={ref}\n          {...dataAttributes}\n          {...restProps}\n          onPress={handlePress}\n        >\n          <span className={classes.content}>\n            {iconStart}\n            {children}\n            {iconEnd}\n          </span>\n        </RALink>\n      </InternalLinkProvider>\n    );\n  },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;;;AAyBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAgB,WAAU,GAAI,aAAA;AAAA,MACzD,oBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,SAAA,EAAW,OAAA,EAAS,UAAS,GAAI,QAAA;AAElD,IAAA,MAAM,cAAwC,CAAA,CAAA,KAAK;AACjD,MAAA,SAAA,CAAU,UAAU,CAAC,CAAA;AACrB,MAAA,MAAM,IAAA,GACJ,SAAA,CAAU,YAAY,CAAA,IACtB,WAAA,CAAY,QAAQ,CAAA,IACpB,MAAA,CAAO,SAAA,CAAU,IAAA,IAAQ,EAAE,CAAA;AAC7B,MAAA,SAAA,CAAU,YAAA,CAAa,SAAS,IAAA,EAAM;AAAA,QACpC,YAAY,EAAE,EAAA,EAAI,OAAO,SAAA,CAAU,IAAA,IAAQ,EAAE,CAAA;AAAE,OAChD,CAAA;AAAA,IACH,CAAA;AAEA,IAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,IAAA,EAAM,SAAA,CAAU,IAAA,EACpC,QAAA,kBAAA,GAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,IAAA;AAAA,QACnB,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QACJ,OAAA,EAAS,WAAA;AAAA,QAET,QAAA,kBAAA,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,OAAA,CAAQ,OAAA,EACtB,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA,SAAA,EACH;AAAA;AAAA,KACF,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}

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

@@ -1,8 +1,9 @@
 import 'react/jsx-runtime';
 import 'clsx';
-import 'react';
+import '../../hooks/useBreakpoint.esm.js';
 import '../../hooks/useBg.esm.js';
 import '../../hooks/useDefinition/helpers.esm.js';
+import '../../analytics/useAnalytics.esm.js';
 import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
 import styles from './ButtonLink.module.css.esm.js';
 
@@ -13,14 +14,15 @@ const ButtonLinkDefinition = defineComponent()({
     content: "bui-ButtonLinkContent"
   },
   bg: "consumer",
+  analytics: true,
   propDefs: {
+    noTrack: {},
     size: { dataAttribute: true, default: "small" },
     variant: { dataAttribute: true, default: "primary" },
     iconStart: {},
     iconEnd: {},
     children: {},
-    className: {},
-    style: {}
+    className: {}
   }
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ButtonLink/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 { ButtonLinkOwnProps } from './types';\nimport styles from './ButtonLink.module.css';\n\n/**\n * Component definition for ButtonLink\n * @public\n */\nexport const ButtonLinkDefinition = defineComponent<ButtonLinkOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-ButtonLink',\n    content: 'bui-ButtonLinkContent',\n  },\n  bg: 'consumer',\n  propDefs: {\n    size: { dataAttribute: true, default: 'small' },\n    variant: { dataAttribute: true, default: 'primary' },\n    iconStart: {},\n    iconEnd: {},\n    children: {},\n    className: {},\n    style: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,oBAAA,GAAuB,iBAAoC,CAAE;AAAA,EACxE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,gBAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,SAAA,EAAU;AAAA,IACnD,WAAW,EAAC;AAAA,IACZ,SAAS,EAAC;AAAA,IACV,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC;AAEZ,CAAC;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/ButtonLink/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 { ButtonLinkOwnProps } from './types';\nimport styles from './ButtonLink.module.css';\n\n/**\n * Component definition for ButtonLink\n * @public\n */\nexport const ButtonLinkDefinition = defineComponent<ButtonLinkOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-ButtonLink',\n    content: 'bui-ButtonLinkContent',\n  },\n  bg: 'consumer',\n  analytics: true,\n  propDefs: {\n    noTrack: {},\n    size: { dataAttribute: true, default: 'small' },\n    variant: { dataAttribute: true, default: 'primary' },\n    iconStart: {},\n    iconEnd: {},\n    children: {},\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;;AAwBO,MAAM,oBAAA,GAAuB,iBAAoC,CAAE;AAAA,EACxE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,gBAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,SAAA,EAAW,IAAA;AAAA,EACX,QAAA,EAAU;AAAA,IACR,SAAS,EAAC;AAAA,IACV,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,OAAA,EAAS,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,SAAA,EAAU;AAAA,IACnD,WAAW,EAAC;AAAA,IACZ,SAAS,EAAC;AAAA,IACV,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;;;;"}

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

@@ -1,24 +1,85 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useCallback } from 'react';
+import { Button } from 'react-aria-components';
 import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
 import { CardDefinition, CardHeaderDefinition, CardBodyDefinition, CardFooterDefinition } from './definition.esm.js';
 import { Box } from '../Box/Box.esm.js';
+import { Link } from '../Link/Link.esm.js';
+import '../Link/Link.module.css.esm.js';
 
+const INTERACTIVE_ELEMENT_SELECTOR = 'a[href],button,input,select,textarea,[role="button"],[role="link"],[tabindex]:not([tabindex="-1"])';
 const Card = forwardRef((props, ref) => {
   const { ownProps, restProps, dataAttributes } = useDefinition(
     CardDefinition,
     props
   );
-  const { classes, children } = ownProps;
-  return /* @__PURE__ */ jsx(
+  const {
+    classes,
+    children,
+    onPress,
+    href,
+    label,
+    target: linkTarget,
+    rel,
+    download
+  } = ownProps;
+  const isInteractive = !!(onPress || href);
+  const triggerRef = useRef(null);
+  const handleClick = useCallback(
+    (e) => {
+      if (!isInteractive || !triggerRef.current) return;
+      if (triggerRef.current.contains(e.target)) return;
+      const targetNode = e.target;
+      const targetElement = targetNode instanceof Element ? targetNode : targetNode?.parentElement;
+      if (targetElement?.closest(INTERACTIVE_ELEMENT_SELECTOR)) return;
+      if (window.getSelection()?.toString()) return;
+      triggerRef.current.dispatchEvent(
+        new MouseEvent("click", {
+          bubbles: false,
+          cancelable: true,
+          ctrlKey: e.ctrlKey,
+          metaKey: e.metaKey,
+          shiftKey: e.shiftKey
+        })
+      );
+    },
+    [isInteractive]
+  );
+  return /* @__PURE__ */ jsxs(
     Box,
     {
-      bg: "neutral-auto",
+      as: "article",
+      bg: "neutral",
       ref,
       className: classes.root,
+      "data-interactive": isInteractive || void 0,
       ...dataAttributes,
       ...restProps,
-      children
+      onClick: isInteractive ? handleClick : void 0,
+      children: [
+        href && /* @__PURE__ */ jsx(
+          Link,
+          {
+            ref: triggerRef,
+            className: classes.trigger,
+            href,
+            target: linkTarget,
+            rel,
+            download,
+            "aria-label": label
+          }
+        ),
+        onPress && !href && /* @__PURE__ */ jsx(
+          Button,
+          {
+            ref: triggerRef,
+            className: classes.trigger,
+            onPress,
+            "aria-label": label
+          }
+        ),
+        children
+      ]
     }
   );
 });

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 { 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;;;;"}
+{"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, useCallback, useRef } from 'react';\nimport { Button as RAButton } from 'react-aria-components';\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';\nimport { Link } from '../Link';\n\nconst INTERACTIVE_ELEMENT_SELECTOR =\n  'a[href],button,input,select,textarea,[role=\"button\"],[role=\"link\"],[tabindex]:not([tabindex=\"-1\"])';\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 {\n    classes,\n    children,\n    onPress,\n    href,\n    label,\n    target: linkTarget,\n    rel,\n    download,\n  } = ownProps;\n  const isInteractive = !!(onPress || href);\n\n  const triggerRef = useRef<HTMLAnchorElement | HTMLButtonElement>(null);\n\n  const handleClick = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!isInteractive || !triggerRef.current) return;\n\n      // Don't delegate if the click target is the trigger itself\n      if (triggerRef.current.contains(e.target as Node)) return;\n\n      // Don't delegate if the user clicked a nested interactive element\n      const targetNode = e.target as Node | null;\n      const targetElement =\n        targetNode instanceof Element ? targetNode : targetNode?.parentElement;\n      if (targetElement?.closest(INTERACTIVE_ELEMENT_SELECTOR)) return;\n\n      // Don't delegate if the user is selecting text\n      if (window.getSelection()?.toString()) return;\n\n      triggerRef.current.dispatchEvent(\n        new MouseEvent('click', {\n          bubbles: false,\n          cancelable: true,\n          ctrlKey: e.ctrlKey,\n          metaKey: e.metaKey,\n          shiftKey: e.shiftKey,\n        }),\n      );\n    },\n    [isInteractive],\n  );\n\n  return (\n    <Box\n      as=\"article\"\n      bg=\"neutral\"\n      ref={ref}\n      className={classes.root}\n      data-interactive={isInteractive || undefined}\n      {...dataAttributes}\n      {...restProps}\n      onClick={isInteractive ? handleClick : undefined}\n    >\n      {href && (\n        <Link\n          ref={triggerRef as React.Ref<HTMLAnchorElement>}\n          className={classes.trigger}\n          href={href}\n          target={linkTarget}\n          rel={rel}\n          download={download}\n          aria-label={label}\n        />\n      )}\n      {onPress && !href && (\n        <RAButton\n          ref={triggerRef as React.Ref<HTMLButtonElement>}\n          className={classes.trigger}\n          onPress={onPress}\n          aria-label={label}\n        />\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":["RAButton"],"mappings":"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"}

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__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"};
+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__a35e7cb59d {\n    display: flex;\n    flex-direction: column;\n    border-radius: var(--bui-radius-3);\n    color: var(--bui-fg-primary);\n    overflow: auto;\n    min-height: 0;\n    width: 100%;\n    position: relative;\n    padding: var(--bui-space-3);\n  }\n\n  .Card_bui-Card__a35e7cb59d[data-bg='neutral-1'] {\n    --bui-card-bg: var(--bui-bg-neutral-1);\n  }\n\n  .Card_bui-Card__a35e7cb59d[data-bg='neutral-2'] {\n    --bui-card-bg: var(--bui-bg-neutral-2);\n  }\n\n  .Card_bui-Card__a35e7cb59d[data-bg='neutral-3'] {\n    --bui-card-bg: var(--bui-bg-neutral-3);\n  }\n\n  .Card_bui-Card__a35e7cb59d:has(.Card_bui-CardHeader__a35e7cb59d, .Card_bui-CardBody__a35e7cb59d, .Card_bui-CardFooter__a35e7cb59d) {\n    padding: 0;\n  }\n\n  /*\n   * Cursor and hover tint are applied at the card level so they cover the\n   * entire surface.\n   */\n  .Card_bui-Card__a35e7cb59d[data-interactive] {\n    cursor: pointer;\n\n    &::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: color-mix(in srgb, currentColor 5%, transparent);\n      border-radius: inherit;\n      pointer-events: none;\n      z-index: 3;\n      opacity: 0;\n      transition: opacity 200ms ease-in-out;\n    }\n\n    &:hover::after {\n      opacity: 1;\n    }\n  }\n\n  .Card_bui-Card__a35e7cb59d[data-interactive]:has(.Card_bui-CardTrigger__a35e7cb59d:focus-visible) {\n    outline: 2px solid var(--bui-ring);\n    outline-offset: -2px;\n  }\n\n  .Card_bui-CardTrigger__a35e7cb59d {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    clip-path: inset(100%);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  .Card_bui-CardHeader__a35e7cb59d {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-3);\n  }\n\n  .Card_bui-CardBody__a35e7cb59d {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-3);\n  }\n\n  @keyframes Card_bui-card-body-shadow__a35e7cb59d {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  .Card_bui-Card__a35e7cb59d:has(.Card_bui-CardHeader__a35e7cb59d) .Card_bui-CardBody__a35e7cb59d {\n    padding-block-start: 0;\n\n    &::before {\n      content: '';\n      position: sticky;\n      top: 0;\n      display: block;\n      height: 1.5rem;\n      margin-bottom: -1.5rem;\n      background: linear-gradient(\n        to bottom,\n        var(--bui-card-bg),\n        rgb(from var(--bui-card-bg) r g b / 0)\n      );\n      pointer-events: none;\n      opacity: 0;\n      animation: Card_bui-card-body-shadow__a35e7cb59d linear both;\n      animation-timeline: scroll();\n      animation-range: 0px 2.5rem;\n    }\n  }\n\n  .Card_bui-Card__a35e7cb59d:has(.Card_bui-CardFooter__a35e7cb59d) .Card_bui-CardBody__a35e7cb59d {\n    padding-block-end: 0;\n\n    &::after {\n      content: '';\n      position: sticky;\n      bottom: 0;\n      display: block;\n      height: 1.5rem;\n      margin-top: -1.5rem;\n      background: linear-gradient(\n        to top,\n        var(--bui-card-bg),\n        rgb(from var(--bui-card-bg) r g b / 0)\n      );\n      pointer-events: none;\n      opacity: 0;\n      animation: Card_bui-card-body-shadow__a35e7cb59d linear forwards,\n        Card_bui-card-body-shadow__a35e7cb59d linear forwards reverse;\n      animation-timeline: scroll(), scroll();\n      animation-range: 0px 1px, calc(100% - 2.5rem) 100%;\n    }\n  }\n\n  .Card_bui-CardFooter__a35e7cb59d {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-3);\n  }\n}\n";
+var styles = {"bui-Card":"Card_bui-Card__a35e7cb59d","bui-CardHeader":"Card_bui-CardHeader__a35e7cb59d","bui-CardBody":"Card_bui-CardBody__a35e7cb59d","bui-CardFooter":"Card_bui-CardFooter__a35e7cb59d","bui-CardTrigger":"Card_bui-CardTrigger__a35e7cb59d","bui-card-body-shadow":"Card_bui-card-body-shadow__a35e7cb59d"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -1,19 +1,27 @@
 import 'react/jsx-runtime';
 import 'clsx';
-import 'react';
+import '../../hooks/useBreakpoint.esm.js';
 import '../../hooks/useBg.esm.js';
 import '../../hooks/useDefinition/helpers.esm.js';
+import '../../analytics/useAnalytics.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"
+    root: "bui-Card",
+    trigger: "bui-CardTrigger"
   },
   propDefs: {
     children: {},
-    className: {}
+    className: {},
+    onPress: {},
+    href: {},
+    label: {},
+    target: {},
+    rel: {},
+    download: {}
   }
 });
 const CardHeaderDefinition = defineComponent()({

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 { 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;;;;"}
+{"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    trigger: 'bui-CardTrigger',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n    onPress: {},\n    href: {},\n    label: {},\n    target: {},\n    rel: {},\n    download: {},\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,UAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,SAAS,EAAC;AAAA,IACV,MAAM,EAAC;AAAA,IACP,OAAO,EAAC;AAAA,IACR,QAAQ,EAAC;AAAA,IACT,KAAK,EAAC;AAAA,IACN,UAAU;AAAC;AAEf,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.esm.js

@@ -1,33 +1,26 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Checkbox as Checkbox$1 } from 'react-aria-components';
-import { useStyles } from '../../hooks/useStyles.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
 import { CheckboxDefinition } from './definition.esm.js';
-import clsx from 'clsx';
-import styles from './Checkbox.module.css.esm.js';
 import { RiSubtractLine, RiCheckLine } from '@remixicon/react';
 
 const Checkbox = forwardRef(
   (props, ref) => {
-    const { classNames } = useStyles(CheckboxDefinition);
-    const { className, children, ...rest } = props;
+    const { ownProps, restProps, dataAttributes } = useDefinition(
+      CheckboxDefinition,
+      props
+    );
+    const { classes, children } = ownProps;
     return /* @__PURE__ */ jsx(
       Checkbox$1,
       {
         ref,
-        className: clsx(classNames.root, styles[classNames.root], className),
-        ...rest,
+        className: classes.root,
+        ...dataAttributes,
+        ...restProps,
         children: ({ isIndeterminate }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: clsx(
-                classNames.indicator,
-                styles[classNames.indicator]
-              ),
-              children: isIndeterminate ? /* @__PURE__ */ jsx(RiSubtractLine, { size: 12 }) : /* @__PURE__ */ jsx(RiCheckLine, { size: 12 })
-            }
-          ),
+          /* @__PURE__ */ jsx("div", { className: classes.indicator, children: isIndeterminate ? /* @__PURE__ */ jsx(RiSubtractLine, { size: 12 }) : /* @__PURE__ */ jsx(RiCheckLine, { size: 12 }) }),
           children
         ] })
       }

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.esm.js","sources":["../../../src/components/Checkbox/Checkbox.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 { Checkbox as RACheckbox } from 'react-aria-components';\nimport type { CheckboxProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { CheckboxDefinition } from './definition';\nimport clsx from 'clsx';\nimport styles from './Checkbox.module.css';\nimport { RiCheckLine, RiSubtractLine } from '@remixicon/react';\n\n/** @public */\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n  (props, ref) => {\n    const { classNames } = useStyles(CheckboxDefinition);\n    const { className, children, ...rest } = props;\n\n    return (\n      <RACheckbox\n        ref={ref}\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        {...rest}\n      >\n        {({ isIndeterminate }) => (\n          <>\n            <div\n              className={clsx(\n                classNames.indicator,\n                styles[classNames.indicator],\n              )}\n            >\n              {isIndeterminate ? (\n                <RiSubtractLine size={12} />\n              ) : (\n                <RiCheckLine size={12} />\n              )}\n            </div>\n            {children}\n          </>\n        )}\n      </RACheckbox>\n    );\n  },\n);\n"],"names":["RACheckbox"],"mappings":";;;;;;;;;AA0BO,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,kBAAkB,CAAA;AACnD,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,MAAK,GAAI,KAAA;AAEzC,IAAA,uBACE,GAAA;AAAA,MAACA,UAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QAClE,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,CAAC,EAAE,eAAA,EAAgB,qBAClB,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,SAAA;AAAA,gBACX,MAAA,CAAO,WAAW,SAAS;AAAA,eAC7B;AAAA,cAEC,QAAA,EAAA,eAAA,uBACE,cAAA,EAAA,EAAe,IAAA,EAAM,IAAI,CAAA,mBAE1B,GAAA,CAAC,WAAA,EAAA,EAAY,IAAA,EAAM,EAAA,EAAI;AAAA;AAAA,WAE3B;AAAA,UACC;AAAA,SAAA,EACH;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"Checkbox.esm.js","sources":["../../../src/components/Checkbox/Checkbox.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 { Checkbox as RACheckbox } from 'react-aria-components';\nimport type { CheckboxProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { CheckboxDefinition } from './definition';\nimport { RiCheckLine, RiSubtractLine } from '@remixicon/react';\n\n/** @public */\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n  (props, ref) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      CheckboxDefinition,\n      props,\n    );\n    const { classes, children } = ownProps;\n\n    return (\n      <RACheckbox\n        ref={ref}\n        className={classes.root}\n        {...dataAttributes}\n        {...restProps}\n      >\n        {({ isIndeterminate }) => (\n          <>\n            <div className={classes.indicator}>\n              {isIndeterminate ? (\n                <RiSubtractLine size={12} />\n              ) : (\n                <RiCheckLine size={12} />\n              )}\n            </div>\n            {children}\n          </>\n        )}\n      </RACheckbox>\n    );\n  },\n);\n"],"names":["RACheckbox"],"mappings":";;;;;;;AAwBO,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,kBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,QAAA,EAAS,GAAI,QAAA;AAE9B,IAAA,uBACE,GAAA;AAAA,MAACA,UAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAW,OAAA,CAAQ,IAAA;AAAA,QAClB,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QAEH,QAAA,EAAA,CAAC,EAAE,eAAA,EAAgB,qBAClB,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,SAAA,EACrB,4CACC,GAAA,CAAC,cAAA,EAAA,EAAe,IAAA,EAAM,EAAA,EAAI,CAAA,mBAE1B,GAAA,CAAC,WAAA,EAAA,EAAY,IAAA,EAAM,IAAI,CAAA,EAE3B,CAAA;AAAA,UACC;AAAA,SAAA,EACH;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;;;;"}

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

@@ -1,13 +1,25 @@
-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 '../../analytics/useAnalytics.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,24 @@
-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 '../../analytics/useAnalytics.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";