@universityofmaryland/web-elements-library 1.3.6 → 1.4.0

package/dist/composite/card/list.mjs

@@ -0,0 +1,146 @@
+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 } from "../../utilities/theme/media.mjs";
+import { createDiv } from "../../model/elements/index.mjs";
+import "../../atomic/animations/actions/indicator.mjs";
+import "../../atomic/animations/brand/chevron-scroll.mjs";
+import imageContainer from "../../atomic/assets/image/background.mjs";
+import "../../atomic/layout/block/stacked.mjs";
+import "../../atomic/layout/overlay/modal.mjs";
+import "../../atomic/layout/person/columns.mjs";
+import "../../atomic/text-lockup/date.mjs";
+import { createTextLockupSmall } from "../../atomic/text-lockup/small.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 makeDateColumn = (dateSign) => createDiv({
+  className: "card-list-date-sign-wrapper",
+  elementStyles: {
+    element: {
+      width: `${Styles.token.spacing.xl}`,
+      order: 1,
+      alignSelf: "flex-start",
+      ...createContainerQuery("max-width", mediumBreakpoint, {
+        display: "none"
+      }),
+      ...createContainerQuery("min-width", mediumBreakpoint, {
+        width: `${Styles.token.spacing["8xl"]}`
+      })
+    }
+  },
+  children: [dateSign]
+});
+const makeTextColumn = (props) => createDiv({
+  className: "card-list-text-wrapper",
+  elementStyles: {
+    element: {
+      flex: "1 0",
+      ...createContainerQuery(
+        "min-width",
+        mediumBreakpointStart,
+        {
+          paddingRight: `${Styles.token.spacing.md}`,
+          order: "2"
+        }
+      ),
+      ...createContainerQuery("min-width", mediumBreakpoint, {
+        width: "208px"
+      })
+    }
+  },
+  children: [createTextLockupSmall(props)]
+});
+const makeImageColumn = ({
+  image,
+  isAligned
+}) => createDiv({
+  className: "card-list-image-wrapper",
+  elementStyles: {
+    element: {
+      ...createContainerQuery("max-width", smallBreakpoint, {
+        marginLeft: Styles.token.spacing.min,
+        marginBottom: Styles.token.spacing.md,
+        width: "120px",
+        float: "right",
+        ...isAligned && {
+          height: "104px"
+        }
+      }),
+      ...createContainerQuery(
+        "min-width",
+        mediumBreakpointStart,
+        {
+          display: "block",
+          width: "160px",
+          order: "3",
+          ...isAligned && {
+            height: "160px"
+          }
+        }
+      ),
+      ...createContainerQuery("min-width", mediumBreakpoint, {
+        width: "208px"
+      }),
+      "& img": {
+        ...createContainerQuery("max-width", smallBreakpoint, {
+          height: "auto !important"
+        })
+      }
+    }
+  },
+  children: [
+    imageContainer({
+      element: image,
+      isScaled: isAligned,
+      isGifAllowed: false
+    })
+  ]
+});
+const list = (props) => {
+  const { image, isAligned, isThemeDark, dateSign } = props;
+  let children = [];
+  if (image) {
+    children.push(makeImageColumn({ image, isAligned }));
+  }
+  if (dateSign) {
+    children.push(makeDateColumn(dateSign));
+  }
+  children.push(makeTextColumn(props));
+  const wrapper = createDiv({
+    className: "card-list-wrapper",
+    elementStyles: {
+      element: {
+        containerType: "inline-size",
+        ...createContainerQuery(
+          "min-width",
+          mediumBreakpointStart,
+          {
+            display: "flex",
+            justifyContent: "space-between"
+          }
+        )
+      }
+    },
+    children
+  });
+  return createDiv({
+    className: "card-list-container",
+    elementStyles: {
+      element: {
+        height: "100%",
+        overflow: "hidden",
+        ...isThemeDark && {
+          backgroundColor: Styles.token.color.black,
+          color: Styles.token.color.white
+        }
+      }
+    },
+    children: [wrapper]
+  });
+};
+export {
+  list as default
+};
+//# sourceMappingURL=list.mjs.map

