@universityofmaryland/web-elements-library 1.4.7 → 1.5.0-beta.0

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

@@ -1,199 +1,31 @@
 import { token, typography } from "@universityofmaryland/web-styles-library";
-import { FACEBOOK, X, INSTAGRAM, YOUTUBE, TWITTER, LINKEDIN, THREADS } from "../../../../utilities/assets/social.mjs";
-import { convertJSSObjectToStyles } from "../../../../utilities/theme/index.mjs";
-import { CAMPAIGN_COLUMN_WRAPPER, createCampaign } from "./campaign.mjs";
-import { BREAKPOINTS, ELEMENTS, REFERENCES, VARIABLES } from "../../globals.mjs";
-const { LARGE, MEDIUM } = BREAKPOINTS;
-const { ELEMENT_WRAPPER } = ELEMENTS;
-const { ELEMENT_NAME } = VARIABLES;
-const { IS_THEME_LIGHT } = REFERENCES;
+import { facebook, x, instagram, youtube, twitter, linkedin, threads } from "@universityofmaryland/web-icons-library/social";
+import createCampaignRow from "./campaign.mjs";
+import { BREAKPOINTS } from "../../globals.mjs";
+import { createDiv, create } from "../../../../model/elements/index.mjs";
 const ATTRIBUTE_LAYOUT = "layout";
 const LAYOUT_GRID = "grid";
