@universityofmaryland/web-elements-library 1.5.2 → 1.5.5

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

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const token = require("@universityofmaryland/web-styles-library/token");
+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");
-const index = require("../../../model/elements/index.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -29,10 +29,8 @@ const image = ({
   children,
   hasBorder = false,
   isThemeDark = false
-}) => index.createDiv({
-  className: "layout-block-stacked-image",
-  children,
-  elementStyles: {
+}) => {
+  return new webBuilderLibrary.ElementBuilder().withClassName("layout-block-stacked-image").withStyles({
     element: {
       height: "auto",
       position: "relative",
@@ -67,18 +65,16 @@ const image = ({
         })
       }
     }
-  }
-});
+  }).withChildren(...children).build();
+};
 const textContainer = ({
   children,
   customStyles = {},
   hasBorder = false,
   isThemeDark = false,
   isTransparent = false
-}) => index.createDiv({
-  className: "layout-block-stacked-text",
-  children,
-  elementStyles: {
+}) => {
+  return new webBuilderLibrary.ElementBuilder().withClassName("layout-block-stacked-text").withStyles({
     element: {
       maxWidth: `${token__namespace.spacing.maxWidth.smallest}`,
       ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
@@ -95,18 +91,16 @@ const textContainer = ({
       }),
       ...customStyles
     }
-  }
-});
+  }).withChildren(...children).build();
+};
 const container = ({
   children,
   customStyles = {},
   hasBorder = false,
   isThemeDark = false,
   isTransparent = false
-}) => index.createDiv({
-  className: "layout-block-stacked-container",
-  children,
-  elementStyles: {
+}) => {
+  return new webBuilderLibrary.ElementBuilder().withClassName("layout-block-stacked-container").withStyles({
     element: {
       containerType: "inline-size",
       height: "100%",
@@ -132,8 +126,8 @@ const container = ({
       }),
       ...customStyles
     }
-  }
-});
+  }).withChildren(...children).build();
+};
 exports.container = container;
 exports.image = image;
 exports.textContainer = textContainer;

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