package/dist/composite/card/list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.mjs","sources":["../../../source/composite/card/list.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { textLockup, assets } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport { CardListProps } from './_types';\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\nconst makeDateColumn = (dateSign: UMDElement) =>\n  ElementModel.createDiv({\n    className: 'card-list-date-sign-wrapper',\n    elementStyles: {\n      element: {\n        width: `${Styles.token.spacing.xl}`,\n        order: 1,\n        alignSelf: 'flex-start',\n\n        ...theme.media.createContainerQuery('max-width', mediumBreakpoint, {\n          display: 'none',\n        }),\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: `${Styles.token.spacing['8xl']}`,\n        }),\n      },\n    },\n    children: [dateSign],\n  });\n\nconst makeTextColumn = (props: CardListProps) =>\n  ElementModel.createDiv({\n    className: 'card-list-text-wrapper',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            paddingRight: `${Styles.token.spacing.md}`,\n            order: '2',\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n      },\n    },\n    children: [textLockup.small(props)],\n  });\n\nconst makeImageColumn = ({\n  image,\n  isAligned,\n}: {\n  image: NonNullable<CardListProps['image']>;\n  isAligned?: CardListProps['isAligned'];\n}) =>\n  ElementModel.createDiv({\n    className: 'card-list-image-wrapper',\n    elementStyles: {\n      element: {\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          marginLeft: Styles.token.spacing.min,\n          marginBottom: Styles.token.spacing.md,\n          width: '120px',\n          float: 'right',\n\n          ...(isAligned && {\n            height: '104px',\n          }),\n        }),\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'block',\n            width: '160px',\n            order: '3',\n\n            ...(isAligned && {\n              height: '160px',\n            }),\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '208px',\n        }),\n\n        '& img': {\n          ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: isAligned,\n        isGifAllowed: false,\n      }),\n    ],\n  });\n\nexport default (props: CardListProps) => {\n  const { image, isAligned, isThemeDark, dateSign } = props;\n  let children: UMDElement[] = [];\n\n  if (image) {\n    children.push(makeImageColumn({ image, isAligned }));\n  }\n\n  if (dateSign) {\n    children.push(makeDateColumn(dateSign));\n  }\n\n  children.push(makeTextColumn(props));\n\n  const wrapper = ElementModel.createDiv({\n    className: 'card-list-wrapper',\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'flex',\n            justifyContent: 'space-between',\n          },\n        ),\n      },\n    },\n    children,\n  });\n\n  return ElementModel.createDiv({\n    className: 'card-list-container',\n    elementStyles: {\n      element: {\n        height: '100%',\n        overflow: 'hidden',\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.black,\n          color: Styles.token.color.white,\n        }),\n      },\n    },\n    children: [wrapper],\n  });\n};\n"],"names":["ElementModel.createDiv","theme.media.createContainerQuery","textLockup.small","assets.image.background"],"mappings":"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"}

package/dist/composite/card/overlay/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/overlay/color.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;gCAetB,gBAAgB;;;;;AAAvC,wBA8CE"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/overlay/color.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;yBAG7B,OAAO,gBAAgB;;;;;AAAvC,wBA8DE"}

package/dist/composite/card/overlay/color.js

