@fluentui/react-button 9.1.8 → 9.1.9

package/lib/components/ToggleButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,sBAAsB,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/ToggleButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,sBAAsB,EAAE,8BAA8B,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export * from './ToggleButton';\nexport * from './ToggleButton.types';\nexport * from './renderToggleButton';\nexport * from './useToggleButton';\nexport { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';\n"]}

package/lib/components/ToggleButton/renderToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderToggleButton.js","sourceRoot":"../src/","sources":["components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,2BAA2B,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"]}
+{"version":3,"file":"renderToggleButton.js","sourceRoot":"../src/","sources":["packages/react-components/react-button/src/components/ToggleButton/renderToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,IAAI,2BAA2B,EAAE,MAAM,wBAAwB,CAAC","sourcesContent":["export { renderButton_unstable as renderToggleButton_unstable } from '../Button/renderButton';\n"]}

package/lib/components/ToggleButton/useToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,QAA+B,4BAA/B;AACA,SAAS,kBAAT,QAAmC,qBAAnC;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CACtC,KADsC,EAEtC,GAFsC,KAGjB;EACrB,MAAM,WAAW,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAtC;EAEA,OAAO,cAAc,CAAC,KAAD,EAAQ,WAAR,CAArB;AACD,CAPM","sourcesContent":["import * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable } from '../Button/useButton';\nimport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n  const buttonState = useButton_unstable(props, ref);\n\n  return useToggleState(props, buttonState);\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-button/src/components/ToggleButton/useToggleButton.ts"],"names":[],"mappings":"AACA,SAAS,cAAT,QAA+B,4BAA/B;AACA,SAAS,kBAAT,QAAmC,qBAAnC;AAGA;;;;;AAKG;;AACH,OAAO,MAAM,wBAAwB,GAAG,CACtC,KADsC,EAEtC,GAFsC,KAGjB;EACrB,MAAM,WAAW,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAtC;EAEA,OAAO,cAAc,CAAC,KAAD,EAAQ,WAAR,CAArB;AACD,CAPM","sourcesContent":["import * as React from 'react';\nimport { useToggleState } from '../../utils/useToggleState';\nimport { useButton_unstable } from '../Button/useButton';\nimport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton.types';\n\n/**\n * Given user props, defines default props for the ToggleButton, calls useButtonState and useChecked, and returns\n * processed state.\n * @param props - User provided props to the ToggleButton component.\n * @param ref - User provided ref to be passed to the ToggleButton component.\n */\nexport const useToggleButton_unstable = (\n  props: ToggleButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ToggleButtonState => {\n  const buttonState = useButton_unstable(props, ref);\n\n  return useToggleState(props, buttonState);\n};\n"],"sourceRoot":"../src/"}

package/lib/components/ToggleButton/useToggleButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/ToggleButton/useToggleButtonStyles.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, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-ToggleButton',\n  icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    color: tokens.colorNeutralForeground1Selected,\n\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('Highlight'),\n      color: 'HighlightText',\n      forcedColorAdjust: 'none',\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':focus': {\n        ...shorthands.borderColor('Highlight'),\n      },\n    },\n  },\n  highContrastFocusStyles: createCustomFocusIndicatorStyle({\n    ...shorthands.border('1px', 'solid', 'HighlightText'),\n    outlineColor: 'Highlight',\n  }),\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n\n    ...createCustomFocusIndicatorStyle({\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    }),\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\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.colorSubtleBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2Selected,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2BrandSelected,\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\nconst useRootDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useIconCheckedStyles = makeStyles({\n  // Appearance variations\n  subtleOrTransparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n  const rootCheckedStyles = useRootCheckedStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const iconCheckedStyles = useIconCheckedStyles();\n\n  const { appearance, checked, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    toggleButtonClassNames.root,\n\n    // Checked styles\n    checked && rootCheckedStyles.base,\n    checked && rootCheckedStyles.highContrast,\n    appearance && checked && rootCheckedStyles[appearance],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      toggleButtonClassNames.icon,\n      (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n      state.icon.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-button/src/components/ToggleButton/useToggleButtonStyles.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, mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots } from '../Button/Button.types';\nimport type { ToggleButtonState } from './ToggleButton.types';\n\nexport const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {\n  root: 'fui-ToggleButton',\n  icon: 'fui-ToggleButton__icon',\n};\n\nconst useRootCheckedStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackground1Selected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    color: tokens.colorNeutralForeground1Selected,\n\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n\n    [`& .${iconFilledClassName}`]: {\n      display: 'inline',\n    },\n    [`& .${iconRegularClassName}`]: {\n      display: 'none',\n    },\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      color: tokens.colorNeutralForeground1Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      color: tokens.colorNeutralForeground1Pressed,\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n      ...shorthands.borderColor('Highlight'),\n      color: 'HighlightText',\n      forcedColorAdjust: 'none',\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n      },\n\n      ':focus': {\n        ...shorthands.borderColor('Highlight'),\n      },\n    },\n  },\n  highContrastFocusStyles: createCustomFocusIndicatorStyle({\n    ...shorthands.border('1px', 'solid', 'HighlightText'),\n    outlineColor: 'Highlight',\n  }),\n\n  // Appearance variations\n  outline: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    ...shorthands.borderWidth(tokens.strokeWidthThicker),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n    },\n\n    ...createCustomFocusIndicatorStyle({\n      ...shorthands.borderColor(tokens.colorNeutralStroke1),\n    }),\n  },\n  primary: {\n    backgroundColor: tokens.colorBrandBackgroundSelected,\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.colorSubtleBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2Selected,\n\n    ':hover': {\n      backgroundColor: tokens.colorSubtleBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Hover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Pressed,\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackgroundSelected,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2BrandSelected,\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\nconst useRootDisabledStyles = makeStyles({\n  // Base styles\n  base: {\n    backgroundColor: tokens.colorNeutralBackgroundDisabled,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Appearance variations\n  outline: {\n    /* No styles */\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useIconCheckedStyles = makeStyles({\n  // Appearance variations\n  subtleOrTransparent: {\n    color: tokens.colorNeutralForeground2BrandSelected,\n  },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n  const rootCheckedStyles = useRootCheckedStyles();\n  const rootDisabledStyles = useRootDisabledStyles();\n  const iconCheckedStyles = useIconCheckedStyles();\n\n  const { appearance, checked, disabled, disabledFocusable } = state;\n\n  state.root.className = mergeClasses(\n    toggleButtonClassNames.root,\n\n    // Checked styles\n    checked && rootCheckedStyles.base,\n    checked && rootCheckedStyles.highContrast,\n    appearance && checked && rootCheckedStyles[appearance],\n\n    // Disabled styles\n    (disabled || disabledFocusable) && rootDisabledStyles.base,\n    appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n    // User provided class name\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      toggleButtonClassNames.icon,\n      (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n      state.icon.className,\n    );\n  }\n\n  useButtonStyles_unstable(state);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,gBAFF,EAGE,qBAHF,EAIE,wBAJF,EAKE,kBALF,QAMO,UANP;AAQA,SACE,cADF,EAEE,wBAFF,EAGE,6BAHF,EAIE,gCAJF,EAKE,0BALF,QAMO,kBANP;AAQA,SACE,UADF,EAEE,oBAFF,EAGE,yBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP;AAQA,SACE,WADF,EAEE,0BAFF,EAGE,qBAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP;AAQA,SACE,YADF,EAEE,2BAFF,EAGE,sBAHF,EAIE,8BAJF,EAKE,wBALF,QAMO,gBANP;AASA,SAAS,cAAT,QAA+B,eAA/B","sourcesContent":["export {\n  Button,\n  buttonClassNames,\n  renderButton_unstable,\n  useButtonStyles_unstable,\n  useButton_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button';\nexport {\n  CompoundButton,\n  compoundButtonClassNames,\n  renderCompoundButton_unstable,\n  useCompoundButtonStyles_unstable,\n  useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n  MenuButton,\n  menuButtonClassNames,\n  renderMenuButton_unstable,\n  useMenuButtonStyles_unstable,\n  useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n  SplitButton,\n  renderSplitButton_unstable,\n  splitButtonClassNames,\n  useSplitButtonStyles_unstable,\n  useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n  ToggleButton,\n  renderToggleButton_unstable,\n  toggleButtonClassNames,\n  useToggleButtonStyles_unstable,\n  useToggleButton_unstable,\n} from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-button/src/index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,gBAFF,EAGE,qBAHF,EAIE,wBAJF,EAKE,kBALF,QAMO,UANP;AAQA,SACE,cADF,EAEE,wBAFF,EAGE,6BAHF,EAIE,gCAJF,EAKE,0BALF,QAMO,kBANP;AAQA,SACE,UADF,EAEE,oBAFF,EAGE,yBAHF,EAIE,4BAJF,EAKE,sBALF,QAMO,cANP;AAQA,SACE,WADF,EAEE,0BAFF,EAGE,qBAHF,EAIE,6BAJF,EAKE,uBALF,QAMO,eANP;AAQA,SACE,YADF,EAEE,2BAFF,EAGE,sBAHF,EAIE,8BAJF,EAKE,wBALF,QAMO,gBANP;AASA,SAAS,cAAT,QAA+B,eAA/B","sourcesContent":["export {\n  Button,\n  buttonClassNames,\n  renderButton_unstable,\n  useButtonStyles_unstable,\n  useButton_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button';\nexport {\n  CompoundButton,\n  compoundButtonClassNames,\n  renderCompoundButton_unstable,\n  useCompoundButtonStyles_unstable,\n  useCompoundButton_unstable,\n} from './CompoundButton';\nexport type { CompoundButtonProps, CompoundButtonSlots, CompoundButtonState } from './CompoundButton';\nexport {\n  MenuButton,\n  menuButtonClassNames,\n  renderMenuButton_unstable,\n  useMenuButtonStyles_unstable,\n  useMenuButton_unstable,\n} from './MenuButton';\nexport type { MenuButtonProps, MenuButtonSlots, MenuButtonState } from './MenuButton';\nexport {\n  SplitButton,\n  renderSplitButton_unstable,\n  splitButtonClassNames,\n  useSplitButtonStyles_unstable,\n  useSplitButton_unstable,\n} from './SplitButton';\nexport type { SplitButtonProps, SplitButtonSlots, SplitButtonState } from './SplitButton';\nexport {\n  ToggleButton,\n  renderToggleButton_unstable,\n  toggleButtonClassNames,\n  useToggleButtonStyles_unstable,\n  useToggleButton_unstable,\n} from './ToggleButton';\nexport type { ToggleButtonProps, ToggleButtonState } from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n"],"sourceRoot":"../src/"}

package/lib/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './useToggleState';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-button/src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './useToggleState';\n"]}

package/lib/utils/useToggleState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/useToggleState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,EAAyB,oBAAzB,EAA+C,gBAA/C,QAAuE,2BAAvE;AAIA,OAAM,SAAU,cAAV,CAIJ,KAJI,EAIuB,KAJvB,EAI0C;EAC9C,MAAM;IAAE,OAAF;IAAW,cAAX;IAA2B,QAA3B;IAAqC;EAArC,IAA2D,KAAjE;EACA,MAAM;IAAE,OAAF;IAAW;EAAX,IAAoB,KAAK,CAAC,IAAhC;EAEA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;IAC3D,KAAK,EAAE,OADoD;IAE3D,YAAY,EAAE,cAF6C;IAG3D,YAAY,EAAE;EAH6C,CAAD,CAA5D;EAMA,MAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;EAEA,MAAM,aAAa,GAAG,KAAK,CAAC,WAAN,CACpB,EAAE,IAAG;IACH,IAAI,CAAC,QAAD,IAAa,CAAC,iBAAlB,EAAqC;MACnC,IAAI,EAAE,CAAC,gBAAP,EAAyB;QACvB;MACD;;MAED,eAAe,CAAC,CAAC,YAAF,CAAf;IACD;EACF,CATmB,EAUpB,CAAC,YAAD,EAAe,QAAf,EAAyB,iBAAzB,EAA4C,eAA5C,CAVoB,CAAtB;EAaA,OAAO,EACL,GAAG,KADE;IAGL,OAAO,EAAE,YAHJ;IAKL,IAAI,EAAE,EACJ,GAAG,KAAK,CAAC,IADL;MAEJ,CAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,GAAwD,YAFpD;MAGJ,OAAO,EAAE,gBAAgB,CACvB,cAAc,CAAC,OAAD,EAA4E,aAA5E,CADS;IAHrB;EALD,CAAP;AAaD","sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n  TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable'>,\n  TButtonState extends Pick<ButtonState, 'root'>,\n  TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root'>\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n  const { checked, defaultChecked, disabled, disabledFocusable } = props;\n  const { onClick, role } = state.root;\n\n  const [checkedValue, setCheckedValue] = useControllableState({\n    state: checked,\n    defaultState: defaultChecked,\n    initialState: false,\n  });\n\n  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n  const onToggleClick = React.useCallback(\n    ev => {\n      if (!disabled && !disabledFocusable) {\n        if (ev.defaultPrevented) {\n          return;\n        }\n\n        setCheckedValue(!checkedValue);\n      }\n    },\n    [checkedValue, disabled, disabledFocusable, setCheckedValue],\n  );\n\n  return {\n    ...state,\n\n    checked: checkedValue,\n\n    root: {\n      ...state.root,\n      [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n      onClick: useEventCallback(\n        mergeCallbacks(onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>, onToggleClick),\n      ),\n    },\n  } as TToggleButtonState;\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-button/src/utils/useToggleState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,EAAyB,oBAAzB,EAA+C,gBAA/C,QAAuE,2BAAvE;AAIA,OAAM,SAAU,cAAV,CAIJ,KAJI,EAIuB,KAJvB,EAI0C;EAC9C,MAAM;IAAE,OAAF;IAAW,cAAX;IAA2B,QAA3B;IAAqC;EAArC,IAA2D,KAAjE;EACA,MAAM;IAAE,OAAF;IAAW;EAAX,IAAoB,KAAK,CAAC,IAAhC;EAEA,MAAM,CAAC,YAAD,EAAe,eAAf,IAAkC,oBAAoB,CAAC;IAC3D,KAAK,EAAE,OADoD;IAE3D,YAAY,EAAE,cAF6C;IAG3D,YAAY,EAAE;EAH6C,CAAD,CAA5D;EAMA,MAAM,kBAAkB,GAAG,IAAI,KAAK,kBAAT,IAA+B,IAAI,KAAK,UAAnE;EAEA,MAAM,aAAa,GAAG,KAAK,CAAC,WAAN,CACpB,EAAE,IAAG;IACH,IAAI,CAAC,QAAD,IAAa,CAAC,iBAAlB,EAAqC;MACnC,IAAI,EAAE,CAAC,gBAAP,EAAyB;QACvB;MACD;;MAED,eAAe,CAAC,CAAC,YAAF,CAAf;IACD;EACF,CATmB,EAUpB,CAAC,YAAD,EAAe,QAAf,EAAyB,iBAAzB,EAA4C,eAA5C,CAVoB,CAAtB;EAaA,OAAO,EACL,GAAG,KADE;IAGL,OAAO,EAAE,YAHJ;IAKL,IAAI,EAAE,EACJ,GAAG,KAAK,CAAC,IADL;MAEJ,CAAC,kBAAkB,GAAG,cAAH,GAAoB,cAAvC,GAAwD,YAFpD;MAGJ,OAAO,EAAE,gBAAgB,CACvB,cAAc,CAAC,OAAD,EAA4E,aAA5E,CADS;IAHrB;EALD,CAAP;AAaD","sourcesContent":["import * as React from 'react';\nimport { mergeCallbacks, useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport type { ButtonState } from '../Button';\nimport type { ToggleButtonProps, ToggleButtonState } from '../ToggleButton';\n\nexport function useToggleState<\n  TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable'>,\n  TButtonState extends Pick<ButtonState, 'root'>,\n  TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root'>\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n  const { checked, defaultChecked, disabled, disabledFocusable } = props;\n  const { onClick, role } = state.root;\n\n  const [checkedValue, setCheckedValue] = useControllableState({\n    state: checked,\n    defaultState: defaultChecked,\n    initialState: false,\n  });\n\n  const isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n\n  const onToggleClick = React.useCallback(\n    ev => {\n      if (!disabled && !disabledFocusable) {\n        if (ev.defaultPrevented) {\n          return;\n        }\n\n        setCheckedValue(!checkedValue);\n      }\n    },\n    [checkedValue, disabled, disabledFocusable, setCheckedValue],\n  );\n\n  return {\n    ...state,\n\n    checked: checkedValue,\n\n    root: {\n      ...state.root,\n      [isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,\n      onClick: useEventCallback(\n        mergeCallbacks(onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>, onToggleClick),\n      ),\n    },\n  } as TToggleButtonState;\n}\n"],"sourceRoot":"../src/"}

package/lib-amd/Button.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Button/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Button.js.map

package/lib-amd/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-button/src/Button.tsx"],"names":[],"mappings":";;;IAAA,uCAA0C","sourcesContent":["export * from './components/Button/index';\n"]}

package/lib-amd/CompoundButton.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/CompoundButton/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=CompoundButton.js.map

package/lib-amd/CompoundButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompoundButton.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-button/src/CompoundButton.ts"],"names":[],"mappings":";;;IAAA,uCAAkD","sourcesContent":["export * from './components/CompoundButton/index';\n"]}

package/lib-amd/MenuButton.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/MenuButton/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=MenuButton.js.map

package/lib-amd/MenuButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuButton.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-button/src/MenuButton.ts"],"names":[],"mappings":";;;IAAA,uCAA8C","sourcesContent":["export * from './components/MenuButton/index';\n"]}

package/lib-amd/SplitButton.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/SplitButton/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=SplitButton.js.map

package/lib-amd/SplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-button/src/SplitButton.ts"],"names":[],"mappings":";;;IAAA,uCAA+C","sourcesContent":["export * from './components/SplitButton/index';\n"]}

package/lib-amd/ToggleButton.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/ToggleButton/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=ToggleButton.js.map

package/lib-amd/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-button/src/ToggleButton.ts"],"names":[],"mappings":";;;IAAA,uCAAgD","sourcesContent":["export * from './components/ToggleButton/index';\n"]}

package/lib-amd/components/Button/Button.js

@@ -0,0 +1,16 @@
+define(["require", "exports", "react", "./renderButton", "./useButton", "./useButtonStyles"], function (require, exports, React, renderButton_1, useButton_1, useButtonStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Button = void 0;
+    /**
+     * Buttons give people a way to trigger an action.
+     */
+    exports.Button = React.forwardRef(function (props, ref) {
+        var state = useButton_1.useButton_unstable(props, ref);
+        useButtonStyles_1.useButtonStyles_unstable(state);
+        return renderButton_1.renderButton_unstable(state);
+        // Casting is required due to lack of distributive union to support unions on @types/react
+    });
+    exports.Button.displayName = 'Button';
+});
+//# sourceMappingURL=Button.js.map

package/lib-amd/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/Button.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,MAAM,GAAqC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAClF,IAAM,KAAK,GAAG,8BAAkB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE7C,0CAAwB,CAAC,KAAK,CAAC,CAAC;QAEhC,OAAO,oCAAqB,CAAC,KAAK,CAAC,CAAC;QACpC,0FAA0F;IAC5F,CAAC,CAAqC,CAAC;IAEvC,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import * as React from 'react';\nimport { renderButton_unstable } from './renderButton';\nimport { useButton_unstable } from './useButton';\nimport { useButtonStyles_unstable } from './useButtonStyles';\nimport type { ButtonProps } from './Button.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Buttons give people a way to trigger an action.\n */\nexport const Button: ForwardRefComponent<ButtonProps> = React.forwardRef((props, ref) => {\n  const state = useButton_unstable(props, ref);\n\n  useButtonStyles_unstable(state);\n\n  return renderButton_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ButtonProps>;\n\nButton.displayName = 'Button';\n"]}

package/lib-amd/components/Button/Button.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=Button.types.js.map

package/lib-amd/components/Button/Button.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/Button.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ButtonSlots = {\n  /**\n   * Root of the component that renders as either a `<button>` tag or an `<a>` tag.\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n\n  /**\n   * Icon that renders either before or after the `children` as specified by the `iconPosition` prop.\n   */\n  icon?: Slot<'span'>;\n};\n\nexport type ButtonProps = ComponentProps<ButtonSlots> & {\n  /**\n   * A button can have its content and borders styled for greater emphasis or to be subtle.\n   * - 'secondary' (default): Gives emphasis to the button in such a way that it indicates a secondary action.\n   * - 'primary': Emphasizes the button as a primary action.\n   * - 'outline': Removes background styling.\n   * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n   * - 'transparent': Removes background and border styling.\n   *\n   * @default 'secondary'\n   */\n  appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';\n\n  /**\n   * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it\n   * is important to keep a consistent tab order for screen reader and keyboard users. The primary example of this\n   * pattern is when the disabled button is in a menu or a commandbar and is seldom used for standalone buttons.\n   *\n   * @default false\n   */\n  disabledFocusable?: boolean;\n\n  /**\n   * A button can show that it cannot be interacted with.\n   *\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * A button can format its icon to appear before or after its content.\n   *\n   * @default 'before'\n   */\n  iconPosition?: 'before' | 'after';\n\n  /**\n   * A button can be rounded, circular, or square.\n   *\n   * @default 'rounded'\n   */\n  shape?: 'rounded' | 'circular' | 'square';\n\n  /**\n   * A button supports different sizes.\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\nexport type ButtonState = ComponentState<ButtonSlots> &\n  Required<Pick<ButtonProps, 'appearance' | 'disabledFocusable' | 'disabled' | 'iconPosition' | 'shape' | 'size'>> & {\n    /**\n     * A button can contain only an icon.\n     *\n     * @default false\n     */\n    iconOnly: boolean;\n  };\n"]}

package/lib-amd/components/Button/index.js

@@ -0,0 +1,11 @@
+define(["require", "exports", "tslib", "./Button", "./renderButton", "./useButton", "./useButtonStyles"], function (require, exports, tslib_1, Button_1, renderButton_1, useButton_1, useButtonStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useButtonStyles_unstable = exports.buttonClassNames = void 0;
+    tslib_1.__exportStar(Button_1, exports);
+    tslib_1.__exportStar(renderButton_1, exports);
+    tslib_1.__exportStar(useButton_1, exports);
+    Object.defineProperty(exports, "buttonClassNames", { enumerable: true, get: function () { return useButtonStyles_1.buttonClassNames; } });
+    Object.defineProperty(exports, "useButtonStyles_unstable", { enumerable: true, get: function () { return useButtonStyles_1.useButtonStyles_unstable; } });
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/components/Button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/index.ts"],"names":[],"mappings":";;;;IAAA,wCAAyB;IAGzB,8CAA+B;IAC/B,2CAA4B;IACnB,mHAAA,gBAAgB,OAAA;IAAE,2HAAA,wBAAwB,OAAA","sourcesContent":["export * from './Button';\n// Explicit exports to omit ButtonCommons\nexport type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';\nexport * from './renderButton';\nexport * from './useButton';\nexport { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles';\n"]}

package/lib-amd/components/Button/renderButton.js

@@ -0,0 +1,18 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderButton_unstable = void 0;
+    /**
+     * Renders a Button component by passing the state defined props to the appropriate slots.
+     */
+    var renderButton_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), 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' && slots.icon && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon)),
+            !iconOnly && state.root.children,
+            iconPosition === 'after' && slots.icon && React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon))));
+    };
+    exports.renderButton_unstable = renderButton_unstable;
+});
+//# sourceMappingURL=renderButton.js.map

