@pine-ds/core 2.1.1 → 2.1.3

package/dist/esm-es5/pds-box.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,H as Host}from"./index-8b335bbb.js";var pdsBoxCss="pds-box{--border-width-default:var(--pine-border-width-thin);--color-background-box:inherit;--color-border-box:inherit;--sizing-min-height-box:none;--sizing-min-width-box:none;--spacing-gap-xxs:var(--pine-spacing-050);--spacing-gap-xs:var(--pine-spacing-100);--spacing-gap-sm:var(--pine-spacing-200);--spacing-gap-md:var(--pine-spacing-300);--spacing-gap-lg:var(--pine-spacing-450);--spacing-gap-xl:var(--pine-spacing-600);--spacing-gap-xxl:var(--pine-spacing-800);display:block}[class*=pds-box]{background-color:var(--color-background-box);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;min-height:var(--sizing-min-height-box);min-width:var(--sizing-min-width-box)}.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-xxl{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-xxl{-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-xxl{-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-xxl{-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-xxl{-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(--sizing-min-width-box, fit-content);flex:0 0 var(--sizing-min-width-box, fit-content);min-width:auto;width:auto}.pds-box--fit{max-width:100%;min-width:100%;width:100%}.pds-box--border{border-color:var(--color-border-box, var(--pine-color-grey-300));border-style:solid;border-width:var(--border-width-default)}.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-050)}.pds-border-radius-sm{border-radius:var(--pine-border-radius-075)}.pds-border-radius-md{border-radius:var(--pine-border-radius-100)}.pds-border-radius-lg{border-radius:var(--pine-border-radius-200)}.pds-border-radius-circle{border-radius:50%}.pds-shadow-050{-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050)}.pds-shadow-100{-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100)}.pds-shadow-150{-webkit-box-shadow:var(--pine-box-shadow-150);box-shadow:var(--pine-box-shadow-150)}.pds-shadow-200{-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200)}.pds-shadow-300{-webkit-box-shadow:var(--pine-box-shadow-300);box-shadow:var(--pine-box-shadow-300)}.pds-shadow-400{-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400)}.pds-shadow-500{-webkit-box-shadow:var(--pine-box-shadow-500);box-shadow:var(--pine-box-shadow-500)}.pds-shadow-xs{-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050)}.pds-shadow-sm{-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100)}.pds-shadow-md{-webkit-box-shadow:var(--pine-box-shadow-150);box-shadow:var(--pine-box-shadow-150)}.pds-shadow-lg{-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200)}.pds-box-gap-none{gap:0}.pds-box-gap-xxs{gap:var(--spacing-gap-xxs)}.pds-box-gap-xs{gap:var(--spacing-gap-xs)}.pds-box-gap-sm{gap:var(--spacing-gap-sm)}.pds-box-gap-md{gap:var(--spacing-gap-md)}.pds-box-gap-lg{gap:var(--spacing-gap-lg)}.pds-box-gap-xl{gap:var(--spacing-gap-xl)}.pds-box-gap-xxl{gap:var(--spacing-gap-xxl)}.pds-padding-none{padding:0}.pds-padding-xxs{padding:var(--spacing-gap-xxs)}.pds-padding-xs{padding:var(--spacing-gap-xxs)}.pds-padding-sm{padding:var(--spacing-gap-sm)}.pds-padding-md{padding:var(--spacing-gap-md)}.pds-padding-lg{padding:var(--spacing-gap-lg)}.pds-padding-xl{padding:var(--spacing-gap-xl)}.pds-padding-xxl{padding:var(--spacing-gap-xxl)}.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}";var PdsBoxStyle0=pdsBoxCss;var PdsBox=function(){function i(i){registerInstance(this,i);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}i.prototype.render=function(){var i="\n    ".concat(this.alignItems!==undefined&&this.alignItems.trim()!==""?"pds-align-items-".concat(this.alignItems):"","\n    ").concat(this.auto?"pds-box--auto":"","\n    ").concat(this.border?"pds-box--border":"","\n    ").concat(this.borderRadius!==undefined&&this.borderRadius.trim()!==""?"pds-border-radius-".concat(this.borderRadius):"","\n    ").concat(this.direction!==undefined&&this.direction.trim()!==""?"pds-box-direction-".concat(this.direction):"","\n    ").concat(this.display!==undefined&&this.display.trim()!==""?"pds-box--display-".concat(this.display):"","\n    ").concat(this.fit?"pds-box--fit":"","\n    ").concat(this.gap!==undefined&&this.gap.trim()!==""?"pds-box-gap-".concat(this.gap):"","\n    ").concat(this.flex!==undefined&&this.flex.trim()!==""?"pds-box--flex-".concat(this.flex):"","\n    ").concat(this.justifyContent!==undefined&&this.justifyContent.trim()!==""?"pds-justify-content-".concat(this.justifyContent):"","\n    ").concat(this.offset!==undefined&&this.offset.trim()!==""?"pds-box-offset-".concat(this.offset):"","\n    ").concat(this.offsetXs!==undefined&&this.offsetXs.trim()!==""?"pds-box-offset-xs-".concat(this.offsetXs):"","\n    ").concat(this.offsetSm!==undefined&&this.offsetSm.trim()!==""?"pds-box-offset-sm-".concat(this.offsetSm):"","\n    ").concat(this.offsetMd!==undefined&&this.offsetMd.trim()!==""?"pds-box-offset-md-".concat(this.offsetMd):"","\n    ").concat(this.offsetLg!==undefined&&this.offsetLg.trim()!==""?"pds-box-offset-lg-".concat(this.offsetLg):"","\n    ").concat(this.offsetXl!==undefined&&this.offsetXl.trim()!==""?"pds-box-offset-xl-".concat(this.offsetXl):"","\n    ").concat(this.padding!==undefined&&this.padding.trim()!==""?"pds-padding-".concat(this.padding):"","\n    ").concat(this.shadow!==undefined&&this.shadow.trim()!==""?"pds-shadow-".concat(this.shadow):"","\n    ").concat(this.size!==undefined&&this.size.trim()!==""?"pds-box pds-box-".concat(this.size):"","\n    ").concat(this.sizeXs!==undefined&&this.sizeXs.trim()!==""?"pds-box-xs-".concat(this.sizeXs):"","\n    ").concat(this.sizeSm!==undefined&&this.sizeSm.trim()!==""?"pds-box-sm-".concat(this.sizeSm):"","\n    ").concat(this.sizeMd!==undefined&&this.sizeMd.trim()!==""?"pds-box-md-".concat(this.sizeMd):"","\n    ").concat(this.sizeLg!==undefined&&this.sizeLg.trim()!==""?"pds-box-lg-".concat(this.sizeLg):"","\n    ").concat(this.sizeXl!==undefined&&this.sizeXl.trim()!==""?"pds-box-xl-".concat(this.sizeXl):"","\n    ").concat(this.size==undefined&&this.sizeSm==undefined&&this.sizeMd==undefined&&this.sizeLg==undefined&&this.sizeXl==undefined?"pds-box":"","\n    ");var s=Object.assign(Object.assign(Object.assign(Object.assign({},this.backgroundColor&&{"--color-background-box":this.backgroundColor}),this.borderColor&&{"--color-border-box":this.borderColor}),this.minHeight&&{"--sizing-min-height-box":this.minHeight}),this.minWidth&&{"--sizing-min-height-box":this.minWidth});return h(Host,{key:"56a682a80e67403fdaae36ca8356eb388dfce370",class:i,style:s})};return i}();PdsBox.style=PdsBoxStyle0;export{PdsBox as pds_box};
+import{r as registerInstance,h,H as Host}from"./index-b1696fed.js";var pdsBoxCss="pds-box{--border-width-default:var(--pine-border-width-thin);--color-background-box:inherit;--color-border-box:inherit;--sizing-min-height-box:none;--sizing-min-width-box:none;--spacing-gap-xxs:var(--pine-spacing-050);--spacing-gap-xs:var(--pine-spacing-100);--spacing-gap-sm:var(--pine-spacing-200);--spacing-gap-md:var(--pine-spacing-300);--spacing-gap-lg:var(--pine-spacing-450);--spacing-gap-xl:var(--pine-spacing-600);--spacing-gap-xxl:var(--pine-spacing-800);display:block}[class*=pds-box]{background-color:var(--color-background-box);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-inline-flexbox;display:inline-flex;min-height:var(--sizing-min-height-box);min-width:var(--sizing-min-width-box)}.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-xxl{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-xxl{-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-xxl{-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-xxl{-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-xxl{-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(--sizing-min-width-box, fit-content);flex:0 0 var(--sizing-min-width-box, fit-content);min-width:auto;width:auto}.pds-box--fit{max-width:100%;min-width:100%;width:100%}.pds-box--border{border-color:var(--color-border-box, var(--pine-color-grey-300));border-style:solid;border-width:var(--border-width-default)}.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-050)}.pds-border-radius-sm{border-radius:var(--pine-border-radius-075)}.pds-border-radius-md{border-radius:var(--pine-border-radius-100)}.pds-border-radius-lg{border-radius:var(--pine-border-radius-200)}.pds-border-radius-circle{border-radius:50%}.pds-shadow-050{-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050)}.pds-shadow-100{-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100)}.pds-shadow-150{-webkit-box-shadow:var(--pine-box-shadow-150);box-shadow:var(--pine-box-shadow-150)}.pds-shadow-200{-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200)}.pds-shadow-300{-webkit-box-shadow:var(--pine-box-shadow-300);box-shadow:var(--pine-box-shadow-300)}.pds-shadow-400{-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400)}.pds-shadow-500{-webkit-box-shadow:var(--pine-box-shadow-500);box-shadow:var(--pine-box-shadow-500)}.pds-shadow-xs{-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050)}.pds-shadow-sm{-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100)}.pds-shadow-md{-webkit-box-shadow:var(--pine-box-shadow-150);box-shadow:var(--pine-box-shadow-150)}.pds-shadow-lg{-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200)}.pds-box-gap-none{gap:0}.pds-box-gap-xxs{gap:var(--spacing-gap-xxs)}.pds-box-gap-xs{gap:var(--spacing-gap-xs)}.pds-box-gap-sm{gap:var(--spacing-gap-sm)}.pds-box-gap-md{gap:var(--spacing-gap-md)}.pds-box-gap-lg{gap:var(--spacing-gap-lg)}.pds-box-gap-xl{gap:var(--spacing-gap-xl)}.pds-box-gap-xxl{gap:var(--spacing-gap-xxl)}.pds-padding-none{padding:0}.pds-padding-xxs{padding:var(--spacing-gap-xxs)}.pds-padding-xs{padding:var(--spacing-gap-xxs)}.pds-padding-sm{padding:var(--spacing-gap-sm)}.pds-padding-md{padding:var(--spacing-gap-md)}.pds-padding-lg{padding:var(--spacing-gap-lg)}.pds-padding-xl{padding:var(--spacing-gap-xl)}.pds-padding-xxl{padding:var(--spacing-gap-xxl)}.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}";var PdsBoxStyle0=pdsBoxCss;var PdsBox=function(){function i(i){registerInstance(this,i);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}i.prototype.render=function(){var i="\n    ".concat(this.alignItems!==undefined&&this.alignItems.trim()!==""?"pds-align-items-".concat(this.alignItems):"","\n    ").concat(this.auto?"pds-box--auto":"","\n    ").concat(this.border?"pds-box--border":"","\n    ").concat(this.borderRadius!==undefined&&this.borderRadius.trim()!==""?"pds-border-radius-".concat(this.borderRadius):"","\n    ").concat(this.direction!==undefined&&this.direction.trim()!==""?"pds-box-direction-".concat(this.direction):"","\n    ").concat(this.display!==undefined&&this.display.trim()!==""?"pds-box--display-".concat(this.display):"","\n    ").concat(this.fit?"pds-box--fit":"","\n    ").concat(this.gap!==undefined&&this.gap.trim()!==""?"pds-box-gap-".concat(this.gap):"","\n    ").concat(this.flex!==undefined&&this.flex.trim()!==""?"pds-box--flex-".concat(this.flex):"","\n    ").concat(this.justifyContent!==undefined&&this.justifyContent.trim()!==""?"pds-justify-content-".concat(this.justifyContent):"","\n    ").concat(this.offset!==undefined&&this.offset.trim()!==""?"pds-box-offset-".concat(this.offset):"","\n    ").concat(this.offsetXs!==undefined&&this.offsetXs.trim()!==""?"pds-box-offset-xs-".concat(this.offsetXs):"","\n    ").concat(this.offsetSm!==undefined&&this.offsetSm.trim()!==""?"pds-box-offset-sm-".concat(this.offsetSm):"","\n    ").concat(this.offsetMd!==undefined&&this.offsetMd.trim()!==""?"pds-box-offset-md-".concat(this.offsetMd):"","\n    ").concat(this.offsetLg!==undefined&&this.offsetLg.trim()!==""?"pds-box-offset-lg-".concat(this.offsetLg):"","\n    ").concat(this.offsetXl!==undefined&&this.offsetXl.trim()!==""?"pds-box-offset-xl-".concat(this.offsetXl):"","\n    ").concat(this.padding!==undefined&&this.padding.trim()!==""?"pds-padding-".concat(this.padding):"","\n    ").concat(this.shadow!==undefined&&this.shadow.trim()!==""?"pds-shadow-".concat(this.shadow):"","\n    ").concat(this.size!==undefined&&this.size.trim()!==""?"pds-box pds-box-".concat(this.size):"","\n    ").concat(this.sizeXs!==undefined&&this.sizeXs.trim()!==""?"pds-box-xs-".concat(this.sizeXs):"","\n    ").concat(this.sizeSm!==undefined&&this.sizeSm.trim()!==""?"pds-box-sm-".concat(this.sizeSm):"","\n    ").concat(this.sizeMd!==undefined&&this.sizeMd.trim()!==""?"pds-box-md-".concat(this.sizeMd):"","\n    ").concat(this.sizeLg!==undefined&&this.sizeLg.trim()!==""?"pds-box-lg-".concat(this.sizeLg):"","\n    ").concat(this.sizeXl!==undefined&&this.sizeXl.trim()!==""?"pds-box-xl-".concat(this.sizeXl):"","\n    ").concat(this.size==undefined&&this.sizeSm==undefined&&this.sizeMd==undefined&&this.sizeLg==undefined&&this.sizeXl==undefined?"pds-box":"","\n    ");var s=Object.assign(Object.assign(Object.assign(Object.assign({},this.backgroundColor&&{"--color-background-box":this.backgroundColor}),this.borderColor&&{"--color-border-box":this.borderColor}),this.minHeight&&{"--sizing-min-height-box":this.minHeight}),this.minWidth&&{"--sizing-min-height-box":this.minWidth});return h(Host,{key:"56a682a80e67403fdaae36ca8356eb388dfce370",class:i,style:s})};return i}();PdsBox.style=PdsBoxStyle0;export{PdsBox as pds_box};
 //# sourceMappingURL=pds-box.entry.js.map