@@ -0,0 +1,90 @@
+"use strict";
+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 index = require("../../../model/elements/index.js");
+const icon = require("../../../atomic/actions/icon.js");
+require("../../../atomic/animations/actions/indicator.js");
+require("../../../atomic/animations/brand/chevron-scroll.js");
+require("../../../atomic/layout/block/stacked.js");
+require("../../../atomic/layout/overlay/modal.js");
+require("../../../atomic/layout/person/columns.js");
+require("../../../atomic/text-lockup/date.js");
+require("../../../atomic/text-lockup/small.js");
+const smallScaling = require("../../../atomic/text-lockup/small-scaling.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 color = (props) => {
+  const { isThemeDark, ctaIcon } = props;
+  const children = [];
+  if (ctaIcon && ctaIcon instanceof HTMLElement) {
+    children.push(
+      icon({
+        ...props,
+        ctaIcon,
+        isThemeLight: !isThemeDark
+      })
+    );
+  }
+  children.push(
+    index.createDiv({
+      className: "card-overlay-color-wrapper",
+      elementStyles: {
+        element: {
+          paddingRight: `${ctaIcon ? Styles__namespace.token.spacing["2xl"] : 0}`,
+          height: "100%",
+          [`& > *`]: {
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            zIndex: 9,
+            position: "relative",
+            maxWidth: `${Styles__namespace.token.spacing.maxWidth.smallest}`
+          }
+        }
+      },
+      children: [smallScaling(props)]
+    })
+  );
+  return index.createDiv({
+    className: "card-overlay-color",
+    children,
+    elementStyles: {
+      element: {
+        containerType: "inline-size",
+        padding: `${Styles__namespace.token.spacing.lg} ${Styles__namespace.token.spacing.md}`,
+        minHeight: "360px",
+        height: "100%",
+        overflow: "hidden",
+        position: "relative",
+        backgroundColor: Styles__namespace.token.color.gray.lightest,
+        ...isThemeDark && {
+          backgroundColor: Styles__namespace.token.color.gray.darker
+        },
+        [`& .${Styles__namespace.layout.grid.inline.tabletRows.className}`]: {
+          [`@media (${Styles__namespace.token.media.queries.tablet.min})`]: {
+            marginTop: "auto !important"
+          }
+        }
+      }
+    }
+  });
+};
+module.exports = color;
+//# sourceMappingURL=color.js.map

package/dist/composite/card/overlay/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","sources":["../../../../source/composite/card/overlay/color.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { actions, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { CardOverlayProps } from '../_types';\nimport { ElementVisual } from '../../../_types';\n\nexport default (props: CardOverlayProps) => {\n  const { isThemeDark, ctaIcon } = props;\n\n  const children: ElementVisual[] = [];\n\n  if (ctaIcon && ctaIcon instanceof HTMLElement) {\n    children.push(\n      actions.icon({\n        ...props,\n        ctaIcon,\n        isThemeLight: !isThemeDark,\n      }),\n    );\n  }\n\n  children.push(\n    ElementModel.createDiv({\n      className: 'card-overlay-color-wrapper',\n      elementStyles: {\n        element: {\n          paddingRight: `${ctaIcon ? Styles.token.spacing['2xl'] : 0}`,\n          height: '100%',\n\n          [`& > *`]: {\n            height: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            zIndex: 9,\n            position: 'relative',\n            maxWidth: `${Styles.token.spacing.maxWidth.smallest}`,\n          },\n        },\n      },\n      children: [textLockup.smallScaling(props)],\n    }),\n  );\n\n  return ElementModel.createDiv({\n    className: 'card-overlay-color',\n    children,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        padding: `${Styles.token.spacing.lg} ${Styles.token.spacing.md}`,\n        minHeight: '360px',\n        height: '100%',\n        overflow: 'hidden',\n        position: 'relative',\n        backgroundColor: Styles.token.color.gray.lightest,\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.gray.darker,\n        }),\n\n        [`& .${Styles.layout.grid.inline.tabletRows.className}`]: {\n          [`@media (${Styles.token.media.queries.tablet.min})`]: {\n            marginTop: 'auto !important',\n          },\n        },\n      },\n    },\n  });\n};\n"],"names":["actions.icon","ElementModel.createDiv","Styles","textLockup.smallScaling"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,MAAA,QAAe,CAAC,UAA4B;AAC1C,QAAM,EAAE,aAAa,QAAA,IAAY;AAEjC,QAAM,WAA4B,CAAA;AAElC,MAAI,WAAW,mBAAmB,aAAa;AAC7C,aAAS;AAAA,MACPA,KAAa;AAAA,QACX,GAAG;AAAA,QACH;AAAA,QACA,cAAc,CAAC;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPC,gBAAuB;AAAA,MACrB,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,cAAc,GAAG,UAAUC,kBAAO,MAAM,QAAQ,KAAK,IAAI,CAAC;AAAA,UAC1D,QAAQ;AAAA,UAER,CAAC,OAAO,GAAG;AAAA,YACT,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,eAAe;AAAA,YACf,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,UAAU,GAAGA,kBAAO,MAAM,QAAQ,SAAS,QAAQ;AAAA,UAAA;AAAA,QACrD;AAAA,MACF;AAAA,MAEF,UAAU,CAACC,aAAwB,KAAK,CAAC;AAAA,IAAA,CAC1C;AAAA,EAAA;AAGH,SAAOF,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,SAAS,GAAGC,kBAAO,MAAM,QAAQ,EAAE,IAAIA,kBAAO,MAAM,QAAQ,EAAE;AAAA,QAC9D,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,iBAAiBA,kBAAO,MAAM,MAAM,KAAK;AAAA,QAEzC,GAAI,eAAe;AAAA,UACjB,iBAAiBA,kBAAO,MAAM,MAAM,KAAK;AAAA,QAAA;AAAA,QAG3C,CAAC,MAAMA,kBAAO,OAAO,KAAK,OAAO,WAAW,SAAS,EAAE,GAAG;AAAA,UACxD,CAAC,WAAWA,kBAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,YACrD,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;;"}

