@hopper-ui/components 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/IconList/src/IconList.css +3 -3
  3. package/dist/IconList/src/IconList.js +1 -1
  4. package/dist/IconList/src/index.css +3 -3
  5. package/dist/IconList/src/index.js +1 -1
  6. package/dist/Label/src/Label.css +69 -69
  7. package/dist/Label/src/Label.js +2 -2
  8. package/dist/Label/src/index.css +69 -69
  9. package/dist/Label/src/index.js +2 -2
  10. package/dist/Spinner/src/Spinner.css +116 -116
  11. package/dist/Spinner/src/Spinner.js +4 -4
  12. package/dist/Spinner/src/index.css +116 -116
  13. package/dist/Spinner/src/index.js +4 -4
  14. package/dist/Text/src/Text.css +65 -65
  15. package/dist/Text/src/Text.js +2 -2
  16. package/dist/Text/src/index.css +65 -65
  17. package/dist/Text/src/index.js +2 -2
  18. package/dist/buttons/src/Button.css +374 -374
  19. package/dist/buttons/src/Button.js +7 -7
  20. package/dist/buttons/src/index.css +374 -374
  21. package/dist/buttons/src/index.js +7 -7
  22. package/dist/{chunk-SEU4CGZD.js → chunk-65JPI4FL.js} +1 -1
  23. package/dist/{chunk-XQ3GUEBN.js → chunk-A2IN7HC4.js} +1 -1
  24. package/dist/{chunk-XCKF6EU7.js → chunk-CMJUZLSA.js} +2 -2
  25. package/dist/{chunk-QIOYM2XJ.js → chunk-JGYEQS4H.js} +7 -7
  26. package/dist/{chunk-6BEVZRUL.js → chunk-KVDXQMWI.js} +1 -1
  27. package/dist/{chunk-WRWNRVTG.js → chunk-TNWWLZEQ.js} +2 -2
  28. package/dist/{chunk-WROQHGG5.js → chunk-Z34Z6LYX.js} +12 -12
  29. package/dist/{chunk-7QUHQYCR.js → chunk-ZWU6DRRZ.js} +1 -1
  30. package/dist/utils/src/composeClassnameRenderProps.js +1 -0
  31. package/dist/utils/src/cssModule.js +1 -0
  32. package/dist/utils/src/index.d.ts +4 -4
  33. package/dist/utils/src/index.js +4 -4
  34. package/dist/utils/src/isTextOnlyChildren.js +1 -0
  35. package/dist/utils/src/sizeAdapter.js +1 -0
  36. package/package.json +2 -2
  37. package/dist/utils/src/compose-classname-render-props.js +0 -1
  38. package/dist/utils/src/css-module.js +0 -1
  39. package/dist/utils/src/is-text-only-children.js +0 -1
  40. package/dist/utils/src/size-adapter.js +0 -1
  41. /package/dist/{chunk-D57ZIX5W.js → chunk-LQICWONC.js} +0 -0
  42. /package/dist/utils/src/{compose-classname-render-props.d.ts → composeClassnameRenderProps.d.ts} +0 -0
  43. /package/dist/utils/src/{css-module.d.ts → cssModule.d.ts} +0 -0
  44. /package/dist/utils/src/{is-text-only-children.d.ts → isTextOnlyChildren.d.ts} +0 -0
  45. /package/dist/utils/src/{size-adapter.d.ts → sizeAdapter.d.ts} +0 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @hopper-ui/components
2
2
 
3
+ ## 0.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [bdc3e10]
8
+ - @hopper-ui/icons@1.6.0
9
+
3
10
  ## 0.1.0
4
11
 
5
12
  ### Minor Changes
