@universityofmaryland/web-elements-library 1.5.2 → 1.5.5

package/dist/composite/quote/elements/icon.js

@@ -1,7 +1,7 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
 const brand = require("@universityofmaryland/web-icons-library/brand");
-const index = require("../../../model/elements/index.js");
 const _constants = require("../_constants.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -26,47 +26,44 @@ const elementIcon = ({
   isTypeFeatured = false
 }) => {
   const imageWithFeaturedLayout = hasImage && isTypeFeatured;
-  const iconSpan = index.createSpan({
-    className: "quote-icon-span",
-    elementStyles: {
-      element: {
-        display: "block",
-        position: "absolute",
-        ...imageWithFeaturedLayout && {
-          display: "none"
-        },
-        ...!hasImage && {
-          height: "15px",
-          width: "22px",
-          left: "-24px",
-          top: "-32px",
-          [`@container (min-width: ${_constants.SMALL}px)`]: {
-            left: `-${token__namespace.spacing["4xl"]}`,
-            top: "0"
-          }
-        },
-        ...hasImage && {
-          bottom: "-7px",
-          left: "-2px",
-          height: "15px",
-          width: "21px",
-          [`@container (min-width: ${_constants.SMALL}px)`]: {
-            height: "20px",
-            width: "29px",
-            top: "-11px",
-            right: "-20px",
-            left: "inherit"
-          }
-        },
-        ["& svg"]: {
-          fill: token__namespace.color.red,
-          ...isThemeMaryland && {
-            fill: token__namespace.color.gold
-          }
+  const iconSpan = new webBuilderLibrary.ElementBuilder("span").withClassName("quote-icon-span").withStyles({
+    element: {
+      display: "block",
+      position: "absolute",
+      ...imageWithFeaturedLayout && {
+        display: "none"
+      },
+      ...!hasImage && {
+        height: "15px",
+        width: "22px",
+        left: "-24px",
+        top: "-32px",
+        [`@container (min-width: ${_constants.SMALL}px)`]: {
+          left: `-${token__namespace.spacing["4xl"]}`,
+          top: "0"
+        }
+      },
+      ...hasImage && {
+        bottom: "-7px",
+        left: "-2px",
+        height: "15px",
+        width: "21px",
+        [`@container (min-width: ${_constants.SMALL}px)`]: {
+          height: "20px",
+          width: "29px",
+          top: "-11px",
+          right: "-20px",
+          left: "inherit"
+        }
+      },
+      ["& svg"]: {
+        fill: token__namespace.color.red,
+        ...isThemeMaryland && {
+          fill: token__namespace.color.gold
         }
       }
     }
-  });
+  }).build();
   iconSpan.element.innerHTML = brand.quote;
   return iconSpan;
 };

package/dist/composite/quote/elements/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../../../source/composite/quote/elements/icon.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { quote as iconQuote } from '@universityofmaryland/web-icons-library/brand';\nimport { ElementModel } from 'model';\nimport { SMALL } from '../_constants';\nimport { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteIconProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'isThemeMaryland'> {\n  hasImage?: boolean;\n}\n\nexport default ({\n  hasImage = false,\n  isThemeMaryland,\n  isTypeFeatured = false,\n}: QuoteIconProps) => {\n  const imageWithFeaturedLayout = hasImage && isTypeFeatured;\n\n  const iconSpan = ElementModel.createSpan({\n    className: 'quote-icon-span',\n    elementStyles: {\n      element: {\n        display: 'block',\n        position: 'absolute',\n\n        ...(imageWithFeaturedLayout && {\n          display: 'none',\n        }),\n\n        ...(!hasImage && {\n          height: '15px',\n          width: '22px',\n          left: '-24px',\n          top: '-32px',\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            left: `-${token.spacing['4xl']}`,\n            top: '0',\n          },\n        }),\n\n        ...(hasImage && {\n          bottom: '-7px',\n          left: '-2px',\n          height: '15px',\n          width: '21px',\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            height: '20px',\n            width: '29px',\n            top: '-11px',\n            right: '-20px',\n            left: 'inherit',\n          },\n        }),\n\n        ['& svg']: {\n          fill: token.color.red,\n\n          ...(isThemeMaryland && {\n            fill: token.color.gold,\n          }),\n        },\n      },\n    },\n  });\n\n  iconSpan.element.innerHTML = iconQuote;\n\n  return iconSpan;\n};\n"],"names":["ElementModel.createSpan","SMALL","token","iconQuote"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAYA,MAAA,cAAe,CAAC;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA,iBAAiB;AACnB,MAAsB;AACpB,QAAM,0BAA0B,YAAY;AAE5C,QAAM,WAAWA,MAAAA,WAAwB;AAAA,IACvC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QAEV,GAAI,2BAA2B;AAAA,UAC7B,SAAS;AAAA,QAAA;AAAA,QAGX,GAAI,CAAC,YAAY;AAAA,UACf,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,MAAM;AAAA,UACN,KAAK;AAAA,UAEL,CAAC,0BAA0BC,gBAAK,KAAK,GAAG;AAAA,YACtC,MAAM,IAAIC,iBAAM,QAAQ,KAAK,CAAC;AAAA,YAC9B,KAAK;AAAA,UAAA;AAAA,QACP;AAAA,QAGF,GAAI,YAAY;AAAA,UACd,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,UAEP,CAAC,0BAA0BD,gBAAK,KAAK,GAAG;AAAA,YACtC,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,KAAK;AAAA,YACL,OAAO;AAAA,YACP,MAAM;AAAA,UAAA;AAAA,QACR;AAAA,QAGF,CAAC,OAAO,GAAG;AAAA,UACT,MAAMC,iBAAM,MAAM;AAAA,UAElB,GAAI,mBAAmB;AAAA,YACrB,MAAMA,iBAAM,MAAM;AAAA,UAAA;AAAA,QACpB;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,WAAS,QAAQ,YAAYC,MAAAA;AAE7B,SAAO;AACT;;"}
+{"version":3,"file":"icon.js","sources":["../../../../source/composite/quote/elements/icon.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { quote as iconQuote } from '@universityofmaryland/web-icons-library/brand';\nimport { SMALL } from '../_constants';\nimport { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteIconProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'isThemeMaryland'> {\n  hasImage?: boolean;\n}\n\nexport default ({\n  hasImage = false,\n  isThemeMaryland,\n  isTypeFeatured = false,\n}: QuoteIconProps) => {\n  const imageWithFeaturedLayout = hasImage && isTypeFeatured;\n\n  const iconSpan = new ElementBuilder('span')\n    .withClassName('quote-icon-span')\n    .withStyles({\n      element: {\n        display: 'block',\n        position: 'absolute',\n\n        ...(imageWithFeaturedLayout && {\n          display: 'none',\n        }),\n\n        ...(!hasImage && {\n          height: '15px',\n          width: '22px',\n          left: '-24px',\n          top: '-32px',\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            left: `-${token.spacing['4xl']}`,\n            top: '0',\n          },\n        }),\n\n        ...(hasImage && {\n          bottom: '-7px',\n          left: '-2px',\n          height: '15px',\n          width: '21px',\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            height: '20px',\n            width: '29px',\n            top: '-11px',\n            right: '-20px',\n            left: 'inherit',\n          },\n        }),\n\n        ['& svg']: {\n          fill: token.color.red,\n\n          ...(isThemeMaryland && {\n            fill: token.color.gold,\n          }),\n        },\n      },\n    })\n    .build();\n\n  iconSpan.element.innerHTML = iconQuote;\n\n  return iconSpan;\n};\n"],"names":["ElementBuilder","SMALL","token","iconQuote"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAYA,MAAA,cAAe,CAAC;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA,iBAAiB;AACnB,MAAsB;AACpB,QAAM,0BAA0B,YAAY;AAE5C,QAAM,WAAW,IAAIA,iCAAe,MAAM,EACvC,cAAc,iBAAiB,EAC/B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MAEV,GAAI,2BAA2B;AAAA,QAC7B,SAAS;AAAA,MAAA;AAAA,MAGX,GAAI,CAAC,YAAY;AAAA,QACf,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,KAAK;AAAA,QAEL,CAAC,0BAA0BC,gBAAK,KAAK,GAAG;AAAA,UACtC,MAAM,IAAIC,iBAAM,QAAQ,KAAK,CAAC;AAAA,UAC9B,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,MAGF,GAAI,YAAY;AAAA,QACd,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,QAEP,CAAC,0BAA0BD,gBAAK,KAAK,GAAG;AAAA,UACtC,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,KAAK;AAAA,UACL,OAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,MAGF,CAAC,OAAO,GAAG;AAAA,QACT,MAAMC,iBAAM,MAAM;AAAA,QAElB,GAAI,mBAAmB;AAAA,UACrB,MAAMA,iBAAM,MAAM;AAAA,QAAA;AAAA,MACpB;AAAA,IACF;AAAA,EACF,CACD,EACA,MAAA;AAEH,WAAS,QAAQ,YAAYC,MAAAA;AAE7B,SAAO;AACT;;"}

package/dist/composite/quote/elements/icon.mjs

@@ -1,6 +1,6 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
 import { quote } from "@universityofmaryland/web-icons-library/brand";
-import { createSpan } from "../../../model/elements/index.mjs";
 import { SMALL } from "../_constants.mjs";
 const elementIcon = ({
   hasImage = false,
@@ -8,47 +8,44 @@ const elementIcon = ({
   isTypeFeatured = false
 }) => {
   const imageWithFeaturedLayout = hasImage && isTypeFeatured;
-  const iconSpan = createSpan({
-    className: "quote-icon-span",
-    elementStyles: {
-      element: {
-        display: "block",
-        position: "absolute",
-        ...imageWithFeaturedLayout && {
-          display: "none"
-        },
-        ...!hasImage && {
-          height: "15px",
-          width: "22px",
-          left: "-24px",
-          top: "-32px",
-          [`@container (min-width: ${SMALL}px)`]: {
-            left: `-${token.spacing["4xl"]}`,
-            top: "0"
-          }
-        },
-        ...hasImage && {
-          bottom: "-7px",
-          left: "-2px",
-          height: "15px",
-          width: "21px",
-          [`@container (min-width: ${SMALL}px)`]: {
-            height: "20px",
-            width: "29px",
-            top: "-11px",
-            right: "-20px",
-            left: "inherit"
-          }
-        },
-        ["& svg"]: {
-          fill: token.color.red,
-          ...isThemeMaryland && {
-            fill: token.color.gold
-          }
+  const iconSpan = new ElementBuilder("span").withClassName("quote-icon-span").withStyles({
+    element: {
+      display: "block",
+      position: "absolute",
+      ...imageWithFeaturedLayout && {
+        display: "none"
+      },
+      ...!hasImage && {
+        height: "15px",
+        width: "22px",
+        left: "-24px",
+        top: "-32px",
+        [`@container (min-width: ${SMALL}px)`]: {
+          left: `-${token.spacing["4xl"]}`,
+          top: "0"
+        }
+      },
+      ...hasImage && {
+        bottom: "-7px",
+        left: "-2px",
+        height: "15px",
+        width: "21px",
+        [`@container (min-width: ${SMALL}px)`]: {
+          height: "20px",
+          width: "29px",
+          top: "-11px",
+          right: "-20px",
+          left: "inherit"
+        }
+      },
+      ["& svg"]: {
+        fill: token.color.red,
+        ...isThemeMaryland && {
+          fill: token.color.gold
         }
       }
     }
-  });
+  }).build();
   iconSpan.element.innerHTML = quote;
   return iconSpan;
 };

package/dist/composite/quote/elements/icon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"icon.mjs","sources":["../../../../source/composite/quote/elements/icon.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { quote as iconQuote } from '@universityofmaryland/web-icons-library/brand';\nimport { ElementModel } from 'model';\nimport { SMALL } from '../_constants';\nimport { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteIconProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'isThemeMaryland'> {\n  hasImage?: boolean;\n}\n\nexport default ({\n  hasImage = false,\n  isThemeMaryland,\n  isTypeFeatured = false,\n}: QuoteIconProps) => {\n  const imageWithFeaturedLayout = hasImage && isTypeFeatured;\n\n  const iconSpan = ElementModel.createSpan({\n    className: 'quote-icon-span',\n    elementStyles: {\n      element: {\n        display: 'block',\n        position: 'absolute',\n\n        ...(imageWithFeaturedLayout && {\n          display: 'none',\n        }),\n\n        ...(!hasImage && {\n          height: '15px',\n          width: '22px',\n          left: '-24px',\n          top: '-32px',\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            left: `-${token.spacing['4xl']}`,\n            top: '0',\n          },\n        }),\n\n        ...(hasImage && {\n          bottom: '-7px',\n          left: '-2px',\n          height: '15px',\n          width: '21px',\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            height: '20px',\n            width: '29px',\n            top: '-11px',\n            right: '-20px',\n            left: 'inherit',\n          },\n        }),\n\n        ['& svg']: {\n          fill: token.color.red,\n\n          ...(isThemeMaryland && {\n            fill: token.color.gold,\n          }),\n        },\n      },\n    },\n  });\n\n  iconSpan.element.innerHTML = iconQuote;\n\n  return iconSpan;\n};\n"],"names":["ElementModel.createSpan","iconQuote"],"mappings":";;;;AAYA,MAAA,cAAe,CAAC;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA,iBAAiB;AACnB,MAAsB;AACpB,QAAM,0BAA0B,YAAY;AAE5C,QAAM,WAAWA,WAAwB;AAAA,IACvC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QAEV,GAAI,2BAA2B;AAAA,UAC7B,SAAS;AAAA,QAAA;AAAA,QAGX,GAAI,CAAC,YAAY;AAAA,UACf,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,MAAM;AAAA,UACN,KAAK;AAAA,UAEL,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,YACtC,MAAM,IAAI,MAAM,QAAQ,KAAK,CAAC;AAAA,YAC9B,KAAK;AAAA,UAAA;AAAA,QACP;AAAA,QAGF,GAAI,YAAY;AAAA,UACd,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,QAAQ;AAAA,UACR,OAAO;AAAA,UAEP,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,YACtC,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,KAAK;AAAA,YACL,OAAO;AAAA,YACP,MAAM;AAAA,UAAA;AAAA,QACR;AAAA,QAGF,CAAC,OAAO,GAAG;AAAA,UACT,MAAM,MAAM,MAAM;AAAA,UAElB,GAAI,mBAAmB;AAAA,YACrB,MAAM,MAAM,MAAM;AAAA,UAAA;AAAA,QACpB;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,WAAS,QAAQ,YAAYC;AAE7B,SAAO;AACT;"}
+{"version":3,"file":"icon.mjs","sources":["../../../../source/composite/quote/elements/icon.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { quote as iconQuote } from '@universityofmaryland/web-icons-library/brand';\nimport { SMALL } from '../_constants';\nimport { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteIconProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'isThemeMaryland'> {\n  hasImage?: boolean;\n}\n\nexport default ({\n  hasImage = false,\n  isThemeMaryland,\n  isTypeFeatured = false,\n}: QuoteIconProps) => {\n  const imageWithFeaturedLayout = hasImage && isTypeFeatured;\n\n  const iconSpan = new ElementBuilder('span')\n    .withClassName('quote-icon-span')\n    .withStyles({\n      element: {\n        display: 'block',\n        position: 'absolute',\n\n        ...(imageWithFeaturedLayout && {\n          display: 'none',\n        }),\n\n        ...(!hasImage && {\n          height: '15px',\n          width: '22px',\n          left: '-24px',\n          top: '-32px',\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            left: `-${token.spacing['4xl']}`,\n            top: '0',\n          },\n        }),\n\n        ...(hasImage && {\n          bottom: '-7px',\n          left: '-2px',\n          height: '15px',\n          width: '21px',\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            height: '20px',\n            width: '29px',\n            top: '-11px',\n            right: '-20px',\n            left: 'inherit',\n          },\n        }),\n\n        ['& svg']: {\n          fill: token.color.red,\n\n          ...(isThemeMaryland && {\n            fill: token.color.gold,\n          }),\n        },\n      },\n    })\n    .build();\n\n  iconSpan.element.innerHTML = iconQuote;\n\n  return iconSpan;\n};\n"],"names":["iconQuote"],"mappings":";;;;AAYA,MAAA,cAAe,CAAC;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA,iBAAiB;AACnB,MAAsB;AACpB,QAAM,0BAA0B,YAAY;AAE5C,QAAM,WAAW,IAAI,eAAe,MAAM,EACvC,cAAc,iBAAiB,EAC/B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MAEV,GAAI,2BAA2B;AAAA,QAC7B,SAAS;AAAA,MAAA;AAAA,MAGX,GAAI,CAAC,YAAY;AAAA,QACf,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM;AAAA,QACN,KAAK;AAAA,QAEL,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,MAAM,IAAI,MAAM,QAAQ,KAAK,CAAC;AAAA,UAC9B,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,MAGF,GAAI,YAAY;AAAA,QACd,QAAQ;AAAA,QACR,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,OAAO;AAAA,QAEP,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,KAAK;AAAA,UACL,OAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,MAGF,CAAC,OAAO,GAAG;AAAA,QACT,MAAM,MAAM,MAAM;AAAA,QAElB,GAAI,mBAAmB;AAAA,UACrB,MAAM,MAAM,MAAM;AAAA,QAAA;AAAA,MACpB;AAAA,IACF;AAAA,EACF,CACD,EACA,MAAA;AAEH,WAAS,QAAQ,YAAYA;AAE7B,SAAO;AACT;"}

package/dist/composite/quote/elements/image.d.ts

@@ -2,10 +2,6 @@ import { QuoteBaseProps, QuoteVariantProps, QuoteSizeProps } from '../_types';
 interface QuoteImageProps extends QuoteVariantProps, QuoteSizeProps, Pick<QuoteBaseProps, 'isThemeMaryland'> {
     image: HTMLImageElement;
 }
-declare const _default: ({ image, isSizeLarge, isThemeMaryland, isTypeFeatured, }: QuoteImageProps) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: ({ image, isSizeLarge, isThemeMaryland, isTypeFeatured, }: QuoteImageProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=image.d.ts.map

package/dist/composite/quote/elements/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/image.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACpB,MAAM,WAAW,CAAC;AAGnB,UAAU,eACR,SAAQ,iBAAiB,EACvB,cAAc,EACd,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC;IACzC,KAAK,EAAE,gBAAgB,CAAC;CACzB;yBAEe,0DAKb,eAAe;;;;;AALlB,wBA2DE"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/image.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACpB,MAAM,WAAW,CAAC;AAEnB,UAAU,eACR,SAAQ,iBAAiB,EACvB,cAAc,EACd,IAAI,CAAC,cAAc,EAAE,iBAAiB,CAAC;IACzC,KAAK,EAAE,gBAAgB,CAAC;CACzB;yBAEe,0DAKb,eAAe;AALlB,wBA0DE"}

package/dist/composite/quote/elements/image.js

@@ -1,6 +1,6 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
-const index = require("../../../model/elements/index.js");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
 const icon = require("./icon.js");
 const _constants = require("../_constants.js");
 function _interopNamespaceDefault(e) {
@@ -31,45 +31,37 @@ const elementImage = ({
     isTypeFeatured,
     isThemeMaryland
   });
-  const imageContainerChildren = [];
-  const imageElement = index.create({
-    element: image,
-    className: "quote-image",
-    elementStyles: {
-      element: {
-        maxWidth: "100%",
-        height: "auto",
-        ...!isTypeFeatured && {
-          maxWidth: "160px",
-          [`@container (min-width: ${_constants.SMALL}px)`]: {
-            borderRight: `2px solid ${token__namespace.color.red}`
-          }
-        },
-        ...!isTypeFeatured && isSizeLarge && { maxWidth: "200px" },
-        ...!isTypeFeatured && isThemeMaryland && {
-          borderRight: `2px solid ${token__namespace.color.gold}`
+  const imageElement = new webBuilderLibrary.ElementBuilder(image).withClassName("quote-image").withStyles({
+    element: {
+      maxWidth: "100%",
+      height: "auto",
+      ...!isTypeFeatured && {
+        maxWidth: "160px",
+        [`@container (min-width: ${_constants.SMALL}px)`]: {
+          borderRight: `2px solid ${token__namespace.color.red}`
         }
+      },
+      ...!isTypeFeatured && isSizeLarge && { maxWidth: "200px" },
+      ...!isTypeFeatured && isThemeMaryland && {
+        borderRight: `2px solid ${token__namespace.color.gold}`
       }
     }
-  });
-  if (!isTypeFeatured) {
-    imageContainerChildren.push(iconSpan);
-  }
-  imageContainerChildren.push(imageElement);
-  return index.createDiv({
-    className: "quote-image-container",
-    children: imageContainerChildren,
-    elementStyles: {
-      element: {
-        display: "inline-block",
-        position: "relative",
-        ...!isTypeFeatured && {
-          marginBottom: token__namespace.spacing.sm,
-          position: "relative"
-        }
+  }).build();
+  const container = new webBuilderLibrary.ElementBuilder().withClassName("quote-image-container").withStyles({
+    element: {
+      display: "inline-block",
+      position: "relative",
+      ...!isTypeFeatured && {
+        marginBottom: token__namespace.spacing.sm,
+        position: "relative"
       }
     }
   });
+  if (!isTypeFeatured) {
+    container.withChild(iconSpan);
+  }
+  container.withChild(imageElement);
+  return container.build();
 };
 module.exports = elementImage;
 //# sourceMappingURL=image.js.map

package/dist/composite/quote/elements/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","sources":["../../../../source/composite/quote/elements/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { default as elementIcon } from './icon';\nimport { SMALL } from '../_constants';\nimport {\n  type QuoteBaseProps,\n  type QuoteVariantProps,\n  type QuoteSizeProps,\n} from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\ninterface QuoteImageProps\n  extends QuoteVariantProps,\n    QuoteSizeProps,\n    Pick<QuoteBaseProps, 'isThemeMaryland'> {\n  image: HTMLImageElement;\n}\n\nexport default ({\n  image,\n  isSizeLarge,\n  isThemeMaryland,\n  isTypeFeatured,\n}: QuoteImageProps) => {\n  const iconSpan = elementIcon({\n    hasImage: image != null,\n    isTypeFeatured,\n    isThemeMaryland,\n  });\n  const imageContainerChildren: ElementVisual[] = [];\n  const imageElement = ElementModel.create({\n    element: image,\n    className: 'quote-image',\n    elementStyles: {\n      element: {\n        maxWidth: '100%',\n        height: 'auto',\n\n        ...(!isTypeFeatured && {\n          maxWidth: '160px',\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            borderRight: `2px solid ${token.color.red}`,\n          },\n        }),\n\n        ...(!isTypeFeatured && isSizeLarge && { maxWidth: '200px' }),\n\n        ...(!isTypeFeatured &&\n          isThemeMaryland && {\n            borderRight: `2px solid ${token.color.gold}`,\n          }),\n      },\n    },\n  });\n\n  if (!isTypeFeatured) {\n    imageContainerChildren.push(iconSpan);\n  }\n\n  imageContainerChildren.push(imageElement);\n\n  return ElementModel.createDiv({\n    className: 'quote-image-container',\n    children: imageContainerChildren,\n    elementStyles: {\n      element: {\n        display: 'inline-block',\n        position: 'relative',\n\n        ...(!isTypeFeatured && {\n          marginBottom: token.spacing.sm,\n          position: 'relative',\n        }),\n      },\n    },\n  });\n};\n"],"names":["elementIcon","ElementModel.create","SMALL","token","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkBA,MAAA,eAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACrB,QAAM,WAAWA,KAAY;AAAA,IAC3B,UAAU,SAAS;AAAA,IACnB;AAAA,IACA;AAAA,EAAA,CACD;AACD,QAAM,yBAA0C,CAAA;AAChD,QAAM,eAAeC,MAAAA,OAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,QAAQ;AAAA,QAER,GAAI,CAAC,kBAAkB;AAAA,UACrB,UAAU;AAAA,UAEV,CAAC,0BAA0BC,gBAAK,KAAK,GAAG;AAAA,YACtC,aAAa,aAAaC,iBAAM,MAAM,GAAG;AAAA,UAAA;AAAA,QAC3C;AAAA,QAGF,GAAI,CAAC,kBAAkB,eAAe,EAAE,UAAU,QAAA;AAAA,QAElD,GAAI,CAAC,kBACH,mBAAmB;AAAA,UACjB,aAAa,aAAaA,iBAAM,MAAM,IAAI;AAAA,QAAA;AAAA,MAC5C;AAAA,IACJ;AAAA,EACF,CACD;AAED,MAAI,CAAC,gBAAgB;AACnB,2BAAuB,KAAK,QAAQ;AAAA,EACtC;AAEA,yBAAuB,KAAK,YAAY;AAExC,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU;AAAA,IACV,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QAEV,GAAI,CAAC,kBAAkB;AAAA,UACrB,cAAcD,iBAAM,QAAQ;AAAA,UAC5B,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,IACF;AAAA,EACF,CACD;AACH;;"}
+{"version":3,"file":"image.js","sources":["../../../../source/composite/quote/elements/image.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { default as elementIcon } from './icon';\nimport { SMALL } from '../_constants';\nimport {\n  type QuoteBaseProps,\n  type QuoteVariantProps,\n  type QuoteSizeProps,\n} from '../_types';\n\ninterface QuoteImageProps\n  extends QuoteVariantProps,\n    QuoteSizeProps,\n    Pick<QuoteBaseProps, 'isThemeMaryland'> {\n  image: HTMLImageElement;\n}\n\nexport default ({\n  image,\n  isSizeLarge,\n  isThemeMaryland,\n  isTypeFeatured,\n}: QuoteImageProps) => {\n  const iconSpan = elementIcon({\n    hasImage: image != null,\n    isTypeFeatured,\n    isThemeMaryland,\n  });\n\n  const imageElement = new ElementBuilder(image)\n    .withClassName('quote-image')\n    .withStyles({\n      element: {\n        maxWidth: '100%',\n        height: 'auto',\n\n        ...(!isTypeFeatured && {\n          maxWidth: '160px',\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            borderRight: `2px solid ${token.color.red}`,\n          },\n        }),\n\n        ...(!isTypeFeatured && isSizeLarge && { maxWidth: '200px' }),\n\n        ...(!isTypeFeatured &&\n          isThemeMaryland && {\n            borderRight: `2px solid ${token.color.gold}`,\n          }),\n      },\n    })\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('quote-image-container')\n    .withStyles({\n      element: {\n        display: 'inline-block',\n        position: 'relative',\n\n        ...(!isTypeFeatured && {\n          marginBottom: token.spacing.sm,\n          position: 'relative',\n        }),\n      },\n    });\n\n  if (!isTypeFeatured) {\n    container.withChild(iconSpan);\n  }\n\n  container.withChild(imageElement);\n\n  return container.build();\n};\n"],"names":["elementIcon","ElementBuilder","SMALL","token"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiBA,MAAA,eAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACrB,QAAM,WAAWA,KAAY;AAAA,IAC3B,UAAU,SAAS;AAAA,IACnB;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,eAAe,IAAIC,iCAAe,KAAK,EAC1C,cAAc,aAAa,EAC3B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,GAAI,CAAC,kBAAkB;AAAA,QACrB,UAAU;AAAA,QAEV,CAAC,0BAA0BC,gBAAK,KAAK,GAAG;AAAA,UACtC,aAAa,aAAaC,iBAAM,MAAM,GAAG;AAAA,QAAA;AAAA,MAC3C;AAAA,MAGF,GAAI,CAAC,kBAAkB,eAAe,EAAE,UAAU,QAAA;AAAA,MAElD,GAAI,CAAC,kBACH,mBAAmB;AAAA,QACjB,aAAa,aAAaA,iBAAM,MAAM,IAAI;AAAA,MAAA;AAAA,IAC5C;AAAA,EACJ,CACD,EACA,MAAA;AAEH,QAAM,YAAY,IAAIF,kBAAAA,eAAA,EACnB,cAAc,uBAAuB,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MAEV,GAAI,CAAC,kBAAkB;AAAA,QACrB,cAAcE,iBAAM,QAAQ;AAAA,QAC5B,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAEH,MAAI,CAAC,gBAAgB;AACnB,cAAU,UAAU,QAAQ;AAAA,EAC9B;AAEA,YAAU,UAAU,YAAY;AAEhC,SAAO,UAAU,MAAA;AACnB;;"}

package/dist/composite/quote/elements/image.mjs

@@ -1,5 +1,5 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
-import { create, createDiv } from "../../../model/elements/index.mjs";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
 import elementIcon from "./icon.mjs";
 import { SMALL } from "../_constants.mjs";
 const elementImage = ({
@@ -13,45 +13,37 @@ const elementImage = ({
     isTypeFeatured,
     isThemeMaryland
   });
-  const imageContainerChildren = [];
-  const imageElement = create({
-    element: image,
-    className: "quote-image",
-    elementStyles: {
-      element: {
-        maxWidth: "100%",
-        height: "auto",
-        ...!isTypeFeatured && {
-          maxWidth: "160px",
-          [`@container (min-width: ${SMALL}px)`]: {
-            borderRight: `2px solid ${token.color.red}`
-          }
-        },
-        ...!isTypeFeatured && isSizeLarge && { maxWidth: "200px" },
-        ...!isTypeFeatured && isThemeMaryland && {
-          borderRight: `2px solid ${token.color.gold}`
+  const imageElement = new ElementBuilder(image).withClassName("quote-image").withStyles({
+    element: {
+      maxWidth: "100%",
+      height: "auto",
+      ...!isTypeFeatured && {
+        maxWidth: "160px",
+        [`@container (min-width: ${SMALL}px)`]: {
+          borderRight: `2px solid ${token.color.red}`
         }
+      },
+      ...!isTypeFeatured && isSizeLarge && { maxWidth: "200px" },
+      ...!isTypeFeatured && isThemeMaryland && {
+        borderRight: `2px solid ${token.color.gold}`
       }
     }
-  });
-  if (!isTypeFeatured) {
-    imageContainerChildren.push(iconSpan);
-  }
-  imageContainerChildren.push(imageElement);
-  return createDiv({
-    className: "quote-image-container",
-    children: imageContainerChildren,
-    elementStyles: {
-      element: {
-        display: "inline-block",
-        position: "relative",
-        ...!isTypeFeatured && {
-          marginBottom: token.spacing.sm,
-          position: "relative"
-        }
+  }).build();
+  const container = new ElementBuilder().withClassName("quote-image-container").withStyles({
+    element: {
+      display: "inline-block",
+      position: "relative",
+      ...!isTypeFeatured && {
+        marginBottom: token.spacing.sm,
+        position: "relative"
       }
     }
   });
+  if (!isTypeFeatured) {
+    container.withChild(iconSpan);
+  }
+  container.withChild(imageElement);
+  return container.build();
 };
 export {
   elementImage as default

package/dist/composite/quote/elements/image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"image.mjs","sources":["../../../../source/composite/quote/elements/image.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { default as elementIcon } from './icon';\nimport { SMALL } from '../_constants';\nimport {\n  type QuoteBaseProps,\n  type QuoteVariantProps,\n  type QuoteSizeProps,\n} from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\ninterface QuoteImageProps\n  extends QuoteVariantProps,\n    QuoteSizeProps,\n    Pick<QuoteBaseProps, 'isThemeMaryland'> {\n  image: HTMLImageElement;\n}\n\nexport default ({\n  image,\n  isSizeLarge,\n  isThemeMaryland,\n  isTypeFeatured,\n}: QuoteImageProps) => {\n  const iconSpan = elementIcon({\n    hasImage: image != null,\n    isTypeFeatured,\n    isThemeMaryland,\n  });\n  const imageContainerChildren: ElementVisual[] = [];\n  const imageElement = ElementModel.create({\n    element: image,\n    className: 'quote-image',\n    elementStyles: {\n      element: {\n        maxWidth: '100%',\n        height: 'auto',\n\n        ...(!isTypeFeatured && {\n          maxWidth: '160px',\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            borderRight: `2px solid ${token.color.red}`,\n          },\n        }),\n\n        ...(!isTypeFeatured && isSizeLarge && { maxWidth: '200px' }),\n\n        ...(!isTypeFeatured &&\n          isThemeMaryland && {\n            borderRight: `2px solid ${token.color.gold}`,\n          }),\n      },\n    },\n  });\n\n  if (!isTypeFeatured) {\n    imageContainerChildren.push(iconSpan);\n  }\n\n  imageContainerChildren.push(imageElement);\n\n  return ElementModel.createDiv({\n    className: 'quote-image-container',\n    children: imageContainerChildren,\n    elementStyles: {\n      element: {\n        display: 'inline-block',\n        position: 'relative',\n\n        ...(!isTypeFeatured && {\n          marginBottom: token.spacing.sm,\n          position: 'relative',\n        }),\n      },\n    },\n  });\n};\n"],"names":["ElementModel.create","ElementModel.createDiv"],"mappings":";;;;AAkBA,MAAA,eAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACrB,QAAM,WAAW,YAAY;AAAA,IAC3B,UAAU,SAAS;AAAA,IACnB;AAAA,IACA;AAAA,EAAA,CACD;AACD,QAAM,yBAA0C,CAAA;AAChD,QAAM,eAAeA,OAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,QAAQ;AAAA,QAER,GAAI,CAAC,kBAAkB;AAAA,UACrB,UAAU;AAAA,UAEV,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,YACtC,aAAa,aAAa,MAAM,MAAM,GAAG;AAAA,UAAA;AAAA,QAC3C;AAAA,QAGF,GAAI,CAAC,kBAAkB,eAAe,EAAE,UAAU,QAAA;AAAA,QAElD,GAAI,CAAC,kBACH,mBAAmB;AAAA,UACjB,aAAa,aAAa,MAAM,MAAM,IAAI;AAAA,QAAA;AAAA,MAC5C;AAAA,IACJ;AAAA,EACF,CACD;AAED,MAAI,CAAC,gBAAgB;AACnB,2BAAuB,KAAK,QAAQ;AAAA,EACtC;AAEA,yBAAuB,KAAK,YAAY;AAExC,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU;AAAA,IACV,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,UAAU;AAAA,QAEV,GAAI,CAAC,kBAAkB;AAAA,UACrB,cAAc,MAAM,QAAQ;AAAA,UAC5B,UAAU;AAAA,QAAA;AAAA,MACZ;AAAA,IACF;AAAA,EACF,CACD;AACH;"}
+{"version":3,"file":"image.mjs","sources":["../../../../source/composite/quote/elements/image.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { default as elementIcon } from './icon';\nimport { SMALL } from '../_constants';\nimport {\n  type QuoteBaseProps,\n  type QuoteVariantProps,\n  type QuoteSizeProps,\n} from '../_types';\n\ninterface QuoteImageProps\n  extends QuoteVariantProps,\n    QuoteSizeProps,\n    Pick<QuoteBaseProps, 'isThemeMaryland'> {\n  image: HTMLImageElement;\n}\n\nexport default ({\n  image,\n  isSizeLarge,\n  isThemeMaryland,\n  isTypeFeatured,\n}: QuoteImageProps) => {\n  const iconSpan = elementIcon({\n    hasImage: image != null,\n    isTypeFeatured,\n    isThemeMaryland,\n  });\n\n  const imageElement = new ElementBuilder(image)\n    .withClassName('quote-image')\n    .withStyles({\n      element: {\n        maxWidth: '100%',\n        height: 'auto',\n\n        ...(!isTypeFeatured && {\n          maxWidth: '160px',\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            borderRight: `2px solid ${token.color.red}`,\n          },\n        }),\n\n        ...(!isTypeFeatured && isSizeLarge && { maxWidth: '200px' }),\n\n        ...(!isTypeFeatured &&\n          isThemeMaryland && {\n            borderRight: `2px solid ${token.color.gold}`,\n          }),\n      },\n    })\n    .build();\n\n  const container = new ElementBuilder()\n    .withClassName('quote-image-container')\n    .withStyles({\n      element: {\n        display: 'inline-block',\n        position: 'relative',\n\n        ...(!isTypeFeatured && {\n          marginBottom: token.spacing.sm,\n          position: 'relative',\n        }),\n      },\n    });\n\n  if (!isTypeFeatured) {\n    container.withChild(iconSpan);\n  }\n\n  container.withChild(imageElement);\n\n  return container.build();\n};\n"],"names":[],"mappings":";;;;AAiBA,MAAA,eAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuB;AACrB,QAAM,WAAW,YAAY;AAAA,IAC3B,UAAU,SAAS;AAAA,IACnB;AAAA,IACA;AAAA,EAAA,CACD;AAED,QAAM,eAAe,IAAI,eAAe,KAAK,EAC1C,cAAc,aAAa,EAC3B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MAER,GAAI,CAAC,kBAAkB;AAAA,QACrB,UAAU;AAAA,QAEV,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,aAAa,aAAa,MAAM,MAAM,GAAG;AAAA,QAAA;AAAA,MAC3C;AAAA,MAGF,GAAI,CAAC,kBAAkB,eAAe,EAAE,UAAU,QAAA;AAAA,MAElD,GAAI,CAAC,kBACH,mBAAmB;AAAA,QACjB,aAAa,aAAa,MAAM,MAAM,IAAI;AAAA,MAAA;AAAA,IAC5C;AAAA,EACJ,CACD,EACA,MAAA;AAEH,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,uBAAuB,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MAEV,GAAI,CAAC,kBAAkB;AAAA,QACrB,cAAc,MAAM,QAAQ;AAAA,QAC5B,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AAEH,MAAI,CAAC,gBAAgB;AACnB,cAAU,UAAU,QAAQ;AAAA,EAC9B;AAEA,YAAU,UAAU,YAAY;AAEhC,SAAO,UAAU,MAAA;AACnB;"}

package/dist/composite/quote/elements/quote.d.ts

@@ -4,10 +4,6 @@ interface QuoteProps extends Pick<QuoteTextProps, 'quote' | 'isThemeMaryland' |
     shouldHaveWhiteText?: boolean;
     quote: HTMLElement;
 }
-declare const _default: (props: QuoteProps) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+declare const _default: (props: QuoteProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export default _default;
 //# sourceMappingURL=quote.d.ts.map

package/dist/composite/quote/elements/quote.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/quote.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;AAGhD,UAAU,UACR,SAAQ,IAAI,CACV,cAAc,EACZ,OAAO,GACP,iBAAiB,GACjB,aAAa,GACb,gBAAgB,GAChB,mBAAmB,CACtB;IACD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,EAAE,WAAW,CAAC;CACpB;yBA0Be,OAAO,UAAU;;;;;AAAjC,wBAkFE"}
+{"version":3,"file":"quote.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/quote.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;AAEhD,UAAU,UACR,SAAQ,IAAI,CACV,cAAc,EACZ,OAAO,GACP,iBAAiB,GACjB,aAAa,GACb,gBAAgB,GAChB,mBAAmB,CACtB;IACD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,KAAK,EAAE,WAAW,CAAC;CACpB;yBA0Be,OAAO,UAAU;AAAjC,wBAyEE"}

package/dist/composite/quote/elements/quote.js

@@ -1,7 +1,8 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
 const typography = require("@universityofmaryland/web-styles-library/typography");
-const index = require("../../../model/elements/index.js");
+const theme = require("@universityofmaryland/web-utilities-library/theme");
 const icon = require("./icon.js");
 const _constants = require("../_constants.js");
 function _interopNamespaceDefault(e) {
@@ -25,8 +26,8 @@ const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typograph
 const splitWords = (quote) => {
   const text = quote.textContent ?? "";
   const words = text.trim().split(/\s+/);
-  const wordElements = words.map((word, index2) => {
-    const wordElement = document.createElement("div");
+  const wordElements = words.map((word, index) => {
+    const wordElement = document.createElement("span");
     wordElement.classList.add("quote-text-split-word");
     Object.assign(wordElement.style, {
       display: "inline-block",
@@ -35,7 +36,7 @@ const splitWords = (quote) => {
       transform: "translateY(20px)",
       transition: "opacity 1s ease, transform 0.5s ease"
     });
-    wordElement.textContent = word + (index2 < words.length - 1 ? " " : "");
+    wordElement.textContent = word + (index < words.length - 1 ? " " : "");
     return wordElement;
   });
   return wordElements;
@@ -50,65 +51,53 @@ const elementQuote = (props) => {
     quote,
     shouldHaveWhiteText = false
   } = props;
-  const children = [];
   const isHasImageAndNotFeatured = hasImage && !isTypeFeatured;
   const iconSpan = icon(props);
   const wordsList = splitWords(quote);
   let quoteTextElement = quote;
-  if (!hasImage) {
-    children.push(iconSpan);
-  }
   if (includesAnimation) {
     quoteTextElement = document.createElement("div");
     wordsList.map((word) => {
       quoteTextElement.appendChild(word);
     });
   }
-  const quoteElement = index.create({
-    element: quoteTextElement,
-    className: "quote-container-quote",
-    children,
-    elementStyles: {
-      element: {
-        position: "relative",
-        fontWeight: "700",
-        color: token__namespace.color.black,
-        ...typography__namespace.sans.larger,
-        ...isSizeLarge && { ...typography__namespace.sans.extraLarge },
-        ...shouldHaveWhiteText && {
-          color: token__namespace.color.white
+  const fontStyles = isSizeLarge ? typography__namespace.sans.compose("extralarge", {
+    theme: theme.theme.fontColor(shouldHaveWhiteText)
+  }) : typography__namespace.sans.compose("larger", {
+    theme: theme.theme.fontColor(shouldHaveWhiteText)
+  });
+  const builder = new webBuilderLibrary.ElementBuilder(quoteTextElement).styled(fontStyles).withClassName("quote-container-quote").withStyles({
+    element: {
+      position: "relative",
+      fontWeight: "700",
+      [`&::before`]: {
+        content: '""',
+        position: "absolute",
+        left: `-${token__namespace.spacing.md}`,
+        top: "7px",
+        height: "calc(100% - 14px)",
+        width: "2px",
+        display: "block",
+        backgroundColor: token__namespace.color.red,
+        ...isThemeMaryland && { backgroundColor: token__namespace.color.gold },
+        ...isHasImageAndNotFeatured && {
+          display: "none"
         },
-        [`&::before`]: {
-          content: '""',
-          position: "absolute",
-          left: `-${token__namespace.spacing.md}`,
-          top: "7px",
-          height: "calc(100% - 14px)",
-          width: "2px",
-          display: "block",
-          backgroundColor: token__namespace.color.red,
-          ...isThemeMaryland && { backgroundColor: token__namespace.color.gold },
-          ...isHasImageAndNotFeatured && {
-            display: "none"
-          },
-          [`@container (min-width: ${_constants.SMALL}px)`]: {
-            left: `-${token__namespace.spacing.md}`
-          },
-          [`@container (max-width: ${_constants.SMALL - 1}px)`]: {
-            ...!isTypeFeatured && {
-              display: "block"
-            }
-          }
+        [`@container (min-width: ${_constants.SMALL}px)`]: {
+          left: `-${token__namespace.spacing.md}`
         },
-        ["& *"]: {
-          color: "currentColor",
-          ...!isSizeLarge && { ...typography__namespace.sans.larger },
-          ...isSizeLarge && { ...typography__namespace.sans.extraLarge }
+        [`@container (max-width: ${_constants.SMALL - 1}px)`]: {
+          ...!isTypeFeatured && {
+            display: "block"
+          }
         }
       }
     }
   });
-  return quoteElement;
+  if (!hasImage) {
+    builder.withChild(iconSpan);
+  }
+  return builder.build();
 };
 module.exports = elementQuote;
 //# sourceMappingURL=quote.js.map

package/dist/composite/quote/elements/quote.js.map

@@ -1 +1 @@
-{"version":3,"file":"quote.js","sources":["../../../../source/composite/quote/elements/quote.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { ElementModel } from 'model';\nimport { default as elementIcon } from './icon';\nimport { SMALL } from '../_constants';\nimport { type QuoteTextProps } from '../_types';\nimport { type ElementVisual } from '../../../_types';\n\ninterface QuoteProps\n  extends Pick<\n    QuoteTextProps,\n    | 'quote'\n    | 'isThemeMaryland'\n    | 'isSizeLarge'\n    | 'isTypeFeatured'\n    | 'includesAnimation'\n  > {\n  hasImage?: boolean;\n  shouldHaveWhiteText?: boolean;\n  quote: HTMLElement;\n}\n\nconst splitWords = (quote: HTMLElement) => {\n  const text = quote.textContent ?? '';\n  const words = text.trim().split(/\\s+/);\n\n  const wordElements = words.map((word, index) => {\n    const wordElement = document.createElement('div');\n    wordElement.classList.add('quote-text-split-word');\n\n    Object.assign(wordElement.style, {\n      display: 'inline-block',\n      whiteSpace: 'pre-wrap',\n      opacity: '0',\n      transform: 'translateY(20px)',\n      transition: 'opacity 1s ease, transform 0.5s ease',\n    });\n\n    wordElement.textContent = word + (index < words.length - 1 ? ' ' : '');\n\n    return wordElement;\n  });\n\n  return wordElements;\n};\n\nexport default (props: QuoteProps) => {\n  const {\n    hasImage = false,\n    includesAnimation = false,\n    isSizeLarge = false,\n    isThemeMaryland = false,\n    isTypeFeatured = false,\n    quote,\n    shouldHaveWhiteText = false,\n  } = props;\n\n  const children: ElementVisual[] = [];\n  const isHasImageAndNotFeatured = hasImage && !isTypeFeatured;\n  const iconSpan = elementIcon(props);\n  const wordsList = splitWords(quote);\n  let quoteTextElement: HTMLElement = quote;\n\n  if (!hasImage) {\n    children.push(iconSpan);\n  }\n\n  if (includesAnimation) {\n    quoteTextElement = document.createElement('div');\n\n    wordsList.map((word) => {\n      quoteTextElement.appendChild(word);\n    });\n  }\n\n  const quoteElement = ElementModel.create({\n    element: quoteTextElement,\n    className: 'quote-container-quote',\n    children,\n    elementStyles: {\n      element: {\n        position: 'relative',\n        fontWeight: '700',\n        color: token.color.black,\n        ...typography.sans.larger,\n\n        ...(isSizeLarge && { ...typography.sans.extraLarge }),\n\n        ...(shouldHaveWhiteText && {\n          color: token.color.white,\n        }),\n\n        [`&::before`]: {\n          content: '\"\"',\n          position: 'absolute',\n          left: `-${token.spacing.md}`,\n          top: '7px',\n          height: 'calc(100% - 14px)',\n          width: '2px',\n          display: 'block',\n          backgroundColor: token.color.red,\n          ...(isThemeMaryland && { backgroundColor: token.color.gold }),\n\n          ...(isHasImageAndNotFeatured && {\n            display: 'none',\n          }),\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            left: `-${token.spacing.md}`,\n          },\n\n          [`@container (max-width: ${SMALL - 1}px)`]: {\n            ...(!isTypeFeatured && {\n              display: 'block',\n            }),\n          },\n        },\n\n        ['& *']: {\n          color: 'currentColor',\n          ...(!isSizeLarge && { ...typography.sans.larger }),\n          ...(isSizeLarge && { ...typography.sans.extraLarge }),\n        },\n      },\n    },\n  });\n\n  return quoteElement;\n};\n"],"names":["index","elementIcon","ElementModel.create","token","typography","SMALL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,aAAa,CAAC,UAAuB;AACzC,QAAM,OAAO,MAAM,eAAe;AAClC,QAAM,QAAQ,KAAK,KAAA,EAAO,MAAM,KAAK;AAErC,QAAM,eAAe,MAAM,IAAI,CAAC,MAAMA,WAAU;AAC9C,UAAM,cAAc,SAAS,cAAc,KAAK;AAChD,gBAAY,UAAU,IAAI,uBAAuB;AAEjD,WAAO,OAAO,YAAY,OAAO;AAAA,MAC/B,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,IAAA,CACb;AAED,gBAAY,cAAc,QAAQA,SAAQ,MAAM,SAAS,IAAI,MAAM;AAEnE,WAAO;AAAA,EACT,CAAC;AAED,SAAO;AACT;AAEA,MAAA,eAAe,CAAC,UAAsB;AACpC,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB,iBAAiB;AAAA,IACjB;AAAA,IACA,sBAAsB;AAAA,EAAA,IACpB;AAEJ,QAAM,WAA4B,CAAA;AAClC,QAAM,2BAA2B,YAAY,CAAC;AAC9C,QAAM,WAAWC,KAAY,KAAK;AAClC,QAAM,YAAY,WAAW,KAAK;AAClC,MAAI,mBAAgC;AAEpC,MAAI,CAAC,UAAU;AACb,aAAS,KAAK,QAAQ;AAAA,EACxB;AAEA,MAAI,mBAAmB;AACrB,uBAAmB,SAAS,cAAc,KAAK;AAE/C,cAAU,IAAI,CAAC,SAAS;AACtB,uBAAiB,YAAY,IAAI;AAAA,IACnC,CAAC;AAAA,EACH;AAEA,QAAM,eAAeC,MAAAA,OAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,OAAOC,iBAAM,MAAM;AAAA,QACnB,GAAGC,sBAAW,KAAK;AAAA,QAEnB,GAAI,eAAe,EAAE,GAAGA,sBAAW,KAAK,WAAA;AAAA,QAExC,GAAI,uBAAuB;AAAA,UACzB,OAAOD,iBAAM,MAAM;AAAA,QAAA;AAAA,QAGrB,CAAC,WAAW,GAAG;AAAA,UACb,SAAS;AAAA,UACT,UAAU;AAAA,UACV,MAAM,IAAIA,iBAAM,QAAQ,EAAE;AAAA,UAC1B,KAAK;AAAA,UACL,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,SAAS;AAAA,UACT,iBAAiBA,iBAAM,MAAM;AAAA,UAC7B,GAAI,mBAAmB,EAAE,iBAAiBA,iBAAM,MAAM,KAAA;AAAA,UAEtD,GAAI,4BAA4B;AAAA,YAC9B,SAAS;AAAA,UAAA;AAAA,UAGX,CAAC,0BAA0BE,gBAAK,KAAK,GAAG;AAAA,YACtC,MAAM,IAAIF,iBAAM,QAAQ,EAAE;AAAA,UAAA;AAAA,UAG5B,CAAC,0BAA0BE,WAAAA,QAAQ,CAAC,KAAK,GAAG;AAAA,YAC1C,GAAI,CAAC,kBAAkB;AAAA,cACrB,SAAS;AAAA,YAAA;AAAA,UACX;AAAA,QACF;AAAA,QAGF,CAAC,KAAK,GAAG;AAAA,UACP,OAAO;AAAA,UACP,GAAI,CAAC,eAAe,EAAE,GAAGD,sBAAW,KAAK,OAAA;AAAA,UACzC,GAAI,eAAe,EAAE,GAAGA,sBAAW,KAAK,WAAA;AAAA,QAAW;AAAA,MACrD;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAO;AACT;;"}
+{"version":3,"file":"quote.js","sources":["../../../../source/composite/quote/elements/quote.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { default as elementIcon } from './icon';\nimport { SMALL } from '../_constants';\nimport { type QuoteTextProps } from '../_types';\n\ninterface QuoteProps\n  extends Pick<\n    QuoteTextProps,\n    | 'quote'\n    | 'isThemeMaryland'\n    | 'isSizeLarge'\n    | 'isTypeFeatured'\n    | 'includesAnimation'\n  > {\n  hasImage?: boolean;\n  shouldHaveWhiteText?: boolean;\n  quote: HTMLElement;\n}\n\nconst splitWords = (quote: HTMLElement) => {\n  const text = quote.textContent ?? '';\n  const words = text.trim().split(/\\s+/);\n\n  const wordElements = words.map((word, index) => {\n    const wordElement = document.createElement('span');\n    wordElement.classList.add('quote-text-split-word');\n\n    Object.assign(wordElement.style, {\n      display: 'inline-block',\n      whiteSpace: 'pre-wrap',\n      opacity: '0',\n      transform: 'translateY(20px)',\n      transition: 'opacity 1s ease, transform 0.5s ease',\n    });\n\n    wordElement.textContent = word + (index < words.length - 1 ? ' ' : '');\n\n    return wordElement;\n  });\n\n  return wordElements;\n};\n\nexport default (props: QuoteProps) => {\n  const {\n    hasImage = false,\n    includesAnimation = false,\n    isSizeLarge = false,\n    isThemeMaryland = false,\n    isTypeFeatured = false,\n    quote,\n    shouldHaveWhiteText = false,\n  } = props;\n\n  const isHasImageAndNotFeatured = hasImage && !isTypeFeatured;\n  const iconSpan = elementIcon(props);\n  const wordsList = splitWords(quote);\n  let quoteTextElement: HTMLElement = quote;\n\n  if (includesAnimation) {\n    quoteTextElement = document.createElement('div');\n\n    wordsList.map((word) => {\n      quoteTextElement.appendChild(word);\n    });\n  }\n\n  const fontStyles = isSizeLarge\n    ? typography.sans.compose('extralarge', {\n        theme: theme.fontColor(shouldHaveWhiteText),\n      })\n    : typography.sans.compose('larger', {\n        theme: theme.fontColor(shouldHaveWhiteText),\n      });\n\n  const builder = new ElementBuilder(quoteTextElement)\n    .styled(fontStyles)\n    .withClassName('quote-container-quote')\n    .withStyles({\n      element: {\n        position: 'relative',\n        fontWeight: '700',\n\n        [`&::before`]: {\n          content: '\"\"',\n          position: 'absolute',\n          left: `-${token.spacing.md}`,\n          top: '7px',\n          height: 'calc(100% - 14px)',\n          width: '2px',\n          display: 'block',\n          backgroundColor: token.color.red,\n          ...(isThemeMaryland && { backgroundColor: token.color.gold }),\n\n          ...(isHasImageAndNotFeatured && {\n            display: 'none',\n          }),\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            left: `-${token.spacing.md}`,\n          },\n\n          [`@container (max-width: ${SMALL - 1}px)`]: {\n            ...(!isTypeFeatured && {\n              display: 'block',\n            }),\n          },\n        },\n      },\n    });\n\n  if (!hasImage) {\n    builder.withChild(iconSpan);\n  }\n\n  return builder.build();\n};\n"],"names":["elementIcon","typography","theme","ElementBuilder","token","SMALL"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAM,aAAa,CAAC,UAAuB;AACzC,QAAM,OAAO,MAAM,eAAe;AAClC,QAAM,QAAQ,KAAK,KAAA,EAAO,MAAM,KAAK;AAErC,QAAM,eAAe,MAAM,IAAI,CAAC,MAAM,UAAU;AAC9C,UAAM,cAAc,SAAS,cAAc,MAAM;AACjD,gBAAY,UAAU,IAAI,uBAAuB;AAEjD,WAAO,OAAO,YAAY,OAAO;AAAA,MAC/B,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,IAAA,CACb;AAED,gBAAY,cAAc,QAAQ,QAAQ,MAAM,SAAS,IAAI,MAAM;AAEnE,WAAO;AAAA,EACT,CAAC;AAED,SAAO;AACT;AAEA,MAAA,eAAe,CAAC,UAAsB;AACpC,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,oBAAoB;AAAA,IACpB,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB,iBAAiB;AAAA,IACjB;AAAA,IACA,sBAAsB;AAAA,EAAA,IACpB;AAEJ,QAAM,2BAA2B,YAAY,CAAC;AAC9C,QAAM,WAAWA,KAAY,KAAK;AAClC,QAAM,YAAY,WAAW,KAAK;AAClC,MAAI,mBAAgC;AAEpC,MAAI,mBAAmB;AACrB,uBAAmB,SAAS,cAAc,KAAK;AAE/C,cAAU,IAAI,CAAC,SAAS;AACtB,uBAAiB,YAAY,IAAI;AAAA,IACnC,CAAC;AAAA,EACH;AAEA,QAAM,aAAa,cACfC,sBAAW,KAAK,QAAQ,cAAc;AAAA,IACpC,OAAOC,MAAAA,MAAM,UAAU,mBAAmB;AAAA,EAAA,CAC3C,IACDD,sBAAW,KAAK,QAAQ,UAAU;AAAA,IAChC,OAAOC,MAAAA,MAAM,UAAU,mBAAmB;AAAA,EAAA,CAC3C;AAEL,QAAM,UAAU,IAAIC,iCAAe,gBAAgB,EAChD,OAAO,UAAU,EACjB,cAAc,uBAAuB,EACrC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,YAAY;AAAA,MAEZ,CAAC,WAAW,GAAG;AAAA,QACb,SAAS;AAAA,QACT,UAAU;AAAA,QACV,MAAM,IAAIC,iBAAM,QAAQ,EAAE;AAAA,QAC1B,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,QACT,iBAAiBA,iBAAM,MAAM;AAAA,QAC7B,GAAI,mBAAmB,EAAE,iBAAiBA,iBAAM,MAAM,KAAA;AAAA,QAEtD,GAAI,4BAA4B;AAAA,UAC9B,SAAS;AAAA,QAAA;AAAA,QAGX,CAAC,0BAA0BC,gBAAK,KAAK,GAAG;AAAA,UACtC,MAAM,IAAID,iBAAM,QAAQ,EAAE;AAAA,QAAA;AAAA,QAG5B,CAAC,0BAA0BC,WAAAA,QAAQ,CAAC,KAAK,GAAG;AAAA,UAC1C,GAAI,CAAC,kBAAkB;AAAA,YACrB,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAEH,MAAI,CAAC,UAAU;AACb,YAAQ,UAAU,QAAQ;AAAA,EAC5B;AAEA,SAAO,QAAQ,MAAA;AACjB;;"}