@universityofmaryland/web-elements-library 1.5.0-beta.0 → 1.5.1

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' | 'image'> {}\n\nexport default ({\n  image,\n  isThemeMaryland,\n  isTypeFeatured = false,\n}: QuoteIconProps) => {\n  const iconSpan = ElementModel.createSpan({\n    className: 'quote-icon-span',\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        left: '-24px',\n        top: '-32px',\n        height: '15px',\n        width: '22px',\n        display: 'block',\n\n        ...(image &&\n          isTypeFeatured && {\n            display: 'none',\n          }),\n\n        ...(!isTypeFeatured &&\n          image && {\n            height: '20px',\n            width: '29px',\n            top: '-11px',\n            right: '-20px',\n            left: 'inherit',\n          }),\n\n        [`@container (min-width: ${SMALL}px)`]: {\n          ...(!image && {\n            left: `-${token.spacing['4xl']}`,\n            top: '0',\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":";;;;AAUA,MAAA,cAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MAAsB;AACpB,QAAM,WAAWA,WAAwB;AAAA,IACvC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,MAAM;AAAA,QACN,KAAK;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,QAET,GAAI,SACF,kBAAkB;AAAA,UAChB,SAAS;AAAA,QAAA;AAAA,QAGb,GAAI,CAAC,kBACH,SAAS;AAAA,UACP,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,KAAK;AAAA,UACL,OAAO;AAAA,UACP,MAAM;AAAA,QAAA;AAAA,QAGV,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,GAAI,CAAC,SAAS;AAAA,YACZ,MAAM,IAAI,MAAM,QAAQ,KAAK,CAAC;AAAA,YAC9B,KAAK;AAAA,UAAA;AAAA,QACP;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 * 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;"}

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,wBA0DE"}
+{"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"}

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

@@ -27,7 +27,7 @@ const elementImage = ({
   isTypeFeatured
 }) => {
   const iconSpan = icon({
-    image,
+    hasImage: image != null,
     isTypeFeatured,
     isThemeMaryland
   });
@@ -41,13 +41,13 @@ const elementImage = ({
         height: "auto",
         ...!isTypeFeatured && {
           maxWidth: "160px",
-          ...isSizeLarge && { maxWidth: "200px" },
           [`@container (min-width: ${_constants.SMALL}px)`]: {
-            borderRight: `2px solid ${token__namespace.color.red}`,
-            ...isThemeMaryland && {
-              borderRight: `2px solid ${token__namespace.color.gold}`
-            }
+            borderRight: `2px solid ${token__namespace.color.red}`
           }
+        },
+        ...!isTypeFeatured && isSizeLarge && { maxWidth: "200px" },
+        ...!isTypeFeatured && isThemeMaryland && {
+          borderRight: `2px solid ${token__namespace.color.gold}`
         }
       }
     }

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    image,\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          ...(isSizeLarge && { maxWidth: '200px' }),\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            borderRight: `2px solid ${token.color.red}`,\n\n            ...(isThemeMaryland && {\n              borderRight: `2px solid ${token.color.gold}`,\n            }),\n          },\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;AAAA,IACA;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,GAAI,eAAe,EAAE,UAAU,QAAA;AAAA,UAE/B,CAAC,0BAA0BC,gBAAK,KAAK,GAAG;AAAA,YACtC,aAAa,aAAaC,iBAAM,MAAM,GAAG;AAAA,YAEzC,GAAI,mBAAmB;AAAA,cACrB,aAAa,aAAaA,iBAAM,MAAM,IAAI;AAAA,YAAA;AAAA,UAC5C;AAAA,QACF;AAAA,MACF;AAAA,IACF;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 * 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;;"}

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

