colibri-ui 0.8.81 → 0.8.83

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/Modal/index.js +15 -13
  2. package/Sheet/Sheet.js +4 -1
  3. package/Theme/index.d.ts +44 -0
  4. package/Theme/themes/buenos_aires.d.ts +22 -0
  5. package/Theme/themes/buenos_aires.js +22 -0
  6. package/Theme/themes/jaipur.d.ts +22 -0
  7. package/Theme/themes/jaipur.js +22 -0
  8. package/Typography/Typography.module.css +100 -0
  9. package/Typography/index.js +6 -3
  10. package/Typography/index.props.d.ts +3 -1
  11. package/esm/Modal/index.js +4 -2
  12. package/esm/Sheet/Sheet.js +4 -1
  13. package/esm/Theme/index.d.ts +44 -0
  14. package/esm/Theme/themes/buenos_aires.d.ts +22 -0
  15. package/esm/Theme/themes/buenos_aires.js +22 -0
  16. package/esm/Theme/themes/jaipur.d.ts +22 -0
  17. package/esm/Theme/themes/jaipur.js +22 -0
  18. package/esm/Typography/Typography.module.css +100 -0
  19. package/esm/Typography/index.js +6 -3
  20. package/esm/Typography/index.props.d.ts +3 -1
  21. package/esm/hooks/useModalStack/index.d.ts +6 -0
  22. package/esm/hooks/useModalStack/index.js +24 -0
  23. package/esm/theme_ba_variables.css +22 -0
  24. package/esm/theme_jaipur_variables.css +22 -0
  25. package/hooks/useModalStack/index.d.ts +6 -0
  26. package/hooks/useModalStack/index.js +26 -0
  27. package/package.json +1 -1
  28. package/theme_ba_variables.css +22 -0
  29. package/theme_jaipur_variables.css +22 -0
  30. package/Modal/useModalStack.d.ts +0 -2
  31. package/Modal/useModalStack.js +0 -20
  32. package/esm/Modal/useModalStack.d.ts +0 -2
  33. package/esm/Modal/useModalStack.js +0 -18
package/Modal/index.js CHANGED
@@ -4,18 +4,18 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
4
4
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
5
5
  var React = require('react');
6
6
  var clsx = require('clsx');
7
- var index$5 = require('../hooks/useScrollLock/index.js');
8
- var index$6 = require('../hooks/useTrapFocus/index.js');
9
- var index$9 = require('../Portal/index.js');
7
+ var index$6 = require('../hooks/useScrollLock/index.js');
8
+ var index$7 = require('../hooks/useTrapFocus/index.js');
9
+ var index$5 = require('../hooks/useModalStack/index.js');
10
+ var index$a = require('../Portal/index.js');
10
11
  var index$4 = require('../hooks/useMediaSizes/index.js');
11
12
  var index = require('./components/Body/index.js');
12
- var index$7 = require('./components/Close/index.js');
13
- var index$8 = require('./components/Content/index.js');
13
+ var index$8 = require('./components/Close/index.js');
14
+ var index$9 = require('./components/Content/index.js');
14
15
  var index$1 = require('./components/Footer/index.js');
15
16
  var index$2 = require('./components/Header/index.js');
16
17
  var index$3 = require('./components/Title/index.js');
17
18
  var context = require('./context.js');
18
- var useModalStack = require('./useModalStack.js');
19
19
  var styles = require('./Modal.module.css');
20
20
 
21
21
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -58,9 +58,9 @@ var ModalRoot = function ModalRoot(_ref) {
58
58
  _useState4 = _slicedToArray__default.default(_useState3, 2),
59
59
  titleCount = _useState4[0],
60
60
  setTitleCount = _useState4[1];
61
- var isTopmost = useModalStack.useModalStack(titleId);
62
- index$5.useScrollLock();
63
- index$6.useTrapFocus(modalRef, isTopmost);
61
+ var isTopmost = index$5.useModalStack(titleId);
62
+ index$6.useScrollLock();
63
+ index$7.useTrapFocus(modalRef, isTopmost);
64
64
  var handleClose = React.useCallback(function () {
65
65
  onClose === null || onClose === void 0 ? void 0 : onClose();
66
66
  }, [onClose]);
@@ -93,7 +93,9 @@ var ModalRoot = function ModalRoot(_ref) {
93
93
  }, [handleClose]);
