@universityofmaryland/web-elements-library 1.3.7 → 1.4.1

package/dist/atomic/layout/person/columns.js

@@ -0,0 +1,201 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Styles = require("@universityofmaryland/web-styles-library");
+require("../../../node_modules/postcss/lib/postcss.js");
+require("../../../node_modules/postcss-nesting/dist/index.js");
+require("../../../node_modules/postcss-js/index.js");
+const media = require("../../../utilities/theme/media.js");
+const index = require("../../../model/elements/index.js");
+require("../../animations/actions/indicator.js");
+require("../../animations/brand/chevron-scroll.js");
+const background = require("../../assets/image/background.js");
+require("../block/stacked.js");
+require("../overlay/modal.js");
+const contact$1 = require("../../text-lockup/contact.js");
+require("../../text-lockup/date.js");
+const person = require("../../text-lockup/person.js");
+require("../../text-lockup/small.js");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const Styles__namespace = /* @__PURE__ */ _interopNamespaceDefault(Styles);
+const smallBreakpoint = Styles__namespace.token.media.breakpointValues.small.max;
+const mediumBreakpointStart = Styles__namespace.token.media.breakpointValues.medium.min;
+const mediumBreakpoint = Styles__namespace.token.media.breakpointValues.large.min;
+const image = ({
+  customStyles,
+  image: image2,
+  isThemeDark
+}) => index.createDiv({
+  className: "person-column-image",
+  elementStyles: {
+    element: {
+      ...media.createContainerQuery("max-width", smallBreakpoint, {
+        marginBottom: `${Styles__namespace.token.spacing.md}`,
+        backgroundColor: `${Styles__namespace.token.color.gray.lighter}`,
+        display: "flex",
+        justifyContent: "center",
+        ...isThemeDark && {
+          ...media.createContainerQuery("max-width", smallBreakpoint, {
+            backgroundColor: `${Styles__namespace.token.color.gray.darker}`
+          })
+        }
+      }),
+      ...media.createContainerQuery(
+        "min-width",
+        mediumBreakpointStart,
+        {
+          display: "block",
+          width: "96px",
+          paddingRight: `${Styles__namespace.token.spacing.md}`,
+          alignSelf: "flex-start"
+        }
+      ),
+      ...customStyles,
+      "& img, & svg": {
+        ...media.createContainerQuery("max-width", smallBreakpoint, {
+          height: "auto !important",
+          width: "140px"
+        })
+      }
+    }
+  },
+  children: [
+    background({
+      element: image2,
+      isScaled: false
+    })
+  ]
+});
+const personLockup = ({
+  actions,
+  association,
+  isThemeDark,
+  job,
+  name,
+  nameComposite,
+  pronouns,
+  subText
+}) => person({
+  actions,
+  name,
+  nameComposite,
+  job,
+  association,
+  pronouns,
+  subText,
+  isThemeDark
+});
+const details = (props) => {
+  const { customStyles = {} } = props;
+  return index.createDiv({
+    className: "person-column-details",
+    elementStyles: {
+      element: {
+        flex: "1 0",
+        ...customStyles
+      }
+    },
+    children: [personLockup(props)]
+  });
+};
+const contactLockup = ({
+  actions,
+  additionalContact,
+  address,
+  email,
+  isThemeDark,
+  linkendIn,
+  phone
+}) => contact$1({
+  actions,
+  address,
+  email,
+  isThemeDark,
+  linkendIn,
+  phone
+});
+const contact = (props) => {
+  const { customStyles = {} } = props;
+  return index.createDiv({
+    className: "person-column-contact",
+    elementStyles: {
+      element: {
+        marginTop: `${Styles__namespace.token.spacing.sm}`,
+        ...media.createContainerQuery(
+          "min-width",
+          mediumBreakpointStart,
+          {
+            paddingLeft: `${Styles__namespace.token.spacing.md}`
+          }
+        ),
+        ...media.createContainerQuery("min-width", mediumBreakpoint, {
+          width: "30%"
+        }),
+        ...customStyles
+      }
+    },
+    children: [contactLockup(props)]
+  });
+};
+const information = ({
+  actions,
+  additionalContact,
+  address,
+  association,
+  customStyles = {},
+  email,
+  isThemeDark,
+  job,
+  linkendIn,
+  name,
+  phone,
+  pronouns,
+  subText
+}) => {
+  return index.createDiv({
+    className: "person-column-information",
+    elementStyles: {
+      element: {
+        ...customStyles
+      }
+    },
+    children: [
+      personLockup({
+        association,
+        isThemeDark,
+        job,
+        name,
+        pronouns,
+        subText
+      }),
+      contactLockup({
+        actions,
+        additionalContact,
+        address,
+        email,
+        isThemeDark,
+        linkendIn,
+        phone
+      })
+    ]
+  });
+};
+exports.contact = contact;
+exports.details = details;
+exports.image = image;
+exports.information = information;
+//# sourceMappingURL=columns.js.map

