@universityofmaryland/web-elements-library 1.3.7 → 1.4.0

package/dist/composite/footer/elements/main-section/index.mjs

@@ -0,0 +1,104 @@
+import { token } from "@universityofmaryland/web-styles-library";
+import { RowLogoStyles, createRowLogo } from "./row-logo/index.mjs";
+import { RowLinkStyles, createRowLinks } from "./row-links/index.mjs";
+import { CampaignStyles } from "./campaign.mjs";
+import { ELEMENTS, REFERENCES } from "../../globals.mjs";
+const { ELEMENT_WRAPPER } = ELEMENTS;
+const { IS_THEME_LIGHT, IS_VERSION_SIMPLE, IS_VERSION_VISUAL } = REFERENCES;
+const MAIN_CONTAINER = "umd-footer-main-container";
+const BACKGROUND_IMAGE_CONTAINER = "umd-footer-background-image-container";
+const BACKGROUND_IMAGE_GRADIENT = "umd-footer-background-image-graident";
+const VariationVisualStyles = `
+  .${ELEMENT_WRAPPER}${IS_VERSION_VISUAL} .${BACKGROUND_IMAGE_CONTAINER},
+  .${ELEMENT_WRAPPER}${IS_VERSION_SIMPLE} .${BACKGROUND_IMAGE_CONTAINER} {
+    padding-top: 100px;
+  }
+
+  .${BACKGROUND_IMAGE_CONTAINER} {
+    position: relative;
+  }
+
+  .${BACKGROUND_IMAGE_GRADIENT} {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 2px;
+    width: 500vw;
+    height: 100px;
+    background: linear-gradient( 180deg, rgba(255, 255, 255, 1) 0%, #e4edf9 100% );
+  }
+
+  .${BACKGROUND_IMAGE_CONTAINER} img {
+    width: 100% !important;
+    object-fit: cover !important;
+    display: block !important;
+    object-position: center;
+  }
+`;
+const MainContainerStyles = `
+  .${ELEMENT_WRAPPER} p,
+  .${ELEMENT_WRAPPER} a,
+  .${ELEMENT_WRAPPER} span {
+    color: ${token.color.white};
+  }
+
+  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} p,
+  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} span,
+  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} a {
+    color: ${token.color.gray.dark}
+  }
+
+  ${RowLogoStyles}
+  ${RowLinkStyles}
+  ${CampaignStyles}
+  ${VariationVisualStyles}
+`;
+const createMainSection = (props) => {
+  const { isTypeMega, isTypeSimple, isTypeVisual, slotVisualImage } = props;
+  const isShowVisualImage = isTypeVisual || isTypeSimple;
+  const container = document.createElement("div");
+  const logoRow = createRowLogo(props);
+  container.classList.add(MAIN_CONTAINER);
+  if (isShowVisualImage) {
+    const visualContainer = document.createElement("div");
+    const backgroundGraident = document.createElement("div");
+    const backgroundImage = document.createElement("img");
+    let altText = null;
+    let imageSrc = null;
+    if (slotVisualImage) {
+      const source = slotVisualImage.getAttribute("src");
+      const alt = slotVisualImage.getAttribute("alt");
+      if (typeof source === "string" && source.length > 0) {
+        imageSrc = source;
+      }
+      if (typeof alt === "string" && alt.length > 0) {
+        altText = alt;
+      }
+    } else {
+      if (isTypeVisual) {
+        altText = "The University of Maryland Campus";
+        imageSrc = "https://umd-design.transforms.svdcdn.com/production/images/download.jpeg?w=1600&h=780&auto=compress%2Cformat&fit=crop&dm=1717510653&s=90cdb38e190565b9a41969a78d262e07";
+      }
+    }
+    if (imageSrc && altText) {
+      visualContainer.classList.add(BACKGROUND_IMAGE_CONTAINER);
+      backgroundImage.setAttribute("src", imageSrc);
+      backgroundImage.setAttribute("alt", `${altText}`);
+      backgroundGraident.classList.add(BACKGROUND_IMAGE_GRADIENT);
+      visualContainer.appendChild(backgroundGraident);
+      visualContainer.appendChild(backgroundImage);
+      container.appendChild(visualContainer);
+    }
+  }
+  container.appendChild(logoRow);
+  if (isTypeMega || isTypeVisual) {
+    const linksRow = createRowLinks(props);
+    container.appendChild(linksRow);
+  }
+  return container;
+};
+export {
+  MainContainerStyles,
+  createMainSection
+};
+//# sourceMappingURL=index.mjs.map

