@fluentui/react-button 9.0.0-nightly.d730088d7f.0 → 9.0.0-rc.10

package/lib-commonjs/components/Button/useButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
+{"version":3,"sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-Button',\n  icon: 'fui-Button__icon',\n};\n/**\n * @deprecated Use `buttonClassNames.root` instead.\n */\nexport const buttonClassName = buttonClassNames.root;\n\nconst iconSpacingVar = '--fui-Button__icon--spacing';\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    verticalAlign: 'middle',\n\n    ...shorthands.margin(0),\n\n    maxWidth: '280px',\n\n    ...shorthands.overflow('hidden'),\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n\n    fontFamily: tokens.fontFamilyBase,\n\n    outlineStyle: 'none',\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1Hover,\n\n      cursor: 'pointer',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1Pressed,\n\n      outlineStyle: 'none',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'inline',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'none',\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':focus': {\n        ...shorthands.borderColor('ButtonText'),\n      },\n\n      ':hover': {\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':hover:active': {\n        color: 'Highlight',\n      },\n    },\n  },\n\n  // Block styles\n  block: {\n    maxWidth: '100%',\n    width: '100%',\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForegroundOnBrand,\n\n    ':hover': {\n      backgroundColor: tokens.colorBrandBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorSubtleBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n\n  // Shape variations\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n  rounded: {\n    /* The borderRadius rounded styles are handled in the size variations */\n  },\n  square: {\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  },\n\n  // Size variations\n  small: {\n    ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalS),\n\n    height: '24px',\n    minWidth: '64px',\n\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    lineHeight: tokens.lineHeightBase200,\n  },\n  medium: {\n    ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalM),\n\n    height: '32px',\n    minWidth: '96px',\n\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase300,\n  },\n  large: {\n    ...shorthands.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalL),\n\n    height: '40px',\n    minWidth: '96px',\n\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n    fontSize: tokens.fontSizeBase400,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase400,\n  },\n});\n\nconst useRootDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    cursor: 'not-allowed',\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n\n      cursor: 'not-allowed',\n\n      [`& .${iconFilledClassName}`]: {\n        display: 'none',\n      },\n      [`& .${iconRegularClassName}`]: {\n        display: 'inline',\n      },\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n      color: 'GrayText',\n\n      ':focus': {\n        ...shorthands.borderColor('GrayText'),\n      },\n\n      ':hover': {\n        ...shorthands.borderColor('GrayText'),\n        color: 'GrayText',\n      },\n\n      ':hover:active': {\n        ...shorthands.borderColor('GrayText'),\n        color: 'GrayText',\n      },\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackground,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: 'transparent',\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: 'transparent',\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: 'transparent',\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: 'transparent',\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: 'transparent',\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: 'transparent',\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useRootFocusStyles = makeStyles({\n  base: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor('transparent'),\n    outlineColor: 'transparent',\n    outlineWidth: tokens.strokeWidthThick,\n    outlineStyle: 'solid',\n    boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 2px ${tokens.colorStrokeFocus2}\n    `,\n    zIndex: 1,\n  }),\n\n  circular: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  }),\n  rounded: {},\n  // Primary styles\n  primary: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n    boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n  }),\n  square: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  }),\n\n  // Size variations\n  small: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  }),\n  medium: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  }),\n  large: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusLarge),\n  }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n  // Size variations\n  small: {\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n\n    minWidth: '28px',\n    maxWidth: '28px',\n  },\n  medium: {\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n\n    minWidth: '32px',\n    maxWidth: '32px',\n  },\n  large: {\n    ...shorthands.padding(tokens.spacingHorizontalSNudge),\n\n    minWidth: '40px',\n    maxWidth: '40px',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  // Base styles\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n\n  // Size variations\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n\n    [iconSpacingVar]: tokens.spacingHorizontalXS,\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n\n    [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n  },\n  large: {\n    fontSize: '24px',\n    height: '24px',\n    width: '24px',\n\n    [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n  },\n\n  // Icon position variations\n  before: {\n    marginRight: `var(${iconSpacingVar})`,\n  },\n  after: {\n    marginLeft: `var(${iconSpacingVar})`,\n  },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n  const rootStyles = useRootStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const rootFocusStyles = useRootFocusStyles();\n  const rootIconOnlyStyles = useRootIconOnlyStyles();\n  const iconStyles = useIconStyles();\n\n  const {\n    appearance,\n    // eslint-disable-next-line deprecation/deprecation\n    block,\n    disabled,\n    disabledFocusable,\n    iconOnly,\n    iconPosition,\n    shape,\n    size,\n  } = state;\n\n  state.root.className = mergeClasses(\n    buttonClassNames.root,\n\n    // Root styles\n    rootStyles.base,\n    rootStyles.highContrast,\n    block && rootStyles.block,\n    appearance && rootStyles[appearance],\n    rootStyles[size],\n    rootStyles[shape],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    (disabled || disabledFocusable) && rootDisabledStyles.highContrast,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // Focus styles\n    rootFocusStyles.base,\n    appearance === 'primary' && rootFocusStyles.primary,\n    rootFocusStyles[size],\n    rootFocusStyles[shape],\n\n    // Icon-only styles\n    iconOnly && rootIconOnlyStyles[size],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      buttonClassNames.icon,\n      iconStyles.base,\n      state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n      iconStyles[size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -5,22 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CompoundButton = void 0;
 
-var React = /*#__PURE__*/require("react");
+const React = /*#__PURE__*/require("react");
 
-var renderCompoundButton_1 = /*#__PURE__*/require("./renderCompoundButton");
+const renderCompoundButton_1 = /*#__PURE__*/require("./renderCompoundButton");
 
-var useCompoundButton_1 = /*#__PURE__*/require("./useCompoundButton");
+const useCompoundButton_1 = /*#__PURE__*/require("./useCompoundButton");
 
-var useCompoundButtonStyles_1 = /*#__PURE__*/require("./useCompoundButtonStyles");
+const useCompoundButtonStyles_1 = /*#__PURE__*/require("./useCompoundButtonStyles");
 /**
  * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
  */
 
 
-exports.CompoundButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useCompoundButton_1.useCompoundButton(props, ref);
-  useCompoundButtonStyles_1.useCompoundButtonStyles(state);
-  return renderCompoundButton_1.renderCompoundButton(state); // Casting is required due to lack of distributive union to support unions on @types/react
+exports.CompoundButton = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useCompoundButton_1.useCompoundButton_unstable(props, ref);
+  useCompoundButtonStyles_1.useCompoundButtonStyles_unstable(state);
+  return renderCompoundButton_1.renderCompoundButton_unstable(state); // Casting is required due to lack of distributive union to support unions on @types/react
 });
 exports.CompoundButton.displayName = 'CompoundButton';
 //# sourceMappingURL=CompoundButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,IAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,IAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,cAAA,gBAA2D,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAClG,MAAM,KAAK,GAAG,mBAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;AAEA,EAAA,yBAAA,CAAA,uBAAA,CAAwB,KAAxB;AAEA,SAAO,sBAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP,CALkG,CAMlG;AACD,CAPuE,CAA3D;AASb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourceRoot":""}
