@backstage/ui 0.15.0 → 0.15.1-next.0

package/CHANGELOG.md

@@ -1,5 +1,81 @@
 # @backstage/ui
 
+## 0.15.1-next.0
+
+### Patch Changes
+
+- 14a101f: Switch now adapts its track and thumb colors based on the background context of its parent container, and uses the accent token family when selected.
+
+  **Affected components:** Switch
+
+- b33bb24: Added a new `NumberField` component for numeric input with support for min, max, step, and keyboard increment/decrement.
+
+  **Affected components:** NumberField
+
+- 1f709a3: Fixed Header breadcrumb typography so it remains consistent when component styles are loaded in different orders.
+
+  **Affected components:** Header
+
+- 5d80f77: Introduces a new set of semantic color token families — Accent, Announcement, Warning, Negative, and Positive — each providing a consistent set of background, foreground, and border tokens for both light and dark themes. A gray scale (`--bui-gray-1` through `--bui-gray-11`) and updated foreground tokens are also included.
+
+  The previous tokens remain in place for backward compatibility but are now deprecated and will be removed in a future release.
+
+  **Migration:**
+
+  **Neutral backgrounds**
+
+  The neutral background tokens keep their existing names (`--bui-bg-app`, `--bui-bg-neutral-1` through `--bui-bg-neutral-4`) but are updated with new solid-color values for both light and dark themes. No token renaming is required. The `-hover`, `-pressed`, and `-disabled` interaction variants of these tokens are deprecated and should be removed.
+
+  **Foreground**
+
+  | Deprecated         | Replacement             |
+  | ------------------ | ----------------------- |
+  | `--bui-fg-danger`  | `--bui-fg-negative`     |
+  | `--bui-fg-success` | `--bui-fg-positive`     |
+  | `--bui-fg-info`    | `--bui-fg-announcement` |
+
+  **Accent**
+
+  | Deprecated                | Replacement                |
+  | ------------------------- | -------------------------- |
+  | `--bui-bg-solid`          | `--bui-accent-bg`          |
+  | `--bui-bg-solid-hover`    | `--bui-accent-bg-hover`    |
+  | `--bui-bg-solid-disabled` | `--bui-accent-bg-disabled` |
+  | `--bui-fg-solid`          | `--bui-accent-fg`          |
+  | `--bui-fg-solid-disabled` | `--bui-accent-fg-disabled` |
+
+  **Positive**
+
+  | Deprecated               | Replacement                 |
+  | ------------------------ | --------------------------- |
+  | `--bui-bg-success`       | `--bui-positive-bg-subdued` |
+  | `--bui-fg-success-on-bg` | `--bui-positive-fg-subdued` |
+  | `--bui-border-success`   | `--bui-positive-border`     |
+
+  **Negative**
+
+  | Deprecated              | Replacement                 |
+  | ----------------------- | --------------------------- |
+  | `--bui-bg-danger`       | `--bui-negative-bg-subdued` |
+  | `--bui-fg-danger-on-bg` | `--bui-negative-fg-subdued` |
+  | `--bui-border-danger`   | `--bui-negative-border`     |
+
+  **Warning**
+
+  | Deprecated               | Replacement                |
+  | ------------------------ | -------------------------- |
+  | `--bui-bg-warning`       | `--bui-warning-bg-subdued` |
+  | `--bui-fg-warning-on-bg` | `--bui-warning-fg-subdued` |
+  | `--bui-border-warning`   | `--bui-warning-border`     |
+
+  **Announcement**
+
+  | Deprecated            | Replacement                     |
+  | --------------------- | ------------------------------- |
+  | `--bui-bg-info`       | `--bui-announcement-bg-subdued` |
+  | `--bui-fg-info-on-bg` | `--bui-announcement-fg-subdued` |
+  | `--bui-border-info`   | `--bui-announcement-border`     |
+
 ## 0.15.0
 
 ### Minor Changes