package/dist/esm-es5/pds-button.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,h,H as Host,g as getElement}from"./index-8b335bbb.js";import{b as caretDown}from"./index-5e7a8a36.js";var hasShadowDom=function(r){return!!r.shadowRoot&&!!r.attachShadow};var baseCss=":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(div,label,p,span){color:var(--pine-color-text-default)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";var PdsButtonStyle0=baseCss;var pdsButtonCss=":host{--border-radius-default:var(--pine-border-radius-round);--border-width-default:var(--pine-border-width-thin);--border-width-unstyled:var(--pine-border-radius-0);--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--color-background-primary-default:var(--pine-color-grey-900);--color-background-primary-disabled:var(--pine-color-grey-100);--color-background-primary-hover:var(--pine-color-grey-950);--color-text-primary-default:var(--pine-color-white);--color-text-primary-disabled:var(--pine-color-grey-400);--color-outline-primary:var(--pine-color-purple-300);--color-background-secondary-hover:var(--pine-color-grey-050);--color-border-secondary-default:var(--pine-color-grey-400);--color-border-secondary-disabled:var(--pine-color-grey-300);--color-border-secondary-focus:var(--pine-color-grey-300);--color-border-secondary-hover:var(--pine-color-grey-500);--color-text-secondary-default:var(--pine-color-grey-800);--color-text-secondary-disabled:var(--pine-color-grey-400);--color-outline-secondary:var(--pine-color-purple-300);--color-background-accent-default:var(--pine-color-purple-500);--color-background-accent-disabled:var(--pine-color-purple-100);--color-background-accent-hover:var(--pine-color-purple-600);--color-text-accent-default:var(--pine-color-white);--color-text-accent-disabled:var(--pine-color-purple-300);--color-outline-accent:var(--pine-color-purple-300);--color-background-destructive-default:var(--pine-color-red-500);--color-background-destructive-disabled:var(--pine-color-red-100);--color-background-destructive-hover:var(--pine-color-red-600);--color-text-destructive-default:var(--pine-color-white);--color-text-destructive-disabled:var(--pine-color-red-300);--color-outline-destructive:var(--pine-color-red-300);--spacing-disclosure-icon-margin-inline-end:var(--pine-spacing-0);--spacing-disclosure-margin-inline-start:var(--pine-spacing-100);--spacing-icon-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-200);--spacing-unstyled:var(--pine-spacing-0);--typography-default:var(--pine-font-weight-body-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-greet);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.pds-button{-ms-flex-align:center;align-items:center;background-color:var(--color-background-default);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--pine-border-radius-circle);color:var(--color-text-default);display:-ms-flexbox;display:flex;font:var(--typography-default);min-height:40px;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}.pds-button pds-icon{color:currentColor;fill:currentColor;-webkit-margin-end:var(--spacing-icon-margin-inline-end);margin-inline-end:var(--spacing-icon-margin-inline-end)}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);border-color:var(--color-border-focus);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled)}.pds-button--primary{--color-background-default:var(--color-background-primary-default);--color-background-hover:var(--color-background-primary-hover);--color-background-disabled:var(--color-background-primary-disabled);--color-text-default:var(--color-text-primary-default);--color-text-disabled:var(--color-text-primary-disabled);--color-outline:var(--color-outline-primary)}.pds-button--accent{--color-background-default:var(--color-background-accent-default);--color-background-hover:var(--color-background-accent-hover);--color-background-disabled:var(--color-background-accent-disabled);--color-text-default:var(--color-text-accent-default);--color-text-disabled:var(--color-text-accent-disabled);--color-outline:var(--color-outline-accent)}.pds-button--destructive{--color-background-default:var(--color-background-destructive-default);--color-background-hover:var(--color-background-destructive-hover);--color-background-disabled:var(--color-background-destructive-disabled);--color-text-default:var(--color-text-destructive-default);--color-text-disabled:var(--color-text-destructive-disabled);--color-outline:var(--color-outline-destructive)}.pds-button--destructive:focus-visible{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--color-background-destructive-default);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button--secondary,.pds-button--disclosure{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-border-disabled:var(--color-border-secondary-disabled);--color-border-focus:var(--color-border-secondary-focus);--color-border-hover:var(--color-border-secondary-hover);--color-border-default:var(--color-border-secondary-default);--color-text-default:var(--color-text-secondary-default);--color-text-disabled:var(--color-text-secondary-disabled);--color-outline:var(--color-outline-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--color-background-secondary-hover)}.pds-button--disclosure pds-icon{-webkit-margin-end:var(--spacing-disclosure-icon-margin-inline-end);margin-inline-end:var(--spacing-disclosure-icon-margin-inline-end);-webkit-margin-start:var(--spacing-disclosure-margin-inline-start);margin-inline-start:var(--spacing-disclosure-margin-inline-start)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;border:var(--border-width-unstyled);margin:var(--spacing-unstyled);min-height:auto;padding:var(--spacing-unstyled);width:inherit}";var PdsButtonStyle1=pdsButtonCss;var PdsButton=function(){function r(r){var o=this;registerInstance(this,r);this.handleClick=function(r){if(o.type!="button"){if(hasShadowDom(o.el)){var e=o.el.closest("form");if(e){r.preventDefault();var a=document.createElement("button");a.type=o.type;a.style.display="none";e.appendChild(a);a.click();a.remove()}}}};this.componentId=undefined;this.disabled=false;this.icon=null;this.name=undefined;this.value=undefined;this.type="button";this.variant="primary"}r.prototype.classNames=function(){var r=["pds-button"];if(this.variant){r.push("pds-button--"+this.variant)}return r.join("  ")};r.prototype.render=function(){return h(Host,{key:"4c63b9a386ed3d9d9f3516648ec26c3823ac6fa6","aria-disabled":this.disabled?"true":null,id:this.componentId,onClick:this.handleClick,variant:this.variant},h("button",{key:"50cdc14ea87c350f2e173fb38006021bfe0b78d7",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",{key:"94e7c0b1b6b8223b78afe5b61a6073b907afc6e1",name:this.icon,part:"icon"}),h("slot",{key:"736b97d814d34eb8a01ddd22ade8d9ee5a35de82"}),this.variant==="disclosure"&&h("pds-icon",{key:"f7bea88482de7bfaf23c74e71d9748a403df6a76",icon:caretDown,part:"caret"})))};Object.defineProperty(r.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return r}();PdsButton.style=PdsButtonStyle0+PdsButtonStyle1;export{PdsButton as pds_button};
+import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-b1696fed.js";import{e as caretDown}from"./index-56752d25.js";var hasShadowDom=function(r){return!!r.shadowRoot&&!!r.attachShadow};var baseCss=":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(div,label,p,span){color:var(--pine-color-text-default)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";var PdsButtonStyle0=baseCss;var pdsButtonCss=":host{--border-radius-default:var(--pine-border-radius-round);--border-width-default:var(--pine-border-width-thin);--border-width-unstyled:var(--pine-border-radius-0);--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--color-background-primary-default:var(--pine-color-grey-900);--color-background-primary-disabled:var(--pine-color-grey-100);--color-background-primary-hover:var(--pine-color-grey-950);--color-text-primary-default:var(--pine-color-white);--color-text-primary-disabled:var(--pine-color-grey-400);--color-outline-primary:var(--pine-color-purple-300);--color-background-secondary-hover:var(--pine-color-grey-050);--color-border-secondary-default:var(--pine-color-grey-400);--color-border-secondary-disabled:var(--pine-color-grey-300);--color-border-secondary-focus:var(--pine-color-grey-300);--color-border-secondary-hover:var(--pine-color-grey-500);--color-text-secondary-default:var(--pine-color-grey-800);--color-text-secondary-disabled:var(--pine-color-grey-400);--color-outline-secondary:var(--pine-color-purple-300);--color-background-accent-default:var(--pine-color-purple-500);--color-background-accent-disabled:var(--pine-color-purple-100);--color-background-accent-hover:var(--pine-color-purple-600);--color-text-accent-default:var(--pine-color-white);--color-text-accent-disabled:var(--pine-color-purple-300);--color-outline-accent:var(--pine-color-purple-300);--color-background-destructive-default:var(--pine-color-red-500);--color-background-destructive-disabled:var(--pine-color-red-100);--color-background-destructive-hover:var(--pine-color-red-600);--color-text-destructive-default:var(--pine-color-white);--color-text-destructive-disabled:var(--pine-color-red-300);--color-outline-destructive:var(--pine-color-red-300);--spacing-disclosure-icon-margin-inline-end:var(--pine-spacing-0);--spacing-disclosure-margin-inline-start:var(--pine-spacing-100);--spacing-icon-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-200);--spacing-unstyled:var(--pine-spacing-0);--typography-default:var(--pine-font-weight-body-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-greet);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}.pds-button{-ms-flex-align:center;align-items:center;background-color:var(--color-background-default);border:var(--border-width-default) solid var(--color-border-default);border-radius:var(--pine-border-radius-circle);color:var(--color-text-default);display:-ms-flexbox;display:flex;font:var(--typography-default);min-height:40px;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}.pds-button pds-icon{color:currentColor;fill:currentColor;-webkit-margin-end:var(--spacing-icon-margin-inline-end);margin-inline-end:var(--spacing-icon-margin-inline-end)}.pds-button:hover{background-color:var(--color-background-hover);border-color:var(--color-border-hover)}.pds-button:focus-visible{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);border-color:var(--color-border-focus);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button:disabled{background-color:var(--color-background-disabled);border-color:var(--color-border-disabled);color:var(--color-text-disabled)}.pds-button--primary{--color-background-default:var(--color-background-primary-default);--color-background-hover:var(--color-background-primary-hover);--color-background-disabled:var(--color-background-primary-disabled);--color-text-default:var(--color-text-primary-default);--color-text-disabled:var(--color-text-primary-disabled);--color-outline:var(--color-outline-primary)}.pds-button--accent{--color-background-default:var(--color-background-accent-default);--color-background-hover:var(--color-background-accent-hover);--color-background-disabled:var(--color-background-accent-disabled);--color-text-default:var(--color-text-accent-default);--color-text-disabled:var(--color-text-accent-disabled);--color-outline:var(--color-outline-accent)}.pds-button--destructive{--color-background-default:var(--color-background-destructive-default);--color-background-hover:var(--color-background-destructive-hover);--color-background-disabled:var(--color-background-destructive-disabled);--color-text-default:var(--color-text-destructive-default);--color-text-disabled:var(--color-text-destructive-disabled);--color-outline:var(--color-outline-destructive)}.pds-button--destructive:focus-visible{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--color-background-destructive-default);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button--secondary,.pds-button--disclosure{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-border-disabled:var(--color-border-secondary-disabled);--color-border-focus:var(--color-border-secondary-focus);--color-border-hover:var(--color-border-secondary-hover);--color-border-default:var(--color-border-secondary-default);--color-text-default:var(--color-text-secondary-default);--color-text-disabled:var(--color-text-secondary-disabled);--color-outline:var(--color-outline-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--color-background-secondary-hover)}.pds-button--disclosure pds-icon{-webkit-margin-end:var(--spacing-disclosure-icon-margin-inline-end);margin-inline-end:var(--spacing-disclosure-icon-margin-inline-end);-webkit-margin-start:var(--spacing-disclosure-margin-inline-start);margin-inline-start:var(--spacing-disclosure-margin-inline-start)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;border:var(--border-width-unstyled);margin:var(--spacing-unstyled);min-height:auto;padding:var(--spacing-unstyled);width:inherit}";var PdsButtonStyle1=pdsButtonCss;var PdsButton=function(){function r(r){var o=this;registerInstance(this,r);this.pdsClick=createEvent(this,"pdsClick",7);this.handleClick=function(r){if(o.type!="button"){if(hasShadowDom(o.el)){var e=o.el.closest("form");if(e){r.preventDefault();var a=document.createElement("button");a.type=o.type;a.style.display="none";e.appendChild(a);a.click();a.remove()}}}o.pdsClick.emit(r)};this.componentId=undefined;this.disabled=false;this.icon=null;this.name=undefined;this.value=undefined;this.type="button";this.variant="primary"}r.prototype.classNames=function(){var r=["pds-button"];if(this.variant){r.push("pds-button--"+this.variant)}return r.join("  ")};r.prototype.render=function(){return h(Host,{key:"b559cbbe7cfe3a77b792e3d020fc615123bb3218","aria-disabled":this.disabled?"true":null,id:this.componentId,onClick:this.handleClick,variant:this.variant},h("button",{key:"69b52d61eaabc72e24a9aaf72f7130eb4e7a7197",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",{key:"4a94a45a0d44f0f54607c09b93672a597d876897",name:this.icon,part:"icon"}),h("slot",{key:"457c672d7662394a8debee6c372e3747d4de383d"}),this.variant==="disclosure"&&h("pds-icon",{key:"b0247fa8aea5b62158bf60f3f707af110a68d562",icon:caretDown,part:"caret"})))};Object.defineProperty(r.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});return r}();PdsButton.style=PdsButtonStyle0+PdsButtonStyle1;export{PdsButton as pds_button};
 //# sourceMappingURL=pds-button.entry.js.map