package/dist/atomic/layout/person/columns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"columns.js","sources":["../../../../source/atomic/layout/person/columns.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport {\n  type PersonContactPropsWithStyles,\n  type PersonTextLockupPropsWithStyles,\n  type PersonFullProps,\n} from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.token.media.breakpointValues.large.min;\n\nexport const image = ({\n  customStyles,\n  image,\n  isThemeDark,\n}: {\n  customStyles?: Record<string, any>;\n  image: HTMLImageElement;\n  isThemeDark?: boolean;\n}) =>\n  ElementModel.createDiv({\n    className: 'person-column-image',\n    elementStyles: {\n      element: {\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          marginBottom: `${Styles.token.spacing.md}`,\n          backgroundColor: `${Styles.token.color.gray.lighter}`,\n          display: 'flex',\n          justifyContent: 'center',\n\n          ...(isThemeDark && {\n            ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n              backgroundColor: `${Styles.token.color.gray.darker}`,\n            }),\n          }),\n        }),\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'block',\n            width: '96px',\n            paddingRight: `${Styles.token.spacing.md}`,\n            alignSelf: 'flex-start',\n          },\n        ),\n\n        ...customStyles,\n\n        '& img, & svg': {\n          ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n            width: '140px',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    ],\n  });\n\nconst personLockup = ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupPropsWithStyles) =>\n  textLockup.person({\n    actions,\n    name,\n    nameComposite,\n    job,\n    association,\n    pronouns,\n    subText,\n    isThemeDark,\n  });\n\nexport const details = (props: PersonTextLockupPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  return ElementModel.createDiv({\n    className: 'person-column-details',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n        ...customStyles,\n      },\n    },\n    children: [personLockup(props)],\n  });\n};\n\nconst contactLockup = ({\n  actions,\n  additionalContact,\n  address,\n  email,\n  isThemeDark,\n  linkendIn,\n  phone,\n}: PersonContactPropsWithStyles) =>\n  textLockup.contact({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkendIn,\n    phone,\n  });\n\nexport const contact = (props: PersonContactPropsWithStyles) => {\n  const { customStyles = {} } = props;\n\n  return ElementModel.createDiv({\n    className: 'person-column-contact',\n    elementStyles: {\n      element: {\n        marginTop: `${Styles.token.spacing.sm}`,\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            paddingLeft: `${Styles.token.spacing.md}`,\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '30%',\n        }),\n\n        ...customStyles,\n      },\n    },\n    children: [contactLockup(props)],\n  });\n};\n\nexport const information = ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  customStyles = {},\n  email,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonFullProps) => {\n  return ElementModel.createDiv({\n    className: 'person-column-information',\n    elementStyles: {\n      element: {\n        ...customStyles,\n      },\n    },\n    children: [\n      personLockup({\n        association,\n        isThemeDark,\n        job,\n        name,\n        pronouns,\n        subText,\n      }),\n      contactLockup({\n        actions,\n        additionalContact,\n        address,\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    ],\n  });\n};\n"],"names":["Styles","image","ElementModel.createDiv","theme.media.createContainerQuery","assets.image.background","textLockup.person","textLockup.contact"],"mappings":"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"}

package/dist/atomic/layout/person/columns.mjs

