@bonlineza/luxity-lib 2.11.0 → 2.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/Accordion.js +34 -0
  2. package/AddInterest.js +247 -24
  3. package/BrandSelector.js +225 -2
  4. package/Checkbox.js +34 -0
  5. package/CheckboxButton.js +34 -0
  6. package/GenderSelector.js +34 -0
  7. package/GraphQLDropdownSelector.js +225 -2
  8. package/GraphQLMultiSelector.js +34 -0
  9. package/IconHeader.js +34 -0
  10. package/InterestCatSelector.js +34 -0
  11. package/InterestItem.js +34 -0
  12. package/Interests.js +251 -28
  13. package/InvertedTextButton.js +34 -0
  14. package/LuxityGraphQLDropdownSelector.js +225 -2
  15. package/LuxityGraphQLMultiselector.js +34 -0
  16. package/MaterialSelector.js +225 -2
  17. package/ModelSelector.js +225 -2
  18. package/NotificationDropDown.js +34 -0
  19. package/OutlinePrimaryButton.js +34 -0
  20. package/PriceRangeSelector.js +34 -0
  21. package/PrimaryButton.js +34 -0
  22. package/README.md +2 -4
  23. package/RadioButtons.js +34 -0
  24. package/RangeSlider.js +34 -0
  25. package/RareStepFooter.js +54 -16
  26. package/RareStepHeader.js +215 -96
  27. package/SecondaryButton.js +34 -0
  28. package/ShoeSizeSelector.js +34 -0
  29. package/StyleSelector.js +34 -0
  30. package/TextButton.js +34 -0
  31. package/Tooltip.js +34 -0
  32. package/build/bundle.js +435 -0
  33. package/package.json +1 -1
package/Accordion.js CHANGED
@@ -147,6 +147,40 @@
147
147
  ntrlMinTen: '#e6e6e6',
148
148
  gray: '#efefef',
149
149
  darkerGray: '#454141'
150
+ },
151
+ rareStepColors: {
152
+ primary: '#202b58',
153
+ secondary: '#ef5c2d',
154
+ ntrlMin: '#ffffff',
155
+ ntrl40: '#f4f4f4',
156
+ ntrl50: '#808080',
157
+ ntrl60: '#e8e8e8',
158
+ ntrl70: '#252525',
159
+ ntrlMax: '#000000'
160
+ },
161
+ rareStepFontWeights: {
162
+ normal: 400,
163
+ medium: 500,
164
+ semiBold: 600,
165
+ bold: 700
166
+ },
167
+ rareStepFontSize: {
168
+ h1: '36px',
169
+ h2: '30px',
170
+ h3: '24px',
171
+ h4: '20px',
172
+ h5: '16px',
173
+ h6: '14px',
174
+ footerTitle: '18px'
175
+ },
176
+ rareStepPageSizes: {
177
+ mobile: '500px',
178
+ tablet: '768px',
179
+ desktop: '992px',
180
+ screenl: '1280px',
181
+ screenxl: '1680px',
182
+ screenxxl: '1920px',
183
+ container: '1600px'
150
184
  }
151
185
  };
152
186
 
package/AddInterest.js CHANGED
@@ -556,6 +556,40 @@
556
556
  ntrlMinTen: '#e6e6e6',
557
557
  gray: '#efefef',
558
558
  darkerGray: '#454141'
559
+ },
560
+ rareStepColors: {
561
+ primary: '#202b58',
562
+ secondary: '#ef5c2d',
563
+ ntrlMin: '#ffffff',
564
+ ntrl40: '#f4f4f4',
565
+ ntrl50: '#808080',
566
+ ntrl60: '#e8e8e8',
567
+ ntrl70: '#252525',
568
+ ntrlMax: '#000000'
569
+ },
570
+ rareStepFontWeights: {
571
+ normal: 400,
572
+ medium: 500,
573
+ semiBold: 600,
574
+ bold: 700
575
+ },
576
+ rareStepFontSize: {
577
+ h1: '36px',
578
+ h2: '30px',
579
+ h3: '24px',
580
+ h4: '20px',
581
+ h5: '16px',
582
+ h6: '14px',
583
+ footerTitle: '18px'
584
+ },
585
+ rareStepPageSizes: {
586
+ mobile: '500px',
587
+ tablet: '768px',
588
+ desktop: '992px',
589
+ screenl: '1280px',
590
+ screenxl: '1680px',
591
+ screenxxl: '1920px',
592
+ container: '1600px'
559
593
  }
560
594
  };
561
595
 
@@ -10174,12 +10208,201 @@
10174
10208
  defaultShoeSizeType: shoeSizeTypes.eu.value
