@universityofmaryland/web-elements-library 1.4.8 → 1.5.0

package/dist/atomic/text-lockup/small.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Styles = require("@universityofmaryland/web-styles-library");
+const elementStyles = require("@universityofmaryland/web-styles-library/element");
+const token = require("@universityofmaryland/web-styles-library/token");
 const index = require("../../model/elements/index.js");
 const text = require("../../model/elements/text.js");
 const layout = require("../../model/elements/layout.js");
@@ -22,9 +23,10 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER = "text-lockup-small-container";
-const metaContainer = Styles__namespace?.element?.event?.meta?.container;
+const metaContainer = elementStyles__namespace?.event?.meta?.container;
 const metaClass = (() => {
   if (!metaContainer?.className) return "";
   if (Array.isArray(metaContainer.className)) {
@@ -35,30 +37,29 @@ const metaClass = (() => {
   }
   return "";
 })();
-const { token } = Styles__namespace;
 const eyebrowStyles = {
   element: {
     display: "block"
   },
   siblingAfter: {
-    marginTop: token.spacing.min
+    marginTop: token__namespace.spacing.min
   }
 };
 const ribbonStyles = {
   siblingAfter: {
-    marginTop: token.spacing.sm
+    marginTop: token__namespace.spacing.sm
   }
 };
 const headlineStyles = {
   element: {
     fontWeight: "700",
-    color: `${token.color.black}`,
+    color: `${token__namespace.color.black}`,
     [`& + *`]: {
-      marginTop: token.spacing.sm
+      marginTop: token__namespace.spacing.sm
     },
     [`& + .${metaClass}`]: {
       [`@media (max-width: 479px)`]: {
-        marginTop: token.spacing.min
+        marginTop: token__namespace.spacing.min
       }
     }
   },
@@ -68,22 +69,22 @@ const headlineStyles = {
 };
 const textStyles = {
   element: {
-    color: `${token.color.gray.dark}`
+    color: `${token__namespace.color.gray.dark}`
   },
   siblingAfter: {
-    marginTop: token.spacing.min
+    marginTop: token__namespace.spacing.min
   }
 };
 const dateStyles = {
   element: {
     display: "block",
-    color: `${token.color.gray.mediumAA}`
+    color: `${token__namespace.color.gray.mediumAA}`
   },
   child: {
     color: "currentColor"
   },
   siblingAfter: {
-    marginTop: token.spacing.min
+    marginTop: token__namespace.spacing.min
   }
 };
 const createEyebrow = ({ eyebrow, isThemeDark }) => text.eyebrow({
@@ -99,7 +100,7 @@ const createActions = ({ actions }) => layout.gridInlineTabletRows({
   element: actions,
   elementStyles: {
     element: {
-      marginTop: token.spacing.sm
+      marginTop: token__namespace.spacing.sm
     }
   }
 });

package/dist/atomic/text-lockup/small.js.map

@@ -1 +1 @@
-{"version":3,"file":"small.js","sources":["../../../source/atomic/text-lockup/small.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { type UMDElement } from '../../_types';\n\ntype TypeTheme = {\n  isThemeDark?: boolean;\n};\n\ntype TypeEyebrow = TypeTheme & {\n  eyebrow: HTMLElement;\n};\n\ntype TypeActions = {\n  actions: HTMLElement;\n};\n\nexport type TypeTextLockupSmall = TypeTheme & {\n  headline: HTMLElement | null;\n  eyebrow?: HTMLElement | null;\n  text?: HTMLElement | null;\n  date?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  eventMeta?: UMDElement;\n  hasEyebrowRibbon?: boolean;\n};\n\nconst ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER = 'text-lockup-small-container';\nconst metaContainer = Styles?.element?.event?.meta?.container;\nconst metaClass: string = (() => {\n  if (!metaContainer?.className) return '';\n\n  if (Array.isArray(metaContainer.className)) {\n    return metaContainer.className[0] || '';\n  }\n\n  if (typeof metaContainer.className === 'string') {\n    return metaContainer.className;\n  }\n\n  return '';\n})();\n\nconst { token } = Styles;\n\nexport const eyebrowStyles = {\n  element: {\n    display: 'block',\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const ribbonStyles = {\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n};\n\nexport const headlineStyles = {\n  element: {\n    fontWeight: '700',\n    color: `${token.color.black}`,\n\n    [`& + *`]: {\n      marginTop: token.spacing.sm,\n    },\n\n    [`& + .${metaClass}`]: {\n      [`@media (max-width: 479px)`]: {\n        marginTop: token.spacing.min,\n      },\n    },\n  },\n  subElement: {\n    color: 'currentColor',\n  },\n};\n\nexport const textStyles = {\n  element: {\n    color: `${token.color.gray.dark}`,\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const dateStyles = {\n  element: {\n    display: 'block',\n    color: `${token.color.gray.mediumAA}`,\n  },\n  child: {\n    color: 'currentColor',\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const createEyebrow = ({ eyebrow, isThemeDark }: TypeEyebrow) =>\n  ElementModel.text.eyebrow({\n    element: eyebrow,\n    elementStyles: eyebrowStyles,\n    isThemeDark,\n  });\n\nexport const createRibbonEyebrow = ({ eyebrow }: TypeEyebrow) =>\n  ElementModel.text.ribbon({\n    element: eyebrow,\n    elementStyles: ribbonStyles,\n  });\n\nexport const createActions = ({ actions }: TypeActions) =>\n  ElementModel.layout.gridInlineTabletRows({\n    element: actions,\n    elementStyles: {\n      element: {\n        marginTop: token.spacing.sm,\n      },\n    },\n  });\n\nexport const createTextLockupSmall = ({\n  eyebrow,\n  headline,\n  text,\n  actions,\n  date,\n  eventMeta,\n  isThemeDark,\n}: TypeTextLockupSmall) => {\n  const children: UMDElement[] = [];\n\n  if (eyebrow) {\n    children.push(createEyebrow({ eyebrow, isThemeDark }));\n  }\n\n  if (headline) {\n    children.push(\n      ElementModel.headline.sansLarger({\n        element: headline,\n        elementStyles: headlineStyles,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (eventMeta) {\n    children.push(eventMeta);\n  }\n\n  if (text) {\n    children.push(\n      ElementModel.richText.simple({\n        element: text,\n        elementStyles: textStyles,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (date) {\n    children.push(\n      ElementModel.headline.sansMin({\n        element: date,\n        elementStyles: dateStyles,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (actions) {\n    children.push(\n      createActions({\n        actions,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER,\n    children,\n    elementStyles: {\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    },\n  });\n};\n"],"names":["Styles","ElementModel.text.eyebrow","ElementModel.text.ribbon","ElementModel.layout.gridInlineTabletRows","headline","text","ElementModel.headline.sansLarger","ElementModel.richText.simple","ElementModel.headline.sansMin","ElementModel.createDiv"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAM,sCAAsC;AAC5C,MAAM,gBAAgBA,mBAAQ,SAAS,OAAO,MAAM;AACpD,MAAM,aAAqB,MAAM;AAC/B,MAAI,CAAC,eAAe,UAAW,QAAO;AAEtC,MAAI,MAAM,QAAQ,cAAc,SAAS,GAAG;AAC1C,WAAO,cAAc,UAAU,CAAC,KAAK;AAAA,EACvC;AAEA,MAAI,OAAO,cAAc,cAAc,UAAU;AAC/C,WAAO,cAAc;AAAA,EACvB;AAEA,SAAO;AACT,GAAA;AAEA,MAAM,EAAE,UAAUA;AAEX,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,cAAc;AAAA,IACZ,WAAW,MAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,eAAe;AAAA,EAC1B,cAAc;AAAA,IACZ,WAAW,MAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,iBAAiB;AAAA,EAC5B,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,OAAO,GAAG,MAAM,MAAM,KAAK;AAAA,IAE3B,CAAC,OAAO,GAAG;AAAA,MACT,WAAW,MAAM,QAAQ;AAAA,IAAA;AAAA,IAG3B,CAAC,QAAQ,SAAS,EAAE,GAAG;AAAA,MACrB,CAAC,2BAA2B,GAAG;AAAA,QAC7B,WAAW,MAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,OAAO;AAAA,EAAA;AAEX;AAEO,MAAM,aAAa;AAAA,EACxB,SAAS;AAAA,IACP,OAAO,GAAG,MAAM,MAAM,KAAK,IAAI;AAAA,EAAA;AAAA,EAEjC,cAAc;AAAA,IACZ,WAAW,MAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,aAAa;AAAA,EACxB,SAAS;AAAA,IACP,SAAS;AAAA,IACT,OAAO,GAAG,MAAM,MAAM,KAAK,QAAQ;AAAA,EAAA;AAAA,EAErC,OAAO;AAAA,IACL,OAAO;AAAA,EAAA;AAAA,EAET,cAAc;AAAA,IACZ,WAAW,MAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,gBAAgB,CAAC,EAAE,SAAS,kBACvCC,KAAAA,QAA0B;AAAA,EACxB,SAAS;AAAA,EACT,eAAe;AAAA,EACf;AACF,CAAC;AAEI,MAAM,sBAAsB,CAAC,EAAE,cACpCC,YAAyB;AAAA,EACvB,SAAS;AAAA,EACT,eAAe;AACjB,CAAC;AAEI,MAAM,gBAAgB,CAAC,EAAE,cAC9BC,4BAAyC;AAAA,EACvC,SAAS;AAAA,EACT,eAAe;AAAA,IACb,SAAS;AAAA,MACP,WAAW,MAAM,QAAQ;AAAA,IAAA;AAAA,EAC3B;AAEJ,CAAC;AAEI,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EAAA,UACAC;AAAAA,EACA,MAAAC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,WAAyB,CAAA;AAE/B,MAAI,SAAS;AACX,aAAS,KAAK,cAAc,EAAE,SAAS,YAAA,CAAa,CAAC;AAAA,EACvD;AAEA,MAAID,YAAU;AACZ,aAAS;AAAA,MACPE,oBAAiC;AAAA,QAC/B,SAASF;AAAAA,QACT,eAAe;AAAA,QACf;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,WAAW;AACb,aAAS,KAAK,SAAS;AAAA,EACzB;AAEA,MAAIC,OAAM;AACR,aAAS;AAAA,MACPE,gBAA6B;AAAA,QAC3B,SAASF;AAAA,QACT,eAAe;AAAA,QACf;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPG,iBAA8B;AAAA,QAC5B,SAAS;AAAA,QACT,eAAe;AAAA,QACf;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,SAAS;AACX,aAAS;AAAA,MACP,cAAc;AAAA,QACZ;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,MAAA;AAAA,IACZ;AAAA,EACF,CACD;AACH;;;;;;;;;;"}
+{"version":3,"file":"small.js","sources":["../../../source/atomic/text-lockup/small.ts"],"sourcesContent":["import * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { type UMDElement } from '../../_types';\n\ntype TypeTheme = {\n  isThemeDark?: boolean;\n};\n\ntype TypeEyebrow = TypeTheme & {\n  eyebrow: HTMLElement;\n};\n\ntype TypeActions = {\n  actions: HTMLElement;\n};\n\nexport type TypeTextLockupSmall = TypeTheme & {\n  headline: HTMLElement | null;\n  eyebrow?: HTMLElement | null;\n  text?: HTMLElement | null;\n  date?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  eventMeta?: UMDElement;\n  hasEyebrowRibbon?: boolean;\n};\n\nconst ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER = 'text-lockup-small-container';\nconst metaContainer = elementStyles?.event?.meta?.container;\nconst metaClass: string = (() => {\n  if (!metaContainer?.className) return '';\n\n  if (Array.isArray(metaContainer.className)) {\n    return metaContainer.className[0] || '';\n  }\n\n  if (typeof metaContainer.className === 'string') {\n    return metaContainer.className;\n  }\n\n  return '';\n})();\n\nexport const eyebrowStyles = {\n  element: {\n    display: 'block',\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const ribbonStyles = {\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n};\n\nexport const headlineStyles = {\n  element: {\n    fontWeight: '700',\n    color: `${token.color.black}`,\n\n    [`& + *`]: {\n      marginTop: token.spacing.sm,\n    },\n\n    [`& + .${metaClass}`]: {\n      [`@media (max-width: 479px)`]: {\n        marginTop: token.spacing.min,\n      },\n    },\n  },\n  subElement: {\n    color: 'currentColor',\n  },\n};\n\nexport const textStyles = {\n  element: {\n    color: `${token.color.gray.dark}`,\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const dateStyles = {\n  element: {\n    display: 'block',\n    color: `${token.color.gray.mediumAA}`,\n  },\n  child: {\n    color: 'currentColor',\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const createEyebrow = ({ eyebrow, isThemeDark }: TypeEyebrow) =>\n  ElementModel.text.eyebrow({\n    element: eyebrow,\n    elementStyles: eyebrowStyles,\n    isThemeDark,\n  });\n\nexport const createRibbonEyebrow = ({ eyebrow }: TypeEyebrow) =>\n  ElementModel.text.ribbon({\n    element: eyebrow,\n    elementStyles: ribbonStyles,\n  });\n\nexport const createActions = ({ actions }: TypeActions) =>\n  ElementModel.layout.gridInlineTabletRows({\n    element: actions,\n    elementStyles: {\n      element: {\n        marginTop: token.spacing.sm,\n      },\n    },\n  });\n\nexport const createTextLockupSmall = ({\n  eyebrow,\n  headline,\n  text,\n  actions,\n  date,\n  eventMeta,\n  isThemeDark,\n}: TypeTextLockupSmall) => {\n  const children: UMDElement[] = [];\n\n  if (eyebrow) {\n    children.push(createEyebrow({ eyebrow, isThemeDark }));\n  }\n\n  if (headline) {\n    children.push(\n      ElementModel.headline.sansLarger({\n        element: headline,\n        elementStyles: headlineStyles,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (eventMeta) {\n    children.push(eventMeta);\n  }\n\n  if (text) {\n    children.push(\n      ElementModel.richText.simple({\n        element: text,\n        elementStyles: textStyles,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (date) {\n    children.push(\n      ElementModel.headline.sansMin({\n        element: date,\n        elementStyles: dateStyles,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (actions) {\n    children.push(\n      createActions({\n        actions,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER,\n    children,\n    elementStyles: {\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    },\n  });\n};\n"],"names":["elementStyles","token","ElementModel.text.eyebrow","ElementModel.text.ribbon","ElementModel.layout.gridInlineTabletRows","headline","text","ElementModel.headline.sansLarger","ElementModel.richText.simple","ElementModel.headline.sansMin","ElementModel.createDiv"],"mappings":"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"}

package/dist/atomic/text-lockup/small.mjs

@@ -1,11 +1,12 @@
-import * as Styles from "@universityofmaryland/web-styles-library";
+import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import * as token from "@universityofmaryland/web-styles-library/token";
 import { createDiv } from "../../model/elements/index.mjs";
 import { eyebrow, ribbon } from "../../model/elements/text.mjs";
 import { gridInlineTabletRows } from "../../model/elements/layout.mjs";
 import { sansLarger, sansMin } from "../../model/elements/headline.mjs";
 import { simple } from "../../model/elements/rich-text.mjs";
 const ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER = "text-lockup-small-container";
-const metaContainer = Styles?.element?.event?.meta?.container;
+const metaContainer = elementStyles?.event?.meta?.container;
 const metaClass = (() => {
   if (!metaContainer?.className) return "";
   if (Array.isArray(metaContainer.className)) {
@@ -16,7 +17,6 @@ const metaClass = (() => {
   }
   return "";
 })();
-const { token } = Styles;
 const eyebrowStyles = {
   element: {
     display: "block"

package/dist/atomic/text-lockup/small.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"small.mjs","sources":["../../../source/atomic/text-lockup/small.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { type UMDElement } from '../../_types';\n\ntype TypeTheme = {\n  isThemeDark?: boolean;\n};\n\ntype TypeEyebrow = TypeTheme & {\n  eyebrow: HTMLElement;\n};\n\ntype TypeActions = {\n  actions: HTMLElement;\n};\n\nexport type TypeTextLockupSmall = TypeTheme & {\n  headline: HTMLElement | null;\n  eyebrow?: HTMLElement | null;\n  text?: HTMLElement | null;\n  date?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  eventMeta?: UMDElement;\n  hasEyebrowRibbon?: boolean;\n};\n\nconst ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER = 'text-lockup-small-container';\nconst metaContainer = Styles?.element?.event?.meta?.container;\nconst metaClass: string = (() => {\n  if (!metaContainer?.className) return '';\n\n  if (Array.isArray(metaContainer.className)) {\n    return metaContainer.className[0] || '';\n  }\n\n  if (typeof metaContainer.className === 'string') {\n    return metaContainer.className;\n  }\n\n  return '';\n})();\n\nconst { token } = Styles;\n\nexport const eyebrowStyles = {\n  element: {\n    display: 'block',\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const ribbonStyles = {\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n};\n\nexport const headlineStyles = {\n  element: {\n    fontWeight: '700',\n    color: `${token.color.black}`,\n\n    [`& + *`]: {\n      marginTop: token.spacing.sm,\n    },\n\n    [`& + .${metaClass}`]: {\n      [`@media (max-width: 479px)`]: {\n        marginTop: token.spacing.min,\n      },\n    },\n  },\n  subElement: {\n    color: 'currentColor',\n  },\n};\n\nexport const textStyles = {\n  element: {\n    color: `${token.color.gray.dark}`,\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const dateStyles = {\n  element: {\n    display: 'block',\n    color: `${token.color.gray.mediumAA}`,\n  },\n  child: {\n    color: 'currentColor',\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const createEyebrow = ({ eyebrow, isThemeDark }: TypeEyebrow) =>\n  ElementModel.text.eyebrow({\n    element: eyebrow,\n    elementStyles: eyebrowStyles,\n    isThemeDark,\n  });\n\nexport const createRibbonEyebrow = ({ eyebrow }: TypeEyebrow) =>\n  ElementModel.text.ribbon({\n    element: eyebrow,\n    elementStyles: ribbonStyles,\n  });\n\nexport const createActions = ({ actions }: TypeActions) =>\n  ElementModel.layout.gridInlineTabletRows({\n    element: actions,\n    elementStyles: {\n      element: {\n        marginTop: token.spacing.sm,\n      },\n    },\n  });\n\nexport const createTextLockupSmall = ({\n  eyebrow,\n  headline,\n  text,\n  actions,\n  date,\n  eventMeta,\n  isThemeDark,\n}: TypeTextLockupSmall) => {\n  const children: UMDElement[] = [];\n\n  if (eyebrow) {\n    children.push(createEyebrow({ eyebrow, isThemeDark }));\n  }\n\n  if (headline) {\n    children.push(\n      ElementModel.headline.sansLarger({\n        element: headline,\n        elementStyles: headlineStyles,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (eventMeta) {\n    children.push(eventMeta);\n  }\n\n  if (text) {\n    children.push(\n      ElementModel.richText.simple({\n        element: text,\n        elementStyles: textStyles,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (date) {\n    children.push(\n      ElementModel.headline.sansMin({\n        element: date,\n        elementStyles: dateStyles,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (actions) {\n    children.push(\n      createActions({\n        actions,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER,\n    children,\n    elementStyles: {\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    },\n  });\n};\n"],"names":["eyebrow","ElementModel.text.eyebrow","ElementModel.text.ribbon","ElementModel.layout.gridInlineTabletRows","ElementModel.headline.sansLarger","ElementModel.richText.simple","ElementModel.headline.sansMin","ElementModel.createDiv"],"mappings":"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"}
+{"version":3,"file":"small.mjs","sources":["../../../source/atomic/text-lockup/small.ts"],"sourcesContent":["import * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { type UMDElement } from '../../_types';\n\ntype TypeTheme = {\n  isThemeDark?: boolean;\n};\n\ntype TypeEyebrow = TypeTheme & {\n  eyebrow: HTMLElement;\n};\n\ntype TypeActions = {\n  actions: HTMLElement;\n};\n\nexport type TypeTextLockupSmall = TypeTheme & {\n  headline: HTMLElement | null;\n  eyebrow?: HTMLElement | null;\n  text?: HTMLElement | null;\n  date?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  eventMeta?: UMDElement;\n  hasEyebrowRibbon?: boolean;\n};\n\nconst ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER = 'text-lockup-small-container';\nconst metaContainer = elementStyles?.event?.meta?.container;\nconst metaClass: string = (() => {\n  if (!metaContainer?.className) return '';\n\n  if (Array.isArray(metaContainer.className)) {\n    return metaContainer.className[0] || '';\n  }\n\n  if (typeof metaContainer.className === 'string') {\n    return metaContainer.className;\n  }\n\n  return '';\n})();\n\nexport const eyebrowStyles = {\n  element: {\n    display: 'block',\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const ribbonStyles = {\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n};\n\nexport const headlineStyles = {\n  element: {\n    fontWeight: '700',\n    color: `${token.color.black}`,\n\n    [`& + *`]: {\n      marginTop: token.spacing.sm,\n    },\n\n    [`& + .${metaClass}`]: {\n      [`@media (max-width: 479px)`]: {\n        marginTop: token.spacing.min,\n      },\n    },\n  },\n  subElement: {\n    color: 'currentColor',\n  },\n};\n\nexport const textStyles = {\n  element: {\n    color: `${token.color.gray.dark}`,\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const dateStyles = {\n  element: {\n    display: 'block',\n    color: `${token.color.gray.mediumAA}`,\n  },\n  child: {\n    color: 'currentColor',\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const createEyebrow = ({ eyebrow, isThemeDark }: TypeEyebrow) =>\n  ElementModel.text.eyebrow({\n    element: eyebrow,\n    elementStyles: eyebrowStyles,\n    isThemeDark,\n  });\n\nexport const createRibbonEyebrow = ({ eyebrow }: TypeEyebrow) =>\n  ElementModel.text.ribbon({\n    element: eyebrow,\n    elementStyles: ribbonStyles,\n  });\n\nexport const createActions = ({ actions }: TypeActions) =>\n  ElementModel.layout.gridInlineTabletRows({\n    element: actions,\n    elementStyles: {\n      element: {\n        marginTop: token.spacing.sm,\n      },\n    },\n  });\n\nexport const createTextLockupSmall = ({\n  eyebrow,\n  headline,\n  text,\n  actions,\n  date,\n  eventMeta,\n  isThemeDark,\n}: TypeTextLockupSmall) => {\n  const children: UMDElement[] = [];\n\n  if (eyebrow) {\n    children.push(createEyebrow({ eyebrow, isThemeDark }));\n  }\n\n  if (headline) {\n    children.push(\n      ElementModel.headline.sansLarger({\n        element: headline,\n        elementStyles: headlineStyles,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (eventMeta) {\n    children.push(eventMeta);\n  }\n\n  if (text) {\n    children.push(\n      ElementModel.richText.simple({\n        element: text,\n        elementStyles: textStyles,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (date) {\n    children.push(\n      ElementModel.headline.sansMin({\n        element: date,\n        elementStyles: dateStyles,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (actions) {\n    children.push(\n      createActions({\n        actions,\n      }),\n    );\n  }\n\n  return ElementModel.createDiv({\n    className: ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER,\n    children,\n    elementStyles: {\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    },\n  });\n};\n"],"names":["eyebrow","ElementModel.text.eyebrow","ElementModel.text.ribbon","ElementModel.layout.gridInlineTabletRows","ElementModel.headline.sansLarger","ElementModel.richText.simple","ElementModel.headline.sansMin","ElementModel.createDiv"],"mappings":"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"}

package/dist/composite/accordion/item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../source/composite/accordion/item.ts"],"names":[],"mappings":"AAGA,KAAK,gBAAgB,GAAG;IAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAC1D,KAAK,YAAY,GAAG;IAAE,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAElD,KAAK,UAAU,GAAG;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,kBAAkB,GAAG,gBAAgB,GACxC,YAAY,GAAG;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;yBAoTY,OAAO,kBAAkB;;;;sBAOhB,UAAU;uBAIT,UAAU;;;AAXpC,wBAyDO"}
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../source/composite/accordion/item.ts"],"names":[],"mappings":"AAIA,KAAK,gBAAgB,GAAG;IAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAC1D,KAAK,YAAY,GAAG;IAAE,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAElD,KAAK,UAAU,GAAG;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,kBAAkB,GAAG,gBAAgB,GACxC,YAAY,GAAG;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;yBAoTY,OAAO,kBAAkB;;;;sBAOhB,UAAU;uBAIT,UAAU;;;AAXpC,wBAyDO"}

package/dist/composite/accordion/item.js

@@ -1,7 +1,7 @@
 "use strict";
 const Styles = require("@universityofmaryland/web-styles-library");
-const index$1 = require("../../utilities/performance/index.js");
-const index = require("../../utilities/theme/index.js");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
+const performance = require("@universityofmaryland/web-utilities-library/performance");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -71,7 +71,7 @@ const OverwriteThemeDark = `
   }
 `;
 const bodyStyles = `
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
     [`.${ELEMENT_BODY_WRAPPER}`]: Styles__namespace.typography.sans.medium
   }
@@ -109,7 +109,7 @@ const bodyStyles = `
   }
 `;
 const headlineStyles = `
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
     [`.${ELEMENT_HEADLINE}`]: Styles__namespace.typography.sans.large
   }
@@ -317,7 +317,7 @@ const item = (props) => (() => {
   if (isStateOpen) {
     open({ hasAnimation: false });
   }
-  window.addEventListener("resize", index$1.debounce(resize, 20));
+  window.addEventListener("resize", performance.debounce(resize, 20));
   return {
     element: declaration,
     styles: STYLES_ACCORDION_ELEMENT,

package/dist/composite/accordion/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","sources":["../../../source/composite/accordion/item.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\n\ntype TypeHeadlineText = { headline?: HTMLElement | null };\ntype TypeBodyText = { text?: HTMLElement | null };\ntype TypeAccordionState = { isOpen: boolean };\ntype StateProps = {\n  hasAnimation?: boolean;\n};\n\ntype TypeAccordionProps = TypeHeadlineText &\n  TypeBodyText & {\n    isThemeLight?: boolean;\n    isThemeDark?: boolean;\n    isStateOpen: boolean;\n  };\n\ntype TypeHeadlineProps = TypeHeadlineText &\n  TypeAccordionState & {\n    close: (arg: StateProps) => void;\n    open: (arg: StateProps) => void;\n  };\n\ntype TypeBodyProps = TypeBodyText & TypeAccordionState;\n\ntype ActionAnimationProps = StateProps & {\n  container: HTMLDivElement;\n  isOpening: boolean;\n};\n\nconst { token } = Styles;\n\nconst SMALL = 480;\n\nconst ELEMENT_NAME = 'umd-element-accordion-item';\nconst ELEMENT_DECLARATION = 'accordion-declaration';\nconst ELEMENT_CONTAINER = 'accordion-container';\nconst ELEMENT_HEADLINE = 'accordion-headline';\nconst ELEMENT_BODY_WRAPPER = 'accordion-body-wrapper';\nconst ELEMENT_BODY = 'accordion-body';\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\nconst ANIMATION_TIME = 500;\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}='${THEME_DARK}']`;\n\nconst OVERWRITE_THEME_DARK_HEADLINE = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_BODY_WRAPPER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_BODY = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_HEADLINE} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE} > * {\n    color: ${token.color.white}\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}:before,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:after {\n    background-color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'],\n  ${OVERWRITE_THEME_DARK_HEADLINE}:hover,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:focus {\n    background-color: ${token.color.gray.darker};\n    border-top: 2px solid ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'] > *,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:hover > *,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:focus > * {\n    color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_BODY_WRAPPER} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_BODY},\n  ${OVERWRITE_THEME_DARK_BODY} * {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst bodyStyles = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_BODY_WRAPPER}`]: Styles.typography.sans.medium\n    },\n  })}\n\n  .${ELEMENT_BODY_WRAPPER} {\n    background-color: ${token.color.gray.lightest};\n    height: 0;\n    overflow: hidden;\n    display: none;\n  }\n\n  .${ELEMENT_BODY} {\n    padding: ${token.spacing.md};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_BODY} {\n      padding: ${token.spacing.lg};\n    }\n  }\n\n  .${ELEMENT_BODY} > * {\n    margin-top: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_BODY} > *:first-child {\n    margin-top: 0;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_BODY} > * {\n      margin-top: ${token.spacing.lg};\n    }\n  }\n`;\n\n// prettier-ignore\nconst headlineStyles = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_HEADLINE}`]: Styles.typography.sans.large,\n    },\n  })}\n\n  .${ELEMENT_HEADLINE} {\n    display: flex;\n    border-top: 2px solid transparent;\n    padding: ${token.spacing.md};\n    padding-right: ${token.spacing['4xl']};\n    background-color: ${token.color.gray.lightest};\n    position: relative;\n    transition: background 0.5s, border 0.5s, color 0.5s, padding 0.5s;\n    width: 100%;\n    text-align: left;\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_HEADLINE} > * {\n    color: ${token.color.black};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE} {\n      padding: ${token.spacing.lg};\n      padding-right: ${token.spacing['6xl']}\n    }\n  }\n\n  .${ELEMENT_HEADLINE}:before,\n  .${ELEMENT_HEADLINE}:after {\n    content: '';\n    background-color: ${token.color.red};\n    position: absolute;\n    right: ${token.spacing.md};\n    transition: background 0.5s, height 0.5s, right 0.5s, top 0.5s,\n    transform 0.5s, width 0.5s;\n  }\n\n  .${ELEMENT_HEADLINE}:before {\n    height: 4px;\n    top: calc(50% - 2px);\n    width: 16px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE}:before {\n      width: 20px;\n      right: 32px;\n    }\n  }\n\n  .${ELEMENT_HEADLINE}:after {\n    height: 16px;\n    top: calc(50% - 8px);\n    right: calc(${token.spacing.md} + 6px);\n    width: 4px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE}:after {\n      height: 20px;\n      top: calc(50% - 10px);\n      right: calc(${token.spacing.lg} + 8px);\n    }\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true'],\n  .${ELEMENT_HEADLINE}:hover,\n  .${ELEMENT_HEADLINE}:focus {\n    background-color: ${token.color.gray.lightest};\n    border-top: 2px solid ${token.color.red};\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true'] > *,\n  .${ELEMENT_HEADLINE}:hover > *,\n  .${ELEMENT_HEADLINE}:focus > * {\n    color: ${token.color.red};\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true']:after {\n    transform: rotate(90deg);\n  }\n`;\n\nconst STYLES_ACCORDION_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${headlineStyles}\n  ${bodyStyles}\n  ${OverwriteThemeDark}\n`;\n\nconst CreateBody = ({ text, isOpen }: TypeBodyProps) => {\n  const contentWrapper = document.createElement('div');\n\n  contentWrapper.classList.add(ELEMENT_BODY_WRAPPER);\n\n  if (text) {\n    const wrapper = document.createElement('div');\n    wrapper.classList.add(ELEMENT_BODY);\n    contentWrapper.ariaHidden = isOpen ? 'false' : 'true';\n    wrapper.appendChild(text);\n    contentWrapper.appendChild(wrapper);\n\n    return contentWrapper;\n  }\n\n  return null;\n};\n\nconst CreateHeadline = ({\n  headline,\n  isOpen,\n  open,\n  close,\n}: TypeHeadlineProps) => {\n  const headlineContainer = document.createElement('button');\n\n  headlineContainer.classList.add(ELEMENT_HEADLINE);\n  headlineContainer.ariaExpanded = isOpen ? 'true' : 'false';\n\n  if (headline) {\n    headlineContainer.appendChild(headline);\n\n    headlineContainer.addEventListener('click', () => {\n      const isExpanded = headlineContainer.ariaExpanded == 'true';\n\n      if (isExpanded) {\n        close({ hasAnimation: true });\n      } else {\n        open({ hasAnimation: true });\n      }\n    });\n\n    return headlineContainer;\n  }\n\n  return null;\n};\n\nconst ActionAnimation = ({\n  container,\n  isOpening = true,\n  hasAnimation = true,\n}: ActionAnimationProps) => {\n  const headlineContainer = container.querySelector(\n    'button',\n  ) as HTMLButtonElement;\n  const bodyWrapperElement = container.querySelector(\n    `.${ELEMENT_BODY_WRAPPER}`,\n  ) as HTMLElement;\n  const bodyElement = container.querySelector(\n    `.${ELEMENT_BODY}`,\n  ) as HTMLElement;\n\n  if (!headlineContainer || !bodyWrapperElement || !bodyElement) {\n    throw new Error('headlineContainer or bodyWrapperElement is not found');\n  }\n\n  if (hasAnimation)\n    bodyWrapperElement.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;\n\n  if (isOpening) {\n    bodyWrapperElement.style.display = 'block';\n\n    setTimeout(() => {\n      headlineContainer.ariaExpanded = 'true';\n      bodyWrapperElement.ariaHidden = 'false';\n    }, 100);\n  } else {\n    headlineContainer.ariaExpanded = 'false';\n    bodyWrapperElement.ariaHidden = 'true';\n\n    setTimeout(() => {\n      bodyWrapperElement.style.display = 'none';\n    }, ANIMATION_TIME + 50);\n  }\n\n  setTimeout(() => {\n    const bodyHeight = bodyElement.offsetHeight;\n    bodyWrapperElement.style.height = isOpening ? `${bodyHeight}px` : '0';\n  }, 100);\n\n  setTimeout(() => {\n    bodyWrapperElement.style.transition = 'none';\n  }, 100 + ANIMATION_TIME);\n};\n\nexport default (props: TypeAccordionProps) =>\n  (() => {\n    const { isThemeDark, isThemeLight, isStateOpen = false } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    let isOpen = isStateOpen;\n\n    const open = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: true });\n      isOpen = true;\n    };\n    const close = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: false });\n      isOpen = false;\n    };\n    const EventSize = () => {\n      if (!isOpen) return;\n      const bodyElement = container.querySelector(\n        `.${ELEMENT_BODY}`,\n      ) as HTMLElement;\n      const bodyWrapperElement = container.querySelector(\n        `.${ELEMENT_BODY_WRAPPER}`,\n      ) as HTMLElement;\n\n      bodyWrapperElement.style.height = `${bodyElement.offsetHeight}px`;\n    };\n    const resize = () => {\n      EventSize();\n    };\n\n    const headline = CreateHeadline({ ...props, isOpen, open, close });\n    const body = CreateBody({ ...props, isOpen });\n\n    if (headline) container.appendChild(headline);\n    if (body) container.appendChild(body);\n\n    container.classList.add(ELEMENT_CONTAINER);\n    if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, 'light');\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, 'dark');\n\n    declaration.appendChild(container);\n    declaration.classList.add(ELEMENT_DECLARATION);\n\n    if (isStateOpen) {\n      open({ hasAnimation: false });\n    }\n\n    window.addEventListener('resize', Utility.performance.debounce(resize, 20));\n\n    return {\n      element: declaration,\n      styles: STYLES_ACCORDION_ELEMENT,\n      events: {\n        open,\n        close,\n      },\n    };\n  })();\n"],"names":["Styles","Utility.theme.convertJSSObjectToStyles","props","Utility.performance.debounce"],"mappings":"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"}
+{"version":3,"file":"item.js","sources":["../../../source/composite/accordion/item.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\n\ntype TypeHeadlineText = { headline?: HTMLElement | null };\ntype TypeBodyText = { text?: HTMLElement | null };\ntype TypeAccordionState = { isOpen: boolean };\ntype StateProps = {\n  hasAnimation?: boolean;\n};\n\ntype TypeAccordionProps = TypeHeadlineText &\n  TypeBodyText & {\n    isThemeLight?: boolean;\n    isThemeDark?: boolean;\n    isStateOpen: boolean;\n  };\n\ntype TypeHeadlineProps = TypeHeadlineText &\n  TypeAccordionState & {\n    close: (arg: StateProps) => void;\n    open: (arg: StateProps) => void;\n  };\n\ntype TypeBodyProps = TypeBodyText & TypeAccordionState;\n\ntype ActionAnimationProps = StateProps & {\n  container: HTMLDivElement;\n  isOpening: boolean;\n};\n\nconst { token } = Styles;\n\nconst SMALL = 480;\n\nconst ELEMENT_NAME = 'umd-element-accordion-item';\nconst ELEMENT_DECLARATION = 'accordion-declaration';\nconst ELEMENT_CONTAINER = 'accordion-container';\nconst ELEMENT_HEADLINE = 'accordion-headline';\nconst ELEMENT_BODY_WRAPPER = 'accordion-body-wrapper';\nconst ELEMENT_BODY = 'accordion-body';\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\nconst ANIMATION_TIME = 500;\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}='${THEME_DARK}']`;\n\nconst OVERWRITE_THEME_DARK_HEADLINE = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_BODY_WRAPPER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_BODY = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_HEADLINE} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE} > * {\n    color: ${token.color.white}\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}:before,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:after {\n    background-color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'],\n  ${OVERWRITE_THEME_DARK_HEADLINE}:hover,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:focus {\n    background-color: ${token.color.gray.darker};\n    border-top: 2px solid ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'] > *,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:hover > *,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:focus > * {\n    color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_BODY_WRAPPER} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_BODY},\n  ${OVERWRITE_THEME_DARK_BODY} * {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst bodyStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_BODY_WRAPPER}`]: Styles.typography.sans.medium\n    },\n  })}\n\n  .${ELEMENT_BODY_WRAPPER} {\n    background-color: ${token.color.gray.lightest};\n    height: 0;\n    overflow: hidden;\n    display: none;\n  }\n\n  .${ELEMENT_BODY} {\n    padding: ${token.spacing.md};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_BODY} {\n      padding: ${token.spacing.lg};\n    }\n  }\n\n  .${ELEMENT_BODY} > * {\n    margin-top: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_BODY} > *:first-child {\n    margin-top: 0;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_BODY} > * {\n      margin-top: ${token.spacing.lg};\n    }\n  }\n`;\n\n// prettier-ignore\nconst headlineStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_HEADLINE}`]: Styles.typography.sans.large,\n    },\n  })}\n\n  .${ELEMENT_HEADLINE} {\n    display: flex;\n    border-top: 2px solid transparent;\n    padding: ${token.spacing.md};\n    padding-right: ${token.spacing['4xl']};\n    background-color: ${token.color.gray.lightest};\n    position: relative;\n    transition: background 0.5s, border 0.5s, color 0.5s, padding 0.5s;\n    width: 100%;\n    text-align: left;\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_HEADLINE} > * {\n    color: ${token.color.black};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE} {\n      padding: ${token.spacing.lg};\n      padding-right: ${token.spacing['6xl']}\n    }\n  }\n\n  .${ELEMENT_HEADLINE}:before,\n  .${ELEMENT_HEADLINE}:after {\n    content: '';\n    background-color: ${token.color.red};\n    position: absolute;\n    right: ${token.spacing.md};\n    transition: background 0.5s, height 0.5s, right 0.5s, top 0.5s,\n    transform 0.5s, width 0.5s;\n  }\n\n  .${ELEMENT_HEADLINE}:before {\n    height: 4px;\n    top: calc(50% - 2px);\n    width: 16px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE}:before {\n      width: 20px;\n      right: 32px;\n    }\n  }\n\n  .${ELEMENT_HEADLINE}:after {\n    height: 16px;\n    top: calc(50% - 8px);\n    right: calc(${token.spacing.md} + 6px);\n    width: 4px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE}:after {\n      height: 20px;\n      top: calc(50% - 10px);\n      right: calc(${token.spacing.lg} + 8px);\n    }\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true'],\n  .${ELEMENT_HEADLINE}:hover,\n  .${ELEMENT_HEADLINE}:focus {\n    background-color: ${token.color.gray.lightest};\n    border-top: 2px solid ${token.color.red};\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true'] > *,\n  .${ELEMENT_HEADLINE}:hover > *,\n  .${ELEMENT_HEADLINE}:focus > * {\n    color: ${token.color.red};\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true']:after {\n    transform: rotate(90deg);\n  }\n`;\n\nconst STYLES_ACCORDION_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${headlineStyles}\n  ${bodyStyles}\n  ${OverwriteThemeDark}\n`;\n\nconst CreateBody = ({ text, isOpen }: TypeBodyProps) => {\n  const contentWrapper = document.createElement('div');\n\n  contentWrapper.classList.add(ELEMENT_BODY_WRAPPER);\n\n  if (text) {\n    const wrapper = document.createElement('div');\n    wrapper.classList.add(ELEMENT_BODY);\n    contentWrapper.ariaHidden = isOpen ? 'false' : 'true';\n    wrapper.appendChild(text);\n    contentWrapper.appendChild(wrapper);\n\n    return contentWrapper;\n  }\n\n  return null;\n};\n\nconst CreateHeadline = ({\n  headline,\n  isOpen,\n  open,\n  close,\n}: TypeHeadlineProps) => {\n  const headlineContainer = document.createElement('button');\n\n  headlineContainer.classList.add(ELEMENT_HEADLINE);\n  headlineContainer.ariaExpanded = isOpen ? 'true' : 'false';\n\n  if (headline) {\n    headlineContainer.appendChild(headline);\n\n    headlineContainer.addEventListener('click', () => {\n      const isExpanded = headlineContainer.ariaExpanded == 'true';\n\n      if (isExpanded) {\n        close({ hasAnimation: true });\n      } else {\n        open({ hasAnimation: true });\n      }\n    });\n\n    return headlineContainer;\n  }\n\n  return null;\n};\n\nconst ActionAnimation = ({\n  container,\n  isOpening = true,\n  hasAnimation = true,\n}: ActionAnimationProps) => {\n  const headlineContainer = container.querySelector(\n    'button',\n  ) as HTMLButtonElement;\n  const bodyWrapperElement = container.querySelector(\n    `.${ELEMENT_BODY_WRAPPER}`,\n  ) as HTMLElement;\n  const bodyElement = container.querySelector(\n    `.${ELEMENT_BODY}`,\n  ) as HTMLElement;\n\n  if (!headlineContainer || !bodyWrapperElement || !bodyElement) {\n    throw new Error('headlineContainer or bodyWrapperElement is not found');\n  }\n\n  if (hasAnimation)\n    bodyWrapperElement.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;\n\n  if (isOpening) {\n    bodyWrapperElement.style.display = 'block';\n\n    setTimeout(() => {\n      headlineContainer.ariaExpanded = 'true';\n      bodyWrapperElement.ariaHidden = 'false';\n    }, 100);\n  } else {\n    headlineContainer.ariaExpanded = 'false';\n    bodyWrapperElement.ariaHidden = 'true';\n\n    setTimeout(() => {\n      bodyWrapperElement.style.display = 'none';\n    }, ANIMATION_TIME + 50);\n  }\n\n  setTimeout(() => {\n    const bodyHeight = bodyElement.offsetHeight;\n    bodyWrapperElement.style.height = isOpening ? `${bodyHeight}px` : '0';\n  }, 100);\n\n  setTimeout(() => {\n    bodyWrapperElement.style.transition = 'none';\n  }, 100 + ANIMATION_TIME);\n};\n\nexport default (props: TypeAccordionProps) =>\n  (() => {\n    const { isThemeDark, isThemeLight, isStateOpen = false } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    let isOpen = isStateOpen;\n\n    const open = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: true });\n      isOpen = true;\n    };\n    const close = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: false });\n      isOpen = false;\n    };\n    const EventSize = () => {\n      if (!isOpen) return;\n      const bodyElement = container.querySelector(\n        `.${ELEMENT_BODY}`,\n      ) as HTMLElement;\n      const bodyWrapperElement = container.querySelector(\n        `.${ELEMENT_BODY_WRAPPER}`,\n      ) as HTMLElement;\n\n      bodyWrapperElement.style.height = `${bodyElement.offsetHeight}px`;\n    };\n    const resize = () => {\n      EventSize();\n    };\n\n    const headline = CreateHeadline({ ...props, isOpen, open, close });\n    const body = CreateBody({ ...props, isOpen });\n\n    if (headline) container.appendChild(headline);\n    if (body) container.appendChild(body);\n\n    container.classList.add(ELEMENT_CONTAINER);\n    if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, 'light');\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, 'dark');\n\n    declaration.appendChild(container);\n    declaration.classList.add(ELEMENT_DECLARATION);\n\n    if (isStateOpen) {\n      open({ hasAnimation: false });\n    }\n\n    window.addEventListener('resize', debounce(resize, 20));\n\n    return {\n      element: declaration,\n      styles: STYLES_ACCORDION_ELEMENT,\n      events: {\n        open,\n        close,\n      },\n    };\n  })();\n"],"names":["Styles","jssToCSS","props","debounce"],"mappings":"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"}

package/dist/composite/accordion/item.mjs

@@ -1,6 +1,6 @@
 import * as Styles from "@universityofmaryland/web-styles-library";
-import { debounce } from "../../utilities/performance/index.mjs";
-import { convertJSSObjectToStyles } from "../../utilities/theme/index.mjs";
+import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
+import { debounce } from "@universityofmaryland/web-utilities-library/performance";
 const { token } = Styles;
 const SMALL = 480;
 const ELEMENT_NAME = "umd-element-accordion-item";
@@ -53,7 +53,7 @@ const OverwriteThemeDark = `
   }
 `;
 const bodyStyles = `
-  ${convertJSSObjectToStyles({
+  ${jssToCSS({
   styleObj: {
     [`.${ELEMENT_BODY_WRAPPER}`]: Styles.typography.sans.medium
   }
@@ -91,7 +91,7 @@ const bodyStyles = `
   }
 `;
 const headlineStyles = `