@@ -1 +1 @@
-{"version":3,"file":"stacked.js","sources":["../../../../source/atomic/layout/block/stacked.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { asset as assetElement } from '@universityofmaryland/web-styles-library/element';\nimport {\n  createMediaQuery,\n  createMediaQueryRange,\n} from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { type UMDElement } 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: UMDElement[];\n  customStyles?: Record<string, any>;\n}) =>\n  ElementModel.createDiv({\n    className: 'layout-block-stacked-image',\n    children,\n    elementStyles: {\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  });\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: UMDElement[];\n}) =>\n  ElementModel.createDiv({\n    className: 'layout-block-stacked-text',\n    children,\n    elementStyles: {\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  });\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: UMDElement[];\n}) =>\n  ElementModel.createDiv({\n    className: 'layout-block-stacked-container',\n    children,\n    elementStyles: {\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  });\n"],"names":["token","ElementModel.createDiv","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":["token","ElementBuilder","assetElement","createMediaQuery","createMediaQueryRange"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
-import * as token from "@universityofmaryland/web-styles-library/token";
+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";
-import { createDiv } from "../../../model/elements/index.mjs";
 const smallBreakpoint = token.media.breakpointValues.small.max;
 const mediumBreakpointStart = token.media.breakpointValues.medium.min;
 const mediumBreakpoint = token.media.breakpointValues.large.min;
@@ -10,10 +10,8 @@ const image = ({
   children,
   hasBorder = false,
   isThemeDark = false
-}) => createDiv({
-  className: "layout-block-stacked-image",
-  children,
-  elementStyles: {
+}) => {
+  return new ElementBuilder().withClassName("layout-block-stacked-image").withStyles({
     element: {
       height: "auto",
       position: "relative",
@@ -48,18 +46,16 @@ const image = ({
         })
       }
     }
-  }
-});
+  }).withChildren(...children).build();
+};
 const textContainer = ({
   children,
   customStyles = {},
   hasBorder = false,
   isThemeDark = false,
   isTransparent = false
-}) => createDiv({
-  className: "layout-block-stacked-text",
-  children,
-  elementStyles: {
+}) => {
+  return new ElementBuilder().withClassName("layout-block-stacked-text").withStyles({
     element: {
       maxWidth: `${token.spacing.maxWidth.smallest}`,
       ...createMediaQuery("min-width", mediumBreakpointStart, {
@@ -76,18 +72,16 @@ const textContainer = ({
       }),
       ...customStyles
     }
-  }
-});
+  }).withChildren(...children).build();
+};
 const container = ({
   children,
   customStyles = {},
   hasBorder = false,
   isThemeDark = false,
   isTransparent = false
-}) => createDiv({
-  className: "layout-block-stacked-container",
-  children,
-  elementStyles: {
+}) => {
+  return new ElementBuilder().withClassName("layout-block-stacked-container").withStyles({
     element: {
       containerType: "inline-size",
       height: "100%",
@@ -113,8 +107,8 @@ const container = ({
       }),
       ...customStyles
     }
-  }
-});
+  }).withChildren(...children).build();
+};
 export {
   container,
   image,

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

@@ -1 +1 @@
-{"version":3,"file":"stacked.mjs","sources":["../../../../source/atomic/layout/block/stacked.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { asset as assetElement } from '@universityofmaryland/web-styles-library/element';\nimport {\n  createMediaQuery,\n  createMediaQueryRange,\n} from '@universityofmaryland/web-utilities-library/styles';\nimport { ElementModel } from 'model';\nimport { type UMDElement } 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: UMDElement[];\n  customStyles?: Record<string, any>;\n}) =>\n  ElementModel.createDiv({\n    className: 'layout-block-stacked-image',\n    children,\n    elementStyles: {\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  });\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: UMDElement[];\n}) =>\n  ElementModel.createDiv({\n    className: 'layout-block-stacked-text',\n    children,\n    elementStyles: {\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  });\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: UMDElement[];\n}) =>\n  ElementModel.createDiv({\n    className: 'layout-block-stacked-container',\n    children,\n    elementStyles: {\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  });\n"],"names":["ElementModel.createDiv","assetElement"],"mappings":"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"}
+{"version":3,"file":"stacked.mjs","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/overlay/modal.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const token = require("@universityofmaryland/web-styles-library/token");
+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" } });

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-styles-library/token';\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":["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;;;"}

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

@@ -1,4 +1,4 @@
-import * as token from "@universityofmaryland/web-styles-library/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";

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

@@ -1 +1 @@
-{"version":3,"file":"modal.mjs","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\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;"}
+{"version":3,"file":"modal.mjs","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

@@ -3,24 +3,8 @@ export declare const image: ({ customStyles, image, isThemeDark, }: {
     customStyles?: Record<string, any>;
     image: HTMLImageElement;
     isThemeDark?: boolean;
-}) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
-export declare const details: (props: PersonTextLockupPropsWithStyles) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
-export declare const contact: (props: PersonContactPropsWithStyles) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
-export declare const information: ({ actions, additionalContact, address, association, customStyles, email, isThemeDark, job, linkendIn, name, phone, pronouns, subText, }: PersonFullProps) => {
-    element: HTMLElement;
-    className: string;
-    styles: string;
-};
+}) => 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>;
 //# 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":"AAOA,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;;;;CAyCG,CAAC;AAuBL,eAAO,MAAM,OAAO,GAAI,OAAO,+BAA+B;;;;CAY7D,CAAC;AAqBF,eAAO,MAAM,OAAO,GAAI,OAAO,4BAA4B;;;;CAsB1D,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,yIAczB,eAAe;;;;CA4BjB,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,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"}

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

@@ -1,31 +1,35 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const token = require("@universityofmaryland/web-styles-library/token");
+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");
-const index = require("../../../model/elements/index.js");
 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");
-require("@universityofmaryland/web-styles-library/typography");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -50,9 +54,12 @@ const image = ({
   customStyles,
   image: image2,
   isThemeDark
-}) => index.createDiv({
-  className: "person-column-image",
-  elementStyles: {
+}) => {
+  const backgroundImage = background({
+    element: image2,
+    isScaled: false
+  });
+  return new webBuilderLibrary.ElementBuilder().withClassName("person-column-image").withStyles({
     element: {
       ...styles.createMediaQuery("max-width", smallBreakpoint, {
         marginBottom: `${token__namespace.spacing.md}`,
@@ -79,14 +86,8 @@ const image = ({
         })
       }
     }
-  },
-  children: [
-    background({
-      element: image2,
-      isScaled: false
-    })
-  ]
-});
+  }).withChild(backgroundImage).build();
+};
 const personLockup = ({
   actions,
   association,
@@ -108,16 +109,13 @@ const personLockup = ({
 });
 const details = (props) => {
   const { customStyles = {} } = props;
-  return index.createDiv({
-    className: "person-column-details",
-    elementStyles: {
-      element: {
-        flex: "1 0",
-        ...customStyles
-      }
-    },
-    children: [personLockup(props)]
-  });
+  const lockup = personLockup(props);
+  return new webBuilderLibrary.ElementBuilder().withClassName("person-column-details").withStyles({
+    element: {
+      flex: "1 0",
+      ...customStyles
+    }
+  }).withChild(lockup).build();
 };
 const contactLockup = ({
   actions,
@@ -137,22 +135,19 @@ const contactLockup = ({
 });
 const contact = (props) => {
   const { customStyles = {} } = props;
-  return index.createDiv({
-    className: "person-column-contact",
-    elementStyles: {
-      element: {
-        marginTop: `${token__namespace.spacing.sm}`,
-        ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
-          paddingLeft: `${token__namespace.spacing.md}`
-        }),
-        ...styles.createMediaQuery("min-width", mediumBreakpoint, {
-          width: "30%"
-        }),
-        ...customStyles
-      }
-    },
-    children: [contactLockup(props)]
-  });
+  const lockup = contactLockup(props);
+  return new webBuilderLibrary.ElementBuilder().withClassName("person-column-contact").withStyles({
+    element: {
+      marginTop: `${token__namespace.spacing.sm}`,
+      ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
+        paddingLeft: `${token__namespace.spacing.md}`
+      }),
+      ...styles.createMediaQuery("min-width", mediumBreakpoint, {
+        width: "30%"
+      }),
+      ...customStyles
+    }
+  }).withChild(lockup).build();
 };
 const information = ({
   actions,
@@ -169,33 +164,28 @@ const information = ({
   pronouns,
   subText
 }) => {
-  return index.createDiv({
-    className: "person-column-information",
-    elementStyles: {
-      element: {
-        ...customStyles
-      }
-    },
-    children: [
-      personLockup({
-        association,
-        isThemeDark,
-        job,
-        name,
-        pronouns,
-        subText
-      }),
-      contactLockup({
-        actions,
-        additionalContact,
-        address,
-        email,
-        isThemeDark,
-        linkendIn,
-        phone
-      })
-    ]
+  const person2 = personLockup({
+    association,
+    isThemeDark,
+    job,
+    name,
+    pronouns,
+    subText
+  });
+  const contact2 = contactLockup({
+    actions,
+    additionalContact,
+    address,
+    email,
+    isThemeDark,
+    linkendIn,
+    phone
   });
+  return new webBuilderLibrary.ElementBuilder().withClassName("person-column-information").withStyles({
+    element: {
+      ...customStyles
+    }
+  }).withChildren(person2, contact2).build();
 };
 exports.contact = contact;
 exports.details = details;

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

@@ -1 +1 @@
-{"version":3,"file":"columns.js","sources":["../../../../source/atomic/layout/person/columns.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport {\n  createMediaQuery,\n  createMediaQueryRange,\n} from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport {\n  type PersonContactPropsWithStyles,\n  type PersonTextLockupPropsWithStyles,\n  type PersonFullProps,\n} 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\nexport const image = ({\n  customStyles,\n  image,\n  isThemeDark,\n}: {\n  customStyles?: Record<string, any>;\n  image: HTMLImageElement;\n  isThemeDark?: boolean;\n}) =>\n  ElementModel.createDiv({\n    className: 'person-column-image',\n    elementStyles: {\n      element: {\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          marginBottom: `${token.spacing.md}`,\n          backgroundColor: `${token.color.gray.lighter}`,\n          display: 'flex',\n          justifyContent: 'center',\n\n          ...(isThemeDark && {\n            ...createMediaQuery('max-width', smallBreakpoint, {\n              backgroundColor: `${token.color.gray.darker}`,\n            }),\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'block',\n          width: '96px',\n          paddingRight: `${token.spacing.md}`,\n          alignSelf: 'flex-start',\n        }),\n\n        ...customStyles,\n\n        '& img, & svg': {\n          ...createMediaQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n            width: '140px',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    ],\n  });\n\nconst personLockup = ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupPropsWithStyles) =>\n  textLockup.person({\n    actions,\n    name,\n    nameComposite,\n    job,\n    association,\n    pronouns,\n    subText,\n    isThemeDark,\n  });\n\nexport const details = (props: PersonTextLockupPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  return ElementModel.createDiv({\n    className: 'person-column-details',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n        ...customStyles,\n      },\n    },\n    children: [personLockup(props)],\n  });\n};\n\nconst contactLockup = ({\n  actions,\n  additionalContact,\n  address,\n  email,\n  isThemeDark,\n  linkendIn,\n  phone,\n}: PersonContactPropsWithStyles) =>\n  textLockup.contact({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkendIn,\n    phone,\n  });\n\nexport const contact = (props: PersonContactPropsWithStyles) => {\n  const { customStyles = {} } = props;\n\n  return ElementModel.createDiv({\n    className: 'person-column-contact',\n    elementStyles: {\n      element: {\n        marginTop: `${token.spacing.sm}`,\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          paddingLeft: `${token.spacing.md}`,\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: '30%',\n        }),\n\n        ...customStyles,\n      },\n    },\n    children: [contactLockup(props)],\n  });\n};\n\nexport const information = ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  customStyles = {},\n  email,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonFullProps) => {\n  return ElementModel.createDiv({\n    className: 'person-column-information',\n    elementStyles: {\n      element: {\n        ...customStyles,\n      },\n    },\n    children: [\n      personLockup({\n        association,\n        isThemeDark,\n        job,\n        name,\n        pronouns,\n        subText,\n      }),\n      contactLockup({\n        actions,\n        additionalContact,\n        address,\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    ],\n  });\n};\n"],"names":["token","image","ElementModel.createDiv","createMediaQuery","assets.image.background","textLockup.person","textLockup.contact"],"mappings":"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"}
+{"version":3,"file":"columns.js","sources":["../../../../source/atomic/layout/person/columns.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { createMediaQuery } from '@universityofmaryland/web-utilities-library/styles';\nimport { assets, textLockup } from 'atomic';\nimport {\n  type PersonContactPropsWithStyles,\n  type PersonTextLockupPropsWithStyles,\n  type PersonFullProps,\n} 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\nexport const image = ({\n  customStyles,\n  image,\n  isThemeDark,\n}: {\n  customStyles?: Record<string, any>;\n  image: HTMLImageElement;\n  isThemeDark?: boolean;\n}) => {\n  const backgroundImage = assets.image.background({\n    element: image,\n    isScaled: false,\n  });\n\n  return new ElementBuilder()\n    .withClassName('person-column-image')\n    .withStyles({\n      element: {\n        ...createMediaQuery('max-width', smallBreakpoint, {\n          marginBottom: `${token.spacing.md}`,\n          backgroundColor: `${token.color.gray.lighter}`,\n          display: 'flex',\n          justifyContent: 'center',\n\n          ...(isThemeDark && {\n            ...createMediaQuery('max-width', smallBreakpoint, {\n              backgroundColor: `${token.color.gray.darker}`,\n            }),\n          }),\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          display: 'block',\n          width: '96px',\n          paddingRight: `${token.spacing.md}`,\n          alignSelf: 'flex-start',\n        }),\n\n        ...customStyles,\n\n        '& img, & svg': {\n          ...createMediaQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n            width: '140px',\n          }),\n        },\n      },\n    })\n    .withChild(backgroundImage)\n    .build();\n};\n\nconst personLockup = ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupPropsWithStyles) =>\n  textLockup.person({\n    actions,\n    name,\n    nameComposite,\n    job,\n    association,\n    pronouns,\n    subText,\n    isThemeDark,\n  });\n\nexport const details = (props: PersonTextLockupPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  const lockup = personLockup(props);\n\n  return new ElementBuilder()\n    .withClassName('person-column-details')\n    .withStyles({\n      element: {\n        flex: '1 0',\n        ...customStyles,\n      },\n    })\n    .withChild(lockup)\n    .build();\n};\n\nconst contactLockup = ({\n  actions,\n  additionalContact,\n  address,\n  email,\n  isThemeDark,\n  linkendIn,\n  phone,\n}: PersonContactPropsWithStyles) =>\n  textLockup.contact({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkendIn,\n    phone,\n  });\n\nexport const contact = (props: PersonContactPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  const lockup = contactLockup(props);\n\n  return new ElementBuilder()\n    .withClassName('person-column-contact')\n    .withStyles({\n      element: {\n        marginTop: `${token.spacing.sm}`,\n\n        ...createMediaQuery('min-width', mediumBreakpointStart, {\n          paddingLeft: `${token.spacing.md}`,\n        }),\n\n        ...createMediaQuery('min-width', mediumBreakpoint, {\n          width: '30%',\n        }),\n\n        ...customStyles,\n      },\n    })\n    .withChild(lockup)\n    .build();\n};\n\nexport const information = ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  customStyles = {},\n  email,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonFullProps) => {\n  const person = personLockup({\n    association,\n    isThemeDark,\n    job,\n    name,\n    pronouns,\n    subText,\n  });\n\n  const contact = contactLockup({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkendIn,\n    phone,\n  });\n\n  return new ElementBuilder()\n    .withClassName('person-column-information')\n    .withStyles({\n      element: {\n        ...customStyles,\n      },\n    })\n    .withChildren(person, contact)\n    .build();\n};\n"],"names":["token","image","assets.image.background","ElementBuilder","createMediaQuery","textLockup.person","textLockup.contact","person","contact"],"mappings":"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"}