@backstage/ui 0.14.0-next.0 → 0.14.0-next.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroup.esm.js","sources":["../../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"sourcesContent":["/*\n * Copyright 2026 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, useEffect } from 'react';\nimport { CheckboxGroup as RACheckboxGroup } from 'react-aria-components';\nimport type { CheckboxGroupProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { CheckboxGroupDefinition } from './definition';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\n\n/**\n * A group of checkboxes for selecting multiple options from a list.\n * @public\n */\nexport const CheckboxGroup = forwardRef<HTMLDivElement, CheckboxGroupProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(\n      CheckboxGroupDefinition,\n      props,\n    );\n    const {\n      classes,\n      label,\n      secondaryLabel,\n      description,\n      isRequired,\n      orientation,\n      children,\n    } = ownProps;\n\n    const ariaLabel = restProps['aria-label'];\n    const ariaLabelledBy = restProps['aria-labelledby'];\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'CheckboxGroup requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    return (\n      <RACheckboxGroup\n        ref={ref}\n        className={classes.root}\n        isRequired={isRequired}\n        data-orientation={orientation}\n        {...restProps}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div className={classes.content}>{children}</div>\n        <FieldError />\n      </RACheckboxGroup>\n    );\n  },\n);\n\nCheckboxGroup.displayName = 'CheckboxGroup';\n"],"names":["RACheckboxGroup"],"mappings":";;;;;;;;;;AA4BO,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA;AAAA,MAC9B,uBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM;AAAA,MACJ,OAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA,KACF,GAAI,QAAA;AAEJ,IAAA,MAAM,SAAA,GAAY,UAAU,YAAY,CAAA;AACxC,IAAA,MAAM,cAAA,GAAiB,UAAU,iBAAiB,CAAA;AAElD,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC3C,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,EAAW,cAAc,CAAC,CAAA;AAErC,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAE/C,IAAA,uBACE,IAAA;AAAA,MAACA,eAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,WAAW,OAAA,CAAQ,IAAA;AAAA,QACnB,UAAA;AAAA,QACA,kBAAA,EAAkB,WAAA;AAAA,QACjB,GAAG,SAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAA,EAAgB,kBAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,SAAU,QAAA,EAAS,CAAA;AAAA,8BAC1C,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,EAEJ;AACF;AAEA,aAAA,CAAc,WAAA,GAAc,eAAA;;;;"}

