@backstage/ui 0.12.0-next.1 → 0.12.0-next.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordField.esm.js","sources":["../../../src/components/PasswordField/PasswordField.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, useEffect, useState } from 'react';\nimport {\n  Input,\n  TextField as AriaTextField,\n  Button as RAButton,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\n\nimport type { PasswordFieldProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { PasswordFieldDefinition } from './definition';\nimport { RiEyeLine, RiEyeOffLine } from '@remixicon/react';\nimport stylesPasswordField from './PasswordField.module.css';\n\n/** @public */\nexport const PasswordField = forwardRef<HTMLDivElement, PasswordFieldProps>(\n  (props, ref) => {\n    const {\n      label,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n    } = props;\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'PasswordField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const {\n      classNames: classNamesPasswordField,\n      dataAttributes,\n      cleanedProps,\n    } = useStyles(PasswordFieldDefinition, {\n      size: 'small',\n      ...props,\n    });\n\n    const {\n      className,\n      description,\n      icon,\n      isRequired,\n      secondaryLabel,\n      placeholder,\n      ...rest\n    } = cleanedProps;\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    // Manage secret visibility toggle\n    const [isVisible, setIsVisible] = useState(false);\n\n    return (\n      <AriaTextField\n        className={clsx(\n          classNamesPasswordField.root,\n          stylesPasswordField[classNamesPasswordField.root],\n          className,\n        )}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        type=\"password\"\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={clsx(\n            classNamesPasswordField.inputWrapper,\n            stylesPasswordField[classNamesPasswordField.inputWrapper],\n          )}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon && (\n            <div\n              className={clsx(\n                classNamesPasswordField.inputIcon,\n                stylesPasswordField[classNamesPasswordField.inputIcon],\n              )}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon}\n            </div>\n          )}\n          <Input\n            className={clsx(\n              classNamesPasswordField.input,\n              stylesPasswordField[classNamesPasswordField.input],\n            )}\n            {...(icon && { 'data-icon': true })}\n            placeholder={placeholder}\n            type={isVisible ? 'text' : 'password'}\n          />\n          <RAButton\n            data-size={dataAttributes['data-size']}\n            data-variant={'tertiary'}\n            aria-label={isVisible ? 'Hide value' : 'Show value'}\n            aria-controls={isVisible ? 'text' : 'password'}\n            aria-expanded={isVisible}\n            onPress={() => setIsVisible(v => !v)}\n            className={clsx(\n              classNamesPasswordField.inputVisibility,\n              stylesPasswordField[classNamesPasswordField.inputVisibility],\n            )}\n          >\n            {isVisible ? <RiEyeLine /> : <RiEyeOffLine />}\n          </RAButton>\n        </div>\n        <FieldError />\n      </AriaTextField>\n    );\n  },\n);\n\nPasswordField.displayName = 'PasswordField';\n"],"names":["AriaTextField","RAButton"],"mappings":"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"}

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

@@ -0,0 +1,8 @@
+import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .PasswordField_bui-PasswordField__12ac503195 {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n\n    &[data-size='small'] {\n      --password-field-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --password-field-item-height: 2.5rem;\n    }\n  }\n\n  .PasswordField_bui-PasswordFieldInputWrapper__12ac503195 {\n    display: flex;\n    align-items: center;\n    border-radius: var(--bui-radius-2);\n    border: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-neutral-1);\n    transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n\n    &[data-size='small'] {\n      height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      height: 2.5rem;\n    }\n\n    &:focus-within {\n      border-color: var(--bui-border-pressed);\n      outline-width: 0px;\n    }\n\n    &:hover {\n      border-color: var(--bui-border-hover);\n    }\n\n    &:has([data-invalid]) {\n      border-color: var(--bui-fg-danger);\n    }\n\n    &:has([data-disabled]) {\n      opacity: 0.5;\n      cursor: not-allowed;\n      border: 1px solid var(--bui-border-disabled);\n    }\n  }\n\n  .PasswordField_bui-PasswordFieldIcon__12ac503195 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    color: var(--bui-fg-primary);\n    pointer-events: none;\n    width: var(--password-field-item-height);\n    height: var(--password-field-item-height);\n\n    & svg {\n      .PasswordField_bui-PasswordField__12ac503195[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .PasswordField_bui-PasswordField__12ac503195[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n  }\n\n  .PasswordField_bui-PasswordFieldInput__12ac503195 {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0;\n    border: none;\n    background-color: transparent;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    width: 100%;\n    height: 100%;\n    outline: none;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n\n    &:first-child {\n      .PasswordField_bui-PasswordField__12ac503195[data-size='small'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n\n      .PasswordField_bui-PasswordField__12ac503195[data-size='medium'] & {\n        padding-inline: var(--bui-space-4) 0;\n      }\n    }\n  }\n\n  .PasswordField_bui-PasswordFieldVisibility__12ac503195 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    cursor: pointer;\n    border: none;\n    padding: 0;\n    margin: 0;\n    color: var(--bui-fg-primary);\n    width: var(--password-field-item-height);\n    height: var(--password-field-item-height);\n\n    & svg {\n      .PasswordField_bui-PasswordField__12ac503195[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .PasswordField_bui-PasswordField__12ac503195[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n  }\n}\n";
+var stylesPasswordField = {"bui-PasswordField":"PasswordField_bui-PasswordField__12ac503195","bui-PasswordFieldInputWrapper":"PasswordField_bui-PasswordFieldInputWrapper__12ac503195","bui-PasswordFieldIcon":"PasswordField_bui-PasswordFieldIcon__12ac503195","bui-PasswordFieldInput":"PasswordField_bui-PasswordFieldInput__12ac503195","bui-PasswordFieldVisibility":"PasswordField_bui-PasswordFieldVisibility__12ac503195"};
+styleInject(css_248z);
+
+export { stylesPasswordField as default };
+//# sourceMappingURL=PasswordField.module.css.esm.js.map

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

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

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

@@ -0,0 +1,15 @@
+const PasswordFieldDefinition = {
+  classNames: {
+    root: "bui-PasswordField",
+    inputWrapper: "bui-PasswordFieldInputWrapper",
+    input: "bui-PasswordFieldInput",
+    inputIcon: "bui-PasswordFieldIcon",
+    inputVisibility: "bui-PasswordFieldVisibility"
+  },
+  dataAttributes: {
+    size: ["small", "medium"]
+  }
+};
+
+export { PasswordFieldDefinition };
+//# sourceMappingURL=definition.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/PasswordField/definition.ts"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ComponentDefinition } from '../../types';\n\n/**\n * Component definition for PasswordField\n * @public\n */\nexport const PasswordFieldDefinition = {\n  classNames: {\n    root: 'bui-PasswordField',\n    inputWrapper: 'bui-PasswordFieldInputWrapper',\n    input: 'bui-PasswordFieldInput',\n    inputIcon: 'bui-PasswordFieldIcon',\n    inputVisibility: 'bui-PasswordFieldVisibility',\n  },\n  dataAttributes: {\n    size: ['small', 'medium'] as const,\n  },\n} as const satisfies ComponentDefinition;\n"],"names":[],"mappings":"AAsBO,MAAM,uBAAA,GAA0B;AAAA,EACrC,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,mBAAA;AAAA,IACN,YAAA,EAAc,+BAAA;AAAA,IACd,KAAA,EAAO,wBAAA;AAAA,IACP,SAAA,EAAW,uBAAA;AAAA,IACX,eAAA,EAAiB;AAAA,GACnB;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,IAAA,EAAM,CAAC,OAAA,EAAS,QAAQ;AAAA;AAE5B;;;;"}

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

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Popover_bui-Popover__7836eb1e42 {\n    box-shadow: var(--bui-shadow);\n    border-radius: var(--bui-radius-3);\n    background: var(--bui-bg-surface-1);\n    border: 1px solid var(--bui-gray-3);\n    forced-color-adjust: none;\n    outline: none;\n    max-height: inherit;\n    display: flex;\n    flex-direction: column;\n    /* fixes FF gap */\n    transform: translate3d(0, 0, 0);\n    transition: transform 200ms, opacity 200ms;\n\n    &[data-entering],\n    &[data-exiting] {\n      transform: var(--origin);\n      opacity: 0;\n    }\n\n    &[data-placement='top'] {\n      --origin: translateY(4px);\n\n      &:has(.Popover_bui-PopoverArrow__7836eb1e42) {\n        margin-bottom: var(--bui-space-3);\n      }\n    }\n\n    &[data-placement='right'] {\n      --origin: translateX(-4px);\n\n      &:has(.Popover_bui-PopoverArrow__7836eb1e42) {\n        margin-left: var(--bui-space-3);\n      }\n    }\n\n    &[data-placement='bottom'] {\n      --origin: translateY(-4px);\n\n      &:has(.Popover_bui-PopoverArrow__7836eb1e42) {\n        margin-top: var(--bui-space-3);\n      }\n    }\n\n    &[data-placement='left'] {\n      --origin: translateX(4px);\n\n      &:has(.Popover_bui-PopoverArrow__7836eb1e42) {\n        margin-right: var(--bui-space-3);\n      }\n    }\n  }\n\n  .Popover_bui-PopoverContent__7836eb1e42 {\n    overflow-x: hidden;\n    overflow-y: auto;\n    padding: var(--bui-space-4);\n    flex: 1 1 auto;\n    min-height: 0;\n  }\n\n  .Popover_bui-PopoverArrow__7836eb1e42 {\n    & svg {\n      display: block;\n\n      /* The popover is rendered overlaying the main\n      popover element by 1px. This causes the borders\n      to overlap, which causes minor visual artifacts\n      with transparent border colors. To mitigate this,\n      we split the stroke and fill across separate\n      elements in order to guarantee that the stroke is\n      always overlaying a consistent color. */\n      path:nth-child(1) {\n        fill: var(--bui-bg-surface-1);\n      }\n\n      path:nth-child(2) {\n        fill: var(--bui-gray-3);\n      }\n\n      /* The arrow svg overlaps the popover by 2px, so we\n      need to adjust the margins accordingly. */\n      --popover-arrow-overlap: -2px;\n    }\n\n    &[data-placement='top'] svg {\n      margin-top: var(--popover-arrow-overlap);\n    }\n\n    &[data-placement='bottom'] svg {\n      margin-bottom: var(--popover-arrow-overlap);\n      transform: rotate(180deg);\n    }\n\n    &[data-placement='right'] svg {\n      margin-right: var(--popover-arrow-overlap);\n      transform: rotate(90deg);\n    }\n\n    &[data-placement='left'] svg {\n      margin-left: var(--popover-arrow-overlap);\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-theme='dark'] .Popover_bui-Popover__7836eb1e42 {\n    background: var(--bui-bg-surface-2);\n    border: 1px solid var(--bui-gray-4);\n  }\n\n  [data-theme='dark'] .Popover_bui-PopoverArrow__7836eb1e42 svg path:nth-child(1) {\n    fill: var(--bui-bg-surface-2);\n  }\n\n  [data-theme='dark'] .Popover_bui-PopoverArrow__7836eb1e42 svg path:nth-child(2) {\n    fill: var(--bui-gray-4);\n  }\n}\n";
-var styles = {"bui-Popover":"Popover_bui-Popover__7836eb1e42","bui-PopoverArrow":"Popover_bui-PopoverArrow__7836eb1e42","bui-PopoverContent":"Popover_bui-PopoverContent__7836eb1e42"};
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Popover_bui-Popover__21d77ea0db {\n    box-shadow: var(--bui-shadow);\n    border-radius: var(--bui-radius-3);\n    background: var(--bui-bg-neutral-1);\n    border: 1px solid var(--bui-border);\n    forced-color-adjust: none;\n    outline: none;\n    max-height: inherit;\n    display: flex;\n    flex-direction: column;\n    /* fixes FF gap */\n    transform: translate3d(0, 0, 0);\n    transition: transform 200ms, opacity 200ms;\n\n    &[data-entering],\n    &[data-exiting] {\n      transform: var(--origin);\n      opacity: 0;\n    }\n\n    &[data-placement='top'] {\n      --origin: translateY(4px);\n\n      &:has(.Popover_bui-PopoverArrow__21d77ea0db) {\n        margin-bottom: var(--bui-space-3);\n      }\n    }\n\n    &[data-placement='right'] {\n      --origin: translateX(-4px);\n\n      &:has(.Popover_bui-PopoverArrow__21d77ea0db) {\n        margin-left: var(--bui-space-3);\n      }\n    }\n\n    &[data-placement='bottom'] {\n      --origin: translateY(-4px);\n\n      &:has(.Popover_bui-PopoverArrow__21d77ea0db) {\n        margin-top: var(--bui-space-3);\n      }\n    }\n\n    &[data-placement='left'] {\n      --origin: translateX(4px);\n\n      &:has(.Popover_bui-PopoverArrow__21d77ea0db) {\n        margin-right: var(--bui-space-3);\n      }\n    }\n  }\n\n  .Popover_bui-PopoverContent__21d77ea0db {\n    overflow-x: hidden;\n    overflow-y: auto;\n    padding: var(--bui-space-4);\n    flex: 1 1 auto;\n    min-height: 0;\n  }\n\n  .Popover_bui-PopoverArrow__21d77ea0db {\n    & svg {\n      display: block;\n\n      /* The popover is rendered overlaying the main\n      popover element by 1px. This causes the borders\n      to overlap, which causes minor visual artifacts\n      with transparent border colors. To mitigate this,\n      we split the stroke and fill across separate\n      elements in order to guarantee that the stroke is\n      always overlaying a consistent color. */\n      path:nth-child(1) {\n        fill: var(--bui-bg-neutral-1);\n      }\n\n      path:nth-child(2) {\n        fill: var(--bui-fg-secondary);\n      }\n\n      /* The arrow svg overlaps the popover by 2px, so we\n      need to adjust the margins accordingly. */\n      --popover-arrow-overlap: -2px;\n    }\n\n    &[data-placement='top'] svg {\n      margin-top: var(--popover-arrow-overlap);\n    }\n\n    &[data-placement='bottom'] svg {\n      margin-bottom: var(--popover-arrow-overlap);\n      transform: rotate(180deg);\n    }\n\n    &[data-placement='right'] svg {\n      margin-right: var(--popover-arrow-overlap);\n      transform: rotate(90deg);\n    }\n\n    &[data-placement='left'] svg {\n      margin-left: var(--popover-arrow-overlap);\n      transform: rotate(-90deg);\n    }\n  }\n\n  [data-theme='dark'] .Popover_bui-Popover__21d77ea0db {\n    background: var(--bui-bg-neutral-2);\n    border: 1px solid var(--bui-border);\n  }\n\n  [data-theme='dark'] .Popover_bui-PopoverArrow__21d77ea0db svg path:nth-child(1) {\n    fill: var(--bui-bg-neutral-2);\n  }\n\n  [data-theme='dark'] .Popover_bui-PopoverArrow__21d77ea0db svg path:nth-child(2) {\n    fill: var(--bui-fg-secondary);\n  }\n}\n";
+var styles = {"bui-Popover":"Popover_bui-Popover__21d77ea0db","bui-PopoverArrow":"Popover_bui-PopoverArrow__21d77ea0db","bui-PopoverContent":"Popover_bui-PopoverContent__21d77ea0db"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .RadioGroup_bui-RadioGroup__6d47a4248b {\n    display: flex;\n    flex-direction: column;\n    color: var(--bui-fg-primary);\n  }\n\n  .RadioGroup_bui-RadioGroup__6d47a4248b[data-orientation='horizontal'] .RadioGroup_bui-RadioGroupContent__6d47a4248b {\n    flex-direction: row;\n    gap: var(--bui-space-4);\n  }\n\n  .RadioGroup_bui-RadioGroupContent__6d47a4248b {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-2);\n  }\n\n  .RadioGroup_bui-Radio__6d47a4248b {\n    display: flex;\n    /* This is needed so the HiddenInput is positioned correctly */\n    position: relative;\n    align-items: center;\n    gap: var(--bui-space-2);\n    font-size: var(--bui-font-size-2);\n    color: var(--bui-fg-primary);\n    forced-color-adjust: none;\n\n    &:before {\n      content: '';\n      display: block;\n      width: 1rem;\n      height: 1rem;\n      box-sizing: border-box;\n      border: 0.125rem solid var(--bui-border);\n      background: var(--bui-gray-1);\n      border-radius: var(--bui-radius-full);\n      transition: all 200ms;\n      flex-shrink: 0;\n      flex-grow: 0;\n    }\n\n    &[data-pressed]:before {\n      border-color: var(--bui-border);\n    }\n\n    &[data-selected] {\n      &:before {\n        border-color: var(--bui-bg-solid);\n        border-width: 0.25rem;\n      }\n\n      &[data-pressed]:before {\n        border-color: var(--bui-bg-solid);\n      }\n    }\n\n    &[data-focus-visible]:before {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n\n      &:before {\n        border-color: var(--bui-border-disabled);\n        background: var(--bui-bg-disabled);\n      }\n\n      &[data-selected]:before {\n        border-color: var(--bui-border-disabled);\n      }\n    }\n\n    &[data-invalid]:before {\n      border-color: var(--bui-border-danger);\n    }\n\n    &[data-invalid][data-selected]:before {\n      border-color: var(--bui-border-danger);\n    }\n\n    /* Ensure disabled state prevails over invalid state */\n    &[data-disabled][data-invalid] {\n      color: var(--bui-fg-disabled);\n\n      &:before {\n        border-color: var(--bui-border-disabled);\n        background: var(--bui-bg-disabled);\n      }\n\n      &[data-selected]:before {\n        border-color: var(--bui-border-disabled);\n      }\n    }\n  }\n}\n";
-var styles = {"bui-RadioGroup":"RadioGroup_bui-RadioGroup__6d47a4248b","bui-RadioGroupContent":"RadioGroup_bui-RadioGroupContent__6d47a4248b","bui-Radio":"RadioGroup_bui-Radio__6d47a4248b"};
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .RadioGroup_bui-RadioGroup__94aa4a581c {\n    display: flex;\n    flex-direction: column;\n    color: var(--bui-fg-primary);\n  }\n\n  .RadioGroup_bui-RadioGroup__94aa4a581c[data-orientation='horizontal'] .RadioGroup_bui-RadioGroupContent__94aa4a581c {\n    flex-direction: row;\n    gap: var(--bui-space-4);\n  }\n\n  .RadioGroup_bui-RadioGroupContent__94aa4a581c {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-2);\n  }\n\n  .RadioGroup_bui-Radio__94aa4a581c {\n    display: flex;\n    /* This is needed so the HiddenInput is positioned correctly */\n    position: relative;\n    align-items: center;\n    gap: var(--bui-space-2);\n    font-size: var(--bui-font-size-2);\n    color: var(--bui-fg-primary);\n    forced-color-adjust: none;\n\n    &:before {\n      content: '';\n      display: block;\n      width: 1rem;\n      height: 1rem;\n      box-sizing: border-box;\n      border: 0.125rem solid var(--bui-border);\n      background: var(--bui-bg-neutral-1);\n      border-radius: var(--bui-radius-full);\n      transition: all 200ms;\n      flex-shrink: 0;\n      flex-grow: 0;\n    }\n\n    &[data-pressed]:before {\n      border-color: var(--bui-border);\n    }\n\n    &[data-selected] {\n      &:before {\n        border-color: var(--bui-bg-solid);\n        border-width: 0.25rem;\n      }\n\n      &[data-pressed]:before {\n        border-color: var(--bui-bg-solid);\n      }\n    }\n\n    &[data-focus-visible]:before {\n      outline: 2px solid var(--bui-ring);\n      outline-offset: 2px;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n\n      &:before {\n        border-color: var(--bui-border-disabled);\n        background: var(--bui-bg-disabled);\n      }\n\n      &[data-selected]:before {\n        border-color: var(--bui-border-disabled);\n      }\n    }\n\n    &[data-invalid]:before {\n      border-color: var(--bui-border-danger);\n    }\n\n    &[data-invalid][data-selected]:before {\n      border-color: var(--bui-border-danger);\n    }\n\n    /* Ensure disabled state prevails over invalid state */\n    &[data-disabled][data-invalid] {\n      color: var(--bui-fg-disabled);\n\n      &:before {\n        border-color: var(--bui-border-disabled);\n        background: var(--bui-bg-disabled);\n      }\n\n      &[data-selected]:before {\n        border-color: var(--bui-border-disabled);\n      }\n    }\n  }\n}\n";
+var styles = {"bui-RadioGroup":"RadioGroup_bui-RadioGroup__94aa4a581c","bui-RadioGroupContent":"RadioGroup_bui-RadioGroupContent__94aa4a581c","bui-Radio":"RadioGroup_bui-Radio__94aa4a581c"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .SearchField_bui-SearchField__92def8c804 {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex: 1;\n    flex-shrink: 0;\n\n    &[data-size='small'] {\n      --search-field-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --search-field-item-height: 2.5rem;\n    }\n\n    &[data-empty] {\n      .SearchField_bui-SearchFieldClear__92def8c804 {\n        display: none;\n      }\n    }\n\n    &[data-startCollapsed='true'] {\n      transition: flex-basis 0.3s ease-in-out, width 0.3s ease-in-out,\n        max-width 0.3s ease-in-out;\n      padding: 0;\n      flex: 0 1 auto;\n\n      &[data-collapsed='true'] {\n        cursor: pointer;\n\n        &[data-size='medium'] {\n          flex-basis: 2.5rem;\n          width: 2.5rem;\n          max-width: 2.5rem;\n          height: 2.5rem;\n        }\n\n        &[data-size='small'] {\n          flex-basis: 2rem;\n          width: 2rem;\n          max-width: 2rem;\n          height: 2rem;\n        }\n\n        &[data-size='medium'] .SearchField_bui-SearchFieldInput__92def8c804 {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        &[data-size='small'] .SearchField_bui-SearchFieldInput__92def8c804 {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        .SearchField_bui-SearchFieldInputWrapper__92def8c804 {\n          .SearchField_bui-SearchFieldInput__92def8c804[data-icon] {\n            padding-right: 0px;\n          }\n        }\n      }\n\n      &[data-collapsed='false'] {\n        flex-basis: 200px;\n        width: 200px;\n        max-width: 200px;\n      }\n    }\n  }\n\n  .SearchField_bui-SearchFieldInputWrapper__92def8c804 {\n    display: flex;\n    align-items: center;\n    border-radius: var(--bui-radius-2);\n    border: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\n    transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n\n    &[data-size='small'] {\n      height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      height: 2.5rem;\n    }\n\n    &:focus-within {\n      border-color: var(--bui-border-pressed);\n      outline-width: 0px;\n    }\n\n    &:hover {\n      border-color: var(--bui-border-hover);\n    }\n\n    &[data-invalid] {\n      border-color: var(--bui-fg-danger);\n    }\n\n    &[data-disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n      border: 1px solid var(--bui-border-disabled);\n    }\n  }\n\n  .SearchField_bui-SearchFieldInputIcon__92def8c804 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    color: var(--bui-fg-primary);\n    pointer-events: none;\n    width: var(--search-field-item-height);\n    height: var(--search-field-item-height);\n    /* To animate the icon when the input is collapsed */\n    transition: opacity 0.2s ease-in-out;\n\n    & svg {\n      .SearchField_bui-SearchField__92def8c804[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .SearchField_bui-SearchField__92def8c804[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n  }\n\n  .SearchField_bui-SearchFieldInput__92def8c804 {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0;\n    border: none;\n    background-color: transparent;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    transition: padding 0.3s ease-in-out;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    cursor: inherit;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n\n    &:first-child {\n      .SearchField_bui-SearchField__92def8c804[data-size='small'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n\n      .SearchField_bui-SearchField__92def8c804[data-size='medium'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n    }\n  }\n\n  .SearchField_bui-SearchFieldClear__92def8c804 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n    width: var(--search-field-item-height);\n    height: var(--search-field-item-height);\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n}\n";
-var styles = {"bui-SearchField":"SearchField_bui-SearchField__92def8c804","bui-SearchFieldClear":"SearchField_bui-SearchFieldClear__92def8c804","bui-SearchFieldInput":"SearchField_bui-SearchFieldInput__92def8c804","bui-SearchFieldInputWrapper":"SearchField_bui-SearchFieldInputWrapper__92def8c804","bui-SearchFieldInputIcon":"SearchField_bui-SearchFieldInputIcon__92def8c804"};
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .SearchField_bui-SearchField__57ef0880a2 {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex: 1;\n    flex-shrink: 0;\n\n    &[data-size='small'] {\n      --search-field-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --search-field-item-height: 2.5rem;\n    }\n\n    &[data-empty] {\n      .SearchField_bui-SearchFieldClear__57ef0880a2 {\n        display: none;\n      }\n    }\n\n    &[data-startCollapsed='true'] {\n      transition: flex-basis 0.3s ease-in-out, width 0.3s ease-in-out,\n        max-width 0.3s ease-in-out;\n      padding: 0;\n      flex: 0 1 auto;\n\n      &[data-collapsed='true'] {\n        cursor: pointer;\n\n        &[data-size='medium'] {\n          flex-basis: 2.5rem;\n          width: 2.5rem;\n          max-width: 2.5rem;\n          height: 2.5rem;\n        }\n\n        &[data-size='small'] {\n          flex-basis: 2rem;\n          width: 2rem;\n          max-width: 2rem;\n          height: 2rem;\n        }\n\n        &[data-size='medium'] .SearchField_bui-SearchFieldInput__57ef0880a2 {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        &[data-size='small'] .SearchField_bui-SearchFieldInput__57ef0880a2 {\n          &::placeholder {\n            opacity: 0;\n          }\n        }\n\n        .SearchField_bui-SearchFieldInputWrapper__57ef0880a2 {\n          .SearchField_bui-SearchFieldInput__57ef0880a2[data-icon] {\n            padding-right: 0px;\n          }\n        }\n      }\n\n      &[data-collapsed='false'] {\n        flex-basis: 200px;\n        width: 200px;\n        max-width: 200px;\n      }\n    }\n  }\n\n  .SearchField_bui-SearchFieldInputWrapper__57ef0880a2 {\n    display: flex;\n    align-items: center;\n    border-radius: var(--bui-radius-2);\n    border: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-neutral-1);\n    transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n\n    &[data-size='small'] {\n      height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      height: 2.5rem;\n    }\n\n    &:focus-within {\n      border-color: var(--bui-border-pressed);\n      outline-width: 0px;\n    }\n\n    &:hover {\n      border-color: var(--bui-border-hover);\n    }\n\n    &[data-invalid] {\n      border-color: var(--bui-fg-danger);\n    }\n\n    &[data-disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n      border: 1px solid var(--bui-border-disabled);\n    }\n  }\n\n  .SearchField_bui-SearchFieldInputIcon__57ef0880a2 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    color: var(--bui-fg-primary);\n    pointer-events: none;\n    width: var(--search-field-item-height);\n    height: var(--search-field-item-height);\n    /* To animate the icon when the input is collapsed */\n    transition: opacity 0.2s ease-in-out;\n\n    & svg {\n      .SearchField_bui-SearchField__57ef0880a2[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .SearchField_bui-SearchField__57ef0880a2[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n  }\n\n  .SearchField_bui-SearchFieldInput__57ef0880a2 {\n    flex: 1;\n    display: flex;\n    align-items: center;\n    padding: 0;\n    border: none;\n    background-color: transparent;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    transition: padding 0.3s ease-in-out;\n    width: 100%;\n    height: 100%;\n    outline: none;\n    cursor: inherit;\n\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n    }\n\n    &:first-child {\n      .SearchField_bui-SearchField__57ef0880a2[data-size='small'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n\n      .SearchField_bui-SearchField__57ef0880a2[data-size='medium'] & {\n        padding-inline: var(--bui-space-3) 0;\n      }\n    }\n  }\n\n  .SearchField_bui-SearchFieldClear__57ef0880a2 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n    width: var(--search-field-item-height);\n    height: var(--search-field-item-height);\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n}\n";
+var styles = {"bui-SearchField":"SearchField_bui-SearchField__57ef0880a2","bui-SearchFieldClear":"SearchField_bui-SearchFieldClear__57ef0880a2","bui-SearchFieldInput":"SearchField_bui-SearchFieldInput__57ef0880a2","bui-SearchFieldInputWrapper":"SearchField_bui-SearchFieldInputWrapper__57ef0880a2","bui-SearchFieldInputIcon":"SearchField_bui-SearchFieldInputIcon__57ef0880a2"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Select_bui-Select__bb72e09403,\n  .Select_bui-SelectPopover__bb72e09403 {\n    &[data-size='small'] {\n      --select-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --select-item-height: 2.5rem;\n    }\n  }\n\n  .Select_bui-SelectPopover__bb72e09403 {\n    min-width: var(--trigger-width);\n  }\n\n  .Select_bui-SelectTrigger__bb72e09403 {\n    box-sizing: border-box;\n    border-radius: var(--bui-radius-3);\n    border: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-surface-1);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n    gap: var(--bui-space-2);\n    width: 100%;\n    height: var(--select-item-height);\n\n    .Select_bui-Select__bb72e09403[data-size='small'] & {\n      padding-inline: var(--bui-space-3) 0;\n    }\n\n    .Select_bui-Select__bb72e09403[data-size='medium'] & {\n      padding-inline: var(--bui-space-4) 0;\n    }\n\n    & svg {\n      flex-shrink: 0;\n      color: var(--bui-fg-secondary);\n\n      .Select_bui-Select__bb72e09403[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .Select_bui-Select__bb72e09403[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &:hover {\n      transition: border-color 0.2s ease-in-out;\n      border-color: var(--bui-border-hover);\n    }\n\n    &:focus-visible {\n      border-color: var(--bui-border-pressed);\n      outline: 0;\n    }\n\n    .Select_bui-Select__bb72e09403[data-invalid] & {\n      border-color: var(--bui-fg-danger);\n\n      &:focus-visible,\n      &:hover {\n        outline: 1px solid var(--bui-fg-danger);\n      }\n    }\n\n    &[disabled] {\n      cursor: not-allowed;\n      border-color: var(--bui-border-disabled);\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select_bui-SelectTriggerChevron__bb72e09403 {\n    display: grid;\n    place-content: center;\n    width: var(--select-item-height);\n    height: var(--select-item-height);\n    flex-shrink: 0;\n    flex-grow: 0;\n  }\n\n  .Select_bui-SelectValue__bb72e09403 {\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    width: 100%;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    text-align: left;\n\n    & .Select_bui-SelectItemIndicator__bb72e09403 {\n      display: none;\n    }\n\n    &[disabled] {\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select_bui-SelectList__bb72e09403:focus-visible {\n    /* Remove default focus-visible outline because React Aria\n     * triggers it on mouse click open of the list for some reason.\n     * On keyboard use, the top item receives the focus style,\n     * so it's not needed anyway. */\n    outline: none;\n  }\n\n  .Select_bui-SelectItem__bb72e09403 {\n    box-sizing: border-box;\n    position: relative;\n    width: var(--anchor-width);\n    display: grid;\n    grid-template-areas: 'icon text';\n    grid-template-columns: 1rem 1fr;\n    align-items: center;\n    min-height: var(--select-item-height);\n    padding-block: var(--bui-space-1);\n    padding-left: var(--bui-space-3);\n    padding-right: var(--bui-space-4);\n    color: var(--bui-fg-primary);\n    cursor: pointer;\n    user-select: none;\n    font-size: var(--bui-font-size-3);\n    gap: var(--bui-space-2);\n    outline: none;\n\n    &[data-focused]::before {\n      content: '';\n      position: absolute;\n      inset-block: 0;\n      inset-inline: var(--bui-space-1);\n      border-radius: var(--bui-radius-2);\n      background: var(--bui-bg-surface-2);\n      z-index: -1;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-selected] .Select_bui-SelectItemIndicator__bb72e09403 {\n      opacity: 1;\n    }\n  }\n\n  .Select_bui-SelectItemIndicator__bb72e09403 {\n    grid-area: icon;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  .Select_bui-SelectItemLabel__bb72e09403 {\n    flex: 1;\n    grid-area: text;\n  }\n\n  .Select_bui-SelectSearchWrapper__bb72e09403 {\n    flex-shrink: 0;\n    margin-bottom: var(--bui-space-1);\n    display: flex;\n    align-items: center;\n    padding-inline: var(--bui-space-3) 0;\n    border-bottom: 1px solid var(--bui-border);\n  }\n\n  .Select_bui-SelectSearch__bb72e09403 {\n    border: none;\n    background-color: transparent;\n    padding: 0;\n    color: var(--bui-fg-primary);\n    flex: 1;\n    outline: none;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    height: var(--select-item-height);\n    line-height: var(--select-item-height);\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    /* Hide native browser clear button */\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n  }\n\n  .Select_bui-SelectSearchClear__bb72e09403 {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n    width: var(--select-item-height);\n    height: var(--select-item-height);\n\n    input:placeholder-shown + & {\n      display: none;\n    }\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Select_bui-SelectNoResults__bb72e09403 {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    color: var(--bui-fg-secondary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n  }\n}\n";
-var styles = {"bui-Select":"Select_bui-Select__bb72e09403","bui-SelectPopover":"Select_bui-SelectPopover__bb72e09403","bui-SelectTrigger":"Select_bui-SelectTrigger__bb72e09403","bui-SelectTriggerChevron":"Select_bui-SelectTriggerChevron__bb72e09403","bui-SelectValue":"Select_bui-SelectValue__bb72e09403","bui-SelectItemIndicator":"Select_bui-SelectItemIndicator__bb72e09403","bui-SelectList":"Select_bui-SelectList__bb72e09403","bui-SelectItem":"Select_bui-SelectItem__bb72e09403","bui-SelectItemLabel":"Select_bui-SelectItemLabel__bb72e09403","bui-SelectSearchWrapper":"Select_bui-SelectSearchWrapper__bb72e09403","bui-SelectSearch":"Select_bui-SelectSearch__bb72e09403","bui-SelectSearchClear":"Select_bui-SelectSearchClear__bb72e09403","bui-SelectNoResults":"Select_bui-SelectNoResults__bb72e09403"};
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Select_bui-Select__52dc1fe7fb,\n  .Select_bui-SelectPopover__52dc1fe7fb {\n    &[data-size='small'] {\n      --select-item-height: 2rem;\n    }\n\n    &[data-size='medium'] {\n      --select-item-height: 2.5rem;\n    }\n  }\n\n  .Select_bui-SelectPopover__52dc1fe7fb {\n    min-width: var(--trigger-width);\n  }\n\n  .Select_bui-SelectTrigger__52dc1fe7fb {\n    box-sizing: border-box;\n    border-radius: var(--bui-radius-3);\n    border: 1px solid var(--bui-border);\n    background-color: var(--bui-bg-neutral-1);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    cursor: pointer;\n    gap: var(--bui-space-2);\n    width: 100%;\n    height: var(--select-item-height);\n\n    .Select_bui-Select__52dc1fe7fb[data-size='small'] & {\n      padding-inline: var(--bui-space-3) 0;\n    }\n\n    .Select_bui-Select__52dc1fe7fb[data-size='medium'] & {\n      padding-inline: var(--bui-space-4) 0;\n    }\n\n    & svg {\n      flex-shrink: 0;\n      color: var(--bui-fg-secondary);\n\n      .Select_bui-Select__52dc1fe7fb[data-size='small'] & {\n        width: 1rem;\n        height: 1rem;\n      }\n\n      .Select_bui-Select__52dc1fe7fb[data-size='medium'] & {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &:hover {\n      transition: border-color 0.2s ease-in-out;\n      border-color: var(--bui-border-hover);\n    }\n\n    &:focus-visible {\n      border-color: var(--bui-border-pressed);\n      outline: 0;\n    }\n\n    .Select_bui-Select__52dc1fe7fb[data-invalid] & {\n      border-color: var(--bui-fg-danger);\n\n      &:focus-visible,\n      &:hover {\n        outline: 1px solid var(--bui-fg-danger);\n      }\n    }\n\n    &[disabled] {\n      cursor: not-allowed;\n      border-color: var(--bui-border-disabled);\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select_bui-SelectTriggerChevron__52dc1fe7fb {\n    display: grid;\n    place-content: center;\n    width: var(--select-item-height);\n    height: var(--select-item-height);\n    flex-shrink: 0;\n    flex-grow: 0;\n  }\n\n  .Select_bui-SelectValue__52dc1fe7fb {\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n    width: 100%;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-primary);\n    text-align: left;\n\n    & .Select_bui-SelectItemIndicator__52dc1fe7fb {\n      display: none;\n    }\n\n    &[disabled] {\n      color: var(--bui-fg-disabled);\n    }\n  }\n\n  .Select_bui-SelectList__52dc1fe7fb:focus-visible {\n    /* Remove default focus-visible outline because React Aria\n     * triggers it on mouse click open of the list for some reason.\n     * On keyboard use, the top item receives the focus style,\n     * so it's not needed anyway. */\n    outline: none;\n  }\n\n  .Select_bui-SelectItem__52dc1fe7fb {\n    box-sizing: border-box;\n    position: relative;\n    width: var(--anchor-width);\n    display: grid;\n    grid-template-areas: 'icon text';\n    grid-template-columns: 1rem 1fr;\n    align-items: center;\n    min-height: var(--select-item-height);\n    padding-block: var(--bui-space-1);\n    padding-left: var(--bui-space-3);\n    padding-right: var(--bui-space-4);\n    color: var(--bui-fg-primary);\n    cursor: pointer;\n    user-select: none;\n    font-size: var(--bui-font-size-3);\n    gap: var(--bui-space-2);\n    outline: none;\n\n    &[data-focused]::before {\n      content: '';\n      position: absolute;\n      inset-block: 0;\n      inset-inline: var(--bui-space-1);\n      border-radius: var(--bui-radius-2);\n      background: var(--bui-bg-neutral-2);\n      z-index: -1;\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-selected] .Select_bui-SelectItemIndicator__52dc1fe7fb {\n      opacity: 1;\n    }\n  }\n\n  .Select_bui-SelectItemIndicator__52dc1fe7fb {\n    grid-area: icon;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0;\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  .Select_bui-SelectItemLabel__52dc1fe7fb {\n    flex: 1;\n    grid-area: text;\n  }\n\n  .Select_bui-SelectSearchWrapper__52dc1fe7fb {\n    flex-shrink: 0;\n    margin-bottom: var(--bui-space-1);\n    display: flex;\n    align-items: center;\n    padding-inline: var(--bui-space-3) 0;\n    border-bottom: 1px solid var(--bui-border);\n  }\n\n  .Select_bui-SelectSearch__52dc1fe7fb {\n    border: none;\n    background-color: transparent;\n    padding: 0;\n    color: var(--bui-fg-primary);\n    flex: 1;\n    outline: none;\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    height: var(--select-item-height);\n    line-height: var(--select-item-height);\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    /* Hide native browser clear button */\n    &::-webkit-search-cancel-button,\n    &::-webkit-search-decoration {\n      -webkit-appearance: none;\n    }\n  }\n\n  .Select_bui-SelectSearchClear__52dc1fe7fb {\n    flex: 0 0 auto;\n    display: grid;\n    place-content: center;\n    background-color: transparent;\n    border: none;\n    padding: 0;\n    margin: 0;\n    cursor: pointer;\n    color: var(--bui-fg-secondary);\n    transition: color 0.2s ease-in-out;\n    width: var(--select-item-height);\n    height: var(--select-item-height);\n\n    input:placeholder-shown + & {\n      display: none;\n    }\n\n    &:hover {\n      color: var(--bui-fg-primary);\n    }\n\n    & svg {\n      width: 1rem;\n      height: 1rem;\n    }\n  }\n\n  .Select_bui-SelectNoResults__52dc1fe7fb {\n    padding-inline: var(--bui-space-3);\n    padding-block: var(--bui-space-2);\n    color: var(--bui-fg-secondary);\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n  }\n}\n";
+var styles = {"bui-Select":"Select_bui-Select__52dc1fe7fb","bui-SelectPopover":"Select_bui-SelectPopover__52dc1fe7fb","bui-SelectTrigger":"Select_bui-SelectTrigger__52dc1fe7fb","bui-SelectTriggerChevron":"Select_bui-SelectTriggerChevron__52dc1fe7fb","bui-SelectValue":"Select_bui-SelectValue__52dc1fe7fb","bui-SelectItemIndicator":"Select_bui-SelectItemIndicator__52dc1fe7fb","bui-SelectList":"Select_bui-SelectList__52dc1fe7fb","bui-SelectItem":"Select_bui-SelectItem__52dc1fe7fb","bui-SelectItemLabel":"Select_bui-SelectItemLabel__52dc1fe7fb","bui-SelectSearchWrapper":"Select_bui-SelectSearchWrapper__52dc1fe7fb","bui-SelectSearch":"Select_bui-SelectSearch__52dc1fe7fb","bui-SelectSearchClear":"Select_bui-SelectSearchClear__52dc1fe7fb","bui-SelectNoResults":"Select_bui-SelectNoResults__52dc1fe7fb"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Skeleton_bui-Skeleton__1f616aa9e0 {\n    animation: var(--bui-animate-pulse);\n    background-color: var(--bui-bg-surface-2);\n    border-radius: var(--bui-radius-2);\n  }\n\n  .Skeleton_bui-Skeleton__1f616aa9e0[data-rounded='true'] {\n    border-radius: var(--bui-radius-full);\n  }\n}\n";
-var styles = {"bui-Skeleton":"Skeleton_bui-Skeleton__1f616aa9e0"};
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Skeleton_bui-Skeleton__0f825f11ee {\n    animation: var(--bui-animate-pulse);\n    background-color: var(--bui-bg-neutral-2);\n    border-radius: var(--bui-radius-2);\n  }\n\n  .Skeleton_bui-Skeleton__0f825f11ee[data-rounded='true'] {\n    border-radius: var(--bui-radius-full);\n  }\n}\n";
+var styles = {"bui-Skeleton":"Skeleton_bui-Skeleton__0f825f11ee"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Switch_bui-Switch__e208a7f7b7 {\n    display: flex;\n    /* This is needed so the HiddenInput is positioned correctly */\n    position: relative;\n    align-items: center;\n    gap: var(--bui-space-3);\n    font-size: var(--bui-font-size-3);\n    color: var(--bui-fg-primary);\n    cursor: pointer;\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-pressed] .Switch_bui-SwitchIndicator__e208a7f7b7 {\n      &:before {\n        background: var(--bui-fg-solid);\n      }\n    }\n\n    &[data-selected] {\n      .Switch_bui-SwitchIndicator__e208a7f7b7 {\n        background: var(--bui-bg-solid);\n\n        &:before {\n          background: var(--bui-fg-solid);\n          transform: translateX(100%);\n        }\n      }\n\n      &[data-pressed] {\n        .Switch_indicator__e208a7f7b7 {\n          background: var(--bui-gray-3);\n        }\n      }\n    }\n\n    &[data-focus-visible] .Switch_bui-SwitchIndicator__e208a7f7b7 {\n      outline: 2px solid;\n      outline-offset: 2px;\n    }\n  }\n\n  .Switch_bui-SwitchIndicator__e208a7f7b7 {\n    width: 2rem;\n    height: 1.143rem;\n    border: 2px;\n    background: var(--bui-gray-3);\n    border-radius: 1.143rem;\n    transition: all 200ms;\n\n    &:before {\n      content: '';\n      display: block;\n      margin: 0.143rem;\n      width: 0.857rem;\n      height: 0.857rem;\n      background: var(--bui-fg-solid);\n      border-radius: 16px;\n      transition: all 200ms;\n    }\n  }\n}\n";
-var styles = {"bui-Switch":"Switch_bui-Switch__e208a7f7b7","bui-SwitchIndicator":"Switch_bui-SwitchIndicator__e208a7f7b7","indicator":"Switch_indicator__e208a7f7b7"};
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Switch_bui-Switch__0f8c351c37 {\n    display: flex;\n    /* This is needed so the HiddenInput is positioned correctly */\n    position: relative;\n    align-items: center;\n    gap: var(--bui-space-3);\n    font-size: var(--bui-font-size-3);\n    color: var(--bui-fg-primary);\n    cursor: pointer;\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n\n    &[data-pressed] .Switch_bui-SwitchIndicator__0f8c351c37 {\n      &:before {\n        background: var(--bui-fg-solid);\n      }\n    }\n\n    &[data-selected] {\n      .Switch_bui-SwitchIndicator__0f8c351c37 {\n        background: var(--bui-bg-solid);\n\n        &:before {\n          background: var(--bui-fg-solid);\n          transform: translateX(100%);\n        }\n      }\n\n      &[data-pressed] {\n        .Switch_indicator__0f8c351c37 {\n          background: var(--bui-bg-neutral-3);\n        }\n      }\n    }\n\n    &[data-focus-visible] .Switch_bui-SwitchIndicator__0f8c351c37 {\n      outline: 2px solid;\n      outline-offset: 2px;\n    }\n  }\n\n  .Switch_bui-SwitchIndicator__0f8c351c37 {\n    width: 2rem;\n    height: 1.143rem;\n    border: 2px;\n    background: var(--bui-bg-neutral-3);\n    border-radius: 1.143rem;\n    transition: all 200ms;\n\n    &:before {\n      content: '';\n      display: block;\n      margin: 0.143rem;\n      width: 0.857rem;\n      height: 0.857rem;\n      background: var(--bui-fg-solid);\n      border-radius: 16px;\n      transition: all 200ms;\n    }\n  }\n}\n";
+var styles = {"bui-Switch":"Switch_bui-Switch__0f8c351c37","bui-SwitchIndicator":"Switch_bui-SwitchIndicator__0f8c351c37","indicator":"Switch_indicator__0f8c351c37"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/Table/components/Table.esm.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useId } from 'react-aria';
 import { ResizableTableContainer } from 'react-aria-components';
 import { TableRoot } from './TableRoot.esm.js';
@@ -89,63 +89,70 @@ function Table({
     isStale,
     data !== void 0
   );
+  const manualColumnSizing = columnConfig.some(
+    (col) => col.width != null || col.minWidth != null || col.maxWidth != null || col.defaultWidth != null
+  );
+  const wrapResizable = manualColumnSizing ? (elem) => /* @__PURE__ */ jsx(ResizableTableContainer, { children: elem }) : (elem) => /* @__PURE__ */ jsx(Fragment, { children: elem });
   return /* @__PURE__ */ jsxs("div", { className, style, children: [
     /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "polite", id: liveRegionId, children: liveRegionLabel }),
-    /* @__PURE__ */ jsx(ResizableTableContainer, { children: /* @__PURE__ */ jsxs(
-      TableRoot,
-      {
-        selectionMode,
-        selectionBehavior,
-        selectedKeys,
-        onSelectionChange,
-        sortDescriptor: sort?.descriptor ?? void 0,
-        onSortChange: sort?.onSortChange,
-        disabledKeys: disabledRows,
-        stale: isStale,
-        "aria-describedby": liveRegionId,
-        children: [
-          /* @__PURE__ */ jsx(TableHeader, { columns: visibleColumns, children: (column) => column.header ? column.header() : /* @__PURE__ */ jsx(
-            Column,
-            {
-              id: column.id,
-              isRowHeader: column.isRowHeader,
-              allowsSorting: column.isSortable,
-              width: column.width,
-              defaultWidth: column.defaultWidth,
-              minWidth: column.minWidth,
-              maxWidth: column.maxWidth,
-              children: column.label
-            }
-          ) }),
-          /* @__PURE__ */ jsx(
-            TableBody,
-            {
-              items: data,
-              renderEmptyState: emptyState ? () => /* @__PURE__ */ jsx(Flex, { p: "3", children: emptyState }) : void 0,
-              children: (item) => {
-                const itemIndex = data?.indexOf(item) ?? -1;
-                if (isRowRenderFn(rowConfig)) {
-                  return rowConfig({
-                    item,
-                    index: itemIndex
-                  });
-                }
-                return /* @__PURE__ */ jsx(
-                  Row,
-                  {
-                    id: String(item.id),
-                    columns: visibleColumns,
-                    href: rowConfig?.getHref?.(item),
-                    onAction: rowConfig?.onClick ? () => rowConfig?.onClick?.(item) : void 0,
-                    children: (column) => column.cell(item)
+    wrapResizable(
+      /* @__PURE__ */ jsxs(
+        TableRoot,
+        {
+          selectionMode,
+          selectionBehavior,
+          selectedKeys,
+          onSelectionChange,
+          sortDescriptor: sort?.descriptor ?? void 0,
+          onSortChange: sort?.onSortChange,
+          disabledKeys: disabledRows,
+          stale: isStale,
+          "aria-describedby": liveRegionId,
+          children: [
+            /* @__PURE__ */ jsx(TableHeader, { columns: visibleColumns, children: (column) => column.header ? column.header() : /* @__PURE__ */ jsx(
+              Column,
+              {
+                id: column.id,
+                isRowHeader: column.isRowHeader,
+                allowsSorting: column.isSortable,
+                width: column.width,
+                defaultWidth: column.defaultWidth,
+                minWidth: column.minWidth,
+                maxWidth: column.maxWidth,
+                children: column.label
+              }
+            ) }),
+            /* @__PURE__ */ jsx(
+              TableBody,
+              {
+                items: data,
+                dependencies: [visibleColumns],
+                renderEmptyState: emptyState ? () => /* @__PURE__ */ jsx(Flex, { p: "3", children: emptyState }) : void 0,
+                children: (item) => {
+                  const itemIndex = data?.indexOf(item) ?? -1;
+                  if (isRowRenderFn(rowConfig)) {
+                    return rowConfig({
+                      item,
+                      index: itemIndex
+                    });
                   }
-                );
+                  return /* @__PURE__ */ jsx(
+                    Row,
+                    {
+                      id: String(item.id),
+                      columns: visibleColumns,
+                      href: rowConfig?.getHref?.(item),
+                      onAction: rowConfig?.onClick ? () => rowConfig?.onClick?.(item) : void 0,
+                      children: (column) => column.cell(item)
+                    }
+                  );
+                }
               }
-            }
-          )
-        ]
-      }
-    ) }),
+            )
+          ]
+        }
+      )
+    ),
     pagination.type === "page" && /* @__PURE__ */ jsx(
       TablePagination,
       {

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

@@ -1 +1 @@
-{"version":3,"file":"Table.esm.js","sources":["../../../../src/components/Table/components/Table.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 { useId } from 'react-aria';\nimport { type Key, ResizableTableContainer } from 'react-aria-components';\nimport { TableRoot } from './TableRoot';\nimport { TableHeader } from './TableHeader';\nimport { TableBody } from './TableBody';\nimport { Row } from './Row';\nimport { Column } from './Column';\nimport { TablePagination } from '../../TablePagination';\nimport type {\n  TableProps,\n  TableItem,\n  RowConfig,\n  RowRenderFn,\n  TablePaginationType,\n} from '../types';\nimport { useMemo } from 'react';\nimport { VisuallyHidden } from '../../VisuallyHidden';\nimport { Flex } from '../../Flex';\n\nfunction isRowRenderFn<T extends TableItem>(\n  rowConfig: RowConfig<T> | RowRenderFn<T> | undefined,\n): rowConfig is RowRenderFn<T> {\n  return typeof rowConfig === 'function';\n}\n\nfunction useDisabledRows<T extends TableItem>({\n  data,\n  rowConfig,\n}: Pick<TableProps<T>, 'data' | 'rowConfig'>): Set<Key> | undefined {\n  return useMemo(() => {\n    if (!data || typeof rowConfig === 'function' || !rowConfig?.getIsDisabled) {\n      return;\n    }\n\n    return data.reduce<Set<Key>>((set, item) => {\n      const isDisabled = rowConfig.getIsDisabled?.(item);\n      if (isDisabled) {\n        set.add(String(item.id));\n      }\n      return set;\n    }, new Set<Key>());\n  }, [data, rowConfig]);\n}\n\nfunction useLiveRegionLabel(\n  pagination: TablePaginationType,\n  isStale: boolean,\n  hasData: boolean,\n): string {\n  if (!hasData || pagination.type === 'none') {\n    return '';\n  }\n\n  const { pageSize, offset, totalCount, getLabel } = pagination;\n\n  if (isStale) {\n    return 'Loading table data.';\n  }\n\n  let liveRegionLabel = 'Table page loaded. ';\n\n  if (getLabel) {\n    liveRegionLabel += getLabel({ pageSize, offset, totalCount });\n  } else if (offset !== undefined) {\n    const fromCount = offset + 1;\n    const toCount = Math.min(offset + pageSize, totalCount ?? 0);\n    liveRegionLabel += `Showing ${fromCount} to ${toCount} of ${totalCount}`;\n  }\n  return liveRegionLabel;\n}\n\n/** @public */\nexport function Table<T extends TableItem>({\n  columnConfig,\n  data,\n  loading = false,\n  isStale = false,\n  error,\n  pagination,\n  sort,\n  rowConfig,\n  selection,\n  emptyState,\n  className,\n  style,\n}: TableProps<T>) {\n  const liveRegionId = useId();\n\n  const visibleColumns = useMemo(\n    () => columnConfig.filter(col => !col.isHidden),\n    [columnConfig],\n  );\n  const disabledRows = useDisabledRows({ data, rowConfig });\n\n  const {\n    mode: selectionMode,\n    selected: selectedKeys,\n    behavior: selectionBehavior,\n    onSelectionChange,\n  } = selection || {};\n\n  if (loading && !data) {\n    return (\n      <div className={className} style={style}>\n        Loading...\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div className={className} style={style}>\n        Error: {error.message}\n      </div>\n    );\n  }\n\n  const liveRegionLabel = useLiveRegionLabel(\n    pagination,\n    isStale,\n    data !== undefined,\n  );\n\n  return (\n    <div className={className} style={style}>\n      <VisuallyHidden aria-live=\"polite\" id={liveRegionId}>\n        {liveRegionLabel}\n      </VisuallyHidden>\n\n      <ResizableTableContainer>\n        <TableRoot\n          selectionMode={selectionMode}\n          selectionBehavior={selectionBehavior}\n          selectedKeys={selectedKeys}\n          onSelectionChange={onSelectionChange}\n          sortDescriptor={sort?.descriptor ?? undefined}\n          onSortChange={sort?.onSortChange}\n          disabledKeys={disabledRows}\n          stale={isStale}\n          aria-describedby={liveRegionId}\n        >\n          <TableHeader columns={visibleColumns}>\n            {column =>\n              column.header ? (\n                column.header()\n              ) : (\n                <Column\n                  id={column.id}\n                  isRowHeader={column.isRowHeader}\n                  allowsSorting={column.isSortable}\n                  width={column.width}\n                  defaultWidth={column.defaultWidth}\n                  minWidth={column.minWidth}\n                  maxWidth={column.maxWidth}\n                >\n                  {column.label}\n                </Column>\n              )\n            }\n          </TableHeader>\n          <TableBody\n            items={data}\n            renderEmptyState={\n              emptyState ? () => <Flex p=\"3\">{emptyState}</Flex> : undefined\n            }\n          >\n            {item => {\n              const itemIndex = data?.indexOf(item) ?? -1;\n\n              if (isRowRenderFn(rowConfig)) {\n                return rowConfig({\n                  item,\n                  index: itemIndex,\n                });\n              }\n\n              return (\n                <Row\n                  id={String(item.id)}\n                  columns={visibleColumns}\n                  href={rowConfig?.getHref?.(item)}\n                  onAction={\n                    rowConfig?.onClick\n                      ? () => rowConfig?.onClick?.(item)\n                      : undefined\n                  }\n                >\n                  {column => column.cell(item)}\n                </Row>\n              );\n            }}\n          </TableBody>\n        </TableRoot>\n      </ResizableTableContainer>\n      {pagination.type === 'page' && (\n        <TablePagination\n          pageSize={pagination.pageSize}\n          pageSizeOptions={pagination.pageSizeOptions}\n          offset={pagination.offset}\n          totalCount={pagination.totalCount}\n          hasNextPage={pagination.hasNextPage}\n          hasPreviousPage={pagination.hasPreviousPage}\n          onNextPage={pagination.onNextPage}\n          onPreviousPage={pagination.onPreviousPage}\n          onPageSizeChange={pagination.onPageSizeChange}\n          showPageSizeOptions={pagination.showPageSizeOptions}\n          getLabel={pagination.getLabel}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Table.esm.js","sources":["../../../../src/components/Table/components/Table.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 { useId } from 'react-aria';\nimport { type Key, ResizableTableContainer } from 'react-aria-components';\nimport { TableRoot } from './TableRoot';\nimport { TableHeader } from './TableHeader';\nimport { TableBody } from './TableBody';\nimport { Row } from './Row';\nimport { Column } from './Column';\nimport { TablePagination } from '../../TablePagination';\nimport type {\n  TableProps,\n  TableItem,\n  RowConfig,\n  RowRenderFn,\n  TablePaginationType,\n} from '../types';\nimport { useMemo } from 'react';\nimport { VisuallyHidden } from '../../VisuallyHidden';\nimport { Flex } from '../../Flex';\n\nfunction isRowRenderFn<T extends TableItem>(\n  rowConfig: RowConfig<T> | RowRenderFn<T> | undefined,\n): rowConfig is RowRenderFn<T> {\n  return typeof rowConfig === 'function';\n}\n\nfunction useDisabledRows<T extends TableItem>({\n  data,\n  rowConfig,\n}: Pick<TableProps<T>, 'data' | 'rowConfig'>): Set<Key> | undefined {\n  return useMemo(() => {\n    if (!data || typeof rowConfig === 'function' || !rowConfig?.getIsDisabled) {\n      return;\n    }\n\n    return data.reduce<Set<Key>>((set, item) => {\n      const isDisabled = rowConfig.getIsDisabled?.(item);\n      if (isDisabled) {\n        set.add(String(item.id));\n      }\n      return set;\n    }, new Set<Key>());\n  }, [data, rowConfig]);\n}\n\nfunction useLiveRegionLabel(\n  pagination: TablePaginationType,\n  isStale: boolean,\n  hasData: boolean,\n): string {\n  if (!hasData || pagination.type === 'none') {\n    return '';\n  }\n\n  const { pageSize, offset, totalCount, getLabel } = pagination;\n\n  if (isStale) {\n    return 'Loading table data.';\n  }\n\n  let liveRegionLabel = 'Table page loaded. ';\n\n  if (getLabel) {\n    liveRegionLabel += getLabel({ pageSize, offset, totalCount });\n  } else if (offset !== undefined) {\n    const fromCount = offset + 1;\n    const toCount = Math.min(offset + pageSize, totalCount ?? 0);\n    liveRegionLabel += `Showing ${fromCount} to ${toCount} of ${totalCount}`;\n  }\n  return liveRegionLabel;\n}\n\n/** @public */\nexport function Table<T extends TableItem>({\n  columnConfig,\n  data,\n  loading = false,\n  isStale = false,\n  error,\n  pagination,\n  sort,\n  rowConfig,\n  selection,\n  emptyState,\n  className,\n  style,\n}: TableProps<T>) {\n  const liveRegionId = useId();\n\n  const visibleColumns = useMemo(\n    () => columnConfig.filter(col => !col.isHidden),\n    [columnConfig],\n  );\n  const disabledRows = useDisabledRows({ data, rowConfig });\n\n  const {\n    mode: selectionMode,\n    selected: selectedKeys,\n    behavior: selectionBehavior,\n    onSelectionChange,\n  } = selection || {};\n\n  if (loading && !data) {\n    return (\n      <div className={className} style={style}>\n        Loading...\n      </div>\n    );\n  }\n\n  if (error) {\n    return (\n      <div className={className} style={style}>\n        Error: {error.message}\n      </div>\n    );\n  }\n\n  const liveRegionLabel = useLiveRegionLabel(\n    pagination,\n    isStale,\n    data !== undefined,\n  );\n\n  const manualColumnSizing = columnConfig.some(\n    col =>\n      col.width != null ||\n      col.minWidth != null ||\n      col.maxWidth != null ||\n      col.defaultWidth != null,\n  );\n\n  const wrapResizable = manualColumnSizing\n    ? (elem: React.ReactNode) => (\n        <ResizableTableContainer>{elem}</ResizableTableContainer>\n      )\n    : (elem: React.ReactNode) => <>{elem}</>;\n\n  return (\n    <div className={className} style={style}>\n      <VisuallyHidden aria-live=\"polite\" id={liveRegionId}>\n        {liveRegionLabel}\n      </VisuallyHidden>\n      {wrapResizable(\n        <TableRoot\n          selectionMode={selectionMode}\n          selectionBehavior={selectionBehavior}\n          selectedKeys={selectedKeys}\n          onSelectionChange={onSelectionChange}\n          sortDescriptor={sort?.descriptor ?? undefined}\n          onSortChange={sort?.onSortChange}\n          disabledKeys={disabledRows}\n          stale={isStale}\n          aria-describedby={liveRegionId}\n        >\n          <TableHeader columns={visibleColumns}>\n            {column =>\n              column.header ? (\n                column.header()\n              ) : (\n                <Column\n                  id={column.id}\n                  isRowHeader={column.isRowHeader}\n                  allowsSorting={column.isSortable}\n                  width={column.width}\n                  defaultWidth={column.defaultWidth}\n                  minWidth={column.minWidth}\n                  maxWidth={column.maxWidth}\n                >\n                  {column.label}\n                </Column>\n              )\n            }\n          </TableHeader>\n          <TableBody\n            items={data}\n            dependencies={[visibleColumns]}\n            renderEmptyState={\n              emptyState ? () => <Flex p=\"3\">{emptyState}</Flex> : undefined\n            }\n          >\n            {item => {\n              const itemIndex = data?.indexOf(item) ?? -1;\n\n              if (isRowRenderFn(rowConfig)) {\n                return rowConfig({\n                  item,\n                  index: itemIndex,\n                });\n              }\n\n              return (\n                <Row\n                  id={String(item.id)}\n                  columns={visibleColumns}\n                  href={rowConfig?.getHref?.(item)}\n                  onAction={\n                    rowConfig?.onClick\n                      ? () => rowConfig?.onClick?.(item)\n                      : undefined\n                  }\n                >\n                  {column => column.cell(item)}\n                </Row>\n              );\n            }}\n          </TableBody>\n        </TableRoot>,\n      )}\n      {pagination.type === 'page' && (\n        <TablePagination\n          pageSize={pagination.pageSize}\n          pageSizeOptions={pagination.pageSizeOptions}\n          offset={pagination.offset}\n          totalCount={pagination.totalCount}\n          hasNextPage={pagination.hasNextPage}\n          hasPreviousPage={pagination.hasPreviousPage}\n          onNextPage={pagination.onNextPage}\n          onPreviousPage={pagination.onPreviousPage}\n          onPageSizeChange={pagination.onPageSizeChange}\n          showPageSizeOptions={pagination.showPageSizeOptions}\n          getLabel={pagination.getLabel}\n        />\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Table/hooks/useCompletePagination.esm.js

@@ -4,7 +4,8 @@ import { getEffectivePageSize } from './getEffectivePageSize.esm.js';
 
 function useCompletePagination(options, query) {
   const {
-    getData: getDataProp,
+    data,
+    getData: getDataProp = () => [],
     paginationOptions = {},
     sortFn,
     filterFn,
@@ -15,21 +16,24 @@ function useCompletePagination(options, query) {
   const getData = useStableCallback(getDataProp);
   const { sort, filter, search } = query;
   const [items, setItems] = useState([]);
-  const [isLoading, setIsLoading] = useState(true);
+  const [isLoading, setIsLoading] = useState(!data);
   const [error, setError] = useState(void 0);
   const [loadCount, setLoadCount] = useState(0);
   const [offset, setOffset] = useState(initialOffset);
   const [pageSize, setPageSize] = useState(defaultPageSize);
   useEffect(() => {
+    if (data) {
+      return;
+    }
     let cancelled = false;
     setIsLoading(true);
     setError(void 0);
     (async () => {
       try {
         const result = getData();
-        const data = result instanceof Promise ? await result : result;
+        const data2 = result instanceof Promise ? await result : result;
         if (!cancelled) {
-          setItems(data);
+          setItems(data2);
           setIsLoading(false);
         }
       } catch (err) {
@@ -42,7 +46,7 @@ function useCompletePagination(options, query) {
     return () => {
       cancelled = true;
     };
-  }, [getData, loadCount]);
+  }, [data, getData, loadCount]);
   const prevQueryRef = useRef(query);
   useEffect(() => {
     if (prevQueryRef.current !== query) {
@@ -50,8 +54,9 @@ function useCompletePagination(options, query) {
       setOffset(0);
     }
   }, [query]);
+  const resolvedItems = useMemo(() => data ?? items, [data, items]);
   const processedData = useMemo(() => {
-    let result = [...items];
+    let result = [...resolvedItems];
     if (filter !== void 0 && filterFn) {
       result = filterFn(result, filter);
     }
@@ -62,7 +67,7 @@ function useCompletePagination(options, query) {
       result = sortFn(result, sort);
     }
     return result;
-  }, [items, sort, filter, search, filterFn, searchFn, sortFn]);
+  }, [resolvedItems, sort, filter, search, filterFn, searchFn, sortFn]);
   const totalCount = processedData.length;
   const paginatedData = useMemo(
     () => processedData.slice(offset, offset + pageSize),

package/dist/components/Table/hooks/useCompletePagination.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCompletePagination.esm.js","sources":["../../../../src/components/Table/hooks/useCompletePagination.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 { useState, useCallback, useMemo, useEffect, useRef } from 'react';\nimport type { TableItem } from '../types';\nimport type {\n  PaginationResult,\n  QueryState,\n  UseTableCompleteOptions,\n} from './types';\nimport { useStableCallback } from './useStableCallback';\nimport { getEffectivePageSize } from './getEffectivePageSize';\n\n/** @internal */\nexport function useCompletePagination<T extends TableItem, TFilter>(\n  options: UseTableCompleteOptions<T, TFilter>,\n  query: QueryState<TFilter>,\n): PaginationResult<T> & { reload: () => void } {\n  const {\n    getData: getDataProp,\n    paginationOptions = {},\n    sortFn,\n    filterFn,\n    searchFn,\n  } = options;\n  const { initialOffset = 0 } = paginationOptions;\n  const defaultPageSize = getEffectivePageSize(paginationOptions);\n\n  const getData = useStableCallback(getDataProp);\n  const { sort, filter, search } = query;\n\n  const [items, setItems] = useState<T[]>([]);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<Error | undefined>(undefined);\n  const [loadCount, setLoadCount] = useState(0);\n\n  const [offset, setOffset] = useState(initialOffset);\n  const [pageSize, setPageSize] = useState(defaultPageSize);\n\n  // Load data on mount and when loadCount changes (reload trigger)\n  useEffect(() => {\n    let cancelled = false;\n    setIsLoading(true);\n    setError(undefined);\n\n    (async () => {\n      try {\n        const result = getData();\n        const data = result instanceof Promise ? await result : result;\n        if (!cancelled) {\n          setItems(data);\n          setIsLoading(false);\n        }\n      } catch (err) {\n        if (!cancelled) {\n          setError(err instanceof Error ? err : new Error(String(err)));\n          setIsLoading(false);\n        }\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [getData, loadCount]);\n\n  // Reset offset when query changes (query object is memoized)\n  const prevQueryRef = useRef(query);\n  useEffect(() => {\n    if (prevQueryRef.current !== query) {\n      prevQueryRef.current = query;\n      setOffset(0);\n    }\n  }, [query]);\n\n  // Process data client-side (filter, search, sort)\n  const processedData = useMemo(() => {\n    let result = [...items];\n    if (filter !== undefined && filterFn) {\n      result = filterFn(result, filter);\n    }\n    if (search && searchFn) {\n      result = searchFn(result, search);\n    }\n    if (sort && sortFn) {\n      result = sortFn(result, sort);\n    }\n    return result;\n  }, [items, sort, filter, search, filterFn, searchFn, sortFn]);\n\n  const totalCount = processedData.length;\n\n  // Paginate the processed data\n  const paginatedData = useMemo(\n    () => processedData.slice(offset, offset + pageSize),\n    [processedData, offset, pageSize],\n  );\n\n  const hasNextPage = offset + pageSize < totalCount;\n  const hasPreviousPage = offset > 0;\n\n  const onNextPage = useCallback(() => {\n    if (offset + pageSize < totalCount) {\n      setOffset(offset + pageSize);\n    }\n  }, [offset, pageSize, totalCount]);\n\n  const onPreviousPage = useCallback(() => {\n    if (offset > 0) {\n      setOffset(Math.max(0, offset - pageSize));\n    }\n  }, [offset, pageSize]);\n\n  const onPageSizeChange = useCallback((newSize: number) => {\n    setPageSize(newSize);\n    setOffset(0);\n  }, []);\n\n  const reload = useCallback(() => {\n    setOffset(0);\n    setLoadCount(c => c + 1);\n  }, []);\n\n  return {\n    data: paginatedData,\n    loading: isLoading,\n    error,\n    totalCount,\n    offset,\n    pageSize,\n    hasNextPage,\n    hasPreviousPage,\n    onNextPage,\n    onPreviousPage,\n    onPageSizeChange,\n    reload,\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useCompletePagination.esm.js","sources":["../../../../src/components/Table/hooks/useCompletePagination.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 { useState, useCallback, useMemo, useEffect, useRef } from 'react';\nimport type { TableItem } from '../types';\nimport type {\n  PaginationResult,\n  QueryState,\n  UseTableCompleteOptions,\n} from './types';\nimport { useStableCallback } from './useStableCallback';\nimport { getEffectivePageSize } from './getEffectivePageSize';\n\n/** @internal */\nexport function useCompletePagination<T extends TableItem, TFilter>(\n  options: UseTableCompleteOptions<T, TFilter>,\n  query: QueryState<TFilter>,\n): PaginationResult<T> & { reload: () => void } {\n  const {\n    data,\n    getData: getDataProp = () => [],\n    paginationOptions = {},\n    sortFn,\n    filterFn,\n    searchFn,\n  } = options;\n  const { initialOffset = 0 } = paginationOptions;\n  const defaultPageSize = getEffectivePageSize(paginationOptions);\n\n  const getData = useStableCallback(getDataProp);\n  const { sort, filter, search } = query;\n\n  const [items, setItems] = useState<T[]>([]);\n  const [isLoading, setIsLoading] = useState(!data);\n  const [error, setError] = useState<Error | undefined>(undefined);\n  const [loadCount, setLoadCount] = useState(0);\n\n  const [offset, setOffset] = useState(initialOffset);\n  const [pageSize, setPageSize] = useState(defaultPageSize);\n\n  // Load data on mount and when loadCount changes (reload trigger)\n  useEffect(() => {\n    if (data) {\n      return;\n    }\n\n    let cancelled = false;\n    setIsLoading(true);\n    setError(undefined);\n\n    (async () => {\n      try {\n        const result = getData();\n        const data = result instanceof Promise ? await result : result;\n        if (!cancelled) {\n          setItems(data);\n          setIsLoading(false);\n        }\n      } catch (err) {\n        if (!cancelled) {\n          setError(err instanceof Error ? err : new Error(String(err)));\n          setIsLoading(false);\n        }\n      }\n    })();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [data, getData, loadCount]);\n\n  // Reset offset when query changes (query object is memoized)\n  const prevQueryRef = useRef(query);\n  useEffect(() => {\n    if (prevQueryRef.current !== query) {\n      prevQueryRef.current = query;\n      setOffset(0);\n    }\n  }, [query]);\n\n  const resolvedItems = useMemo(() => data ?? items, [data, items]);\n\n  // Process data client-side (filter, search, sort)\n  const processedData = useMemo(() => {\n    let result = [...resolvedItems];\n    if (filter !== undefined && filterFn) {\n      result = filterFn(result, filter);\n    }\n    if (search && searchFn) {\n      result = searchFn(result, search);\n    }\n    if (sort && sortFn) {\n      result = sortFn(result, sort);\n    }\n    return result;\n  }, [resolvedItems, sort, filter, search, filterFn, searchFn, sortFn]);\n\n  const totalCount = processedData.length;\n\n  // Paginate the processed data\n  const paginatedData = useMemo(\n    () => processedData.slice(offset, offset + pageSize),\n    [processedData, offset, pageSize],\n  );\n\n  const hasNextPage = offset + pageSize < totalCount;\n  const hasPreviousPage = offset > 0;\n\n  const onNextPage = useCallback(() => {\n    if (offset + pageSize < totalCount) {\n      setOffset(offset + pageSize);\n    }\n  }, [offset, pageSize, totalCount]);\n\n  const onPreviousPage = useCallback(() => {\n    if (offset > 0) {\n      setOffset(Math.max(0, offset - pageSize));\n    }\n  }, [offset, pageSize]);\n\n  const onPageSizeChange = useCallback((newSize: number) => {\n    setPageSize(newSize);\n    setOffset(0);\n  }, []);\n\n  const reload = useCallback(() => {\n    setOffset(0);\n    setLoadCount(c => c + 1);\n  }, []);\n\n  return {\n    data: paginatedData,\n    loading: isLoading,\n    error,\n    totalCount,\n    offset,\n    pageSize,\n    hasNextPage,\n    hasPreviousPage,\n    onNextPage,\n    onPreviousPage,\n    onPageSizeChange,\n    reload,\n  };\n}\n"],"names":["data"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
 import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
 
-var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Tabs_bui-Tabs__6200292476 {\n    /* Initialize CSS variables */\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-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  .Tabs_bui-TabList__6200292476 {\n    display: flex;\n    flex-direction: row;\n  }\n\n  .Tabs_bui-TabListWrapper__6200292476 {\n    position: relative;\n  }\n\n  .Tabs_bui-Tab__6200292476 {\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-secondary);\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    position: relative;\n    z-index: 2;\n    padding-inline: var(--bui-space-2);\n\n    &[data-selected='true'] {\n      color: var(--bui-fg-primary);\n    }\n  }\n\n  .Tabs_bui-TabActive__6200292476 {\n    content: '';\n    position: absolute;\n    left: calc(var(--active-tab-left) + var(--bui-space-2));\n    bottom: -1px;\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    transition: left var(--active-transition-duration) ease-out,\n      opacity 0.15s ease-out, width var(--active-transition-duration) ease-out;\n    opacity: 1;\n  }\n\n  .Tabs_bui-TabHovered__6200292476 {\n    content: '';\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-gray-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 ease-out;\n  }\n\n  .Tabs_bui-TabPanel__6200292476 {\n    padding-inline: var(--bui-space-2);\n    padding-top: var(--bui-space-4);\n  }\n}\n";
-var styles = {"bui-Tabs":"Tabs_bui-Tabs__6200292476","bui-TabList":"Tabs_bui-TabList__6200292476","bui-TabListWrapper":"Tabs_bui-TabListWrapper__6200292476","bui-Tab":"Tabs_bui-Tab__6200292476","bui-TabActive":"Tabs_bui-TabActive__6200292476","bui-TabHovered":"Tabs_bui-TabHovered__6200292476","bui-TabPanel":"Tabs_bui-TabPanel__6200292476"};
+var css_248z = "/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .Tabs_bui-Tabs__b8746a49c6 {\n    /* Initialize CSS variables */\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-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  .Tabs_bui-TabList__b8746a49c6 {\n    display: flex;\n    flex-direction: row;\n  }\n\n  .Tabs_bui-TabListWrapper__b8746a49c6 {\n    position: relative;\n  }\n\n  .Tabs_bui-Tab__b8746a49c6 {\n    font-size: var(--bui-font-size-3);\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-regular);\n    color: var(--bui-fg-secondary);\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    position: relative;\n    z-index: 2;\n    padding-inline: var(--bui-space-2);\n\n    &[data-selected='true'] {\n      color: var(--bui-fg-primary);\n    }\n  }\n\n  .Tabs_bui-TabActive__b8746a49c6 {\n    content: '';\n    position: absolute;\n    left: calc(var(--active-tab-left) + var(--bui-space-2));\n    bottom: -1px;\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    transition: left var(--active-transition-duration) ease-out,\n      opacity 0.15s ease-out, width var(--active-transition-duration) ease-out;\n    opacity: 1;\n  }\n\n  .Tabs_bui-TabHovered__b8746a49c6 {\n    content: '';\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 ease-out;\n  }\n\n  .Tabs_bui-TabPanel__b8746a49c6 {\n    padding-inline: var(--bui-space-2);\n    padding-top: var(--bui-space-4);\n  }\n}\n";
+var styles = {"bui-Tabs":"Tabs_bui-Tabs__b8746a49c6","bui-TabList":"Tabs_bui-TabList__b8746a49c6","bui-TabListWrapper":"Tabs_bui-TabListWrapper__b8746a49c6","bui-Tab":"Tabs_bui-Tab__b8746a49c6","bui-TabActive":"Tabs_bui-TabActive__b8746a49c6","bui-TabHovered":"Tabs_bui-TabHovered__b8746a49c6","bui-TabPanel":"Tabs_bui-TabPanel__b8746a49c6"};
 styleInject(css_248z);
 
 export { styles as default };