npm - @dnanpm/ui-components - Versions diffs - 0.9.0 → 0.10.0 - Mend

@dnanpm/ui-components 0.9.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (240) hide show

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

	@@ -1 +1 @@
1	- {"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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"}
1	+ {"version":3,"file":"MainNavigation.utils.js","sources":["../../../src/components/MainNavigation/MainNavigation.utils.ts"],"sourcesContent":["import type { Ref } from 'react';\nimport { LayoutSemanticBreakpointDesktop } from '@dnanpm/design-tokens';\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:']);\nconst desktopBreakpointPx = Number.parseFloat(LayoutSemanticBreakpointDesktop);\n\nexport const desktopMinWidthMediaQuery = `(min-width: ${desktopBreakpointPx}px)`;\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(desktopMinWidthMediaQuery).matches;\n }\n\n return windowObject.innerWidth >= desktopBreakpointPx;\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 // Complement of the desktop query, so no fractional width falls between the two.\n return !windowObject.matchMedia(desktopMinWidthMediaQuery).matches;\n }\n\n return windowObject.innerWidth < desktopBreakpointPx;\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/Modal/Modal.cjs CHANGED Viewed

@@ -3,8 +3,7 @@ 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 index = require("../../styles/utils/index.cjs");
 const Modal_module = require("./Modal.module.css.cjs");
 const useDialogDismissal = require("./useDialogDismissal.cjs");
 const useNativeDialog = require("./useNativeDialog.cjs");
@@ -53,6 +52,7 @@ const Modal = ({
     "dialog",
     {
       ...props,
+      "data-color-scheme": "light",
       ref: (node) => {
         dialogRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -60,7 +60,7 @@ const Modal = ({
       },
       className: cn.cn(
         Modal_module.default.modal,
-        elevation_module.default.elevationHigh,
+        index.elevationStyles.elevationHigh,
         Modal_module.default[`modal--${size}`],
         Modal_module.default[`modal--${headerStyle}`],
         { [Modal_module.default["modal--fixed-title"]]: fixedTitle },
@@ -79,16 +79,24 @@ const Modal = ({
             "button",
             {
               type: "button",
-              className: cn.cn(Modal_module.default.modal__close, focus_module.default.focusable),
+              className: cn.cn(Modal_module.default.modal__close, index.focusStyles.focusable),
               "aria-label": closeLabel,
               "data-dialog-autofocus": "true",
+              "data-color-scheme": headerStyle,
               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 || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Modal_module.default.modal__title, "data-color-scheme": headerStyle, 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 })
+            description && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                id: descriptionId,
+                className: cn.cn(Modal_module.default.modal__description, "dds-prose"),
+                children: description
+              }
+            )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module.default.modal__content, children })
         ] }),

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

	@@ -1 +1 @@
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":"~~;;;;;;;;;;;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,UAAUA,MAAAA,MAAA;AAChB,QAAM,gBAAgBA,MAAAA,MAAA;AACtB,QAAM,EAAE,WAAW,OAAO,OAAO,UAAA,IAAcC,gBAAAA,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,uBAAuBC,mBAAAA,mBAAmB;AAAA,IAC5C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACH;AAED,MAAI,CAAC,UAAW,QAAO;AAEvB,SACIC,2BAAAA;AAAAA,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,WAAWC,GAAAA;AAAAA,QACPC,aAAAA,QAAO;AAAA,QACPC,~~iBAAAA~~,~~QAAgB~~;AAAA,QAChBD,aAAAA,QAAO,UAAU,IAAI,EAAE;AAAA,QACvBA,aAAAA,QAAO,UAAU,WAAW,EAAE;AAAA,QAC9B,EAAE,CAACA,aAAAA,QAAO,oBAAoB,CAAC,GAAG,WAAA;AAAA,QAClC,EAAE,CAACA,aAAAA,QAAO,kBAAkB,CAAC,GAAG,WAAA;AAAA,QAChC,EAAE,CAACA,aAAAA,QAAO,gBAAgB,CAAC,GAAG,UAAU,UAAA;AAAA,QACxC,EAAE,CAACA,aAAAA,QAAO,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,QAAAF,2BAAAA,KAAC,OAAA,EAAI,WAAWE,aAAAA,QAAO,kBAClB,UAAA;AAAA,UAAA,CAAC,uBACEE,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAK;AAAA,cACL,WAAWH,GAAAA,GAAGC,aAAAA,QAAO,cAAcG,~~aAAAA~~,~~QAAY~~,SAAS;AAAA,cACxD,cAAY;AAAA,cACZ,yBAAsB;AAAA,cACtB,SAAS;AAAA,cAET,UAAAD,2BAAAA,IAACE,MAAAA,OAAA,EAAM,eAAY,OAAA,CAAO;AAAA,YAAA;AAAA,UAAA;AAAA,WAGhC,SAAS,gBACPN,~~gCAAC~~,OAAA,EAAI,WAAWE,aAAAA,QAAO,~~cAClB~~,UAAA;AAAA,YAAA,wCACI,MAAA,EAAG,IAAI,SAAS,WAAWA,qBAAO,gBAC9B,UAAA,MAAA,CACL;AAAA,YAEH,~~8CACI~~,~~OAAA~~,~~EAAI~~,IAAI,~~eAAe~~,~~WAAWA~~,qBAAO,~~oBACrC~~,UAAA,YAAA~~,CACL~~;AAAA,~~UAAA~~,GAER;AAAA,UAEJE,2BAAAA,IAAC,OAAA,EAAI,WAAWF,aAAAA,QAAO,gBAAiB,SAAA,CAAS;AAAA,QAAA,GACrD;AAAA,QACC,UAAUE,2BAAAA,IAAC,OAAA,EAAI,WAAWF,aAAAA,QAAO,mBAAmB,GAAI,UAAA,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5E;;"}
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, focusStyles } from '../../styles/utils';\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 data-color-scheme=\"light\"\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 data-color-scheme={headerStyle}\n onClick={close}\n >\n <Close aria-hidden=\"true\" />\n </button>\n )}\n {(title \|\| description) && (\n <div className={styles.modal__title} data-color-scheme={headerStyle}>\n {title && (\n <h2 id={titleId} className={styles.modal__heading}>\n {title}\n </h2>\n )}\n {description && (\n <div\n id={descriptionId}\n className={cn(styles.modal__description, 'dds-prose')}\n >\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":";;;;;;;;;;AASO,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,UAAUA,MAAAA,MAAA;AAChB,QAAM,gBAAgBA,MAAAA,MAAA;AACtB,QAAM,EAAE,WAAW,OAAO,OAAO,UAAA,IAAcC,gBAAAA,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,uBAAuBC,mBAAAA,mBAAmB;AAAA,IAC5C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACH;AAED,MAAI,CAAC,UAAW,QAAO;AAEvB,SACIC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,qBAAkB;AAAA,MAClB,KAAK,CAAC,SAAS;AACX,kBAAU,UAAU;AACpB,YAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,iBAC9B,SAAS,UAAU;AAAA,MAChC;AAAA,MACA,WAAWC,GAAAA;AAAAA,QACPC,aAAAA,QAAO;AAAA,QACPC,MAAAA,gBAAgB;AAAA,QAChBD,aAAAA,QAAO,UAAU,IAAI,EAAE;AAAA,QACvBA,aAAAA,QAAO,UAAU,WAAW,EAAE;AAAA,QAC9B,EAAE,CAACA,aAAAA,QAAO,oBAAoB,CAAC,GAAG,WAAA;AAAA,QAClC,EAAE,CAACA,aAAAA,QAAO,kBAAkB,CAAC,GAAG,WAAA;AAAA,QAChC,EAAE,CAACA,aAAAA,QAAO,gBAAgB,CAAC,GAAG,UAAU,UAAA;AAAA,QACxC,EAAE,CAACA,aAAAA,QAAO,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,QAAAF,2BAAAA,KAAC,OAAA,EAAI,WAAWE,aAAAA,QAAO,kBAClB,UAAA;AAAA,UAAA,CAAC,uBACEE,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAK;AAAA,cACL,WAAWH,GAAAA,GAAGC,aAAAA,QAAO,cAAcG,MAAAA,YAAY,SAAS;AAAA,cACxD,cAAY;AAAA,cACZ,yBAAsB;AAAA,cACtB,qBAAmB;AAAA,cACnB,SAAS;AAAA,cAET,UAAAD,2BAAAA,IAACE,MAAAA,OAAA,EAAM,eAAY,OAAA,CAAO;AAAA,YAAA;AAAA,UAAA;AAAA,WAGhC,SAAS,gBACPN,2BAAAA,KAAC,OAAA,EAAI,WAAWE,aAAAA,QAAO,cAAc,qBAAmB,aACnD,UAAA;AAAA,YAAA,wCACI,MAAA,EAAG,IAAI,SAAS,WAAWA,qBAAO,gBAC9B,UAAA,MAAA,CACL;AAAA,YAEH,eACGE,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACG,IAAI;AAAA,gBACJ,WAAWH,GAAAA,GAAGC,qBAAO,oBAAoB,WAAW;AAAA,gBAEnD,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACL,GAER;AAAA,UAEJE,2BAAAA,IAAC,OAAA,EAAI,WAAWF,aAAAA,QAAO,gBAAiB,SAAA,CAAS;AAAA,QAAA,GACrD;AAAA,QACC,UAAUE,2BAAAA,IAAC,OAAA,EAAI,WAAWF,aAAAA,QAAO,mBAAmB,GAAI,UAAA,OAAA,CAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5E;;"}

