@dnanpm/ui-components 0.7.0 → 0.8.0

package/dist/components/Modal/useNativeDialog.js

@@ -0,0 +1,126 @@
+import { useRef, useState, useCallback, useEffect } from "react";
+let bodyScrollLockCount = 0;
+let previousBodyOverflow = "";
+const lockBodyScroll = () => {
+  if (bodyScrollLockCount === 0) {
+    previousBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+  }
+  bodyScrollLockCount += 1;
+};
+const unlockBodyScroll = () => {
+  bodyScrollLockCount = Math.max(bodyScrollLockCount - 1, 0);
+  if (bodyScrollLockCount === 0) {
+    document.body.style.overflow = previousBodyOverflow;
+    previousBodyOverflow = "";
+  }
+};
+const setDialogOpen = (dialog, open) => {
+  {
+    if (typeof dialog.showModal === "function") {
+      if (!dialog.open) dialog.showModal();
+    }
+  }
+};
+const findAutofocusTarget = (dialog) => {
+  if (dialog.hasAttribute("autofocus")) return dialog;
+  return dialog.querySelector("[autofocus]") ?? Array.from(dialog.querySelectorAll("*")).find(
+    (element) => "autofocus" in element && element.autofocus
+  );
+};
+const useNativeDialog = ({ open, keepMounted, onOpenChange }) => {
+  const dialogRef = useRef(null);
+  const restoreFocusRef = useRef(null);
+  const closeTimerRef = useRef(null);
+  const bodyScrollLockedRef = useRef(false);
+  const [phase, setPhase] = useState("closed");
+  const isPresent = keepMounted || open || phase !== "closed";
+  const notifyOpenChange = useCallback(
+    (nextOpen) => {
+      onOpenChange?.(nextOpen);
+    },
+    [onOpenChange]
+  );
+  const finishClose = useCallback(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    closeTimerRef.current = null;
+    if (dialog.open) {
+      dialog.close();
+    } else {
+      setPhase("closed");
+    }
+  }, []);
+  const close = useCallback(() => notifyOpenChange(false), [notifyOpenChange]);
+  const clearCloseTimer = useCallback(() => {
+    if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
+    closeTimerRef.current = null;
+  }, []);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open) {
+      clearCloseTimer();
+      if (phase === "closing" || phase === "closed") setPhase("open");
+      if (!dialog.open) {
+        restoreFocusRef.current = document.activeElement;
+        const autofocusTarget = findAutofocusTarget(dialog);
+        const existingFocusTarget = document.activeElement instanceof HTMLElement && document.activeElement !== dialog && dialog.contains(document.activeElement) ? document.activeElement : null;
+        setDialogOpen(dialog);
+        (autofocusTarget ?? existingFocusTarget ?? dialog.querySelector("[data-dialog-autofocus]"))?.focus();
+      }
+      if (dialog.open && !bodyScrollLockedRef.current) {
+        lockBodyScroll();
+        bodyScrollLockedRef.current = true;
+      }
+    } else if (dialog.open && phase === "open") {
+      setPhase("closing");
+    }
+  }, [clearCloseTimer, open, phase]);
+  useEffect(() => {
+    if (phase !== "closing") return;
+    const dialog = dialogRef.current;
+    if (!dialog || !dialog.open) return;
+    const styles = window.getComputedStyle(dialog);
+    const durations = `${styles.transitionDuration},${styles.animationDuration}`.split(",").map((duration2) => {
+      const value = Number.parseFloat(duration2);
+      return Number.isFinite(value) ? duration2.trim().endsWith("ms") ? value : value * 1e3 : 0;
+    });
+    const duration = Math.max(...durations, 0);
+    closeTimerRef.current = setTimeout(finishClose, duration);
+    return () => {
+      clearCloseTimer();
+    };
+  }, [clearCloseTimer, finishClose, phase]);
+  useEffect(
+    () => () => {
+      clearCloseTimer();
+      if (bodyScrollLockedRef.current) {
+        unlockBodyScroll();
+        bodyScrollLockedRef.current = false;
+      }
+    },
+    [clearCloseTimer]
+  );
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    const handleClose = () => {
+      clearCloseTimer();
+      setPhase("closed");
+      if (bodyScrollLockedRef.current) {
+        unlockBodyScroll();
+        bodyScrollLockedRef.current = false;
+      }
+      restoreFocusRef.current?.focus();
+      restoreFocusRef.current = null;
+    };
+    dialog.addEventListener("close", handleClose);
+    return () => dialog.removeEventListener("close", handleClose);
+  }, [clearCloseTimer, isPresent]);
+  return { dialogRef, close, phase, isPresent };
+};
+export {
+  useNativeDialog
+};
+//# sourceMappingURL=useNativeDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useNativeDialog.js","sources":["../../../src/components/Modal/useNativeDialog.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\ninterface UseNativeDialogOptions {\n    open: boolean;\n    keepMounted: boolean;\n    onOpenChange?: (open: boolean) => void;\n}\n\ntype DialogPhase = 'closed' | 'open' | 'closing';\n\nlet bodyScrollLockCount = 0;\nlet previousBodyOverflow = '';\n\nconst lockBodyScroll = () => {\n    if (bodyScrollLockCount === 0) {\n        previousBodyOverflow = document.body.style.overflow;\n        document.body.style.overflow = 'hidden';\n    }\n    bodyScrollLockCount += 1;\n};\n\nconst unlockBodyScroll = () => {\n    bodyScrollLockCount = Math.max(bodyScrollLockCount - 1, 0);\n    if (bodyScrollLockCount === 0) {\n        document.body.style.overflow = previousBodyOverflow;\n        previousBodyOverflow = '';\n    }\n};\n\nconst setDialogOpen = (dialog: HTMLDialogElement, open: boolean) => {\n    if (open) {\n        if (typeof dialog.showModal === 'function') {\n            if (!dialog.open) dialog.showModal();\n        }\n    } else if (dialog.open) {\n        if (typeof dialog.close === 'function') {\n            dialog.close();\n        }\n    }\n};\n\nconst findAutofocusTarget = (dialog: HTMLDialogElement) => {\n    if (dialog.hasAttribute('autofocus')) return dialog;\n\n    return (\n        dialog.querySelector<HTMLElement>('[autofocus]') ??\n        Array.from(dialog.querySelectorAll<HTMLElement>('*')).find(\n            (element) =>\n                'autofocus' in element &&\n                (element as HTMLElement & { autofocus: boolean }).autofocus,\n        )\n    );\n};\n\nexport const useNativeDialog = ({ open, keepMounted, onOpenChange }: UseNativeDialogOptions) => {\n    const dialogRef = useRef<HTMLDialogElement>(null);\n    const restoreFocusRef = useRef<HTMLElement | null>(null);\n    const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n    const bodyScrollLockedRef = useRef(false);\n    const [phase, setPhase] = useState<DialogPhase>('closed');\n    const isPresent = keepMounted || open || phase !== 'closed';\n\n    const notifyOpenChange = useCallback(\n        (nextOpen: boolean) => {\n            onOpenChange?.(nextOpen);\n        },\n        [onOpenChange],\n    );\n\n    const finishClose = useCallback(() => {\n        const dialog = dialogRef.current;\n        if (!dialog) return;\n        closeTimerRef.current = null;\n        if (dialog.open) {\n            dialog.close();\n        } else {\n            setPhase('closed');\n        }\n    }, []);\n\n    const close = useCallback(() => notifyOpenChange(false), [notifyOpenChange]);\n\n    const clearCloseTimer = useCallback(() => {\n        if (closeTimerRef.current) clearTimeout(closeTimerRef.current);\n        closeTimerRef.current = null;\n    }, []);\n\n    useEffect(() => {\n        const dialog = dialogRef.current;\n        if (!dialog) return;\n\n        if (open) {\n            clearCloseTimer();\n            if (phase === 'closing' || phase === 'closed') setPhase('open');\n            if (!dialog.open) {\n                restoreFocusRef.current = document.activeElement as HTMLElement | null;\n                const autofocusTarget = findAutofocusTarget(dialog);\n                const existingFocusTarget =\n                    document.activeElement instanceof HTMLElement &&\n                    document.activeElement !== dialog &&\n                    dialog.contains(document.activeElement)\n                        ? document.activeElement\n                        : null;\n                setDialogOpen(dialog, true);\n                (\n                    autofocusTarget ??\n                    existingFocusTarget ??\n                    dialog.querySelector<HTMLElement>('[data-dialog-autofocus]')\n                )?.focus();\n            }\n            if (dialog.open && !bodyScrollLockedRef.current) {\n                lockBodyScroll();\n                bodyScrollLockedRef.current = true;\n            }\n        } else if (dialog.open && phase === 'open') {\n            setPhase('closing');\n        }\n    }, [clearCloseTimer, open, phase]);\n\n    useEffect(() => {\n        if (phase !== 'closing') return;\n        const dialog = dialogRef.current;\n        if (!dialog || !dialog.open) return;\n\n        const styles = window.getComputedStyle(dialog);\n        const durations = `${styles.transitionDuration},${styles.animationDuration}`\n            .split(',')\n            .map((duration) => {\n                const value = Number.parseFloat(duration);\n                return Number.isFinite(value)\n                    ? duration.trim().endsWith('ms')\n                        ? value\n                        : value * 1000\n                    : 0;\n            });\n        const duration = Math.max(...durations, 0);\n        closeTimerRef.current = setTimeout(finishClose, duration);\n\n        return () => {\n            clearCloseTimer();\n        };\n    }, [clearCloseTimer, finishClose, phase]);\n\n    useEffect(\n        () => () => {\n            clearCloseTimer();\n            if (bodyScrollLockedRef.current) {\n                unlockBodyScroll();\n                bodyScrollLockedRef.current = false;\n            }\n        },\n        [clearCloseTimer],\n    );\n\n    useEffect(() => {\n        const dialog = dialogRef.current;\n        if (!dialog) return;\n\n        const handleClose = () => {\n            clearCloseTimer();\n            setPhase('closed');\n            if (bodyScrollLockedRef.current) {\n                unlockBodyScroll();\n                bodyScrollLockedRef.current = false;\n            }\n            restoreFocusRef.current?.focus();\n            restoreFocusRef.current = null;\n        };\n\n        dialog.addEventListener('close', handleClose);\n        return () => dialog.removeEventListener('close', handleClose);\n    }, [clearCloseTimer, isPresent]);\n\n    return { dialogRef, close, phase, isPresent };\n};\n"],"names":["duration"],"mappings":"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"}

