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

package/dist/composite/person/list.mjs

@@ -1,20 +1,31 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
-import "../../node_modules/postcss/lib/postcss.mjs";
-import "../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../node_modules/postcss-js/index.mjs";
-import { createContainerQuery } from "../../utilities/theme/media.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import { createMediaQuery } from "@universityofmaryland/web-utilities-library/styles";
 import { createDiv } from "../../model/elements/index.mjs";
+import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-utilities-library/media";
+import "@universityofmaryland/web-utilities-library/dom";
+import "@universityofmaryland/web-icons-library/controls";
+import "@universityofmaryland/web-icons-library/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
+import "@universityofmaryland/web-icons-library/arrows";
 import "../../atomic/animations/actions/indicator.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../atomic/animations/brand/card-stack.mjs";
+import "@universityofmaryland/web-utilities-library/performance";
+import "@universityofmaryland/web-utilities-library/accessibility";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
 import "../../atomic/layout/block/stacked.mjs";
 import "../../atomic/layout/overlay/modal.mjs";
 import { image, information } from "../../atomic/layout/person/columns.mjs";
+import "@universityofmaryland/web-icons-library/social";
 import "../../atomic/text-lockup/date.mjs";
 import "../../atomic/text-lockup/small.mjs";
-const smallBreakpoint = Styles.token.media.breakpointValues.small.max;
-const mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;
-const mediumBreakpoint = Styles.token.media.breakpointValues.large.min;
+import "@universityofmaryland/web-styles-library/typography";
+const smallBreakpoint = token.media.breakpointValues.small.max;
+const mediumBreakpointStart = token.media.breakpointValues.medium.min;
+const mediumBreakpoint = token.media.breakpointValues.large.min;
 const list = ({
   actions,
   address,
@@ -34,17 +45,13 @@ const list = ({
     children.push(
       image({
         customStyles: {
-          ...createContainerQuery(
-            "min-width",
-            mediumBreakpointStart,
-            {
-              display: "block",
-              width: "160px",
-              paddingRight: `${Styles.token.spacing.md}`,
-              alignSelf: "flex-start"
-            }
-          ),
-          ...createContainerQuery("min-width", mediumBreakpoint, {
+          ...createMediaQuery("min-width", mediumBreakpointStart, {
+            display: "block",
+            width: "160px",
+            paddingRight: `${token.spacing.md}`,
+            alignSelf: "flex-start"
+          }),
+          ...createMediaQuery("min-width", mediumBreakpoint, {
             width: "208px"
           })
         },
@@ -78,7 +85,7 @@ const list = ({
       element: {
         overflow: "hidden",
         display: "flex",
-        ...createContainerQuery("max-width", smallBreakpoint, {
+        ...createMediaQuery("max-width", smallBreakpoint, {
           flexDirection: "column"
         })
       }

package/dist/composite/person/list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"list.mjs","sources":["../../../source/composite/person/list.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from 'utilities';\nimport { layout } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.token.media.breakpointValues.large.min;\n\nexport default ({\n  actions,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard) => {\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      layout.person.columns.image({\n        customStyles: {\n          ...theme.media.createContainerQuery(\n            'min-width',\n            mediumBreakpointStart,\n            {\n              display: 'block',\n              width: '160px',\n              paddingRight: `${Styles.token.spacing.md}`,\n              alignSelf: 'flex-start',\n            },\n          ),\n\n          ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n            width: '208px',\n          }),\n        },\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    children.push(\n      layout.person.columns.information({\n        actions,\n        address,\n        association,\n        customStyles: {},\n        email,\n        isThemeDark,\n        job,\n        linkendIn,\n        name,\n        phone,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-list-container',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    },\n  });\n};\n"],"names":["image","layout.person.columns.image","theme.media.createContainerQuery","layout.person.columns.information","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;AAOA,MAAM,kBAAkB,OAAO,MAAM,MAAM,iBAAiB,MAAM;AAClE,MAAM,wBAAwB,OAAO,MAAM,MAAM,iBAAiB,OAAO;AACzE,MAAM,mBAAmB,OAAO,MAAM,MAAM,iBAAiB,MAAM;AAEnE,MAAA,OAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,MAAI,WAA4B,CAAA;AAEhC,MAAIA,SAAO;AACT,aAAS;AAAA,MACPC,MAA4B;AAAA,QAC1B,cAAc;AAAA,UACZ,GAAGC;AAAAA,YACD;AAAA,YACA;AAAA,YACA;AAAA,cACE,SAAS;AAAA,cACT,OAAO;AAAA,cACP,cAAc,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,cACxC,WAAW;AAAA,YAAA;AAAA,UACb;AAAA,UAGF,GAAGA,qBAAiC,aAAa,kBAAkB;AAAA,YACjE,OAAO;AAAA,UAAA,CACR;AAAA,QAAA;AAAA,QACH,OACAF;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPG,YAAkC;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QAET,GAAGF,qBAAiC,aAAa,iBAAiB;AAAA,UAChE,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;"}
+{"version":3,"file":"list.mjs","sources":["../../../source/composite/person/list.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\nexport default ({\n  actions,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard) => {\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      layout.person.columns.image({\n        customStyles: {\n          ...createMediaQuery('min-width', mediumBreakpointStart, {\n            display: 'block',\n            width: '160px',\n            paddingRight: `${token.spacing.md}`,\n            alignSelf: 'flex-start',\n          }),\n\n          ...createMediaQuery('min-width', mediumBreakpoint, {\n            width: '208px',\n          }),\n        },\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    children.push(\n      layout.person.columns.information({\n        actions,\n        address,\n        association,\n        customStyles: {},\n        email,\n        isThemeDark,\n        job,\n        linkendIn,\n        name,\n        phone,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-list-container',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    },\n  });\n};\n"],"names":["image","layout.person.columns.image","layout.person.columns.information","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAC3D,MAAM,wBAAwB,MAAM,MAAM,iBAAiB,OAAO;AAClE,MAAM,mBAAmB,MAAM,MAAM,iBAAiB,MAAM;AAE5D,MAAA,OAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,MAAI,WAA4B,CAAA;AAEhC,MAAIA,SAAO;AACT,aAAS;AAAA,MACPC,MAA4B;AAAA,QAC1B,cAAc;AAAA,UACZ,GAAG,iBAAiB,aAAa,uBAAuB;AAAA,YACtD,SAAS;AAAA,YACT,OAAO;AAAA,YACP,cAAc,GAAG,MAAM,QAAQ,EAAE;AAAA,YACjC,WAAW;AAAA,UAAA,CACZ;AAAA,UAED,GAAG,iBAAiB,aAAa,kBAAkB;AAAA,YACjD,OAAO;AAAA,UAAA,CACR;AAAA,QAAA;AAAA,QACH,OACAD;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPE,YAAkC;AAAA,QAChC;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QAET,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,UAChD,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;"}

package/dist/composite/person/tabular.js

@@ -1,18 +1,29 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-require("../../node_modules/postcss/lib/postcss.js");
-require("../../node_modules/postcss-nesting/dist/index.js");
-require("../../node_modules/postcss-js/index.js");
-const media = require("../../utilities/theme/media.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
 const index = require("../../model/elements/index.js");
+require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-utilities-library/media");
+require("@universityofmaryland/web-utilities-library/dom");
+require("@universityofmaryland/web-icons-library/controls");
+require("@universityofmaryland/web-icons-library/communication");
+require("@universityofmaryland/web-icons-library/files");
+require("@universityofmaryland/web-icons-library/brand");
+require("@universityofmaryland/web-icons-library/arrows");
 require("../../atomic/animations/actions/indicator.js");
 require("../../atomic/animations/brand/chevron-scroll.js");
 require("../../atomic/animations/brand/card-stack.js");
+require("@universityofmaryland/web-utilities-library/performance");
+require("@universityofmaryland/web-utilities-library/accessibility");
+require("@universityofmaryland/web-icons-library/location");
+require("@universityofmaryland/web-icons-library/calendar");
 require("../../atomic/layout/block/stacked.js");
 require("../../atomic/layout/overlay/modal.js");
 const columns = require("../../atomic/layout/person/columns.js");
+require("@universityofmaryland/web-icons-library/social");
 require("../../atomic/text-lockup/date.js");
 require("../../atomic/text-lockup/small.js");
+require("@universityofmaryland/web-styles-library/typography");
 const headline = require("../../model/elements/headline.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -30,8 +41,8 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
-const smallBreakpoint = Styles__namespace.token.media.breakpointValues.small.max;
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const smallBreakpoint = token__namespace.media.breakpointValues.small.max;
 const tabular = ({
   actions,
   additionalContact,
@@ -61,10 +72,10 @@ const tabular = ({
       element: name,
       elementStyles: {
         element: {
-          fontWeight: `${Styles__namespace.token.font.weight.bold}`,
-          color: `${Styles__namespace.token.color.black}`,
+          fontWeight: `${token__namespace.font.weight.bold}`,
+          color: `${token__namespace.color.black}`,
           [`& + *`]: {
-            marginTop: Styles__namespace.token.spacing.min
+            marginTop: token__namespace.spacing.min
           }
         },
         subElement: {
@@ -106,7 +117,7 @@ const tabular = ({
       element: {
         overflow: "hidden",
         display: "flex",
-        ...media.createContainerQuery("max-width", smallBreakpoint, {
+        ...styles.createMediaQuery("max-width", smallBreakpoint, {
           flexDirection: "column"
         })
       }

package/dist/composite/person/tabular.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabular.js","sources":["../../../source/composite/person/tabular.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from 'utilities';\nimport { layout } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\n\nexport default ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard) => {\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      layout.person.columns.image({\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    const nameComposite = ElementModel.headline.sansLarge({\n      element: name,\n      elementStyles: {\n        element: {\n          fontWeight: `${Styles.token.font.weight.bold}`,\n          color: `${Styles.token.color.black}`,\n\n          [`& + *`]: {\n            marginTop: Styles.token.spacing.min,\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      },\n      isThemeDark,\n    });\n\n    children.push(\n      layout.person.columns.details({\n        actions,\n        association,\n        isThemeDark,\n        customStyles: {},\n        job,\n        nameComposite,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  if (additionalContact || address || email || linkendIn || phone) {\n    children.push(\n      layout.person.columns.contact({\n        additionalContact,\n        address,\n        customStyles: {},\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-tabular-container',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    },\n  });\n};\n"],"names":["Styles","layout.person.columns.image","ElementModel.headline.sansLarge","layout.person.columns.details","layout.person.columns.contact","ElementModel.createDiv","theme.media.createContainerQuery"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkBA,kBAAO,MAAM,MAAM,iBAAiB,MAAM;AAElE,MAAA,UAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,MAAI,WAA4B,CAAA;AAEhC,MAAI,OAAO;AACT,aAAS;AAAA,MACPC,cAA4B;AAAA,QAC1B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,UAAM,gBAAgBC,SAAAA,UAAgC;AAAA,MACpD,SAAS;AAAA,MACT,eAAe;AAAA,QACb,SAAS;AAAA,UACP,YAAY,GAAGF,kBAAO,MAAM,KAAK,OAAO,IAAI;AAAA,UAC5C,OAAO,GAAGA,kBAAO,MAAM,MAAM,KAAK;AAAA,UAElC,CAAC,OAAO,GAAG;AAAA,YACT,WAAWA,kBAAO,MAAM,QAAQ;AAAA,UAAA;AAAA,QAClC;AAAA,QAEF,YAAY;AAAA,UACV,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,IAAA,CACD;AAED,aAAS;AAAA,MACPG,gBAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,qBAAqB,WAAW,SAAS,aAAa,OAAO;AAC/D,aAAS;AAAA,MACPC,gBAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QAET,GAAGC,MAAAA,qBAAiC,aAAa,iBAAiB;AAAA,UAChE,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;;"}
+{"version":3,"file":"tabular.js","sources":["../../../source/composite/person/tabular.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport default ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard) => {\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      layout.person.columns.image({\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    const nameComposite = ElementModel.headline.sansLarge({\n      element: name,\n      elementStyles: {\n        element: {\n          fontWeight: `${token.font.weight.bold}`,\n          color: `${token.color.black}`,\n\n          [`& + *`]: {\n            marginTop: token.spacing.min,\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      },\n      isThemeDark,\n    });\n\n    children.push(\n      layout.person.columns.details({\n        actions,\n        association,\n        isThemeDark,\n        customStyles: {},\n        job,\n        nameComposite,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  if (additionalContact || address || email || linkendIn || phone) {\n    children.push(\n      layout.person.columns.contact({\n        additionalContact,\n        address,\n        customStyles: {},\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-tabular-container',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    },\n  });\n};\n"],"names":["token","layout.person.columns.image","ElementModel.headline.sansLarge","layout.person.columns.details","layout.person.columns.contact","ElementModel.createDiv","createMediaQuery"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkBA,iBAAM,MAAM,iBAAiB,MAAM;AAE3D,MAAA,UAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,MAAI,WAA4B,CAAA;AAEhC,MAAI,OAAO;AACT,aAAS;AAAA,MACPC,cAA4B;AAAA,QAC1B;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,UAAM,gBAAgBC,SAAAA,UAAgC;AAAA,MACpD,SAAS;AAAA,MACT,eAAe;AAAA,QACb,SAAS;AAAA,UACP,YAAY,GAAGF,iBAAM,KAAK,OAAO,IAAI;AAAA,UACrC,OAAO,GAAGA,iBAAM,MAAM,KAAK;AAAA,UAE3B,CAAC,OAAO,GAAG;AAAA,YACT,WAAWA,iBAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,QAEF,YAAY;AAAA,UACV,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,IAAA,CACD;AAED,aAAS;AAAA,MACPG,gBAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,qBAAqB,WAAW,SAAS,aAAa,OAAO;AAC/D,aAAS;AAAA,MACPC,gBAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QAET,GAAGC,OAAAA,iBAAiB,aAAa,iBAAiB;AAAA,UAChD,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;;"}

package/dist/composite/person/tabular.mjs

@@ -1,19 +1,30 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
-import "../../node_modules/postcss/lib/postcss.mjs";
-import "../../node_modules/postcss-nesting/dist/index.mjs";
-import "../../node_modules/postcss-js/index.mjs";
-import { createContainerQuery } from "../../utilities/theme/media.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import { createMediaQuery } from "@universityofmaryland/web-utilities-library/styles";
 import { createDiv } from "../../model/elements/index.mjs";
+import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-utilities-library/media";
+import "@universityofmaryland/web-utilities-library/dom";
+import "@universityofmaryland/web-icons-library/controls";
+import "@universityofmaryland/web-icons-library/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
+import "@universityofmaryland/web-icons-library/arrows";
 import "../../atomic/animations/actions/indicator.mjs";
 import "../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../atomic/animations/brand/card-stack.mjs";
+import "@universityofmaryland/web-utilities-library/performance";
+import "@universityofmaryland/web-utilities-library/accessibility";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
 import "../../atomic/layout/block/stacked.mjs";
 import "../../atomic/layout/overlay/modal.mjs";
 import { image, details, contact } from "../../atomic/layout/person/columns.mjs";
+import "@universityofmaryland/web-icons-library/social";
 import "../../atomic/text-lockup/date.mjs";
 import "../../atomic/text-lockup/small.mjs";
+import "@universityofmaryland/web-styles-library/typography";
 import { sansLarge } from "../../model/elements/headline.mjs";
-const smallBreakpoint = Styles.token.media.breakpointValues.small.max;
+const smallBreakpoint = token.media.breakpointValues.small.max;
 const tabular = ({
   actions,
   additionalContact,
@@ -43,10 +54,10 @@ const tabular = ({
       element: name,
       elementStyles: {
         element: {
-          fontWeight: `${Styles.token.font.weight.bold}`,
-          color: `${Styles.token.color.black}`,
+          fontWeight: `${token.font.weight.bold}`,
+          color: `${token.color.black}`,
           [`& + *`]: {
-            marginTop: Styles.token.spacing.min
+            marginTop: token.spacing.min
           }
         },
         subElement: {
@@ -88,7 +99,7 @@ const tabular = ({
       element: {
         overflow: "hidden",
         display: "flex",
-        ...createContainerQuery("max-width", smallBreakpoint, {
+        ...createMediaQuery("max-width", smallBreakpoint, {
           flexDirection: "column"
         })
       }

package/dist/composite/person/tabular.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabular.mjs","sources":["../../../source/composite/person/tabular.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from 'utilities';\nimport { layout } from 'atomic';\nimport { ElementModel } from 'model';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\n\nexport default ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard) => {\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      layout.person.columns.image({\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    const nameComposite = ElementModel.headline.sansLarge({\n      element: name,\n      elementStyles: {\n        element: {\n          fontWeight: `${Styles.token.font.weight.bold}`,\n          color: `${Styles.token.color.black}`,\n\n          [`& + *`]: {\n            marginTop: Styles.token.spacing.min,\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      },\n      isThemeDark,\n    });\n\n    children.push(\n      layout.person.columns.details({\n        actions,\n        association,\n        isThemeDark,\n        customStyles: {},\n        job,\n        nameComposite,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  if (additionalContact || address || email || linkendIn || phone) {\n    children.push(\n      layout.person.columns.contact({\n        additionalContact,\n        address,\n        customStyles: {},\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-tabular-container',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    },\n  });\n};\n"],"names":["image","layout.person.columns.image","ElementModel.headline.sansLarge","layout.person.columns.details","layout.person.columns.contact","ElementModel.createDiv","theme.media.createContainerQuery"],"mappings":";;;;;;;;;;;;;;;AAOA,MAAM,kBAAkB,OAAO,MAAM,MAAM,iBAAiB,MAAM;AAElE,MAAA,UAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,MAAI,WAA4B,CAAA;AAEhC,MAAIA,SAAO;AACT,aAAS;AAAA,MACPC,MAA4B;AAAA,QAAA,OAC1BD;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,UAAM,gBAAgBE,UAAgC;AAAA,MACpD,SAAS;AAAA,MACT,eAAe;AAAA,QACb,SAAS;AAAA,UACP,YAAY,GAAG,OAAO,MAAM,KAAK,OAAO,IAAI;AAAA,UAC5C,OAAO,GAAG,OAAO,MAAM,MAAM,KAAK;AAAA,UAElC,CAAC,OAAO,GAAG;AAAA,YACT,WAAW,OAAO,MAAM,QAAQ;AAAA,UAAA;AAAA,QAClC;AAAA,QAEF,YAAY;AAAA,UACV,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,IAAA,CACD;AAED,aAAS;AAAA,MACPC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,qBAAqB,WAAW,SAAS,aAAa,OAAO;AAC/D,aAAS;AAAA,MACPC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QAET,GAAGC,qBAAiC,aAAa,iBAAiB;AAAA,UAChE,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;"}
+{"version":3,"file":"tabular.mjs","sources":["../../../source/composite/person/tabular.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { layout } from 'atomic';\nimport { PersonCard } from './_types';\nimport { ElementVisual } from '../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\n\nexport default ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  email,\n  image,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonCard) => {\n  let children: ElementVisual[] = [];\n\n  if (image) {\n    children.push(\n      layout.person.columns.image({\n        image,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (name) {\n    const nameComposite = ElementModel.headline.sansLarge({\n      element: name,\n      elementStyles: {\n        element: {\n          fontWeight: `${token.font.weight.bold}`,\n          color: `${token.color.black}`,\n\n          [`& + *`]: {\n            marginTop: token.spacing.min,\n          },\n        },\n        subElement: {\n          color: 'currentColor',\n        },\n      },\n      isThemeDark,\n    });\n\n    children.push(\n      layout.person.columns.details({\n        actions,\n        association,\n        isThemeDark,\n        customStyles: {},\n        job,\n        nameComposite,\n        pronouns,\n        subText,\n      }),\n    );\n  }\n\n  if (additionalContact || address || email || linkendIn || phone) {\n    children.push(\n      layout.person.columns.contact({\n        additionalContact,\n        address,\n        customStyles: {},\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: 'person-tabular-container',\n    children,\n    elementStyles: {\n      element: {\n        overflow: 'hidden',\n        display: 'flex',\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          flexDirection: 'column',\n        }),\n      },\n    },\n  });\n};\n"],"names":["image","layout.person.columns.image","ElementModel.headline.sansLarge","layout.person.columns.details","layout.person.columns.contact","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,kBAAkB,MAAM,MAAM,iBAAiB,MAAM;AAE3D,MAAA,UAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAAA,OACAA;AAAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkB;AAChB,MAAI,WAA4B,CAAA;AAEhC,MAAIA,SAAO;AACT,aAAS;AAAA,MACPC,MAA4B;AAAA,QAAA,OAC1BD;AAAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,UAAM,gBAAgBE,UAAgC;AAAA,MACpD,SAAS;AAAA,MACT,eAAe;AAAA,QACb,SAAS;AAAA,UACP,YAAY,GAAG,MAAM,KAAK,OAAO,IAAI;AAAA,UACrC,OAAO,GAAG,MAAM,MAAM,KAAK;AAAA,UAE3B,CAAC,OAAO,GAAG;AAAA,YACT,WAAW,MAAM,QAAQ;AAAA,UAAA;AAAA,QAC3B;AAAA,QAEF,YAAY;AAAA,UACV,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF;AAAA,IAAA,CACD;AAED,aAAS;AAAA,MACPC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,qBAAqB,WAAW,SAAS,aAAa,OAAO;AAC/D,aAAS;AAAA,MACPC,QAA8B;AAAA,QAC5B;AAAA,QACA;AAAA,QACA,cAAc,CAAA;AAAA,QACd;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,SAAS;AAAA,QAET,GAAG,iBAAiB,aAAa,iBAAiB;AAAA,UAChD,eAAe;AAAA,QAAA,CAChB;AAAA,MAAA;AAAA,IACH;AAAA,EACF,CACD;AACH;"}

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

@@ -0,0 +1,3 @@
+export declare const SMALL = 500;
+export declare const MEDIUM = 900;
+//# sourceMappingURL=_constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"_constants.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/_constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,MAAM,CAAC;AACzB,eAAO,MAAM,MAAM,MAAM,CAAC"}

package/dist/composite/quote/_constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const SMALL = 500;
+const MEDIUM = 900;
+exports.MEDIUM = MEDIUM;
+exports.SMALL = SMALL;
+//# sourceMappingURL=_constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"_constants.js","sources":["../../../source/composite/quote/_constants.ts"],"sourcesContent":["export const SMALL = 500;\nexport const MEDIUM = 900;\n"],"names":[],"mappings":";;AAAO,MAAM,QAAQ;AACd,MAAM,SAAS;;;"}

package/dist/composite/quote/_constants.mjs

@@ -0,0 +1,7 @@
+const SMALL = 500;
+const MEDIUM = 900;
+export {
+  MEDIUM,
+  SMALL
+};
+//# sourceMappingURL=_constants.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"_constants.mjs","sources":["../../../source/composite/quote/_constants.ts"],"sourcesContent":["export const SMALL = 500;\nexport const MEDIUM = 900;\n"],"names":[],"mappings":"AAAO,MAAM,QAAQ;AACd,MAAM,SAAS;"}

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

@@ -0,0 +1,24 @@
+import { ContentElement, ImageElement, LinkElement, ThemeProps, DisplayProps, AnimationProps, SizeProps as BaseSizeProps } from '../../_types';
+export interface QuoteBaseProps extends Pick<ThemeProps, 'isThemeDark' | 'isThemeMaryland'>, Pick<DisplayProps, 'isTransparent'>, Pick<AnimationProps, 'includesAnimation'> {
+    quote: ContentElement;
+    image?: ImageElement;
+}
+export interface QuoteSizeProps extends Pick<BaseSizeProps, 'isSizeLarge'> {
+}
+export interface QuoteVariantProps {
+    isTypeFeatured?: boolean;
+}
+export interface QuoteContentProps {
+    attribution: ContentElement;
+    attributionSubText: ContentElement;
+    action: LinkElement;
+}
+export interface QuoteTextProps extends QuoteBaseProps, QuoteVariantProps, QuoteSizeProps, QuoteContentProps {
+}
+export interface QuoteInlineProps extends QuoteTextProps {
+}
+export interface QuoteFeaturedProps extends QuoteInlineProps {
+}
+export interface QuoteStatementProps extends QuoteBaseProps {
+}
+//# sourceMappingURL=_types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"_types.d.ts","sourceRoot":"","sources":["../../../source/composite/quote/_types.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,SAAS,IAAI,aAAa,EAChC,MAAM,cAAc,CAAC;AAEtB,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,UAAU,EAAE,aAAa,GAAG,iBAAiB,CAAC,EACzD,IAAI,CAAC,YAAY,EAAE,eAAe,CAAC,EACnC,IAAI,CAAC,cAAc,EAAE,mBAAmB,CAAC;IAC3C,KAAK,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB;AAED,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,aAAa,EAAE,aAAa,CAAC;CAAG;AAE7E,MAAM,WAAW,iBAAiB;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,cAAc,CAAC;IAC5B,kBAAkB,EAAE,cAAc,CAAC;IACnC,MAAM,EAAE,WAAW,CAAC;CACrB;AAED,MAAM,WAAW,cACf,SAAQ,cAAc,EACpB,iBAAiB,EACjB,cAAc,EACd,iBAAiB;CAAG;AAExB,MAAM,WAAW,gBAAiB,SAAQ,cAAc;CAAG;AAE3D,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB;CAAG;AAE/D,MAAM,WAAW,mBAAoB,SAAQ,cAAc;CAAG"}

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

@@ -0,0 +1,11 @@
+import { QuoteBaseProps, QuoteVariantProps } from '../_types';
+interface QuoteActionProps extends QuoteVariantProps, Pick<QuoteBaseProps, 'includesAnimation' | 'image'> {
+    action: HTMLAnchorElement;
+}
+declare const _default: ({ action, image, includesAnimation, isTypeFeatured, }: QuoteActionProps) => {
+    element: HTMLElement;
+    className: string;
+    styles: string;
+};
+export default _default;
+//# sourceMappingURL=action.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"action.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/action.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAExE,UAAU,gBACR,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,mBAAmB,GAAG,OAAO,CAAC;IACrD,MAAM,EAAE,iBAAiB,CAAC;CAC3B;yBAEe,uDAKb,gBAAgB;;;;;AALnB,wBAyBK"}

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

@@ -0,0 +1,46 @@
+"use strict";
+const token = require("@universityofmaryland/web-styles-library/token");
+const layout = require("@universityofmaryland/web-styles-library/layout");
+const index = require("../../../model/elements/index.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 layout__namespace = /* @__PURE__ */ _interopNamespaceDefault(layout);
+const elementAction = ({
+  action,
+  image,
+  includesAnimation,
+  isTypeFeatured = false
+}) => index.create({
+  element: action,
+  className: "quote-container-actions",
+  elementStyles: {
+    element: {
+      marginTop: token__namespace.spacing.sm,
+      ...!isTypeFeatured && {
+        ...layout__namespace.grid.inline.tabletRows
+      },
+      ...includesAnimation && (!isTypeFeatured || isTypeFeatured && !image) && {
+        opacity: "0",
+        transform: "translateY(20px)",
+        transition: "opacity 1s ease, transform 0.5s ease"
+      }
+    }
+  }
+});
+module.exports = elementAction;
+//# sourceMappingURL=action.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"action.js","sources":["../../../../source/composite/quote/elements/action.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { ElementModel } from 'model';\nimport { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteActionProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'includesAnimation' | 'image'> {\n  action: HTMLAnchorElement;\n}\n\nexport default ({\n  action,\n  image,\n  includesAnimation,\n  isTypeFeatured = false,\n}: QuoteActionProps) =>\n  ElementModel.create({\n    element: action,\n    className: 'quote-container-actions',\n    elementStyles: {\n      element: {\n        marginTop: token.spacing.sm,\n\n        ...(!isTypeFeatured && {\n          ...layout.grid.inline.tabletRows,\n        }),\n\n        ...(includesAnimation &&\n          (!isTypeFeatured || (isTypeFeatured && !image)) && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n      },\n    },\n  });\n"],"names":["ElementModel.create","token","layout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAWA,MAAA,gBAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MACEA,aAAoB;AAAA,EAClB,SAAS;AAAA,EACT,WAAW;AAAA,EACX,eAAe;AAAA,IACb,SAAS;AAAA,MACP,WAAWC,iBAAM,QAAQ;AAAA,MAEzB,GAAI,CAAC,kBAAkB;AAAA,QACrB,GAAGC,kBAAO,KAAK,OAAO;AAAA,MAAA;AAAA,MAGxB,GAAI,sBACD,CAAC,kBAAmB,kBAAkB,CAAC,UAAW;AAAA,QACjD,SAAS;AAAA,QACT,WAAW;AAAA,QACX,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACJ;AAEJ,CAAC;;"}

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

@@ -0,0 +1,29 @@
+import * as token from "@universityofmaryland/web-styles-library/token";
+import * as layout from "@universityofmaryland/web-styles-library/layout";
+import { create } from "../../../model/elements/index.mjs";
+const elementAction = ({
+  action,
+  image,
+  includesAnimation,
+  isTypeFeatured = false
+}) => create({
+  element: action,
+  className: "quote-container-actions",
+  elementStyles: {
+    element: {
+      marginTop: token.spacing.sm,
+      ...!isTypeFeatured && {
+        ...layout.grid.inline.tabletRows
+      },
+      ...includesAnimation && (!isTypeFeatured || isTypeFeatured && !image) && {
+        opacity: "0",
+        transform: "translateY(20px)",
+        transition: "opacity 1s ease, transform 0.5s ease"
+      }
+    }
+  }
+});
+export {
+  elementAction as default
+};
+//# sourceMappingURL=action.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"action.mjs","sources":["../../../../source/composite/quote/elements/action.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { ElementModel } from 'model';\nimport { type QuoteBaseProps, type QuoteVariantProps } from '../_types';\n\ninterface QuoteActionProps\n  extends QuoteVariantProps,\n    Pick<QuoteBaseProps, 'includesAnimation' | 'image'> {\n  action: HTMLAnchorElement;\n}\n\nexport default ({\n  action,\n  image,\n  includesAnimation,\n  isTypeFeatured = false,\n}: QuoteActionProps) =>\n  ElementModel.create({\n    element: action,\n    className: 'quote-container-actions',\n    elementStyles: {\n      element: {\n        marginTop: token.spacing.sm,\n\n        ...(!isTypeFeatured && {\n          ...layout.grid.inline.tabletRows,\n        }),\n\n        ...(includesAnimation &&\n          (!isTypeFeatured || (isTypeFeatured && !image)) && {\n            opacity: '0',\n            transform: 'translateY(20px)',\n            transition: 'opacity 1s ease, transform 0.5s ease',\n          }),\n      },\n    },\n  });\n"],"names":["ElementModel.create"],"mappings":";;;AAWA,MAAA,gBAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MACEA,OAAoB;AAAA,EAClB,SAAS;AAAA,EACT,WAAW;AAAA,EACX,eAAe;AAAA,IACb,SAAS;AAAA,MACP,WAAW,MAAM,QAAQ;AAAA,MAEzB,GAAI,CAAC,kBAAkB;AAAA,QACrB,GAAG,OAAO,KAAK,OAAO;AAAA,MAAA;AAAA,MAGxB,GAAI,sBACD,CAAC,kBAAmB,kBAAkB,CAAC,UAAW;AAAA,QACjD,SAAS;AAAA,QACT,WAAW;AAAA,QACX,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,EACJ;AAEJ,CAAC;"}

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

@@ -0,0 +1,10 @@
+import { QuoteBaseProps, QuoteVariantProps } from '../_types';
+interface QuoteIconProps extends QuoteVariantProps, Pick<QuoteBaseProps, 'isThemeMaryland' | 'image'> {
+}
+declare const _default: ({ image, isThemeMaryland, isTypeFeatured, }: QuoteIconProps) => {
+    element: HTMLElement;
+    className: string;
+    styles: string;
+};
+export default _default;
+//# sourceMappingURL=icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../source/composite/quote/elements/icon.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAExE,UAAU,cACR,SAAQ,iBAAiB,EACvB,IAAI,CAAC,cAAc,EAAE,iBAAiB,GAAG,OAAO,CAAC;CAAG;yBAExC,6CAIb,cAAc;;;;;AAJjB,wBAmDE"}

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

@@ -0,0 +1,67 @@
+"use strict";
+const token = require("@universityofmaryland/web-styles-library/token");
+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" } });
+  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 elementIcon = ({
+  image,
+  isThemeMaryland,
+  isTypeFeatured = false
+}) => {
+  const iconSpan = index.createSpan({
+    className: "quote-icon-span",
+    elementStyles: {
+      element: {
+        position: "absolute",
+        left: "-24px",
+        top: "-32px",
+        height: "15px",
+        width: "22px",
+        display: "block",
+        ...image && isTypeFeatured && {
+          display: "none"
+        },
+        ...!isTypeFeatured && image && {
+          height: "20px",
+          width: "29px",
+          top: "-11px",
+          right: "-20px",
+          left: "inherit"
+        },
+        [`@container (min-width: ${_constants.SMALL}px)`]: {
+          ...!image && {
+            left: `-${token__namespace.spacing["4xl"]}`,
+            top: "0"
+          }
+        },
+        ["& svg"]: {
+          fill: token__namespace.color.red,
+          ...isThemeMaryland && {
+            fill: token__namespace.color.gold
+          }
+        }
+      }
+    }
+  });
+  iconSpan.element.innerHTML = brand.quote;
+  return iconSpan;
+};
+module.exports = elementIcon;
+//# sourceMappingURL=icon.js.map

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

@@ -0,0 +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' | '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","SMALL","token","iconQuote"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAUA,MAAA,cAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MAAsB;AACpB,QAAM,WAAWA,MAAAA,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,0BAA0BC,gBAAK,KAAK,GAAG;AAAA,UACtC,GAAI,CAAC,SAAS;AAAA,YACZ,MAAM,IAAIC,iBAAM,QAAQ,KAAK,CAAC;AAAA,YAC9B,KAAK;AAAA,UAAA;AAAA,QACP;AAAA,QAGF,CAAC,OAAO,GAAG;AAAA,UACT,MAAMA,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;;"}

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

@@ -0,0 +1,51 @@
+import * as token from "@universityofmaryland/web-styles-library/token";
+import { quote } from "@universityofmaryland/web-icons-library/brand";
+import { createSpan } from "../../../model/elements/index.mjs";
+import { SMALL } from "../_constants.mjs";
+const elementIcon = ({
+  image,
+  isThemeMaryland,
+  isTypeFeatured = false
+}) => {
+  const iconSpan = createSpan({
+    className: "quote-icon-span",
+    elementStyles: {
+      element: {
+        position: "absolute",
+        left: "-24px",
+        top: "-32px",
+        height: "15px",
+        width: "22px",
+        display: "block",
+        ...image && isTypeFeatured && {
+          display: "none"
+        },
+        ...!isTypeFeatured && image && {
+          height: "20px",
+          width: "29px",
+          top: "-11px",
+          right: "-20px",
+          left: "inherit"
+        },
+        [`@container (min-width: ${SMALL}px)`]: {
+          ...!image && {
+            left: `-${token.spacing["4xl"]}`,
+            top: "0"
+          }
+        },
+        ["& svg"]: {
+          fill: token.color.red,
+          ...isThemeMaryland && {
+            fill: token.color.gold
+          }
+        }
+      }
+    }
+  });
+  iconSpan.element.innerHTML = quote;
+  return iconSpan;
+};
+export {
+  elementIcon as default
+};
+//# sourceMappingURL=icon.mjs.map

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

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

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

@@ -1,14 +1,11 @@
-export type TypeQuoteImageContainer = {
+import { QuoteBaseProps, QuoteVariantProps, QuoteSizeProps } from '../_types';
+interface QuoteImageProps extends QuoteVariantProps, QuoteSizeProps, Pick<QuoteBaseProps, 'isThemeMaryland'> {
     image: HTMLImageElement;
-};
-declare const _default: {
-    create: ({ image }: TypeQuoteImageContainer) => {
-        element: HTMLDivElement;
-        styles: string;
-    };
-    elements: {
-        container: string;
-    };
+}
+declare const _default: ({ image, isSizeLarge, isThemeMaryland, isTypeFeatured, }: QuoteImageProps) => {
+    element: HTMLElement;
+    className: string;
+    styles: string;
 };
 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":"AAAA,MAAM,MAAM,uBAAuB,GAAG;IACpC,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;;wBAI4C,uBAAuB;;;;;;;;AAUrE,wBAKE"}
+{"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"}