@universityofmaryland/web-elements-library 1.3.7 → 1.4.1

package/dist/atomic/actions/icon.js

@@ -0,0 +1,98 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const index = require("../../model/elements/index.js");
+const icons = require("../../utilities/assets/icons.js");
+require("../../node_modules/postcss/lib/postcss.js");
+require("../../node_modules/postcss-nesting/dist/index.js");
+require("../../node_modules/postcss-js/index.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const icon = ({ ctaIcon, isThemeLight }) => {
+  const href = ctaIcon.getAttribute("href");
+  const message = `Open Link to ${href}`;
+  const hasIcon = ctaIcon.querySelector("svg");
+  const label = ctaIcon.getAttribute("aria-label") || message;
+  ctaIcon.setAttribute("aria-label", label);
+  if (!hasIcon) {
+    const isExternalLink = ctaIcon.getAttribute("target") === "_blank";
+    const isDownloadLink = ctaIcon.getAttribute("download") === "";
+    if (isExternalLink) {
+      ctaIcon.innerHTML = icons.NEW_WINDOW;
+    }
+    if (isDownloadLink) {
+      ctaIcon.innerHTML = icons.DOCUMENT;
+    }
+    if (!isExternalLink && !isDownloadLink) {
+      ctaIcon.innerHTML = icons.SHORT_ARROW;
+    }
+  }
+  const container = index.createDiv({
+    className: "actions-cta-icon",
+    elementStyles: {
+      element: {
+        position: "absolute",
+        bottom: Styles__namespace.token.spacing.sm,
+        right: Styles__namespace.token.spacing.sm,
+        zIndex: 9999,
+        ["& a"]: {
+          borderRadius: "50%",
+          height: "40px",
+          width: "40px",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: Styles__namespace.token.color.white,
+          transition: "background-color 0.3s ease-in-out",
+          ...isThemeLight && {
+            backgroundColor: `${Styles__namespace.token.color.gray.darker}`
+          }
+        },
+        ["& a:hover, & a:focus"]: {
+          backgroundColor: `${Styles__namespace.token.color.gray.darker}`,
+          border: `1px solid ${Styles__namespace.token.color.white}`,
+          ...isThemeLight && {
+            backgroundColor: `${Styles__namespace.token.color.white}`,
+            border: `1px solid ${Styles__namespace.token.color.gray.darker}`
+          },
+          [`& svg, & path`]: {
+            fill: Styles__namespace.token.color.white,
+            ...isThemeLight && {
+              fill: `${Styles__namespace.token.color.gray.darker}`
+            }
+          }
+        },
+        ["& svg"]: {
+          height: "15px",
+          width: "15px",
+          fill: Styles__namespace.token.color.gray.darker,
+          transition: "background-color 0.3s ease-in-out"
+        },
+        ["& svg, & path"]: {
+          fill: `${Styles__namespace.token.color.gray.darker}`,
+          ...isThemeLight && {
+            fill: `${Styles__namespace.token.color.white}`
+          }
+        }
+      }
+    }
+  });
+  container.element.appendChild(ctaIcon);
+  return container;
+};
+module.exports = icon;
+//# sourceMappingURL=icon.js.map

