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/ContentCard/ContentCard.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentCard.cjs","sources":["../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import { useId } from 'react';\nimport type { CSSProperties, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport elevationStyles from '../../styles/utils~~/elevation.module.css~~';\nimport styles from './ContentCard.module.css';\nimport type { ContentCardLogoBackground, ContentCardProps } from './ContentCard.types';\n\nconst logoBackgroundToken: Record<ContentCardLogoBackground, string> = {\n white: 'var(--color-semantic-surface-base)',\n 'sand-soft': 'var(--color-semantic-surface-neutral-soft)',\n 'sand-mid': 'var(--color-semantic-surface-neutral-mid)',\n 'sand-strong': 'var(--color-semantic-surface-neutral-strong)',\n 'pink-soft': 'var(--color-semantic-surface-primary-soft)',\n 'pink-mid': 'var(--color-semantic-surface-primary-mid)',\n 'pink-strong': 'var(--color-semantic-surface-primary-strong)',\n 'plum-soft': 'var(--color-semantic-surface-secondary-soft)',\n 'plum-mid': 'var(--color-semantic-surface-secondary-mid)',\n 'plum-strong': 'var(--color-semantic-surface-secondary-strong)',\n};\n\~~n// A boolean ReactNode (e.g. from `condition && <X />`) renders nothing, so treat it as absent.\nconst isRenderable = (node: ReactNode): boolean => node != null && typeof node !== 'boolean';\n\~~nexport const ContentCard = ({\n media,\n mediaKind = 'image',\n mediaBackground,\n mediaWidth = '1/3',\n mediaPosition = 'start',\n titlePrefix,\n title,\n headingLevel = 'h3',\n body,\n actions,\n appearance = 'plain',\n as = 'article',\n className,\n ref,\n ...props\n}: ContentCardProps) => {\n const titleId = useId();\n const HeadingLevel = headingLevel;\n // Cast to ElementType so the constrained union of tags renders without ref/props conflicts.\n const Root = as as ElementType;\n const hasMedia = isRenderable(media);\n const ariaLabel = props['aria-label'];\n // Keep an explicit aria-labelledby; only the generated title fallback is suppressed for a\n // bare div or when an aria-label is provided.\n const ariaLabelledBy =\n props['aria-labelledby'] ?? (ariaLabel \|\| as === 'div' ? undefined : titleId);\n\n return (\n <Root\n ref={ref}\n {...props}\n className={cn(\n styles['content-card'],\n hasMedia && mediaWidth === '1/2' && styles['content-card--media-half'],\n hasMedia && mediaPosition === 'end' && styles['content-card--media-end'],\n appearance === 'border' && styles['content-card--border'],\n appearance === 'elevated' && styles['content-card--elevated'],\n appearance === 'elevated' && elevationStyles.elevationLow,\n className,\n )}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n >\n <div className={styles['content-card__layout']}>\n {hasMedia && (\n <div\n className={cn(\n styles['content-card__media'],\n mediaKind === 'logo'\n ? styles['content-card__media--logo']\n : styles['content-card__media--image'],\n )}\n style={\n mediaKind === 'logo' && mediaBackground != null\n ? ({\n '--_cc-logo-bg': logoBackgroundToken[mediaBackground],\n } as CSSProperties)\n : undefined\n }\n >\n <div className={styles['content-card__media-inner']}>{media}</div>\n </div>\n )}\n\n <div className={styles['content-card__content']}>\n <div className={styles['content-card__content-inner']}>\n <div className={styles['content-card__body-region']}>\n <div className={styles['content-card__header']}>\n {isRenderable(titlePrefix) && (\n <div className={styles['content-card__prefix']}>\n {titlePrefix}\n </div>\n )}\n <HeadingLevel\n id={titleId}\n className={styles['content-card__title']}\n >\n {title}\n </HeadingLevel>\n </div>\n {isRenderable(body) && (\n <div className={cn(styles['content-card__body'], 'dds-prose')}>\n {body}\n </div>\n )}\n </div>\n {isRenderable(actions) && (\n <div className={styles['content-card__actions']}>{actions}</div>\n )}\n </div>\n </div>\n </div>\n </Root>\n );\n};\n"],"names":["useId","jsx","cn","styles","elevationStyles","jsxs"],"mappings":"~~;;;;;;;AAOA~~,MAAM,sBAAiE;AAAA,EACnE,OAAO;AAAA,EACP,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AACnB;~~AAGA~~,MAAM,~~eAAe,CAAC,SAA6B,QAAQ,QAAQ,OAAO,SAAS;AAE5E,MAAM,~~cAAc,CAAC;AAAA,EACxB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAwB;AACpB,QAAM,UAAUA,MAAAA,MAAA;AAChB,QAAM,eAAe;AAErB,QAAM,OAAO;AACb,QAAM,~~WAAW~~,aAAa,KAAK;AACnC,QAAM,YAAY,MAAM,YAAY;AAGpC,QAAM,iBACF,MAAM,iBAAiB,MAAM,aAAa,OAAO,QAAQ,SAAY;AAEzE,SACIC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAWC,GAAAA;AAAAA,QACPC,mBAAO,cAAc;AAAA,QACrB,YAAY,eAAe,SAASA,mBAAO,0BAA0B;AAAA,QACrE,YAAY,kBAAkB,SAASA,mBAAO,yBAAyB;AAAA,QACvE,eAAe,YAAYA,mBAAO,sBAAsB;AAAA,QACxD,eAAe,cAAcA,mBAAO,wBAAwB;AAAA,QAC5D,eAAe,cAAcC,~~iBAAAA~~,~~QAAgB~~;AAAA,QAC7C;AAAA,MAAA;AAAA,MAEJ,cAAY;AAAA,MACZ,mBAAiB;AAAA,MAEjB,UAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAWF,mBAAO,sBAAsB,GACxC,UAAA;AAAA,QAAA,YACGF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWC,GAAAA;AAAAA,cACPC,mBAAO,qBAAqB;AAAA,cAC5B,cAAc,SACRA,mBAAO,2BAA2B,IAClCA,mBAAO,4BAA4B;AAAA,YAAA;AAAA,YAE7C,OACI,cAAc,UAAU,mBAAmB,OACpC;AAAA,cACG,iBAAiB,oBAAoB,eAAe;AAAA,YAAA,IAExD;AAAA,YAGV,yCAAC,OAAA,EAAI,WAAWA,mBAAO,2BAA2B,GAAI,UAAA,MAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAIpEF,2BAAAA,IAAC,OAAA,EAAI,WAAWE,mBAAO,uBAAuB,GAC1C,UAAAE,2BAAAA,KAAC,OAAA,EAAI,WAAWF,mBAAO,6BAA6B,GAChD,UAAA;AAAA,UAAAE,2BAAAA,KAAC,OAAA,EAAI,WAAWF,mBAAO,2BAA2B,GAC9C,UAAA;AAAA,YAAAE,2BAAAA,KAAC,OAAA,EAAI,WAAWF,mBAAO,sBAAsB,GACxC,UAAA;AAAA,~~cAAA~~,aAAa,WAAW,~~KACrBF~~,2BAAAA,IAAC,OAAA,EAAI,WAAWE,mBAAO,sBAAsB,GACxC,UAAA,YAAA,CACL;AAAA,cAEJF,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,WAAWE,mBAAO,qBAAqB;AAAA,kBAEtC,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACL,GACJ;AAAA,~~YACC~~,aAAa,IAAI,~~KACdF~~,+BAAC,OAAA,EAAI,WAAWC,MAAGC,mBAAO,oBAAoB,GAAG,WAAW,GACvD,UAAA,KAAA,CACL;AAAA,UAAA,GAER;AAAA,~~UACC~~,aAAa,OAAO,~~KACjBF~~,2BAAAA,IAAC,SAAI,WAAWE,mBAAO,uBAAuB,GAAI,UAAA,QAAA,CAAQ;AAAA,QAAA,EAAA,CAElE,EAAA,CACJ;AAAA,MAAA,EAAA,CACJ;AAAA,IAAA;AAAA,EAAA;AAGZ;;"}
1	+ {"version":3,"file":"ContentCard.cjs","sources":["../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import { useId } from 'react';\nimport type { CSSProperties, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport { isRenderable } from '../../utils/isRenderable';\nimport { elevationStyles } from '../../styles/utils';\nimport styles from './ContentCard.module.css';\nimport type { ContentCardLogoBackground, ContentCardProps } from './ContentCard.types';\n\nconst logoBackgroundToken: Record<ContentCardLogoBackground, string> = {\n white: 'var(--color-semantic-surface-base)',\n 'sand-soft': 'var(--color-semantic-surface-neutral-soft)',\n 'sand-mid': 'var(--color-semantic-surface-neutral-mid)',\n 'sand-strong': 'var(--color-semantic-surface-neutral-strong)',\n 'pink-soft': 'var(--color-semantic-surface-primary-soft)',\n 'pink-mid': 'var(--color-semantic-surface-primary-mid)',\n 'pink-strong': 'var(--color-semantic-surface-primary-strong)',\n 'plum-soft': 'var(--color-semantic-surface-secondary-soft)',\n 'plum-mid': 'var(--color-semantic-surface-secondary-mid)',\n 'plum-strong': 'var(--color-semantic-surface-secondary-strong)',\n};\n\nexport const ContentCard = ({\n media,\n mediaKind = 'image',\n mediaBackground,\n mediaWidth = '1/3',\n mediaPosition = 'start',\n titlePrefix,\n title,\n headingLevel = 'h3',\n body,\n actions,\n appearance = 'plain',\n as = 'article',\n className,\n ref,\n ...props\n}: ContentCardProps) => {\n const titleId = useId();\n const HeadingLevel = headingLevel;\n // Cast to ElementType so the constrained union of tags renders without ref/props conflicts.\n const Root = as as ElementType;\n const hasMedia = isRenderable(media);\n const ariaLabel = props['aria-label'];\n // Keep an explicit aria-labelledby; only the generated title fallback is suppressed for a\n // bare div or when an aria-label is provided.\n const ariaLabelledBy =\n props['aria-labelledby'] ?? (ariaLabel \|\| as === 'div' ? undefined : titleId);\n\n return (\n <Root\n ref={ref}\n {...props}\n data-color-scheme=\"light\"\n className={cn(\n styles['content-card'],\n hasMedia && mediaWidth === '1/2' && styles['content-card--media-half'],\n hasMedia && mediaPosition === 'end' && styles['content-card--media-end'],\n appearance === 'border' && styles['content-card--border'],\n appearance === 'elevated' && styles['content-card--elevated'],\n appearance === 'elevated' && elevationStyles.elevationLow,\n className,\n )}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n >\n <div className={styles['content-card__layout']}>\n {hasMedia && (\n <div\n className={cn(\n styles['content-card__media'],\n mediaKind === 'logo'\n ? styles['content-card__media--logo']\n : styles['content-card__media--image'],\n )}\n style={\n mediaKind === 'logo' && mediaBackground != null\n ? ({\n '--_cc-logo-bg': logoBackgroundToken[mediaBackground],\n } as CSSProperties)\n : undefined\n }\n >\n <div className={styles['content-card__media-inner']}>{media}</div>\n </div>\n )}\n\n <div className={styles['content-card__content']}>\n <div className={styles['content-card__content-inner']}>\n <div className={styles['content-card__body-region']}>\n <div className={styles['content-card__header']}>\n {isRenderable(titlePrefix) && (\n <div className={styles['content-card__prefix']}>\n {titlePrefix}\n </div>\n )}\n <HeadingLevel\n id={titleId}\n className={styles['content-card__title']}\n >\n {title}\n </HeadingLevel>\n </div>\n {isRenderable(body) && (\n <div className={cn(styles['content-card__body'], 'dds-prose')}>\n {body}\n </div>\n )}\n </div>\n {isRenderable(actions) && (\n <div className={styles['content-card__actions']}>{actions}</div>\n )}\n </div>\n </div>\n </div>\n </Root>\n );\n};\n"],"names":["useId","isRenderable","jsx","cn","styles","elevationStyles","jsxs"],"mappings":";;;;;;;;AAQA,MAAM,sBAAiE;AAAA,EACnE,OAAO;AAAA,EACP,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AACnB;AAEO,MAAM,cAAc,CAAC;AAAA,EACxB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAwB;AACpB,QAAM,UAAUA,MAAAA,MAAA;AAChB,QAAM,eAAe;AAErB,QAAM,OAAO;AACb,QAAM,WAAWC,aAAAA,aAAa,KAAK;AACnC,QAAM,YAAY,MAAM,YAAY;AAGpC,QAAM,iBACF,MAAM,iBAAiB,MAAM,aAAa,OAAO,QAAQ,SAAY;AAEzE,SACIC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,qBAAkB;AAAA,MAClB,WAAWC,GAAAA;AAAAA,QACPC,mBAAO,cAAc;AAAA,QACrB,YAAY,eAAe,SAASA,mBAAO,0BAA0B;AAAA,QACrE,YAAY,kBAAkB,SAASA,mBAAO,yBAAyB;AAAA,QACvE,eAAe,YAAYA,mBAAO,sBAAsB;AAAA,QACxD,eAAe,cAAcA,mBAAO,wBAAwB;AAAA,QAC5D,eAAe,cAAcC,MAAAA,gBAAgB;AAAA,QAC7C;AAAA,MAAA;AAAA,MAEJ,cAAY;AAAA,MACZ,mBAAiB;AAAA,MAEjB,UAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAWF,mBAAO,sBAAsB,GACxC,UAAA;AAAA,QAAA,YACGF,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWC,GAAAA;AAAAA,cACPC,mBAAO,qBAAqB;AAAA,cAC5B,cAAc,SACRA,mBAAO,2BAA2B,IAClCA,mBAAO,4BAA4B;AAAA,YAAA;AAAA,YAE7C,OACI,cAAc,UAAU,mBAAmB,OACpC;AAAA,cACG,iBAAiB,oBAAoB,eAAe;AAAA,YAAA,IAExD;AAAA,YAGV,yCAAC,OAAA,EAAI,WAAWA,mBAAO,2BAA2B,GAAI,UAAA,MAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAIpEF,2BAAAA,IAAC,OAAA,EAAI,WAAWE,mBAAO,uBAAuB,GAC1C,UAAAE,2BAAAA,KAAC,OAAA,EAAI,WAAWF,mBAAO,6BAA6B,GAChD,UAAA;AAAA,UAAAE,2BAAAA,KAAC,OAAA,EAAI,WAAWF,mBAAO,2BAA2B,GAC9C,UAAA;AAAA,YAAAE,2BAAAA,KAAC,OAAA,EAAI,WAAWF,mBAAO,sBAAsB,GACxC,UAAA;AAAA,cAAAH,aAAAA,aAAa,WAAW,KACrBC,2BAAAA,IAAC,OAAA,EAAI,WAAWE,mBAAO,sBAAsB,GACxC,UAAA,YAAA,CACL;AAAA,cAEJF,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,WAAWE,mBAAO,qBAAqB;AAAA,kBAEtC,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACL,GACJ;AAAA,YACCH,aAAAA,aAAa,IAAI,KACdC,+BAAC,OAAA,EAAI,WAAWC,MAAGC,mBAAO,oBAAoB,GAAG,WAAW,GACvD,UAAA,KAAA,CACL;AAAA,UAAA,GAER;AAAA,UACCH,aAAAA,aAAa,OAAO,KACjBC,2BAAAA,IAAC,SAAI,WAAWE,mBAAO,uBAAuB,GAAI,UAAA,QAAA,CAAQ;AAAA,QAAA,EAAA,CAElE,EAAA,CACJ;AAAA,MAAA,EAAA,CACJ;AAAA,IAAA;AAAA,EAAA;AAGZ;;"}

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

@@ -11,13 +11,14 @@
  * gaps stay constant across sizes.
  */
-._content-card_1pa46_10 {
+._content-card_15yr0_10 {
     display: flex;
     flex-direction: column;
     width: 100%;
     min-width: 0;
     /* Reset the base list-item margin when the root renders as <li>. */
     margin: 0;
+    color: var(--color-semantic-foreground-default);
     background-color: var(--color-semantic-surface-base);
     border-radius: var(--radius-semantic-md);
     /* Clips media corners to the card radius; the card's own box-shadow is not clipped. */
@@ -26,12 +27,12 @@
     container-type: inline-size;
 }
-._content-card--border_1pa46_25 {
+._content-card--border_15yr0_26 {
     border: var(--borderwidth-semantic-xs) solid var(--color-semantic-border-neutral-base);
 }
 /* Layout wrapper: a descendant of the container so its direction can respond to card width. */
-._content-card__layout_1pa46_30 {
+._content-card__layout_15yr0_31 {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -40,22 +41,22 @@
 /* ─── Media ─── */
-._content-card__media_1pa46_39 {
+._content-card__media_15yr0_40 {
     position: relative;
     width: 100%;
 }
-._content-card__media--image_1pa46_44 {
+._content-card__media--image_15yr0_45 {
     aspect-ratio: 21 / 9;
 }
-._content-card__media--logo_1pa46_48 {
+._content-card__media--logo_15yr0_49 {
     aspect-ratio: 21 / 9;
     background-color: var(--_cc-logo-bg, var(--color-semantic-surface-neutral-mid));
 }
 /* Absolute inner fills the media box so content can't stretch the aspect ratio. */
-._content-card__media-inner_1pa46_54 {
+._content-card__media-inner_15yr0_55 {
     position: absolute;
     inset: 0;
@@ -69,7 +70,7 @@
 }
 /* Logo sits in a centered 4:3 box and is contained within it. */
-._content-card__media--logo_1pa46_48 ._content-card__media-inner_1pa46_54 {
+._content-card__media--logo_15yr0_49 ._content-card__media-inner_15yr0_55 {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -86,7 +87,7 @@
 /* ─── Content ─── */
-._content-card__content_1pa46_85 {
+._content-card__content_15yr0_86 {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
@@ -96,7 +97,7 @@
 }
 /* Padded stack: a descendant of the content container so padding can respond to content width. */
-._content-card__content-inner_1pa46_95 {
+._content-card__content-inner_15yr0_96 {
     display: flex;
     flex: 1;
     flex-direction: column;
@@ -105,23 +106,23 @@
     padding: var(--spacing-space-20) var(--spacing-space-20) var(--spacing-space-32);
 }
-._content-card__body-region_1pa46_104 {
+._content-card__body-region_15yr0_105 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-space-20);
 }
-._content-card__header_1pa46_110 {
+._content-card__header_15yr0_111 {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-space-4);
 }
-._content-card__prefix_1pa46_116 {
+._content-card__prefix_15yr0_117 {
     align-self: flex-start;
 }
-._content-card__title_1pa46_120 {
+._content-card__title_15yr0_121 {
     margin: 0;
     color: var(--color-semantic-foreground-default);
     font: var(--typography-heading-sm);
@@ -132,7 +133,7 @@
     hyphenate-limit-chars: 12 6 3;
 }
-._content-card__body_1pa46_104 {
+._content-card__body_15yr0_105 {
     margin: 0;
     color: var(--color-semantic-foreground-default);
     font: var(--typography-body-md);
@@ -143,15 +144,15 @@
     hyphenate-limit-chars: 12 6 3;
 }
-._content-card__body_1pa46_104 p {
+._content-card__body_15yr0_105 p {
     margin: 0;
 }
-._content-card__body_1pa46_104 p + p {
+._content-card__body_15yr0_105 p + p {
     margin-top: var(--spacing-space-12);
 }
-._content-card__actions_1pa46_150 {
+._content-card__actions_15yr0_151 {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -165,17 +166,17 @@
 /* ─── Content-area size steps (vertical paddings; based on content width) ─── */
 @container content-card-content (min-width: 24rem) {
-    ._content-card__content-inner_1pa46_95 {
+    ._content-card__content-inner_15yr0_96 {
         padding: var(--spacing-space-24) var(--spacing-space-40) var(--spacing-space-40);
     }
-    ._content-card__title_1pa46_120 {
+    ._content-card__title_15yr0_121 {
         font: var(--typography-heading-md);
     }
 }
 @container content-card-content (min-width: 36rem) {
-    ._content-card__content-inner_1pa46_95 {
+    ._content-card__content-inner_15yr0_96 {
         padding: var(--spacing-space-32) var(--spacing-space-64) var(--spacing-space-48);
     }
 }
@@ -183,54 +184,54 @@
 /* ─── Horizontal layout (card wide enough) ─── */
 @container content-card (min-width: 40rem) {
-    ._content-card__layout_1pa46_30 {
+    ._content-card__layout_15yr0_31 {
         flex-direction: row;
     }
-    ._content-card--media-end_1pa46_186 ._content-card__layout_1pa46_30 {
+    ._content-card--media-end_15yr0_187 ._content-card__layout_15yr0_31 {
         flex-direction: row-reverse;
     }
-    ._content-card__media_1pa46_39 {
+    ._content-card__media_15yr0_40 {
         align-self: stretch;
         /* Non-shrinking basis so mediaWidth is honoured even next to long content. */
         flex: 0 0 33.3333%;
         aspect-ratio: auto;
     }
-    ._content-card--media-half_1pa46_197 ._content-card__media_1pa46_39 {
+    ._content-card--media-half_15yr0_198 ._content-card__media_15yr0_40 {
         flex-basis: 50%;
     }
     /* Content is vertically centered against the media in the horizontal layout. */
-    ._content-card__content_1pa46_85 {
+    ._content-card__content_15yr0_86 {
         align-self: center;
     }
-    ._content-card__actions_1pa46_150 {
+    ._content-card__actions_15yr0_151 {
         margin-top: 0;
     }
     /* Minimum media height follows a 4:3 shape of its own width. */
-    ._content-card__media--image_1pa46_44::before {
+    ._content-card__media--image_15yr0_45::before {
         content: '';
         display: block;
         padding-top: 75%;
     }
     /* Horizontal paddings override the vertical ones, still stepping by content width. */
-    ._content-card__content-inner_1pa46_95 {
+    ._content-card__content-inner_15yr0_96 {
         padding: var(--spacing-space-32) var(--spacing-space-20);
     }
     @container content-card-content (min-width: 24rem) {
-        ._content-card__content-inner_1pa46_95 {
+        ._content-card__content-inner_15yr0_96 {
             padding: var(--spacing-space-40);
         }
     }
     @container content-card-content (min-width: 36rem) {
-        ._content-card__content-inner_1pa46_95 {
+        ._content-card__content-inner_15yr0_96 {
             padding: var(--spacing-space-48) var(--spacing-space-64);
         }
     }
@@ -239,11 +240,15 @@
 /* ─── Forced colors ─── */
 @media (forced-colors: active) {
-    ._content-card_1pa46_10 {
+    ._content-card_15yr0_10 {
         border: var(--borderwidth-semantic-xs) solid CanvasText;
     }
-    ._content-card--elevated_1pa46_242 {
+    ._content-card--elevated_15yr0_243 {
         box-shadow: none;
     }
-} }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */ }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentCard.d.ts","sourceRoot":"","sources":["../../../src/components/ContentCard/ContentCard.tsx"],"names":[],"mappings":"~~AAKA~~,OAAO,KAAK,EAA6B,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;~~AAkBvF~~,eAAO,MAAM,WAAW,GAAI,6JAgBzB,gBAAgB,~~4CA+ElB~~,CAAC"}
1	+ {"version":3,"file":"ContentCard.d.ts","sourceRoot":"","sources":["../../../src/components/ContentCard/ContentCard.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAA6B,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAevF,eAAO,MAAM,WAAW,GAAI,6JAgBzB,gBAAgB,4CAgFlB,CAAC"}

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

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
-import elevationStyles from "../../styles/utils/elevation.module.css.js";
+import { elevationStyles } from "../../styles/utils/index.js";
 import styles from "./ContentCard.module.css.js";
+import { isRenderable } from "../../utils/isRenderable/isRenderable.js";
 import { cn } from "../../utils/cn/cn.js";
 const logoBackgroundToken = {
   white: "var(--color-semantic-surface-base)",
@@ -15,7 +16,6 @@ const logoBackgroundToken = {
   "plum-mid": "var(--color-semantic-surface-secondary-mid)",
   "plum-strong": "var(--color-semantic-surface-secondary-strong)"
 };
-const isRenderable = (node) => node != null && typeof node !== "boolean";
 const ContentCard = ({
   media,
   mediaKind = "image",
@@ -44,6 +44,7 @@ const ContentCard = ({
     {
       ref,
       ...props,
+      "data-color-scheme": "light",
       className: cn(
         styles["content-card"],
         hasMedia && mediaWidth === "1/2" && styles["content-card--media-half"],

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentCard.js","sources":["../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import { useId } from 'react';\nimport type { CSSProperties, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport elevationStyles from '../../styles/utils~~/elevation.module.css~~';\nimport styles from './ContentCard.module.css';\nimport type { ContentCardLogoBackground, ContentCardProps } from './ContentCard.types';\n\nconst logoBackgroundToken: Record<ContentCardLogoBackground, string> = {\n white: 'var(--color-semantic-surface-base)',\n 'sand-soft': 'var(--color-semantic-surface-neutral-soft)',\n 'sand-mid': 'var(--color-semantic-surface-neutral-mid)',\n 'sand-strong': 'var(--color-semantic-surface-neutral-strong)',\n 'pink-soft': 'var(--color-semantic-surface-primary-soft)',\n 'pink-mid': 'var(--color-semantic-surface-primary-mid)',\n 'pink-strong': 'var(--color-semantic-surface-primary-strong)',\n 'plum-soft': 'var(--color-semantic-surface-secondary-soft)',\n 'plum-mid': 'var(--color-semantic-surface-secondary-mid)',\n 'plum-strong': 'var(--color-semantic-surface-secondary-strong)',\n};\n\~~n// A boolean ReactNode (e.g. from `condition && <X />`) renders nothing, so treat it as absent.\nconst isRenderable = (node: ReactNode): boolean => node != null && typeof node !== 'boolean';\n\~~nexport const ContentCard = ({\n media,\n mediaKind = 'image',\n mediaBackground,\n mediaWidth = '1/3',\n mediaPosition = 'start',\n titlePrefix,\n title,\n headingLevel = 'h3',\n body,\n actions,\n appearance = 'plain',\n as = 'article',\n className,\n ref,\n ...props\n}: ContentCardProps) => {\n const titleId = useId();\n const HeadingLevel = headingLevel;\n // Cast to ElementType so the constrained union of tags renders without ref/props conflicts.\n const Root = as as ElementType;\n const hasMedia = isRenderable(media);\n const ariaLabel = props['aria-label'];\n // Keep an explicit aria-labelledby; only the generated title fallback is suppressed for a\n // bare div or when an aria-label is provided.\n const ariaLabelledBy =\n props['aria-labelledby'] ?? (ariaLabel \|\| as === 'div' ? undefined : titleId);\n\n return (\n <Root\n ref={ref}\n {...props}\n className={cn(\n styles['content-card'],\n hasMedia && mediaWidth === '1/2' && styles['content-card--media-half'],\n hasMedia && mediaPosition === 'end' && styles['content-card--media-end'],\n appearance === 'border' && styles['content-card--border'],\n appearance === 'elevated' && styles['content-card--elevated'],\n appearance === 'elevated' && elevationStyles.elevationLow,\n className,\n )}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n >\n <div className={styles['content-card__layout']}>\n {hasMedia && (\n <div\n className={cn(\n styles['content-card__media'],\n mediaKind === 'logo'\n ? styles['content-card__media--logo']\n : styles['content-card__media--image'],\n )}\n style={\n mediaKind === 'logo' && mediaBackground != null\n ? ({\n '--_cc-logo-bg': logoBackgroundToken[mediaBackground],\n } as CSSProperties)\n : undefined\n }\n >\n <div className={styles['content-card__media-inner']}>{media}</div>\n </div>\n )}\n\n <div className={styles['content-card__content']}>\n <div className={styles['content-card__content-inner']}>\n <div className={styles['content-card__body-region']}>\n <div className={styles['content-card__header']}>\n {isRenderable(titlePrefix) && (\n <div className={styles['content-card__prefix']}>\n {titlePrefix}\n </div>\n )}\n <HeadingLevel\n id={titleId}\n className={styles['content-card__title']}\n >\n {title}\n </HeadingLevel>\n </div>\n {isRenderable(body) && (\n <div className={cn(styles['content-card__body'], 'dds-prose')}>\n {body}\n </div>\n )}\n </div>\n {isRenderable(actions) && (\n <div className={styles['content-card__actions']}>{actions}</div>\n )}\n </div>\n </div>\n </div>\n </Root>\n );\n};\n"],"names":[],"mappings":"~~;;;;;AAOA~~,MAAM,sBAAiE;AAAA,EACnE,OAAO;AAAA,EACP,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AACnB;~~AAGA~~,MAAM,~~eAAe,CAAC,SAA6B,QAAQ,QAAQ,OAAO,SAAS;AAE5E,MAAM,~~cAAc,CAAC;AAAA,EACxB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAwB;AACpB,QAAM,UAAU,MAAA;AAChB,QAAM,eAAe;AAErB,QAAM,OAAO;AACb,QAAM,WAAW,aAAa,KAAK;AACnC,QAAM,YAAY,MAAM,YAAY;AAGpC,QAAM,iBACF,MAAM,iBAAiB,MAAM,aAAa,OAAO,QAAQ,SAAY;AAEzE,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAW;AAAA,QACP,OAAO,cAAc;AAAA,QACrB,YAAY,eAAe,SAAS,OAAO,0BAA0B;AAAA,QACrE,YAAY,kBAAkB,SAAS,OAAO,yBAAyB;AAAA,QACvE,eAAe,YAAY,OAAO,sBAAsB;AAAA,QACxD,eAAe,cAAc,OAAO,wBAAwB;AAAA,QAC5D,eAAe,cAAc,gBAAgB;AAAA,QAC7C;AAAA,MAAA;AAAA,MAEJ,cAAY;AAAA,MACZ,mBAAiB;AAAA,MAEjB,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,sBAAsB,GACxC,UAAA;AAAA,QAAA,YACG;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW;AAAA,cACP,OAAO,qBAAqB;AAAA,cAC5B,cAAc,SACR,OAAO,2BAA2B,IAClC,OAAO,4BAA4B;AAAA,YAAA;AAAA,YAE7C,OACI,cAAc,UAAU,mBAAmB,OACpC;AAAA,cACG,iBAAiB,oBAAoB,eAAe;AAAA,YAAA,IAExD;AAAA,YAGV,8BAAC,OAAA,EAAI,WAAW,OAAO,2BAA2B,GAAI,UAAA,MAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAIpE,oBAAC,OAAA,EAAI,WAAW,OAAO,uBAAuB,GAC1C,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,6BAA6B,GAChD,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,2BAA2B,GAC9C,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,sBAAsB,GACxC,UAAA;AAAA,cAAA,aAAa,WAAW,KACrB,oBAAC,OAAA,EAAI,WAAW,OAAO,sBAAsB,GACxC,UAAA,YAAA,CACL;AAAA,cAEJ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,WAAW,OAAO,qBAAqB;AAAA,kBAEtC,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACL,GACJ;AAAA,YACC,aAAa,IAAI,KACd,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,oBAAoB,GAAG,WAAW,GACvD,UAAA,KAAA,CACL;AAAA,UAAA,GAER;AAAA,UACC,aAAa,OAAO,KACjB,oBAAC,SAAI,WAAW,OAAO,uBAAuB,GAAI,UAAA,QAAA,CAAQ;AAAA,QAAA,EAAA,CAElE,EAAA,CACJ;AAAA,MAAA,EAAA,CACJ;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
1	+ {"version":3,"file":"ContentCard.js","sources":["../../../src/components/ContentCard/ContentCard.tsx"],"sourcesContent":["import { useId } from 'react';\nimport type { CSSProperties, ElementType, ReactNode } from 'react';\nimport { cn } from '../../utils/cn';\nimport { isRenderable } from '../../utils/isRenderable';\nimport { elevationStyles } from '../../styles/utils';\nimport styles from './ContentCard.module.css';\nimport type { ContentCardLogoBackground, ContentCardProps } from './ContentCard.types';\n\nconst logoBackgroundToken: Record<ContentCardLogoBackground, string> = {\n white: 'var(--color-semantic-surface-base)',\n 'sand-soft': 'var(--color-semantic-surface-neutral-soft)',\n 'sand-mid': 'var(--color-semantic-surface-neutral-mid)',\n 'sand-strong': 'var(--color-semantic-surface-neutral-strong)',\n 'pink-soft': 'var(--color-semantic-surface-primary-soft)',\n 'pink-mid': 'var(--color-semantic-surface-primary-mid)',\n 'pink-strong': 'var(--color-semantic-surface-primary-strong)',\n 'plum-soft': 'var(--color-semantic-surface-secondary-soft)',\n 'plum-mid': 'var(--color-semantic-surface-secondary-mid)',\n 'plum-strong': 'var(--color-semantic-surface-secondary-strong)',\n};\n\nexport const ContentCard = ({\n media,\n mediaKind = 'image',\n mediaBackground,\n mediaWidth = '1/3',\n mediaPosition = 'start',\n titlePrefix,\n title,\n headingLevel = 'h3',\n body,\n actions,\n appearance = 'plain',\n as = 'article',\n className,\n ref,\n ...props\n}: ContentCardProps) => {\n const titleId = useId();\n const HeadingLevel = headingLevel;\n // Cast to ElementType so the constrained union of tags renders without ref/props conflicts.\n const Root = as as ElementType;\n const hasMedia = isRenderable(media);\n const ariaLabel = props['aria-label'];\n // Keep an explicit aria-labelledby; only the generated title fallback is suppressed for a\n // bare div or when an aria-label is provided.\n const ariaLabelledBy =\n props['aria-labelledby'] ?? (ariaLabel \|\| as === 'div' ? undefined : titleId);\n\n return (\n <Root\n ref={ref}\n {...props}\n data-color-scheme=\"light\"\n className={cn(\n styles['content-card'],\n hasMedia && mediaWidth === '1/2' && styles['content-card--media-half'],\n hasMedia && mediaPosition === 'end' && styles['content-card--media-end'],\n appearance === 'border' && styles['content-card--border'],\n appearance === 'elevated' && styles['content-card--elevated'],\n appearance === 'elevated' && elevationStyles.elevationLow,\n className,\n )}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n >\n <div className={styles['content-card__layout']}>\n {hasMedia && (\n <div\n className={cn(\n styles['content-card__media'],\n mediaKind === 'logo'\n ? styles['content-card__media--logo']\n : styles['content-card__media--image'],\n )}\n style={\n mediaKind === 'logo' && mediaBackground != null\n ? ({\n '--_cc-logo-bg': logoBackgroundToken[mediaBackground],\n } as CSSProperties)\n : undefined\n }\n >\n <div className={styles['content-card__media-inner']}>{media}</div>\n </div>\n )}\n\n <div className={styles['content-card__content']}>\n <div className={styles['content-card__content-inner']}>\n <div className={styles['content-card__body-region']}>\n <div className={styles['content-card__header']}>\n {isRenderable(titlePrefix) && (\n <div className={styles['content-card__prefix']}>\n {titlePrefix}\n </div>\n )}\n <HeadingLevel\n id={titleId}\n className={styles['content-card__title']}\n >\n {title}\n </HeadingLevel>\n </div>\n {isRenderable(body) && (\n <div className={cn(styles['content-card__body'], 'dds-prose')}>\n {body}\n </div>\n )}\n </div>\n {isRenderable(actions) && (\n <div className={styles['content-card__actions']}>{actions}</div>\n )}\n </div>\n </div>\n </div>\n </Root>\n );\n};\n"],"names":[],"mappings":";;;;;;AAQA,MAAM,sBAAiE;AAAA,EACnE,OAAO;AAAA,EACP,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,eAAe;AACnB;AAEO,MAAM,cAAc,CAAC;AAAA,EACxB;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb,KAAK;AAAA,EACL;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAwB;AACpB,QAAM,UAAU,MAAA;AAChB,QAAM,eAAe;AAErB,QAAM,OAAO;AACb,QAAM,WAAW,aAAa,KAAK;AACnC,QAAM,YAAY,MAAM,YAAY;AAGpC,QAAM,iBACF,MAAM,iBAAiB,MAAM,aAAa,OAAO,QAAQ,SAAY;AAEzE,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,qBAAkB;AAAA,MAClB,WAAW;AAAA,QACP,OAAO,cAAc;AAAA,QACrB,YAAY,eAAe,SAAS,OAAO,0BAA0B;AAAA,QACrE,YAAY,kBAAkB,SAAS,OAAO,yBAAyB;AAAA,QACvE,eAAe,YAAY,OAAO,sBAAsB;AAAA,QACxD,eAAe,cAAc,OAAO,wBAAwB;AAAA,QAC5D,eAAe,cAAc,gBAAgB;AAAA,QAC7C;AAAA,MAAA;AAAA,MAEJ,cAAY;AAAA,MACZ,mBAAiB;AAAA,MAEjB,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,sBAAsB,GACxC,UAAA;AAAA,QAAA,YACG;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAW;AAAA,cACP,OAAO,qBAAqB;AAAA,cAC5B,cAAc,SACR,OAAO,2BAA2B,IAClC,OAAO,4BAA4B;AAAA,YAAA;AAAA,YAE7C,OACI,cAAc,UAAU,mBAAmB,OACpC;AAAA,cACG,iBAAiB,oBAAoB,eAAe;AAAA,YAAA,IAExD;AAAA,YAGV,8BAAC,OAAA,EAAI,WAAW,OAAO,2BAA2B,GAAI,UAAA,MAAA,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,QAIpE,oBAAC,OAAA,EAAI,WAAW,OAAO,uBAAuB,GAC1C,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,6BAA6B,GAChD,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,2BAA2B,GAC9C,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,sBAAsB,GACxC,UAAA;AAAA,cAAA,aAAa,WAAW,KACrB,oBAAC,OAAA,EAAI,WAAW,OAAO,sBAAsB,GACxC,UAAA,YAAA,CACL;AAAA,cAEJ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,WAAW,OAAO,qBAAqB;AAAA,kBAEtC,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACL,GACJ;AAAA,YACC,aAAa,IAAI,KACd,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,oBAAoB,GAAG,WAAW,GACvD,UAAA,KAAA,CACL;AAAA,UAAA,GAER;AAAA,UACC,aAAa,OAAO,KACjB,oBAAC,SAAI,WAAW,OAAO,uBAAuB,GAAI,UAAA,QAAA,CAAQ;AAAA,QAAA,EAAA,CAElE,EAAA,CACJ;AAAA,MAAA,EAAA,CACJ;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

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

@@ -1,24 +1,24 @@
 require('./ContentCard.css');
 "use strict";
 const styles = {
-  "content-card": "_content-card_1pa46_10",
-  "content-card--border": "_content-card--border_1pa46_25",
-  "content-card__layout": "_content-card__layout_1pa46_30",
-  "content-card__media": "_content-card__media_1pa46_39",
-  "content-card__media--image": "_content-card__media--image_1pa46_44",
-  "content-card__media--logo": "_content-card__media--logo_1pa46_48",
-  "content-card__media-inner": "_content-card__media-inner_1pa46_54",
-  "content-card__content": "_content-card__content_1pa46_85",
-  "content-card__content-inner": "_content-card__content-inner_1pa46_95",
-  "content-card__body-region": "_content-card__body-region_1pa46_104",
-  "content-card__header": "_content-card__header_1pa46_110",
-  "content-card__prefix": "_content-card__prefix_1pa46_116",
-  "content-card__title": "_content-card__title_1pa46_120",
-  "content-card__body": "_content-card__body_1pa46_104",
-  "content-card__actions": "_content-card__actions_1pa46_150",
-  "content-card--media-end": "_content-card--media-end_1pa46_186",
-  "content-card--media-half": "_content-card--media-half_1pa46_197",
-  "content-card--elevated": "_content-card--elevated_1pa46_242"
+  "content-card": "_content-card_15yr0_10",
+  "content-card--border": "_content-card--border_15yr0_26",
+  "content-card__layout": "_content-card__layout_15yr0_31",
+  "content-card__media": "_content-card__media_15yr0_40",
+  "content-card__media--image": "_content-card__media--image_15yr0_45",
+  "content-card__media--logo": "_content-card__media--logo_15yr0_49",
+  "content-card__media-inner": "_content-card__media-inner_15yr0_55",
+  "content-card__content": "_content-card__content_15yr0_86",
+  "content-card__content-inner": "_content-card__content-inner_15yr0_96",
+  "content-card__body-region": "_content-card__body-region_15yr0_105",
+  "content-card__header": "_content-card__header_15yr0_111",
+  "content-card__prefix": "_content-card__prefix_15yr0_117",
+  "content-card__title": "_content-card__title_15yr0_121",
+  "content-card__body": "_content-card__body_15yr0_105",
+  "content-card__actions": "_content-card__actions_15yr0_151",
+  "content-card--media-end": "_content-card--media-end_15yr0_187",
+  "content-card--media-half": "_content-card--media-half_15yr0_198",
+  "content-card--elevated": "_content-card--elevated_15yr0_243"
 };
 module.exports = styles;
 //# sourceMappingURL=ContentCard.module.css.cjs.map

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

@@ -1,23 +1,23 @@
 import './ContentCard.css';
 const styles = {
-  "content-card": "_content-card_1pa46_10",
-  "content-card--border": "_content-card--border_1pa46_25",
-  "content-card__layout": "_content-card__layout_1pa46_30",
-  "content-card__media": "_content-card__media_1pa46_39",
-  "content-card__media--image": "_content-card__media--image_1pa46_44",
-  "content-card__media--logo": "_content-card__media--logo_1pa46_48",
-  "content-card__media-inner": "_content-card__media-inner_1pa46_54",
-  "content-card__content": "_content-card__content_1pa46_85",
-  "content-card__content-inner": "_content-card__content-inner_1pa46_95",
-  "content-card__body-region": "_content-card__body-region_1pa46_104",
-  "content-card__header": "_content-card__header_1pa46_110",
-  "content-card__prefix": "_content-card__prefix_1pa46_116",
-  "content-card__title": "_content-card__title_1pa46_120",
-  "content-card__body": "_content-card__body_1pa46_104",
-  "content-card__actions": "_content-card__actions_1pa46_150",
-  "content-card--media-end": "_content-card--media-end_1pa46_186",
-  "content-card--media-half": "_content-card--media-half_1pa46_197",
-  "content-card--elevated": "_content-card--elevated_1pa46_242"
+  "content-card": "_content-card_15yr0_10",
+  "content-card--border": "_content-card--border_15yr0_26",
+  "content-card__layout": "_content-card__layout_15yr0_31",
+  "content-card__media": "_content-card__media_15yr0_40",
+  "content-card__media--image": "_content-card__media--image_15yr0_45",
+  "content-card__media--logo": "_content-card__media--logo_15yr0_49",
+  "content-card__media-inner": "_content-card__media-inner_15yr0_55",
+  "content-card__content": "_content-card__content_15yr0_86",
+  "content-card__content-inner": "_content-card__content-inner_15yr0_96",
+  "content-card__body-region": "_content-card__body-region_15yr0_105",
+  "content-card__header": "_content-card__header_15yr0_111",
+  "content-card__prefix": "_content-card__prefix_15yr0_117",
+  "content-card__title": "_content-card__title_15yr0_121",
+  "content-card__body": "_content-card__body_15yr0_105",
+  "content-card__actions": "_content-card__actions_15yr0_151",
+  "content-card--media-end": "_content-card--media-end_15yr0_187",
+  "content-card--media-half": "_content-card--media-half_15yr0_198",
+  "content-card--elevated": "_content-card--elevated_15yr0_243"
 };
 export {
   styles as default

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

@@ -63,7 +63,8 @@ type ContentCardBaseProps = {
      */
     readonly actions?: ReactNode;
     /**
-     * Card surface treatment.
+     * Card surface treatment. The card always establishes a light colour scheme
+     * for its light surface, regardless of the parent scheme.
      * @default 'plain'
      */
     readonly appearance?: ContentCardAppearance;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ContentCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/ContentCard/ContentCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,uBAAuB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9E,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,MAAM,CAAC;AACpD,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,KAAK,CAAC;AAClD,MAAM,MAAM,wBAAwB,GAAG,OAAO,GAAG,KAAK,CAAC;AACvD,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEpE;;;;GAIG;AACH,MAAM,MAAM,yBAAyB,GAC/B,OAAO,GACP,WAAW,GACX,UAAU,GACV,aAAa,GACb,WAAW,GACX,UAAU,GACV,aAAa,GACb,WAAW,GACX,UAAU,GACV,aAAa,CAAC;AAEpB,KAAK,oBAAoB,GAAG;IACxB;;;;OAIG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,oBAAoB,CAAC;IAC1C;;;OAGG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,yBAAyB,CAAC;IACrD;;;;OAIG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC;IAC5C;;;;OAIG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAClD;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,4BAA4B;IAC5B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,uBAAuB,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B~~;;;OAGG~~;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC;CAC/C,CAAC;AAEF,MAAM,WAAW,uBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC1F;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,kBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACrF,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,uBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC1F,QAAQ,CAAC,EAAE,EAAE,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,mBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACtF,QAAQ,CAAC,EAAE,EAAE,KAAK,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GACtB,uBAAuB,GACvB,kBAAkB,GAClB,uBAAuB,GACvB,mBAAmB,CAAC;AAE1B,2DAA2D;AAC3D,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC"}
1	+ {"version":3,"file":"ContentCard.types.d.ts","sourceRoot":"","sources":["../../../src/components/ContentCard/ContentCard.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,MAAM,MAAM,uBAAuB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC9E,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,MAAM,CAAC;AACpD,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,KAAK,CAAC;AAClD,MAAM,MAAM,wBAAwB,GAAG,OAAO,GAAG,KAAK,CAAC;AACvD,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEpE;;;;GAIG;AACH,MAAM,MAAM,yBAAyB,GAC/B,OAAO,GACP,WAAW,GACX,UAAU,GACV,aAAa,GACb,WAAW,GACX,UAAU,GACV,aAAa,GACb,WAAW,GACX,UAAU,GACV,aAAa,CAAC;AAEpB,KAAK,oBAAoB,GAAG;IACxB;;;;OAIG;IACH,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,oBAAoB,CAAC;IAC1C;;;OAGG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,yBAAyB,CAAC;IACrD;;;;OAIG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC;IAC5C;;;;OAIG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,wBAAwB,CAAC;IAClD;;;OAGG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,4BAA4B;IAC5B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,uBAAuB,CAAC;IAChD;;;OAGG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAC;IAC7B;;;;OAIG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,qBAAqB,CAAC;CAC/C,CAAC;AAEF,MAAM,WAAW,uBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC1F;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,CAAC,EAAE,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,kBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACrF,QAAQ,CAAC,EAAE,EAAE,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,uBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC1F,QAAQ,CAAC,EAAE,EAAE,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,mBACb,SAAQ,oBAAoB,EAAE,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IACtF,QAAQ,CAAC,EAAE,EAAE,KAAK,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GACtB,uBAAuB,GACvB,kBAAkB,GAClB,uBAAuB,GACvB,mBAAmB,CAAC;AAE1B,2DAA2D;AAC3D,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,CAAC"}

package/dist/components/Drawer/Drawer.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 useDialogDismissal = require("../Modal/useDialogDismissal.cjs");
 const useNativeDialog = require("../Modal/useNativeDialog.cjs");
 const Drawer_module = require("./Drawer.module.css.cjs");
@@ -53,6 +52,7 @@ const Drawer = ({
     "dialog",
     {
       ...props,
+      "data-color-scheme": "light",
       ref: (node) => {
         dialogRef.current = node;
         if (typeof ref === "function") ref(node);
@@ -60,7 +60,7 @@ const Drawer = ({
       },
       className: cn.cn(
         Drawer_module.default.drawer,
-        elevation_module.default.elevationHigh,
+        index.elevationStyles.elevationHigh,
         Drawer_module.default[`drawer--${size}`],
         Drawer_module.default[`drawer--${headerStyle}`],
         Drawer_module.default[`drawer--${side}`],
@@ -79,20 +79,28 @@ const Drawer = ({
             "button",
             {
               type: "button",
-              className: cn.cn(Drawer_module.default.drawer__close, focus_module.default.focusable),
+              className: cn.cn(Drawer_module.default.drawer__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: Drawer_module.default.drawer__title, children: [
+          (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Drawer_module.default.drawer__title, "data-color-scheme": headerStyle, children: [
             title && /* @__PURE__ */ jsxRuntime.jsx("h2", { id: titleId, className: Drawer_module.default.drawer__heading, children: title }),
-            description && /* @__PURE__ */ jsxRuntime.jsx("div", { id: descriptionId, className: Drawer_module.default.drawer__description, children: description })
+            description && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                id: descriptionId,
+                className: cn.cn(Drawer_module.default.drawer__description, "dds-prose"),
+                children: description
+              }
+            )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: Drawer_module.default.drawer__content, children })
         ] }),
-        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(Drawer_module.default["drawer__bottom-bar"], elevation_module.default.elevationMedium), children: footer })
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(Drawer_module.default["drawer__bottom-bar"], index.elevationStyles.elevationMedium), children: footer })
       ]
     }
   );

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.cjs","sources":["../../../src/components/Drawer/Drawer.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 { useDialogDismissal } from '../Modal/useDialogDismissal';\nimport { useNativeDialog } from '../Modal/useNativeDialog';\nimport styles from './Drawer.module.css';\nimport type { DrawerProps } from './Drawer.types';\n\nexport const Drawer = ({\n open,\n onOpenChange,\n title,\n description,\n children,\n footer,\n size = 'small',\n headerStyle = 'light',\n side = 'right',\n fixedTitle = 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}: DrawerProps) => {\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.drawer,\n elevationStyles.elevationHigh,\n styles[`drawer--${size}`],\n styles[`drawer--${headerStyle}`],\n styles[`drawer--${side}`],\n { [styles['drawer--fixed-title']]: fixedTitle },\n { [styles['drawer--opening']]: phase !== 'closing' },\n { [styles['drawer--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.drawer__container}>\n {!disableCloseOptions && (\n <button\n type=\"button\"\n className={cn(styles.drawer__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.drawer__title}>\n {title && (\n <h2 id={titleId} className={styles.drawer__heading}>\n {title}\n </h2>\n )}\n {description && (\n <div id={descriptionId} className={styles.drawer__description}>\n {description}\n </div>\n )}\n </div>\n )}\n <div className={styles.drawer__content}>{children}</div>\n </div>\n {footer && (\n <div className={cn(styles['drawer__bottom-bar'], elevationStyles.elevationMedium)}>\n {footer}\n </div>\n )}\n </dialog>\n );\n};\n"],"names":["useId","useNativeDialog","useDialogDismissal","jsxs","cn","styles","elevationStyles","jsx","focusStyles","Close"],"mappings":"~~;;;;;;;;;;;AAUO~~,MAAM,SAAS,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,cAAc;AAAA,EACd,OAAO;AAAA,EACP,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,MAAmB;AACf,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,cAAAA,QAAO;AAAA,QACPC,~~iBAAAA~~,~~QAAgB~~;AAAA,QAChBD,cAAAA,QAAO,WAAW,IAAI,EAAE;AAAA,QACxBA,cAAAA,QAAO,WAAW,WAAW,EAAE;AAAA,QAC/BA,cAAAA,QAAO,WAAW,IAAI,EAAE;AAAA,QACxB,EAAE,CAACA,cAAAA,QAAO,qBAAqB,CAAC,GAAG,WAAA;AAAA,QACnC,EAAE,CAACA,cAAAA,QAAO,iBAAiB,CAAC,GAAG,UAAU,UAAA;AAAA,QACzC,EAAE,CAACA,cAAAA,QAAO,iBAAiB,CAAC,GAAG,UAAU,UAAA;AAAA,QACzC;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,cAAAA,QAAO,mBAClB,UAAA;AAAA,UAAA,CAAC,uBACEE,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAK;AAAA,cACL,WAAWH,GAAAA,GAAGC,cAAAA,QAAO,eAAeG,~~aAAAA~~,~~QAAY~~,SAAS;AAAA,cACzD,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,cAAAA,QAAO,~~eAClB~~,UAAA;AAAA,YAAA,wCACI,MAAA,EAAG,IAAI,SAAS,WAAWA,sBAAO,iBAC9B,UAAA,MAAA,CACL;AAAA,YAEH,~~8CACI~~,~~OAAA~~,~~EAAI~~,IAAI,~~eAAe~~,~~WAAWA~~,sBAAO,~~qBACrC~~,UAAA,YAAA~~,CACL~~;AAAA,~~UAAA~~,GAER;AAAA,UAEJE,2BAAAA,IAAC,OAAA,EAAI,WAAWF,cAAAA,QAAO,iBAAkB,SAAA,CAAS;AAAA,QAAA,GACtD;AAAA,QACC,UACGE,2BAAAA,IAAC,OAAA,EAAI,WAAWH,GAAAA,GAAGC,cAAAA,QAAO,oBAAoB,GAAGC,~~iBAAAA~~,~~QAAgB~~,eAAe,GAC3E,UAAA,OAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIhB;;"}
1	+ {"version":3,"file":"Drawer.cjs","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { Close } from '@dnanpm/icons';\nimport { cn } from '../../utils/cn';\nimport { elevationStyles, focusStyles } from '../../styles/utils';\nimport { useDialogDismissal } from '../Modal/useDialogDismissal';\nimport { useNativeDialog } from '../Modal/useNativeDialog';\nimport styles from './Drawer.module.css';\nimport type { DrawerProps } from './Drawer.types';\n\nexport const Drawer = ({\n open,\n onOpenChange,\n title,\n description,\n children,\n footer,\n size = 'small',\n headerStyle = 'light',\n side = 'right',\n fixedTitle = 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}: DrawerProps) => {\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.drawer,\n elevationStyles.elevationHigh,\n styles[`drawer--${size}`],\n styles[`drawer--${headerStyle}`],\n styles[`drawer--${side}`],\n { [styles['drawer--fixed-title']]: fixedTitle },\n { [styles['drawer--opening']]: phase !== 'closing' },\n { [styles['drawer--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.drawer__container}>\n {!disableCloseOptions && (\n <button\n type=\"button\"\n className={cn(styles.drawer__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.drawer__title} data-color-scheme={headerStyle}>\n {title && (\n <h2 id={titleId} className={styles.drawer__heading}>\n {title}\n </h2>\n )}\n {description && (\n <div\n id={descriptionId}\n className={cn(styles.drawer__description, 'dds-prose')}\n >\n {description}\n </div>\n )}\n </div>\n )}\n <div className={styles.drawer__content}>{children}</div>\n </div>\n {footer && (\n <div className={cn(styles['drawer__bottom-bar'], elevationStyles.elevationMedium)}>\n {footer}\n </div>\n )}\n </dialog>\n );\n};\n"],"names":["useId","useNativeDialog","useDialogDismissal","jsxs","cn","styles","elevationStyles","jsx","focusStyles","Close"],"mappings":"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"}