npm - @fluentui/react-button - Versions diffs - 0.0.0-nightly-20250703-1103.1 → 0.0.0-nightly-20250707-0406.1 - Mend

@fluentui/react-button 0.0.0-nightly-20250703-1103.1 → 0.0.0-nightly-20250707-0406.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.

Files changed (22) hide show

package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.raw.js DELETED Viewed

@@ -1,253 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    compoundButtonClassNames: function() {
-        return compoundButtonClassNames;
-    },
-    useCompoundButtonStyles_unstable: function() {
-        return useCompoundButtonStyles_unstable;
-    }
-});
-const _reacttheme = require("@fluentui/react-theme");
-const _react = require("@griffel/react");
-const _useButtonStylesstyles = require("../Button/useButtonStyles.styles");
-const compoundButtonClassNames = {
-    root: 'fui-CompoundButton',
-    icon: 'fui-CompoundButton__icon',
-    contentContainer: 'fui-CompoundButton__contentContainer',
-    secondaryContent: 'fui-CompoundButton__secondaryContent'
-};
-const useRootStyles = (0, _react.makeStyles)({
-    // Base styles
-    base: {
-        height: 'auto',
-        [`& .${compoundButtonClassNames.secondaryContent}`]: {
-            color: _reacttheme.tokens.colorNeutralForeground2
-        },
-        ':hover': {
-            [`& .${compoundButtonClassNames.secondaryContent}`]: {
-                color: _reacttheme.tokens.colorNeutralForeground2Hover
-            }
-        },
-        ':hover:active': {
-            [`& .${compoundButtonClassNames.secondaryContent}`]: {
-                color: _reacttheme.tokens.colorNeutralForeground2Pressed
-            }
-        }
-    },
-    // High contrast styles
-    highContrast: {
-        '@media (forced-colors: active)': {
-            ':hover': {
-                [`& .${compoundButtonClassNames.secondaryContent}`]: {
-                    color: 'Highlight'
-                }
-            },
-            ':hover:active': {
-                [`& .${compoundButtonClassNames.secondaryContent}`]: {
-                    color: 'Highlight'
-                }
-            }
-        }
-    },
-    // Appearance variations
-    outline: {},
-    primary: {
-        [`& .${compoundButtonClassNames.secondaryContent}`]: {
-            color: _reacttheme.tokens.colorNeutralForegroundOnBrand
-        },
-        ':hover': {
-            [`& .${compoundButtonClassNames.secondaryContent}`]: {
-                color: _reacttheme.tokens.colorNeutralForegroundOnBrand
-            }
-        },
-        ':hover:active': {
-            [`& .${compoundButtonClassNames.secondaryContent}`]: {
-                color: _reacttheme.tokens.colorNeutralForegroundOnBrand
-            }
-        },
-        '@media (forced-colors: active)': {
-            [`& .${compoundButtonClassNames.secondaryContent}`]: {
-                color: 'HighlightText'
-            }
-        }
-    },
-    secondary: {},
-    subtle: {
-        [`& .${compoundButtonClassNames.secondaryContent}`]: {
-            color: _reacttheme.tokens.colorNeutralForeground2
-        },
-        ':hover': {
-            [`& .${compoundButtonClassNames.secondaryContent}`]: {
-                color: _reacttheme.tokens.colorNeutralForeground2Hover
-            }
-        },
-        ':hover:active': {
-            [`& .${compoundButtonClassNames.secondaryContent}`]: {
-                color: _reacttheme.tokens.colorNeutralForeground2Pressed
-            }
-        },
-        '@media (forced-colors: active)': {
-            ':hover': {
-                [`& .${compoundButtonClassNames.secondaryContent}`]: {
-                    color: 'Canvas'
-                }
-            },
-            ':hover:active': {
-                [`& .${compoundButtonClassNames.secondaryContent}`]: {
-                    color: 'Canvas'
-                }
-            }
-        }
-    },
-    transparent: {
-        [`& .${compoundButtonClassNames.secondaryContent}`]: {
-            color: _reacttheme.tokens.colorNeutralForeground2
-        },
-        ':hover': {
-            [`& .${compoundButtonClassNames.secondaryContent}`]: {
-                color: _reacttheme.tokens.colorNeutralForeground2BrandHover
-            }
-        },
-        ':hover:active': {
-            [`& .${compoundButtonClassNames.secondaryContent}`]: {
-                color: _reacttheme.tokens.colorNeutralForeground2BrandPressed
-            }
-        }
-    },
-    // Size variations
-    small: {
-        padding: `${_reacttheme.tokens.spacingHorizontalS} ${_reacttheme.tokens.spacingHorizontalS} ${_reacttheme.tokens.spacingHorizontalMNudge} ${_reacttheme.tokens.spacingHorizontalS}`,
-        fontSize: _reacttheme.tokens.fontSizeBase300,
-        lineHeight: _reacttheme.tokens.lineHeightBase300
-    },
-    medium: {
-        padding: `14px ${_reacttheme.tokens.spacingHorizontalM} ${_reacttheme.tokens.spacingHorizontalL} ${_reacttheme.tokens.spacingHorizontalM}`,
-        fontSize: _reacttheme.tokens.fontSizeBase300,
-        lineHeight: _reacttheme.tokens.lineHeightBase300
-    },
-    large: {
-        padding: `18px ${_reacttheme.tokens.spacingHorizontalL} ${_reacttheme.tokens.spacingHorizontalXL} ${_reacttheme.tokens.spacingHorizontalL}`,
-        fontSize: _reacttheme.tokens.fontSizeBase400,
-        lineHeight: _reacttheme.tokens.lineHeightBase400
-    },
-    // Disabled styles
-    disabled: {
-        [`& .${compoundButtonClassNames.secondaryContent}`]: {
-            color: _reacttheme.tokens.colorNeutralForegroundDisabled
-        },
-        ':hover': {
-            [`& .${compoundButtonClassNames.secondaryContent}`]: {
-                color: _reacttheme.tokens.colorNeutralForegroundDisabled
-            }
-        },
-        ':hover:active': {
-            [`& .${compoundButtonClassNames.secondaryContent}`]: {
-                color: _reacttheme.tokens.colorNeutralForegroundDisabled
-            }
-        }
-    },
-    // Disabled high contrast styles
-    disabledHighContrast: {
-        '@media (forced-colors: active)': {
-            [`& .${compoundButtonClassNames.secondaryContent}`]: {
-                color: 'GrayText'
-            },
-            ':hover': {
-                [`& .${compoundButtonClassNames.secondaryContent}`]: {
-                    color: 'GrayText'
-                }
-            },
-            ':hover:active': {
-                [`& .${compoundButtonClassNames.secondaryContent}`]: {
-                    color: 'GrayText'
-                }
-            }
-        }
-    }
-});
-const useRootIconOnlyStyles = (0, _react.makeStyles)({
-    // Size variations
-    small: {
-        padding: _reacttheme.tokens.spacingHorizontalXS,
-        maxWidth: '48px',
-        minWidth: '48px'
-    },
-    medium: {
-        padding: _reacttheme.tokens.spacingHorizontalSNudge,
-        maxWidth: '52px',
-        minWidth: '52px'
-    },
-    large: {
-        padding: _reacttheme.tokens.spacingHorizontalS,
-        maxWidth: '56px',
-        minWidth: '56px'
-    }
-});
-const useIconStyles = (0, _react.makeStyles)({
-    // Base styles
-    base: {
-        fontSize: '40px',
-        height: '40px',
-        width: '40px'
-    },
-    // Icon position variations
-    before: {
-        marginRight: _reacttheme.tokens.spacingHorizontalM
-    },
-    after: {
-        marginLeft: _reacttheme.tokens.spacingHorizontalM
-    }
-});
-const useContentContainerStyles = (0, _react.makeStyles)({
-    // Base styles
-    base: {
-        display: 'flex',
-        flexDirection: 'column',
-        textAlign: 'left'
-    }
-});
-const useSecondaryContentStyles = (0, _react.makeStyles)({
-    // Base styles
-    base: {
-        lineHeight: '100%',
-        fontWeight: _reacttheme.tokens.fontWeightRegular
-    },
-    // Size variations
-    small: {
-        fontSize: _reacttheme.tokens.fontSizeBase200
-    },
-    medium: {
-        fontSize: _reacttheme.tokens.fontSizeBase200
-    },
-    large: {
-        fontSize: _reacttheme.tokens.fontSizeBase300
-    }
-});
-const useCompoundButtonStyles_unstable = (state)=>{
-    'use no memo';
-    const rootStyles = useRootStyles();
-    const rootIconOnlyStyles = useRootIconOnlyStyles();
-    const iconStyles = useIconStyles();
-    const contentContainerStyles = useContentContainerStyles();
-    const secondaryContentStyles = useSecondaryContentStyles();
-    const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;
-    state.root.className = (0, _react.mergeClasses)(compoundButtonClassNames.root, rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, iconOnly && rootIconOnlyStyles[size], state.root.className);
-    state.contentContainer.className = (0, _react.mergeClasses)(compoundButtonClassNames.contentContainer, contentContainerStyles.base, state.contentContainer.className);
-    if (state.icon) {
-        state.icon.className = (0, _react.mergeClasses)(compoundButtonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], state.icon.className);
-    }
-    if (state.secondaryContent) {
-        state.secondaryContent.className = (0, _react.mergeClasses)(compoundButtonClassNames.secondaryContent, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className);
-    }
-    (0, _useButtonStylesstyles.useButtonStyles_unstable)(state);
-    return state;
-};