94
94
  React.useEffect(function () {
95
95
  var handleEscape = function handleEscape(event) {
96
- if (event.key === "Escape" && isTopmost()) {
96
+ // A layer that closed on this Escape already called preventDefault.
97
+ if (event.key === "Escape" && !event.defaultPrevented && isTopmost()) {
98
+ event.preventDefault();
97
99
  handleClose();
98
100
  }
99
101
  };
@@ -105,7 +107,7 @@ var ModalRoot = function ModalRoot(_ref) {
105
107
  var isCompound = React.Children.toArray(children).some(isCompoundPart);
106
108
  var standaloneClose = /*#__PURE__*/React__default.default.createElement("div", {
107
109
  className: styles__default.default["close-wrapper"]
108
- }, /*#__PURE__*/React__default.default.createElement(index$7.Close, {
110
+ }, /*#__PURE__*/React__default.default.createElement(index$8.Close, {
109
111
  onClick: handleClose,
110
112
  "aria-label": "Close modal"
111
113
  }));
@@ -113,11 +115,11 @@ var ModalRoot = function ModalRoot(_ref) {
113
115
  if (isCompound) {
114
116
  content = /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, !hasHeader(children) && standaloneClose, children);
115
117
  } else {
116
- content = /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, title ? (/*#__PURE__*/React__default.default.createElement(index$2.Header, null, /*#__PURE__*/React__default.default.createElement(index$3.Title, null, title))) : standaloneClose, /*#__PURE__*/React__default.default.createElement(index$8.Content, null, children));
118
+ content = /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, title ? (/*#__PURE__*/React__default.default.createElement(index$2.Header, null, /*#__PURE__*/React__default.default.createElement(index$3.Title, null, title))) : standaloneClose, /*#__PURE__*/React__default.default.createElement(index$9.Content, null, children));
117
119
  }
118
120
  // Wait for the parent window node instead of flashing in document.body.
119
121
  if (withinParent && parentModal && !parentContainer) return null;
120
- return /*#__PURE__*/React__default.default.createElement(index$9.Portal, {
122
+ return /*#__PURE__*/React__default.default.createElement(index$a.Portal, {
121
123
  node: parentContainer
122
124
  }, /*#__PURE__*/React__default.default.createElement(context.ModalContext.Provider, {
123
125
  value: contextValue
package/Sheet/Sheet.js CHANGED
@@ -6,6 +6,7 @@ var tslib = require('tslib');
6
6
  var React = require('react');
7
7
  var ReactDOM = require('react-dom');
8
8
  var clsx = require('clsx');
9
+ var index = require('../hooks/useModalStack/index.js');
9
10
  var styles = require('./Sheet.module.css');
10
11
 
11
12
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -97,6 +98,7 @@ var Sheet = /*#__PURE__*/React.forwardRef(function SheetComponent(_a, forwardedR
97
98
  });
98
99
  var titleId = React.useId();
99
100
  var descriptionId = React.useId();
101
+ var isTopmost = index.useModalStack(titleId, open && modal);
100
102
  var setPanelRef = function setPanelRef(node) {
101
103
  panelRef.current = node;
102
104
  if (typeof forwardedRef === "function") forwardedRef(node);else if (forwardedRef) forwardedRef.current = node;
@@ -141,6 +143,7 @@ var Sheet = /*#__PURE__*/React.forwardRef(function SheetComponent(_a, forwardedR
141
143
  (_d = (_c = (_b = initialFocusRef === null || initialFocusRef === void 0 ? void 0 : initialFocusRef.current) !== null && _b !== void 0 ? _b : first) !== null && _c !== void 0 ? _c : panelRef.current) === null || _d === void 0 ? void 0 : _d.focus();
142
144
  });
143
145
  var onKeyDown = function onKeyDown(event) {
146
+ if (event.defaultPrevented || !isTopmost()) return;
144
147
  if (event.key === "Escape" && closeOnEscape) {
145
148
  event.preventDefault();
146
149
  onOpenChange(false, "escape");
@@ -170,7 +173,7 @@ var Sheet = /*#__PURE__*/React.forwardRef(function SheetComponent(_a, forwardedR
170
173
  if (modal && lockBodyScroll) document.body.style.overflow = previousOverflow;
171
174
  returnFocusElement === null || returnFocusElement === void 0 ? void 0 : returnFocusElement.focus();
172
175
  };
173
- }, [open, modal, lockBodyScroll, closeOnEscape, onOpenChange, initialFocusRef, returnFocusRef]);
176
+ }, [open, modal, lockBodyScroll, closeOnEscape, onOpenChange, initialFocusRef, returnFocusRef, isTopmost]);
174
177
  var startDrag = function startDrag(event) {
175
178
  if (!draggable || !panelRef.current) return;
176
179
  event.currentTarget.setPointerCapture(event.pointerId);
package/Theme/index.d.ts CHANGED
@@ -278,6 +278,28 @@ export declare const THEMES: {
278
278
  "line-height-display-lg-mobile": string;
279
279
  "font-size-display-xl-mobile": string;
280
280
  "line-height-display-xl-mobile": string;
281
+ "font-size-h1-mobile": string;
282
+ "line-height-h1-mobile": string;
283
+ "font-size-h2-mobile": string;
284
+ "line-height-h2-mobile": string;
285
+ "font-size-h3-mobile": string;
286
+ "line-height-h3-mobile": string;
287
+ "font-size-h4-mobile": string;
288
+ "line-height-h4-mobile": string;
289
+ "font-size-h5-mobile": string;
290
+ "line-height-h5-mobile": string;
291
+ "font-size-display-s": string;
292
+ "line-height-display-s": string;
293
+ "font-size-display-s-mobile": string;
294
+ "line-height-display-s-mobile": string;
295
+ "font-size-display-m": string;
296
+ "line-height-display-m": string;
297
+ "font-size-display-m-mobile": string;
298
+ "line-height-display-m-mobile": string;
299
+ "font-size-display-l": string;
300
+ "line-height-display-l": string;
301
+ "font-size-display-l-mobile": string;
302
+ "line-height-display-l-mobile": string;
281
303
  "letter-spacing-body": string;
282
304
  "letter-spacing-ui": string;
283
305
  "letter-spacing-heading": string;
@@ -1095,6 +1117,28 @@ export declare const THEMES: {
1095
1117
  "line-height-display-lg-mobile": string;
1096
1118
  "font-size-display-xl-mobile": string;
1097
1119
  "line-height-display-xl-mobile": string;
1120
+ "font-size-h1-mobile": string;
1121
+ "line-height-h1-mobile": string;
1122
+ "font-size-h2-mobile": string;
1123
+ "line-height-h2-mobile": string;
1124
+ "font-size-h3-mobile": string;
1125
+ "line-height-h3-mobile": string;
1126
+ "font-size-h4-mobile": string;
1127
+ "line-height-h4-mobile": string;
1128
+ "font-size-h5-mobile": string;
1129
+ "line-height-h5-mobile": string;
1130
+ "font-size-display-s": string;
1131
+ "line-height-display-s": string;
1132
+ "font-size-display-s-mobile": string;
1133
+ "line-height-display-s-mobile": string;
1134
+ "font-size-display-m": string;
1135
+ "line-height-display-m": string;
1136
+ "font-size-display-m-mobile": string;
1137
+ "line-height-display-m-mobile": string;
1138
+ "font-size-display-l": string;
1139
+ "line-height-display-l": string;
1140
+ "font-size-display-l-mobile": string;
1141
+ "line-height-display-l-mobile": string;
1098
1142
  "letter-spacing-body": string;
1099
1143
  "letter-spacing-ui": string;
1100
1144
  "letter-spacing-heading": string;
package/Theme/themes/buenos_aires.d.ts CHANGED
@@ -199,6 +199,28 @@ declare const _default: {
199
199
  "line-height-display-lg-mobile": string;
200
200
  "font-size-display-xl-mobile": string;
201
201
  "line-height-display-xl-mobile": string;
202
+ "font-size-h1-mobile": string;
203
+ "line-height-h1-mobile": string;
204
+ "font-size-h2-mobile": string;
205
+ "line-height-h2-mobile": string;
206
+ "font-size-h3-mobile": string;
207
+ "line-height-h3-mobile": string;
208
+ "font-size-h4-mobile": string;
209
+ "line-height-h4-mobile": string;
210
+ "font-size-h5-mobile": string;
211
+ "line-height-h5-mobile": string;
212
+ "font-size-display-s": string;
213
+ "line-height-display-s": string;
214
+ "font-size-display-s-mobile": string;
215
+ "line-height-display-s-mobile": string;
216
+ "font-size-display-m": string;
217
+ "line-height-display-m": string;
218
+ "font-size-display-m-mobile": string;
219
+ "line-height-display-m-mobile": string;
220
+ "font-size-display-l": string;
221
+ "line-height-display-l": string;
222
+ "font-size-display-l-mobile": string;
223
+ "line-height-display-l-mobile": string;
202
224
  "letter-spacing-body": string;
203
225
  "letter-spacing-ui": string;
204
226
  "letter-spacing-heading": string;
package/Theme/themes/buenos_aires.js CHANGED
@@ -205,6 +205,28 @@ var THEME_BA = {
205
205
  "line-height-display-lg-mobile": "3.625rem",
206
206
  "font-size-display-xl-mobile": "3.5rem",
207
207
  "line-height-display-xl-mobile": "3.625rem",
208
+ "font-size-h1-mobile": "2rem",
209
+ "line-height-h1-mobile": "2.5rem",
210
+ "font-size-h2-mobile": "1.75rem",
211
+ "line-height-h2-mobile": "2.25rem",
212
+ "font-size-h3-mobile": "1.5rem",
213
+ "line-height-h3-mobile": "2rem",
214
+ "font-size-h4-mobile": "1.25rem",
215
+ "line-height-h4-mobile": "1.75rem",
216
+ "font-size-h5-mobile": "1.125rem",
217
+ "line-height-h5-mobile": "1.625rem",
218
+ "font-size-display-s": "3.5rem",
219
+ "line-height-display-s": "4rem",
220
+ "font-size-display-s-mobile": "2.5rem",
221
+ "line-height-display-s-mobile": "3rem",
222
+ "font-size-display-m": "4.5rem",
223
+ "line-height-display-m": "5rem",
224
+ "font-size-display-m-mobile": "3rem",
225
+ "line-height-display-m-mobile": "3.5rem",
226
+ "font-size-display-l": "5.5rem",
227
+ "line-height-display-l": "6rem",
228
+ "font-size-display-l-mobile": "3.5rem",
229
+ "line-height-display-l-mobile": "4rem",
208
230
  "letter-spacing-body": "0",
209
231
  "letter-spacing-ui": "0",
210
232
  "letter-spacing-heading": "-0.02em",
package/Theme/themes/jaipur.d.ts CHANGED
@@ -199,6 +199,28 @@ declare const _default: {
199
199
  "line-height-display-lg-mobile": string;
200
200
  "font-size-display-xl-mobile": string;
201
201
  "line-height-display-xl-mobile": string;
202
+ "font-size-h1-mobile": string;
203
+ "line-height-h1-mobile": string;
204
+ "font-size-h2-mobile": string;
205
+ "line-height-h2-mobile": string;
206
+ "font-size-h3-mobile": string;
207
+ "line-height-h3-mobile": string;
208
+ "font-size-h4-mobile": string;
209
+ "line-height-h4-mobile": string;
210
+ "font-size-h5-mobile": string;
211
+ "line-height-h5-mobile": string;
212
+ "font-size-display-s": string;
213
+ "line-height-display-s": string;
214
+ "font-size-display-s-mobile": string;
215
+ "line-height-display-s-mobile": string;
216
+ "font-size-display-m": string;
217
+ "line-height-display-m": string;
218
+ "font-size-display-m-mobile": string;
219
+ "line-height-display-m-mobile": string;
220
+ "font-size-display-l": string;
221
+ "line-height-display-l": string;
222
+ "font-size-display-l-mobile": string;
223
+ "line-height-display-l-mobile": string;
202
224
  "letter-spacing-body": string;
203
225
  "letter-spacing-ui": string;
204
226
  "letter-spacing-heading": string;
package/Theme/themes/jaipur.js CHANGED
@@ -205,6 +205,28 @@ var theme_jaipur = {
205
205
  "line-height-display-lg-mobile": "3.625rem",
206
206
  "font-size-display-xl-mobile": "3.5rem",
207
207
  "line-height-display-xl-mobile": "3.625rem",
208
+ "font-size-h1-mobile": "2rem",
209
+ "line-height-h1-mobile": "2.5rem",
210
+ "font-size-h2-mobile": "1.75rem",
211
+ "line-height-h2-mobile": "2.25rem",
212
+ "font-size-h3-mobile": "1.5rem",
213
+ "line-height-h3-mobile": "2rem",
214
+ "font-size-h4-mobile": "1.25rem",
215
+ "line-height-h4-mobile": "1.75rem",
216
+ "font-size-h5-mobile": "1.125rem",
217
+ "line-height-h5-mobile": "1.625rem",
218
+ "font-size-display-s": "3.5rem",
219
+ "line-height-display-s": "4rem",
220
+ "font-size-display-s-mobile": "2.5rem",
221
+ "line-height-display-s-mobile": "3rem",
222
+ "font-size-display-m": "4.5rem",
223
+ "line-height-display-m": "5rem",
224
+ "font-size-display-m-mobile": "3rem",
225
+ "line-height-display-m-mobile": "3.5rem",
226
+ "font-size-display-l": "5.5rem",
227
+ "line-height-display-l": "6rem",
228
+ "font-size-display-l-mobile": "3.5rem",
229
+ "line-height-display-l-mobile": "4rem",
208
230
  "letter-spacing-body": "0",
209
231
  "letter-spacing-ui": "0",
210
232
  "letter-spacing-heading": "-0.02em",
package/Typography/Typography.module.css CHANGED
@@ -4,63 +4,85 @@
4
4
  letter-spacing: var(--letter-spacing-ui, 0);
5
5
  }
6
6
 
7
+ .clamp {
8
+ -webkit-box-orient: vertical;
9
+ display: -webkit-box;
10
+ -webkit-line-clamp: var(--typography-lines);
11
+ overflow: hidden;
12
+ text-overflow: ellipsis;
13
+ white-space: normal;
14
+ }
15
+
7
16
  .size_xs {
17
+ font-family: var(--font-family-body, inherit);
8
18
  font-size: var(--font-size-text-xs, 0.75rem);
9
19
  line-height: var(--line-height-text-xs, 1rem);
10
20
  }
11
21
  .size_s {
22
+ font-family: var(--font-family-body, inherit);
12
23
  font-size: var(--font-size-text-sm, 0.875rem);
13
24
  line-height: var(--line-height-text-sm, 1.25rem);
14
25
  }
15
26
  .size_m {
27
+ font-family: var(--font-family-body, inherit);
16
28
  font-size: var(--font-size-text-md, 1rem);
17
29
  line-height: var(--line-height-text-md, 1.5rem);
18
30
  }
19
31
  .size_l {
32
+ font-family: var(--font-family-body, inherit);
20
33
  font-size: var(--font-size-text-lg, 1.125rem);
21
34
  line-height: var(--line-height-text-lg, 1.625rem);
22
35
  }
23
36
  .size_text-xs {
37
+ font-family: var(--font-family-body, inherit);
24
38
  font-size: var(--font-size-text-xs, 0.75rem);
25
39
  line-height: var(--line-height-text-xs, 1rem);
26
40
  }
27
41
  .size_text-sm {
42
+ font-family: var(--font-family-body, inherit);
28
43
  font-size: var(--font-size-text-sm, 0.875rem);
29
44
  line-height: var(--line-height-text-sm, 1.25rem);
30
45
  }
31
46
  .size_text-md {
47
+ font-family: var(--font-family-body, inherit);
32
48
  font-size: var(--font-size-text-md, 1rem);
33
49
  line-height: var(--line-height-text-md, 1.5rem);
34
50
  }
35
51
  .size_text-lg {
52
+ font-family: var(--font-family-body, inherit);
36
53
  font-size: var(--font-size-text-lg, 1.125rem);
37
54
  line-height: var(--line-height-text-lg, 1.625rem);
38
55
  }
39
56
  .size_heading-sm {
57
+ font-family: var(--font-family-display, inherit);
40
58
  font-size: var(--font-size-heading-sm, 1.25rem);
41
59
  font-weight: var(--font-weight-semibold, 600);
42
60
  letter-spacing: var(--letter-spacing-heading, 0);
43
61
  line-height: var(--line-height-heading-sm, 1.75rem);
44
62
  }
45
63
  .size_heading-md {
64
+ font-family: var(--font-family-display, inherit);
46
65
  font-size: var(--font-size-heading-md, 1.5rem);
47
66
  font-weight: var(--font-weight-semibold, 600);
48
67
  letter-spacing: var(--letter-spacing-heading, 0);
49
68
  line-height: var(--line-height-heading-md, 2rem);
50
69
  }
51
70
  .size_heading-lg {
71
+ font-family: var(--font-family-display, inherit);
52
72
  font-size: var(--font-size-heading-lg, 2rem);
53
73
  font-weight: var(--font-weight-semibold, 600);
54
74
  letter-spacing: var(--letter-spacing-heading, 0);
55
75
  line-height: var(--line-height-heading-lg, 2.5rem);
56
76
  }
57
77
  .size_heading-xl {
78
+ font-family: var(--font-family-display, inherit);
58
79
  font-size: var(--font-size-heading-xl, 2.5rem);
59
80
  font-weight: var(--font-weight-semibold, 600);
60
81
  letter-spacing: var(--letter-spacing-heading, 0);
61
82
  line-height: var(--line-height-heading-xl, 3rem);
62
83
  }
63
84
  .size_display-sm {
85
+ font-family: var(--font-family-display, inherit);
64
86
  font-size: var(--font-size-display-sm, 3rem);
65
87
  font-weight: var(--font-weight-semibold, 600);
66
88
  letter-spacing: var(--letter-spacing-display, 0);
@@ -73,6 +95,7 @@
73
95
  }
74
96
  }
75
97
  .size_display-md {
98
+ font-family: var(--font-family-display, inherit);
76
99
  font-size: var(--font-size-display-md, 4rem);
77
100
  font-weight: var(--font-weight-semibold, 600);
78
101
  letter-spacing: var(--letter-spacing-display, 0);
@@ -85,6 +108,7 @@
85
108
  }
86
109
  }
87
110
  .size_display-lg {
111
+ font-family: var(--font-family-display, inherit);
88
112
  font-size: var(--font-size-display-lg, 5rem);
89
113
  font-weight: var(--font-weight-semibold, 600);
90
114
  letter-spacing: var(--letter-spacing-display, 0);
@@ -97,6 +121,7 @@
97
121
  }
98
122
  }
99
123
  .size_display-xl {
124
+ font-family: var(--font-family-display, inherit);
100
125
  font-size: var(--font-size-display-xl, 6.5rem);
101
126
  font-weight: var(--font-weight-semibold, 600);
102
127
  letter-spacing: var(--letter-spacing-display, 0);
@@ -108,37 +133,112 @@
108
133
  line-height: var(--line-height-display-xl-mobile, 3.625rem);
109
134
  }
110
135
  }
136
+ .size_display-s {
137
+ font-family: var(--font-family-display, inherit);
138
+ font-size: var(--font-size-display-s, 3.5rem);
139
+ font-weight: var(--font-weight-semibold, 600);
140
+ letter-spacing: var(--letter-spacing-display, 0);
141
+ line-height: var(--line-height-display-s, 4rem);
142
+ }
143
+ @media (width < 48rem) {
144
+ .size_display-s {
145
+ font-size: var(--font-size-display-s-mobile, 2.5rem);
146
+ line-height: var(--line-height-display-s-mobile, 3rem);
147
+ }
148
+ }
149
+ .size_display-m {
150
+ font-family: var(--font-family-display, inherit);
151
+ font-size: var(--font-size-display-m, 4.5rem);
152
+ font-weight: var(--font-weight-semibold, 600);
153
+ letter-spacing: var(--letter-spacing-display, 0);
154
+ line-height: var(--line-height-display-m, 5rem);
155
+ }
156
+ @media (width < 48rem) {
157
+ .size_display-m {
158
+ font-size: var(--font-size-display-m-mobile, 3rem);
159
+ line-height: var(--line-height-display-m-mobile, 3.5rem);
160
+ }
161
+ }
162
+ .size_display-l {
163
+ font-family: var(--font-family-display, inherit);
164
+ font-size: var(--font-size-display-l, 5.5rem);
165
+ font-weight: var(--font-weight-semibold, 600);
166
+ letter-spacing: var(--letter-spacing-display, 0);
167
+ line-height: var(--line-height-display-l, 6rem);
168
+ }
169
+ @media (width < 48rem) {
170
+ .size_display-l {
171
+ font-size: var(--font-size-display-l-mobile, 3.5rem);
172
+ line-height: var(--line-height-display-l-mobile, 4rem);
173
+ }
174
+ }
111
175
  .size_h1 {
176
+ font-family: var(--font-family-display, inherit);
112
177
  font-size: var(--font-size-display-sm, 3rem);
113
178
  font-weight: var(--font-weight-semibold, 600);
114
179
  letter-spacing: var(--letter-spacing-display, 0);
115
180
  line-height: var(--line-height-display-sm, 3.25rem);
116
181
  }
182
+ @media (width < 48rem) {
183
+ .size_h1 {
184
+ font-size: var(--font-size-h1-mobile, 2rem);
185
+ line-height: var(--line-height-h1-mobile, 2.5rem);
186
+ }
187
+ }
117
188
  .size_h2 {
189
+ font-family: var(--font-family-display, inherit);
118
190
  font-size: var(--font-size-heading-xl, 2.5rem);
119
191
  font-weight: var(--font-weight-semibold, 600);
120
192
  letter-spacing: var(--letter-spacing-heading, 0);
121
193
  line-height: var(--line-height-heading-xl, 3rem);
122
194
  }
195
+ @media (width < 48rem) {
196
+ .size_h2 {
197
+ font-size: var(--font-size-h2-mobile, 1.75rem);
198
+ line-height: var(--line-height-h2-mobile, 2.25rem);
199
+ }
200
+ }
123
201
  .size_h3 {
202
+ font-family: var(--font-family-display, inherit);
124
203
  font-size: var(--font-size-heading-lg, 2rem);
125
204
  font-weight: var(--font-weight-semibold, 600);
126
205
  letter-spacing: var(--letter-spacing-heading, 0);
127
206
  line-height: var(--line-height-heading-lg, 2.5rem);
128
207
  }
208
+ @media (width < 48rem) {
209
+ .size_h3 {
210
+ font-size: var(--font-size-h3-mobile, 1.5rem);
211
+ line-height: var(--line-height-h3-mobile, 2rem);
212
+ }
213
+ }
129
214
  .size_h4 {
215
+ font-family: var(--font-family-display, inherit);
130
216
  font-size: var(--font-size-heading-md, 1.5rem);
131
217
  font-weight: var(--font-weight-semibold, 600);
132
218
  letter-spacing: var(--letter-spacing-heading, 0);
133
219
  line-height: var(--line-height-heading-md, 2rem);
134
220
  }
221
+ @media (width < 48rem) {
222
+ .size_h4 {
223
+ font-size: var(--font-size-h4-mobile, 1.25rem);
224
+ line-height: var(--line-height-h4-mobile, 1.75rem);
225
+ }
226
+ }
135
227
  .size_h5 {
228
+ font-family: var(--font-family-display, inherit);
136
229
  font-size: var(--font-size-heading-sm, 1.25rem);
137
230
  font-weight: var(--font-weight-semibold, 600);
138
231
  letter-spacing: var(--letter-spacing-heading, 0);
139
232
  line-height: var(--line-height-heading-sm, 1.75rem);
140
233
  }
234
+ @media (width < 48rem) {
235
+ .size_h5 {
236
+ font-size: var(--font-size-h5-mobile, 1.125rem);
237
+ line-height: var(--line-height-h5-mobile, 1.625rem);
238
+ }
239
+ }
141
240
  .size_h6 {
241
+ font-family: var(--font-family-display, inherit);
142
242
  font-size: var(--font-size-text-md, 1rem);
143
243
  font-weight: var(--font-weight-semibold, 600);
144
244
  line-height: var(--line-height-text-md, 1.5rem);
package/Typography/index.js CHANGED
@@ -21,11 +21,14 @@ var Typography = function Typography(_a) {
21
21
  size = _a.size,
22
22
  style = _a.style,
23
23
  fontWeight = _a.fontWeight,
24
+ lines = _a.lines,
24
25
  className = _a.className,
25
- props = tslib.__rest(_a, ["tag", "children", "variant", "size", "style", "fontWeight", "className"]);
26
+ props = tslib.__rest(_a, ["tag", "children", "variant", "size", "style", "fontWeight", "lines", "className"]);
26
27
  return /*#__PURE__*/React__default.default.createElement(Component, Object.assign({}, props, {
27
- style: Object.assign({}, style),
28
- className: clsx__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["size_".concat(size)], Boolean(size)), styles__default.default["font-weight_".concat(fontWeight)], Boolean(fontWeight)), styles__default.default["variant_".concat(variant)], Boolean(variant)), className)
28
+ style: lines ? Object.assign(Object.assign({}, style), {
29
+ "--typography-lines": lines
30
+ }) : Object.assign({}, style),
31
+ className: clsx__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["size_".concat(size)], Boolean(size)), styles__default.default["font-weight_".concat(fontWeight)], Boolean(fontWeight)), styles__default.default["variant_".concat(variant)], Boolean(variant)), styles__default.default.clamp, Boolean(lines)), className)
29
32
  }), children);
30
33
  };
31
34
 
package/Typography/index.props.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { CSSProperties } from "react";
2
2
  export type TypographyVariant = "primary" | "secondary" | "tertiary" | "disabled" | "inverse" | "alert" | "success" | "warning" | "info";
3
3
  export type TypographyFontWeight = "normal" | "regular" | "medium" | "semibold" | "bold";
4
- export type TypographySize = "xs" | "s" | "m" | "l" | "text-xs" | "text-sm" | "text-md" | "text-lg" | "heading-sm" | "heading-md" | "heading-lg" | "heading-xl" | "display-sm" | "display-md" | "display-lg" | "display-xl" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
4
+ export type TypographySize = "xs" | "s" | "m" | "l" | "text-xs" | "text-sm" | "text-md" | "text-lg" | "heading-sm" | "heading-md" | "heading-lg" | "heading-xl" | "display-sm" | "display-md" | "display-lg" | "display-xl" | "display-s" | "display-m" | "display-l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
5
5
  export type TypographyTag = "span" | "label" | "legend" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "s";
6
6
  export type TypographyProps = {
7
7
  className?: string;
@@ -9,5 +9,7 @@ export type TypographyProps = {
9
9
  variant?: TypographyVariant;
10
10
  size?: TypographySize;
11
11
  fontWeight?: TypographyFontWeight;
12
+ /** Limits the text to this many lines and ends the last one with an ellipsis. */
13
+ lines?: number;
12
14
  style?: CSSProperties;
13
15
  };
package/esm/Modal/index.js CHANGED
@@ -4,6 +4,7 @@ import React, { useRef, useState, useContext, useId, useCallback, useMemo, useEf
4
4
  import clsx from 'clsx';
5
5
  import { useScrollLock } from '../hooks/useScrollLock/index.js';
6
6
  import { useTrapFocus } from '../hooks/useTrapFocus/index.js';
7
+ import { useModalStack } from '../hooks/useModalStack/index.js';
7
8
  import { Portal } from '../Portal/index.js';
8
9
  import { useMediaSizes } from '../hooks/useMediaSizes/index.js';
9
10
  import { Body } from './components/Body/index.js';
@@ -13,7 +14,6 @@ import { Footer } from './components/Footer/index.js';
13
14
  import { Header } from './components/Header/index.js';
14
15
  import { Title } from './components/Title/index.js';
15
16
  import { ModalContext } from './context.js';
16
- import { useModalStack } from './useModalStack.js';
17
17
  import styles from './Modal.module.css';
18
18
 
19
19
  var compoundParts = [Header, Body, Footer];
@@ -83,7 +83,9 @@ var ModalRoot = function ModalRoot(_ref) {
83
83
  }, [handleClose]);
84
84
  useEffect(function () {
85
85
  var handleEscape = function handleEscape(event) {
86
- if (event.key === "Escape" && isTopmost()) {
86
+ // A layer that closed on this Escape already called preventDefault.
87
+ if (event.key === "Escape" && !event.defaultPrevented && isTopmost()) {
88
+ event.preventDefault();
87
89
  handleClose();
88
90
  }
89
91
  };
package/esm/Sheet/Sheet.js CHANGED
@@ -4,6 +4,7 @@ import { __rest } from 'tslib';
4
4
  import React, { forwardRef, useState, useRef, useId, useMemo, useEffect } from 'react';
5
5
  import { createPortal } from 'react-dom';
6
6
  import clsx from 'clsx';
7
+ import { useModalStack } from '../hooks/useModalStack/index.js';
7
8
  import styles from './Sheet.module.css';
8
9
 
9
10
  var defaultSnapPoints = ["60dvh"];
@@ -87,6 +88,7 @@ var Sheet = /*#__PURE__*/forwardRef(function SheetComponent(_a, forwardedRef) {
87
88
  });
88
89
  var titleId = useId();
89
90
  var descriptionId = useId();
91
+ var isTopmost = useModalStack(titleId, open && modal);
90
92
  var setPanelRef = function setPanelRef(node) {
91
93
  panelRef.current = node;
92
94
  if (typeof forwardedRef === "function") forwardedRef(node);else if (forwardedRef) forwardedRef.current = node;
@@ -131,6 +133,7 @@ var Sheet = /*#__PURE__*/forwardRef(function SheetComponent(_a, forwardedRef) {
131
133
  (_d = (_c = (_b = initialFocusRef === null || initialFocusRef === void 0 ? void 0 : initialFocusRef.current) !== null && _b !== void 0 ? _b : first) !== null && _c !== void 0 ? _c : panelRef.current) === null || _d === void 0 ? void 0 : _d.focus();
132
134
  });
133
135
  var onKeyDown = function onKeyDown(event) {
136
+ if (event.defaultPrevented || !isTopmost()) return;
134
137
  if (event.key === "Escape" && closeOnEscape) {
135
138
  event.preventDefault();
136
139
  onOpenChange(false, "escape");
@@ -160,7 +163,7 @@ var Sheet = /*#__PURE__*/forwardRef(function SheetComponent(_a, forwardedRef) {
160
163
  if (modal && lockBodyScroll) document.body.style.overflow = previousOverflow;
161
164
  returnFocusElement === null || returnFocusElement === void 0 ? void 0 : returnFocusElement.focus();
162
165
  };
163
- }, [open, modal, lockBodyScroll, closeOnEscape, onOpenChange, initialFocusRef, returnFocusRef]);
166
+ }, [open, modal, lockBodyScroll, closeOnEscape, onOpenChange, initialFocusRef, returnFocusRef, isTopmost]);
164
167
  var startDrag = function startDrag(event) {
165
168
  if (!draggable || !panelRef.current) return;
166
169
  event.currentTarget.setPointerCapture(event.pointerId);
package/esm/Theme/index.d.ts CHANGED
@@ -278,6 +278,28 @@ export declare const THEMES: {
278
278
  "line-height-display-lg-mobile": string;
279
279
  "font-size-display-xl-mobile": string;
280
280
  "line-height-display-xl-mobile": string;
281
+ "font-size-h1-mobile": string;
282
+ "line-height-h1-mobile": string;
283
+ "font-size-h2-mobile": string;
284
+ "line-height-h2-mobile": string;
285
+ "font-size-h3-mobile": string;
286
+ "line-height-h3-mobile": string;
287
+ "font-size-h4-mobile": string;
288
+ "line-height-h4-mobile": string;
289
+ "font-size-h5-mobile": string;
290
+ "line-height-h5-mobile": string;
291
+ "font-size-display-s": string;
292
+ "line-height-display-s": string;
293
+ "font-size-display-s-mobile": string;
294
+ "line-height-display-s-mobile": string;
295
+ "font-size-display-m": string;
296
+ "line-height-display-m": string;
297
+ "font-size-display-m-mobile": string;
298
+ "line-height-display-m-mobile": string;
299
+ "font-size-display-l": string;
300
+ "line-height-display-l": string;
301
+ "font-size-display-l-mobile": string;
302
+ "line-height-display-l-mobile": string;
281
303
  "letter-spacing-body": string;
282
304
  "letter-spacing-ui": string;
283
305
  "letter-spacing-heading": string;
@@ -1095,6 +1117,28 @@ export declare const THEMES: {
1095
1117
  "line-height-display-lg-mobile": string;
1096
1118
  "font-size-display-xl-mobile": string;
1097
1119
  "line-height-display-xl-mobile": string;
1120
+ "font-size-h1-mobile": string;
1121
+ "line-height-h1-mobile": string;
1122
+ "font-size-h2-mobile": string;
1123
+ "line-height-h2-mobile": string;
1124
+ "font-size-h3-mobile": string;
1125
+ "line-height-h3-mobile": string;
1126
+ "font-size-h4-mobile": string;
1127
+ "line-height-h4-mobile": string;
1128
+ "font-size-h5-mobile": string;
1129
+ "line-height-h5-mobile": string;
1130
+ "font-size-display-s": string;
1131
+ "line-height-display-s": string;
1132
+ "font-size-display-s-mobile": string;
1133
+ "line-height-display-s-mobile": string;
1134
+ "font-size-display-m": string;
1135
+ "line-height-display-m": string;
1136
+ "font-size-display-m-mobile": string;
1137
+ "line-height-display-m-mobile": string;
1138
+ "font-size-display-l": string;
1139
+ "line-height-display-l": string;
1140
+ "font-size-display-l-mobile": string;
1141
+ "line-height-display-l-mobile": string;
1098
1142
  "letter-spacing-body": string;
1099
1143
  "letter-spacing-ui": string;
1100
1144
  "letter-spacing-heading": string;
package/esm/Theme/themes/buenos_aires.d.ts CHANGED
@@ -199,6 +199,28 @@ declare const _default: {
199
199
  "line-height-display-lg-mobile": string;
200
200
  "font-size-display-xl-mobile": string;
201
201
  "line-height-display-xl-mobile": string;
202
+ "font-size-h1-mobile": string;
203
+ "line-height-h1-mobile": string;
204
+ "font-size-h2-mobile": string;
205
+ "line-height-h2-mobile": string;
206
+ "font-size-h3-mobile": string;
207
+ "line-height-h3-mobile": string;
208
+ "font-size-h4-mobile": string;
209
+ "line-height-h4-mobile": string;
210
+ "font-size-h5-mobile": string;
211
+ "line-height-h5-mobile": string;
212
+ "font-size-display-s": string;
213
+ "line-height-display-s": string;
214
+ "font-size-display-s-mobile": string;
215
+ "line-height-display-s-mobile": string;
216
+ "font-size-display-m": string;
217
+ "line-height-display-m": string;
218
+ "font-size-display-m-mobile": string;
219
+ "line-height-display-m-mobile": string;
220
+ "font-size-display-l": string;
221
+ "line-height-display-l": string;
222
+ "font-size-display-l-mobile": string;
223
+ "line-height-display-l-mobile": string;
202
224
  "letter-spacing-body": string;
203
225
  "letter-spacing-ui": string;
204
226
  "letter-spacing-heading": string;
package/esm/Theme/themes/buenos_aires.js CHANGED
@@ -201,6 +201,28 @@ var THEME_BA = {
201
201
  "line-height-display-lg-mobile": "3.625rem",
202
202
  "font-size-display-xl-mobile": "3.5rem",
203
203
  "line-height-display-xl-mobile": "3.625rem",
204
+ "font-size-h1-mobile": "2rem",
205
+ "line-height-h1-mobile": "2.5rem",
206
+ "font-size-h2-mobile": "1.75rem",
207
+ "line-height-h2-mobile": "2.25rem",
208
+ "font-size-h3-mobile": "1.5rem",
209
+ "line-height-h3-mobile": "2rem",
210
+ "font-size-h4-mobile": "1.25rem",
211
+ "line-height-h4-mobile": "1.75rem",
212
+ "font-size-h5-mobile": "1.125rem",
213
+ "line-height-h5-mobile": "1.625rem",
214
+ "font-size-display-s": "3.5rem",
215
+ "line-height-display-s": "4rem",
216
+ "font-size-display-s-mobile": "2.5rem",
217
+ "line-height-display-s-mobile": "3rem",
218
+ "font-size-display-m": "4.5rem",
219
+ "line-height-display-m": "5rem",
220
+ "font-size-display-m-mobile": "3rem",
221
+ "line-height-display-m-mobile": "3.5rem",
222
+ "font-size-display-l": "5.5rem",
223
+ "line-height-display-l": "6rem",
224
+ "font-size-display-l-mobile": "3.5rem",
225
+ "line-height-display-l-mobile": "4rem",
204
226
  "letter-spacing-body": "0",
205
227
  "letter-spacing-ui": "0",
206
228
  "letter-spacing-heading": "-0.02em",
package/esm/Theme/themes/jaipur.d.ts CHANGED
@@ -199,6 +199,28 @@ declare const _default: {
199
199
  "line-height-display-lg-mobile": string;
200
200
  "font-size-display-xl-mobile": string;
201
201
  "line-height-display-xl-mobile": string;
202
+ "font-size-h1-mobile": string;
203
+ "line-height-h1-mobile": string;
204
+ "font-size-h2-mobile": string;
205
+ "line-height-h2-mobile": string;
206
+ "font-size-h3-mobile": string;
207
+ "line-height-h3-mobile": string;
208
+ "font-size-h4-mobile": string;
209
+ "line-height-h4-mobile": string;
210
+ "font-size-h5-mobile": string;
211
+ "line-height-h5-mobile": string;
212
+ "font-size-display-s": string;
213
+ "line-height-display-s": string;
214
+ "font-size-display-s-mobile": string;
215
+ "line-height-display-s-mobile": string;
216
+ "font-size-display-m": string;
217
+ "line-height-display-m": string;
218
+ "font-size-display-m-mobile": string;
219
+ "line-height-display-m-mobile": string;
220
+ "font-size-display-l": string;
221
+ "line-height-display-l": string;
222
+ "font-size-display-l-mobile": string;
223
+ "line-height-display-l-mobile": string;
202
224
  "letter-spacing-body": string;
203
225
  "letter-spacing-ui": string;
204
226
  "letter-spacing-heading": string;
package/esm/Theme/themes/jaipur.js CHANGED
@@ -201,6 +201,28 @@ var theme_jaipur = {
201
201
  "line-height-display-lg-mobile": "3.625rem",
202
202
  "font-size-display-xl-mobile": "3.5rem",
203
203
  "line-height-display-xl-mobile": "3.625rem",
204
+ "font-size-h1-mobile": "2rem",
205
+ "line-height-h1-mobile": "2.5rem",
206
+ "font-size-h2-mobile": "1.75rem",
207
+ "line-height-h2-mobile": "2.25rem",
208
+ "font-size-h3-mobile": "1.5rem",
209
+ "line-height-h3-mobile": "2rem",
210
+ "font-size-h4-mobile": "1.25rem",
211
+ "line-height-h4-mobile": "1.75rem",
212
+ "font-size-h5-mobile": "1.125rem",
213
+ "line-height-h5-mobile": "1.625rem",
214
+ "font-size-display-s": "3.5rem",
215
+ "line-height-display-s": "4rem",
216
+ "font-size-display-s-mobile": "2.5rem",
217
+ "line-height-display-s-mobile": "3rem",
218
+ "font-size-display-m": "4.5rem",
219
+ "line-height-display-m": "5rem",
220
+ "font-size-display-m-mobile": "3rem",
221
+ "line-height-display-m-mobile": "3.5rem",
222
+ "font-size-display-l": "5.5rem",
223
+ "line-height-display-l": "6rem",
224
+ "font-size-display-l-mobile": "3.5rem",
225
+ "line-height-display-l-mobile": "4rem",
204
226
  "letter-spacing-body": "0",
205
227
  "letter-spacing-ui": "0",
206
228
  "letter-spacing-heading": "-0.02em",
package/esm/Typography/Typography.module.css CHANGED
@@ -4,63 +4,85 @@
4
4
  letter-spacing: var(--letter-spacing-ui, 0);
5
5
  }
6
6
 
7
+ .clamp {
8
+ -webkit-box-orient: vertical;
9
+ display: -webkit-box;
10
+ -webkit-line-clamp: var(--typography-lines);
11
+ overflow: hidden;
12
+ text-overflow: ellipsis;
13
+ white-space: normal;
14
+ }
15
+
7
16
  .size_xs {
17
+ font-family: var(--font-family-body, inherit);
8
18
  font-size: var(--font-size-text-xs, 0.75rem);
9
19
  line-height: var(--line-height-text-xs, 1rem);
10
20
  }
11
21
  .size_s {
22
+ font-family: var(--font-family-body, inherit);
12
23
  font-size: var(--font-size-text-sm, 0.875rem);
13
24
  line-height: var(--line-height-text-sm, 1.25rem);
14
25
  }
15
26
  .size_m {
27
+ font-family: var(--font-family-body, inherit);
16
28
  font-size: var(--font-size-text-md, 1rem);
17
29
  line-height: var(--line-height-text-md, 1.5rem);
18
30
  }
19
31
  .size_l {
32
+ font-family: var(--font-family-body, inherit);
20
33
  font-size: var(--font-size-text-lg, 1.125rem);
21
34
  line-height: var(--line-height-text-lg, 1.625rem);
22
35
  }
23
36
  .size_text-xs {
37
+ font-family: var(--font-family-body, inherit);
24
38
  font-size: var(--font-size-text-xs, 0.75rem);
25
39
  line-height: var(--line-height-text-xs, 1rem);
26
40
  }
27
41
  .size_text-sm {
42
+ font-family: var(--font-family-body, inherit);
28
43
  font-size: var(--font-size-text-sm, 0.875rem);
29
44
  line-height: var(--line-height-text-sm, 1.25rem);
30
45
  }
31
46
  .size_text-md {
47
+ font-family: var(--font-family-body, inherit);
32
48
  font-size: var(--font-size-text-md, 1rem);
33
49
  line-height: var(--line-height-text-md, 1.5rem);
34
50
  }
35
51
  .size_text-lg {
52
+ font-family: var(--font-family-body, inherit);
36
53
  font-size: var(--font-size-text-lg, 1.125rem);
37
54
  line-height: var(--line-height-text-lg, 1.625rem);
38
55
  }
39
56
  .size_heading-sm {
57
+ font-family: var(--font-family-display, inherit);
40
58
  font-size: var(--font-size-heading-sm, 1.25rem);
41
59
  font-weight: var(--font-weight-semibold, 600);
42
60
  letter-spacing: var(--letter-spacing-heading, 0);
43
61
  line-height: var(--line-height-heading-sm, 1.75rem);
44
62
  }
45
63
  .size_heading-md {
64
+ font-family: var(--font-family-display, inherit);
46
65
  font-size: var(--font-size-heading-md, 1.5rem);
47
66
  font-weight: var(--font-weight-semibold, 600);
48
67
  letter-spacing: var(--letter-spacing-heading, 0);
49
68
  line-height: var(--line-height-heading-md, 2rem);
50
69
  }
51
70
  .size_heading-lg {
71
+ font-family: var(--font-family-display, inherit);
52
72
  font-size: var(--font-size-heading-lg, 2rem);
53
73
  font-weight: var(--font-weight-semibold, 600);
54
74
  letter-spacing: var(--letter-spacing-heading, 0);
55
75
  line-height: var(--line-height-heading-lg, 2.5rem);
56
76
  }
57
77
  .size_heading-xl {
78
+ font-family: var(--font-family-display, inherit);
58
79
  font-size: var(--font-size-heading-xl, 2.5rem);
59
80
  font-weight: var(--font-weight-semibold, 600);
60
81
  letter-spacing: var(--letter-spacing-heading, 0);
61
82
  line-height: var(--line-height-heading-xl, 3rem);
62
83
  }
63
84
  .size_display-sm {
85
+ font-family: var(--font-family-display, inherit);
64
86
  font-size: var(--font-size-display-sm, 3rem);
65
87
  font-weight: var(--font-weight-semibold, 600);
66
88
  letter-spacing: var(--letter-spacing-display, 0);
@@ -73,6 +95,7 @@
73
95
  }
74
96
  }
75
97
  .size_display-md {
98
+ font-family: var(--font-family-display, inherit);
76
99
  font-size: var(--font-size-display-md, 4rem);
77
100
  font-weight: var(--font-weight-semibold, 600);
78
101
  letter-spacing: var(--letter-spacing-display, 0);
@@ -85,6 +108,7 @@
85
108
  }
86
109
  }
87
110
  .size_display-lg {
111
+ font-family: var(--font-family-display, inherit);
88
112
  font-size: var(--font-size-display-lg, 5rem);
89
113
  font-weight: var(--font-weight-semibold, 600);
90
114
  letter-spacing: var(--letter-spacing-display, 0);
@@ -97,6 +121,7 @@
97
121
  }
98
122
  }
99
123
  .size_display-xl {
124
+ font-family: var(--font-family-display, inherit);
100
125
  font-size: var(--font-size-display-xl, 6.5rem);
101
126
  font-weight: var(--font-weight-semibold, 600);
102
127
  letter-spacing: var(--letter-spacing-display, 0);
@@ -108,37 +133,112 @@
108
133
  line-height: var(--line-height-display-xl-mobile, 3.625rem);
109
134
  }
110
135
  }
136
+ .size_display-s {
137
+ font-family: var(--font-family-display, inherit);
138
+ font-size: var(--font-size-display-s, 3.5rem);
139
+ font-weight: var(--font-weight-semibold, 600);
140
+ letter-spacing: var(--letter-spacing-display, 0);
141
+ line-height: var(--line-height-display-s, 4rem);
142
+ }
143
+ @media (width < 48rem) {
144
+ .size_display-s {
145
+ font-size: var(--font-size-display-s-mobile, 2.5rem);
146
+ line-height: var(--line-height-display-s-mobile, 3rem);
147
+ }
148
+ }
149
+ .size_display-m {
150
+ font-family: var(--font-family-display, inherit);
151
+ font-size: var(--font-size-display-m, 4.5rem);
152
+ font-weight: var(--font-weight-semibold, 600);
153
+ letter-spacing: var(--letter-spacing-display, 0);
154
+ line-height: var(--line-height-display-m, 5rem);
155
+ }
156
+ @media (width < 48rem) {
157
+ .size_display-m {
158
+ font-size: var(--font-size-display-m-mobile, 3rem);
159
+ line-height: var(--line-height-display-m-mobile, 3.5rem);
160
+ }
161
+ }
162
+ .size_display-l {
163
+ font-family: var(--font-family-display, inherit);
164
+ font-size: var(--font-size-display-l, 5.5rem);
165
+ font-weight: var(--font-weight-semibold, 600);
166
+ letter-spacing: var(--letter-spacing-display, 0);
167
+ line-height: var(--line-height-display-l, 6rem);
168
+ }
169
+ @media (width < 48rem) {
170
+ .size_display-l {
171
+ font-size: var(--font-size-display-l-mobile, 3.5rem);
172
+ line-height: var(--line-height-display-l-mobile, 4rem);
173
+ }
174
+ }
111
175
  .size_h1 {
176
+ font-family: var(--font-family-display, inherit);
112
177
  font-size: var(--font-size-display-sm, 3rem);
113
178
  font-weight: var(--font-weight-semibold, 600);
114
179
  letter-spacing: var(--letter-spacing-display, 0);
115
180
  line-height: var(--line-height-display-sm, 3.25rem);
116
181
  }
182
+ @media (width < 48rem) {
183
+ .size_h1 {
184
+ font-size: var(--font-size-h1-mobile, 2rem);
185
+ line-height: var(--line-height-h1-mobile, 2.5rem);
186
+ }
187
+ }
117
188
  .size_h2 {
189
+ font-family: var(--font-family-display, inherit);
118
190
  font-size: var(--font-size-heading-xl, 2.5rem);
119
191
  font-weight: var(--font-weight-semibold, 600);
120
192
  letter-spacing: var(--letter-spacing-heading, 0);
121
193
  line-height: var(--line-height-heading-xl, 3rem);
122
194
  }
195
+ @media (width < 48rem) {
196
+ .size_h2 {
197
+ font-size: var(--font-size-h2-mobile, 1.75rem);
198
+ line-height: var(--line-height-h2-mobile, 2.25rem);
199
+ }
200
+ }
123
201
  .size_h3 {
202
+ font-family: var(--font-family-display, inherit);
124
203
  font-size: var(--font-size-heading-lg, 2rem);
125
204
  font-weight: var(--font-weight-semibold, 600);
126
205
  letter-spacing: var(--letter-spacing-heading, 0);
127
206
  line-height: var(--line-height-heading-lg, 2.5rem);
128
207
  }
208
+ @media (width < 48rem) {
209
+ .size_h3 {
210
+ font-size: var(--font-size-h3-mobile, 1.5rem);
211
+ line-height: var(--line-height-h3-mobile, 2rem);
212
+ }
213
+ }
129
214
  .size_h4 {
215
+ font-family: var(--font-family-display, inherit);
130
216
  font-size: var(--font-size-heading-md, 1.5rem);
131
217
  font-weight: var(--font-weight-semibold, 600);
132
218
  letter-spacing: var(--letter-spacing-heading, 0);
133
219
  line-height: var(--line-height-heading-md, 2rem);
134
220
  }
221
+ @media (width < 48rem) {
222
+ .size_h4 {
223
+ font-size: var(--font-size-h4-mobile, 1.25rem);
224
+ line-height: var(--line-height-h4-mobile, 1.75rem);
225
+ }
226
+ }
135
227
  .size_h5 {
228
+ font-family: var(--font-family-display, inherit);
136
229
  font-size: var(--font-size-heading-sm, 1.25rem);
137
230
  font-weight: var(--font-weight-semibold, 600);
138
231
  letter-spacing: var(--letter-spacing-heading, 0);
139
232
  line-height: var(--line-height-heading-sm, 1.75rem);
140
233
  }
234
+ @media (width < 48rem) {
235
+ .size_h5 {
236
+ font-size: var(--font-size-h5-mobile, 1.125rem);
237
+ line-height: var(--line-height-h5-mobile, 1.625rem);
238
+ }
239
+ }
141
240
  .size_h6 {
241
+ font-family: var(--font-family-display, inherit);
142
242
  font-size: var(--font-size-text-md, 1rem);
143
243
  font-weight: var(--font-weight-semibold, 600);
144
244
  line-height: var(--line-height-text-md, 1.5rem);
package/esm/Typography/index.js CHANGED
@@ -12,11 +12,14 @@ var Typography = function Typography(_a) {
12
12
  size = _a.size,
13
13
  style = _a.style,
14
14
  fontWeight = _a.fontWeight,
15
+ lines = _a.lines,
15
16
  className = _a.className,
16
- props = __rest(_a, ["tag", "children", "variant", "size", "style", "fontWeight", "className"]);
17
+ props = __rest(_a, ["tag", "children", "variant", "size", "style", "fontWeight", "lines", "className"]);
17
18
  return /*#__PURE__*/React.createElement(Component, Object.assign({}, props, {
18
- style: Object.assign({}, style),
19
- className: clsx(_defineProperty(_defineProperty(_defineProperty({}, styles["size_".concat(size)], Boolean(size)), styles["font-weight_".concat(fontWeight)], Boolean(fontWeight)), styles["variant_".concat(variant)], Boolean(variant)), className)
19
+ style: lines ? Object.assign(Object.assign({}, style), {
20
+ "--typography-lines": lines
21
+ }) : Object.assign({}, style),
22
+ className: clsx(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles["size_".concat(size)], Boolean(size)), styles["font-weight_".concat(fontWeight)], Boolean(fontWeight)), styles["variant_".concat(variant)], Boolean(variant)), styles.clamp, Boolean(lines)), className)
20
23
  }), children);
21
24
  };
22
25
 
package/esm/Typography/index.props.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { CSSProperties } from "react";
2
2
  export type TypographyVariant = "primary" | "secondary" | "tertiary" | "disabled" | "inverse" | "alert" | "success" | "warning" | "info";
3
3
  export type TypographyFontWeight = "normal" | "regular" | "medium" | "semibold" | "bold";
4
- export type TypographySize = "xs" | "s" | "m" | "l" | "text-xs" | "text-sm" | "text-md" | "text-lg" | "heading-sm" | "heading-md" | "heading-lg" | "heading-xl" | "display-sm" | "display-md" | "display-lg" | "display-xl" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
4
+ export type TypographySize = "xs" | "s" | "m" | "l" | "text-xs" | "text-sm" | "text-md" | "text-lg" | "heading-sm" | "heading-md" | "heading-lg" | "heading-xl" | "display-sm" | "display-md" | "display-lg" | "display-xl" | "display-s" | "display-m" | "display-l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
5
5
  export type TypographyTag = "span" | "label" | "legend" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "s";
6
6
  export type TypographyProps = {
7
7
  className?: string;
@@ -9,5 +9,7 @@ export type TypographyProps = {
9
9
  variant?: TypographyVariant;
10
10
  size?: TypographySize;
11
11
  fontWeight?: TypographyFontWeight;
12
+ /** Limits the text to this many lines and ends the last one with an ellipsis. */
13
+ lines?: number;
12
14
  style?: CSSProperties;
13
15
  };
package/esm/hooks/useModalStack/index.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Tracks open modals so only the topmost one reacts to Escape and Tab.
3
+ * An inactive entry is not registered and counts as topmost only while no
4
+ * modal is open.
5
+ */
6
+ export declare const useModalStack: (id: string, active?: boolean) => () => boolean;
package/esm/hooks/useModalStack/index.js ADDED
@@ -0,0 +1,24 @@
1
+ import { useEffect, useCallback } from 'react';
2
+
3
+ var stack = [];
4
+ /**
5
+ * Tracks open modals so only the topmost one reacts to Escape and Tab.
6
+ * An inactive entry is not registered and counts as topmost only while no
7
+ * modal is open.
8
+ */
9
+ var useModalStack = function useModalStack(id) {
10
+ var active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
11
+ useEffect(function () {
12
+ if (!active) return;
13
+ stack.push(id);
14
+ return function () {
15
+ var index = stack.lastIndexOf(id);
16
+ if (index !== -1) stack.splice(index, 1);
17
+ };
18
+ }, [id, active]);
19
+ return useCallback(function () {
20
+ return stack.length ? stack[stack.length - 1] === id : !active;
21
+ }, [id, active]);
22
+ };
23
+
24
+ export { useModalStack };
package/esm/theme_ba_variables.css CHANGED
@@ -199,6 +199,28 @@
199
199
  --line-height-display-lg-mobile: 3.625rem;
200
200
  --font-size-display-xl-mobile: 3.5rem;
201
201
  --line-height-display-xl-mobile: 3.625rem;
202
+ --font-size-h1-mobile: 2rem;
203
+ --line-height-h1-mobile: 2.5rem;
204
+ --font-size-h2-mobile: 1.75rem;
205
+ --line-height-h2-mobile: 2.25rem;
206
+ --font-size-h3-mobile: 1.5rem;
207
+ --line-height-h3-mobile: 2rem;
208
+ --font-size-h4-mobile: 1.25rem;
209
+ --line-height-h4-mobile: 1.75rem;
210
+ --font-size-h5-mobile: 1.125rem;
211
+ --line-height-h5-mobile: 1.625rem;
212
+ --font-size-display-s: 3.5rem;
213
+ --line-height-display-s: 4rem;
214
+ --font-size-display-s-mobile: 2.5rem;
215
+ --line-height-display-s-mobile: 3rem;
216
+ --font-size-display-m: 4.5rem;
217
+ --line-height-display-m: 5rem;
218
+ --font-size-display-m-mobile: 3rem;
219
+ --line-height-display-m-mobile: 3.5rem;
220
+ --font-size-display-l: 5.5rem;
221
+ --line-height-display-l: 6rem;
222
+ --font-size-display-l-mobile: 3.5rem;
223
+ --line-height-display-l-mobile: 4rem;
202
224
  --letter-spacing-body: 0;
203
225
  --letter-spacing-ui: 0;
204
226
  --letter-spacing-heading: -0.02em;
package/esm/theme_jaipur_variables.css CHANGED
@@ -199,6 +199,28 @@
199
199
  --line-height-display-lg-mobile: 3.625rem;
200
200
  --font-size-display-xl-mobile: 3.5rem;
201
201
  --line-height-display-xl-mobile: 3.625rem;
202
+ --font-size-h1-mobile: 2rem;
203
+ --line-height-h1-mobile: 2.5rem;
204
+ --font-size-h2-mobile: 1.75rem;
205
+ --line-height-h2-mobile: 2.25rem;
206
+ --font-size-h3-mobile: 1.5rem;
207
+ --line-height-h3-mobile: 2rem;
208
+ --font-size-h4-mobile: 1.25rem;
209
+ --line-height-h4-mobile: 1.75rem;
210
+ --font-size-h5-mobile: 1.125rem;
211
+ --line-height-h5-mobile: 1.625rem;
212
+ --font-size-display-s: 3.5rem;
213
+ --line-height-display-s: 4rem;
214
+ --font-size-display-s-mobile: 2.5rem;
215
+ --line-height-display-s-mobile: 3rem;
216
+ --font-size-display-m: 4.5rem;
217
+ --line-height-display-m: 5rem;
218
+ --font-size-display-m-mobile: 3rem;
219
+ --line-height-display-m-mobile: 3.5rem;
220
+ --font-size-display-l: 5.5rem;
221
+ --line-height-display-l: 6rem;
222
+ --font-size-display-l-mobile: 3.5rem;
223
+ --line-height-display-l-mobile: 4rem;
202
224
  --letter-spacing-body: 0;
203
225
  --letter-spacing-ui: 0;
204
226
  --letter-spacing-heading: -0.02em;
package/hooks/useModalStack/index.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Tracks open modals so only the topmost one reacts to Escape and Tab.
3
+ * An inactive entry is not registered and counts as topmost only while no
4
+ * modal is open.
5
+ */
6
+ export declare const useModalStack: (id: string, active?: boolean) => () => boolean;
package/hooks/useModalStack/index.js ADDED
@@ -0,0 +1,26 @@
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+
5
+ var stack = [];
6
+ /**
7
+ * Tracks open modals so only the topmost one reacts to Escape and Tab.
8
+ * An inactive entry is not registered and counts as topmost only while no
9
+ * modal is open.
10
+ */
11
+ var useModalStack = function useModalStack(id) {
12
+ var active = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
13
+ React.useEffect(function () {
14
+ if (!active) return;
15
+ stack.push(id);
16
+ return function () {
17
+ var index = stack.lastIndexOf(id);
18
+ if (index !== -1) stack.splice(index, 1);
19
+ };
20
+ }, [id, active]);
21
+ return React.useCallback(function () {
22
+ return stack.length ? stack[stack.length - 1] === id : !active;
23
+ }, [id, active]);
24
+ };
25
+
26
+ exports.useModalStack = useModalStack;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "colibri-ui",
3
- "version": "0.8.81",
3
+ "version": "0.8.83",
4
4
  "description": "React UI components library",
5
5
  "main": "index.js",
6
6
  "types": "index.d.ts",
package/theme_ba_variables.css CHANGED
@@ -199,6 +199,28 @@
199
199
  --line-height-display-lg-mobile: 3.625rem;
200
200
  --font-size-display-xl-mobile: 3.5rem;
201
201
  --line-height-display-xl-mobile: 3.625rem;
202
+ --font-size-h1-mobile: 2rem;
203
+ --line-height-h1-mobile: 2.5rem;
204
+ --font-size-h2-mobile: 1.75rem;
205
+ --line-height-h2-mobile: 2.25rem;
206
+ --font-size-h3-mobile: 1.5rem;
207
+ --line-height-h3-mobile: 2rem;
208
+ --font-size-h4-mobile: 1.25rem;
209
+ --line-height-h4-mobile: 1.75rem;
210
+ --font-size-h5-mobile: 1.125rem;
211
+ --line-height-h5-mobile: 1.625rem;
212
+ --font-size-display-s: 3.5rem;
213
+ --line-height-display-s: 4rem;
214
+ --font-size-display-s-mobile: 2.5rem;
215
+ --line-height-display-s-mobile: 3rem;
216
+ --font-size-display-m: 4.5rem;
217
+ --line-height-display-m: 5rem;
218
+ --font-size-display-m-mobile: 3rem;
219
+ --line-height-display-m-mobile: 3.5rem;
220
+ --font-size-display-l: 5.5rem;
221
+ --line-height-display-l: 6rem;
222
+ --font-size-display-l-mobile: 3.5rem;
223
+ --line-height-display-l-mobile: 4rem;
202
224
  --letter-spacing-body: 0;
203
225
  --letter-spacing-ui: 0;
204
226
  --letter-spacing-heading: -0.02em;
package/theme_jaipur_variables.css CHANGED
@@ -199,6 +199,28 @@
199
199
  --line-height-display-lg-mobile: 3.625rem;
200
200
  --font-size-display-xl-mobile: 3.5rem;
201
201
  --line-height-display-xl-mobile: 3.625rem;
202
+ --font-size-h1-mobile: 2rem;
203
+ --line-height-h1-mobile: 2.5rem;
204
+ --font-size-h2-mobile: 1.75rem;
205
+ --line-height-h2-mobile: 2.25rem;
206
+ --font-size-h3-mobile: 1.5rem;
207
+ --line-height-h3-mobile: 2rem;
208
+ --font-size-h4-mobile: 1.25rem;
209
+ --line-height-h4-mobile: 1.75rem;
210
+ --font-size-h5-mobile: 1.125rem;
211
+ --line-height-h5-mobile: 1.625rem;
212
+ --font-size-display-s: 3.5rem;
213
+ --line-height-display-s: 4rem;
214
+ --font-size-display-s-mobile: 2.5rem;
215
+ --line-height-display-s-mobile: 3rem;
216
+ --font-size-display-m: 4.5rem;
217
+ --line-height-display-m: 5rem;
218
+ --font-size-display-m-mobile: 3rem;
219
+ --line-height-display-m-mobile: 3.5rem;
220
+ --font-size-display-l: 5.5rem;
221
+ --line-height-display-l: 6rem;
222
+ --font-size-display-l-mobile: 3.5rem;
223
+ --line-height-display-l-mobile: 4rem;
202
224
  --letter-spacing-body: 0;
203
225
  --letter-spacing-ui: 0;
204
226
  --letter-spacing-heading: -0.02em;
package/Modal/useModalStack.d.ts DELETED
@@ -1,2 +0,0 @@
1
- /** Tracks open modals so only the topmost one reacts to Escape and Tab. */
2
- export declare const useModalStack: (id: string) => () => boolean;
package/Modal/useModalStack.js DELETED
@@ -1,20 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
-
5
- var stack = [];
6
- /** Tracks open modals so only the topmost one reacts to Escape and Tab. */
7
- var useModalStack = function useModalStack(id) {
8
- React.useEffect(function () {
9
- stack.push(id);
10
- return function () {
11
- var index = stack.lastIndexOf(id);
12
- if (index !== -1) stack.splice(index, 1);
13
- };
14
- }, [id]);
15
- return React.useCallback(function () {
16
- return stack[stack.length - 1] === id;
17
- }, [id]);
18
- };
19
-
20
- exports.useModalStack = useModalStack;
package/esm/Modal/useModalStack.d.ts DELETED
@@ -1,2 +0,0 @@
1
- /** Tracks open modals so only the topmost one reacts to Escape and Tab. */
2
- export declare const useModalStack: (id: string) => () => boolean;
package/esm/Modal/useModalStack.js DELETED
@@ -1,18 +0,0 @@
1
- import { useEffect, useCallback } from 'react';
2
-
3
- var stack = [];
4
- /** Tracks open modals so only the topmost one reacts to Escape and Tab. */
5
- var useModalStack = function useModalStack(id) {
6
- useEffect(function () {
7
- stack.push(id);
8
- return function () {
9
- var index = stack.lastIndexOf(id);
10
- if (index !== -1) stack.splice(index, 1);
11
- };
12
- }, [id]);
13
- return useCallback(function () {
14
- return stack[stack.length - 1] === id;
15
- }, [id]);
16
- };
17
-
18
- export { useModalStack };