@box/blueprint-web 16.17.1 → 16.18.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/lib-esm/checkbox/checkbox-item.js +8 -0
  2. package/dist/lib-esm/checkbox/checkbox.module.js +1 -1
  3. package/dist/lib-esm/components.css +38 -21
  4. package/dist/lib-esm/index.css +38 -21
  5. package/package.json +3 -3
package/dist/lib-esm/checkbox/checkbox-item.js CHANGED
@@ -4,6 +4,9 @@ import { Size3, IconIconOnDark } from '@box/blueprint-web-assets/tokens/tokens';
4
4
  import * as RadixCheckbox from '@radix-ui/react-checkbox';
5
5
  import { clsx } from 'clsx';
6
6
  import { forwardRef } from 'react';
7
+ import '../blueprint-configuration-context/blueprint-configuration-context.js';
8
+ import '../blueprint-configuration-context/consts.js';
9
+ import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
7
10
  import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
8
11
  import { TextWithInfoBadge } from '../util-components/text-with-info-badge/text-with-info-badge.js';
9
12
  import { useUniqueId } from '../utils/useUniqueId.js';
@@ -31,10 +34,15 @@ const CheckboxItem = /*#__PURE__*/forwardRef((props, ref) => {
31
34
  const {
32
35
  enableModernizedComponents
33
36
  } = useBlueprintModernization();
37
+ const {
38
+ componentsWithAnimationEnabled
39
+ } = useBlueprintConfiguration();
40
+ const isAnimationEnabled = componentsWithAnimationEnabled.includes('Checkbox');
34
41
  return jsxs("div", {
35
42
  className: clsx([styles.option], {
36
43
  [styles.disabled]: disabled
37
44
  }, className),
45
+ "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
38
46
  "data-modern": enableModernizedComponents ? 'true' : 'false',
39
47
  children: [jsxs("label", {
40
48
  className: styles.label,
package/dist/lib-esm/checkbox/checkbox.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"option":"bp_checkbox_module_option--2fba1","checkbox":"bp_checkbox_module_checkbox--2fba1","indicator":"bp_checkbox_module_indicator--2fba1","label":"bp_checkbox_module_label--2fba1","description":"bp_checkbox_module_description--2fba1","disabled":"bp_checkbox_module_disabled--2fba1"};
2
+ var styles = {"option":"bp_checkbox_module_option--d495d","checkbox":"bp_checkbox_module_checkbox--d495d","indicator":"bp_checkbox_module_indicator--d495d","label":"bp_checkbox_module_label--d495d","description":"bp_checkbox_module_description--d495d","disabled":"bp_checkbox_module_disabled--d495d"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/components.css CHANGED
@@ -4647,7 +4647,7 @@
4647
4647
  .bp_legend_module_fieldset--30f1d.bp_legend_module_wide--30f1d .bp_legend_module_legend--30f1d{
4648
4648
  padding-bottom:var(--size-4);
4649
4649
  }
4650
- .bp_checkbox_module_option--2fba1[data-modern=false]{
4650
+ .bp_checkbox_module_option--d495d[data-modern=false]{
4651
4651
  --checkbox-size:var(--size-4);
4652
4652
  --checkbox-label-gap:var(--size-3);
4653
4653
  --checkbox-description-padding-left:calc(var(--size-4) + var(--size-3));
@@ -4672,7 +4672,7 @@
4672
4672
  text-transform:var(--body-default-text-case);
4673
4673
  }
4674
4674
 
4675
- .bp_checkbox_module_option--2fba1[data-modern=true]{
4675
+ .bp_checkbox_module_option--d495d[data-modern=true]{
4676
4676
  --checkbox-size:var(--bp-size-040);
4677
4677
  --checkbox-label-gap:var(--bp-space-030);
4678
4678
  --checkbox-description-padding-left:calc(var(--bp-size-040) + var(--bp-space-030));
@@ -4695,7 +4695,7 @@
4695
4695
  letter-spacing:var(--bp-font-letter-spacing-01);
4696
4696
  line-height:var(--bp-font-line-height-04);
4697
4697
  }
4698
- :where(body.is-inter-font) .bp_checkbox_module_option--2fba1[data-modern=true]{
4698
+ :where(body.is-inter-font) .bp_checkbox_module_option--d495d[data-modern=true]{
4699
4699
  font-family:InterVariable, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
4700
4700
  font-size:.875rem;
4701
4701
  font-style:normal;
@@ -4706,11 +4706,11 @@
4706
4706
  text-transform:none;
4707
4707
  }
4708
4708
 
4709
- .bp_checkbox_module_option--2fba1{
4709
+ .bp_checkbox_module_option--d495d{
4710
4710
  display:flex;
4711
4711
  flex-direction:column;
4712
4712
  }
4713
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1{
4713
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d{
4714
4714
  all:unset;
4715
4715
  align-items:center;
4716
4716
  background-color:var(--checkbox-surface);
@@ -4724,53 +4724,70 @@
4724
4724
  margin:calc((var(--checkbox-line-height) - var(--checkbox-size))/2) 0 0;
4725
4725
  width:var(--checkbox-size);
4726
4726
  }
4727
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1 .bp_checkbox_module_indicator--2fba1{
4727
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d .bp_checkbox_module_indicator--d495d{
4728
4728
  display:flex;
4729
- transform:scale(0);
4730
- transition-duration:.15s;
4731
- transition-property:transform;
4732
- transition-timing-function:cubic-bezier(0, 0, .6, 1);
4729
+ opacity:var(--bp-opacity-hidden);
4733
4730
  }
4734
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:focus-visible{
4731
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:focus-visible{
4735
4732
  outline:var(--checkbox-border);
4736
4733
  outline-offset:var(--checkbox-outline-offset);
4737
4734
  }
4738
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1[data-disabled]{
4735
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d[data-disabled]{
4739
4736
  background-color:var(--checkbox-surface-disabled);
4740
4737
  opacity:60%;
4741
4738
  }
4742
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1[data-state=checked],.bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1[data-state=indeterminate]{
4739
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d[data-state=checked],.bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d[data-state=indeterminate]{
4743
4740
  background-color:var(--checkbox-surface-selected);
4744
4741
  border:var(--checkbox-border-selected);
4745
4742
  }
4746
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1[data-state=checked] .bp_checkbox_module_indicator--2fba1,.bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1[data-state=indeterminate] .bp_checkbox_module_indicator--2fba1{
4743
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d[data-state=checked] .bp_checkbox_module_indicator--d495d,.bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d[data-state=indeterminate] .bp_checkbox_module_indicator--d495d{
4747
4744
  background-color:var(--checkbox-surface-selected);
4748
- transform:scale(1);
4745
+ opacity:var(--bp-opacity-visible);
4749
4746
  }
4750
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):focus-visible,.bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):hover{
4747
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):focus-visible,.bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):hover{
4751
4748
  border:var(--checkbox-border-hover);
4752
4749
  }
4753
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):focus-visible[data-state=checked],.bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):focus-visible[data-state=indeterminate],.bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):hover[data-state=checked],.bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):hover[data-state=indeterminate]{
4750
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):focus-visible[data-state=checked],.bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):focus-visible[data-state=indeterminate],.bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):hover[data-state=checked],.bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):hover[data-state=indeterminate]{
4754
4751
  background-color:var(--checkbox-surface-selected-hover);
4755
4752
  border:var(--checkbox-border-selected-hover);
4756
4753
  }
4757
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):focus-visible[data-state=checked] .bp_checkbox_module_indicator--2fba1,.bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):focus-visible[data-state=indeterminate] .bp_checkbox_module_indicator--2fba1,.bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):hover[data-state=checked] .bp_checkbox_module_indicator--2fba1,.bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):hover[data-state=indeterminate] .bp_checkbox_module_indicator--2fba1{
4754
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):focus-visible[data-state=checked] .bp_checkbox_module_indicator--d495d,.bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):focus-visible[data-state=indeterminate] .bp_checkbox_module_indicator--d495d,.bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):hover[data-state=checked] .bp_checkbox_module_indicator--d495d,.bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):hover[data-state=indeterminate] .bp_checkbox_module_indicator--d495d{
4758
4755
  background-color:var(--checkbox-surface-selected-hover);
4759
4756
  }