package/dist/composite/card/overlay/color.mjs

@@ -0,0 +1,74 @@
+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 { createDiv } from "../../../model/elements/index.mjs";
+import icon from "../../../atomic/actions/icon.mjs";
+import "../../../atomic/animations/actions/indicator.mjs";
+import "../../../atomic/animations/brand/chevron-scroll.mjs";
+import "../../../atomic/layout/block/stacked.mjs";
+import "../../../atomic/layout/overlay/modal.mjs";
+import "../../../atomic/layout/person/columns.mjs";
+import "../../../atomic/text-lockup/date.mjs";
+import "../../../atomic/text-lockup/small.mjs";
+import smallScaling from "../../../atomic/text-lockup/small-scaling.mjs";
+const color = (props) => {
+  const { isThemeDark, ctaIcon } = props;
+  const children = [];
+  if (ctaIcon && ctaIcon instanceof HTMLElement) {
+    children.push(
+      icon({
+        ...props,
+        ctaIcon,
+        isThemeLight: !isThemeDark
+      })
+    );
+  }
+  children.push(
+    createDiv({
+      className: "card-overlay-color-wrapper",
+      elementStyles: {
+        element: {
+          paddingRight: `${ctaIcon ? Styles.token.spacing["2xl"] : 0}`,
+          height: "100%",
+          [`& > *`]: {
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            zIndex: 9,
+            position: "relative",
+            maxWidth: `${Styles.token.spacing.maxWidth.smallest}`
+          }
+        }
+      },
+      children: [smallScaling(props)]
+    })
+  );
+  return createDiv({
+    className: "card-overlay-color",
+    children,
+    elementStyles: {
+      element: {
+        containerType: "inline-size",
+        padding: `${Styles.token.spacing.lg} ${Styles.token.spacing.md}`,
+        minHeight: "360px",
+        height: "100%",
+        overflow: "hidden",
+        position: "relative",
+        backgroundColor: Styles.token.color.gray.lightest,
+        ...isThemeDark && {
+          backgroundColor: Styles.token.color.gray.darker
+        },
+        [`& .${Styles.layout.grid.inline.tabletRows.className}`]: {
+          [`@media (${Styles.token.media.queries.tablet.min})`]: {
+            marginTop: "auto !important"
+          }
+        }
+      }
+    }
+  });
+};
+export {
+  color as default
+};
+//# sourceMappingURL=color.mjs.map