package/dist/atomic/actions/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sources":["../../../source/atomic/actions/icon.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { asset } from 'utilities';\n\ninterface ActionIconProps {\n  ctaIcon: HTMLElement;\n  isThemeLight?: boolean;\n}\n\nexport default ({ ctaIcon, isThemeLight }: ActionIconProps) => {\n  const href = ctaIcon.getAttribute('href');\n  const message = `Open Link to ${href}`;\n  const hasIcon = ctaIcon.querySelector('svg');\n  const label = ctaIcon.getAttribute('aria-label') || message;\n\n  ctaIcon.setAttribute('aria-label', label);\n\n  if (!hasIcon) {\n    const isExternalLink = ctaIcon.getAttribute('target') === '_blank';\n    const isDownloadLink = ctaIcon.getAttribute('download') === '';\n\n    if (isExternalLink) {\n      ctaIcon.innerHTML = asset.icon.NEW_WINDOW;\n    }\n\n    if (isDownloadLink) {\n      ctaIcon.innerHTML = asset.icon.DOCUMENT;\n    }\n\n    if (!isExternalLink && !isDownloadLink) {\n      ctaIcon.innerHTML = asset.icon.SHORT_ARROW;\n    }\n  }\n\n  const container = ElementModel.createDiv({\n    className: 'actions-cta-icon',\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        bottom: Styles.token.spacing.sm,\n        right: Styles.token.spacing.sm,\n        zIndex: 9999,\n\n        ['& a']: {\n          borderRadius: '50%',\n          height: '40px',\n          width: '40px',\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          backgroundColor: Styles.token.color.white,\n          transition: 'background-color 0.3s ease-in-out',\n\n          ...(isThemeLight && {\n            backgroundColor: `${Styles.token.color.gray.darker}`,\n          }),\n        },\n\n        ['& a:hover, & a:focus']: {\n          backgroundColor: `${Styles.token.color.gray.darker}`,\n          border: `1px solid ${Styles.token.color.white}`,\n\n          ...(isThemeLight && {\n            backgroundColor: `${Styles.token.color.white}`,\n            border: `1px solid ${Styles.token.color.gray.darker}`,\n          }),\n\n          [`& svg, & path`]: {\n            fill: Styles.token.color.white,\n\n            ...(isThemeLight && {\n              fill: `${Styles.token.color.gray.darker}`,\n            }),\n          },\n        },\n\n        ['& svg']: {\n          height: '15px',\n          width: '15px',\n          fill: Styles.token.color.gray.darker,\n          transition: 'background-color 0.3s ease-in-out',\n        },\n\n        ['& svg, & path']: {\n          fill: `${Styles.token.color.gray.darker}`,\n\n          ...(isThemeLight && {\n            fill: `${Styles.token.color.white}`,\n          }),\n        },\n      },\n    },\n  });\n\n  container.element.appendChild(ctaIcon);\n\n  return container;\n};\n"],"names":["asset.icon.NEW_WINDOW","asset.icon.DOCUMENT","asset.icon.SHORT_ARROW","ElementModel.createDiv","Styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAA,OAAe,CAAC,EAAE,SAAS,mBAAoC;AAC7D,QAAM,OAAO,QAAQ,aAAa,MAAM;AACxC,QAAM,UAAU,gBAAgB,IAAI;AACpC,QAAM,UAAU,QAAQ,cAAc,KAAK;AAC3C,QAAM,QAAQ,QAAQ,aAAa,YAAY,KAAK;AAEpD,UAAQ,aAAa,cAAc,KAAK;AAExC,MAAI,CAAC,SAAS;AACZ,UAAM,iBAAiB,QAAQ,aAAa,QAAQ,MAAM;AAC1D,UAAM,iBAAiB,QAAQ,aAAa,UAAU,MAAM;AAE5D,QAAI,gBAAgB;AAClB,cAAQ,YAAYA,MAAAA;AAAAA,IACtB;AAEA,QAAI,gBAAgB;AAClB,cAAQ,YAAYC,MAAAA;AAAAA,IACtB;AAEA,QAAI,CAAC,kBAAkB,CAAC,gBAAgB;AACtC,cAAQ,YAAYC,MAAAA;AAAAA,IACtB;AAAA,EACF;AAEA,QAAM,YAAYC,MAAAA,UAAuB;AAAA,IACvC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,QAAQC,kBAAO,MAAM,QAAQ;AAAA,QAC7B,OAAOA,kBAAO,MAAM,QAAQ;AAAA,QAC5B,QAAQ;AAAA,QAER,CAAC,KAAK,GAAG;AAAA,UACP,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,iBAAiBA,kBAAO,MAAM,MAAM;AAAA,UACpC,YAAY;AAAA,UAEZ,GAAI,gBAAgB;AAAA,YAClB,iBAAiB,GAAGA,kBAAO,MAAM,MAAM,KAAK,MAAM;AAAA,UAAA;AAAA,QACpD;AAAA,QAGF,CAAC,sBAAsB,GAAG;AAAA,UACxB,iBAAiB,GAAGA,kBAAO,MAAM,MAAM,KAAK,MAAM;AAAA,UAClD,QAAQ,aAAaA,kBAAO,MAAM,MAAM,KAAK;AAAA,UAE7C,GAAI,gBAAgB;AAAA,YAClB,iBAAiB,GAAGA,kBAAO,MAAM,MAAM,KAAK;AAAA,YAC5C,QAAQ,aAAaA,kBAAO,MAAM,MAAM,KAAK,MAAM;AAAA,UAAA;AAAA,UAGrD,CAAC,eAAe,GAAG;AAAA,YACjB,MAAMA,kBAAO,MAAM,MAAM;AAAA,YAEzB,GAAI,gBAAgB;AAAA,cAClB,MAAM,GAAGA,kBAAO,MAAM,MAAM,KAAK,MAAM;AAAA,YAAA;AAAA,UACzC;AAAA,QACF;AAAA,QAGF,CAAC,OAAO,GAAG;AAAA,UACT,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,MAAMA,kBAAO,MAAM,MAAM,KAAK;AAAA,UAC9B,YAAY;AAAA,QAAA;AAAA,QAGd,CAAC,eAAe,GAAG;AAAA,UACjB,MAAM,GAAGA,kBAAO,MAAM,MAAM,KAAK,MAAM;AAAA,UAEvC,GAAI,gBAAgB;AAAA,YAClB,MAAM,GAAGA,kBAAO,MAAM,MAAM,KAAK;AAAA,UAAA;AAAA,QACnC;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,YAAU,QAAQ,YAAY,OAAO;AAErC,SAAO;AACT;;"}

package/dist/atomic/actions/icon.mjs

@@ -0,0 +1,82 @@
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { createDiv } from "../../model/elements/index.mjs";
+import { NEW_WINDOW, DOCUMENT, SHORT_ARROW } from "../../utilities/assets/icons.mjs";
+import "../../node_modules/postcss/lib/postcss.mjs";
+import "../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../node_modules/postcss-js/index.mjs";
+const icon = ({ ctaIcon, isThemeLight }) => {
+  const href = ctaIcon.getAttribute("href");
+  const message = `Open Link to ${href}`;
+  const hasIcon = ctaIcon.querySelector("svg");
+  const label = ctaIcon.getAttribute("aria-label") || message;
+  ctaIcon.setAttribute("aria-label", label);
+  if (!hasIcon) {
+    const isExternalLink = ctaIcon.getAttribute("target") === "_blank";
+    const isDownloadLink = ctaIcon.getAttribute("download") === "";
+    if (isExternalLink) {
+      ctaIcon.innerHTML = NEW_WINDOW;
+    }
+    if (isDownloadLink) {
+      ctaIcon.innerHTML = DOCUMENT;
+    }
+    if (!isExternalLink && !isDownloadLink) {
+      ctaIcon.innerHTML = SHORT_ARROW;
+    }
+  }
+  const container = createDiv({
+    className: "actions-cta-icon",
+    elementStyles: {
+      element: {
+        position: "absolute",
+        bottom: Styles.token.spacing.sm,
+        right: Styles.token.spacing.sm,
+        zIndex: 9999,
+        ["& a"]: {
+          borderRadius: "50%",
+          height: "40px",
+          width: "40px",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: Styles.token.color.white,
+          transition: "background-color 0.3s ease-in-out",
+          ...isThemeLight && {
+            backgroundColor: `${Styles.token.color.gray.darker}`
+          }
+        },
+        ["& a:hover, & a:focus"]: {
+          backgroundColor: `${Styles.token.color.gray.darker}`,
+          border: `1px solid ${Styles.token.color.white}`,
+          ...isThemeLight && {
+            backgroundColor: `${Styles.token.color.white}`,
+            border: `1px solid ${Styles.token.color.gray.darker}`
+          },
+          [`& svg, & path`]: {
+            fill: Styles.token.color.white,
+            ...isThemeLight && {
+              fill: `${Styles.token.color.gray.darker}`
+            }
+          }
+        },
+        ["& svg"]: {
+          height: "15px",
+          width: "15px",
+          fill: Styles.token.color.gray.darker,
+          transition: "background-color 0.3s ease-in-out"
+        },
+        ["& svg, & path"]: {
+          fill: `${Styles.token.color.gray.darker}`,
+          ...isThemeLight && {
+            fill: `${Styles.token.color.white}`
+          }
+        }
+      }
+    }
+  });
+  container.element.appendChild(ctaIcon);
+  return container;
+};
+export {
+  icon as default
+};
+//# sourceMappingURL=icon.mjs.map

