@fluentui/react-button 0.0.0-nightly-20230426-0420.1 → 0.0.0-nightly-20230428-0419.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 (119) hide show
  1. package/CHANGELOG.json +19 -19
  2. package/CHANGELOG.md +12 -12
  3. package/lib-commonjs/components/Button/Button.js +2 -2
  4. package/lib-commonjs/components/Button/Button.js.map +1 -1
  5. package/lib-commonjs/components/Button/index.js +3 -3
  6. package/lib-commonjs/components/Button/index.js.map +1 -1
  7. package/lib-commonjs/components/Button/{useButtonStyles.js → useButtonStyles.styles.js} +2 -2
  8. package/lib-commonjs/components/Button/useButtonStyles.styles.js.map +1 -0
  9. package/lib-commonjs/components/CompoundButton/CompoundButton.js +2 -2
  10. package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -1
  11. package/lib-commonjs/components/CompoundButton/index.js +3 -3
  12. package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
  13. package/lib-commonjs/components/CompoundButton/{useCompoundButtonStyles.js → useCompoundButtonStyles.styles.js} +4 -4
  14. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.js.map +1 -0
  15. package/lib-commonjs/components/MenuButton/MenuButton.js +2 -2
  16. package/lib-commonjs/components/MenuButton/MenuButton.js.map +1 -1
  17. package/lib-commonjs/components/MenuButton/index.js +3 -3
  18. package/lib-commonjs/components/MenuButton/index.js.map +1 -1
  19. package/lib-commonjs/components/MenuButton/{useMenuButtonStyles.js → useMenuButtonStyles.styles.js} +4 -4
  20. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.js.map +1 -0
  21. package/lib-commonjs/components/SplitButton/SplitButton.js +2 -2
  22. package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
  23. package/lib-commonjs/components/SplitButton/index.js +3 -3
  24. package/lib-commonjs/components/SplitButton/index.js.map +1 -1
  25. package/lib-commonjs/components/SplitButton/{useSplitButtonStyles.js → useSplitButtonStyles.styles.js} +2 -2
  26. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.js.map +1 -0
  27. package/lib-commonjs/components/ToggleButton/ToggleButton.js +2 -2
  28. package/lib-commonjs/components/ToggleButton/ToggleButton.js.map +1 -1
  29. package/lib-commonjs/components/ToggleButton/index.js +3 -3
  30. package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
  31. package/lib-commonjs/components/ToggleButton/{useToggleButtonStyles.js → useToggleButtonStyles.styles.js} +4 -4
  32. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -0
  33. package/package.json +9 -9
  34. package/dist/index.d.ts +0 -272
  35. package/lib/Button.js +0 -2
  36. package/lib/Button.js.map +0 -1
  37. package/lib/CompoundButton.js +0 -2
  38. package/lib/CompoundButton.js.map +0 -1
  39. package/lib/MenuButton.js +0 -2
  40. package/lib/MenuButton.js.map +0 -1
  41. package/lib/SplitButton.js +0 -2
  42. package/lib/SplitButton.js.map +0 -1
  43. package/lib/ToggleButton.js +0 -2
  44. package/lib/ToggleButton.js.map +0 -1
  45. package/lib/components/Button/Button.js +0 -18
  46. package/lib/components/Button/Button.js.map +0 -1
  47. package/lib/components/Button/Button.types.js +0 -2
  48. package/lib/components/Button/Button.types.js.map +0 -1
  49. package/lib/components/Button/index.js +0 -5
  50. package/lib/components/Button/index.js.map +0 -1
  51. package/lib/components/Button/renderButton.js +0 -17
  52. package/lib/components/Button/renderButton.js.map +0 -1
  53. package/lib/components/Button/useButton.js +0 -50
  54. package/lib/components/Button/useButton.js.map +0 -1
  55. package/lib/components/Button/useButtonStyles.js +0 -485
  56. package/lib/components/Button/useButtonStyles.js.map +0 -1
  57. package/lib/components/CompoundButton/CompoundButton.js +0 -18
  58. package/lib/components/CompoundButton/CompoundButton.js.map +0 -1
  59. package/lib/components/CompoundButton/CompoundButton.types.js +0 -2
  60. package/lib/components/CompoundButton/CompoundButton.types.js.map +0 -1
  61. package/lib/components/CompoundButton/index.js +0 -6
  62. package/lib/components/CompoundButton/index.js.map +0 -1
  63. package/lib/components/CompoundButton/renderCompoundButton.js +0 -17
  64. package/lib/components/CompoundButton/renderCompoundButton.js.map +0 -1
  65. package/lib/components/CompoundButton/useCompoundButton.js +0 -34
  66. package/lib/components/CompoundButton/useCompoundButton.js.map +0 -1
  67. package/lib/components/CompoundButton/useCompoundButtonStyles.js +0 -192
  68. package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +0 -1
  69. package/lib/components/MenuButton/MenuButton.js +0 -19
  70. package/lib/components/MenuButton/MenuButton.js.map +0 -1
  71. package/lib/components/MenuButton/MenuButton.types.js +0 -2
  72. package/lib/components/MenuButton/MenuButton.types.js.map +0 -1
  73. package/lib/components/MenuButton/index.js +0 -6
  74. package/lib/components/MenuButton/index.js.map +0 -1
  75. package/lib/components/MenuButton/renderMenuButton.js +0 -17
  76. package/lib/components/MenuButton/renderMenuButton.js.map +0 -1
  77. package/lib/components/MenuButton/useMenuButton.js +0 -34
  78. package/lib/components/MenuButton/useMenuButton.js.map +0 -1
  79. package/lib/components/MenuButton/useMenuButtonStyles.js +0 -110
  80. package/lib/components/MenuButton/useMenuButtonStyles.js.map +0 -1
  81. package/lib/components/SplitButton/SplitButton.js +0 -19
  82. package/lib/components/SplitButton/SplitButton.js.map +0 -1
  83. package/lib/components/SplitButton/SplitButton.types.js +0 -2
  84. package/lib/components/SplitButton/SplitButton.types.js.map +0 -1
  85. package/lib/components/SplitButton/index.js +0 -6
  86. package/lib/components/SplitButton/index.js.map +0 -1
  87. package/lib/components/SplitButton/renderSplitButton.js +0 -13
  88. package/lib/components/SplitButton/renderSplitButton.js.map +0 -1
  89. package/lib/components/SplitButton/useSplitButton.js +0 -77
  90. package/lib/components/SplitButton/useSplitButton.js.map +0 -1
  91. package/lib/components/SplitButton/useSplitButtonStyles.js +0 -108
  92. package/lib/components/SplitButton/useSplitButtonStyles.js.map +0 -1
  93. package/lib/components/ToggleButton/ToggleButton.js +0 -18
  94. package/lib/components/ToggleButton/ToggleButton.js.map +0 -1
  95. package/lib/components/ToggleButton/ToggleButton.types.js +0 -2
  96. package/lib/components/ToggleButton/ToggleButton.types.js.map +0 -1
  97. package/lib/components/ToggleButton/index.js +0 -6
  98. package/lib/components/ToggleButton/index.js.map +0 -1
  99. package/lib/components/ToggleButton/renderToggleButton.js +0 -2
  100. package/lib/components/ToggleButton/renderToggleButton.js.map +0 -1
  101. package/lib/components/ToggleButton/useToggleButton.js +0 -14
  102. package/lib/components/ToggleButton/useToggleButton.js.map +0 -1
  103. package/lib/components/ToggleButton/useToggleButtonStyles.js +0 -386
  104. package/lib/components/ToggleButton/useToggleButtonStyles.js.map +0 -1
  105. package/lib/contexts/ButtonContext.js +0 -15
  106. package/lib/contexts/ButtonContext.js.map +0 -1
  107. package/lib/contexts/index.js +0 -2
  108. package/lib/contexts/index.js.map +0 -1
  109. package/lib/index.js +0 -8
  110. package/lib/index.js.map +0 -1
  111. package/lib/utils/index.js +0 -2
  112. package/lib/utils/index.js.map +0 -1
  113. package/lib/utils/useToggleState.js +0 -38
  114. package/lib/utils/useToggleState.js.map +0 -1
  115. package/lib-commonjs/components/Button/useButtonStyles.js.map +0 -1
  116. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +0 -1
  117. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +0 -1
  118. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +0 -1
  119. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +0 -1