package/dist/index.cjs

@@ -5,12 +5,16 @@ const Accordion = require("./components/Accordion/Accordion.cjs");
 const AccordionItem = require("./components/AccordionItem/AccordionItem.cjs");
 const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
 const Button = require("./components/Button/Button.cjs");
+const ButtonCard = require("./components/ButtonCard/ButtonCard.cjs");
 const ColorScheme = require("./components/ColorScheme/ColorScheme.cjs");
+const Drawer = require("./components/Drawer/Drawer.cjs");
 const Footer = require("./components/Footer/Footer.cjs");
+const FunctionButton = require("./components/FunctionButton/FunctionButton.cjs");
 const Hero = require("./components/Hero/Hero.cjs");
 const IconButton = require("./components/IconButton/IconButton.cjs");
 const Label = require("./components/Label/Label.cjs");
 const MainNavigation = require("./components/MainNavigation/MainNavigation.cjs");
+const Modal = require("./components/Modal/Modal.cjs");
 const Notification = require("./components/Notification/Notification.cjs");
 const Pictograph = require("./components/Pictograph/Pictograph.cjs");
 const PictographItem = require("./components/Pictograph/PictographItem.cjs");
@@ -21,12 +25,16 @@ exports.Accordion = Accordion.Accordion;
 exports.AccordionItem = AccordionItem.AccordionItem;
 exports.Breadcrumb = Breadcrumb.Breadcrumb;
 exports.Button = Button.Button;
