@pine-ds/core 0.0.2-alpha.1 → 0.0.3-rc.0

package/components/pds-avatar.js

@@ -1,7 +1,8 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './pds-icon2.js';
 
-const pdsAvatarCss = ":host{display:inline-block}div{--background-color:var(--pine-color-primary-100);--badge-background-color:var(--pine-color-base-white);--border:var(--pine-border-default);--radius-round:50%;-ms-flex-align:center;align-items:center;background-color:var(--background-color);border-radius:var(--radius-round);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{border-radius:12px}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{--radius-round:50%;--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--radius-round);cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-avatar__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-avatar__badge{background-color:var(--badge-background-color);border:var(--border);border-color:var(--badge-background-color);border-radius:var(--radius-round);bottom:0;position:absolute;right:0}img{border-radius:var(--radius-round);width:100%}";
+const pdsAvatarCss = ":host{display:inline-block}div{--background-color:var(--pine-color-primary-100);--badge-background-color:var(--pine-color-base-white);--border:var(--pine-border-default);--radius-round:50%;-ms-flex-align:center;align-items:center;background-color:var(--background-color);border-radius:var(--admin-radius-round, var(--radius-round));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--admin-radius-round:12px;border-radius:var(--admin-radius-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{--box-shadow-focus:0 0 0 4px var(--pine-color-primary-200);-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--radius-round);cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-avatar__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-avatar__badge{background-color:var(--badge-background-color);border:var(--border);border-color:var(--badge-background-color);border-radius:var(--radius-round);bottom:0;position:absolute;right:0}img{border-radius:var(--admin-radius-round, var(--radius-round));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}";
+const PdsAvatarStyle0 = pdsAvatarCss;
 
 const PdsAvatar$1 = /*@__PURE__*/ proxyCustomElement(class PdsAvatar extends HTMLElement {
     constructor() {
@@ -11,7 +12,7 @@ const PdsAvatar$1 = /*@__PURE__*/ proxyCustomElement(class PdsAvatar extends HTM
         this.renderAvatar = () => {
             const style = {
                 height: this.avatarSize(),
-                width: this.avatarSize(),
+                width: this.avatarSize()
             };
             return (this.dropdown
                 ?
@@ -32,7 +33,7 @@ const PdsAvatar$1 = /*@__PURE__*/ proxyCustomElement(class PdsAvatar extends HTM
             : h("pds-icon", { name: "user-filled", size: "33.53%" }));
         this.classNames = () => ({
             'pds-avatar': true,
-            [`pds-avatar--has-image`]: this.image !== '' && this.image !== null,
+            [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector
             [`pds-avatar--${this.variant}`]: this.variant === 'admin'
         });
         this.alt = null;
@@ -59,9 +60,9 @@ const PdsAvatar$1 = /*@__PURE__*/ proxyCustomElement(class PdsAvatar extends HTM
         }
     }
     render() {
-        return (h(Host, { id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
+        return (h(Host, { key: '595815274032d146a4bb480940d152ba2507c2b4', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
     }
-    static get style() { return pdsAvatarCss; }
+    static get style() { return PdsAvatarStyle0; }
 }, [1, "pds-avatar", {
         "alt": [1],
         "badge": [4],

package/components/pds-avatar.js.map

@@ -1 +1 @@
-{"file":"pds-avatar.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,uwCAAuwC;;MCO/wCA,WAAS;;;;;QAiEZ,iBAAY,GAAG;YACrB,MAAM,KAAK,GAAG;gBACZ,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE;gBACzB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;aACzB,CAAC;YACF,QACE,IAAI,CAAC,QAAQ;;oBAEX,cAAQ,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,QAAQ,IAC9C,WAAK,KAAK,EAAE,KAAK,IACd,IAAI,CAAC,iBAAiB,EAAE,EACxB,IAAI,CAAC,WAAW,EAAE,CACf,CACC;;oBAET,WAAK,KAAK,EAAE,KAAK,IACd,IAAI,CAAC,iBAAiB,EAAE,EACxB,IAAI,CAAC,WAAW,EAAE,CACf,EACT;SACF,CAAC;QAEM,gBAAW,GAAG,OACpB,IAAI,CAAC,KAAK;;;;eAIL,gBAAU,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,qBAAqB,EAAC,IAAI,EAAC,QAAQ,GAAY,CAC9F,CAAC;QAEM,sBAAiB,GAAG,OAC1B,IAAI,CAAC,KAAK;cACN,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,GAAI;;;;cAIvC,gBAAU,IAAI,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,GAAY,CAC3D,CAAC;QAEM,eAAU,GAAG,OACnB;YACE,YAAY,EAAE,IAAI;YAClB,CAAC,uBAAuB,GAAG,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;YACnE,CAAC,eAAe,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO;SAC1D,CACF,CAAC;mBAxG4B,IAAI;qBAMjB,KAAK;;wBAWF,KAAK;qBAMO,IAAI;oBAYzB,IAAI;uBAM2C,UAAU;;IAE5D,UAAU;QAChB,MAAM,KAAK,GAA2B;YACpC,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;SACX,CAAA;QAED,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACpB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACzB;aAAM;YACL,OAAO,IAAI,CAAC,IAAI,CAAA;SACjB;KACF;IAiDD,MAAM;QAEJ,QACE,EAAC,IAAI,IACH,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,KAAK,oBAAM,IAAI,CAAC,UAAU,EAAE,KAE3B,IAAI,CAAC,YAAY,EAAE,CACf,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsAvatar"],"sources":["src/components/pds-avatar/pds-avatar.scss?tag=pds-avatar&encapsulation=shadow","src/components/pds-avatar/pds-avatar.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\ndiv {\n  // These custom props are not reachable\n  --background-color: var(--pine-color-primary-100);\n  --badge-background-color: var(--pine-color-base-white);\n  --border: var(--pine-border-default);\n  --radius-round: 50%;\n\n  align-items: center;\n  background-color: var(--background-color);\n  border-radius: var(--radius-round);\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  :host(.pds-avatar--admin) & {\n    border-radius: 12px;\n  }\n\n  // Remove when FF has support for :has\n  :host(.pds-avatar--has-image) & {\n    background: transparent\n  }\n\n  @supports selector(:has) {\n    &:has(img) {\n      background-color: transparent\n    }\n  }\n}\n\n.pds-avatar__button {\n  --radius-round: 50%;\n  --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);\n\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-round);\n  cursor: pointer;\n  display: flex;\n  padding: 0;\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n}\n\n.pds-avatar__badge {\n  background-color: var(--badge-background-color);\n  border: var(--border);\n  border-color: var(--badge-background-color);\n  border-radius: var(--radius-round);\n  bottom: 0;\n  position: absolute;\n  right: 0;\n}\n\nimg {\n  border-radius: var(--radius-round);\n  width: 100%;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-avatar',\n  styleUrl: 'pds-avatar.scss',\n  shadow: true,\n})\nexport class PdsAvatar {\n\n  /**\n   * The alt for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() alt?: string | null = null;\n\n  /**\n   * Determines whether the badge is visible or not.\n   * @defaultValue false\n   */\n  @Prop() badge? = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the avatar functions as a dropdown trigger.\n   * @defaultValue false\n   */\n  @Prop() dropdown? = false;\n\n  /**\n   * The src for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() image?: string | null = null;\n\n  /**\n   * Size of the avatar. Value can be preset or custom.\n   * @defaultValue lg\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xl' // 64px\n  | 'lg' // 56px\n  | 'md' // 40px\n  | 'sm' // 32px\n  | 'xs' // 24px\n  | string = 'lg';\n\n  /**\n   * Determines the variant of avatar. Changes appearance accordingly.\n   * @defaultValue customer\n   */\n  @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n  private avatarSize() {\n    const sizes: { [key: string]: any } = {\n      xs: '24px',\n      sm: '32px',\n      md: '40px',\n      lg: '56px',\n      xl: '64px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size\n    }\n  }\n\n  private renderAvatar = () => {\n    const style = {\n      height: this.avatarSize(),\n      width: this.avatarSize(),\n    };\n    return (\n      this.dropdown\n        ?\n        <button class=\"pds-avatar__button\" type=\"button\">\n          <div style={style}>\n            {this.renderIconOrImage()}\n            {this.renderBadge()}\n          </div>\n        </button>\n        :\n        <div style={style}>\n          {this.renderIconOrImage()}\n          {this.renderBadge()}\n        </div>\n    )\n  };\n\n  private renderBadge = () => (\n    this.badge\n    // Percentage is average size of icon in relation to total avatar size\n    // of all preset sizes found in Figma.\n    // Used to allow icons to scale to container size\n      && <pds-icon class=\"pds-avatar__badge\" name=\"check-circle-filled\" size=\"33.53%\"></pds-icon>\n  );\n\n  private renderIconOrImage = () => (\n    this.image\n      ? <img alt={this.alt} src={this.image} />\n      // Percentage is average size of icon in relation to total avatar size\n      // of all preset sizes found in Figma.\n      // Used to allow icons to scale to container size\n      : <pds-icon name=\"user-filled\" size=\"33.53%\"></pds-icon>\n  );\n\n  private classNames = () => (\n    {\n      'pds-avatar': true,\n      [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n      [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n    }\n  );\n\n  render() {\n\n    return (\n      <Host\n        id={this.componentId}\n        class={{...this.classNames()}}\n      >\n        {this.renderAvatar()}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-avatar.js","mappings":";;;AAAA,MAAM,YAAY,GAAG,04CAA04C,CAAC;AACh6C,wBAAe,YAAY;;MCMdA,WAAS;;;;;QAiEZ,iBAAY,GAAG;YACrB,MAAM,KAAK,GAAG;gBACZ,MAAM,EAAE,IAAI,CAAC,UAAU,EAAE;gBACzB,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;aACzB,CAAC;YACF,QACE,IAAI,CAAC,QAAQ;;oBAEX,cAAQ,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,QAAQ,IAC9C,WAAK,KAAK,EAAE,KAAK,IACd,IAAI,CAAC,iBAAiB,EAAE,EACxB,IAAI,CAAC,WAAW,EAAE,CACf,CACC;;oBAET,WAAK,KAAK,EAAE,KAAK,IACd,IAAI,CAAC,iBAAiB,EAAE,EACxB,IAAI,CAAC,WAAW,EAAE,CACf,EACT;SACF,CAAC;QAEM,gBAAW,GAAG,OACpB,IAAI,CAAC,KAAK;;;;eAIL,gBAAU,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,qBAAqB,EAAC,IAAI,EAAC,QAAQ,GAAY,CAC9F,CAAC;QAEM,sBAAiB,GAAG,OAC1B,IAAI,CAAC,KAAK;cACN,WAAK,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,GAAI;;;;cAIvC,gBAAU,IAAI,EAAC,aAAa,EAAC,IAAI,EAAC,QAAQ,GAAY,CAC3D,CAAC;QAEM,eAAU,GAAG,OACnB;YACE,YAAY,EAAE,IAAI;YAClB,CAAC,uBAAuB,GAAG,IAAI,CAAC,KAAK,KAAK,EAAE,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI;YACnE,CAAC,eAAe,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO;SAC1D,CACF,CAAC;mBAxG4B,IAAI;qBAMjB,KAAK;;wBAWF,KAAK;qBAMO,IAAI;oBAYzB,IAAI;uBAM2C,UAAU;;IAE5D,UAAU;QAChB,MAAM,KAAK,GAA2B;YACpC,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,MAAM;SACX,CAAA;QAED,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YACpB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACzB;aAAM;YACL,OAAO,IAAI,CAAC,IAAI,CAAA;SACjB;KACF;IAiDD,MAAM;QAEJ,QACE,EAAC,IAAI,qDACH,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,KAAK,oBAAM,IAAI,CAAC,UAAU,EAAE,KAE3B,IAAI,CAAC,YAAY,EAAE,CACf,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsAvatar"],"sources":["src/components/pds-avatar/pds-avatar.scss?tag=pds-avatar&encapsulation=shadow","src/components/pds-avatar/pds-avatar.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n\ndiv {\n  // These custom props are not reachable\n  --background-color: var(--pine-color-primary-100);\n  --badge-background-color: var(--pine-color-base-white);\n  --border: var(--pine-border-default);\n  --radius-round: 50%;\n\n  align-items: center;\n  background-color: var(--background-color);\n  border-radius: var(--admin-radius-round, var(--radius-round));\n  display: inline-flex;\n  justify-content: center;\n  position: relative;\n\n  :host(.pds-avatar--admin) & {\n    --admin-radius-round: 12px;\n    border-radius: var(--admin-radius-round);\n  }\n\n  // Remove when FF has support for :has\n  :host(.pds-avatar--has-image) & {\n    background: transparent\n  }\n\n  @supports selector(:has) {\n    &:has(img) {\n      background-color: transparent\n    }\n  }\n}\n\n.pds-avatar__button {\n  --box-shadow-focus: 0 0 0 4px var(--pine-color-primary-200);\n\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: var(--radius-round);\n  cursor: pointer;\n  display: flex;\n  padding: 0;\n\n  &:focus-visible {\n    // outline: var(--pine-border-focus); Border radius for outline does not work in Safari\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n}\n\n.pds-avatar__badge {\n  background-color: var(--badge-background-color);\n  border: var(--border);\n  border-color: var(--badge-background-color);\n  border-radius: var(--radius-round);\n  bottom: 0;\n  position: absolute;\n  right: 0;\n}\n\nimg {\n  border-radius: var(--admin-radius-round, var(--radius-round));\n  height: 100%;\n  object-fit: cover;\n  width: 100%;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'pds-avatar',\n  styleUrl: 'pds-avatar.scss',\n  shadow: true,\n})\nexport class PdsAvatar {\n\n  /**\n   * The alt for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() alt?: string | null = null;\n\n  /**\n   * Determines whether the badge is visible or not.\n   * @defaultValue false\n   */\n  @Prop() badge? = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether the avatar functions as a dropdown trigger.\n   * @defaultValue false\n   */\n  @Prop() dropdown? = false;\n\n  /**\n   * The src for a custom user image.\n   * @defaultValue null\n   */\n  @Prop() image?: string | null = null;\n\n  /**\n   * Size of the avatar. Value can be preset or custom.\n   * @defaultValue lg\n   */\n  @Prop({ reflect: true }) size?:\n  | 'xl' // 64px\n  | 'lg' // 56px\n  | 'md' // 40px\n  | 'sm' // 32px\n  | 'xs' // 24px\n  | string = 'lg';\n\n  /**\n   * Determines the variant of avatar. Changes appearance accordingly.\n   * @defaultValue customer\n   */\n  @Prop({ reflect: true }) variant?: 'customer' | 'admin' = 'customer';\n\n  private avatarSize() {\n    const sizes: { [key: string]: any } = {\n      xs: '24px',\n      sm: '32px',\n      md: '40px',\n      lg: '56px',\n      xl: '64px',\n    }\n\n    if (sizes[this.size]) {\n      return sizes[this.size];\n    } else {\n      return this.size\n    }\n  }\n\n  private renderAvatar = () => {\n    const style = {\n      height: this.avatarSize(),\n      width: this.avatarSize()\n    };\n    return (\n      this.dropdown\n        ?\n        <button class=\"pds-avatar__button\" type=\"button\">\n          <div style={style}>\n            {this.renderIconOrImage()}\n            {this.renderBadge()}\n          </div>\n        </button>\n        :\n        <div style={style}>\n          {this.renderIconOrImage()}\n          {this.renderBadge()}\n        </div>\n    )\n  };\n\n  private renderBadge = () => (\n    this.badge\n    // Percentage is average size of icon in relation to total avatar size\n    // of all preset sizes found in Figma.\n    // Used to allow icons to scale to container size\n      && <pds-icon class=\"pds-avatar__badge\" name=\"check-circle-filled\" size=\"33.53%\"></pds-icon>\n  );\n\n  private renderIconOrImage = () => (\n    this.image\n      ? <img alt={this.alt} src={this.image} />\n      // Percentage is average size of icon in relation to total avatar size\n      // of all preset sizes found in Figma.\n      // Used to allow icons to scale to container size\n      : <pds-icon name=\"user-filled\" size=\"33.53%\"></pds-icon>\n  );\n\n  private classNames = () => (\n    {\n      'pds-avatar': true,\n      [`pds-avatar--has-image`]: this.image !== '' && this.image !== null, // Remove when FF supports :has selector\n      [`pds-avatar--${this.variant}`]: this.variant === 'admin'\n    }\n  );\n\n  render() {\n\n    return (\n      <Host\n        id={this.componentId}\n        class={{...this.classNames()}}\n      >\n        {this.renderAvatar()}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pds-box.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface PdsBox extends Components.PdsBox, HTMLElement {}
+export const PdsBox: {
+    prototype: PdsBox;
+    new (): PdsBox;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pds-box.js

@@ -0,0 +1,124 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pdsBoxCss = "pds-box{--box-background-color:inherit;--box-border-color:inherit;--box-min-height:none;--box-min-width:none;--box-gap-xxs:var(--pine-spacing-050);--box-gap-xs:var(--pine-spacing-100);--box-gap-sm:var(--pine-spacing-200);--box-gap-md:var(--pine-spacing-300);--box-gap-lg:var(--pine-spacing-450);--box-gap-xl:var(--pine-spacing-600);--box-gap-xxl:var(--pine-spacing-800);display:block}img{width:100%}[class*=pds-box]{background-color:var(--box-background-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;min-height:var(--box-min-height);min-width:var(--box-min-width)}.pds-row>[class*=pds-box]{position:relative;width:100%}.pds-row>[class*=pds-box].pds-box--auto{width:auto}.pds-spacing-xxs{margin:4px}.pds-spacing-xs{margin:8px}.pds-spacing-sm{margin:16px}.pds-spacing-md{margin:24px}.pds-spacing-lg{margin:36px}.pds-spacing-xl{margin:48px}.pds-spacing-2xl{margin:64px}.pds-spacing-top-xxs{-webkit-margin-before:4px;margin-block-start:4px}.pds-spacing-top-xs{-webkit-margin-before:8px;margin-block-start:8px}.pds-spacing-top-sm{-webkit-margin-before:16px;margin-block-start:16px}.pds-spacing-top-md{-webkit-margin-before:24px;margin-block-start:24px}.pds-spacing-top-lg{-webkit-margin-before:36px;margin-block-start:36px}.pds-spacing-top-xl{-webkit-margin-before:48px;margin-block-start:48px}.pds-spacing-top-2xl{-webkit-margin-before:64px;margin-block-start:64px}.pds-spacing-right-xxs{-webkit-margin-end:4px;margin-inline-end:4px}.pds-spacing-right-xs{-webkit-margin-end:8px;margin-inline-end:8px}.pds-spacing-right-sm{-webkit-margin-end:16px;margin-inline-end:16px}.pds-spacing-right-md{-webkit-margin-end:24px;margin-inline-end:24px}.pds-spacing-right-lg{-webkit-margin-end:36px;margin-inline-end:36px}.pds-spacing-right-xl{-webkit-margin-end:48px;margin-inline-end:48px}.pds-spacing-right-2xl{-webkit-margin-end:64px;margin-inline-end:64px}.pds-spacing-left-xxs{-webkit-margin-start:4px;margin-inline-start:4px}.pds-spacing-left-xs{-webkit-margin-start:8px;margin-inline-start:8px}.pds-spacing-left-sm{-webkit-margin-start:16px;margin-inline-start:16px}.pds-spacing-left-md{-webkit-margin-start:24px;margin-inline-start:24px}.pds-spacing-left-lg{-webkit-margin-start:36px;margin-inline-start:36px}.pds-spacing-left-xl{-webkit-margin-start:48px;margin-inline-start:48px}.pds-spacing-left-2xl{-webkit-margin-start:64px;margin-inline-start:64px}.pds-spacing-bottom-xxs{-webkit-margin-after:4px;margin-block-end:4px}.pds-spacing-bottom-xs{-webkit-margin-after:8px;margin-block-end:8px}.pds-spacing-bottom-sm{-webkit-margin-after:16px;margin-block-end:16px}.pds-spacing-bottom-md{-webkit-margin-after:24px;margin-block-end:24px}.pds-spacing-bottom-lg{-webkit-margin-after:36px;margin-block-end:36px}.pds-spacing-bottom-xl{-webkit-margin-after:48px;margin-block-end:48px}.pds-spacing-bottom-2xl{-webkit-margin-after:64px;margin-block-end:64px}.pds-box-offset-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-12{-webkit-margin-start:100%;margin-inline-start:100%}@media (max-width: 575px){.pds-box-offset-xs-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xs-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xs-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xs-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xs-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xs-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xs-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xs-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xs-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xs-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xs-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xs-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xs-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 576px){.pds-box-offset-sm-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-sm-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-sm-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-sm-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-sm-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-sm-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-sm-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-sm-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-sm-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-sm-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-sm-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-sm-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-sm-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 768px){.pds-box-offset-md-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-md-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-md-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-md-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-md-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-md-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-md-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-md-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-md-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-md-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-md-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-md-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-md-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 992px){.pds-box-offset-lg-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-lg-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-lg-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-lg-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-lg-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-lg-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-lg-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-lg-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-lg-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-lg-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-lg-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-lg-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-lg-12{-webkit-margin-start:100%;margin-inline-start:100%}}@media (min-width: 1200px){.pds-box-offset-xl-0{-webkit-margin-start:0;margin-inline-start:0}.pds-box-offset-xl-1{-webkit-margin-start:8.3333333333%;margin-inline-start:8.3333333333%}.pds-box-offset-xl-2{-webkit-margin-start:16.6666666667%;margin-inline-start:16.6666666667%}.pds-box-offset-xl-3{-webkit-margin-start:25%;margin-inline-start:25%}.pds-box-offset-xl-4{-webkit-margin-start:33.3333333333%;margin-inline-start:33.3333333333%}.pds-box-offset-xl-5{-webkit-margin-start:41.6666666667%;margin-inline-start:41.6666666667%}.pds-box-offset-xl-6{-webkit-margin-start:50%;margin-inline-start:50%}.pds-box-offset-xl-7{-webkit-margin-start:58.3333333333%;margin-inline-start:58.3333333333%}.pds-box-offset-xl-8{-webkit-margin-start:66.6666666667%;margin-inline-start:66.6666666667%}.pds-box-offset-xl-9{-webkit-margin-start:75%;margin-inline-start:75%}.pds-box-offset-xl-10{-webkit-margin-start:83.3333333333%;margin-inline-start:83.3333333333%}.pds-box-offset-xl-11{-webkit-margin-start:91.6666666667%;margin-inline-start:91.6666666667%}.pds-box-offset-xl-12{-webkit-margin-start:100%;margin-inline-start:100%}}.pds-box-0{display:none}.pds-box-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}@media (max-width: 575px){.pds-box-xs-0{display:none}.pds-box-xs-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xs-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xs-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xs-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xs-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xs-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xs-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xs-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xs-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xs-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xs-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xs-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 576px){.pds-box-sm-0{display:none}.pds-box-sm-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-sm-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-sm-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-sm-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-sm-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-sm-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-sm-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-sm-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-sm-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-sm-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-sm-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-sm-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 768px){.pds-box-md-0{display:none}.pds-box-md-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-md-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-md-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-md-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-md-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-md-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-md-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-md-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-md-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-md-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-md-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-md-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 992px){.pds-box-lg-0{display:none}.pds-box-lg-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-lg-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-lg-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-lg-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-lg-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-lg-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-lg-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-lg-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-lg-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-lg-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-lg-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-lg-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}@media (min-width: 1200px){.pds-box-xl-0{display:none}.pds-box-xl-1{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:8.3333333333%;flex:8.3333333333%;max-width:8.3333333333%}.pds-box-xl-2{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:16.6666666667%;flex:16.6666666667%;max-width:16.6666666667%}.pds-box-xl-3{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:25%;flex:25%;max-width:25%}.pds-box-xl-4{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:33.3333333333%;flex:33.3333333333%;max-width:33.3333333333%}.pds-box-xl-5{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:41.6666666667%;flex:41.6666666667%;max-width:41.6666666667%}.pds-box-xl-6{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:50%;flex:50%;max-width:50%}.pds-box-xl-7{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:58.3333333333%;flex:58.3333333333%;max-width:58.3333333333%}.pds-box-xl-8{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:66.6666666667%;flex:66.6666666667%;max-width:66.6666666667%}.pds-box-xl-9{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:75%;flex:75%;max-width:75%}.pds-box-xl-10{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:83.3333333333%;flex:83.3333333333%;max-width:83.3333333333%}.pds-box-xl-11{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:91.6666666667%;flex:91.6666666667%;max-width:91.6666666667%}.pds-box-xl-12{display:-ms-inline-flexbox;display:inline-flex;-ms-flex:100%;flex:100%;max-width:100%}}.pds-box{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1}.pds-box--auto{-ms-flex:0 0 var(--box-min-width, fit-content);flex:0 0 var(--box-min-width, fit-content);min-width:auto;width:auto}.pds-box--fit{max-width:100%;min-width:100%;width:100%}.pds-box--border{border-color:var(--box-border-color, var(--pine-border-default-color));border-style:var(--pine-border-default-style);border-width:var(--pine-border-default-width)}.pds-box--display-flex{display:-ms-flexbox;display:flex}.pds-box--display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box--display-block{display:block}.pds-box--display-inline-block{display:inline-block}.pds-box--flex-none{-ms-flex:0 0 auto;flex:0 0 auto}.pds-box--flex-grow{-ms-flex:1 1 auto;flex:1 1 auto}.pds-box--flex-shrink{-ms-flex:0 0 auto;flex:0 0 auto}.pds-border-radius-none{border-radius:0}.pds-border-radius-xs{border-radius:var(--pine-border-radius-xs)}.pds-border-radius-sm{border-radius:var(--pine-border-radius-sm)}.pds-border-radius-md{border-radius:var(--pine-border-radius-md)}.pds-border-radius-lg{border-radius:var(--pine-border-radius-lg)}.pds-border-radius-circle{border-radius:50%}.pds-shadow-xs{-webkit-box-shadow:var(--pine-box-shadow-xs);box-shadow:var(--pine-box-shadow-xs)}.pds-shadow-sm{-webkit-box-shadow:var(--pine-box-shadow-sm);box-shadow:var(--pine-box-shadow-sm)}.pds-shadow-md{-webkit-box-shadow:var(--pine-box-shadow-md);box-shadow:var(--pine-box-shadow-md)}.pds-shadow-lg{-webkit-box-shadow:var(--pine-box-shadow-lg);box-shadow:var(--pine-box-shadow-lg)}.pds-box-gap-none{gap:0}.pds-box-gap-xxs{gap:var(--box-gap-xxs)}.pds-box-gap-xs{gap:var(--box-gap-xs)}.pds-box-gap-sm{gap:var(--box-gap-sm)}.pds-box-gap-md{gap:var(--box-gap-md)}.pds-box-gap-lg{gap:var(--box-gap-lg)}.pds-box-gap-xl{gap:var(--box-gap-xl)}.pds-box-gap-xxl{gap:var(--box-gap-2xl)}.pds-padding-none{padding:0}.pds-padding-xxs{padding:var(--box-gap-xxs)}.pds-padding-xs{padding:var(--box-gap-xxs)}.pds-padding-sm{padding:var(--box-gap-sm)}.pds-padding-md{padding:var(--box-gap-md)}.pds-padding-lg{padding:var(--box-gap-lg)}.pds-padding-xl{padding:var(--box-gap-xl)}.pds-padding-xxl{padding:var(--box-gap-2xl)}.pds-box-display-flex{display:-ms-flexbox;display:flex}.pds-box-display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box-direction-row{-ms-flex-direction:row;flex-direction:row}.pds-box-direction-column{-ms-flex-direction:column;flex-direction:column}.pds-justify-content-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.pds-align-items-start{-ms-flex-align:start;align-items:start}.pds-align-items-center{-ms-flex-align:center;align-items:center}.pds-align-items-end{-ms-flex-align:end;align-items:end}.pds-align-items-stretch{-ms-flex-align:stretch;align-items:stretch}.pds-align-items-baseline{-ms-flex-align:baseline;align-items:baseline}";
+const PdsBoxStyle0 = pdsBoxCss;
+
+const PdsBox$1 = /*@__PURE__*/ proxyCustomElement(class PdsBox extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.alignItems = undefined;
+        this.auto = undefined;
+        this.backgroundColor = undefined;
+        this.border = false;
+        this.borderColor = undefined;
+        this.borderRadius = undefined;
+        this.direction = undefined;
+        this.display = undefined;
+        this.fit = undefined;
+        this.gap = undefined;
+        this.flex = undefined;
+        this.justifyContent = undefined;
+        this.minHeight = undefined;
+        this.minWidth = undefined;
+        this.offset = undefined;
+        this.offsetXs = undefined;
+        this.offsetSm = undefined;
+        this.offsetMd = undefined;
+        this.offsetLg = undefined;
+        this.offsetXl = undefined;
+        this.padding = undefined;
+        this.shadow = undefined;
+        this.size = undefined;
+        this.sizeXs = undefined;
+        this.sizeSm = undefined;
+        this.sizeMd = undefined;
+        this.sizeLg = undefined;
+        this.sizeXl = undefined;
+    }
+    render() {
+        const boxClasses = `
+    ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
+    ${this.auto ? 'pds-box--auto' : ''}
+    ${this.border ? 'pds-box--border' : ''}
+    ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}
+    ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}
+    ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}
+    ${this.fit ? 'pds-box--fit' : ''}
+    ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}
+    ${this.flex !== undefined && this.flex.trim() !== '' ? `pds-box--flex-${this.flex}` : ''}
+    ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
+    ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}
+    ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}
+    ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}
+    ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}
+    ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}
+    ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}
+    ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}
+    ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}
+    ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}
+    ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}
+    ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}
+    ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}
+    ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}
+    ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}
+    ${this.size == undefined &&
+            this.sizeSm == undefined &&
+            this.sizeMd == undefined &&
+            this.sizeLg == undefined &&
+            this.sizeXl == undefined ? 'pds-box' : ''}
+    `;
+        const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (this.backgroundColor && { '--box-background-color': this.backgroundColor })), (this.borderColor && { '--box-border-color': this.borderColor })), (this.minHeight && { '--box-min-height': this.minHeight })), (this.minWidth && { '--box-min-width': this.minWidth }));
+        return (h(Host, { key: '39cf80d5cbcc14aeca43345e4532b7a77dc6f880', class: boxClasses, style: boxInlineStyles }));
+    }
+    static get style() { return PdsBoxStyle0; }
+}, [0, "pds-box", {
+        "alignItems": [1, "align-items"],
+        "auto": [4],
+        "backgroundColor": [1, "background-color"],
+        "border": [4],
+        "borderColor": [1, "border-color"],
+        "borderRadius": [1, "border-radius"],
+        "direction": [1],
+        "display": [1],
+        "fit": [4],
+        "gap": [1],
+        "flex": [1],
+        "justifyContent": [1, "justify-content"],
+        "minHeight": [1, "min-height"],
+        "minWidth": [1, "min-width"],
+        "offset": [1],
+        "offsetXs": [1, "offset-xs"],
+        "offsetSm": [1, "offset-sm"],
+        "offsetMd": [1, "offset-md"],
+        "offsetLg": [1, "offset-lg"],
+        "offsetXl": [1, "offset-xl"],
+        "padding": [1],
+        "shadow": [1],
+        "size": [1],
+        "sizeXs": [1, "size-xs"],
+        "sizeSm": [1, "size-sm"],
+        "sizeMd": [1, "size-md"],
+        "sizeLg": [1, "size-lg"],
+        "sizeXl": [1, "size-xl"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pds-box"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pds-box":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PdsBox$1);
+            }
+            break;
+    } });
+}
+
+const PdsBox = PdsBox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PdsBox, defineCustomElement };
+
+//# sourceMappingURL=pds-box.js.map

package/components/pds-box.js.map

@@ -0,0 +1 @@
+{"file":"pds-box.js","mappings":";;AAAA,MAAM,SAAS,GAAG,0lqBAA0lqB,CAAC;AAC7mqB,qBAAe,SAAS;;MCOXA,QAAM;;;;;;;sBAoBC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;IAkIvB,MAAM;QACJ,MAAM,UAAU,GAAG;MACjB,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,mBAAmB,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE;MAC1G,IAAI,CAAC,IAAI,GAAG,eAAe,GAAG,EAAE;MAChC,IAAI,CAAC,MAAM,GAAG,iBAAiB,GAAG,EAAE;MACpC,IAAI,CAAC,YAAY,KAAK,SAAS,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,qBAAqB,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE;MAClH,IAAI,CAAC,SAAS,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,qBAAqB,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE;MACzG,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,oBAAoB,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE;MAClG,IAAI,CAAC,GAAG,GAAG,cAAc,GAAG,EAAE;MAC9B,IAAI,CAAC,GAAG,KAAK,SAAS,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,eAAe,IAAI,CAAC,GAAG,EAAE,GAAG,EAAE;MACjF,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,iBAAiB,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;MACtF,IAAI,CAAC,cAAc,KAAK,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,uBAAuB,IAAI,CAAC,cAAc,EAAE,GAAG,EAAE;MAC1H,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,kBAAkB,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE;MAC7F,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,qBAAqB,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE;MACtG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,qBAAqB,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE;MACtG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,qBAAqB,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE;MACtG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,qBAAqB,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE;MACtG,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,qBAAqB,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE;MACtG,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,eAAe,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE;MAC7F,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE;MACzF,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,mBAAmB,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE;MACxF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE;MACzF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE;MACzF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE;MACzF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE;MACzF,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,cAAc,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE;MACzF,IAAI,CAAC,IAAI,IAAI,SAAS;YACtB,IAAI,CAAC,MAAM,IAAI,SAAS;YACxB,IAAI,CAAC,MAAM,IAAI,SAAS;YACxB,IAAI,CAAC,MAAM,IAAI,SAAS;YACxB,IAAI,CAAC,MAAM,IAAI,SAAS,GAAG,SAAS,GAAG,EAAE;KAC1C,CAAC;QAEF,MAAM,eAAe,gEACf,IAAI,CAAC,eAAe,IAAI,EAAE,wBAAwB,EAAE,IAAI,CAAC,eAAe,EAAE,KAC1E,IAAI,CAAC,WAAW,IAAI,EAAE,oBAAoB,EAAE,IAAI,CAAC,WAAW,EAAE,KAC9D,IAAI,CAAC,SAAS,IAAI,EAAE,kBAAkB,EAAE,IAAI,CAAC,SAAS,EAAE,KACxD,IAAI,CAAC,QAAQ,IAAI,EAAE,iBAAiB,EAAE,IAAI,CAAC,QAAQ,EAAE,EAC1D,CAAC;QAEF,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,GACxC,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsBox"],"sources":["src/components/pds-box/pds-box.scss?tag=pds-box","src/components/pds-box/pds-box.tsx"],"sourcesContent":["@import './pds-box.mixins';\n\npds-box {\n  --box-background-color: inherit;\n  --box-border-color: inherit;\n  --box-min-height: none;\n  --box-min-width: none;\n\n  --box-gap-xxs: var(--pine-spacing-050);\n  --box-gap-xs: var(--pine-spacing-100);\n  --box-gap-sm: var(--pine-spacing-200);\n  --box-gap-md: var(--pine-spacing-300);\n  --box-gap-lg: var(--pine-spacing-450);\n  --box-gap-xl: var(--pine-spacing-600);\n  --box-gap-xxl: var(--pine-spacing-800);\n\n  display: block;\n}\n\nimg {\n  width: 100%;\n}\n\n[class*='pds-box'] {\n  background-color: var(--box-background-color);\n  box-sizing: border-box;\n  display: inline-flex;\n  min-height: var(--box-min-height);;\n  min-width: var(--box-min-width);\n\n  // The immediate child of the row will fit the width of the row\n  .pds-row > & {\n    position: relative;\n    width: 100%;\n\n    &.pds-box--auto {\n      width: auto;\n    }\n  }\n}\n\n// Spacing mixin\n$pine-spacing-tokens: (\n  xxs: 4px,\n  xs: 8px,\n  sm: 16px,\n  md: 24px,\n  lg: 36px,\n  xl: 48px,\n  2xl: 64px,\n);\n\n// Generate spacing classes\n@include generate-spacing-classes(false, $pine-spacing-tokens);\n@include generate-spacing-classes('top', $pine-spacing-tokens);\n@include generate-spacing-classes('right', $pine-spacing-tokens);\n@include generate-spacing-classes('left', $pine-spacing-tokens);\n@include generate-spacing-classes('bottom', $pine-spacing-tokens);\n\n// Base offset classes\n@include generate-column-offsets(false, 12);\n\n// Responsive offset classes\n@media (max-width: 575px) {\n  @include generate-column-offsets('xs', 12);\n}\n\n@media (min-width: 576px) {\n  @include generate-column-offsets('sm', 12);\n}\n\n@media (min-width: 768px) {\n  @include generate-column-offsets('md', 12);\n}\n\n@media (min-width: 992px) {\n  @include generate-column-offsets('lg', 12);\n}\n\n@media (min-width: 1200px) {\n  @include generate-column-offsets('xl', 12);\n}\n\n\n// Base column width classes\n@include generate-columns(false, 12);\n\n// Responsive column width classes\n@media (max-width: 575px) {\n  @include generate-columns('xs', 12);\n}\n\n@media (min-width: 576px) {\n  @include generate-columns('sm', 12);\n}\n\n@media (min-width: 768px) {\n  @include generate-columns('md', 12);\n}\n\n@media (min-width: 992px) {\n  @include generate-columns('lg', 12);\n}\n\n@media (min-width: 1200px) {\n  @include generate-columns('xl', 12);\n}\n\n.pds-box {\n  flex-basis: 0;\n  flex-grow: 1;\n}\n\n.pds-box--auto {\n  flex: 0 0 var(--box-min-width, fit-content);\n  min-width: auto;\n  width: auto;\n}\n\n.pds-box--fit {\n  max-width: 100%;\n  min-width: 100%;\n  width: 100%;\n}\n\n.pds-box--border {\n  border-color: var(--box-border-color, var(--pine-border-default-color));\n  border-style: var(--pine-border-default-style);\n  border-width: var(--pine-border-default-width);\n}\n\n// Display helpers\n.pds-box--display-flex {\n  display: flex;\n}\n\n.pds-box--display-inline-flex {\n  display: inline-flex;\n}\n\n.pds-box--display-block {\n  display: block;\n}\n\n.pds-box--display-inline-block {\n  display: inline-block;\n}\n\n// Flex helpers\n.pds-box--flex-none {\n  flex: 0 0 auto;\n}\n\n.pds-box--flex-grow {\n  flex: 1 1 auto\n}\n\n.pds-box--flex-shrink {\n  flex: 0 0 auto;\n}\n\n// Border radius helpers\n.pds-border-radius-none {\n  border-radius: 0;\n}\n\n.pds-border-radius-xs {\n  border-radius: var(--pine-border-radius-xs);\n}\n\n.pds-border-radius-sm {\n  border-radius: var(--pine-border-radius-sm);\n}\n\n.pds-border-radius-md {\n  border-radius: var(--pine-border-radius-md);\n}\n\n.pds-border-radius-lg {\n  border-radius: var(--pine-border-radius-lg);\n}\n\n.pds-border-radius-circle {\n  border-radius: 50%;\n}\n\n// Box shadow helpers\n.pds-shadow-xs {\n  box-shadow: var(--pine-box-shadow-xs);\n}\n\n.pds-shadow-sm {\n  box-shadow: var(--pine-box-shadow-sm);\n}\n\n.pds-shadow-md {\n  box-shadow: var(--pine-box-shadow-md);\n}\n\n.pds-shadow-lg {\n  box-shadow: var(--pine-box-shadow-lg);\n}\n\n// Gap helpers\n.pds-box-gap-none {\n  gap: 0;\n}\n\n.pds-box-gap-xxs {\n  gap: var(--box-gap-xxs);\n}\n\n.pds-box-gap-xs {\n  gap: var(--box-gap-xs);\n}\n\n.pds-box-gap-sm {\n  gap: var(--box-gap-sm);\n}\n\n.pds-box-gap-md {\n  gap: var(--box-gap-md);\n}\n\n.pds-box-gap-lg {\n  gap: var(--box-gap-lg);\n}\n\n.pds-box-gap-xl {\n  gap: var(--box-gap-xl);\n}\n\n.pds-box-gap-xxl {\n  gap: var(--box-gap-2xl);\n}\n\n// Spacing helpers\n.pds-padding-none {\n  padding: 0;\n}\n\n.pds-padding-xxs {\n  padding: var(--box-gap-xxs);\n}\n\n.pds-padding-xs {\n  padding: var(--box-gap-xxs);\n}\n\n.pds-padding-sm {\n  padding: var(--box-gap-sm);\n}\n\n.pds-padding-md {\n  padding: var(--box-gap-md);\n}\n\n.pds-padding-lg {\n  padding: var(--box-gap-lg);\n}\n\n.pds-padding-xl {\n  padding: var(--box-gap-xl);\n}\n\n.pds-padding-xxl {\n  padding: var(--box-gap-2xl);\n}\n\n// Display helpers\n.pds-box-display-flex {\n  display: flex;\n}\n\n.pds-box-display-inline-flex {\n  display: inline-flex;\n}\n\n// Flex Direction helpers\n.pds-box-direction-row {\n  flex-direction: row;\n}\n\n.pds-box-direction-column {\n  flex-direction: column;\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n  justify-content: start;\n}\n\n.pds-justify-content-center {\n  justify-content: center;\n}\n\n.pds-justify-content-end {\n  justify-content: end;\n}\n\n.pds-justify-content-space-between {\n  justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n  justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n  justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n  align-items: start;\n}\n\n.pds-align-items-center {\n  align-items: center;\n}\n\n.pds-align-items-end {\n  align-items: end;\n}\n\n.pds-align-items-stretch {\n  align-items: stretch;\n}\n\n.pds-align-items-baseline {\n  align-items: baseline;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { BoxColumnType, BoxTShirtSizeType } from '../../utils/types';\n\n@Component({\n  tag: 'pds-box',\n  styleUrl: 'pds-box.scss',\n})\nexport class PdsBox {\n  /**\n   * Defines the vertical alignment of the box items.\n   * @defaultValue start\n  */\n  @Prop() alignItems?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n  /**\n   * If `true`, the box will be sized to fit its contents.\n   */\n  @Prop() auto?: boolean;\n\n  /**\n   *  Defines the background-color of the box.\n   */\n  @Prop() backgroundColor?: string;\n\n  /**\n   * If `true`, the box will have a border.\n   */\n  @Prop() border? = false;\n\n  /**\n   *  Defines the border color of the box.\n   */\n  @Prop() borderColor?: string;\n\n  /**\n   * Defines how rounded the box corners are.\n   * @defaultValue none\n   */\n  @Prop() borderRadius?: `none` | `xs`| `sm` | `md` | `lg` | `circle`;\n  \n  /**\n   * Defines the orientation of the box items.\n   * @defaultValue row\n   */\n  @Prop() direction?: `row` | `column`;\n\n  /**\n   * Defines the display style of the box.\n   * @defaultValue flex\n  */\n  @Prop() display?: `flex` | `inline-flex` | `block` | `inline-block`;\n\n  /**\n   * If `true`, sets the box `max-width` to `100%`.\n   */\n  @Prop() fit?: boolean;\n\n  /**\n   * Defines the spacing between the box items.\n   * @defaultValue none\n  */\n  @Prop() gap?: BoxTShirtSizeType;\n\n  /**\n   * Defines how a box will grow or shrink to fit the space available in its container.\n   * @defaultValue none\n   */\n  @Prop() flex?: `none` | `grow` | `shrink`;\n\n  /**\n   * Defines the horizontal alignment of the box items.\n   * @defaultValue start\n  */\n  @Prop() justifyContent?: `start` | `center` | `end` | `space-between` | `space-around`;\n\n  /**\n   * The minimum height of the row. Used in conjunction with alignment props\n   */\n  @Prop() minHeight?: string;\n\n  /**\n   * The minimum width of the row. Used in conjunction with alignment props\n   */\n  @Prop() minWidth?: string;\n  \n  /**\n   * Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns.\n   */\n  @Prop() offset?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetXs?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetSm?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetMd?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetLg?: BoxColumnType;\n\n  /**\n   * Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns.\n  */\n  @Prop() offsetXl?: BoxColumnType;\n\n  /**\n   * Defines the spacing between the box items.\n   * @defaultValue none\n  */\n  @Prop() padding?: BoxTShirtSizeType;\n\n  /**\n   * Defines the box shadow.\n   * @defaultValue none\n  */\n  @Prop() shadow?: BoxTShirtSizeType;\n\n  /**\n   * Size of the column for all screen sizes that are not explicitly set.\n   */\n  @Prop() size?: BoxColumnType;\n\n  /**\n   * At screen sizes less than the `XS` breakpoint, this will take the number of columns specified.\n   */\n  @Prop() sizeXs?: BoxColumnType;\n\n  /**\n   * At screen sizes greater than the `SM` breakpoint, this will take the number of columns specified.\n   */\n  @Prop() sizeSm?: BoxColumnType;\n\n  /**\n   * At screen sizes greater than the `MD` breakpoint, this will take the number of columns specified.\n   */\n  @Prop() sizeMd?: BoxColumnType;\n\n  /**\n   * At screen sizes greater than the `LG` breakpoint, this will take the number of columns specified.\n   */\n  @Prop() sizeLg?: BoxColumnType;\n\n  /**\n   * At screen sizes greater than the `XL` breakpoint, this will take the number of columns specified.\n   */\n  @Prop() sizeXl?: BoxColumnType;\n\n  render() {\n    const boxClasses = `\n    ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n    ${this.auto ? 'pds-box--auto' : ''}\n    ${this.border ? 'pds-box--border' : ''}\n    ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}\n    ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}\n    ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}\n    ${this.fit ? 'pds-box--fit' : ''}\n    ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}\n    ${this.flex !== undefined && this.flex.trim() !== '' ? `pds-box--flex-${this.flex}` : ''}\n    ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n    ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}\n    ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}\n    ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}\n    ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}\n    ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}\n    ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}\n    ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}\n    ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}\n    ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}\n    ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}\n    ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}\n    ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}\n    ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}\n    ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}\n    ${this.size == undefined &&\n      this.sizeSm == undefined &&\n      this.sizeMd == undefined &&\n      this.sizeLg == undefined &&\n      this.sizeXl == undefined ? 'pds-box' : ''}\n    `;\n\n    const boxInlineStyles = {\n      ...(this.backgroundColor && { '--box-background-color': this.backgroundColor }),\n      ...(this.borderColor && { '--box-border-color': this.borderColor }),\n      ...(this.minHeight && { '--box-min-height': this.minHeight }),\n      ...(this.minWidth && { '--box-min-width': this.minWidth }),\n    };\n\n    return (\n      <Host class={boxClasses} style={boxInlineStyles}>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pds-button2.js

@@ -6,6 +6,7 @@ const hasShadowDom = (el) => {
 };
 
 const pdsButtonCss = ":host{--border-color:transparent;--border-color-hover:transparent;--border-color-focus:transparent;--border-color-disabled:transparent;--background-color-primary:var(--pine-color-neutral-charcoal-400);--background-color-hover-primary:var(--pine-color-neutral-charcoal-500);--background-color-disabled-primary:var(--pine-color-neutral-grey-300);--color-primary:var(--pine-color-base-white);--color-disabled-primary:var(--pine-color-neutral-charcoal-100);--outline-color-primary:var(--pine-color-primary-200);--border-color-secondary:var(--pine-color-neutral-grey-400);--border-color-hover-secondary:var(--pine-color-neutral-grey-500);--border-color-focus-secondary:var(--pine-color-neutral-grey-300);--border-color-disabled-secondary:var(--pine-color-neutral-grey-300);--color-secondary:var(--pine-color-neutral-charcoal-400);--color-disabled-secondary:var(--pine-color-neutral-charcoal-100);--outline-color-secondary:var(--pine-color-primary-200);--background-color-accent:var(--pine-color-primary-300);--background-color-hover-accent:var(--pine-color-primary-400);--background-color-disabled-accent:var(--pine-color-primary-100);--color-accent:var(--pine-color-base-white);--color-disabled-accent:var(--pine-color-primary-200);--outline-color-accent:var(--pine-color-primary-200);--background-color-destructive:var(--pine-color-red-300);--background-color-hover-destructive:var(--pine-color-red-400);--background-color-disabled-destructive:var(--pine-color-red-100);--color-destructive:var(--pine-color-base-white);--color-disabled-destructive:var(--pine-color-red-200);--outline-color-destructive:var(--pine-color-red-200);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.pds-button{-ms-flex-align:center;align-items:center;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:10px;color:var(--color);display:-ms-flexbox;display:flex;font-family:inherit;font-size:1rem;font-weight:500;min-height:40px;padding:0.5rem 1rem}.pds-button pds-icon{fill:currentColor;-webkit-margin-end:0.5rem;margin-inline-end:0.5rem}.pds-button:hover{background-color:var(--background-color-hover);border-color:var(--border-color-hover)}.pds-button:focus{border-color:var(--border-color-focus);outline:4px solid var(--outline-color)}.pds-button:disabled{background-color:var(--background-color-disabled);border-color:var(--border-color-disabled);color:var(--color-disabled)}.pds-button--primary{--background-color:var(--background-color-primary);--background-color-hover:var(--background-color-hover-primary);--background-color-disabled:var(--background-color-disabled-primary);--color:var(--color-primary);--color-disabled:var(--color-disabled-primary);--outline-color:var(--outline-color-primary)}.pds-button--accent{--background-color:var(--background-color-accent);--background-color-hover:var(--background-color-hover-accent);--background-color-disabled:var(--background-color-disabled-accent);--color:var(--color-accent);--color-disabled:var(--color-disabled-accent);--outline-color:var(--outline-color-accent)}.pds-button--destructive{--background-color:var(--background-color-destructive);--background-color-hover:var(--background-color-hover-destructive);--background-color-disabled:var(--background-color-disabled-destructive);--color:var(--color-destructive);--color-disabled:var(--color-disabled-destructive);--outline-color:var(--outline-color-destructive)}.pds-button--secondary,.pds-button--disclosure{--background-color:transparent;--background-color-hover:transparent;--background-color-disabled:transparent;--border-color-disabled:var(--border-color-disabled-secondary);--border-color-focus:var(--border-color-focus-secondary);--border-color-hover:var(--border-color-hover-secondary);--border-color:var(--border-color-secondary);--color:var(--color-secondary);--color-disabled:var(--color-disabled-secondary);--outline-color:var(--outline-color-secondary)}.pds-button--disclosure pds-icon{-webkit-margin-end:0;margin-inline-end:0;-webkit-margin-start:0.5rem;margin-inline-start:0.5rem}.pds-button--unstyled{--background-color:transparent;--background-color-hover:transparent;--background-color-disabled:transparent;--color:inherit;border:0;margin:0;min-height:auto;padding:0;width:inherit}";
+const PdsButtonStyle0 = pdsButtonCss;
 
 const PdsButton = /*@__PURE__*/ proxyCustomElement(class PdsButton extends HTMLElement {
     constructor() {
@@ -45,10 +46,10 @@ const PdsButton = /*@__PURE__*/ proxyCustomElement(class PdsButton extends HTMLE
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h("button", { class: this.classNames(), disabled: this.disabled, name: this.name, type: this.type, value: this.value }, this.icon && this.variant !== 'disclosure' && h("pds-icon", { name: this.icon }), h("slot", null), this.variant === 'disclosure' && h("pds-icon", { name: "caret-down" }))));
+        return (h(Host, { key: '6ee21dab19b15ab02142d892e7a2f42d6f93a919', "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h("button", { key: 'aa804a22ca56bff055e939e1bd72d4fd55c8bcd8', class: this.classNames(), disabled: this.disabled, name: this.name, part: "button", type: this.type, value: this.value }, this.icon && this.variant !== 'disclosure' && h("pds-icon", { name: this.icon, part: "icon" }), h("slot", { key: '049cdc31676637dbe106ec153d66c4964f1f5ee9' }), this.variant === 'disclosure' && h("pds-icon", { name: "caret-down", part: "caret" }))));
     }
     get el() { return this; }
-    static get style() { return pdsButtonCss; }
+    static get style() { return PdsButtonStyle0; }
 }, [1, "pds-button", {
         "componentId": [1, "component-id"],
         "disabled": [4],

package/components/pds-button2.js.map

@@ -1 +1 @@
-{"file":"pds-button2.js","mappings":";;;AAIO,MAAM,YAAY,GAAG,CAAC,EAAe;IAC1C,OAAO,CAAC,CAAC,EAAE,CAAC,UAAU,IAAI,CAAC,CAAE,EAAU,CAAC,YAAY,CAAA;AACtD,CAAC;;ACND,MAAM,YAAY,GAAG,ypIAAypI;;MCQjqI,SAAS;;;;;QAwCZ,gBAAW,GAAG,CAAC,EAAS;YAC9B,IAAI,IAAI,CAAC,IAAI,IAAI,QAAQ,EAAE;;gBAEzB,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;oBACzB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;oBACpC,IAAI,IAAI,EAAE;wBACR,EAAE,CAAC,cAAc,EAAE,CAAA;wBAEnB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;wBACnD,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;wBAC3B,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;wBACjC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAA;wBAC5B,UAAU,CAAC,KAAK,EAAE,CAAA;wBAClB,UAAU,CAAC,MAAM,EAAE,CAAA;qBACpB;iBACF;aACF;SACF,CAAA;;wBA7CmB,KAAK;oBAKD,IAAI;;;oBAgBmB,QAAQ;uBAK2C,SAAS;;IAqBnG,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,YAAY,CAAC,CAAC;QAElC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;SAChD;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qBACY,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC5C,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,IAErB,cACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,IAEhB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,EACrF,eAAQ,EACP,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,gBAAU,IAAI,EAAC,YAAY,GAAY,CAClE,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/utils/utils.ts","src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const hasShadowDom = (el: HTMLElement) => {\n  return !!el.shadowRoot && !!(el as any).attachShadow\n}\n",":host {\n  --border-color: transparent;\n  --border-color-hover: transparent;\n  --border-color-focus: transparent;\n  --border-color-disabled: transparent;\n\n  // primary\n  --background-color-primary: var(--pine-color-neutral-charcoal-400);\n  --background-color-hover-primary: var(--pine-color-neutral-charcoal-500);\n  --background-color-disabled-primary: var(--pine-color-neutral-grey-300);\n  --color-primary: var(--pine-color-base-white);\n  --color-disabled-primary: var(--pine-color-neutral-charcoal-100);\n  --outline-color-primary: var(--pine-color-primary-200);\n\n  // secondary\n  --border-color-secondary: var(--pine-color-neutral-grey-400);\n  --border-color-hover-secondary: var(--pine-color-neutral-grey-500);\n  --border-color-focus-secondary: var(--pine-color-neutral-grey-300);\n  --border-color-disabled-secondary: var(--pine-color-neutral-grey-300);\n  --color-secondary: var(--pine-color-neutral-charcoal-400);\n  --color-disabled-secondary: var(--pine-color-neutral-charcoal-100);\n  --outline-color-secondary: var(--pine-color-primary-200);\n\n  // accent\n  --background-color-accent: var(--pine-color-primary-300);\n  --background-color-hover-accent: var(--pine-color-primary-400);\n  --background-color-disabled-accent: var(--pine-color-primary-100);\n  --color-accent: var(--pine-color-base-white);\n  --color-disabled-accent: var(--pine-color-primary-200);\n  --outline-color-accent: var(--pine-color-primary-200);\n\n  // destructive\n  --background-color-destructive: var(--pine-color-red-300);\n  --background-color-hover-destructive: var(--pine-color-red-400);\n  --background-color-disabled-destructive: var(--pine-color-red-100);\n  --color-destructive: var(--pine-color-base-white);\n  --color-disabled-destructive: var(--pine-color-red-200);\n  --outline-color-destructive: var(--pine-color-red-200);\n\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n.pds-button {\n  align-items: center;\n  background-color: var(--background-color);\n  border: 1px solid var(--border-color);\n  border-radius: 10px;\n  color: var(--color);\n  display: flex;\n  font-family: inherit;\n  font-size: 1rem;\n  font-weight: 500;\n  min-height: 40px;\n  padding: 0.5rem 1rem;\n\n  pds-icon {\n    fill: currentColor;\n    margin-inline-end: 0.5rem;\n  }\n\n  &:hover {\n    background-color: var(--background-color-hover);\n    border-color: var(--border-color-hover);\n  }\n\n  &:focus {\n    border-color: var(--border-color-focus);\n    outline: 4px solid var(--outline-color);\n  }\n\n  &:disabled {\n    background-color: var(--background-color-disabled);\n    border-color: var(--border-color-disabled);\n    color: var(--color-disabled);\n  }\n}\n\n.pds-button--primary {\n  --background-color: var(--background-color-primary);\n  --background-color-hover: var(--background-color-hover-primary);\n  --background-color-disabled: var(--background-color-disabled-primary);\n  --color: var(--color-primary);\n  --color-disabled: var(--color-disabled-primary);\n  --outline-color: var(--outline-color-primary);\n}\n\n.pds-button--accent {\n  --background-color: var(--background-color-accent);\n  --background-color-hover: var(--background-color-hover-accent);\n  --background-color-disabled: var(--background-color-disabled-accent);\n  --color: var(--color-accent);\n  --color-disabled: var(--color-disabled-accent);\n  --outline-color: var(--outline-color-accent);\n}\n\n.pds-button--destructive {\n  --background-color: var(--background-color-destructive);\n  --background-color-hover: var(--background-color-hover-destructive);\n  --background-color-disabled: var(--background-color-disabled-destructive);\n  --color: var(--color-destructive);\n  --color-disabled: var(--color-disabled-destructive);\n  --outline-color: var(--outline-color-destructive);\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n  --background-color: transparent;\n  --background-color-hover: transparent;\n  --background-color-disabled: transparent;\n  --border-color-disabled: var(--border-color-disabled-secondary);\n  --border-color-focus: var(--border-color-focus-secondary);\n  --border-color-hover: var(--border-color-hover-secondary);\n  --border-color: var(--border-color-secondary);\n  --color: var(--color-secondary);\n  --color-disabled: var(--color-disabled-secondary);\n  --outline-color: var(--outline-color-secondary);\n}\n\n.pds-button--disclosure {\n  pds-icon {\n    margin-inline-end: 0;\n    margin-inline-start: 0.5rem;\n  }\n}\n\n.pds-button--unstyled {\n  --background-color: transparent;\n  --background-color-hover: transparent;\n  --background-color-disabled: transparent;\n  --color: inherit;\n  border: 0;\n  margin: 0;\n  min-height: auto;\n  padding: 0;\n  width: inherit;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\n@Component({\n  tag: 'pds-button',\n  styleUrl: 'pds-button.scss',\n  shadow: true,\n})\nexport class PdsButton {\n  @Element() el: HTMLPdsButtonElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Toggles disabled state of button\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays icon before text when icon string matches an icon name\n   */\n  @Prop() icon?: string = null;\n\n  /**\n   * Provides button with a submittable name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Provides button with a submittable value\n   */\n  @Prop() value?: string;\n\n  /**\n   * Provides button with a type\n   * @defaultValue button\n   */\n  @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Sets button variant styles as outlined in Figma documentation\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n  private handleClick = (ev: Event) => {\n    if (this.type != 'button') {\n      // If button clicked IS NOT associated with a form\n      if (hasShadowDom(this.el)) {\n        const form = this.el.closest('form')\n        if (form) {\n          ev.preventDefault()\n\n          const fakeButton = document.createElement('button')\n          fakeButton.type = this.type\n          fakeButton.style.display = 'none'\n          form.appendChild(fakeButton)\n          fakeButton.click()\n          fakeButton.remove()\n        }\n      }\n    }\n  }\n\n  private classNames() {\n    const classNames = ['pds-button'];\n\n    if (this.variant) {\n      classNames.push('pds-button--' + this.variant);\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        id={this.componentId}\n        onClick={this.handleClick}\n        variant={this.variant}\n      >\n        <button\n          class={this.classNames()}\n          disabled={this.disabled}\n          name={this.name}\n          type={this.type}\n          value={this.value}\n        >\n          {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon}></pds-icon>}\n          <slot />\n          {this.variant === 'disclosure' && <pds-icon name=\"caret-down\"></pds-icon>}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-button2.js","mappings":";;;AAIO,MAAM,YAAY,GAAG,CAAC,EAAe;IAC1C,OAAO,CAAC,CAAC,EAAE,CAAC,UAAU,IAAI,CAAC,CAAE,EAAU,CAAC,YAAY,CAAA;AACtD,CAAC;;ACND,MAAM,YAAY,GAAG,ypIAAypI,CAAC;AAC/qI,wBAAe,YAAY;;MCad,SAAS;;;;;QAwCZ,gBAAW,GAAG,CAAC,EAAS;YAC9B,IAAI,IAAI,CAAC,IAAI,IAAI,QAAQ,EAAE;;gBAEzB,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE;oBACzB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;oBACpC,IAAI,IAAI,EAAE;wBACR,EAAE,CAAC,cAAc,EAAE,CAAA;wBAEnB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;wBACnD,UAAU,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;wBAC3B,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAA;wBACjC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAA;wBAC5B,UAAU,CAAC,KAAK,EAAE,CAAA;wBAClB,UAAU,CAAC,MAAM,EAAE,CAAA;qBACpB;iBACF;aACF;SACF,CAAA;;wBA7CmB,KAAK;oBAKD,IAAI;;;oBAgBmB,QAAQ;uBAK2C,SAAS;;IAqBnG,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,YAAY,CAAC,CAAC;QAElC,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC;SAChD;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,sEACY,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,IAAI,EAC5C,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,IAErB,+DACE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,IAEhB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,gBAAU,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,MAAM,GAAY,EACjG,8DAAQ,EACP,IAAI,CAAC,OAAO,KAAK,YAAY,IAAI,gBAAU,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,GAAY,CAC/E,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/utils/utils.ts","src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport const hasShadowDom = (el: HTMLElement) => {\n  return !!el.shadowRoot && !!(el as any).attachShadow\n}\n",":host {\n  --border-color: transparent;\n  --border-color-hover: transparent;\n  --border-color-focus: transparent;\n  --border-color-disabled: transparent;\n\n  // primary\n  --background-color-primary: var(--pine-color-neutral-charcoal-400);\n  --background-color-hover-primary: var(--pine-color-neutral-charcoal-500);\n  --background-color-disabled-primary: var(--pine-color-neutral-grey-300);\n  --color-primary: var(--pine-color-base-white);\n  --color-disabled-primary: var(--pine-color-neutral-charcoal-100);\n  --outline-color-primary: var(--pine-color-primary-200);\n\n  // secondary\n  --border-color-secondary: var(--pine-color-neutral-grey-400);\n  --border-color-hover-secondary: var(--pine-color-neutral-grey-500);\n  --border-color-focus-secondary: var(--pine-color-neutral-grey-300);\n  --border-color-disabled-secondary: var(--pine-color-neutral-grey-300);\n  --color-secondary: var(--pine-color-neutral-charcoal-400);\n  --color-disabled-secondary: var(--pine-color-neutral-charcoal-100);\n  --outline-color-secondary: var(--pine-color-primary-200);\n\n  // accent\n  --background-color-accent: var(--pine-color-primary-300);\n  --background-color-hover-accent: var(--pine-color-primary-400);\n  --background-color-disabled-accent: var(--pine-color-primary-100);\n  --color-accent: var(--pine-color-base-white);\n  --color-disabled-accent: var(--pine-color-primary-200);\n  --outline-color-accent: var(--pine-color-primary-200);\n\n  // destructive\n  --background-color-destructive: var(--pine-color-red-300);\n  --background-color-hover-destructive: var(--pine-color-red-400);\n  --background-color-disabled-destructive: var(--pine-color-red-100);\n  --color-destructive: var(--pine-color-base-white);\n  --color-disabled-destructive: var(--pine-color-red-200);\n  --outline-color-destructive: var(--pine-color-red-200);\n\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n.pds-button {\n  align-items: center;\n  background-color: var(--background-color);\n  border: 1px solid var(--border-color);\n  border-radius: 10px;\n  color: var(--color);\n  display: flex;\n  font-family: inherit;\n  font-size: 1rem;\n  font-weight: 500;\n  min-height: 40px;\n  padding: 0.5rem 1rem;\n\n  pds-icon {\n    fill: currentColor;\n    margin-inline-end: 0.5rem;\n  }\n\n  &:hover {\n    background-color: var(--background-color-hover);\n    border-color: var(--border-color-hover);\n  }\n\n  &:focus {\n    border-color: var(--border-color-focus);\n    outline: 4px solid var(--outline-color);\n  }\n\n  &:disabled {\n    background-color: var(--background-color-disabled);\n    border-color: var(--border-color-disabled);\n    color: var(--color-disabled);\n  }\n}\n\n.pds-button--primary {\n  --background-color: var(--background-color-primary);\n  --background-color-hover: var(--background-color-hover-primary);\n  --background-color-disabled: var(--background-color-disabled-primary);\n  --color: var(--color-primary);\n  --color-disabled: var(--color-disabled-primary);\n  --outline-color: var(--outline-color-primary);\n}\n\n.pds-button--accent {\n  --background-color: var(--background-color-accent);\n  --background-color-hover: var(--background-color-hover-accent);\n  --background-color-disabled: var(--background-color-disabled-accent);\n  --color: var(--color-accent);\n  --color-disabled: var(--color-disabled-accent);\n  --outline-color: var(--outline-color-accent);\n}\n\n.pds-button--destructive {\n  --background-color: var(--background-color-destructive);\n  --background-color-hover: var(--background-color-hover-destructive);\n  --background-color-disabled: var(--background-color-disabled-destructive);\n  --color: var(--color-destructive);\n  --color-disabled: var(--color-disabled-destructive);\n  --outline-color: var(--outline-color-destructive);\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n  --background-color: transparent;\n  --background-color-hover: transparent;\n  --background-color-disabled: transparent;\n  --border-color-disabled: var(--border-color-disabled-secondary);\n  --border-color-focus: var(--border-color-focus-secondary);\n  --border-color-hover: var(--border-color-hover-secondary);\n  --border-color: var(--border-color-secondary);\n  --color: var(--color-secondary);\n  --color-disabled: var(--color-disabled-secondary);\n  --outline-color: var(--outline-color-secondary);\n}\n\n.pds-button--disclosure {\n  pds-icon {\n    margin-inline-end: 0;\n    margin-inline-start: 0.5rem;\n  }\n}\n\n.pds-button--unstyled {\n  --background-color: transparent;\n  --background-color-hover: transparent;\n  --background-color-disabled: transparent;\n  --color: inherit;\n  border: 0;\n  margin: 0;\n  min-height: auto;\n  padding: 0;\n  width: inherit;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\n/**\n * @part button - The main button element that represents the button component.\n * @part caret - The caret icon element that appears when the button variant is 'disclosure'.\n * @part icon - The icon element that appears before the text in the button, if provided.\n*/\n\n@Component({\n  tag: 'pds-button',\n  styleUrl: 'pds-button.scss',\n  shadow: true,\n})\nexport class PdsButton {\n  @Element() el: HTMLPdsButtonElement;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Toggles disabled state of button\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays icon before text when icon string matches an icon name\n   */\n  @Prop() icon?: string = null;\n\n  /**\n   * Provides button with a submittable name\n   */\n  @Prop() name?: string;\n\n  /**\n   * Provides button with a submittable value\n   */\n  @Prop() value?: string;\n\n  /**\n   * Provides button with a type\n   * @defaultValue button\n   */\n  @Prop() type?: 'button' | 'reset' | 'submit' = 'button';\n\n  /**\n   * Sets button variant styles as outlined in Figma documentation\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n  private handleClick = (ev: Event) => {\n    if (this.type != 'button') {\n      // If button clicked IS NOT associated with a form\n      if (hasShadowDom(this.el)) {\n        const form = this.el.closest('form')\n        if (form) {\n          ev.preventDefault()\n\n          const fakeButton = document.createElement('button')\n          fakeButton.type = this.type\n          fakeButton.style.display = 'none'\n          form.appendChild(fakeButton)\n          fakeButton.click()\n          fakeButton.remove()\n        }\n      }\n    }\n  }\n\n  private classNames() {\n    const classNames = ['pds-button'];\n\n    if (this.variant) {\n      classNames.push('pds-button--' + this.variant);\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host\n        aria-disabled={this.disabled ? 'true' : null}\n        id={this.componentId}\n        onClick={this.handleClick}\n        variant={this.variant}\n      >\n        <button\n          class={this.classNames()}\n          disabled={this.disabled}\n          name={this.name}\n          part=\"button\"\n          type={this.type}\n          value={this.value}\n        >\n          {this.icon && this.variant !== 'disclosure' && <pds-icon name={this.icon} part=\"icon\"></pds-icon>}\n          <slot />\n          {this.variant === 'disclosure' && <pds-icon name=\"caret-down\" part=\"caret\"></pds-icon>}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pds-checkbox.js

@@ -1,79 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { a as assignDescription, P as PdsLabel, m as messageId } from './pds-label.js';
-
-const pdsCheckboxCss = ":host{--background-color-disabled:var(--pine-color-neutral-grey-200);--background-color-hover:var(--pine-color-neutral-grey-100);--border:var(--pine-border-interactive);--border-color-disabled:var(--pine-color-neutral-charcoal-100);--border-color-hover:var(--pine-border-interactive-hover-color);--border-color-icon:var(--pine-color-base-white);--border-radius:var(--pine-border-radius-xs);--color-checked:var(--pine-color-neutral-charcoal-500);--color-disabled:var(--pine-color-neutral-grey-300);--color-focus:var(--pine-color-primary-200);--color-invalid-focus:var(--pine-color-red-200);--color-invalid:var(--pine-color-red-300);--message-color-disabled:var(--pine-color-neutral-grey-500);--message-color:var(--pine-color-neutral-charcoal-200);--input-size:16px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--color-invalid)}:host(.is-invalid) input:checked{background:var(--color-invalid)}:host(.is-invalid) input:focus-visible{-webkit-box-shadow:0 0 0 4px var(--color-invalid-focus);box-shadow:0 0 0 4px var(--color-invalid-focus);outline:none}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--color-invalid)}:host(.is-indeterminate) input:checked::after{border-bottom:0;-webkit-transform:rotate(87deg) translate3d(-114%, 25%, 0);transform:rotate(87deg) translate3d(-114%, 25%, 0)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--border);border-radius:var(--border-radius);height:var(--input-size);margin:0;position:relative;width:var(--input-size)}input:hover{background:var(--background-color-hover);border-color:var(--border-color-hover)}input:checked{background:var(--color-checked);border-color:var(--color-checked)}input:checked::after{border:1px solid var(--border-color-icon);border-left:0;border-top:0;content:\"\";display:block;height:7px;left:50%;position:absolute;top:50%;-webkit-transform:rotate(43deg) translate3d(-110%, -30%, 0);transform:rotate(43deg) translate3d(-110%, -30%, 0);width:4px}input:disabled{background:var(--background-color-disabled);border-color:var(--color-disabled);cursor:not-allowed}input:disabled:checked{background:var(--color-disabled);border-color:var(--color-disabled)}input:disabled:checked::after{border-color:var(--border-color-disabled)}input:disabled+label{color:var(--border-color-hover);cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--message-color-disabled)}input:focus-visible{-webkit-box-shadow:0 0 0 4px var(--color-focus);box-shadow:0 0 0 4px var(--color-focus);outline:none}label{-webkit-margin-start:10px;margin-inline-start:10px}.pds-checkbox__message{color:var(--message-color);font-size:14px;-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:26px;margin-inline-start:26px;width:100%}";
-
-const PdsCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class PdsCheckbox extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.pdsCheckboxChange = createEvent(this, "pdsCheckboxChange", 7);
-        this.handleCheckboxChange = (e) => {
-            if (this.disabled) {
-                return;
-            }
-            const target = e.target;
-            const isChecked = target.checked;
-            this.pdsCheckboxChange.emit(isChecked);
-        };
-        this.checked = undefined;
-        this.componentId = undefined;
-        this.disabled = undefined;
-        this.errorMessage = undefined;
-        this.helperMessage = undefined;
-        this.indeterminate = undefined;
-        this.invalid = undefined;
-        this.label = undefined;
-        this.name = undefined;
-        this.required = undefined;
-        this.value = undefined;
-    }
-    classNames() {
-        const classNames = [];
-        if (this.invalid) {
-            classNames.push('is-invalid');
-        }
-        if (this.indeterminate) {
-            classNames.push('is-indeterminate');
-        }
-        if (this.disabled) {
-            classNames.push('is-disabled');
-        }
-        return classNames.join('  ');
-    }
-    render() {
-        return (h(Host, { class: this.classNames() }, h("input", { "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "checkbox", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange }), h(PdsLabel, { htmlFor: this.componentId, text: this.label }), this.helperMessage &&
-            h("div", { class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
-    }
-    static get style() { return pdsCheckboxCss; }
-}, [1, "pds-checkbox", {
-        "checked": [4],
-        "componentId": [1, "component-id"],
-        "disabled": [4],
-        "errorMessage": [1, "error-message"],
-        "helperMessage": [1, "helper-message"],
-        "indeterminate": [4],
-        "invalid": [4],
-        "label": [1],
-        "name": [1],
-        "required": [4],
-        "value": [1]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pds-checkbox"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pds-checkbox":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PdsCheckbox$1);
-            }
-            break;
-    } });
-}
+import { P as PdsCheckbox$1, d as defineCustomElement$1 } from './pds-checkbox2.js';
 
 const PdsCheckbox = PdsCheckbox$1;
 const defineCustomElement = defineCustomElement$1;

package/components/pds-checkbox.js.map

@@ -1 +1 @@
-{"file":"pds-checkbox.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,mzFAAmzF;;MCS7zFA,aAAW;;;;;;QA8Dd,yBAAoB,GAAG,CAAC,CAAQ;YACtC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;YAEjC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;SACxC,CAAA;;;;;;;;;;;;;IAEO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE;YAAE,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAAE;QACpD,IAAI,IAAI,CAAC,aAAa,EAAE;YAAE,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;SAAE;QAChE,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAAE;QAEtD,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAC5B,iCACoB,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,oBAAoB,GACnC,EACF,EAAC,QAAQ,IAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,EACxD,IAAI,CAAC,aAAa;YACjB,WACE,KAAK,EAAE,uBAAuB,EAC9B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf,EAEP,IAAI,CAAC,YAAY;YAChB,WACE,KAAK,EAAE,oDAAoD,EAC3D,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CACd,CAEH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsCheckbox"],"sources":["src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.tsx"],"sourcesContent":[":host {\n  --background-color-disabled: var(--pine-color-neutral-grey-200);\n  --background-color-hover: var(--pine-color-neutral-grey-100);\n  --border: var(--pine-border-interactive);\n  --border-color-disabled: var(--pine-color-neutral-charcoal-100);\n  --border-color-hover: var(--pine-border-interactive-hover-color);\n  --border-color-icon: var(--pine-color-base-white);\n  --border-radius: var(--pine-border-radius-xs);\n  --color-checked: var(--pine-color-neutral-charcoal-500);\n  --color-disabled: var(--pine-color-neutral-grey-300);\n  --color-focus: var(--pine-color-primary-200);\n  --color-invalid-focus: var(--pine-color-red-200);\n  --color-invalid: var(--pine-color-red-300);\n  --message-color-disabled: var(--pine-color-neutral-grey-500);\n  --message-color: var(--pine-color-neutral-charcoal-200);\n  --input-size: 16px;\n\n  align-items: center;\n  display: flex;\n  flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n  input {\n    border-color: var(--color-invalid);\n\n    &:checked {\n      background: var(--color-invalid);\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 4px var(--color-invalid-focus);\n      outline: none;\n    }\n  }\n\n  label,\n  .pds-checkbox__message--error {\n    color: var(--color-invalid);\n  }\n}\n\n:host(.is-indeterminate) {\n  input:checked {\n    &::after {\n      border-bottom: 0;\n      transform: rotate(87deg) translate3d(-114%, 25%, 0);\n    }\n  }\n}\n\ninput {\n  appearance: none;\n  border: var(--border);\n  border-radius: var(--border-radius);\n  height: var(--input-size);\n  margin: 0;\n  position: relative;\n  width: var(--input-size);\n\n  &:hover {\n    background: var(--background-color-hover);\n    border-color: var(--border-color-hover);\n  }\n\n  &:checked {\n    background: var(--color-checked);\n    border-color: var(--color-checked);\n\n    &::after {\n      border: 1px solid var(--border-color-icon);\n      border-left: 0;\n      border-top: 0;\n      content: \"\";\n      display: block;\n      height: 7px;\n      left: 50%;\n      position: absolute;\n      top: 50%;\n      transform: rotate(43deg) translate3d(-110%, -30%, 0);\n      width: 4px;\n    }\n  }\n\n  &:disabled {\n    background: var(--background-color-disabled);\n    border-color: var(--color-disabled);\n    cursor: not-allowed;\n\n    &:checked {\n      background: var(--color-disabled);\n      border-color: var(--color-disabled);\n\n      &::after {\n        border-color: var(--border-color-disabled);\n      }\n    }\n\n    + label {\n      color: var(--border-color-hover);\n      cursor: not-allowed;\n    }\n\n    ~ .pds-checkbox__message {\n      color: var(--message-color-disabled);\n    }\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 4px var(--color-focus);\n    outline: none;\n  }\n}\n\nlabel {\n  margin-inline-start: 10px;\n}\n\n.pds-checkbox__message {\n  color: var(--message-color);\n  font-size: 14px;\n  margin-block-start: 6px;\n  margin-inline-start: 26px;\n  width: 100%;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrl: 'pds-checkbox.scss',\n  shadow: true,\n})\nexport class PdsCheckbox {\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop() checked: boolean;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * It determines whether or not the checkbox is disabled.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * String used for helper message below checkbox.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n   */\n  @Prop() indeterminate: boolean;\n\n  /**\n   * It determines whether or not the checkbox is invalid.\n   */\n  @Prop() invalid: boolean;\n\n  /**\n   * String used for label text next to checkbox.\n   */\n  @Prop() label: string;\n\n  /**\n   * String used for checkbox `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * It determines whether or not the checkbox is required.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * The value of the checkbox that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Emits a boolean indicating whether the checkbox is currently checked or unchecked.\n   */\n  @Event() pdsCheckboxChange: EventEmitter<boolean>;\n\n  private handleCheckboxChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    const isChecked = target.checked;\n\n    this.pdsCheckboxChange.emit(isChecked);\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.indeterminate) { classNames.push('is-indeterminate'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          type=\"checkbox\"\n          id={this.componentId}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={this.handleCheckboxChange}\n        />\n        <PdsLabel htmlFor={this.componentId} text={this.label} />\n        {this.helperMessage &&\n          <div\n            class={'pds-checkbox__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-checkbox__message pds-checkbox__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-checkbox.js","mappings":";;;;;;;","names":[],"sources":[],"sourcesContent":[],"version":3}

package/components/pds-checkbox2.js

@@ -0,0 +1,86 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as assignDescription, P as PdsLabel, m as messageId } from './pds-label.js';
+
+const pdsCheckboxCss = ":host{--background-color:var(--pine-color-base-white);--background-color-disabled:var(--pine-color-neutral-grey-200);--background-color-hover:var(--pine-color-neutral-grey-100);--border:var(--pine-border-interactive);--border-color-disabled:var(--pine-color-neutral-charcoal-100);--border-color-hover:var(--pine-border-interactive-hover-color);--border-color-icon:var(--pine-color-base-white);--border-radius:var(--pine-border-radius-xs);--color-checked:var(--pine-color-neutral-charcoal-500);--color-disabled:var(--pine-color-neutral-grey-300);--color-focus:var(--pine-color-primary-200);--color-invalid-focus:var(--pine-color-red-200);--color-invalid:var(--pine-color-red-300);--message-color-disabled:var(--pine-color-neutral-grey-500);--message-color:var(--pine-color-neutral-charcoal-200);--input-size:16px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}:host(.is-invalid) input{border-color:var(--color-invalid)}:host(.is-invalid) input:checked{background:var(--color-invalid)}:host(.is-invalid) input:focus-visible{-webkit-box-shadow:0 0 0 4px var(--color-invalid-focus);box-shadow:0 0 0 4px var(--color-invalid-focus);outline:none}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--color-invalid)}:host(.is-indeterminate) input:checked::after{border-bottom:0;-webkit-transform:rotate(87deg) translate3d(-114%, 25%, 0);transform:rotate(87deg) translate3d(-114%, 25%, 0)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--background-color);border:var(--border);border-radius:var(--border-radius);height:var(--input-size);margin:0;position:relative;width:var(--input-size)}input:hover{background:var(--background-color-hover);border-color:var(--border-color-hover)}input:checked{background:var(--color-checked);border-color:var(--color-checked)}input:checked::after{border:1px solid var(--border-color-icon);border-left:0;border-top:0;content:\"\";display:block;height:7px;left:50%;position:absolute;top:50%;-webkit-transform:rotate(43deg) translate3d(-110%, -30%, 0);transform:rotate(43deg) translate3d(-110%, -30%, 0);width:4px}input:disabled{background:var(--background-color-disabled);border-color:var(--color-disabled);cursor:not-allowed}input:disabled:checked{background:var(--color-disabled);border-color:var(--color-disabled)}input:disabled:checked::after{border-color:var(--border-color-disabled)}input:disabled+label{color:var(--border-color-hover);cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--message-color-disabled)}input:focus-visible{-webkit-box-shadow:0 0 0 4px var(--color-focus);box-shadow:0 0 0 4px var(--color-focus);outline:none}label{-webkit-margin-start:10px;margin-inline-start:10px}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-checkbox__message{color:var(--message-color);font-size:14px;-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:26px;margin-inline-start:26px;width:100%}";
+const PdsCheckboxStyle0 = pdsCheckboxCss;
+
+const PdsCheckbox = /*@__PURE__*/ proxyCustomElement(class PdsCheckbox extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.pdsCheckboxChange = createEvent(this, "pdsCheckboxChange", 7);
+        this.handleCheckboxChange = (e) => {
+            if (this.disabled) {
+                return;
+            }
+            const target = e.target;
+            this.checked = target.checked;
+            this.pdsCheckboxChange.emit({
+                checked: target.checked,
+                value: this.value
+            });
+        };
+        this.checked = undefined;
+        this.componentId = undefined;
+        this.disabled = undefined;
+        this.errorMessage = undefined;
+        this.helperMessage = undefined;
+        this.indeterminate = undefined;
+        this.invalid = undefined;
+        this.label = undefined;
+        this.labelHidden = undefined;
+        this.name = undefined;
+        this.required = undefined;
+        this.value = undefined;
+    }
+    classNames() {
+        const classNames = [];
+        if (this.invalid) {
+            classNames.push('is-invalid');
+        }
+        if (this.indeterminate) {
+            classNames.push('is-indeterminate');
+        }
+        if (this.disabled) {
+            classNames.push('is-disabled');
+        }
+        return classNames.join('  ');
+    }
+    render() {
+        return (h(Host, { key: '44451f5e8df2550217af485162015a0810b2735e', class: this.classNames() }, h("input", { key: 'c4bac864eb6c990b389b1892f26211af7a6b5be8', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "checkbox", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange }), h(PdsLabel, { key: 'eea4ae7c7795854e34a228d79f7e3228d695ff7e', htmlFor: this.componentId, text: this.label, classNames: this.labelHidden ? 'visually-hidden' : '' }), this.helperMessage &&
+            h("div", { class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
+    }
+    static get style() { return PdsCheckboxStyle0; }
+}, [1, "pds-checkbox", {
+        "checked": [4],
+        "componentId": [1, "component-id"],
+        "disabled": [4],
+        "errorMessage": [1, "error-message"],
+        "helperMessage": [1, "helper-message"],
+        "indeterminate": [4],
+        "invalid": [4],
+        "label": [1],
+        "labelHidden": [4, "label-hidden"],
+        "name": [1],
+        "required": [4],
+        "value": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pds-checkbox"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pds-checkbox":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PdsCheckbox);
+            }
+            break;
+    } });
+}
+
+export { PdsCheckbox as P, defineCustomElement as d };
+
+//# sourceMappingURL=pds-checkbox2.js.map

package/components/pds-checkbox2.js.map

@@ -0,0 +1 @@
+{"file":"pds-checkbox2.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,mmGAAmmG,CAAC;AAC3nG,0BAAe,cAAc;;MCShB,WAAW;;;;;;QAmEd,yBAAoB,GAAG,CAAC,CAAQ;YACtC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;YAE9B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;gBAC1B,OAAO,EAAE,MAAM,CAAC,OAAO;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;SACJ,CAAA;;;;;;;;;;;;;;IAEO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE;YAAE,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAAE;QACpD,IAAI,IAAI,CAAC,aAAa,EAAE;YAAE,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;SAAE;QAChE,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAAE;QAEtD,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAC5B,kFACoB,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,oBAAoB,GACnC,EACF,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,GAAG,iBAAiB,GAAG,EAAE,GAAI,EAC/G,IAAI,CAAC,aAAa;YACjB,WACE,KAAK,EAAE,uBAAuB,EAC9B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf,EAEP,IAAI,CAAC,YAAY;YAChB,WACE,KAAK,EAAE,oDAAoD,EAC3D,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CACd,CAEH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.tsx"],"sourcesContent":[":host {\n  --background-color: var(--pine-color-base-white);\n  --background-color-disabled: var(--pine-color-neutral-grey-200);\n  --background-color-hover: var(--pine-color-neutral-grey-100);\n  --border: var(--pine-border-interactive);\n  --border-color-disabled: var(--pine-color-neutral-charcoal-100);\n  --border-color-hover: var(--pine-border-interactive-hover-color);\n  --border-color-icon: var(--pine-color-base-white);\n  --border-radius: var(--pine-border-radius-xs);\n  --color-checked: var(--pine-color-neutral-charcoal-500);\n  --color-disabled: var(--pine-color-neutral-grey-300);\n  --color-focus: var(--pine-color-primary-200);\n  --color-invalid-focus: var(--pine-color-red-200);\n  --color-invalid: var(--pine-color-red-300);\n  --message-color-disabled: var(--pine-color-neutral-grey-500);\n  --message-color: var(--pine-color-neutral-charcoal-200);\n  --input-size: 16px;\n\n  align-items: center;\n  display: flex;\n  flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n  input {\n    border-color: var(--color-invalid);\n\n    &:checked {\n      background: var(--color-invalid);\n    }\n\n    &:focus-visible {\n      box-shadow: 0 0 0 4px var(--color-invalid-focus);\n      outline: none;\n    }\n  }\n\n  label,\n  .pds-checkbox__message--error {\n    color: var(--color-invalid);\n  }\n}\n\n:host(.is-indeterminate) {\n  input:checked {\n    &::after {\n      border-bottom: 0;\n      transform: rotate(87deg) translate3d(-114%, 25%, 0);\n    }\n  }\n}\n\ninput {\n  appearance: none;\n  background-color: var(--background-color);\n  border: var(--border);\n  border-radius: var(--border-radius);\n  height: var(--input-size);\n  margin: 0;\n  position: relative;\n  width: var(--input-size);\n\n  &:hover {\n    background: var(--background-color-hover);\n    border-color: var(--border-color-hover);\n  }\n\n  &:checked {\n    background: var(--color-checked);\n    border-color: var(--color-checked);\n\n    &::after {\n      border: 1px solid var(--border-color-icon);\n      border-left: 0;\n      border-top: 0;\n      content: \"\";\n      display: block;\n      height: 7px;\n      left: 50%;\n      position: absolute;\n      top: 50%;\n      transform: rotate(43deg) translate3d(-110%, -30%, 0);\n      width: 4px;\n    }\n  }\n\n  &:disabled {\n    background: var(--background-color-disabled);\n    border-color: var(--color-disabled);\n    cursor: not-allowed;\n\n    &:checked {\n      background: var(--color-disabled);\n      border-color: var(--color-disabled);\n\n      &::after {\n        border-color: var(--border-color-disabled);\n      }\n    }\n\n    + label {\n      color: var(--border-color-hover);\n      cursor: not-allowed;\n    }\n\n    ~ .pds-checkbox__message {\n      color: var(--message-color-disabled);\n    }\n  }\n\n  &:focus-visible {\n    box-shadow: 0 0 0 4px var(--color-focus);\n    outline: none;\n  }\n}\n\nlabel {\n  margin-inline-start: 10px;\n}\n\n.visually-hidden {\n  border: 0;\n  clip: rect(0 0 0 0);\n  clip-path: polygon(0 0, 0 0, 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n\n.pds-checkbox__message {\n  color: var(--message-color);\n  font-size: 14px;\n  margin-block-start: 6px;\n  margin-inline-start: 26px;\n  width: 100%;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrl: 'pds-checkbox.scss',\n  shadow: true,\n})\nexport class PdsCheckbox {\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop() checked: boolean;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * It determines whether or not the checkbox is disabled.\n   */\n  @Prop() disabled: boolean;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * String used for helper message below checkbox.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * If `true`, the checkbox will visually appear as indeterminate.\n   * Only JavaScript can set the objects `indeterminate` property. See [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes).\n   */\n  @Prop() indeterminate: boolean;\n\n  /**\n   * It determines whether or not the checkbox is invalid.\n   */\n  @Prop() invalid: boolean;\n\n  /**\n   * String used for label text next to checkbox.\n   */\n  @Prop() label: string;\n\n    /**\n   * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.\n   */\n    @Prop() labelHidden: boolean;\n\n  /**\n   * String used for checkbox `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * It determines whether or not the checkbox is required.\n   */\n  @Prop() required: boolean;\n\n  /**\n   * The value of the checkbox that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Event emitted that contains the `value` and `checked`.\n   */\n  @Event() pdsCheckboxChange: EventEmitter<CheckboxChangeEventDetail>;\n\n  private handleCheckboxChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    this.checked = target.checked;\n\n    this.pdsCheckboxChange.emit({\n      checked: target.checked,\n      value: this.value\n    });\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) { classNames.push('is-invalid'); }\n    if (this.indeterminate) { classNames.push('is-indeterminate'); }\n    if (this.disabled) { classNames.push('is-disabled'); }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          type=\"checkbox\"\n          id={this.componentId}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={this.handleCheckboxChange}\n        />\n        <PdsLabel htmlFor={this.componentId} text={this.label} classNames={this.labelHidden ? 'visually-hidden' : ''} />\n        {this.helperMessage &&\n          <div\n            class={'pds-checkbox__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-checkbox__message pds-checkbox__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"],"version":3}