@universityofmaryland/web-elements-library 1.5.3 → 1.5.5

package/dist/composite/carousel/wide/controls.mjs

@@ -1,27 +1,31 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
 import { arrow_left } from "@universityofmaryland/web-icons-library/arrows";
 import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-styles-library/animation";
+import "@universityofmaryland/web-styles-library/typography";
 import "@universityofmaryland/web-utilities-library/media";
 import "@universityofmaryland/web-utilities-library/dom";
 import "@universityofmaryland/web-icons-library/controls";
 import "@universityofmaryland/web-icons-library/communication";
 import "@universityofmaryland/web-icons-library/files";
 import "@universityofmaryland/web-icons-library/brand";
-import { create } from "../../../model/elements/index.mjs";
 import indicator from "../../../atomic/animations/actions/indicator.mjs";
 import "../../../atomic/animations/brand/chevron-scroll.mjs";
 import "../../../atomic/animations/brand/card-stack.mjs";
+import "@universityofmaryland/web-styles-library";
 import "@universityofmaryland/web-utilities-library/performance";
 import "@universityofmaryland/web-utilities-library/accessibility";
 import "@universityofmaryland/web-icons-library/location";
 import "@universityofmaryland/web-icons-library/calendar";
+import "@universityofmaryland/web-utilities-library/theme";
 import "../../../atomic/layout/block/stacked.mjs";
 import "../../../atomic/layout/overlay/modal.mjs";
 import "../../../atomic/layout/person/columns.mjs";
 import "@universityofmaryland/web-icons-library/social";
 import "../../../atomic/text-lockup/date.mjs";
 import "../../../atomic/text-lockup/small.mjs";
