@backstage/ui 0.12.0 → 0.13.0-next.1

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

@@ -1 +1 @@
-{"version":3,"file":"FieldLabel.esm.js","sources":["../../../src/components/FieldLabel/FieldLabel.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 */\nimport { Label } from 'react-aria-components';\nimport { forwardRef } from 'react';\nimport type { FieldLabelProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { FieldLabelDefinition } from './definition';\nimport styles from './FieldLabel.module.css';\nimport clsx from 'clsx';\n\n/** @public */\nexport const FieldLabel = forwardRef<HTMLDivElement, FieldLabelProps>(\n  (props: FieldLabelProps, ref) => {\n    const { classNames, cleanedProps } = useStyles(FieldLabelDefinition, props);\n    const {\n      className,\n      label,\n      secondaryLabel,\n      description,\n      htmlFor,\n      id,\n      ...rest\n    } = cleanedProps;\n\n    if (!label) return null;\n\n    return (\n      <div\n        className={clsx(classNames.root, styles[classNames.root], className)}\n        {...rest}\n        ref={ref}\n      >\n        {label && (\n          <Label\n            className={clsx(classNames.label, styles[classNames.label])}\n            htmlFor={htmlFor}\n            id={id}\n          >\n            {label}\n            {secondaryLabel && (\n              <span\n                aria-hidden=\"true\"\n                className={clsx(\n                  classNames.secondaryLabel,\n                  styles[classNames.secondaryLabel],\n                )}\n              >\n                ({secondaryLabel})\n              </span>\n            )}\n          </Label>\n        )}\n        {description && (\n          <div\n            className={clsx(\n              classNames.description,\n              styles[classNames.description],\n            )}\n          >\n            {description}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nFieldLabel.displayName = 'FieldLabel';\n"],"names":[],"mappings":";;;;;;;;AAwBO,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;AAAA,MACJ,SAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,EAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,YAAA;AAEJ,IAAA,IAAI,CAAC,OAAO,OAAO,IAAA;AAEnB,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QAClE,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,KAAA,oBACC,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,cAC1D,OAAA;AAAA,cACA,EAAA;AAAA,cAEC,QAAA,EAAA;AAAA,gBAAA,KAAA;AAAA,gBACA,cAAA,oBACC,IAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,aAAA,EAAY,MAAA;AAAA,oBACZ,SAAA,EAAW,IAAA;AAAA,sBACT,UAAA,CAAW,cAAA;AAAA,sBACX,MAAA,CAAO,WAAW,cAAc;AAAA,qBAClC;AAAA,oBACD,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,sBACG,cAAA;AAAA,sBAAe;AAAA;AAAA;AAAA;AACnB;AAAA;AAAA,WAEJ;AAAA,UAED,WAAA,oBACC,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,WAAA;AAAA,gBACX,MAAA,CAAO,WAAW,WAAW;AAAA,eAC/B;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
+{"version":3,"file":"FieldLabel.esm.js","sources":["../../../src/components/FieldLabel/FieldLabel.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 */\nimport { Label } from 'react-aria-components';\nimport { forwardRef } from 'react';\nimport type { FieldLabelProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { FieldLabelDefinition } from './definition';\n\n/** @public */\nexport const FieldLabel = forwardRef<HTMLDivElement, FieldLabelProps>(\n  (props: FieldLabelProps, ref) => {\n    const { ownProps, restProps } = useDefinition(FieldLabelDefinition, props);\n    const { classes, label, secondaryLabel, description, htmlFor, id } =\n      ownProps;\n\n    if (!label) return null;\n\n    return (\n      <div className={classes.root} {...restProps} ref={ref}>\n        {label && (\n          <Label className={classes.label} htmlFor={htmlFor} id={id}>\n            {label}\n            {secondaryLabel && (\n              <span aria-hidden=\"true\" className={classes.secondaryLabel}>\n                ({secondaryLabel})\n              </span>\n            )}\n          </Label>\n        )}\n        {description && (\n          <div className={classes.description}>{description}</div>\n        )}\n      </div>\n    );\n  },\n);\n\nFieldLabel.displayName = 'FieldLabel';\n"],"names":[],"mappings":";;;;;;AAsBO,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,OAAA,EAAS,KAAA,EAAO,gBAAgB,WAAA,EAAa,OAAA,EAAS,IAAG,GAC/D,QAAA;AAEF,IAAA,IAAI,CAAC,OAAO,OAAO,IAAA;AAEnB,IAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,QAAQ,IAAA,EAAO,GAAG,WAAW,GAAA,EAC1C,QAAA,EAAA;AAAA,MAAA,KAAA,yBACE,KAAA,EAAA,EAAM,SAAA,EAAW,OAAA,CAAQ,KAAA,EAAO,SAAkB,EAAA,EAChD,QAAA,EAAA;AAAA,QAAA,KAAA;AAAA,QACA,kCACC,IAAA,CAAC,MAAA,EAAA,EAAK,eAAY,MAAA,EAAO,SAAA,EAAW,QAAQ,cAAA,EAAgB,QAAA,EAAA;AAAA,UAAA,GAAA;AAAA,UACxD,cAAA;AAAA,UAAe;AAAA,SAAA,EACnB;AAAA,OAAA,EAEJ,CAAA;AAAA,MAED,+BACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,aAAc,QAAA,EAAA,WAAA,EAAY;AAAA,KAAA,EAEtD,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}

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

@@ -1,11 +1,28 @@
-const FieldLabelDefinition = {
+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 './FieldLabel.module.css.esm.js';
+
+const FieldLabelDefinition = defineComponent()({
+  styles,
   classNames: {
     root: "bui-FieldLabelWrapper",
     label: "bui-FieldLabel",
     secondaryLabel: "bui-FieldSecondaryLabel",
     description: "bui-FieldDescription"
+  },
+  propDefs: {
+    label: {},
+    secondaryLabel: {},
+    description: {},
+    htmlFor: {},
+    id: {},
+    className: {}
   }
-};
+});
 
 export { FieldLabelDefinition };
 //# sourceMappingURL=definition.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/FieldLabel/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 FieldLabel\n * @public\n */\nexport const FieldLabelDefinition = {\n  classNames: {\n    root: 'bui-FieldLabelWrapper',\n    label: 'bui-FieldLabel',\n    secondaryLabel: 'bui-FieldSecondaryLabel',\n    description: 'bui-FieldDescription',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,oBAAA,GAAuB;AAAA,EAClC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,uBAAA;AAAA,IACN,KAAA,EAAO,gBAAA;AAAA,IACP,cAAA,EAAgB,yBAAA;AAAA,IAChB,WAAA,EAAa;AAAA;AAEjB;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/FieldLabel/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 { FieldLabelOwnProps } from './types';\nimport styles from './FieldLabel.module.css';\n\n/**\n * Component definition for FieldLabel\n * @public\n */\nexport const FieldLabelDefinition = defineComponent<FieldLabelOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-FieldLabelWrapper',\n    label: 'bui-FieldLabel',\n    secondaryLabel: 'bui-FieldSecondaryLabel',\n    description: 'bui-FieldDescription',\n  },\n  propDefs: {\n    label: {},\n    secondaryLabel: {},\n    description: {},\n    htmlFor: {},\n    id: {},\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,oBAAA,GAAuB,iBAAoC,CAAE;AAAA,EACxE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,uBAAA;AAAA,IACN,KAAA,EAAO,gBAAA;AAAA,IACP,cAAA,EAAgB,yBAAA;AAAA,IAChB,WAAA,EAAa;AAAA,GACf;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAO,EAAC;AAAA,IACR,gBAAgB,EAAC;AAAA,IACjB,aAAa,EAAC;AAAA,IACd,SAAS,EAAC;AAAA,IACV,IAAI,EAAC;AAAA,IACL,WAAW;AAAC;AAEhB,CAAC;;;;"}

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

@@ -1,37 +1,26 @@
 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 { FlexDefinition } from './definition.esm.js';
-import styles from './Flex.module.css.esm.js';
-import { useBgProvider, BgProvider } from '../../hooks/useBg.esm.js';
 
 const Flex = forwardRef((props, ref) => {
-  const { bg: resolvedBg } = useBgProvider(props.bg);
-  const { classNames, dataAttributes, utilityClasses, style, cleanedProps } = useStyles(FlexDefinition, {
-    gap: "4",
-    ...props,
-    bg: resolvedBg
-    // Use resolved bg for data attribute
-  });
-  const { className, bg, ...rest } = cleanedProps;
-  const content = /* @__PURE__ */ jsx(
+  const { ownProps, dataAttributes, utilityStyle } = useDefinition(
+    FlexDefinition,
+    { gap: "4", ...props }
+  );
+  const { classes, childrenWithBgProvider } = ownProps;
+  return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
-      className: clsx(
-        classNames.root,
-        utilityClasses,
-        styles[classNames.root],
-        className
-      ),
-      style,
+      className: classes.root,
+      style: { ...utilityStyle, ...ownProps.style },
       ...dataAttributes,
-      ...rest
+      children: childrenWithBgProvider
     }
   );
-  return resolvedBg ? /* @__PURE__ */ jsx(BgProvider, { bg: resolvedBg, children: content }) : content;
 });
+Flex.displayName = "Flex";
 
 export { Flex };
 //# sourceMappingURL=Flex.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Flex.esm.js","sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { FlexProps } from './types';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { FlexDefinition } from './definition';\nimport styles from './Flex.module.css';\nimport { BgProvider, useBgProvider } from '../../hooks/useBg';\n\n/** @public */\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {\n  const { bg: resolvedBg } = useBgProvider(props.bg);\n\n  const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =\n    useStyles(FlexDefinition, {\n      gap: '4',\n      ...props,\n      bg: resolvedBg, // Use resolved bg for data attribute\n    });\n\n  const { className, bg, ...rest } = cleanedProps;\n\n  const content = (\n    <div\n      ref={ref}\n      className={clsx(\n        classNames.root,\n        utilityClasses,\n        styles[classNames.root],\n        className,\n      )}\n      style={style}\n      {...dataAttributes}\n      {...rest}\n    />\n  );\n\n  return resolvedBg ? (\n    <BgProvider bg={resolvedBg}>{content}</BgProvider>\n  ) : (\n    content\n  );\n});\n"],"names":[],"mappings":";;;;;;;;AAyBO,MAAM,IAAA,GAAO,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACxE,EAAA,MAAM,EAAE,EAAA,EAAI,UAAA,EAAW,GAAI,aAAA,CAAc,MAAM,EAAE,CAAA;AAEjD,EAAA,MAAM,EAAE,YAAY,cAAA,EAAgB,cAAA,EAAgB,OAAO,YAAA,EAAa,GACtE,UAAU,cAAA,EAAgB;AAAA,IACxB,GAAA,EAAK,GAAA;AAAA,IACL,GAAG,KAAA;AAAA,IACH,EAAA,EAAI;AAAA;AAAA,GACL,CAAA;AAEH,EAAA,MAAM,EAAE,SAAA,EAAW,EAAA,EAAI,GAAG,MAAK,GAAI,YAAA;AAEnC,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,IAAA;AAAA,QACX,cAAA;AAAA,QACA,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,OAAO,6BACL,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAI,UAAA,EAAa,mBAAQ,CAAA,GAErC,OAAA;AAEJ,CAAC;;;;"}
+{"version":3,"file":"Flex.esm.js","sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport type { FlexProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { FlexDefinition } from './definition';\n\n/** @public */\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {\n  const { ownProps, dataAttributes, utilityStyle } = useDefinition(\n    FlexDefinition,\n    { gap: '4', ...props },\n  );\n  const { classes, childrenWithBgProvider } = ownProps;\n\n  return (\n    <div\n      ref={ref}\n      className={classes.root}\n      style={{ ...utilityStyle, ...ownProps.style }}\n      {...dataAttributes}\n    >\n      {childrenWithBgProvider}\n    </div>\n  );\n});\n\nFlex.displayName = 'Flex';\n"],"names":[],"mappings":";;;;;AAsBO,MAAM,IAAA,GAAO,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACxE,EAAA,MAAM,EAAE,QAAA,EAAU,cAAA,EAAgB,YAAA,EAAa,GAAI,aAAA;AAAA,IACjD,cAAA;AAAA,IACA,EAAE,GAAA,EAAK,GAAA,EAAK,GAAG,KAAA;AAAM,GACvB;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,sBAAA,EAAuB,GAAI,QAAA;AAE5C,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,OAAO,EAAE,GAAG,YAAA,EAAc,GAAG,SAAS,KAAA,EAAM;AAAA,MAC3C,GAAG,cAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}

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

@@ -1,7 +1,23 @@
-const FlexDefinition = {
+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 './Flex.module.css.esm.js';
+
+const FlexDefinition = defineComponent()({
+  styles,
   classNames: {
     root: "bui-Flex"
   },
+  bg: "provider",
+  propDefs: {
+    bg: { dataAttribute: true },
+    children: {},
+    className: {},
+    style: {}
+  },
   utilityProps: [
     "m",
     "mb",
@@ -21,18 +37,8 @@ const FlexDefinition = {
     "align",
     "justify",
     "direction"
-  ],
-  dataAttributes: {
-    bg: [
-      "neutral-1",
-      "neutral-2",
-      "neutral-3",
-      "danger",
-      "warning",
-      "success"
-    ]
-  }
-};
+  ]
+});
 
 export { FlexDefinition };
 //# sourceMappingURL=definition.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Flex/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Flex\n * @public\n */\nexport const FlexDefinition = {\n  classNames: {\n    root: 'bui-Flex',\n  },\n  utilityProps: [\n    'm',\n    'mb',\n    'ml',\n    'mr',\n    'mt',\n    'mx',\n    'my',\n    'p',\n    'pb',\n    'pl',\n    'pr',\n    'pt',\n    'px',\n    'py',\n    'gap',\n    'align',\n    'justify',\n    'direction',\n  ],\n  dataAttributes: {\n    bg: [\n      'neutral-1',\n      'neutral-2',\n      'neutral-3',\n      'danger',\n      'warning',\n      'success',\n    ] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,cAAA,GAAiB;AAAA,EAC5B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,EAAA,EAAI;AAAA,MACF,WAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA;AACF;AAEJ;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Flex/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { FlexOwnProps } from './types';\nimport styles from './Flex.module.css';\n\n/**\n * Component definition for Flex\n * @public\n */\nexport const FlexDefinition = defineComponent<FlexOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Flex',\n  },\n  bg: 'provider',\n  propDefs: {\n    bg: { dataAttribute: true },\n    children: {},\n    className: {},\n    style: {},\n  },\n  utilityProps: [\n    'm',\n    'mb',\n    'ml',\n    'mr',\n    'mt',\n    'mx',\n    'my',\n    'p',\n    'pb',\n    'pl',\n    'pr',\n    'pt',\n    'px',\n    'py',\n    'gap',\n    'align',\n    'justify',\n    'direction',\n  ],\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,cAAA,GAAiB,iBAA8B,CAAE;AAAA,EAC5D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,EAAA,EAAI,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC1B,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC,GACV;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA;AAEJ,CAAC;;;;"}

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/FullPage/definition.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for FullPage\n * @public\n */\nexport const FullPageDefinition = {\n  classNames: {\n    root: 'bui-FullPage',\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,kBAAA,GAAqB;AAAA,EAChC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA;AAEV;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/FullPage/definition.ts"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { FullPageOwnProps } from './types';\nimport styles from './FullPage.module.css';\n\n/**\n * Component definition for FullPage\n * @public\n */\nexport const FullPageDefinition = defineComponent<FullPageOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-FullPage',\n  },\n  propDefs: {\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,kBAAA,GAAqB,iBAAkC,CAAE;AAAA,EACpE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW;AAAC;AAEhB,CAAC;;;;"}

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

@@ -1,62 +1,41 @@
 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 { GridDefinition, GridItemDefinition } from './definition.esm.js';
-import styles from './Grid.module.css.esm.js';
-import { useBgProvider, BgProvider } from '../../hooks/useBg.esm.js';
 
 const GridRoot = forwardRef((props, ref) => {
-  const { bg: resolvedBg } = useBgProvider(props.bg);
-  const { classNames, dataAttributes, utilityClasses, style, cleanedProps } = useStyles(GridDefinition, {
-    columns: "auto",
-    gap: "4",
-    ...props,
-    bg: resolvedBg
-    // Use resolved bg for data attribute
-  });
-  const { className, bg, ...rest } = cleanedProps;
-  const content = /* @__PURE__ */ jsx(
+  const { ownProps, dataAttributes, utilityStyle } = useDefinition(
+    GridDefinition,
+    { columns: "auto", gap: "4", ...props }
+  );
+  const { classes, childrenWithBgProvider } = ownProps;
+  return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
-      className: clsx(
-        classNames.root,
-        utilityClasses,
-        styles[classNames.root],
-        className
-      ),
-      style,
+      className: classes.root,
+      style: { ...utilityStyle, ...ownProps.style },
       ...dataAttributes,
-      ...rest
+      children: childrenWithBgProvider
     }
   );
-  return resolvedBg ? /* @__PURE__ */ jsx(BgProvider, { bg: resolvedBg, children: content }) : content;
 });
 const GridItem = forwardRef((props, ref) => {
-  const { bg: resolvedBg } = useBgProvider(props.bg);
-  const { classNames, dataAttributes, utilityClasses, style, cleanedProps } = useStyles(GridItemDefinition, {
-    ...props,
-    bg: resolvedBg
-    // Use resolved bg for data attribute
-  });
-  const { className, bg, ...rest } = cleanedProps;
-  const content = /* @__PURE__ */ jsx(
+  const { ownProps, dataAttributes, utilityStyle } = useDefinition(
+    GridItemDefinition,
+    props
+  );
+  const { classes, childrenWithBgProvider } = ownProps;
+  return /* @__PURE__ */ jsx(
     "div",
     {
       ref,
-      className: clsx(
-        classNames.root,
-        utilityClasses,
-        styles[classNames.root],
-        className
-      ),
-      style,
+      className: classes.root,
+      style: { ...utilityStyle, ...ownProps.style },
       ...dataAttributes,
-      ...rest
+      children: childrenWithBgProvider
     }
   );
-  return resolvedBg ? /* @__PURE__ */ jsx(BgProvider, { bg: resolvedBg, children: content }) : content;
 });
 const Grid = {
   Root: GridRoot,

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

@@ -1 +1 @@
-{"version":3,"file":"Grid.esm.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport clsx from 'clsx';\nimport type { GridItemProps, GridProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { GridDefinition, GridItemDefinition } from './definition';\nimport styles from './Grid.module.css';\nimport { BgProvider, useBgProvider } from '../../hooks/useBg';\n\nconst GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {\n  const { bg: resolvedBg } = useBgProvider(props.bg);\n\n  const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =\n    useStyles(GridDefinition, {\n      columns: 'auto',\n      gap: '4',\n      ...props,\n      bg: resolvedBg, // Use resolved bg for data attribute\n    });\n\n  const { className, bg, ...rest } = cleanedProps;\n\n  const content = (\n    <div\n      ref={ref}\n      className={clsx(\n        classNames.root,\n        utilityClasses,\n        styles[classNames.root],\n        className,\n      )}\n      style={style}\n      {...dataAttributes}\n      {...rest}\n    />\n  );\n\n  return resolvedBg ? (\n    <BgProvider bg={resolvedBg}>{content}</BgProvider>\n  ) : (\n    content\n  );\n});\n\nconst GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {\n  const { bg: resolvedBg } = useBgProvider(props.bg);\n\n  const { classNames, dataAttributes, utilityClasses, style, cleanedProps } =\n    useStyles(GridItemDefinition, {\n      ...props,\n      bg: resolvedBg, // Use resolved bg for data attribute\n    });\n\n  const { className, bg, ...rest } = cleanedProps;\n\n  const content = (\n    <div\n      ref={ref}\n      className={clsx(\n        classNames.root,\n        utilityClasses,\n        styles[classNames.root],\n        className,\n      )}\n      style={style}\n      {...dataAttributes}\n      {...rest}\n    />\n  );\n\n  return resolvedBg ? (\n    <BgProvider bg={resolvedBg}>{content}</BgProvider>\n  ) : (\n    content\n  );\n});\n\n/** @public */\nexport const Grid = {\n  Root: GridRoot,\n  Item: GridItem,\n};\n"],"names":[],"mappings":";;;;;;;;AAwBA,MAAM,QAAA,GAAW,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACrE,EAAA,MAAM,EAAE,EAAA,EAAI,UAAA,EAAW,GAAI,aAAA,CAAc,MAAM,EAAE,CAAA;AAEjD,EAAA,MAAM,EAAE,YAAY,cAAA,EAAgB,cAAA,EAAgB,OAAO,YAAA,EAAa,GACtE,UAAU,cAAA,EAAgB;AAAA,IACxB,OAAA,EAAS,MAAA;AAAA,IACT,GAAA,EAAK,GAAA;AAAA,IACL,GAAG,KAAA;AAAA,IACH,EAAA,EAAI;AAAA;AAAA,GACL,CAAA;AAEH,EAAA,MAAM,EAAE,SAAA,EAAW,EAAA,EAAI,GAAG,MAAK,GAAI,YAAA;AAEnC,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,IAAA;AAAA,QACX,cAAA;AAAA,QACA,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,OAAO,6BACL,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAI,UAAA,EAAa,mBAAQ,CAAA,GAErC,OAAA;AAEJ,CAAC,CAAA;AAED,MAAM,QAAA,GAAW,UAAA,CAA0C,CAAC,KAAA,EAAO,GAAA,KAAQ;AACzE,EAAA,MAAM,EAAE,EAAA,EAAI,UAAA,EAAW,GAAI,aAAA,CAAc,MAAM,EAAE,CAAA;AAEjD,EAAA,MAAM,EAAE,YAAY,cAAA,EAAgB,cAAA,EAAgB,OAAO,YAAA,EAAa,GACtE,UAAU,kBAAA,EAAoB;AAAA,IAC5B,GAAG,KAAA;AAAA,IACH,EAAA,EAAI;AAAA;AAAA,GACL,CAAA;AAEH,EAAA,MAAM,EAAE,SAAA,EAAW,EAAA,EAAI,GAAG,MAAK,GAAI,YAAA;AAEnC,EAAA,MAAM,OAAA,mBACJ,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,IAAA;AAAA,QACX,cAAA;AAAA,QACA,MAAA,CAAO,WAAW,IAAI,CAAA;AAAA,QACtB;AAAA,OACF;AAAA,MACA,KAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,OAAO,6BACL,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAI,UAAA,EAAa,mBAAQ,CAAA,GAErC,OAAA;AAEJ,CAAC,CAAA;AAGM,MAAM,IAAA,GAAO;AAAA,EAClB,IAAA,EAAM,QAAA;AAAA,EACN,IAAA,EAAM;AACR;;;;"}
+{"version":3,"file":"Grid.esm.js","sources":["../../../src/components/Grid/Grid.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport type { GridItemProps, GridProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { GridDefinition, GridItemDefinition } from './definition';\n\nconst GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {\n  const { ownProps, dataAttributes, utilityStyle } = useDefinition(\n    GridDefinition,\n    { columns: 'auto', gap: '4', ...props },\n  );\n  const { classes, childrenWithBgProvider } = ownProps;\n\n  return (\n    <div\n      ref={ref}\n      className={classes.root}\n      style={{ ...utilityStyle, ...ownProps.style }}\n      {...dataAttributes}\n    >\n      {childrenWithBgProvider}\n    </div>\n  );\n});\n\nconst GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {\n  const { ownProps, dataAttributes, utilityStyle } = useDefinition(\n    GridItemDefinition,\n    props,\n  );\n  const { classes, childrenWithBgProvider } = ownProps;\n\n  return (\n    <div\n      ref={ref}\n      className={classes.root}\n      style={{ ...utilityStyle, ...ownProps.style }}\n      {...dataAttributes}\n    >\n      {childrenWithBgProvider}\n    </div>\n  );\n});\n\n/** @public */\nexport const Grid = {\n  Root: GridRoot,\n  Item: GridItem,\n};\n"],"names":[],"mappings":";;;;;AAqBA,MAAM,QAAA,GAAW,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACrE,EAAA,MAAM,EAAE,QAAA,EAAU,cAAA,EAAgB,YAAA,EAAa,GAAI,aAAA;AAAA,IACjD,cAAA;AAAA,IACA,EAAE,OAAA,EAAS,MAAA,EAAQ,GAAA,EAAK,GAAA,EAAK,GAAG,KAAA;AAAM,GACxC;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,sBAAA,EAAuB,GAAI,QAAA;AAE5C,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,OAAO,EAAE,GAAG,YAAA,EAAc,GAAG,SAAS,KAAA,EAAM;AAAA,MAC3C,GAAG,cAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAC,CAAA;AAED,MAAM,QAAA,GAAW,UAAA,CAA0C,CAAC,KAAA,EAAO,GAAA,KAAQ;AACzE,EAAA,MAAM,EAAE,QAAA,EAAU,cAAA,EAAgB,YAAA,EAAa,GAAI,aAAA;AAAA,IACjD,kBAAA;AAAA,IACA;AAAA,GACF;AACA,EAAA,MAAM,EAAE,OAAA,EAAS,sBAAA,EAAuB,GAAI,QAAA;AAE5C,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAW,OAAA,CAAQ,IAAA;AAAA,MACnB,OAAO,EAAE,GAAG,YAAA,EAAc,GAAG,SAAS,KAAA,EAAM;AAAA,MAC3C,GAAG,cAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAC,CAAA;AAGM,MAAM,IAAA,GAAO;AAAA,EAClB,IAAA,EAAM,QAAA;AAAA,EACN,IAAA,EAAM;AACR;;;;"}

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

@@ -1,7 +1,23 @@
-const GridDefinition = {
+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 './Grid.module.css.esm.js';
+
+const GridDefinition = defineComponent()({
+  styles,
   classNames: {
     root: "bui-Grid"
   },
+  bg: "provider",
+  propDefs: {
+    bg: { dataAttribute: true },
+    children: {},
+    className: {},
+    style: {}
+  },
   utilityProps: [
     "columns",
     "gap",
@@ -19,34 +35,22 @@ const GridDefinition = {
     "pt",
     "px",
     "py"
-  ],
-  dataAttributes: {
-    bg: [
-      "neutral-1",
-      "neutral-2",
-      "neutral-3",
-      "danger",
-      "warning",
-      "success"
-    ]
-  }
-};
-const GridItemDefinition = {
+  ]
+});
+const GridItemDefinition = defineComponent()({
+  styles,
   classNames: {
     root: "bui-GridItem"
   },
-  utilityProps: ["colSpan", "colEnd", "colStart", "rowSpan"],
-  dataAttributes: {
-    bg: [
-      "neutral-1",
-      "neutral-2",
-      "neutral-3",
-      "danger",
-      "warning",
-      "success"
-    ]
-  }
-};
+  bg: "provider",
+  propDefs: {
+    bg: { dataAttribute: true },
+    children: {},
+    className: {},
+    style: {}
+  },
+  utilityProps: ["colSpan", "colEnd", "colStart", "rowSpan"]
+});
 
 export { GridDefinition, GridItemDefinition };
 //# sourceMappingURL=definition.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Grid/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for Grid\n * @public\n */\nexport const GridDefinition = {\n  classNames: {\n    root: 'bui-Grid',\n  },\n  utilityProps: [\n    'columns',\n    'gap',\n    'm',\n    'mb',\n    'ml',\n    'mr',\n    'mt',\n    'mx',\n    'my',\n    'p',\n    'pb',\n    'pl',\n    'pr',\n    'pt',\n    'px',\n    'py',\n  ],\n  dataAttributes: {\n    bg: [\n      'neutral-1',\n      'neutral-2',\n      'neutral-3',\n      'danger',\n      'warning',\n      'success',\n    ] as const,\n  },\n} as const satisfies ComponentDefinition;\n\n/**\n * Component definition for GridItem\n * @public\n */\nexport const GridItemDefinition = {\n  classNames: {\n    root: 'bui-GridItem',\n  },\n  utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'],\n  dataAttributes: {\n    bg: [\n      'neutral-1',\n      'neutral-2',\n      'neutral-3',\n      'danger',\n      'warning',\n      'success',\n    ] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,cAAA,GAAiB;AAAA,EAC5B,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,SAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,EAAA,EAAI;AAAA,MACF,WAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA;AACF;AAEJ;AAMO,MAAM,kBAAA,GAAqB;AAAA,EAChC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,YAAA,EAAc,CAAC,SAAA,EAAW,QAAA,EAAU,YAAY,SAAS,CAAA;AAAA,EACzD,cAAA,EAAgB;AAAA,IACd,EAAA,EAAI;AAAA,MACF,WAAA;AAAA,MACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA;AACF;AAEJ;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Grid/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { GridOwnProps, GridItemOwnProps } from './types';\nimport styles from './Grid.module.css';\n\n/**\n * Component definition for Grid\n * @public\n */\nexport const GridDefinition = defineComponent<GridOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-Grid',\n  },\n  bg: 'provider',\n  propDefs: {\n    bg: { dataAttribute: true },\n    children: {},\n    className: {},\n    style: {},\n  },\n  utilityProps: [\n    'columns',\n    'gap',\n    'm',\n    'mb',\n    'ml',\n    'mr',\n    'mt',\n    'mx',\n    'my',\n    'p',\n    'pb',\n    'pl',\n    'pr',\n    'pt',\n    'px',\n    'py',\n  ],\n});\n\n/**\n * Component definition for GridItem\n * @public\n */\nexport const GridItemDefinition = defineComponent<GridItemOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-GridItem',\n  },\n  bg: 'provider',\n  propDefs: {\n    bg: { dataAttribute: true },\n    children: {},\n    className: {},\n    style: {},\n  },\n  utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'],\n});\n"],"names":[],"mappings":";;;;;;;;AAwBO,MAAM,cAAA,GAAiB,iBAA8B,CAAE;AAAA,EAC5D,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,EAAA,EAAI,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC1B,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC,GACV;AAAA,EACA,YAAA,EAAc;AAAA,IACZ,SAAA;AAAA,IACA,KAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA;AAAA;AAEJ,CAAC;AAMM,MAAM,kBAAA,GAAqB,iBAAkC,CAAE;AAAA,EACpE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,EAAA,EAAI,EAAE,aAAA,EAAe,IAAA,EAAK;AAAA,IAC1B,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,OAAO;AAAC,GACV;AAAA,EACA,YAAA,EAAc,CAAC,SAAA,EAAW,QAAA,EAAU,YAAY,SAAS;AAC3D,CAAC;;;;"}

package/dist/components/HeaderPage/HeaderPage.esm.js

@@ -1,75 +1,53 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Text } from '../Text/Text.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import '../Text/Text.module.css.esm.js';
 import { RiArrowRightSLine } from '@remixicon/react';
 import { Tabs, TabList, Tab } from '../Tabs/Tabs.esm.js';
-import { useStyles } from '../../hooks/useStyles.esm.js';
+import '../Tabs/Tabs.module.css.esm.js';
 import { HeaderPageDefinition } from './definition.esm.js';
 import { Container } from '../Container/Container.esm.js';
+import '../Container/Container.module.css.esm.js';
 import { Link } from '../Link/Link.esm.js';
-import styles from './HeaderPage.module.css.esm.js';
-import clsx from 'clsx';
+import '../Link/Link.module.css.esm.js';
 
 const HeaderPage = (props) => {
-  const { classNames, cleanedProps } = useStyles(HeaderPageDefinition, props);
-  const { className, title, tabs, customActions, breadcrumbs } = cleanedProps;
-  return /* @__PURE__ */ jsxs(
-    Container,
-    {
-      className: clsx(classNames.root, styles[classNames.root], className),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: clsx(classNames.content, styles[classNames.content]), children: [
-          /* @__PURE__ */ jsxs(
-            "div",
+  const { ownProps } = useDefinition(HeaderPageDefinition, props);
+  const { classes, title, tabs, customActions, breadcrumbs } = ownProps;
+  return /* @__PURE__ */ jsxs(Container, { className: classes.root, children: [
+    /* @__PURE__ */ jsxs("div", { className: classes.content, children: [
+      /* @__PURE__ */ jsxs("div", { className: classes.breadcrumbs, children: [
+        breadcrumbs && breadcrumbs.map((breadcrumb) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Link,
             {
-              className: clsx(
-                classNames.breadcrumbs,
-                styles[classNames.breadcrumbs]
-              ),
-              children: [
-                breadcrumbs && breadcrumbs.map((breadcrumb) => /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    Link,
-                    {
-                      href: breadcrumb.href,
-                      variant: "title-small",
-                      weight: "bold",
-                      color: "secondary",
-                      truncate: true,
-                      style: { maxWidth: "240px" },
-                      standalone: true,
-                      children: breadcrumb.label
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(RiArrowRightSLine, { size: 16, color: "var(--bui-fg-secondary)" })
-                ] }, breadcrumb.label)),
-                /* @__PURE__ */ jsx(Text, { variant: "title-small", weight: "bold", as: "h2", children: title })
-              ]
+              href: breadcrumb.href,
+              variant: "title-small",
+              weight: "bold",
+              color: "secondary",
+              truncate: true,
+              style: { maxWidth: "240px" },
+              standalone: true,
+              children: breadcrumb.label
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: clsx(classNames.controls, styles[classNames.controls]), children: customActions })
-        ] }),
-        tabs && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: clsx(
-              classNames.tabsWrapper,
-              styles[classNames.tabsWrapper]
-            ),
-            children: /* @__PURE__ */ jsx(Tabs, { children: /* @__PURE__ */ jsx(TabList, { children: tabs.map((tab) => /* @__PURE__ */ jsx(
-              Tab,
-              {
-                id: tab.id,
-                href: tab.href,
-                matchStrategy: tab.matchStrategy,
-                children: tab.label
-              },
-              tab.id
-            )) }) })
-          }
-        )
-      ]
-    }
-  );
+          /* @__PURE__ */ jsx(RiArrowRightSLine, { size: 16, color: "var(--bui-fg-secondary)" })
+        ] }, breadcrumb.label)),
+        /* @__PURE__ */ jsx(Text, { variant: "title-small", weight: "bold", as: "h2", children: title })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: classes.controls, children: customActions })
+    ] }),
+    tabs && /* @__PURE__ */ jsx("div", { className: classes.tabsWrapper, children: /* @__PURE__ */ jsx(Tabs, { children: /* @__PURE__ */ jsx(TabList, { children: tabs.map((tab) => /* @__PURE__ */ jsx(
+      Tab,
+      {
+        id: tab.id,
+        href: tab.href,
+        matchStrategy: tab.matchStrategy,
+        children: tab.label
+      },
+      tab.id
+    )) }) }) })
+  ] });
 };
 
 export { HeaderPage };

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderPage.esm.js","sources":["../../../src/components/HeaderPage/HeaderPage.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { HeaderPageProps } from './types';\nimport { Text } from '../Text';\nimport { RiArrowRightSLine } from '@remixicon/react';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\nimport { HeaderPageDefinition } from './definition';\nimport { Container } from '../Container';\nimport { Link } from '../Link';\nimport { Fragment } from 'react/jsx-runtime';\nimport styles from './HeaderPage.module.css';\nimport clsx from 'clsx';\n\n/**\n * A component that renders a header page.\n *\n * @public\n */\nexport const HeaderPage = (props: HeaderPageProps) => {\n  const { classNames, cleanedProps } = useStyles(HeaderPageDefinition, props);\n  const { className, title, tabs, customActions, breadcrumbs } = cleanedProps;\n\n  return (\n    <Container\n      className={clsx(classNames.root, styles[classNames.root], className)}\n    >\n      <div className={clsx(classNames.content, styles[classNames.content])}>\n        <div\n          className={clsx(\n            classNames.breadcrumbs,\n            styles[classNames.breadcrumbs],\n          )}\n        >\n          {breadcrumbs &&\n            breadcrumbs.map(breadcrumb => (\n              <Fragment key={breadcrumb.label}>\n                <Link\n                  href={breadcrumb.href}\n                  variant=\"title-small\"\n                  weight=\"bold\"\n                  color=\"secondary\"\n                  truncate\n                  style={{ maxWidth: '240px' }}\n                  standalone\n                >\n                  {breadcrumb.label}\n                </Link>\n                <RiArrowRightSLine size={16} color=\"var(--bui-fg-secondary)\" />\n              </Fragment>\n            ))}\n          <Text variant=\"title-small\" weight=\"bold\" as=\"h2\">\n            {title}\n          </Text>\n        </div>\n        <div className={clsx(classNames.controls, styles[classNames.controls])}>\n          {customActions}\n        </div>\n      </div>\n      {tabs && (\n        <div\n          className={clsx(\n            classNames.tabsWrapper,\n            styles[classNames.tabsWrapper],\n          )}\n        >\n          <Tabs>\n            <TabList>\n              {tabs.map(tab => (\n                <Tab\n                  key={tab.id}\n                  id={tab.id}\n                  href={tab.href}\n                  matchStrategy={tab.matchStrategy}\n                >\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </div>\n      )}\n    </Container>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAiCO,MAAM,UAAA,GAAa,CAAC,KAAA,KAA2B;AACpD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,sBAAsB,KAAK,CAAA;AAC1E,EAAA,MAAM,EAAE,SAAA,EAAW,KAAA,EAAO,IAAA,EAAM,aAAA,EAAe,aAAY,GAAI,YAAA;AAE/D,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAEnE,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA,EACjE,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,WAAA;AAAA,gBACX,MAAA,CAAO,WAAW,WAAW;AAAA,eAC/B;AAAA,cAEC,QAAA,EAAA;AAAA,gBAAA,WAAA,IACC,WAAA,CAAY,GAAA,CAAI,CAAA,UAAA,qBACd,IAAA,CAAC,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,kCAAA,GAAA;AAAA,oBAAC,IAAA;AAAA,oBAAA;AAAA,sBACC,MAAM,UAAA,CAAW,IAAA;AAAA,sBACjB,OAAA,EAAQ,aAAA;AAAA,sBACR,MAAA,EAAO,MAAA;AAAA,sBACP,KAAA,EAAM,WAAA;AAAA,sBACN,QAAA,EAAQ,IAAA;AAAA,sBACR,KAAA,EAAO,EAAE,QAAA,EAAU,OAAA,EAAQ;AAAA,sBAC3B,UAAA,EAAU,IAAA;AAAA,sBAET,QAAA,EAAA,UAAA,CAAW;AAAA;AAAA,mBACd;AAAA,kCACA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,EAAA,EAAI,OAAM,yBAAA,EAA0B;AAAA,iBAAA,EAAA,EAZhD,UAAA,CAAW,KAa1B,CACD,CAAA;AAAA,gCACH,GAAA,CAAC,QAAK,OAAA,EAAQ,aAAA,EAAc,QAAO,MAAA,EAAO,EAAA,EAAG,MAC1C,QAAA,EAAA,KAAA,EACH;AAAA;AAAA;AAAA,WACF;AAAA,0BACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,QAAA,EAAU,MAAA,CAAO,UAAA,CAAW,QAAQ,CAAC,CAAA,EAClE,QAAA,EAAA,aAAA,EACH;AAAA,SAAA,EACF,CAAA;AAAA,QACC,IAAA,oBACC,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA;AAAA,cACT,UAAA,CAAW,WAAA;AAAA,cACX,MAAA,CAAO,WAAW,WAAW;AAAA,aAC/B;AAAA,YAEA,8BAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACE,QAAA,EAAA,IAAA,CAAK,IAAI,CAAA,GAAA,qBACR,GAAA;AAAA,cAAC,GAAA;AAAA,cAAA;AAAA,gBAEC,IAAI,GAAA,CAAI,EAAA;AAAA,gBACR,MAAM,GAAA,CAAI,IAAA;AAAA,gBACV,eAAe,GAAA,CAAI,aAAA;AAAA,gBAElB,QAAA,EAAA,GAAA,CAAI;AAAA,eAAA;AAAA,cALA,GAAA,CAAI;AAAA,aAOZ,GACH,CAAA,EACF;AAAA;AAAA;AACF;AAAA;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"HeaderPage.esm.js","sources":["../../../src/components/HeaderPage/HeaderPage.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { HeaderPageProps } from './types';\nimport { Text } from '../Text';\nimport { RiArrowRightSLine } from '@remixicon/react';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { HeaderPageDefinition } from './definition';\nimport { Container } from '../Container';\nimport { Link } from '../Link';\nimport { Fragment } from 'react/jsx-runtime';\n\n/**\n * A component that renders a header page.\n *\n * @public\n */\nexport const HeaderPage = (props: HeaderPageProps) => {\n  const { ownProps } = useDefinition(HeaderPageDefinition, props);\n  const { classes, title, tabs, customActions, breadcrumbs } = ownProps;\n\n  return (\n    <Container className={classes.root}>\n      <div className={classes.content}>\n        <div className={classes.breadcrumbs}>\n          {breadcrumbs &&\n            breadcrumbs.map(breadcrumb => (\n              <Fragment key={breadcrumb.label}>\n                <Link\n                  href={breadcrumb.href}\n                  variant=\"title-small\"\n                  weight=\"bold\"\n                  color=\"secondary\"\n                  truncate\n                  style={{ maxWidth: '240px' }}\n                  standalone\n                >\n                  {breadcrumb.label}\n                </Link>\n                <RiArrowRightSLine size={16} color=\"var(--bui-fg-secondary)\" />\n              </Fragment>\n            ))}\n          <Text variant=\"title-small\" weight=\"bold\" as=\"h2\">\n            {title}\n          </Text>\n        </div>\n        <div className={classes.controls}>{customActions}</div>\n      </div>\n      {tabs && (\n        <div className={classes.tabsWrapper}>\n          <Tabs>\n            <TabList>\n              {tabs.map(tab => (\n                <Tab\n                  key={tab.id}\n                  id={tab.id}\n                  href={tab.href}\n                  matchStrategy={tab.matchStrategy}\n                >\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </div>\n      )}\n    </Container>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AA+BO,MAAM,UAAA,GAAa,CAAC,KAAA,KAA2B;AACpD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,sBAAsB,KAAK,CAAA;AAC9D,EAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAO,IAAA,EAAM,aAAA,EAAe,aAAY,GAAI,QAAA;AAE7D,EAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,OAAA,CAAQ,IAAA,EAC5B,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,OAAA,EACtB,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,WAAA,EACrB,QAAA,EAAA;AAAA,QAAA,WAAA,IACC,WAAA,CAAY,GAAA,CAAI,CAAA,UAAA,qBACd,IAAA,CAAC,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,MAAM,UAAA,CAAW,IAAA;AAAA,cACjB,OAAA,EAAQ,aAAA;AAAA,cACR,MAAA,EAAO,MAAA;AAAA,cACP,KAAA,EAAM,WAAA;AAAA,cACN,QAAA,EAAQ,IAAA;AAAA,cACR,KAAA,EAAO,EAAE,QAAA,EAAU,OAAA,EAAQ;AAAA,cAC3B,UAAA,EAAU,IAAA;AAAA,cAET,QAAA,EAAA,UAAA,CAAW;AAAA;AAAA,WACd;AAAA,0BACA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,EAAA,EAAI,OAAM,yBAAA,EAA0B;AAAA,SAAA,EAAA,EAZhD,UAAA,CAAW,KAa1B,CACD,CAAA;AAAA,wBACH,GAAA,CAAC,QAAK,OAAA,EAAQ,aAAA,EAAc,QAAO,MAAA,EAAO,EAAA,EAAG,MAC1C,QAAA,EAAA,KAAA,EACH;AAAA,OAAA,EACF,CAAA;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,UAAW,QAAA,EAAA,aAAA,EAAc;AAAA,KAAA,EACnD,CAAA;AAAA,IACC,IAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,WAAA,EACtB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACE,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAA,GAAA,qBACR,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QAEC,IAAI,GAAA,CAAI,EAAA;AAAA,QACR,MAAM,GAAA,CAAI,IAAA;AAAA,QACV,eAAe,GAAA,CAAI,aAAA;AAAA,QAElB,QAAA,EAAA,GAAA,CAAI;AAAA,OAAA;AAAA,MALA,GAAA,CAAI;AAAA,KAOZ,CAAA,EACH,CAAA,EACF,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}