package/dist/atomic/actions/icon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.mjs","sources":["../../../source/atomic/actions/icon.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementModel } from 'model';\nimport { asset } from 'utilities';\n\ninterface ActionIconProps {\n  ctaIcon: HTMLElement;\n  isThemeLight?: boolean;\n}\n\nexport default ({ ctaIcon, isThemeLight }: ActionIconProps) => {\n  const href = ctaIcon.getAttribute('href');\n  const message = `Open Link to ${href}`;\n  const hasIcon = ctaIcon.querySelector('svg');\n  const label = ctaIcon.getAttribute('aria-label') || message;\n\n  ctaIcon.setAttribute('aria-label', label);\n\n  if (!hasIcon) {\n    const isExternalLink = ctaIcon.getAttribute('target') === '_blank';\n    const isDownloadLink = ctaIcon.getAttribute('download') === '';\n\n    if (isExternalLink) {\n      ctaIcon.innerHTML = asset.icon.NEW_WINDOW;\n    }\n\n    if (isDownloadLink) {\n      ctaIcon.innerHTML = asset.icon.DOCUMENT;\n    }\n\n    if (!isExternalLink && !isDownloadLink) {\n      ctaIcon.innerHTML = asset.icon.SHORT_ARROW;\n    }\n  }\n\n  const container = ElementModel.createDiv({\n    className: 'actions-cta-icon',\n    elementStyles: {\n      element: {\n        position: 'absolute',\n        bottom: Styles.token.spacing.sm,\n        right: Styles.token.spacing.sm,\n        zIndex: 9999,\n\n        ['& a']: {\n          borderRadius: '50%',\n          height: '40px',\n          width: '40px',\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          backgroundColor: Styles.token.color.white,\n          transition: 'background-color 0.3s ease-in-out',\n\n          ...(isThemeLight && {\n            backgroundColor: `${Styles.token.color.gray.darker}`,\n          }),\n        },\n\n        ['& a:hover, & a:focus']: {\n          backgroundColor: `${Styles.token.color.gray.darker}`,\n          border: `1px solid ${Styles.token.color.white}`,\n\n          ...(isThemeLight && {\n            backgroundColor: `${Styles.token.color.white}`,\n            border: `1px solid ${Styles.token.color.gray.darker}`,\n          }),\n\n          [`& svg, & path`]: {\n            fill: Styles.token.color.white,\n\n            ...(isThemeLight && {\n              fill: `${Styles.token.color.gray.darker}`,\n            }),\n          },\n        },\n\n        ['& svg']: {\n          height: '15px',\n          width: '15px',\n          fill: Styles.token.color.gray.darker,\n          transition: 'background-color 0.3s ease-in-out',\n        },\n\n        ['& svg, & path']: {\n          fill: `${Styles.token.color.gray.darker}`,\n\n          ...(isThemeLight && {\n            fill: `${Styles.token.color.white}`,\n          }),\n        },\n      },\n    },\n  });\n\n  container.element.appendChild(ctaIcon);\n\n  return container;\n};\n"],"names":["asset.icon.NEW_WINDOW","asset.icon.DOCUMENT","asset.icon.SHORT_ARROW","ElementModel.createDiv"],"mappings":";;;;;;AASA,MAAA,OAAe,CAAC,EAAE,SAAS,mBAAoC;AAC7D,QAAM,OAAO,QAAQ,aAAa,MAAM;AACxC,QAAM,UAAU,gBAAgB,IAAI;AACpC,QAAM,UAAU,QAAQ,cAAc,KAAK;AAC3C,QAAM,QAAQ,QAAQ,aAAa,YAAY,KAAK;AAEpD,UAAQ,aAAa,cAAc,KAAK;AAExC,MAAI,CAAC,SAAS;AACZ,UAAM,iBAAiB,QAAQ,aAAa,QAAQ,MAAM;AAC1D,UAAM,iBAAiB,QAAQ,aAAa,UAAU,MAAM;AAE5D,QAAI,gBAAgB;AAClB,cAAQ,YAAYA;AAAAA,IACtB;AAEA,QAAI,gBAAgB;AAClB,cAAQ,YAAYC;AAAAA,IACtB;AAEA,QAAI,CAAC,kBAAkB,CAAC,gBAAgB;AACtC,cAAQ,YAAYC;AAAAA,IACtB;AAAA,EACF;AAEA,QAAM,YAAYC,UAAuB;AAAA,IACvC,WAAW;AAAA,IACX,eAAe;AAAA,MACb,SAAS;AAAA,QACP,UAAU;AAAA,QACV,QAAQ,OAAO,MAAM,QAAQ;AAAA,QAC7B,OAAO,OAAO,MAAM,QAAQ;AAAA,QAC5B,QAAQ;AAAA,QAER,CAAC,KAAK,GAAG;AAAA,UACP,cAAc;AAAA,UACd,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,iBAAiB,OAAO,MAAM,MAAM;AAAA,UACpC,YAAY;AAAA,UAEZ,GAAI,gBAAgB;AAAA,YAClB,iBAAiB,GAAG,OAAO,MAAM,MAAM,KAAK,MAAM;AAAA,UAAA;AAAA,QACpD;AAAA,QAGF,CAAC,sBAAsB,GAAG;AAAA,UACxB,iBAAiB,GAAG,OAAO,MAAM,MAAM,KAAK,MAAM;AAAA,UAClD,QAAQ,aAAa,OAAO,MAAM,MAAM,KAAK;AAAA,UAE7C,GAAI,gBAAgB;AAAA,YAClB,iBAAiB,GAAG,OAAO,MAAM,MAAM,KAAK;AAAA,YAC5C,QAAQ,aAAa,OAAO,MAAM,MAAM,KAAK,MAAM;AAAA,UAAA;AAAA,UAGrD,CAAC,eAAe,GAAG;AAAA,YACjB,MAAM,OAAO,MAAM,MAAM;AAAA,YAEzB,GAAI,gBAAgB;AAAA,cAClB,MAAM,GAAG,OAAO,MAAM,MAAM,KAAK,MAAM;AAAA,YAAA;AAAA,UACzC;AAAA,QACF;AAAA,QAGF,CAAC,OAAO,GAAG;AAAA,UACT,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,MAAM,OAAO,MAAM,MAAM,KAAK;AAAA,UAC9B,YAAY;AAAA,QAAA;AAAA,QAGd,CAAC,eAAe,GAAG;AAAA,UACjB,MAAM,GAAG,OAAO,MAAM,MAAM,KAAK,MAAM;AAAA,UAEvC,GAAI,gBAAgB;AAAA,YAClB,MAAM,GAAG,OAAO,MAAM,MAAM,KAAK;AAAA,UAAA;AAAA,QACnC;AAAA,MACF;AAAA,IACF;AAAA,EACF,CACD;AAED,YAAU,QAAQ,YAAY,OAAO;AAErC,SAAO;AACT;"}