package/dist/composite/card/overlay/color.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.mjs","sources":["../../../../source/composite/card/overlay/color.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { actions, textLockup } from 'atomic';\nimport { ElementModel } from 'model';\nimport { CardOverlayProps } from '../_types';\nimport { ElementVisual } from '../../../_types';\n\nexport default (props: CardOverlayProps) => {\n  const { isThemeDark, ctaIcon } = props;\n\n  const children: ElementVisual[] = [];\n\n  if (ctaIcon && ctaIcon instanceof HTMLElement) {\n    children.push(\n      actions.icon({\n        ...props,\n        ctaIcon,\n        isThemeLight: !isThemeDark,\n      }),\n    );\n  }\n\n  children.push(\n    ElementModel.createDiv({\n      className: 'card-overlay-color-wrapper',\n      elementStyles: {\n        element: {\n          paddingRight: `${ctaIcon ? Styles.token.spacing['2xl'] : 0}`,\n          height: '100%',\n\n          [`& > *`]: {\n            height: '100%',\n            display: 'flex',\n            flexDirection: 'column',\n            zIndex: 9,\n            position: 'relative',\n            maxWidth: `${Styles.token.spacing.maxWidth.smallest}`,\n          },\n        },\n      },\n      children: [textLockup.smallScaling(props)],\n    }),\n  );\n\n  return ElementModel.createDiv({\n    className: 'card-overlay-color',\n    children,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        padding: `${Styles.token.spacing.lg} ${Styles.token.spacing.md}`,\n        minHeight: '360px',\n        height: '100%',\n        overflow: 'hidden',\n        position: 'relative',\n        backgroundColor: Styles.token.color.gray.lightest,\n\n        ...(isThemeDark && {\n          backgroundColor: Styles.token.color.gray.darker,\n        }),\n\n        [`& .${Styles.layout.grid.inline.tabletRows.className}`]: {\n          [`@media (${Styles.token.media.queries.tablet.min})`]: {\n            marginTop: 'auto !important',\n          },\n        },\n      },\n    },\n  });\n};\n"],"names":["actions.icon","ElementModel.createDiv","textLockup.smallScaling"],"mappings":";;;;;;;;;;;;;;AAMA,MAAA,QAAe,CAAC,UAA4B;AAC1C,QAAM,EAAE,aAAa,QAAA,IAAY;AAEjC,QAAM,WAA4B,CAAA;AAElC,MAAI,WAAW,mBAAmB,aAAa;AAC7C,aAAS;AAAA,MACPA,KAAa;AAAA,QACX,GAAG;AAAA,QACH;AAAA,QACA,cAAc,CAAC;AAAA,MAAA,CAChB;AAAA,IAAA;AAAA,EAEL;AAEA,WAAS;AAAA,IACPC,UAAuB;AAAA,MACrB,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,cAAc,GAAG,UAAU,OAAO,MAAM,QAAQ,KAAK,IAAI,CAAC;AAAA,UAC1D,QAAQ;AAAA,UAER,CAAC,OAAO,GAAG;AAAA,YACT,QAAQ;AAAA,YACR,SAAS;AAAA,YACT,eAAe;AAAA,YACf,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,UAAU,GAAG,OAAO,MAAM,QAAQ,SAAS,QAAQ;AAAA,UAAA;AAAA,QACrD;AAAA,MACF;AAAA,MAEF,UAAU,CAACC,aAAwB,KAAK,CAAC;AAAA,IAAA,CAC1C;AAAA,EAAA;AAGH,SAAOD,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,SAAS,GAAG,OAAO,MAAM,QAAQ,EAAE,IAAI,OAAO,MAAM,QAAQ,EAAE;AAAA,QAC9D,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,iBAAiB,OAAO,MAAM,MAAM,KAAK;AAAA,QAEzC,GAAI,eAAe;AAAA,UACjB,iBAAiB,OAAO,MAAM,MAAM,KAAK;AAAA,QAAA;AAAA,QAG3C,CAAC,MAAM,OAAO,OAAO,KAAK,OAAO,WAAW,SAAS,EAAE,GAAG;AAAA,UACxD,CAAC,WAAW,OAAO,MAAM,MAAM,QAAQ,OAAO,GAAG,GAAG,GAAG;AAAA,YACrD,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AACH;"}

package/dist/composite/card/overlay/icon.d.ts

