@uh-design-system/component-library 0.7.1 → 0.7.2-rc.0

package/dist/component-library/ds-option_4.entry.js

@@ -1 +0,0 @@
-import{h as s,r as t,a as e,c as o}from"./index-CIXO9B7A.js";import{d as i,t as l,i as a}from"./utils-hnAo1pVs.js";import{c as d}from"./index-BfTCfPZ1.js";const n=class{constructor(s){t(this,s)}get el(){return e(this)}dsValue;dsDisabled=!1;dsDescription;dsActive=!1;dsSelected=!1;internalTabIndex=-1;optionRef;dsActiveObserver(s){this.internalTabIndex=s&&!this.dsDisabled?0:-1,s&&!this.dsDisabled&&this.dsFocus()}async dsFocus(){this.optionRef?.focus()}componentWillLoad(){this.internalTabIndex=this.dsActive&&!this.dsDisabled?0:-1}render(){const t=l("ds-icon","ds-option",this.el);return s("div",{key:"b051e2ccd61a02f1c33e5c74f7f66dec856e1d04",ref:s=>this.optionRef=s,class:{option:!0,active:this.dsActive,selected:this.dsSelected,disabled:this.dsDisabled},role:"option","aria-selected":String(this.dsSelected),"aria-disabled":String(this.dsDisabled),tabIndex:this.internalTabIndex},s("span",{key:"8114317ed212116893f288753be27bc57487218c",class:"option-label"},s("slot",{key:"edc1ae43b1d32fd4d145e6f5c5bb296202e4f6bf"}),this.dsDescription&&s("span",{key:"7a250b046d95c7bd74d742029100d7aed9a0b032",class:"option-description"},this.dsDescription)),this.dsSelected&&s(t,{key:"23432b9e3f29189c6030003e61c02be9469a8a2e",dsName:"check",class:"option-check","aria-hidden":"true"}))}static get watchers(){return{dsActive:["dsActiveObserver"]}}};i([s("ds-icon",null)]),n.style=".sc-ds-option:root,.sc-ds-option-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.option.sc-ds-option{display:flex;align-items:center;justify-content:space-between;min-height:2.5rem;padding:0.625rem var(--ds-spacing-small);position:relative;cursor:pointer;background-color:var(--ds-palette-white);color:var(--ds-palette-black-95)}.option.sc-ds-option:hover{background-color:var(--ds-palette-black-10)}.option.sc-ds-option:active{background-color:var(--ds-palette-black-20)}.option.active.sc-ds-option{box-shadow:inset 0 0 0 var(--ds-borderWidth-thick) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * -1 * 1)}.option.selected.sc-ds-option{background-color:var(--ds-palette-mainBlue-70);color:var(--ds-palette-white)}.option.selected.sc-ds-option .check-icon.sc-ds-option{visibility:visible;color:var(--ds-palette-white)}.option.selected.sc-ds-option:hover{background-color:var(--ds-palette-mainBlue-80)}.option.selected.sc-ds-option:active{background-color:var(--ds-palette-mainBlue-90)}.option.sc-ds-option .option-label.sc-ds-option{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;grid-column:1;grid-row:1}.option.sc-ds-option .check-icon.sc-ds-option{grid-column:2;grid-row:1/span 2;align-self:center;justify-self:end;margin-left:auto;visibility:hidden}.option.sc-ds-option .option-description.sc-ds-option{color:var(--ds-palette-black-70);font-size:var(--ds-fontSize-14);margin-top:var(--ds-spacing-3xSmall);line-height:1.3;grid-column:1;grid-row:2}.option.sc-ds-option .option-description.sc-ds-option:not(:empty){display:block}.option.selected.sc-ds-option .option-description.sc-ds-option{color:var(--ds-palette-white)}.option.sc-ds-option .option-check.sc-ds-option{margin-left:var(--ds-spacing-small);flex-shrink:0;display:flex;align-items:center;height:100%}";const r=class{constructor(s){t(this,s)}dsLabel;groupId;dsLabelObserver(s){this.groupId=`ds-option-group-label-${s.replace(/\s+/g,"-").toLowerCase()}`}componentWillLoad(){this.groupId=`ds-option-group-label-${this.dsLabel.replace(/\s+/g,"-").toLowerCase()}`}render(){return s("div",{key:"c764a70cf7cd2881404ea90b114957227259d37c",class:"group",role:"group","aria-labelledby":this.groupId},s("div",{key:"6a38a5db89ff8462704c740a7921e40312a9f466",class:"group-label",id:this.groupId},this.dsLabel),s("slot",{key:"b6bac535b5c569175f9fb84550d823829208142b"}))}static get watchers(){return{dsLabel:["dsLabelObserver"]}}};r.style=".group.sc-ds-option-group ul.sc-ds-option-group{padding:0}.group-label.sc-ds-option-group{position:sticky;display:block;top:0;background-color:var(--ds-palette-black-03);z-index:1;padding:var(--ds-spacing-2xSmall);font-size:var(--ds-fontSize-14);font-weight:var(--ds-fontWeight-semibold)}.group-label.shadow.sc-ds-option-group{box-shadow:0 -2px 7px var(--ds-overlay-black-50)}";const c=class{constructor(s){t(this,s),this.dsOptionsEsc=o(this,"dsOptionsEsc"),this.dsOptionsActiveIndexChange=o(this,"dsOptionsActiveIndexChange")}get el(){return e(this)}optionsListRef;optionsListInnerRef;dsSelectedValue;dsOptions=[];dsActiveIndex=0;dsLabelId;dsLoading=!1;dsLoadingText="Loading options...";dsOptionsEsc;dsOptionsActiveIndexChange;onActiveIndexChange(){setTimeout((()=>this.focusActiveOption()),0)}componentDidLoad(){this.updateScrimClasses()}componentDidUpdate(){this.updateScrimClasses()}handleScroll=()=>{this.updateScrimClasses()};updateScrimClasses=()=>{const s=this.optionsListRef,t=this.optionsListInnerRef;if(!s||!t)return;const e=0===t.scrollTop,o=Math.ceil(t.scrollTop+t.clientHeight)>=t.scrollHeight;s.classList.toggle("has-top-scrim",!e),s.classList.toggle("has-bottom-scrim",!o),s.querySelectorAll(".group-label").forEach((e=>{const o=e.getBoundingClientRect(),i=s.getBoundingClientRect();t.scrollTop>0&&o.top<=i.top&&o.bottom>i.top?e.classList.add("shadow"):e.classList.remove("shadow")}))};get DsOptionTag(){return l("ds-option","ds-options",this.el)}focusActiveOption(){const s=Array.from(this.el.querySelectorAll(this.DsOptionTag));s[this.dsActiveIndex]&&s[this.dsActiveIndex].focus()}handleKeyDown=s=>{const t=Array.from(this.el.querySelectorAll(this.DsOptionTag));if(!t.length)return;let e=this.dsActiveIndex;if("ArrowDown"===s.key){s.preventDefault();let o=0;do{if(e=(e+1)%t.length,o++,o>2*t.length)break}while(t[e].dsDisabled&&e!==this.dsActiveIndex);this.dsActiveIndex=e,this.dsOptionsActiveIndexChange.emit(this.dsActiveIndex)}if("ArrowUp"===s.key){s.preventDefault();let o=0;do{if(e=(e-1+t.length)%t.length,o++,o>2*t.length)break}while(t[e].dsDisabled&&e!==this.dsActiveIndex);this.dsActiveIndex=e,this.dsOptionsActiveIndexChange.emit(this.dsActiveIndex)}if("Enter"===s.key||" "===s.key){s.preventDefault();const e=t[this.dsActiveIndex];e&&!e.dsDisabled&&e.click()}if("Tab"===s.key){const s=t[this.dsActiveIndex];s&&!s.dsDisabled&&(s.click(),this.dsOptionsEsc.emit())}"Escape"===s.key&&(s.preventDefault(),this.dsOptionsEsc.emit())};dsOptionsError=!1;dsOptionsErrorTitle="We couldn’t load the options";dsOptionsErrorText="Try again or if the problem persists contact support.";render(){const t=l("ds-icon","ds-options",this.el),e=l("ds-spinner","ds-options",this.el);return s("div",{key:"656aaa2ab4989958bf7d33914df5f082c91f7477",class:"options-list",role:"listbox",tabindex:0,"aria-labelledby":this.dsLabelId,onKeyDown:this.handleKeyDown,ref:s=>this.optionsListRef=s,onScroll:this.handleScroll,onFocus:this.updateScrimClasses},s("slot",{key:"9aaef6b026ca0b5d8c7264ee69457df801fbdc19",name:"groups"}),s("div",{key:"399b0989af2d6cd0eadc10e18b10e2dac2e0f976",class:"options-list-inner",ref:s=>this.optionsListInnerRef=s,onScroll:this.handleScroll},s("div",{key:"5eabc020be41e0fb2afcdb5c4e2cb3519212ac00",class:"top-scrim","aria-hidden":"true"}),this.dsOptionsError?s("div",{class:"options-error"},s(t,{dsName:"warning",dsSize:"2rem",class:"options-error-icon"}),s("div",{class:"options-error--error-message"},s("div",{class:"options-error--error-title"},this.dsOptionsErrorTitle),s("div",{class:"options-error--error-text"},this.dsOptionsErrorText))):this.dsLoading?s("div",{class:"options-loading"},s(e,{dsSize:"large"}),s("div",{class:"options-loading--loading-text"},this.dsLoadingText)):s("slot",null),s("div",{key:"a3180baebc60c132bd328e10fa77a554642a9d22",class:"bottom-scrim","aria-hidden":"true"})))}static get watchers(){return{dsActiveIndex:["onActiveIndexChange"]}}};i([s("ds-icon",null),s("ds-spinner",null)]),c.style=".options-list-inner.sc-ds-options,.options-loading.sc-ds-options,.options-error.sc-ds-options{max-height:20rem;overflow:hidden;box-sizing:border-box}.options-list.sc-ds-options{position:relative;width:100%;padding:0;margin:0;z-index:0}.options-list.sc-ds-options:focus{outline:none}.options-list-inner.sc-ds-options,.options-loading.sc-ds-options,.options-error.sc-ds-options{overflow-y:auto;list-style-type:none;padding:0;margin:0;width:100%;position:relative;display:flex;flex-direction:column}.options-loading.sc-ds-options,.options-error.sc-ds-options{height:18.5rem;align-items:center;justify-content:center}.options-loading--loading-text.sc-ds-options{padding-top:var(--ds-spacing-2xSmall);padding-bottom:var(--ds-spacing-large);text-align:center}.options-error.sc-ds-options{color:var(--ds-palette-red-70)}.options-error--error-message.sc-ds-options{color:var(--ds-palette-black-95);text-align:center}.options-error--error-title.sc-ds-options{font-size:var(--ds-fontSize-18);font-weight:var(--ds-fontWeight-semibold);margin-top:var(--ds-spacing-xSmall);margin-bottom:var(--ds-spacing-2xSmall)}.options-error--error-text.sc-ds-options{padding-bottom:var(--ds-spacing-small)}.top-scrim.sc-ds-options,.bottom-scrim.sc-ds-options{pointer-events:none;width:100%;height:2.75rem;flex:0 0 auto;min-height:0;position:sticky;z-index:1;display:none}.top-scrim.sc-ds-options{top:0;background:linear-gradient(to bottom, var(--ds-palette-white) 0%, var(--ds-overlay-white-00) 100%)}.bottom-scrim.sc-ds-options{bottom:0;background:linear-gradient(to top, var(--ds-palette-white) 0%, var(--ds-overlay-white-00) 100%)}.options-list.has-top-scrim.sc-ds-options .top-scrim.sc-ds-options{display:block}.options-list.has-bottom-scrim.sc-ds-options .bottom-scrim.sc-ds-options{display:block}li.sc-ds-options{cursor:pointer}li.sc-ds-options:hover{background-color:var(--ds-palette-black-05)}";const p=a("ds-select"),h=class{constructor(s){t(this,s),this.dsChange=o(this,"dsChange")}get el(){return e(this)}dsId=p.next().value;dsTitle="Default Select";dsPlaceholder="Select an option";dsVariant="default";dsClearable=!0;dsDisabled=!1;dsInvalid=!1;dsErrorText="";dsIcon;dsValue=null;dsLoading=!1;dsLoadingText="Loading options...";dsOptionsError=!1;dsOptionsErrorTitle="We couldn’t load the options";dsOptionsErrorText="Try again or if the problem persists contact support.";selectedOption=null;isOpen=!1;activeIndex=null;inputValidityId=`${this.dsId}-validity`;dsChange;connectedCallback(){this.el.addEventListener("focusout",this.handleFocusOut)}disconnectedCallback(){this.el.removeEventListener("focusout",this.handleFocusOut)}get DsIconTag(){return l("ds-icon","ds-select",this.el)}get DsInputValidityTag(){return l("ds-input-validity","ds-select",this.el)}get DsOptionTag(){return l("ds-option","ds-select",this.el)}customSelectRef;nativeSelectRef;handleFocusOut=s=>{const t=s&&"relatedTarget"in s?s.relatedTarget:null;!this.isOpen||t&&this.el.contains(t)||(this.isOpen=!1)};handleOptionSelect(s){this.dsDisabled||(this.selectedOption=s.label,this.dsValue=s.dsValue,this.isOpen=!1,this.dsChange.emit(s.dsValue))}selectOption(s){if(!s)return;if(s.dsDisabled)return;const t=s.querySelector(".option-label");let e="";if(t){const s=t.querySelector(".option-description");e=s?t.textContent?.replace(s.textContent||"","").trim()||"":t.textContent?.trim()||""}else e=s.textContent?.trim()||"";this.selectedOption=e,this.dsValue=s.dsValue;const o=this.getAllOptions().findIndex((t=>String(t.dsValue)===String(s.dsValue)));-1!==o&&(this.activeIndex=o),this.isOpen=!1,this.dsChange.emit(s.dsValue);const i=this.el.querySelector(`[id="${this.dsId}"]`);i?.focus()}toggleDropdown(){this.dsDisabled||(this.isOpen=!this.isOpen,this.isOpen&&setTimeout((()=>{const s=this.getAllOptions();let t=0;if(this.dsValue){const e=s.findIndex((s=>String(s.dsValue)===String(this.dsValue)));t=-1!==e?e:0}else{const e=s.findIndex((s=>!s.dsDisabled));t=-1!==e?e:0}this.activeIndex=t,this.scrollToActiveOption();const e=this.el.querySelectorAll(this.DsOptionTag)[this.activeIndex];e?.focus()}),0))}handleClearSelection(){if(this.dsDisabled)return;this.selectedOption=null,this.dsValue=null;const s=this.getAllOptions().findIndex((s=>!s.dsDisabled));this.activeIndex=-1!==s?s:0,this.isOpen=!1,this.dsChange.emit(null);const t=this.el.querySelector(`[id="${this.dsId}"]`);t?.focus()}handleScroll(s){const t=s.target,e=0===t.scrollTop,o=Math.ceil(t.scrollTop+t.clientHeight)>=t.scrollHeight;e?t.classList.remove("scrolled-up"):t.classList.add("scrolled-up"),o?t.classList.remove("scrolled-down"):t.classList.add("scrolled-down"),t.querySelectorAll(".group").forEach((s=>{const e=s.querySelector(".option"),o=s.querySelector(".group-label");if(!e||!o)return;const i=e.getBoundingClientRect().top,l=o.getBoundingClientRect().bottom,a=t.getBoundingClientRect().top;i<l&&a<l?(o.classList.add("shadow"),e.style.marginTop=l-i+"px"):(o.classList.remove("shadow"),e.style.marginTop="")}))}handleKeyDown(s){if(!this.isOpen&&("ArrowDown"===s.key||"ArrowUp"===s.key||"Enter"===s.key||" "===s.key)){s.preventDefault(),this.isOpen=!0;const t=this.getAllOptions();let e=0;if(this.dsValue){const s=t.findIndex((s=>String(s.dsValue)===String(this.dsValue)));e=-1!==s?s:0}else{const s=t.findIndex((s=>!s.dsDisabled));e=-1!==s?s:0}this.activeIndex=e,this.scrollToActiveOption(),setTimeout((()=>{const s=this.el.querySelector(".options-list");s?.focus()}),0)}}scrollToActiveOption(){if(null===this.activeIndex)return;const s=this.el.querySelector(".options-list"),t=s?.querySelectorAll(".option");if(!t||this.activeIndex>=t.length)return;const e=t[this.activeIndex];e&&(e.focus(),e.scrollIntoView({block:"nearest"}))}getAllOptions(){return Array.from(this.el.querySelectorAll(this.DsOptionTag))}handleStateChange(){this.updateOptionStates()}updateOptionStates(){this.getAllOptions().forEach(((s,t)=>{s.dsActive=t===this.activeIndex,s.dsSelected=s.dsValue===this.dsValue,t===this.activeIndex?s.setAttribute("active",""):s.removeAttribute("active"),s.dsValue===this.dsValue?s.setAttribute("selected",""):s.removeAttribute("selected")}))}renderNativeSelect(){const t=this.dsErrorText?this.inputValidityId:void 0,e=this.dsId||`${this.inputValidityId}-select`,o="native-select-wrapper";return s("div",null,this.dsTitle&&s("label",{class:"select-title",htmlFor:e},this.dsTitle),s("div",{class:d(`${o}`,{[`${o}--disabled`]:this.dsDisabled,[`${o}--invalid`]:!!this.dsErrorText}),onClick:()=>{if(!this.dsDisabled){const s=this.nativeSelectRef;s&&(s.focus(),s.click())}}},s("div",{class:"selected-text","aria-hidden":"true"},this.selectedOption||this.dsPlaceholder||"Select an option"),s("select",{ref:s=>this.nativeSelectRef=s,id:e,class:"native-select",disabled:this.dsDisabled,required:!!this.dsErrorText,"aria-describedby":t,"aria-controls":`${e}-listbox`,"aria-haspopup":"listbox",onInput:s=>{const t=s.target;this.dsValue=t.value,this.selectedOption=t.selectedOptions[0]?.textContent||"",this.dsChange.emit(t.value)}},s("option",{value:"",disabled:!0,selected:!this.selectedOption},this.dsPlaceholder||"Select an option"),s("slot",{name:"native"})),s(this.DsIconTag,{class:"dropdown-icon",dsName:"keyboard_arrow_down"})),!!this.dsErrorText&&s(this.DsInputValidityTag,{id:this.inputValidityId,dsText:this.dsErrorText,dsType:"error"}))}renderCustomSelect(){const t=!this.selectedOption,e=this.dsId||`${this.inputValidityId}-custom-select`,o=`${e}-label`,i=this.dsErrorText?this.inputValidityId:void 0,a=`ds-select-options-${e}`,n="custom-select",r=l("ds-button","ds-select",this.el),c=l("ds-options","ds-select",this.el);return s("div",null,this.dsTitle&&s("div",{class:"select-title-wrapper"},s("label",{id:o,class:"select-title",htmlFor:e,onClick:()=>{const s=this.customSelectRef;s?.focus(),this.toggleDropdown()}},this.dsTitle)),s("div",{class:"custom-select-wrapper",style:{position:"relative"}},s("div",{id:e,ref:s=>this.customSelectRef=s,class:d(`${n}`,{[`${n}--open`]:this.isOpen,[`${n}--none-selected`]:t,[`${n}--disabled`]:this.dsDisabled,[`${n}--invalid`]:!!this.dsErrorText,[`${n}--has-icon`]:!!this.dsIcon}),tabIndex:this.dsDisabled?-1:0,role:"combobox","aria-haspopup":"listbox","aria-expanded":String(this.isOpen),"aria-disabled":String(this.dsDisabled),"aria-labelledby":o,"aria-describedby":i,"aria-controls":a,"aria-activedescendant":null!==this.activeIndex?`${e}-option-${this.activeIndex}`:void 0,onClick:()=>{this.dsDisabled||this.toggleDropdown()},onKeyDown:s=>{this.dsDisabled||this.handleKeyDown(s)}},s("div",{class:"selected-option"},this.dsIcon&&s(this.DsIconTag,{class:"placeholder-icon",dsName:this.dsIcon}),this.selectedOption||this.dsPlaceholder||"Select an option"),this.dsClearable&&this.selectedOption&&!this.dsDisabled&&s(r,{class:"clear-button",dsVariant:"supplementary",dsIcon:"cancel_fill",dsColour:"black",onClick:s=>{s.stopPropagation(),this.handleClearSelection()},onKeyDown:s=>{"Enter"!==s.key&&" "!==s.key||(s.preventDefault(),s.stopPropagation(),this.handleClearSelection())},"aria-label":"Clear selection"}),s(this.DsIconTag,{class:"dropdown-icon",dsName:this.isOpen?"keyboard_arrow_up":"keyboard_arrow_down"})),s("div",{id:a,class:"options-container",onClick:s=>{const t=s.target.closest(this.DsOptionTag);t&&!t.dsDisabled&&this.selectOption(t)}},s(c,{dsActiveIndex:this.activeIndex,onDsOptionsActiveIndexChange:s=>this.activeIndex=s.detail,onDsOptionsEsc:()=>{this.isOpen=!1},dsLabelId:o,dsLoading:this.dsLoading,dsLoadingText:this.dsLoadingText,dsOptionsError:this.dsOptionsError,dsOptionsErrorTitle:this.dsOptionsErrorTitle,dsOptionsErrorText:this.dsOptionsErrorText},s("slot",null)))),!!this.dsErrorText&&s(this.DsInputValidityTag,{id:this.inputValidityId,dsText:this.dsErrorText,dsType:"error"}))}render(){return s("div",{key:"4716b1f759f34fd18f9f776fec0c21dcb6f62c00",tabIndex:-1,onFocusout:this.handleFocusOut},"native"===this.dsVariant?this.renderNativeSelect():this.renderCustomSelect())}static get watchers(){return{activeIndex:["handleStateChange"],dsValue:["handleStateChange"]}}};i([s("ds-icon",null),s("ds-input-validity",null),s("ds-button",null),s("ds-options",null)]),h.style=".sc-ds-select:root,.sc-ds-select-h{--ds-breakpoint-xSmall:20rem;--ds-breakpoint-small:30rem;--ds-breakpoint-medium:60rem;--ds-breakpoint-large:75rem;--ds-breakpoint-xLarge:90rem}.sc-ds-select-h{display:inline-block;width:100%}@media (min-width: 30rem){.sc-ds-select-h{width:20rem}}.sc-ds-select-h>div.sc-ds-select{display:flex;flex-direction:column;position:relative}.native-select-wrapper.sc-ds-select,.custom-select.sc-ds-select{position:relative;display:flex;align-items:center;border:var(--ds-borderWidth-thin) solid var(--ds-palette-black-50);background-color:var(--ds-palette-white);color:var(--ds-palette-black-70);cursor:pointer;box-sizing:border-box;height:2.75rem;width:100%}.disabled.native-select-wrapper.sc-ds-select,.disabled.custom-select.sc-ds-select{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40);cursor:not-allowed}.disabled.native-select-wrapper.sc-ds-select .dropdown-icon.sc-ds-select,.disabled.custom-select.sc-ds-select .dropdown-icon.sc-ds-select{color:var(--ds-palette-black-40);border-left-color:var(--ds-overlay-black-15);cursor:not-allowed}.invalid.native-select-wrapper.sc-ds-select,.invalid.custom-select.sc-ds-select{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}.invalid.native-select-wrapper.sc-ds-select:not(.open):not(.disabled):active,.invalid.custom-select.sc-ds-select:not(.open):not(.disabled):active{background-color:var(--ds-palette-red-20);border-color:var(--ds-palette-red-50)}.native-select-wrapper.sc-ds-select:not(.open):not(.invalid):not(.disabled):hover,.custom-select.sc-ds-select:not(.open):not(.invalid):not(.disabled):hover{background-color:var(--ds-palette-black-10)}.custom-select.sc-ds-select .selected-option.sc-ds-select{display:flex;align-items:center;gap:var(--ds-spacing-2xSmall)}.custom-select.sc-ds-select .placeholder-icon.sc-ds-select{font-size:var(--ds-fontSize-16)}.custom-select--open.sc-ds-select+.options-container.sc-ds-select{display:block;box-shadow:0rem var(--ds-spacing-4xSmall) var(--ds-spacing-3xSmall) calc(-1 * var(--ds-spacing-4xSmall)) var(--ds-overlay-black-15), 0rem var(--ds-spacing-3xSmall) calc(var(--ds-spacing-xSmall) / 2) calc(-0.5 * var(--ds-spacing-4xSmall)) var(--ds-overlay-black-15)}.custom-select--open.sc-ds-select .options-list.sc-ds-select{display:block}.custom-select.sc-ds-select:not(.custom-select--open):not(.custom-select--invalid):not(.custom-select--disabled):hover{background-color:var(--ds-palette-black-10)}.custom-select.sc-ds-select:active:not(.custom-select--open):not(.custom-select--invalid):not(.custom-select--disabled){background-color:var(--ds-palette-black-20)}.custom-select--open.sc-ds-select,.custom-select.sc-ds-select:focus-visible{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.custom-select--open.sc-ds-select:not(.custom-select--open--invalid,.custom-select.sc-ds-select:focus-visible--invalid),.custom-select.sc-ds-select:focus-visible:not(.custom-select--open--invalid,.custom-select.sc-ds-select:focus-visible--invalid){border-color:var(--ds-palette-mainBlue-70)}.custom-select--disabled.sc-ds-select{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40);cursor:not-allowed}.custom-select--disabled.sc-ds-select .dropdown-icon.sc-ds-select{color:var(--ds-palette-black-40);border-left-color:var(--ds-overlay-black-15);cursor:not-allowed}.custom-select--invalid.sc-ds-select{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}.custom-select--invalid.sc-ds-select:not(.custom-select--invalid--open):not(.custom-select--invalid--disabled):active{background-color:var(--ds-palette-red-20);border-color:var(--ds-palette-red-50)}.selected-option.sc-ds-select{flex:1;font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:var(--ds-spacing-xSmall);padding-right:var(--ds-spacing-xSmall)}.custom-select--has-icon.sc-ds-select .selected-option.sc-ds-select{padding-left:var(--ds-spacing-2xSmall);padding-right:var(--ds-spacing-2xSmall)}.dropdown-icon.sc-ds-select{align-items:center;align-self:stretch;border-left:var(--ds-borderWidth-hairline) solid var(--ds-overlay-black-15);color:var(--ds-palette-black-70);z-index:2;pointer-events:none;padding:0 var(--ds-spacing-2xSmall)}.clear-button.sc-ds-select,.dropdown-icon.sc-ds-select{cursor:pointer}.select-title.sc-ds-select{display:inline-block;font-weight:var(--ds-fontWeight-semibold);margin-bottom:var(--ds-spacing-2xSmall);color:var(--ds-palette-black-95)}.selected-text.sc-ds-select{flex:1;padding:0 var(--ds-spacing-xSmall);font-size:var(--ds-fontSize-16);color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.options-container.sc-ds-select{display:none;position:absolute;top:100%;left:0;right:0;z-index:10;border:var(--ds-borderWidth-hairline) solid var(--ds-palette-black-20);background-color:var(--ds-palette-white)}.native-select.sc-ds-select{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1;appearance:none;-webkit-appearance:none;-moz-appearance:none;border:none;outline:none;padding:0 var(--ds-spacing-2xSmall);font-size:var(--ds-fontSize-16);font-family:inherit;background-color:transparent;color:inherit;flex:1}.native-select.sc-ds-select::placeholder{color:var(--ds-palette-black-70)}.native-select.sc-ds-select:disabled{background-color:var(--ds-overlay-black-10);color:var(--ds-palette-black-40);cursor:not-allowed}.native-select-wrapper.sc-ds-select:hover{background-color:var(--ds-palette-black-10)}.native-select-wrapper.sc-ds-select:focus-within{box-shadow:0 0 0 var(--ds-borderWidth-thin) var(--ds-palette-white);outline:var(--ds-borderWidth-thin) solid var(--ds-palette-black-95);outline-offset:calc(var(--ds-borderWidth-thin) * 1)}.native-select-wrapper--disabled.sc-ds-select{background-color:var(--ds-overlay-black-10);border-color:var(--ds-overlay-black-15);color:var(--ds-palette-black-40);cursor:not-allowed}.native-select-wrapper--invalid.sc-ds-select{background-color:var(--ds-palette-red-05);border-color:var(--ds-palette-red-50)}";export{n as ds_option,r as ds_option_group,c as ds_options,h as ds_select}