@dnanpm/ui-components 0.7.0 → 0.9.0

package/dist/components/MainNavigation/MainNavigation.utils.js

@@ -1,5 +1,23 @@
 const relativeNavigationBaseUrl = "https://navigation.local";
 const safeLinkProtocols = /* @__PURE__ */ new Set(["http:", "https:", "mailto:", "tel:"]);
+const languageLinkAriaLabels = {
+  fi: "FI, siirry suomenkieliselle sivustolle",
+  en: "EN, customer support in English",
+  sv: "SV, kundsupport på svenska"
+};
+const languageToggleAnnouncementBuilders = {
+  en: (currentCode) => `Change language. Current language ${currentCode}.`,
+  fi: (currentCode) => `Vaihda kieli. Nykyinen kieli ${currentCode}.`,
+  sv: (currentCode) => `Ändra språk. Aktuellt språk ${currentCode}.`
+};
+const languageAnnouncementOrder = ["en", "fi", "sv"];
+const getLanguageToggleAnnouncements = (presentCodes, currentCode) => {
+  const upperCurrentCode = currentCode.toUpperCase();
+  return languageAnnouncementOrder.filter((code) => presentCodes.includes(code)).map((code) => ({
+    lang: code,
+    text: languageToggleAnnouncementBuilders[code](upperCurrentCode)
+  }));
+};
 const isDesktopViewportByEnvironment = (windowObject) => {
   if (windowObject == null) {
     return false;
@@ -149,6 +167,7 @@ const assignRef = (target, value) => {
 };
 export {
   assignRef,
+  getLanguageToggleAnnouncements,
   getLinkRel,
   getLinkTarget,
   hasHref,
@@ -160,6 +179,7 @@ export {
   isLinkInCurrentPath,
   isMobileIosDeviceByEnvironment,
   isMobileViewportByEnvironment,
+  languageLinkAriaLabels,
   matchesPath,
   normalizePathname,
   toNavigableHref,

package/dist/components/MainNavigation/MainNavigation.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"MainNavigation.utils.js","sources":["../../../src/components/MainNavigation/MainNavigation.utils.ts"],"sourcesContent":["import type { Ref } from 'react';\nimport type { MainNavigationItem, MainNavigationLink } from './MainNavigation.types';\n\nconst relativeNavigationBaseUrl = 'https://navigation.local';\nconst safeLinkProtocols = new Set(['http:', 'https:', 'mailto:', 'tel:']);\n\nexport type MainNavigationWindowLike = {\n    innerWidth: number;\n    matchMedia?: (query: string) => Pick<MediaQueryList, 'matches'>;\n    MSStream?: unknown;\n};\n\nexport type MainNavigationNavigatorLike = {\n    userAgent: string;\n};\n\nexport const isDesktopViewportByEnvironment = (\n    windowObject: MainNavigationWindowLike | undefined,\n) => {\n    if (windowObject == null) {\n        return false;\n    }\n\n    if (typeof windowObject.matchMedia === 'function') {\n        return windowObject.matchMedia('(min-width: 1024px)').matches;\n    }\n\n    return windowObject.innerWidth >= 1024;\n};\n\nexport const isMobileViewportByEnvironment = (\n    windowObject: MainNavigationWindowLike | undefined,\n) => {\n    if (windowObject == null) {\n        return false;\n    }\n\n    if (typeof windowObject.matchMedia === 'function') {\n        return windowObject.matchMedia('(max-width: 1023px)').matches;\n    }\n\n    return windowObject.innerWidth < 1024;\n};\n\nexport const isMobileIosDeviceByEnvironment = (\n    windowObject: MainNavigationWindowLike | undefined,\n    navigatorObject: MainNavigationNavigatorLike | undefined,\n) => {\n    if (windowObject == null || navigatorObject == null) {\n        return false;\n    }\n\n    const isIOS =\n        /iPad|iPhone|iPod/.test(navigatorObject.userAgent) && !('MSStream' in windowObject);\n    return isIOS && windowObject.innerWidth < 768;\n};\n\nexport const isExternalTarget = (target?: string) => target === '_blank';\n\nexport const isExternalLink = (link: Pick<MainNavigationLink, 'target' | 'external'>) => {\n    if (link.external != null) {\n        return link.external;\n    }\n\n    return isExternalTarget(link.target);\n};\n\nexport const getLinkRel = (target?: string) =>\n    isExternalTarget(target) ? 'noopener noreferrer' : undefined;\n\nexport const getLinkTarget = (target?: string) => (isExternalTarget(target) ? '_blank' : undefined);\n\nexport const normalizePathname = (value: string) => {\n    const path = value.split('?')[0].split('#')[0] || '/';\n    const withLeadingSlash = path.startsWith('/') ? path : `/${path}`;\n\n    if (withLeadingSlash === '/') {\n        return '/';\n    }\n\n    return withLeadingSlash.replace(/\\/+$/, '');\n};\n\nexport const toNavigableHref = (href: string) => {\n    const normalizedHref = href.trim();\n\n    if (normalizedHref === '') {\n        return '#';\n    }\n\n    const hrefWithProtocol = normalizedHref.toLowerCase().startsWith('www.')\n        ? `https://${normalizedHref}`\n        : normalizedHref;\n\n    if (hrefWithProtocol.startsWith('./') || hrefWithProtocol.startsWith('../')) {\n        return hrefWithProtocol;\n    }\n\n    if (\n        hrefWithProtocol.startsWith('/') ||\n        hrefWithProtocol.startsWith('#') ||\n        hrefWithProtocol.startsWith('?')\n    ) {\n        return hrefWithProtocol;\n    }\n\n    const hasScheme = /^[a-zA-Z][a-zA-Z\\d+\\-.]*:/.test(hrefWithProtocol);\n\n    if (!hasScheme) {\n        return hrefWithProtocol;\n    }\n\n    try {\n        const protocol = new URL(\n            hrefWithProtocol,\n            relativeNavigationBaseUrl,\n        ).protocol.toLowerCase();\n        if (safeLinkProtocols.has(protocol)) {\n            return hrefWithProtocol;\n        }\n    } catch {\n        return '#';\n    }\n\n    return '#';\n};\n\nexport const toPathname = (href?: string) => {\n    if (href == null || href.trim() === '' || href === '#') {\n        return null;\n    }\n\n    if (href.startsWith('/')) {\n        return normalizePathname(href);\n    }\n\n    try {\n        return normalizePathname(new URL(href).pathname);\n    } catch {\n        return normalizePathname(href);\n    }\n};\n\nexport const matchesPath = (currentPathname: string, linkPathname: string) => {\n    if (linkPathname === '/') {\n        return currentPathname === '/';\n    }\n\n    return currentPathname === linkPathname || currentPathname.startsWith(`${linkPathname}/`);\n};\n\nexport const isLinkInCurrentPath = (link: MainNavigationLink, currentPathname?: string) => {\n    if (link.current) {\n        return true;\n    }\n\n    if (isExternalLink(link)) {\n        return false;\n    }\n\n    if (currentPathname == null) {\n        return false;\n    }\n\n    const linkPathname = toPathname(toNavigableHref(link.href));\n\n    if (linkPathname == null) {\n        return false;\n    }\n\n    return matchesPath(normalizePathname(currentPathname), linkPathname);\n};\n\nexport const hasHref = (item: MainNavigationItem): item is MainNavigationItem & { href: string } =>\n    typeof item.href === 'string' && item.href.trim().length > 0;\n\nexport const isItemInCurrentPath = (item: MainNavigationItem, currentPathname?: string) => {\n    if (hasHref(item) && isLinkInCurrentPath(item, currentPathname)) {\n        return true;\n    }\n\n    if (\n        item.panel?.columns?.some((column) =>\n            column.links.some((link) => isLinkInCurrentPath(link, currentPathname)),\n        )\n    ) {\n        return true;\n    }\n\n    return (\n        item.panel?.featureLinks?.some((link) => isLinkInCurrentPath(link, currentPathname)) ??\n        false\n    );\n};\n\nexport const isLinkInCurrentPage = (link: MainNavigationLink, currentPathname?: string) => {\n    if (link.current) {\n        return true;\n    }\n\n    if (isExternalLink(link)) {\n        return false;\n    }\n\n    if (currentPathname == null) {\n        return false;\n    }\n\n    const linkPathname = toPathname(toNavigableHref(link.href));\n\n    if (linkPathname == null) {\n        return false;\n    }\n\n    return normalizePathname(currentPathname) === linkPathname;\n};\n\nconst isRefObject = <T>(target: Ref<T>): target is { current: T | null } =>\n    typeof target === 'object' && target !== null && 'current' in target;\n\nexport const assignRef = <T>(target: Ref<T> | undefined, value: T | null) => {\n    if (target == null) {\n        return;\n    }\n\n    if (typeof target === 'function') {\n        target(value);\n        return;\n    }\n\n    if (isRefObject(target)) {\n        target.current = value;\n    }\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"MainNavigation.utils.js","sources":["../../../src/components/MainNavigation/MainNavigation.utils.ts"],"sourcesContent":["import type { Ref } from 'react';\nimport type {\n    MainNavigationItem,\n    MainNavigationLanguageCode,\n    MainNavigationLink,\n} from './MainNavigation.types';\n\nconst relativeNavigationBaseUrl = 'https://navigation.local';\nconst safeLinkProtocols = new Set(['http:', 'https:', 'mailto:', 'tel:']);\n\nexport const languageLinkAriaLabels: Record<MainNavigationLanguageCode, string> = {\n    fi: 'FI, siirry suomenkieliselle sivustolle',\n    en: 'EN, customer support in English',\n    sv: 'SV, kundsupport på svenska',\n};\n\nconst languageToggleAnnouncementBuilders: Record<\n    MainNavigationLanguageCode,\n    (currentCode: string) => string\n> = {\n    en: (currentCode) => `Change language. Current language ${currentCode}.`,\n    fi: (currentCode) => `Vaihda kieli. Nykyinen kieli ${currentCode}.`,\n    sv: (currentCode) => `Ändra språk. Aktuellt språk ${currentCode}.`,\n};\n\nconst languageAnnouncementOrder: readonly MainNavigationLanguageCode[] = ['en', 'fi', 'sv'];\n\n/**\n * Builds the toggle's screen-reader announcements: one per language present in the data, each in its\n * own language, with the current language code as the final token.\n */\nexport const getLanguageToggleAnnouncements = (\n    presentCodes: readonly MainNavigationLanguageCode[],\n    currentCode: MainNavigationLanguageCode,\n): ReadonlyArray<{ readonly lang: MainNavigationLanguageCode; readonly text: string }> => {\n    const upperCurrentCode = currentCode.toUpperCase();\n\n    return languageAnnouncementOrder\n        .filter((code) => presentCodes.includes(code))\n        .map((code) => ({\n            lang: code,\n            text: languageToggleAnnouncementBuilders[code](upperCurrentCode),\n        }));\n};\n\nexport type MainNavigationWindowLike = {\n    innerWidth: number;\n    matchMedia?: (query: string) => Pick<MediaQueryList, 'matches'>;\n    MSStream?: unknown;\n};\n\nexport type MainNavigationNavigatorLike = {\n    userAgent: string;\n};\n\nexport const isDesktopViewportByEnvironment = (\n    windowObject: MainNavigationWindowLike | undefined,\n) => {\n    if (windowObject == null) {\n        return false;\n    }\n\n    if (typeof windowObject.matchMedia === 'function') {\n        return windowObject.matchMedia('(min-width: 1024px)').matches;\n    }\n\n    return windowObject.innerWidth >= 1024;\n};\n\nexport const isMobileViewportByEnvironment = (\n    windowObject: MainNavigationWindowLike | undefined,\n) => {\n    if (windowObject == null) {\n        return false;\n    }\n\n    if (typeof windowObject.matchMedia === 'function') {\n        return windowObject.matchMedia('(max-width: 1023px)').matches;\n    }\n\n    return windowObject.innerWidth < 1024;\n};\n\nexport const isMobileIosDeviceByEnvironment = (\n    windowObject: MainNavigationWindowLike | undefined,\n    navigatorObject: MainNavigationNavigatorLike | undefined,\n) => {\n    if (windowObject == null || navigatorObject == null) {\n        return false;\n    }\n\n    const isIOS =\n        /iPad|iPhone|iPod/.test(navigatorObject.userAgent) && !('MSStream' in windowObject);\n    return isIOS && windowObject.innerWidth < 768;\n};\n\nexport const isExternalTarget = (target?: string) => target === '_blank';\n\nexport const isExternalLink = (link: Pick<MainNavigationLink, 'target' | 'external'>) => {\n    if (link.external != null) {\n        return link.external;\n    }\n\n    return isExternalTarget(link.target);\n};\n\nexport const getLinkRel = (target?: string) =>\n    isExternalTarget(target) ? 'noopener noreferrer' : undefined;\n\nexport const getLinkTarget = (target?: string) => (isExternalTarget(target) ? '_blank' : undefined);\n\nexport const normalizePathname = (value: string) => {\n    const path = value.split('?')[0].split('#')[0] || '/';\n    const withLeadingSlash = path.startsWith('/') ? path : `/${path}`;\n\n    if (withLeadingSlash === '/') {\n        return '/';\n    }\n\n    return withLeadingSlash.replace(/\\/+$/, '');\n};\n\nexport const toNavigableHref = (href: string) => {\n    const normalizedHref = href.trim();\n\n    if (normalizedHref === '') {\n        return '#';\n    }\n\n    const hrefWithProtocol = normalizedHref.toLowerCase().startsWith('www.')\n        ? `https://${normalizedHref}`\n        : normalizedHref;\n\n    if (hrefWithProtocol.startsWith('./') || hrefWithProtocol.startsWith('../')) {\n        return hrefWithProtocol;\n    }\n\n    if (\n        hrefWithProtocol.startsWith('/') ||\n        hrefWithProtocol.startsWith('#') ||\n        hrefWithProtocol.startsWith('?')\n    ) {\n        return hrefWithProtocol;\n    }\n\n    const hasScheme = /^[a-zA-Z][a-zA-Z\\d+\\-.]*:/.test(hrefWithProtocol);\n\n    if (!hasScheme) {\n        return hrefWithProtocol;\n    }\n\n    try {\n        const protocol = new URL(\n            hrefWithProtocol,\n            relativeNavigationBaseUrl,\n        ).protocol.toLowerCase();\n        if (safeLinkProtocols.has(protocol)) {\n            return hrefWithProtocol;\n        }\n    } catch {\n        return '#';\n    }\n\n    return '#';\n};\n\nexport const toPathname = (href?: string) => {\n    if (href == null || href.trim() === '' || href === '#') {\n        return null;\n    }\n\n    if (href.startsWith('/')) {\n        return normalizePathname(href);\n    }\n\n    try {\n        return normalizePathname(new URL(href).pathname);\n    } catch {\n        return normalizePathname(href);\n    }\n};\n\nexport const matchesPath = (currentPathname: string, linkPathname: string) => {\n    if (linkPathname === '/') {\n        return currentPathname === '/';\n    }\n\n    return currentPathname === linkPathname || currentPathname.startsWith(`${linkPathname}/`);\n};\n\nexport const isLinkInCurrentPath = (link: MainNavigationLink, currentPathname?: string) => {\n    if (link.current) {\n        return true;\n    }\n\n    if (isExternalLink(link)) {\n        return false;\n    }\n\n    if (currentPathname == null) {\n        return false;\n    }\n\n    const linkPathname = toPathname(toNavigableHref(link.href));\n\n    if (linkPathname == null) {\n        return false;\n    }\n\n    return matchesPath(normalizePathname(currentPathname), linkPathname);\n};\n\nexport const hasHref = (item: MainNavigationItem): item is MainNavigationItem & { href: string } =>\n    typeof item.href === 'string' && item.href.trim().length > 0;\n\nexport const isItemInCurrentPath = (item: MainNavigationItem, currentPathname?: string) => {\n    if (hasHref(item) && isLinkInCurrentPath(item, currentPathname)) {\n        return true;\n    }\n\n    if (\n        item.panel?.columns?.some((column) =>\n            column.links.some((link) => isLinkInCurrentPath(link, currentPathname)),\n        )\n    ) {\n        return true;\n    }\n\n    return (\n        item.panel?.featureLinks?.some((link) => isLinkInCurrentPath(link, currentPathname)) ??\n        false\n    );\n};\n\nexport const isLinkInCurrentPage = (link: MainNavigationLink, currentPathname?: string) => {\n    if (link.current) {\n        return true;\n    }\n\n    if (isExternalLink(link)) {\n        return false;\n    }\n\n    if (currentPathname == null) {\n        return false;\n    }\n\n    const linkPathname = toPathname(toNavigableHref(link.href));\n\n    if (linkPathname == null) {\n        return false;\n    }\n\n    return normalizePathname(currentPathname) === linkPathname;\n};\n\nconst isRefObject = <T>(target: Ref<T>): target is { current: T | null } =>\n    typeof target === 'object' && target !== null && 'current' in target;\n\nexport const assignRef = <T>(target: Ref<T> | undefined, value: T | null) => {\n    if (target == null) {\n        return;\n    }\n\n    if (typeof target === 'function') {\n        target(value);\n        return;\n    }\n\n    if (isRefObject(target)) {\n        target.current = value;\n    }\n};\n"],"names":[],"mappings":"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"}

package/dist/components/MainNavigation/index.d.ts

@@ -1,3 +1,3 @@
 export { MainNavigation } from './MainNavigation';
-export type { MainNavigationItem, MainNavigationLink, MainNavigationOrganizationLink, MainNavigationPanel, MainNavigationProps, MainNavigationSubmenuColumn, } from './MainNavigation.types';
+export type { MainNavigationItem, MainNavigationLanguageCode, MainNavigationLanguageLinkProps, MainNavigationLanguageOption, MainNavigationLink, MainNavigationOrganizationLink, MainNavigationPanel, MainNavigationProps, MainNavigationRenderLanguageLink, MainNavigationSubmenuColumn, } from './MainNavigation.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/MainNavigation/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MainNavigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EACR,kBAAkB,EAClB,kBAAkB,EAClB,8BAA8B,EAC9B,mBAAmB,EACnB,mBAAmB,EACnB,2BAA2B,GAC9B,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MainNavigation/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EACR,kBAAkB,EAClB,0BAA0B,EAC1B,+BAA+B,EAC/B,4BAA4B,EAC5B,kBAAkB,EAClB,8BAA8B,EAC9B,mBAAmB,EACnB,mBAAmB,EACnB,gCAAgC,EAChC,2BAA2B,GAC9B,MAAM,wBAAwB,CAAC"}

package/dist/components/Modal/Modal.cjs

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const icons = require("@dnanpm/icons");
+const elevation_module = require("../../styles/utils/elevation.module.css.cjs");
+const focus_module = require("../../styles/utils/focus.module.css.cjs");
+const Modal_module = require("./Modal.module.css.cjs");
+const useDialogDismissal = require("./useDialogDismissal.cjs");
+const useNativeDialog = require("./useNativeDialog.cjs");
+const cn = require("../../utils/cn/cn.cjs");
+const Modal = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  size = "medium",
+  headerStyle = "light",
+  fixedTitle = false,
+  alignToTop = false,
+  disableCloseOptions = false,
+  closeLabel = "Sulje dialogi",
+  keepMounted = false,
+  className,
+  ref,
+  onKeyDown,
+  onClick,
+  onPointerDown,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) => {
+  const titleId = react.useId();
+  const descriptionId = react.useId();
+  const { dialogRef, close, phase, isPresent } = useNativeDialog.useNativeDialog({
+    open: open ?? false,
+    keepMounted,
+    onOpenChange
+  });
+  const describedBy = [description ? descriptionId : void 0, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
+  const dialogDismissalProps = useDialogDismissal.useDialogDismissal({
+    close,
+    disableCloseOptions,
+    onClick,
+    onKeyDown,
+    onPointerDown
+  });
+  if (!isPresent) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "dialog",
+    {
+      ...props,
+      ref: (node) => {
+        dialogRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className: cn.cn(
+        Modal_module.default.modal,
+        elevation_module.default.elevationHigh,
+        Modal_module.default[`modal--${size}`],
+        Modal_module.default[`modal--${headerStyle}`],
+        { [Modal_module.default["modal--fixed-title"]]: fixedTitle },
+        { [Modal_module.default["modal--align-top"]]: alignToTop },
+        { [Modal_module.default["modal--opening"]]: phase !== "closing" },
+        { [Modal_module.default["modal--closing"]]: phase === "closing" },
+        className
+      ),
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy ?? (!ariaLabel && title ? titleId : void 0),
+      "aria-describedby": describedBy,
+      ...dialogDismissalProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Modal_module.default.modal__container, children: [
+          !disableCloseOptions && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: cn.cn(Modal_module.default.modal__close, focus_module.default.focusable),
+              "aria-label": closeLabel,
+              "data-dialog-autofocus": "true",
+              onClick: close,
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.Close, { "aria-hidden": "true" })
+            }
+          ),
+          (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Modal_module.default.modal__title, children: [
+            title && /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: Modal_module.default.modal__heading, children: title }),
+            description && /* @__PURE__ */ jsxRuntime.jsx("div", { id: descriptionId, className: Modal_module.default.modal__description, children: description })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module.default.modal__content, children })
+        ] }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module.default["modal__bottom-bar"], children: footer })
+      ]
+    }
+  );
+};
+exports.Modal = Modal;
+//# sourceMappingURL=Modal.cjs.map