@@ -1,10 +1,10 @@
-type TypeBlockCardIconProps = {
+interface CardIconProps {
     headline: HTMLElement | null;
     text?: HTMLElement | null;
     image?: HTMLImageElement | null;
     isThemeDark?: boolean;
-};
-declare const _default: (props: TypeBlockCardIconProps) => {
+}
+declare const _default: (props: CardIconProps) => {
     element: HTMLElement;
     className: string;
     styles: string;

package/dist/composite/card/overlay/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/overlay/icon.ts"],"names":[],"mappings":"AAGA,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;gCASqB,sBAAsB;;;;;AAA7C,wBAuBE"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/overlay/icon.ts"],"names":[],"mappings":"AAKA,UAAU,aAAa;IACrB,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;yBAEe,OAAO,aAAa;;;;;AAApC,wBAkDE"}

package/dist/composite/card/overlay/icon.js

@@ -0,0 +1,79 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const index = require("../../../model/elements/index.js");
+require("../../../node_modules/postcss/lib/postcss.js");
+require("../../../node_modules/postcss-nesting/dist/index.js");
+require("../../../node_modules/postcss-js/index.js");
+require("../../../atomic/animations/actions/indicator.js");
+require("../../../atomic/animations/brand/chevron-scroll.js");
+require("../../../atomic/layout/block/stacked.js");
+require("../../../atomic/layout/overlay/modal.js");
+require("../../../atomic/layout/person/columns.js");
+require("../../../atomic/text-lockup/date.js");
+require("../../../atomic/text-lockup/small.js");
+const smallScaling = require("../../../atomic/text-lockup/small-scaling.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 icon = (props) => {
+  const children = [];
+  if (props.image) {
+    const imageContainer = index.createDiv({
+      className: "card-overlay-icon-image",
+      elementStyles: {
+        element: {
+          display: "flex",
+          justifyContent: "flex-end",
+          marginBottom: `${Styles__namespace.token.spacing.lg}`,
+          "& *": {
+            maxHeight: "120px"
+          }
+        }
+      }
+    });
+    imageContainer.element.appendChild(props.image);
+    children.push(imageContainer);
+  }
+  children.push(
+    smallScaling({
+      ...props,
+      customStyles: {
+        height: "auto"
+      }
+    })
+  );
+  return index.createDiv({
+    className: "card-overlay-icon",
+    children,
+    elementStyles: {
+      element: {
+        containerType: "inline-size",
+        height: "100%",
+        overflow: "hidden",
+        position: "relative",
+        padding: `${Styles__namespace.token.spacing.md}`,
+        paddingTop: `${Styles__namespace.token.spacing.sm}`,
+        backgroundColor: Styles__namespace.token.color.gray.lightest,
+        ...props.isThemeDark && {
+          backgroundColor: Styles__namespace.token.color.gray.darker
+        }
+      }
+    }
+  });
+};
+module.exports = icon;
+//# sourceMappingURL=icon.js.map