+exports.ButtonCard = ButtonCard.ButtonCard;
 exports.ColorScheme = ColorScheme.ColorScheme;
+exports.Drawer = Drawer.Drawer;
 exports.Footer = Footer.Footer;
+exports.FunctionButton = FunctionButton.FunctionButton;
 exports.Hero = Hero.Hero;
 exports.IconButton = IconButton.IconButton;
 exports.Label = Label.Label;
 exports.MainNavigation = MainNavigation.MainNavigation;
+exports.Modal = Modal.Modal;
 exports.Notification = Notification.Notification;
 exports.Pictograph = Pictograph.Pictograph;
 exports.PictographItem = PictographItem.PictographItem;

package/dist/index.cjs.map

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

package/dist/index.d.ts

@@ -2,30 +2,38 @@ export { Accordion } from './components/Accordion';
 export { AccordionItem } from './components/AccordionItem';
 export { Breadcrumb } from './components/Breadcrumb';
 export { Button } from './components/Button';
+export { ButtonCard } from './components/ButtonCard';
 export { ColorScheme } from './components/ColorScheme';
+export { Drawer } from './components/Drawer';
 export { Footer } from './components/Footer';
 export { Hero } from './components/Hero';
 export { MainNavigation } from './components/MainNavigation';
 export { Notification } from './components/Notification';
 export { Label } from './components/Label';
