@pushengineering/umg-web-components 2.0.1 → 2.0.3

package/dist/components/vertical-stack/vertical-stack.js

@@ -0,0 +1,92 @@
+import { css as m, LitElement as c, html as g } from "lit";
+import { styleMap as f } from "lit/directives/style-map.js";
+import { classMap as n } from "lit/directives/class-map.js";
+import { customElement as y } from "lit/decorators/custom-element.js";
+import { property as r } from "lit/decorators/property.js";
+import { settings as h } from "../../scripts/settings.js";
+import { global as v } from "../../styles/global.js";
+import { groupMobileAlign as b, groupMobileJustify as d, groupAlign as j, groupJustify as k } from "../../styles/group.js";
+import { mergeStyles as x } from "../../scripts/mergeStyles.js";
+var _ = Object.defineProperty, A = Object.getOwnPropertyDescriptor, i = (t, o, p, l) => {
+  for (var s = l > 1 ? void 0 : l ? A(o, p) : o, a = t.length - 1, u; a >= 0; a--)
+    (u = t[a]) && (s = (l ? u(o, p, s) : u(s)) || s);
+  return l && s && _(o, p, s), s;
+};
+const { prefix: J } = h;
+let e = class extends c {
+  constructor() {
+    super(...arguments), this.align = "stretch", this.justify = "start";
+  }
+  stackStyles() {
+    let t = {};
+    return this.gap !== void 0 && (t = {
+      ...t,
+      "--um-space-vertical-stack-gap": this.gap / 16 + "rem"
+    }), t;
+  }
+  stackClasses() {
+    const t = {};
+    return t["group-justify--" + this.justify] = !0, t["group-align--" + this.align] = !0, this.mobileJustify ? t["group-mobile-justify--" + this.mobileJustify] = !0 : t["group-mobile-justify--" + this.justify] = !0, this.mobileAlign ? t["group-mobile-align--" + this.mobileAlign] = !0 : t["group-mobile-align--" + this.align] = !0, t;
+  }
+  render() {
+    return g`
+            <div
+                class="vertical-stack${n(this.stackClasses())}"
+                style="${f(this.stackStyles())}"
+                >
+                <slot></slot>
+            </div>
+        `;
+  }
+};
+e.styles = x([
+  v,
+  m`
+            :host {
+                display: block;
+                width: 100%;
+                height: 100%;
+            }
+            ::slotted(*) {
+                flex-shrink: 1;
+                height: auto;
+            }
+
+            .vertical-stack {
+                display: flex;
+                flex-direction: column;
+                gap: var(--um-space-vertical-stack-gap, var(--um-space-grid-desktop-vertical, 1rem));
+                height: 100%;
+            }
+
+            .vertical-stack.group-justify--stretch ::slotted(*) {
+                flex-grow: 1;
+                flex-shrink: 0;
+            }
+        `,
+  b,
+  d,
+  j,
+  k
+]);
+i([
+  r({ type: Number })
+], e.prototype, "gap", 2);
+i([
+  r()
+], e.prototype, "align", 2);
+i([
+  r()
+], e.prototype, "justify", 2);
+i([
+  r()
+], e.prototype, "mobileAlign", 2);
+i([
+  r()
+], e.prototype, "mobileJustify", 2);
+e = i([
+  y(`${J}-vertical-stack`)
+], e);
+export {
+  e as VerticalStack
+};

package/dist/components/video/index.d.ts

@@ -0,0 +1,2 @@
+import { Video } from './video';
+export { Video };

package/dist/components/video/video.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+import type { MediaFit } from '../../types';
+interface VideoSource {
+    src: string;
+    type: string;
+}
+export declare class Video extends LitElement {
+    sources: VideoSource[];
+    posterSource: string | undefined;
+    width: number;
+    height: number;
+    fit: MediaFit;
+    inBackground: boolean;
+    autoplay: boolean;
+    muted: boolean;
+    loop: boolean;
+    controls: boolean;
+    _hasPlayed: boolean;
+    _videoElement: HTMLVideoElement | undefined;
+    constructor();
+    containerClasses(): any;
+    initialise(): Promise<void>;
+    handleFirstPlay(): void;
+    videoType(): import("lit").TemplateResult<1>;
+    video(): import("lit").TemplateResult<1>;
+    render(): import("lit").TemplateResult<1>;
+    static styles: import("lit").CSSResultArray;
+}
+export {};