10175
10209
  };
10176
10210
 
10177
- var _templateObject$H;
10211
+ var _templateObject$H, _templateObject2$7, _templateObject3$4, _templateObject4$3, _templateObject5$1, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28;
10212
+ var HeaderWrapper = styled__default.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n {\n display: inline-block;\n background-color: ", ";\n position: relative;\n width: 100%;\n }\n"])), function (props) {
10213
+ return props.theme.rareStepColors.ntrlMin;
10214
+ });
10215
+ var PageContainer = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n {\n max-width: ", ";\n margin: 0 auto;\n width: 100%;\n padding: 0 5%;\n display: flex;\n justify-content: space-between;\n }\n"])), function (props) {
10216
+ return props.theme.rareStepPageSizes.container;
10217
+ });
10218
+ var HeaderContainer = styled__default.div(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n {\n display: flex;\n justify-content: space-between;\n padding: ", " 5%;\n max-width: ", ";\n margin: 0 auto;\n width: 100%;\n }\n"])), function (props) {
10219
+ return props.theme.marginPaddings[3];
10220
+ }, function (props) {
10221
+ return props.theme.rareStepPageSizes.container;
10222
+ });
10223
+ var LogoFigure = styled__default.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])));
10224
+ var LogoImage = styled__default.img(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n {\n width: 200px;\n height: 70px;\n }\n"])));
10225
+ var CurrencyFlagIcon = styled__default.img(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n {\n width: 25px;\n height: 15px;\n margin-top: 9px;\n margin-right: 10px;\n }\n"])));
10226
+ var SellToUsLink = styled__default.a(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n {\n color: ", ";\n font-weight: ", ";\n font-size: ", ";\n padding-top: 10px;\n text-transform: uppercase;\n letter-spacing: 1px;\n cursor: pointer;\n\n &:hover,\n &:active {\n color: ", ";\n text-decoration: none;\n }\n }\n"])), function (props) {
10227
+ return props.theme.rareStepColors.secondary;
10228
+ }, function (props) {
10229
+ return props.theme.rareStepFontWeights.bold;
10230
+ }, function (props) {
10231
+ return props.theme.rareStepFontSize.h5;
10232
+ }, function (props) {
10233
+ return props.theme.rareStepColors.secondary;
10234
+ });
10235
+ var HeaderIconsContainer = styled__default.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n {\n display: flex;\n align-items: center;\n }\n"])));
10236
+ var HeaderIcon = styled__default.img(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n {\n width: 30px;\n height: 30px;\n margin-left: ", ";\n cursor: pointer;\n }\n"])), function (props) {
10237
+ return props.theme.marginPaddings[3];
10238
+ });
10239
+ var NavigationContainer = styled__default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n {\n display: flex;\n justify-content: space-between;\n background-color: ", ";\n padding-top: ", ";\n }\n"])), function (props) {
10240
+ return props.theme.rareStepColors.primary;
10241
+ }, function (props) {
10242
+ return props.theme.marginPaddings[1];
10243
+ });
10244
+ var NavigationLink = styled__default.a(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n {\n display: flex;\n flex-wrap: no-wrap;\n align-items: center;\n color: ", ";\n font-size: ", ";\n margin-right: ", ";\n padding-top: 2px;\n padding-bottom: ", ";\n cursor: pointer;\n border-bottom: 2px solid ", ";\n\n &:last-child {\n margin-right: 0;\n }\n\n &:hover,\n &:active {\n color: ", ";\n text-decoration: none;\n border-bottom: 2px solid ", ";\n }\n }\n"])), function (props) {
10245
+ return props.theme.rareStepColors.ntrlMin;
10246
+ }, function (props) {
10247
+ return props.theme.rareStepFontSize.h5;
10248
+ }, function (props) {
10249
+ return props.theme.marginPaddings[5];
10250
+ }, function (props) {
10251
+ return props.theme.marginPaddings[1];
10252
+ }, function (props) {
10253
+ return props.theme.rareStepColors.primary;
10254
+ }, function (props) {
10255
+ return props.theme.rareStepColors.ntrlMin;
10256
+ }, function (props) {
10257
+ return props.theme.rareStepColors.secondary;
10258
+ });
10259
+ var NavigationLinks = styled__default.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n {\n display: flex;\n }\n"])));
10260
+ var Dropdown = styled__default.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n {\n display: flex;\n background-color: ", ";\n padding: ", " 0;\n border-top: 1px solid ", ";\n font-size: ", ";\n position: absolute;\n width: 100%;\n }\n"])), function (props) {
10261
+ return props.theme.rareStepColors.primary;
10262
+ }, function (props) {
10263
+ return props.theme.marginPaddings[4];
10264
+ }, function (props) {
10265
+ return props.theme.rareStepColors.ntrl40;
10266
+ }, function (props) {
10267
+ return props.theme.rareStepFontSize.h5;
10268
+ });
10269
+ var DropdownBrands = styled__default.div(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n {\n display: flex;\n flex-direction: column;\n width: 20%;\n }\n"])));
10270
+ var DropdownModels = styled__default.ul(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n {\n padding: 0 ", ";\n border-left: 1px solid ", ";\n border-right: 1px solid ", ";\n width: 50%;\n column-count: 3;\n }\n"])), function (props) {
10271
+ return props.theme.marginPaddings[3];
10272
+ }, function (props) {
10273
+ return props.theme.rareStepColors.ntrl40;
10274
+ }, function (props) {
10275
+ return props.theme.rareStepColors.ntrl40;
10276
+ });
10277
+ var DropdownModelsList = styled__default.li(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n {\n list-style: none;\n }\n"])));
10278
+ var DropdownFigure = styled__default.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n {\n display: flex;\n width: 30%;\n padding-left: ", ";\n }\n"])), function (props) {
10279
+ return props.theme.marginPaddings[5];
10280
+ });
10281
+ var DropdownImage = styled__default.img(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n {\n width: 90%;\n height: 100%;\n object-fit: cover;\n margin-left: auto;\n }\n"])));
10282
+ var DropdownLink = styled__default.a(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n {\n color: ", ";\n padding-bottom: ", ";\n cursor: pointer;\n\n &:hover,\n &:active {\n color: ", ";\n text-decoration: underline;\n }\n }\n"])), function (props) {
10283
+ return props.theme.rareStepColors.ntrlMin;
10284
+ }, function (props) {
10285
+ return props.theme.marginPaddings[0];
10286
+ }, function (props) {
10287
+ return props.theme.rareStepColors.ntrlMin;
10288
+ });
10289
+ var DropdownBrandLinkContainer = styled__default.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n {\n display: flex;\n\n &:hover {\n cursor: pointer;\n\n hr {\n display: block;\n }\n\n a {\n font-weight: ", ";\n }\n }\n }\n"])), function (props) {
10290
+ return props.theme.rareStepFontWeights.bold;
10291
+ });
10292
+ var DropdownBrandLinkHR = styled__default.hr(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n {\n display: none;\n width: 20px;\n margin: 10px 10px 0 0;\n color: ", ";\n height: 1px;\n border: 1px solid ", ";\n }\n"])), function (props) {
10293
+ return props.theme.rareStepColors.secondary;
10294
+ }, function (props) {
10295
+ return props.theme.rareStepColors.secondary;
10296
+ });
10297
+ var DropdownBrandLink = styled__default.a(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n {\n color: ", ";\n padding-bottom: 0.5rem;\n\n &:hover,\n &:active {\n color: ", ";\n text-decoration: none;\n font-weight: ", ";\n }\n }\n"])), function (props) {
10298
+ return props.theme.rareStepColors.ntrlMin;
10299
+ }, function (props) {
10300
+ return props.theme.rareStepColors.ntrlMin;
10301
+ }, function (props) {
10302
+ return props.theme.rareStepFontWeights.bold;
10303
+ });
10304
+ var DropdownNavigatorIcon = styled__default.img(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n {\n width: 15px;\n height: 12px;\n margin-left: ", ";\n }\n"])), function (props) {
10305
+ return props.theme.marginPaddings[0];
10306
+ });
10307
+ var SellToUsHR = styled__default.hr(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n {\n width: 80px;\n margin-top: 20px;\n color: ", ";\n border: 1px solid ", ";\n margin-right: 10px;\n }\n"])), function (props) {
10308
+ return props.theme.rareStepColors.secondary;
10309
+ }, function (props) {
10310
+ return props.theme.rareStepColors.secondary;
10311
+ });
10312
+ var SearchContainer = styled__default.div(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n {\n display: flex;\n padding: ", "\n ", ";\n background-color: ", ";\n align-items: center;\n border-top: 1px solid ", ";\n }\n"])), function (props) {
10313
+ return props.theme.marginPaddings[1];
10314
+ }, function (props) {
10315
+ return props.theme.marginPaddings[3];
10316
+ }, function (props) {
10317
+ return props.theme.rareStepColors.primary;
10318
+ }, function (props) {
10319
+ return props.theme.rareStepColors.ntrl40;
10320
+ });
10321
+ var SearchInput = styled__default.input(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["\n {\n width: 50%;\n font-size: ", ";\n padding-bottom: ", ";\n background-color: ", ";\n color: ", ";\n border: none;\n margin-left: ", ";\n\n &:active,\n &:focus,\n &:focus-visible {\n outline: none;\n border: none;\n }\n\n &::placeholder {\n color: ", ";\n }\n }\n"])), function (props) {
10322
+ return props.theme.rareStepFontSize.footerTitle;
10323
+ }, function (props) {
10324
+ return props.theme.marginPaddings[0];
10325
+ }, function (props) {
10326
+ return props.theme.rareStepColors.primary;
10327
+ }, function (props) {
10328
+ return props.theme.rareStepColors.ntrl40;
10329
+ }, function (props) {
10330
+ return props.theme.marginPaddings[3];
10331
+ }, function (props) {
10332
+ return props.theme.rareStepColors.ntrl40;
10333
+ });
10334
+ var SearchIcon = styled__default.img(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["\n {\n width: 20px;\n height: 20px;\n cursor: pointer;\n margin-bottom: 7px;\n }\n"])));
10335
+ var CloseIcon = styled__default.img(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["\n {\n width: 20px;\n height: 20px;\n margin-left: auto;\n cursor: pointer;\n }\n"])));
10336
+
10337
+ var _templateObject$I, _templateObject2$8, _templateObject3$5, _templateObject4$4, _templateObject5$2, _templateObject6$1, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1;
10338
+ var FooterWrapper = styled__default.div(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral(["\n {\n background-color: ", ";\n font-weight: ", ";\n padding-top: ", ";\n font-size: ", ";\n }\n"])), function (props) {
10339
+ return props.theme.rareStepColors.ntrlMax;
10340
+ }, function (props) {
10341
+ return props.theme.rareStepFontWeights.bold;
10342
+ }, function (props) {
10343
+ return props.theme.marginPaddings[4];
10344
+ }, function (props) {
10345
+ return props.theme.rareStepFontSize.h5;
10346
+ });
10347
+ var PageContainer$1 = styled__default.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n {\n max-width: ", ";\n margin: 0 auto;\n width: 100%;\n padding: 0 5%;\n display: flex;\n justify-content: space-between;\n }\n"])), function (props) {
10348
+ return props.theme.rareStepPageSizes.container;
10349
+ });
10350
+ var FooterLinksWrapper = styled__default.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n {\n display: flex;\n flex-basis: 70%;\n padding-bottom: ", ";\n }\n"])), function (props) {
10351
+ return props.theme.marginPaddings[4];
10352
+ });
10353
+ var FooterLinksContainer = styled__default.div(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n {\n display: flex;\n flex-direction: column;\n flex: 1;\n padding-right: ", ";\n }\n"])), function (props) {
10354
+ return props.theme.marginPaddings[4];
10355
+ });
10356
+ var FooterTitleLink = styled__default.a(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n {\n text-transform: uppercase;\n color: ", ";\n margin-bottom: ", ";\n cursor: pointer;\n font-weight: ", ";\n font-size: ", ";\n text-decoration: none;\n\n &:hover,\n &:active {\n color: ", ";\n text-decoration: underline;\n }\n }\n"])), function (props) {
10357
+ return props.theme.rareStepColors.ntrlMin;
10358
+ }, function (props) {
10359
+ return props.theme.marginPaddings[1];
10360
+ }, function (props) {
10361
+ return props.theme.rareStepFontWeights.bold;
10362
+ }, function (props) {
10363
+ return props.theme.rareStepFontSize.footerTitle;
10364
+ }, function (props) {
10365
+ return props.theme.rareStepColors.ntrlMin;
10366
+ });
10367
+ var FooterLink = styled__default.a(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n {\n color: ", ";\n cursor: pointer;\n margin-bottom: ", ";\n font-weight: ", ";\n text-decoration: none;\n\n &:hover,\n &:active {\n color: ", ";\n text-decoration: underline;\n }\n }\n"])), function (props) {
10368
+ return props.theme.rareStepColors.ntrlMin;
10369
+ }, function (props) {
10370
+ return props.theme.space[2];
10371
+ }, function (props) {
10372
+ return props.theme.rareStepFontWeights.normal;
10373
+ }, function (props) {
10374
+ return props.theme.rareStepColors.ntrlMin;
10375
+ });
10376
+ var FooterImage = styled__default.img(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n {\n width: 100%;\n height: 100%;\n max-height: 300px;\n object-fit: cover;\n }\n"])));
10377
+ var FooterImageWrapper = styled__default.div(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n {\n flex-basis: 30%;\n padding-bottom: ", ";\n }\n"])), function (props) {
10378
+ return props.theme.marginPaddings[4];
10379
+ });
10380
+ var FooterLogo = styled__default.img(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n {\n width: 120px;\n height: 50px;\n margin-top: ", ";\n }\n"])), function (props) {
10381
+ return props.theme.marginPaddings[5];
10382
+ });
10383
+ var SocialIconWrapper = styled__default.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n {\n display: flex;\n }\n"])));
10384
+ var SocialIcon = styled__default.img(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n {\n width: 30px;\n height: 30px;\n margin-right: ", ";\n }\n"])), function (props) {
10385
+ return props.theme.marginPaddings[0];
10386
+ });
10387
+ var FooterCopyrightContainer = styled__default.div(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n {\n display: flex;\n padding: ", " 0;\n border-top: 1px solid ", ";\n }\n"])), function (props) {
10388
+ return props.theme.marginPaddings[1];
10389
+ }, function (props) {
10390
+ return props.theme.rareStepColors.ntrlMin;
10391
+ });
10392
+ var FooterCopyrightText = styled__default.div(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n {\n color: ", ";\n font-weight: ", ";\n }\n"])), function (props) {
10393
+ return props.theme.rareStepColors.ntrlMin;
10394
+ }, function (props) {
10395
+ return props.theme.rareStepFontWeights.normal;
10396
+ });
10397
+ var FooterPayments = styled__default.div(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral(["\n {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n }\n"])));
10398
+ var FooterPaymentImage = styled__default.img(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteral(["\n {\n width: 100px;\n height: 30px;\n }\n"])));
10399
+
10400
+ var _templateObject$J;
10178
10401
  var ALL_ITEM = {
10179
10402
  label: 'ALL',
10180
10403
  value: 'ALL'
10181
10404
  };
