@universityofmaryland/web-elements-library 1.5.9 → 1.6.0-beta.1

package/dist/composite/carousel/cards/index.js

@@ -1,10 +1,9 @@
-"use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-const styles = require("@universityofmaryland/web-utilities-library/styles");
-const blocks = require("../elements/blocks.js");
-require("../elements/full-screen.js");
-require("../elements/overlay.js");
-require("../elements/image.js");
+import { token, typography, element, layout } from "@universityofmaryland/web-styles-library";
+import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
+import { createCompositeCarouselBlocks } from "../elements/blocks.js";
+import "../elements/full-screen.js";
+import "../elements/overlay.js";
+import "../elements/image.js";
 const MEDIUM = 768;
 const LARGE = 1024;
 const BACKGROUND_TEXTURE = `<svg aria-hidden="true" width="1599" height="618" viewBox="0 0 1599 618" fill="none" xmlns="http://www.w3.org/2000/svg"
@@ -18,9 +17,9 @@ const INTRO_CONTAINER_LOCK = "carousel-cards-intro-container-lock";
 const INTRO_CONTAINER_HEADLINE = "carousel-cards-intro-container-headline";
 const INTRO_CONTAINER_TEXT = "carousel-cards-intro-container-text";
 const INTRO_CONTAINER_CTA = "carousel-cards-intro-container-cta";
-const OVERWRITE_ANIMATION_CAROUSEL_DECLARATION = `.${CAROUSEL_CONTAINER} .${blocks.Elements.declaration}`;
-const OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${blocks.Elements.container}`;
-const OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${blocks.Elements.button}`;
+const OVERWRITE_ANIMATION_CAROUSEL_DECLARATION = `.${CAROUSEL_CONTAINER} .${createCompositeCarouselBlocks.Elements.declaration}`;
+const OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${createCompositeCarouselBlocks.Elements.container}`;
+const OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${createCompositeCarouselBlocks.Elements.button}`;
 const OverwriteCarouselStyles = `
   @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
     ${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {
@@ -72,62 +71,62 @@ const OverwriteCarouselStyles = `
   }
 `;
 const HeadlineStyles = `
-  ${styles.jssToCSS({
+  ${jssToCSS({
   styleObj: {
-    [`.${INTRO_CONTAINER_HEADLINE}`]: Styles.typography.sans.largest
+    [`.${INTRO_CONTAINER_HEADLINE}`]: typography.sans.largest
   }
 })}
 
-  ${styles.jssToCSS({
+  ${jssToCSS({
   styleObj: {
-    [`.${INTRO_CONTAINER_HEADLINE} *`]: Styles.typography.sans.largest
+    [`.${INTRO_CONTAINER_HEADLINE} *`]: typography.sans.largest
   }
 })}
 
   .${INTRO_CONTAINER_HEADLINE},
   .${INTRO_CONTAINER_HEADLINE} * {
-    color: ${Styles.token.color.white};
+    color: ${token.color.white};
     font-weight: 800;
     text-transform: uppercase;
   }
 `;
 const TextStyles = `
   * + .${INTRO_CONTAINER_TEXT} {
-    margin-top: ${Styles.token.spacing.md};
+    margin-top: ${token.spacing.md};
   }
 
-  ${styles.jssToCSS({
+  ${jssToCSS({
   styleObj: {
-    [`.${INTRO_CONTAINER_TEXT}`]: Styles.element.text.rich.advancedDark
+    [`.${INTRO_CONTAINER_TEXT}`]: element.text.rich.advancedDark
   }
 })}
 
-  ${styles.jssToCSS({
+  ${jssToCSS({
   styleObj: {
-    [`.${INTRO_CONTAINER_TEXT}`]: Styles.typography.sans.medium
+    [`.${INTRO_CONTAINER_TEXT}`]: typography.sans.medium
   }
 })}
 `;
 const ActionStyles = `
   * + .${INTRO_CONTAINER_CTA} {
-    margin-top: ${Styles.token.spacing.md};
+    margin-top: ${token.spacing.md};
   }
 
   .${INTRO_CONTAINER_CTA} a {
-    color: ${Styles.token.color.white};
+    color: ${token.color.white};
   }
 `;
 const IntroContainer = `
   @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
     .${INTRO_CONTAINER} {
-      margin-bottom: ${Styles.token.spacing.md};
+      margin-bottom: ${token.spacing.md};
     }
   }
 
   @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
     .${INTRO_CONTAINER} {
-      width: calc(40% - ${Styles.token.spacing["2xl"]});
-      padding-right: ${Styles.token.spacing["2xl"]};
+      width: calc(40% - ${token.spacing["2xl"]});
+      padding-right: ${token.spacing["2xl"]};
     }
   }
 
@@ -141,8 +140,8 @@ const IntroContainer = `
 const ContainerLock = `
   .${CAROUSEL_LOCK} {
     position: relative;
-    ${styles.jssToCSS({
-  styleObj: Styles.layout.space.horizontal.larger
+    ${jssToCSS({
+  styleObj: layout.space.horizontal.larger
 })}
   }
 
@@ -174,8 +173,8 @@ const ContainerStyles = `
   }
 
   .${CAROUSEL_CONTAINER} {
-    background-color: ${Styles.token.color.black};
-    padding: ${Styles.token.spacing["3xl"]} 0;
+    background-color: ${token.color.black};
+    padding: ${token.spacing["3xl"]} 0;
     position: relative;
     overflow: clip;
   }
@@ -188,13 +187,13 @@ const ContainerStyles = `
 
   @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {
     .${CAROUSEL_CONTAINER} {
-      padding: ${Styles.token.spacing["4xl"]} 0;
+      padding: ${token.spacing["4xl"]} 0;
     }
   }
 
   @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
     .${CAROUSEL_CONTAINER} {
-      padding: ${Styles.token.spacing["max"]} 0;
+      padding: ${token.spacing["max"]} 0;
     }
   }
 
@@ -224,10 +223,10 @@ const STYLES_CAROUSEL_CARDS_ELEMENT = `
   }
 
   .${ELEMENT_DECLARATION} * {
-    color: ${Styles.token.color.white};
+    color: ${token.color.white};
   }
   
-  ${blocks.Styles}
+  ${createCompositeCarouselBlocks.Styles}
   ${ContainerStyles}
   ${ContainerLock}
   ${HeadlineStyles}
@@ -257,14 +256,14 @@ const CreateIntro = (props) => {
   introContainer.appendChild(introWrapper);
   return introContainer;
 };
