@protonradio/proton-ui 0.6.16 → 0.6.18-beta.1

package/dist/style.css

@@ -1 +1 @@
-:root{--proton-rem: calc(12px + .39vw) ;--proton-color__primary:#e26014;--proton-color__primary-light:#fbe5d7;--proton-color__secondary:#f2f2f2;--proton-color__gray-super-dark:#141211;--proton-color__gray-dark:#4d4d4d;--proton-color__gray-medium:#7d7d7d;--proton-color__gray-medium-light:#b1b1b1;--proton-color__gray-light:#ddd;--proton-color__gray-lightest:#f0f1f2;--proton-color__gray-super-light:#f7f8f9;--proton-color__white:#fff;--proton-color__danger-super-dark:#991b1b;--proton-color__danger-dark:#a80724;--proton-color__danger-medium:#e23f5c;--proton-color__danger-light:#f16880;--proton-color__danger-super-light:#ffe1e1;--proton-color__warning-dark:#8b5600;--proton-color__warning-medium:#b37208;--proton-color__warning-light:#ffac23;--proton-color__warning-super-light:#fff0c9;--proton-color__success-dark:#247800;--proton-color__success-medium:#339a07;--proton-color__success-light:#66cf39;--proton-color__success-super-light:#deffd1;--proton-control__text-color:var(--proton-color__white);--proton-control__background-color:var(--proton-color__white);--proton-control__border-color:var(--proton-color__gray-dark)}.proton-Badge{letter-spacing:.2em;text-align:center;text-transform:uppercase;white-space:nowrap;border-radius:10rem;height:1.6rem;padding-bottom:calc(1rem - 1.1em);padding-left:1rem;padding-right:calc(1rem - .2em);font-size:max(11px,min(.6875rem + .1vw,16px));font-weight:500;line-height:1.8rem;display:inline-block}.proton-ui__theme--dark.proton-Badge:not([class*=proton-Badge--]){background-color:var(--proton-control__background-color);color:var(--proton-control__text-color)}.proton-ui__theme--light.proton-Badge:not([class*=proton-Badge--]),.proton-ui__theme--light.proton-Badge--secondary{background-color:var(--proton-color__secondary);color:#666}.proton-ui__theme--dark.proton-Badge--secondary{color:var(--proton-control__text-color);background-color:#ffffff26}.proton-Badge--primary{background-color:var(--proton-color__primary);color:var(--proton-color__white)}.proton-Badge--success{background-color:var(--proton-color__success-super-light);color:var(--proton-color__success-dark)}.proton-Badge--warning{background-color:var(--proton-color__warning-super-light);color:var(--proton-color__warning-dark)}.proton-Badge--danger{background-color:var(--proton-color__danger-super-light);color:var(--proton-color__danger-dark)}.proton-Badge--transparent{color:#666;background-color:#0000}.proton-Button{font-size:var(--proton-rem);letter-spacing:.05em;border:0;border-radius:4px;align-items:center;column-gap:.4em;padding:.4em .86em;font-weight:300;text-decoration:none;transition:filter .1s,background-color .1s;display:flex}.proton-Button:hover{filter:brightness(1.08);cursor:pointer;text-decoration:none}.proton-Button--primary,.proton-Button--primary:hover{color:var(--proton-color__white);background-color:var(--proton-color__primary)}.proton-Button--secondary,.proton-Button--secondary:hover{color:var(--proton-color__gray-dark);background-color:var(--proton-color__gray-light)}.proton-Button--danger{color:var(--proton-color__white);background-color:var(--proton-color__danger-medium)}.proton-Button--success{color:var(--proton-color__white);background-color:var(--proton-color__success-medium)}.proton-Button--translucent{color:var(--proton-color__white);background-color:#ffffff1a}.proton-Button--translucent:hover{background-color:#ffffff24}.proton-Button--disabled,.proton-Button--disabled:hover{opacity:.5;filter:none;cursor:not-allowed}.proton-Button:focus{outline:solid var(--proton-color__primary)1px;border:none}.proton-Button:focus-visible{outline:solid var(--proton-color__primary)1px;border:none}:root{--banner__default-background:var(--proton-color__gray-lightest);--banner__default-title:var(--proton-color__gray-dark);--banner__default-content:var(--proton-color__gray-medium);--banner__default-icon:var(--proton-color__gray-medium-light);--banner__warning-background:var(--proton-color__warning-super-light);--banner__warning-title:var(--proton-color__warning-dark);--banner__warning-content:var(--proton-color__warning-medium);--banner__warning-icon:var(--proton-color__warning-light);--banner__success-background:var(--proton-color__success-super-light);--banner__success-title:var(--proton-color__success-dark);--banner__success-content:var(--proton-color__success-medium);--banner__success-icon:var(--proton-color__success-light);--banner__danger-background:var(--proton-color__danger-super-light);--banner__danger-title:var(--proton-color__danger-dark);--banner__danger-content:var(--proton-color__danger-medium);--banner__danger-icon:var(--proton-color__danger-light)}.proton-Banner{margin:0}.proton-Banner--rounded{border-radius:.375rem}.proton-Banner__wrapper{padding:2rem;display:flex}.proton-Banner__wrapper--compact{padding:1rem}.proton-Banner__content-wrapper{flex:1;min-width:0}.proton-Banner__container{flex-direction:column;padding:0 10px;display:flex}.proton-Banner__title{letter-spacing:.01rem;margin:0;font-size:max(14px,min(1.8rem,20px));font-weight:600}.proton-Banner__actions{gap:.5rem;margin:6px 0 0;display:flex}.proton-Banner__icon{margin-top:2px}@media (min-width:768px){.proton-Banner__container{grid-template-columns:1fr auto;align-items:center;display:grid}.proton-Banner__container>.proton-Banner__title,.proton-Banner__container>.proton-Banner__content{grid-column:1}.proton-Banner__container>div:last-child{grid-area:1/2/span 2}.proton-Banner__actions{margin:0 0 0 12px}}.proton-Banner--default{background-color:var(--banner__default-background)}.proton-Banner--default__title{color:var(--banner__default-title)}.proton-Banner--default__content{color:var(--banner__default-content)}.proton-Banner--default__icon{fill:var(--banner__default-icon)}.proton-Banner--warning{background-color:var(--banner__warning-background)}.proton-Banner--warning__title{color:var(--banner__warning-title)}.proton-Banner--warning__content{color:var(--banner__warning-content)}.proton-Banner--warning__icon{fill:var(--banner__warning-icon)}.proton-Banner--success{background-color:var(--banner__success-background)}.proton-Banner--success__title{color:var(--banner__success-title)}.proton-Banner--success__content{color:var(--banner__success-content)}.proton-Banner--success__icon{fill:var(--banner__success-icon)}.proton-Banner--danger{background-color:var(--banner__danger-background)}.proton-Banner--danger__title{color:var(--banner__danger-title)}.proton-Banner--danger__content{color:var(--banner__danger-content)}.proton-Banner--danger__icon{fill:var(--banner__danger-icon)}.proton-ButtonGroup{font-size:var(--proton-rem);border:1px solid var(--proton-color__gray-light);border-radius:4px;font-weight:400;display:flex;overflow:hidden}.proton-ButtonGroup__option{background-color:var(--proton-color__gray-super-light);cursor:pointer;border-left:1px solid var(--proton-color__gray-light);color:var(--proton-color__gray-dark);text-align:center;border-radius:0;flex:1;padding:.5em 1em}.proton-ButtonGroup__option:first-child{border-left:0}.proton-ButtonGroup__option--selected{background-color:var(--proton-color__white);color:var(--proton-color__primary);z-index:2;cursor:default;border-radius:inherit;box-shadow:0 0 6px #00000026}.proton-ButtonGroup__option--selected+.proton-ButtonGroup__option{border-left:1px solid #0000}.proton-Dialog{background-color:var(--proton-control__background-color);color:var(--proton-control__text-color);border-radius:4px;outline:none;padding:.65rem .85rem;font-weight:300;box-shadow:0 4px 16px -3px #0003,0 2px 4px -1px #00000014}.proton-Dialog__header{margin-top:0;margin-bottom:5px}.arrow{fill:var(--proton-control__background-color);stroke-width:1px;width:12px;height:12px;position:absolute}.arrow[data-placement=top]{top:100%;transform:translate(-50%)}.arrow[data-placement=bottom]{bottom:100%;transform:translate(-50%)rotate(180deg)}.arrow[data-placement=left]{left:100%;transform:translateY(-50%)rotate(-90deg)}.arrow[data-placement=right]{right:100%;transform:translateY(-50%)rotate(90deg)}.proton-ListBox{letter-spacing:.05em;background:var(--proton-control__background-color);border:1px solid var(--proton-control__border-color);min-width:100px;color:var(--proton-control__text-color);border-radius:10px;margin:.5rem 0 0;padding:0;list-style:none;overflow:auto}.proton-ListBox:focus{outline:none}.proton-ListBox:focus-visible{outline:none}.proton-ListBox__item{cursor:pointer;outline:none;justify-content:space-between;padding:8px 16px;transition:background-color .1s;display:flex}.proton-ListBox__item--disabled{opacity:.5;cursor:not-allowed}.proton-ListBox__item:not(.proton-ListBox__item--disabled):hover,.proton-ListBox__item--focused{background-color:var(--proton-color__gray-super-light);outline:none}.proton-ListBox__item--selected{background:var(--proton-color__primary-light);color:var(--proton-color__primary)}.proton-ui__theme--dark .proton-ListBox__item:hover,.proton-ui__theme--dark .proton-ListBox__item--focused{background-color:#606060fa}.proton-ui__theme--dark .proton-ListBox__item--selected{background-color:var(--proton-color__primary);color:var(--proton-control__text-color)}.proton-ui__theme--dark .proton-ListBox__item--selected:hover,.proton-ui__theme--dark .proton-ListBox__item--selected:focus{background-color:#e26014d9}.proton-Select{flex-direction:column;width:100%;margin:0;display:flex}.proton-Select__label{color:var(--proton-color__gray-dark);margin-bottom:2px}.proton-Select__trigger{color:var(--proton-control__text-color);font-size:inherit;border-radius:50px;flex:1;justify-content:space-between;align-items:center;width:100%;padding:.2rem .6rem .2rem 1rem;display:flex}button.proton-Select__trigger{letter-spacing:.05em;cursor:pointer;background:var(--proton-control__background-color);outline:1px solid var(--proton-control__border-color);border:1px solid #0000;font-weight:400;transition:outline .2s;position:relative}button.proton-Select__trigger:hover:after{content:"";-webkit-backdrop-filter:brightness(98%);backdrop-filter:brightness(98%);z-index:1;border-radius:50px;width:100%;height:100%;position:absolute;left:0}button.proton-Select__trigger:focus{outline:solid var(--proton-color__primary)1px;border:1px solid #0000}button.proton-Select__trigger:focus-visible{outline:solid var(--proton-color__primary)1px;border:1px solid #0000}.proton-Select__popover{padding-left:.25rem}.proton-Select__trigger_icon{color:var(--proton-control__text-color);width:.75em;height:.75em;margin-left:.8em;transition:transform .2s;position:relative}.proton-Select__trigger_icon svg{width:100%;height:100%;position:absolute;top:50%;left:0;transform:translateY(-50%)}.proton-Select__trigger_icon--flipped{transform:rotateX(180deg)}.proton-Select:hover{cursor:pointer}.proton-Select__trigger--disabled,.proton-Select__trigger--disabled:hover{opacity:.5;filter:none;cursor:not-allowed}.proton-Select__value{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.proton-ActionMenu__background{z-index:10;background:#000000bf;width:100%;height:100%;transition:opacity .3s ease-in-out;position:fixed;top:0;left:0}@media (min-width:768px){.proton-ActionMenu__background{display:none}}.proton-ActionMenu__wrapper{z-index:10;max-height:100vh;overflow:none;flex:1;width:100%;position:fixed;bottom:0;left:0}@media (min-width:768px){.proton-ActionMenu__wrapper{display:none}}.proton-ActionMenu__wrapper--scrollable{overflow-y:scroll}.proton-ActionMenu__card{background:var(--proton-control__background-color);color:var(--proton-control__text-color);z-index:1;border-radius:14px 14px 0 0;flex-direction:column;height:0;transition:height .3s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative;overflow:hidden;box-shadow:0 0 4px #0000001a,0 0 20px #00000026}.proton-ActionMenu__card>div{flex-direction:column;flex:1;display:flex}@media (min-width:768px){.proton-ActionMenu__card{border-radius:.8rem;min-width:300px}}.proton-ActionMenu__close-button{fill:var(--proton-color__white);color:var(--proton-color__white);pointer-events:none;text-align:center;margin-right:12px;transition:visibility ease-out,opacity .35s ease-out;position:fixed;top:1rem;right:0}.proton-ActionMenu__close-button div{letter-spacing:.1em;margin:.5rem;font-weight:500;display:block}.proton-ActionMenu__cancel-button{margin:0 12px 16px}.proton-ActionMenu__cancel-button button{justify-content:center;width:100%}.proton-ActionMenu__content{padding:12px 12px 0}.proton-ActionMenu__list{flex-direction:column;margin:10px 0;display:flex}.proton-ActionMenu__list--disabled{opacity:.5;cursor:not-allowed}.proton-ActionMenu__item{color:inherit;cursor:pointer;padding:12px 8px 12px 12px;text-decoration:none;transition:background-color .1s}.proton-ActionMenu__item:hover,.proton-ActionMenu__item:focus{background-color:var(--proton-color__gray-super-light);border:none;outline:none}.proton-ui__theme--dark .proton-ActionMenu__item:hover,.proton-ui__theme--dark .proton-ActionMenu__item:focus{background-color:#606060fa}.proton-ActionMenu__item[aria-checked=true]{background-color:var(--proton-color__primary-light);color:var(--proton-color__primary)}.proton-ui__theme--dark .proton-ActionMenu__item[aria-checked=true]{background-color:var(--proton-color__primary);color:var(--proton-control__text-color)}.proton-ui__theme--dark .proton-ActionMenu__item[aria-checked=true]:hover,.proton-ui__theme--dark .proton-ActionMenu__item[aria-checked=true]:focus{background-color:#e26014d9}.proton-ActionMenu__item[aria-disabled=true]{opacity:.5;cursor:not-allowed}.proton-ActionMenu__item[aria-disabled=true]:hover{background-color:#0000}.proton-ActionMenu__content:has(.proton-ListBox){padding:0}.proton-ActionMenu__content>.proton-ListBox{background:0 0;border:none;border-radius:0;margin-bottom:12px}.proton-Switch{font-size:var(--proton-rem);flex-flow:column;row-gap:5px;display:flex}.proton-Switch__label{text-transform:uppercase;letter-spacing:.1em;color:var(--proton-color__gray-dark);font-size:.7em;font-weight:600}.proton-Switch__description{color:var(--proton-color__gray-medium);align-self:center;font-size:.9em}.proton-Switch__wrapper{column-gap:12px;display:flex}.proton-Switch__toggle{background-color:var(--proton-color__gray-light);cursor:pointer;border-radius:26px;flex-shrink:0;width:50px;height:26px;position:relative}.proton-Switch__slider{background-color:#fff;border-radius:22px;width:22px;height:22px;transition:left .2s;position:absolute;top:2px;left:2px}.proton-Switch--on .proton-Switch__toggle{background-color:var(--proton-color__primary)}.proton-Switch--on .proton-Switch__slider{left:26px}.proton-Switch--disabled{opacity:.4}.proton-Switch--disabled .proton-Switch__toggle{cursor:not-allowed}.proton-Table{border-collapse:collapse;color:var(--proton-control__text-color);width:100%;font-weight:300}.proton-Table__header{cursor:default;letter-spacing:.1em;text-transform:uppercase;text-align:left;outline:none;padding:7px 10px;font-size:.75rem;font-weight:500;line-height:1rem}.proton-Table__header--center{text-align:center}.proton-Table__header--right{text-align:right}.proton-Table__headerSortIcon{padding:0 2px}.proton-Table__row{cursor:default;border-top:1px solid #ccc;outline:none}.proton-Table__row:last-child{border-bottom:1px solid #ccc}.proton-Table__cell{vertical-align:middle;outline:none;padding:7px 10px}.proton-Table__cell--center{text-align:center}.proton-Table__cell--right{text-align:right}.proton-TextEmphasis{color:var(--proton-color__gray-super-dark);background-image:linear-gradient(0deg,#0000 0,#0000 15%,#ff713480 15%,#ff713480 35%,#0000 35%,#0000);padding:0 .05rem;font-style:normal;font-weight:700}.proton-TextEmphasis a{color:inherit;transition:color .15s}.proton-TextEmphasis a:hover{color:var(--proton-color__primary);text-decoration:none}.proton-ui__theme--dark.proton-TextEmphasis{color:var(--proton-color__gray-super-light)}.proton-TextEmphasis--tooltip{background-image:linear-gradient(0deg,#0000 0,#0000 15%,#ff713480 25%,#ff713480 87%,#0000 80%,#0000);background-position:bottom;background-repeat:no-repeat;background-size:100% 35%;font-style:italic;font-weight:400;transition:background-size .3s,border-radius .3s}.proton-TextEmphasis--tooltip:hover{background-size:100% 100%;border-radius:2px}.proton-TextEmphasis--tooltip:not(:hover){transition-delay:.2s}.proton__Tooltip{background-color:var(--proton-control__background-color);color:var(--proton-control__text-color);position:absolute}.proton__TooltipTrigger{all:unset}.proton__Tooltip[data-placement=top]{--origin:translateY(4px);margin-bottom:8px}.proton__Tooltip[data-placement=bottom]{--origin:translateY(-4px);margin-top:8px}.proton__Tooltip[data-placement=bottom] .proton__TooltipArrow svg{transform:rotate(180deg)}.proton__Tooltip[data-placement=right]{--origin:translateX(-4px);margin-left:8px}.proton__Tooltip[data-placement=right] .proton__TooltipArrow svg{transform:rotate(90deg)}.proton__Tooltip[data-placement=left]{--origin:translateX(4px);margin-right:8px}.proton__Tooltip[data-placement=left] .proton__TooltipArrow svg{transform:rotate(-90deg)}.proton__Tooltip .proton__TooltipArrow svg{fill:var(--proton-control__background-color);display:block}.proton__Tooltip[data-entering]{animation:.2s slide}.proton__Tooltip[data-exiting]{animation:.2s reverse slide}@keyframes slide{0%{opacity:0;transform:var(--origin)}to{opacity:1;transform:translateY(0)}}:root{--waveform-bar-color-dark:#ffffffe6;--waveform-bar-color-light:#000000b3;--waveform-disabled-color-dark:#fff3;--waveform-disabled-color-light:#0003;--waveform-animation-curve:cubic-bezier(.34,1.56,.64,1);--waveform-animation-duration:.4s;--waveform-bar-delay-multiplier:.7ms;--waveform-timestamp-padding:.25rem;--waveform-timestamp-font-size:.75rem;--waveform-timestamp-border-radius:.125rem;--waveform-hover-line-width:2px}.proton-Waveform{flex-direction:row;align-items:center;width:100%;height:100%;display:flex;position:relative}.proton-Waveform__container{z-index:0;flex:1;align-items:center;width:100%;height:100%;display:flex;position:relative}.proton-Waveform__timestamp{pointer-events:none;border-radius:var(--waveform-timestamp-border-radius);padding:0 var(--waveform-timestamp-padding);font-size:var(--waveform-timestamp-font-size);z-index:1;background-color:#0009;position:absolute}.proton-ui__theme--light .proton-Waveform__timestamp{color:#000c;background-color:#ffffffe6;box-shadow:0 2px 2px #0000004d}.proton-Waveform__timestamp--left{left:1px}.proton-Waveform__timestamp--right{right:3px}.proton-Waveform__hover-line{width:var(--waveform-hover-line-width);background-color:#ffffff80;position:absolute;top:0;bottom:0;transform:translate(-50%)}.proton-ui__theme--light .proton-Waveform__hover-line{background-color:#00000080}.proton-Waveform__bar-wrapper{flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex;position:relative}.proton-Waveform__bar{background-color:var(--waveform-bar-color-dark);transform-origin:50%;width:100%;height:0;transition:height var(--waveform-animation-duration)var(--waveform-animation-curve);position:relative}.proton-Waveform__bar.proton-Waveform__bar--visible{height:var(--target-height);transition-delay:calc(var(--index)*var(--waveform-bar-delay-multiplier))}.proton-Waveform__bar.proton-Waveform__bar--upper{transform-origin:bottom}.proton-Waveform__bar.proton-Waveform__bar--lower{transform-origin:top}.proton-ui__theme--light .proton-Waveform__bar{background-color:var(--waveform-bar-color-light)}.proton-Waveform__bar.proton-Waveform__bar--disabled{background-color:var(--waveform-disabled-color-dark)}.proton-ui__theme--light .proton-Waveform__bar.proton-Waveform__bar--disabled{background-color:var(--waveform-disabled-color-light)}.proton-Waveform__bar.proton-Waveform__bar--disabled.proton-Waveform__bar--played{background-color:var(--waveform-disabled-color-dark)}.proton-ui__theme--light .proton-Waveform__bar.proton-Waveform__bar--disabled.proton-Waveform__bar--played{background-color:var(--waveform-disabled-color-light)}.proton-Waveform__bar.proton-Waveform__bar--played{background-color:var(--proton-color__primary)}.proton-Waveform__bar--hover{height:var(--hover-height);z-index:10;background-color:color-mix(in srgb,var(--proton-color__primary)50%,transparent);mix-blend-mode:darken;width:100%;position:absolute;top:50%;transform:translateY(-50%)}.proton-ui__theme--light .proton-Waveform__bar--hover{background-color:color-mix(in srgb,var(--proton-color__primary)50%,white);mix-blend-mode:lighten}.proton-Waveform__bar-unavailable{pointer-events:none;text-align:center;z-index:10;color:#fff;background-color:#000000b3;border-radius:4px;padding:3px 6px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.proton-ui__theme--light .proton-Waveform__bar-unavailable{color:#000;background-color:#fff;box-shadow:0 5px 5px #0000004d}.proton-Waveform__active-region{pointer-events:none;z-index:1;border:1.5px solid #ffffffb3;border-radius:4px;position:absolute;top:0;bottom:0}.proton-ui__theme--light .proton-Waveform__active-region{border-color:#0000004d}.proton-Input{box-sizing:border-box;outline:1px solid var(--proton-control__border-color);border:1px solid #0000;border-radius:4px;flex:1;width:100%;min-height:40px;padding-left:12px;transition:all .2s ease-in-out}.proton-Input:disabled{opacity:.6;cursor:not-allowed}.proton-Input:not(.proton-Input--error):focus{outline:1px solid var(--proton-color__primary)}.proton-Input:not(.proton-Input--error):focus-visible{outline:1px solid var(--proton-color__primary)}.proton-ui__theme--light .proton-Input{background-color:var(--proton-color__white);outline:1px solid var(--proton-control__border-color);color:var(--proton-control__text-color)}.proton-ui__theme--dark .proton-Input{background-color:var(--proton-control__background-color);outline:1px solid var(--proton-control__border-color);color:var(--proton-control__text-color)}.proton-Input.proton-Input--error{outline:1px solid var(--proton-color__danger-dark)}.proton-Input__container{flex-direction:column;flex:1;width:100%;display:flex}.proton-Input__container-inner{flex:1;align-items:center;display:flex;position:relative}.proton-Input__descriptor{z-index:1;background-position:50%;background-repeat:no-repeat;background-size:50%;justify-content:center;align-items:center;height:100%;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.proton-Input__prefix,.proton-Input__suffix{flex:0 0 32px;justify-content:center;align-items:center;display:flex}.proton-Input__prefix{opacity:.5;cursor:text;margin-left:12px;left:0}.proton-Input__suffix{outline:none;padding-right:12px;right:0}.proton-Input__container-inner:has(.proton-Input__prefix) .proton-Input{padding-left:32px}.proton-Input__container-inner:has(.proton-Input__suffix) .proton-Input{padding-right:44px}.proton-Input__text{color:var(--proton-color__gray-medium);padding:4px 0;font-size:.75rem}.proton-Input__error{color:var(--proton-color__danger-medium)}.proton-Input__label-top{padding-top:24px;padding-bottom:8px}.proton-Input__label{color:var(--proton-color__gray-medium-light);pointer-events:none;transform-origin:left center 0px;transition:color .2s,font-size .5s,top .5s;position:absolute;top:15px;left:14px}.proton-Input:focus+.proton-Input__label,.proton-Input__label--filled{font-size:.75rem;top:7px}.proton-Input:focus+.proton-Input__label{color:var(--proton-color__primary)}.proton-Input__label--hide{display:none}.proton-SearchInput__wrapper{width:100%}.proton-SearchInput__wrapper input{border-radius:50px;padding-left:44px!important}.proton-SearchInput__button{color:currentColor;cursor:pointer;opacity:1;background-color:#0000;border:none;transition:opacity .2s ease-in-out}.proton-SearchInput__button--hide{opacity:0}.proton-SearchInput__wrapper input[type=search]::-ms-clear{width:0;height:0;display:none}.proton-SearchInput__wrapper input[type=search]::-ms-reveal{width:0;height:0;display:none}.proton-SearchInput__wrapper input[type=search]::-webkit-search-decoration{display:none}.proton-SearchInput__wrapper input[type=search]::-webkit-search-cancel-button{display:none}.proton-SearchInput__wrapper input[type=search]::-webkit-search-results-button{display:none}.proton-SearchInput__wrapper input[type=search]::-webkit-search-results-decoration{display:none}
+:root{--proton-rem: calc(12px + .39vw) ;--proton-color__primary:#e26014;--proton-color__primary-light:#fbe5d7;--proton-color__secondary:#f2f2f2;--proton-color__gray-super-dark:#141211;--proton-color__gray-dark:#4d4d4d;--proton-color__gray-medium:#7d7d7d;--proton-color__gray-medium-light:#b1b1b1;--proton-color__gray-light:#ddd;--proton-color__gray-lightest:#f0f1f2;--proton-color__gray-super-light:#f7f8f9;--proton-color__white:#fff;--proton-color__danger-super-dark:#991b1b;--proton-color__danger-dark:#a80724;--proton-color__danger-medium:#e23f5c;--proton-color__danger-light:#f16880;--proton-color__danger-super-light:#ffe1e1;--proton-color__warning-dark:#8b5600;--proton-color__warning-medium:#b37208;--proton-color__warning-light:#ffac23;--proton-color__warning-super-light:#fff0c9;--proton-color__success-dark:#247800;--proton-color__success-medium:#339a07;--proton-color__success-light:#66cf39;--proton-color__success-super-light:#deffd1;--proton-control__text-color:var(--proton-color__white);--proton-control__background-color:var(--proton-color__white);--proton-control__border-color:var(--proton-color__gray-dark);--proton-control__shadow-color:var(--proton-color__gray-dark)}.proton-ActionMenu__background{z-index:10;background:#000000bf;width:100%;height:100%;transition:opacity .3s ease-in-out;position:fixed;top:0;left:0}@media (min-width:768px){.proton-ActionMenu__background{display:none}}.proton-ActionMenu__wrapper{z-index:10;max-height:100vh;overflow:none;flex:1;width:100%;position:fixed;bottom:0;left:0}@media (min-width:768px){.proton-ActionMenu__wrapper{display:none}}.proton-ActionMenu__wrapper--scrollable{overflow-y:scroll}.proton-ActionMenu__card{background:var(--proton-control__background-color);color:var(--proton-control__text-color);z-index:1;border-radius:14px 14px 0 0;flex-direction:column;height:0;transition:height .3s cubic-bezier(.34,1.56,.64,1);display:flex;position:relative;overflow:hidden;box-shadow:0 0 4px #0000001a,0 0 20px #00000026}.proton-ActionMenu__card>div{flex-direction:column;flex:1;display:flex}@media (min-width:768px){.proton-ActionMenu__card{border-radius:.8rem;min-width:300px}}.proton-ui__theme--custom-dark .proton-ActionMenu__card{background:var(--proton-control__background-color)}.proton-ActionMenu__close-button{fill:var(--proton-color__white);color:var(--proton-color__white);pointer-events:none;text-align:center;margin-right:12px;transition:visibility ease-out,opacity .35s ease-out;position:fixed;top:1rem;right:0}.proton-ActionMenu__close-button div{letter-spacing:.1em;margin:.5rem;font-weight:500;display:block}.proton-ActionMenu__cancel-button{margin:0 12px 16px}.proton-ActionMenu__cancel-button button{justify-content:center;width:100%}.proton-ActionMenu__content{padding:12px 12px 0}.proton-ActionMenu__list{flex-direction:column;margin:10px 0;display:flex}.proton-ActionMenu__list--disabled{opacity:.5;cursor:not-allowed}.proton-ActionMenu__item{color:inherit;cursor:pointer;padding:12px 8px 12px 12px;text-decoration:none;transition:background-color .1s}.proton-ActionMenu__item:hover,.proton-ActionMenu__item:focus{background-color:var(--proton-color__gray-super-light);border:none;outline:none}.proton-ui__theme--dark .proton-ActionMenu__item:hover,.proton-ui__theme--dark .proton-ActionMenu__item:focus,.proton-ui__theme--custom-dark .proton-ActionMenu__item:focus,.proton-ui__theme--custom-dark .proton-ActionMenu__item:hover{background-color:#606060fa}.proton-ActionMenu__item[aria-checked=true]{background-color:var(--proton-color__primary-light);color:var(--proton-color__primary)}.proton-ui__theme--custom-dark .proton-ActionMenu__item[aria-checked=true],.proton-ui__theme--dark .proton-ActionMenu__item[aria-checked=true]{background-color:var(--proton-color__primary);color:var(--proton-control__text-color)}.proton-ActionMenu__item[aria-disabled=true]{opacity:.5;cursor:not-allowed}.proton-ActionMenu__item[aria-disabled=true]:hover{background-color:#0000}.proton-ActionMenu__content:has(.proton-ListBox){padding:0}.proton-ActionMenu__content>.proton-ListBox{background:0 0;border:none;border-radius:0;margin-bottom:12px}.proton-Badge{letter-spacing:.2em;text-align:center;text-transform:uppercase;white-space:nowrap;border-radius:10rem;height:1.6rem;padding-bottom:calc(1rem - 1.1em);padding-left:1rem;padding-right:calc(1rem - .2em);font-size:max(11px,min(.6875rem + .1vw,16px));font-weight:500;line-height:1.8rem;display:inline-block}.proton-Badge:not([class*=proton-Badge--]){background-color:var(--proton-color__primary);color:var(--proton-color__white)}.proton-Badge--secondary{background-color:var(--proton-color__secondary);color:var(--proton-control__text-color)}.proton-ui__theme--dark .proton-Badge--secondary{color:var(--proton-color__gray-dark)}.proton-Badge--primary{background-color:var(--proton-color__primary);color:var(--proton-color__white)}.proton-Badge--success{background-color:var(--proton-color__success-super-light);color:var(--proton-color__success-dark)}.proton-Badge--warning{background-color:var(--proton-color__warning-super-light);color:var(--proton-color__warning-dark)}.proton-Badge--danger{background-color:var(--proton-color__danger-super-light);color:var(--proton-color__danger-dark)}.proton-Badge--transparent{color:#666;background-color:#0000}.proton-Button{font-size:var(--proton-rem);letter-spacing:.05em;border:0;border-radius:4px;align-items:center;column-gap:.4em;padding:.4em .86em;font-weight:300;text-decoration:none;transition:filter .1s,background-color .1s;display:flex}.proton-Button:hover{filter:brightness(1.08);cursor:pointer;text-decoration:none}.proton-Button--primary,.proton-Button--primary:hover{color:var(--proton-color__white);background-color:var(--proton-color__primary)}.proton-Button--secondary,.proton-Button--secondary:hover{color:var(--proton-color__gray-dark);background-color:var(--proton-color__gray-light)}.proton-Button--danger{color:var(--proton-color__white);background-color:var(--proton-color__danger-medium)}.proton-Button--success{color:var(--proton-color__white);background-color:var(--proton-color__success-medium)}.proton-Button--translucent{color:var(--proton-color__white);background-color:#ffffff1a}.proton-Button--translucent:hover{background-color:#ffffff24}.proton-Button--disabled,.proton-Button--disabled:hover{opacity:.5;filter:none;cursor:not-allowed}.proton-Button:focus{outline:solid var(--proton-color__primary)1px;border:none}.proton-Button:focus-visible{outline:solid var(--proton-color__primary)1px;border:none}:root{--banner__default-background:var(--proton-color__gray-lightest);--banner__default-title:var(--proton-color__gray-dark);--banner__default-content:var(--proton-color__gray-medium);--banner__default-icon:var(--proton-color__gray-medium-light);--banner__warning-background:var(--proton-color__warning-super-light);--banner__warning-title:var(--proton-color__warning-dark);--banner__warning-content:var(--proton-color__warning-medium);--banner__warning-icon:var(--proton-color__warning-light);--banner__success-background:var(--proton-color__success-super-light);--banner__success-title:var(--proton-color__success-dark);--banner__success-content:var(--proton-color__success-medium);--banner__success-icon:var(--proton-color__success-light);--banner__danger-background:var(--proton-color__danger-super-light);--banner__danger-title:var(--proton-color__danger-dark);--banner__danger-content:var(--proton-color__danger-medium);--banner__danger-icon:var(--proton-color__danger-light)}.proton-Banner{margin:0}.proton-Banner--rounded{border-radius:.375rem}.proton-Banner__wrapper{padding:2rem;display:flex}.proton-Banner__wrapper--compact{padding:1rem}.proton-Banner__content-wrapper{flex:1;min-width:0}.proton-Banner__container{flex-direction:column;padding:0 10px;display:flex}.proton-Banner__title{letter-spacing:.01rem;margin:0;font-size:max(14px,min(1.8rem,20px));font-weight:600}.proton-Banner__actions{gap:.5rem;margin:6px 0 0;display:flex}.proton-Banner__icon{margin-top:2px}@media (min-width:768px){.proton-Banner__container{grid-template-columns:1fr auto;align-items:center;display:grid}.proton-Banner__container>.proton-Banner__title,.proton-Banner__container>.proton-Banner__content{grid-column:1}.proton-Banner__container>div:last-child{grid-area:1/2/span 2}.proton-Banner__actions{margin:0 0 0 12px}}.proton-Banner--default{background-color:var(--banner__default-background)}.proton-Banner--default__title{color:var(--banner__default-title)}.proton-Banner--default__content{color:var(--banner__default-content)}.proton-Banner--default__icon{fill:var(--banner__default-icon)}.proton-Banner--warning{background-color:var(--banner__warning-background)}.proton-Banner--warning__title{color:var(--banner__warning-title)}.proton-Banner--warning__content{color:var(--banner__warning-content)}.proton-Banner--warning__icon{fill:var(--banner__warning-icon)}.proton-Banner--success{background-color:var(--banner__success-background)}.proton-Banner--success__title{color:var(--banner__success-title)}.proton-Banner--success__content{color:var(--banner__success-content)}.proton-Banner--success__icon{fill:var(--banner__success-icon)}.proton-Banner--danger{background-color:var(--banner__danger-background)}.proton-Banner--danger__title{color:var(--banner__danger-title)}.proton-Banner--danger__content{color:var(--banner__danger-content)}.proton-Banner--danger__icon{fill:var(--banner__danger-icon)}.proton-ButtonGroup{font-size:var(--proton-rem);border:1px solid var(--proton-color__gray-light);border-radius:4px;font-weight:400;display:flex;overflow:hidden}.proton-ButtonGroup__option{background-color:var(--proton-color__gray-super-light);cursor:pointer;border-left:1px solid var(--proton-color__gray-light);color:var(--proton-color__gray-dark);text-align:center;border-radius:0;flex:1;padding:.5em 1em}.proton-ButtonGroup__option:first-child{border-left:0}.proton-ButtonGroup__option--selected{background-color:var(--proton-color__white);color:var(--proton-color__primary);z-index:2;cursor:default;border-radius:inherit;box-shadow:0 0 6px #00000026}.proton-ButtonGroup__option--selected+.proton-ButtonGroup__option{border-left:1px solid #0000}.proton-Dialog{background-color:var(--proton-control__background-color);box-shadow:0 4px 16px 0 var(--proton-control__shadow-color),0 2px 4px -4px var(--proton-control__shadow-color);color:var(--proton-control__text-color);border-radius:4px;outline:none;padding:.65rem .85rem;font-weight:300}.proton-ui__theme--custom-dark.proton-Dialog{background-color:var(--proton-color__primary)}.proton-Dialog__header{margin-top:0;margin-bottom:5px}.proton-Input{box-sizing:border-box;background-color:var(--input-background);outline:1px solid var(--proton-control__border-color);width:100%;min-height:40px;color:var(--proton-control__text-color);border:1px solid #0000;border-radius:4px;flex:1;padding-left:12px;transition:all .2s ease-in-out}.proton-Input:disabled{opacity:.6;cursor:not-allowed}.proton-Input:not(.proton-Input--error):focus{outline:1px solid var(--proton-color__primary)}.proton-Input:not(.proton-Input--error):focus-visible{outline:1px solid var(--proton-color__primary)}.proton-Input.proton-Input--error{outline:1px solid var(--proton-color__danger-dark)}.proton-Input__container{flex-direction:column;flex:1;width:100%;display:flex}.proton-Input__container-inner{flex:1;align-items:center;display:flex;position:relative}.proton-Input__descriptor{z-index:1;background-position:50%;background-repeat:no-repeat;background-size:50%;justify-content:center;align-items:center;height:100%;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.proton-Input__prefix,.proton-Input__suffix{flex:0 0 32px;justify-content:center;align-items:center;display:flex}.proton-Input__prefix{opacity:.5;cursor:text;margin-left:12px;left:0}.proton-Input__suffix{outline:none;padding-right:12px;right:0}.proton-Input__container-inner:has(.proton-Input__prefix) .proton-Input{padding-left:32px}.proton-Input__container-inner:has(.proton-Input__suffix) .proton-Input{padding-right:44px}.proton-Input__text{color:var(--proton-color__gray-medium);padding:4px 0;font-size:.75rem}.proton-ui__theme--custom-dark .proton-Input__text{color:var(--proton-color__gray-medium-light)}.proton-Input__error{color:var(--proton-color__danger-medium)}.proton-Input__label-top{padding-top:24px;padding-bottom:8px}.proton-Input__label{color:var(--proton-color__gray-medium-light);pointer-events:none;transform-origin:left center 0px;transition:color .2s,font-size .5s,top .5s;position:absolute;top:15px;left:14px}.proton-Input:focus+.proton-Input__label,.proton-Input__label--filled{font-size:.75rem;top:7px}.proton-Input:focus+.proton-Input__label{color:var(--proton-color__primary)}.proton-ui__theme--custom-dark .proton-Input:focus+.proton-Input__label{color:var(--proton-color__primary-light)}.proton-Input__label--hide{display:none}.proton-SearchInput__wrapper{width:100%}.proton-SearchInput__wrapper input{border-radius:50px;padding-left:44px!important}.proton-SearchInput__button{color:currentColor;cursor:pointer;opacity:1;background-color:#0000;border:none;transition:opacity .2s ease-in-out}.proton-SearchInput__button--hide{opacity:0}.proton-SearchInput__wrapper input[type=search]::-ms-clear{width:0;height:0;display:none}.proton-SearchInput__wrapper input[type=search]::-ms-reveal{width:0;height:0;display:none}.proton-SearchInput__wrapper input[type=search]::-webkit-search-decoration{display:none}.proton-SearchInput__wrapper input[type=search]::-webkit-search-cancel-button{display:none}.proton-SearchInput__wrapper input[type=search]::-webkit-search-results-button{display:none}.proton-SearchInput__wrapper input[type=search]::-webkit-search-results-decoration{display:none}.arrow{fill:var(--proton-control__background-color);stroke-width:1px;width:12px;height:12px;position:absolute}.proton-ui__theme--custom-dark .arrow{fill:var(--proton-color__primary)}.arrow[data-placement=top]{top:100%;transform:translate(-50%)}.arrow[data-placement=bottom]{bottom:100%;transform:translate(-50%)rotate(180deg)}.arrow[data-placement=left]{left:100%;transform:translateY(-50%)rotate(-90deg)}.arrow[data-placement=right]{right:100%;transform:translateY(-50%)rotate(90deg)}.proton-ResponsiveMenuTrigger{display:inline-block;position:relative}.proton-ResponsiveMenuTrigger__button{cursor:pointer;color:var(--proton-control__text-color);background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;padding:4px;display:flex}.proton-ResponsiveMenuTrigger__button:disabled{cursor:not-allowed;opacity:.5}.proton-ui__theme--dark .proton-ResponsiveMenuTrigger__button:disabled:hover,.proton-ResponsiveMenuTrigger__button:disabled:hover{background:0 0}.proton-ResponsiveMenuTrigger__button:focus{outline:2px solid var(--proton-control__border-color)}.proton-ResponsiveMenuTrigger__button:hover{background-color:#60606026}.proton-ui__theme--dark .proton-ResponsiveMenuTrigger__button:hover{background-color:#ffffff1a}.proton-ListBox{letter-spacing:.05em;background:var(--proton-control__background-color);border:1px solid var(--proton-control__border-color);min-width:100px;color:var(--proton-control__text-color);box-shadow:0 0 5px var(--proton-control__shadow-color);border-radius:10px;margin:.5rem 0 0;padding:0;list-style:none;overflow:auto}@media screen and (max-width:768px){.proton-ListBox{box-shadow:none}}.proton-ui__theme--custom-dark .proton-ListBox{background:var(--proton-color__primary)}.proton-ListBox:focus{outline:none}.proton-ListBox:focus-visible{outline:none}.proton-ListBox__item{cursor:pointer;outline:none;justify-content:space-between;padding:8px 16px;transition:background-color .1s;display:flex}.proton-ListBox__item:hover{background:#0000000a}.proton-ui__theme--dark .proton-ListBox__item:hover,.proton-ui__theme--custom-dark .proton-ListBox__item:hover{background:#ffffff1a}.proton-ListBox__item--disabled{opacity:.5;cursor:not-allowed}.proton-ListBox__item--selected{background:var(--proton-color__primary-light);color:var(--proton-color__primary)}.proton-ui__theme--custom-dark .proton-ListBox__item--selected{color:var(--proton-control__text-color)}.proton-Select{flex-direction:column;width:100%;margin:0;display:flex}.proton-Select__label{color:var(--proton-control__text-color);margin-bottom:2px}.proton-Select__trigger{color:var(--proton-control__text-color);font-size:inherit;border-radius:50px;flex:1;justify-content:space-between;align-items:center;width:100%;padding:.2rem .6rem .2rem 1rem;display:flex}button.proton-Select__trigger{letter-spacing:.05em;cursor:pointer;background:var(--proton-control__background-color);outline:1px solid var(--proton-control__border-color);border:1px solid #0000;font-weight:400;transition:outline .2s;position:relative}.proton-ui__theme--custom-dark button.proton-Select__trigger{background:var(--proton-color__primary)}button.proton-Select__trigger:hover:after{content:"";-webkit-backdrop-filter:brightness(98%);backdrop-filter:brightness(98%);z-index:1;border-radius:50px;width:100%;height:100%;position:absolute;left:0}button.proton-Select__trigger:focus{outline:solid var(--proton-color__primary)1px;border:1px solid #0000}button.proton-Select__trigger:focus-visible{outline:solid var(--proton-color__primary)1px;border:1px solid #0000}.proton-ui__theme--custom-dark button.proton-Select__trigger:focus{outline:solid var(--proton-color__gray-medium-light)1px;border:1px solid #0000}.proton-ui__theme--custom-dark button.proton-Select__trigger:focus-visible{outline:solid var(--proton-color__gray-medium-light)1px;border:1px solid #0000}.proton-Select__popover{padding-left:.25rem}.proton-Select__trigger_icon{color:var(--proton-control__text-color);width:.75em;height:.75em;margin-left:.8em;transition:transform .2s;position:relative}.proton-Select__trigger_icon svg{width:100%;height:100%;position:absolute;top:50%;left:0;transform:translateY(-50%)}.proton-Select__trigger_icon--flipped{transform:rotateX(180deg)}.proton-Select:hover{cursor:pointer}.proton-Select__trigger--disabled,.proton-Select__trigger--disabled:hover{opacity:.5;filter:none;cursor:not-allowed}.proton-Select__value{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.proton-Switch{font-size:var(--proton-rem);flex-flow:column;row-gap:5px;display:flex}.proton-Switch__label{text-transform:uppercase;letter-spacing:.1em;color:var(--proton-color__gray-dark);font-size:.7em;font-weight:600}.proton-Switch__description{color:var(--proton-color__gray-medium);align-self:center;font-size:.9em}.proton-Switch__wrapper{column-gap:12px;display:flex}.proton-Switch__toggle{background-color:var(--proton-color__gray-light);cursor:pointer;border-radius:26px;flex-shrink:0;width:50px;height:26px;position:relative}.proton-ui__theme--dark .proton-Switch__toggle,.proton-ui__theme--custom-dark .proton-Switch__toggle{background-color:var(--proton-color__gray-dark)}.proton-Switch__slider{background-color:#fff;border-radius:22px;width:22px;height:22px;transition:left .2s;position:absolute;top:2px;left:2px}.proton-Switch--on .proton-Switch__toggle{background-color:var(--proton-color__primary)}.proton-Switch--on .proton-Switch__slider{left:26px}.proton-Switch--disabled{opacity:.4}.proton-Switch--disabled .proton-Switch__toggle{cursor:not-allowed}.proton-Table{border-collapse:collapse;color:var(--proton-control__text-color);width:100%;font-weight:300}.proton-Table__header{cursor:default;letter-spacing:.1em;text-transform:uppercase;text-align:left;outline:none;padding:7px 10px;font-size:.75rem;font-weight:500;line-height:1rem}.proton-Table__header--center{text-align:center}.proton-Table__header--right{text-align:right}.proton-Table__headerSortIcon{padding:0 2px}.proton-Table__row{cursor:default;border-top:1px solid #ccc;outline:none}.proton-Table__row:last-child{border-bottom:1px solid #ccc}.proton-Table__cell{vertical-align:middle;outline:none;padding:7px 10px}.proton-Table__cell--center{text-align:center}.proton-Table__cell--right{text-align:right}.proton-TextEmphasis{background-image:linear-gradient(to top,#0000 0,#0000 15%,var(--text-emphasis-highlight)15%,var(--text-emphasis-highlight)35%,transparent 35%,transparent 100%);color:var(--proton-color__gray-super-dark);padding:0 .05rem;font-style:normal;font-weight:700}.proton-TextEmphasis a{color:inherit;text-decoration:none;transition:color .15s}.proton-TextEmphasis a:hover{color:var(--proton-color__primary);text-decoration:none}.proton-ui__theme--custom-dark .proton-TextEmphasis,.proton-ui__theme--dark .proton-TextEmphasis{color:var(--proton-color__gray-lightest)}.proton-TextEmphasis--tooltip{background-image:linear-gradient(to top,#0000 0,#0000 15%,var(--text-emphasis-highlight)25%,var(--text-emphasis-highlight)87%,transparent 80%,transparent 100%);background-position:bottom;background-repeat:no-repeat;background-size:100% 35%;font-style:italic;font-weight:400;transition:background-size .3s,border-radius .3s}.proton-TextEmphasis--tooltip:hover{background-size:100% 100%;border-radius:2px}.proton-TextEmphasis--tooltip:not(:hover){transition-delay:.2s}.proton__Tooltip{background-color:var(--proton-control__background-color);color:var(--proton-control__text-color);position:absolute}.proton__TooltipTrigger{all:unset}.proton__Tooltip[data-placement=top]{--origin:translateY(4px);margin-bottom:8px}.proton__Tooltip[data-placement=bottom]{--origin:translateY(-4px);margin-top:8px}.proton__Tooltip[data-placement=bottom] .proton__TooltipArrow svg{transform:rotate(180deg)}.proton__Tooltip[data-placement=right]{--origin:translateX(-4px);margin-left:8px}.proton__Tooltip[data-placement=right] .proton__TooltipArrow svg{transform:rotate(90deg)}.proton__Tooltip[data-placement=left]{--origin:translateX(4px);margin-right:8px}.proton__Tooltip[data-placement=left] .proton__TooltipArrow svg{transform:rotate(-90deg)}.proton__Tooltip .proton__TooltipArrow svg{fill:var(--proton-control__background-color);display:block}.proton-ui__theme--custom-dark .proton__TooltipArrow svg{fill:var(--proton-color__primary)}.proton__Tooltip[data-entering]{animation:.2s slide}.proton__Tooltip[data-exiting]{animation:.2s reverse slide}@keyframes slide{0%{opacity:0;transform:var(--origin)}to{opacity:1;transform:translateY(0)}}:root{--waveform-bar-color-dark:#ffffffe6;--waveform-bar-color-light:#000000b3;--waveform-disabled-color-dark:#fff3;--waveform-disabled-color-light:#0003;--waveform-animation-curve:cubic-bezier(.34,1.56,.64,1);--waveform-animation-duration:.4s;--waveform-bar-delay-multiplier:.7ms;--waveform-timestamp-padding:.25rem;--waveform-timestamp-font-size:.75rem;--waveform-timestamp-border-radius:.125rem;--waveform-hover-line-width:2px}.proton-Waveform{flex-direction:row;align-items:center;width:100%;height:100%;display:flex;position:relative}.proton-Waveform__container{z-index:0;flex:1;align-items:center;width:100%;height:100%;display:flex;position:relative}.proton-Waveform__timestamp{pointer-events:none;border-radius:var(--waveform-timestamp-border-radius);padding:0 var(--waveform-timestamp-padding);font-size:var(--waveform-timestamp-font-size);z-index:1;background-color:#0009;position:absolute}.proton-ui__theme--light .proton-Waveform__timestamp{color:#000c;background-color:#ffffffe6;box-shadow:0 2px 2px #0000004d}.proton-Waveform__timestamp--left{left:1px}.proton-Waveform__timestamp--right{right:3px}.proton-Waveform__hover-line{width:var(--waveform-hover-line-width);background-color:#ffffff80;position:absolute;top:0;bottom:0;transform:translate(-50%)}.proton-ui__theme--light .proton-Waveform__hover-line{background-color:#00000080}.proton-Waveform__bar-wrapper{flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex;position:relative}.proton-Waveform__bar{background-color:var(--waveform-bar-color-dark);transform-origin:50%;width:100%;height:0;transition:height var(--waveform-animation-duration)var(--waveform-animation-curve);position:relative}.proton-Waveform__bar.proton-Waveform__bar--visible{height:var(--target-height);transition-delay:calc(var(--index)*var(--waveform-bar-delay-multiplier))}.proton-Waveform__bar.proton-Waveform__bar--upper{transform-origin:bottom}.proton-Waveform__bar.proton-Waveform__bar--lower{transform-origin:top}.proton-ui__theme--light .proton-Waveform__bar{background-color:var(--waveform-bar-color-light)}.proton-Waveform__bar.proton-Waveform__bar--disabled{background-color:var(--waveform-disabled-color-dark)}.proton-ui__theme--light .proton-Waveform__bar.proton-Waveform__bar--disabled{background-color:var(--waveform-disabled-color-light)}.proton-Waveform__bar.proton-Waveform__bar--disabled.proton-Waveform__bar--played{background-color:var(--waveform-disabled-color-dark)}.proton-ui__theme--light .proton-Waveform__bar.proton-Waveform__bar--disabled.proton-Waveform__bar--played{background-color:var(--waveform-disabled-color-light)}.proton-Waveform__bar.proton-Waveform__bar--played{background-color:var(--proton-color__primary)}.proton-Waveform__bar--hover{height:var(--hover-height);z-index:10;background-color:color-mix(in srgb,var(--proton-color__primary)50%,transparent);mix-blend-mode:darken;width:100%;position:absolute;top:50%;transform:translateY(-50%)}.proton-ui__theme--light .proton-Waveform__bar--hover{background-color:color-mix(in srgb,var(--proton-color__primary)50%,white);mix-blend-mode:lighten}.proton-Waveform__bar-unavailable{pointer-events:none;text-align:center;z-index:10;color:#fff;background-color:#000000b3;border-radius:4px;padding:3px 6px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.proton-ui__theme--light .proton-Waveform__bar-unavailable{color:#000;background-color:#fff;box-shadow:0 5px 5px #0000004d}.proton-Waveform__active-region{pointer-events:none;z-index:1;border:1.5px solid #ffffffb3;border-radius:4px;position:absolute;top:0;bottom:0}.proton-ui__theme--light .proton-Waveform__active-region{border-color:#0000004d}

package/dist/utils.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=t=>typeof t=="string"||t instanceof String;function i(...t){return t.filter(a).join(" ")}const s=t=>{if(/^https?:\/\//.test(t)){const n=document.createElement("a");return n.href=t,n.hostname}return window.location.hostname},l=t=>{const n=window.location.hostname,o=s(t);return n!==o},h=(t,n)=>{if(t.metaKey||t.altKey||t.ctrlKey||t.shiftKey||t.button&&t.button!==0)return;t.preventDefault();const o=n.startsWith("/")?n:`/${n}`;window.history.pushState({},"",o),window.dispatchEvent(new PopStateEvent("popstate"))},e=179,c=42,u=(t,n)=>[Math.min(t[0]+255*n,e),Math.min(t[1]+255*n,e),Math.min(t[2]+255*n,e)].map(r=>Math.round(Math.max(r,c))),d=(t,n)=>t.map(o=>Math.max(0,o-o*n)),m=(t,n)=>n===void 0?`rgb(${t[0]}, ${t[1]}, ${t[2]})`:`rgba(${t[0]}, ${t[1]}, ${t[2]}, ${n})`;exports.arrayToRgbString=m;exports.csx=i;exports.darkenRGBColor=d;exports.handleInternalNavigation=h;exports.isUrlExternal=l;exports.lightenRGBColor=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=(t,n)=>n===void 0?`rgb(${t[0]}, ${t[1]}, ${t[2]})`:`rgba(${t[0]}, ${t[1]}, ${t[2]}, ${n})`,r=([t,n,o])=>t*.2126+n*.7152+o*.0722,h=t=>t.map(n=>255-n),m=(t,n)=>{const o=r(t),a=r(n);return(Math.max(o,a)+.05)/(Math.min(o,a)+.05)},d=(t,n=4.5)=>{const o=h(t);if(m(t,o)>=n)return o;const e=r(t),i=e<128;if(i&&e>255/n)return[255,255,255];const c=r(o),u=(Math.min(e,c)+.05)*n-(Math.max(e,c)+.05);return i?o.map(s=>Math.min(255,Math.round(s+u))):o.map(s=>Math.max(0,Math.round(s-u)))},f=t=>typeof t=="string"||t instanceof String;function p(...t){return t.filter(f).join(" ")}const w=t=>{if(/^https?:\/\//.test(t)){const n=document.createElement("a");return n.href=t,n.hostname}return window.location.hostname},g=t=>{const n=window.location.hostname,o=w(t);return n!==o},v=(t,n)=>{if(t.metaKey||t.altKey||t.ctrlKey||t.shiftKey||t.button&&t.button!==0)return;t.preventDefault();const o=n.startsWith("/")?n:`/${n}`;window.history.pushState({},"",o),window.dispatchEvent(new PopStateEvent("popstate"))};exports.arrayToRgbString=l;exports.contrastColor=d;exports.csx=p;exports.handleInternalNavigation=v;exports.isUrlExternal=g;exports.luminance=r;
 //# sourceMappingURL=utils.cjs.js.map

package/dist/utils.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.cjs.js","sources":["../src/utils/index.ts"],"sourcesContent":["const isString = (x: unknown): boolean =>\r\n  typeof x === \"string\" || x instanceof String;\r\n\r\nexport function csx(...classnames: unknown[]): string {\r\n  return classnames.filter(isString).join(\" \");\r\n}\r\n\r\n/**\r\n * [getLinkHost] - get the host of a link.\r\n * Referenced from is-url-external npm package\r\n * https://github.com/mrded/is-url-external/blob/master/index.js\r\n */\r\nconst getLinkHost = (url) => {\r\n  if (/^https?:\\/\\//.test(url)) {\r\n    // Absolute URL.\r\n    // The easy way to parse an URL, is to create <a> element.\r\n    // @see: https://gist.github.com/jlong/2428561\r\n    const parser = document.createElement(\"a\");\r\n    parser.href = url;\r\n    return parser.hostname;\r\n  }\r\n  return window.location.hostname;\r\n};\r\n\r\n/**\r\n * [isUrlExternal] - determine if passed absolute url is external to the current domain.\r\n */\r\nexport const isUrlExternal = (url) => {\r\n  const host = window.location.hostname;\r\n  const linkHost = getLinkHost(url);\r\n\r\n  return host !== linkHost;\r\n};\r\n\r\n/**\r\n * Handles internal navigation clicks by preventing default browser behavior and\r\n * programmatically updating the URL and history state.\r\n *\r\n * @param e - The click event from the anchor element\r\n * @param to - The destination path to navigate to\r\n *\r\n * @remarks\r\n * - Converts relative paths to absolute by prepending \"/\" if needed\r\n * - Updates browser history using pushState and dispatches a popstate event\r\n */\r\nexport const handleInternalNavigation = (\r\n  e: React.MouseEvent<HTMLAnchorElement>,\r\n  to: string\r\n) => {\r\n  // Don't handle navigation if modifier keys are pressed\r\n  if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) {\r\n    return;\r\n  }\r\n\r\n  // Don't handle middle clicks or right clicks\r\n  if (e.button && e.button !== 0) {\r\n    return;\r\n  }\r\n\r\n  e.preventDefault();\r\n\r\n  // Handle relative paths\r\n  const resolvedPath = to.startsWith(\"/\") ? to : `/${to}`;\r\n  window.history.pushState({}, \"\", resolvedPath);\r\n  window.dispatchEvent(new PopStateEvent(\"popstate\"));\r\n};\r\n\r\nexport type RGBArray = [number, number, number];\r\n\r\nconst ceilColor = 179;\r\nconst floorColor = 42;\r\n\r\n/**\r\n * Lightens an RGB color by a specified factor.\r\n * @param rgb - The RGB color array to lighten.\r\n * @param factor - The factor between 0 (darker) - 1 (lighter) by which to transform the color.\r\n * @returns The lightened RGB color array, RGB values are clamped to 42 (dark) - 179 (light).\r\n */\r\nexport const lightenRGBColor = (rgb: RGBArray, factor: number): RGBArray => {\r\n  const lightenedRGB = [\r\n    Math.min(rgb[0] + 255 * factor, ceilColor),\r\n    Math.min(rgb[1] + 255 * factor, ceilColor),\r\n    Math.min(rgb[2] + 255 * factor, ceilColor),\r\n  ];\r\n\r\n  return lightenedRGB.map((value) =>\r\n    Math.round(Math.max(value, floorColor))\r\n  ) as RGBArray;\r\n};\r\n\r\n/**\r\n * Darkens an RGB color by a specified factor.\r\n * @param color - The RGB color array to darken.\r\n * @param factor - The factor between 0 (lighter) - 1 (darker) by which to transform the color.\r\n * @returns The darkened RGB color array, RGB values are clamped to 0 (light) - 255 (dark).\r\n */\r\n\r\nexport const darkenRGBColor = (color: RGBArray, factor: number): RGBArray => {\r\n  return color.map((c) => Math.max(0, c - c * factor)) as RGBArray;\r\n};\r\n\r\n/**\r\n * Converts an RGB array to a CSS string representation.\r\n * @param rgb - The RGB array to convert.\r\n * @param opacity - Optional opacity value.\r\n * @returns A CSS string representation of the RGB array, using `rgb()`, or `rgba()` if an opacity value is provided.\r\n */\r\nexport const arrayToRgbString = (rgb: RGBArray, opacity?: number): string => {\r\n  return opacity === undefined\r\n    ? `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`\r\n    : `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`;\r\n};\r\n"],"names":["isString","x","csx","classnames","getLinkHost","url","parser","isUrlExternal","host","linkHost","handleInternalNavigation","e","to","resolvedPath","ceilColor","floorColor","lightenRGBColor","rgb","factor","value","darkenRGBColor","color","c","arrayToRgbString","opacity"],"mappings":"gFAAA,MAAMA,EAAYC,GAChB,OAAOA,GAAM,UAAYA,aAAa,OAEjC,SAASC,KAAOC,EAA+B,CACpD,OAAOA,EAAW,OAAOH,CAAQ,EAAE,KAAK,GAAG,CAC7C,CAOA,MAAMI,EAAeC,GAAQ,CACvB,GAAA,eAAe,KAAKA,CAAG,EAAG,CAItB,MAAAC,EAAS,SAAS,cAAc,GAAG,EACzC,OAAAA,EAAO,KAAOD,EACPC,EAAO,QAChB,CACA,OAAO,OAAO,SAAS,QACzB,EAKaC,EAAiBF,GAAQ,CAC9B,MAAAG,EAAO,OAAO,SAAS,SACvBC,EAAWL,EAAYC,CAAG,EAEhC,OAAOG,IAASC,CAClB,EAaaC,EAA2B,CACtCC,EACAC,IACG,CAOH,GALID,EAAE,SAAWA,EAAE,QAAUA,EAAE,SAAWA,EAAE,UAKxCA,EAAE,QAAUA,EAAE,SAAW,EAC3B,OAGFA,EAAE,eAAe,EAGjB,MAAME,EAAeD,EAAG,WAAW,GAAG,EAAIA,EAAK,IAAIA,CAAE,GACrD,OAAO,QAAQ,UAAU,CAAC,EAAG,GAAIC,CAAY,EAC7C,OAAO,cAAc,IAAI,cAAc,UAAU,CAAC,CACpD,EAIMC,EAAY,IACZC,EAAa,GAQNC,EAAkB,CAACC,EAAeC,IACxB,CACnB,KAAK,IAAID,EAAI,CAAC,EAAI,IAAMC,EAAQJ,CAAS,EACzC,KAAK,IAAIG,EAAI,CAAC,EAAI,IAAMC,EAAQJ,CAAS,EACzC,KAAK,IAAIG,EAAI,CAAC,EAAI,IAAMC,EAAQJ,CAAS,CAAA,EAGvB,IAAKK,GACvB,KAAK,MAAM,KAAK,IAAIA,EAAOJ,CAAU,CAAC,CAAA,EAW7BK,EAAiB,CAACC,EAAiBH,IACvCG,EAAM,IAAKC,GAAM,KAAK,IAAI,EAAGA,EAAIA,EAAIJ,CAAM,CAAC,EASxCK,EAAmB,CAACN,EAAeO,IACvCA,IAAY,OACf,OAAOP,EAAI,CAAC,CAAC,KAAKA,EAAI,CAAC,CAAC,KAAKA,EAAI,CAAC,CAAC,IACnC,QAAQA,EAAI,CAAC,CAAC,KAAKA,EAAI,CAAC,CAAC,KAAKA,EAAI,CAAC,CAAC,KAAKO,CAAO"}
+{"version":3,"file":"utils.cjs.js","sources":["../src/utils/color.ts","../src/utils/utils.ts"],"sourcesContent":["export type RGBArray = [number, number, number];\r\n\r\n/**\r\n * Converts an RGB array to a CSS string representation.\r\n * @param rgb - The RGB array to convert.\r\n * @param opacity - Optional opacity value.\r\n * @returns A CSS string representation of the RGB array, using `rgb()`, or `rgba()` if an opacity value is provided.\r\n */\r\nexport const arrayToRgbString = (rgb: RGBArray, opacity?: number): string => {\r\n  return opacity === undefined\r\n    ? `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`\r\n    : `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`;\r\n};\r\n\r\n/**\r\n * Calculates the relative luminance of an RGB color according to WCAG 2.2 specifications.\r\n * This is used in calculating contrast ratios between colors.\r\n *\r\n * @param param0 - RGB color array containing red, green and blue values (0-255)\r\n * @returns The relative luminance value\r\n * @see formula from https://www.w3.org/WAI/WCAG22/Techniques/general/G18 (see step 1 in `Procedure`)\r\n */\r\nexport const luminance = ([r, g, b]: RGBArray): number => {\r\n  return r * 0.2126 + g * 0.7152 + b * 0.0722;\r\n};\r\n\r\nconst invertColor = (rgb: RGBArray): RGBArray => {\r\n  return rgb.map((value) => 255 - value) as RGBArray;\r\n};\r\n\r\n\r\nconst contrastRatio = (color1: RGBArray, color2: RGBArray): number => {\r\n  const luminance1 = luminance(color1);\r\n  const luminance2 = luminance(color2);\r\n\r\n  return (\r\n    (Math.max(luminance1, luminance2) + 0.05) /\r\n    (Math.min(luminance1, luminance2) + 0.05)\r\n  );\r\n};\r\n\r\n/**\r\n * Inverts an input color and returns the result after adjustment to ensure a minimum contrast ratio.\r\n *\r\n * @param color - The RGB color array to invert.\r\n * @param minContrast - The contrast ratio to exceed. Defaults to 4.5, which is the minimum for text to be considered accessible.\r\n */\r\n\r\nexport const contrastColor = (\r\n  color: RGBArray,\r\n  minContrast: number = 4.5\r\n): RGBArray => {\r\n  const newColor = invertColor(color);\r\n  const contrast = contrastRatio(color, newColor);\r\n  if (contrast >= minContrast) return newColor;\r\n\r\n  const colorLuminance = luminance(color);\r\n  const isColorDark = colorLuminance < 128;\r\n\r\n  if (isColorDark && colorLuminance > 255 / minContrast) {\r\n    return [255, 255, 255]; // not dark enough to find color meeting minimum contrast, return white\r\n  }\r\n\r\n  const newColorLuminance = luminance(newColor);\r\n\r\n  const difference =\r\n    (Math.min(colorLuminance, newColorLuminance) + 0.05) * minContrast -\r\n    (Math.max(colorLuminance, newColorLuminance) + 0.05);\r\n\r\n  return isColorDark\r\n    ? (newColor.map((value) =>\r\n        Math.min(255, Math.round(value + difference))\r\n      ) as RGBArray)\r\n    : (newColor.map((value) =>\r\n        Math.max(0, Math.round(value - difference))\r\n      ) as RGBArray);\r\n};\r\n","const isString = (x: unknown): boolean =>\r\n  typeof x === \"string\" || x instanceof String;\r\n\r\nexport function csx(...classnames: unknown[]): string {\r\n  return classnames.filter(isString).join(\" \");\r\n}\r\n\r\n/**\r\n * [getLinkHost] - get the host of a link.\r\n * Referenced from is-url-external npm package\r\n * https://github.com/mrded/is-url-external/blob/master/index.js\r\n */\r\nconst getLinkHost = (url) => {\r\n  if (/^https?:\\/\\//.test(url)) {\r\n    // Absolute URL.\r\n    // The easy way to parse an URL, is to create <a> element.\r\n    // @see: https://gist.github.com/jlong/2428561\r\n    const parser = document.createElement(\"a\");\r\n    parser.href = url;\r\n    return parser.hostname;\r\n  }\r\n  return window.location.hostname;\r\n};\r\n\r\n/**\r\n * [isUrlExternal] - determine if passed absolute url is external to the current domain.\r\n */\r\nexport const isUrlExternal = (url) => {\r\n  const host = window.location.hostname;\r\n  const linkHost = getLinkHost(url);\r\n\r\n  return host !== linkHost;\r\n};\r\n\r\n/**\r\n * Handles internal navigation clicks by preventing default browser behavior and\r\n * programmatically updating the URL and history state.\r\n *\r\n * @param e - The click event from the anchor element\r\n * @param to - The destination path to navigate to\r\n *\r\n * @remarks\r\n * - Converts relative paths to absolute by prepending \"/\" if needed\r\n * - Updates browser history using pushState and dispatches a popstate event\r\n */\r\nexport const handleInternalNavigation = (\r\n  e: React.MouseEvent<HTMLAnchorElement>,\r\n  to: string\r\n) => {\r\n  // Don't handle navigation if modifier keys are pressed\r\n  if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) {\r\n    return;\r\n  }\r\n\r\n  // Don't handle middle clicks or right clicks\r\n  if (e.button && e.button !== 0) {\r\n    return;\r\n  }\r\n\r\n  e.preventDefault();\r\n\r\n  // Handle relative paths\r\n  const resolvedPath = to.startsWith(\"/\") ? to : `/${to}`;\r\n  window.history.pushState({}, \"\", resolvedPath);\r\n  window.dispatchEvent(new PopStateEvent(\"popstate\"));\r\n};\r\n"],"names":["arrayToRgbString","rgb","opacity","luminance","r","g","b","invertColor","value","contrastRatio","color1","color2","luminance1","luminance2","contrastColor","color","minContrast","newColor","colorLuminance","isColorDark","newColorLuminance","difference","isString","x","csx","classnames","getLinkHost","url","parser","isUrlExternal","host","linkHost","handleInternalNavigation","e","to","resolvedPath"],"mappings":"gFAQa,MAAAA,EAAmB,CAACC,EAAeC,IACvCA,IAAY,OACf,OAAOD,EAAI,CAAC,CAAC,KAAKA,EAAI,CAAC,CAAC,KAAKA,EAAI,CAAC,CAAC,IACnC,QAAQA,EAAI,CAAC,CAAC,KAAKA,EAAI,CAAC,CAAC,KAAKA,EAAI,CAAC,CAAC,KAAKC,CAAO,IAWzCC,EAAY,CAAC,CAACC,EAAGC,EAAGC,CAAC,IACzBF,EAAI,MAASC,EAAI,MAASC,EAAI,MAGjCC,EAAeN,GACZA,EAAI,IAAKO,GAAU,IAAMA,CAAK,EAIjCC,EAAgB,CAACC,EAAkBC,IAA6B,CAC9D,MAAAC,EAAaT,EAAUO,CAAM,EAC7BG,EAAaV,EAAUQ,CAAM,EAGhC,OAAA,KAAK,IAAIC,EAAYC,CAAU,EAAI,MACnC,KAAK,IAAID,EAAYC,CAAU,EAAI,IAExC,EASaC,EAAgB,CAC3BC,EACAC,EAAsB,MACT,CACP,MAAAC,EAAWV,EAAYQ,CAAK,EAE9B,GADaN,EAAcM,EAAOE,CAAQ,GAC9BD,EAAoB,OAAAC,EAE9B,MAAAC,EAAiBf,EAAUY,CAAK,EAChCI,EAAcD,EAAiB,IAEjC,GAAAC,GAAeD,EAAiB,IAAMF,EACjC,MAAA,CAAC,IAAK,IAAK,GAAG,EAGjB,MAAAI,EAAoBjB,EAAUc,CAAQ,EAEtCI,GACH,KAAK,IAAIH,EAAgBE,CAAiB,EAAI,KAAQJ,GACtD,KAAK,IAAIE,EAAgBE,CAAiB,EAAI,KAEjD,OAAOD,EACFF,EAAS,IAAKT,GACb,KAAK,IAAI,IAAK,KAAK,MAAMA,EAAQa,CAAU,CAAC,GAE7CJ,EAAS,IAAKT,GACb,KAAK,IAAI,EAAG,KAAK,MAAMA,EAAQa,CAAU,CAAC,CAAA,CAElD,EC5EMC,EAAYC,GAChB,OAAOA,GAAM,UAAYA,aAAa,OAEjC,SAASC,KAAOC,EAA+B,CACpD,OAAOA,EAAW,OAAOH,CAAQ,EAAE,KAAK,GAAG,CAC7C,CAOA,MAAMI,EAAeC,GAAQ,CACvB,GAAA,eAAe,KAAKA,CAAG,EAAG,CAItB,MAAAC,EAAS,SAAS,cAAc,GAAG,EACzC,OAAAA,EAAO,KAAOD,EACPC,EAAO,QAChB,CACA,OAAO,OAAO,SAAS,QACzB,EAKaC,EAAiBF,GAAQ,CAC9B,MAAAG,EAAO,OAAO,SAAS,SACvBC,EAAWL,EAAYC,CAAG,EAEhC,OAAOG,IAASC,CAClB,EAaaC,EAA2B,CACtCC,EACAC,IACG,CAOH,GALID,EAAE,SAAWA,EAAE,QAAUA,EAAE,SAAWA,EAAE,UAKxCA,EAAE,QAAUA,EAAE,SAAW,EAC3B,OAGFA,EAAE,eAAe,EAGjB,MAAME,EAAeD,EAAG,WAAW,GAAG,EAAIA,EAAK,IAAIA,CAAE,GACrD,OAAO,QAAQ,UAAU,CAAC,EAAG,GAAIC,CAAY,EAC7C,OAAO,cAAc,IAAI,cAAc,UAAU,CAAC,CACpD"}

package/dist/utils.d.ts

@@ -6,15 +6,15 @@
  */
 export declare const arrayToRgbString: (rgb: RGBArray, opacity?: number) => string;
 
-export declare function csx(...classnames: unknown[]): string;
-
 /**
- * Darkens an RGB color by a specified factor.
- * @param color - The RGB color array to darken.
- * @param factor - The factor between 0 (lighter) - 1 (darker) by which to transform the color.
- * @returns The darkened RGB color array, RGB values are clamped to 0 (light) - 255 (dark).
+ * Inverts an input color and returns the result after adjustment to ensure a minimum contrast ratio.
+ *
+ * @param color - The RGB color array to invert.
+ * @param minContrast - The contrast ratio to exceed. Defaults to 4.5, which is the minimum for text to be considered accessible.
  */
-export declare const darkenRGBColor: (color: RGBArray, factor: number) => RGBArray;
+export declare const contrastColor: (color: RGBArray, minContrast?: number) => RGBArray;
+
+export declare function csx(...classnames: unknown[]): string;
 
 /**
  * Handles internal navigation clicks by preventing default browser behavior and
@@ -35,12 +35,14 @@ export declare const handleInternalNavigation: (e: React.MouseEvent<HTMLAnchorEl
 export declare const isUrlExternal: (url: any) => boolean;
 
 /**
- * Lightens an RGB color by a specified factor.
- * @param rgb - The RGB color array to lighten.
- * @param factor - The factor between 0 (darker) - 1 (lighter) by which to transform the color.
- * @returns The lightened RGB color array, RGB values are clamped to 42 (dark) - 179 (light).
+ * Calculates the relative luminance of an RGB color according to WCAG 2.2 specifications.
+ * This is used in calculating contrast ratios between colors.
+ *
+ * @param param0 - RGB color array containing red, green and blue values (0-255)
+ * @returns The relative luminance value
+ * @see formula from https://www.w3.org/WAI/WCAG22/Techniques/general/G18 (see step 1 in `Procedure`)
  */
-export declare const lightenRGBColor: (rgb: RGBArray, factor: number) => RGBArray;
+export declare const luminance: ([r, g, b]: RGBArray) => number;
 
 export declare type RGBArray = [number, number, number];
 

package/dist/utils.es.js

@@ -1,35 +1,44 @@
-const s = (t) => typeof t == "string" || t instanceof String;
-function h(...t) {
-  return t.filter(s).join(" ");
+const d = (t, n) => n === void 0 ? `rgb(${t[0]}, ${t[1]}, ${t[2]})` : `rgba(${t[0]}, ${t[1]}, ${t[2]}, ${n})`, r = ([t, n, o]) => t * 0.2126 + n * 0.7152 + o * 0.0722, h = (t) => t.map((n) => 255 - n), l = (t, n) => {
+  const o = r(t), a = r(n);
+  return (Math.max(o, a) + 0.05) / (Math.min(o, a) + 0.05);
+}, p = (t, n = 4.5) => {
+  const o = h(t);
+  if (l(t, o) >= n) return o;
+  const e = r(t), i = e < 128;
+  if (i && e > 255 / n)
+    return [255, 255, 255];
+  const c = r(o), u = (Math.min(e, c) + 0.05) * n - (Math.max(e, c) + 0.05);
+  return i ? o.map(
+    (s) => Math.min(255, Math.round(s + u))
+  ) : o.map(
+    (s) => Math.max(0, Math.round(s - u))
+  );
+}, m = (t) => typeof t == "string" || t instanceof String;
+function w(...t) {
+  return t.filter(m).join(" ");
 }
-const a = (t) => {
+const f = (t) => {
   if (/^https?:\/\//.test(t)) {
     const n = document.createElement("a");
     return n.href = t, n.hostname;
   }
   return window.location.hostname;
-}, l = (t) => {
-  const n = window.location.hostname, o = a(t);
+}, M = (t) => {
+  const n = window.location.hostname, o = f(t);
   return n !== o;
-}, c = (t, n) => {
+}, $ = (t, n) => {
   if (t.metaKey || t.altKey || t.ctrlKey || t.shiftKey || t.button && t.button !== 0)
     return;
   t.preventDefault();
   const o = n.startsWith("/") ? n : `/${n}`;
   window.history.pushState({}, "", o), window.dispatchEvent(new PopStateEvent("popstate"));
-}, e = 179, i = 42, u = (t, n) => [
-  Math.min(t[0] + 255 * n, e),
-  Math.min(t[1] + 255 * n, e),
-  Math.min(t[2] + 255 * n, e)
-].map(
-  (r) => Math.round(Math.max(r, i))
-), d = (t, n) => t.map((o) => Math.max(0, o - o * n)), m = (t, n) => n === void 0 ? `rgb(${t[0]}, ${t[1]}, ${t[2]})` : `rgba(${t[0]}, ${t[1]}, ${t[2]}, ${n})`;
+};
 export {
-  m as arrayToRgbString,
-  h as csx,
-  d as darkenRGBColor,
-  c as handleInternalNavigation,
-  l as isUrlExternal,
-  u as lightenRGBColor
+  d as arrayToRgbString,
+  p as contrastColor,
+  w as csx,
+  $ as handleInternalNavigation,
+  M as isUrlExternal,
+  r as luminance
 };
 //# sourceMappingURL=utils.es.js.map

package/dist/utils.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.es.js","sources":["../src/utils/index.ts"],"sourcesContent":["const isString = (x: unknown): boolean =>\r\n  typeof x === \"string\" || x instanceof String;\r\n\r\nexport function csx(...classnames: unknown[]): string {\r\n  return classnames.filter(isString).join(\" \");\r\n}\r\n\r\n/**\r\n * [getLinkHost] - get the host of a link.\r\n * Referenced from is-url-external npm package\r\n * https://github.com/mrded/is-url-external/blob/master/index.js\r\n */\r\nconst getLinkHost = (url) => {\r\n  if (/^https?:\\/\\//.test(url)) {\r\n    // Absolute URL.\r\n    // The easy way to parse an URL, is to create <a> element.\r\n    // @see: https://gist.github.com/jlong/2428561\r\n    const parser = document.createElement(\"a\");\r\n    parser.href = url;\r\n    return parser.hostname;\r\n  }\r\n  return window.location.hostname;\r\n};\r\n\r\n/**\r\n * [isUrlExternal] - determine if passed absolute url is external to the current domain.\r\n */\r\nexport const isUrlExternal = (url) => {\r\n  const host = window.location.hostname;\r\n  const linkHost = getLinkHost(url);\r\n\r\n  return host !== linkHost;\r\n};\r\n\r\n/**\r\n * Handles internal navigation clicks by preventing default browser behavior and\r\n * programmatically updating the URL and history state.\r\n *\r\n * @param e - The click event from the anchor element\r\n * @param to - The destination path to navigate to\r\n *\r\n * @remarks\r\n * - Converts relative paths to absolute by prepending \"/\" if needed\r\n * - Updates browser history using pushState and dispatches a popstate event\r\n */\r\nexport const handleInternalNavigation = (\r\n  e: React.MouseEvent<HTMLAnchorElement>,\r\n  to: string\r\n) => {\r\n  // Don't handle navigation if modifier keys are pressed\r\n  if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) {\r\n    return;\r\n  }\r\n\r\n  // Don't handle middle clicks or right clicks\r\n  if (e.button && e.button !== 0) {\r\n    return;\r\n  }\r\n\r\n  e.preventDefault();\r\n\r\n  // Handle relative paths\r\n  const resolvedPath = to.startsWith(\"/\") ? to : `/${to}`;\r\n  window.history.pushState({}, \"\", resolvedPath);\r\n  window.dispatchEvent(new PopStateEvent(\"popstate\"));\r\n};\r\n\r\nexport type RGBArray = [number, number, number];\r\n\r\nconst ceilColor = 179;\r\nconst floorColor = 42;\r\n\r\n/**\r\n * Lightens an RGB color by a specified factor.\r\n * @param rgb - The RGB color array to lighten.\r\n * @param factor - The factor between 0 (darker) - 1 (lighter) by which to transform the color.\r\n * @returns The lightened RGB color array, RGB values are clamped to 42 (dark) - 179 (light).\r\n */\r\nexport const lightenRGBColor = (rgb: RGBArray, factor: number): RGBArray => {\r\n  const lightenedRGB = [\r\n    Math.min(rgb[0] + 255 * factor, ceilColor),\r\n    Math.min(rgb[1] + 255 * factor, ceilColor),\r\n    Math.min(rgb[2] + 255 * factor, ceilColor),\r\n  ];\r\n\r\n  return lightenedRGB.map((value) =>\r\n    Math.round(Math.max(value, floorColor))\r\n  ) as RGBArray;\r\n};\r\n\r\n/**\r\n * Darkens an RGB color by a specified factor.\r\n * @param color - The RGB color array to darken.\r\n * @param factor - The factor between 0 (lighter) - 1 (darker) by which to transform the color.\r\n * @returns The darkened RGB color array, RGB values are clamped to 0 (light) - 255 (dark).\r\n */\r\n\r\nexport const darkenRGBColor = (color: RGBArray, factor: number): RGBArray => {\r\n  return color.map((c) => Math.max(0, c - c * factor)) as RGBArray;\r\n};\r\n\r\n/**\r\n * Converts an RGB array to a CSS string representation.\r\n * @param rgb - The RGB array to convert.\r\n * @param opacity - Optional opacity value.\r\n * @returns A CSS string representation of the RGB array, using `rgb()`, or `rgba()` if an opacity value is provided.\r\n */\r\nexport const arrayToRgbString = (rgb: RGBArray, opacity?: number): string => {\r\n  return opacity === undefined\r\n    ? `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`\r\n    : `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`;\r\n};\r\n"],"names":["isString","x","csx","classnames","getLinkHost","url","parser","isUrlExternal","host","linkHost","handleInternalNavigation","e","to","resolvedPath","ceilColor","floorColor","lightenRGBColor","rgb","factor","value","darkenRGBColor","color","c","arrayToRgbString","opacity"],"mappings":"AAAA,MAAMA,IAAW,CAACC,MAChB,OAAOA,KAAM,YAAYA,aAAa;AAEjC,SAASC,KAAOC,GAA+B;AACpD,SAAOA,EAAW,OAAOH,CAAQ,EAAE,KAAK,GAAG;AAC7C;AAOA,MAAMI,IAAc,CAACC,MAAQ;AACvB,MAAA,eAAe,KAAKA,CAAG,GAAG;AAItB,UAAAC,IAAS,SAAS,cAAc,GAAG;AACzC,WAAAA,EAAO,OAAOD,GACPC,EAAO;AAAA,EAChB;AACA,SAAO,OAAO,SAAS;AACzB,GAKaC,IAAgB,CAACF,MAAQ;AAC9B,QAAAG,IAAO,OAAO,SAAS,UACvBC,IAAWL,EAAYC,CAAG;AAEhC,SAAOG,MAASC;AAClB,GAaaC,IAA2B,CACtCC,GACAC,MACG;AAOH,MALID,EAAE,WAAWA,EAAE,UAAUA,EAAE,WAAWA,EAAE,YAKxCA,EAAE,UAAUA,EAAE,WAAW;AAC3B;AAGF,EAAAA,EAAE,eAAe;AAGjB,QAAME,IAAeD,EAAG,WAAW,GAAG,IAAIA,IAAK,IAAIA,CAAE;AACrD,SAAO,QAAQ,UAAU,CAAC,GAAG,IAAIC,CAAY,GAC7C,OAAO,cAAc,IAAI,cAAc,UAAU,CAAC;AACpD,GAIMC,IAAY,KACZC,IAAa,IAQNC,IAAkB,CAACC,GAAeC,MACxB;AAAA,EACnB,KAAK,IAAID,EAAI,CAAC,IAAI,MAAMC,GAAQJ,CAAS;AAAA,EACzC,KAAK,IAAIG,EAAI,CAAC,IAAI,MAAMC,GAAQJ,CAAS;AAAA,EACzC,KAAK,IAAIG,EAAI,CAAC,IAAI,MAAMC,GAAQJ,CAAS;AAAA,EAGvB;AAAA,EAAI,CAACK,MACvB,KAAK,MAAM,KAAK,IAAIA,GAAOJ,CAAU,CAAC;AAAA,GAW7BK,IAAiB,CAACC,GAAiBH,MACvCG,EAAM,IAAI,CAACC,MAAM,KAAK,IAAI,GAAGA,IAAIA,IAAIJ,CAAM,CAAC,GASxCK,IAAmB,CAACN,GAAeO,MACvCA,MAAY,SACf,OAAOP,EAAI,CAAC,CAAC,KAAKA,EAAI,CAAC,CAAC,KAAKA,EAAI,CAAC,CAAC,MACnC,QAAQA,EAAI,CAAC,CAAC,KAAKA,EAAI,CAAC,CAAC,KAAKA,EAAI,CAAC,CAAC,KAAKO,CAAO;"}
+{"version":3,"file":"utils.es.js","sources":["../src/utils/color.ts","../src/utils/utils.ts"],"sourcesContent":["export type RGBArray = [number, number, number];\r\n\r\n/**\r\n * Converts an RGB array to a CSS string representation.\r\n * @param rgb - The RGB array to convert.\r\n * @param opacity - Optional opacity value.\r\n * @returns A CSS string representation of the RGB array, using `rgb()`, or `rgba()` if an opacity value is provided.\r\n */\r\nexport const arrayToRgbString = (rgb: RGBArray, opacity?: number): string => {\r\n  return opacity === undefined\r\n    ? `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`\r\n    : `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`;\r\n};\r\n\r\n/**\r\n * Calculates the relative luminance of an RGB color according to WCAG 2.2 specifications.\r\n * This is used in calculating contrast ratios between colors.\r\n *\r\n * @param param0 - RGB color array containing red, green and blue values (0-255)\r\n * @returns The relative luminance value\r\n * @see formula from https://www.w3.org/WAI/WCAG22/Techniques/general/G18 (see step 1 in `Procedure`)\r\n */\r\nexport const luminance = ([r, g, b]: RGBArray): number => {\r\n  return r * 0.2126 + g * 0.7152 + b * 0.0722;\r\n};\r\n\r\nconst invertColor = (rgb: RGBArray): RGBArray => {\r\n  return rgb.map((value) => 255 - value) as RGBArray;\r\n};\r\n\r\n\r\nconst contrastRatio = (color1: RGBArray, color2: RGBArray): number => {\r\n  const luminance1 = luminance(color1);\r\n  const luminance2 = luminance(color2);\r\n\r\n  return (\r\n    (Math.max(luminance1, luminance2) + 0.05) /\r\n    (Math.min(luminance1, luminance2) + 0.05)\r\n  );\r\n};\r\n\r\n/**\r\n * Inverts an input color and returns the result after adjustment to ensure a minimum contrast ratio.\r\n *\r\n * @param color - The RGB color array to invert.\r\n * @param minContrast - The contrast ratio to exceed. Defaults to 4.5, which is the minimum for text to be considered accessible.\r\n */\r\n\r\nexport const contrastColor = (\r\n  color: RGBArray,\r\n  minContrast: number = 4.5\r\n): RGBArray => {\r\n  const newColor = invertColor(color);\r\n  const contrast = contrastRatio(color, newColor);\r\n  if (contrast >= minContrast) return newColor;\r\n\r\n  const colorLuminance = luminance(color);\r\n  const isColorDark = colorLuminance < 128;\r\n\r\n  if (isColorDark && colorLuminance > 255 / minContrast) {\r\n    return [255, 255, 255]; // not dark enough to find color meeting minimum contrast, return white\r\n  }\r\n\r\n  const newColorLuminance = luminance(newColor);\r\n\r\n  const difference =\r\n    (Math.min(colorLuminance, newColorLuminance) + 0.05) * minContrast -\r\n    (Math.max(colorLuminance, newColorLuminance) + 0.05);\r\n\r\n  return isColorDark\r\n    ? (newColor.map((value) =>\r\n        Math.min(255, Math.round(value + difference))\r\n      ) as RGBArray)\r\n    : (newColor.map((value) =>\r\n        Math.max(0, Math.round(value - difference))\r\n      ) as RGBArray);\r\n};\r\n","const isString = (x: unknown): boolean =>\r\n  typeof x === \"string\" || x instanceof String;\r\n\r\nexport function csx(...classnames: unknown[]): string {\r\n  return classnames.filter(isString).join(\" \");\r\n}\r\n\r\n/**\r\n * [getLinkHost] - get the host of a link.\r\n * Referenced from is-url-external npm package\r\n * https://github.com/mrded/is-url-external/blob/master/index.js\r\n */\r\nconst getLinkHost = (url) => {\r\n  if (/^https?:\\/\\//.test(url)) {\r\n    // Absolute URL.\r\n    // The easy way to parse an URL, is to create <a> element.\r\n    // @see: https://gist.github.com/jlong/2428561\r\n    const parser = document.createElement(\"a\");\r\n    parser.href = url;\r\n    return parser.hostname;\r\n  }\r\n  return window.location.hostname;\r\n};\r\n\r\n/**\r\n * [isUrlExternal] - determine if passed absolute url is external to the current domain.\r\n */\r\nexport const isUrlExternal = (url) => {\r\n  const host = window.location.hostname;\r\n  const linkHost = getLinkHost(url);\r\n\r\n  return host !== linkHost;\r\n};\r\n\r\n/**\r\n * Handles internal navigation clicks by preventing default browser behavior and\r\n * programmatically updating the URL and history state.\r\n *\r\n * @param e - The click event from the anchor element\r\n * @param to - The destination path to navigate to\r\n *\r\n * @remarks\r\n * - Converts relative paths to absolute by prepending \"/\" if needed\r\n * - Updates browser history using pushState and dispatches a popstate event\r\n */\r\nexport const handleInternalNavigation = (\r\n  e: React.MouseEvent<HTMLAnchorElement>,\r\n  to: string\r\n) => {\r\n  // Don't handle navigation if modifier keys are pressed\r\n  if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) {\r\n    return;\r\n  }\r\n\r\n  // Don't handle middle clicks or right clicks\r\n  if (e.button && e.button !== 0) {\r\n    return;\r\n  }\r\n\r\n  e.preventDefault();\r\n\r\n  // Handle relative paths\r\n  const resolvedPath = to.startsWith(\"/\") ? to : `/${to}`;\r\n  window.history.pushState({}, \"\", resolvedPath);\r\n  window.dispatchEvent(new PopStateEvent(\"popstate\"));\r\n};\r\n"],"names":["arrayToRgbString","rgb","opacity","luminance","r","g","b","invertColor","value","contrastRatio","color1","color2","luminance1","luminance2","contrastColor","color","minContrast","newColor","colorLuminance","isColorDark","newColorLuminance","difference","isString","x","csx","classnames","getLinkHost","url","parser","isUrlExternal","host","linkHost","handleInternalNavigation","e","to","resolvedPath"],"mappings":"AAQa,MAAAA,IAAmB,CAACC,GAAeC,MACvCA,MAAY,SACf,OAAOD,EAAI,CAAC,CAAC,KAAKA,EAAI,CAAC,CAAC,KAAKA,EAAI,CAAC,CAAC,MACnC,QAAQA,EAAI,CAAC,CAAC,KAAKA,EAAI,CAAC,CAAC,KAAKA,EAAI,CAAC,CAAC,KAAKC,CAAO,KAWzCC,IAAY,CAAC,CAACC,GAAGC,GAAGC,CAAC,MACzBF,IAAI,SAASC,IAAI,SAASC,IAAI,QAGjCC,IAAc,CAACN,MACZA,EAAI,IAAI,CAACO,MAAU,MAAMA,CAAK,GAIjCC,IAAgB,CAACC,GAAkBC,MAA6B;AAC9D,QAAAC,IAAaT,EAAUO,CAAM,GAC7BG,IAAaV,EAAUQ,CAAM;AAGhC,UAAA,KAAK,IAAIC,GAAYC,CAAU,IAAI,SACnC,KAAK,IAAID,GAAYC,CAAU,IAAI;AAExC,GASaC,IAAgB,CAC3BC,GACAC,IAAsB,QACT;AACP,QAAAC,IAAWV,EAAYQ,CAAK;AAE9B,MADaN,EAAcM,GAAOE,CAAQ,KAC9BD,EAAoB,QAAAC;AAE9B,QAAAC,IAAiBf,EAAUY,CAAK,GAChCI,IAAcD,IAAiB;AAEjC,MAAAC,KAAeD,IAAiB,MAAMF;AACjC,WAAA,CAAC,KAAK,KAAK,GAAG;AAGjB,QAAAI,IAAoBjB,EAAUc,CAAQ,GAEtCI,KACH,KAAK,IAAIH,GAAgBE,CAAiB,IAAI,QAAQJ,KACtD,KAAK,IAAIE,GAAgBE,CAAiB,IAAI;AAEjD,SAAOD,IACFF,EAAS;AAAA,IAAI,CAACT,MACb,KAAK,IAAI,KAAK,KAAK,MAAMA,IAAQa,CAAU,CAAC;AAAA,MAE7CJ,EAAS;AAAA,IAAI,CAACT,MACb,KAAK,IAAI,GAAG,KAAK,MAAMA,IAAQa,CAAU,CAAC;AAAA,EAAA;AAElD,GC5EMC,IAAW,CAACC,MAChB,OAAOA,KAAM,YAAYA,aAAa;AAEjC,SAASC,KAAOC,GAA+B;AACpD,SAAOA,EAAW,OAAOH,CAAQ,EAAE,KAAK,GAAG;AAC7C;AAOA,MAAMI,IAAc,CAACC,MAAQ;AACvB,MAAA,eAAe,KAAKA,CAAG,GAAG;AAItB,UAAAC,IAAS,SAAS,cAAc,GAAG;AACzC,WAAAA,EAAO,OAAOD,GACPC,EAAO;AAAA,EAChB;AACA,SAAO,OAAO,SAAS;AACzB,GAKaC,IAAgB,CAACF,MAAQ;AAC9B,QAAAG,IAAO,OAAO,SAAS,UACvBC,IAAWL,EAAYC,CAAG;AAEhC,SAAOG,MAASC;AAClB,GAaaC,IAA2B,CACtCC,GACAC,MACG;AAOH,MALID,EAAE,WAAWA,EAAE,UAAUA,EAAE,WAAWA,EAAE,YAKxCA,EAAE,UAAUA,EAAE,WAAW;AAC3B;AAGF,EAAAA,EAAE,eAAe;AAGjB,QAAME,IAAeD,EAAG,WAAW,GAAG,IAAIA,IAAK,IAAIA,CAAE;AACrD,SAAO,QAAQ,UAAU,CAAC,GAAG,IAAIC,CAAY,GAC7C,OAAO,cAAc,IAAI,cAAc,UAAU,CAAC;AACpD;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protonradio/proton-ui",
-  "version": "0.6.16",
+  "version": "0.6.18-beta.1",
   "description": "",
   "main": "./dist/proton-ui.umd.js",
   "module": "./dist/proton-ui.es.js",
@@ -54,6 +54,7 @@
   "license": "MIT",
   "dependencies": {
     "@storybook/cli": "^8.4.2",
+    "chroma-js": "^3.1.2",
     "react": "^18.3.1",
     "react-aria": "^3.35.1",
     "react-aria-components": "^1.4.1",

package/dist/index-BCAZu2vD.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-BCAZu2vD.mjs","sources":["../src/constants/colors.ts","../src/constants/index.ts"],"sourcesContent":["export const BRAND = {\r\n  PRIMARY: \"#E26014\",\r\n  PRIMARY_LIGHT: \"#FBE5D7\",\r\n  SECONDARY: \"#F2F2F2\",\r\n};\r\n\r\nconst LIGHT_GRAY = \"#DDDDDD\";\r\nexport const GRAYSCALE = {\r\n  GRAY_SUPER_DARK: \"#141211\",\r\n  GRAY_DARK: \"#4D4D4D\",\r\n  GRAY_MEDIUM: \"#7D7D7D\",\r\n  GRAY_MEDIUM_LIGHT: \"#B1B1B1\",\r\n  GRAY_LIGHT: LIGHT_GRAY,\r\n  GRAY_LIGHTEST: \"#F0F1F2\",\r\n  GRAY_SUPER_LIGHT: \"#F7F8F9\",\r\n  WHITE: \"#FFFFFF\",\r\n  BORDER: LIGHT_GRAY,\r\n};\r\n\r\nexport const DANGER = {\r\n  SUPER_DARK: \"#991b1b\",\r\n  DARK: \"#b91c1c\",\r\n  MEDIUM: \"#e33939\",\r\n  LIGHT: \"#f87171\",\r\n  SUPER_LIGHT: \"#fef2f2\",\r\n};\r\n\r\nexport const WARNING = {\r\n  DARK: \"#854d0e\",\r\n  MEDIUM: \"#a16207\",\r\n  LIGHT: \"#facc15\",\r\n  SUPER_LIGHT: \"#fffbd2\",\r\n};\r\n\r\nexport const SUCCESS = {\r\n  DARK: \"#166534\",\r\n  MEDIUM: \"#15803d\",\r\n  LIGHT: \"#4ade80\",\r\n  SUPER_LIGHT: \"#f0fdf4\",\r\n};\r\n","import { Placement } from \"react-aria\";\r\n\r\nexport * as COLORS from \"./colors\";\r\n\r\nexport const THEMES = {\r\n  DARK: \"dark\",\r\n  LIGHT: \"light\",\r\n} as const;\r\n\r\nexport type Theme = (typeof THEMES)[keyof typeof THEMES];\r\n\r\nexport const placements: Placement[] = [\r\n  \"bottom\",\r\n  \"bottom left\",\r\n  \"bottom right\",\r\n  \"bottom start\",\r\n  \"bottom end\",\r\n  \"top\",\r\n  \"top left\",\r\n  \"top right\",\r\n  \"top start\",\r\n  \"top end\",\r\n  \"left\",\r\n  \"left top\",\r\n  \"left bottom\",\r\n  \"start\",\r\n  \"start top\",\r\n  \"start bottom\",\r\n  \"right\",\r\n  \"right top\",\r\n  \"right bottom\",\r\n  \"end\",\r\n  \"end top\",\r\n  \"end bottom\",\r\n];\r\n\r\nexport const BREAKPOINTS = {\r\n  SMALL: 576,\r\n  MEDIUM: 768,\r\n  LARGE: 992,\r\n  X_LARGE: 1200,\r\n};\r\n\r\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\r\n"],"names":["BRAND","LIGHT_GRAY","GRAYSCALE","DANGER","WARNING","SUCCESS","THEMES","placements","BREAKPOINTS"],"mappings":"AAAO,MAAMA,IAAQ;AAAA,EACnB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,WAAW;AACb,GAEMC,IAAa,WACNC,IAAY;AAAA,EACvB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,YAAYD;AAAA,EACZ,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,QAAQA;AACV,GAEaE,IAAS;AAAA,EACpB,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf,GAEaC,IAAU;AAAA,EACrB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf,GAEaC,IAAU;AAAA,EACrB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf;;;;;;;8CCnCaC,IAAS;AAAA,EACpB,MAAM;AAAA,EACN,OAAO;AACT,GAIaC,IAA0B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEaC,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AACX;"}

package/dist/index-Dcfu6hWE.js

@@ -1,2 +0,0 @@
-"use strict";const D={PRIMARY:"#E26014",PRIMARY_LIGHT:"#FBE5D7",SECONDARY:"#F2F2F2"},t="#DDDDDD",o={GRAY_SUPER_DARK:"#141211",GRAY_DARK:"#4D4D4D",GRAY_MEDIUM:"#7D7D7D",GRAY_MEDIUM_LIGHT:"#B1B1B1",GRAY_LIGHT:t,GRAY_LIGHTEST:"#F0F1F2",GRAY_SUPER_LIGHT:"#F7F8F9",WHITE:"#FFFFFF",BORDER:t},R={SUPER_DARK:"#991b1b",DARK:"#b91c1c",MEDIUM:"#e33939",LIGHT:"#f87171",SUPER_LIGHT:"#fef2f2"},A={DARK:"#854d0e",MEDIUM:"#a16207",LIGHT:"#facc15",SUPER_LIGHT:"#fffbd2"},E={DARK:"#166534",MEDIUM:"#15803d",LIGHT:"#4ade80",SUPER_LIGHT:"#f0fdf4"},e=Object.freeze(Object.defineProperty({__proto__:null,BRAND:D,DANGER:R,GRAYSCALE:o,SUCCESS:E,WARNING:A},Symbol.toStringTag,{value:"Module"})),G={DARK:"dark",LIGHT:"light"},I=["bottom","bottom left","bottom right","bottom start","bottom end","top","top left","top right","top start","top end","left","left top","left bottom","start","start top","start bottom","right","right top","right bottom","end","end top","end bottom"],S={SMALL:576,MEDIUM:768,LARGE:992,X_LARGE:1200};exports.BREAKPOINTS=S;exports.DANGER=R;exports.GRAYSCALE=o;exports.SUCCESS=E;exports.THEMES=G;exports.WARNING=A;exports.colors=e;exports.placements=I;
-//# sourceMappingURL=index-Dcfu6hWE.js.map

package/dist/index-Dcfu6hWE.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index-Dcfu6hWE.js","sources":["../src/constants/colors.ts","../src/constants/index.ts"],"sourcesContent":["export const BRAND = {\r\n  PRIMARY: \"#E26014\",\r\n  PRIMARY_LIGHT: \"#FBE5D7\",\r\n  SECONDARY: \"#F2F2F2\",\r\n};\r\n\r\nconst LIGHT_GRAY = \"#DDDDDD\";\r\nexport const GRAYSCALE = {\r\n  GRAY_SUPER_DARK: \"#141211\",\r\n  GRAY_DARK: \"#4D4D4D\",\r\n  GRAY_MEDIUM: \"#7D7D7D\",\r\n  GRAY_MEDIUM_LIGHT: \"#B1B1B1\",\r\n  GRAY_LIGHT: LIGHT_GRAY,\r\n  GRAY_LIGHTEST: \"#F0F1F2\",\r\n  GRAY_SUPER_LIGHT: \"#F7F8F9\",\r\n  WHITE: \"#FFFFFF\",\r\n  BORDER: LIGHT_GRAY,\r\n};\r\n\r\nexport const DANGER = {\r\n  SUPER_DARK: \"#991b1b\",\r\n  DARK: \"#b91c1c\",\r\n  MEDIUM: \"#e33939\",\r\n  LIGHT: \"#f87171\",\r\n  SUPER_LIGHT: \"#fef2f2\",\r\n};\r\n\r\nexport const WARNING = {\r\n  DARK: \"#854d0e\",\r\n  MEDIUM: \"#a16207\",\r\n  LIGHT: \"#facc15\",\r\n  SUPER_LIGHT: \"#fffbd2\",\r\n};\r\n\r\nexport const SUCCESS = {\r\n  DARK: \"#166534\",\r\n  MEDIUM: \"#15803d\",\r\n  LIGHT: \"#4ade80\",\r\n  SUPER_LIGHT: \"#f0fdf4\",\r\n};\r\n","import { Placement } from \"react-aria\";\r\n\r\nexport * as COLORS from \"./colors\";\r\n\r\nexport const THEMES = {\r\n  DARK: \"dark\",\r\n  LIGHT: \"light\",\r\n} as const;\r\n\r\nexport type Theme = (typeof THEMES)[keyof typeof THEMES];\r\n\r\nexport const placements: Placement[] = [\r\n  \"bottom\",\r\n  \"bottom left\",\r\n  \"bottom right\",\r\n  \"bottom start\",\r\n  \"bottom end\",\r\n  \"top\",\r\n  \"top left\",\r\n  \"top right\",\r\n  \"top start\",\r\n  \"top end\",\r\n  \"left\",\r\n  \"left top\",\r\n  \"left bottom\",\r\n  \"start\",\r\n  \"start top\",\r\n  \"start bottom\",\r\n  \"right\",\r\n  \"right top\",\r\n  \"right bottom\",\r\n  \"end\",\r\n  \"end top\",\r\n  \"end bottom\",\r\n];\r\n\r\nexport const BREAKPOINTS = {\r\n  SMALL: 576,\r\n  MEDIUM: 768,\r\n  LARGE: 992,\r\n  X_LARGE: 1200,\r\n};\r\n\r\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\r\n"],"names":["BRAND","LIGHT_GRAY","GRAYSCALE","DANGER","WARNING","SUCCESS","THEMES","placements","BREAKPOINTS"],"mappings":"aAAO,MAAMA,EAAQ,CACnB,QAAS,UACT,cAAe,UACf,UAAW,SACb,EAEMC,EAAa,UACNC,EAAY,CACvB,gBAAiB,UACjB,UAAW,UACX,YAAa,UACb,kBAAmB,UACnB,WAAYD,EACZ,cAAe,UACf,iBAAkB,UAClB,MAAO,UACP,OAAQA,CACV,EAEaE,EAAS,CACpB,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf,EAEaC,EAAU,CACrB,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf,EAEaC,EAAU,CACrB,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf,gJCnCaC,EAAS,CACpB,KAAM,OACN,MAAO,OACT,EAIaC,EAA0B,CACrC,SACA,cACA,eACA,eACA,aACA,MACA,WACA,YACA,YACA,UACA,OACA,WACA,cACA,QACA,YACA,eACA,QACA,YACA,eACA,MACA,UACA,YACF,EAEaC,EAAc,CACzB,MAAO,IACP,OAAQ,IACR,MAAO,IACP,QAAS,IACX"}