npm - @pine-ds/core - Versions diffs - 2.16.4 → 2.17.0 - Mend

@pine-ds/core 2.16.4 → 2.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (380) hide show

package/dist/esm/loader.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-0f993ce5.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["pds-copytext",[[1,"pds-copytext",{"border":[516],"componentId":[1,"component-id"],"fullWidth":[4,"full-width"],"truncate":[4],"value":[1]}]]],["pds-table-head",[[1,"pds-table-head",{"indeterminate":[1028],"isSelected":[1028,"is-selected"]}]]],["pds-table-row",[[1,"pds-table-row",{"indeterminate":[1028],"isSelected":[1028,"is-selected"]}]]],["pds-accordion",[[1,"pds-accordion",{"componentId":[1,"component-id"],"isOpen":[1540,"open"]},null,{"isOpen":["handleOpenState"]}]]],["pds-avatar",[[1,"pds-avatar",{"alt":[1],"badge":[4],"componentId":[1,"component-id"],"dropdown":[4],"image":[1],"size":[513],"variant":[513]}]]],["pds-chip",[[1,"pds-chip",{"componentId":[1,"component-id"],"dot":[4],"label":[1],"large":[4],"sentiment":[1],"variant":[1]}]]],["pds-input",[[1,"pds-input",{"autocomplete":[1],"componentId":[1,"component-id"],"debounce":[2],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"type":[1],"value":[1032],"hasFocus":[32],"setFocus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}]]],["pds-link",[[1,"pds-link",{"componentId":[1,"component-id"],"external":[4],"variant":[1],"fontSize":[1,"font-size"],"href":[1]}]]],["pds-radio",[[2,"pds-radio",{"checked":[4],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"required":[4],"value":[1]}]]],["pds-select",[[1,"pds-select",{"autocomplete":[1],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"multiple":[4],"name":[1],"required":[4],"value":[1025]},null,{"value":["valueChanged"]}]]],["pds-sortable-item",[[6,"pds-sortable-item",{"enableActions":[4,"enable-actions"],"componentId":[1,"component-id"],"showHandle":[1028,"show-handle"]}]]],["pds-switch",[[1,"pds-switch",{"componentId":[1,"component-id"],"checked":[1028],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"required":[4],"value":[1]}]]],["pds-textarea",[[1,"pds-textarea",{"autocomplete":[1],"componentId":[1,"component-id"],"disabled":[4],"debounce":[2],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[1028],"label":[1],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1025],"hasFocus":[32],"setFocus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}]]],["pds-box",[[0,"pds-box",{"alignItems":[1,"align-items"],"auto":[4],"backgroundColor":[1,"background-color"],"border":[4],"borderColor":[1,"border-color"],"borderRadius":[1,"border-radius"],"direction":[1],"display":[1],"fit":[4],"gap":[1],"flex":[1],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"minWidth":[1,"min-width"],"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"padding":[1],"shadow":[1],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]}]]],["pds-divider",[[1,"pds-divider",{"componentId":[1,"component-id"],"offset":[1],"vertical":[4]}]]],["pds-image",[[1,"pds-image",{"alt":[1],"componentId":[1,"component-id"],"height":[2],"loading":[1],"sizes":[1],"src":[1],"srcset":[1],"width":[2]}]]],["pds-popover",[[1,"pds-popover",{"popoverTargetAction":[1,"popover-target-action"],"popoverType":[1,"popover-type"],"componentId":[1,"component-id"],"text":[1],"maxWidth":[2,"max-width"],"placement":[513],"active":[32]},[[2,"click","handleClick"],[11,"scroll","handleScroll"]]]]],["pds-progress",[[1,"pds-progress",{"animated":[4],"componentId":[1,"component-id"],"fillColor":[1,"fill-color"],"label":[1],"percent":[2],"showPercent":[4,"show-percent"]}]]],["pds-row",[[0,"pds-row",{"alignItems":[1,"align-items"],"border":[4],"colGap":[1,"col-gap"],"componentId":[1,"component-id"],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"noWrap":[4,"no-wrap"]}]]],["pds-sortable",[[6,"pds-sortable",{"border":[516],"componentId":[1,"component-id"],"dividers":[516],"handleType":[1,"handle-type"]}]]],["pds-tab",[[4,"pds-tab",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"index":[2],"selected":[4]}]]],["pds-table",[[1,"pds-table",{"compact":[4],"componentId":[1,"component-id"],"responsive":[4],"fixedColumn":[4,"fixed-column"],"selectable":[4],"sortingColumn":[32],"sortingDirection":[32]},[[0,"pdsTableSort","handleTableSort"],[0,"pdsTableSelectAll","handleTableSelectAll"],[0,"pdsTableRowSelected","handleTableSelect"]]]]],["pds-table-body",[[1,"pds-table-body"]]],["pds-tabpanel",[[4,"pds-tabpanel",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"selected":[1028]}]]],["pds-tabs",[[1,"pds-tabs",{"tablistLabel":[1,"tablist-label"],"componentId":[1,"component-id"],"variant":[1],"activeTabName":[1025,"active-tab-name"],"activeTabIndex":[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["pds-text",[[1,"pds-text",{"align":[1],"color":[1],"decoration":[1],"gutter":[1],"size":[1],"weight":[1],"tag":[1]}]]],["pds-tooltip",[[1,"pds-tooltip",{"content":[1],"componentId":[1,"component-id"],"hasArrow":[4,"has-arrow"],"htmlContent":[4,"html-content"],"placement":[513],"maxWidth":[1,"max-width"],"opened":[1540],"isOpen":[32],"showTooltip":[64],"hideTooltip":[64]},null,{"opened":["handleOpenToggle"]}]]],["pds-loader",[[1,"pds-loader",{"isLoading":[4,"is-loading"],"showLabel":[4,"show-label"],"size":[513],"variant":[1]}]]],["pds-icon",[[1,"pds-icon",{"color":[1],"icon":[8],"name":[513],"size":[513],"src":[1],"ariaLabel":[32],"isVisible":[32],"svgContent":[32]},null,{"size":["updateStyles"],"color":["updateStyles"],"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["pds-button",[[1,"pds-button",{"componentId":[1,"component-id"],"disabled":[4],"fullWidth":[4,"full-width"],"icon":[1],"loading":[4],"name":[1],"value":[1],"type":[1],"variant":[1]}]]],["pds-table-head-cell",[[1,"pds-table-head-cell",{"sortable":[4],"sortingDirection":[32],"tableScrolling":[32],"isSelected":[32]}]]],["pds-table-cell",[[1,"pds-table-cell",{"truncate":[4],"tableScrolling":[32]}]]],["pds-checkbox",[[1,"pds-checkbox",{"checked":[1028],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"indeterminate":[1028],"invalid":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1]},null,{"checked":["updateIndeterminate"]}]]]], options);
+  return bootstrapLazy([["pds-copytext",[[1,"pds-copytext",{"border":[516],"componentId":[1,"component-id"],"fullWidth":[4,"full-width"],"truncate":[4],"value":[1]}]]],["pds-table-head",[[1,"pds-table-head",{"indeterminate":[1028],"isSelected":[1028,"is-selected"]}]]],["pds-table-row",[[1,"pds-table-row",{"indeterminate":[1028],"isSelected":[1028,"is-selected"]}]]],["pds-accordion",[[1,"pds-accordion",{"componentId":[1,"component-id"],"isOpen":[1540,"open"]},null,{"isOpen":["handleOpenState"]}]]],["pds-avatar",[[1,"pds-avatar",{"alt":[1],"badge":[4],"componentId":[1,"component-id"],"dropdown":[4],"image":[1],"size":[513],"variant":[513]}]]],["pds-chip",[[1,"pds-chip",{"componentId":[1,"component-id"],"dot":[4],"label":[1],"large":[4],"sentiment":[1],"variant":[1]}]]],["pds-input",[[1,"pds-input",{"autocomplete":[1],"componentId":[1,"component-id"],"debounce":[2],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"type":[1],"value":[1032],"hasFocus":[32],"setFocus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}]]],["pds-link",[[1,"pds-link",{"componentId":[1,"component-id"],"external":[4],"variant":[1],"fontSize":[1,"font-size"],"href":[1]}]]],["pds-radio",[[2,"pds-radio",{"checked":[4],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"required":[4],"value":[1]}]]],["pds-select",[[1,"pds-select",{"autocomplete":[1],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"multiple":[4],"name":[1],"required":[4],"value":[1025]},null,{"value":["valueChanged"]}]]],["pds-sortable-item",[[6,"pds-sortable-item",{"enableActions":[4,"enable-actions"],"componentId":[1,"component-id"],"showHandle":[1028,"show-handle"]}]]],["pds-switch",[[1,"pds-switch",{"componentId":[1,"component-id"],"checked":[1028],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[4],"label":[1],"name":[1],"required":[4],"value":[1]}]]],["pds-textarea",[[1,"pds-textarea",{"autocomplete":[1],"componentId":[1,"component-id"],"disabled":[4],"debounce":[2],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"invalid":[1028],"label":[1],"name":[1],"placeholder":[1],"readonly":[4],"required":[4],"rows":[2],"value":[1025],"hasFocus":[32],"setFocus":[64]},null,{"debounce":["debounceChanged"],"value":["valueChanged"]}]]],["pds-box",[[0,"pds-box",{"alignItems":[1,"align-items"],"alignSelf":[1,"align-self"],"auto":[4],"backgroundColor":[1,"background-color"],"border":[4],"borderColor":[1,"border-color"],"borderRadius":[1,"border-radius"],"direction":[1],"display":[1],"fit":[4],"gap":[1],"flex":[1],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"minWidth":[1,"min-width"],"offset":[1],"offsetXs":[1,"offset-xs"],"offsetSm":[1,"offset-sm"],"offsetMd":[1,"offset-md"],"offsetLg":[1,"offset-lg"],"offsetXl":[1,"offset-xl"],"padding":[1],"paddingBlock":[1,"padding-block"],"paddingInline":[1,"padding-inline"],"shadow":[1],"size":[1],"sizeXs":[1,"size-xs"],"sizeSm":[1,"size-sm"],"sizeMd":[1,"size-md"],"sizeLg":[1,"size-lg"],"sizeXl":[1,"size-xl"]}]]],["pds-divider",[[1,"pds-divider",{"componentId":[1,"component-id"],"offset":[1],"vertical":[4]}]]],["pds-image",[[1,"pds-image",{"alt":[1],"componentId":[1,"component-id"],"height":[2],"loading":[1],"sizes":[1],"src":[1],"srcset":[1],"width":[2]}]]],["pds-popover",[[1,"pds-popover",{"popoverTargetAction":[1,"popover-target-action"],"popoverType":[1,"popover-type"],"componentId":[1,"component-id"],"text":[1],"maxWidth":[2,"max-width"],"placement":[513],"active":[32]},[[2,"click","handleClick"],[11,"scroll","handleScroll"]]]]],["pds-progress",[[1,"pds-progress",{"animated":[4],"componentId":[1,"component-id"],"fillColor":[1,"fill-color"],"label":[1],"percent":[2],"showPercent":[4,"show-percent"]}]]],["pds-row",[[0,"pds-row",{"alignItems":[1,"align-items"],"border":[4],"colGap":[1,"col-gap"],"componentId":[1,"component-id"],"justifyContent":[1,"justify-content"],"minHeight":[1,"min-height"],"noWrap":[4,"no-wrap"]}]]],["pds-sortable",[[6,"pds-sortable",{"border":[516],"componentId":[1,"component-id"],"dividers":[516],"handleType":[1,"handle-type"]}]]],["pds-tab",[[4,"pds-tab",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"index":[2],"selected":[4]}]]],["pds-table",[[1,"pds-table",{"compact":[4],"componentId":[1,"component-id"],"responsive":[4],"fixedColumn":[4,"fixed-column"],"selectable":[4],"sortingColumn":[32],"sortingDirection":[32]},[[0,"pdsTableSort","handleTableSort"],[0,"pdsTableSelectAll","handleTableSelectAll"],[0,"pdsTableRowSelected","handleTableSelect"]]]]],["pds-table-body",[[1,"pds-table-body"]]],["pds-tabpanel",[[4,"pds-tabpanel",{"name":[1],"parentComponentId":[1,"parent-component-id"],"variant":[1],"selected":[1028]}]]],["pds-tabs",[[1,"pds-tabs",{"tablistLabel":[1,"tablist-label"],"componentId":[1,"component-id"],"variant":[1],"activeTabName":[1025,"active-tab-name"],"activeTabIndex":[1026,"active-tab-index"]},[[16,"pdsTabClick","tabClickHandler"],[0,"keydown","handleKeyDown"]]]]],["pds-text",[[1,"pds-text",{"align":[1],"color":[1],"decoration":[1],"gutter":[1],"italic":[4],"size":[1],"weight":[1],"tag":[1],"truncate":[4]}]]],["pds-tooltip",[[1,"pds-tooltip",{"content":[1],"componentId":[1,"component-id"],"hasArrow":[4,"has-arrow"],"htmlContent":[4,"html-content"],"placement":[513],"maxWidth":[1,"max-width"],"opened":[1540],"isOpen":[32],"showTooltip":[64],"hideTooltip":[64]},null,{"opened":["handleOpenToggle"]}]]],["pds-loader",[[1,"pds-loader",{"isLoading":[4,"is-loading"],"showLabel":[4,"show-label"],"size":[513],"variant":[1]}]]],["pds-icon",[[1,"pds-icon",{"color":[1],"icon":[8],"name":[513],"size":[513],"src":[1],"ariaLabel":[32],"isVisible":[32],"svgContent":[32]},null,{"size":["updateStyles"],"color":["updateStyles"],"name":["loadIcon"],"src":["loadIcon"],"icon":["loadIcon"]}]]],["pds-button",[[1,"pds-button",{"componentId":[1,"component-id"],"disabled":[4],"fullWidth":[4,"full-width"],"href":[1],"icon":[1],"iconOnly":[4,"icon-only"],"loading":[4],"name":[1],"target":[1],"type":[1],"value":[1],"variant":[1]}]]],["pds-table-head-cell",[[1,"pds-table-head-cell",{"sortable":[4],"sortingDirection":[32],"tableScrolling":[32],"isSelected":[32]}]]],["pds-table-cell",[[1,"pds-table-cell",{"truncate":[4],"tableScrolling":[32]}]]],["pds-checkbox",[[1,"pds-checkbox",{"checked":[1028],"componentId":[1,"component-id"],"disabled":[4],"errorMessage":[1,"error-message"],"helperMessage":[1,"helper-message"],"indeterminate":[1028],"invalid":[4],"label":[1],"labelHidden":[4,"label-hidden"],"name":[1],"required":[4],"value":[1]},null,{"checked":["updateIndeterminate"]}]]]], options);
 };
 export { defineCustomElements };

package/dist/esm/pds-accordion.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host } from './index-b1696fed.js';
-import { d as downSmall } from './index-858623fe.js';
+import { d as downSmall } from './index-24f87b75.js';
 const pdsAccordionCss = ":host{display:block}details{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);--color-text-hover:var(--pine-color-text-secondary);--number-animation-transform-timing:200ms;border-radius:var(--pine-dimension-xs)}details pds-icon{-webkit-transform:scaleY(1);transform:scaleY(1)}details[open]{background-color:var(--pine-color-background-container)}details[open] summary{color:var(--pine-color-text-active);font-weight:var(--pine-font-weight-semi-bold)}details[open] summary pds-icon{-webkit-transform:scaleY(-1);transform:scaleY(-1)}summary{background-color:var(--pine-color-background-container);border-radius:var(--pine-dimension-xs);color:var(--pine-color-text-readonly);font-family:var(--pine-font-family-body);font-size:var(--pine-font-size-body-md);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);padding-block:calc(var(--pine-dimension-2xs) * 1.5);-webkit-padding-end:var(--pine-dimension-2xs);padding-inline-end:var(--pine-dimension-2xs);-webkit-padding-start:var(--pine-dimension-xs);padding-inline-start:var(--pine-dimension-xs);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex}summary::-webkit-details-marker{display:none}summary:hover{background:var(--pine-color-background-container-hover);color:var(--pine-color-text);cursor:pointer}summary:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none;position:relative}summary pds-icon{-webkit-margin-start:auto;margin-inline-start:auto}.pds-accordion__body{-webkit-padding-after:calc(var(--pine-dimension-sm) + 2);padding-block-end:calc(var(--pine-dimension-sm) + 2);padding-inline:calc(var(--pine-dimension-2xs) * 1.5)}";
 const PdsAccordionStyle0 = pdsAccordionCss;

package/dist/esm/pds-avatar.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host } from './index-b1696fed.js';
-import { c as checkCircleFilled, u as userFilled } from './index-858623fe.js';
+import { c as checkCircleFilled, u as userFilled } from './index-24f87b75.js';
 const pdsAvatarCss = ":host{display:inline-block}div{--color-background-container:var(--pine-color-mercury-050);-ms-flex-align:center;align-items:center;background-color:var(--color-background-container);border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;position:relative}:host(.pds-avatar--admin) div{--border-radius-admin-round:var(--pine-dimension-150);border-radius:var(--border-radius-admin-round)}:host(.pds-avatar--has-image) div{background:transparent}@supports selector(:has){div:has(img){background-color:transparent}}.pds-avatar__button{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-purple-300);-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:var(--pine-dimension-none);border-radius:var(--pine-border-radius-full);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-none)}.pds-avatar__button:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-avatar__badge{background-color:var(--pine-color-background-container);border:var(--pine-border);border-color:var(--pine-color-secondary);border-radius:var(--pine-border-radius-round);bottom:var(--pine-dimension-none);position:absolute;right:var(--pine-dimension-none)}img{border-radius:var(--border-radius-admin-round, var(--pine-border-radius-full));height:100%;-o-object-fit:cover;object-fit:cover;width:100%}";
 const PdsAvatarStyle0 = pdsAvatarCss;

package/dist/esm/pds-box.entry.js CHANGED Viewed

@@ -1,12 +1,13 @@
 import { r as registerInstance, h, H as Host } from './index-b1696fed.js';
-const pdsBoxCss = "pds-box{--border-width-default:var(--pine-border-width-thin);--color-background-box:inherit;--color-border-box:inherit;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-dimension-2xs)}.pds-border-radius-sm{border-radius:var(--pine-dimension-xs)}.pds-border-radius-md{border-radius:var(--pine-dimension-100)}.pds-border-radius-lg{border-radius:var(--pine-dimension-sm)}.pds-border-radius-circle{border-radius:var(--pine-border-radius-full)}.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(--pine-dimension-2xs)}.pds-box-gap-xs{gap:var(--pine-dimension-xs)}.pds-box-gap-sm{gap:var(--pine-dimension-sm)}.pds-box-gap-md{gap:var(--pine-dimension-md)}.pds-box-gap-lg{gap:var(--pine-dimension-lg)}.pds-box-gap-xl{gap:var(--pine-dimension-xl)}.pds-box-gap-xxl{gap:var(--pine-dimension-2xl)}.pds-padding-none{padding:0}.pds-padding-xxs{padding:var(--pine-dimension-2xs)}.pds-padding-xs{padding:var(--pine-dimension-xs)}.pds-padding-sm{padding:var(--pine-dimension-sm)}.pds-padding-md{padding:var(--pine-dimension-md)}.pds-padding-lg{padding:var(--pine-dimension-lg)}.pds-padding-xl{padding:var(--pine-dimension-xl)}.pds-padding-xxl{padding:var(--pine-dimension-2xl)}.pds-box-display-flex{display:-ms-flexbox;display:flex}.pds-box-display-inline-flex{display:-ms-inline-flexbox;display:inline-flex}.pds-box-direction-row{-ms-flex-direction:row;flex-direction:row}.pds-box-direction-column{-ms-flex-direction:column;flex-direction:column}.pds-justify-content-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.pds-align-items-start{-ms-flex-align:start;align-items:start}.pds-align-items-center{-ms-flex-align:center;align-items:center}.pds-align-items-end{-ms-flex-align:end;align-items:end}.pds-align-items-stretch{-ms-flex-align:stretch;align-items:stretch}.pds-align-items-baseline{-ms-flex-align:baseline;align-items:baseline}";
+const pdsBoxCss = "pds-box{--border-width-default:var(--pine-border-width-thin);--color-background-box:inherit;--color-border-box:inherit;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-dimension-2xs)}.pds-border-radius-sm{border-radius:var(--pine-dimension-xs)}.pds-border-radius-md{border-radius:var(--pine-dimension-100)}.pds-border-radius-lg{border-radius:var(--pine-dimension-sm)}.pds-border-radius-circle{border-radius:var(--pine-border-radius-full)}.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(--pine-dimension-2xs)}.pds-box-gap-xs{gap:var(--pine-dimension-xs)}.pds-box-gap-sm{gap:var(--pine-dimension-sm)}.pds-box-gap-md{gap:var(--pine-dimension-md)}.pds-box-gap-lg{gap:var(--pine-dimension-lg)}.pds-box-gap-xl{gap:var(--pine-dimension-xl)}.pds-box-gap-xxl{gap:var(--pine-dimension-2xl)}.pds-padding-none{padding:0}.pds-padding-xxs{padding:var(--pine-dimension-2xs)}.pds-padding-xs{padding:var(--pine-dimension-xs)}.pds-padding-sm{padding:var(--pine-dimension-sm)}.pds-padding-md{padding:var(--pine-dimension-md)}.pds-padding-lg{padding:var(--pine-dimension-lg)}.pds-padding-xl{padding:var(--pine-dimension-xl)}.pds-padding-xxl{padding:var(--pine-dimension-2xl)}.pds-padding-block-none{padding-block:var(--pine-dimension-none)}.pds-padding-block-xxs{padding-block:var(--pine-dimension-2xs)}.pds-padding-block-xs{padding-block:var(--pine-dimension-xs)}.pds-padding-block-sm{padding-block:var(--pine-dimension-sm)}.pds-padding-block-md{padding-block:var(--pine-dimension-md)}.pds-padding-block-lg{padding-block:var(--pine-dimension-lg)}.pds-padding-block-xl{padding-block:var(--pine-dimension-xl)}.pds-padding-block-xxl{padding-block:var(--pine-dimension-2xl)}.pds-padding-inline-none{padding-inline:var(--pine-dimension-none)}.pds-padding-inline-xxs{padding-inline:var(--pine-dimension-2xs)}.pds-padding-inline-xs{padding-inline:var(--pine-dimension-xs)}.pds-padding-inline-sm{padding-inline:var(--pine-dimension-sm)}.pds-padding-inline-md{padding-inline:var(--pine-dimension-md)}.pds-padding-inline-lg{padding-inline:var(--pine-dimension-lg)}.pds-padding-inline-xl{padding-inline:var(--pine-dimension-xl)}.pds-padding-inline-xxl{padding-inline:var(--pine-dimension-2xl)}.pds-box-display-block{display:block}.pds-box-display-inline-block{display:inline-block}.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}.pds-align-self-start{-ms-flex-item-align:start;align-self:start}.pds-align-self-center{-ms-flex-item-align:center;align-self:center}.pds-align-self-end{-ms-flex-item-align:end;align-self:end}.pds-align-self-baseline{-ms-flex-item-align:baseline;align-self:baseline}.pds-align-self-stretch{-ms-flex-item-align:stretch;align-self:stretch}";
 const PdsBoxStyle0 = pdsBoxCss;
 const PdsBox = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.alignItems = undefined;
+        this.alignSelf = undefined;
         this.auto = undefined;
         this.backgroundColor = undefined;
         this.border = false;
@@ -27,6 +28,8 @@ const PdsBox = class {
         this.offsetLg = undefined;
         this.offsetXl = undefined;
         this.padding = undefined;
+        this.paddingBlock = undefined;
+        this.paddingInline = undefined;
         this.shadow = undefined;
         this.size = undefined;
         this.sizeXs = undefined;
@@ -38,6 +41,7 @@ const PdsBox = class {
     render() {
         const boxClasses = `
     ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
+    ${this.alignSelf !== undefined && this.alignSelf.trim() !== '' ? `pds-align-self-${this.alignSelf}` : ''}
     ${this.auto ? 'pds-box--auto' : ''}
     ${this.border ? 'pds-box--border' : ''}
     ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}
@@ -54,6 +58,8 @@ const PdsBox = class {
     ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}
     ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}
     ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}
+    ${this.paddingBlock !== undefined && this.paddingBlock.trim() !== '' ? `pds-padding-block-${this.paddingBlock}` : ''}
+    ${this.paddingInline !== undefined && this.paddingInline.trim() !== '' ? `pds-padding-inline-${this.paddingInline}` : ''}
     ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}
     ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}
     ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}
@@ -68,7 +74,7 @@ const PdsBox = class {
             this.sizeXl == undefined ? 'pds-box' : ''}
     `;
         const boxInlineStyles = 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: boxClasses, style: boxInlineStyles }));
+        return (h(Host, { key: 'a6bdc595d388f042a249f2a671f1f05ea582e115', class: boxClasses, style: boxInlineStyles }));
     }
 };
 PdsBox.style = PdsBoxStyle0;

package/dist/esm/pds-box.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-box.entry.js","mappings":"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","names":[],"sources":["src/components/pds-box/pds-box.scss?tag=pds-box","src/components/pds-box/pds-box.tsx"],"sourcesContent":["@import './pds-box.mixins';\n\npds-box {\n --border-width-default: var(--pine-border-width-thin);\n --color-background-box: inherit;\n --color-border-box: inherit;\n\n display: block;\n}\n\n[class='pds-box'] {\n background-color: var(--color-background-box);\n box-sizing: border-box;\n display: inline-flex;\n min-height: var(--sizing-min-height-box);\n min-width: var(--sizing-min-width-box);\n\n // The immediate child of the row will fit the width of the row\n .pds-row > & {\n position: relative;\n width: 100%;\n\n &.pds-box--auto {\n width: auto;\n }\n }\n}\n\n// Spacing mixin\n$pine-spacing-tokens: (\n xxs: 4px,\n xs: 8px,\n sm: 16px,\n md: 24px,\n lg: 36px,\n xl: 48px,\n xxl: 64px,\n);\n\n// Generate spacing classes\n@include generate-spacing-classes(false, $pine-spacing-tokens);\n@include generate-spacing-classes('top', $pine-spacing-tokens);\n@include generate-spacing-classes('right', $pine-spacing-tokens);\n@include generate-spacing-classes('left', $pine-spacing-tokens);\n@include generate-spacing-classes('bottom', $pine-spacing-tokens);\n\n// Base offset classes\n@include generate-column-offsets(false, 12);\n\n// Responsive offset classes\n@media (max-width: 575px) {\n @include generate-column-offsets('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-column-offsets('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-column-offsets('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-column-offsets('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-column-offsets('xl', 12);\n}\n\n\n// Base column width classes\n@include generate-columns(false, 12);\n\n// Responsive column width classes\n@media (max-width: 575px) {\n @include generate-columns('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-columns('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-columns('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-columns('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-columns('xl', 12);\n}\n\n.pds-box {\n flex-basis: 0;\n flex-grow: 1;\n}\n\n.pds-box--auto {\n flex: 0 0 var(--sizing-min-width-box, fit-content);\n min-width: auto;\n width: auto;\n}\n\n.pds-box--fit {\n max-width: 100%;\n min-width: 100%;\n width: 100%;\n}\n\n.pds-box--border {\n border-color: var(--color-border-box, var(--pine-color-grey-300));\n border-style: solid;\n border-width: var(--border-width-default);\n}\n\n// Display helpers\n.pds-box--display-flex {\n display: flex;\n}\n\n.pds-box--display-inline-flex {\n display: inline-flex;\n}\n\n.pds-box--display-block {\n display: block;\n}\n\n.pds-box--display-inline-block {\n display: inline-block;\n}\n\n// Flex helpers\n.pds-box--flex-none {\n flex: 0 0 auto;\n}\n\n.pds-box--flex-grow {\n flex: 1 1 auto\n}\n\n.pds-box--flex-shrink {\n flex: 0 0 auto;\n}\n\n// Border radius helpers\n.pds-border-radius-none {\n border-radius: 0;\n}\n\n.pds-border-radius-xs {\n border-radius: var(--pine-dimension-2xs);\n}\n\n.pds-border-radius-sm {\n border-radius: var(--pine-dimension-xs);\n}\n\n.pds-border-radius-md {\n border-radius: var(--pine-dimension-100);\n}\n\n.pds-border-radius-lg {\n border-radius: var(--pine-dimension-sm);\n}\n\n.pds-border-radius-circle {\n border-radius: var(--pine-border-radius-full);\n}\n\n// Box shadow helpers\n.pds-shadow-050 {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-100 {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-150 {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-200 {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n.pds-shadow-300 {\n box-shadow: var(--pine-box-shadow-300);\n}\n\n.pds-shadow-400 {\n box-shadow: var(--pine-box-shadow-400);\n}\n\n.pds-shadow-500 {\n box-shadow: var(--pine-box-shadow-500);\n}\n\n\n.pds-shadow-xs {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-sm {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-md {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-lg {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n// Gap helpers\n.pds-box-gap-none {\n gap: 0;\n}\n\n.pds-box-gap-xxs {\n gap: var(--pine-dimension-2xs);\n}\n\n.pds-box-gap-xs {\n gap: var(--pine-dimension-xs);\n}\n\n.pds-box-gap-sm {\n gap: var(--pine-dimension-sm);\n}\n\n.pds-box-gap-md {\n gap: var(--pine-dimension-md);\n}\n\n.pds-box-gap-lg {\n gap: var(--pine-dimension-lg);\n}\n\n.pds-box-gap-xl {\n gap: var(--pine-dimension-xl);\n}\n\n.pds-box-gap-xxl {\n gap: var(--pine-dimension-2xl);\n}\n\n// Spacing helpers\n.pds-padding-none {\n padding: 0;\n}\n\n.pds-padding-xxs {\n padding: var(--pine-dimension-2xs);\n}\n\n.pds-padding-xs {\n padding: var(--pine-dimension-xs);\n}\n\n.pds-padding-sm {\n padding: var(--pine-dimension-sm);\n}\n\n.pds-padding-md {\n padding: var(--pine-dimension-md);\n}\n\n.pds-padding-lg {\n padding: var(--pine-dimension-lg);\n}\n\n.pds-padding-xl {\n padding: var(--pine-dimension-xl);\n}\n\n.pds-padding-xxl {\n padding: var(--pine-dimension-2xl);\n}\n\n// Display helpers\n.pds-box-display-flex {\n display: flex;\n}\n\n.pds-box-display-inline-flex {\n display: inline-flex;\n}\n\n// Flex Direction helpers\n.pds-box-direction-row {\n flex-direction: row;\n}\n\n.pds-box-direction-column {\n flex-direction: column;\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { BoxColumnType, BoxTShirtSizeType, BoxShadowSizeType } from '../../utils/types';\n\n@Component({\n tag: 'pds-box',\n styleUrl: 'pds-box.scss',\n})\nexport class PdsBox {\n /\n Defines the vertical alignment of the box items.\n * @defaultValue start\n /\n @Prop() alignItems?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n If `true`, the box will be sized to fit its contents.\n /\n @Prop() auto?: boolean;\n\n /\n Defines the background-color of the box.\n /\n @Prop() backgroundColor?: string;\n\n /\n If `true`, the box will have a border.\n /\n @Prop() border? = false;\n\n /\n Defines the border color of the box.\n /\n @Prop() borderColor?: string;\n\n /\n Defines how rounded the box corners are.\n * @defaultValue none\n /\n @Prop() borderRadius?: `none` \| `xs`\| `sm` \| `md` \| `lg` \| `circle`;\n\n /\n Defines the orientation of the box items.\n * @defaultValue row\n /\n @Prop() direction?: `row` \| `column`;\n\n /\n Defines the display style of the box.\n * @defaultValue flex\n /\n @Prop() display?: `flex` \| `inline-flex` \| `block` \| `inline-block`;\n\n /\n If `true`, sets the box `max-width` to `100%`.\n /\n @Prop() fit?: boolean;\n\n /\n Defines the spacing between the box items.\n * @defaultValue none\n /\n @Prop() gap?: BoxTShirtSizeType;\n\n /\n Defines how a box will grow or shrink to fit the space available in its container.\n * @defaultValue none\n /\n @Prop() flex?: `none` \| `grow` \| `shrink`;\n\n /\n Defines the horizontal alignment of the box items.\n * @defaultValue start\n /\n @Prop() justifyContent?: `start` \| `center` \| `end` \| `space-between` \| `space-around`;\n\n /\n The minimum height of the row. Used in conjunction with alignment props\n /\n @Prop() minHeight?: string;\n\n /\n The minimum width of the row. Used in conjunction with alignment props\n /\n @Prop() minWidth?: string;\n\n /\n Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offset?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetXs?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetSm?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetMd?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetLg?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetXl?: BoxColumnType;\n\n /\n Defines the spacing between the box items.\n * @defaultValue none\n /\n @Prop() padding?: BoxTShirtSizeType;\n\n /\n Defines the box shadow.\n * @defaultValue none\n /\n @Prop() shadow?: BoxShadowSizeType;\n\n /\n Size of the column for all screen sizes that are not explicitly set.\n /\n @Prop() size?: BoxColumnType;\n\n /\n At screen sizes less than the `XS` breakpoint, this will take the number of columns specified.\n /\n @Prop() sizeXs?: BoxColumnType;\n\n /\n At screen sizes greater than the `SM` breakpoint, this will take the number of columns specified.\n /\n @Prop() sizeSm?: BoxColumnType;\n\n /\n At screen sizes greater than the `MD` breakpoint, this will take the number of columns specified.\n /\n @Prop() sizeMd?: BoxColumnType;\n\n /\n At screen sizes greater than the `LG` breakpoint, this will take the number of columns specified.\n /\n @Prop() sizeLg?: BoxColumnType;\n\n /\n At screen sizes greater than the `XL` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeXl?: BoxColumnType;\n\n render() {\n const boxClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.auto ? 'pds-box--auto' : ''}\n ${this.border ? 'pds-box--border' : ''}\n ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}\n ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}\n ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}\n ${this.fit ? 'pds-box--fit' : ''}\n ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}\n ${this.flex !== undefined && this.flex.trim() !== '' ? `pds-box--flex-${this.flex}` : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}\n ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}\n ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}\n ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}\n ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}\n ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}\n ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}\n ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}\n ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}\n ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}\n ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}\n ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}\n ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}\n ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}\n ${this.size == undefined &&\n this.sizeSm == undefined &&\n this.sizeMd == undefined &&\n this.sizeLg == undefined &&\n this.sizeXl == undefined ? 'pds-box' : ''}\n `;\n\n const boxInlineStyles = {\n ...(this.backgroundColor && { '--color-background-box': this.backgroundColor }),\n ...(this.borderColor && { '--color-border-box': this.borderColor }),\n ...(this.minHeight && { '--sizing-min-height-box': this.minHeight }),\n ...(this.minWidth && { '--sizing-min-height-box': this.minWidth }),\n };\n\n return (\n <Host class={boxClasses} style={boxInlineStyles}>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pds-box.entry.js","mappings":"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","names":[],"sources":["src/components/pds-box/pds-box.scss?tag=pds-box","src/components/pds-box/pds-box.tsx"],"sourcesContent":["@import './pds-box.mixins';\n\npds-box {\n --border-width-default: var(--pine-border-width-thin);\n --color-background-box: inherit;\n --color-border-box: inherit;\n\n display: block;\n}\n\n[class='pds-box'] {\n background-color: var(--color-background-box);\n box-sizing: border-box;\n display: inline-flex;\n min-height: var(--sizing-min-height-box);\n min-width: var(--sizing-min-width-box);\n\n // The immediate child of the row will fit the width of the row\n .pds-row > & {\n position: relative;\n width: 100%;\n\n &.pds-box--auto {\n width: auto;\n }\n }\n}\n\n// Spacing mixin\n$pine-spacing-tokens: (\n xxs: 4px,\n xs: 8px,\n sm: 16px,\n md: 24px,\n lg: 36px,\n xl: 48px,\n xxl: 64px,\n);\n\n// Generate spacing classes\n@include generate-spacing-classes(false, $pine-spacing-tokens);\n@include generate-spacing-classes('top', $pine-spacing-tokens);\n@include generate-spacing-classes('right', $pine-spacing-tokens);\n@include generate-spacing-classes('left', $pine-spacing-tokens);\n@include generate-spacing-classes('bottom', $pine-spacing-tokens);\n\n// Base offset classes\n@include generate-column-offsets(false, 12);\n\n// Responsive offset classes\n@media (max-width: 575px) {\n @include generate-column-offsets('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-column-offsets('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-column-offsets('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-column-offsets('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-column-offsets('xl', 12);\n}\n\n\n// Base column width classes\n@include generate-columns(false, 12);\n\n// Responsive column width classes\n@media (max-width: 575px) {\n @include generate-columns('xs', 12);\n}\n\n@media (min-width: 576px) {\n @include generate-columns('sm', 12);\n}\n\n@media (min-width: 768px) {\n @include generate-columns('md', 12);\n}\n\n@media (min-width: 992px) {\n @include generate-columns('lg', 12);\n}\n\n@media (min-width: 1200px) {\n @include generate-columns('xl', 12);\n}\n\n.pds-box {\n flex-basis: 0;\n flex-grow: 1;\n}\n\n.pds-box--auto {\n flex: 0 0 var(--sizing-min-width-box, fit-content);\n min-width: auto;\n width: auto;\n}\n\n.pds-box--fit {\n max-width: 100%;\n min-width: 100%;\n width: 100%;\n}\n\n.pds-box--border {\n border-color: var(--color-border-box, var(--pine-color-grey-300));\n border-style: solid;\n border-width: var(--border-width-default);\n}\n\n// Display helpers\n.pds-box--display-flex {\n display: flex;\n}\n\n.pds-box--display-inline-flex {\n display: inline-flex;\n}\n\n.pds-box--display-block {\n display: block;\n}\n\n.pds-box--display-inline-block {\n display: inline-block;\n}\n\n// Flex helpers\n.pds-box--flex-none {\n flex: 0 0 auto;\n}\n\n.pds-box--flex-grow {\n flex: 1 1 auto\n}\n\n.pds-box--flex-shrink {\n flex: 0 0 auto;\n}\n\n// Border radius helpers\n.pds-border-radius-none {\n border-radius: 0;\n}\n\n.pds-border-radius-xs {\n border-radius: var(--pine-dimension-2xs);\n}\n\n.pds-border-radius-sm {\n border-radius: var(--pine-dimension-xs);\n}\n\n.pds-border-radius-md {\n border-radius: var(--pine-dimension-100);\n}\n\n.pds-border-radius-lg {\n border-radius: var(--pine-dimension-sm);\n}\n\n.pds-border-radius-circle {\n border-radius: var(--pine-border-radius-full);\n}\n\n// Box shadow helpers\n.pds-shadow-050 {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-100 {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-150 {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-200 {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n.pds-shadow-300 {\n box-shadow: var(--pine-box-shadow-300);\n}\n\n.pds-shadow-400 {\n box-shadow: var(--pine-box-shadow-400);\n}\n\n.pds-shadow-500 {\n box-shadow: var(--pine-box-shadow-500);\n}\n\n\n.pds-shadow-xs {\n box-shadow: var(--pine-box-shadow-050);\n}\n\n.pds-shadow-sm {\n box-shadow: var(--pine-box-shadow-100);\n}\n\n.pds-shadow-md {\n box-shadow: var(--pine-box-shadow-150);\n}\n\n.pds-shadow-lg {\n box-shadow: var(--pine-box-shadow-200);\n}\n\n// Gap helpers\n.pds-box-gap-none {\n gap: 0;\n}\n\n.pds-box-gap-xxs {\n gap: var(--pine-dimension-2xs);\n}\n\n.pds-box-gap-xs {\n gap: var(--pine-dimension-xs);\n}\n\n.pds-box-gap-sm {\n gap: var(--pine-dimension-sm);\n}\n\n.pds-box-gap-md {\n gap: var(--pine-dimension-md);\n}\n\n.pds-box-gap-lg {\n gap: var(--pine-dimension-lg);\n}\n\n.pds-box-gap-xl {\n gap: var(--pine-dimension-xl);\n}\n\n.pds-box-gap-xxl {\n gap: var(--pine-dimension-2xl);\n}\n\n// Spacing helpers\n.pds-padding-none {\n padding: 0;\n}\n\n.pds-padding-xxs {\n padding: var(--pine-dimension-2xs);\n}\n\n.pds-padding-xs {\n padding: var(--pine-dimension-xs);\n}\n\n.pds-padding-sm {\n padding: var(--pine-dimension-sm);\n}\n\n.pds-padding-md {\n padding: var(--pine-dimension-md);\n}\n\n.pds-padding-lg {\n padding: var(--pine-dimension-lg);\n}\n\n.pds-padding-xl {\n padding: var(--pine-dimension-xl);\n}\n\n.pds-padding-xxl {\n padding: var(--pine-dimension-2xl);\n}\n\n.pds-padding-block-none {\n padding-block: var(--pine-dimension-none);\n}\n\n.pds-padding-block-xxs {\n padding-block: var(--pine-dimension-2xs);\n}\n\n.pds-padding-block-xs {\n padding-block: var(--pine-dimension-xs);\n}\n\n.pds-padding-block-sm {\n padding-block: var(--pine-dimension-sm);\n}\n\n.pds-padding-block-md {\n padding-block: var(--pine-dimension-md);\n}\n\n.pds-padding-block-lg {\n padding-block: var(--pine-dimension-lg);\n}\n\n.pds-padding-block-xl {\n padding-block: var(--pine-dimension-xl);\n}\n\n.pds-padding-block-xxl {\n padding-block: var(--pine-dimension-2xl);\n}\n\n.pds-padding-inline-none {\n padding-inline: var(--pine-dimension-none);\n}\n\n.pds-padding-inline-xxs {\n padding-inline: var(--pine-dimension-2xs);\n}\n\n.pds-padding-inline-xs {\n padding-inline: var(--pine-dimension-xs);\n}\n\n.pds-padding-inline-sm {\n padding-inline: var(--pine-dimension-sm);\n}\n\n.pds-padding-inline-md {\n padding-inline: var(--pine-dimension-md);\n}\n\n.pds-padding-inline-lg {\n padding-inline: var(--pine-dimension-lg);\n}\n\n.pds-padding-inline-xl {\n padding-inline: var(--pine-dimension-xl);\n}\n\n.pds-padding-inline-xxl {\n padding-inline: var(--pine-dimension-2xl);\n}\n\n// Display helpers\n.pds-box-display-block {\n display: block;\n}\n\n.pds-box-display-inline-block {\n display: inline-block;\n}\n\n.pds-box-display-flex {\n display: flex;\n}\n\n.pds-box-display-inline-flex {\n display: inline-flex;\n}\n\n// Flex Direction helpers\n.pds-box-direction-row {\n flex-direction: row;\n}\n\n.pds-box-direction-column {\n flex-direction: column;\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n justify-content: start;\n}\n\n.pds-justify-content-center {\n justify-content: center;\n}\n\n.pds-justify-content-end {\n justify-content: end;\n}\n\n.pds-justify-content-space-between {\n justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n align-items: start;\n}\n\n.pds-align-items-center {\n align-items: center;\n}\n\n.pds-align-items-end {\n align-items: end;\n}\n\n.pds-align-items-stretch {\n align-items: stretch;\n}\n\n.pds-align-items-baseline {\n align-items: baseline;\n}\n\n// Align Self helpers\n.pds-align-self-start {\n align-self: start;\n}\n\n.pds-align-self-center {\n align-self: center;\n}\n\n.pds-align-self-end {\n align-self: end;\n}\n\n.pds-align-self-baseline {\n align-self: baseline;\n}\n\n.pds-align-self-stretch {\n align-self: stretch;\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nimport { BoxColumnType, BoxTShirtSizeType, BoxShadowSizeType } from '../../utils/types';\n\n@Component({\n tag: 'pds-box',\n styleUrl: 'pds-box.scss',\n})\nexport class PdsBox {\n /\n Defines how items within the box are aligned.\n * @defaultValue start\n /\n @Prop() alignItems?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n Defines how the box is aligned within its container.\n * @defaultValue start\n /\n @Prop() alignSelf?: `start` \| `center` \| `end` \| `baseline` \| `stretch`;\n\n /\n If `true`, the box will be sized to fit its contents.\n /\n @Prop() auto?: boolean;\n\n /\n Defines the background-color of the box.\n /\n @Prop() backgroundColor?: string;\n\n /\n If `true`, the box will have a border.\n /\n @Prop() border? = false;\n\n /\n Defines the border color of the box.\n /\n @Prop() borderColor?: string;\n\n /\n Defines how rounded the box corners are.\n * @defaultValue none\n /\n @Prop() borderRadius?: `none` \| `xs`\| `sm` \| `md` \| `lg` \| `circle`;\n\n /\n Defines the orientation of the box items.\n * @defaultValue row\n /\n @Prop() direction?: `row` \| `column`;\n\n /\n Defines the display style of the box.\n * @defaultValue flex\n /\n @Prop() display?: `flex` \| `inline-flex` \| `block` \| `inline-block`;\n\n /\n If `true`, sets the box `max-width` to `100%`.\n /\n @Prop() fit?: boolean;\n\n /\n Defines the spacing between the box items.\n * @defaultValue none\n /\n @Prop() gap?: BoxTShirtSizeType;\n\n /\n Defines how a box will grow or shrink to fit the space available in its container.\n * @defaultValue none\n /\n @Prop() flex?: `none` \| `grow` \| `shrink`;\n\n /\n Defines the horizontal alignment of the box items.\n * @defaultValue start\n /\n @Prop() justifyContent?: `start` \| `center` \| `end` \| `space-between` \| `space-around`;\n\n /\n The minimum height of the row. Used in conjunction with alignment props\n /\n @Prop() minHeight?: string;\n\n /\n The minimum width of the row. Used in conjunction with alignment props\n /\n @Prop() minWidth?: string;\n\n /\n Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offset?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetXs?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetSm?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetMd?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetLg?: BoxColumnType;\n\n /\n Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns.\n /\n @Prop() offsetXl?: BoxColumnType;\n\n /\n Defines the spacing between the box items.\n * @defaultValue none\n /\n @Prop() padding?: BoxTShirtSizeType;\n\n /\n Defines the top and bottom spacing.\n * @defaultValue none\n /\n @Prop() paddingBlock?: BoxTShirtSizeType;\n\n /\n Defines the left and right spacing.\n * @defaultValue none\n /\n @Prop() paddingInline?: BoxTShirtSizeType;\n\n /\n Defines the box shadow.\n * @defaultValue none\n /\n @Prop() shadow?: BoxShadowSizeType;\n\n /\n Size of the column for all screen sizes that are not explicitly set.\n /\n @Prop() size?: BoxColumnType;\n\n /\n At screen sizes less than the `XS` breakpoint, this will take the number of columns specified.\n /\n @Prop() sizeXs?: BoxColumnType;\n\n /\n At screen sizes greater than the `SM` breakpoint, this will take the number of columns specified.\n /\n @Prop() sizeSm?: BoxColumnType;\n\n /\n At screen sizes greater than the `MD` breakpoint, this will take the number of columns specified.\n /\n @Prop() sizeMd?: BoxColumnType;\n\n /\n At screen sizes greater than the `LG` breakpoint, this will take the number of columns specified.\n /\n @Prop() sizeLg?: BoxColumnType;\n\n /\n At screen sizes greater than the `XL` breakpoint, this will take the number of columns specified.\n */\n @Prop() sizeXl?: BoxColumnType;\n\n render() {\n const boxClasses = `\n ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n ${this.alignSelf !== undefined && this.alignSelf.trim() !== '' ? `pds-align-self-${this.alignSelf}` : ''}\n ${this.auto ? 'pds-box--auto' : ''}\n ${this.border ? 'pds-box--border' : ''}\n ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}\n ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}\n ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}\n ${this.fit ? 'pds-box--fit' : ''}\n ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}\n ${this.flex !== undefined && this.flex.trim() !== '' ? `pds-box--flex-${this.flex}` : ''}\n ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}\n ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}\n ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}\n ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}\n ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}\n ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}\n ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}\n ${this.paddingBlock !== undefined && this.paddingBlock.trim() !== '' ? `pds-padding-block-${this.paddingBlock}` : ''}\n ${this.paddingInline !== undefined && this.paddingInline.trim() !== '' ? `pds-padding-inline-${this.paddingInline}` : ''}\n ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}\n ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}\n ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}\n ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}\n ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}\n ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}\n ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}\n ${this.size == undefined &&\n this.sizeSm == undefined &&\n this.sizeMd == undefined &&\n this.sizeLg == undefined &&\n this.sizeXl == undefined ? 'pds-box' : ''}\n `;\n\n const boxInlineStyles = {\n ...(this.backgroundColor && { '--color-background-box': this.backgroundColor }),\n ...(this.borderColor && { '--color-border-box': this.borderColor }),\n ...(this.minHeight && { '--sizing-min-height-box': this.minHeight }),\n ...(this.minWidth && { '--sizing-min-height-box': this.minWidth }),\n };\n\n return (\n <Host class={boxClasses} style={boxInlineStyles}>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/pds-button.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b1696fed.js';
 import { h as hasShadowDom } from './utils-5e425aaf.js';
-import { f as caretDown } from './index-858623fe.js';
+import { f as caretDown } from './index-24f87b75.js';
-const pdsButtonCss = ":host{--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--button-loader-color:var(--color-text-default);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host([full-width=true]){display:-ms-flexbox;display:flex;width:100%}:host([full-width=true]) button{-ms-flex-pack:center;justify-content:center;width:100%}:host([loading=true]){cursor:wait;pointer-events:none}.pds-button{--pds-loader-color:var(--color-text-default);-ms-flex-align:center;align-items:center;background-color:var(--color-background-default);border:var(--pine-border);border-color:var(--color-border-default);border-radius:var(--pine-border-radius-full);color:var(--color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);min-height:40px;padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-button pds-icon{color:currentColor;fill:currentColor;-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs)}.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-focus-ring);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);pointer-events:none}.pds-button--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive:focus-visible{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-danger);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button--secondary,.pds-button--disclosure{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-default:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--disclosure pds-icon{-webkit-margin-end:var(--pine-dimension-none);margin-inline-end:var(--pine-dimension-none);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;--button-loader-color:inherit;border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}.pds-button__content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;position:relative}.pds-button__text{display:-ms-inline-flexbox;display:inline-flex}.pds-button__text--hidden,.pds-button__icon--hidden{opacity:0}.pds-button__loader{height:var(--pine-dimension-250);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--pine-dimension-250)}.pds-button--loading{cursor:wait;pointer-events:none}.pds-button--loading .pds-button__loader pds-loader{--loader-color:var(--button-loader-color)}";
+const pdsButtonCss = ":host{--button-dimension:40px;--color-border-default:transparent;--color-border-disabled:transparent;--color-border-focus:transparent;--color-border-hover:transparent;--button-loader-color:var(--color-text-default);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host([full-width=true]){display:-ms-flexbox;display:flex;width:100%}:host([full-width=true]) button{-ms-flex-pack:center;justify-content:center;width:100%}:host([full-width=true]) .pds-button__content{-ms-flex-pack:center;justify-content:center;text-align:center}:host([loading=true]){cursor:wait;pointer-events:none}:host([disabled=true]){pointer-events:none}.pds-button{--pds-loader-color:var(--color-text-default);-ms-flex-align:center;align-items:center;background-color:var(--color-background-default);border:var(--pine-border);border-color:var(--color-border-default);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);min-height:var(--button-dimension);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);text-decoration:none}.pds-button pds-icon{color:currentColor;fill:currentColor;-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs)}.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-focus-ring);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);pointer-events:none}.pds-button--primary{--color-background-default:var(--pine-color-primary);--color-background-hover:var(--pine-color-primary-hover);--color-background-disabled:var(--pine-color-primary-disabled);--color-border-default:var(--pine-color-primary);--color-border-hover:var(--pine-color-primary-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-primary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--accent{--color-background-default:var(--pine-color-accent);--color-background-hover:var(--pine-color-accent-hover);--color-background-disabled:var(--pine-color-accent-disabled);--color-border-default:var(--pine-color-accent);--color-border-hover:var(--pine-color-accent-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-accent-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive{--color-background-default:var(--pine-color-danger);--color-background-hover:var(--pine-color-danger-hover);--color-background-disabled:var(--pine-color-danger-disabled);--color-border-default:var(--pine-color-danger);--color-border-hover:var(--pine-color-danger-hover);--color-text-default:var(--pine-color-text-primary);--color-text-disabled:var(--pine-color-text-danger-disabled);--color-outline:var(--pine-color-focus-ring-danger);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive:focus-visible{--box-shadow-focus:0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-danger);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-button--secondary,.pds-button--disclosure{--color-background-default:var(--pine-color-secondary);--color-background-hover:var(--pine-color-secondary-hover);--color-background-disabled:var(--pine-color-secondary-disabled);--color-border-disabled:var(--pine-color-border-disabled);--color-border-focus:var(--pine-color-border);--color-border-hover:var(--pine-color-border-hover);--color-border-default:var(--pine-color-border);--color-text-default:var(--pine-color-text-secondary);--color-text-disabled:var(--pine-color-text-secondary-disabled);--color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--disclosure pds-icon{-webkit-margin-end:var(--pine-dimension-none);margin-inline-end:var(--pine-dimension-none);-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-button--unstyled{--color-background-default:transparent;--color-background-hover:transparent;--color-background-disabled:transparent;--color-text-default:inherit;--button-loader-color:inherit;border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}.pds-button__content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;position:relative;width:100%}.pds-button__text{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex}.pds-button__text--hidden,.pds-button__icon--hidden{opacity:0}.pds-button__loader{height:var(--pine-dimension-250);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--pine-dimension-250)}.pds-button--loading{cursor:wait;pointer-events:none}.pds-button--loading .pds-button__loader pds-loader{--loader-color:var(--button-loader-color)}.pds-button--icon-only{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);height:var(--button-dimension);-ms-flex-pack:center;justify-content:center;min-height:var(--button-dimension);min-width:var(--button-dimension);padding:var(--pine-dimension-xs);width:var(--button-dimension)}.pds-button--icon-only .pds-button__content{height:100%;-ms-flex-pack:center;justify-content:center;width:100%}.pds-button--icon-only pds-icon{margin:0}.pds-button--icon-only .pds-button__text--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}";
 const PdsButtonStyle0 = pdsButtonCss;
 const PdsButton = class {
@@ -14,7 +14,7 @@ const PdsButton = class {
                 ev.preventDefault();
                 return;
             }
-            if (this.type != 'button') {
+            if (!this.href && this.type != 'button') {
                 // If button clicked IS NOT associated with a form
                 if (hasShadowDom(this.el)) {
                     const form = this.el.closest('form');
@@ -34,11 +34,14 @@ const PdsButton = class {
         this.componentId = undefined;
         this.disabled = false;
         this.fullWidth = false;
+        this.href = undefined;
         this.icon = null;
+        this.iconOnly = false;
         this.loading = false;
         this.name = undefined;
-        this.value = undefined;
+        this.target = undefined;
         this.type = 'button';
+        this.value = undefined;
         this.variant = 'primary';
     }
     classNames() {
@@ -46,16 +49,33 @@ const PdsButton = class {
         if (this.variant) {
             classNames.push('pds-button--' + this.variant);
         }
+        if (this.iconOnly) {
+            classNames.push('pds-button--icon-only');
+        }
         if (this.loading) {
             classNames.push('pds-button--loading');
         }
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '6b9f3c286fe8e74703d482df6ae49e770a26d3f4', "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h("button", { key: 'ba8f5ce2e101875de773d4967dc7e4e61e0d6e1b', "aria-busy": this.loading ? 'true' : null, "aria-live": this.loading ? 'polite' : null, class: this.classNames(), disabled: this.disabled, name: this.name, part: "button", type: this.type, value: this.value }, h("div", { key: 'fdb0c43a4688a271ac5f4c261c12891a1b798e78', class: "pds-button__content" }, this.icon && this.variant !== 'disclosure' &&
-            h("pds-icon", { key: '37e212a7f08f0734cc53644fd776667c70aa7fc5', class: this.loading ? 'pds-button__icon--hidden' : '', name: this.icon, part: "icon" }), h("span", { key: 'a7969b2c2cd18ab615d5070428050d513bb659b8', class: `pds-button__text ${this.loading ? 'pds-button__text--hidden' : ''}` }, h("slot", { key: 'a0d2a610c2b4dfc2d5fdf1acb715b002a1927aa6' })), this.loading &&
-            h("span", { key: 'f889c60c94baf9c8c73b31de76482e09515c2cf0', class: "pds-button__loader" }, h("pds-loader", { key: '372ff4bc2f3dd3a75015d341f41689b07bd237e0', "is-loading": true, size: "var(--pine-font-size-body-2xl)", variant: "spinner" }, "Loading...")), this.variant === 'disclosure' &&
-            h("pds-icon", { key: 'd0e0f35a0b44f69138bf9a78989cf1a5bbdec135', class: this.loading ? 'pds-button__icon--hidden' : '', icon: caretDown, part: "caret" })))));
+        // Common props for both button and anchor elements
+        const commonProps = {
+            class: this.classNames(),
+            part: 'button',
+        };
+        const attributes = () => {
+            if (this.href) {
+                return Object.assign(Object.assign({}, commonProps), { href: this.disabled ? null : this.href, target: this.target });
+            }
+            return Object.assign(Object.assign({}, commonProps), { 'aria-busy': this.loading ? 'true' : null, 'aria-live': this.loading ? 'polite' : null, 'disabled': this.disabled, 'name': this.name, 'type': this.type, 'value': this.value });
+        };
+        const ContentElement = this.href ? 'a' : 'button';
+        // Hide text when loading or iconOnly is true
+        const hideText = this.loading || this.iconOnly;
+        const content = (h("div", { class: "pds-button__content", part: "button-content" }, this.icon && this.variant !== 'disclosure' &&
+            h("pds-icon", { class: this.loading ? 'pds-button__icon--hidden' : '', name: this.icon, part: "icon", "aria-hidden": "true" }), h("span", { class: `pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`, part: "button-text" }, h("slot", null)), this.loading && (h("span", { class: "pds-button__loader" }, h("pds-loader", { "is-loading": true, size: "var(--pine-font-size-body-2xl)", variant: "spinner" }, "Loading..."))), this.variant === 'disclosure' &&
+            h("pds-icon", { class: this.loading ? 'pds-button__icon--hidden' : '', icon: caretDown, part: "caret", "aria-hidden": "true" })));
+        return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, id: this.componentId, onClick: this.handleClick, variant: this.variant }, h(ContentElement, Object.assign({}, attributes()), content)));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/pds-button.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-button.entry.js","mappings":"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","names":[],"sources":["src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":[":host {\n --color-border-default: transparent;\n --color-border-disabled: transparent;\n --color-border-focus: transparent;\n --color-border-hover: transparent;\n --button-loader-color: var(--color-text-default);\n\n display: inline-flex;\n vertical-align: middle;\n}\n\n:host([full-width=\"true\"]) {\n display: flex;\n width: 100%;\n\n button {\n justify-content: center;\n width: 100%;\n }\n}\n\n:host([loading=\"true\"]) {\n cursor: wait;\n pointer-events: none;\n}\n\n.pds-button {\n --pds-loader-color: var(--color-text-default);\n align-items: center;\n background-color: var(--color-background-default);\n border: var(--pine-border);\n border-color: var(--color-border-default);\n border-radius: var(--pine-border-radius-full);\n color: var(--color-text-default); // Set in the variant classes below\n cursor: pointer;\n display: flex;\n font: var(--pine-typography-body-brand-label);\n letter-spacing: var(--pine-letter-spacing);\n min-height: 40px;\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n\n pds-icon {\n color: currentColor;\n fill: currentColor;\n margin-inline-end: var(--pine-dimension-xs);\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-focus-ring);\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 pointer-events: none;\n }\n}\n\n.pds-button--primary {\n --color-background-default: var(--pine-color-primary);\n --color-background-hover: var(--pine-color-primary-hover);\n --color-background-disabled: var(--pine-color-primary-disabled);\n --color-border-default: var(--pine-color-primary);\n --color-border-hover: var(--pine-color-primary-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-primary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--accent {\n --color-background-default: var(--pine-color-accent);\n --color-background-hover: var(--pine-color-accent-hover);\n --color-background-disabled: var(--pine-color-accent-disabled);\n --color-border-default: var(--pine-color-accent);\n --color-border-hover: var(--pine-color-accent-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-accent-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--destructive {\n --color-background-default: var(--pine-color-danger);\n --color-background-hover: var(--pine-color-danger-hover);\n --color-background-disabled: var(--pine-color-danger-disabled);\n --color-border-default: var(--pine-color-danger);\n --color-border-hover: var(--pine-color-danger-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-danger-disabled);\n --color-outline: var(--pine-color-focus-ring-danger);\n --button-loader-color: var(--pine-color-text-primary);\n\n &:focus-visible {\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-danger);\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: var(--pine-color-secondary);\n --color-background-hover: var(--pine-color-secondary-hover);\n --color-background-disabled: var(--pine-color-secondary-disabled);\n --color-border-disabled: var(--pine-color-border-disabled);\n --color-border-focus: var(--pine-color-border);\n --color-border-hover: var(--pine-color-border-hover);\n --color-border-default: var(--pine-color-border);\n --color-text-default: var(--pine-color-text-secondary);\n --color-text-disabled: var(--pine-color-text-secondary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-secondary);\n\n &:hover {\n background-color: var(--pine-color-secondary-hover);\n }\n}\n\n.pds-button--disclosure {\n pds-icon {\n margin-inline-end: var(--pine-dimension-none);\n margin-inline-start: var(--pine-dimension-xs);\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 --button-loader-color: inherit;\n border-width: var(--pine-dimension-none);\n margin: var(--pine-dimension-none);\n min-height: auto;\n padding: var(--pine-dimension-none);\n width: inherit;\n}\n\n.pds-button__content {\n align-items: center;\n display: inline-flex;\n position: relative;\n}\n\n.pds-button__text {\n display: inline-flex;\n}\n\n.pds-button__text--hidden,\n.pds-button__icon--hidden {\n opacity: 0;\n}\n\n.pds-button__loader {\n height: var(--pine-dimension-250);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--pine-dimension-250);\n}\n\n.pds-button--loading {\n cursor: wait;\n pointer-events: none;\n\n .pds-button__loader {\n pds-loader {\n --loader-color: var(--button-loader-color);\n }\n }\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: ['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 Determines if the button should take up the full width of its container.\n * @defaultValue false\n /\n @Prop() fullWidth? = 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 Determines if the button is in a loading state.\n * When true, displays a loader and hides the button text.\n * @defaultValue false\n /\n @Prop() loading? = false;\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.loading) {\n ev.preventDefault();\n return;\n }\n\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 if (this.loading) {\n classNames.push('pds-button--loading');\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 aria-busy={this.loading ? 'true' : null}\n aria-live={this.loading ? 'polite' : null}\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 <div class=\"pds-button__content\">\n {this.icon && this.variant !== 'disclosure' &&\n <pds-icon\n class={this.loading ? 'pds-button__icon--hidden' : ''}\n name={this.icon}\n part=\"icon\"\n ></pds-icon>\n }\n\n <span class={`pds-button__text ${this.loading ? 'pds-button__text--hidden' : ''}`}>\n <slot />\n </span>\n\n {this.loading &&\n <span class=\"pds-button__loader\">\n <pds-loader\n is-loading={true}\n size=\"var(--pine-font-size-body-2xl)\"\n variant=\"spinner\"\n >\n Loading...\n </pds-loader>\n </span>\n }\n\n {this.variant === 'disclosure' &&\n <pds-icon\n class={this.loading ? 'pds-button__icon--hidden' : ''}\n icon={caretDown}\n part=\"caret\"\n ></pds-icon>\n }\n </div>\n </button>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pds-button.entry.js","mappings":"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","names":[],"sources":["src/components/pds-button/pds-button.scss?tag=pds-button&encapsulation=shadow","src/components/pds-button/pds-button.tsx"],"sourcesContent":[":host {\n --button-dimension: 40px;\n --color-border-default: transparent;\n --color-border-disabled: transparent;\n --color-border-focus: transparent;\n --color-border-hover: transparent;\n --button-loader-color: var(--color-text-default);\n\n display: inline-flex;\n vertical-align: middle;\n}\n\n:host([full-width=\"true\"]) {\n display: flex;\n width: 100%;\n\n button {\n justify-content: center;\n width: 100%;\n }\n\n .pds-button__content {\n justify-content: center;\n text-align: center;\n }\n}\n\n:host([loading=\"true\"]) {\n cursor: wait;\n pointer-events: none;\n}\n\n:host([disabled=\"true\"]) {\n pointer-events: none;\n}\n\n.pds-button {\n --pds-loader-color: var(--color-text-default);\n align-items: center;\n background-color: var(--color-background-default);\n border: var(--pine-border);\n border-color: var(--color-border-default);\n border-radius: var(--pine-border-radius-full);\n box-sizing: border-box;\n color: var(--color-text-default); // Set in the variant classes below\n cursor: pointer;\n display: flex;\n font: var(--pine-typography-body-brand-label);\n letter-spacing: var(--pine-letter-spacing);\n min-height: var(--button-dimension);\n padding: var(--pine-dimension-xs) var(--pine-dimension-sm);\n text-decoration: none;\n\n pds-icon {\n color: currentColor;\n fill: currentColor;\n margin-inline-end: var(--pine-dimension-xs);\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-focus-ring);\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 pointer-events: none;\n }\n}\n\n.pds-button--primary {\n --color-background-default: var(--pine-color-primary);\n --color-background-hover: var(--pine-color-primary-hover);\n --color-background-disabled: var(--pine-color-primary-disabled);\n --color-border-default: var(--pine-color-primary);\n --color-border-hover: var(--pine-color-primary-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-primary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--accent {\n --color-background-default: var(--pine-color-accent);\n --color-background-hover: var(--pine-color-accent-hover);\n --color-background-disabled: var(--pine-color-accent-disabled);\n --color-border-default: var(--pine-color-accent);\n --color-border-hover: var(--pine-color-accent-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-accent-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-primary);\n}\n\n.pds-button--destructive {\n --color-background-default: var(--pine-color-danger);\n --color-background-hover: var(--pine-color-danger-hover);\n --color-background-disabled: var(--pine-color-danger-disabled);\n --color-border-default: var(--pine-color-danger);\n --color-border-hover: var(--pine-color-danger-hover);\n --color-text-default: var(--pine-color-text-primary);\n --color-text-disabled: var(--pine-color-text-danger-disabled);\n --color-outline: var(--pine-color-focus-ring-danger);\n --button-loader-color: var(--pine-color-text-primary);\n\n &:focus-visible {\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-danger);\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: var(--pine-color-secondary);\n --color-background-hover: var(--pine-color-secondary-hover);\n --color-background-disabled: var(--pine-color-secondary-disabled);\n --color-border-disabled: var(--pine-color-border-disabled);\n --color-border-focus: var(--pine-color-border);\n --color-border-hover: var(--pine-color-border-hover);\n --color-border-default: var(--pine-color-border);\n --color-text-default: var(--pine-color-text-secondary);\n --color-text-disabled: var(--pine-color-text-secondary-disabled);\n --color-outline: var(--pine-color-focus-ring);\n --button-loader-color: var(--pine-color-text-secondary);\n\n &:hover {\n background-color: var(--pine-color-secondary-hover);\n }\n}\n\n.pds-button--disclosure {\n pds-icon {\n margin-inline-end: var(--pine-dimension-none);\n margin-inline-start: var(--pine-dimension-xs);\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 --button-loader-color: inherit;\n border-width: var(--pine-dimension-none);\n margin: var(--pine-dimension-none);\n min-height: auto;\n padding: var(--pine-dimension-none);\n width: inherit;\n}\n\n.pds-button__content {\n align-items: center;\n display: inline-flex;\n position: relative;\n width: 100%;\n}\n\n.pds-button__text {\n align-items: center;\n display: inline-flex;\n}\n\n.pds-button__text--hidden,\n.pds-button__icon--hidden {\n opacity: 0;\n}\n\n.pds-button__loader {\n height: var(--pine-dimension-250);\n left: 50%;\n position: absolute;\n top: 50%;\n transform: translate(-50%, -50%);\n width: var(--pine-dimension-250);\n}\n\n.pds-button--loading {\n cursor: wait;\n pointer-events: none;\n\n .pds-button__loader {\n pds-loader {\n --loader-color: var(--button-loader-color);\n }\n }\n}\n\n.pds-button--icon-only {\n align-items: center;\n border-radius: var(--pine-border-radius-full);\n height: var(--button-dimension);\n justify-content: center;\n min-height: var(--button-dimension);\n min-width: var(--button-dimension);\n padding: var(--pine-dimension-xs);\n width: var(--button-dimension);\n\n .pds-button__content {\n height: 100%;\n justify-content: center;\n width: 100%;\n }\n\n pds-icon {\n margin: 0;\n }\n\n .pds-button__text--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","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 button-content - Exposes the button content for styling.\n * @part button-text - Exposes the button text 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: ['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 Determines if the button should take up the full width of its container.\n * @defaultValue false\n /\n @Prop() fullWidth? = false;\n\n /\n If provided, renders the component as an anchor (`<a>`) element instead of a button.\n * When using href, button-specific props (type, name, value, loading) will be ignored.\n /\n @Prop() href?: string;\n\n /\n Displays an icon in the button.\n * @defaultValue null\n /\n @Prop() icon?: string = null;\n\n /\n When true, displays only the icon and visually hides the text (keeping it accessible).\n /\n @Prop() iconOnly? = false;\n\n /\n Determines if the button is in a loading state.\n * When true, displays a loader and hides the button text.\n * @defaultValue false\n /\n @Prop() loading? = false;\n\n /\n Provides the button with a submittable name.\n /\n @Prop() name?: string;\n\n /\n Specifies where to open the linked document when href is provided.\n * Only applies when href is set.\n /\n @Prop() target?: '_blank' \| '_self' \| '_parent' \| '_top';\n\n /\n Provides button with a type.\n * @defaultValue button\n /\n @Prop() type?: 'button' \| 'reset' \| 'submit' = 'button';\n\n /\n Provides button with a submittable value\n /\n @Prop() value?: string;\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.loading) {\n ev.preventDefault();\n return;\n }\n\n if (!this.href && 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 if (this.iconOnly) {\n classNames.push('pds-button--icon-only');\n }\n\n if (this.loading) {\n classNames.push('pds-button--loading');\n }\n\n return classNames.join(' ');\n }\n\n render() {\n // Common props for both button and anchor elements\n const commonProps = {\n class: this.classNames(),\n part: 'button',\n };\n\n const attributes = () => {\n if (this.href) {\n return {\n // Anchor element props\n ...commonProps,\n href: this.disabled ? null : this.href,\n target: this.target,\n };\n }\n\n return {\n // Button element props\n ...commonProps,\n 'aria-busy': this.loading ? 'true' : null,\n 'aria-live': this.loading ? 'polite' : null,\n 'disabled': this.disabled,\n 'name': this.name,\n 'type': this.type,\n 'value': this.value,\n };\n };\n\n const ContentElement = this.href ? 'a' : 'button';\n\n // Hide text when loading or iconOnly is true\n const hideText = this.loading \|\| this.iconOnly;\n\n const content = (\n <div class=\"pds-button__content\" part=\"button-content\">\n {this.icon && this.variant !== 'disclosure' &&\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} name={this.icon} part=\"icon\" aria-hidden=\"true\"></pds-icon>\n }\n\n <span class={`pds-button__text ${hideText ? 'pds-button__text--hidden' : ''}`} part=\"button-text\">\n <slot />\n </span>\n\n {this.loading && (\n <span class=\"pds-button__loader\">\n <pds-loader is-loading={true} size=\"var(--pine-font-size-body-2xl)\" variant=\"spinner\">\n Loading...\n </pds-loader>\n </span>\n )}\n\n {this.variant === 'disclosure' &&\n <pds-icon class={this.loading ? 'pds-button__icon--hidden' : ''} icon={caretDown} part=\"caret\" aria-hidden=\"true\"></pds-icon>\n }\n </div>\n );\n\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 <ContentElement {...attributes()}>\n {content}\n </ContentElement>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/pds-checkbox.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host } from './index-b1696fed.js';
 import { m as messageId, a as assignDescription } from './form-1b7b69e3.js';
-import { b as danger } from './index-858623fe.js';
+import { b as danger } from './index-24f87b75.js';
 const labelCss = ":host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}";
 const PdsCheckboxStyle0 = labelCss;
@@ -60,9 +60,9 @@ const PdsCheckbox = class {
         return classNames.join('  ');
     }
     render() {
-        return (h(Host, { key: 'd552ef5967613280f3399015c17d90d2264bee26', class: this.classNames() }, h("label", { key: '7ed49fd6c942d3765ce5c70048fe53252b532f75', htmlFor: this.componentId }, h("input", { key: 'b1d59fc429e9bd92bd7ff0e4edb79b326416d9fb', 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 }), this.label), this.helperMessage &&
-            h("div", { key: '2bf16b8f87910f727e19b2b3a0df5190f80b9c9b', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: 'dde8ede862aaaf585fe6d1e907b0a78309a59e58', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'b666e9ccbeb8653271da75cdf81419fbad6028e2', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: '9e2789028b697aa440ff90f44e6899d19403b825', class: this.classNames() }, h("label", { key: '79fdb66797651cc5cf0c7059495df8d7ce61a2af', htmlFor: this.componentId }, h("input", { key: '755975e58732cf844a641faf81f89adc6331c8b8', 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("span", { key: 'ef7401eb659719a2d5dc0d9d5b85e112497e4cf6', class: this.labelHidden ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: '76a928518577f4b41c6ff38c9fdf5d6a82022a1e', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'd656cc52b4c02bc7f021ff33649a4f0e9b10cb5d', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '59fb3ffc4271ef36a5530bdf8db870a99c876fa7', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get watchers() { return {
         "checked": ["updateIndeterminate"]

package/dist/esm/pds-checkbox.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pds-checkbox.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,oTAAoT,CAAC;AACtU,0BAAe,QAAQ;;ACDvB,MAAM,cAAc,GAAG,i/GAAi/G,CAAC;AACzgH,0BAAe,cAAc;;MCShB,WAAW;;;;;QA0Ed,yBAAoB,GAAG,CAAC,CAAQ;YACtC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;YAE9B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;gBAC1B,OAAO,EAAE,MAAM,CAAC,OAAO;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;SACJ,CAAA;QAEO,gBAAW,GAAG;YACpB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBACzB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;SACJ,CAAA;uBAzF4C,KAAK;;;;;;;;;;;;;IAkElD,mBAAmB;QACjB,IAAI,CAAC,aAAa,GAAG,SAAS,CAAA;KAC/B;IAuBO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE;YAAE,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAAE;QACpD,IAAI,IAAI,CAAC,aAAa,EAAE;YAAE,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;SAAE;QAChE,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAAE;QAEtD,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAC5B,8DAAO,OAAO,EAAE,IAAI,CAAC,WAAW,IAC9B,8DACE,IAAI,EAAC,UAAU,sBACG,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,EACD,IAAI,CAAC,KAAK,CACL,EACP,IAAI,CAAC,aAAa;YACjB,4DACE,KAAK,EAAE,uBAAuB,EAC9B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf,EAEP,IAAI,CAAC,YAAY;YAChB,4DACE,KAAK,EAAE,oDAAoD,EAC3D,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAErB,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,OAAO,GAAG,EACtC,IAAI,CAAC,YAAY,CACd,CAEH,EACP;KACH;;;;;;;;;","names":[],"sources":["src/global/styles/utils/label.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":[":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n --box-shadow-focus-invalid: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\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(--pine-color-border-danger);\n\n &:checked {\n background: var( --pine-color-danger);\n\n &:hover {\n background: var(--pine-color-danger-hover);\n border-color: var(--pine-color-border-danger-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(--pine-color-text-message-danger);\n }\n}\n\n:host(.is-indeterminate) {\n input {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n border: 1px solid var(--pine-color-secondary);\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: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: var(--pine-dimension-2xs);\n flex: none;\n height: var(--pine-dimension-sm);\n margin: 0;\n margin-block-start: var(--pine-dimension-025);\n position: relative;\n width: var(--pine-dimension-sm);\n\n &:hover {\n background: var(--pine-color-background-container-hover);\n border: var(--pine-border-hover);\n }\n\n &:checked {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent-hover);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n border: 1px solid var(--pine-color-secondary);\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(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n\n &:checked {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n\n &::after {\n border-color: var(--pine-color-grey-300);\n }\n }\n\n + label {\n cursor: not-allowed;\n }\n\n ~ .pds-checkbox__message {\n color: var(--pine-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 display: flex;\n gap: var(--pine-dimension-xs);\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(--pine-color-text-message);\n margin-block-start: 6px;\n margin-inline-start: var(--pine-dimension-md);\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 { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-checkbox',\n styleUrls: ['../../global/styles/utils/label.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 <label htmlFor={this.componentId}>\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 {this.label}\n </label>\n {this.helperMessage &&\n <div\n class={'pds-checkbox__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-checkbox__message pds-checkbox__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"pds-checkbox.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,oTAAoT,CAAC;AACtU,0BAAe,QAAQ;;ACDvB,MAAM,cAAc,GAAG,i/GAAi/G,CAAC;AACzgH,0BAAe,cAAc;;MCShB,WAAW;;;;;QA0Ed,yBAAoB,GAAG,CAAC,CAAQ;YACtC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;YAE9B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;gBAC1B,OAAO,EAAE,MAAM,CAAC,OAAO;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;SACJ,CAAA;QAEO,gBAAW,GAAG;YACpB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC;gBACzB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;SACJ,CAAA;uBAzF4C,KAAK;;;;;;;;;;;;;IAkElD,mBAAmB;QACjB,IAAI,CAAC,aAAa,GAAG,SAAS,CAAA;KAC/B;IAuBO,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE;YAAE,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAAE;QACpD,IAAI,IAAI,CAAC,aAAa,EAAE;YAAE,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;SAAE;QAChE,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAAE;QAEtD,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAC5B,8DAAO,OAAO,EAAE,IAAI,CAAC,WAAW,IAC9B,8DACE,IAAI,EAAC,UAAU,sBACG,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,OAAO,EAAE,IAAI,CAAC,WAAW,GACzB,EACF,6DAAM,KAAK,EAAE,IAAI,CAAC,WAAW,GAAG,iBAAiB,GAAG,EAAE,IACnD,IAAI,CAAC,KAAK,CACN,CACD,EACP,IAAI,CAAC,aAAa;YACjB,4DACE,KAAK,EAAE,uBAAuB,EAC9B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf,EAEP,IAAI,CAAC,YAAY;YAChB,4DACE,KAAK,EAAE,oDAAoD,EAC3D,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAErB,iEAAU,IAAI,EAAE,MAAM,EAAE,IAAI,EAAC,OAAO,GAAG,EACtC,IAAI,CAAC,YAAY,CACd,CAEH,EACP;KACH;;;;;;;;;","names":[],"sources":["src/global/styles/utils/label.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":[":host {\n display: inline-block;\n}\n\n:host([aria-disabled=\"true\"]) label {\n color: var(--pine-color-text-label-disabled);\n}\n\n:host([aria-readonly=\"true\"]) {\n label {\n color: var(--pine-color-text-label-readonly);\n }\n}\n\nlabel {\n color: var(--pine-color-text-label);\n font: var(--pine-typography-body-medium);\n letter-spacing: var(--pine-letter-spacing);\n}\n",":host {\n --box-shadow-focus: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring);\n --box-shadow-focus-invalid: 0 0 0 1px #ffffff, 0 0 0 3px var(--pine-color-focus-ring-danger);\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(--pine-color-border-danger);\n\n &:checked {\n background: var( --pine-color-danger);\n\n &:hover {\n background: var(--pine-color-danger-hover);\n border-color: var(--pine-color-border-danger-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(--pine-color-text-message-danger);\n }\n}\n\n:host(.is-indeterminate) {\n input {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n border: 1px solid var(--pine-color-secondary);\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: var(--pine-color-background-container);\n border: var(--pine-border);\n border-radius: var(--pine-dimension-2xs);\n flex: none;\n height: var(--pine-dimension-sm);\n margin: 0;\n margin-block-start: var(--pine-dimension-025);\n position: relative;\n width: var(--pine-dimension-sm);\n\n &:hover {\n background: var(--pine-color-background-container-hover);\n border: var(--pine-border-hover);\n }\n\n &:checked {\n background: var(--pine-color-accent);\n border-color: var(--pine-color-accent);\n\n &:hover {\n background: var(--pine-color-accent-hover);\n border-color: var(--pine-color-accent-hover);\n }\n\n &::after {\n border: 1px solid var(--pine-color-secondary);\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(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n cursor: not-allowed;\n\n &:checked {\n background: var(--pine-color-background-container-disabled);\n border-color: var(--pine-color-border-disabled);\n\n &::after {\n border-color: var(--pine-color-grey-300);\n }\n }\n\n + label {\n cursor: not-allowed;\n }\n\n ~ .pds-checkbox__message {\n color: var(--pine-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 display: flex;\n gap: var(--pine-dimension-xs);\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(--pine-color-text-message);\n margin-block-start: 6px;\n margin-inline-start: var(--pine-dimension-md);\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 { CheckboxChangeEventDetail } from './checkbox-interface';\nimport { danger } from '@pine-ds/icons/icons';\n\n@Component({\n tag: 'pds-checkbox',\n styleUrls: ['../../global/styles/utils/label.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 <label htmlFor={this.componentId}>\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 <span class={this.labelHidden ? 'visually-hidden' : ''}>\n {this.label}\n </span>\n </label>\n {this.helperMessage &&\n <div\n class={'pds-checkbox__message'}\n id={messageId(this.componentId, 'helper')}\n >\n {this.helperMessage}\n </div>\n }\n {this.errorMessage &&\n <div\n class={`pds-checkbox__message pds-checkbox__message--error`}\n id={messageId(this.componentId, 'error')}\n aria-live=\"assertive\"\n >\n <pds-icon icon={danger} size=\"small\" />\n {this.errorMessage}\n </div>\n }\n </Host>\n );\n }\n}\n"],"version":3}