@zendeskgarden/react-typography 8.38.0 → 8.40.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.
package/dist/index.cjs.js CHANGED
@@ -78,24 +78,14 @@ function _objectWithoutProperties(source, excluded) {
78
78
  return target;
79
79
  }
80
80
 
81
- function _taggedTemplateLiteral(strings, raw) {
82
- if (!raw) {
83
- raw = strings.slice(0);
84
- }
85
-
86
- return Object.freeze(Object.defineProperties(strings, {
87
- raw: {
88
- value: Object.freeze(raw)
89
- }
90
- }));
91
- }
92
-
93
- var _templateObject$b;
94
81
  var COMPONENT_ID$9 = 'typography.blockquote';
95
82
  var StyledBlockquote = styled__default['default'].blockquote.attrs({
96
83
  'data-garden-id': COMPONENT_ID$9,
97
- 'data-garden-version': '8.38.0'
98
- })(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n margin: 0;\n /* stylelint-disable property-no-unknown */\n border-", ": ", " solid;\n border-color: ", ";\n padding: 0;\n padding-", ": ", "px;\n /* stylelint-enable property-no-unknown */\n direction: ", ";\n\n p + &,\n & + & {\n margin-top: ", ";\n }\n\n ", ";\n"])), function (props) {
84
+ 'data-garden-version': '8.40.1'
85
+ }).withConfig({
86
+ displayName: "StyledBlockquote",
87
+ componentId: "sc-1tt3ye0-0"
88
+ })(["margin:0;border-", ":", " solid;border-color:", ";padding:0;padding-", ":", "px;direction:", ";p + &,& + &{margin-top:", ";}", ";"], function (props) {
99
89
  return props.theme.rtl ? 'right' : 'left';
100
90
  }, function (props) {
101
91
  return props.theme.shadowWidths.sm;
@@ -117,7 +107,6 @@ StyledBlockquote.defaultProps = {
117
107
  size: 'md'
118
108
  };
119
109
 
120
- var _templateObject$a;
121
110
  var COMPONENT_ID$8 = 'typography.font';
122
111
  var fontStyles = function fontStyles(props) {
123
112
  var monospace = props.isMonospace && ['sm', 'md', 'lg', 'inherit'].indexOf(props.size) !== -1;
@@ -152,8 +141,11 @@ var fontStyles = function fontStyles(props) {
152
141
  };
153
142
  var StyledFont = styled__default['default'].div.attrs({
154
143
  'data-garden-id': COMPONENT_ID$8,
155
- 'data-garden-version': '8.38.0'
156
- })(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n ", ";\n ", ";\n"])), function (props) {
144
+ 'data-garden-version': '8.40.1'
145
+ }).withConfig({
146
+ displayName: "StyledFont",
147
+ componentId: "sc-1iildbo-0"
148
+ })(["", ";", ";"], function (props) {
157
149
  return fontStyles(props);
158
150
  }, function (props) {
159
151
  return reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props);
@@ -163,7 +155,6 @@ StyledFont.defaultProps = {
163
155
  size: 'inherit'
164
156
  };
165
157
 
166
- var _templateObject$9;
167
158
  var COMPONENT_ID$7 = 'typography.code';
168
159
  var colorStyles$2 = function colorStyles(props) {
169
160
  var hue = props.hue || 'neutralHue';
@@ -174,9 +165,12 @@ var colorStyles$2 = function colorStyles(props) {
174
165
  };
175
166
  var StyledCode = styled__default['default'](StyledFont).attrs({
176
167
  'data-garden-id': COMPONENT_ID$7,
177
- 'data-garden-version': '8.38.0',
168
+ 'data-garden-version': '8.40.1',
178
169
  as: 'code'
179
- })(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n border-radius: ", ";\n padding: 1.5px;\n\n ", ";\n\n ", ";\n"])), function (props) {
170
+ }).withConfig({
171
+ displayName: "StyledCode",
172
+ componentId: "sc-l8yvmf-0"
173
+ })(["border-radius:", ";padding:1.5px;", ";", ";"], function (props) {
180
174
  return props.theme.borderRadii.sm;
181
175
  }, function (props) {
182
176
  return colorStyles$2(props);
@@ -190,7 +184,6 @@ StyledCode.defaultProps = {
190
184
  size: 'inherit'
191
185
  };
192
186
 
193
- var _templateObject$8;
194
187
  var COMPONENT_ID$6 = 'typography.codeblock';
195
188
  var colorStyles$1 = function colorStyles(props) {
196
189
  var backgroundColor = reactTheming.getColor('neutralHue', props.isLight ? 100 : 1000, props.theme);
@@ -199,8 +192,11 @@ var colorStyles$1 = function colorStyles(props) {
199
192
  };
200
193
  var StyledCodeBlock = styled__default['default'].pre.attrs({
201
194
  'data-garden-id': COMPONENT_ID$6,
202
- 'data-garden-version': '8.38.0'
203
- })(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n display: table;\n margin: 0;\n padding: ", "px;\n box-sizing: border-box;\n width: 100%;\n direction: ltr;\n white-space: pre;\n counter-reset: linenumber;\n\n ", ";\n\n ", ";\n"])), function (props) {
195
+ 'data-garden-version': '8.40.1'
196
+ }).withConfig({
197
+ displayName: "StyledCodeBlock",
198
+ componentId: "sc-5wky57-0"
199
+ })(["display:table;margin:0;padding:", "px;box-sizing:border-box;width:100%;direction:ltr;white-space:pre;counter-reset:linenumber;", ";", ";"], function (props) {
204
200
  return props.theme.space.base * 3;
205
201
  }, function (props) {
206
202
  return colorStyles$1(props);
@@ -211,12 +207,14 @@ StyledCodeBlock.defaultProps = {
211
207
  theme: reactTheming.DEFAULT_THEME
212
208
  };
213
209
 
214
- var _templateObject$7;
215
210
  var COMPONENT_ID$5 = 'typography.codeblock_container';
216
211
  var StyledCodeBlockContainer = styled__default['default'].div.attrs({
217
212
  'data-garden-id': COMPONENT_ID$5,
218
- 'data-garden-version': '8.38.0'
219
- })(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n overflow: auto;\n\n &:focus {\n outline: none;\n }\n\n &[data-garden-focus-visible] {\n box-shadow: ", ";\n }\n\n ", ";\n"])), function (props) {
213
+ 'data-garden-version': '8.40.1'
214
+ }).withConfig({
215
+ displayName: "StyledCodeBlockContainer",
216
+ componentId: "sc-14zgbfw-0"
217
+ })(["overflow:auto;&:focus{outline:none;}&[data-garden-focus-visible]{box-shadow:", ";}", ";"], function (props) {
220
218
  return props.theme.shadows.md(reactTheming.getColor('primaryHue', 600, props.theme, 0.35));
221
219
  }, function (props) {
222
220
  return reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props);
@@ -225,7 +223,6 @@ StyledCodeBlockContainer.defaultProps = {
225
223
  theme: reactTheming.DEFAULT_THEME
226
224
  };
227
225
 
228
- var _templateObject$6;
229
226
  var COMPONENT_ID$4 = 'typography.codeblock_code';
230
227
  var highlightStyles = function highlightStyles(props) {
231
228
  var hue = props.isLight ? props.theme.palette.black : props.theme.palette.white;
@@ -239,10 +236,13 @@ var lineNumberStyles = function lineNumberStyles(props) {
239
236
  };
240
237
  var StyledCodeBlockLine = styled__default['default'](StyledFont).attrs({
241
238
  'data-garden-id': COMPONENT_ID$4,
242
- 'data-garden-version': '8.38.0',
239
+ 'data-garden-version': '8.40.1',
243
240
  as: 'code',
244
241
  isMonospace: true
245
- })(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n display: table-row;\n height: ", "; /* [1] */\n direction: ltr;\n\n ", ";\n\n ", ";\n\n &::after {\n display: inline-block;\n width: ", "px; /* [2] */\n content: '';\n }\n\n ", ";\n"])), function (props) {
242
+ }).withConfig({
243
+ displayName: "StyledCodeBlockLine",
244
+ componentId: "sc-1goay17-0"
245
+ })(["display:table-row;height:", ";direction:ltr;", ";", ";&::after{display:inline-block;width:", "px;content:'';}", ";"], function (props) {
246
246
  return props.theme.lineHeights[props.size];
247
247
  }, function (props) {
248
248
  return props.isHighlighted && highlightStyles(props);
@@ -258,7 +258,6 @@ StyledCodeBlockLine.defaultProps = {
258
258
  theme: reactTheming.DEFAULT_THEME
259
259
  };
260
260
 
261
- var _templateObject$5;
262
261
  var COMPONENT_ID$3 = 'typography.codeblock_token';
263
262
  var colorStyles = function colorStyles(props) {
264
263
  var palette = props.theme.palette;
@@ -279,8 +278,11 @@ var colorStyles = function colorStyles(props) {
279
278
  };
280
279
  var StyledCodeBlockToken = styled__default['default'].span.attrs({
281
280
  'data-garden-id': COMPONENT_ID$3,
282
- 'data-garden-version': '8.38.0'
283
- })(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n display: inline-block;\n\n &.bold {\n font-weight: ", ";\n }\n\n &.italic {\n font-style: italic;\n }\n\n ", ";\n\n ", ";\n"])), function (props) {
281
+ 'data-garden-version': '8.40.1'
282
+ }).withConfig({
283
+ displayName: "StyledCodeBlockToken",
284
+ componentId: "sc-1hkshdq-0"
285
+ })(["display:inline-block;&.bold{font-weight:", ";}&.italic{font-style:italic;}", ";", ";"], function (props) {
284
286
  return props.theme.fontWeights.semibold;
285
287
  }, function (props) {
286
288
  return colorStyles(props);
@@ -291,12 +293,14 @@ StyledCodeBlockToken.defaultProps = {
291
293
  theme: reactTheming.DEFAULT_THEME
292
294
  };
293
295
 
294
- var _templateObject$4;
295
296
  var COMPONENT_ID$2 = 'typography.ellipsis';
296
297
  var StyledEllipsis = styled__default['default'].div.attrs({
297
298
  'data-garden-id': COMPONENT_ID$2,
298
- 'data-garden-version': '8.38.0'
299
- })(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n direction: ", ";\n\n ", ";\n"])), function (props) {
299
+ 'data-garden-version': '8.40.1'
300
+ }).withConfig({
301
+ displayName: "StyledEllipsis",
302
+ componentId: "sc-1u4uqmy-0"
303
+ })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:", ";", ";"], function (props) {
300
304
  return reactTheming.isRtl(props) ? 'rtl' : 'ltr';
301
305
  }, function (props) {
302
306
  return reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props);
@@ -306,7 +310,6 @@ StyledEllipsis.defaultProps = {
306
310
  };
307
311
 
308
312
  var _excluded$e = ["children", "isStart"];
309
- var _templateObject$3;
310
313
  var COMPONENT_ID$1 = 'typography.icon';
311
314
  var sizeStyles = function sizeStyles(props) {
312
315
  var margin = props.isStart && "".concat(props.theme.space.base * 2, "px");
@@ -320,8 +323,11 @@ var StyledIcon = styled__default['default'](function (_ref) {
320
323
  return React__default['default'].cloneElement(React.Children.only(children), props);
321
324
  }).attrs({
322
325
  'data-garden-id': COMPONENT_ID$1,
323
- 'data-garden-version': '8.38.0'
324
- })(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n position: relative;\n top: -1px;\n vertical-align: middle;\n\n ", ";\n\n ", ";\n"])), function (props) {
326
+ 'data-garden-version': '8.40.1'
327
+ }).withConfig({
328
+ displayName: "StyledIcon",
329
+ componentId: "sc-10rfb5b-0"
330
+ })(["position:relative;top:-1px;vertical-align:middle;", ";", ";"], function (props) {
325
331
  return sizeStyles(props);
326
332
  }, function (props) {
327
333
  return reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props);
@@ -330,7 +336,6 @@ StyledIcon.defaultProps = {
330
336
  theme: reactTheming.DEFAULT_THEME
331
337
  };
332
338
 
333
- var _templateObject$2, _templateObject2$1;
334
339
  var listStyles = function listStyles(props) {
335
340
  var rtl = reactTheming.isRtl(props);
336
341
  return styled.css(["direction:", ";margin:0;margin-", ":24px;padding:0;list-style-position:outside;list-style-type:", ";"], rtl ? 'rtl' : 'ltr', rtl ? 'right' : 'left', props.listType);
@@ -338,8 +343,11 @@ var listStyles = function listStyles(props) {
338
343
  var ORDERED_ID$1 = 'typography.ordered_list';
339
344
  var StyledOrderedList = styled__default['default'].ol.attrs({
340
345
  'data-garden-id': ORDERED_ID$1,
341
- 'data-garden-version': '8.38.0'
342
- })(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n ", ";\n ", ";\n"])), function (props) {
346
+ 'data-garden-version': '8.40.1'
347
+ }).withConfig({
348
+ displayName: "StyledList__StyledOrderedList",
349
+ componentId: "sc-jdbsfi-0"
350
+ })(["", ";", ";"], function (props) {
343
351
  return listStyles(props);
344
352
  }, function (props) {
345
353
  return reactTheming.retrieveComponentStyles(ORDERED_ID$1, props);
@@ -350,8 +358,11 @@ StyledOrderedList.defaultProps = {
350
358
  var UNORDERED_ID$1 = 'typography.unordered_list';
351
359
  var StyledUnorderedList = styled__default['default'].ul.attrs({
352
360
  'data-garden-id': UNORDERED_ID$1,
353
- 'data-garden-version': '8.38.0'
354
- })(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n ", ";\n ", ";\n"])), function (props) {
361
+ 'data-garden-version': '8.40.1'
362
+ }).withConfig({
363
+ displayName: "StyledList__StyledUnorderedList",
364
+ componentId: "sc-jdbsfi-1"
365
+ })(["", ";", ";"], function (props) {
355
366
  return listStyles(props);
356
367
  }, function (props) {
357
368
  return reactTheming.retrieveComponentStyles(UNORDERED_ID$1, props);
@@ -360,7 +371,6 @@ StyledUnorderedList.defaultProps = {
360
371
  theme: reactTheming.DEFAULT_THEME
361
372
  };
362
373
 
363
- var _templateObject$1, _templateObject2;
364
374
  var listItemPaddingStyles = function listItemPaddingStyles(props) {
365
375
  var base = props.theme.space.base;
366
376
  var paddingTop = props.space === 'large' ? "".concat(base * 2, "px") : "".concat(base, "px");
@@ -372,9 +382,12 @@ var listItemStyles = function listItemStyles(props) {
372
382
  var ORDERED_ID = 'typography.ordered_list_item';
373
383
  var StyledOrderedListItem = styled__default['default'](StyledFont).attrs({
374
384
  'data-garden-id': ORDERED_ID,
375
- 'data-garden-version': '8.38.0',
385
+ 'data-garden-version': '8.40.1',
376
386
  as: 'li'
377
- })(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n /* stylelint-disable */\n margin-", ": ", ";\n padding-", ": ", ";\n /* stylelint-enable */\n\n ", ";\n\n ", ";\n"])), function (props) {
387
+ }).withConfig({
388
+ displayName: "StyledListItem__StyledOrderedListItem",
389
+ componentId: "sc-9rsipg-0"
390
+ })(["margin-", ":", ";padding-", ":", ";", ";", ";"], function (props) {
378
391
  return reactTheming.isRtl(props) ? 'right' : 'left';
379
392
  }, function (props) {
380
393
  return polished.math("".concat(props.theme.space.base, " * -1px"));
@@ -394,9 +407,12 @@ StyledOrderedListItem.defaultProps = {
394
407
  var UNORDERED_ID = 'typography.unordered_list_item';
395
408
  var StyledUnorderedListItem = styled__default['default'](StyledFont).attrs({
396
409
  'data-garden-id': UNORDERED_ID,
397
- 'data-garden-version': '8.38.0',
410
+ 'data-garden-version': '8.40.1',
398
411
  as: 'li'
399
- })(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", ";\n\n ", ";\n"])), function (props) {
412
+ }).withConfig({
413
+ displayName: "StyledListItem__StyledUnorderedListItem",
414
+ componentId: "sc-9rsipg-1"
415
+ })(["", ";", ";"], function (props) {
400
416
  return listItemStyles(props);
401
417
  }, function (props) {
402
418
  return reactTheming.retrieveComponentStyles(UNORDERED_ID, props);
@@ -406,12 +422,14 @@ StyledUnorderedListItem.defaultProps = {
406
422
  theme: reactTheming.DEFAULT_THEME
407
423
  };
408
424
 
409
- var _templateObject;
410
425
  var COMPONENT_ID = 'typography.paragraph';
411
426
  var StyledParagraph = styled__default['default'].p.attrs({
412
427
  'data-garden-id': COMPONENT_ID,
413
- 'data-garden-version': '8.38.0'
414
- })(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin: 0;\n padding: 0;\n direction: ", ";\n\n blockquote + &,\n & + & {\n margin-top: ", ";\n }\n\n ", ";\n"])), function (props) {
428
+ 'data-garden-version': '8.40.1'
429
+ }).withConfig({
430
+ displayName: "StyledParagraph",
431
+ componentId: "sc-zkuftz-0"
432
+ })(["margin:0;padding:0;direction:", ";blockquote + &,& + &{margin-top:", ";}", ";"], function (props) {
415
433
  return props.theme.rtl ? 'rtl' : 'ltr';
416
434
  }, function (props) {
417
435
  return props.theme.lineHeights[props.size];
package/dist/index.esm.js CHANGED
@@ -67,24 +67,14 @@ function _objectWithoutProperties(source, excluded) {
67
67
  return target;
68
68
  }
69
69
 
70
- function _taggedTemplateLiteral(strings, raw) {
71
- if (!raw) {
72
- raw = strings.slice(0);
73
- }
74
-
75
- return Object.freeze(Object.defineProperties(strings, {
76
- raw: {
77
- value: Object.freeze(raw)
78
- }
79
- }));
80
- }
81
-
82
- var _templateObject$b;
83
70
  var COMPONENT_ID$9 = 'typography.blockquote';
84
71
  var StyledBlockquote = styled.blockquote.attrs({
85
72
  'data-garden-id': COMPONENT_ID$9,
86
- 'data-garden-version': '8.38.0'
87
- })(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n margin: 0;\n /* stylelint-disable property-no-unknown */\n border-", ": ", " solid;\n border-color: ", ";\n padding: 0;\n padding-", ": ", "px;\n /* stylelint-enable property-no-unknown */\n direction: ", ";\n\n p + &,\n & + & {\n margin-top: ", ";\n }\n\n ", ";\n"])), function (props) {
73
+ 'data-garden-version': '8.40.1'
74
+ }).withConfig({
75
+ displayName: "StyledBlockquote",
76
+ componentId: "sc-1tt3ye0-0"
77
+ })(["margin:0;border-", ":", " solid;border-color:", ";padding:0;padding-", ":", "px;direction:", ";p + &,& + &{margin-top:", ";}", ";"], function (props) {
88
78
  return props.theme.rtl ? 'right' : 'left';
89
79
  }, function (props) {
90
80
  return props.theme.shadowWidths.sm;
@@ -106,7 +96,6 @@ StyledBlockquote.defaultProps = {
106
96
  size: 'md'
107
97
  };
108
98
 
109
- var _templateObject$a;
110
99
  var COMPONENT_ID$8 = 'typography.font';
111
100
  var fontStyles = function fontStyles(props) {
112
101
  var monospace = props.isMonospace && ['sm', 'md', 'lg', 'inherit'].indexOf(props.size) !== -1;
@@ -141,8 +130,11 @@ var fontStyles = function fontStyles(props) {
141
130
  };
142
131
  var StyledFont = styled.div.attrs({
143
132
  'data-garden-id': COMPONENT_ID$8,
144
- 'data-garden-version': '8.38.0'
145
- })(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n ", ";\n ", ";\n"])), function (props) {
133
+ 'data-garden-version': '8.40.1'
134
+ }).withConfig({
135
+ displayName: "StyledFont",
136
+ componentId: "sc-1iildbo-0"
137
+ })(["", ";", ";"], function (props) {
146
138
  return fontStyles(props);
147
139
  }, function (props) {
148
140
  return retrieveComponentStyles(COMPONENT_ID$8, props);
@@ -152,7 +144,6 @@ StyledFont.defaultProps = {
152
144
  size: 'inherit'
153
145
  };
154
146
 
155
- var _templateObject$9;
156
147
  var COMPONENT_ID$7 = 'typography.code';
157
148
  var colorStyles$2 = function colorStyles(props) {
158
149
  var hue = props.hue || 'neutralHue';
@@ -163,9 +154,12 @@ var colorStyles$2 = function colorStyles(props) {
163
154
  };
164
155
  var StyledCode = styled(StyledFont).attrs({
165
156
  'data-garden-id': COMPONENT_ID$7,
166
- 'data-garden-version': '8.38.0',
157
+ 'data-garden-version': '8.40.1',
167
158
  as: 'code'
168
- })(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n border-radius: ", ";\n padding: 1.5px;\n\n ", ";\n\n ", ";\n"])), function (props) {
159
+ }).withConfig({
160
+ displayName: "StyledCode",
161
+ componentId: "sc-l8yvmf-0"
162
+ })(["border-radius:", ";padding:1.5px;", ";", ";"], function (props) {
169
163
  return props.theme.borderRadii.sm;
170
164
  }, function (props) {
171
165
  return colorStyles$2(props);
@@ -179,7 +173,6 @@ StyledCode.defaultProps = {
179
173
  size: 'inherit'
180
174
  };
181
175
 
182
- var _templateObject$8;
183
176
  var COMPONENT_ID$6 = 'typography.codeblock';
184
177
  var colorStyles$1 = function colorStyles(props) {
185
178
  var backgroundColor = getColor('neutralHue', props.isLight ? 100 : 1000, props.theme);
@@ -188,8 +181,11 @@ var colorStyles$1 = function colorStyles(props) {
188
181
  };
189
182
  var StyledCodeBlock = styled.pre.attrs({
190
183
  'data-garden-id': COMPONENT_ID$6,
191
- 'data-garden-version': '8.38.0'
192
- })(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n display: table;\n margin: 0;\n padding: ", "px;\n box-sizing: border-box;\n width: 100%;\n direction: ltr;\n white-space: pre;\n counter-reset: linenumber;\n\n ", ";\n\n ", ";\n"])), function (props) {
184
+ 'data-garden-version': '8.40.1'
185
+ }).withConfig({
186
+ displayName: "StyledCodeBlock",
187
+ componentId: "sc-5wky57-0"
188
+ })(["display:table;margin:0;padding:", "px;box-sizing:border-box;width:100%;direction:ltr;white-space:pre;counter-reset:linenumber;", ";", ";"], function (props) {
193
189
  return props.theme.space.base * 3;
194
190
  }, function (props) {
195
191
  return colorStyles$1(props);
@@ -200,12 +196,14 @@ StyledCodeBlock.defaultProps = {
200
196
  theme: DEFAULT_THEME
201
197
  };
202
198
 
203
- var _templateObject$7;
204
199
  var COMPONENT_ID$5 = 'typography.codeblock_container';
205
200
  var StyledCodeBlockContainer = styled.div.attrs({
206
201
  'data-garden-id': COMPONENT_ID$5,
207
- 'data-garden-version': '8.38.0'
208
- })(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n overflow: auto;\n\n &:focus {\n outline: none;\n }\n\n &[data-garden-focus-visible] {\n box-shadow: ", ";\n }\n\n ", ";\n"])), function (props) {
202
+ 'data-garden-version': '8.40.1'
203
+ }).withConfig({
204
+ displayName: "StyledCodeBlockContainer",
205
+ componentId: "sc-14zgbfw-0"
206
+ })(["overflow:auto;&:focus{outline:none;}&[data-garden-focus-visible]{box-shadow:", ";}", ";"], function (props) {
209
207
  return props.theme.shadows.md(getColor('primaryHue', 600, props.theme, 0.35));
210
208
  }, function (props) {
211
209
  return retrieveComponentStyles(COMPONENT_ID$5, props);
@@ -214,7 +212,6 @@ StyledCodeBlockContainer.defaultProps = {
214
212
  theme: DEFAULT_THEME
215
213
  };
216
214
 
217
- var _templateObject$6;
218
215
  var COMPONENT_ID$4 = 'typography.codeblock_code';
219
216
  var highlightStyles = function highlightStyles(props) {
220
217
  var hue = props.isLight ? props.theme.palette.black : props.theme.palette.white;
@@ -228,10 +225,13 @@ var lineNumberStyles = function lineNumberStyles(props) {
228
225
  };
229
226
  var StyledCodeBlockLine = styled(StyledFont).attrs({
230
227
  'data-garden-id': COMPONENT_ID$4,
231
- 'data-garden-version': '8.38.0',
228
+ 'data-garden-version': '8.40.1',
232
229
  as: 'code',
233
230
  isMonospace: true
234
- })(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n display: table-row;\n height: ", "; /* [1] */\n direction: ltr;\n\n ", ";\n\n ", ";\n\n &::after {\n display: inline-block;\n width: ", "px; /* [2] */\n content: '';\n }\n\n ", ";\n"])), function (props) {
231
+ }).withConfig({
232
+ displayName: "StyledCodeBlockLine",
233
+ componentId: "sc-1goay17-0"
234
+ })(["display:table-row;height:", ";direction:ltr;", ";", ";&::after{display:inline-block;width:", "px;content:'';}", ";"], function (props) {
235
235
  return props.theme.lineHeights[props.size];
236
236
  }, function (props) {
237
237
  return props.isHighlighted && highlightStyles(props);
@@ -247,7 +247,6 @@ StyledCodeBlockLine.defaultProps = {
247
247
  theme: DEFAULT_THEME
248
248
  };
249
249
 
250
- var _templateObject$5;
251
250
  var COMPONENT_ID$3 = 'typography.codeblock_token';
252
251
  var colorStyles = function colorStyles(props) {
253
252
  var palette = props.theme.palette;
@@ -268,8 +267,11 @@ var colorStyles = function colorStyles(props) {
268
267
  };
269
268
  var StyledCodeBlockToken = styled.span.attrs({
270
269
  'data-garden-id': COMPONENT_ID$3,
271
- 'data-garden-version': '8.38.0'
272
- })(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n display: inline-block;\n\n &.bold {\n font-weight: ", ";\n }\n\n &.italic {\n font-style: italic;\n }\n\n ", ";\n\n ", ";\n"])), function (props) {
270
+ 'data-garden-version': '8.40.1'
271
+ }).withConfig({
272
+ displayName: "StyledCodeBlockToken",
273
+ componentId: "sc-1hkshdq-0"
274
+ })(["display:inline-block;&.bold{font-weight:", ";}&.italic{font-style:italic;}", ";", ";"], function (props) {
273
275
  return props.theme.fontWeights.semibold;
274
276
  }, function (props) {
275
277
  return colorStyles(props);
@@ -280,12 +282,14 @@ StyledCodeBlockToken.defaultProps = {
280
282
  theme: DEFAULT_THEME
281
283
  };
282
284
 
283
- var _templateObject$4;
284
285
  var COMPONENT_ID$2 = 'typography.ellipsis';
285
286
  var StyledEllipsis = styled.div.attrs({
286
287
  'data-garden-id': COMPONENT_ID$2,
287
- 'data-garden-version': '8.38.0'
288
- })(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n direction: ", ";\n\n ", ";\n"])), function (props) {
288
+ 'data-garden-version': '8.40.1'
289
+ }).withConfig({
290
+ displayName: "StyledEllipsis",
291
+ componentId: "sc-1u4uqmy-0"
292
+ })(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:", ";", ";"], function (props) {
289
293
  return isRtl(props) ? 'rtl' : 'ltr';
290
294
  }, function (props) {
291
295
  return retrieveComponentStyles(COMPONENT_ID$2, props);
@@ -295,7 +299,6 @@ StyledEllipsis.defaultProps = {
295
299
  };
296
300
 
297
301
  var _excluded$e = ["children", "isStart"];
298
- var _templateObject$3;
299
302
  var COMPONENT_ID$1 = 'typography.icon';
300
303
  var sizeStyles = function sizeStyles(props) {
301
304
  var margin = props.isStart && "".concat(props.theme.space.base * 2, "px");
@@ -309,8 +312,11 @@ var StyledIcon = styled(function (_ref) {
309
312
  return React.cloneElement(Children.only(children), props);
310
313
  }).attrs({
311
314
  'data-garden-id': COMPONENT_ID$1,
312
- 'data-garden-version': '8.38.0'
313
- })(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteral(["\n position: relative;\n top: -1px;\n vertical-align: middle;\n\n ", ";\n\n ", ";\n"])), function (props) {
315
+ 'data-garden-version': '8.40.1'
316
+ }).withConfig({
317
+ displayName: "StyledIcon",
318
+ componentId: "sc-10rfb5b-0"
319
+ })(["position:relative;top:-1px;vertical-align:middle;", ";", ";"], function (props) {
314
320
  return sizeStyles(props);
315
321
  }, function (props) {
316
322
  return retrieveComponentStyles(COMPONENT_ID$1, props);
@@ -319,7 +325,6 @@ StyledIcon.defaultProps = {
319
325
  theme: DEFAULT_THEME
320
326
  };
321
327
 
322
- var _templateObject$2, _templateObject2$1;
323
328
  var listStyles = function listStyles(props) {
324
329
  var rtl = isRtl(props);
325
330
  return css(["direction:", ";margin:0;margin-", ":24px;padding:0;list-style-position:outside;list-style-type:", ";"], rtl ? 'rtl' : 'ltr', rtl ? 'right' : 'left', props.listType);
@@ -327,8 +332,11 @@ var listStyles = function listStyles(props) {
327
332
  var ORDERED_ID$1 = 'typography.ordered_list';
328
333
  var StyledOrderedList = styled.ol.attrs({
329
334
  'data-garden-id': ORDERED_ID$1,
330
- 'data-garden-version': '8.38.0'
331
- })(_templateObject$2 || (_templateObject$2 = _taggedTemplateLiteral(["\n ", ";\n ", ";\n"])), function (props) {
335
+ 'data-garden-version': '8.40.1'
336
+ }).withConfig({
337
+ displayName: "StyledList__StyledOrderedList",
338
+ componentId: "sc-jdbsfi-0"
339
+ })(["", ";", ";"], function (props) {
332
340
  return listStyles(props);
333
341
  }, function (props) {
334
342
  return retrieveComponentStyles(ORDERED_ID$1, props);
@@ -339,8 +347,11 @@ StyledOrderedList.defaultProps = {
339
347
  var UNORDERED_ID$1 = 'typography.unordered_list';
340
348
  var StyledUnorderedList = styled.ul.attrs({
341
349
  'data-garden-id': UNORDERED_ID$1,
342
- 'data-garden-version': '8.38.0'
343
- })(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n ", ";\n ", ";\n"])), function (props) {
350
+ 'data-garden-version': '8.40.1'
351
+ }).withConfig({
352
+ displayName: "StyledList__StyledUnorderedList",
353
+ componentId: "sc-jdbsfi-1"
354
+ })(["", ";", ";"], function (props) {
344
355
  return listStyles(props);
345
356
  }, function (props) {
346
357
  return retrieveComponentStyles(UNORDERED_ID$1, props);
@@ -349,7 +360,6 @@ StyledUnorderedList.defaultProps = {
349
360
  theme: DEFAULT_THEME
350
361
  };
351
362
 
352
- var _templateObject$1, _templateObject2;
353
363
  var listItemPaddingStyles = function listItemPaddingStyles(props) {
354
364
  var base = props.theme.space.base;
355
365
  var paddingTop = props.space === 'large' ? "".concat(base * 2, "px") : "".concat(base, "px");
@@ -361,9 +371,12 @@ var listItemStyles = function listItemStyles(props) {
361
371
  var ORDERED_ID = 'typography.ordered_list_item';
362
372
  var StyledOrderedListItem = styled(StyledFont).attrs({
363
373
  'data-garden-id': ORDERED_ID,
364
- 'data-garden-version': '8.38.0',
374
+ 'data-garden-version': '8.40.1',
365
375
  as: 'li'
366
- })(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\n /* stylelint-disable */\n margin-", ": ", ";\n padding-", ": ", ";\n /* stylelint-enable */\n\n ", ";\n\n ", ";\n"])), function (props) {
376
+ }).withConfig({
377
+ displayName: "StyledListItem__StyledOrderedListItem",
378
+ componentId: "sc-9rsipg-0"
379
+ })(["margin-", ":", ";padding-", ":", ";", ";", ";"], function (props) {
367
380
  return isRtl(props) ? 'right' : 'left';
368
381
  }, function (props) {
369
382
  return math("".concat(props.theme.space.base, " * -1px"));
@@ -383,9 +396,12 @@ StyledOrderedListItem.defaultProps = {
383
396
  var UNORDERED_ID = 'typography.unordered_list_item';
384
397
  var StyledUnorderedListItem = styled(StyledFont).attrs({
385
398
  'data-garden-id': UNORDERED_ID,
386
- 'data-garden-version': '8.38.0',
399
+ 'data-garden-version': '8.40.1',
387
400
  as: 'li'
388
- })(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", ";\n\n ", ";\n"])), function (props) {
401
+ }).withConfig({
402
+ displayName: "StyledListItem__StyledUnorderedListItem",
403
+ componentId: "sc-9rsipg-1"
404
+ })(["", ";", ";"], function (props) {
389
405
  return listItemStyles(props);
390
406
  }, function (props) {
391
407
  return retrieveComponentStyles(UNORDERED_ID, props);
@@ -395,12 +411,14 @@ StyledUnorderedListItem.defaultProps = {
395
411
  theme: DEFAULT_THEME
396
412
  };
397
413
 
398
- var _templateObject;
399
414
  var COMPONENT_ID = 'typography.paragraph';
400
415
  var StyledParagraph = styled.p.attrs({
401
416
  'data-garden-id': COMPONENT_ID,
402
- 'data-garden-version': '8.38.0'
403
- })(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin: 0;\n padding: 0;\n direction: ", ";\n\n blockquote + &,\n & + & {\n margin-top: ", ";\n }\n\n ", ";\n"])), function (props) {
417
+ 'data-garden-version': '8.40.1'
418
+ }).withConfig({
419
+ displayName: "StyledParagraph",
420
+ componentId: "sc-zkuftz-0"
421
+ })(["margin:0;padding:0;direction:", ";blockquote + &,& + &{margin-top:", ";}", ";"], function (props) {
404
422
  return props.theme.rtl ? 'rtl' : 'ltr';
405
423
  }, function (props) {
406
424
  return props.theme.lineHeights[props.size];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-typography",
3
- "version": "8.38.0",
3
+ "version": "8.40.1",
4
4
  "description": "Components relating to typography in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,7 +33,7 @@
33
33
  "styled-components": "^4.2.0 || ^5.0.0"
34
34
  },
35
35
  "devDependencies": {
36
- "@zendeskgarden/react-theming": "^8.38.0"
36
+ "@zendeskgarden/react-theming": "^8.40.1"
37
37
  },
38
38
  "keywords": [
39
39
  "components",
@@ -45,5 +45,5 @@
45
45
  "access": "public"
46
46
  },
47
47
  "zendeskgarden:src": "src/index.ts",
48
- "gitHead": "275611910f485c64e06cd8a7f7b9296aca30d73a"
48
+ "gitHead": "7feeb65e934f41f48757fcd3bd0d36287b893fae"
49
49
  }