package/dist/components/CheckboxGroup/CheckboxGroup.module.css.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "@layer tokens, base, components, utilities;\n\n@layer components {\n  .CheckboxGroup_bui-CheckboxGroup__b7c8b55111 {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .CheckboxGroup_bui-CheckboxGroup__b7c8b55111[data-orientation='horizontal'] .CheckboxGroup_bui-CheckboxGroupContent__b7c8b55111 {\n    flex-direction: row;\n    gap: var(--bui-space-4);\n  }\n\n  .CheckboxGroup_bui-CheckboxGroupContent__b7c8b55111 {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-2);\n  }\n}\n";
+var styles = {"bui-CheckboxGroup":"CheckboxGroup_bui-CheckboxGroup__b7c8b55111","bui-CheckboxGroupContent":"CheckboxGroup_bui-CheckboxGroupContent__b7c8b55111"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=CheckboxGroup.module.css.esm.js.map

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

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

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

@@ -0,0 +1,31 @@
+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 'react-router-dom';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './CheckboxGroup.module.css.esm.js';
+
+const CheckboxGroupDefinition = defineComponent()(
+  {
+    styles,
+    classNames: {
+      root: "bui-CheckboxGroup",
+      content: "bui-CheckboxGroupContent"
+    },
+    propDefs: {
+      className: {},
+      children: {},
+      label: {},
+      secondaryLabel: {},
+      description: {},
+      isRequired: {},
+      orientation: {}
+    }
+  }
+);
+
+export { CheckboxGroupDefinition };
+//# sourceMappingURL=definition.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/CheckboxGroup/definition.ts"],"sourcesContent":["/*\n * Copyright 2026 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 { CheckboxGroupOwnProps } from './types';\nimport styles from './CheckboxGroup.module.css';\n\n/**\n * Component definition for CheckboxGroup\n * @public\n */\nexport const CheckboxGroupDefinition = defineComponent<CheckboxGroupOwnProps>()(\n  {\n    styles,\n    classNames: {\n      root: 'bui-CheckboxGroup',\n      content: 'bui-CheckboxGroupContent',\n    },\n    propDefs: {\n      className: {},\n      children: {},\n      label: {},\n      secondaryLabel: {},\n      description: {},\n      isRequired: {},\n      orientation: {},\n    },\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;AAwBO,MAAM,0BAA0B,eAAA,EAAuC;AAAA,EAC5E;AAAA,IACE,MAAA;AAAA,IACA,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,mBAAA;AAAA,MACN,OAAA,EAAS;AAAA,KACX;AAAA,IACA,QAAA,EAAU;AAAA,MACR,WAAW,EAAC;AAAA,MACZ,UAAU,EAAC;AAAA,MACX,OAAO,EAAC;AAAA,MACR,gBAAgB,EAAC;AAAA,MACjB,aAAa,EAAC;AAAA,MACd,YAAY,EAAC;AAAA,MACb,aAAa;AAAC;AAChB;AAEJ;;;;"}

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 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;;;;"}
+{"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/**\n * A centered layout wrapper that constrains content to a maximum width and provides consistent page-level padding.\n *\n * @public\n */\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":";;;;;AA0BO,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/definition.esm.js

@@ -4,6 +4,7 @@ import '../../hooks/useBreakpoint.esm.js';
 import '../../hooks/useBg.esm.js';
 import '../../hooks/useDefinition/helpers.esm.js';
 import '../../analytics/useAnalytics.esm.js';
+import 'react-router-dom';
 import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
 import styles from './Container.module.css.esm.js';
 

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 { 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;;;;"}
+{"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.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.esm.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport {\n  Dialog as RADialog,\n  DialogTrigger as RADialogTrigger,\n  Modal,\n  Heading,\n} from 'react-aria-components';\nimport type {\n  DialogTriggerProps,\n  DialogHeaderProps,\n  DialogProps,\n  DialogBodyProps,\n  DialogFooterProps,\n} from './types';\nimport { RiCloseLine } from '@remixicon/react';\nimport { Button } from '../Button';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n  DialogDefinition,\n  DialogHeaderDefinition,\n  DialogBodyDefinition,\n  DialogFooterDefinition,\n} from './definition';\nimport { Box } from '../Box';\nimport { BgReset } from '../../hooks/useBg';\nimport { Flex } from '../Flex';\n\n/** @public */\nexport const DialogTrigger = (props: DialogTriggerProps) => {\n  return <RADialogTrigger {...props} />;\n};\n\n/** @public */\nexport const Dialog = forwardRef<React.ElementRef<typeof Modal>, DialogProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(DialogDefinition, props, {\n      classNameTarget: 'dialog',\n    });\n    const { classes, children, width, height, style } = ownProps;\n\n    return (\n      <Modal\n        ref={ref}\n        className={classes.root}\n        isDismissable\n        isKeyboardDismissDisabled={false}\n        {...restProps}\n      >\n        <RADialog\n          className={classes.dialog}\n          style={{\n            ['--bui-dialog-min-width' as keyof React.CSSProperties]:\n              typeof width === 'number' ? `${width}px` : width || '400px',\n            ...(height\n              ? {\n                  ['--bui-dialog-height' as keyof React.CSSProperties]:\n                    typeof height === 'number' ? `${height}px` : height,\n                }\n              : {}),\n            ...style,\n          }}\n        >\n          <BgReset>\n            <Box bg=\"neutral\" className={classes.content}>\n              {children}\n            </Box>\n          </BgReset>\n        </RADialog>\n      </Modal>\n    );\n  },\n);\n\nDialog.displayName = 'Dialog';\n\n/** @public */\nexport const DialogHeader = forwardRef<\n  React.ElementRef<'div'>,\n  DialogHeaderProps\n>((props, ref) => {\n  const { ownProps, restProps } = useDefinition(DialogHeaderDefinition, props);\n  const { classes, children } = ownProps;\n\n  return (\n    <Flex ref={ref} className={classes.root} {...restProps}>\n      <Heading slot=\"title\" className={classes.title}>\n        {children}\n      </Heading>\n      <Button name=\"close\" aria-label=\"Close\" variant=\"tertiary\" slot=\"close\">\n        <RiCloseLine />\n      </Button>\n    </Flex>\n  );\n});\nDialogHeader.displayName = 'DialogHeader';\n\n/** @public */\nexport const DialogBody = forwardRef<React.ElementRef<'div'>, DialogBodyProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(DialogBodyDefinition, props);\n    const { classes, children } = ownProps;\n\n    return (\n      <div className={classes.root} ref={ref} {...restProps}>\n        {children}\n      </div>\n    );\n  },\n);\n\nDialogBody.displayName = 'DialogBody';\n\n/** @public */\nexport const DialogFooter = forwardRef<\n  React.ElementRef<'div'>,\n  DialogFooterProps\n>((props, ref) => {\n  const { ownProps, restProps } = useDefinition(DialogFooterDefinition, props);\n  const { classes, children } = ownProps;\n\n  return (\n    <div ref={ref} className={classes.root} {...restProps}>\n      {children}\n    </div>\n  );\n});\nDialogFooter.displayName = 'DialogFooter';\n"],"names":["RADialogTrigger","RADialog"],"mappings":"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"}
+{"version":3,"file":"Dialog.esm.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport {\n  Dialog as RADialog,\n  DialogTrigger as RADialogTrigger,\n  Modal,\n  Heading,\n} from 'react-aria-components';\nimport type {\n  DialogTriggerProps,\n  DialogHeaderProps,\n  DialogProps,\n  DialogBodyProps,\n  DialogFooterProps,\n} from './types';\nimport { RiCloseLine } from '@remixicon/react';\nimport { Button } from '../Button';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n  DialogDefinition,\n  DialogHeaderDefinition,\n  DialogBodyDefinition,\n  DialogFooterDefinition,\n} from './definition';\nimport { Box } from '../Box';\nimport { BgReset } from '../../hooks/useBg';\nimport { Flex } from '../Flex';\n\n/**\n * A wrapper that connects a trigger element to a Dialog, controlling its open and close state.\n *\n * @public\n */\nexport const DialogTrigger = (props: DialogTriggerProps) => {\n  return <RADialogTrigger {...props} />;\n};\n\n/**\n * A modal overlay that presents content requiring user interaction or acknowledgment, dismissible by clicking outside or pressing Escape.\n *\n * @public\n */\nexport const Dialog = forwardRef<React.ElementRef<typeof Modal>, DialogProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(DialogDefinition, props, {\n      classNameTarget: 'dialog',\n    });\n    const { classes, children, width, height, style } = ownProps;\n\n    return (\n      <Modal\n        ref={ref}\n        className={classes.root}\n        isDismissable\n        isKeyboardDismissDisabled={false}\n        {...restProps}\n      >\n        <RADialog\n          className={classes.dialog}\n          style={{\n            ['--bui-dialog-min-width' as keyof React.CSSProperties]:\n              typeof width === 'number' ? `${width}px` : width || '400px',\n            ...(height\n              ? {\n                  ['--bui-dialog-height' as keyof React.CSSProperties]:\n                    typeof height === 'number' ? `${height}px` : height,\n                }\n              : {}),\n            ...style,\n          }}\n        >\n          <BgReset>\n            <Box bg=\"neutral\" className={classes.content}>\n              {children}\n            </Box>\n          </BgReset>\n        </RADialog>\n      </Modal>\n    );\n  },\n);\n\nDialog.displayName = 'Dialog';\n\n/**\n * The header section of a Dialog, containing the title and a close button.\n *\n * @public\n */\nexport const DialogHeader = forwardRef<\n  React.ElementRef<'div'>,\n  DialogHeaderProps\n>((props, ref) => {\n  const { ownProps, restProps } = useDefinition(DialogHeaderDefinition, props);\n  const { classes, children } = ownProps;\n\n  return (\n    <Flex ref={ref} className={classes.root} {...restProps}>\n      <Heading slot=\"title\" className={classes.title}>\n        {children}\n      </Heading>\n      <Button name=\"close\" aria-label=\"Close\" variant=\"tertiary\" slot=\"close\">\n        <RiCloseLine />\n      </Button>\n    </Flex>\n  );\n});\nDialogHeader.displayName = 'DialogHeader';\n\n/**\n * The main scrollable content area of a Dialog.\n *\n * @public\n */\nexport const DialogBody = forwardRef<React.ElementRef<'div'>, DialogBodyProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(DialogBodyDefinition, props);\n    const { classes, children } = ownProps;\n\n    return (\n      <div className={classes.root} ref={ref} {...restProps}>\n        {children}\n      </div>\n    );\n  },\n);\n\nDialogBody.displayName = 'DialogBody';\n\n/**\n * The footer section of a Dialog, typically used to place action buttons.\n *\n * @public\n */\nexport const DialogFooter = forwardRef<\n  React.ElementRef<'div'>,\n  DialogFooterProps\n>((props, ref) => {\n  const { ownProps, restProps } = useDefinition(DialogFooterDefinition, props);\n  const { classes, children } = ownProps;\n\n  return (\n    <div ref={ref} className={classes.root} {...restProps}>\n      {children}\n    </div>\n  );\n});\nDialogFooter.displayName = 'DialogFooter';\n"],"names":["RADialogTrigger","RADialog"],"mappings":"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"}

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

@@ -4,6 +4,7 @@ import '../../hooks/useBreakpoint.esm.js';
 import '../../hooks/useBg.esm.js';
 import '../../hooks/useDefinition/helpers.esm.js';
 import '../../analytics/useAnalytics.esm.js';
+import 'react-router-dom';
 import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
 import styles from './Dialog.module.css.esm.js';
 

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

@@ -1 +1 @@
-{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Dialog/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type {\n  DialogOwnProps,\n  DialogHeaderOwnProps,\n  DialogBodyOwnProps,\n  DialogFooterOwnProps,\n} from './types';\nimport styles from './Dialog.module.css';\n\n/**\n * Component definition for Dialog\n * @public\n */\nexport const DialogDefinition = defineComponent<DialogOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-DialogOverlay',\n    dialog: 'bui-Dialog',\n    content: 'bui-DialogContent',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n    width: {},\n    height: {},\n    style: {},\n  },\n});\n\n/**\n * Component definition for DialogHeader\n * @public\n */\nexport const DialogHeaderDefinition = defineComponent<DialogHeaderOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-DialogHeader',\n    title: 'bui-DialogHeaderTitle',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n  },\n});\n\n/**\n * Component definition for DialogBody\n * @public\n */\nexport const DialogBodyDefinition = defineComponent<DialogBodyOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-DialogBody',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n  },\n});\n\n/**\n * Component definition for DialogFooter\n * @public\n */\nexport const DialogFooterDefinition = defineComponent<DialogFooterOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-DialogFooter',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;;AA6BO,MAAM,gBAAA,GAAmB,iBAAgC,CAAE;AAAA,EAChE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,mBAAA;AAAA,IACN,MAAA,EAAQ,YAAA;AAAA,IACR,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,OAAO,EAAC;AAAA,IACR,QAAQ,EAAC;AAAA,IACT,OAAO;AAAC;AAEZ,CAAC;AAMM,MAAM,sBAAA,GAAyB,iBAAsC,CAAE;AAAA,EAC5E,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,kBAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACT;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;AAMM,MAAM,oBAAA,GAAuB,iBAAoC,CAAE;AAAA,EACxE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;AAMM,MAAM,sBAAA,GAAyB,iBAAsC,CAAE;AAAA,EAC5E,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;;;;"}
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Dialog/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type {\n  DialogOwnProps,\n  DialogHeaderOwnProps,\n  DialogBodyOwnProps,\n  DialogFooterOwnProps,\n} from './types';\nimport styles from './Dialog.module.css';\n\n/**\n * Component definition for Dialog\n * @public\n */\nexport const DialogDefinition = defineComponent<DialogOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-DialogOverlay',\n    dialog: 'bui-Dialog',\n    content: 'bui-DialogContent',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n    width: {},\n    height: {},\n    style: {},\n  },\n});\n\n/**\n * Component definition for DialogHeader\n * @public\n */\nexport const DialogHeaderDefinition = defineComponent<DialogHeaderOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-DialogHeader',\n    title: 'bui-DialogHeaderTitle',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n  },\n});\n\n/**\n * Component definition for DialogBody\n * @public\n */\nexport const DialogBodyDefinition = defineComponent<DialogBodyOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-DialogBody',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n  },\n});\n\n/**\n * Component definition for DialogFooter\n * @public\n */\nexport const DialogFooterDefinition = defineComponent<DialogFooterOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-DialogFooter',\n  },\n  propDefs: {\n    children: {},\n    className: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;;;AA6BO,MAAM,gBAAA,GAAmB,iBAAgC,CAAE;AAAA,EAChE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,mBAAA;AAAA,IACN,MAAA,EAAQ,YAAA;AAAA,IACR,OAAA,EAAS;AAAA,GACX;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,OAAO,EAAC;AAAA,IACR,QAAQ,EAAC;AAAA,IACT,OAAO;AAAC;AAEZ,CAAC;AAMM,MAAM,sBAAA,GAAyB,iBAAsC,CAAE;AAAA,EAC5E,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,kBAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACT;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;AAMM,MAAM,oBAAA,GAAuB,iBAAoC,CAAE;AAAA,EACxE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;AAMM,MAAM,sBAAA,GAAyB,iBAAsC,CAAE;AAAA,EAC5E,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"FieldError.esm.js","sources":["../../../src/components/FieldError/FieldError.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { FieldError as AriaFieldError } from 'react-aria-components';\nimport type { FieldErrorProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { FieldErrorDefinition } from './definition';\n\n/** @public */\nexport const FieldError = forwardRef<HTMLDivElement, FieldErrorProps>(\n  (props: FieldErrorProps, ref) => {\n    const { ownProps, restProps } = useDefinition(FieldErrorDefinition, props);\n    const { classes } = ownProps;\n\n    return <AriaFieldError className={classes.root} ref={ref} {...restProps} />;\n  },\n);\n\nFieldError.displayName = 'FieldError';\n"],"names":["AriaFieldError"],"mappings":";;;;;;AAuBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAQ;AAC/B,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,sBAAsB,KAAK,CAAA;AACzE,IAAA,MAAM,EAAE,SAAQ,GAAI,QAAA;AAEpB,IAAA,2BAAQA,YAAA,EAAA,EAAe,SAAA,EAAW,QAAQ,IAAA,EAAM,GAAA,EAAW,GAAG,SAAA,EAAW,CAAA;AAAA,EAC3E;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
+{"version":3,"file":"FieldError.esm.js","sources":["../../../src/components/FieldError/FieldError.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { FieldError as AriaFieldError } from 'react-aria-components';\nimport type { FieldErrorProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { FieldErrorDefinition } from './definition';\n\n/**\n * Displays a validation error message associated with a form field.\n *\n * @public\n */\nexport const FieldError = forwardRef<HTMLDivElement, FieldErrorProps>(\n  (props: FieldErrorProps, ref) => {\n    const { ownProps, restProps } = useDefinition(FieldErrorDefinition, props);\n    const { classes } = ownProps;\n\n    return <AriaFieldError className={classes.root} ref={ref} {...restProps} />;\n  },\n);\n\nFieldError.displayName = 'FieldError';\n"],"names":["AriaFieldError"],"mappings":";;;;;;AA2BO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAQ;AAC/B,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,sBAAsB,KAAK,CAAA;AACzE,IAAA,MAAM,EAAE,SAAQ,GAAI,QAAA;AAEpB,IAAA,2BAAQA,YAAA,EAAA,EAAe,SAAA,EAAW,QAAQ,IAAA,EAAM,GAAA,EAAW,GAAG,SAAA,EAAW,CAAA;AAAA,EAC3E;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}

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

@@ -4,6 +4,7 @@ import '../../hooks/useBreakpoint.esm.js';
 import '../../hooks/useBg.esm.js';
 import '../../hooks/useDefinition/helpers.esm.js';
 import '../../analytics/useAnalytics.esm.js';
+import 'react-router-dom';
 import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
 import styles from './FieldError.module.css.esm.js';
 

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

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

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

@@ -7,7 +7,15 @@ import { FieldLabelDefinition } from './definition.esm.js';
 const FieldLabel = forwardRef(
   (props, ref) => {
     const { ownProps, restProps } = useDefinition(FieldLabelDefinition, props);
-    const { classes, label, secondaryLabel, description, htmlFor, id } = ownProps;
+    const {
+      classes,
+      label,
+      secondaryLabel,
+      description,
+      htmlFor,
+      id,
+      descriptionId
+    } = ownProps;
     if (!label) return null;
     return /* @__PURE__ */ jsxs("div", { className: classes.root, ...restProps, ref, children: [
       label && /* @__PURE__ */ jsxs(Label, { className: classes.label, htmlFor, id, children: [
@@ -18,7 +26,7 @@ const FieldLabel = forwardRef(
           ")"
         ] })
       ] }),
-      description && /* @__PURE__ */ jsx("div", { className: classes.description, children: description })
+      description && /* @__PURE__ */ jsx("div", { className: classes.description, id: descriptionId, children: description })
     ] });
   }
 );

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 { 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;;;;"}
+{"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/**\n * Renders a label for a form field with optional secondary label and description text.\n *\n * @public\n */\nexport const FieldLabel = forwardRef<HTMLDivElement, FieldLabelProps>(\n  (props: FieldLabelProps, ref) => {\n    const { ownProps, restProps } = useDefinition(FieldLabelDefinition, props);\n    const {\n      classes,\n      label,\n      secondaryLabel,\n      description,\n      htmlFor,\n      id,\n      descriptionId,\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} id={descriptionId}>\n            {description}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nFieldLabel.displayName = 'FieldLabel';\n"],"names":[],"mappings":";;;;;;AA0BO,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;AAAA,MACJ,OAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,EAAA;AAAA,MACA;AAAA,KACF,GAAI,QAAA;AAEJ,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,WAAA,wBACE,KAAA,EAAA,EAAI,SAAA,EAAW,QAAQ,WAAA,EAAa,EAAA,EAAI,eACtC,QAAA,EAAA,WAAA,EACH;AAAA,KAAA,EAEJ,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}

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

@@ -4,6 +4,7 @@ import '../../hooks/useBreakpoint.esm.js';
 import '../../hooks/useBg.esm.js';
 import '../../hooks/useDefinition/helpers.esm.js';
 import '../../analytics/useAnalytics.esm.js';
+import 'react-router-dom';
 import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
 import styles from './FieldLabel.module.css.esm.js';
 
@@ -21,6 +22,7 @@ const FieldLabelDefinition = defineComponent()({
     description: {},
     htmlFor: {},
     id: {},
+    descriptionId: {},
     className: {}
   }
 });

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 { 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;;;;"}
+{"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    descriptionId: {},\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,eAAe,EAAC;AAAA,IAChB,WAAW;AAAC;AAEhB,CAAC;;;;"}

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 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, restProps } = 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      {...restProps}\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,EAAc,WAAU,GAAI,aAAA;AAAA,IAC5D,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,MACH,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
+{"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/**\n * A flexbox layout container with props for controlling gap, alignment, justification, and direction.\n *\n * @public\n */\nexport const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {\n  const { ownProps, dataAttributes, utilityStyle, restProps } = 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      {...restProps}\n    >\n      {childrenWithBgProvider}\n    </div>\n  );\n});\n\nFlex.displayName = 'Flex';\n"],"names":[],"mappings":";;;;;AA0BO,MAAM,IAAA,GAAO,UAAA,CAAsC,CAAC,KAAA,EAAO,GAAA,KAAQ;AACxE,EAAA,MAAM,EAAE,QAAA,EAAU,cAAA,EAAgB,YAAA,EAAc,WAAU,GAAI,aAAA;AAAA,IAC5D,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,MACH,GAAG,SAAA;AAAA,MAEH,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}

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