package/dist/composite/card/overlay/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sources":["../../../../source/composite/card/overlay/icon.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { textLockup } from 'atomic';\nimport { ElementVisual } from '../../../_types';\n\ninterface CardIconProps {\n  headline: HTMLElement | null;\n  text?: HTMLElement | null;\n  image?: HTMLImageElement | null;\n  isThemeDark?: boolean;\n}\n\nexport default (props: CardIconProps) => {\n  const children: ElementVisual[] = [];\n\n  if (props.image) {\n    const imageContainer = ElementModel.createDiv({\n      className: 'card-overlay-icon-image',\n      elementStyles: {\n        element: {\n          display: 'flex',\n          justifyContent: 'flex-end',\n          marginBottom: `${Styles.token.spacing.lg}`,\n\n          '& *': {\n            maxHeight: '120px',\n          },\n        },\n      },\n    });\n    imageContainer.element.appendChild(props.image);\n    children.push(imageContainer);\n  }\n\n  children.push(\n    textLockup.smallScaling({\n      ...props,\n      customStyles: {\n        height: 'auto',\n      },\n    }),\n  );\n\n  return ElementModel.createDiv({\n    className: 'card-overlay-icon',\n    children,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        height: '100%',\n        overflow: 'hidden',\n        position: 'relative',\n        padding: `${Styles.token.spacing.md}`,\n        paddingTop: `${Styles.token.spacing.sm}`,\n        backgroundColor: Styles.token.color.gray.lightest,\n\n        ...(props.isThemeDark && {\n          backgroundColor: Styles.token.color.gray.darker,\n        }),\n      },\n    },\n  });\n};\n"],"names":["ElementModel.createDiv","Styles","textLockup.smallScaling"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAA,OAAe,CAAC,UAAyB;AACvC,QAAM,WAA4B,CAAA;AAElC,MAAI,MAAM,OAAO;AACf,UAAM,iBAAiBA,MAAAA,UAAuB;AAAA,MAC5C,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,cAAc,GAAGC,kBAAO,MAAM,QAAQ,EAAE;AAAA,UAExC,OAAO;AAAA,YACL,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF,CACD;AACD,mBAAe,QAAQ,YAAY,MAAM,KAAK;AAC9C,aAAS,KAAK,cAAc;AAAA,EAC9B;AAEA,WAAS;AAAA,IACPC,aAAwB;AAAA,MACtB,GAAG;AAAA,MACH,cAAc;AAAA,QACZ,QAAQ;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EAAA;AAGH,SAAOF,gBAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS,GAAGC,kBAAO,MAAM,QAAQ,EAAE;AAAA,QACnC,YAAY,GAAGA,kBAAO,MAAM,QAAQ,EAAE;AAAA,QACtC,iBAAiBA,kBAAO,MAAM,MAAM,KAAK;AAAA,QAEzC,GAAI,MAAM,eAAe;AAAA,UACvB,iBAAiBA,kBAAO,MAAM,MAAM,KAAK;AAAA,QAAA;AAAA,MAC3C;AAAA,IACF;AAAA,EACF,CACD;AACH;;"}

package/dist/composite/card/overlay/icon.mjs

@@ -0,0 +1,63 @@
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { createDiv } from "../../../model/elements/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 "../../../atomic/animations/actions/indicator.mjs";
+import "../../../atomic/animations/brand/chevron-scroll.mjs";
+import "../../../atomic/layout/block/stacked.mjs";
+import "../../../atomic/layout/overlay/modal.mjs";
+import "../../../atomic/layout/person/columns.mjs";
+import "../../../atomic/text-lockup/date.mjs";
+import "../../../atomic/text-lockup/small.mjs";
+import smallScaling from "../../../atomic/text-lockup/small-scaling.mjs";
+const icon = (props) => {
+  const children = [];
+  if (props.image) {
+    const imageContainer = createDiv({
+      className: "card-overlay-icon-image",
+      elementStyles: {
+        element: {
+          display: "flex",
+          justifyContent: "flex-end",
+          marginBottom: `${Styles.token.spacing.lg}`,
+          "& *": {
+            maxHeight: "120px"
+          }
+        }
+      }
+    });
+    imageContainer.element.appendChild(props.image);
+    children.push(imageContainer);
+  }
+  children.push(
+    smallScaling({
+      ...props,
+      customStyles: {
+        height: "auto"
+      }
+    })
+  );
+  return createDiv({
+    className: "card-overlay-icon",
+    children,
+    elementStyles: {
+      element: {
+        containerType: "inline-size",
+        height: "100%",
+        overflow: "hidden",
+        position: "relative",
+        padding: `${Styles.token.spacing.md}`,
+        paddingTop: `${Styles.token.spacing.sm}`,
+        backgroundColor: Styles.token.color.gray.lightest,
+        ...props.isThemeDark && {
+          backgroundColor: Styles.token.color.gray.darker
+        }
+      }
+    }
+  });
+};
+export {
+  icon as default
+};
+//# sourceMappingURL=icon.mjs.map