@@ -0,0 +1,184 @@
+import * as Styles from "@universityofmaryland/web-styles-library";
+import "../../../node_modules/postcss/lib/postcss.mjs";
+import "../../../node_modules/postcss-nesting/dist/index.mjs";
+import "../../../node_modules/postcss-js/index.mjs";
+import { createContainerQuery } from "../../../utilities/theme/media.mjs";
+import { createDiv } from "../../../model/elements/index.mjs";
+import "../../animations/actions/indicator.mjs";
+import "../../animations/brand/chevron-scroll.mjs";
+import imageContainer from "../../assets/image/background.mjs";
+import "../block/stacked.mjs";
+import "../overlay/modal.mjs";
+import contact$1 from "../../text-lockup/contact.mjs";
+import "../../text-lockup/date.mjs";
+import person from "../../text-lockup/person.mjs";
+import "../../text-lockup/small.mjs";
+const smallBreakpoint = Styles.token.media.breakpointValues.small.max;
+const mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;
+const mediumBreakpoint = Styles.token.media.breakpointValues.large.min;
+const image = ({
+  customStyles,
+  image: image2,
+  isThemeDark
+}) => createDiv({
+  className: "person-column-image",
+  elementStyles: {
+    element: {
+      ...createContainerQuery("max-width", smallBreakpoint, {
+        marginBottom: `${Styles.token.spacing.md}`,
+        backgroundColor: `${Styles.token.color.gray.lighter}`,
+        display: "flex",
+        justifyContent: "center",
+        ...isThemeDark && {
+          ...createContainerQuery("max-width", smallBreakpoint, {
+            backgroundColor: `${Styles.token.color.gray.darker}`
+          })
+        }
+      }),
+      ...createContainerQuery(
+        "min-width",
+        mediumBreakpointStart,
+        {
+          display: "block",
+          width: "96px",
+          paddingRight: `${Styles.token.spacing.md}`,
+          alignSelf: "flex-start"
+        }
+      ),
+      ...customStyles,
+      "& img, & svg": {
+        ...createContainerQuery("max-width", smallBreakpoint, {
+          height: "auto !important",
+          width: "140px"
+        })
+      }
+    }
+  },
+  children: [
+    imageContainer({
+      element: image2,
+      isScaled: false
+    })
+  ]
+});
+const personLockup = ({
+  actions,
+  association,
+  isThemeDark,
+  job,
+  name,
+  nameComposite,
+  pronouns,
+  subText
+}) => person({
+  actions,
+  name,
+  nameComposite,
+  job,
+  association,
+  pronouns,
+  subText,
+  isThemeDark
+});
+const details = (props) => {
+  const { customStyles = {} } = props;
+  return createDiv({
+    className: "person-column-details",
+    elementStyles: {
+      element: {
+        flex: "1 0",
+        ...customStyles
+      }
+    },
+    children: [personLockup(props)]
+  });
+};
+const contactLockup = ({
+  actions,
+  additionalContact,
+  address,
+  email,
+  isThemeDark,
+  linkendIn,
+  phone
+}) => contact$1({
+  actions,
+  address,
+  email,
+  isThemeDark,
+  linkendIn,
+  phone
+});
+const contact = (props) => {
+  const { customStyles = {} } = props;
+  return createDiv({
+    className: "person-column-contact",
+    elementStyles: {
+      element: {
+        marginTop: `${Styles.token.spacing.sm}`,
+        ...createContainerQuery(
+          "min-width",
+          mediumBreakpointStart,
+          {
+            paddingLeft: `${Styles.token.spacing.md}`
+          }
+        ),
+        ...createContainerQuery("min-width", mediumBreakpoint, {
+          width: "30%"
+        }),
+        ...customStyles
+      }
+    },
+    children: [contactLockup(props)]
+  });
+};
+const information = ({
+  actions,
+  additionalContact,
+  address,
+  association,
+  customStyles = {},
+  email,
+  isThemeDark,
+  job,
+  linkendIn,
+  name,
+  phone,
+  pronouns,
+  subText
+}) => {
+  return createDiv({
+    className: "person-column-information",
+    elementStyles: {
+      element: {
+        ...customStyles
+      }
+    },
+    children: [
+      personLockup({
+        association,
+        isThemeDark,
+        job,
+        name,
+        pronouns,
+        subText
+      }),
+      contactLockup({
+        actions,
+        additionalContact,
+        address,
+        email,
+        isThemeDark,
+        linkendIn,
+        phone
+      })
+    ]
+  });
+};
+export {
+  contact,
+  details,
+  image,
+  information
+};
+//# sourceMappingURL=columns.mjs.map