10182
- var StyledMultiselector = styled__default.div(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n .multiselector__selected-items,\n .multiselector__selectable-items {\n display: flex;\n flex-flow: no-wrap;\n margin-bottom: 40px;\n .dropdown-select-container {\n width: 100%;\n .dropdown-select {\n &__control {\n border-color: ", ";\n border-radius: 0px;\n background-color: ", ";\n color: ", ";\n }\n &__multi-value {\n background-color: ", ";\n }\n &__multi-value__label {\n color: ", ";\n font-size: 100%;\n }\n &__multi-value__remove {\n svg {\n fill: ", ";\n }\n }\n }\n }\n }\n"])), function (props) {
10405
+ var StyledMultiselector = styled__default.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteral(["\n .multiselector__selected-items,\n .multiselector__selectable-items {\n display: flex;\n flex-flow: no-wrap;\n margin-bottom: 40px;\n .dropdown-select-container {\n width: 100%;\n .dropdown-select {\n &__control {\n border-color: ", ";\n border-radius: 0px;\n background-color: ", ";\n color: ", ";\n }\n &__multi-value {\n background-color: ", ";\n }\n &__multi-value__label {\n color: ", ";\n font-size: 100%;\n }\n &__multi-value__remove {\n svg {\n fill: ", ";\n }\n }\n }\n }\n }\n"])), function (props) {
10183
10406
  return props.theme.colors.primary;
10184
10407
  }, function (props) {
10185
10408
  return props.theme.colors.ntrlMin;
@@ -10457,15 +10680,15 @@
10457
10680
  }
