npm - @fluentui/react-button - Versions diffs - 9.3.4 → 9.3.6 - Mend

@fluentui/react-button 9.3.4 → 9.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (214) hide show

package/.swcrc ADDED Viewed

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://json.schemastore.org/swcrc",
+  "exclude": [
+    "/testing",
+    "/**/*.cy.ts",
+    "/**/*.cy.tsx",
+    "/**/*.spec.ts",
+    "/**/*.spec.tsx",
+    "/**/*.test.ts",
+    "/**/*.test.tsx"
+  ],
+  "jsc": {
+    "parser": {
+      "syntax": "typescript",
+      "tsx": true,
+      "decorators": false,
+      "dynamicImport": false
+    },
+    "externalHelpers": true,
+    "transform": {
+      "react": {
+        "runtime": "classic",
+        "useSpread": true
+      }
+    },
+    "target": "es2019"
+  },
+  "minify": false,
+  "sourceMaps": true
+}

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,97 @@
   "name": "@fluentui/react-button",
   "entries": [
     {
-      "date": "Thu, 16 Mar 2023 14:33:33 GMT",
+      "date": "Thu, 23 Mar 2023 12:28:45 GMT",
+      "tag": "@fluentui/react-button_v9.3.6",
+      "version": "9.3.6",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.3.3",
+            "commit": "be0ca69899300abe3c8478c435e0f6837138479b"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-tabster to v9.6.2",
+            "commit": "be0ca69899300abe3c8478c435e0f6837138479b"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 21 Mar 2023 21:23:25 GMT",
+      "tag": "@fluentui/react-button_v9.3.5",
+      "version": "9.3.5",
+      "comments": {
+        "patch": [
+          {
+            "author": "makotom@microsoft.com",
+            "package": "@fluentui/react-button",
+            "commit": "7fde5c94869ff9841b142b7ff1d0a3df0ab58f74",
+            "comment": "chore: Bumping version of @fluentui/react-icons to ^2.0.196."
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-button",
+            "commit": "2fac1a139149bd13b76b1306207bc988dca9c72c",
+            "comment": "chore: migrate to swc transpilation approach."
+          },
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-button",
+            "commit": "ead1c6d4c2ac3f3596b62b8cbc07b0a03041f11f",
+            "comment": "fix: add node field to package.json exports map."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/keyboard-keys to v9.0.2",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-aria to v9.3.15",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.3.2",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-tabster to v9.6.1",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-theme to v9.1.7",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-utilities to v9.7.2",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-button",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20",
+            "commit": "b7a26f6263c80e3253c6b8338c33b73bae33e2b5"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 16 Mar 2023 14:36:59 GMT",
       "tag": "@fluentui/react-button_v9.3.4",
       "version": "9.3.4",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,40 @@
 # Change Log - @fluentui/react-button
-This log was last generated on Thu, 16 Mar 2023 14:33:33 GMT and should not be manually modified.
+This log was last generated on Thu, 23 Mar 2023 12:28:45 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.3.6)
+Thu, 23 Mar 2023 12:28:45 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.3.5..@fluentui/react-button_v9.3.6)
+### Patches
+- Bump @fluentui/react-shared-contexts to v9.3.3 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
+- Bump @fluentui/react-tabster to v9.6.2 ([PR #27286](https://github.com/microsoft/fluentui/pull/27286) by beachball)
+## [9.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.3.5)
+Tue, 21 Mar 2023 21:23:25 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.3.4..@fluentui/react-button_v9.3.5)
+### Patches
+- chore: Bumping version of @fluentui/react-icons to ^2.0.196. ([PR #27100](https://github.com/microsoft/fluentui/pull/27100) by makotom@microsoft.com)
+- chore: migrate to swc transpilation approach. ([PR #27250](https://github.com/microsoft/fluentui/pull/27250) by tristan.watanabe@gmail.com)
+- fix: add node field to package.json exports map. ([PR #27154](https://github.com/microsoft/fluentui/pull/27154) by tristan.watanabe@gmail.com)
+- Bump @fluentui/keyboard-keys to v9.0.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-aria to v9.3.15 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.3.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-tabster to v9.6.1 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-theme to v9.1.7 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-utilities to v9.7.2 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.20 ([PR #27271](https://github.com/microsoft/fluentui/pull/27271) by beachball)
 ## [9.3.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.3.4)
-Thu, 16 Mar 2023 14:33:33 GMT
+Thu, 16 Mar 2023 14:36:59 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.3.3..@fluentui/react-button_v9.3.4)
 ### Patches

package/lib/Button.js.map CHANGED Viewed

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

package/lib/CompoundButton.js.map CHANGED Viewed

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

package/lib/MenuButton.js.map CHANGED Viewed

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

package/lib/SplitButton.js.map CHANGED Viewed

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

package/lib/ToggleButton.js.map CHANGED Viewed

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

package/lib/components/Button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","renderButton_unstable","useButton_unstable","useButtonStyles_unstable","useCustomStyleHooks_unstable","Button","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["~~../~~src/~~packages/react-~~components/~~react-button/src/components/~~Button/Button.tsx"],"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';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\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 const { useButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(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"],"mappings":"AAAA,~~OAAO~~,~~KAAKA~~,~~KAAK,MAAM,OAAO~~;~~AAC9B~~,SAASC,qBAAqB,QAAQ~~,gBAAgB~~;~~AACtD~~,SAASC,kBAAkB,QAAQ~~,aAAa~~;~~AAChD~~,SAASC,wBAAwB,QAAQ~~,mBAAmB~~;~~AAG5D~~,SAASC,4BAA4B,QAAQ~~,iCAAiC~~;~~AAE9E~~;;;AAGA,OAAO,MAAMC,~~MAAM~~,~~gBAAqCL~~,~~KAAK~~,~~CAACM~~,UAAU,CAAC,CAACC,~~KAAK~~,~~EAAEC~~,~~GAAG~~,~~KAAI~~;~~EACtF~~,MAAMC,~~KAAK~~,~~GAAGP~~,~~kBAAkB~~,~~CAACK~~,~~KAAK~~,~~EAAEC~~,~~GAAG,CAAC~~;~~EAE5CL~~,~~wBAAwB~~,~~CAACM~~,~~KAAK,CAAC~~;~~EAE/B~~,MAAM;IAAEN,~~wBAAwB~~,~~EAAEO~~;EAAe,CAAE,GAAGN,~~4BAA4B,EAAE~~;~~EACpFM~~,~~eAAe~~,~~CAACD~~,~~KAAK,CAAC~~;~~EAEtB~~,OAAOR,~~qBAAqB~~,~~CAACQ~~,~~KAAK,CAAC~~;~~EACnC~~;AACF~~,CAAC,CAAqC~~;;~~AAEtCJ~~,~~MAAM~~,~~CAACM~~,WAAW,GAAG~~,QAAQ~~"}
1	+ {"version":3,"names":["React","renderButton_unstable","useButton_unstable","useButtonStyles_unstable","useCustomStyleHooks_unstable","Button","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/Button/Button.tsx"],"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';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\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 const { useButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,kBAAkB,QAAQ;AACnC,SAASC,wBAAwB,QAAQ;AAGzC,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,MAAA,gBAA2CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvF,MAAMC,KAAA,GAAQP,kBAAA,CAAmBK,KAAA,EAAOC,GAAA;EAExCL,wBAAA,CAAyBM,KAAA;EAEzB,MAAM;IAAEN,wBAAA,EAA0BO;EAAe,CAAE,GAAGN,4BAAA;EACtDM,eAAA,CAAgBD,KAAA;EAEhB,OAAOR,qBAAA,CAAsBQ,KAAA;EAC7B;AACF;;AAEAJ,MAAA,CAAOM,WAAW,GAAG"}

package/lib/components/Button/Button.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~file~~":~~"Button.types.js"~~,"~~sourceRoot":"../src/","~~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\n/\n A button supports different sizes.\n /\nexport type ButtonSize = 'small' \| 'medium' \| 'large';\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?: ButtonSize;\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"]}
1	+ {"version":3,"names":[],"sources":["../../../src/components/Button/Button.types.ts"],"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\n/\n A button supports different sizes.\n /\nexport type ButtonSize = 'small' \| 'medium' \| 'large';\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?: ButtonSize;\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"],"mappings":"AAAA"}

package/lib/components/Button/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~file~~":"~~index.js~~","~~sourceRoot~~"~~:"../src/"~~,"sources":["~~packages/react-components/react-button/~~src/components/Button/index.ts"],"~~names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AAGzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAE,gBAAgB,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC","~~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"]}
1	+ {"version":3,"names":["buttonClassNames","useButtonStyles_unstable"],"sources":["../../../src/components/Button/index.ts"],"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"],"mappings":"AAAA,cAAc;AAGd,cAAc;AACd,cAAc;AACd,SAASA,gBAAgB,EAAEC,wBAAwB,QAAQ"}

package/lib/components/Button/renderButton.js CHANGED Viewed

@@ -12,12 +12,6 @@ export const renderButton_unstable = state => {
     iconOnly,
     iconPosition
   } = state;
-  return /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }, iconPosition !== 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
-    ...slotProps.icon
-  }), !iconOnly && state.root.children, iconPosition === 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
-    ...slotProps.icon
-  }));
+  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, iconPosition !== 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon), !iconOnly && state.root.children, iconPosition === 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon));
 };
 //# sourceMappingURL=renderButton.js.map