package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.styles.raw.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../src/components/CompoundButton/useCompoundButtonStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { mergeClasses, makeStyles } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';\n\nexport const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {\n root: 'fui-CompoundButton',\n icon: 'fui-CompoundButton__icon',\n contentContainer: 'fui-CompoundButton__contentContainer',\n secondaryContent: 'fui-CompoundButton__secondaryContent',\n};\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n height: 'auto',\n\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Highlight',\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Highlight',\n },\n },\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n\n '@media (forced-colors: active)': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'HighlightText',\n },\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Hover,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2Pressed,\n },\n },\n\n '@media (forced-colors: active)': {\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Canvas',\n },\n },\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'Canvas',\n },\n },\n },\n },\n transparent: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandHover,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n },\n\n // Size variations\n small: {\n padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalS} ${tokens.spacingHorizontalMNudge} ${tokens.spacingHorizontalS}`,\n\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n medium: {\n padding: `14px ${tokens.spacingHorizontalM} ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalM}`,\n\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n large: {\n padding: `18px ${tokens.spacingHorizontalL} ${tokens.spacingHorizontalXL} ${tokens.spacingHorizontalL}`,\n\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n\n // Disabled styles\n disabled: {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText',\n },\n\n ':hover': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText',\n },\n },\n\n ':hover:active': {\n [`& .${compoundButtonClassNames.secondaryContent}`]: {\n color: 'GrayText',\n },\n },\n },\n },\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n padding: tokens.spacingHorizontalXS,\n\n maxWidth: '48px',\n minWidth: '48px',\n },\n medium: {\n padding: tokens.spacingHorizontalSNudge,\n\n maxWidth: '52px',\n minWidth: '52px',\n },\n large: {\n padding: tokens.spacingHorizontalS,\n\n maxWidth: '56px',\n minWidth: '56px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n fontSize: '40px',\n height: '40px',\n width: '40px',\n },\n\n // Icon position variations\n before: {\n marginRight: tokens.spacingHorizontalM,\n },\n after: {\n marginLeft: tokens.spacingHorizontalM,\n },\n});\n\nconst useContentContainerStyles = makeStyles({\n // Base styles\n base: {\n display: 'flex',\n flexDirection: 'column',\n textAlign: 'left',\n },\n});\n\nconst useSecondaryContentStyles = makeStyles({\n // Base styles\n base: {\n lineHeight: '100%',\n fontWeight: tokens.fontWeightRegular,\n },\n\n // Size variations\n small: {\n fontSize: tokens.fontSizeBase200,\n },\n medium: {\n fontSize: tokens.fontSizeBase200,\n },\n large: {\n fontSize: tokens.fontSizeBase300,\n },\n});\n\nexport const useCompoundButtonStyles_unstable = (state: CompoundButtonState): CompoundButtonState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n const contentContainerStyles = useContentContainerStyles();\n const secondaryContentStyles = useSecondaryContentStyles();\n\n const { appearance, disabled, disabledFocusable, iconOnly, iconPosition, size } = state;\n\n state.root.className = mergeClasses(\n compoundButtonClassNames.root,\n\n // Root styles\n rootStyles.base,\n rootStyles.highContrast,\n appearance && rootStyles[appearance],\n rootStyles[size],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootStyles.disabled,\n (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n state.contentContainer.className = mergeClasses(\n compoundButtonClassNames.contentContainer,\n contentContainerStyles.base,\n state.contentContainer.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n compoundButtonClassNames.icon,\n iconStyles.base,\n state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n state.icon.className,\n );\n }\n\n if (state.secondaryContent) {\n state.secondaryContent.className = mergeClasses(\n compoundButtonClassNames.secondaryContent,\n secondaryContentStyles.base,\n secondaryContentStyles[size],\n state.secondaryContent.className,\n );\n }\n\n useButtonStyles_unstable(state);\n\n return state;\n};\n"],"names":["compoundButtonClassNames","useCompoundButtonStyles_unstable","root","icon","contentContainer","secondaryContent","useRootStyles","makeStyles","base","height","color","tokens","colorNeutralForeground2","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","highContrast","outline","primary","colorNeutralForegroundOnBrand","secondary","subtle","transparent","colorNeutralForeground2BrandHover","colorNeutralForeground2BrandPressed","small","padding","spacingHorizontalS","spacingHorizontalMNudge","fontSize","fontSizeBase300","lineHeight","lineHeightBase300","medium","spacingHorizontalM","spacingHorizontalL","large","spacingHorizontalXL","fontSizeBase400","lineHeightBase400","disabled","colorNeutralForegroundDisabled","disabledHighContrast","useRootIconOnlyStyles","spacingHorizontalXS","maxWidth","minWidth","spacingHorizontalSNudge","useIconStyles","width","before","marginRight","after","marginLeft","useContentContainerStyles","display","flexDirection","textAlign","useSecondaryContentStyles","fontWeight","fontWeightRegular","fontSizeBase200","state","rootStyles","rootIconOnlyStyles","iconStyles","contentContainerStyles","secondaryContentStyles","appearance","disabledFocusable","iconOnly","iconPosition","size","className","mergeClasses","children","undefined","useButtonStyles_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.raw.js DELETED Viewed