package/dist/components/Header/Header.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  .Header_bui-HeaderTop__e703821caf.Header_bui-HeaderTop__e703821caf,\n  .Header_bui-HeaderContent__e703821caf.Header_bui-HeaderContent__e703821caf {\n    flex: none;\n    margin-bottom: 0;\n  }\n\n  .Header_bui-HeaderBottom__e703821caf {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-3);\n    margin-bottom: var(--bui-space-5);\n  }\n\n  .Header_bui-HeaderBottom__e703821caf.Header_bui-HeaderBottom__e703821caf {\n    flex: none;\n    margin-bottom: var(--bui-space-5);\n  }\n\n  .Header_bui-HeaderStickySentinel__e703821caf {\n    height: 1px;\n    margin-bottom: -1px;\n    pointer-events: none;\n  }\n\n  .Header_bui-HeaderContent__e703821caf {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    gap: var(--bui-space-3);\n    padding-top: var(--bui-space-3);\n    padding-bottom: var(--bui-space-3);\n  }\n\n  .Header_bui-HeaderContent__e703821caf[data-has-tags] {\n    padding-top: var(--bui-space-2);\n  }\n\n  .Header_bui-HeaderContent__e703821caf[data-sticky] {\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    background-color: var(--bui-bg-app);\n\n    &[data-on-bg='neutral-1'] {\n      background-color: var(--bui-bg-neutral-1);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      background-color: var(--bui-bg-neutral-3);\n    }\n  }\n\n  .Header_bui-HeaderContent__e703821caf[data-sticky]::after {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 1px;\n    content: '';\n    background-color: var(--bui-border-1);\n    opacity: 0;\n    transition: opacity 200ms ease;\n  }\n\n  .Header_bui-HeaderContent__e703821caf[data-stuck]::after {\n    opacity: 1;\n  }\n\n  .Header_bui-HeaderTabsWrapper__e703821caf {\n    margin-left: -8px;\n  }\n\n  .Header_bui-HeaderControls__e703821caf {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    flex-shrink: 0;\n  }\n\n  .Header_bui-HeaderTitleStack__e703821caf {\n    position: relative;\n    flex: 1 1 auto;\n    height: 1lh;\n    min-width: 0;\n    font-size: var(--bui-font-size-6);\n    line-height: 140%;\n    overflow: hidden;\n  }\n\n  .Header_bui-HeaderBreadcrumbs__e703821caf,\n  .Header_bui-HeaderBreadcrumbsSmall__e703821caf {\n    position: absolute;\n    inset-inline: 0;\n    top: 50%;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    min-width: 0;\n    transform: translateY(-50%);\n  }\n\n  .Header_bui-HeaderBreadcrumbsSmall__e703821caf {\n    gap: var(--bui-space-1);\n  }\n\n  .Header_bui-HeaderBreadcrumbs__e703821caf .Header_bui-HeaderBreadcrumbLink__e703821caf,\n  .Header_bui-HeaderBreadcrumbsSmall__e703821caf .Header_bui-HeaderBreadcrumbLinkSmall__e703821caf {\n    max-width: 240px;\n    overflow: hidden;\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    line-height: inherit;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .Header_bui-HeaderBreadcrumbs__e703821caf .Header_bui-HeaderBreadcrumbLink__e703821caf {\n    font-size: inherit;\n  }\n\n  .Header_bui-HeaderBreadcrumbsSmall__e703821caf .Header_bui-HeaderBreadcrumbLinkSmall__e703821caf {\n    font-size: var(--bui-font-size-4);\n  }\n\n  .Header_bui-HeaderBreadcrumbSeparator__e703821caf {\n    flex-shrink: 0;\n  }\n\n  .Header_bui-HeaderTitle__e703821caf,\n  .Header_bui-HeaderTitleSmall__e703821caf {\n    margin: 0;\n    padding: 0;\n    flex: 1 1 auto;\n    min-width: 0;\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    line-height: inherit;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .Header_bui-HeaderTitle__e703821caf {\n    font-size: inherit;\n  }\n\n  .Header_bui-HeaderTitleSmall__e703821caf {\n    font-size: var(--bui-font-size-4);\n  }\n\n  .Header_bui-HeaderTags__e703821caf {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    flex-wrap: wrap;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  .Header_bui-HeaderTag__e703821caf {\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .Header_bui-HeaderTag__e703821caf + .Header_bui-HeaderTag__e703821caf::before {\n    content: '';\n    width: 3px;\n    height: 3px;\n    border-radius: 50%;\n    background-color: var(--bui-fg-secondary);\n    flex-shrink: 0;\n  }\n\n  .Header_bui-HeaderMetaRow__e703821caf {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-5);\n    flex-wrap: wrap;\n    margin: 0;\n  }\n\n  .Header_bui-HeaderMetaItem__e703821caf {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n\n    dd {\n      margin: 0;\n    }\n  }\n}\n";
-var styles = {"bui-HeaderTop":"Header_bui-HeaderTop__e703821caf","bui-HeaderContent":"Header_bui-HeaderContent__e703821caf","bui-HeaderBottom":"Header_bui-HeaderBottom__e703821caf","bui-HeaderStickySentinel":"Header_bui-HeaderStickySentinel__e703821caf","bui-HeaderTabsWrapper":"Header_bui-HeaderTabsWrapper__e703821caf","bui-HeaderControls":"Header_bui-HeaderControls__e703821caf","bui-HeaderTitleStack":"Header_bui-HeaderTitleStack__e703821caf","bui-HeaderBreadcrumbs":"Header_bui-HeaderBreadcrumbs__e703821caf","bui-HeaderBreadcrumbsSmall":"Header_bui-HeaderBreadcrumbsSmall__e703821caf","bui-HeaderBreadcrumbLink":"Header_bui-HeaderBreadcrumbLink__e703821caf","bui-HeaderBreadcrumbLinkSmall":"Header_bui-HeaderBreadcrumbLinkSmall__e703821caf","bui-HeaderBreadcrumbSeparator":"Header_bui-HeaderBreadcrumbSeparator__e703821caf","bui-HeaderTitle":"Header_bui-HeaderTitle__e703821caf","bui-HeaderTitleSmall":"Header_bui-HeaderTitleSmall__e703821caf","bui-HeaderTags":"Header_bui-HeaderTags__e703821caf","bui-HeaderTag":"Header_bui-HeaderTag__e703821caf","bui-HeaderMetaRow":"Header_bui-HeaderMetaRow__e703821caf","bui-HeaderMetaItem":"Header_bui-HeaderMetaItem__e703821caf"};
+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  .Header_bui-HeaderTop__f866914784.Header_bui-HeaderTop__f866914784,\n  .Header_bui-HeaderContent__f866914784.Header_bui-HeaderContent__f866914784 {\n    flex: none;\n    margin-bottom: 0;\n  }\n\n  .Header_bui-HeaderBottom__f866914784 {\n    display: flex;\n    flex-direction: column;\n    gap: var(--bui-space-3);\n    margin-bottom: var(--bui-space-5);\n  }\n\n  .Header_bui-HeaderBottom__f866914784.Header_bui-HeaderBottom__f866914784 {\n    flex: none;\n    margin-bottom: var(--bui-space-5);\n  }\n\n  .Header_bui-HeaderStickySentinel__f866914784 {\n    height: 1px;\n    margin-bottom: -1px;\n    pointer-events: none;\n  }\n\n  .Header_bui-HeaderContent__f866914784 {\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    gap: var(--bui-space-3);\n    padding-top: var(--bui-space-3);\n    padding-bottom: var(--bui-space-3);\n  }\n\n  .Header_bui-HeaderContent__f866914784[data-has-tags] {\n    padding-top: var(--bui-space-2);\n  }\n\n  .Header_bui-HeaderContent__f866914784[data-sticky] {\n    position: sticky;\n    top: 0;\n    z-index: 10;\n    background-color: var(--bui-bg-app);\n\n    &[data-on-bg='neutral-1'] {\n      background-color: var(--bui-bg-neutral-1);\n    }\n\n    &[data-on-bg='neutral-2'] {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-on-bg='neutral-3'] {\n      background-color: var(--bui-bg-neutral-3);\n    }\n  }\n\n  .Header_bui-HeaderContent__f866914784[data-sticky]::after {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 1px;\n    content: '';\n    background-color: var(--bui-border-1);\n    opacity: 0;\n    transition: opacity 200ms ease;\n  }\n\n  .Header_bui-HeaderContent__f866914784[data-stuck]::after {\n    opacity: 1;\n  }\n\n  .Header_bui-HeaderTabsWrapper__f866914784 {\n    margin-left: -8px;\n  }\n\n  .Header_bui-HeaderControls__f866914784 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    flex-shrink: 0;\n  }\n\n  .Header_bui-HeaderTitleStack__f866914784 {\n    position: relative;\n    flex: 1 1 auto;\n    height: 1lh;\n    min-width: 0;\n    font-size: var(--bui-font-size-6);\n    line-height: 140%;\n    overflow: hidden;\n  }\n\n  .Header_bui-HeaderBreadcrumbs__f866914784,\n  .Header_bui-HeaderBreadcrumbsSmall__f866914784 {\n    position: absolute;\n    inset-inline: 0;\n    top: 50%;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    min-width: 0;\n    transform: translateY(-50%);\n  }\n\n  .Header_bui-HeaderBreadcrumbsSmall__f866914784 {\n    gap: var(--bui-space-1);\n  }\n\n  /*\n   * Link variant defaults have the same specificity as these contextual styles.\n   * Repeat the slot class so the Header styles win regardless of stylesheet order.\n   */\n  .Header_bui-HeaderBreadcrumbs__f866914784 .Header_bui-HeaderBreadcrumbLink__f866914784.Header_bui-HeaderBreadcrumbLink__f866914784,\n  .Header_bui-HeaderBreadcrumbsSmall__f866914784\n    .Header_bui-HeaderBreadcrumbLinkSmall__f866914784.Header_bui-HeaderBreadcrumbLinkSmall__f866914784 {\n    max-width: 240px;\n    overflow: hidden;\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    line-height: inherit;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .Header_bui-HeaderBreadcrumbs__f866914784 .Header_bui-HeaderBreadcrumbLink__f866914784.Header_bui-HeaderBreadcrumbLink__f866914784 {\n    font-size: inherit;\n  }\n\n  .Header_bui-HeaderBreadcrumbsSmall__f866914784\n    .Header_bui-HeaderBreadcrumbLinkSmall__f866914784.Header_bui-HeaderBreadcrumbLinkSmall__f866914784 {\n    font-size: var(--bui-font-size-4);\n  }\n\n  .Header_bui-HeaderBreadcrumbSeparator__f866914784 {\n    flex-shrink: 0;\n  }\n\n  .Header_bui-HeaderTitle__f866914784,\n  .Header_bui-HeaderTitleSmall__f866914784 {\n    margin: 0;\n    padding: 0;\n    flex: 1 1 auto;\n    min-width: 0;\n    font-family: var(--bui-font-regular);\n    font-weight: var(--bui-font-weight-bold);\n    line-height: inherit;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .Header_bui-HeaderTitle__f866914784 {\n    font-size: inherit;\n  }\n\n  .Header_bui-HeaderTitleSmall__f866914784 {\n    font-size: var(--bui-font-size-4);\n  }\n\n  .Header_bui-HeaderTags__f866914784 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n    flex-wrap: wrap;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  .Header_bui-HeaderTag__f866914784 {\n    display: flex;\n    align-items: center;\n    gap: var(--bui-space-2);\n  }\n\n  .Header_bui-HeaderTag__f866914784 + .Header_bui-HeaderTag__f866914784::before {\n    content: '';\n    width: 3px;\n    height: 3px;\n    border-radius: 50%;\n    background-color: var(--bui-fg-secondary);\n    flex-shrink: 0;\n  }\n\n  .Header_bui-HeaderMetaRow__f866914784 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-5);\n    flex-wrap: wrap;\n    margin: 0;\n  }\n\n  .Header_bui-HeaderMetaItem__f866914784 {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: var(--bui-space-2);\n\n    dd {\n      margin: 0;\n    }\n  }\n}\n";
+var styles = {"bui-HeaderTop":"Header_bui-HeaderTop__f866914784","bui-HeaderContent":"Header_bui-HeaderContent__f866914784","bui-HeaderBottom":"Header_bui-HeaderBottom__f866914784","bui-HeaderStickySentinel":"Header_bui-HeaderStickySentinel__f866914784","bui-HeaderTabsWrapper":"Header_bui-HeaderTabsWrapper__f866914784","bui-HeaderControls":"Header_bui-HeaderControls__f866914784","bui-HeaderTitleStack":"Header_bui-HeaderTitleStack__f866914784","bui-HeaderBreadcrumbs":"Header_bui-HeaderBreadcrumbs__f866914784","bui-HeaderBreadcrumbsSmall":"Header_bui-HeaderBreadcrumbsSmall__f866914784","bui-HeaderBreadcrumbLink":"Header_bui-HeaderBreadcrumbLink__f866914784","bui-HeaderBreadcrumbLinkSmall":"Header_bui-HeaderBreadcrumbLinkSmall__f866914784","bui-HeaderBreadcrumbSeparator":"Header_bui-HeaderBreadcrumbSeparator__f866914784","bui-HeaderTitle":"Header_bui-HeaderTitle__f866914784","bui-HeaderTitleSmall":"Header_bui-HeaderTitleSmall__f866914784","bui-HeaderTags":"Header_bui-HeaderTags__f866914784","bui-HeaderTag":"Header_bui-HeaderTag__f866914784","bui-HeaderMetaRow":"Header_bui-HeaderMetaRow__f866914784","bui-HeaderMetaItem":"Header_bui-HeaderMetaItem__f866914784"};
 styleInject(css_248z);
 
 export { styles as default };

package/dist/components/NumberField/NumberField.esm.js

