willba-component-library 0.2.1 → 0.2.3

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.
package/README.md CHANGED
@@ -1,6 +1,15 @@
1
- ## Installation
1
+ ## Description
2
2
 
3
- Willba-component-library is available as an [npm package](https://www.npmjs.com/package/willba-component-library).
3
+ Willba Component Library is a custom UI component collection that can be utilized across multiple platforms. It is available as an <a href="https://www.npmjs.com/package/willba-component-library">npm package</a>, or can be used directly through scripts.
4
+
5
+ <div style="display: flex; gap: 20px;">
6
+ <img src="./public/images/filter-bar-calendar.jpg" alt="Filter Bar Calendar" style="width: auto; max-width: 50%;">
7
+ <img src="./public/images/filter-bar-guests.jpg" alt="Filter Bar Guests" style="width: auto; max-width: 50%;">
8
+ </div>
9
+
10
+ ## React usage
11
+
12
+ Install the package:
4
13
 
5
14
  ```sh
6
15
  // with npm
@@ -10,7 +19,7 @@ npm install willba-component-library
10
19
  yarn add willba-component-library
11
20
  ```
12
21
 
13
- ## Usage
22
+ ### Import and use the package:
14
23
 
15
24
  ```jsx
16
25
  import React from 'react'
@@ -18,23 +27,65 @@ import ReactDOM from 'react-dom'
18
27
  import { FilterBar } from 'willba-component-library'
19
28
 
20
29
  function App() {
21
- return <FilterBar redirectUrl={'http://localhost:3000/'} />
30
+ return (
31
+ <FilterBar
32
+ redirectUrl={'https://store.vendor.willba.app/'}
33
+ language={'en'}
34
+ calendarOffset={{
35
+ rooms: 7,
36
+ events: -1,
37
+ }}
38
+ mode={'dark'}
39
+ ageCategories={[
40
+ {
41
+ id: '2',
42
+ name: 'Alle 6 vuotiaat',
43
+ minVal: 0,
44
+ sortOrder: 3,
45
+ },
46
+ {
47
+ id: '3',
48
+ name: '6-16 vuotiaat',
49
+ minVal: 0,
50
+ sortOrder: 2,
51
+ },
52
+ {
53
+ id: '1',
54
+ name: 'Aikuiset',
55
+ minVal: 1,
56
+ sortOrder: 1,
57
+ },
58
+ ]}
59
+ tabs={[
60
+ {
61
+ path: '/rooms',
62
+ default: true,
63
+ order: 2,
64
+ },
65
+ {
66
+ path: '/events',
67
+ default: false,
68
+ order: 1,
69
+ },
70
+ ]}
71
+ />
72
+ )
22
73
  }
23
74
 
24
75
  ReactDOM.render(<App />, document.querySelector('#app'))
25
76
  ```
26
77
 
27
- or you can add the willba-component-library using scripts:
78
+ ## Script usage
28
79
 
29
80
  ```html
30
81
  <div
31
82
  id="will-filter-bar"
32
- style="max-width: 1200px; display: flex; justify-content: center;"
83
+ style="display: flex; justify-content: center; margin-bottom: 50px"
33
84
  ></div>
34
85
 
35
86
  <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
36
87
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
37
- <script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.1.83/lib/index.umd.js"></script>
88
+ <script src="https://cdn.jsdelivr.net/npm/willba-component-library@0.2.2/lib/index.umd.js"></script>
38
89
 
39
90
  <script>
40
91
  const filterBarElement = React.createElement
@@ -44,8 +95,12 @@ or you can add the willba-component-library using scripts:
44
95
 
45
96
  root.render(
46
97
  filterBarElement(WillFilterBar, {
47
- redirectUrl: 'https://www.google.com',
98
+ redirectUrl: 'https://store.vendor.willba.app/',
48
99
  language: 'en',
100
+ palette: {
101
+ primary: '#2a5a44',
102
+ secondary: '#2a5a44',
103
+ },
49
104
  calendarOffset: {
50
105
  rooms: 7,
51
106
  events: -1,
package/lib/index.esm.js CHANGED
@@ -448,7 +448,7 @@ function useTheme(_a) {
448
448
  return themePalette;
449
449
  }
450
450
 
451
- var css_248z$b = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n \n box-sizing: border-box;\n font-size: 14px;\n \n color: #1E1E1E;\n\n /* Palette */\n --will-primary: #374269;\n --will-secondary: #374269;\n --will-grey: #ABA7AF;\n --will-white: #fff;\n --will-black: #000;\n --will-onahau: #CDEEFF;\n --will-text: #5A5959;\n --will-transparent-white: rgba(255, 255, 255, 0.30);\n --will-transparent-black: rgba(171, 167, 175, 0.30);\n\n /* Confines */\n --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n /* Breakpoints */\n\n --will-lg: 1140px;\n --will-md: 960px;\n --will-sm: 600px;\n --will-xl: 1280px;\n --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n margin: 0;\n padding: 0;\n}";
451
+ var css_248z$b = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n \n box-sizing: border-box;\n font-size: 14px;\n \n color: #1E1E1E;\n\n /* Palette */\n --will-primary: #374269;\n --will-secondary: #374269;\n --will-grey: #ABA7AF;\n --will-white: #fff;\n --will-black: #000;\n --will-onahau: #CDEEFF;\n --will-text: #5A5959;\n --will-transparent-white: rgba(255, 255, 255, 0.30);\n --will-transparent-black: rgba(171, 167, 175, 0.30);\n\n /* Confines */\n --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n /* Breakpoints */\n\n --will-lg: 1140px;\n --will-md: 960px;\n --will-sm: 600px;\n --will-xl: 1280px;\n --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n margin: 0;\n padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n margin: 0 !important;\n}\n\n.will-root button {\n line-height: normal !important;\n}\n";
452
452
  styleInject(css_248z$b);
453
453
 
454
454
  function _typeof(o) {
@@ -6568,7 +6568,7 @@ var CloseButton = function (_a) {
6568
6568
  React__default__default.createElement(IoIosCloseCircleOutline, null)));
6569
6569
  };
6570
6570
 
6571
- var css_248z$9 = ".will-filter-bar-select-button {\n width: 100%;\n height: auto;\n background-color: transparent;\n border: none;\n padding: 0 20px;\n border-radius: 20px;\n cursor: pointer;\n font-size: 14px;\n text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n \n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n display: grid\n}\n\n.will-filter-bar-select-button .select-button-label {\n font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n font-weight: 400;\n opacity: 0.5;\n \n white-space: nowrap;\n \n }\n\n .will-root.is-full-width .will-filter-bar-select-button .select-button-description {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .will-filter-bar-select-button .select-button-label.active,\n .will-filter-bar-select-button .select-button-description.active {\n font-weight: 700;\n font-size: 15px;\n opacity: 1;\n\n }\n\n@media (max-width: 960px) {\n .will-filter-bar-select-button {\n padding: 15px 0;\n }\n\n .will-filter-bar-select-button:first-child {\n padding: 0 0 15px 0;\n }\n\n .will-filter-bar-select-button .select-button-wrapper {\n justify-content: center;\n text-align: center;\n }\n\n .will-filter-bar-select-button .select-button-description {\n white-space: wrap;\n }\n\n .will-filter-bar-select-button .select-button-divider {\n display: none\n }\n}\n\n\n";
6571
+ var css_248z$9 = ".will-filter-bar-select-button {\n width: 100%;\n height: auto;\n background-color: transparent;\n border: none;\n padding: 0 20px;\n border-radius: 20px;\n cursor: pointer;\n font-size: 14px;\n text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n \n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n display: grid\n}\n\n.will-filter-bar-select-button .select-button-label {\n font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n font-weight: 400;\n opacity: 0.5;\n white-space: nowrap;\n }\n\n .will-filter-bar-select-button .select-button-description span {\n font: inherit\n }\n\n .will-root.is-full-width .will-filter-bar-select-button .select-button-description {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .will-filter-bar-select-button .select-button-label.active,\n .will-filter-bar-select-button .select-button-description.active {\n font-weight: 700;\n font-size: 15px;\n opacity: 1;\n\n }\n\n@media (max-width: 960px) {\n .will-filter-bar-select-button {\n padding: 15px 0;\n }\n\n .will-filter-bar-select-button:first-child {\n padding: 0 0 15px 0;\n }\n\n .will-filter-bar-select-button .select-button-wrapper {\n justify-content: center;\n text-align: center;\n }\n\n .will-filter-bar-select-button .select-button-description {\n white-space: wrap;\n }\n\n .will-filter-bar-select-button .select-button-divider {\n display: none\n }\n}\n\n\n";
6572
6572
  styleInject(css_248z$9);
6573
6573
 
6574
6574
  var SelectButton = function (_a) {
package/lib/index.js CHANGED
@@ -468,7 +468,7 @@ function useTheme(_a) {
468
468
  return themePalette;
469
469
  }
470
470
 
471
- var css_248z$b = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n \n box-sizing: border-box;\n font-size: 14px;\n \n color: #1E1E1E;\n\n /* Palette */\n --will-primary: #374269;\n --will-secondary: #374269;\n --will-grey: #ABA7AF;\n --will-white: #fff;\n --will-black: #000;\n --will-onahau: #CDEEFF;\n --will-text: #5A5959;\n --will-transparent-white: rgba(255, 255, 255, 0.30);\n --will-transparent-black: rgba(171, 167, 175, 0.30);\n\n /* Confines */\n --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n /* Breakpoints */\n\n --will-lg: 1140px;\n --will-md: 960px;\n --will-sm: 600px;\n --will-xl: 1280px;\n --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n margin: 0;\n padding: 0;\n}";
471
+ var css_248z$b = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n \n box-sizing: border-box;\n font-size: 14px;\n \n color: #1E1E1E;\n\n /* Palette */\n --will-primary: #374269;\n --will-secondary: #374269;\n --will-grey: #ABA7AF;\n --will-white: #fff;\n --will-black: #000;\n --will-onahau: #CDEEFF;\n --will-text: #5A5959;\n --will-transparent-white: rgba(255, 255, 255, 0.30);\n --will-transparent-black: rgba(171, 167, 175, 0.30);\n\n /* Confines */\n --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n /* Breakpoints */\n\n --will-lg: 1140px;\n --will-md: 960px;\n --will-sm: 600px;\n --will-xl: 1280px;\n --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n margin: 0;\n padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n margin: 0 !important;\n}\n\n.will-root button {\n line-height: normal !important;\n}\n";
472
472
  styleInject(css_248z$b);
473
473
 
474
474
  function _typeof(o) {
@@ -6588,7 +6588,7 @@ var CloseButton = function (_a) {
6588
6588
  React__default.createElement(IoIosCloseCircleOutline, null)));
6589
6589
  };
6590
6590
 
6591
- var css_248z$9 = ".will-filter-bar-select-button {\n width: 100%;\n height: auto;\n background-color: transparent;\n border: none;\n padding: 0 20px;\n border-radius: 20px;\n cursor: pointer;\n font-size: 14px;\n text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n \n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n display: grid\n}\n\n.will-filter-bar-select-button .select-button-label {\n font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n font-weight: 400;\n opacity: 0.5;\n \n white-space: nowrap;\n \n }\n\n .will-root.is-full-width .will-filter-bar-select-button .select-button-description {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .will-filter-bar-select-button .select-button-label.active,\n .will-filter-bar-select-button .select-button-description.active {\n font-weight: 700;\n font-size: 15px;\n opacity: 1;\n\n }\n\n@media (max-width: 960px) {\n .will-filter-bar-select-button {\n padding: 15px 0;\n }\n\n .will-filter-bar-select-button:first-child {\n padding: 0 0 15px 0;\n }\n\n .will-filter-bar-select-button .select-button-wrapper {\n justify-content: center;\n text-align: center;\n }\n\n .will-filter-bar-select-button .select-button-description {\n white-space: wrap;\n }\n\n .will-filter-bar-select-button .select-button-divider {\n display: none\n }\n}\n\n\n";
6591
+ var css_248z$9 = ".will-filter-bar-select-button {\n width: 100%;\n height: auto;\n background-color: transparent;\n border: none;\n padding: 0 20px;\n border-radius: 20px;\n cursor: pointer;\n font-size: 14px;\n text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n \n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n display: grid\n}\n\n.will-filter-bar-select-button .select-button-label {\n font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n font-weight: 400;\n opacity: 0.5;\n white-space: nowrap;\n }\n\n .will-filter-bar-select-button .select-button-description span {\n font: inherit\n }\n\n .will-root.is-full-width .will-filter-bar-select-button .select-button-description {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .will-filter-bar-select-button .select-button-label.active,\n .will-filter-bar-select-button .select-button-description.active {\n font-weight: 700;\n font-size: 15px;\n opacity: 1;\n\n }\n\n@media (max-width: 960px) {\n .will-filter-bar-select-button {\n padding: 15px 0;\n }\n\n .will-filter-bar-select-button:first-child {\n padding: 0 0 15px 0;\n }\n\n .will-filter-bar-select-button .select-button-wrapper {\n justify-content: center;\n text-align: center;\n }\n\n .will-filter-bar-select-button .select-button-description {\n white-space: wrap;\n }\n\n .will-filter-bar-select-button .select-button-divider {\n display: none\n }\n}\n\n\n";
6592
6592
  styleInject(css_248z$9);
6593
6593
 
6594
6594
  var SelectButton = function (_a) {
package/lib/index.umd.js CHANGED
@@ -470,7 +470,7 @@
470
470
  return themePalette;
471
471
  }
472
472
 
473
- var css_248z$b = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n \n box-sizing: border-box;\n font-size: 14px;\n \n color: #1E1E1E;\n\n /* Palette */\n --will-primary: #374269;\n --will-secondary: #374269;\n --will-grey: #ABA7AF;\n --will-white: #fff;\n --will-black: #000;\n --will-onahau: #CDEEFF;\n --will-text: #5A5959;\n --will-transparent-white: rgba(255, 255, 255, 0.30);\n --will-transparent-black: rgba(171, 167, 175, 0.30);\n\n /* Confines */\n --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n /* Breakpoints */\n\n --will-lg: 1140px;\n --will-md: 960px;\n --will-sm: 600px;\n --will-xl: 1280px;\n --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n margin: 0;\n padding: 0;\n}";
473
+ var css_248z$b = "@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');\n\n.will-root * {\n font-family: 'Montserrat', sans-serif;\n}\n\n.will-root {\n \n box-sizing: border-box;\n font-size: 14px;\n \n color: #1E1E1E;\n\n /* Palette */\n --will-primary: #374269;\n --will-secondary: #374269;\n --will-grey: #ABA7AF;\n --will-white: #fff;\n --will-black: #000;\n --will-onahau: #CDEEFF;\n --will-text: #5A5959;\n --will-transparent-white: rgba(255, 255, 255, 0.30);\n --will-transparent-black: rgba(171, 167, 175, 0.30);\n\n /* Confines */\n --will-box-shadow-dark: 0px 2px 12px 2px #a1a1a180;\n --will-box-shadow-light: 0px 2px 12px 2px #bcb9b980;\n\n /* Breakpoints */\n\n --will-lg: 1140px;\n --will-md: 960px;\n --will-sm: 600px;\n --will-xl: 1280px;\n --will-xs: 0px;\n}\n\n/* Typography */\n\n.will-root h1, h2, h3, h4, h5, h6 {\n font-weight: 700;\n} \n\n.will-root p, h1, h2, h3, h4, h5, h6, span {\n margin: 0;\n padding: 0;\n}\n\n\n/* Integration fixes */\n\n.will-root p {\n margin: 0 !important;\n}\n\n.will-root button {\n line-height: normal !important;\n}\n";
474
474
  styleInject(css_248z$b);
475
475
 
476
476
  function _typeof(o) {
@@ -6590,7 +6590,7 @@
6590
6590
  React__default.createElement(IoIosCloseCircleOutline, null)));
6591
6591
  };
6592
6592
 
6593
- var css_248z$9 = ".will-filter-bar-select-button {\n width: 100%;\n height: auto;\n background-color: transparent;\n border: none;\n padding: 0 20px;\n border-radius: 20px;\n cursor: pointer;\n font-size: 14px;\n text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n \n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n display: grid\n}\n\n.will-filter-bar-select-button .select-button-label {\n font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n font-weight: 400;\n opacity: 0.5;\n \n white-space: nowrap;\n \n }\n\n .will-root.is-full-width .will-filter-bar-select-button .select-button-description {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .will-filter-bar-select-button .select-button-label.active,\n .will-filter-bar-select-button .select-button-description.active {\n font-weight: 700;\n font-size: 15px;\n opacity: 1;\n\n }\n\n@media (max-width: 960px) {\n .will-filter-bar-select-button {\n padding: 15px 0;\n }\n\n .will-filter-bar-select-button:first-child {\n padding: 0 0 15px 0;\n }\n\n .will-filter-bar-select-button .select-button-wrapper {\n justify-content: center;\n text-align: center;\n }\n\n .will-filter-bar-select-button .select-button-description {\n white-space: wrap;\n }\n\n .will-filter-bar-select-button .select-button-divider {\n display: none\n }\n}\n\n\n";
6593
+ var css_248z$9 = ".will-filter-bar-select-button {\n width: 100%;\n height: auto;\n background-color: transparent;\n border: none;\n padding: 0 20px;\n border-radius: 20px;\n cursor: pointer;\n font-size: 14px;\n text-align: initial;\n}\n\n.will-filter-bar-select-button .select-button-wrapper {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: 10px;\n \n}\n\n.will-filter-bar-select-button .select-button-wrapper > div {\n display: grid\n}\n\n.will-filter-bar-select-button .select-button-label {\n font-weight: 600;\n}\n\n.will-filter-bar-select-button .select-button-description {\n font-weight: 400;\n opacity: 0.5;\n white-space: nowrap;\n }\n\n .will-filter-bar-select-button .select-button-description span {\n font: inherit\n }\n\n .will-root.is-full-width .will-filter-bar-select-button .select-button-description {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .will-filter-bar-select-button .select-button-label.active,\n .will-filter-bar-select-button .select-button-description.active {\n font-weight: 700;\n font-size: 15px;\n opacity: 1;\n\n }\n\n@media (max-width: 960px) {\n .will-filter-bar-select-button {\n padding: 15px 0;\n }\n\n .will-filter-bar-select-button:first-child {\n padding: 0 0 15px 0;\n }\n\n .will-filter-bar-select-button .select-button-wrapper {\n justify-content: center;\n text-align: center;\n }\n\n .will-filter-bar-select-button .select-button-description {\n white-space: wrap;\n }\n\n .will-filter-bar-select-button .select-button-divider {\n display: none\n }\n}\n\n\n";
6594
6594
  styleInject(css_248z$9);
6595
6595
 
6596
6596
  var SelectButton = function (_a) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "willba-component-library",
3
- "version": "0.2.1",
4
- "description": "A stroybook 6 with TypeScript demo",
3
+ "version": "0.2.3",
4
+ "description": "A custom UI component library",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib/index.esm.js",
7
7
  "types": "lib/index.d.ts",
@@ -29,9 +29,11 @@
29
29
  .will-filter-bar-select-button .select-button-description {
30
30
  font-weight: 400;
31
31
  opacity: 0.5;
32
-
33
32
  white-space: nowrap;
34
-
33
+ }
34
+
35
+ .will-filter-bar-select-button .select-button-description span {
36
+ font: inherit
35
37
  }
36
38
 
37
39
  .will-root.is-full-width .will-filter-bar-select-button .select-button-description {
@@ -44,4 +44,15 @@
44
44
  .will-root p, h1, h2, h3, h4, h5, h6, span {
45
45
  margin: 0;
46
46
  padding: 0;
47
- }
47
+ }
48
+
49
+
50
+ /* Integration fixes */
51
+
52
+ .will-root p {
53
+ margin: 0 !important;
54
+ }
55
+
56
+ .will-root button {
57
+ line-height: normal !important;
58
+ }