@bcgov/design-system-react-components 0.2.4-rc2 → 0.2.4-rc3

package/dist/cjs/types/components/Modal/Modal.d.ts

@@ -1,3 +1,3 @@
 import { ModalOverlayProps } from "react-aria-components";
 import "./Modal.css";
-export default function Modal({ children, isDismissable, isKeyboardDismissDisabled, isOpen, defaultOpen, shouldCloseOnInteractOutside, ...props }: ModalOverlayProps): import("react/jsx-runtime").JSX.Element;
+export default function Modal({ children, ...props }: ModalOverlayProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/ModalOverlay/ModalOverlay.d.ts

@@ -0,0 +1,3 @@
+import { ModalOverlayProps } from "react-aria-components";
+import "./ModalOverlay.css";
+export default function ModalOverlay({ ...props }: ModalOverlayProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/types/components/ModalOverlay/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ModalOverlay";
+export type { ModalOverlayProps } from "react-aria-components";

package/dist/esm/index.js

@@ -15391,11 +15391,11 @@ function InlineAlert({ variant = "info", title, description, isIconHidden = fals
     return (jsxs("div", { className: `bcds-Inline-Alert ${variant} ${isCloseable ? "closeable" : null}`, ...props, children: [!isIconHidden && (jsx("span", { className: "bcds-Inline-Alert--icon", children: getIcon(variant) })), jsx("div", { className: "bcds-Inline-Alert--container", role: role, "aria-labelledby": "alert-title", children: children ? (children) : (jsxs(Fragment, { children: [title && (jsx("span", { className: "title", id: "alert-title", children: title })), description && jsx("span", { className: "description", children: description }), buttons && (jsx(ButtonGroup, { alignment: "end", orientation: "horizontal", children: buttons }))] })) }), isCloseable && (jsx("span", { className: "bcds-Inline-Alert--closeIcon", children: jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close this alert", type: "button", onPress: onClose, children: jsx(SvgCloseIcon, {}) }) }))] }));
 }
 
-var css_248z$a = ".bcds-react-aria-Modal--Overlay {\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.bcds-react-aria-Modal--Container {\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\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";
 styleInject(css_248z$a);
 
-function Modal({ children, isDismissable, isKeyboardDismissDisabled, isOpen, defaultOpen, shouldCloseOnInteractOutside, ...props }) {
-    return (jsx($f3f84453ead64de5$export$8948f78d83984c69, { className: "bcds-react-aria-Modal--Overlay", isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, defaultOpen: defaultOpen, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, children: jsx($f3f84453ead64de5$export$2b77a92f1a5ad772, { className: "bcds-react-aria-Modal--Container", ...props, children: children }) }));
+function Modal({ children, ...props }) {
+    return (jsx($f3f84453ead64de5$export$2b77a92f1a5ad772, { className: "bcds-react-aria-Modal", ...props, children: children }));
 }
 
 var css_248z$9 = ".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";