@bcgov/design-system-react-components 0.2.2-pr487 → 0.2.2-pr489

package/dist/cjs/index.cjs

@@ -15010,7 +15010,7 @@ function TextField({ size, label, description, errorMessage, iconLeft, iconRight
     return (jsxRuntime.jsx($bcdf0525bf22703d$export$2c73285ae9390cec, { className: "bcds-react-aria-TextField", ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextField--Label", children: [label, isRequired && (jsxRuntime.jsx("span", { className: "bcds-react-aria-TextField--Label required", children: "(required)" }))] })), jsxRuntime.jsxs("div", { className: `bcds-react-aria-TextField--container ${size === "small" ? "small" : "medium"}`, children: [iconLeft, jsxRuntime.jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: "bcds-react-aria-TextField--Input" }), isInvalid && jsxRuntime.jsx(SvgExclamationIcon, {}), iconRight] }), description && (jsxRuntime.jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-TextField--Description`, children: description })), jsxRuntime.jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { className: "bcds-react-aria-TextField--Error", children: errorMessage })] })) }));
 }
 
-var css_248z$1 = ".bcds-react-aria-Switch {\n  display: flex;\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/* Container */\n.bcds-react-aria-Switch > .indicator {\n  align-items: center;\n  width: var(--layout-margin-xxlarge);\n  height: var(--icons-size-medium);\n  background-color: var(--surface-color-primary-disabled);\n  border-radius: var(--icons-size-medium);\n  transition: all 200ms;\n}\n\n/* Indicator */\n.bcds-react-aria-Switch > .indicator::before {\n  content: \"\";\n  display: block;\n  box-sizing: border-box;\n  width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n  background-color: var(--surface-color-secondary-default);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-medium);\n  border-radius: var(--icons-size-small);\n  transition: all 200ms;\n}\n\n/* Selected */\n.bcds-react-aria-Switch[data-selected] > .indicator {\n  background-color: var(--surface-color-primary-default);\n}\n\n.bcds-react-aria-Switch[data-selected] > .indicator::before {\n  transform: translateX(100%);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-primary-default);\n}\n\n/* Hover */\n.bcds-react-aria-Switch[data-hovered] > .indicator {\n  cursor: pointer;\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator {\n  cursor: pointer;\n  background-color: var(--surface-color-primary-hover);\n}\n\n.bcds-react-aria-Switch[data-hovered] > .indicator::before {\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator::before {\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-primary-hover);\n}\n\n/* Focused */\n.bcds-react-aria-Switch[data-focus-visible] > .indicator {\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 */\n.bcds-react-aria-Switch[data-disabled] {\n  color: var(--typography-color-disabled);\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator {\n  background-color: var(--surface-color-primary-disabled);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator::before {\n  background-color: var(--theme-gray-10);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-default);\n}\n\n/* Read only */\n.bcds-react-aria-Switch[data-readonly] > .indicator {\n  cursor: not-allowed;\n}\n";
+var css_248z$1 = ".bcds-react-aria-Switch {\n  display: flex;\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/* Container */\n.bcds-react-aria-Switch > .indicator {\n  align-items: center;\n  width: var(--layout-margin-xxlarge);\n  height: var(--icons-size-medium);\n  background-color: var(--surface-color-primary-disabled);\n  border-radius: var(--icons-size-medium);\n  transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n  /* No animation on Switch container color if user has reduced motion set */\n  .bcds-react-aria-Switch > .indicator {\n    transition: none;\n  }\n}\n\n/* Indicator */\n.bcds-react-aria-Switch > .indicator::before {\n  content: \"\";\n  display: block;\n  box-sizing: border-box;\n  width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n  background-color: var(--surface-color-secondary-default);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-medium);\n  border-radius: var(--icons-size-small);\n  transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n  /* No animation on Switch circle indicator if user has reduced motion set */\n  .bcds-react-aria-Switch > .indicator::before {\n    transition: none;\n  }\n}\n\n/* Selected */\n.bcds-react-aria-Switch[data-selected] > .indicator {\n  background-color: var(--surface-color-primary-default);\n}\n\n.bcds-react-aria-Switch[data-selected] > .indicator::before {\n  transform: translateX(100%);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-primary-default);\n}\n\n/* Hover */\n.bcds-react-aria-Switch[data-hovered] {\n  cursor: pointer;\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator {\n  background-color: var(--surface-color-primary-hover);\n}\n\n.bcds-react-aria-Switch[data-hovered] > .indicator::before {\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator::before {\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-primary-hover);\n}\n\n/* Focused */\n.bcds-react-aria-Switch[data-focus-visible] > .indicator {\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 */\n.bcds-react-aria-Switch[data-disabled] {\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator {\n  background-color: var(--surface-color-primary-disabled);\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator::before {\n  background-color: var(--theme-gray-10);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-default);\n}\n\n/* Read only */\n.bcds-react-aria-Switch[data-readonly] {\n  cursor: not-allowed;\n}\n";
 styleInject(css_248z$1);
 
 function Switch({ labelPosition = "right", children, ...props }) {

package/dist/esm/index.js

@@ -15008,7 +15008,7 @@ function TextField({ size, label, description, errorMessage, iconLeft, iconRight
     return (jsx($bcdf0525bf22703d$export$2c73285ae9390cec, { className: "bcds-react-aria-TextField", ...props, children: ({ isRequired, isInvalid }) => (jsxs(Fragment, { children: [label && (jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextField--Label", children: [label, isRequired && (jsx("span", { className: "bcds-react-aria-TextField--Label required", children: "(required)" }))] })), jsxs("div", { className: `bcds-react-aria-TextField--container ${size === "small" ? "small" : "medium"}`, children: [iconLeft, jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: "bcds-react-aria-TextField--Input" }), isInvalid && jsx(SvgExclamationIcon, {}), iconRight] }), description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-TextField--Description`, children: description })), jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { className: "bcds-react-aria-TextField--Error", children: errorMessage })] })) }));
 }
 
-var css_248z$1 = ".bcds-react-aria-Switch {\n  display: flex;\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/* Container */\n.bcds-react-aria-Switch > .indicator {\n  align-items: center;\n  width: var(--layout-margin-xxlarge);\n  height: var(--icons-size-medium);\n  background-color: var(--surface-color-primary-disabled);\n  border-radius: var(--icons-size-medium);\n  transition: all 200ms;\n}\n\n/* Indicator */\n.bcds-react-aria-Switch > .indicator::before {\n  content: \"\";\n  display: block;\n  box-sizing: border-box;\n  width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n  background-color: var(--surface-color-secondary-default);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-medium);\n  border-radius: var(--icons-size-small);\n  transition: all 200ms;\n}\n\n/* Selected */\n.bcds-react-aria-Switch[data-selected] > .indicator {\n  background-color: var(--surface-color-primary-default);\n}\n\n.bcds-react-aria-Switch[data-selected] > .indicator::before {\n  transform: translateX(100%);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-primary-default);\n}\n\n/* Hover */\n.bcds-react-aria-Switch[data-hovered] > .indicator {\n  cursor: pointer;\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator {\n  cursor: pointer;\n  background-color: var(--surface-color-primary-hover);\n}\n\n.bcds-react-aria-Switch[data-hovered] > .indicator::before {\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator::before {\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-primary-hover);\n}\n\n/* Focused */\n.bcds-react-aria-Switch[data-focus-visible] > .indicator {\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 */\n.bcds-react-aria-Switch[data-disabled] {\n  color: var(--typography-color-disabled);\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator {\n  background-color: var(--surface-color-primary-disabled);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator::before {\n  background-color: var(--theme-gray-10);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-default);\n}\n\n/* Read only */\n.bcds-react-aria-Switch[data-readonly] > .indicator {\n  cursor: not-allowed;\n}\n";
+var css_248z$1 = ".bcds-react-aria-Switch {\n  display: flex;\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/* Container */\n.bcds-react-aria-Switch > .indicator {\n  align-items: center;\n  width: var(--layout-margin-xxlarge);\n  height: var(--icons-size-medium);\n  background-color: var(--surface-color-primary-disabled);\n  border-radius: var(--icons-size-medium);\n  transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n  /* No animation on Switch container color if user has reduced motion set */\n  .bcds-react-aria-Switch > .indicator {\n    transition: none;\n  }\n}\n\n/* Indicator */\n.bcds-react-aria-Switch > .indicator::before {\n  content: \"\";\n  display: block;\n  box-sizing: border-box;\n  width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n  background-color: var(--surface-color-secondary-default);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-medium);\n  border-radius: var(--icons-size-small);\n  transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n  /* No animation on Switch circle indicator if user has reduced motion set */\n  .bcds-react-aria-Switch > .indicator::before {\n    transition: none;\n  }\n}\n\n/* Selected */\n.bcds-react-aria-Switch[data-selected] > .indicator {\n  background-color: var(--surface-color-primary-default);\n}\n\n.bcds-react-aria-Switch[data-selected] > .indicator::before {\n  transform: translateX(100%);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-primary-default);\n}\n\n/* Hover */\n.bcds-react-aria-Switch[data-hovered] {\n  cursor: pointer;\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator {\n  background-color: var(--surface-color-primary-hover);\n}\n\n.bcds-react-aria-Switch[data-hovered] > .indicator::before {\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-dark);\n}\n\n.bcds-react-aria-Switch[data-hovered][data-selected] > .indicator::before {\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-primary-hover);\n}\n\n/* Focused */\n.bcds-react-aria-Switch[data-focus-visible] > .indicator {\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 */\n.bcds-react-aria-Switch[data-disabled] {\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator {\n  background-color: var(--surface-color-primary-disabled);\n}\n\n.bcds-react-aria-Switch[data-disabled] > .indicator::before {\n  background-color: var(--theme-gray-10);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-default);\n}\n\n/* Read only */\n.bcds-react-aria-Switch[data-readonly] {\n  cursor: not-allowed;\n}\n";
 styleInject(css_248z$1);
 
 function Switch({ labelPosition = "right", children, ...props }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bcgov/design-system-react-components",
-  "version": "0.2.2-pr487",
+  "version": "0.2.2-pr489",
   "type": "module",
   "scripts": {
     "rollup": "rm -rf dist && rollup -c --bundleConfigAsCjs",