@moda/om 16.2.0 → 16.2.1

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 (116) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/index.cjs.js +310 -278
  3. package/dist/index.cjs.js.map +1 -1
  4. package/dist/index.esm.js +309 -277
  5. package/dist/index.esm.js.map +1 -1
  6. package/dist/styles.css +1 -1
  7. package/package.json +18 -8
  8. package/src/components/AspectRatioBox/AspectRatioBox.tsx +4 -4
  9. package/src/components/AspectRatioBox/index.ts +1 -1
  10. package/src/components/Badge/Badge.stories.tsx +5 -5
  11. package/src/components/Badge/Badge.test.tsx +1 -1
  12. package/src/components/Breadcrumbs/Breadcrumb/Breadcrumb.tsx +6 -6
  13. package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx +6 -6
  14. package/src/components/Breadcrumbs/Breadcrumbs.test.tsx +2 -2
  15. package/src/components/Breadcrumbs/Breadcrumbs.tsx +1 -1
  16. package/src/components/Breakpoint/Breakpoint.stories.tsx +10 -9
  17. package/src/components/Breakpoint/Breakpoint.test.tsx +2 -2
  18. package/src/components/Breakpoint/generateMediaQuery.ts +5 -4
  19. package/src/components/Button/Button.stories.tsx +4 -4
  20. package/src/components/Checkbox/Checkbox.stories.tsx +5 -5
  21. package/src/components/Checkbox/Checkbox.test.tsx +3 -3
  22. package/src/components/Checkbox/Checkbox.tsx +4 -4
  23. package/src/components/Clickable/Clickable.stories.tsx +3 -3
  24. package/src/components/ColorSwatch/ColorSwatch.stories.tsx +11 -11
  25. package/src/components/ColorSwatch/ColorSwatch.test.tsx +1 -1
  26. package/src/components/ColorSwatch/ColorSwatch.tsx +1 -1
  27. package/src/components/Constrain/Constrain.stories.tsx +1 -1
  28. package/src/components/Constrain/ExceedConstrain.stories.tsx +2 -2
  29. package/src/components/ControlLink/ControlLink.stories.tsx +1 -1
  30. package/src/components/ControlLink/index.ts +1 -1
  31. package/src/components/CreditCardNumberInput/CreditCardNumberInput.stories.tsx +1 -1
  32. package/src/components/CreditCardNumberInput/CreditCardNumberInput.test.tsx +4 -4
  33. package/src/components/CreditCardNumberInput/CreditCardNumberInput.tsx +1 -0
  34. package/src/components/DefinitionList/DefinitionList.stories.tsx +3 -3
  35. package/src/components/DefinitionList/DefinitionList.test.tsx +1 -1
  36. package/src/components/Divider/Divider.stories.tsx +4 -4
  37. package/src/components/Divider/Divider.test.tsx +1 -1
  38. package/src/components/Divider/Divider.tsx +1 -1
  39. package/src/components/Divider/NoLineDivider.tsx +1 -1
  40. package/src/components/Divider/TwoLineDivider.tsx +1 -1
  41. package/src/components/Expandable/Expandable.stories.tsx +8 -8
  42. package/src/components/Expandable/Expandable.test.tsx +1 -1
  43. package/src/components/Expandable/Expandable.tsx +3 -2
  44. package/src/components/Field/Field.stories.tsx +4 -4
  45. package/src/components/Field/Field.test.tsx +7 -7
  46. package/src/components/Field/Field.tsx +5 -5
  47. package/src/components/Field/index.ts +1 -0
  48. package/src/components/Loading/Loading.test.tsx +1 -1
  49. package/src/components/Loading/Loading.tsx +2 -1
  50. package/src/components/Modal/Modal.test.tsx +2 -2
  51. package/src/components/ModalOverlay/ModalOverlay.test.tsx +2 -2
  52. package/src/components/ModalOverlay/ModalOverlay.tsx +2 -2
  53. package/src/components/Overlay/Overlay.stories.tsx +1 -1
  54. package/src/components/Paginator/Paginator.tsx +3 -3
  55. package/src/components/PasswordInput/PasswordInput.stories.tsx +1 -1
  56. package/src/components/PasswordInput/PasswordInput.tsx +6 -6
  57. package/src/components/Popover/Popover.stories.tsx +1 -1
  58. package/src/components/Popover/Popover.tsx +10 -7
  59. package/src/components/PromoBanner/PromoBanner.stories.tsx +9 -9
  60. package/src/components/PromoBanner/PromoBanner.tsx +1 -1
  61. package/src/components/RadioButton/RadioButton.stories.tsx +2 -2
  62. package/src/components/RadioButton/RadioButton.tsx +4 -4
  63. package/src/components/SearchInput/SearchInput.stories.tsx +2 -2
  64. package/src/components/SearchInput/SearchInput.test.tsx +1 -1
  65. package/src/components/SearchInput/SearchInput.tsx +3 -3
  66. package/src/components/Select/MultiSelect.tsx +7 -7
  67. package/src/components/Select/Select.stories.tsx +15 -14
  68. package/src/components/Select/Select.test.tsx +13 -13
  69. package/src/components/Select/Select.tsx +7 -7
  70. package/src/components/Select/SelectOption.tsx +1 -1
  71. package/src/components/Select/SelectOptions.tsx +5 -5
  72. package/src/components/SelectableButton/SelectableButton.stories.tsx +1 -1
  73. package/src/components/Shape/ArcWindow.tsx +10 -10
  74. package/src/components/Shape/Bradley.tsx +4 -4
  75. package/src/components/Shape/Brancusi.tsx +4 -4
  76. package/src/components/Shape/Circle.tsx +10 -10
  77. package/src/components/Shape/Diamond.tsx +10 -10
  78. package/src/components/Shape/Keyhole.tsx +4 -4
  79. package/src/components/Shape/Mirror.tsx +4 -4
  80. package/src/components/Shape/Oval.tsx +4 -4
  81. package/src/components/Shape/Triangle.tsx +7 -7
  82. package/src/components/Shape/Window.tsx +4 -4
  83. package/src/components/Stack/Stack.stories.tsx +3 -3
  84. package/src/components/Stack/Stack.test.tsx +1 -1
  85. package/src/components/Tabs/TabList.tsx +1 -1
  86. package/src/components/Tabs/TabPanel.tsx +1 -1
  87. package/src/components/Tabs/TabPanels.tsx +1 -1
  88. package/src/components/Tabs/Tabs.stories.tsx +2 -2
  89. package/src/components/Tabs/Tabs.test.tsx +2 -2
  90. package/src/components/Tabs/Tabs.tsx +7 -1
  91. package/src/components/Tag/Tag.tsx +6 -5
  92. package/src/components/Text/Text.stories.tsx +5 -5
  93. package/src/components/Text/Text.test.tsx +1 -1
  94. package/src/components/TextInput/TextInput.stories.tsx +1 -1
  95. package/src/components/TextInput/TextInput.test.tsx +1 -1
  96. package/src/components/Textarea/Textarea.stories.tsx +1 -1
  97. package/src/components/Textarea/Textarea.test.tsx +3 -3
  98. package/src/components/Toast/Toast.stories.tsx +1 -1
  99. package/src/components/Toast/Toast.test.tsx +1 -1
  100. package/src/components/Toast/Toast.tsx +6 -6
  101. package/src/components/VerticalDivider/VerticalDivider.stories.tsx +3 -3
  102. package/src/components/VerticalDivider/VerticalDivider.test.tsx +2 -2
  103. package/src/hooks/useKeyboardListNavigation.spec.ts +2 -1
  104. package/src/hooks/useKeyboardListNavigation.ts +2 -0
  105. package/src/hooks/useUpdateEffect.ts +1 -0
  106. package/src/index.ts +2 -2
  107. package/src/mixins/font-smoothing/font-smoothing.stories.tsx +8 -8
  108. package/src/mixins/overflow-scroll/overflow-scroll.stories.tsx +2 -2
  109. package/src/mixins/stack/stack.stories.tsx +5 -6
  110. package/src/mixins/thin-underline/thin-underline.stories.tsx +1 -1
  111. package/src/mixins/visually-hidden/visually-hidden.stories.tsx +1 -1
  112. package/src/utilities/States/State.tsx +3 -2
  113. package/src/utilities/States/States.tsx +4 -3
  114. package/src/utilities/States/StatesProps.tsx +5 -2
  115. package/src/utilities/States/isRenderProps.ts +1 -0
  116. package/src/utilities/States/stringifyProps.tsx +1 -0
