@laerdal/life-react-components 6.0.0-dev.22.full.full → 6.0.0-dev.24

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 (9) hide show
  1. package/dist/HyperLink/styling.cjs +4 -0
  2. package/dist/HyperLink/styling.cjs.map +1 -1
  3. package/dist/HyperLink/styling.js +4 -0
  4. package/dist/HyperLink/styling.js.map +1 -1
  5. package/dist/Toggles/TogglerStyles.cjs +171 -15
  6. package/dist/Toggles/TogglerStyles.cjs.map +1 -1
  7. package/dist/Toggles/TogglerStyles.js +171 -15
  8. package/dist/Toggles/TogglerStyles.js.map +1 -1
  9. package/package.json +145 -148
package/dist/HyperLink/styling.cjs CHANGED
@@ -13,6 +13,10 @@ const defaultStyle = exports.defaultStyle = (0, _styledComponents.css)`
13
13
  text-decoration-style: solid;
14
14
  text-underline-offset: 2px;
15
15
  text-decoration-line: none;
16
+ color: ${props => _.COLORS.generateToken({
17
+ componentType: 'text-link',
18
+ defaultVariant: 'primary'
19
+ }, props.theme)};
16
20
 
17
21
  &:link {
18
22
  font-weight: 700;
package/dist/HyperLink/styling.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styling.cjs","names":["_styledComponents","require","_","defaultStyle","exports","css","props","COLORS","generateToken","componentType","defaultVariant","theme","state","isOnFill","invertedStyle","getColor"],"sources":["../../src/HyperLink/styling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { COLORS } from '..';\r\n\r\nexport const defaultStyle = css`\r\n outline: none;\r\n padding: 2px 0;\r\n text-decoration-thickness: 2px;\r\n text-decoration-style: solid;\r\n text-underline-offset: 2px;\r\n text-decoration-line: none;\r\n\r\n &:link {\r\n font-weight: 700;\r\n color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme)};\r\n }\r\n\r\n &:visited {\r\n color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary', state: 'active' }, props.theme)};\r\n }\r\n\r\n &:hover,\r\n &.hover-state {\r\n color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme)};\r\n text-decoration-line: underline;\r\n }\r\n\r\n &:focus,\r\n &.focus-state {\r\n border-radius: 2px;\r\n background: ${props => COLORS.generateToken({componentType:'bg-fill', defaultVariant: 'primary', state: 'active'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n }\r\n\r\n &:active,\r\n &.active-state {\r\n border-radius: 2px;\r\n background: ${props => COLORS.generateToken({componentType:'bg-fill', defaultVariant: 'primary', state: 'active'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n }\r\n\r\n\r\n &:focus:hover,\r\n &:active:hover,\r\n &.active-state:hover,\r\n &.focus-state:hover{\r\n text-decoration-line: none;\r\n color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n opacity: 0.9;\r\n }\r\n`;\r\n\r\nexport const invertedStyle = css`\r\n outline: none;\r\n padding: 2px 0;\r\n\r\n text-decoration-thickness: 2px;\r\n text-decoration-style: solid;\r\n text-underline-offset: 2px;\r\n text-decoration-line: underline;\r\n\r\n &:link {\r\n font-weight: 700;\r\n color: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n\r\n &:visited {\r\n color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n }\r\n\r\n &:focus,\r\n &.focus-state {\r\n border-radius: 2px;\r\n text-decoration-line: none;\r\n background: ${props => COLORS.getColor('white', props.theme)};\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n }\r\n\r\n &:hover,\r\n &.hover-state {\r\n text-decoration-line: none;\r\n }\r\n\r\n &:active,\r\n &.active-state {\r\n border-radius: 2px;\r\n text-decoration-line: none;\r\n background: ${props => COLORS.getColor('white', props.theme)};\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n }\r\n\r\n &:focus:hover,\r\n &:active:hover {\r\n text-decoration-line: none;\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n opacity: 0.9;\r\n }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"styling.cjs","names":["_styledComponents","require","_","defaultStyle","exports","css","props","COLORS","generateToken","componentType","defaultVariant","theme","state","isOnFill","invertedStyle","getColor"],"sources":["../../src/HyperLink/styling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { COLORS } from '..';\r\n\r\nexport const defaultStyle = css`\r\n outline: none;\r\n padding: 2px 0;\r\n text-decoration-thickness: 2px;\r\n text-decoration-style: solid;\r\n text-underline-offset: 2px;\r\n text-decoration-line: none;\r\n color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme)};\r\n\r\n &:link {\r\n font-weight: 700;\r\n color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme)};\r\n }\r\n\r\n &:visited {\r\n color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary', state: 'active' }, props.theme)};\r\n }\r\n\r\n &:hover,\r\n &.hover-state {\r\n color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme)};\r\n text-decoration-line: underline;\r\n }\r\n\r\n &:focus,\r\n &.focus-state {\r\n border-radius: 2px;\r\n background: ${props => COLORS.generateToken({componentType:'bg-fill', defaultVariant: 'primary', state: 'active'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n }\r\n\r\n &:active,\r\n &.active-state {\r\n border-radius: 2px;\r\n background: ${props => COLORS.generateToken({componentType:'bg-fill', defaultVariant: 'primary', state: 'active'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n }\r\n\r\n\r\n &:focus:hover,\r\n &:active:hover,\r\n &.active-state:hover,\r\n &.focus-state:hover{\r\n text-decoration-line: none;\r\n color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n opacity: 0.9;\r\n }\r\n`;\r\n\r\nexport const invertedStyle = css`\r\n outline: none;\r\n padding: 2px 0;\r\n\r\n text-decoration-thickness: 2px;\r\n text-decoration-style: solid;\r\n text-underline-offset: 2px;\r\n text-decoration-line: underline;\r\n\r\n &:link {\r\n font-weight: 700;\r\n color: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n\r\n &:visited {\r\n color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n }\r\n\r\n &:focus,\r\n &.focus-state {\r\n border-radius: 2px;\r\n text-decoration-line: none;\r\n background: ${props => COLORS.getColor('white', props.theme)};\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n }\r\n\r\n &:hover,\r\n &.hover-state {\r\n text-decoration-line: none;\r\n }\r\n\r\n &:active,\r\n &.active-state {\r\n border-radius: 2px;\r\n text-decoration-line: none;\r\n background: ${props => COLORS.getColor('white', props.theme)};\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n }\r\n\r\n &:focus:hover,\r\n &:active:hover {\r\n text-decoration-line: none;\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n opacity: 0.9;\r\n }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
package/dist/HyperLink/styling.js CHANGED
@@ -7,6 +7,10 @@ export const defaultStyle = css`
7
7
  text-decoration-style: solid;
8
8
  text-underline-offset: 2px;
9
9
  text-decoration-line: none;
10
+ color: ${props => COLORS.generateToken({
11
+ componentType: 'text-link',
12
+ defaultVariant: 'primary'
13
+ }, props.theme)};
10
14
 
11
15
  &:link {
12
16
  font-weight: 700;
package/dist/HyperLink/styling.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styling.js","names":["css","COLORS","defaultStyle","props","generateToken","componentType","defaultVariant","theme","state","isOnFill","invertedStyle","getColor"],"sources":["../../src/HyperLink/styling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { COLORS } from '..';\r\n\r\nexport const defaultStyle = css`\r\n outline: none;\r\n padding: 2px 0;\r\n text-decoration-thickness: 2px;\r\n text-decoration-style: solid;\r\n text-underline-offset: 2px;\r\n text-decoration-line: none;\r\n\r\n &:link {\r\n font-weight: 700;\r\n color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme)};\r\n }\r\n\r\n &:visited {\r\n color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary', state: 'active' }, props.theme)};\r\n }\r\n\r\n &:hover,\r\n &.hover-state {\r\n color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme)};\r\n text-decoration-line: underline;\r\n }\r\n\r\n &:focus,\r\n &.focus-state {\r\n border-radius: 2px;\r\n background: ${props => COLORS.generateToken({componentType:'bg-fill', defaultVariant: 'primary', state: 'active'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n }\r\n\r\n &:active,\r\n &.active-state {\r\n border-radius: 2px;\r\n background: ${props => COLORS.generateToken({componentType:'bg-fill', defaultVariant: 'primary', state: 'active'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n }\r\n\r\n\r\n &:focus:hover,\r\n &:active:hover,\r\n &.active-state:hover,\r\n &.focus-state:hover{\r\n text-decoration-line: none;\r\n color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n opacity: 0.9;\r\n }\r\n`;\r\n\r\nexport const invertedStyle = css`\r\n outline: none;\r\n padding: 2px 0;\r\n\r\n text-decoration-thickness: 2px;\r\n text-decoration-style: solid;\r\n text-underline-offset: 2px;\r\n text-decoration-line: underline;\r\n\r\n &:link {\r\n font-weight: 700;\r\n color: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n\r\n &:visited {\r\n color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n }\r\n\r\n &:focus,\r\n &.focus-state {\r\n border-radius: 2px;\r\n text-decoration-line: none;\r\n background: ${props => COLORS.getColor('white', props.theme)};\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n }\r\n\r\n &:hover,\r\n &.hover-state {\r\n text-decoration-line: none;\r\n }\r\n\r\n &:active,\r\n &.active-state {\r\n border-radius: 2px;\r\n text-decoration-line: none;\r\n background: ${props => COLORS.getColor('white', props.theme)};\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n }\r\n\r\n &:focus:hover,\r\n &:active:hover {\r\n text-decoration-line: none;\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n opacity: 0.9;\r\n }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"styling.js","names":["css","COLORS","defaultStyle","props","generateToken","componentType","defaultVariant","theme","state","isOnFill","invertedStyle","getColor"],"sources":["../../src/HyperLink/styling.ts"],"sourcesContent":["import { css } from 'styled-components';\r\nimport { COLORS } from '..';\r\n\r\nexport const defaultStyle = css`\r\n outline: none;\r\n padding: 2px 0;\r\n text-decoration-thickness: 2px;\r\n text-decoration-style: solid;\r\n text-underline-offset: 2px;\r\n text-decoration-line: none;\r\n color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme)};\r\n\r\n &:link {\r\n font-weight: 700;\r\n color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme)};\r\n }\r\n\r\n &:visited {\r\n color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary', state: 'active' }, props.theme)};\r\n }\r\n\r\n &:hover,\r\n &.hover-state {\r\n color: ${props => COLORS.generateToken({componentType:'text-link', defaultVariant: 'primary' }, props.theme)};\r\n text-decoration-line: underline;\r\n }\r\n\r\n &:focus,\r\n &.focus-state {\r\n border-radius: 2px;\r\n background: ${props => COLORS.generateToken({componentType:'bg-fill', defaultVariant: 'primary', state: 'active'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n }\r\n\r\n &:active,\r\n &.active-state {\r\n border-radius: 2px;\r\n background: ${props => COLORS.generateToken({componentType:'bg-fill', defaultVariant: 'primary', state: 'active'}, props.theme)};\r\n color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n }\r\n\r\n\r\n &:focus:hover,\r\n &:active:hover,\r\n &.active-state:hover,\r\n &.focus-state:hover{\r\n text-decoration-line: none;\r\n color: ${props => COLORS.generateToken({componentType:'text', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n opacity: 0.9;\r\n }\r\n`;\r\n\r\nexport const invertedStyle = css`\r\n outline: none;\r\n padding: 2px 0;\r\n\r\n text-decoration-thickness: 2px;\r\n text-decoration-style: solid;\r\n text-underline-offset: 2px;\r\n text-decoration-line: underline;\r\n\r\n &:link {\r\n font-weight: 700;\r\n color: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n\r\n &:visited {\r\n color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n }\r\n\r\n &:focus,\r\n &.focus-state {\r\n border-radius: 2px;\r\n text-decoration-line: none;\r\n background: ${props => COLORS.getColor('white', props.theme)};\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n }\r\n\r\n &:hover,\r\n &.hover-state {\r\n text-decoration-line: none;\r\n }\r\n\r\n &:active,\r\n &.active-state {\r\n border-radius: 2px;\r\n text-decoration-line: none;\r\n background: ${props => COLORS.getColor('white', props.theme)};\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n }\r\n\r\n &:focus:hover,\r\n &:active:hover {\r\n text-decoration-line: none;\r\n color: ${props => COLORS.getColor('neutral_800', props.theme)};\r\n opacity: 0.9;\r\n }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
package/dist/Toggles/TogglerStyles.cjs CHANGED
@@ -55,32 +55,100 @@ const StyledSwitch = exports.StyledSwitch = _styledComponents.default.div`
55
55
  margin-left: 8px;
56
56
  }
57
57
 
58
+
59
+ label:first-of-type span.semantic, &[aria-pressed='true'] label:first-of-type span {
60
+ border: none;
61
+ }
62
+
58
63
  &:not(.disabled):active label:first-of-type span {
59
64
  &:before {
60
65
  background-color: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
61
66
  }
62
67
  }
63
68
 
69
+ &:not([aria-pressed='true']) label:first-of-type span {
70
+ &.semantic:before {
71
+ background-color: ${props => _styles.COLORS.generateToken({
72
+ componentType: 'icon',
73
+ isOnFill: true,
74
+ defaultVariant: 'critical'
75
+ }, props.theme)};
76
+ }
77
+ }
78
+
79
+ &[aria-pressed='true'] label:first-of-type span {
80
+ &.semantic:before {
81
+ background-color: ${props => _styles.COLORS.generateToken({
82
+ componentType: 'icon',
83
+ isOnFill: true,
84
+ defaultVariant: 'positive'
85
+ }, props.theme)};
86
+ }
87
+ }
88
+
64
89
  &.disabled[aria-pressed='true'] label:first-of-type span {
65
- background-color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)} !important;
90
+ background-color: ${props => _styles.COLORS.generateToken({
91
+ componentType: 'bg-fill',
92
+ state: 'disabled'
93
+ }, props.theme)} !important;
66
94
  cursor: not-allowed;
67
95
 
68
96
  &:before {
69
- background-color: ${props => _styles.COLORS.getColor('neutral_200', props.theme)} !important;
97
+ background-color: ${props => _styles.COLORS.generateToken({
98
+ componentType: 'icon',
99
+ state: 'disabled'
100
+ }, props.theme)} !important;
70
101
  cursor: not-allowed;
71
102
  }
72
103
  }
73
104
 
74
- &[aria-pressed='true']:hover span {
105
+ &[aria-pressed='true']:hover label:first-of-type span {
106
+ background-color: ${props => _styles.COLORS.generateToken({
107
+ componentType: 'bg-fill',
108
+ state: 'hover',
109
+ defaultVariant: 'primary'
110
+ }, props.theme)};
75
111
  &.semantic {
76
- background-color: ${props => _styles.COLORS.getColor('positive_500', props.theme)};
112
+ background-color: ${props => _styles.COLORS.generateToken({
113
+ componentType: 'bg-fill',
114
+ state: 'hover',
115
+ defaultVariant: 'positive'
116
+ }, props.theme)};
77
117
  }
78
118
 
79
- &:before {
80
- background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
119
+ &:not(.semantic):before {
120
+ background-color: ${props => _styles.COLORS.generateToken({
121
+ componentType: 'icon',
122
+ isOnFill: true,
123
+ defaultVariant: 'primary'
124
+ }, props.theme)};
125
+ }
126
+ }
127
+
128
+ &[aria-pressed='true']:active label:first-of-type span {
129
+ background-color: ${props => _styles.COLORS.generateToken({
130
+ componentType: 'bg-fill',
131
+ state: 'active',
132
+ defaultVariant: 'primary'
133
+ }, props.theme)};
134
+ &.semantic {
135
+ background-color: ${props => _styles.COLORS.generateToken({
136
+ componentType: 'bg-fill',
137
+ state: 'active',
138
+ defaultVariant: 'positive'
139
+ }, props.theme)};
140
+ }
141
+
142
+ &:not(.semantic):before {
143
+ background-color: ${props => _styles.COLORS.generateToken({
144
+ componentType: 'icon',
145
+ isOnFill: true,
146
+ defaultVariant: 'primary'
147
+ }, props.theme)};
81
148
  }
82
149
  }
83
150
 
151
+
84
152
  &[aria-pressed='true'] label:first-of-type span {
85
153
  background-color: ${props => _styles.COLORS.getColor('primary_500', props.theme)};
86
154
 
@@ -88,6 +156,14 @@ const StyledSwitch = exports.StyledSwitch = _styledComponents.default.div`
88
156
  background-color: ${props => _styles.COLORS.getColor('positive_500', props.theme)};
89
157
  }
90
158
 
159
+ &:not(.semantic):before {
160
+ background-color: ${props => _styles.COLORS.generateToken({
161
+ componentType: 'icon',
162
+ isOnFill: true,
163
+ defaultVariant: 'primary'
164
+ }, props.theme)};
165
+ }
166
+
91
167
  &:before {
92
168
  -webkit-transform: translateX(20px);
93
169
  -ms-transform: translateX(20px);
@@ -95,23 +171,96 @@ const StyledSwitch = exports.StyledSwitch = _styledComponents.default.div`
95
171
  }
96
172
  }
97
173
 
98
- &.disabled[aria-pressed='false'] label:first-of-type span {
99
- background-color: ${props => _styles.COLORS.getColor('neutral_300', props.theme)} !important;
174
+ &:not([aria-pressed='true']).disabled label:first-of-type span {
175
+ background-color: ${props => _styles.COLORS.generateToken({
176
+ componentType: 'bg-surface',
177
+ state: 'disabled'
178
+ }, props.theme)} !important;
100
179
  cursor: not-allowed;
101
180
 
102
- &:before {
103
- background-color: ${props => _styles.COLORS.getColor('neutral_100', props.theme)} !important;
181
+ &.semantic {
182
+ background-color: ${props => _styles.COLORS.generateToken({
183
+ componentType: 'bg-fill',
184
+ state: 'disabled'
185
+ }, props.theme)} !important;
186
+ }
187
+
188
+ &:not(.semantic):before {
189
+ background-color: ${props => _styles.COLORS.generateToken({
190
+ componentType: 'icon',
191
+ state: 'disabled'
192
+ }, props.theme)} !important;
104
193
  cursor: not-allowed;
105
194
  }
106
195
  }
107
196
 
108
- &[aria-pressed='false']:hover label:first-of-type span {
197
+ &:not([aria-pressed='true']) label:first-of-type span {
109
198
  &.semantic {
110
- background-color: ${props => _styles.COLORS.getColor('critical_500', props.theme)};
199
+ background-color: ${props => _styles.COLORS.generateToken({
200
+ componentType: 'bg-fill',
201
+ defaultVariant: 'critical'
202
+ }, props.theme)};
111
203
  }
204
+ }
112
205
 
113
- &:before {
114
- background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
206
+ &.disabled label:first-of-type span {
207
+ border-color: ${props => _styles.COLORS.generateToken({
208
+ componentType: 'border',
209
+ state: 'disabled'
210
+ }, props.theme)} !important;
211
+ }
212
+
213
+ &:not([aria-pressed='true']):hover label:first-of-type span {
214
+
215
+ background-color: ${props => _styles.COLORS.generateToken({
216
+ componentType: 'bg-surface',
217
+ state: 'hover'
218
+ }, props.theme)};
219
+ border-color: ${props => _styles.COLORS.generateToken({
220
+ componentType: 'border',
221
+ state: 'hover'
222
+ }, props.theme)};
223
+ &.semantic {
224
+ background-color: ${props => _styles.COLORS.generateToken({
225
+ componentType: 'bg-fill',
226
+ defaultVariant: 'critical',
227
+ state: 'hover'
228
+ }, props.theme)};
229
+ }
230
+
231
+ &:not(.semantic):before {
232
+ background-color: ${props => _styles.COLORS.generateToken({
233
+ componentType: 'icon',
234
+ state: 'hover',
235
+ defaultVariant: 'default'
236
+ }, props.theme)};
237
+ }
238
+ }
239
+
240
+ &:not([aria-pressed='true']):active label:first-of-type span {
241
+
242
+ background-color: ${props => _styles.COLORS.generateToken({
243
+ componentType: 'bg-surface',
244
+ state: 'active'
245
+ }, props.theme)};
246
+ border-color: ${props => _styles.COLORS.generateToken({
247
+ componentType: 'border',
248
+ state: 'active'
249
+ }, props.theme)};
250
+ &.semantic {
251
+ background-color: ${props => _styles.COLORS.generateToken({
252
+ componentType: 'bg-fill',
253
+ defaultVariant: 'critical',
254
+ state: 'active'
255
+ }, props.theme)};
256
+ }
257
+
258
+ &:not(.semantic):before {
259
+ background-color: ${props => _styles.COLORS.generateToken({
260
+ componentType: 'icon',
261
+ state: 'active',
262
+ defaultVariant: 'default'
263
+ }, props.theme)};
115
264
  }
116
265
  }
117
266
 
@@ -140,6 +289,10 @@ const ToggleSwitch = exports.ToggleSwitch = _styledComponents.default.span`
140
289
  top: 0;
141
290
  left: 0;
142
291
  right: 0;
292
+ border: 1px solid ${props => _styles.COLORS.generateToken({
293
+ componentType: 'border',
294
+ defaultVariant: 'default'
295
+ }, props.theme)};
143
296
  bottom: 0;
144
297
  width: 36px;
145
298
  height: 16px;
@@ -163,7 +316,10 @@ const ToggleSwitch = exports.ToggleSwitch = _styledComponents.default.span`
163
316
  width: 12px;
164
317
  left: 2px;
165
318
  top: calc(50% - 6px);
166
- background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
319
+ background-color: ${props => _styles.COLORS.generateToken({
320
+ componentType: 'icon',
321
+ defaultVariant: 'default'
322
+ }, props.theme)};
167
323
  -webkit-transition: background-color 0.1s, transform 0.1s;
168
324
  transition: 0.1s;
169
325
  transition-timing-function: ease-in-out;
package/dist/Toggles/TogglerStyles.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TogglerStyles.cjs","names":["_styles","require","_styledComponents","_interopRequireDefault","_typography","StyledSwitch","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","state","getColor","focusStyles","ToggleSwitchContainer","label","ToggleSwitch","span"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS, focusStyles } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ $selected: boolean | undefined }>`\r\n display: flex;\r\n flex-direction: row;\r\n width: max-content;\r\n min-height: 48px;\r\n min-width: 48px;\r\n align-items: center;\r\n cursor: pointer;\r\n color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n &.small {\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n &.medium {\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n &.large {\r\n ${props => ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n &.disabled {\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled'}, props.theme)};\r\n\r\n .label {\r\n cursor: not-allowed;\r\n }\r\n }\r\n .label {\r\n cursor: inherit;\r\n margin-left: 8px;\r\n }\r\n\r\n &:not(.disabled):active label:first-of-type span {\r\n &:before {\r\n background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n }\r\n }\r\n\r\n &.disabled[aria-pressed='true'] label:first-of-type span {\r\n background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n cursor: not-allowed;\r\n\r\n &:before {\r\n background-color: ${props => COLORS.getColor('neutral_200', props.theme)} !important;\r\n cursor: not-allowed;\r\n }\r\n }\r\n\r\n &[aria-pressed='true']:hover span {\r\n &.semantic {\r\n background-color: ${props => COLORS.getColor('positive_500', props.theme)};\r\n }\r\n\r\n &:before {\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n }\r\n }\r\n\r\n &[aria-pressed='true'] label:first-of-type span {\r\n background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n &.semantic {\r\n background-color: ${props => COLORS.getColor('positive_500', props.theme)};\r\n }\r\n\r\n &:before {\r\n -webkit-transform: translateX(20px);\r\n -ms-transform: translateX(20px);\r\n transform: translateX(20px);\r\n }\r\n }\r\n\r\n &.disabled[aria-pressed='false'] label:first-of-type span {\r\n background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n cursor: not-allowed;\r\n\r\n &:before {\r\n background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;\r\n cursor: not-allowed;\r\n }\r\n }\r\n\r\n &[aria-pressed='false']:hover label:first-of-type span {\r\n &.semantic {\r\n background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n }\r\n\r\n &:before {\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n }\r\n }\r\n\r\n &:not(.disabled).focus-visible {\r\n ${focusStyles}\r\n }\r\n\r\n &:not(.disabled) label:first-of-type {\r\n cursor: inherit;\r\n }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n position: relative;\r\n align-items: center;\r\n display: inline-flex;\r\n height: 28px;\r\n width: auto;\r\n padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n vertical-align: middle;\r\n cursor: pointer;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n width: 36px;\r\n height: 16px;\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n border-radius: 100px;\r\n\r\n &.semantic {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n }\r\n\r\n &:before {\r\n position: absolute;\r\n content: '';\r\n height: 12px;\r\n width: 12px;\r\n left: 2px;\r\n top: calc(50% - 6px);\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n -webkit-transition: background-color 0.1s, transform 0.1s;\r\n transition: 0.1s;\r\n transition-timing-function: ease-in-out;\r\n border-radius: 50%;\r\n }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"TogglerStyles.cjs","names":["_styles","require","_styledComponents","_interopRequireDefault","_typography","StyledSwitch","exports","styled","div","props","COLORS","generateToken","componentType","defaultVariant","theme","ComponentSStyling","ComponentTextStyle","Regular","ComponentMStyling","ComponentLStyling","state","getColor","isOnFill","focusStyles","ToggleSwitchContainer","label","ToggleSwitch","span"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS, focusStyles } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ $selected: boolean | undefined }>`\r\n display: flex;\r\n flex-direction: row;\r\n width: max-content;\r\n min-height: 48px;\r\n min-width: 48px;\r\n align-items: center;\r\n cursor: pointer;\r\n color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n &.small {\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n &.medium {\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n &.large {\r\n ${props => ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n &.disabled {\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled'}, props.theme)};\r\n\r\n .label {\r\n cursor: not-allowed;\r\n }\r\n }\r\n .label {\r\n cursor: inherit;\r\n margin-left: 8px;\r\n }\r\n\r\n\r\n label:first-of-type span.semantic, &[aria-pressed='true'] label:first-of-type span {\r\n border: none;\r\n }\r\n\r\n &:not(.disabled):active label:first-of-type span {\r\n &:before {\r\n background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n }\r\n }\r\n\r\n &:not([aria-pressed='true']) label:first-of-type span {\r\n &.semantic:before {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'critical' }, props.theme)};\r\n }\r\n }\r\n\r\n &[aria-pressed='true'] label:first-of-type span {\r\n &.semantic:before {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'positive' }, props.theme)};\r\n }\r\n }\r\n\r\n &.disabled[aria-pressed='true'] label:first-of-type span {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'disabled' }, props.theme)} !important;\r\n cursor: not-allowed;\r\n\r\n &:before {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)} !important;\r\n cursor: not-allowed;\r\n }\r\n }\r\n\r\n &[aria-pressed='true']:hover label:first-of-type span {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'hover', defaultVariant: 'primary' }, props.theme)};\r\n &.semantic {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'hover', defaultVariant: 'positive' }, props.theme)};\r\n }\r\n\r\n &:not(.semantic):before {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n }\r\n }\r\n\r\n &[aria-pressed='true']:active label:first-of-type span {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'active', defaultVariant: 'primary' }, props.theme)};\r\n &.semantic {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'active', defaultVariant: 'positive' }, props.theme)};\r\n }\r\n\r\n &:not(.semantic):before {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n }\r\n }\r\n\r\n\r\n &[aria-pressed='true'] label:first-of-type span {\r\n background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n &.semantic {\r\n background-color: ${props => COLORS.getColor('positive_500', props.theme)};\r\n }\r\n\r\n &:not(.semantic):before {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n }\r\n\r\n &:before {\r\n -webkit-transform: translateX(20px);\r\n -ms-transform: translateX(20px);\r\n transform: translateX(20px);\r\n }\r\n }\r\n\r\n &:not([aria-pressed='true']).disabled label:first-of-type span {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'disabled' }, props.theme)} !important;\r\n cursor: not-allowed;\r\n\r\n &.semantic {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'disabled' }, props.theme)} !important;\r\n }\r\n\r\n &:not(.semantic):before {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)} !important;\r\n cursor: not-allowed;\r\n }\r\n }\r\n\r\n &:not([aria-pressed='true']) label:first-of-type span {\r\n &.semantic {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'critical' }, props.theme)};\r\n }\r\n }\r\n\r\n &.disabled label:first-of-type span {\r\n border-color: ${props => COLORS.generateToken({ componentType: 'border', state: 'disabled' }, props.theme)} !important;\r\n }\r\n\r\n &:not([aria-pressed='true']):hover label:first-of-type span {\r\n\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n border-color: ${props => COLORS.generateToken({ componentType: 'border', state: 'hover' }, props.theme)};\r\n &.semantic {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant:'critical', state:'hover' }, props.theme)};\r\n }\r\n\r\n &:not(.semantic):before {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover', defaultVariant: 'default' }, props.theme)};\r\n }\r\n }\r\n\r\n &:not([aria-pressed='true']):active label:first-of-type span {\r\n\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n border-color: ${props => COLORS.generateToken({ componentType: 'border', state: 'active' }, props.theme)};\r\n &.semantic {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant:'critical', state: 'active' }, props.theme)};\r\n }\r\n\r\n &:not(.semantic):before {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'active', defaultVariant: 'default' }, props.theme)};\r\n }\r\n }\r\n\r\n &:not(.disabled).focus-visible {\r\n ${focusStyles}\r\n }\r\n\r\n &:not(.disabled) label:first-of-type {\r\n cursor: inherit;\r\n }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n position: relative;\r\n align-items: center;\r\n display: inline-flex;\r\n height: 28px;\r\n width: auto;\r\n padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n vertical-align: middle;\r\n cursor: pointer;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n border: 1px solid ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'default' }, props.theme)};\r\n bottom: 0;\r\n width: 36px;\r\n height: 16px;\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n border-radius: 100px;\r\n\r\n &.semantic {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n }\r\n\r\n &:before {\r\n position: absolute;\r\n content: '';\r\n height: 12px;\r\n width: 12px;\r\n left: 2px;\r\n top: calc(50% - 6px);\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', defaultVariant: 'default' }, props.theme)};\r\n -webkit-transition: background-color 0.1s, transform 0.1s;\r\n transition: 0.1s;\r\n transition-timing-function: ease-in-out;\r\n border-radius: 50%;\r\n }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
package/dist/Toggles/TogglerStyles.js CHANGED
@@ -47,32 +47,100 @@ export const StyledSwitch = styled.div`
47
47
  margin-left: 8px;
48
48
  }
49
49
 
50
+
51
+ label:first-of-type span.semantic, &[aria-pressed='true'] label:first-of-type span {
52
+ border: none;
53
+ }
54
+
50
55
  &:not(.disabled):active label:first-of-type span {
51
56
  &:before {
52
57
  background-color: ${props => COLORS.getColor('primary_100', props.theme)};
53
58
  }
54
59
  }
55
60
 
61
+ &:not([aria-pressed='true']) label:first-of-type span {
62
+ &.semantic:before {
63
+ background-color: ${props => COLORS.generateToken({
64
+ componentType: 'icon',
65
+ isOnFill: true,
66
+ defaultVariant: 'critical'
67
+ }, props.theme)};
68
+ }
69
+ }
70
+
71
+ &[aria-pressed='true'] label:first-of-type span {
72
+ &.semantic:before {
73
+ background-color: ${props => COLORS.generateToken({
74
+ componentType: 'icon',
75
+ isOnFill: true,
76
+ defaultVariant: 'positive'
77
+ }, props.theme)};
78
+ }
79
+ }
80
+
56
81
  &.disabled[aria-pressed='true'] label:first-of-type span {
57
- background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;
82
+ background-color: ${props => COLORS.generateToken({
83
+ componentType: 'bg-fill',
84
+ state: 'disabled'
85
+ }, props.theme)} !important;
58
86
  cursor: not-allowed;
59
87
 
60
88
  &:before {
61
- background-color: ${props => COLORS.getColor('neutral_200', props.theme)} !important;
89
+ background-color: ${props => COLORS.generateToken({
90
+ componentType: 'icon',
91
+ state: 'disabled'
92
+ }, props.theme)} !important;
62
93
  cursor: not-allowed;
63
94
  }
64
95
  }
65
96
 
66
- &[aria-pressed='true']:hover span {
97
+ &[aria-pressed='true']:hover label:first-of-type span {
98
+ background-color: ${props => COLORS.generateToken({
99
+ componentType: 'bg-fill',
100
+ state: 'hover',
101
+ defaultVariant: 'primary'
102
+ }, props.theme)};
67
103
  &.semantic {
68
- background-color: ${props => COLORS.getColor('positive_500', props.theme)};
104
+ background-color: ${props => COLORS.generateToken({
105
+ componentType: 'bg-fill',
106
+ state: 'hover',
107
+ defaultVariant: 'positive'
108
+ }, props.theme)};
69
109
  }
70
110
 
71
- &:before {
72
- background-color: ${props => COLORS.getColor('primary_20', props.theme)};
111
+ &:not(.semantic):before {
112
+ background-color: ${props => COLORS.generateToken({
113
+ componentType: 'icon',
114
+ isOnFill: true,
115
+ defaultVariant: 'primary'
116
+ }, props.theme)};
117
+ }
118
+ }
119
+
120
+ &[aria-pressed='true']:active label:first-of-type span {
121
+ background-color: ${props => COLORS.generateToken({
122
+ componentType: 'bg-fill',
123
+ state: 'active',
124
+ defaultVariant: 'primary'
125
+ }, props.theme)};
126
+ &.semantic {
127
+ background-color: ${props => COLORS.generateToken({
128
+ componentType: 'bg-fill',
129
+ state: 'active',
130
+ defaultVariant: 'positive'
131
+ }, props.theme)};
132
+ }
133
+
134
+ &:not(.semantic):before {
135
+ background-color: ${props => COLORS.generateToken({
136
+ componentType: 'icon',
137
+ isOnFill: true,
138
+ defaultVariant: 'primary'
139
+ }, props.theme)};
73
140
  }
74
141
  }
75
142
 
143
+
76
144
  &[aria-pressed='true'] label:first-of-type span {
77
145
  background-color: ${props => COLORS.getColor('primary_500', props.theme)};
78
146
 
@@ -80,6 +148,14 @@ export const StyledSwitch = styled.div`
80
148
  background-color: ${props => COLORS.getColor('positive_500', props.theme)};