@@ -4,6 +4,7 @@ import '../../hooks/useBreakpoint.esm.js';
 import '../../hooks/useBg.esm.js';
 import '../../hooks/useDefinition/helpers.esm.js';
 import '../../analytics/useAnalytics.esm.js';
+import 'react-router-dom';
 import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
 import styles from './Flex.module.css.esm.js';
 

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 { 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;;;;"}
+{"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/definition.esm.js

@@ -4,6 +4,7 @@ import '../../hooks/useBreakpoint.esm.js';
 import '../../hooks/useBg.esm.js';
 import '../../hooks/useDefinition/helpers.esm.js';
 import '../../analytics/useAnalytics.esm.js';
+import 'react-router-dom';
 import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
 import styles from './FullPage.module.css.esm.js';
 

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 { 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;;;;"}
+{"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/definition.esm.js

@@ -4,6 +4,7 @@ import '../../hooks/useBreakpoint.esm.js';
 import '../../hooks/useBg.esm.js';
 import '../../hooks/useDefinition/helpers.esm.js';
 import '../../analytics/useAnalytics.esm.js';
+import 'react-router-dom';
 import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
 import styles from './Grid.module.css.esm.js';
 

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 { 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;;;;"}
+{"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/Header/Header.esm.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } 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';

package/dist/components/Header/HeaderNav.esm.js

@@ -1,6 +1,7 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useRef, useState, useMemo, useCallback } from 'react';
 import { useFocusVisible, useHover, useLink } from 'react-aria';
+import { useInRouterContext, useResolvedPath, useLocation, resolvePath, matchRoutes } from 'react-router-dom';
 import { Button } from 'react-aria-components';
 import { RiArrowDownSLine } from '@remixicon/react';
 import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
@@ -13,18 +14,18 @@ function isTabGroup(tab) {
   return "items" in tab;
 }
 function HeaderNavLink(props) {
-  const { tab, active, analytics, registerRef, onHighlight } = props;
-  const { ownProps } = useDefinition(HeaderNavItemDefinition, {});
+  const { ownProps, analytics } = useDefinition(HeaderNavItemDefinition, props);
+  const { id, label, href, active, registerRef, onHighlight } = ownProps;
   const linkRef = useRef(null);
-  const { linkProps } = useLink({ href: tab.href }, linkRef);
+  const { linkProps } = useLink({ href }, linkRef);
   const { hoverProps } = useHover({
-    onHoverStart: () => onHighlight(tab.id),
+    onHoverStart: () => onHighlight(id),
     onHoverEnd: () => onHighlight(null)
   });
   const handleClick = (e) => {
     linkProps.onClick?.(e);
-    analytics.captureEvent("click", tab.label, {
-      attributes: { to: tab.href }
+    analytics.captureEvent("click", label, {
+      attributes: { to: href }
     });
   };
   return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
@@ -34,15 +35,15 @@ function HeaderNavLink(props) {
       ...hoverProps,
       ref: (el) => {
         linkRef.current = el;
-        registerRef(tab.id, el);
+        registerRef(id, el);
       },
-      href: tab.href,
+      href,
       className: ownProps.classes.root,
       "aria-current": active ? "page" : void 0,
       onClick: handleClick,
-      onFocus: () => onHighlight(tab.id),
+      onFocus: () => onHighlight(id),
       onBlur: () => onHighlight(null),
-      children: tab.label
+      children: label
     }
   ) });
 }
@@ -81,9 +82,26 @@ function HeaderNavGroupItem(props) {
     )
   ] }) });
 }
