@fluentui/react-button 0.0.0-nightly-20240731-0407.1 → 0.0.0-nightly-20240819-2052.1

package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js

@@ -10,9 +10,9 @@ export const compoundButtonClassNames = {
 const useRootStyles = /*#__PURE__*/__styles({
   base: {
     Bqenvij: "f11ysow2",
-    J657lq: "f1um431h",
-    Jlnjib: "fte7hqw",
-    Bc29nj9: "f1yh8ef3"
+    J657lq: "f1b5z9sw",
+    Jlnjib: "f5qeon2",
+    Bc29nj9: "faudw5a"
   },
   highContrast: {
     pu7qz5: "fi3u9nm",
@@ -20,23 +20,23 @@ const useRootStyles = /*#__PURE__*/__styles({
   },
   outline: {},
   primary: {
-    J657lq: "foe7gw6",
-    Jlnjib: "fvxlz81",
-    Bc29nj9: "f1c2mdy",
+    J657lq: "funjct6",
+    Jlnjib: "f1asokf4",
+    Bc29nj9: "f1itcsjs",
     B8ia98v: "f1r39r2s"
   },
   secondary: {},
   subtle: {
-    J657lq: "f1um431h",
-    Jlnjib: "fte7hqw",
-    Bc29nj9: "f1yh8ef3",
+    J657lq: "f1ux1mnk",
+    Jlnjib: "f1vzarvd",
+    Bc29nj9: "fjbugxx",
     pu7qz5: "f1xoeh18",
     B10010i: "f1ca1nd7"
   },
   transparent: {
-    J657lq: "f1um431h",
-    Jlnjib: "f1wn9xqz",
-    Bc29nj9: "f1a8q4d0"
+    J657lq: "fvbbhyc",
+    Jlnjib: "f8ewxuj",
+    Bc29nj9: "f1fahull"
   },
   small: {
     Byoj8tv: 0,
@@ -44,8 +44,8 @@ const useRootStyles = /*#__PURE__*/__styles({
     z189sj: 0,
     z8tnut: 0,
     B0ocmuz: "f1ge6w2w",
-    Be2twd7: "fkhj508",
-    Bg96gwp: "f1i3iumi"
+    Be2twd7: "f15gbzv1",
+    Bg96gwp: "f1sa15c0"
   },
   medium: {
     Byoj8tv: 0,
@@ -53,8 +53,8 @@ const useRootStyles = /*#__PURE__*/__styles({
     z189sj: 0,
     z8tnut: 0,
     B0ocmuz: "fnnf4v2",
-    Be2twd7: "fkhj508",
-    Bg96gwp: "f1i3iumi"
+    Be2twd7: "fjciaph",
+    Bg96gwp: "fbdd13v"
   },
   large: {
     Byoj8tv: 0,
@@ -62,13 +62,13 @@ const useRootStyles = /*#__PURE__*/__styles({
     z189sj: 0,
     z8tnut: 0,
     B0ocmuz: "f14s4sho",
-    Be2twd7: "fod5ikn",
-    Bg96gwp: "faaz57k"
+    Be2twd7: "f1kvdf5n",
+    Bg96gwp: "fs68quy"
   },
   disabled: {
-    J657lq: "f1rlv8bf",
-    Jlnjib: "fd1dbtm",
-    Bc29nj9: "f1vqmdmi"
+    J657lq: "f1jzfktb",
+    Jlnjib: "f1r3q7yt",
+    Bc29nj9: "fdct7rr"
   },
   disabledHighContrast: {
     B8ia98v: "f1csacz4",
@@ -76,14 +76,14 @@ const useRootStyles = /*#__PURE__*/__styles({
     B10010i: "fs0rda3"
   }
 }, {
-  d: [".f11ysow2{height:auto;}", ".f1um431h .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForeground2);}", ".foe7gw6 .fui-CompoundButton__secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", [".f1ge6w2w{padding:var(--spacingHorizontalS) var(--spacingHorizontalS) var(--spacingHorizontalMNudge) var(--spacingHorizontalS);}", {
+  d: [".f11ysow2{height:auto;}", ".f1b5z9sw .fui-CompoundButton__secondaryContent{color:var(--1, var(--2, var(--colorNeutralForeground2)));}", ".funjct6 .fui-CompoundButton__secondaryContent{color:var(--7, var(--8, var(--colorNeutralForegroundOnBrand)));}", ".f1ux1mnk .fui-CompoundButton__secondaryContent{color:var(--13, var(--14, var(--colorNeutralForeground2)));}", ".fvbbhyc .fui-CompoundButton__secondaryContent{color:var(--19, var(--20, var(--colorNeutralForeground2)));}", [".f1ge6w2w{padding:var(--spacingHorizontalS) var(--spacingHorizontalS) var(--spacingHorizontalMNudge) var(--spacingHorizontalS);}", {
     p: -1
-  }], ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", [".fnnf4v2{padding:14px var(--spacingHorizontalM) var(--spacingHorizontalL) var(--spacingHorizontalM);}", {
+  }], ".f15gbzv1{font-size:var(--25, var(--26, var(--fontSizeBase300)));}", ".f1sa15c0{line-height:var(--27, var(--28, var(--lineHeightBase300)));}", [".fnnf4v2{padding:14px var(--spacingHorizontalM) var(--spacingHorizontalL) var(--spacingHorizontalM);}", {
     p: -1
-  }], [".f14s4sho{padding:18px var(--spacingHorizontalL) var(--spacingHorizontalXL) var(--spacingHorizontalL);}", {
+  }], ".fjciaph{font-size:var(--29, var(--30, var(--fontSizeBase300)));}", ".fbdd13v{line-height:var(--31, var(--32, var(--lineHeightBase300)));}", [".f14s4sho{padding:18px var(--spacingHorizontalL) var(--spacingHorizontalXL) var(--spacingHorizontalL);}", {
     p: -1
-  }], ".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);}"],
+  }], ".f1kvdf5n{font-size:var(--33, var(--34, var(--fontSizeBase400)));}", ".fs68quy{line-height:var(--35, var(--36, var(--lineHeightBase400)));}", ".f1jzfktb .fui-CompoundButton__secondaryContent{color:var(--37, var(--38, var(--colorNeutralForegroundDisabled)));}"],
+  h: [".f5qeon2:hover .fui-CompoundButton__secondaryContent{color:var(--3, var(--4, var(--colorNeutralForeground2Hover)));}", ".faudw5a:hover:active .fui-CompoundButton__secondaryContent{color:var(--5, var(--6, var(--colorNeutralForeground2Pressed)));}", ".f1asokf4:hover .fui-CompoundButton__secondaryContent{color:var(--9, var(--10, var(--colorNeutralForegroundOnBrand)));}", ".f1itcsjs:hover:active .fui-CompoundButton__secondaryContent{color:var(--11, var(--12, var(--colorNeutralForegroundOnBrand)));}", ".f1vzarvd:hover .fui-CompoundButton__secondaryContent{color:var(--15, var(--16, var(--colorNeutralForeground2Hover)));}", ".fjbugxx:hover:active .fui-CompoundButton__secondaryContent{color:var(--17, var(--18, var(--colorNeutralForeground2Pressed)));}", ".f8ewxuj:hover .fui-CompoundButton__secondaryContent{color:var(--21, var(--22, var(--colorNeutralForeground2BrandHover)));}", ".f1fahull:hover:active .fui-CompoundButton__secondaryContent{color:var(--23, var(--24, var(--colorNeutralForeground2BrandPressed)));}", ".f1r3q7yt:hover .fui-CompoundButton__secondaryContent{color:var(--39, var(--40, var(--colorNeutralForegroundDisabled)));}", ".fdct7rr:hover:active .fui-CompoundButton__secondaryContent{color:var(--41, var(--42, 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;}}", {
@@ -108,7 +108,7 @@ const useRootIconOnlyStyles = /*#__PURE__*/__styles({
     uwmqm3: 0,
     z189sj: 0,
     z8tnut: 0,
-    B0ocmuz: "f1t35pdg",
+    B0ocmuz: "fwgbj9c",
     B2u0y6b: "ft5vyj6",
     Bf4jedk: "f17suaiq"
   },
@@ -117,7 +117,7 @@ const useRootIconOnlyStyles = /*#__PURE__*/__styles({
     uwmqm3: 0,
     z189sj: 0,
     z8tnut: 0,
-    B0ocmuz: "f1r1wyb6",
+    B0ocmuz: "fbeqm23",
     B2u0y6b: "fdczgix",
     Bf4jedk: "fjdcg9m"
   },
@@ -126,16 +126,16 @@ const useRootIconOnlyStyles = /*#__PURE__*/__styles({
     uwmqm3: 0,
     z189sj: 0,
     z8tnut: 0,
-    B0ocmuz: "f1bnz8pu",
+    B0ocmuz: "f11g5gth",
     B2u0y6b: "fww51uw",
     Bf4jedk: "f1qhsl2h"
   }
 }, {
-  d: [[".f1t35pdg{padding:var(--spacingHorizontalXS);}", {
+  d: [[".fwgbj9c{padding:var(--43, var(--44, var(--spacingHorizontalXS)));}", {
     p: -1
-  }], ".ft5vyj6{max-width:48px;}", ".f17suaiq{min-width:48px;}", [".f1r1wyb6{padding:var(--spacingHorizontalSNudge);}", {
+  }], ".ft5vyj6{max-width:48px;}", ".f17suaiq{min-width:48px;}", [".fbeqm23{padding:var(--45, var(--46, var(--spacingHorizontalSNudge)));}", {
     p: -1
-  }], ".fdczgix{max-width:52px;}", ".fjdcg9m{min-width:52px;}", [".f1bnz8pu{padding:var(--spacingHorizontalS);}", {
+  }], ".fdczgix{max-width:52px;}", ".fjdcg9m{min-width:52px;}", [".f11g5gth{padding:var(--47, var(--48, var(--spacingHorizontalS)));}", {
     p: -1
   }], ".fww51uw{max-width:56px;}", ".f1qhsl2h{min-width:56px;}"]
 });
@@ -146,13 +146,13 @@ const useIconStyles = /*#__PURE__*/__styles({
     a9b677: "feqmc2u"
   },
   before: {
-    t21cq0: ["fkujibs", "f199hnxi"]
+    t21cq0: ["ffspaqv", "fl41pyz"]
   },
   after: {
-    Frg6f3: ["f199hnxi", "fkujibs"]
+    Frg6f3: ["ffeii54", "f160gfk7"]
   }
 }, {
-  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;}", ".ffspaqv{margin-right:var(--49, var(--50, var(--spacingHorizontalM)));}", ".fl41pyz{margin-left:var(--49, var(--50, var(--spacingHorizontalM)));}", ".ffeii54{margin-left:var(--51, var(--52, var(--spacingHorizontalM)));}", ".f160gfk7{margin-right:var(--51, var(--52, var(--spacingHorizontalM)));}"]
 });
 const useContentContainerStyles = /*#__PURE__*/__styles({
   base: {
@@ -166,19 +166,19 @@ const useContentContainerStyles = /*#__PURE__*/__styles({
 const useSecondaryContentStyles = /*#__PURE__*/__styles({
   base: {
     Bg96gwp: "flkuc6h",
-    Bhrd7zp: "figsok6"
+    Bhrd7zp: "fdm1671"
   },
   small: {
-    Be2twd7: "fy9rknc"
+    Be2twd7: "fom2f27"
   },
   medium: {
-    Be2twd7: "fy9rknc"
+    Be2twd7: "f41zv8s"
   },
   large: {
-    Be2twd7: "fkhj508"
+    Be2twd7: "fd6cvnp"
   }
 }, {
-  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%;}", ".fdm1671{font-weight:var(--53, var(--54, var(--fontWeightRegular)));}", ".fom2f27{font-size:var(--55, var(--56, var(--fontSizeBase200)));}", ".f41zv8s{font-size:var(--57, var(--58, var(--fontSizeBase200)));}", ".fd6cvnp{font-size:var(--59, var(--60, var(--fontSizeBase300)));}"]
 });
 export const useCompoundButtonStyles_unstable = state => {
   'use no memo';

package/lib/components/CompoundButton/useCompoundButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","mergeClasses","__styles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","Bqenvij","J657lq","Jlnjib","Bc29nj9","highContrast","pu7qz5","B10010i","outline","primary","B8ia98v","secondary","subtle","transparent","small","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Be2twd7","Bg96gwp","medium","large","disabled","disabledHighContrast","d","p","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","children","undefined"],"sources":["useCompoundButtonStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\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 = makeStyles({\n    // Base styles\n    base: {\n        height: 'auto',\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Hover\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Pressed\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            ':hover:active': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Highlight'\n                }\n            }\n        }\n    },\n    // Appearance variations\n    outline: {\n    },\n    primary: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundOnBrand\n            }\n        },\n        '@media (forced-colors: active)': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: 'HighlightText'\n            }\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Hover\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2Pressed\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Canvas'\n                }\n            },\n            ':hover:active': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Canvas'\n                }\n            }\n        }\n    },\n    transparent: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForeground2\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2BrandHover\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForeground2BrandPressed\n            }\n        }\n    },\n    // Size variations\n    small: {\n        padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300\n    },\n    medium: {\n        padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300\n    },\n    large: {\n        padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,\n        fontSize: tokens.fontSizeBase400,\n        lineHeight: tokens.lineHeightBase400\n    },\n    // Disabled styles\n    disabled: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: tokens.colorNeutralForegroundDisabled\n            }\n        }\n    },\n    // Disabled high contrast styles\n    disabledHighContrast: {\n        '@media (forced-colors: active)': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: 'GrayText'\n            },\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':hover:active': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'GrayText'\n                }\n            }\n        }\n    }\n});\nconst useRootIconOnlyStyles = makeStyles({\n    // Size variations\n    small: {\n        padding: tokens.spacingHorizontalXS,\n        maxWidth: '48px',\n        minWidth: '48px'\n    },\n    medium: {\n        padding: tokens.spacingHorizontalSNudge,\n        maxWidth: '52px',\n        minWidth: '52px'\n    },\n    large: {\n        padding: tokens.spacingHorizontalS,\n        maxWidth: '56px',\n        minWidth: '56px'\n    }\n});\nconst useIconStyles = makeStyles({\n    // Base styles\n    base: {\n        fontSize: '40px',\n        height: '40px',\n        width: '40px'\n    },\n    // Icon position variations\n    before: {\n        marginRight: tokens.spacingHorizontalM\n    },\n    after: {\n        marginLeft: tokens.spacingHorizontalM\n    }\n});\nconst useContentContainerStyles = makeStyles({\n    // Base styles\n    base: {\n        display: 'flex',\n        flexDirection: 'column',\n        textAlign: 'left'\n    }\n});\nconst useSecondaryContentStyles = makeStyles({\n    // Base styles\n    base: {\n        lineHeight: '100%',\n        fontWeight: tokens.fontWeightRegular\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});\nexport const useCompoundButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const rootIconOnlyStyles = useRootIconOnlyStyles();\n    const iconStyles = useIconStyles();\n    const contentContainerStyles = useContentContainerStyles();\n    const secondaryContentStyles = useSecondaryContentStyles();\n    const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n    state.root.className = mergeClasses(compoundButtonClassNames.root, // Root styles\n    rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size], // 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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tokens","mergeClasses","__styles","useButtonStyles_unstable","compoundButtonClassNames","root","icon","contentContainer","secondaryContent","useRootStyles","base","Bqenvij","J657lq","Jlnjib","Bc29nj9","highContrast","pu7qz5","B10010i","outline","primary","B8ia98v","secondary","subtle","transparent","small","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Be2twd7","Bg96gwp","medium","large","disabled","disabledHighContrast","d","p","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","children","undefined"],"sources":["useCompoundButtonStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\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 = makeStyles({\n    // Base styles\n    base: {\n        height: 'auto',\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: `var(--1, var(--2, ${tokens.colorNeutralForeground2}))`\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: `var(--3, var(--4, ${tokens.colorNeutralForeground2Hover}))`\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: `var(--5, var(--6, ${tokens.colorNeutralForeground2Pressed}))`\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            ':hover:active': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Highlight'\n                }\n            }\n        }\n    },\n    // Appearance variations\n    outline: {\n    },\n    primary: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: `var(--7, var(--8, ${tokens.colorNeutralForegroundOnBrand}))`\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: `var(--9, var(--10, ${tokens.colorNeutralForegroundOnBrand}))`\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: `var(--11, var(--12, ${tokens.colorNeutralForegroundOnBrand}))`\n            }\n        },\n        '@media (forced-colors: active)': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: 'HighlightText'\n            }\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: `var(--13, var(--14, ${tokens.colorNeutralForeground2}))`\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: `var(--15, var(--16, ${tokens.colorNeutralForeground2Hover}))`\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: `var(--17, var(--18, ${tokens.colorNeutralForeground2Pressed}))`\n            }\n        },\n        '@media (forced-colors: active)': {\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Canvas'\n                }\n            },\n            ':hover:active': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'Canvas'\n                }\n            }\n        }\n    },\n    transparent: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: `var(--19, var(--20, ${tokens.colorNeutralForeground2}))`\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: `var(--21, var(--22, ${tokens.colorNeutralForeground2BrandHover}))`\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: `var(--23, var(--24, ${tokens.colorNeutralForeground2BrandPressed}))`\n            }\n        }\n    },\n    // Size variations\n    small: {\n        padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,\n        fontSize: `var(--25, var(--26, ${tokens.fontSizeBase300}))`,\n        lineHeight: `var(--27, var(--28, ${tokens.lineHeightBase300}))`\n    },\n    medium: {\n        padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,\n        fontSize: `var(--29, var(--30, ${tokens.fontSizeBase300}))`,\n        lineHeight: `var(--31, var(--32, ${tokens.lineHeightBase300}))`\n    },\n    large: {\n        padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,\n        fontSize: `var(--33, var(--34, ${tokens.fontSizeBase400}))`,\n        lineHeight: `var(--35, var(--36, ${tokens.lineHeightBase400}))`\n    },\n    // Disabled styles\n    disabled: {\n        [`& .${compoundButtonClassNames.secondaryContent}`]: {\n            color: `var(--37, var(--38, ${tokens.colorNeutralForegroundDisabled}))`\n        },\n        ':hover': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: `var(--39, var(--40, ${tokens.colorNeutralForegroundDisabled}))`\n            }\n        },\n        ':hover:active': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: `var(--41, var(--42, ${tokens.colorNeutralForegroundDisabled}))`\n            }\n        }\n    },\n    // Disabled high contrast styles\n    disabledHighContrast: {\n        '@media (forced-colors: active)': {\n            [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                color: 'GrayText'\n            },\n            ':hover': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'GrayText'\n                }\n            },\n            ':hover:active': {\n                [`& .${compoundButtonClassNames.secondaryContent}`]: {\n                    color: 'GrayText'\n                }\n            }\n        }\n    }\n});\nconst useRootIconOnlyStyles = makeStyles({\n    // Size variations\n    small: {\n        padding: `var(--43, var(--44, ${tokens.spacingHorizontalXS}))`,\n        maxWidth: '48px',\n        minWidth: '48px'\n    },\n    medium: {\n        padding: `var(--45, var(--46, ${tokens.spacingHorizontalSNudge}))`,\n        maxWidth: '52px',\n        minWidth: '52px'\n    },\n    large: {\n        padding: `var(--47, var(--48, ${tokens.spacingHorizontalS}))`,\n        maxWidth: '56px',\n        minWidth: '56px'\n    }\n});\nconst useIconStyles = makeStyles({\n    // Base styles\n    base: {\n        fontSize: '40px',\n        height: '40px',\n        width: '40px'\n    },\n    // Icon position variations\n    before: {\n        marginRight: `var(--49, var(--50, ${tokens.spacingHorizontalM}))`\n    },\n    after: {\n        marginLeft: `var(--51, var(--52, ${tokens.spacingHorizontalM}))`\n    }\n});\nconst useContentContainerStyles = makeStyles({\n    // Base styles\n    base: {\n        display: 'flex',\n        flexDirection: 'column',\n        textAlign: 'left'\n    }\n});\nconst useSecondaryContentStyles = makeStyles({\n    // Base styles\n    base: {\n        lineHeight: '100%',\n        fontWeight: `var(--53, var(--54, ${tokens.fontWeightRegular}))`\n    },\n    // Size variations\n    small: {\n        fontSize: `var(--55, var(--56, ${tokens.fontSizeBase200}))`\n    },\n    medium: {\n        fontSize: `var(--57, var(--58, ${tokens.fontSizeBase200}))`\n    },\n    large: {\n        fontSize: `var(--59, var(--60, ${tokens.fontSizeBase300}))`\n    }\n});\nexport const useCompoundButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const rootIconOnlyStyles = useRootIconOnlyStyles();\n    const iconStyles = useIconStyles();\n    const contentContainerStyles = useContentContainerStyles();\n    const secondaryContentStyles = useSecondaryContentStyles();\n    const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n    state.root.className = mergeClasses(compoundButtonClassNames.root, // Root styles\n    rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles\n    (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size], // 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"],"mappings":"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","ignoreList":[]}

package/lib/components/MenuButton/useMenuButtonStyles.styles.js

@@ -21,49 +21,49 @@ const useRootExpandedStyles = /*#__PURE__*/__styles({
     Bekrc4i: ["f130t4y6", "f1efpmoh"],
     Bn0qgzm: "fv51ejd",
     ibv6hh: ["f1efpmoh", "f130t4y6"],
-    sj55zd: "f14nttnl"
+    sj55zd: "f1finf92"
   },
   primary: {
-    De3pzq: "f8w4g0q"
+    De3pzq: "f12rqg2x"
   },
   secondary: {
-    De3pzq: "f1nfm20t",
+    De3pzq: "fycfq0p",
     g2u3we: "f1ly1fcm",
     h3c5rm: ["fi8bssc", "fj6btzu"],
     B9xav0g: "f1s9tnsa",
     zhjwy3: ["fj6btzu", "fi8bssc"],
-    sj55zd: "f14nttnl"
+    sj55zd: "f1fndet9"
   },
   subtle: {
-    De3pzq: "fq5gl1p",
-    sj55zd: "f1eryozh"
+    De3pzq: "fqsphwg",
+    sj55zd: "f1azrvd3"
   },
   transparent: {
-    De3pzq: "f1q9pm1r",
-    sj55zd: "f1qj7y59"
+    De3pzq: "fn0l55a",
+    sj55zd: "f161y6v8"
   }
 }, {
-  d: [".fxoiby5 .fui-Icon-filled{display:inline;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f1ly1fcm{border-top-color:var(--colorNeutralStroke1Selected);}", ".fi8bssc{border-right-color:var(--colorNeutralStroke1Selected);}", ".fj6btzu{border-left-color:var(--colorNeutralStroke1Selected);}", ".f1s9tnsa{border-bottom-color:var(--colorNeutralStroke1Selected);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".f14nttnl{color:var(--colorNeutralForeground1Selected);}", ".f8w4g0q{background-color:var(--colorBrandBackgroundSelected);}", ".f1nfm20t{background-color:var(--colorNeutralBackground1Selected);}", ".fq5gl1p{background-color:var(--colorSubtleBackgroundSelected);}", ".f1eryozh{color:var(--colorNeutralForeground2Selected);}", ".f1q9pm1r{background-color:var(--colorTransparentBackgroundSelected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"]
+  d: [".fxoiby5 .fui-Icon-filled{display:inline;}", ".f15q0o9g .fui-Icon-regular{display:none;}", ".f1ly1fcm{border-top-color:var(--colorNeutralStroke1Selected);}", ".fi8bssc{border-right-color:var(--colorNeutralStroke1Selected);}", ".fj6btzu{border-left-color:var(--colorNeutralStroke1Selected);}", ".f1s9tnsa{border-bottom-color:var(--colorNeutralStroke1Selected);}", ".fgx37oo{border-top-width:var(--strokeWidthThicker);}", ".f130t4y6{border-right-width:var(--strokeWidthThicker);}", ".f1efpmoh{border-left-width:var(--strokeWidthThicker);}", ".fv51ejd{border-bottom-width:var(--strokeWidthThicker);}", ".f1finf92{color:var(--61, var(--62, var(--colorNeutralForeground1Selected)));}", ".f12rqg2x{background-color:var(--63, var(--64, var(--colorBrandBackgroundSelected)));}", ".fycfq0p{background-color:var(--65, var(--66, var(--colorNeutralBackground1Selected)));}", ".f1fndet9{color:var(--67, var(--68, var(--colorNeutralForeground1Selected)));}", ".fqsphwg{background-color:var(--69, var(--70, var(--colorSubtleBackgroundSelected)));}", ".f1azrvd3{color:var(--71, var(--72, var(--colorNeutralForeground2Selected)));}", ".fn0l55a{background-color:var(--73, var(--74, var(--colorTransparentBackgroundSelected)));}", ".f161y6v8{color:var(--75, var(--76, var(--colorNeutralForeground2BrandSelected)));}"]
 });
 const useIconExpandedStyles = /*#__PURE__*/__styles({
   outline: {
-    sj55zd: "f14nttnl"
+    sj55zd: "ftk8xbm"
   },
   primary: {},
   secondary: {
-    sj55zd: "f14nttnl"
+    sj55zd: "fgnw87d"
   },
   subtle: {
-    sj55zd: "f1qj7y59"
+    sj55zd: "fvqox4k"
   },
   transparent: {
-    sj55zd: "f1qj7y59"
+    sj55zd: "fg854at"
   },
   highContrast: {
     ze5xyy: "fqyhrn0"
   }
 }, {
-  d: [".f14nttnl{color:var(--colorNeutralForeground1Selected);}", ".f1qj7y59{color:var(--colorNeutralForeground2BrandSelected);}"],
+  d: [".ftk8xbm{color:var(--77, var(--78, var(--colorNeutralForeground1Selected)));}", ".fgnw87d{color:var(--79, var(--80, var(--colorNeutralForeground1Selected)));}", ".fvqox4k{color:var(--81, var(--82, var(--colorNeutralForeground2BrandSelected)));}", ".fg854at{color:var(--83, var(--84, var(--colorNeutralForeground2BrandSelected)));}"],
   m: [["@media (forced-colors: active){.fqyhrn0:hover{color:Canvas;}}", {
     m: "(forced-colors: active)"
   }]]
@@ -75,26 +75,26 @@ const useMenuIconStyles = /*#__PURE__*/__styles({
   small: {
     Be2twd7: "f1ugzwwg",
     Bqenvij: "fvblgha",
-    Bg96gwp: "fwrc4pm",
+    Bg96gwp: "f1icsd6r",
     a9b677: "frx94fk"
   },
   medium: {
     Be2twd7: "f1ugzwwg",
     Bqenvij: "fvblgha",
-    Bg96gwp: "fwrc4pm",
+    Bg96gwp: "f1ug5xja",
     a9b677: "frx94fk"
   },
   large: {
     Be2twd7: "f4ybsrx",
     Bqenvij: "fd461yt",
-    Bg96gwp: "faaz57k",
+    Bg96gwp: "fgxsxhu",
     a9b677: "fjw5fx7"
   },
   notIconOnly: {
-    Frg6f3: ["fbyavb5", "fm0x6gh"]
+    Frg6f3: ["f1en42g9", "fesyhy"]
   }
 }, {
-  d: [".fez10in{line-height:0;}", ".f1ugzwwg{font-size:12px;}", ".fvblgha{height:12px;}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".frx94fk{width:12px;}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fjw5fx7{width:16px;}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}"]
+  d: [".fez10in{line-height:0;}", ".f1ugzwwg{font-size:12px;}", ".fvblgha{height:12px;}", ".f1icsd6r{line-height:var(--85, var(--86, var(--lineHeightBase200)));}", ".frx94fk{width:12px;}", ".f1ug5xja{line-height:var(--87, var(--88, var(--lineHeightBase200)));}", ".f4ybsrx{font-size:16px;}", ".fd461yt{height:16px;}", ".fgxsxhu{line-height:var(--89, var(--90, var(--lineHeightBase400)));}", ".fjw5fx7{width:16px;}", ".f1en42g9{margin-left:var(--91, var(--92, var(--spacingHorizontalXS)));}", ".fesyhy{margin-right:var(--91, var(--92, var(--spacingHorizontalXS)));}"]
 });
 export const useMenuButtonStyles_unstable = state => {
   'use no memo';

package/lib/components/MenuButton/useMenuButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","__styles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","D0sxk3","t6yez3","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","primary","De3pzq","secondary","subtle","transparent","d","useIconExpandedStyles","highContrast","ze5xyy","m","useMenuIconStyles","Bg96gwp","small","Be2twd7","Bqenvij","a9b677","medium","large","notIconOnly","Frg6f3","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"sources":["useMenuButtonStyles.styles.js"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const menuButtonClassNames = {\n    root: 'fui-MenuButton',\n    icon: 'fui-MenuButton__icon',\n    menuIcon: 'fui-MenuButton__menuIcon'\n};\nconst useRootExpandedStyles = makeStyles({\n    base: {\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        }\n    },\n    // Appearance variations\n    outline: {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n        ...shorthands.borderWidth(tokens.strokeWidthThicker),\n        color: tokens.colorNeutralForeground1Selected\n    },\n    primary: {\n        backgroundColor: tokens.colorBrandBackgroundSelected\n    },\n    secondary: {\n        backgroundColor: tokens.colorNeutralBackground1Selected,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n        color: tokens.colorNeutralForeground1Selected\n    },\n    subtle: {\n        backgroundColor: tokens.colorSubtleBackgroundSelected,\n        color: tokens.colorNeutralForeground2Selected\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackgroundSelected,\n        color: tokens.colorNeutralForeground2BrandSelected\n    }\n});\nconst useIconExpandedStyles = makeStyles({\n    // Appearance variations\n    outline: {\n        color: tokens.colorNeutralForeground1Selected\n    },\n    primary: {\n    },\n    secondary: {\n        color: tokens.colorNeutralForeground1Selected\n    },\n    subtle: {\n        color: tokens.colorNeutralForeground2BrandSelected\n    },\n    transparent: {\n        color: tokens.colorNeutralForeground2BrandSelected\n    },\n    highContrast: {\n        // High contrast styles\n        '@media (forced-colors: active)': {\n            ':hover': {\n                color: 'Canvas'\n            }\n        }\n    }\n});\nconst useMenuIconStyles = makeStyles({\n    base: {\n        lineHeight: 0\n    },\n    // Size appearance\n    small: {\n        fontSize: '12px',\n        height: '12px',\n        lineHeight: tokens.lineHeightBase200,\n        width: '12px'\n    },\n    medium: {\n        fontSize: '12px',\n        height: '12px',\n        lineHeight: tokens.lineHeightBase200,\n        width: '12px'\n    },\n    large: {\n        fontSize: '16px',\n        height: '16px',\n        lineHeight: tokens.lineHeightBase400,\n        width: '16px'\n    },\n    // Not-icon only\n    notIconOnly: {\n        marginLeft: tokens.spacingHorizontalXS\n    }\n});\nexport const useMenuButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const rootExpandedStyles = useRootExpandedStyles();\n    const iconExpandedStyles = useIconExpandedStyles();\n    const menuIconStyles = useMenuIconStyles();\n    state.root.className = mergeClasses(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);\n    }\n    if (state.menuIcon) {\n        state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);\n    }\n    useButtonStyles_unstable({\n        ...state,\n        iconPosition: 'before'\n    });\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["iconFilledClassName","iconRegularClassName","tokens","mergeClasses","__styles","shorthands","useButtonStyles_unstable","menuButtonClassNames","root","icon","menuIcon","useRootExpandedStyles","base","D0sxk3","t6yez3","outline","g2u3we","h3c5rm","B9xav0g","zhjwy3","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","primary","De3pzq","secondary","subtle","transparent","d","useIconExpandedStyles","highContrast","ze5xyy","m","useMenuIconStyles","Bg96gwp","small","Be2twd7","Bqenvij","a9b677","medium","large","notIconOnly","Frg6f3","useMenuButtonStyles_unstable","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","appearance","size","iconOnly","iconPosition"],"sources":["useMenuButtonStyles.styles.js"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nexport const menuButtonClassNames = {\n    root: 'fui-MenuButton',\n    icon: 'fui-MenuButton__icon',\n    menuIcon: 'fui-MenuButton__menuIcon'\n};\nconst useRootExpandedStyles = makeStyles({\n    base: {\n        [`& .${iconFilledClassName}`]: {\n            display: 'inline'\n        },\n        [`& .${iconRegularClassName}`]: {\n            display: 'none'\n        }\n    },\n    // Appearance variations\n    outline: {\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n        ...shorthands.borderWidth(tokens.strokeWidthThicker),\n        color: `var(--61, var(--62, ${tokens.colorNeutralForeground1Selected}))`\n    },\n    primary: {\n        backgroundColor: `var(--63, var(--64, ${tokens.colorBrandBackgroundSelected}))`\n    },\n    secondary: {\n        backgroundColor: `var(--65, var(--66, ${tokens.colorNeutralBackground1Selected}))`,\n        ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n        color: `var(--67, var(--68, ${tokens.colorNeutralForeground1Selected}))`\n    },\n    subtle: {\n        backgroundColor: `var(--69, var(--70, ${tokens.colorSubtleBackgroundSelected}))`,\n        color: `var(--71, var(--72, ${tokens.colorNeutralForeground2Selected}))`\n    },\n    transparent: {\n        backgroundColor: `var(--73, var(--74, ${tokens.colorTransparentBackgroundSelected}))`,\n        color: `var(--75, var(--76, ${tokens.colorNeutralForeground2BrandSelected}))`\n    }\n});\nconst useIconExpandedStyles = makeStyles({\n    // Appearance variations\n    outline: {\n        color: `var(--77, var(--78, ${tokens.colorNeutralForeground1Selected}))`\n    },\n    primary: {\n    },\n    secondary: {\n        color: `var(--79, var(--80, ${tokens.colorNeutralForeground1Selected}))`\n    },\n    subtle: {\n        color: `var(--81, var(--82, ${tokens.colorNeutralForeground2BrandSelected}))`\n    },\n    transparent: {\n        color: `var(--83, var(--84, ${tokens.colorNeutralForeground2BrandSelected}))`\n    },\n    highContrast: {\n        // High contrast styles\n        '@media (forced-colors: active)': {\n            ':hover': {\n                color: 'Canvas'\n            }\n        }\n    }\n});\nconst useMenuIconStyles = makeStyles({\n    base: {\n        lineHeight: 0\n    },\n    // Size appearance\n    small: {\n        fontSize: '12px',\n        height: '12px',\n        lineHeight: `var(--85, var(--86, ${tokens.lineHeightBase200}))`,\n        width: '12px'\n    },\n    medium: {\n        fontSize: '12px',\n        height: '12px',\n        lineHeight: `var(--87, var(--88, ${tokens.lineHeightBase200}))`,\n        width: '12px'\n    },\n    large: {\n        fontSize: '16px',\n        height: '16px',\n        lineHeight: `var(--89, var(--90, ${tokens.lineHeightBase400}))`,\n        width: '16px'\n    },\n    // Not-icon only\n    notIconOnly: {\n        marginLeft: `var(--91, var(--92, ${tokens.spacingHorizontalXS}))`\n    }\n});\nexport const useMenuButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const rootExpandedStyles = useRootExpandedStyles();\n    const iconExpandedStyles = useIconExpandedStyles();\n    const menuIconStyles = useMenuIconStyles();\n    state.root.className = mergeClasses(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);\n    }\n    if (state.menuIcon) {\n        state.menuIcon.className = mergeClasses(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);\n    }\n    useButtonStyles_unstable({\n        ...state,\n        iconPosition: 'before'\n    });\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/SplitButton/useSplitButtonStyles.styles.js

@@ -34,31 +34,31 @@ const useRootStyles = /*#__PURE__*/__styles({
   },
   outline: {},
   primary: {
-    B1l9wao: ["f4rm5b0", "f1tuwo13"],
-    lcnrd8: ["fdwdeeo", "f1ezdslh"],
-    Brbpp8k: ["fckzjn8", "f8ohr2i"],
+    B1l9wao: ["ftvqy83", "fnfyj41"],
+    lcnrd8: ["f9xh180", "f1w8ntad"],
+    Brbpp8k: ["fxn1fl2", "fgyet80"],
     Bcsxniv: ["ff0tx2l", "fnrj3rw"],
     tl7e51: ["f3jppgx", "f1m2s8ie"],
     mba178: ["f96h41g", "fdxf0pi"]
   },
   secondary: {},
   subtle: {
-    B1l9wao: ["fbw67pg", "fcas6k2"],
-    lcnrd8: ["fn44ryq", "fwhhltr"],
-    Brbpp8k: ["f1xppm0p", "fkfp127"]
+    B1l9wao: ["f1yo4dgb", "ff6yatw"],
+    lcnrd8: ["f1afbnnz", "f9myr3o"],
+    Brbpp8k: ["fbqtpi2", "f1njbwn0"]
   },
   transparent: {
-    B1l9wao: ["fbw67pg", "fcas6k2"],
-    lcnrd8: ["fn44ryq", "fwhhltr"],
-    Brbpp8k: ["f1xppm0p", "fkfp127"]
+    B1l9wao: ["f1ebgnyd", "f8coqc"],
+    lcnrd8: ["f152rz25", "f1fm6l08"],
+    Brbpp8k: ["fx9f09k", "fsc52d9"]
   },
   circular: {},
   rounded: {},
   square: {},
   disabled: {
-    B1l9wao: ["f10xrnr8", "f15nylwb"],
-    lcnrd8: ["f11fwhjz", "f18vtcsx"],
-    Brbpp8k: ["f31btwb", "fzgm9gq"]
+    B1l9wao: ["f1t6iz8f", "fe4c7e8"],
+    lcnrd8: ["fs0yi99", "f13k3mky"],
+    Brbpp8k: ["fb9uzha", "f472bms"]
   },
   disabledHighContrast: {
     Bcsxniv: ["fj2q5vi", "f13tct40"],
@@ -66,8 +66,8 @@ const useRootStyles = /*#__PURE__*/__styles({
     mba178: ["f1ma39qa", "f1nzpdru"]
   }
 }, {
-  d: [".ftuwxu6{display:inline-flex;}", ".fsxf2b5{justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f14uur2j .fui-SplitButton__primaryActionButton{border-top-right-radius:0;}", ".fc1btbj .fui-SplitButton__primaryActionButton{border-top-left-radius:0;}", ".fye5tvs .fui-SplitButton__primaryActionButton{border-bottom-right-radius:0;}", ".fc597qq .fui-SplitButton__primaryActionButton{border-bottom-left-radius:0;}", ".f1e8brtx .fui-SplitButton__menuButton{border-left-width:0;}", ".fr36rk3 .fui-SplitButton__menuButton{border-right-width:0;}", ".fxp12j1 .fui-SplitButton__menuButton{border-top-left-radius:0;}", ".f1m6nt2y .fui-SplitButton__menuButton{border-top-right-radius:0;}", ".fr7y8no .fui-SplitButton__menuButton{border-bottom-left-radius:0;}", ".f1dn0c6m .fui-SplitButton__menuButton{border-bottom-right-radius:0;}", ".f1hvqvul .fui-SplitButton__menuButton{min-width:0;}", ".f4rm5b0 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f1tuwo13 .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".fbw67pg .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1);}", ".fcas6k2 .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1);}", ".f10xrnr8 .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f15nylwb .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
-  h: [".fdwdeeo:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f1ezdslh:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".fckzjn8:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeOnBrand);}", ".f8ohr2i:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeOnBrand);}", ".fn44ryq:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Hover);}", ".fwhhltr:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xppm0p:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStroke1Pressed);}", ".fkfp127:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f11fwhjz:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18vtcsx:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f31btwb:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fzgm9gq:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--colorNeutralStrokeDisabled);}"],
+  d: [".ftuwxu6{display:inline-flex;}", ".fsxf2b5{justify-content:stretch;}", ".f10pi13n{position:relative;}", ".fmrv4ls{vertical-align:middle;}", ".f14uur2j .fui-SplitButton__primaryActionButton{border-top-right-radius:0;}", ".fc1btbj .fui-SplitButton__primaryActionButton{border-top-left-radius:0;}", ".fye5tvs .fui-SplitButton__primaryActionButton{border-bottom-right-radius:0;}", ".fc597qq .fui-SplitButton__primaryActionButton{border-bottom-left-radius:0;}", ".f1e8brtx .fui-SplitButton__menuButton{border-left-width:0;}", ".fr36rk3 .fui-SplitButton__menuButton{border-right-width:0;}", ".fxp12j1 .fui-SplitButton__menuButton{border-top-left-radius:0;}", ".f1m6nt2y .fui-SplitButton__menuButton{border-top-right-radius:0;}", ".fr7y8no .fui-SplitButton__menuButton{border-bottom-left-radius:0;}", ".f1dn0c6m .fui-SplitButton__menuButton{border-bottom-right-radius:0;}", ".f1hvqvul .fui-SplitButton__menuButton{min-width:0;}", ".ftvqy83 .fui-SplitButton__primaryActionButton{border-right-color:var(--93, var(--94, var(--colorNeutralStrokeOnBrand)));}", ".fnfyj41 .fui-SplitButton__primaryActionButton{border-left-color:var(--93, var(--94, var(--colorNeutralStrokeOnBrand)));}", ".f1yo4dgb .fui-SplitButton__primaryActionButton{border-right-color:var(--99, var(--100, var(--colorNeutralStroke1)));}", ".ff6yatw .fui-SplitButton__primaryActionButton{border-left-color:var(--99, var(--100, var(--colorNeutralStroke1)));}", ".f1ebgnyd .fui-SplitButton__primaryActionButton{border-right-color:var(--105, var(--106, var(--colorNeutralStroke1)));}", ".f8coqc .fui-SplitButton__primaryActionButton{border-left-color:var(--105, var(--106, var(--colorNeutralStroke1)));}", ".f1t6iz8f .fui-SplitButton__primaryActionButton{border-right-color:var(--111, var(--112, var(--colorNeutralStrokeDisabled)));}", ".fe4c7e8 .fui-SplitButton__primaryActionButton{border-left-color:var(--111, var(--112, var(--colorNeutralStrokeDisabled)));}"],
+  h: [".f9xh180:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--95, var(--96, var(--colorNeutralStrokeOnBrand)));}", ".f1w8ntad:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--95, var(--96, var(--colorNeutralStrokeOnBrand)));}", ".fxn1fl2:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--97, var(--98, var(--colorNeutralStrokeOnBrand)));}", ".fgyet80:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--97, var(--98, var(--colorNeutralStrokeOnBrand)));}", ".f1afbnnz:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--101, var(--102, var(--colorNeutralStroke1Hover)));}", ".f9myr3o:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--101, var(--102, var(--colorNeutralStroke1Hover)));}", ".fbqtpi2:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--103, var(--104, var(--colorNeutralStroke1Pressed)));}", ".f1njbwn0:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--103, var(--104, var(--colorNeutralStroke1Pressed)));}", ".f152rz25:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--107, var(--108, var(--colorNeutralStroke1Hover)));}", ".f1fm6l08:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--107, var(--108, var(--colorNeutralStroke1Hover)));}", ".fx9f09k:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--109, var(--110, var(--colorNeutralStroke1Pressed)));}", ".fsc52d9:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--109, var(--110, var(--colorNeutralStroke1Pressed)));}", ".fs0yi99:hover .fui-SplitButton__primaryActionButton{border-right-color:var(--113, var(--114, var(--colorNeutralStrokeDisabled)));}", ".f13k3mky:hover .fui-SplitButton__primaryActionButton{border-left-color:var(--113, var(--114, var(--colorNeutralStrokeDisabled)));}", ".fb9uzha:hover:active .fui-SplitButton__primaryActionButton{border-right-color:var(--115, var(--116, var(--colorNeutralStrokeDisabled)));}", ".f472bms:hover:active .fui-SplitButton__primaryActionButton{border-left-color:var(--115, var(--116, var(--colorNeutralStrokeDisabled)));}"],
   m: [["@media (forced-colors: active){.ff0tx2l .fui-SplitButton__primaryActionButton{border-right-color:HighlightText;}.fnrj3rw .fui-SplitButton__primaryActionButton{border-left-color:HighlightText;}}", {
     m: "(forced-colors: active)"
   }], ["@media (forced-colors: active){.f1m2s8ie:hover .fui-SplitButton__primaryActionButton{border-left-color:Highlight;}.f3jppgx:hover .fui-SplitButton__primaryActionButton{border-right-color:Highlight;}}", {

package/lib/components/SplitButton/useSplitButtonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","useFocusStyles","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","Brbpp8k","Bcsxniv","tl7e51","mba178","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"sources":["useSplitButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const splitButtonClassNames = {\n    root: 'fui-SplitButton',\n    menuButton: 'fui-SplitButton__menuButton',\n    primaryActionButton: 'fui-SplitButton__primaryActionButton'\n};\nconst useFocusStyles = makeStyles({\n    primaryActionButton: createCustomFocusIndicatorStyle({\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0\n    }),\n    menuButton: createCustomFocusIndicatorStyle({\n        borderLeftWidth: 0,\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0\n    })\n});\nconst useRootStyles = makeStyles({\n    // Base styles\n    base: {\n        display: 'inline-flex',\n        justifyContent: 'stretch',\n        position: 'relative',\n        verticalAlign: 'middle',\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderTopRightRadius: 0,\n            borderBottomRightRadius: 0\n        },\n        [`& .${splitButtonClassNames.menuButton}`]: {\n            borderLeftWidth: 0,\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n            minWidth: 0\n        }\n    },\n    // Appearance variations\n    outline: {\n    },\n    primary: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorNeutralStrokeOnBrand\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeOnBrand\n            }\n        },\n        ':hover:active': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeOnBrand\n            }\n        },\n        '@media (forced-colors: active)': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: 'HighlightText'\n            },\n            ':hover': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'Highlight'\n                }\n            },\n            ':hover:active': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'Highlight'\n                }\n            }\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorNeutralStroke1\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStroke1Hover\n            }\n        },\n        ':hover:active': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStroke1Pressed\n            }\n        }\n    },\n    transparent: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorNeutralStroke1\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStroke1Hover\n            }\n        },\n        ':hover:active': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStroke1Pressed\n            }\n        }\n    },\n    // Shape variations\n    circular: {},\n    rounded: {},\n    square: {},\n    // Disabled styles\n    disabled: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: tokens.colorNeutralStrokeDisabled\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeDisabled\n            }\n        },\n        ':hover:active': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: tokens.colorNeutralStrokeDisabled\n            }\n        }\n    },\n    // Disabled high contrast styles\n    disabledHighContrast: {\n        '@media (forced-colors: active)': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: 'GrayText'\n            },\n            ':hover': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'GrayText'\n                }\n            },\n            ':hover:active': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'GrayText'\n                }\n            }\n        }\n    }\n});\nexport const useSplitButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const focusStyles = useFocusStyles();\n    const { appearance, disabled, disabledFocusable } = state;\n    state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);\n    if (state.menuButton) {\n        state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);\n    }\n    if (state.primaryActionButton) {\n        state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,UAAU,EAAE,6BAA6B;EACzCC,mBAAmB,EAAE;AACzB,CAAC;AACD,MAAMC,cAAc,gBAAGR,QAAA;EAAAO,mBAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAAJ,UAAA;IAAAK,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUtB,CAAC;AACF,MAAMC,aAAa,gBAAGf,QAAA;EAAAgB,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;EAAAC,MAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAM,WAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAO,QAAA;EAAAC,OAAA;EAAAC,MAAA;EAAAC,QAAA;IAAAZ,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAW,oBAAA;IAAAV,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAApB,CAAA;EAAA6B,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyHrB,CAAC;AACF,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAMC,UAAU,GAAGhC,aAAa,CAAC,CAAC;EAClC,MAAMiC,WAAW,GAAGxC,cAAc,CAAC,CAAC;EACpC,MAAM;IAAEyC,UAAU;IAAER,QAAQ;IAAES;EAAkB,CAAC,GAAGJ,KAAK;EACzDA,KAAK,CAACzC,IAAI,CAAC8C,SAAS,GAAGlD,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAE0C,UAAU,CAAC/B,IAAI,EAAEiC,UAAU,IAAIF,UAAU,CAACE,UAAU,CAAC,EAAE,CAACR,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACN,QAAQ,EAAE,CAACA,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACL,oBAAoB,EAAEI,KAAK,CAACzC,IAAI,CAAC8C,SAAS,CAAC;EACxQ,IAAIL,KAAK,CAACxC,UAAU,EAAE;IAClBwC,KAAK,CAACxC,UAAU,CAAC6C,SAAS,GAAGlD,YAAY,CAACG,qBAAqB,CAACE,UAAU,EAAE0C,WAAW,CAAC1C,UAAU,EAAEwC,KAAK,CAACxC,UAAU,CAAC6C,SAAS,CAAC;EACnI;EACA,IAAIL,KAAK,CAACvC,mBAAmB,EAAE;IAC3BuC,KAAK,CAACvC,mBAAmB,CAAC4C,SAAS,GAAGlD,YAAY,CAACG,qBAAqB,CAACG,mBAAmB,EAAEyC,WAAW,CAACzC,mBAAmB,EAAEuC,KAAK,CAACvC,mBAAmB,CAAC4C,SAAS,CAAC;EACvK;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","splitButtonClassNames","root","menuButton","primaryActionButton","useFocusStyles","B6xbmo0","kdpuga","lbo84a","dm238s","Bw81rd7","d","useRootStyles","base","mc9l5x","Brf1p80","qhf8xq","ha4doy","kn2xc0","Bs76p8a","cuxpm9","Biffepf","Defnvf","z0pv9t","outline","primary","B1l9wao","lcnrd8","Brbpp8k","Bcsxniv","tl7e51","mba178","secondary","subtle","transparent","circular","rounded","square","disabled","disabledHighContrast","h","m","useSplitButtonStyles_unstable","state","rootStyles","focusStyles","appearance","disabledFocusable","className"],"sources":["useSplitButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const splitButtonClassNames = {\n    root: 'fui-SplitButton',\n    menuButton: 'fui-SplitButton__menuButton',\n    primaryActionButton: 'fui-SplitButton__primaryActionButton'\n};\nconst useFocusStyles = makeStyles({\n    primaryActionButton: createCustomFocusIndicatorStyle({\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0\n    }),\n    menuButton: createCustomFocusIndicatorStyle({\n        borderLeftWidth: 0,\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0\n    })\n});\nconst useRootStyles = makeStyles({\n    // Base styles\n    base: {\n        display: 'inline-flex',\n        justifyContent: 'stretch',\n        position: 'relative',\n        verticalAlign: 'middle',\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderTopRightRadius: 0,\n            borderBottomRightRadius: 0\n        },\n        [`& .${splitButtonClassNames.menuButton}`]: {\n            borderLeftWidth: 0,\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n            minWidth: 0\n        }\n    },\n    // Appearance variations\n    outline: {\n    },\n    primary: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: `var(--93, var(--94, ${tokens.colorNeutralStrokeOnBrand}))`\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: `var(--95, var(--96, ${tokens.colorNeutralStrokeOnBrand}))`\n            }\n        },\n        ':hover:active': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: `var(--97, var(--98, ${tokens.colorNeutralStrokeOnBrand}))`\n            }\n        },\n        '@media (forced-colors: active)': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: 'HighlightText'\n            },\n            ':hover': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'Highlight'\n                }\n            },\n            ':hover:active': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'Highlight'\n                }\n            }\n        }\n    },\n    secondary: {\n    },\n    subtle: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: `var(--99, var(--100, ${tokens.colorNeutralStroke1}))`\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: `var(--101, var(--102, ${tokens.colorNeutralStroke1Hover}))`\n            }\n        },\n        ':hover:active': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: `var(--103, var(--104, ${tokens.colorNeutralStroke1Pressed}))`\n            }\n        }\n    },\n    transparent: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: `var(--105, var(--106, ${tokens.colorNeutralStroke1}))`\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: `var(--107, var(--108, ${tokens.colorNeutralStroke1Hover}))`\n            }\n        },\n        ':hover:active': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: `var(--109, var(--110, ${tokens.colorNeutralStroke1Pressed}))`\n            }\n        }\n    },\n    // Shape variations\n    circular: {},\n    rounded: {},\n    square: {},\n    // Disabled styles\n    disabled: {\n        [`& .${splitButtonClassNames.primaryActionButton}`]: {\n            borderRightColor: `var(--111, var(--112, ${tokens.colorNeutralStrokeDisabled}))`\n        },\n        ':hover': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: `var(--113, var(--114, ${tokens.colorNeutralStrokeDisabled}))`\n            }\n        },\n        ':hover:active': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: `var(--115, var(--116, ${tokens.colorNeutralStrokeDisabled}))`\n            }\n        }\n    },\n    // Disabled high contrast styles\n    disabledHighContrast: {\n        '@media (forced-colors: active)': {\n            [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                borderRightColor: 'GrayText'\n            },\n            ':hover': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'GrayText'\n                }\n            },\n            ':hover:active': {\n                [`& .${splitButtonClassNames.primaryActionButton}`]: {\n                    borderRightColor: 'GrayText'\n                }\n            }\n        }\n    }\n});\nexport const useSplitButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootStyles();\n    const focusStyles = useFocusStyles();\n    const { appearance, disabled, disabledFocusable } = state;\n    state.root.className = mergeClasses(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);\n    if (state.menuButton) {\n        state.menuButton.className = mergeClasses(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);\n    }\n    if (state.primaryActionButton) {\n        state.primaryActionButton.className = mergeClasses(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,UAAU,EAAE,6BAA6B;EACzCC,mBAAmB,EAAE;AACzB,CAAC;AACD,MAAMC,cAAc,gBAAGR,QAAA;EAAAO,mBAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;EAAAJ,UAAA;IAAAK,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAUtB,CAAC;AACF,MAAMC,aAAa,gBAAGf,QAAA;EAAAgB,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;EAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;EAAAC,MAAA;IAAAP,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAM,WAAA;IAAAR,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAO,QAAA;EAAAC,OAAA;EAAAC,MAAA;EAAAC,QAAA;IAAAZ,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAW,oBAAA;IAAAV,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAApB,CAAA;EAAA6B,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAyHrB,CAAC;AACF,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EAClD,aAAa;;EACb,MAAMC,UAAU,GAAGhC,aAAa,CAAC,CAAC;EAClC,MAAMiC,WAAW,GAAGxC,cAAc,CAAC,CAAC;EACpC,MAAM;IAAEyC,UAAU;IAAER,QAAQ;IAAES;EAAkB,CAAC,GAAGJ,KAAK;EACzDA,KAAK,CAACzC,IAAI,CAAC8C,SAAS,GAAGlD,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAE0C,UAAU,CAAC/B,IAAI,EAAEiC,UAAU,IAAIF,UAAU,CAACE,UAAU,CAAC,EAAE,CAACR,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACN,QAAQ,EAAE,CAACA,QAAQ,IAAIS,iBAAiB,KAAKH,UAAU,CAACL,oBAAoB,EAAEI,KAAK,CAACzC,IAAI,CAAC8C,SAAS,CAAC;EACxQ,IAAIL,KAAK,CAACxC,UAAU,EAAE;IAClBwC,KAAK,CAACxC,UAAU,CAAC6C,SAAS,GAAGlD,YAAY,CAACG,qBAAqB,CAACE,UAAU,EAAE0C,WAAW,CAAC1C,UAAU,EAAEwC,KAAK,CAACxC,UAAU,CAAC6C,SAAS,CAAC;EACnI;EACA,IAAIL,KAAK,CAACvC,mBAAmB,EAAE;IAC3BuC,KAAK,CAACvC,mBAAmB,CAAC4C,SAAS,GAAGlD,YAAY,CAACG,qBAAqB,CAACG,mBAAmB,EAAEyC,WAAW,CAACzC,mBAAmB,EAAEuC,KAAK,CAACvC,mBAAmB,CAAC4C,SAAS,CAAC;EACvK;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}