@terraware/web-components 3.9.11 → 3.9.12

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 (28) hide show
  1. package/components/AntSwitch/styles.scss +3 -3
  2. package/components/Autocomplete/styles.scss +52 -52
  3. package/components/Button/styles.scss +141 -141
  4. package/components/DatePicker/styles.scss +31 -31
  5. package/components/DialogBox/styles.scss +35 -35
  6. package/components/EditableTable/index.d.ts +86 -0
  7. package/components/EditableTable/index.d.ts.map +1 -0
  8. package/components/EditableTable/index.js +179 -0
  9. package/components/ErrorBox/styles.scss +16 -16
  10. package/components/Icon/styles.scss +9 -9
  11. package/components/Map/styles.scss +20 -20
  12. package/components/Markdown/styles.scss +37 -37
  13. package/components/Message/styles.scss +63 -63
  14. package/components/MultiSelect/styles.scss +66 -66
  15. package/components/Navbar/styles.scss +39 -39
  16. package/components/Pill/styles.scss +10 -10
  17. package/components/PillList/styles.scss +2 -2
  18. package/components/PopoverMultiSelect/styles.scss +4 -4
  19. package/components/ProgressCircle/styles.scss +24 -24
  20. package/components/Select/styles.scss +107 -107
  21. package/components/Textfield/styles.scss +108 -108
  22. package/components/TimelineSlider/styles.scss +18 -18
  23. package/components/ViewPhotosDialog/styles.scss +3 -3
  24. package/license-report.html +1 -1
  25. package/package.json +2 -1
  26. package/stories/EditableTable.stories.d.ts +14 -0
  27. package/stories/EditableTable.stories.d.ts.map +1 -0
  28. package/style-dictionary-dist/terraware.scss +2 -1
package/components/Navbar/styles.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '../../style-dictionary-dist/terraware.scss';
1
+ @use '../../style-dictionary-dist/terraware.scss';
2
2
 
