@universityofmaryland/web-elements-library 1.4.8 → 1.5.0

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

@@ -1,83 +1,55 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Styles = require("@universityofmaryland/web-styles-library");
-const index = require("../../../../../utilities/theme/index.js");
+const index = require("../../../../../model/elements/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 createRowLinks = (props) => {
+  const { isThemeLight } = props;
+  const socialColumnWrapper = social(props);
+  const linkColumnWrapper = linkColumns(props);
+  const wrapperElement = index.createDiv({
+    className: "umd-footer-row-links-wrapper",
+    children: [linkColumnWrapper, socialColumnWrapper],
+    elementStyles: {
+      element: {
+        display: "flex",
+        [`@container (max-width: ${LARGE - 1}px)`]: {
+          flexDirection: "column-reverse",
+          flexWrap: "wrap",
+          ["& .umd-footer-social-column_wrapper"]: {
+            display: "none"
+          }
+        }
+      }
     }
-  }
-`;
-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"]};
+  });
+  const lockElement = index.createDiv({
+    className: "umd-footer-row-links-lock",
+    children: [wrapperElement],
+    elementStyles: {
+      element: {
+        ...Styles.layout.space.horizontal.larger
+      }
     }
-  }
-
-  .${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;
+  });
+  return index.createDiv({
+    className: "umd-footer-row-links",
+    children: [lockElement],
+    elementStyles: {
+      element: {
+        paddingBottom: Styles.token.spacing.lg,
+        backgroundColor: Styles.token.color.black,
+        ...isThemeLight && {
+          backgroundColor: Styles.token.color.gray.lightest
+        },
+        [`@container  (min-width: ${LARGE}px)`]: {
+          paddingBottom: Styles.token.spacing["2xl"]
+        }
+      }
     }
-  }
-
-  ${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;
+module.exports = createRowLinks;
 //# sourceMappingURL=index.js.map

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

@@ -1 +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;;;;;"}
+{"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 { ElementModel } from 'model';\nimport createSocialCampaignColumns, {\n  type SocialCampaignColumnsProps,\n} from '../social';\nimport createLinkColumns, { type slotColumnsProps } from './link-columns';\nimport { BREAKPOINTS } from '../../../globals';\nimport { BaseProps } from '../../../_types';\nimport { type ElementVisual } from '../../../../../_types';\n\nconst { LARGE } = BREAKPOINTS;\n\nexport interface RowLinksProps\n  extends SocialCampaignColumnsProps,\n    BaseProps,\n    slotColumnsProps {}\n\nexport default (props: RowLinksProps): ElementVisual => {\n  const { isThemeLight } = props;\n  const socialColumnWrapper = createSocialCampaignColumns(props);\n  const linkColumnWrapper = createLinkColumns(props);\n  const wrapperElement = ElementModel.createDiv({\n    className: 'umd-footer-row-links-wrapper',\n    children: [linkColumnWrapper, socialColumnWrapper],\n    elementStyles: {\n      element: {\n        display: 'flex',\n\n        [`@container (max-width: ${LARGE - 1}px)`]: {\n          flexDirection: 'column-reverse',\n          flexWrap: 'wrap',\n\n          ['& .umd-footer-social-column_wrapper']: {\n            display: 'none',\n          },\n        },\n      },\n    },\n  });\n  const lockElement = ElementModel.createDiv({\n    className: 'umd-footer-row-links-lock',\n    children: [wrapperElement],\n    elementStyles: {\n      element: {\n        ...layout.space.horizontal.larger,\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-footer-row-links',\n    children: [lockElement],\n    elementStyles: {\n      element: {\n        paddingBottom: token.spacing.lg,\n        backgroundColor: token.color.black,\n\n        ...(isThemeLight && {\n          backgroundColor: token.color.gray.lightest,\n        }),\n\n        [`@container  (min-width: ${LARGE}px)`]: {\n          paddingBottom: token.spacing['2xl'],\n        },\n      },\n    },\n  });\n};\n"],"names":["BREAKPOINTS","createSocialCampaignColumns","createLinkColumns","ElementModel.createDiv","layout","token"],"mappings":";;;;;;AAUA,MAAM,EAAE,UAAUA,QAAAA;AAOlB,MAAA,iBAAe,CAAC,UAAwC;AACtD,QAAM,EAAE,iBAAiB;AACzB,QAAM,sBAAsBC,OAA4B,KAAK;AAC7D,QAAM,oBAAoBC,YAAkB,KAAK;AACjD,QAAM,iBAAiBC,MAAAA,UAAuB;AAAA,IAC5C,WAAW;AAAA,IACX,UAAU,CAAC,mBAAmB,mBAAmB;AAAA,IACjD,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QAET,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,UAC1C,eAAe;AAAA,UACf,UAAU;AAAA,UAEV,CAAC,qCAAqC,GAAG;AAAA,YACvC,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACD,QAAM,cAAcA,MAAAA,UAAuB;AAAA,IACzC,WAAW;AAAA,IACX,UAAU,CAAC,cAAc;AAAA,IACzB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAGC,OAAAA,OAAO,MAAM,WAAW;AAAA,MAAA;AAAA,IAC7B;AAAA,EACF,CACD;AAED,SAAOD,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,WAAW;AAAA,IACtB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAeE,OAAAA,MAAM,QAAQ;AAAA,QAC7B,iBAAiBA,OAAAA,MAAM,MAAM;AAAA,QAE7B,GAAI,gBAAgB;AAAA,UAClB,iBAAiBA,OAAAA,MAAM,MAAM,KAAK;AAAA,QAAA;AAAA,QAGpC,CAAC,2BAA2B,KAAK,KAAK,GAAG;AAAA,UACvC,eAAeA,OAAAA,MAAM,QAAQ,KAAK;AAAA,QAAA;AAAA,MACpC;AAAA,IACF;AAAA,EACF,CACD;AACH;;"}

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

@@ -1,83 +1,56 @@
-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";
+import { layout, token } from "@universityofmaryland/web-styles-library";
+import { createDiv } from "../../../../../model/elements/index.mjs";
+import createSocialCampaignColumns from "../social.mjs";
+import createLinkColumns from "./link-columns.mjs";
+import { BREAKPOINTS } 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 { isThemeLight } = props;
   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;
+  const wrapperElement = createDiv({
+    className: "umd-footer-row-links-wrapper",
+    children: [linkColumnWrapper, socialColumnWrapper],
+    elementStyles: {
+      element: {
+        display: "flex",
+        [`@container (max-width: ${LARGE - 1}px)`]: {
+          flexDirection: "column-reverse",
+          flexWrap: "wrap",
+          ["& .umd-footer-social-column_wrapper"]: {
+            display: "none"
+          }
+        }
+      }
+    }
+  });
+  const lockElement = createDiv({
+    className: "umd-footer-row-links-lock",
+    children: [wrapperElement],
+    elementStyles: {
+      element: {
+        ...layout.space.horizontal.larger
+      }
+    }
+  });
+  return createDiv({
+    className: "umd-footer-row-links",
+    children: [lockElement],
+    elementStyles: {
+      element: {
+        paddingBottom: token.spacing.lg,
+        backgroundColor: token.color.black,
+        ...isThemeLight && {
+          backgroundColor: token.color.gray.lightest
+        },
+        [`@container  (min-width: ${LARGE}px)`]: {
+          paddingBottom: token.spacing["2xl"]
+        }
+      }
+    }
+  });
 };
 export {
-  ROW_LINKS_CONTAINER,
-  ROW_LINKS_CONTAINER_WRAPPER,
-  RowLinkStyles,
-  createRowLinks
+  createRowLinks as default
 };
 //# sourceMappingURL=index.mjs.map

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

@@ -1 +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;"}
+{"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 { ElementModel } from 'model';\nimport createSocialCampaignColumns, {\n  type SocialCampaignColumnsProps,\n} from '../social';\nimport createLinkColumns, { type slotColumnsProps } from './link-columns';\nimport { BREAKPOINTS } from '../../../globals';\nimport { BaseProps } from '../../../_types';\nimport { type ElementVisual } from '../../../../../_types';\n\nconst { LARGE } = BREAKPOINTS;\n\nexport interface RowLinksProps\n  extends SocialCampaignColumnsProps,\n    BaseProps,\n    slotColumnsProps {}\n\nexport default (props: RowLinksProps): ElementVisual => {\n  const { isThemeLight } = props;\n  const socialColumnWrapper = createSocialCampaignColumns(props);\n  const linkColumnWrapper = createLinkColumns(props);\n  const wrapperElement = ElementModel.createDiv({\n    className: 'umd-footer-row-links-wrapper',\n    children: [linkColumnWrapper, socialColumnWrapper],\n    elementStyles: {\n      element: {\n        display: 'flex',\n\n        [`@container (max-width: ${LARGE - 1}px)`]: {\n          flexDirection: 'column-reverse',\n          flexWrap: 'wrap',\n\n          ['& .umd-footer-social-column_wrapper']: {\n            display: 'none',\n          },\n        },\n      },\n    },\n  });\n  const lockElement = ElementModel.createDiv({\n    className: 'umd-footer-row-links-lock',\n    children: [wrapperElement],\n    elementStyles: {\n      element: {\n        ...layout.space.horizontal.larger,\n      },\n    },\n  });\n\n  return ElementModel.createDiv({\n    className: 'umd-footer-row-links',\n    children: [lockElement],\n    elementStyles: {\n      element: {\n        paddingBottom: token.spacing.lg,\n        backgroundColor: token.color.black,\n\n        ...(isThemeLight && {\n          backgroundColor: token.color.gray.lightest,\n        }),\n\n        [`@container  (min-width: ${LARGE}px)`]: {\n          paddingBottom: token.spacing['2xl'],\n        },\n      },\n    },\n  });\n};\n"],"names":["ElementModel.createDiv"],"mappings":";;;;;AAUA,MAAM,EAAE,UAAU;AAOlB,MAAA,iBAAe,CAAC,UAAwC;AACtD,QAAM,EAAE,iBAAiB;AACzB,QAAM,sBAAsB,4BAA4B,KAAK;AAC7D,QAAM,oBAAoB,kBAAkB,KAAK;AACjD,QAAM,iBAAiBA,UAAuB;AAAA,IAC5C,WAAW;AAAA,IACX,UAAU,CAAC,mBAAmB,mBAAmB;AAAA,IACjD,eAAe;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QAET,CAAC,0BAA0B,QAAQ,CAAC,KAAK,GAAG;AAAA,UAC1C,eAAe;AAAA,UACf,UAAU;AAAA,UAEV,CAAC,qCAAqC,GAAG;AAAA,YACvC,SAAS;AAAA,UAAA;AAAA,QACX;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACD,QAAM,cAAcA,UAAuB;AAAA,IACzC,WAAW;AAAA,IACX,UAAU,CAAC,cAAc;AAAA,IACzB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,GAAG,OAAO,MAAM,WAAW;AAAA,MAAA;AAAA,IAC7B;AAAA,EACF,CACD;AAED,SAAOA,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX,UAAU,CAAC,WAAW;AAAA,IACtB,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe,MAAM,QAAQ;AAAA,QAC7B,iBAAiB,MAAM,MAAM;AAAA,QAE7B,GAAI,gBAAgB;AAAA,UAClB,iBAAiB,MAAM,MAAM,KAAK;AAAA,QAAA;AAAA,QAGpC,CAAC,2BAA2B,KAAK,KAAK,GAAG;AAAA,UACvC,eAAe,MAAM,QAAQ,KAAK;AAAA,QAAA;AAAA,MACpC;AAAA,IACF;AAAA,EACF,CACD;AACH;"}

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

@@ -1,6 +1,8 @@
-export declare const LinkColumnStyles: string;
-export interface slotColumnsProps {
+import { BaseProps } from '../../../_types';
+import { ElementVisual } from '../../../../../_types';
+export interface slotColumnsProps extends BaseProps {
     slotColumns?: HTMLSlotElement[];
 }
-export declare const createLinkColumns: (props: slotColumnsProps) => HTMLDivElement;
+declare const _default: (props: slotColumnsProps) => ElementVisual;
+export default _default;
 //# 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;AAED,eAAO,MAAM,iBAAiB,GAAI,OAAO,gBAAgB,mBAiDxD,CAAC"}
+{"version":3,"file":"link-columns.d.ts","sourceRoot":"","sources":["../../../../../../source/composite/footer/elements/main-section/row-links/link-columns.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAyQ3D,MAAM,WAAW,gBAAiB,SAAQ,SAAS;IACjD,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;CACjC;yBAEe,OAAO,gBAAgB,KAAG,aAAa;AAAvD,wBA4DE"}