-const index = (props) => (() => {
+const createCompositeCarouselCards = (props) => (() => {
   const { slide, shadowRef } = props;
   const declaration = document.createElement("div");
   const container = document.createElement("div");
   const wrapper = document.createElement("div");
-  if (slide) slide.style.minHeight = "450px";
-  if (shadowRef) shadowRef.style.minHeight = "450px";
-  const carouselContainer = blocks.CreateElement({
+  if (slide) slide.style.minHeight = "360px";
+  if (shadowRef) shadowRef.style.minHeight = "360px";
+  const carouselContainer = createCompositeCarouselBlocks.CreateElement({
     ...props,
     blocks: props.cards,
     overwriteDisplayLogic: {
@@ -297,5 +296,7 @@ const index = (props) => (() => {
     }
   };
 })();
-module.exports = index;
+export {
+  createCompositeCarouselCards
+};
 //# sourceMappingURL=index.js.map

package/dist/composite/carousel/cards/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../source/composite/carousel/cards/index.ts"],"sourcesContent":["import {\n  element,\n  layout,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselCardsRequirements = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  slide: HTMLElement;\n  shadowRef?: HTMLElement;\n  cards: HTMLElement[];\n};\n\nconst MEDIUM = 768;\nconst LARGE = 1024;\n\nconst BACKGROUND_TEXTURE = `<svg aria-hidden=\"true\" width=\"1599\" height=\"618\" viewBox=\"0 0 1599 618\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n\"><mask id=\"mask0_2135_11278\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"1600\" height=\"618\"><rect width=\"1600\" height=\"618\" fill=\"#242424\"></rect></mask><g mask=\"url(#mask0_2135_11278)\"><g opacity=\"0.5\"><mask id=\"mask1_2135_11278\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"-17\" y=\"-56\" width=\"1823\" height=\"408\"><path d=\"M-17 351.98V-56H1806V351.98\" fill=\"white\"></path></mask><g mask=\"url(#mask1_2135_11278)\"><path d=\"M807.562 -68.3515L-433.759 1173.58L-217.501 1389.94L1023.82 148.012L807.562 -68.3515Z\" fill=\"#262626\"></path><path d=\"M360.649 -82.8017L-880.672 1159.13L-649.997 1389.92L591.324 147.986L360.649 -82.8017Z\" fill=\"black\"></path><path d=\"M1154.8 1173.26L-533.139 -515.499L-677.311 -371.256L1010.63 1317.51L1154.8 1173.26Z\" fill=\"#262626\"></path><path d=\"M2162.77 710.525L1312.18 -140.478L1168.01 3.76505L2018.6 854.768L2162.77 710.525Z\" fill=\"black\"></path><path d=\"M1312.16 -140.485L202.096 -1251.09L57.9241 -1106.85L1167.99 3.75794L1312.16 -140.485Z\" fill=\"#EDEDED\"></path><path d=\"M2133.89 -1251.07L1023.83 -140.458L1168 3.78455L2278.07 -1106.83L2133.89 -1251.07Z\" fill=\"#383838\"></path><path d=\"M591.343 147.968L-634.061 -1078.04L-864.736 -847.248L360.668 378.756L591.343 147.968Z\" fill=\"black\"></path><path d=\"M1023.82 147.97L-217.503 -1093.96L-433.761 -877.595L807.559 364.333L1023.82 147.97Z\" fill=\"#383838\"></path></g><mask id=\"mask2_2135_11278\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"-17\" y=\"351\" width=\"1823\" height=\"780\"><path d=\"M-17 351.938V753.629L837.67 753.672L845.662 1130.18L1806 1130.26V352.094\" fill=\"white\"></path></mask><g mask=\"url(#mask2_2135_11278)\"><path d=\"M1023.81 555.952L-217.506 -685.977L-433.764 -469.613L807.557 772.316L1023.81 555.952Z\" fill=\"#262626\"></path><path d=\"M591.347 555.967L-649.973 -685.962L-880.648 -455.174L360.672 786.755L591.347 555.967Z\" fill=\"black\"></path><path d=\"M1010.63 -613.543L-677.305 1075.22L-533.133 1219.46L1154.8 -469.3L1010.63 -613.543Z\" fill=\"#262626\"></path><path d=\"M1760.63 110.929L910.039 961.932L1054.21 1106.17L1904.8 255.172L1760.63 110.929Z\" fill=\"black\"></path><path d=\"M360.674 325.168L-864.73 1551.17L-634.055 1781.96L591.349 555.956L360.674 325.168Z\" fill=\"black\"></path><path d=\"M807.565 339.631L-433.756 1581.56L-217.498 1797.92L1023.82 555.995L807.565 339.631Z\" fill=\"#383838\"></path></g></g></g></svg>`;\n\nconst ELEMENT_NAME = 'umd-element-carousel-cards';\n\nconst ELEMENT_DECLARATION = 'carousel-cards-declaration';\nconst CAROUSEL_CONTAINER = 'element-carousel-container';\nconst CAROUSEL_LOCK = 'element-carousel-lock';\n\nconst INTRO_CONTAINER = 'carousel-cards-intro-container';\nconst INTRO_CONTAINER_LOCK = 'carousel-cards-intro-container-lock';\nconst INTRO_CONTAINER_HEADLINE = 'carousel-cards-intro-container-headline';\nconst INTRO_CONTAINER_TEXT = 'carousel-cards-intro-container-text';\nconst INTRO_CONTAINER_CTA = 'carousel-cards-intro-container-cta';\n\nconst OVERWRITE_ANIMATION_CAROUSEL_DECLARATION = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.declaration}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.container}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.button}`;\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {\n      padding-bottom: 60px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_DECLARATION} {\n      width: 60%;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n      bottom: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n      top: 50%;\n      transform: translateY(-50%);\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n      left: 49px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n      right: -52px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n      left: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n      left: -52px;\n    }\n  }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE}`]: typography.sans.largest,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE} *`]: typography.sans.largest,\n    },\n  })}\n\n  .${INTRO_CONTAINER_HEADLINE},\n  .${INTRO_CONTAINER_HEADLINE} * {\n    color: ${token.color.white};\n    font-weight: 800;\n    text-transform: uppercase;\n  }\n`;\n\n// prettier-ignore\nconst TextStyles = `\n  * + .${INTRO_CONTAINER_TEXT} {\n    margin-top: ${token.spacing.md};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: element.text.rich.advancedDark,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: typography.sans.medium,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst ActionStyles = `\n  * + .${INTRO_CONTAINER_CTA} {\n    margin-top: ${token.spacing.md};\n  }\n\n  .${INTRO_CONTAINER_CTA} a {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst IntroContainer = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${INTRO_CONTAINER} {\n      margin-bottom: ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${INTRO_CONTAINER} {\n      width: calc(40% - ${token.spacing['2xl']});\n      padding-right: ${token.spacing['2xl']};\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    .${INTRO_CONTAINER} .${INTRO_CONTAINER_LOCK} {\n      max-width: inherit;\n      padding: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ContainerLock = `\n  .${CAROUSEL_LOCK} {\n    position: relative;\n    ${jssToCSS({\n      styleObj: layout.space.horizontal.larger,\n    })}\n  }\n\n  @media (max-width: ${MEDIUM - 1}px) {\n    .${CAROUSEL_LOCK} {\n      padding-right: 0;\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    .${CAROUSEL_LOCK} {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n  }\n\n  @media umd-carousel-card (max-width: ${LARGE - 1}px) {\n    .${CAROUSEL_LOCK} {\n      max-width: inherit;\n      padding: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ContainerStyles = `\n  @keyframes card-carousel-slide-in {\n    from { transform: translateX(-25vw); }\n    to { transform: translateX(0);}\n  }\n\n  .${CAROUSEL_CONTAINER} {\n    background-color: ${token.color.black};\n    padding: ${token.spacing['3xl']} 0;\n    position: relative;\n    overflow: clip;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: 300px) {\n    .${CAROUSEL_CONTAINER} {\n      display: none;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${CAROUSEL_CONTAINER} {\n      padding: ${token.spacing['4xl']} 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${CAROUSEL_CONTAINER} {\n      padding: ${token.spacing['max']} 0;\n    }\n  }\n\n  .${CAROUSEL_CONTAINER} > svg {\n    width: auto;\n    height: 100%;\n    object-fit: cover;\n    position: absolute;\n    top: 0;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${CAROUSEL_CONTAINER} > svg {\n        animation: card-carousel-slide-in ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: 0;\n        animation-range-end: 100vh;\n        transform: translateX(-15vw);\n      }\n    }\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_CARDS_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_DECLARATION} * {\n    color: ${token.color.white};\n  }\n  \n  ${carouselElements.blocks.Styles}\n  ${ContainerStyles}\n  ${ContainerLock}\n  ${HeadlineStyles}\n  ${TextStyles}\n  ${ActionStyles}\n  ${IntroContainer}\n  ${OverwriteCarouselStyles}\n`;\n\nconst CreateIntro = (props: TypeCarouselCardsRequirements) => {\n  const { headline, text, actions } = props;\n  const introContainer = document.createElement('div');\n  const introWrapper = document.createElement('div');\n\n  introWrapper.classList.add(INTRO_CONTAINER_LOCK);\n\n  if (headline) {\n    headline.classList.add(INTRO_CONTAINER_HEADLINE);\n    introWrapper.appendChild(headline);\n  }\n\n  if (text) {\n    text.classList.add(INTRO_CONTAINER_TEXT);\n    introWrapper.appendChild(text);\n  }\n\n  if (actions) {\n    actions.classList.add(INTRO_CONTAINER_CTA);\n    introWrapper.appendChild(actions);\n  }\n\n  introContainer.classList.add(INTRO_CONTAINER);\n  introContainer.appendChild(introWrapper);\n\n  return introContainer;\n};\n\nexport default (props: TypeCarouselCardsRequirements) =>\n  (() => {\n    const { slide, shadowRef } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n\n    if (slide) slide.style.minHeight = '450px';\n    if (shadowRef) shadowRef.style.minHeight = '450px';\n\n    const carouselContainer = carouselElements.blocks.CreateElement({\n      ...props,\n      blocks: props.cards,\n      overwriteDisplayLogic: {\n        mobileBreakpoint: 650,\n        tabletBreakpoint: 1024,\n        desktopBreakpoint: 1024,\n        mobileCount: 1,\n        tabletCount: 2,\n        desktopCount: 2,\n        maxCount: 2,\n        showMobileHint: true,\n        showHint: false,\n      },\n    });\n    const introContainer = CreateIntro(props);\n\n    wrapper.classList.add(CAROUSEL_LOCK);\n    wrapper.appendChild(introContainer);\n    wrapper.appendChild(carouselContainer.element);\n\n    container.classList.add(CAROUSEL_CONTAINER);\n    container.innerHTML = BACKGROUND_TEXTURE;\n    container.appendChild(wrapper);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    return {\n      element: declaration,\n      styles: STYLES_CAROUSEL_CARDS_ELEMENT,\n      events: {\n        resize: carouselContainer.events.resize,\n        load: carouselContainer.events.load,\n      },\n    };\n  })();\n"],"names":["carouselElements.blocks","jssToCSS","typography","token","element","layout"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../source/composite/carousel/cards/index.ts"],"sourcesContent":["import {\n  element,\n  layout,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselCardsRequirements = {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  slide: HTMLElement;\n  shadowRef?: HTMLElement;\n  cards: HTMLElement[];\n};\n\nconst MEDIUM = 768;\nconst LARGE = 1024;\n\nconst BACKGROUND_TEXTURE = `<svg aria-hidden=\"true\" width=\"1599\" height=\"618\" viewBox=\"0 0 1599 618\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\n\"><mask id=\"mask0_2135_11278\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"0\" y=\"0\" width=\"1600\" height=\"618\"><rect width=\"1600\" height=\"618\" fill=\"#242424\"></rect></mask><g mask=\"url(#mask0_2135_11278)\"><g opacity=\"0.5\"><mask id=\"mask1_2135_11278\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"-17\" y=\"-56\" width=\"1823\" height=\"408\"><path d=\"M-17 351.98V-56H1806V351.98\" fill=\"white\"></path></mask><g mask=\"url(#mask1_2135_11278)\"><path d=\"M807.562 -68.3515L-433.759 1173.58L-217.501 1389.94L1023.82 148.012L807.562 -68.3515Z\" fill=\"#262626\"></path><path d=\"M360.649 -82.8017L-880.672 1159.13L-649.997 1389.92L591.324 147.986L360.649 -82.8017Z\" fill=\"black\"></path><path d=\"M1154.8 1173.26L-533.139 -515.499L-677.311 -371.256L1010.63 1317.51L1154.8 1173.26Z\" fill=\"#262626\"></path><path d=\"M2162.77 710.525L1312.18 -140.478L1168.01 3.76505L2018.6 854.768L2162.77 710.525Z\" fill=\"black\"></path><path d=\"M1312.16 -140.485L202.096 -1251.09L57.9241 -1106.85L1167.99 3.75794L1312.16 -140.485Z\" fill=\"#EDEDED\"></path><path d=\"M2133.89 -1251.07L1023.83 -140.458L1168 3.78455L2278.07 -1106.83L2133.89 -1251.07Z\" fill=\"#383838\"></path><path d=\"M591.343 147.968L-634.061 -1078.04L-864.736 -847.248L360.668 378.756L591.343 147.968Z\" fill=\"black\"></path><path d=\"M1023.82 147.97L-217.503 -1093.96L-433.761 -877.595L807.559 364.333L1023.82 147.97Z\" fill=\"#383838\"></path></g><mask id=\"mask2_2135_11278\" style=\"mask-type:luminance\" maskUnits=\"userSpaceOnUse\" x=\"-17\" y=\"351\" width=\"1823\" height=\"780\"><path d=\"M-17 351.938V753.629L837.67 753.672L845.662 1130.18L1806 1130.26V352.094\" fill=\"white\"></path></mask><g mask=\"url(#mask2_2135_11278)\"><path d=\"M1023.81 555.952L-217.506 -685.977L-433.764 -469.613L807.557 772.316L1023.81 555.952Z\" fill=\"#262626\"></path><path d=\"M591.347 555.967L-649.973 -685.962L-880.648 -455.174L360.672 786.755L591.347 555.967Z\" fill=\"black\"></path><path d=\"M1010.63 -613.543L-677.305 1075.22L-533.133 1219.46L1154.8 -469.3L1010.63 -613.543Z\" fill=\"#262626\"></path><path d=\"M1760.63 110.929L910.039 961.932L1054.21 1106.17L1904.8 255.172L1760.63 110.929Z\" fill=\"black\"></path><path d=\"M360.674 325.168L-864.73 1551.17L-634.055 1781.96L591.349 555.956L360.674 325.168Z\" fill=\"black\"></path><path d=\"M807.565 339.631L-433.756 1581.56L-217.498 1797.92L1023.82 555.995L807.565 339.631Z\" fill=\"#383838\"></path></g></g></g></svg>`;\n\nconst ELEMENT_NAME = 'umd-element-carousel-cards';\n\nconst ELEMENT_DECLARATION = 'carousel-cards-declaration';\nconst CAROUSEL_CONTAINER = 'element-carousel-container';\nconst CAROUSEL_LOCK = 'element-carousel-lock';\n\nconst INTRO_CONTAINER = 'carousel-cards-intro-container';\nconst INTRO_CONTAINER_LOCK = 'carousel-cards-intro-container-lock';\nconst INTRO_CONTAINER_HEADLINE = 'carousel-cards-intro-container-headline';\nconst INTRO_CONTAINER_TEXT = 'carousel-cards-intro-container-text';\nconst INTRO_CONTAINER_CTA = 'carousel-cards-intro-container-cta';\n\nconst OVERWRITE_ANIMATION_CAROUSEL_DECLARATION = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.declaration}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.container}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.button}`;\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {\n      padding-bottom: 60px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_DECLARATION} {\n      width: 60%;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n      bottom: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n      top: 50%;\n      transform: translateY(-50%);\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n      left: 49px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {\n      right: -52px;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n      left: 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {\n      left: -52px;\n    }\n  }\n`;\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE}`]: typography.sans.largest,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE} *`]: typography.sans.largest,\n    },\n  })}\n\n  .${INTRO_CONTAINER_HEADLINE},\n  .${INTRO_CONTAINER_HEADLINE} * {\n    color: ${token.color.white};\n    font-weight: 800;\n    text-transform: uppercase;\n  }\n`;\n\n// prettier-ignore\nconst TextStyles = `\n  * + .${INTRO_CONTAINER_TEXT} {\n    margin-top: ${token.spacing.md};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: element.text.rich.advancedDark,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: typography.sans.medium,\n    },\n  })}\n`;\n\n// prettier-ignore\nconst ActionStyles = `\n  * + .${INTRO_CONTAINER_CTA} {\n    margin-top: ${token.spacing.md};\n  }\n\n  .${INTRO_CONTAINER_CTA} a {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst IntroContainer = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${INTRO_CONTAINER} {\n      margin-bottom: ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${INTRO_CONTAINER} {\n      width: calc(40% - ${token.spacing['2xl']});\n      padding-right: ${token.spacing['2xl']};\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    .${INTRO_CONTAINER} .${INTRO_CONTAINER_LOCK} {\n      max-width: inherit;\n      padding: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ContainerLock = `\n  .${CAROUSEL_LOCK} {\n    position: relative;\n    ${jssToCSS({\n      styleObj: layout.space.horizontal.larger,\n    })}\n  }\n\n  @media (max-width: ${MEDIUM - 1}px) {\n    .${CAROUSEL_LOCK} {\n      padding-right: 0;\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    .${CAROUSEL_LOCK} {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n    }\n  }\n\n  @media umd-carousel-card (max-width: ${LARGE - 1}px) {\n    .${CAROUSEL_LOCK} {\n      max-width: inherit;\n      padding: 0;\n    }\n  }\n`;\n\n// prettier-ignore\nconst ContainerStyles = `\n  @keyframes card-carousel-slide-in {\n    from { transform: translateX(-25vw); }\n    to { transform: translateX(0);}\n  }\n\n  .${CAROUSEL_CONTAINER} {\n    background-color: ${token.color.black};\n    padding: ${token.spacing['3xl']} 0;\n    position: relative;\n    overflow: clip;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: 300px) {\n    .${CAROUSEL_CONTAINER} {\n      display: none;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {\n    .${CAROUSEL_CONTAINER} {\n      padding: ${token.spacing['4xl']} 0;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${CAROUSEL_CONTAINER} {\n      padding: ${token.spacing['max']} 0;\n    }\n  }\n\n  .${CAROUSEL_CONTAINER} > svg {\n    width: auto;\n    height: 100%;\n    object-fit: cover;\n    position: absolute;\n    top: 0;\n  }\n\n  @media (prefers-reduced-motion: no-preference) {\n    @supports (animation-timeline: scroll()) {\n      .${CAROUSEL_CONTAINER} > svg {\n        animation: card-carousel-slide-in ease-in-out forwards;\n        animation-timeline: view();\n        animation-range-start: 0;\n        animation-range-end: 100vh;\n        transform: translateX(-15vw);\n      }\n    }\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_CARDS_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_DECLARATION} * {\n    color: ${token.color.white};\n  }\n  \n  ${carouselElements.blocks.Styles}\n  ${ContainerStyles}\n  ${ContainerLock}\n  ${HeadlineStyles}\n  ${TextStyles}\n  ${ActionStyles}\n  ${IntroContainer}\n  ${OverwriteCarouselStyles}\n`;\n\nconst CreateIntro = (props: TypeCarouselCardsRequirements) => {\n  const { headline, text, actions } = props;\n  const introContainer = document.createElement('div');\n  const introWrapper = document.createElement('div');\n\n  introWrapper.classList.add(INTRO_CONTAINER_LOCK);\n\n  if (headline) {\n    headline.classList.add(INTRO_CONTAINER_HEADLINE);\n    introWrapper.appendChild(headline);\n  }\n\n  if (text) {\n    text.classList.add(INTRO_CONTAINER_TEXT);\n    introWrapper.appendChild(text);\n  }\n\n  if (actions) {\n    actions.classList.add(INTRO_CONTAINER_CTA);\n    introWrapper.appendChild(actions);\n  }\n\n  introContainer.classList.add(INTRO_CONTAINER);\n  introContainer.appendChild(introWrapper);\n\n  return introContainer;\n};\n\nexport const createCompositeCarouselCards = (props: TypeCarouselCardsRequirements) =>\n  (() => {\n    const { slide, shadowRef } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n\n    if (slide) slide.style.minHeight = '360px';\n    if (shadowRef) shadowRef.style.minHeight = '360px';\n\n    const carouselContainer = carouselElements.blocks.CreateElement({\n      ...props,\n      blocks: props.cards,\n      overwriteDisplayLogic: {\n        mobileBreakpoint: 650,\n        tabletBreakpoint: 1024,\n        desktopBreakpoint: 1024,\n        mobileCount: 1,\n        tabletCount: 2,\n        desktopCount: 2,\n        maxCount: 2,\n        showMobileHint: true,\n        showHint: false,\n      },\n    });\n    const introContainer = CreateIntro(props);\n\n    wrapper.classList.add(CAROUSEL_LOCK);\n    wrapper.appendChild(introContainer);\n    wrapper.appendChild(carouselContainer.element);\n\n    container.classList.add(CAROUSEL_CONTAINER);\n    container.innerHTML = BACKGROUND_TEXTURE;\n    container.appendChild(wrapper);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    return {\n      element: declaration,\n      styles: STYLES_CAROUSEL_CARDS_ELEMENT,\n      events: {\n        resize: carouselContainer.events.resize,\n        load: carouselContainer.events.load,\n      },\n    };\n  })();\n"],"names":["carouselElements.blocks"],"mappings":"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"}

package/dist/composite/carousel/default/index.d.ts

@@ -16,7 +16,7 @@ type TypeCarouselRequirements = {
     desktopCount?: number | null;
     maxCount?: number | null;
 };
-declare const _default: (props: TypeCarouselRequirements) => {
+export declare const createCompositeCarouselDefault: (props: TypeCarouselRequirements) => {
     element: HTMLDivElement;
     styles: string;
     events: {
@@ -24,5 +24,5 @@ declare const _default: (props: TypeCarouselRequirements) => {
         load: () => void;
     };
 };
-export default _default;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/carousel/default/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/default/index.ts"],"names":[],"mappings":"AAGA,KAAK,wBAAwB,GAAG;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,CAAC;yBAuGc,OAAO,wBAAwB;;;;;;;;AAA/C,wBA+DO"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/default/index.ts"],"names":[],"mappings":"AAGA,KAAK,wBAAwB,GAAG;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,CAAC;AAuGF,eAAO,MAAM,8BAA8B,GAAI,OAAO,wBAAwB;;;;;;;CA+DxE,CAAC"}

package/dist/composite/carousel/default/index.js

@@ -1,49 +1,31 @@
-"use strict";
-const token = require("@universityofmaryland/web-token-library");
-const blocks = require("../elements/blocks.js");
-require("../elements/full-screen.js");
-require("../elements/overlay.js");
-require("../elements/image.js");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+import * as token from "@universityofmaryland/web-token-library";
+import { createCompositeCarouselBlocks } from "../elements/blocks.js";
+import "../elements/full-screen.js";
+import "../elements/overlay.js";
+import "../elements/image.js";
 const ATTRIBUTE_THEME = "data-theme";
 const THEME_DARK = "dark";
 const IS_THEME_DARK = `[${ATTRIBUTE_THEME}="${THEME_DARK}"]`;
 const ELEMENT_NAME = "umd-element-carousel";
 const ELEMENT_DECLARATION = "carousel-default-declaration";
 const CAROUSEL_CONTAINER = "element-carousel-default-container";
-const OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${blocks.Elements.container}`;
-const OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${blocks.Elements.button}`;
-const OVERWRITE_ANIMATION_BUTTON_PREVIOUS = `.${CAROUSEL_CONTAINER} .${blocks.Elements.previousButton}`;
-const OVERWRITE_ANIMATION_BUTTON_NEXT = `.${CAROUSEL_CONTAINER} .${blocks.Elements.nextButton}`;
+const OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${createCompositeCarouselBlocks.Elements.container}`;
+const OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${createCompositeCarouselBlocks.Elements.button}`;
+const OVERWRITE_ANIMATION_BUTTON_PREVIOUS = `.${CAROUSEL_CONTAINER} .${createCompositeCarouselBlocks.Elements.previousButton}`;
+const OVERWRITE_ANIMATION_BUTTON_NEXT = `.${CAROUSEL_CONTAINER} .${createCompositeCarouselBlocks.Elements.nextButton}`;
 const OVERWRITE_THEME_DARK_CONTAINER = `.${CAROUSEL_CONTAINER}${IS_THEME_DARK}`;
-const OVERWRITE_THEME_DARK_BUTTON = `${OVERWRITE_THEME_DARK_CONTAINER} .${blocks.Elements.button}`;
-const OVERWRITE_SINGLE_COLUMN = `.${CAROUSEL_CONTAINER} ${blocks.Elements.containerSingleBlock}`;
-const OVERWRITE_SINGLE_COLUMN_BUTTONS = `${OVERWRITE_SINGLE_COLUMN} .${blocks.Elements.button}`;
-const OVERWRITE_SINGLE_COLUMN_PREVIOUS = `${OVERWRITE_SINGLE_COLUMN} .${blocks.Elements.previousButton}`;
-const OVERWRITE_SINGLE_COLUMN_NEXT = `${OVERWRITE_SINGLE_COLUMN} .${blocks.Elements.nextButton}`;
+const OVERWRITE_THEME_DARK_BUTTON = `${OVERWRITE_THEME_DARK_CONTAINER} .${createCompositeCarouselBlocks.Elements.button}`;
+const OVERWRITE_SINGLE_COLUMN = `.${CAROUSEL_CONTAINER} ${createCompositeCarouselBlocks.Elements.containerSingleBlock}`;
+const OVERWRITE_SINGLE_COLUMN_BUTTONS = `${OVERWRITE_SINGLE_COLUMN} .${createCompositeCarouselBlocks.Elements.button}`;
+const OVERWRITE_SINGLE_COLUMN_PREVIOUS = `${OVERWRITE_SINGLE_COLUMN} .${createCompositeCarouselBlocks.Elements.previousButton}`;
+const OVERWRITE_SINGLE_COLUMN_NEXT = `${OVERWRITE_SINGLE_COLUMN} .${createCompositeCarouselBlocks.Elements.nextButton}`;
 const OverwriteThemeDark = `
   ${OVERWRITE_THEME_DARK_BUTTON} {
-    background-color: ${token__namespace.color.red} !important;
+    background-color: ${token.color.red} !important;
   }
 
   ${OVERWRITE_THEME_DARK_BUTTON} > svg {
-    fill: ${token__namespace.color.white} !important;
+    fill: ${token.color.white} !important;
   }
 `;
 const OverwriteCarouselStyles = `
@@ -54,11 +36,11 @@ const OverwriteCarouselStyles = `
   ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {
     top: 50%;
     transform: translateY(-50%);
-    background-color: ${token__namespace.color.white};
+    background-color: ${token.color.white};
   }
 
   ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} > svg {
-    fill: ${token__namespace.color.black};
+    fill: ${token.color.black};
   }
 
   ${OVERWRITE_ANIMATION_BUTTON_PREVIOUS} {
@@ -76,7 +58,7 @@ const OverwriteCarouselStyles = `
   ${OVERWRITE_SINGLE_COLUMN_BUTTONS} {
     bottom: -19px;
     top: inherit;
-    background-color: ${token__namespace.color.gray.lighter};
+    background-color: ${token.color.gray.lighter};
   }
 
   ${OVERWRITE_SINGLE_COLUMN_PREVIOUS} {
@@ -100,15 +82,15 @@ const STYLES_CAROUSEL_ELEMENT = `
   }
 
   .${ELEMENT_DECLARATION} * {
-    color: ${token__namespace.color.white};
+    color: ${token.color.white};
   }
   
-  ${blocks.Styles}
+  ${createCompositeCarouselBlocks.Styles}
   ${ContainerStyles}
   ${OverwriteCarouselStyles}
   ${OverwriteThemeDark}
 `;
-const index = (props) => (() => {
+const createCompositeCarouselDefault = (props) => (() => {
   const {
     isThemeDark,
     gridGap,
@@ -143,7 +125,7 @@ const index = (props) => (() => {
   }
   if (!mobileHint) overwriteDisplayLogic.showMobileHint = false;
   if (!hint) overwriteDisplayLogic.showHint = false;
-  const carouselContainer = blocks.CreateElement({
+  const carouselContainer = createCompositeCarouselBlocks.CreateElement({
     ...props,
     blocks: props.blocks,
     overwriteDisplayLogic
@@ -163,5 +145,7 @@ const index = (props) => (() => {
     }
   };
 })();
-module.exports = index;
+export {
+  createCompositeCarouselDefault
+};
 //# sourceMappingURL=index.js.map

package/dist/composite/carousel/default/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../source/composite/carousel/default/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselRequirements = {\n  slide: HTMLElement;\n  shadowRef?: HTMLElement;\n  blocks: HTMLElement[];\n  isThemeDark?: boolean;\n  gridGap?: string | null;\n  hasLeftButton?: boolean;\n  hasRightButton?: boolean;\n  mobileHint?: boolean;\n  hint?: boolean;\n  mobileSize?: number | null;\n  tabletSize?: number | null;\n  desktopSize?: number | null;\n  mobileCount?: number | null;\n  tabletCount?: number | null;\n  desktopCount?: number | null;\n  maxCount?: number | null;\n};\n\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-carousel';\nconst ELEMENT_DECLARATION = 'carousel-default-declaration';\nconst CAROUSEL_CONTAINER = 'element-carousel-default-container';\n\nconst OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.container}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.button}`;\nconst OVERWRITE_ANIMATION_BUTTON_PREVIOUS = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.previousButton}`;\nconst OVERWRITE_ANIMATION_BUTTON_NEXT = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.nextButton}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${CAROUSEL_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `${OVERWRITE_THEME_DARK_CONTAINER} .${carouselElements.blocks.Elements.button}`;\n\nconst OVERWRITE_SINGLE_COLUMN = `.${CAROUSEL_CONTAINER} ${carouselElements.blocks.Elements.containerSingleBlock}`;\nconst OVERWRITE_SINGLE_COLUMN_BUTTONS = `${OVERWRITE_SINGLE_COLUMN} .${carouselElements.blocks.Elements.button}`;\nconst OVERWRITE_SINGLE_COLUMN_PREVIOUS = `${OVERWRITE_SINGLE_COLUMN} .${carouselElements.blocks.Elements.previousButton}`;\nconst OVERWRITE_SINGLE_COLUMN_NEXT = `${OVERWRITE_SINGLE_COLUMN} .${carouselElements.blocks.Elements.nextButton}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_BUTTON} {\n    background-color: ${token.color.red} !important;\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n    fill: ${token.color.white} !important;\n  }\n`;\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  .${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {\n    padding-bottom: 0;\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n    top: 50%;\n    transform: translateY(-50%);\n    background-color: ${token.color.white};\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} > svg {\n    fill: ${token.color.black};\n  }\n\n  ${OVERWRITE_ANIMATION_BUTTON_PREVIOUS} {\n    left: 0;\n  }\n\n  ${OVERWRITE_ANIMATION_BUTTON_NEXT} {\n    right: 0;\n  }\n\n  ${OVERWRITE_SINGLE_COLUMN} {\n    padding-bottom: 70px;\n  }\n\n  ${OVERWRITE_SINGLE_COLUMN_BUTTONS} {\n    bottom: -19px;\n    top: inherit;\n    background-color: ${token.color.gray.lighter};\n  }\n\n  ${OVERWRITE_SINGLE_COLUMN_PREVIOUS} {\n    left: calc(50% - 44px);\n  }\n\n  ${OVERWRITE_SINGLE_COLUMN_NEXT} {\n    left: calc(50% + 4px);\n    right: inherit;\n  }\n`;\n\n// prettier-ignore\nconst ContainerStyles = `\n  .${CAROUSEL_CONTAINER} {\n    position: relative;\n    overflow: hidden;\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_DECLARATION} * {\n    color: ${token.color.white};\n  }\n  \n  ${carouselElements.blocks.Styles}\n  ${ContainerStyles}\n  ${OverwriteCarouselStyles}\n  ${OverwriteThemeDark}\n`;\n\nexport default (props: TypeCarouselRequirements) =>\n  (() => {\n    const {\n      isThemeDark,\n      gridGap,\n      hasLeftButton = true,\n      hasRightButton = true,\n      mobileHint,\n      hint,\n      tabletSize,\n      desktopSize,\n      tabletCount,\n      desktopCount,\n      maxCount,\n    } = props;\n\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n    const overwriteDisplayLogic: Record<string, number | boolean> = {\n      tabletBreakpoint: tabletSize || 768,\n      desktopBreakpoint: desktopSize || 1024,\n      tabletCount: tabletCount || 2,\n      desktopCount: desktopCount || 3,\n      maxCount: maxCount || 4,\n      hasLeftButton,\n      hasRightButton,\n      showMobileHint: true,\n      showHint: true,\n    };\n\n    if (gridGap) {\n      overwriteDisplayLogic.blockGap = parseInt(gridGap);\n      overwriteDisplayLogic.tabletBreakpoint = 1000 + parseInt(gridGap);\n      overwriteDisplayLogic.desktopBreakpoint = 1400 + parseInt(gridGap);\n    }\n\n    if (!mobileHint) overwriteDisplayLogic.showMobileHint = false;\n    if (!hint) overwriteDisplayLogic.showHint = false;\n\n    const carouselContainer = carouselElements.blocks.CreateElement({\n      ...props,\n      blocks: props.blocks,\n      overwriteDisplayLogic,\n    });\n\n    wrapper.appendChild(carouselContainer.element);\n\n    container.classList.add(CAROUSEL_CONTAINER);\n    container.appendChild(wrapper);\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    return {\n      element: declaration,\n      styles: STYLES_CAROUSEL_ELEMENT,\n      events: {\n        resize: carouselContainer.events.resize,\n        load: carouselContainer.events.load,\n      },\n    };\n  })();\n"],"names":["carouselElements.blocks","token"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../source/composite/carousel/default/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselRequirements = {\n  slide: HTMLElement;\n  shadowRef?: HTMLElement;\n  blocks: HTMLElement[];\n  isThemeDark?: boolean;\n  gridGap?: string | null;\n  hasLeftButton?: boolean;\n  hasRightButton?: boolean;\n  mobileHint?: boolean;\n  hint?: boolean;\n  mobileSize?: number | null;\n  tabletSize?: number | null;\n  desktopSize?: number | null;\n  mobileCount?: number | null;\n  tabletCount?: number | null;\n  desktopCount?: number | null;\n  maxCount?: number | null;\n};\n\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-carousel';\nconst ELEMENT_DECLARATION = 'carousel-default-declaration';\nconst CAROUSEL_CONTAINER = 'element-carousel-default-container';\n\nconst OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.container}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.button}`;\nconst OVERWRITE_ANIMATION_BUTTON_PREVIOUS = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.previousButton}`;\nconst OVERWRITE_ANIMATION_BUTTON_NEXT = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.nextButton}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${CAROUSEL_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `${OVERWRITE_THEME_DARK_CONTAINER} .${carouselElements.blocks.Elements.button}`;\n\nconst OVERWRITE_SINGLE_COLUMN = `.${CAROUSEL_CONTAINER} ${carouselElements.blocks.Elements.containerSingleBlock}`;\nconst OVERWRITE_SINGLE_COLUMN_BUTTONS = `${OVERWRITE_SINGLE_COLUMN} .${carouselElements.blocks.Elements.button}`;\nconst OVERWRITE_SINGLE_COLUMN_PREVIOUS = `${OVERWRITE_SINGLE_COLUMN} .${carouselElements.blocks.Elements.previousButton}`;\nconst OVERWRITE_SINGLE_COLUMN_NEXT = `${OVERWRITE_SINGLE_COLUMN} .${carouselElements.blocks.Elements.nextButton}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_BUTTON} {\n    background-color: ${token.color.red} !important;\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n    fill: ${token.color.white} !important;\n  }\n`;\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  .${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {\n    padding-bottom: 0;\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n    top: 50%;\n    transform: translateY(-50%);\n    background-color: ${token.color.white};\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} > svg {\n    fill: ${token.color.black};\n  }\n\n  ${OVERWRITE_ANIMATION_BUTTON_PREVIOUS} {\n    left: 0;\n  }\n\n  ${OVERWRITE_ANIMATION_BUTTON_NEXT} {\n    right: 0;\n  }\n\n  ${OVERWRITE_SINGLE_COLUMN} {\n    padding-bottom: 70px;\n  }\n\n  ${OVERWRITE_SINGLE_COLUMN_BUTTONS} {\n    bottom: -19px;\n    top: inherit;\n    background-color: ${token.color.gray.lighter};\n  }\n\n  ${OVERWRITE_SINGLE_COLUMN_PREVIOUS} {\n    left: calc(50% - 44px);\n  }\n\n  ${OVERWRITE_SINGLE_COLUMN_NEXT} {\n    left: calc(50% + 4px);\n    right: inherit;\n  }\n`;\n\n// prettier-ignore\nconst ContainerStyles = `\n  .${CAROUSEL_CONTAINER} {\n    position: relative;\n    overflow: hidden;\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_DECLARATION} * {\n    color: ${token.color.white};\n  }\n  \n  ${carouselElements.blocks.Styles}\n  ${ContainerStyles}\n  ${OverwriteCarouselStyles}\n  ${OverwriteThemeDark}\n`;\n\nexport const createCompositeCarouselDefault = (props: TypeCarouselRequirements) =>\n  (() => {\n    const {\n      isThemeDark,\n      gridGap,\n      hasLeftButton = true,\n      hasRightButton = true,\n      mobileHint,\n      hint,\n      tabletSize,\n      desktopSize,\n      tabletCount,\n      desktopCount,\n      maxCount,\n    } = props;\n\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n    const overwriteDisplayLogic: Record<string, number | boolean> = {\n      tabletBreakpoint: tabletSize || 768,\n      desktopBreakpoint: desktopSize || 1024,\n      tabletCount: tabletCount || 2,\n      desktopCount: desktopCount || 3,\n      maxCount: maxCount || 4,\n      hasLeftButton,\n      hasRightButton,\n      showMobileHint: true,\n      showHint: true,\n    };\n\n    if (gridGap) {\n      overwriteDisplayLogic.blockGap = parseInt(gridGap);\n      overwriteDisplayLogic.tabletBreakpoint = 1000 + parseInt(gridGap);\n      overwriteDisplayLogic.desktopBreakpoint = 1400 + parseInt(gridGap);\n    }\n\n    if (!mobileHint) overwriteDisplayLogic.showMobileHint = false;\n    if (!hint) overwriteDisplayLogic.showHint = false;\n\n    const carouselContainer = carouselElements.blocks.CreateElement({\n      ...props,\n      blocks: props.blocks,\n      overwriteDisplayLogic,\n    });\n\n    wrapper.appendChild(carouselContainer.element);\n\n    container.classList.add(CAROUSEL_CONTAINER);\n    container.appendChild(wrapper);\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    return {\n      element: declaration,\n      styles: STYLES_CAROUSEL_ELEMENT,\n      events: {\n        resize: carouselContainer.events.resize,\n        load: carouselContainer.events.load,\n      },\n    };\n  })();\n"],"names":["carouselElements.blocks"],"mappings":";;;;;AAsBA,MAAM,kBAAkB;AACxB,MAAM,aAAa;AAEnB,MAAM,gBAAgB,IAAI,eAAe,KAAK,UAAU;AAExD,MAAM,eAAe;AACrB,MAAM,sBAAsB;AAC5B,MAAM,qBAAqB;AAE3B,MAAM,yCAAyC,IAAI,kBAAkB,KAAKA,8BAAwB,SAAS,SAAS;AACpH,MAAM,sCAAsC,IAAI,kBAAkB,KAAKA,8BAAwB,SAAS,MAAM;AAC9G,MAAM,sCAAsC,IAAI,kBAAkB,KAAKA,8BAAwB,SAAS,cAAc;AACtH,MAAM,kCAAkC,IAAI,kBAAkB,KAAKA,8BAAwB,SAAS,UAAU;AAE9G,MAAM,iCAAiC,IAAI,kBAAkB,GAAG,aAAa;AAC7E,MAAM,8BAA8B,GAAG,8BAA8B,KAAKA,8BAAwB,SAAS,MAAM;AAEjH,MAAM,0BAA0B,IAAI,kBAAkB,IAAIA,8BAAwB,SAAS,oBAAoB;AAC/G,MAAM,kCAAkC,GAAG,uBAAuB,KAAKA,8BAAwB,SAAS,MAAM;AAC9G,MAAM,mCAAmC,GAAG,uBAAuB,KAAKA,8BAAwB,SAAS,cAAc;AACvH,MAAM,+BAA+B,GAAG,uBAAuB,KAAKA,8BAAwB,SAAS,UAAU;AAG/G,MAAM,qBAAqB;AAAA,IACvB,2BAA2B;AAAA,wBACP,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA,IAGnC,2BAA2B;AAAA,YACnB,MAAM,MAAM,KAAK;AAAA;AAAA;AAK7B,MAAM,0BAA0B;AAAA,KAC3B,sCAAsC;AAAA;AAAA;AAAA;AAAA,IAIvC,mCAAmC;AAAA;AAAA;AAAA,wBAGf,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAGrC,mCAAmC;AAAA,YAC3B,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAGzB,mCAAmC;AAAA;AAAA;AAAA;AAAA,IAInC,+BAA+B;AAAA;AAAA;AAAA;AAAA,IAI/B,uBAAuB;AAAA;AAAA;AAAA;AAAA,IAIvB,+BAA+B;AAAA;AAAA;AAAA,wBAGX,MAAM,MAAM,KAAK,OAAO;AAAA;AAAA;AAAA,IAG5C,gCAAgC;AAAA;AAAA;AAAA;AAAA,IAIhC,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAOhC,MAAM,kBAAkB;AAAA,KACnB,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAOvB,MAAM,0BAA0B;AAAA,KAC3B,mBAAmB;AAAA,iBACP,YAAY;AAAA;AAAA;AAAA,KAGxB,mBAAmB;AAAA,aACX,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,IAG1BA,8BAAwB,MAAM;AAAA,IAC9B,eAAe;AAAA,IACf,uBAAuB;AAAA,IACvB,kBAAkB;AAAA;AAGf,MAAM,iCAAiC,CAAC,WAC5C,MAAM;AACL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,cAAc,SAAS,cAAc,KAAK;AAChD,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,QAAM,wBAA0D;AAAA,IAC9D,kBAAkB,cAAc;AAAA,IAChC,mBAAmB,eAAe;AAAA,IAClC,aAAa,eAAe;AAAA,IAC5B,cAAc,gBAAgB;AAAA,IAC9B,UAAU,YAAY;AAAA,IACtB;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,UAAU;AAAA,EAAA;AAGZ,MAAI,SAAS;AACX,0BAAsB,WAAW,SAAS,OAAO;AACjD,0BAAsB,mBAAmB,MAAO,SAAS,OAAO;AAChE,0BAAsB,oBAAoB,OAAO,SAAS,OAAO;AAAA,EACnE;AAEA,MAAI,CAAC,WAAY,uBAAsB,iBAAiB;AACxD,MAAI,CAAC,KAAM,uBAAsB,WAAW;AAE5C,QAAM,oBAAoBA,8BAAwB,cAAc;AAAA,IAC9D,GAAG;AAAA,IACH,QAAQ,MAAM;AAAA,IACd;AAAA,EAAA,CACD;AAED,UAAQ,YAAY,kBAAkB,OAAO;AAE7C,YAAU,UAAU,IAAI,kBAAkB;AAC1C,YAAU,YAAY,OAAO;AAC7B,MAAI,YAAa,WAAU,aAAa,iBAAiB,UAAU;AAEnE,cAAY,UAAU,IAAI,mBAAmB;AAC7C,cAAY,YAAY,SAAS;AAEjC,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,MACN,QAAQ,kBAAkB,OAAO;AAAA,MACjC,MAAM,kBAAkB,OAAO;AAAA,IAAA;AAAA,EACjC;AAEJ,GAAA;"}

