@universityofmaryland/web-elements-library 1.3.7 → 1.4.1

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

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Styles = require("@universityofmaryland/web-styles-library");
+require("../../../node_modules/postcss/lib/postcss.js");
+require("../../../node_modules/postcss-nesting/dist/index.js");
+require("../../../node_modules/postcss-js/index.js");
+const media = require("../../../utilities/theme/media.js");
+const index = require("../../../model/elements/index.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 Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const smallBreakpoint = Styles__namespace.token.media.breakpointValues.small.max;
+const mediumBreakpointStart = Styles__namespace.token.media.breakpointValues.medium.min;
+const mediumBreakpoint = Styles__namespace.token.media.breakpointValues.large.min;
+const image = ({
+  customStyles = {},
+  children,
+  hasBorder = false,
+  isThemeDark = false
+}) => index.createDiv({
+  className: "layout-block-stacked-image",
+  children,
+  elementStyles: {
+    element: {
+      height: "auto",
+      position: "relative",
+      zIndex: 99,
+      // Gif Overwrite
+      [`&:has(.${Styles__namespace.element.asset.gif.toggle.className})`]: {
+        aspectRatio: "4 / 3"
+      },
+      ...media.createContainerQuery("max-width", smallBreakpoint, {
+        marginLeft: Styles__namespace.token.spacing.sm,
+        marginBottom: Styles__namespace.token.spacing.md,
+        width: "120px",
+        float: "right",
+        alignSelf: "flex-start",
+        ...isThemeDark && {
+          marginRight: 0,
+          marginTop: 0
+        }
+      }),
+      ...media.createContainerQuery(
+        "min-width",
+        mediumBreakpointStart,
+        {
+          display: "block"
+        }
+      ),
+      ...media.createRangeContainerQuery(
+        mediumBreakpointStart,
+        mediumBreakpoint,
+        {
+          ...hasBorder && {
+            marginLeft: Styles__namespace.token.spacing.sm
+          }
+        }
+      ),
+      ...customStyles,
+      "& img": {
+        ...media.createContainerQuery("max-width", smallBreakpoint, {
+          height: "auto !important"
+        })
+      }
+    }
+  }
+});
+const textContainer = ({
+  children,
+  customStyles = {},
+  hasBorder = false,
+  isThemeDark = false,
+  isTransparent = false
+}) => index.createDiv({
+  className: "layout-block-stacked-text",
+  children,
+  elementStyles: {
+    element: {
+      maxWidth: `${Styles__namespace.token.spacing.maxWidth.smallest}`,
+      ...media.createContainerQuery(
+        "min-width",
+        mediumBreakpointStart,
+        {
+          paddingTop: Styles__namespace.token.spacing.md
+        }
+      ),
+      ...media.createContainerQuery(
+        "min-width",
+        mediumBreakpointStart,
+        {
+          paddingTop: Styles__namespace.token.spacing.lg,
+          ...hasBorder && {
+            padding: Styles__namespace.token.spacing.md
+          },
+          ...isThemeDark && !isTransparent && {
+            padding: Styles__namespace.token.spacing.md
+          }
+        }
+      ),
+      ...customStyles
+    }
+  }
+});
+const container = ({
+  children,
+  customStyles = {},
+  hasBorder = false,
+  isThemeDark = false,
+  isTransparent = false
+}) => index.createDiv({
+  className: "layout-block-stacked-container",
+  children,
+  elementStyles: {
+    element: {
+      containerType: "inline-size",
+      height: "100%",
+      ...isThemeDark && {
+        backgroundColor: Styles__namespace.token.color.gray.darker
+      },
+      ...isTransparent && {
+        backgroundColor: "transparent"
+      },
+      ...hasBorder && {
+        border: `1px solid ${Styles__namespace.token.color.gray.light}`
+      },
+      ...hasBorder && isThemeDark && {
+        border: `1px solid ${Styles__namespace.token.color.gray.darker}`
+      },
+      ...media.createContainerQuery("max-width", smallBreakpoint, {
+        ...isThemeDark && !isTransparent && {
+          padding: Styles__namespace.token.spacing.md
+        },
+        ...hasBorder && {
+          padding: Styles__namespace.token.spacing.md
+        }
+      }),
+      ...customStyles
+    }
+  }
+});
+exports.container = container;
+exports.image = image;
+exports.textContainer = textContainer;
+//# sourceMappingURL=stacked.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stacked.js","sources":["../../../../source/atomic/layout/block/stacked.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport { type UMDElement } from '../../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.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(.${Styles.element.asset.gif.toggle.className})`]: {\n          aspectRatio: '4 / 3',\n        },\n\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          marginLeft: Styles.token.spacing.sm,\n          marginBottom: Styles.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        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'block',\n          },\n        ),\n\n        ...theme.media.createRangeContainerQuery(\n          mediumBreakpointStart,\n          mediumBreakpoint,\n          {\n            ...(hasBorder && {\n              marginLeft: Styles.token.spacing.sm,\n            }),\n          },\n        ),\n\n        ...customStyles,\n\n        '& img': {\n          ...theme.media.createContainerQuery('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: `${Styles.token.spacing.maxWidth.smallest}`,\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            paddingTop: Styles.token.spacing.md,\n          },\n        ),\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            paddingTop: Styles.token.spacing.lg,\n\n            ...(hasBorder && {\n              padding: Styles.token.spacing.md,\n            }),\n\n            ...(isThemeDark &&\n              !isTransparent && {\n                padding: Styles.token.spacing.md,\n              }),\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: Styles.token.color.gray.darker,\n        }),\n\n        ...(isTransparent && {\n          backgroundColor: 'transparent',\n        }),\n\n        ...(hasBorder && {\n          border: `1px solid ${Styles.token.color.gray.light}`,\n        }),\n\n        ...(hasBorder &&\n          isThemeDark && {\n            border: `1px solid ${Styles.token.color.gray.darker}`,\n          }),\n\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          ...(isThemeDark &&\n            !isTransparent && {\n              padding: Styles.token.spacing.md,\n            }),\n\n          ...(hasBorder && {\n            padding: Styles.token.spacing.md,\n          }),\n        }),\n\n        ...customStyles,\n      },\n    },\n  });\n"],"names":["Styles","ElementModel.createDiv","theme.media.createContainerQuery","theme.media.createRangeContainerQuery"],"mappings":"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"}

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

@@ -0,0 +1,141 @@
+import * as Styles from "@universityofmaryland/web-styles-library";
+import "../../../node_modules/postcss/lib/postcss.mjs";
+import "../../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../../node_modules/postcss-js/index.mjs";
+import { createContainerQuery, createRangeContainerQuery } from "../../../utilities/theme/media.mjs";
+import { createDiv } from "../../../model/elements/index.mjs";
+const smallBreakpoint = Styles.token.media.breakpointValues.small.max;
+const mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;
+const mediumBreakpoint = Styles.token.media.breakpointValues.large.min;
+const image = ({
+  customStyles = {},
+  children,
+  hasBorder = false,
+  isThemeDark = false
+}) => createDiv({
+  className: "layout-block-stacked-image",
+  children,
+  elementStyles: {
+    element: {
+      height: "auto",
+      position: "relative",
+      zIndex: 99,
+      // Gif Overwrite
+      [`&:has(.${Styles.element.asset.gif.toggle.className})`]: {
+        aspectRatio: "4 / 3"
+      },
+      ...createContainerQuery("max-width", smallBreakpoint, {
+        marginLeft: Styles.token.spacing.sm,
+        marginBottom: Styles.token.spacing.md,
+        width: "120px",
+        float: "right",
+        alignSelf: "flex-start",
+        ...isThemeDark && {
+          marginRight: 0,
+          marginTop: 0
+        }
+      }),
+      ...createContainerQuery(
+        "min-width",
+        mediumBreakpointStart,
+        {
+          display: "block"
+        }
+      ),
+      ...createRangeContainerQuery(
+        mediumBreakpointStart,
+        mediumBreakpoint,
+        {
+          ...hasBorder && {
+            marginLeft: Styles.token.spacing.sm
+          }
+        }
+      ),
+      ...customStyles,
+      "& img": {
+        ...createContainerQuery("max-width", smallBreakpoint, {
+          height: "auto !important"
+        })
+      }
+    }
+  }
+});
+const textContainer = ({
+  children,
+  customStyles = {},
+  hasBorder = false,
+  isThemeDark = false,
+  isTransparent = false
+}) => createDiv({
+  className: "layout-block-stacked-text",
+  children,
+  elementStyles: {
+    element: {
+      maxWidth: `${Styles.token.spacing.maxWidth.smallest}`,
+      ...createContainerQuery(
+        "min-width",
+        mediumBreakpointStart,
+        {
+          paddingTop: Styles.token.spacing.md
+        }
+      ),
+      ...createContainerQuery(
+        "min-width",
+        mediumBreakpointStart,
+        {
+          paddingTop: Styles.token.spacing.lg,
+          ...hasBorder && {
+            padding: Styles.token.spacing.md
+          },
+          ...isThemeDark && !isTransparent && {
+            padding: Styles.token.spacing.md
+          }
+        }
+      ),
+      ...customStyles
+    }
+  }
+});
+const container = ({
+  children,
+  customStyles = {},
+  hasBorder = false,
+  isThemeDark = false,
+  isTransparent = false
+}) => createDiv({
+  className: "layout-block-stacked-container",
+  children,
+  elementStyles: {
+    element: {
+      containerType: "inline-size",
+      height: "100%",
+      ...isThemeDark && {
+        backgroundColor: Styles.token.color.gray.darker
+      },
+      ...isTransparent && {
+        backgroundColor: "transparent"
+      },
+      ...hasBorder && {
+        border: `1px solid ${Styles.token.color.gray.light}`
+      },
+      ...hasBorder && isThemeDark && {
+        border: `1px solid ${Styles.token.color.gray.darker}`
+      },
+      ...createContainerQuery("max-width", smallBreakpoint, {
+        ...isThemeDark && !isTransparent && {
+          padding: Styles.token.spacing.md
+        },
+        ...hasBorder && {
+          padding: Styles.token.spacing.md
+        }
+      }),
+      ...customStyles
+    }
+  }
+});
+export {
+  container,
+  image,
+  textContainer
+};
+//# sourceMappingURL=stacked.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stacked.mjs","sources":["../../../../source/atomic/layout/block/stacked.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport { type UMDElement } from '../../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.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(.${Styles.element.asset.gif.toggle.className})`]: {\n          aspectRatio: '4 / 3',\n        },\n\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          marginLeft: Styles.token.spacing.sm,\n          marginBottom: Styles.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        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'block',\n          },\n        ),\n\n        ...theme.media.createRangeContainerQuery(\n          mediumBreakpointStart,\n          mediumBreakpoint,\n          {\n            ...(hasBorder && {\n              marginLeft: Styles.token.spacing.sm,\n            }),\n          },\n        ),\n\n        ...customStyles,\n\n        '& img': {\n          ...theme.media.createContainerQuery('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: `${Styles.token.spacing.maxWidth.smallest}`,\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            paddingTop: Styles.token.spacing.md,\n          },\n        ),\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            paddingTop: Styles.token.spacing.lg,\n\n            ...(hasBorder && {\n              padding: Styles.token.spacing.md,\n            }),\n\n            ...(isThemeDark &&\n              !isTransparent && {\n                padding: Styles.token.spacing.md,\n              }),\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: Styles.token.color.gray.darker,\n        }),\n\n        ...(isTransparent && {\n          backgroundColor: 'transparent',\n        }),\n\n        ...(hasBorder && {\n          border: `1px solid ${Styles.token.color.gray.light}`,\n        }),\n\n        ...(hasBorder &&\n          isThemeDark && {\n            border: `1px solid ${Styles.token.color.gray.darker}`,\n          }),\n\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          ...(isThemeDark &&\n            !isTransparent && {\n              padding: Styles.token.spacing.md,\n            }),\n\n          ...(hasBorder && {\n            padding: Styles.token.spacing.md,\n          }),\n        }),\n\n        ...customStyles,\n      },\n    },\n  });\n"],"names":["ElementModel.createDiv","theme.media.createContainerQuery","theme.media.createRangeContainerQuery"],"mappings":"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"}

package/dist/atomic/layout/index.d.ts

@@ -1,3 +1,4 @@
+export * as block from './block';
 export * as overlay from './overlay';
 export * as person from './person';
 //# sourceMappingURL=index.d.ts.map

package/dist/atomic/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/atomic/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/atomic/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AACjC,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AACrC,OAAO,KAAK,MAAM,MAAM,UAAU,CAAC"}

package/dist/atomic/layout/index.js

@@ -0,0 +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;
+//# sourceMappingURL=index.js.map

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

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

package/dist/atomic/layout/index.mjs

@@ -0,0 +1,9 @@
+import * as index from "./block/index.mjs";
+import * as index$1 from "./overlay/index.mjs";
+import * as index$2 from "./person/index.mjs";
+export {
+  index as block,
+  index$1 as overlay,
+  index$2 as person
+};
+//# sourceMappingURL=index.mjs.map

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

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

package/dist/atomic/layout/overlay/index.d.ts

@@ -1,2 +1,2 @@
-export { default as modal } from './modal';
+export { createModal as modal } from './modal';
 //# sourceMappingURL=index.d.ts.map

package/dist/atomic/layout/overlay/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC"}

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { createModal } from "./modal.mjs";
+export {
+  createModal as modal
+};
+//# sourceMappingURL=index.mjs.map

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

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

package/dist/atomic/layout/overlay/modal.d.ts

@@ -5,7 +5,7 @@ type TypeFixedFullScreenProps = {
     context?: HTMLElement | null;
 };
 export declare const STYLES_MODAL: string;
-declare const _default: ({ content, callback, isHidden, context, }: TypeFixedFullScreenProps) => {
+export declare const createModal: ({ content, callback, isHidden, context, }: TypeFixedFullScreenProps) => {
     element: HTMLDivElement;
     styles: string;
     events: {
@@ -13,5 +13,5 @@ declare const _default: ({ content, callback, isHidden, context, }: TypeFixedFul
         hide: () => void;
     };
 };
-export default _default;
+export {};
 //# sourceMappingURL=modal.d.ts.map

package/dist/atomic/layout/overlay/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"names":[],"mappings":"AAGA,KAAK,wBAAwB,GAAG;IAC9B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B,CAAC;AAKF,eAAO,MAAM,YAAY,QAuBxB,CAAC;oEAOC,wBAAwB;;;;;;;;AAL3B,wBAsEE"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"names":[],"mappings":"AAGA,KAAK,wBAAwB,GAAG;IAC9B,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC9B,CAAC;AAKF,eAAO,MAAM,YAAY,QAuBxB,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,2CAKzB,wBAAwB;;;;;;;CAiE1B,CAAC"}

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

@@ -0,0 +1,97 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Styles = require("@universityofmaryland/web-styles-library");
+const index = require("../../../utilities/accessibility/index.js");
+require("../../../node_modules/postcss/lib/postcss.js");
+require("../../../node_modules/postcss-nesting/dist/index.js");
+require("../../../node_modules/postcss-js/index.js");
+const ELEMENT_CONTAINER = "modal-screen-container";
+const ELEMENT_CONTAINER_BACKGROUND = "modal-screen-container-background";
+const STYLES_MODAL = `
+  .${ELEMENT_CONTAINER} {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999999;
+  }
+
+  .${ELEMENT_CONTAINER_BACKGROUND} {
+    background-color: rgba(0, 0, 0, 0.9);
+    padding: ${Styles.token.spacing.xl} ${Styles.token.spacing.md};
+    width: 100%;
+    height: 100%;
+  }
+
+  @media (${Styles.token.media.queries.tablet.min}) {
+    .${ELEMENT_CONTAINER_BACKGROUND} {
+      padding: 10vh 10vw;
+    }
+  }
+`;
+const createModal = ({
+  content,
+  callback,
+  isHidden,
+  context
+}) => {
+  const body = document.body;
+  const html = document.documentElement;
+  const container = document.createElement("div");
+  const background = document.createElement("div");
+  let eventReference = null;
+  let accessibiltyEventReference = null;
+  const show = () => {
+    container.style.display = "block";
+    body.style.overflow = "hidden";
+    body.style.height = "100%";
+    html.style.overflow = "hidden";
+    html.style.height = "100%";
+    eventReference = container.addEventListener("click", (event) => {
+      const target = event.target;
+      if (target === container) hide();
+    });
+    accessibiltyEventReference = index.eventAccessibilityFocusTrap({
+      element: container,
+      action: hide,
+      shadowDomContext: context || null
+    });
+    setTimeout(() => {
+      if (content) content.focus();
+    }, 100);
+  };
+  const hide = () => {
+    body.style.overflow = "visible";
+    body.style.height = "inherit";
+    html.style.overflow = "visible";
+    html.style.height = "inherit";
+    container.style.display = "none";
+    if (accessibiltyEventReference) accessibiltyEventReference();
+    if (eventReference)
+      eventReference.removeEventListener("click", () => hide());
+    setTimeout(() => {
+      if (context) {
+        const firstItem = context.querySelector("button, a");
+        firstItem?.focus();
+      }
+    }, 100);
+  };
+  background.classList.add(ELEMENT_CONTAINER_BACKGROUND);
+  if (content) background.appendChild(content);
+  container.classList.add(ELEMENT_CONTAINER);
+  container.appendChild(background);
+  if (isHidden) container.style.display = "none";
+  return {
+    element: container,
+    styles: STYLES_MODAL,
+    events: {
+      show,
+      hide
+    }
+  };
+};
+exports.STYLES_MODAL = STYLES_MODAL;
+exports.createModal = createModal;
+//# sourceMappingURL=modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\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 =\n      Utility.accessibility.eventAccessibilityFocusTrap({\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","Utility.accessibility.eventAccessibilityFocusTrap"],"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,OAAAA,MAAM,QAAQ,EAAE,IAAIA,OAAAA,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,YAKvCA,OAAAA,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,iCACEC,MAAAA,4BAAkD;AAAA,MAChD,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,kBAAkB,WAAW;AAAA,IAAA,CAC9B;AAEH,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

@@ -0,0 +1,97 @@
+import { token } from "@universityofmaryland/web-styles-library";
+import { eventAccessibilityFocusTrap } from "../../../utilities/accessibility/index.mjs";
+import "../../../node_modules/postcss/lib/postcss.mjs";
+import "../../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../../node_modules/postcss-js/index.mjs";
+const ELEMENT_CONTAINER = "modal-screen-container";
+const ELEMENT_CONTAINER_BACKGROUND = "modal-screen-container-background";
+const STYLES_MODAL = `
+  .${ELEMENT_CONTAINER} {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 999999;
+  }
+
+  .${ELEMENT_CONTAINER_BACKGROUND} {
+    background-color: rgba(0, 0, 0, 0.9);
+    padding: ${token.spacing.xl} ${token.spacing.md};
+    width: 100%;
+    height: 100%;
+  }
+
+  @media (${token.media.queries.tablet.min}) {
+    .${ELEMENT_CONTAINER_BACKGROUND} {
+      padding: 10vh 10vw;
+    }
+  }
+`;
+const createModal = ({
+  content,
+  callback,
+  isHidden,
+  context
+}) => {
+  const body = document.body;
+  const html = document.documentElement;
+  const container = document.createElement("div");
+  const background = document.createElement("div");
+  let eventReference = null;
+  let accessibiltyEventReference = null;
+  const show = () => {
+    container.style.display = "block";
+    body.style.overflow = "hidden";
+    body.style.height = "100%";
+    html.style.overflow = "hidden";
+    html.style.height = "100%";
+    eventReference = container.addEventListener("click", (event) => {
+      const target = event.target;
+      if (target === container) hide();
+    });
+    accessibiltyEventReference = eventAccessibilityFocusTrap({
+      element: container,
+      action: hide,
+      shadowDomContext: context || null
+    });
+    setTimeout(() => {
+      if (content) content.focus();
+    }, 100);
+  };
+  const hide = () => {
+    body.style.overflow = "visible";
+    body.style.height = "inherit";
+    html.style.overflow = "visible";
+    html.style.height = "inherit";
+    container.style.display = "none";
+    if (accessibiltyEventReference) accessibiltyEventReference();
+    if (eventReference)
+      eventReference.removeEventListener("click", () => hide());
+    setTimeout(() => {
+      if (context) {
+        const firstItem = context.querySelector("button, a");
+        firstItem?.focus();
+      }
+    }, 100);
+  };
+  background.classList.add(ELEMENT_CONTAINER_BACKGROUND);
+  if (content) background.appendChild(content);
+  container.classList.add(ELEMENT_CONTAINER);
+  container.appendChild(background);
+  if (isHidden) container.style.display = "none";
+  return {
+    element: container,
+    styles: STYLES_MODAL,
+    events: {
+      show,
+      hide
+    }
+  };
+};
+export {
+  STYLES_MODAL,
+  createModal
+};
+//# sourceMappingURL=modal.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.mjs","sources":["../../../../source/atomic/layout/overlay/modal.ts"],"sourcesContent":["import { token } from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\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 =\n      Utility.accessibility.eventAccessibilityFocusTrap({\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":["Utility.accessibility.eventAccessibilityFocusTrap"],"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,iCACEA,4BAAkD;AAAA,MAChD,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,kBAAkB,WAAW;AAAA,IAAA,CAC9B;AAEH,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,4 +1,4 @@
-import { type PersonContactPropsWithStyles, type PersonTextLockupPropsWithStyles, type PersonFullProps } from '../../_types';
+import { PersonContactPropsWithStyles, PersonTextLockupPropsWithStyles, PersonFullProps } from '../../_types';
 export declare const image: ({ customStyles, image, isThemeDark, }: {
     customStyles?: Record<string, any>;
     image: HTMLImageElement;

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,0CAIf;IACD,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,KAAK,EAAE,gBAAgB,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;;;;CA6CG,CAAC;AAuBL,eAAO,MAAM,OAAO,UACX,+BAA+B;;;;CAavC,CAAC;AAqBF,eAAO,MAAM,OAAO,UACX,4BAA4B;;;;CA2BpC,CAAC;AAEF,eAAO,MAAM,WAAW,4IAcrB,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;;;;CA6CG,CAAC;AAuBL,eAAO,MAAM,OAAO,GAAI,OAAO,+BAA+B;;;;CAY7D,CAAC;AAqBF,eAAO,MAAM,OAAO,GAAI,OAAO,4BAA4B;;;;CA0B1D,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,yIAczB,eAAe;;;;CA4BjB,CAAC"}