package/dist/{packages/web-components/components → components}/video/video.js

@@ -1,24 +1,20 @@
-import "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
-import { html as r } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
-import { LitElement as d } from "../../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
-import { customElement as m } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/custom-element.js";
-import { property as o } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/property.js";
-import { state as y } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/state.js";
-import { query as u } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/decorators/query.js";
-import { classMap as c } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/class-map.js";
-import { ifDefined as v } from "../../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/directives/if-defined.js";
-import { global as f } from "../../styles/global.js";
-import { placeholderMedia as g } from "../../styles/placeholder-media.js";
-import { settings as $ } from "../../scripts/settings.js";
-import { mergeStyles as w } from "../../scripts/mergeStyles.js";
-import { css as _ } from "../../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
-var P = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (e, a, p, h) => {
-  for (var s = h > 1 ? void 0 : h ? C(a, p) : a, l = e.length - 1, n; l >= 0; l--)
-    (n = e[l]) && (s = (h ? n(a, p, s) : n(s)) || s);
-  return h && s && P(a, p, s), s;
+import { css as d, LitElement as y, html as r } from "lit";
+import { customElement as m } from "lit/decorators/custom-element.js";
+import { property as o } from "lit/decorators/property.js";
+import { state as u, query as v } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+import { ifDefined as f } from "lit/directives/if-defined.js";
+import { global as g } from "../../styles/global.js";
+import { placeholderMedia as $ } from "../../styles/placeholder-media.js";
+import { settings as w } from "../../scripts/settings.js";
+import { mergeStyles as _ } from "../../scripts/mergeStyles.js";
+var P = Object.defineProperty, C = Object.getOwnPropertyDescriptor, i = (e, h, p, a) => {
+  for (var s = a > 1 ? void 0 : a ? C(h, p) : h, l = e.length - 1, n; l >= 0; l--)
+    (n = e[l]) && (s = (a ? n(h, p, s) : n(s)) || s);
+  return a && s && P(h, p, s), s;
 };
-const { prefix: b } = $;
-let t = class extends d {
+const { prefix: b } = w;
+let t = class extends y {
   constructor() {
     super(), this.sources = [], this.posterSource = void 0, this.width = 100, this.height = 100, this.fit = "adapt", this.inBackground = !1, this.autoplay = !0, this.muted = !0, this.loop = !1, this.controls = !1, this._hasPlayed = !1, this.initialise();
   }
@@ -58,7 +54,7 @@ let t = class extends d {
             <video
                 width="${this.width}"
                 height="${this.height}"
-                poster="${v(this.posterSource)}"
+                poster="${f(this.posterSource)}"
                 ?controls="${this.controls}"
                 ?autoplay="${this.autoplay}"
                 ?loop="${this.loop}"
@@ -101,10 +97,10 @@ let t = class extends d {
         `;
   }
 };
-t.styles = w([
-  f,
+t.styles = _([
   g,
-  _`
+  $,
+  d`
             :host {
                 display: block;
             }
@@ -172,10 +168,10 @@ i([
   o({ type: Boolean })
 ], t.prototype, "controls", 2);
 i([
-  y()
+  u()
 ], t.prototype, "_hasPlayed", 2);
 i([
-  u("video")
+  v("video")
 ], t.prototype, "_videoElement", 2);
 t = i([
   m(`${b}-video`)

package/dist/{packages/web-components/styles → styles}/button.js

@@ -1,12 +1,9 @@
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
-import "../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
-import { css as o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
-const a = o`
+import { css as o } from "lit";
+const r = o`
     .button {
         cursor: pointer;
         font-family: var(--um-font-family-button, --um-font-family-body, Roboto, Arial, Helvetica, sans-serif);
-        font-weight: var(--um-font-weight-button, --um-font-weight-regular, 400);
+        font-weight: var(--um-font-weight-button, 700);
         font-size: var( --um-font-size-button-default, --um-font-size-body-sm, 0.875rem);
         letter-spacing: 0.06rem;
         color: rgb(var(--um-color-button-primary-text, var(--um-color-page-bg, 255,255,255)),1);
@@ -51,5 +48,5 @@ const a = o`
     }
 `;
 export {
-  a as buttonState
+  r as buttonState
 };

package/dist/{packages/web-components/styles → styles}/fonts.js

@@ -1,8 +1,5 @@
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
-import "../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
-import { css as t } from "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
-const n = t`
+import { css as t } from "lit";
+const a = t`
   .txt--headingXs,
   .txt--headingSm,
   .txt--headingMd,
@@ -11,7 +8,8 @@ const n = t`
   .txt--heading2xl,
   .txt--heading3xl,
   .txt--heading4xl,
-  .txt--heading5xl {
+  .txt--heading5xl,
+  .txt--heading {
     font-family: var(--um-font-family-heading, 'Roboto Serif', Times, 'Times New Roman', Georgia, serif);
   }
   .txt--bodyXs,
@@ -22,9 +20,14 @@ const n = t`
   .txt--body2xl,
   .txt--body3xl,
   .txt--body4xl,
-  .txt--body5xl {
+  .txt--body5xl,
+  .txt--body {
     font-family: var(--um-font-family-body, Roboto, Arial, Helvetica, sans-serif);
   }
+  .txt--heading {
+    font-size: calc(var(--um-font-size-heading-scale, 1) * (var(--um-font-size, 1.25) * 1rem));
+    line-height: calc(1 + 0.15 / max(1, var(--um-font-size-heading-scale, 1)));
+  }
   .txt--headingXs {
     font-size: var(--um-font-size-heading-xs, 0.75rem);
     line-height: calc(1 + 0.2 / max(1, var(--um-font-size-heading-scale, 1)));
@@ -61,6 +64,10 @@ const n = t`
     font-size: calc(var(--um-font-size-heading-scale, 1) * var(--um-font-size-heading-5xl, 4rem));
     line-height: calc(1 + 0 / max(1, var(--um-font-size-heading-scale, 1)));
   }
+  .txt--body {
+    font-size: calc(var(--um-font-size-body-scale, 1) * (var(--um-font-size, 1) * 1rem));
+    line-height: calc(1 + 0.3 / max(1, var(--um-font-size-body-scale, 1)));
+  }
   .txt--bodyXs {
     font-size: var(--um-font-size-body-xs, 0.75rem);
     line-height: calc(1 + 0.2 / max(1, var(--um-font-size-body-scale, 1)));
@@ -97,7 +104,7 @@ const n = t`
     font-size: calc(var(--um-font-size-body-scale, 1) * var(--um-font-size-body-5xl, 4rem));
     line-height: calc(1 + 0 / max(1, var(--um-font-size-body-scale, 1)));
   }
-`, m = t`
+`, i = t`
 .txt--light {
   font-weight: var(--um-font-weight-light, 300);
 }
@@ -119,7 +126,7 @@ const n = t`
 .txt--black {
   font-weight: var(--um-font-weight-black, 900);
 }
-`, l = t`
+`, o = t`
     .txt--headingXs {
       margin-bottom: var(--um-space-4, 0.25rem);
     }
@@ -162,7 +169,7 @@ const n = t`
     .txt--body5xl {
       margin-bottom: var(--pu-space-12, 0.75rem);
     }
-`, s = t`
+`, n = t`
     .txt--italic {
       font-style: italic;
     }
@@ -174,8 +181,8 @@ const n = t`
     }
 `;
 export {
-  l as fontMargins,
-  n as fontSizes,
-  s as fontStyle,
-  m as fontWeights
+  o as fontMargins,
+  a as fontSizes,
+  n as fontStyle,
+  i as fontWeights
 };

package/dist/{packages/web-components/styles → styles}/global.js

@@ -1,8 +1,5 @@
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
-import "../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
-import { css as o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
-const a = o`
+import { css as o } from "lit";
+const e = o`
     *, *:before, *:after {
         box-sizing: border-box;
     }
@@ -36,5 +33,5 @@ const a = o`
     }
 `;
 export {
-  a as global
+  e as global
 };

package/dist/{packages/web-components/styles → styles}/grid.js

@@ -1,8 +1,5 @@
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
-import "../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
-import { css as r } from "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
-const l = r`
+import { css as r } from "lit";
+const d = r`
 
     /* Grid layout */
     .grid {
@@ -110,5 +107,5 @@ const l = r`
     }
 `;
 export {
-  l as grid
+  d as grid
 };

package/dist/{packages/web-components/styles → styles}/group.js

@@ -1,8 +1,5 @@
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
-import "../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
-import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
-const r = e`
+import { css as e } from "lit";
+const n = e`
     .group-spacing--none {
         gap: var(--um-space-0, 0rem);
     }
@@ -27,7 +24,7 @@ const r = e`
             flex-direction: column;
         }
     }