3
3
  @font-face {
4
4
  font-family: 'Inter';
@@ -9,12 +9,12 @@
9
9
  height: 100%;
10
10
  position: fixed;
11
11
  z-index: 1101;
12
- width: $tw-sz-nvgtn-side-nav-width;
12
+ width: terraware.$tw-sz-nvgtn-side-nav-width;
13
13
  display: flex;
14
14
  flex-direction: column;
15
- padding-left: $tw-sz-base-small;
16
- padding-right: $tw-sz-base-small;
17
- padding-top: $tw-sz-base-small;
15
+ padding-left: terraware.$tw-sz-base-small;
16
+ padding-right: terraware.$tw-sz-base-small;
17
+ padding-top: terraware.$tw-sz-base-small;
18
18
 
19
19
  &.transparent {
20
20
  background-color: transparent !important;
@@ -23,20 +23,20 @@
23
23
  }
24
24
 
25
25
  .nav-section {
26
- padding: $tw-spc-base-x-small $tw-spc-base-small;
26
+ padding: terraware.$tw-spc-base-x-small terraware.$tw-spc-base-small;
27
27
  .divider {
28
- border-top: 1px solid $tw-clr-brdr-tertiary;
28
+ border-top: 1px solid terraware.$tw-clr-brdr-tertiary;
29
29
  }
30
30
 
31
31
  &--title {
32
- font-family: $tw-fnt-nvgtn-side-nav-section-title-font-family;
33
- font-size: $tw-fnt-nvgtn-side-nav-section-title-font-size;
34
- font-weight: $tw-fnt-nvgtn-side-nav-section-title-font-weight;
35
- line-height: $tw-fnt-nvgtn-side-nav-section-title-line-height;
36
- text-transform: $tw-fnt-nvgtn-side-nav-section-title-text-transform;
37
- color: $tw-clr-txt;
32
+ font-family: terraware.$tw-fnt-nvgtn-side-nav-section-title-font-family;
33
+ font-size: terraware.$tw-fnt-nvgtn-side-nav-section-title-font-size;
34
+ font-weight: terraware.$tw-fnt-nvgtn-side-nav-section-title-font-weight;
35
+ line-height: terraware.$tw-fnt-nvgtn-side-nav-section-title-line-height;
36
+ text-transform: terraware.$tw-fnt-nvgtn-side-nav-section-title-text-transform;
37
+ color: terraware.$tw-clr-txt;
38
38
  display: block;
39
- margin-top: $tw-spc-base-small;
39
+ margin-top: terraware.$tw-spc-base-small;
40
40
 
41
41
  &.no-separator {
42
42
  margin-top: 0;
@@ -50,11 +50,11 @@
50
50
  }
51
51
 
52
52
  .nav-item {
53
- font-family: $tw-fnt-nvgtn-side-nav-item-label-font-family;
54
- font-size: $tw-fnt-nvgtn-side-nav-item-label-font-size;
55
- font-weight: $tw-fnt-nvgtn-side-nav-item-label-font-weight;
56
- line-height: $tw-fnt-nvgtn-side-nav-item-label-line-height;
57
- color: $tw-clr-txt;
53
+ font-family: terraware.$tw-fnt-nvgtn-side-nav-item-label-font-family;
54
+ font-size: terraware.$tw-fnt-nvgtn-side-nav-item-label-font-size;
55
+ font-weight: terraware.$tw-fnt-nvgtn-side-nav-item-label-font-weight;
56
+ line-height: terraware.$tw-fnt-nvgtn-side-nav-item-label-line-height;
57
+ color: terraware.$tw-clr-txt;
58
58
  border-radius: 16px;
59
59
  mix-blend-mode: multiply;
60
60
 
@@ -67,11 +67,11 @@
67
67
  padding: 12px 16px;
68
68
  display: flex;
69
69
  width: 100%;
70
- font-weight: $tw-fnt-nvgtn-side-nav-item-label-font-weight;
70
+ font-weight: terraware.$tw-fnt-nvgtn-side-nav-item-label-font-weight;
71
71
 
72
72
  .nav-item--anchor {
73
73
  text-decoration: none;
74
- color: $tw-clr-txt;
74
+ color: terraware.$tw-clr-txt;
75
75
  }
76
76
 
77
77
  .nav-item--label {
@@ -88,10 +88,10 @@
88
88
 
89
89
  &--has-children {
90
90
  > .nav-item-content:hover {
91
- background-color: $tw-clr-bg-ghost-hover;
91
+ background-color: terraware.$tw-clr-bg-ghost-hover;
92
92
  }
93
93
  > .nav-item-content:active {
94
- background-color: $tw-clr-bg-ghost-active;
94
+ background-color: terraware.$tw-clr-bg-ghost-active;
95
95
  }
96
96
  &.nav-item--children-selected > .nav-item-content:hover {
97
97
  background-color: transparent;
@@ -103,47 +103,47 @@
103
103
 
104
104
  &:not(.nav-item--has-children) {
105
105
  &:hover {
106
- background-color: $tw-clr-bg-ghost-hover;
106
+ background-color: terraware.$tw-clr-bg-ghost-hover;
107
107
  }
108
108
  &.nav-item--selected,
109
109
  &.nav-item--selected:hover {
110
- background-color: $tw-clr-bg-ghost-active;
110
+ background-color: terraware.$tw-clr-bg-ghost-active;
111
111
  }
112
112
  }
113
113
 
114
114
  button {
115
115
  background: none;
116
116
  border: none;
117
- color: $tw-clr-txt;
117
+ color: terraware.$tw-clr-txt;
118
118
  font-family: 'Inter';
119
- padding-right: $tw-spc-base-small;
119
+ padding-right: terraware.$tw-spc-base-small;
120
120
  padding-left: 16px;
121
121
  }
122
122
 
123
123
  &--icon {
124
- margin-right: $tw-spc-base-x-small;
125
- line-height: $tw-sz-icon-small;
126
- height: $tw-sz-icon-small;
127
- min-width: $tw-sz-icon-small;
128
- width: $tw-sz-icon-small;
124
+ margin-right: terraware.$tw-spc-base-x-small;
125
+ line-height: terraware.$tw-sz-icon-small;
126
+ height: terraware.$tw-sz-icon-small;
127
+ min-width: terraware.$tw-sz-icon-small;
128
+ width: terraware.$tw-sz-icon-small;
129
129
  }
130
130
 
131
131
  &--arrow {
132
- height: $tw-sz-icon-small;
133
- width: $tw-sz-icon-small;
134
- margin-left: $tw-spc-base-x-small;
132
+ height: terraware.$tw-sz-icon-small;
133
+ width: terraware.$tw-sz-icon-small;
134
+ margin-left: terraware.$tw-spc-base-x-small;
135
135
 
136
136
  path {
137
- fill: $tw-clr-icn-secondary;
137
+ fill: terraware.$tw-clr-icn-secondary;
138
138
  }
139
139
  }
140
140
 
141
141
  .subnavbar .nav-item {
142
- padding-left: $tw-spc-base-small;
143
- padding-right: $tw-spc-base-small;
142
+ padding-left: terraware.$tw-spc-base-small;
143
+ padding-right: terraware.$tw-spc-base-small;
144
144
 
145
145
  &-content {
146
- padding-left: $tw-spc-base-medium;
146
+ padding-left: terraware.$tw-spc-base-medium;
147
147
  }
148
148
  }
149
149
  }
package/components/Pill/styles.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '../../style-dictionary-dist/terraware.scss';
1
+ @use '../../style-dictionary-dist/terraware.scss';
2
2
 
3
3
  @font-face {
4
4
  font-family: 'Inter';
@@ -6,24 +6,24 @@
6
6
  }
7
7
 
8
8
  .pill {
9
- font-family: $tw-fnt-base-font-family;
10
- background: $tw-clr-bg-tertiary;
11
- padding: $tw-spc-base-xx-small $tw-spc-base-xx-small $tw-spc-base-xx-small 12px;
9
+ font-family: terraware.$tw-fnt-base-font-family;
10
+ background: terraware.$tw-clr-bg-tertiary;
11
+ padding: terraware.$tw-spc-base-xx-small terraware.$tw-spc-base-xx-small terraware.$tw-spc-base-xx-small 12px;
12
12
  display: flex;
13
13
  border-radius: 13px;
14
14
  align-items: center;
15
15
 
16
16
  .label {
17
17
  font-size: 12px;
18
- color: $tw-clr-txt;
18
+ color: terraware.$tw-clr-txt;
19
19
  font-weight: 400;
20
20
  margin: 0;
21
21
  }
22
22
 
23
23
  .value {
24
- padding-left: $tw-spc-base-xx-small;
24
+ padding-left: terraware.$tw-spc-base-xx-small;
25
25
  font-size: 12px;
26
- color: $tw-clr-txt;
26
+ color: terraware.$tw-clr-txt;
27
27
  font-weight: 600;
28
28
  margin: 0;
29
29
 
@@ -33,10 +33,10 @@
33
33
  }
34
34
 
35
35
  .icon {
36
- fill: $tw-clr-icn;
36
+ fill: terraware.$tw-clr-icn;
37
37
  width: 12px;
38
38
  height: 12px;
39
- margin: 0 $tw-spc-base-xx-small;
39
+ margin: 0 terraware.$tw-spc-base-xx-small;
40
40
  }
41
41
 
42
42
  .iconContainer {
@@ -44,7 +44,7 @@
44
44
  }
45
45
 
46
46
  .spacer {
47
- width: $tw-spc-base-x-small;
47
+ width: terraware.$tw-spc-base-x-small;
48
48
  height: 12px;
49
49
  }
50
50
  }
package/components/PillList/styles.scss CHANGED
@@ -1,4 +1,4 @@
1
- @import '../../style-dictionary-dist/terraware.scss';
1
+ @use '../../style-dictionary-dist/terraware.scss';
2
2
 
3
3
  @font-face {
4
4
  font-family: 'Inter';
@@ -8,5 +8,5 @@
8
8
  .pill-list {
9
9
  display: flex;
10
10
  flex-wrap: wrap;
11
- gap: $tw-spc-base-x-small;
11
+ gap: terraware.$tw-spc-base-x-small;
12
12
  }
package/components/PopoverMultiSelect/styles.scss CHANGED
@@ -1,10 +1,10 @@
1
- @import '../../style-dictionary-dist/terraware';
1
+ @use '../../style-dictionary-dist/terraware';
2
2
 
3
3
  .popover-multi-select__checkmark-selection {
4
- margin-right: $tw-spc-base-x-small;
4
+ margin-right: terraware.$tw-spc-base-x-small;
5
5
  }
6
6
 
7
7
  .popover-multi-select__checkmark-spacer {
8
- width: calc($tw-spc-base-x-small + $tw-sz-icon-small);
9
- height: $tw-sz-icon-small;
8
+ width: calc(terraware.$tw-spc-base-x-small + terraware.$tw-sz-icon-small);
9
+ height: terraware.$tw-sz-icon-small;
10
10
  }
package/components/ProgressCircle/styles.scss CHANGED
@@ -1,11 +1,11 @@
1
- @import '../../style-dictionary-dist/terraware.scss';
1
+ @use '../../style-dictionary-dist/terraware.scss';
2
2
 
3
3
  .circle-container {
4
4
  position: relative;
5
5
  display: inline-flex;
6
6
 
7
7
  & .MuiCircularProgress-root {
8
- color: $tw-clr-bg-brand;
8
+ color: terraware.$tw-clr-bg-brand;
9
9
  }
10
10
  }
11
11
 
@@ -15,10 +15,10 @@
15
15
  }
16
16
 
17
17
  .circle-track {
18
- color: $tw-clr-bg-brand-tertiary !important;
18
+ color: terraware.$tw-clr-bg-brand-tertiary !important;
19
19
  &--small {
20
- width: $tw-spc-base-x-large !important;
21
- height: $tw-spc-base-x-large !important;
20
+ width: terraware.$tw-spc-base-x-large !important;
21
+ height: terraware.$tw-spc-base-x-large !important;
22
22
 
23
23
  & svg {
24
24
  & circle {
@@ -29,8 +29,8 @@
29
29
  }
30
30
 
31
31
  &--medium {
32
- width: calc(#{$tw-spc-base-x-large} * 2) !important;
33
- height: calc(#{$tw-spc-base-x-large} * 2) !important;
32
+ width: calc(#{terraware.$tw-spc-base-x-large} * 2) !important;
33
+ height: calc(#{terraware.$tw-spc-base-x-large} * 2) !important;
34
34
  & svg {
35
35
  & circle {
36
36
  stroke-width: 3.67;
@@ -40,8 +40,8 @@
40
40
  }
41
41
 
42
42
  &--large {
43
- width: calc(#{$tw-spc-base-x-large} * 4) !important;
44
- height: calc(#{$tw-spc-base-x-large} * 4) !important;
43
+ width: calc(#{terraware.$tw-spc-base-x-large} * 4) !important;
44
+ height: calc(#{terraware.$tw-spc-base-x-large} * 4) !important;
45
45
  & svg {
46
46
  & circle {
47
47
  stroke-width: 3.67;
@@ -64,24 +64,24 @@
64
64
 
65
65
  .progress-circle-label {
66
66
  &--small {
67
- font-family: $tw-fnt-prgrss-circle-value-small-font-family;
68
- font-size: $tw-fnt-prgrss-circle-value-small-font-size;
69
- font-weight: $tw-fnt-prgrss-circle-value-small-font-weight;
70
- line-height: $tw-fnt-prgrss-circle-value-small-line-height;
71
- color: $tw-clr-txt;
67
+ font-family: terraware.$tw-fnt-prgrss-circle-value-small-font-family;
68
+ font-size: terraware.$tw-fnt-prgrss-circle-value-small-font-size;
69
+ font-weight: terraware.$tw-fnt-prgrss-circle-value-small-font-weight;
70
+ line-height: terraware.$tw-fnt-prgrss-circle-value-small-line-height;
71
+ color: terraware.$tw-clr-txt;
72
72
  }
73
73
  &--medium {
74
- font-family: $tw-fnt-prgrss-circle-value-medium-font-family;
75
- font-size: $tw-fnt-prgrss-circle-value-medium-font-size;
76
- font-weight: $tw-fnt-prgrss-circle-value-medium-font-weight;
77
- line-height: $tw-fnt-prgrss-circle-value-medium-line-height;
78
- color: $tw-clr-txt;
74
+ font-family: terraware.$tw-fnt-prgrss-circle-value-medium-font-family;
75
+ font-size: terraware.$tw-fnt-prgrss-circle-value-medium-font-size;
76
+ font-weight: terraware.$tw-fnt-prgrss-circle-value-medium-font-weight;
77
+ line-height: terraware.$tw-fnt-prgrss-circle-value-medium-line-height;
78
+ color: terraware.$tw-clr-txt;
79
79
  }
80
80
  &--large {
81
- font-family: $tw-fnt-prgrss-circle-value-large-font-family;
82
- font-size: $tw-fnt-prgrss-circle-value-large-font-size;
83
- font-weight: $tw-fnt-prgrss-circle-value-large-font-weight;
84
- line-height: $tw-fnt-prgrss-circle-value-large-line-height;
85
- color: $tw-clr-txt;
81
+ font-family: terraware.$tw-fnt-prgrss-circle-value-large-font-family;
82
+ font-size: terraware.$tw-fnt-prgrss-circle-value-large-font-size;
83
+ font-weight: terraware.$tw-fnt-prgrss-circle-value-large-font-weight;
84
+ line-height: terraware.$tw-fnt-prgrss-circle-value-large-line-height;
85
+ color: terraware.$tw-clr-txt;
86
86
  }
87
87
  }