@@ -1,129 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    menuButtonClassNames: function() {
-        return menuButtonClassNames;
-    },
-    useMenuButtonStyles_unstable: function() {
-        return useMenuButtonStyles_unstable;
-    }
-});
-const _reacticons = require("@fluentui/react-icons");
-const _reacttheme = require("@fluentui/react-theme");
-const _react = require("@griffel/react");
-const _useButtonStylesstyles = require("../Button/useButtonStyles.styles");
-const menuButtonClassNames = {
-    root: 'fui-MenuButton',
-    icon: 'fui-MenuButton__icon',
-    menuIcon: 'fui-MenuButton__menuIcon'
-};
-const useRootExpandedStyles = (0, _react.makeStyles)({
-    base: {
-        [`& .${_reacticons.iconFilledClassName}`]: {
-            display: 'inline'
-        },
-        [`& .${_reacticons.iconRegularClassName}`]: {
-            display: 'none'
-        }
-    },
-    // Appearance variations
-    outline: {
-        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Selected),
-        ..._react.shorthands.borderWidth(_reacttheme.tokens.strokeWidthThicker),
-        color: _reacttheme.tokens.colorNeutralForeground1Selected
-    },
-    primary: {
-        backgroundColor: _reacttheme.tokens.colorBrandBackgroundSelected
-    },
-    secondary: {
-        backgroundColor: _reacttheme.tokens.colorNeutralBackground1Selected,
-        ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1Selected),
-        color: _reacttheme.tokens.colorNeutralForeground1Selected
-    },
-    subtle: {
-        backgroundColor: _reacttheme.tokens.colorSubtleBackgroundSelected,
-        color: _reacttheme.tokens.colorNeutralForeground2Selected
-    },
-    transparent: {
-        backgroundColor: _reacttheme.tokens.colorTransparentBackgroundSelected,
-        color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
-    }
-});
-const useIconExpandedStyles = (0, _react.makeStyles)({
-    // Appearance variations
-    outline: {
-        color: _reacttheme.tokens.colorNeutralForeground1Selected
-    },
-    primary: {},
-    secondary: {
-        color: _reacttheme.tokens.colorNeutralForeground1Selected
-    },
-    subtle: {
-        color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
-    },
-    transparent: {
-        color: _reacttheme.tokens.colorNeutralForeground2BrandSelected
-    },
-    highContrast: {
-        // High contrast styles
-        '@media (forced-colors: active)': {
-            ':hover': {
-                color: 'Highlight'
-            }
-        }
-    }
-});
-const useMenuIconStyles = (0, _react.makeStyles)({
-    base: {
-        lineHeight: 0
-    },
-    // Size appearance
-    small: {
-        fontSize: '12px',
-        height: '12px',
-        lineHeight: _reacttheme.tokens.lineHeightBase200,
-        width: '12px'
-    },
-    medium: {
-        fontSize: '12px',
-        height: '12px',
-        lineHeight: _reacttheme.tokens.lineHeightBase200,
-        width: '12px'
-    },
-    large: {
-        fontSize: '16px',
-        height: '16px',
-        lineHeight: _reacttheme.tokens.lineHeightBase400,
-        width: '16px'
-    },
-    // Not-icon only
-    notIconOnly: {
-        marginLeft: _reacttheme.tokens.spacingHorizontalXS
-    }
-});
-const useMenuButtonStyles_unstable = (state)=>{
-    'use no memo';
-    const rootExpandedStyles = useRootExpandedStyles();
-    const iconExpandedStyles = useIconExpandedStyles();
-    const menuIconStyles = useMenuIconStyles();
-    state.root.className = (0, _react.mergeClasses)(menuButtonClassNames.root, state.root['aria-expanded'] && rootExpandedStyles.base, state.root['aria-expanded'] && rootExpandedStyles[state.appearance], state.root.className);
-    if (state.icon) {
-        state.icon.className = (0, _react.mergeClasses)(menuButtonClassNames.icon, state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast, state.icon.className);
-    }
-    if (state.menuIcon) {
-        state.menuIcon.className = (0, _react.mergeClasses)(menuButtonClassNames.menuIcon, menuIconStyles.base, menuIconStyles[state.size], !state.iconOnly && menuIconStyles.notIconOnly, state.menuIcon.className);
-    }
-    (0, _useButtonStylesstyles.useButtonStyles_unstable)({
-        ...state,
-        iconPosition: 'before'
-    });
-    return state;
-};