package/lib/components/Button/renderButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","getSlots","renderButton_unstable","state","slots","slotProps","iconOnly","iconPosition","createElement","root","icon","children"],"sources":["~~../~~src/~~packages/react-~~components/~~react-button/src/components/~~Button/renderButton.tsx"],"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"],"mappings":"AAAA,~~OAAO~~,~~KAAKA~~,~~KAAK,MAAM,OAAO~~;~~AAC9B~~,SAASC,QAAQ,QAAQ~~,2BAA2B~~;~~AAGpD~~;;;AAGA,OAAO,MAAMC,~~qBAAqB~~,~~GAAIC~~,~~KAAkB~~,~~IAAI~~;~~EAC1D~~,MAAM;IAAEC,~~KAAK~~;~~IAAEC~~;EAAS,CAAE,GAAGJ,~~QAAQ~~,~~CAAcE~~,~~KAAK,CAAC~~;~~EACzD~~,MAAM;IAAEG,~~QAAQ~~;~~IAAEC~~;EAAY,CAAE,GAAGJ,~~KAAK~~;~~EAExC~~,oBACEH,KAAA,CAAAQ,aAAA,CAACJ,~~KAAK~~,~~CAACK~~,IAAI~~;IAAA~~,~~GAAKJ~~,~~SAAS~~,~~CAACI;EAAI~~,~~GAC3BF~~,~~YAAY~~,~~KAAK~~,~~OAAO~~,~~IAAIH~~,~~KAAK~~,~~CAACM~~,IAAI,iBAAIV,KAAA,CAAAQ,aAAA,CAACJ,~~KAAK~~,~~CAACM~~,IAAI~~;IAAA~~,~~GAAKL~~,~~SAAS~~,~~CAACK;EAAI~~,~~EAAI~~,~~EAC5E~~,CAACJ,~~QAAQ~~,~~IAAIH~~,~~KAAK~~,~~CAACM~~,IAAI,CAACE,QAAQ,EAChCJ,~~YAAY~~,~~KAAK~~,~~OAAO~~,~~IAAIH~~,~~KAAK~~,~~CAACM,~~IAAI,iBAAIV,KAAA,CAAAQ,aAAA,CAACJ,~~KAAK~~,~~CAACM~~,IAAI~~;IAAA~~,~~GAAKL~~,~~SAAS~~,~~CAACK;EAAI~~,~~EAAI,CAClE~~;~~AAEjB,CAAC~~"}
1	+ {"version":3,"names":["React","getSlots","renderButton_unstable","state","slots","slotProps","iconOnly","iconPosition","createElement","root","icon","children"],"sources":["../../../src/components/Button/renderButton.tsx"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,qBAAA,GAAyBC,KAAA,IAAuB;EAC3D,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAAsBE,KAAA;EACnD,MAAM;IAAEG,QAAA;IAAUC;EAAY,CAAE,GAAGJ,KAAA;EAEnC,oBACEH,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI,EAC3BF,YAAA,KAAiB,WAAWH,KAAA,CAAMM,IAAI,iBAAIV,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMM,IAAI,EAAKL,SAAA,CAAUK,IAAI,GACxE,CAACJ,QAAA,IAAYH,KAAA,CAAMM,IAAI,CAACE,QAAQ,EAChCJ,YAAA,KAAiB,WAAWH,KAAA,CAAMM,IAAI,iBAAIV,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMM,IAAI,EAAKL,SAAA,CAAUK,IAAI;AAG/E"}

package/lib/components/Button/useButton.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { useARIAButtonShorthand } from '@fluentui/react-aria';
 import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
 import { useButtonContext } from '../../contexts/ButtonContext';

package/lib/components/Button/useButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["useARIAButtonShorthand","getNativeElementProps","resolveShorthand","useButtonContext","useButton_unstable","props","ref","size","contextSize","appearance","as","disabled","disabledFocusable","icon","iconPosition","shape","iconShorthand","iconOnly","Boolean","children","components","root","required","defaultProps","type"],"sources":["~~../~~src/~~packages/react-~~components/~~react-button/src/components/~~Button/useButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport type { ButtonProps, ButtonState } from './Button.types';\n\n/*\n Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ButtonState => {\n const { size: contextSize } = useButtonContext();\n const {\n appearance = 'secondary',\n as = 'button',\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n shape = 'rounded',\n size = contextSize ?? 'medium',\n } = props;\n const iconShorthand = resolveShorthand(icon);\n\n return {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // State calculated from a set of props\n iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n },\n\n root: getNativeElementProps(\n as,\n useARIAButtonShorthand<ARIAButtonSlotProps<'a'>>(props, {\n required: true,\n defaultProps: {\n ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n type: 'button',\n },\n }),\n ),\n icon: iconShorthand,\n };\n};\n"],"mappings":"~~AACA~~,~~SAA8BA~~,sBAAsB,QAAQ~~,sBAAsB~~;~~AAClF~~,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ~~,2BAA2B~~;~~AACnF~~,SAASC,gBAAgB,QAAQ~~,8BAA8B~~;~~AAG/D~~;;;;;AAKA,OAAO,MAAMC,~~kBAAkB~~,~~GAAGA~~,CAChCC,~~KAAkB~~,~~EAClBC~~,~~GAAqD~~,~~KACtC~~;~~EACf~~,MAAM;IAAEC,~~IAAI~~,~~EAAEC~~;EAAW,CAAE,GAAGL,~~gBAAgB,EAAE~~;~~EAChD~~,MAAM;IACJM,~~UAAU~~,~~GAAG,WAAW~~;~~IACxBC~~,~~EAAE~~,~~GAAG,QAAQ~~;~~IACbC~~,~~QAAQ~~,~~GAAG~~,KAAK;IAChBC,~~iBAAiB~~,~~GAAG~~,KAAK;IACzBC,~~IAAI~~;~~IACJC~~,~~YAAY~~,~~GAAG,QAAQ~~;~~IACvBC~~,~~KAAK~~,~~GAAG,SAAS~~;~~IACjBR~~,~~IAAI~~,~~GAAGC~~,~~WAAW~~,~~aAAXA~~,~~WAAW~~,~~cAAXA~~,~~WAAW~~,~~GAAI~~;EAAQ,CAC/B,GAAGH,~~KAAK~~;~~EACT~~,MAAMW,~~aAAa~~,~~GAAGd~~,~~gBAAgB~~,~~CAACW~~,~~IAAI,CAAC~~;~~EAE5C~~,OAAO;IACL;IACAJ,~~UAAU~~;~~IACVE~~,~~QAAQ~~;~~IACRC~~,~~iBAAiB~~;~~IACjBE~~,~~YAAY~~;~~IACZC~~,~~KAAK~~;~~IACLR~~,~~IAAI~~;~~IAEJ~~;IACAU,~~QAAQ~~,~~EAAEC~~,~~OAAO~~,~~CAAC~~,CAAAF,~~aAAa~~,~~aAAbA~~,~~aAAa~~,~~uBAAbA~~,~~aAAa~~,~~CAAEG~~,QAAQ,KAAI,CAACd,~~KAAK~~,~~CAACc~~,QAAQ~~,CAAC~~;~~IAE7D~~;IACAC,~~UAAU~~,~~EAAE~~;MACVC,~~IAAI~~,~~EAAE,QAAQ~~;~~MACdR~~,~~IAAI~~,~~EAAE~~;~~KACP~~;~~IAEDQ~~,~~IAAI~~,~~EAAEpB~~,~~qBAAqB~~,~~CACzBS~~,~~EAAE~~,~~EACFV~~,~~sBAAsB~~,~~CAA2BK~~,~~KAAK~~,~~EAAE~~;MACtDiB,~~QAAQ~~,~~EAAE~~,IAAI;MACdC,~~YAAY~~,~~EAAE~~;QACZjB,~~GAAG~~,~~EAAEA~~,~~GAAuD~~;~~QAC5DkB~~,~~IAAI~~,~~EAAE;;KAET,CAAC,CACH~~;~~IACDX~~,~~IAAI~~,~~EAAEG~~;~~GACP~~;~~AACH,CAAC~~"}
1	+ {"version":3,"names":["React","useARIAButtonShorthand","getNativeElementProps","resolveShorthand","useButtonContext","useButton_unstable","props","ref","size","contextSize","appearance","as","disabled","disabledFocusable","icon","iconPosition","shape","iconShorthand","iconOnly","Boolean","children","components","root","required","defaultProps","type"],"sources":["../../../src/components/Button/useButton.ts"],"sourcesContent":["import * as React from 'react';\nimport { ARIAButtonSlotProps, useARIAButtonShorthand } from '@fluentui/react-aria';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport type { ButtonProps, ButtonState } from './Button.types';\n\n/*\n Given user props, defines default props for the Button, calls useButtonState, and returns processed state.\n * @param props - User provided props to the Button component.\n * @param ref - User provided ref to be passed to the Button component.\n */\nexport const useButton_unstable = (\n props: ButtonProps,\n ref: React.Ref<HTMLButtonElement \| HTMLAnchorElement>,\n): ButtonState => {\n const { size: contextSize } = useButtonContext();\n const {\n appearance = 'secondary',\n as = 'button',\n disabled = false,\n disabledFocusable = false,\n icon,\n iconPosition = 'before',\n shape = 'rounded',\n size = contextSize ?? 'medium',\n } = props;\n const iconShorthand = resolveShorthand(icon);\n\n return {\n // Props passed at the top-level\n appearance,\n disabled,\n disabledFocusable,\n iconPosition,\n shape,\n size,\n\n // State calculated from a set of props\n iconOnly: Boolean(iconShorthand?.children && !props.children),\n\n // Slots definition\n components: {\n root: 'button',\n icon: 'span',\n },\n\n root: getNativeElementProps(\n as,\n useARIAButtonShorthand<ARIAButtonSlotProps<'a'>>(props, {\n required: true,\n defaultProps: {\n ref: ref as React.Ref<HTMLButtonElement & HTMLAnchorElement>,\n type: 'button',\n },\n }),\n ),\n icon: iconShorthand,\n };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAA8BC,sBAAsB,QAAQ;AAC5D,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ;AACxD,SAASC,gBAAgB,QAAQ;AAGjC;;;;;AAKA,OAAO,MAAMC,kBAAA,GAAqBA,CAChCC,KAAA,EACAC,GAAA,KACgB;EAChB,MAAM;IAAEC,IAAA,EAAMC;EAAW,CAAE,GAAGL,gBAAA;EAC9B,MAAM;IACJM,UAAA,GAAa;IACbC,EAAA,GAAK;IACLC,QAAA,GAAW,KAAK;IAChBC,iBAAA,GAAoB,KAAK;IACzBC,IAAA;IACAC,YAAA,GAAe;IACfC,KAAA,GAAQ;IACRR,IAAA,GAAOC,WAAA,aAAAA,WAAA,cAAAA,WAAA,GAAe;EAAQ,CAC/B,GAAGH,KAAA;EACJ,MAAMW,aAAA,GAAgBd,gBAAA,CAAiBW,IAAA;EAEvC,OAAO;IACL;IACAJ,UAAA;IACAE,QAAA;IACAC,iBAAA;IACAE,YAAA;IACAC,KAAA;IACAR,IAAA;IAEA;IACAU,QAAA,EAAUC,OAAA,CAAQ,CAAAF,aAAA,aAAAA,aAAA,uBAAAA,aAAA,CAAeG,QAAQ,KAAI,CAACd,KAAA,CAAMc,QAAQ;IAE5D;IACAC,UAAA,EAAY;MACVC,IAAA,EAAM;MACNR,IAAA,EAAM;IACR;IAEAQ,IAAA,EAAMpB,qBAAA,CACJS,EAAA,EACAV,sBAAA,CAAiDK,KAAA,EAAO;MACtDiB,QAAA,EAAU,IAAI;MACdC,YAAA,EAAc;QACZjB,GAAA,EAAKA,GAAA;QACLkB,IAAA,EAAM;MACR;IACF;IAEFX,IAAA,EAAMG;EACR;AACF"}

package/lib/components/Button/useButtonStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","__styles","__resetStyles","mergeClasses","buttonClassNames","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","useRootBaseClassName","useIconBaseClassName","useRootStyles","outline","De3pzq","Jwef8y","iro3zm","primary","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","b661bw","Bk6r4ia","B9zn80p","Bpld233","B2d53fq","Bsw6fvg","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bbusuzp","ycbfsm","Bqrx1nm","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","ze5xyy","g2kj27","Bf756sw","Bow2dr7","Bvhedfk","Gye4lf","pc6evw","secondary","subtle","Bbdnnc7","x3br3k","transparent","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","rounded","square","small","Bf4jedk","z8tnut","z189sj","Byoj8tv","uwmqm3","Be2twd7","Bhrd7zp","Bg96gwp","smallWithIcon","medium","large","largeWithIcon","d","h","m","useRootDisabledStyles","base","Bceei9c","eoavqd","Bk3fhr4","Bmfj8id","c3iz72","em6i61","vm6p8p","highContrast","G867l3","gdbnj","mxns5l","o3nasb","useRootFocusStyles","Brovlpu","B486eqv","kdpuga","Bw81rd7","B6xbmo0","dm238s","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","j6ew2k","f","i","useRootIconOnlyStyles","B2u0y6b","useIconStyles","Bqenvij","a9b677","Bqrlyyl","before","t21cq0","after","Frg6f3","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","children","undefined"],"sources":["../src/packages/react-components/react-button/src/components/Button/useButtonStyles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-Button',\n icon: 'fui-Button__icon',\n};\n\nconst iconSpacingVar = '--fui-Button__icon--spacing';\n\nconst buttonSpacingSmall = '3px';\nconst buttonSpacingSmallWithIcon = '1px';\nconst buttonSpacingMedium = '5px';\nconst buttonSpacingLarge = '8px';\nconst buttonSpacingLargeWithIcon = '7px';\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'inline-flex',\n justifyContent: 'center',\n textDecorationLine: 'none',\n verticalAlign: 'middle',\n\n margin: 0,\n overflow: 'hidden',\n\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n\n fontFamily: tokens.fontFamilyBase,\n outlineStyle: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground1Hover,\n\n cursor: 'pointer',\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n\n outlineStyle: 'none',\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`,\n minWidth: '96px',\n borderRadius: tokens.borderRadiusMedium,\n\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n\n // Transition styles\n\n transitionDuration: tokens.durationFaster,\n transitionProperty: 'background, border, color',\n transitionTimingFunction: tokens.curveEasyEase,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n // High contrast styles\n\n '@media (forced-colors: active)': {\n ':focus': {\n borderColor: 'ButtonText',\n },\n\n ':hover': {\n backgroundColor: 'HighlightText',\n borderColor: 'Highlight',\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n\n ':hover:active': {\n backgroundColor: 'HighlightText',\n borderColor: 'Highlight',\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n },\n\n // Focus styles\n\n ...createCustomFocusIndicatorStyle({\n borderColor: tokens.colorTransparentStroke,\n borderRadius: tokens.borderRadiusMedium,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 2px ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n});\n\nconst useIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n\n fontSize: '20px',\n height: '20px',\n width: '20px',\n\n [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n});\n\nconst useRootStyles = makeStyles({\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('HighlightText'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':hover:active': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. /\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n / The borderRadius rounded styles are handled in the size variations /\n },\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n\n // Size variations\n small: {\n minWidth: '64px',\n ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),\n\n ...shorthands.borderRadius(buttonSpacingSmall),\n\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n },\n smallWithIcon: {\n paddingBottom: buttonSpacingSmallWithIcon,\n paddingTop: buttonSpacingSmallWithIcon,\n },\n medium: {\n / defined in base styles /\n },\n large: {\n minWidth: '96px',\n ...shorthands.padding(buttonSpacingLarge, tokens.spacingHorizontalL),\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase400,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase400,\n },\n largeWithIcon: {\n paddingBottom: buttonSpacingLargeWithIcon,\n paddingTop: buttonSpacingLargeWithIcon,\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n\n ':hover': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n },\n\n ':hover:active': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n secondary: {\n / The secondary styles are exactly the same as the base styles. /\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useRootFocusStyles = makeStyles({\n // Shape variations\n circular: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n }),\n rounded: {\n / The rounded styles are exactly the same as the base styles. /\n },\n square: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n }),\n\n // Primary styles\n primary: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n }),\n\n // Size variations\n small: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n }),\n medium: {\n / defined in base styles /\n },\n large: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding(buttonSpacingSmallWithIcon),\n\n minWidth: '24px',\n maxWidth: '24px',\n },\n medium: {\n ...shorthands.padding(buttonSpacingMedium),\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n ...shorthands.padding(buttonSpacingLargeWithIcon),\n\n minWidth: '40px',\n maxWidth: '40px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Size variations\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n\n [iconSpacingVar]: tokens.spacingHorizontalXS,\n },\n medium: {\n / defined in base styles */\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n\n [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n },\n\n // Icon position variations\n before: {\n marginRight: `var(${iconSpacingVar})`,\n },\n after: {\n marginLeft: `var(${iconSpacingVar})`,\n },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n const rootBaseClassName = useRootBaseClassName();\n const iconBaseClassName = useIconBaseClassName();\n\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootFocusStyles = useRootFocusStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n\n const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;\n\n state.root.className = mergeClasses(\n buttonClassNames.root,\n rootBaseClassName,\n\n appearance && rootStyles[appearance],\n\n rootStyles[size],\n icon && size === 'small' && rootStyles.smallWithIcon,\n icon && size === 'large' && rootStyles.largeWithIcon,\n rootStyles[shape],\n\n // Disabled styles\n (disabled \|\| disabledFocusable) && rootDisabledStyles.base,\n (disabled \|\| disabledFocusable) && rootDisabledStyles.highContrast,\n appearance && (disabled \|\| disabledFocusable) && rootDisabledStyles[appearance],\n\n // Focus styles\n appearance === 'primary' && rootFocusStyles.primary,\n rootFocusStyles[size],\n rootFocusStyles[shape],\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n buttonClassNames.icon,\n iconBaseClassName,\n state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"mappings":"AAAA,SAASA,mBAAmB,EAAEC,oBAAoB,QAAQ,uBAAuB;AACjF,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,UAAU,EAAAC,QAAA,EAAAC,aAAA,EAA+BC,YAAY,QAAQ,gBAAgB;AAItF,OAAO,MAAMC,gBAAgB,GAAgC;EAC3DC,IAAI,EAAE,YAAY;EAClBC,IAAI,EAAE;CACP;AAED,MAAMC,cAAc,GAAG,6BAA6B;AAEpD,MAAMC,kBAAkB,GAAG,KAAK;AAChC,MAAMC,0BAA0B,GAAG,KAAK;AACxC,MAAMC,mBAAmB,GAAG,KAAK;AACjC,MAAMC,kBAAkB,GAAG,KAAK;AAChC,MAAMC,0BAA0B,GAAG,KAAK;AAExC,MAAMC,oBAAoB,gBAAGX,aAAA,m+IAoG3B;AAEF,MAAMY,oBAAoB,gBAAGZ,aAAA,waAU3B;AAEF,MAAMa,aAAa,gBAAGd,QAAA;EAAAe,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAH,MAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAP,MAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAX,MAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;EAAAC,MAAA;IAAAvC,MAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAP,MAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAA2B,OAAA;IAAAtC,MAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAuB,MAAA;EAAA;EAAAC,WAAA;IAAA1C,MAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAP,MAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAX,MAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAyB,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;EAAAC,MAAA;IAAAL,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAG,KAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAX,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAS,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,aAAA;IAAAL,OAAA;IAAAF,MAAA;EAAA;EAAAQ,MAAA;EAAAC,KAAA;IAAAV,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAX,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAS,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAI,aAAA;IAAAR,OAAA;IAAAF,MAAA;EAAA;AAAA;EAAAW,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,EA0IpB;AAEF,MAAMC,qBAAqB,gBAAGlF,QAAA;EAAAmF,IAAA;IAAAnE,MAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAA4D,OAAA;IAAAnE,MAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAwD,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAArE,MAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAsD,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAxD,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAoD,MAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAArD,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAtC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAE,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAqB,SAAA;EAAAC,MAAA;IAAAvC,MAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAN,MAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAV,MAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAyB,WAAA;IAAA1C,MAAA;IAAAI,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAN,MAAA;IAAAQ,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAV,MAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAA8C,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,EAuH5B;AAEF,MAAMe,kBAAkB,gBAAGhG,QAAA;EAAA2D,QAAA;IAAAsC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAtC,OAAA;EAAAC,MAAA;IAAAgC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAnF,OAAA;IAAA8E,OAAA;IAAAC,OAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAzC,KAAA;IAAA+B,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA1B,MAAA;EAAAC,KAAA;IAAAoB,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAM,CAAA;EAAAC,CAAA;EAAA9B,CAAA;AAAA,EA4BzB;AAEF,MAAM+B,qBAAqB,gBAAG9G,QAAA;EAAAkE,KAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAJ,OAAA;IAAA4C,OAAA;EAAA;EAAAnC,MAAA;IAAAR,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAJ,OAAA;IAAA4C,OAAA;EAAA;EAAAlC,KAAA;IAAAT,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAJ,OAAA;IAAA4C,OAAA;EAAA;AAAA;EAAAhC,CAAA;AAAA,EAoB5B;AAEF,MAAMiC,aAAa,gBAAGhH,QAAA;EAAAkE,KAAA;IAAAM,OAAA;IAAAyC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAvC,MAAA;EAAAC,KAAA;IAAAL,OAAA;IAAAyC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,MAAA;EAAA;AAAA;EAAAxC,CAAA;AAAA,EA2BpB;AAEF,OAAO,MAAMyC,wBAAwB,GAAIC,KAAkB,IAAiB;EAC1E,MAAMC,iBAAiB,GAAG9G,oBAAoB,EAAE;EAChD,MAAM+G,iBAAiB,GAAG9G,oBAAoB,EAAE;EAEhD,MAAM+G,UAAU,GAAG9G,aAAa,EAAE;EAClC,MAAM+G,kBAAkB,GAAG3C,qBAAqB,EAAE;EAClD,MAAM4C,eAAe,GAAG9B,kBAAkB,EAAE;EAC5C,MAAM+B,kBAAkB,GAAGjB,qBAAqB,EAAE;EAClD,MAAMkB,UAAU,GAAGhB,aAAa,EAAE;EAElC,MAAM;IAAEiB,UAAU;IAAEC,QAAQ;IAAEC,iBAAiB;IAAE9H,IAAI;IAAE+H,QAAQ;IAAEC,YAAY;IAAEC,KAAK;IAAEC;EAAI,CAAE,GAAGd,KAAK;EAEpGA,KAAK,CAACrH,IAAI,CAACoI,SAAS,GAAGtI,YAAY,CACjCC,gBAAgB,CAACC,IAAI,EACrBsH,iBAAiB,EAEjBO,UAAU,IAAIL,UAAU,CAACK,UAAU,CAAC,EAEpCL,UAAU,CAACW,IAAI,CAAC,EAChBlI,IAAI,IAAIkI,IAAI,KAAK,OAAO,IAAIX,UAAU,CAACjD,aAAa,EACpDtE,IAAI,IAAIkI,IAAI,KAAK,OAAO,IAAIX,UAAU,CAAC9C,aAAa,EACpD8C,UAAU,CAACU,KAAK,CAAC;EAEjB;EACA,CAACJ,QAAQ,IAAIC,iBAAiB,KAAKN,kBAAkB,CAAC1C,IAAI,EAC1D,CAAC+C,QAAQ,IAAIC,iBAAiB,KAAKN,kBAAkB,CAAClC,YAAY,EAClEsC,UAAU,KAAKC,QAAQ,IAAIC,iBAAiB,CAAC,IAAIN,kBAAkB,CAACI,UAAU,CAAC;EAE/E;EACAA,UAAU,KAAK,SAAS,IAAIH,eAAe,CAAC3G,OAAO,EACnD2G,eAAe,CAACS,IAAI,CAAC,EACrBT,eAAe,CAACQ,KAAK,CAAC;EAEtB;EACAF,QAAQ,IAAIL,kBAAkB,CAACQ,IAAI,CAAC;EAEpC;EACAd,KAAK,CAACrH,IAAI,CAACoI,SAAS,CACrB;EAED,IAAIf,KAAK,CAACpH,IAAI,EAAE;IACdoH,KAAK,CAACpH,IAAI,CAACmI,SAAS,GAAGtI,YAAY,CACjCC,gBAAgB,CAACE,IAAI,EACrBsH,iBAAiB,EACjBF,KAAK,CAACrH,IAAI,CAACqI,QAAQ,KAAKC,SAAS,IAAIjB,KAAK,CAACrH,IAAI,CAACqI,QAAQ,KAAK,IAAI,IAAIT,UAAU,CAACK,YAAY,CAAC,EAC7FL,UAAU,CAACO,IAAI,CAAC,EAChBd,KAAK,CAACpH,IAAI,CAACmI,SAAS,CACrB;;EAGH,OAAOf,KAAK;AACd,CAAC"}
1	+ {"version":3,"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","__styles","__resetStyles","mergeClasses","buttonClassNames","root","icon","iconSpacingVar","buttonSpacingSmall","buttonSpacingSmallWithIcon","buttonSpacingMedium","buttonSpacingLarge","buttonSpacingLargeWithIcon","useRootBaseClassName","useIconBaseClassName","useRootStyles","outline","De3pzq","Jwef8y","iro3zm","primary","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","b661bw","Bk6r4ia","B9zn80p","Bpld233","B2d53fq","Bsw6fvg","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","Bbusuzp","ycbfsm","Bqrx1nm","pgvf35","Bh7lczh","dpv3f4","Bpnjhaq","ze5xyy","g2kj27","Bf756sw","Bow2dr7","Bvhedfk","Gye4lf","pc6evw","secondary","subtle","Bbdnnc7","x3br3k","transparent","circular","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","rounded","square","small","Bf4jedk","z8tnut","z189sj","Byoj8tv","uwmqm3","Be2twd7","Bhrd7zp","Bg96gwp","smallWithIcon","medium","large","largeWithIcon","d","h","m","useRootDisabledStyles","base","Bceei9c","eoavqd","Bk3fhr4","Bmfj8id","c3iz72","em6i61","vm6p8p","highContrast","G867l3","gdbnj","mxns5l","o3nasb","useRootFocusStyles","Brovlpu","B486eqv","kdpuga","Bw81rd7","B6xbmo0","dm238s","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","j6ew2k","f","i","useRootIconOnlyStyles","B2u0y6b","useIconStyles","Bqenvij","a9b677","Bqrlyyl","before","t21cq0","after","Frg6f3","useButtonStyles_unstable","state","rootBaseClassName","iconBaseClassName","rootStyles","rootDisabledStyles","rootFocusStyles","rootIconOnlyStyles","iconStyles","appearance","disabled","disabledFocusable","iconOnly","iconPosition","shape","size","className","children","undefined"],"sources":["../../../src/components/Button/useButtonStyles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-Button',\n icon: 'fui-Button__icon',\n};\n\nconst iconSpacingVar = '--fui-Button__icon--spacing';\n\nconst buttonSpacingSmall = '3px';\nconst buttonSpacingSmallWithIcon = '1px';\nconst buttonSpacingMedium = '5px';\nconst buttonSpacingLarge = '8px';\nconst buttonSpacingLargeWithIcon = '7px';\n\nconst useRootBaseClassName = makeResetStyles({\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'inline-flex',\n justifyContent: 'center',\n textDecorationLine: 'none',\n verticalAlign: 'middle',\n\n margin: 0,\n overflow: 'hidden',\n\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n\n fontFamily: tokens.fontFamilyBase,\n outlineStyle: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n borderColor: tokens.colorNeutralStroke1Hover,\n color: tokens.colorNeutralForeground1Hover,\n\n cursor: 'pointer',\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n borderColor: tokens.colorNeutralStroke1Pressed,\n color: tokens.colorNeutralForeground1Pressed,\n\n outlineStyle: 'none',\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n padding: `${buttonSpacingMedium} ${tokens.spacingHorizontalM}`,\n minWidth: '96px',\n borderRadius: tokens.borderRadiusMedium,\n\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n\n // Transition styles\n\n transitionDuration: tokens.durationFaster,\n transitionProperty: 'background, border, color',\n transitionTimingFunction: tokens.curveEasyEase,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n },\n\n // High contrast styles\n\n '@media (forced-colors: active)': {\n ':focus': {\n borderColor: 'ButtonText',\n },\n\n ':hover': {\n backgroundColor: 'HighlightText',\n borderColor: 'Highlight',\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n\n ':hover:active': {\n backgroundColor: 'HighlightText',\n borderColor: 'Highlight',\n color: 'Highlight',\n forcedColorAdjust: 'none',\n },\n },\n\n // Focus styles\n\n ...createCustomFocusIndicatorStyle({\n borderColor: tokens.colorTransparentStroke,\n borderRadius: tokens.borderRadiusMedium,\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorTransparentStroke}`,\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 2px ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n});\n\nconst useIconBaseClassName = makeResetStyles({\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n\n fontSize: '20px',\n height: '20px',\n width: '20px',\n\n [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n});\n\nconst useRootStyles = makeStyles({\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n ...shorthands.borderColor('HighlightText'),\n color: 'HighlightText',\n forcedColorAdjust: 'none',\n\n ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':hover:active': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. /\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover,\n\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Pressed,\n\n [`& .${buttonClassNames.icon}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n / The borderRadius rounded styles are handled in the size variations /\n },\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n\n // Size variations\n small: {\n minWidth: '64px',\n ...shorthands.padding(buttonSpacingSmall, tokens.spacingHorizontalS),\n\n ...shorthands.borderRadius(buttonSpacingSmall),\n\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n },\n smallWithIcon: {\n paddingBottom: buttonSpacingSmallWithIcon,\n paddingTop: buttonSpacingSmallWithIcon,\n },\n medium: {\n / defined in base styles /\n },\n large: {\n minWidth: '96px',\n ...shorthands.padding(buttonSpacingLarge, tokens.spacingHorizontalL),\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase400,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase400,\n },\n largeWithIcon: {\n paddingBottom: buttonSpacingLargeWithIcon,\n paddingTop: buttonSpacingLargeWithIcon,\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n\n ':hover': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n },\n\n ':hover:active': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n secondary: {\n / The secondary styles are exactly the same as the base styles. /\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useRootFocusStyles = makeStyles({\n // Shape variations\n circular: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n }),\n rounded: {\n / The rounded styles are exactly the same as the base styles. /\n },\n square: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n }),\n\n // Primary styles\n primary: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n }),\n\n // Size variations\n small: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n }),\n medium: {\n / defined in base styles /\n },\n large: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding(buttonSpacingSmallWithIcon),\n\n minWidth: '24px',\n maxWidth: '24px',\n },\n medium: {\n ...shorthands.padding(buttonSpacingMedium),\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n ...shorthands.padding(buttonSpacingLargeWithIcon),\n\n minWidth: '40px',\n maxWidth: '40px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Size variations\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n\n [iconSpacingVar]: tokens.spacingHorizontalXS,\n },\n medium: {\n / defined in base styles */\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n\n [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n },\n\n // Icon position variations\n before: {\n marginRight: `var(${iconSpacingVar})`,\n },\n after: {\n marginLeft: `var(${iconSpacingVar})`,\n },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n const rootBaseClassName = useRootBaseClassName();\n const iconBaseClassName = useIconBaseClassName();\n\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootFocusStyles = useRootFocusStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n\n const { appearance, disabled, disabledFocusable, icon, iconOnly, iconPosition, shape, size } = state;\n\n state.root.className = mergeClasses(\n buttonClassNames.root,\n rootBaseClassName,\n\n appearance && rootStyles[appearance],\n\n rootStyles[size],\n icon && size === 'small' && rootStyles.smallWithIcon,\n icon && size === 'large' && rootStyles.largeWithIcon,\n rootStyles[shape],\n\n // Disabled styles\n (disabled \|\| disabledFocusable) && rootDisabledStyles.base,\n (disabled \|\| disabledFocusable) && rootDisabledStyles.highContrast,\n appearance && (disabled \|\| disabledFocusable) && rootDisabledStyles[appearance],\n\n // Focus styles\n appearance === 'primary' && rootFocusStyles.primary,\n rootFocusStyles[size],\n rootFocusStyles[shape],\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n buttonClassNames.icon,\n iconBaseClassName,\n state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"mappings":"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"}

package/lib/components/CompoundButton/CompoundButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","renderCompoundButton_unstable","useCompoundButton_unstable","useCompoundButtonStyles_unstable","useCustomStyleHooks_unstable","CompoundButton","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["~~../~~src/~~packages/react-~~components/~~react-button/src/components/~~CompoundButton/CompoundButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps } from './CompoundButton.types';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n CompoundButtons are buttons that can have secondary content that adds extra information to the user.\n */\nexport const CompoundButton: ForwardRefComponent<CompoundButtonProps> = React.forwardRef((props, ref) => {\n const state = useCompoundButton_unstable(props, ref);\n\n useCompoundButtonStyles_unstable(state);\n\n const { useCompoundButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderCompoundButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<CompoundButtonProps>;\n\nCompoundButton.displayName = 'CompoundButton';\n"],"mappings":"AAAA,~~OAAO~~,~~KAAKA~~,~~KAAK,MAAM,OAAO~~;~~AAC9B~~,SAASC,6BAA6B,QAAQ~~,wBAAwB~~;~~AACtE~~,SAASC,0BAA0B,QAAQ~~,qBAAqB~~;~~AAChE~~,SAASC,gCAAgC,QAAQ~~,2BAA2B~~;~~AAG5E~~,SAASC,4BAA4B,QAAQ~~,iCAAiC~~;~~AAE9E~~;;;AAGA,OAAO,MAAMC,~~cAAc~~,~~gBAA6CL~~,~~KAAK~~,~~CAACM~~,UAAU,CAAC,CAACC,~~KAAK~~,~~EAAEC~~,~~GAAG~~,~~KAAI~~;~~EACtG~~,MAAMC,~~KAAK~~,~~GAAGP~~,~~0BAA0B~~,~~CAACK~~,~~KAAK~~,~~EAAEC~~,~~GAAG,CAAC~~;~~EAEpDL~~,~~gCAAgC~~,~~CAACM~~,~~KAAK,CAAC~~;~~EAEvC~~,MAAM;IAAEN,~~gCAAgC~~,~~EAAEO~~;EAAe,CAAE,GAAGN,~~4BAA4B,EAAE~~;~~EAC5FM~~,~~eAAe~~,~~CAACD~~,~~KAAK,CAAC~~;~~EAEtB~~,OAAOR,~~6BAA6B~~,~~CAACQ~~,~~KAAK,CAAC~~;~~EAC3C~~;AACF~~,CAAC,CAA6C~~;;~~AAE9CJ~~,~~cAAc~~,~~CAACM~~,WAAW,GAAG~~,gBAAgB~~"}
1	+ {"version":3,"names":["React","renderCompoundButton_unstable","useCompoundButton_unstable","useCompoundButtonStyles_unstable","useCustomStyleHooks_unstable","CompoundButton","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/CompoundButton/CompoundButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps } from './CompoundButton.types';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n CompoundButtons are buttons that can have secondary content that adds extra information to the user.\n */\nexport const CompoundButton: ForwardRefComponent<CompoundButtonProps> = React.forwardRef((props, ref) => {\n const state = useCompoundButton_unstable(props, ref);\n\n useCompoundButtonStyles_unstable(state);\n\n const { useCompoundButtonStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderCompoundButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<CompoundButtonProps>;\n\nCompoundButton.displayName = 'CompoundButton';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,6BAA6B,QAAQ;AAC9C,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,gCAAgC,QAAQ;AAGjD,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,cAAA,gBAA2DL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvG,MAAMC,KAAA,GAAQP,0BAAA,CAA2BK,KAAA,EAAOC,GAAA;EAEhDL,gCAAA,CAAiCM,KAAA;EAEjC,MAAM;IAAEN,gCAAA,EAAkCO;EAAe,CAAE,GAAGN,4BAAA;EAC9DM,eAAA,CAAgBD,KAAA;EAEhB,OAAOR,6BAAA,CAA8BQ,KAAA;EACrC;AACF;;AAEAJ,cAAA,CAAeM,WAAW,GAAG"}

package/lib/components/CompoundButton/CompoundButton.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~file~~":~~"CompoundButton.types.js"~~,"~~sourceRoot":"../src/","~~sources":["~~packages/react-components/react-button/~~src/components/CompoundButton/CompoundButton.types.ts"],"~~names":[],"mappings":"","~~sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type CompoundButtonSlots = ButtonSlots & {\n /*\n Second line of text that describes the action this button takes.\n /\n secondaryContent?: Slot<'span'>;\n\n /\n Container that wraps the children and the secondaryContent slot.\n */\n contentContainer: NonNullable<Slot<'span'>>;\n};\n\nexport type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> &\n Pick<ButtonProps, 'appearance' \| 'disabledFocusable' \| 'disabled' \| 'iconPosition' \| 'shape' \| 'size'>;\n\nexport type CompoundButtonState = ComponentState<CompoundButtonSlots> &\n Omit<ButtonState, keyof ButtonSlots \| 'components'>;\n"]}
1	+ {"version":3,"names":[],"sources":["../../../src/components/CompoundButton/CompoundButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ButtonProps, ButtonSlots, ButtonState } from '../Button/Button.types';\n\nexport type CompoundButtonSlots = ButtonSlots & {\n /*\n Second line of text that describes the action this button takes.\n /\n secondaryContent?: Slot<'span'>;\n\n /\n Container that wraps the children and the secondaryContent slot.\n */\n contentContainer: NonNullable<Slot<'span'>>;\n};\n\nexport type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> &\n Pick<ButtonProps, 'appearance' \| 'disabledFocusable' \| 'disabled' \| 'iconPosition' \| 'shape' \| 'size'>;\n\nexport type CompoundButtonState = ComponentState<CompoundButtonSlots> &\n Omit<ButtonState, keyof ButtonSlots \| 'components'>;\n"],"mappings":"AAAA"}

package/lib/components/CompoundButton/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~file~~":"~~index.js~~","~~sourceRoot~~"~~:"../src/"~~,"sources":["~~packages/react-components/react-button/~~src/components/CompoundButton/index.ts"],"~~names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,OAAO,EAAE,wBAAwB,EAAE,gCAAgC,EAAE,MAAM,2BAA2B,CAAC","~~sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './renderCompoundButton';\nexport * from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\n"]}
1	+ {"version":3,"names":["compoundButtonClassNames","useCompoundButtonStyles_unstable"],"sources":["../../../src/components/CompoundButton/index.ts"],"sourcesContent":["export * from './CompoundButton';\nexport * from './CompoundButton.types';\nexport * from './renderCompoundButton';\nexport * from './useCompoundButton';\nexport { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAASA,wBAAwB,EAAEC,gCAAgC,QAAQ"}

package/lib/components/CompoundButton/renderCompoundButton.js CHANGED Viewed

@@ -12,16 +12,6 @@ export const renderCompoundButton_unstable = state => {
     iconOnly,
     iconPosition
   } = state;
-  return /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }, iconPosition !== 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
-    ...slotProps.icon
-  }), !iconOnly && /*#__PURE__*/React.createElement(slots.contentContainer, {
-    ...slotProps.contentContainer
-  }, slotProps.root.children, slots.secondaryContent && /*#__PURE__*/React.createElement(slots.secondaryContent, {
-    ...slotProps.secondaryContent
-  })), iconPosition === 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, {
-    ...slotProps.icon
-  }));
+  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, iconPosition !== 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon), !iconOnly && /*#__PURE__*/React.createElement(slots.contentContainer, slotProps.contentContainer, slotProps.root.children, slots.secondaryContent && /*#__PURE__*/React.createElement(slots.secondaryContent, slotProps.secondaryContent)), iconPosition === 'after' && slots.icon && /*#__PURE__*/React.createElement(slots.icon, slotProps.icon));
 };
 //# sourceMappingURL=renderCompoundButton.js.map