-`, o = e`
+`, i = e`
     @media screen and (min-width: 48.06rem) {
         .group-justify--start {
             justify-content: start;
@@ -51,7 +48,7 @@ const r = e`
             justify-content: stretch;
         }
     }
-`, a = e`
+`, s = e`
     @media screen and (max-width: 48rem) {
         .group-mobile-justify--start {
             justify-content: start;
@@ -75,7 +72,7 @@ const r = e`
             justify-content: stretch;
         }
     }
-`, u = e`
+`, r = e`
     @media screen and (min-width: 48.06rem) {
         .group-align--start {
             align-items: start;
@@ -93,7 +90,7 @@ const r = e`
             align-items: stretch;
         }
     }
-`, p = e`
+`, o = e`
     @media screen and (max-width: 48rem) {
         .group-mobile-align--start {
             align-items: start;
@@ -113,9 +110,9 @@ const r = e`
     }
 `;
 export {
-  u as groupAlign,
-  o as groupJustify,
-  p as groupMobileAlign,
-  a as groupMobileJustify,
-  r as groupSpacing
+  r as groupAlign,
+  i as groupJustify,
+  o as groupMobileAlign,
+  s as groupMobileJustify,
+  n as groupSpacing
 };

package/dist/{packages/web-components/styles → styles}/link.js

@@ -1,8 +1,5 @@
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
-import "../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
-import { css as o } from "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
-const i = o`
+import { css as o } from "lit";
+const n = o`
     .link {
         cursor: pointer;
         display: inline-block;
@@ -26,5 +23,5 @@ const i = o`
     }
 `;
 export {
-  i as linkState
+  n as linkState
 };

package/dist/{packages/web-components/styles → styles}/placeholder-media.js

@@ -1,8 +1,5 @@
-import "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/reactive-element.js";
-import "../../../node_modules/.pnpm/lit-html@3.1.2/node_modules/lit-html/lit-html.js";
-import "../../../node_modules/.pnpm/lit-element@4.0.4/node_modules/lit-element/lit-element.js";
-import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.0.4/node_modules/@lit/reactive-element/css-tag.js";
-const l = e`
+import { css as e } from "lit";
+const r = e`
     .placeholder {
         height: 100%;
         width: 100%;
@@ -23,5 +20,5 @@ const l = e`
     }
 `;
 export {
-  l as placeholderMedia
+  r as placeholderMedia
 };

package/dist/types.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Constructed Theme stylesheet object
+ */
+declare global {
+    interface Window {
+        constructibleStyleSheets: {
+            theme: any;
+        };
+    }
+}
+export interface MergedPadding {
+    cssRem: string;
+    unitless: {
+        top: string;
+        right: string;
+        bottom: string;
+        left: string;
+    };
+    rem: {
+        top: string;
+        right: string;
+        bottom: string;
+        left: string;
+    };
+}
+/**
+ * Libaray icons
+ */
+export type Icons = 'arrow-right' | 'arrow-right-long' | 'arrow-left' | 'arrow-left-long' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'chevron-down' | 'carat-up' | 'bag-shopping' | 'bag-shopping-thin' | 'bars' | 'bin-x-solid' | 'cart' | 'check' | 'close' | 'external' | 'info' | 'minus' | 'pause' | 'play' | 'play-pause' | 'plus' | 'search' | 'smile' | 'store' | 'square-solid' | 'user' | 'warning' | 'amazon' | 'amazon-music' | 'apple' | 'apple-music' | 'backstage' | 'deezer' | 'discord' | 'email' | 'facebook' | 'facebook-like' | 'facebook-like-solid' | 'facebook-messenger' | 'giphy' | 'google-plus' | 'instagram' | 'mix-cloud' | 'musically' | 'pinterest' | 'snapchat' | 'soundcloud' | 'spotify' | 'tidal' | 'tiktok' | 'tumblr' | 'vevo' | 'vimeo' | 'vk' | 'weibo' | 'x-twitter' | 'youtube' | 'youtube-music';
+/**
+ * Component Display Properties
+ */
+export type AnimationDirection = 'up' | 'down' | 'from-left' | 'from-right';
+export type BoxPosition = 'side' | 'over' | 'under' | 'above' | 'top-left' | 'top-center' | 'top-right' | 'center-left' | 'center' | 'center-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export type BoxHeight = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'stretch' | 'adapt';
+export type BoxWidth = 'auto' | 'fill' | 'fit-content';
+export type BoxOuterPadding = 'none' | 'small' | 'medium' | 'large';
+export type ButtonAlignLabel = 'left' | 'right' | 'center';
+export type ButtonAs = 'button' | 'link';
+export type ButtonStyle = 'solid' | 'outline' | 'plain' | 'plain-underline';
+export type ButtonSize = 'large' | 'medium' | 'small' | 'slim';
+export type ButtonType = 'button' | 'submit' | 'reset';
+export type ContentAlign = 'start' | 'center' | 'end';
+export type Direction = 'to-top' | 'to-left' | 'to-right' | 'to-bottom';
+export type DecimalZeroToOne = 0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1;
+export type FieldTextType = 'text' | 'email' | 'date' | 'number' | 'checkbox' | 'radio';
+export type FontBodySize = 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | '2xLarge' | '3xLarge';
+export type FontStyle = 'normal' | 'italic' | 'oblique';
+export type FontWeight = 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
+export type HeaderLayout = 'logo-left' | 'logo-center' | 'nav-center' | 'content-right';
+export type GridSpacing = 'none' | 'compact' | 'normal' | 'loose';
+export type GroupAlign = 'start' | 'center' | 'end' | 'baseline' | 'space-evenly' | 'space-between' | 'space-around' | 'stretch';
+export type GroupSpacing = 'none' | 'compact' | 'normal' | 'loose';
+export type ImageLazy = 'lazy' | 'eager';
+export type LinkTarget = '_blank' | '_self';
+export type MediaFit = 'none' | 'adapt' | 'cover' | 'contain' | '';
+export type MediaSize = 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge' | '2xLarge' | '3xLarge';
+export type PaddingScale = '' | '0' | '4' | '8' | '12' | '16' | '20' | '24' | '32' | '40' | '48' | '56' | '72' | '80' | '88' | '96' | '104' | '112' | '120' | '128';
+export type PageWidth = 'page-width' | 'full-width' | 'full-bleed';
+export type PageWidthScale = undefined | 768 | 982 | 1200 | 1408 | 1600 | 2000 | 4000;
+export type TextAlignment = 'start' | 'center' | 'end' | 'justify';
+export type TextAs = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'p' | 'span' | 'skeleton';
+export type TextColor = 'default' | 'warning' | 'subdued' | 'text-inverse';
+export type TextLineHeight = 'extra-loose' | 'loose' | 'normal' | 'compact';
+export type TextTransform = 'none' | 'uppercase' | 'capitalize' | 'lowercase';
+export type TextVariant = 'headingXs' | 'headingSm' | 'headingMd' | 'headingLg' | 'headingXl' | 'heading2xl' | 'heading3xl' | 'heading4xl' | 'heading5xl' | 'bodyXs' | 'bodySm' | 'bodyMd' | 'bodyLg' | 'bodyXl' | 'body2xl' | 'body3xl' | 'body4xl' | 'body5xl';