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

@dnanpm/ui-components 0.8.0 → 0.9.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 (75) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Hero.js","sources":["../../../src/components/Hero/Hero.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { cn } from '../../utils/cn';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport styles from './Hero.module.css';\nimport type { HeroProps } from './Hero.types';\nimport { headingClassByStyle } from './Hero.utils';\n\nexport const Hero = ({\n label,\n heading,\n description,\n headingLevel = 'h1',\n headingStyle = 'default',\n Image,\n imageProps,\n LogoImage,\n logoImageProps,\n backgroundColor,\n primaryCta,\n secondaryCta,\n className,\n ref,\n ...props\n}: HeroProps) => {\n const headingId = useId();\n\n const ResolvedImage = Image ?? (imageProps != null ? 'img' : undefined);\n const ResolvedLogoImage = LogoImage ?? (logoImageProps != null ? 'img' : undefined);\n const image = ResolvedImage != null ? <ResolvedImage {...imageProps} /> : undefined;\n const logoImage =\n ResolvedLogoImage != null ? <ResolvedLogoImage {...logoImageProps} /> : undefined;\n const HeadingLevel = headingLevel;\n\n const hasActions = primaryCta != null \|\| secondaryCta != null;\n const backgroundStyle =\n image == null && backgroundColor != null ? { backgroundColor } : undefined;\n const ariaLabelledBy = props['aria-label'] ? undefined : props['aria-labelledby'] \|\| headingId;\n\n return (\n <section\n ref={ref}\n {...props}\n className={cn(styles.hero, className)}\n aria-label={props['aria-label']}\n aria-labelledby={ariaLabelledBy}\n >\n <div className={styles.hero__background} style={backgroundStyle}>\n {image != null && (\n <div className={styles.hero__backgroundImageComponent} aria-hidden=\"true\">\n {image}\n </div>\n )}\n <div className={styles.hero__overlay} aria-hidden=\"true\" />\n </div>\n\n <div className={styles.hero__content}>\n <div className={cn(styles.hero__card, elevationStyles.elevationHigh)}>\n <div className={styles.hero__main}>\n <div className={styles.hero__text}>\n <div className={styles.hero__header}>\n {label != null && <div className={styles.hero__label}>{label}</div>}\n <HeadingLevel\n id={headingId}\n className={cn(\n styles.hero__heading,\n headingClassByStyle[headingStyle],\n )}\n >\n {heading}\n </HeadingLevel>\n </div>\n {description != null && (\n <div className={cn(styles.hero__description, 'dds-prose')}>\n {description}\n </div>\n )}\n </div>\n\n {hasActions && (\n <div className={styles.hero__actions}>\n {primaryCta != null && primaryCta}\n {secondaryCta != null && secondaryCta}\n </div>\n )}\n </div>\n </div>\n ~~{logoImage != null && (\n <div className={styles.hero__logoImage} aria-hidden=\"true\">\n {logoImage}\n </div>\n )}\n~~ </div>\n </section>\n );\n};\n"],"names":[],"mappings":";;;;;;AAOO,MAAM,OAAO,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAiB;AACb,QAAM,YAAY,MAAA;AAElB,QAAM,gBAAgB,UAAU,cAAc,OAAO,QAAQ;AAC7D,QAAM,oBAAoB,cAAc,kBAAkB,OAAO,QAAQ;AACzE,QAAM,QAAQ,iBAAiB,2BAAQ,eAAA,EAAe,GAAG,YAAY,IAAK;AAC1E,QAAM,YACF,qBAAqB,2BAAQ,mBAAA,EAAmB,GAAG,gBAAgB,IAAK;AAC5E,QAAM,eAAe;AAErB,QAAM,aAAa,cAAc,QAAQ,gBAAgB;AACzD,QAAM,kBACF,SAAS,QAAQ,mBAAmB,OAAO,EAAE,oBAAoB;AACrE,QAAM,iBAAiB,MAAM,YAAY,IAAI,SAAY,MAAM,iBAAiB,KAAK;AAErF,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,MAAM,SAAS;AAAA,MACpC,cAAY,MAAM,YAAY;AAAA,MAC9B,mBAAiB;AAAA,MAEjB,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,kBAAkB,OAAO,iBAC3C,UAAA;AAAA,UAAA,SAAS,4BACL,OAAA,EAAI,WAAW,OAAO,gCAAgC,eAAY,QAC9D,UAAA,MAAA,CACL;AAAA,8BAEH,OAAA,EAAI,WAAW,OAAO,eAAe,eAAY,OAAA,~~CAAO~~;AAAA,QAAA,~~GAC7D~~;AAAA,~~QAEA~~,~~qBAAC,~~OAAA,EAAI,WAAW,OAAO,eACnB,UAAA~~;AAAA~~,~~UAAA,~~oBAAC,~~OAAA~~,~~EAAI,~~WAAW,GAAG,OAAO,YAAY,gBAAgB,aAAa,GAC/D,~~UAAA,qBAAC,~~OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,~~YAAA~~,qBAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,~~cAAA~~,qBAAC,OAAA,EAAI,WAAW,OAAO,cAClB,UAAA;AAAA,~~gBAAA~~,SAAS,QAAQ,oBAAC,OAAA,EAAI,WAAW,OAAO,aAAc,UAAA,OAAM;AAAA,~~gBAC7D~~;AAAA,~~kBAAC~~;AAAA,~~kBAAA~~;AAAA,~~oBACG~~,IAAI;AAAA,~~oBACJ~~,WAAW;AAAA,~~sBACP~~,OAAO;AAAA,~~sBACP~~,oBAAoB,YAAY;AAAA,~~oBAAA~~;AAAA,~~oBAGnC~~,UAAA;AAAA,~~kBAAA~~;AAAA,~~gBAAA~~;AAAA,~~cACL~~,GACJ;AAAA,~~cACC~~,eAAe,QACZ,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,mBAAmB,WAAW,GACnD,UAAA,YAAA,CACL;AAAA,~~YAAA~~,GAER;AAAA,~~YAEC~~,cACG,qBAAC,OAAA,EAAI,WAAW,OAAO,eAClB,UAAA;AAAA,~~cAAA~~,cAAc,QAAQ;AAAA,~~cACtB~~,gBAAgB,QAAQ;AAAA,~~YAAA~~,EAAA,CAC7B;AAAA,~~UAAA~~,EAAA,CAER,EAAA,CACJ;AAAA,~~UACC,aAAa,QACV,oBAAC,OAAA,EAAI,WAAW,OAAO,iBAAiB,eAAY,QAC/C,UAAA,UAAA,CACL;AAAA,QAAA,EAAA,CAER;AAAA,~~MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;"}
1	+ {"version":3,"file":"Hero.js","sources":["../../../src/components/Hero/Hero.tsx"],"sourcesContent":["import { useId } from 'react';\nimport { cn } from '../../utils/cn';\nimport elevationStyles from '../../styles/utils/elevation.module.css';\nimport styles from './Hero.module.css';\nimport type { HeroProps } from './Hero.types';\nimport { headingClassByStyle } from './Hero.utils';\n\nexport const Hero = ({\n label,\n heading,\n description,\n headingLevel = 'h1',\n headingStyle = 'default',\n Image,\n imageProps,\n LogoImage,\n logoImageProps,\n backgroundColor,\n primaryCta,\n secondaryCta,\n className,\n ref,\n ...props\n}: HeroProps) => {\n const headingId = useId();\n\n const ResolvedImage = Image ?? (imageProps != null ? 'img' : undefined);\n const ResolvedLogoImage = LogoImage ?? (logoImageProps != null ? 'img' : undefined);\n const image = ResolvedImage != null ? <ResolvedImage {...imageProps} /> : undefined;\n const logoImage =\n ResolvedLogoImage != null ? <ResolvedLogoImage {...logoImageProps} /> : undefined;\n const HeadingLevel = headingLevel;\n\n const hasActions = primaryCta != null \|\| secondaryCta != null;\n const backgroundStyle =\n image == null && backgroundColor != null ? { backgroundColor } : undefined;\n const ariaLabelledBy = props['aria-label'] ? undefined : props['aria-labelledby'] \|\| headingId;\n\n return (\n <section\n ref={ref}\n {...props}\n className={cn(styles.hero, className)}\n aria-label={props['aria-label']}\n aria-labelledby={ariaLabelledBy}\n >\n <div className={styles.hero__background} style={backgroundStyle}>\n {image != null && (\n <div className={styles.hero__backgroundImageComponent} aria-hidden=\"true\">\n {image}\n </div>\n )}\n <div className={styles.hero__overlay} aria-hidden=\"true\" />\n {logoImage != null && (\n <div className={styles.hero__logoImageWrap} aria-hidden=\"true\">\n <div className={styles.hero__logoImage}>{logoImage}</div>\n </div>\n )}\n </div>\n\n <div className={styles.hero__content}>\n <div className={cn(styles.hero__card, elevationStyles.elevationHigh)}>\n <div className={styles.hero__main}>\n <div className={styles.hero__text}>\n <div className={styles.hero__header}>\n {label != null && <div className={styles.hero__label}>{label}</div>}\n <HeadingLevel\n id={headingId}\n className={cn(\n styles.hero__heading,\n headingClassByStyle[headingStyle],\n )}\n >\n {heading}\n </HeadingLevel>\n </div>\n {description != null && (\n <div className={cn(styles.hero__description, 'dds-prose')}>\n {description}\n </div>\n )}\n </div>\n\n {hasActions && (\n <div className={styles.hero__actions}>\n {primaryCta != null && primaryCta}\n {secondaryCta != null && secondaryCta}\n </div>\n )}\n </div>\n </div>\n </div>\n </section>\n );\n};\n"],"names":[],"mappings":";;;;;;AAOO,MAAM,OAAO,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,MAAiB;AACb,QAAM,YAAY,MAAA;AAElB,QAAM,gBAAgB,UAAU,cAAc,OAAO,QAAQ;AAC7D,QAAM,oBAAoB,cAAc,kBAAkB,OAAO,QAAQ;AACzE,QAAM,QAAQ,iBAAiB,2BAAQ,eAAA,EAAe,GAAG,YAAY,IAAK;AAC1E,QAAM,YACF,qBAAqB,2BAAQ,mBAAA,EAAmB,GAAG,gBAAgB,IAAK;AAC5E,QAAM,eAAe;AAErB,QAAM,aAAa,cAAc,QAAQ,gBAAgB;AACzD,QAAM,kBACF,SAAS,QAAQ,mBAAmB,OAAO,EAAE,oBAAoB;AACrE,QAAM,iBAAiB,MAAM,YAAY,IAAI,SAAY,MAAM,iBAAiB,KAAK;AAErF,SACI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG;AAAA,MACC,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,MAAM,SAAS;AAAA,MACpC,cAAY,MAAM,YAAY;AAAA,MAC9B,mBAAiB;AAAA,MAEjB,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,kBAAkB,OAAO,iBAC3C,UAAA;AAAA,UAAA,SAAS,4BACL,OAAA,EAAI,WAAW,OAAO,gCAAgC,eAAY,QAC9D,UAAA,MAAA,CACL;AAAA,8BAEH,OAAA,EAAI,WAAW,OAAO,eAAe,eAAY,QAAO;AAAA,UACxD,aAAa,QACV,oBAAC,OAAA,EAAI,WAAW,OAAO,qBAAqB,eAAY,QACpD,8BAAC,OAAA,EAAI,WAAW,OAAO,iBAAkB,qBAAU,EAAA,CACvD;AAAA,QAAA,GAER;AAAA,4BAEC,OAAA,EAAI,WAAW,OAAO,eACnB,UAAA,oBAAC,SAAI,WAAW,GAAG,OAAO,YAAY,gBAAgB,aAAa,GAC/D,+BAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,YACnB,UAAA;AAAA,YAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,cAClB,UAAA;AAAA,cAAA,SAAS,QAAQ,oBAAC,OAAA,EAAI,WAAW,OAAO,aAAc,UAAA,OAAM;AAAA,cAC7D;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACG,IAAI;AAAA,kBACJ,WAAW;AAAA,oBACP,OAAO;AAAA,oBACP,oBAAoB,YAAY;AAAA,kBAAA;AAAA,kBAGnC,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACL,GACJ;AAAA,YACC,eAAe,QACZ,oBAAC,OAAA,EAAI,WAAW,GAAG,OAAO,mBAAmB,WAAW,GACnD,UAAA,YAAA,CACL;AAAA,UAAA,GAER;AAAA,UAEC,cACG,qBAAC,OAAA,EAAI,WAAW,OAAO,eAClB,UAAA;AAAA,YAAA,cAAc,QAAQ;AAAA,YACtB,gBAAgB,QAAQ;AAAA,UAAA,EAAA,CAC7B;AAAA,QAAA,EAAA,CAER,GACJ,EAAA,CACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

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

@@ -1,24 +1,26 @@
 require('./Hero.css');
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const hero = "_hero_1xib4_1";
-const hero__background = "_hero__background_1xib4_11";
-const hero__backgroundImageComponent = "_hero__backgroundImageComponent_1xib4_20";
-const hero__logoImage = "_hero__logoImage_1xib4_42";
-const hero__overlay = "_hero__overlay_1xib4_59";
-const hero__content = "_hero__content_1xib4_71";
-const hero__card = "_hero__card_1xib4_86";
-const hero__main = "_hero__main_1xib4_95";
-const hero__text = "_hero__text_1xib4_101";
-const hero__header = "_hero__header_1xib4_107";
-const hero__label = "_hero__label_1xib4_113";
-const hero__heading = "_hero__heading_1xib4_117";
-const hero__description = "_hero__description_1xib4_135";
-const hero__actions = "_hero__actions_1xib4_150";
+const hero = "_hero_1itry_1";
+const hero__background = "_hero__background_1itry_16";
+const hero__backgroundImageComponent = "_hero__backgroundImageComponent_1itry_25";
+const hero__logoImageWrap = "_hero__logoImageWrap_1itry_47";
+const hero__logoImage = "_hero__logoImage_1itry_47";
+const hero__overlay = "_hero__overlay_1itry_75";
+const hero__content = "_hero__content_1itry_87";
+const hero__card = "_hero__card_1itry_102";
+const hero__main = "_hero__main_1itry_111";
+const hero__text = "_hero__text_1itry_117";
+const hero__header = "_hero__header_1itry_123";
+const hero__label = "_hero__label_1itry_129";
+const hero__heading = "_hero__heading_1itry_133";
+const hero__description = "_hero__description_1itry_151";
+const hero__actions = "_hero__actions_1itry_166";
 const styles = {
   hero,
   hero__background,
   hero__backgroundImageComponent,
+  hero__logoImageWrap,
   hero__logoImage,
   hero__overlay,
   hero__content,
@@ -28,9 +30,9 @@ const styles = {
   hero__header,
   hero__label,
   hero__heading,
-  "hero__heading--default": "_hero__heading--default_1xib4_123",
-  "hero__heading--large": "_hero__heading--large_1xib4_127",
-  "hero__heading--small": "_hero__heading--small_1xib4_131",
+  "hero__heading--default": "_hero__heading--default_1itry_139",
+  "hero__heading--large": "_hero__heading--large_1itry_143",
+  "hero__heading--small": "_hero__heading--small_1itry_147",
   hero__description,
   hero__actions
 };
@@ -46,6 +48,7 @@ exports.hero__header = hero__header;
 exports.hero__heading = hero__heading;
 exports.hero__label = hero__label;
 exports.hero__logoImage = hero__logoImage;
+exports.hero__logoImageWrap = hero__logoImageWrap;
 exports.hero__main = hero__main;
 exports.hero__overlay = hero__overlay;
 exports.hero__text = hero__text;

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

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

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

@@ -1,22 +1,24 @@
 import './Hero.css';
-const hero = "_hero_1xib4_1";
-const hero__background = "_hero__background_1xib4_11";
-const hero__backgroundImageComponent = "_hero__backgroundImageComponent_1xib4_20";
-const hero__logoImage = "_hero__logoImage_1xib4_42";
-const hero__overlay = "_hero__overlay_1xib4_59";
-const hero__content = "_hero__content_1xib4_71";
-const hero__card = "_hero__card_1xib4_86";
-const hero__main = "_hero__main_1xib4_95";
-const hero__text = "_hero__text_1xib4_101";
-const hero__header = "_hero__header_1xib4_107";
-const hero__label = "_hero__label_1xib4_113";
-const hero__heading = "_hero__heading_1xib4_117";
-const hero__description = "_hero__description_1xib4_135";
-const hero__actions = "_hero__actions_1xib4_150";
+const hero = "_hero_1itry_1";
+const hero__background = "_hero__background_1itry_16";
+const hero__backgroundImageComponent = "_hero__backgroundImageComponent_1itry_25";
+const hero__logoImageWrap = "_hero__logoImageWrap_1itry_47";
+const hero__logoImage = "_hero__logoImage_1itry_47";
+const hero__overlay = "_hero__overlay_1itry_75";
+const hero__content = "_hero__content_1itry_87";
+const hero__card = "_hero__card_1itry_102";
+const hero__main = "_hero__main_1itry_111";
+const hero__text = "_hero__text_1itry_117";
+const hero__header = "_hero__header_1itry_123";
+const hero__label = "_hero__label_1itry_129";
+const hero__heading = "_hero__heading_1itry_133";
+const hero__description = "_hero__description_1itry_151";
+const hero__actions = "_hero__actions_1itry_166";
 const styles = {
   hero,
   hero__background,
   hero__backgroundImageComponent,
+  hero__logoImageWrap,
   hero__logoImage,
   hero__overlay,
   hero__content,
@@ -26,9 +28,9 @@ const styles = {
   hero__header,
   hero__label,
   hero__heading,
-  "hero__heading--default": "_hero__heading--default_1xib4_123",
-  "hero__heading--large": "_hero__heading--large_1xib4_127",
-  "hero__heading--small": "_hero__heading--small_1xib4_131",
+  "hero__heading--default": "_hero__heading--default_1itry_139",
+  "hero__heading--large": "_hero__heading--large_1itry_143",
+  "hero__heading--small": "_hero__heading--small_1itry_147",
   hero__description,
   hero__actions
 };
@@ -45,6 +47,7 @@ export {
   hero__heading,
   hero__label,
   hero__logoImage,
+  hero__logoImageWrap,
   hero__main,
   hero__overlay,
   hero__text

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

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

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

@@ -1,4 +1,4 @@
-@layer dds-components {._icon-button_mhilb_1 {
+@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._icon-button_mhilb_1 {
     --_button-icon-size: 24px;
     display: inline-flex;
@@ -176,5 +176,4 @@
         outline-color: Highlight;
         box-shadow: none;
     }
-}
-}
+} }

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

@@ -1,4 +1,4 @@
-@layer dds-components {._label_7ugso_1 {
+@layer dds-base, dds-components;@layer dds-components { @layer fallback, components; }@layer dds-components.components{._label_7ugso_1 {
     --_label-height: 22px;
     display: inline-block;
@@ -39,5 +39,4 @@
 ._label--other_7ugso_40 {
     background-color: var(--color-semantic-accent-sky-strong);
-}
-}
+} }