package/lib-commonjs/components/MenuButton/useMenuButtonStyles.styles.raw.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../src/components/MenuButton/useMenuButtonStyles.styles.ts"],"sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { mergeClasses, makeStyles, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable } from '../Button/useButtonStyles.styles';\nimport type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';\n\nexport const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {\n root: 'fui-MenuButton',\n icon: 'fui-MenuButton__icon',\n menuIcon: 'fui-MenuButton__menuIcon',\n};\n\nconst useRootExpandedStyles = makeStyles({\n base: {\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n // Appearance variations\n outline: {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n ...shorthands.borderWidth(tokens.strokeWidthThicker),\n color: tokens.colorNeutralForeground1Selected,\n },\n primary: {\n backgroundColor: tokens.colorBrandBackgroundSelected,\n },\n secondary: {\n backgroundColor: tokens.colorNeutralBackground1Selected,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Selected),\n color: tokens.colorNeutralForeground1Selected,\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackgroundSelected,\n color: tokens.colorNeutralForeground2Selected,\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackgroundSelected,\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n});\n\nconst useIconExpandedStyles = makeStyles({\n // Appearance variations\n outline: {\n color: tokens.colorNeutralForeground1Selected,\n },\n primary: {\n /* The primary styles are exactly the same as the base styles. */\n },\n secondary: {\n color: tokens.colorNeutralForeground1Selected,\n },\n subtle: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n transparent: {\n color: tokens.colorNeutralForeground2BrandSelected,\n },\n highContrast: {\n // High contrast styles\n '@media (forced-colors: active)': {\n ':hover': {\n color: 'Highlight',\n },\n },\n },\n});\n\nconst useMenuIconStyles = makeStyles({\n base: {\n lineHeight: 0,\n },\n\n // Size appearance\n small: {\n fontSize: '12px',\n height: '12px',\n lineHeight: tokens.lineHeightBase200,\n width: '12px',\n },\n medium: {\n fontSize: '12px',\n height: '12px',\n lineHeight: tokens.lineHeightBase200,\n width: '12px',\n },\n large: {\n fontSize: '16px',\n height: '16px',\n lineHeight: tokens.lineHeightBase400,\n width: '16px',\n },\n\n // Not-icon only\n notIconOnly: {\n marginLeft: tokens.spacingHorizontalXS,\n },\n});\n\nexport const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {\n 'use no memo';\n\n const rootExpandedStyles = useRootExpandedStyles();\n const iconExpandedStyles = useIconExpandedStyles();\n const menuIconStyles = useMenuIconStyles();\n\n state.root.className = mergeClasses(\n menuButtonClassNames.root,\n state.root['aria-expanded'] && rootExpandedStyles.base,\n state.root['aria-expanded'] && rootExpandedStyles[state.appearance],\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(\n menuButtonClassNames.icon,\n state.root['aria-expanded'] && iconExpandedStyles[state.appearance] && iconExpandedStyles.highContrast,\n state.icon.className,\n );\n }\n\n if (state.menuIcon) {\n state.menuIcon.className = mergeClasses(\n menuButtonClassNames.menuIcon,\n menuIconStyles.base,\n menuIconStyles[state.size],\n !state.iconOnly && menuIconStyles.notIconOnly,\n state.menuIcon.className,\n );\n }\n\n useButtonStyles_unstable({ ...state, iconPosition: 'before' });\n\n return state;\n};\n"],"names":["menuButtonClassNames","useMenuButtonStyles_unstable","root","icon","menuIcon","useRootExpandedStyles","makeStyles","base","iconFilledClassName","display","iconRegularClassName","outline","shorthands","borderColor","tokens","colorNeutralStroke1Selected","borderWidth","strokeWidthThicker","color","colorNeutralForeground1Selected","primary","backgroundColor","colorBrandBackgroundSelected","secondary","colorNeutralBackground1Selected","subtle","colorSubtleBackgroundSelected","colorNeutralForeground2Selected","transparent","colorTransparentBackgroundSelected","colorNeutralForeground2BrandSelected","useIconExpandedStyles","highContrast","useMenuIconStyles","lineHeight","small","fontSize","height","lineHeightBase200","width","medium","large","lineHeightBase400","notIconOnly","marginLeft","spacingHorizontalXS","state","rootExpandedStyles","iconExpandedStyles","menuIconStyles","className","mergeClasses","appearance","size","iconOnly","useButtonStyles_unstable","iconPosition"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.js DELETED Viewed