+export { Modal } from './components/Modal';
 export { Pictograph, PictographItem } from './components/Pictograph';
 export { Quote } from './components/Quote';
 export { Spinner } from './components/Spinner';
 export { IconButton } from './components/IconButton';
+export { FunctionButton } from './components/FunctionButton';
 export type { AccordionProps } from './components/Accordion';
 export type { AccordionItemProps } from './components/AccordionItem';
 export type { BreadcrumbItem, BreadcrumbLinkProps, BreadcrumbProps } from './components/Breadcrumb';
 export type { ButtonProps, ButtonLinkProps, ButtonVariant, ButtonSize } from './components/Button';
+export type { ButtonCardIcon, ButtonCardLinkProps, ButtonCardProps, ButtonCardSize, } from './components/ButtonCard';
 export type { ColorSchemeProps, ColorSchemeValue } from './components/ColorScheme';
+export type { DrawerHeaderStyle, DrawerProps, DrawerSide, DrawerSize } from './components/Drawer';
 export type { FooterAppLink, FooterAppLinks, FooterLanguage, FooterLink, FooterLinkMeta, FooterLinkProps, FooterMandatoryLink, FooterNavigationGroup, FooterOrganization, FooterProps, FooterRenderLink, FooterSocialLink, FooterSocialPlatform, FooterTopSectionGroup, FooterTopSectionLink, } from './components/Footer';
 export type { HeroProps, HeroHeadingLevel, HeroCommonImageProps, HeroImageComponent, } from './components/Hero';
 export type { MainNavigationItem, MainNavigationLink, MainNavigationOrganizationLink, MainNavigationPanel, MainNavigationProps, MainNavigationSubmenuColumn, } from './components/MainNavigation';
 export type { NotificationProps, NotificationVariant } from './components/Notification';
 export type { LabelProps, LabelVariant } from './components/Label';
+export type { ModalHeaderStyle, ModalProps, ModalSize } from './components/Modal';
 export type { PictographItemProps, PictographProps } from './components/Pictograph';
 export type { QuoteProps } from './components/Quote';
 export type { SpinnerColor, SpinnerProps, SpinnerSize } from './components/Spinner';
 export type { Icon, IconPosition, IconButtonLinkProps, IconButtonProps, IconButtonSize, } from './components/IconButton';
