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

package/dist/atomic/events/sign.js.map

@@ -1 +1 @@
-{"version":3,"file":"sign.js","sources":["../../../source/atomic/events/sign.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\n\nconst makeDateElement = ({\n  element,\n  isMonth,\n  isDay,\n  isLargeSize,\n  isMultiDay,\n  isThemeDark,\n}: {\n  element: string | HTMLElement;\n  isMonth?: boolean;\n  isDay?: boolean;\n  isLargeSize?: boolean;\n  isMultiDay?: boolean;\n  isThemeDark?: boolean;\n}) => {\n  const dateElement = document.createElement('span');\n  if (typeof element === 'string') {\n    dateElement.innerHTML = element;\n  } else {\n    dateElement.appendChild(element);\n  }\n\n  if (isDay && isLargeSize && !isMultiDay) {\n    return new ElementBuilder(dateElement)\n      .styled(\n        typography.sans.compose('extralarge', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .build();\n  }\n\n  if (isDay) {\n    return new ElementBuilder(dateElement)\n      .styled(\n        typography.sans.compose('larger', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .build();\n  }\n\n  if (isMonth && isLargeSize && !isMultiDay) {\n    return new ElementBuilder(dateElement)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .build();\n  }\n\n  return new ElementBuilder(dateElement)\n    .styled(\n      typography.sans.compose('min', { theme: theme.fontColor(isThemeDark) }),\n    )\n    .build();\n};\n\nconst makeStartDateBlock = ({\n  startMonth,\n  startDay,\n  isLargeSize,\n  isMultiDay,\n  isThemeDark,\n}: {\n  startMonth: string | HTMLElement;\n  startDay: string | HTMLElement;\n  isLargeSize?: boolean;\n  isMultiDay?: boolean;\n  isThemeDark?: boolean;\n}) => {\n  const monthElement = makeDateElement({\n    element: startMonth,\n    isMonth: true,\n    isLargeSize,\n    isMultiDay,\n    isThemeDark,\n  });\n  const dayElement = makeDateElement({\n    element: startDay,\n    isDay: true,\n    isLargeSize,\n    isMultiDay,\n    isThemeDark,\n  });\n\n  return new ElementBuilder('p')\n    .withClassName('event-sign-start')\n    .withStyles({\n      subElement: {\n        color: token.color.black,\n      },\n    })\n    .withChildren(monthElement, dayElement)\n    .build();\n};\n\nconst makeEndDateBlock = ({\n  endMonth,\n  endDay,\n  isThemeDark,\n}: {\n  endDay: string | HTMLElement;\n  endMonth: string | HTMLElement;\n  isThemeDark?: boolean;\n}) => {\n  const monthElement = makeDateElement({\n    element: endMonth,\n    isMonth: true,\n    isMultiDay: true,\n    isThemeDark,\n  });\n  const dayElement = makeDateElement({\n    element: endDay,\n    isDay: true,\n    isMultiDay: true,\n    isThemeDark,\n  });\n\n  return new ElementBuilder('p')\n    .withClassName('event-sign-end')\n    .withChildren(monthElement, dayElement)\n    .build();\n};\n\nexport default (props: {\n  startMonth: string | HTMLElement;\n  startDay: string | HTMLElement;\n  endDay?: string | HTMLElement;\n  endMonth?: string | HTMLElement;\n  isThemeDark?: boolean;\n  isLargeSize?: boolean;\n}) => {\n  const {\n    startMonth,\n    startDay,\n    endDay,\n    endMonth,\n    isThemeDark,\n    isLargeSize = false,\n  } = props;\n  const isTheSameMonth = endMonth === startMonth;\n  const isTheSameDay = endDay === startDay;\n  const isMultiDay = !isTheSameMonth || !isTheSameDay;\n\n  const startBlock = makeStartDateBlock({\n    startMonth,\n    startDay,\n    isLargeSize,\n    isMultiDay,\n    isThemeDark,\n  });\n\n  const container = new ElementBuilder()\n    .styled(elementStyles.event.sign.container)\n    .withChild(startBlock);\n\n  if (isMultiDay && !!endDay && !!endMonth) {\n    const srOnly = new ElementBuilder('span')\n      .withClassName('sr-only')\n      .withHTML('to')\n      .build();\n\n    const dash = new ElementBuilder('span')\n      .withClassName('dash')\n      .withStyles({\n        element: {\n          width: '10px',\n          height: '3px',\n          margin: '13px 5px 0',\n          display: 'block',\n          backgroundColor: isThemeDark ? 'white' : 'black',\n        },\n      })\n      .build();\n\n    const endBlock = makeEndDateBlock({\n      endDay: endDay!,\n      endMonth: endMonth!,\n      isThemeDark,\n    });\n\n    container.withChild(srOnly);\n    container.withChild(dash);\n    container.withChild(endBlock);\n  }\n\n  return container.build();\n};\n"],"names":["ElementBuilder","typography","theme","token","elementStyles"],"mappings":"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"}
+{"version":3,"file":"sign.js","sources":["../../../source/atomic/events/sign.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\n\nconst makeDateElement = ({\n  element,\n  isMonth,\n  isDay,\n  isLargeSize,\n  isMultiDay,\n  isThemeDark,\n}: {\n  element: string | HTMLElement;\n  isMonth?: boolean;\n  isDay?: boolean;\n  isLargeSize?: boolean;\n  isMultiDay?: boolean;\n  isThemeDark?: boolean;\n}) => {\n  const dateElement = document.createElement('span');\n  if (typeof element === 'string') {\n    dateElement.innerHTML = element;\n  } else {\n    dateElement.appendChild(element);\n  }\n\n  if (isDay && isLargeSize && !isMultiDay) {\n    return new ElementBuilder(dateElement)\n      .styled(\n        typography.sans.compose('extralarge', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .build();\n  }\n\n  if (isDay) {\n    return new ElementBuilder(dateElement)\n      .styled(\n        typography.sans.compose('larger', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .build();\n  }\n\n  if (isMonth && isLargeSize && !isMultiDay) {\n    return new ElementBuilder(dateElement)\n      .styled(\n        typography.sans.compose('small', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .build();\n  }\n\n  return new ElementBuilder(dateElement)\n    .styled(\n      typography.sans.compose('min', { theme: theme.fontColor(isThemeDark) }),\n    )\n    .build();\n};\n\nconst makeStartDateBlock = ({\n  startMonth,\n  startDay,\n  isLargeSize,\n  isMultiDay,\n  isThemeDark,\n}: {\n  startMonth: string | HTMLElement;\n  startDay: string | HTMLElement;\n  isLargeSize?: boolean;\n  isMultiDay?: boolean;\n  isThemeDark?: boolean;\n}) => {\n  const monthElement = makeDateElement({\n    element: startMonth,\n    isMonth: true,\n    isLargeSize,\n    isMultiDay,\n    isThemeDark,\n  });\n  const dayElement = makeDateElement({\n    element: startDay,\n    isDay: true,\n    isLargeSize,\n    isMultiDay,\n    isThemeDark,\n  });\n\n  return new ElementBuilder('p')\n    .withClassName('event-sign-start')\n    .withStyles({})\n    .withChildren(monthElement, dayElement)\n    .build();\n};\n\nconst makeEndDateBlock = ({\n  endMonth,\n  endDay,\n  isThemeDark,\n}: {\n  endDay: string | HTMLElement;\n  endMonth: string | HTMLElement;\n  isThemeDark?: boolean;\n}) => {\n  const monthElement = makeDateElement({\n    element: endMonth,\n    isMonth: true,\n    isMultiDay: true,\n    isThemeDark,\n  });\n  const dayElement = makeDateElement({\n    element: endDay,\n    isDay: true,\n    isMultiDay: true,\n    isThemeDark,\n  });\n\n  return new ElementBuilder('p')\n    .withClassName('event-sign-end')\n    .withChildren(monthElement, dayElement)\n    .build();\n};\n\nexport const createEventSign = (props: {\n  startMonth: string | HTMLElement;\n  startDay: string | HTMLElement;\n  endDay?: string | HTMLElement;\n  endMonth?: string | HTMLElement;\n  isThemeDark?: boolean;\n  isLargeSize?: boolean;\n}) => {\n  const {\n    startMonth,\n    startDay,\n    endDay,\n    endMonth,\n    isThemeDark,\n    isLargeSize = false,\n  } = props;\n  const isTheSameMonth = endMonth === startMonth;\n  const isTheSameDay = endDay === startDay;\n  const isMultiDay = !isTheSameMonth || !isTheSameDay;\n\n  const startBlock = makeStartDateBlock({\n    startMonth,\n    startDay,\n    isLargeSize,\n    isMultiDay,\n    isThemeDark,\n  });\n\n  const container = new ElementBuilder()\n    .styled(elementStyles.event.sign.container)\n    .withChild(startBlock);\n\n  if (isMultiDay && !!endDay && !!endMonth) {\n    const srOnly = new ElementBuilder('span')\n      .withClassName('sr-only')\n      .withHTML('to')\n      .build();\n\n    const dash = new ElementBuilder('span')\n      .withClassName('dash')\n      .withStyles({\n        element: {\n          width: '10px',\n          height: '3px',\n          margin: '13px 5px 0',\n          display: 'block',\n          backgroundColor: isThemeDark ? 'white' : 'black',\n        },\n      })\n      .build();\n\n    const endBlock = makeEndDateBlock({\n      endDay: endDay!,\n      endMonth: endMonth!,\n      isThemeDark,\n    });\n\n    container.withChild(srOnly);\n    container.withChild(dash);\n    container.withChild(endBlock);\n  }\n\n  return container.build();\n};\n"],"names":[],"mappings":"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"}