package/dist/IconList/src/IconList.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /* src/IconList/src/IconList.module.css */
2
- .hop-iconList {
3
- --hop-icon-list-component-gap: var(--hop-space-inline-xs);
2
+ .hop-IconList {
3
+ --hop-IconList-gap: var(--hop-space-inline-xs);
4
4
  box-sizing: border-box;
5
5
  display: flex;
6
6
  flex-flow: wrap;
7
- gap: var(--hop-icon-list-component-gap);
7
+ gap: var(--hop-IconList-gap);
8
8
  }
package/dist/IconList/src/IconList.js CHANGED
@@ -1,3 +1,3 @@
1
- export { GlobalIconListCssSelector, _IconList as IconList } from '../../chunk-XQ3GUEBN.js';
1
+ export { GlobalIconListCssSelector, _IconList as IconList } from '../../chunk-A2IN7HC4.js';
2
2
  import '../../chunk-M36KANKC.js';
3
3
  import '../../chunk-DHVVYSLB.js';
package/dist/IconList/src/index.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /* src/IconList/src/IconList.module.css */
2
- .hop-iconList {
3
- --hop-icon-list-component-gap: var(--hop-space-inline-xs);
2
+ .hop-IconList {
3
+ --hop-IconList-gap: var(--hop-space-inline-xs);
4
4
  box-sizing: border-box;
5
5
  display: flex;
6
6
  flex-flow: wrap;
7
- gap: var(--hop-icon-list-component-gap);
7
+ gap: var(--hop-IconList-gap);
8
8
  }
package/dist/IconList/src/index.js CHANGED
@@ -1,3 +1,3 @@
1
- export { GlobalIconListCssSelector, _IconList as IconList } from '../../chunk-XQ3GUEBN.js';
1
+ export { GlobalIconListCssSelector, _IconList as IconList } from '../../chunk-A2IN7HC4.js';
2
2
  import '../../chunk-M36KANKC.js';
3
3
  export { IconListContext } from '../../chunk-DHVVYSLB.js';
package/dist/Label/src/Label.css CHANGED
@@ -1,79 +1,79 @@
1
1
  /* src/Label/src/Label.module.css */
2
- .hop-label {
3
- --hop-label-component-xs-font-size: var(--hop-body-xs-font-size);
4
- --hop-label-component-xs-font-family: var(--hop-body-xs-font-family);
5
- --hop-label-component-xs-font-weight: var(--hop-body-xs-font-weight);
6
- --hop-label-component-xs-line-height: var(--hop-body-xs-line-height);
7
- --hop-label-component-sm-font-size: var(--hop-body-sm-font-size);
8
- --hop-label-component-sm-font-family: var(--hop-body-sm-font-family);
9
- --hop-label-component-sm-font-weight: var(--hop-body-sm-font-weight);
10
- --hop-label-component-sm-line-height: var(--hop-body-sm-line-height);
11
- --hop-label-component-md-font-size: var(--hop-body-md-font-size);
12
- --hop-label-component-md-font-family: var(--hop-body-md-font-family);
13
- --hop-label-component-md-font-weight: var(--hop-body-md-font-weight);
14
- --hop-label-component-md-line-height: var(--hop-body-md-line-height);
15
- --hop-label-component-lg-font-size: var(--hop-body-lg-font-size);
16
- --hop-label-component-lg-font-family: var(--hop-body-lg-font-family);
17
- --hop-label-component-lg-font-weight: var(--hop-body-lg-font-weight);
18
- --hop-label-component-lg-line-height: var(--hop-body-lg-line-height);
19
- --hop-label-component-xl-font-size: var(--hop-body-xl-font-size);
20
- --hop-label-component-xl-font-family: var(--hop-body-xl-font-family);
21
- --hop-label-component-xl-font-weight: var(--hop-body-xl-font-weight);
22
- --hop-label-component-xl-line-height: var(--hop-body-xl-line-height);
23
- --hop-label-component-2xl-font-size: var(--hop-body-2xl-font-size);
24
- --hop-label-component-2xl-font-family: var(--hop-body-2xl-font-family);
25
- --hop-label-component-2xl-font-weight: var(--hop-body-2xl-font-weight);
26
- --hop-label-component-2xl-line-height: var(--hop-body-2xl-line-height);
27
- --hop-label-component-inherit-size-font-size: inherit;
28
- --hop-label-component-inherit-size-font-family: inherit;
29
- --hop-label-component-inherit-size-font-weight: inherit;
30
- --hop-label-component-inherit-size-line-height: inherit;
2
+ .hop-Label {
3
+ --hop-Label-xs-font-size: var(--hop-body-xs-font-size);
4
+ --hop-Label-xs-font-family: var(--hop-body-xs-font-family);
5
+ --hop-Label-xs-font-weight: var(--hop-body-xs-font-weight);
6
+ --hop-Label-xs-line-height: var(--hop-body-xs-line-height);
7
+ --hop-Label-sm-font-size: var(--hop-body-sm-font-size);
8
+ --hop-Label-sm-font-family: var(--hop-body-sm-font-family);
9
+ --hop-Label-sm-font-weight: var(--hop-body-sm-font-weight);
10
+ --hop-Label-sm-line-height: var(--hop-body-sm-line-height);
11
+ --hop-Label-md-font-size: var(--hop-body-md-font-size);
12
+ --hop-Label-md-font-family: var(--hop-body-md-font-family);
13
+ --hop-Label-md-font-weight: var(--hop-body-md-font-weight);
14
+ --hop-Label-md-line-height: var(--hop-body-md-line-height);
15
+ --hop-Label-lg-font-size: var(--hop-body-lg-font-size);
16
+ --hop-Label-lg-font-family: var(--hop-body-lg-font-family);
17
+ --hop-Label-lg-font-weight: var(--hop-body-lg-font-weight);
18
+ --hop-Label-lg-line-height: var(--hop-body-lg-line-height);
19
+ --hop-Label-xl-font-size: var(--hop-body-xl-font-size);
20
+ --hop-Label-xl-font-family: var(--hop-body-xl-font-family);
21
+ --hop-Label-xl-font-weight: var(--hop-body-xl-font-weight);
22
+ --hop-Label-xl-line-height: var(--hop-body-xl-line-height);
23
+ --hop-Label-2xl-font-size: var(--hop-body-2xl-font-size);
24
+ --hop-Label-2xl-font-family: var(--hop-body-2xl-font-family);
25
+ --hop-Label-2xl-font-weight: var(--hop-body-2xl-font-weight);
26
+ --hop-Label-2xl-line-height: var(--hop-body-2xl-line-height);
27
+ --hop-Label-inherit-size-font-size: inherit;
28
+ --hop-Label-inherit-size-font-family: inherit;
29
+ --hop-Label-inherit-size-font-weight: inherit;
30
+ --hop-Label-inherit-size-line-height: inherit;
31
31
  }
32
- :where(.hop-label) {
33
- font-size: var(--font-size, --hop-label-component-md-font-size);
34
- font-family: var(--font-family, --hop-label-component-md-font-family);
35
- font-weight: var(--font-weight, --hop-label-component-md-font-weight);
36
- line-height: var(--line-height, --hop-label-component-md-line-height);
32
+ :where(.hop-Label) {
33
+ font-size: var(--font-size, --hop-Label-md-font-size);
34
+ font-family: var(--font-family, --hop-Label-md-font-family);
35
+ font-weight: var(--font-weight, --hop-Label-md-font-weight);
36
+ line-height: var(--line-height, --hop-Label-md-line-height);
37
37
  }
38
- :where(.hop-label--xs) {
39
- --font-size: var(--hop-label-component-xs-font-size);
40
- --font-family: var(--hop-label-component-xs-font-family);
41
- --font-weight: var(--hop-label-component-xs-font-weight);
42
- --line-height: var(--hop-label-component-xs-line-height);
38
+ :where(.hop-Label--xs) {
39
+ --font-size: var(--hop-Label-xs-font-size);
40
+ --font-family: var(--hop-Label-xs-font-family);
41
+ --font-weight: var(--hop-Label-xs-font-weight);
42
+ --line-height: var(--hop-Label-xs-line-height);
43
43
  }
44
- :where(.hop-label--sm) {
45
- --font-size: var(--hop-label-component-sm-font-size);
46
- --font-family: var(--hop-label-component-sm-font-family);
47
- --font-weight: var(--hop-label-component-sm-font-weight);
48
- --line-height: var(--hop-label-component-sm-line-height);
44
+ :where(.hop-Label--sm) {
45
+ --font-size: var(--hop-Label-sm-font-size);
46
+ --font-family: var(--hop-Label-sm-font-family);
47
+ --font-weight: var(--hop-Label-sm-font-weight);
48
+ --line-height: var(--hop-Label-sm-line-height);
49
49
  }
50
- :where(.hop-label--md) {
51
- --font-size: var(--hop-label-component-md-font-size);
52
- --font-family: var(--hop-label-component-md-font-family);
53
- --font-weight: var(--hop-label-component-md-font-weight);
54
- --line-height: var(--hop-label-component-md-line-height);
50
+ :where(.hop-Label--md) {
51
+ --font-size: var(--hop-Label-md-font-size);
52
+ --font-family: var(--hop-Label-md-font-family);
53
+ --font-weight: var(--hop-Label-md-font-weight);
54
+ --line-height: var(--hop-Label-md-line-height);
55
55
  }
56
- :where(.hop-label--lg) {
57
- --font-size: var(--hop-label-component-lg-font-size);
58
- --font-family: var(--hop-label-component-lg-font-family);
59
- --font-weight: var(--hop-label-component-lg-font-weight);
60
- --line-height: var(--hop-label-component-lg-line-height);
56
+ :where(.hop-Label--lg) {
57
+ --font-size: var(--hop-Label-lg-font-size);
58
+ --font-family: var(--hop-Label-lg-font-family);
59
+ --font-weight: var(--hop-Label-lg-font-weight);
60
+ --line-height: var(--hop-Label-lg-line-height);
61
61
  }
62
- :where(.hop-label--xl) {
63
- --font-size: var(--hop-label-component-xl-font-size);
64
- --font-family: var(--hop-label-component-xl-font-family);
65
- --font-weight: var(--hop-label-component-xl-font-weight);
66
- --line-height: var(--hop-label-component-xl-line-height);
62
+ :where(.hop-Label--xl) {
63
+ --font-size: var(--hop-Label-xl-font-size);
64
+ --font-family: var(--hop-Label-xl-font-family);
65
+ --font-weight: var(--hop-Label-xl-font-weight);
66
+ --line-height: var(--hop-Label-xl-line-height);
67
67
  }
68
- :where(.hop-label--2xl) {
69
- --font-size: var(--hop-label-component-2xl-font-size);
70
- --font-family: var(--hop-label-component-2xl-font-family);
71
- --font-weight: var(--hop-label-component-2xl-font-weight);
72
- --line-height: var(--hop-label-component-2xl-line-height);
68
+ :where(.hop-Label--2xl) {
69
+ --font-size: var(--hop-Label-2xl-font-size);
70
+ --font-family: var(--hop-Label-2xl-font-family);
71
+ --font-weight: var(--hop-Label-2xl-font-weight);
72
+ --line-height: var(--hop-Label-2xl-line-height);
73
73
  }
74
- :where(.hop-label--inherit) {
75
- --font-size: var(--hop-label-component-inherit-size-font-size);
76
- --font-family: var(--hop-label-component-inherit-size-font-family);
77
- --font-weight: var(--hop-label-component-inherit-size-font-weight);
78
- --line-height: var(--hop-label-component-inherit-size-line-height);
74
+ :where(.hop-Label--inherit) {
75
+ --font-size: var(--hop-Label-inherit-size-font-size);
76
+ --font-family: var(--hop-Label-inherit-size-font-family);
77
+ --font-weight: var(--hop-Label-inherit-size-font-weight);
78
+ --line-height: var(--hop-Label-inherit-size-line-height);
79
79
  }
package/dist/Label/src/Label.js CHANGED
@@ -1,3 +1,3 @@
1
- export { GlobalLabelCssSelector, _Label as Label } from '../../chunk-XCKF6EU7.js';
2
- import '../../chunk-6BEVZRUL.js';
1
+ export { GlobalLabelCssSelector, _Label as Label } from '../../chunk-CMJUZLSA.js';
2
+ import '../../chunk-KVDXQMWI.js';
3
3
  import '../../chunk-HVKOIMMW.js';
package/dist/Label/src/index.css CHANGED
@@ -1,79 +1,79 @@
1
1
  /* src/Label/src/Label.module.css */
2
- .hop-label {
3
- --hop-label-component-xs-font-size: var(--hop-body-xs-font-size);
4
- --hop-label-component-xs-font-family: var(--hop-body-xs-font-family);
5
- --hop-label-component-xs-font-weight: var(--hop-body-xs-font-weight);
6
- --hop-label-component-xs-line-height: var(--hop-body-xs-line-height);
7
- --hop-label-component-sm-font-size: var(--hop-body-sm-font-size);
8
- --hop-label-component-sm-font-family: var(--hop-body-sm-font-family);
9
- --hop-label-component-sm-font-weight: var(--hop-body-sm-font-weight);
10
- --hop-label-component-sm-line-height: var(--hop-body-sm-line-height);
11
- --hop-label-component-md-font-size: var(--hop-body-md-font-size);
12
- --hop-label-component-md-font-family: var(--hop-body-md-font-family);
13
- --hop-label-component-md-font-weight: var(--hop-body-md-font-weight);
14
- --hop-label-component-md-line-height: var(--hop-body-md-line-height);
15
- --hop-label-component-lg-font-size: var(--hop-body-lg-font-size);
16
- --hop-label-component-lg-font-family: var(--hop-body-lg-font-family);
17
- --hop-label-component-lg-font-weight: var(--hop-body-lg-font-weight);
18
- --hop-label-component-lg-line-height: var(--hop-body-lg-line-height);
19
- --hop-label-component-xl-font-size: var(--hop-body-xl-font-size);
20
- --hop-label-component-xl-font-family: var(--hop-body-xl-font-family);
21
- --hop-label-component-xl-font-weight: var(--hop-body-xl-font-weight);
22
- --hop-label-component-xl-line-height: var(--hop-body-xl-line-height);
23
- --hop-label-component-2xl-font-size: var(--hop-body-2xl-font-size);
24
- --hop-label-component-2xl-font-family: var(--hop-body-2xl-font-family);
25
- --hop-label-component-2xl-font-weight: var(--hop-body-2xl-font-weight);
26
- --hop-label-component-2xl-line-height: var(--hop-body-2xl-line-height);
27
- --hop-label-component-inherit-size-font-size: inherit;
28
- --hop-label-component-inherit-size-font-family: inherit;
29
- --hop-label-component-inherit-size-font-weight: inherit;
30
- --hop-label-component-inherit-size-line-height: inherit;
2
+ .hop-Label {
3
+ --hop-Label-xs-font-size: var(--hop-body-xs-font-size);
4
+ --hop-Label-xs-font-family: var(--hop-body-xs-font-family);
5
+ --hop-Label-xs-font-weight: var(--hop-body-xs-font-weight);
6
+ --hop-Label-xs-line-height: var(--hop-body-xs-line-height);
7
+ --hop-Label-sm-font-size: var(--hop-body-sm-font-size);
8
+ --hop-Label-sm-font-family: var(--hop-body-sm-font-family);
9
+ --hop-Label-sm-font-weight: var(--hop-body-sm-font-weight);
10
+ --hop-Label-sm-line-height: var(--hop-body-sm-line-height);
11
+ --hop-Label-md-font-size: var(--hop-body-md-font-size);
12
+ --hop-Label-md-font-family: var(--hop-body-md-font-family);
13
+ --hop-Label-md-font-weight: var(--hop-body-md-font-weight);
14
+ --hop-Label-md-line-height: var(--hop-body-md-line-height);
15
+ --hop-Label-lg-font-size: var(--hop-body-lg-font-size);
16
+ --hop-Label-lg-font-family: var(--hop-body-lg-font-family);
17
+ --hop-Label-lg-font-weight: var(--hop-body-lg-font-weight);
18
+ --hop-Label-lg-line-height: var(--hop-body-lg-line-height);
19
+ --hop-Label-xl-font-size: var(--hop-body-xl-font-size);
20
+ --hop-Label-xl-font-family: var(--hop-body-xl-font-family);
21
+ --hop-Label-xl-font-weight: var(--hop-body-xl-font-weight);
22
+ --hop-Label-xl-line-height: var(--hop-body-xl-line-height);
23
+ --hop-Label-2xl-font-size: var(--hop-body-2xl-font-size);
24
+ --hop-Label-2xl-font-family: var(--hop-body-2xl-font-family);
25
+ --hop-Label-2xl-font-weight: var(--hop-body-2xl-font-weight);
26
+ --hop-Label-2xl-line-height: var(--hop-body-2xl-line-height);
27
+ --hop-Label-inherit-size-font-size: inherit;
28
+ --hop-Label-inherit-size-font-family: inherit;
29
+ --hop-Label-inherit-size-font-weight: inherit;
30
+ --hop-Label-inherit-size-line-height: inherit;
31
31
  }
32
- :where(.hop-label) {
33
- font-size: var(--font-size, --hop-label-component-md-font-size);
34
- font-family: var(--font-family, --hop-label-component-md-font-family);
35
- font-weight: var(--font-weight, --hop-label-component-md-font-weight);
36
- line-height: var(--line-height, --hop-label-component-md-line-height);
32
+ :where(.hop-Label) {
33
+ font-size: var(--font-size, --hop-Label-md-font-size);
34
+ font-family: var(--font-family, --hop-Label-md-font-family);
35
+ font-weight: var(--font-weight, --hop-Label-md-font-weight);
36
+ line-height: var(--line-height, --hop-Label-md-line-height);
37
37
  }
38
- :where(.hop-label--xs) {
39
- --font-size: var(--hop-label-component-xs-font-size);
40
- --font-family: var(--hop-label-component-xs-font-family);
41
- --font-weight: var(--hop-label-component-xs-font-weight);
42
- --line-height: var(--hop-label-component-xs-line-height);
38
+ :where(.hop-Label--xs) {
39
+ --font-size: var(--hop-Label-xs-font-size);
40
+ --font-family: var(--hop-Label-xs-font-family);
41
+ --font-weight: var(--hop-Label-xs-font-weight);
42
+ --line-height: var(--hop-Label-xs-line-height);
43
43
  }
44
- :where(.hop-label--sm) {
45
- --font-size: var(--hop-label-component-sm-font-size);
46
- --font-family: var(--hop-label-component-sm-font-family);
47
- --font-weight: var(--hop-label-component-sm-font-weight);
48
- --line-height: var(--hop-label-component-sm-line-height);
44
+ :where(.hop-Label--sm) {
45
+ --font-size: var(--hop-Label-sm-font-size);
46
+ --font-family: var(--hop-Label-sm-font-family);
47
+ --font-weight: var(--hop-Label-sm-font-weight);
48
+ --line-height: var(--hop-Label-sm-line-height);
49
49
  }
50
- :where(.hop-label--md) {
51
- --font-size: var(--hop-label-component-md-font-size);
52
- --font-family: var(--hop-label-component-md-font-family);
53
- --font-weight: var(--hop-label-component-md-font-weight);
54
- --line-height: var(--hop-label-component-md-line-height);
50
+ :where(.hop-Label--md) {
51
+ --font-size: var(--hop-Label-md-font-size);
52
+ --font-family: var(--hop-Label-md-font-family);
53
+ --font-weight: var(--hop-Label-md-font-weight);
54
+ --line-height: var(--hop-Label-md-line-height);
55
55
  }
56
- :where(.hop-label--lg) {
57
- --font-size: var(--hop-label-component-lg-font-size);
58
- --font-family: var(--hop-label-component-lg-font-family);
59
- --font-weight: var(--hop-label-component-lg-font-weight);
60
- --line-height: var(--hop-label-component-lg-line-height);
56
+ :where(.hop-Label--lg) {
57
+ --font-size: var(--hop-Label-lg-font-size);
58
+ --font-family: var(--hop-Label-lg-font-family);
59
+ --font-weight: var(--hop-Label-lg-font-weight);
60
+ --line-height: var(--hop-Label-lg-line-height);
61
61
  }
62
- :where(.hop-label--xl) {
63
- --font-size: var(--hop-label-component-xl-font-size);
64
- --font-family: var(--hop-label-component-xl-font-family);
65
- --font-weight: var(--hop-label-component-xl-font-weight);
66
- --line-height: var(--hop-label-component-xl-line-height);
62
+ :where(.hop-Label--xl) {
63
+ --font-size: var(--hop-Label-xl-font-size);
64
+ --font-family: var(--hop-Label-xl-font-family);
65
+ --font-weight: var(--hop-Label-xl-font-weight);
66
+ --line-height: var(--hop-Label-xl-line-height);
67
67
  }
68
- :where(.hop-label--2xl) {
69
- --font-size: var(--hop-label-component-2xl-font-size);
70
- --font-family: var(--hop-label-component-2xl-font-family);
71
- --font-weight: var(--hop-label-component-2xl-font-weight);
72
- --line-height: var(--hop-label-component-2xl-line-height);
68
+ :where(.hop-Label--2xl) {
69
+ --font-size: var(--hop-Label-2xl-font-size);
70
+ --font-family: var(--hop-Label-2xl-font-family);
71
+ --font-weight: var(--hop-Label-2xl-font-weight);
72
+ --line-height: var(--hop-Label-2xl-line-height);
73
73
  }
74
- :where(.hop-label--inherit) {
75
- --font-size: var(--hop-label-component-inherit-size-font-size);
76
- --font-family: var(--hop-label-component-inherit-size-font-family);
77
- --font-weight: var(--hop-label-component-inherit-size-font-weight);
78
- --line-height: var(--hop-label-component-inherit-size-line-height);
74
+ :where(.hop-Label--inherit) {
75
+ --font-size: var(--hop-Label-inherit-size-font-size);
76
+ --font-family: var(--hop-Label-inherit-size-font-family);
77
+ --font-weight: var(--hop-Label-inherit-size-font-weight);
78
+ --line-height: var(--hop-Label-inherit-size-line-height);
79
79
  }
package/dist/Label/src/index.js CHANGED
@@ -1,3 +1,3 @@
1
- export { GlobalLabelCssSelector, _Label as Label } from '../../chunk-XCKF6EU7.js';
2
- import '../../chunk-6BEVZRUL.js';
1
+ export { GlobalLabelCssSelector, _Label as Label } from '../../chunk-CMJUZLSA.js';
2
+ import '../../chunk-KVDXQMWI.js';
3
3
  export { LabelContext } from '../../chunk-HVKOIMMW.js';
package/dist/Spinner/src/Spinner.css CHANGED
@@ -7,142 +7,142 @@
7
7
  transform: rotate(360deg);
8
8
  }
9
9
  }
10
- .hop-spinner {
11
- --hop-spinner-component-border-radius: var(--hop-shape-circle);
12
- --hop-spinner-component-sm-wheel-size: 1rem;
13
- --hop-spinner-component-md-wheel-size: 1.25rem;
14
- --hop-spinner-component-lg-wheel-size: 1.5rem;
15
- --hop-spinner-component-track-width: 0.125rem;
16
- --hop-spinner-component-track-opacity: 0.2;
17
- --hop-spinner-component-track-border: var(--hop-spinner-component-track-width) solid currentcolor;
18
- --hop-spinner-component-fill-animation: spin .8s infinite linear;
19
- --hop-spinner-component-fill-animation-reduced-motion-duration: 2s;
20
- --hop-spinner-component-fill-border: var(--hop-spinner-component-track-width) solid transparent;
21
- --hop-spinner-component-fill-border-inline-start: var(--hop-spinner-component-track-width) solid currentcolor;
22
- --hop-spinner-component-label-margin-inline-start: var(--hop-space-inline-sm);
10
+ .hop-Spinner {
11
+ --hop-Spinner-border-radius: var(--hop-shape-circle);
12
+ --hop-Spinner-sm-wheel-size: 1rem;
13
+ --hop-Spinner-md-wheel-size: 1.25rem;
14
+ --hop-Spinner-lg-wheel-size: 1.5rem;
15
+ --hop-Spinner-track-width: 0.125rem;
16
+ --hop-Spinner-track-opacity: 0.2;
17
+ --hop-Spinner-track-border: var(--hop-Spinner-track-width) solid currentcolor;
18
+ --hop-Spinner-fill-animation: spin .8s infinite linear;
19
+ --hop-Spinner-fill-animation-reduced-motion-duration: 2s;
20
+ --hop-Spinner-fill-border: var(--hop-Spinner-track-width) solid transparent;
21
+ --hop-Spinner-fill-border-inline-start: var(--hop-Spinner-track-width) solid currentcolor;
22
+ --hop-Spinner-label-margin-inline-start: var(--hop-space-inline-sm);
23
23
  box-sizing: border-box;
24
24
  display: grid;
25
25
  grid-template-areas: "spinner label";
26
26
  grid-template-columns: min-content auto;
27
27
  align-items: center;
28
28
  }
29
- .hop-spinner--sm {
30
- --width: var(--hop-spinner-component-sm-wheel-size);
31
- --height: var(--hop-spinner-component-sm-wheel-size);
29
+ .hop-Spinner--sm {
30
+ --width: var(--hop-Spinner-sm-wheel-size);
31
+ --height: var(--hop-Spinner-sm-wheel-size);
32
32
  }
33
- .hop-spinner--md {
34
- --width: var(--hop-spinner-component-md-wheel-size);
35
- --height: var(--hop-spinner-component-md-wheel-size);
33
+ .hop-Spinner--md {
34
+ --width: var(--hop-Spinner-md-wheel-size);
35
+ --height: var(--hop-Spinner-md-wheel-size);
36
36
  }
37
- .hop-spinner--lg {
38
- --width: var(--hop-spinner-component-lg-wheel-size);
39
- --height: var(--hop-spinner-component-lg-wheel-size);
37
+ .hop-Spinner--lg {
38
+ --width: var(--hop-Spinner-lg-wheel-size);
39
+ --height: var(--hop-Spinner-lg-wheel-size);
40
40
  }
41
- .hop-spinner__track {
41
+ .hop-Spinner__track {
42
42
  box-sizing: border-box;
43
- inline-size: var(--width, --hop-spinner-component-md-wheel-size);
44
- block-size: var(--height, --hop-spinner-component-md-wheel-size);
45
- border-radius: var(--hop-spinner-component-border-radius);
46
- border: var(--hop-spinner-component-track-border);
47
- opacity: var(--hop-spinner-component-track-opacity);
43
+ inline-size: var(--width, --hop-Spinner-md-wheel-size);
44
+ block-size: var(--height, --hop-Spinner-md-wheel-size);
45
+ border-radius: var(--hop-Spinner-border-radius);
46
+ border: var(--hop-Spinner-track-border);
47
+ opacity: var(--hop-Spinner-track-opacity);
48
48
  grid-area: spinner;
49
49
  }
50
- .hop-spinner__fill {
50
+ .hop-Spinner__fill {
51
51
  box-sizing: border-box;
52
- inline-size: var(--width, --hop-spinner-component-md-wheel-size);
53
- block-size: var(--height, --hop-spinner-component-md-wheel-size);
54
- border-radius: var(--hop-spinner-component-border-radius);
55
- border: var( --hop-spinner-component-fill-border);
56
- border-inline-start: var(--hop-spinner-component-fill-border-inline-start);
52
+ inline-size: var(--width, --hop-Spinner-md-wheel-size);
53
+ block-size: var(--height, --hop-Spinner-md-wheel-size);
54
+ border-radius: var(--hop-Spinner-border-radius);
55
+ border: var( --hop-Spinner-fill-border);
56
+ border-inline-start: var(--hop-Spinner-fill-border-inline-start);
57
57
  grid-area: spinner;
58
- animation: var(--hop-spinner-component-fill-animation);
58
+ animation: var(--hop-Spinner-fill-animation);
59
59
  }
60
60
  @media (prefers-reduced-motion: reduce) {
61
- .hop-spinner__fill {
62
- animation-duration: var(--hop-spinner-component-fill-animation-reduced-motion-duration);
61
+ .hop-Spinner__fill {
62
+ animation-duration: var(--hop-Spinner-fill-animation-reduced-motion-duration);
63
63
  }
64
64
  }
65
- .hop-spinner__label {
65
+ .hop-Spinner__label {
66
66
  grid-area: label;
67
- margin-inline-start: var(--hop-spinner-component-label-margin-inline-start);
67
+ margin-inline-start: var(--hop-Spinner-label-margin-inline-start);
68
68
  }
69
69
 
70
70
  /* src/Label/src/Label.module.css */
71
- .hop-label {
72
- --hop-label-component-xs-font-size: var(--hop-body-xs-font-size);
73
- --hop-label-component-xs-font-family: var(--hop-body-xs-font-family);
74
- --hop-label-component-xs-font-weight: var(--hop-body-xs-font-weight);
75
- --hop-label-component-xs-line-height: var(--hop-body-xs-line-height);
76
- --hop-label-component-sm-font-size: var(--hop-body-sm-font-size);
77
- --hop-label-component-sm-font-family: var(--hop-body-sm-font-family);
78
- --hop-label-component-sm-font-weight: var(--hop-body-sm-font-weight);
79
- --hop-label-component-sm-line-height: var(--hop-body-sm-line-height);
80
- --hop-label-component-md-font-size: var(--hop-body-md-font-size);
81
- --hop-label-component-md-font-family: var(--hop-body-md-font-family);
82
- --hop-label-component-md-font-weight: var(--hop-body-md-font-weight);
83
- --hop-label-component-md-line-height: var(--hop-body-md-line-height);
84
- --hop-label-component-lg-font-size: var(--hop-body-lg-font-size);
85
- --hop-label-component-lg-font-family: var(--hop-body-lg-font-family);
86
- --hop-label-component-lg-font-weight: var(--hop-body-lg-font-weight);
87
- --hop-label-component-lg-line-height: var(--hop-body-lg-line-height);
88
- --hop-label-component-xl-font-size: var(--hop-body-xl-font-size);
89
- --hop-label-component-xl-font-family: var(--hop-body-xl-font-family);
90
- --hop-label-component-xl-font-weight: var(--hop-body-xl-font-weight);
91
- --hop-label-component-xl-line-height: var(--hop-body-xl-line-height);
92
- --hop-label-component-2xl-font-size: var(--hop-body-2xl-font-size);
93
- --hop-label-component-2xl-font-family: var(--hop-body-2xl-font-family);
94
- --hop-label-component-2xl-font-weight: var(--hop-body-2xl-font-weight);
95
- --hop-label-component-2xl-line-height: var(--hop-body-2xl-line-height);
96
- --hop-label-component-inherit-size-font-size: inherit;
97
- --hop-label-component-inherit-size-font-family: inherit;
98
- --hop-label-component-inherit-size-font-weight: inherit;
99
- --hop-label-component-inherit-size-line-height: inherit;
100
- }
101
- :where(.hop-label) {
102
- font-size: var(--font-size, --hop-label-component-md-font-size);
103
- font-family: var(--font-family, --hop-label-component-md-font-family);
104
- font-weight: var(--font-weight, --hop-label-component-md-font-weight);
105
- line-height: var(--line-height, --hop-label-component-md-line-height);
106
- }
107
- :where(.hop-label--xs) {
108
- --font-size: var(--hop-label-component-xs-font-size);
109
- --font-family: var(--hop-label-component-xs-font-family);
110
- --font-weight: var(--hop-label-component-xs-font-weight);
111
- --line-height: var(--hop-label-component-xs-line-height);
112
- }
113
- :where(.hop-label--sm) {
114
- --font-size: var(--hop-label-component-sm-font-size);
115
- --font-family: var(--hop-label-component-sm-font-family);
116
- --font-weight: var(--hop-label-component-sm-font-weight);
117
- --line-height: var(--hop-label-component-sm-line-height);
118
- }
119
- :where(.hop-label--md) {
120
- --font-size: var(--hop-label-component-md-font-size);
121
- --font-family: var(--hop-label-component-md-font-family);
122
- --font-weight: var(--hop-label-component-md-font-weight);
123
- --line-height: var(--hop-label-component-md-line-height);
124
- }
125
- :where(.hop-label--lg) {
126
- --font-size: var(--hop-label-component-lg-font-size);
127
- --font-family: var(--hop-label-component-lg-font-family);
128
- --font-weight: var(--hop-label-component-lg-font-weight);
129
- --line-height: var(--hop-label-component-lg-line-height);
130
- }
131
- :where(.hop-label--xl) {
132
- --font-size: var(--hop-label-component-xl-font-size);
133
- --font-family: var(--hop-label-component-xl-font-family);
134
- --font-weight: var(--hop-label-component-xl-font-weight);
135
- --line-height: var(--hop-label-component-xl-line-height);
136
- }
137
- :where(.hop-label--2xl) {
138
- --font-size: var(--hop-label-component-2xl-font-size);
139
- --font-family: var(--hop-label-component-2xl-font-family);
140
- --font-weight: var(--hop-label-component-2xl-font-weight);
141
- --line-height: var(--hop-label-component-2xl-line-height);
142
- }
143
- :where(.hop-label--inherit) {
144
- --font-size: var(--hop-label-component-inherit-size-font-size);
145
- --font-family: var(--hop-label-component-inherit-size-font-family);
146
- --font-weight: var(--hop-label-component-inherit-size-font-weight);
147
- --line-height: var(--hop-label-component-inherit-size-line-height);
71
+ .hop-Label {
72
+ --hop-Label-xs-font-size: var(--hop-body-xs-font-size);
73
+ --hop-Label-xs-font-family: var(--hop-body-xs-font-family);
74
+ --hop-Label-xs-font-weight: var(--hop-body-xs-font-weight);
75
+ --hop-Label-xs-line-height: var(--hop-body-xs-line-height);
76
+ --hop-Label-sm-font-size: var(--hop-body-sm-font-size);
77
+ --hop-Label-sm-font-family: var(--hop-body-sm-font-family);
78
+ --hop-Label-sm-font-weight: var(--hop-body-sm-font-weight);
79
+ --hop-Label-sm-line-height: var(--hop-body-sm-line-height);
80
+ --hop-Label-md-font-size: var(--hop-body-md-font-size);
81
+ --hop-Label-md-font-family: var(--hop-body-md-font-family);
82
+ --hop-Label-md-font-weight: var(--hop-body-md-font-weight);
83
+ --hop-Label-md-line-height: var(--hop-body-md-line-height);
84
+ --hop-Label-lg-font-size: var(--hop-body-lg-font-size);
85
+ --hop-Label-lg-font-family: var(--hop-body-lg-font-family);
86
+ --hop-Label-lg-font-weight: var(--hop-body-lg-font-weight);
87
+ --hop-Label-lg-line-height: var(--hop-body-lg-line-height);
88
+ --hop-Label-xl-font-size: var(--hop-body-xl-font-size);
89
+ --hop-Label-xl-font-family: var(--hop-body-xl-font-family);
90
+ --hop-Label-xl-font-weight: var(--hop-body-xl-font-weight);
91
+ --hop-Label-xl-line-height: var(--hop-body-xl-line-height);
92
+ --hop-Label-2xl-font-size: var(--hop-body-2xl-font-size);
93
+ --hop-Label-2xl-font-family: var(--hop-body-2xl-font-family);
94
+ --hop-Label-2xl-font-weight: var(--hop-body-2xl-font-weight);
95
+ --hop-Label-2xl-line-height: var(--hop-body-2xl-line-height);
96
+ --hop-Label-inherit-size-font-size: inherit;
97
+ --hop-Label-inherit-size-font-family: inherit;
98
+ --hop-Label-inherit-size-font-weight: inherit;
99
+ --hop-Label-inherit-size-line-height: inherit;
100
+ }
101
+ :where(.hop-Label) {
102
+ font-size: var(--font-size, --hop-Label-md-font-size);
103
+ font-family: var(--font-family, --hop-Label-md-font-family);
104
+ font-weight: var(--font-weight, --hop-Label-md-font-weight);
105
+ line-height: var(--line-height, --hop-Label-md-line-height);
106
+ }
107
+ :where(.hop-Label--xs) {
108
+ --font-size: var(--hop-Label-xs-font-size);
109
+ --font-family: var(--hop-Label-xs-font-family);
110
+ --font-weight: var(--hop-Label-xs-font-weight);
111
+ --line-height: var(--hop-Label-xs-line-height);
112
+ }
113
+ :where(.hop-Label--sm) {
114
+ --font-size: var(--hop-Label-sm-font-size);
115
+ --font-family: var(--hop-Label-sm-font-family);
116
+ --font-weight: var(--hop-Label-sm-font-weight);
117
+ --line-height: var(--hop-Label-sm-line-height);
118
+ }
119
+ :where(.hop-Label--md) {
120
+ --font-size: var(--hop-Label-md-font-size);
121
+ --font-family: var(--hop-Label-md-font-family);
122
+ --font-weight: var(--hop-Label-md-font-weight);
123
+ --line-height: var(--hop-Label-md-line-height);
124
+ }
125
+ :where(.hop-Label--lg) {
126
+ --font-size: var(--hop-Label-lg-font-size);
127
+ --font-family: var(--hop-Label-lg-font-family);
128
+ --font-weight: var(--hop-Label-lg-font-weight);
129
+ --line-height: var(--hop-Label-lg-line-height);
130
+ }
131
+ :where(.hop-Label--xl) {
132
+ --font-size: var(--hop-Label-xl-font-size);
133
+ --font-family: var(--hop-Label-xl-font-family);
134
+ --font-weight: var(--hop-Label-xl-font-weight);
135
+ --line-height: var(--hop-Label-xl-line-height);
136
+ }
137
+ :where(.hop-Label--2xl) {
138
+ --font-size: var(--hop-Label-2xl-font-size);
139
+ --font-family: var(--hop-Label-2xl-font-family);
140
+ --font-weight: var(--hop-Label-2xl-font-weight);
141
+ --line-height: var(--hop-Label-2xl-line-height);
142
+ }
143
+ :where(.hop-Label--inherit) {
144
+ --font-size: var(--hop-Label-inherit-size-font-size);
145
+ --font-family: var(--hop-Label-inherit-size-font-family);
146
+ --font-weight: var(--hop-Label-inherit-size-font-weight);
147
+ --line-height: var(--hop-Label-inherit-size-line-height);
148
148
  }