package/dist/esm-es5/pds-button.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["hasShadowDom","el","shadowRoot","attachShadow","baseCss","PdsButtonStyle0","pdsButtonCss","PdsButtonStyle1","PdsButton","this","handleClick","ev","_this","type","form","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","prototype","classNames","variant","push","join","render","h","Host","key","disabled","id","componentId","onClick","class","name","part","value","icon","caretDown"],"sources":["src/utils/utils.ts","src/global/styles/base.scss?tag=pds-button&encapsulation=shadow","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","// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n  Josh's Custom CSS Reset\n  https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n  box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n  margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n  display: block;\n  max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n  font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n  overflow-wrap: break-word;\n}\n\n/*\n  Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n  list-style: none;\n}\n\n:where(table) {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n/*\n  Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n  font: var(--pine-typography-body-md-default);\n  letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n  font-family: var(--pine-font-family-heading);\n  color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n  font: var(--pine-typography-heading-h1);\n  letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n  font: var(--pine-typography-heading-h2);\n  letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n  font: var(--pine-typography-heading-h3);\n  letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n  font: var(--pine-typography-heading-h4);\n  letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n  font: var(--pine-typography-heading-h5);\n  letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n  font: var(--pine-typography-heading-h6);\n  letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(div, label, p, span) {\n  color: var(--pine-color-text-default);\n}\n\n:where(code, kbd, pre, samp) {\n  font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n  cursor: pointer;\n}\n\n:where(:focus) {\n  outline: 0;\n}\n\n:where(:focus-visible) {\n  outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n  display: none !important;\n}\n",":host {\n  --border-radius-default: var(--pine-border-radius-round);\n\n  --border-width-default: var(--pine-border-width-thin);\n  --border-width-unstyled: var(--pine-border-radius-0);\n\n  --color-border-default: transparent;\n  --color-border-disabled: transparent;\n  --color-border-focus: transparent;\n  --color-border-hover: transparent;\n\n  // primary\n  --color-background-primary-default: var(--pine-color-grey-900);\n  --color-background-primary-disabled: var(--pine-color-grey-100);\n  --color-background-primary-hover: var(--pine-color-grey-950);\n  --color-text-primary-default: var(--pine-color-white);\n  --color-text-primary-disabled: var(--pine-color-grey-400);\n  --color-outline-primary: var(--pine-color-purple-300);\n\n  // secondary\n  --color-background-secondary-hover: var(--pine-color-grey-050);\n  --color-border-secondary-default: var(--pine-color-grey-400);\n  --color-border-secondary-disabled: var(--pine-color-grey-300);\n  --color-border-secondary-focus: var(--pine-color-grey-300);\n  --color-border-secondary-hover: var(--pine-color-grey-500);\n  --color-text-secondary-default: var(--pine-color-grey-800);\n  --color-text-secondary-disabled: var(--pine-color-grey-400);\n  --color-outline-secondary: var(--pine-color-purple-300);\n\n  // accent\n  --color-background-accent-default: var(--pine-color-purple-500);\n  --color-background-accent-disabled: var(--pine-color-purple-100);\n  --color-background-accent-hover: var(--pine-color-purple-600);\n  --color-text-accent-default: var(--pine-color-white);\n  --color-text-accent-disabled: var(--pine-color-purple-300);\n  --color-outline-accent: var(--pine-color-purple-300);\n\n  // destructive\n  --color-background-destructive-default: var(--pine-color-red-500);\n  --color-background-destructive-disabled: var(--pine-color-red-100);\n  --color-background-destructive-hover: var(--pine-color-red-600);\n  --color-text-destructive-default: var(--pine-color-white);\n  --color-text-destructive-disabled: var(--pine-color-red-300);\n  --color-outline-destructive: var(--pine-color-red-300);\n\n  --spacing-disclosure-icon-margin-inline-end: var(--pine-spacing-0);\n  --spacing-disclosure-margin-inline-start: var(--pine-spacing-100);\n  --spacing-icon-margin-inline-end: var(--pine-spacing-100);\n  --spacing-padding-block: var(--pine-spacing-100);\n  --spacing-padding-inline: var(--pine-spacing-200);\n  --spacing-unstyled: var(--pine-spacing-0);\n\n  --typography-default: var(--pine-font-weight-body-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-greet);\n\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n.pds-button {\n  align-items: center;\n  background-color: var(--color-background-default);\n  border: var(--border-width-default) solid var(--color-border-default);\n  border-radius: var(--pine-border-radius-circle);\n  color: var(--color-text-default);\n  display: flex;\n  font: var(--typography-default);\n  min-height: 40px;\n  padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n  pds-icon {\n    color: currentColor;\n    fill: currentColor;\n    margin-inline-end: var(--spacing-icon-margin-inline-end);\n  }\n\n  &:hover {\n    background-color: var(--color-background-hover);\n    border-color: var(--color-border-hover);\n  }\n\n  &:focus-visible {\n    --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n    border-color: var(--color-border-focus);\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  &:disabled {\n    background-color: var(--color-background-disabled);\n    border-color: var(--color-border-disabled);\n    color: var(--color-text-disabled);\n  }\n}\n\n.pds-button--primary {\n  --color-background-default: var(--color-background-primary-default);\n  --color-background-hover: var(--color-background-primary-hover);\n  --color-background-disabled: var(--color-background-primary-disabled);\n  --color-text-default: var(--color-text-primary-default);\n  --color-text-disabled: var(--color-text-primary-disabled);\n  --color-outline: var(--color-outline-primary);\n}\n\n.pds-button--accent {\n  --color-background-default: var(--color-background-accent-default);\n  --color-background-hover: var(--color-background-accent-hover);\n  --color-background-disabled: var(--color-background-accent-disabled);\n  --color-text-default: var(--color-text-accent-default);\n  --color-text-disabled: var(--color-text-accent-disabled);\n  --color-outline: var(--color-outline-accent);\n}\n\n.pds-button--destructive {\n  --color-background-default: var(--color-background-destructive-default);\n  --color-background-hover: var(--color-background-destructive-hover);\n  --color-background-disabled: var(--color-background-destructive-disabled);\n  --color-text-default: var(--color-text-destructive-default);\n  --color-text-disabled: var(--color-text-destructive-disabled);\n  --color-outline: var(--color-outline-destructive);\n\n  &:focus-visible {\n    --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-background-destructive-default);\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n  --color-background-default: transparent;\n  --color-background-hover: transparent;\n  --color-background-disabled: transparent;\n  --color-border-disabled: var(--color-border-secondary-disabled);\n  --color-border-focus: var(--color-border-secondary-focus);\n  --color-border-hover: var(--color-border-secondary-hover);\n  --color-border-default: var(--color-border-secondary-default);\n  --color-text-default: var(--color-text-secondary-default);\n  --color-text-disabled: var(--color-text-secondary-disabled);\n  --color-outline: var(--color-outline-secondary);\n\n  &:hover {\n    background-color: var(--color-background-secondary-hover);\n  }\n}\n\n.pds-button--disclosure {\n  pds-icon {\n    margin-inline-end: var(--spacing-disclosure-icon-margin-inline-end);\n    margin-inline-start: var(--spacing-disclosure-margin-inline-start);\n  }\n}\n\n.pds-button--unstyled {\n  --color-background-default: transparent;\n  --color-background-hover: transparent;\n  --color-background-disabled: transparent;\n  --color-text-default: inherit;\n  border: var(--border-width-unstyled);\n  margin: var(--spacing-unstyled);\n  min-height: auto;\n  padding: var(--spacing-unstyled);\n  width: inherit;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\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  styleUrls: ['../../global/styles/base.scss', '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 icon={caretDown} part=\"caret\"></pds-icon>}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mIAIO,IAAMA,aAAe,SAACC,GAC3B,QAASA,EAAGC,cAAiBD,EAAWE,YAC1C,ECNA,IAAMC,QAAU,yrDAChB,IAAAC,gBAAeD,QCDf,IAAME,aAAe,+7LACrB,IAAAC,gBAAeD,a,ICeFE,UAAS,W,kDAwCZC,KAAAC,YAAc,SAACC,GACrB,GAAIC,EAAKC,MAAQ,SAAU,CAEzB,GAAIb,aAAaY,EAAKX,IAAK,CACzB,IAAMa,EAAOF,EAAKX,GAAGc,QAAQ,QAC7B,GAAID,EAAM,CACRH,EAAGK,iBAEH,IAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWJ,KAAOD,EAAKC,KACvBI,EAAWG,MAAMC,QAAU,OAC3BP,EAAKQ,YAAYL,GACjBA,EAAWM,QACXN,EAAWO,Q,8CAzCC,M,UAKI,K,mDAgBuB,S,aAKmD,S,CAqB1FhB,EAAAiB,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,cAEpB,GAAIjB,KAAKkB,QAAS,CAChBD,EAAWE,KAAK,eAAiBnB,KAAKkB,Q,CAGxC,OAAOD,EAAWG,KAAK,K,EAGzBrB,EAAAiB,UAAAK,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2DACYxB,KAAKyB,SAAW,OAAS,KACxCC,GAAI1B,KAAK2B,YACTC,QAAS5B,KAAKC,YACdiB,QAASlB,KAAKkB,SAEdI,EAAA,UAAAE,IAAA,2CACEK,MAAO7B,KAAKiB,aACZQ,SAAUzB,KAAKyB,SACfK,KAAM9B,KAAK8B,KACXC,KAAK,SACL3B,KAAMJ,KAAKI,KACX4B,MAAOhC,KAAKgC,OAEXhC,KAAKiC,MAAQjC,KAAKkB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUM,KAAM9B,KAAKiC,KAAMF,KAAK,SAC/ET,EAAA,QAAAE,IAAA,6CACCxB,KAAKkB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUS,KAAMC,UAAWH,KAAK,W,gIAvFtD,G","ignoreList":[]}
+{"version":3,"names":["hasShadowDom","el","shadowRoot","attachShadow","baseCss","PdsButtonStyle0","pdsButtonCss","PdsButtonStyle1","PdsButton","this","handleClick","ev","_this","type","form","closest","preventDefault","fakeButton","document","createElement","style","display","appendChild","click","remove","pdsClick","emit","prototype","classNames","variant","push","join","render","h","Host","key","disabled","id","componentId","onClick","class","name","part","value","icon","caretDown"],"sources":["src/utils/utils.ts","src/global/styles/base.scss?tag=pds-button&encapsulation=shadow","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","// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n  Josh's Custom CSS Reset\n  https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n  box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n  margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n  display: block;\n  max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n  font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n  overflow-wrap: break-word;\n}\n\n/*\n  Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n  list-style: none;\n}\n\n:where(table) {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n/*\n  Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n  font: var(--pine-typography-body-md-default);\n  letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n  font-family: var(--pine-font-family-heading);\n  color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n  font: var(--pine-typography-heading-h1);\n  letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n  font: var(--pine-typography-heading-h2);\n  letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n  font: var(--pine-typography-heading-h3);\n  letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n  font: var(--pine-typography-heading-h4);\n  letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n  font: var(--pine-typography-heading-h5);\n  letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n  font: var(--pine-typography-heading-h6);\n  letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(div, label, p, span) {\n  color: var(--pine-color-text-default);\n}\n\n:where(code, kbd, pre, samp) {\n  font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n  cursor: pointer;\n}\n\n:where(:focus) {\n  outline: 0;\n}\n\n:where(:focus-visible) {\n  outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n  display: none !important;\n}\n",":host {\n  --border-radius-default: var(--pine-border-radius-round);\n\n  --border-width-default: var(--pine-border-width-thin);\n  --border-width-unstyled: var(--pine-border-radius-0);\n\n  --color-border-default: transparent;\n  --color-border-disabled: transparent;\n  --color-border-focus: transparent;\n  --color-border-hover: transparent;\n\n  // primary\n  --color-background-primary-default: var(--pine-color-grey-900);\n  --color-background-primary-disabled: var(--pine-color-grey-100);\n  --color-background-primary-hover: var(--pine-color-grey-950);\n  --color-text-primary-default: var(--pine-color-white);\n  --color-text-primary-disabled: var(--pine-color-grey-400);\n  --color-outline-primary: var(--pine-color-purple-300);\n\n  // secondary\n  --color-background-secondary-hover: var(--pine-color-grey-050);\n  --color-border-secondary-default: var(--pine-color-grey-400);\n  --color-border-secondary-disabled: var(--pine-color-grey-300);\n  --color-border-secondary-focus: var(--pine-color-grey-300);\n  --color-border-secondary-hover: var(--pine-color-grey-500);\n  --color-text-secondary-default: var(--pine-color-grey-800);\n  --color-text-secondary-disabled: var(--pine-color-grey-400);\n  --color-outline-secondary: var(--pine-color-purple-300);\n\n  // accent\n  --color-background-accent-default: var(--pine-color-purple-500);\n  --color-background-accent-disabled: var(--pine-color-purple-100);\n  --color-background-accent-hover: var(--pine-color-purple-600);\n  --color-text-accent-default: var(--pine-color-white);\n  --color-text-accent-disabled: var(--pine-color-purple-300);\n  --color-outline-accent: var(--pine-color-purple-300);\n\n  // destructive\n  --color-background-destructive-default: var(--pine-color-red-500);\n  --color-background-destructive-disabled: var(--pine-color-red-100);\n  --color-background-destructive-hover: var(--pine-color-red-600);\n  --color-text-destructive-default: var(--pine-color-white);\n  --color-text-destructive-disabled: var(--pine-color-red-300);\n  --color-outline-destructive: var(--pine-color-red-300);\n\n  --spacing-disclosure-icon-margin-inline-end: var(--pine-spacing-0);\n  --spacing-disclosure-margin-inline-start: var(--pine-spacing-100);\n  --spacing-icon-margin-inline-end: var(--pine-spacing-100);\n  --spacing-padding-block: var(--pine-spacing-100);\n  --spacing-padding-inline: var(--pine-spacing-200);\n  --spacing-unstyled: var(--pine-spacing-0);\n\n  --typography-default: var(--pine-font-weight-body-medium) var(--pine-font-size-100)/var(--pine-line-height-150) var(--pine-font-family-greet);\n\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n.pds-button {\n  align-items: center;\n  background-color: var(--color-background-default);\n  border: var(--border-width-default) solid var(--color-border-default);\n  border-radius: var(--pine-border-radius-circle);\n  color: var(--color-text-default);\n  display: flex;\n  font: var(--typography-default);\n  min-height: 40px;\n  padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n  pds-icon {\n    color: currentColor;\n    fill: currentColor;\n    margin-inline-end: var(--spacing-icon-margin-inline-end);\n  }\n\n  &:hover {\n    background-color: var(--color-background-hover);\n    border-color: var(--color-border-hover);\n  }\n\n  &:focus-visible {\n    --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n    border-color: var(--color-border-focus);\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  &:disabled {\n    background-color: var(--color-background-disabled);\n    border-color: var(--color-border-disabled);\n    color: var(--color-text-disabled);\n  }\n}\n\n.pds-button--primary {\n  --color-background-default: var(--color-background-primary-default);\n  --color-background-hover: var(--color-background-primary-hover);\n  --color-background-disabled: var(--color-background-primary-disabled);\n  --color-text-default: var(--color-text-primary-default);\n  --color-text-disabled: var(--color-text-primary-disabled);\n  --color-outline: var(--color-outline-primary);\n}\n\n.pds-button--accent {\n  --color-background-default: var(--color-background-accent-default);\n  --color-background-hover: var(--color-background-accent-hover);\n  --color-background-disabled: var(--color-background-accent-disabled);\n  --color-text-default: var(--color-text-accent-default);\n  --color-text-disabled: var(--color-text-accent-disabled);\n  --color-outline: var(--color-outline-accent);\n}\n\n.pds-button--destructive {\n  --color-background-default: var(--color-background-destructive-default);\n  --color-background-hover: var(--color-background-destructive-hover);\n  --color-background-disabled: var(--color-background-destructive-disabled);\n  --color-text-default: var(--color-text-destructive-default);\n  --color-text-disabled: var(--color-text-destructive-disabled);\n  --color-outline: var(--color-outline-destructive);\n\n  &:focus-visible {\n    --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--color-background-destructive-default);\n    box-shadow: var(--box-shadow-focus); // Remove when outline radius is supported in Safari\n    outline: none;\n  }\n}\n\n.pds-button--secondary,\n.pds-button--disclosure {\n  --color-background-default: transparent;\n  --color-background-hover: transparent;\n  --color-background-disabled: transparent;\n  --color-border-disabled: var(--color-border-secondary-disabled);\n  --color-border-focus: var(--color-border-secondary-focus);\n  --color-border-hover: var(--color-border-secondary-hover);\n  --color-border-default: var(--color-border-secondary-default);\n  --color-text-default: var(--color-text-secondary-default);\n  --color-text-disabled: var(--color-text-secondary-disabled);\n  --color-outline: var(--color-outline-secondary);\n\n  &:hover {\n    background-color: var(--color-background-secondary-hover);\n  }\n}\n\n.pds-button--disclosure {\n  pds-icon {\n    margin-inline-end: var(--spacing-disclosure-icon-margin-inline-end);\n    margin-inline-start: var(--spacing-disclosure-margin-inline-start);\n  }\n}\n\n.pds-button--unstyled {\n  --color-background-default: transparent;\n  --color-background-hover: transparent;\n  --color-background-disabled: transparent;\n  --color-text-default: inherit;\n  border: var(--border-width-unstyled);\n  margin: var(--spacing-unstyled);\n  min-height: auto;\n  padding: var(--spacing-unstyled);\n  width: inherit;\n}\n","import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { hasShadowDom } from '../../utils/utils';\n\nimport { caretDown } from '@pine-ds/icons/icons';\n\n/**\n * @part button - Exposes the button element for styling.\n * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.\n * @part icon - Exposes the icon component for styling.\n*/\n\n@Component({\n  tag: 'pds-button',\n  styleUrls: ['../../global/styles/base.scss', '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   * Determines the button's disabled state.\n   * @defaultValue false\n   */\n  @Prop() disabled? = false;\n\n  /**\n   * Displays an icon before the text when\n   * the icon string matches an icon name.\n   * @defaultValue null\n   */\n  @Prop() icon?: string = null;\n\n  /**\n   * Provides the 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 the style variant of the button.\n   * @defaultValue primary\n   */\n  @Prop() variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' = 'primary';\n\n  @Event() pdsClick: EventEmitter;\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    this.pdsClick.emit(ev);\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 icon={caretDown} part=\"caret\"></pds-icon>}\n        </button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oJAIO,IAAMA,aAAe,SAACC,GAC3B,QAASA,EAAGC,cAAiBD,EAAWE,YAC1C,ECNA,IAAMC,QAAU,yrDAChB,IAAAC,gBAAeD,QCDf,IAAME,aAAe,+7LACrB,IAAAC,gBAAeD,a,ICeFE,UAAS,W,+FA6CZC,KAAAC,YAAc,SAACC,GACrB,GAAIC,EAAKC,MAAQ,SAAU,CAEzB,GAAIb,aAAaY,EAAKX,IAAK,CACzB,IAAMa,EAAOF,EAAKX,GAAGc,QAAQ,QAC7B,GAAID,EAAM,CACRH,EAAGK,iBAEH,IAAMC,EAAaC,SAASC,cAAc,UAC1CF,EAAWJ,KAAOD,EAAKC,KACvBI,EAAWG,MAAMC,QAAU,OAC3BP,EAAKQ,YAAYL,GACjBA,EAAWM,QACXN,EAAWO,Q,GAIjBZ,EAAKa,SAASC,KAAKf,E,2CAlDD,M,UAOI,K,mDAgBuB,S,aAMmD,S,CAwB1FH,EAAAmB,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,cAEpB,GAAInB,KAAKoB,QAAS,CAChBD,EAAWE,KAAK,eAAiBrB,KAAKoB,Q,CAGxC,OAAOD,EAAWG,KAAK,K,EAGzBvB,EAAAmB,UAAAK,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2DACY1B,KAAK2B,SAAW,OAAS,KACxCC,GAAI5B,KAAK6B,YACTC,QAAS9B,KAAKC,YACdmB,QAASpB,KAAKoB,SAEdI,EAAA,UAAAE,IAAA,2CACEK,MAAO/B,KAAKmB,aACZQ,SAAU3B,KAAK2B,SACfK,KAAMhC,KAAKgC,KACXC,KAAK,SACL7B,KAAMJ,KAAKI,KACX8B,MAAOlC,KAAKkC,OAEXlC,KAAKmC,MAAQnC,KAAKoB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUM,KAAMhC,KAAKmC,KAAMF,KAAK,SAC/ET,EAAA,QAAAE,IAAA,6CACC1B,KAAKoB,UAAY,cAAgBI,EAAA,YAAAE,IAAA,2CAAUS,KAAMC,UAAWH,KAAK,W,gIA7FtD,G","ignoreList":[]}

package/dist/esm-es5/pds-checkbox.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host}from"./index-8b335bbb.js";import{m as messageId,P as PdsLabel,a as assignDescription}from"./pds-label-1f80d632.js";var baseCss=":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(div,label,p,span){color:var(--pine-color-text-default)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";var PdsCheckboxStyle0=baseCss;var pdsCheckboxCss=':host{--border-default:var(--pine-border-interactive-default);--border-hover:var(--pine-border-interactive-hover);--border-radius:var(--pine-border-radius-050);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);--box-shadow-focus-invalid:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-red-200);--color-background:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-100);--color-background-hover:var(--pine-color-grey-100);--color-background-checked:var(--pine-color-purple-500);--color-background-checked-hover:var(--pine-color-purple-600);--color-border-disabled:var(--pine-color-grey-300);--color-border-icon:var(--pine-color-white);--color-disabled:var(--pine-color-grey-300);--color-invalid:var(--pine-color-red-500);--color-invalid-hover:var(--pine-color-red-600);--color-text-disabled:var(--pine-color-grey-500);--color-text-message:var(--pine-color-grey-800);--sizing-input:var(--pine-font-size-116);-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:checked:hover{background:var(--color-invalid-hover);border-color:var(--color-invalid-hover)}:host(.is-invalid) input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-invalid);box-shadow:var(--box-shadow-focus-invalid);outline:none}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--color-invalid)}:host(.is-indeterminate) input{background:var(--color-background-checked);border-color:var(--color-background-checked)}:host(.is-indeterminate) input:hover{background:var(--color-background-checked-hover);border-color:var(--color-background-checked-hover)}:host(.is-indeterminate) input::after{border:1px solid var(--color-border-icon);border-bottom:0;border-left:0;border-top:0;content:"";display:block;height:7px;left:50%;position:absolute;top:50%;-webkit-transform:rotate(90deg) translate3d(-103%, 32%, 0);transform:rotate(90deg) translate3d(-103%, 32%, 0);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-background);border:var(--border-default);border-radius:var(--border-radius);height:var(--sizing-input);margin:0;position:relative;width:var(--sizing-input)}input:hover{background:var(--color-background-hover);border:var(--border-hover)}input:checked{background:var(--color-background-checked);border-color:var(--color-background-checked)}input:checked:hover{background:var(--color-background-checked-hover);border-color:var(--color-background-checked-hover)}input:checked::after{border:1px solid var(--color-border-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(--color-background-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(--color-border-disabled)}input:disabled+label{color:var(--color-text-disabled);cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--color-text-disabled)}input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-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(--color-text-message);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:26px;margin-inline-start:26px;width:100%}';var PdsCheckboxStyle1=pdsCheckboxCss;var PdsCheckbox=function(){function e(e){var r=this;registerInstance(this,e);this.pdsCheckboxChange=createEvent(this,"pdsCheckboxChange",7);this.pdsCheckboxInput=createEvent(this,"pdsCheckboxInput",7);this.handleCheckboxChange=function(e){if(r.disabled){return}var o=e.target;r.checked=o.checked;r.pdsCheckboxChange.emit({checked:o.checked,value:r.value})};this.handleInput=function(){r.pdsCheckboxInput.emit({checked:r.checked,value:r.value})};this.checked=false;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}e.prototype.updateIndeterminate=function(){this.indeterminate=undefined};e.prototype.classNames=function(){var e=[];if(this.invalid){e.push("is-invalid")}if(this.indeterminate){e.push("is-indeterminate")}if(this.disabled){e.push("is-disabled")}return e.join("  ")};e.prototype.render=function(){return h(Host,{key:"445bf52e75b4d45cffa0621550c3221da77cd28a",class:this.classNames()},h("input",{key:"326a380543328244ad71da4188d3a18561a8ddd3",type:"checkbox","aria-describedby":assignDescription(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,id:this.componentId,indeterminate:this.indeterminate,name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,onChange:this.handleCheckboxChange,onInput:this.handleInput}),h(PdsLabel,{key:"eb22531287c39f53ad02eeba93e3845ead776f01",htmlFor:this.componentId,text:this.label,classNames:this.labelHidden?"visually-hidden":""}),this.helperMessage&&h("div",{key:"f434bc8e221fcd55d864c40de9b030066bbfc028",class:"pds-checkbox__message",id:messageId(this.componentId,"helper")},this.helperMessage),this.errorMessage&&h("div",{key:"b3193bc5239041909f7d256e8ad20d23dfab0ef3",class:"pds-checkbox__message pds-checkbox__message--error",id:messageId(this.componentId,"error"),"aria-live":"assertive"},this.errorMessage))};Object.defineProperty(e,"watchers",{get:function(){return{checked:["updateIndeterminate"]}},enumerable:false,configurable:true});return e}();PdsCheckbox.style=PdsCheckboxStyle0+PdsCheckboxStyle1;export{PdsCheckbox as pds_checkbox};
+import{r as registerInstance,c as createEvent,h,H as Host}from"./index-b1696fed.js";import{m as messageId,P as PdsLabel,a as assignDescription}from"./pds-label-62469596.js";import{b as danger}from"./index-56752d25.js";var baseCss=":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(div,label,p,span){color:var(--pine-color-text-default)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";var PdsCheckboxStyle0=baseCss;var pdsCheckboxCss=':host{--border-default:var(--pine-border-interactive-default);--border-hover:var(--pine-border-interactive-hover);--border-radius:var(--pine-border-radius-050);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);--box-shadow-focus-invalid:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-red-200);--color-background:var(--pine-color-white);--color-background-disabled:var(--pine-color-grey-100);--color-background-hover:var(--pine-color-grey-100);--color-background-checked:var(--pine-color-purple-500);--color-background-checked-hover:var(--pine-color-purple-600);--color-border-disabled:var(--pine-color-grey-300);--color-border-icon:var(--pine-color-white);--color-disabled:var(--pine-color-grey-300);--color-invalid:var(--pine-color-red-500);--color-invalid-hover:var(--pine-color-red-600);--color-text-disabled:var(--pine-color-grey-500);--color-text-message:var(--pine-color-grey-700);--sizing-input:var(--pine-font-size-116);-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:checked:hover{background:var(--color-invalid-hover);border-color:var(--color-invalid-hover)}:host(.is-invalid) input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-invalid);box-shadow:var(--box-shadow-focus-invalid);outline:none}:host(.is-invalid) label,:host(.is-invalid) .pds-checkbox__message--error{color:var(--color-invalid)}:host(.is-indeterminate) input{background:var(--color-background-checked);border-color:var(--color-background-checked)}:host(.is-indeterminate) input:hover{background:var(--color-background-checked-hover);border-color:var(--color-background-checked-hover)}:host(.is-indeterminate) input::after{border:1px solid var(--color-border-icon);border-bottom:0;border-left:0;border-top:0;content:"";display:block;height:7px;left:50%;position:absolute;top:50%;-webkit-transform:rotate(90deg) translate3d(-103%, 32%, 0);transform:rotate(90deg) translate3d(-103%, 32%, 0);width:4px}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--color-background);border:var(--border-default);border-radius:var(--border-radius);height:var(--sizing-input);margin:0;position:relative;width:var(--sizing-input)}input:hover{background:var(--color-background-hover);border:var(--border-hover)}input:checked{background:var(--color-background-checked);border-color:var(--color-background-checked)}input:checked:hover{background:var(--color-background-checked-hover);border-color:var(--color-background-checked-hover)}input:checked::after{border:1px solid var(--color-border-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(--color-background-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(--color-border-disabled)}input:disabled+label{color:var(--color-text-disabled);cursor:not-allowed}input:disabled~.pds-checkbox__message{color:var(--color-text-disabled)}input:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}label{font-weight:var(--pine-font-weight-body-medium);-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(--color-text-message);-webkit-margin-before:6px;margin-block-start:6px;-webkit-margin-start:26px;margin-inline-start:26px;width:100%}.pds-checkbox__message--error{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;font-size:var(--pine-font-size-085);gap:var(--pine-spacing-050)}';var PdsCheckboxStyle1=pdsCheckboxCss;var PdsCheckbox=function(){function e(e){var r=this;registerInstance(this,e);this.pdsCheckboxChange=createEvent(this,"pdsCheckboxChange",7);this.pdsCheckboxInput=createEvent(this,"pdsCheckboxInput",7);this.handleCheckboxChange=function(e){if(r.disabled){return}var o=e.target;r.checked=o.checked;r.pdsCheckboxChange.emit({checked:o.checked,value:r.value})};this.handleInput=function(){r.pdsCheckboxInput.emit({checked:r.checked,value:r.value})};this.checked=false;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}e.prototype.updateIndeterminate=function(){this.indeterminate=undefined};e.prototype.classNames=function(){var e=[];if(this.invalid){e.push("is-invalid")}if(this.indeterminate){e.push("is-indeterminate")}if(this.disabled){e.push("is-disabled")}return e.join("  ")};e.prototype.render=function(){return h(Host,{key:"20ec5fff75ed7c8e1fa203377da84533a24b359f",class:this.classNames()},h("input",{key:"640f30df7addcfb3ec9fc850a32283b5d7e9d096",type:"checkbox","aria-describedby":assignDescription(this.componentId,this.invalid,this.helperMessage),"aria-invalid":this.invalid?"true":undefined,id:this.componentId,indeterminate:this.indeterminate,name:this.name,value:this.value,checked:this.checked,required:this.required,disabled:this.disabled,onChange:this.handleCheckboxChange,onInput:this.handleInput}),h(PdsLabel,{key:"8aa6d71f86bba517fd5b697b7a4c91a2002f29ba",htmlFor:this.componentId,text:this.label,classNames:this.labelHidden?"visually-hidden":""}),this.helperMessage&&h("div",{key:"3b683e51e76c802e77022e6544b05305e8fbaa2f",class:"pds-checkbox__message",id:messageId(this.componentId,"helper")},this.helperMessage),this.errorMessage&&h("div",{key:"8da70a6935cf8c419d2f1ffa36ae21a843823b11",class:"pds-checkbox__message pds-checkbox__message--error",id:messageId(this.componentId,"error"),"aria-live":"assertive"},h("pds-icon",{key:"9fa9b8662cce3319ccff5bc8bce90b364f310d7b",icon:danger,size:"small"}),this.errorMessage))};Object.defineProperty(e,"watchers",{get:function(){return{checked:["updateIndeterminate"]}},enumerable:false,configurable:true});return e}();PdsCheckbox.style=PdsCheckboxStyle0+PdsCheckboxStyle1;export{PdsCheckbox as pds_checkbox};
 //# sourceMappingURL=pds-checkbox.entry.js.map

package/dist/esm-es5/pds-checkbox.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["baseCss","PdsCheckboxStyle0","pdsCheckboxCss","PdsCheckboxStyle1","PdsCheckbox","this","handleCheckboxChange","e","_this","disabled","target","checked","pdsCheckboxChange","emit","value","handleInput","pdsCheckboxInput","prototype","updateIndeterminate","indeterminate","undefined","classNames","invalid","push","join","render","h","Host","key","class","type","assignDescription","componentId","helperMessage","id","name","required","onChange","onInput","PdsLabel","htmlFor","text","label","labelHidden","messageId","errorMessage"],"sources":["src/global/styles/base.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n  Josh's Custom CSS Reset\n  https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n  box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n  margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n  display: block;\n  max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n  font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n  overflow-wrap: break-word;\n}\n\n/*\n  Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n  list-style: none;\n}\n\n:where(table) {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n/*\n  Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n  font: var(--pine-typography-body-md-default);\n  letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n  font-family: var(--pine-font-family-heading);\n  color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n  font: var(--pine-typography-heading-h1);\n  letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n  font: var(--pine-typography-heading-h2);\n  letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n  font: var(--pine-typography-heading-h3);\n  letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n  font: var(--pine-typography-heading-h4);\n  letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n  font: var(--pine-typography-heading-h5);\n  letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n  font: var(--pine-typography-heading-h6);\n  letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(div, label, p, span) {\n  color: var(--pine-color-text-default);\n}\n\n:where(code, kbd, pre, samp) {\n  font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n  cursor: pointer;\n}\n\n:where(:focus) {\n  outline: 0;\n}\n\n:where(:focus-visible) {\n  outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n  display: none !important;\n}\n",":host {\n  --border-default: var(--pine-border-interactive-default);\n  --border-hover: var(--pine-border-interactive-hover);\n\n  --border-radius: var(--pine-border-radius-050);\n\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n  --box-shadow-focus-invalid: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-red-200);\n\n  --color-background: var(--pine-color-white);\n  --color-background-disabled: var(--pine-color-grey-100);\n  --color-background-hover: var(--pine-color-grey-100);\n  --color-background-checked: var(--pine-color-purple-500);\n  --color-background-checked-hover: var(--pine-color-purple-600);\n  --color-border-disabled: var(--pine-color-grey-300);\n  --color-border-icon: var(--pine-color-white);\n  --color-disabled: var(--pine-color-grey-300);\n  --color-invalid: var(--pine-color-red-500);\n  --color-invalid-hover: var(--pine-color-red-600);\n  --color-text-disabled: var(--pine-color-grey-500);\n  --color-text-message: var(--pine-color-grey-800);\n\n  --sizing-input: var(--pine-font-size-116);\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      &:hover {\n        background: var(--color-invalid-hover);\n        border-color: var(--color-invalid-hover);\n      }\n    }\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-invalid); // Remove when outline radius is supported in Safari\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 {\n    background: var(--color-background-checked);\n    border-color: var(--color-background-checked);\n\n    &:hover {\n      background: var(--color-background-checked-hover);\n      border-color: var(--color-background-checked-hover);\n    }\n\n    &::after {\n      border: 1px solid var(--color-border-icon);\n      border-bottom: 0;\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(90deg) translate3d(-103%, 32%, 0);\n      width: 4px;\n    }\n  }\n}\n\ninput {\n  appearance: none;\n  background-color: var(--color-background);\n  border: var(--border-default);\n  border-radius: var(--border-radius);\n  height: var(--sizing-input);\n  margin: 0;\n  position: relative;\n  width: var(--sizing-input);\n\n  &:hover {\n    background: var(--color-background-hover);\n    border: var(--border-hover);\n  }\n\n  &:checked {\n    background: var(--color-background-checked);\n    border-color: var(--color-background-checked);\n\n    &:hover {\n      background: var(--color-background-checked-hover);\n      border-color: var(--color-background-checked-hover);\n    }\n\n    &::after {\n      border: 1px solid var(--color-border-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(--color-background-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(--color-border-disabled);\n      }\n    }\n\n    + label {\n      color: var(--color-text-disabled);\n      cursor: not-allowed;\n    }\n\n    ~ .pds-checkbox__message {\n      color: var(--color-text-disabled);\n    }\n  }\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\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(--color-text-message);\n  margin-block-start: 6px;\n  margin-inline-start: 26px;\n  width: 100%;\n}\n","import { Component, h, Prop, Host, Event, EventEmitter, Watch } 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  styleUrls: ['../../global/styles/base.scss', 'pds-checkbox.scss'],\n  shadow: true,\n})\nexport class PdsCheckbox {\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\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({ mutable: true }) 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  @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Watch('checked')\n  updateIndeterminate() {\n    this.indeterminate = undefined\n  }\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 handleInput = () => {\n    this.pdsCheckboxInput.emit({\n      checked: this.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          type=\"checkbox\"\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          id={this.componentId}\n          indeterminate={this.indeterminate}\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          onInput={this.handleInput}\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"],"mappings":"6KAAA,IAAMA,QAAU,yrDAChB,IAAAC,kBAAeD,QCDf,IAAME,eAAiB,i2HACvB,IAAAC,kBAAeD,e,ICSFE,YAAW,W,8KA0EdC,KAAAC,qBAAuB,SAACC,GAC9B,GAAIC,EAAKC,SAAU,CACjB,M,CAGF,IAAMC,EAASH,EAAEG,OACjBF,EAAKG,QAAUD,EAAOC,QAEtBH,EAAKI,kBAAkBC,KAAK,CAC1BF,QAASD,EAAOC,QAChBG,MAAON,EAAKM,O,EAIRT,KAAAU,YAAc,WACpBP,EAAKQ,iBAAiBH,KAAK,CACzBF,QAASH,EAAKG,QACdG,MAAON,EAAKM,O,eAvF6B,M,iRAkE7CV,EAAAa,UAAAC,oBAAA,WACEb,KAAKc,cAAgBC,S,EAwBfhB,EAAAa,UAAAI,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAIhB,KAAKiB,QAAS,CAAED,EAAWE,KAAK,a,CACpC,GAAIlB,KAAKc,cAAe,CAAEE,EAAWE,KAAK,mB,CAC1C,GAAIlB,KAAKI,SAAU,CAAEY,EAAWE,KAAK,c,CAErC,OAAOF,EAAWG,KAAK,K,EAGzBpB,EAAAa,UAAAQ,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CAACC,MAAOxB,KAAKgB,cAChBK,EAAA,SAAAE,IAAA,2CACEE,KAAK,WAAU,mBACGC,kBAAkB1B,KAAK2B,YAAa3B,KAAKiB,QAASjB,KAAK4B,eAAc,eACzE5B,KAAKiB,QAAU,OAASF,UACtCc,GAAI7B,KAAK2B,YACTb,cAAed,KAAKc,cACpBgB,KAAM9B,KAAK8B,KACXrB,MAAOT,KAAKS,MACZH,QAASN,KAAKM,QACdyB,SAAU/B,KAAK+B,SACf3B,SAAUJ,KAAKI,SACf4B,SAAUhC,KAAKC,qBACfgC,QAASjC,KAAKU,cAEhBW,EAACa,SAAQ,CAAAX,IAAA,2CAACY,QAASnC,KAAK2B,YAAaS,KAAMpC,KAAKqC,MAAOrB,WAAYhB,KAAKsC,YAAc,kBAAoB,KACzGtC,KAAK4B,eACJP,EAAA,OAAAE,IAAA,2CACEC,MAAO,wBACPK,GAAIU,UAAUvC,KAAK2B,YAAa,WAE/B3B,KAAK4B,eAGT5B,KAAKwC,cACJnB,EAAA,OAAAE,IAAA,2CACEC,MAAO,qDACPK,GAAIU,UAAUvC,KAAK2B,YAAa,SAAQ,YAC9B,aAET3B,KAAKwC,c,4IAzIM,G","ignoreList":[]}
+{"version":3,"names":["baseCss","PdsCheckboxStyle0","pdsCheckboxCss","PdsCheckboxStyle1","PdsCheckbox","this","handleCheckboxChange","e","_this","disabled","target","checked","pdsCheckboxChange","emit","value","handleInput","pdsCheckboxInput","prototype","updateIndeterminate","indeterminate","undefined","classNames","invalid","push","join","render","h","Host","key","class","type","assignDescription","componentId","helperMessage","id","name","required","onChange","onInput","PdsLabel","htmlFor","text","label","labelHidden","messageId","errorMessage","icon","danger","size"],"sources":["src/global/styles/base.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.scss?tag=pds-checkbox&encapsulation=shadow","src/components/pds-checkbox/pds-checkbox.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n  Josh's Custom CSS Reset\n  https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n  box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n  margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n  display: block;\n  max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n  font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n  overflow-wrap: break-word;\n}\n\n/*\n  Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n  list-style: none;\n}\n\n:where(table) {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n/*\n  Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n  font: var(--pine-typography-body-md-default);\n  letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n  font-family: var(--pine-font-family-heading);\n  color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n  font: var(--pine-typography-heading-h1);\n  letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n  font: var(--pine-typography-heading-h2);\n  letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n  font: var(--pine-typography-heading-h3);\n  letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n  font: var(--pine-typography-heading-h4);\n  letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n  font: var(--pine-typography-heading-h5);\n  letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n  font: var(--pine-typography-heading-h6);\n  letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(div, label, p, span) {\n  color: var(--pine-color-text-default);\n}\n\n:where(code, kbd, pre, samp) {\n  font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n  cursor: pointer;\n}\n\n:where(:focus) {\n  outline: 0;\n}\n\n:where(:focus-visible) {\n  outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n  display: none !important;\n}\n",":host {\n  --border-default: var(--pine-border-interactive-default);\n  --border-hover: var(--pine-border-interactive-hover);\n\n  --border-radius: var(--pine-border-radius-050);\n\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n  --box-shadow-focus-invalid: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-red-200);\n\n  --color-background: var(--pine-color-white);\n  --color-background-disabled: var(--pine-color-grey-100);\n  --color-background-hover: var(--pine-color-grey-100);\n  --color-background-checked: var(--pine-color-purple-500);\n  --color-background-checked-hover: var(--pine-color-purple-600);\n  --color-border-disabled: var(--pine-color-grey-300);\n  --color-border-icon: var(--pine-color-white);\n  --color-disabled: var(--pine-color-grey-300);\n  --color-invalid: var(--pine-color-red-500);\n  --color-invalid-hover: var(--pine-color-red-600);\n  --color-text-disabled: var(--pine-color-grey-500);\n  --color-text-message: var(--pine-color-grey-700);\n\n  --sizing-input: var(--pine-font-size-116);\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      &:hover {\n        background: var(--color-invalid-hover);\n        border-color: var(--color-invalid-hover);\n      }\n    }\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-invalid); // Remove when outline radius is supported in Safari\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 {\n    background: var(--color-background-checked);\n    border-color: var(--color-background-checked);\n\n    &:hover {\n      background: var(--color-background-checked-hover);\n      border-color: var(--color-background-checked-hover);\n    }\n\n    &::after {\n      border: 1px solid var(--color-border-icon);\n      border-bottom: 0;\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(90deg) translate3d(-103%, 32%, 0);\n      width: 4px;\n    }\n  }\n}\n\ninput {\n  appearance: none;\n  background-color: var(--color-background);\n  border: var(--border-default);\n  border-radius: var(--border-radius);\n  height: var(--sizing-input);\n  margin: 0;\n  position: relative;\n  width: var(--sizing-input);\n\n  &:hover {\n    background: var(--color-background-hover);\n    border: var(--border-hover);\n  }\n\n  &:checked {\n    background: var(--color-background-checked);\n    border-color: var(--color-background-checked);\n\n    &:hover {\n      background: var(--color-background-checked-hover);\n      border-color: var(--color-background-checked-hover);\n    }\n\n    &::after {\n      border: 1px solid var(--color-border-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(--color-background-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(--color-border-disabled);\n      }\n    }\n\n    + label {\n      color: var(--color-text-disabled);\n      cursor: not-allowed;\n    }\n\n    ~ .pds-checkbox__message {\n      color: var(--color-text-disabled);\n    }\n  }\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\nlabel {\n  font-weight: var(--pine-font-weight-body-medium);\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(--color-text-message);\n  margin-block-start: 6px;\n  margin-inline-start: 26px;\n  width: 100%;\n}\n\n.pds-checkbox__message--error {\n  align-items: center;\n  display: flex;\n  font-size: var(--pine-font-size-085);\n  gap: var(--pine-spacing-050);\n}\n","import { Component, h, Prop, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\nimport { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-checkbox',\n  styleUrls: ['../../global/styles/base.scss', 'pds-checkbox.scss'],\n  shadow: true,\n})\nexport class PdsCheckbox {\n  /**\n   * It determines whether or not the checkbox is checked.\n   */\n  @Prop({ mutable: true }) checked?: boolean = false;\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({ mutable: true }) 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  @Event() pdsCheckboxInput: EventEmitter<CheckboxChangeEventDetail>;\n\n  @Watch('checked')\n  updateIndeterminate() {\n    this.indeterminate = undefined\n  }\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 handleInput = () => {\n    this.pdsCheckboxInput.emit({\n      checked: this.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          type=\"checkbox\"\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          id={this.componentId}\n          indeterminate={this.indeterminate}\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          onInput={this.handleInput}\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            <pds-icon icon={danger} size=\"small\" />\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"],"mappings":"0NAAA,IAAMA,QAAU,yrDAChB,IAAAC,kBAAeD,QCDf,IAAME,eAAiB,yjIACvB,IAAAC,kBAAeD,e,ICUFE,YAAW,W,8KA0EdC,KAAAC,qBAAuB,SAACC,GAC9B,GAAIC,EAAKC,SAAU,CACjB,M,CAGF,IAAMC,EAASH,EAAEG,OACjBF,EAAKG,QAAUD,EAAOC,QAEtBH,EAAKI,kBAAkBC,KAAK,CAC1BF,QAASD,EAAOC,QAChBG,MAAON,EAAKM,O,EAIRT,KAAAU,YAAc,WACpBP,EAAKQ,iBAAiBH,KAAK,CACzBF,QAASH,EAAKG,QACdG,MAAON,EAAKM,O,eAvF6B,M,iRAkE7CV,EAAAa,UAAAC,oBAAA,WACEb,KAAKc,cAAgBC,S,EAwBfhB,EAAAa,UAAAI,WAAA,WACN,IAAMA,EAAa,GAEnB,GAAIhB,KAAKiB,QAAS,CAAED,EAAWE,KAAK,a,CACpC,GAAIlB,KAAKc,cAAe,CAAEE,EAAWE,KAAK,mB,CAC1C,GAAIlB,KAAKI,SAAU,CAAEY,EAAWE,KAAK,c,CAErC,OAAOF,EAAWG,KAAK,K,EAGzBpB,EAAAa,UAAAQ,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CAACC,MAAOxB,KAAKgB,cAChBK,EAAA,SAAAE,IAAA,2CACEE,KAAK,WAAU,mBACGC,kBAAkB1B,KAAK2B,YAAa3B,KAAKiB,QAASjB,KAAK4B,eAAc,eACzE5B,KAAKiB,QAAU,OAASF,UACtCc,GAAI7B,KAAK2B,YACTb,cAAed,KAAKc,cACpBgB,KAAM9B,KAAK8B,KACXrB,MAAOT,KAAKS,MACZH,QAASN,KAAKM,QACdyB,SAAU/B,KAAK+B,SACf3B,SAAUJ,KAAKI,SACf4B,SAAUhC,KAAKC,qBACfgC,QAASjC,KAAKU,cAEhBW,EAACa,SAAQ,CAAAX,IAAA,2CAACY,QAASnC,KAAK2B,YAAaS,KAAMpC,KAAKqC,MAAOrB,WAAYhB,KAAKsC,YAAc,kBAAoB,KACzGtC,KAAK4B,eACJP,EAAA,OAAAE,IAAA,2CACEC,MAAO,wBACPK,GAAIU,UAAUvC,KAAK2B,YAAa,WAE/B3B,KAAK4B,eAGT5B,KAAKwC,cACJnB,EAAA,OAAAE,IAAA,2CACEC,MAAO,qDACPK,GAAIU,UAAUvC,KAAK2B,YAAa,SAAQ,YAC9B,aAEVN,EAAA,YAAAE,IAAA,2CAAUkB,KAAMC,OAAQC,KAAK,UAC5B3C,KAAKwC,c,4IA1IM,G","ignoreList":[]}