+export type { FunctionButtonIcon, FunctionButtonProps, FunctionButtonSize, FunctionButtonVariant, } from './components/FunctionButton';
 export { cn } from './utils';
 export type { CnDictionary, CnInput } from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAG5B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAErD,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpG,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACnG,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACnF,YAAY,EACR,aAAa,EACb,cAAc,EACd,cAAc,EACd,UAAU,EACV,cAAc,EACd,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,kBAAkB,EAClB,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,GACvB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EACR,SAAS,EACT,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,GACrB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACR,kBAAkB,EAClB,kBAAkB,EAClB,8BAA8B,EAC9B,mBAAmB,EACnB,mBAAmB,EACnB,2BAA2B,GAC9B,MAAM,6BAA6B,CAAC;AACrC,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACxF,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACnE,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpF,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACpF,YAAY,EACR,IAAI,EACJ,YAAY,EACZ,mBAAmB,EACnB,eAAe,EACf,cAAc,GACjB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAG5B,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACrE,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAE7D,YAAY,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAC7D,YAAY,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AACrE,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpG,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACnG,YAAY,EACR,cAAc,EACd,mBAAmB,EACnB,eAAe,EACf,cAAc,GACjB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AACnF,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAClG,YAAY,EACR,aAAa,EACb,cAAc,EACd,cAAc,EACd,UAAU,EACV,cAAc,EACd,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,kBAAkB,EAClB,WAAW,EACX,gBAAgB,EAChB,gBAAgB,EAChB,oBAAoB,EACpB,qBAAqB,EACrB,oBAAoB,GACvB,MAAM,qBAAqB,CAAC;AAC7B,YAAY,EACR,SAAS,EACT,gBAAgB,EAChB,oBAAoB,EACpB,kBAAkB,GACrB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACR,kBAAkB,EAClB,kBAAkB,EAClB,8BAA8B,EAC9B,mBAAmB,EACnB,mBAAmB,EACnB,2BAA2B,GAC9B,MAAM,6BAA6B,CAAC;AACrC,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AACxF,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACnE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAClF,YAAY,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AACpF,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACpF,YAAY,EACR,IAAI,EACJ,YAAY,EACZ,mBAAmB,EACnB,eAAe,EACf,cAAc,GACjB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EACR,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,qBAAqB,GACxB,MAAM,6BAA6B,CAAC;AAErC,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,YAAY,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -3,12 +3,16 @@ import { Accordion } from "./components/Accordion/Accordion.js";
 import { AccordionItem } from "./components/AccordionItem/AccordionItem.js";
 import { Breadcrumb } from "./components/Breadcrumb/Breadcrumb.js";
 import { Button } from "./components/Button/Button.js";
+import { ButtonCard } from "./components/ButtonCard/ButtonCard.js";
 import { ColorScheme } from "./components/ColorScheme/ColorScheme.js";
+import { Drawer } from "./components/Drawer/Drawer.js";
 import { Footer } from "./components/Footer/Footer.js";
+import { FunctionButton } from "./components/FunctionButton/FunctionButton.js";
 import { Hero } from "./components/Hero/Hero.js";
 import { IconButton } from "./components/IconButton/IconButton.js";
 import { Label } from "./components/Label/Label.js";
 import { MainNavigation } from "./components/MainNavigation/MainNavigation.js";
+import { Modal } from "./components/Modal/Modal.js";
 import { Notification } from "./components/Notification/Notification.js";
 import { Pictograph } from "./components/Pictograph/Pictograph.js";
 import { PictographItem } from "./components/Pictograph/PictographItem.js";