@@ -1,174 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    splitButtonClassNames: function() {
-        return splitButtonClassNames;
-    },
-    useSplitButtonStyles_unstable: function() {
-        return useSplitButtonStyles_unstable;
-    }
-});
-const _react = require("@griffel/react");
-const _reacttabster = require("@fluentui/react-tabster");
-const _reacttheme = require("@fluentui/react-theme");
-const splitButtonClassNames = {
-    root: 'fui-SplitButton',
-    menuButton: 'fui-SplitButton__menuButton',
-    primaryActionButton: 'fui-SplitButton__primaryActionButton'
-};
-// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:
-// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum
-const MIN_TARGET_SIZE = '24px';
-const useFocusStyles = (0, _react.makeStyles)({
-    primaryActionButton: (0, _reacttabster.createCustomFocusIndicatorStyle)({
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0
-    }),
-    menuButton: (0, _reacttabster.createCustomFocusIndicatorStyle)({
-        borderLeftWidth: 0,
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0
-    })
-});
-const useRootStyles = (0, _react.makeStyles)({
-    // Base styles
-    base: {
-        display: 'inline-flex',
-        justifyContent: 'stretch',
-        position: 'relative',
-        verticalAlign: 'middle',
-        [`& .${splitButtonClassNames.primaryActionButton}`]: {
-            borderTopRightRadius: 0,
-            borderBottomRightRadius: 0
-        },
-        [`& .${splitButtonClassNames.menuButton}`]: {
-            borderLeftWidth: 0,
-            borderTopLeftRadius: 0,
-            borderBottomLeftRadius: 0,
-            minWidth: MIN_TARGET_SIZE
-        }
-    },
-    // Appearance variations
-    outline: {},
-    primary: {
-        [`& .${splitButtonClassNames.primaryActionButton}`]: {
-            borderRightColor: _reacttheme.tokens.colorNeutralStrokeOnBrand
-        },
-        ':hover': {
-            [`& .${splitButtonClassNames.primaryActionButton}`]: {
-                borderRightColor: _reacttheme.tokens.colorNeutralStrokeOnBrand
-            }
-        },
-        ':hover:active': {
-            [`& .${splitButtonClassNames.primaryActionButton}`]: {
-                borderRightColor: _reacttheme.tokens.colorNeutralStrokeOnBrand
-            }
-        },
-        '@media (forced-colors: active)': {
-            [`& .${splitButtonClassNames.primaryActionButton}`]: {
-                borderRightColor: 'HighlightText'
-            },
-            ':hover': {
-                [`& .${splitButtonClassNames.primaryActionButton}`]: {
-                    borderRightColor: 'Highlight'
-                }
-            },
-            ':hover:active': {
-                [`& .${splitButtonClassNames.primaryActionButton}`]: {
-                    borderRightColor: 'Highlight'
-                }
-            }
-        }
-    },
-    secondary: {},
-    subtle: {
-        [`& .${splitButtonClassNames.primaryActionButton}`]: {
-            borderRightColor: _reacttheme.tokens.colorTransparentBackground
-        },
-        ':hover': {
-            [`& .${splitButtonClassNames.primaryActionButton}`]: {
-                borderRightColor: _reacttheme.tokens.colorTransparentBackgroundHover
-            }
-        },
-        ':hover:active': {
-            [`& .${splitButtonClassNames.primaryActionButton}`]: {
-                borderRightColor: _reacttheme.tokens.colorTransparentBackgroundPressed
-            }
-        }
-    },
-    transparent: {
-        [`& .${splitButtonClassNames.primaryActionButton}`]: {
-            borderRightColor: _reacttheme.tokens.colorTransparentBackground
-        },
-        ':hover': {
-            [`& .${splitButtonClassNames.primaryActionButton}`]: {
-                borderRightColor: _reacttheme.tokens.colorTransparentBackgroundHover
-            }
-        },
-        ':hover:active': {
-            [`& .${splitButtonClassNames.primaryActionButton}`]: {
-                borderRightColor: _reacttheme.tokens.colorTransparentBackgroundPressed
-            }
-        }
-    },
-    // Shape variations
-    circular: {},
-    rounded: {},
-    square: {},
-    // Disabled styles
-    disabled: {
-        [`& .${splitButtonClassNames.primaryActionButton}`]: {
-            borderRightColor: _reacttheme.tokens.colorNeutralStrokeDisabled
-        },
-        ':hover': {
-            [`& .${splitButtonClassNames.primaryActionButton}`]: {
-                borderRightColor: _reacttheme.tokens.colorNeutralStrokeDisabled
-            }
-        },
-        ':hover:active': {
-            [`& .${splitButtonClassNames.primaryActionButton}`]: {
-                borderRightColor: _reacttheme.tokens.colorNeutralStrokeDisabled
-            }
-        }
-    },
-    // Disabled high contrast styles
-    disabledHighContrast: {
-        '@media (forced-colors: active)': {
-            [`& .${splitButtonClassNames.primaryActionButton}`]: {
-                borderRightColor: 'GrayText'
-            },
-            ':hover': {
-                [`& .${splitButtonClassNames.primaryActionButton}`]: {
-                    borderRightColor: 'GrayText'
-                }
-            },
-            ':hover:active': {
-                [`& .${splitButtonClassNames.primaryActionButton}`]: {
-                    borderRightColor: 'GrayText'
-                }
-            }
-        }
-    }
-});
-const useSplitButtonStyles_unstable = (state)=>{
-    'use no memo';
-    const rootStyles = useRootStyles();
-    const focusStyles = useFocusStyles();
-    const { appearance, disabled, disabledFocusable } = state;
-    state.root.className = (0, _react.mergeClasses)(splitButtonClassNames.root, rootStyles.base, appearance && rootStyles[appearance], (disabled || disabledFocusable) && rootStyles.disabled, (disabled || disabledFocusable) && rootStyles.disabledHighContrast, state.root.className);
-    if (state.menuButton) {
-        state.menuButton.className = (0, _react.mergeClasses)(splitButtonClassNames.menuButton, focusStyles.menuButton, state.menuButton.className);
-    }
-    if (state.primaryActionButton) {
-        state.primaryActionButton.className = (0, _react.mergeClasses)(splitButtonClassNames.primaryActionButton, focusStyles.primaryActionButton, state.primaryActionButton.className);
-    }
-    return state;
-};