package/lib-amd/components/Button/renderButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/renderButton.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,qBAAqB,GAAG,UAAC,KAAkB;QAChD,IAAA,KAAuB,0BAAQ,CAAc,KAAK,CAAC,EAAjD,KAAK,WAAA,EAAE,SAAS,eAAiC,CAAC;QAClD,IAAA,QAAQ,GAAmB,KAAK,SAAxB,EAAE,YAAY,GAAK,KAAK,aAAV,CAAW;QAEzC,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,YAAY,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI;YAC5E,CAAC,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ;YAChC,YAAY,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CAClE,CACd,CAAC;IACJ,CAAC,CAAC;IAXW,QAAA,qBAAqB,yBAWhC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\n/**\n * Renders a Button component by passing the state defined props to the appropriate slots.\n */\nexport const renderButton_unstable = (state: ButtonState) => {\n  const { slots, slotProps } = getSlots<ButtonSlots>(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 && state.root.children}\n      {iconPosition === 'after' && slots.icon && <slots.icon {...slotProps.icon} />}\n    </slots.root>\n  );\n};\n"]}

package/lib-amd/components/Button/useButton.js

@@ -0,0 +1,40 @@
+define(["require", "exports", "@fluentui/react-aria", "@fluentui/react-utilities"], function (require, exports, react_aria_1, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useButton_unstable = void 0;
+    /**
+     * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.
+     * @param props - User provided props to the Button component.
+     * @param ref - User provided ref to be passed to the Button component.
+     */
+    var useButton_unstable = function (props, ref) {
+        var _a = props.appearance, appearance = _a === void 0 ? 'secondary' : _a, _b = props.as, as = _b === void 0 ? 'button' : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, _d = props.disabledFocusable, disabledFocusable = _d === void 0 ? false : _d, icon = props.icon, _e = props.iconPosition, iconPosition = _e === void 0 ? 'before' : _e, _f = props.shape, shape = _f === void 0 ? 'rounded' : _f, _g = props.size, size = _g === void 0 ? 'medium' : _g;
+        var iconShorthand = react_utilities_1.resolveShorthand(icon);
+        return {
+            // Props passed at the top-level
+            appearance: appearance,
+            disabled: disabled,
+            disabledFocusable: disabledFocusable,
+            iconPosition: iconPosition,
+            shape: shape,
+            size: size,
+            // State calculated from a set of props
+            iconOnly: Boolean((iconShorthand === null || iconShorthand === void 0 ? void 0 : iconShorthand.children) && !props.children),
+            // Slots definition
+            components: {
+                root: 'button',
+                icon: 'span',
+            },
+            root: react_utilities_1.getNativeElementProps(as, react_aria_1.useARIAButtonShorthand(props, {
+                required: true,
+                defaultProps: {
+                    ref: ref,
+                    type: 'button',
+                },
+            })),
+            icon: iconShorthand,
+        };
+    };
+    exports.useButton_unstable = useButton_unstable;
+});
+//# sourceMappingURL=useButton.js.map