package/dist/components/Modal/Modal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.cjs","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { Close } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './Modal.module.css';\nimport { useDialogDismissal } from './useDialogDismissal';\nimport { useNativeDialog } from './useNativeDialog';\nimport type { ModalProps } from './Modal.types';\n\nexport const Modal = ({\n    open,\n    onOpenChange,\n    title,\n    description,\n    children,\n    footer,\n    size = 'medium',\n    headerStyle = 'light',\n    fixedTitle = false,\n    alignToTop = false,\n    disableCloseOptions = false,\n    closeLabel = 'Sulje dialogi',\n    keepMounted = false,\n    className,\n    ref,\n    onKeyDown,\n    onClick,\n    onPointerDown,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    ...props\n}: ModalProps) => {\n    const titleId = useId();\n    const descriptionId = useId();\n    const { dialogRef, close, phase, isPresent } = useNativeDialog({\n        open: open ?? false,\n        keepMounted,\n        onOpenChange,\n    });\n    const describedBy =\n        [description ? descriptionId : undefined, ariaDescribedBy].filter(Boolean).join(' ') ||\n        undefined;\n    const dialogDismissalProps = useDialogDismissal({\n        close,\n        disableCloseOptions,\n        onClick,\n        onKeyDown,\n        onPointerDown,\n    });\n\n    if (!isPresent) return null;\n\n    return (\n        <dialog\n            {...props}\n            ref={(node) => {\n                dialogRef.current = node;\n                if (typeof ref === 'function') ref(node);\n                else if (ref) ref.current = node;\n            }}\n            className={cn(\n                styles.modal,\n                elevationStyles.elevationHigh,\n                styles[`modal--${size}`],\n                styles[`modal--${headerStyle}`],\n                { [styles['modal--fixed-title']]: fixedTitle },\n                { [styles['modal--align-top']]: alignToTop },\n                { [styles['modal--opening']]: phase !== 'closing' },\n                { [styles['modal--closing']]: phase === 'closing' },\n                className,\n            )}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy ?? (!ariaLabel && title ? titleId : undefined)}\n            aria-describedby={describedBy}\n            {...dialogDismissalProps}\n        >\n            <div className={styles.modal__container}>\n                {!disableCloseOptions && (\n                    <button\n                        type=\"button\"\n                        className={cn(styles.modal__close, focusStyles.focusable)}\n                        aria-label={closeLabel}\n                        data-dialog-autofocus=\"true\"\n                        onClick={close}\n                    >\n                        <Close aria-hidden=\"true\" />\n                    </button>\n                )}\n                {(title || description) && (\n                    <div className={styles.modal__title}>\n                        {title && (\n                            <h2 id={titleId} className={styles.modal__heading}>\n                                {title}\n                            </h2>\n                        )}\n                        {description && (\n                            <div id={descriptionId} className={styles.modal__description}>\n                                {description}\n                            </div>\n                        )}\n                    </div>\n                )}\n                <div className={styles.modal__content}>{children}</div>\n            </div>\n            {footer && <div className={styles['modal__bottom-bar']}>{footer}</div>}\n        </dialog>\n    );\n};\n"],"names":["useId","useNativeDialog","useDialogDismissal","jsxs","cn","styles","elevationStyles","jsx","focusStyles","Close"],"mappings":"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"}

package/dist/components/Modal/Modal.css

@@ -0,0 +1,204 @@
+@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._modal_ewl1e_1 {
+    --_modal-transition-duration-open: 400ms;
+    --_modal-transition-duration-close: 200ms;
+    display: flex;
+    flex-direction: column;
+    width: min(90vw, 768px);
+    max-width: calc(100vw - var(--spacing-space-40));
+    min-height: 33.333dvh;
+    max-height: 90dvh;
+    margin: auto;
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-semantic-md);
+    background: var(--color-semantic-surface-base);
+    color: var(--color-semantic-foreground-default);
+    font: var(--typography-body-md);
+    opacity: 1;
+    transition: opacity var(--_modal-transition-duration-close) ease;
+}
+
+._modal--align-top_ewl1e_21 {
+    margin-block: 5dvh auto;
+}
+
+._modal_ewl1e_1:not([open]) {
+    display: none;
+}
+
+._modal_ewl1e_1::backdrop {
+    background: var(--color-semantic-utility-overlay-strong);
+    opacity: 0;
+    transition-property: opacity, overlay;
+    transition-duration: var(--_modal-transition-duration-close);
+    transition-timing-function: ease;
+    transition-behavior: allow-discrete;
+}
+
+._modal--small_ewl1e_38 {
+    width: 480px;
+    min-height: auto;
+}
+._modal--medium_ewl1e_42 {
+    width: 768px;
+}
+._modal--large_ewl1e_45 {
+    width: 960px;
+}
+
+._modal--opening_ewl1e_49 {
+    animation: _modal-open_ewl1e_1 var(--_modal-transition-duration-open) ease both;
+}
+._modal--closing_ewl1e_52 {
+    animation: _modal-close_ewl1e_1 var(--_modal-transition-duration-close) ease both;
+}
+._modal--opening_ewl1e_49::backdrop {
+    opacity: 1;
+    transition-duration: var(--_modal-transition-duration-open);
+}
+._modal--closing_ewl1e_52::backdrop {
+    opacity: 0;
+    transition-duration: var(--_modal-transition-duration-close);
+}
+
+._modal__container_ewl1e_64 {
+    display: flex;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    overflow: auto;
+}
+
+._modal--fixed-title_ewl1e_72 ._modal__container_ewl1e_64 {
+    overflow: hidden;
+}
+
+._modal__title_ewl1e_76 {
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    gap: var(--spacing-space-4);
+    padding: var(--spacing-space-20) var(--spacing-space-40) var(--spacing-space-20)
+        var(--spacing-space-20);
+    background: var(--color-semantic-surface-base);
+}
+
+._modal__heading_ewl1e_86 {
+    margin: 0;
+    font: var(--typography-heading-md);
+}
+
+._modal--small_ewl1e_38 ._modal__heading_ewl1e_86 {
+    font: var(--typography-heading-sm);
+}
+._modal__description_ewl1e_94 {
+    margin: 0;
+}
+
+._modal__content_ewl1e_98 {
+    flex: 1 1 auto;
+    padding: var(--spacing-space-20);
+    overflow-wrap: anywhere;
+}
+
+._modal--fixed-title_ewl1e_72 ._modal__content_ewl1e_98 {
+    overflow: auto;
+}
+._modal__container_ewl1e_64:not(:has(._modal__title_ewl1e_76)) ._modal__content_ewl1e_98 {
+    padding-top: var(--spacing-space-40);
+}
+
+._modal__close_ewl1e_111 {
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    right: 0;
+    display: grid;
+    width: 40px;
+    height: 40px;
+    place-items: center;
+    padding: 0;
+    border: none;
+    border-bottom-left-radius: var(--radius-semantic-md);
+    background: var(--color-semantic-surface-neutral-mid);
+    color: var(--color-semantic-foreground-secondary-strong);
+    cursor: pointer;
+}
+
+._modal__close_ewl1e_111 svg {
+    width: 24px;
+    height: 24px;
+}
+._modal__bottom-bar_ewl1e_132 {
+    flex: 0 0 auto;
+    padding: var(--spacing-space-8) var(--spacing-space-20) var(--spacing-space-20);
+}
+
+._modal--dark_ewl1e_137 ._modal__title_ewl1e_76 {
+    background: var(--color-semantic-surface-secondary-strong);
+    color: var(--color-semantic-foreground-inverse);
+}
+
+._modal--dark_ewl1e_137 ._modal__close_ewl1e_111 {
+    background: var(--color-semantic-surface-secondary-mid);
+    color: var(--color-semantic-foreground-inverse);
+}
+
+@keyframes _modal-open_ewl1e_1 {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+@keyframes _modal-close_ewl1e_1 {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
+}
+
+._modal--opening_ewl1e_49::backdrop {
+    @starting-style {
+        opacity: 0;
+    }
+}
+
+@media (max-width: 359px) {
+    ._modal_ewl1e_1 {
+        width: 100vw;
+        max-width: 100vw;
+        height: 100dvh;
+        max-height: 100dvh;
+        border-radius: 0;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    ._modal_ewl1e_1,
+    ._modal--opening_ewl1e_49,
+    ._modal--closing_ewl1e_52,
+    ._modal_ewl1e_1::backdrop {
+        animation: none;
+        transition: none;
+    }
+}
+
+@media (forced-colors: active) {
+    ._modal_ewl1e_1 {
+        border: 2px solid CanvasText;
+        box-shadow: none;
+    }
+    ._modal_ewl1e_1::backdrop {
+        background: Canvas;
+        opacity: 0.7;
+    }
+    ._modal__close_ewl1e_111 {
+        border: 1px solid ButtonBorder;
+        background: ButtonFace;
+        color: ButtonText;
+    }
+} }

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

@@ -0,0 +1,3 @@
+import { ModalProps } from './Modal.types';
+export declare const Modal: ({ open, onOpenChange, title, description, children, footer, size, headerStyle, fixedTitle, alignToTop, disableCloseOptions, closeLabel, keepMounted, className, ref, onKeyDown, onClick, onPointerDown, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: ModalProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=Modal.d.ts.map

package/dist/components/Modal/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,eAAO,MAAM,KAAK,GAAI,qTAuBnB,UAAU,mDA4EZ,CAAC"}

package/dist/components/Modal/Modal.js

@@ -0,0 +1,101 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { Close } from "@dnanpm/icons";
+import elevationStyles from "../../styles/utils/elevation.module.css.js";
+import focusStyles from "../../styles/utils/focus.module.css.js";
+import styles from "./Modal.module.css.js";
+import { useDialogDismissal } from "./useDialogDismissal.js";
+import { useNativeDialog } from "./useNativeDialog.js";
+import { cn } from "../../utils/cn/cn.js";
+const Modal = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  size = "medium",
+  headerStyle = "light",
+  fixedTitle = false,
+  alignToTop = false,
+  disableCloseOptions = false,
+  closeLabel = "Sulje dialogi",
+  keepMounted = false,
+  className,
+  ref,
+  onKeyDown,
+  onClick,
+  onPointerDown,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  ...props
+}) => {
+  const titleId = useId();
+  const descriptionId = useId();
+  const { dialogRef, close, phase, isPresent } = useNativeDialog({
+    open: open ?? false,
+    keepMounted,
+    onOpenChange
+  });
+  const describedBy = [description ? descriptionId : void 0, ariaDescribedBy].filter(Boolean).join(" ") || void 0;
+  const dialogDismissalProps = useDialogDismissal({
+    close,
+    disableCloseOptions,
+    onClick,
+    onKeyDown,
+    onPointerDown
+  });
+  if (!isPresent) return null;
+  return /* @__PURE__ */ jsxs(
+    "dialog",
+    {
+      ...props,
+      ref: (node) => {
+        dialogRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      className: cn(
+        styles.modal,
+        elevationStyles.elevationHigh,
+        styles[`modal--${size}`],
+        styles[`modal--${headerStyle}`],
+        { [styles["modal--fixed-title"]]: fixedTitle },
+        { [styles["modal--align-top"]]: alignToTop },
+        { [styles["modal--opening"]]: phase !== "closing" },
+        { [styles["modal--closing"]]: phase === "closing" },
+        className
+      ),
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy ?? (!ariaLabel && title ? titleId : void 0),
+      "aria-describedby": describedBy,
+      ...dialogDismissalProps,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.modal__container, children: [
+          !disableCloseOptions && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cn(styles.modal__close, focusStyles.focusable),
+              "aria-label": closeLabel,
+              "data-dialog-autofocus": "true",
+              onClick: close,
+              children: /* @__PURE__ */ jsx(Close, { "aria-hidden": "true" })
+            }
+          ),
+          (title || description) && /* @__PURE__ */ jsxs("div", { className: styles.modal__title, children: [
+            title && /* @__PURE__ */ jsx("h2", { id: titleId, className: styles.modal__heading, children: title }),
+            description && /* @__PURE__ */ jsx("div", { id: descriptionId, className: styles.modal__description, children: description })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.modal__content, children })
+        ] }),
+        footer && /* @__PURE__ */ jsx("div", { className: styles["modal__bottom-bar"], children: footer })
+      ]
+    }
+  );
+};
+export {
+  Modal
+};
+//# sourceMappingURL=Modal.js.map