@@ -20,12 +24,16 @@ export {
   AccordionItem,
   Breadcrumb,
   Button,
+  ButtonCard,
   ColorScheme,
+  Drawer,
   Footer,
+  FunctionButton,
   Hero,
   IconButton,
   Label,
   MainNavigation,
+  Modal,
   Notification,
   Pictograph,
   PictographItem,

package/dist/index.js.map

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

package/dist/styles/utils/elevation.module.css.cjs

@@ -2,12 +2,15 @@ require('./elevation.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const elevationLow = "_elevationLow_dspr0_1";
+const elevationMedium = "_elevationMedium_dspr0_8";
 const elevationHigh = "_elevationHigh_dspr0_16";
 const elevationStyles = {
   elevationLow,
+  elevationMedium,
   elevationHigh
 };
 exports.default = elevationStyles;
 exports.elevationHigh = elevationHigh;
 exports.elevationLow = elevationLow;
+exports.elevationMedium = elevationMedium;
 //# sourceMappingURL=elevation.module.css.cjs.map

package/dist/styles/utils/elevation.module.css.cjs.map

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

package/dist/styles/utils/elevation.module.css.js

@@ -1,13 +1,16 @@
 import './elevation.css';
 const elevationLow = "_elevationLow_dspr0_1";
+const elevationMedium = "_elevationMedium_dspr0_8";
 const elevationHigh = "_elevationHigh_dspr0_16";
 const elevationStyles = {
   elevationLow,
+  elevationMedium,
   elevationHigh
 };
 export {
   elevationStyles as default,
   elevationHigh,
-  elevationLow
+  elevationLow,
+  elevationMedium
 };
 //# sourceMappingURL=elevation.module.css.js.map

package/dist/styles/utils/elevation.module.css.js.map

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

package/dist/styles/utils/focus.css

@@ -1,12 +1,16 @@
-@layer dds-components {._focusable_1dunk_1 {
+@layer dds-components {._focusable_bhneb_1 {
     /* Marker class for shared focus treatment */
 }
 
-._focusable_1dunk_1:focus {
+._focusable_bhneb_1:where(:focus, :focus-visible) {
+    border-radius: var(--radius-semantic-sm);
+}
+
+._focusable_bhneb_1:focus {
     outline-color: transparent;
 }
 
-._focusable_1dunk_1:focus-visible {
+._focusable_bhneb_1:focus-visible {
     /* Transparent outline ensures a visible ring fallback in forced colors. */
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -15,31 +19,26 @@
         0 0 0 4px var(--color-semantic-utility-focus-strong);
 }
 
-._focusableRadiusSm_1dunk_18 {
-    /* Adds small border radius to focus ring surface without changing focus colors/shadows */
-}
-
-._focusableRadiusSm_1dunk_18:focus,
-._focusableRadiusSm_1dunk_18:focus-visible {
-    border-radius: var(--radius-semantic-sm);
-}
-
 @media (forced-colors: active) {
-    ._focusable_1dunk_1:focus-visible {
+    ._focusable_bhneb_1:focus-visible {
         outline-color: Highlight;
         box-shadow: none;
     }
 }
 
-._focusableInset_1dunk_34 {
+._focusableInset_bhneb_29 {
     /* Marker class for inset focus treatment (ring stays inside the element boundary) */
 }
 
-._focusableInset_1dunk_34:focus {
+._focusableInset_bhneb_29:where(:focus, :focus-visible) {
+    border-radius: var(--radius-semantic-sm);
+}
+
+._focusableInset_bhneb_29:focus {
     outline-color: transparent;
 }
 
-._focusableInset_1dunk_34:focus-visible {
+._focusableInset_bhneb_29:focus-visible {
     outline: 2px solid transparent;
     box-shadow:
         inset 0 0 0 2px var(--color-semantic-utility-focus-strong),
@@ -47,34 +46,34 @@
 }
 
 @media (forced-colors: active) {
-    ._focusableInset_1dunk_34:focus-visible {
+    ._focusableInset_bhneb_29:focus-visible {
         outline-color: Highlight;
         box-shadow: none;
     }
 }
 
 @scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
-    ._focusable_1dunk_1:focus-visible {
+    ._focusable_bhneb_1:focus-visible {
         box-shadow:
             0 0 0 2px var(--color-semantic-utility-focus-strong),
             0 0 0 4px var(--color-semantic-utility-focus-soft);
     }
 
-    ._focusableInset_1dunk_34:focus-visible {
+    ._focusableInset_bhneb_29:focus-visible {
         box-shadow:
             inset 0 0 0 2px var(--color-semantic-utility-focus-soft),
             inset 0 0 0 4px var(--color-semantic-utility-focus-strong);
     }
 
     @media (forced-colors: active) {
-        ._focusable_1dunk_1:focus-visible,
-        ._focusableInset_1dunk_34:focus-visible {
+        ._focusable_bhneb_1:focus-visible,
+        ._focusableInset_bhneb_29:focus-visible {
             box-shadow: none;
         }
     }
 }
 
-._focusClipGuard_1dunk_77 {
+._focusClipGuard_bhneb_76 {
     /*
      * Prevents focus rings from being clipped when the container uses overflow: hidden.
      *

package/dist/styles/utils/focus.module.css.cjs

@@ -1,13 +1,11 @@
 require('./focus.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const focusable = "_focusable_1dunk_1";
-const focusableRadiusSm = "_focusableRadiusSm_1dunk_18";
-const focusableInset = "_focusableInset_1dunk_34";
-const focusClipGuard = "_focusClipGuard_1dunk_77";
+const focusable = "_focusable_bhneb_1";
+const focusableInset = "_focusableInset_bhneb_29";
+const focusClipGuard = "_focusClipGuard_bhneb_76";
 const focusStyles = {
   focusable,
-  focusableRadiusSm,
   focusableInset,
   focusClipGuard
 };
@@ -15,5 +13,4 @@ exports.default = focusStyles;
 exports.focusClipGuard = focusClipGuard;
 exports.focusable = focusable;
 exports.focusableInset = focusableInset;
-exports.focusableRadiusSm = focusableRadiusSm;
 //# sourceMappingURL=focus.module.css.cjs.map

package/dist/styles/utils/focus.module.css.cjs.map

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

package/dist/styles/utils/focus.module.css.js

@@ -1,11 +1,9 @@
 import './focus.css';
-const focusable = "_focusable_1dunk_1";
-const focusableRadiusSm = "_focusableRadiusSm_1dunk_18";
-const focusableInset = "_focusableInset_1dunk_34";
-const focusClipGuard = "_focusClipGuard_1dunk_77";
+const focusable = "_focusable_bhneb_1";
+const focusableInset = "_focusableInset_bhneb_29";
+const focusClipGuard = "_focusClipGuard_bhneb_76";
 const focusStyles = {
   focusable,
-  focusableRadiusSm,
   focusableInset,
   focusClipGuard
 };
@@ -13,7 +11,6 @@ export {
   focusStyles as default,
   focusClipGuard,
   focusable,
-  focusableInset,
-  focusableRadiusSm
+  focusableInset
 };
 //# sourceMappingURL=focus.module.css.js.map

package/dist/styles/utils/focus.module.css.js.map

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

package/dist/styles/utils/text-decoration.css

@@ -1,11 +1,12 @@
-@layer dds-components {._underlineLink_o1ngy_1 {
+@layer dds-components {._underlineLink_15fbp_1 {
     text-decoration: underline;
     text-underline-offset: 0.2em;
     text-decoration-skip-ink: auto;
     text-decoration-thickness: from-font;
 }
 
-._underlineLinkOnHover_o1ngy_8:hover {
+._underlineLinkOnHover_15fbp_8:hover,
+._underlineLinkOnHover_15fbp_8:focus-visible {
     text-decoration: underline;
     text-underline-offset: 0.2em;
     text-decoration-skip-ink: auto;

package/dist/styles/utils/text-decoration.module.css.cjs

@@ -1,8 +1,8 @@
 require('./text-decoration.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const underlineLink = "_underlineLink_o1ngy_1";
-const underlineLinkOnHover = "_underlineLinkOnHover_o1ngy_8";
+const underlineLink = "_underlineLink_15fbp_1";
+const underlineLinkOnHover = "_underlineLinkOnHover_15fbp_8";
 const textDecorationStyles = {
   underlineLink,
   underlineLinkOnHover

package/dist/styles/utils/text-decoration.module.css.js

@@ -1,6 +1,6 @@
 import './text-decoration.css';
-const underlineLink = "_underlineLink_o1ngy_1";
-const underlineLinkOnHover = "_underlineLinkOnHover_o1ngy_8";
+const underlineLink = "_underlineLink_15fbp_1";
+const underlineLinkOnHover = "_underlineLinkOnHover_15fbp_8";
 const textDecorationStyles = {
   underlineLink,
   underlineLinkOnHover

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dnanpm/ui-components",
-    "version": "0.7.0",
+    "version": "0.8.0",
     "description": "DNA Design System - React UI Components",
     "author": "DNA Oy",
     "license": "ISC",
@@ -86,8 +86,8 @@
     },
     "repository": {
         "type": "git",
-        "url": "https://github.com/DNA-Online-Services/dna-design-system.git",
+        "url": "https://dnae.ghe.com/dna/dna-design-system.git",
         "directory": "packages/ui-components"
     },
-    "homepage": "https://github.com/DNA-Online-Services/dna-design-system/tree/main/packages/ui-components#readme"
+    "homepage": "https://dnae.ghe.com/dna/dna-design-system/tree/main/packages/ui-components#readme"
 }