package/dist/atomic/layout/block/index.js

@@ -1,5 +1,5 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const stacked = require("./stacked.js");
-exports.stacked = stacked;
+import * as stacked from "./stacked.js";
+export {
+  stacked
+};
 //# sourceMappingURL=index.js.map

package/dist/atomic/layout/block/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/atomic/layout/block/stacked.js

@@ -1,47 +1,28 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const token = require("@universityofmaryland/web-token-library");
-const elementStyles = require("@universityofmaryland/web-styles-library/element");
-const styles = require("@universityofmaryland/web-utilities-library/styles");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const smallBreakpoint = token__namespace.media.breakpointValues.small.max;
-const mediumBreakpointStart = token__namespace.media.breakpointValues.medium.min;
-const mediumBreakpoint = token__namespace.media.breakpointValues.large.min;
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import { asset } from "@universityofmaryland/web-styles-library/element";
+import { createMediaQuery, createMediaQueryRange } from "@universityofmaryland/web-utilities-library/styles";
+const smallBreakpoint = token.media.breakpointValues.small.max;
+const mediumBreakpointStart = token.media.breakpointValues.medium.min;
+const mediumBreakpoint = token.media.breakpointValues.large.min;
 const image = ({
   customStyles = {},
   children,
   hasBorder = false,
   isThemeDark = false
 }) => {
-  return new webBuilderLibrary.ElementBuilder().withClassName("layout-block-stacked-image").withStyles({
+  return new ElementBuilder().withClassName("layout-block-stacked-image").withStyles({
     element: {
       height: "auto",
       position: "relative",
       zIndex: 99,
       // Gif Overwrite
-      [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {
+      [`&:has(.${asset.gif.toggle.className})`]: {
         aspectRatio: "4 / 3"
       },
-      ...styles.createMediaQuery("max-width", smallBreakpoint, {
-        marginLeft: token__namespace.spacing.sm,
-        marginBottom: token__namespace.spacing.md,
+      ...createMediaQuery("max-width", smallBreakpoint, {
+        marginLeft: token.spacing.sm,
+        marginBottom: token.spacing.md,
         width: "120px",
         float: "right",
         alignSelf: "flex-start",
@@ -50,17 +31,17 @@ const image = ({
           marginTop: 0
         }
       }),
-      ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
+      ...createMediaQuery("min-width", mediumBreakpointStart, {
         display: "block"
       }),
-      ...styles.createMediaQueryRange(mediumBreakpointStart, mediumBreakpoint, {
+      ...createMediaQueryRange(mediumBreakpointStart, mediumBreakpoint, {
         ...hasBorder && {
-          marginLeft: token__namespace.spacing.sm
+          marginLeft: token.spacing.sm
         }
       }),
       ...customStyles,
       "& img": {
-        ...styles.createMediaQuery("max-width", smallBreakpoint, {
+        ...createMediaQuery("max-width", smallBreakpoint, {
           height: "auto !important"
         })
       }
@@ -74,19 +55,19 @@ const textContainer = ({
   isThemeDark = false,
   isTransparent = false
 }) => {
-  return new webBuilderLibrary.ElementBuilder().withClassName("layout-block-stacked-text").withStyles({
+  return new ElementBuilder().withClassName("layout-block-stacked-text").withStyles({
     element: {
-      maxWidth: `${token__namespace.spacing.maxWidth.smallest}`,
-      ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
-        paddingTop: token__namespace.spacing.md
+      maxWidth: `${token.spacing.maxWidth.smallest}`,
+      ...createMediaQuery("min-width", mediumBreakpointStart, {
+        paddingTop: token.spacing.md
       }),
-      ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
-        paddingTop: token__namespace.spacing.lg,
+      ...createMediaQuery("min-width", mediumBreakpointStart, {
+        paddingTop: token.spacing.lg,
         ...hasBorder && {
-          padding: token__namespace.spacing.md
+          padding: token.spacing.md
         },
         ...isThemeDark && !isTransparent && {
-          padding: token__namespace.spacing.md
+          padding: token.spacing.md
         }
       }),
       ...customStyles
@@ -100,35 +81,37 @@ const container = ({
   isThemeDark = false,
   isTransparent = false
 }) => {
-  return new webBuilderLibrary.ElementBuilder().withClassName("layout-block-stacked-container").withStyles({
+  return new ElementBuilder().withClassName("layout-block-stacked-container").withStyles({
     element: {
       containerType: "inline-size",
       height: "100%",
       ...isThemeDark && {
-        backgroundColor: token__namespace.color.gray.darker
+        backgroundColor: token.color.gray.darker
       },
       ...isTransparent && {
         backgroundColor: "transparent"
       },
       ...hasBorder && {
-        border: `1px solid ${token__namespace.color.gray.light}`
+        border: `1px solid ${token.color.gray.light}`
       },
       ...hasBorder && isThemeDark && {
-        border: `1px solid ${token__namespace.color.gray.darker}`
+        border: `1px solid ${token.color.gray.darker}`
       },
-      ...styles.createMediaQuery("max-width", smallBreakpoint, {
+      ...createMediaQuery("max-width", smallBreakpoint, {
         ...isThemeDark && !isTransparent && {
-          padding: token__namespace.spacing.md
+          padding: token.spacing.md
         },
         ...hasBorder && {
-          padding: token__namespace.spacing.md
+          padding: token.spacing.md
         }
       }),
       ...customStyles
     }
   }).withChildren(...children).build();
 };
-exports.container = container;
-exports.image = image;
-exports.textContainer = textContainer;
+export {
+  container,
+  image,
+  textContainer
+};
 //# sourceMappingURL=stacked.js.map

package/dist/atomic/layout/block/stacked.js.map

@@ -1 +1 @@
-{"version":3,"file":"stacked.js","sources":["../../../../source/atomic/layout/block/stacked.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { asset as assetElement } from '@universityofmaryland/web-styles-library/element';\nimport {\n  createMediaQuery,\n  createMediaQueryRange,\n} from '@universityofmaryland/web-utilities-library/styles';\nimport { type ElementModel } from '../../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\ninterface BoxProps {\n  hasBorder?: boolean;\n  isThemeDark?: boolean;\n  isTransparent?: boolean;\n}\n\nexport const image = ({\n  customStyles = {},\n  children,\n  hasBorder = false,\n  isThemeDark = false,\n}: BoxProps & {\n  children: ElementModel[];\n  customStyles?: Record<string, any>;\n}) => {\n  return new ElementBuilder()\n    .withClassName('layout-block-stacked-image')\n    .withStyles({\n      element: {\n        height: 'auto',\n        position: 'relative',\n        zIndex: 99,\n\n        // Gif Overwrite\n        [`&:has(.${assetElement.gif.toggle.className})`]: {\n          aspectRatio: '4 / 3',\n        },\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          marginLeft: token.spacing.sm,\n          marginBottom: token.spacing.md,\n          width: '120px',\n          float: 'right',\n          alignSelf: 'flex-start',\n\n          ...(isThemeDark && {\n            marginRight: 0,\n            marginTop: 0,\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'block',\n        }),\n\n        ...createMediaQueryRange(mediumBreakpointStart, mediumBreakpoint, {\n          ...(hasBorder && {\n            marginLeft: token.spacing.sm,\n          }),\n        }),\n\n        ...customStyles,\n\n        '& img': {\n          ...createMediaQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n          }),\n        },\n      },\n    })\n    .withChildren(...children)\n    .build();\n};\n\nexport const textContainer = ({\n  children,\n  customStyles = {},\n  hasBorder = false,\n  isThemeDark = false,\n  isTransparent = false,\n}: BoxProps & {\n  customStyles?: Record<string, any>;\n  children: ElementModel[];\n}) => {\n  return new ElementBuilder()\n    .withClassName('layout-block-stacked-text')\n    .withStyles({\n      element: {\n        maxWidth: `${token.spacing.maxWidth.smallest}`,\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          paddingTop: token.spacing.md,\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          paddingTop: token.spacing.lg,\n\n          ...(hasBorder && {\n            padding: token.spacing.md,\n          }),\n\n          ...(isThemeDark &&\n            !isTransparent && {\n              padding: token.spacing.md,\n            }),\n        }),\n\n        ...customStyles,\n      },\n    })\n    .withChildren(...children)\n    .build();\n};\n\nexport const container = ({\n  children,\n  customStyles = {},\n  hasBorder = false,\n  isThemeDark = false,\n  isTransparent = false,\n}: BoxProps & {\n  customStyles?: Record<string, any>;\n  children: ElementModel[];\n}) => {\n  return new ElementBuilder()\n    .withClassName('layout-block-stacked-container')\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        height: '100%',\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.gray.darker,\n        }),\n\n        ...(isTransparent && {\n          backgroundColor: 'transparent',\n        }),\n\n        ...(hasBorder && {\n          border: `1px solid ${token.color.gray.light}`,\n        }),\n\n        ...(hasBorder &&\n          isThemeDark && {\n            border: `1px solid ${token.color.gray.darker}`,\n          }),\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          ...(isThemeDark &&\n            !isTransparent && {\n              padding: token.spacing.md,\n            }),\n\n          ...(hasBorder && {\n            padding: token.spacing.md,\n          }),\n        }),\n\n        ...customStyles,\n      },\n    })\n    .withChildren(...children)\n    .build();\n};\n"],"names":["token","ElementBuilder","assetElement","createMediaQuery","createMediaQueryRange"],"mappings":"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"}
+{"version":3,"file":"stacked.js","sources":["../../../../source/atomic/layout/block/stacked.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { asset as assetElement } from '@universityofmaryland/web-styles-library/element';\nimport {\n  createMediaQuery,\n  createMediaQueryRange,\n} from '@universityofmaryland/web-utilities-library/styles';\nimport { type ElementModel } from '../../../_types';\n\nconst smallBreakpoint = token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = token.media.breakpointValues.large.min;\n\ninterface BoxProps {\n  hasBorder?: boolean;\n  isThemeDark?: boolean;\n  isTransparent?: boolean;\n}\n\nexport const image = ({\n  customStyles = {},\n  children,\n  hasBorder = false,\n  isThemeDark = false,\n}: BoxProps & {\n  children: ElementModel[];\n  customStyles?: Record<string, any>;\n}) => {\n  return new ElementBuilder()\n    .withClassName('layout-block-stacked-image')\n    .withStyles({\n      element: {\n        height: 'auto',\n        position: 'relative',\n        zIndex: 99,\n\n        // Gif Overwrite\n        [`&:has(.${assetElement.gif.toggle.className})`]: {\n          aspectRatio: '4 / 3',\n        },\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          marginLeft: token.spacing.sm,\n          marginBottom: token.spacing.md,\n          width: '120px',\n          float: 'right',\n          alignSelf: 'flex-start',\n\n          ...(isThemeDark && {\n            marginRight: 0,\n            marginTop: 0,\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'block',\n        }),\n\n        ...createMediaQueryRange(mediumBreakpointStart, mediumBreakpoint, {\n          ...(hasBorder && {\n            marginLeft: token.spacing.sm,\n          }),\n        }),\n\n        ...customStyles,\n\n        '& img': {\n          ...createMediaQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n          }),\n        },\n      },\n    })\n    .withChildren(...children)\n    .build();\n};\n\nexport const textContainer = ({\n  children,\n  customStyles = {},\n  hasBorder = false,\n  isThemeDark = false,\n  isTransparent = false,\n}: BoxProps & {\n  customStyles?: Record<string, any>;\n  children: ElementModel[];\n}) => {\n  return new ElementBuilder()\n    .withClassName('layout-block-stacked-text')\n    .withStyles({\n      element: {\n        maxWidth: `${token.spacing.maxWidth.smallest}`,\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          paddingTop: token.spacing.md,\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          paddingTop: token.spacing.lg,\n\n          ...(hasBorder && {\n            padding: token.spacing.md,\n          }),\n\n          ...(isThemeDark &&\n            !isTransparent && {\n              padding: token.spacing.md,\n            }),\n        }),\n\n        ...customStyles,\n      },\n    })\n    .withChildren(...children)\n    .build();\n};\n\nexport const container = ({\n  children,\n  customStyles = {},\n  hasBorder = false,\n  isThemeDark = false,\n  isTransparent = false,\n}: BoxProps & {\n  customStyles?: Record<string, any>;\n  children: ElementModel[];\n}) => {\n  return new ElementBuilder()\n    .withClassName('layout-block-stacked-container')\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        height: '100%',\n\n        ...(isThemeDark && {\n          backgroundColor: token.color.gray.darker,\n        }),\n\n        ...(isTransparent && {\n          backgroundColor: 'transparent',\n        }),\n\n        ...(hasBorder && {\n          border: `1px solid ${token.color.gray.light}`,\n        }),\n\n        ...(hasBorder &&\n          isThemeDark && {\n            border: `1px solid ${token.color.gray.darker}`,\n          }),\n\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          ...(isThemeDark &&\n            !isTransparent && {\n              padding: token.spacing.md,\n            }),\n\n          ...(hasBorder && {\n            padding: token.spacing.md,\n          }),\n        }),\n\n        ...customStyles,\n      },\n    })\n    .withChildren(...children)\n    .build();\n};\n"],"names":["assetElement"],"mappings":"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"}

package/dist/atomic/layout/index.js

@@ -1,9 +1,9 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./block/index.js");
-const index$1 = require("./overlay/index.js");
-const index$2 = require("./person/index.js");
-exports.block = index;
-exports.overlay = index$1;
-exports.person = index$2;
+import * as index from "./block/index.js";
+import * as index$1 from "./overlay/index.js";
+import * as index$2 from "./person/index.js";
+export {
+  index as block,
+  index$1 as overlay,
+  index$2 as person
+};
 //# sourceMappingURL=index.js.map

package/dist/atomic/layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/atomic/layout/overlay/index.js

@@ -1,5 +1,5 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const modal = require("./modal.js");
-exports.modal = modal.createModal;
+import { createModal } from "./modal.js";
+export {
+  createModal as modal
+};
 //# sourceMappingURL=index.js.map

package/dist/atomic/layout/overlay/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/atomic/layout/overlay/modal.js

@@ -1,24 +1,5 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const token = require("@universityofmaryland/web-token-library");
-const accessibility = require("@universityofmaryland/web-utilities-library/accessibility");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+import * as token from "@universityofmaryland/web-token-library";
+import { trapFocus } from "@universityofmaryland/web-utilities-library/accessibility";
 const ELEMENT_CONTAINER = "modal-screen-container";
 const ELEMENT_CONTAINER_BACKGROUND = "modal-screen-container-background";
 const STYLES_MODAL = `
@@ -34,12 +15,12 @@ const STYLES_MODAL = `
 
   .${ELEMENT_CONTAINER_BACKGROUND} {
     background-color: rgba(0, 0, 0, 0.9);
-    padding: ${token__namespace.spacing.xl} ${token__namespace.spacing.md};
+    padding: ${token.spacing.xl} ${token.spacing.md};
     width: 100%;
     height: 100%;
   }
 
-  @media (${token__namespace.media.queries.tablet.min}) {
+  @media (${token.media.queries.tablet.min}) {
     .${ELEMENT_CONTAINER_BACKGROUND} {
       padding: 10vh 10vw;
     }
@@ -67,7 +48,7 @@ const createModal = ({
       const target = event.target;
       if (target === container) hide();
     });
-    accessibiltyEventReference = accessibility.trapFocus({
+    accessibiltyEventReference = trapFocus({
       element: container,
       action: hide,
       shadowDomContext: context || null
@@ -106,6 +87,8 @@ const createModal = ({
     }
   };
 };
-exports.STYLES_MODAL = STYLES_MODAL;
-exports.createModal = createModal;
+export {
+  STYLES_MODAL,
+  createModal
+};
 //# sourceMappingURL=modal.js.map

package/dist/atomic/layout/overlay/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { trapFocus } from '@universityofmaryland/web-utilities-library/accessibility';\n\ntype TypeFixedFullScreenProps = {\n  content: HTMLElement | null;\n  isHidden?: boolean;\n  callback?: () => void;\n  context?: HTMLElement | null;\n};\n\nconst ELEMENT_CONTAINER = 'modal-screen-container';\nconst ELEMENT_CONTAINER_BACKGROUND = 'modal-screen-container-background';\n\nexport const STYLES_MODAL = `\n  .${ELEMENT_CONTAINER} {\n    display: none;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 999999;\n  }\n\n  .${ELEMENT_CONTAINER_BACKGROUND} {\n    background-color: rgba(0, 0, 0, 0.9);\n    padding: ${token.spacing.xl} ${token.spacing.md};\n    width: 100%;\n    height: 100%;\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    .${ELEMENT_CONTAINER_BACKGROUND} {\n      padding: 10vh 10vw;\n    }\n  }\n`;\n\nexport const createModal = ({\n  content,\n  callback,\n  isHidden,\n  context,\n}: TypeFixedFullScreenProps) => {\n  const body = document.body;\n  const html = document.documentElement;\n  const container = document.createElement('div');\n  const background = document.createElement('div');\n  let eventReference: any = null;\n  let accessibiltyEventReference: any = null;\n\n  const show = () => {\n    container.style.display = 'block';\n    body.style.overflow = 'hidden';\n    body.style.height = '100%';\n    html.style.overflow = 'hidden';\n    html.style.height = '100%';\n    eventReference = container.addEventListener('click', (event) => {\n      const target = event.target as HTMLElement;\n\n      if (target === container) hide();\n    });\n\n    accessibiltyEventReference = trapFocus({\n      element: container,\n      action: hide,\n      shadowDomContext: context || null,\n    });\n\n    setTimeout(() => {\n      if (content) content.focus();\n    }, 100);\n  };\n  const hide = () => {\n    body.style.overflow = 'visible';\n    body.style.height = 'inherit';\n    html.style.overflow = 'visible';\n    html.style.height = 'inherit';\n    container.style.display = 'none';\n\n    if (accessibiltyEventReference) accessibiltyEventReference();\n    if (eventReference)\n      eventReference.removeEventListener('click', () => hide());\n\n    setTimeout(() => {\n      if (context) {\n        const firstItem = context.querySelector('button, a') as HTMLElement;\n        firstItem?.focus();\n      }\n    }, 100);\n  };\n\n  background.classList.add(ELEMENT_CONTAINER_BACKGROUND);\n  if (content) background.appendChild(content);\n\n  container.classList.add(ELEMENT_CONTAINER);\n  container.appendChild(background);\n  if (isHidden) container.style.display = 'none';\n\n  return {\n    element: container,\n    styles: STYLES_MODAL,\n    events: {\n      show,\n      hide,\n    },\n  };\n};\n"],"names":["token","trapFocus"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,oBAAoB;AAC1B,MAAM,+BAA+B;AAE9B,MAAM,eAAe;AAAA,KACvB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAUjB,4BAA4B;AAAA;AAAA,eAElBA,iBAAM,QAAQ,EAAE,IAAIA,iBAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,YAKvCA,iBAAM,MAAM,QAAQ,OAAO,GAAG;AAAA,OACnC,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAM5B,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,OAAO,SAAS;AACtB,QAAM,OAAO,SAAS;AACtB,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,MAAI,iBAAsB;AAC1B,MAAI,6BAAkC;AAEtC,QAAM,OAAO,MAAM;AACjB,cAAU,MAAM,UAAU;AAC1B,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,qBAAiB,UAAU,iBAAiB,SAAS,CAAC,UAAU;AAC9D,YAAM,SAAS,MAAM;AAErB,UAAI,WAAW,UAAW,MAAA;AAAA,IAC5B,CAAC;AAED,iCAA6BC,cAAAA,UAAU;AAAA,MACrC,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,kBAAkB,WAAW;AAAA,IAAA,CAC9B;AAED,eAAW,MAAM;AACf,UAAI,iBAAiB,MAAA;AAAA,IACvB,GAAG,GAAG;AAAA,EACR;AACA,QAAM,OAAO,MAAM;AACjB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,cAAU,MAAM,UAAU;AAE1B,QAAI,2BAA4B,4BAAA;AAChC,QAAI;AACF,qBAAe,oBAAoB,SAAS,MAAM,KAAA,CAAM;AAE1D,eAAW,MAAM;AACf,UAAI,SAAS;AACX,cAAM,YAAY,QAAQ,cAAc,WAAW;AACnD,mBAAW,MAAA;AAAA,MACb;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AAEA,aAAW,UAAU,IAAI,4BAA4B;AACrD,MAAI,QAAS,YAAW,YAAY,OAAO;AAE3C,YAAU,UAAU,IAAI,iBAAiB;AACzC,YAAU,YAAY,UAAU;AAChC,MAAI,SAAU,WAAU,MAAM,UAAU;AAExC,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;;;"}
+{"version":3,"file":"modal.js","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { trapFocus } from '@universityofmaryland/web-utilities-library/accessibility';\n\ntype TypeFixedFullScreenProps = {\n  content: HTMLElement | null;\n  isHidden?: boolean;\n  callback?: () => void;\n  context?: HTMLElement | null;\n};\n\nconst ELEMENT_CONTAINER = 'modal-screen-container';\nconst ELEMENT_CONTAINER_BACKGROUND = 'modal-screen-container-background';\n\nexport const STYLES_MODAL = `\n  .${ELEMENT_CONTAINER} {\n    display: none;\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    z-index: 999999;\n  }\n\n  .${ELEMENT_CONTAINER_BACKGROUND} {\n    background-color: rgba(0, 0, 0, 0.9);\n    padding: ${token.spacing.xl} ${token.spacing.md};\n    width: 100%;\n    height: 100%;\n  }\n\n  @media (${token.media.queries.tablet.min}) {\n    .${ELEMENT_CONTAINER_BACKGROUND} {\n      padding: 10vh 10vw;\n    }\n  }\n`;\n\nexport const createModal = ({\n  content,\n  callback,\n  isHidden,\n  context,\n}: TypeFixedFullScreenProps) => {\n  const body = document.body;\n  const html = document.documentElement;\n  const container = document.createElement('div');\n  const background = document.createElement('div');\n  let eventReference: any = null;\n  let accessibiltyEventReference: any = null;\n\n  const show = () => {\n    container.style.display = 'block';\n    body.style.overflow = 'hidden';\n    body.style.height = '100%';\n    html.style.overflow = 'hidden';\n    html.style.height = '100%';\n    eventReference = container.addEventListener('click', (event) => {\n      const target = event.target as HTMLElement;\n\n      if (target === container) hide();\n    });\n\n    accessibiltyEventReference = trapFocus({\n      element: container,\n      action: hide,\n      shadowDomContext: context || null,\n    });\n\n    setTimeout(() => {\n      if (content) content.focus();\n    }, 100);\n  };\n  const hide = () => {\n    body.style.overflow = 'visible';\n    body.style.height = 'inherit';\n    html.style.overflow = 'visible';\n    html.style.height = 'inherit';\n    container.style.display = 'none';\n\n    if (accessibiltyEventReference) accessibiltyEventReference();\n    if (eventReference)\n      eventReference.removeEventListener('click', () => hide());\n\n    setTimeout(() => {\n      if (context) {\n        const firstItem = context.querySelector('button, a') as HTMLElement;\n        firstItem?.focus();\n      }\n    }, 100);\n  };\n\n  background.classList.add(ELEMENT_CONTAINER_BACKGROUND);\n  if (content) background.appendChild(content);\n\n  container.classList.add(ELEMENT_CONTAINER);\n  container.appendChild(background);\n  if (isHidden) container.style.display = 'none';\n\n  return {\n    element: container,\n    styles: STYLES_MODAL,\n    events: {\n      show,\n      hide,\n    },\n  };\n};\n"],"names":[],"mappings":";;AAUA,MAAM,oBAAoB;AAC1B,MAAM,+BAA+B;AAE9B,MAAM,eAAe;AAAA,KACvB,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAUjB,4BAA4B;AAAA;AAAA,eAElB,MAAM,QAAQ,EAAE,IAAI,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,YAKvC,MAAM,MAAM,QAAQ,OAAO,GAAG;AAAA,OACnC,4BAA4B;AAAA;AAAA;AAAA;AAAA;AAM5B,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAgC;AAC9B,QAAM,OAAO,SAAS;AACtB,QAAM,OAAO,SAAS;AACtB,QAAM,YAAY,SAAS,cAAc,KAAK;AAC9C,QAAM,aAAa,SAAS,cAAc,KAAK;AAC/C,MAAI,iBAAsB;AAC1B,MAAI,6BAAkC;AAEtC,QAAM,OAAO,MAAM;AACjB,cAAU,MAAM,UAAU;AAC1B,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,qBAAiB,UAAU,iBAAiB,SAAS,CAAC,UAAU;AAC9D,YAAM,SAAS,MAAM;AAErB,UAAI,WAAW,UAAW,MAAA;AAAA,IAC5B,CAAC;AAED,iCAA6B,UAAU;AAAA,MACrC,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,kBAAkB,WAAW;AAAA,IAAA,CAC9B;AAED,eAAW,MAAM;AACf,UAAI,iBAAiB,MAAA;AAAA,IACvB,GAAG,GAAG;AAAA,EACR;AACA,QAAM,OAAO,MAAM;AACjB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,SAAK,MAAM,WAAW;AACtB,SAAK,MAAM,SAAS;AACpB,cAAU,MAAM,UAAU;AAE1B,QAAI,2BAA4B,4BAAA;AAChC,QAAI;AACF,qBAAe,oBAAoB,SAAS,MAAM,KAAA,CAAM;AAE1D,eAAW,MAAM;AACf,UAAI,SAAS;AACX,cAAM,YAAY,QAAQ,cAAc,WAAW;AACnD,mBAAW,MAAA;AAAA,MACb;AAAA,IACF,GAAG,GAAG;AAAA,EACR;AAEA,aAAW,UAAU,IAAI,4BAA4B;AACrD,MAAI,QAAS,YAAW,YAAY,OAAO;AAE3C,YAAU,UAAU,IAAI,iBAAiB;AACzC,YAAU,YAAY,UAAU;AAChC,MAAI,SAAU,WAAU,MAAM,UAAU;AAExC,SAAO;AAAA,IACL,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,MACN;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/atomic/layout/person/columns.d.ts

@@ -1,10 +1,10 @@
 import { PersonContactPropsWithStyles, PersonTextLockupPropsWithStyles, PersonFullProps } from '../../_types';
 export declare const image: ({ customStyles, image, isThemeDark, }: {
     customStyles?: Record<string, any>;
-    image: HTMLImageElement;
+    image: HTMLImageElement | HTMLAnchorElement;
     isThemeDark?: boolean;
 }) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export declare const details: (props: PersonTextLockupPropsWithStyles) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 export declare const contact: (props: PersonContactPropsWithStyles) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
-export declare const information: ({ actions, additionalContact, address, association, customStyles, email, isThemeDark, job, linkendIn, name, phone, pronouns, subText, }: PersonFullProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
+export declare const information: ({ actions, additionalContact, address, association, customStyles, email, isThemeDark, job, linkedin, name, phone, pronouns, subText, }: PersonFullProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 //# sourceMappingURL=columns.d.ts.map

package/dist/atomic/layout/person/columns.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"columns.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/person/columns.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,4BAA4B,EACjC,KAAK,+BAA+B,EACpC,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAMtB,eAAO,MAAM,KAAK,GAAI,uCAInB;IACD,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,KAAK,EAAE,gBAAgB,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,kFA0CA,CAAC;AAuBF,eAAO,MAAM,OAAO,GAAI,OAAO,+BAA+B,kFAc7D,CAAC;AAqBF,eAAO,MAAM,OAAO,GAAI,OAAO,4BAA4B,kFAuB1D,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,yIAczB,eAAe,kFA6BjB,CAAC"}
+{"version":3,"file":"columns.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/person/columns.ts"],"names":[],"mappings":"AAIA,OAAO,EACL,KAAK,4BAA4B,EACjC,KAAK,+BAA+B,EACpC,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAMtB,eAAO,MAAM,KAAK,GAAI,uCAInB;IACD,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,KAAK,EAAE,gBAAgB,GAAG,iBAAiB,CAAC;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,kFA4CA,CAAC;AAuBF,eAAO,MAAM,OAAO,GAAI,OAAO,+BAA+B,kFAc7D,CAAC;AAqBF,eAAO,MAAM,OAAO,GAAI,OAAO,4BAA4B,kFAuB1D,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,wIAczB,eAAe,kFA6BjB,CAAC"}

package/dist/atomic/layout/person/columns.js

@@ -1,88 +1,71 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const token = require("@universityofmaryland/web-token-library");
-const styles = require("@universityofmaryland/web-utilities-library/styles");
-require("@universityofmaryland/web-styles-library/element");
-require("@universityofmaryland/web-styles-library/layout");
-require("@universityofmaryland/web-styles-library/animation");
-require("@universityofmaryland/web-styles-library/typography");
-require("@universityofmaryland/web-utilities-library/media");
-require("@universityofmaryland/web-utilities-library/dom");
-require("@universityofmaryland/web-icons-library/controls");
-require("@universityofmaryland/web-icons-library/communication");
-require("@universityofmaryland/web-icons-library/files");
-require("@universityofmaryland/web-icons-library/brand");
-require("@universityofmaryland/web-icons-library/arrows");
-require("../../animations/actions/indicator.js");
-require("../../animations/brand/chevron-scroll.js");
-require("../../animations/brand/card-stack.js");
-const background = require("../../assets/image/background.js");
-require("@universityofmaryland/web-styles-library");
-require("@universityofmaryland/web-utilities-library/performance");
-require("@universityofmaryland/web-utilities-library/accessibility");
-require("@universityofmaryland/web-icons-library/location");
-require("@universityofmaryland/web-icons-library/calendar");
-require("@universityofmaryland/web-utilities-library/theme");
-require("../block/stacked.js");
-require("../overlay/modal.js");
-const contact$1 = require("../../text-lockup/contact.js");
-require("../../text-lockup/date.js");
-const person = require("../../text-lockup/person.js");
-require("../../text-lockup/small.js");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
-const smallBreakpoint = token__namespace.media.breakpointValues.small.max;
-const mediumBreakpointStart = token__namespace.media.breakpointValues.medium.min;
-const mediumBreakpoint = token__namespace.media.breakpointValues.large.min;
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import { createMediaQuery } from "@universityofmaryland/web-utilities-library/styles";
+import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-styles-library/animation";
+import "@universityofmaryland/web-styles-library/typography";
+import "@universityofmaryland/web-utilities-library/media";
+import "@universityofmaryland/web-utilities-library/dom";
+import "@universityofmaryland/web-icons-library/controls";
+import "@universityofmaryland/web-icons-library/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
+import "@universityofmaryland/web-icons-library/arrows";
+import "../../animations/actions/indicator.js";
+import "../../animations/brand/chevron-scroll.js";
+import "../../animations/brand/card-stack.js";
+import { createImageBackground } from "../../assets/image/background.js";
+import "@universityofmaryland/web-styles-library";
+import "@universityofmaryland/web-utilities-library/performance";
+import "@universityofmaryland/web-utilities-library/accessibility";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
+import "@universityofmaryland/web-utilities-library/theme";
+import "../block/stacked.js";
+import "../overlay/modal.js";
+import { createTextLockupContact } from "../../text-lockup/contact.js";
+import "../../text-lockup/date.js";
+import { createTextLockupPerson } from "../../text-lockup/person.js";
+import "../../text-lockup/small.js";
+const smallBreakpoint = token.media.breakpointValues.small.max;
+const mediumBreakpointStart = token.media.breakpointValues.medium.min;
+const mediumBreakpoint = token.media.breakpointValues.large.min;
 const image = ({
   customStyles,
   image: image2,
   isThemeDark
 }) => {
-  const backgroundImage = background({
+  const backgroundImage = createImageBackground({
     element: image2,
     isScaled: false
   });
-  return new webBuilderLibrary.ElementBuilder().withClassName("person-column-image").withStyles({
+  return new ElementBuilder().withClassName("person-column-image").withStyles({
     element: {
-      ...styles.createMediaQuery("max-width", smallBreakpoint, {
-        marginBottom: `${token__namespace.spacing.md}`,
-        backgroundColor: `${token__namespace.color.gray.lighter}`,
+      ...createMediaQuery("max-width", smallBreakpoint, {
+        marginBottom: `${token.spacing.md}`,
+        backgroundColor: `${token.color.gray.lighter}`,
         display: "flex",
         justifyContent: "center",
         ...isThemeDark && {
-          ...styles.createMediaQuery("max-width", smallBreakpoint, {
-            backgroundColor: `${token__namespace.color.gray.darker}`
+          ...createMediaQuery("max-width", smallBreakpoint, {
+            backgroundColor: `${token.color.gray.darker}`
           })
         }
       }),
-      ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
+      ...createMediaQuery("min-width", mediumBreakpointStart, {
         display: "block",
         width: "96px",
-        paddingRight: `${token__namespace.spacing.md}`,
+        minWidth: "96px",
+        paddingRight: `${token.spacing.md}`,
         alignSelf: "flex-start"
       }),
       ...customStyles,
       "& img, & svg": {
-        ...styles.createMediaQuery("max-width", smallBreakpoint, {
+        ...createMediaQuery("max-width", smallBreakpoint, {
           height: "auto !important",
-          width: "140px"
+          width: "140px",
+          minWidth: "140px"
         })
       }
     }
@@ -97,7 +80,7 @@ const personLockup = ({
   nameComposite,
   pronouns,
   subText
-}) => person({
+}) => createTextLockupPerson({
   actions,
   name,
   nameComposite,
@@ -110,7 +93,7 @@ const personLockup = ({
 const details = (props) => {
   const { customStyles = {} } = props;
   const lockup = personLockup(props);
-  return new webBuilderLibrary.ElementBuilder().withClassName("person-column-details").withStyles({
+  return new ElementBuilder().withClassName("person-column-details").withStyles({
     element: {
       flex: "1 0",
       ...customStyles
@@ -123,26 +106,26 @@ const contactLockup = ({
   address,
   email,
   isThemeDark,
-  linkendIn,
+  linkedin,
   phone
-}) => contact$1({
+}) => createTextLockupContact({
   actions,
   address,
   email,
   isThemeDark,
-  linkendIn,
+  linkedin,
   phone
 });
 const contact = (props) => {
   const { customStyles = {} } = props;
   const lockup = contactLockup(props);
-  return new webBuilderLibrary.ElementBuilder().withClassName("person-column-contact").withStyles({
+  return new ElementBuilder().withClassName("person-column-contact").withStyles({
     element: {
-      marginTop: `${token__namespace.spacing.sm}`,
-      ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
-        paddingLeft: `${token__namespace.spacing.md}`
+      marginTop: `${token.spacing.sm}`,
+      ...createMediaQuery("min-width", mediumBreakpointStart, {
+        paddingLeft: `${token.spacing.md}`
       }),
-      ...styles.createMediaQuery("min-width", mediumBreakpoint, {
+      ...createMediaQuery("min-width", mediumBreakpoint, {
         width: "30%"
       }),
       ...customStyles
@@ -158,13 +141,13 @@ const information = ({
   email,
   isThemeDark,
   job,
-  linkendIn,
+  linkedin,
   name,
   phone,
   pronouns,
   subText
 }) => {
-  const person2 = personLockup({
+  const person = personLockup({
     association,
     isThemeDark,
     job,
@@ -178,17 +161,19 @@ const information = ({
     address,
     email,
     isThemeDark,
-    linkendIn,
+    linkedin,
     phone
   });
-  return new webBuilderLibrary.ElementBuilder().withClassName("person-column-information").withStyles({
+  return new ElementBuilder().withClassName("person-column-information").withStyles({
     element: {
       ...customStyles
     }
-  }).withChildren(person2, contact2).build();
+  }).withChildren(person, contact2).build();
+};
+export {
+  contact,
+  details,
+  image,
+  information
 };
-exports.contact = contact;
-exports.details = details;
-exports.image = image;
-exports.information = information;
 //# sourceMappingURL=columns.js.map