-import "@universityofmaryland/web-styles-library/typography";
 import { createElementWithRefs } from "./_elementModel.mjs";
 const createControlButton = (type, isThemeDark) => {
   const isPrev = type === "prev";
@@ -29,63 +33,58 @@ const createControlButton = (type, isThemeDark) => {
   const buttonTabletPosition = `calc(10vw - (${token.spacing.md} + ${token.spacing.md}))`;
   const buttonDesktopPosition = `calc(15vw - (${token.spacing["xl"]} + ${token.spacing.md}))`;
   const buttonHighPosition = `calc(20vw - (${token.spacing["xl"]} + ${token.spacing.md}))`;
-  const button = create({
-    element: document.createElement("button"),
-    className: isPrev ? "umd-carousel-wide__control--prev" : "umd-carousel-wide__control--next",
-    elementStyles: {
-      element: {
-        backgroundColor: isThemeDark ? token.color.red : token.color.white,
-        height: token.spacing.lg,
-        padding: token.spacing.min,
-        position: "absolute",
-        transform: `${isPrev ? " rotate(180deg)" : ""}`,
-        zIndex: 3,
-        transition: "background 0.5s",
-        width: token.spacing.lg,
-        [`@media (${token.media.queries.large.max})`]: {
-          top: `calc(22vw + ${token.spacing.sm})`,
-          left: isPrev ? "auto" : `${token.spacing["xl"]}`,
-          right: isPrev ? `${token.spacing["xl"]}` : "auto"
-        },
-        [`@media (${token.media.queries.tablet.min})`]: {
-          boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.4)",
-          left: isPrev ? "auto" : buttonTabletPosition,
-          right: isPrev ? buttonTabletPosition : "auto",
-          bottom: "35%"
-        },
-        [`@media (${token.media.queries.desktop.min})`]: {
-          width: token.spacing["2xl"],
-          height: token.spacing["2xl"],
-          padding: token.spacing.xs,
-          left: isPrev ? "auto" : buttonDesktopPosition,
-          right: isPrev ? buttonDesktopPosition : "auto"
-        },
-        [`@media (${token.media.queries.highDef.min})`]: {
-          left: isPrev ? "auto" : buttonHighPosition,
-          right: isPrev ? buttonHighPosition : "auto"
-        },
+  const srText = new ElementBuilder("span").withClassName("sr-only").withText(altText).build();
+  const button = new ElementBuilder("button").withClassName(
+    isPrev ? "umd-carousel-wide__control--prev" : "umd-carousel-wide__control--next"
+  ).withStyles({
+    element: {
+      backgroundColor: isThemeDark ? token.color.red : token.color.white,
+      height: token.spacing.lg,
+      padding: token.spacing.min,
+      position: "absolute",
+      transform: `${isPrev ? " rotate(180deg)" : ""}`,
+      zIndex: 3,
+      transition: "background 0.5s",
+      width: token.spacing.lg,
+      [`@media (${token.media.queries.large.max})`]: {
+        top: `calc(22vw + ${token.spacing.sm})`,
+        left: isPrev ? "auto" : `${token.spacing["xl"]}`,
+        right: isPrev ? `${token.spacing["xl"]}` : "auto"
+      },
+      [`@media (${token.media.queries.tablet.min})`]: {
+        boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.4)",
+        left: isPrev ? "auto" : buttonTabletPosition,
+        right: isPrev ? buttonTabletPosition : "auto",
+        bottom: "35%"
+      },
+      [`@media (${token.media.queries.desktop.min})`]: {
+        width: token.spacing["2xl"],
+        height: token.spacing["2xl"],
+        padding: token.spacing.xs,
+        left: isPrev ? "auto" : buttonDesktopPosition,
+        right: isPrev ? buttonDesktopPosition : "auto"
+      },
+      [`@media (${token.media.queries.highDef.min})`]: {
+        left: isPrev ? "auto" : buttonHighPosition,
+        right: isPrev ? buttonHighPosition : "auto"
+      },
+      "& svg": {
+        height: "100%",
+        width: "100%",
+        fill: isThemeDark ? token.color.white : token.color.black,
+        transition: "fill 0.5s"
+      },
+      "&:hover, &:focus": {
+        backgroundColor: isThemeDark ? token.color.redDark : token.color.red,
         "& svg": {
-          height: "100%",
-          width: "100%",
-          fill: isThemeDark ? token.color.white : token.color.black,
-          transition: "fill 0.5s"
-        },
-        "&:hover, &:focus": {
-          backgroundColor: isThemeDark ? token.color.redDark : token.color.red,
-          "& svg": {
-            fill: token.color.white
-          }
+          fill: token.color.white
         }
       }
     }
-  });
-  const srText = create({
-    element: document.createElement("span"),
-    className: "sr-only"
-  });
-  srText.element.textContent = altText;
-  button.element.append(srText.element);
-  button.element.insertAdjacentHTML("afterbegin", arrow_left);
+  }).withModifier((el) => {
+    el.append(srText.element);
+    el.insertAdjacentHTML("afterbegin", arrow_left);
+  }).build();
   return button;
 };
 const createIndicator = (slides, isThemeDark, callback) => {

package/dist/composite/carousel/wide/controls.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"controls.mjs","sources":["../../../../source/composite/carousel/wide/controls.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { arrow_left as iconArrowLeft } from '@universityofmaryland/web-icons-library/arrows';\nimport { animations } from 'atomic';\nimport { ElementModel } from 'model';\nimport { createElementWithRefs } from './_elementModel';\nimport { type CarouselWideProps } from '../_types';\n\nexport const createControlButton = (\n  type: 'prev' | 'next',\n  isThemeDark?: boolean,\n) => {\n  const isPrev = type === 'prev';\n  const altText = isPrev\n    ? 'Reverse to the previous Slide'\n    : 'Advanced to the Next Slide';\n\n  const buttonTabletPosition = `calc(10vw - (${token.spacing.md} + ${token.spacing.md}))`;\n  const buttonDesktopPosition = `calc(15vw - (${token.spacing['xl']} + ${token.spacing.md}))`;\n  const buttonHighPosition = `calc(20vw - (${token.spacing['xl']} + ${token.spacing.md}))`;\n\n  const button = ElementModel.create({\n    element: document.createElement('button'),\n    className: isPrev\n      ? 'umd-carousel-wide__control--prev'\n      : 'umd-carousel-wide__control--next',\n    elementStyles: {\n      element: {\n        backgroundColor: isThemeDark ? token.color.red : token.color.white,\n        height: token.spacing.lg,\n        padding: token.spacing.min,\n        position: 'absolute',\n        transform: `${isPrev ? ' rotate(180deg)' : ''}`,\n        zIndex: 3,\n        transition: 'background 0.5s',\n        width: token.spacing.lg,\n\n        [`@media (${token.media.queries.large.max})`]: {\n          top: `calc(22vw + ${token.spacing.sm})`,\n          left: isPrev ? 'auto' : `${token.spacing['xl']}`,\n          right: isPrev ? `${token.spacing['xl']}` : 'auto',\n        },\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n          left: isPrev ? 'auto' : buttonTabletPosition,\n          right: isPrev ? buttonTabletPosition : 'auto',\n          bottom: '35%',\n        },\n\n        [`@media (${token.media.queries.desktop.min})`]: {\n          width: token.spacing['2xl'],\n          height: token.spacing['2xl'],\n          padding: token.spacing.xs,\n          left: isPrev ? 'auto' : buttonDesktopPosition,\n          right: isPrev ? buttonDesktopPosition : 'auto',\n        },\n\n        [`@media (${token.media.queries.highDef.min})`]: {\n          left: isPrev ? 'auto' : buttonHighPosition,\n          right: isPrev ? buttonHighPosition : 'auto',\n        },\n\n        '& svg': {\n          height: '100%',\n          width: '100%',\n          fill: isThemeDark ? token.color.white : token.color.black,\n          transition: 'fill 0.5s',\n        },\n\n        '&:hover, &:focus': {\n          backgroundColor: isThemeDark ? token.color.redDark : token.color.red,\n\n          '& svg': {\n            fill: token.color.white,\n          },\n        },\n      },\n    },\n  });\n\n  const srText = ElementModel.create({\n    element: document.createElement('span'),\n    className: 'sr-only',\n  });\n  srText.element.textContent = altText;\n\n  button.element.append(srText.element);\n  button.element.insertAdjacentHTML('afterbegin', iconArrowLeft);\n\n  return button;\n};\n\nexport const createIndicator = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n  callback?: (index: number) => void,\n) => {\n  const indicator = animations.actions.indicator({\n    count: slides.length,\n    isThemeDark,\n    callback: callback || (() => {}),\n  });\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__drawer',\n    children: [indicator],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        margin: 'auto',\n        padding: token.spacing.md,\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          padding: 0,\n          paddingTop: token.spacing.lg,\n        },\n      },\n    },\n    refs: {\n      indicator,\n    },\n  });\n};\n"],"names":["ElementModel.create","iconArrowLeft","indicator","animations.actions.indicator"],"mappings":"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"}
+{"version":3,"file":"controls.mjs","sources":["../../../../source/composite/carousel/wide/controls.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { arrow_left as iconArrowLeft } from '@universityofmaryland/web-icons-library/arrows';\nimport { animations } from 'atomic';\nimport { createElementWithRefs } from './_elementModel';\nimport { type CarouselWideProps } from '../_types';\n\nexport const createControlButton = (\n  type: 'prev' | 'next',\n  isThemeDark?: boolean,\n) => {\n  const isPrev = type === 'prev';\n  const altText = isPrev\n    ? 'Reverse to the previous Slide'\n    : 'Advanced to the Next Slide';\n\n  const buttonTabletPosition = `calc(10vw - (${token.spacing.md} + ${token.spacing.md}))`;\n  const buttonDesktopPosition = `calc(15vw - (${token.spacing['xl']} + ${token.spacing.md}))`;\n  const buttonHighPosition = `calc(20vw - (${token.spacing['xl']} + ${token.spacing.md}))`;\n\n  const srText = new ElementBuilder('span')\n    .withClassName('sr-only')\n    .withText(altText)\n    .build();\n\n  const button = new ElementBuilder('button')\n    .withClassName(\n      isPrev\n        ? 'umd-carousel-wide__control--prev'\n        : 'umd-carousel-wide__control--next',\n    )\n    .withStyles({\n      element: {\n        backgroundColor: isThemeDark ? token.color.red : token.color.white,\n        height: token.spacing.lg,\n        padding: token.spacing.min,\n        position: 'absolute',\n        transform: `${isPrev ? ' rotate(180deg)' : ''}`,\n        zIndex: 3,\n        transition: 'background 0.5s',\n        width: token.spacing.lg,\n\n        [`@media (${token.media.queries.large.max})`]: {\n          top: `calc(22vw + ${token.spacing.sm})`,\n          left: isPrev ? 'auto' : `${token.spacing['xl']}`,\n          right: isPrev ? `${token.spacing['xl']}` : 'auto',\n        },\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n          left: isPrev ? 'auto' : buttonTabletPosition,\n          right: isPrev ? buttonTabletPosition : 'auto',\n          bottom: '35%',\n        },\n\n        [`@media (${token.media.queries.desktop.min})`]: {\n          width: token.spacing['2xl'],\n          height: token.spacing['2xl'],\n          padding: token.spacing.xs,\n          left: isPrev ? 'auto' : buttonDesktopPosition,\n          right: isPrev ? buttonDesktopPosition : 'auto',\n        },\n\n        [`@media (${token.media.queries.highDef.min})`]: {\n          left: isPrev ? 'auto' : buttonHighPosition,\n          right: isPrev ? buttonHighPosition : 'auto',\n        },\n\n        '& svg': {\n          height: '100%',\n          width: '100%',\n          fill: isThemeDark ? token.color.white : token.color.black,\n          transition: 'fill 0.5s',\n        },\n\n        '&:hover, &:focus': {\n          backgroundColor: isThemeDark ? token.color.redDark : token.color.red,\n\n          '& svg': {\n            fill: token.color.white,\n          },\n        },\n      },\n    })\n    .withModifier((el) => {\n      el.append(srText.element);\n      el.insertAdjacentHTML('afterbegin', iconArrowLeft);\n    })\n    .build();\n\n  return button;\n};\n\nexport const createIndicator = (\n  slides: CarouselWideProps['slides'],\n  isThemeDark?: boolean,\n  callback?: (index: number) => void,\n) => {\n  const indicator = animations.actions.indicator({\n    count: slides.length,\n    isThemeDark,\n    callback: callback || (() => {}),\n  });\n\n  return createElementWithRefs({\n    className: 'umd-carousel-wide__drawer',\n    children: [indicator],\n    elementStyles: {\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        margin: 'auto',\n        padding: token.spacing.md,\n\n        [`@media (${token.media.queries.tablet.min})`]: {\n          padding: 0,\n          paddingTop: token.spacing.lg,\n        },\n      },\n    },\n    refs: {\n      indicator,\n    },\n  });\n};\n"],"names":["iconArrowLeft","indicator","animations.actions.indicator"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOO,MAAM,sBAAsB,CACjC,MACA,gBACG;AACH,QAAM,SAAS,SAAS;AACxB,QAAM,UAAU,SACZ,kCACA;AAEJ,QAAM,uBAAuB,gBAAgB,MAAM,QAAQ,EAAE,MAAM,MAAM,QAAQ,EAAE;AACnF,QAAM,wBAAwB,gBAAgB,MAAM,QAAQ,IAAI,CAAC,MAAM,MAAM,QAAQ,EAAE;AACvF,QAAM,qBAAqB,gBAAgB,MAAM,QAAQ,IAAI,CAAC,MAAM,MAAM,QAAQ,EAAE;AAEpF,QAAM,SAAS,IAAI,eAAe,MAAM,EACrC,cAAc,SAAS,EACvB,SAAS,OAAO,EAChB,MAAA;AAEH,QAAM,SAAS,IAAI,eAAe,QAAQ,EACvC;AAAA,IACC,SACI,qCACA;AAAA,EAAA,EAEL,WAAW;AAAA,IACV,SAAS;AAAA,MACP,iBAAiB,cAAc,MAAM,MAAM,MAAM,MAAM,MAAM;AAAA,MAC7D,QAAQ,MAAM,QAAQ;AAAA,MACtB,SAAS,MAAM,QAAQ;AAAA,MACvB,UAAU;AAAA,MACV,WAAW,GAAG,SAAS,oBAAoB,EAAE;AAAA,MAC7C,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,OAAO,MAAM,QAAQ;AAAA,MAErB,CAAC,WAAW,MAAM,MAAM,QAAQ,MAAM,GAAG,GAAG,GAAG;AAAA,QAC7C,KAAK,eAAe,MAAM,QAAQ,EAAE;AAAA,QACpC,MAAM,SAAS,SAAS,GAAG,MAAM,QAAQ,IAAI,CAAC;AAAA,QAC9C,OAAO,SAAS,GAAG,MAAM,QAAQ,IAAI,CAAC,KAAK;AAAA,MAAA;AAAA,MAG7C,CAAC,WAAW,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,QAC9C,WAAW;AAAA,QACX,MAAM,SAAS,SAAS;AAAA,QACxB,OAAO,SAAS,uBAAuB;AAAA,QACvC,QAAQ;AAAA,MAAA;AAAA,MAGV,CAAC,WAAW,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QAC/C,OAAO,MAAM,QAAQ,KAAK;AAAA,QAC1B,QAAQ,MAAM,QAAQ,KAAK;AAAA,QAC3B,SAAS,MAAM,QAAQ;AAAA,QACvB,MAAM,SAAS,SAAS;AAAA,QACxB,OAAO,SAAS,wBAAwB;AAAA,MAAA;AAAA,MAG1C,CAAC,WAAW,MAAM,MAAM,QAAQ,QAAQ,GAAG,GAAG,GAAG;AAAA,QAC/C,MAAM,SAAS,SAAS;AAAA,QACxB,OAAO,SAAS,qBAAqB;AAAA,MAAA;AAAA,MAGvC,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,MAAM,cAAc,MAAM,MAAM,QAAQ,MAAM,MAAM;AAAA,QACpD,YAAY;AAAA,MAAA;AAAA,MAGd,oBAAoB;AAAA,QAClB,iBAAiB,cAAc,MAAM,MAAM,UAAU,MAAM,MAAM;AAAA,QAEjE,SAAS;AAAA,UACP,MAAM,MAAM,MAAM;AAAA,QAAA;AAAA,MACpB;AAAA,IACF;AAAA,EACF,CACD,EACA,aAAa,CAAC,OAAO;AACpB,OAAG,OAAO,OAAO,OAAO;AACxB,OAAG,mBAAmB,cAAcA,UAAa;AAAA,EACnD,CAAC,EACA,MAAA;AAEH,SAAO;AACT;AAEO,MAAM,kBAAkB,CAC7B,QACA,aACA,aACG;AACH,QAAMC,cAAYC,UAA6B;AAAA,IAC7C,OAAO,OAAO;AAAA,IACd;AAAA,IACA,UAAU,aAAa,MAAM;AAAA,IAAC;AAAA,EAAA,CAC/B;AAED,SAAO,sBAAsB;AAAA,IAC3B,WAAW;AAAA,IACX,UAAU,CAACD,WAAS;AAAA,IACpB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACR,SAAS,MAAM,QAAQ;AAAA,QAEvB,CAAC,WAAW,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,UAC9C,SAAS;AAAA,UACT,YAAY,MAAM,QAAQ;AAAA,QAAA;AAAA,MAC5B;AAAA,IACF;AAAA,IAEF,MAAM;AAAA,MAAA,WACJA;AAAAA,IAAA;AAAA,EACF,CACD;AACH;"}

package/dist/composite/carousel/wide/frames.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"frames.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/wide/frames.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AA+RnD,eAAO,MAAM,qBAAqB,GAChC,QAAQ,iBAAiB,CAAC,QAAQ,CAAC,EACnC,cAAc,OAAO;qBA4CmC,cAAc;;;cAGnC,WAAW;eACT,WAAW;;;cAGV,iBAAiB;cACrB,iBAAiB;;EAIpD,CAAC"}
+{"version":3,"file":"frames.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/wide/frames.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,iBAAiB,EAAE,MAAM,WAAW,CAAC;AA0SnD,eAAO,MAAM,qBAAqB,GAChC,QAAQ,iBAAiB,CAAC,QAAQ,CAAC,EACnC,cAAc,OAAO;qBA4CmC,cAAc;;;cAGnC,WAAW;eACT,WAAW;;;cAGV,iBAAiB;cACrB,iBAAiB;;EAIpD,CAAC"}

package/dist/composite/carousel/wide/frames.js

@@ -1,14 +1,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const token = require("@universityofmaryland/web-styles-library/token");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
+const Styles = require("@universityofmaryland/web-styles-library");
+const theme = require("@universityofmaryland/web-utilities-library/theme");
 require("@universityofmaryland/web-styles-library/element");
+require("@universityofmaryland/web-styles-library/layout");
+require("@universityofmaryland/web-styles-library/animation");
+require("@universityofmaryland/web-styles-library/typography");
 require("@universityofmaryland/web-utilities-library/media");
 require("@universityofmaryland/web-utilities-library/dom");
 require("@universityofmaryland/web-icons-library/controls");
 require("@universityofmaryland/web-icons-library/communication");
 require("@universityofmaryland/web-icons-library/files");
 require("@universityofmaryland/web-icons-library/brand");
-const index = require("../../../model/elements/index.js");
 require("@universityofmaryland/web-icons-library/arrows");
 require("../../../atomic/animations/actions/indicator.js");
 require("../../../atomic/animations/brand/chevron-scroll.js");
@@ -24,11 +29,8 @@ require("../../../atomic/layout/person/columns.js");
 require("@universityofmaryland/web-icons-library/social");
 require("../../../atomic/text-lockup/date.js");
 require("../../../atomic/text-lockup/small.js");
-require("@universityofmaryland/web-styles-library/typography");
 const _elementModel = require("./_elementModel.js");
 const controls = require("./controls.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) {
@@ -46,6 +48,7 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
 const ASPECT_RATIO = "16 / 9";
 const createSlideContent = ({
   slide,
@@ -53,105 +56,99 @@ const createSlideContent = ({
 }) => {
   const children = [];
   let contentContainer = null;
-  const closeButton = index.create({
-    element: document.createElement("button"),
-    className: "umd-carousel-wide__slide-content-close",
-    attributes: [{ type: "button" }, { "aria-label": "Close content" }],
-    elementStyles: {
-      element: {
-        position: "absolute",
-        top: 0,
-        right: 0,
-        background: "transparent",
-        border: "none",
-        cursor: "pointer",
-        fontSize: "20px",
-        fontWeight: "bold",
-        padding: token__namespace.spacing.min,
-        lineHeight: 1,
-        color: token__namespace.color.gray.dark,
-        transition: "color 0.2s ease",
-        [`@media (${token__namespace.media.queries.large.max})`]: {
-          display: "none"
-        },
-        "&:hover, &:focus": {
-          outline: `2px solid ${token__namespace.color.blue}`
-        },
-        ...isThemeDark && {
-          color: token__namespace.color.gray.light,
-          "&:hover": {
-            color: token__namespace.color.white
-          }
+  const closeButton = new webBuilderLibrary.ElementBuilder("button").withClassName("umd-carousel-wide__slide-content-close").withAttribute("type", "button").withAttribute("aria-label", "Close content").withHTML("×").withStyles({
+    element: {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      background: "transparent",
+      border: "none",
+      cursor: "pointer",
+      fontSize: "20px",
+      fontWeight: "bold",
+      padding: token__namespace.spacing.min,
+      lineHeight: 1,
+      color: token__namespace.color.gray.dark,
+      transition: "color 0.2s ease",
+      [`@media (${token__namespace.media.queries.large.max})`]: {
+        display: "none"
+      },
+      "&:hover, &:focus": {
+        outline: `2px solid ${token__namespace.color.blue}`
+      },
+      ...isThemeDark && {
+        color: token__namespace.color.gray.light,
+        "&:hover": {
+          color: token__namespace.color.white
         }
       }
     }
-  });
-  closeButton.element.innerHTML = "×";
-  closeButton.element.addEventListener("click", () => {
-    if (contentContainer) contentContainer.element.style.display = "none";
-  });
+  }).withModifier((el) => {
+    el.addEventListener("click", () => {
+      if (contentContainer) contentContainer.element.style.display = "none";
+    });
+  }).build();
   children.push(closeButton);
   if (slide.headline) {
     children.push(
-      headline.sansLarge({
-        element: slide.headline,
-        elementStyles: {
-          element: {
+      new webBuilderLibrary.ElementBuilder(slide.headline).styled(
+        Styles__namespace.typography.sans.compose("large", {
+          theme: theme.theme.fontColor(isThemeDark)
+        })
+      ).withStyles({
+        element: {
+          ...!isThemeDark && {
             color: `${token__namespace.color.black}`
-          },
-          siblingAfter: {
-            marginTop: token__namespace.spacing.sm
           }
         },
-        isThemeDark
-      })
+        siblingAfter: {
+          marginTop: token__namespace.spacing.sm
+        }
+      }).build()
     );
   }
   if (slide.text) {
     children.push(
-      richText.simple({
-        element: slide.text,
-        isThemeDark
-      })
+      new webBuilderLibrary.ElementBuilder(slide.text).styled(
+        Styles__namespace.element.text.rich.composeSimple({
+          theme: theme.theme.fontColor(isThemeDark)
+        })
+      ).build()
     );
   }
   if (children.length === 1) return null;
-  contentContainer = index.createDiv({
-    className: "umd-carousel-wide__slide-content",
-    children,
-    elementStyles: {
-      element: {
-        backgroundColor: token__namespace.color.white,
-        border: `1px solid ${token__namespace.color.gray.light}`,
-        display: "block",
-        padding: token__namespace.spacing.md,
-        width: "100%",
-        position: "relative",
-        opacity: 0,
-        transform: "translateY(20px)",
-        transition: "opacity 0.6s ease-out, transform 0.6s ease-out",
+  contentContainer = new webBuilderLibrary.ElementBuilder().withClassName("umd-carousel-wide__slide-content").withStyles({
+    element: {
+      backgroundColor: token__namespace.color.white,
+      border: `1px solid ${token__namespace.color.gray.light}`,
+      display: "block",
+      padding: token__namespace.spacing.md,
+      width: "100%",
+      position: "relative",
+      opacity: 0,
+      transform: "translateY(20px)",
+      transition: "opacity 0.6s ease-out, transform 0.6s ease-out",
+      ...isThemeDark && {
+        backgroundColor: token__namespace.color.black,
+        border: `1px solid ${token__namespace.color.gray.dark}`
+      },
+      [`@media (${token__namespace.media.queries.large.max})`]: {
+        borderTop: "none"
+      },
+      [`@media (${token__namespace.media.queries.tablet.min})`]: {
+        border: "none",
+        boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.4)",
+        maxWidth: "50%",
+        position: "absolute",
+        bottom: token__namespace.spacing.sm,
+        left: token__namespace.spacing.sm,
         ...isThemeDark && {
-          backgroundColor: token__namespace.color.black,
-          border: `1px solid ${token__namespace.color.gray.dark}`
-        },
-        [`@media (${token__namespace.media.queries.large.max})`]: {
-          borderTop: "none"
-        },
-        [`@media (${token__namespace.media.queries.tablet.min})`]: {
           border: "none",
-          boxShadow: "0 0 5px 0 rgba(0, 0, 0, 0.4)",
-          maxWidth: "50%",
-          position: "absolute",
-          bottom: token__namespace.spacing.sm,
-          left: token__namespace.spacing.sm,
-          ...isThemeDark && {
-            border: "none",
-            boxShadow: "none"
-          }
+          boxShadow: "none"
         }
       }
     }
-  });
+  }).withChildren(...children).build();
   return contentContainer;
 };
 const createMainFrameSlide = (slide, index$1, isThemeDark) => {
@@ -164,118 +161,106 @@ const createMainFrameSlide = (slide, index$1, isThemeDark) => {
     })
   );
   if (slideContentWrapper) children.push(slideContentWrapper);
-  return index.create({
-    element: document.createElement("figure"),
-    className: "umd-carousel-wide__slide",
-    children,
-    attributes: [{ "data-index": `${index$1}` }],
-    elementStyles: {
-      element: {
-        display: "none",
-        opacity: 0,
-        transition: "opacity 0.3s ease-in-out, transform 0.5s ease-in-out",
+  return new webBuilderLibrary.ElementBuilder("figure").withClassName("umd-carousel-wide__slide").withAttribute("data-index", `${index$1}`).withStyles({
+    element: {
+      display: "none",
+      opacity: 0,
+      transition: "opacity 0.3s ease-in-out, transform 0.5s ease-in-out",
+      transform: "translateX(0)",
+      aspectRatio: ASPECT_RATIO,
+      [`@media (${token__namespace.media.queries.tablet.min})`]: {
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        top: 0,
+        left: 0
+      },
+      '&[data-active="true"]': {
+        opacity: 1,
         transform: "translateX(0)",
-        aspectRatio: ASPECT_RATIO,
-        [`@media (${token__namespace.media.queries.tablet.min})`]: {
+        zIndex: 2,
+        display: "block"
+      },
+      '&[data-animating="true"]': {
+        zIndex: 1,
+        display: "block",
+        opacity: 1,
+        [`@media (${token__namespace.media.queries.large.max})`]: {
           position: "absolute",
           width: "100%",
-          height: "100%",
           top: 0,
           left: 0
-        },
-        '&[data-active="true"]': {
-          opacity: 1,
-          transform: "translateX(0)",
-          zIndex: 2,
-          display: "block"
-        },
-        '&[data-animating="true"]': {
-          zIndex: 1,
-          display: "block",
-          opacity: 1,
-          [`@media (${token__namespace.media.queries.large.max})`]: {
-            position: "absolute",
-            width: "100%",
-            top: 0,
-            left: 0
-          }
-        },
-        '&[data-direction="left"]': {
-          transform: "translateX(-100%)"
-        },
-        '&[data-direction="right"]': {
-          transform: "translateX(100%)"
-        },
-        '&[data-content-visible="true"] .umd-carousel-wide__slide-content': {
-          opacity: 1,
-          transform: "translateY(0)"
         }
+      },
+      '&[data-direction="left"]': {
+        transform: "translateX(-100%)"
+      },
+      '&[data-direction="right"]': {
+        transform: "translateX(100%)"
+      },
+      '&[data-content-visible="true"] .umd-carousel-wide__slide-content': {
+        opacity: 1,
+        transform: "translateY(0)"
       }
     }
-  });
+  }).withChildren(...children).build();
 };
 const createPreviewContainer = (position) => {
   const isPositionLeft = position === "left";
-  return index.createDiv({
-    className: isPositionLeft ? "umd-carousel-wide__preview--left" : "umd-carousel-wide__preview--right",
-    attributes: [{ "aria-hidden": "true" }, { role: "presentation" }],
-    elementStyles: {
-      element: {
-        display: "none",
-        overflow: "hidden",
-        position: "relative",
-        [`@media (${token__namespace.media.queries.tablet.min})`]: {
-          display: "flex",
-          alignItems: "flex-end",
-          height: "100%"
+  return new webBuilderLibrary.ElementBuilder().withClassName(
+    isPositionLeft ? "umd-carousel-wide__preview--left" : "umd-carousel-wide__preview--right"
+  ).withAttribute("aria-hidden", "true").withAttribute("role", "presentation").withStyles({
+    element: {
+      display: "none",
+      overflow: "hidden",
+      position: "relative",
+      [`@media (${token__namespace.media.queries.tablet.min})`]: {
+        display: "flex",
+        alignItems: "flex-end",
+        height: "100%"
+      },
+      ["& > * "]: {
+        position: "absolute !important",
+        bottom: "0 !important",
+        left: "0 !important",
+        width: "auto !important",
+        height: "75% !important",
+        display: "block !important",
+        aspectRatio: ASPECT_RATIO,
+        ...isPositionLeft && {
+          right: "0 !important",
+          left: "auto !important"
         },
-        ["& > * "]: {
-          position: "absolute !important",
-          bottom: "0 !important",
-          left: "0 !important",
-          width: "auto !important",
-          height: "75% !important",
-          display: "block !important",
-          aspectRatio: ASPECT_RATIO,
-          ...isPositionLeft && {
-            right: "0 !important",
-            left: "auto !important"
-          },
-          ["&:before "]: {
-            content: '""',
-            position: "absolute",
-            top: "0",
-            left: "0",
-            right: "0",
-            bottom: "0",
-            background: token__namespace.color.gray.darker,
-            opacity: 0.5,
-            zIndex: 1
-          }
+        ["&:before "]: {
+          content: '""',
+          position: "absolute",
+          top: "0",
+          left: "0",
+          right: "0",
+          bottom: "0",
+          background: token__namespace.color.gray.darker,
+          opacity: 0.5,
+          zIndex: 1
         }
       }
     }
-  });
+  }).build();
 };
 const createMainContainer = (slides, isThemeDark) => {
-  const slideElements = slides.map((slide, index2) => {
-    return createMainFrameSlide(slide, index2, isThemeDark);
+  const slideElements = slides.map((slide, index) => {
+    return createMainFrameSlide(slide, index, isThemeDark);
   });
   if (slideElements.length > 0) {
     slideElements[0].element.setAttribute("data-active", "true");
     slideElements[0].element.setAttribute("data-content-visible", "true");
   }
   return {
-    component: index.createDiv({
-      className: "umd-carousel-wide__main-container",
-      children: slideElements,
-      elementStyles: {
-        element: {
-          position: "relative",
-          overflow: "hidden"
-        }
+    component: new webBuilderLibrary.ElementBuilder().withClassName("umd-carousel-wide__main-container").withStyles({
+      element: {
+        position: "relative",
+        overflow: "hidden"
       }
-    }),
+    }).withChildren(...slideElements).build(),
     refs: slideElements.map((el) => el.element)
   };
 };