package/dist/composite/carousel/elements/blocks.d.ts

@@ -20,7 +20,7 @@ type TypeAnimationCarouselBlockProps = {
     blocks: HTMLElement[];
     overwriteDisplayLogic?: TypeDisplayLogicProps;
 };
-declare const _default: {
+export declare const createCompositeCarouselBlocks: {
     CreateElement: (props: TypeAnimationCarouselBlockProps) => {
         element: HTMLDivElement;
         events: {
@@ -38,5 +38,5 @@ declare const _default: {
         previousButton: string;
     };
 };
-export default _default;
+export {};
 //# sourceMappingURL=blocks.d.ts.map

package/dist/composite/carousel/elements/blocks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/blocks.ts"],"names":[],"mappings":"AAOA,KAAK,gBAAgB,GAAG;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,KAAK,qBAAqB,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAAC;AAEvD,KAAK,+BAA+B,GAAG;IACrC,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C,CAAC;;2BA8UyC,+BAA+B;;;;;;;;;;;;;;;;;AA+P1E,wBAWE"}
+{"version":3,"file":"blocks.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/blocks.ts"],"names":[],"mappings":"AAOA,KAAK,gBAAgB,GAAG;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,OAAO,CAAC;IACxB,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,KAAK,qBAAqB,GAAG,OAAO,CAAC,gBAAgB,CAAC,CAAC;AAEvD,KAAK,+BAA+B,GAAG;IACrC,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,qBAAqB,CAAC,EAAE,qBAAqB,CAAC;CAC/C,CAAC;AA6kBF,eAAO,MAAM,6BAA6B;2BA/PC,+BAA+B;;;;;;;;;;;;;;;;CA0QzE,CAAC"}

package/dist/composite/carousel/elements/blocks.js

@@ -1,29 +1,10 @@
-"use strict";
-const token = require("@universityofmaryland/web-token-library");
-const elementStyles = require("@universityofmaryland/web-styles-library/element");
-const performance = require("@universityofmaryland/web-utilities-library/performance");
-const events = require("@universityofmaryland/web-utilities-library/events");
-const styles = require("@universityofmaryland/web-utilities-library/styles");
-const arrows = require("@universityofmaryland/web-icons-library/arrows");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
-const fullScreenClassName = elementStyles__namespace.action.button.fullScreen.className;
+import * as token from "@universityofmaryland/web-token-library";
+import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import { debounce } from "@universityofmaryland/web-utilities-library/performance";
+import { setupSwipeDetection } from "@universityofmaryland/web-utilities-library/events";
+import { parsePixelValue } from "@universityofmaryland/web-utilities-library/styles";
+import { arrow_right } from "@universityofmaryland/web-icons-library/arrows";
+const fullScreenClassName = elementStyles.action.button.fullScreen.className;
 const ATTRIBUTE_SINGLE_BLOCK = "single";
 const ANIMATION_DURATION = 750;
 const HINT_MULTIPLER_MOBILE_SIZING = 0.2;
@@ -39,8 +20,8 @@ const ELEMENT_ANIMATION_CAROUSEL_PREVIOUS = `animation-carousel-block-button-pre
 const OVERWRITE_SINGLE_BLOCK_CONTAINER = `.${ELEMENT_ANIMATION_CAROUSEL_CONTAINER}${IS_SINGLE_BLOCK}`;
 const ButtonStyles = `
   .${ELEMENT_ANIMATION_CAROUSEL_BUTTON} {
-    background-color: ${token__namespace.color.red};
-    padding: 10px ${token__namespace.spacing.xs};
+    background-color: ${token.color.red};
+    padding: 10px ${token.spacing.xs};
     position: absolute;
     z-index: 9999;
     display: flex;
@@ -57,7 +38,7 @@ const ButtonStyles = `
   .${ELEMENT_ANIMATION_CAROUSEL_BUTTON} svg {
     width: 20px;
     height: 20px;
-    fill: ${token__namespace.color.white};
+    fill: ${token.color.white};
   }
 
   .${ELEMENT_ANIMATION_CAROUSEL_PREVIOUS} svg {
@@ -183,7 +164,7 @@ const EventSwipe = (props) => {
       EventScrollCarousel({ ...props, isDirectionRight: false });
     }
   };
-  events.setupSwipeDetection({ container, callback: swipes });
+  setupSwipeDetection({ container, callback: swipes });
 };
 const ButtonVisibility = (props) => {
   const { GetElements, GetViewOptions } = props;
@@ -236,7 +217,7 @@ const CreateButton = ({
   button.setAttribute("type", "button");
   button.setAttribute("aria-label", "Next");
   button.classList.add(ELEMENT_ANIMATION_CAROUSEL_BUTTON);
-  button.innerHTML = arrows.arrow_right;
+  button.innerHTML = arrow_right;
   if (isRight) {
     button.classList.add(ELEMENT_ANIMATION_CAROUSEL_NEXT);
   }
@@ -255,7 +236,7 @@ const CreateButton = ({
   return button;
 };
 const CreateCarouselCardsElement = (props) => (() => {
-  const { slide, shadowRef, blocks: blocks2, overwriteDisplayLogic } = props;
+  const { slide, shadowRef, blocks, overwriteDisplayLogic } = props;
   const declaration = document.createElement("div");
   const container = document.createElement("div");
   const wrapper = document.createElement("div");
@@ -267,7 +248,7 @@ const CreateCarouselCardsElement = (props) => (() => {
     tabletCount: 2,
     desktopCount: 3,
     maxCount: 4,
-    blockGap: styles.parsePixelValue(token__namespace.spacing.lg),
+    blockGap: parsePixelValue(token.spacing.lg),
     hasRightButton: true,
     hasLeftButton: true,
     showMobileHint: true,
@@ -286,7 +267,7 @@ const CreateCarouselCardsElement = (props) => (() => {
   const GetElements = {
     container: () => container,
     slide: () => slide,
-    blocks: () => blocks2
+    blocks: () => blocks
   };
   const GetViewOptions = {
     isMobileView: () => {
@@ -353,7 +334,7 @@ const CreateCarouselCardsElement = (props) => (() => {
     }
   };
   const SetLayout = {
-    blockWidth: () => blocks2.forEach((block) => block.style.width = `${blockWidth}px`),
+    blockWidth: () => blocks.forEach((block) => block.style.width = `${blockWidth}px`),
     carouselWidth: ({ count }) => {
       const elementSize = GetSizes.carouselWidthBasedOnBlock({ count });
       slide.style.width = `${elementSize}px`;
@@ -451,14 +432,14 @@ const CreateCarouselCardsElement = (props) => (() => {
   if (shadowRef) {
     wrapper.appendChild(shadowRef);
   } else {
-    blocks2.forEach((block) => slide.appendChild(block));
+    blocks.forEach((block) => slide.appendChild(block));
     wrapper.appendChild(slide);
   }
   container.classList.add(ELEMENT_ANIMATION_CAROUSEL_CONTAINER);
   container.appendChild(wrapper);
   declaration.classList.add(ELEMENT_ANIMATION_CAROUSEL_DECLARATION);
   declaration.appendChild(container);
-  window.addEventListener("resize", performance.debounce(Event.resize, 30));
+  window.addEventListener("resize", debounce(Event.resize, 30));
   return {
     element: declaration,
     events: {
@@ -467,7 +448,7 @@ const CreateCarouselCardsElement = (props) => (() => {
     }
   };
 })();
-const blocks = {
+const createCompositeCarouselBlocks = {
   CreateElement: CreateCarouselCardsElement,
   Styles: STYLES_CAROUSEL_CARDS_ELEMENT,
   Elements: {
@@ -479,5 +460,7 @@ const blocks = {
     previousButton: ELEMENT_ANIMATION_CAROUSEL_PREVIOUS
   }
 };
-module.exports = blocks;
+export {
+  createCompositeCarouselBlocks
+};
 //# sourceMappingURL=blocks.js.map