@zendeskgarden/react-colorpickers 8.67.0 → 8.68.0

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
@@ -152,7 +152,7 @@ const getColorPickerWidth = props => {
152
152
  };
153
153
  const StyledColorPicker = styled__default.default.div.attrs({
154
154
  'data-garden-id': COMPONENT_ID$l,
155
- 'data-garden-version': '8.67.0'
155
+ 'data-garden-version': '8.68.0'
156
156
  }).withConfig({
157
157
  displayName: "StyledColorPicker",
158
158
  componentId: "sc-1donyl9-0"
@@ -211,6 +211,7 @@ const colorStyles$1 = props => {
211
211
  const thumbBorderColor = thumbBackgroundColor;
212
212
  const thumbActiveBackgroundColor = reactTheming.getColor('neutralHue', 200, props.theme);
213
213
  const thumbActiveBorderColor = reactTheming.getColor('primaryHue', 600, props.theme);
214
+ const thumbFocusBorderColor = reactTheming.getColor('primaryHue', 400, props.theme);
214
215
  const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
215
216
  const thumbHoverBorderColor = thumbHoverBackgroundColor;
216
217
  return `
@@ -236,7 +237,7 @@ const colorStyles$1 = props => {
236
237
 
237
238
  ${thumbStyles(`
238
239
  background-color: ${thumbBackgroundColor};
239
- border-color: ${thumbActiveBorderColor};
240
+ border-color: ${thumbFocusBorderColor};
240
241
  `, '[data-garden-focus-visible="true"]')}
241
242
 
242
243
  ${thumbStyles(`
@@ -287,7 +288,7 @@ const sizeStyles$2 = props => {
287
288
  };
288
289
  const StyledRange = styled__default.default(reactForms.Range).attrs({
289
290
  'data-garden-id': COMPONENT_ID$k,
290
- 'data-garden-version': '8.67.0',
291
+ 'data-garden-version': '8.68.0',
291
292
  hasLowerTrack: false
292
293
  }).withConfig({
293
294
  displayName: "StyledRange",
@@ -302,7 +303,7 @@ StyledRange.defaultProps = {
302
303
  const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
303
304
  const StyledHueRange = styled__default.default(StyledRange).attrs({
304
305
  'data-garden-id': COMPONENT_ID$j,
305
- 'data-garden-version': '8.67.0'
306
+ 'data-garden-version': '8.68.0'
306
307
  }).withConfig({
307
308
  displayName: "StyledHueRange",
308
309
  componentId: "sc-13ly7p-0"
@@ -346,7 +347,7 @@ const StyledAlphaRange = styled__default.default(StyledRange).attrs(props => ({
346
347
  background: background$3(props)
347
348
  },
348
349
  'data-garden-id': COMPONENT_ID$i,
349
- 'data-garden-version': '8.67.0'
350
+ 'data-garden-version': '8.68.0'
350
351
  })).withConfig({
351
352
  displayName: "StyledAlphaRange",
352
353
  componentId: "sc-kuh2xc-0"
@@ -370,7 +371,7 @@ const StyledPreview = styled__default.default.div.attrs(props => ({
370
371
  background: background$2(props)
371
372
  },
372
373
  'data-garden-id': COMPONENT_ID$h,
373
- 'data-garden-version': '8.67.0',
374
+ 'data-garden-version': '8.68.0',
374
375
  'data-test-id': 'preview-box'
375
376
  })).withConfig({
376
377
  displayName: "StyledPreview",
@@ -392,7 +393,7 @@ const background$1 = props => {
392
393
  };
393
394
  const StyledColorWell = styled__default.default.div.attrs(props => ({
394
395
  'data-garden-id': COMPONENT_ID$g,
395
- 'data-garden-version': '8.67.0',
396
+ 'data-garden-version': '8.68.0',
396
397
  'data-test-id': 'colorwell',
397
398
  style: {
398
399
  background: background$1(props)
@@ -420,7 +421,7 @@ const sizeStyles$1 = theme => {
420
421
  };
421
422
  const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
422
423
  'data-garden-id': COMPONENT_ID$f,
423
- 'data-garden-version': '8.67.0',
424
+ 'data-garden-version': '8.68.0',
424
425
  'data-test-id': 'colorwell-thumb',
425
426
  style: {
426
427
  top: `${props.top}%`,
@@ -437,7 +438,7 @@ StyledColorWellThumb.defaultProps = {
437
438
  const COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
438
439
  const StyledSliderGroup = styled__default.default.div.attrs({
439
440
  'data-garden-id': COMPONENT_ID$e,
440
- 'data-garden-version': '8.67.0'
441
+ 'data-garden-version': '8.68.0'
441
442
  }).withConfig({
442
443
  displayName: "StyledSliderGroup",
443
444
  componentId: "sc-rsq0ak-0"
@@ -449,7 +450,7 @@ StyledSliderGroup.defaultProps = {
449
450
  const COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
450
451
  const StyledHexField = styled__default.default(reactForms.Field).attrs({
451
452
  'data-garden-id': COMPONENT_ID$d,
452
- 'data-garden-version': '8.67.0',
453
+ 'data-garden-version': '8.68.0',
453
454
  spellcheck: false
454
455
  }).withConfig({
455
456
  displayName: "StyledHexField",
@@ -462,7 +463,7 @@ StyledHexField.defaultProps = {
462
463
  const COMPONENT_ID$c = 'colorpickers.colorpicker_label';
463
464
  const StyledLabel = styled__default.default(reactForms.Label).attrs({
464
465
  'data-garden-id': COMPONENT_ID$c,
465
- 'data-garden-version': '8.67.0'
466
+ 'data-garden-version': '8.68.0'
466
467
  }).withConfig({
467
468
  displayName: "StyledLabel",
468
469
  componentId: "sc-1klhp6m-0"
@@ -474,7 +475,7 @@ StyledLabel.defaultProps = {
474
475
  const COMPONENT_ID$b = 'colorpickers.colorpicker_input';
475
476
  const StyledInput = styled__default.default(reactForms.Input).attrs({
476
477
  'data-garden-id': COMPONENT_ID$b,
477
- 'data-garden-version': '8.67.0',
478
+ 'data-garden-version': '8.68.0',
478
479
  focusInset: false
479
480
  }).withConfig({
480
481
  displayName: "StyledInput",
@@ -487,7 +488,7 @@ StyledInput.defaultProps = {
487
488
  const COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
488
489
  const StyledInputGroup = styled__default.default.div.attrs({
489
490
  'data-garden-id': COMPONENT_ID$a,
490
- 'data-garden-version': '8.67.0'
491
+ 'data-garden-version': '8.68.0'
491
492
  }).withConfig({
492
493
  displayName: "StyledInputGroup",
493
494
  componentId: "sc-mmy93w-0"
@@ -508,7 +509,7 @@ const sizeStyles = theme => {
508
509
  };
509
510
  const StyledRGBAField = styled__default.default(reactForms.Field).attrs({
510
511
  'data-garden-id': COMPONENT_ID$9,
511
- 'data-garden-version': '8.67.0'
512
+ 'data-garden-version': '8.68.0'
512
513
  }).withConfig({
513
514
  displayName: "StyledRGBAField",
514
515
  componentId: "sc-ibo1yw-0"
@@ -520,7 +521,7 @@ StyledRGBAField.defaultProps = {
520
521
  const COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
521
522
  const StyledSliders = styled__default.default.div.attrs({
522
523
  'data-garden-id': COMPONENT_ID$8,
523
- 'data-garden-version': '8.67.0'
524
+ 'data-garden-version': '8.68.0'
524
525
  }).withConfig({
525
526
  displayName: "StyledSliders",
526
527
  componentId: "sc-aclca2-0"
@@ -533,7 +534,7 @@ const COMPONENT_ID$7 = 'colorpickers.colordialog_button';
533
534
  const StyledButton = styled__default.default(reactButtons.Button).attrs({
534
535
  isNeutral: true,
535
536
  'data-garden-id': COMPONENT_ID$7,
536
- 'data-garden-version': '8.67.0'
537
+ 'data-garden-version': '8.68.0'
537
538
  }).withConfig({
538
539
  displayName: "StyledButton",
539
540
  componentId: "sc-101xjve-0"
@@ -568,7 +569,7 @@ const StyledButtonPreview = styled__default.default.span.attrs(props => ({
568
569
  background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
569
570
  },
570
571
  'data-garden-id': COMPONENT_ID$6,
571
- 'data-garden-version': '8.67.0',
572
+ 'data-garden-version': '8.68.0',
572
573
  'data-test-id': 'dialog-preview'
573
574
  })).withConfig({
574
575
  displayName: "StyledButtonPreview",
@@ -581,7 +582,7 @@ StyledButtonPreview.defaultProps = {
581
582
  const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal';
582
583
  const StyledTooltipModal = styled__default.default(reactModals.TooltipModal).attrs({
583
584
  'data-garden-id': COMPONENT_ID$5,
584
- 'data-garden-version': '8.67.0'
585
+ 'data-garden-version': '8.68.0'
585
586
  }).withConfig({
586
587
  displayName: "StyledTooltipModal",
587
588
  componentId: "sc-o022s8-0"
@@ -593,7 +594,7 @@ StyledTooltipModal.defaultProps = {
593
594
  const COMPONENT_ID$4 = 'colorpickers.colordialog_tooltipmodal_body';
594
595
  const StyledTooltipBody = styled__default.default(reactModals.TooltipModal.Body).attrs({
595
596
  'data-garden-id': COMPONENT_ID$4,
596
- 'data-garden-version': '8.67.0'
597
+ 'data-garden-version': '8.68.0'
597
598
  }).withConfig({
598
599
  displayName: "StyledTooltipBody",
599
600
  componentId: "sc-6gsgsy-0"
@@ -607,11 +608,13 @@ const StyledSwatchButton = styled__default.default(StyledButtonPreview).attrs(pr
607
608
  as: 'button',
608
609
  'data-garden-id': COMPONENT_ID$3,
609
610
  'data-test-id': props.backgroundColor,
610
- 'data-garden-version': '8.67.0'
611
+ 'data-garden-version': '8.68.0'
611
612
  })).withConfig({
612
613
  displayName: "StyledSwatchButton",
613
614
  componentId: "sc-edpwpp-0"
614
- })(["outline:none;border:none;border-radius:", ";cursor:pointer;padding:0;&[data-garden-focus-visible]{box-shadow:", ";}", ";"], props => props.theme.borderRadii.md, props => props.theme.shadows.md(reactTheming.getColor('primaryHue', 600, props.theme, 0.35)), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
615
+ })(["transition:box-shadow 0.1s ease-in-out;outline:none;border:none;border-radius:", ";cursor:pointer;padding:0;", " ", ";"], props => props.theme.borderRadii.md, props => reactTheming.focusStyles({
616
+ theme: props.theme
617
+ }), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
615
618
  StyledSwatchButton.defaultProps = {
616
619
  theme: reactTheming.DEFAULT_THEME
617
620
  };
@@ -619,7 +622,7 @@ StyledSwatchButton.defaultProps = {
619
622
  const COMPONENT_ID$2 = 'colorpickers.color_swatch';
620
623
  const StyledColorSwatch = styled__default.default.table.attrs({
621
624
  'data-garden-id': COMPONENT_ID$2,
622
- 'data-garden-version': '8.67.0',
625
+ 'data-garden-version': '8.68.0',
623
626
  role: 'grid'
624
627
  }).withConfig({
625
628
  displayName: "StyledColorSwatch",
@@ -656,7 +659,7 @@ const StyledIcon = styled__default.default(_ref => {
656
659
  return React__namespace.default.cloneElement(React.Children.only(children), props);
657
660
  }).attrs({
658
661
  'data-garden-id': COMPONENT_ID$1,
659
- 'data-garden-version': '8.67.0'
662
+ 'data-garden-version': '8.68.0'
660
663
  }).withConfig({
661
664
  displayName: "StyledIcon",
662
665
  componentId: "sc-8oigif-0"
@@ -668,7 +671,7 @@ StyledIcon.defaultProps = {
668
671
  const COMPONENT_ID = 'colorpickers.swatch_cell';
669
672
  const StyledCell = styled__default.default.td.attrs({
670
673
  'data-garden-id': COMPONENT_ID,
671
- 'data-garden-version': '8.67.0'
674
+ 'data-garden-version': '8.68.0'
672
675
  }).withConfig({
673
676
  displayName: "StyledCell",
674
677
  componentId: "sc-qr3oit-0"
package/dist/index.esm.js CHANGED
@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
11
11
  import { Range, Field, Label, Input } from '@zendeskgarden/react-forms';
12
12
  import throttle from 'lodash.throttle';
13
13
  import styled, { ThemeContext } from 'styled-components';
14
- import { retrieveComponentStyles, DEFAULT_THEME, getColor, useText } from '@zendeskgarden/react-theming';
14
+ import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, useText } from '@zendeskgarden/react-theming';
15
15
  import { stripUnit, math, rgba, hsl, parseToRgb, readableColor, parseToHsl, rgb } from 'polished';
16
16
  import { Button } from '@zendeskgarden/react-buttons';
17
17
  import { TooltipModal, PLACEMENT } from '@zendeskgarden/react-modals';
@@ -125,7 +125,7 @@ const getColorPickerWidth = props => {
125
125
  };
126
126
  const StyledColorPicker = styled.div.attrs({
127
127
  'data-garden-id': COMPONENT_ID$l,
128
- 'data-garden-version': '8.67.0'
128
+ 'data-garden-version': '8.68.0'
129
129
  }).withConfig({
130
130
  displayName: "StyledColorPicker",
131
131
  componentId: "sc-1donyl9-0"
@@ -184,6 +184,7 @@ const colorStyles$1 = props => {
184
184
  const thumbBorderColor = thumbBackgroundColor;
185
185
  const thumbActiveBackgroundColor = getColor('neutralHue', 200, props.theme);
186
186
  const thumbActiveBorderColor = getColor('primaryHue', 600, props.theme);
187
+ const thumbFocusBorderColor = getColor('primaryHue', 400, props.theme);
187
188
  const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
188
189
  const thumbHoverBorderColor = thumbHoverBackgroundColor;
189
190
  return `
@@ -209,7 +210,7 @@ const colorStyles$1 = props => {
209
210
 
210
211
  ${thumbStyles(`
211
212
  background-color: ${thumbBackgroundColor};
212
- border-color: ${thumbActiveBorderColor};
213
+ border-color: ${thumbFocusBorderColor};
213
214
  `, '[data-garden-focus-visible="true"]')}
214
215
 
215
216
  ${thumbStyles(`
@@ -260,7 +261,7 @@ const sizeStyles$2 = props => {
260
261
  };
261
262
  const StyledRange = styled(Range).attrs({
262
263
  'data-garden-id': COMPONENT_ID$k,
263
- 'data-garden-version': '8.67.0',
264
+ 'data-garden-version': '8.68.0',
264
265
  hasLowerTrack: false
265
266
  }).withConfig({
266
267
  displayName: "StyledRange",
@@ -275,7 +276,7 @@ StyledRange.defaultProps = {
275
276
  const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
276
277
  const StyledHueRange = styled(StyledRange).attrs({
277
278
  'data-garden-id': COMPONENT_ID$j,
278
- 'data-garden-version': '8.67.0'
279
+ 'data-garden-version': '8.68.0'
279
280
  }).withConfig({
280
281
  displayName: "StyledHueRange",
281
282
  componentId: "sc-13ly7p-0"
@@ -319,7 +320,7 @@ const StyledAlphaRange = styled(StyledRange).attrs(props => ({
319
320
  background: background$3(props)
320
321
  },
321
322
  'data-garden-id': COMPONENT_ID$i,
322
- 'data-garden-version': '8.67.0'
323
+ 'data-garden-version': '8.68.0'
323
324
  })).withConfig({
324
325
  displayName: "StyledAlphaRange",
325
326
  componentId: "sc-kuh2xc-0"
@@ -343,7 +344,7 @@ const StyledPreview = styled.div.attrs(props => ({
343
344
  background: background$2(props)
344
345
  },
345
346
  'data-garden-id': COMPONENT_ID$h,
346
- 'data-garden-version': '8.67.0',
347
+ 'data-garden-version': '8.68.0',
347
348
  'data-test-id': 'preview-box'
348
349
  })).withConfig({
349
350
  displayName: "StyledPreview",
@@ -365,7 +366,7 @@ const background$1 = props => {
365
366
  };
366
367
  const StyledColorWell = styled.div.attrs(props => ({
367
368
  'data-garden-id': COMPONENT_ID$g,
368
- 'data-garden-version': '8.67.0',
369
+ 'data-garden-version': '8.68.0',
369
370
  'data-test-id': 'colorwell',
370
371
  style: {
371
372
  background: background$1(props)
@@ -393,7 +394,7 @@ const sizeStyles$1 = theme => {
393
394
  };
394
395
  const StyledColorWellThumb = styled.div.attrs(props => ({
395
396
  'data-garden-id': COMPONENT_ID$f,
396
- 'data-garden-version': '8.67.0',
397
+ 'data-garden-version': '8.68.0',
397
398
  'data-test-id': 'colorwell-thumb',
398
399
  style: {
399
400
  top: `${props.top}%`,
@@ -410,7 +411,7 @@ StyledColorWellThumb.defaultProps = {
410
411
  const COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
411
412
  const StyledSliderGroup = styled.div.attrs({
412
413
  'data-garden-id': COMPONENT_ID$e,
413
- 'data-garden-version': '8.67.0'
414
+ 'data-garden-version': '8.68.0'
414
415
  }).withConfig({
415
416
  displayName: "StyledSliderGroup",
416
417
  componentId: "sc-rsq0ak-0"
@@ -422,7 +423,7 @@ StyledSliderGroup.defaultProps = {
422
423
  const COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
423
424
  const StyledHexField = styled(Field).attrs({
424
425
  'data-garden-id': COMPONENT_ID$d,
425
- 'data-garden-version': '8.67.0',
426
+ 'data-garden-version': '8.68.0',
426
427
  spellcheck: false
427
428
  }).withConfig({
428
429
  displayName: "StyledHexField",
@@ -435,7 +436,7 @@ StyledHexField.defaultProps = {
435
436
  const COMPONENT_ID$c = 'colorpickers.colorpicker_label';
436
437
  const StyledLabel = styled(Label).attrs({
437
438
  'data-garden-id': COMPONENT_ID$c,
438
- 'data-garden-version': '8.67.0'
439
+ 'data-garden-version': '8.68.0'
439
440
  }).withConfig({
440
441
  displayName: "StyledLabel",
441
442
  componentId: "sc-1klhp6m-0"
@@ -447,7 +448,7 @@ StyledLabel.defaultProps = {
447
448
  const COMPONENT_ID$b = 'colorpickers.colorpicker_input';
448
449
  const StyledInput = styled(Input).attrs({
449
450
  'data-garden-id': COMPONENT_ID$b,
450
- 'data-garden-version': '8.67.0',
451
+ 'data-garden-version': '8.68.0',
451
452
  focusInset: false
452
453
  }).withConfig({
453
454
  displayName: "StyledInput",
@@ -460,7 +461,7 @@ StyledInput.defaultProps = {
460
461
  const COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
461
462
  const StyledInputGroup = styled.div.attrs({
462
463
  'data-garden-id': COMPONENT_ID$a,
463
- 'data-garden-version': '8.67.0'
464
+ 'data-garden-version': '8.68.0'
464
465
  }).withConfig({
465
466
  displayName: "StyledInputGroup",
466
467
  componentId: "sc-mmy93w-0"
@@ -481,7 +482,7 @@ const sizeStyles = theme => {
481
482
  };
482
483
  const StyledRGBAField = styled(Field).attrs({
483
484
  'data-garden-id': COMPONENT_ID$9,
484
- 'data-garden-version': '8.67.0'
485
+ 'data-garden-version': '8.68.0'
485
486
  }).withConfig({
486
487
  displayName: "StyledRGBAField",
487
488
  componentId: "sc-ibo1yw-0"
@@ -493,7 +494,7 @@ StyledRGBAField.defaultProps = {
493
494
  const COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
494
495
  const StyledSliders = styled.div.attrs({
495
496
  'data-garden-id': COMPONENT_ID$8,
496
- 'data-garden-version': '8.67.0'
497
+ 'data-garden-version': '8.68.0'
497
498
  }).withConfig({
498
499
  displayName: "StyledSliders",
499
500
  componentId: "sc-aclca2-0"
@@ -506,7 +507,7 @@ const COMPONENT_ID$7 = 'colorpickers.colordialog_button';
506
507
  const StyledButton = styled(Button).attrs({
507
508
  isNeutral: true,
508
509
  'data-garden-id': COMPONENT_ID$7,
509
- 'data-garden-version': '8.67.0'
510
+ 'data-garden-version': '8.68.0'
510
511
  }).withConfig({
511
512
  displayName: "StyledButton",
512
513
  componentId: "sc-101xjve-0"
@@ -541,7 +542,7 @@ const StyledButtonPreview = styled.span.attrs(props => ({
541
542
  background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
542
543
  },
543
544
  'data-garden-id': COMPONENT_ID$6,
544
- 'data-garden-version': '8.67.0',
545
+ 'data-garden-version': '8.68.0',
545
546
  'data-test-id': 'dialog-preview'
546
547
  })).withConfig({
547
548
  displayName: "StyledButtonPreview",
@@ -554,7 +555,7 @@ StyledButtonPreview.defaultProps = {
554
555
  const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal';
555
556
  const StyledTooltipModal = styled(TooltipModal).attrs({
556
557
  'data-garden-id': COMPONENT_ID$5,
557
- 'data-garden-version': '8.67.0'
558
+ 'data-garden-version': '8.68.0'
558
559
  }).withConfig({
559
560
  displayName: "StyledTooltipModal",
560
561
  componentId: "sc-o022s8-0"
@@ -566,7 +567,7 @@ StyledTooltipModal.defaultProps = {
566
567
  const COMPONENT_ID$4 = 'colorpickers.colordialog_tooltipmodal_body';
567
568
  const StyledTooltipBody = styled(TooltipModal.Body).attrs({
568
569
  'data-garden-id': COMPONENT_ID$4,
569
- 'data-garden-version': '8.67.0'
570
+ 'data-garden-version': '8.68.0'
570
571
  }).withConfig({
571
572
  displayName: "StyledTooltipBody",
572
573
  componentId: "sc-6gsgsy-0"
@@ -580,11 +581,13 @@ const StyledSwatchButton = styled(StyledButtonPreview).attrs(props => ({
580
581
  as: 'button',
581
582
  'data-garden-id': COMPONENT_ID$3,
582
583
  'data-test-id': props.backgroundColor,
583
- 'data-garden-version': '8.67.0'
584
+ 'data-garden-version': '8.68.0'
584
585
  })).withConfig({
585
586
  displayName: "StyledSwatchButton",
586
587
  componentId: "sc-edpwpp-0"
587
- })(["outline:none;border:none;border-radius:", ";cursor:pointer;padding:0;&[data-garden-focus-visible]{box-shadow:", ";}", ";"], props => props.theme.borderRadii.md, props => props.theme.shadows.md(getColor('primaryHue', 600, props.theme, 0.35)), props => retrieveComponentStyles(COMPONENT_ID$3, props));
588
+ })(["transition:box-shadow 0.1s ease-in-out;outline:none;border:none;border-radius:", ";cursor:pointer;padding:0;", " ", ";"], props => props.theme.borderRadii.md, props => focusStyles({
589
+ theme: props.theme
590
+ }), props => retrieveComponentStyles(COMPONENT_ID$3, props));
588
591
  StyledSwatchButton.defaultProps = {
589
592
  theme: DEFAULT_THEME
590
593
  };
@@ -592,7 +595,7 @@ StyledSwatchButton.defaultProps = {
592
595
  const COMPONENT_ID$2 = 'colorpickers.color_swatch';
593
596
  const StyledColorSwatch = styled.table.attrs({
594
597
  'data-garden-id': COMPONENT_ID$2,
595
- 'data-garden-version': '8.67.0',
598
+ 'data-garden-version': '8.68.0',
596
599
  role: 'grid'
597
600
  }).withConfig({
598
601
  displayName: "StyledColorSwatch",
@@ -629,7 +632,7 @@ const StyledIcon = styled(_ref => {
629
632
  return React__default.cloneElement(Children.only(children), props);
630
633
  }).attrs({
631
634
  'data-garden-id': COMPONENT_ID$1,
632
- 'data-garden-version': '8.67.0'
635
+ 'data-garden-version': '8.68.0'
633
636
  }).withConfig({
634
637
  displayName: "StyledIcon",
635
638
  componentId: "sc-8oigif-0"
@@ -641,7 +644,7 @@ StyledIcon.defaultProps = {
641
644
  const COMPONENT_ID = 'colorpickers.swatch_cell';
642
645
  const StyledCell = styled.td.attrs({
643
646
  'data-garden-id': COMPONENT_ID,
644
- 'data-garden-version': '8.67.0'
647
+ 'data-garden-version': '8.68.0'
645
648
  }).withConfig({
646
649
  displayName: "StyledCell",
647
650
  componentId: "sc-qr3oit-0"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-colorpickers",
3
- "version": "8.67.0",
3
+ "version": "8.68.0",
4
4
  "description": "Components related to color pickers in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,17 +23,17 @@
23
23
  "dependencies": {
24
24
  "@zendeskgarden/container-grid": "^0.1.1",
25
25
  "@zendeskgarden/container-utilities": "^1.0.0",
26
- "@zendeskgarden/react-buttons": "^8.67.0",
27
- "@zendeskgarden/react-forms": "^8.67.0",
28
- "@zendeskgarden/react-modals": "^8.67.0",
29
- "@zendeskgarden/react-tooltips": "^8.67.0",
26
+ "@zendeskgarden/react-buttons": "^8.68.0",
27
+ "@zendeskgarden/react-forms": "^8.68.0",
28
+ "@zendeskgarden/react-modals": "^8.68.0",
29
+ "@zendeskgarden/react-tooltips": "^8.68.0",
30
30
  "lodash.isequal": "^4.5.0",
31
31
  "lodash.throttle": "^4.1.1",
32
32
  "polished": "^4.0.0",
33
33
  "prop-types": "^15.7.2"
34
34
  },
35
35
  "peerDependencies": {
36
- "@zendeskgarden/react-theming": "^8.1.0",
36
+ "@zendeskgarden/react-theming": "^8.67.0",
37
37
  "react": ">=16.8.0",
38
38
  "react-dom": ">=16.8.0",
39
39
  "styled-components": "^4.2.0 || ^5.0.0"
@@ -41,7 +41,7 @@
41
41
  "devDependencies": {
42
42
  "@types/lodash.isequal": "4.5.6",
43
43
  "@types/lodash.throttle": "4.1.7",
44
- "@zendeskgarden/react-theming": "^8.67.0",
44
+ "@zendeskgarden/react-theming": "^8.68.0",
45
45
  "@zendeskgarden/svg-icons": "6.33.0"
46
46
  },
47
47
  "keywords": [
@@ -55,5 +55,5 @@
55
55
  "access": "public"
56
56
  },
57
57
  "zendeskgarden:src": "src/index.ts",
58
- "gitHead": "50a98b0cd7c85bed2ed88ad869e6f2cd3fc68f62"
58
+ "gitHead": "e05a28d586f47d95e0570fe2d529915aa4285845"
59
59
  }