@warp-ds/elements 1.2.0 → 1.2.1-next.2

package/dist/packages/box/index.js

@@ -1,13 +1,289 @@
-var m=Object.defineProperty;var h=(n,l,c)=>l in n?m(n,l,{enumerable:!0,configurable:!0,writable:!0,value:c}):n[l]=c;var s=(n,l,c)=>(h(n,typeof l!="symbol"?l+"":l,c),c);import{css as y,html as w,nothing as D}from"lit";import p from"@warp-ds/elements-core";import{classMap as v}from"lit/directives/class-map.js";function u(n){let l={};for(let[c,$]of Object.entries(n))for(let x of c.split(" "))l[x]=$;return v(l)}var a={box:"group block relative break-words last-child:mb-0 p-16 rounded-8",bleed:"-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8",info:"i-bg-$color-box-info-background i-text-$color-box-info-text",neutral:"i-bg-$color-box-neutral-background i-text-$color-box-neutral-text",bordered:"border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text",infoClickable:"hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover",neutralClickable:"hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover",borderedClickable:"hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover"};var f="focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block",B={expandable:"will-change-height",expandableTitle:"font-bold i-text-$color-expandable-title-text",expandableBox:"i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 "+a.box,expandableBleed:a.bleed,chevron:"inline-block align-middle i-text-$color-expandable-icon",chevronNonBox:"relative left-8",chevronBox:"absolute right-16",chevronTransform:"transform transition-transform transform-gpu ease-in-out",chevronExpand:"-rotate-180",chevronCollapse:"rotate-180",expansion:"overflow-hidden",expansionNotExpanded:"h-0 invisible",button:f+" hover:underline focus:underline",buttonBox:"w-full text-left relative inline-flex items-center "+a.box,paddingTop:"pt-0",title:"flex justify-between items-center",titleType:"h4"},d="font-bold focusable justify-center transition-colors ease-in-out",i={primary:"i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active",secondary:"i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active",utility:"i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active",destructive:"i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active",pill:"i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active",disabled:"i-text-$color-button-disabled-text i-bg-$color-button-disabled-background",quiet:"i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active",utilityQuiet:"i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover",negativeQuiet:"i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active",loading:"i-text-$color-button-loading-text i-bg-$color-button-loading-background",link:"i-text-$color-button-link-text"},t={primary:`border-0 rounded-8 ${d}`,secondary:`border-2 rounded-8 ${d}`,utility:`border rounded-4 ${d}`,negative:`border-0 rounded-8 ${d}`,pill:`p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${d}`,link:`bg-transparent focusable ease-in-out inline active:underline hover:underline ${i.link}`},r={xsmall:"py-6 px-16",small:"py-8 px-16",medium:"py-10 px-14",large:"py-12 px-16",utility:"py-[11px] px-[15px]",smallUtility:"py-[7px] px-[15px]",pill:"min-h-[44px] min-w-[44px]",pillSmall:"min-h-32 min-w-32",link:"p-0"},o={medium:"text-m leading-[24]",xsmall:"text-xs"},e={inProgress:`border-transparent animate-inprogress pointer-events-none ${i.loading}`,quiet:`border-0 rounded-8 ${d}`,utilityQuiet:`border-0 rounded-4 ${d}`,negativeQuiet:`border-0 rounded-8 ${d}`,isDisabled:`font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${i.disabled}`},q={secondary:`${r.medium} ${o.medium} ${t.secondary} ${i.secondary}`,secondaryHref:`${r.medium} ${o.medium} ${t.secondary} ${i.secondary}`,secondaryDisabled:`${r.medium} ${o.medium} ${t.secondary} ${e.isDisabled}`,secondarySmall:`${o.xsmall} ${r.xsmall} ${t.secondary} ${i.secondary}`,secondarySmallDisabled:`${o.xsmall} ${r.xsmall} ${t.secondary} ${e.isDisabled}`,secondaryQuiet:`${r.medium} ${o.medium} ${e.quiet} ${i.quiet}`,secondaryQuietDisabled:`${r.medium} ${o.medium} ${e.quiet} ${e.isDisabled}`,secondarySmallQuiet:`${o.xsmall} ${r.xsmall} ${e.quiet} ${i.quiet}`,secondarySmallQuietDisabled:`${o.xsmall} ${r.xsmall} ${e.quiet} ${e.isDisabled}`,secondaryLoading:`${r.medium} ${o.medium} ${t.secondary} ${e.inProgress}`,secondarySmallLoading:`${o.xsmall} ${r.xsmall}  ${t.secondary} ${e.inProgress}`,secondarySmallQuietLoading:`${o.xsmall} ${r.xsmall} ${e.quiet} ${e.inProgress}`,secondaryQuietLoading:`${r.medium} ${o.medium} ${e.quiet} ${e.inProgress}`,primary:`${r.large} ${o.medium} ${t.primary} ${i.primary}`,primaryDisabled:`${r.large} ${o.medium} ${e.isDisabled} ${t.primary}`,primarySmall:`${r.small} ${o.xsmall} ${t.primary} ${i.primary}`,primarySmallDisabled:`${r.small} ${o.xsmall} ${e.isDisabled} ${t.primary} `,primaryQuiet:`${r.large} ${o.medium} ${e.quiet} ${i.quiet}`,primaryQuietDisabled:`${r.large} ${o.medium} ${e.quiet} ${e.isDisabled}`,primarySmallQuiet:`${r.small} ${o.xsmall} ${e.quiet} ${i.quiet}`,primarySmallQuietDisabled:`${r.small} ${o.xsmall} ${e.quiet} ${e.isDisabled}`,primaryLoading:`${r.large} ${o.medium} ${e.inProgress} ${t.primary}`,primarySmallLoading:`${r.small} ${o.xsmall}  ${e.inProgress} ${t.primary}`,primarySmallQuietLoading:`${r.small} ${o.xsmall} ${e.quiet} ${e.inProgress} ${t.primary}`,primaryQuietLoading:`${r.large} ${o.medium} ${e.quiet} ${e.inProgress}`,utility:`${r.utility} ${o.medium} ${t.utility} ${i.utility}`,utilityDisabled:`${r.utility} ${o.medium} ${t.utility} ${e.isDisabled}`,utilityQuiet:`${r.large} ${o.medium} ${e.utilityQuiet} ${i.utilityQuiet}`,utilityQuietDisabled:`${r.large} ${o.medium} ${e.utilityQuiet} ${e.isDisabled}`,utilitySmall:`${r.smallUtility} ${o.xsmall} ${t.utility} ${i.utility}`,utilitySmallDisabled:`${r.smallUtility} ${o.xsmall} ${t.utility} ${e.isDisabled}`,utilitySmallQuiet:`${r.smallUtility} ${o.xsmall} ${e.utilityQuiet} ${i.utilityQuiet}`,utilitySmallQuietDisabled:`${r.smallUtility} ${o.xsmall} ${e.utilityQuiet} ${e.isDisabled}`,utilityLoading:`${r.large} ${o.medium} ${t.utility} ${e.inProgress}`,utilitySmallLoading:`${r.smallUtility} ${o.xsmall} ${t.utility} ${e.inProgress}`,utilityQuietLoading:`${r.large} ${o.medium} ${e.inProgress} ${e.utilityQuiet}`,utilitySmallQuietLoading:`${r.smallUtility} ${o.xsmall} ${e.inProgress} ${e.utilityQuiet}`,negative:`${r.large} ${o.medium} ${t.negative} ${i.destructive}`,negativeDisabled:`${r.large} ${o.medium} ${t.negative} ${e.isDisabled}`,negativeQuiet:`${r.large} ${o.medium} ${e.negativeQuiet} ${i.negativeQuiet}`,negativeQuietDisabled:`${r.large} ${o.medium} ${e.negativeQuiet}${e.isDisabled}`,negativeSmall:`${r.small} ${o.xsmall} ${t.negative} ${i.destructive}`,negativeSmallDisabled:`${r.small} ${o.xsmall} ${t.negative} ${e.isDisabled}`,negativeSmallQuiet:`${r.small} ${o.xsmall} ${e.negativeQuiet} ${i.negativeQuiet}`,negativeSmallQuietDisabled:`${r.small} ${o.xsmall} ${e.negativeQuiet} ${e.isDisabled}`,negativeLoading:`${r.large} ${o.medium} ${t.negative} ${e.inProgress}`,negativeSmallLoading:`${r.small} ${o.xsmall} ${e.inProgress} ${t.negative}`,negativeQuietLoading:`${r.large} ${o.medium} ${e.negativeQuiet} ${t.negative} ${e.inProgress}`,negativeSmallQuietLoading:`${r.small} ${o.xsmall} ${e.negativeQuiet} ${e.inProgress}`,pill:`${r.pill} ${o.medium} ${t.pill} ${i.pill}`,pillSmall:`${r.pillSmall} ${o.xsmall} ${t.pill} ${i.pill}`,pillLoading:`${r.pill} ${o.medium} ${t.pill} ${e.inProgress}`,pillSmallLoading:`${r.pillSmall} ${o.xsmall} ${t.pill} ${e.inProgress}`,link:`${r.link} ${o.medium} ${t.link}`,linkSmall:`${r.link} ${o.xsmall} ${t.link}`,linkAsButton:"inline-block hover:no-underline text-center",a11y:"sr-only",fullWidth:"w-full max-w-full",contentWidth:"max-w-max"};var T={transparentBg:'before:i-bg-$color-modal-backdrop-background before:content-[""] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25',backdrop:"fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-20 [--w-modal-max-height:80%] [--w-modal-width:640px]",modal:"pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8",content:"block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative",footer:"flex justify-end shrink-0 px-16 sm:px-32",transitionTitle:"transition-all duration-300",transitionTitleCenter:"justify-self-center",transitionTitleColSpan:"col-span-2",title:"-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0",titleText:"mb-0 h4 sm:h3",titleButton:`${o.medium} ${t.pill} ${i.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,titleButtonLeft:"-ml-8 sm:-ml-12 justify-self-start",titleButtonRight:"-mr-8 sm:-mr-12 justify-self-end",titleButtonIcon:"h-16 w-16 sm:h-24 sm:w-24",titleButtonIconRotated:"transform rotate-90"};var k={label:"antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text",labelInvalid:"i-text-$color-label-text-negative",optional:"pl-8 font-normal text-s i-text-$color-label-optional-text"};var g="absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ",P={wrapper:g+"right-0",wrapperWithLabel:"w-max pr-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"},C={wrapper:g+"left-0",wrapperWithLabel:"w-max pl-12",wrapperWithIcon:"w-40",label:"antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"};var j={toggle:"absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset",label:`px-12 ${k.label} py-8! cursor-pointer focusable focusable-inset`,buttonOrLink:"bg-transparent focusable",buttonOrLinkStretch:"inset-0 absolute"};var z={base:"border-2 relative flex items-start",tooltip:"i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8",callout:"i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8",highlight:"i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m",popover:"i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m",arrowBase:"absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform",arrowDirectionLeft:"-left-[8px]",arrowDirectionRight:"-right-[8px]",arrowDirectionBottom:"-bottom-[8px]",arrowDirectionTop:"-top-[8px]",arrowTooltip:"i-bg-$color-tooltip-background i-border-$color-tooltip-background",arrowCallout:"i-bg-$color-callout-background i-border-$color-callout-border",arrowPopover:"i-bg-$color-popover-background i-border-$color-popover-background",arrowHighlight:"i-bg-$color-callout-background i-border-$color-callout-border",content:"last-child:mb-0",notCallout:"absolute z-50",closeBtn:`${o.medium} ${t.pill} ${i.pill} justify-self-end -mr-8 ml-8`};var b=class extends p{get _class(){return u({[a.box]:!0,[a.bleed]:this.bleed,[a.info]:this.info,[a.neutral]:this.neutral,[a.bordered]:this.bordered})}get _optOutRoleWithDefault(){var l;return this.role===""?D:(l=this.role)!=null?l:"region"}render(){return w`
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/box/index.js
+import { css, html, nothing } from "lit";
+import WarpElement from "@warp-ds/elements-core";
+
+// packages/utils/index.js
+import { classMap } from "lit/directives/class-map.js";
+function fclasses(definition) {
+  const defn = {};
+  for (const [key, value] of Object.entries(definition)) {
+    for (const className of key.split(" ")) {
+      defn[className] = value;
+    }
+  }
+  return classMap(defn);
+}
+
+// node_modules/.pnpm/@warp-ds+css@1.4.2/node_modules/@warp-ds/css/component-classes/index.js
+var box = {
+  box: "group block relative break-words last-child:mb-0 p-16 rounded-8",
+  // Relative here enables w-clickable
+  bleed: "-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8",
+  // We target L and R to override the default rounded-8
+  info: "i-bg-$color-box-info-background i-text-$color-box-info-text",
+  neutral: "i-bg-$color-box-neutral-background i-text-$color-box-neutral-text",
+  bordered: "border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text",
+  infoClickable: "hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover",
+  neutralClickable: "hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover",
+  borderedClickable: "hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover"
+};
+var buttonReset = "focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block";
+var expandable = {
+  expandable: "will-change-height",
+  expandableTitle: "font-bold i-text-$color-expandable-title-text",
+  expandableBox: "i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 " + box.box,
+  expandableBleed: box.bleed,
+  chevron: "inline-block align-middle i-text-$color-expandable-icon",
+  chevronNonBox: "ml-8",
+  chevronBox: "",
+  chevronTransform: "transform transition-transform transform-gpu ease-in-out",
+  chevronExpand: "-rotate-180",
+  chevronCollapse: "rotate-180",
+  elementsTransformChevronDownPart: "part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out",
+  elementsChevronDownExpandPart: "part-[w-icon-chevron-down-16-part]:-rotate-180",
+  elementsTransformChevronUpPart: "part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out",
+  elementsChevronUpCollapsePart: "part-[w-icon-chevron-up-16-part]:rotate-180",
+  expansion: "overflow-hidden",
+  expansionNotExpanded: "h-0 invisible",
+  button: buttonReset + " hover:underline focus-visible:underline",
+  buttonBox: "w-full text-left relative inline-flex items-center justify-between " + box.box,
+  paddingTop: "pt-0",
+  title: "flex w-full justify-between items-center",
+  titleType: "h4"
+};
+var buttonDefaultStyling = "font-bold focusable justify-center transition-colors ease-in-out";
+var buttonColors = {
+  primary: "i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active",
+  secondary: "i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active",
+  utility: "i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active",
+  destructive: "i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active",
+  pill: "i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active",
+  disabled: "i-text-$color-button-disabled-text i-bg-$color-button-disabled-background",
+  quiet: "i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active",
+  utilityQuiet: "i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover",
+  negativeQuiet: "i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active",
+  loading: "i-text-$color-button-loading-text i-bg-$color-button-loading-background",
+  link: "i-text-$color-button-link-text"
+};
+var buttonTypes = {
+  primary: `border-0 rounded-8 ${buttonDefaultStyling}`,
+  secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,
+  utility: `border rounded-4 ${buttonDefaultStyling}`,
+  negative: `border-0 rounded-8 ${buttonDefaultStyling}`,
+  pill: `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,
+  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`
+};
+var buttonSizes = {
+  xsmall: "py-6 px-16",
+  small: "py-8 px-16",
+  medium: "py-10 px-14",
+  large: "py-12 px-16",
+  utility: "py-[11px] px-[15px]",
+  smallUtility: "py-[7px] px-[15px]",
+  pill: "min-h-[44px] min-w-[44px]",
+  pillSmall: "min-h-32 min-w-32",
+  link: "p-0"
+};
+var buttonTextSizes = {
+  medium: "text-m leading-[24]",
+  xsmall: "text-xs"
+};
+var buttonVariants = {
+  inProgress: `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`,
+  // .button--in-progress, a.button--in-progress:visited
+  quiet: `border-0 rounded-8 ${buttonDefaultStyling}`,
+  utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,
+  negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,
+  isDisabled: `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`
+  // .button:disabled, .button--is-disabled
+};
+var button = {
+  // Buttontypes
+  secondary: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
+  // .button--secondary, .button--default, .button
+  secondaryHref: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
+  secondaryDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
+  secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,
+  secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
+  secondaryQuiet: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  secondaryQuietDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  secondaryLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
+  secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall}  ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
+  secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
+  secondaryQuietLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
+  primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`,
+  // .button--primary, .button--cta
+  primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,
+  primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`,
+  primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `,
+  primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`,
+  primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall}  ${buttonVariants.inProgress} ${buttonTypes.primary}`,
+  primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`,
+  primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
+  utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`,
+  // .button--utility
+  utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,
+  utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,
+  // .button--utility-flat
+  utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,
+  utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`,
+  utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,
+  utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,
+  utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,
+  utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`,
+  utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`,
+  utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,
+  utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,
+  negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`,
+  // .button--destructive
+  negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,
+  negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,
+  // .button--destructive-flat
+  negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`,
+  negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`,
+  negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,
+  negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,
+  negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`,
+  negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`,
+  negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`,
+  negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`,
+  negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`,
+  pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`,
+  // .button--pill
+  pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`,
+  pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`,
+  pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,
+  link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,
+  linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,
+  linkAsButton: "inline-block hover:no-underline text-center",
+  a11y: "sr-only",
+  fullWidth: "w-full max-w-full",
+  contentWidth: "max-w-max"
+};
+var modal = {
+  //TODO: this class can be removed when we have the solution for opacity and we can add rgba values to the background of the backdrop
+  transparentBg: `before:i-bg-$color-modal-backdrop-background before:content-[""] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25`,
+  backdrop: "fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px]",
+  modal: "pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8",
+  content: "block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative",
+  footer: "flex justify-end shrink-0 px-16 sm:px-32",
+  transitionTitle: "transition-all duration-300",
+  transitionTitleCenter: "justify-self-center",
+  transitionTitleColSpan: "col-span-2",
+  title: "-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0",
+  titleText: "mb-0 h4 sm:h3",
+  titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,
+  titleButtonLeft: "-ml-8 sm:-ml-12 justify-self-start",
+  titleButtonRight: "-mr-8 sm:-mr-12 justify-self-end",
+  titleButtonIcon: "h-16 w-16 sm:h-24 sm:w-24",
+  titleButtonIconRotated: "transform rotate-90"
+};
+var label = {
+  label: "antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text",
+  labelInvalid: "i-text-$color-label-text-negative",
+  optional: "pl-8 font-normal text-s i-text-$color-label-optional-text"
+};
+var prefixSuffixWrapperBase = "absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ";
+var suffix = {
+  wrapper: prefixSuffixWrapperBase + "right-0",
+  wrapperWithLabel: "w-max pr-12",
+  wrapperWithIcon: "w-40",
+  label: "antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"
+};
+var prefix = {
+  wrapper: prefixSuffixWrapperBase + "left-0",
+  wrapperWithLabel: "w-max pl-12",
+  wrapperWithIcon: "w-40",
+  label: "antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"
+};
+var clickable = {
+  toggle: "absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset",
+  label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,
+  buttonOrLink: "bg-transparent focusable",
+  buttonOrLinkStretch: "inset-0 absolute"
+};
+var attention = {
+  base: "border-2 relative flex items-start",
+  tooltip: "i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8",
+  callout: "i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8",
+  highlight: "i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m",
+  popover: "i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m",
+  arrowBase: "absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform",
+  arrowDirectionLeft: "-left-[8px]",
+  arrowDirectionRight: "-right-[8px]",
+  arrowDirectionBottom: "-bottom-[8px]",
+  arrowDirectionTop: "-top-[8px]",
+  arrowTooltip: "i-bg-$color-tooltip-background i-border-$color-tooltip-background",
+  arrowCallout: "i-bg-$color-callout-background i-border-$color-callout-border",
+  arrowPopover: "i-bg-$color-popover-background i-border-$color-popover-background",
+  arrowHighlight: "i-bg-$color-callout-background i-border-$color-callout-border",
+  content: "last-child:mb-0",
+  notCallout: "absolute z-50",
+  closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`
+};
+
+// packages/box/index.js
+var WarpBox = class extends WarpElement {
+  get _class() {
+    return fclasses({
+      [box.box]: true,
+      [box.bleed]: this.bleed,
+      [box.info]: this.info,
+      [box.neutral]: this.neutral,
+      [box.bordered]: this.bordered
+    });
+  }
+  get _optOutRoleWithDefault() {
+    var _a;
+    return this.role === "" ? nothing : (_a = this.role) != null ? _a : "region";
+  }
+  render() {
+    return html`
       <div role="${this._optOutRoleWithDefault}" class="${this._class}">
         <slot></slot>
       </div>
-    `}};s(b,"properties",{bleed:{type:Boolean},bordered:{type:Boolean},info:{type:Boolean},neutral:{type:Boolean},role:{type:String}}),s(b,"styles",[p.styles,y`
+    `;
+  }
+};
+__publicField(WarpBox, "properties", {
+  bleed: { type: Boolean },
+  bordered: { type: Boolean },
+  info: { type: Boolean },
+  neutral: { type: Boolean },
+  role: { type: String }
+});
+// Slotted elements remain in lightDOM which allows for control of their style outside of shadowDOM.
+// ::slotted([Simple Selector]) confirms to Specificity rules, but (being simple) does not add weight to lightDOM skin selectors,
+// so never gets higher Specificity. Thus in order to overwrite style linked within shadowDOM, we need to use !important.
+// https://stackoverflow.com/a/61631668
+__publicField(WarpBox, "styles", [
+  WarpElement.styles,
+  css`
       :host {
         display: block;
       }
       ::slotted(:last-child) {
         margin-bottom: 0 !important;
       }
-    `]);customElements.get("w-box")||customElements.define("w-box",b);export{b as WarpBox};
+    `
+]);
+if (!customElements.get("w-box")) {
+  customElements.define("w-box", WarpBox);
+}
+export {
+  WarpBox
+};
 //# sourceMappingURL=index.js.map