@fluentui/react-button 9.8.2 → 9.9.1
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.
- package/CHANGELOG.md +25 -2
- package/dist/index.d.ts +41 -7
- package/lib/components/Button/renderButton.js.map +1 -1
- package/lib/components/Button/useButton.js +0 -1
- package/lib/components/Button/useButton.js.map +1 -1
- package/lib/components/CompoundButton/useCompoundButton.js +0 -1
- package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.js.map +1 -1
- package/lib/components/SplitButton/SplitButton.types.js.map +1 -1
- package/lib/components/SplitButton/useSplitButton.js +0 -1
- package/lib/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib/components/ToggleButton/ToggleButton.types.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButton.js +2 -3
- package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.styles.js +58 -2
- package/lib/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -1
- package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.js +51 -4
- package/lib/components/ToggleButton/useToggleButtonStyles.styles.raw.js.map +1 -1
- package/lib/contexts/ButtonContext.js +4 -2
- package/lib/contexts/ButtonContext.js.map +1 -1
- package/lib/index.js +2 -7
- package/lib/index.js.map +1 -1
- package/lib/utils/useToggleState.js +2 -1
- package/lib/utils/useToggleState.js.map +1 -1
- package/lib-commonjs/components/Button/renderButton.js.map +1 -1
- package/lib-commonjs/components/Button/useButton.js +0 -2
- package/lib-commonjs/components/Button/useButton.js.map +1 -1
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js +0 -2
- package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
- package/lib-commonjs/components/SplitButton/SplitButton.types.js.map +1 -1
- package/lib-commonjs/components/SplitButton/useSplitButton.js +0 -2
- package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/ToggleButton.types.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButton.js +2 -4
- package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js +116 -3
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.raw.js +48 -4
- package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/contexts/ButtonContext.js.map +1 -1
- package/lib-commonjs/index.js +6 -5
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/useToggleState.js +2 -1
- package/lib-commonjs/utils/useToggleState.js.map +1 -1
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useToggleButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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.styles';\nexport const toggleButtonClassNames = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon'\n};\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed\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 ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':focus': {\n border: '1px solid HighlightText',\n outlineColor: 'Highlight'\n }\n }\n },\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed\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 ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Selected,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover\n },\n ':hover:active,:active:focus-visible': {\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 ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed\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 ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n ':hover': {\n ...shorthands.borderColor('transparent')\n },\n ':hover:active,:active:focus-visible': {\n ...shorthands.borderColor('transparent')\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent')\n }\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent')\n }\n }\n});\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto'\n }\n }\n});\nconst usePrimaryHighContrastStyles = makeStyles({\n // Do not use primary variant high contrast styles for toggle buttons\n // otherwise there isn't enough difference between on/off states\n base: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('ButtonBorder'),\n color: 'ButtonText',\n forcedColorAdjust: 'auto'\n }\n },\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n ':focus': {\n ...shorthands.borderColor('GrayText')\n }\n }\n }\n});\nexport const useToggleButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootCheckedStyles = useRootCheckedStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n const { appearance, checked, disabled, disabledFocusable } = state;\n state.root.className = mergeClasses(toggleButtonClassNames.root, // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles\n checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name\n state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(toggleButtonClassNames.icon, checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);\n }\n useButtonStyles_unstable(state);\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","D0sxk3","t6yez3","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","Bpjbzib","im15vp","Hjvxdg","Gpfmf1","ustxxc","Brsut9c","highContrast","By8wz76","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","B7iucu3","B8gzw0y","Bbkh6qg","F230oe","Bdw8ktp","Bj1xduy","Bhh2cfd","Bahaeuw","Bv2bamp","vxuvv6","Bli9q98","Bx2tt8t","yad0b3","j2fop7","B6rz4yo","Buk7464","Bqg8rp8","pjr8j7","Bgs2klq","Hwei09","Bi9aqk7","Fihjvf","nhyz0p","Buw724y","Bn7qjfh","B0u7xl9","md97jv","h3ptyc","s1kvfj","kogrdj","dqx2i2","o0nolc","outline","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","p","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["useToggleButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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.styles';\nexport const toggleButtonClassNames = {\n root: 'fui-ToggleButton',\n icon: 'fui-ToggleButton__icon'\n};\nconst useRootCheckedStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n color: tokens.colorNeutralForeground1Selected,\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n [`& .${iconFilledClassName}`]: {\n display: 'inline'\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none'\n },\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1Hover\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed\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 ':hover': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight'\n },\n ':focus': {\n border: '1px solid HighlightText',\n outlineColor: 'Highlight'\n }\n }\n },\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed\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 ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Selected,\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2Hover\n },\n ':hover:active,:active:focus-visible': {\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 ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed\n }\n }\n});\nconst useCheckedAccessibleStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand\n }\n },\n // Appearance variations\n outline: {\n // There's no longer a reason to thicken the outline variant's border\n ...shorthands.borderWidth(tokens.strokeWidthThin)\n },\n primary: {\n // primary has an inner stroke for the checked style\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n outlineOffset: `calc(${tokens.strokeWidthThicker} * -1)`,\n // need to not have the default focus style that removes the outline\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n outlineOffset: `calc(${tokens.strokeWidthThickest} * -1)`\n })\n },\n subtle: {\n // override subtle-appearance-specific icon color on hover\n ':hover': {\n [`& .${toggleButtonClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundOnBrand\n }\n }\n },\n transparent: {\n },\n secondary: {\n }\n});\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled\n }\n },\n // Appearance variations\n outline: {\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n ':hover': {\n ...shorthands.borderColor('transparent')\n },\n ':hover:active,:active:focus-visible': {\n ...shorthands.borderColor('transparent')\n }\n },\n secondary: {\n },\n subtle: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent')\n }\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent')\n },\n ':hover:active,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent')\n }\n }\n});\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations with isAccessible=false\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto'\n }\n }\n});\nconst usePrimaryHighContrastStyles = makeStyles({\n // Do not use primary variant high contrast styles for toggle buttons\n // otherwise there isn't enough difference between on/off states\n base: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('ButtonBorder'),\n color: 'ButtonText',\n forcedColorAdjust: 'auto'\n }\n },\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n ':focus': {\n ...shorthands.borderColor('GrayText')\n }\n }\n }\n});\nexport const useToggleButtonStyles_unstable = (state)=>{\n 'use no memo';\n const rootCheckedStyles = useRootCheckedStyles();\n const accessibleCheckedStyles = useCheckedAccessibleStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;\n state.root.className = mergeClasses(toggleButtonClassNames.root, // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, // Checked styles\n checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], // Opt-in accessible checked styles\n isAccessible && checked && accessibleCheckedStyles.base, isAccessible && appearance && checked && accessibleCheckedStyles[appearance], // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // User provided class name\n state.root.className);\n if (state.icon) {\n state.icon.className = mergeClasses(toggleButtonClassNames.icon, checked && !isAccessible && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);\n }\n useButtonStyles_unstable(state);\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","__styles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","sj55zd","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","D0sxk3","t6yez3","Jwef8y","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Bi91k9c","Bpjbzib","im15vp","Hjvxdg","Gpfmf1","ustxxc","Brsut9c","highContrast","By8wz76","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","B7iucu3","B8gzw0y","Bbkh6qg","F230oe","Bdw8ktp","Bj1xduy","Bhh2cfd","Bahaeuw","Bv2bamp","vxuvv6","Bli9q98","Bx2tt8t","yad0b3","j2fop7","B6rz4yo","Buk7464","Bqg8rp8","pjr8j7","Bgs2klq","Hwei09","Bi9aqk7","Fihjvf","nhyz0p","Buw724y","Bn7qjfh","B0u7xl9","md97jv","h3ptyc","s1kvfj","kogrdj","dqx2i2","o0nolc","outline","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","primary","secondary","subtle","transparent","d","h","m","p","useCheckedAccessibleStyles","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Dhobit","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bpkdmpa","ysa4qo","useRootDisabledStyles","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","accessibleCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","isAccessible","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAMCQ,sBAAsB;;;IAwPtBiG,8BAA8B;;;;uBA1PU,gBAAgB;uCAC5B,kCAAkC;AACpE,+BAA+B;IAClChG,IAAI,EAAE,kBAAkB;IACxBC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,OAAA,EAAA;QAAA9D,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAE,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAG,MAAA,EAAA;QAAAM,OAAA,EAAA;QAAA6C,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,OAAA,EAAA;QAAAnE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAO,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;IAAA;IAAA6C,SAAA,EAAA,CAAA;IAAAC,MAAA,EAAA;QAAArE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAO,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;IAAA;IAAA+C,WAAA,EAAA;QAAAtE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAO,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAgD,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;gBAAAD,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CA6G5B,CAAC;AACF,MAAME,0BAA0B,GAAA,WAAA,OAAGlF,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAO,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;IAAA;IAAAuC,OAAA,EAAA;QAAAxD,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAA0D,OAAA,EAAA;QAAAS,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAhB,MAAA,EAAA;QAAAiB,MAAA,EAAA;IAAA;IAAAhB,WAAA,EAAA,CAAA;IAAAF,SAAA,EAAA,CAAA;AAAA,GAAA;IAAAG,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAG,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;KAAA;IAAAF,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA4ClC,CAAC;AACF,MAAMe,qBAAqB,GAAA,WAAA,GAAG9F,mBAAA,EAAA;IAAAM,IAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAO,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;IAAA;IAAAuC,OAAA,EAAA,CAAA;IAAAK,OAAA,EAAA;QAAAlE,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAS,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAG,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAA8C,SAAA,EAAA,CAAA;IAAAC,MAAA,EAAA;QAAArE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAQ,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAgD,WAAA,EAAA;QAAAtE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAQ,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAiD,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAuD7B,CAAC;AACF,MAAMgB,oBAAoB,GAAA,WAAA,OAAG/F,eAAA,EAAA;IAAAgG,mBAAA,EAAA;QAAApF,MAAA,EAAA;IAAA;IAAAmB,YAAA,EAAA;QAAAO,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAwC,CAAA,EAAA;QAAA;KAAA;IAAAE,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAW5B,CAAC;AACF,MAAMiB,4BAA4B,GAAA,WAAA,OAAGjG,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAA0B,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAA4D,QAAA,EAAA;QAAAjE,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAA2B,MAAA,EAAA;QAAAJ,OAAA,EAAA;YAAA;YAAA;SAAA;QAAAR,OAAA,EAAA;QAAAI,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;AAAA,GAAA;IAAAwB,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA;YAAA;SAAA;KAAA;AAAA,CAoBpC,CAAC;AACK,wCAAwCoB,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,iBAAiB,GAAGhG,oBAAoB,CAAC,CAAC;IAChD,MAAMiG,uBAAuB,GAAGpB,0BAA0B,CAAC,CAAC;IAC5D,MAAMqB,kBAAkB,GAAGT,qBAAqB,CAAC,CAAC;IAClD,MAAMU,iBAAiB,GAAGT,oBAAoB,CAAC,CAAC;IAChD,MAAMU,yBAAyB,GAAGR,4BAA4B,CAAC,CAAC;IAChE,MAAM,EAAES,UAAU,EAAEC,OAAO,EAAET,QAAQ,EAAEU,iBAAiB,EAAEC,YAAAA,EAAc,GAAGT,KAAK;IAChFA,KAAK,CAACjG,IAAI,CAAC2G,SAAS,OAAG/G,mBAAY,EAACG,sBAAsB,CAACC,IAAI,EAAE,+BAAA;IACjEuG,UAAU,KAAK,SAAS,IAAID,yBAAyB,CAACnG,IAAI,EAAEoG,UAAU,KAAK,SAAS,KAAKR,QAAQ,IAAIU,iBAAAA,CAAiB,CAAC,GAAIH,yBAAyB,CAACP,QAAQ,EAAE,iBAAA;IAC/JS,OAAO,IAAIN,iBAAiB,CAAC/F,IAAI,EAAEqG,OAAO,IAAIN,iBAAiB,CAACtE,YAAY,EAAE2E,UAAU,IAAIC,OAAO,IAAIN,iBAAiB,CAACK,UAAU,CAAC,EAAE,mCAAA;IACtIG,YAAY,IAAIF,OAAO,IAAIL,uBAAuB,CAAChG,IAAI,EAAEuG,YAAY,IAAIH,UAAU,IAAIC,OAAO,IAAIL,uBAAuB,CAACI,UAAU,CAAC,EAAE,AACvI,kBADuI;KACtIR,QAAQ,IAAIU,iBAAAA,CAAiB,IAAKL,kBAAkB,CAACjG,IAAI,EAAEoG,UAAU,KAAKR,QAAQ,IAAIU,iBAAAA,CAAiB,CAAC,GAAIL,kBAAkB,CAACG,UAAU,CAAC,EAAE,2BAAA;IAC7IN,KAAK,CAACjG,IAAI,CAAC2G,SAAS,CAAC;IACrB,IAAIV,KAAK,CAAChG,IAAI,EAAE;QACZgG,KAAK,CAAChG,IAAI,CAAC0G,SAAS,OAAG/G,mBAAY,EAACG,sBAAsB,CAACE,IAAI,EAAEuG,OAAO,IAAI,CAACE,YAAY,KAAKH,UAAU,KAAK,QAAQ,IAAIA,UAAU,KAAK,aAAA,CAAa,CAAC,GAAIF,iBAAiB,CAACR,mBAAmB,EAAEQ,iBAAiB,CAACzE,YAAY,EAAEqE,KAAK,CAAChG,IAAI,CAAC0G,SAAS,CAAC;IAC1P;QACA7G,+CAAwB,EAACmG,KAAK,CAAC;IAC/B,OAAOA,KAAK;AAChB,CAAC"}
|
|
@@ -135,6 +135,49 @@ const useRootCheckedStyles = (0, _react.makeStyles)({
|
|
|
135
135
|
}
|
|
136
136
|
}
|
|
137
137
|
});
|
|
138
|
+
const useCheckedAccessibleStyles = (0, _react.makeStyles)({
|
|
139
|
+
// Base styles
|
|
140
|
+
base: {
|
|
141
|
+
backgroundColor: _reacttheme.tokens.colorBrandBackground,
|
|
142
|
+
..._react.shorthands.borderColor('transparent'),
|
|
143
|
+
color: _reacttheme.tokens.colorNeutralForegroundOnBrand,
|
|
144
|
+
':hover': {
|
|
145
|
+
backgroundColor: _reacttheme.tokens.colorBrandBackgroundHover,
|
|
146
|
+
..._react.shorthands.borderColor('transparent'),
|
|
147
|
+
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
|
|
148
|
+
},
|
|
149
|
+
':hover:active,:active:focus-visible': {
|
|
150
|
+
backgroundColor: _reacttheme.tokens.colorBrandBackgroundPressed,
|
|
151
|
+
..._react.shorthands.borderColor('transparent'),
|
|
152
|
+
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
|
|
153
|
+
}
|
|
154
|
+
},
|
|
155
|
+
// Appearance variations
|
|
156
|
+
outline: {
|
|
157
|
+
// There's no longer a reason to thicken the outline variant's border
|
|
158
|
+
..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThin)
|
|
159
|
+
},
|
|
160
|
+
primary: {
|
|
161
|
+
// primary has an inner stroke for the checked style
|
|
162
|
+
outline: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralForegroundOnBrand}`,
|
|
163
|
+
outlineOffset: `calc(${_reacttheme.tokens.strokeWidthThicker} * -1)`,
|
|
164
|
+
// need to not have the default focus style that removes the outline
|
|
165
|
+
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
|
|
166
|
+
outline: `${_reacttheme.tokens.strokeWidthThin} solid ${_reacttheme.tokens.colorNeutralForegroundOnBrand}`,
|
|
167
|
+
outlineOffset: `calc(${_reacttheme.tokens.strokeWidthThickest} * -1)`
|
|
168
|
+
})
|
|
169
|
+
},
|
|
170
|
+
subtle: {
|
|
171
|
+
// override subtle-appearance-specific icon color on hover
|
|
172
|
+
':hover': {
|
|
173
|
+
[`& .${toggleButtonClassNames.icon}`]: {
|
|
174
|
+
color: _reacttheme.tokens.colorNeutralForegroundOnBrand
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
transparent: {},
|
|
179
|
+
secondary: {}
|
|
180
|
+
});
|
|
138
181
|
const useRootDisabledStyles = (0, _react.makeStyles)({
|
|
139
182
|
// Base styles
|
|
140
183
|
base: {
|
|
@@ -190,7 +233,7 @@ const useRootDisabledStyles = (0, _react.makeStyles)({
|
|
|
190
233
|
}
|
|
191
234
|
});
|
|
192
235
|
const useIconCheckedStyles = (0, _react.makeStyles)({
|
|
193
|
-
// Appearance variations
|
|
236
|
+
// Appearance variations with isAccessible=false
|
|
194
237
|
subtleOrTransparent: {
|
|
195
238
|
color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
|
|
196
239
|
},
|
|
@@ -225,13 +268,14 @@ const usePrimaryHighContrastStyles = (0, _react.makeStyles)({
|
|
|
225
268
|
const useToggleButtonStyles_unstable = (state)=>{
|
|
226
269
|
'use no memo';
|
|
227
270
|
const rootCheckedStyles = useRootCheckedStyles();
|
|
271
|
+
const accessibleCheckedStyles = useCheckedAccessibleStyles();
|
|
228
272
|
const rootDisabledStyles = useRootDisabledStyles();
|
|
229
273
|
const iconCheckedStyles = useIconCheckedStyles();
|
|
230
274
|
const primaryHighContrastStyles = usePrimaryHighContrastStyles();
|
|
231
|
-
const { appearance, checked, disabled, disabledFocusable } = state;
|
|
232
|
-
state.root.className = (0, _react.mergeClasses)(toggleButtonClassNames.root, appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], state.root.className);
|
|
275
|
+
const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;
|
|
276
|
+
state.root.className = (0, _react.mergeClasses)(toggleButtonClassNames.root, appearance === 'primary' && primaryHighContrastStyles.base, appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled, checked && rootCheckedStyles.base, checked && rootCheckedStyles.highContrast, appearance && checked && rootCheckedStyles[appearance], isAccessible && checked && accessibleCheckedStyles.base, isAccessible && appearance && checked && accessibleCheckedStyles[appearance], (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], state.root.className);
|
|
233
277
|
if (state.icon) {
|
|
234
|
-
state.icon.className = (0, _react.mergeClasses)(toggleButtonClassNames.icon, checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
|
|
278
|
+
state.icon.className = (0, _react.mergeClasses)(toggleButtonClassNames.icon, checked && !isAccessible && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent, iconCheckedStyles.highContrast, state.icon.className);
|
|
235
279
|
}
|
|
236
280
|
(0, _useButtonStylesstyles.useButtonStyles_unstable)(state);
|
|
237
281
|
return state;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/ToggleButton/useToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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.styles';\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,:active:focus-visible': {\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,:active:focus-visible': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':focus': {\n border: '1px solid HighlightText',\n outlineColor: 'Highlight',\n },\n },\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,:active:focus-visible': {\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,:active:focus-visible': {\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,:active:focus-visible': {\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,:active:focus-visible': {\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,:active:focus-visible': {\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,:active:focus-visible': {\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,:active:focus-visible': {\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,:active:focus-visible': {\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 // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto',\n },\n },\n});\n\nconst usePrimaryHighContrastStyles = makeStyles({\n // Do not use primary variant high contrast styles for toggle buttons\n // otherwise there isn't enough difference between on/off states\n base: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('ButtonBorder'),\n color: 'ButtonText',\n forcedColorAdjust: 'auto',\n },\n },\n\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n 'use no memo';\n\n const rootCheckedStyles = useRootCheckedStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n\n const { appearance, checked, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n toggleButtonClassNames.root,\n\n // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base,\n appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,\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 checked && (appearance === 'subtle' || appearance === 'transparent') && iconCheckedStyles.subtleOrTransparent,\n iconCheckedStyles.highContrast,\n state.icon.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","makeStyles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","backgroundColor","colorNeutralBackground1Selected","borderColor","colorNeutralStroke1","color","colorNeutralForeground1Selected","borderWidth","strokeWidthThin","display","colorNeutralBackground1Hover","colorNeutralStroke1Hover","colorNeutralForeground1Hover","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","colorNeutralForeground1Pressed","highContrast","forcedColorAdjust","border","outlineColor","outline","colorTransparentBackgroundSelected","strokeWidthThicker","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","primary","colorBrandBackgroundSelected","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","secondary","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","transparent","colorNeutralForeground2BrandSelected","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useRootDisabledStyles","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","colorTransparentBackground","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","className"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/components/ToggleButton/useToggleButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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.styles';\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,:active:focus-visible': {\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,:active:focus-visible': {\n backgroundColor: 'HighlightText',\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':focus': {\n border: '1px solid HighlightText',\n outlineColor: 'Highlight',\n },\n },\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,:active:focus-visible': {\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,:active:focus-visible': {\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,:active:focus-visible': {\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,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n});\n\nconst useCheckedAccessibleStyles = makeStyles({\n // Base styles\n base: {\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,:active:focus-visible': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n // Appearance variations\n outline: {\n // There's no longer a reason to thicken the outline variant's border\n ...shorthands.borderWidth(tokens.strokeWidthThin),\n },\n\n primary: {\n // primary has an inner stroke for the checked style\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n outlineOffset: `calc(${tokens.strokeWidthThicker} * -1)`,\n\n // need to not have the default focus style that removes the outline\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralForegroundOnBrand}`,\n outlineOffset: `calc(${tokens.strokeWidthThickest} * -1)`,\n }),\n },\n\n subtle: {\n // override subtle-appearance-specific icon color on hover\n ':hover': {\n [`& .${toggleButtonClassNames.icon}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n },\n\n transparent: {\n /* No styles */\n },\n\n secondary: {\n /* No styles */\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,:active:focus-visible': {\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,:active:focus-visible': {\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,:active:focus-visible': {\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,:active:focus-visible': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useIconCheckedStyles = makeStyles({\n // Appearance variations with isAccessible=false\n subtleOrTransparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n forcedColorAdjust: 'auto',\n },\n },\n});\n\nconst usePrimaryHighContrastStyles = makeStyles({\n // Do not use primary variant high contrast styles for toggle buttons\n // otherwise there isn't enough difference between on/off states\n base: {\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n ...shorthands.borderColor('ButtonBorder'),\n color: 'ButtonText',\n forcedColorAdjust: 'auto',\n },\n },\n\n disabled: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n },\n },\n});\n\nexport const useToggleButtonStyles_unstable = (state: ToggleButtonState): ToggleButtonState => {\n 'use no memo';\n\n const rootCheckedStyles = useRootCheckedStyles();\n const accessibleCheckedStyles = useCheckedAccessibleStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const iconCheckedStyles = useIconCheckedStyles();\n const primaryHighContrastStyles = usePrimaryHighContrastStyles();\n\n const { appearance, checked, disabled, disabledFocusable, isAccessible } = state;\n\n state.root.className = mergeClasses(\n toggleButtonClassNames.root,\n\n // Primary high contrast styles\n appearance === 'primary' && primaryHighContrastStyles.base,\n appearance === 'primary' && (disabled || disabledFocusable) && primaryHighContrastStyles.disabled,\n\n // Checked styles\n checked && rootCheckedStyles.base,\n checked && rootCheckedStyles.highContrast,\n appearance && checked && rootCheckedStyles[appearance],\n\n // Opt-in accessible checked styles\n isAccessible && checked && accessibleCheckedStyles.base,\n isAccessible && appearance && checked && accessibleCheckedStyles[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 checked &&\n !isAccessible &&\n (appearance === 'subtle' || appearance === 'transparent') &&\n iconCheckedStyles.subtleOrTransparent,\n iconCheckedStyles.highContrast,\n state.icon.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["iconFilledClassName","iconRegularClassName","createCustomFocusIndicatorStyle","tokens","shorthands","mergeClasses","makeStyles","useButtonStyles_unstable","toggleButtonClassNames","root","icon","useRootCheckedStyles","base","backgroundColor","colorNeutralBackground1Selected","borderColor","colorNeutralStroke1","color","colorNeutralForeground1Selected","borderWidth","strokeWidthThin","display","colorNeutralBackground1Hover","colorNeutralStroke1Hover","colorNeutralForeground1Hover","colorNeutralBackground1Pressed","colorNeutralStroke1Pressed","colorNeutralForeground1Pressed","highContrast","forcedColorAdjust","border","outlineColor","outline","colorTransparentBackgroundSelected","strokeWidthThicker","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","primary","colorBrandBackgroundSelected","colorNeutralForegroundOnBrand","colorBrandBackgroundHover","colorBrandBackgroundPressed","secondary","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","colorSubtleBackgroundHover","colorNeutralForeground2Hover","colorSubtleBackgroundPressed","colorNeutralForeground2Pressed","transparent","colorNeutralForeground2BrandSelected","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","useCheckedAccessibleStyles","colorBrandBackground","outlineOffset","strokeWidthThickest","useRootDisabledStyles","colorNeutralBackgroundDisabled","colorNeutralStrokeDisabled","colorNeutralForegroundDisabled","colorTransparentBackground","useIconCheckedStyles","subtleOrTransparent","usePrimaryHighContrastStyles","disabled","useToggleButtonStyles_unstable","state","rootCheckedStyles","accessibleCheckedStyles","rootDisabledStyles","iconCheckedStyles","primaryHighContrastStyles","appearance","checked","disabledFocusable","isAccessible","className"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/contexts/ButtonContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ButtonSize } from '../components/Button/Button.types';\n\nconst buttonContext = React.createContext<ButtonContextValue | undefined>(undefined);\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../src/contexts/ButtonContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ButtonSize } from '../components/Button/Button.types';\n\nconst buttonContext = React.createContext<ButtonContextValue | undefined>(undefined);\n\n/**\n * Internal context value used to update default values between internal components\n *\n * @internal\n */\nexport interface ButtonContextValue {\n size?: ButtonSize;\n}\n\nconst buttonContextDefaultValue: ButtonContextValue = {};\n\n/**\n * Internal context provider used to update default values between internal components\n *\n * @internal\n */\nexport const ButtonContextProvider = buttonContext.Provider;\n\n/**\n * Internal context hook used to update default values between internal components\n *\n * @internal\n */\nexport const useButtonContext = (): ButtonContextValue => {\n return React.useContext(buttonContext) ?? buttonContextDefaultValue;\n};\n"],"names":["React","buttonContext","createContext","undefined","buttonContextDefaultValue","ButtonContextProvider","Provider","useButtonContext","useContext"],"mappings":"AAAA;;;;;;;;;;;;yBAuBaK;;;oBAOAE;;;;;iEA5BU,QAAQ;AAG/B,MAAMN,8BAAgBD,OAAME,aAAa,CAAiCC;AAW1E,MAAMC,4BAAgD,CAAC;AAOhD,MAAMC,wBAAwBJ,cAAcK,QAAQ,CAAC;AAOrD,MAAMC,mBAAmB;QACvBP;IAAP,OAAOA,CAAAA,oBAAAA,OAAMQ,UAAU,CAACP,cAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAmCI;AAC5C,EAAE"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -57,6 +57,9 @@ _export(exports, {
|
|
|
57
57
|
toggleButtonClassNames: function() {
|
|
58
58
|
return _ToggleButton.toggleButtonClassNames;
|
|
59
59
|
},
|
|
60
|
+
useButtonBase_unstable: function() {
|
|
61
|
+
return _Button.useButtonBase_unstable;
|
|
62
|
+
},
|
|
60
63
|
useButtonContext: function() {
|
|
61
64
|
return _index1.useButtonContext;
|
|
62
65
|
},
|
|
@@ -84,6 +87,9 @@ _export(exports, {
|
|
|
84
87
|
useSplitButton_unstable: function() {
|
|
85
88
|
return _SplitButton.useSplitButton_unstable;
|
|
86
89
|
},
|
|
90
|
+
useToggleButtonBase_unstable: function() {
|
|
91
|
+
return _ToggleButton.useToggleButtonBase_unstable;
|
|
92
|
+
},
|
|
87
93
|
useToggleButtonStyles_unstable: function() {
|
|
88
94
|
return _ToggleButton.useToggleButtonStyles_unstable;
|
|
89
95
|
},
|
|
@@ -101,8 +107,3 @@ const _SplitButton = require("./SplitButton");
|
|
|
101
107
|
const _ToggleButton = require("./ToggleButton");
|
|
102
108
|
const _index = require("./utils/index");
|
|
103
109
|
const _index1 = require("./contexts/index");
|
|
104
|
-
// Experimental APIs - will be uncommented in the experimental release branch
|
|
105
|
-
// export { useButtonBase_unstable } from './Button';
|
|
106
|
-
// export type { ButtonBaseProps, ButtonBaseState } from './Button';
|
|
107
|
-
// export { useToggleButtonBase_unstable } from './ToggleButton';
|
|
108
|
-
// export type { ToggleButtonBaseProps, ToggleButtonBaseState } from './ToggleButton';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"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 {
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Button,\n buttonClassNames,\n renderButton_unstable,\n useButtonStyles_unstable,\n useButton_unstable,\n useButtonBase_unstable,\n} from './Button';\nexport type { ButtonProps, ButtonSlots, ButtonState, ButtonBaseProps, ButtonBaseState } 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 useToggleButtonBase_unstable,\n} from './ToggleButton';\nexport type {\n ToggleButtonProps,\n ToggleButtonState,\n ToggleButtonBaseProps,\n ToggleButtonBaseState,\n} from './ToggleButton';\n\nexport { useToggleState } from './utils/index';\n\nexport { ButtonContextProvider, useButtonContext } from './contexts/index';\nexport type { ButtonContextValue } from './contexts/index';\n"],"names":["Button","buttonClassNames","renderButton_unstable","useButtonStyles_unstable","useButton_unstable","useButtonBase_unstable","CompoundButton","compoundButtonClassNames","renderCompoundButton_unstable","useCompoundButtonStyles_unstable","useCompoundButton_unstable","MenuButton","menuButtonClassNames","renderMenuButton_unstable","useMenuButtonStyles_unstable","useMenuButton_unstable","SplitButton","renderSplitButton_unstable","splitButtonClassNames","useSplitButtonStyles_unstable","useSplitButton_unstable","ToggleButton","renderToggleButton_unstable","toggleButtonClassNames","useToggleButtonStyles_unstable","useToggleButton_unstable","useToggleButtonBase_unstable","useToggleState","ButtonContextProvider","useButtonContext"],"mappings":";;;;;;;;;;;UACQ;eAANA;;;eAiDO4B,6BAAqB;;;eAxC5BtB,8BAAc;;;eAQdK,sBAAU;;IAQVK;uCAAW;;IAQXK;yCAAY;;;eAhCZpB,wBAAgB;;IAShBM;uDAAwB;;;eAQxBK,gCAAoB;;yBAhBC;eAArBV;;IASAM,6BAA6B;;;IAQ7BK;oDAAyB;;;eAOzBI,uCAA0B;;;eAQ1BK,yCAA2B;;;eAP3BJ,kCAAqB;;;eAQrBK,oCAAsB;;;eA9BtBlB,8BAAsB;;;eA4CQwB,wBAAgB;;;eA9C9C1B,gCAAwB;;;eACxBC,0BAAkB;;;eAQlBK,gDAAgC;;;eAChCC,0CAA0B;;;eAO1BI,wCAA4B;;;eAC5BC,kCAAsB;;;eAOtBI,0CAA6B;;;eAC7BC,oCAAuB;;IASvBM;yDAA4B;;;eAF5BF,4CAA8B;;;eAC9BC,sCAAwB;;;eAUjBE,qBAAc;;;wBAzChB,WAAW;gCAQX,mBAAmB;4BAQnB,eAAe;6BAQf,gBAAgB;8BAShB,iBAAiB;uBAQO,gBAAgB;wBAES,mBAAmB"}
|
|
@@ -13,7 +13,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
15
|
function useToggleState(props, state) {
|
|
16
|
-
const { checked, defaultChecked, disabled, disabledFocusable } = props;
|
|
16
|
+
const { checked, defaultChecked, disabled, disabledFocusable, isAccessible = false } = props;
|
|
17
17
|
const { onClick, role } = state.root;
|
|
18
18
|
const [checkedValue, setCheckedValue] = (0, _reactutilities.useControllableState)({
|
|
19
19
|
state: checked,
|
|
@@ -37,6 +37,7 @@ function useToggleState(props, state) {
|
|
|
37
37
|
return {
|
|
38
38
|
...state,
|
|
39
39
|
checked: checkedValue,
|
|
40
|
+
isAccessible,
|
|
40
41
|
root: {
|
|
41
42
|
...state.root,
|
|
42
43
|
[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed']: checkedValue,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/useToggleState.ts"],"sourcesContent":["'use client';\n\nimport * 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
|
|
1
|
+
{"version":3,"sources":["../src/utils/useToggleState.ts"],"sourcesContent":["'use client';\n\nimport * 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<\n ToggleButtonProps,\n 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable' | 'isAccessible'\n >,\n TButtonState extends Pick<ButtonState, 'root'>,\n TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root' | 'isAccessible'>,\n>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState {\n const { checked, defaultChecked, disabled, disabledFocusable, isAccessible = false } = 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: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\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 isAccessible,\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"],"names":["React","mergeCallbacks","useControllableState","useEventCallback","useToggleState","props","state","checked","defaultChecked","disabled","disabledFocusable","isAccessible","onClick","role","root","checkedValue","setCheckedValue","defaultState","initialState","isCheckboxTypeRole","onToggleClick","useCallback","ev","defaultPrevented"],"mappings":"AAAA;;;;;+BAOgBI;;;;;;;iEALO,QAAQ;gCACwC,4BAA4B;AAI5F,wBAOLC,KAAyB,EAAEC,KAAmB;IAC9C,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,eAAe,KAAK,EAAE,GAAGN;IACvF,MAAM,EAAEO,OAAO,EAAEC,IAAI,EAAE,GAAGP,MAAMQ,IAAI;IAEpC,MAAM,CAACC,cAAcC,gBAAgB,OAAGd,oCAAAA,EAAqB;QAC3DI,OAAOC;QACPU,cAAcT;QACdU,cAAc;IAChB;IAEA,MAAMC,qBAAqBN,SAAS,sBAAsBA,SAAS;IAEnE,MAAMO,gBAAgBpB,OAAMqB,WAAW,CACrC,CAACC;QACC,IAAI,CAACb,YAAY,CAACC,mBAAmB;YACnC,IAAIY,GAAGC,gBAAgB,EAAE;gBACvB;YACF;YAEAP,gBAAgB,CAACD;QACnB;IACF,GACA;QAACA;QAAcN;QAAUC;QAAmBM;KAAgB;IAG9D,OAAO;QACL,GAAGV,KAAK;QAERC,SAASQ;QAETJ;QAEAG,MAAM;YACJ,GAAGR,MAAMQ,IAAI;YACb,CAACK,qBAAqB,iBAAiB,eAAe,EAAEJ;YACxDH,aAAST,gCAAAA,MACPF,8BAAAA,EAAeW,SAA2EQ;QAE9F;IACF;AACF"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-button",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.9.1",
|
|
4
4
|
"description": "Fluent UI React Button component.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -13,13 +13,13 @@
|
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@fluentui/keyboard-keys": "^9.0.8",
|
|
16
|
-
"@fluentui/react-aria": "^9.17.
|
|
16
|
+
"@fluentui/react-aria": "^9.17.11",
|
|
17
17
|
"@fluentui/react-icons": "^2.0.245",
|
|
18
|
-
"@fluentui/react-jsx-runtime": "^9.4.
|
|
18
|
+
"@fluentui/react-jsx-runtime": "^9.4.2",
|
|
19
19
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
20
|
-
"@fluentui/react-tabster": "^9.26.
|
|
20
|
+
"@fluentui/react-tabster": "^9.26.14",
|
|
21
21
|
"@fluentui/react-theme": "^9.2.1",
|
|
22
|
-
"@fluentui/react-utilities": "^9.26.
|
|
22
|
+
"@fluentui/react-utilities": "^9.26.3",
|
|
23
23
|
"@griffel/react": "^1.5.32",
|
|
24
24
|
"@swc/helpers": "^0.5.1"
|
|
25
25
|
},
|