package/dist/composite/footer/elements/main-section/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../source/composite/footer/elements/main-section/index.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport { createRowLogo, RowLogoStyles, type RowLogoProps } from './row-logo';\nimport { createRowLinks, RowLinkStyles, type RowLinksProps } from './row-links';\nimport { CampaignStyles } from './campaign';\nimport { ELEMENTS, REFERENCES } from '../../globals';\nimport { BaseProps } from '../../_types';\n\nconst { ELEMENT_WRAPPER } = ELEMENTS;\nconst { IS_THEME_LIGHT, IS_VERSION_SIMPLE, IS_VERSION_VISUAL } = REFERENCES;\n\nconst MAIN_CONTAINER = 'umd-footer-main-container';\nconst BACKGROUND_IMAGE_CONTAINER = 'umd-footer-background-image-container';\nconst BACKGROUND_IMAGE_GRADIENT = 'umd-footer-background-image-graident';\n\nconst VariationVisualStyles = `\n  .${ELEMENT_WRAPPER}${IS_VERSION_VISUAL} .${BACKGROUND_IMAGE_CONTAINER},\n  .${ELEMENT_WRAPPER}${IS_VERSION_SIMPLE} .${BACKGROUND_IMAGE_CONTAINER} {\n    padding-top: 100px;\n  }\n\n  .${BACKGROUND_IMAGE_CONTAINER} {\n    position: relative;\n  }\n\n  .${BACKGROUND_IMAGE_GRADIENT} {\n    display: block;\n    position: absolute;\n    left: 0;\n    top: 2px;\n    width: 500vw;\n    height: 100px;\n    background: linear-gradient( 180deg, rgba(255, 255, 255, 1) 0%, #e4edf9 100% );\n  }\n\n  .${BACKGROUND_IMAGE_CONTAINER} img {\n    width: 100% !important;\n    object-fit: cover !important;\n    display: block !important;\n    object-position: center;\n  }\n`;\n\nexport const MainContainerStyles = `\n  .${ELEMENT_WRAPPER} p,\n  .${ELEMENT_WRAPPER} a,\n  .${ELEMENT_WRAPPER} span {\n    color: ${token.color.white};\n  }\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} p,\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} span,\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} a {\n    color: ${token.color.gray.dark}\n  }\n\n  ${RowLogoStyles}\n  ${RowLinkStyles}\n  ${CampaignStyles}\n  ${VariationVisualStyles}\n`;\n\nexport interface MainSectionProps\n  extends BaseProps,\n    RowLinksProps,\n    RowLogoProps {\n  slotVisualImage: HTMLImageElement | null;\n}\n\nexport const createMainSection = (props: MainSectionProps) => {\n  const { isTypeMega, isTypeSimple, isTypeVisual, slotVisualImage } = props;\n  const isShowVisualImage = isTypeVisual || isTypeSimple;\n  const container = document.createElement('div');\n  const logoRow = createRowLogo(props);\n\n  container.classList.add(MAIN_CONTAINER);\n\n  if (isShowVisualImage) {\n    const visualContainer = document.createElement('div');\n    const backgroundGraident = document.createElement('div');\n    const backgroundImage = document.createElement('img');\n    let altText = null;\n    let imageSrc = null;\n\n    if (slotVisualImage) {\n      const source = slotVisualImage.getAttribute('src');\n      const alt = slotVisualImage.getAttribute('alt');\n\n      if (typeof source === 'string' && source.length > 0) {\n        imageSrc = source;\n      }\n\n      if (typeof alt === 'string' && alt.length > 0) {\n        altText = alt;\n      }\n    } else {\n      if (isTypeVisual) {\n        altText = 'The University of Maryland Campus';\n        imageSrc =\n          'https://umd-design.transforms.svdcdn.com/production/images/download.jpeg?w=1600&h=780&auto=compress%2Cformat&fit=crop&dm=1717510653&s=90cdb38e190565b9a41969a78d262e07';\n      }\n    }\n\n    if (imageSrc && altText) {\n      visualContainer.classList.add(BACKGROUND_IMAGE_CONTAINER);\n      backgroundImage.setAttribute('src', imageSrc);\n      backgroundImage.setAttribute('alt', `${altText}`);\n\n      backgroundGraident.classList.add(BACKGROUND_IMAGE_GRADIENT);\n\n      visualContainer.appendChild(backgroundGraident);\n      visualContainer.appendChild(backgroundImage);\n\n      container.appendChild(visualContainer);\n    }\n  }\n\n  container.appendChild(logoRow);\n\n  if (isTypeMega || isTypeVisual) {\n    const linksRow = createRowLinks(props);\n    container.appendChild(linksRow);\n  }\n\n  return container;\n};\n"],"names":[],"mappings":";;;;;AAOA,MAAM,EAAE,oBAAoB;AAC5B,MAAM,EAAE,gBAAgB,mBAAmB,kBAAA,IAAsB;AAEjE,MAAM,iBAAiB;AACvB,MAAM,6BAA6B;AACnC,MAAM,4BAA4B;AAElC,MAAM,wBAAwB;AAAA,KACzB,eAAe,GAAG,iBAAiB,KAAK,0BAA0B;AAAA,KAClE,eAAe,GAAG,iBAAiB,KAAK,0BAA0B;AAAA;AAAA;AAAA;AAAA,KAIlE,0BAA0B;AAAA;AAAA;AAAA;AAAA,KAI1B,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAUzB,0BAA0B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQxB,MAAM,sBAAsB;AAAA,KAC9B,eAAe;AAAA,KACf,eAAe;AAAA,KACf,eAAe;AAAA,aACP,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,KAGzB,eAAe,GAAG,cAAc;AAAA,KAChC,eAAe,GAAG,cAAc;AAAA,KAChC,eAAe,GAAG,cAAc;AAAA,aACxB,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,IAG9B,aAAa;AAAA,IACb,aAAa;AAAA,IACb,cAAc;AAAA,IACd,qBAAqB;AAAA;AAUlB,MAAM,oBAAoB,CAAC,UAA4B;AAC5D,QAAM,EAAE,YAAY,cAAc,cAAc,oBAAoB;AACpE,QAAM,oBAAoB,gBAAgB;AAC1C,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,UAAU,cAAc,KAAK;AAEnC,YAAU,UAAU,IAAI,cAAc;AAEtC,MAAI,mBAAmB;AACrB,UAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,UAAM,qBAAqB,SAAS,cAAc,KAAK;AACvD,UAAM,kBAAkB,SAAS,cAAc,KAAK;AACpD,QAAI,UAAU;AACd,QAAI,WAAW;AAEf,QAAI,iBAAiB;AACnB,YAAM,SAAS,gBAAgB,aAAa,KAAK;AACjD,YAAM,MAAM,gBAAgB,aAAa,KAAK;AAE9C,UAAI,OAAO,WAAW,YAAY,OAAO,SAAS,GAAG;AACnD,mBAAW;AAAA,MACb;AAEA,UAAI,OAAO,QAAQ,YAAY,IAAI,SAAS,GAAG;AAC7C,kBAAU;AAAA,MACZ;AAAA,IACF,OAAO;AACL,UAAI,cAAc;AAChB,kBAAU;AACV,mBACE;AAAA,MACJ;AAAA,IACF;AAEA,QAAI,YAAY,SAAS;AACvB,sBAAgB,UAAU,IAAI,0BAA0B;AACxD,sBAAgB,aAAa,OAAO,QAAQ;AAC5C,sBAAgB,aAAa,OAAO,GAAG,OAAO,EAAE;AAEhD,yBAAmB,UAAU,IAAI,yBAAyB;AAE1D,sBAAgB,YAAY,kBAAkB;AAC9C,sBAAgB,YAAY,eAAe;AAE3C,gBAAU,YAAY,eAAe;AAAA,IACvC;AAAA,EACF;AAEA,YAAU,YAAY,OAAO;AAE7B,MAAI,cAAc,cAAc;AAC9B,UAAM,WAAW,eAAe,KAAK;AACrC,cAAU,YAAY,QAAQ;AAAA,EAChC;AAEA,SAAO;AACT;"}

