@universityofmaryland/web-elements-library 1.3.6 → 1.4.0

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

@@ -0,0 +1,302 @@
+import { token, typography, element, layout } from "@universityofmaryland/web-styles-library";
+import { convertJSSObjectToStyles } from "../../../utilities/theme/index.mjs";
+import blocks from "../elements/blocks.mjs";
+import "../elements/full-screen.mjs";
+import "../elements/overlay.mjs";
+import "../elements/image.mjs";
+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"
+"><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>`;
+const ELEMENT_NAME = "umd-element-carousel-cards";
+const ELEMENT_DECLARATION = "carousel-cards-declaration";
+const CAROUSEL_CONTAINER = "element-carousel-container";
+const CAROUSEL_LOCK = "element-carousel-lock";
+const INTRO_CONTAINER = "carousel-cards-intro-container";
+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 OverwriteCarouselStyles = `
+  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
+    ${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {
+      padding-bottom: 60px;
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    ${OVERWRITE_ANIMATION_CAROUSEL_DECLARATION} {
+      width: 60%;
+    }
+  }
+
+  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
+    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {
+      bottom: 0;
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
+    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {
+      left: 49px;
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:first-of-type {
+      right: -52px;
+    }
+  }
+
+  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
+    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {
+      left: 0;
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON}:last-of-type {
+      left: -52px;
+    }
+  }
+`;
+const HeadlineStyles = `
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`.${INTRO_CONTAINER_HEADLINE}`]: typography.sans.largest
+  }
+})}
+
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`.${INTRO_CONTAINER_HEADLINE} *`]: typography.sans.largest
+  }
+})}
+
+  .${INTRO_CONTAINER_HEADLINE},
+  .${INTRO_CONTAINER_HEADLINE} * {
+    color: ${token.color.white};
+    font-weight: 800;
+    text-transform: uppercase;
+  }
+`;
+const TextStyles = `
+  * + .${INTRO_CONTAINER_TEXT} {
+    margin-top: ${token.spacing.md};
+  }
+
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`.${INTRO_CONTAINER_TEXT}`]: element.text.rich.advancedDark
+  }
+})}
+
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`.${INTRO_CONTAINER_TEXT}`]: typography.sans.medium
+  }
+})}
+`;
+const ActionStyles = `
+  * + .${INTRO_CONTAINER_CTA} {
+    margin-top: ${token.spacing.md};
+  }
+
+  .${INTRO_CONTAINER_CTA} a {
+    color: ${token.color.white};
+  }
+`;
+const IntroContainer = `
+  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
+    .${INTRO_CONTAINER} {
+      margin-bottom: ${token.spacing.md};
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${INTRO_CONTAINER} {
+      width: calc(40% - ${token.spacing["2xl"]});
+      padding-right: ${token.spacing["2xl"]};
+    }
+  }
+
+  @media (min-width: ${LARGE}px) {
+    .${INTRO_CONTAINER} .${INTRO_CONTAINER_LOCK} {
+      max-width: inherit;
+      padding: 0;
+    }
+  }
+`;
+const ContainerLock = `
+  .${CAROUSEL_LOCK} {
+    position: relative;
+    ${convertJSSObjectToStyles({
+  styleObj: layout.space.horizontal.larger
+})}
+  }
+
+  @media (max-width: ${MEDIUM - 1}px) {
+    .${CAROUSEL_LOCK} {
+      padding-right: 0;
+    }
+  }
+
+  @media (min-width: ${LARGE}px) {
+    .${CAROUSEL_LOCK} {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+
+  @media umd-carousel-card (max-width: ${LARGE - 1}px) {
+    .${CAROUSEL_LOCK} {
+      max-width: inherit;
+      padding: 0;
+    }
+  }
+`;
+const ContainerStyles = `
+  @keyframes card-carousel-slide-in {
+    from { transform: translateX(-25vw); }
+    to { transform: translateX(0);}
+  }
+
+  .${CAROUSEL_CONTAINER} {
+    background-color: ${token.color.black};
+    padding: ${token.spacing["3xl"]} 0;
+    position: relative;
+    overflow: clip;
+  }
+
+  @container ${ELEMENT_NAME} (max-width: 300px) {
+    .${CAROUSEL_CONTAINER} {
+      display: none;
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) {
+    .${CAROUSEL_CONTAINER} {
+      padding: ${token.spacing["4xl"]} 0;
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${CAROUSEL_CONTAINER} {
+      padding: ${token.spacing["max"]} 0;
+    }
+  }
+
+  .${CAROUSEL_CONTAINER} > svg {
+    width: auto;
+    height: 100%;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @supports (animation-timeline: view()) {
+      .${CAROUSEL_CONTAINER} > svg {
+        animation: card-carousel-slide-in ease-in-out forwards;
+        animation-timeline: view();
+        animation-range-start: 0;
+        animation-range-end: 100vh;
+        transform: translateX(-15vw);
+      }
+    }
+  }
+`;
+const STYLES_CAROUSEL_CARDS_ELEMENT = `
+  .${ELEMENT_DECLARATION} {
+    container: ${ELEMENT_NAME} / inline-size;
+  }
+
+  .${ELEMENT_DECLARATION} * {
+    color: ${token.color.white};
+  }
+  
+  ${blocks.Styles}
+  ${ContainerStyles}
+  ${ContainerLock}
+  ${HeadlineStyles}
+  ${TextStyles}
+  ${ActionStyles}
+  ${IntroContainer}
+  ${OverwriteCarouselStyles}
+`;
+const CreateIntro = (props) => {
+  const { headline, text, actions } = props;
+  const introContainer = document.createElement("div");
+  const introWrapper = document.createElement("div");
+  introWrapper.classList.add(INTRO_CONTAINER_LOCK);
+  if (headline) {
+    headline.classList.add(INTRO_CONTAINER_HEADLINE);
+    introWrapper.appendChild(headline);
+  }
+  if (text) {
+    text.classList.add(INTRO_CONTAINER_TEXT);
+    introWrapper.appendChild(text);
+  }
+  if (actions) {
+    actions.classList.add(INTRO_CONTAINER_CTA);
+    introWrapper.appendChild(actions);
+  }
+  introContainer.classList.add(INTRO_CONTAINER);
+  introContainer.appendChild(introWrapper);
+  return introContainer;
+};
+const index = (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({
+    ...props,
+    blocks: props.cards,
+    overwriteDisplayLogic: {
+      mobileBreakpoint: 650,
+      tabletBreakpoint: 1024,
+      desktopBreakpoint: 1024,
+      mobileCount: 1,
+      tabletCount: 2,
+      desktopCount: 2,
+      maxCount: 2,
+      showMobileHint: true,
+      showHint: false
+    }
+  });
+  const introContainer = CreateIntro(props);
+  wrapper.classList.add(CAROUSEL_LOCK);
+  wrapper.appendChild(introContainer);
+  wrapper.appendChild(carouselContainer.element);
+  container.classList.add(CAROUSEL_CONTAINER);
+  container.innerHTML = BACKGROUND_TEXTURE;
+  container.appendChild(wrapper);
+  declaration.classList.add(ELEMENT_DECLARATION);
+  declaration.appendChild(container);
+  return {
+    element: declaration,
+    styles: STYLES_CAROUSEL_CARDS_ELEMENT,
+    events: {
+      resize: carouselContainer.events.resize,
+      load: carouselContainer.events.load
+    }
+  };
+})();
+export {
+  index as default
+};
+//# sourceMappingURL=index.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../source/composite/carousel/cards/index.ts"],"sourcesContent":["import {\n  element,\n  layout,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\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  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_HEADLINE}`]: typography.sans.largest,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\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  ${Utility.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${INTRO_CONTAINER_TEXT}`]: element.text.rich.advancedDark,\n    },\n  })}\n\n  ${Utility.theme.convertJSSObjectToStyles({\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    ${Utility.theme.convertJSSObjectToStyles({\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: view()) {\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","Utility.theme.convertJSSObjectToStyles"],"mappings":"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"}

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;gCAuGqB,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;yBAuGc,OAAO,wBAAwB;;;;;;;;AAA/C,wBA+DO"}

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

