@moda/om 19.9.0 → 20.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/README.md +1 -2
  2. package/dist/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js.map +1 -1
  4. package/dist/styles.css +1 -1
  5. package/index.scss +1 -0
  6. package/package.json +4 -3
  7. package/src/components/AspectRatioBox/AspectRatioBox.scss +1 -1
  8. package/src/components/Badge/Badge.scss +17 -17
  9. package/src/components/Breadcrumbs/Breadcrumb/Breadcrumb.scss +5 -5
  10. package/src/components/Breadcrumbs/Breadcrumbs.scss +2 -2
  11. package/src/components/Breakpoint/Breakpoint.scss +9 -7
  12. package/src/components/Button/Button.scss +45 -44
  13. package/src/components/Checkbox/Checkbox.scss +11 -11
  14. package/src/components/Clickable/Clickable.scss +3 -3
  15. package/src/components/ColorSwatch/ColorSwatch.scss +9 -9
  16. package/src/components/Constrain/Constrain.scss +9 -8
  17. package/src/components/Constrain/ExceedConstrain.scss +7 -7
  18. package/src/components/ControlLink/ControlLink.scss +6 -6
  19. package/src/components/DefinitionList/DefinitionList.scss +5 -5
  20. package/src/components/Dialog/Dialog.scss +4 -4
  21. package/src/components/Divider/Divider.scss +5 -5
  22. package/src/components/Expandable/Expandable.scss +17 -17
  23. package/src/components/Field/Field.scss +7 -7
  24. package/src/components/Label/Label.scss +4 -4
  25. package/src/components/Loading/Loading.scss +4 -4
  26. package/src/components/LoadingBalls/LoadingBalls.scss +2 -2
  27. package/src/components/LoadingShapes/LoadingShapes.scss +2 -2
  28. package/src/components/Modal/Modal.scss +1 -1
  29. package/src/components/ModalOverlay/ModalOverlay.scss +6 -6
  30. package/src/components/Overlay/Overlay.scss +4 -4
  31. package/src/components/Paginator/Paginator.scss +10 -10
  32. package/src/components/PasswordInput/PasswordInput.scss +4 -4
  33. package/src/components/Popover/Popover.scss +9 -9
  34. package/src/components/PromoBanner/PromoBanner.scss +9 -9
  35. package/src/components/RadioButton/RadioButton.scss +14 -14
  36. package/src/components/SearchInput/SearchInput.scss +4 -4
  37. package/src/components/Select/MultiSelect.scss +14 -14
  38. package/src/components/Select/Select.scss +25 -25
  39. package/src/components/Select/SelectOption.scss +7 -7
  40. package/src/components/Select/SelectOptions.scss +8 -8
  41. package/src/components/SelectableButton/SelectableButton.scss +13 -13
  42. package/src/components/SlidingPane/SlidingPane.scss +7 -7
  43. package/src/components/Stack/Stack.scss +6 -4
  44. package/src/components/Tabs/Tab.scss +6 -6
  45. package/src/components/Tabs/TabList.scss +3 -3
  46. package/src/components/Tabs/TabPanels.scss +2 -2
  47. package/src/components/Tag/Tag.scss +8 -8
  48. package/src/components/Text/Text.scss +4 -3
  49. package/src/components/TextInput/TextInput.scss +2 -2
  50. package/src/components/Textarea/Textarea.scss +3 -3
  51. package/src/components/Toast/Toast.scss +6 -6
  52. package/src/components/VerticalDivider/VerticalDivider.scss +3 -3
  53. package/src/index.scss +3 -3
  54. package/src/mixins/_mixins.scss +7 -7
  55. package/src/mixins/font-smoothing/_font-smoothing.scss +0 -2
  56. package/src/mixins/font-smoothing/font-smoothing.stories.scss +3 -3
  57. package/src/mixins/global-styles/_global-styles.scss +6 -5
  58. package/src/mixins/input-styles/_input-styles.scss +14 -12
  59. package/src/mixins/overflow-scroll/_overflow-scroll.scss +0 -2
  60. package/src/mixins/overflow-scroll/overflow-scroll.stories.scss +3 -3
  61. package/src/mixins/stack/_stack.scss +3 -3
  62. package/src/mixins/stack/stack.stories.scss +3 -3
  63. package/src/mixins/thin-underline/_thin-underline.scss +0 -2
  64. package/src/mixins/thin-underline/thin-underline.stories.scss +2 -2
  65. package/src/mixins/visually-hidden/_visually-hidden.scss +0 -2
  66. package/src/mixins/visually-hidden/visually-hidden.stories.scss +2 -2
  67. package/src/utilities/States/State.scss +4 -4
  68. package/src/utilities/States/States.scss +2 -2
  69. package/src/utilities/States/StatesProps.scss +8 -8
