@bcgov/design-system-react-components 0.8.0 → 0.8.1-pr759

package/README.md

@@ -1,14 +1,17 @@
 # @bcgov/design-system-react-components
 
-This package contains a library of React components built using [React Aria](https://react-aria.adobe.com) to implement the [B.C. Design System](https://gov.bc.ca/designsystem).
+This package contains a library of React components, built using React Aria, as part of the B.C. Design System.
 
-Questions? Please email the <a href="mailto:DesignSystem@gov.bc.ca">GDX OSS Design Team</a>.
+To use these components, install this package and import the components you need into your application.
 
-Storybook: https://designsystem.gov.bc.ca/react-components/
+- GitHub: https://github.com/bcgov/design-system/
+- Storybook: https://designsystem.gov.bc.ca/react-components/
+- Documentation: https://gov.bc.ca/designsystem/
 
-GitHub Repository: https://github.com/bcgov/design-system
+If you have questions, you can:
 
-To use, install this package and import the components into your application.
+- <a href="mailto:DesignSystem@gov.bc.ca">Email designsystem@gov.bc.ca</a>
+- <a href="https://github.com/bcgov/design-system/issues">Open an issue on GitHub</a>
 
 ## Install
 
@@ -66,6 +69,8 @@ export default function App() {
 
 ## Component list
 
+Most components are based on <a href="https://react-aria.adobe.com">React Aria</a> primitives.
+
 | Component                                                                   | React Aria docs link                           |
 | --------------------------------------------------------------------------- | ---------------------------------------------- |
 | AlertBanner                                                                 | N/A                                            |
@@ -198,14 +203,14 @@ Prettier is used for formatting. See configuration file `prettier.config.js` and
 
 #### npm package
 
-Publishing new versions of the package to npm is done via GitHub Actions.
+Publishing new versions of the package is done via GitHub Actions.
 
 GitHub Actions are located in `/.github/workflows` in the project root. Actions are included to:
 
 - Build the Storybook and Vite applications on merge to `main`
 - Test (Vitest and Playwright) on pull request
-- Publish new versions of the library on npm (`next` tag) on merge to `main`
-- Publish new versions of the library on npm (`latest` tag) when a GitHub release is published
+- Publish new versions of the library to npm (`next` tag) and GitHub Packages on merge to `main`
+- Publish new production versions of the library to npm (`latest` tag) and GitHub Packages when a GitHub release is published
 
 #### GitHub release
 

package/dist/cjs/index.cjs

@@ -32075,7 +32075,7 @@ function ProgressCircle({ size = "medium", valueLabel, ...props }) {
     return (jsxRuntime.jsx($6c0095e7e99364f2$export$c17561cb55d4db30, { className: "bcds-react-aria-ProgressCircle", ...props, children: ({ percentage, valueText, isIndeterminate }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("svg", { className: `bcds-react-aria-ProgressCircle--Container ${size}`, children: [jsxRuntime.jsx("circle", { className: "bcds-react-aria-ProgressCircle--Track" }), jsxRuntime.jsx("circle", { className: "bcds-react-aria-ProgressCircle--Fill", pathLength: "100", strokeDashoffset: 100 - (isIndeterminate || percentage == null ? 25 : percentage) })] }), valueLabel && (jsxRuntime.jsxs("div", { className: "bcds-react-aria-ProgressCircle--Label", children: [jsxRuntime.jsx($43a3b93638fe5db9$export$b04be29aa201d4f5, { children: valueLabel }), !isIndeterminate && (jsxRuntime.jsx("span", { className: "bcds-react-aria-ProgressCircle--Value", children: valueText }))] }))] })) }));
 }
 