4760
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_label--2fba1{
4757
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_label--d495d{
4761
4758
  cursor:pointer;
4762
4759
  display:inline-flex;
4763
4760
  flex-direction:row;
4764
4761
  gap:var(--checkbox-label-gap);
4765
4762
  width:fit-content;
4766
4763
  }
4767
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_description--2fba1{
4764
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_description--d495d{
4768
4765
  padding-left:var(--checkbox-description-padding-left);
4769
4766
  }
4770
- .bp_checkbox_module_option--2fba1.bp_checkbox_module_disabled--2fba1 .bp_checkbox_module_label--2fba1{
4767
+ .bp_checkbox_module_option--d495d.bp_checkbox_module_disabled--d495d .bp_checkbox_module_label--d495d{
4771
4768
  cursor:default;
4772
4769
  }
4773
4770
 
4771
+ .bp_checkbox_module_option--d495d[data-bp-animated=true] .bp_checkbox_module_checkbox--d495d{
4772
+ transition-duration:var(--bp-duration-short);
4773
+ transition-property:background-color, border-color;
4774
+ transition-timing-function:var(--bp-curve-extra-small-on);
4775
+ }
4776
+ .bp_checkbox_module_option--d495d[data-bp-animated=true] .bp_checkbox_module_checkbox--d495d .bp_checkbox_module_indicator--d495d{
4777
+ transition-duration:var(--bp-duration-short);
4778
+ transition-property:background-color, opacity;
4779
+ transition-timing-function:var(--bp-curve-extra-small-on);
4780
+ }
4781
+ .bp_checkbox_module_option--d495d[data-bp-animated=true] .bp_checkbox_module_checkbox--d495d .bp_checkbox_module_indicator--d495d svg{
4782
+ transform:scale(var(--bp-scale-default));
4783
+ transition-duration:var(--bp-duration-short);
4784
+ transition-property:transform;
4785
+ transition-timing-function:var(--bp-curve-extra-small-on);
4786
+ }
4787
+ .bp_checkbox_module_option--d495d[data-bp-animated=true] .bp_checkbox_module_checkbox--d495d:not([data-disabled]):hover[data-state=checked] .bp_checkbox_module_indicator--d495d svg,.bp_checkbox_module_option--d495d[data-bp-animated=true] .bp_checkbox_module_checkbox--d495d:not([data-disabled]):hover[data-state=indeterminate] .bp_checkbox_module_indicator--d495d svg{
4788
+ transform:scale(var(--bp-scale-large));
4789
+ }
4790
+
4774
4791
  .bp_circular_progress_module_circular-progress--f0283{
4775
4792
  --circular-progress-track-color:var(--bp-gray-10, var(--gray-10));
4776
4793
  --circular-progress-fill-color:var(--bp-surface-progress-bar-surface-brand, var(--box-blue-100));
package/dist/lib-esm/index.css CHANGED
@@ -4647,7 +4647,7 @@
4647
4647
  .bp_legend_module_fieldset--30f1d.bp_legend_module_wide--30f1d .bp_legend_module_legend--30f1d{
4648
4648
  padding-bottom:var(--size-4);
4649
4649
  }
4650
- .bp_checkbox_module_option--2fba1[data-modern=false]{
4650
+ .bp_checkbox_module_option--d495d[data-modern=false]{
4651
4651
  --checkbox-size:var(--size-4);
4652
4652
  --checkbox-label-gap:var(--size-3);
4653
4653
  --checkbox-description-padding-left:calc(var(--size-4) + var(--size-3));
@@ -4672,7 +4672,7 @@
4672
4672
  text-transform:var(--body-default-text-case);
4673
4673
  }
4674
4674
 
4675
- .bp_checkbox_module_option--2fba1[data-modern=true]{
4675
+ .bp_checkbox_module_option--d495d[data-modern=true]{
4676
4676
  --checkbox-size:var(--bp-size-040);
4677
4677
  --checkbox-label-gap:var(--bp-space-030);
4678
4678
  --checkbox-description-padding-left:calc(var(--bp-size-040) + var(--bp-space-030));
@@ -4695,7 +4695,7 @@
4695
4695
  letter-spacing:var(--bp-font-letter-spacing-01);
4696
4696
  line-height:var(--bp-font-line-height-04);
4697
4697
  }
4698
- :where(body.is-inter-font) .bp_checkbox_module_option--2fba1[data-modern=true]{
4698
+ :where(body.is-inter-font) .bp_checkbox_module_option--d495d[data-modern=true]{
4699
4699
  font-family:InterVariable, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
4700
4700
  font-size:.875rem;
4701
4701
  font-style:normal;
@@ -4706,11 +4706,11 @@
4706
4706
  text-transform:none;
4707
4707
  }
4708
4708
 
4709
- .bp_checkbox_module_option--2fba1{
4709
+ .bp_checkbox_module_option--d495d{
4710
4710
  display:flex;
4711
4711
  flex-direction:column;
4712
4712
  }
4713
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1{
4713
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d{
4714
4714
  all:unset;
4715
4715
  align-items:center;
4716
4716
  background-color:var(--checkbox-surface);
@@ -4724,53 +4724,70 @@
4724
4724
  margin:calc((var(--checkbox-line-height) - var(--checkbox-size))/2) 0 0;
4725
4725
  width:var(--checkbox-size);
4726
4726
  }
4727
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1 .bp_checkbox_module_indicator--2fba1{
4727
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d .bp_checkbox_module_indicator--d495d{
4728
4728
  display:flex;
4729
- transform:scale(0);
4730
- transition-duration:.15s;
4731
- transition-property:transform;
4732
- transition-timing-function:cubic-bezier(0, 0, .6, 1);
4729
+ opacity:var(--bp-opacity-hidden);
4733
4730
  }
4734
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:focus-visible{
4731
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:focus-visible{
4735
4732
  outline:var(--checkbox-border);
4736
4733
  outline-offset:var(--checkbox-outline-offset);
4737
4734
  }
4738
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1[data-disabled]{
4735
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d[data-disabled]{
4739
4736
  background-color:var(--checkbox-surface-disabled);
4740
4737
  opacity:60%;
4741
4738
  }
4742
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1[data-state=checked],.bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1[data-state=indeterminate]{
4739
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d[data-state=checked],.bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d[data-state=indeterminate]{
4743
4740
  background-color:var(--checkbox-surface-selected);
4744
4741
  border:var(--checkbox-border-selected);
4745
4742
  }
4746
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1[data-state=checked] .bp_checkbox_module_indicator--2fba1,.bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1[data-state=indeterminate] .bp_checkbox_module_indicator--2fba1{
4743
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d[data-state=checked] .bp_checkbox_module_indicator--d495d,.bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d[data-state=indeterminate] .bp_checkbox_module_indicator--d495d{
4747
4744
  background-color:var(--checkbox-surface-selected);
4748
- transform:scale(1);
4745
+ opacity:var(--bp-opacity-visible);
4749
4746
  }
4750
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):focus-visible,.bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):hover{
4747
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):focus-visible,.bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):hover{
4751
4748
  border:var(--checkbox-border-hover);
4752
4749
  }
4753
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):focus-visible[data-state=checked],.bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):focus-visible[data-state=indeterminate],.bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):hover[data-state=checked],.bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):hover[data-state=indeterminate]{
4750
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):focus-visible[data-state=checked],.bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):focus-visible[data-state=indeterminate],.bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):hover[data-state=checked],.bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):hover[data-state=indeterminate]{
4754
4751
  background-color:var(--checkbox-surface-selected-hover);
4755
4752
  border:var(--checkbox-border-selected-hover);
4756
4753
  }
4757
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):focus-visible[data-state=checked] .bp_checkbox_module_indicator--2fba1,.bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):focus-visible[data-state=indeterminate] .bp_checkbox_module_indicator--2fba1,.bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):hover[data-state=checked] .bp_checkbox_module_indicator--2fba1,.bp_checkbox_module_option--2fba1 .bp_checkbox_module_checkbox--2fba1:not([data-disabled]):hover[data-state=indeterminate] .bp_checkbox_module_indicator--2fba1{
4754
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):focus-visible[data-state=checked] .bp_checkbox_module_indicator--d495d,.bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):focus-visible[data-state=indeterminate] .bp_checkbox_module_indicator--d495d,.bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):hover[data-state=checked] .bp_checkbox_module_indicator--d495d,.bp_checkbox_module_option--d495d .bp_checkbox_module_checkbox--d495d:not([data-disabled]):hover[data-state=indeterminate] .bp_checkbox_module_indicator--d495d{
4758
4755
  background-color:var(--checkbox-surface-selected-hover);
4759
4756
  }