package/dist/styles.css CHANGED
@@ -1 +1 @@
1
- .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}.StatesProps{font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;padding-top:.5rem;color:#979899;border-top:1px dotted #cacbcc}.StatesProps>strong{text-decoration:underline;color:#191a1b}.StatesProps:before{content:"<";color:#cacbcc}.StatesProps:after{content:"/>";color:#cacbcc}.State{border:1px dotted #979899;padding:.5rem}.State__props{display:block;margin-top:.5rem}.States{display:flex;justify-content:flex-start;flex-direction:column}.States>*{margin-top:0;margin-bottom:0}.States>*+*{margin-top:2rem}.States>.Overlay{margin-top:0}.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:#933a20}.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{display:flex;flex-flow:wrap;list-style:none;margin:0}.Breadcrumbs,.Clickable{line-height:1.6;padding:0}.Clickable{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;letter-spacing:.04em;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;color:inherit;font-size:1rem;text-decoration:none;white-space:nowrap}.Clickable:not(.Clickable--disabled){cursor:pointer}.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;color:#191a1b;opacity:.7}.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--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;position:relative;align-items:flex-start;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;color:#191a1b}.Checkbox>*{margin-left:0;margin-right:0}.Checkbox>*+*{margin-left:.5rem}.Checkbox>.Overlay{margin-left:0}.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__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;justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch}.Modal,.Overlay{top:0;right:0;bottom:0;left:0;display:flex;align-items:center}.Overlay{justify-content:flex-start;flex-direction:column;position:absolute;background-color:hsla(0,0%,100%,.9);justify-content:center;color:#191a1b;animation:slow-in .5s}.Overlay>*{margin-top:0;margin-bottom:0}.Overlay>*+*{margin-top:.5rem}.Overlay>.Overlay{margin-top:0}@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)}.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;-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}@media (max-width:48rem){.TextInput{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:1rem;line-height:1.4;letter-spacing:.04em}}.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}.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,.SelectOptions{background-color:#fff}.SelectOptions{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}.Select{min-height:2.5625rem;position:relative;display:flex;cursor:pointer}@media (max-width:48rem){.Select{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:1rem;line-height:1.4;letter-spacing:.04em}}.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;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}@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:hover{border-color:#656566;background-color:#f2f3f5}.Select__value:focus{border-color:#656566;background-color:#cacbcc}.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;height:1rem;position:absolute;right:3rem;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;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1;width:100%;border:1px solid #cacbcc;background-color:#fff;border-radius:0;display:flex;align-items:center;padding:.25rem 3rem .25rem .25rem}@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::-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__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}.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;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>*{margin-top:0;margin-bottom:0}.Expandable__contents>*+*{margin-top:.5rem}.Expandable__contents>.Overlay{margin-top:0}.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}.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}.Popover__box--opening{animation:fade-in .75s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.Popover__box--closing{animation:fade-out 1s}@keyframes fade-out{to{opacity:0}}.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;position:relative;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;color:#191a1b}.RadioButton>*{margin-left:0;margin-right:0}.RadioButton>*+*{margin-left:.5rem}.RadioButton>.Overlay{margin-left:0}.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__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}.TabList{display:flex;justify-content:flex-start;flex-direction:row;border-bottom:1px solid #cacbcc}.TabList>*{margin-left:0;margin-right:0}.TabList>*+*{margin-left:1rem}.TabList>.Overlay{margin-left:0}.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}.TabPanels{margin-top:1rem}.Tag{display:flex;justify-content:flex-start;flex-direction:row;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>*{margin-left:0;margin-right:0}.Tag>*+*{margin-left:.5rem}.Tag>.Overlay{margin-left:0}.Tag:focus,.Tag:hover{border-color:#191a1b}.Tag--disabled{color:#979899}.Tag--disabled:focus,.Tag--disabled:hover{border-color:#cacbcc}.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;font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;resize:none}@media (max-width:48rem){.Textarea{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:1rem;line-height:1.4;letter-spacing:.04em}}.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}.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}
1
+ .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}.StatesProps{font-family:Menlo,Monaco,Consolas,Courier New,monospace;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;padding-top:.5rem;color:#979899;border-top:1px dotted #cacbcc}.StatesProps>strong{text-decoration:underline;color:#191a1b}.StatesProps:before{content:"<";color:#cacbcc}.StatesProps:after{content:"/>";color:#cacbcc}.State{border:1px dotted #979899;padding:.5rem}.State__props{display:block;margin-top:.5rem}.States{display:flex;justify-content:flex-start;flex-direction:column}.States>*{margin-top:0;margin-bottom:0}.States>*+*{margin-top:2rem}.States>.Overlay{margin-top:0}.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:#933a20}.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{display:flex;flex-flow:wrap;list-style:none;margin:0}.Breadcrumbs,.Clickable{line-height:1.6;padding:0}.Clickable{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;letter-spacing:.04em;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0;color:inherit;font-size:1rem;text-decoration:none;white-space:nowrap}.Clickable:not(.Clickable--disabled){cursor:pointer}.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;color:#191a1b;opacity:.7}.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--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;position:relative;align-items:flex-start;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;color:#191a1b}.Checkbox>*{margin-left:0;margin-right:0}.Checkbox>*+*{margin-left:.5rem}.Checkbox>.Overlay{margin-left:0}.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__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;justify-content:center;overflow-y:auto;-webkit-overflow-scrolling:touch}.Modal,.Overlay{top:0;right:0;bottom:0;left:0;display:flex;align-items:center}.Overlay{justify-content:flex-start;flex-direction:column;position:absolute;background-color:hsla(0,0%,100%,.9);justify-content:center;color:#191a1b;animation:slow-in .5s}.Overlay>*{margin-top:0;margin-bottom:0}.Overlay>*+*{margin-top:.5rem}.Overlay>.Overlay{margin-top:0}@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)}.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:font-family(sans)}.Text--serif{font-family:font-family(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;-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}@media (max-width:48rem){.TextInput{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:1rem;line-height:1.4;letter-spacing:.04em}}.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}.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,.SelectOptions{background-color:#fff}.SelectOptions{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}.Select{min-height:2.5625rem;position:relative;display:flex;cursor:pointer}@media (max-width:48rem){.Select{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:1rem;line-height:1.4;letter-spacing:.04em}}.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;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}@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:hover{border-color:#656566;background-color:#f2f3f5}.Select__value:focus{border-color:#656566;background-color:#cacbcc}.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;height:1rem;position:absolute;right:3rem;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;-webkit-appearance:none;-moz-appearance:none;appearance:none;line-height:1;width:100%;border:1px solid #cacbcc;background-color:#fff;border-radius:0;display:flex;align-items:center;padding:.25rem 3rem .25rem .25rem}@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::-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__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}.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;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>*{margin-top:0;margin-bottom:0}.Expandable__contents>*+*{margin-top:.5rem}.Expandable__contents>.Overlay{margin-top:0}.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}.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}.Popover__box--opening{animation:fade-in .75s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.Popover__box--closing{animation:fade-out 1s}@keyframes fade-out{to{opacity:0}}.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;position:relative;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;color:#191a1b}.RadioButton>*{margin-left:0;margin-right:0}.RadioButton>*+*{margin-left:.5rem}.RadioButton>.Overlay{margin-left:0}.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__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}.TabList{display:flex;justify-content:flex-start;flex-direction:row;border-bottom:1px solid #cacbcc}.TabList>*{margin-left:0;margin-right:0}.TabList>*+*{margin-left:1rem}.TabList>.Overlay{margin-left:0}.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}.TabPanels{margin-top:1rem}.Tag{display:flex;justify-content:flex-start;flex-direction:row;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>*{margin-left:0;margin-right:0}.Tag>*+*{margin-left:.5rem}.Tag>.Overlay{margin-left:0}.Tag:focus,.Tag:hover{border-color:#191a1b}.Tag--disabled{color:#979899}.Tag--disabled:focus,.Tag--disabled:hover{border-color:#cacbcc}.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;font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;resize:none}@media (max-width:48rem){.Textarea{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:1rem;line-height:1.4;letter-spacing:.04em}}.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}.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/index.scss ADDED
@@ -0,0 +1 @@
1
+ @forward 'src';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@moda/om",
3
- "version": "19.9.0",
3
+ "version": "20.0.0",
4
4
  "description": "Moda Operandi design system",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
@@ -12,7 +12,8 @@
12
12
  "license": "MIT",
13
13
  "files": [
14
14
  "dist",
15
- "src"
15
+ "src",
16
+ "index.scss"
16
17
  ],
17
18
  "sideEffects": [
18
19
  "*.css",
@@ -51,7 +52,7 @@
51
52
  },
52
53
  "dependencies": {
53
54
  "@moda/icons": "^5.29.9",
54
- "@moda/tokens": "^5.10.101",
55
+ "@moda/tokens": "^6.0.0",
55
56
  "@storybook/addon-styling": "^1.3.7",
56
57
  "@types/classnames": "^2.3.4",
57
58
  "classnames": "^2.5.1",
@@ -1,4 +1,4 @@
1
- @import '~om';
1
+ @use '~@moda/om';
2
2
 
3
3
  .AspectRatioBox {
4
4
  position: relative;
@@ -1,51 +1,51 @@
1
- @import '~om';
1
+ @use '~@moda/om';
2
2
 
3
3
  .Badge {
4
- @include text(eyebrow);
4
+ @include om.text(eyebrow);
5
5
  display: inline-block;
6
- color: color(ink);
6
+ color: om.color(ink);
7
7
  border: 1px solid;
8
- padding: space(1);
8
+ padding: om.space(1);
9
9
  user-select: none;
10
10
 
11
11
  &,
12
12
  &--default {
13
13
  background-color: transparent;
14
- border-color: color(fog);
15
- color: color(cement);
14
+ border-color: om.color(fog);
15
+ color: om.color(cement);
16
16
  }
17
17
 
18
18
  &--forest-green {
19
- background-color: color(forest-green);
19
+ background-color: om.color(forest-green);
20
20
  border-color: transparent;
21
- color: color('snow');
21
+ color: om.color('snow');
22
22
  }
23
23
 
24
24
  &--klein-blue {
25
- background-color: color(klein-blue);
25
+ background-color: om.color(klein-blue);
26
26
  border-color: transparent;
27
- color: color('snow');
27
+ color: om.color('snow');
28
28
  }
29
29
 
30
30
  &--brick {
31
- background-color: color(brick);
31
+ background-color: om.color(brick);
32
32
  border-color: transparent;
33
- color: color('snow');
33
+ color: om.color('snow');
34
34
  }
35
35
 
36
36
  &--dark-fuchsia {
37
- border-color: color(dark-fuchsia);
38
- color: color(dark-fuchsia);
37
+ border-color: om.color(dark-fuchsia);
38
+ color: om.color(dark-fuchsia);
39
39
  font-weight: 700;
40
40
  text-transform: none;
41
41
  }
42
42
 
43
43
  &--noise {
44
- @include text(body1);
44
+ @include om.text(body1);
45
45
 
46
- background-color: color(noise);
46
+ background-color: om.color(noise);
47
47
  border-color: transparent;
48
- color: color(ink);
48
+ color: om.color(ink);
49
49
  text-transform: none;
50
50
  line-height: 1.4;
51
51
  }
@@ -1,9 +1,9 @@
1
- @import '~om';
1
+ @use '~@moda/om';
2
2
 
3
3
  .Breadcrumb {
4
4
  position: relative;
5
- padding-right: space(4);
6
- margin-right: space(2);
5
+ padding-right: om.space(4);
6
+ margin-right: om.space(2);
7
7
  white-space: nowrap;
8
8
  overflow: hidden;
9
9
 
@@ -13,9 +13,9 @@
13
13
  content: ' ';
14
14
  position: absolute;
15
15
  top: 50%;
16
- right: space(1);
16
+ right: om.space(1);
17
17
  transform: translateY(-50%) rotate(25deg);
18
- border-right: 1px solid color(fog);
18
+ border-right: 1px solid om.color(fog);
19
19
  height: 75%;
20
20
  }
21
21
 
@@ -1,7 +1,7 @@
1
- @import '~om';
1
+ @use '~@moda/om';
2
2
 
3
3
  .Breadcrumbs {
4
- @include text(body1);
4
+ @include om.text(body1);
5
5
 
6
6
  display: flex;
7
7
  flex-flow: wrap;
@@ -1,20 +1,22 @@
1
+ @use 'sass:list';
2
+ @use 'sass:map';
1
3
  @use 'sass:math';
2
- @import '~om';
4
+ @use '~@moda/om';
3
5
 
4
6
  .Breakpoint {
5
7
  $onePixel: math.div(1, 16);
6
- $keys: map-keys($breakpoints);
8
+ $keys: map.keys(om.$breakpoints);
7
9
 
8
10
  display: none;
9
11
 
10
- @for $i from 1 through length($keys) {
11
- $key: nth($keys, $i);
12
- $width: map-get($breakpoints, $key);
12
+ @for $i from 1 through list.length($keys) {
13
+ $key: list.nth($keys, $i);
14
+ $width: map.get(om.$breakpoints, $key);
13
15
 
14
16
  $prevWidth: null;
15
17
  @if $i - 1 > 1 {
16
- $prevKey: nth($keys, $i - 1);
17
- $prevWidth: map-get($breakpoints, $prevKey) + $onePixel;
18
+ $prevKey: list.nth($keys, $i - 1);
19
+ $prevWidth: map.get(om.$breakpoints, $prevKey) + $onePixel;
18
20
  } @else {
19
21
  $prevWidth: 0;
20
22
  }
@@ -1,15 +1,15 @@
1
- @import '~om';
1
+ @use '~@moda/om';
2
2
 
3
3
  .Button {
4
4
  $self: &;
5
5
 
6
- @include text(eyebrow);
6
+ @include om.text(eyebrow);
7
7
  appearance: none;
8
8
  display: inline-flex;
9
9
  align-items: center;
10
10
  justify-content: center;
11
11
  text-align: center;
12
- padding: spacing(4, 7);
12
+ padding: om.spacing(4, 7);
13
13
  border: 1px solid;
14
14
  cursor: pointer;
15
15
  text-decoration: none;
@@ -17,105 +17,106 @@
17
17
 
18
18
  // Insert space after icon if present
19
19
  > * {
20
- margin-right: space(2);
20
+ margin-right: om.space(2);
21
21
  }
22
22
 
23
23
  &,
24
24
  &--primary {
25
- color: color('snow');
26
- border-color: color(ink);
27
- background-color: color(ink);
28
- @include font-smoothing(subpixel);
25
+ color: om.color('snow');
26
+ border-color: om.color(ink);
27
+ background-color: om.color(ink);
28
+ @include om.font-smoothing(subpixel);
29
29
 
30
30
  &#{$self}--hover,
31
31
  &:hover {
32
- color: color('snow');
33
- border-color: color(fog, 0.32);
34
- background: linear-gradient(0deg, color(fog, 0.32), color(fog, 0.32)), color(ink);
32
+ color: om.color('snow');
33
+ border-color: om.color(fog, 0.32);
34
+ background: linear-gradient(0deg, om.color(fog, 0.32), om.color(fog, 0.32)), om.color(ink);
35
35
  }
36
36
 
37
37
  &#{$self}--focus,
38
38
  &:focus {
39
- color: color('snow');
40
- border-color: color(fog, 0.12);
41
- background: linear-gradient(0deg, color('snow', 0.12), color('snow', 0.12)), color(ink);
39
+ color: om.color('snow');
40
+ border-color: om.color(fog, 0.12);
41
+ background: linear-gradient(0deg, om.color('snow', 0.12), om.color('snow', 0.12)),
42
+ om.color(ink);
42
43
  }
43
44
 
44
45
  &#{$self}--disabled,
45
46
  &:disabled {
46
- color: color(ink);
47
- border-color: color(noise);
48
- background-color: color(noise);
47
+ color: om.color(ink);
48
+ border-color: om.color(noise);
49
+ background-color: om.color(noise);
49
50
  cursor: default;
50
51
  pointer-events: none;
51
52
  }
52
53
  }
53
54
 
54
55
  &--secondary {
55
- color: color(ink);
56
- border-color: color(ink);
57
- background-color: color('snow');
56
+ color: om.color(ink);
57
+ border-color: om.color(ink);
58
+ background-color: om.color('snow');
58
59
 
59
60
  &#{$self}--hover,
60
61
  &:hover {
61
- color: color(ink);
62
- border-color: color(ink);
63
- background-color: color(noise, 0.32);
62
+ color: om.color(ink);
63
+ border-color: om.color(ink);
64
+ background-color: om.color(noise, 0.32);
64
65
  }
65
66
 
66
67
  &#{$self}--focus,
67
68
  &:focus {
68
- color: color(ink);
69
- border-color: color(ink);
70
- background-color: color(noise);
69
+ color: om.color(ink);
70
+ border-color: om.color(ink);
71
+ background-color: om.color(noise);
71
72
  }
72
73
 
73
74
  &#{$self}--disabled,
74
75
  &:disabled {
75
- color: color(cement);
76
- border-color: color(fog);
77
- background-color: color(noise);
76
+ color: om.color(cement);
77
+ border-color: om.color(fog);
78
+ background-color: om.color(noise);
78
79
  cursor: default;
79
80
  pointer-events: none;
80
81
  }
81
82
  }
82
83
 
83
84
  &--tertiary {
84
- @include text(body1);
85
+ @include om.text(body1);
85
86
 
86
- padding: spacing(2, 3);
87
- color: color(ink);
88
- border-color: color(elephant);
89
- background-color: color('snow');
87
+ padding: om.spacing(2, 3);
88
+ color: om.color(ink);
89
+ border-color: om.color(elephant);
90
+ background-color: om.color('snow');
90
91
  text-transform: none;
91
92
  line-height: 1.4;
92
93
 
93
94
  &#{$self}--hover,
94
95
  &:hover {
95
- color: color(ink);
96
- border-color: color(elephant);
97
- background-color: color(noise, 0.32);
96
+ color: om.color(ink);
97
+ border-color: om.color(elephant);
98
+ background-color: om.color(noise, 0.32);
98
99
  }
99
100
 
100
101
  &#{$self}--focus,
101
102
  &:focus {
102
- color: color(ink);
103
- border-color: color(elephant);
104
- background-color: color(noise);
103
+ color: om.color(ink);
104
+ border-color: om.color(elephant);
105
+ background-color: om.color(noise);
105
106
  }
106
107
 
107
108
  &#{$self}--disabled,
108
109
  &:disabled {
109
- color: color(cement);
110
- border-color: color(fog);
111
- background-color: color(noise);
110
+ color: om.color(cement);
111
+ border-color: om.color(fog);
112
+ background-color: om.color(noise);
112
113
  cursor: default;
113
114
  pointer-events: none;
114
115
  }
115
116
  }
116
117
 
117
118
  &--elevated {
118
- box-shadow: 0px 1px 4px color(coal, 0.09);
119
+ box-shadow: 0px 1px 4px om.color(coal, 0.09);
119
120
  }
120
121
 
121
122
  &--chip {
@@ -1,30 +1,30 @@
1
- @import '~om';
1
+ @use '~@moda/om';
2
2
 
3
3
  .Checkbox {
4
- $checkbox-size: space(4);
5
- $checkbox-check-offset: calc(space(1) / 2);
4
+ $checkbox-size: om.space(4);
5
+ $checkbox-check-offset: calc(om.space(1) / 2);
6
6
 
7
- @include stack(2, $direction: horizontal);
7
+ @include om.stack(2, $direction: horizontal);
8
8
 
9
9
  position: relative;
10
10
  align-items: flex-start;
11
11
  user-select: none;
12
12
  cursor: pointer;
13
- color: color(ink);
13
+ color: om.color(ink);
14
14
 
15
15
  &__indicator {
16
16
  position: relative;
17
17
  width: $checkbox-size;
18
18
  height: $checkbox-size;
19
- margin-top: calc(space(1) / 2);
19
+ margin-top: calc(om.space(1) / 2);
20
20
  flex-shrink: 0;
21
21
  border: 1px solid;
22
22
 
23
23
  &--disabled {
24
- color: color(elephant);
24
+ color: om.color(elephant);
25
25
  pointer-events: none;
26
26
  &::after {
27
- background-color: color(elephant);
27
+ background-color: om.color(elephant);
28
28
  }
29
29
  }
30
30
  }
@@ -34,12 +34,12 @@
34
34
  }
35
35
 
36
36
  &__input {
37
- @include visually-hidden();
37
+ @include om.visually-hidden();
38
38
  }
39
39
 
40
40
  &__label {
41
- @include text(body1);
41
+ @include om.text(body1);
42
42
 
43
- color: color(ink);
43
+ color: om.color(ink);
44
44
  }
45
45
  }
@@ -1,7 +1,7 @@
1
- @import '~om';
1
+ @use '~@moda/om';
2
2
 
3
3
  .Clickable {
4
- @include text(body1);
4
+ @include om.text(body1);
5
5
 
6
6
  &:not(&--disabled) {
7
7
  cursor: pointer;
@@ -11,7 +11,7 @@
11
11
  background-color: transparent;
12
12
  border: 0;
13
13
  color: inherit;
14
- font-size: __dangerously-get-font-size__(2);
14
+ font-size: om.dangerously-get-font-size(2);
15
15
  padding: 0;
16
16
  text-decoration: none;
17
17
  white-space: nowrap;
@@ -1,11 +1,11 @@
1
- @import '~om';
1
+ @use '~@moda/om';
2
2
 
3
3
  .ColorSwatch {
4
4
  $self: &;
5
5
  $outer-border-color: rgba(black, 0.5);
6
- $on-sale-dot-size: space(1);
7
- $default-size: space(6);
8
- $small-size: space(5);
6
+ $on-sale-dot-size: om.space(1);
7
+ $default-size: om.space(6);
8
+ $small-size: om.space(5);
9
9
 
10
10
  position: relative;
11
11
  width: $default-size;
@@ -33,7 +33,7 @@
33
33
  height: 33%;
34
34
  transform: translate(-50%, -50%);
35
35
  border-radius: 50%;
36
- background-color: color('snow');
36
+ background-color: om.color('snow');
37
37
  z-index: 1;
38
38
  }
39
39
 
@@ -60,7 +60,7 @@
60
60
 
61
61
  &:hover,
62
62
  &--hover {
63
- border-color: color(elephant);
63
+ border-color: om.color(elephant);
64
64
 
65
65
  // Inset dot
66
66
  &::before {
@@ -113,7 +113,7 @@
113
113
  width: $on-sale-dot-size;
114
114
  height: $on-sale-dot-size;
115
115
  border-radius: 50%;
116
- background-color: color('code-red');
116
+ background-color: om.color('code-red');
117
117
  }
118
118
  }
119
119
 
@@ -125,11 +125,11 @@
125
125
  &--light {
126
126
  // Inset dot
127
127
  &::before {
128
- background-color: color(ink);
128
+ background-color: om.color(ink);
129
129
  }
130
130
 
131
131
  #{$self}__chip {
132
- border: 1px solid color(ink, 0.25);
132
+ border: 1px solid om.color(ink, 0.25);
133
133
  }
134
134
  }
135
135
  }