10458
10681
  };
10459
10682
 
10460
- var _templateObject$I, _templateObject2$7;
10683
+ var _templateObject$K, _templateObject2$9;
10461
10684
  var ALL_ITEM$1 = {
10462
10685
  id: 'ALL',
10463
10686
  name: 'ALL'
10464
10687
  };
10465
10688
  var multiSelectorItemMaxHeight = '3rem';
10466
10689
  var multiSelectorItemAnimationDuration = '300ms';
10467
- var multiselectorItemFadeIn = styled.keyframes(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral(["\n from {\n margin: 0;\n max-height: 0px;\n opacity: 0;\n }\n to {\n max-height: ", ";\n opacity: 1;\n }\n"])), multiSelectorItemMaxHeight);
10468
- var StyledMultiselector$1 = styled__default.div(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n .multiselector__selected-items,\n .multiselector__selectable-items {\n display: flex;\n flex-flow: wrap;\n margin-left: calc(-1 * ", ");\n button {\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n border-color: ", ";\n background-color: ", ";\n color: ", ";\n padding: ", ";\n text-transform: none;\n box-sizing: border-box;\n animation: ", " ease-in-out\n ", " forwards;\n flex-basis: calc(25% - ", ");\n margin-bottom: ", ";\n margin-left: ", ";\n text-overflow: ellipsis;\n overflow-x: hidden;\n min-height: 40px;\n\n @media (max-width: ", ") {\n flex-basis: calc(50% - ", ");\n }\n }\n }\n\n .multiselector__footer {\n display: flex;\n justify-content: center;\n button {\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n background-color: ", ";\n color: ", ";\n }\n }\n"])), function (props) {
10690
+ var multiselectorItemFadeIn = styled.keyframes(_templateObject$K || (_templateObject$K = _taggedTemplateLiteral(["\n from {\n margin: 0;\n max-height: 0px;\n opacity: 0;\n }\n to {\n max-height: ", ";\n opacity: 1;\n }\n"])), multiSelectorItemMaxHeight);
10691
+ var StyledMultiselector$1 = styled__default.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n .multiselector__selected-items,\n .multiselector__selectable-items {\n display: flex;\n flex-flow: wrap;\n margin-left: calc(-1 * ", ");\n button {\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n border-color: ", ";\n background-color: ", ";\n color: ", ";\n padding: ", ";\n text-transform: none;\n box-sizing: border-box;\n animation: ", " ease-in-out\n ", " forwards;\n flex-basis: calc(25% - ", ");\n margin-bottom: ", ";\n margin-left: ", ";\n text-overflow: ellipsis;\n overflow-x: hidden;\n min-height: 40px;\n\n @media (max-width: ", ") {\n flex-basis: calc(50% - ", ");\n }\n }\n }\n\n .multiselector__footer {\n display: flex;\n justify-content: center;\n button {\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n background-color: ", ";\n color: ", ";\n }\n }\n"])), function (props) {
10469
10692
  return props.theme.marginPaddings[2];
10470
10693
  }, function (props) {
10471
10694
  return props.theme.colors.ntrlMin;
@@ -10702,7 +10925,7 @@
10702
10925
  }));
