@fluentui/react-switch 9.1.3 → 9.1.5

package/lib-amd/components/Switch/useSwitchStyles.js

@@ -1,211 +0,0 @@
-define(["require", "exports", "tslib", "@fluentui/react-tabster", "@fluentui/react-theme", "@griffel/react"], function (require, exports, tslib_1, react_tabster_1, react_theme_1, react_1) {
-    "use strict";
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useSwitchStyles_unstable = exports.switchClassName = exports.switchClassNames = void 0;
-    exports.switchClassNames = {
-        root: 'fui-Switch',
-        indicator: 'fui-Switch__indicator',
-        input: 'fui-Switch__input',
-        label: 'fui-Switch__label',
-    };
-    /**
-     * @deprecated Use `switchClassNames.root` instead.
-     */
-    exports.switchClassName = exports.switchClassNames.root;
-    // Thumb and track sizes used by the component.
-    var spaceBetweenThumbAndTrack = 2;
-    var trackHeight = 20;
-    var trackWidth = 40;
-    var thumbSize = trackHeight - spaceBetweenThumbAndTrack;
-    var useRootBaseClassName = react_1.makeResetStyles(tslib_1.__assign({ alignItems: 'flex-start', boxSizing: 'border-box', display: 'inline-flex', position: 'relative' }, react_tabster_1.createFocusOutlineStyle({ style: {}, selector: 'focus-within' })));
-    var useRootStyles = react_1.makeStyles({
-        vertical: {
-            flexDirection: 'column',
-        },
-    });
-    var useIndicatorBaseClassName = react_1.makeResetStyles({
-        borderRadius: react_theme_1.tokens.borderRadiusCircular,
-        border: '1px solid',
-        lineHeight: 0,
-        boxSizing: 'border-box',
-        fill: 'currentColor',
-        flexShrink: 0,
-        fontSize: thumbSize + "px",
-        height: trackHeight + "px",
-        margin: react_theme_1.tokens.spacingVerticalS + ' ' + react_theme_1.tokens.spacingHorizontalS,
-        pointerEvents: 'none',
-        transitionDuration: react_theme_1.tokens.durationNormal,
-        transitionTimingFunction: react_theme_1.tokens.curveEasyEase,
-        transitionProperty: 'background, border, color',
-        width: trackWidth + "px",
-        '@media screen and (prefers-reduced-motion: reduce)': {
-            transitionDuration: '0.01ms',
-        },
-        '> *': {
-            transitionDuration: react_theme_1.tokens.durationNormal,
-            transitionTimingFunction: react_theme_1.tokens.curveEasyEase,
-            transitionProperty: 'transform',
-            '@media screen and (prefers-reduced-motion: reduce)': {
-                transitionDuration: '0.01ms',
-            },
-        },
-    });
-    var useIndicatorStyles = react_1.makeStyles({
-        labelAbove: {
-            marginTop: 0,
-        },
-    });
-    var useInputBaseClassName = react_1.makeResetStyles({
-        boxSizing: 'border-box',
-        cursor: 'pointer',
-        height: '100%',
-        margin: 0,
-        opacity: 0,
-        position: 'absolute',
-        // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.
-        // This is done so that clicking on that "empty space" still toggles the switch.
-        width: "calc(" + trackWidth + "px + 2 * " + react_theme_1.tokens.spacingHorizontalS + ")",
-        // Checked (both enabled and disabled)
-        ':checked': (_a = {},
-            _a["& ~ ." + exports.switchClassNames.indicator] = {
-                '> *': {
-                    transform: "translateX(" + (trackWidth - thumbSize - spaceBetweenThumbAndTrack) + "px)",
-                },
-            },
-            _a),
-        // Disabled (both checked and unchecked)
-        ':disabled': (_b = {
-                cursor: 'default'
-            },
-            _b["& ~ ." + exports.switchClassNames.indicator] = {
-                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
-            },
-            _b["& ~ ." + exports.switchClassNames.label] = {
-                cursor: 'default',
-                color: react_theme_1.tokens.colorNeutralForegroundDisabled,
-            },
-            _b),
-        // Enabled and unchecked
-        ':enabled:not(:checked)': (_c = {},
-            _c["& ~ ." + exports.switchClassNames.indicator] = {
-                color: react_theme_1.tokens.colorNeutralStrokeAccessible,
-                borderColor: react_theme_1.tokens.colorNeutralStrokeAccessible,
-            },
-            _c["& ~ ." + exports.switchClassNames.label] = {
-                color: react_theme_1.tokens.colorNeutralForeground1,
-            },
-            _c[':hover'] = (_d = {},
-                _d["& ~ ." + exports.switchClassNames.indicator] = {
-                    color: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
-                    borderColor: react_theme_1.tokens.colorNeutralStrokeAccessibleHover,
-                },
-                _d),
-            _c[':hover:active'] = (_e = {},
-                _e["& ~ ." + exports.switchClassNames.indicator] = {
-                    color: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed,
-                    borderColor: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed,
-                },
-                _e),
-            _c),
-        // Enabled and checked
-        ':enabled:checked': (_f = {},
-            _f["& ~ ." + exports.switchClassNames.indicator] = {
-                backgroundColor: react_theme_1.tokens.colorCompoundBrandBackground,
-                color: react_theme_1.tokens.colorNeutralForegroundInverted,
-                borderColor: react_theme_1.tokens.colorTransparentStroke,
-            },
-            _f[':hover'] = (_g = {},
-                _g["& ~ ." + exports.switchClassNames.indicator] = {
-                    backgroundColor: react_theme_1.tokens.colorCompoundBrandBackgroundHover,
-                    borderColor: react_theme_1.tokens.colorTransparentStrokeInteractive,
-                },
-                _g),
-            _f[':hover:active'] = (_h = {},
-                _h["& ~ ." + exports.switchClassNames.indicator] = {
-                    backgroundColor: react_theme_1.tokens.colorCompoundBrandBackgroundPressed,
-                    borderColor: react_theme_1.tokens.colorTransparentStrokeInteractive,
-                },
-                _h),
-            _f),
-        // Disabled and unchecked
-        ':disabled:not(:checked)': (_j = {},
-            _j["& ~ ." + exports.switchClassNames.indicator] = {
-                borderColor: react_theme_1.tokens.colorNeutralStrokeDisabled,
-            },
-            _j),
-        // Disabled and checked
-        ':disabled:checked': (_k = {},
-            _k["& ~ ." + exports.switchClassNames.indicator] = {
-                backgroundColor: react_theme_1.tokens.colorNeutralBackgroundDisabled,
-                borderColor: react_theme_1.tokens.colorTransparentStrokeDisabled,
-            },
-            _k),
-        '@media (forced-colors: active)': {
-            ':disabled': (_l = {},
-                _l["& ~ ." + exports.switchClassNames.indicator] = {
-                    color: 'GrayText',
-                    borderColor: 'GrayText',
-                },
-                _l["& ~ ." + exports.switchClassNames.label] = {
-                    color: 'GrayText',
-                },
-                _l),
-        },
-    });
-    var useInputStyles = react_1.makeStyles({
-        before: {
-            right: 0,
-            top: 0,
-        },
-        after: {
-            left: 0,
-            top: 0,
-        },
-        above: {
-            bottom: 0,
-            height: "calc(" + trackHeight + "px + " + react_theme_1.tokens.spacingVerticalS + ")",
-            width: '100%',
-        },
-    });
-    // Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
-    var useLabelStyles = react_1.makeStyles({
-        base: tslib_1.__assign({ cursor: 'pointer', 
-            // Use a (negative) margin to account for the difference between the track's height and the label's line height.
-            // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.
-            marginBottom: "calc((" + trackHeight + "px - " + react_theme_1.tokens.lineHeightBase300 + ") / 2)", marginTop: "calc((" + trackHeight + "px - " + react_theme_1.tokens.lineHeightBase300 + ") / 2)" }, react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalS, react_theme_1.tokens.spacingHorizontalS)),
-        above: {
-            paddingTop: react_theme_1.tokens.spacingVerticalXS,
-            paddingBottom: react_theme_1.tokens.spacingVerticalXS,
-            width: '100%',
-        },
-        after: {
-            paddingLeft: react_theme_1.tokens.spacingHorizontalXS,
-        },
-        before: {
-            paddingRight: react_theme_1.tokens.spacingHorizontalXS,
-        },
-    });
-    /**
-     * Apply styling to the Switch slots based on the state
-     */
-    var useSwitchStyles_unstable = function (state) {
-        var rootBaseClassName = useRootBaseClassName();
-        var rootStyles = useRootStyles();
-        var indicatorBaseClassName = useIndicatorBaseClassName();
-        var indicatorStyles = useIndicatorStyles();
-        var inputBaseClassName = useInputBaseClassName();
-        var inputStyles = useInputStyles();
-        var labelStyles = useLabelStyles();
-        var label = state.label, labelPosition = state.labelPosition;
-        state.root.className = react_1.mergeClasses(exports.switchClassNames.root, rootBaseClassName, labelPosition === 'above' && rootStyles.vertical, state.root.className);
-        state.indicator.className = react_1.mergeClasses(exports.switchClassNames.indicator, indicatorBaseClassName, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);
-        state.input.className = react_1.mergeClasses(exports.switchClassNames.input, inputBaseClassName, label && inputStyles[labelPosition], state.input.className);
-        if (state.label) {
-            state.label.className = react_1.mergeClasses(exports.switchClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
-        }
-        return state;
-    };
-    exports.useSwitchStyles_unstable = useSwitchStyles_unstable;
-});
-//# sourceMappingURL=useSwitchStyles.js.map

