@bcgov/design-system-react-components 0.2.4-rc3 → 0.3.0-pr481

package/dist/cjs/index.cjs

@@ -15204,30 +15204,30 @@ function ButtonGroup({ orientation = "horizontal", alignment = "start", ariaLabe
     return (jsxRuntime.jsx("div", { className: `bcds-ButtonGroup ${orientation} ${alignment}`, role: "group", "aria-label": ariaLabel, ...props, children: children }));
 }
 
-function SvgCloseIcon({ id = "close-icon" }) {
-    return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M16 5.21286L14.7871 4L10 8.78714L5.21286 4L4 5.21286L8.78714 10L4 14.7871L5.21286 16L10 11.2129L14.7871 16L16 14.7871L11.2129 10L16 5.21286Z", fill: "currentColor" }) }) }));
+function SvgCheckCircleIcon({ id = "check-icon" }) {
+    return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M12.4688 7.46875C12.75 7.1875 13.2188 7.1875 13.5 7.5C13.8125 7.78125 13.8125 8.25 13.5 8.53125L9.5 12.5312C9.375 12.6875 9.1875 12.75 9 12.75C8.78125 12.75 8.59375 12.6875 8.4375 12.5312L6.4375 10.5312C6.125 10.25 6.125 9.78125 6.4375 9.46875C6.71875 9.1875 7.1875 9.1875 7.5 9.46875L9 10.9688L12.4688 7.46875ZM10 2C14.4062 2 18 5.59375 18 10C18 14.4375 14.4062 18 10 18C5.5625 18 2 14.4375 2 10C2 5.59375 5.5625 2 10 2ZM10 16.5C13.5625 16.5 16.5 13.5938 16.5 10C16.5 6.4375 13.5625 3.5 10 3.5C6.40625 3.5 3.5 6.4375 3.5 10C3.5 13.5938 6.40625 16.5 10 16.5Z", fill: "currentColor" }) }) }));
 }
 
-function SvgInfoIcon({ id = "information-icon" }) {
-    return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M9.99999 2C14.4062 2 18 5.59375 18 10C18 14.4375 14.4062 18 9.99999 18C5.56249 18 1.99998 14.4375 1.99998 10C1.99998 5.59375 5.56249 2 9.99999 2ZM9.99999 16.5C13.5625 16.5 16.5 13.5938 16.5 10C16.5 6.4375 13.5625 3.5 9.99999 3.5C6.40624 3.5 3.49999 6.4375 3.49999 10C3.49999 13.5938 6.40624 16.5 9.99999 16.5ZM11.25 12.5C11.6562 12.5 12 12.8438 12 13.25C12 13.6875 11.6562 14 11.25 14H8.74999C8.31249 14 7.99999 13.6875 7.99999 13.25C7.99999 12.8438 8.31249 12.5 8.74999 12.5H9.24999V10.5H8.99999C8.56249 10.5 8.24999 10.1875 8.24999 9.75C8.24999 9.34375 8.56249 9 8.99999 9H9.99999C10.4062 9 10.75 9.34375 10.75 9.75V12.5H11.25ZM9.99999 8C9.43749 8 8.99999 7.5625 8.99999 7C8.99999 6.46875 9.43749 6 9.99999 6C10.5312 6 11 6.46875 11 7C11 7.5625 10.5312 8 9.99999 8Z", fill: "currentColor" }) }) }));
+function SvgCloseIcon({ id = "close-icon" }) {
+    return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M16 5.21286L14.7871 4L10 8.78714L5.21286 4L4 5.21286L8.78714 10L4 14.7871L5.21286 16L10 11.2129L14.7871 16L16 14.7871L11.2129 10L16 5.21286Z", fill: "currentColor" }) }) }));
 }
 
-function SvgCheckCircleIcon({ id = "check-icon" }) {
-    return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M12.4688 7.46875C12.75 7.1875 13.2188 7.1875 13.5 7.5C13.8125 7.78125 13.8125 8.25 13.5 8.53125L9.5 12.5312C9.375 12.6875 9.1875 12.75 9 12.75C8.78125 12.75 8.59375 12.6875 8.4375 12.5312L6.4375 10.5312C6.125 10.25 6.125 9.78125 6.4375 9.46875C6.71875 9.1875 7.1875 9.1875 7.5 9.46875L9 10.9688L12.4688 7.46875ZM10 2C14.4062 2 18 5.59375 18 10C18 14.4375 14.4062 18 10 18C5.5625 18 2 14.4375 2 10C2 5.59375 5.5625 2 10 2ZM10 16.5C13.5625 16.5 16.5 13.5938 16.5 10C16.5 6.4375 13.5625 3.5 10 3.5C6.40625 3.5 3.5 6.4375 3.5 10C3.5 13.5938 6.40625 16.5 10 16.5Z", fill: "currentColor" }) }) }));
+function SvgExclamationCircleIcon({ id = "exclamation-icon-circle", }) {
+    return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M9.99999 2C14.4062 2 18 5.59375 18 10C18 14.4375 14.4062 18 9.99999 18C5.56249 18 1.99998 14.4375 1.99998 10C1.99998 5.59375 5.56249 2 9.99999 2ZM9.99999 16.5C13.5625 16.5 16.5 13.5938 16.5 10C16.5 6.4375 13.5625 3.5 9.99999 3.5C6.40624 3.5 3.49999 6.4375 3.49999 10C3.49999 13.5938 6.40624 16.5 9.99999 16.5ZM9.99999 11.5C9.56249 11.5 9.24999 11.1875 9.24999 10.75V6.75C9.24999 6.34375 9.56249 6 9.99999 6C10.4062 6 10.75 6.34375 10.75 6.75V10.75C10.75 11.1875 10.4062 11.5 9.99999 11.5ZM9.99999 12.5625C10.5312 12.5625 10.9687 13 10.9687 13.5312C10.9687 14.0625 10.5312 14.5 9.99999 14.5C9.43749 14.5 8.99999 14.0625 8.99999 13.5312C8.99999 13 9.43749 12.5625 9.99999 12.5625Z", fill: "currentColor" }) }) }));
 }
 
-var css_248z$h = ".bcds-react-aria-AlertDialog {\n  display: flex;\n  flex-direction: column;\n\n  /* Variant icons */\n  &.info {\n    .bcds-react-aria-AlertDialog--Icon {\n      color: var(--icons-color-primary);\n    }\n  }\n  &.confirmation {\n    .bcds-react-aria-AlertDialog--Icon {\n      color: var(--icons-color-success);\n    }\n  }\n  &.warning {\n    .bcds-react-aria-AlertDialog--Icon {\n      color: var(--icons-color-warning);\n    }\n  }\n  &.error {\n    .bcds-react-aria-AlertDialog--Icon {\n      color: var(--icons-color-danger);\n    }\n  }\n  &.destructive {\n    .bcds-react-aria-AlertDialog--Icon {\n      color: var(--icons-color-danger);\n    }\n  }\n}\n\n.bcds-react-aria-AlertDialog--Header {\n  display: inline-flex;\n  flex-direction: row;\n  gap: var(--layout-padding-small);\n  justify-content: space-between;\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog--Title {\n  flex-grow: 1;\n  font: var(--typography-bold-h5);\n  color: var(--typography-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--Icon {\n  justify-self: flex-start;\n  align-self: center;\n  padding-top: var(--layout-padding-xsmall);\n}\n\n.bcds-react-aria-AlertDialog--closeIcon {\n  justify-self: flex-end;\n  color: var(--icons-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--Description {\n  font: var(--typography-regular-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog > .bcds-ButtonGroup {\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n}\n";
-styleInject(css_248z$h);
-
 // This icon is available as a plain SVG at src/assets/icon-exclamation.svg
 function SvgExclamationIcon({ id = "exclamation-icon" }) {
     return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z", fill: "currentColor" }) }) }));
 }
 
-function SvgExclamationCircleIcon({ id = "exclamation-icon-circle", }) {
-    return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M9.99999 2C14.4062 2 18 5.59375 18 10C18 14.4375 14.4062 18 9.99999 18C5.56249 18 1.99998 14.4375 1.99998 10C1.99998 5.59375 5.56249 2 9.99999 2ZM9.99999 16.5C13.5625 16.5 16.5 13.5938 16.5 10C16.5 6.4375 13.5625 3.5 9.99999 3.5C6.40624 3.5 3.49999 6.4375 3.49999 10C3.49999 13.5938 6.40624 16.5 9.99999 16.5ZM9.99999 11.5C9.56249 11.5 9.24999 11.1875 9.24999 10.75V6.75C9.24999 6.34375 9.56249 6 9.99999 6C10.4062 6 10.75 6.34375 10.75 6.75V10.75C10.75 11.1875 10.4062 11.5 9.99999 11.5ZM9.99999 12.5625C10.5312 12.5625 10.9687 13 10.9687 13.5312C10.9687 14.0625 10.5312 14.5 9.99999 14.5C9.43749 14.5 8.99999 14.0625 8.99999 13.5312C8.99999 13 9.43749 12.5625 9.99999 12.5625Z", fill: "currentColor" }) }) }));
+function SvgInfoIcon({ id = "information-icon" }) {
+    return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M9.99999 2C14.4062 2 18 5.59375 18 10C18 14.4375 14.4062 18 9.99999 18C5.56249 18 1.99998 14.4375 1.99998 10C1.99998 5.59375 5.56249 2 9.99999 2ZM9.99999 16.5C13.5625 16.5 16.5 13.5938 16.5 10C16.5 6.4375 13.5625 3.5 9.99999 3.5C6.40624 3.5 3.49999 6.4375 3.49999 10C3.49999 13.5938 6.40624 16.5 9.99999 16.5ZM11.25 12.5C11.6562 12.5 12 12.8438 12 13.25C12 13.6875 11.6562 14 11.25 14H8.74999C8.31249 14 7.99999 13.6875 7.99999 13.25C7.99999 12.8438 8.31249 12.5 8.74999 12.5H9.24999V10.5H8.99999C8.56249 10.5 8.24999 10.1875 8.24999 9.75C8.24999 9.34375 8.56249 9 8.99999 9H9.99999C10.4062 9 10.75 9.34375 10.75 9.75V12.5H11.25ZM9.99999 8C9.43749 8 8.99999 7.5625 8.99999 7C8.99999 6.46875 9.43749 6 9.99999 6C10.5312 6 11 6.46875 11 7C11 7.5625 10.5312 8 9.99999 8Z", fill: "currentColor" }) }) }));
 }
 
+var css_248z$h = ".bcds-react-aria-AlertDialog {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Variant icons */\n.bcds-react-aria-AlertDialog.info .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-primary);\n}\n.bcds-react-aria-AlertDialog.confirmation .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-success);\n}\n.bcds-react-aria-AlertDialog.warning .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-warning);\n}\n.bcds-react-aria-AlertDialog.error .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-danger);\n}\n.bcds-react-aria-AlertDialog.destructive .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-danger);\n}\n\n.bcds-react-aria-AlertDialog--Header {\n  display: inline-flex;\n  flex-direction: row;\n  gap: var(--layout-padding-small);\n  justify-content: space-between;\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog--Title {\n  flex-grow: 1;\n  font: var(--typography-bold-h5);\n  color: var(--typography-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--Icon {\n  justify-self: flex-start;\n  align-self: center;\n  padding-top: var(--layout-padding-xsmall);\n}\n\n.bcds-react-aria-AlertDialog--closeIcon {\n  justify-self: flex-end;\n  color: var(--icons-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--children {\n  font: var(--typography-regular-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog > .bcds-ButtonGroup {\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n}\n";
+styleInject(css_248z$h);
+
 /* Sets correct left icon for selected variant */
 function getIcon$1(variant) {
     switch (variant) {
@@ -15245,8 +15245,8 @@ function getIcon$1(variant) {
             return;
     }
 }
-function AlertDialog({ variant = "info", role = "dialog", title, isCloseable = true, isIconHidden = false, description, buttons, ...props }) {
-    return (jsxRuntime.jsx($de32f1b87079253c$export$3ddf2d174ce01153, { className: `bcds-react-aria-AlertDialog ${variant}`, role: role, ...props, children: ({ close }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "bcds-react-aria-AlertDialog--Header", children: [!isIconHidden && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--Icon", children: getIcon$1(variant) })), title && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--Title", slot: "title", children: title })), isCloseable && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--closeIcon", children: jsxRuntime.jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close", type: "button", onPress: close, children: jsxRuntime.jsx(SvgCloseIcon, {}) }) }))] }), description && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--Description", slot: "description", children: description })), buttons && (jsxRuntime.jsx(ButtonGroup, { alignment: "end", orientation: "horizontal", children: buttons }))] })) }));
+function AlertDialog({ children, variant = "info", role = "dialog", title, isCloseable = true, isIconHidden = false, buttons, ...props }) {
+    return (jsxRuntime.jsx($de32f1b87079253c$export$3ddf2d174ce01153, { className: `bcds-react-aria-AlertDialog ${variant}`, role: role, ...props, children: ({ close }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "bcds-react-aria-AlertDialog--Header", children: [!isIconHidden && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--Icon", children: getIcon$1(variant) })), title && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--Title", slot: "title", children: title })), isCloseable && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--closeIcon", children: jsxRuntime.jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close", type: "button", onPress: close, children: jsxRuntime.jsx(SvgCloseIcon, {}) }) }))] }), children && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--children", slot: "children", children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }) })), buttons && (jsxRuntime.jsx(ButtonGroup, { alignment: "end", orientation: "horizontal", children: buttons }))] })) }));
 }
 
 function SvgCheckIcon({ id = "check-icon" }) {
@@ -15271,10 +15271,10 @@ function CheckboxGroup({ orientation = "vertical", label, description, errorMess
     return (jsxRuntime.jsx($bc237834342dbd75$export$4aa08d5625cb8ead, { className: `bcds-react-aria-CheckboxGroup`, ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-CheckboxGroup--label", children: [label, " ", isRequired && "(required)"] })), jsxRuntime.jsx("div", { className: `bcds-react-aria-CheckboxGroup--options ${orientation} flex-wrap-${flexWrap}`, children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }) }), description && (jsxRuntime.jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-CheckboxGroup--description", children: description })), isInvalid && (jsxRuntime.jsxs("div", { className: "bcds-react-aria-CheckboxGroup--error", children: [jsxRuntime.jsx(SvgExclamationIcon, {}), jsxRuntime.jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
 }
 
-var css_248z$e = ".bcds-react-aria-Dialog {\n  display: flex;\n  flex-direction: column;\n  min-height: var(--layout-margin-xxxlarge);\n}\n\n.bcds-react-aria-Dialog--Container {\n  position: relative;\n}\n\n/* Close icon */\n.bcds-react-aria-Dialog--closeIcon {\n  color: var(--icons-color-primary);\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: var(--layout-padding-small);\n\n  > svg {\n    min-width: var(--icons-size-medium);\n    height: var(--icons-size-medium);\n  }\n}\n";
+var css_248z$e = ".bcds-react-aria-Dialog {\n  display: flex;\n  flex-direction: column;\n  min-height: var(--layout-margin-xxxlarge);\n}\n\n.bcds-react-aria-Dialog--Container {\n  position: relative;\n}\n\n/* Close icon */\n.bcds-react-aria-Dialog--closeIcon {\n  color: var(--icons-color-primary);\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: var(--layout-padding-small);\n}\n.bcds-react-aria-Dialog--closeIcon > svg {\n  min-width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n";
 styleInject(css_248z$e);
 
-function Dialog({ isCloseable, role = "dialog", children, ...props }) {
+function Dialog({ isCloseable = true, role = "dialog", children, ...props }) {
     return (jsxRuntime.jsx($de32f1b87079253c$export$3ddf2d174ce01153, { className: "bcds-react-aria-Dialog", role: role, ...props, children: ({ close }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "bcds-react-aria-Dialog--Container", children: [isCloseable && (jsxRuntime.jsx("span", { className: "bcds-react-aria-Dialog--closeIcon", children: jsxRuntime.jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close", type: "button", onPress: close, children: jsxRuntime.jsx(SvgCloseIcon, {}) }) })), jsxRuntime.jsx(jsxRuntime.Fragment, { children: children })] }) })) }));
 }
 
@@ -15393,7 +15393,7 @@ function InlineAlert({ variant = "info", title, description, isIconHidden = fals
     return (jsxRuntime.jsxs("div", { className: `bcds-Inline-Alert ${variant} ${isCloseable ? "closeable" : null}`, ...props, children: [!isIconHidden && (jsxRuntime.jsx("span", { className: "bcds-Inline-Alert--icon", children: getIcon(variant) })), jsxRuntime.jsx("div", { className: "bcds-Inline-Alert--container", role: role, "aria-labelledby": "alert-title", children: children ? (children) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title && (jsxRuntime.jsx("span", { className: "title", id: "alert-title", children: title })), description && jsxRuntime.jsx("span", { className: "description", children: description }), buttons && (jsxRuntime.jsx(ButtonGroup, { alignment: "end", orientation: "horizontal", children: buttons }))] })) }), isCloseable && (jsxRuntime.jsx("span", { className: "bcds-Inline-Alert--closeIcon", children: jsxRuntime.jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close this alert", type: "button", onPress: onClose, children: jsxRuntime.jsx(SvgCloseIcon, {}) }) }))] }));
 }
 
-var css_248z$a = "/* Styles for overlay element */\n.react-aria-ModalOverlay:has(.bcds-react-aria-Modal) {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  background: var(--surface-color-overlay-default);\n  height: 100vh;\n\n  &[data-entering] {\n    animation-delay: 200ms;\n  }\n  &[data-exiting] {\n    animation-delay: 200ms;\n  }\n}\n\n/* Styles for content container */\n.bcds-react-aria-Modal {\n  box-sizing: border-box;\n  max-width: 100vw;\n  width: 600px;\n  max-height: 100vh;\n  min-height: var(--layout-margin-xxxlarge);\n  height: auto;\n  margin: var(--layout-margin-large);\n  border-radius: var(--layout-border-radius-medium);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  background: var(--surface-color-forms-default);\n  box-shadow: var(--surface-shadow-large);\n}\n";
+var css_248z$a = "/* Styles for overlay element */\n.react-aria-ModalOverlay:has(.bcds-react-aria-Modal) {\n  position: fixed;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  background: var(--surface-color-overlay-default);\n  height: 100vh;\n  width: 100vw;\n  z-index: 1000;\n}\n.react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-entering] {\n  animation: modal-fade 200ms;\n}\n.react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-exiting] {\n  animation: modal-fade 150ms reverse ease-in;\n}\n@media (prefers-reduced-motion) {\n  /* Don't animate modal fade in/out if prefers-reduced-motion is on */\n  .react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-entering] {\n    animation: unset;\n  }\n  .react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-exiting] {\n    animation: unset;\n  }\n}\n\n@keyframes modal-fade {\n  from {\n    opacity: 0;\n  }\n\n  to {\n    opacity: 1;\n  }\n}\n\n/* Styles for content container */\n.bcds-react-aria-Modal {\n  box-sizing: border-box;\n  max-width: 100vw;\n  width: 600px;\n  max-height: 100vh;\n  min-height: var(--layout-margin-xxxlarge);\n  height: auto;\n  margin: var(--layout-margin-large);\n  border-radius: var(--layout-border-radius-medium);\n  border: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n  background: var(--surface-color-forms-default);\n  box-shadow: var(--surface-shadow-large);\n}\n";
 styleInject(css_248z$a);
 
 function Modal({ children, ...props }) {