package/lib-commonjs/components/SplitButton/useSplitButtonStyles.styles.raw.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../src/components/SplitButton/useSplitButtonStyles.styles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SplitButtonSlots, SplitButtonState } from './SplitButton.types';\n\nexport const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {\n root: 'fui-SplitButton',\n menuButton: 'fui-SplitButton__menuButton',\n primaryActionButton: 'fui-SplitButton__primaryActionButton',\n};\n\n// WCAG minimum target size for pointer targets that are immediately adjacent to other targets:\n// https://w3c.github.io/wcag/guidelines/22/#target-size-minimum\nconst MIN_TARGET_SIZE = '24px';\n\nconst useFocusStyles = makeStyles({\n primaryActionButton: createCustomFocusIndicatorStyle({\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n }),\n\n menuButton: createCustomFocusIndicatorStyle({\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n display: 'inline-flex',\n justifyContent: 'stretch',\n position: 'relative',\n verticalAlign: 'middle',\n\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderTopRightRadius: 0,\n borderBottomRightRadius: 0,\n },\n\n [`& .${splitButtonClassNames.menuButton}`]: {\n borderLeftWidth: 0,\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n minWidth: MIN_TARGET_SIZE,\n },\n },\n\n // Appearance variations\n outline: {\n /* No styles */\n },\n primary: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeOnBrand,\n },\n },\n\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'HighlightText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight',\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'Highlight',\n },\n },\n },\n },\n secondary: {\n /* The secondary styles are exactly the same as the base styles. */\n },\n subtle: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n },\n transparent: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackground,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundHover,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n },\n\n // Shape variations\n circular: {},\n rounded: {},\n square: {},\n\n // Disabled styles\n disabled: {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: tokens.colorNeutralStrokeDisabled,\n },\n },\n },\n\n // Disabled high contrast styles\n disabledHighContrast: {\n '@media (forced-colors: active)': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n\n ':hover': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n\n ':hover:active': {\n [`& .${splitButtonClassNames.primaryActionButton}`]: {\n borderRightColor: 'GrayText',\n },\n },\n },\n },\n});\n\nexport const useSplitButtonStyles_unstable = (state: SplitButtonState): SplitButtonState => {\n 'use no memo';\n\n const rootStyles = useRootStyles();\n const focusStyles = useFocusStyles();\n\n const { appearance, disabled, disabledFocusable } = state;\n\n state.root.className = mergeClasses(\n splitButtonClassNames.root,\n rootStyles.base,\n appearance && rootStyles[appearance],\n (disabled || disabledFocusable) && rootStyles.disabled,\n (disabled || disabledFocusable) && rootStyles.disabledHighContrast,\n state.root.className,\n );\n\n if (state.menuButton) {\n state.menuButton.className = mergeClasses(\n splitButtonClassNames.menuButton,\n focusStyles.menuButton,\n state.menuButton.className,\n );\n }\n\n if (state.primaryActionButton) {\n state.primaryActionButton.className = mergeClasses(\n splitButtonClassNames.primaryActionButton,\n focusStyles.primaryActionButton,\n state.primaryActionButton.className,\n );\n }\n\n return state;\n};\n"],"names":["splitButtonClassNames","useSplitButtonStyles_unstable","root","menuButton","primaryActionButton","MIN_TARGET_SIZE","useFocusStyles","makeStyles","createCustomFocusIndicatorStyle","borderTopRightRadius","borderBottomRightRadius","borderLeftWidth","borderTopLeftRadius","borderBottomLeftRadius","useRootStyles","base","display","justifyContent","position","verticalAlign","minWidth","outline","primary","borderRightColor","tokens","colorNeutralStrokeOnBrand","secondary","subtle","colorTransparentBackground","colorTransparentBackgroundHover","colorTransparentBackgroundPressed","transparent","circular","rounded","square","disabled","colorNeutralStrokeDisabled","disabledHighContrast","state","rootStyles","focusStyles","appearance","disabledFocusable","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}