package/dist/atomic/layout/person/columns.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"columns.mjs","sources":["../../../../source/atomic/layout/person/columns.ts"],"sourcesContent":["import * as Styles from '@universityofmaryland/web-styles-library';\nimport { assets, textLockup } from 'atomic';\nimport { theme } from 'utilities';\nimport { ElementModel } from 'model';\nimport {\n  type PersonContactPropsWithStyles,\n  type PersonTextLockupPropsWithStyles,\n  type PersonFullProps,\n} from '../../_types';\n\nconst smallBreakpoint = Styles.token.media.breakpointValues.small.max;\nconst mediumBreakpointStart = Styles.token.media.breakpointValues.medium.min;\nconst mediumBreakpoint = Styles.token.media.breakpointValues.large.min;\n\nexport const image = ({\n  customStyles,\n  image,\n  isThemeDark,\n}: {\n  customStyles?: Record<string, any>;\n  image: HTMLImageElement;\n  isThemeDark?: boolean;\n}) =>\n  ElementModel.createDiv({\n    className: 'person-column-image',\n    elementStyles: {\n      element: {\n        ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n          marginBottom: `${Styles.token.spacing.md}`,\n          backgroundColor: `${Styles.token.color.gray.lighter}`,\n          display: 'flex',\n          justifyContent: 'center',\n\n          ...(isThemeDark && {\n            ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n              backgroundColor: `${Styles.token.color.gray.darker}`,\n            }),\n          }),\n        }),\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            display: 'block',\n            width: '96px',\n            paddingRight: `${Styles.token.spacing.md}`,\n            alignSelf: 'flex-start',\n          },\n        ),\n\n        ...customStyles,\n\n        '& img, & svg': {\n          ...theme.media.createContainerQuery('max-width', smallBreakpoint, {\n            height: 'auto !important',\n            width: '140px',\n          }),\n        },\n      },\n    },\n    children: [\n      assets.image.background({\n        element: image,\n        isScaled: false,\n      }),\n    ],\n  });\n\nconst personLockup = ({\n  actions,\n  association,\n  isThemeDark,\n  job,\n  name,\n  nameComposite,\n  pronouns,\n  subText,\n}: PersonTextLockupPropsWithStyles) =>\n  textLockup.person({\n    actions,\n    name,\n    nameComposite,\n    job,\n    association,\n    pronouns,\n    subText,\n    isThemeDark,\n  });\n\nexport const details = (props: PersonTextLockupPropsWithStyles) => {\n  const { customStyles = {} } = props;\n  return ElementModel.createDiv({\n    className: 'person-column-details',\n    elementStyles: {\n      element: {\n        flex: '1 0',\n        ...customStyles,\n      },\n    },\n    children: [personLockup(props)],\n  });\n};\n\nconst contactLockup = ({\n  actions,\n  additionalContact,\n  address,\n  email,\n  isThemeDark,\n  linkendIn,\n  phone,\n}: PersonContactPropsWithStyles) =>\n  textLockup.contact({\n    actions,\n    additionalContact,\n    address,\n    email,\n    isThemeDark,\n    linkendIn,\n    phone,\n  });\n\nexport const contact = (props: PersonContactPropsWithStyles) => {\n  const { customStyles = {} } = props;\n\n  return ElementModel.createDiv({\n    className: 'person-column-contact',\n    elementStyles: {\n      element: {\n        marginTop: `${Styles.token.spacing.sm}`,\n\n        ...theme.media.createContainerQuery(\n          'min-width',\n          mediumBreakpointStart,\n          {\n            paddingLeft: `${Styles.token.spacing.md}`,\n          },\n        ),\n\n        ...theme.media.createContainerQuery('min-width', mediumBreakpoint, {\n          width: '30%',\n        }),\n\n        ...customStyles,\n      },\n    },\n    children: [contactLockup(props)],\n  });\n};\n\nexport const information = ({\n  actions,\n  additionalContact,\n  address,\n  association,\n  customStyles = {},\n  email,\n  isThemeDark,\n  job,\n  linkendIn,\n  name,\n  phone,\n  pronouns,\n  subText,\n}: PersonFullProps) => {\n  return ElementModel.createDiv({\n    className: 'person-column-information',\n    elementStyles: {\n      element: {\n        ...customStyles,\n      },\n    },\n    children: [\n      personLockup({\n        association,\n        isThemeDark,\n        job,\n        name,\n        pronouns,\n        subText,\n      }),\n      contactLockup({\n        actions,\n        additionalContact,\n        address,\n        email,\n        isThemeDark,\n        linkendIn,\n        phone,\n      }),\n    ],\n  });\n};\n"],"names":["image","ElementModel.createDiv","theme.media.createContainerQuery","assets.image.background","textLockup.person","textLockup.contact"],"mappings":"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"}

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/atomic/text/index.js

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

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

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