-var css_248z$e = ".bcds-react-aria-Radio {\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  forced-color-adjust: none;\n}\n\n/* Selector */\n.bcds-react-aria-Radio:before {\n  align-self: first baseline;\n  margin-top: var(--layout-margin-xsmall);\n  content: \"\";\n  display: block;\n  width: var(--icons-size-xsmall);\n  height: var(--icons-size-xsmall);\n  box-sizing: border-box;\n  background-color: var(--surface-color-secondary-default);\n  border-radius: var(--icons-size-small);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-medium);\n  transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n  .bcds-react-aria-Radio:before {\n    /* No animation on radio button circle if user has reduced motion set */\n    transition: none;\n  }\n}\n\n/* Hover */\n.bcds-react-aria-Radio[data-hovered]:before {\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-dark);\n}\n\n/* Pressed */\n.bcds-react-aria-Radio[data-pressed]:before {\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-dark);\n}\n\n/* Selected */\n.bcds-react-aria-Radio[data-selected]:before {\n  border: 5px solid var(--surface-color-primary-default);\n}\n\n/* Focused */\n.bcds-react-aria-Radio[data-focus-visible]:before {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Invalid */\n.bcds-react-aria-Radio[data-invalid]:before {\n  border: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n}\n.bcds-react-aria-Radio[data-selected][data-invalid] {\n  color: var(--typography-color-danger);\n}\n.bcds-react-aria-Radio[data-selected][data-invalid]:before {\n  border: 5px solid var(--support-border-color-danger);\n}\n\n/* Disabled */\n.bcds-react-aria-Radio[data-disabled] {\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n.bcds-react-aria-radio[data-selected][data-disabled]:before {\n  border: 5px solid var(--surface-color-border-default);\n}\n\n/* Read only */\n.bcds-react-aria-Radio[data-readonly] {\n  cursor: not-allowed;\n}\n";
+var css_248z$e = ".bcds-react-aria-Radio {\n  cursor: pointer;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  forced-color-adjust: none;\n}\n\n/* Selector */\n.bcds-react-aria-Radio:before {\n  align-self: first baseline;\n  margin-top: var(--layout-margin-xsmall);\n  content: \"\";\n  display: block;\n  width: var(--icons-size-xsmall);\n  height: var(--icons-size-xsmall);\n  box-sizing: border-box;\n  background-color: var(--surface-color-secondary-default);\n  border-radius: var(--icons-size-small);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-medium);\n  transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n  .bcds-react-aria-Radio:before {\n    /* No animation on radio button circle if user has reduced motion set */\n    transition: none;\n  }\n}\n\n/* Hover */\n.bcds-react-aria-Radio[data-hovered]:before {\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-dark);\n}\n\n/* Pressed */\n.bcds-react-aria-Radio[data-pressed]:before {\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-dark);\n}\n\n/* Selected */\n.bcds-react-aria-Radio[data-selected]:before {\n  border: 5px solid var(--surface-color-primary-default);\n}\n\n/* Focused */\n.bcds-react-aria-Radio[data-focus-visible]:before {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Invalid */\n.bcds-react-aria-Radio[data-invalid]:before {\n  border: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n}\n.bcds-react-aria-Radio[data-selected][data-invalid] {\n  color: var(--typography-color-danger);\n}\n.bcds-react-aria-Radio[data-selected][data-invalid]:before {\n  border: 5px solid var(--support-border-color-danger);\n}\n\n/* Disabled */\n.bcds-react-aria-Radio[data-disabled] {\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n.bcds-react-aria-Radio[data-selected][data-disabled]:before {\n  border: 5px solid var(--surface-color-border-default);\n}\n\n/* Read only */\n.bcds-react-aria-Radio[data-readonly] {\n  cursor: not-allowed;\n}\n";
 styleInject(css_248z$e);
 
 function Radio({ value, children, ...props }) {
@@ -32230,8 +32230,8 @@ function TextField({ size, label, description, errorMessage, iconLeft, iconRight
 var css_248z$5 = ".bcds-react-aria-TimeField {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  align-self: flex-start;\n  width: 100%;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n\n/* Input field */\n.bcds-react-aria-TimeField--InputContainer {\n  display: inline-flex;\n  flex-direction: row;\n  min-width: 0;\n  align-items: center;\n  box-sizing: border-box;\n  gap: var(--layout-margin-small);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n  background: var(--surface-color-forms-default);\n}\n.bcds-react-aria-TimeField--Input {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  gap: var(--layout-margin-hair);\n  width: 100%;\n  white-space: nowrap;\n  border: none;\n  color: var(--typography-color-primary);\n}\n.bcds-react-aria-TimeField--Segment {\n  padding: var(--layout-padding-none) var(--layout-padding-hair);\n}\n.bcds-react-aria-TimeField--Segment[data-type=\"literal\"] {\n  padding: var(--layout-padding-none);\n}\n.bcds-react-aria-TimeField--Segment[data-type=\"timeZoneName\"] {\n  color: var(--typography-color-secondary);\n}\n.bcds-react-aria-TimeField--Input[data-placeholder] {\n  color: var(--typography-color-placeholder);\n}\n\n/* Label */\n.bcds-react-aria-TimeField--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Required indicator */\n.bcds-react-aria-TimeField--Label.required {\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n\n/* Description */\n.bcds-react-aria-TimeField--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Error message */\n.bcds-react-aria-TimeField--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n\n/* Sizing */\n.bcds-react-aria-TimeField.small .bcds-react-aria-TimeField--InputContainer {\n  padding: var(--layout-padding-hair) var(--layout-padding-small);\n  height: 32px;\n}\n.bcds-react-aria-TimeField.small .bcds-react-aria-TimeField--Segment {\n  font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-TimeField.medium .bcds-react-aria-TimeField--InputContainer {\n  padding: var(--layout-padding-small) 0.75rem;\n  height: 40px;\n}\n.bcds-react-aria-TimeField.medium .bcds-react-aria-TimeField--Segment {\n  font: var(--typography-regular-body);\n}\n\n/* Hover and focus states */\n.bcds-react-aria-TimeField--InputContainer:has(\n  .bcds-react-aria-TimeField--Input[data-hovered]\n) {\n  border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-TimeField--InputContainer:has(\n  .bcds-react-aria-TimeField--Segment[data-focus-visible]\n) {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n.bcds-react-aria-TimeField--Segment[data-focused] {\n  outline: none;\n  border-radius: var(--layout-border-radius-small);\n  background-color: var(--surface-color-primary-default);\n  color: var(--typography-color-primary-invert);\n  padding: var(--layout-padding-hair);\n}\n.bcds-react-aria-TimeField--Segment[data-focused][data-type=\"timeZoneName\"] {\n  background-color: var(--surface-color-forms-disabled);\n  color: var(--typography-color-secondary);\n}\n\n/* Disabled and read-only states */\n.bcds-react-aria-TimeField[data-disabled]\n  > .bcds-react-aria-TimeField--InputContainer,\n.bcds-react-aria-TimeField[data-disabled] .bcds-react-aria-TimeField--Input,\n.bcds-react-aria-TimeField[data-disabled]\n  .bcds-react-aria-TimeField--Segment[data-type=\"timeZoneName\"] {\n  background: var(--surface-color-forms-disabled);\n  color: var(--typography-color-placeholder);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-TimeField[data-readonly]\n  > .bcds-react-aria-TimeField--InputContainer,\n.bcds-react-aria-TimeField[data-readonly] .bcds-react-aria-TimeField--Input {\n  background: var(--surface-color-forms-disabled);\n}\n\n/* Invalid state */\n.bcds-react-aria-TimeField[data-invalid]\n  > .bcds-react-aria-TimeField--InputContainer {\n  border-radius: var(--layout-border-radius-medium);\n  border: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n  background: var(--surface-color-forms-default);\n}\n.bcds-react-aria-TimeField[data-invalid]\n  > .bcds-react-aria-TimeField--InputContainer\n  > .bcds-react-aria-TimeField--ErrorIcon\n  > svg {\n  color: var(--icons-color-danger);\n  min-width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n";
 styleInject(css_248z$5);
 
-function TimeField({ size = "medium", label, description, errorMessage, isRequired, ...props }) {
-    return (jsxRuntime.jsx($5400c097f4765e59$export$5eaee2322dd727eb, { className: `bcds-react-aria-TimeField ${size}`, ...props, children: ({ isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-TimeField--Label", children: [label, isRequired && (jsxRuntime.jsx("span", { className: "bcds-react-aria-TimeField--Label required", children: "(required)" }))] })), jsxRuntime.jsxs("div", { className: "bcds-react-aria-TimeField--InputContainer", children: [jsxRuntime.jsx($5400c097f4765e59$export$7edc06cf1783b30f, { className: "bcds-react-aria-TimeField--Input", children: (segment) => (jsxRuntime.jsx($5400c097f4765e59$export$336ab7fa954c4b5f, { className: "bcds-react-aria-TimeField--Segment", segment: segment })) }), isInvalid && (jsxRuntime.jsx("span", { className: "bcds-react-aria-TimeField--ErrorIcon", children: jsxRuntime.jsx(SvgExclamationIcon, {}) }))] }), description && (jsxRuntime.jsx(Text, { slot: "description", className: "bcds-react-aria-TimeField--Description", children: description })), jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { className: "bcds-react-aria-TimeField--Error", children: errorMessage })] })) }));
+function TimeField({ size = "medium", label, description, errorMessage, ...props }) {
+    return (jsxRuntime.jsx($5400c097f4765e59$export$5eaee2322dd727eb, { className: `bcds-react-aria-TimeField ${size}`, ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-TimeField--Label", children: [label, isRequired && (jsxRuntime.jsx("span", { className: "bcds-react-aria-TimeField--Label required", children: "(required)" }))] })), jsxRuntime.jsxs("div", { className: "bcds-react-aria-TimeField--InputContainer", children: [jsxRuntime.jsx($5400c097f4765e59$export$7edc06cf1783b30f, { className: "bcds-react-aria-TimeField--Input", children: (segment) => (jsxRuntime.jsx($5400c097f4765e59$export$336ab7fa954c4b5f, { className: "bcds-react-aria-TimeField--Segment", segment: segment })) }), isInvalid && (jsxRuntime.jsx("span", { className: "bcds-react-aria-TimeField--ErrorIcon", children: jsxRuntime.jsx(SvgExclamationIcon, {}) }))] }), description && (jsxRuntime.jsx(Text, { slot: "description", className: "bcds-react-aria-TimeField--Description", children: description })), jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { className: "bcds-react-aria-TimeField--Error", children: errorMessage })] })) }));
 }
 
 var css_248z$4 = ".bcds-react-aria-ToggleButton {\n  display: inline-flex;\n  flex: 0 1 auto;\n  flex-direction: row;\n  flex-wrap: wrap;\n  white-space: normal;\n  box-sizing: border-box;\n  gap: var(--layout-margin-xsmall);\n  align-items: center;\n  justify-content: center;\n  padding: var(--layout-padding-hair) var(--layout-padding-small);\n  color: var(--typography-color-secondary);\n  background-color: var(--surface-color-secondary-button-disabled);\n  border: var(--layout-border-width-small) solid transparent;\n  border-radius: var(--layout-border-radius-medium);\n  cursor: pointer;\n}\n\n/* Size */\n.bcds-react-aria-ToggleButtonGroup.small > .bcds-react-aria-ToggleButton,\n.bcds-react-aria-ToggleButton.small {\n  font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-ToggleButtonGroup.medium > .bcds-react-aria-ToggleButton,\n.bcds-react-aria-ToggleButton.medium {\n  font: var(--typography-regular-body);\n}\n\n/* Icon button */\n.bcds-react-aria-ToggleButton.icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: 0 0 auto;\n}\n\n.bcds-react-aria-ToggleButton.icon > * {\n  line-height: 0;\n}\n\n.bcds-react-aria-ToggleButton.small.icon {\n  padding: unset;\n  height: var(--icons-size-large);\n  width: var(--icons-size-large);\n  min-width: var(--icons-size-large);\n}\n\n.bcds-react-aria-ToggleButton.medium.icon {\n  padding: unset;\n  height: var(--icons-size-xlarge);\n  width: var(--icons-size-xlarge);\n  min-width: var(--icons-size-xlarge);\n}\n\n/* Active */\n.bcds-react-aria-ToggleButton[data-selected] {\n  background-color: var(--surface-color-secondary-button-default);\n  color: var(--typography-color-primary);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-secondary-button-default);\n  box-shadow: var(--surface-shadow-small);\n  /* Animate transition on select or deselect */\n  transition: 200ms ease;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n}\n\n/* Hover */\n.bcds-react-aria-ToggleButton[data-hovered] {\n  background-color: var(--surface-color-secondary-pressed);\n  color: var(--typography-color-primary);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-medium);\n  border-radius: var(--layout-border-radius-medium);\n}\n/* Focused */\n.bcds-react-aria-ToggleButton[data-focus-visible] {\n  background-color: var(--theme-blue-10);\n  outline: var(--layout-border-width-medium) solid\n    var(--surface-color-border-active);\n}\n\n/* Pressed */\n.bcds-react-aria-ToggleButton[data-hovered][data-pressed] {\n  background-color: var(--theme-gray-20);\n  border: var(--layout-border-width-small) solid var(--theme-gray-20);\n}\n\n/* Disabled */\n.bcds-react-aria-ToggleButton[data-disabled] {\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n  /* Animate transition on disable or enable */\n  transition: 200ms ease;\n\n  @media (prefers-reduced-motion: reduce) {\n    transition: none;\n  }\n}\n";
@@ -32265,8 +32265,8 @@ function Tooltip(props) {
 var css_248z = ".bcds-react-aria-NumberField {\n  display: flex;\n  flex-direction: column;\n  gap: var(--layout-margin-hair);\n  background-color: var(--surface-color-forms-default);\n  /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n  align-self: stretch;\n  max-width: -moz-available;\n  max-width: -webkit-fill-available;\n}\n/* Input and controls */\n.bcds-react-aria-NumberField--Group {\n  display: inline-flex;\n  flex-direction: row;\n  align-items: center;\n  box-sizing: border-box;\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-medium);\n}\n/* Decrement button */\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:first-child {\n  border-right: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-none);\n}\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:first-child\n  > .bcds-react-aria-Button {\n  border-top-right-radius: var(--layout-border-radius-none);\n  border-bottom-right-radius: var(--layout-border-radius-none);\n}\n/* Increment button */\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:last-child {\n  border-left: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-radius: var(--layout-border-radius-none);\n}\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button:last-child\n  > .bcds-react-aria-Button {\n  border-top-left-radius: var(--layout-border-radius-none);\n  border-bottom-left-radius: var(--layout-border-radius-none);\n}\n/* Button icons */\n.bcds-react-aria-NumberField--Group > button > svg {\n  color: var(--icons-color-primary);\n}\n/* Input container */\n.bcds-react-aria-NumberField--InputContainer {\n  display: flex;\n  flex-direction: row;\n  flex: 1 1 0;\n  min-width: 0;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  padding: var(--layout-padding-small) 0.75rem;\n}\n/* Input field */\n.bcds-react-aria-NumberField--Input {\n  box-sizing: border-box;\n  border: none;\n  width: 100%;\n}\n\n/* Sizing */\n.bcds-react-aria-NumberField.medium > .bcds-react-aria-NumberField--Group {\n  height: 40px;\n}\n.bcds-react-aria-NumberField.medium .bcds-react-aria-NumberField--Input {\n  font: var(--typography-regular-body);\n}\n.bcds-react-aria-NumberField.small > .bcds-react-aria-NumberField--Group {\n  height: 32px;\n}\n.bcds-react-aria-NumberField.small .bcds-react-aria-NumberField--Input {\n  font: var(--typography-regular-small-body);\n}\n\n/* Label above the input field */\n.bcds-react-aria-NumberField--Label {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* \"Required\" label */\n.bcds-react-aria-NumberField--Label.required {\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-small) var(--layout-padding-xsmall);\n}\n\n/* Description below the input field */\n.bcds-react-aria-NumberField--Description {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Hover state */\n.bcds-react-aria-NumberField--Group[data-hovered],\n.bcds-react-aria-NumberField--Group[data-hovered][data-disabled],\n.bcds-react-aria-NumberField--Group[data-hovered]\n  > .bcds-react-aria-NumberField--Button {\n  border-color: var(--surface-color-border-dark);\n}\n\n/* Focus state */\n.bcds-react-aria-NumberField--Group[data-focus-within],\n.bcds-react-aria-NumberField--Group[data-focus-within]\n  > .bcds-react-aria-NumberField--Button,\n.bcds-react-aria-NumberField--Group[data-hovered][data-focus-within]\n  > .bcds-react-aria-NumberField--Button {\n  border-color: var(--surface-color-border-active);\n}\n.bcds-react-aria-NumberField--Group[data-focus-within]\n  .bcds-react-aria-NumberField--Input,\n.bcds-react-aria-NumberField--Group[data-focus-visible]\n  .bcds-react-aria-NumberField--Input {\n  outline: none;\n}\n.bcds-react-aria-NumberField--Group[data-focus-visible] {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Error state */\n.bcds-react-aria-NumberField--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n.bcds-react-aria-NumberField[data-invalid]\n  .bcds-react-aria-NumberField--InputContainer\n  > svg {\n  color: var(--icons-color-danger);\n}\n.bcds-react-aria-NumberField[data-invalid]\n  > .bcds-react-aria-NumberField--Group {\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-NumberField[data-invalid]\n  > .bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button {\n  border-color: var(--support-border-color-danger);\n}\n\n/* Disabled and read-only states */\n.bcds-react-aria-NumberField[data-disabled]\n  > .bcds-react-aria-NumberField--Group,\n.bcds-react-aria-NumberField[data-disabled]\n  .bcds-react-aria-NumberField--Input {\n  background-color: var(--surface-color-forms-disabled);\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  background-color: var(--surface-color-forms-disabled);\n}\n/* BCDS Button style tweaks */\n/* Hover/focus states */\n.bcds-react-aria-NumberField--Group[data-hovered]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-hovered]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-dark);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-dark);\n}\n.bcds-react-aria-NumberField--Group[data-hovered][data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n}\n/* Disabled/read-only states */\n.bcds-react-aria-NumberField--Group[data-disabled],\n.bcds-react-aria-NumberField--Group\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n/* Error state */\n.bcds-react-aria-NumberField--Group[data-invalid]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-invalid][data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button,\n.bcds-react-aria-NumberField--Group[data-invalid][data-hovered]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled],\n.bcds-react-aria-NumberField--Group[data-invalid][data-focus-within]\n  > .bcds-react-aria-NumberField--Button\n  > .bcds-react-aria-Button[data-disabled] {\n  border-top: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--support-border-color-danger);\n}\n";
 styleInject(css_248z);
 
-function NumberField({ size = "medium", label, description, errorMessage, ...props }) {
-    return (jsxRuntime.jsx($10076bcc592bc574$export$63c5fa0b2fdccd2e, { className: `bcds-react-aria-NumberField ${size}`, minValue: 0, ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-NumberField--Label", children: [label, isRequired && (jsxRuntime.jsx("span", { className: "bcds-react-aria-NumberField--Label required", children: "(required)" }))] })), jsxRuntime.jsxs($3a442827418ebe87$export$eb2fcfdbd7ba97d4, { className: "bcds-react-aria-NumberField--Group", children: [jsxRuntime.jsx("div", { className: "bcds-react-aria-NumberField--Button", children: size == "small" ? (jsxRuntime.jsx(Button, { size: "small", slot: "decrement", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgDashIcon, {}) })) : (jsxRuntime.jsx(Button, { slot: "decrement", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgDashIcon, {}) })) }), jsxRuntime.jsxs("div", { className: "bcds-react-aria-NumberField--InputContainer", children: [jsxRuntime.jsx($41fb335299a4a39e$export$f5b8910cec6cf069, { className: "bcds-react-aria-NumberField--Input" }), isInvalid && jsxRuntime.jsx(SvgExclamationIcon, {})] }), jsxRuntime.jsx("div", { className: "bcds-react-aria-NumberField--Button", children: size == "small" ? (jsxRuntime.jsx(Button, { size: "small", slot: "increment", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgPlusIcon, {}) })) : (jsxRuntime.jsx(Button, { slot: "increment", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgPlusIcon, {}) })) })] }), description && (jsxRuntime.jsx(Text, { className: "bcds-react-aria-NumberField--Description", slot: "description", children: description })), isInvalid && (jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { className: "bcds-react-aria-NumberField--Error", children: errorMessage }))] })) }));
+function NumberField({ size = "medium", label, description, minValue = 0, errorMessage, ...props }) {
+    return (jsxRuntime.jsx($10076bcc592bc574$export$63c5fa0b2fdccd2e, { className: `bcds-react-aria-NumberField ${size}`, minValue: minValue, ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-NumberField--Label", children: [label, isRequired && (jsxRuntime.jsx("span", { className: "bcds-react-aria-NumberField--Label required", children: "(required)" }))] })), jsxRuntime.jsxs($3a442827418ebe87$export$eb2fcfdbd7ba97d4, { className: "bcds-react-aria-NumberField--Group", children: [jsxRuntime.jsx("div", { className: "bcds-react-aria-NumberField--Button", children: size == "small" ? (jsxRuntime.jsx(Button, { size: "small", slot: "decrement", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgDashIcon, {}) })) : (jsxRuntime.jsx(Button, { slot: "decrement", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgDashIcon, {}) })) }), jsxRuntime.jsxs("div", { className: "bcds-react-aria-NumberField--InputContainer", children: [jsxRuntime.jsx($41fb335299a4a39e$export$f5b8910cec6cf069, { className: "bcds-react-aria-NumberField--Input" }), isInvalid && jsxRuntime.jsx(SvgExclamationIcon, {})] }), jsxRuntime.jsx("div", { className: "bcds-react-aria-NumberField--Button", children: size == "small" ? (jsxRuntime.jsx(Button, { size: "small", slot: "increment", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgPlusIcon, {}) })) : (jsxRuntime.jsx(Button, { slot: "increment", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgPlusIcon, {}) })) })] }), description && (jsxRuntime.jsx(Text, { className: "bcds-react-aria-NumberField--Description", slot: "description", children: description })), isInvalid && (jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { className: "bcds-react-aria-NumberField--Error", children: errorMessage }))] })) }));
 }
 
 exports.Accordion = Accordion;