+{"version":3,"sources":["components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,cAAA,gBAA2D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtG,QAAM,KAAK,GAAG,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,GAAlC,CAAd;AAEA,EAAA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;AAEA,SAAO,sBAAA,CAAA,6BAAA,CAA8B,KAA9B,CAAP,CALsG,CAMtG;AACD,CAPuE,CAA3D;AASb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps } from './CompoundButton.types';\n\n/**\n * CompoundButtons are buttons that can have secondary content that adds extra information to the user.\n */\nexport const CompoundButton: ForwardRefComponent<CompoundButtonProps> = React.forwardRef((props, ref) => {\n  const state = useCompoundButton_unstable(props, ref);\n\n  useCompoundButtonStyles_unstable(state);\n\n  return renderCompoundButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<CompoundButtonProps>;\n\nCompoundButton.displayName = 'CompoundButton';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCompoundButtonStyles = void 0;
+exports.useCompoundButtonStyles_unstable = exports.compoundButtonClassNames = exports.compoundButtonClassName = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./CompoundButton"), exports);
 
@@ -16,11 +16,25 @@ tslib_1.__exportStar(require("./renderCompoundButton"), exports);
 tslib_1.__exportStar(require("./useCompoundButton"), exports);
 
 var useCompoundButtonStyles_1 = /*#__PURE__*/require("./useCompoundButtonStyles");
+/* eslint-disable-next-line deprecation/deprecation */
 
-Object.defineProperty(exports, "useCompoundButtonStyles", {
+
+Object.defineProperty(exports, "compoundButtonClassName", {
+  enumerable: true,
+  get: function () {
+    return useCompoundButtonStyles_1.compoundButtonClassName;
+  }
+});
+Object.defineProperty(exports, "compoundButtonClassNames", {
+  enumerable: true,
+  get: function () {
+    return useCompoundButtonStyles_1.compoundButtonClassNames;
+  }
+});
+Object.defineProperty(exports, "useCompoundButtonStyles_unstable", {
   enumerable: true,
   get: function () {
-    return useCompoundButtonStyles_1.useCompoundButtonStyles;
+    return useCompoundButtonStyles_1.useCompoundButtonStyles_unstable;
   }
 });
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CompoundButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,yBAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA","sourceRoot":""}
+{"version":3,"sources":["components/CompoundButton/index.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,IAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AACE;;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,yBAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,yBAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kCAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,yBAAA,CAAA,gCAAA;AAAgC;AAAhC,CAAA","sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './renderCompoundButton';\nexport * from './useCompoundButton';\nexport {\n  /* eslint-disable-next-line deprecation/deprecation */\n  compoundButtonClassName,\n  compoundButtonClassNames,\n  useCompoundButtonStyles_unstable,\n} from './useCompoundButtonStyles';\n"],"sourceRoot":"../src/"}

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

@@ -3,27 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderCompoundButton = void 0;
+exports.renderCompoundButton_unstable = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const React = /*#__PURE__*/require("react");
 
-var React = /*#__PURE__*/require("react");
-
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Renders a CompoundButton component by passing the state defined props to the appropriate slots.
  */
 
 
-var renderCompoundButton = function (state) {
-  var _a = react_utilities_1.getSlots(state, ['root', 'contentContainer', 'icon', 'secondaryContent']),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  var iconOnly = state.iconOnly,
-      iconPosition = state.iconPosition;
-  return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), iconPosition !== 'after' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)), !iconOnly && React.createElement(slots.contentContainer, tslib_1.__assign({}, slotProps.contentContainer), slotProps.root.children, React.createElement(slots.secondaryContent, tslib_1.__assign({}, slotProps.secondaryContent))), iconPosition === 'after' && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)));
+const renderCompoundButton_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  const {
+    iconOnly,
+    iconPosition
+  } = state;
+  return React.createElement(slots.root, { ...slotProps.root
+  }, iconPosition !== 'after' && slots.icon && React.createElement(slots.icon, { ...slotProps.icon
+  }), !iconOnly && React.createElement(slots.contentContainer, { ...slotProps.contentContainer
+  }, slotProps.root.children, slots.secondaryContent && React.createElement(slots.secondaryContent, { ...slotProps.secondaryContent
+  })), iconPosition === 'after' && slots.icon && React.createElement(slots.icon, { ...slotProps.icon
+  }));
 };
 