package/dist/atomic/actions/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const text = require("./text.js");
+const icon = require("./icon.js");
+exports.options = text.options;
+exports.outline = text.outline;
+exports.primary = text.primary;
+exports.secondary = text.secondary;
+exports.icon = icon;
+//# sourceMappingURL=index.js.map

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

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

package/dist/atomic/actions/index.mjs

@@ -0,0 +1,10 @@
+import { options, outline, primary, secondary } from "./text.mjs";
+import { default as default2 } from "./icon.mjs";
+export {
+  default2 as icon,
+  options,
+  outline,
+  primary,
+  secondary
+};
+//# sourceMappingURL=index.mjs.map

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

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

package/dist/atomic/actions/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../source/atomic/actions/text.ts"],"names":[],"mappings":"AAIA,UAAU,YAAY;IACpB,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACrC;AAED,UAAU,WAAY,SAAQ,YAAY;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAChC;AA8ID,eAAO,MAAM,OAAO,UAAW,YAAY;;;CAAoC,CAAC;AAChF,eAAO,MAAM,SAAS,UAAW,YAAY;;;CACV,CAAC;AACpC,eAAO,MAAM,OAAO,UAAW,YAAY;;;CAAoC,CAAC;AAEhF,eAAO,MAAM,OAAO,UAAW,WAAW;;;CAuCzC,CAAC"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../source/atomic/actions/text.ts"],"names":[],"mappings":"AAIA,UAAU,YAAY;IACpB,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACrC;AAED,UAAU,WAAY,SAAQ,YAAY;IACxC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAChC;AA8ID,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY;;;CAAoC,CAAC;AAChF,eAAO,MAAM,SAAS,GAAI,OAAO,YAAY;;;CACV,CAAC;AACpC,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY;;;CAAoC,CAAC;AAEhF,eAAO,MAAM,OAAO,GAAI,OAAO,WAAW;;;CAuCzC,CAAC"}

package/dist/atomic/actions/text.js