-const SOCIAL_COLUMN_WRAPPER = "umd-footer-social-column_wrapper";
-const SOCIAL_CONTAINER = "umd-footer-social-container";
-const SOCIAL_CONTAINER_WRAPPER = "umd-footer-social-container_wrapper";
-const SOCIAL_CONTAINER_HEADLINE = "umd-footer-social-container_headline";
-const IS_LAYOUT_GRID = `[${ATTRIBUTE_LAYOUT}="${LAYOUT_GRID}"]`;
-const OVERWRITE_GRID_CONTAINER = `.${SOCIAL_CONTAINER}${IS_LAYOUT_GRID}`;
-const OVERWRITE_GRID_WRAPPER = `${OVERWRITE_GRID_CONTAINER} .${SOCIAL_CONTAINER_WRAPPER}`;
-const OverwriteGridStyle = `
-  ${OVERWRITE_GRID_CONTAINER} {
-    flex-direction: column;
-    padding-left: 0;
-    align-items: flex-start;
-    margin-left: 0;
-  }
-
-  @media (min-width: ${LARGE}px) {
-    ${OVERWRITE_GRID_CONTAINER} {
-      align-items: center;
-    }
-  }
-
-  @media (min-width: ${LARGE}px) {
-    ${OVERWRITE_GRID_CONTAINER} > p {
-      align-self: center;
-    }
-  }
-
-  ${OVERWRITE_GRID_WRAPPER} {
-    grid-template-columns: repeat(3, 1fr);
-    margin-left: 0;
-    margin-top: ${token.spacing.sm};
-  }
-`;
-const campaignOverwriteStyles = `
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    .${SOCIAL_COLUMN_WRAPPER} .${CAMPAIGN_COLUMN_WRAPPER} {
-      display: none;
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${SOCIAL_COLUMN_WRAPPER} .${CAMPAIGN_COLUMN_WRAPPER} {
-      display: flex;
-      justify-content: flex-end;
-      margin-left: auto;
-    }
-  }
-`;
-const themeOverwriteStyles = `
-  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT}  .${SOCIAL_CONTAINER_WRAPPER} a {
-    background-color: ${token.color.gray.light};
-  }
-
-  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${SOCIAL_CONTAINER_WRAPPER} a > *,
-  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${SOCIAL_CONTAINER_WRAPPER} a path {
-    fill: ${token.color.black} !important;
-  }
-
-  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT}  .${SOCIAL_CONTAINER_WRAPPER} a:hover {
-    background-color: ${token.color.gray.dark};
-  }
-
-  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${SOCIAL_CONTAINER_WRAPPER} a:hover path {
-    fill: ${token.color.gray.light} !important;
-  }
-`;
-const SocialContainerStyles = `
-  .${SOCIAL_CONTAINER} {
-    margin-left: auto;
-    display: flex;
-    align-items: center;
-    align-self: flex-start;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${SOCIAL_CONTAINER} {
-      justify-content: flex-end;
-      padding-left: ${token.spacing["2xl"]};
-    }
-  }
-
-  .${SOCIAL_CONTAINER} > p {
-    align-self: flex-start;
-    padding-top: 3px;
-    font-weight: 700;
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {
-    .${SOCIAL_COLUMN_WRAPPER} {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      grid-column: 1 / span 2;
-      gap: ${token.spacing.md};
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${SOCIAL_COLUMN_WRAPPER} {
-      margin-left: auto;
-    }
-  }
-
-  .${SOCIAL_CONTAINER_WRAPPER} {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: ${token.spacing.xs};
-    margin-left: ${token.spacing.xs};
-  }
-
-  .${SOCIAL_CONTAINER_WRAPPER}[count="4"] {
-    grid-template-columns: repeat(4, 1fr);
-  }
-
-  .${SOCIAL_CONTAINER_WRAPPER} a {
-    background-color: ${token.color.gray.darker};
-    height: 32px;
-    width: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color .5s;
-  }
-
-  .${SOCIAL_CONTAINER_WRAPPER} a > *,
-  .${SOCIAL_CONTAINER_WRAPPER} a path {
-    max-height: 20px !important;
-    fill: ${token.color.white} !important;
-    transition: fill .5s;
-  }
-
-  .${SOCIAL_CONTAINER_WRAPPER} a:hover {
-    background-color: ${token.color.gray.light};
-  }
-
-  .${SOCIAL_CONTAINER_WRAPPER} a:hover path {
-    fill: ${token.color.gray.dark} !important;
-  }
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${SOCIAL_CONTAINER_HEADLINE}`]: typography.elements.interativeMedium
-  }
-})}
-
-  ${campaignOverwriteStyles}
-  ${themeOverwriteStyles}
-  ${OverwriteGridStyle}
-`;
+const { LARGE } = BREAKPOINTS;
 const GetSocialIcon = ({ link }) => {
   const url = link.getAttribute("href") || null;
   if (!url) return link;
-  if (url.match(/facebook.com/)) {
-    link.innerHTML = FACEBOOK;
-  }
-  if (url.match(/x.com/)) {
-    link.innerHTML = X;
-  }
-  if (url.match(/instagram.com/)) {
-    link.innerHTML = INSTAGRAM;
-  }
-  if (url.match(/youtube.com/)) {
-    link.innerHTML = YOUTUBE;
-  }
-  if (url.match(/twitter.com/)) {
-    link.innerHTML = TWITTER;
-  }
-  if (url.match(/linkedin.com/)) {
-    link.innerHTML = LINKEDIN;
-  }
-  if (url.match(/threads.net/)) {
-    link.innerHTML = THREADS;
-  }
+  if (url.match(/facebook.com/)) link.innerHTML = facebook;
+  if (url.match(/x.com/)) link.innerHTML = x;
+  if (url.match(/instagram.com/)) link.innerHTML = instagram;
+  if (url.match(/youtube.com/)) link.innerHTML = youtube;
+  if (url.match(/twitter.com/)) link.innerHTML = twitter;
+  if (url.match(/linkedin.com/)) link.innerHTML = linkedin;
+  if (url.match(/threads.net/)) link.innerHTML = threads;
   return link;
 };
-const CreateSocialRow = ({ slotSocialLinks }) => {
-  const container = document.createElement("div");
-  const linksWrapper = document.createElement("div");
-  const headline = document.createElement("p");
+const CreateSocialRow = (props) => {
+  const { isThemeLight, slotSocialLinks } = props;
   let socialLinks = [];
   if (slotSocialLinks) {
     const socialLinksClone = slotSocialLinks.cloneNode(true);
-    const slottedSocialLinks = Array.from(
-      socialLinksClone.querySelectorAll(`a`)
+    socialLinks = Array.from(
+      socialLinksClone.querySelectorAll("a")
     );
-    socialLinks = slottedSocialLinks;
   }
   if (socialLinks.length === 0) {
     const socialLink = ({ url, label }) => {
@@ -223,33 +55,128 @@ const CreateSocialRow = ({ slotSocialLinks }) => {
       })
     );
   }
-  socialLinks.forEach(
-    (link) => linksWrapper.appendChild(GetSocialIcon({ link }))
+  const headline = create({
+    element: document.createElement("p"),
+    className: "umd-footer-social-container_headline",
+    elementStyles: {
+      element: {
+        paddingTop: "3px",
+        fontWeight: 700,
+        ...typography.elements.interativeMedium
+      }
+    }
+  });
+  headline.element.innerText = "Stay Connected";
+  const socialLinkChildren = socialLinks.map(
+    (link) => create({
+      element: GetSocialIcon({ link }),
+      className: "umd-footer-social-link",
+      elementStyles: {
+        element: {
+          backgroundColor: token.color.gray.darker,
+          height: "32px",
+          width: "32px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          transition: "background-color .5s",
+          ["& > *, & path"]: {
+            fill: `${token.color.white} !important`,
+            transition: "fill .5s",
+            maxHeight: "20px !important"
+          },
+          ["&:hover"]: {
+            backgroundColor: token.color.gray.light,
+            ["& path"]: {
+              fill: `${token.color.gray.dark} !important`
+            }
+          },
+          ...isThemeLight && {
+            backgroundColor: token.color.gray.light,
+            ["&:hover"]: {
+              backgroundColor: token.color.gray.dark,
+              ["& path"]: {
+                fill: `${token.color.gray.light} !important`
+              }
+            },
+            ["& > *, & path"]: {
+              fill: `${token.color.black} !important`
+            }
+          }
+        }
+      }
+    })
   );
-  container.classList.add(SOCIAL_CONTAINER);
-  linksWrapper.classList.add(SOCIAL_CONTAINER_WRAPPER);
-  linksWrapper.setAttribute("count", `${socialLinks.length}`);
-  headline.classList.add(SOCIAL_CONTAINER_HEADLINE);
-  headline.innerText = "Stay Connected";
-  container.appendChild(headline);
-  container.appendChild(linksWrapper);
+  const gridColumns = Math.min(socialLinks.length, 3);
+  const linksWrapper = createDiv({
+    className: "umd-footer-social-container_wrapper",
+    children: socialLinkChildren,
+    elementStyles: {
+      element: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
+        gridGap: token.spacing.xs,
+        marginLeft: token.spacing.xs
+      }
+    }
+  });
+  linksWrapper.element.setAttribute("count", `${socialLinks.length}`);
+  const containerChildren = [headline, linksWrapper];
+  const container = createDiv({
+    className: "umd-footer-social-container",
+    children: containerChildren,
+    elementStyles: {
+      element: {
+        marginLeft: "auto",
+        display: "flex",
+        alignItems: "center",
+        alignSelf: "flex-start",
+        ["& > p"]: {
+          alignSelf: "flex-start",
+          paddingTop: "3px",
+          fontWeight: 700
+        },
+        [`@container (min-width: 1000px)`]: {
+          justifyContent: "flex-end",
+          paddingLeft: token.spacing["2xl"]
+        }
+      }
+    }
+  });
   if (socialLinks.length >= 4) {
-    container.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_GRID);
+    container.element.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_GRID);
   }
   return container;
 };
 const createSocialCampaignColumns = (props) => {
-  const socialColumnWrapper = document.createElement("div");
   const socialContainer = CreateSocialRow(props);
-  const campaignContainer = createCampaign(props);
-  socialColumnWrapper.classList.add(SOCIAL_COLUMN_WRAPPER);
-  socialColumnWrapper.appendChild(socialContainer);
-  socialColumnWrapper.appendChild(campaignContainer);
-  return socialColumnWrapper;
+  const campaignContainer = createCampaignRow(props);
+  const { isTypeSimple } = props;
+  return createDiv({
+    className: "umd-footer-social-column_wrapper",
+    children: [socialContainer, campaignContainer],
+    elementStyles: {
+      element: {
+        [`@container  (max-width: ${LARGE - 1}px)`]: {
+          marginTop: token.spacing.md,
+          [`& > .campaign-column-wrapper`]: {
+            display: "none"
+          },
+          ...isTypeSimple && {
+            display: "none"
+          }
+        },
+        [`@container (min-width: ${LARGE}px)`]: {
+          marginLeft: "auto",
+          [`.umd-footer-contact-container &`]: {
+            display: "none"
+          }
+        }
+      }
+    }
+  });
 };
 export {
-  SOCIAL_COLUMN_WRAPPER,
-  SocialContainerStyles,
-  createSocialCampaignColumns
+  createSocialCampaignColumns as default
 };
 //# sourceMappingURL=social.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"social.mjs","sources":["../../../../../source/composite/footer/elements/main-section/social.ts"],"sourcesContent":["import { token, typography } from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport { createCampaign as createCampaignRow, CAMPAIGN_COLUMN_WRAPPER } from './campaign';\nimport { BREAKPOINTS, ELEMENTS, VARIABLES, REFERENCES } from '../../globals';\nimport { BaseProps } from '../../_types';\n\nconst { LARGE, MEDIUM } = BREAKPOINTS;\nconst { ELEMENT_WRAPPER } = ELEMENTS;\nconst { ELEMENT_NAME } = VARIABLES;\nconst { IS_THEME_LIGHT } = REFERENCES;\n\nconst ATTRIBUTE_LAYOUT = 'layout';\nconst LAYOUT_GRID = 'grid';\n\nexport const SOCIAL_COLUMN_WRAPPER = 'umd-footer-social-column_wrapper';\nconst SOCIAL_CONTAINER = 'umd-footer-social-container';\nconst SOCIAL_CONTAINER_WRAPPER = 'umd-footer-social-container_wrapper';\nconst SOCIAL_CONTAINER_HEADLINE = 'umd-footer-social-container_headline';\n\nconst IS_LAYOUT_GRID = `[${ATTRIBUTE_LAYOUT}=\"${LAYOUT_GRID}\"]`;\n\nconst OVERWRITE_GRID_CONTAINER = `.${SOCIAL_CONTAINER}${IS_LAYOUT_GRID}`;\nconst OVERWRITE_GRID_WRAPPER = `${OVERWRITE_GRID_CONTAINER} .${SOCIAL_CONTAINER_WRAPPER}`;\n\nconst OverwriteGridStyle = `\n  ${OVERWRITE_GRID_CONTAINER} {\n    flex-direction: column;\n    padding-left: 0;\n    align-items: flex-start;\n    margin-left: 0;\n  }\n\n  @media (min-width: ${LARGE}px) {\n    ${OVERWRITE_GRID_CONTAINER} {\n      align-items: center;\n    }\n  }\n\n  @media (min-width: ${LARGE}px) {\n    ${OVERWRITE_GRID_CONTAINER} > p {\n      align-self: center;\n    }\n  }\n\n  ${OVERWRITE_GRID_WRAPPER} {\n    grid-template-columns: repeat(3, 1fr);\n    margin-left: 0;\n    margin-top: ${token.spacing.sm};\n  }\n`;\n\nconst campaignOverwriteStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${SOCIAL_COLUMN_WRAPPER} .${CAMPAIGN_COLUMN_WRAPPER} {\n      display: none;\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${SOCIAL_COLUMN_WRAPPER} .${CAMPAIGN_COLUMN_WRAPPER} {\n      display: flex;\n      justify-content: flex-end;\n      margin-left: auto;\n    }\n  }\n`;\n\nconst themeOverwriteStyles = `\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT}  .${SOCIAL_CONTAINER_WRAPPER} a {\n    background-color: ${token.color.gray.light};\n  }\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${SOCIAL_CONTAINER_WRAPPER} a > *,\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${SOCIAL_CONTAINER_WRAPPER} a path {\n    fill: ${token.color.black} !important;\n  }\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT}  .${SOCIAL_CONTAINER_WRAPPER} a:hover {\n    background-color: ${token.color.gray.dark};\n  }\n\n  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${SOCIAL_CONTAINER_WRAPPER} a:hover path {\n    fill: ${token.color.gray.light} !important;\n  }\n`;\n\n// prettier-ignore\nexport const SocialContainerStyles = `\n  .${SOCIAL_CONTAINER} {\n    margin-left: auto;\n    display: flex;\n    align-items: center;\n    align-self: flex-start;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${SOCIAL_CONTAINER} {\n      justify-content: flex-end;\n      padding-left: ${token.spacing['2xl']};\n    }\n  }\n\n  .${SOCIAL_CONTAINER} > p {\n    align-self: flex-start;\n    padding-top: 3px;\n    font-weight: 700;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {\n    .${SOCIAL_COLUMN_WRAPPER} {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      grid-column: 1 / span 2;\n      gap: ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${SOCIAL_COLUMN_WRAPPER} {\n      margin-left: auto;\n    }\n  }\n\n  .${SOCIAL_CONTAINER_WRAPPER} {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    grid-gap: ${token.spacing.xs};\n    margin-left: ${token.spacing.xs};\n  }\n\n  .${SOCIAL_CONTAINER_WRAPPER}[count=\"4\"] {\n    grid-template-columns: repeat(4, 1fr);\n  }\n\n  .${SOCIAL_CONTAINER_WRAPPER} a {\n    background-color: ${token.color.gray.darker};\n    height: 32px;\n    width: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: background-color .5s;\n  }\n\n  .${SOCIAL_CONTAINER_WRAPPER} a > *,\n  .${SOCIAL_CONTAINER_WRAPPER} a path {\n    max-height: 20px !important;\n    fill: ${token.color.white} !important;\n    transition: fill .5s;\n  }\n\n  .${SOCIAL_CONTAINER_WRAPPER} a:hover {\n    background-color: ${token.color.gray.light};\n  }\n\n  .${SOCIAL_CONTAINER_WRAPPER} a:hover path {\n    fill: ${token.color.gray.dark} !important;\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${SOCIAL_CONTAINER_HEADLINE}`]: typography.elements.interativeMedium,\n    },\n  })}\n\n  ${campaignOverwriteStyles}\n  ${themeOverwriteStyles}\n  ${OverwriteGridStyle}\n`;\n\n// Enforce known social link types logos\nconst GetSocialIcon = ({ link }: { link: HTMLAnchorElement }) => {\n  const url = link.getAttribute('href') || null;\n\n  if (!url) return link;\n\n  if (url.match(/facebook.com/)) {\n    link.innerHTML = Utils.asset.social.FACEBOOK;\n  }\n\n  if (url.match(/x.com/)) {\n    link.innerHTML = Utils.asset.social.X;\n  }\n\n  if (url.match(/instagram.com/)) {\n    link.innerHTML = Utils.asset.social.INSTAGRAM;\n  }\n\n  if (url.match(/youtube.com/)) {\n    link.innerHTML = Utils.asset.social.YOUTUBE;\n  }\n\n  if (url.match(/twitter.com/)) {\n    link.innerHTML = Utils.asset.social.TWITTER;\n  }\n\n  if (url.match(/linkedin.com/)) {\n    link.innerHTML = Utils.asset.social.LINKEDIN;\n  }\n\n  if (url.match(/threads.net/)) {\n    link.innerHTML = Utils.asset.social.THREADS;\n  }\n\n  return link;\n};\n\ninterface SocialProps {\n  slotSocialLinks?: HTMLSlotElement;\n}\n\nconst CreateSocialRow = ({ slotSocialLinks }: SocialProps) => {\n  const container = document.createElement('div');\n  const linksWrapper = document.createElement('div');\n  const headline = document.createElement('p');\n  let socialLinks: HTMLAnchorElement[] = [];\n\n  if (slotSocialLinks) {\n    const socialLinksClone = slotSocialLinks.cloneNode(true) as HTMLSlotElement;\n    const slottedSocialLinks = Array.from(\n      socialLinksClone.querySelectorAll(`a`),\n    ) as HTMLAnchorElement[];\n    socialLinks = slottedSocialLinks;\n  }\n\n  // Enforce university default links if none are provided\n  if (socialLinks.length === 0) {\n    const socialLink = ({ url, label }: { label: string; url: string }) => {\n      const link = document.createElement('a');\n      link.setAttribute('href', url);\n      link.setAttribute('target', '_blank');\n      link.setAttribute('rel', 'noopener noreferrer');\n      link.setAttribute('aria-label', label);\n      return link;\n    };\n\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.youtube.com/user/UMD2101',\n        label: 'Link to the youtube channel for the University of Maryland',\n      }),\n    );\n\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.facebook.com/UnivofMaryland',\n        label: 'Link to the facebook page for the University of Maryland',\n      }),\n    );\n\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.instagram.com/univofmaryland',\n        label: 'Link to the instagram page for the University of Maryland',\n      }),\n    );\n  }\n\n  socialLinks.forEach((link) =>\n    linksWrapper.appendChild(GetSocialIcon({ link })),\n  );\n\n  container.classList.add(SOCIAL_CONTAINER);\n  linksWrapper.classList.add(SOCIAL_CONTAINER_WRAPPER);\n  linksWrapper.setAttribute('count', `${socialLinks.length}`);\n\n  headline.classList.add(SOCIAL_CONTAINER_HEADLINE);\n  headline.innerText = 'Stay Connected';\n\n  container.appendChild(headline);\n  container.appendChild(linksWrapper);\n  if (socialLinks.length >= 4) {\n    container.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_GRID);\n  }\n\n  return container;\n};\n\nexport interface SocialCampaignColumnsProps extends BaseProps, SocialProps {}\n\nexport const createSocialCampaignColumns = (props: SocialCampaignColumnsProps) => {\n  const socialColumnWrapper = document.createElement('div');\n  const socialContainer = CreateSocialRow(props);\n  const campaignContainer = createCampaignRow(props);\n\n  socialColumnWrapper.classList.add(SOCIAL_COLUMN_WRAPPER);\n\n  socialColumnWrapper.appendChild(socialContainer);\n  socialColumnWrapper.appendChild(campaignContainer);\n\n  return socialColumnWrapper;\n};\n"],"names":["Utils.theme.convertJSSObjectToStyles","Utils.asset.social.FACEBOOK","Utils.asset.social.X","Utils.asset.social.INSTAGRAM","Utils.asset.social.YOUTUBE","Utils.asset.social.TWITTER","Utils.asset.social.LINKEDIN","Utils.asset.social.THREADS","createCampaignRow"],"mappings":"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"}