package/dist/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { Close } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport focusStyles from '../../styles/utils/focus.module.css';\nimport styles from './Modal.module.css';\nimport { useDialogDismissal } from './useDialogDismissal';\nimport { useNativeDialog } from './useNativeDialog';\nimport type { ModalProps } from './Modal.types';\n\nexport const Modal = ({\n    open,\n    onOpenChange,\n    title,\n    description,\n    children,\n    footer,\n    size = 'medium',\n    headerStyle = 'light',\n    fixedTitle = false,\n    alignToTop = false,\n    disableCloseOptions = false,\n    closeLabel = 'Sulje dialogi',\n    keepMounted = false,\n    className,\n    ref,\n    onKeyDown,\n    onClick,\n    onPointerDown,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n    ...props\n}: ModalProps) => {\n    const titleId = useId();\n    const descriptionId = useId();\n    const { dialogRef, close, phase, isPresent } = useNativeDialog({\n        open: open ?? false,\n        keepMounted,\n        onOpenChange,\n    });\n    const describedBy =\n        [description ? descriptionId : undefined, ariaDescribedBy].filter(Boolean).join(' ') ||\n        undefined;\n    const dialogDismissalProps = useDialogDismissal({\n        close,\n        disableCloseOptions,\n        onClick,\n        onKeyDown,\n        onPointerDown,\n    });\n\n    if (!isPresent) return null;\n\n    return (\n        <dialog\n            {...props}\n            ref={(node) => {\n                dialogRef.current = node;\n                if (typeof ref === 'function') ref(node);\n                else if (ref) ref.current = node;\n            }}\n            className={cn(\n                styles.modal,\n                elevationStyles.elevationHigh,\n                styles[`modal--${size}`],\n                styles[`modal--${headerStyle}`],\n                { [styles['modal--fixed-title']]: fixedTitle },\n                { [styles['modal--align-top']]: alignToTop },\n                { [styles['modal--opening']]: phase !== 'closing' },\n                { [styles['modal--closing']]: phase === 'closing' },\n                className,\n            )}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy ?? (!ariaLabel && title ? titleId : undefined)}\n            aria-describedby={describedBy}\n            {...dialogDismissalProps}\n        >\n            <div className={styles.modal__container}>\n                {!disableCloseOptions && (\n                    <button\n                        type=\"button\"\n                        className={cn(styles.modal__close, focusStyles.focusable)}\n                        aria-label={closeLabel}\n                        data-dialog-autofocus=\"true\"\n                        onClick={close}\n                    >\n                        <Close aria-hidden=\"true\" />\n                    </button>\n                )}\n                {(title || description) && (\n                    <div className={styles.modal__title}>\n                        {title && (\n                            <h2 id={titleId} className={styles.modal__heading}>\n                                {title}\n                            </h2>\n                        )}\n                        {description && (\n                            <div id={descriptionId} className={styles.modal__description}>\n                                {description}\n                            </div>\n                        )}\n                    </div>\n                )}\n                <div className={styles.modal__content}>{children}</div>\n            </div>\n            {footer && <div className={styles['modal__bottom-bar']}>{footer}</div>}\n        </dialog>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AAUO,MAAM,QAAQ,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,cAAc;AAAA,EACd,aAAa;AAAA,EACb,aAAa;AAAA,EACb,sBAAsB;AAAA,EACtB,aAAa;AAAA,EACb,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,GAAG;AACP,MAAkB;AACd,QAAM,UAAU,MAAA;AAChB,QAAM,gBAAgB,MAAA;AACtB,QAAM,EAAE,WAAW,OAAO,OAAO,UAAA,IAAc,gBAAgB;AAAA,IAC3D,MAAM,QAAQ;AAAA,IACd;AAAA,IACA;AAAA,EAAA,CACH;AACD,QAAM,cACF,CAAC,cAAc,gBAAgB,QAAW,eAAe,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KACnF;AACJ,QAAM,uBAAuB,mBAAmB;AAAA,IAC5C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACH;AAED,MAAI,CAAC,UAAW,QAAO;AAEvB,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,KAAK,CAAC,SAAS;AACX,kBAAU,UAAU;AACpB,YAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,iBAC9B,SAAS,UAAU;AAAA,MAChC;AAAA,MACA,WAAW;AAAA,QACP,OAAO;AAAA,QACP,gBAAgB;AAAA,QAChB,OAAO,UAAU,IAAI,EAAE;AAAA,QACvB,OAAO,UAAU,WAAW,EAAE;AAAA,QAC9B,EAAE,CAAC,OAAO,oBAAoB,CAAC,GAAG,WAAA;AAAA,QAClC,EAAE,CAAC,OAAO,kBAAkB,CAAC,GAAG,WAAA;AAAA,QAChC,EAAE,CAAC,OAAO,gBAAgB,CAAC,GAAG,UAAU,UAAA;AAAA,QACxC,EAAE,CAAC,OAAO,gBAAgB,CAAC,GAAG,UAAU,UAAA;AAAA,QACxC;AAAA,MAAA;AAAA,MAEJ,cAAY;AAAA,MACZ,mBAAiB,mBAAmB,CAAC,aAAa,QAAQ,UAAU;AAAA,MACpE,oBAAkB;AAAA,MACjB,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,kBAClB,UAAA;AAAA,UAAA,CAAC,uBACE;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAK;AAAA,cACL,WAAW,GAAG,OAAO,cAAc,YAAY,SAAS;AAAA,cACxD,cAAY;AAAA,cACZ,yBAAsB;AAAA,cACtB,SAAS;AAAA,cAET,UAAA,oBAAC,OAAA,EAAM,eAAY,OAAA,CAAO;AAAA,YAAA;AAAA,UAAA;AAAA,WAGhC,SAAS,gBACP,qBAAC,OAAA,EAAI,WAAW,OAAO,cAClB,UAAA;AAAA,YAAA,6BACI,MAAA,EAAG,IAAI,SAAS,WAAW,OAAO,gBAC9B,UAAA,MAAA,CACL;AAAA,YAEH,mCACI,OAAA,EAAI,IAAI,eAAe,WAAW,OAAO,oBACrC,UAAA,YAAA,CACL;AAAA,UAAA,GAER;AAAA,UAEJ,oBAAC,OAAA,EAAI,WAAW,OAAO,gBAAiB,SAAA,CAAS;AAAA,QAAA,GACrD;AAAA,QACC,UAAU,oBAAC,OAAA,EAAI,WAAW,OAAO,mBAAmB,GAAI,UAAA,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5E;"}

package/dist/components/Modal/Modal.module.css.cjs

@@ -0,0 +1,39 @@
+require('./Modal.css');
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const modal = "_modal_ewl1e_1";
+const modal__container = "_modal__container_ewl1e_64";
+const modal__title = "_modal__title_ewl1e_76";
+const modal__heading = "_modal__heading_ewl1e_86";
+const modal__description = "_modal__description_ewl1e_94";
+const modal__content = "_modal__content_ewl1e_98";
+const modal__close = "_modal__close_ewl1e_111";
+const styles = {
+  modal,
+  "modal--align-top": "_modal--align-top_ewl1e_21",
+  "modal--small": "_modal--small_ewl1e_38",
+  "modal--medium": "_modal--medium_ewl1e_42",
+  "modal--large": "_modal--large_ewl1e_45",
+  "modal--opening": "_modal--opening_ewl1e_49",
+  "modal-open": "_modal-open_ewl1e_1",
+  "modal--closing": "_modal--closing_ewl1e_52",
+  "modal-close": "_modal-close_ewl1e_1",
+  modal__container,
+  "modal--fixed-title": "_modal--fixed-title_ewl1e_72",
+  modal__title,
+  modal__heading,
+  modal__description,
+  modal__content,
+  modal__close,
+  "modal__bottom-bar": "_modal__bottom-bar_ewl1e_132",
+  "modal--dark": "_modal--dark_ewl1e_137"
+};
+exports.default = styles;
+exports.modal = modal;
+exports.modal__close = modal__close;
+exports.modal__container = modal__container;
+exports.modal__content = modal__content;
+exports.modal__description = modal__description;
+exports.modal__heading = modal__heading;
+exports.modal__title = modal__title;
+//# sourceMappingURL=Modal.module.css.cjs.map

package/dist/components/Modal/Modal.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Modal/Modal.module.css.js

@@ -0,0 +1,39 @@
+import './Modal.css';
+const modal = "_modal_ewl1e_1";
+const modal__container = "_modal__container_ewl1e_64";
+const modal__title = "_modal__title_ewl1e_76";
+const modal__heading = "_modal__heading_ewl1e_86";
+const modal__description = "_modal__description_ewl1e_94";
+const modal__content = "_modal__content_ewl1e_98";
+const modal__close = "_modal__close_ewl1e_111";
+const styles = {
+  modal,
+  "modal--align-top": "_modal--align-top_ewl1e_21",
+  "modal--small": "_modal--small_ewl1e_38",
+  "modal--medium": "_modal--medium_ewl1e_42",
+  "modal--large": "_modal--large_ewl1e_45",
+  "modal--opening": "_modal--opening_ewl1e_49",
+  "modal-open": "_modal-open_ewl1e_1",
+  "modal--closing": "_modal--closing_ewl1e_52",
+  "modal-close": "_modal-close_ewl1e_1",
+  modal__container,
+  "modal--fixed-title": "_modal--fixed-title_ewl1e_72",
+  modal__title,
+  modal__heading,
+  modal__description,
+  modal__content,
+  modal__close,
+  "modal__bottom-bar": "_modal__bottom-bar_ewl1e_132",
+  "modal--dark": "_modal--dark_ewl1e_137"
+};
+export {
+  styles as default,
+  modal,
+  modal__close,
+  modal__container,
+  modal__content,
+  modal__description,
+  modal__heading,
+  modal__title
+};
+//# sourceMappingURL=Modal.module.css.js.map

package/dist/components/Modal/Modal.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}