@@ -0,0 +1,169 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Styles = require("@universityofmaryland/web-styles-library");
+const icons = require("../../utilities/assets/icons.js");
+const create = require("../../utilities/markup/create.js");
+const get = require("../../utilities/markup/get.js");
+require("../../node_modules/postcss/lib/postcss.js");
+require("../../node_modules/postcss-nesting/dist/index.js");
+require("../../node_modules/postcss-js/index.js");
+require("../../model/modifiers/index.js");
+const actions = require("../../model/elements/actions.js");
+const headline = require("../../model/elements/headline.js");
+const layout = require("../../model/elements/layout.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 ICONS = {
+  email: icons.EMAIL,
+  newWindow: icons.NEW_WINDOW,
+  document: icons.DOCUMENT,
+  fearless: icons.FEARLESS
+};
+function insertIcon(element, svg) {
+  const icon = create.svgFromString(svg);
+  if (icon) element.insertBefore(icon, element.firstChild);
+}
+function createLinkIcon(element, type) {
+  const existingIcon = get.icon({ element });
+  if (existingIcon) {
+    element.insertBefore(existingIcon, element.firstChild);
+    return;
+  }
+  const href = element.getAttribute("href");
+  const isExternalTab = element.getAttribute("target") === "_blank";
+  const isDownload = element.getAttribute("download") !== null;
+  const isMail = href?.includes("mailto:");
+  if (isMail) {
+    insertIcon(element, ICONS.email);
+  } else if (isExternalTab) {
+    insertIcon(element, ICONS.newWindow);
+  } else if (isDownload) {
+    insertIcon(element, ICONS.document);
+  } else if (type === "secondary") {
+    insertIcon(element, ICONS.fearless);
+  }
+}
+function createElementWithStyle(actionFn, props) {
+  const result = actionFn({
+    element: props.element,
+    elementStyles: props.elementStyles
+  });
+  return { element: result.element, styles: result.styles };
+}
+function createElement(type, props) {
+  createLinkIcon(props.element, type);
+  const actions$1 = {
+    primary: {
+      default: actions.primary,
+      large: actions.primaryLarge
+    },
+    secondary: {
+      default: actions.secondary,
+      large: actions.secondaryLarge,
+      dark: actions.secondaryWhite,
+      gold: actions.secondaryGold
+    },
+    outline: {
+      default: actions.outline,
+      large: actions.outlineLarge,
+      dark: actions.outlineWhite
+    }
+  };
+  const typeActions = actions$1[type];
+  if (props.isThemeGold && typeActions.gold) {
+    return createElementWithStyle(typeActions.gold, props);
+  }
+  if (props.isThemeDark && typeActions.dark) {
+    return createElementWithStyle(typeActions.dark, props);
+  }
+  if (props.isSizeLarge && typeActions.large) {
+    return createElementWithStyle(typeActions.large, props);
+  }
+  return createElementWithStyle(typeActions.default, props);
+}
+const createPlainTextContainer = (props) => {
+  const { isTypeSecondary } = props;
+  return layout.gridStacked({
+    element: document.createElement("div"),
+    elementStyles: isTypeSecondary ? {} : { element: { alignItems: "center" } }
+  });
+};
+const createPlainText = (props) => {
+  const { isThemeDark, isTypeSecondary, plainText } = props;
+  const plainTextStyles = {
+    element: {
+      ...isThemeDark ? Styles__namespace.element.text.link.white : Styles__namespace.element.text.link.red,
+      marginTop: `${Styles__namespace.token.spacing.min}`
+    }
+  };
+  const plainTextSecondaryStyles = {
+    element: {
+      ...isThemeDark ? Styles__namespace.element.text.link.white : Styles__namespace.element.text.link.red,
+      marginTop: `${Styles__namespace.token.spacing.min}`,
+      marginLeft: `${Styles__namespace.token.spacing.lg}`,
+      alignSelf: "baseline"
+    }
+  };
+  if (plainText) {
+    return headline.sansMin({
+      element: plainText,
+      isThemeDark,
+      elementStyles: isTypeSecondary ? plainTextSecondaryStyles : plainTextStyles
+    });
+  }
+};
+const primary = (props) => createElement("primary", props);
+const secondary = (props) => createElement("secondary", props);
+const outline = (props) => createElement("outline", props);
+const options = (props) => {
+  const { plainText, isTypePrimary, isTypeSecondary, isTypeOutline } = props;
+  const container = document.createElement("div");
+  let styles = "";
+  if (isTypePrimary) {
+    const result = primary(props);
+    container.appendChild(result.element);
+    styles = result.styles;
+  }
+  if (isTypeSecondary) {
+    const result = secondary(props);
+    container.appendChild(result.element);
+    styles = result.styles;
+  }
+  if (isTypeOutline) {
+    const result = outline(props);
+    container.appendChild(result.element);
+    styles = result.styles;
+  }
+  if (plainText) {
+    const plainTextContainer = createPlainTextContainer(props);
+    const plainTextElement = createPlainText(props);
+    if (!plainTextElement) return { element: container, styles };
+    plainTextContainer.element.innerHTML = container.innerHTML;
+    plainTextContainer.element.appendChild(plainTextElement.element);
+    container.innerHTML = "";
+    container.appendChild(plainTextContainer.element);
+    styles += plainTextContainer.styles;
+    styles += plainTextElement.styles;
+  }
+  return { element: container, styles };
+};
+exports.options = options;
+exports.outline = outline;
+exports.primary = primary;
+exports.secondary = secondary;
+//# sourceMappingURL=text.js.map