package/dist/composite/footer/elements/main-section/row-links/index.d.ts

@@ -1,10 +1,9 @@
-import { type SocialCampaignColumnsProps } from '../social';
-import { type slotColumnsProps } from './link-columns';
+import { SocialCampaignColumnsProps } from '../social';
+import { slotColumnsProps } from './link-columns';
 export declare const ROW_LINKS_CONTAINER = "umd-footer-row-links";
 export declare const ROW_LINKS_CONTAINER_WRAPPER = "umd-footer-row-links-wrapper";
 export declare const RowLinkStyles: string;
 export interface RowLinksProps extends SocialCampaignColumnsProps, slotColumnsProps {
 }
-declare const _default: (props: RowLinksProps) => HTMLDivElement;
-export default _default;
+export declare const createRowLinks: (props: RowLinksProps) => HTMLDivElement;
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/footer/elements/main-section/row-links/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../source/composite/footer/elements/main-section/row-links/index.ts"],"names":[],"mappings":"AAEA,OAAoC,EAElC,KAAK,0BAA0B,EAChC,MAAM,WAAW,CAAC;AACnB,OAA0B,EAExB,KAAK,gBAAgB,EACtB,MAAM,gBAAgB,CAAC;AAQxB,eAAO,MAAM,mBAAmB,yBAAyB,CAAC;AAC1D,eAAO,MAAM,2BAA2B,iCAAiC,CAAC;AAkB1E,eAAO,MAAM,aAAa,QAmCzB,CAAC;AAEF,MAAM,WAAW,aACf,SAAQ,0BAA0B,EAChC,gBAAgB;CAAG;gCAEA,aAAa;AAApC,wBAiBE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../source/composite/footer/elements/main-section/row-links/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,0BAA0B,EAChC,MAAM,WAAW,CAAC;AACnB,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,gBAAgB,CAAC;AAQxB,eAAO,MAAM,mBAAmB,yBAAyB,CAAC;AAC1D,eAAO,MAAM,2BAA2B,iCAAiC,CAAC;AAkB1E,eAAO,MAAM,aAAa,QAmCzB,CAAC;AAEF,MAAM,WAAW,aACf,SAAQ,0BAA0B,EAChC,gBAAgB;CAAG;AAEvB,eAAO,MAAM,cAAc,GAAI,OAAO,aAAa,mBAiBlD,CAAC"}