package/lib-amd/components/Switch/useSwitchStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useSwitchStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts"],"names":[],"mappings":";;;;;IAMa,QAAA,gBAAgB,GAAgC;QAC3D,IAAI,EAAE,YAAY;QAClB,SAAS,EAAE,uBAAuB;QAClC,KAAK,EAAE,mBAAmB;QAC1B,KAAK,EAAE,mBAAmB;KAC3B,CAAC;IAEF;;OAEG;IACU,QAAA,eAAe,GAAG,wBAAgB,CAAC,IAAI,CAAC;IAErD,+CAA+C;IAC/C,IAAM,yBAAyB,GAAG,CAAC,CAAC;IACpC,IAAM,WAAW,GAAG,EAAE,CAAC;IACvB,IAAM,UAAU,GAAG,EAAE,CAAC;IACtB,IAAM,SAAS,GAAG,WAAW,GAAG,yBAAyB,CAAC;IAE1D,IAAM,oBAAoB,GAAG,uBAAe,oBAC1C,UAAU,EAAE,YAAY,EACxB,SAAS,EAAE,YAAY,EACvB,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,UAAU,IAEjB,uCAAuB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,CAAC,EACnE,CAAC;IAEH,IAAM,aAAa,GAAG,kBAAU,CAAC;QAC/B,QAAQ,EAAE;YACR,aAAa,EAAE,QAAQ;SACxB;KACF,CAAC,CAAC;IAEH,IAAM,yBAAyB,GAAG,uBAAe,CAAC;QAChD,YAAY,EAAE,oBAAM,CAAC,oBAAoB;QACzC,MAAM,EAAE,WAAW;QACnB,UAAU,EAAE,CAAC;QACb,SAAS,EAAE,YAAY;QACvB,IAAI,EAAE,cAAc;QACpB,UAAU,EAAE,CAAC;QACb,QAAQ,EAAK,SAAS,OAAI;QAC1B,MAAM,EAAK,WAAW,OAAI;QAC1B,MAAM,EAAE,oBAAM,CAAC,gBAAgB,GAAG,GAAG,GAAG,oBAAM,CAAC,kBAAkB;QACjE,aAAa,EAAE,MAAM;QACrB,kBAAkB,EAAE,oBAAM,CAAC,cAAc;QACzC,wBAAwB,EAAE,oBAAM,CAAC,aAAa;QAC9C,kBAAkB,EAAE,2BAA2B;QAC/C,KAAK,EAAK,UAAU,OAAI;QAExB,oDAAoD,EAAE;YACpD,kBAAkB,EAAE,QAAQ;SAC7B;QAED,KAAK,EAAE;YACL,kBAAkB,EAAE,oBAAM,CAAC,cAAc;YACzC,wBAAwB,EAAE,oBAAM,CAAC,aAAa;YAC9C,kBAAkB,EAAE,WAAW;YAE/B,oDAAoD,EAAE;gBACpD,kBAAkB,EAAE,QAAQ;aAC7B;SACF;KACF,CAAC,CAAC;IAEH,IAAM,kBAAkB,GAAG,kBAAU,CAAC;QACpC,UAAU,EAAE;YACV,SAAS,EAAE,CAAC;SACb;KACF,CAAC,CAAC;IAEH,IAAM,qBAAqB,GAAG,uBAAe,CAAC;QAC5C,SAAS,EAAE,YAAY;QACvB,MAAM,EAAE,SAAS;QACjB,MAAM,EAAE,MAAM;QACd,MAAM,EAAE,CAAC;QACT,OAAO,EAAE,CAAC;QACV,QAAQ,EAAE,UAAU;QAEpB,oHAAoH;QACpH,gFAAgF;QAChF,KAAK,EAAE,UAAQ,UAAU,iBAAY,oBAAM,CAAC,kBAAkB,MAAG;QAEjE,sCAAsC;QACtC,UAAU;YACR,GAAC,UAAQ,wBAAgB,CAAC,SAAW,IAAG;gBACtC,KAAK,EAAE;oBACL,SAAS,EAAE,iBAAc,UAAU,GAAG,SAAS,GAAG,yBAAyB,SAAK;iBACjF;aACF;eACF;QAED,wCAAwC;QACxC,WAAW;gBACT,MAAM,EAAE,SAAS;;YAEjB,GAAC,UAAQ,wBAAgB,CAAC,SAAW,IAAG;gBACtC,KAAK,EAAE,oBAAM,CAAC,8BAA8B;aAC7C;YAED,GAAC,UAAQ,wBAAgB,CAAC,KAAO,IAAG;gBAClC,MAAM,EAAE,SAAS;gBACjB,KAAK,EAAE,oBAAM,CAAC,8BAA8B;aAC7C;eACF;QAED,wBAAwB;QACxB,wBAAwB;YACtB,GAAC,UAAQ,wBAAgB,CAAC,SAAW,IAAG;gBACtC,KAAK,EAAE,oBAAM,CAAC,4BAA4B;gBAC1C,WAAW,EAAE,oBAAM,CAAC,4BAA4B;aACjD;YAED,GAAC,UAAQ,wBAAgB,CAAC,KAAO,IAAG;gBAClC,KAAK,EAAE,oBAAM,CAAC,uBAAuB;aACtC;YAED,YAAQ;gBACN,GAAC,UAAQ,wBAAgB,CAAC,SAAW,IAAG;oBACtC,KAAK,EAAE,oBAAM,CAAC,iCAAiC;oBAC/C,WAAW,EAAE,oBAAM,CAAC,iCAAiC;iBACtD;mBACF;YAED,mBAAe;gBACb,GAAC,UAAQ,wBAAgB,CAAC,SAAW,IAAG;oBACtC,KAAK,EAAE,oBAAM,CAAC,mCAAmC;oBACjD,WAAW,EAAE,oBAAM,CAAC,mCAAmC;iBACxD;mBACF;eACF;QAED,sBAAsB;QACtB,kBAAkB;YAChB,GAAC,UAAQ,wBAAgB,CAAC,SAAW,IAAG;gBACtC,eAAe,EAAE,oBAAM,CAAC,4BAA4B;gBACpD,KAAK,EAAE,oBAAM,CAAC,8BAA8B;gBAC5C,WAAW,EAAE,oBAAM,CAAC,sBAAsB;aAC3C;YAED,YAAQ;gBACN,GAAC,UAAQ,wBAAgB,CAAC,SAAW,IAAG;oBACtC,eAAe,EAAE,oBAAM,CAAC,iCAAiC;oBACzD,WAAW,EAAE,oBAAM,CAAC,iCAAiC;iBACtD;mBACF;YAED,mBAAe;gBACb,GAAC,UAAQ,wBAAgB,CAAC,SAAW,IAAG;oBACtC,eAAe,EAAE,oBAAM,CAAC,mCAAmC;oBAC3D,WAAW,EAAE,oBAAM,CAAC,iCAAiC;iBACtD;mBACF;eACF;QAED,yBAAyB;QACzB,yBAAyB;YACvB,GAAC,UAAQ,wBAAgB,CAAC,SAAW,IAAG;gBACtC,WAAW,EAAE,oBAAM,CAAC,0BAA0B;aAC/C;eACF;QAED,uBAAuB;QACvB,mBAAmB;YACjB,GAAC,UAAQ,wBAAgB,CAAC,SAAW,IAAG;gBACtC,eAAe,EAAE,oBAAM,CAAC,8BAA8B;gBACtD,WAAW,EAAE,oBAAM,CAAC,8BAA8B;aACnD;eACF;QAED,gCAAgC,EAAE;YAChC,WAAW;gBACT,GAAC,UAAQ,wBAAgB,CAAC,SAAW,IAAG;oBACtC,KAAK,EAAE,UAAU;oBACjB,WAAW,EAAE,UAAU;iBACxB;gBAED,GAAC,UAAQ,wBAAgB,CAAC,KAAO,IAAG;oBAClC,KAAK,EAAE,UAAU;iBAClB;mBACF;SACF;KACF,CAAC,CAAC;IAEH,IAAM,cAAc,GAAG,kBAAU,CAAC;QAChC,MAAM,EAAE;YACN,KAAK,EAAE,CAAC;YACR,GAAG,EAAE,CAAC;SACP;QACD,KAAK,EAAE;YACL,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;SACP;QACD,KAAK,EAAE;YACL,MAAM,EAAE,CAAC;YACT,MAAM,EAAE,UAAQ,WAAW,aAAQ,oBAAM,CAAC,gBAAgB,MAAG;YAC7D,KAAK,EAAE,MAAM;SACd;KACF,CAAC,CAAC;IAEH,mGAAmG;IACnG,IAAM,cAAc,GAAG,kBAAU,CAAC;QAChC,IAAI,qBACF,MAAM,EAAE,SAAS;YAEjB,gHAAgH;YAChH,iHAAiH;YACjH,YAAY,EAAE,WAAS,WAAW,aAAQ,oBAAM,CAAC,iBAAiB,WAAQ,EAC1E,SAAS,EAAE,WAAS,WAAW,aAAQ,oBAAM,CAAC,iBAAiB,WAAQ,IAEpE,kBAAU,CAAC,OAAO,CAAC,oBAAM,CAAC,gBAAgB,EAAE,oBAAM,CAAC,kBAAkB,CAAC,CAC1E;QACD,KAAK,EAAE;YACL,UAAU,EAAE,oBAAM,CAAC,iBAAiB;YACpC,aAAa,EAAE,oBAAM,CAAC,iBAAiB;YACvC,KAAK,EAAE,MAAM;SACd;QACD,KAAK,EAAE;YACL,WAAW,EAAE,oBAAM,CAAC,mBAAmB;SACxC;QACD,MAAM,EAAE;YACN,YAAY,EAAE,oBAAM,CAAC,mBAAmB;SACzC;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,wBAAwB,GAAG,UAAC,KAAkB;QACzD,IAAM,iBAAiB,GAAG,oBAAoB,EAAE,CAAC;QACjD,IAAM,UAAU,GAAG,aAAa,EAAE,CAAC;QACnC,IAAM,sBAAsB,GAAG,yBAAyB,EAAE,CAAC;QAC3D,IAAM,eAAe,GAAG,kBAAkB,EAAE,CAAC;QAC7C,IAAM,kBAAkB,GAAG,qBAAqB,EAAE,CAAC;QACnD,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;QACrC,IAAM,WAAW,GAAG,cAAc,EAAE,CAAC;QAE7B,IAAA,KAAK,GAAoB,KAAK,MAAzB,EAAE,aAAa,GAAK,KAAK,cAAV,CAAW;QAEvC,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,wBAAgB,CAAC,IAAI,EACrB,iBAAiB,EACjB,aAAa,KAAK,OAAO,IAAI,UAAU,CAAC,QAAQ,EAChD,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;QAEF,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,oBAAY,CACtC,wBAAgB,CAAC,SAAS,EAC1B,sBAAsB,EACtB,KAAK,IAAI,aAAa,KAAK,OAAO,IAAI,eAAe,CAAC,UAAU,EAChE,KAAK,CAAC,SAAS,CAAC,SAAS,CAC1B,CAAC;QAEF,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,oBAAY,CAClC,wBAAgB,CAAC,KAAK,EACtB,kBAAkB,EAClB,KAAK,IAAI,WAAW,CAAC,aAAa,CAAC,EACnC,KAAK,CAAC,KAAK,CAAC,SAAS,CACtB,CAAC;QAEF,IAAI,KAAK,CAAC,KAAK,EAAE;YACf,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,oBAAY,CAClC,wBAAgB,CAAC,KAAK,EACtB,WAAW,CAAC,IAAI,EAChB,WAAW,CAAC,aAAa,CAAC,EAC1B,KAAK,CAAC,KAAK,CAAC,SAAS,CACtB,CAAC;SACH;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IA1CW,QAAA,wBAAwB,4BA0CnC","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwitchSlots, SwitchState } from './Switch.types';\n\nexport const switchClassNames: SlotClassNames<SwitchSlots> = {\n  root: 'fui-Switch',\n  indicator: 'fui-Switch__indicator',\n  input: 'fui-Switch__input',\n  label: 'fui-Switch__label',\n};\n\n/**\n * @deprecated Use `switchClassNames.root` instead.\n */\nexport const switchClassName = switchClassNames.root;\n\n// Thumb and track sizes used by the component.\nconst spaceBetweenThumbAndTrack = 2;\nconst trackHeight = 20;\nconst trackWidth = 40;\nconst thumbSize = trackHeight - spaceBetweenThumbAndTrack;\n\nconst useRootBaseClassName = makeResetStyles({\n  alignItems: 'flex-start',\n  boxSizing: 'border-box',\n  display: 'inline-flex',\n  position: 'relative',\n\n  ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useRootStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\nconst useIndicatorBaseClassName = makeResetStyles({\n  borderRadius: tokens.borderRadiusCircular,\n  border: '1px solid',\n  lineHeight: 0,\n  boxSizing: 'border-box',\n  fill: 'currentColor',\n  flexShrink: 0,\n  fontSize: `${thumbSize}px`,\n  height: `${trackHeight}px`,\n  margin: tokens.spacingVerticalS + ' ' + tokens.spacingHorizontalS,\n  pointerEvents: 'none',\n  transitionDuration: tokens.durationNormal,\n  transitionTimingFunction: tokens.curveEasyEase,\n  transitionProperty: 'background, border, color',\n  width: `${trackWidth}px`,\n\n  '@media screen and (prefers-reduced-motion: reduce)': {\n    transitionDuration: '0.01ms',\n  },\n\n  '> *': {\n    transitionDuration: tokens.durationNormal,\n    transitionTimingFunction: tokens.curveEasyEase,\n    transitionProperty: 'transform',\n\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      transitionDuration: '0.01ms',\n    },\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  labelAbove: {\n    marginTop: 0,\n  },\n});\n\nconst useInputBaseClassName = makeResetStyles({\n  boxSizing: 'border-box',\n  cursor: 'pointer',\n  height: '100%',\n  margin: 0,\n  opacity: 0,\n  position: 'absolute',\n\n  // Calculate the width of the hidden input by taking into account the size of the indicator + the padding around it.\n  // This is done so that clicking on that \"empty space\" still toggles the switch.\n  width: `calc(${trackWidth}px + 2 * ${tokens.spacingHorizontalS})`,\n\n  // Checked (both enabled and disabled)\n  ':checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      '> *': {\n        transform: `translateX(${trackWidth - thumbSize - spaceBetweenThumbAndTrack}px)`,\n      },\n    },\n  },\n\n  // Disabled (both checked and unchecked)\n  ':disabled': {\n    cursor: 'default',\n\n    [`& ~ .${switchClassNames.indicator}`]: {\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    [`& ~ .${switchClassNames.label}`]: {\n      cursor: 'default',\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n\n  // Enabled and unchecked\n  ':enabled:not(:checked)': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      color: tokens.colorNeutralStrokeAccessible,\n      borderColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    [`& ~ .${switchClassNames.label}`]: {\n      color: tokens.colorNeutralForeground1,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessibleHover,\n        borderColor: tokens.colorNeutralStrokeAccessibleHover,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: tokens.colorNeutralStrokeAccessiblePressed,\n        borderColor: tokens.colorNeutralStrokeAccessiblePressed,\n      },\n    },\n  },\n\n  // Enabled and checked\n  ':enabled:checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorCompoundBrandBackground,\n      color: tokens.colorNeutralForegroundInverted,\n      borderColor: tokens.colorTransparentStroke,\n    },\n\n    ':hover': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n\n    ':hover:active': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n        borderColor: tokens.colorTransparentStrokeInteractive,\n      },\n    },\n  },\n\n  // Disabled and unchecked\n  ':disabled:not(:checked)': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      borderColor: tokens.colorNeutralStrokeDisabled,\n    },\n  },\n\n  // Disabled and checked\n  ':disabled:checked': {\n    [`& ~ .${switchClassNames.indicator}`]: {\n      backgroundColor: tokens.colorNeutralBackgroundDisabled,\n      borderColor: tokens.colorTransparentStrokeDisabled,\n    },\n  },\n\n  '@media (forced-colors: active)': {\n    ':disabled': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        color: 'GrayText',\n        borderColor: 'GrayText',\n      },\n\n      [`& ~ .${switchClassNames.label}`]: {\n        color: 'GrayText',\n      },\n    },\n  },\n});\n\nconst useInputStyles = makeStyles({\n  before: {\n    right: 0,\n    top: 0,\n  },\n  after: {\n    left: 0,\n    top: 0,\n  },\n  above: {\n    bottom: 0,\n    height: `calc(${trackHeight}px + ${tokens.spacingVerticalS})`,\n    width: '100%',\n  },\n});\n\n// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.\nconst useLabelStyles = makeStyles({\n  base: {\n    cursor: 'pointer',\n\n    // Use a (negative) margin to account for the difference between the track's height and the label's line height.\n    // This prevents the label from expanding the height of the switch, but preserves line height if the label wraps.\n    marginBottom: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n    marginTop: `calc((${trackHeight}px - ${tokens.lineHeightBase300}) / 2)`,\n\n    ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n  },\n  above: {\n    paddingTop: tokens.spacingVerticalXS,\n    paddingBottom: tokens.spacingVerticalXS,\n    width: '100%',\n  },\n  after: {\n    paddingLeft: tokens.spacingHorizontalXS,\n  },\n  before: {\n    paddingRight: tokens.spacingHorizontalXS,\n  },\n});\n\n/**\n * Apply styling to the Switch slots based on the state\n */\nexport const useSwitchStyles_unstable = (state: SwitchState): SwitchState => {\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  const indicatorBaseClassName = useIndicatorBaseClassName();\n  const indicatorStyles = useIndicatorStyles();\n  const inputBaseClassName = useInputBaseClassName();\n  const inputStyles = useInputStyles();\n  const labelStyles = useLabelStyles();\n\n  const { label, labelPosition } = state;\n\n  state.root.className = mergeClasses(\n    switchClassNames.root,\n    rootBaseClassName,\n    labelPosition === 'above' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  state.indicator.className = mergeClasses(\n    switchClassNames.indicator,\n    indicatorBaseClassName,\n    label && labelPosition === 'above' && indicatorStyles.labelAbove,\n    state.indicator.className,\n  );\n\n  state.input.className = mergeClasses(\n    switchClassNames.input,\n    inputBaseClassName,\n    label && inputStyles[labelPosition],\n    state.input.className,\n  );\n\n  if (state.label) {\n    state.label.className = mergeClasses(\n      switchClassNames.label,\n      labelStyles.base,\n      labelStyles[labelPosition],\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"]}

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