package/dist/atomic/actions/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sources":["../../../source/atomic/actions/text.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport { ElementModel } from 'model';\n\ninterface ElementProps {\n  element: HTMLElement;\n  isThemeDark?: boolean;\n  isThemeGold?: boolean;\n  isSizeLarge?: boolean;\n  elementStyles?: Record<string, any>;\n}\n\ninterface OptionProps extends ElementProps {\n  isTypePrimary?: boolean;\n  isTypeSecondary?: boolean;\n  isTypeOutline?: boolean;\n  plainText?: HTMLElement | null;\n}\n\ntype ElementType = 'primary' | 'secondary' | 'outline';\ntype IconType = 'email' | 'newWindow' | 'document' | 'fearless';\n\ntype ActionFunction = (props: ElementProps) => {\n  element: HTMLElement;\n  styles: string;\n};\n\ntype ActionVariants = {\n  default: ActionFunction;\n  large?: ActionFunction;\n  dark?: ActionFunction;\n  gold?: ActionFunction;\n};\n\ntype Actions = Record<ElementType, ActionVariants>;\n\nconst ICONS: Record<IconType, string> = {\n  email: Utility.asset.icon.EMAIL,\n  newWindow: Utility.asset.icon.NEW_WINDOW,\n  document: Utility.asset.icon.DOCUMENT,\n  fearless: Utility.asset.icon.FEARLESS,\n};\n\nfunction insertIcon(element: HTMLElement, svg: string): void {\n  const icon = Utility.markup.create.svgFromString(svg);\n  if (icon) element.insertBefore(icon, element.firstChild);\n}\n\nfunction createLinkIcon(element: HTMLElement, type: ElementType): void {\n  const existingIcon = Utility.markup.get.icon({ element });\n  if (existingIcon) {\n    element.insertBefore(existingIcon, element.firstChild);\n    return;\n  }\n\n  const href = element.getAttribute('href');\n  const isExternalTab = element.getAttribute('target') === '_blank';\n  const isDownload = element.getAttribute('download') !== null;\n  const isMail = href?.includes('mailto:');\n\n  if (isMail) {\n    insertIcon(element, ICONS.email);\n  } else if (isExternalTab) {\n    insertIcon(element, ICONS.newWindow);\n  } else if (isDownload) {\n    insertIcon(element, ICONS.document);\n  } else if (type === 'secondary') {\n    insertIcon(element, ICONS.fearless);\n  }\n}\n\nfunction createElementWithStyle(\n  actionFn: (props: ElementProps) => { element: HTMLElement; styles: string },\n  props: ElementProps,\n) {\n  const result = actionFn({\n    element: props.element,\n    elementStyles: props.elementStyles,\n  });\n  return { element: result.element, styles: result.styles };\n}\n\nfunction createElement(type: ElementType, props: ElementProps) {\n  createLinkIcon(props.element, type);\n\n  const actions: Actions = {\n    primary: {\n      default: ElementModel.actions.primary,\n      large: ElementModel.actions.primaryLarge,\n    },\n    secondary: {\n      default: ElementModel.actions.secondary,\n      large: ElementModel.actions.secondaryLarge,\n      dark: ElementModel.actions.secondaryWhite,\n      gold: ElementModel.actions.secondaryGold,\n    },\n    outline: {\n      default: ElementModel.actions.outline,\n      large: ElementModel.actions.outlineLarge,\n      dark: ElementModel.actions.outlineWhite,\n    },\n  };\n\n  const typeActions = actions[type];\n\n  if (props.isThemeGold && typeActions.gold) {\n    return createElementWithStyle(typeActions.gold, props);\n  }\n  if (props.isThemeDark && typeActions.dark) {\n    return createElementWithStyle(typeActions.dark, props);\n  }\n  if (props.isSizeLarge && typeActions.large) {\n    return createElementWithStyle(typeActions.large, props);\n  }\n  return createElementWithStyle(typeActions.default, props);\n}\n\nconst createPlainTextContainer = (props: OptionProps) => {\n  const { isTypeSecondary } = props;\n\n  return ElementModel.layout.gridStacked({\n    element: document.createElement('div'),\n    elementStyles: isTypeSecondary ? {} : { element: { alignItems: 'center' } },\n  });\n};\n\nconst createPlainText = (props: OptionProps) => {\n  const { isThemeDark, isTypeSecondary, plainText } = props;\n  const plainTextStyles = {\n    element: {\n      ...(isThemeDark\n        ? Styles.element.text.link.white\n        : Styles.element.text.link.red),\n      marginTop: `${Styles.token.spacing.min}`,\n    },\n  };\n\n  const plainTextSecondaryStyles = {\n    element: {\n      ...(isThemeDark\n        ? Styles.element.text.link.white\n        : Styles.element.text.link.red),\n      marginTop: `${Styles.token.spacing.min}`,\n      marginLeft: `${Styles.token.spacing.lg}`,\n      alignSelf: 'baseline',\n    },\n  };\n\n  if (plainText) {\n    return ElementModel.headline.sansMin({\n      element: plainText,\n      isThemeDark,\n      elementStyles: isTypeSecondary\n        ? plainTextSecondaryStyles\n        : plainTextStyles,\n    });\n  }\n};\n\nexport const primary = (props: ElementProps) => createElement('primary', props);\nexport const secondary = (props: ElementProps) =>\n  createElement('secondary', props);\nexport const outline = (props: ElementProps) => createElement('outline', props);\n\nexport const options = (props: OptionProps) => {\n  const { plainText, isTypePrimary, isTypeSecondary, isTypeOutline } = props;\n  const container = document.createElement('div');\n  let styles = '';\n\n  if (isTypePrimary) {\n    const result = primary(props);\n    container.appendChild(result.element);\n    styles = result.styles;\n  }\n\n  if (isTypeSecondary) {\n    const result = secondary(props);\n    container.appendChild(result.element);\n    styles = result.styles;\n  }\n\n  if (isTypeOutline) {\n    const result = outline(props);\n    container.appendChild(result.element);\n    styles = result.styles;\n  }\n\n  if (plainText) {\n    const plainTextContainer = createPlainTextContainer(props);\n    const plainTextElement = createPlainText(props);\n    if (!plainTextElement) return { element: container, styles };\n\n    plainTextContainer.element.innerHTML = container.innerHTML;\n    plainTextContainer.element.appendChild(plainTextElement.element);\n    container.innerHTML = '';\n\n    container.appendChild(plainTextContainer.element);\n\n    styles += plainTextContainer.styles;\n    styles += plainTextElement.styles;\n  }\n\n  return { element: container, styles };\n};\n"],"names":["Utility.asset.icon.EMAIL","Utility.asset.icon.NEW_WINDOW","Utility.asset.icon.DOCUMENT","Utility.asset.icon.FEARLESS","Utility.markup.create.svgFromString","Utility.markup.get.icon","actions","ElementModel.actions.primary","ElementModel.actions.primaryLarge","ElementModel.actions.secondary","ElementModel.actions.secondaryLarge","ElementModel.actions.secondaryWhite","ElementModel.actions.secondaryGold","ElementModel.actions.outline","ElementModel.actions.outlineLarge","ElementModel.actions.outlineWhite","ElementModel.layout.gridStacked","Styles","ElementModel.headline.sansMin"],"mappings":"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"}

package/dist/atomic/actions/text.mjs

