@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

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

@@ -1,8 +1,30 @@
 "use strict";
-const index = require("../../model/elements/index.js");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const typography = require("@universityofmaryland/web-styles-library/typography");
+const elementStyles = require("@universityofmaryland/web-styles-library/element");
+const theme = require("@universityofmaryland/web-utilities-library/theme");
+const animation = require("@universityofmaryland/web-styles-library/animation");
+const dom = require("@universityofmaryland/web-utilities-library/dom");
 const small = require("./small.js");
-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 typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
+const elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
+const animation__namespace = /* @__PURE__ */ _interopNamespaceDefault(animation);
 const smallScaling = ({
   actions,
   customStyles = {},
@@ -10,61 +32,64 @@ const smallScaling = ({
   eventMeta,
   eyebrow,
   hasEyebrowRibbon = false,
-  headline: headline$1,
+  headline,
   isThemeDark,
   text
 }) => {
-  const children = [];
+  const container = new webBuilderLibrary.ElementBuilder().withClassName("scaling-font-block-container").withStyles({
+    element: {
+      zIndex: "9",
+      position: "relative",
+      ...customStyles
+    }
+  });
   if (eyebrow && !hasEyebrowRibbon) {
-    children.push(small.createEyebrow({ eyebrow, isThemeDark }));
+    const eyebrowElement = small.createEyebrow({ eyebrow, isThemeDark });
+    container.withChild(eyebrowElement);
   }
   if (eyebrow && hasEyebrowRibbon) {
-    children.push(small.createRibbonEyebrow({ eyebrow }));
+    const ribbonEyebrowElement = small.createRibbonEyebrow({ eyebrow });
+    container.withChild(ribbonEyebrowElement);
   }
-  if (headline$1) {
-    children.push(
-      headline.sansScalingLarger({
-        element: headline$1,
-        elementStyles: small.headlineStyles,
-        isThemeDark
+  if (headline) {
+    const composeHeadlineStyles = {
+      ...typography__namespace.sans.compose("larger", {
+        theme: theme.theme.fontColor(isThemeDark),
+        scaling: true
+      }),
+      ...animation__namespace.line.composeSlideUnder({
+        color: theme.theme.foreground(isThemeDark)
       })
-    );
+    };
+    const headlineElement = new webBuilderLibrary.ElementBuilder(headline).styled(composeHeadlineStyles).withStyles(small.headlineStyles).withModifier((el) => dom.wrapTextNodeInSpan(el)).build();
+    container.withChild(headlineElement);
   }
   if (eventMeta) {
-    children.push(eventMeta);
+    container.withChild(eventMeta);
   }
   if (text) {
-    children.push(
-      richText.simpleScaling({
-        element: text,
-        elementStyles: small.textStyles,
-        isThemeDark
+    const textElement = new webBuilderLibrary.ElementBuilder(text).styled(
+      elementStyles__namespace.text.rich.composeSimple({
+        theme: theme.theme.fontColor(isThemeDark),
+        scaling: true
       })
-    );
+    ).withStyles(small.textStyles(isThemeDark)).build();
+    container.withChild(textElement);
   }
   if (date) {
-    children.push(
-      headline.sansScalingMin({
-        element: date,
-        elementStyles: small.dateStyles,
-        isThemeDark
+    const dateElement = new webBuilderLibrary.ElementBuilder(date).styled(
+      typography__namespace.sans.compose("min", {
+        theme: theme.theme.fontColor(isThemeDark),
+        scaling: true
       })
-    );
+    ).withStyles(small.dateStyles(isThemeDark)).build();
+    container.withChild(dateElement);
   }
   if (actions) {
-    children.push(small.createActions({ actions }));
+    const actionsElement = small.createActions({ actions });
+    container.withChild(actionsElement);
   }
-  return index.createDiv({
-    className: "scaling-font-block-container",
-    children,
-    elementStyles: {
-      element: {
-        zIndex: "9",
-        position: "relative",
-        ...customStyles
-      }
-    }
-  });
+  return container.build();
 };
 module.exports = smallScaling;
 //# sourceMappingURL=small-scaling.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"small-scaling.js","sources":["../../../source/atomic/text-lockup/small-scaling.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport {\n  createEyebrow,\n  createRibbonEyebrow,\n  createActions,\n  headlineStyles,\n  textStyles,\n  dateStyles,\n} from './small';\nimport { type UMDElement } from '../../_types';\n\nexport type TypeTextLockupSmallScaling = {\n  actions?: HTMLElement | null;\n  customStyles?: Record<string, string>;\n  date?: HTMLElement | null;\n  eventMeta?: UMDElement;\n  eyebrow?: HTMLElement | null;\n  hasEyebrowRibbon?: boolean;\n  headline?: HTMLElement | null;\n  isThemeDark?: boolean;\n  text?: HTMLElement | null;\n};\n\nexport default ({\n  actions,\n  customStyles = {},\n  date,\n  eventMeta,\n  eyebrow,\n  hasEyebrowRibbon = false,\n  headline,\n  isThemeDark,\n  text,\n}: TypeTextLockupSmallScaling) => {\n  const children: UMDElement[] = [];\n\n  if (eyebrow && !hasEyebrowRibbon) {\n    children.push(createEyebrow({ eyebrow, isThemeDark }));\n  }\n\n  if (eyebrow && hasEyebrowRibbon) {\n    children.push(createRibbonEyebrow({ eyebrow }));\n  }\n\n  if (headline) {\n    children.push(\n      ElementModel.headline.sansScalingLarger({\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.simpleScaling({\n        element: text,\n        elementStyles: textStyles,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (date) {\n    children.push(\n      ElementModel.headline.sansScalingMin({\n        element: date,\n        elementStyles: dateStyles,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (actions) {\n    children.push(createActions({ actions }));\n  }\n\n  return ElementModel.createDiv({\n    className: 'scaling-font-block-container',\n    children,\n    elementStyles: {\n      element: {\n        zIndex: '9',\n        position: 'relative',\n        ...customStyles,\n      },\n    },\n  });\n};\n"],"names":["headline","createEyebrow","createRibbonEyebrow","ElementModel.headline.sansScalingLarger","headlineStyles","ElementModel.richText.simpleScaling","textStyles","ElementModel.headline.sansScalingMin","dateStyles","createActions","ElementModel.createDiv"],"mappings":";;;;;AAuBA,MAAA,eAAe,CAAC;AAAA,EACd;AAAA,EACA,eAAe,CAAA;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EAAA,UACnBA;AAAAA,EACA;AAAA,EACA;AACF,MAAkC;AAChC,QAAM,WAAyB,CAAA;AAE/B,MAAI,WAAW,CAAC,kBAAkB;AAChC,aAAS,KAAKC,MAAAA,cAAc,EAAE,SAAS,YAAA,CAAa,CAAC;AAAA,EACvD;AAEA,MAAI,WAAW,kBAAkB;AAC/B,aAAS,KAAKC,MAAAA,oBAAoB,EAAE,QAAA,CAAS,CAAC;AAAA,EAChD;AAEA,MAAIF,YAAU;AACZ,aAAS;AAAA,MACPG,2BAAwC;AAAA,QACtC,SAASH;AAAAA,QACT,eAAeI,MAAAA;AAAAA,QACf;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,WAAW;AACb,aAAS,KAAK,SAAS;AAAA,EACzB;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPC,uBAAoC;AAAA,QAClC,SAAS;AAAA,QACT,eAAeC,MAAAA;AAAAA,QACf;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPC,wBAAqC;AAAA,QACnC,SAAS;AAAA,QACT,eAAeC,MAAAA;AAAAA,QACf;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,SAAS;AACX,aAAS,KAAKC,MAAAA,cAAc,EAAE,QAAA,CAAS,CAAC;AAAA,EAC1C;AAEA,SAAOC,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF,CACD;AACH;;"}
+{"version":3,"file":"small-scaling.js","sources":["../../../source/atomic/text-lockup/small-scaling.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport {\n  createEyebrow,\n  createRibbonEyebrow,\n  createActions,\n  headlineStyles,\n  textStyles,\n  dateStyles,\n} from './small';\nimport { type UMDElement } from '../../_types';\n\nexport type TypeTextLockupSmallScaling = {\n  actions?: HTMLElement | null;\n  customStyles?: Record<string, string>;\n  date?: HTMLElement | null;\n  eventMeta?: UMDElement;\n  eyebrow?: HTMLElement | null;\n  hasEyebrowRibbon?: boolean;\n  headline?: HTMLElement | null;\n  isThemeDark?: boolean;\n  text?: HTMLElement | null;\n};\n\nexport default ({\n  actions,\n  customStyles = {},\n  date,\n  eventMeta,\n  eyebrow,\n  hasEyebrowRibbon = false,\n  headline,\n  isThemeDark,\n  text,\n}: TypeTextLockupSmallScaling) => {\n  const container = new ElementBuilder()\n    .withClassName('scaling-font-block-container')\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n        ...customStyles,\n      },\n    });\n\n  if (eyebrow && !hasEyebrowRibbon) {\n    const eyebrowElement = createEyebrow({ eyebrow, isThemeDark });\n    container.withChild(eyebrowElement);\n  }\n\n  if (eyebrow && hasEyebrowRibbon) {\n    const ribbonEyebrowElement = createRibbonEyebrow({ eyebrow });\n    container.withChild(ribbonEyebrowElement);\n  }\n\n  if (headline) {\n    const composeHeadlineStyles = {\n      ...typography.sans.compose('larger', {\n        theme: theme.fontColor(isThemeDark),\n        scaling: true,\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const headlineElement = new ElementBuilder(headline)\n      .styled(composeHeadlineStyles)\n      .withStyles(headlineStyles)\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(headlineElement);\n  }\n\n  if (eventMeta) {\n    container.withChild(eventMeta);\n  }\n\n  if (text) {\n    const textElement = new ElementBuilder(text)\n      .styled(\n        elementStyles.text.rich.composeSimple({\n          theme: theme.fontColor(isThemeDark),\n          scaling: true,\n        }),\n      )\n      .withStyles(textStyles(isThemeDark))\n      .build();\n\n    container.withChild(textElement);\n  }\n\n  if (date) {\n    const dateElement = new ElementBuilder(date)\n      .styled(\n        typography.sans.compose('min', {\n          theme: theme.fontColor(isThemeDark),\n          scaling: true,\n        }),\n      )\n      .withStyles(dateStyles(isThemeDark))\n      .build();\n\n    container.withChild(dateElement);\n  }\n\n  if (actions) {\n    const actionsElement = createActions({ actions });\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["ElementBuilder","createEyebrow","createRibbonEyebrow","typography","theme","animationStyles","headlineStyles","wrapTextNodeInSpan","elementStyles","textStyles","dateStyles","createActions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAA,eAAe,CAAC;AAAA,EACd;AAAA,EACA,eAAe,CAAA;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,MAAkC;AAChC,QAAM,YAAY,IAAIA,kBAAAA,eAAA,EACnB,cAAc,8BAA8B,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,GAAG;AAAA,IAAA;AAAA,EACL,CACD;AAEH,MAAI,WAAW,CAAC,kBAAkB;AAChC,UAAM,iBAAiBC,MAAAA,cAAc,EAAE,SAAS,aAAa;AAC7D,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,MAAI,WAAW,kBAAkB;AAC/B,UAAM,uBAAuBC,MAAAA,oBAAoB,EAAE,SAAS;AAC5D,cAAU,UAAU,oBAAoB;AAAA,EAC1C;AAEA,MAAI,UAAU;AACZ,UAAM,wBAAwB;AAAA,MAC5B,GAAGC,sBAAW,KAAK,QAAQ,UAAU;AAAA,QACnC,OAAOC,MAAAA,MAAM,UAAU,WAAW;AAAA,QAClC,SAAS;AAAA,MAAA,CACV;AAAA,MACD,GAAGC,qBAAgB,KAAK,kBAAkB;AAAA,QACxC,OAAOD,MAAAA,MAAM,WAAW,WAAW;AAAA,MAAA,CACpC;AAAA,IAAA;AAGH,UAAM,kBAAkB,IAAIJ,kBAAAA,eAAe,QAAQ,EAChD,OAAO,qBAAqB,EAC5B,WAAWM,MAAAA,cAAc,EACzB,aAAa,CAAC,OAAOC,IAAAA,mBAAmB,EAAE,CAAC,EAC3C,MAAA;AAEH,cAAU,UAAU,eAAe;AAAA,EACrC;AAEA,MAAI,WAAW;AACb,cAAU,UAAU,SAAS;AAAA,EAC/B;AAEA,MAAI,MAAM;AACR,UAAM,cAAc,IAAIP,iCAAe,IAAI,EACxC;AAAA,MACCQ,yBAAc,KAAK,KAAK,cAAc;AAAA,QACpC,OAAOJ,MAAAA,MAAM,UAAU,WAAW;AAAA,QAClC,SAAS;AAAA,MAAA,CACV;AAAA,IAAA,EAEF,WAAWK,MAAAA,WAAW,WAAW,CAAC,EAClC,MAAA;AAEH,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,MAAM;AACR,UAAM,cAAc,IAAIT,iCAAe,IAAI,EACxC;AAAA,MACCG,sBAAW,KAAK,QAAQ,OAAO;AAAA,QAC7B,OAAOC,MAAAA,MAAM,UAAU,WAAW;AAAA,QAClC,SAAS;AAAA,MAAA,CACV;AAAA,IAAA,EAEF,WAAWM,MAAAA,WAAW,WAAW,CAAC,EAClC,MAAA;AAEH,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,SAAS;AACX,UAAM,iBAAiBC,MAAAA,cAAc,EAAE,SAAS;AAChD,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,SAAO,UAAU,MAAA;AACnB;;"}

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

@@ -1,7 +1,10 @@
-import { createDiv } from "../../model/elements/index.mjs";
-import { createEyebrow, createRibbonEyebrow, headlineStyles, dateStyles, createActions, textStyles } from "./small.mjs";
-import { sansScalingLarger, sansScalingMin } from "../../model/elements/headline.mjs";
-import { simpleScaling } from "../../model/elements/rich-text.mjs";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
+import * as animation from "@universityofmaryland/web-styles-library/animation";
+import { wrapTextNodeInSpan } from "@universityofmaryland/web-utilities-library/dom";
+import { createEyebrow, createRibbonEyebrow, headlineStyles, textStyles, dateStyles, createActions } from "./small.mjs";
 const smallScaling = ({
   actions,
   customStyles = {},
@@ -13,57 +16,60 @@ const smallScaling = ({
   isThemeDark,
   text
 }) => {
-  const children = [];
+  const container = new ElementBuilder().withClassName("scaling-font-block-container").withStyles({
+    element: {
+      zIndex: "9",
+      position: "relative",
+      ...customStyles
+    }
+  });
   if (eyebrow && !hasEyebrowRibbon) {
-    children.push(createEyebrow({ eyebrow, isThemeDark }));
+    const eyebrowElement = createEyebrow({ eyebrow, isThemeDark });
+    container.withChild(eyebrowElement);
   }
   if (eyebrow && hasEyebrowRibbon) {
-    children.push(createRibbonEyebrow({ eyebrow }));
+    const ribbonEyebrowElement = createRibbonEyebrow({ eyebrow });
+    container.withChild(ribbonEyebrowElement);
   }
   if (headline) {
-    children.push(
-      sansScalingLarger({
-        element: headline,
-        elementStyles: headlineStyles,
-        isThemeDark
+    const composeHeadlineStyles = {
+      ...typography.sans.compose("larger", {
+        theme: theme.fontColor(isThemeDark),
+        scaling: true
+      }),
+      ...animation.line.composeSlideUnder({
+        color: theme.foreground(isThemeDark)
       })
-    );
+    };
+    const headlineElement = new ElementBuilder(headline).styled(composeHeadlineStyles).withStyles(headlineStyles).withModifier((el) => wrapTextNodeInSpan(el)).build();
+    container.withChild(headlineElement);
   }
   if (eventMeta) {
-    children.push(eventMeta);
+    container.withChild(eventMeta);
   }
   if (text) {
-    children.push(
-      simpleScaling({
-        element: text,
-        elementStyles: textStyles,
-        isThemeDark
+    const textElement = new ElementBuilder(text).styled(
+      elementStyles.text.rich.composeSimple({
+        theme: theme.fontColor(isThemeDark),
+        scaling: true
       })
-    );
+    ).withStyles(textStyles(isThemeDark)).build();
+    container.withChild(textElement);
   }
   if (date) {
-    children.push(
-      sansScalingMin({
-        element: date,
-        elementStyles: dateStyles,
-        isThemeDark
+    const dateElement = new ElementBuilder(date).styled(
+      typography.sans.compose("min", {
+        theme: theme.fontColor(isThemeDark),
+        scaling: true
       })
-    );
+    ).withStyles(dateStyles(isThemeDark)).build();
+    container.withChild(dateElement);
   }
   if (actions) {
-    children.push(createActions({ actions }));
+    const actionsElement = createActions({ actions });
+    container.withChild(actionsElement);
   }
-  return createDiv({
-    className: "scaling-font-block-container",
-    children,
-    elementStyles: {
-      element: {
-        zIndex: "9",
-        position: "relative",
-        ...customStyles
-      }
-    }
-  });
+  return container.build();
 };
 export {
   smallScaling as default

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

@@ -1 +1 @@
-{"version":3,"file":"small-scaling.mjs","sources":["../../../source/atomic/text-lockup/small-scaling.ts"],"sourcesContent":["import { ElementModel } from 'model';\nimport {\n  createEyebrow,\n  createRibbonEyebrow,\n  createActions,\n  headlineStyles,\n  textStyles,\n  dateStyles,\n} from './small';\nimport { type UMDElement } from '../../_types';\n\nexport type TypeTextLockupSmallScaling = {\n  actions?: HTMLElement | null;\n  customStyles?: Record<string, string>;\n  date?: HTMLElement | null;\n  eventMeta?: UMDElement;\n  eyebrow?: HTMLElement | null;\n  hasEyebrowRibbon?: boolean;\n  headline?: HTMLElement | null;\n  isThemeDark?: boolean;\n  text?: HTMLElement | null;\n};\n\nexport default ({\n  actions,\n  customStyles = {},\n  date,\n  eventMeta,\n  eyebrow,\n  hasEyebrowRibbon = false,\n  headline,\n  isThemeDark,\n  text,\n}: TypeTextLockupSmallScaling) => {\n  const children: UMDElement[] = [];\n\n  if (eyebrow && !hasEyebrowRibbon) {\n    children.push(createEyebrow({ eyebrow, isThemeDark }));\n  }\n\n  if (eyebrow && hasEyebrowRibbon) {\n    children.push(createRibbonEyebrow({ eyebrow }));\n  }\n\n  if (headline) {\n    children.push(\n      ElementModel.headline.sansScalingLarger({\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.simpleScaling({\n        element: text,\n        elementStyles: textStyles,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (date) {\n    children.push(\n      ElementModel.headline.sansScalingMin({\n        element: date,\n        elementStyles: dateStyles,\n        isThemeDark,\n      }),\n    );\n  }\n\n  if (actions) {\n    children.push(createActions({ actions }));\n  }\n\n  return ElementModel.createDiv({\n    className: 'scaling-font-block-container',\n    children,\n    elementStyles: {\n      element: {\n        zIndex: '9',\n        position: 'relative',\n        ...customStyles,\n      },\n    },\n  });\n};\n"],"names":["ElementModel.headline.sansScalingLarger","ElementModel.richText.simpleScaling","ElementModel.headline.sansScalingMin","ElementModel.createDiv"],"mappings":";;;;AAuBA,MAAA,eAAe,CAAC;AAAA,EACd;AAAA,EACA,eAAe,CAAA;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,MAAkC;AAChC,QAAM,WAAyB,CAAA;AAE/B,MAAI,WAAW,CAAC,kBAAkB;AAChC,aAAS,KAAK,cAAc,EAAE,SAAS,YAAA,CAAa,CAAC;AAAA,EACvD;AAEA,MAAI,WAAW,kBAAkB;AAC/B,aAAS,KAAK,oBAAoB,EAAE,QAAA,CAAS,CAAC;AAAA,EAChD;AAEA,MAAI,UAAU;AACZ,aAAS;AAAA,MACPA,kBAAwC;AAAA,QACtC,SAAS;AAAA,QACT,eAAe;AAAA,QACf;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,WAAW;AACb,aAAS,KAAK,SAAS;AAAA,EACzB;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPC,cAAoC;AAAA,QAClC,SAAS;AAAA,QACT,eAAe;AAAA,QACf;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,MAAM;AACR,aAAS;AAAA,MACPC,eAAqC;AAAA,QACnC,SAAS;AAAA,QACT,eAAe;AAAA,QACf;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAEL;AAEA,MAAI,SAAS;AACX,aAAS,KAAK,cAAc,EAAE,QAAA,CAAS,CAAC;AAAA,EAC1C;AAEA,SAAOC,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,GAAG;AAAA,MAAA;AAAA,IACL;AAAA,EACF,CACD;AACH;"}
+{"version":3,"file":"small-scaling.mjs","sources":["../../../source/atomic/text-lockup/small-scaling.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport {\n  createEyebrow,\n  createRibbonEyebrow,\n  createActions,\n  headlineStyles,\n  textStyles,\n  dateStyles,\n} from './small';\nimport { type UMDElement } from '../../_types';\n\nexport type TypeTextLockupSmallScaling = {\n  actions?: HTMLElement | null;\n  customStyles?: Record<string, string>;\n  date?: HTMLElement | null;\n  eventMeta?: UMDElement;\n  eyebrow?: HTMLElement | null;\n  hasEyebrowRibbon?: boolean;\n  headline?: HTMLElement | null;\n  isThemeDark?: boolean;\n  text?: HTMLElement | null;\n};\n\nexport default ({\n  actions,\n  customStyles = {},\n  date,\n  eventMeta,\n  eyebrow,\n  hasEyebrowRibbon = false,\n  headline,\n  isThemeDark,\n  text,\n}: TypeTextLockupSmallScaling) => {\n  const container = new ElementBuilder()\n    .withClassName('scaling-font-block-container')\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n        ...customStyles,\n      },\n    });\n\n  if (eyebrow && !hasEyebrowRibbon) {\n    const eyebrowElement = createEyebrow({ eyebrow, isThemeDark });\n    container.withChild(eyebrowElement);\n  }\n\n  if (eyebrow && hasEyebrowRibbon) {\n    const ribbonEyebrowElement = createRibbonEyebrow({ eyebrow });\n    container.withChild(ribbonEyebrowElement);\n  }\n\n  if (headline) {\n    const composeHeadlineStyles = {\n      ...typography.sans.compose('larger', {\n        theme: theme.fontColor(isThemeDark),\n        scaling: true,\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const headlineElement = new ElementBuilder(headline)\n      .styled(composeHeadlineStyles)\n      .withStyles(headlineStyles)\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(headlineElement);\n  }\n\n  if (eventMeta) {\n    container.withChild(eventMeta);\n  }\n\n  if (text) {\n    const textElement = new ElementBuilder(text)\n      .styled(\n        elementStyles.text.rich.composeSimple({\n          theme: theme.fontColor(isThemeDark),\n          scaling: true,\n        }),\n      )\n      .withStyles(textStyles(isThemeDark))\n      .build();\n\n    container.withChild(textElement);\n  }\n\n  if (date) {\n    const dateElement = new ElementBuilder(date)\n      .styled(\n        typography.sans.compose('min', {\n          theme: theme.fontColor(isThemeDark),\n          scaling: true,\n        }),\n      )\n      .withStyles(dateStyles(isThemeDark))\n      .build();\n\n    container.withChild(dateElement);\n  }\n\n  if (actions) {\n    const actionsElement = createActions({ actions });\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["animationStyles"],"mappings":";;;;;;;AA4BA,MAAA,eAAe,CAAC;AAAA,EACd;AAAA,EACA,eAAe,CAAA;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,MAAkC;AAChC,QAAM,YAAY,IAAI,eAAA,EACnB,cAAc,8BAA8B,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,GAAG;AAAA,IAAA;AAAA,EACL,CACD;AAEH,MAAI,WAAW,CAAC,kBAAkB;AAChC,UAAM,iBAAiB,cAAc,EAAE,SAAS,aAAa;AAC7D,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,MAAI,WAAW,kBAAkB;AAC/B,UAAM,uBAAuB,oBAAoB,EAAE,SAAS;AAC5D,cAAU,UAAU,oBAAoB;AAAA,EAC1C;AAEA,MAAI,UAAU;AACZ,UAAM,wBAAwB;AAAA,MAC5B,GAAG,WAAW,KAAK,QAAQ,UAAU;AAAA,QACnC,OAAO,MAAM,UAAU,WAAW;AAAA,QAClC,SAAS;AAAA,MAAA,CACV;AAAA,MACD,GAAGA,UAAgB,KAAK,kBAAkB;AAAA,QACxC,OAAO,MAAM,WAAW,WAAW;AAAA,MAAA,CACpC;AAAA,IAAA;AAGH,UAAM,kBAAkB,IAAI,eAAe,QAAQ,EAChD,OAAO,qBAAqB,EAC5B,WAAW,cAAc,EACzB,aAAa,CAAC,OAAO,mBAAmB,EAAE,CAAC,EAC3C,MAAA;AAEH,cAAU,UAAU,eAAe;AAAA,EACrC;AAEA,MAAI,WAAW;AACb,cAAU,UAAU,SAAS;AAAA,EAC/B;AAEA,MAAI,MAAM;AACR,UAAM,cAAc,IAAI,eAAe,IAAI,EACxC;AAAA,MACC,cAAc,KAAK,KAAK,cAAc;AAAA,QACpC,OAAO,MAAM,UAAU,WAAW;AAAA,QAClC,SAAS;AAAA,MAAA,CACV;AAAA,IAAA,EAEF,WAAW,WAAW,WAAW,CAAC,EAClC,MAAA;AAEH,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,MAAM;AACR,UAAM,cAAc,IAAI,eAAe,IAAI,EACxC;AAAA,MACC,WAAW,KAAK,QAAQ,OAAO;AAAA,QAC7B,OAAO,MAAM,UAAU,WAAW;AAAA,QAClC,SAAS;AAAA,MAAA,CACV;AAAA,IAAA,EAEF,WAAW,WAAW,WAAW,CAAC,EAClC,MAAA;AAEH,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,SAAS;AACX,UAAM,iBAAiB,cAAc,EAAE,SAAS;AAChD,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,SAAO,UAAU,MAAA;AACnB;"}

package/dist/atomic/text-lockup/small.d.ts

@@ -42,7 +42,6 @@ export declare const headlineStyles: {
             marginTop?: undefined;
         };
         fontWeight: string;
-        color: string;
         "& + *": {
             marginTop: string;
         };
@@ -51,18 +50,21 @@ export declare const headlineStyles: {
         color: string;
     };
 };
-export declare const textStyles: {
+export declare const textStyles: (isThemeDark?: boolean) => {
     element: {
-        color: string;
+        color?: string | undefined;
+    };
+    child: {
+        color?: string | undefined;
     };
     siblingAfter: {
         marginTop: string;
     };
 };
-export declare const dateStyles: {
+export declare const dateStyles: (isThemeDark?: boolean) => {
     element: {
+        color?: string | undefined;
         display: string;
-        color: string;
     };
     child: {
         color: string;
@@ -71,25 +73,9 @@ export declare const dateStyles: {
         marginTop: string;
     };
 };
-export declare const createEyebrow: ({ eyebrow, isThemeDark }: TypeEyebrow) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
-export declare const createRibbonEyebrow: ({ eyebrow }: TypeEyebrow) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
-export declare const createActions: ({ actions }: TypeActions) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
-export declare const createTextLockupSmall: ({ eyebrow, headline, text, actions, date, eventMeta, isThemeDark, }: TypeTextLockupSmall) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+export declare const createEyebrow: ({ eyebrow, isThemeDark }: TypeEyebrow) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createRibbonEyebrow: ({ eyebrow }: TypeEyebrow) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createActions: ({ actions }: TypeActions) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const createTextLockupSmall: ({ eyebrow, headline, text, actions, date, eventMeta, isThemeDark, }: TypeTextLockupSmall) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export {};
 //# sourceMappingURL=small.d.ts.map

package/dist/atomic/text-lockup/small.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"small.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/small.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,KAAK,SAAS,GAAG;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,KAAK,WAAW,GAAG,SAAS,GAAG;IAC7B,OAAO,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG;IAC5C,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAkBF,eAAO,MAAM,aAAa;;;;;;;CAOzB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;CAkB1B,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;CAOtB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;;;;;;;;CAWtB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,0BAA0B,WAAW;;;;CAK/D,CAAC;AAEL,eAAO,MAAM,mBAAmB,GAAI,aAAa,WAAW;;;;CAIxD,CAAC;AAEL,eAAO,MAAM,aAAa,GAAI,aAAa,WAAW;;;;CAQlD,CAAC;AAEL,eAAO,MAAM,qBAAqB,GAAI,qEAQnC,mBAAmB;;;;CA2DrB,CAAC"}
+{"version":3,"file":"small.d.ts","sourceRoot":"","sources":["../../../source/atomic/text-lockup/small.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C,KAAK,SAAS,GAAG;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,KAAK,WAAW,GAAG,SAAS,GAAG;IAC7B,OAAO,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,OAAO,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG;IAC5C,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,UAAU,CAAC;IACvB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAkBF,eAAO,MAAM,aAAa;;;;;;;CAOzB,CAAC;AAEF,eAAO,MAAM,YAAY;;;;CAIxB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;CAiB1B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,cAAc,OAAO;;;;;;;;;;CAc9C,CAAC;AAEH,eAAO,MAAM,UAAU,GAAI,cAAc,OAAO;;;;;;;;;;;CAc9C,CAAC;AAEH,eAAO,MAAM,aAAa,GAAI,0BAA0B,WAAW,kFAQvD,CAAC;AAEb,eAAO,MAAM,mBAAmB,GAAI,aAAa,WAAW,kFAIhD,CAAC;AAEb,eAAO,MAAM,aAAa,GAAI,aAAa,WAAW,kFAQ1C,CAAC;AAEb,eAAO,MAAM,qBAAqB,GAAI,qEAQnC,mBAAmB,kFAyErB,CAAC"}

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

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-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");
-const headline = require("../../model/elements/headline.js");
-const richText = require("../../model/elements/rich-text.js");
+const typography = require("@universityofmaryland/web-styles-library/typography");
+const layout = require("@universityofmaryland/web-styles-library/layout");
+const animation = require("@universityofmaryland/web-styles-library/animation");
+const dom = require("@universityofmaryland/web-utilities-library/dom");
+const theme = require("@universityofmaryland/web-utilities-library/theme");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -23,8 +24,11 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
+const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
+const layout__namespace = /* @__PURE__ */ _interopNamespaceDefault(layout);
+const animation__namespace = /* @__PURE__ */ _interopNamespaceDefault(animation);
 const ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER = "text-lockup-small-container";
 const metaContainer = elementStyles__namespace?.event?.meta?.container;
 const metaClass = (() => {
@@ -53,7 +57,6 @@ const ribbonStyles = {
 const headlineStyles = {
   element: {
     fontWeight: "700",
-    color: `${token__namespace.color.black}`,
     [`& + *`]: {
       marginTop: token__namespace.spacing.sm
     },
@@ -67,18 +70,27 @@ const headlineStyles = {
     color: "currentColor"
   }
 };
-const textStyles = {
+const textStyles = (isThemeDark) => ({
   element: {
-    color: `${token__namespace.color.gray.dark}`
+    ...!isThemeDark && {
+      color: `${token__namespace.color.gray.dark}`
+    }
+  },
+  child: {
+    ...!isThemeDark && {
+      color: `${token__namespace.color.gray.dark}`
+    }
   },
   siblingAfter: {
     marginTop: token__namespace.spacing.min
   }
-};
-const dateStyles = {
+});
+const dateStyles = (isThemeDark) => ({
   element: {
     display: "block",
-    color: `${token__namespace.color.gray.mediumAA}`
+    ...!isThemeDark && {
+      color: `${token__namespace.color.gray.mediumAA}`
+    }
   },
   child: {
     color: "currentColor"
@@ -86,84 +98,73 @@ const dateStyles = {
   siblingAfter: {
     marginTop: token__namespace.spacing.min
   }
-};
-const createEyebrow = ({ eyebrow, isThemeDark }) => text.eyebrow({
-  element: eyebrow,
-  elementStyles: eyebrowStyles,
-  isThemeDark
-});
-const createRibbonEyebrow = ({ eyebrow }) => text.ribbon({
-  element: eyebrow,
-  elementStyles: ribbonStyles
 });
-const createActions = ({ actions }) => layout.gridInlineTabletRows({
-  element: actions,
-  elementStyles: {
-    element: {
-      marginTop: token__namespace.spacing.sm
-    }
+const createEyebrow = ({ eyebrow, isThemeDark }) => new webBuilderLibrary.ElementBuilder(eyebrow).styled(
+  typography__namespace.elements.compose("eyebrow", {
+    theme: theme.theme.fontColor(isThemeDark)
+  })
+).withStyles(eyebrowStyles).build();
+const createRibbonEyebrow = ({ eyebrow }) => new webBuilderLibrary.ElementBuilder(eyebrow).styled(elementStyles__namespace.text.decoration.ribbon).withStyles(ribbonStyles).build();
+const createActions = ({ actions }) => new webBuilderLibrary.ElementBuilder(actions).styled(layout__namespace.grid.inline.tabletRows).withStyles({
+  element: {
+    marginTop: token__namespace.spacing.sm
   }
-});
+}).build();
 const createTextLockupSmall = ({
   eyebrow,
-  headline: headline$1,
-  text: text2,
+  headline,
+  text,
   actions,
   date,
   eventMeta,
   isThemeDark
 }) => {
-  const children = [];
+  const container = new webBuilderLibrary.ElementBuilder().withClassName(ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER).withStyles({
+    element: {
+      zIndex: "9",
+      position: "relative"
+    }
+  });
   if (eyebrow) {
-    children.push(createEyebrow({ eyebrow, isThemeDark }));
+    const eyebrowElement = createEyebrow({ eyebrow, isThemeDark });
+    container.withChild(eyebrowElement);
   }
-  if (headline$1) {
-    children.push(
-      headline.sansLarger({
-        element: headline$1,
-        elementStyles: headlineStyles,
-        isThemeDark
+  if (headline) {
+    const composeHeadlineStyles = {
+      ...typography__namespace.sans.compose("larger", {
+        theme: theme.theme.fontColor(isThemeDark)
+      }),
+      ...animation__namespace.line.composeSlideUnder({
+        color: theme.theme.foreground(isThemeDark)
       })
-    );
+    };
+    const headlineElement = new webBuilderLibrary.ElementBuilder(headline).styled(composeHeadlineStyles).withStyles(headlineStyles).withModifier((el) => dom.wrapTextNodeInSpan(el)).build();
+    container.withChild(headlineElement);
   }
   if (eventMeta) {
-    children.push(eventMeta);
+    container.withChild(eventMeta);
   }
-  if (text2) {
-    children.push(
-      richText.simple({
-        element: text2,
-        elementStyles: textStyles,
-        isThemeDark
+  if (text) {
+    const textElement = new webBuilderLibrary.ElementBuilder(text).styled(
+      elementStyles__namespace.text.rich.composeSimple({
+        theme: theme.theme.fontColor(isThemeDark)
       })
-    );
+    ).withStyles(textStyles(isThemeDark)).build();
+    container.withChild(textElement);
   }
   if (date) {
-    children.push(
-      headline.sansMin({
-        element: date,
-        elementStyles: dateStyles,
-        isThemeDark
+    const dateElement = new webBuilderLibrary.ElementBuilder("slot").withClassName("umd-headline-sans-min").styled(
+      typography__namespace.sans.compose("min", {
+        theme: theme.theme.fontColor(isThemeDark)
       })
-    );
+    ).withAnimation("slideUnder").withChild(date).withStyles(dateStyles(isThemeDark)).build();
+    container.withChild(dateElement);
   }
   if (actions) {
-    children.push(
-      createActions({
-        actions
-      })
-    );
+    const actionsElement = createActions({ actions });
+    container.withChild(actionsElement);
   }
-  return index.createDiv({
-    className: ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER,
-    children,
-    elementStyles: {
-      element: {
-        zIndex: "9",
-        position: "relative"
-      }
-    }
-  });
+  return container.build();
 };
 exports.createActions = createActions;
 exports.createEyebrow = createEyebrow;

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 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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"}
+{"version":3,"file":"small.js","sources":["../../../source/atomic/text-lockup/small.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\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\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 = (isThemeDark?: boolean) => ({\n  element: {\n    ...(!isThemeDark && {\n      color: `${token.color.gray.dark}`,\n    }),\n  },\n  child: {\n    ...(!isThemeDark && {\n      color: `${token.color.gray.dark}`,\n    }),\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n});\n\nexport const dateStyles = (isThemeDark?: boolean) => ({\n  element: {\n    display: 'block',\n\n    ...(!isThemeDark && {\n      color: `${token.color.gray.mediumAA}`,\n    }),\n  },\n  child: {\n    color: 'currentColor',\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n});\n\nexport const createEyebrow = ({ eyebrow, isThemeDark }: TypeEyebrow) =>\n  new ElementBuilder(eyebrow)\n    .styled(\n      typography.elements.compose('eyebrow', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles(eyebrowStyles)\n    .build();\n\nexport const createRibbonEyebrow = ({ eyebrow }: TypeEyebrow) =>\n  new ElementBuilder(eyebrow)\n    .styled(elementStyles.text.decoration.ribbon)\n    .withStyles(ribbonStyles)\n    .build();\n\nexport const createActions = ({ actions }: TypeActions) =>\n  new ElementBuilder(actions)\n    .styled(layout.grid.inline.tabletRows)\n    .withStyles({\n      element: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n\nexport const createTextLockupSmall = ({\n  eyebrow,\n  headline,\n  text,\n  actions,\n  date,\n  eventMeta,\n  isThemeDark,\n}: TypeTextLockupSmall) => {\n  const container = new ElementBuilder()\n    .withClassName(ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER)\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    });\n\n  if (eyebrow) {\n    const eyebrowElement = createEyebrow({ eyebrow, isThemeDark });\n    container.withChild(eyebrowElement);\n  }\n\n  if (headline) {\n    const composeHeadlineStyles = {\n      ...typography.sans.compose('larger', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const headlineElement = new ElementBuilder(headline)\n      .styled(composeHeadlineStyles)\n      .withStyles(headlineStyles)\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(headlineElement);\n  }\n\n  if (eventMeta) {\n    container.withChild(eventMeta);\n  }\n\n  if (text) {\n    const textElement = new ElementBuilder(text)\n      .styled(\n        elementStyles.text.rich.composeSimple({\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles(textStyles(isThemeDark))\n      .build();\n\n    container.withChild(textElement);\n  }\n\n  if (date) {\n    const dateElement = new ElementBuilder('slot')\n      .withClassName('umd-headline-sans-min')\n      .styled(\n        typography.sans.compose('min', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withAnimation('slideUnder')\n      .withChild(date)\n      .withStyles(dateStyles(isThemeDark))\n      .build();\n\n    container.withChild(dateElement);\n  }\n\n  if (actions) {\n    const actionsElement = createActions({ actions });\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["elementStyles","token","ElementBuilder","typography","theme","layout","animationStyles","wrapTextNodeInSpan"],"mappings":"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"}