package/dist/styles.css CHANGED
@@ -1 +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;-ms-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}.Breadcrumbs{display:flex;flex-flow:wrap;list-style:none;margin:0}.Breadcrumbs,.Clickable{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;padding:0}.Clickable{-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--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;-ms-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)}.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:-ms-input-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}.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}.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__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}.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:-ms-input-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}.Expandable{display:flex;flex-direction:column;border-top:1px solid #f2f3f5}.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;-ms-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis}.Expandable__name--plusMinus:after,.Expandable__name--plusMinus:before{content:"";display:block;position:absolute;top:50%;right:0;transform:translateY(-50%);height:1px;width:1rem;background-color:#191a1b}.Expandable__name--plusMinus:before{transform:translateY(-50%) rotate(90deg);transition:transform .2s}.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--expanded .Expandable__name:before{transform:translateY(-50%)}.Expandable--expanded .Expandable__contents{display:block}.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}.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;-webkit-animation:fade 1s linear;animation:fade 1s linear}@-webkit-keyframes fade{0%,to{opacity:0}50%{opacity:1}}@keyframes fade{0%,to{opacity:0}50%{opacity:1}}.LoadingBalls{fill:#191a1b}.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;-webkit-animation:slow-in .5s;animation:slow-in .5s}.Overlay>*{margin-top:0;margin-bottom:0}.Overlay>*+*{margin-top:.5rem}.Overlay>.Overlay{margin-top:0}@-webkit-keyframes slow-in{0%{opacity:0}to{opacity:1}}@keyframes slow-in{0%{opacity:0}to{opacity:1}}.Overlay--closing{-webkit-animation:slow-out .5s forwards;animation:slow-out .5s forwards}@-webkit-keyframes slow-out{0%{opacity:1}to{opacity:0}}@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)}.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:-webkit-fit-content;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}.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{-webkit-animation:fade-in .75s;animation:fade-in .75s}@-webkit-keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.Popover__box--closing{-webkit-animation:fade-out 1s;animation:fade-out 1s}@-webkit-keyframes fade-out{to{opacity:0}}@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;color:#191a1b}.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;-ms-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;-ms-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))}.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}.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}.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}.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:-ms-input-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}.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}}.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}
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}.Breadcrumbs{display:flex;flex-flow:wrap;list-style:none;margin:0}.Breadcrumbs,.Clickable{font-family:Moda Operandi Sans,Arial,sans-serif;font-size:.8125rem;line-height:1.6;letter-spacing:.04em;padding:0}.Clickable{-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--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)}.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}.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}.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__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}.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}.Expandable{display:flex;flex-direction:column;border-top:1px solid #f2f3f5}.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__name--plusMinus:after,.Expandable__name--plusMinus:before{content:"";display:block;position:absolute;top:50%;right:0;transform:translateY(-50%);height:1px;width:1rem;background-color:#191a1b}.Expandable__name--plusMinus:before{transform:translateY(-50%) rotate(90deg);transition:transform .2s}.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--expanded .Expandable__name:before{transform:translateY(-50%)}.Expandable--expanded .Expandable__contents{display:block}.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}.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;-webkit-animation:fade 1s linear;animation:fade 1s linear}@-webkit-keyframes fade{0%,to{opacity:0}50%{opacity:1}}@keyframes fade{0%,to{opacity:0}50%{opacity:1}}.LoadingBalls{fill:#191a1b}.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;-webkit-animation:slow-in .5s;animation:slow-in .5s}.Overlay>*{margin-top:0;margin-bottom:0}.Overlay>*+*{margin-top:.5rem}.Overlay>.Overlay{margin-top:0}@-webkit-keyframes slow-in{0%{opacity:0}to{opacity:1}}@keyframes slow-in{0%{opacity:0}to{opacity:1}}.Overlay--closing{-webkit-animation:slow-out .5s forwards;animation:slow-out .5s forwards}@-webkit-keyframes slow-out{0%{opacity:1}to{opacity:0}}@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)}.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:-webkit-fit-content;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}.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{-webkit-animation:fade-in .75s;animation:fade-in .75s}@-webkit-keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.Popover__box--closing{-webkit-animation:fade-out 1s;animation:fade-out 1s}@-webkit-keyframes fade-out{to{opacity:0}}@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;color:#191a1b}.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))}.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}.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}.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}.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}}
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@moda/om",
3
- "version": "16.2.0",
3
+ "version": "16.2.1",
4
4
  "description": "Moda Operandi design system",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
7
- "types": "dist/index.d.ts",
7
+ "types": "dist/src/index.d.ts",
8
8
  "sass": "src/index.scss",
9
9
  "style": "dist/styles.css",
10
10
  "repository": "git@github.com:ModaOperandi/om.git",
@@ -98,11 +98,21 @@
98
98
  "commitizen": "^4.0.3",
99
99
  "css-loader": "^6.0.0",
100
100
  "cz-conventional-changelog": "^3.3.0",
101
- "eslint": "^8.15.0",
102
- "eslint-plugin-jest-dom": "^4.0.2",
103
- "eslint-plugin-react": "^7.18.3",
104
- "eslint-plugin-react-hooks": "^4.3.0",
105
- "eslint-plugin-testing-library": "^5.5.1",
101
+ "eslint": "^8.18.0",
102
+ "eslint-config-prettier": "^8.0.0",
103
+ "eslint-config-prettier-react": "^0.0.24",
104
+ "eslint-config-standard-jsx": "^11.0.0",
105
+ "eslint-plugin-import": "^2.18.2",
106
+ "eslint-plugin-jest-dom": "^4.0.0",
107
+ "eslint-plugin-jsx-a11y": "^6.2.3",
108
+ "eslint-plugin-no-loops": "^0.3.0",
109
+ "eslint-plugin-node": "^11.0.0",
110
+ "eslint-plugin-prettier": "^4.0.0",
111
+ "eslint-plugin-promise": "^6.0.0",
112
+ "eslint-plugin-react": "^7.16.0",
113
+ "eslint-plugin-react-hooks": "^4.6.0",
114
+ "eslint-plugin-standard": "^5.0.0",
115
+ "eslint-plugin-testing-library": "^5.0.0",
106
116
  "husky": "^8.0.1",
107
117
  "identity-obj-proxy": "^3.0.0",
108
118
  "ignore-not-found-export-webpack-plugin": "^1.0.1",
@@ -115,7 +125,7 @@
115
125
  "pinst": "^3.0.0",
116
126
  "postcss": "^8.1.10",
117
127
  "postcss-loader": "^7.0.0",
118
- "prettier": "^2.0.1",
128
+ "prettier": "^2.7.1",
119
129
  "ramda": "^0.28.0",
120
130
  "react": "^18.1.0",
121
131
  "react-dom": "^18.1.0",
@@ -34,7 +34,7 @@ export const AspectRatioBox = React.forwardRef(
34
34
  width: aspectWidth,
35
35
  height: aspectHeight,
36
36
  maxWidth,
37
- maxHeight,
37
+ maxHeight
38
38
  });