-exports.renderCompoundButton = renderCompoundButton;
+exports.renderCompoundButton_unstable = renderCompoundButton_unstable;
 //# sourceMappingURL=renderCompoundButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,oBAAoB,GAAG,UAAC,KAAD,EAA2B;AACvD,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAA8B,KAA9B,EAAqC,CAChE,MADgE,EAEhE,kBAFgE,EAGhE,MAHgE,EAIhE,kBAJgE,CAArC,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAME,MAAA,QAAQ,GAAmB,KAAK,CAAxB,QAAR;AAAA,MAAU,YAAY,GAAK,KAAK,CAAV,YAAtB;AAER,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAD/B,EAEG,CAAC,QAAD,IACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,gBAAf,CAAvB,CAFF,CAHJ,EAQG,YAAY,KAAK,OAAjB,IAA4B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,CAR/B,CADF;AAYD,CArBM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourceRoot":""}
+{"version":3,"sources":["components/CompoundButton/renderCompoundButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,6BAA6B,GAAI,KAAD,IAA+B;AAC1E,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAA8B,KAA9B,CAA7B;AACA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA;AAAZ,MAA6B,KAAnC;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,IAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAD7C,EAEG,CAAC,QAAD,IACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,EACG,SAAS,CAAC,IAAV,CAAe,QADlB,EAEG,KAAK,CAAC,gBAAN,IAA0B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,gBAAP,EAAuB,EAAA,GAAK,SAAS,CAAC;AAAf,GAAvB,CAF7B,CAHJ,EAQG,YAAY,KAAK,OAAjB,IAA4B,KAAK,CAAC,IAAlC,IAA0C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,CAR7C,CADF;AAYD,CAhBM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Renders a CompoundButton component by passing the state defined props to the appropriate slots.\n */\nexport const renderCompoundButton_unstable = (state: CompoundButtonState) => {\n  const { slots, slotProps } = getSlots<CompoundButtonSlots>(state);\n  const { iconOnly, iconPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n      {!iconOnly && (\n        <slots.contentContainer {...slotProps.contentContainer}>\n          {slotProps.root.children}\n          {slots.secondaryContent && <slots.secondaryContent {...slotProps.secondaryContent} />}\n        </slots.contentContainer>\n      )}\n      {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

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

@@ -3,13 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCompoundButton = void 0;
+exports.useCompoundButton_unstable = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-var index_1 = /*#__PURE__*/require("../Button/index");
+const index_1 = /*#__PURE__*/require("../Button/index");
 /**
  * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.
  * @param props - User provided props to the CompoundButton component.
@@ -17,12 +15,15 @@ var index_1 = /*#__PURE__*/require("../Button/index");
  */
 
 
-var useCompoundButton = function (_a, ref) {
-  var contentContainer = _a.contentContainer,
-      secondaryContent = _a.secondaryContent,
-      props = tslib_1.__rest(_a, ["contentContainer", "secondaryContent"]);
+const useCompoundButton_unstable = ({
+  contentContainer,
+  secondaryContent,
+  ...props
+}, ref) => {
+  var _a, _b;
 
-  return tslib_1.__assign(tslib_1.__assign({}, index_1.useButton(props, ref)), {
+  const state = { // Button state
+    ...index_1.useButton_unstable(props, ref),
     // Slots definition
     components: {
       root: 'button',
@@ -34,8 +35,11 @@ var useCompoundButton = function (_a, ref) {
       required: true
     }),
     secondaryContent: react_utilities_1.resolveShorthand(secondaryContent)
-  });
+  }; // Recalculate iconOnly to take into account secondaryContent.
+
+  state.iconOnly = Boolean(((_a = state.icon) === null || _a === void 0 ? void 0 : _a.children) && !props.children && !((_b = state.secondaryContent) === null || _b === void 0 ? void 0 : _b.children));
+  return state;
 };
 
-exports.useCompoundButton = useCompoundButton;
+exports.useCompoundButton_unstable = useCompoundButton_unstable;
 //# sourceMappingURL=useCompoundButton.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":";;;;;;;;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,IAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAEA;;;;AAIG;;;AACI,IAAM,iBAAiB,GAAG,UAC/B,EAD+B,EAE/B,GAF+B,EAEsB;AADnD,MAAA,gBAAgB,GAAA,EAAA,CAAA,gBAAhB;AAAA,MAAkB,gBAAgB,GAAA,EAAA,CAAA,gBAAlC;AAAA,MAAuC,KAAK,GAAA,OAAA,CAAA,MAAA,CAAA,EAAA,EAA9C,CAAA,kBAAA,EAAA,kBAAA,CAA8C,CAA5C;;AAGF,SAAA,OAAA,CAAA,QAAA,CAAA,OAAA,CAAA,QAAA,CAAA,EAAA,EAEK,OAAA,CAAA,SAAA,CAAU,KAAV,EAAiB,GAAjB,CAFL,CAAA,EAE0B;AAExB;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,gBAAgB,EAAE,MAHR;AAIV,MAAA,gBAAgB,EAAE;AAJR,KAHY;AASxB,IAAA,gBAAgB,EAAE,iBAAA,CAAA,gBAAA,CAAiB,gBAAjB,EAAmC;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAnC,CATM;AAUxB,IAAA,gBAAgB,EAAE,iBAAA,CAAA,gBAAA,CAAiB,gBAAjB;AAVM,GAF1B,CAAA;AAcD,CAlBM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourceRoot":""}
+{"version":3,"sources":["components/CompoundButton/useCompoundButton.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,0BAA0B,GAAG,CACxC;AAAE,EAAA,gBAAF;AAAoB,EAAA,gBAApB;AAAsC,KAAG;AAAzC,CADwC,EAExC,GAFwC,KAGjB;;;AACvB,QAAM,KAAK,GAAwB,EACjC;AACA,OAAG,OAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAF8B;AAIjC;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,QADI;AAEV,MAAA,IAAI,EAAE,MAFI;AAGV,MAAA,gBAAgB,EAAE,MAHR;AAIV,MAAA,gBAAgB,EAAE;AAJR,KALqB;AAWjC,IAAA,gBAAgB,EAAE,iBAAA,CAAA,gBAAA,CAAiB,gBAAjB,EAAmC;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAnC,CAXe;AAYjC,IAAA,gBAAgB,EAAE,iBAAA,CAAA,gBAAA,CAAiB,gBAAjB;AAZe,GAAnC,CADuB,CAgBvB;;AACA,EAAA,KAAK,CAAC,QAAN,GAAiB,OAAO,CAAC,CAAA,CAAA,EAAA,GAAA,KAAK,CAAC,IAAN,MAAU,IAAV,IAAU,EAAA,KAAA,KAAA,CAAV,GAAU,KAAA,CAAV,GAAU,EAAA,CAAE,QAAZ,KAAwB,CAAC,KAAK,CAAC,QAA/B,IAA2C,EAAC,CAAA,EAAA,GAAA,KAAK,CAAC,gBAAN,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,KAAA,CAAtB,GAAsB,EAAA,CAAE,QAAzB,CAA5C,CAAxB;AAEA,SAAO,KAAP;AACD,CAvBM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useButton_unstable } from '../Button/index';\nimport type { CompoundButtonProps, CompoundButtonState } from './CompoundButton.types';\n\n/**\n * Given user props, defines default props for the CompoundButton, calls useButtonState, and returns processed state.\n * @param props - User provided props to the CompoundButton component.\n * @param ref - User provided ref to be passed to the CompoundButton component.\n */\nexport const useCompoundButton_unstable = (\n  { contentContainer, secondaryContent, ...props }: CompoundButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): CompoundButtonState => {\n  const state: CompoundButtonState = {\n    // Button state\n    ...useButton_unstable(props, ref),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n      contentContainer: 'span',\n      secondaryContent: 'span',\n    },\n    contentContainer: resolveShorthand(contentContainer, { required: true }),\n    secondaryContent: resolveShorthand(secondaryContent),\n  };\n\n  // Recalculate iconOnly to take into account secondaryContent.\n  state.iconOnly = Boolean(state.icon?.children && !props.children && !state.secondaryContent?.children);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -3,115 +3,141 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useCompoundButtonStyles = void 0;
+exports.useCompoundButtonStyles_unstable = exports.compoundButtonClassName = exports.compoundButtonClassNames = void 0;
 
-var react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
-var useButtonStyles_1 = /*#__PURE__*/require("../Button/useButtonStyles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
 
-var CompoundButtonClassNames = {
-  secondaryContent: 'CompoundButton-secondaryContent'
+const useButtonStyles_1 = /*#__PURE__*/require("../Button/useButtonStyles");
+
+exports.compoundButtonClassNames = {
+  root: 'fui-CompoundButton',
+  icon: 'fui-CompoundButton__icon',
+  contentContainer: 'fui-CompoundButton__contentContainer',
+  secondaryContent: 'fui-CompoundButton__secondaryContent'
 };
+/**
+ * @deprecated Use `compoundButtonClassName.root` instead.
+ */
+
+exports.compoundButtonClassName = exports.compoundButtonClassNames.root;
 
-var useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useRootStyles = /*#__PURE__*/react_1.__styles({
   "base": {
-    "rmohyg": "fsbu5mz",
     "Bqenvij": "f11ysow2",
-    "Bekya5a": "f1smw4j4",
-    "Bi863bl": "f1b73140",
-    "B7j81dy": "f19sbf7w"
+    "B2u0y6b": "fheyfof",
+    "J657lq": "f1um431h",
+    "Jlnjib": "fte7hqw",
+    "Bc29nj9": "f1yh8ef3"
+  },
+  "highContrast": {
+    "pu7qz5": "fi3u9nm",
+    "B10010i": "f1tdgb9w"
   },
   "outline": {},
   "primary": {
-    "Bekya5a": "f1wrmfx5",
-    "Bi863bl": "fl6im4w",
-    "B7j81dy": "f1y0ndy"
+    "J657lq": "foe7gw6",
+    "Jlnjib": "fvxlz81",
+    "Bc29nj9": "f1c2mdy"
   },
+  "secondary": {},
   "subtle": {
-    "Bekya5a": "f1smw4j4",
-    "Bi863bl": "f182e9fe",
-    "B7j81dy": "fdrkfd0"
+    "J657lq": "f1um431h",
+    "Jlnjib": "f1wn9xqz",
+    "Bc29nj9": "f1a8q4d0"
   },
   "transparent": {
-    "Bekya5a": "f1smw4j4",
-    "Bi863bl": "f182e9fe",
-    "B7j81dy": "fdrkfd0"
+    "J657lq": "f1um431h",
+    "Jlnjib": "f1wn9xqz",
+    "Bc29nj9": "f1a8q4d0"
   },
   "small": {
-    "z8tnut": "fp9bwmr",
-    "z189sj": ["f19lj068", "f177v4lu"],
-    "Byoj8tv": "f150uoa4",
-    "uwmqm3": ["f177v4lu", "f19lj068"],
+    "z8tnut": "f17mpqex",
+    "z189sj": ["f1vdfbxk", "f1f5gg8d"],
+    "Byoj8tv": "f1quwm26",
+    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
     "Be2twd7": "fkhj508",
     "Bg96gwp": "f1i3iumi"
   },
   "medium": {
-    "z8tnut": "f1kcqot9",
-    "z189sj": ["f11qrl6u", "fjlbh76"],
-    "Byoj8tv": "fpe6lb7",
-    "uwmqm3": ["fjlbh76", "f11qrl6u"],
+    "z8tnut": "fbtff6s",
+    "z189sj": ["fw5db7e", "f1uw59to"],
+    "Byoj8tv": "flw3t2g",
+    "uwmqm3": ["f1uw59to", "fw5db7e"],
     "Be2twd7": "fkhj508",
     "Bg96gwp": "f1i3iumi"
   },
   "large": {
-    "z8tnut": "fqag9an",
-    "z189sj": ["f1gbmcue", "f1rh9g5y"],
-    "Byoj8tv": "fp67ikv",
-    "uwmqm3": ["f1rh9g5y", "f1gbmcue"],
+    "z8tnut": "fm4bm3s",
+    "z189sj": ["fjodcmx", "fhx4nu"],
+    "Byoj8tv": "fdt8xvx",
+    "uwmqm3": ["fhx4nu", "fjodcmx"],
     "Be2twd7": "fod5ikn",
     "Bg96gwp": "faaz57k"
   },
   "disabled": {
-    "Bekya5a": "f1ygg8x6",
-    "Bi863bl": "fhtktt2",
-    "B7j81dy": "f1v2jbe6"
+    "J657lq": "f1rlv8bf",
+    "Jlnjib": "fd1dbtm",
+    "Bc29nj9": "f1vqmdmi"
+  },
+  "disabledHighContrast": {
+    "B8ia98v": "f1csacz4",
+    "pu7qz5": "f1s5tkfe",
+    "B10010i": "fs0rda3"
   }
 }, {
-  "d": [".fsbu5mz{gap:12px;}", ".f11ysow2{height:auto;}", ".f1smw4j4 .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2);}", ".f1wrmfx5 .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1kcqot9{padding-top:12px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fpe6lb7{padding-bottom:12px;}", ".fqag9an{padding-top:16px;}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fp67ikv{padding-bottom:16px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1ygg8x6 .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
-  "h": [".f1b73140:hover .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2Hover);}", ".fl6im4w:hover .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".f182e9fe:hover .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2BrandHover);}", ".fhtktt2:hover .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"],
-  "a": [".f19sbf7w:active .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2Pressed);}", ".f1y0ndy:active .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundOnBrand);}", ".fdrkfd0:active .CompoundButton-secondaryContent{color:var(--colorNeutralForeground2BrandPressed);}", ".f1v2jbe6:active .CompoundButton-secondaryContent{color:var(--colorNeutralForegroundDisabled);}"]
+  "d": [".f11ysow2{height:auto;}", ".fheyfof{max-width:unset;}", ".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);}"],
+  "t": ["@media (forced-colors: active){.fi3u9nm:hover .fui-CompoundButton__secondaryContent{color:Highlight;}}", "@media (forced-colors: active){.f1tdgb9w:hover:active .fui-CompoundButton__secondaryContent{color:Highlight;}}", "@media (forced-colors: active){.f1csacz4 .fui-CompoundButton__secondaryContent{color:GrayText;}}", "@media (forced-colors: active){.f1s5tkfe:hover .fui-CompoundButton__secondaryContent{color:GrayText;}}", "@media (forced-colors: active){.fs0rda3:hover:active .fui-CompoundButton__secondaryContent{color:GrayText;}}"]
 });
 
-var useRootIconOnlyStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useRootIconOnlyStyles = /*#__PURE__*/react_1.__styles({
   "small": {
-    "z8tnut": "f10ra9hq",
-    "z189sj": ["f8wuabp", "fycuoez"],
-    "Byoj8tv": "f1y2xyjm",
-    "uwmqm3": ["fycuoez", "f8wuabp"],
+    "z8tnut": "f1x4af0m",
+    "z189sj": ["f7x41pl", "fruq291"],
+    "Byoj8tv": "fd55psn",
+    "uwmqm3": ["fruq291", "f7x41pl"],
     "B2u0y6b": "ft5vyj6",
     "Bf4jedk": "f17suaiq"
   },
   "medium": {
-    "z8tnut": "f1xp5gbu",
-    "z189sj": ["f1sgzk6v", "f1bg5zqg"],
-    "Byoj8tv": "f1d7kygh",
-    "uwmqm3": ["f1bg5zqg", "f1sgzk6v"],
+    "z8tnut": "f16k8034",
+    "z189sj": ["fdw0yi8", "fk8j09s"],
+    "Byoj8tv": "f1angvds",
+    "uwmqm3": ["fk8j09s", "fdw0yi8"],
     "B2u0y6b": "fdczgix",
     "Bf4jedk": "fjdcg9m"
   },
   "large": {
-    "z8tnut": "fp9bwmr",
-    "z189sj": ["f19lj068", "f177v4lu"],
-    "Byoj8tv": "f150uoa4",
-    "uwmqm3": ["f177v4lu", "f19lj068"],
+    "z8tnut": "f17mpqex",
+    "z189sj": ["f1vdfbxk", "f1f5gg8d"],
+    "Byoj8tv": "fdvome7",
+    "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
     "B2u0y6b": "fww51uw",
     "Bf4jedk": "f1qhsl2h"
   }
 }, {
-  "d": [".f10ra9hq{padding-top:4px;}", ".f8wuabp{padding-right:4px;}", ".fycuoez{padding-left:4px;}", ".f1y2xyjm{padding-bottom:4px;}", ".ft5vyj6{max-width:48px;}", ".f17suaiq{min-width:48px;}", ".f1xp5gbu{padding-top:6px;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1d7kygh{padding-bottom:6px;}", ".fdczgix{max-width:52px;}", ".fjdcg9m{min-width:52px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".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;}"]
 });
 
-var useIconStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useIconStyles = /*#__PURE__*/react_1.__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;}"]
+  "d": [".fndrnj9{font-size:40px;}", ".fbhnoac{height:40px;}", ".feqmc2u{width:40px;}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}"]
 });
 
-var useContentContainerStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useContentContainerStyles = /*#__PURE__*/react_1.__styles({
   "base": {
     "mc9l5x": "f22iagw",
     "Beiy3e4": "f1vx9l62",
@@ -121,10 +147,9 @@ var useContentContainerStyles = /*#__PURE__*/react_make_styles_1.__styles({
   "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;}"]
 });
 
-var useSecondaryContentStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useSecondaryContentStyles = /*#__PURE__*/react_1.__styles({
   "base": {
     "Bg96gwp": "flkuc6h",
-    "B6of3ja": "fvjh0tl",
     "Bhrd7zp": "figsok6"
   },
   "small": {
@@ -137,39 +162,41 @@ var useSecondaryContentStyles = /*#__PURE__*/react_make_styles_1.__styles({
     "Be2twd7": "fkhj508"
   }
 }, {
-  "d": [".flkuc6h{line-height:100%;}", ".fvjh0tl{margin-top:4px;}", ".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);}"]
 });
 
-var useCompoundButtonStyles = function (state) {
-  var rootStyles = useRootStyles();
-  var rootIconOnlyStyles = useRootIconOnlyStyles();
-  var iconStyles = useIconStyles();
-  var contentContainerStyles = useContentContainerStyles();
-  var secondaryContentStyles = useSecondaryContentStyles();
-  var appearance = state.appearance,
-      disabled = state.disabled,
-      disabledFocusable = state.disabledFocusable,
-      iconOnly = state.iconOnly,
-      size = state.size;
-  state.root.className = react_make_styles_1.mergeClasses( // Root styles
-  rootStyles.base, appearance && rootStyles[appearance], rootStyles[size], // Disabled styles
-  (disabled || disabledFocusable) && rootStyles.disabled, // Icon-only styles
+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_make_styles_1.mergeClasses(iconStyles.base, state.icon.className);
+    state.icon.className = react_1.mergeClasses(exports.compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);
   }
 
-  state.contentContainer.className = react_make_styles_1.mergeClasses(contentContainerStyles.base, state.contentContainer.className);
-
   if (state.secondaryContent) {
-    state.secondaryContent.className = react_make_styles_1.mergeClasses(CompoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
+    state.secondaryContent.className = react_1.mergeClasses(exports.compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
   }
 
-  useButtonStyles_1.useButtonStyles(state);
+  useButtonStyles_1.useButtonStyles_unstable(state);
   return state;
 };
 
-exports.useCompoundButtonStyles = useCompoundButtonStyles;
+exports.useCompoundButtonStyles_unstable = useCompoundButtonStyles_unstable;
 //# sourceMappingURL=useCompoundButtonStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
+{"version":3,"sources":["components/CompoundButton/useCompoundButtonStyles.ts"],"names":[],"mappings":"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","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\n/**\n * @deprecated Use `compoundButtonClassName.root` instead.\n */\nexport const compoundButtonClassName = compoundButtonClassNames.root;\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    height: 'auto',\n    maxWidth: 'unset',\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  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.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& .${compoundButtonClassNames.secondaryContent}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\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"],"sourceRoot":"../src/"}