@universityofmaryland/web-elements-library 1.5.2 → 1.5.5

package/dist/atomic/animations/actions/indicator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"indicator.mjs","sources":["../../../../source/atomic/animations/actions/indicator.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\n\nconst ELEMENT_SLIDE_INDICATOR_CONTAINER = 'slide-indicator-container';\nconst ELEMENT_SLIDE_INDICATOR_LINE = 'slide-indicator-line';\nconst ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER = 'slide-indicator-button-wrapper';\n\n// prettier-ignore\nconst LineStyles = `\n  .${ELEMENT_SLIDE_INDICATOR_LINE} {\n    position: absolute;\n    left: 0;\n    top: 0;\n    height: 24px;\n    width: 80px;\n    transition: left 500ms;\n    background-color: ${token.color.red};\n    z-index: 99;\n  }\n`\n\n// prettier-ignore\nconst ButtonStyles = `\n  .${ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER} {\n    width: 80px;\n    height: 100%;\n    background-color: ${token.color.gray.light};\n    position: relative;\n  }\n\n  .${ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER} > span {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 22px;\n    display: block;\n    background-color: ${token.color.gray.lightest};\n    z-index: 99;\n  }\n`\n\nconst STYLES_INDICATOR = `\n  .${ELEMENT_SLIDE_INDICATOR_CONTAINER} {\n    position: relative;\n    height: 24px;\n    display: flex;\n    align-items: flex-start;\n    max-width: 100%;\n    overflow: hidden;\n  }\n\n  .${ELEMENT_SLIDE_INDICATOR_CONTAINER} > span {\n    display: block;\n    width: ${token.spacing.sm};\n    height:  22px;\n    z-index: 999;\n    position: relative;\n  }\n  \n  ${LineStyles}\n  ${ButtonStyles}\n\n`;\n\nexport default ({\n  count,\n  overlayColor,\n  isThemeDark,\n  isThemeLight,\n  callback,\n}: {\n  count: number;\n  overlayColor?: string;\n  isThemeDark?: boolean;\n  isThemeLight?: boolean;\n  callback: (arg: number) => void;\n}) =>\n  (() => {\n    const container = document.createElement('div');\n    const line = document.createElement('div');\n    let styles = STYLES_INDICATOR;\n\n    const buttons = Array.from({ length: count }).map((count, i) => {\n      const button = document.createElement('button');\n\n      button.classList.add(ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER);\n      button.addEventListener('click', () => callback(i));\n      button.setAttribute('aria-label', `Slide ${i + 1}`);\n\n      return button;\n    });\n\n    const positionLine = (index: number) => {\n      const button = buttons[index];\n      const buttonSize = button.clientWidth;\n      const buttonPosition = button.offsetLeft;\n\n      line.style.width = `${buttonSize}px`;\n      line.style.left = `${buttonPosition}px`;\n    };\n    const sizeButtons = () => {\n      const maxWidth = 80;\n      const containerSize = container.clientWidth;\n      let buttonSize = containerSize / count;\n\n      if (buttonSize > maxWidth) buttonSize = maxWidth;\n\n      buttons.forEach((button) => {\n        button.style.width = `${buttonSize}px`;\n      });\n    };\n\n    const eventResize = () => {\n      sizeButtons();\n      positionLine(position);\n    };\n\n    const eventPosition = (index: number) => {\n      positionLine(index);\n      position = index;\n    };\n\n    const load = () => {\n      const reload = () => {\n        setTimeout(() => {\n          const isLoaded = container.clientWidth > 0;\n          if (!isLoaded) {\n            reload();\n          } else {\n            sizeButtons();\n            positionLine(position);\n            line.style.display = 'block';\n          }\n        }, 500);\n      };\n\n      line.style.display = 'none';\n      reload();\n    };\n\n    let position = 0;\n\n    line.classList.add(ELEMENT_SLIDE_INDICATOR_LINE);\n\n    container.classList.add(ELEMENT_SLIDE_INDICATOR_CONTAINER);\n    container.appendChild(line);\n    buttons.forEach((button) => {\n      const spacer = document.createElement('span');\n      const overlay = document.createElement('span');\n      let spacerColor: string = token.color.white;\n\n      if (isThemeDark && !overlayColor) {\n        spacerColor = token.color.black;\n      }\n\n      if (isThemeLight && !overlayColor) {\n        spacerColor = token.color.gray.lightest;\n      }\n\n      spacer.style.backgroundColor = spacerColor;\n      overlay.style.backgroundColor = spacerColor;\n\n      button.appendChild(overlay);\n      container.appendChild(button);\n      container.appendChild(spacer);\n    });\n\n    load();\n\n    window.addEventListener('resize', debounce(eventResize, 20));\n\n    return {\n      element: container,\n      className: ELEMENT_SLIDE_INDICATOR_CONTAINER,\n      styles,\n      position: eventPosition,\n    };\n  })();\n"],"names":["count"],"mappings":"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"}
+{"version":3,"file":"indicator.mjs","sources":["../../../../source/atomic/animations/actions/indicator.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\n\nconst ELEMENT_SLIDE_INDICATOR_CONTAINER = 'slide-indicator-container';\nconst ELEMENT_SLIDE_INDICATOR_LINE = 'slide-indicator-line';\nconst ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER = 'slide-indicator-button-wrapper';\n\n// prettier-ignore\nconst LineStyles = `\n  .${ELEMENT_SLIDE_INDICATOR_LINE} {\n    position: absolute;\n    left: 0;\n    top: 0;\n    height: 24px;\n    width: 80px;\n    transition: left 500ms;\n    background-color: ${token.color.red};\n    z-index: 99;\n  }\n`\n\n// prettier-ignore\nconst ButtonStyles = `\n  .${ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER} {\n    width: 80px;\n    height: 100%;\n    background-color: ${token.color.gray.light};\n    position: relative;\n  }\n\n  .${ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER} > span {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 22px;\n    display: block;\n    background-color: ${token.color.gray.lightest};\n    z-index: 99;\n  }\n`\n\nconst STYLES_INDICATOR = `\n  .${ELEMENT_SLIDE_INDICATOR_CONTAINER} {\n    position: relative;\n    height: 24px;\n    display: flex;\n    align-items: flex-start;\n    max-width: 100%;\n    overflow: hidden;\n  }\n\n  .${ELEMENT_SLIDE_INDICATOR_CONTAINER} > span {\n    display: block;\n    width: ${token.spacing.sm};\n    height:  22px;\n    z-index: 999;\n    position: relative;\n  }\n  \n  ${LineStyles}\n  ${ButtonStyles}\n\n`;\n\nexport default ({\n  count,\n  overlayColor,\n  isThemeDark,\n  isThemeLight,\n  callback,\n}: {\n  count: number;\n  overlayColor?: string;\n  isThemeDark?: boolean;\n  isThemeLight?: boolean;\n  callback: (arg: number) => void;\n}) =>\n  (() => {\n    const container = document.createElement('div');\n    const line = document.createElement('div');\n    let styles = STYLES_INDICATOR;\n\n    const buttons = Array.from({ length: count }).map((count, i) => {\n      const button = document.createElement('button');\n\n      button.classList.add(ELEMENT_SLIDE_INDICATOR_BUTTON_WRAPPER);\n      button.addEventListener('click', () => callback(i));\n      button.setAttribute('aria-label', `Slide ${i + 1}`);\n\n      return button;\n    });\n\n    const positionLine = (index: number) => {\n      const button = buttons[index];\n      const buttonSize = button.clientWidth;\n      const buttonPosition = button.offsetLeft;\n\n      line.style.width = `${buttonSize}px`;\n      line.style.left = `${buttonPosition}px`;\n    };\n    const sizeButtons = () => {\n      const maxWidth = 80;\n      const containerSize = container.clientWidth;\n      let buttonSize = containerSize / count;\n\n      if (buttonSize > maxWidth) buttonSize = maxWidth;\n\n      buttons.forEach((button) => {\n        button.style.width = `${buttonSize}px`;\n      });\n    };\n\n    const eventResize = () => {\n      sizeButtons();\n      positionLine(position);\n    };\n\n    const eventPosition = (index: number) => {\n      positionLine(index);\n      position = index;\n    };\n\n    const load = () => {\n      const reload = () => {\n        setTimeout(() => {\n          const isLoaded = container.clientWidth > 0;\n          if (!isLoaded) {\n            reload();\n          } else {\n            sizeButtons();\n            positionLine(position);\n            line.style.display = 'block';\n          }\n        }, 500);\n      };\n\n      line.style.display = 'none';\n      reload();\n    };\n\n    let position = 0;\n\n    line.classList.add(ELEMENT_SLIDE_INDICATOR_LINE);\n\n    container.classList.add(ELEMENT_SLIDE_INDICATOR_CONTAINER);\n    container.appendChild(line);\n    buttons.forEach((button) => {\n      const spacer = document.createElement('span');\n      const overlay = document.createElement('span');\n      let spacerColor: string = token.color.white;\n\n      if (isThemeDark && !overlayColor) {\n        spacerColor = token.color.black;\n      }\n\n      if (isThemeLight && !overlayColor) {\n        spacerColor = token.color.gray.lightest;\n      }\n\n      spacer.style.backgroundColor = spacerColor;\n      overlay.style.backgroundColor = spacerColor;\n\n      button.appendChild(overlay);\n      container.appendChild(button);\n      container.appendChild(spacer);\n    });\n\n    load();\n\n    window.addEventListener('resize', debounce(eventResize, 20));\n\n    return {\n      element: container,\n      className: ELEMENT_SLIDE_INDICATOR_CONTAINER,\n      styles,\n      position: eventPosition,\n    };\n  })();\n"],"names":["count"],"mappings":";;AAGA,MAAM,oCAAoC;AAC1C,MAAM,+BAA+B;AACrC,MAAM,yCAAyC;AAG/C,MAAM,aAAa;AAAA,KACd,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOT,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAMvC,MAAM,eAAe;AAAA,KAChB,sCAAsC;AAAA;AAAA;AAAA,wBAGnB,MAAM,MAAM,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,KAIzC,sCAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAOnB,MAAM,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA;AAKjD,MAAM,mBAAmB;AAAA,KACpB,iCAAiC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KASjC,iCAAiC;AAAA;AAAA,aAEzB,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMzB,UAAU;AAAA,IACV,YAAY;AAAA;AAAA;AAIhB,MAAA,YAAe,CAAC;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,OAOG,MAAM;AACL,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,OAAO,SAAS,cAAc,KAAK;AACzC,MAAI,SAAS;AAEb,QAAM,UAAU,MAAM,KAAK,EAAE,QAAQ,MAAA,CAAO,EAAE,IAAI,CAACA,QAAO,MAAM;AAC9D,UAAM,SAAS,SAAS,cAAc,QAAQ;AAE9C,WAAO,UAAU,IAAI,sCAAsC;AAC3D,WAAO,iBAAiB,SAAS,MAAM,SAAS,CAAC,CAAC;AAClD,WAAO,aAAa,cAAc,SAAS,IAAI,CAAC,EAAE;AAElD,WAAO;AAAA,EACT,CAAC;AAED,QAAM,eAAe,CAAC,UAAkB;AACtC,UAAM,SAAS,QAAQ,KAAK;AAC5B,UAAM,aAAa,OAAO;AAC1B,UAAM,iBAAiB,OAAO;AAE9B,SAAK,MAAM,QAAQ,GAAG,UAAU;AAChC,SAAK,MAAM,OAAO,GAAG,cAAc;AAAA,EACrC;AACA,QAAM,cAAc,MAAM;AACxB,UAAM,WAAW;AACjB,UAAM,gBAAgB,UAAU;AAChC,QAAI,aAAa,gBAAgB;AAEjC,QAAI,aAAa,SAAU,cAAa;AAExC,YAAQ,QAAQ,CAAC,WAAW;AAC1B,aAAO,MAAM,QAAQ,GAAG,UAAU;AAAA,IACpC,CAAC;AAAA,EACH;AAEA,QAAM,cAAc,MAAM;AACxB,gBAAA;AACA,iBAAa,QAAQ;AAAA,EACvB;AAEA,QAAM,gBAAgB,CAAC,UAAkB;AACvC,iBAAa,KAAK;AAClB,eAAW;AAAA,EACb;AAEA,QAAM,OAAO,MAAM;AACjB,UAAM,SAAS,MAAM;AACnB,iBAAW,MAAM;AACf,cAAM,WAAW,UAAU,cAAc;AACzC,YAAI,CAAC,UAAU;AACb,iBAAA;AAAA,QACF,OAAO;AACL,sBAAA;AACA,uBAAa,QAAQ;AACrB,eAAK,MAAM,UAAU;AAAA,QACvB;AAAA,MACF,GAAG,GAAG;AAAA,IACR;AAEA,SAAK,MAAM,UAAU;AACrB,WAAA;AAAA,EACF;AAEA,MAAI,WAAW;AAEf,OAAK,UAAU,IAAI,4BAA4B;AAE/C,YAAU,UAAU,IAAI,iCAAiC;AACzD,YAAU,YAAY,IAAI;AAC1B,UAAQ,QAAQ,CAAC,WAAW;AAC1B,UAAM,SAAS,SAAS,cAAc,MAAM;AAC5C,UAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,QAAI,cAAsB,MAAM,MAAM;AAEtC,QAAI,eAAe,CAAC,cAAc;AAChC,oBAAc,MAAM,MAAM;AAAA,IAC5B;AAEA,QAAI,gBAAgB,CAAC,cAAc;AACjC,oBAAc,MAAM,MAAM,KAAK;AAAA,IACjC;AAEA,WAAO,MAAM,kBAAkB;AAC/B,YAAQ,MAAM,kBAAkB;AAEhC,WAAO,YAAY,OAAO;AAC1B,cAAU,YAAY,MAAM;AAC5B,cAAU,YAAY,MAAM;AAAA,EAC9B,CAAC;AAED,OAAA;AAEA,SAAO,iBAAiB,UAAU,SAAS,aAAa,EAAE,CAAC;AAE3D,SAAO;AAAA,IACL,SAAS;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA,UAAU;AAAA,EAAA;AAEd,GAAA;"}