39
39
 
40
40
  return (
@@ -43,15 +43,15 @@ export const AspectRatioBox = React.forwardRef(
43
43
  className={classNames(
44
44
  'AspectRatioBox',
45
45
  {
46
- 'AspectRatioBox--outlined': outlined,
46
+ 'AspectRatioBox--outlined': outlined
47
47
  },
48
48
  className
49
49
  )}
50
50
  style={{ maxWidth: `${width}px` }}
51
51
  {...rest}
52
52
  >
53
- <div className='AspectRatioBox__wrapper' style={{ paddingBottom }} />
54
- <div className='AspectRatioBox__content'>{children}</div>
53
+ <div className="AspectRatioBox__wrapper" style={{ paddingBottom }} />
54
+ <div className="AspectRatioBox__content">{children}</div>
55
55
  </div>
56
56
  );
57
57
  }
@@ -1 +1 @@
1
- export * from './AspectRatioBox';
1
+ export * from './AspectRatioBox';
@@ -8,23 +8,23 @@ export default { title: 'Components/Badge' };
8
8
  export const Themes = () => (
9
9
  <>
10
10
  <States>
11
- <Badge theme='forest-green'>BESTSELLER</Badge>
11
+ <Badge theme="forest-green">BESTSELLER</Badge>
12
12
  </States>
13
13
 
14
14
  <States>
15
- <Badge theme='klein-blue'>TRENDING</Badge>
15
+ <Badge theme="klein-blue">TRENDING</Badge>
16
16
  </States>
17
17
 
18
18
  <States>
19
- <Badge theme='brick'>Fall Essential</Badge>
19
+ <Badge theme="brick">Fall Essential</Badge>
20
20
  </States>
21
21
 
22
22
  <States>
23
- <Badge theme='dark-fuchsia'>25% off with Code FALL-25</Badge>
23
+ <Badge theme="dark-fuchsia">25% off with Code FALL-25</Badge>
24
24
  </States>
25
25
 
26
26
  <States>
27
- <Badge theme='dark-fuchsia'>30% off with Code TREAT30</Badge>
27
+ <Badge theme="dark-fuchsia">30% off with Code TREAT30</Badge>
28
28
  </States>
29
29
  </>
30
30
  );