10703
10926
  });
10704
10927
 
10705
- var _templateObject$J;
10928
+ var _templateObject$L;
10706
10929
 
10707
10930
  var Title$3 = function Title(_ref) {
10708
10931
  var baseClass = _ref.baseClass,
@@ -10723,7 +10946,7 @@
10723
10946
  })));
10724
10947
  };
10725
10948
 
10726
- var StyledTitle = styled__default(Title$3)(_templateObject$J || (_templateObject$J = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n font-weight: bold;\n display: flex;\n align-items: center;\n font-size: ", ";\n\n .title__search,\n .title__search {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 30px;\n margin-bottom: ", ";\n\n svg {\n margin-left: ", ";\n fill: ", ";\n stroke: ", ";\n }\n\n input {\n width: 140px;\n border: none;\n font-size: ", ";\n transition: 0.2s border-color ease-in-out;\n margin-left: ", ";\n padding: 0;\n\n :focus {\n border-color: ", ";\n border-bottom: none;\n }\n }\n }\n"])), function (props) {
10949
+ var StyledTitle = styled__default(Title$3)(_templateObject$L || (_templateObject$L = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n font-weight: bold;\n display: flex;\n align-items: center;\n font-size: ", ";\n\n .title__search,\n .title__search {\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 30px;\n margin-bottom: ", ";\n\n svg {\n margin-left: ", ";\n fill: ", ";\n stroke: ", ";\n }\n\n input {\n width: 140px;\n border: none;\n font-size: ", ";\n transition: 0.2s border-color ease-in-out;\n margin-left: ", ";\n padding: 0;\n\n :focus {\n border-color: ", ";\n border-bottom: none;\n }\n }\n }\n"])), function (props) {
10727
10950
  return props.theme.marginPaddings[2];
10728
10951
  }, function (props) {
10729
10952
  return props.theme.fontSizes[2];
@@ -10863,8 +11086,8 @@
10863
11086
  baseQueryLimit: 12
10864
11087
  };
10865
11088
 
10866
- var _templateObject$K;
10867
- var BaseButton = styled__default.button(_templateObject$K || (_templateObject$K = _taggedTemplateLiteral(["\n color: ", ";\n border: 1px solid ", ";\n background-color: ", ";\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n"])), function (props) {
11089
+ var _templateObject$M;
11090
+ var BaseButton = styled__default.button(_templateObject$M || (_templateObject$M = _taggedTemplateLiteral(["\n color: ", ";\n border: 1px solid ", ";\n background-color: ", ";\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n"])), function (props) {
10868
11091
  return props.theme.colors.base;
10869
11092
  }, function (props) {
10870
11093
  return props.theme.colors.borderColor;
@@ -10922,12 +11145,12 @@
10922
11145
  }
10923
11146
  };
10924
11147
 
10925
- var _templateObject$L, _templateObject2$8;
10926
- var TitleWrapper = styled__default.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteral(["\n display: flex;\n flex-flow: nowrap row;\n justify-content: space-between;\n margin-bottom: ", ";\n label {\n margin-bottom: 0;\n }\n"])), function (props) {
11148
+ var _templateObject$N, _templateObject2$a;
11149
+ var TitleWrapper = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n display: flex;\n flex-flow: nowrap row;\n justify-content: space-between;\n margin-bottom: ", ";\n label {\n margin-bottom: 0;\n }\n"])), function (props) {
10927
11150
  return props.theme.marginPaddings[4];
10928
11151
  });
10929
11152
  var onShoeSizeTypeChangeTimeout = 300;
10930
- var ShoeSizeFadeContainer = styled__default.div(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n transition: opacity ease-in-out ", "ms;\n opacity: ", ";\n .rc-slider-handle,\n .rc-slider-handle-2,\n .shoe-size-tooltip {\n transition: opacity ease-in-out ", "ms;\n opacity: ", ";\n }\n"])), onShoeSizeTypeChangeTimeout, function (props) {
11153
+ var ShoeSizeFadeContainer = styled__default.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n transition: opacity ease-in-out ", "ms;\n opacity: ", ";\n .rc-slider-handle,\n .rc-slider-handle-2,\n .shoe-size-tooltip {\n transition: opacity ease-in-out ", "ms;\n opacity: ", ";\n }\n"])), onShoeSizeTypeChangeTimeout, function (props) {
10931
11154
  return props.childVisible ? 1 : 0;
10932
11155
  }, onShoeSizeTypeChangeTimeout, function (props) {
10933
11156
  return props.childVisible ? 1 : 0;
@@ -11061,8 +11284,8 @@
11061
11284
  }
11062
11285
  };
11063
11286
 
11064
- var _templateObject$M;
11065
- var SelectionWrapper = styled__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteral(["\n display: flex;\n margin-left: calc(-1 * ", ");\n label {\n margin-bottom: ", ";\n flex-basis: calc(33.33% - ", ");\n margin-bottom: ", ";\n margin-left: ", ";\n }\n @media (max-width: ", ") {\n label {\n flex-basis: calc(50% - ", ");\n }\n }\n"])), function (props) {
11287
+ var _templateObject$O;
11288
+ var SelectionWrapper = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n display: flex;\n margin-left: calc(-1 * ", ");\n label {\n margin-bottom: ", ";\n flex-basis: calc(33.33% - ", ");\n margin-bottom: ", ";\n margin-left: ", ";\n }\n @media (max-width: ", ") {\n label {\n flex-basis: calc(50% - ", ");\n }\n }\n"])), function (props) {
11066
11289
  return props.theme.marginPaddings[2];
11067
11290
  }, function (props) {
11068
11291
  return props.theme.marginPaddings[2];
@@ -11078,14 +11301,14 @@
11078
11301
 
11079
11302
  var _excluded$7 = ["title", "checked", "renderIcon", "onChange", "checkedValue", "unCheckedValue"];
11080
11303
 
11081
- var _templateObject$N, _templateObject2$9, _templateObject3$4;
11082
- var Content = styled__default.div(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n background-color: transparent;\n border: 1px solid ", ";\n transition: 200ms ease-in-out;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n cursor: pointer;\n"])), function (props) {
11304
+ var _templateObject$P, _templateObject2$b, _templateObject3$6;
11305
+ var Content = styled__default.div(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n background-color: transparent;\n border: 1px solid ", ";\n transition: 200ms ease-in-out;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ", ";\n cursor: pointer;\n"])), function (props) {
11083
11306
  return props.theme.colors.primary;
11084
11307
  }, function (props) {
11085
11308
  return props.theme.marginPaddings[0];
11086
11309
  });
11087
- var InputText = styled__default.div(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n transition: 200ms ease-in;\n margin-left: auto;\n margin-right: auto;\n"])));
11088
- var StyledLabel = styled__default.label(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n line-height: initial;\n display: block;\n box-sizing: border-box;\n transition: 200ms ease-in-out;\n text-align: center;\n\n &:hover ", " {\n color: ", ";\n }\n\n input {\n display: none;\n &:checked ~ ", " {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n\n &:checked ~ ", " ", " {\n color: ", ";\n }\n\n &:disabled ~ ", " {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n"])), InputText, function (props) {
11310
+ var InputText = styled__default.div(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n transition: 200ms ease-in;\n margin-left: auto;\n margin-right: auto;\n"])));
11311
+ var StyledLabel = styled__default.label(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n line-height: initial;\n display: block;\n box-sizing: border-box;\n transition: 200ms ease-in-out;\n text-align: center;\n\n &:hover ", " {\n color: ", ";\n }\n\n input {\n display: none;\n &:checked ~ ", " {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n\n &:checked ~ ", " ", " {\n color: ", ";\n }\n\n &:disabled ~ ", " {\n opacity: 0.5;\n cursor: not-allowed;\n }\n }\n"])), InputText, function (props) {
11089
11312
  return props.theme.colors.primary;
11090
11313
  }, Content, function (props) {
11091
11314
  return props.theme.colors.primary;
@@ -11314,28 +11537,28 @@
11314
11537
  }
11315
11538
  };
11316
11539
 
11317
- var _templateObject$O, _templateObject2$a, _templateObject3$5, _templateObject4$3, _templateObject5$1;
11540
+ var _templateObject$Q, _templateObject2$c, _templateObject3$7, _templateObject4$5, _templateObject5$3;
11318
11541
  var UNISEX$1 = genders.UNISEX;
11319
- var AddInterestContainer = styled__default.div(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n border: 1px solid ", ";\n padding: ", ";\n"])), function (props) {
11542
+ var AddInterestContainer = styled__default.div(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteral(["\n margin-bottom: ", ";\n border: 1px solid ", ";\n padding: ", ";\n"])), function (props) {
11320
11543
  return props.theme.marginPaddings[6];
11321
11544
  }, function (props) {
11322
11545
  return props.theme.colors.borderColor;
11323
11546
  }, function (props) {
11324
11547
  return props.theme.marginPaddings[6];
11325
11548
  });
11326
- var SaveAndCancelButtonContainer = styled__default.div(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n margin-top: ", ";\n\n @media (max-width: ", ") {\n .fl-right__item {\n flex-direction: column;\n margin-right: 0;\n margin-left: ", ";\n }\n\n button {\n margin-bottom: ", ";\n }\n }\n"])), function (props) {
11549
+ var SaveAndCancelButtonContainer = styled__default.div(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral(["\n margin-top: ", ";\n\n @media (max-width: ", ") {\n .fl-right__item {\n flex-direction: column;\n margin-right: 0;\n margin-left: ", ";\n }\n\n button {\n margin-bottom: ", ";\n }\n }\n"])), function (props) {
11327
11550
  return props.theme.marginPaddings[6];
11328
11551
  }, media.xs, function (props) {
11329
11552
  return props.theme.marginPaddings[0];
11330
11553
  }, function (props) {
11331
11554
  return props.theme.marginPaddings[1];
11332
11555
  });
11333
- var CatSelectorParagraph = styled__default.div(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n font-weight: bold;\n color: ", ";\n margin-bottom: ", ";\n"])), function (props) {
11556
+ var CatSelectorParagraph = styled__default.div(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n font-weight: bold;\n color: ", ";\n margin-bottom: ", ";\n"])), function (props) {
11334
11557
  return props.theme.colors.darkerGray;
11335
11558
  }, function (props) {
11336
11559
  return props.theme.marginPaddings[2];
11337
11560
  });
11338
- var AddInterestButton = styled__default.div(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n font-weight: bold;\n color: ", ";\n border: 1px solid ", ";\n padding-top: ", ";\n margin-bottom: ", ";\n padding-left: 1.5rem;\n width: 95%;\n font-size: 17px;\n"])), function (props) {
11561
+ var AddInterestButton = styled__default.div(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n font-weight: bold;\n color: ", ";\n border: 1px solid ", ";\n padding-top: ", ";\n margin-bottom: ", ";\n padding-left: 1.5rem;\n width: 95%;\n font-size: 17px;\n"])), function (props) {
11339
11562
  return props.theme.colors.darkerGray;
11340
11563
  }, function (props) {
11341
11564
  return props.theme.colors.borderColor;
@@ -11344,7 +11567,7 @@
11344
11567
  }, function (props) {
11345
11568
  return props.theme.marginPaddings[2];
11346
11569
  });
11347
- var AddInterestButtonContainer = styled__default.div(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n display: flex;\n\n #add-icon {\n margin-bottom: 1.5rem;\n\n svg {\n width: 15px;\n }\n }\n"])));
11570
+ var AddInterestButtonContainer = styled__default.div(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n display: flex;\n\n #add-icon {\n margin-bottom: 1.5rem;\n\n svg {\n width: 15px;\n }\n }\n"])));
11348
11571
 
11349
11572
  var AddIcon = function AddIcon(_ref) {
11350
11573
  var onClick = _ref.onClick,