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

package/dist/atomic/text-lockup/small.js.map

@@ -1 +1 @@
-{"version":3,"file":"small.js","sources":["../../../source/atomic/text-lockup/small.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type UMDElement } from '../../_types';\n\ntype TypeTheme = {\n  isThemeDark?: boolean;\n};\n\ntype TypeEyebrow = TypeTheme & {\n  eyebrow: HTMLElement;\n};\n\ntype TypeActions = {\n  actions: HTMLElement;\n};\n\nexport type TypeTextLockupSmall = TypeTheme & {\n  headline: HTMLElement | null;\n  eyebrow?: HTMLElement | null;\n  text?: HTMLElement | null;\n  date?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  eventMeta?: UMDElement;\n  hasEyebrowRibbon?: boolean;\n};\n\nconst ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER = 'text-lockup-small-container';\nconst metaContainer = elementStyles?.event?.meta?.container;\nconst metaClass: string = (() => {\n  if (!metaContainer?.className) return '';\n\n  if (Array.isArray(metaContainer.className)) {\n    return metaContainer.className[0] || '';\n  }\n\n  if (typeof metaContainer.className === 'string') {\n    return metaContainer.className;\n  }\n\n  return '';\n})();\n\nexport const eyebrowStyles = {\n  element: {\n    display: 'block',\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const ribbonStyles = {\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n};\n\nexport const headlineStyles = {\n  element: {\n    fontWeight: '700',\n\n    [`& + *`]: {\n      marginTop: token.spacing.sm,\n    },\n\n    [`& + .${metaClass}`]: {\n      [`@media (max-width: 479px)`]: {\n        marginTop: token.spacing.min,\n      },\n    },\n  },\n  subElement: {\n    color: 'currentColor',\n  },\n};\n\nexport const textStyles = (isThemeDark?: boolean) => ({\n  element: {\n    ...(!isThemeDark && {\n      color: `${token.color.gray.dark}`,\n    }),\n  },\n  child: {\n    ...(!isThemeDark && {\n      color: `${token.color.gray.dark}`,\n    }),\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n});\n\nexport const dateStyles = (isThemeDark?: boolean) => ({\n  element: {\n    display: 'block',\n\n    ...(!isThemeDark && {\n      color: `${token.color.gray.mediumAA}`,\n    }),\n  },\n  child: {\n    color: 'currentColor',\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n});\n\nexport const createEyebrow = ({ eyebrow, isThemeDark }: TypeEyebrow) =>\n  new ElementBuilder(eyebrow)\n    .styled(\n      typography.elements.compose('eyebrow', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles(eyebrowStyles)\n    .build();\n\nexport const createRibbonEyebrow = ({ eyebrow }: TypeEyebrow) =>\n  new ElementBuilder(eyebrow)\n    .styled(elementStyles.text.decoration.ribbon)\n    .withStyles(ribbonStyles)\n    .build();\n\nexport const createActions = ({ actions }: TypeActions) =>\n  new ElementBuilder(actions)\n    .styled(layout.grid.inline.tabletRows)\n    .withStyles({\n      element: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n\nexport const createTextLockupSmall = ({\n  eyebrow,\n  headline,\n  text,\n  actions,\n  date,\n  eventMeta,\n  isThemeDark,\n}: TypeTextLockupSmall) => {\n  const container = new ElementBuilder()\n    .withClassName(ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER)\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    });\n\n  if (eyebrow) {\n    const eyebrowElement = createEyebrow({ eyebrow, isThemeDark });\n    container.withChild(eyebrowElement);\n  }\n\n  if (headline) {\n    const composeHeadlineStyles = {\n      ...typography.sans.compose('larger', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const headlineElement = new ElementBuilder(headline)\n      .styled(composeHeadlineStyles)\n      .withStyles(headlineStyles)\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(headlineElement);\n  }\n\n  if (eventMeta) {\n    container.withChild(eventMeta);\n  }\n\n  if (text) {\n    const textElement = new ElementBuilder(text)\n      .styled(\n        elementStyles.text.rich.composeSimple({\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles(textStyles(isThemeDark))\n      .build();\n\n    container.withChild(textElement);\n  }\n\n  if (date) {\n    const dateElement = new ElementBuilder('slot')\n      .withClassName('umd-headline-sans-min')\n      .styled(\n        typography.sans.compose('min', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withAnimation('slideUnder')\n      .withChild(date)\n      .withStyles(dateStyles(isThemeDark))\n      .build();\n\n    container.withChild(dateElement);\n  }\n\n  if (actions) {\n    const actionsElement = createActions({ actions });\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["elementStyles","token","ElementBuilder","typography","theme","layout","animationStyles","wrapTextNodeInSpan"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAM,sCAAsC;AAC5C,MAAM,gBAAgBA,0BAAe,OAAO,MAAM;AAClD,MAAM,aAAqB,MAAM;AAC/B,MAAI,CAAC,eAAe,UAAW,QAAO;AAEtC,MAAI,MAAM,QAAQ,cAAc,SAAS,GAAG;AAC1C,WAAO,cAAc,UAAU,CAAC,KAAK;AAAA,EACvC;AAEA,MAAI,OAAO,cAAc,cAAc,UAAU;AAC/C,WAAO,cAAc;AAAA,EACvB;AAEA,SAAO;AACT,GAAA;AAEO,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,IACP,SAAS;AAAA,EAAA;AAAA,EAEX,cAAc;AAAA,IACZ,WAAWC,iBAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,eAAe;AAAA,EAC1B,cAAc;AAAA,IACZ,WAAWA,iBAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,iBAAiB;AAAA,EAC5B,SAAS;AAAA,IACP,YAAY;AAAA,IAEZ,CAAC,OAAO,GAAG;AAAA,MACT,WAAWA,iBAAM,QAAQ;AAAA,IAAA;AAAA,IAG3B,CAAC,QAAQ,SAAS,EAAE,GAAG;AAAA,MACrB,CAAC,2BAA2B,GAAG;AAAA,QAC7B,WAAWA,iBAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,OAAO;AAAA,EAAA;AAEX;AAEO,MAAM,aAAa,CAAC,iBAA2B;AAAA,EACpD,SAAS;AAAA,IACP,GAAI,CAAC,eAAe;AAAA,MAClB,OAAO,GAAGA,iBAAM,MAAM,KAAK,IAAI;AAAA,IAAA;AAAA,EACjC;AAAA,EAEF,OAAO;AAAA,IACL,GAAI,CAAC,eAAe;AAAA,MAClB,OAAO,GAAGA,iBAAM,MAAM,KAAK,IAAI;AAAA,IAAA;AAAA,EACjC;AAAA,EAEF,cAAc;AAAA,IACZ,WAAWA,iBAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,aAAa,CAAC,iBAA2B;AAAA,EACpD,SAAS;AAAA,IACP,SAAS;AAAA,IAET,GAAI,CAAC,eAAe;AAAA,MAClB,OAAO,GAAGA,iBAAM,MAAM,KAAK,QAAQ;AAAA,IAAA;AAAA,EACrC;AAAA,EAEF,OAAO;AAAA,IACL,OAAO;AAAA,EAAA;AAAA,EAET,cAAc;AAAA,IACZ,WAAWA,iBAAM,QAAQ;AAAA,EAAA;AAE7B;AAEO,MAAM,gBAAgB,CAAC,EAAE,SAAS,kBACvC,IAAIC,kBAAAA,eAAe,OAAO,EACvB;AAAA,EACCC,sBAAW,SAAS,QAAQ,WAAW;AAAA,IACrC,OAAOC,MAAAA,MAAM,UAAU,WAAW;AAAA,EAAA,CACnC;AACH,EACC,WAAW,aAAa,EACxB,MAAA;AAEE,MAAM,sBAAsB,CAAC,EAAE,cACpC,IAAIF,kBAAAA,eAAe,OAAO,EACvB,OAAOF,yBAAc,KAAK,WAAW,MAAM,EAC3C,WAAW,YAAY,EACvB,MAAA;AAEE,MAAM,gBAAgB,CAAC,EAAE,cAC9B,IAAIE,kBAAAA,eAAe,OAAO,EACvB,OAAOG,kBAAO,KAAK,OAAO,UAAU,EACpC,WAAW;AAAA,EACV,SAAS;AAAA,IACP,WAAWJ,iBAAM,QAAQ;AAAA,EAAA;AAE7B,CAAC,EACA,MAAA;AAEE,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,YAAY,IAAIC,kBAAAA,eAAA,EACnB,cAAc,mCAAmC,EACjD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,IAAA;AAAA,EACZ,CACD;AAEH,MAAI,SAAS;AACX,UAAM,iBAAiB,cAAc,EAAE,SAAS,aAAa;AAC7D,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,MAAI,UAAU;AACZ,UAAM,wBAAwB;AAAA,MAC5B,GAAGC,sBAAW,KAAK,QAAQ,UAAU;AAAA,QACnC,OAAOC,MAAAA,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,MACD,GAAGE,qBAAgB,KAAK,kBAAkB;AAAA,QACxC,OAAOF,MAAAA,MAAM,WAAW,WAAW;AAAA,MAAA,CACpC;AAAA,IAAA;AAGH,UAAM,kBAAkB,IAAIF,kBAAAA,eAAe,QAAQ,EAChD,OAAO,qBAAqB,EAC5B,WAAW,cAAc,EACzB,aAAa,CAAC,OAAOK,IAAAA,mBAAmB,EAAE,CAAC,EAC3C,MAAA;AAEH,cAAU,UAAU,eAAe;AAAA,EACrC;AAEA,MAAI,WAAW;AACb,cAAU,UAAU,SAAS;AAAA,EAC/B;AAEA,MAAI,MAAM;AACR,UAAM,cAAc,IAAIL,iCAAe,IAAI,EACxC;AAAA,MACCF,yBAAc,KAAK,KAAK,cAAc;AAAA,QACpC,OAAOI,MAAAA,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,IAAA,EAEF,WAAW,WAAW,WAAW,CAAC,EAClC,MAAA;AAEH,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,MAAM;AACR,UAAM,cAAc,IAAIF,iCAAe,MAAM,EAC1C,cAAc,uBAAuB,EACrC;AAAA,MACCC,sBAAW,KAAK,QAAQ,OAAO;AAAA,QAC7B,OAAOC,MAAAA,MAAM,UAAU,WAAW;AAAA,MAAA,CACnC;AAAA,IAAA,EAEF,cAAc,YAAY,EAC1B,UAAU,IAAI,EACd,WAAW,WAAW,WAAW,CAAC,EAClC,MAAA;AAEH,cAAU,UAAU,WAAW;AAAA,EACjC;AAEA,MAAI,SAAS;AACX,UAAM,iBAAiB,cAAc,EAAE,SAAS;AAChD,cAAU,UAAU,cAAc;AAAA,EACpC;AAEA,SAAO,UAAU,MAAA;AACnB;;;;;;;;;;"}
+{"version":3,"file":"small.js","sources":["../../../source/atomic/text-lockup/small.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as animationStyles from '@universityofmaryland/web-styles-library/animation';\nimport { wrapTextNodeInSpan } from '@universityofmaryland/web-utilities-library/dom';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { type UMDElement } from '../../_types';\n\ntype TypeTheme = {\n  isThemeDark?: boolean;\n};\n\ntype TypeEyebrow = TypeTheme & {\n  eyebrow: HTMLElement;\n};\n\ntype TypeActions = {\n  actions: HTMLElement;\n};\n\nexport type TypeTextLockupSmall = TypeTheme & {\n  headline: HTMLElement | null;\n  eyebrow?: HTMLElement | null;\n  text?: HTMLElement | null;\n  date?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  eventMeta?: UMDElement;\n  hasEyebrowRibbon?: boolean;\n};\n\nconst ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER = 'text-lockup-small-container';\nconst metaContainer = elementStyles?.event?.meta?.container;\nconst metaClass: string = (() => {\n  if (!metaContainer?.className) return '';\n\n  if (Array.isArray(metaContainer.className)) {\n    return metaContainer.className[0] || '';\n  }\n\n  if (typeof metaContainer.className === 'string') {\n    return metaContainer.className;\n  }\n\n  return '';\n})();\n\nexport const eyebrowStyles = {\n  element: {\n    display: 'block',\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n};\n\nexport const ribbonStyles = {\n  siblingAfter: {\n    marginTop: token.spacing.sm,\n  },\n};\n\nexport const headlineStyles = {\n  element: {\n    fontWeight: '700',\n\n    [`& + *`]: {\n      marginTop: token.spacing.sm,\n    },\n\n    [`& + .${metaClass}`]: {\n      [`@media (max-width: 479px)`]: {\n        marginTop: token.spacing.min,\n      },\n    },\n  },\n  subElement: {\n    color: 'currentColor',\n  },\n};\n\nexport const textStyles = (isThemeDark?: boolean) => ({\n  element: {\n    ...(!isThemeDark && {\n      color: `${token.color.gray.dark}`,\n    }),\n  },\n  child: {\n    ...(!isThemeDark && {\n      color: `${token.color.gray.dark}`,\n    }),\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n});\n\nexport const dateStyles = (isThemeDark?: boolean) => ({\n  element: {\n    display: 'block',\n\n    ...(!isThemeDark && {\n      color: `${token.color.gray.mediumAA}`,\n    }),\n  },\n  child: {\n    color: 'currentColor',\n  },\n  siblingAfter: {\n    marginTop: token.spacing.min,\n  },\n});\n\nexport const createEyebrow = ({ eyebrow, isThemeDark }: TypeEyebrow) =>\n  new ElementBuilder(eyebrow)\n    .styled(\n      typography.elements.compose('eyebrow', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles(eyebrowStyles)\n    .build();\n\nexport const createRibbonEyebrow = ({ eyebrow }: TypeEyebrow) =>\n  new ElementBuilder(eyebrow)\n    .styled(elementStyles.text.decoration.ribbon)\n    .withStyles(ribbonStyles)\n    .build();\n\nexport const createActions = ({ actions }: TypeActions) =>\n  new ElementBuilder(actions)\n    .styled(layout.grid.inline.tabletRows)\n    .withStyles({\n      element: {\n        marginTop: token.spacing.sm,\n      },\n    })\n    .build();\n\nexport const createTextLockupSmall = ({\n  eyebrow,\n  headline,\n  text,\n  actions,\n  date,\n  eventMeta,\n  isThemeDark,\n}: TypeTextLockupSmall) => {\n  const container = new ElementBuilder()\n    .withClassName(ELEMENT_TEXT_LOCKUP_SMALL_CONTAINER)\n    .withStyles({\n      element: {\n        zIndex: '9',\n        position: 'relative',\n      },\n    });\n\n  if (eyebrow) {\n    const eyebrowElement = createEyebrow({ eyebrow, isThemeDark });\n    container.withChild(eyebrowElement);\n  }\n\n  if (headline) {\n    const composeHeadlineStyles = {\n      ...typography.sans.compose('larger', {\n        theme: theme.fontColor(isThemeDark),\n      }),\n      ...animationStyles.line.composeSlideUnder({\n        color: theme.foreground(isThemeDark),\n      }),\n    };\n\n    const headlineElement = new ElementBuilder(headline)\n      .styled(composeHeadlineStyles)\n      .withStyles(headlineStyles)\n      .withModifier((el) => wrapTextNodeInSpan(el))\n      .build();\n\n    container.withChild(headlineElement);\n  }\n\n  if (eventMeta) {\n    container.withChild(eventMeta);\n  }\n\n  if (text) {\n    const textElement = new ElementBuilder(text)\n      .styled(\n        elementStyles.text.rich.composeSimple({\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withStyles(textStyles(isThemeDark))\n      .build();\n\n    container.withChild(textElement);\n  }\n\n  if (date) {\n    const dateElement = new ElementBuilder('slot')\n      .withClassName('umd-headline-sans-min')\n      .styled(\n        typography.sans.compose('min', {\n          theme: theme.fontColor(isThemeDark),\n        }),\n      )\n      .withAnimation('slideUnder')\n      .withChild(date)\n      .withStyles(dateStyles(isThemeDark))\n      .build();\n\n    container.withChild(dateElement);\n  }\n\n  if (actions) {\n    const actionsElement = createActions({ actions });\n    container.withChild(actionsElement);\n  }\n\n  return container.build();\n};\n"],"names":["animationStyles"],"mappings":"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"}

package/dist/atomic.js

@@ -1,19 +1,19 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./atomic/actions/index.js");
-const index$1 = require("./atomic/animations/index.js");
-const index$2 = require("./atomic/assets/index.js");
-const index$3 = require("./atomic/buttons/index.js");
-const index$4 = require("./atomic/events/index.js");
-const index$5 = require("./atomic/layout/index.js");
-const index$6 = require("./atomic/text-lockup/index.js");
-const index$7 = require("./atomic/text/index.js");
-exports.actions = index;
-exports.animations = index$1;
-exports.assets = index$2;
-exports.buttons = index$3;
-exports.events = index$4;
-exports.layout = index$5;
-exports.textLockup = index$6;
-exports.text = index$7;
+import * as index from "./atomic/actions/index.js";
+import * as index$1 from "./atomic/animations/index.js";
+import * as index$2 from "./atomic/assets/index.js";
+import * as index$3 from "./atomic/buttons/index.js";
+import * as index$4 from "./atomic/events/index.js";
+import * as index$5 from "./atomic/layout/index.js";
+import * as index$6 from "./atomic/text-lockup/index.js";
+import * as index$7 from "./atomic/text/index.js";
+export {
+  index as actions,
+  index$1 as animations,
+  index$2 as assets,
+  index$3 as buttons,
+  index$4 as events,
+  index$5 as layout,
+  index$7 as text,
+  index$6 as textLockup
+};
 //# sourceMappingURL=atomic.js.map

package/dist/atomic.js.map

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

package/dist/composite/accordion/index.d.ts

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

package/dist/composite/accordion/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,4BAA4B,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/composite/accordion/index.js

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

package/dist/composite/accordion/index.js.map

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

package/dist/composite/accordion/item.d.ts

@@ -12,7 +12,7 @@ type TypeAccordionProps = TypeHeadlineText & TypeBodyText & {
     isThemeDark?: boolean;
     isStateOpen: boolean;
 };
-declare const _default: (props: TypeAccordionProps) => {
+export declare const createCompositeAccordionItem: (props: TypeAccordionProps) => {
     element: HTMLDivElement;
     styles: string;
     events: {
@@ -20,5 +20,5 @@ declare const _default: (props: TypeAccordionProps) => {
         close: (props: StateProps) => void;
     };
 };
-export default _default;
+export {};
 //# sourceMappingURL=item.d.ts.map

package/dist/composite/accordion/item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../source/composite/accordion/item.ts"],"names":[],"mappings":"AAIA,KAAK,gBAAgB,GAAG;IAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAC1D,KAAK,YAAY,GAAG;IAAE,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAElD,KAAK,UAAU,GAAG;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,kBAAkB,GAAG,gBAAgB,GACxC,YAAY,GAAG;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;yBAoTY,OAAO,kBAAkB;;;;sBAOhB,UAAU;uBAIT,UAAU;;;AAXpC,wBAyDO"}
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../source/composite/accordion/item.ts"],"names":[],"mappings":"AAIA,KAAK,gBAAgB,GAAG;IAAE,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAC1D,KAAK,YAAY,GAAG;IAAE,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAElD,KAAK,UAAU,GAAG;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,kBAAkB,GAAG,gBAAgB,GACxC,YAAY,GAAG;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAoTJ,eAAO,MAAM,4BAA4B,GAAI,OAAO,kBAAkB;;;;sBAO7C,UAAU;uBAIT,UAAU;;CA8C9B,CAAC"}

package/dist/composite/accordion/item.js

@@ -1,25 +1,7 @@
-"use strict";
-const Styles = require("@universityofmaryland/web-styles-library");
-const styles = require("@universityofmaryland/web-utilities-library/styles");
-const performance = require("@universityofmaryland/web-utilities-library/performance");
-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 { token } = Styles__namespace;
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
+import { debounce } from "@universityofmaryland/web-utilities-library/performance";
+const { token } = Styles;
 const SMALL = 480;
 const ELEMENT_NAME = "umd-element-accordion-item";
 const ELEMENT_DECLARATION = "accordion-declaration";
@@ -71,9 +53,9 @@ const OverwriteThemeDark = `
   }
 `;
 const bodyStyles = `
-  ${styles.jssToCSS({
+  ${jssToCSS({
   styleObj: {
-    [`.${ELEMENT_BODY_WRAPPER}`]: Styles__namespace.typography.sans.medium
+    [`.${ELEMENT_BODY_WRAPPER}`]: Styles.typography.sans.medium
   }
 })}
 
@@ -109,9 +91,9 @@ const bodyStyles = `
   }
 `;
 const headlineStyles = `
-  ${styles.jssToCSS({
+  ${jssToCSS({
   styleObj: {
-    [`.${ELEMENT_HEADLINE}`]: Styles__namespace.typography.sans.large
+    [`.${ELEMENT_HEADLINE}`]: Styles.typography.sans.large
   }
 })}
 
@@ -279,7 +261,7 @@ const ActionAnimation = ({
     bodyWrapperElement.style.transition = "none";
   }, 100 + ANIMATION_TIME);
 };
-const item = (props) => (() => {
+const createCompositeAccordionItem = (props) => (() => {
   const { isThemeDark, isThemeLight, isStateOpen = false } = props;
   const declaration = document.createElement("div");
   const container = document.createElement("div");
@@ -317,7 +299,7 @@ const item = (props) => (() => {
   if (isStateOpen) {
     open({ hasAnimation: false });
   }
-  window.addEventListener("resize", performance.debounce(resize, 20));
+  window.addEventListener("resize", debounce(resize, 20));
   return {
     element: declaration,
     styles: STYLES_ACCORDION_ELEMENT,
@@ -327,5 +309,7 @@ const item = (props) => (() => {
     }
   };
 })();
-module.exports = item;
+export {
+  createCompositeAccordionItem
+};
 //# sourceMappingURL=item.js.map

package/dist/composite/accordion/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","sources":["../../../source/composite/accordion/item.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\n\ntype TypeHeadlineText = { headline?: HTMLElement | null };\ntype TypeBodyText = { text?: HTMLElement | null };\ntype TypeAccordionState = { isOpen: boolean };\ntype StateProps = {\n  hasAnimation?: boolean;\n};\n\ntype TypeAccordionProps = TypeHeadlineText &\n  TypeBodyText & {\n    isThemeLight?: boolean;\n    isThemeDark?: boolean;\n    isStateOpen: boolean;\n  };\n\ntype TypeHeadlineProps = TypeHeadlineText &\n  TypeAccordionState & {\n    close: (arg: StateProps) => void;\n    open: (arg: StateProps) => void;\n  };\n\ntype TypeBodyProps = TypeBodyText & TypeAccordionState;\n\ntype ActionAnimationProps = StateProps & {\n  container: HTMLDivElement;\n  isOpening: boolean;\n};\n\nconst { token } = Styles;\n\nconst SMALL = 480;\n\nconst ELEMENT_NAME = 'umd-element-accordion-item';\nconst ELEMENT_DECLARATION = 'accordion-declaration';\nconst ELEMENT_CONTAINER = 'accordion-container';\nconst ELEMENT_HEADLINE = 'accordion-headline';\nconst ELEMENT_BODY_WRAPPER = 'accordion-body-wrapper';\nconst ELEMENT_BODY = 'accordion-body';\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\nconst ANIMATION_TIME = 500;\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}='${THEME_DARK}']`;\n\nconst OVERWRITE_THEME_DARK_HEADLINE = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_BODY_WRAPPER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_BODY = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_HEADLINE} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE} > * {\n    color: ${token.color.white}\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}:before,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:after {\n    background-color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'],\n  ${OVERWRITE_THEME_DARK_HEADLINE}:hover,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:focus {\n    background-color: ${token.color.gray.darker};\n    border-top: 2px solid ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'] > *,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:hover > *,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:focus > * {\n    color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_BODY_WRAPPER} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_BODY},\n  ${OVERWRITE_THEME_DARK_BODY} * {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst bodyStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_BODY_WRAPPER}`]: Styles.typography.sans.medium\n    },\n  })}\n\n  .${ELEMENT_BODY_WRAPPER} {\n    background-color: ${token.color.gray.lightest};\n    height: 0;\n    overflow: hidden;\n    display: none;\n  }\n\n  .${ELEMENT_BODY} {\n    padding: ${token.spacing.md};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_BODY} {\n      padding: ${token.spacing.lg};\n    }\n  }\n\n  .${ELEMENT_BODY} > * {\n    margin-top: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_BODY} > *:first-child {\n    margin-top: 0;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_BODY} > * {\n      margin-top: ${token.spacing.lg};\n    }\n  }\n`;\n\n// prettier-ignore\nconst headlineStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_HEADLINE}`]: Styles.typography.sans.large,\n    },\n  })}\n\n  .${ELEMENT_HEADLINE} {\n    display: flex;\n    border-top: 2px solid transparent;\n    padding: ${token.spacing.md};\n    padding-right: ${token.spacing['4xl']};\n    background-color: ${token.color.gray.lightest};\n    position: relative;\n    transition: background 0.5s, border 0.5s, color 0.5s, padding 0.5s;\n    width: 100%;\n    text-align: left;\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_HEADLINE} > * {\n    color: ${token.color.black};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE} {\n      padding: ${token.spacing.lg};\n      padding-right: ${token.spacing['6xl']}\n    }\n  }\n\n  .${ELEMENT_HEADLINE}:before,\n  .${ELEMENT_HEADLINE}:after {\n    content: '';\n    background-color: ${token.color.red};\n    position: absolute;\n    right: ${token.spacing.md};\n    transition: background 0.5s, height 0.5s, right 0.5s, top 0.5s,\n    transform 0.5s, width 0.5s;\n  }\n\n  .${ELEMENT_HEADLINE}:before {\n    height: 4px;\n    top: calc(50% - 2px);\n    width: 16px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE}:before {\n      width: 20px;\n      right: 32px;\n    }\n  }\n\n  .${ELEMENT_HEADLINE}:after {\n    height: 16px;\n    top: calc(50% - 8px);\n    right: calc(${token.spacing.md} + 6px);\n    width: 4px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE}:after {\n      height: 20px;\n      top: calc(50% - 10px);\n      right: calc(${token.spacing.lg} + 8px);\n    }\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true'],\n  .${ELEMENT_HEADLINE}:hover,\n  .${ELEMENT_HEADLINE}:focus {\n    background-color: ${token.color.gray.lightest};\n    border-top: 2px solid ${token.color.red};\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true'] > *,\n  .${ELEMENT_HEADLINE}:hover > *,\n  .${ELEMENT_HEADLINE}:focus > * {\n    color: ${token.color.red};\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true']:after {\n    transform: rotate(90deg);\n  }\n`;\n\nconst STYLES_ACCORDION_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${headlineStyles}\n  ${bodyStyles}\n  ${OverwriteThemeDark}\n`;\n\nconst CreateBody = ({ text, isOpen }: TypeBodyProps) => {\n  const contentWrapper = document.createElement('div');\n\n  contentWrapper.classList.add(ELEMENT_BODY_WRAPPER);\n\n  if (text) {\n    const wrapper = document.createElement('div');\n    wrapper.classList.add(ELEMENT_BODY);\n    contentWrapper.ariaHidden = isOpen ? 'false' : 'true';\n    wrapper.appendChild(text);\n    contentWrapper.appendChild(wrapper);\n\n    return contentWrapper;\n  }\n\n  return null;\n};\n\nconst CreateHeadline = ({\n  headline,\n  isOpen,\n  open,\n  close,\n}: TypeHeadlineProps) => {\n  const headlineContainer = document.createElement('button');\n\n  headlineContainer.classList.add(ELEMENT_HEADLINE);\n  headlineContainer.ariaExpanded = isOpen ? 'true' : 'false';\n\n  if (headline) {\n    headlineContainer.appendChild(headline);\n\n    headlineContainer.addEventListener('click', () => {\n      const isExpanded = headlineContainer.ariaExpanded == 'true';\n\n      if (isExpanded) {\n        close({ hasAnimation: true });\n      } else {\n        open({ hasAnimation: true });\n      }\n    });\n\n    return headlineContainer;\n  }\n\n  return null;\n};\n\nconst ActionAnimation = ({\n  container,\n  isOpening = true,\n  hasAnimation = true,\n}: ActionAnimationProps) => {\n  const headlineContainer = container.querySelector(\n    'button',\n  ) as HTMLButtonElement;\n  const bodyWrapperElement = container.querySelector(\n    `.${ELEMENT_BODY_WRAPPER}`,\n  ) as HTMLElement;\n  const bodyElement = container.querySelector(\n    `.${ELEMENT_BODY}`,\n  ) as HTMLElement;\n\n  if (!headlineContainer || !bodyWrapperElement || !bodyElement) {\n    throw new Error('headlineContainer or bodyWrapperElement is not found');\n  }\n\n  if (hasAnimation)\n    bodyWrapperElement.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;\n\n  if (isOpening) {\n    bodyWrapperElement.style.display = 'block';\n\n    setTimeout(() => {\n      headlineContainer.ariaExpanded = 'true';\n      bodyWrapperElement.ariaHidden = 'false';\n    }, 100);\n  } else {\n    headlineContainer.ariaExpanded = 'false';\n    bodyWrapperElement.ariaHidden = 'true';\n\n    setTimeout(() => {\n      bodyWrapperElement.style.display = 'none';\n    }, ANIMATION_TIME + 50);\n  }\n\n  setTimeout(() => {\n    const bodyHeight = bodyElement.offsetHeight;\n    bodyWrapperElement.style.height = isOpening ? `${bodyHeight}px` : '0';\n  }, 100);\n\n  setTimeout(() => {\n    bodyWrapperElement.style.transition = 'none';\n  }, 100 + ANIMATION_TIME);\n};\n\nexport default (props: TypeAccordionProps) =>\n  (() => {\n    const { isThemeDark, isThemeLight, isStateOpen = false } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    let isOpen = isStateOpen;\n\n    const open = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: true });\n      isOpen = true;\n    };\n    const close = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: false });\n      isOpen = false;\n    };\n    const EventSize = () => {\n      if (!isOpen) return;\n      const bodyElement = container.querySelector(\n        `.${ELEMENT_BODY}`,\n      ) as HTMLElement;\n      const bodyWrapperElement = container.querySelector(\n        `.${ELEMENT_BODY_WRAPPER}`,\n      ) as HTMLElement;\n\n      bodyWrapperElement.style.height = `${bodyElement.offsetHeight}px`;\n    };\n    const resize = () => {\n      EventSize();\n    };\n\n    const headline = CreateHeadline({ ...props, isOpen, open, close });\n    const body = CreateBody({ ...props, isOpen });\n\n    if (headline) container.appendChild(headline);\n    if (body) container.appendChild(body);\n\n    container.classList.add(ELEMENT_CONTAINER);\n    if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, 'light');\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, 'dark');\n\n    declaration.appendChild(container);\n    declaration.classList.add(ELEMENT_DECLARATION);\n\n    if (isStateOpen) {\n      open({ hasAnimation: false });\n    }\n\n    window.addEventListener('resize', debounce(resize, 20));\n\n    return {\n      element: declaration,\n      styles: STYLES_ACCORDION_ELEMENT,\n      events: {\n        open,\n        close,\n      },\n    };\n  })();\n"],"names":["Styles","jssToCSS","props","debounce"],"mappings":"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"}
+{"version":3,"file":"item.js","sources":["../../../source/composite/accordion/item.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\nimport { debounce } from '@universityofmaryland/web-utilities-library/performance';\n\ntype TypeHeadlineText = { headline?: HTMLElement | null };\ntype TypeBodyText = { text?: HTMLElement | null };\ntype TypeAccordionState = { isOpen: boolean };\ntype StateProps = {\n  hasAnimation?: boolean;\n};\n\ntype TypeAccordionProps = TypeHeadlineText &\n  TypeBodyText & {\n    isThemeLight?: boolean;\n    isThemeDark?: boolean;\n    isStateOpen: boolean;\n  };\n\ntype TypeHeadlineProps = TypeHeadlineText &\n  TypeAccordionState & {\n    close: (arg: StateProps) => void;\n    open: (arg: StateProps) => void;\n  };\n\ntype TypeBodyProps = TypeBodyText & TypeAccordionState;\n\ntype ActionAnimationProps = StateProps & {\n  container: HTMLDivElement;\n  isOpening: boolean;\n};\n\nconst { token } = Styles;\n\nconst SMALL = 480;\n\nconst ELEMENT_NAME = 'umd-element-accordion-item';\nconst ELEMENT_DECLARATION = 'accordion-declaration';\nconst ELEMENT_CONTAINER = 'accordion-container';\nconst ELEMENT_HEADLINE = 'accordion-headline';\nconst ELEMENT_BODY_WRAPPER = 'accordion-body-wrapper';\nconst ELEMENT_BODY = 'accordion-body';\n\nconst ATTRIBUTE_THEME = 'theme';\nconst THEME_DARK = 'dark';\nconst ANIMATION_TIME = 500;\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}='${THEME_DARK}']`;\n\nconst OVERWRITE_THEME_DARK_HEADLINE = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_HEADLINE}`;\nconst OVERWRITE_THEME_DARK_BODY_WRAPPER = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY_WRAPPER}`;\nconst OVERWRITE_THEME_DARK_BODY = `.${ELEMENT_CONTAINER}${IS_THEME_DARK} .${ELEMENT_BODY}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_HEADLINE} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE} > * {\n    color: ${token.color.white}\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}:before,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:after {\n    background-color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'],\n  ${OVERWRITE_THEME_DARK_HEADLINE}:hover,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:focus {\n    background-color: ${token.color.gray.darker};\n    border-top: 2px solid ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_HEADLINE}[aria-expanded='true'] > *,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:hover > *,\n  ${OVERWRITE_THEME_DARK_HEADLINE}:focus > * {\n    color: ${token.color.gold};\n  }\n\n  ${OVERWRITE_THEME_DARK_BODY_WRAPPER} {\n    background-color: ${token.color.gray.darker};\n  }\n\n  ${OVERWRITE_THEME_DARK_BODY},\n  ${OVERWRITE_THEME_DARK_BODY} * {\n    color: ${token.color.white};\n  }\n`;\n\n// prettier-ignore\nconst bodyStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_BODY_WRAPPER}`]: Styles.typography.sans.medium\n    },\n  })}\n\n  .${ELEMENT_BODY_WRAPPER} {\n    background-color: ${token.color.gray.lightest};\n    height: 0;\n    overflow: hidden;\n    display: none;\n  }\n\n  .${ELEMENT_BODY} {\n    padding: ${token.spacing.md};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_BODY} {\n      padding: ${token.spacing.lg};\n    }\n  }\n\n  .${ELEMENT_BODY} > * {\n    margin-top: ${token.spacing.sm};\n  }\n\n  .${ELEMENT_BODY} > *:first-child {\n    margin-top: 0;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_BODY} > * {\n      margin-top: ${token.spacing.lg};\n    }\n  }\n`;\n\n// prettier-ignore\nconst headlineStyles = `\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_HEADLINE}`]: Styles.typography.sans.large,\n    },\n  })}\n\n  .${ELEMENT_HEADLINE} {\n    display: flex;\n    border-top: 2px solid transparent;\n    padding: ${token.spacing.md};\n    padding-right: ${token.spacing['4xl']};\n    background-color: ${token.color.gray.lightest};\n    position: relative;\n    transition: background 0.5s, border 0.5s, color 0.5s, padding 0.5s;\n    width: 100%;\n    text-align: left;\n    color: ${token.color.black};\n  }\n\n  .${ELEMENT_HEADLINE} > * {\n    color: ${token.color.black};\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE} {\n      padding: ${token.spacing.lg};\n      padding-right: ${token.spacing['6xl']}\n    }\n  }\n\n  .${ELEMENT_HEADLINE}:before,\n  .${ELEMENT_HEADLINE}:after {\n    content: '';\n    background-color: ${token.color.red};\n    position: absolute;\n    right: ${token.spacing.md};\n    transition: background 0.5s, height 0.5s, right 0.5s, top 0.5s,\n    transform 0.5s, width 0.5s;\n  }\n\n  .${ELEMENT_HEADLINE}:before {\n    height: 4px;\n    top: calc(50% - 2px);\n    width: 16px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE}:before {\n      width: 20px;\n      right: 32px;\n    }\n  }\n\n  .${ELEMENT_HEADLINE}:after {\n    height: 16px;\n    top: calc(50% - 8px);\n    right: calc(${token.spacing.md} + 6px);\n    width: 4px;\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${SMALL}px) {\n    .${ELEMENT_HEADLINE}:after {\n      height: 20px;\n      top: calc(50% - 10px);\n      right: calc(${token.spacing.lg} + 8px);\n    }\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true'],\n  .${ELEMENT_HEADLINE}:hover,\n  .${ELEMENT_HEADLINE}:focus {\n    background-color: ${token.color.gray.lightest};\n    border-top: 2px solid ${token.color.red};\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true'] > *,\n  .${ELEMENT_HEADLINE}:hover > *,\n  .${ELEMENT_HEADLINE}:focus > * {\n    color: ${token.color.red};\n  }\n\n  .${ELEMENT_HEADLINE}[aria-expanded='true']:after {\n    transform: rotate(90deg);\n  }\n`;\n\nconst STYLES_ACCORDION_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  ${headlineStyles}\n  ${bodyStyles}\n  ${OverwriteThemeDark}\n`;\n\nconst CreateBody = ({ text, isOpen }: TypeBodyProps) => {\n  const contentWrapper = document.createElement('div');\n\n  contentWrapper.classList.add(ELEMENT_BODY_WRAPPER);\n\n  if (text) {\n    const wrapper = document.createElement('div');\n    wrapper.classList.add(ELEMENT_BODY);\n    contentWrapper.ariaHidden = isOpen ? 'false' : 'true';\n    wrapper.appendChild(text);\n    contentWrapper.appendChild(wrapper);\n\n    return contentWrapper;\n  }\n\n  return null;\n};\n\nconst CreateHeadline = ({\n  headline,\n  isOpen,\n  open,\n  close,\n}: TypeHeadlineProps) => {\n  const headlineContainer = document.createElement('button');\n\n  headlineContainer.classList.add(ELEMENT_HEADLINE);\n  headlineContainer.ariaExpanded = isOpen ? 'true' : 'false';\n\n  if (headline) {\n    headlineContainer.appendChild(headline);\n\n    headlineContainer.addEventListener('click', () => {\n      const isExpanded = headlineContainer.ariaExpanded == 'true';\n\n      if (isExpanded) {\n        close({ hasAnimation: true });\n      } else {\n        open({ hasAnimation: true });\n      }\n    });\n\n    return headlineContainer;\n  }\n\n  return null;\n};\n\nconst ActionAnimation = ({\n  container,\n  isOpening = true,\n  hasAnimation = true,\n}: ActionAnimationProps) => {\n  const headlineContainer = container.querySelector(\n    'button',\n  ) as HTMLButtonElement;\n  const bodyWrapperElement = container.querySelector(\n    `.${ELEMENT_BODY_WRAPPER}`,\n  ) as HTMLElement;\n  const bodyElement = container.querySelector(\n    `.${ELEMENT_BODY}`,\n  ) as HTMLElement;\n\n  if (!headlineContainer || !bodyWrapperElement || !bodyElement) {\n    throw new Error('headlineContainer or bodyWrapperElement is not found');\n  }\n\n  if (hasAnimation)\n    bodyWrapperElement.style.transition = `height ${ANIMATION_TIME}ms ease-in-out`;\n\n  if (isOpening) {\n    bodyWrapperElement.style.display = 'block';\n\n    setTimeout(() => {\n      headlineContainer.ariaExpanded = 'true';\n      bodyWrapperElement.ariaHidden = 'false';\n    }, 100);\n  } else {\n    headlineContainer.ariaExpanded = 'false';\n    bodyWrapperElement.ariaHidden = 'true';\n\n    setTimeout(() => {\n      bodyWrapperElement.style.display = 'none';\n    }, ANIMATION_TIME + 50);\n  }\n\n  setTimeout(() => {\n    const bodyHeight = bodyElement.offsetHeight;\n    bodyWrapperElement.style.height = isOpening ? `${bodyHeight}px` : '0';\n  }, 100);\n\n  setTimeout(() => {\n    bodyWrapperElement.style.transition = 'none';\n  }, 100 + ANIMATION_TIME);\n};\n\nexport const createCompositeAccordionItem = (props: TypeAccordionProps) =>\n  (() => {\n    const { isThemeDark, isThemeLight, isStateOpen = false } = props;\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    let isOpen = isStateOpen;\n\n    const open = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: true });\n      isOpen = true;\n    };\n    const close = (props: StateProps) => {\n      ActionAnimation({ ...props, container, isOpening: false });\n      isOpen = false;\n    };\n    const EventSize = () => {\n      if (!isOpen) return;\n      const bodyElement = container.querySelector(\n        `.${ELEMENT_BODY}`,\n      ) as HTMLElement;\n      const bodyWrapperElement = container.querySelector(\n        `.${ELEMENT_BODY_WRAPPER}`,\n      ) as HTMLElement;\n\n      bodyWrapperElement.style.height = `${bodyElement.offsetHeight}px`;\n    };\n    const resize = () => {\n      EventSize();\n    };\n\n    const headline = CreateHeadline({ ...props, isOpen, open, close });\n    const body = CreateBody({ ...props, isOpen });\n\n    if (headline) container.appendChild(headline);\n    if (body) container.appendChild(body);\n\n    container.classList.add(ELEMENT_CONTAINER);\n    if (isThemeLight) container.setAttribute(ATTRIBUTE_THEME, 'light');\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, 'dark');\n\n    declaration.appendChild(container);\n    declaration.classList.add(ELEMENT_DECLARATION);\n\n    if (isStateOpen) {\n      open({ hasAnimation: false });\n    }\n\n    window.addEventListener('resize', debounce(resize, 20));\n\n    return {\n      element: declaration,\n      styles: STYLES_ACCORDION_ELEMENT,\n      events: {\n        open,\n        close,\n      },\n    };\n  })();\n"],"names":["props"],"mappings":"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"}

package/dist/composite/alert/elements/closeButton.js

@@ -1,51 +1,34 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const token = require("@universityofmaryland/web-token-library");
-const animation = require("@universityofmaryland/web-utilities-library/animation");
-const theme = require("@universityofmaryland/web-utilities-library/theme");
-const controls = require("@universityofmaryland/web-icons-library/controls");
-function _interopNamespaceDefault(e) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const token__namespace = /* @__PURE__ */ _interopNamespaceDefault(token);
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import { shrinkThenRemove } from "@universityofmaryland/web-utilities-library/animation";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
+import { close } from "@universityofmaryland/web-icons-library/controls";
 const CreateCloseButton = (props) => {
   const { isThemeDark = false, targetSelector, onBeforeClose } = props;
   const MEDIUM = 768;
   const button = document.createElement("button");
-  return new webBuilderLibrary.ElementBuilder(button).withClassName("alert-close-button").withAttribute("aria-label", "Close alert").withAttribute("type", "button").withHTML(controls.close).withStyles({
+  return new ElementBuilder(button).withClassName("alert-close-button").withAttribute("aria-label", "Close alert").withAttribute("type", "button").withHTML(close).withStyles({
     element: {
       position: "absolute",
-      top: token__namespace.spacing.lg,
-      right: token__namespace.spacing.lg,
-      color: theme.theme.foreground(isThemeDark),
+      top: token.spacing.lg,
+      right: token.spacing.lg,
+      color: theme.foreground(isThemeDark),
       ["& rect, & path"]: {
         fill: "currentColor"
       },
       [`@container (max-width: ${MEDIUM}px)`]: {
-        top: token__namespace.spacing.sm,
-        right: token__namespace.spacing.sm
+        top: token.spacing.sm,
+        right: token.spacing.sm
       }
     }
   }).on("click", () => {
     if (typeof onBeforeClose === "function") onBeforeClose();
     const wrapper = button.closest(targetSelector);
     if (wrapper instanceof HTMLElement)
-      animation.shrinkThenRemove({ container: wrapper });
+      shrinkThenRemove({ container: wrapper });
   }).build();
 };
-exports.CreateCloseButton = CreateCloseButton;
+export {
+  CreateCloseButton
+};
 //# sourceMappingURL=closeButton.js.map

package/dist/composite/alert/elements/closeButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"closeButton.js","sources":["../../../../source/composite/alert/elements/closeButton.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { shrinkThenRemove } from '@universityofmaryland/web-utilities-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { close as iconClose } from '@universityofmaryland/web-icons-library/controls';\nimport { AlertTextProps } from './text';\n\nexport interface CloseButtonProps extends AlertTextProps {\n  targetSelector: string;\n  onBeforeClose?: () => void;\n}\n\nexport const CreateCloseButton = (\n  props: Pick<\n    CloseButtonProps,\n    'isThemeDark' | 'targetSelector' | 'onBeforeClose'\n  >,\n) => {\n  const { isThemeDark = false, targetSelector, onBeforeClose } = props;\n\n  const MEDIUM = 768;\n  const button = document.createElement('button');\n\n  return new ElementBuilder(button)\n    .withClassName('alert-close-button')\n    .withAttribute('aria-label', 'Close alert')\n    .withAttribute('type', 'button')\n    .withHTML(iconClose)\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: token.spacing.lg,\n        right: token.spacing.lg,\n        color: theme.foreground(isThemeDark),\n        ['& rect, & path']: {\n          fill: 'currentColor',\n        },\n\n        [`@container (max-width: ${MEDIUM}px)`]: {\n          top: token.spacing.sm,\n          right: token.spacing.sm,\n        },\n      },\n    })\n    .on('click', () => {\n      if (typeof onBeforeClose === 'function') onBeforeClose();\n      const wrapper = button.closest(targetSelector);\n      if (wrapper instanceof HTMLElement)\n        shrinkThenRemove({ container: wrapper });\n    })\n    .build();\n};\n"],"names":["ElementBuilder","iconClose","token","theme","shrinkThenRemove"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,oBAAoB,CAC/B,UAIG;AACH,QAAM,EAAE,cAAc,OAAO,gBAAgB,kBAAkB;AAE/D,QAAM,SAAS;AACf,QAAM,SAAS,SAAS,cAAc,QAAQ;AAE9C,SAAO,IAAIA,kBAAAA,eAAe,MAAM,EAC7B,cAAc,oBAAoB,EAClC,cAAc,cAAc,aAAa,EACzC,cAAc,QAAQ,QAAQ,EAC9B,SAASC,SAAAA,KAAS,EAClB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,KAAKC,iBAAM,QAAQ;AAAA,MACnB,OAAOA,iBAAM,QAAQ;AAAA,MACrB,OAAOC,MAAAA,MAAM,WAAW,WAAW;AAAA,MACnC,CAAC,gBAAgB,GAAG;AAAA,QAClB,MAAM;AAAA,MAAA;AAAA,MAGR,CAAC,0BAA0B,MAAM,KAAK,GAAG;AAAA,QACvC,KAAKD,iBAAM,QAAQ;AAAA,QACnB,OAAOA,iBAAM,QAAQ;AAAA,MAAA;AAAA,IACvB;AAAA,EACF,CACD,EACA,GAAG,SAAS,MAAM;AACjB,QAAI,OAAO,kBAAkB,WAAY,eAAA;AACzC,UAAM,UAAU,OAAO,QAAQ,cAAc;AAC7C,QAAI,mBAAmB;AACrBE,iCAAiB,EAAE,WAAW,SAAS;AAAA,EAC3C,CAAC,EACA,MAAA;AACL;;"}
+{"version":3,"file":"closeButton.js","sources":["../../../../source/composite/alert/elements/closeButton.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport { shrinkThenRemove } from '@universityofmaryland/web-utilities-library/animation';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport { close as iconClose } from '@universityofmaryland/web-icons-library/controls';\nimport { AlertTextProps } from './text';\n\nexport interface CloseButtonProps extends AlertTextProps {\n  targetSelector: string;\n  onBeforeClose?: () => void;\n}\n\nexport const CreateCloseButton = (\n  props: Pick<\n    CloseButtonProps,\n    'isThemeDark' | 'targetSelector' | 'onBeforeClose'\n  >,\n) => {\n  const { isThemeDark = false, targetSelector, onBeforeClose } = props;\n\n  const MEDIUM = 768;\n  const button = document.createElement('button');\n\n  return new ElementBuilder(button)\n    .withClassName('alert-close-button')\n    .withAttribute('aria-label', 'Close alert')\n    .withAttribute('type', 'button')\n    .withHTML(iconClose)\n    .withStyles({\n      element: {\n        position: 'absolute',\n        top: token.spacing.lg,\n        right: token.spacing.lg,\n        color: theme.foreground(isThemeDark),\n        ['& rect, & path']: {\n          fill: 'currentColor',\n        },\n\n        [`@container (max-width: ${MEDIUM}px)`]: {\n          top: token.spacing.sm,\n          right: token.spacing.sm,\n        },\n      },\n    })\n    .on('click', () => {\n      if (typeof onBeforeClose === 'function') onBeforeClose();\n      const wrapper = button.closest(targetSelector);\n      if (wrapper instanceof HTMLElement)\n        shrinkThenRemove({ container: wrapper });\n    })\n    .build();\n};\n"],"names":["iconClose"],"mappings":";;;;;AAYO,MAAM,oBAAoB,CAC/B,UAIG;AACH,QAAM,EAAE,cAAc,OAAO,gBAAgB,kBAAkB;AAE/D,QAAM,SAAS;AACf,QAAM,SAAS,SAAS,cAAc,QAAQ;AAE9C,SAAO,IAAI,eAAe,MAAM,EAC7B,cAAc,oBAAoB,EAClC,cAAc,cAAc,aAAa,EACzC,cAAc,QAAQ,QAAQ,EAC9B,SAASA,KAAS,EAClB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,KAAK,MAAM,QAAQ;AAAA,MACnB,OAAO,MAAM,QAAQ;AAAA,MACrB,OAAO,MAAM,WAAW,WAAW;AAAA,MACnC,CAAC,gBAAgB,GAAG;AAAA,QAClB,MAAM;AAAA,MAAA;AAAA,MAGR,CAAC,0BAA0B,MAAM,KAAK,GAAG;AAAA,QACvC,KAAK,MAAM,QAAQ;AAAA,QACnB,OAAO,MAAM,QAAQ;AAAA,MAAA;AAAA,IACvB;AAAA,EACF,CACD,EACA,GAAG,SAAS,MAAM;AACjB,QAAI,OAAO,kBAAkB,WAAY,eAAA;AACzC,UAAM,UAAU,OAAO,QAAQ,cAAc;AAC7C,QAAI,mBAAmB;AACrB,uBAAiB,EAAE,WAAW,SAAS;AAAA,EAC3C,CAAC,EACA,MAAA;AACL;"}

package/dist/composite/alert/elements/text.js

@@ -1,72 +1,49 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const webBuilderLibrary = require("@universityofmaryland/web-builder-library");
-const token = require("@universityofmaryland/web-token-library");
-const animation = require("@universityofmaryland/web-styles-library/animation");
-const typography = require("@universityofmaryland/web-styles-library/typography");
-const layout = require("@universityofmaryland/web-styles-library/layout");
-const elementStyles = require("@universityofmaryland/web-styles-library/element");
-const theme = require("@universityofmaryland/web-utilities-library/theme");
-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 animation__namespace = /* @__PURE__ */ _interopNamespaceDefault(animation);
-const typography__namespace = /* @__PURE__ */ _interopNamespaceDefault(typography);
-const layout__namespace = /* @__PURE__ */ _interopNamespaceDefault(layout);
-const elementStyles__namespace = /* @__PURE__ */ _interopNamespaceDefault(elementStyles);
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import * as token from "@universityofmaryland/web-token-library";
+import * as animation from "@universityofmaryland/web-styles-library/animation";
+import * as typography from "@universityofmaryland/web-styles-library/typography";
+import * as layout from "@universityofmaryland/web-styles-library/layout";
+import * as elementStyles from "@universityofmaryland/web-styles-library/element";
+import { theme } from "@universityofmaryland/web-utilities-library/theme";
 const createHeadline = (props) => {
   const { headline, isThemeDark } = props;
   if (!headline) return;
   const styleElements = {
-    ...typography__namespace.sans.compose("large", {
-      theme: theme.theme.fontColor(isThemeDark)
+    ...typography.sans.compose("large", {
+      theme: theme.fontColor(isThemeDark)
     }),
-    ...animation__namespace.line.composeSlideUnder({
-      color: theme.theme.foreground(isThemeDark)
+    ...animation.line.composeSlideUnder({
+      color: theme.foreground(isThemeDark)
     })
   };
-  return new webBuilderLibrary.ElementBuilder(headline).styled(styleElements).withStyles({
+  return new ElementBuilder(headline).styled(styleElements).withStyles({
     element: {
-      paddingRight: token__namespace.spacing.md
+      paddingRight: token.spacing.md
     },
-    siblingAfter: { marginTop: token__namespace.spacing.sm }
+    siblingAfter: { marginTop: token.spacing.sm }
   }).build();
 };
 const createText = (props) => {
   const { text, isThemeDark } = props;
   if (!text) return;
-  return new webBuilderLibrary.ElementBuilder(text).styled(
-    elementStyles__namespace.text.rich.composeSimple({
-      theme: theme.theme.fontColor(isThemeDark)
+  return new ElementBuilder(text).styled(
+    elementStyles.text.rich.composeSimple({
+      theme: theme.fontColor(isThemeDark)
     })
   ).withStyles({
     element: {
       fontWeight: 500
     },
-    siblingAfter: { marginTop: token__namespace.spacing.sm }
+    siblingAfter: { marginTop: token.spacing.sm }
   }).build();
 };
 const createActions = (props) => {
   const { actions } = props;
   if (!actions) return;
-  return new webBuilderLibrary.ElementBuilder(actions).styled(layout__namespace.grid.inline.tabletRows).withStyles({
+  return new ElementBuilder(actions).styled(layout.grid.inline.tabletRows).withStyles({
     element: {
       [`* + &`]: {
-        marginTop: token__namespace.spacing.sm
+        marginTop: token.spacing.sm
       }
     }
   }).build();
@@ -79,11 +56,13 @@ const CreateAlertText = (props) => {
   const childElements = [headlineModel, textModel, actionsModel].filter(
     Boolean
   );
-  return new webBuilderLibrary.ElementBuilder().withClassName("wrapper").withChildren(...childElements).withStyles({
+  return new ElementBuilder().withClassName("wrapper").withChildren(...childElements).withStyles({
     element: {
-      maxWidth: token__namespace.spacing.maxWidth.small
+      maxWidth: token.spacing.maxWidth.small
     }
   }).build();
 };
-exports.CreateAlertText = CreateAlertText;
+export {
+  CreateAlertText
+};
 //# sourceMappingURL=text.js.map

package/dist/composite/alert/elements/text.js.map

@@ -1 +1 @@
-{"version":3,"file":"text.js","sources":["../../../../source/composite/alert/elements/text.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport type { ElementModel } from '../../../_types';\n\nexport interface AlertTextProps {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n}\n\nconst createHeadline = (\n  props: Pick<AlertTextProps, 'headline' | 'isThemeDark'>,\n) => {\n  const { headline, isThemeDark } = props;\n  if (!headline) return;\n\n  const styleElements = {\n    ...typography.sans.compose('large', {\n      theme: theme.fontColor(isThemeDark),\n    }),\n    ...animation.line.composeSlideUnder({\n      color: theme.foreground(isThemeDark),\n    }),\n  };\n\n  return new ElementBuilder(headline)\n    .styled(styleElements)\n    .withStyles({\n      element: {\n        paddingRight: token.spacing.md,\n      },\n      siblingAfter: { marginTop: token.spacing.sm },\n    })\n    .build();\n};\n\nconst createText = (props: Pick<AlertTextProps, 'text' | 'isThemeDark'>) => {\n  const { text, isThemeDark } = props;\n  if (!text) return;\n\n  return new ElementBuilder(text)\n    .styled(\n      elementStyles.text.rich.composeSimple({\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        fontWeight: 500,\n      },\n      siblingAfter: { marginTop: token.spacing.sm },\n    })\n    .build();\n};\n\nconst createActions = (props: Pick<AlertTextProps, 'actions'>) => {\n  const { actions } = props;\n  if (!actions) return;\n\n  return new ElementBuilder(actions)\n    .styled(layout.grid.inline.tabletRows)\n    .withStyles({\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n      },\n    })\n    .build();\n};\n\nexport const CreateAlertText = (\n  props: Pick<AlertTextProps, 'headline' | 'text' | 'actions' | 'isThemeDark'>,\n) => {\n  const { headline, text, actions, isThemeDark } = props;\n\n  const headlineModel = createHeadline({ headline, isThemeDark });\n  const textModel = createText({ text, isThemeDark });\n  const actionsModel = createActions({ actions });\n\n  const childElements = [headlineModel, textModel, actionsModel].filter(\n    Boolean,\n  ) as ElementModel[];\n\n  return new ElementBuilder()\n    .withClassName('wrapper')\n    .withChildren(...childElements)\n    .withStyles({\n      element: {\n        maxWidth: token.spacing.maxWidth.small,\n      },\n    })\n    .build();\n};\n"],"names":["typography","theme","animation","ElementBuilder","token","elementStyles","layout"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,MAAM,iBAAiB,CACrB,UACG;AACH,QAAM,EAAE,UAAU,YAAA,IAAgB;AAClC,MAAI,CAAC,SAAU;AAEf,QAAM,gBAAgB;AAAA,IACpB,GAAGA,sBAAW,KAAK,QAAQ,SAAS;AAAA,MAClC,OAAOC,MAAAA,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,IACD,GAAGC,qBAAU,KAAK,kBAAkB;AAAA,MAClC,OAAOD,MAAAA,MAAM,WAAW,WAAW;AAAA,IAAA,CACpC;AAAA,EAAA;AAGH,SAAO,IAAIE,kBAAAA,eAAe,QAAQ,EAC/B,OAAO,aAAa,EACpB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,cAAcC,iBAAM,QAAQ;AAAA,IAAA;AAAA,IAE9B,cAAc,EAAE,WAAWA,iBAAM,QAAQ,GAAA;AAAA,EAAG,CAC7C,EACA,MAAA;AACL;AAEA,MAAM,aAAa,CAAC,UAAwD;AAC1E,QAAM,EAAE,MAAM,YAAA,IAAgB;AAC9B,MAAI,CAAC,KAAM;AAEX,SAAO,IAAID,kBAAAA,eAAe,IAAI,EAC3B;AAAA,IACCE,yBAAc,KAAK,KAAK,cAAc;AAAA,MACpC,OAAOJ,MAAAA,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,YAAY;AAAA,IAAA;AAAA,IAEd,cAAc,EAAE,WAAWG,iBAAM,QAAQ,GAAA;AAAA,EAAG,CAC7C,EACA,MAAA;AACL;AAEA,MAAM,gBAAgB,CAAC,UAA2C;AAChE,QAAM,EAAE,YAAY;AACpB,MAAI,CAAC,QAAS;AAEd,SAAO,IAAID,kBAAAA,eAAe,OAAO,EAC9B,OAAOG,kBAAO,KAAK,OAAO,UAAU,EACpC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,OAAO,GAAG;AAAA,QACT,WAAWF,iBAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEO,MAAM,kBAAkB,CAC7B,UACG;AACH,QAAM,EAAE,UAAU,MAAM,SAAS,gBAAgB;AAEjD,QAAM,gBAAgB,eAAe,EAAE,UAAU,aAAa;AAC9D,QAAM,YAAY,WAAW,EAAE,MAAM,aAAa;AAClD,QAAM,eAAe,cAAc,EAAE,SAAS;AAE9C,QAAM,gBAAgB,CAAC,eAAe,WAAW,YAAY,EAAE;AAAA,IAC7D;AAAA,EAAA;AAGF,SAAO,IAAID,kBAAAA,eAAA,EACR,cAAc,SAAS,EACvB,aAAa,GAAG,aAAa,EAC7B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAUC,iBAAM,QAAQ,SAAS;AAAA,IAAA;AAAA,EACnC,CACD,EACA,MAAA;AACL;;"}
+{"version":3,"file":"text.js","sources":["../../../../source/composite/alert/elements/text.ts"],"sourcesContent":["import { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as token from '@universityofmaryland/web-token-library';\nimport * as animation from '@universityofmaryland/web-styles-library/animation';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport * as layout from '@universityofmaryland/web-styles-library/layout';\nimport * as elementStyles from '@universityofmaryland/web-styles-library/element';\nimport { theme } from '@universityofmaryland/web-utilities-library/theme';\nimport type { ElementModel } from '../../../_types';\n\nexport interface AlertTextProps {\n  headline?: HTMLElement | null;\n  text?: HTMLElement | null;\n  actions?: HTMLElement | null;\n  isThemeDark?: boolean;\n}\n\nconst createHeadline = (\n  props: Pick<AlertTextProps, 'headline' | 'isThemeDark'>,\n) => {\n  const { headline, isThemeDark } = props;\n  if (!headline) return;\n\n  const styleElements = {\n    ...typography.sans.compose('large', {\n      theme: theme.fontColor(isThemeDark),\n    }),\n    ...animation.line.composeSlideUnder({\n      color: theme.foreground(isThemeDark),\n    }),\n  };\n\n  return new ElementBuilder(headline)\n    .styled(styleElements)\n    .withStyles({\n      element: {\n        paddingRight: token.spacing.md,\n      },\n      siblingAfter: { marginTop: token.spacing.sm },\n    })\n    .build();\n};\n\nconst createText = (props: Pick<AlertTextProps, 'text' | 'isThemeDark'>) => {\n  const { text, isThemeDark } = props;\n  if (!text) return;\n\n  return new ElementBuilder(text)\n    .styled(\n      elementStyles.text.rich.composeSimple({\n        theme: theme.fontColor(isThemeDark),\n      }),\n    )\n    .withStyles({\n      element: {\n        fontWeight: 500,\n      },\n      siblingAfter: { marginTop: token.spacing.sm },\n    })\n    .build();\n};\n\nconst createActions = (props: Pick<AlertTextProps, 'actions'>) => {\n  const { actions } = props;\n  if (!actions) return;\n\n  return new ElementBuilder(actions)\n    .styled(layout.grid.inline.tabletRows)\n    .withStyles({\n      element: {\n        [`* + &`]: {\n          marginTop: token.spacing.sm,\n        },\n      },\n    })\n    .build();\n};\n\nexport const CreateAlertText = (\n  props: Pick<AlertTextProps, 'headline' | 'text' | 'actions' | 'isThemeDark'>,\n) => {\n  const { headline, text, actions, isThemeDark } = props;\n\n  const headlineModel = createHeadline({ headline, isThemeDark });\n  const textModel = createText({ text, isThemeDark });\n  const actionsModel = createActions({ actions });\n\n  const childElements = [headlineModel, textModel, actionsModel].filter(\n    Boolean,\n  ) as ElementModel[];\n\n  return new ElementBuilder()\n    .withClassName('wrapper')\n    .withChildren(...childElements)\n    .withStyles({\n      element: {\n        maxWidth: token.spacing.maxWidth.small,\n      },\n    })\n    .build();\n};\n"],"names":[],"mappings":";;;;;;;AAgBA,MAAM,iBAAiB,CACrB,UACG;AACH,QAAM,EAAE,UAAU,YAAA,IAAgB;AAClC,MAAI,CAAC,SAAU;AAEf,QAAM,gBAAgB;AAAA,IACpB,GAAG,WAAW,KAAK,QAAQ,SAAS;AAAA,MAClC,OAAO,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,IACD,GAAG,UAAU,KAAK,kBAAkB;AAAA,MAClC,OAAO,MAAM,WAAW,WAAW;AAAA,IAAA,CACpC;AAAA,EAAA;AAGH,SAAO,IAAI,eAAe,QAAQ,EAC/B,OAAO,aAAa,EACpB,WAAW;AAAA,IACV,SAAS;AAAA,MACP,cAAc,MAAM,QAAQ;AAAA,IAAA;AAAA,IAE9B,cAAc,EAAE,WAAW,MAAM,QAAQ,GAAA;AAAA,EAAG,CAC7C,EACA,MAAA;AACL;AAEA,MAAM,aAAa,CAAC,UAAwD;AAC1E,QAAM,EAAE,MAAM,YAAA,IAAgB;AAC9B,MAAI,CAAC,KAAM;AAEX,SAAO,IAAI,eAAe,IAAI,EAC3B;AAAA,IACC,cAAc,KAAK,KAAK,cAAc;AAAA,MACpC,OAAO,MAAM,UAAU,WAAW;AAAA,IAAA,CACnC;AAAA,EAAA,EAEF,WAAW;AAAA,IACV,SAAS;AAAA,MACP,YAAY;AAAA,IAAA;AAAA,IAEd,cAAc,EAAE,WAAW,MAAM,QAAQ,GAAA;AAAA,EAAG,CAC7C,EACA,MAAA;AACL;AAEA,MAAM,gBAAgB,CAAC,UAA2C;AAChE,QAAM,EAAE,YAAY;AACpB,MAAI,CAAC,QAAS;AAEd,SAAO,IAAI,eAAe,OAAO,EAC9B,OAAO,OAAO,KAAK,OAAO,UAAU,EACpC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,CAAC,OAAO,GAAG;AAAA,QACT,WAAW,MAAM,QAAQ;AAAA,MAAA;AAAA,IAC3B;AAAA,EACF,CACD,EACA,MAAA;AACL;AAEO,MAAM,kBAAkB,CAC7B,UACG;AACH,QAAM,EAAE,UAAU,MAAM,SAAS,gBAAgB;AAEjD,QAAM,gBAAgB,eAAe,EAAE,UAAU,aAAa;AAC9D,QAAM,YAAY,WAAW,EAAE,MAAM,aAAa;AAClD,QAAM,eAAe,cAAc,EAAE,SAAS;AAE9C,QAAM,gBAAgB,CAAC,eAAe,WAAW,YAAY,EAAE;AAAA,IAC7D;AAAA,EAAA;AAGF,SAAO,IAAI,eAAA,EACR,cAAc,SAAS,EACvB,aAAa,GAAG,aAAa,EAC7B,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU,MAAM,QAAQ,SAAS;AAAA,IAAA;AAAA,EACnC,CACD,EACA,MAAA;AACL;"}

package/dist/composite/alert/globals.js

@@ -1,7 +1,7 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const BREAKPOINTS = {
   MEDIUM: 500
 };
-exports.BREAKPOINTS = BREAKPOINTS;
+export {
+  BREAKPOINTS
+};
 //# sourceMappingURL=globals.js.map

package/dist/composite/alert/globals.js.map

@@ -1 +1 @@
-{"version":3,"file":"globals.js","sources":["../../../source/composite/alert/globals.ts"],"sourcesContent":["export const BREAKPOINTS = {\n  MEDIUM: 500,\n};\n"],"names":[],"mappings":";;AAAO,MAAM,cAAc;AAAA,EACzB,QAAQ;AACV;;"}
+{"version":3,"file":"globals.js","sources":["../../../source/composite/alert/globals.ts"],"sourcesContent":["export const BREAKPOINTS = {\n  MEDIUM: 500,\n};\n"],"names":[],"mappings":"AAAO,MAAM,cAAc;AAAA,EACzB,QAAQ;AACV;"}

package/dist/composite/alert/index.d.ts

@@ -1,3 +1,3 @@
-export { default as page } from './page';
-export { default as site } from './site';
+export { createCompositeAlertPage as page } from './page';
+export { createCompositeAlertSite as site } from './site';
 //# sourceMappingURL=index.d.ts.map

package/dist/composite/alert/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC1D,OAAO,EAAE,wBAAwB,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/composite/alert/index.js

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

package/dist/composite/alert/index.js.map

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

package/dist/composite/alert/page.d.ts

@@ -3,6 +3,5 @@ export interface AlertPageProps extends AlertTextProps {
     isThemeLight?: boolean;
     isShowIcon?: boolean;
 }
-declare const _default: (props: AlertPageProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
-export default _default;
+export declare const createCompositeAlertPage: (props: AlertPageProps) => import('@universityofmaryland/web-builder-library').ElementModel<HTMLElement>;
 //# sourceMappingURL=page.d.ts.map

package/dist/composite/alert/page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/page.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgC,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAK/E,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;yBAkEe,OAAO,cAAc;AAArC,wBASa"}
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../../../source/composite/alert/page.ts"],"names":[],"mappings":"AAIA,OAAO,EAAgC,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAK/E,MAAM,WAAW,cAAe,SAAQ,cAAc;IACpD,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAkED,eAAO,MAAM,wBAAwB,GAAI,OAAO,cAAc,kFASlD,CAAC"}