@bcgov/design-system-react-components 0.8.1-pr923 → 0.8.1-pr925

package/dist/cjs/index.cjs

@@ -32157,7 +32157,7 @@ function Text({ elementType = "span", size = "medium", color = "primary", isUnst
     return (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { elementType: elementType, className: isUnstyled ? undefined : `bcds-react-aria-Text ${size} ${color}`, ...props, children: props.children }));
 }
 
-var css_248z$7 = ".bcds-react-aria-TextArea {\n  display: inline-flex;\n  flex-direction: column;\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\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextArea--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/* Styles for the description and character count slot below the input field */\n.bcds-react-aria-TextArea--Description {\n  display: grid;\n  gap: var(--layout-margin-medium);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n}\n\n/* Description label */\n.bcds-react-aria-TextArea--Description > .text {\n  justify-self: flex-start;\n  grid-row: 1;\n}\n\n/* Character counter */\n.bcds-react-aria-TextArea--Description > .counter {\n  justify-self: flex-end;\n  grid-row: 1;\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextArea--Container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  background: var(--surface-color-forms-default);\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  padding: var(--layout-padding-small) 12px;\n}\n\n/* Text input field */\n.bcds-react-aria-TextArea--Input {\n  font: var(--typography-regular-body);\n  padding: var(--layout-padding-none);\n  color: var(--typography-color-primary);\n  border: none;\n  flex-grow: 1;\n}\n\n/* Hover and focus states */\n.bcds-react-aria-TextArea--Container\n  > .bcds-react-aria-TextArea--Input[data-focused] {\n  outline: none;\n}\n\n.bcds-react-aria-TextArea--Container:hover {\n  border-color: var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-TextArea--Container:has(\n  > .bcds-react-aria-TextArea--Input[data-focus-visible]\n) {\n  border-radius: var(--layout-border-radius-large);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled and invalid states */\n.bcds-react-aria-TextArea[data-disabled] > .bcds-react-aria-TextArea--Container,\n.bcds-react-aria-TextArea[data-disabled] .bcds-react-aria-TextArea--Input {\n  background: var(--surface-color-forms-disabled);\n  color: var(--typography-color-placeholder);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-TextArea--Container:has(\n  > .bcds-react-aria-TextArea--Input[data-focused]\n) {\n  border-color: var(--surface-color-border-active);\n}\n\n.bcds-react-aria-TextArea[data-invalid] > .bcds-react-aria-TextArea--Container {\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\n.bcds-react-aria-TextArea[data-readonly] > .bcds-react-aria-TextArea--Container,\n.bcds-react-aria-TextArea[data-readonly] .bcds-react-aria-TextArea--Input {\n  background: var(--surface-color-forms-disabled);\n}\n\n/* Invalid wins over focus: red border stays even while focused */\n.bcds-react-aria-TextArea[data-invalid]\n  > .bcds-react-aria-TextArea--Container:has(\n    > .bcds-react-aria-TextArea--Input[data-focused]\n  ) {\n  border-color: var(--support-border-color-danger);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextArea--Error {\n  display: flex;\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextArea--Error > svg {\n  padding-right: var(--layout-padding-xsmall);\n  color: var(--icons-color-danger);\n  width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n";
+var css_248z$7 = ".bcds-react-aria-TextArea {\n  display: inline-flex;\n  flex-direction: column;\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\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextArea--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/* Styles for the description and character count slot below the input field */\n.bcds-react-aria-TextArea--Description {\n  display: grid;\n  gap: var(--layout-margin-medium);\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-secondary);\n}\n\n/* Description label */\n.bcds-react-aria-TextArea--Description > .text {\n  justify-self: flex-start;\n  grid-row: 1;\n}\n\n/* Character counter */\n.bcds-react-aria-TextArea--Description > .counter {\n  justify-self: flex-end;\n  grid-row: 1;\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextArea--Container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  background: var(--surface-color-forms-default);\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  padding: var(--layout-padding-small) 12px;\n}\n\n/* Text input field */\n.bcds-react-aria-TextArea--Input {\n  font: var(--typography-regular-body);\n  padding: var(--layout-padding-none);\n  color: var(--typography-color-primary);\n  border: none;\n  flex-grow: 1;\n}\n\n/* Hover and focus states */\n.bcds-react-aria-TextArea--Container\n  > .bcds-react-aria-TextArea--Input[data-focused] {\n  outline: none;\n}\n\n.bcds-react-aria-TextArea--Container:hover {\n  border-color: var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-TextArea--Container:has(\n  > .bcds-react-aria-TextArea--Input[data-focus-visible]\n) {\n  border-radius: var(--layout-border-radius-large);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled and invalid states */\n.bcds-react-aria-TextArea[data-disabled] > .bcds-react-aria-TextArea--Container,\n.bcds-react-aria-TextArea[data-disabled] .bcds-react-aria-TextArea--Input {\n  background: var(--surface-color-forms-disabled);\n  color: var(--typography-color-placeholder);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-TextArea--Container:has(\n  > .bcds-react-aria-TextArea--Input[data-focused]\n) {\n  border-color: var(--surface-color-border-active);\n}\n\n.bcds-react-aria-TextArea[data-invalid] > .bcds-react-aria-TextArea--Container {\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\n.bcds-react-aria-TextArea[data-readonly] > .bcds-react-aria-TextArea--Container,\n.bcds-react-aria-TextArea[data-readonly] .bcds-react-aria-TextArea--Input {\n  background: var(--surface-color-forms-disabled);\n}\n\n/* Invalid wins over focus: red border stays even while focused */\n.bcds-react-aria-TextArea[data-invalid]\n  > .bcds-react-aria-TextArea--Container:has(\n    > .bcds-react-aria-TextArea--Input[data-focused]\n  ) {\n  border-color: var(--support-border-color-danger);\n}\n\n/* Character counter turns danger-colored when the field is invalid */\n.bcds-react-aria-TextArea[data-invalid]\n  > .bcds-react-aria-TextArea--Description\n  > .counter {\n  color: var(--typography-color-danger);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextArea--Error {\n  display: flex;\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextArea--Error > svg {\n  padding-right: var(--layout-padding-xsmall);\n  color: var(--icons-color-danger);\n  width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n";
 styleInject(css_248z$7);
 
 function TextArea({ label, description, errorMessage, maxLength, onChange, value, ...props }) {
@@ -32168,7 +32168,7 @@ function TextArea({ label, description, errorMessage, maxLength, onChange, value
             onChange(text);
         setCharCount(text.length);
     }
-    return (jsxRuntime.jsx($b8dcdc58eeae0d40$export$2c73285ae9390cec, { className: `bcds-react-aria-TextArea`, ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextArea--Label", children: isRequired ? `${label} (required)` : label })), jsxRuntime.jsx("div", { className: "bcds-react-aria-TextArea--Container", children: jsxRuntime.jsx($bd263d78e9bf3c56$export$f5c9f3c2c4054eec, { className: "bcds-react-aria-TextArea--Input", value: value, onChange: (e) => handleChange(e.target.value) }) }), description || maxLength ? (jsxRuntime.jsxs("div", { className: "bcds-react-aria-TextArea--Description", children: [description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "text", children: description })), maxLength && (jsxRuntime.jsxs("div", { className: "counter", children: [charCount, "/", maxLength] }))] })) : null, isInvalid && (jsxRuntime.jsxs("div", { className: "bcds-react-aria-TextArea--Error", children: [jsxRuntime.jsx(SvgExclamationIcon, {}), jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
+    return (jsxRuntime.jsx($b8dcdc58eeae0d40$export$2c73285ae9390cec, { className: `bcds-react-aria-TextArea`, maxLength: maxLength, ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextArea--Label", children: isRequired ? `${label} (required)` : label })), jsxRuntime.jsx("div", { className: "bcds-react-aria-TextArea--Container", children: jsxRuntime.jsx($bd263d78e9bf3c56$export$f5c9f3c2c4054eec, { className: "bcds-react-aria-TextArea--Input", value: value, onChange: (e) => handleChange(e.target.value) }) }), description || maxLength ? (jsxRuntime.jsxs("div", { className: "bcds-react-aria-TextArea--Description", children: [description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "text", children: description })), maxLength && (jsxRuntime.jsxs("div", { className: "counter", children: [charCount, "/", maxLength] }))] })) : null, isInvalid && (jsxRuntime.jsxs("div", { className: "bcds-react-aria-TextArea--Error", children: [jsxRuntime.jsx(SvgExclamationIcon, {}), jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
 }
 
 var css_248z$6 = ".bcds-react-aria-TextField {\n  display: inline-flex;\n  flex-direction: column;\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\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextField--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.bcds-react-aria-TextField--Label .required {\n  color: var(--typography-color-secondary);\n  padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n\n/* Styles for the text description below the input field */\n.bcds-react-aria-TextField--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/* Styles for the input field container */\n.bcds-react-aria-TextField--container {\n  color: var(--typography-color-primary);\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  background: var(--surface-color-forms-default);\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  padding: var(--layout-padding-small) 12px;\n}\n\n/* Sizes */\n.bcds-react-aria-TextField--container.small {\n  height: var(--layout-margin-xlarge);\n  min-height: var(--layout-margin-xlarge);\n}\n\n.bcds-react-aria-TextField--container.medium {\n  height: var(--layout-margin-xxlarge);\n  min-height: var(--layout-margin-xxlarge);\n}\n\n/* Text input field */\n.bcds-react-aria-TextField--Input {\n  font: var(--typography-regular-body);\n  padding: var(--layout-padding-none);\n  color: var(--typography-color-primary);\n  border: none;\n  flex-grow: 1;\n}\n\n.bcds-react-aria-TextField--Input::placeholder {\n  color: var(--typography-color-placeholder);\n}\n\n/* Hover and focus states */\n\n.bcds-react-aria-TextField--container\n  > .bcds-react-aria-TextField--Input[data-focused] {\n  outline: none;\n}\n\n.bcds-react-aria-TextField--container:hover {\n  border-color: var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-TextField--container:has(\n  > .bcds-react-aria-TextField--Input[data-focus-visible]\n) {\n  border-radius: var(--layout-border-radius-large);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-active);\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled and invalid states */\n\n.bcds-react-aria-TextField[data-disabled]\n  > .bcds-react-aria-TextField--container,\n.bcds-react-aria-TextField[data-disabled] .bcds-react-aria-TextField--Input {\n  background: var(--surface-color-forms-disabled);\n  color: var(--typography-color-placeholder);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-TextField--container:has(\n  > .bcds-react-aria-TextField--Input[data-focused]\n) {\n  border-color: var(--surface-color-border-active);\n}\n\n.bcds-react-aria-TextField[data-invalid]\n  > .bcds-react-aria-TextField--container {\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\n.bcds-react-aria-TextField[data-readonly]\n  > .bcds-react-aria-TextField--container,\n.bcds-react-aria-TextField[data-readonly] .bcds-react-aria-TextField--Input {\n  background: var(--surface-color-forms-disabled);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n  > .bcds-react-aria-TextField--container\n  > .bcds-react-aria-TextField--Input {\n  background: var(--surface-color-forms-disabled);\n}\n\n/* Invalid wins over focus: red border stays even while focused */\n.bcds-react-aria-TextField[data-invalid]\n  > .bcds-react-aria-TextField--container:has(\n    > .bcds-react-aria-TextField--Input[data-focused]\n  ) {\n  border-color: var(--support-border-color-danger);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextField--Error {\n  font: var(--typography-regular-small-body);\n  color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextField[data-invalid] .bcds-react-aria-TextField--ErrorIcon {\n  color: var(--icons-color-danger);\n}\n";