@fluentui/react-button 9.3.3 → 9.3.5

package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js

@@ -1,199 +1,330 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    compoundButtonClassNames: ()=>compoundButtonClassNames,
+    useCompoundButtonStyles_unstable: ()=>useCompoundButtonStyles_unstable
 });
-exports.useCompoundButtonStyles_unstable = exports.compoundButtonClassNames = void 0;
-const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-const react_1 = /*#__PURE__*/require("@griffel/react");
-const useButtonStyles_1 = /*#__PURE__*/require("../Button/useButtonStyles");
-exports.compoundButtonClassNames = {
-  root: 'fui-CompoundButton',
-  icon: 'fui-CompoundButton__icon',
-  contentContainer: 'fui-CompoundButton__contentContainer',
-  secondaryContent: 'fui-CompoundButton__secondaryContent'
+const _react = require("@griffel/react");
+const _useButtonStyles = require("../Button/useButtonStyles");
+const compoundButtonClassNames = {
+    root: 'fui-CompoundButton',
+    icon: 'fui-CompoundButton__icon',
+    contentContainer: 'fui-CompoundButton__contentContainer',
+    secondaryContent: 'fui-CompoundButton__secondaryContent'
 };
-const useRootStyles = /*#__PURE__*/react_1.__styles({
-  base: {
-    Bqenvij: "f11ysow2",
-    J657lq: "f1um431h",
-    Jlnjib: "fte7hqw",
-    Bc29nj9: "f1yh8ef3"
-  },
-  highContrast: {
-    pu7qz5: "fi3u9nm",
-    B10010i: "f1tdgb9w"
-  },
-  outline: {},
-  primary: {
-    J657lq: "foe7gw6",
-    Jlnjib: "fvxlz81",
-    Bc29nj9: "f1c2mdy",
-    B8ia98v: "f1r39r2s"
-  },
-  secondary: {},
-  subtle: {
-    J657lq: "f1um431h",
-    Jlnjib: "fte7hqw",
-    Bc29nj9: "f1yh8ef3"
-  },
-  transparent: {
-    J657lq: "f1um431h",
-    Jlnjib: "f1wn9xqz",
-    Bc29nj9: "f1a8q4d0"
-  },
-  small: {
-    z8tnut: "f17mpqex",
-    z189sj: ["f1vdfbxk", "f1f5gg8d"],
-    Byoj8tv: "f1quwm26",
-    uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
-    Be2twd7: "fkhj508",
-    Bg96gwp: "f1i3iumi"
-  },
-  medium: {
-    z8tnut: "fbtff6s",
-    z189sj: ["fw5db7e", "f1uw59to"],
-    Byoj8tv: "flw3t2g",
-    uwmqm3: ["f1uw59to", "fw5db7e"],
-    Be2twd7: "fkhj508",
-    Bg96gwp: "f1i3iumi"
-  },
-  large: {
-    z8tnut: "fm4bm3s",
-    z189sj: ["fjodcmx", "fhx4nu"],
-    Byoj8tv: "fdt8xvx",
-    uwmqm3: ["fhx4nu", "fjodcmx"],
-    Be2twd7: "fod5ikn",
-    Bg96gwp: "faaz57k"
-  },
-  disabled: {
-    J657lq: "f1rlv8bf",
-    Jlnjib: "fd1dbtm",
-    Bc29nj9: "f1vqmdmi"
-  },
-  disabledHighContrast: {
-    B8ia98v: "f1csacz4",
-    pu7qz5: "f1s5tkfe",
-    B10010i: "fs0rda3"
-  }
+const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
+    base: {
+        Bqenvij: "f11ysow2",
+        J657lq: "f1um431h",
+        Jlnjib: "fte7hqw",
+        Bc29nj9: "f1yh8ef3"
+    },
+    highContrast: {
+        pu7qz5: "fi3u9nm",
+        B10010i: "f1tdgb9w"
+    },
+    outline: {},
+    primary: {
+        J657lq: "foe7gw6",
+        Jlnjib: "fvxlz81",
+        Bc29nj9: "f1c2mdy",
+        B8ia98v: "f1r39r2s"
+    },
+    secondary: {},
+    subtle: {
+        J657lq: "f1um431h",
+        Jlnjib: "fte7hqw",
+        Bc29nj9: "f1yh8ef3"
+    },
+    transparent: {
+        J657lq: "f1um431h",
+        Jlnjib: "f1wn9xqz",
+        Bc29nj9: "f1a8q4d0"
+    },
+    small: {
+        z8tnut: "f17mpqex",
+        z189sj: [
+            "f1vdfbxk",
+            "f1f5gg8d"
+        ],
+        Byoj8tv: "f1quwm26",
+        uwmqm3: [
+            "f1f5gg8d",
+            "f1vdfbxk"
+        ],
+        Be2twd7: "fkhj508",
+        Bg96gwp: "f1i3iumi"
+    },
+    medium: {
+        z8tnut: "fbtff6s",
+        z189sj: [
+            "fw5db7e",
+            "f1uw59to"
+        ],
+        Byoj8tv: "flw3t2g",
+        uwmqm3: [
+            "f1uw59to",
+            "fw5db7e"
+        ],
+        Be2twd7: "fkhj508",
+        Bg96gwp: "f1i3iumi"
+    },
+    large: {
+        z8tnut: "fm4bm3s",
+        z189sj: [
+            "fjodcmx",
+            "fhx4nu"
+        ],
+        Byoj8tv: "fdt8xvx",
+        uwmqm3: [
+            "fhx4nu",
+            "fjodcmx"
+        ],
+        Be2twd7: "fod5ikn",
+        Bg96gwp: "faaz57k"
+    },
+    disabled: {
+        J657lq: "f1rlv8bf",
+        Jlnjib: "fd1dbtm",
+        Bc29nj9: "f1vqmdmi"
+    },
+    disabledHighContrast: {
+        B8ia98v: "f1csacz4",
+        pu7qz5: "f1s5tkfe",
+        B10010i: "fs0rda3"
+    }
 }, {
-  d: [".f11ysow2{height:auto;}", ".f1um431h .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2);}", ".foe7gw6 .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f17mpqex{padding-top:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1quwm26{padding-bottom:var(--spacingHorizontalMNudge);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbtff6s{padding-top:14px;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".flw3t2g{padding-bottom:var(--spacingHorizontalL);}", ".fm4bm3s{padding-top:18px;}", ".fjodcmx{padding-right:var(--spacingHorizontalL);}", ".fhx4nu{padding-left:var(--spacingHorizontalL);}", ".fdt8xvx{padding-bottom:var(--spacingHorizontalXL);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1rlv8bf .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
-  h: [".fte7hqw:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Hover);}", ".f1yh8ef3:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Pressed);}", ".fvxlz81:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1c2mdy:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f1wn9xqz:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandHover);}", ".f1a8q4d0:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}", ".fd1dbtm:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}", ".f1vqmdmi:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
-  m: [["@media (forced-colors: active){.fi3u9nm:hover .fui-CompoundButton__secondaryContent{color:Highlight;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1tdgb9w:hover:active .fui-CompoundButton__secondaryContent{color:Highlight;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1r39r2s .fui-CompoundButton__secondaryContent{color:HighlightText;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1csacz4 .fui-CompoundButton__secondaryContent{color:GrayText;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.f1s5tkfe:hover .fui-CompoundButton__secondaryContent{color:GrayText;}}", {
-    m: "(forced-colors: active)"
-  }], ["@media (forced-colors: active){.fs0rda3:hover:active .fui-CompoundButton__secondaryContent{color:GrayText;}}", {
-    m: "(forced-colors: active)"
-  }]]
+    d: [
+        ".f11ysow2{height:auto;}",
+        ".f1um431h .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2);}",
+        ".foe7gw6 .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}",
+        ".f17mpqex{padding-top:var(--spacingHorizontalS);}",
+        ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
+        ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
+        ".f1quwm26{padding-bottom:var(--spacingHorizontalMNudge);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        ".fbtff6s{padding-top:14px;}",
+        ".fw5db7e{padding-right:var(--spacingHorizontalM);}",
+        ".f1uw59to{padding-left:var(--spacingHorizontalM);}",
+        ".flw3t2g{padding-bottom:var(--spacingHorizontalL);}",
+        ".fm4bm3s{padding-top:18px;}",
+        ".fjodcmx{padding-right:var(--spacingHorizontalL);}",
+        ".fhx4nu{padding-left:var(--spacingHorizontalL);}",
+        ".fdt8xvx{padding-bottom:var(--spacingHorizontalXL);}",
+        ".fod5ikn{font-size:var(--fontSizeBase400);}",
+        ".faaz57k{line-height:var(--lineHeightBase400);}",
+        ".f1rlv8bf .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    h: [
+        ".fte7hqw:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Hover);}",
+        ".f1yh8ef3:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Pressed);}",
+        ".fvxlz81:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}",
+        ".f1c2mdy:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}",
+        ".f1wn9xqz:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandHover);}",
+        ".f1a8q4d0:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}",
+        ".fd1dbtm:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}",
+        ".f1vqmdmi:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.fi3u9nm:hover .fui-CompoundButton__secondaryContent{color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1tdgb9w:hover:active .fui-CompoundButton__secondaryContent{color:Highlight;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1r39r2s .fui-CompoundButton__secondaryContent{color:HighlightText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1csacz4 .fui-CompoundButton__secondaryContent{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.f1s5tkfe:hover .fui-CompoundButton__secondaryContent{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fs0rda3:hover:active .fui-CompoundButton__secondaryContent{color:GrayText;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ]
 });
-const useRootIconOnlyStyles = /*#__PURE__*/react_1.__styles({
-  small: {
-    z8tnut: "f1x4af0m",
-    z189sj: ["f7x41pl", "fruq291"],
-    Byoj8tv: "fd55psn",
-    uwmqm3: ["fruq291", "f7x41pl"],
-    B2u0y6b: "ft5vyj6",
-    Bf4jedk: "f17suaiq"
-  },
-  medium: {
-    z8tnut: "f16k8034",
-    z189sj: ["fdw0yi8", "fk8j09s"],
-    Byoj8tv: "f1angvds",
-    uwmqm3: ["fk8j09s", "fdw0yi8"],
-    B2u0y6b: "fdczgix",
-    Bf4jedk: "fjdcg9m"
-  },
-  large: {
-    z8tnut: "f17mpqex",
-    z189sj: ["f1vdfbxk", "f1f5gg8d"],
-    Byoj8tv: "fdvome7",
-    uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
-    B2u0y6b: "fww51uw",
-    Bf4jedk: "f1qhsl2h"
-  }
+const useRootIconOnlyStyles = /*#__PURE__*/ (0, _react["__styles"])({
+    small: {
+        z8tnut: "f1x4af0m",
+        z189sj: [
+            "f7x41pl",
+            "fruq291"
+        ],
+        Byoj8tv: "fd55psn",
+        uwmqm3: [
+            "fruq291",
+            "f7x41pl"
+        ],
+        B2u0y6b: "ft5vyj6",
+        Bf4jedk: "f17suaiq"
+    },
+    medium: {
+        z8tnut: "f16k8034",
+        z189sj: [
+            "fdw0yi8",
+            "fk8j09s"
+        ],
+        Byoj8tv: "f1angvds",
+        uwmqm3: [
+            "fk8j09s",
+            "fdw0yi8"
+        ],
+        B2u0y6b: "fdczgix",
+        Bf4jedk: "fjdcg9m"
+    },
+    large: {
+        z8tnut: "f17mpqex",
+        z189sj: [
+            "f1vdfbxk",
+            "f1f5gg8d"
+        ],
+        Byoj8tv: "fdvome7",
+        uwmqm3: [
+            "f1f5gg8d",
+            "f1vdfbxk"
+        ],
+        B2u0y6b: "fww51uw",
+        Bf4jedk: "f1qhsl2h"
+    }
 }, {
-  d: [".f1x4af0m{padding-top:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".fd55psn{padding-bottom:var(--spacingHorizontalXS);}", ".ft5vyj6{max-width:48px;}", ".f17suaiq{min-width:48px;}", ".f16k8034{padding-top:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1angvds{padding-bottom:var(--spacingHorizontalSNudge);}", ".fdczgix{max-width:52px;}", ".fjdcg9m{min-width:52px;}", ".f17mpqex{padding-top:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdvome7{padding-bottom:var(--spacingHorizontalS);}", ".fww51uw{max-width:56px;}", ".f1qhsl2h{min-width:56px;}"]
+    d: [
+        ".f1x4af0m{padding-top:var(--spacingHorizontalXS);}",
+        ".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
+        ".fruq291{padding-left:var(--spacingHorizontalXS);}",
+        ".fd55psn{padding-bottom:var(--spacingHorizontalXS);}",
+        ".ft5vyj6{max-width:48px;}",
+        ".f17suaiq{min-width:48px;}",
+        ".f16k8034{padding-top:var(--spacingHorizontalSNudge);}",
+        ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}",
+        ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}",
+        ".f1angvds{padding-bottom:var(--spacingHorizontalSNudge);}",
+        ".fdczgix{max-width:52px;}",
+        ".fjdcg9m{min-width:52px;}",
+        ".f17mpqex{padding-top:var(--spacingHorizontalS);}",
+        ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
+        ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
+        ".fdvome7{padding-bottom:var(--spacingHorizontalS);}",
+        ".fww51uw{max-width:56px;}",
+        ".f1qhsl2h{min-width:56px;}"
+    ]
 });
-const useIconStyles = /*#__PURE__*/react_1.__styles({
-  base: {
-    Be2twd7: "fndrnj9",
-    Bqenvij: "fbhnoac",
-    a9b677: "feqmc2u"
-  },
-  before: {
-    t21cq0: ["fkujibs", "f199hnxi"]
-  },
-  after: {
-    Frg6f3: ["f199hnxi", "fkujibs"]
-  }
+const useIconStyles = /*#__PURE__*/ (0, _react["__styles"])({
+    base: {
+        Be2twd7: "fndrnj9",
+        Bqenvij: "fbhnoac",
+        a9b677: "feqmc2u"
+    },
+    before: {
+        t21cq0: [
+            "fkujibs",
+            "f199hnxi"
+        ]
+    },
+    after: {
+        Frg6f3: [
+            "f199hnxi",
+            "fkujibs"
+        ]
+    }
 }, {
-  d: [".fndrnj9{font-size:40px;}", ".fbhnoac{height:40px;}", ".feqmc2u{width:40px;}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}"]
+    d: [
+        ".fndrnj9{font-size:40px;}",
+        ".fbhnoac{height:40px;}",
+        ".feqmc2u{width:40px;}",
+        ".fkujibs{margin-right:var(--spacingHorizontalM);}",
+        ".f199hnxi{margin-left:var(--spacingHorizontalM);}"
+    ]
 });
-const useContentContainerStyles = /*#__PURE__*/react_1.__styles({
-  base: {
-    mc9l5x: "f22iagw",
-    Beiy3e4: "f1vx9l62",
-    fsow6f: ["f1o700av", "fes3tcz"]
-  }
+const useContentContainerStyles = /*#__PURE__*/ (0, _react["__styles"])({
+    base: {
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1vx9l62",
+        fsow6f: [
+            "f1o700av",
+            "fes3tcz"
+        ]
+    }
 }, {
-  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}"]
+    d: [
+        ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
+        ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}",
+        ".f1o700av{text-align:left;}",
+        ".fes3tcz{text-align:right;}"
+    ]
 });
-const useSecondaryContentStyles = /*#__PURE__*/react_1.__styles({
-  base: {
-    Bg96gwp: "flkuc6h",
-    Bhrd7zp: "figsok6"
-  },
-  small: {
-    Be2twd7: "fy9rknc"
-  },
-  medium: {
-    Be2twd7: "fy9rknc"
-  },
-  large: {
-    Be2twd7: "fkhj508"
-  }
+const useSecondaryContentStyles = /*#__PURE__*/ (0, _react["__styles"])({
+    base: {
+        Bg96gwp: "flkuc6h",
+        Bhrd7zp: "figsok6"
+    },
+    small: {
+        Be2twd7: "fy9rknc"
+    },
+    medium: {
+        Be2twd7: "fy9rknc"
+    },
+    large: {
+        Be2twd7: "fkhj508"
+    }
 }, {
-  d: [".flkuc6h{line-height:100%;}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fkhj508{font-size:var(--fontSizeBase300);}"]
+    d: [
+        ".flkuc6h{line-height:100%;}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}"
+    ]
 });
-const useCompoundButtonStyles_unstable = state => {
-  const rootStyles = useRootStyles();
-  const rootIconOnlyStyles = useRootIconOnlyStyles();
-  const iconStyles = useIconStyles();
-  const contentContainerStyles = useContentContainerStyles();
-  const secondaryContentStyles = useSecondaryContentStyles();
-  const {
-    appearance,
-    disabled,
-    disabledFocusable,
-    iconOnly,
-    iconPosition,
-    size
-  } = state;
-  state.root.className = react_1.mergeClasses(exports.compoundButtonClassNames.root,
-  // Root styles
-  rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size],
-  // Disabled styles
-  (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast,
-  // Icon-only styles
-  iconOnly && rootIconOnlyStyles[size],
-  // User provided class name
-  state.root.className);
-  state.contentContainer.className = react_1.mergeClasses(exports.compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);
-  if (state.icon) {
-    state.icon.className = react_1.mergeClasses(exports.compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);
-  }
-  if (state.secondaryContent) {
-    state.secondaryContent.className = react_1.mergeClasses(exports.compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
-  }
-  useButtonStyles_1.useButtonStyles_unstable(state);
-  return state;
-};
-exports.useCompoundButtonStyles_unstable = useCompoundButtonStyles_unstable;
+const useCompoundButtonStyles_unstable = (state)=>{
+    const rootStyles = useRootStyles();
+    const rootIconOnlyStyles = useRootIconOnlyStyles();
+    const iconStyles = useIconStyles();
+    const contentContainerStyles = useContentContainerStyles();
+    const secondaryContentStyles = useSecondaryContentStyles();
+    const { appearance , disabled , disabledFocusable , iconOnly , iconPosition , size  } = state;
+    state.root.className = (0, _react.mergeClasses)(compoundButtonClassNames.root, // Root styles
+    rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles
+    (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles
+    iconOnly && rootIconOnlyStyles[size], // User provided class name
+    state.root.className);
+    state.contentContainer.className = (0, _react.mergeClasses)(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);
+    }
+    if (state.secondaryContent) {
+        state.secondaryContent.className = (0, _react.mergeClasses)(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
+    }
+    (0, _useButtonStyles.useButtonStyles_unstable)(state);
+    return state;
+}; //# sourceMappingURL=useCompoundButtonStyles.js.map
+
 //# sourceMappingURL=useCompoundButtonStyles.js.map

package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["react_theme_1","require","react_1","useButtonStyles_1","exports","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","__styles","base","Bqenvij","J657lq","Jlnjib","Bc29nj9","highContrast","pu7qz5","B10010i","outline","primary","B8ia98v","secondary","subtle","transparent","small","z8tnut","z189sj","Byoj8tv","uwmqm3","Be2twd7","Bg96gwp","medium","large","disabled","disabledHighContrast","d","h","m","useRootIconOnlyStyles","B2u0y6b","Bf4jedk","useIconStyles","a9b677","before","t21cq0","after","Frg6f3","useContentContainerStyles","mc9l5x","Beiy3e4","fsow6f","useSecondaryContentStyles","Bhrd7zp","useCompoundButtonStyles_unstable","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","mergeClasses","children","undefined","useButtonStyles_unstable"],"sources":["../src/packages/react-components/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {\n  root: 'fui-CompoundButton',\n  icon: 'fui-CompoundButton__icon',\n  contentContainer: 'fui-CompoundButton__contentContainer',\n  secondaryContent: 'fui-CompoundButton__secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    height: 'auto',\n\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'Highlight',\n        },\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundOnBrand,\n      },\n    },\n\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'HighlightText',\n      },\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Hover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2Pressed,\n      },\n    },\n  },\n  transparent: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForeground2,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n\n  // Size variations\n  small: {\n    ...shorthands.padding(\n      tokens.spacingHorizontalS,\n      tokens.spacingHorizontalS,\n      tokens.spacingHorizontalMNudge,\n      tokens.spacingHorizontalS,\n    ),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  medium: {\n    ...shorthands.padding('14px', tokens.spacingHorizontalM, tokens.spacingHorizontalL, tokens.spacingHorizontalM),\n\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  large: {\n    ...shorthands.padding('18px', tokens.spacingHorizontalL, tokens.spacingHorizontalXL, tokens.spacingHorizontalL),\n\n    fontSize: tokens.fontSizeBase400,\n    lineHeight: tokens.lineHeightBase400,\n  },\n\n  // Disabled styles\n  disabled: {\n    [`& .${compoundButtonClassNames.secondaryContent}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForegroundDisabled,\n      },\n    },\n  },\n\n  // Disabled high contrast styles\n  disabledHighContrast: {\n    '@media (forced-colors: active)': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: 'GrayText',\n      },\n\n      ':hover': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n\n      ':hover:active': {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n          color: 'GrayText',\n        },\n      },\n    },\n  },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n\n    maxWidth: '48px',\n    minWidth: '48px',\n  },\n  medium: {\n    ...shorthands.padding(tokens.spacingHorizontalSNudge),\n\n    maxWidth: '52px',\n    minWidth: '52px',\n  },\n  large: {\n    ...shorthands.padding(tokens.spacingHorizontalS),\n\n    maxWidth: '56px',\n    minWidth: '56px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Base styles\n  base: {\n    fontSize: '40px',\n    height: '40px',\n    width: '40px',\n  },\n\n  // Icon position variations\n  before: {\n    marginRight: tokens.spacingHorizontalM,\n  },\n  after: {\n    marginLeft: tokens.spacingHorizontalM,\n  },\n});\n\nconst useContentContainerStyles = makeStyles({\n  // Base styles\n  base: {\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: 'left',\n  },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n  // Base styles\n  base: {\n    lineHeight: '100%',\n    fontWeight: tokens.fontWeightRegular,\n  },\n\n  // Size variations\n  small: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  medium: {\n    fontSize: tokens.fontSizeBase200,\n  },\n  large: {\n    fontSize: tokens.fontSizeBase300,\n  },\n});\n\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n  const rootStyles = useRootStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n  const contentContainerStyles = useContentContainerStyles();\n  const secondaryContentStyles = useSecondaryContentStyles();\n\n  const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n\n  state.root.className = mergeClasses(\n    compoundButtonClassNames.root,\n\n    // Root styles\n    rootStyles.base,\n    rootStyles.highContrast,\n    appearance && rootStyles[appearance],\n    rootStyles[size],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled,\n    (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  state.contentContainer.className = mergeClasses(\n    compoundButtonClassNames.contentContainer,\n    contentContainerStyles.base,\n    state.contentContainer.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      compoundButtonClassNames.icon,\n      iconStyles.base,\n      state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      state.icon.className,\n    );\n  }\n\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(\n      compoundButtonClassNames.secondaryContent,\n      secondaryContentStyles.base,\n      secondaryContentStyles[size],\n      state.secondaryContent.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"mappings":"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"}
+{"version":3,"sources":["../../../lib/components/CompoundButton/useCompoundButtonStyles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { shorthands, mergeClasses, __styles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nexport const compoundButtonClassNames = {\n  root: 'fui-CompoundButton',\n  icon: 'fui-CompoundButton__icon',\n  contentContainer: 'fui-CompoundButton__contentContainer',\n  secondaryContent: 'fui-CompoundButton__secondaryContent'\n};\nconst useRootStyles = /*#__PURE__*/__styles({\n  base: {\n    Bqenvij: \"f11ysow2\",\n    J657lq: \"f1um431h\",\n    Jlnjib: \"fte7hqw\",\n    Bc29nj9: \"f1yh8ef3\"\n  },\n  highContrast: {\n    pu7qz5: \"fi3u9nm\",\n    B10010i: \"f1tdgb9w\"\n  },\n  outline: {},\n  primary: {\n    J657lq: \"foe7gw6\",\n    Jlnjib: \"fvxlz81\",\n    Bc29nj9: \"f1c2mdy\",\n    B8ia98v: \"f1r39r2s\"\n  },\n  secondary: {},\n  subtle: {\n    J657lq: \"f1um431h\",\n    Jlnjib: \"fte7hqw\",\n    Bc29nj9: \"f1yh8ef3\"\n  },\n  transparent: {\n    J657lq: \"f1um431h\",\n    Jlnjib: \"f1wn9xqz\",\n    Bc29nj9: \"f1a8q4d0\"\n  },\n  small: {\n    z8tnut: \"f17mpqex\",\n    z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n    Byoj8tv: \"f1quwm26\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"],\n    Be2twd7: \"fkhj508\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  medium: {\n    z8tnut: \"fbtff6s\",\n    z189sj: [\"fw5db7e\", \"f1uw59to\"],\n    Byoj8tv: \"flw3t2g\",\n    uwmqm3: [\"f1uw59to\", \"fw5db7e\"],\n    Be2twd7: \"fkhj508\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  large: {\n    z8tnut: \"fm4bm3s\",\n    z189sj: [\"fjodcmx\", \"fhx4nu\"],\n    Byoj8tv: \"fdt8xvx\",\n    uwmqm3: [\"fhx4nu\", \"fjodcmx\"],\n    Be2twd7: \"fod5ikn\",\n    Bg96gwp: \"faaz57k\"\n  },\n  disabled: {\n    J657lq: \"f1rlv8bf\",\n    Jlnjib: \"fd1dbtm\",\n    Bc29nj9: \"f1vqmdmi\"\n  },\n  disabledHighContrast: {\n    B8ia98v: \"f1csacz4\",\n    pu7qz5: \"f1s5tkfe\",\n    B10010i: \"fs0rda3\"\n  }\n}, {\n  d: [\".f11ysow2{height:auto;}\", \".f1um431h .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2);}\", \".foe7gw6 .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}\", \".f17mpqex{padding-top:var(--spacingHorizontalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f1quwm26{padding-bottom:var(--spacingHorizontalMNudge);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", \".fbtff6s{padding-top:14px;}\", \".fw5db7e{padding-right:var(--spacingHorizontalM);}\", \".f1uw59to{padding-left:var(--spacingHorizontalM);}\", \".flw3t2g{padding-bottom:var(--spacingHorizontalL);}\", \".fm4bm3s{padding-top:18px;}\", \".fjodcmx{padding-right:var(--spacingHorizontalL);}\", \".fhx4nu{padding-left:var(--spacingHorizontalL);}\", \".fdt8xvx{padding-bottom:var(--spacingHorizontalXL);}\", \".fod5ikn{font-size:var(--fontSizeBase400);}\", \".faaz57k{line-height:var(--lineHeightBase400);}\", \".f1rlv8bf .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}\"],\n  h: [\".fte7hqw:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Hover);}\", \".f1yh8ef3:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2Pressed);}\", \".fvxlz81:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}\", \".f1c2mdy:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}\", \".f1wn9xqz:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandHover);}\", \".f1a8q4d0:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}\", \".fd1dbtm:hover .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}\", \".f1vqmdmi:hover:active .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundDisabled);}\"],\n  m: [[\"@media (forced-colors: active){.fi3u9nm:hover .fui-CompoundButton__secondaryContent{color:Highlight;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1tdgb9w:hover:active .fui-CompoundButton__secondaryContent{color:Highlight;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1r39r2s .fui-CompoundButton__secondaryContent{color:HighlightText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1csacz4 .fui-CompoundButton__secondaryContent{color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.f1s5tkfe:hover .fui-CompoundButton__secondaryContent{color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }], [\"@media (forced-colors: active){.fs0rda3:hover:active .fui-CompoundButton__secondaryContent{color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }]]\n});\nconst useRootIconOnlyStyles = /*#__PURE__*/__styles({\n  small: {\n    z8tnut: \"f1x4af0m\",\n    z189sj: [\"f7x41pl\", \"fruq291\"],\n    Byoj8tv: \"fd55psn\",\n    uwmqm3: [\"fruq291\", \"f7x41pl\"],\n    B2u0y6b: \"ft5vyj6\",\n    Bf4jedk: \"f17suaiq\"\n  },\n  medium: {\n    z8tnut: \"f16k8034\",\n    z189sj: [\"fdw0yi8\", \"fk8j09s\"],\n    Byoj8tv: \"f1angvds\",\n    uwmqm3: [\"fk8j09s\", \"fdw0yi8\"],\n    B2u0y6b: \"fdczgix\",\n    Bf4jedk: \"fjdcg9m\"\n  },\n  large: {\n    z8tnut: \"f17mpqex\",\n    z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n    Byoj8tv: \"fdvome7\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"],\n    B2u0y6b: \"fww51uw\",\n    Bf4jedk: \"f1qhsl2h\"\n  }\n}, {\n  d: [\".f1x4af0m{padding-top:var(--spacingHorizontalXS);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".fd55psn{padding-bottom:var(--spacingHorizontalXS);}\", \".ft5vyj6{max-width:48px;}\", \".f17suaiq{min-width:48px;}\", \".f16k8034{padding-top:var(--spacingHorizontalSNudge);}\", \".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}\", \".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}\", \".f1angvds{padding-bottom:var(--spacingHorizontalSNudge);}\", \".fdczgix{max-width:52px;}\", \".fjdcg9m{min-width:52px;}\", \".f17mpqex{padding-top:var(--spacingHorizontalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".fdvome7{padding-bottom:var(--spacingHorizontalS);}\", \".fww51uw{max-width:56px;}\", \".f1qhsl2h{min-width:56px;}\"]\n});\nconst useIconStyles = /*#__PURE__*/__styles({\n  base: {\n    Be2twd7: \"fndrnj9\",\n    Bqenvij: \"fbhnoac\",\n    a9b677: \"feqmc2u\"\n  },\n  before: {\n    t21cq0: [\"fkujibs\", \"f199hnxi\"]\n  },\n  after: {\n    Frg6f3: [\"f199hnxi\", \"fkujibs\"]\n  }\n}, {\n  d: [\".fndrnj9{font-size:40px;}\", \".fbhnoac{height:40px;}\", \".feqmc2u{width:40px;}\", \".fkujibs{margin-right:var(--spacingHorizontalM);}\", \".f199hnxi{margin-left:var(--spacingHorizontalM);}\"]\n});\nconst useContentContainerStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    fsow6f: [\"f1o700av\", \"fes3tcz\"]\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f1o700av{text-align:left;}\", \".fes3tcz{text-align:right;}\"]\n});\nconst useSecondaryContentStyles = /*#__PURE__*/__styles({\n  base: {\n    Bg96gwp: \"flkuc6h\",\n    Bhrd7zp: \"figsok6\"\n  },\n  small: {\n    Be2twd7: \"fy9rknc\"\n  },\n  medium: {\n    Be2twd7: \"fy9rknc\"\n  },\n  large: {\n    Be2twd7: \"fkhj508\"\n  }\n}, {\n  d: [\".flkuc6h{line-height:100%;}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\"]\n});\nexport const useCompoundButtonStyles_unstable = state => {\n  const rootStyles = useRootStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n  const contentContainerStyles = useContentContainerStyles();\n  const secondaryContentStyles = useSecondaryContentStyles();\n  const {\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconOnly,\n    iconPosition,\n    size\n  } = state;\n  state.root.className = mergeClasses(compoundButtonClassNames.root,\n  // Root styles\n  rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size],\n  // Disabled styles\n  (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n  // Icon-only styles\n  iconOnly && rootIconOnlyStyles[size],\n  // User provided class name\n  state.root.className);\n  state.contentContainer.className = mergeClasses(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);\n  if (state.icon) {\n    state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);\n  }\n  if (state.secondaryContent) {\n    state.secondaryContent.className = mergeClasses(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);\n  }\n  useButtonStyles_unstable(state);\n  return state;\n};\n//# sourceMappingURL=useCompoundButtonStyles.js.map"],"names":["compoundButtonClassNames","useCompoundButtonStyles_unstable","root","icon","contentContainer","secondaryContent","useRootStyles","__styles","base","Bqenvij","J657lq","Jlnjib","Bc29nj9","highContrast","pu7qz5","B10010i","outline","primary","B8ia98v","secondary","subtle","transparent","small","z8tnut","z189sj","Byoj8tv","uwmqm3","Be2twd7","Bg96gwp","medium","large","disabled","disabledHighContrast","d","h","m","useRootIconOnlyStyles","B2u0y6b","Bf4jedk","useIconStyles","a9b677","before","t21cq0","after","Frg6f3","useContentContainerStyles","mc9l5x","Beiy3e4","fsow6f","useSecondaryContentStyles","Bhrd7zp","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","mergeClasses","children","undefined","useButtonStyles_unstable"],"mappings":"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"}

package/lib-commonjs/components/MenuButton/MenuButton.js

@@ -1,28 +1,25 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "MenuButton", {
+    enumerable: true,
+    get: ()=>MenuButton
 });
-exports.MenuButton = void 0;
-const React = /*#__PURE__*/require("react");
-const renderMenuButton_1 = /*#__PURE__*/require("./renderMenuButton");
-const useMenuButton_1 = /*#__PURE__*/require("./useMenuButton");
-const useMenuButtonStyles_1 = /*#__PURE__*/require("./useMenuButtonStyles");
-const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
-/**
- * MenuButtons are buttons that have a chevron icon after the button contents and are usually clicked to open/close
- * menus.
- */
-exports.MenuButton = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useMenuButton_1.useMenuButton_unstable(props, ref);
-  useMenuButtonStyles_1.useMenuButtonStyles_unstable(state);
-  const {
-    useMenuButtonStyles_unstable: useCustomStyles
-  } = react_shared_contexts_1.useCustomStyleHooks_unstable();
-  useCustomStyles(state);
-  return renderMenuButton_1.renderMenuButton_unstable(state);
-  // Casting is required due to lack of distributive union to support unions on @types/react
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _renderMenuButton = require("./renderMenuButton");
+const _useMenuButton = require("./useMenuButton");
+const _useMenuButtonStyles = require("./useMenuButtonStyles");
+const _reactSharedContexts = require("@fluentui/react-shared-contexts");
+const MenuButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useMenuButton.useMenuButton_unstable)(props, ref);
+    (0, _useMenuButtonStyles.useMenuButtonStyles_unstable)(state);
+    const { useMenuButtonStyles_unstable: useCustomStyles  } = (0, _reactSharedContexts.useCustomStyleHooks_unstable)();
+    useCustomStyles(state);
+    return (0, _renderMenuButton.renderMenuButton_unstable)(state);
+// Casting is required due to lack of distributive union to support unions on @types/react
 });
+MenuButton.displayName = 'MenuButton'; //# sourceMappingURL=MenuButton.js.map
 
-exports.MenuButton.displayName = 'MenuButton';
 //# sourceMappingURL=MenuButton.js.map