package/dist/composite/card/overlay/icon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.mjs","sources":["../../../../source/composite/card/overlay/icon.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { textLockup } from 'atomic';\nimport { ElementVisual } from '../../../_types';\n\ninterface CardIconProps {\n  headline: HTMLElement | null;\n  text?: HTMLElement | null;\n  image?: HTMLImageElement | null;\n  isThemeDark?: boolean;\n}\n\nexport default (props: CardIconProps) => {\n  const children: ElementVisual[] = [];\n\n  if (props.image) {\n    const imageContainer = ElementModel.createDiv({\n      className: 'card-overlay-icon-image',\n      elementStyles: {\n        element: {\n          display: 'flex',\n          justifyContent: 'flex-end',\n          marginBottom: `${Styles.token.spacing.lg}`,\n\n          '& *': {\n            maxHeight: '120px',\n          },\n        },\n      },\n    });\n    imageContainer.element.appendChild(props.image);\n    children.push(imageContainer);\n  }\n\n  children.push(\n    textLockup.smallScaling({\n      ...props,\n      customStyles: {\n        height: 'auto',\n      },\n    }),\n  );\n\n  return ElementModel.createDiv({\n    className: 'card-overlay-icon',\n    children,\n    elementStyles: {\n      element: {\n        containerType: 'inline-size',\n        height: '100%',\n        overflow: 'hidden',\n        position: 'relative',\n        padding: `${Styles.token.spacing.md}`,\n        paddingTop: `${Styles.token.spacing.sm}`,\n        backgroundColor: Styles.token.color.gray.lightest,\n\n        ...(props.isThemeDark && {\n          backgroundColor: Styles.token.color.gray.darker,\n        }),\n      },\n    },\n  });\n};\n"],"names":["ElementModel.createDiv","textLockup.smallScaling"],"mappings":";;;;;;;;;;;;;AAYA,MAAA,OAAe,CAAC,UAAyB;AACvC,QAAM,WAA4B,CAAA;AAElC,MAAI,MAAM,OAAO;AACf,UAAM,iBAAiBA,UAAuB;AAAA,MAC5C,WAAW;AAAA,MACX,eAAe;AAAA,QACb,SAAS;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,cAAc,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,UAExC,OAAO;AAAA,YACL,WAAW;AAAA,UAAA;AAAA,QACb;AAAA,MACF;AAAA,IACF,CACD;AACD,mBAAe,QAAQ,YAAY,MAAM,KAAK;AAC9C,aAAS,KAAK,cAAc;AAAA,EAC9B;AAEA,WAAS;AAAA,IACPC,aAAwB;AAAA,MACtB,GAAG;AAAA,MACH,cAAc;AAAA,QACZ,QAAQ;AAAA,MAAA;AAAA,IACV,CACD;AAAA,EAAA;AAGH,SAAOD,UAAuB;AAAA,IAC5B,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,MACb,SAAS;AAAA,QACP,eAAe;AAAA,QACf,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,QACnC,YAAY,GAAG,OAAO,MAAM,QAAQ,EAAE;AAAA,QACtC,iBAAiB,OAAO,MAAM,MAAM,KAAK;AAAA,QAEzC,GAAI,MAAM,eAAe;AAAA,UACvB,iBAAiB,OAAO,MAAM,MAAM,KAAK;AAAA,QAAA;AAAA,MAC3C;AAAA,IACF;AAAA,EACF,CACD;AACH;"}

package/dist/composite/card/overlay/image.d.ts

@@ -1,5 +1,6 @@
 import { CardOverlayProps } from '../_types';
-declare const _default: (props: CardOverlayProps) => {
+export declare const classRef = "card-overlay-image";
+export declare const createCardOverlayImage: (props: CardOverlayProps) => {
     events: {
         load: () => void;
     };
@@ -7,5 +8,4 @@ declare const _default: (props: CardOverlayProps) => {
     className: string;
     styles: string;
 };
-export default _default;
 //# sourceMappingURL=image.d.ts.map

package/dist/composite/card/overlay/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/overlay/image.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;gCAUtB,gBAAgB;;;;;;;;AAAvC,wBAmHE"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../source/composite/card/overlay/image.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AAG7C,eAAO,MAAM,QAAQ,uBAAuB,CAAC;AAE7C,eAAO,MAAM,sBAAsB,GAAI,OAAO,gBAAgB;;;;;;;CAsM7D,CAAC"}