@moda/om 21.6.9 → 21.6.11

package/dist/src/components/Field/FormControlContext.d.ts

@@ -0,0 +1,6 @@
+type FormControlContextValue = {
+    displaysError: boolean;
+};
+export declare const FormControlContext: import("react").Context<FormControlContextValue>;
+export declare const useFormControlContext: () => FormControlContextValue;
+export {};

package/dist/src/components/Field/index.d.ts

@@ -1,3 +1,4 @@
 import { Field } from './Field';
 export { Field as Input };
 export * from './Field';
+export * from './FormControlContext';

package/dist/src/components/Select/SelectLabel.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export type SelectLabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
+export type SelectLabelProps = React.HTMLAttributes<HTMLSpanElement> & {
     idRef?: string;
     label?: string;
     hasValue: boolean;

package/dist/src/components/Select/SelectOption.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { SelectableOption } from './Select';
 import './SelectOption.scss';
 export type SelectOptionProps = Omit<React.HTMLAttributes<HTMLLIElement>, 'onClick'> & {
+    id?: string;
     active: boolean;
     selected: boolean;
     option: SelectableOption;

package/dist/src/components/Select/useSelect.d.ts

@@ -30,5 +30,6 @@ export declare const useSelect: ({ value, defaultValue }: UseSelectProps) => {
     dispatch: import("react").ActionDispatch<[action: Action]>;
     Mode: typeof Mode;
     selectRef: import("react").RefObject<HTMLDivElement | null>;
+    buttonRef: import("react").RefObject<HTMLButtonElement | null>;
 };
 export {};

package/dist/styles.css

@@ -1 +1 @@
-.AspectRatioBox,.AspectRatioBox__wrapper{position:relative;width:100%}.AspectRatioBox__wrapper{height:0;overflow:hidden}.AspectRatioBox__content{position:absolute;top:0;left:0;width:100%;height:100%}.AspectRatioBox--outlined{border:1px dotted}.Badge{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.75rem;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;display:inline-block;color:#191a1b;border:1px solid;padding:.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Badge,.Badge--default{background-color:transparent;border-color:#979899;color:#656566}.Badge--forest-green{background-color:#003728;border-color:transparent;color:#fff}.Badge--klein-blue{background-color:#263078}.Badge--brick,.Badge--klein-blue{border-color:transparent;color:#fff}.Badge--brick{background-color:#9e3039}.Badge--dark-fuchsia{border-color:#b43ca0;color:#b43ca0;font-weight:700;text-transform:none}.Badge--noise{line-height:1.6;background-color:#f2f3f5;border-color:transparent;color:#191a1b;text-transform:none;line-height:1.4}.Badge--noise,.Breadcrumbs{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;letter-spacing:.04em}.Breadcrumbs{line-height:1.6;display:flex;flex-flow:wrap;list-style:none;margin:0;padding:0}.Clickable{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em}.Clickable:not(.Clickable--disabled){cursor:pointer}.Clickable{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;color:inherit;font-size:1rem;padding:0;text-decoration:none;white-space:nowrap}.Clickable>label{cursor:inherit}.ControlLink{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;display:inline-flex}.ControlLink:focus:not(.ControlLink--disabled),.ControlLink:hover:not(.ControlLink--disabled){position:relative;text-decoration:none}.ControlLink:focus:not(.ControlLink--disabled):after,.ControlLink:hover:not(.ControlLink--disabled):after{content:"";display:block;position:absolute;bottom:0;left:0;right:0;border-bottom:1px solid;opacity:.75}.ControlLink:focus:not(.ControlLink--disabled),.ControlLink:hover:not(.ControlLink--disabled){color:#191a1b;opacity:.7}.ControlLink--underlined{position:relative;text-decoration:none}.ControlLink--underlined:after{content:"";display:block;position:absolute;bottom:0;left:0;right:0;border-bottom:1px solid;opacity:.75}.ControlLink--disabled{color:#979899}.Breadcrumb{position:relative;padding-right:1rem;margin-right:.5rem;white-space:nowrap;overflow:hidden}.Breadcrumb:after{display:block;content:" ";position:absolute;top:50%;right:.25rem;transform:translateY(-50%) rotate(25deg);border-right:1px solid #979899;height:75%}.Breadcrumb:last-child{margin-right:0}.Breadcrumb:last-child:after,.Breakpoint{display:none}@media (min-width:0) and (max-width:25rem){.Breakpoint--at-xs{display:block}}@media (min-width:25.0625rem){.Breakpoint--gt-xs{display:block}}@media (max-width:25rem){.Breakpoint--lt-xs{display:block}}@media (min-width:0) and (max-width:48rem){.Breakpoint--at-sm{display:block}}@media (min-width:48.0625rem){.Breakpoint--gt-sm{display:block}}@media (max-width:48rem){.Breakpoint--lt-sm{display:block}}@media (min-width:48.0625rem) and (max-width:62rem){.Breakpoint--at-md{display:block}}@media (min-width:62.0625rem){.Breakpoint--gt-md{display:block}}@media (max-width:62rem){.Breakpoint--lt-md{display:block}}@media (min-width:62.0625rem) and (max-width:80rem){.Breakpoint--at-lg{display:block}}@media (min-width:80.0625rem){.Breakpoint--gt-lg{display:block}}@media (max-width:80rem){.Breakpoint--lt-lg{display:block}}@media (min-width:80.0625rem) and (max-width:100rem){.Breakpoint--at-xl{display:block}}@media (min-width:100.0625rem){.Breakpoint--gt-xl{display:block}}@media (max-width:100rem){.Breakpoint--lt-xl{display:block}}.Button{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.75rem;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:1rem 3rem;border:1px solid;cursor:pointer;text-decoration:none;transition:background-color .2s}.Button>*{margin-right:.5rem}.Button,.Button--primary{color:#fff;border-color:#191a1b;background-color:#191a1b;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto}.Button--primary.Button--hover,.Button--primary:hover,.Button.Button--hover,.Button:hover{color:#fff;border-color:rgba(151,152,153,.32);background:linear-gradient(0deg,rgba(151,152,153,.32),rgba(151,152,153,.32)),#191a1b}.Button--primary.Button--focus,.Button--primary:focus,.Button.Button--focus,.Button:focus{color:#fff;border-color:rgba(151,152,153,.12);background:linear-gradient(0deg,hsla(0,0%,100%,.12),hsla(0,0%,100%,.12)),#191a1b}.Button--primary.Button--disabled,.Button--primary:disabled,.Button.Button--disabled,.Button:disabled{color:#191a1b;border-color:#f2f3f5;background-color:#f2f3f5;cursor:default;pointer-events:none}.Button--secondary{color:#191a1b;border-color:#191a1b;background-color:#fff}.Button--secondary.Button--hover,.Button--secondary:hover{color:#191a1b;border-color:#191a1b;background-color:rgba(242,243,245,.32)}.Button--secondary.Button--focus,.Button--secondary:focus{color:#191a1b;border-color:#191a1b;background-color:#f2f3f5}.Button--secondary.Button--disabled,.Button--secondary:disabled{color:#656566;border-color:#979899;background-color:#f2f3f5;cursor:default;pointer-events:none}.Button--tertiary{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;padding:.5rem .75rem;color:#191a1b;border-color:#cacbcc;background-color:#fff;text-transform:none;line-height:1.4}.Button--tertiary.Button--hover,.Button--tertiary:hover{color:#191a1b;border-color:#cacbcc;background-color:rgba(242,243,245,.32)}.Button--tertiary.Button--focus,.Button--tertiary:focus{color:#191a1b;border-color:#cacbcc;background-color:#f2f3f5}.Button--tertiary.Button--disabled,.Button--tertiary:disabled{color:#656566;border-color:#979899;background-color:#f2f3f5;cursor:default;pointer-events:none}.Button--elevated{box-shadow:0 1px 4px rgba(0,0,0,.09)}.Button--chip{border-radius:2rem}.Checkbox{display:flex;justify-content:flex-start;flex-direction:row}.Checkbox>*{margin-left:0;margin-right:0}.Checkbox>*+*{margin-left:.5rem}.Checkbox>.Overlay{margin-left:0}.Checkbox{position:relative;align-items:flex-start;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;color:#191a1b}.Checkbox__indicator{position:relative;width:1rem;height:1rem;margin-top:.125rem;flex-shrink:0;border:1px solid}.Checkbox__indicator--disabled{color:#cacbcc;pointer-events:none}.Checkbox__indicator--disabled:after{background-color:#cacbcc}.Checkbox__check-mark{margin:7.5%}.Checkbox__input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.Checkbox:has(.Checkbox__input:focus-visible) .Checkbox__indicator{outline:2px solid #191a1b;outline-offset:2px}.Checkbox__label{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;color:#191a1b}.ColorSwatch{position:relative;width:2rem;height:2rem;border:1px solid transparent;background-color:transparent;border-radius:50%;padding:1px;cursor:pointer;flex-shrink:0}.ColorSwatch--small{width:1.5rem;height:1.5rem}.ColorSwatch:before{display:none;content:"";position:absolute;top:50%;left:50%;width:33%;height:33%;transform:translate(-50%,-50%);border-radius:50%;background-color:#fff;z-index:1}.ColorSwatch__chip{position:relative;width:100%;height:100%;border-radius:50%}.ColorSwatch__chip:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-color:rgba(0,0,0,.2);opacity:0;transition:opacity .2s}.ColorSwatch--hover,.ColorSwatch:hover{border-color:#cacbcc}.ColorSwatch--hover:before,.ColorSwatch:hover:before{display:block}.ColorSwatch--hover .ColorSwatch__chip:before,.ColorSwatch:hover .ColorSwatch__chip:before{opacity:1}.ColorSwatch--focus:before,.ColorSwatch--selected:before,.ColorSwatch:focus:before{display:block}.ColorSwatch--sold-out .ColorSwatch__chip:after{content:"";display:block;position:absolute;top:50%;left:50%;width:100%;height:1px;transform:translate(-50%,-50%) rotate(-45deg);background-color:rgba(0,0,0,.5);z-index:1}.ColorSwatch--on-sale:after{content:"";display:block;position:absolute;top:-.125rem;right:-.125rem;width:.25rem;height:.25rem;border-radius:50%;background-color:#ee0700}.ColorSwatch--disabled,.ColorSwatch:disabled{pointer-events:none}.ColorSwatch--light:before{background-color:#191a1b}.ColorSwatch--light .ColorSwatch__chip{border:1px solid rgba(25,26,27,.25)}.Modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch}.Overlay{display:flex;justify-content:flex-start;flex-direction:column}.Overlay>*{margin-top:0;margin-bottom:0}.Overlay>*+*{margin-top:.5rem}.Overlay>.Overlay{margin-top:0}.Overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-color:hsla(0,0%,100%,.9);justify-content:center;align-items:center;color:#191a1b;animation:slow-in .5s}@keyframes slow-in{0%{opacity:0}to{opacity:1}}.Overlay--closing{animation:slow-out .5s forwards}@keyframes slow-out{0%{opacity:1}to{opacity:0}}.ModalOverlay{background:hsla(0,0%,100%,.9);padding:4rem 2rem}@media (max-width:48rem){.ModalOverlay{padding:4rem 1rem}}@media (max-width:25rem){.ModalOverlay{padding:4rem .5rem}}.ModalOverlay__content{border:1px solid rgba(0,0,0,.2);box-shadow:0 5px 15px rgba(0,0,0,.2)}.Stack.Stack--horizontal-0{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-0>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-0>*+*,.Stack.Stack--horizontal-0>.Overlay{margin-left:0}.Stack.Stack--horizontal-1{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-1>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-1>*+*{margin-left:.25rem}.Stack.Stack--horizontal-1>.Overlay{margin-left:0}.Stack.Stack--horizontal-2{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-2>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-2>*+*{margin-left:.5rem}.Stack.Stack--horizontal-2>.Overlay{margin-left:0}.Stack.Stack--horizontal-3{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-3>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-3>*+*{margin-left:.75rem}.Stack.Stack--horizontal-3>.Overlay{margin-left:0}.Stack.Stack--horizontal-4{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-4>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-4>*+*{margin-left:1rem}.Stack.Stack--horizontal-4>.Overlay{margin-left:0}.Stack.Stack--horizontal-5{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-5>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-5>*+*{margin-left:1.5rem}.Stack.Stack--horizontal-5>.Overlay{margin-left:0}.Stack.Stack--horizontal-6{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-6>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-6>*+*{margin-left:2rem}.Stack.Stack--horizontal-6>.Overlay{margin-left:0}.Stack.Stack--horizontal-7{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-7>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-7>*+*{margin-left:3rem}.Stack.Stack--horizontal-7>.Overlay{margin-left:0}.Stack.Stack--horizontal-8{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-8>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-8>*+*{margin-left:4rem}.Stack.Stack--horizontal-8>.Overlay{margin-left:0}.Stack.Stack--horizontal-9{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-9>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-9>*+*{margin-left:6rem}.Stack.Stack--horizontal-9>.Overlay{margin-left:0}.Stack.Stack--horizontal-10{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-10>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-10>*+*{margin-left:8rem}.Stack.Stack--horizontal-10>.Overlay{margin-left:0}.Stack.Stack--horizontal-11{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-11>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-11>*+*{margin-left:12rem}.Stack.Stack--horizontal-11>.Overlay{margin-left:0}.Stack.Stack--horizontal-12{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-12>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-12>*+*{margin-left:24rem}.Stack.Stack--horizontal-12>.Overlay{margin-left:0}.Stack.Stack--vertical-0{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-0>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-0>*+*,.Stack.Stack--vertical-0>.Overlay{margin-top:0}.Stack.Stack--vertical-1{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-1>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-1>*+*{margin-top:.25rem}.Stack.Stack--vertical-1>.Overlay{margin-top:0}.Stack.Stack--vertical-2{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-2>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-2>*+*{margin-top:.5rem}.Stack.Stack--vertical-2>.Overlay{margin-top:0}.Stack.Stack--vertical-3{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-3>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-3>*+*{margin-top:.75rem}.Stack.Stack--vertical-3>.Overlay{margin-top:0}.Stack.Stack--vertical-4{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-4>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-4>*+*{margin-top:1rem}.Stack.Stack--vertical-4>.Overlay{margin-top:0}.Stack.Stack--vertical-5{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-5>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-5>*+*{margin-top:1.5rem}.Stack.Stack--vertical-5>.Overlay{margin-top:0}.Stack.Stack--vertical-6{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-6>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-6>*+*{margin-top:2rem}.Stack.Stack--vertical-6>.Overlay{margin-top:0}.Stack.Stack--vertical-7{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-7>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-7>*+*{margin-top:3rem}.Stack.Stack--vertical-7>.Overlay{margin-top:0}.Stack.Stack--vertical-8{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-8>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-8>*+*{margin-top:4rem}.Stack.Stack--vertical-8>.Overlay{margin-top:0}.Stack.Stack--vertical-9{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-9>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-9>*+*{margin-top:6rem}.Stack.Stack--vertical-9>.Overlay{margin-top:0}.Stack.Stack--vertical-10{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-10>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-10>*+*{margin-top:8rem}.Stack.Stack--vertical-10>.Overlay{margin-top:0}.Stack.Stack--vertical-11{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-11>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-11>*+*{margin-top:12rem}.Stack.Stack--vertical-11>.Overlay{margin-top:0}.Stack.Stack--vertical-12{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-12>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-12>*+*{margin-top:24rem}.Stack.Stack--vertical-12>.Overlay{margin-top:0}.Text--display{font-size:6rem;line-height:1.1}.Text--display,.Text--h1{font-family:Moda Operandi Sans,Arial,sans-serif;letter-spacing:0}.Text--h1{font-size:3.75rem;line-height:1.2}.Text--h2{font-size:3rem;line-height:1.1}.Text--h2,.Text--h3{font-family:Moda Operandi Sans,Arial,sans-serif;letter-spacing:0}.Text--h3{font-size:2rem;line-height:1.2}.Text--h4{font-size:1.5rem;letter-spacing:0}.Text--h4,.Text--h5{font-family:Moda Operandi Sans,Arial,sans-serif;line-height:1.4}.Text--h5{font-size:1.25rem;letter-spacing:.02em}.Text--h6{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:1rem;line-height:1.4;letter-spacing:.04em}.Text--body1{letter-spacing:.04em}.Text--body1,.Text--bold1{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6}.Text--bold1{letter-spacing:.1em;font-weight:700}.Text--body2{letter-spacing:.04em}.Text--body2,.Text--eyebrow{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.75rem;line-height:1.4}.Text--eyebrow{letter-spacing:.1em;text-transform:uppercase}.Text--sans{font-family:Moda Operandi Sans,Arial,sans-serif}.Text--serif{font-family:"Moda Operandi Serif",Times New Roman,Times,serif}.Dialog{max-width:90vw;background-color:#fff;text-align:center}.Dialog__content{padding:2rem}@media (min-width:62.0625rem){.Dialog{max-width:40rem}}.Constrain{width:90%;margin:0 auto;max-width:100rem}@media (max-width:62rem){.Constrain{width:100%;padding:0 2rem}}@media (max-width:48rem){.Constrain{width:100%;padding:0 1rem}}@media (max-width:25rem){.Constrain{width:100%;padding:0 .5rem}}@media (max-width:62rem){.ExceedConstrain{margin:0 -2rem}}@media (max-width:48rem){.ExceedConstrain{margin:0 -1rem}}@media (max-width:25rem){.ExceedConstrain{margin:0 -.5rem}}.TextInput{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em}@media (max-width:48rem){.TextInput{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:1rem;line-height:1.4;letter-spacing:.04em}}.TextInput{-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1;width:100%;padding:.75rem 1rem;border:1px solid #cacbcc;background-color:#fff;border-radius:0}.TextInput::-moz-placeholder{line-height:normal}.TextInput::placeholder{line-height:normal}.TextInput--focus,.TextInput:focus{outline:none;border-color:#191a1b}.TextInput--disabled,.TextInput:disabled{color:#cacbcc;border-color:#cacbcc;background-color:#f2f3f5}.TextInput--valid{border-color:#046c00}.TextInput--error,.TextInput--error:focus{border-color:#ee0700}.SearchInput{position:relative;display:inline-block}.SearchInput__clear,.SearchInput__icon{display:flex;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;width:3rem;height:100%;color:#656566}.SearchInput__input--round-borders{border-radius:2.5rem}.SearchInput__input--no-borders{border:none}.SearchInput__icon{left:0;pointer-events:none;z-index:1}.SearchInput__clear{right:0}.SearchInput__clear:hover{color:#191a1b;cursor:pointer}.SearchInput>input{width:100%;padding-right:3rem;padding-left:3rem}.SearchInput>input::-webkit-search-cancel-button,.SearchInput>input::-webkit-search-decoration,.SearchInput>input::-webkit-search-results-button,.SearchInput>input::-webkit-search-results-decoration{display:none}.SelectOption{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;display:block;width:100%;text-align:left;padding:.5rem .75rem;color:#191a1b}.SelectOption--selected{text-decoration:underline}.SelectOption--active,.SelectOption:hover{background-color:#f2f3f5}.SelectOption--disabled{color:#979899;cursor:default}.SelectOption--disabled:hover{background-color:#fff}.SelectOption__color-swatch{border-radius:50%;border:1px solid #191a1b;display:inline-block;margin-left:.25rem;margin-right:.25rem;height:1rem;transform:translateY(25%);width:1rem}.SelectOptions{background-color:#fff;border:1px solid #cacbcc}.SelectOptions:focus{outline:0;border-color:#656566}.SelectOptions__search{margin:.5rem}.SelectOptions__none{padding:.5rem .75rem}.SelectOptions__list{overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:24rem}.SelectOptions__extra-option{left:50%;margin-bottom:.25rem;margin-top:.5rem;transform:translate(-50%)}@media (max-width:48rem){.Select{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:1rem;line-height:1.4;letter-spacing:.04em}}.Select{min-height:2.5625rem;position:relative;display:flex;cursor:pointer}.Select--disabled{cursor:default}.Select--disabled .Select__value{color:#979899;cursor:default}.Select--disabled .Select__value:focus,.Select--disabled .Select__value:hover{border-color:#cacbcc;background-color:#fff}.Select--error{border:1px solid #ee0700}.Select__value{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em}@media (max-width:48rem){.Select__value{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:1rem;line-height:1.4;letter-spacing:.04em}}.Select__value{display:block;width:100%;text-align:left;padding:.5rem 3rem .5rem .75rem;color:#191a1b;border:1px solid #cacbcc;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.8;cursor:pointer}.Select__value:hover{border-color:#656566;background-color:#f2f3f5}.Select__value:focus{border-color:#656566;background-color:#cacbcc}@media (max-width:48rem){.Select__value--small{font-size:.75rem}}.Select__value--padding-1{padding-right:.25rem}.Select__value--padding-2{padding-right:.5rem}.Select__value--padding-3{padding-right:.75rem}.Select__value--padding-4{padding-right:1rem}.Select__value--padding-5{padding-right:1.5rem}.Select__value--padding-6{padding-right:2rem}.Select__value--padding-7{padding-right:3rem}.Select__value--padding-8{padding-right:4rem}.Select__value--padding-9{padding-right:6rem}.Select__value--padding-10{padding-right:8rem}.Select__value--padding-11{padding-right:12rem}.Select__value--padding-12{padding-right:24rem}.Select__icon{pointer-events:none;position:absolute;right:1rem;top:50%;transform:translateY(-50%)}.Select__icon--shifted{right:2rem}.Select__options{display:flex;position:absolute;left:0;right:0;z-index:1}.Select__options--up{flex-direction:column-reverse;bottom:100%;margin-bottom:.25rem}.Select__options--down{flex-direction:column;margin-top:.25rem;top:100%}.Select__hidden-field{-moz-opacity:0;opacity:0;position:absolute;width:0;height:0}.Select__selected-color{border-radius:50%;border:1px solid #191a1b;display:inline-block;margin-left:.25rem;margin-right:.25rem;height:1rem;transform:translateY(25%);width:1rem}.MultiSelect{min-height:2.5625rem;position:relative;display:flex;width:100%}.MultiSelect--disabled{cursor:default}.MultiSelect--disabled .MultiSelect__search{color:#979899;cursor:default}.MultiSelect--disabled .MultiSelect__search:focus,.MultiSelect--disabled .MultiSelect__search:hover{border-color:#cacbcc;background-color:#f2f3f5}.MultiSelect--error{border:1px solid #ee0700}.MultiSelect__search{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em}@media (max-width:48rem){.MultiSelect__search{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:1rem;line-height:1.4;letter-spacing:.04em}}.MultiSelect__search{-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1;width:100%;padding:.75rem 1rem;border:1px solid #cacbcc;background-color:#fff;border-radius:0}.MultiSelect__search::-moz-placeholder{line-height:normal}.MultiSelect__search::placeholder{line-height:normal}.MultiSelect__search--focus,.MultiSelect__search:focus{outline:none;border-color:#191a1b}.MultiSelect__search--disabled,.MultiSelect__search:disabled{color:#cacbcc;border-color:#cacbcc;background-color:#f2f3f5}.MultiSelect__search--valid{border-color:#046c00}.MultiSelect__search--error,.MultiSelect__search--error:focus{border-color:#ee0700}.MultiSelect__search{display:flex;align-items:center;padding:.25rem 3rem .25rem .25rem}.MultiSelect__selected-items{display:flex;flex-wrap:wrap}.MultiSelect__selected-item{display:flex;align-items:center;border:1px solid #191a1b;border-radius:.5rem;margin:.25rem;padding:.25rem}.MultiSelect__selected-value{cursor:default}.MultiSelect__exit{margin-left:.25rem;cursor:pointer}.MultiSelect__icon{pointer-events:none;position:absolute;right:1rem;top:50%;transform:translateY(-50%)}.MultiSelect__icon--shifted{right:2rem}.Field{display:flex;justify-content:flex-start;flex-direction:column}.Field>*{margin-top:0;margin-bottom:0}.Field>*+*{margin-top:.25rem}.Field>.Overlay{margin-top:0}.Field__context{position:relative}.Field__icon{position:absolute;top:50%;right:.5rem;color:#ee0700;transform:translateY(-50%);pointer-events:none}.Field__error,.Field__label{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em}.Field__label{color:#656566}.Field__error{color:#ee0700;padding-top:1px}.DefinitionList{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;margin:0}.DefinitionList>dd,.DefinitionList>dt{display:inline-block;margin:0}.DefinitionList>dt{color:#191a1b;margin-right:.5rem}.DefinitionList>dd,.DefinitionList>dd>a{color:#656566}.DefinitionList>dd>a{text-decoration:underline}.DefinitionList>dd>a:hover{text-decoration:none}.Divider{display:flex;align-items:center;justify-content:center;width:100%}.Divider:after,.Divider:before{content:"";flex:1;border:none;background-color:#cacbcc;height:1px;width:50%}.Divider__text{width:auto;padding:0 1rem}.Divider--two-line:after,.Divider--two-line:before{transform:translateY(-.0875rem);background-color:#191a1b;box-shadow:0 .175rem 0 0 #191a1b}.Divider--no-line:after,.Divider--no-line:before{display:none}.Divider--line-above{padding:1rem 0}.Divider--line-above:after,.Divider--line-above:before{display:none}.Divider__content--line-above{border-top:1px solid #d9d9d9;padding-top:2rem;width:100%;text-align:center}@media (max-width:48rem){.Divider__content--line-above{padding:1rem 0}}.Expandable{display:flex;flex-direction:column}.Expandable__name{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;position:relative;text-align:left;cursor:pointer;padding:.75rem 1.5rem .75rem 0;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis}.Expandable__icon{height:100%;padding-top:1rem;position:absolute;right:0;top:0}.Expandable__contents{display:flex;justify-content:flex-start;flex-direction:column}.Expandable__contents>*{margin-top:0;margin-bottom:0}.Expandable__contents>*+*{margin-top:.5rem}.Expandable__contents>.Overlay{margin-top:0}.Expandable__contents{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;padding-bottom:.75rem;display:none;color:#191a1b}.Expandable__contents ol,.Expandable__contents ul{padding-left:1rem;list-style:disc}.Expandable__contents a{color:#191a1b}.Expandable--plus-minus .Expandable__name:after,.Expandable--plus-minus .Expandable__name:before{content:"";display:block;position:absolute;top:50%;right:0;transform:translateY(-50%);height:1px;width:1rem;background-color:#191a1b}.Expandable--plus-minus .Expandable__name:before{transform:translateY(-50%) rotate(90deg);transition:transform .2s}.Expandable--expanded .Expandable__name:before{transform:translateY(-50%)}.Expandable--expanded .Expandable__contents{display:block}.Expandable--with-border{border-top:1px solid #f2f3f5}.Expandable--dark-background{border-color:#656566;color:#fff}.Expandable--dark-background .Expandable__name:after,.Expandable--dark-background .Expandable__name:before{background-color:#fff}.Expandable--dark-background .Expandable__contents{color:#fff}.Label{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;color:#656566}.Label--hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.Loading{padding:1.5rem;display:flex;align-items:center;justify-content:center;height:100%;width:100%;transition:opacity 1s}.Loading .ArcWindow,.Loading .Circle,.Loading .Diamond,.Loading .Triangle{width:3rem;height:3rem;opacity:1;animation:fade 1s linear}@keyframes fade{0%,to{opacity:0}50%{opacity:1}}.LoadingBalls{fill:#191a1b}.LoadingShapes__item--current path{fill:#fff;transition:fill 1s}.LoadingShapesPinkGreen__item{display:block}.LoadingShapesPinkGreen__item--current{display:none}.LoadingShapesLavenderBlue__item{display:block}.LoadingShapesLavenderBlue__item--current{display:none}.Paginator,.Paginator__button{display:flex;justify-content:center}.Paginator__button{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;border:none;height:2rem;width:2rem;align-items:center;cursor:pointer;margin-right:.25rem;margin-left:.25rem;background-color:transparent}.Paginator__button:first-child{margin-left:0}.Paginator__button:last-child{margin-right:0}.Paginator__button:hover{background-color:#f2f3f5}.Paginator__button--next,.Paginator__button--previous{width:-moz-fit-content;width:fit-content}.Paginator__button--currentPage{background-color:#f2f3f5}.Paginator__next-chevron{margin-left:.5rem}.Paginator__previous-chevron{margin-right:.5rem}.Paginator__button--ellipsis{cursor:auto}.Paginator__button--ellipsis:hover{background:transparent}.PasswordInput{position:relative}.PasswordInput__editor{padding-right:5rem}.PasswordInput__password-action{position:absolute;top:.5rem;right:2rem}@media (max-width:48rem){.PasswordInput__password-action{top:.7rem}}.Popover{position:relative}.Popover__content{position:absolute;background-color:#fff;border:.0625rem solid #cacbcc;z-index:1}.Popover__content:before{content:"";display:block;position:absolute;top:-.5rem;width:100%;height:.5rem}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.Popover__box--opening{animation:fade-in .75s}@keyframes fade-out{to{opacity:0}}.Popover__box--closing{animation:fade-out 1s}.Popover--anchor-topLeft .Popover__content{top:100%;bottom:auto;left:0;right:auto;transform:translateY(.5rem)}.Popover--anchor-topCenter .Popover__content{top:100%;bottom:auto;left:50%;right:auto;transform:translate(-50%,.5rem)}.Popover--anchor-topRight .Popover__content{top:100%;bottom:auto;left:auto;right:0;transform:translateY(.5rem)}.Popover--anchor-bottomLeft .Popover__content{top:auto;bottom:100%;left:0;right:auto;transform:translateY(-.5rem)}.Popover--anchor-bottomCenter .Popover__content{top:auto;bottom:100%;left:50%;right:auto;transform:translate(-50%,-.5rem)}.Popover--anchor-bottomRight .Popover__content{top:auto;bottom:100%;left:auto;right:0;transform:translateY(-.5rem)}.Popover--anchor-topCenter .Popover__caret,.Popover--anchor-topLeft .Popover__caret,.Popover--anchor-topRight .Popover__caret{top:100%}.Popover--anchor-topCenter .Popover__caret:after,.Popover--anchor-topCenter .Popover__caret:before,.Popover--anchor-topLeft .Popover__caret:after,.Popover--anchor-topLeft .Popover__caret:before,.Popover--anchor-topRight .Popover__caret:after,.Popover--anchor-topRight .Popover__caret:before{top:auto;bottom:-.5625rem;border-top:none;border-bottom:.5rem solid #fff}.Popover--anchor-topCenter .Popover__caret:before,.Popover--anchor-topLeft .Popover__caret:before,.Popover--anchor-topRight .Popover__caret:before{border-bottom:.5rem solid #191a1b}.Popover--anchor-bottomCenter .Popover__caret,.Popover--anchor-bottomLeft .Popover__caret,.Popover--anchor-bottomRight .Popover__caret{top:0}.Popover--anchor-bottomCenter .Popover__caret:after,.Popover--anchor-bottomCenter .Popover__caret:before,.Popover--anchor-bottomLeft .Popover__caret:after,.Popover--anchor-bottomLeft .Popover__caret:before,.Popover--anchor-bottomRight .Popover__caret:after,.Popover--anchor-bottomRight .Popover__caret:before{top:-.5625rem;bottom:auto;border-top:.5rem solid #fff;border-bottom:none}.Popover--anchor-bottomCenter .Popover__caret:before,.Popover--anchor-bottomLeft .Popover__caret:before,.Popover--anchor-bottomRight .Popover__caret:before{border-top:.5rem solid #191a1b}.Popover__trigger{position:relative;display:block}.Popover__caret{width:100%;position:absolute;z-index:2}.Popover__caret:after,.Popover__caret:before{content:"";position:absolute;left:50%;transform:translateX(-50%);border-left:.5rem solid transparent;border-right:.5rem solid transparent}.PromoBanner{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.75rem;line-height:1.4;letter-spacing:.04em;background-color:#f8f5ee;border-top:.25rem solid #d56b27}.PromoBanner__constrain{display:flex;justify-content:space-between;align-items:center}.PromoBanner__child{min-width:12rem;padding:.5rem .75rem}.PromoBanner__child--center{flex:1;text-align:center}.PromoBanner__child--left{padding-left:0}.PromoBanner__child--right{padding-right:0;text-align:right}.PromoBanner__child>a{color:#191a1b;position:relative;text-decoration:none}.PromoBanner__child>a:after{content:"";display:block;position:absolute;bottom:0;left:0;right:0;border-bottom:1px solid;opacity:.75}@media (max-width:48rem){.PromoBanner .PromoBanner__child--left,.PromoBanner .PromoBanner__child--right{display:none}}.RadioButton{display:flex;justify-content:flex-start;flex-direction:row}.RadioButton>*{margin-left:0;margin-right:0}.RadioButton>*+*{margin-left:.5rem}.RadioButton>.Overlay{margin-left:0}.RadioButton{position:relative;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;color:#191a1b}.RadioButton__indicator{position:relative;width:1rem;height:1rem;flex-shrink:0;border:1px solid;border-radius:50%;background-color:#fff}.RadioButton__indicator--checked{background-color:#191a1b}.RadioButton__indicator--checked:after{content:"";display:block;position:absolute;top:.25rem;right:.25rem;bottom:.25rem;left:.25rem;border-radius:50%;background-color:#fff}.RadioButton__indicator--disabled{color:#cacbcc;pointer-events:none;background-color:#fff}.RadioButton__indicator--disabled:after{background-color:#cacbcc}.RadioButton__input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.RadioButton:has(.RadioButton__input:focus-visible) .RadioButton__indicator{outline:2px solid #191a1b;outline-offset:2px}.RadioButton__label{font-size:.8125rem;line-height:1.6}.RadioButton__label,.SelectableButton{font-family:Moda Operandi Sans,Arial,sans-serif;letter-spacing:.04em;color:#191a1b}.SelectableButton{font-size:.75rem;line-height:1.4;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;text-align:center;max-width:100%;padding:.5rem .75rem;cursor:pointer;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:1px solid #cacbcc;background-color:transparent;transition:background-color .2s}.SelectableButton>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.SelectableButton--hover,.SelectableButton:hover{color:#191a1b;border-color:#cacbcc;background-color:#f2f3f5}.SelectableButton--selected,.SelectableButton--selected:hover{color:#191a1b;border-color:#191a1b;background-color:transparent}.SelectableButton--unavailable,.SelectableButton--unavailable:hover{color:#cacbcc;border-color:#cacbcc;background:linear-gradient(to bottom right,#fff calc(50% - 1px),#cacbcc,#fff calc(50% + 1px))}.SlidingPane{position:fixed;visibility:hidden;width:100%;bottom:-100vh;left:0;right:0;transition:all .5s ease-out;background-color:#fff;margin-left:0}.SlidingPane--active{visibility:visible;bottom:0}.SlidingPane__top{padding:.75rem;border-bottom:1px solid #cacbcc;box-shadow:0 -1px 2px rgba(25,26,27,.1)}.SlidingPane__close{position:absolute;top:0;right:0;padding:1.2rem;cursor:pointer}.SlidingPane__content{padding:1rem}.SlidingPane__overlay{background-color:rgba(0,0,0,.3);top:0;bottom:0;left:0;right:0;position:fixed;display:none}.SlidingPane__overlay--active{display:block}.Tab{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.75rem;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;padding:1rem 0;border-bottom:2px solid transparent;color:#656566;text-align:left;cursor:pointer}.Tab--active{color:#191a1b;border-bottom:2px solid #191a1b}.Tab:active,.Tab:focus{outline:none}.TabList{display:flex;justify-content:flex-start;flex-direction:row}.TabList>*{margin-left:0;margin-right:0}.TabList>*+*{margin-left:1rem}.TabList>.Overlay{margin-left:0}.TabList{border-bottom:1px solid #cacbcc}.TabPanels{margin-top:1rem}.Tag{display:flex;justify-content:flex-start;flex-direction:row}.Tag>*{margin-left:0;margin-right:0}.Tag>*+*{margin-left:.5rem}.Tag>.Overlay{margin-left:0}.Tag{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;display:inline-flex;align-items:center;padding:.5rem;border:1px solid #cacbcc;white-space:nowrap}.Tag:focus,.Tag:hover{border-color:#191a1b}.Tag--disabled{color:#979899}.Tag--disabled:focus,.Tag--disabled:hover{border-color:#cacbcc}@media (max-width:48rem){.Textarea{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:1rem;line-height:1.4;letter-spacing:.04em}}.Textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1;width:100%;padding:.75rem 1rem;border:1px solid #cacbcc;background-color:#fff;border-radius:0}.Textarea::-moz-placeholder{line-height:normal}.Textarea::placeholder{line-height:normal}.Textarea--focus,.Textarea:focus{outline:none;border-color:#191a1b}.Textarea--disabled,.Textarea:disabled{color:#cacbcc;border-color:#cacbcc;background-color:#f2f3f5}.Textarea--valid{border-color:#046c00}.Textarea--error,.Textarea--error:focus{border-color:#ee0700}.Textarea{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;resize:none}.Toast{color:#fff;padding:.75rem}.Toast--success{background-color:#046c00}.Toast--warning{background-color:#d56b27}.Toast--error{background-color:#ee0700}.VerticalDivider{border-left:1px solid #191a1b}.VerticalDivider--double{width:.175rem;border-right:1px solid #191a1b}
+.AspectRatioBox,.AspectRatioBox__wrapper{position:relative;width:100%}.AspectRatioBox__wrapper{height:0;overflow:hidden}.AspectRatioBox__content{position:absolute;top:0;left:0;width:100%;height:100%}.AspectRatioBox--outlined{border:1px dotted}.Badge{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.75rem;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;display:inline-block;color:#191a1b;border:1px solid;padding:.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Badge,.Badge--default{background-color:transparent;border-color:#979899;color:#656566}.Badge--forest-green{background-color:#003728;border-color:transparent;color:#fff}.Badge--klein-blue{background-color:#263078}.Badge--brick,.Badge--klein-blue{border-color:transparent;color:#fff}.Badge--brick{background-color:#9e3039}.Badge--dark-fuchsia{border-color:#b43ca0;color:#b43ca0;font-weight:700;text-transform:none}.Badge--noise{line-height:1.6;background-color:#f2f3f5;border-color:transparent;color:#191a1b;text-transform:none;line-height:1.4}.Badge--noise,.Breadcrumbs{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;letter-spacing:.04em}.Breadcrumbs{line-height:1.6;display:flex;flex-flow:wrap;list-style:none;margin:0;padding:0}.Clickable{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em}.Clickable:not(.Clickable--disabled){cursor:pointer}.Clickable{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;color:inherit;font-size:1rem;padding:0;text-decoration:none;white-space:nowrap}.Clickable>label{cursor:inherit}.ControlLink{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;display:inline-flex}.ControlLink:focus:not(.ControlLink--disabled),.ControlLink:hover:not(.ControlLink--disabled){position:relative;text-decoration:none}.ControlLink:focus:not(.ControlLink--disabled):after,.ControlLink:hover:not(.ControlLink--disabled):after{content:"";display:block;position:absolute;bottom:0;left:0;right:0;border-bottom:1px solid;opacity:.75}.ControlLink:focus:not(.ControlLink--disabled),.ControlLink:hover:not(.ControlLink--disabled){color:#191a1b;opacity:.7}.ControlLink--underlined{position:relative;text-decoration:none}.ControlLink--underlined:after{content:"";display:block;position:absolute;bottom:0;left:0;right:0;border-bottom:1px solid;opacity:.75}.ControlLink--disabled{color:#979899}.Breadcrumb{position:relative;padding-right:1rem;margin-right:.5rem;white-space:nowrap;overflow:hidden}.Breadcrumb:after{display:block;content:" ";position:absolute;top:50%;right:.25rem;transform:translateY(-50%) rotate(25deg);border-right:1px solid #979899;height:75%}.Breadcrumb:last-child{margin-right:0}.Breadcrumb:last-child:after,.Breakpoint{display:none}@media (min-width:0) and (max-width:25rem){.Breakpoint--at-xs{display:block}}@media (min-width:25.0625rem){.Breakpoint--gt-xs{display:block}}@media (max-width:25rem){.Breakpoint--lt-xs{display:block}}@media (min-width:0) and (max-width:48rem){.Breakpoint--at-sm{display:block}}@media (min-width:48.0625rem){.Breakpoint--gt-sm{display:block}}@media (max-width:48rem){.Breakpoint--lt-sm{display:block}}@media (min-width:48.0625rem) and (max-width:62rem){.Breakpoint--at-md{display:block}}@media (min-width:62.0625rem){.Breakpoint--gt-md{display:block}}@media (max-width:62rem){.Breakpoint--lt-md{display:block}}@media (min-width:62.0625rem) and (max-width:80rem){.Breakpoint--at-lg{display:block}}@media (min-width:80.0625rem){.Breakpoint--gt-lg{display:block}}@media (max-width:80rem){.Breakpoint--lt-lg{display:block}}@media (min-width:80.0625rem) and (max-width:100rem){.Breakpoint--at-xl{display:block}}@media (min-width:100.0625rem){.Breakpoint--gt-xl{display:block}}@media (max-width:100rem){.Breakpoint--lt-xl{display:block}}.Button{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.75rem;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;text-align:center;padding:1rem 3rem;border:1px solid;cursor:pointer;text-decoration:none;transition:background-color .2s}.Button>*{margin-right:.5rem}.Button,.Button--primary{color:#fff;border-color:#191a1b;background-color:#191a1b;-webkit-font-smoothing:subpixel-antialiased;-moz-osx-font-smoothing:auto}.Button--primary.Button--hover,.Button--primary:hover,.Button.Button--hover,.Button:hover{color:#fff;border-color:rgba(151,152,153,.32);background:linear-gradient(0deg,rgba(151,152,153,.32),rgba(151,152,153,.32)),#191a1b}.Button--primary.Button--focus,.Button--primary:focus,.Button.Button--focus,.Button:focus{color:#fff;border-color:rgba(151,152,153,.12);background:linear-gradient(0deg,hsla(0,0%,100%,.12),hsla(0,0%,100%,.12)),#191a1b}.Button--primary.Button--disabled,.Button--primary:disabled,.Button.Button--disabled,.Button:disabled{color:#191a1b;border-color:#f2f3f5;background-color:#f2f3f5;cursor:default;pointer-events:none}.Button--secondary{color:#191a1b;border-color:#191a1b;background-color:#fff}.Button--secondary.Button--hover,.Button--secondary:hover{color:#191a1b;border-color:#191a1b;background-color:rgba(242,243,245,.32)}.Button--secondary.Button--focus,.Button--secondary:focus{color:#191a1b;border-color:#191a1b;background-color:#f2f3f5}.Button--secondary.Button--disabled,.Button--secondary:disabled{color:#656566;border-color:#979899;background-color:#f2f3f5;cursor:default;pointer-events:none}.Button--tertiary{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;padding:.5rem .75rem;color:#191a1b;border-color:#cacbcc;background-color:#fff;text-transform:none;line-height:1.4}.Button--tertiary.Button--hover,.Button--tertiary:hover{color:#191a1b;border-color:#cacbcc;background-color:rgba(242,243,245,.32)}.Button--tertiary.Button--focus,.Button--tertiary:focus{color:#191a1b;border-color:#cacbcc;background-color:#f2f3f5}.Button--tertiary.Button--disabled,.Button--tertiary:disabled{color:#656566;border-color:#979899;background-color:#f2f3f5;cursor:default;pointer-events:none}.Button--elevated{box-shadow:0 1px 4px rgba(0,0,0,.09)}.Button--chip{border-radius:2rem}.Checkbox{display:flex;justify-content:flex-start;flex-direction:row}.Checkbox>*{margin-left:0;margin-right:0}.Checkbox>*+*{margin-left:.5rem}.Checkbox>.Overlay{margin-left:0}.Checkbox{position:relative;align-items:flex-start;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;color:#191a1b}.Checkbox__indicator{position:relative;width:1rem;height:1rem;margin-top:.125rem;flex-shrink:0;border:1px solid}.Checkbox__indicator--disabled{color:#cacbcc;pointer-events:none}.Checkbox__indicator--disabled:after{background-color:#cacbcc}.Checkbox__check-mark{margin:7.5%}.Checkbox__input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.Checkbox:has(.Checkbox__input:focus-visible) .Checkbox__indicator{outline:2px solid #191a1b;outline-offset:2px}.Checkbox__label{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;color:#191a1b}.ColorSwatch{position:relative;width:2rem;height:2rem;border:1px solid transparent;background-color:transparent;border-radius:50%;padding:1px;cursor:pointer;flex-shrink:0}.ColorSwatch--small{width:1.5rem;height:1.5rem}.ColorSwatch:before{display:none;content:"";position:absolute;top:50%;left:50%;width:33%;height:33%;transform:translate(-50%,-50%);border-radius:50%;background-color:#fff;z-index:1}.ColorSwatch__chip{position:relative;width:100%;height:100%;border-radius:50%}.ColorSwatch__chip:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;background-color:rgba(0,0,0,.2);opacity:0;transition:opacity .2s}.ColorSwatch--hover,.ColorSwatch:hover{border-color:#cacbcc}.ColorSwatch--hover:before,.ColorSwatch:hover:before{display:block}.ColorSwatch--hover .ColorSwatch__chip:before,.ColorSwatch:hover .ColorSwatch__chip:before{opacity:1}.ColorSwatch--focus:before,.ColorSwatch--selected:before,.ColorSwatch:focus:before{display:block}.ColorSwatch--sold-out .ColorSwatch__chip:after{content:"";display:block;position:absolute;top:50%;left:50%;width:100%;height:1px;transform:translate(-50%,-50%) rotate(-45deg);background-color:rgba(0,0,0,.5);z-index:1}.ColorSwatch--on-sale:after{content:"";display:block;position:absolute;top:-.125rem;right:-.125rem;width:.25rem;height:.25rem;border-radius:50%;background-color:#ee0700}.ColorSwatch--disabled,.ColorSwatch:disabled{pointer-events:none}.ColorSwatch--light:before{background-color:#191a1b}.ColorSwatch--light .ColorSwatch__chip{border:1px solid rgba(25,26,27,.25)}.Modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch}.Overlay{display:flex;justify-content:flex-start;flex-direction:column}.Overlay>*{margin-top:0;margin-bottom:0}.Overlay>*+*{margin-top:.5rem}.Overlay>.Overlay{margin-top:0}.Overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-color:hsla(0,0%,100%,.9);justify-content:center;align-items:center;color:#191a1b;animation:slow-in .5s}@keyframes slow-in{0%{opacity:0}to{opacity:1}}.Overlay--closing{animation:slow-out .5s forwards}@keyframes slow-out{0%{opacity:1}to{opacity:0}}.ModalOverlay{background:hsla(0,0%,100%,.9);padding:4rem 2rem}@media (max-width:48rem){.ModalOverlay{padding:4rem 1rem}}@media (max-width:25rem){.ModalOverlay{padding:4rem .5rem}}.ModalOverlay__content{border:1px solid rgba(0,0,0,.2);box-shadow:0 5px 15px rgba(0,0,0,.2)}.Stack.Stack--horizontal-0{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-0>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-0>*+*,.Stack.Stack--horizontal-0>.Overlay{margin-left:0}.Stack.Stack--horizontal-1{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-1>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-1>*+*{margin-left:.25rem}.Stack.Stack--horizontal-1>.Overlay{margin-left:0}.Stack.Stack--horizontal-2{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-2>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-2>*+*{margin-left:.5rem}.Stack.Stack--horizontal-2>.Overlay{margin-left:0}.Stack.Stack--horizontal-3{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-3>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-3>*+*{margin-left:.75rem}.Stack.Stack--horizontal-3>.Overlay{margin-left:0}.Stack.Stack--horizontal-4{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-4>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-4>*+*{margin-left:1rem}.Stack.Stack--horizontal-4>.Overlay{margin-left:0}.Stack.Stack--horizontal-5{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-5>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-5>*+*{margin-left:1.5rem}.Stack.Stack--horizontal-5>.Overlay{margin-left:0}.Stack.Stack--horizontal-6{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-6>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-6>*+*{margin-left:2rem}.Stack.Stack--horizontal-6>.Overlay{margin-left:0}.Stack.Stack--horizontal-7{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-7>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-7>*+*{margin-left:3rem}.Stack.Stack--horizontal-7>.Overlay{margin-left:0}.Stack.Stack--horizontal-8{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-8>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-8>*+*{margin-left:4rem}.Stack.Stack--horizontal-8>.Overlay{margin-left:0}.Stack.Stack--horizontal-9{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-9>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-9>*+*{margin-left:6rem}.Stack.Stack--horizontal-9>.Overlay{margin-left:0}.Stack.Stack--horizontal-10{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-10>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-10>*+*{margin-left:8rem}.Stack.Stack--horizontal-10>.Overlay{margin-left:0}.Stack.Stack--horizontal-11{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-11>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-11>*+*{margin-left:12rem}.Stack.Stack--horizontal-11>.Overlay{margin-left:0}.Stack.Stack--horizontal-12{display:flex;justify-content:flex-start;flex-direction:row}.Stack.Stack--horizontal-12>*{margin-left:0;margin-right:0}.Stack.Stack--horizontal-12>*+*{margin-left:24rem}.Stack.Stack--horizontal-12>.Overlay{margin-left:0}.Stack.Stack--vertical-0{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-0>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-0>*+*,.Stack.Stack--vertical-0>.Overlay{margin-top:0}.Stack.Stack--vertical-1{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-1>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-1>*+*{margin-top:.25rem}.Stack.Stack--vertical-1>.Overlay{margin-top:0}.Stack.Stack--vertical-2{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-2>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-2>*+*{margin-top:.5rem}.Stack.Stack--vertical-2>.Overlay{margin-top:0}.Stack.Stack--vertical-3{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-3>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-3>*+*{margin-top:.75rem}.Stack.Stack--vertical-3>.Overlay{margin-top:0}.Stack.Stack--vertical-4{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-4>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-4>*+*{margin-top:1rem}.Stack.Stack--vertical-4>.Overlay{margin-top:0}.Stack.Stack--vertical-5{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-5>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-5>*+*{margin-top:1.5rem}.Stack.Stack--vertical-5>.Overlay{margin-top:0}.Stack.Stack--vertical-6{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-6>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-6>*+*{margin-top:2rem}.Stack.Stack--vertical-6>.Overlay{margin-top:0}.Stack.Stack--vertical-7{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-7>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-7>*+*{margin-top:3rem}.Stack.Stack--vertical-7>.Overlay{margin-top:0}.Stack.Stack--vertical-8{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-8>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-8>*+*{margin-top:4rem}.Stack.Stack--vertical-8>.Overlay{margin-top:0}.Stack.Stack--vertical-9{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-9>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-9>*+*{margin-top:6rem}.Stack.Stack--vertical-9>.Overlay{margin-top:0}.Stack.Stack--vertical-10{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-10>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-10>*+*{margin-top:8rem}.Stack.Stack--vertical-10>.Overlay{margin-top:0}.Stack.Stack--vertical-11{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-11>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-11>*+*{margin-top:12rem}.Stack.Stack--vertical-11>.Overlay{margin-top:0}.Stack.Stack--vertical-12{display:flex;justify-content:flex-start;flex-direction:column}.Stack.Stack--vertical-12>*{margin-top:0;margin-bottom:0}.Stack.Stack--vertical-12>*+*{margin-top:24rem}.Stack.Stack--vertical-12>.Overlay{margin-top:0}.Text--display{font-size:6rem;line-height:1.1}.Text--display,.Text--h1{font-family:Moda Operandi Sans,Arial,sans-serif;letter-spacing:0}.Text--h1{font-size:3.75rem;line-height:1.2}.Text--h2{font-size:3rem;line-height:1.1}.Text--h2,.Text--h3{font-family:Moda Operandi Sans,Arial,sans-serif;letter-spacing:0}.Text--h3{font-size:2rem;line-height:1.2}.Text--h4{font-size:1.5rem;letter-spacing:0}.Text--h4,.Text--h5{font-family:Moda Operandi Sans,Arial,sans-serif;line-height:1.4}.Text--h5{font-size:1.25rem;letter-spacing:.02em}.Text--h6{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:1rem;line-height:1.4;letter-spacing:.04em}.Text--body1{letter-spacing:.04em}.Text--body1,.Text--bold1{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6}.Text--bold1{letter-spacing:.1em;font-weight:700}.Text--body2{letter-spacing:.04em}.Text--body2,.Text--eyebrow{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.75rem;line-height:1.4}.Text--eyebrow{letter-spacing:.1em;text-transform:uppercase}.Text--sans{font-family:Moda Operandi Sans,Arial,sans-serif}.Text--serif{font-family:"Moda Operandi Serif",Times New Roman,Times,serif}.Dialog{max-width:90vw;background-color:#fff;text-align:center}.Dialog__content{padding:2rem}@media (min-width:62.0625rem){.Dialog{max-width:40rem}}.Constrain{width:90%;margin:0 auto;max-width:100rem}@media (max-width:62rem){.Constrain{width:100%;padding:0 2rem}}@media (max-width:48rem){.Constrain{width:100%;padding:0 1rem}}@media (max-width:25rem){.Constrain{width:100%;padding:0 .5rem}}@media (max-width:62rem){.ExceedConstrain{margin:0 -2rem}}@media (max-width:48rem){.ExceedConstrain{margin:0 -1rem}}@media (max-width:25rem){.ExceedConstrain{margin:0 -.5rem}}.TextInput{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em}@media (max-width:48rem){.TextInput{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:1rem;line-height:1.4;letter-spacing:.04em}}.TextInput{-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1;width:100%;padding:.75rem 1rem;border:1px solid #cacbcc;background-color:#fff;border-radius:0}.TextInput::-moz-placeholder{line-height:normal}.TextInput::placeholder{line-height:normal}.TextInput--focus,.TextInput:focus{outline:none;border-color:#191a1b}.TextInput--disabled,.TextInput:disabled{color:#cacbcc;border-color:#cacbcc;background-color:#f2f3f5}.TextInput--valid{border-color:#046c00}.TextInput--error,.TextInput--error:focus{border-color:#ee0700}.SearchInput{position:relative;display:inline-block}.SearchInput__clear,.SearchInput__icon{display:flex;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;width:3rem;height:100%;color:#656566}.SearchInput__input--round-borders{border-radius:2.5rem}.SearchInput__input--no-borders{border:none}.SearchInput__icon{left:0;pointer-events:none;z-index:1}.SearchInput__clear{right:0}.SearchInput__clear:hover{color:#191a1b;cursor:pointer}.SearchInput>input{width:100%;padding-right:3rem;padding-left:3rem}.SearchInput>input::-webkit-search-cancel-button,.SearchInput>input::-webkit-search-decoration,.SearchInput>input::-webkit-search-results-button,.SearchInput>input::-webkit-search-results-decoration{display:none}.SelectOption{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;display:block;width:100%;text-align:left;padding:.5rem .75rem;color:#191a1b}.SelectOption--selected{text-decoration:underline}.SelectOption--active,.SelectOption:hover{background-color:#f2f3f5}.SelectOption--disabled{color:#979899;cursor:default}.SelectOption--disabled:hover{background-color:#fff}.SelectOption__color-swatch{border-radius:50%;border:1px solid #191a1b;display:inline-block;margin-left:.25rem;margin-right:.25rem;height:1rem;transform:translateY(25%);width:1rem}.SelectOptions{background-color:#fff;border:1px solid #cacbcc}.SelectOptions:focus{outline:0;border-color:#656566}.SelectOptions__search{margin:.5rem}.SelectOptions__none{padding:.5rem .75rem}.SelectOptions__list{overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:24rem}.SelectOptions__extra-option{left:50%;margin-bottom:.25rem;margin-top:.5rem;transform:translate(-50%)}@media (max-width:48rem){.Select{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:1rem;line-height:1.4;letter-spacing:.04em}}.Select{min-height:2.5625rem;position:relative;display:flex;cursor:pointer}.Select--disabled{cursor:default}.Select--disabled .Select__value{color:#979899;cursor:default}.Select--disabled .Select__value:focus,.Select--disabled .Select__value:hover{border-color:#cacbcc;background-color:#fff}.Select--error{border:1px solid #ee0700}.Select__value{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em}@media (max-width:48rem){.Select__value{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:1rem;line-height:1.4;letter-spacing:.04em}}.Select__value{display:block;width:100%;text-align:left;padding:.5rem 3rem .5rem .75rem;color:#191a1b;border:1px solid #cacbcc;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.8;cursor:pointer}.Select__value:hover{border-color:#656566;background-color:#f2f3f5}.Select__value:focus{border-color:#656566;background-color:#cacbcc}@media (max-width:48rem){.Select__value--small{font-size:.75rem}}.Select__value--padding-1{padding-right:.25rem}.Select__value--padding-2{padding-right:.5rem}.Select__value--padding-3{padding-right:.75rem}.Select__value--padding-4{padding-right:1rem}.Select__value--padding-5{padding-right:1.5rem}.Select__value--padding-6{padding-right:2rem}.Select__value--padding-7{padding-right:3rem}.Select__value--padding-8{padding-right:4rem}.Select__value--padding-9{padding-right:6rem}.Select__value--padding-10{padding-right:8rem}.Select__value--padding-11{padding-right:12rem}.Select__value--padding-12{padding-right:24rem}.Select__icon{pointer-events:none;position:absolute;right:1rem;top:50%;transform:translateY(-50%)}.Select__icon--shifted{right:2rem}.Select__options{display:flex;position:absolute;left:0;right:0;z-index:1}.Select__options--up{flex-direction:column-reverse;bottom:100%;margin-bottom:.25rem}.Select__options--down{flex-direction:column;margin-top:.25rem;top:100%}.Select__hidden-field{-moz-opacity:0;opacity:0;position:absolute;width:0;height:0}.Select__selected-color{border-radius:50%;border:1px solid #191a1b;display:inline-block;margin-left:.25rem;margin-right:.25rem;height:1rem;transform:translateY(25%);width:1rem}.Select__live-region{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.MultiSelect{min-height:2.5625rem;position:relative;display:flex;width:100%}.MultiSelect--disabled{cursor:default}.MultiSelect--disabled .MultiSelect__search{color:#979899;cursor:default}.MultiSelect--disabled .MultiSelect__search:focus,.MultiSelect--disabled .MultiSelect__search:hover{border-color:#cacbcc;background-color:#f2f3f5}.MultiSelect--error{border:1px solid #ee0700}.MultiSelect__search{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em}@media (max-width:48rem){.MultiSelect__search{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:1rem;line-height:1.4;letter-spacing:.04em}}.MultiSelect__search{-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1;width:100%;padding:.75rem 1rem;border:1px solid #cacbcc;background-color:#fff;border-radius:0}.MultiSelect__search::-moz-placeholder{line-height:normal}.MultiSelect__search::placeholder{line-height:normal}.MultiSelect__search--focus,.MultiSelect__search:focus{outline:none;border-color:#191a1b}.MultiSelect__search--disabled,.MultiSelect__search:disabled{color:#cacbcc;border-color:#cacbcc;background-color:#f2f3f5}.MultiSelect__search--valid{border-color:#046c00}.MultiSelect__search--error,.MultiSelect__search--error:focus{border-color:#ee0700}.MultiSelect__search{display:flex;align-items:center;padding:.25rem 3rem .25rem .25rem}.MultiSelect__selected-items{display:flex;flex-wrap:wrap}.MultiSelect__selected-item{display:flex;align-items:center;border:1px solid #191a1b;border-radius:.5rem;margin:.25rem;padding:.25rem}.MultiSelect__selected-value{cursor:default}.MultiSelect__exit{margin-left:.25rem;cursor:pointer}.MultiSelect__icon{pointer-events:none;position:absolute;right:1rem;top:50%;transform:translateY(-50%)}.MultiSelect__icon--shifted{right:2rem}.Field{display:flex;justify-content:flex-start;flex-direction:column}.Field>*{margin-top:0;margin-bottom:0}.Field>*+*{margin-top:.25rem}.Field>.Overlay{margin-top:0}.Field__context{position:relative}.Field__icon{position:absolute;top:50%;right:.5rem;color:#ee0700;transform:translateY(-50%);pointer-events:none}.Field__error,.Field__label{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em}.Field__label{color:#656566}.Field__error{color:#ee0700;padding-top:1px}.DefinitionList{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;margin:0}.DefinitionList>dd,.DefinitionList>dt{display:inline-block;margin:0}.DefinitionList>dt{color:#191a1b;margin-right:.5rem}.DefinitionList>dd,.DefinitionList>dd>a{color:#656566}.DefinitionList>dd>a{text-decoration:underline}.DefinitionList>dd>a:hover{text-decoration:none}.Divider{display:flex;align-items:center;justify-content:center;width:100%}.Divider:after,.Divider:before{content:"";flex:1;border:none;background-color:#cacbcc;height:1px;width:50%}.Divider__text{width:auto;padding:0 1rem}.Divider--two-line:after,.Divider--two-line:before{transform:translateY(-.0875rem);background-color:#191a1b;box-shadow:0 .175rem 0 0 #191a1b}.Divider--no-line:after,.Divider--no-line:before{display:none}.Divider--line-above{padding:1rem 0}.Divider--line-above:after,.Divider--line-above:before{display:none}.Divider__content--line-above{border-top:1px solid #d9d9d9;padding-top:2rem;width:100%;text-align:center}@media (max-width:48rem){.Divider__content--line-above{padding:1rem 0}}.Expandable{display:flex;flex-direction:column}.Expandable__name{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;position:relative;text-align:left;cursor:pointer;padding:.75rem 1.5rem .75rem 0;-webkit-user-select:none;-moz-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis}.Expandable__icon{height:100%;padding-top:1rem;position:absolute;right:0;top:0}.Expandable__contents{display:flex;justify-content:flex-start;flex-direction:column}.Expandable__contents>*{margin-top:0;margin-bottom:0}.Expandable__contents>*+*{margin-top:.5rem}.Expandable__contents>.Overlay{margin-top:0}.Expandable__contents{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;padding-bottom:.75rem;display:none;color:#191a1b}.Expandable__contents ol,.Expandable__contents ul{padding-left:1rem;list-style:disc}.Expandable__contents a{color:#191a1b}.Expandable--plus-minus .Expandable__name:after,.Expandable--plus-minus .Expandable__name:before{content:"";display:block;position:absolute;top:50%;right:0;transform:translateY(-50%);height:1px;width:1rem;background-color:#191a1b}.Expandable--plus-minus .Expandable__name:before{transform:translateY(-50%) rotate(90deg);transition:transform .2s}.Expandable--expanded .Expandable__name:before{transform:translateY(-50%)}.Expandable--expanded .Expandable__contents{display:block}.Expandable--with-border{border-top:1px solid #f2f3f5}.Expandable--dark-background{border-color:#656566;color:#fff}.Expandable--dark-background .Expandable__name:after,.Expandable--dark-background .Expandable__name:before{background-color:#fff}.Expandable--dark-background .Expandable__contents{color:#fff}.Label{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;color:#656566}.Label--hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.Loading{padding:1.5rem;display:flex;align-items:center;justify-content:center;height:100%;width:100%;transition:opacity 1s}.Loading .ArcWindow,.Loading .Circle,.Loading .Diamond,.Loading .Triangle{width:3rem;height:3rem;opacity:1;animation:fade 1s linear}@keyframes fade{0%,to{opacity:0}50%{opacity:1}}.LoadingBalls{fill:#191a1b}.LoadingShapes__item--current path{fill:#fff;transition:fill 1s}.LoadingShapesPinkGreen__item{display:block}.LoadingShapesPinkGreen__item--current{display:none}.LoadingShapesLavenderBlue__item{display:block}.LoadingShapesLavenderBlue__item--current{display:none}.Paginator,.Paginator__button{display:flex;justify-content:center}.Paginator__button{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;border:none;height:2rem;width:2rem;align-items:center;cursor:pointer;margin-right:.25rem;margin-left:.25rem;background-color:transparent}.Paginator__button:first-child{margin-left:0}.Paginator__button:last-child{margin-right:0}.Paginator__button:hover{background-color:#f2f3f5}.Paginator__button--next,.Paginator__button--previous{width:-moz-fit-content;width:fit-content}.Paginator__button--currentPage{background-color:#f2f3f5}.Paginator__next-chevron{margin-left:.5rem}.Paginator__previous-chevron{margin-right:.5rem}.Paginator__button--ellipsis{cursor:auto}.Paginator__button--ellipsis:hover{background:transparent}.PasswordInput{position:relative}.PasswordInput__editor{padding-right:5rem}.PasswordInput__password-action{position:absolute;top:.5rem;right:2rem}@media (max-width:48rem){.PasswordInput__password-action{top:.7rem}}.Popover{position:relative}.Popover__content{position:absolute;background-color:#fff;border:.0625rem solid #cacbcc;z-index:1}.Popover__content:before{content:"";display:block;position:absolute;top:-.5rem;width:100%;height:.5rem}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.Popover__box--opening{animation:fade-in .75s}@keyframes fade-out{to{opacity:0}}.Popover__box--closing{animation:fade-out 1s}.Popover--anchor-topLeft .Popover__content{top:100%;bottom:auto;left:0;right:auto;transform:translateY(.5rem)}.Popover--anchor-topCenter .Popover__content{top:100%;bottom:auto;left:50%;right:auto;transform:translate(-50%,.5rem)}.Popover--anchor-topRight .Popover__content{top:100%;bottom:auto;left:auto;right:0;transform:translateY(.5rem)}.Popover--anchor-bottomLeft .Popover__content{top:auto;bottom:100%;left:0;right:auto;transform:translateY(-.5rem)}.Popover--anchor-bottomCenter .Popover__content{top:auto;bottom:100%;left:50%;right:auto;transform:translate(-50%,-.5rem)}.Popover--anchor-bottomRight .Popover__content{top:auto;bottom:100%;left:auto;right:0;transform:translateY(-.5rem)}.Popover--anchor-topCenter .Popover__caret,.Popover--anchor-topLeft .Popover__caret,.Popover--anchor-topRight .Popover__caret{top:100%}.Popover--anchor-topCenter .Popover__caret:after,.Popover--anchor-topCenter .Popover__caret:before,.Popover--anchor-topLeft .Popover__caret:after,.Popover--anchor-topLeft .Popover__caret:before,.Popover--anchor-topRight .Popover__caret:after,.Popover--anchor-topRight .Popover__caret:before{top:auto;bottom:-.5625rem;border-top:none;border-bottom:.5rem solid #fff}.Popover--anchor-topCenter .Popover__caret:before,.Popover--anchor-topLeft .Popover__caret:before,.Popover--anchor-topRight .Popover__caret:before{border-bottom:.5rem solid #191a1b}.Popover--anchor-bottomCenter .Popover__caret,.Popover--anchor-bottomLeft .Popover__caret,.Popover--anchor-bottomRight .Popover__caret{top:0}.Popover--anchor-bottomCenter .Popover__caret:after,.Popover--anchor-bottomCenter .Popover__caret:before,.Popover--anchor-bottomLeft .Popover__caret:after,.Popover--anchor-bottomLeft .Popover__caret:before,.Popover--anchor-bottomRight .Popover__caret:after,.Popover--anchor-bottomRight .Popover__caret:before{top:-.5625rem;bottom:auto;border-top:.5rem solid #fff;border-bottom:none}.Popover--anchor-bottomCenter .Popover__caret:before,.Popover--anchor-bottomLeft .Popover__caret:before,.Popover--anchor-bottomRight .Popover__caret:before{border-top:.5rem solid #191a1b}.Popover__trigger{position:relative;display:block}.Popover__caret{width:100%;position:absolute;z-index:2}.Popover__caret:after,.Popover__caret:before{content:"";position:absolute;left:50%;transform:translateX(-50%);border-left:.5rem solid transparent;border-right:.5rem solid transparent}.PromoBanner{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.75rem;line-height:1.4;letter-spacing:.04em;background-color:#f8f5ee;border-top:.25rem solid #d56b27}.PromoBanner__constrain{display:flex;justify-content:space-between;align-items:center}.PromoBanner__child{min-width:12rem;padding:.5rem .75rem}.PromoBanner__child--center{flex:1;text-align:center}.PromoBanner__child--left{padding-left:0}.PromoBanner__child--right{padding-right:0;text-align:right}.PromoBanner__child>a{color:#191a1b;position:relative;text-decoration:none}.PromoBanner__child>a:after{content:"";display:block;position:absolute;bottom:0;left:0;right:0;border-bottom:1px solid;opacity:.75}@media (max-width:48rem){.PromoBanner .PromoBanner__child--left,.PromoBanner .PromoBanner__child--right{display:none}}.RadioButton{display:flex;justify-content:flex-start;flex-direction:row}.RadioButton>*{margin-left:0;margin-right:0}.RadioButton>*+*{margin-left:.5rem}.RadioButton>.Overlay{margin-left:0}.RadioButton{position:relative;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;color:#191a1b}.RadioButton__indicator{position:relative;width:1rem;height:1rem;flex-shrink:0;border:1px solid;border-radius:50%;background-color:#fff}.RadioButton__indicator--checked{background-color:#191a1b}.RadioButton__indicator--checked:after{content:"";display:block;position:absolute;top:.25rem;right:.25rem;bottom:.25rem;left:.25rem;border-radius:50%;background-color:#fff}.RadioButton__indicator--disabled{color:#cacbcc;pointer-events:none;background-color:#fff}.RadioButton__indicator--disabled:after{background-color:#cacbcc}.RadioButton__input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.RadioButton:has(.RadioButton__input:focus-visible) .RadioButton__indicator{outline:2px solid #191a1b;outline-offset:2px}.RadioButton__label{font-size:.8125rem;line-height:1.6}.RadioButton__label,.SelectableButton{font-family:Moda Operandi Sans,Arial,sans-serif;letter-spacing:.04em;color:#191a1b}.SelectableButton{font-size:.75rem;line-height:1.4;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;text-align:center;max-width:100%;padding:.5rem .75rem;cursor:pointer;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;border:1px solid #cacbcc;background-color:transparent;transition:background-color .2s}.SelectableButton>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.SelectableButton--hover,.SelectableButton:hover{color:#191a1b;border-color:#cacbcc;background-color:#f2f3f5}.SelectableButton--selected,.SelectableButton--selected:hover{color:#191a1b;border-color:#191a1b;background-color:transparent}.SelectableButton--unavailable,.SelectableButton--unavailable:hover{color:#cacbcc;border-color:#cacbcc;background:linear-gradient(to bottom right,#fff calc(50% - 1px),#cacbcc,#fff calc(50% + 1px))}.SlidingPane{position:fixed;visibility:hidden;width:100%;bottom:-100vh;left:0;right:0;transition:all .5s ease-out;background-color:#fff;margin-left:0}.SlidingPane--active{visibility:visible;bottom:0}.SlidingPane__top{padding:.75rem;border-bottom:1px solid #cacbcc;box-shadow:0 -1px 2px rgba(25,26,27,.1)}.SlidingPane__close{position:absolute;top:0;right:0;padding:1.2rem;cursor:pointer}.SlidingPane__content{padding:1rem}.SlidingPane__overlay{background-color:rgba(0,0,0,.3);top:0;bottom:0;left:0;right:0;position:fixed;display:none}.SlidingPane__overlay--active{display:block}.Tab{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.75rem;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;padding:1rem 0;border-bottom:2px solid transparent;color:#656566;text-align:left;cursor:pointer}.Tab--active{color:#191a1b;border-bottom:2px solid #191a1b}.Tab:active,.Tab:focus{outline:none}.TabList{display:flex;justify-content:flex-start;flex-direction:row}.TabList>*{margin-left:0;margin-right:0}.TabList>*+*{margin-left:1rem}.TabList>.Overlay{margin-left:0}.TabList{border-bottom:1px solid #cacbcc}.TabPanels{margin-top:1rem}.Tag{display:flex;justify-content:flex-start;flex-direction:row}.Tag>*{margin-left:0;margin-right:0}.Tag>*+*{margin-left:.5rem}.Tag>.Overlay{margin-left:0}.Tag{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;display:inline-flex;align-items:center;padding:.5rem;border:1px solid #cacbcc;white-space:nowrap}.Tag:focus,.Tag:hover{border-color:#191a1b}.Tag--disabled{color:#979899}.Tag--disabled:focus,.Tag--disabled:hover{border-color:#cacbcc}@media (max-width:48rem){.Textarea{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:1rem;line-height:1.4;letter-spacing:.04em}}.Textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1;width:100%;padding:.75rem 1rem;border:1px solid #cacbcc;background-color:#fff;border-radius:0}.Textarea::-moz-placeholder{line-height:normal}.Textarea::placeholder{line-height:normal}.Textarea--focus,.Textarea:focus{outline:none;border-color:#191a1b}.Textarea--disabled,.Textarea:disabled{color:#cacbcc;border-color:#cacbcc;background-color:#f2f3f5}.Textarea--valid{border-color:#046c00}.Textarea--error,.Textarea--error:focus{border-color:#ee0700}.Textarea{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;resize:none}.Toast{color:#fff;padding:.75rem}.Toast--success{background-color:#046c00}.Toast--warning{background-color:#d56b27}.Toast--error{background-color:#ee0700}.VerticalDivider{border-left:1px solid #191a1b}.VerticalDivider--double{width:.175rem;border-right:1px solid #191a1b}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moda/om",
-  "version": "21.6.9",
+  "version": "21.6.11",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/Field/Field.tsx

@@ -1,8 +1,9 @@
-import React, { JSX } from 'react';
+import React, { JSX, useMemo } from 'react';
 import classNames from 'classnames';
 import WarningIcon from '@moda/icons/warning-16';
 import { TextInput, TextInputProps } from '../TextInput';
 import { Select } from '../Select';
+import { FormControlContext } from './FormControlContext';
 
 import './Field.scss';
 
@@ -15,50 +16,54 @@ export const Field = React.forwardRef(
     { className, children, error, label, placeholder, ...rest }: FieldProps,
     ref: React.Ref<HTMLInputElement>
   ) => {
+    const fieldContextValue = useMemo(() => ({ displaysError: Boolean(error) }), [error]);
+
     return (
-      <label className={classNames('Field', className)}>
-        {label && <span className='Field__label'>{label}</span>}
+      <FormControlContext.Provider value={fieldContextValue}>
+        <label className={classNames('Field', className)}>
+          {label && <span className='Field__label'>{label}</span>}
 
-        {/* TODO: Codify some kind of IconWrapper component */}
-        <span className='Field__context'>
-          {children ? (
-            <>
-              {React.cloneElement(children, {
-                ref,
-                error,
-                placeholder,
-                label,
-                shiftIconLeftwards: error && children.type === Select,
-                ...rest,
-                ...children.props
-              })}
+          {/* TODO: Codify some kind of IconWrapper component */}
+          <span className='Field__context'>
+            {children ? (
+              <>
+                {React.cloneElement(children, {
+                  ref,
+                  error,
+                  placeholder,
+                  label,
+                  shiftIconLeftwards: error && children.type === Select,
+                  ...rest,
+                  ...children.props
+                })}
 
-              {error && (
-                <span className='Field__icon'>
-                  <WarningIcon />
-                </span>
-              )}
-            </>
-          ) : (
-            <>
-              <TextInput
-                ref={ref}
-                placeholder={placeholder}
-                label={label}
-                error={error}
-                {...rest}
-              />
-              {error && (
-                <span className='Field__icon'>
-                  <WarningIcon />
-                </span>
-              )}
-            </>
-          )}
-        </span>
+                {error && (
+                  <span className='Field__icon'>
+                    <WarningIcon />
+                  </span>
+                )}
+              </>
+            ) : (
+              <>
+                <TextInput
+                  ref={ref}
+                  placeholder={placeholder}
+                  label={label}
+                  error={error}
+                  {...rest}
+                />
+                {error && (
+                  <span className='Field__icon'>
+                    <WarningIcon />
+                  </span>
+                )}
+              </>
+            )}
+          </span>
 
-        {error && <span className='Field__error'>{error}</span>}
-      </label>
+          {error && <span className='Field__error'>{error}</span>}
+        </label>
+      </FormControlContext.Provider>
     );
   }
 );

package/src/components/Field/FormControlContext.tsx

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react';
+
+type FormControlContextValue = {
+  displaysError: boolean;
+};
+
+export const FormControlContext = createContext<FormControlContextValue>({
+  displaysError: false
+});
+
+export const useFormControlContext = () => useContext(FormControlContext);

package/src/components/Field/index.ts

@@ -2,3 +2,4 @@ import { Field } from './Field';
 
 export { Field as Input };
 export * from './Field';
+export * from './FormControlContext';

package/src/components/Select/MultiSelect.tsx

@@ -43,6 +43,16 @@ export const MultiSelect: React.FC<Props> = ({
 
   const values = useMemo(() => (Array.isArray(state.value) ? state.value : []), [state.value]);
 
+  const selectedLabels = useMemo(
+    () => values.map(value => options.find(option => option.value === value)?.label || value),
+    [values, options]
+  );
+
+  const accessibleLabel = useMemo(() => {
+    if (selectedLabels.length === 0) return 'Select options';
+    return `Select options, ${selectedLabels.length} selected: ${selectedLabels.join(', ')}`;
+  }, [selectedLabels]);
+
   const handleSelect = useCallback(
     (option: SelectableOption) => {
       dispatch({ type: 'SELECT', payload: { value: uniq([...values, option.value]) } });
@@ -85,7 +95,16 @@ export const MultiSelect: React.FC<Props> = ({
       ref={selectRef}
       {...rest}
     >
-      <Clickable className='MultiSelect__search' disabled={disabled} onClick={handleToggle}>
+      <Clickable
+        className='MultiSelect__search'
+        disabled={disabled}
+        onClick={handleToggle}
+        aria-haspopup='listbox'
+        aria-expanded={state.mode === Mode.Open}
+        aria-controls={state.mode === Mode.Open ? `Select__listbox--${idRef}` : undefined}
+        aria-label={accessibleLabel}
+        type='button'
+      >
         <div className='MultiSelect__selected-items'>
           {values.map((value, index) => (
             <span className='MultiSelect__selected-item' key={index}>
@@ -120,7 +139,6 @@ export const MultiSelect: React.FC<Props> = ({
           options={options}
           onSelect={handleSelect}
           onFocus={handleFocus}
-          autoFocus={false}
         />
       )}
     </div>

package/src/components/Select/Select.scss

@@ -128,4 +128,8 @@
     transform: translateY(25%);
     width: om.space(4);
   }
+
+  &__live-region {
+    @include om.visually-hidden;
+  }
 }

package/src/components/Select/Select.test.tsx

@@ -16,7 +16,7 @@ describe('Select', () => {
       <Select idRef='1' name='name-1' label='Sort by' options={options} />
     );
     expect(container.innerHTML).toEqual(
-      '<div id="Select--1" class="Select"><input id="1" type="hidden" name="name-1"><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value"><label id="Select__label--1">Sort by</label><span class="Select__icon"></span></button></div>'
+      '<div id="Select--1" class="Select"><input id="1" type="hidden" value="" name="name-1"><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1" type="button" class="Clickable Select__value"><span id="Select__label--1" class="Select__label">Sort by</span><span id="Select__valueText--1"></span><span class="Select__icon"></span></button></div>'
     );
   });
 
@@ -27,7 +27,7 @@ describe('Select', () => {
     const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
     expect(container.innerHTML).toEqual(
-      '<div id="Select--1" class="Select"><input id="1" type="hidden" name="name-1"><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value"><label id="Select__label--1">Sort by</label><span class="Select__icon"></span></button><div class="SelectOptions Select__options Select__options--down"><ul class="SelectOptions__list" tabindex="-1" role="listbox" aria-labelledby="Select__label--1" aria-activedescendant="SelectOption--foo-1"><li class="SelectOption SelectOption--active" aria-label="Foo" aria-selected="false" role="option">Foo</li><li class="SelectOption" aria-label="Bar" aria-selected="false" role="option">Bar</li><li class="SelectOption SelectOption--disabled" aria-label="Baz" aria-selected="false" role="option">Baz</li></ul></div></div>'
+      '<div id="Select--1" class="Select"><input id="1" type="hidden" value="" name="name-1"><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="Select__label--1" type="button" class="Clickable Select__value" aria-controls="Select__listbox--1"><span id="Select__label--1" class="Select__label">Sort by</span><span id="Select__valueText--1"></span><span class="Select__icon"></span></button><div class="SelectOptions Select__options Select__options--down"><ul id="Select__listbox--1" class="SelectOptions__list" tabindex="-1" role="listbox" aria-label="Options" aria-activedescendant="SelectOption--foo-1"><li id="SelectOption--foo-1" class="SelectOption SelectOption--active" aria-selected="false" role="option">Foo</li><li id="SelectOption--bar-1" class="SelectOption" aria-selected="false" role="option">Bar</li><li id="SelectOption--baz-1" class="SelectOption SelectOption--disabled" aria-selected="false" aria-disabled="true" role="option">Baz</li></ul></div></div>'
     );
   });
 
@@ -45,7 +45,7 @@ describe('Select', () => {
     const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
     expect(container.innerHTML).toEqual(
-      '<div id="Select--1" class="Select Select--disabled"><input id="1" type="hidden" name="name-1"><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Clickable--disabled Select__value" disabled=""><label id="Select__label--1">Sort by</label><span class="Select__icon"></span></button></div>'
+      '<div id="Select--1" class="Select Select--disabled"><input id="1" type="hidden" value="" name="name-1"><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1" type="button" class="Clickable Clickable--disabled Select__value" disabled=""><span id="Select__label--1" class="Select__label">Sort by</span><span id="Select__valueText--1"></span><span class="Select__icon"></span></button></div>'
     );
   });
 
@@ -63,7 +63,7 @@ describe('Select', () => {
     );
     const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
-    const option = screen.getByLabelText('Bar');
+    const option = screen.getByRole('option', { name: 'Bar' });
     await userEvent.click(option);
     expect(onChange).toHaveBeenCalledWith('bar');
   });
@@ -82,7 +82,7 @@ describe('Select', () => {
     );
     const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
-    const option = screen.getByLabelText('Baz');
+    const option = screen.getByRole('option', { name: 'Baz' });
     await userEvent.click(option);
     expect(onChange).not.toHaveBeenCalled();
   });
@@ -93,21 +93,35 @@ describe('Select', () => {
     );
     const button = screen.getByRole('button', { name: /Sort by/ });
     await userEvent.click(button);
-    const option = screen.getByLabelText('Bar');
+    const option = screen.getByRole('option', { name: 'Bar' });
     await userEvent.click(option);
     expect(container.innerHTML).toEqual(
-      '<div id="Select--1" class="Select"><input id="1" type="hidden" name="name-1" value="bar"><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value"><label id="Select__label--1">Sort by: </label>Bar<span class="Select__icon"></span></button></div>'
+      '<div id="Select--1" class="Select"><input id="1" type="hidden" value="bar" name="name-1"><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__valueText--1" type="button" class="Clickable Select__value"><span id="Select__label--1" class="Select__label">Sort by: </span><span id="Select__valueText--1">Bar</span><span class="Select__icon"></span></button></div>'
     );
   });
 
+  it('closes dropdown and returns focus to button when Escape is pressed', async () => {
+    render(<Select idRef='1' name='name-1' label='Sort by' options={options} />);
+    const button = screen.getByRole('button', { name: /Sort by/ });
+    await userEvent.click(button);
+    expect(button).toHaveAttribute('aria-expanded', 'true');
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+
+    await userEvent.keyboard('{Escape}');
+
+    expect(button).toHaveAttribute('aria-expanded', 'false');
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+    expect(button).toHaveFocus();
+  });
+
   it('renders correctly when there is no label', async () => {
     const { container } = render(<Select idRef='1' name='name-1' options={options} />);
-    const button = screen.getByRole('button', { name: 'Select' });
+    const button = screen.getByRole('button', { name: 'Select an option' });
     await userEvent.click(button);
-    const option = screen.getByLabelText('Bar');
+    const option = screen.getByRole('option', { name: 'Bar' });
     await userEvent.click(option);
     expect(container.innerHTML).toEqual(
-      '<div id="Select--1" class="Select"><input id="1" type="hidden" name="name-1" value="bar"><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="Select__label--1 Select__value--1" type="button" title="Select" class="Clickable Select__value">Bar<span class="Select__icon"></span></button></div>'
+      '<div id="Select--1" class="Select"><input id="1" type="hidden" value="bar" name="name-1"><button id="Select__value--1" aria-haspopup="listbox" aria-expanded="false" aria-label="Select an option" type="button" class="Clickable Select__value"><span id="Select__valueText--1">Bar</span><span class="Select__icon"></span></button></div>'
     );
   });
 });

package/src/components/Select/Select.tsx

@@ -5,6 +5,7 @@ import ChevronUpIcon from '@moda/icons/chevron-up-12';
 import { colors } from '@moda/tokens';
 import { Clickable } from '../Clickable';
 import { TextColor } from '../Text';
+import { useFormControlContext } from '../Field/FormControlContext';
 import { SelectOptions } from './SelectOptions';
 import { SelectLabel } from './SelectLabel';
 import { useSelect } from './useSelect';
@@ -75,7 +76,11 @@ export const Select: React.FC<SelectProps> = ({
   smallMobileText = false,
   ...rest
 }) => {
-  const { state, dispatch, Mode, selectRef } = useSelect({ value, defaultValue });
+  const { displaysError: errorDisplayedByParent } = useFormControlContext();
+  const { state, dispatch, Mode, selectRef, buttonRef } = useSelect({
+    value,
+    defaultValue
+  });
 
   const handleSelect = useCallback(
     (option: SelectableOption) => {
@@ -134,10 +139,11 @@ export const Select: React.FC<SelectProps> = ({
         {...rest}
       >
         {!allowAutoFill && name && (
-          <input id={idRef} name={name} type='hidden' value={state.value} />
+          <input id={idRef} name={name} type='hidden' value={state.value || ''} />
         )}
 
         <Clickable
+          ref={buttonRef}
           id={idRef && `Select__value--${idRef}`}
           className={classNames('Select__value', {
             [`Select__value--padding-${paddingRight}`]: paddingRight != null,
@@ -148,9 +154,15 @@ export const Select: React.FC<SelectProps> = ({
           data-test-id={dataTestId}
           aria-haspopup='listbox'
           aria-expanded={state.mode === Mode.Open}
-          aria-labelledby={`Select__label--${idRef} Select__value--${idRef}`}
+          aria-labelledby={
+            label
+              ? `Select__label--${idRef}${(focused ?? selected)?.label ? ` Select__valueText--${idRef}` : ''}`
+              : undefined
+          }
+          aria-label={!label ? placeholder || 'Select an option' : undefined}
+          aria-invalid={error ? true : undefined}
+          aria-controls={state.mode === Mode.Open ? `Select__listbox--${idRef}` : undefined}
           type='button'
-          title='Select'
         >
           <SelectLabel
             idRef={idRef}
@@ -165,12 +177,16 @@ export const Select: React.FC<SelectProps> = ({
             />
           )}
 
-          {(focused ?? selected)?.label}
+          <span id={`Select__valueText--${idRef}`}>{(focused ?? selected)?.label}</span>
 
           <span
             className={classNames('Select__icon', { 'Select__icon--shifted': shiftIconLeftwards })}
           >
-            {state.mode === Mode.Open ? <ChevronUpIcon /> : <ChevronDownIcon />}
+            {state.mode === Mode.Open ? (
+              <ChevronUpIcon aria-hidden='true' />
+            ) : (
+              <ChevronDownIcon aria-hidden='true' />
+            )}
           </span>
         </Clickable>
 
@@ -193,6 +209,12 @@ export const Select: React.FC<SelectProps> = ({
         )}
       </div>
 
+      {typeof error === 'string' && !errorDisplayedByParent && (
+        <div role='status' aria-live='polite' aria-atomic='true' className='Select__live-region'>
+          {error}
+        </div>
+      )}
+
       {allowAutoFill && (
         <input
           className='Select__hidden-field'

package/src/components/Select/SelectLabel.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export type SelectLabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
+export type SelectLabelProps = React.HTMLAttributes<HTMLSpanElement> & {
   idRef?: string;
   label?: string;
   hasValue: boolean;
@@ -8,5 +8,10 @@ export type SelectLabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
 
 export const SelectLabel: React.FC<SelectLabelProps> = ({ idRef, label, hasValue }) => {
   if (!label) return null;
-  return <label id={`Select__label--${idRef}`}>{`${label}${hasValue ? ': ' : ''}`}</label>;
+  return (
+    <span
+      id={`Select__label--${idRef}`}
+      className='Select__label'
+    >{`${label}${hasValue ? ': ' : ''}`}</span>
+  );
 };