package/dist/atomic/animations/brand/card-stack.d.ts

@@ -8,8 +8,9 @@ declare const _default: (props: CardStackProps) => {
         loadAnimation: () => Promise<void>;
     };
     element: HTMLElement;
-    className: string;
     styles: string;
+    update?: (props: Partial<import('@universityofmaryland/web-builder-library').BuilderOptions>) => void;
+    destroy?: () => void;
 };
 export default _default;
 //# sourceMappingURL=card-stack.d.ts.map

package/dist/atomic/animations/brand/card-stack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card-stack.d.ts","sourceRoot":"","sources":["../../../../source/atomic/animations/brand/card-stack.ts"],"names":[],"mappings":"AAOA,UAAU,cAAc;IACtB,QAAQ,EAAE,gBAAgB,GAAG,gBAAgB,CAAC;IAC9C,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;CAC1B;yBA07Be,OAAO,cAAc;;;;;;;;AAArC,wBAoFE"}
+{"version":3,"file":"card-stack.d.ts","sourceRoot":"","sources":["../../../../source/atomic/animations/brand/card-stack.ts"],"names":[],"mappings":"AAOA,UAAU,cAAc;IACtB,QAAQ,EAAE,gBAAgB,GAAG,gBAAgB,CAAC;IAC9C,MAAM,EAAE,gBAAgB,EAAE,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;CAC1B;yBAy7Be,OAAO,cAAc;;;;;;;;;AAArC,wBAsFE"}