package/dist/esm-es5/pds-chip.entry.js

@@ -1,2 +1,2 @@
-import{r as registerInstance,c as createEvent,h,H as Host}from"./index-8b335bbb.js";import{d as downSmall,r as remove}from"./index-5e7a8a36.js";var baseCss=":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(div,label,p,span){color:var(--pine-color-text-default)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";var PdsChipStyle0=baseCss;var pdsChipCss=":host{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);--border-radius:var(--pine-border-radius-200);--color-background-accent:var(--pine-color-purple-100);--color-background-accent-dot:var(--pine-color-purple-600);--color-background-accent-hover:var(--pine-color-purple-200);--color-background-danger:var(--pine-color-red-100);--color-background-danger-dot:var(--pine-color-red-600);--color-background-danger-hover:var(--pine-color-red-200);--color-background-info:var(--pine-color-blue-100);--color-background-info-dot:var(--pine-color-blue-600);--color-background-info-hover:var(--pine-color-blue-200);--color-background-neutral:var(--pine-color-grey-100);--color-background-neutral-dot:var(--pine-color-grey-600);--color-background-neutral-hover:var(--pine-color-grey-400);--color-background-success:var(--pine-color-green-100);--color-background-success-dot:var(--pine-color-green-600);--color-background-success-hover:var(--pine-color-green-200);--color-background-warning:var(--pine-color-yellow-100);--color-background-warning-dot:var(--pine-color-yellow-600);--color-background-warning-hover:var(--pine-color-yellow-200);--color-text-accent:var(--pine-color-purple-950);--color-text-danger:var(--pine-color-red-950);--color-text-info:var(--pine-color-blue-950);--color-text-neutral:var(--pine-color-grey-950);--color-text-success:var(--pine-color-green-950);--color-text-warning:var(--pine-color-yellow-950);--font-size-sm:var(--pine-font-size-body-md);--font-size-lg:var(--pine-font-size-heading-h6);--font-weight:var(--pine-font-weight-medium);--spacing-xxs:calc(var(--pine-spacing-050) / 2);--spacing-xs:var(--pine-spacing-050);--spacing-sm:calc(var(--pine-spacing-150) / 2);--spacing-md:var(--pine-spacing-100);--spacing-lg:calc(var(--pine-spacing-250) / 2);--spacing-xl:var(--pine-spacing-150);--spacing-xxl:calc(var(--pine-spacing-350) / 2);--sizing-close:10px;--sizing-close-lg:24px;--sizing-dot:4px;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius);display:-ms-inline-flexbox;display:inline-flex;padding-block:var(--spacing-xs);padding-inline:var(--spacing-lg)}:host(.pds-chip--accent){background:var(--color-background-accent)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--color-background-accent-dot)}:host(.pds-chip--accent) .pds-chip__label,:host(.pds-chip--accent) .pds-chip__button{color:var(--color-text-accent)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--color-background-accent-hover)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--color-background-accent-hover)}:host(.pds-chip--danger){background:var(--color-background-danger)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--color-background-danger-dot)}:host(.pds-chip--danger) .pds-chip__label,:host(.pds-chip--danger) .pds-chip__button{color:var(--color-text-danger)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--color-background-danger-hover)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--color-background-danger-hover)}:host(.pds-chip--info){background:var(--color-background-info)}:host(.pds-chip--info) .pds-chip__dot{background:var(--color-background-info-dot)}:host(.pds-chip--info) .pds-chip__label,:host(.pds-chip--info) .pds-chip__button{color:var(--color-text-info)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--color-background-info-hover)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--color-background-info-hover)}:host(.pds-chip--neutral){background:var(--color-background-neutral)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--color-background-neutral-dot)}:host(.pds-chip--neutral) .pds-chip__label,:host(.pds-chip--neutral) .pds-chip__button{color:var(--color-text-neutral)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--color-background-neutral-hover)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--color-background-neutral-hover)}:host(.pds-chip--success){background:var(--color-background-success)}:host(.pds-chip--success) .pds-chip__dot{background:var(--color-background-success-dot)}:host(.pds-chip--success) .pds-chip__label,:host(.pds-chip--success) .pds-chip__button{color:var(--color-text-success)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--color-background-success-hover)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--color-background-success-hover)}:host(.pds-chip--warning){background:var(--color-background-warning)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--color-background-warning-dot)}:host(.pds-chip--warning) .pds-chip__label,:host(.pds-chip--warning) .pds-chip__button{color:var(--color-text-warning)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--color-background-warning-hover)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--color-background-warning-hover)}.pds-chip__dot{border:1px solid transparent;border-radius:50%;display:inline-block;height:var(--sizing-dot);-webkit-margin-after:var(--spacing-xxs);margin-block-end:var(--spacing-xxs);-webkit-margin-end:var(--spacing-xs);margin-inline-end:var(--spacing-xs);width:var(--sizing-dot)}.pds-chip__label{font-size:var(--font-size-sm);font-weight:var(--font-weight)}:host(.pds-chip--dropdown){padding:0}:host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:calc(var(--spacing-xxs) / 4);margin-block-end:calc(var(--spacing-xxs) / 4);-webkit-margin-before:var(--spacing-xxs);margin-block-start:var(--spacing-xxs)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;font-weight:var(--font-weight);padding-block:var(--spacing-xs);padding-inline:var(--spacing-lg)}.pds-chip__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-chip__button pds-icon{-webkit-margin-end:calc(var(--spacing-xxs) * -1);margin-inline-end:calc(var(--spacing-xxs) * -1);-webkit-margin-start:var(--spacing-xs);margin-inline-start:var(--spacing-xs)}:host(.pds-chip--tag){padding-block:var(--spacing-xxs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;height:var(--sizing-close);-webkit-margin-end:calc(var(--spacing-md) * -1);margin-inline-end:calc(var(--spacing-md) * -1);-webkit-margin-start:var(--spacing-xs);margin-inline-start:var(--spacing-xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.pds-chip--large){font-size:var(--font-size-lg);padding-block:var(--spacing-sm);padding-inline:var(--spacing-xxl)}:host(.pds-chip--large):host(.pds-chip--dropdown){padding-block:var(--spacing-xs);padding-inline:var(--spacing-xxs)}:host(.pds-chip--large):host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:0;margin-block-end:0}:host(.pds-chip--large) .pds-chip__button{font-size:var(--font-size-lg);padding-inline:var(--spacing-xl)}:host(.pds-chip--large) .pds-chip__close{height:var(--sizing-close-lg);-webkit-margin-end:calc(var(--spacing-xl) * -1);margin-inline-end:calc(var(--spacing-xl) * -1);width:var(--sizing-close-lg)}:host(.pds-chip--large):host(.pds-chip--tag){padding-block:var(--spacing-xs)}";var PdsChipStyle1=pdsChipCss;var PdsChip=function(){function o(o){var r=this;registerInstance(this,o);this.pdsTagCloseClick=createEvent(this,"pdsTagCloseClick",7);this.handleCloseClick=function(){r.pdsTagCloseClick.emit()};this.componentId=undefined;this.sentiment="neutral";this.dot=false;this.label=undefined;this.large=false;this.variant="text"}o.prototype.classNames=function(){var o=["pds-chip"];if(this.large){o.push("pds-chip--large")}if(this.variant){o.push("pds-chip--"+this.variant)}if(this.sentiment){o.push("pds-chip--"+this.sentiment)}return o.join("  ")};o.prototype.setChipContent=function(){var o=this.variant==="dropdown";var r=o?h("button",{class:"pds-chip__button",type:"button"},this.dot&&h("i",{class:"pds-chip__dot","aria-hidden":"true"}),this.label,h("pds-icon",{icon:downSmall,size:"12px","aria-hidden":"true"})):h("span",{class:"pds-chip__label"},this.dot&&h("i",{class:"pds-chip__dot","aria-hidden":"true"}),this.label);return r};o.prototype.render=function(){return h(Host,{key:"b49508fac6a1006cb9a52010644307e4528b1920",class:this.classNames(),id:this.componentId},this.setChipContent(),this.variant==="tag"&&h("button",{key:"7156f121be5ac59ce77aba3b2e7bf3aa8c4d9d37",class:"pds-chip__close",type:"button",onClick:this.handleCloseClick,"aria-label":"Remove"},h("pds-icon",{key:"47663af897eab3f9e0288b0f92cb57ea42cdb77a",icon:remove,size:"12px"})))};return o}();PdsChip.style=PdsChipStyle0+PdsChipStyle1;export{PdsChip as pds_chip};
+import{r as registerInstance,c as createEvent,h,H as Host}from"./index-b1696fed.js";import{d as downSmall,r as remove}from"./index-56752d25.js";var baseCss=":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(div,label,p,span){color:var(--pine-color-text-default)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";var PdsChipStyle0=baseCss;var pdsChipCss=":host{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);--border-radius:var(--pine-border-radius-200);--color-background-accent:var(--pine-color-purple-100);--color-background-accent-dot:var(--pine-color-purple-600);--color-background-accent-hover:var(--pine-color-purple-200);--color-background-danger:var(--pine-color-red-100);--color-background-danger-dot:var(--pine-color-red-600);--color-background-danger-hover:var(--pine-color-red-200);--color-background-info:var(--pine-color-blue-100);--color-background-info-dot:var(--pine-color-blue-600);--color-background-info-hover:var(--pine-color-blue-200);--color-background-neutral:var(--pine-color-grey-100);--color-background-neutral-dot:var(--pine-color-grey-600);--color-background-neutral-hover:var(--pine-color-grey-400);--color-background-success:var(--pine-color-green-100);--color-background-success-dot:var(--pine-color-green-600);--color-background-success-hover:var(--pine-color-green-200);--color-background-warning:var(--pine-color-yellow-100);--color-background-warning-dot:var(--pine-color-yellow-600);--color-background-warning-hover:var(--pine-color-yellow-200);--color-text-accent:var(--pine-color-purple-950);--color-text-danger:var(--pine-color-red-950);--color-text-info:var(--pine-color-blue-950);--color-text-neutral:var(--pine-color-grey-950);--color-text-success:var(--pine-color-green-950);--color-text-warning:var(--pine-color-yellow-950);--font-size-sm:var(--pine-font-size-body-md);--font-size-lg:var(--pine-font-size-heading-h6);--font-weight:var(--pine-font-weight-medium);--spacing-xxs:calc(var(--pine-spacing-050) / 2);--spacing-xs:var(--pine-spacing-050);--spacing-sm:calc(var(--pine-spacing-150) / 2);--spacing-md:var(--pine-spacing-100);--spacing-lg:calc(var(--pine-spacing-250) / 2);--spacing-xl:var(--pine-spacing-150);--spacing-xxl:calc(var(--pine-spacing-350) / 2);--sizing-close:10px;--sizing-close-lg:24px;--sizing-dot:4px;-ms-flex-align:center;align-items:center;border-radius:var(--border-radius);display:-ms-inline-flexbox;display:inline-flex;padding-block:var(--spacing-xs);padding-inline:var(--spacing-lg)}:host(.pds-chip--accent){background:var(--color-background-accent)}:host(.pds-chip--accent) .pds-chip__dot{background:var(--color-background-accent-dot)}:host(.pds-chip--accent) .pds-chip__label,:host(.pds-chip--accent) .pds-chip__button{color:var(--color-text-accent)}:host(.pds-chip--accent) .pds-chip__close:hover{background:var(--color-background-accent-hover)}:host(.pds-chip--accent.pds-chip--dropdown:hover){background:var(--color-background-accent-hover)}:host(.pds-chip--danger){background:var(--color-background-danger)}:host(.pds-chip--danger) .pds-chip__dot{background:var(--color-background-danger-dot)}:host(.pds-chip--danger) .pds-chip__label,:host(.pds-chip--danger) .pds-chip__button{color:var(--color-text-danger)}:host(.pds-chip--danger) .pds-chip__close:hover{background:var(--color-background-danger-hover)}:host(.pds-chip--danger.pds-chip--dropdown:hover){background:var(--color-background-danger-hover)}:host(.pds-chip--info){background:var(--color-background-info)}:host(.pds-chip--info) .pds-chip__dot{background:var(--color-background-info-dot)}:host(.pds-chip--info) .pds-chip__label,:host(.pds-chip--info) .pds-chip__button{color:var(--color-text-info)}:host(.pds-chip--info) .pds-chip__close:hover{background:var(--color-background-info-hover)}:host(.pds-chip--info.pds-chip--dropdown:hover){background:var(--color-background-info-hover)}:host(.pds-chip--neutral){background:var(--color-background-neutral)}:host(.pds-chip--neutral) .pds-chip__dot{background:var(--color-background-neutral-dot)}:host(.pds-chip--neutral) .pds-chip__label,:host(.pds-chip--neutral) .pds-chip__button{color:var(--color-text-neutral)}:host(.pds-chip--neutral) .pds-chip__close:hover{background:var(--color-background-neutral-hover)}:host(.pds-chip--neutral.pds-chip--dropdown:hover){background:var(--color-background-neutral-hover)}:host(.pds-chip--success){background:var(--color-background-success)}:host(.pds-chip--success) .pds-chip__dot{background:var(--color-background-success-dot)}:host(.pds-chip--success) .pds-chip__label,:host(.pds-chip--success) .pds-chip__button{color:var(--color-text-success)}:host(.pds-chip--success) .pds-chip__close:hover{background:var(--color-background-success-hover)}:host(.pds-chip--success.pds-chip--dropdown:hover){background:var(--color-background-success-hover)}:host(.pds-chip--warning){background:var(--color-background-warning)}:host(.pds-chip--warning) .pds-chip__dot{background:var(--color-background-warning-dot)}:host(.pds-chip--warning) .pds-chip__label,:host(.pds-chip--warning) .pds-chip__button{color:var(--color-text-warning)}:host(.pds-chip--warning) .pds-chip__close:hover{background:var(--color-background-warning-hover)}:host(.pds-chip--warning.pds-chip--dropdown:hover){background:var(--color-background-warning-hover)}.pds-chip__dot{border:1px solid transparent;border-radius:50%;display:inline-block;height:var(--sizing-dot);-webkit-margin-after:var(--spacing-xxs);margin-block-end:var(--spacing-xxs);-webkit-margin-end:var(--spacing-xs);margin-inline-end:var(--spacing-xs);width:var(--sizing-dot)}.pds-chip__label{font-size:var(--font-size-sm);font-weight:var(--font-weight)}:host(.pds-chip--dropdown){padding:0}:host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:calc(var(--spacing-xxs) / 4);margin-block-end:calc(var(--spacing-xxs) / 4);-webkit-margin-before:var(--spacing-xxs);margin-block-start:var(--spacing-xxs)}.pds-chip__button{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--border-radius);display:-ms-flexbox;display:flex;font-weight:var(--font-weight);padding-block:var(--spacing-xs);padding-inline:var(--spacing-lg)}.pds-chip__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-chip__button pds-icon{-webkit-margin-end:calc(var(--spacing-xxs) * -1);margin-inline-end:calc(var(--spacing-xxs) * -1);-webkit-margin-start:var(--spacing-xs);margin-inline-start:var(--spacing-xs)}:host(.pds-chip--tag){padding-block:var(--spacing-xxs)}.pds-chip__close{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:50%;height:var(--sizing-close);-webkit-margin-end:calc(var(--spacing-md) * -1);margin-inline-end:calc(var(--spacing-md) * -1);-webkit-margin-start:var(--spacing-xs);margin-inline-start:var(--spacing-xs);padding:var(--sizing-close);position:relative;width:var(--sizing-close)}.pds-chip__close pds-icon{left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}.pds-chip__close:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.pds-chip--large){font-size:var(--font-size-lg);padding-block:var(--spacing-sm);padding-inline:var(--spacing-xxl)}:host(.pds-chip--large):host(.pds-chip--dropdown){padding-block:var(--spacing-xs);padding-inline:var(--spacing-xxs)}:host(.pds-chip--large):host(.pds-chip--dropdown) .pds-chip__dot{-webkit-margin-after:0;margin-block-end:0}:host(.pds-chip--large) .pds-chip__button{font-size:var(--font-size-lg);padding-inline:var(--spacing-xl)}:host(.pds-chip--large) .pds-chip__close{height:var(--sizing-close-lg);-webkit-margin-end:calc(var(--spacing-xl) * -1);margin-inline-end:calc(var(--spacing-xl) * -1);width:var(--sizing-close-lg)}:host(.pds-chip--large):host(.pds-chip--tag){padding-block:var(--spacing-xs)}";var PdsChipStyle1=pdsChipCss;var PdsChip=function(){function o(o){var r=this;registerInstance(this,o);this.pdsTagCloseClick=createEvent(this,"pdsTagCloseClick",7);this.handleCloseClick=function(){r.pdsTagCloseClick.emit()};this.componentId=undefined;this.dot=false;this.label=undefined;this.large=false;this.sentiment="neutral";this.variant="text"}o.prototype.classNames=function(){var o=["pds-chip"];if(this.large){o.push("pds-chip--large")}if(this.variant){o.push("pds-chip--"+this.variant)}if(this.sentiment){o.push("pds-chip--"+this.sentiment)}return o.join(" ")};o.prototype.setChipContent=function(){var o=this.variant==="dropdown";var r=o?h("button",{class:"pds-chip__button",type:"button"},this.dot&&h("i",{class:"pds-chip__dot","aria-hidden":"true"}),this.label,h("pds-icon",{icon:downSmall,size:"12px","aria-hidden":"true"})):h("span",{class:"pds-chip__label"},this.dot&&h("i",{class:"pds-chip__dot","aria-hidden":"true"}),this.label);return r};o.prototype.render=function(){return h(Host,{key:"fac4e9beb31ba05d0c959fb53a9cd62caeacb219",class:this.classNames(),id:this.componentId},this.setChipContent(),this.variant==="tag"&&h("button",{key:"5f57c1cc76f6cffdebe6244f499b427e5f4c04e8",class:"pds-chip__close",type:"button",onClick:this.handleCloseClick,"aria-label":"Remove"},h("pds-icon",{key:"f4311271f68d700568dc51af9c1512fdfc7c262d",icon:remove,size:"12px"})))};return o}();PdsChip.style=PdsChipStyle0+PdsChipStyle1;export{PdsChip as pds_chip};
 //# sourceMappingURL=pds-chip.entry.js.map