package/lib/components/CompoundButton/renderCompoundButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","getSlots","renderCompoundButton_unstable","state","slots","slotProps","iconOnly","iconPosition","createElement","root","icon","contentContainer","children","secondaryContent"],"sources":["~~../~~src/~~packages/react-~~components/~~react-button/src/components/~~CompoundButton/renderCompoundButton.tsx"],"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"],"mappings":"AAAA,~~OAAO~~,~~KAAKA~~,~~KAAK,MAAM,OAAO~~;~~AAC9B~~,SAASC,QAAQ,QAAQ~~,2BAA2B~~;~~AAGpD~~;;;AAGA,OAAO,MAAMC,~~6BAA6B~~,~~GAAIC~~,~~KAA0B~~,~~IAAI~~;~~EAC1E~~,MAAM;IAAEC,~~KAAK~~;~~IAAEC~~;EAAS,CAAE,GAAGJ,~~QAAQ~~,~~CAAsBE~~,~~KAAK,CAAC~~;~~EACjE~~,MAAM;IAAEG,~~QAAQ~~;~~IAAEC~~;EAAY,CAAE,GAAGJ,~~KAAK~~;~~EAExC~~,oBACEH,KAAA,CAAAQ,aAAA,CAACJ,~~KAAK~~,~~CAACK~~,IAAI~~;IAAA~~,~~GAAKJ~~,~~SAAS~~,~~CAACI;EAAI~~,~~GAC3BF~~,~~YAAY~~,~~KAAK~~,~~OAAO~~,~~IAAIH~~,~~KAAK~~,~~CAACM~~,IAAI,iBAAIV,KAAA,CAAAQ,aAAA,CAACJ,~~KAAK~~,~~CAACM~~,IAAI~~;IAAA~~,~~GAAKL~~,~~SAAS~~,~~CAACK;EAAI~~,~~EAAI~~,~~EAC5E~~,CAACJ,~~QAAQ~~,~~iBACRN~~,KAAA,CAAAQ,aAAA,CAACJ,~~KAAK~~,~~CAACO~~,gBAAgB~~;IAAA~~,~~GAAKN~~,~~SAAS~~,~~CAACM;EAAgB~~,~~GACnDN~~,~~SAAS~~,~~CAACI~~,IAAI,CAACG,QAAQ,EACvBR,~~KAAK~~,~~CAACS~~,gBAAgB,iBAAIb,KAAA,CAAAQ,aAAA,CAACJ,~~KAAK~~,~~CAACS~~,gBAAgB~~;IAAA~~,~~GAAKR~~,~~SAAS~~,~~CAACQ;EAAgB~~,~~EAAI~~,~~CAExF~~,~~EACAN~~,~~YAAY~~,~~KAAK~~,~~OAAO~~,~~IAAIH~~,~~KAAK,CAACM,~~IAAI,iBAAIV,KAAA,CAAAQ,aAAA,CAACJ,~~KAAK~~,~~CAACM~~,IAAI~~;IAAA~~,~~GAAKL~~,~~SAAS~~,~~CAACK;EAAI~~,~~EAAI,CAClE~~;~~AAEjB,CAAC~~"}
1	+ {"version":3,"names":["React","getSlots","renderCompoundButton_unstable","state","slots","slotProps","iconOnly","iconPosition","createElement","root","icon","contentContainer","children","secondaryContent"],"sources":["../../../src/components/CompoundButton/renderCompoundButton.tsx"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA+B;EAC3E,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAA8BE,KAAA;EAC3D,MAAM;IAAEG,QAAA;IAAUC;EAAY,CAAE,GAAGJ,KAAA;EAEnC,oBACEH,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI,EAC3BF,YAAA,KAAiB,WAAWH,KAAA,CAAMM,IAAI,iBAAIV,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMM,IAAI,EAAKL,SAAA,CAAUK,IAAI,GACxE,CAACJ,QAAA,iBACAN,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMO,gBAAgB,EAAKN,SAAA,CAAUM,gBAAgB,EACnDN,SAAA,CAAUI,IAAI,CAACG,QAAQ,EACvBR,KAAA,CAAMS,gBAAgB,iBAAIb,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMS,gBAAgB,EAAKR,SAAA,CAAUQ,gBAAgB,IAGpFN,YAAA,KAAiB,WAAWH,KAAA,CAAMM,IAAI,iBAAIV,KAAA,CAAAQ,aAAA,CAACJ,KAAA,CAAMM,IAAI,EAAKL,SAAA,CAAUK,IAAI;AAG/E"}

package/lib/components/CompoundButton/useCompoundButton.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { resolveShorthand } from '@fluentui/react-utilities';
 import { useButton_unstable } from '../Button/index';
 /**
@@ -10,7 +11,7 @@ export const useCompoundButton_unstable = ({
   secondaryContent,
   ...props
 }, ref) => {
-  var _a, _b;
+  var _state_icon, _state_secondaryContent;
   const state = {
     // Button state
     ...useButton_unstable(props, ref),
@@ -27,7 +28,7 @@ export const useCompoundButton_unstable = ({
     secondaryContent: 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));
+  state.iconOnly = Boolean(((_state_icon = state.icon) === null || _state_icon === void 0 ? void 0 : _state_icon.children) && !props.children && !((_state_secondaryContent = state.secondaryContent) === null || _state_secondaryContent === void 0 ? void 0 : _state_secondaryContent.children));
   return state;
 };
 //# sourceMappingURL=useCompoundButton.js.map

package/lib/components/CompoundButton/useCompoundButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["resolveShorthand","useButton_unstable","useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","state","components","root","icon","required","iconOnly","Boolean","~~_a","~~children"~~,"_b"~~],"sources":["~~../~~src/~~packages/react-~~components/~~react-button/src/components/~~CompoundButton/useCompoundButton.ts"],"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"],"mappings":"~~AACA~~,~~SAASA~~,gBAAgB,QAAQ~~,2BAA2B~~;~~AAC5D~~,SAASC,kBAAkB,QAAQ~~,iBAAiB~~;~~AAGpD~~;;;;;AAKA,OAAO,MAAMC,~~0BAA0B~~,~~GAAGA~~,CACxC;EAAEC,~~gBAAgB~~;~~EAAEC~~,~~gBAAgB~~;~~EAAE~~,GAAGC;~~AAAK~~,~~CAAuB~~,EACrEC,~~GAAqD~~,~~KAC9B;;EACvB~~,MAAMC,~~KAAK~~,~~GAAwB~~;IACjC;IACA,~~GAAGN~~,~~kBAAkB~~,~~CAACI~~,~~KAAK~~,~~EAAEC~~,~~GAAG~~,~~CAAC~~;IAEjC;~~IACAE~~,~~UAAU~~,~~EAAE~~;MACVC,~~IAAI~~,~~EAAE,QAAQ~~;~~MACdC~~,~~IAAI~~,~~EAAE,MAAM~~;~~MACZP~~,~~gBAAgB~~,~~EAAE,MAAM~~;~~MACxBC~~,~~gBAAgB~~,~~EAAE~~;~~KACnB~~;~~IACDD~~,~~gBAAgB~~,~~EAAEH~~,~~gBAAgB~~,~~CAACG~~,~~gBAAgB~~,~~EAAE~~;~~MAAEQ~~,~~QAAQ~~,~~EAAE~~;~~IAAI,CAAE,CAAC~~;~~IACxEP~~,~~gBAAgB~~,~~EAAEJ~~,~~gBAAgB~~,~~CAACI~~,~~gBAAgB~~;~~GACpD~~;~~EAED~~;~~EACAG~~,~~KAAK~~,~~CAACK~~,QAAQ,GAAGC,~~OAAO~~,~~CAAC~~,~~EAAAC~~,~~EAAA~~,~~GAAAP~~,~~KAAK~~,~~CAACG~~,IAAI,~~cAAAI~~,~~EAAA~~,uBAAAA,~~EAAA~~,~~CAAEC~~,QAAQ,KAAI,~~CAACV~~,~~KAAK~~,~~CAACU~~,QAAQ,IAAI,EAAC,~~CAAAC~~,~~EAAA~~,~~GAAAT~~,~~KAAK~~,~~CAACH~~,gBAAgB,~~cAAAY~~,~~EAAA~~,uBAAAA,~~EAAA~~,~~CAAED~~,QAAQ,~~EAAC~~;~~EAEtG~~,~~OAAOR~~,~~KAAK~~;~~AACd,CAAC~~"}
1	+ {"version":3,"names":["React","resolveShorthand","useButton_unstable","useCompoundButton_unstable","contentContainer","secondaryContent","props","ref","_state_icon","_state_secondaryContent","state","components","root","icon","required","iconOnly","Boolean","children"],"sources":["../../../src/components/CompoundButton/useCompoundButton.ts"],"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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,gBAAgB,QAAQ;AACjC,SAASC,kBAAkB,QAAQ;AAGnC;;;;;AAKA,OAAO,MAAMC,0BAAA,GAA6BA,CACxC;EAAEC,gBAAA;EAAkBC,gBAAA;EAAkB,GAAGC;AAAA,CAA4B,EACrEC,GAAA,KACwB;MAiBCC,WAAA,EAA4CC,uBAAA;EAhBrE,MAAMC,KAAA,GAA6B;IACjC;IACA,GAAGR,kBAAA,CAAmBI,KAAA,EAAOC,GAAA,CAAI;IAEjC;IACAI,UAAA,EAAY;MACVC,IAAA,EAAM;MACNC,IAAA,EAAM;MACNT,gBAAA,EAAkB;MAClBC,gBAAA,EAAkB;IACpB;IACAD,gBAAA,EAAkBH,gBAAA,CAAiBG,gBAAA,EAAkB;MAAEU,QAAA,EAAU;IAAK;IACtET,gBAAA,EAAkBJ,gBAAA,CAAiBI,gBAAA;EACrC;EAEA;EACAK,KAAA,CAAMK,QAAQ,GAAGC,OAAA,CAAQ,EAAAR,WAAA,GAAAE,KAAA,CAAMG,IAAI,cAAVL,WAAA,uBAAAA,WAAA,CAAYS,QAAQ,KAAI,CAACX,KAAA,CAAMW,QAAQ,IAAI,EAAC,CAAAR,uBAAA,GAAAC,KAAA,CAAML,gBAAgB,cAAtBI,uBAAA,uBAAAA,uBAAA,CAAwBQ,QAAQ,CAAD;EAEpG,OAAOP,KAAA;AACT"}