@bcgov/design-system-react-components 0.8.0-pr784 → 0.8.0-pr785

package/dist/cjs/index.cjs

@@ -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;