package/dist/atomic/animations/brand/card-stack.js

@@ -1,9 +1,12 @@
 "use strict";
-const token = require("@universityofmaryland/web-styles-library/token");
+const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
+const token = require("@universityofmaryland/web-token-library");
 const accessibility = require("@universityofmaryland/web-utilities-library/accessibility");
 const styles = require("@universityofmaryland/web-utilities-library/styles");
-const index = require("../../../model/elements/index.js");
 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");
@@ -14,17 +17,18 @@ require("@universityofmaryland/web-icons-library/arrows");
 require("../actions/indicator.js");
 require("./chevron-scroll.js");
 const background = require("../../assets/image/background.js");
+require("@universityofmaryland/web-styles-library");
 require("@universityofmaryland/web-utilities-library/performance");
 const toggle = require("../../assets/video/toggle.js");
 require("@universityofmaryland/web-icons-library/location");
 require("@universityofmaryland/web-icons-library/calendar");
+require("@universityofmaryland/web-utilities-library/theme");
 require("../../layout/block/stacked.js");
 require("../../layout/overlay/modal.js");
 require("../../layout/person/columns.js");
 require("@universityofmaryland/web-icons-library/social");
 require("../../text-lockup/date.js");
 require("../../text-lockup/small.js");
-require("@universityofmaryland/web-styles-library/typography");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -429,9 +433,9 @@ const waitForMediaLoad = async (container) => {
 const getConfigurationByCount = (count) => {
   return configuration.find((c) => c.count === count);
 };
-const getStackElementFromGridItem = (gridItem, index2) => {
+const getStackElementFromGridItem = (gridItem, index) => {
   return gridItem.querySelector(
-    `.${STACK_ELEMENT_CLASS}-${index2}`
+    `.${STACK_ELEMENT_CLASS}-${index}`
   );
 };
 const calculateCenterTransform = (element, centerElement, offset) => {
@@ -524,25 +528,16 @@ const applyElementTransforms = (element, itemConfig, featuredElement) => {
 };
 const processGridAnimation = (featuredElement, gridContainer, config) => {
   const gridItems = Array.from(gridContainer.children);
-  gridItems.forEach((gridItem, index2) => {
-    const element = getStackElementFromGridItem(gridItem, index2);
+  gridItems.forEach((gridItem, index) => {
+    const element = getStackElementFromGridItem(gridItem, index);
     if (!element) {
       return;
     }
-    const itemConfig = config.items[index2];
+    const itemConfig = config.items[index];
     applyElementTransforms(element, itemConfig, featuredElement);
   });
 };
 const createGridElement = (element, index$1, placement) => {
-  const children = [];
-  if (element.tagName === "IMG") {
-    children.push(
-      background({
-        element,
-        isScaled: true
-      })
-    );
-  }
   const rowStart = placement.row ? parseInt(placement.row.split(" / ")[0]) : 0;
   const getStartRange = (row) => {
     if (row >= 13) return -70;
@@ -560,106 +555,131 @@ const createGridElement = (element, index$1, placement) => {
   const endRange = getEndRange(rowStart);
   const animationRangeStart = `${startRange}vh`;
   const animationRangeEnd = `${endRange}vh`;
-  return index.createDiv({
-    className: `${STACK_ELEMENT_CLASS}-${index$1}`,
-    children,
-    elementStyles: {
-      element: {
-        overflow: "clip",
-        height: "100%",
-        width: "100%",
-        ...styles.withViewTimelineAnimation({
-          animation: `${KEY_FRAME_GRID_EXPAND} ease-in-out forwards`,
-          animationTimeline: "view()",
-          animationRangeStart,
-          animationRangeEnd,
-          animationDuration: "1ms"
-        })
-      }
+  const builder = new webBuilderLibrary.ElementBuilder().withClassName(`${STACK_ELEMENT_CLASS}-${index$1}`).withStyles({
+    element: {
+      overflow: "clip",
+      height: "100%",
+      width: "100%",
+      ...styles.withViewTimelineAnimation({
+        animation: `${KEY_FRAME_GRID_EXPAND} ease-in-out forwards`,
+        animationTimeline: "view()",
+        animationRangeStart,
+        animationRangeEnd,
+        animationDuration: "1ms"
+      })
     }
   });
+  if (element.tagName === "IMG") {
+    const backgroundImage = background({
+      element,
+      isScaled: true
+    });
+    builder.withChild(backgroundImage);
+  }
+  return builder.build();
 };
-const createGridItem = (element, placement, index$1) => {
+const createGridItem = (element, placement, index) => {
   const rowStart = placement.row ? parseInt(placement.row.split(" / ")[0]) : 0;
   const startRange = rowStart > 8 ? 0 : 80;
   const endRange = rowStart > 8 ? 200 : 200;
   const animationRangeStart = `${startRange}vh`;
   const animationRangeEnd = `${endRange}vh`;
-  return index.createDiv({
-    className: `${STACK_ITEM_CLASS}-${index$1}`,
-    children: [createGridElement(element, index$1, placement)],
-    elementStyles: {
-      element: {
-        gridColumn: placement.column,
-        gridRow: placement.row,
-        zIndex: placement.zIndex || 1,
-        width: "100%",
-        height: "100%",
-        [`@media (${token__namespace.media.queries.large.max})`]: {
-          [`@supports not (animation-timeline: scroll())`]: {
-            display: "none"
-          }
-        },
-        ...isDisplayWithoutAnimation && {
+  const gridElement = createGridElement(element, index, placement);
+  return new webBuilderLibrary.ElementBuilder().withClassName(`${STACK_ITEM_CLASS}-${index}`).withStyles({
+    element: {
+      gridColumn: placement.column,
+      gridRow: placement.row,
+      zIndex: placement.zIndex || 1,
+      width: "100%",
+      height: "100%",
+      [`@media (${token__namespace.media.queries.large.max})`]: {
+        [`@supports not (animation-timeline: scroll())`]: {
           display: "none"
-        },
-        ...styles.withViewTimelineAnimation({
-          animation: `${KEY_FRAME_GRID_ITEM} ease-in-out forwards`,
-          animationTimeline: "view()",
-          animationRangeStart,
-          animationRangeEnd
-        })
-      }
+        }
+      },
+      ...isDisplayWithoutAnimation && {
+        display: "none"
+      },
+      ...styles.withViewTimelineAnimation({
+        animation: `${KEY_FRAME_GRID_ITEM} ease-in-out forwards`,
+        animationTimeline: "view()",
+        animationRangeStart,
+        animationRangeEnd
+      })
     }
-  });
+  }).withChild(gridElement).build();
 };
 const createGrid = (props) => {
   const totalCount = props.images.length;
   const config = getConfigurationByCount(totalCount);
   if (!config) {
     console.warn(`No configuration found for ${totalCount} elements`);
-    return index.createDiv({
-      className: STACK_GRID_ERROR_CLASS
-    });
+    return new webBuilderLibrary.ElementBuilder().withClassName(STACK_GRID_ERROR_CLASS).build();
   }
-  const gridItems = props.images.map((element, index2) => {
-    const placement = config.items[index2];
-    return createGridItem(element, placement, index2);
+  const gridItems = props.images.map((element, index) => {
+    const placement = config.items[index];
+    return createGridItem(element, placement, index);
   });
-  return index.createDiv({
-    className: STACK_GRID_CLASS,
-    children: gridItems,
-    elementStyles: {
-      element: {
-        display: "grid",
-        gridTemplateColumns: "repeat(16, 1fr)",
-        gridTemplateRows: "repeat(16, 2vh)",
-        gap: token__namespace.spacing.min,
-        minHeight: "300px",
-        [`@media (${token__namespace.media.queries.large.max})`]: {
-          "@supports not (animation-timeline: scroll())": {
-            width: "100%"
-          }
-        },
+  const gridItemElements = gridItems.map((item) => item);
+  return new webBuilderLibrary.ElementBuilder().withClassName(STACK_GRID_CLASS).withStyles({
+    element: {
+      display: "grid",
+      gridTemplateColumns: "repeat(16, 1fr)",
+      gridTemplateRows: "repeat(16, 2vh)",
+      gap: token__namespace.spacing.min,
+      minHeight: "300px",
+      [`@media (${token__namespace.media.queries.large.max})`]: {
+        "@supports not (animation-timeline: scroll())": {
+          width: "100%"
+        }
+      },
+      ...styles.withViewTimelineAnimation({
+        gridTemplateColumns: config.layout.gridTemplateColumns,
+        gridTemplateRows: config.layout.gridTemplateRows,
+        transform: "translate(-50%, -25%)"
+      })
+    }
+  }).withChildren(...gridItemElements).build();
+};
+const createFeatured = (element, isExpand, totalCount) => {
+  let video;
+  const { width: widthPercentage, height: heightVh } = getResponsiveSizes();
+  const builder = new webBuilderLibrary.ElementBuilder().withClassName(`${STACK_ELEMENT_CLASS}-featured`).withStyles({
+    element: {
+      position: "absolute",
+      top: "20vh",
+      left: "50%",
+      transform: "translateX(-50%)",
+      zIndex: 999,
+      width: `${widthPercentage * 100}%`,
+      height: `${heightVh * 100}vh`,
+      ...isDisplayWithoutAnimation && {
+        top: "0"
+      },
+      [`@media (${token__namespace.media.queries.large.max})`]: {
+        "@supports not (animation-timeline: view())": {
+          width: "100% !important",
+          height: "100% !important",
+          top: "0"
+        }
+      },
+      ...isExpand && {
         ...styles.withViewTimelineAnimation({
-          gridTemplateColumns: config.layout.gridTemplateColumns,
-          gridTemplateRows: config.layout.gridTemplateRows,
-          transform: "translate(-50%, -25%)"
+          top: "30vh",
+          animation: `${KEY_FRAME_FEATURED_SIZE} ease-in-out forwards`,
+          animationTimeline: "view()",
+          animationRangeStart: `${100 + (totalCount - 4) * 10}vh`,
+          animationRangeEnd: "250vh"
         })
       }
     }
   });
-};
-const createFeatured = (element, isExpand, totalCount) => {
-  const children = [];
-  let video;
   if (element.tagName === "IMG") {
-    children.push(
-      background({
-        element,
-        isScaled: true
-      })
-    );
+    const backgroundImage = background({
+      element,
+      isScaled: true
+    });
+    builder.withChild(backgroundImage);
   }
   if (element.tagName === "VIDEO") {
     element.setAttribute("muted", "true");
@@ -669,49 +689,17 @@ const createFeatured = (element, isExpand, totalCount) => {
       video: element,
       isScaled: true
     });
-    children.push(video);
-  }
-  const { width: widthPercentage, height: heightVh } = getResponsiveSizes();
-  const featuredElement = index.createDiv({
-    className: `${STACK_ELEMENT_CLASS}-featured`,
-    children,
-    elementStyles: {
-      element: {
-        position: "absolute",
-        top: "20vh",
-        left: "50%",
-        transform: "translateX(-50%)",
-        zIndex: 999,
-        width: `${widthPercentage * 100}%`,
-        height: `${heightVh * 100}vh`,
-        ...isDisplayWithoutAnimation && {
-          top: "0"
-        },
-        [`@media (${token__namespace.media.queries.large.max})`]: {
-          "@supports not (animation-timeline: view())": {
-            width: "100% !important",
-            height: "100% !important",
-            top: "0"
-          }
-        },
-        ...isExpand && {
-          ...styles.withViewTimelineAnimation({
-            top: "30vh",
-            animation: `${KEY_FRAME_FEATURED_SIZE} ease-in-out forwards`,
-            animationTimeline: "view()",
-            animationRangeStart: `${100 + (totalCount - 4) * 10}vh`,
-            animationRangeEnd: "250vh"
-          })
-        }
-      }
+    if (video && video.element instanceof HTMLElement) {
+      builder.withChild(video);
     }
-  });
+  }
+  const featuredElement = builder.build();
   if (isExpand && featuredElement.element instanceof HTMLElement) {
     const observer = new IntersectionObserver(
       (entries) => {
         entries.forEach((entry) => {
           if (entry.isIntersecting) {
-            if (video) video.events.setPlay();
+            if (video?.events?.setPlay) video.events.setPlay();
             observer.disconnect();
           }
         });
@@ -726,53 +714,41 @@ const createFeatured = (element, isExpand, totalCount) => {
   return featuredElement;
 };
 const createSticky = (props) => {
-  const wrapper = index.createDiv({
-    className: `${STACK_CONTAINER_CLASS}-sticky-wrapper`,
-    children: [
-      createGrid(props),
-      createFeatured(
-        props.featured,
-        props.isExpandFeature,
-        props.images.length
-      )
-    ],
-    elementStyles: {
-      element: {
-        position: "relative",
-        ...styles.withViewTimelineAnimation({
-          position: "sticky",
-          top: 0
-        })
-      }
+  const grid = createGrid(props);
+  const featured = createFeatured(
+    props.featured,
+    props.isExpandFeature,
+    props.images.length
+  );
+  const wrapper = new webBuilderLibrary.ElementBuilder().withClassName(`${STACK_CONTAINER_CLASS}-sticky-wrapper`).withStyles({
+    element: {
+      position: "relative",
+      ...styles.withViewTimelineAnimation({
+        position: "sticky",
+        top: 0
+      })
     }
-  });
-  return index.createDiv({
-    className: `${STACK_CONTAINER_CLASS}-sticky`,
-    children: [wrapper],
-    elementStyles: {
-      element: {
-        ...styles.withViewTimelineAnimation({
-          height: "200vh",
-          ...props.isExpandFeature && {
-            height: "250vh"
-          }
-        })
-      }
+  }).withChildren(grid, featured).build();
+  return new webBuilderLibrary.ElementBuilder().withClassName(`${STACK_CONTAINER_CLASS}-sticky`).withStyles({
+    element: {
+      ...styles.withViewTimelineAnimation({
+        height: "200vh",
+        ...props.isExpandFeature && {
+          height: "250vh"
+        }
+      })
     }
-  });
+  }).withChild(wrapper).build();
 };
 const cardStack = (props) => {
-  const composite = index.createDiv({
-    className: STACK_CONTAINER_CLASS,
-    children: [createSticky(props)],
-    elementStyles: {
-      element: {
-        containerType: "inline-size",
-        opacity: "0",
-        overflow: "clip"
-      }
+  const sticky = createSticky(props);
+  const composite = new webBuilderLibrary.ElementBuilder().withClassName(STACK_CONTAINER_CLASS).withStyles({
+    element: {
+      containerType: "inline-size",
+      opacity: "0",
+      overflow: "clip"
     }
-  });
+  }).withChild(sticky).build();
   const loadAnimation = async () => {
     const totalCount = props.images.length;
     const config = getConfigurationByCount(totalCount);