@@ -1,50 +0,0 @@
1
- import * as React from 'react';
2
- import { useARIAButtonShorthand } from '@fluentui/react-aria';
3
- import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
4
- import { useButtonContext } from '../../contexts/ButtonContext';
5
- /**
6
- * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
7
- * @param props - User provided props to the Button component.
8
- * @param ref - User provided ref to be passed to the Button component.
9
- */
10
- export const useButton_unstable = (props, ref) => {
11
- const {
12
- size: contextSize
13
- } = useButtonContext();
14
- const {
15
- appearance = 'secondary',
16
- as = 'button',
17
- disabled = false,
18
- disabledFocusable = false,
19
- icon,
20
- iconPosition = 'before',
21
- shape = 'rounded',
22
- size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium'
23
- } = props;
24
- const iconShorthand = resolveShorthand(icon);
25
- return {
26
- // Props passed at the top-level
27
- appearance,
28
- disabled,
29
- disabledFocusable,
30
- iconPosition,
31
- shape,
32
- size,
33
- // State calculated from a set of props
34
- iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
35
- // Slots definition
36
- components: {
37
- root: 'button',
38
- icon: 'span'
39
- },
40
- root: getNativeElementProps(as, useARIAButtonShorthand(props, {
41
- required: true,
42
- defaultProps: {
43
- ref: ref,
44
- type: 'button'
45
- }
46
- })),
47
- icon: iconShorthand
48
- };
49
- };
50
- //# sourceMappingURL=useButton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["React","useARIAButtonShorthand","getNativeElementProps","resolveShorthand","useButtonContext","useButton_unstable","props","ref","size","contextSize","appearance","as","disabled","disabledFocusable","icon","iconPosition","shape","iconShorthand","iconOnly","Boolean","children","components","root","required","defaultProps","type"],"sources":["../../../src/components/Button/useButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport type { ButtonProps, ButtonState } from './Button.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n const { size: contextSize } = useButtonContext();\n const {\n appearance = 'secondary',\n as = 'button',\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n shape = 'rounded',\n size = contextSize ?? 'medium',\n } = props;\n const iconShorthand = resolveShorthand(icon);\n\n return {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // State calculated from a set of props\n iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n },\n\n root: getNativeElementProps(\n as,\n useARIAButtonShorthand<ARIAButtonSlotProps<'a'>>(props, {\n required: true,\n defaultProps: {\n ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n type: 'button',\n },\n }),\n ),\n icon: iconShorthand,\n };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAA8BC,sBAAsB,QAAQ;AAC5D,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ;AACxD,SAASC,gBAAgB,QAAQ;AAGjC;;;;;AAKA,OAAO,MAAMC,kBAAA,GAAqBA,CAChCC,KAAA,EACAC,GAAA,KACgB;EAChB,MAAM;IAAEC,IAAA,EAAMC;EAAW,CAAE,GAAGL,gBAAA;EAC9B,MAAM;IACJM,UAAA,GAAa;IACbC,EAAA,GAAK;IACLC,QAAA,GAAW,KAAK;IAChBC,iBAAA,GAAoB,KAAK;IACzBC,IAAA;IACAC,YAAA,GAAe;IACfC,KAAA,GAAQ;IACRR,IAAA,GAAOC,WAAA,aAAAA,WAAA,cAAAA,WAAA,GAAe;EAAQ,CAC/B,GAAGH,KAAA;EACJ,MAAMW,aAAA,GAAgBd,gBAAA,CAAiBW,IAAA;EAEvC,OAAO;IACL;IACAJ,UAAA;IACAE,QAAA;IACAC,iBAAA;IACAE,YAAA;IACAC,KAAA;IACAR,IAAA;IAEA;IACAU,QAAA,EAAUC,OAAA,CAAQ,CAAAF,aAAA,aAAAA,aAAA,uBAAAA,aAAA,CAAeG,QAAQ,KAAI,CAACd,KAAA,CAAMc,QAAQ;IAE5D;IACAC,UAAA,EAAY;MACVC,IAAA,EAAM;MACNR,IAAA,EAAM;IACR;IAEAQ,IAAA,EAAMpB,qBAAA,CACJS,EAAA,EACAV,sBAAA,CAAiDK,KAAA,EAAO;MACtDiB,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZjB,GAAA,EAAKA,GAAA;QACLkB,IAAA,EAAM;MACR;IACF;IAEFX,IAAA,EAAMG;EACR;AACF"}
@@ -1,485 +0,0 @@
1
- import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
2
- import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
3
- import { tokens } from '@fluentui/react-theme';
4
- import { shorthands, __styles, __resetStyles, mergeClasses } from '@griffel/react';
5
- export const buttonClassNames = {
6
- root: 'fui-Button',
7
- icon: 'fui-Button__icon'
8
- };
9
- const iconSpacingVar = '--fui-Button__icon--spacing';
10
- const buttonSpacingSmall = '3px';
11
- const buttonSpacingSmallWithIcon = '1px';
12
- const buttonSpacingMedium = '5px';
13
- const buttonSpacingLarge = '8px';
14
- const buttonSpacingLargeWithIcon = '7px';
15
- const useRootBaseClassName = /*#__PURE__*/__resetStyles("rsawnvh", "r1eny37h", [".rsawnvh{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;text-decoration-line:none;vertical-align:middle;margin:0;overflow:hidden;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);font-family:var(--fontFamilyBase);outline-style:none;padding:5px var(--spacingHorizontalM);min-width:96px;border-radius:var(--borderRadiusMedium);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase300);transition-duration:var(--durationFaster);transition-property:background,border,color;transition-timing-function:var(--curveEasyEase);}", ".rsawnvh:hover{background-color:var(--colorNeutralBackground1Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground1Hover);cursor:pointer;}", ".rsawnvh:hover .fui-Icon-filled{display:inline;}", ".rsawnvh:hover .fui-Icon-regular{display:none;}", ".rsawnvh:hover:active{background-color:var(--colorNeutralBackground1Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground1Pressed);outline-style:none;}", ".rsawnvh:hover:active .fui-Icon-filled{display:inline;}", ".rsawnvh:hover:active .fui-Icon-regular{display:none;}", "@media screen and (prefers-reduced-motion: reduce){.rsawnvh{transition-duration:0.01ms;}}", "@media (forced-colors: active){.rsawnvh:focus{border-color:ButtonText;}.rsawnvh:hover{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}.rsawnvh:hover:active{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}}", ".rsawnvh:focus{outline-style:none;}", ".rsawnvh:focus-visible{outline-style:none;}", ".rsawnvh[data-fui-focus-visible]{border-color:var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);outline:var(--strokeWidthThick) solid var(--colorTransparentStroke);box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);z-index:1;}", ".r1eny37h{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;text-decoration-line:none;vertical-align:middle;margin:0;overflow:hidden;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);font-family:var(--fontFamilyBase);outline-style:none;padding:5px var(--spacingHorizontalM);min-width:96px;border-radius:var(--borderRadiusMedium);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightSemibold);line-height:var(--lineHeightBase300);transition-duration:var(--durationFaster);transition-property:background,border,color;transition-timing-function:var(--curveEasyEase);}", ".r1eny37h:hover{background-color:var(--colorNeutralBackground1Hover);border-color:var(--colorNeutralStroke1Hover);color:var(--colorNeutralForeground1Hover);cursor:pointer;}", ".r1eny37h:hover .fui-Icon-filled{display:inline;}", ".r1eny37h:hover .fui-Icon-regular{display:none;}", ".r1eny37h:hover:active{background-color:var(--colorNeutralBackground1Pressed);border-color:var(--colorNeutralStroke1Pressed);color:var(--colorNeutralForeground1Pressed);outline-style:none;}", ".r1eny37h:hover:active .fui-Icon-filled{display:inline;}", ".r1eny37h:hover:active .fui-Icon-regular{display:none;}", "@media screen and (prefers-reduced-motion: reduce){.r1eny37h{transition-duration:0.01ms;}}", "@media (forced-colors: active){.r1eny37h:focus{border-color:ButtonText;}.r1eny37h:hover{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}.r1eny37h:hover:active{background-color:HighlightText;border-color:Highlight;color:Highlight;forced-color-adjust:none;}}", ".r1eny37h:focus{outline-style:none;}", ".r1eny37h:focus-visible{outline-style:none;}", ".r1eny37h[data-fui-focus-visible]{border-color:var(--colorTransparentStroke);border-radius:var(--borderRadiusMedium);outline:var(--strokeWidthThick) solid var(--colorTransparentStroke);box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);z-index:1;}"]);
16
- const useIconBaseClassName = /*#__PURE__*/__resetStyles("rywnvv2", null, [".rywnvv2{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;font-size:20px;height:20px;width:20px;--fui-Button__icon--spacing:var(--spacingHorizontalSNudge);}"]);
17
- const useRootStyles = /*#__PURE__*/__styles({
18
- outline: {
19
- De3pzq: "f1c21dwh",
20
- Jwef8y: "fjxutwb",
21
- iro3zm: "fwiml72"
22
- },
23
- primary: {
24
- De3pzq: "ffp7eso",
25
- g2u3we: "f1p3nwhy",
26
- h3c5rm: ["f11589ue", "f1pdflbu"],
27
- B9xav0g: "f1q5o8ev",
28
- zhjwy3: ["f1pdflbu", "f11589ue"],
29
- sj55zd: "f1phragk",
30
- Jwef8y: "f15wkkf3",
31
- Bgoe8wy: "f1s2uweq",
32
- Bwzppfd: ["fr80ssc", "fecsdlb"],
33
- oetu4i: "f1ukrpxl",
34
- gg5e9n: ["fecsdlb", "fr80ssc"],
35
- Bi91k9c: "f1rq72xc",
36
- iro3zm: "fnp9lpt",
37
- b661bw: "f1h0usnq",
38
- Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
39
- B9zn80p: "f16h9ulv",
40
- Bpld233: ["fx2bmrt", "fs4ktlq"],
41
- B2d53fq: "f1d6v5y2",
42
- Bsw6fvg: "f1rirnrt",
43
- Bjwas2f: "f1uu00uk",
44
- Bn1d65q: ["fkvaka8", "f9a0qzu"],
45
- Bxeuatn: "f1ux7til",
46
- n51gp8: ["f9a0qzu", "fkvaka8"],
47
- Bbusuzp: "f1lkg8j3",
48
- ycbfsm: "fkc42ay",
49
- Bqrx1nm: "fq7113v",
50
- pgvf35: "ff1wgvm",
51
- Bh7lczh: ["fiob0tu", "f1x4h75k"],
52
- dpv3f4: "f1j6scgf",
53
- Bpnjhaq: ["f1x4h75k", "fiob0tu"],
54
- ze5xyy: "f4xjyn1",
55
- g2kj27: "fbgcvur",
56
- Bf756sw: "f1ks1yx8",
57
- Bow2dr7: ["f1o6qegi", "fmxjhhp"],
58
- Bvhedfk: "fcnxywj",
59
- Gye4lf: ["fmxjhhp", "f1o6qegi"],
60
- pc6evw: "f9ddjv3"
61
- },
62
- secondary: {},
63
- subtle: {
64
- De3pzq: "fhovq9v",
65
- g2u3we: "f1p3nwhy",
66
- h3c5rm: ["f11589ue", "f1pdflbu"],
67
- B9xav0g: "f1q5o8ev",
68
- zhjwy3: ["f1pdflbu", "f11589ue"],
69
- sj55zd: "fkfq4zb",
70
- Jwef8y: "f1t94bn6",
71
- Bgoe8wy: "f1s2uweq",
72
- Bwzppfd: ["fr80ssc", "fecsdlb"],
73
- oetu4i: "f1ukrpxl",
74
- gg5e9n: ["fecsdlb", "fr80ssc"],
75
- Bi91k9c: "fnwyq0v",
76
- Bbdnnc7: "fy5bs14",
77
- iro3zm: "fsv2rcd",
78
- b661bw: "f1h0usnq",
79
- Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
80
- B9zn80p: "f16h9ulv",
81
- Bpld233: ["fx2bmrt", "fs4ktlq"],
82
- B2d53fq: "f1omzyqd",
83
- x3br3k: "fj8yq94"
84
- },
85
- transparent: {
86
- De3pzq: "f1c21dwh",
87
- g2u3we: "f1p3nwhy",
88
- h3c5rm: ["f11589ue", "f1pdflbu"],
89
- B9xav0g: "f1q5o8ev",
90
- zhjwy3: ["f1pdflbu", "f11589ue"],
91
- sj55zd: "fkfq4zb",
92
- Jwef8y: "fjxutwb",
93
- Bgoe8wy: "f1s2uweq",
94
- Bwzppfd: ["fr80ssc", "fecsdlb"],
95
- oetu4i: "f1ukrpxl",
96
- gg5e9n: ["fecsdlb", "fr80ssc"],
97
- Bi91k9c: "f139oj5f",
98
- iro3zm: "fwiml72",
99
- b661bw: "f1h0usnq",
100
- Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
101
- B9zn80p: "f16h9ulv",
102
- Bpld233: ["fx2bmrt", "fs4ktlq"],
103
- B2d53fq: "f1fg1p5m"
104
- },
105
- circular: {
106
- Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
107
- Beyfa6y: ["f1nfllo7", "f8fbkgy"],
108
- B7oj6ja: ["f1djnp8u", "f1s8kh49"],
109
- Btl43ni: ["f1s8kh49", "f1djnp8u"]
110
- },
111
- rounded: {},
112
- square: {
113
- Bbmb7ep: ["fzi6hpg", "fyowgf4"],
114
- Beyfa6y: ["fyowgf4", "fzi6hpg"],
115
- B7oj6ja: ["f3fg2lr", "f13av6d4"],
116
- Btl43ni: ["f13av6d4", "f3fg2lr"]
117
- },
118
- small: {
119
- Bf4jedk: "fh7ncta",
120
- z8tnut: "f1khb0e9",
121
- z189sj: ["f1vdfbxk", "f1f5gg8d"],
122
- Byoj8tv: "f1jnq6q7",
123
- uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
124
- Bbmb7ep: ["fclariu", "fyjfh2l"],
125
- Beyfa6y: ["fyjfh2l", "fclariu"],
126
- B7oj6ja: ["f11xeu6h", "f1knf8zw"],
127
- Btl43ni: ["f1knf8zw", "f11xeu6h"],
128
- Be2twd7: "fy9rknc",
129
- Bhrd7zp: "figsok6",
130
- Bg96gwp: "fwrc4pm"
131
- },
132
- smallWithIcon: {
133
- Byoj8tv: "f1brlhvm",
134
- z8tnut: "f1sl3k7w"
135
- },
136
- medium: {},
137
- large: {
138
- Bf4jedk: "f14es27b",
139
- z8tnut: "fp9bwmr",
140
- z189sj: ["fjodcmx", "fhx4nu"],
141
- Byoj8tv: "f150uoa4",
142
- uwmqm3: ["fhx4nu", "fjodcmx"],
143
- Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
144
- Beyfa6y: ["f16jpd5f", "f1aa9q02"],
145
- B7oj6ja: ["f1jar5jt", "fyu767a"],
146
- Btl43ni: ["fyu767a", "f1jar5jt"],
147
- Be2twd7: "fod5ikn",
148
- Bhrd7zp: "fl43uef",
149
- Bg96gwp: "faaz57k"
150
- },
151
- largeWithIcon: {
152
- Byoj8tv: "fy7v416",
153
- z8tnut: "f1a1bwwz"
154
- }
155
- }, {
156
- d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".fh7ncta{min-width:64px;}", ".f1khb0e9{padding-top:3px;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1jnq6q7{padding-bottom:3px;}", ".fclariu{border-bottom-right-radius:3px;}", ".fyjfh2l{border-bottom-left-radius:3px;}", ".f11xeu6h{border-top-right-radius:3px;}", ".f1knf8zw{border-top-left-radius:3px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1brlhvm{padding-bottom:1px;}", ".f1sl3k7w{padding-top:1px;}", ".f14es27b{min-width:96px;}", ".fp9bwmr{padding-top:8px;}", ".fjodcmx{padding-right:var(--spacingHorizontalL);}", ".fhx4nu{padding-left:var(--spacingHorizontalL);}", ".f150uoa4{padding-bottom:8px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fy7v416{padding-bottom:7px;}", ".f1a1bwwz{padding-top:7px;}"],
157
- h: [".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".fy5bs14:hover .fui-Button__icon{color:var(--colorNeutralForeground2BrandHover);}", ".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1omzyqd:hover:active{color:var(--colorNeutralForeground2Pressed);}", ".fj8yq94:hover:active .fui-Button__icon{color:var(--colorNeutralForeground2BrandPressed);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
158
- m: [["@media (forced-colors: active){.f1rirnrt{background-color:Highlight;}}", {
159
- m: "(forced-colors: active)"
160
- }], ["@media (forced-colors: active){.f1uu00uk{border-top-color:HighlightText;}}", {
161
- m: "(forced-colors: active)"
162
- }], ["@media (forced-colors: active){.fkvaka8{border-right-color:HighlightText;}.f9a0qzu{border-left-color:HighlightText;}}", {
163
- m: "(forced-colors: active)"
164
- }], ["@media (forced-colors: active){.f1ux7til{border-bottom-color:HighlightText;}}", {
165
- m: "(forced-colors: active)"
166
- }], ["@media (forced-colors: active){.f9a0qzu{border-left-color:HighlightText;}.fkvaka8{border-right-color:HighlightText;}}", {
167
- m: "(forced-colors: active)"
168
- }], ["@media (forced-colors: active){.f1lkg8j3{color:HighlightText;}}", {
169
- m: "(forced-colors: active)"
170
- }], ["@media (forced-colors: active){.fkc42ay{forced-color-adjust:none;}}", {
171
- m: "(forced-colors: active)"
172
- }], ["@media (forced-colors: active){.fq7113v:hover{background-color:HighlightText;}}", {
173
- m: "(forced-colors: active)"
174
- }], ["@media (forced-colors: active){.ff1wgvm:hover{border-top-color:Highlight;}}", {
175
- m: "(forced-colors: active)"
176
- }], ["@media (forced-colors: active){.fiob0tu:hover{border-right-color:Highlight;}.f1x4h75k:hover{border-left-color:Highlight;}}", {
177
- m: "(forced-colors: active)"
178
- }], ["@media (forced-colors: active){.f1j6scgf:hover{border-bottom-color:Highlight;}}", {
179
- m: "(forced-colors: active)"
180
- }], ["@media (forced-colors: active){.f1x4h75k:hover{border-left-color:Highlight;}.fiob0tu:hover{border-right-color:Highlight;}}", {
181
- m: "(forced-colors: active)"
182
- }], ["@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}", {
183
- m: "(forced-colors: active)"
184
- }], ["@media (forced-colors: active){.fbgcvur:hover:active{background-color:HighlightText;}}", {
185
- m: "(forced-colors: active)"
186
- }], ["@media (forced-colors: active){.f1ks1yx8:hover:active{border-top-color:Highlight;}}", {
187
- m: "(forced-colors: active)"
188
- }], ["@media (forced-colors: active){.f1o6qegi:hover:active{border-right-color:Highlight;}.fmxjhhp:hover:active{border-left-color:Highlight;}}", {
189
- m: "(forced-colors: active)"
190
- }], ["@media (forced-colors: active){.fcnxywj:hover:active{border-bottom-color:Highlight;}}", {
191
- m: "(forced-colors: active)"
192
- }], ["@media (forced-colors: active){.fmxjhhp:hover:active{border-left-color:Highlight;}.f1o6qegi:hover:active{border-right-color:Highlight;}}", {
193
- m: "(forced-colors: active)"
194
- }], ["@media (forced-colors: active){.f9ddjv3:hover:active{color:Highlight;}}", {
195
- m: "(forced-colors: active)"
196
- }]]
197
- });
198
- const useRootDisabledStyles = /*#__PURE__*/__styles({
199
- base: {
200
- De3pzq: "f1bg9a2p",
201
- g2u3we: "f1jj8ep1",
202
- h3c5rm: ["f15xbau", "fy0fskl"],
203
- B9xav0g: "f4ikngz",
204
- zhjwy3: ["fy0fskl", "f15xbau"],
205
- sj55zd: "f1s2aq7o",
206
- Bceei9c: "fdrzuqr",
207
- Jwef8y: "f1falr9n",
208
- Bgoe8wy: "f12mpcsy",
209
- Bwzppfd: ["f1gwvigk", "f18rmfxp"],
210
- oetu4i: "f1jnshp0",
211
- gg5e9n: ["f18rmfxp", "f1gwvigk"],
212
- Bi91k9c: "fvgxktp",
213
- eoavqd: "fphbwmw",
214
- Bk3fhr4: "f19vpps7",
215
- Bmfj8id: "fv5swzo",
216
- iro3zm: "f1t6o4dc",
217
- b661bw: "f10ztigi",
218
- Bk6r4ia: ["f1ft5sdu", "f1gzf82w"],
219
- B9zn80p: "f12zbtn2",
220
- Bpld233: ["f1gzf82w", "f1ft5sdu"],
221
- B2d53fq: "fcvwxyo",
222
- c3iz72: "f8w4c43",
223
- em6i61: "f1ol4fw6",
224
- vm6p8p: "f1q1lw4e"
225
- },
226
- highContrast: {
227
- Bsw6fvg: "f4lkoma",
228
- Bjwas2f: "fg455y9",
229
- Bn1d65q: ["f1rvyvqg", "f14g86mu"],
230
- Bxeuatn: "f1cwzwz",
231
- n51gp8: ["f14g86mu", "f1rvyvqg"],
232
- Bbusuzp: "f1dcs8yz",
233
- G867l3: "fjwq6ea",
234
- gdbnj: ["f1lr3nhc", "f1mbxvi6"],
235
- mxns5l: "fn5gmvv",
236
- o3nasb: ["f1mbxvi6", "f1lr3nhc"],
237
- Bqrx1nm: "f1vmkb5g",
238
- pgvf35: "f53ppgq",
239
- Bh7lczh: ["f1663y11", "f80fkiy"],
240
- dpv3f4: "f18v5270",
241
- Bpnjhaq: ["f80fkiy", "f1663y11"],
242
- ze5xyy: "f1kc2mi9",
243
- g2kj27: "f1y0svfh",
244
- Bf756sw: "fihuait",
245
- Bow2dr7: ["fnxhupq", "fyd6l6x"],
246
- Bvhedfk: "fx507ft",
247
- Gye4lf: ["fyd6l6x", "fnxhupq"],
248
- pc6evw: "fb3rf2x"
249
- },
250
- outline: {
251
- De3pzq: "f1c21dwh",
252
- Jwef8y: "f9ql6rf",
253
- iro3zm: "f3h1zc4"
254
- },
255
- primary: {
256
- g2u3we: "f1p3nwhy",
257
- h3c5rm: ["f11589ue", "f1pdflbu"],
258
- B9xav0g: "f1q5o8ev",
259
- zhjwy3: ["f1pdflbu", "f11589ue"],
260
- Bgoe8wy: "f1s2uweq",
261
- Bwzppfd: ["fr80ssc", "fecsdlb"],
262
- oetu4i: "f1ukrpxl",
263
- gg5e9n: ["fecsdlb", "fr80ssc"],
264
- b661bw: "f1h0usnq",
265
- Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
266
- B9zn80p: "f16h9ulv",
267
- Bpld233: ["fx2bmrt", "fs4ktlq"]
268
- },
269
- secondary: {},
270
- subtle: {
271
- De3pzq: "f1c21dwh",
272
- g2u3we: "f1p3nwhy",
273
- h3c5rm: ["f11589ue", "f1pdflbu"],
274
- B9xav0g: "f1q5o8ev",
275
- zhjwy3: ["f1pdflbu", "f11589ue"],
276
- Jwef8y: "f9ql6rf",
277
- Bgoe8wy: "f1s2uweq",
278
- Bwzppfd: ["fr80ssc", "fecsdlb"],
279
- oetu4i: "f1ukrpxl",
280
- gg5e9n: ["fecsdlb", "fr80ssc"],
281
- iro3zm: "f3h1zc4",
282
- b661bw: "f1h0usnq",
283
- Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
284
- B9zn80p: "f16h9ulv",
285
- Bpld233: ["fx2bmrt", "fs4ktlq"]
286
- },
287
- transparent: {
288
- De3pzq: "f1c21dwh",
289
- g2u3we: "f1p3nwhy",
290
- h3c5rm: ["f11589ue", "f1pdflbu"],
291
- B9xav0g: "f1q5o8ev",
292
- zhjwy3: ["f1pdflbu", "f11589ue"],
293
- Jwef8y: "f9ql6rf",
294
- Bgoe8wy: "f1s2uweq",
295
- Bwzppfd: ["fr80ssc", "fecsdlb"],
296
- oetu4i: "f1ukrpxl",
297
- gg5e9n: ["fecsdlb", "fr80ssc"],
298
- iro3zm: "f3h1zc4",
299
- b661bw: "f1h0usnq",
300
- Bk6r4ia: ["fs4ktlq", "fx2bmrt"],
301
- B9zn80p: "f16h9ulv",
302
- Bpld233: ["fx2bmrt", "fs4ktlq"]
303
- }
304
- }, {
305
- d: [".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}"],
306
- h: [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".fphbwmw:hover{cursor:not-allowed;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f1t6o4dc:hover:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".f10ztigi:hover:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ft5sdu:hover:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1gzf82w:hover:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f12zbtn2:hover:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f8w4c43:hover:active{cursor:not-allowed;}", ".f1ol4fw6:hover:active .fui-Icon-filled{display:none;}", ".f1q1lw4e:hover:active .fui-Icon-regular{display:inline;}", ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}", ".f3h1zc4:hover:active{background-color:var(--colorTransparentBackground);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}"],
307
- m: [["@media (forced-colors: active){.f4lkoma{background-color:ButtonFace;}}", {
308
- m: "(forced-colors: active)"
309
- }], ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
310
- m: "(forced-colors: active)"
311
- }], ["@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", {
312
- m: "(forced-colors: active)"
313
- }], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
314
- m: "(forced-colors: active)"
315
- }], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
316
- m: "(forced-colors: active)"
317
- }], ["@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", {
318
- m: "(forced-colors: active)"
319
- }], ["@media (forced-colors: active){.fjwq6ea:focus{border-top-color:GrayText;}}", {
320
- m: "(forced-colors: active)"
321
- }], ["@media (forced-colors: active){.f1lr3nhc:focus{border-right-color:GrayText;}.f1mbxvi6:focus{border-left-color:GrayText;}}", {
322
- m: "(forced-colors: active)"
323
- }], ["@media (forced-colors: active){.fn5gmvv:focus{border-bottom-color:GrayText;}}", {
324
- m: "(forced-colors: active)"
325
- }], ["@media (forced-colors: active){.f1mbxvi6:focus{border-left-color:GrayText;}.f1lr3nhc:focus{border-right-color:GrayText;}}", {
326
- m: "(forced-colors: active)"
327
- }], ["@media (forced-colors: active){.f1vmkb5g:hover{background-color:ButtonFace;}}", {
328
- m: "(forced-colors: active)"
329
- }], ["@media (forced-colors: active){.f53ppgq:hover{border-top-color:GrayText;}}", {
330
- m: "(forced-colors: active)"
331
- }], ["@media (forced-colors: active){.f1663y11:hover{border-right-color:GrayText;}.f80fkiy:hover{border-left-color:GrayText;}}", {
332
- m: "(forced-colors: active)"
333
- }], ["@media (forced-colors: active){.f18v5270:hover{border-bottom-color:GrayText;}}", {
334
- m: "(forced-colors: active)"
335
- }], ["@media (forced-colors: active){.f80fkiy:hover{border-left-color:GrayText;}.f1663y11:hover{border-right-color:GrayText;}}", {
336
- m: "(forced-colors: active)"
337
- }], ["@media (forced-colors: active){.f1kc2mi9:hover{color:GrayText;}}", {
338
- m: "(forced-colors: active)"
339
- }], ["@media (forced-colors: active){.f1y0svfh:hover:active{background-color:ButtonFace;}}", {
340
- m: "(forced-colors: active)"
341
- }], ["@media (forced-colors: active){.fihuait:hover:active{border-top-color:GrayText;}}", {
342
- m: "(forced-colors: active)"
343
- }], ["@media (forced-colors: active){.fnxhupq:hover:active{border-right-color:GrayText;}.fyd6l6x:hover:active{border-left-color:GrayText;}}", {
344
- m: "(forced-colors: active)"
345
- }], ["@media (forced-colors: active){.fx507ft:hover:active{border-bottom-color:GrayText;}}", {
346
- m: "(forced-colors: active)"
347
- }], ["@media (forced-colors: active){.fyd6l6x:hover:active{border-left-color:GrayText;}.fnxhupq:hover:active{border-right-color:GrayText;}}", {
348
- m: "(forced-colors: active)"
349
- }], ["@media (forced-colors: active){.fb3rf2x:hover:active{color:GrayText;}}", {
350
- m: "(forced-colors: active)"
351
- }]]
352
- });
353
- const useRootFocusStyles = /*#__PURE__*/__styles({
354
- circular: {
355
- Brovlpu: "ftqa4ok",
356
- B486eqv: "f2hkw1w",
357
- kdpuga: ["fanj13w", "f1gou5sz"],
358
- Bw81rd7: ["f1gou5sz", "fanj13w"],
359
- B6xbmo0: ["fulf6x3", "foeb2x"],
360
- dm238s: ["foeb2x", "fulf6x3"]
361
- },
362
- rounded: {},
363
- square: {
364
- Brovlpu: "ftqa4ok",
365
- B486eqv: "f2hkw1w",
366
- kdpuga: ["f1ndz5i7", "f1co4qro"],
367
- Bw81rd7: ["f1co4qro", "f1ndz5i7"],
368
- B6xbmo0: ["f146y5a9", "f1k2ftg"],
369
- dm238s: ["f1k2ftg", "f146y5a9"]
370
- },
371
- primary: {
372
- Brovlpu: "ftqa4ok",
373
- B486eqv: "f2hkw1w",
374
- B8q5s1w: "f15my96h",
375
- Bci5o5g: ["f8yq1e5", "f59w28j"],
376
- n8qw10: "f1mze7uc",
377
- Bdrgwmp: ["f59w28j", "f8yq1e5"],
378
- j6ew2k: "ftbnf46"
379
- },
380
- small: {
381
- Brovlpu: "ftqa4ok",
382
- B486eqv: "f2hkw1w",
383
- kdpuga: ["fg3gtdo", "fwii5mg"],
384
- Bw81rd7: ["fwii5mg", "fg3gtdo"],
385
- B6xbmo0: ["f1palphq", "f12nxie7"],
386
- dm238s: ["f12nxie7", "f1palphq"]
387
- },
388
- medium: {},
389
- large: {
390
- Brovlpu: "ftqa4ok",
391
- B486eqv: "f2hkw1w",
392
- kdpuga: ["ft3lys4", "f1la4x2g"],
393
- Bw81rd7: ["f1la4x2g", "ft3lys4"],
394
- B6xbmo0: ["f156y0zm", "fakimq4"],
395
- dm238s: ["fakimq4", "f156y0zm"]
396
- }
397
- }, {
398
- f: [".ftqa4ok:focus{outline-style:none;}"],
399
- i: [".f2hkw1w:focus-visible{outline-style:none;}"],
400
- d: [".fanj13w[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1gou5sz[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fulf6x3[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusCircular);}", ".foeb2x[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusCircular);}", ".f1ndz5i7[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusNone);}", ".f1co4qro[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusNone);}", ".f146y5a9[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusNone);}", ".f1k2ftg[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusNone);}", ".f15my96h[data-fui-focus-visible]{border-top-color:var(--colorNeutralForegroundOnBrand);}", ".f8yq1e5[data-fui-focus-visible]{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".f59w28j[data-fui-focus-visible]{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".f1mze7uc[data-fui-focus-visible]{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", ".ftbnf46[data-fui-focus-visible]{box-shadow:var(--shadow2),0 0 0 2px var(--colorStrokeFocus2);}", ".fg3gtdo[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusSmall);}", ".fwii5mg[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusSmall);}", ".f1palphq[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusSmall);}", ".f12nxie7[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusSmall);}", ".ft3lys4[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusLarge);}", ".f1la4x2g[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusLarge);}", ".f156y0zm[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusLarge);}", ".fakimq4[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusLarge);}"]
401
- });
402
- const useRootIconOnlyStyles = /*#__PURE__*/__styles({
403
- small: {
404
- z8tnut: "f1sl3k7w",
405
- z189sj: ["f136y8j8", "f10xn8zz"],
406
- Byoj8tv: "f1brlhvm",
407
- uwmqm3: ["f10xn8zz", "f136y8j8"],
408
- Bf4jedk: "f17fgpbq",
409
- B2u0y6b: "f1jt17bm"
410
- },
411
- medium: {
412
- z8tnut: "f1sbtcvk",
413
- z189sj: ["fwiuce9", "f15vdbe4"],
414
- Byoj8tv: "fdghr9",
415
- uwmqm3: ["f15vdbe4", "fwiuce9"],
416
- Bf4jedk: "fwbmr0d",
417
- B2u0y6b: "f44c6la"
418
- },
419
- large: {
420
- z8tnut: "f1a1bwwz",
421
- z189sj: ["f18k1jr3", "f1rtp3s9"],
422
- Byoj8tv: "fy7v416",
423
- uwmqm3: ["f1rtp3s9", "f18k1jr3"],
424
- Bf4jedk: "f12clzc2",
425
- B2u0y6b: "fjy1crr"
426
- }
427
- }, {
428
- d: [".f1sl3k7w{padding-top:1px;}", ".f136y8j8{padding-right:1px;}", ".f10xn8zz{padding-left:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".f17fgpbq{min-width:24px;}", ".f1jt17bm{max-width:24px;}", ".f1sbtcvk{padding-top:5px;}", ".fwiuce9{padding-right:5px;}", ".f15vdbe4{padding-left:5px;}", ".fdghr9{padding-bottom:5px;}", ".fwbmr0d{min-width:32px;}", ".f44c6la{max-width:32px;}", ".f1a1bwwz{padding-top:7px;}", ".f18k1jr3{padding-right:7px;}", ".f1rtp3s9{padding-left:7px;}", ".fy7v416{padding-bottom:7px;}", ".f12clzc2{min-width:40px;}", ".fjy1crr{max-width:40px;}"]
429
- });
430
- const useIconStyles = /*#__PURE__*/__styles({
431
- small: {
432
- Be2twd7: "fe5j1ua",
433
- Bqenvij: "fjamq6b",
434
- a9b677: "f64fuq3",
435
- Bqrlyyl: "fbaiahx"
436
- },
437
- medium: {},
438
- large: {
439
- Be2twd7: "f1rt2boy",
440
- Bqenvij: "frvgh55",
441
- a9b677: "fq4mcun",
442
- Bqrlyyl: "f1exjqw5"
443
- },
444
- before: {
445
- t21cq0: ["f1nizpg2", "f1a695kz"]
446
- },
447
- after: {
448
- Frg6f3: ["f1a695kz", "f1nizpg2"]
449
- }
450
- }, {
451
- d: [".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".fbaiahx{--fui-Button__icon--spacing:var(--spacingHorizontalXS);}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}", ".f1exjqw5{--fui-Button__icon--spacing:var(--spacingHorizontalSNudge);}", ".f1nizpg2{margin-right:var(--fui-Button__icon--spacing);}", ".f1a695kz{margin-left:var(--fui-Button__icon--spacing);}"]
452
- });
453
- export const useButtonStyles_unstable = state => {
454
- const rootBaseClassName = useRootBaseClassName();
455
- const iconBaseClassName = useIconBaseClassName();
456
- const rootStyles = useRootStyles();
457
- const rootDisabledStyles = useRootDisabledStyles();
458
- const rootFocusStyles = useRootFocusStyles();
459
- const rootIconOnlyStyles = useRootIconOnlyStyles();
460
- const iconStyles = useIconStyles();
461
- const {
462
- appearance,
463
- disabled,
464
- disabledFocusable,
465
- icon,
466
- iconOnly,
467
- iconPosition,
468
- shape,
469
- size
470
- } = state;
471
- state.root.className = mergeClasses(buttonClassNames.root, rootBaseClassName, appearance && rootStyles[appearance], rootStyles[size], icon && size === 'small' && rootStyles.smallWithIcon, icon && size === 'large' && rootStyles.largeWithIcon, rootStyles[shape],
472
- // Disabled styles
473
- (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],
474
- // Focus styles
475
- appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape],
476
- // Icon-only styles
477
- iconOnly && rootIconOnlyStyles[size],
478
- // User provided class name
479
- state.root.className);
480
- if (state.icon) {
481
- state.icon.className = mergeClasses(buttonClassNames.icon, iconBaseClassName, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], iconStyles[size], state.icon.className);
482
- }
483
- return state;
484
- };
485
- //# sourceMappingURL=useButtonStyles.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","__styles","__resetStyles","mergeClasses","buttonClassNames","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","useRootBaseClassName","useIconBaseClassName","useRootStyles","outline","De3pzq","Jwef8y","iro3zm","primary","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","b661bw","Bk6r4ia","B9zn80p","Bpld233","B2d53fq","Bsw6fvg","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bbusuzp","ycbfsm","Bqrx1nm","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","ze5xyy","g2kj27","Bf756sw","Bow2dr7","Bvhedfk","Gye4lf","pc6evw","secondary","subtle","Bbdnnc7","x3br3k","transparent","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","rounded","square","small","Bf4jedk","z8tnut","z189sj","Byoj8tv","uwmqm3","Be2twd7","Bhrd7zp","Bg96gwp","smallWithIcon","medium","large","largeWithIcon","d","h","m","useRootDisabledStyles","base","Bceei9c","eoavqd","Bk3fhr4","Bmfj8id","c3iz72","em6i61","vm6p8p","highContrast","G867l3","gdbnj","mxns5l","o3nasb","useRootFocusStyles","Brovlpu","B486eqv","kdpuga","Bw81rd7","B6xbmo0","dm238s","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","j6ew2k","f","i","useRootIconOnlyStyles","B2u0y6b","useIconStyles","Bqenvij","a9b677","Bqrlyyl","before","t21cq0","after","Frg6f3","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","children","undefined"],"sources":["../../../src/components/Button/useButtonStyles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-Button',\n icon: 'fui-Button__icon',\n};\n\nconst iconSpacingVar = '--fui-Button__icon--spacing';\n\nconst buttonSpacingSmall = '3px';\nconst buttonSpacingSmallWithIcon = '1px';\nconst buttonSpacingMedium = '5px';\nconst buttonSpacingLarge = '8px';\nconst buttonSpacingLargeWithIcon = '7px';\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'inline-flex',\n justifyContent: 'center',\n textDecorationLine: 'none',\n verticalAlign: 'middle',\n\n margin: 0,\n overflow: 'hidden',\n\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n\n fontFamily: tokens.fontFamilyBase,\n outlineStyle: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground1Hover,\n\n cursor: 'pointer',\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n\n outlineStyle: 'none',\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`,\n minWidth: '96px',\n borderRadius: tokens.borderRadiusMedium,\n\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n\n // Transition styles\n\n transitionDuration: tokens.durationFaster,\n transitionProperty: 'background, border, color',\n transitionTimingFunction: tokens.curveEasyEase,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n // High contrast styles\n\n '@media (forced-colors: active)': {\n ':focus': {\n borderColor: 'ButtonText',\n },\n\n ':hover': {\n backgroundColor: 'HighlightText',\n borderColor: 'Highlight',\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n\n ':hover:active': {\n backgroundColor: 'HighlightText',\n borderColor: 'Highlight',\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n },\n\n // Focus styles\n\n ...createCustomFocusIndicatorStyle({\n borderColor: tokens.colorTransparentStroke,\n borderRadius: tokens.borderRadiusMedium,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 2px ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n});\n\nconst useIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n\n fontSize: '20px',\n height: '20px',\n width: '20px',\n\n [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n});\n\nconst useRootStyles = makeStyles({\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('HighlightText'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':hover:active': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n /* The borderRadius rounded styles are handled in the size variations */\n },\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n\n // Size variations\n small: {\n minWidth: '64px',\n ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),\n\n ...shorthands.borderRadius(buttonSpacingSmall),\n\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n },\n smallWithIcon: {\n paddingBottom: buttonSpacingSmallWithIcon,\n paddingTop: buttonSpacingSmallWithIcon,\n },\n medium: {\n /* defined in base styles */\n },\n large: {\n minWidth: '96px',\n ...shorthands.padding(buttonSpacingLarge, tokens.spacingHorizontalL),\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase400,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase400,\n },\n largeWithIcon: {\n paddingBottom: buttonSpacingLargeWithIcon,\n paddingTop: buttonSpacingLargeWithIcon,\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n\n ':hover': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n },\n\n ':hover:active': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useRootFocusStyles = makeStyles({\n // Shape variations\n circular: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n }),\n rounded: {\n /* The rounded styles are exactly the same as the base styles. */\n },\n square: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n }),\n\n // Primary styles\n primary: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n }),\n\n // Size variations\n small: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n }),\n medium: {\n /* defined in base styles */\n },\n large: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding(buttonSpacingSmallWithIcon),\n\n minWidth: '24px',\n maxWidth: '24px',\n },\n medium: {\n ...shorthands.padding(buttonSpacingMedium),\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n ...shorthands.padding(buttonSpacingLargeWithIcon),\n\n minWidth: '40px',\n maxWidth: '40px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Size variations\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n\n [iconSpacingVar]: tokens.spacingHorizontalXS,\n },\n medium: {\n /* defined in base styles */\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n\n [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n },\n\n // Icon position variations\n before: {\n marginRight: `var(${iconSpacingVar})`,\n },\n after: {\n marginLeft: `var(${iconSpacingVar})`,\n },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n const rootBaseClassName = useRootBaseClassName();\n const iconBaseClassName = useIconBaseClassName();\n\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootFocusStyles = useRootFocusStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n\n const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;\n\n state.root.className = mergeClasses(\n buttonClassNames.root,\n rootBaseClassName,\n\n appearance && rootStyles[appearance],\n\n rootStyles[size],\n icon && size === 'small' && rootStyles.smallWithIcon,\n icon && size === 'large' && rootStyles.largeWithIcon,\n rootStyles[shape],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n (disabled || disabledFocusable) && rootDisabledStyles.highContrast,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // Focus styles\n appearance === 'primary' && rootFocusStyles.primary,\n rootFocusStyles[size],\n rootFocusStyles[shape],\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n buttonClassNames.icon,\n iconBaseClassName,\n state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"mappings":"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"}
@@ -1,18 +0,0 @@
1
- import * as React from 'react';
2
- import { renderCompoundButton_unstable } from './renderCompoundButton';
3
- import { useCompoundButton_unstable } from './useCompoundButton';
4
- import { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';
5
- import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
6
- /**
7
- * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
8
- */
9
- export const CompoundButton = /*#__PURE__*/React.forwardRef((props, ref) => {
10
- const state = useCompoundButton_unstable(props, ref);
11
- useCompoundButtonStyles_unstable(state);
12
- useCustomStyleHook_unstable('useCompoundButtonStyles_unstable')(state);
13
- return renderCompoundButton_unstable(state);
14
- // Casting is required due to lack of distributive union to support unions on @types/react
15
- });
16
-
17
- CompoundButton.displayName = 'CompoundButton';
18
- //# sourceMappingURL=CompoundButton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"names":["React","renderCompoundButton_unstable","useCompoundButton_unstable","useCompoundButtonStyles_unstable","useCustomStyleHook_unstable","CompoundButton","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/CompoundButton/CompoundButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps } from './CompoundButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CompoundButtons are buttons that can have secondary content that adds extra information to the user.\n */\nexport const CompoundButton: ForwardRefComponent<CompoundButtonProps> = React.forwardRef((props, ref) => {\n const state = useCompoundButton_unstable(props, ref);\n\n useCompoundButtonStyles_unstable(state);\n\n useCustomStyleHook_unstable('useCompoundButtonStyles_unstable')(state);\n\n return renderCompoundButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<CompoundButtonProps>;\n\nCompoundButton.displayName = 'CompoundButton';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,6BAA6B,QAAQ;AAC9C,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,gCAAgC,QAAQ;AAGjD,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,cAAA,gBAA2DL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvG,MAAMC,KAAA,GAAQP,0BAAA,CAA2BK,KAAA,EAAOC,GAAA;EAEhDL,gCAAA,CAAiCM,KAAA;EAEjCL,2BAAA,CAA4B,oCAAoCK,KAAA;EAEhE,OAAOR,6BAAA,CAA8BQ,KAAA;EACrC;AACF;;AAEAJ,cAAA,CAAeK,WAAW,GAAG"}