package/lib-amd/components/Button/useButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/Button/useButton.ts"],"names":[],"mappings":";;;;IAKA;;;;OAIG;IACI,IAAM,kBAAkB,GAAG,UAChC,KAAkB,EAClB,GAAqD;QAGnD,IAAA,KAQE,KAAK,WARiB,EAAxB,UAAU,mBAAG,WAAW,KAAA,EACxB,KAOE,KAAK,GAPM,EAAb,EAAE,mBAAG,QAAQ,KAAA,EACb,KAME,KAAK,SANS,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAKE,KAAK,kBALkB,EAAzB,iBAAiB,mBAAG,KAAK,KAAA,EACzB,IAAI,GAIF,KAAK,KAJH,EACJ,KAGE,KAAK,aAHgB,EAAvB,YAAY,mBAAG,QAAQ,KAAA,EACvB,KAEE,KAAK,MAFU,EAAjB,KAAK,mBAAG,SAAS,KAAA,EACjB,KACE,KAAK,KADQ,EAAf,IAAI,mBAAG,QAAQ,KAAA,CACP;QACV,IAAM,aAAa,GAAG,kCAAgB,CAAC,IAAI,CAAC,CAAC;QAE7C,OAAO;YACL,gCAAgC;YAChC,UAAU,YAAA;YACV,QAAQ,UAAA;YACR,iBAAiB,mBAAA;YACjB,YAAY,cAAA;YACZ,KAAK,OAAA;YACL,IAAI,MAAA;YAEJ,uCAAuC;YACvC,QAAQ,EAAE,OAAO,CAAC,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,QAAQ,KAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;YAE7D,mBAAmB;YACnB,UAAU,EAAE;gBACV,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,MAAM;aACb;YAED,IAAI,EAAE,uCAAqB,CACzB,EAAE,EACF,mCAAsB,CAA2B,KAAK,EAAE;gBACtD,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE;oBACZ,GAAG,EAAE,GAAuD;oBAC5D,IAAI,EAAE,QAAQ;iBACf;aACF,CAAC,CACH;YACD,IAAI,EAAE,aAAa;SACpB,CAAC;IACJ,CAAC,CAAC;IA9CW,QAAA,kBAAkB,sBA8C7B","sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonState } from './Button.types';\n\n/**\n * Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n  props: ButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): ButtonState => {\n  const {\n    appearance = 'secondary',\n    as = 'button',\n    disabled = false,\n    disabledFocusable = false,\n    icon,\n    iconPosition = 'before',\n    shape = 'rounded',\n    size = 'medium',\n  } = props;\n  const iconShorthand = resolveShorthand(icon);\n\n  return {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    iconPosition,\n    shape,\n    size,\n\n    // State calculated from a set of props\n    iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n    // Slots definition\n    components: {\n      root: 'button',\n      icon: 'span',\n    },\n\n    root: getNativeElementProps(\n      as,\n      useARIAButtonShorthand<ARIAButtonSlotProps<'a'>>(props, {\n        required: true,\n        defaultProps: {\n          ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n          type: 'button',\n        },\n      }),\n    ),\n    icon: iconShorthand,\n  };\n};\n"]}

package/lib-amd/components/Button/useButtonStyles.js

@@ -0,0 +1,187 @@
+define(["require", "exports", "tslib", "@fluentui/react-icons", "@fluentui/react-tabster", "@fluentui/react-theme", "@griffel/react"], function (require, exports, tslib_1, react_icons_1, react_tabster_1, react_theme_1, react_1) {
+    "use strict";
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useButtonStyles_unstable = exports.buttonClassNames = void 0;
+    exports.buttonClassNames = {
+        root: 'fui-Button',
+        icon: 'fui-Button__icon',
+    };
+    var iconSpacingVar = '--fui-Button__icon--spacing';
+    var buttonSpacingSmall = '3px';
+    var buttonSpacingMedium = '5px';
+    var useRootStyles = react_1.makeStyles({
+        // Base styles
+        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ alignItems: 'center', boxSizing: 'border-box', display: 'inline-flex', justifyContent: 'center', textDecorationLine: 'none', verticalAlign: 'middle' }, react_1.shorthands.margin(0)), react_1.shorthands.overflow('hidden')), { backgroundColor: react_theme_1.tokens.colorNeutralBackground1, color: react_theme_1.tokens.colorNeutralForeground1 }), react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorNeutralStroke1)), { fontFamily: react_theme_1.tokens.fontFamilyBase, outlineStyle: 'none', ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground1Hover }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Hover)), (_a = { color: react_theme_1.tokens.colorNeutralForeground1Hover, cursor: 'pointer' }, _a["& ." + react_icons_1.iconFilledClassName] = {
+                display: 'inline',
+            }, _a["& ." + react_icons_1.iconRegularClassName] = {
+                display: 'none',
+            }, _a)), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground1Pressed }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Pressed)), (_b = { color: react_theme_1.tokens.colorNeutralForeground1Pressed, outlineStyle: 'none' }, _b["& ." + react_icons_1.iconFilledClassName] = {
+                display: 'inline',
+            }, _b["& ." + react_icons_1.iconRegularClassName] = {
+                display: 'none',
+            }, _b)) }),
+        // Transition styles
+        transition: {
+            transitionDuration: react_theme_1.tokens.durationFaster,
+            transitionProperty: 'background, border, color',
+            transitionTimingFunction: react_theme_1.tokens.curveEasyEase,
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                transitionDuration: '0.01ms',
+            },
+        },
+        // High contrast styles
+        highContrast: {
+            '@media (forced-colors: active)': {
+                ':focus': tslib_1.__assign({}, react_1.shorthands.borderColor('ButtonText')),
+                ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'HighlightText' }, react_1.shorthands.borderColor('Highlight')), { color: 'Highlight', forcedColorAdjust: 'none' }),
+                ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: 'HighlightText' }, react_1.shorthands.borderColor('Highlight')), { color: 'Highlight', forcedColorAdjust: 'none' }),
+            },
+        },
+        // Appearance variations
+        outline: {
+            backgroundColor: react_theme_1.tokens.colorTransparentBackground,
+            ':hover': {
+                backgroundColor: react_theme_1.tokens.colorTransparentBackgroundHover,
+            },
+            ':hover:active': {
+                backgroundColor: react_theme_1.tokens.colorTransparentBackgroundPressed,
+            },
+        },
+        primary: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorBrandBackground }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForegroundOnBrand, ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorBrandBackgroundHover }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForegroundOnBrand }), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorBrandBackgroundPressed }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForegroundOnBrand }) }),
+        secondary: {
+        /* The secondary styles are exactly the same as the base styles. */
+        },
+        subtle: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorSubtleBackground }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForeground2, ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorSubtleBackgroundHover }, react_1.shorthands.borderColor('transparent')), (_c = { color: react_theme_1.tokens.colorNeutralForeground2Hover }, _c["& ." + exports.buttonClassNames.icon] = {
+                color: react_theme_1.tokens.colorNeutralForeground2BrandHover,
+            }, _c)), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorSubtleBackgroundPressed }, react_1.shorthands.borderColor('transparent')), (_d = { color: react_theme_1.tokens.colorNeutralForeground2Pressed }, _d["& ." + exports.buttonClassNames.icon] = {
+                color: react_theme_1.tokens.colorNeutralForeground2BrandPressed,
+            }, _d)) }),
+        transparent: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForeground2, ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackgroundHover }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForeground2BrandHover }), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackgroundPressed }, react_1.shorthands.borderColor('transparent')), { color: react_theme_1.tokens.colorNeutralForeground2BrandPressed }) }),
+        // Shape variations
+        circular: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)),
+        rounded: {
+        /* The borderRadius rounded styles are handled in the size variations */
+        },
+        square: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone)),
+        // Size variations
+        small: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(buttonSpacingSmall, react_theme_1.tokens.spacingHorizontalS)), { minWidth: '64px' }), react_1.shorthands.borderRadius(buttonSpacingSmall)), { fontSize: react_theme_1.tokens.fontSizeBase200, fontWeight: react_theme_1.tokens.fontWeightRegular, lineHeight: react_theme_1.tokens.lineHeightBase200 }),
+        medium: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(buttonSpacingMedium, react_theme_1.tokens.spacingHorizontalM)), { minWidth: '96px' }), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { fontSize: react_theme_1.tokens.fontSizeBase300, fontWeight: react_theme_1.tokens.fontWeightSemibold, lineHeight: react_theme_1.tokens.lineHeightBase300 }),
+        large: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalS, react_theme_1.tokens.spacingHorizontalL)), { minWidth: '96px' }), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { fontSize: react_theme_1.tokens.fontSizeBase400, fontWeight: react_theme_1.tokens.fontWeightSemibold, lineHeight: react_theme_1.tokens.lineHeightBase400 }),
+    });
+    var useRootDisabledStyles = react_1.makeStyles({
+        // Base styles
+        base: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackgroundDisabled }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { color: react_theme_1.tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed', ':hover': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackgroundDisabled }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), (_e = { color: react_theme_1.tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed' }, _e["& ." + react_icons_1.iconFilledClassName] = {
+                display: 'none',
+            }, _e["& ." + react_icons_1.iconRegularClassName] = {
+                display: 'inline',
+            }, _e)), ':hover:active': tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackgroundDisabled }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), (_f = { color: react_theme_1.tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed' }, _f["& ." + react_icons_1.iconFilledClassName] = {
+                display: 'none',
+            }, _f["& ." + react_icons_1.iconRegularClassName] = {
+                display: 'inline',
+            }, _f)) }),
+        // High contrast styles
+        highContrast: {
+            '@media (forced-colors: active)': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), { color: 'GrayText', ':focus': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), ':hover': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), { color: 'GrayText' }), ':hover:active': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')), { color: 'GrayText' }) }),
+        },
+        // Appearance variations
+        outline: {
+            backgroundColor: react_theme_1.tokens.colorTransparentBackground,
+            ':hover': {
+                backgroundColor: react_theme_1.tokens.colorTransparentBackground,
+            },
+            ':hover:active': {
+                backgroundColor: react_theme_1.tokens.colorTransparentBackground,
+            },
+        },
+        primary: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor('transparent')), { ':hover': tslib_1.__assign({}, react_1.shorthands.borderColor('transparent')), ':hover:active': tslib_1.__assign({}, react_1.shorthands.borderColor('transparent')) }),
+        secondary: {
+        /* The secondary styles are exactly the same as the base styles. */
+        },
+        subtle: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')), { ':hover': tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')), ':hover:active': tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')) }),
+        transparent: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')), { ':hover': tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')), ':hover:active': tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor('transparent')) }),
+    });
+    var useRootFocusStyles = react_1.makeStyles({
+        base: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStroke)), { outlineColor: react_theme_1.tokens.colorTransparentStroke, outlineWidth: react_theme_1.tokens.strokeWidthThick, outlineStyle: 'solid', boxShadow: "\n      " + react_theme_1.tokens.shadow4 + ",\n      0 0 0 2px " + react_theme_1.tokens.colorStrokeFocus2 + "\n    ", zIndex: 1 })),
+        // Shape variations
+        circular: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular))),
+        rounded: {
+        /* The rounded styles are exactly the same as the base styles. */
+        },
+        square: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone))),
+        // Primary styles
+        primary: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralForegroundOnBrand)), { boxShadow: react_theme_1.tokens.shadow2 + ", 0 0 0 2px " + react_theme_1.tokens.colorStrokeFocus2 })),
+        // Size variations
+        small: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusSmall))),
+        medium: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium))),
+        large: react_tabster_1.createCustomFocusIndicatorStyle(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusLarge))),
+    });
+    var useRootIconOnlyStyles = react_1.makeStyles({
+        // Size variations
+        small: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingHorizontalXS)), { minWidth: '28px', maxWidth: '28px' }),
+        medium: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingHorizontalXS)), { minWidth: '32px', maxWidth: '32px' }),
+        large: tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.padding(react_theme_1.tokens.spacingHorizontalSNudge)), { minWidth: '40px', maxWidth: '40px' }),
+    });
+    var useIconStyles = react_1.makeStyles({
+        // Base styles
+        base: {
+            alignItems: 'center',
+            display: 'inline-flex',
+            justifyContent: 'center',
+        },
+        // Size variations
+        small: (_g = {
+                fontSize: '20px',
+                height: '20px',
+                width: '20px'
+            },
+            _g[iconSpacingVar] = react_theme_1.tokens.spacingHorizontalXS,
+            _g),
+        medium: (_h = {
+                fontSize: '20px',
+                height: '20px',
+                width: '20px'
+            },
+            _h[iconSpacingVar] = react_theme_1.tokens.spacingHorizontalSNudge,
+            _h),
+        large: (_j = {
+                fontSize: '24px',
+                height: '24px',
+                width: '24px'
+            },
+            _j[iconSpacingVar] = react_theme_1.tokens.spacingHorizontalSNudge,
+            _j),
+        // Icon position variations
+        before: {
+            marginRight: "var(" + iconSpacingVar + ")",
+        },
+        after: {
+            marginLeft: "var(" + iconSpacingVar + ")",
+        },
+    });
+    var useButtonStyles_unstable = function (state) {
+        var rootStyles = useRootStyles();
+        var rootDisabledStyles = useRootDisabledStyles();
+        var rootFocusStyles = useRootFocusStyles();
+        var rootIconOnlyStyles = useRootIconOnlyStyles();
+        var iconStyles = useIconStyles();
+        var appearance = state.appearance, disabled = state.disabled, disabledFocusable = state.disabledFocusable, iconOnly = state.iconOnly, iconPosition = state.iconPosition, shape = state.shape, size = state.size;
+        state.root.className = react_1.mergeClasses(exports.buttonClassNames.root, 
+        // Root styles
+        rootStyles.base, rootStyles.transition, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], 
+        // Disabled styles
+        (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], 
+        // Focus styles
+        rootFocusStyles.base, appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], 
+        // Icon-only styles
+        iconOnly && rootIconOnlyStyles[size], 
+        // User provided class name
+        state.root.className);
+        if (state.icon) {
+            state.icon.className = react_1.mergeClasses(exports.buttonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], iconStyles[size], state.icon.className);
+        }
+        return state;
+    };
+    exports.useButtonStyles_unstable = useButtonStyles_unstable;
+});
+//# sourceMappingURL=useButtonStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useButtonStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/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\nconst iconSpacingVar = '--fui-Button__icon--spacing';\n\nconst buttonSpacingSmall = '3px';\nconst buttonSpacingMedium = '5px';\n\nconst useRootStyles = makeStyles({\n  // Base styles\n  base: {\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    justifyContent: 'center',\n    textDecorationLine: 'none',\n    verticalAlign: 'middle',\n\n    ...shorthands.margin(0),\n\n    ...shorthands.overflow('hidden'),\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  // Transition styles\n  transition: {\n    transitionDuration: tokens.durationFaster,\n    transitionProperty: 'background, border, color',\n    transitionTimingFunction: tokens.curveEasyEase,\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n  },\n\n  // High contrast styles\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':focus': {\n        ...shorthands.borderColor('ButtonText'),\n      },\n\n      ':hover': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n        forcedColorAdjust: 'none',\n      },\n\n      ':hover:active': {\n        backgroundColor: 'HighlightText',\n        ...shorthands.borderColor('Highlight'),\n        color: 'Highlight',\n        forcedColorAdjust: 'none',\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    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.colorNeutralForeground2Hover,\n\n      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2BrandHover,\n      },\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorSubtleBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2Pressed,\n\n      [`& .${buttonClassNames.icon}`]: {\n        color: tokens.colorNeutralForeground2BrandPressed,\n      },\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n    color: tokens.colorNeutralForeground2,\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackgroundHover,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandHover,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackgroundPressed,\n      ...shorthands.borderColor('transparent'),\n      color: tokens.colorNeutralForeground2BrandPressed,\n    },\n  },\n\n  // Shape variations\n  circular: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  },\n  rounded: {\n    /* The borderRadius rounded styles are handled in the size variations */\n  },\n  square: {\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  },\n\n  // Size variations\n  small: {\n    ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),\n\n    minWidth: '64px',\n\n    ...shorthands.borderRadius(buttonSpacingSmall),\n\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    lineHeight: tokens.lineHeightBase200,\n  },\n  medium: {\n    ...shorthands.padding(buttonSpacingMedium, tokens.spacingHorizontalM),\n\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.spacingVerticalS, tokens.spacingHorizontalL),\n\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.colorTransparentBackground,\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n    },\n  },\n  primary: {\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  secondary: {\n    /* The secondary styles are exactly the same as the base styles. */\n  },\n  subtle: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n  transparent: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor('transparent'),\n\n    ':hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n\n    ':hover:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n      ...shorthands.borderColor('transparent'),\n    },\n  },\n});\n\nconst useRootFocusStyles = makeStyles({\n  base: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    outlineColor: tokens.colorTransparentStroke,\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  // Shape variations\n  circular: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n  }),\n  rounded: {\n    /* The rounded styles are exactly the same as the base styles. */\n  },\n  square: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  }),\n\n  // Primary styles\n  primary: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n    boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n  }),\n\n  // Size variations\n  small: createCustomFocusIndicatorStyle({\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n  }),\n  medium: 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 { appearance, disabled, disabledFocusable, iconOnly, iconPosition, shape, size } = state;\n\n  state.root.className = mergeClasses(\n    buttonClassNames.root,\n\n    // Root styles\n    rootStyles.base,\n    rootStyles.transition,\n    rootStyles.highContrast,\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"]}

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

@@ -0,0 +1,16 @@
+define(["require", "exports", "react", "./renderCompoundButton", "./useCompoundButton", "./useCompoundButtonStyles"], function (require, exports, React, renderCompoundButton_1, useCompoundButton_1, useCompoundButtonStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.CompoundButton = void 0;
+    /**
+     * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
+     */
+    exports.CompoundButton = React.forwardRef(function (props, ref) {
+        var 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-amd/components/CompoundButton/CompoundButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompoundButton.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-button/src/components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,cAAc,GAA6C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAClG,IAAM,KAAK,GAAG,8CAA0B,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAErD,0DAAgC,CAAC,KAAK,CAAC,CAAC;QAExC,OAAO,oDAA6B,CAAC,KAAK,CAAC,CAAC;QAC5C,0FAA0F;IAC5F,CAAC,CAA6C,CAAC;IAE/C,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC","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"]}

package/lib-amd/components/CompoundButton/CompoundButton.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=CompoundButton.types.js.map