@@ -1,10 +0,0 @@
-define(["require", "exports", "@fluentui/react-field", "../../Switch"], function (require, exports, react_field_1, Switch_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.SwitchField = exports.switchFieldClassNames = void 0;
-    /** @deprecated Use Field with Switch: `<Field><Switch /></Field>` */
-    exports.switchFieldClassNames = react_field_1.getDeprecatedFieldClassNames(Switch_1.switchClassNames.root);
-    /** @deprecated Use Field with Switch: `<Field><Switch /></Field>` */
-    exports.SwitchField = react_field_1.makeDeprecatedField(Switch_1.Switch);
-});
-//# sourceMappingURL=SwitchField.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SwitchField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-switch/src/components/SwitchField/SwitchField.tsx"],"names":[],"mappings":";;;;IAOA,qEAAqE;IACxD,QAAA,qBAAqB,GAAG,0CAA4B,CAAC,yBAAgB,CAAC,IAAI,CAAC,CAAC;IACzF,qEAAqE;IACxD,QAAA,WAAW,GAA0C,iCAAmB,CAAC,eAAM,CAAC,CAAC","sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Switch, switchClassNames, SwitchProps } from '../../Switch';\n\n/** @deprecated Use Field with Switch: `<Field><Switch /></Field>` */\nexport type SwitchFieldProps = DeprecatedFieldProps<SwitchProps>;\n/** @deprecated Use Field with Switch: `<Field><Switch /></Field>` */\nexport const switchFieldClassNames = getDeprecatedFieldClassNames(switchClassNames.root);\n/** @deprecated Use Field with Switch: `<Field><Switch /></Field>` */\nexport const SwitchField: ForwardRefComponent<SwitchFieldProps> = makeDeprecatedField(Switch);\n"]}

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

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

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

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