package/dist/composite/footer/elements/main-section/row-links/index.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Styles = require("@universityofmaryland/web-styles-library");
+const index = require("../../../../../utilities/theme/index.js");
+const social = require("../social.js");
+const linkColumns = require("./link-columns.js");
+const globals = require("../../../globals.js");
+const { LARGE } = globals.BREAKPOINTS;
+const { ELEMENT_WRAPPER } = globals.ELEMENTS;
+const { ELEMENT_NAME } = globals.VARIABLES;
+const { IS_THEME_LIGHT } = globals.REFERENCES;
+const ROW_LINKS_CONTAINER = "umd-footer-row-links";
+const ROW_LINKS_CONTAINER_WRAPPER = "umd-footer-row-links-wrapper";
+const ROW_LINKS_CONTAINER_LOCK = "umd-footer-row-links-lock";
+const socialOverwriteStyles = `
+  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
+    .${ROW_LINKS_CONTAINER} .${social.SOCIAL_COLUMN_WRAPPER} {
+      display: none;
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${ROW_LINKS_CONTAINER} .${social.SOCIAL_COLUMN_WRAPPER} {
+      display: block !important;
+    }
+  }
+`;
+const RowLinkStyles = `
+  .${ROW_LINKS_CONTAINER} {
+    padding-bottom: ${Styles.token.spacing.lg};
+    background-color: ${Styles.token.color.black};
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${ROW_LINKS_CONTAINER} {
+      padding-bottom: ${Styles.token.spacing["2xl"]};
+    }
+  }
+
+  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${ROW_LINKS_CONTAINER} {
+    background-color: ${Styles.token.color.gray.lightest};
+  }
+
+  .${ROW_LINKS_CONTAINER_WRAPPER}  {
+    display: flex;
+  }
+
+  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
+    .${ROW_LINKS_CONTAINER_WRAPPER}  {
+      flex-direction: column-reverse;
+      flex-wrap: wrap;
+    }
+  }
+
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ROW_LINKS_CONTAINER_LOCK}`]: Styles.layout.space.horizontal.larger
+  }
+})}
+
+  ${linkColumns.LinkColumnStyles}
+  ${socialOverwriteStyles}
+`;
+const createRowLinks = (props) => {
+  const container = document.createElement("div");
+  const lock = document.createElement("div");
+  const wrapper = document.createElement("div");
+  const socialColumnWrapper = social.createSocialCampaignColumns(props);
+  const linkColumnWrapper = linkColumns.createLinkColumns(props);
+  lock.classList.add(ROW_LINKS_CONTAINER_LOCK);
+  container.classList.add(ROW_LINKS_CONTAINER);
+  wrapper.classList.add(ROW_LINKS_CONTAINER_WRAPPER);
+  wrapper.appendChild(linkColumnWrapper);
+  wrapper.appendChild(socialColumnWrapper);
+  lock.appendChild(wrapper);
+  container.appendChild(lock);
+  return container;
+};
+exports.ROW_LINKS_CONTAINER = ROW_LINKS_CONTAINER;
+exports.ROW_LINKS_CONTAINER_WRAPPER = ROW_LINKS_CONTAINER_WRAPPER;
+exports.RowLinkStyles = RowLinkStyles;
+exports.createRowLinks = createRowLinks;
+//# sourceMappingURL=index.js.map

package/dist/composite/footer/elements/main-section/row-links/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../source/composite/footer/elements/main-section/row-links/index.ts"],"sourcesContent":["import { layout, token } from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport {\n  createSocialCampaignColumns,\n  SOCIAL_COLUMN_WRAPPER,\n  type SocialCampaignColumnsProps,\n} from '../social';\nimport {\n  createLinkColumns,\n  LinkColumnStyles,\n  type slotColumnsProps,\n} from './link-columns';\nimport { BREAKPOINTS, VARIABLES, ELEMENTS, REFERENCES } from '../../../globals';\n\nconst { LARGE } = BREAKPOINTS;\nconst { ELEMENT_WRAPPER } = ELEMENTS;\nconst { ELEMENT_NAME } = VARIABLES;\nconst { IS_THEME_LIGHT } = REFERENCES;\n\nexport const ROW_LINKS_CONTAINER = 'umd-footer-row-links';\nexport const ROW_LINKS_CONTAINER_WRAPPER = 'umd-footer-row-links-wrapper';\nconst ROW_LINKS_CONTAINER_LOCK = 'umd-footer-row-links-lock';\n\nconst socialOverwriteStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${ROW_LINKS_CONTAINER} .${SOCIAL_COLUMN_WRAPPER} {\n      display: none;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ROW_LINKS_CONTAINER} .${SOCIAL_COLUMN_WRAPPER} {\n      display: block !important;\n    }\n  }\n`;\n\n// prettier-ignore\nexport const RowLinkStyles = `\n  .${ROW_LINKS_CONTAINER} {\n    padding-bottom: ${token.spacing.lg};\n    background-color: ${token.color.black};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ROW_LINKS_CONTAINER} {\n      padding-bottom: ${token.spacing['2xl']};\n    }\n  }\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${ROW_LINKS_CONTAINER} {\n    background-color: ${token.color.gray.lightest};\n  }\n\n  .${ROW_LINKS_CONTAINER_WRAPPER}  {\n    display: flex;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${ROW_LINKS_CONTAINER_WRAPPER}  {\n      flex-direction: column-reverse;\n      flex-wrap: wrap;\n    }\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ROW_LINKS_CONTAINER_LOCK}`]: layout.space.horizontal.larger, \n    },\n  })}\n\n  ${LinkColumnStyles}\n  ${socialOverwriteStyles}\n`;\n\nexport interface RowLinksProps\n  extends SocialCampaignColumnsProps,\n    slotColumnsProps {}\n\nexport const createRowLinks = (props: RowLinksProps) => {\n  const container = document.createElement('div');\n  const lock = document.createElement('div');\n  const wrapper = document.createElement('div');\n  const socialColumnWrapper = createSocialCampaignColumns(props);\n  const linkColumnWrapper = createLinkColumns(props);\n\n  lock.classList.add(ROW_LINKS_CONTAINER_LOCK);\n  container.classList.add(ROW_LINKS_CONTAINER);\n  wrapper.classList.add(ROW_LINKS_CONTAINER_WRAPPER);\n\n  wrapper.appendChild(linkColumnWrapper);\n  wrapper.appendChild(socialColumnWrapper);\n  lock.appendChild(wrapper);\n  container.appendChild(lock);\n\n  return container;\n};\n"],"names":["BREAKPOINTS","ELEMENTS","VARIABLES","REFERENCES","SOCIAL_COLUMN_WRAPPER","token","Utils.theme.convertJSSObjectToStyles","layout","LinkColumnStyles","createSocialCampaignColumns","createLinkColumns"],"mappings":";;;;;;;AAcA,MAAM,EAAE,UAAUA,QAAAA;AAClB,MAAM,EAAE,oBAAoBC,QAAAA;AAC5B,MAAM,EAAE,iBAAiBC,QAAAA;AACzB,MAAM,EAAE,mBAAmBC,QAAAA;AAEpB,MAAM,sBAAsB;AAC5B,MAAM,8BAA8B;AAC3C,MAAM,2BAA2B;AAEjC,MAAM,wBAAwB;AAAA,eACf,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,mBAAmB,KAAKC,4BAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,eAKrC,YAAY,gBAAgB,KAAK;AAAA,OACzC,mBAAmB,KAAKA,4BAAqB;AAAA;AAAA;AAAA;AAAA;AAO7C,MAAM,gBAAgB;AAAA,KACxB,mBAAmB;AAAA,sBACFC,OAAAA,MAAM,QAAQ,EAAE;AAAA,wBACdA,OAAAA,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,eAG1B,YAAY,gBAAgB,KAAK;AAAA,OACzC,mBAAmB;AAAA,wBACFA,OAAAA,MAAM,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,KAIvC,eAAe,GAAG,cAAc,KAAK,mBAAmB;AAAA,wBACrCA,aAAM,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA,KAG5C,2BAA2B;AAAA;AAAA;AAAA;AAAA,eAIjB,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM9BC,+BAAqC;AAAA,EACrC,UAAU;AAAA,IACR,CAAC,IAAI,wBAAwB,EAAE,GAAGC,OAAAA,OAAO,MAAM,WAAW;AAAA,EAAA;AAE9D,CAAC,CAAC;AAAA;AAAA,IAEAC,YAAAA,gBAAgB;AAAA,IAChB,qBAAqB;AAAA;AAOlB,MAAM,iBAAiB,CAAC,UAAyB;AACtD,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,OAAO,SAAS,cAAc,KAAK;AACzC,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,QAAM,sBAAsBC,OAAAA,4BAA4B,KAAK;AAC7D,QAAM,oBAAoBC,YAAAA,kBAAkB,KAAK;AAEjD,OAAK,UAAU,IAAI,wBAAwB;AAC3C,YAAU,UAAU,IAAI,mBAAmB;AAC3C,UAAQ,UAAU,IAAI,2BAA2B;AAEjD,UAAQ,YAAY,iBAAiB;AACrC,UAAQ,YAAY,mBAAmB;AACvC,OAAK,YAAY,OAAO;AACxB,YAAU,YAAY,IAAI;AAE1B,SAAO;AACT;;;;;"}

