@easypost/easy-ui 1.0.0-alpha.101 → 1.0.0-alpha.103

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 (9) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/IconButton/IconButton.d.ts +5 -0
  3. package/IconButton/IconButton.d.ts.map +1 -1
  4. package/IconButton/IconButton.stories.d.ts +1 -0
  5. package/IconButton/IconButton.stories.d.ts.map +1 -1
  6. package/IconButton/index.js +20 -14
  7. package/IconButton/index.mjs +20 -14
  8. package/package.json +2 -2
  9. package/style.css +46 -24
package/CHANGELOG.md CHANGED
@@ -1,5 +1,18 @@
1
1
  # @easypost/easy-ui
2
2
 
3
+ ## 1.0.0-alpha.103
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [1960b84]
8
+ - @easypost/easy-ui-icons@1.0.0-alpha.50
9
+
10
+ ## 1.0.0-alpha.102
11
+
12
+ ### Minor Changes
13
+
14
+ - 8c6fa83: Adds size prop to `IconButton`
15
+
3
16
  ## 1.0.0-alpha.101
4
17
 
5
18
  ### Minor Changes
package/IconButton/IconButton.d.ts CHANGED
@@ -3,6 +3,7 @@ import { AriaButtonProps } from "react-aria";
3
3
  import { ButtonColor } from "../Button";
4
4
  import { IconSymbol } from "../types";
5
5
  export type IconButtonVariant = "filled" | "outlined";