+{"version":3,"file":"social.mjs","sources":["../../../../../source/composite/footer/elements/main-section/social.ts"],"sourcesContent":["import { token, typography } from '@universityofmaryland/web-styles-library';\nimport {\n  facebook as iconFacebook,\n  x as iconX,\n  linkedin as iconLinkedIn,\n  twitter as iconTwitter,\n  youtube as iconYoutube,\n  instagram as iconInstagram,\n  threads as iconThreads,\n} from '@universityofmaryland/web-icons-library/social';\nimport createCampaignRow from './campaign';\nimport { BREAKPOINTS } from '../../globals';\nimport { BaseProps } from '../../_types';\nimport { ElementModel } from 'model';\nimport { type ElementVisual } from '../../../../_types';\n\ninterface SocialProps extends BaseProps {\n  slotSocialLinks?: HTMLSlotElement;\n}\n\nexport interface SocialCampaignColumnsProps extends SocialProps {}\n\nconst ATTRIBUTE_LAYOUT = 'layout';\nconst LAYOUT_GRID = 'grid';\nconst { LARGE } = BREAKPOINTS;\n\nconst GetSocialIcon = ({ link }: { link: HTMLAnchorElement }) => {\n  const url = link.getAttribute('href') || null;\n  if (!url) return link;\n\n  if (url.match(/facebook.com/)) link.innerHTML = iconFacebook;\n  if (url.match(/x.com/)) link.innerHTML = iconX;\n  if (url.match(/instagram.com/)) link.innerHTML = iconInstagram;\n  if (url.match(/youtube.com/)) link.innerHTML = iconYoutube;\n  if (url.match(/twitter.com/)) link.innerHTML = iconTwitter;\n  if (url.match(/linkedin.com/)) link.innerHTML = iconLinkedIn;\n  if (url.match(/threads.net/)) link.innerHTML = iconThreads;\n\n  return link;\n};\n\nconst CreateSocialRow = (props: SocialProps): ElementVisual => {\n  const { isThemeLight, slotSocialLinks } = props;\n\n  let socialLinks: HTMLAnchorElement[] = [];\n\n  if (slotSocialLinks) {\n    const socialLinksClone = slotSocialLinks.cloneNode(true) as HTMLSlotElement;\n    socialLinks = Array.from(\n      socialLinksClone.querySelectorAll('a'),\n    ) as HTMLAnchorElement[];\n  }\n\n  if (socialLinks.length === 0) {\n    const socialLink = ({ url, label }: { label: string; url: string }) => {\n      const link = document.createElement('a');\n      link.setAttribute('href', url);\n      link.setAttribute('target', '_blank');\n      link.setAttribute('rel', 'noopener noreferrer');\n      link.setAttribute('aria-label', label);\n      return link;\n    };\n\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.youtube.com/user/UMD2101',\n        label: 'Link to the youtube channel for the University of Maryland',\n      }),\n    );\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.facebook.com/UnivofMaryland',\n        label: 'Link to the facebook page for the University of Maryland',\n      }),\n    );\n    socialLinks.push(\n      socialLink({\n        url: 'https://www.instagram.com/univofmaryland',\n        label: 'Link to the instagram page for the University of Maryland',\n      }),\n    );\n  }\n\n  const headline = ElementModel.create({\n    element: document.createElement('p'),\n    className: 'umd-footer-social-container_headline',\n    elementStyles: {\n      element: {\n        paddingTop: '3px',\n        fontWeight: 700,\n        ...typography.elements.interativeMedium,\n      },\n    },\n  });\n  headline.element.innerText = 'Stay Connected';\n\n  const socialLinkChildren = socialLinks.map((link) =>\n    ElementModel.create({\n      element: GetSocialIcon({ link }),\n      className: 'umd-footer-social-link',\n      elementStyles: {\n        element: {\n          backgroundColor: token.color.gray.darker,\n          height: '32px',\n          width: '32px',\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          transition: 'background-color .5s',\n\n          ['& > *, & path']: {\n            fill: `${token.color.white} !important`,\n            transition: 'fill .5s',\n            maxHeight: '20px !important',\n          },\n\n          ['&:hover']: {\n            backgroundColor: token.color.gray.light,\n\n            ['& path']: {\n              fill: `${token.color.gray.dark} !important`,\n            },\n          },\n\n          ...(isThemeLight && {\n            backgroundColor: token.color.gray.light,\n\n            ['&:hover']: {\n              backgroundColor: token.color.gray.dark,\n\n              ['& path']: {\n                fill: `${token.color.gray.light} !important`,\n              },\n            },\n\n            ['& > *, & path']: {\n              fill: `${token.color.black} !important`,\n            },\n          }),\n        },\n      },\n    }),\n  );\n\n  const gridColumns = Math.min(socialLinks.length, 3);\n\n  const linksWrapper = ElementModel.createDiv({\n    className: 'umd-footer-social-container_wrapper',\n    children: socialLinkChildren,\n    elementStyles: {\n      element: {\n        display: 'grid',\n        gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n        gridGap: token.spacing.xs,\n        marginLeft: token.spacing.xs,\n      },\n    },\n  });\n  linksWrapper.element.setAttribute('count', `${socialLinks.length}`);\n\n  const containerChildren = [headline, linksWrapper];\n\n  const container = ElementModel.createDiv({\n    className: 'umd-footer-social-container',\n    children: containerChildren,\n    elementStyles: {\n      element: {\n        marginLeft: 'auto',\n        display: 'flex',\n        alignItems: 'center',\n        alignSelf: 'flex-start',\n\n        ['& > p']: {\n          alignSelf: 'flex-start',\n          paddingTop: '3px',\n          fontWeight: 700,\n        },\n\n        [`@container (min-width: 1000px)`]: {\n          justifyContent: 'flex-end',\n          paddingLeft: token.spacing['2xl'],\n        },\n      },\n    },\n  });\n\n  if (socialLinks.length >= 4) {\n    container.element.setAttribute(ATTRIBUTE_LAYOUT, LAYOUT_GRID);\n  }\n\n  return container;\n};\n\nexport default (props: SocialCampaignColumnsProps): ElementVisual => {\n  const socialContainer = CreateSocialRow(props);\n  const campaignContainer = createCampaignRow(props);\n  const { isTypeSimple } = props;\n\n  return ElementModel.createDiv({\n    className: 'umd-footer-social-column_wrapper',\n    children: [socialContainer, campaignContainer],\n    elementStyles: {\n      element: {\n        [`@container  (max-width: ${LARGE - 1}px)`]: {\n          marginTop: token.spacing.md,\n\n          [`& > .campaign-column-wrapper`]: {\n            display: 'none',\n          },\n\n          ...(isTypeSimple && {\n            display: 'none',\n          }),\n        },\n\n        [`@container (min-width: ${LARGE}px)`]: {\n          marginLeft: 'auto',\n\n          [`.umd-footer-contact-container &`]: {\n            display: 'none',\n          },\n        },\n      },\n    },\n  });\n};\n"],"names":["iconFacebook","iconX","iconInstagram","iconYoutube","iconTwitter","iconLinkedIn","iconThreads","ElementModel.create","ElementModel.createDiv"],"mappings":";;;;;AAsBA,MAAM,mBAAmB;AACzB,MAAM,cAAc;AACpB,MAAM,EAAE,UAAU;AAElB,MAAM,gBAAgB,CAAC,EAAE,WAAwC;AAC/D,QAAM,MAAM,KAAK,aAAa,MAAM,KAAK;AACzC,MAAI,CAAC,IAAK,QAAO;AAEjB,MAAI,IAAI,MAAM,cAAc,QAAQ,YAAYA;AAChD,MAAI,IAAI,MAAM,OAAO,QAAQ,YAAYC;AACzC,MAAI,IAAI,MAAM,eAAe,QAAQ,YAAYC;AACjD,MAAI,IAAI,MAAM,aAAa,QAAQ,YAAYC;AAC/C,MAAI,IAAI,MAAM,aAAa,QAAQ,YAAYC;AAC/C,MAAI,IAAI,MAAM,cAAc,QAAQ,YAAYC;AAChD,MAAI,IAAI,MAAM,aAAa,QAAQ,YAAYC;AAE/C,SAAO;AACT;AAEA,MAAM,kBAAkB,CAAC,UAAsC;AAC7D,QAAM,EAAE,cAAc,gBAAA,IAAoB;AAE1C,MAAI,cAAmC,CAAA;AAEvC,MAAI,iBAAiB;AACnB,UAAM,mBAAmB,gBAAgB,UAAU,IAAI;AACvD,kBAAc,MAAM;AAAA,MAClB,iBAAiB,iBAAiB,GAAG;AAAA,IAAA;AAAA,EAEzC;AAEA,MAAI,YAAY,WAAW,GAAG;AAC5B,UAAM,aAAa,CAAC,EAAE,KAAK,YAA4C;AACrE,YAAM,OAAO,SAAS,cAAc,GAAG;AACvC,WAAK,aAAa,QAAQ,GAAG;AAC7B,WAAK,aAAa,UAAU,QAAQ;AACpC,WAAK,aAAa,OAAO,qBAAqB;AAC9C,WAAK,aAAa,cAAc,KAAK;AACrC,aAAO;AAAA,IACT;AAEA,gBAAY;AAAA,MACV,WAAW;AAAA,QACT,KAAK;AAAA,QACL,OAAO;AAAA,MAAA,CACR;AAAA,IAAA;AAEH,gBAAY;AAAA,MACV,WAAW;AAAA,QACT,KAAK;AAAA,QACL,OAAO;AAAA,MAAA,CACR;AAAA,IAAA;AAEH,gBAAY;AAAA,MACV,WAAW;AAAA,QACT,KAAK;AAAA,QACL,OAAO;AAAA,MAAA,CACR;AAAA,IAAA;AAAA,EAEL;AAEA,QAAM,WAAWC,OAAoB;AAAA,IACnC,SAAS,SAAS,cAAc,GAAG;AAAA,IACnC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,YAAY;AAAA,QACZ,YAAY;AAAA,QACZ,GAAG,WAAW,SAAS;AAAA,MAAA;AAAA,IACzB;AAAA,EACF,CACD;AACD,WAAS,QAAQ,YAAY;AAE7B,QAAM,qBAAqB,YAAY;AAAA,IAAI,CAAC,SAC1CA,OAAoB;AAAA,MAClB,SAAS,cAAc,EAAE,MAAM;AAAA,MAC/B,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,iBAAiB,MAAM,MAAM,KAAK;AAAA,UAClC,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,YAAY;AAAA,UAEZ,CAAC,eAAe,GAAG;AAAA,YACjB,MAAM,GAAG,MAAM,MAAM,KAAK;AAAA,YAC1B,YAAY;AAAA,YACZ,WAAW;AAAA,UAAA;AAAA,UAGb,CAAC,SAAS,GAAG;AAAA,YACX,iBAAiB,MAAM,MAAM,KAAK;AAAA,YAElC,CAAC,QAAQ,GAAG;AAAA,cACV,MAAM,GAAG,MAAM,MAAM,KAAK,IAAI;AAAA,YAAA;AAAA,UAChC;AAAA,UAGF,GAAI,gBAAgB;AAAA,YAClB,iBAAiB,MAAM,MAAM,KAAK;AAAA,YAElC,CAAC,SAAS,GAAG;AAAA,cACX,iBAAiB,MAAM,MAAM,KAAK;AAAA,cAElC,CAAC,QAAQ,GAAG;AAAA,gBACV,MAAM,GAAG,MAAM,MAAM,KAAK,KAAK;AAAA,cAAA;AAAA,YACjC;AAAA,YAGF,CAAC,eAAe,GAAG;AAAA,cACjB,MAAM,GAAG,MAAM,MAAM,KAAK;AAAA,YAAA;AAAA,UAC5B;AAAA,QACF;AAAA,MACF;AAAA,IACF,CACD;AAAA,EAAA;AAGH,QAAM,cAAc,KAAK,IAAI,YAAY,QAAQ,CAAC;AAElD,QAAM,eAAeC,UAAuB;AAAA,IAC1C,WAAW;AAAA,IACX,UAAU;AAAA,IACV,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,qBAAqB,UAAU,WAAW;AAAA,QAC1C,SAAS,MAAM,QAAQ;AAAA,QACvB,YAAY,MAAM,QAAQ;AAAA,MAAA;AAAA,IAC5B;AAAA,EACF,CACD;AACD,eAAa,QAAQ,aAAa,SAAS,GAAG,YAAY,MAAM,EAAE;AAElE,QAAM,oBAAoB,CAAC,UAAU,YAAY;AAEjD,QAAM,YAAYA,UAAuB;AAAA,IACvC,WAAW;AAAA,IACX,UAAU;AAAA,IACV,eAAe;AAAA,MACb,SAAS;AAAA,QACP,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,WAAW;AAAA,QAEX,CAAC,OAAO,GAAG;AAAA,UACT,WAAW;AAAA,UACX,YAAY;AAAA,UACZ,YAAY;AAAA,QAAA;AAAA,QAGd,CAAC,gCAAgC,GAAG;AAAA,UAClC,gBAAgB;AAAA,UAChB,aAAa,MAAM,QAAQ,KAAK;AAAA,QAAA;AAAA,MAClC;AAAA,IACF;AAAA,EACF,CACD;AAED,MAAI,YAAY,UAAU,GAAG;AAC3B,cAAU,QAAQ,aAAa,kBAAkB,WAAW;AAAA,EAC9D;AAEA,SAAO;AACT;AAEA,MAAA,8BAAe,CAAC,UAAqD;AACnE,QAAM,kBAAkB,gBAAgB,KAAK;AAC7C,QAAM,oBAAoB,kBAAkB,KAAK;AACjD,QAAM,EAAE,iBAAiB;AAEzB,SAAOA,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,iBAAiB,iBAAiB;AAAA,IAC7C,eAAe;AAAA,MACb,SAAS;AAAA,QACP,CAAC,2BAA2B,QAAQ,CAAC,KAAK,GAAG;AAAA,UAC3C,WAAW,MAAM,QAAQ;AAAA,UAEzB,CAAC,8BAA8B,GAAG;AAAA,YAChC,SAAS;AAAA,UAAA;AAAA,UAGX,GAAI,gBAAgB;AAAA,YAClB,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,QAGF,CAAC,0BAA0B,KAAK,KAAK,GAAG;AAAA,UACtC,YAAY;AAAA,UAEZ,CAAC,iCAAiC,GAAG;AAAA,YACnC,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;"}