package/dist/components/Modal/Modal.css CHANGED Viewed

@@ -1,4 +1,4 @@
-@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._modal_ewl1e_1 {
+@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._modal_9bjhv_1 {
     --_modal-transition-duration-open: 400ms;
     --_modal-transition-duration-close: 200ms;
     display: flex;
@@ -18,15 +18,15 @@
     transition: opacity var(--_modal-transition-duration-close) ease;
 }
-._modal--align-top_ewl1e_21 {
+._modal--align-top_9bjhv_21 {
     margin-block: 5dvh auto;
 }
-._modal_ewl1e_1:not([open]) {
+._modal_9bjhv_1:not([open]) {
     display: none;
 }
-._modal_ewl1e_1::backdrop {
+._modal_9bjhv_1::backdrop {
     background: var(--color-semantic-utility-overlay-strong);
     opacity: 0;
     transition-property: opacity, overlay;
@@ -35,33 +35,33 @@
     transition-behavior: allow-discrete;
 }
-._modal--small_ewl1e_38 {
+._modal--small_9bjhv_38 {
     width: 480px;
     min-height: auto;
 }
-._modal--medium_ewl1e_42 {
+._modal--medium_9bjhv_42 {
     width: 768px;
 }
-._modal--large_ewl1e_45 {
+._modal--large_9bjhv_45 {
     width: 960px;
 }
-._modal--opening_ewl1e_49 {
-    animation: _modal-open_ewl1e_1 var(--_modal-transition-duration-open) ease both;
+._modal--opening_9bjhv_49 {
+    animation: _modal-open_9bjhv_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--closing_9bjhv_52 {
+    animation: _modal-close_9bjhv_1 var(--_modal-transition-duration-close) ease both;
 }
-._modal--opening_ewl1e_49::backdrop {
+._modal--opening_9bjhv_49::backdrop {
     opacity: 1;
     transition-duration: var(--_modal-transition-duration-open);
 }
-._modal--closing_ewl1e_52::backdrop {
+._modal--closing_9bjhv_52::backdrop {
     opacity: 0;
     transition-duration: var(--_modal-transition-duration-close);
 }
-._modal__container_ewl1e_64 {
+._modal__container_9bjhv_64 {
     display: flex;
     min-height: 0;
     flex: 1 1 auto;
@@ -69,11 +69,11 @@
     overflow: auto;
 }
-._modal--fixed-title_ewl1e_72 ._modal__container_ewl1e_64 {
+._modal--fixed-title_9bjhv_72 ._modal__container_9bjhv_64 {
     overflow: hidden;
 }
-._modal__title_ewl1e_76 {
+._modal__title_9bjhv_76 {
     display: flex;
     flex: 0 0 auto;
     flex-direction: column;
@@ -83,32 +83,32 @@
     background: var(--color-semantic-surface-base);
 }
-._modal__heading_ewl1e_86 {
+._modal__heading_9bjhv_86 {
     margin: 0;
     font: var(--typography-heading-md);
 }
-._modal--small_ewl1e_38 ._modal__heading_ewl1e_86 {
+._modal--small_9bjhv_38 ._modal__heading_9bjhv_86 {
     font: var(--typography-heading-sm);
 }
-._modal__description_ewl1e_94 {
+._modal__description_9bjhv_94 {
     margin: 0;
 }
-._modal__content_ewl1e_98 {
+._modal__content_9bjhv_98 {
     flex: 1 1 auto;
     padding: var(--spacing-space-20);
     overflow-wrap: anywhere;
 }
-._modal--fixed-title_ewl1e_72 ._modal__content_ewl1e_98 {
+._modal--fixed-title_9bjhv_72 ._modal__content_9bjhv_98 {
     overflow: auto;
 }
-._modal__container_ewl1e_64:not(:has(._modal__title_ewl1e_76)) ._modal__content_ewl1e_98 {
+._modal__container_9bjhv_64:not(:has(._modal__title_9bjhv_76)) ._modal__content_9bjhv_98 {
     padding-top: var(--spacing-space-40);
 }
-._modal__close_ewl1e_111 {
+._modal__close_9bjhv_111 {
     position: absolute;
     z-index: 1;
     top: 0;
@@ -125,26 +125,26 @@
     cursor: pointer;
 }
-._modal__close_ewl1e_111 svg {
+._modal__close_9bjhv_111 svg {
     width: 24px;
     height: 24px;
 }
-._modal__bottom-bar_ewl1e_132 {
+._modal__bottom-bar_9bjhv_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 {
+._modal--dark_9bjhv_137 ._modal__title_9bjhv_76 {
     background: var(--color-semantic-surface-secondary-strong);
     color: var(--color-semantic-foreground-inverse);
 }
-._modal--dark_ewl1e_137 ._modal__close_ewl1e_111 {
+._modal--dark_9bjhv_137 ._modal__close_9bjhv_111 {
     background: var(--color-semantic-surface-secondary-mid);
     color: var(--color-semantic-foreground-inverse);
 }
-@keyframes _modal-open_ewl1e_1 {
+@keyframes _modal-open_9bjhv_1 {
     from {
         opacity: 0;
     }
@@ -152,7 +152,7 @@
         opacity: 1;
     }
 }
-@keyframes _modal-close_ewl1e_1 {
+@keyframes _modal-close_9bjhv_1 {
     from {
         opacity: 1;
     }
@@ -161,14 +161,14 @@
     }
 }
-._modal--opening_ewl1e_49::backdrop {
+._modal--opening_9bjhv_49::backdrop {
     @starting-style {
         opacity: 0;
     }
 }
-@media (max-width: 359px) {
-    ._modal_ewl1e_1 {
+@media (width < 360px) {
+    ._modal_9bjhv_1 {
         width: 100vw;
         max-width: 100vw;
         height: 100dvh;
@@ -178,27 +178,31 @@
 }
 @media (prefers-reduced-motion: reduce) {
-    ._modal_ewl1e_1,
-    ._modal--opening_ewl1e_49,
-    ._modal--closing_ewl1e_52,
-    ._modal_ewl1e_1::backdrop {
+    ._modal_9bjhv_1,
+    ._modal--opening_9bjhv_49,
+    ._modal--closing_9bjhv_52,
+    ._modal_9bjhv_1::backdrop {
         animation: none;
         transition: none;
     }
 }
 @media (forced-colors: active) {
-    ._modal_ewl1e_1 {
+    ._modal_9bjhv_1 {
         border: 2px solid CanvasText;
         box-shadow: none;
     }
-    ._modal_ewl1e_1::backdrop {
+    ._modal_9bjhv_1::backdrop {
         background: Canvas;
         opacity: 0.7;
     }
-    ._modal__close_ewl1e_111 {
+    ._modal__close_9bjhv_111 {
         border: 1px solid ButtonBorder;
         background: ButtonFace;
         color: ButtonText;
     }
-} }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */ }

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAEhD,eAAO,MAAM,KAAK,GAAI,qTAuBnB,UAAU,mDAiFZ,CAAC"}

package/dist/components/Modal/Modal.js CHANGED Viewed

@@ -1,8 +1,7 @@
 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 { focusStyles, elevationStyles } from "../../styles/utils/index.js";
 import styles from "./Modal.module.css.js";
 import { useDialogDismissal } from "./useDialogDismissal.js";
 import { useNativeDialog } from "./useNativeDialog.js";
@@ -51,6 +50,7 @@ const Modal = ({
     "dialog",
     {
       ...props,
+      "data-color-scheme": "light",
       ref: (node) => {
         dialogRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -80,13 +80,21 @@ const Modal = ({
               className: cn(styles.modal__close, focusStyles.focusable),
               "aria-label": closeLabel,
               "data-dialog-autofocus": "true",
+              "data-color-scheme": headerStyle,
               onClick: close,
               children: /* @__PURE__ */ jsx(Close, { "aria-hidden": "true" })
             }
           ),
-          (title || description) && /* @__PURE__ */ jsxs("div", { className: styles.modal__title, children: [
+          (title || description) && /* @__PURE__ */ jsxs("div", { className: styles.modal__title, "data-color-scheme": headerStyle, 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 })
+            description && /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: descriptionId,
+                className: cn(styles.modal__description, "dds-prose"),
+                children: description
+              }
+            )
           ] }),
           /* @__PURE__ */ jsx("div", { className: styles.modal__content, children })
         ] }),

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

	@@ -1 +1 @@
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;"}
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, focusStyles } from '../../styles/utils';\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 data-color-scheme=\"light\"\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 data-color-scheme={headerStyle}\n onClick={close}\n >\n <Close aria-hidden=\"true\" />\n </button>\n )}\n {(title \|\| description) && (\n <div className={styles.modal__title} data-color-scheme={headerStyle}>\n {title && (\n <h2 id={titleId} className={styles.modal__heading}>\n {title}\n </h2>\n )}\n {description && (\n <div\n id={descriptionId}\n className={cn(styles.modal__description, 'dds-prose')}\n >\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":"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"}

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

@@ -1,32 +1,32 @@
 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 modal = "_modal_9bjhv_1";
+const modal__container = "_modal__container_9bjhv_64";
+const modal__title = "_modal__title_9bjhv_76";
+const modal__heading = "_modal__heading_9bjhv_86";
+const modal__description = "_modal__description_9bjhv_94";
+const modal__content = "_modal__content_9bjhv_98";
+const modal__close = "_modal__close_9bjhv_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--align-top": "_modal--align-top_9bjhv_21",
+  "modal--small": "_modal--small_9bjhv_38",
+  "modal--medium": "_modal--medium_9bjhv_42",
+  "modal--large": "_modal--large_9bjhv_45",
+  "modal--opening": "_modal--opening_9bjhv_49",
+  "modal-open": "_modal-open_9bjhv_1",
+  "modal--closing": "_modal--closing_9bjhv_52",
+  "modal-close": "_modal-close_9bjhv_1",
   modal__container,
-  "modal--fixed-title": "_modal--fixed-title_ewl1e_72",
+  "modal--fixed-title": "_modal--fixed-title_9bjhv_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"
+  "modal__bottom-bar": "_modal__bottom-bar_9bjhv_132",
+  "modal--dark": "_modal--dark_9bjhv_137"
 };
 exports.default = styles;
 exports.modal = modal;

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

@@ -1,30 +1,30 @@
 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 modal = "_modal_9bjhv_1";
+const modal__container = "_modal__container_9bjhv_64";
+const modal__title = "_modal__title_9bjhv_76";
+const modal__heading = "_modal__heading_9bjhv_86";
+const modal__description = "_modal__description_9bjhv_94";
+const modal__content = "_modal__content_9bjhv_98";
+const modal__close = "_modal__close_9bjhv_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--align-top": "_modal--align-top_9bjhv_21",
+  "modal--small": "_modal--small_9bjhv_38",
+  "modal--medium": "_modal--medium_9bjhv_42",
+  "modal--large": "_modal--large_9bjhv_45",
+  "modal--opening": "_modal--opening_9bjhv_49",
+  "modal-open": "_modal-open_9bjhv_1",
+  "modal--closing": "_modal--closing_9bjhv_52",
+  "modal-close": "_modal-close_9bjhv_1",
   modal__container,
-  "modal--fixed-title": "_modal--fixed-title_ewl1e_72",
+  "modal--fixed-title": "_modal--fixed-title_9bjhv_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"
+  "modal__bottom-bar": "_modal__bottom-bar_9bjhv_132",
+  "modal--dark": "_modal--dark_9bjhv_137"
 };
 export {
   styles as default,

package/dist/components/Notification/Notification.cjs CHANGED Viewed

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const icons = require("@dnanpm/icons");
-const focus_module = require("../../styles/utils/focus.module.css.cjs");
+const index = require("../../styles/utils/index.cjs");
 const Notification_module = require("./Notification.module.css.cjs");
 const cn = require("../../utils/cn/cn.cjs");
 const variantIcons = {
@@ -33,6 +33,7 @@ const Notification = ({
     "div",
     {
       ...props,
+      "data-color-scheme": "light",
       ref,
       role,
       className: cn.cn(Notification_module.default.notification, Notification_module.default[`notification--${variant}`], className),
@@ -43,7 +44,7 @@ const Notification = ({
           "button",
           {
             type: "button",
-            className: cn.cn(Notification_module.default.notification__close, focus_module.default.focusable),
+            className: cn.cn(Notification_module.default.notification__close, index.focusStyles.focusable),
             onClick: onClose,
             "aria-label": closeLabel,
             children: /* @__PURE__ */ jsxRuntime.jsx(icons.Close, { "aria-hidden": "true" })

package/dist/components/Notification/Notification.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Notification.cjs","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import type { ComponentType, SVGProps } from 'react';\nimport { Check, Close, Error as ErrorIcon, Info, Warning } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils~~/focus.module.css~~';\nimport styles from './Notification.module.css';\nimport type { NotificationProps, NotificationVariant } from './Notification.types';\n\nconst variantIcons: Record<NotificationVariant, ComponentType<SVGProps<SVGSVGElement>>> = {\n info: Info,\n success: Check,\n warning: Warning,\n error: ErrorIcon,\n};\n\nconst variantRoles: Record<NotificationVariant, 'status' \| 'alert'> = {\n info: 'status',\n success: 'status',\n warning: 'alert',\n error: 'alert',\n};\n\nexport const Notification = ({\n variant,\n children,\n closable = false,\n onClose,\n closeLabel = 'Sulje ilmoitus',\n className,\n ref,\n ...props\n}: NotificationProps) => {\n const Icon = variantIcons[variant];\n const role = variantRoles[variant];\n\n return (\n <div\n {...props}\n ref={ref}\n role={role}\n className={cn(styles.notification, styles[`notification--${variant}`], className)}\n >\n <div className={styles['notification__icon-container']}>\n <Icon className={styles.notification__icon} aria-hidden=\"true\" />\n </div>\n <div className={styles.notification__content}>{children}</div>\n {closable && (\n <button\n type=\"button\"\n className={cn(styles.notification__close, focusStyles.focusable)}\n onClick={onClose}\n aria-label={closeLabel}\n >\n <Close aria-hidden=\"true\" />\n </button>\n )}\n </div>\n );\n};\n"],"names":["Info","Check","Warning","ErrorIcon","jsxs","cn","styles","jsx","focusStyles","Close"],"mappings":";;;;;;;AAOA,MAAM,eAAoF;AAAA,EACtF,MAAMA,MAAAA;AAAAA,EACN,SAASC,MAAAA;AAAAA,EACT,SAASC,MAAAA;AAAAA,EACT,OAAOC,MAAAA;AACX;AAEA,MAAM,eAAgE;AAAA,EAClE,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACX;AAEO,MAAM,eAAe,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAyB;AACrB,QAAM,OAAO,aAAa,OAAO;AACjC,QAAM,OAAO,aAAa,OAAO;AAEjC,SACIC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,WAAWC,GAAAA,GAAGC,oBAAAA,QAAO,cAAcA,oBAAAA,QAAO,iBAAiB,OAAO,EAAE,GAAG,SAAS;AAAA,MAEhF,UAAA;AAAA,QAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,oBAAAA,QAAO,8BAA8B,GACjD,UAAAC,2BAAAA,IAAC,MAAA,EAAK,WAAWD,4BAAO,oBAAoB,eAAY,OAAA,CAAO,GACnE;AAAA,QACAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,oBAAAA,QAAO,uBAAwB,UAAS;AAAA,QACvD,YACGC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,WAAWF,GAAAA,GAAGC,oBAAAA,QAAO,qBAAqBE,~~aAAAA~~,~~QAAY~~,SAAS;AAAA,YAC/D,SAAS;AAAA,YACT,cAAY;AAAA,YAEZ,UAAAD,2BAAAA,IAACE,MAAAA,OAAA,EAAM,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9B;AAAA,IAAA;AAAA,EAAA;AAIhB;;"}
1	+ {"version":3,"file":"Notification.cjs","sources":["../../../src/components/Notification/Notification.tsx"],"sourcesContent":["import type { ComponentType, SVGProps } from 'react';\nimport { Check, Close, Error as ErrorIcon, Info, Warning } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport { focusStyles } from '../../styles/utils';\nimport styles from './Notification.module.css';\nimport type { NotificationProps, NotificationVariant } from './Notification.types';\n\nconst variantIcons: Record<NotificationVariant, ComponentType<SVGProps<SVGSVGElement>>> = {\n info: Info,\n success: Check,\n warning: Warning,\n error: ErrorIcon,\n};\n\nconst variantRoles: Record<NotificationVariant, 'status' \| 'alert'> = {\n info: 'status',\n success: 'status',\n warning: 'alert',\n error: 'alert',\n};\n\nexport const Notification = ({\n variant,\n children,\n closable = false,\n onClose,\n closeLabel = 'Sulje ilmoitus',\n className,\n ref,\n ...props\n}: NotificationProps) => {\n const Icon = variantIcons[variant];\n const role = variantRoles[variant];\n\n return (\n <div\n {...props}\n data-color-scheme=\"light\"\n ref={ref}\n role={role}\n className={cn(styles.notification, styles[`notification--${variant}`], className)}\n >\n <div className={styles['notification__icon-container']}>\n <Icon className={styles.notification__icon} aria-hidden=\"true\" />\n </div>\n <div className={styles.notification__content}>{children}</div>\n {closable && (\n <button\n type=\"button\"\n className={cn(styles.notification__close, focusStyles.focusable)}\n onClick={onClose}\n aria-label={closeLabel}\n >\n <Close aria-hidden=\"true\" />\n </button>\n )}\n </div>\n );\n};\n"],"names":["Info","Check","Warning","ErrorIcon","jsxs","cn","styles","jsx","focusStyles","Close"],"mappings":";;;;;;;AAOA,MAAM,eAAoF;AAAA,EACtF,MAAMA,MAAAA;AAAAA,EACN,SAASC,MAAAA;AAAAA,EACT,SAASC,MAAAA;AAAAA,EACT,OAAOC,MAAAA;AACX;AAEA,MAAM,eAAgE;AAAA,EAClE,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACX;AAEO,MAAM,eAAe,CAAC;AAAA,EACzB;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAyB;AACrB,QAAM,OAAO,aAAa,OAAO;AACjC,QAAM,OAAO,aAAa,OAAO;AAEjC,SACIC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,qBAAkB;AAAA,MAClB;AAAA,MACA;AAAA,MACA,WAAWC,GAAAA,GAAGC,oBAAAA,QAAO,cAAcA,oBAAAA,QAAO,iBAAiB,OAAO,EAAE,GAAG,SAAS;AAAA,MAEhF,UAAA;AAAA,QAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,oBAAAA,QAAO,8BAA8B,GACjD,UAAAC,2BAAAA,IAAC,MAAA,EAAK,WAAWD,4BAAO,oBAAoB,eAAY,OAAA,CAAO,GACnE;AAAA,QACAC,2BAAAA,IAAC,OAAA,EAAI,WAAWD,oBAAAA,QAAO,uBAAwB,UAAS;AAAA,QACvD,YACGC,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,WAAWF,GAAAA,GAAGC,oBAAAA,QAAO,qBAAqBE,MAAAA,YAAY,SAAS;AAAA,YAC/D,SAAS;AAAA,YACT,cAAY;AAAA,YAEZ,UAAAD,2BAAAA,IAACE,MAAAA,OAAA,EAAM,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAC9B;AAAA,IAAA;AAAA,EAAA;AAIhB;;"}