6
+ export type IconButtonSize = "sm" | "md";
6
7
  export type IconButtonProps = AriaButtonProps & {
7
8
  /** Button color */
8
9
  color?: ButtonColor;
@@ -10,6 +11,8 @@ export type IconButtonProps = AriaButtonProps & {
10
11
  variant?: IconButtonVariant;
11
12
  /** Icon symbol */
12
13
  icon: IconSymbol;
14
+ /** Button size */
15
+ size?: IconButtonSize;
13
16
  /** Description of icon */
14
17
  accessibilityLabel: string;
15
18
  /** Disables button */
@@ -84,6 +87,8 @@ export declare const IconButton: React.ForwardRefExoticComponent<AriaButtonProps
84
87
  variant?: IconButtonVariant;
85
88
  /** Icon symbol */
86
89
  icon: IconSymbol;
90
+ /** Button size */
91
+ size?: IconButtonSize;
87
92
  /** Description of icon */
88
93
  accessibilityLabel: string;
89
94
  /** Disables button */
package/IconButton/IconButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAIxC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAKtC,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEtD,MAAM,MAAM,eAAe,GAAG,eAAe,GAAG;IAC9C,mBAAmB;IACnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,kBAAkB;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,0BAA0B;IAC1B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sBAAsB;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,eAAO,MAAM,UAAU;IA1ErB,mBAAmB;YACX,WAAW;IACnB,qBAAqB;cACX,iBAAiB;IAC3B,kBAAkB;UACZ,UAAU;IAChB,0BAA0B;wBACN,MAAM;IAC1B,sBAAsB;iBACT,OAAO;8BA4FpB,CAAC"}
1
+ {"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAIxC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAKtC,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,UAAU,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,CAAC;AAEzC,MAAM,MAAM,eAAe,GAAG,eAAe,GAAG;IAC9C,mBAAmB;IACnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,qBAAqB;IACrB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,kBAAkB;IAClB,IAAI,EAAE,UAAU,CAAC;IACjB,kBAAkB;IAClB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,0BAA0B;IAC1B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,sBAAsB;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AACH,eAAO,MAAM,UAAU;IA5ErB,mBAAmB;YACX,WAAW;IACnB,qBAAqB;cACX,iBAAiB;IAC3B,kBAAkB;UACZ,UAAU;IAChB,kBAAkB;WACX,cAAc;IACrB,0BAA0B;wBACN,MAAM;IAC1B,sBAAsB;iBACT,OAAO;8BAiGpB,CAAC"}
package/IconButton/IconButton.stories.d.ts CHANGED
@@ -6,6 +6,7 @@ export default meta;
6
6
  export declare const Filled: Story;
7
7
  export declare const Outlined: Story;
8
8
  export declare const Inverse: Story;
9
+ export declare const Small: Story;
9
10
  export declare const Disabled: Story;
10
11
  export declare const ClickEvent: Story;
11
12
  export declare const Controls: Story;
package/IconButton/IconButton.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../src/IconButton/IconButton.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AASvD,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAC;AAE3D,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AASzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CASjC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAMF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAMF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC"}
1
+ {"version":3,"file":"IconButton.stories.d.ts","sourceRoot":"","sources":["../../src/IconButton/IconButton.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AASvD,OAAO,EAAE,UAAU,EAAmB,MAAM,cAAc,CAAC;AAE3D,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AASzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CASjC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,MAAM,EAAE,KAMpB,CAAC;AAMF,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAC;AAMF,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAGnB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAC"}
package/IconButton/index.js CHANGED
@@ -33,16 +33,18 @@ const UnstyledButton = require("../__chunks__/UnstyledButton-DaRYVyfB.js");
33
33
  const Icon = require("../__chunks__/Icon-W8F9w-jS.js");
34
34
  const Text = require("../__chunks__/Text-CSESKR_s.js");
35
35
  const utilities_css = require("../utilities/css.js");
36
- const IconButton$1 = "_IconButton_16fh0_4";
37
- const colorPrimary = "_colorPrimary_16fh0_19";
38
- const colorSecondary = "_colorSecondary_16fh0_27";
39
- const colorSuccess = "_colorSuccess_16fh0_35";
40
- const colorWarning = "_colorWarning_16fh0_43";
41
- const colorNeutral = "_colorNeutral_16fh0_51";
42
- const colorSupport = "_colorSupport_16fh0_59";
43
- const colorInverse = "_colorInverse_16fh0_65";
44
- const variantOutlined = "_variantOutlined_16fh0_71";
45
- const variantFilled = "_variantFilled_16fh0_100";
36
+ const IconButton$1 = "_IconButton_ghgsb_4";
37
+ const colorPrimary = "_colorPrimary_ghgsb_19";
38
+ const colorSecondary = "_colorSecondary_ghgsb_27";
39
+ const colorSuccess = "_colorSuccess_ghgsb_35";
40
+ const colorWarning = "_colorWarning_ghgsb_43";
41
+ const colorNeutral = "_colorNeutral_ghgsb_51";
42
+ const colorSupport = "_colorSupport_ghgsb_59";
43
+ const colorInverse = "_colorInverse_ghgsb_65";
44
+ const variantOutlined = "_variantOutlined_ghgsb_71";
45
+ const variantFilled = "_variantFilled_ghgsb_100";
46
+ const sizeMd = "_sizeMd_ghgsb_127";
47
+ const sizeSm = "_sizeSm_ghgsb_134";
46
48
  const styles = {
47
49
  IconButton: IconButton$1,
48
50
  colorPrimary,
@@ -53,19 +55,23 @@ const styles = {
53
55
  colorSupport,
54
56
  colorInverse,
55
57
  variantOutlined,
56
- variantFilled
58
+ variantFilled,
59
+ sizeMd,
60
+ sizeSm
57
61
  };
58
62
  const IconButton = React.forwardRef((props, inRef) => {
59
- const _a = props, { color = "primary", variant = "filled", icon, accessibilityLabel, isDisabled = false } = _a, restProps = __objRest(_a, ["color", "variant", "icon", "accessibilityLabel", "isDisabled"]);
63
+ const _a = props, { color = "primary", variant = "filled", icon, size = "md", accessibilityLabel, isDisabled = false } = _a, restProps = __objRest(_a, ["color", "variant", "icon", "size", "accessibilityLabel", "isDisabled"]);
60
64
  UnstyledButton.logWarningIfInvalidColorVariantCombination(color, variant);
65
+ const iconSize = size === "sm" ? "xs" : "md";
61
66
  return React.createElement(UnstyledButton.UnstyledButton, __spreadValues({
62
67
  isDisabled,
63
68
  ref: inRef,
64
- className: utilities_css.classNames(styles.IconButton, styles[utilities_css.variationName("variant", variant)], styles[utilities_css.variationName("color", color)])
69
+ className: utilities_css.classNames(styles.IconButton, styles[utilities_css.variationName("variant", variant)], styles[utilities_css.variationName("color", color)], styles[utilities_css.variationName("size", size)])
65
70
  }, restProps), React.createElement(Text.Text, {
66
71
  visuallyHidden: true
67
72
  }, accessibilityLabel), React.createElement(Icon.Icon, {
68
- symbol: icon
73
+ symbol: icon,
74
+ size: iconSize
69
75
  }));
70
76
  });
71
77
  IconButton.displayName = "IconButton";
package/IconButton/index.mjs CHANGED
@@ -31,16 +31,18 @@ import { l as logWarningIfInvalidColorVariantCombination, U as UnstyledButton }
31
31
  import { I as Icon } from "../__chunks__/Icon-0SN9dbwU.mjs";
32
32
  import { T as Text } from "../__chunks__/Text-YOL3isF4.mjs";
33
33
  import { classNames, variationName } from "../utilities/css.mjs";
34
- const IconButton$1 = "_IconButton_16fh0_4";
35
- const colorPrimary = "_colorPrimary_16fh0_19";
36
- const colorSecondary = "_colorSecondary_16fh0_27";
37
- const colorSuccess = "_colorSuccess_16fh0_35";
38
- const colorWarning = "_colorWarning_16fh0_43";
39
- const colorNeutral = "_colorNeutral_16fh0_51";
40
- const colorSupport = "_colorSupport_16fh0_59";
41
- const colorInverse = "_colorInverse_16fh0_65";
42
- const variantOutlined = "_variantOutlined_16fh0_71";
43
- const variantFilled = "_variantFilled_16fh0_100";
34
+ const IconButton$1 = "_IconButton_ghgsb_4";
35
+ const colorPrimary = "_colorPrimary_ghgsb_19";
36
+ const colorSecondary = "_colorSecondary_ghgsb_27";
37
+ const colorSuccess = "_colorSuccess_ghgsb_35";
38
+ const colorWarning = "_colorWarning_ghgsb_43";
39
+ const colorNeutral = "_colorNeutral_ghgsb_51";
40
+ const colorSupport = "_colorSupport_ghgsb_59";
41
+ const colorInverse = "_colorInverse_ghgsb_65";
42
+ const variantOutlined = "_variantOutlined_ghgsb_71";
43
+ const variantFilled = "_variantFilled_ghgsb_100";
44
+ const sizeMd = "_sizeMd_ghgsb_127";
45
+ const sizeSm = "_sizeSm_ghgsb_134";
44
46
  const styles = {
45
47
  IconButton: IconButton$1,
46
48
  colorPrimary,
@@ -51,19 +53,23 @@ const styles = {
51
53
  colorSupport,
52
54
  colorInverse,
53
55
  variantOutlined,
54
- variantFilled
56
+ variantFilled,
57
+ sizeMd,
58
+ sizeSm
55
59
  };
56
60
  const IconButton = forwardRef((props, inRef) => {
57
- const _a = props, { color = "primary", variant = "filled", icon, accessibilityLabel, isDisabled = false } = _a, restProps = __objRest(_a, ["color", "variant", "icon", "accessibilityLabel", "isDisabled"]);
61
+ const _a = props, { color = "primary", variant = "filled", icon, size = "md", accessibilityLabel, isDisabled = false } = _a, restProps = __objRest(_a, ["color", "variant", "icon", "size", "accessibilityLabel", "isDisabled"]);
58
62
  logWarningIfInvalidColorVariantCombination(color, variant);
63
+ const iconSize = size === "sm" ? "xs" : "md";
59
64
  return React__default.createElement(UnstyledButton, __spreadValues({
60
65
  isDisabled,
61
66
  ref: inRef,
62
- className: classNames(styles.IconButton, styles[variationName("variant", variant)], styles[variationName("color", color)])
67
+ className: classNames(styles.IconButton, styles[variationName("variant", variant)], styles[variationName("color", color)], styles[variationName("size", size)])
63
68
  }, restProps), React__default.createElement(Text, {
64
69
  visuallyHidden: true
65
70
  }, accessibilityLabel), React__default.createElement(Icon, {
66
- symbol: icon
71
+ symbol: icon,
72
+ size: iconSize
67
73
  }));
68
74
  });
69
75
  IconButton.displayName = "IconButton";
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@easypost/easy-ui",
3
- "version": "1.0.0-alpha.101",
3
+ "version": "1.0.0-alpha.103",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ],
7
7
  "dependencies": {
8
- "@easypost/easy-ui-icons": "1.0.0-alpha.49",
8
+ "@easypost/easy-ui-icons": "1.0.0-alpha.50",
9
9
  "@easypost/easy-ui-tokens": "1.0.0-alpha.17",
10
10
  "@react-aria/toast": "^3.0.5",
11
11
  "@react-aria/utils": "^3.29.1",
package/style.css CHANGED
@@ -3823,22 +3823,22 @@ textarea {
3823
3823
  }/**
3824
3824
  * Do not edit directly, this file was auto-generated.
3825
3825
  */
3826
- ._IconButton_16fh0_4 {
3826
+ ._IconButton_ghgsb_4 {
3827
3827
  display: inline-flex;
3828
3828
  align-items: center;
3829
3829
  justify-content: center;
3830
3830
  border-radius: var(--ezui-shape-border-radius-md);
3831
3831
  cursor: pointer;
3832
3832
  }
3833
- ._IconButton_16fh0_4:focus {
3833
+ ._IconButton_ghgsb_4:focus {
3834
3834
  box-shadow: var(--ezui-shadow-button);
3835
3835
  outline: none;
3836
3836
  }
3837
- ._IconButton_16fh0_4:disabled {
3837
+ ._IconButton_ghgsb_4:disabled {
3838
3838
  pointer-events: none;
3839
3839
  }
3840
3840
 
3841
- ._colorPrimary_16fh0_19 {
3841
+ ._colorPrimary_ghgsb_19 {
3842
3842
  --ezui-c-button-filled-font-color: var(--ezui-color-neutral-000);
3843
3843
  --ezui-c-button-filled-active-font-color: var(--ezui-color-neutral-000);
3844
3844
  --ezui-c-button-resting-color: var(--ezui-color-primary-500);
@@ -3846,7 +3846,7 @@ textarea {
3846
3846
  --ezui-c-button-active-color: var(--ezui-color-primary-700);
3847
3847
  }
3848
3848
 
3849
- ._colorSecondary_16fh0_27 {
3849
+ ._colorSecondary_ghgsb_27 {
3850
3850
  --ezui-c-button-filled-font-color: var(--ezui-color-neutral-000);
3851
3851
  --ezui-c-button-filled-active-font-color: var(--ezui-color-neutral-000);
3852
3852
  --ezui-c-button-resting-color: var(--ezui-color-secondary-500);
@@ -3854,7 +3854,7 @@ textarea {
3854
3854
  --ezui-c-button-active-color: var(--ezui-color-secondary-700);
3855
3855
  }
3856
3856
 
3857
- ._colorSuccess_16fh0_35 {
3857
+ ._colorSuccess_ghgsb_35 {
3858
3858
  --ezui-c-button-filled-font-color: var(--ezui-color-primary-800);
3859
3859
  --ezui-c-button-filled-active-font-color: var(--ezui-color-neutral-000);
3860
3860
  --ezui-c-button-resting-color: var(--ezui-color-positive-500);
@@ -3862,7 +3862,7 @@ textarea {
3862
3862
  --ezui-c-button-active-color: var(--ezui-color-positive-700);
3863
3863
  }
3864
3864
 
3865
- ._colorWarning_16fh0_43 {
3865
+ ._colorWarning_ghgsb_43 {
3866
3866
  --ezui-c-button-filled-font-color: var(--ezui-color-primary-800);
3867
3867
  --ezui-c-button-filled-active-font-color: var(--ezui-color-primary-800);
3868
3868
  --ezui-c-button-resting-color: var(--ezui-color-negative-500);
@@ -3870,7 +3870,7 @@ textarea {
3870
3870
  --ezui-c-button-active-color: var(--ezui-color-negative-700);
3871
3871
  }
3872
3872
 
3873
- ._colorNeutral_16fh0_51 {
3873
+ ._colorNeutral_ghgsb_51 {
3874
3874
  --ezui-c-button-filled-font-color: var(--ezui-color-neutral-000);
3875
3875
  --ezui-c-button-filled-active-font-color: var(--ezui-color-neutral-000);
3876
3876
  --ezui-c-button-resting-color: var(--ezui-color-primary-800);
@@ -3878,72 +3878,94 @@ textarea {
3878
3878
  --ezui-c-button-active-color: var(--ezui-color-primary-700);
3879
3879
  }
3880
3880
 
3881
- ._colorSupport_16fh0_59 {
3881
+ ._colorSupport_ghgsb_59 {
3882
3882
  --ezui-c-button-resting-color: var(--ezui-color-primary-800);
3883
3883
  --ezui-c-button-hover-focus-color: var(--ezui-color-neutral-900);
3884
3884
  --ezui-c-button-active-color: var(--ezui-color-neutral-700);
3885
3885
  }
3886
3886
 
3887
- ._colorInverse_16fh0_65 {
3887
+ ._colorInverse_ghgsb_65 {
3888
3888
  --ezui-c-button-resting-color: var(--ezui-color-neutral-000);
3889
3889
  --ezui-c-button-hover-focus-color: var(--ezui-color-neutral-100);
3890
3890
  --ezui-c-button-active-color: var(--ezui-color-neutral-200);
3891
3891
  }
3892
3892
 
3893
- ._variantOutlined_16fh0_71 {
3893
+ ._variantOutlined_ghgsb_71 {
3894
3894
  padding: calc(var(--ezui-space-1-5) - var(--ezui-shape-border-width-1));
3895
3895
  background-color: transparent;
3896
3896
  border: var(--ezui-shape-border-width-1) solid var(--ezui-c-button-resting-color);
3897
3897
  color: var(--ezui-c-button-resting-color);
3898
3898
  }
3899
- ._variantOutlined_16fh0_71:focus {
3899
+ ._variantOutlined_ghgsb_71:focus {
3900
3900
  border: var(--ezui-shape-border-width-1) solid var(--ezui-c-button-hover-focus-color);
3901
3901
  color: var(--ezui-c-button-hover-focus-color);
3902
3902
  }
3903
- ._variantOutlined_16fh0_71:disabled {
3903
+ ._variantOutlined_ghgsb_71:disabled {
3904
3904
  color: var(--ezui-color-neutral-300);
3905
3905
  border: var(--ezui-shape-border-width-1) solid var(--ezui-color-neutral-300);
3906
3906
  }
3907
- ._variantOutlined_16fh0_71:link {
3907
+ ._variantOutlined_ghgsb_71:link {
3908
3908
  text-decoration: none;
3909
3909
  }
3910
- ._variantOutlined_16fh0_71:active:not(:disabled) {
3910
+ ._variantOutlined_ghgsb_71:active:not(:disabled) {
3911
3911
  color: var(--ezui-c-button-active-color);
3912
3912
  border: var(--ezui-shape-border-width-1) solid var(--ezui-c-button-active-color);
3913
3913
  }
3914
- ._variantOutlined_16fh0_71:active:not(:disabled):focus {
3914
+ ._variantOutlined_ghgsb_71:active:not(:disabled):focus {
3915
3915
  box-shadow: none;
3916
3916
  }
3917
- ._variantOutlined_16fh0_71:hover:not(:disabled):not(:active) {
3917
+ ._variantOutlined_ghgsb_71:hover:not(:disabled):not(:active) {
3918
3918
  border: var(--ezui-shape-border-width-1) solid var(--ezui-c-button-hover-focus-color);
3919
3919
  color: var(--ezui-c-button-hover-focus-color);
3920
3920
  }
3921
3921
 
3922
- ._variantFilled_16fh0_100 {
3922
+ ._variantFilled_ghgsb_100 {
3923
3923
  padding: var(--ezui-space-1-5);
3924
3924
  background-color: var(--ezui-c-button-resting-color);
3925
3925
  color: var(--ezui-c-button-filled-font-color);
3926
3926
  }
3927
- ._variantFilled_16fh0_100:focus {
3927
+ ._variantFilled_ghgsb_100:focus {
3928
3928
  background-color: var(--ezui-c-button-hover-focus-color);
3929
3929
  }
3930
- ._variantFilled_16fh0_100:disabled {
3930
+ ._variantFilled_ghgsb_100:disabled {
3931
3931
  color: var(--ezui-color-neutral-000);
3932
3932
  background-color: var(--ezui-color-neutral-200);
3933
3933
  }
3934
- ._variantFilled_16fh0_100:link {
3934
+ ._variantFilled_ghgsb_100:link {
3935
3935
  text-decoration: none;
3936
3936
  }
3937
- ._variantFilled_16fh0_100:not(:disabled):active {
3937
+ ._variantFilled_ghgsb_100:not(:disabled):active {
3938
3938
  color: var(--ezui-c-button-filled-active-font-color);
3939
3939
  background-color: var(--ezui-c-button-active-color);
3940
3940
  }
3941
- ._variantFilled_16fh0_100:not(:disabled):active:focus {
3941
+ ._variantFilled_ghgsb_100:not(:disabled):active:focus {
3942
3942
  box-shadow: none;
3943
3943
  }
3944
- ._variantFilled_16fh0_100:hover:not(:disabled):not(:active) {
3944
+ ._variantFilled_ghgsb_100:hover:not(:disabled):not(:active) {
3945
3945
  background-color: var(--ezui-c-button-hover-focus-color);
3946
3946
  color: var(--ezui-c-button-filled-font-color);
3947
+ }
3948
+
3949
+ ._sizeMd_ghgsb_127 {
3950
+ font-weight: 500;
3951
+ font-size: 0.9375rem;
3952
+ letter-spacing: 0;
3953
+ line-height: 1.5rem;
3954
+ }
3955
+
3956
+ ._sizeSm_ghgsb_134 {
3957
+ font-weight: 500;
3958
+ font-size: 0.75rem;
3959
+ letter-spacing: 0;
3960
+ line-height: 1rem;
3961
+ }
3962
+
3963
+ ._sizeSm_ghgsb_134._variantFilled_ghgsb_100 {
3964
+ padding: var(--ezui-space-1);
3965
+ }
3966
+
3967
+ ._sizeSm_ghgsb_134._variantOutlined_ghgsb_71 {
3968
+ padding: calc(var(--ezui-space-1) - var(--ezui-shape-border-width-1));
3947
3969
  }/**
3948
3970
  * Do not edit directly, this file was auto-generated.
3949
3971
  */