@@ -10,7 +10,7 @@ describe('Badge', () => {
10
10
  });
11
11
 
12
12
  it('supports custom themes and children', () => {
13
- render(<Badge theme='klein-blue'>Custom Text - 2</Badge>);
13
+ render(<Badge theme="klein-blue">Custom Text - 2</Badge>);
14
14
  expect(screen.getByText('Custom Text - 2')).toHaveClass('Badge--klein-blue');
15
15
  });
16
16
  });
@@ -18,17 +18,17 @@ export const Breadcrumb: React.FC<BreadcrumbProps> = ({
18
18
  }) => (
19
19
  <li
20
20
  className={classNames('Breadcrumb', className)}
21
- itemProp='itemListElement'
21
+ itemProp="itemListElement"
22
22
  itemScope
23
- itemType='http://schema.org/ListItem'
23
+ itemType="http://schema.org/ListItem"
24
24
  >
25
25
  {rest.to || rest.href ? (
26
- <ControlLink itemProp='item' {...rest}>
27
- <span itemProp='name'>{children}</span>
26
+ <ControlLink itemProp="item" {...rest}>
27
+ <span itemProp="name">{children}</span>
28
28
  </ControlLink>
29
29
  ) : (
30
- <span itemProp='name'>{children}</span>
30
+ <span itemProp="name">{children}</span>
31
31
  )}
32
- {position != null && <meta itemProp='position' content={String(position)} />}
32
+ {position != null && <meta itemProp="position" content={String(position)} />}
33
33
  </li>
34
34
  );