package/dist/composite/footer/elements/main-section/row-links/index.mjs

@@ -0,0 +1,83 @@
+import { token, layout } from "@universityofmaryland/web-styles-library";
+import { convertJSSObjectToStyles } from "../../../../../utilities/theme/index.mjs";
+import { SOCIAL_COLUMN_WRAPPER, createSocialCampaignColumns } from "../social.mjs";
+import { LinkColumnStyles, createLinkColumns } from "./link-columns.mjs";
+import { VARIABLES, BREAKPOINTS, ELEMENTS, REFERENCES } from "../../../globals.mjs";
+const { LARGE } = BREAKPOINTS;
+const { ELEMENT_WRAPPER } = ELEMENTS;
+const { ELEMENT_NAME } = VARIABLES;
+const { IS_THEME_LIGHT } = REFERENCES;
+const ROW_LINKS_CONTAINER = "umd-footer-row-links";
+const ROW_LINKS_CONTAINER_WRAPPER = "umd-footer-row-links-wrapper";
+const ROW_LINKS_CONTAINER_LOCK = "umd-footer-row-links-lock";
+const socialOverwriteStyles = `
+  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
+    .${ROW_LINKS_CONTAINER} .${SOCIAL_COLUMN_WRAPPER} {
+      display: none;
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${ROW_LINKS_CONTAINER} .${SOCIAL_COLUMN_WRAPPER} {
+      display: block !important;
+    }
+  }
+`;
+const RowLinkStyles = `
+  .${ROW_LINKS_CONTAINER} {
+    padding-bottom: ${token.spacing.lg};
+    background-color: ${token.color.black};
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${ROW_LINKS_CONTAINER} {
+      padding-bottom: ${token.spacing["2xl"]};
+    }
+  }
+
+  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${ROW_LINKS_CONTAINER} {
+    background-color: ${token.color.gray.lightest};
+  }
+
+  .${ROW_LINKS_CONTAINER_WRAPPER}  {
+    display: flex;
+  }
+
+  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
+    .${ROW_LINKS_CONTAINER_WRAPPER}  {
+      flex-direction: column-reverse;
+      flex-wrap: wrap;
+    }
+  }
+
+  ${convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ROW_LINKS_CONTAINER_LOCK}`]: layout.space.horizontal.larger
+  }
+})}
+
+  ${LinkColumnStyles}
+  ${socialOverwriteStyles}
+`;
+const createRowLinks = (props) => {
+  const container = document.createElement("div");
+  const lock = document.createElement("div");
+  const wrapper = document.createElement("div");
+  const socialColumnWrapper = createSocialCampaignColumns(props);
+  const linkColumnWrapper = createLinkColumns(props);
+  lock.classList.add(ROW_LINKS_CONTAINER_LOCK);
+  container.classList.add(ROW_LINKS_CONTAINER);
+  wrapper.classList.add(ROW_LINKS_CONTAINER_WRAPPER);
+  wrapper.appendChild(linkColumnWrapper);
+  wrapper.appendChild(socialColumnWrapper);
+  lock.appendChild(wrapper);
+  container.appendChild(lock);
+  return container;
+};
+export {
+  ROW_LINKS_CONTAINER,
+  ROW_LINKS_CONTAINER_WRAPPER,
+  RowLinkStyles,
+  createRowLinks
+};
+//# sourceMappingURL=index.mjs.map

package/dist/composite/footer/elements/main-section/row-links/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../../../../source/composite/footer/elements/main-section/row-links/index.ts"],"sourcesContent":["import { layout, token } from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport {\n  createSocialCampaignColumns,\n  SOCIAL_COLUMN_WRAPPER,\n  type SocialCampaignColumnsProps,\n} from '../social';\nimport {\n  createLinkColumns,\n  LinkColumnStyles,\n  type slotColumnsProps,\n} from './link-columns';\nimport { BREAKPOINTS, VARIABLES, ELEMENTS, REFERENCES } from '../../../globals';\n\nconst { LARGE } = BREAKPOINTS;\nconst { ELEMENT_WRAPPER } = ELEMENTS;\nconst { ELEMENT_NAME } = VARIABLES;\nconst { IS_THEME_LIGHT } = REFERENCES;\n\nexport const ROW_LINKS_CONTAINER = 'umd-footer-row-links';\nexport const ROW_LINKS_CONTAINER_WRAPPER = 'umd-footer-row-links-wrapper';\nconst ROW_LINKS_CONTAINER_LOCK = 'umd-footer-row-links-lock';\n\nconst socialOverwriteStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${ROW_LINKS_CONTAINER} .${SOCIAL_COLUMN_WRAPPER} {\n      display: none;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ROW_LINKS_CONTAINER} .${SOCIAL_COLUMN_WRAPPER} {\n      display: block !important;\n    }\n  }\n`;\n\n// prettier-ignore\nexport const RowLinkStyles = `\n  .${ROW_LINKS_CONTAINER} {\n    padding-bottom: ${token.spacing.lg};\n    background-color: ${token.color.black};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ROW_LINKS_CONTAINER} {\n      padding-bottom: ${token.spacing['2xl']};\n    }\n  }\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${ROW_LINKS_CONTAINER} {\n    background-color: ${token.color.gray.lightest};\n  }\n\n  .${ROW_LINKS_CONTAINER_WRAPPER}  {\n    display: flex;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${ROW_LINKS_CONTAINER_WRAPPER}  {\n      flex-direction: column-reverse;\n      flex-wrap: wrap;\n    }\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ROW_LINKS_CONTAINER_LOCK}`]: layout.space.horizontal.larger, \n    },\n  })}\n\n  ${LinkColumnStyles}\n  ${socialOverwriteStyles}\n`;\n\nexport interface RowLinksProps\n  extends SocialCampaignColumnsProps,\n    slotColumnsProps {}\n\nexport const createRowLinks = (props: RowLinksProps) => {\n  const container = document.createElement('div');\n  const lock = document.createElement('div');\n  const wrapper = document.createElement('div');\n  const socialColumnWrapper = createSocialCampaignColumns(props);\n  const linkColumnWrapper = createLinkColumns(props);\n\n  lock.classList.add(ROW_LINKS_CONTAINER_LOCK);\n  container.classList.add(ROW_LINKS_CONTAINER);\n  wrapper.classList.add(ROW_LINKS_CONTAINER_WRAPPER);\n\n  wrapper.appendChild(linkColumnWrapper);\n  wrapper.appendChild(socialColumnWrapper);\n  lock.appendChild(wrapper);\n  container.appendChild(lock);\n\n  return container;\n};\n"],"names":["Utils.theme.convertJSSObjectToStyles"],"mappings":";;;;;AAcA,MAAM,EAAE,UAAU;AAClB,MAAM,EAAE,oBAAoB;AAC5B,MAAM,EAAE,iBAAiB;AACzB,MAAM,EAAE,mBAAmB;AAEpB,MAAM,sBAAsB;AAC5B,MAAM,8BAA8B;AAC3C,MAAM,2BAA2B;AAEjC,MAAM,wBAAwB;AAAA,eACf,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,mBAAmB,KAAK,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA,eAKrC,YAAY,gBAAgB,KAAK;AAAA,OACzC,mBAAmB,KAAK,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAO7C,MAAM,gBAAgB;AAAA,KACxB,mBAAmB;AAAA,sBACF,MAAM,QAAQ,EAAE;AAAA,wBACd,MAAM,MAAM,KAAK;AAAA;AAAA;AAAA,eAG1B,YAAY,gBAAgB,KAAK;AAAA,OACzC,mBAAmB;AAAA,wBACF,MAAM,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,KAIvC,eAAe,GAAG,cAAc,KAAK,mBAAmB;AAAA,wBACrC,MAAM,MAAM,KAAK,QAAQ;AAAA;AAAA;AAAA,KAG5C,2BAA2B;AAAA;AAAA;AAAA;AAAA,eAIjB,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM9BA,yBAAqC;AAAA,EACrC,UAAU;AAAA,IACR,CAAC,IAAI,wBAAwB,EAAE,GAAG,OAAO,MAAM,WAAW;AAAA,EAAA;AAE9D,CAAC,CAAC;AAAA;AAAA,IAEA,gBAAgB;AAAA,IAChB,qBAAqB;AAAA;AAOlB,MAAM,iBAAiB,CAAC,UAAyB;AACtD,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,OAAO,SAAS,cAAc,KAAK;AACzC,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,QAAM,sBAAsB,4BAA4B,KAAK;AAC7D,QAAM,oBAAoB,kBAAkB,KAAK;AAEjD,OAAK,UAAU,IAAI,wBAAwB;AAC3C,YAAU,UAAU,IAAI,mBAAmB;AAC3C,UAAQ,UAAU,IAAI,2BAA2B;AAEjD,UAAQ,YAAY,iBAAiB;AACrC,UAAQ,YAAY,mBAAmB;AACvC,OAAK,YAAY,OAAO;AACxB,YAAU,YAAY,IAAI;AAE1B,SAAO;AACT;"}