package/dist/atomic/text/index.mjs

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

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

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

package/dist/atomic/text/stat.d.ts

@@ -0,0 +1,13 @@
+import { ElementVisual } from '../../_types';
+export interface StatProps {
+    isThemeDark: boolean;
+    isDisplayBlock: boolean;
+    isSizeLarge: boolean;
+    hasLine: boolean;
+    stat?: HTMLElement;
+    text?: HTMLElement;
+    subText?: HTMLElement;
+}
+declare const _default: (props: StatProps) => ElementVisual;
+export default _default;
+//# sourceMappingURL=stat.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stat.d.ts","sourceRoot":"","sources":["../../../source/atomic/text/stat.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,MAAM,WAAW,SAAS;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,WAAW,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;yBAuMe,OAAO,SAAS,KAAG,aAAa;AAAhD,wBAYE"}

package/dist/atomic/text/stat.js

@@ -0,0 +1,169 @@
+"use strict";
+const Styles = require("@universityofmaryland/web-styles-library");
+const index = require("../../model/elements/index.js");
+const richText = require("../../model/elements/rich-text.js");
+const BLOCK_TEXTURE = `<svg id="stat_block-texture" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" ><defs><style>.cls-1{opacity:.02;}.cls-1,.cls-2{fill:#454545;fill-rule:evenodd;isolation:isolate;stroke-width:0px;}.cls-2{opacity:.04;}</style></defs><path class="cls-1" d="M109.49,0H0v63.18l181.67,182.32L0,427.82v63.18h109.49l244.61-245.5L109.49,0Z"/><path class="cls-2" d="M108.94,0h172.44l244.61,245.5-244.61,245.5H108.94l244.61-245.5L108.94,0ZM0,179.11l58.16-58.29L0,62.54v116.57Z"/></svg>`;
+const createStat = (props) => {
+  const { stat: statElement, isThemeDark, isSizeLarge } = props;
+  if (!statElement) return;
+  let rawText = statElement.textContent;
+  if (!rawText) return;
+  rawText = rawText.trim();
+  if (rawText.length > 6) {
+    console.error("Stat text is too long. Please limit to 6 characters.");
+    statElement.textContent = rawText.slice(0, 6);
+  }
+  return index.create({
+    element: statElement,
+    className: "stat-display",
+    elementStyles: {
+      siblingAfter: { marginTop: Styles.token.spacing.min },
+      element: {
+        ...Styles.typography.stats.medium,
+        color: Styles.token.color.red,
+        WebkitFontSmoothing: "antialiased",
+        ...isThemeDark && { color: Styles.token.color.gold },
+        ...isSizeLarge && { ...Styles.typography.stats.large },
+        [`& *`]: {
+          ...Styles.typography.stats.medium,
+          color: "currentColor",
+          WebkitFontSmoothing: "antialiased",
+          ...isSizeLarge && Styles.typography.stats.large
+        },
+        [`& + *`]: { marginTop: Styles.token.spacing.min }
+      }
+    }
+  });
+};
+const createSubtext = (props) => {
+  const { subText, isThemeDark, isSizeLarge } = props;
+  if (!subText) return;
+  return index.create({
+    element: subText,
+    className: "stat-sub-text",
+    elementStyles: {
+      element: {
+        ...Styles.typography.sans.min,
+        marginTop: Styles.token.spacing.min,
+        color: Styles.token.color.gray.mediumAA,
+        ...isSizeLarge && Styles.typography.sans.small,
+        ...isThemeDark && { color: Styles.token.color.gray.light },
+        ["& *"]: {
+          ...Styles.typography.sans.min,
+          color: "currentColor",
+          ...isSizeLarge && Styles.typography.sans.small
+        }
+      }
+    }
+  });
+};
+const createText = (props) => {
+  const { text, isThemeDark, isSizeLarge } = props;
+  if (!text) return;
+  if (isSizeLarge) {
+    return richText.simpleLargest({
+      element: text,
+      isThemeDark,
+      elementStyles: {
+        siblingAfter: { marginTop: Styles.token.spacing.md }
+      }
+    });
+  }
+  return richText.simpleLarge({
+    element: text,
+    isThemeDark,
+    elementStyles: {
+      siblingAfter: { marginTop: Styles.token.spacing.min }
+    }
+  });
+};
+const createWrapper = (props) => {
+  const { isThemeDark, hasLine, isSizeLarge, stat: stat2, text, subText } = props;
+  const subTextElement = createSubtext({ subText, isThemeDark, isSizeLarge });
+  const textElement = createText({ text, isThemeDark, isSizeLarge });
+  const statElement = createStat({ stat: stat2, isThemeDark, isSizeLarge });
+  const childElements = [statElement, textElement, subTextElement].filter(
+    Boolean
+  );
+  return index.createDiv({
+    className: "stat-wrapper",
+    children: childElements,
+    elementStyles: {
+      element: {
+        maxWidth: "720px",
+        position: "relative",
+        ...hasLine && {
+          paddingLeft: Styles.token.spacing.md,
+          borderLeft: `2px solid ${Styles.token.color.gold}`,
+          [`@container umd-element-stat (min-width: 400px)`]: {
+            paddingLeft: Styles.token.spacing.xl
+          }
+        },
+        ...isThemeDark && {
+          [`& .stat-sub-text`]: { color: Styles.token.color.gray.light }
+        }
+      }
+    }
+  });
+};
+const createDisplayBlock = (props) => {
+  const { isDisplayBlock, wrapperElement } = props;
+  if (!isDisplayBlock) return null;
+  const block = index.createDiv({
+    className: "stat-display-block",
+    children: [wrapperElement],
+    elementStyles: {
+      element: {
+        padding: `${Styles.token.spacing.lg} ${Styles.token.spacing.sm}`,
+        borderTop: `2px solid ${Styles.token.color.red}`,
+        backgroundColor: `${Styles.token.color.gray.lightest}`,
+        position: "relative",
+        overflow: "hidden",
+        height: `100%`,
+        display: `flex`,
+        alignItems: `center`,
+        [`@media (min-width: ${Styles.token.media.breakpoints.large.min})`]: {
+          padding: Styles.token.spacing.lg
+        },
+        [`@media (min-width: ${Styles.token.media.breakpoints.highDef.min})`]: {
+          padding: `${Styles.token.spacing["2xl"]} ${Styles.token.spacing["3xl"]}`
+        },
+        [`& > svg`]: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: "100%"
+        }
+      }
+    }
+  });
+  block.element.insertAdjacentHTML("afterbegin", BLOCK_TEXTURE);
+  return block;
+};
+const createContainer = (containerChild) => {
+  return index.createDiv({
+    className: "stat-container",
+    children: [containerChild],
+    elementStyles: {
+      element: {
+        container: `umd-element-stat / inline-size`,
+        height: `inherit`
+      }
+    }
+  });
+};
+const stat = (props) => {
+  const wrapperElement = createWrapper(props);
+  const blockElement = createDisplayBlock({
+    isDisplayBlock: props.isDisplayBlock,
+    wrapperElement
+  });
+  if (props.isDisplayBlock) {
+    return createContainer(blockElement);
+  } else {
+    return createContainer(wrapperElement);
+  }
+};
+module.exports = stat;
+//# sourceMappingURL=stat.js.map