81
149
  }
82
150
 
151
+ &:not(.semantic):before {
152
+ background-color: ${props => COLORS.generateToken({
153
+ componentType: 'icon',
154
+ isOnFill: true,
155
+ defaultVariant: 'primary'
156
+ }, props.theme)};
157
+ }
158
+
83
159
  &:before {
84
160
  -webkit-transform: translateX(20px);
85
161
  -ms-transform: translateX(20px);
@@ -87,23 +163,96 @@ export const StyledSwitch = styled.div`
87
163
  }
88
164
  }
89
165
 
90
- &.disabled[aria-pressed='false'] label:first-of-type span {
91
- background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;
166
+ &:not([aria-pressed='true']).disabled label:first-of-type span {
167
+ background-color: ${props => COLORS.generateToken({
168
+ componentType: 'bg-surface',
169
+ state: 'disabled'
170
+ }, props.theme)} !important;
92
171
  cursor: not-allowed;
93
172
 
94
- &:before {
95
- background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;
173
+ &.semantic {
174
+ background-color: ${props => COLORS.generateToken({
175
+ componentType: 'bg-fill',
176
+ state: 'disabled'
177
+ }, props.theme)} !important;
178
+ }
179
+
180
+ &:not(.semantic):before {
181
+ background-color: ${props => COLORS.generateToken({
182
+ componentType: 'icon',
183
+ state: 'disabled'
184
+ }, props.theme)} !important;
96
185
  cursor: not-allowed;
97
186
  }
98
187
  }
99
188
 
100
- &[aria-pressed='false']:hover label:first-of-type span {
189
+ &:not([aria-pressed='true']) label:first-of-type span {
101
190
  &.semantic {
102
- background-color: ${props => COLORS.getColor('critical_500', props.theme)};
191
+ background-color: ${props => COLORS.generateToken({
192
+ componentType: 'bg-fill',
193
+ defaultVariant: 'critical'
194
+ }, props.theme)};
103
195
  }
196
+ }
104
197
 
105
- &:before {
106
- background-color: ${props => COLORS.getColor('primary_20', props.theme)};
198
+ &.disabled label:first-of-type span {
199
+ border-color: ${props => COLORS.generateToken({
200
+ componentType: 'border',
201
+ state: 'disabled'
202
+ }, props.theme)} !important;
203
+ }
204
+
205
+ &:not([aria-pressed='true']):hover label:first-of-type span {
206
+
207
+ background-color: ${props => COLORS.generateToken({
208
+ componentType: 'bg-surface',
209
+ state: 'hover'
210
+ }, props.theme)};
211
+ border-color: ${props => COLORS.generateToken({
212
+ componentType: 'border',
213
+ state: 'hover'
214
+ }, props.theme)};
215
+ &.semantic {
216
+ background-color: ${props => COLORS.generateToken({
217
+ componentType: 'bg-fill',
218
+ defaultVariant: 'critical',
219
+ state: 'hover'
220
+ }, props.theme)};
221
+ }
222
+
223
+ &:not(.semantic):before {
224
+ background-color: ${props => COLORS.generateToken({
225
+ componentType: 'icon',
226
+ state: 'hover',
227
+ defaultVariant: 'default'
228
+ }, props.theme)};
229
+ }
230
+ }
231
+
232
+ &:not([aria-pressed='true']):active label:first-of-type span {
233
+
234
+ background-color: ${props => COLORS.generateToken({
235
+ componentType: 'bg-surface',
236
+ state: 'active'
237
+ }, props.theme)};
238
+ border-color: ${props => COLORS.generateToken({
239
+ componentType: 'border',
240
+ state: 'active'
241
+ }, props.theme)};
242
+ &.semantic {
243
+ background-color: ${props => COLORS.generateToken({
244
+ componentType: 'bg-fill',
245
+ defaultVariant: 'critical',
246
+ state: 'active'
247
+ }, props.theme)};
248
+ }
249
+
250
+ &:not(.semantic):before {
251
+ background-color: ${props => COLORS.generateToken({
252
+ componentType: 'icon',
253
+ state: 'active',
254
+ defaultVariant: 'default'
255
+ }, props.theme)};
107
256
  }
108
257
  }
109
258
 
@@ -132,6 +281,10 @@ export const ToggleSwitch = styled.span`
132
281
  top: 0;
133
282
  left: 0;
134
283
  right: 0;
284
+ border: 1px solid ${props => COLORS.generateToken({
285
+ componentType: 'border',
286
+ defaultVariant: 'default'
287
+ }, props.theme)};
135
288
  bottom: 0;
136
289
  width: 36px;
137
290
  height: 16px;
@@ -155,7 +308,10 @@ export const ToggleSwitch = styled.span`
155
308
  width: 12px;
156
309
  left: 2px;
157
310
  top: calc(50% - 6px);
158
- background-color: ${props => COLORS.getColor('white', props.theme)};
311
+ background-color: ${props => COLORS.generateToken({
312
+ componentType: 'icon',
313
+ defaultVariant: 'default'
314
+ }, props.theme)};
159
315
  -webkit-transition: background-color 0.1s, transform 0.1s;
160
316
  transition: 0.1s;
161
317
  transition-timing-function: ease-in-out;
package/dist/Toggles/TogglerStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TogglerStyles.js","names":["COLORS","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","props","generateToken","componentType","defaultVariant","theme","Regular","state","getColor","ToggleSwitchContainer","label","ToggleSwitch","span"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS, focusStyles } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ $selected: boolean | undefined }>`\r\n display: flex;\r\n flex-direction: row;\r\n width: max-content;\r\n min-height: 48px;\r\n min-width: 48px;\r\n align-items: center;\r\n cursor: pointer;\r\n color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n &.small {\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n &.medium {\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n &.large {\r\n ${props => ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n &.disabled {\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled'}, props.theme)};\r\n\r\n .label {\r\n cursor: not-allowed;\r\n }\r\n }\r\n .label {\r\n cursor: inherit;\r\n margin-left: 8px;\r\n }\r\n\r\n &:not(.disabled):active label:first-of-type span {\r\n &:before {\r\n background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n }\r\n }\r\n\r\n &.disabled[aria-pressed='true'] label:first-of-type span {\r\n background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n cursor: not-allowed;\r\n\r\n &:before {\r\n background-color: ${props => COLORS.getColor('neutral_200', props.theme)} !important;\r\n cursor: not-allowed;\r\n }\r\n }\r\n\r\n &[aria-pressed='true']:hover span {\r\n &.semantic {\r\n background-color: ${props => COLORS.getColor('positive_500', props.theme)};\r\n }\r\n\r\n &:before {\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n }\r\n }\r\n\r\n &[aria-pressed='true'] label:first-of-type span {\r\n background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n &.semantic {\r\n background-color: ${props => COLORS.getColor('positive_500', props.theme)};\r\n }\r\n\r\n &:before {\r\n -webkit-transform: translateX(20px);\r\n -ms-transform: translateX(20px);\r\n transform: translateX(20px);\r\n }\r\n }\r\n\r\n &.disabled[aria-pressed='false'] label:first-of-type span {\r\n background-color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;\r\n cursor: not-allowed;\r\n\r\n &:before {\r\n background-color: ${props => COLORS.getColor('neutral_100', props.theme)} !important;\r\n cursor: not-allowed;\r\n }\r\n }\r\n\r\n &[aria-pressed='false']:hover label:first-of-type span {\r\n &.semantic {\r\n background-color: ${props => COLORS.getColor('critical_500', props.theme)};\r\n }\r\n\r\n &:before {\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n }\r\n }\r\n\r\n &:not(.disabled).focus-visible {\r\n ${focusStyles}\r\n }\r\n\r\n &:not(.disabled) label:first-of-type {\r\n cursor: inherit;\r\n }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n position: relative;\r\n align-items: center;\r\n display: inline-flex;\r\n height: 28px;\r\n width: auto;\r\n padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n vertical-align: middle;\r\n cursor: pointer;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n width: 36px;\r\n height: 16px;\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n border-radius: 100px;\r\n\r\n &.semantic {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n }\r\n\r\n &:before {\r\n position: absolute;\r\n content: '';\r\n height: 12px;\r\n width: 12px;\r\n left: 2px;\r\n top: calc(50% - 6px);\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n -webkit-transition: background-color 0.1s, transform 0.1s;\r\n transition: 0.1s;\r\n transition-timing-function: ease-in-out;\r\n border-radius: 50%;\r\n }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"TogglerStyles.js","names":["COLORS","focusStyles","styled","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","StyledSwitch","div","props","generateToken","componentType","defaultVariant","theme","Regular","state","getColor","isOnFill","ToggleSwitchContainer","label","ToggleSwitch","span"],"sources":["../../src/Toggles/TogglerStyles.ts"],"sourcesContent":["/**\r\n * Import custom styles.\r\n */\r\nimport { COLORS, focusStyles } from '../styles';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, { css } from 'styled-components';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nexport const StyledSwitch = styled.div<{ $selected: boolean | undefined }>`\r\n display: flex;\r\n flex-direction: row;\r\n width: max-content;\r\n min-height: 48px;\r\n min-width: 48px;\r\n align-items: center;\r\n cursor: pointer;\r\n color: ${props => COLORS.generateToken({ componentType: 'text', defaultVariant: 'default'}, props.theme)};\r\n &.small {\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n &.medium {\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n &.large {\r\n ${props => ComponentLStyling(ComponentTextStyle.Regular, null)}\r\n }\r\n\r\n &.disabled {\r\n color: ${props => COLORS.generateToken({ componentType: 'text', state: 'disabled'}, props.theme)};\r\n\r\n .label {\r\n cursor: not-allowed;\r\n }\r\n }\r\n .label {\r\n cursor: inherit;\r\n margin-left: 8px;\r\n }\r\n\r\n\r\n label:first-of-type span.semantic, &[aria-pressed='true'] label:first-of-type span {\r\n border: none;\r\n }\r\n\r\n &:not(.disabled):active label:first-of-type span {\r\n &:before {\r\n background-color: ${props => COLORS.getColor('primary_100', props.theme)};\r\n }\r\n }\r\n\r\n &:not([aria-pressed='true']) label:first-of-type span {\r\n &.semantic:before {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'critical' }, props.theme)};\r\n }\r\n }\r\n\r\n &[aria-pressed='true'] label:first-of-type span {\r\n &.semantic:before {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'positive' }, props.theme)};\r\n }\r\n }\r\n\r\n &.disabled[aria-pressed='true'] label:first-of-type span {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'disabled' }, props.theme)} !important;\r\n cursor: not-allowed;\r\n\r\n &:before {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)} !important;\r\n cursor: not-allowed;\r\n }\r\n }\r\n\r\n &[aria-pressed='true']:hover label:first-of-type span {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'hover', defaultVariant: 'primary' }, props.theme)};\r\n &.semantic {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'hover', defaultVariant: 'positive' }, props.theme)};\r\n }\r\n\r\n &:not(.semantic):before {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n }\r\n }\r\n\r\n &[aria-pressed='true']:active label:first-of-type span {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'active', defaultVariant: 'primary' }, props.theme)};\r\n &.semantic {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'active', defaultVariant: 'positive' }, props.theme)};\r\n }\r\n\r\n &:not(.semantic):before {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n }\r\n }\r\n\r\n\r\n &[aria-pressed='true'] label:first-of-type span {\r\n background-color: ${props => COLORS.getColor('primary_500', props.theme)};\r\n\r\n &.semantic {\r\n background-color: ${props => COLORS.getColor('positive_500', props.theme)};\r\n }\r\n\r\n &:not(.semantic):before {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', isOnFill: true, defaultVariant: 'primary' }, props.theme)};\r\n }\r\n\r\n &:before {\r\n -webkit-transform: translateX(20px);\r\n -ms-transform: translateX(20px);\r\n transform: translateX(20px);\r\n }\r\n }\r\n\r\n &:not([aria-pressed='true']).disabled label:first-of-type span {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'disabled' }, props.theme)} !important;\r\n cursor: not-allowed;\r\n\r\n &.semantic {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', state: 'disabled' }, props.theme)} !important;\r\n }\r\n\r\n &:not(.semantic):before {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'disabled' }, props.theme)} !important;\r\n cursor: not-allowed;\r\n }\r\n }\r\n\r\n &:not([aria-pressed='true']) label:first-of-type span {\r\n &.semantic {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant: 'critical' }, props.theme)};\r\n }\r\n }\r\n\r\n &.disabled label:first-of-type span {\r\n border-color: ${props => COLORS.generateToken({ componentType: 'border', state: 'disabled' }, props.theme)} !important;\r\n }\r\n\r\n &:not([aria-pressed='true']):hover label:first-of-type span {\r\n\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'hover' }, props.theme)};\r\n border-color: ${props => COLORS.generateToken({ componentType: 'border', state: 'hover' }, props.theme)};\r\n &.semantic {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant:'critical', state:'hover' }, props.theme)};\r\n }\r\n\r\n &:not(.semantic):before {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'hover', defaultVariant: 'default' }, props.theme)};\r\n }\r\n }\r\n\r\n &:not([aria-pressed='true']):active label:first-of-type span {\r\n\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', state: 'active' }, props.theme)};\r\n border-color: ${props => COLORS.generateToken({ componentType: 'border', state: 'active' }, props.theme)};\r\n &.semantic {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-fill', defaultVariant:'critical', state: 'active' }, props.theme)};\r\n }\r\n\r\n &:not(.semantic):before {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', state: 'active', defaultVariant: 'default' }, props.theme)};\r\n }\r\n }\r\n\r\n &:not(.disabled).focus-visible {\r\n ${focusStyles}\r\n }\r\n\r\n &:not(.disabled) label:first-of-type {\r\n cursor: inherit;\r\n }\r\n`;\r\n\r\nexport const ToggleSwitchContainer = styled.label`\r\n position: relative;\r\n align-items: center;\r\n display: inline-flex;\r\n height: 28px;\r\n width: auto;\r\n padding: 10px 6px;\r\n`;\r\n\r\nexport const ToggleSwitch = styled.span`\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n vertical-align: middle;\r\n cursor: pointer;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n border: 1px solid ${props => COLORS.generateToken({ componentType: 'border', defaultVariant: 'default' }, props.theme)};\r\n bottom: 0;\r\n width: 36px;\r\n height: 16px;\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n border-radius: 100px;\r\n\r\n &.semantic {\r\n background-color: ${props => COLORS.generateToken({ componentType: 'bg-surface', defaultVariant: 'subtle' }, props.theme)};\r\n }\r\n\r\n &:before {\r\n position: absolute;\r\n content: '';\r\n height: 12px;\r\n width: 12px;\r\n left: 2px;\r\n top: calc(50% - 6px);\r\n background-color: ${props => COLORS.generateToken({ componentType: 'icon', defaultVariant: 'default' }, props.theme)};\r\n -webkit-transition: background-color 0.1s, transform 0.1s;\r\n transition: 0.1s;\r\n transition-timing-function: ease-in-out;\r\n border-radius: 50%;\r\n }\r\n`;\r\n"],"mappings":"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","ignoreList":[]}
package/package.json CHANGED
@@ -1,150 +1,147 @@
1
1
  {
2
- "name": "@laerdal/life-react-components",
3
- "version": "6.0.0-dev.22.full.full",
4
- "private": false,
5
- "author": "Erik Martirosyan \u003cerik.martirosyan@laerdal.com\u003e",
6
- "contributors": [
7
-
8
- ],
9
- "description": "Laerdal LIFE component library for React.",
10
- "keywords": [
11
-
12
- ],
13
- "license": "UNLICENSED",
14
- "repository": {
15
- "type": "git",
16
- "url": "https://github.com/Laerdal-Medical/dcs-life-react-js"
17
- },
18
- "main": "dist/index.cjs",
19
- "module": "dist/index.js",
20
- "types": "dist/index.d.ts",
21
- "exports": {
22
- ".": {
23
- "require": "./dist/index.cjs",
24
- "import": "./dist/index.js",
25
- "types": "./dist/index.d.ts"
26
- }
27
- },
28
- "sideEffects": false,
29
- "files": [
30
- "dist"
31
- ],
32
- "scripts": {
33
- "bump": "yarn version --patch",
34
- "build": "yarn build:babel:esm \u0026\u0026 yarn build:babel:cjs \u0026\u0026 tsc --emitDeclarationOnly --declaration --declarationDir dist \u0026\u0026 node scripts/copyTS.cjs",
35
- "build:babel:esm": "cross-env BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist --out-file-extension .js --copy-files",
36
- "build:babel:cjs": "cross-env BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist --out-file-extension .cjs --copy-files",
37
- "clean": "rimraf dist",
38
- "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose",
39
- "test": "jest src/",
40
- "test:coverage": "jest --collectCoverage src/",
41
- "test-watch": "jest --watch",
42
- "storybook": "storybook dev -p 6006",
43
- "build-storybook": "storybook build"
44
- },
45
- "eslintConfig": {
46
- "extends": [
47
- "react-app",
48
- "plugin:storybook/recommended"
49
- ]
50
- },
51
- "browserslist": {
52
- "production": [
53
- "\u003e0.2%",
54
- "not dead",
55
- "not op_mini all"
56
- ],
57
- "development": [
58
- "last 1 chrome version",
59
- "last 1 firefox version",
60
- "last 1 safari version"
61
- ]
62
- },
63
- "omlet": {
64
- "exports": {
65
- ".": "src/index.ts"
66
- }
67
- },
68
- "dependencies": {
69
- "@laerdal-medical/life-design-tokens": "^1.2.0-beta",
70
- "@laerdal/figma-svg": "^5.2.2",
71
- "@types/node": "^18.0.6",
72
- "animated-scroll-to": "^2.3.0",
73
- "dayjs": "^1.11.5",
74
- "nanoid": "3.3.11",
75
- "react": "^19.0.0",
76
- "react-datepicker": "^8.4.0",
77
- "react-dom": "^19.0.0",
78
- "react-inlinesvg": "^4.2.0",
79
- "react-modal": "^3.16.0",
80
- "react-quill": "^2.0.0",
81
- "react-resize-detector": "^11.0.1",
82
- "rooks": "^7.1.1",
83
- "styled-components": "^6.1.13",
84
- "typescript": "^5.1.2"
85
- },
86
- "devDependencies": {
87
- "@babel/cli": "^7.22.0",
88
- "@babel/plugin-proposal-class-properties": "^7.18.6",
89
- "@babel/plugin-proposal-decorators": "^7.27.1",
90
- "@babel/plugin-proposal-export-default-from": "^7.22.0",
91
- "@babel/plugin-proposal-numeric-separator": "^7.18.6",
92
- "@babel/plugin-proposal-object-rest-spread": "^7.18.6",
93
- "@babel/plugin-transform-runtime": "^7.22.0",
94
- "@babel/preset-env": "^7.22.0",
95
- "@babel/preset-react": "^7.22.0",
96
- "@babel/preset-typescript": "^7.27.0",
97
- "@babel/runtime": "^7.22.0",
98
- "@chromatic-com/storybook": "1.4.0",
99
- "@laerdal/navigation": "^3.2.0",
100
- "@storybook/addon-essentials": "^8.1.3",
101
- "@storybook/addon-interactions": "^8.1.3",
102
- "@storybook/addon-links": "^8.1.3",
103
- "@storybook/addon-onboarding": "^8.1.3",
104
- "@storybook/addon-webpack5-compiler-swc": "1.0.2",
105
- "@storybook/addons": "^7.6.17",
106
- "@storybook/blocks": "^8.1.3",
107
- "@storybook/react": "^8.1.3",
108
- "@storybook/react-webpack5": "^8.1.3",
109
- "@storybook/test": "^8.1.3",
110
- "@testing-library/dom": "^10.4.0",
111
- "@testing-library/jest-dom": "^6.5.0",
112
- "@testing-library/react": "^16.0.1",
113
- "@testing-library/user-event": "^14.5.2",
114
- "@types/jest": "^29.5.12",
115
- "@types/react": "^19.1.2",
116
- "@types/react-datepicker": "^4.4.2",
117
- "@types/react-dom": "^18.3.0",
118
- "@types/react-modal": "^3.13.1",
119
- "babel-plugin-inline-react-svg": "^2.0.1",
120
- "babel-plugin-typescript-to-proptypes": "^2.0.0",
121
- "concurrently": "^5.2.0",
122
- "cross-env": "^7.0.3",
123
- "css-loader": "^7.1.2",
124
- "eslint-plugin-storybook": "^0.8.0",
125
- "history": "^5.3.0",
126
- "jest": "^29.7.0",
127
- "jest-environment-jsdom": "^29.7.0",
128
- "jest-styled-components": "^7.2.0",
129
- "jest-svg-transformer": "^1.0.0",
130
- "react-router": "^6.0.0",
131
- "react-share": "^5.1.0",
132
- "regenerator-runtime": "^0.13.9",
133
- "storybook": "^8.1.3",
134
- "style-loader": "^4.0.0",
135
- "ts-jest": "^29.2.5",
136
- "webpack": "^5.99.9",
137
- "webpack-cli": "^6.0.1",
138
- "webpack-dev-server": "^5.2.1"
139
- },
140
- "peerDependencies": {
141
- "@babel/core": "^7.0.0",
142
- "react": "^19",
143
- "react-dom": "^19"
144
- },
145
- "resolutions": {
146
- "nwsapi": "2.2.9",
147
- "date-fns": "2.24.0",
148
- "@types/react": "19.1.2"
149
- }
2
+ "name": "@laerdal/life-react-components",
3
+ "version": "6.0.0-dev.24",
4
+ "private": false,
5
+ "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
6
+ "contributors": [],
7
+ "description": "Laerdal LIFE component library for React.",
8
+ "keywords": [],
9
+ "license": "UNLICENSED",
10
+ "repository": {
11
+ "type": "git",
12
+ "url": "https://github.com/Laerdal-Medical/dcs-life-react-js"
13
+ },
14
+ "main": "dist/index.cjs",
15
+ "module": "dist/index.js",
16
+ "types": "dist/index.d.ts",
17
+ "exports": {
18
+ ".": {
19
+ "require": "./dist/index.cjs",
20
+ "import": "./dist/index.js",
21
+ "types": "./dist/index.d.ts"
22
+ }
23
+ },
24
+ "sideEffects": false,
25
+ "files": [
26
+ "dist"
27
+ ],
28
+ "scripts": {
29
+ "bump": "yarn version --patch",
30
+ "build": "yarn build:babel:esm && yarn build:babel:cjs && tsc --emitDeclarationOnly --declaration --declarationDir dist && node scripts/copyTS.cjs",
31
+ "build:babel:esm": "cross-env BABEL_ENV=esm babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist --out-file-extension .js --copy-files",
32
+ "build:babel:cjs": "cross-env BABEL_ENV=cjs babel --source-maps --extensions \".js,.ts,.tsx\" src --out-dir dist --out-file-extension .cjs --copy-files",
33
+ "clean": "rimraf dist",
34
+ "develop": "yarn build:babel:esm --skip-initial-build --watch --verbose",
35
+ "test": "jest src/",
36
+ "test:coverage": "jest --collectCoverage src/",
37
+ "test-watch": "jest --watch",
38
+ "storybook": "storybook dev -p 6006",
39
+ "build-storybook": "storybook build"
40
+ },
41
+ "eslintConfig": {
42
+ "extends": [
43
+ "react-app",
44
+ "plugin:storybook/recommended"
45
+ ]
46
+ },
47
+ "browserslist": {
48
+ "production": [
49
+ ">0.2%",
50
+ "not dead",
51
+ "not op_mini all"
52
+ ],
53
+ "development": [
54
+ "last 1 chrome version",
55
+ "last 1 firefox version",
56
+ "last 1 safari version"
57
+ ]
58
+ },
59
+ "omlet": {
60
+ "exports": {
61
+ ".": "src/index.ts"
62
+ }
63
+ },
64
+ "dependencies": {
65
+ "@laerdal-medical/life-design-tokens": "^1.2.0-beta",
66
+ "@laerdal/figma-svg": "^5.2.2",
67
+ "@types/node": "^18.0.6",
68
+ "animated-scroll-to": "^2.3.0",
69
+ "dayjs": "^1.11.5",
70
+ "nanoid": "3.3.11",
71
+ "react": "^19.0.0",
72
+ "react-datepicker": "^8.4.0",
73
+ "react-dom": "^19.0.0",
74
+ "react-inlinesvg": "^4.2.0",
75
+ "react-modal": "^3.16.0",
76
+ "react-quill": "^2.0.0",
77
+ "react-resize-detector": "^11.0.1",
78
+ "rooks": "^7.1.1",
79
+ "styled-components": "^6.1.13",
80
+ "typescript": "^5.1.2"
81
+ },
82
+ "devDependencies": {
83
+ "@babel/cli": "^7.22.0",
84
+ "@babel/plugin-proposal-class-properties": "^7.18.6",
85
+ "@babel/plugin-proposal-decorators": "^7.27.1",
86
+ "@babel/plugin-proposal-export-default-from": "^7.22.0",
87
+ "@babel/plugin-proposal-numeric-separator": "^7.18.6",
88
+ "@babel/plugin-proposal-object-rest-spread": "^7.18.6",
89
+ "@babel/plugin-transform-runtime": "^7.22.0",
90
+ "@babel/preset-env": "^7.22.0",
91
+ "@babel/preset-react": "^7.22.0",
92
+ "@babel/preset-typescript": "^7.27.0",
93
+ "@babel/runtime": "^7.22.0",
94
+ "@chromatic-com/storybook": "1.4.0",
95
+ "@laerdal/navigation": "^3.2.0",
96
+ "@storybook/addon-essentials": "^8.1.3",
97
+ "@storybook/addon-interactions": "^8.1.3",
98
+ "@storybook/addon-links": "^8.1.3",
99
+ "@storybook/addon-onboarding": "^8.1.3",
100
+ "@storybook/addon-webpack5-compiler-swc": "1.0.2",
101
+ "@storybook/addons": "^7.6.17",
102
+ "@storybook/blocks": "^8.1.3",
103
+ "@storybook/react": "^8.1.3",
104
+ "@storybook/react-webpack5": "^8.1.3",
105
+ "@storybook/test": "^8.1.3",
106
+ "@testing-library/dom": "^10.4.0",
107
+ "@testing-library/jest-dom": "^6.5.0",
108
+ "@testing-library/react": "^16.0.1",
109
+ "@testing-library/user-event": "^14.5.2",
110
+ "@types/jest": "^29.5.12",
111
+ "@types/react": "^19.1.2",
112
+ "@types/react-datepicker": "^4.4.2",
113
+ "@types/react-dom": "^18.3.0",
114
+ "@types/react-modal": "^3.13.1",
115
+ "babel-plugin-inline-react-svg": "^2.0.1",
116
+ "babel-plugin-typescript-to-proptypes": "^2.0.0",
117
+ "concurrently": "^5.2.0",
118
+ "cross-env": "^7.0.3",
119
+ "css-loader": "^7.1.2",
120
+ "eslint-plugin-storybook": "^0.8.0",
121
+ "history": "^5.3.0",
122
+ "jest": "^29.7.0",
123
+ "jest-environment-jsdom": "^29.7.0",
124
+ "jest-styled-components": "^7.2.0",
125
+ "jest-svg-transformer": "^1.0.0",
126
+ "react-router": "^6.0.0",
127
+ "react-share": "^5.1.0",
128
+ "regenerator-runtime": "^0.13.9",
129
+ "storybook": "^8.1.3",
130
+ "storybook-addon-themes": "^6.1.0",
131
+ "style-loader": "^4.0.0",
132
+ "ts-jest": "^29.2.5",
133
+ "webpack": "^5.99.9",
134
+ "webpack-cli": "^6.0.1",
135
+ "webpack-dev-server": "^5.2.1"
136
+ },
137
+ "peerDependencies": {
138
+ "@babel/core": "^7.0.0",
139
+ "react": "^19",
140
+ "react-dom": "^19"
141
+ },
142
+ "resolutions": {
143
+ "nwsapi": "2.2.9",
144
+ "date-fns": "2.24.0",
145
+ "@types/react": "19.1.2"
146
+ }
150
147
  }