package/dist/composite/footer/elements/main-section/row-links/link-columns.d.ts

@@ -2,6 +2,5 @@ export declare const LinkColumnStyles: string;
 export interface slotColumnsProps {
     slotColumns?: HTMLSlotElement[];
 }
-declare const _default: (props: slotColumnsProps) => HTMLDivElement;
-export default _default;
+export declare const createLinkColumns: (props: slotColumnsProps) => HTMLDivElement;
 //# sourceMappingURL=link-columns.d.ts.map

package/dist/composite/footer/elements/main-section/row-links/link-columns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link-columns.d.ts","sourceRoot":"","sources":["../../../../../../source/composite/footer/elements/main-section/row-links/link-columns.ts"],"names":[],"mappings":"AAkNA,eAAO,MAAM,gBAAgB,QAiB5B,CAAC;AAuFF,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;CACjC;gCAEsB,gBAAgB;AAAvC,wBAiDE"}
+{"version":3,"file":"link-columns.d.ts","sourceRoot":"","sources":["../../../../../../source/composite/footer/elements/main-section/row-links/link-columns.ts"],"names":[],"mappings":"AAkNA,eAAO,MAAM,gBAAgB,QAiB5B,CAAC;AAuFF,MAAM,WAAW,gBAAgB;IAC/B,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;CACjC;AAED,eAAO,MAAM,iBAAiB,GAAI,OAAO,gBAAgB,mBAiDxD,CAAC"}