@@ -0,0 +1,150 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const blocks = require("../elements/blocks.js");
+require("../elements/full-screen.js");
+require("../elements/overlay.js");
+require("../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_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 OverwriteThemeDark = `
+  ${OVERWRITE_THEME_DARK_BUTTON} {
+    background-color: ${Styles.token.color.red} !important;
+  }
+
+  ${OVERWRITE_THEME_DARK_BUTTON} > svg {
+    fill: ${Styles.token.color.white} !important;
+  }
+`;
+const OverwriteCarouselStyles = `
+  .${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {
+    padding-bottom: 0;
+  }
+
+  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: ${Styles.token.color.white};
+  }
+
+  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} > svg {
+    fill: ${Styles.token.color.black};
+  }
+
+  ${OVERWRITE_ANIMATION_BUTTON_PREVIOUS} {
+    left: 0;
+  }
+
+  ${OVERWRITE_ANIMATION_BUTTON_NEXT} {
+    right: 0;
+  }
+
+  ${OVERWRITE_SINGLE_COLUMN} {
+    padding-bottom: 70px;
+  }
+
+  ${OVERWRITE_SINGLE_COLUMN_BUTTONS} {
+    bottom: -19px;
+    top: inherit;
+    background-color: ${Styles.token.color.gray.lighter};
+  }
+
+  ${OVERWRITE_SINGLE_COLUMN_PREVIOUS} {
+    left: calc(50% - 44px);
+  }
+
+  ${OVERWRITE_SINGLE_COLUMN_NEXT} {
+    left: calc(50% + 4px);
+    right: inherit;
+  }
+`;
+const ContainerStyles = `
+  .${CAROUSEL_CONTAINER} {
+    position: relative;
+    overflow: hidden;
+  }
+`;
+const STYLES_CAROUSEL_ELEMENT = `
+  .${ELEMENT_DECLARATION} {
+    container: ${ELEMENT_NAME} / inline-size;
+  }
+
+  .${ELEMENT_DECLARATION} * {
+    color: ${Styles.token.color.white};
+  }
+  
+  ${blocks.Styles}
+  ${ContainerStyles}
+  ${OverwriteCarouselStyles}
+  ${OverwriteThemeDark}
+`;
+const index = (props) => (() => {
+  const {
+    isThemeDark,
+    gridGap,
+    hasLeftButton = true,
+    hasRightButton = true,
+    mobileHint,
+    hint,
+    tabletSize,
+    desktopSize,
+    tabletCount,
+    desktopCount,
+    maxCount
+  } = props;
+  const declaration = document.createElement("div");
+  const container = document.createElement("div");
+  const wrapper = document.createElement("div");
+  const overwriteDisplayLogic = {
+    tabletBreakpoint: tabletSize || 768,
+    desktopBreakpoint: desktopSize || 1024,
+    tabletCount: tabletCount || 2,
+    desktopCount: desktopCount || 3,
+    maxCount: maxCount || 4,
+    hasLeftButton,
+    hasRightButton,
+    showMobileHint: true,
+    showHint: true
+  };
+  if (gridGap) {
+    overwriteDisplayLogic.blockGap = parseInt(gridGap);
+    overwriteDisplayLogic.tabletBreakpoint = 1e3 + parseInt(gridGap);
+    overwriteDisplayLogic.desktopBreakpoint = 1400 + parseInt(gridGap);
+  }
+  if (!mobileHint) overwriteDisplayLogic.showMobileHint = false;
+  if (!hint) overwriteDisplayLogic.showHint = false;
+  const carouselContainer = blocks.CreateElement({
+    ...props,
+    blocks: props.blocks,
+    overwriteDisplayLogic
+  });
+  wrapper.appendChild(carouselContainer.element);
+  container.classList.add(CAROUSEL_CONTAINER);
+  container.appendChild(wrapper);
+  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
+  declaration.classList.add(ELEMENT_DECLARATION);
+  declaration.appendChild(container);
+  return {
+    element: declaration,
+    styles: STYLES_CAROUSEL_ELEMENT,
+    events: {
+      resize: carouselContainer.events.resize,
+      load: carouselContainer.events.load
+    }
+  };
+})();
+module.exports = index;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../source/composite/carousel/default/index.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-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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"}

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

@@ -0,0 +1,151 @@
+import { token } from "@universityofmaryland/web-styles-library";
+import blocks from "../elements/blocks.mjs";
+import "../elements/full-screen.mjs";
+import "../elements/overlay.mjs";
+import "../elements/image.mjs";
+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_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 OverwriteThemeDark = `
+  ${OVERWRITE_THEME_DARK_BUTTON} {
+    background-color: ${token.color.red} !important;
+  }
+
+  ${OVERWRITE_THEME_DARK_BUTTON} > svg {
+    fill: ${token.color.white} !important;
+  }
+`;
+const OverwriteCarouselStyles = `
+  .${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {
+    padding-bottom: 0;
+  }
+
+  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: ${token.color.white};
+  }
+
+  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} > svg {
+    fill: ${token.color.black};
+  }
+
+  ${OVERWRITE_ANIMATION_BUTTON_PREVIOUS} {
+    left: 0;
+  }
+
+  ${OVERWRITE_ANIMATION_BUTTON_NEXT} {
+    right: 0;
+  }
+
+  ${OVERWRITE_SINGLE_COLUMN} {
+    padding-bottom: 70px;
+  }
+
+  ${OVERWRITE_SINGLE_COLUMN_BUTTONS} {
+    bottom: -19px;
+    top: inherit;
+    background-color: ${token.color.gray.lighter};
+  }
+
+  ${OVERWRITE_SINGLE_COLUMN_PREVIOUS} {
+    left: calc(50% - 44px);
+  }
+
+  ${OVERWRITE_SINGLE_COLUMN_NEXT} {
+    left: calc(50% + 4px);
+    right: inherit;
+  }
+`;
+const ContainerStyles = `
+  .${CAROUSEL_CONTAINER} {
+    position: relative;
+    overflow: hidden;
+  }
+`;
+const STYLES_CAROUSEL_ELEMENT = `
+  .${ELEMENT_DECLARATION} {
+    container: ${ELEMENT_NAME} / inline-size;
+  }
+
+  .${ELEMENT_DECLARATION} * {
+    color: ${token.color.white};
+  }
+  
+  ${blocks.Styles}
+  ${ContainerStyles}
+  ${OverwriteCarouselStyles}
+  ${OverwriteThemeDark}
+`;
+const index = (props) => (() => {
+  const {
+    isThemeDark,
+    gridGap,
+    hasLeftButton = true,
+    hasRightButton = true,
+    mobileHint,
+    hint,
+    tabletSize,
+    desktopSize,
+    tabletCount,
+    desktopCount,
+    maxCount
+  } = props;
+  const declaration = document.createElement("div");
+  const container = document.createElement("div");
+  const wrapper = document.createElement("div");
+  const overwriteDisplayLogic = {
+    tabletBreakpoint: tabletSize || 768,
+    desktopBreakpoint: desktopSize || 1024,
+    tabletCount: tabletCount || 2,
+    desktopCount: desktopCount || 3,
+    maxCount: maxCount || 4,
+    hasLeftButton,
+    hasRightButton,
+    showMobileHint: true,
+    showHint: true
+  };
+  if (gridGap) {
+    overwriteDisplayLogic.blockGap = parseInt(gridGap);
+    overwriteDisplayLogic.tabletBreakpoint = 1e3 + parseInt(gridGap);
+    overwriteDisplayLogic.desktopBreakpoint = 1400 + parseInt(gridGap);
+  }
+  if (!mobileHint) overwriteDisplayLogic.showMobileHint = false;
+  if (!hint) overwriteDisplayLogic.showHint = false;
+  const carouselContainer = blocks.CreateElement({
+    ...props,
+    blocks: props.blocks,
+    overwriteDisplayLogic
+  });
+  wrapper.appendChild(carouselContainer.element);
+  container.classList.add(CAROUSEL_CONTAINER);
+  container.appendChild(wrapper);
+  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
+  declaration.classList.add(ELEMENT_DECLARATION);
+  declaration.appendChild(container);
+  return {
+    element: declaration,
+    styles: STYLES_CAROUSEL_ELEMENT,
+    events: {
+      resize: carouselContainer.events.resize,
+      load: carouselContainer.events.load
+    }
+  };
+})();
+export {
+  index as default
+};
+//# sourceMappingURL=index.mjs.map