4760
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_label--2fba1{
4757
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_label--d495d{
4761
4758
  cursor:pointer;
4762
4759
  display:inline-flex;
4763
4760
  flex-direction:row;
4764
4761
  gap:var(--checkbox-label-gap);
4765
4762
  width:fit-content;
4766
4763
  }
4767
- .bp_checkbox_module_option--2fba1 .bp_checkbox_module_description--2fba1{
4764
+ .bp_checkbox_module_option--d495d .bp_checkbox_module_description--d495d{
4768
4765
  padding-left:var(--checkbox-description-padding-left);
4769
4766
  }
4770
- .bp_checkbox_module_option--2fba1.bp_checkbox_module_disabled--2fba1 .bp_checkbox_module_label--2fba1{
4767
+ .bp_checkbox_module_option--d495d.bp_checkbox_module_disabled--d495d .bp_checkbox_module_label--d495d{
4771
4768
  cursor:default;
4772
4769
  }
4773
4770
 
4771
+ .bp_checkbox_module_option--d495d[data-bp-animated=true] .bp_checkbox_module_checkbox--d495d{
4772
+ transition-duration:var(--bp-duration-short);
4773
+ transition-property:background-color, border-color;
4774
+ transition-timing-function:var(--bp-curve-extra-small-on);
4775
+ }
4776
+ .bp_checkbox_module_option--d495d[data-bp-animated=true] .bp_checkbox_module_checkbox--d495d .bp_checkbox_module_indicator--d495d{
4777
+ transition-duration:var(--bp-duration-short);
4778
+ transition-property:background-color, opacity;
4779
+ transition-timing-function:var(--bp-curve-extra-small-on);
4780
+ }
4781
+ .bp_checkbox_module_option--d495d[data-bp-animated=true] .bp_checkbox_module_checkbox--d495d .bp_checkbox_module_indicator--d495d svg{
4782
+ transform:scale(var(--bp-scale-default));
4783
+ transition-duration:var(--bp-duration-short);
4784
+ transition-property:transform;
4785
+ transition-timing-function:var(--bp-curve-extra-small-on);
4786
+ }
4787
+ .bp_checkbox_module_option--d495d[data-bp-animated=true] .bp_checkbox_module_checkbox--d495d:not([data-disabled]):hover[data-state=checked] .bp_checkbox_module_indicator--d495d svg,.bp_checkbox_module_option--d495d[data-bp-animated=true] .bp_checkbox_module_checkbox--d495d:not([data-disabled]):hover[data-state=indeterminate] .bp_checkbox_module_indicator--d495d svg{
4788
+ transform:scale(var(--bp-scale-large));
4789
+ }
4790
+
4774
4791
  .bp_circular_progress_module_circular-progress--f0283{
4775
4792
  --circular-progress-track-color:var(--bp-gray-10, var(--gray-10));
4776
4793
  --circular-progress-fill-color:var(--bp-surface-progress-bar-surface-brand, var(--box-blue-100));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "16.17.1",
3
+ "version": "16.18.1",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {
@@ -50,7 +50,7 @@
50
50
  "dependencies": {
51
51
  "@ariakit/react": "0.4.21",
52
52
  "@ariakit/react-core": "0.4.21",
53
- "@box/blueprint-web-assets": "^5.6.7",
53
+ "@box/blueprint-web-assets": "^5.7.0",
54
54
  "@internationalized/date": "^3.12.0",
55
55
  "@radix-ui/react-accordion": "1.1.2",
56
56
  "@radix-ui/react-checkbox": "1.0.4",
@@ -79,7 +79,7 @@
79
79
  "type-fest": "^3.2.0"
80
80
  },
81
81
  "devDependencies": {
82
- "@box/storybook-utils": "^1.2.7",
82
+ "@box/storybook-utils": "^1.2.9",
83
83
  "@figma/code-connect": "1.4.4",
84
84
  "@types/react": "^18.0.0",
85
85
  "@types/react-dom": "^18.0.0",