package/lib-amd/index.js

@@ -1,15 +0,0 @@
-define(["require", "exports", "./Switch", "./SwitchField"], function (require, exports, Switch_1, SwitchField_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.switchFieldClassNames = exports.SwitchField_unstable = exports.useSwitch_unstable = exports.useSwitchStyles_unstable = exports.switchClassNames = exports.switchClassName = exports.renderSwitch_unstable = exports.Switch = void 0;
-    Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return Switch_1.Switch; } });
-    Object.defineProperty(exports, "renderSwitch_unstable", { enumerable: true, get: function () { return Switch_1.renderSwitch_unstable; } });
-    // eslint-disable-next-line deprecation/deprecation
-    Object.defineProperty(exports, "switchClassName", { enumerable: true, get: function () { return Switch_1.switchClassName; } });
-    Object.defineProperty(exports, "switchClassNames", { enumerable: true, get: function () { return Switch_1.switchClassNames; } });
-    Object.defineProperty(exports, "useSwitchStyles_unstable", { enumerable: true, get: function () { return Switch_1.useSwitchStyles_unstable; } });
-    Object.defineProperty(exports, "useSwitch_unstable", { enumerable: true, get: function () { return Switch_1.useSwitch_unstable; } });
-    Object.defineProperty(exports, "SwitchField_unstable", { enumerable: true, get: function () { return SwitchField_1.SwitchField; } });
-    Object.defineProperty(exports, "switchFieldClassNames", { enumerable: true, get: function () { return SwitchField_1.switchFieldClassNames; } });
-});
-//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-switch/src/index.ts"],"names":[],"mappings":";;;;IACE,gGAAA,MAAM,OAAA;IACN,+GAAA,qBAAqB,OAAA;IACrB,mDAAmD;IACnD,yGAAA,eAAe,OAAA;IACf,0GAAA,gBAAgB,OAAA;IAChB,kHAAA,wBAAwB,OAAA;IACxB,4GAAA,kBAAkB,OAAA;IAKX,mHAAA,WAAW,OAAwB;IAAE,oHAAA,qBAAqB,OAAA","sourcesContent":["export {\n  Switch,\n  renderSwitch_unstable,\n  // eslint-disable-next-line deprecation/deprecation\n  switchClassName,\n  switchClassNames,\n  useSwitchStyles_unstable,\n  useSwitch_unstable,\n} from './Switch';\nexport type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from './Switch';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { SwitchField as SwitchField_unstable, switchFieldClassNames } from './SwitchField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { SwitchFieldProps as SwitchFieldProps_unstable } from './SwitchField';\n"]}