-  ${convertJSSObjectToStyles({
+  ${jssToCSS({
   styleObj: {
     [`.${ELEMENT_HEADLINE}`]: Styles.typography.sans.large
   }

package/dist/composite/accordion/item.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"item.mjs","sources":["../../../source/composite/accordion/item.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\n\ntype TypeHeadlineText = { headline?: HTMLElement | null };\ntype TypeBodyText = { text?: HTMLElement | null };\ntype TypeAccordionState = { isOpen: boolean };\ntype StateProps = {\n  hasAnimation?: boolean;\n};\n\ntype TypeAccordionProps = TypeHeadlineText &\n  TypeBodyText & {\n    isThemeLight?: boolean;\n    isThemeDark?: boolean;\n    isStateOpen: boolean;\n  };\n\ntype TypeHeadlineProps = TypeHeadlineText &\n  TypeAccordionState & {\n    close: (arg: StateProps) => void;\n    open: (arg: StateProps) => void;\n  };\n\ntype TypeBodyProps = TypeBodyText & TypeAccordionState;\n\ntype ActionAnimationProps = StateProps & {\n  container: HTMLDivElement;\n  isOpening: boolean;\n};\n\nconst { token } = Styles;\n\nconst SMALL = 480;\n\nconst ELEMENT_NAME = 'umd-element-accordion-item';\nconst ELEMENT_DECLARATION = 'accordion-declaration';\nconst ELEMENT_CONTAINER = 'accordion-container';\nconst ELEMENT_HEADLINE = 'accordion-headline';\nconst ELEMENT_BODY_WRAPPER = 'accordion-body-wrapper';\nconst ELEMENT_BODY = 'accordion-body';\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\nconst ANIMATION_TIME = 500;\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}='${THEME_DARK}']`;\n\nconst OVERWRITE_THEME_DARK_HEADLINE = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_BODY_WRAPPER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_BODY = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_HEADLINE} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE} > * {\n    color: ${token.color.white}\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}:before,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:after {\n    background-color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'],\n  ${OVERWRITE_THEME_DARK_HEADLINE}:hover,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:focus {\n    background-color: ${token.color.gray.darker};\n    border-top: 2px solid ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'] > *,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:hover > *,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:focus > * {\n    color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_BODY_WRAPPER} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_BODY},\n  ${OVERWRITE_THEME_DARK_BODY} * {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst bodyStyles = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_BODY_WRAPPER}`]: Styles.typography.sans.medium\n    },\n  })}\n\n  .${ELEMENT_BODY_WRAPPER} {\n    background-color: ${token.color.gray.lightest};\n    height: 0;\n    overflow: hidden;\n    display: none;\n  }\n\n  .${ELEMENT_BODY} {\n    padding: ${token.spacing.md};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_BODY} {\n      padding: ${token.spacing.lg};\n    }\n  }\n\n  .${ELEMENT_BODY} > * {\n    margin-top: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_BODY} > *:first-child {\n    margin-top: 0;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_BODY} > * {\n      margin-top: ${token.spacing.lg};\n    }\n  }\n`;\n\n// prettier-ignore\nconst headlineStyles = `\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_HEADLINE}`]: Styles.typography.sans.large,\n    },\n  })}\n\n  .${ELEMENT_HEADLINE} {\n    display: flex;\n    border-top: 2px solid transparent;\n    padding: ${token.spacing.md};\n    padding-right: ${token.spacing['4xl']};\n    background-color: ${token.color.gray.lightest};\n    position: relative;\n    transition: background 0.5s, border 0.5s, color 0.5s, padding 0.5s;\n    width: 100%;\n    text-align: left;\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_HEADLINE} > * {\n    color: ${token.color.black};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE} {\n      padding: ${token.spacing.lg};\n      padding-right: ${token.spacing['6xl']}\n    }\n  }\n\n  .${ELEMENT_HEADLINE}:before,\n  .${ELEMENT_HEADLINE}:after {\n    content: '';\n    background-color: ${token.color.red};\n    position: absolute;\n    right: ${token.spacing.md};\n    transition: background 0.5s, height 0.5s, right 0.5s, top 0.5s,\n    transform 0.5s, width 0.5s;\n  }\n\n  .${ELEMENT_HEADLINE}:before {\n    height: 4px;\n    top: calc(50% - 2px);\n    width: 16px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE}:before {\n      width: 20px;\n      right: 32px;\n    }\n  }\n\n  .${ELEMENT_HEADLINE}:after {\n    height: 16px;\n    top: calc(50% - 8px);\n    right: calc(${token.spacing.md} + 6px);\n    width: 4px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE}:after {\n      height: 20px;\n      top: calc(50% - 10px);\n      right: calc(${token.spacing.lg} + 8px);\n    }\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true'],\n  .${ELEMENT_HEADLINE}:hover,\n  .${ELEMENT_HEADLINE}:focus {\n    background-color: ${token.color.gray.lightest};\n    border-top: 2px solid ${token.color.red};\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true'] > *,\n  .${ELEMENT_HEADLINE}:hover > *,\n  .${ELEMENT_HEADLINE}:focus > * {\n    color: ${token.color.red};\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true']:after {\n    transform: rotate(90deg);\n  }\n`;\n\nconst STYLES_ACCORDION_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${headlineStyles}\n  ${bodyStyles}\n  ${OverwriteThemeDark}\n`;\n\nconst CreateBody = ({ text, isOpen }: TypeBodyProps) => {\n  const contentWrapper = document.createElement('div');\n\n  contentWrapper.classList.add(ELEMENT_BODY_WRAPPER);\n\n  if (text) {\n    const wrapper = document.createElement('div');\n    wrapper.classList.add(ELEMENT_BODY);\n    contentWrapper.ariaHidden = isOpen ? 'false' : 'true';\n    wrapper.appendChild(text);\n    contentWrapper.appendChild(wrapper);\n\n    return contentWrapper;\n  }\n\n  return null;\n};\n\nconst CreateHeadline = ({\n  headline,\n  isOpen,\n  open,\n  close,\n}: TypeHeadlineProps) => {\n  const headlineContainer = document.createElement('button');\n\n  headlineContainer.classList.add(ELEMENT_HEADLINE);\n  headlineContainer.ariaExpanded = isOpen ? 'true' : 'false';\n\n  if (headline) {\n    headlineContainer.appendChild(headline);\n\n    headlineContainer.addEventListener('click', () => {\n      const isExpanded = headlineContainer.ariaExpanded == 'true';\n\n      if (isExpanded) {\n        close({ hasAnimation: true });\n      } else {\n        open({ hasAnimation: true });\n      }\n    });\n\n    return headlineContainer;\n  }\n\n  return null;\n};\n\nconst ActionAnimation = ({\n  container,\n  isOpening = true,\n  hasAnimation = true,\n}: ActionAnimationProps) => {\n  const headlineContainer = container.querySelector(\n    'button',\n  ) as HTMLButtonElement;\n  const bodyWrapperElement = container.querySelector(\n    `.${ELEMENT_BODY_WRAPPER}`,\n  ) as HTMLElement;\n  const bodyElement = container.querySelector(\n    `.${ELEMENT_BODY}`,\n  ) as HTMLElement;\n\n  if (!headlineContainer || !bodyWrapperElement || !bodyElement) {\n    throw new Error('headlineContainer or bodyWrapperElement is not found');\n  }\n\n  if (hasAnimation)\n    bodyWrapperElement.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;\n\n  if (isOpening) {\n    bodyWrapperElement.style.display = 'block';\n\n    setTimeout(() => {\n      headlineContainer.ariaExpanded = 'true';\n      bodyWrapperElement.ariaHidden = 'false';\n    }, 100);\n  } else {\n    headlineContainer.ariaExpanded = 'false';\n    bodyWrapperElement.ariaHidden = 'true';\n\n    setTimeout(() => {\n      bodyWrapperElement.style.display = 'none';\n    }, ANIMATION_TIME + 50);\n  }\n\n  setTimeout(() => {\n    const bodyHeight = bodyElement.offsetHeight;\n    bodyWrapperElement.style.height = isOpening ? `${bodyHeight}px` : '0';\n  }, 100);\n\n  setTimeout(() => {\n    bodyWrapperElement.style.transition = 'none';\n  }, 100 + ANIMATION_TIME);\n};\n\nexport default (props: TypeAccordionProps) =>\n  (() => {\n    const { isThemeDark, isThemeLight, isStateOpen = false } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    let isOpen = isStateOpen;\n\n    const open = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: true });\n      isOpen = true;\n    };\n    const close = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: false });\n      isOpen = false;\n    };\n    const EventSize = () => {\n      if (!isOpen) return;\n      const bodyElement = container.querySelector(\n        `.${ELEMENT_BODY}`,\n      ) as HTMLElement;\n      const bodyWrapperElement = container.querySelector(\n        `.${ELEMENT_BODY_WRAPPER}`,\n      ) as HTMLElement;\n\n      bodyWrapperElement.style.height = `${bodyElement.offsetHeight}px`;\n    };\n    const resize = () => {\n      EventSize();\n    };\n\n    const headline = CreateHeadline({ ...props, isOpen, open, close });\n    const body = CreateBody({ ...props, isOpen });\n\n    if (headline) container.appendChild(headline);\n    if (body) container.appendChild(body);\n\n    container.classList.add(ELEMENT_CONTAINER);\n    if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, 'light');\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, 'dark');\n\n    declaration.appendChild(container);\n    declaration.classList.add(ELEMENT_DECLARATION);\n\n    if (isStateOpen) {\n      open({ hasAnimation: false });\n    }\n\n    window.addEventListener('resize', Utility.performance.debounce(resize, 20));\n\n    return {\n      element: declaration,\n      styles: STYLES_ACCORDION_ELEMENT,\n      events: {\n        open,\n        close,\n      },\n    };\n  })();\n"],"names":["Utility.theme.convertJSSObjectToStyles","props","Utility.performance.debounce"],"mappings":"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"}
+{"version":3,"file":"item.mjs","sources":["../../../source/composite/accordion/item.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\n\ntype TypeHeadlineText = { headline?: HTMLElement | null };\ntype TypeBodyText = { text?: HTMLElement | null };\ntype TypeAccordionState = { isOpen: boolean };\ntype StateProps = {\n  hasAnimation?: boolean;\n};\n\ntype TypeAccordionProps = TypeHeadlineText &\n  TypeBodyText & {\n    isThemeLight?: boolean;\n    isThemeDark?: boolean;\n    isStateOpen: boolean;\n  };\n\ntype TypeHeadlineProps = TypeHeadlineText &\n  TypeAccordionState & {\n    close: (arg: StateProps) => void;\n    open: (arg: StateProps) => void;\n  };\n\ntype TypeBodyProps = TypeBodyText & TypeAccordionState;\n\ntype ActionAnimationProps = StateProps & {\n  container: HTMLDivElement;\n  isOpening: boolean;\n};\n\nconst { token } = Styles;\n\nconst SMALL = 480;\n\nconst ELEMENT_NAME = 'umd-element-accordion-item';\nconst ELEMENT_DECLARATION = 'accordion-declaration';\nconst ELEMENT_CONTAINER = 'accordion-container';\nconst ELEMENT_HEADLINE = 'accordion-headline';\nconst ELEMENT_BODY_WRAPPER = 'accordion-body-wrapper';\nconst ELEMENT_BODY = 'accordion-body';\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\nconst ANIMATION_TIME = 500;\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}='${THEME_DARK}']`;\n\nconst OVERWRITE_THEME_DARK_HEADLINE = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_BODY_WRAPPER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_BODY = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_HEADLINE} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE} > * {\n    color: ${token.color.white}\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}:before,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:after {\n    background-color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'],\n  ${OVERWRITE_THEME_DARK_HEADLINE}:hover,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:focus {\n    background-color: ${token.color.gray.darker};\n    border-top: 2px solid ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'] > *,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:hover > *,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:focus > * {\n    color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_BODY_WRAPPER} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_BODY},\n  ${OVERWRITE_THEME_DARK_BODY} * {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst bodyStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_BODY_WRAPPER}`]: Styles.typography.sans.medium\n    },\n  })}\n\n  .${ELEMENT_BODY_WRAPPER} {\n    background-color: ${token.color.gray.lightest};\n    height: 0;\n    overflow: hidden;\n    display: none;\n  }\n\n  .${ELEMENT_BODY} {\n    padding: ${token.spacing.md};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_BODY} {\n      padding: ${token.spacing.lg};\n    }\n  }\n\n  .${ELEMENT_BODY} > * {\n    margin-top: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_BODY} > *:first-child {\n    margin-top: 0;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_BODY} > * {\n      margin-top: ${token.spacing.lg};\n    }\n  }\n`;\n\n// prettier-ignore\nconst headlineStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_HEADLINE}`]: Styles.typography.sans.large,\n    },\n  })}\n\n  .${ELEMENT_HEADLINE} {\n    display: flex;\n    border-top: 2px solid transparent;\n    padding: ${token.spacing.md};\n    padding-right: ${token.spacing['4xl']};\n    background-color: ${token.color.gray.lightest};\n    position: relative;\n    transition: background 0.5s, border 0.5s, color 0.5s, padding 0.5s;\n    width: 100%;\n    text-align: left;\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_HEADLINE} > * {\n    color: ${token.color.black};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE} {\n      padding: ${token.spacing.lg};\n      padding-right: ${token.spacing['6xl']}\n    }\n  }\n\n  .${ELEMENT_HEADLINE}:before,\n  .${ELEMENT_HEADLINE}:after {\n    content: '';\n    background-color: ${token.color.red};\n    position: absolute;\n    right: ${token.spacing.md};\n    transition: background 0.5s, height 0.5s, right 0.5s, top 0.5s,\n    transform 0.5s, width 0.5s;\n  }\n\n  .${ELEMENT_HEADLINE}:before {\n    height: 4px;\n    top: calc(50% - 2px);\n    width: 16px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE}:before {\n      width: 20px;\n      right: 32px;\n    }\n  }\n\n  .${ELEMENT_HEADLINE}:after {\n    height: 16px;\n    top: calc(50% - 8px);\n    right: calc(${token.spacing.md} + 6px);\n    width: 4px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE}:after {\n      height: 20px;\n      top: calc(50% - 10px);\n      right: calc(${token.spacing.lg} + 8px);\n    }\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true'],\n  .${ELEMENT_HEADLINE}:hover,\n  .${ELEMENT_HEADLINE}:focus {\n    background-color: ${token.color.gray.lightest};\n    border-top: 2px solid ${token.color.red};\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true'] > *,\n  .${ELEMENT_HEADLINE}:hover > *,\n  .${ELEMENT_HEADLINE}:focus > * {\n    color: ${token.color.red};\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true']:after {\n    transform: rotate(90deg);\n  }\n`;\n\nconst STYLES_ACCORDION_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${headlineStyles}\n  ${bodyStyles}\n  ${OverwriteThemeDark}\n`;\n\nconst CreateBody = ({ text, isOpen }: TypeBodyProps) => {\n  const contentWrapper = document.createElement('div');\n\n  contentWrapper.classList.add(ELEMENT_BODY_WRAPPER);\n\n  if (text) {\n    const wrapper = document.createElement('div');\n    wrapper.classList.add(ELEMENT_BODY);\n    contentWrapper.ariaHidden = isOpen ? 'false' : 'true';\n    wrapper.appendChild(text);\n    contentWrapper.appendChild(wrapper);\n\n    return contentWrapper;\n  }\n\n  return null;\n};\n\nconst CreateHeadline = ({\n  headline,\n  isOpen,\n  open,\n  close,\n}: TypeHeadlineProps) => {\n  const headlineContainer = document.createElement('button');\n\n  headlineContainer.classList.add(ELEMENT_HEADLINE);\n  headlineContainer.ariaExpanded = isOpen ? 'true' : 'false';\n\n  if (headline) {\n    headlineContainer.appendChild(headline);\n\n    headlineContainer.addEventListener('click', () => {\n      const isExpanded = headlineContainer.ariaExpanded == 'true';\n\n      if (isExpanded) {\n        close({ hasAnimation: true });\n      } else {\n        open({ hasAnimation: true });\n      }\n    });\n\n    return headlineContainer;\n  }\n\n  return null;\n};\n\nconst ActionAnimation = ({\n  container,\n  isOpening = true,\n  hasAnimation = true,\n}: ActionAnimationProps) => {\n  const headlineContainer = container.querySelector(\n    'button',\n  ) as HTMLButtonElement;\n  const bodyWrapperElement = container.querySelector(\n    `.${ELEMENT_BODY_WRAPPER}`,\n  ) as HTMLElement;\n  const bodyElement = container.querySelector(\n    `.${ELEMENT_BODY}`,\n  ) as HTMLElement;\n\n  if (!headlineContainer || !bodyWrapperElement || !bodyElement) {\n    throw new Error('headlineContainer or bodyWrapperElement is not found');\n  }\n\n  if (hasAnimation)\n    bodyWrapperElement.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;\n\n  if (isOpening) {\n    bodyWrapperElement.style.display = 'block';\n\n    setTimeout(() => {\n      headlineContainer.ariaExpanded = 'true';\n      bodyWrapperElement.ariaHidden = 'false';\n    }, 100);\n  } else {\n    headlineContainer.ariaExpanded = 'false';\n    bodyWrapperElement.ariaHidden = 'true';\n\n    setTimeout(() => {\n      bodyWrapperElement.style.display = 'none';\n    }, ANIMATION_TIME + 50);\n  }\n\n  setTimeout(() => {\n    const bodyHeight = bodyElement.offsetHeight;\n    bodyWrapperElement.style.height = isOpening ? `${bodyHeight}px` : '0';\n  }, 100);\n\n  setTimeout(() => {\n    bodyWrapperElement.style.transition = 'none';\n  }, 100 + ANIMATION_TIME);\n};\n\nexport default (props: TypeAccordionProps) =>\n  (() => {\n    const { isThemeDark, isThemeLight, isStateOpen = false } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    let isOpen = isStateOpen;\n\n    const open = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: true });\n      isOpen = true;\n    };\n    const close = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: false });\n      isOpen = false;\n    };\n    const EventSize = () => {\n      if (!isOpen) return;\n      const bodyElement = container.querySelector(\n        `.${ELEMENT_BODY}`,\n      ) as HTMLElement;\n      const bodyWrapperElement = container.querySelector(\n        `.${ELEMENT_BODY_WRAPPER}`,\n      ) as HTMLElement;\n\n      bodyWrapperElement.style.height = `${bodyElement.offsetHeight}px`;\n    };\n    const resize = () => {\n      EventSize();\n    };\n\n    const headline = CreateHeadline({ ...props, isOpen, open, close });\n    const body = CreateBody({ ...props, isOpen });\n\n    if (headline) container.appendChild(headline);\n    if (body) container.appendChild(body);\n\n    container.classList.add(ELEMENT_CONTAINER);\n    if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, 'light');\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, 'dark');\n\n    declaration.appendChild(container);\n    declaration.classList.add(ELEMENT_DECLARATION);\n\n    if (isStateOpen) {\n      open({ hasAnimation: false });\n    }\n\n    window.addEventListener('resize', debounce(resize, 20));\n\n    return {\n      element: declaration,\n      styles: STYLES_ACCORDION_ELEMENT,\n      events: {\n        open,\n        close,\n      },\n    };\n  })();\n"],"names":["props"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../source/composite/alert/elements/text.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;CAMrB,CAAC;AA8CF,eAAO,MAAM,eAAe,GAAI,OAAO,kBAAkB;;;CA2CxD,CAAC"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../source/composite/alert/elements/text.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;CAMrB,CAAC;AA8CF,eAAO,MAAM,eAAe,GAAI,OAAO,kBAAkB;;;CA2CxD,CAAC"}

package/dist/composite/alert/elements/text.js

@@ -1,10 +1,30 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const Styles = require("@universityofmaryland/web-styles-library");
-const index = require("../../../utilities/theme/index.js");
+const token = require("@universityofmaryland/web-styles-library/token");
+const layout = require("@universityofmaryland/web-styles-library/layout");
+const styles = require("@universityofmaryland/web-utilities-library/styles");
 require("../../../model/modifiers/index.js");
+require("@universityofmaryland/web-styles-library");
 const headline = require("../../../model/elements/headline.js");
 const richText = require("../../../model/elements/rich-text.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 CONSTANTS = {
   className: {
     wrapper: "wrapper",
@@ -15,28 +35,28 @@ const CONSTANTS = {
 const { className } = CONSTANTS;
 const ctaStyles = `
   * + .${className.actions} {
-    margin-top: ${Styles.token.spacing.sm};
+    margin-top: ${token__namespace.spacing.sm};
   }
 
-  ${index.convertJSSObjectToStyles({
+  ${styles.jssToCSS({
   styleObj: {
-    [`.${className.actions}`]: Styles.layout.grid.inline.tabletRows
+    [`.${className.actions}`]: layout__namespace.grid.inline.tabletRows
   }
 })}
 `;
 const STYLES_ALERT_TEXT = `
   .${className.wrapper} {
-     max-width: ${Styles.token.spacing.maxWidth.small};
+     max-width: ${token__namespace.spacing.maxWidth.small};
   }
 
   ${ctaStyles}
 `;
 const headlineStyles = {
   element: {
-    paddingRight: Styles.token.spacing.md
+    paddingRight: token__namespace.spacing.md
   },
   siblingAfter: {
-    marginTop: Styles.token.spacing.sm
+    marginTop: token__namespace.spacing.sm
   },
   subElement: {
     color: "currentColor"
@@ -47,13 +67,13 @@ const richTextStyles = {
     fontWeight: 500
   },
   siblingAfter: {
-    marginTop: Styles.token.spacing.sm
+    marginTop: token__namespace.spacing.sm
   }
 };
 const CreateAlertText = (props) => {
   const { headline: headline$1, text, actions, isThemeDark } = props;
   const wrapper = document.createElement("div");
-  let styles = STYLES_ALERT_TEXT;
+  let styles2 = STYLES_ALERT_TEXT;
   if (headline$1) {
     const headlineModel = headline.sansLarge({
       ...props,
@@ -61,11 +81,11 @@ const CreateAlertText = (props) => {
       element: headline$1
     });
     wrapper.appendChild(headlineModel.element);
-    styles += headlineModel.styles;
+    styles2 += headlineModel.styles;
   }
   if (text) {
     if (!isThemeDark) {
-      richTextStyles.element.color = Styles.token.color.gray.dark;
+      richTextStyles.element.color = token__namespace.color.gray.dark;
     }
     const textModel = richText.simple({
       ...props,
@@ -73,7 +93,7 @@ const CreateAlertText = (props) => {
       element: text
     });
     wrapper.appendChild(textModel.element);
-    styles += textModel.styles;
+    styles2 += textModel.styles;
   }
   if (actions) {
     actions.classList.add(className.actions);
@@ -82,7 +102,7 @@ const CreateAlertText = (props) => {
   wrapper.classList.add(className.wrapper);
   return {
     element: wrapper,
-    styles
+    styles: styles2
   };
 };
 exports.CONSTANTS = CONSTANTS;

package/dist/composite/alert/elements/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../../source/composite/alert/elements/text.ts"],"sourcesContent":["import { token, layout } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport { ElementModel } from 'model';\n\nexport type TypeAlertTextProps = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n};\n\nexport const CONSTANTS = {\n  className: {\n    wrapper: 'wrapper',\n    text: 'text',\n    actions: 'actions',\n  },\n};\n\nconst { className } = CONSTANTS;\n\n// prettier-ignore\nconst ctaStyles = `\n  * + .${className.actions} {\n    margin-top: ${token.spacing.sm};\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${className.actions}`]: layout.grid.inline.tabletRows,\n    },\n  })}\n`;\n\nconst STYLES_ALERT_TEXT = `\n  .${className.wrapper} {\n     max-width: ${token.spacing.maxWidth.small};\n  }\n\n  ${ctaStyles}\n`;\n\nconst headlineStyles = {\n  element: {\n    paddingRight: token.spacing.md,\n  },\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n  subElement: {\n    color: 'currentColor',\n  },\n};\n\nconst richTextStyles: Record<string, any> = {\n  element: {\n    fontWeight: 500,\n  },\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n};\n\nexport const CreateAlertText = (props: TypeAlertTextProps) => {\n  const { headline, text, actions, isThemeDark } = props;\n\n  const wrapper = document.createElement('div');\n  let styles = STYLES_ALERT_TEXT;\n\n  if (headline) {\n    const headlineModel = ElementModel.headline.sansLarge({\n      ...props,\n      elementStyles: headlineStyles,\n      element: headline,\n    });\n\n    wrapper.appendChild(headlineModel.element);\n    styles += headlineModel.styles;\n  }\n\n  if (text) {\n    if (!isThemeDark) {\n      richTextStyles.element.color = token.color.gray.dark;\n    }\n\n    const textModel = ElementModel.richText.simple({\n      ...props,\n      elementStyles: richTextStyles,\n      element: text,\n    });\n\n    wrapper.appendChild(textModel.element);\n    styles += textModel.styles;\n  }\n\n  if (actions) {\n    actions.classList.add(className.actions);\n    wrapper.appendChild(actions);\n  }\n\n  wrapper.classList.add(className.wrapper);\n\n  return {\n    element: wrapper,\n    styles,\n  };\n};\n\n"],"names":["token","Utility.theme.convertJSSObjectToStyles","layout","headline","ElementModel.headline.sansLarge","ElementModel.richText.simple"],"mappings":";;;;;;;AAWO,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb;AAEA,MAAM,EAAE,cAAc;AAGtB,MAAM,YAAY;AAAA,SACT,UAAU,OAAO;AAAA,kBACRA,OAAAA,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG9BC,+BAAuC;AAAA,EACvC,UAAU;AAAA,IACR,CAAC,IAAI,UAAU,OAAO,EAAE,GAAGC,OAAAA,OAAO,KAAK,OAAO;AAAA,EAAA;AAElD,CAAC,CAAC;AAAA;AAGJ,MAAM,oBAAoB;AAAA,KACrB,UAAU,OAAO;AAAA,kBACJF,aAAM,QAAQ,SAAS,KAAK;AAAA;AAAA;AAAA,IAG1C,SAAS;AAAA;AAGb,MAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,IACP,cAAcA,OAAAA,MAAM,QAAQ;AAAA,EAAA;AAAA,EAE9B,cAAc;AAAA,IACZ,WAAWA,OAAAA,MAAM,QAAQ;AAAA,EAAA;AAAA,EAE3B,YAAY;AAAA,IACV,OAAO;AAAA,EAAA;AAEX;AAEA,MAAM,iBAAsC;AAAA,EAC1C,SAAS;AAAA,IACP,YAAY;AAAA,EAAA;AAAA,EAEd,cAAc;AAAA,IACZ,WAAWA,OAAAA,MAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,kBAAkB,CAAC,UAA8B;AAC5D,QAAM,EAAA,UAAEG,YAAU,MAAM,SAAS,gBAAgB;AAEjD,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,MAAI,SAAS;AAEb,MAAIA,YAAU;AACZ,UAAM,gBAAgBC,SAAAA,UAAgC;AAAA,MACpD,GAAG;AAAA,MACH,eAAe;AAAA,MACf,SAASD;AAAAA,IAAA,CACV;AAED,YAAQ,YAAY,cAAc,OAAO;AACzC,cAAU,cAAc;AAAA,EAC1B;AAEA,MAAI,MAAM;AACR,QAAI,CAAC,aAAa;AAChB,qBAAe,QAAQ,QAAQH,OAAAA,MAAM,MAAM,KAAK;AAAA,IAClD;AAEA,UAAM,YAAYK,SAAAA,OAA6B;AAAA,MAC7C,GAAG;AAAA,MACH,eAAe;AAAA,MACf,SAAS;AAAA,IAAA,CACV;AAED,YAAQ,YAAY,UAAU,OAAO;AACrC,cAAU,UAAU;AAAA,EACtB;AAEA,MAAI,SAAS;AACX,YAAQ,UAAU,IAAI,UAAU,OAAO;AACvC,YAAQ,YAAY,OAAO;AAAA,EAC7B;AAEA,UAAQ,UAAU,IAAI,UAAU,OAAO;AAEvC,SAAO;AAAA,IACL,SAAS;AAAA,IACT;AAAA,EAAA;AAEJ;;;"}
+{"version":3,"file":"text.js","sources":["../../../../source/composite/alert/elements/text.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\n\nexport type TypeAlertTextProps = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n};\n\nexport const CONSTANTS = {\n  className: {\n    wrapper: 'wrapper',\n    text: 'text',\n    actions: 'actions',\n  },\n};\n\nconst { className } = CONSTANTS;\n\n// prettier-ignore\nconst ctaStyles = `\n  * + .${className.actions} {\n    margin-top: ${token.spacing.sm};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${className.actions}`]: layout.grid.inline.tabletRows,\n    },\n  })}\n`;\n\nconst STYLES_ALERT_TEXT = `\n  .${className.wrapper} {\n     max-width: ${token.spacing.maxWidth.small};\n  }\n\n  ${ctaStyles}\n`;\n\nconst headlineStyles = {\n  element: {\n    paddingRight: token.spacing.md,\n  },\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n  subElement: {\n    color: 'currentColor',\n  },\n};\n\nconst richTextStyles: Record<string, any> = {\n  element: {\n    fontWeight: 500,\n  },\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n};\n\nexport const CreateAlertText = (props: TypeAlertTextProps) => {\n  const { headline, text, actions, isThemeDark } = props;\n\n  const wrapper = document.createElement('div');\n  let styles = STYLES_ALERT_TEXT;\n\n  if (headline) {\n    const headlineModel = ElementModel.headline.sansLarge({\n      ...props,\n      elementStyles: headlineStyles,\n      element: headline,\n    });\n\n    wrapper.appendChild(headlineModel.element);\n    styles += headlineModel.styles;\n  }\n\n  if (text) {\n    if (!isThemeDark) {\n      richTextStyles.element.color = token.color.gray.dark;\n    }\n\n    const textModel = ElementModel.richText.simple({\n      ...props,\n      elementStyles: richTextStyles,\n      element: text,\n    });\n\n    wrapper.appendChild(textModel.element);\n    styles += textModel.styles;\n  }\n\n  if (actions) {\n    actions.classList.add(className.actions);\n    wrapper.appendChild(actions);\n  }\n\n  wrapper.classList.add(className.wrapper);\n\n  return {\n    element: wrapper,\n    styles,\n  };\n};\n"],"names":["token","jssToCSS","layout","headline","styles","ElementModel.headline.sansLarge","ElementModel.richText.simple"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb;AAEA,MAAM,EAAE,cAAc;AAGtB,MAAM,YAAY;AAAA,SACT,UAAU,OAAO;AAAA,kBACRA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG9BC,gBAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,UAAU,OAAO,EAAE,GAAGC,kBAAO,KAAK,OAAO;AAAA,EAAA;AAElD,CAAC,CAAC;AAAA;AAGJ,MAAM,oBAAoB;AAAA,KACrB,UAAU,OAAO;AAAA,kBACJF,iBAAM,QAAQ,SAAS,KAAK;AAAA;AAAA;AAAA,IAG1C,SAAS;AAAA;AAGb,MAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,IACP,cAAcA,iBAAM,QAAQ;AAAA,EAAA;AAAA,EAE9B,cAAc;AAAA,IACZ,WAAWA,iBAAM,QAAQ;AAAA,EAAA;AAAA,EAE3B,YAAY;AAAA,IACV,OAAO;AAAA,EAAA;AAEX;AAEA,MAAM,iBAAsC;AAAA,EAC1C,SAAS;AAAA,IACP,YAAY;AAAA,EAAA;AAAA,EAEd,cAAc;AAAA,IACZ,WAAWA,iBAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,kBAAkB,CAAC,UAA8B;AAC5D,QAAM,EAAA,UAAEG,YAAU,MAAM,SAAS,gBAAgB;AAEjD,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,MAAIC,UAAS;AAEb,MAAID,YAAU;AACZ,UAAM,gBAAgBE,SAAAA,UAAgC;AAAA,MACpD,GAAG;AAAA,MACH,eAAe;AAAA,MACf,SAASF;AAAAA,IAAA,CACV;AAED,YAAQ,YAAY,cAAc,OAAO;AACzC,IAAAC,WAAU,cAAc;AAAA,EAC1B;AAEA,MAAI,MAAM;AACR,QAAI,CAAC,aAAa;AAChB,qBAAe,QAAQ,QAAQJ,iBAAM,MAAM,KAAK;AAAA,IAClD;AAEA,UAAM,YAAYM,SAAAA,OAA6B;AAAA,MAC7C,GAAG;AAAA,MACH,eAAe;AAAA,MACf,SAAS;AAAA,IAAA,CACV;AAED,YAAQ,YAAY,UAAU,OAAO;AACrC,IAAAF,WAAU,UAAU;AAAA,EACtB;AAEA,MAAI,SAAS;AACX,YAAQ,UAAU,IAAI,UAAU,OAAO;AACvC,YAAQ,YAAY,OAAO;AAAA,EAC7B;AAEA,UAAQ,UAAU,IAAI,UAAU,OAAO;AAEvC,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAAA;AAAA,EAAA;AAEJ;;;"}

package/dist/composite/alert/elements/text.mjs

@@ -1,6 +1,8 @@
-import { token, layout } from "@universityofmaryland/web-styles-library";
-import { convertJSSObjectToStyles } from "../../../utilities/theme/index.mjs";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import * as layout from "@universityofmaryland/web-styles-library/layout";
+import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
 import "../../../model/modifiers/index.mjs";
+import "@universityofmaryland/web-styles-library";
 import { sansLarge } from "../../../model/elements/headline.mjs";
 import { simple } from "../../../model/elements/rich-text.mjs";
 const CONSTANTS = {
@@ -16,7 +18,7 @@ const ctaStyles = `
     margin-top: ${token.spacing.sm};
   }
 
-  ${convertJSSObjectToStyles({
+  ${jssToCSS({
   styleObj: {
     [`.${className.actions}`]: layout.grid.inline.tabletRows
   }

package/dist/composite/alert/elements/text.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"text.mjs","sources":["../../../../source/composite/alert/elements/text.ts"],"sourcesContent":["import { token, layout } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport { ElementModel } from 'model';\n\nexport type TypeAlertTextProps = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n};\n\nexport const CONSTANTS = {\n  className: {\n    wrapper: 'wrapper',\n    text: 'text',\n    actions: 'actions',\n  },\n};\n\nconst { className } = CONSTANTS;\n\n// prettier-ignore\nconst ctaStyles = `\n  * + .${className.actions} {\n    margin-top: ${token.spacing.sm};\n  }\n\n  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${className.actions}`]: layout.grid.inline.tabletRows,\n    },\n  })}\n`;\n\nconst STYLES_ALERT_TEXT = `\n  .${className.wrapper} {\n     max-width: ${token.spacing.maxWidth.small};\n  }\n\n  ${ctaStyles}\n`;\n\nconst headlineStyles = {\n  element: {\n    paddingRight: token.spacing.md,\n  },\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n  subElement: {\n    color: 'currentColor',\n  },\n};\n\nconst richTextStyles: Record<string, any> = {\n  element: {\n    fontWeight: 500,\n  },\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n};\n\nexport const CreateAlertText = (props: TypeAlertTextProps) => {\n  const { headline, text, actions, isThemeDark } = props;\n\n  const wrapper = document.createElement('div');\n  let styles = STYLES_ALERT_TEXT;\n\n  if (headline) {\n    const headlineModel = ElementModel.headline.sansLarge({\n      ...props,\n      elementStyles: headlineStyles,\n      element: headline,\n    });\n\n    wrapper.appendChild(headlineModel.element);\n    styles += headlineModel.styles;\n  }\n\n  if (text) {\n    if (!isThemeDark) {\n      richTextStyles.element.color = token.color.gray.dark;\n    }\n\n    const textModel = ElementModel.richText.simple({\n      ...props,\n      elementStyles: richTextStyles,\n      element: text,\n    });\n\n    wrapper.appendChild(textModel.element);\n    styles += textModel.styles;\n  }\n\n  if (actions) {\n    actions.classList.add(className.actions);\n    wrapper.appendChild(actions);\n  }\n\n  wrapper.classList.add(className.wrapper);\n\n  return {\n    element: wrapper,\n    styles,\n  };\n};\n\n"],"names":["Utility.theme.convertJSSObjectToStyles","ElementModel.headline.sansLarge","ElementModel.richText.simple"],"mappings":";;;;;AAWO,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb;AAEA,MAAM,EAAE,cAAc;AAGtB,MAAM,YAAY;AAAA,SACT,UAAU,OAAO;AAAA,kBACR,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG9BA,yBAAuC;AAAA,EACvC,UAAU;AAAA,IACR,CAAC,IAAI,UAAU,OAAO,EAAE,GAAG,OAAO,KAAK,OAAO;AAAA,EAAA;AAElD,CAAC,CAAC;AAAA;AAGJ,MAAM,oBAAoB;AAAA,KACrB,UAAU,OAAO;AAAA,kBACJ,MAAM,QAAQ,SAAS,KAAK;AAAA;AAAA;AAAA,IAG1C,SAAS;AAAA;AAGb,MAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,IACP,cAAc,MAAM,QAAQ;AAAA,EAAA;AAAA,EAE9B,cAAc;AAAA,IACZ,WAAW,MAAM,QAAQ;AAAA,EAAA;AAAA,EAE3B,YAAY;AAAA,IACV,OAAO;AAAA,EAAA;AAEX;AAEA,MAAM,iBAAsC;AAAA,EAC1C,SAAS;AAAA,IACP,YAAY;AAAA,EAAA;AAAA,EAEd,cAAc;AAAA,IACZ,WAAW,MAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,kBAAkB,CAAC,UAA8B;AAC5D,QAAM,EAAE,UAAU,MAAM,SAAS,gBAAgB;AAEjD,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,MAAI,SAAS;AAEb,MAAI,UAAU;AACZ,UAAM,gBAAgBC,UAAgC;AAAA,MACpD,GAAG;AAAA,MACH,eAAe;AAAA,MACf,SAAS;AAAA,IAAA,CACV;AAED,YAAQ,YAAY,cAAc,OAAO;AACzC,cAAU,cAAc;AAAA,EAC1B;AAEA,MAAI,MAAM;AACR,QAAI,CAAC,aAAa;AAChB,qBAAe,QAAQ,QAAQ,MAAM,MAAM,KAAK;AAAA,IAClD;AAEA,UAAM,YAAYC,OAA6B;AAAA,MAC7C,GAAG;AAAA,MACH,eAAe;AAAA,MACf,SAAS;AAAA,IAAA,CACV;AAED,YAAQ,YAAY,UAAU,OAAO;AACrC,cAAU,UAAU;AAAA,EACtB;AAEA,MAAI,SAAS;AACX,YAAQ,UAAU,IAAI,UAAU,OAAO;AACvC,YAAQ,YAAY,OAAO;AAAA,EAC7B;AAEA,UAAQ,UAAU,IAAI,UAAU,OAAO;AAEvC,SAAO;AAAA,IACL,SAAS;AAAA,IACT;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"text.mjs","sources":["../../../../source/composite/alert/elements/text.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\n\nexport type TypeAlertTextProps = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n};\n\nexport const CONSTANTS = {\n  className: {\n    wrapper: 'wrapper',\n    text: 'text',\n    actions: 'actions',\n  },\n};\n\nconst { className } = CONSTANTS;\n\n// prettier-ignore\nconst ctaStyles = `\n  * + .${className.actions} {\n    margin-top: ${token.spacing.sm};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${className.actions}`]: layout.grid.inline.tabletRows,\n    },\n  })}\n`;\n\nconst STYLES_ALERT_TEXT = `\n  .${className.wrapper} {\n     max-width: ${token.spacing.maxWidth.small};\n  }\n\n  ${ctaStyles}\n`;\n\nconst headlineStyles = {\n  element: {\n    paddingRight: token.spacing.md,\n  },\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n  subElement: {\n    color: 'currentColor',\n  },\n};\n\nconst richTextStyles: Record<string, any> = {\n  element: {\n    fontWeight: 500,\n  },\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n};\n\nexport const CreateAlertText = (props: TypeAlertTextProps) => {\n  const { headline, text, actions, isThemeDark } = props;\n\n  const wrapper = document.createElement('div');\n  let styles = STYLES_ALERT_TEXT;\n\n  if (headline) {\n    const headlineModel = ElementModel.headline.sansLarge({\n      ...props,\n      elementStyles: headlineStyles,\n      element: headline,\n    });\n\n    wrapper.appendChild(headlineModel.element);\n    styles += headlineModel.styles;\n  }\n\n  if (text) {\n    if (!isThemeDark) {\n      richTextStyles.element.color = token.color.gray.dark;\n    }\n\n    const textModel = ElementModel.richText.simple({\n      ...props,\n      elementStyles: richTextStyles,\n      element: text,\n    });\n\n    wrapper.appendChild(textModel.element);\n    styles += textModel.styles;\n  }\n\n  if (actions) {\n    actions.classList.add(className.actions);\n    wrapper.appendChild(actions);\n  }\n\n  wrapper.classList.add(className.wrapper);\n\n  return {\n    element: wrapper,\n    styles,\n  };\n};\n"],"names":["ElementModel.headline.sansLarge","ElementModel.richText.simple"],"mappings":";;;;;;;AAYO,MAAM,YAAY;AAAA,EACvB,WAAW;AAAA,IACT,SAAS;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAEb;AAEA,MAAM,EAAE,cAAc;AAGtB,MAAM,YAAY;AAAA,SACT,UAAU,OAAO;AAAA,kBACR,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG9B,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,UAAU,OAAO,EAAE,GAAG,OAAO,KAAK,OAAO;AAAA,EAAA;AAElD,CAAC,CAAC;AAAA;AAGJ,MAAM,oBAAoB;AAAA,KACrB,UAAU,OAAO;AAAA,kBACJ,MAAM,QAAQ,SAAS,KAAK;AAAA;AAAA;AAAA,IAG1C,SAAS;AAAA;AAGb,MAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,IACP,cAAc,MAAM,QAAQ;AAAA,EAAA;AAAA,EAE9B,cAAc;AAAA,IACZ,WAAW,MAAM,QAAQ;AAAA,EAAA;AAAA,EAE3B,YAAY;AAAA,IACV,OAAO;AAAA,EAAA;AAEX;AAEA,MAAM,iBAAsC;AAAA,EAC1C,SAAS;AAAA,IACP,YAAY;AAAA,EAAA;AAAA,EAEd,cAAc;AAAA,IACZ,WAAW,MAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,kBAAkB,CAAC,UAA8B;AAC5D,QAAM,EAAE,UAAU,MAAM,SAAS,gBAAgB;AAEjD,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,MAAI,SAAS;AAEb,MAAI,UAAU;AACZ,UAAM,gBAAgBA,UAAgC;AAAA,MACpD,GAAG;AAAA,MACH,eAAe;AAAA,MACf,SAAS;AAAA,IAAA,CACV;AAED,YAAQ,YAAY,cAAc,OAAO;AACzC,cAAU,cAAc;AAAA,EAC1B;AAEA,MAAI,MAAM;AACR,QAAI,CAAC,aAAa;AAChB,qBAAe,QAAQ,QAAQ,MAAM,MAAM,KAAK;AAAA,IAClD;AAEA,UAAM,YAAYC,OAA6B;AAAA,MAC7C,GAAG;AAAA,MACH,eAAe;AAAA,MACf,SAAS;AAAA,IAAA,CACV;AAED,YAAQ,YAAY,UAAU,OAAO;AACrC,cAAU,UAAU;AAAA,EACtB;AAEA,MAAI,SAAS;AACX,YAAQ,UAAU,IAAI,UAAU,OAAO;AACvC,YAAQ,YAAY,OAAO;AAAA,EAC7B;AAEA,UAAQ,UAAU,IAAI,UAAU,OAAO;AAEvC,SAAO;AAAA,IACL,SAAS;AAAA,IACT;AAAA,EAAA;AAEJ;"}

package/dist/composite/alert/page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/page.ts"],"names":[],"mappings":"AAEA,OAAO,EAAgC,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEnF,KAAK,mBAAmB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,cAAc,GAAG,mBAAmB,GACvC,kBAAkB,GAAG;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAgHJ,eAAO,MAAM,sBAAsB,GAAI,OAAO,cAAc;;;CAyBtD,CAAC"}
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/page.ts"],"names":[],"mappings":"AAIA,OAAO,EAEL,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAEzB,KAAK,mBAAmB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF,KAAK,cAAc,GAAG,mBAAmB,GACvC,kBAAkB,GAAG;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAgHJ,eAAO,MAAM,sBAAsB,GAAI,OAAO,cAAc;;;CAyBtD,CAAC"}