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

package/dist/atomic/events/sign.js

@@ -1,8 +1,25 @@
 "use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
+const token = require("@universityofmaryland/web-styles-library/token");
 const index = require("../../model/elements/index.js");
 const event = require("../../model/elements/event.js");
 const headline = require("../../model/elements/headline.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const makeDateElement = ({
   element,
   isMonth,
@@ -47,7 +64,7 @@ const makeStartDateBlock = ({
   className: "event-sign-start",
   elementStyles: {
     subElement: {
-      color: Styles.token.color.black
+      color: token__namespace.color.black
     }
   },
   children: [

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

@@ -1 +1 @@
-{"version":3,"file":"sign.js","sources":["../../../source/atomic/events/sign.ts"],"sourcesContent":["import Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { ElementVisual } from '../../_types';\n\nconst makeDateElement = ({\n  element,\n  isMonth,\n  isDay,\n  isLargeSize,\n  isMultiDay,\n  isThemeDark,\n}: {\n  element: string | HTMLElement;\n  isMonth?: boolean;\n  isDay?: boolean;\n  isLargeSize?: boolean;\n  isMultiDay?: boolean;\n  isThemeDark?: boolean;\n}) => {\n  const dateElement = document.createElement('span');\n  if (typeof element === 'string') {\n    dateElement.innerHTML = element;\n  } else {\n    dateElement.appendChild(element);\n  }\n\n  if (isDay && isLargeSize && !isMultiDay) {\n    return ElementModel.headline.sansExtraLarge({\n      element: dateElement,\n      isThemeDark,\n    });\n  }\n\n  if (isDay) {\n    return ElementModel.headline.sansLarger({\n      element: dateElement,\n      isThemeDark,\n    });\n  }\n\n  if (isMonth && isLargeSize && !isMultiDay) {\n    return ElementModel.headline.sansSmall({\n      element: dateElement,\n      isThemeDark,\n    });\n  }\n\n  return ElementModel.headline.sansMin({ element: dateElement, isThemeDark });\n};\n\nconst makeStartDateBlock = ({\n  startMonth,\n  startDay,\n  isLargeSize,\n  isMultiDay,\n  isThemeDark,\n}: {\n  startMonth: string | HTMLElement;\n  startDay: string | HTMLElement;\n  isLargeSize?: boolean;\n  isMultiDay?: boolean;\n  isThemeDark?: boolean;\n}) =>\n  ElementModel.createParagraph({\n    className: 'event-sign-start',\n    elementStyles: {\n      subElement: {\n        color: Styles.token.color.black,\n      },\n    },\n    children: [\n      makeDateElement({\n        element: startMonth,\n        isMonth: true,\n        isLargeSize,\n        isMultiDay,\n        isThemeDark,\n      }),\n      makeDateElement({\n        element: startDay,\n        isDay: true,\n        isLargeSize,\n        isMultiDay,\n        isThemeDark,\n      }),\n    ],\n  });\n\nconst makeEndDateBlock = ({\n  endMonth,\n  endDay,\n  isThemeDark,\n}: {\n  endDay: string | HTMLElement;\n  endMonth: string | HTMLElement;\n  isThemeDark?: boolean;\n}) =>\n  ElementModel.createParagraph({\n    className: 'event-sign-end',\n    children: [\n      makeDateElement({\n        element: endMonth,\n        isMonth: true,\n        isMultiDay: true,\n        isThemeDark,\n      }),\n      makeDateElement({\n        element: endDay,\n        isDay: true,\n        isMultiDay: true,\n        isThemeDark,\n      }),\n    ],\n  });\n\nexport default (props: {\n  startMonth: string | HTMLElement;\n  startDay: string | HTMLElement;\n  endDay?: string | HTMLElement;\n  endMonth?: string | HTMLElement;\n  isThemeDark?: boolean;\n  isLargeSize?: boolean;\n}) => {\n  const {\n    startMonth,\n    startDay,\n    endDay,\n    endMonth,\n    isThemeDark,\n    isLargeSize = false,\n  } = props;\n  const isTheSameMonth = endMonth === startMonth;\n  const isTheSameDay = endDay === startDay;\n  const isMultiDay = !isTheSameMonth || !isTheSameDay;\n  let children: ElementVisual[] = [];\n\n  children.push(\n    makeStartDateBlock({\n      startMonth,\n      startDay,\n      isLargeSize,\n      isMultiDay,\n      isThemeDark,\n    }),\n  );\n\n  if (isMultiDay && endDay && endMonth) {\n    const srOnly = ElementModel.createSpan({\n      className: 'sr-only',\n    });\n    const dash = ElementModel.createSpan({\n      className: 'dash',\n      elementStyles: {\n        element: {\n          width: '10px',\n          height: '3px',\n          margin: '13px 5px 0',\n          display: 'block',\n          backgroundColor: isThemeDark ? 'white' : 'black',\n        },\n      },\n    });\n\n    srOnly.element.innerHTML = 'to';\n\n    children.push(\n      srOnly,\n      dash,\n      makeEndDateBlock({\n        endDay,\n        endMonth,\n        isThemeDark,\n      }),\n    );\n  }\n\n  return ElementModel.event.signContainer({\n    element: document.createElement('div'),\n    children,\n  });\n};\n"],"names":["ElementModel.headline.sansExtraLarge","ElementModel.headline.sansLarger","ElementModel.headline.sansSmall","ElementModel.headline.sansMin","ElementModel.createParagraph","ElementModel.createSpan","ElementModel.event.signContainer"],"mappings":"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"}
+{"version":3,"file":"sign.js","sources":["../../../source/atomic/events/sign.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { ElementVisual } from '../../_types';\n\nconst makeDateElement = ({\n  element,\n  isMonth,\n  isDay,\n  isLargeSize,\n  isMultiDay,\n  isThemeDark,\n}: {\n  element: string | HTMLElement;\n  isMonth?: boolean;\n  isDay?: boolean;\n  isLargeSize?: boolean;\n  isMultiDay?: boolean;\n  isThemeDark?: boolean;\n}) => {\n  const dateElement = document.createElement('span');\n  if (typeof element === 'string') {\n    dateElement.innerHTML = element;\n  } else {\n    dateElement.appendChild(element);\n  }\n\n  if (isDay && isLargeSize && !isMultiDay) {\n    return ElementModel.headline.sansExtraLarge({\n      element: dateElement,\n      isThemeDark,\n    });\n  }\n\n  if (isDay) {\n    return ElementModel.headline.sansLarger({\n      element: dateElement,\n      isThemeDark,\n    });\n  }\n\n  if (isMonth && isLargeSize && !isMultiDay) {\n    return ElementModel.headline.sansSmall({\n      element: dateElement,\n      isThemeDark,\n    });\n  }\n\n  return ElementModel.headline.sansMin({ element: dateElement, isThemeDark });\n};\n\nconst makeStartDateBlock = ({\n  startMonth,\n  startDay,\n  isLargeSize,\n  isMultiDay,\n  isThemeDark,\n}: {\n  startMonth: string | HTMLElement;\n  startDay: string | HTMLElement;\n  isLargeSize?: boolean;\n  isMultiDay?: boolean;\n  isThemeDark?: boolean;\n}) =>\n  ElementModel.createParagraph({\n    className: 'event-sign-start',\n    elementStyles: {\n      subElement: {\n        color: token.color.black,\n      },\n    },\n    children: [\n      makeDateElement({\n        element: startMonth,\n        isMonth: true,\n        isLargeSize,\n        isMultiDay,\n        isThemeDark,\n      }),\n      makeDateElement({\n        element: startDay,\n        isDay: true,\n        isLargeSize,\n        isMultiDay,\n        isThemeDark,\n      }),\n    ],\n  });\n\nconst makeEndDateBlock = ({\n  endMonth,\n  endDay,\n  isThemeDark,\n}: {\n  endDay: string | HTMLElement;\n  endMonth: string | HTMLElement;\n  isThemeDark?: boolean;\n}) =>\n  ElementModel.createParagraph({\n    className: 'event-sign-end',\n    children: [\n      makeDateElement({\n        element: endMonth,\n        isMonth: true,\n        isMultiDay: true,\n        isThemeDark,\n      }),\n      makeDateElement({\n        element: endDay,\n        isDay: true,\n        isMultiDay: true,\n        isThemeDark,\n      }),\n    ],\n  });\n\nexport default (props: {\n  startMonth: string | HTMLElement;\n  startDay: string | HTMLElement;\n  endDay?: string | HTMLElement;\n  endMonth?: string | HTMLElement;\n  isThemeDark?: boolean;\n  isLargeSize?: boolean;\n}) => {\n  const {\n    startMonth,\n    startDay,\n    endDay,\n    endMonth,\n    isThemeDark,\n    isLargeSize = false,\n  } = props;\n  const isTheSameMonth = endMonth === startMonth;\n  const isTheSameDay = endDay === startDay;\n  const isMultiDay = !isTheSameMonth || !isTheSameDay;\n  let children: ElementVisual[] = [];\n\n  children.push(\n    makeStartDateBlock({\n      startMonth,\n      startDay,\n      isLargeSize,\n      isMultiDay,\n      isThemeDark,\n    }),\n  );\n\n  if (isMultiDay && endDay && endMonth) {\n    const srOnly = ElementModel.createSpan({\n      className: 'sr-only',\n    });\n    const dash = ElementModel.createSpan({\n      className: 'dash',\n      elementStyles: {\n        element: {\n          width: '10px',\n          height: '3px',\n          margin: '13px 5px 0',\n          display: 'block',\n          backgroundColor: isThemeDark ? 'white' : 'black',\n        },\n      },\n    });\n\n    srOnly.element.innerHTML = 'to';\n\n    children.push(\n      srOnly,\n      dash,\n      makeEndDateBlock({\n        endDay,\n        endMonth,\n        isThemeDark,\n      }),\n    );\n  }\n\n  return ElementModel.event.signContainer({\n    element: document.createElement('div'),\n    children,\n  });\n};\n"],"names":["ElementModel.headline.sansExtraLarge","ElementModel.headline.sansLarger","ElementModel.headline.sansSmall","ElementModel.headline.sansMin","ElementModel.createParagraph","token","ElementModel.createSpan","ElementModel.event.signContainer"],"mappings":"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"}

package/dist/atomic/events/sign.mjs

@@ -1,4 +1,4 @@
-import Styles__default from "@universityofmaryland/web-styles-library";
+import * as token from "@universityofmaryland/web-styles-library/token";
 import { createParagraph, createSpan } from "../../model/elements/index.mjs";
 import { signContainer } from "../../model/elements/event.mjs";
 import { sansExtraLarge, sansLarger, sansSmall, sansMin } from "../../model/elements/headline.mjs";
@@ -46,7 +46,7 @@ const makeStartDateBlock = ({
   className: "event-sign-start",
   elementStyles: {
     subElement: {
-      color: Styles__default.token.color.black
+      color: token.color.black
     }
   },
   children: [

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

@@ -1 +1 @@
-{"version":3,"file":"sign.mjs","sources":["../../../source/atomic/events/sign.ts"],"sourcesContent":["import Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { ElementVisual } from '../../_types';\n\nconst makeDateElement = ({\n  element,\n  isMonth,\n  isDay,\n  isLargeSize,\n  isMultiDay,\n  isThemeDark,\n}: {\n  element: string | HTMLElement;\n  isMonth?: boolean;\n  isDay?: boolean;\n  isLargeSize?: boolean;\n  isMultiDay?: boolean;\n  isThemeDark?: boolean;\n}) => {\n  const dateElement = document.createElement('span');\n  if (typeof element === 'string') {\n    dateElement.innerHTML = element;\n  } else {\n    dateElement.appendChild(element);\n  }\n\n  if (isDay && isLargeSize && !isMultiDay) {\n    return ElementModel.headline.sansExtraLarge({\n      element: dateElement,\n      isThemeDark,\n    });\n  }\n\n  if (isDay) {\n    return ElementModel.headline.sansLarger({\n      element: dateElement,\n      isThemeDark,\n    });\n  }\n\n  if (isMonth && isLargeSize && !isMultiDay) {\n    return ElementModel.headline.sansSmall({\n      element: dateElement,\n      isThemeDark,\n    });\n  }\n\n  return ElementModel.headline.sansMin({ element: dateElement, isThemeDark });\n};\n\nconst makeStartDateBlock = ({\n  startMonth,\n  startDay,\n  isLargeSize,\n  isMultiDay,\n  isThemeDark,\n}: {\n  startMonth: string | HTMLElement;\n  startDay: string | HTMLElement;\n  isLargeSize?: boolean;\n  isMultiDay?: boolean;\n  isThemeDark?: boolean;\n}) =>\n  ElementModel.createParagraph({\n    className: 'event-sign-start',\n    elementStyles: {\n      subElement: {\n        color: Styles.token.color.black,\n      },\n    },\n    children: [\n      makeDateElement({\n        element: startMonth,\n        isMonth: true,\n        isLargeSize,\n        isMultiDay,\n        isThemeDark,\n      }),\n      makeDateElement({\n        element: startDay,\n        isDay: true,\n        isLargeSize,\n        isMultiDay,\n        isThemeDark,\n      }),\n    ],\n  });\n\nconst makeEndDateBlock = ({\n  endMonth,\n  endDay,\n  isThemeDark,\n}: {\n  endDay: string | HTMLElement;\n  endMonth: string | HTMLElement;\n  isThemeDark?: boolean;\n}) =>\n  ElementModel.createParagraph({\n    className: 'event-sign-end',\n    children: [\n      makeDateElement({\n        element: endMonth,\n        isMonth: true,\n        isMultiDay: true,\n        isThemeDark,\n      }),\n      makeDateElement({\n        element: endDay,\n        isDay: true,\n        isMultiDay: true,\n        isThemeDark,\n      }),\n    ],\n  });\n\nexport default (props: {\n  startMonth: string | HTMLElement;\n  startDay: string | HTMLElement;\n  endDay?: string | HTMLElement;\n  endMonth?: string | HTMLElement;\n  isThemeDark?: boolean;\n  isLargeSize?: boolean;\n}) => {\n  const {\n    startMonth,\n    startDay,\n    endDay,\n    endMonth,\n    isThemeDark,\n    isLargeSize = false,\n  } = props;\n  const isTheSameMonth = endMonth === startMonth;\n  const isTheSameDay = endDay === startDay;\n  const isMultiDay = !isTheSameMonth || !isTheSameDay;\n  let children: ElementVisual[] = [];\n\n  children.push(\n    makeStartDateBlock({\n      startMonth,\n      startDay,\n      isLargeSize,\n      isMultiDay,\n      isThemeDark,\n    }),\n  );\n\n  if (isMultiDay && endDay && endMonth) {\n    const srOnly = ElementModel.createSpan({\n      className: 'sr-only',\n    });\n    const dash = ElementModel.createSpan({\n      className: 'dash',\n      elementStyles: {\n        element: {\n          width: '10px',\n          height: '3px',\n          margin: '13px 5px 0',\n          display: 'block',\n          backgroundColor: isThemeDark ? 'white' : 'black',\n        },\n      },\n    });\n\n    srOnly.element.innerHTML = 'to';\n\n    children.push(\n      srOnly,\n      dash,\n      makeEndDateBlock({\n        endDay,\n        endMonth,\n        isThemeDark,\n      }),\n    );\n  }\n\n  return ElementModel.event.signContainer({\n    element: document.createElement('div'),\n    children,\n  });\n};\n"],"names":["ElementModel.headline.sansExtraLarge","ElementModel.headline.sansLarger","ElementModel.headline.sansSmall","ElementModel.headline.sansMin","ElementModel.createParagraph","Styles","ElementModel.createSpan","ElementModel.event.signContainer"],"mappings":"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"}
+{"version":3,"file":"sign.mjs","sources":["../../../source/atomic/events/sign.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-styles-library/token';\nimport { ElementModel } from 'model';\nimport { ElementVisual } from '../../_types';\n\nconst makeDateElement = ({\n  element,\n  isMonth,\n  isDay,\n  isLargeSize,\n  isMultiDay,\n  isThemeDark,\n}: {\n  element: string | HTMLElement;\n  isMonth?: boolean;\n  isDay?: boolean;\n  isLargeSize?: boolean;\n  isMultiDay?: boolean;\n  isThemeDark?: boolean;\n}) => {\n  const dateElement = document.createElement('span');\n  if (typeof element === 'string') {\n    dateElement.innerHTML = element;\n  } else {\n    dateElement.appendChild(element);\n  }\n\n  if (isDay && isLargeSize && !isMultiDay) {\n    return ElementModel.headline.sansExtraLarge({\n      element: dateElement,\n      isThemeDark,\n    });\n  }\n\n  if (isDay) {\n    return ElementModel.headline.sansLarger({\n      element: dateElement,\n      isThemeDark,\n    });\n  }\n\n  if (isMonth && isLargeSize && !isMultiDay) {\n    return ElementModel.headline.sansSmall({\n      element: dateElement,\n      isThemeDark,\n    });\n  }\n\n  return ElementModel.headline.sansMin({ element: dateElement, isThemeDark });\n};\n\nconst makeStartDateBlock = ({\n  startMonth,\n  startDay,\n  isLargeSize,\n  isMultiDay,\n  isThemeDark,\n}: {\n  startMonth: string | HTMLElement;\n  startDay: string | HTMLElement;\n  isLargeSize?: boolean;\n  isMultiDay?: boolean;\n  isThemeDark?: boolean;\n}) =>\n  ElementModel.createParagraph({\n    className: 'event-sign-start',\n    elementStyles: {\n      subElement: {\n        color: token.color.black,\n      },\n    },\n    children: [\n      makeDateElement({\n        element: startMonth,\n        isMonth: true,\n        isLargeSize,\n        isMultiDay,\n        isThemeDark,\n      }),\n      makeDateElement({\n        element: startDay,\n        isDay: true,\n        isLargeSize,\n        isMultiDay,\n        isThemeDark,\n      }),\n    ],\n  });\n\nconst makeEndDateBlock = ({\n  endMonth,\n  endDay,\n  isThemeDark,\n}: {\n  endDay: string | HTMLElement;\n  endMonth: string | HTMLElement;\n  isThemeDark?: boolean;\n}) =>\n  ElementModel.createParagraph({\n    className: 'event-sign-end',\n    children: [\n      makeDateElement({\n        element: endMonth,\n        isMonth: true,\n        isMultiDay: true,\n        isThemeDark,\n      }),\n      makeDateElement({\n        element: endDay,\n        isDay: true,\n        isMultiDay: true,\n        isThemeDark,\n      }),\n    ],\n  });\n\nexport default (props: {\n  startMonth: string | HTMLElement;\n  startDay: string | HTMLElement;\n  endDay?: string | HTMLElement;\n  endMonth?: string | HTMLElement;\n  isThemeDark?: boolean;\n  isLargeSize?: boolean;\n}) => {\n  const {\n    startMonth,\n    startDay,\n    endDay,\n    endMonth,\n    isThemeDark,\n    isLargeSize = false,\n  } = props;\n  const isTheSameMonth = endMonth === startMonth;\n  const isTheSameDay = endDay === startDay;\n  const isMultiDay = !isTheSameMonth || !isTheSameDay;\n  let children: ElementVisual[] = [];\n\n  children.push(\n    makeStartDateBlock({\n      startMonth,\n      startDay,\n      isLargeSize,\n      isMultiDay,\n      isThemeDark,\n    }),\n  );\n\n  if (isMultiDay && endDay && endMonth) {\n    const srOnly = ElementModel.createSpan({\n      className: 'sr-only',\n    });\n    const dash = ElementModel.createSpan({\n      className: 'dash',\n      elementStyles: {\n        element: {\n          width: '10px',\n          height: '3px',\n          margin: '13px 5px 0',\n          display: 'block',\n          backgroundColor: isThemeDark ? 'white' : 'black',\n        },\n      },\n    });\n\n    srOnly.element.innerHTML = 'to';\n\n    children.push(\n      srOnly,\n      dash,\n      makeEndDateBlock({\n        endDay,\n        endMonth,\n        isThemeDark,\n      }),\n    );\n  }\n\n  return ElementModel.event.signContainer({\n    element: document.createElement('div'),\n    children,\n  });\n};\n"],"names":["ElementModel.headline.sansExtraLarge","ElementModel.headline.sansLarger","ElementModel.headline.sansSmall","ElementModel.headline.sansMin","ElementModel.createParagraph","ElementModel.createSpan","ElementModel.event.signContainer"],"mappings":"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"}

package/dist/atomic/layout/block/stacked.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stacked.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/block/stacked.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAMlD,UAAU,QAAQ;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,KAAK,GAAI,qDAKnB,QAAQ,GAAG;IACZ,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACpC;;;;CAuDG,CAAC;AAEL,eAAO,MAAM,aAAa,GAAI,oEAM3B,QAAQ,GAAG;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,UAAU,EAAE,CAAC;CACxB;;;;CAoCG,CAAC;AAEL,eAAO,MAAM,SAAS,GAAI,oEAMvB,QAAQ,GAAG;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,UAAU,EAAE,CAAC;CACxB;;;;CAwCG,CAAC"}
+{"version":3,"file":"stacked.d.ts","sourceRoot":"","sources":["../../../../source/atomic/layout/block/stacked.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAMlD,UAAU,QAAQ;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,KAAK,GAAI,qDAKnB,QAAQ,GAAG;IACZ,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACpC;;;;CA+CG,CAAC;AAEL,eAAO,MAAM,aAAa,GAAI,oEAM3B,QAAQ,GAAG;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,UAAU,EAAE,CAAC;CACxB;;;;CA4BG,CAAC;AAEL,eAAO,MAAM,SAAS,GAAI,oEAMvB,QAAQ,GAAG;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACnC,QAAQ,EAAE,UAAU,EAAE,CAAC;CACxB;;;;CAwCG,CAAC"}

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

@@ -1,10 +1,8 @@
 "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 token = require("@universityofmaryland/web-styles-library/token");
+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" } });
@@ -22,10 +20,10 @@ function _interopNamespaceDefault(e) {
   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 token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+const smallBreakpoint = token__namespace.media.breakpointValues.small.max;
+const mediumBreakpointStart = token__namespace.media.breakpointValues.medium.min;
+const mediumBreakpoint = token__namespace.media.breakpointValues.large.min;
 const image = ({
   customStyles = {},
   children,
@@ -40,12 +38,12 @@ const image = ({
       position: "relative",
       zIndex: 99,
       // Gif Overwrite
-      [`&:has(.${Styles__namespace.element.asset.gif.toggle.className})`]: {
+      [`&:has(.${elementStyles.asset.gif.toggle.className})`]: {
         aspectRatio: "4 / 3"
       },
-      ...media.createContainerQuery("max-width", smallBreakpoint, {
-        marginLeft: Styles__namespace.token.spacing.sm,
-        marginBottom: Styles__namespace.token.spacing.md,
+      ...styles.createMediaQuery("max-width", smallBreakpoint, {
+        marginLeft: token__namespace.spacing.sm,
+        marginBottom: token__namespace.spacing.md,
         width: "120px",
         float: "right",
         alignSelf: "flex-start",
@@ -54,25 +52,17 @@ const image = ({
           marginTop: 0
         }
       }),
-      ...media.createContainerQuery(
-        "min-width",
-        mediumBreakpointStart,
-        {
-          display: "block"
-        }
-      ),
-      ...media.createRangeContainerQuery(
-        mediumBreakpointStart,
-        mediumBreakpoint,
-        {
-          ...hasBorder && {
-            marginLeft: Styles__namespace.token.spacing.sm
-          }
+      ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
+        display: "block"
+      }),
+      ...styles.createMediaQueryRange(mediumBreakpointStart, mediumBreakpoint, {
+        ...hasBorder && {
+          marginLeft: token__namespace.spacing.sm
         }
-      ),
+      }),
       ...customStyles,
       "& img": {
-        ...media.createContainerQuery("max-width", smallBreakpoint, {
+        ...styles.createMediaQuery("max-width", smallBreakpoint, {
           height: "auto !important"
         })
       }
@@ -90,27 +80,19 @@ const textContainer = ({
   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
-          }
+      maxWidth: `${token__namespace.spacing.maxWidth.smallest}`,
+      ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
+        paddingTop: token__namespace.spacing.md
+      }),
+      ...styles.createMediaQuery("min-width", mediumBreakpointStart, {
+        paddingTop: token__namespace.spacing.lg,
+        ...hasBorder && {
+          padding: token__namespace.spacing.md
+        },
+        ...isThemeDark && !isTransparent && {
+          padding: token__namespace.spacing.md
         }
-      ),
+      }),
       ...customStyles
     }
   }
@@ -129,23 +111,23 @@ const container = ({
       containerType: "inline-size",
       height: "100%",
       ...isThemeDark && {
-        backgroundColor: Styles__namespace.token.color.gray.darker
+        backgroundColor: token__namespace.color.gray.darker
       },
       ...isTransparent && {
         backgroundColor: "transparent"
       },
       ...hasBorder && {
-        border: `1px solid ${Styles__namespace.token.color.gray.light}`
+        border: `1px solid ${token__namespace.color.gray.light}`
       },
       ...hasBorder && isThemeDark && {
-        border: `1px solid ${Styles__namespace.token.color.gray.darker}`
+        border: `1px solid ${token__namespace.color.gray.darker}`
       },
-      ...media.createContainerQuery("max-width", smallBreakpoint, {
+      ...styles.createMediaQuery("max-width", smallBreakpoint, {
         ...isThemeDark && !isTransparent && {
-          padding: Styles__namespace.token.spacing.md
+          padding: token__namespace.spacing.md
         },
         ...hasBorder && {
-          padding: Styles__namespace.token.spacing.md
+          padding: token__namespace.spacing.md
         }
       }),
       ...customStyles

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 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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"}
+{"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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"}

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

@@ -1,12 +1,10 @@
-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 * as token from "@universityofmaryland/web-styles-library/token";
+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 = Styles.token.media.breakpointValues.small.max;
-const mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;
-const mediumBreakpoint = Styles.token.media.breakpointValues.large.min;
+const smallBreakpoint = token.media.breakpointValues.small.max;
+const mediumBreakpointStart = token.media.breakpointValues.medium.min;
+const mediumBreakpoint = token.media.breakpointValues.large.min;
 const image = ({
   customStyles = {},
   children,
@@ -21,12 +19,12 @@ const image = ({
       position: "relative",
       zIndex: 99,
       // Gif Overwrite
-      [`&:has(.${Styles.element.asset.gif.toggle.className})`]: {
+      [`&:has(.${asset.gif.toggle.className})`]: {
         aspectRatio: "4 / 3"
       },
-      ...createContainerQuery("max-width", smallBreakpoint, {
-        marginLeft: Styles.token.spacing.sm,
-        marginBottom: Styles.token.spacing.md,
+      ...createMediaQuery("max-width", smallBreakpoint, {
+        marginLeft: token.spacing.sm,
+        marginBottom: token.spacing.md,
         width: "120px",
         float: "right",
         alignSelf: "flex-start",
@@ -35,25 +33,17 @@ const image = ({
           marginTop: 0
         }
       }),
-      ...createContainerQuery(
-        "min-width",
-        mediumBreakpointStart,
-        {
-          display: "block"
-        }
-      ),
-      ...createRangeContainerQuery(
-        mediumBreakpointStart,
-        mediumBreakpoint,
-        {
-          ...hasBorder && {
-            marginLeft: Styles.token.spacing.sm
-          }
+      ...createMediaQuery("min-width", mediumBreakpointStart, {
+        display: "block"
+      }),
+      ...createMediaQueryRange(mediumBreakpointStart, mediumBreakpoint, {
+        ...hasBorder && {
+          marginLeft: token.spacing.sm
         }
-      ),
+      }),
       ...customStyles,
       "& img": {
-        ...createContainerQuery("max-width", smallBreakpoint, {
+        ...createMediaQuery("max-width", smallBreakpoint, {
           height: "auto !important"
         })
       }
@@ -71,27 +61,19 @@ const textContainer = ({
   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
-          }
+      maxWidth: `${token.spacing.maxWidth.smallest}`,
+      ...createMediaQuery("min-width", mediumBreakpointStart, {
+        paddingTop: token.spacing.md
+      }),
+      ...createMediaQuery("min-width", mediumBreakpointStart, {
+        paddingTop: token.spacing.lg,
+        ...hasBorder && {
+          padding: token.spacing.md
+        },
+        ...isThemeDark && !isTransparent && {
+          padding: token.spacing.md
         }
-      ),
+      }),
       ...customStyles
     }
   }
@@ -110,23 +92,23 @@ const container = ({
       containerType: "inline-size",
       height: "100%",
       ...isThemeDark && {
-        backgroundColor: Styles.token.color.gray.darker
+        backgroundColor: token.color.gray.darker
       },
       ...isTransparent && {
         backgroundColor: "transparent"
       },
       ...hasBorder && {
-        border: `1px solid ${Styles.token.color.gray.light}`
+        border: `1px solid ${token.color.gray.light}`
       },
       ...hasBorder && isThemeDark && {
-        border: `1px solid ${Styles.token.color.gray.darker}`
+        border: `1px solid ${token.color.gray.darker}`
       },
-      ...createContainerQuery("max-width", smallBreakpoint, {
+      ...createMediaQuery("max-width", smallBreakpoint, {
         ...isThemeDark && !isTransparent && {
-          padding: Styles.token.spacing.md
+          padding: token.spacing.md
         },
         ...hasBorder && {
-          padding: Styles.token.spacing.md
+          padding: token.spacing.md
         }
       }),
       ...customStyles

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 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":";;;;;;AAKA,MAAM,kBAAkB,OAAO,MAAM,MAAM,iBAAiB,MAAM;AAClE,MAAM,wBAAwB,OAAO,MAAM,MAAM,iBAAiB,OAAO;AACzE,MAAM,mBAAmB,OAAO,MAAM,MAAM,iBAAiB,MAAM;AAQ5D,MAAM,QAAQ,CAAC;AAAA,EACpB,eAAe,CAAA;AAAA,EACf;AAAA,EACA,YAAY;AAAA,EACZ,cAAc;AAChB,MAIEA,UAAuB;AAAA,EACrB,WAAW;AAAA,EACX;AAAA,EACA,eAAe;AAAA,IACb,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,QAAQ;AAAA;AAAA,MAGR,CAAC,UAAU,OAAO,QAAQ,MAAM,IAAI,OAAO,SAAS,GAAG,GAAG;AAAA,QACxD,aAAa;AAAA,MAAA;AAAA,MAGf,GAAGC,qBAAiC,aAAa,iBAAiB;AAAA,QAChE,YAAY,OAAO,MAAM,QAAQ;AAAA,QACjC,cAAc,OAAO,MAAM,QAAQ;AAAA,QACnC,OAAO;AAAA,QACP,OAAO;AAAA,QACP,WAAW;AAAA,QAEX,GAAI,eAAe;AAAA,UACjB,aAAa;AAAA,UACb,WAAW;AAAA,QAAA;AAAA,MACb,CACD;AAAA,MAED,GAAGA;AAAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,UACE,SAAS;AAAA,QAAA;AAAA,MACX;AAAA,MAGF,GAAGC;AAAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,UACE,GAAI,aAAa;AAAA,YACf,YAAY,OAAO,MAAM,QAAQ;AAAA,UAAA;AAAA,QACnC;AAAA,MACF;AAAA,MAGF,GAAG;AAAA,MAEH,SAAS;AAAA,QACP,GAAGD,qBAAiC,aAAa,iBAAiB;AAAA,UAChE,QAAQ;AAAA,QAAA,CACT;AAAA,MAAA;AAAA,IACH;AAAA,EACF;AAEJ,CAAC;AAEI,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,eAAe,CAAA;AAAA,EACf,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,gBAAgB;AAClB,MAIED,UAAuB;AAAA,EACrB,WAAW;AAAA,EACX;AAAA,EACA,eAAe;AAAA,IACb,SAAS;AAAA,MACP,UAAU,GAAG,OAAO,MAAM,QAAQ,SAAS,QAAQ;AAAA,MAEnD,GAAGC;AAAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,UACE,YAAY,OAAO,MAAM,QAAQ;AAAA,QAAA;AAAA,MACnC;AAAA,MAGF,GAAGA;AAAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,UACE,YAAY,OAAO,MAAM,QAAQ;AAAA,UAEjC,GAAI,aAAa;AAAA,YACf,SAAS,OAAO,MAAM,QAAQ;AAAA,UAAA;AAAA,UAGhC,GAAI,eACF,CAAC,iBAAiB;AAAA,YAChB,SAAS,OAAO,MAAM,QAAQ;AAAA,UAAA;AAAA,QAChC;AAAA,MACJ;AAAA,MAGF,GAAG;AAAA,IAAA;AAAA,EACL;AAEJ,CAAC;AAEI,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA,eAAe,CAAA;AAAA,EACf,YAAY;AAAA,EACZ,cAAc;AAAA,EACd,gBAAgB;AAClB,MAIED,UAAuB;AAAA,EACrB,WAAW;AAAA,EACX;AAAA,EACA,eAAe;AAAA,IACb,SAAS;AAAA,MACP,eAAe;AAAA,MACf,QAAQ;AAAA,MAER,GAAI,eAAe;AAAA,QACjB,iBAAiB,OAAO,MAAM,MAAM,KAAK;AAAA,MAAA;AAAA,MAG3C,GAAI,iBAAiB;AAAA,QACnB,iBAAiB;AAAA,MAAA;AAAA,MAGnB,GAAI,aAAa;AAAA,QACf,QAAQ,aAAa,OAAO,MAAM,MAAM,KAAK,KAAK;AAAA,MAAA;AAAA,MAGpD,GAAI,aACF,eAAe;AAAA,QACb,QAAQ,aAAa,OAAO,MAAM,MAAM,KAAK,MAAM;AAAA,MAAA;AAAA,MAGvD,GAAGC,qBAAiC,aAAa,iBAAiB;AAAA,QAChE,GAAI,eACF,CAAC,iBAAiB;AAAA,UAChB,SAAS,OAAO,MAAM,QAAQ;AAAA,QAAA;AAAA,QAGlC,GAAI,aAAa;AAAA,UACf,SAAS,OAAO,MAAM,QAAQ;AAAA,QAAA;AAAA,MAChC,CACD;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EACL;AAEJ,CAAC;"}
+{"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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"}

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;AAEF,eAAO,MAAM,WAAW,GAAI,2CAKzB,wBAAwB;;;;;;;CAiE1B,CAAC"}
+{"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;;;;;;;CAgE1B,CAAC"}

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

@@ -1,10 +1,24 @@
 "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 token = require("@universityofmaryland/web-styles-library/token");
+const accessibility = require("@universityofmaryland/web-utilities-library/accessibility");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
 const ELEMENT_CONTAINER = "modal-screen-container";
 const ELEMENT_CONTAINER_BACKGROUND = "modal-screen-container-background";
 const STYLES_MODAL = `
@@ -20,12 +34,12 @@ const STYLES_MODAL = `
 
   .${ELEMENT_CONTAINER_BACKGROUND} {
     background-color: rgba(0, 0, 0, 0.9);
-    padding: ${Styles.token.spacing.xl} ${Styles.token.spacing.md};
+    padding: ${token__namespace.spacing.xl} ${token__namespace.spacing.md};
     width: 100%;
     height: 100%;
   }
 
-  @media (${Styles.token.media.queries.tablet.min}) {
+  @media (${token__namespace.media.queries.tablet.min}) {
     .${ELEMENT_CONTAINER_BACKGROUND} {
       padding: 10vh 10vw;
     }
@@ -53,7 +67,7 @@ const createModal = ({
       const target = event.target;
       if (target === container) hide();
     });
-    accessibiltyEventReference = index.eventAccessibilityFocusTrap({
+    accessibiltyEventReference = accessibility.trapFocus({
       element: container,
       action: hide,
       shadowDomContext: context || null

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

@@ -1 +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;;;"}
+{"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;;;"}

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

@@ -1,8 +1,5 @@
-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";
+import * as token from "@universityofmaryland/web-styles-library/token";
+import { trapFocus } from "@universityofmaryland/web-utilities-library/accessibility";
 const ELEMENT_CONTAINER = "modal-screen-container";
 const ELEMENT_CONTAINER_BACKGROUND = "modal-screen-container-background";
 const STYLES_MODAL = `
@@ -51,7 +48,7 @@ const createModal = ({
       const target = event.target;
       if (target === container) hide();
     });
-    accessibiltyEventReference = eventAccessibilityFocusTrap({
+    accessibiltyEventReference = trapFocus({
       element: container,
       action: hide,
       shadowDomContext: context || null