@@ -0,0 +1,152 @@
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { EMAIL, NEW_WINDOW, DOCUMENT, FEARLESS } from "../../utilities/assets/icons.mjs";
+import { svgFromString } from "../../utilities/markup/create.mjs";
+import { icon } from "../../utilities/markup/get.mjs";
+import "../../node_modules/postcss/lib/postcss.mjs";
+import "../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../node_modules/postcss-js/index.mjs";
+import "../../model/modifiers/index.mjs";
+import { outlineWhite, outlineLarge, outline as outline$1, secondaryGold, secondaryWhite, secondaryLarge, secondary as secondary$1, primaryLarge, primary as primary$1 } from "../../model/elements/actions.mjs";
+import { sansMin } from "../../model/elements/headline.mjs";
+import { gridStacked } from "../../model/elements/layout.mjs";
+const ICONS = {
+  email: EMAIL,
+  newWindow: NEW_WINDOW,
+  document: DOCUMENT,
+  fearless: FEARLESS
+};
+function insertIcon(element, svg) {
+  const icon2 = svgFromString(svg);
+  if (icon2) element.insertBefore(icon2, element.firstChild);
+}
+function createLinkIcon(element, type) {
+  const existingIcon = icon({ element });
+  if (existingIcon) {
+    element.insertBefore(existingIcon, element.firstChild);
+    return;
+  }
+  const href = element.getAttribute("href");
+  const isExternalTab = element.getAttribute("target") === "_blank";
+  const isDownload = element.getAttribute("download") !== null;
+  const isMail = href?.includes("mailto:");
+  if (isMail) {
+    insertIcon(element, ICONS.email);
+  } else if (isExternalTab) {
+    insertIcon(element, ICONS.newWindow);
+  } else if (isDownload) {
+    insertIcon(element, ICONS.document);
+  } else if (type === "secondary") {
+    insertIcon(element, ICONS.fearless);
+  }
+}
+function createElementWithStyle(actionFn, props) {
+  const result = actionFn({
+    element: props.element,
+    elementStyles: props.elementStyles
+  });
+  return { element: result.element, styles: result.styles };
+}
+function createElement(type, props) {
+  createLinkIcon(props.element, type);
+  const actions = {
+    primary: {
+      default: primary$1,
+      large: primaryLarge
+    },
+    secondary: {
+      default: secondary$1,
+      large: secondaryLarge,
+      dark: secondaryWhite,
+      gold: secondaryGold
+    },
+    outline: {
+      default: outline$1,
+      large: outlineLarge,
+      dark: outlineWhite
+    }
+  };
+  const typeActions = actions[type];
+  if (props.isThemeGold && typeActions.gold) {
+    return createElementWithStyle(typeActions.gold, props);
+  }
+  if (props.isThemeDark && typeActions.dark) {
+    return createElementWithStyle(typeActions.dark, props);
+  }
+  if (props.isSizeLarge && typeActions.large) {
+    return createElementWithStyle(typeActions.large, props);
+  }
+  return createElementWithStyle(typeActions.default, props);
+}
+const createPlainTextContainer = (props) => {
+  const { isTypeSecondary } = props;
+  return gridStacked({
+    element: document.createElement("div"),
+    elementStyles: isTypeSecondary ? {} : { element: { alignItems: "center" } }
+  });
+};
+const createPlainText = (props) => {
+  const { isThemeDark, isTypeSecondary, plainText } = props;
+  const plainTextStyles = {
+    element: {
+      ...isThemeDark ? Styles.element.text.link.white : Styles.element.text.link.red,
+      marginTop: `${Styles.token.spacing.min}`
+    }
+  };
+  const plainTextSecondaryStyles = {
+    element: {
+      ...isThemeDark ? Styles.element.text.link.white : Styles.element.text.link.red,
+      marginTop: `${Styles.token.spacing.min}`,
+      marginLeft: `${Styles.token.spacing.lg}`,
+      alignSelf: "baseline"
+    }
+  };
+  if (plainText) {
+    return sansMin({
+      element: plainText,
+      isThemeDark,
+      elementStyles: isTypeSecondary ? plainTextSecondaryStyles : plainTextStyles
+    });
+  }
+};
+const primary = (props) => createElement("primary", props);
+const secondary = (props) => createElement("secondary", props);
+const outline = (props) => createElement("outline", props);
+const options = (props) => {
+  const { plainText, isTypePrimary, isTypeSecondary, isTypeOutline } = props;
+  const container = document.createElement("div");
+  let styles = "";
+  if (isTypePrimary) {
+    const result = primary(props);
+    container.appendChild(result.element);
+    styles = result.styles;
+  }
+  if (isTypeSecondary) {
+    const result = secondary(props);
+    container.appendChild(result.element);
+    styles = result.styles;
+  }
+  if (isTypeOutline) {
+    const result = outline(props);
+    container.appendChild(result.element);
+    styles = result.styles;
+  }
+  if (plainText) {
+    const plainTextContainer = createPlainTextContainer(props);
+    const plainTextElement = createPlainText(props);
+    if (!plainTextElement) return { element: container, styles };
+    plainTextContainer.element.innerHTML = container.innerHTML;
+    plainTextContainer.element.appendChild(plainTextElement.element);
+    container.innerHTML = "";
+    container.appendChild(plainTextContainer.element);
+    styles += plainTextContainer.styles;
+    styles += plainTextElement.styles;
+  }
+  return { element: container, styles };
+};
+export {
+  options,
+  outline,
+  primary,
+  secondary
+};
+//# sourceMappingURL=text.mjs.map