@@ -8,9 +8,9 @@ export default { title: 'Components/Breadcrumbs' };
8
8
  export const Default = () => (
9
9
  <States<BreadcrumbsProps>>
10
10
  <Breadcrumbs>
11
- <Breadcrumb href='#men'>Men</Breadcrumb>
12
- <Breadcrumb href='#clothing'>Clothing</Breadcrumb>
13
- <Breadcrumb href='#coats-jackets'>Coats &amp; Jackets</Breadcrumb>
11
+ <Breadcrumb href="#men">Men</Breadcrumb>
12
+ <Breadcrumb href="#clothing">Clothing</Breadcrumb>
13
+ <Breadcrumb href="#coats-jackets">Coats &amp; Jackets</Breadcrumb>
14
14
  <Breadcrumb>Zippy Safari Straight-Leg Wool Jumpsuit</Breadcrumb>
15
15
  </Breadcrumbs>
16
16
  </States>
@@ -19,9 +19,9 @@ export const Default = () => (
19
19
  export const Mobile = () => (
20
20
  <States<BreadcrumbsProps>>
21
21
  <Breadcrumbs>
22
- <Breadcrumb href='#men'>Men</Breadcrumb>
23
- <Breadcrumb href='#clothing'>Clothing</Breadcrumb>
24
- <Breadcrumb href='#coats-jackets'>Coats &amp; Jackets</Breadcrumb>
22
+ <Breadcrumb href="#men">Men</Breadcrumb>
23
+ <Breadcrumb href="#clothing">Clothing</Breadcrumb>
24
+ <Breadcrumb href="#coats-jackets">Coats &amp; Jackets</Breadcrumb>
25
25
  <Breadcrumb>Zippy Safari Straight-Leg Wool Jumpsuit</Breadcrumb>
26
26
  </Breadcrumbs>
27
27
  </States>
@@ -7,8 +7,8 @@ describe('Breadcrumbs', () => {
7
7
  it('wraps elements with microdata tags', () => {
8
8
  render(
9
9
  <Breadcrumbs>
10
- <Breadcrumb href='/one'>One</Breadcrumb>
11
- <Breadcrumb href='/two'>Two</Breadcrumb>
10
+ <Breadcrumb href="/one">One</Breadcrumb>
11
+ <Breadcrumb href="/two">Two</Breadcrumb>
12
12
  <Breadcrumb>Three</Breadcrumb>
13
13
  </Breadcrumbs>
14
14
  );
@@ -11,7 +11,7 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children, className, .
11
11
  return (
12
12
  <ol
13
13
  itemScope
14
- itemType='http://schema.org/BreadcrumbList'
14
+ itemType="http://schema.org/BreadcrumbList"
15
15
  className={classNames('Breadcrumbs', className)}
16
16
  {...rest}
17
17
  >
@@ -1,3 +1,4 @@
1
+ /* eslint-disable no-console */
1
2
  import React from 'react';
2
3
  import { action } from '@storybook/addon-actions';
3
4
  import { breakpoints } from '@moda/tokens';
@@ -66,15 +67,15 @@ export const Values = () => (
66
67
  return (
67
68
  <>
68
69
  <Breakpoint key={`at:${name}`} at={name}>
69
- <Debug name={name} width={width} mode='at' />
70
+ <Debug name={name} width={width} mode="at" />
70
71
  </Breakpoint>
71
72
 
72
73
  <Breakpoint key={`gt:${name}`} gt={name}>
73
- <Debug name={name} width={width} mode='gt' />
74
+ <Debug name={name} width={width} mode="gt" />
74
75
  </Breakpoint>
75
76
 
76
77
  <Breakpoint key={`lt:${name}`} lt={name}>
77
- <Debug name={name} width={width} mode='lt' />
78
+ <Debug name={name} width={width} mode="lt" />
78
79
  </Breakpoint>
79
80
  </>
80
81
  );
@@ -88,21 +89,21 @@ export const Simple = () => (
88
89
  <Display key={width} width={width} />
89
90
  ))}
90
91
 
91
- <Breakpoint lt='sm'>Only displays on small screens</Breakpoint>
92
- <Breakpoint gt='sm'>Only displays on large screens</Breakpoint>
92
+ <Breakpoint lt="sm">Only displays on small screens</Breakpoint>
93
+ <Breakpoint gt="sm">Only displays on large screens</Breakpoint>
93
94
  </>
94
95
  );
95
96
 
96
97
  export const WithEvents = () => (
97
98
  <>
98
- <Breakpoint lt='sm'>
99
+ <Breakpoint lt="sm">
99
100
  Only displays on smaller screens
100
- <Watcher from='sm' />
101
+ <Watcher from="sm" />
101
102
  </Breakpoint>
102
103
 
103
- <Breakpoint gt='sm'>
104
+ <Breakpoint gt="sm">
104
105
  Only displays on large screens
105
- <Watcher from='lg' />
106
+ <Watcher from="lg" />
106
107
  </Breakpoint>
107
108
  </>
108
109
  );
@@ -7,8 +7,8 @@ describe('Breakpoint', () => {
7
7
  it('renders correctly', () => {
8
8
  render(
9
9
  <>
10
- <Breakpoint gt='md'>Visible on mobile</Breakpoint>
11
- <Breakpoint lt='md'>Visible on desktop</Breakpoint>
10
+ <Breakpoint gt="md">Visible on mobile</Breakpoint>
11
+ <Breakpoint lt="md">Visible on desktop</Breakpoint>
12
12
  </>
13
13
  );
14
14
  expect(screen.getByText('Visible on desktop')).toBeVisible();
@@ -15,6 +15,7 @@ export interface MediaQueryBounds {
15
15
 
16
16
  const breakpointKeys = Object.keys(breakpoints);
17
17
 
18
+ // eslint-disable-next-line @typescript-eslint/no-magic-numbers
18
19
  const ONE_PIXEL = 1 / 16;
19
20
 
20
21
  export const getMediaQueryBounds = ({ mode, breakpoint }: GenerateMediaQuery): MediaQueryBounds => {
@@ -24,20 +25,20 @@ export const getMediaQueryBounds = ({ mode, breakpoint }: GenerateMediaQuery): M
24
25
  const prevWidth =
25
26
  prevIndex === -1
26
27
  ? 0
27
- : parseInt(breakpoints[breakpointKeys[prevIndex] as Breakpoint]) + ONE_PIXEL;
28
+ : parseInt(breakpoints[breakpointKeys[prevIndex] as Breakpoint], 10) + ONE_PIXEL;
28
29
 
29
30
  return {
30
31
  min: prevWidth,
31
- max: parseInt(breakpoints[breakpoint])
32
+ max: parseInt(breakpoints[breakpoint], 10)
32
33
  };
33
34
  }
34
35
  case 'gt':
35
36
  return {
36
- min: parseInt(breakpoints[breakpoint]) + ONE_PIXEL
37
+ min: parseInt(breakpoints[breakpoint], 10) + ONE_PIXEL
37
38
  };
38
39
  case 'lt':
39
40
  return {
40
- max: parseInt(breakpoints[breakpoint])
41
+ max: parseInt(breakpoints[breakpoint], 10)
41
42
  };
42
43
  }
43
44
  };
@@ -3,9 +3,9 @@ import { BrowserRouter } from 'react-router-dom';
3
3
  import { action } from '@storybook/addon-actions';
4
4
  import { States } from 'storybook-states';
5
5
 
6
- import { Button, ButtonProps } from './Button';
7
- import { Stack } from '../Stack';
8
6
  import Heart from '@moda/icons/favorite-outline-16';
7
+ import { Stack } from '../Stack';
8
+ import { Button, ButtonProps } from './Button';
9
9
 
10
10
  export default { title: 'Components/Button' };
11
11
 
@@ -41,7 +41,7 @@ export const SecondaryChip = () => (
41
41
 
42
42
  export const PrimaryWithHref = () => (
43
43
  <States<ButtonProps> states={[{}, { hover: true }, { focus: true }, { disabled: true }]}>
44
- <Button href='#href' onClick={action('clicked')}>
44
+ <Button href="#href" onClick={action('clicked')}>
45
45
  Add to Cart
46
46
  </Button>
47
47
  </States>
@@ -50,7 +50,7 @@ export const PrimaryWithHref = () => (
50
50
  export const PrimaryAsReactRouterLink = () => (
51
51
  <BrowserRouter>
52
52
  <States<ButtonProps> states={[{}, { hover: true }, { focus: true }, { disabled: true }]}>
53
- <Button to='#href' onClick={action('clicked')}>
53
+ <Button to="#href" onClick={action('clicked')}>
54
54
  Add to Cart
55
55
  </Button>
56
56
  </States>
@@ -2,9 +2,9 @@ import React, { useState } from 'react';
2
2
  import { States } from 'storybook-states';
3
3
 
4
4
  import { Text } from '../Text';
5
- import { Checkbox, CheckboxProps } from './Checkbox';
6
5
  import { Stack } from '../Stack';
7
6
  import { RadioButton } from '../RadioButton';
7
+ import { Checkbox, CheckboxProps } from './Checkbox';
8
8
 
9
9
  export default { title: 'Components/Checkbox' };
10
10
 
@@ -20,7 +20,7 @@ export const Default = () => (
20
20
  { children: 'Disabled', checked: true, disabled: true },
21
21
  { children: 'Filtering/Circle', checkIcon: 'circle' },
22
22
  { children: 'Disabled', checkIcon: 'circle', checked: true, disabled: true },
23
- { children: <Text color='code-red'>Important!</Text> }
23
+ { children: <Text color="code-red">Important!</Text> }
24
24
  ]}
25
25
  >
26
26
  <Checkbox />
@@ -33,11 +33,11 @@ export const Check = () => {
33
33
  return (
34
34
  <States>
35
35
  <Stack space={2}>
36
- <Text color='burnt-orange'>{checked ? 'Remembering' : 'Forgetting'}</Text>
36
+ <Text color="burnt-orange">{checked ? 'Remembering' : 'Forgetting'}</Text>
37
37
 
38
38
  <Checkbox
39
- id='rememberMe'
40
- name='rememberMe'
39
+ id="rememberMe"
40
+ name="rememberMe"
41
41
  checked={checked}
42
42
  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
43
43
  check(event.target.checked);
@@ -8,7 +8,7 @@ describe('Checkbox', () => {
8
8
  it('works correctly with checked attribute (controlled)', async () => {
9
9
  const handleChange = jest.fn();
10
10
  const { rerender } = render(
11
- <Checkbox data-testid='checkbox' checked onChange={handleChange} />
11
+ <Checkbox data-testid="checkbox" checked onChange={handleChange} />
12
12
  );
13
13
 
14
14
  expect(screen.getByRole('checkbox') as HTMLInputElement).toBeChecked();
@@ -18,14 +18,14 @@ describe('Checkbox', () => {
18
18
  expect(handleChange).toBeCalled();
19
19
  expect(screen.getByRole('checkbox') as HTMLInputElement).toBeChecked();
20
20
 
21
- rerender(<Checkbox data-testid='checkbox' checked={false} onChange={handleChange} />);
21
+ rerender(<Checkbox data-testid="checkbox" checked={false} onChange={handleChange} />);
22
22
 
23
23
  expect(screen.getByRole('checkbox') as HTMLInputElement).not.toBeChecked();
24
24
  });
25
25
 
26
26
  it('works correctly with defaultChecked attribute (uncontrolled)', async () => {
27
27
  const handleChange = jest.fn();
28
- render(<Checkbox data-testid='checkbox' defaultChecked={false} onChange={handleChange} />);
28
+ render(<Checkbox data-testid="checkbox" defaultChecked={false} onChange={handleChange} />);
29
29
 
30
30
  expect(screen.getByRole('checkbox') as HTMLInputElement).not.toBeChecked();
31
31
 
@@ -45,7 +45,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
45
45
 
46
46
  return (
47
47
  <label
48
- role='button'
48
+ role="button"
49
49
  tabIndex={0}
50
50
  className={classNames('Checkbox', className, {
51
51
  'Checkbox--disabled': disabled
@@ -68,8 +68,8 @@ export const Checkbox: React.FC<CheckboxProps> = ({
68
68
 
69
69
  <input
70
70
  tabIndex={-1}
71
- className='Checkbox__input'
72
- type='checkbox'
71
+ className="Checkbox__input"
72
+ type="checkbox"
73
73
  checked={isChecked}
74
74
  value={value}
75
75
  onChange={handleChange}
@@ -77,7 +77,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
77
77
  {...rest}
78
78
  />
79
79
 
80
- {children && <span className='Checkbox__label'>{children}</span>}
80
+ {children && <span className="Checkbox__label">{children}</span>}
81
81
  </label>
82
82
  );
83
83
  };
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
2
  import { action } from '@storybook/addon-actions';
3
3
  import { States } from 'storybook-states';
4
- import { Clickable, ClickableProps } from './Clickable';
5
4
  import { BrowserRouter } from 'react-router-dom';
5
+ import { Clickable, ClickableProps } from './Clickable';
6
6
 
7
7
  export default { title: 'Components/Clickable' };
8
8
 
@@ -16,14 +16,14 @@ export const Button = () => (
16
16
 
17
17
  export const Anchor = () => (
18
18
  <States<ClickableProps>>
19
- <Clickable href={'#'}>Useful to extend in place of &lt;a/&gt;. Click me.</Clickable>
19
+ <Clickable href="#">Useful to extend in place of &lt;a/&gt;. Click me.</Clickable>
20
20
  </States>
21
21
  );
22
22
 
23
23
  export const Link = () => (
24
24
  <BrowserRouter>
25
25
  <States<ClickableProps>>
26
- <Clickable to='#href'>Useful to extend in place of &lt;Link/&gt;. Click me.</Clickable>
26
+ <Clickable to="#href">Useful to extend in place of &lt;Link/&gt;. Click me.</Clickable>
27
27
  </States>
28
28
  </BrowserRouter>
29
29
  );