@@ -0,0 +1,113 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useEffect, useMemo } from 'react';
+import { NumberField as NumberField$1, Group, Input } from 'react-aria-components';
+import { RiSubtractLine, RiAddLine } from '@remixicon/react';
+import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
+import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
+import '../FieldLabel/FieldLabel.module.css.esm.js';
+import { FieldError } from '../FieldError/FieldError.esm.js';
+import '../FieldError/FieldError.module.css.esm.js';
+import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
+import '../ButtonIcon/ButtonIcon.module.css.esm.js';
+import { NumberFieldDefinition } from './definition.esm.js';
+
+const NumberField = forwardRef(
+  (props, ref) => {
+    const { ownProps, restProps, dataAttributes } = useDefinition(
+      NumberFieldDefinition,
+      props
+    );
+    const { classes, label, icon, secondaryLabel, placeholder, description } = ownProps;
+    useEffect(() => {
+      if (!label && !restProps["aria-label"] && !restProps["aria-labelledby"]) {
+        console.warn(
+          "NumberField requires either a visible label, aria-label, or aria-labelledby for accessibility"
+        );
+      }
+    }, [label, restProps["aria-label"], restProps["aria-labelledby"]]);
+    const secondaryLabelText = secondaryLabel || (restProps.isRequired ? "Required" : null);
+    const formatOptions = useMemo(
+      () => ({
+        useGrouping: false,
+        ...restProps.formatOptions
+      }),
+      [restProps.formatOptions]
+    );
+    return /* @__PURE__ */ jsxs(
+      NumberField$1,
+      {
+        className: classes.root,
+        ...dataAttributes,
+        ...restProps,
+        formatOptions,
+        ref,
+        children: [
+          /* @__PURE__ */ jsx(
+            FieldLabel,
+            {
+              label,
+              secondaryLabel: secondaryLabelText,
+              description,
+              descriptionSlot: "description"
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Group,
+            {
+              className: classes.inputWrapper,
+              "data-size": dataAttributes["data-size"],
+              children: [
+                icon && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: classes.inputIcon,
+                    "data-size": dataAttributes["data-size"],
+                    "aria-hidden": "true",
+                    children: icon
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    className: classes.input,
+                    ...icon && { "data-icon": true },
+                    placeholder
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: classes.stepperButtons, children: [
+                  /* @__PURE__ */ jsx(
+                    ButtonIcon,
+                    {
+                      slot: "decrement",
+                      variant: "tertiary",
+                      size: ownProps.size,
+                      className: classes.stepperButton,
+                      icon: /* @__PURE__ */ jsx(RiSubtractLine, {}),
+                      "aria-label": "Decrease"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    ButtonIcon,
+                    {
+                      slot: "increment",
+                      variant: "tertiary",
+                      size: ownProps.size,
+                      className: classes.stepperButton,
+                      icon: /* @__PURE__ */ jsx(RiAddLine, {}),
+                      "aria-label": "Increase"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldError, {})
+        ]
+      }
+    );
+  }
+);
+NumberField.displayName = "NumberField";
+
+export { NumberField };
+//# sourceMappingURL=NumberField.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.esm.js","sources":["../../../src/components/NumberField/NumberField.tsx"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef, useEffect, useMemo } from 'react';\nimport {\n  Group,\n  Input,\n  NumberField as AriaNumberField,\n} from 'react-aria-components';\nimport { RiAddLine, RiSubtractLine } from '@remixicon/react';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { ButtonIcon } from '../ButtonIcon';\nimport type { NumberFieldProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { NumberFieldDefinition } from './definition';\n\n/**\n * A numeric input with an integrated label, optional icon, and inline error display.\n *\n * @public\n */\nexport const NumberField = forwardRef<HTMLDivElement, NumberFieldProps>(\n  (props, ref) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      NumberFieldDefinition,\n      props,\n    );\n    const { classes, label, icon, secondaryLabel, placeholder, description } =\n      ownProps;\n\n    useEffect(() => {\n      if (!label && !restProps['aria-label'] && !restProps['aria-labelledby']) {\n        console.warn(\n          'NumberField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, restProps['aria-label'], restProps['aria-labelledby']]);\n\n    const secondaryLabelText =\n      secondaryLabel || (restProps.isRequired ? 'Required' : null);\n\n    const formatOptions = useMemo(\n      () => ({\n        useGrouping: false,\n        ...restProps.formatOptions,\n      }),\n      [restProps.formatOptions],\n    );\n\n    return (\n      <AriaNumberField\n        className={classes.root}\n        {...dataAttributes}\n        {...restProps}\n        formatOptions={formatOptions}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n          descriptionSlot=\"description\"\n        />\n        <Group\n          className={classes.inputWrapper}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon && (\n            <div\n              className={classes.inputIcon}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon}\n            </div>\n          )}\n          <Input\n            className={classes.input}\n            {...(icon && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n          <div className={classes.stepperButtons}>\n            <ButtonIcon\n              slot=\"decrement\"\n              variant=\"tertiary\"\n              size={ownProps.size}\n              className={classes.stepperButton}\n              icon={<RiSubtractLine />}\n              aria-label=\"Decrease\"\n            />\n            <ButtonIcon\n              slot=\"increment\"\n              variant=\"tertiary\"\n              size={ownProps.size}\n              className={classes.stepperButton}\n              icon={<RiAddLine />}\n              aria-label=\"Increase\"\n            />\n          </div>\n        </Group>\n        <FieldError />\n      </AriaNumberField>\n    );\n  },\n);\n\nNumberField.displayName = 'NumberField';\n"],"names":["AriaNumberField"],"mappings":";;;;;;;;;;;;;AAmCO,MAAM,WAAA,GAAc,UAAA;AAAA,EACzB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,qBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAO,MAAM,cAAA,EAAgB,WAAA,EAAa,aAAY,GACrE,QAAA;AAEF,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,SAAS,CAAC,SAAA,CAAU,YAAY,CAAA,IAAK,CAAC,SAAA,CAAU,iBAAiB,CAAA,EAAG;AACvE,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,CAAU,YAAY,CAAA,EAAG,SAAA,CAAU,iBAAiB,CAAC,CAAC,CAAA;AAEjE,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,SAAA,CAAU,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAEzD,IAAA,MAAM,aAAA,GAAgB,OAAA;AAAA,MACpB,OAAO;AAAA,QACL,WAAA,EAAa,KAAA;AAAA,QACb,GAAG,SAAA,CAAU;AAAA,OACf,CAAA;AAAA,MACA,CAAC,UAAU,aAAa;AAAA,KAC1B;AAEA,IAAA,uBACE,IAAA;AAAA,MAACA,aAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,IAAA;AAAA,QAClB,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QACJ,aAAA;AAAA,QACA,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAA,EAAgB,kBAAA;AAAA,cAChB,WAAA;AAAA,cACA,eAAA,EAAgB;AAAA;AAAA,WAClB;AAAA,0BACA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,OAAA,CAAQ,YAAA;AAAA,cACnB,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,cAEpC,QAAA,EAAA;AAAA,gBAAA,IAAA,oBACC,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,OAAA,CAAQ,SAAA;AAAA,oBACnB,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBACrC,aAAA,EAAY,MAAA;AAAA,oBAEX,QAAA,EAAA;AAAA;AAAA,iBACH;AAAA,gCAEF,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,OAAA,CAAQ,KAAA;AAAA,oBAClB,GAAI,IAAA,IAAQ,EAAE,WAAA,EAAa,IAAA,EAAK;AAAA,oBACjC;AAAA;AAAA,iBACF;AAAA,gCACA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,cAAA,EACtB,QAAA,EAAA;AAAA,kCAAA,GAAA;AAAA,oBAAC,UAAA;AAAA,oBAAA;AAAA,sBACC,IAAA,EAAK,WAAA;AAAA,sBACL,OAAA,EAAQ,UAAA;AAAA,sBACR,MAAM,QAAA,CAAS,IAAA;AAAA,sBACf,WAAW,OAAA,CAAQ,aAAA;AAAA,sBACnB,IAAA,sBAAO,cAAA,EAAA,EAAe,CAAA;AAAA,sBACtB,YAAA,EAAW;AAAA;AAAA,mBACb;AAAA,kCACA,GAAA;AAAA,oBAAC,UAAA;AAAA,oBAAA;AAAA,sBACC,IAAA,EAAK,WAAA;AAAA,sBACL,OAAA,EAAQ,UAAA;AAAA,sBACR,MAAM,QAAA,CAAS,IAAA;AAAA,sBACf,WAAW,OAAA,CAAQ,aAAA;AAAA,sBACnB,IAAA,sBAAO,SAAA,EAAA,EAAU,CAAA;AAAA,sBACjB,YAAA,EAAW;AAAA;AAAA;AACb,iBAAA,EACF;AAAA;AAAA;AAAA,WACF;AAAA,8BACC,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;;;;"}

package/dist/components/NumberField/NumberField.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 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n@layer tokens, base, components, utilities;\n\n@layer components {\n  .NumberField_bui-NumberField__9e112f194d {\n    display: flex;\n    flex-direction: column;\n    font-family: var(--bui-font-regular);\n    width: 100%;\n    flex-shrink: 0;\n\n    &[data-on-bg='neutral-1'] .NumberField_bui-Input__9e112f194d {\n      background-color: var(--bui-bg-neutral-2);\n    }\n\n    &[data-on-bg='neutral-2'] .NumberField_bui-Input__9e112f194d {\n      background-color: var(--bui-bg-neutral-3);\n    }\n\n    &[data-on-bg='neutral-3'] .NumberField_bui-Input__9e112f194d {\n      background-color: var(--bui-bg-neutral-4);\n    }\n  }\n\n  .NumberField_bui-InputWrapper__9e112f194d {\n    position: relative;\n\n    &[data-size='small'] .NumberField_bui-Input__9e112f194d {\n      height: 2rem;\n      padding-right: 3.5rem;\n    }\n\n    &[data-size='medium'] .NumberField_bui-Input__9e112f194d {\n      height: 2.5rem;\n      padding-right: 4.5rem;\n    }\n\n    &[data-size='small'] .NumberField_bui-Input__9e112f194d[data-icon] {\n      padding-left: var(--bui-space-8);\n    }\n\n    &[data-size='medium'] .NumberField_bui-Input__9e112f194d[data-icon] {\n      padding-left: var(--bui-space-9);\n    }\n\n    &[data-disabled] {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  }\n\n  .NumberField_bui-InputIcon__9e112f194d {\n    position: absolute;\n    left: var(--bui-space-3);\n    top: 50%;\n    transform: translateY(-50%);\n    margin-right: var(--bui-space-1);\n    color: var(--bui-fg-primary);\n    flex-shrink: 0;\n    pointer-events: none;\n    /* To animate the icon when the input is collapsed */\n    transition: left 0.2s ease-in-out;\n\n    &[data-size='small'],\n    &[data-size='small'] svg {\n      width: 1rem;\n      height: 1rem;\n    }\n\n    &[data-size='medium'],\n    &[data-size='medium'] svg {\n      width: 1.25rem;\n      height: 1.25rem;\n    }\n  }\n\n  .NumberField_bui-Input__9e112f194d {\n    display: flex;\n    align-items: center;\n    padding: 0 var(--bui-space-3);\n    border-radius: var(--bui-radius-2);\n    border: none;\n    background-color: var(--bui-bg-neutral-1);\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: box-shadow 0.2s ease-in-out;\n    width: 100%;\n    height: 100%;\n    cursor: inherit;\n\n    &[data-focused] {\n      outline: none;\n      box-shadow: inset 0 0 0 1px var(--bui-ring);\n    }\n\n    &::placeholder {\n      color: var(--bui-fg-secondary);\n    }\n\n    &[data-invalid] {\n      box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n    }\n  }\n\n  .NumberField_bui-StepperButtons__9e112f194d {\n    position: absolute;\n    right: var(--bui-space-1);\n    top: 50%;\n    transform: translateY(-50%);\n    display: flex;\n    align-items: center;\n  }\n\n  .NumberField_bui-NumberField__9e112f194d .NumberField_bui-StepperButton__9e112f194d {\n    width: 1.5rem;\n    height: 1.5rem;\n  }\n\n  .NumberField_bui-NumberField__9e112f194d[data-size='medium'] .NumberField_bui-StepperButton__9e112f194d {\n    width: 2rem;\n    height: 2rem;\n  }\n}\n";
+var styles = {"bui-NumberField":"NumberField_bui-NumberField__9e112f194d","bui-Input":"NumberField_bui-Input__9e112f194d","bui-InputWrapper":"NumberField_bui-InputWrapper__9e112f194d","bui-InputIcon":"NumberField_bui-InputIcon__9e112f194d","bui-StepperButtons":"NumberField_bui-StepperButtons__9e112f194d","bui-StepperButton":"NumberField_bui-StepperButton__9e112f194d"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=NumberField.module.css.esm.js.map

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

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

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

@@ -0,0 +1,34 @@
+import 'react/jsx-runtime';
+import 'clsx';
+import '../../hooks/useBreakpoint.esm.js';
+import '../../hooks/useBg.esm.js';
+import '../../hooks/useDefinition/helpers.esm.js';
+import '../../analytics/useAnalytics.esm.js';
+import 'react-router-dom';
+import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
+import styles from './NumberField.module.css.esm.js';
+
+const NumberFieldDefinition = defineComponent()({
+  styles,
+  classNames: {
+    root: "bui-NumberField",
+    inputWrapper: "bui-InputWrapper",
+    input: "bui-Input",
+    inputIcon: "bui-InputIcon",
+    stepperButtons: "bui-StepperButtons",
+    stepperButton: "bui-StepperButton"
+  },
+  bg: "consumer",
+  propDefs: {
+    size: { dataAttribute: true, default: "small" },
+    className: {},
+    icon: {},
+    placeholder: {},
+    label: {},
+    description: {},
+    secondaryLabel: {}
+  }
+});
+
+export { NumberFieldDefinition };
+//# sourceMappingURL=definition.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"definition.esm.js","sources":["../../../src/components/NumberField/definition.ts"],"sourcesContent":["/*\n * Copyright 2026 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { defineComponent } from '../../hooks/useDefinition';\nimport type { NumberFieldOwnProps } from './types';\nimport styles from './NumberField.module.css';\n\n/**\n * Component definition for NumberField\n * @public\n */\nexport const NumberFieldDefinition = defineComponent<NumberFieldOwnProps>()({\n  styles,\n  classNames: {\n    root: 'bui-NumberField',\n    inputWrapper: 'bui-InputWrapper',\n    input: 'bui-Input',\n    inputIcon: 'bui-InputIcon',\n    stepperButtons: 'bui-StepperButtons',\n    stepperButton: 'bui-StepperButton',\n  },\n  bg: 'consumer',\n  propDefs: {\n    size: { dataAttribute: true, default: 'small' },\n    className: {},\n    icon: {},\n    placeholder: {},\n    label: {},\n    description: {},\n    secondaryLabel: {},\n  },\n});\n"],"names":[],"mappings":";;;;;;;;;;AAwBO,MAAM,qBAAA,GAAwB,iBAAqC,CAAE;AAAA,EAC1E,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,iBAAA;AAAA,IACN,YAAA,EAAc,kBAAA;AAAA,IACd,KAAA,EAAO,WAAA;AAAA,IACP,SAAA,EAAW,eAAA;AAAA,IACX,cAAA,EAAgB,oBAAA;AAAA,IAChB,aAAA,EAAe;AAAA,GACjB;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,QAAA,EAAU;AAAA,IACR,IAAA,EAAM,EAAE,aAAA,EAAe,IAAA,EAAM,SAAS,OAAA,EAAQ;AAAA,IAC9C,WAAW,EAAC;AAAA,IACZ,MAAM,EAAC;AAAA,IACP,aAAa,EAAC;AAAA,IACd,OAAO,EAAC;AAAA,IACR,aAAa,EAAC;AAAA,IACd,gBAAgB;AAAC;AAErB,CAAC;;;;"}

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

@@ -6,12 +6,24 @@ import { SwitchDefinition } from './definition.esm.js';
 
 const Switch = forwardRef(
   (props, ref) => {
-    const { ownProps, restProps } = useDefinition(SwitchDefinition, props);
+    const { ownProps, restProps, dataAttributes } = useDefinition(
+      SwitchDefinition,
+      props
+    );
     const { classes, label } = ownProps;
-    return /* @__PURE__ */ jsxs(Switch$1, { className: classes.root, ref, ...restProps, children: [
-      /* @__PURE__ */ jsx("div", { className: classes.indicator }),
-      label
-    ] });
+    return /* @__PURE__ */ jsxs(
+      Switch$1,
+      {
+        className: classes.root,
+        ref,
+        ...dataAttributes,
+        ...restProps,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: classes.indicator }),
+          label
+        ]
+      }
+    );
   }
 );
 Switch.displayName = "Switch";

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.esm.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { Switch as AriaSwitch } from 'react-aria-components';\nimport type { SwitchProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SwitchDefinition } from './definition';\n\n/**\n * A toggle control for switching between on and off states, with an optional visible label.\n *\n * @public\n */\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n  (props, ref) => {\n    const { ownProps, restProps } = useDefinition(SwitchDefinition, props);\n    const { classes, label } = ownProps;\n\n    return (\n      <AriaSwitch className={classes.root} ref={ref} {...restProps}>\n        <div className={classes.indicator} />\n        {label}\n      </AriaSwitch>\n    );\n  },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["AriaSwitch"],"mappings":";;;;;;AA2BO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAU,GAAI,aAAA,CAAc,kBAAkB,KAAK,CAAA;AACrE,IAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAM,GAAI,QAAA;AAE3B,IAAA,4BACGA,QAAA,EAAA,EAAW,SAAA,EAAW,QAAQ,IAAA,EAAM,GAAA,EAAW,GAAG,SAAA,EACjD,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,SAAA,EAAW,CAAA;AAAA,MAClC;AAAA,KAAA,EACH,CAAA;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}
+{"version":3,"file":"Switch.esm.js","sources":["../../../src/components/Switch/Switch.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { Switch as AriaSwitch } from 'react-aria-components';\nimport type { SwitchProps } from './types';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SwitchDefinition } from './definition';\n\n/**\n * A toggle control for switching between on and off states, with an optional visible label.\n *\n * @public\n */\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(\n  (props, ref) => {\n    const { ownProps, restProps, dataAttributes } = useDefinition(\n      SwitchDefinition,\n      props,\n    );\n    const { classes, label } = ownProps;\n\n    return (\n      <AriaSwitch\n        className={classes.root}\n        ref={ref}\n        {...dataAttributes}\n        {...restProps}\n      >\n        <div className={classes.indicator} />\n        {label}\n      </AriaSwitch>\n    );\n  },\n);\n\nSwitch.displayName = 'Switch';\n"],"names":["AriaSwitch"],"mappings":";;;;;;AA2BO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,cAAA,EAAe,GAAI,aAAA;AAAA,MAC9C,gBAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAM,GAAI,QAAA;AAE3B,IAAA,uBACE,IAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,WAAW,OAAA,CAAQ,IAAA;AAAA,QACnB,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,SAAA,EAAW,CAAA;AAAA,UAClC;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}

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__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"};
+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__2f8b39dbc2 {\n    --switch-indicator-bg: var(--bui-gray-4);\n\n    [data-theme-mode='dark'] & {\n      --switch-indicator-bg: var(--bui-gray-6);\n    }\n\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      --switch-thumb-bg: var(--bui-gray-3);\n\n      &[data-on-bg='neutral-1'] {\n        --switch-thumb-bg: var(--bui-gray-2);\n      }\n\n      &[data-on-bg='neutral-2'] {\n        --switch-thumb-bg: var(--bui-gray-3);\n      }\n\n      &[data-on-bg='neutral-3'] {\n        --switch-thumb-bg: var(--bui-gray-2);\n      }\n\n      cursor: not-allowed;\n      color: var(--bui-fg-disabled);\n    }\n\n    [data-theme-mode='dark'] &[data-disabled] {\n      --switch-thumb-bg: var(--bui-gray-5);\n    }\n\n    &[data-selected] {\n      .Switch_bui-SwitchIndicator__2f8b39dbc2 {\n        background: var(--bui-accent-bg);\n\n        &:before {\n          background: var(--bui-accent-fg);\n          transform: translateX(100%);\n        }\n      }\n\n      &[data-disabled] {\n        .Switch_bui-SwitchIndicator__2f8b39dbc2 {\n          background: var(--bui-accent-bg-disabled);\n\n          &:before {\n            background: var(--bui-accent-fg-disabled);\n          }\n        }\n      }\n\n      &[data-pressed] {\n        .Switch_indicator__2f8b39dbc2 {\n          background: var(--bui-bg-neutral-3);\n        }\n      }\n    }\n\n    &[data-focus-visible] .Switch_bui-SwitchIndicator__2f8b39dbc2 {\n      outline: 2px solid;\n      outline-offset: 2px;\n    }\n  }\n\n  .Switch_bui-SwitchIndicator__2f8b39dbc2 {\n    width: 2rem;\n    height: 1.143rem;\n    border: 2px;\n    background: var(--switch-indicator-bg);\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(--switch-thumb-bg, var(--bui-accent-fg));\n      border-radius: 16px;\n      transition: all 200ms;\n    }\n  }\n}\n";
+var styles = {"bui-Switch":"Switch_bui-Switch__2f8b39dbc2","bui-SwitchIndicator":"Switch_bui-SwitchIndicator__2f8b39dbc2","indicator":"Switch_indicator__2f8b39dbc2"};
 styleInject(css_248z);
 
 export { styles as default };

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

@@ -14,6 +14,7 @@ const SwitchDefinition = defineComponent()({
     root: "bui-Switch",
     indicator: "bui-SwitchIndicator"
   },
+  bg: "consumer",
   propDefs: {
     label: {},
     className: {}

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

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

package/dist/css/styles.css

@@ -85,150 +85,266 @@
     --bui-radius-6: calc(1.25rem);
     --bui-radius-full: 9999px;
 
+    /* Animations */
+    --bui-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+
     /* Base Colors */
     --bui-black: #000000;
     --bui-white: #ffffff;
+    --bui-ring: #1f5493;
+    --bui-scrollbar: #a0a0a03b;
+    --bui-scrollbar-thumb: #a0a0a0;
+
+    /* Gray scale */
+    --bui-gray-1: #fafafa;
+    --bui-gray-2: #f5f5f5;
+    --bui-gray-3: #e5e5e5;
+    --bui-gray-4: #d4d4d4;
+    --bui-gray-5: #a1a1a1;
+    --bui-gray-6: #737373;
+    --bui-gray-7: #525252;
+    --bui-gray-8: #404040;
+    --bui-gray-9: #262626;
+    --bui-gray-10: #171717;
+    --bui-gray-11: #0a0a0a;
+
+    /* Neutral background colors */
+    --bui-bg-app: #f5f5f5;
+    --bui-bg-neutral-1: var(--bui-white);
+    --bui-bg-neutral-2: #f7f7f7;
+    --bui-bg-neutral-3: var(--bui-white);
+    --bui-bg-neutral-4: #f7f7f7;
 
-    /* Solid background colors */
+    /* Foreground colors */
+    --bui-fg-primary: var(--bui-black);
+    --bui-fg-secondary: #696969;
+    --bui-fg-disabled: #aaaaaa;
+    --bui-fg-positive: #1abc54;
+    --bui-fg-negative: #ee3a4c;
+    --bui-fg-warning: #f18900;
+    --bui-fg-announcement: #2a86f3;
+
+    /* Border colors */
+    --bui-border-1: var(--bui-gray-3);
+    --bui-border-2: var(--bui-gray-6);
+
+    /* Accent */
+    --bui-accent-bg: #1f5493;
+    --bui-accent-bg-hover: #163a66;
+    --bui-accent-bg-disabled: #163a66;
+    --bui-accent-fg: #ffffff;
+    --bui-accent-fg-disabled: #98a8bc;
+
+    /* Announcement */
+    --bui-announcement-bg: #0d72ea;
+    --bui-announcement-bg-hover: #2b88f5;
+    --bui-announcement-bg-disabled: #0d72ea;
+    --bui-announcement-bg-subdued: #c8e0fc;
+    --bui-announcement-bg-subdued-hover: #e0edfd;
+    --bui-announcement-bg-subdued-disabled: #c8e0fc;
+    --bui-announcement-border: #549ef4;
+    --bui-announcement-fg: #ffffff;
+    --bui-announcement-fg-disabled: #a4ccfb;
+    --bui-announcement-fg-subdued: #173da6;
+    --bui-announcement-fg-subdued-disabled: #7391e3;
+
+    /* Warning */
+    --bui-warning-bg: #ff9400;
+    --bui-warning-bg-hover: #ffb656;
+    --bui-warning-bg-disabled: #ff9400;
+    --bui-warning-bg-subdued: #ffedd5;
+    --bui-warning-bg-subdued-hover: #f8ddb9;
+    --bui-warning-bg-subdued-disabled: #f8ddb9;
+    --bui-warning-border: #ff9400;
+    --bui-warning-fg: #000000;
+    --bui-warning-fg-disabled: #aa4d00;
+    --bui-warning-fg-subdued: #aa4d00;
+    --bui-warning-fg-subdued-disabled: #e3a572;
+
+    /* Negative */
+    --bui-negative-bg: #dc2626;
+    --bui-negative-bg-hover: #f44b4b;
+    --bui-negative-bg-disabled: #ff8686;
+    --bui-negative-bg-subdued: #ffcbcb;
+    --bui-negative-bg-subdued-hover: #f7b6b6;
+    --bui-negative-bg-subdued-disabled: #f7b6b6;
+    --bui-negative-border: #d06565;
+    --bui-negative-fg: #ffffff;
+    --bui-negative-fg-disabled: #f7b6b6;
+    --bui-negative-fg-subdued: #991919;
+    --bui-negative-fg-subdued-disabled: #bb7272;
+
+    /* Positive */
+    --bui-positive-bg: #1ed760;
+    --bui-positive-bg-hover: #3be477;
+    --bui-positive-bg-disabled: #1abc54;
+    --bui-positive-bg-subdued: #96f0b6;
+    --bui-positive-bg-subdued-hover: #c5f7d7;
+    --bui-positive-bg-subdued-disabled: #96f0b6;
+    --bui-positive-border: #54a671;
+    --bui-positive-fg: #000000;
+    --bui-positive-fg-disabled: #0c632b;
+    --bui-positive-fg-subdued: #0c632b;
+    --bui-positive-fg-subdued-disabled: #4b9666;
+
+    /* Deprecated tokens */
     --bui-bg-solid: #1f5493;
     --bui-bg-solid-hover: #163a66;
     --bui-bg-solid-pressed: #0f2b4e;
     --bui-bg-solid-disabled: #163a66;
-
-    /* Neutral background colors */
-    --bui-bg-app: #f8f8f8;
-
-    --bui-bg-neutral-1: #fff;
     --bui-bg-neutral-1-hover: oklch(0% 0 0 / 6%);
     --bui-bg-neutral-1-pressed: oklch(0% 0 0 / 12%);
     --bui-bg-neutral-1-disabled: oklch(0% 0 0 / 6%);
-
-    --bui-bg-neutral-2: oklch(0% 0 0 / 6%);
     --bui-bg-neutral-2-hover: oklch(0% 0 0 / 12%);
     --bui-bg-neutral-2-pressed: oklch(0% 0 0 / 16%);
     --bui-bg-neutral-2-disabled: oklch(0% 0 0 / 6%);
-
-    --bui-bg-neutral-3: oklch(0% 0 0 / 6%);
     --bui-bg-neutral-3-hover: oklch(0% 0 0 / 12%);
     --bui-bg-neutral-3-pressed: oklch(0% 0 0 / 16%);
     --bui-bg-neutral-3-disabled: oklch(0% 0 0 / 6%);
-
-    --bui-bg-neutral-4: oklch(0% 0 0 / 6%);
     --bui-bg-neutral-4-hover: oklch(0% 0 0 / 12%);
     --bui-bg-neutral-4-pressed: oklch(0% 0 0 / 16%);
     --bui-bg-neutral-4-disabled: oklch(0% 0 0 / 6%);
-
-    /* Status background colors */
     --bui-bg-danger: #ffe2e2;
     --bui-bg-warning: #ffedd5;
     --bui-bg-success: #dcfce7;
     --bui-bg-info: #dbeafe;
-
-    /* Foreground colors */
-    --bui-fg-primary: var(--bui-black);
-    --bui-fg-secondary: oklch(0% 0 0 / 50%);
-    --bui-fg-disabled: oklch(0% 0 0 / 28%);
     --bui-fg-solid: var(--bui-white);
     --bui-fg-solid-disabled: #98a8bc;
-
-    /* Foreground Statuses */
     --bui-fg-danger-on-bg: #991919;
     --bui-fg-warning-on-bg: #92310a;
     --bui-fg-success-on-bg: #116932;
     --bui-fg-info-on-bg: #173da6;
     --bui-fg-danger: #ec3b18;
-    --bui-fg-warning: #ef7a32;
     --bui-fg-success: #1aaf4f;
     --bui-fg-info: #0d74ce;
-
-    /* Border colors */
-    --bui-border-1: #d5d5d5;
-    --bui-border-2: #bababa;
     --bui-border-info: #7ea9d6;
     --bui-border-danger: #f87a7a;
     --bui-border-warning: #e36d05;
     --bui-border-success: #53db83;
-
-    /* Special colors */
-    --bui-ring: #1f5493;
-    --bui-scrollbar: #a0a0a03b;
-    --bui-scrollbar-thumb: #a0a0a0;
-
-    /* Shadows */
     --bui-shadow: 0 10px 15px -3px rgba(0 0 0 / 0.1),
       0 4px 6px -4px rgba(0 0 0 / 0.1);
-
-    --bui-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
 
   /* Dark theme tokens */
   [data-theme-mode='dark'] {
-    /* Solid background colors */
-    --bui-bg-solid: #9cc9ff;
-    --bui-bg-solid-hover: #83b9fd;
-    --bui-bg-solid-pressed: #83b9fd;
-    --bui-bg-solid-disabled: #1b3d68;
+    /* Base colors */
+    --bui-ring: #1f5493;
+    --bui-scrollbar: #3636363a;
+    --bui-scrollbar-thumb: #575757;
 
     /* Neutral background colors */
     --bui-bg-app: #333333;
+    --bui-bg-neutral-1: #1a1a1a;
+    --bui-bg-neutral-2: #282828;
+    --bui-bg-neutral-3: #393939;
+    --bui-bg-neutral-4: #474747;
 
-    --bui-bg-neutral-1: oklch(100% 0 0 / 10%);
+    /* Foreground colors */
+    --bui-fg-primary: var(--bui-white);
+    --bui-fg-secondary: #a3a3a3;
+    --bui-fg-disabled: #707070;
+    --bui-fg-positive: #21b656;
+    --bui-fg-negative: #ee3a4c;
+    --bui-fg-warning: #f18900;
+    --bui-fg-announcement: #2a86f3;
+
+    /* Border colors */
+    --bui-border-1: var(--bui-gray-6);
+    --bui-border-2: var(--bui-gray-5);
+
+    /* Accent */
+    --bui-accent-bg: #9cc9ff;
+    --bui-accent-bg-hover: #83b9fd;
+    --bui-accent-bg-disabled: #3b6293;
+    --bui-accent-fg: #101821;
+    --bui-accent-fg-disabled: #6191cc;
+
+    /* Announcement */
+    --bui-announcement-bg: #0d72ea;
+    --bui-announcement-bg-hover: #2b88f5;
+    --bui-announcement-bg-disabled: #0d72ea;
+    --bui-announcement-bg-subdued: #052a56;
+    --bui-announcement-bg-subdued-hover: #0c3d77;
+    --bui-announcement-bg-subdued-disabled: #052a56;
+    --bui-announcement-border: #2363af;
+    --bui-announcement-fg: #ffffff;
+    --bui-announcement-fg-disabled: #70b8ff;
+    --bui-announcement-fg-subdued: #70b8ff;
+    --bui-announcement-fg-subdued-disabled: #4275a6;
+
+    /* Warning */
+    --bui-warning-bg: #ffa42c;
+    --bui-warning-bg-hover: #ffb656;
+    --bui-warning-bg-disabled: #ffb656;
+    --bui-warning-bg-subdued: #491e00;
+    --bui-warning-bg-subdued-hover: #612901;
+    --bui-warning-bg-subdued-disabled: #582400;
+    --bui-warning-border: #7c4903;
+    --bui-warning-fg: #000000;
+    --bui-warning-fg-disabled: #aa4d00;
+    --bui-warning-fg-subdued: #f2ab4a;
+    --bui-warning-fg-subdued-disabled: #aa4d00;
+
+    /* Negative */
+    --bui-negative-bg: #dc2626;
+    --bui-negative-bg-hover: #f44b4b;
+    --bui-negative-bg-disabled: #dc2626;
+    --bui-negative-bg-subdued: #350708;
+    --bui-negative-bg-subdued-hover: #5e1a1b;
+    --bui-negative-bg-subdued-disabled: #5e1a1b;
+    --bui-negative-border: #6f101c;
+    --bui-negative-fg: #ffffff;
+    --bui-negative-fg-disabled: #f7b6b6;
+    --bui-negative-fg-subdued: #fca5a5;
+    --bui-negative-fg-subdued-disabled: #bb7272;
+
+    /* Positive */
+    --bui-positive-bg: #1ed760;
+    --bui-positive-bg-hover: #3be477;
+    --bui-positive-bg-disabled: #1abc54;
+    --bui-positive-bg-subdued: #073116;
+    --bui-positive-bg-subdued-hover: #0b431f;
+    --bui-positive-bg-subdued-disabled: #073116;
+    --bui-positive-border: #136d33;
+    --bui-positive-fg: #000000;
+    --bui-positive-fg-disabled: #0c632b;
+    --bui-positive-fg-subdued: #8ddeaa;
+    --bui-positive-fg-subdued-disabled: #509c6b;
+
+    /* Deprecated tokens */
+    --bui-bg-solid: #9cc9ff;
+    --bui-bg-solid-hover: #83b9fd;
+    --bui-bg-solid-pressed: #83b9fd;
+    --bui-bg-solid-disabled: #1b3d68;
     --bui-bg-neutral-1-hover: oklch(100% 0 0 / 14%);
     --bui-bg-neutral-1-pressed: oklch(100% 0 0 / 20%);
     --bui-bg-neutral-1-disabled: oklch(100% 0 0 / 10%);
-
-    --bui-bg-neutral-2: oklch(100% 0 0 / 6%);
     --bui-bg-neutral-2-hover: oklch(100% 0 0 / 10%);
     --bui-bg-neutral-2-pressed: oklch(100% 0 0 / 16%);
     --bui-bg-neutral-2-disabled: oklch(100% 0 0 / 6%);
-
-    --bui-bg-neutral-3: oklch(100% 0 0 / 8%);
     --bui-bg-neutral-3-hover: oklch(100% 0 0 / 12%);
     --bui-bg-neutral-3-pressed: oklch(100% 0 0 / 20%);
     --bui-bg-neutral-3-disabled: oklch(100% 0 0 / 8%);
-
-    --bui-bg-neutral-4: oklch(100% 0 0 / 8%);
     --bui-bg-neutral-4-hover: oklch(100% 0 0 / 12%);
     --bui-bg-neutral-4-pressed: oklch(100% 0 0 / 20%);
     --bui-bg-neutral-4-disabled: oklch(100% 0 0 / 8%);
-
-    /* Status background colors */
     --bui-bg-danger: #300c0c;
     --bui-bg-warning: #302008;
     --bui-bg-success: #042713;
     --bui-bg-info: #132049;
-
-    /* Foreground colors */
-    --bui-fg-primary: var(--bui-white);
-    --bui-fg-secondary: oklch(100% 0 0 / 50%);
-    --bui-fg-disabled: oklch(100% 0 0 / 28%);
     --bui-fg-solid: #101821;
     --bui-fg-solid-disabled: #6191cc;
-
-    /* Foreground statuses */
     --bui-fg-danger-on-bg: #fca5a5;
     --bui-fg-warning-on-bg: #fdba74;
     --bui-fg-success-on-bg: #86efac;
     --bui-fg-info-on-bg: #a3cfff;
     --bui-fg-danger: #ff5a30;
-    --bui-fg-warning: #ffa057;
     --bui-fg-success: #1ed760;
     --bui-fg-info: #70b8ff;
-
-    /* Border colors */
-    --bui-border-1: #434343;
-    --bui-border-2: #585858;
     --bui-border-info: #7ea9d6;
     --bui-border-danger: #f87a7a;
     --bui-border-warning: #e36d05;
     --bui-border-success: #53db83;
-
-    /* Special colors */
-    --bui-ring: #1f5493;
-    --bui-scrollbar: #3636363a;
-    --bui-scrollbar-thumb: #575757;
-
-    /* Shadows */
     --bui-shadow: none;
   }
 }

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { CSSProperties, ReactNode, HTMLAttributes, ComponentPropsWithoutRef, ReactElement, ElementType, ComponentPropsWithRef, ComponentProps } from 'react';
-import { DisclosureProps, DisclosureGroupProps, DisclosurePanelProps, HeadingProps, ButtonProps as ButtonProps$1, DatePickerProps as DatePickerProps$1, DateRangePickerProps as DateRangePickerProps$1, ModalOverlayProps, DialogTriggerProps as DialogTriggerProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, LinkProps as LinkProps$1, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, SelectProps as SelectProps$1, ComboBoxProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SliderProps as SliderProps$1, CellProps as CellProps$1, ColumnProps as ColumnProps$1, RowProps as RowProps$1, TableProps as TableProps$1, TableBodyProps as TableBodyProps$1, TableHeaderProps as TableHeaderProps$1, TagProps as TagProps$1, TagListProps, TagGroupProps as TagGroupProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, PopoverProps as PopoverProps$1, MenuProps as MenuProps$1, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, SearchFieldProps as SearchFieldProps$1, GridListProps, GridListItemProps, SwitchProps as SwitchProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1 } from 'react-aria-components';
+import { DisclosureProps, DisclosureGroupProps, DisclosurePanelProps, HeadingProps, ButtonProps as ButtonProps$1, DatePickerProps as DatePickerProps$1, DateRangePickerProps as DateRangePickerProps$1, ModalOverlayProps, DialogTriggerProps as DialogTriggerProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, LinkProps as LinkProps$1, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, SelectProps as SelectProps$1, ComboBoxProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SliderProps as SliderProps$1, CellProps as CellProps$1, ColumnProps as ColumnProps$1, RowProps as RowProps$1, TableProps as TableProps$1, TableBodyProps as TableBodyProps$1, TableHeaderProps as TableHeaderProps$1, TagProps as TagProps$1, TagListProps, TagGroupProps as TagGroupProps$1, TextFieldProps as TextFieldProps$1, NumberFieldProps as NumberFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, PopoverProps as PopoverProps$1, MenuProps as MenuProps$1, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, SearchFieldProps as SearchFieldProps$1, GridListProps, GridListItemProps, SwitchProps as SwitchProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1 } from 'react-aria-components';
 import { DateValue } from '@internationalized/date';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { NavigateOptions } from 'react-router-dom';
@@ -3148,6 +3148,68 @@ declare const TextFieldDefinition: {
     };
 };
 
+/** @public */
+type NumberFieldOwnProps = {
+    /**
+     * The size of the number field
+     * @defaultValue 'small'
+     */
+    size?: 'small' | 'medium' | Partial<Record<Breakpoint, 'small' | 'medium'>>;
+    className?: string;
+    /**
+     * An icon to render before the input
+     */
+    icon?: ReactNode;
+    /**
+     * Text to display in the input when it has no value
+     */
+    placeholder?: string;
+    label?: FieldLabelProps['label'];
+    description?: FieldLabelProps['description'];
+    secondaryLabel?: FieldLabelProps['secondaryLabel'];
+};
+/** @public */
+interface NumberFieldProps extends Omit<NumberFieldProps$1, 'className' | 'description'>, NumberFieldOwnProps {
+}
+
+/**
+ * A numeric input with an integrated label, optional icon, and inline error display.
+ *
+ * @public
+ */
+declare const NumberField: react.ForwardRefExoticComponent<NumberFieldProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Component definition for NumberField
+ * @public
+ */
+declare const NumberFieldDefinition: {
+    readonly styles: {
+        readonly [key: string]: string;
+    };
+    readonly classNames: {
+        readonly root: "bui-NumberField";
+        readonly inputWrapper: "bui-InputWrapper";
+        readonly input: "bui-Input";
+        readonly inputIcon: "bui-InputIcon";
+        readonly stepperButtons: "bui-StepperButtons";
+        readonly stepperButton: "bui-StepperButton";
+    };
+    readonly bg: "consumer";
+    readonly propDefs: {
+        readonly size: {
+            readonly dataAttribute: true;
+            readonly default: "small";
+        };
+        readonly className: {};
+        readonly icon: {};
+        readonly placeholder: {};
+        readonly label: {};
+        readonly description: {};
+        readonly secondaryLabel: {};
+    };
+};
+
 /** @public */
 type PasswordFieldOwnProps = {
     /**
@@ -3947,6 +4009,7 @@ declare const SwitchDefinition: {
         readonly root: "bui-Switch";
         readonly indicator: "bui-SwitchIndicator";
     };
+    readonly bg: "consumer";
     readonly propDefs: {
         readonly label: {};
         readonly className: {};
@@ -4206,5 +4269,5 @@ declare function useAnalytics(): AnalyticsTracker;
  */
 declare function getNodeText(node: ReactNode | ((...args: any[]) => ReactNode)): string | undefined;
 
-export { Accordion, AccordionDefinition, AccordionGroup, AccordionGroupDefinition, AccordionPanel, AccordionPanelDefinition, AccordionTrigger, AccordionTriggerDefinition, Alert, AlertDefinition, Avatar, AvatarDefinition, BUIProvider, Badge, BadgeDefinition, BgProvider, Box, BoxDefinition, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, ButtonLink, ButtonLinkDefinition, Card, CardBody, CardBodyDefinition, CardDefinition, CardFooter, CardFooterDefinition, CardHeader, CardHeaderDefinition, Cell, CellProfile, CellText, Checkbox, CheckboxDefinition, CheckboxGroup, CheckboxGroupDefinition, Column, Combobox, ComboboxDefinition, ComboboxInputDefinition, ComboboxListBoxDefinition, ComboboxListBoxItemDefinition, ComboboxSectionDefinition, Container, ContainerDefinition, DatePicker, DatePickerCalendarDefinition, DatePickerDefinition, DatePickerGroupDefinition, DateRangePicker, DateRangePickerDefinition, Dialog, DialogBody, DialogBodyDefinition, DialogDefinition, DialogFooter, DialogFooterDefinition, DialogHeader, DialogHeaderDefinition, DialogTrigger, FieldLabel, FieldLabelDefinition, Flex, FlexDefinition, FullPage, FullPageDefinition, Grid, GridDefinition, GridItemDefinition, Header, HeaderDefinition, HeaderMetadataStatus, HeaderMetadataUsers, HeaderNavDefinition, HeaderNavGroupDefinition, HeaderNavItemDefinition, HeaderPage, HeaderPageDefinition, Link, LinkDefinition, List, ListDefinition, ListRow, ListRowDefinition, Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuDefinition, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, PasswordField, PasswordFieldDefinition, PluginHeader, PluginHeaderDefinition, Popover, PopoverDefinition, Radio, RadioDefinition, RadioGroup, RadioGroupDefinition, Row, SearchAutocomplete, SearchAutocompleteDefinition, SearchAutocompleteItem, SearchField, SearchFieldDefinition, Select, SelectDefinition, Skeleton, SkeletonDefinition, Slider, SliderDefinition, SubmenuTrigger, Switch, SwitchDefinition, Tab, TabList, TabPanel, Table, TableBody, TableBodySkeleton, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, TableRoot, Tabs, TabsDefinition, Tag, TagGroup, TagGroupDefinition, Text, TextDefinition, TextField, TextFieldDefinition, ToggleButton, ToggleButtonDefinition, ToggleButtonGroup, ToggleButtonGroupDefinition, Tooltip, TooltipDefinition, TooltipTrigger, VisuallyHidden, VisuallyHiddenDefinition, getNodeText, useAnalytics, useBgConsumer, useBgProvider, useBreakpoint, useTable };
-export type { AccordionGroupOwnProps, AccordionGroupProps, AccordionOwnProps, AccordionPanelOwnProps, AccordionPanelProps, AccordionProps, AccordionTriggerOwnProps, AccordionTriggerProps, AlertOwnProps, AlertProps, AlignItems, AnalyticsEventAttributes, AnalyticsTracker, AvatarOwnProps, AvatarProps, BUIProviderProps, BadgeOwnProps, BadgeProps, BgContextValue, BgProviderProps, Border, BorderRadius, BoxOwnProps, BoxProps, BoxUtilityProps, Breakpoint, ButtonIconOwnProps, ButtonIconProps, ButtonLinkOwnProps, ButtonLinkProps, ButtonOwnProps, ButtonProps, CardBaseProps, CardBodyOwnProps, CardBodyProps, CardButtonVariant, CardFooterOwnProps, CardFooterProps, CardHeaderOwnProps, CardHeaderProps, CardLinkVariant, CardOwnProps, CardProps, CardStaticVariant, CellOwnProps, CellProfileOwnProps, CellProfileProps, CellProps, CellTextOwnProps, CellTextProps, CheckboxGroupOwnProps, CheckboxGroupProps, CheckboxOwnProps, CheckboxProps, ColumnConfig, ColumnOwnProps, ColumnProps, Columns, ComboboxOwnProps, ComboboxProps, CompletePaginationOptions, ContainerBg, ContainerOwnProps, ContainerProps, CursorParams, CursorResponse, DatePickerOwnProps, DatePickerProps, DateRangePickerOwnProps, DateRangePickerProps, DialogBodyOwnProps, DialogBodyProps, DialogFooterOwnProps, DialogFooterProps, DialogHeaderOwnProps, DialogHeaderProps, DialogOwnProps, DialogProps, DialogTriggerProps, Display, FieldLabelOwnProps, FieldLabelProps, FilterState, FlexDirection, FlexItemProps, FlexOwnProps, FlexProps, FlexWrap, FullPageOwnProps, FullPageProps, GridItemOwnProps, GridItemProps, GridOwnProps, GridProps, HeaderBreadcrumb, HeaderMetadataItem, HeaderMetadataStatusProps, HeaderMetadataUser, HeaderNavTab, HeaderNavTabGroup, HeaderNavTabItem, HeaderOwnProps, HeaderPageBreadcrumb, HeaderPageOwnProps, HeaderPageProps, HeaderProps, HeaderTab, HeaderTag, JustifyContent, LinkOwnProps, LinkProps, ListOwnProps, ListProps, ListRowOwnProps, ListRowProps, MarginProps, MenuAutocompleteListBoxOwnProps, MenuAutocompleteListBoxProps, MenuAutocompleteOwnProps, MenuAutocompleteProps, MenuItemOwnProps, MenuItemProps, MenuListBoxItemOwnProps, MenuListBoxItemProps, MenuListBoxOwnProps, MenuListBoxProps, MenuOwnProps, MenuPopoverOwnProps, MenuProps, MenuSectionOwnProps, MenuSectionProps, MenuSeparatorOwnProps, MenuSeparatorProps, MenuTriggerProps, NoPagination, OffsetParams, OffsetResponse, Option, OptionSection, PaddingProps, PagePagination, PageSizeOption, PaginationOptions, PasswordFieldOwnProps, PasswordFieldProps, PluginHeaderOwnProps, PluginHeaderProps, PopoverOwnProps, PopoverProps, ProviderBg, QueryOptions, RadioGroupOwnProps, RadioGroupProps, RadioOwnProps, RadioProps, Responsive, RowConfig, RowOwnProps, RowProps, RowRenderFn, SearchAutocompleteItemOwnProps, SearchAutocompleteItemProps, SearchAutocompleteOwnProps, SearchAutocompleteProps, SearchFieldOwnProps, SearchFieldProps, SearchState, SelectOwnProps, SelectProps, SkeletonOwnProps, SkeletonProps, SliderOwnProps, SliderProps, SortDescriptor, SortState, Space, SpaceProps, SubmenuTriggerProps, SwitchOwnProps, SwitchProps, TabListOwnProps, TabListProps, TabMatchStrategy, TabOwnProps, TabPanelOwnProps, TabPanelProps, TabProps, TableBodyOwnProps, TableBodyProps, TableHeaderOwnProps, TableHeaderProps, TableItem, TablePaginationOwnProps, TablePaginationProps, TablePaginationType, TableProps, TableRootOwnProps, TableRootProps, TableSelection, TabsOwnProps, TabsProps, TagGroupOwnProps, TagGroupProps, TagOwnProps, TagProps, TextColorStatus, TextColors, TextFieldOwnProps, TextFieldProps, TextOwnProps, TextProps, TextVariants, TextWeights, ToggleButtonGroupOwnProps, ToggleButtonGroupProps, ToggleButtonOwnProps, ToggleButtonProps, TooltipOwnProps, TooltipProps, UseAnalyticsFn, UseTableCompleteOptions, UseTableCursorOptions, UseTableOffsetOptions, UseTableOptions, UseTableResult, UtilityProps, VirtualizedProp, VisuallyHiddenOwnProps, VisuallyHiddenProps };
+export { Accordion, AccordionDefinition, AccordionGroup, AccordionGroupDefinition, AccordionPanel, AccordionPanelDefinition, AccordionTrigger, AccordionTriggerDefinition, Alert, AlertDefinition, Avatar, AvatarDefinition, BUIProvider, Badge, BadgeDefinition, BgProvider, Box, BoxDefinition, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, ButtonLink, ButtonLinkDefinition, Card, CardBody, CardBodyDefinition, CardDefinition, CardFooter, CardFooterDefinition, CardHeader, CardHeaderDefinition, Cell, CellProfile, CellText, Checkbox, CheckboxDefinition, CheckboxGroup, CheckboxGroupDefinition, Column, Combobox, ComboboxDefinition, ComboboxInputDefinition, ComboboxListBoxDefinition, ComboboxListBoxItemDefinition, ComboboxSectionDefinition, Container, ContainerDefinition, DatePicker, DatePickerCalendarDefinition, DatePickerDefinition, DatePickerGroupDefinition, DateRangePicker, DateRangePickerDefinition, Dialog, DialogBody, DialogBodyDefinition, DialogDefinition, DialogFooter, DialogFooterDefinition, DialogHeader, DialogHeaderDefinition, DialogTrigger, FieldLabel, FieldLabelDefinition, Flex, FlexDefinition, FullPage, FullPageDefinition, Grid, GridDefinition, GridItemDefinition, Header, HeaderDefinition, HeaderMetadataStatus, HeaderMetadataUsers, HeaderNavDefinition, HeaderNavGroupDefinition, HeaderNavItemDefinition, HeaderPage, HeaderPageDefinition, Link, LinkDefinition, List, ListDefinition, ListRow, ListRowDefinition, Menu, MenuAutocomplete, MenuAutocompleteListbox, MenuDefinition, MenuItem, MenuListBox, MenuListBoxItem, MenuSection, MenuSeparator, MenuTrigger, NumberField, NumberFieldDefinition, PasswordField, PasswordFieldDefinition, PluginHeader, PluginHeaderDefinition, Popover, PopoverDefinition, Radio, RadioDefinition, RadioGroup, RadioGroupDefinition, Row, SearchAutocomplete, SearchAutocompleteDefinition, SearchAutocompleteItem, SearchField, SearchFieldDefinition, Select, SelectDefinition, Skeleton, SkeletonDefinition, Slider, SliderDefinition, SubmenuTrigger, Switch, SwitchDefinition, Tab, TabList, TabPanel, Table, TableBody, TableBodySkeleton, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, TableRoot, Tabs, TabsDefinition, Tag, TagGroup, TagGroupDefinition, Text, TextDefinition, TextField, TextFieldDefinition, ToggleButton, ToggleButtonDefinition, ToggleButtonGroup, ToggleButtonGroupDefinition, Tooltip, TooltipDefinition, TooltipTrigger, VisuallyHidden, VisuallyHiddenDefinition, getNodeText, useAnalytics, useBgConsumer, useBgProvider, useBreakpoint, useTable };
+export type { AccordionGroupOwnProps, AccordionGroupProps, AccordionOwnProps, AccordionPanelOwnProps, AccordionPanelProps, AccordionProps, AccordionTriggerOwnProps, AccordionTriggerProps, AlertOwnProps, AlertProps, AlignItems, AnalyticsEventAttributes, AnalyticsTracker, AvatarOwnProps, AvatarProps, BUIProviderProps, BadgeOwnProps, BadgeProps, BgContextValue, BgProviderProps, Border, BorderRadius, BoxOwnProps, BoxProps, BoxUtilityProps, Breakpoint, ButtonIconOwnProps, ButtonIconProps, ButtonLinkOwnProps, ButtonLinkProps, ButtonOwnProps, ButtonProps, CardBaseProps, CardBodyOwnProps, CardBodyProps, CardButtonVariant, CardFooterOwnProps, CardFooterProps, CardHeaderOwnProps, CardHeaderProps, CardLinkVariant, CardOwnProps, CardProps, CardStaticVariant, CellOwnProps, CellProfileOwnProps, CellProfileProps, CellProps, CellTextOwnProps, CellTextProps, CheckboxGroupOwnProps, CheckboxGroupProps, CheckboxOwnProps, CheckboxProps, ColumnConfig, ColumnOwnProps, ColumnProps, Columns, ComboboxOwnProps, ComboboxProps, CompletePaginationOptions, ContainerBg, ContainerOwnProps, ContainerProps, CursorParams, CursorResponse, DatePickerOwnProps, DatePickerProps, DateRangePickerOwnProps, DateRangePickerProps, DialogBodyOwnProps, DialogBodyProps, DialogFooterOwnProps, DialogFooterProps, DialogHeaderOwnProps, DialogHeaderProps, DialogOwnProps, DialogProps, DialogTriggerProps, Display, FieldLabelOwnProps, FieldLabelProps, FilterState, FlexDirection, FlexItemProps, FlexOwnProps, FlexProps, FlexWrap, FullPageOwnProps, FullPageProps, GridItemOwnProps, GridItemProps, GridOwnProps, GridProps, HeaderBreadcrumb, HeaderMetadataItem, HeaderMetadataStatusProps, HeaderMetadataUser, HeaderNavTab, HeaderNavTabGroup, HeaderNavTabItem, HeaderOwnProps, HeaderPageBreadcrumb, HeaderPageOwnProps, HeaderPageProps, HeaderProps, HeaderTab, HeaderTag, JustifyContent, LinkOwnProps, LinkProps, ListOwnProps, ListProps, ListRowOwnProps, ListRowProps, MarginProps, MenuAutocompleteListBoxOwnProps, MenuAutocompleteListBoxProps, MenuAutocompleteOwnProps, MenuAutocompleteProps, MenuItemOwnProps, MenuItemProps, MenuListBoxItemOwnProps, MenuListBoxItemProps, MenuListBoxOwnProps, MenuListBoxProps, MenuOwnProps, MenuPopoverOwnProps, MenuProps, MenuSectionOwnProps, MenuSectionProps, MenuSeparatorOwnProps, MenuSeparatorProps, MenuTriggerProps, NoPagination, NumberFieldOwnProps, NumberFieldProps, OffsetParams, OffsetResponse, Option, OptionSection, PaddingProps, PagePagination, PageSizeOption, PaginationOptions, PasswordFieldOwnProps, PasswordFieldProps, PluginHeaderOwnProps, PluginHeaderProps, PopoverOwnProps, PopoverProps, ProviderBg, QueryOptions, RadioGroupOwnProps, RadioGroupProps, RadioOwnProps, RadioProps, Responsive, RowConfig, RowOwnProps, RowProps, RowRenderFn, SearchAutocompleteItemOwnProps, SearchAutocompleteItemProps, SearchAutocompleteOwnProps, SearchAutocompleteProps, SearchFieldOwnProps, SearchFieldProps, SearchState, SelectOwnProps, SelectProps, SkeletonOwnProps, SkeletonProps, SliderOwnProps, SliderProps, SortDescriptor, SortState, Space, SpaceProps, SubmenuTriggerProps, SwitchOwnProps, SwitchProps, TabListOwnProps, TabListProps, TabMatchStrategy, TabOwnProps, TabPanelOwnProps, TabPanelProps, TabProps, TableBodyOwnProps, TableBodyProps, TableHeaderOwnProps, TableHeaderProps, TableItem, TablePaginationOwnProps, TablePaginationProps, TablePaginationType, TableProps, TableRootOwnProps, TableRootProps, TableSelection, TabsOwnProps, TabsProps, TagGroupOwnProps, TagGroupProps, TagOwnProps, TagProps, TextColorStatus, TextColors, TextFieldOwnProps, TextFieldProps, TextOwnProps, TextProps, TextVariants, TextWeights, ToggleButtonGroupOwnProps, ToggleButtonGroupProps, ToggleButtonOwnProps, ToggleButtonProps, TooltipOwnProps, TooltipProps, UseAnalyticsFn, UseTableCompleteOptions, UseTableCursorOptions, UseTableOffsetOptions, UseTableOptions, UseTableResult, UtilityProps, VirtualizedProp, VisuallyHiddenOwnProps, VisuallyHiddenProps };

package/dist/index.esm.js

@@ -71,6 +71,8 @@ export { Text } from './components/Text/Text.esm.js';
 export { TextDefinition } from './components/Text/definition.esm.js';
 export { TextField } from './components/TextField/TextField.esm.js';
 export { TextFieldDefinition } from './components/TextField/definition.esm.js';
+export { NumberField } from './components/NumberField/NumberField.esm.js';
+export { NumberFieldDefinition } from './components/NumberField/definition.esm.js';
 export { PasswordField } from './components/PasswordField/PasswordField.esm.js';
 export { PasswordFieldDefinition } from './components/PasswordField/definition.esm.js';
 export { Tooltip, TooltipTrigger } from './components/Tooltip/Tooltip.esm.js';

package/dist/index.esm.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/ui",
-  "version": "0.15.0",
+  "version": "0.15.1-next.0",
   "backstage": {
     "role": "web-library"
   },
@@ -50,7 +50,7 @@
     "test": "backstage-cli package test"
   },
   "dependencies": {
-    "@backstage/version-bridge": "^1.0.12",
+    "@backstage/version-bridge": "1.0.12",
     "@braintree/sanitize-url": "^7.1.2",
     "@internationalized/date": "^3.12.0",
     "@remixicon/react": ">=4.6.0 <4.9.0",
@@ -63,8 +63,8 @@
     "use-sync-external-store": "^1.4.0"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.36.2",
-    "@backstage/core-components": "^0.18.10",
+    "@backstage/cli": "0.36.3-next.1",
+    "@backstage/core-components": "0.18.11-next.1",
     "@storybook/react-vite": "^10.4.0",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^16.0.0",