package/dist/atomic/actions/text.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.mjs","sources":["../../../source/atomic/actions/text.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport * as Utility from 'utilities';\nimport { ElementModel } from 'model';\n\ninterface ElementProps {\n  element: HTMLElement;\n  isThemeDark?: boolean;\n  isThemeGold?: boolean;\n  isSizeLarge?: boolean;\n  elementStyles?: Record<string, any>;\n}\n\ninterface OptionProps extends ElementProps {\n  isTypePrimary?: boolean;\n  isTypeSecondary?: boolean;\n  isTypeOutline?: boolean;\n  plainText?: HTMLElement | null;\n}\n\ntype ElementType = 'primary' | 'secondary' | 'outline';\ntype IconType = 'email' | 'newWindow' | 'document' | 'fearless';\n\ntype ActionFunction = (props: ElementProps) => {\n  element: HTMLElement;\n  styles: string;\n};\n\ntype ActionVariants = {\n  default: ActionFunction;\n  large?: ActionFunction;\n  dark?: ActionFunction;\n  gold?: ActionFunction;\n};\n\ntype Actions = Record<ElementType, ActionVariants>;\n\nconst ICONS: Record<IconType, string> = {\n  email: Utility.asset.icon.EMAIL,\n  newWindow: Utility.asset.icon.NEW_WINDOW,\n  document: Utility.asset.icon.DOCUMENT,\n  fearless: Utility.asset.icon.FEARLESS,\n};\n\nfunction insertIcon(element: HTMLElement, svg: string): void {\n  const icon = Utility.markup.create.svgFromString(svg);\n  if (icon) element.insertBefore(icon, element.firstChild);\n}\n\nfunction createLinkIcon(element: HTMLElement, type: ElementType): void {\n  const existingIcon = Utility.markup.get.icon({ element });\n  if (existingIcon) {\n    element.insertBefore(existingIcon, element.firstChild);\n    return;\n  }\n\n  const href = element.getAttribute('href');\n  const isExternalTab = element.getAttribute('target') === '_blank';\n  const isDownload = element.getAttribute('download') !== null;\n  const isMail = href?.includes('mailto:');\n\n  if (isMail) {\n    insertIcon(element, ICONS.email);\n  } else if (isExternalTab) {\n    insertIcon(element, ICONS.newWindow);\n  } else if (isDownload) {\n    insertIcon(element, ICONS.document);\n  } else if (type === 'secondary') {\n    insertIcon(element, ICONS.fearless);\n  }\n}\n\nfunction createElementWithStyle(\n  actionFn: (props: ElementProps) => { element: HTMLElement; styles: string },\n  props: ElementProps,\n) {\n  const result = actionFn({\n    element: props.element,\n    elementStyles: props.elementStyles,\n  });\n  return { element: result.element, styles: result.styles };\n}\n\nfunction createElement(type: ElementType, props: ElementProps) {\n  createLinkIcon(props.element, type);\n\n  const actions: Actions = {\n    primary: {\n      default: ElementModel.actions.primary,\n      large: ElementModel.actions.primaryLarge,\n    },\n    secondary: {\n      default: ElementModel.actions.secondary,\n      large: ElementModel.actions.secondaryLarge,\n      dark: ElementModel.actions.secondaryWhite,\n      gold: ElementModel.actions.secondaryGold,\n    },\n    outline: {\n      default: ElementModel.actions.outline,\n      large: ElementModel.actions.outlineLarge,\n      dark: ElementModel.actions.outlineWhite,\n    },\n  };\n\n  const typeActions = actions[type];\n\n  if (props.isThemeGold && typeActions.gold) {\n    return createElementWithStyle(typeActions.gold, props);\n  }\n  if (props.isThemeDark && typeActions.dark) {\n    return createElementWithStyle(typeActions.dark, props);\n  }\n  if (props.isSizeLarge && typeActions.large) {\n    return createElementWithStyle(typeActions.large, props);\n  }\n  return createElementWithStyle(typeActions.default, props);\n}\n\nconst createPlainTextContainer = (props: OptionProps) => {\n  const { isTypeSecondary } = props;\n\n  return ElementModel.layout.gridStacked({\n    element: document.createElement('div'),\n    elementStyles: isTypeSecondary ? {} : { element: { alignItems: 'center' } },\n  });\n};\n\nconst createPlainText = (props: OptionProps) => {\n  const { isThemeDark, isTypeSecondary, plainText } = props;\n  const plainTextStyles = {\n    element: {\n      ...(isThemeDark\n        ? Styles.element.text.link.white\n        : Styles.element.text.link.red),\n      marginTop: `${Styles.token.spacing.min}`,\n    },\n  };\n\n  const plainTextSecondaryStyles = {\n    element: {\n      ...(isThemeDark\n        ? Styles.element.text.link.white\n        : Styles.element.text.link.red),\n      marginTop: `${Styles.token.spacing.min}`,\n      marginLeft: `${Styles.token.spacing.lg}`,\n      alignSelf: 'baseline',\n    },\n  };\n\n  if (plainText) {\n    return ElementModel.headline.sansMin({\n      element: plainText,\n      isThemeDark,\n      elementStyles: isTypeSecondary\n        ? plainTextSecondaryStyles\n        : plainTextStyles,\n    });\n  }\n};\n\nexport const primary = (props: ElementProps) => createElement('primary', props);\nexport const secondary = (props: ElementProps) =>\n  createElement('secondary', props);\nexport const outline = (props: ElementProps) => createElement('outline', props);\n\nexport const options = (props: OptionProps) => {\n  const { plainText, isTypePrimary, isTypeSecondary, isTypeOutline } = props;\n  const container = document.createElement('div');\n  let styles = '';\n\n  if (isTypePrimary) {\n    const result = primary(props);\n    container.appendChild(result.element);\n    styles = result.styles;\n  }\n\n  if (isTypeSecondary) {\n    const result = secondary(props);\n    container.appendChild(result.element);\n    styles = result.styles;\n  }\n\n  if (isTypeOutline) {\n    const result = outline(props);\n    container.appendChild(result.element);\n    styles = result.styles;\n  }\n\n  if (plainText) {\n    const plainTextContainer = createPlainTextContainer(props);\n    const plainTextElement = createPlainText(props);\n    if (!plainTextElement) return { element: container, styles };\n\n    plainTextContainer.element.innerHTML = container.innerHTML;\n    plainTextContainer.element.appendChild(plainTextElement.element);\n    container.innerHTML = '';\n\n    container.appendChild(plainTextContainer.element);\n\n    styles += plainTextContainer.styles;\n    styles += plainTextElement.styles;\n  }\n\n  return { element: container, styles };\n};\n"],"names":["Utility.asset.icon.EMAIL","Utility.asset.icon.NEW_WINDOW","Utility.asset.icon.DOCUMENT","Utility.asset.icon.FEARLESS","icon","Utility.markup.create.svgFromString","Utility.markup.get.icon","ElementModel.actions.primary","ElementModel.actions.primaryLarge","ElementModel.actions.secondary","ElementModel.actions.secondaryLarge","ElementModel.actions.secondaryWhite","ElementModel.actions.secondaryGold","ElementModel.actions.outline","ElementModel.actions.outlineLarge","ElementModel.actions.outlineWhite","ElementModel.layout.gridStacked","ElementModel.headline.sansMin"],"mappings":"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"}

package/dist/atomic/animations/actions/index.js

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

package/dist/atomic/animations/actions/index.js.map

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

package/dist/atomic/animations/actions/index.mjs

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

package/dist/atomic/animations/actions/index.mjs.map

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

package/dist/atomic/animations/actions/indicator.d.ts

@@ -6,6 +6,7 @@ declare const _default: ({ count, overlayColor, isThemeDark, isThemeLight, callb
     callback: (arg: number) => void;
 }) => {
     element: HTMLDivElement;
+    className: string;
     styles: string;
     position: (index: number) => void;
 };

package/dist/atomic/animations/actions/indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"indicator.d.ts","sourceRoot":"","sources":["../../../../source/atomic/animations/actions/indicator.ts"],"names":[],"mappings":"wFAuEG;IACD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;;;sBAyCiC,MAAM;;AArDxC,wBAmHO"}
+{"version":3,"file":"indicator.d.ts","sourceRoot":"","sources":["../../../../source/atomic/animations/actions/indicator.ts"],"names":[],"mappings":"yBAiEgB,+DAMb;IACD,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACjC;;;;sBAyCiC,MAAM;;AArDxC,wBAoHO"}