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/Button/Button.css CHANGED Viewed

@@ -1,4 +1,6 @@
-@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._button_1utks_1 {
+@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._button_h8l0q_1 {
+    --_button-icon-size: 24px;
+    --_button-image-size: 32px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -15,70 +17,79 @@
         border-color 0.2s ease-in-out;
 }
-._button--full-width_1utks_18 {
+._button--full-width_h8l0q_20 {
     width: 100%;
     min-width: 0;
 }
 /* ─── Sizes ─── */
-._button--normal_1utks_25 {
+._button--normal_h8l0q_27 {
     font: var(--typography-label-lg-bold);
     height: 40px;
     min-width: 128px;
     padding: var(--spacing-space-8) var(--spacing-space-20);
 }
-._button--small_1utks_32 {
+._button--small_h8l0q_34 {
+    --_button-image-size: 24px;
     font: var(--typography-label-md-bold);
     height: 32px;
     min-width: 100px;
     padding: var(--spacing-space-8) var(--spacing-space-20);
 }
+._button--has-media_h8l0q_42._button--media-start_h8l0q_42 {
+    padding-inline-start: var(--spacing-space-16);
+}
+._button--has-media_h8l0q_42._button--media-end_h8l0q_46 {
+    padding-inline-end: var(--spacing-space-16);
+}
 /* ─── Primary variant ─── */
-._button--primary_1utks_41 {
+._button--primary_h8l0q_52 {
     background-color: var(--color-semantic-interactive-primary-default);
     color: var(--color-semantic-foreground-inverse);
 }
-._button--primary_1utks_41:hover {
+._button--primary_h8l0q_52:hover {
     background-color: var(--color-semantic-interactive-primary-hover);
     color: var(--color-semantic-foreground-inverse);
 }
-._button--primary_1utks_41:active {
+._button--primary_h8l0q_52:active {
     background-color: var(--color-semantic-interactive-primary-active);
     color: var(--color-semantic-foreground-inverse);
 }
-._button--primary_1utks_41:focus-visible {
+._button--primary_h8l0q_52:focus-visible {
     background-color: var(--color-semantic-interactive-primary-focus);
     color: var(--color-semantic-foreground-inverse);
 }
 /* ─── Secondary variant ─── */
-._button--secondary_1utks_63 {
+._button--secondary_h8l0q_74 {
     background-color: transparent;
     border: var(--borderwidth-semantic-sm) solid var(--color-semantic-interactive-secondary-default);
     color: var(--color-semantic-foreground-secondary-strong);
 }
-._button--secondary_1utks_63:hover {
+._button--secondary_h8l0q_74:hover {
     background-color: var(--color-semantic-interactive-secondary-hover);
     border-color: var(--color-semantic-interactive-secondary-hover);
     color: var(--color-semantic-foreground-inverse);
 }
-._button--secondary_1utks_63:active {
+._button--secondary_h8l0q_74:active {
     background-color: var(--color-semantic-interactive-secondary-active);
     border-color: var(--color-semantic-interactive-secondary-active);
     color: var(--color-semantic-foreground-inverse);
 }
-._button--secondary_1utks_63:focus-visible {
+._button--secondary_h8l0q_74:focus-visible {
     background-color: var(--color-semantic-interactive-secondary-focus);
     border-color: var(--color-semantic-interactive-secondary-focus);
     color: var(--color-semantic-foreground-inverse);
@@ -86,44 +97,44 @@
 /* ─── Tertiary variant ─── */
-._button--tertiary_1utks_89 {
+._button--tertiary_h8l0q_100 {
     background-color: var(--color-semantic-interactive-neutral-default);
     border: var(--borderwidth-semantic-sm) solid var(--color-semantic-border-neutral-mid);
     color: var(--color-semantic-foreground-secondary-strong);
 }
-._button--tertiary_1utks_89:hover {
+._button--tertiary_h8l0q_100:hover {
     background-color: var(--color-semantic-interactive-neutral-hover);
     color: var(--color-semantic-foreground-secondary-strong);
 }
-._button--tertiary_1utks_89:active {
+._button--tertiary_h8l0q_100:active {
     background-color: var(--color-semantic-interactive-neutral-active);
     color: var(--color-semantic-foreground-secondary-strong);
 }
-._button--tertiary_1utks_89:focus-visible {
+._button--tertiary_h8l0q_100:focus-visible {
     background-color: var(--color-semantic-interactive-neutral-focus);
     color: var(--color-semantic-foreground-secondary-strong);
 }
 /* ─── Disabled state ─── */
-._button--disabled_1utks_112 {
+._button--disabled_h8l0q_123 {
     pointer-events: none;
 }
-._button--primary_1utks_41._button--disabled_1utks_112 {
+._button--primary_h8l0q_52._button--disabled_h8l0q_123 {
     background-color: var(--color-semantic-interactive-primary-disabled);
     color: var(--color-semantic-foreground-muted);
 }
-._button--secondary_1utks_63._button--disabled_1utks_112 {
+._button--secondary_h8l0q_74._button--disabled_h8l0q_123 {
     border-color: var(--color-semantic-interactive-secondary-disabled);
     color: var(--color-semantic-foreground-muted);
 }
-._button--tertiary_1utks_89._button--disabled_1utks_112 {
+._button--tertiary_h8l0q_100._button--disabled_h8l0q_123 {
     background-color: var(--color-semantic-interactive-neutral-disabled);
     color: var(--color-semantic-foreground-muted);
 }
@@ -132,39 +143,39 @@
 /* Styles apply from [data-color-scheme="dark"] down to (but not into) [data-color-scheme="light"]. */
 @scope ([data-color-scheme='dark']) to ([data-color-scheme='light']) {
-    ._button--primary_1utks_41._button--disabled_1utks_112 {
+    ._button--primary_h8l0q_52._button--disabled_h8l0q_123 {
         color: var(--color-semantic-foreground-inverse-muted);
     }
-    ._button--secondary_1utks_63 {
+    ._button--secondary_h8l0q_74 {
         border-color: var(--color-semantic-interactive-inverse-default);
         color: var(--color-semantic-foreground-inverse);
     }
-    ._button--secondary_1utks_63:hover {
+    ._button--secondary_h8l0q_74:hover {
         background-color: var(--color-semantic-interactive-inverse-hover);
         border-color: var(--color-semantic-interactive-inverse-hover);
         color: var(--color-semantic-foreground-secondary-strong);
     }
-    ._button--secondary_1utks_63:active {
+    ._button--secondary_h8l0q_74:active {
         background-color: var(--color-semantic-interactive-inverse-active);
         border-color: var(--color-semantic-interactive-inverse-active);
         color: var(--color-semantic-foreground-secondary-strong);
     }
-    ._button--secondary_1utks_63:focus-visible {
+    ._button--secondary_h8l0q_74:focus-visible {
         background-color: var(--color-semantic-interactive-inverse-focus);
         border-color: var(--color-semantic-interactive-inverse-focus);
         color: var(--color-semantic-foreground-secondary-strong);
     }
-    ._button--secondary_1utks_63._button--disabled_1utks_112 {
+    ._button--secondary_h8l0q_74._button--disabled_h8l0q_123 {
         border-color: var(--color-semantic-interactive-inverse-disabled);
         color: var(--color-semantic-foreground-inverse-muted);
     }
-    ._button--tertiary_1utks_89._button--disabled_1utks_112 {
+    ._button--tertiary_h8l0q_100._button--disabled_h8l0q_123 {
         border-color: var(--color-semantic-interactive-neutral-disabled);
         color: var(--color-semantic-foreground-inverse-muted);
     }
@@ -172,11 +183,11 @@
 /* ─── Loading state ─── */
-._button--loading_1utks_175 {
+._button--loading_h8l0q_186 {
     pointer-events: none;
 }
-._button__content_1utks_179 {
+._button__content_h8l0q_190 {
     flex: 0 1 auto;
     min-width: 0;
     overflow: hidden;
@@ -184,6 +195,42 @@
     white-space: nowrap;
 }
-._button__spinner_1utks_187 {
+._button__media_h8l0q_198 {
+    display: inline-flex;
     flex: 0 0 auto;
-} }
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+._button__media--icon_h8l0q_206 {
+    width: var(--_button-icon-size);
+    height: var(--_button-icon-size);
+}
+._button__media--icon_h8l0q_206 svg {
+    display: block;
+    width: var(--_button-icon-size);
+    height: var(--_button-icon-size);
+}
+._button__media--image_h8l0q_217 {
+    position: relative;
+    width: var(--_button-image-size);
+    height: var(--_button-image-size);
+}
+._button__media--image_h8l0q_217 :where(img, picture, video, svg, canvas) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+._button__spinner_h8l0q_230 {
+    flex: 0 0 auto;
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */ }

package/dist/components/Button/Button.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 import { ButtonProps } from './Button.types';
-export declare const Button: ({ variant, fullWidth, size, loading, className, children, ref, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ variant, fullWidth, size, loading, icon, image, iconPosition, className, children, ref, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Button.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,GAAI,~~2EASpB~~,WAAW,~~4CA+Hb~~,CAAC"}
1	+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,GAAI,sGAYpB,WAAW,4CAwJb,CAAC"}

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

@@ -1,5 +1,5 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import focusStyles from "../../styles/utils/focus.module.css.js";
+import { focusStyles } from "../../styles/utils/index.js";
 import styles from "./Button.module.css.js";
 import { cn } from "../../utils/cn/cn.js";
 import { Spinner } from "../Spinner/Spinner.js";
@@ -8,6 +8,9 @@ const Button = ({
   fullWidth = false,
   size = "normal",
   loading = false,
+  icon,
+  image,
+  iconPosition = "start",
   className,
   children,
   ref,
@@ -15,6 +18,7 @@ const Button = ({
 }) => {
   const isDisabled = "disabled" in props && props.disabled;
   const isAnchor = "href" in props && props.href != null;
+  const hasMedia = icon != null || Boolean(image);
   const classes = cn(
     styles.button,
     styles[`button--${variant}`],
@@ -23,9 +27,30 @@ const Button = ({
     focusStyles.focusable,
     { [styles["button--disabled"]]: isDisabled },
     { [styles["button--loading"]]: loading },
+    { [styles["button--has-media"]]: hasMedia },
+    { [styles[`button--media-${iconPosition}`]]: hasMedia },
     className
   );
+  const Icon = icon;
+  const media = Icon != null ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(styles["button__media"], styles["button__media--icon"]),
+      "aria-hidden": "true",
+      inert: true,
+      children: /* @__PURE__ */ jsx(Icon, {})
+    }
+  ) : image ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(styles["button__media"], styles["button__media--image"]),
+      "aria-hidden": "true",
+      inert: true,
+      children: image
+    }
+  ) : null;
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    iconPosition === "start" && media,
     /* @__PURE__ */ jsx("span", { className: styles.button__content, children }),
     loading && /* @__PURE__ */ jsx(
       Spinner,
@@ -37,7 +62,8 @@ const Button = ({
         role: "presentation",
         className: styles.button__spinner
       }
-    )
+    ),
+    iconPosition === "end" && media
   ] });
   if (isAnchor) {
     const { href, renderLink, ...anchorProps } = props;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport focusStyles from '../../styles/utils~~/focus.module.css~~';\nimport styles from './Button.module.css';\nimport { Spinner } from '../Spinner';\nimport type { ButtonProps } from './Button.types';\n\nexport const Button = ({\n variant = 'primary',\n fullWidth = false,\n size = 'normal',\n loading = false,\n className,\n children,\n ref,\n ...props\n}: ButtonProps) => {\n const isDisabled = 'disabled' in props && props.disabled;\n const isAnchor = 'href' in props && props.href != null;\n\n const classes = cn(\n styles.button,\n styles[`button--${variant}`],\n { [styles['button--full-width']]: fullWidth },\n styles[`button--${size}`],\n focusStyles.focusable,\n { [styles['button--disabled']]: isDisabled },\n { [styles['button--loading']]: loading },\n className,\n );\n\n const content = (\n <>\n <span className={styles.button__content}>{children}</span>\n {loading && (\n <Spinner\n size={size === 'small' ? 'xs' : 's'}\n color=\"inherit\"\n aria-hidden=\"true\"\n aria-label={undefined}\n role=\"presentation\"\n className={styles.button__spinner}\n />\n )}\n </>\n );\n\n if (isAnchor) {\n const { href, renderLink, ...anchorProps } = props as Omit<\n typeof props,\n 'variant' \| 'size' \| 'loading'\n > & {\n href: string;\n renderLink?: (\n props: AnchorHTMLAttributes<HTMLAnchorElement> & {\n href: string;\n children: ReactNode;\n },\n ) => ReactNode;\n };\n\n const {\n disabled: _disabled,\n type: _type,\n name: _name,\n ...safeAnchorProps\n } = anchorProps as typeof anchorProps & {\n disabled?: boolean;\n type?: 'button' \| 'submit' \| 'reset';\n name?: string;\n };\n\n const target = safeAnchorProps.target;\n const rel = safeAnchorProps.rel;\n const shouldHardenRel = target === '_blank';\n const relTokens = new Set(\n (rel ?? '')\n .split(/\\s+/)\n .filter(Boolean)\n .map((token) => token.toLowerCase()),\n );\n\n if (shouldHardenRel) {\n relTokens.add('noopener');\n relTokens.add('noreferrer');\n }\n\n const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n const linkProps = {\n ...safeAnchorProps,\n ref: ref as Ref<HTMLAnchorElement>,\n href,\n rel: hardenedRel,\n className: classes,\n 'aria-busy': loading \|\| undefined,\n 'aria-disabled': loading \|\| undefined,\n tabIndex: loading ? -1 : undefined,\n onClick: loading\n ? (e: MouseEvent<HTMLAnchorElement>) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : safeAnchorProps.onClick,\n children: content,\n };\n\n if (renderLink) {\n return <>{renderLink(linkProps)}</>;\n }\n\n return <a {...linkProps} />;\n }\n\n const {\n type = 'button',\n disabled,\n href: _href,\n target: _target,\n rel: _rel,\n renderLink: _renderLink,\n ...buttonProps\n } = props as Omit<typeof props, 'variant' \| 'size' \| 'loading' \| 'href'> & {\n type?: 'button' \| 'submit' \| 'reset';\n disabled?: boolean;\n href?: string;\n target?: string;\n rel?: string;\n renderLink?: unknown;\n };\n\n return (\n <button\n ref={ref as Ref<HTMLButtonElement>}\n type={type}\n disabled={disabled \|\| loading}\n className={classes}\n aria-busy={loading \|\| undefined}\n {...buttonProps}\n >\n {content}\n </button>\n );\n};\n"],"names":[],"mappings":";;;;;AAOO,MAAM,SAAS,CAAC;AAAA,EACnB,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAmB;AACf,QAAM,aAAa,cAAc,SAAS,MAAM;AAChD,QAAM,WAAW,UAAU,SAAS,MAAM,QAAQ;~~AAElD~~,QAAM,UAAU;AAAA,IACZ,OAAO;AAAA,IACP,OAAO,WAAW,OAAO,EAAE;AAAA,IAC3B,EAAE,CAAC,OAAO,oBAAoB,CAAC,GAAG,UAAA;AAAA,IAClC,OAAO,WAAW,IAAI,EAAE;AAAA,IACxB,YAAY;AAAA,IACZ,EAAE,CAAC,OAAO,kBAAkB,CAAC,GAAG,WAAA;AAAA,IAChC,EAAE,CAAC,OAAO,iBAAiB,CAAC,GAAG,QAAA;AAAA,IAC/B;AAAA,EAAA;AAGJ,QAAM,UACF,qBAAA,UAAA,~~EACI~~,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,iBAAkB,UAAS;AAAA,IAClD,WACG;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAM,SAAS,UAAU,OAAO;AAAA,QAChC,OAAM;AAAA,QACN,eAAY;AAAA,QACZ,cAAY;AAAA,QACZ,MAAK;AAAA,QACL,WAAW,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,~~EACtB~~,~~GAER~~;AAGJ,MAAI,UAAU;AACV,UAAM,EAAE,MAAM,YAAY,GAAG,gBAAgB;AAa7C,UAAM;AAAA,MACF,UAAU;AAAA,MACV,MAAM;AAAA,MACN,MAAM;AAAA,MACN,GAAG;AAAA,IAAA,IACH;AAMJ,UAAM,SAAS,gBAAgB;AAC/B,UAAM,MAAM,gBAAgB;AAC5B,UAAM,kBAAkB,WAAW;AACnC,UAAM,YAAY,IAAI;AAAA,OACjB,OAAO,IACH,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAAC,UAAU,MAAM,aAAa;AAAA,IAAA;AAG3C,QAAI,iBAAiB;AACjB,gBAAU,IAAI,UAAU;AACxB,gBAAU,IAAI,YAAY;AAAA,IAC9B;AAEA,UAAM,cAAc,UAAU,OAAO,IAAI,MAAM,KAAK,SAAS,EAAE,KAAK,GAAG,IAAI;AAE3E,UAAM,YAAY;AAAA,MACd,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,WAAW;AAAA,MACX,aAAa,WAAW;AAAA,MACxB,iBAAiB,WAAW;AAAA,MAC5B,UAAU,UAAU,KAAK;AAAA,MACzB,SAAS,UACH,CAAC,MAAqC;AAClC,UAAE,eAAA;AACF,UAAE,gBAAA;AAAA,MACN,IACA,gBAAgB;AAAA,MACtB,UAAU;AAAA,IAAA;AAGd,QAAI,YAAY;AACZ,aAAO,oBAAA,UAAA,EAAG,UAAA,WAAW,SAAS,GAAE;AAAA,IACpC;AAEA,WAAO,oBAAC,KAAA,EAAG,GAAG,UAAA,CAAW;AAAA,EAC7B;AAEA,QAAM;AAAA,IACF,OAAO;AAAA,IACP;AAAA,IACA,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACH;AASJ,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,UAAU,YAAY;AAAA,MACtB,WAAW;AAAA,MACX,aAAW,WAAW;AAAA,MACrB,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}
1	+ {"version":3,"file":"Button.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, MouseEvent, ReactNode, Ref } from 'react';\nimport { cn } from '../../utils/cn';\nimport { focusStyles } from '../../styles/utils';\nimport styles from './Button.module.css';\nimport { Spinner } from '../Spinner';\nimport type { ButtonProps } from './Button.types';\n\nexport const Button = ({\n variant = 'primary',\n fullWidth = false,\n size = 'normal',\n loading = false,\n icon,\n image,\n iconPosition = 'start',\n className,\n children,\n ref,\n ...props\n}: ButtonProps) => {\n const isDisabled = 'disabled' in props && props.disabled;\n const isAnchor = 'href' in props && props.href != null;\n const hasMedia = icon != null \|\| Boolean(image);\n\n const classes = cn(\n styles.button,\n styles[`button--${variant}`],\n { [styles['button--full-width']]: fullWidth },\n styles[`button--${size}`],\n focusStyles.focusable,\n { [styles['button--disabled']]: isDisabled },\n { [styles['button--loading']]: loading },\n { [styles['button--has-media']]: hasMedia },\n { [styles[`button--media-${iconPosition}`]]: hasMedia },\n className,\n );\n\n const Icon = icon;\n const media =\n Icon != null ? (\n <span\n className={cn(styles['button__media'], styles['button__media--icon'])}\n aria-hidden=\"true\"\n inert\n >\n <Icon />\n </span>\n ) : image ? (\n <span\n className={cn(styles['button__media'], styles['button__media--image'])}\n aria-hidden=\"true\"\n inert\n >\n {image}\n </span>\n ) : null;\n\n const content = (\n <>\n {iconPosition === 'start' && media}\n <span className={styles.button__content}>{children}</span>\n {loading && (\n <Spinner\n size={size === 'small' ? 'xs' : 's'}\n color=\"inherit\"\n aria-hidden=\"true\"\n aria-label={undefined}\n role=\"presentation\"\n className={styles.button__spinner}\n />\n )}\n {iconPosition === 'end' && media}\n </>\n );\n\n if (isAnchor) {\n const { href, renderLink, ...anchorProps } = props as Omit<\n typeof props,\n 'variant' \| 'size' \| 'loading'\n > & {\n href: string;\n renderLink?: (\n props: AnchorHTMLAttributes<HTMLAnchorElement> & {\n href: string;\n children: ReactNode;\n },\n ) => ReactNode;\n };\n\n const {\n disabled: _disabled,\n type: _type,\n name: _name,\n ...safeAnchorProps\n } = anchorProps as typeof anchorProps & {\n disabled?: boolean;\n type?: 'button' \| 'submit' \| 'reset';\n name?: string;\n };\n\n const target = safeAnchorProps.target;\n const rel = safeAnchorProps.rel;\n const shouldHardenRel = target === '_blank';\n const relTokens = new Set(\n (rel ?? '')\n .split(/\\s+/)\n .filter(Boolean)\n .map((token) => token.toLowerCase()),\n );\n\n if (shouldHardenRel) {\n relTokens.add('noopener');\n relTokens.add('noreferrer');\n }\n\n const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n const linkProps = {\n ...safeAnchorProps,\n ref: ref as Ref<HTMLAnchorElement>,\n href,\n rel: hardenedRel,\n className: classes,\n 'aria-busy': loading \|\| undefined,\n 'aria-disabled': loading \|\| undefined,\n tabIndex: loading ? -1 : undefined,\n onClick: loading\n ? (e: MouseEvent<HTMLAnchorElement>) => {\n e.preventDefault();\n e.stopPropagation();\n }\n : safeAnchorProps.onClick,\n children: content,\n };\n\n if (renderLink) {\n return <>{renderLink(linkProps)}</>;\n }\n\n return <a {...linkProps} />;\n }\n\n const {\n type = 'button',\n disabled,\n href: _href,\n target: _target,\n rel: _rel,\n renderLink: _renderLink,\n ...buttonProps\n } = props as Omit<typeof props, 'variant' \| 'size' \| 'loading' \| 'href'> & {\n type?: 'button' \| 'submit' \| 'reset';\n disabled?: boolean;\n href?: string;\n target?: string;\n rel?: string;\n renderLink?: unknown;\n };\n\n return (\n <button\n ref={ref as Ref<HTMLButtonElement>}\n type={type}\n disabled={disabled \|\| loading}\n className={classes}\n aria-busy={loading \|\| undefined}\n {...buttonProps}\n >\n {content}\n </button>\n );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,24 +1,32 @@
 require('./Button.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const button = "_button_1utks_1";
-const button__content = "_button__content_1utks_179";
-const button__spinner = "_button__spinner_1utks_187";
+const button = "_button_h8l0q_1";
+const button__content = "_button__content_h8l0q_190";
+const button__media = "_button__media_h8l0q_198";
+const button__spinner = "_button__spinner_h8l0q_230";
 const styles = {
   button,
-  "button--full-width": "_button--full-width_1utks_18",
-  "button--normal": "_button--normal_1utks_25",
-  "button--small": "_button--small_1utks_32",
-  "button--primary": "_button--primary_1utks_41",
-  "button--secondary": "_button--secondary_1utks_63",
-  "button--tertiary": "_button--tertiary_1utks_89",
-  "button--disabled": "_button--disabled_1utks_112",
-  "button--loading": "_button--loading_1utks_175",
+  "button--full-width": "_button--full-width_h8l0q_20",
+  "button--normal": "_button--normal_h8l0q_27",
+  "button--small": "_button--small_h8l0q_34",
+  "button--has-media": "_button--has-media_h8l0q_42",
+  "button--media-start": "_button--media-start_h8l0q_42",
+  "button--media-end": "_button--media-end_h8l0q_46",
+  "button--primary": "_button--primary_h8l0q_52",
+  "button--secondary": "_button--secondary_h8l0q_74",
+  "button--tertiary": "_button--tertiary_h8l0q_100",
+  "button--disabled": "_button--disabled_h8l0q_123",
+  "button--loading": "_button--loading_h8l0q_186",
   button__content,
+  button__media,
+  "button__media--icon": "_button__media--icon_h8l0q_206",
+  "button__media--image": "_button__media--image_h8l0q_217",
   button__spinner
 };
 exports.button = button;
 exports.button__content = button__content;
+exports.button__media = button__media;
 exports.button__spinner = button__spinner;
 exports.default = styles;
 //# sourceMappingURL=Button.module.css.cjs.map

package/dist/components/Button/Button.module.css.cjs.map CHANGED Viewed

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

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

@@ -1,23 +1,31 @@
 import './Button.css';
-const button = "_button_1utks_1";
-const button__content = "_button__content_1utks_179";
-const button__spinner = "_button__spinner_1utks_187";
+const button = "_button_h8l0q_1";
+const button__content = "_button__content_h8l0q_190";
+const button__media = "_button__media_h8l0q_198";
+const button__spinner = "_button__spinner_h8l0q_230";
 const styles = {
   button,
-  "button--full-width": "_button--full-width_1utks_18",
-  "button--normal": "_button--normal_1utks_25",
-  "button--small": "_button--small_1utks_32",
-  "button--primary": "_button--primary_1utks_41",
-  "button--secondary": "_button--secondary_1utks_63",
-  "button--tertiary": "_button--tertiary_1utks_89",
-  "button--disabled": "_button--disabled_1utks_112",
-  "button--loading": "_button--loading_1utks_175",
+  "button--full-width": "_button--full-width_h8l0q_20",
+  "button--normal": "_button--normal_h8l0q_27",
+  "button--small": "_button--small_h8l0q_34",
+  "button--has-media": "_button--has-media_h8l0q_42",
+  "button--media-start": "_button--media-start_h8l0q_42",
+  "button--media-end": "_button--media-end_h8l0q_46",
+  "button--primary": "_button--primary_h8l0q_52",
+  "button--secondary": "_button--secondary_h8l0q_74",
+  "button--tertiary": "_button--tertiary_h8l0q_100",
+  "button--disabled": "_button--disabled_h8l0q_123",
+  "button--loading": "_button--loading_h8l0q_186",
   button__content,
+  button__media,
+  "button__media--icon": "_button__media--icon_h8l0q_206",
+  "button__media--image": "_button__media--image_h8l0q_217",
   button__spinner
 };
 export {
   button,
   button__content,
+  button__media,
   button__spinner,
   styles as default
 };

package/dist/components/Button/Button.module.css.js.map CHANGED Viewed

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

package/dist/components/Button/Button.types.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { ComponentPropsWithRef, ReactNode } from 'react';
+import { ComponentPropsWithRef, ComponentType, ReactElement, ReactNode, SVGProps } from 'react';
 /**
  * Visual variant of the Button.
  *
@@ -14,6 +14,9 @@ export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
  * - `small`  — 32px height, 14px bold text.
  */
 export type ButtonSize = 'normal' | 'small';
+/** SVG icon component rendered as decorative Button media. */
+export type ButtonIcon = ComponentType<SVGProps<SVGSVGElement>>;
+export type ButtonIconPosition = 'start' | 'end';
 export interface ButtonLinkProps extends ComponentPropsWithRef<'a'> {
     readonly href: string;
     readonly children: ReactNode;
@@ -41,8 +44,22 @@ interface ButtonBaseProps {
      * @default false
      */
     readonly loading?: boolean;
+    /**
+     * Position of the optional icon or image relative to the Button text.
+     * @default 'start'
+     */
+    readonly iconPosition?: ButtonIconPosition;
 }
-export type ButtonAsButton = ButtonBaseProps & Omit<ComponentPropsWithRef<'button'>, keyof ButtonBaseProps> & {
+type ButtonMediaProps = {
+    /** Decorative SVG icon rendered inside the Button. */
+    readonly icon?: ButtonIcon;
+    readonly image?: never;
+} | {
+    readonly icon?: never;
+    /** Decorative image element or optimized image component rendered inside the Button. */
+    readonly image?: ReactElement | false | '' | null;
+};
+export type ButtonAsButton = ButtonBaseProps & ButtonMediaProps & Omit<ComponentPropsWithRef<'button'>, keyof ButtonBaseProps> & {
     /** When omitted, the element renders as a `<button>`. */
     readonly href?: never;
     /** Anchor-only props are intentionally unsupported in button mode. */
@@ -50,7 +67,7 @@ export type ButtonAsButton = ButtonBaseProps & Omit<ComponentPropsWithRef<'butto
     readonly rel?: never;
     readonly renderLink?: never;
 };
-export type ButtonAsAnchor = ButtonBaseProps & Omit<ComponentPropsWithRef<'a'>, keyof ButtonBaseProps> & {
+export type ButtonAsAnchor = ButtonBaseProps & ButtonMediaProps & Omit<ComponentPropsWithRef<'a'>, keyof ButtonBaseProps> & {
     /** When `href` is provided, the element renders as an `<a>`. */
     readonly href: string;
     /** Button-only props are intentionally unsupported in anchor mode. */

package/dist/components/Button/Button.types.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,~~EAAE~~,qBAAqB,~~EAAE~~,SAAS,~~EAAE~~,MAAM,OAAO,CAAC;~~AAE9D~~;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE5C,MAAM,WAAW,eAAgB,SAAQ,qBAAqB,CAAC,GAAG,CAAC;IAC/D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAChC;AAED,UAAU,eAAe;IACrB;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC3B;;;;;OAKG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;~~CAC9B~~;AAED,MAAM,MAAM,cAAc,GAAG,eAAe,GACxC,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,eAAe,CAAC,GAAG;IAC3D,yDAAyD;IACzD,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,sEAAsE;IACtE,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC;IACxB,QAAQ,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;CAC/B,CAAC;AAEN,MAAM,MAAM,cAAc,GAAG,eAAe,GACxC,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,eAAe,CAAC,GAAG;IACtD,gEAAgE;IAChE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,sEAAsE;IACtE,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB;;;;;;;;;;;;;OAaG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;CAC/D,CAAC;AAEN;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC"}
1	+ {"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,qBAAqB,EACrB,aAAa,EACb,YAAY,EACZ,SAAS,EACT,QAAQ,EACX,MAAM,OAAO,CAAC;AAEf;;;;;;GAMG;AACH,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE5C,8DAA8D;AAC9D,MAAM,MAAM,UAAU,GAAG,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAAC;AAEhE,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,KAAK,CAAC;AAEjD,MAAM,WAAW,eAAgB,SAAQ,qBAAqB,CAAC,GAAG,CAAC;IAC/D,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAChC;AAED,UAAU,eAAe;IACrB;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,aAAa,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC3B;;;;;OAKG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,kBAAkB,CAAC;CAC9C;AAED,KAAK,gBAAgB,GACf;IACI,sDAAsD;IACtD,QAAQ,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC;CAC1B,GACD;IACI,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,wFAAwF;IACxF,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,GAAG,KAAK,GAAG,EAAE,GAAG,IAAI,CAAC;CACrD,CAAC;AAER,MAAM,MAAM,cAAc,GAAG,eAAe,GACxC,gBAAgB,GAChB,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,eAAe,CAAC,GAAG;IAC3D,yDAAyD;IACzD,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,sEAAsE;IACtE,QAAQ,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC;IACxB,QAAQ,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,UAAU,CAAC,EAAE,KAAK,CAAC;CAC/B,CAAC;AAEN,MAAM,MAAM,cAAc,GAAG,eAAe,GACxC,gBAAgB,GAChB,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAAE,MAAM,eAAe,CAAC,GAAG;IACtD,gEAAgE;IAChE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,sEAAsE;IACtE,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC;IAC1B,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC;IACtB;;;;;;;;;;;;;OAaG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,SAAS,CAAC;CAC/D,CAAC;AAEN;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG,cAAc,GAAG,cAAc,CAAC"}

package/dist/components/Button/index.d.ts CHANGED Viewed

@@ -1,3 +1,3 @@
 export { Button } from './Button';
-export type { ButtonProps, ButtonLinkProps, ButtonVariant, ButtonSize } from './Button.types';
+export type { ButtonProps, ButtonLinkProps, ButtonVariant, ButtonSize, ButtonIcon, ButtonIconPosition, } from './Button.types';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Button/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,~~EAAE~~,WAAW,~~EAAE~~,eAAe,~~EAAE~~,aAAa,~~EAAE~~,UAAU,~~EAAE~~,MAAM,gBAAgB,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EACR,WAAW,EACX,eAAe,EACf,aAAa,EACb,UAAU,EACV,UAAU,EACV,kBAAkB,GACrB,MAAM,gBAAgB,CAAC"}

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

@@ -2,8 +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 elevation_module = require("../../styles/utils/elevation.module.css.cjs");
+const index = require("../../styles/utils/index.cjs");
 const ButtonCard_module = require("./ButtonCard.module.css.cjs");
 const cn = require("../../utils/cn/cn.cjs");
 const ButtonCard = ({
@@ -22,10 +21,11 @@ const ButtonCard = ({
   const classes = cn.cn(
     ButtonCard_module["button-card"],
     ButtonCard_module[`button-card--${size}`],
-    focus_module.default.focusable,
-    elevation_module.default.elevationLow,
+    index.focusStyles.focusable,
+    index.elevationStyles.elevationLow,
     className
   );
+  const withContainer = (element) => size === "dynamic" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: ButtonCard_module["button-card-container"], children: element }) : element;
   const IconComponent = icon;
   const media = IconComponent != null ? /* @__PURE__ */ jsxRuntime.jsx(
     "span",
@@ -78,9 +78,12 @@ const ButtonCard = ({
       children: content
     };
     if (renderLink) {
+      if (size === "dynamic") {
+        return /* @__PURE__ */ jsxRuntime.jsx("span", { className: ButtonCard_module["button-card-container"], children: renderLink(linkProps) });
+      }
       return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderLink(linkProps) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("a", { ...linkProps });
+    return withContainer(/* @__PURE__ */ jsxRuntime.jsx("a", { ...linkProps }));
   }
   const {
     type = "button",
@@ -90,15 +93,17 @@ const ButtonCard = ({
     renderLink: _renderLink,
     ...buttonProps
   } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      ref,
-      type,
-      className: classes,
-      ...buttonProps,
-      children: content
-    }
+  return withContainer(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        type,
+        className: classes,
+        ...buttonProps,
+        children: content
+      }
+    )
   );
 };
 exports.ButtonCard = ButtonCard;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonCard.cjs","sources":["../../../src/components/ButtonCard/ButtonCard.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode, Ref } from 'react';\nimport { ChevronRight, Open } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport ~~focusStyles~~ ~~from~~ ~~'../../styles/utils/focus.module.css';\nimport~~ ~~elevationStyles~~ from '../../styles/utils~~/elevation.module.css~~';\nimport styles from './ButtonCard.module.css';\nimport type { ButtonCardLinkProps, ButtonCardProps } from './ButtonCard.types';\n\nexport const ButtonCard = ({\n title,\n subtitle,\n size = 'medium',\n icon,\n image,\n isExternal = false,\n externalLinkAriaLabel = 'avautuu uuteen välilehteen',\n className,\n ref,\n ...props\n}: ButtonCardProps) => {\n const isAnchor = 'href' in props && (props as { href?: string }).href != null;\n\n const classes = cn(\n styles['button-card'],\n styles[`button-card--${size}`],\n focusStyles.focusable,\n elevationStyles.elevationLow,\n className,\n );\n\n const IconComponent = icon;\n\n const media =\n IconComponent != null ? (\n <span\n className={cn(styles['button-card__media'], styles['button-card__media--icon'])}\n aria-hidden=\"true\"\n >\n <IconComponent aria-hidden=\"true\" />\n </span>\n ) : image ? (\n <span className={cn(styles['button-card__media'], styles['button-card__media--image'])}>\n {image}\n </span>\n ) : null;\n\n const explicitTarget = isAnchor\n ? (props as { target?: string }).target?.toLowerCase()\n : undefined;\n // The link opens a new tab when isExternal is set or the target is _blank.\n const opensInNewTab = isExternal \|\| explicitTarget === '_blank';\n const Indicator = opensInNewTab ? Open : ChevronRight;\n\n const content = (\n <>\n {media}\n <span className={styles['button-card__content']}>\n <span className={styles['button-card__text']}>\n <span className={styles['button-card__title']}>{title}</span>\n {subtitle != null && (\n <span className={styles['button-card__subtitle']}>{subtitle}</span>\n )}\n </span>\n <span className={styles['button-card__indicator']} aria-hidden=\"true\">\n <Indicator aria-hidden=\"true\" />\n </span>\n </span>\n {opensInNewTab && externalLinkAriaLabel && (\n <span className={styles['button-card__sr-only']}>\n {` (${externalLinkAriaLabel})`}\n </span>\n )}\n </>\n );\n\n if (isAnchor) {\n const {\n href,\n renderLink,\n target: targetProp,\n rel,\n disabled: _disabled,\n ...safeAnchorProps\n } = props as unknown as ComponentPropsWithRef<'a'> & {\n href: string;\n renderLink?: (props: ButtonCardLinkProps) => ReactNode;\n disabled?: boolean;\n };\n\n // isExternal is authoritative and forces a new tab; an explicit _blank is preserved.\n const target = isExternal ? '_blank' : targetProp;\n const shouldHardenRel = target?.toLowerCase() === '_blank';\n const relTokens = new Set(\n (rel ?? '')\n .split(/\\s+/)\n .filter(Boolean)\n .map((token) => token.toLowerCase()),\n );\n\n if (shouldHardenRel) {\n relTokens.add('noopener');\n relTokens.add('noreferrer');\n }\n\n const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n const linkProps = {\n ...safeAnchorProps,\n ref: ref as Ref<HTMLAnchorElement>,\n href,\n target,\n rel: hardenedRel,\n className: classes,\n children: content,\n };\n\n if (renderLink) {\n return <>{renderLink(linkProps)}</>;\n }\n\n return <a {...linkProps} ~~/>;\~~n }\n\n const {\n type = 'button',\n href: _href,\n target: _target,\n rel: _rel,\n renderLink: _renderLink,\n ...buttonProps\n } = props as unknown as ComponentPropsWithRef<'button'> & {\n href?: string;\n target?: string;\n rel?: string;\n renderLink?: unknown;\n };\n\n return (\n <button\n ref={ref as Ref<HTMLButtonElement>}\n type={type}\n className={classes}\n {...buttonProps}\n >\n {content}\n </button>\n );\n};\n"],"names":["cn","styles","focusStyles","elevationStyles","jsx","Open","ChevronRight","jsxs","Fragment"],"mappings":"~~;;;;;;;;AAQO~~,MAAM,aAAa,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,wBAAwB;AAAA,EACxB;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAuB;AACnB,QAAM,WAAW,UAAU,SAAU,MAA4B,QAAQ;AAEzE,QAAM,UAAUA,GAAAA;AAAAA,IACZC,kBAAO,aAAa;AAAA,IACpBA,kBAAO,gBAAgB,IAAI,EAAE;AAAA,IAC7BC,~~aAAAA~~,~~QAAY~~;AAAA,IACZC,~~iBAAAA~~,~~QAAgB~~;AAAA,IAChB;AAAA,EAAA;~~AAGJ~~,QAAM,gBAAgB;AAEtB,QAAM,QACF,iBAAiB,~~OACbC~~,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWJ,GAAAA,GAAGC,kBAAO,oBAAoB,GAAGA,kBAAO,0BAA0B,CAAC;AAAA,MAC9E,eAAY;AAAA,MAEZ,UAAAG,2BAAAA,IAAC,eAAA,EAAc,eAAY,OAAA,CAAO;AAAA,IAAA;AAAA,EAAA,IAEtC,QACAA,2BAAAA,IAAC,QAAA,EAAK,WAAWJ,GAAAA,GAAGC,kBAAO,oBAAoB,GAAGA,kBAAO,2BAA2B,CAAC,GAChF,iBACL,IACA;AAER,QAAM,iBAAiB,WAChB,MAA8B,QAAQ,gBACvC;AAEN,QAAM,gBAAgB,cAAc,mBAAmB;AACvD,QAAM,YAAY,gBAAgBI,MAAAA,OAAOC,MAAAA;AAEzC,QAAM,UACFC,2BAAAA,KAAAC,WAAAA,UAAA,EACK,UAAA;AAAA,IAAA;AAAA,IACDD,2BAAAA,KAAC,QAAA,EAAK,WAAWN,kBAAO,sBAAsB,GAC1C,UAAA;AAAA,MAAAM,2BAAAA,KAAC,QAAA,EAAK,WAAWN,kBAAO,mBAAmB,GACvC,UAAA;AAAA,QAAAG,+BAAC,QAAA,EAAK,WAAWH,kBAAO,oBAAoB,GAAI,UAAA,OAAM;AAAA,QACrD,YAAY,QACTG,2BAAAA,IAAC,QAAA,EAAK,WAAWH,kBAAO,uBAAuB,GAAI,UAAA,SAAA,CAAS;AAAA,MAAA,GAEpE;AAAA,MACAG,2BAAAA,IAAC,QAAA,EAAK,WAAWH,kBAAO,wBAAwB,GAAG,eAAY,QAC3D,UAAAG,2BAAAA,IAAC,WAAA,EAAU,eAAY,OAAA,CAAO,EAAA,CAClC;AAAA,IAAA,GACJ;AAAA,IACC,iBAAiB,yBACdA,2BAAAA,IAAC,QAAA,EAAK,WAAWH,kBAAO,sBAAsB,GACzC,UAAA,KAAK,qBAAqB,IAAA,CAC/B;AAAA,EAAA,GAER;AAGJ,MAAI,UAAU;AACV,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA,UAAU;AAAA,MACV,GAAG;AAAA,IAAA,IACH;AAOJ,UAAM,SAAS,aAAa,WAAW;AACvC,UAAM,kBAAkB,QAAQ,YAAA,MAAkB;AAClD,UAAM,YAAY,IAAI;AAAA,OACjB,OAAO,IACH,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAAC,UAAU,MAAM,aAAa;AAAA,IAAA;AAG3C,QAAI,iBAAiB;AACjB,gBAAU,IAAI,UAAU;AACxB,gBAAU,IAAI,YAAY;AAAA,IAC9B;AAEA,UAAM,cAAc,UAAU,OAAO,IAAI,MAAM,KAAK,SAAS,EAAE,KAAK,GAAG,IAAI;AAE3E,UAAM,YAAY;AAAA,MACd,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,WAAW;AAAA,MACX,UAAU;AAAA,IAAA;AAGd,QAAI,YAAY;AACZ,aAAOG,2BAAAA,IAAAI,WAAAA,UAAA,EAAG,UAAA,WAAW,SAAS,GAAE;AAAA,IACpC;AAEA,~~WAAOJ,+BAAC~~,KAAA,EAAG,GAAG,~~UAAA~~,~~CAAW~~;AAAA,~~EAC7B~~;AAEA,QAAM;AAAA,IACF,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACH;AAOJ,~~SACIA~~,2BAAAA;AAAAA,~~IAAC~~;AAAA,~~IAAA~~;AAAA,~~MACG~~;AAAA,~~MACA~~;AAAA,~~MACA~~,WAAW;AAAA,~~MACV~~,GAAG;AAAA,~~MAEH~~,UAAA;AAAA,IAAA;AAAA,~~EAAA~~;~~AAGb~~;;"}
1	+ {"version":3,"file":"ButtonCard.cjs","sources":["../../../src/components/ButtonCard/ButtonCard.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode, Ref } from 'react';\nimport { ChevronRight, Open } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport { elevationStyles, focusStyles } from '../../styles/utils';\nimport styles from './ButtonCard.module.css';\nimport type { ButtonCardLinkProps, ButtonCardProps } from './ButtonCard.types';\n\nexport const ButtonCard = ({\n title,\n subtitle,\n size = 'medium',\n icon,\n image,\n isExternal = false,\n externalLinkAriaLabel = 'avautuu uuteen välilehteen',\n className,\n ref,\n ...props\n}: ButtonCardProps) => {\n const isAnchor = 'href' in props && (props as { href?: string }).href != null;\n\n const classes = cn(\n styles['button-card'],\n styles[`button-card--${size}`],\n focusStyles.focusable,\n elevationStyles.elevationLow,\n className,\n );\n const withContainer = (element: ReactNode) =>\n size === 'dynamic' ? (\n <span className={styles['button-card-container']}>{element}</span>\n ) : (\n element\n );\n\n const IconComponent = icon;\n\n const media =\n IconComponent != null ? (\n <span\n className={cn(styles['button-card__media'], styles['button-card__media--icon'])}\n aria-hidden=\"true\"\n >\n <IconComponent aria-hidden=\"true\" />\n </span>\n ) : image ? (\n <span className={cn(styles['button-card__media'], styles['button-card__media--image'])}>\n {image}\n </span>\n ) : null;\n\n const explicitTarget = isAnchor\n ? (props as { target?: string }).target?.toLowerCase()\n : undefined;\n // The link opens a new tab when isExternal is set or the target is _blank.\n const opensInNewTab = isExternal \|\| explicitTarget === '_blank';\n const Indicator = opensInNewTab ? Open : ChevronRight;\n\n const content = (\n <>\n {media}\n <span className={styles['button-card__content']}>\n <span className={styles['button-card__text']}>\n <span className={styles['button-card__title']}>{title}</span>\n {subtitle != null && (\n <span className={styles['button-card__subtitle']}>{subtitle}</span>\n )}\n </span>\n <span className={styles['button-card__indicator']} aria-hidden=\"true\">\n <Indicator aria-hidden=\"true\" />\n </span>\n </span>\n {opensInNewTab && externalLinkAriaLabel && (\n <span className={styles['button-card__sr-only']}>\n {` (${externalLinkAriaLabel})`}\n </span>\n )}\n </>\n );\n\n if (isAnchor) {\n const {\n href,\n renderLink,\n target: targetProp,\n rel,\n disabled: _disabled,\n ...safeAnchorProps\n } = props as unknown as ComponentPropsWithRef<'a'> & {\n href: string;\n renderLink?: (props: ButtonCardLinkProps) => ReactNode;\n disabled?: boolean;\n };\n\n // isExternal is authoritative and forces a new tab; an explicit _blank is preserved.\n const target = isExternal ? '_blank' : targetProp;\n const shouldHardenRel = target?.toLowerCase() === '_blank';\n const relTokens = new Set(\n (rel ?? '')\n .split(/\\s+/)\n .filter(Boolean)\n .map((token) => token.toLowerCase()),\n );\n\n if (shouldHardenRel) {\n relTokens.add('noopener');\n relTokens.add('noreferrer');\n }\n\n const hardenedRel = relTokens.size > 0 ? Array.from(relTokens).join(' ') : undefined;\n\n const linkProps = {\n ...safeAnchorProps,\n ref: ref as Ref<HTMLAnchorElement>,\n href,\n target,\n rel: hardenedRel,\n className: classes,\n children: content,\n };\n\n if (renderLink) {\n if (size === 'dynamic') {\n return (\n <span className={styles['button-card-container']}>{renderLink(linkProps)}</span>\n );\n }\n\n return <>{renderLink(linkProps)}</>;\n }\n\n return withContainer(<a {...linkProps} />);\n }\n\n const {\n type = 'button',\n href: _href,\n target: _target,\n rel: _rel,\n renderLink: _renderLink,\n ...buttonProps\n } = props as unknown as ComponentPropsWithRef<'button'> & {\n href?: string;\n target?: string;\n rel?: string;\n renderLink?: unknown;\n };\n\n return withContainer(\n <button\n ref={ref as Ref<HTMLButtonElement>}\n type={type}\n className={classes}\n {...buttonProps}\n >\n {content}\n </button>,\n );\n};\n"],"names":["cn","styles","focusStyles","elevationStyles","jsx","Open","ChevronRight","jsxs","Fragment"],"mappings":";;;;;;;AAOO,MAAM,aAAa,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,wBAAwB;AAAA,EACxB;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAuB;AACnB,QAAM,WAAW,UAAU,SAAU,MAA4B,QAAQ;AAEzE,QAAM,UAAUA,GAAAA;AAAAA,IACZC,kBAAO,aAAa;AAAA,IACpBA,kBAAO,gBAAgB,IAAI,EAAE;AAAA,IAC7BC,MAAAA,YAAY;AAAA,IACZC,MAAAA,gBAAgB;AAAA,IAChB;AAAA,EAAA;AAEJ,QAAM,gBAAgB,CAAC,YACnB,SAAS,YACLC,2BAAAA,IAAC,QAAA,EAAK,WAAWH,kBAAO,uBAAuB,GAAI,UAAA,QAAA,CAAQ,IAE3D;AAGR,QAAM,gBAAgB;AAEtB,QAAM,QACF,iBAAiB,OACbG,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWJ,GAAAA,GAAGC,kBAAO,oBAAoB,GAAGA,kBAAO,0BAA0B,CAAC;AAAA,MAC9E,eAAY;AAAA,MAEZ,UAAAG,2BAAAA,IAAC,eAAA,EAAc,eAAY,OAAA,CAAO;AAAA,IAAA;AAAA,EAAA,IAEtC,QACAA,2BAAAA,IAAC,QAAA,EAAK,WAAWJ,GAAAA,GAAGC,kBAAO,oBAAoB,GAAGA,kBAAO,2BAA2B,CAAC,GAChF,iBACL,IACA;AAER,QAAM,iBAAiB,WAChB,MAA8B,QAAQ,gBACvC;AAEN,QAAM,gBAAgB,cAAc,mBAAmB;AACvD,QAAM,YAAY,gBAAgBI,MAAAA,OAAOC,MAAAA;AAEzC,QAAM,UACFC,2BAAAA,KAAAC,WAAAA,UAAA,EACK,UAAA;AAAA,IAAA;AAAA,IACDD,2BAAAA,KAAC,QAAA,EAAK,WAAWN,kBAAO,sBAAsB,GAC1C,UAAA;AAAA,MAAAM,2BAAAA,KAAC,QAAA,EAAK,WAAWN,kBAAO,mBAAmB,GACvC,UAAA;AAAA,QAAAG,+BAAC,QAAA,EAAK,WAAWH,kBAAO,oBAAoB,GAAI,UAAA,OAAM;AAAA,QACrD,YAAY,QACTG,2BAAAA,IAAC,QAAA,EAAK,WAAWH,kBAAO,uBAAuB,GAAI,UAAA,SAAA,CAAS;AAAA,MAAA,GAEpE;AAAA,MACAG,2BAAAA,IAAC,QAAA,EAAK,WAAWH,kBAAO,wBAAwB,GAAG,eAAY,QAC3D,UAAAG,2BAAAA,IAAC,WAAA,EAAU,eAAY,OAAA,CAAO,EAAA,CAClC;AAAA,IAAA,GACJ;AAAA,IACC,iBAAiB,yBACdA,2BAAAA,IAAC,QAAA,EAAK,WAAWH,kBAAO,sBAAsB,GACzC,UAAA,KAAK,qBAAqB,IAAA,CAC/B;AAAA,EAAA,GAER;AAGJ,MAAI,UAAU;AACV,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA,UAAU;AAAA,MACV,GAAG;AAAA,IAAA,IACH;AAOJ,UAAM,SAAS,aAAa,WAAW;AACvC,UAAM,kBAAkB,QAAQ,YAAA,MAAkB;AAClD,UAAM,YAAY,IAAI;AAAA,OACjB,OAAO,IACH,MAAM,KAAK,EACX,OAAO,OAAO,EACd,IAAI,CAAC,UAAU,MAAM,aAAa;AAAA,IAAA;AAG3C,QAAI,iBAAiB;AACjB,gBAAU,IAAI,UAAU;AACxB,gBAAU,IAAI,YAAY;AAAA,IAC9B;AAEA,UAAM,cAAc,UAAU,OAAO,IAAI,MAAM,KAAK,SAAS,EAAE,KAAK,GAAG,IAAI;AAE3E,UAAM,YAAY;AAAA,MACd,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,WAAW;AAAA,MACX,UAAU;AAAA,IAAA;AAGd,QAAI,YAAY;AACZ,UAAI,SAAS,WAAW;AACpB,eACIG,+BAAC,UAAK,WAAWH,kBAAO,uBAAuB,GAAI,UAAA,WAAW,SAAS,GAAE;AAAA,MAEjF;AAEA,aAAOG,2BAAAA,IAAAI,WAAAA,UAAA,EAAG,UAAA,WAAW,SAAS,GAAE;AAAA,IACpC;AAEA,WAAO,cAAcJ,2BAAAA,IAAC,KAAA,EAAG,GAAG,WAAW,CAAE;AAAA,EAC7C;AAEA,QAAM;AAAA,IACF,OAAO;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACH;AAOJ,SAAO;AAAA,IACHA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACV,GAAG;AAAA,QAEH,UAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACL;AAER;;"}