package/dist/esm-es5/pds-chip.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["baseCss","PdsChipStyle0","pdsChipCss","PdsChipStyle1","PdsChip","this","handleCloseClick","_this","pdsTagCloseClick","emit","prototype","classNames","large","push","variant","sentiment","join","setChipContent","isDropdown","chipContent","h","class","type","dot","label","icon","downSmall","size","render","Host","key","id","componentId","onClick","remove"],"sources":["src/global/styles/base.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n  Josh's Custom CSS Reset\n  https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n  box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n  margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n  display: block;\n  max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n  font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n  overflow-wrap: break-word;\n}\n\n/*\n  Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n  list-style: none;\n}\n\n:where(table) {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n/*\n  Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n  font: var(--pine-typography-body-md-default);\n  letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n  font-family: var(--pine-font-family-heading);\n  color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n  font: var(--pine-typography-heading-h1);\n  letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n  font: var(--pine-typography-heading-h2);\n  letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n  font: var(--pine-typography-heading-h3);\n  letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n  font: var(--pine-typography-heading-h4);\n  letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n  font: var(--pine-typography-heading-h5);\n  letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n  font: var(--pine-typography-heading-h6);\n  letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(div, label, p, span) {\n  color: var(--pine-color-text-default);\n}\n\n:where(code, kbd, pre, samp) {\n  font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n  cursor: pointer;\n}\n\n:where(:focus) {\n  outline: 0;\n}\n\n:where(:focus-visible) {\n  outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n  display: none !important;\n}\n",":host {\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n  --border-radius: var(--pine-border-radius-200);\n\n  --color-background-accent: var(--pine-color-purple-100);\n  --color-background-accent-dot: var(--pine-color-purple-600);\n  --color-background-accent-hover: var(--pine-color-purple-200);\n  --color-background-danger: var(--pine-color-red-100);\n  --color-background-danger-dot: var(--pine-color-red-600);\n  --color-background-danger-hover: var(--pine-color-red-200);\n  --color-background-info: var(--pine-color-blue-100);\n  --color-background-info-dot: var(--pine-color-blue-600);\n  --color-background-info-hover: var(--pine-color-blue-200);\n  --color-background-neutral: var(--pine-color-grey-100);\n  --color-background-neutral-dot: var(--pine-color-grey-600);\n  --color-background-neutral-hover: var(--pine-color-grey-400);\n  --color-background-success: var(--pine-color-green-100);\n  --color-background-success-dot: var(--pine-color-green-600);\n  --color-background-success-hover: var(--pine-color-green-200);\n  --color-background-warning: var(--pine-color-yellow-100);\n  --color-background-warning-dot: var(--pine-color-yellow-600);\n  --color-background-warning-hover: var(--pine-color-yellow-200);\n  --color-text-accent: var(--pine-color-purple-950);\n  --color-text-danger: var(--pine-color-red-950);\n  --color-text-info: var(--pine-color-blue-950);\n  --color-text-neutral: var(--pine-color-grey-950);\n  --color-text-success: var(--pine-color-green-950);\n  --color-text-warning: var(--pine-color-yellow-950);\n\n  --font-size-sm: var(--pine-font-size-body-md);\n  --font-size-lg: var(--pine-font-size-heading-h6);\n  --font-weight: var(--pine-font-weight-medium);\n\n  --spacing-xxs: calc(var(--pine-spacing-050) / 2);\n  --spacing-xs: var(--pine-spacing-050);\n  --spacing-sm: calc(var(--pine-spacing-150) / 2);\n  --spacing-md: var(--pine-spacing-100);\n  --spacing-lg: calc(var(--pine-spacing-250) / 2);\n  --spacing-xl: var(--pine-spacing-150);\n  --spacing-xxl: calc(var(--pine-spacing-350) / 2);\n\n  --sizing-close: 10px;\n  --sizing-close-lg: 24px;\n  --sizing-dot: 4px;\n\n  align-items: center;\n  border-radius: var(--border-radius);\n  display: inline-flex;\n  padding-block: var(--spacing-xs);\n  padding-inline: var(--spacing-lg);\n}\n\n$pds-chip-sentiment: (\n  accent: var(--color-background-accent),\n  danger: var(--color-background-danger),\n  info: var(--color-background-info),\n  neutral: var(--color-background-neutral),\n  success: var(--color-background-success),\n  warning: var(--color-background-warning),\n);\n\n$pds-chip-sentiment-text: (\n  accent: var(--color-text-accent),\n  danger: var(--color-text-danger),\n  info: var(--color-text-info),\n  neutral: var(--color-text-neutral),\n  success: var(--color-text-success),\n  warning: var(--color-text-warning),\n);\n\n$pds-chip-sentiment-dots: (\n  accent: var(--color-background-accent-dot),\n  danger: var(--color-background-danger-dot),\n  info: var(--color-background-info-dot),\n  neutral: var(--color-background-neutral-dot),\n  success: var(--color-background-success-dot),\n  warning: var(--color-background-warning-dot),\n);\n\n$pds-chip-sentiment-hover: (\n  accent: var(--color-background-accent-hover),\n  danger: var(--color-background-danger-hover),\n  info: var(--color-background-info-hover),\n  neutral: var(--color-background-neutral-hover),\n  success: var(--color-background-success-hover),\n  warning: var(--color-background-warning-hover),\n);\n\n@each $sentiment, $value in $pds-chip-sentiment {\n  :host(.pds-chip--#{$sentiment}) {\n    background: $value;\n\n    // dot colors\n    .pds-chip__dot {\n      /* stylelint-disable-next-line */\n      background: map-get($pds-chip-sentiment-dots, $sentiment);\n    }\n\n    .pds-chip__label, .pds-chip__button {\n      /* stylelint-disable-next-line */\n      color: map-get($pds-chip-sentiment-text, $sentiment);\n    }\n\n    // tag close hover colors\n    .pds-chip__close:hover {\n      /* stylelint-disable-next-line */\n      background: map-get($pds-chip-sentiment-hover, $sentiment);\n    }\n  }\n  // dropdown hover colors\n  :host(.pds-chip--#{$sentiment}.pds-chip--dropdown:hover) {\n    /* stylelint-disable-next-line */\n    background: map-get($pds-chip-sentiment-hover, $sentiment);\n  }\n}\n\n.pds-chip__dot {\n  border: 1px solid transparent;\n  border-radius: 50%;\n  display: inline-block;\n  height: var(--sizing-dot);\n  margin-block-end: var(--spacing-xxs);\n  margin-inline-end: var(--spacing-xs);\n  width: var(--sizing-dot);\n}\n\n.pds-chip__label {\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight);\n}\n\n// dropdown\n\n:host(.pds-chip--dropdown) {\n  padding: 0;\n\n  .pds-chip__dot {\n    margin-block-end: calc(var(--spacing-xxs) / 4);\n    margin-block-start: var(--spacing-xxs);\n  }\n}\n\n.pds-chip__button {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: var(--border-radius);\n  display: flex;\n  font-weight: var(--font-weight);\n  padding-block: var(--spacing-xs);\n  padding-inline: var(--spacing-lg);\n\n  &:focus-visible {\n    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n\n  pds-icon {\n    margin-inline-end: calc(var(--spacing-xxs) * -1);\n    margin-inline-start: var(--spacing-xs);\n  }\n}\n\n// tag\n\n:host(.pds-chip--tag) {\n  padding-block: var(--spacing-xxs);\n}\n\n.pds-chip__close {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: 50%;\n  height: var(--sizing-close);\n  margin-inline-end: calc(var(--spacing-md) * -1);\n  margin-inline-start: var(--spacing-xs);\n  padding: var(--sizing-close);\n  position: relative;\n  width: var(--sizing-close);\n\n  pds-icon {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  &:focus-visible {\n    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n}\n\n// large\n\n:host(.pds-chip--large) {\n  font-size: var(--font-size-lg);\n  padding-block: var(--spacing-sm);\n  padding-inline: var(--spacing-xxl);\n\n  &:host(.pds-chip--dropdown) {\n    padding-block: var(--spacing-xs);\n    padding-inline: var(--spacing-xxs);\n\n    .pds-chip__dot {\n      margin-block-end: 0;\n    }\n  }\n\n  .pds-chip__button {\n    font-size: var(--font-size-lg);\n    padding-inline: var(--spacing-xl)\n  }\n\n  .pds-chip__close {\n    height: var(--sizing-close-lg);\n    margin-inline-end: calc(var(--spacing-xl) * -1);\n    width: var(--sizing-close-lg);\n  }\n\n  &:host(.pds-chip--tag) {\n    padding-block: var(--spacing-xs);\n  }\n}\n","import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'pds-chip',\n  styleUrls: ['../../global/styles/base.scss', 'pds-chip.scss'],\n  shadow: true,\n})\nexport class PdsChip {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Sets the color scheme of the chip.\n   * @defaultValue 'neutral'\n   */\n  @Prop() sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning' = 'neutral';\n\n  /**\n   * Determines whether a dot should be displayed on the chip.\n   * @defaultValue false\n   */\n  @Prop() dot = false;\n\n  /**\n   *  Sets the text label content of the chip.\n   */\n  @Prop() label: string;\n\n  /**\n   * Determines whether the chip should be rendered in a larger size.\n   * @defaultValue false\n   */\n  @Prop() large = false;\n\n  /**\n   * Sets the style variant of the chip.\n   * @defaultValue 'text'\n   */\n  @Prop() variant: 'text' | 'tag' | 'dropdown' = 'text';\n\n  /**\n   * Event when close button is clicked on tag variant.\n   */\n  @Event() pdsTagCloseClick: EventEmitter;\n\n  private handleCloseClick = () => {\n    this.pdsTagCloseClick.emit();\n  }\n\n  private classNames() {\n    const classNames = ['pds-chip'];\n\n    if (this.large) {\n      classNames.push('pds-chip--large');\n    }\n    if (this.variant) {\n      classNames.push('pds-chip--' + this.variant);\n    }\n    if (this.sentiment) {\n      classNames.push('pds-chip--' + this.sentiment);\n    }\n\n    return classNames.join('  ');\n  }\n\n  private setChipContent() {\n    const isDropdown = this.variant === 'dropdown';\n    const chipContent = isDropdown ? (\n      <button class=\"pds-chip__button\" type=\"button\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\n        <pds-icon icon={downSmall} size=\"12px\" aria-hidden=\"true\"></pds-icon>\n      </button>\n    ) : (\n      <span class=\"pds-chip__label\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\n      </span>\n    );\n\n    return chipContent;\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        {this.setChipContent()}\n        {this.variant === 'tag' && (\n          <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n            <pds-icon icon={remove} size=\"12px\"></pds-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gJAAA,IAAMA,QAAU,yrDAChB,IAAAC,cAAeD,QCDf,IAAME,WAAa,s7OACnB,IAAAC,cAAeD,W,ICOFE,QAAO,W,+GAwCVC,KAAAC,iBAAmB,WACzBC,EAAKC,iBAAiBC,M,4CA/B8D,U,SAMxE,M,gCAWE,M,aAM+B,M,CAWvCL,EAAAM,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,YAEpB,GAAIN,KAAKO,MAAO,CACdD,EAAWE,KAAK,kB,CAElB,GAAIR,KAAKS,QAAS,CAChBH,EAAWE,KAAK,aAAeR,KAAKS,Q,CAEtC,GAAIT,KAAKU,UAAW,CAClBJ,EAAWE,KAAK,aAAeR,KAAKU,U,CAGtC,OAAOJ,EAAWK,KAAK,K,EAGjBZ,EAAAM,UAAAO,eAAA,WACN,IAAMC,EAAab,KAAKS,UAAY,WACpC,IAAMK,EAAcD,EAClBE,EAAA,UAAQC,MAAM,mBAAmBC,KAAK,UACnCjB,KAAKkB,KAAOH,EAAA,KAAGC,MAAM,gBAAe,cAAa,SACjDhB,KAAKmB,MACNJ,EAAA,YAAUK,KAAMC,UAAWC,KAAK,OAAM,cAAa,UAGrDP,EAAA,QAAMC,MAAM,mBACThB,KAAKkB,KAAOH,EAAA,KAAGC,MAAM,gBAAe,cAAa,SACjDhB,KAAKmB,OAIV,OAAOL,C,EAGTf,EAAAM,UAAAkB,OAAA,WACE,OACER,EAACS,KAAI,CAAAC,IAAA,2CAACT,MAAOhB,KAAKM,aAAcoB,GAAI1B,KAAK2B,aACtC3B,KAAKY,iBACLZ,KAAKS,UAAY,OAChBM,EAAA,UAAAU,IAAA,2CAAQT,MAAM,kBAAkBC,KAAK,SAASW,QAAS5B,KAAKC,iBAAgB,aAAa,UACvFc,EAAA,YAAAU,IAAA,2CAAUL,KAAMS,OAAQP,KAAK,U,WApFrB,G","ignoreList":[]}
+{"version":3,"names":["baseCss","PdsChipStyle0","pdsChipCss","PdsChipStyle1","PdsChip","this","handleCloseClick","_this","pdsTagCloseClick","emit","prototype","classNames","large","push","variant","sentiment","join","setChipContent","isDropdown","chipContent","h","class","type","dot","label","icon","downSmall","size","render","Host","key","id","componentId","onClick","remove"],"sources":["src/global/styles/base.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.scss?tag=pds-chip&encapsulation=shadow","src/components/pds-chip/pds-chip.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n  Josh's Custom CSS Reset\n  https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n  box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n  margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n  display: block;\n  max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n  font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n  overflow-wrap: break-word;\n}\n\n/*\n  Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n  list-style: none;\n}\n\n:where(table) {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n/*\n  Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n  font: var(--pine-typography-body-md-default);\n  letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n  font-family: var(--pine-font-family-heading);\n  color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n  font: var(--pine-typography-heading-h1);\n  letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n  font: var(--pine-typography-heading-h2);\n  letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n  font: var(--pine-typography-heading-h3);\n  letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n  font: var(--pine-typography-heading-h4);\n  letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n  font: var(--pine-typography-heading-h5);\n  letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n  font: var(--pine-typography-heading-h6);\n  letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(div, label, p, span) {\n  color: var(--pine-color-text-default);\n}\n\n:where(code, kbd, pre, samp) {\n  font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n  cursor: pointer;\n}\n\n:where(:focus) {\n  outline: 0;\n}\n\n:where(:focus-visible) {\n  outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n  display: none !important;\n}\n",":host {\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n  --border-radius: var(--pine-border-radius-200);\n\n  --color-background-accent: var(--pine-color-purple-100);\n  --color-background-accent-dot: var(--pine-color-purple-600);\n  --color-background-accent-hover: var(--pine-color-purple-200);\n  --color-background-danger: var(--pine-color-red-100);\n  --color-background-danger-dot: var(--pine-color-red-600);\n  --color-background-danger-hover: var(--pine-color-red-200);\n  --color-background-info: var(--pine-color-blue-100);\n  --color-background-info-dot: var(--pine-color-blue-600);\n  --color-background-info-hover: var(--pine-color-blue-200);\n  --color-background-neutral: var(--pine-color-grey-100);\n  --color-background-neutral-dot: var(--pine-color-grey-600);\n  --color-background-neutral-hover: var(--pine-color-grey-400);\n  --color-background-success: var(--pine-color-green-100);\n  --color-background-success-dot: var(--pine-color-green-600);\n  --color-background-success-hover: var(--pine-color-green-200);\n  --color-background-warning: var(--pine-color-yellow-100);\n  --color-background-warning-dot: var(--pine-color-yellow-600);\n  --color-background-warning-hover: var(--pine-color-yellow-200);\n  --color-text-accent: var(--pine-color-purple-950);\n  --color-text-danger: var(--pine-color-red-950);\n  --color-text-info: var(--pine-color-blue-950);\n  --color-text-neutral: var(--pine-color-grey-950);\n  --color-text-success: var(--pine-color-green-950);\n  --color-text-warning: var(--pine-color-yellow-950);\n\n  --font-size-sm: var(--pine-font-size-body-md);\n  --font-size-lg: var(--pine-font-size-heading-h6);\n  --font-weight: var(--pine-font-weight-medium);\n\n  --spacing-xxs: calc(var(--pine-spacing-050) / 2);\n  --spacing-xs: var(--pine-spacing-050);\n  --spacing-sm: calc(var(--pine-spacing-150) / 2);\n  --spacing-md: var(--pine-spacing-100);\n  --spacing-lg: calc(var(--pine-spacing-250) / 2);\n  --spacing-xl: var(--pine-spacing-150);\n  --spacing-xxl: calc(var(--pine-spacing-350) / 2);\n\n  --sizing-close: 10px;\n  --sizing-close-lg: 24px;\n  --sizing-dot: 4px;\n\n  align-items: center;\n  border-radius: var(--border-radius);\n  display: inline-flex;\n  padding-block: var(--spacing-xs);\n  padding-inline: var(--spacing-lg);\n}\n\n$pds-chip-sentiment: (\n  accent: var(--color-background-accent),\n  danger: var(--color-background-danger),\n  info: var(--color-background-info),\n  neutral: var(--color-background-neutral),\n  success: var(--color-background-success),\n  warning: var(--color-background-warning),\n);\n\n$pds-chip-sentiment-text: (\n  accent: var(--color-text-accent),\n  danger: var(--color-text-danger),\n  info: var(--color-text-info),\n  neutral: var(--color-text-neutral),\n  success: var(--color-text-success),\n  warning: var(--color-text-warning),\n);\n\n$pds-chip-sentiment-dots: (\n  accent: var(--color-background-accent-dot),\n  danger: var(--color-background-danger-dot),\n  info: var(--color-background-info-dot),\n  neutral: var(--color-background-neutral-dot),\n  success: var(--color-background-success-dot),\n  warning: var(--color-background-warning-dot),\n);\n\n$pds-chip-sentiment-hover: (\n  accent: var(--color-background-accent-hover),\n  danger: var(--color-background-danger-hover),\n  info: var(--color-background-info-hover),\n  neutral: var(--color-background-neutral-hover),\n  success: var(--color-background-success-hover),\n  warning: var(--color-background-warning-hover),\n);\n\n@each $sentiment, $value in $pds-chip-sentiment {\n  :host(.pds-chip--#{$sentiment}) {\n    background: $value;\n\n    // dot colors\n    .pds-chip__dot {\n      /* stylelint-disable-next-line */\n      background: map-get($pds-chip-sentiment-dots, $sentiment);\n    }\n\n    .pds-chip__label, .pds-chip__button {\n      /* stylelint-disable-next-line */\n      color: map-get($pds-chip-sentiment-text, $sentiment);\n    }\n\n    // tag close hover colors\n    .pds-chip__close:hover {\n      /* stylelint-disable-next-line */\n      background: map-get($pds-chip-sentiment-hover, $sentiment);\n    }\n  }\n  // dropdown hover colors\n  :host(.pds-chip--#{$sentiment}.pds-chip--dropdown:hover) {\n    /* stylelint-disable-next-line */\n    background: map-get($pds-chip-sentiment-hover, $sentiment);\n  }\n}\n\n.pds-chip__dot {\n  border: 1px solid transparent;\n  border-radius: 50%;\n  display: inline-block;\n  height: var(--sizing-dot);\n  margin-block-end: var(--spacing-xxs);\n  margin-inline-end: var(--spacing-xs);\n  width: var(--sizing-dot);\n}\n\n.pds-chip__label {\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight);\n}\n\n// dropdown\n\n:host(.pds-chip--dropdown) {\n  padding: 0;\n\n  .pds-chip__dot {\n    margin-block-end: calc(var(--spacing-xxs) / 4);\n    margin-block-start: var(--spacing-xxs);\n  }\n}\n\n.pds-chip__button {\n  align-items: center;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: var(--border-radius);\n  display: flex;\n  font-weight: var(--font-weight);\n  padding-block: var(--spacing-xs);\n  padding-inline: var(--spacing-lg);\n\n  &:focus-visible {\n    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n\n  pds-icon {\n    margin-inline-end: calc(var(--spacing-xxs) * -1);\n    margin-inline-start: var(--spacing-xs);\n  }\n}\n\n// tag\n\n:host(.pds-chip--tag) {\n  padding-block: var(--spacing-xxs);\n}\n\n.pds-chip__close {\n  appearance: none;\n  background: transparent;\n  border: 0;\n  border-radius: 50%;\n  height: var(--sizing-close);\n  margin-inline-end: calc(var(--spacing-md) * -1);\n  margin-inline-start: var(--spacing-xs);\n  padding: var(--sizing-close);\n  position: relative;\n  width: var(--sizing-close);\n\n  pds-icon {\n    left: 50%;\n    position: absolute;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  &:focus-visible {\n    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n}\n\n// large\n\n:host(.pds-chip--large) {\n  font-size: var(--font-size-lg);\n  padding-block: var(--spacing-sm);\n  padding-inline: var(--spacing-xxl);\n\n  &:host(.pds-chip--dropdown) {\n    padding-block: var(--spacing-xs);\n    padding-inline: var(--spacing-xxs);\n\n    .pds-chip__dot {\n      margin-block-end: 0;\n    }\n  }\n\n  .pds-chip__button {\n    font-size: var(--font-size-lg);\n    padding-inline: var(--spacing-xl)\n  }\n\n  .pds-chip__close {\n    height: var(--sizing-close-lg);\n    margin-inline-end: calc(var(--spacing-xl) * -1);\n    width: var(--sizing-close-lg);\n  }\n\n  &:host(.pds-chip--tag) {\n    padding-block: var(--spacing-xs);\n  }\n}\n","import { downSmall, remove } from '@pine-ds/icons/icons';\nimport { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'pds-chip',\n  styleUrls: ['../../global/styles/base.scss', 'pds-chip.scss'],\n  shadow: true,\n})\nexport class PdsChip {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether a dot should be displayed on the chip.\n   * @defaultValue false\n   */\n  @Prop() dot = false;\n\n  /**\n   * Sets the text label content of the chip.\n   */\n  @Prop() label: string;\n\n  /**\n   * Determines whether the chip should be displayed in a larger size.\n   * @defaultValue false\n   */\n  @Prop() large = false;\n\n  /**\n   * Defines the color scheme of the chip.\n   * @defaultValue 'neutral'\n   */\n  @Prop() sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning' = 'neutral';\n\n  /**\n   * Sets the style variant of the chip.\n   * @defaultValue 'text'\n   */\n  @Prop() variant: 'text' | 'tag' | 'dropdown' = 'text';\n\n  /**\n   * Event emitted when the close button is clicked on a tag variant chip.\n   */\n  @Event() pdsTagCloseClick: EventEmitter;\n\n  private handleCloseClick = () => {\n    this.pdsTagCloseClick.emit();\n  };\n\n  private classNames() {\n    const classNames = ['pds-chip'];\n\n    if (this.large) {\n      classNames.push('pds-chip--large');\n    }\n    if (this.variant) {\n      classNames.push('pds-chip--' + this.variant);\n    }\n    if (this.sentiment) {\n      classNames.push('pds-chip--' + this.sentiment);\n    }\n\n    return classNames.join(' ');\n  }\n\n  private setChipContent() {\n    const isDropdown = this.variant === 'dropdown';\n    const chipContent = isDropdown ? (\n      <button class=\"pds-chip__button\" type=\"button\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\n        <pds-icon icon={downSmall} size=\"12px\" aria-hidden=\"true\"></pds-icon>\n      </button>\n    ) : (\n      <span class=\"pds-chip__label\">\n        {this.dot && <i class=\"pds-chip__dot\" aria-hidden=\"true\"></i>}\n        {this.label}\n      </span>\n    );\n\n    return chipContent;\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        {this.setChipContent()}\n        {this.variant === 'tag' && (\n          <button class=\"pds-chip__close\" type=\"button\" onClick={this.handleCloseClick} aria-label=\"Remove\">\n            <pds-icon icon={remove} size=\"12px\"></pds-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"gJAAA,IAAMA,QAAU,yrDAChB,IAAAC,cAAeD,QCDf,IAAME,WAAa,s7OACnB,IAAAC,cAAeD,W,ICOFE,QAAO,W,+GAwCVC,KAAAC,iBAAmB,WACzBC,EAAKC,iBAAiBC,M,sCA/BV,M,gCAWE,M,eAMsE,U,aAMvC,M,CAWvCL,EAAAM,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,YAEpB,GAAIN,KAAKO,MAAO,CACdD,EAAWE,KAAK,kB,CAElB,GAAIR,KAAKS,QAAS,CAChBH,EAAWE,KAAK,aAAeR,KAAKS,Q,CAEtC,GAAIT,KAAKU,UAAW,CAClBJ,EAAWE,KAAK,aAAeR,KAAKU,U,CAGtC,OAAOJ,EAAWK,KAAK,I,EAGjBZ,EAAAM,UAAAO,eAAA,WACN,IAAMC,EAAab,KAAKS,UAAY,WACpC,IAAMK,EAAcD,EAClBE,EAAA,UAAQC,MAAM,mBAAmBC,KAAK,UACnCjB,KAAKkB,KAAOH,EAAA,KAAGC,MAAM,gBAAe,cAAa,SACjDhB,KAAKmB,MACNJ,EAAA,YAAUK,KAAMC,UAAWC,KAAK,OAAM,cAAa,UAGrDP,EAAA,QAAMC,MAAM,mBACThB,KAAKkB,KAAOH,EAAA,KAAGC,MAAM,gBAAe,cAAa,SACjDhB,KAAKmB,OAIV,OAAOL,C,EAGTf,EAAAM,UAAAkB,OAAA,WACE,OACER,EAACS,KAAI,CAAAC,IAAA,2CAACT,MAAOhB,KAAKM,aAAcoB,GAAI1B,KAAK2B,aACtC3B,KAAKY,iBACLZ,KAAKS,UAAY,OAChBM,EAAA,UAAAU,IAAA,2CAAQT,MAAM,kBAAkBC,KAAK,SAASW,QAAS5B,KAAKC,iBAAgB,aAAa,UACvFc,EAAA,YAAAU,IAAA,2CAAUL,KAAMS,OAAQP,KAAK,U,WApFrB,G","ignoreList":[]}

package/dist/esm-es5/pds-copytext.entry.js

@@ -1,2 +1,2 @@
-import{__awaiter,__generator}from"tslib";import{r as registerInstance,c as createEvent,h,H as Host}from"./index-8b335bbb.js";import{a as copy}from"./index-5e7a8a36.js";var baseCss=":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(div,label,p,span){color:var(--pine-color-text-default)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";var PdsCopytextStyle0=baseCss;var pdsCopytextCss=":host(.pds-copytext){--border-interactive-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--border-interactive-hover:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--border-radius-default:var(--pine-border-radius-circle);--border-width-default:var(--pine-border-width-none);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);--color-background-default:var(--pine-color-white);--color-border-interactive-hover:var(--pine-color-grey-400);--color-text-hover:var(--pine-color-grey-900);--copytext-color-background-hover:var(--pine-color-grey-200);--font-size-default:var(--pine-font-size-100);--font-weight-default:var(--pine-font-weight-body-medium);--spacing-bordered-margin-inline-end:var(--pine-spacing-200);--spacing-bordered-padding-block:var(--pine-spacing-100);--spacing-bordered-padding-inline:var(--pine-spacing-200);--spacing-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-050);--spacing-padding-inline:var(--pine-spacing-100);--spacing-padding-none:var(--pine-spacing-0);--typography-default:var(--pine-font-weight-body-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-heading)}:host(.pds-copytext) pds-button{-ms-flex-align:center;align-items:center;background:var(--color-background-default);border:var(--border-width-default);border-radius:var(--border-radius-default);display:-ms-inline-flexbox;display:inline-flex;font:var(--typography-default);max-width:100%;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}:host(.pds-copytext) pds-button::part(button){-webkit-padding-end:calc(var(--spacing-padding-inline) / 2);padding-inline-end:calc(var(--spacing-padding-inline) / 2)}:host(.pds-copytext) pds-button::part(button):hover{background-color:var(--copytext-color-background-hover);color:var(--color-text-hover)}:host(.pds-copytext) pds-button span{font-weight:var(--font-weight-default);-webkit-margin-end:var(--spacing-margin-inline-end);margin-inline-end:var(--spacing-margin-inline-end);white-space:nowrap}:host(.pds-copytext) pds-button :nth-child(2){-ms-flex-negative:0;flex-shrink:0}:host(.pds-copytext):host(.pds-copytext--bordered){border:var(--border-width-default);padding:var(--spacing-padding-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button{padding:var(--spacing-padding-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button:hover{background:none}:host(.pds-copytext):host(.pds-copytext--bordered) span{border:var(--border-interactive-default);border-radius:var(--border-radius-default);-webkit-margin-end:var(--spacing-bordered-margin-inline-end);margin-inline-end:var(--spacing-bordered-margin-inline-end);padding-block:var(--spacing-bordered-padding-block);padding-inline:var(--spacing-bordered-padding-inline)}:host(.pds-copytext):host(.pds-copytext--bordered) :hover span{border:var(--border-interactive-hover)}:host(.pds-copytext):host(.pds-copytext--full-width){display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span{text-align:left;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button{display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{overflow:hidden;text-align:left;text-overflow:ellipsis;width:100%}";var PdsCopytextStyle1=pdsCopytextCss;var PdsCopytext=function(){function e(e){var t=this;registerInstance(this,e);this.pdsCopyTextClick=createEvent(this,"pdsCopyTextClick",7);this.copyToClipboard=function(e){return __awaiter(t,void 0,void 0,(function(){var t;return __generator(this,(function(r){switch(r.label){case 0:r.trys.push([0,3,,4]);if(!(typeof navigator.clipboard!=="undefined"))return[3,2];return[4,navigator.clipboard.writeText(e)];case 1:r.sent();this.pdsCopyTextClick.emit("Copied to clipboard");r.label=2;case 2:return[3,4];case 3:t=r.sent();this.pdsCopyTextClick.emit("Error writing text to clipboard: ".concat(t));return[3,4];case 4:return[2]}}))}))};this.handleClick=function(){t.copyToClipboard(t.value)};this.border=true;this.componentId=undefined;this.fullWidth=false;this.truncate=false;this.value=undefined}e.prototype.classNames=function(){var e=["pds-copytext"];if(this.border){e.push("pds-copytext--bordered")}if(this.fullWidth){e.push("pds-copytext--full-width")}if(this.truncate){e.push("pds-copytext--truncated")}return e.join("  ")};e.prototype.render=function(){return h(Host,{key:"24f8ccba6099b5a4f283fe049dc38e32c916c80e",class:this.classNames(),id:this.componentId},h("pds-button",{key:"7b4d6703944df7a4a3932663b5c09b496d642f0c",type:"button",variant:"unstyled",onClick:this.handleClick},h("span",{key:"68ab90f525b04edc3d708d7405d34558aee8c98e"},this.value),h("pds-icon",{key:"06a24c4577dc10917e69314a6d19db8e6a88e7f7",icon:copy,size:"16px"})))};return e}();PdsCopytext.style=PdsCopytextStyle0+PdsCopytextStyle1;export{PdsCopytext as pds_copytext};
+import{__awaiter,__generator}from"tslib";import{r as registerInstance,c as createEvent,h,H as Host}from"./index-b1696fed.js";import{a as copy}from"./index-56752d25.js";var baseCss=":where(*:not(slot),*:not(slot)::before,*:not(slot)::after){-webkit-box-sizing:border-box;box-sizing:border-box}:where(*:not(slot)){margin:0}:where(img,picture,video,canvas,svg){display:block;max-width:100%}:where(input,button,textarea,select){font:inherit}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(a:not([href]):not([class])){color:currentColor;text-decoration:none}:where(a:not([href]):not([class]):hover){color:currentColor;text-decoration:none}:where(ul[role=list],ol[role=list]){list-style:none}:where(table){border-collapse:collapse;border-spacing:0}:where(*:not(slot)){font:var(--pine-typography-body-md-default);letter-spacing:var(--pine-letter-spacing-body-md)}:where(h1,h2,h3,h4,h5,h6){font-family:var(--pine-font-family-heading);color:var(--pine-color-grey-950)}:where(h1){font:var(--pine-typography-heading-h1);letter-spacing:var(--pine-letter-spacing-heading-h1)}:where(h2){font:var(--pine-typography-heading-h2);letter-spacing:var(--pine-letter-spacing-heading-h2)}:where(h3){font:var(--pine-typography-heading-h3);letter-spacing:var(--pine-letter-spacing-heading-h3)}:where(h4){font:var(--pine-typography-heading-h4);letter-spacing:var(--pine-letter-spacing-heading-h4)}:where(h5){font:var(--pine-typography-heading-h5);letter-spacing:var(--pine-letter-spacing-heading-h5)}:where(h6){font:var(--pine-typography-heading-h6);letter-spacing:var(--pine-letter-spacing-heading-h6)}:where(div,label,p,span){color:var(--pine-color-text-default)}:where(code,kbd,pre,samp){font-family:monospace}:where([role=button]){cursor:pointer}:where(:focus){outline:0}:where(:focus-visible){outline:var(--pine-border-width-thick) solid var(--pine-color-purple-500)}:where([hidden]){display:none !important}";var PdsCopytextStyle0=baseCss;var pdsCopytextCss=":host(.pds-copytext){--border-interactive-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--border-interactive-hover:var(--pine-border-width-thin) solid var(--pine-color-grey-400);--border-radius-default:var(--pine-border-radius-circle);--border-width-default:var(--pine-border-width-none);--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);--color-background-default:var(--pine-color-white);--color-border-interactive-hover:var(--pine-color-grey-400);--color-text-hover:var(--pine-color-grey-900);--copytext-color-background-hover:var(--pine-color-grey-200);--font-size-default:var(--pine-font-size-100);--font-weight-default:var(--pine-font-weight-body-medium);--spacing-bordered-margin-inline-end:var(--pine-spacing-200);--spacing-bordered-padding-block:var(--pine-spacing-100);--spacing-bordered-padding-inline:var(--pine-spacing-200);--spacing-margin-inline-end:var(--pine-spacing-100);--spacing-padding-block:var(--pine-spacing-050);--spacing-padding-inline:var(--pine-spacing-100);--spacing-padding-none:var(--pine-spacing-0);--typography-default:var(--pine-font-weight-body-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-heading)}:host(.pds-copytext) pds-button{-ms-flex-align:center;align-items:center;background:var(--color-background-default);border:var(--border-width-default);border-radius:var(--border-radius-default);display:-ms-inline-flexbox;display:inline-flex;font:var(--typography-default);max-width:100%;padding:var(--spacing-padding-block) var(--spacing-padding-inline)}:host(.pds-copytext) pds-button::part(button){-webkit-padding-end:calc(var(--spacing-padding-inline) / 2);padding-inline-end:calc(var(--spacing-padding-inline) / 2)}:host(.pds-copytext) pds-button::part(button):hover{background-color:var(--copytext-color-background-hover);color:var(--color-text-hover)}:host(.pds-copytext) pds-button span{font-weight:var(--font-weight-default);-webkit-margin-end:var(--spacing-margin-inline-end);margin-inline-end:var(--spacing-margin-inline-end);white-space:nowrap}:host(.pds-copytext) pds-button :nth-child(2){-ms-flex-negative:0;flex-shrink:0}:host(.pds-copytext):host(.pds-copytext--bordered){border:var(--border-width-default);padding:var(--spacing-padding-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button{padding:var(--spacing-padding-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button:hover{background:none}:host(.pds-copytext):host(.pds-copytext--bordered) span{border:var(--border-interactive-default);border-radius:var(--border-radius-default);-webkit-margin-end:var(--spacing-bordered-margin-inline-end);margin-inline-end:var(--spacing-bordered-margin-inline-end);padding-block:var(--spacing-bordered-padding-block);padding-inline:var(--spacing-bordered-padding-inline)}:host(.pds-copytext):host(.pds-copytext--bordered) :hover span{border:var(--border-interactive-hover)}:host(.pds-copytext):host(.pds-copytext--full-width){display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span{text-align:left;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button{display:-ms-flexbox;display:flex;width:100%}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{overflow:hidden;text-align:left;text-overflow:ellipsis;width:100%}";var PdsCopytextStyle1=pdsCopytextCss;var PdsCopytext=function(){function e(e){var t=this;registerInstance(this,e);this.pdsCopyTextClick=createEvent(this,"pdsCopyTextClick",7);this.copyToClipboard=function(e){return __awaiter(t,void 0,void 0,(function(){var t;return __generator(this,(function(r){switch(r.label){case 0:r.trys.push([0,3,,4]);if(!(typeof navigator.clipboard!=="undefined"))return[3,2];return[4,navigator.clipboard.writeText(e)];case 1:r.sent();this.pdsCopyTextClick.emit("Copied to clipboard");r.label=2;case 2:return[3,4];case 3:t=r.sent();this.pdsCopyTextClick.emit("Error writing text to clipboard: ".concat(t));return[3,4];case 4:return[2]}}))}))};this.handleClick=function(){t.copyToClipboard(t.value)};this.border=true;this.componentId=undefined;this.fullWidth=false;this.truncate=false;this.value=undefined}e.prototype.classNames=function(){var e=["pds-copytext"];if(this.border){e.push("pds-copytext--bordered")}if(this.fullWidth){e.push("pds-copytext--full-width")}if(this.truncate){e.push("pds-copytext--truncated")}return e.join("  ")};e.prototype.render=function(){return h(Host,{key:"43aceb92fe0cc910613115bc882b04108efeffba",class:this.classNames(),id:this.componentId},h("pds-button",{key:"f152bc288e64192a80ed8f4f48d90e3edb7558cc",type:"button",variant:"unstyled",onClick:this.handleClick},h("span",{key:"ed9486b47835e21601047d2a915a412e664c6b4b"},this.value),h("pds-icon",{key:"bfbf6d92775171c36f768d654c5866f2f4ce8479",icon:copy,size:"16px"})))};return e}();PdsCopytext.style=PdsCopytextStyle0+PdsCopytextStyle1;export{PdsCopytext as pds_copytext};
 //# sourceMappingURL=pds-copytext.entry.js.map

package/dist/esm-es5/pds-copytext.entry.js.map

@@ -1 +1 @@
-{"version":3,"names":["baseCss","PdsCopytextStyle0","pdsCopytextCss","PdsCopytextStyle1","PdsCopytext","this","copyToClipboard","value","__awaiter","_this","navigator","clipboard","writeText","_a","sent","pdsCopyTextClick","emit","concat","err_1","handleClick","class_1","prototype","classNames","border","push","fullWidth","truncate","join","render","h","Host","key","class","id","componentId","type","variant","onClick","icon","copyIcon","size"],"sources":["src/global/styles/base.scss?tag=pds-copytext&encapsulation=shadow","src/components/pds-copytext/pds-copytext.scss?tag=pds-copytext&encapsulation=shadow","src/components/pds-copytext/pds-copytext.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n  Josh's Custom CSS Reset\n  https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n  box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n  margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n  display: block;\n  max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n  font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n  overflow-wrap: break-word;\n}\n\n/*\n  Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n  list-style: none;\n}\n\n:where(table) {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n/*\n  Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n  font: var(--pine-typography-body-md-default);\n  letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n  font-family: var(--pine-font-family-heading);\n  color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n  font: var(--pine-typography-heading-h1);\n  letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n  font: var(--pine-typography-heading-h2);\n  letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n  font: var(--pine-typography-heading-h3);\n  letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n  font: var(--pine-typography-heading-h4);\n  letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n  font: var(--pine-typography-heading-h5);\n  letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n  font: var(--pine-typography-heading-h6);\n  letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(div, label, p, span) {\n  color: var(--pine-color-text-default);\n}\n\n:where(code, kbd, pre, samp) {\n  font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n  cursor: pointer;\n}\n\n:where(:focus) {\n  outline: 0;\n}\n\n:where(:focus-visible) {\n  outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n  display: none !important;\n}\n",":host(.pds-copytext) {\n\n  --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n  --border-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n\n  --border-radius-default: var(--pine-border-radius-circle);\n\n  --border-width-default: var(--pine-border-width-none);\n\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n\n  --color-background-default: var(--pine-color-white);\n  --color-border-interactive-hover: var(--pine-color-grey-400);\n  --color-text-hover: var(--pine-color-grey-900);\n  // Update custom prop usage in Button before changing\n  --copytext-color-background-hover: var(--pine-color-grey-200);\n\n  --font-size-default: var(--pine-font-size-100);\n  --font-weight-default: var(--pine-font-weight-body-medium);\n\n  --spacing-bordered-margin-inline-end: var(--pine-spacing-200);\n  --spacing-bordered-padding-block: var(--pine-spacing-100);\n  --spacing-bordered-padding-inline: var(--pine-spacing-200);\n  --spacing-margin-inline-end: var(--pine-spacing-100);\n  --spacing-padding-block: var(--pine-spacing-050);\n  --spacing-padding-inline: var(--pine-spacing-100);\n  --spacing-padding-none: var(--pine-spacing-0);\n\n  --typography-default: var(--pine-font-weight-body-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-heading);\n\n  pds-button {\n    align-items: center;\n    background: var(--color-background-default);\n    border: var(--border-width-default);\n    border-radius: var(--border-radius-default);\n    display: inline-flex;\n    font: var(--typography-default);\n    max-width: 100%;\n    padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n    &::part(button) {\n      padding-inline-end: calc(var(--spacing-padding-inline) / 2);\n    }\n\n    &::part(button):hover {\n      // Update custom prop usage in Button before changing\n      background-color: var(--copytext-color-background-hover);\n      color: var(--color-text-hover);\n    }\n\n    span {\n      font-weight: var(--font-weight-default);\n      margin-inline-end: var(--spacing-margin-inline-end);\n      white-space: nowrap;\n    }\n\n    :nth-child(2) {\n      flex-shrink: 0;\n    }\n  }\n\n  // bordered\n\n  &:host(.pds-copytext--bordered) {\n    border: var(--border-width-default);\n    padding: var(--spacing-padding-none);\n\n    pds-button {\n      padding: var(--spacing-padding-none);\n\n      &:hover {\n        background: none;\n      }\n    }\n\n    span {\n      border: var(--border-interactive-default);\n      border-radius: var(--border-radius-default);\n      margin-inline-end: var(--spacing-bordered-margin-inline-end);\n      padding-block: var(--spacing-bordered-padding-block);\n      padding-inline: var(--spacing-bordered-padding-inline);\n    }\n\n    :hover {\n      span {\n        border: var(--border-interactive-hover);\n      }\n    }\n  }\n\n  // full width\n\n  &:host(.pds-copytext--full-width) {\n    display: flex;\n    width: 100%;\n\n    pds-button {\n      display: flex;\n      justify-content: space-between;\n      width: 100%;\n\n      span {\n        text-align: left;\n        width: 100%;\n      }\n    }\n  }\n\n  // truncated\n\n  &:host(.pds-copytext--truncated) {\n    pds-button {\n      display: flex;\n      width: 100%;\n\n      span {\n        overflow: hidden;\n        text-align: left;\n        text-overflow: ellipsis;\n        width: 100%;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\n\nimport { copy as copyIcon } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-copytext',\n  styleUrls: ['../../global/styles/base.scss', 'pds-copytext.scss'],\n  shadow: true,\n})\nexport class PdsCopytext {\n  /**\n   * Determines whether `copytext` should have a border.\n   * @defaultValue true\n   */\n  @Prop({ reflect: true }) border = true;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `copytext` should expand to the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Determines whether the `value` should truncate and display with an ellipsis.\n   * @defaultValue false\n   */\n  @Prop() truncate = false;\n\n  /**\n   * String that is displayed and that is also copied to the clipboard upon interaction.\n   */\n  @Prop() value!: string;\n\n  /**\n   * Event when copyText button is clicked.\n   */\n  @Event() pdsCopyTextClick: EventEmitter;\n\n  private copyToClipboard = async (value: string) => {\n    try {\n      if (typeof navigator.clipboard !== 'undefined') {\n        await navigator.clipboard.writeText(value);\n        this.pdsCopyTextClick.emit('Copied to clipboard');\n      }\n    } catch (err) {\n      this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);\n    }\n  };\n\n  private handleClick = () => {\n    this.copyToClipboard(this.value);\n  };\n\n  private classNames() {\n    const classNames = ['pds-copytext'];\n\n    if (this.border) {\n      classNames.push('pds-copytext--bordered');\n    }\n\n    if (this.fullWidth) {\n      classNames.push('pds-copytext--full-width');\n    }\n\n    if (this.truncate) {\n      classNames.push('pds-copytext--truncated');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <pds-button type=\"button\" variant=\"unstyled\" onClick={this.handleClick}>\n          <span>{this.value}</span>\n          <pds-icon icon={copyIcon} size=\"16px\"></pds-icon>\n        </pds-button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wKAAA,IAAMA,QAAU,yrDAChB,IAAAC,kBAAeD,QCDf,IAAME,eAAiB,+8GACvB,IAAAC,kBAAeD,e,ICQFE,YAAW,W,+GAkCdC,KAAAC,gBAAkB,SAAOC,GAAa,OAAAC,UAAAC,OAAA,qB,oGAE/BC,UAAUC,YAAc,aAA/B,YACF,SAAMD,UAAUC,UAAUC,UAAUL,I,OAApCM,EAAAC,OACAT,KAAKU,iBAAiBC,KAAK,uB,+CAG7BX,KAAKU,iBAAiBC,KAAK,oCAAAC,OAAoCC,I,qCAI3Db,KAAAc,YAAc,WACpBV,EAAKH,gBAAgBG,EAAKF,M,cAzCM,K,0CAWd,M,cAMD,M,qBA2BXa,EAAAC,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,gBAEpB,GAAIjB,KAAKkB,OAAQ,CACfD,EAAWE,KAAK,yB,CAGlB,GAAInB,KAAKoB,UAAW,CAClBH,EAAWE,KAAK,2B,CAGlB,GAAInB,KAAKqB,SAAU,CACjBJ,EAAWE,KAAK,0B,CAGlB,OAAOF,EAAWK,KAAK,K,EAGzBP,EAAAC,UAAAO,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CAACC,MAAO3B,KAAKiB,aAAcW,GAAI5B,KAAK6B,aACvCL,EAAA,cAAAE,IAAA,2CAAYI,KAAK,SAASC,QAAQ,WAAWC,QAAShC,KAAKc,aACzDU,EAAA,QAAAE,IAAA,4CAAO1B,KAAKE,OACZsB,EAAA,YAAAE,IAAA,2CAAUO,KAAMC,KAAUC,KAAK,U,WAxEjB,G","ignoreList":[]}
+{"version":3,"names":["baseCss","PdsCopytextStyle0","pdsCopytextCss","PdsCopytextStyle1","PdsCopytext","this","copyToClipboard","value","__awaiter","_this","navigator","clipboard","writeText","_a","sent","pdsCopyTextClick","emit","concat","err_1","handleClick","class_1","prototype","classNames","border","push","fullWidth","truncate","join","render","h","Host","key","class","id","componentId","type","variant","onClick","icon","copyIcon","size"],"sources":["src/global/styles/base.scss?tag=pds-copytext&encapsulation=shadow","src/components/pds-copytext/pds-copytext.scss?tag=pds-copytext&encapsulation=shadow","src/components/pds-copytext/pds-copytext.tsx"],"sourcesContent":["// TODO: replace core tokens with semantic\n// Heading color + outline\n\n/*\n  Josh's Custom CSS Reset\n  https://www.joshwcomeau.com/css/custom-css-reset/\n*/\n:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) {\n  box-sizing: border-box;\n}\n\n:where(*:not(slot)) {\n  margin: 0;\n}\n\n:where(img, picture, video, canvas, svg) {\n  display: block;\n  max-width: 100%;\n}\n\n:where(input, button, textarea, select) {\n  font: inherit;\n}\n\n:where(p, h1, h2, h3, h4, h5, h6) {\n  overflow-wrap: break-word;\n}\n\n/*\n  Additional Reset Styles\n*/\n:where(a:not([href]):not([class])) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(a:not([href]):not([class]):hover) {\n  color: currentColor;\n  text-decoration: none;\n}\n\n:where(ul[role='list'], ol[role='list']) {\n  list-style: none;\n}\n\n:where(table) {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\n/*\n  Mercury Base Styles\n*/\n// Typography\n:where(*:not(slot)) {\n  font: var(--pine-typography-body-md-default);\n  letter-spacing: var(--pine-letter-spacing-body-md);\n}\n\n:where(h1, h2, h3, h4, h5, h6) {\n  font-family: var(--pine-font-family-heading);\n  color: var(--pine-color-grey-950);\n}\n\n:where(h1) {\n  font: var(--pine-typography-heading-h1);\n  letter-spacing: var(--pine-letter-spacing-heading-h1);\n}\n\n:where(h2) {\n  font: var(--pine-typography-heading-h2);\n  letter-spacing: var(--pine-letter-spacing-heading-h2);\n}\n\n:where(h3) {\n  font: var(--pine-typography-heading-h3);\n  letter-spacing: var(--pine-letter-spacing-heading-h3);\n}\n\n:where(h4) {\n  font: var(--pine-typography-heading-h4);\n  letter-spacing: var(--pine-letter-spacing-heading-h4);\n}\n\n:where(h5) {\n  font: var(--pine-typography-heading-h5);\n  letter-spacing: var(--pine-letter-spacing-heading-h5);\n}\n\n:where(h6) {\n  font: var(--pine-typography-heading-h6);\n  letter-spacing: var(--pine-letter-spacing-heading-h6);\n}\n\n:where(div, label, p, span) {\n  color: var(--pine-color-text-default);\n}\n\n:where(code, kbd, pre, samp) {\n  font-family: monospace;\n}\n\n// Accessibility\n:where([role=\"button\"]) {\n  cursor: pointer;\n}\n\n:where(:focus) {\n  outline: 0;\n}\n\n:where(:focus-visible) {\n  outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500);\n}\n\n// Misc.\n:where([hidden]) {\n  display: none !important;\n}\n",":host(.pds-copytext) {\n\n  --border-interactive-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n  --border-interactive-hover: var(--pine-border-width-thin) solid var(--pine-color-grey-400);\n\n  --border-radius-default: var(--pine-border-radius-circle);\n\n  --border-width-default: var(--pine-border-width-none);\n\n  --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);\n\n  --color-background-default: var(--pine-color-white);\n  --color-border-interactive-hover: var(--pine-color-grey-400);\n  --color-text-hover: var(--pine-color-grey-900);\n  // Update custom prop usage in Button before changing\n  --copytext-color-background-hover: var(--pine-color-grey-200);\n\n  --font-size-default: var(--pine-font-size-100);\n  --font-weight-default: var(--pine-font-weight-body-medium);\n\n  --spacing-bordered-margin-inline-end: var(--pine-spacing-200);\n  --spacing-bordered-padding-block: var(--pine-spacing-100);\n  --spacing-bordered-padding-inline: var(--pine-spacing-200);\n  --spacing-margin-inline-end: var(--pine-spacing-100);\n  --spacing-padding-block: var(--pine-spacing-050);\n  --spacing-padding-inline: var(--pine-spacing-100);\n  --spacing-padding-none: var(--pine-spacing-0);\n\n  --typography-default: var(--pine-font-weight-body-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-heading);\n\n  pds-button {\n    align-items: center;\n    background: var(--color-background-default);\n    border: var(--border-width-default);\n    border-radius: var(--border-radius-default);\n    display: inline-flex;\n    font: var(--typography-default);\n    max-width: 100%;\n    padding: var(--spacing-padding-block) var(--spacing-padding-inline);\n\n    &::part(button) {\n      padding-inline-end: calc(var(--spacing-padding-inline) / 2);\n    }\n\n    &::part(button):hover {\n      // Update custom prop usage in Button before changing\n      background-color: var(--copytext-color-background-hover);\n      color: var(--color-text-hover);\n    }\n\n    span {\n      font-weight: var(--font-weight-default);\n      margin-inline-end: var(--spacing-margin-inline-end);\n      white-space: nowrap;\n    }\n\n    :nth-child(2) {\n      flex-shrink: 0;\n    }\n  }\n\n  // bordered\n\n  &:host(.pds-copytext--bordered) {\n    border: var(--border-width-default);\n    padding: var(--spacing-padding-none);\n\n    pds-button {\n      padding: var(--spacing-padding-none);\n\n      &:hover {\n        background: none;\n      }\n    }\n\n    span {\n      border: var(--border-interactive-default);\n      border-radius: var(--border-radius-default);\n      margin-inline-end: var(--spacing-bordered-margin-inline-end);\n      padding-block: var(--spacing-bordered-padding-block);\n      padding-inline: var(--spacing-bordered-padding-inline);\n    }\n\n    :hover {\n      span {\n        border: var(--border-interactive-hover);\n      }\n    }\n  }\n\n  // full width\n\n  &:host(.pds-copytext--full-width) {\n    display: flex;\n    width: 100%;\n\n    pds-button {\n      display: flex;\n      justify-content: space-between;\n      width: 100%;\n\n      span {\n        text-align: left;\n        width: 100%;\n      }\n    }\n  }\n\n  // truncated\n\n  &:host(.pds-copytext--truncated) {\n    pds-button {\n      display: flex;\n      width: 100%;\n\n      span {\n        overflow: hidden;\n        text-align: left;\n        text-overflow: ellipsis;\n        width: 100%;\n      }\n    }\n  }\n}\n","import { Component, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\n\nimport { copy as copyIcon } from '@pine-ds/icons/icons';\n\n@Component({\n  tag: 'pds-copytext',\n  styleUrls: ['../../global/styles/base.scss', 'pds-copytext.scss'],\n  shadow: true,\n})\nexport class PdsCopytext {\n  /**\n   * Determines whether `copytext` should have a visible border.\n   * @defaultValue true\n   */\n  @Prop({ reflect: true }) border = true;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `copytext` should expand to the full width of its container.\n   * @defaultValue false\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * Determines whether the `value` should truncate and display with an ellipsis.\n   * @defaultValue false\n   */\n  @Prop() truncate = false;\n\n  /**\n   * The string displayed that is also copied to the clipboard upon interaction.\n   */\n  @Prop() value!: string;\n\n  /**\n   * Event fired when copyText button is clicked.\n   */\n  @Event() pdsCopyTextClick: EventEmitter;\n\n  private copyToClipboard = async (value: string) => {\n    try {\n      if (typeof navigator.clipboard !== 'undefined') {\n        await navigator.clipboard.writeText(value);\n        this.pdsCopyTextClick.emit('Copied to clipboard');\n      }\n    } catch (err) {\n      this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);\n    }\n  };\n\n  private handleClick = () => {\n    this.copyToClipboard(this.value);\n  };\n\n  private classNames() {\n    const classNames = ['pds-copytext'];\n\n    if (this.border) {\n      classNames.push('pds-copytext--bordered');\n    }\n\n    if (this.fullWidth) {\n      classNames.push('pds-copytext--full-width');\n    }\n\n    if (this.truncate) {\n      classNames.push('pds-copytext--truncated');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <pds-button type=\"button\" variant=\"unstyled\" onClick={this.handleClick}>\n          <span>{this.value}</span>\n          <pds-icon icon={copyIcon} size=\"16px\"></pds-icon>\n        </pds-button>\n      </Host>\n    );\n  }\n}\n"],"mappings":"wKAAA,IAAMA,QAAU,yrDAChB,IAAAC,kBAAeD,QCDf,IAAME,eAAiB,+8GACvB,IAAAC,kBAAeD,e,ICQFE,YAAW,W,+GAkCdC,KAAAC,gBAAkB,SAAOC,GAAa,OAAAC,UAAAC,OAAA,qB,oGAE/BC,UAAUC,YAAc,aAA/B,YACF,SAAMD,UAAUC,UAAUC,UAAUL,I,OAApCM,EAAAC,OACAT,KAAKU,iBAAiBC,KAAK,uB,+CAG7BX,KAAKU,iBAAiBC,KAAK,oCAAAC,OAAoCC,I,qCAI3Db,KAAAc,YAAc,WACpBV,EAAKH,gBAAgBG,EAAKF,M,cAzCM,K,0CAWd,M,cAMD,M,qBA2BXa,EAAAC,UAAAC,WAAA,WACN,IAAMA,EAAa,CAAC,gBAEpB,GAAIjB,KAAKkB,OAAQ,CACfD,EAAWE,KAAK,yB,CAGlB,GAAInB,KAAKoB,UAAW,CAClBH,EAAWE,KAAK,2B,CAGlB,GAAInB,KAAKqB,SAAU,CACjBJ,EAAWE,KAAK,0B,CAGlB,OAAOF,EAAWK,KAAK,K,EAGzBP,EAAAC,UAAAO,OAAA,WACE,OACEC,EAACC,KAAI,CAAAC,IAAA,2CAACC,MAAO3B,KAAKiB,aAAcW,GAAI5B,KAAK6B,aACvCL,EAAA,cAAAE,IAAA,2CAAYI,KAAK,SAASC,QAAQ,WAAWC,QAAShC,KAAKc,aACzDU,EAAA,QAAAE,IAAA,4CAAO1B,KAAKE,OACZsB,EAAA,YAAAE,IAAA,2CAAUO,KAAMC,KAAUC,KAAK,U,WAxEjB,G","ignoreList":[]}