-function HeaderNav(props) {
+function useAutoActiveTabId(tabs) {
+  const basePath = useResolvedPath(".").pathname;
+  const { pathname } = useLocation();
+  return useMemo(() => {
+    const allTabs = tabs.flatMap((tab) => isTabGroup(tab) ? tab.items : [tab]);
+    const routeObjects = allTabs.map((tab) => ({
+      path: `${resolvePath(tab.href, basePath).pathname}/*`,
+      id: tab.id
+    }));
+    const matches = matchRoutes(routeObjects, pathname);
+    return matches?.[0]?.route.id;
+  }, [tabs, basePath, pathname]);
+}
+function HeaderNavAutoDetect(props) {
+  const activeTabId = useAutoActiveTabId(props.tabs);
+  return /* @__PURE__ */ jsx(HeaderNavInner, { tabs: props.tabs, activeTabId });
+}
+function HeaderNavInner(props) {
   const { tabs, activeTabId } = props;
-  const { ownProps, analytics } = useDefinition(HeaderNavDefinition, {
+  const { ownProps } = useDefinition(HeaderNavDefinition, {
     tabs,
     activeTabId
   });
@@ -135,9 +153,10 @@ function HeaderNav(props) {
           ) : /* @__PURE__ */ jsx(
             HeaderNavLink,
             {
-              tab: item,
+              id: item.id,
+              label: item.label,
+              href: item.href,
               active: activeKey === item.id,
-              analytics,
               registerRef,
               onHighlight: setHighlightedKey
             },
@@ -158,6 +177,13 @@ function HeaderNav(props) {
     }
   );
 }
+function HeaderNav(props) {
+  const inRouter = useInRouterContext();
+  if (props.activeTabId === void 0 && inRouter) {
+    return /* @__PURE__ */ jsx(HeaderNavAutoDetect, { tabs: props.tabs });
+  }
+  return /* @__PURE__ */ jsx(HeaderNavInner, { tabs: props.tabs, activeTabId: props.activeTabId });
+}
 
 export { HeaderNav };
 //# sourceMappingURL=HeaderNav.esm.js.map

package/dist/components/Header/HeaderNav.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderNav.esm.js","sources":["../../../src/components/Header/HeaderNav.tsx"],"sourcesContent":["/*\n * Copyright 2026 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 { useCallback, useMemo, useRef, useState } from 'react';\nimport { useFocusVisible, useHover, useLink } from 'react-aria';\nimport { Button as RAButton } from 'react-aria-components';\nimport { RiArrowDownSLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n  HeaderNavDefinition,\n  HeaderNavItemDefinition,\n  HeaderNavGroupDefinition,\n} from './HeaderNavDefinition';\nimport { HeaderNavIndicators } from './HeaderNavIndicators';\nimport { MenuTrigger, Menu, MenuItem } from '../Menu';\nimport type { AnalyticsTracker } from '../../analytics/types';\nimport type {\n  HeaderNavTab,\n  HeaderNavTabGroup,\n  HeaderNavTabItem,\n} from './types';\n\nfunction isTabGroup(tab: HeaderNavTabItem): tab is HeaderNavTabGroup {\n  return 'items' in tab;\n}\n\ninterface HeaderNavLinkProps {\n  tab: HeaderNavTab;\n  active: boolean;\n  analytics: AnalyticsTracker;\n  registerRef: (key: string, el: HTMLElement | null) => void;\n  onHighlight: (key: string | null) => void;\n}\n\nfunction HeaderNavLink(props: HeaderNavLinkProps) {\n  const { tab, active, analytics, registerRef, onHighlight } = props;\n  const { ownProps } = useDefinition(HeaderNavItemDefinition, {});\n\n  const linkRef = useRef<HTMLAnchorElement>(null);\n  const { linkProps } = useLink({ href: tab.href }, linkRef);\n  const { hoverProps } = useHover({\n    onHoverStart: () => onHighlight(tab.id),\n    onHoverEnd: () => onHighlight(null),\n  });\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    linkProps.onClick?.(e);\n    analytics.captureEvent('click', tab.label, {\n      attributes: { to: tab.href },\n    });\n  };\n\n  return (\n    <li>\n      <a\n        {...linkProps}\n        {...hoverProps}\n        ref={el => {\n          (\n            linkRef as React.MutableRefObject<HTMLAnchorElement | null>\n          ).current = el;\n          registerRef(tab.id, el);\n        }}\n        href={tab.href}\n        className={ownProps.classes.root}\n        aria-current={active ? 'page' : undefined}\n        onClick={handleClick}\n        onFocus={() => onHighlight(tab.id)}\n        onBlur={() => onHighlight(null)}\n      >\n        {tab.label}\n      </a>\n    </li>\n  );\n}\n\ninterface HeaderNavGroupItemProps {\n  group: HeaderNavTabGroup;\n  active: boolean;\n  activeChildId?: string;\n  registerRef: (key: string, el: HTMLElement | null) => void;\n  onHighlight: (key: string | null) => void;\n}\n\nfunction HeaderNavGroupItem(props: HeaderNavGroupItemProps) {\n  const { group, active, activeChildId, registerRef, onHighlight } = props;\n  const { ownProps } = useDefinition(HeaderNavGroupDefinition, {});\n  const { hoverProps } = useHover({\n    onHoverStart: () => onHighlight(group.id),\n    onHoverEnd: () => onHighlight(null),\n  });\n\n  return (\n    <li>\n      <MenuTrigger>\n        <RAButton\n          ref={el => {\n            registerRef(group.id, el);\n          }}\n          className={ownProps.classes.root}\n          aria-current={active ? 'page' : undefined}\n          {...hoverProps}\n          onFocus={() => onHighlight(group.id)}\n          onBlur={() => onHighlight(null)}\n        >\n          {group.label}\n          <RiArrowDownSLine size={16} />\n        </RAButton>\n        <Menu\n          selectionMode=\"single\"\n          selectedKeys={new Set(activeChildId ? [activeChildId] : [])}\n        >\n          {group.items.map(item => (\n            <MenuItem key={item.id} id={item.id} href={item.href}>\n              {item.label}\n            </MenuItem>\n          ))}\n        </Menu>\n      </MenuTrigger>\n    </li>\n  );\n}\n\ninterface HeaderNavProps {\n  tabs: HeaderNavTabItem[];\n  activeTabId?: string;\n}\n\n/** @internal */\nexport function HeaderNav(props: HeaderNavProps) {\n  const { tabs, activeTabId } = props;\n  const { ownProps, analytics } = useDefinition(HeaderNavDefinition, {\n    tabs,\n    activeTabId,\n  });\n  const { classes } = ownProps;\n\n  const { isFocusVisible } = useFocusVisible();\n  const navRef = useRef<HTMLElement>(null);\n  const itemRefs = useRef<Map<string, HTMLElement>>(new Map());\n\n  const [highlightedKey, setHighlightedKey] = useState<string | null>(null);\n\n  // Resolve activeTabId to a top-level key (groups own their children's active state)\n  const { activeKey, activeChildId } = useMemo(() => {\n    if (!activeTabId) return { activeKey: undefined, activeChildId: undefined };\n    for (const item of tabs) {\n      if (isTabGroup(item)) {\n        const child = item.items.find(c => c.id === activeTabId);\n        if (child) {\n          return { activeKey: item.id, activeChildId: child.id };\n        }\n      } else if (item.id === activeTabId) {\n        return { activeKey: item.id, activeChildId: undefined };\n      }\n    }\n    return { activeKey: undefined, activeChildId: undefined };\n  }, [activeTabId, tabs]);\n\n  const registerRef = useCallback((key: string, el: HTMLElement | null) => {\n    if (el) {\n      itemRefs.current.set(key, el);\n    } else {\n      itemRefs.current.delete(key);\n    }\n  }, []);\n\n  return (\n    <nav\n      ref={navRef}\n      aria-label=\"Content navigation\"\n      className={classes.root}\n      data-focus-visible={isFocusVisible || undefined}\n    >\n      <ul role=\"list\" className={classes.list}>\n        {tabs.map(item =>\n          isTabGroup(item) ? (\n            <HeaderNavGroupItem\n              key={item.id}\n              group={item}\n              active={activeKey === item.id}\n              activeChildId={activeChildId}\n              registerRef={registerRef}\n              onHighlight={setHighlightedKey}\n            />\n          ) : (\n            <HeaderNavLink\n              key={item.id}\n              tab={item}\n              active={activeKey === item.id}\n              analytics={analytics}\n              registerRef={registerRef}\n              onHighlight={setHighlightedKey}\n            />\n          ),\n        )}\n      </ul>\n      <HeaderNavIndicators\n        navRef={navRef}\n        itemRefs={itemRefs}\n        activeKey={activeKey}\n        highlightedKey={highlightedKey}\n        classes={{ active: classes.active, hovered: classes.hovered }}\n      />\n    </nav>\n  );\n}\n"],"names":["RAButton"],"mappings":"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"}
+{"version":3,"file":"HeaderNav.esm.js","sources":["../../../src/components/Header/HeaderNav.tsx"],"sourcesContent":["/*\n * Copyright 2026 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 { useCallback, useMemo, useRef, useState } from 'react';\nimport { useFocusVisible, useHover, useLink } from 'react-aria';\nimport {\n  matchRoutes,\n  resolvePath,\n  useInRouterContext,\n  useLocation,\n  useResolvedPath,\n} from 'react-router-dom';\nimport { Button as RAButton } from 'react-aria-components';\nimport { RiArrowDownSLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n  HeaderNavDefinition,\n  HeaderNavItemDefinition,\n  HeaderNavGroupDefinition,\n} from './HeaderNavDefinition';\nimport { HeaderNavIndicators } from './HeaderNavIndicators';\nimport { MenuTrigger, Menu, MenuItem } from '../Menu';\nimport type {\n  HeaderNavLinkProps,\n  HeaderNavTabGroup,\n  HeaderNavTabItem,\n} from './types';\n\nfunction isTabGroup(tab: HeaderNavTabItem): tab is HeaderNavTabGroup {\n  return 'items' in tab;\n}\n\nfunction HeaderNavLink(props: HeaderNavLinkProps) {\n  const { ownProps, analytics } = useDefinition(HeaderNavItemDefinition, props);\n  const { id, label, href, active, registerRef, onHighlight } = ownProps;\n\n  const linkRef = useRef<HTMLAnchorElement>(null);\n  const { linkProps } = useLink({ href }, linkRef);\n  const { hoverProps } = useHover({\n    onHoverStart: () => onHighlight(id),\n    onHoverEnd: () => onHighlight(null),\n  });\n\n  const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n    linkProps.onClick?.(e);\n    analytics.captureEvent('click', label, {\n      attributes: { to: href },\n    });\n  };\n\n  return (\n    <li>\n      <a\n        {...linkProps}\n        {...hoverProps}\n        ref={el => {\n          (\n            linkRef as React.MutableRefObject<HTMLAnchorElement | null>\n          ).current = el;\n          registerRef(id, el);\n        }}\n        href={href}\n        className={ownProps.classes.root}\n        aria-current={active ? 'page' : undefined}\n        onClick={handleClick}\n        onFocus={() => onHighlight(id)}\n        onBlur={() => onHighlight(null)}\n      >\n        {label}\n      </a>\n    </li>\n  );\n}\n\ninterface HeaderNavGroupItemProps {\n  group: HeaderNavTabGroup;\n  active: boolean;\n  activeChildId?: string;\n  registerRef: (key: string, el: HTMLElement | null) => void;\n  onHighlight: (key: string | null) => void;\n}\n\nfunction HeaderNavGroupItem(props: HeaderNavGroupItemProps) {\n  const { group, active, activeChildId, registerRef, onHighlight } = props;\n  const { ownProps } = useDefinition(HeaderNavGroupDefinition, {});\n  const { hoverProps } = useHover({\n    onHoverStart: () => onHighlight(group.id),\n    onHoverEnd: () => onHighlight(null),\n  });\n\n  return (\n    <li>\n      <MenuTrigger>\n        <RAButton\n          ref={el => {\n            registerRef(group.id, el);\n          }}\n          className={ownProps.classes.root}\n          aria-current={active ? 'page' : undefined}\n          {...hoverProps}\n          onFocus={() => onHighlight(group.id)}\n          onBlur={() => onHighlight(null)}\n        >\n          {group.label}\n          <RiArrowDownSLine size={16} />\n        </RAButton>\n        <Menu\n          selectionMode=\"single\"\n          selectedKeys={new Set(activeChildId ? [activeChildId] : [])}\n        >\n          {group.items.map(item => (\n            <MenuItem key={item.id} id={item.id} href={item.href}>\n              {item.label}\n            </MenuItem>\n          ))}\n        </Menu>\n      </MenuTrigger>\n    </li>\n  );\n}\n\ninterface HeaderNavProps {\n  tabs: HeaderNavTabItem[];\n  activeTabId?: string | null;\n}\n\nfunction useAutoActiveTabId(tabs: HeaderNavTabItem[]): string | undefined {\n  const basePath = useResolvedPath('.').pathname;\n  const { pathname } = useLocation();\n\n  return useMemo(() => {\n    const allTabs = tabs.flatMap(tab => (isTabGroup(tab) ? tab.items : [tab]));\n    const routeObjects = allTabs.map(tab => ({\n      path: `${resolvePath(tab.href, basePath).pathname}/*`,\n      id: tab.id,\n    }));\n    const matches = matchRoutes(routeObjects, pathname);\n    return matches?.[0]?.route.id;\n  }, [tabs, basePath, pathname]);\n}\n\nfunction HeaderNavAutoDetect(props: { tabs: HeaderNavTabItem[] }) {\n  const activeTabId = useAutoActiveTabId(props.tabs);\n  return <HeaderNavInner tabs={props.tabs} activeTabId={activeTabId} />;\n}\n\nfunction HeaderNavInner(props: HeaderNavProps) {\n  const { tabs, activeTabId } = props;\n  const { ownProps } = useDefinition(HeaderNavDefinition, {\n    tabs,\n    activeTabId,\n  });\n  const { classes } = ownProps;\n\n  const { isFocusVisible } = useFocusVisible();\n  const navRef = useRef<HTMLElement>(null);\n  const itemRefs = useRef<Map<string, HTMLElement>>(new Map());\n\n  const [highlightedKey, setHighlightedKey] = useState<string | null>(null);\n\n  // Resolve activeTabId to a top-level key (groups own their children's active state)\n  const { activeKey, activeChildId } = useMemo(() => {\n    if (!activeTabId) return { activeKey: undefined, activeChildId: undefined };\n    for (const item of tabs) {\n      if (isTabGroup(item)) {\n        const child = item.items.find(c => c.id === activeTabId);\n        if (child) {\n          return { activeKey: item.id, activeChildId: child.id };\n        }\n      } else if (item.id === activeTabId) {\n        return { activeKey: item.id, activeChildId: undefined };\n      }\n    }\n    return { activeKey: undefined, activeChildId: undefined };\n  }, [activeTabId, tabs]);\n\n  const registerRef = useCallback((key: string, el: HTMLElement | null) => {\n    if (el) {\n      itemRefs.current.set(key, el);\n    } else {\n      itemRefs.current.delete(key);\n    }\n  }, []);\n\n  return (\n    <nav\n      ref={navRef}\n      aria-label=\"Content navigation\"\n      className={classes.root}\n      data-focus-visible={isFocusVisible || undefined}\n    >\n      <ul role=\"list\" className={classes.list}>\n        {tabs.map(item =>\n          isTabGroup(item) ? (\n            <HeaderNavGroupItem\n              key={item.id}\n              group={item}\n              active={activeKey === item.id}\n              activeChildId={activeChildId}\n              registerRef={registerRef}\n              onHighlight={setHighlightedKey}\n            />\n          ) : (\n            <HeaderNavLink\n              key={item.id}\n              id={item.id}\n              label={item.label}\n              href={item.href}\n              active={activeKey === item.id}\n              registerRef={registerRef}\n              onHighlight={setHighlightedKey}\n            />\n          ),\n        )}\n      </ul>\n      <HeaderNavIndicators\n        navRef={navRef}\n        itemRefs={itemRefs}\n        activeKey={activeKey}\n        highlightedKey={highlightedKey}\n        classes={{ active: classes.active, hovered: classes.hovered }}\n      />\n    </nav>\n  );\n}\n\n/** @internal */\nexport function HeaderNav(props: HeaderNavProps) {\n  const inRouter = useInRouterContext();\n\n  if (props.activeTabId === undefined && inRouter) {\n    return <HeaderNavAutoDetect tabs={props.tabs} />;\n  }\n\n  return <HeaderNavInner tabs={props.tabs} activeTabId={props.activeTabId} />;\n}\n"],"names":["RAButton"],"mappings":"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"}

package/dist/components/Header/HeaderNav.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 2026 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  .HeaderNav_bui-HeaderNav__3fece2b79e {\n    position: relative;\n\n    /* CSS custom properties for indicator positioning — set by HeaderNavIndicators */\n    --active-tab-left: 0px;\n    --active-tab-right: 0px;\n    --active-tab-top: 0px;\n    --active-tab-bottom: 0px;\n    --active-tab-width: 0px;\n    --active-tab-height: 0px;\n    --active-tab-opacity: 0;\n    --active-transition-duration: 0s;\n\n    --hovered-tab-left: 0px;\n    --hovered-tab-right: 0px;\n    --hovered-tab-top: 0px;\n    --hovered-tab-bottom: 0px;\n    --hovered-tab-width: 0px;\n    --hovered-tab-height: 0px;\n    --hovered-tab-opacity: 0;\n    --hovered-transition-duration: 0s;\n  }\n\n  .HeaderNav_bui-HeaderNavList__3fece2b79e {\n    display: flex;\n    flex-direction: row;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  .HeaderNav_bui-HeaderNavItem__3fece2b79e,\n  .HeaderNav_bui-HeaderNavGroup__3fece2b79e {\n    font-family: var(--bui-font-family);\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-secondary);\n    height: 36px;\n    display: flex;\n    gap: var(--bui-space-1);\n    align-items: center;\n    padding-inline: var(--bui-space-2);\n    text-decoration: none;\n    cursor: pointer;\n    border: none;\n    background: none;\n    outline: none;\n  }\n\n  .HeaderNav_bui-HeaderNavItem__3fece2b79e[aria-current='page'],\n  .HeaderNav_bui-HeaderNavGroup__3fece2b79e[aria-current='page'] {\n    color: var(--bui-fg-primary);\n  }\n\n  .HeaderNav_bui-HeaderNavActive__3fece2b79e {\n    pointer-events: none;\n    position: absolute;\n    bottom: -1px;\n    left: calc(var(--active-tab-left) + var(--bui-space-2));\n    width: calc(var(--active-tab-width) - var(--bui-space-4));\n    height: 1px;\n    background-color: var(--bui-fg-primary);\n    border-radius: 4px;\n    opacity: var(--active-tab-opacity);\n    transition: left var(--active-transition-duration) ease-out,\n      width var(--active-transition-duration) ease-out, opacity 0.15s;\n  }\n\n  .HeaderNav_bui-HeaderNavHovered__3fece2b79e {\n    pointer-events: none;\n    position: absolute;\n    left: var(--hovered-tab-left);\n    top: calc(var(--hovered-tab-top) + 4px);\n    width: var(--hovered-tab-width);\n    height: calc(var(--hovered-tab-height) - 8px);\n    background-color: var(--bui-bg-neutral-2);\n    border-radius: 4px;\n    opacity: var(--hovered-tab-opacity);\n    transition: left var(--hovered-transition-duration) ease-out,\n      top var(--hovered-transition-duration) ease-out,\n      width var(--hovered-transition-duration) ease-out,\n      height var(--hovered-transition-duration) ease-out, opacity 0.15s;\n\n    [data-focus-visible] & {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: -2px;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .HeaderNav_bui-HeaderNavActive__3fece2b79e,\n    .HeaderNav_bui-HeaderNavHovered__3fece2b79e {\n      transition: none;\n    }\n  }\n}\n";
-var styles = {"bui-HeaderNav":"HeaderNav_bui-HeaderNav__3fece2b79e","bui-HeaderNavList":"HeaderNav_bui-HeaderNavList__3fece2b79e","bui-HeaderNavItem":"HeaderNav_bui-HeaderNavItem__3fece2b79e","bui-HeaderNavGroup":"HeaderNav_bui-HeaderNavGroup__3fece2b79e","bui-HeaderNavActive":"HeaderNav_bui-HeaderNavActive__3fece2b79e","bui-HeaderNavHovered":"HeaderNav_bui-HeaderNavHovered__3fece2b79e"};
+var css_248z = "/*\n * Copyright 2026 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  .HeaderNav_bui-HeaderNav__203c060f73 {\n    position: relative;\n\n    /* CSS custom properties for indicator positioning — set by HeaderNavIndicators */\n    --active-tab-left: 0px;\n    --active-tab-right: 0px;\n    --active-tab-top: 0px;\n    --active-tab-bottom: 0px;\n    --active-tab-width: 0px;\n    --active-tab-height: 0px;\n    --active-tab-opacity: 0;\n    --active-transition-duration: 0s;\n\n    --hovered-tab-left: 0px;\n    --hovered-tab-right: 0px;\n    --hovered-tab-top: 0px;\n    --hovered-tab-bottom: 0px;\n    --hovered-tab-width: 0px;\n    --hovered-tab-height: 0px;\n    --hovered-tab-opacity: 0;\n    --hovered-transition-duration: 0s;\n  }\n\n  .HeaderNav_bui-HeaderNavList__203c060f73 {\n    display: flex;\n    flex-direction: row;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  .HeaderNav_bui-HeaderNavItem__203c060f73,\n  .HeaderNav_bui-HeaderNavGroup__203c060f73 {\n    font-family: var(--bui-font-regular);\n    font-size: var(--bui-font-size-3);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-secondary);\n    height: 36px;\n    display: flex;\n    gap: var(--bui-space-1);\n    align-items: center;\n    padding-inline: var(--bui-space-2);\n    text-decoration: none;\n    cursor: pointer;\n    position: relative;\n    z-index: 2;\n    border: none;\n    background: none;\n    outline: none;\n  }\n\n  .HeaderNav_bui-HeaderNavItem__203c060f73[aria-current='page'],\n  .HeaderNav_bui-HeaderNavGroup__203c060f73[aria-current='page'] {\n    color: var(--bui-fg-primary);\n  }\n\n  .HeaderNav_bui-HeaderNavActive__203c060f73 {\n    pointer-events: none;\n    position: absolute;\n    bottom: -1px;\n    left: calc(var(--active-tab-left) + var(--bui-space-2));\n    width: calc(var(--active-tab-width) - var(--bui-space-4));\n    height: 1px;\n    background-color: var(--bui-fg-primary);\n    border-radius: 4px;\n    opacity: var(--active-tab-opacity);\n    transition: left var(--active-transition-duration) ease-out,\n      width var(--active-transition-duration) ease-out, opacity 0.15s;\n  }\n\n  .HeaderNav_bui-HeaderNavHovered__203c060f73 {\n    pointer-events: none;\n    position: absolute;\n    left: var(--hovered-tab-left);\n    top: calc(var(--hovered-tab-top) + 4px);\n    width: var(--hovered-tab-width);\n    height: calc(var(--hovered-tab-height) - 8px);\n    background-color: var(--bui-bg-neutral-2);\n    border-radius: 4px;\n    opacity: var(--hovered-tab-opacity);\n    transition: left var(--hovered-transition-duration) ease-out,\n      top var(--hovered-transition-duration) ease-out,\n      width var(--hovered-transition-duration) ease-out,\n      height var(--hovered-transition-duration) ease-out, opacity 0.15s;\n\n    [data-focus-visible] & {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: -2px;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .HeaderNav_bui-HeaderNavActive__203c060f73,\n    .HeaderNav_bui-HeaderNavHovered__203c060f73 {\n      transition: none;\n    }\n  }\n}\n";
+var styles = {"bui-HeaderNav":"HeaderNav_bui-HeaderNav__203c060f73","bui-HeaderNavList":"HeaderNav_bui-HeaderNavList__203c060f73","bui-HeaderNavItem":"HeaderNav_bui-HeaderNavItem__203c060f73","bui-HeaderNavGroup":"HeaderNav_bui-HeaderNavGroup__203c060f73","bui-HeaderNavActive":"HeaderNav_bui-HeaderNavActive__203c060f73","bui-HeaderNavHovered":"HeaderNav_bui-HeaderNavHovered__203c060f73"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/Header/HeaderNavDefinition.esm.js

@@ -4,6 +4,7 @@ import '../../hooks/useBreakpoint.esm.js';
 import '../../hooks/useBg.esm.js';
 import '../../hooks/useDefinition/helpers.esm.js';
 import '../../analytics/useAnalytics.esm.js';
+import 'react-router-dom';
 import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
 import styles from './HeaderNav.module.css.esm.js';
 
@@ -15,9 +16,7 @@ const HeaderNavDefinition = defineComponent()({
     active: "bui-HeaderNavActive",
     hovered: "bui-HeaderNavHovered"
   },
-  analytics: true,
   propDefs: {
-    noTrack: {},
     tabs: {},
     activeTabId: {},
     children: {},
@@ -29,7 +28,16 @@ const HeaderNavItemDefinition = defineComponent()({
   classNames: {
     root: "bui-HeaderNavItem"
   },
+  analytics: true,
+  resolveHref: true,
   propDefs: {
+    noTrack: {},
+    id: {},
+    label: {},
+    href: {},
+    active: {},
+    registerRef: {},
+    onHighlight: {},
     className: {}
   }
 });