@@ -9,7 +9,7 @@ const elementImage = ({
   isTypeFeatured
 }) => {
   const iconSpan = elementIcon({
-    image,
+    hasImage: image != null,
     isTypeFeatured,
     isThemeMaryland
   });
@@ -23,13 +23,13 @@ const elementImage = ({
         height: "auto",
         ...!isTypeFeatured && {
           maxWidth: "160px",
-          ...isSizeLarge && { maxWidth: "200px" },
           [`@container (min-width: ${SMALL}px)`]: {
-            borderRight: `2px solid ${token.color.red}`,
-            ...isThemeMaryland && {
-              borderRight: `2px solid ${token.color.gold}`
-            }
+            borderRight: `2px solid ${token.color.red}`
           }
+        },
+        ...!isTypeFeatured && isSizeLarge && { maxWidth: "200px" },
+        ...!isTypeFeatured && isThemeMaryland && {
+          borderRight: `2px solid ${token.color.gold}`
         }
       }
     }

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    image,\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          ...(isSizeLarge && { maxWidth: '200px' }),\n\n          [`@container (min-width: ${SMALL}px)`]: {\n            borderRight: `2px solid ${token.color.red}`,\n\n            ...(isThemeMaryland && {\n              borderRight: `2px solid ${token.color.gold}`,\n            }),\n          },\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;AAAA,IACA;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,GAAI,eAAe,EAAE,UAAU,QAAA;AAAA,UAE/B,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,YACtC,aAAa,aAAa,MAAM,MAAM,GAAG;AAAA,YAEzC,GAAI,mBAAmB;AAAA,cACrB,aAAa,aAAa,MAAM,MAAM,IAAI;AAAA,YAAA;AAAA,UAC5C;AAAA,QACF;AAAA,MACF;AAAA,IACF;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 * 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;"}

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

@@ -2,4 +2,5 @@ export { default as image } from './image';
 export { default as text } from './text';
 export { default as icon } from './icon';
 export { default as action } from './action';
+export { default as quote } from './quote';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC"}

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

@@ -4,8 +4,10 @@ const image = require("./image.js");
 const text = require("./text.js");
 const icon = require("./icon.js");
 const action = require("./action.js");
+const quote = require("./quote.js");
 exports.image = image;
 exports.text = text;
 exports.icon = icon;
 exports.action = action;
+exports.quote = quote;
 //# sourceMappingURL=index.js.map

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

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

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

@@ -2,10 +2,12 @@ import { default as default2 } from "./image.mjs";
 import { default as default3 } from "./text.mjs";
 import { default as default4 } from "./icon.mjs";
 import { default as default5 } from "./action.mjs";
+import { default as default6 } from "./quote.mjs";
 export {
   default5 as action,
   default4 as icon,
   default2 as image,
+  default6 as quote,
   default3 as text
 };
 //# sourceMappingURL=index.mjs.map

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

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

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

@@ -0,0 +1,13 @@
+import { QuoteTextProps } from '../_types';
+interface QuoteProps extends Pick<QuoteTextProps, 'quote' | 'isThemeMaryland' | 'isSizeLarge' | 'isTypeFeatured' | 'includesAnimation'> {
+    hasImage?: boolean;
+    shouldHaveWhiteText?: boolean;
+    quote: HTMLElement;
+}
+declare const _default: (props: QuoteProps) => {
+    element: HTMLElement;
+    className: string;
+    styles: string;
+};
+export default _default;
+//# sourceMappingURL=quote.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,114 @@
+"use strict";
+const token = require("@universityofmaryland/web-styles-library/token");
+const typography = require("@universityofmaryland/web-styles-library/typography");
+const index = require("../../../model/elements/index.js");
+const icon = require("./icon.js");
+const _constants = require("../_constants.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
+const splitWords = (quote) => {
+  const text = quote.textContent ?? "";
+  const words = text.trim().split(/\s+/);
+  const wordElements = words.map((word, index2) => {
+    const wordElement = document.createElement("div");
+    wordElement.classList.add("quote-text-split-word");
+    Object.assign(wordElement.style, {
+      display: "inline-block",
+      whiteSpace: "pre-wrap",
+      opacity: "0",
+      transform: "translateY(20px)",
+      transition: "opacity 1s ease, transform 0.5s ease"
+    });
+    wordElement.textContent = word + (index2 < words.length - 1 ? " " : "");
+    return wordElement;
+  });
+  return wordElements;
+};
+const elementQuote = (props) => {
+  const {
+    hasImage = false,
+    includesAnimation = false,
+    isSizeLarge = false,
+    isThemeMaryland = false,
+    isTypeFeatured = false,
+    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
+        },
+        [`&::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"
+            }
+          }
+        },
+        ["& *"]: {
+          color: "currentColor",
+          ...!isSizeLarge && { ...typography__namespace.sans.larger },
+          ...isSizeLarge && { ...typography__namespace.sans.extraLarge }
+        }
+      }
+    }
+  });
+  return quoteElement;
+};
+module.exports = elementQuote;
+//# sourceMappingURL=quote.js.map

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

@@ -0,0 +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;;"}

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

@@ -0,0 +1,97 @@
+import * as token from "@universityofmaryland/web-styles-library/token";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import { create } from "../../../model/elements/index.mjs";
+import elementIcon from "./icon.mjs";
+import { SMALL } from "../_constants.mjs";
+const splitWords = (quote) => {
+  const text = quote.textContent ?? "";
+  const words = text.trim().split(/\s+/);
+  const wordElements = words.map((word, index) => {
+    const wordElement = document.createElement("div");
+    wordElement.classList.add("quote-text-split-word");
+    Object.assign(wordElement.style, {
+      display: "inline-block",
+      whiteSpace: "pre-wrap",
+      opacity: "0",
+      transform: "translateY(20px)",
+      transition: "opacity 1s ease, transform 0.5s ease"
+    });
+    wordElement.textContent = word + (index < words.length - 1 ? " " : "");
+    return wordElement;
+  });
+  return wordElements;
+};
+const elementQuote = (props) => {
+  const {
+    hasImage = false,
+    includesAnimation = false,
+    isSizeLarge = false,
+    isThemeMaryland = false,
+    isTypeFeatured = false,
+    quote,
+    shouldHaveWhiteText = false
+  } = props;
+  const children = [];
+  const isHasImageAndNotFeatured = hasImage && !isTypeFeatured;
+  const iconSpan = elementIcon(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 = create({
+    element: quoteTextElement,
+    className: "quote-container-quote",
+    children,
+    elementStyles: {
+      element: {
+        position: "relative",
+        fontWeight: "700",
+        color: token.color.black,
+        ...typography.sans.larger,
+        ...isSizeLarge && { ...typography.sans.extraLarge },
+        ...shouldHaveWhiteText && {
+          color: token.color.white
+        },
+        [`&::before`]: {
+          content: '""',
+          position: "absolute",
+          left: `-${token.spacing.md}`,
+          top: "7px",
+          height: "calc(100% - 14px)",
+          width: "2px",
+          display: "block",
+          backgroundColor: token.color.red,
+          ...isThemeMaryland && { backgroundColor: token.color.gold },
+          ...isHasImageAndNotFeatured && {
+            display: "none"
+          },
+          [`@container (min-width: ${SMALL}px)`]: {
+            left: `-${token.spacing.md}`
+          },
+          [`@container (max-width: ${SMALL - 1}px)`]: {
+            ...!isTypeFeatured && {
+              display: "block"
+            }
+          }
+        },
+        ["& *"]: {
+          color: "currentColor",
+          ...!isSizeLarge && { ...typography.sans.larger },
+          ...isSizeLarge && { ...typography.sans.extraLarge }
+        }
+      }
+    }
+  });
+  return quoteElement;
+};
+export {
+  elementQuote as default
+};
+//# sourceMappingURL=quote.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"quote.mjs","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":["ElementModel.create"],"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,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,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,WAA4B,CAAA;AAClC,QAAM,2BAA2B,YAAY,CAAC;AAC9C,QAAM,WAAW,YAAY,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,eAAeA,OAAoB;AAAA,IACvC,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,OAAO,MAAM,MAAM;AAAA,QACnB,GAAG,WAAW,KAAK;AAAA,QAEnB,GAAI,eAAe,EAAE,GAAG,WAAW,KAAK,WAAA;AAAA,QAExC,GAAI,uBAAuB;AAAA,UACzB,OAAO,MAAM,MAAM;AAAA,QAAA;AAAA,QAGrB,CAAC,WAAW,GAAG;AAAA,UACb,SAAS;AAAA,UACT,UAAU;AAAA,UACV,MAAM,IAAI,MAAM,QAAQ,EAAE;AAAA,UAC1B,KAAK;AAAA,UACL,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,SAAS;AAAA,UACT,iBAAiB,MAAM,MAAM;AAAA,UAC7B,GAAI,mBAAmB,EAAE,iBAAiB,MAAM,MAAM,KAAA;AAAA,UAEtD,GAAI,4BAA4B;AAAA,YAC9B,SAAS;AAAA,UAAA;AAAA,UAGX,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,YACtC,MAAM,IAAI,MAAM,QAAQ,EAAE;AAAA,UAAA;AAAA,UAG5B,CAAC,0BAA0B,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,GAAG,WAAW,KAAK,OAAA;AAAA,UACzC,GAAI,eAAe,EAAE,GAAG,WAAW,KAAK,WAAA;AAAA,QAAW;AAAA,MACrD;AAAA,IACF;AAAA,EACF,CACD;AAED,SAAO;AACT;"}

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

@@ -1,5 +1,5 @@
 import { QuoteTextProps } from '../_types';
-declare const _default: (props: QuoteTextProps) => {
+declare const _default: (props: Pick<QuoteTextProps, "isThemeDark" | "isThemeMaryland" | "isSizeLarge" | "isTypeFeatured" | "image" | "quote" | "attribution" | "attributionSubText" | "action" | "includesAnimation">) => {
     element: HTMLElement;
     className: string;
     styles: string;

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

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/text.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;yBAGhC,OAAO,cAAc;;;;;AAArC,wBAkPE"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/text.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,WAAW,CAAC;yBA2G9C,OAAO,IAAI,CACT,cAAc,EACZ,aAAa,GACb,iBAAiB,GACjB,aAAa,GACb,gBAAgB,GAChB,OAAO,GACP,OAAO,GACP,aAAa,GACb,oBAAoB,GACpB,QAAQ,GACR,mBAAmB,CACtB;;;;;AAbH,wBA0EE"}