package/dist/composite/footer/elements/main-section/row-links/link-columns.js

@@ -0,0 +1,313 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Styles = require("@universityofmaryland/web-styles-library");
+const modify = require("../../../../../utilities/markup/modify.js");
+const index = require("../../../../../utilities/theme/index.js");
+const globals = require("../../../globals.js");
+const { MEDIUM, LARGE } = globals.BREAKPOINTS;
+const { ELEMENT_WRAPPER } = globals.ELEMENTS;
+const { ELEMENT_NAME } = globals.VARIABLES;
+const { IS_THEME_LIGHT } = globals.REFERENCES;
+const HEADLINE_ATTRIBUTE = "data-headline";
+const HEADLINE_ATTRIBUTE_EMPTY = "data-empty";
+const LINK_TYPE = "link";
+const HEADLINE_TYPE = "headline";
+const ROW_LINKS_COLUMNS_CONTAINER = "umd-footer-row-links-columns";
+const ROW_LINKS_COLUMN_WRAPPER = "umd-footer-row-links-column-wrapper";
+const ROW_LINKS_COLUMN_HEADLINE = `link-column-headline`;
+const ROW_LINKS_COLUMN_LINKS = `link-column-fonts`;
+const COLUMN_ONE_DEFAULT_LINKS = [
+  {
+    elmentType: LINK_TYPE,
+    title: "Careers",
+    url: "https://ejobs.umd.edu"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Office of Civil Rights & Sexual Misconduct",
+    url: "https://ocrsm.umd.edu"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "UMD Police Department",
+    url: "https://www.umpd.umd.edu"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Public Records Request",
+    url: "https://umd.edu/administration/public-information-request"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Report Fraud and Waste",
+    url: "https://finance.umd.edu/ethics-integrity-and-compliance-reporting"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Policies and Procedures",
+    url: "https://umd.edu/policies-and-procedures"
+  }
+];
+const COLUMN_TWO_DEFAULT_LINKS = [
+  {
+    elmentType: HEADLINE_TYPE,
+    title: "Information for"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Prospective Undergraduate Students",
+    url: "https://admissions.umd.edu/"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Prospective Graduate Students",
+    url: "https://gradschool.umd.edu/"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Parents & Families",
+    url: "https://admissions.umd.edu/persona/parent-families"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Alumni",
+    url: "https://alumni.umd.edu/"
+  }
+];
+const COLUMN_THREE_DEFAULT_LINKS = [
+  {
+    elmentType: HEADLINE_TYPE,
+    title: "Academics"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Academic Calendars",
+    url: "https://provost.umd.edu/node/3876"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Course Catalogs",
+    url: "https://academiccatalog.umd.edu"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Libraries",
+    url: "https://www.lib.umd.edu"
+  },
+  {
+    elmentType: LINK_TYPE,
+    title: "Terp Portals",
+    url: "https://testudo.umd.edu"
+  }
+];
+const HeadlineStyles = `
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ROW_LINKS_COLUMN_HEADLINE}`]: Styles.typography.elements.interativeMedium
+  }
+})}
+
+  .${ROW_LINKS_COLUMN_HEADLINE} {
+    margin-bottom: ${Styles.token.spacing.sm};
+    font-weight: 700;
+  }
+
+  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
+    .${ROW_LINKS_COLUMN_HEADLINE}[${HEADLINE_ATTRIBUTE_EMPTY}="true"] {
+      display: none;
+    }
+  }
+`;
+const LinkStyles = `
+  .${ROW_LINKS_COLUMN_LINKS}:not(:last-child) {
+    margin-bottom: ${Styles.token.spacing.sm};
+  }
+
+  .${ROW_LINKS_COLUMN_LINKS} > * {
+    margin-bottom: ${Styles.token.spacing.sm};
+  }
+
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ROW_LINKS_COLUMN_LINKS} a`]: Styles.typography.sans.smaller
+  }
+})}
+
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ROW_LINKS_COLUMN_LINKS} a`]: Styles.animation.line.slideUnderWhite
+  }
+})}
+
+  .${ROW_LINKS_COLUMN_LINKS} a,
+  .${ROW_LINKS_COLUMN_LINKS} span {
+    color: ${Styles.token.color.gray.light};
+  }
+
+  ${index.convertJSSObjectToStyles({
+  styleObj: {
+    [`.${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${ROW_LINKS_COLUMN_LINKS} a`]: Styles.animation.line.slideUnderBlack
+  }
+})}
+`;
+const ColumnWrapper = `
+  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {
+    .${ROW_LINKS_COLUMN_WRAPPER} {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0 ${Styles.token.spacing.md};
+    }
+  }
+
+  @container ${ELEMENT_NAME} (max-width: ${MEDIUM - 1}px) {
+    .${ROW_LINKS_COLUMN_WRAPPER}:not(:last-child) {
+      margin-bottom: ${Styles.token.spacing.lg};
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${ROW_LINKS_COLUMN_WRAPPER} {
+      padding-right: ${Styles.token.spacing.xs};
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${ROW_LINKS_COLUMN_WRAPPER}:not(:first-child) {
+      margin-left: ${Styles.token.spacing.lg};
+      padding-left: ${Styles.token.spacing.lg};
+      border-left: 1px solid ${Styles.token.color.gray.dark};
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {
+    .${ROW_LINKS_COLUMN_WRAPPER} > p {
+      grid-column: 1 / span 2;
+    }
+  }
+`;
+const LinkColumnStyles = `
+  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
+    .${ROW_LINKS_COLUMNS_CONTAINER} {
+      padding-top: ${Styles.token.spacing.md};
+    }
+  }
+
+  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
+    .${ROW_LINKS_COLUMNS_CONTAINER} {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+
+  ${ColumnWrapper}
+  ${HeadlineStyles}
+  ${LinkStyles}
+`;
+const CreateDefaultColumn = ({
+  defaultContent
+}) => {
+  const container = document.createElement("div");
+  container.classList.add(ROW_LINKS_COLUMN_WRAPPER);
+  defaultContent.forEach((row) => {
+    if (row.elmentType === LINK_TYPE) {
+      if (row.url) {
+        const wrapper = document.createElement("div");
+        const link = document.createElement("a");
+        const span = document.createElement("span");
+        span.textContent = row.title;
+        link.appendChild(span);
+        link.href = row.url;
+        link.target = "_blank";
+        link.rel = "noopener noreferrer";
+        wrapper.classList.add(ROW_LINKS_COLUMN_LINKS);
+        wrapper.appendChild(link);
+        container.appendChild(wrapper);
+      }
+    } else if (row.elmentType === HEADLINE_TYPE) {
+      const headline = document.createElement("p");
+      headline.textContent = row.title;
+      headline.classList.add(ROW_LINKS_COLUMN_HEADLINE);
+      container.appendChild(headline);
+    }
+  });
+  return container;
+};
+const CreateSlotColumn = ({
+  slot,
+  hasHeadlines,
+  isColumnOne
+}) => {
+  const container = document.createElement("div");
+  container.classList.add(ROW_LINKS_COLUMN_WRAPPER);
+  const wrapper = document.createElement("div");
+  const links = Array.from(slot.querySelectorAll("a")).map((link) => {
+    const linkWrapper = document.createElement("div");
+    linkWrapper.classList.add(ROW_LINKS_COLUMN_LINKS);
+    modify.animationLinkSpan({ element: link });
+    linkWrapper.appendChild(link);
+    return linkWrapper;
+  });
+  if (hasHeadlines) {
+    const headline = slot.getAttribute(HEADLINE_ATTRIBUTE);
+    const headlineElement = document.createElement("p");
+    headlineElement.classList.add(ROW_LINKS_COLUMN_HEADLINE);
+    headlineElement.innerHTML = headline;
+    if (!headline && !isColumnOne) {
+      headlineElement.setAttribute(HEADLINE_ATTRIBUTE_EMPTY, "true");
+      wrapper.appendChild(headlineElement);
+    }
+    if (headline) {
+      wrapper.appendChild(headlineElement);
+    }
+  }
+  links.forEach((link) => {
+    wrapper.appendChild(link);
+  });
+  container.appendChild(wrapper);
+  return container;
+};
+const createLinkColumns = (props) => {
+  const { slotColumns } = props;
+  const container = document.createElement("div");
+  if (slotColumns) {
+    const hasHeadlines = slotColumns.some(
+      (slot) => slot.hasAttribute(HEADLINE_ATTRIBUTE)
+    );
+    slotColumns.forEach((slot, index2) => {
+      const slotToAppend = CreateSlotColumn({
+        slot,
+        hasHeadlines,
+        isColumnOne: index2 === 0
+      });
+      if (slotToAppend) container.appendChild(slotToAppend);
+    });
+    if (hasHeadlines) {
+      setTimeout(() => {
+        const headlines = Array.from(
+          container.querySelectorAll(`.${ROW_LINKS_COLUMN_HEADLINE}`)
+        );
+        const renderedHeadlinesSize = headlines.reduce((acc, headline) => {
+          return headline.offsetHeight > acc ? headline.offsetHeight : acc;
+        }, 10);
+        headlines.forEach((headline) => {
+          headline.style.height = `${renderedHeadlinesSize}px`;
+        });
+      }, 200);
+    }
+  } else {
+    container.appendChild(
+      CreateDefaultColumn({ defaultContent: COLUMN_ONE_DEFAULT_LINKS })
+    );
+    container.appendChild(
+      CreateDefaultColumn({ defaultContent: COLUMN_TWO_DEFAULT_LINKS })
+    );
+    container.appendChild(
+      CreateDefaultColumn({ defaultContent: COLUMN_THREE_DEFAULT_LINKS })
+    );
+  }
+  container.classList.add(ROW_LINKS_COLUMNS_CONTAINER);
+  return container;
+};
+exports.LinkColumnStyles = LinkColumnStyles;
+exports.createLinkColumns = createLinkColumns;
+//# sourceMappingURL=link-columns.js.map