package/dist/composite/footer/elements/utility-section/index.d.ts

@@ -1,6 +1,8 @@
-export declare const UtilityContainerStyles: string;
+import { FooterProps } from '../../options';
+import { ElementVisual } from '../../../../_types';
 export interface UtilityProps {
     slotUtilityLinks?: HTMLElement | null;
 }
-export declare const createUtilitySection: ({ slotUtilityLinks }: UtilityProps) => HTMLDivElement;
+declare const _default: (props: FooterProps) => ElementVisual;
+export default _default;
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/footer/elements/utility-section/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"names":[],"mappings":"AAiEA,eAAO,MAAM,sBAAsB,QA8ClC,CAAC;AA0BF,MAAM,WAAW,YAAY;IAC3B,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,oBAAoB,GAAI,sBAAsB,YAAY,mBA8BtE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../source/composite/footer/elements/utility-section/index.ts"],"names":[],"mappings":"AASA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAExD,MAAM,WAAW,YAAY;IAC3B,gBAAgB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACvC;yBAkDe,OAAO,WAAW,KAAG,aAAa;AAAlD,wBAmGE"}

package/dist/composite/footer/elements/utility-section/index.js

@@ -1,104 +1,9 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Styles = require("@universityofmaryland/web-styles-library");
-const create = require("../../../../utilities/markup/create.js");
-const modify = require("../../../../utilities/markup/modify.js");
-const index = require("../../../../utilities/theme/index.js");
+const animation = require("@universityofmaryland/web-utilities-library/animation");
+const index = require("../../../../model/elements/index.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 UTILITY_CONTAINER = "umd-footer-utility-container";
-const UTILITY_CONTAINER_LOCK = "umd-footer-utility-container-lock";
-const UTILITY_CONTAINER_LINK = "umd-footer-utility-container-link";
-const LinkStyles = `
-  .${UTILITY_CONTAINER} a {
-    display: block;
-  }
-
-  .${UTILITY_CONTAINER} a span {
-    color: ${Styles.token.color.gray.light};
-  }
-
-  ${index.convertJSSObjectToStyles({
-  styleObj: {
-    [`.${UTILITY_CONTAINER} a`]: Styles.animation.line.slideUnderWhite
-  }
-})}
-
-  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${UTILITY_CONTAINER} a {
-    color: ${Styles.token.color.black};
-  }
-
-  ${index.convertJSSObjectToStyles({
-  styleObj: {
-    [`.${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${UTILITY_CONTAINER} a`]: Styles.animation.line.slideUnderBlack
-  }
-})}
-`;
-const TextStyles = `
-  .${UTILITY_CONTAINER} .${UTILITY_CONTAINER_LOCK} p {
-    color: ${Styles.token.color.gray.light};
-    display: flex;
-    align-items: center;
-  }
-
-  .${UTILITY_CONTAINER} .${UTILITY_CONTAINER_LOCK} a {
-    color: ${Styles.token.color.gray.light};
-  }
-
-  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${UTILITY_CONTAINER} p {
-    color: ${Styles.token.color.black};
-  }
-`;
-const UtilityContainerStyles = `
-  .${UTILITY_CONTAINER} {
-    padding: ${Styles.token.spacing.sm} 0;
-    background-color: ${Styles.token.color.gray.darker};
-  }
-
-  ${index.convertJSSObjectToStyles({
-  styleObj: {
-    [`.${UTILITY_CONTAINER_LOCK}`]: Styles.layout.space.horizontal.larger
-  }
-})}
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${UTILITY_CONTAINER_LOCK} {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  ${index.convertJSSObjectToStyles({
-  styleObj: {
-    [`.${UTILITY_CONTAINER} *`]: Styles.typography.sans.smaller
-  }
-})}
-
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    .${UTILITY_CONTAINER_LOCK} > *:not(:first-child) {
-      margin-top: ${Styles.token.spacing.sm};
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${UTILITY_CONTAINER} .${UTILITY_CONTAINER_LOCK} > *:not(:first-child) {
-      margin-left: ${Styles.token.spacing.sm};
-      padding-left: ${Styles.token.spacing.sm};
-      background-position: ${Styles.token.spacing.sm} 100%;
-      border-left: 1px solid ${Styles.token.color.gray.dark};
-    }
-  }
-
-  .${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${UTILITY_CONTAINER} {
-    background-color: ${Styles.token.color.gray.light};
-  }
-
-  ${LinkStyles}
-  ${TextStyles}
-`;
 const requiredSubLinks = [
   {
     title: "Privacy Policy",
@@ -109,31 +14,117 @@ const requiredSubLinks = [
     url: "https://www.umd.edu/web-accessibility"
   }
 ];
-const createUtilitySection = ({ slotUtilityLinks }) => {
-  const container = document.createElement("div");
-  const wrapper = document.createElement("div");
-  const copyRight = document.createElement("p");
-  container.classList.add(UTILITY_CONTAINER);
-  wrapper.classList.add(UTILITY_CONTAINER_LOCK);
+const createUtilityContainerLink = (link) => {
+  return index.create({
+    element: link,
+    className: "umd-footer-utility-container-link"
+  });
+};
+const createSubLink = ({ title, url }) => {
+  const span = index.createSpan({
+    className: "umd-footer-utility-container-sublink-text"
+  });
+  const link = index.create({
+    element: document.createElement("a"),
+    className: "umd-footer-utility-container-sublink",
+    children: [span],
+    attributes: [
+      {
+        href: url
+      },
+      {
+        target: "_blank"
+      },
+      { rel: "noopener noreferrer" }
+    ]
+  });
+  span.element.innerText = title;
+  return index.createDiv({
+    className: "umd-footer-utility-container-link-wrapper",
+    children: [createUtilityContainerLink(link.element)]
+  });
+};
+const createUtility = (props) => {
+  const { isThemeLight, slotUtilityLinks } = props;
+  const linkElements = [];
+  const copyRightElement = index.createParagraph({
+    className: "umd-footer-utility-container-copyright"
+  });
   if (slotUtilityLinks) {
     const slottedLinks = Array.from(
-      slotUtilityLinks.querySelectorAll(`a`)
+      slotUtilityLinks.querySelectorAll("a")
     );
     slottedLinks.forEach((link) => {
-      modify.animationLinkSpan({ element: link });
-      link.classList.add(UTILITY_CONTAINER_LINK);
-      wrapper.appendChild(link);
+      animation.wrapLinkForAnimation({ element: link });
+      linkElements.push(createUtilityContainerLink(link));
     });
   }
-  requiredSubLinks.forEach(
-    (link) => wrapper.appendChild(create.linkWithSpan(link))
-  );
-  copyRight.classList.add(UTILITY_CONTAINER_LINK);
-  copyRight.innerHTML = `©${(/* @__PURE__ */ new Date()).getFullYear()} UNIVERSITY OF MARYLAND`;
-  wrapper.appendChild(copyRight);
-  container.appendChild(wrapper);
+  const copyRight = createUtilityContainerLink(copyRightElement.element);
+  requiredSubLinks.forEach((link) => {
+    linkElements.push(createSubLink(link));
+  });
+  copyRightElement.element.innerHTML = `©${(/* @__PURE__ */ new Date()).getFullYear()} UNIVERSITY OF MARYLAND`;
+  linkElements.push(copyRight);
+  const wrapper = index.createDiv({
+    className: "umd-footer-utility-container-lock",
+    children: linkElements,
+    elementStyles: {
+      element: {
+        ...Styles.layout.space.horizontal.larger,
+        [`@container (max-width: ${LARGE - 1}px)`]: {
+          "& > *:not(:first-child)": {
+            marginTop: Styles.token.spacing.sm
+          }
+        },
+        [`@container (min-width: ${LARGE}px)`]: {
+          display: "flex",
+          alignItems: "center",
+          [`& > *:not(:first-child)`]: {
+            marginLeft: Styles.token.spacing.sm,
+            paddingLeft: Styles.token.spacing.sm,
+            backgroundPosition: `${Styles.token.spacing.sm} 100%`,
+            borderLeft: `1px solid ${Styles.token.color.gray.dark}`
+          }
+        },
+        ["& a, & p"]: {
+          color: Styles.token.color.gray.light
+        },
+        ["& a"]: {
+          ...isThemeLight && { color: Styles.token.color.gray.dark }
+        },
+        ["& p"]: {
+          display: "flex",
+          alignItems: "center",
+          ...isThemeLight && { color: Styles.token.color.black }
+        }
+      }
+    }
+  });
+  const container = index.createDiv({
+    className: "umd-footer-utility-container",
+    children: [wrapper],
+    elementStyles: {
+      element: {
+        padding: `${Styles.token.spacing.sm} 0`,
+        backgroundColor: Styles.token.color.gray.darker,
+        ...isThemeLight && {
+          backgroundColor: Styles.token.color.gray.light
+        },
+        ["& *"]: {
+          ...Styles.typography.sans.smaller
+        },
+        ["& a"]: {
+          display: "block",
+          ...Styles.animation.line.slideUnderWhite,
+          ...isThemeLight && {
+            color: Styles.token.color.black,
+            ...Styles.animation.line.slideUnderBlack
+          }
+        }
+      }
+    }
+  });
   return container;
 };
-exports.UtilityContainerStyles = UtilityContainerStyles;
-exports.createUtilitySection = createUtilitySection;
+module.exports = createUtility;
 //# sourceMappingURL=index.js.map