@fluentui/react-switch 9.0.11 → 9.0.13

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

@@ -0,0 +1,158 @@
+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 useRootStyles = react_1.makeStyles({
+        base: tslib_1.__assign({ alignItems: 'flex-start', boxSizing: 'border-box', display: 'inline-flex', position: 'relative' }, react_tabster_1.createFocusOutlineStyle({ style: {}, selector: 'focus-within' })),
+        vertical: {
+            flexDirection: 'column',
+        },
+    });
+    var useIndicatorStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusCircular)), react_1.shorthands.borderStyle('solid')), react_1.shorthands.borderWidth('1px')), { lineHeight: 0, boxSizing: 'border-box', fill: 'currentColor', flexShrink: 0, fontSize: thumbSize + "px", height: trackHeight + "px" }), react_1.shorthands.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',
+                },
+            } }),
+        labelAbove: {
+            marginTop: 0,
+        },
+    });
+    var useInputStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign({ boxSizing: 'border-box', cursor: 'pointer', height: '100%' }, react_1.shorthands.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] = tslib_1.__assign({ color: react_theme_1.tokens.colorNeutralStrokeAccessible }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessible)),
+                _c["& ~ ." + exports.switchClassNames.label] = {
+                    color: react_theme_1.tokens.colorNeutralForeground1,
+                },
+                _c[':hover'] = (_d = {},
+                    _d["& ~ ." + exports.switchClassNames.indicator] = tslib_1.__assign({ color: react_theme_1.tokens.colorNeutralStrokeAccessibleHover }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessibleHover)),
+                    _d),
+                _c[':hover:active'] = (_e = {},
+                    _e["& ~ ." + exports.switchClassNames.indicator] = tslib_1.__assign({ color: react_theme_1.tokens.colorNeutralStrokeAccessiblePressed }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeAccessiblePressed)),
+                    _e),
+                _c), 
+            // Enabled and checked
+            ':enabled:checked': (_f = {},
+                _f["& ~ ." + exports.switchClassNames.indicator] = tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorCompoundBrandBackground, color: react_theme_1.tokens.colorNeutralForegroundInverted }, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStroke)),
+                _f[':hover'] = (_g = {},
+                    _g["& ~ ." + exports.switchClassNames.indicator] = tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorCompoundBrandBackgroundHover }, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStrokeInteractive)),
+                    _g),
+                _f[':hover:active'] = (_h = {},
+                    _h["& ~ ." + exports.switchClassNames.indicator] = tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorCompoundBrandBackgroundPressed }, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStrokeInteractive)),
+                    _h),
+                _f), 
+            // Disabled and unchecked
+            ':disabled:not(:checked)': (_j = {},
+                _j["& ~ ." + exports.switchClassNames.indicator] = tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)),
+                _j), 
+            // Disabled and checked
+            ':disabled:checked': (_k = {},
+                _k["& ~ ." + exports.switchClassNames.indicator] = tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackgroundDisabled }, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStrokeDisabled)),
+                _k) }),
+        highContrast: {
+            '@media (forced-colors: active)': {
+                ':disabled': (_l = {},
+                    _l["& ~ ." + exports.switchClassNames.indicator] = tslib_1.__assign({ color: 'GrayText' }, react_1.shorthands.borderColor('GrayText')),
+                    _l["& ~ ." + exports.switchClassNames.label] = {
+                        color: 'GrayText',
+                    },
+                    _l),
+            },
+        },
+        before: {
+            right: 0,
+            top: 0,
+        },
+        after: {
+            left: 0,
+            top: 0,
+        },
+        above: {
+            bottom: 0,
+            height: "calc(" + trackHeight + "px + " + react_theme_1.tokens.spacingVerticalS + ")",
+            width: '100%',
+        },
+    });
+    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 rootStyles = useRootStyles();
+        var indicatorStyles = useIndicatorStyles();
+        var inputStyles = useInputStyles();
+        var labelStyles = useLabelStyles();
+        var label = state.label, labelPosition = state.labelPosition;
+        state.root.className = react_1.mergeClasses(exports.switchClassNames.root, rootStyles.base, labelPosition === 'above' && rootStyles.vertical, state.root.className);
+        state.indicator.className = react_1.mergeClasses(exports.switchClassNames.indicator, indicatorStyles.base, label && labelPosition === 'above' && indicatorStyles.labelAbove, state.indicator.className);
+        state.input.className = react_1.mergeClasses(exports.switchClassNames.input, inputStyles.base, inputStyles.highContrast, 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

@@ -0,0 +1 @@
+{"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,aAAa,GAAG,kBAAU,CAAC;QAC/B,IAAI,qBACF,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,CACpE;QAED,QAAQ,EAAE;YACR,aAAa,EAAE,QAAQ;SACxB;KACF,CAAC,CAAC;IAEH,IAAM,kBAAkB,GAAG,kBAAU,CAAC;QACpC,IAAI,4GACC,kBAAU,CAAC,YAAY,CAAC,oBAAM,CAAC,oBAAoB,CAAC,GACpD,kBAAU,CAAC,WAAW,CAAC,OAAO,CAAC,GAC/B,kBAAU,CAAC,WAAW,CAAC,KAAK,CAAC,KAChC,UAAU,EAAE,CAAC,EACb,SAAS,EAAE,YAAY,EACvB,IAAI,EAAE,cAAc,EACpB,UAAU,EAAE,CAAC,EACb,QAAQ,EAAK,SAAS,OAAI,EAC1B,MAAM,EAAK,WAAW,OAAI,KACvB,kBAAU,CAAC,MAAM,CAAC,oBAAM,CAAC,gBAAgB,EAAE,oBAAM,CAAC,kBAAkB,CAAC,KACxE,aAAa,EAAE,MAAM,EACrB,kBAAkB,EAAE,oBAAM,CAAC,cAAc,EACzC,wBAAwB,EAAE,oBAAM,CAAC,aAAa,EAC9C,kBAAkB,EAAE,2BAA2B,EAC/C,KAAK,EAAK,UAAU,OAAI,EAExB,oDAAoD,EAAE;gBACpD,kBAAkB,EAAE,QAAQ;aAC7B,EAED,KAAK,EAAE;gBACL,kBAAkB,EAAE,oBAAM,CAAC,cAAc;gBACzC,wBAAwB,EAAE,oBAAM,CAAC,aAAa;gBAC9C,kBAAkB,EAAE,WAAW;gBAE/B,oDAAoD,EAAE;oBACpD,kBAAkB,EAAE,QAAQ;iBAC7B;aACF,GACF;QAED,UAAU,EAAE;YACV,SAAS,EAAE,CAAC;SACb;KACF,CAAC,CAAC;IAEH,IAAM,cAAc,GAAG,kBAAU,CAAC;QAChC,IAAI,sCACF,SAAS,EAAE,YAAY,EACvB,MAAM,EAAE,SAAS,EACjB,MAAM,EAAE,MAAM,IACX,kBAAU,CAAC,MAAM,CAAC,CAAC,CAAC,KACvB,OAAO,EAAE,CAAC,EACV,QAAQ,EAAE,UAAU;YAEpB,oHAAoH;YACpH,gFAAgF;YAChF,KAAK,EAAE,UAAQ,UAAU,iBAAY,oBAAM,CAAC,kBAAkB,MAAG;YAEjE,sCAAsC;YACtC,UAAU;gBACR,GAAC,UAAQ,wBAAgB,CAAC,SAAW,IAAG;oBACtC,KAAK,EAAE;wBACL,SAAS,EAAE,iBAAc,UAAU,GAAG,SAAS,GAAG,yBAAyB,SAAK;qBACjF;iBACF;;YAGH,wCAAwC;YACxC,WAAW;oBACT,MAAM,EAAE,SAAS;;gBAEjB,GAAC,UAAQ,wBAAgB,CAAC,SAAW,IAAG;oBACtC,KAAK,EAAE,oBAAM,CAAC,8BAA8B;iBAC7C;gBAED,GAAC,UAAQ,wBAAgB,CAAC,KAAO,IAAG;oBAClC,MAAM,EAAE,SAAS;oBACjB,KAAK,EAAE,oBAAM,CAAC,8BAA8B;iBAC7C;;YAGH,wBAAwB;YACxB,wBAAwB;gBACtB,GAAC,UAAQ,wBAAgB,CAAC,SAAW,uBACnC,KAAK,EAAE,oBAAM,CAAC,4BAA4B,IACvC,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,4BAA4B,CAAC,CAC/D;gBAED,GAAC,UAAQ,wBAAgB,CAAC,KAAO,IAAG;oBAClC,KAAK,EAAE,oBAAM,CAAC,uBAAuB;iBACtC;gBAED,YAAQ;oBACN,GAAC,UAAQ,wBAAgB,CAAC,SAAW,uBACnC,KAAK,EAAE,oBAAM,CAAC,iCAAiC,IAC5C,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,iCAAiC,CAAC,CACpE;uBACF;gBAED,mBAAe;oBACb,GAAC,UAAQ,wBAAgB,CAAC,SAAW,uBACnC,KAAK,EAAE,oBAAM,CAAC,mCAAmC,IAC9C,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,mCAAmC,CAAC,CACtE;uBACF;;YAGH,sBAAsB;YACtB,kBAAkB;gBAChB,GAAC,UAAQ,wBAAgB,CAAC,SAAW,uBACnC,eAAe,EAAE,oBAAM,CAAC,4BAA4B,EACpD,KAAK,EAAE,oBAAM,CAAC,8BAA8B,IACzC,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,sBAAsB,CAAC,CACzD;gBAED,YAAQ;oBACN,GAAC,UAAQ,wBAAgB,CAAC,SAAW,uBACnC,eAAe,EAAE,oBAAM,CAAC,iCAAiC,IACtD,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,iCAAiC,CAAC,CACpE;uBACF;gBAED,mBAAe;oBACb,GAAC,UAAQ,wBAAgB,CAAC,SAAW,uBACnC,eAAe,EAAE,oBAAM,CAAC,mCAAmC,IACxD,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,iCAAiC,CAAC,CACpE;uBACF;;YAGH,yBAAyB;YACzB,yBAAyB;gBACvB,GAAC,UAAQ,wBAAgB,CAAC,SAAW,yBAChC,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,0BAA0B,CAAC,CAC7D;;YAGH,uBAAuB;YACvB,mBAAmB;gBACjB,GAAC,UAAQ,wBAAgB,CAAC,SAAW,uBACnC,eAAe,EAAE,oBAAM,CAAC,8BAA8B,IACnD,kBAAU,CAAC,WAAW,CAAC,oBAAM,CAAC,8BAA8B,CAAC,CACjE;sBAEJ;QAED,YAAY,EAAE;YACZ,gCAAgC,EAAE;gBAChC,WAAW;oBACT,GAAC,UAAQ,wBAAgB,CAAC,SAAW,uBACnC,KAAK,EAAE,UAAU,IACd,kBAAU,CAAC,WAAW,CAAC,UAAU,CAAC,CACtC;oBAED,GAAC,UAAQ,wBAAgB,CAAC,KAAO,IAAG;wBAClC,KAAK,EAAE,UAAU;qBAClB;uBACF;aACF;SACF;QAED,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,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,UAAU,GAAG,aAAa,EAAE,CAAC;QACnC,IAAM,eAAe,GAAG,kBAAkB,EAAE,CAAC;QAC7C,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,UAAU,CAAC,IAAI,EACf,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,eAAe,CAAC,IAAI,EACpB,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,WAAW,CAAC,IAAI,EAChB,WAAW,CAAC,YAAY,EACxB,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;IAxCW,QAAA,wBAAwB,4BAwCnC","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { 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 useRootStyles = makeStyles({\n  base: {\n    alignItems: 'flex-start',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    position: 'relative',\n\n    ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n  },\n\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  base: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    ...shorthands.borderStyle('solid'),\n    ...shorthands.borderWidth('1px'),\n    lineHeight: 0,\n    boxSizing: 'border-box',\n    fill: 'currentColor',\n    flexShrink: 0,\n    fontSize: `${thumbSize}px`,\n    height: `${trackHeight}px`,\n    ...shorthands.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\n  labelAbove: {\n    marginTop: 0,\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    cursor: 'pointer',\n    height: '100%',\n    ...shorthands.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        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n      },\n\n      [`& ~ .${switchClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n\n      ':hover': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          color: tokens.colorNeutralStrokeAccessibleHover,\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n        },\n      },\n\n      ':hover:active': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          color: tokens.colorNeutralStrokeAccessiblePressed,\n          ...shorthands.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        ...shorthands.borderColor(tokens.colorTransparentStroke),\n      },\n\n      ':hover': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n          ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n        },\n      },\n\n      ':hover:active': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n          ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n        },\n      },\n    },\n\n    // Disabled and unchecked\n    ':disabled:not(:checked)': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      },\n    },\n\n    // Disabled and checked\n    ':disabled:checked': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n      },\n    },\n  },\n\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':disabled': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          color: 'GrayText',\n          ...shorthands.borderColor('GrayText'),\n        },\n\n        [`& ~ .${switchClassNames.label}`]: {\n          color: 'GrayText',\n        },\n      },\n    },\n  },\n\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\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 rootStyles = useRootStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const inputStyles = useInputStyles();\n  const labelStyles = useLabelStyles();\n\n  const { label, labelPosition } = state;\n\n  state.root.className = mergeClasses(\n    switchClassNames.root,\n    rootStyles.base,\n    labelPosition === 'above' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  state.indicator.className = mergeClasses(\n    switchClassNames.indicator,\n    indicatorStyles.base,\n    label && labelPosition === 'above' && indicatorStyles.labelAbove,\n    state.indicator.className,\n  );\n\n  state.input.className = mergeClasses(\n    switchClassNames.input,\n    inputStyles.base,\n    inputStyles.highContrast,\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

@@ -0,0 +1,13 @@
+define(["require", "exports", "react", "@fluentui/react-field", "../../Switch"], function (require, exports, React, react_field_1, Switch_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.SwitchField = exports.switchFieldClassNames = void 0;
+    exports.switchFieldClassNames = react_field_1.getFieldClassNames('SwitchField');
+    exports.SwitchField = React.forwardRef(function (props, ref) {
+        var state = react_field_1.useField_unstable(props, ref, { component: Switch_1.Switch, classNames: exports.switchFieldClassNames });
+        react_field_1.useFieldStyles_unstable(state);
+        return react_field_1.renderField_unstable(state);
+    });
+    exports.SwitchField.displayName = 'SwitchField';
+});
+//# sourceMappingURL=SwitchField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-switch/src/components/SwitchField/SwitchField.tsx"],"names":[],"mappings":";;;;IAea,QAAA,qBAAqB,GAAG,gCAAkB,CAAC,aAAa,CAAC,CAAC;IAE1D,QAAA,WAAW,GAA0C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC5F,IAAM,KAAK,GAAG,+BAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,SAAS,EAAE,eAAM,EAAE,UAAU,EAAE,6BAAqB,EAAE,CAAC,CAAC;QACtG,qCAAuB,CAAC,KAAK,CAAC,CAAC;QAC/B,OAAO,kCAAoB,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;IAEH,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Switch } from '../../Switch';\n\n// The Field's `label` prop overrides the Switch's built-in `label`.\n// Therefore, the Switch's `labelPosition` has no effect and is omitted to avoid confusion.\nexport type SwitchFieldProps = Omit<FieldProps<typeof Switch>, 'labelPosition'>;\n\nexport const switchFieldClassNames = getFieldClassNames('SwitchField');\n\nexport const SwitchField: ForwardRefComponent<SwitchFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Switch, classNames: switchFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nSwitchField.displayName = 'SwitchField';\n"]}

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1 @@
+{"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;IAIX,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\nexport { SwitchField as SwitchField_unstable, switchFieldClassNames } from './SwitchField';\nexport type { SwitchFieldProps as SwitchFieldProps_unstable } from './SwitchField';\n"]}

package/lib-commonjs/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Switch.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Switch/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-switch/src/Switch.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Switch/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/SwitchField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["SwitchField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/SwitchField/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-switch/src/SwitchField.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/SwitchField/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Switch/Switch.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;EAEA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;EAEA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CANuD,CAA3C;AAQb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSwitch_unstable } from './useSwitch';\nimport { renderSwitch_unstable } from './renderSwitch';\nimport { useSwitchStyles_unstable } from './useSwitchStyles';\nimport type { SwitchProps } from './Switch.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Switches enable users to trigger an option on or off through pressing the component.\n */\nexport const Switch: ForwardRefComponent<SwitchProps> = React.forwardRef((props, ref) => {\n  const state = useSwitch_unstable(props, ref);\n\n  useSwitchStyles_unstable(state);\n\n  return renderSwitch_unstable(state);\n});\n\nSwitch.displayName = 'Switch';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-switch/src/components/Switch/Switch.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;EAEA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;EAEA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CANuD,CAA3C;AAQb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSwitch_unstable } from './useSwitch';\nimport { renderSwitch_unstable } from './renderSwitch';\nimport { useSwitchStyles_unstable } from './useSwitchStyles';\nimport type { SwitchProps } from './Switch.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Switches enable users to trigger an option on or off through pressing the component.\n */\nexport const Switch: ForwardRefComponent<SwitchProps> = React.forwardRef((props, ref) => {\n  const state = useSwitch_unstable(props, ref);\n\n  useSwitchStyles_unstable(state);\n\n  return renderSwitch_unstable(state);\n});\n\nSwitch.displayName = 'Switch';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Switch/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Switch/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Switch';\nexport * from './Switch.types';\nexport * from './renderSwitch';\nexport * from './useSwitch';\nexport * from './useSwitchStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-switch/src/components/Switch/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Switch';\nexport * from './Switch.types';\nexport * from './renderSwitch';\nexport * from './useSwitch';\nexport * from './useSwitchStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Switch/renderSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Switch/renderSwitch.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;EACA,MAAM;IAAE;EAAF,IAAoB,KAA1B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEG,aAAa,KAAK,OAAlB,IAA6B,KAAK,CAAC,KAAnC,IAA4C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAF/C,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAhB,CAHF,EAIG,aAAa,KAAK,OAAlB,IAA6B,KAAK,CAAC,KAAnC,IAA4C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAJ/C,CADF;AAQD,CAZM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SwitchState, SwitchSlots } from './Switch.types';\n\n/**\n * Render a Switch component by passing the state defined props to the appropriate slots.\n */\nexport const renderSwitch_unstable = (state: SwitchState) => {\n  const { slots, slotProps } = getSlots<SwitchSlots>(state);\n  const { labelPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      {labelPosition !== 'after' && slots.label && <slots.label {...slotProps.label} />}\n      <slots.indicator {...slotProps.indicator} />\n      {labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-switch/src/components/Switch/renderSwitch.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;EACA,MAAM;IAAE;EAAF,IAAoB,KAA1B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADF,EAEG,aAAa,KAAK,OAAlB,IAA6B,KAAK,CAAC,KAAnC,IAA4C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAF/C,EAGE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAhB,CAHF,EAIG,aAAa,KAAK,OAAlB,IAA6B,KAAK,CAAC,KAAnC,IAA4C,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAJ/C,CADF;AAQD,CAZM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SwitchState, SwitchSlots } from './Switch.types';\n\n/**\n * Render a Switch component by passing the state defined props to the appropriate slots.\n */\nexport const renderSwitch_unstable = (state: SwitchState) => {\n  const { slots, slotProps } = getSlots<SwitchSlots>(state);\n  const { labelPosition } = state;\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.input {...slotProps.input} />\n      {labelPosition !== 'after' && slots.label && <slots.label {...slotProps.label} />}\n      <slots.indicator {...slotProps.indicator} />\n      {labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Switch/useSwitch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Switch/useSwitch.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;EACtG,MAAM;IAAE,OAAF;IAAW,cAAX;IAA2B,QAA3B;IAAqC,aAAa,GAAG,OAArD;IAA8D,QAA9D;IAAwE;EAAxE,IAAqF,KAA3F;EAEA,MAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,SAAD,EAAY,gBAAZ,EAA8B,UAA9B;EAHyB,CAA1B,CAApB;EAMA,MAAM,EAAE,GAAG,iBAAA,CAAA,KAAA,CAAM,SAAN,EAAiB,WAAW,CAAC,OAAZ,CAAoB,EAArC,CAAX;EAEA,MAAM,IAAI,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;IACxC,YAAY,EAAE;MAAE,GAAG,EAAE,eAAA,CAAA,cAAA,EAAP;MAAyC,GAAG,WAAW,CAAC;IAAxD,CAD0B;IAExC,QAAQ,EAAE;EAF8B,CAA7B,CAAb;EAKA,MAAM,SAAS,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,SAAvB,EAAkC;IAClD,YAAY,EAAE;MACZ,eAAe,IADH;MAEZ,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,YAAD,EAAa,IAAb;IAFE,CADoC;IAKlD,QAAQ,EAAE;EALwC,CAAlC,CAAlB;EAQA,MAAM,KAAK,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;IAC1C,YAAY,EAAE;MACZ,OADY;MAEZ,cAFY;MAGZ,EAHY;MAIZ,GAJY;MAKZ,IAAI,EAAE,QALM;MAMZ,IAAI,EAAE,UANM;MAOZ,GAAG,WAAW,CAAC;IAPH,CAD4B;IAU1C,QAAQ,EAAE;EAVgC,CAA9B,CAAd;EAYA,KAAK,CAAC,QAAN,GAAiB,iBAAA,CAAA,cAAA,CAAe,KAAK,CAAC,QAArB,EAA+B,EAAE,IAAI,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;IAAE,OAAO,EAAE,EAAE,CAAC,aAAH,CAAiB;EAA5B,CAAP,CAA7C,CAAjB;EAEA,MAAM,KAAK,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;IAC1C,YAAY,EAAE;MACZ,QADY;MAEZ,OAAO,EAAE,EAFG;MAGZ,QAHY;MAIZ,IAAI,EAAE;IAJM;EAD4B,CAA9B,CAAd;EASA,OAAO;IACL,aADK;IAGL;IACA,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,SAAS,EAAE,KAFD;MAGV,KAAK,EAAE,OAHG;MAIV,KAAK,EAAE,aAAA,CAAA;IAJG,CAJP;IAWL,IAXK;IAYL,SAZK;IAaL,KAbK;IAcL;EAdK,CAAP;AAgBD,CA/DM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n  const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n  });\n\n  const id = useId('switch-', nativeProps.primary.id);\n\n  const root = resolveShorthand(props.root, {\n    defaultProps: { ref: useFocusWithin<HTMLDivElement>(), ...nativeProps.root },\n    required: true,\n  });\n\n  const indicator = resolveShorthand(props.indicator, {\n    defaultProps: {\n      'aria-hidden': true,\n      children: <CircleFilled />,\n    },\n    required: true,\n  });\n\n  const input = resolveShorthand(props.input, {\n    defaultProps: {\n      checked,\n      defaultChecked,\n      id,\n      ref,\n      role: 'switch',\n      type: 'checkbox',\n      ...nativeProps.primary,\n    },\n    required: true,\n  });\n  input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n\n  const label = resolveShorthand(props.label, {\n    defaultProps: {\n      disabled,\n      htmlFor: id,\n      required,\n      size: 'medium',\n    },\n  });\n\n  return {\n    labelPosition,\n\n    //Slots definition\n    components: {\n      root: 'div',\n      indicator: 'div',\n      input: 'input',\n      label: Label,\n    },\n\n    root,\n    indicator,\n    input,\n    label,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-switch/src/components/Switch/useSwitch.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAsE;EACtG,MAAM;IAAE,OAAF;IAAW,cAAX;IAA2B,QAA3B;IAAqC,aAAa,GAAG,OAArD;IAA8D,QAA9D;IAAwE;EAAxE,IAAqF,KAA3F;EAEA,MAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,OAFwB;IAG5C,iBAAiB,EAAE,CAAC,SAAD,EAAY,gBAAZ,EAA8B,UAA9B;EAHyB,CAA1B,CAApB;EAMA,MAAM,EAAE,GAAG,iBAAA,CAAA,KAAA,CAAM,SAAN,EAAiB,WAAW,CAAC,OAAZ,CAAoB,EAArC,CAAX;EAEA,MAAM,IAAI,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,IAAvB,EAA6B;IACxC,YAAY,EAAE;MAAE,GAAG,EAAE,eAAA,CAAA,cAAA,EAAP;MAAyC,GAAG,WAAW,CAAC;IAAxD,CAD0B;IAExC,QAAQ,EAAE;EAF8B,CAA7B,CAAb;EAKA,MAAM,SAAS,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,SAAvB,EAAkC;IAClD,YAAY,EAAE;MACZ,eAAe,IADH;MAEZ,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,YAAD,EAAa,IAAb;IAFE,CADoC;IAKlD,QAAQ,EAAE;EALwC,CAAlC,CAAlB;EAQA,MAAM,KAAK,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;IAC1C,YAAY,EAAE;MACZ,OADY;MAEZ,cAFY;MAGZ,EAHY;MAIZ,GAJY;MAKZ,IAAI,EAAE,QALM;MAMZ,IAAI,EAAE,UANM;MAOZ,GAAG,WAAW,CAAC;IAPH,CAD4B;IAU1C,QAAQ,EAAE;EAVgC,CAA9B,CAAd;EAYA,KAAK,CAAC,QAAN,GAAiB,iBAAA,CAAA,cAAA,CAAe,KAAK,CAAC,QAArB,EAA+B,EAAE,IAAI,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,EAAH,EAAO;IAAE,OAAO,EAAE,EAAE,CAAC,aAAH,CAAiB;EAA5B,CAAP,CAA7C,CAAjB;EAEA,MAAM,KAAK,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;IAC1C,YAAY,EAAE;MACZ,QADY;MAEZ,OAAO,EAAE,EAFG;MAGZ,QAHY;MAIZ,IAAI,EAAE;IAJM;EAD4B,CAA9B,CAAd;EASA,OAAO;IACL,aADK;IAGL;IACA,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,SAAS,EAAE,KAFD;MAGV,KAAK,EAAE,OAHG;MAIV,KAAK,EAAE,aAAA,CAAA;IAJG,CAJP;IAWL,IAXK;IAYL,SAZK;IAaL,KAbK;IAcL;EAdK,CAAP;AAgBD,CA/DM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { useFocusWithin } from '@fluentui/react-tabster';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { SwitchProps, SwitchState } from './Switch.types';\n\n/**\n * Create the state required to render Switch.\n *\n * The returned state can be modified with hooks such as useSwitchStyles_unstable,\n * before being passed to renderSwitch_unstable.\n *\n * @param props - props from this instance of Switch\n * @param ref - reference to `<input>` element of Switch\n */\nexport const useSwitch_unstable = (props: SwitchProps, ref: React.Ref<HTMLInputElement>): SwitchState => {\n  const { checked, defaultChecked, disabled, labelPosition = 'after', onChange, required } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'input',\n    excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n  });\n\n  const id = useId('switch-', nativeProps.primary.id);\n\n  const root = resolveShorthand(props.root, {\n    defaultProps: { ref: useFocusWithin<HTMLDivElement>(), ...nativeProps.root },\n    required: true,\n  });\n\n  const indicator = resolveShorthand(props.indicator, {\n    defaultProps: {\n      'aria-hidden': true,\n      children: <CircleFilled />,\n    },\n    required: true,\n  });\n\n  const input = resolveShorthand(props.input, {\n    defaultProps: {\n      checked,\n      defaultChecked,\n      id,\n      ref,\n      role: 'switch',\n      type: 'checkbox',\n      ...nativeProps.primary,\n    },\n    required: true,\n  });\n  input.onChange = mergeCallbacks(input.onChange, ev => onChange?.(ev, { checked: ev.currentTarget.checked }));\n\n  const label = resolveShorthand(props.label, {\n    defaultProps: {\n      disabled,\n      htmlFor: id,\n      required,\n      size: 'medium',\n    },\n  });\n\n  return {\n    labelPosition,\n\n    //Slots definition\n    components: {\n      root: 'div',\n      indicator: 'div',\n      input: 'input',\n      label: Label,\n    },\n\n    root,\n    indicator,\n    input,\n    label,\n  };\n};\n"],"sourceRoot":"../src/"}

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

@@ -36,40 +36,40 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "qhf8xq": "f10pi13n",
     "Brovlpu": "ftqa4ok",
     "B486eqv": "f2hkw1w",
-    "n9p9qa": "f1fu8s9w",
-    "B0otyzi": ["f8rbx7c", "f1jcuzx9"],
-    "r10ruj": "f1c1apvh",
-    "Bk2vswc": ["f1jcuzx9", "f8rbx7c"],
-    "gjlbkn": "fyrlc8h",
-    "B1kt0iq": "f28z38y",
-    "Boi8ppg": "f1edqc4x",
-    "Btfhvw2": "f19bnj08",
-    "B55xfkk": "f17wg1r9",
-    "i1dkbe": ["fgiioun", "fnx45sh"],
-    "Bozs2tv": "f1ljqnps",
-    "snkem8": ["fnx45sh", "fgiioun"],
-    "Bjilewg": "fsacsau",
-    "wht04d": ["flcxmxr", "f138axrn"],
-    "vikdft": "f1f4bc3q",
-    "Bwdhxlo": ["f138axrn", "flcxmxr"],
-    "B167d6d": ["f5m7f7q", "f175edhc"],
-    "Bpdw69r": ["f175edhc", "f5m7f7q"],
-    "Bsdv7io": ["fhfahiz", "fnreirl"],
-    "Bd353ur": ["fnreirl", "fhfahiz"],
-    "Bcnuwmc": "fn9i64i",
-    "dyfsa2": ["f1pylbqb", "f3dy9ja"],
-    "Bdcx1rh": "f1v06qdr",
-    "Bbd0xgj": ["f3dy9ja", "f1pylbqb"],
-    "Bbretkc": "fm1yk70",
-    "rnyfg7": "f1itvegt",
-    "Bg18gms": ["f17e4q3j", "foxjjqz"],
-    "Bym00rn": ["foxjjqz", "f17e4q3j"]
+    "Bssx7fj": "f1b1k54r",
+    "uh7if5": ["f4ne723", "fqqcjud"],
+    "clntm0": "fh7aioi",
+    "Dlk2r6": ["fqqcjud", "f4ne723"],
+    "B2j2mmj": "ffht0p2",
+    "wigs8": "f1p0ul1q",
+    "pbfy6t": "f1c901ms",
+    "B0v4ure": "f1alokd7",
+    "ghq09": "f78i1la",
+    "B24cy0v": ["f1kvsw7t", "f1bw8brt"],
+    "Bwckmig": "f8k7e5g",
+    "Bvwlmkc": ["f1bw8brt", "f1kvsw7t"],
+    "Bbgo44z": "f1pmxfrl",
+    "Bil7v7r": ["fszkfcr", "f1ap5ily"],
+    "skfxo0": "f57dp0y",
+    "jo1ztg": ["f1ap5ily", "fszkfcr"],
+    "Ba3ybja": ["f11dm2qb", "f136rfnd"],
+    "az1dzo": ["f136rfnd", "f11dm2qb"],
+    "vppk2z": ["fdsq1qd", "f1khssms"],
+    "B6352mv": ["f1khssms", "fdsq1qd"],
+    "nr063g": "fq4eyks",
+    "Blmvk6g": ["f1ya6x16", "ftuszwa"],
+    "Bsiemmq": "f1e2iu44",
+    "B98u21t": ["ftuszwa", "f1ya6x16"],
+    "B2pnrqr": "f1xkdug0",
+    "Bhhzhcn": "f1m1ywml",
+    "Bec0n69": ["f7u4kgv", "f1a36mvi"],
+    "B29w5g4": ["f1a36mvi", "f7u4kgv"]
   },
   "vertical": {
     "Beiy3e4": "f1vx9l62"
   }
 }, {
-  "d": [".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1fu8s9w[data-fui-focus-visible]:focus-within{border-top-color:transparent;}", ".f8rbx7c[data-fui-focus-visible]:focus-within{border-right-color:transparent;}", ".f1jcuzx9[data-fui-focus-visible]:focus-within{border-left-color:transparent;}", ".f1c1apvh[data-fui-focus-visible]:focus-within{border-bottom-color:transparent;}", ".fyrlc8h[data-fui-focus-visible]:focus-within::after{content:\"\";}", ".f28z38y[data-fui-focus-visible]:focus-within::after{position:absolute;}", ".f1edqc4x[data-fui-focus-visible]:focus-within::after{pointer-events:none;}", ".f19bnj08[data-fui-focus-visible]:focus-within::after{z-index:1;}", ".f17wg1r9[data-fui-focus-visible]:focus-within::after{border-top-style:solid;}", ".fgiioun[data-fui-focus-visible]:focus-within::after{border-right-style:solid;}", ".fnx45sh[data-fui-focus-visible]:focus-within::after{border-left-style:solid;}", ".f1ljqnps[data-fui-focus-visible]:focus-within::after{border-bottom-style:solid;}", ".fsacsau[data-fui-focus-visible]:focus-within::after{border-top-width:2px;}", ".flcxmxr[data-fui-focus-visible]:focus-within::after{border-right-width:2px;}", ".f138axrn[data-fui-focus-visible]:focus-within::after{border-left-width:2px;}", ".f1f4bc3q[data-fui-focus-visible]:focus-within::after{border-bottom-width:2px;}", ".f5m7f7q[data-fui-focus-visible]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f175edhc[data-fui-focus-visible]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fhfahiz[data-fui-focus-visible]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fnreirl[data-fui-focus-visible]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fn9i64i[data-fui-focus-visible]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1pylbqb[data-fui-focus-visible]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".f3dy9ja[data-fui-focus-visible]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1v06qdr[data-fui-focus-visible]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".fm1yk70[data-fui-focus-visible]:focus-within::after{top:-2px;}", ".f1itvegt[data-fui-focus-visible]:focus-within::after{bottom:-2px;}", ".f17e4q3j[data-fui-focus-visible]:focus-within::after{left:-2px;}", ".foxjjqz[data-fui-focus-visible]:focus-within::after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"],
+  "d": [".f6jr5hl{-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}", ".f1ewtqcl{box-sizing:border-box;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1b1k54r[data-fui-focus-within]:focus-within{border-top-color:transparent;}", ".f4ne723[data-fui-focus-within]:focus-within{border-right-color:transparent;}", ".fqqcjud[data-fui-focus-within]:focus-within{border-left-color:transparent;}", ".fh7aioi[data-fui-focus-within]:focus-within{border-bottom-color:transparent;}", ".ffht0p2[data-fui-focus-within]:focus-within::after{content:\"\";}", ".f1p0ul1q[data-fui-focus-within]:focus-within::after{position:absolute;}", ".f1c901ms[data-fui-focus-within]:focus-within::after{pointer-events:none;}", ".f1alokd7[data-fui-focus-within]:focus-within::after{z-index:1;}", ".f78i1la[data-fui-focus-within]:focus-within::after{border-top-style:solid;}", ".f1kvsw7t[data-fui-focus-within]:focus-within::after{border-right-style:solid;}", ".f1bw8brt[data-fui-focus-within]:focus-within::after{border-left-style:solid;}", ".f8k7e5g[data-fui-focus-within]:focus-within::after{border-bottom-style:solid;}", ".f1pmxfrl[data-fui-focus-within]:focus-within::after{border-top-width:2px;}", ".fszkfcr[data-fui-focus-within]:focus-within::after{border-right-width:2px;}", ".f1ap5ily[data-fui-focus-within]:focus-within::after{border-left-width:2px;}", ".f57dp0y[data-fui-focus-within]:focus-within::after{border-bottom-width:2px;}", ".f11dm2qb[data-fui-focus-within]:focus-within::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f136rfnd[data-fui-focus-within]:focus-within::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fdsq1qd[data-fui-focus-within]:focus-within::after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1khssms[data-fui-focus-within]:focus-within::after{border-top-left-radius:var(--borderRadiusMedium);}", ".fq4eyks[data-fui-focus-within]:focus-within::after{border-top-color:var(--colorStrokeFocus2);}", ".f1ya6x16[data-fui-focus-within]:focus-within::after{border-right-color:var(--colorStrokeFocus2);}", ".ftuszwa[data-fui-focus-within]:focus-within::after{border-left-color:var(--colorStrokeFocus2);}", ".f1e2iu44[data-fui-focus-within]:focus-within::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f1xkdug0[data-fui-focus-within]:focus-within::after{top:-2px;}", ".f1m1ywml[data-fui-focus-within]:focus-within::after{bottom:-2px;}", ".f7u4kgv[data-fui-focus-within]:focus-within::after{left:-2px;}", ".f1a36mvi[data-fui-focus-within]:focus-within::after{right:-2px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"],
   "f": [".ftqa4ok:focus{outline-style:none;}"],
   "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { 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 useRootStyles = makeStyles({\n  base: {\n    alignItems: 'flex-start',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    position: 'relative',\n\n    ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n  },\n\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  base: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    ...shorthands.borderStyle('solid'),\n    ...shorthands.borderWidth('1px'),\n    lineHeight: 0,\n    boxSizing: 'border-box',\n    fill: 'currentColor',\n    flexShrink: 0,\n    fontSize: `${thumbSize}px`,\n    height: `${trackHeight}px`,\n    ...shorthands.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\n  labelAbove: {\n    marginTop: 0,\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    cursor: 'pointer',\n    height: '100%',\n    ...shorthands.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        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n      },\n\n      [`& ~ .${switchClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n\n      ':hover': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          color: tokens.colorNeutralStrokeAccessibleHover,\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n        },\n      },\n\n      ':hover:active': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          color: tokens.colorNeutralStrokeAccessiblePressed,\n          ...shorthands.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        ...shorthands.borderColor(tokens.colorTransparentStroke),\n      },\n\n      ':hover': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n          ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n        },\n      },\n\n      ':hover:active': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n          ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n        },\n      },\n    },\n\n    // Disabled and unchecked\n    ':disabled:not(:checked)': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      },\n    },\n\n    // Disabled and checked\n    ':disabled:checked': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n      },\n    },\n  },\n\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':disabled': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          color: 'GrayText',\n          ...shorthands.borderColor('GrayText'),\n        },\n\n        [`& ~ .${switchClassNames.label}`]: {\n          color: 'GrayText',\n        },\n      },\n    },\n  },\n\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\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 rootStyles = useRootStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const inputStyles = useInputStyles();\n  const labelStyles = useLabelStyles();\n\n  const { label, labelPosition } = state;\n\n  state.root.className = mergeClasses(\n    switchClassNames.root,\n    rootStyles.base,\n    labelPosition === 'above' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  state.indicator.className = mergeClasses(\n    switchClassNames.indicator,\n    indicatorStyles.base,\n    label && labelPosition === 'above' && indicatorStyles.labelAbove,\n    state.indicator.className,\n  );\n\n  state.input.className = mergeClasses(\n    switchClassNames.input,\n    inputStyles.base,\n    inputStyles.highContrast,\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"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-switch/src/components/Switch/useSwitchStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { 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 useRootStyles = makeStyles({\n  base: {\n    alignItems: 'flex-start',\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    position: 'relative',\n\n    ...createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n  },\n\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\nconst useIndicatorStyles = makeStyles({\n  base: {\n    ...shorthands.borderRadius(tokens.borderRadiusCircular),\n    ...shorthands.borderStyle('solid'),\n    ...shorthands.borderWidth('1px'),\n    lineHeight: 0,\n    boxSizing: 'border-box',\n    fill: 'currentColor',\n    flexShrink: 0,\n    fontSize: `${thumbSize}px`,\n    height: `${trackHeight}px`,\n    ...shorthands.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\n  labelAbove: {\n    marginTop: 0,\n  },\n});\n\nconst useInputStyles = makeStyles({\n  base: {\n    boxSizing: 'border-box',\n    cursor: 'pointer',\n    height: '100%',\n    ...shorthands.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        ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n      },\n\n      [`& ~ .${switchClassNames.label}`]: {\n        color: tokens.colorNeutralForeground1,\n      },\n\n      ':hover': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          color: tokens.colorNeutralStrokeAccessibleHover,\n          ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n        },\n      },\n\n      ':hover:active': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          color: tokens.colorNeutralStrokeAccessiblePressed,\n          ...shorthands.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        ...shorthands.borderColor(tokens.colorTransparentStroke),\n      },\n\n      ':hover': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundHover,\n          ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n        },\n      },\n\n      ':hover:active': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          backgroundColor: tokens.colorCompoundBrandBackgroundPressed,\n          ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n        },\n      },\n    },\n\n    // Disabled and unchecked\n    ':disabled:not(:checked)': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n      },\n    },\n\n    // Disabled and checked\n    ':disabled:checked': {\n      [`& ~ .${switchClassNames.indicator}`]: {\n        backgroundColor: tokens.colorNeutralBackgroundDisabled,\n        ...shorthands.borderColor(tokens.colorTransparentStrokeDisabled),\n      },\n    },\n  },\n\n  highContrast: {\n    '@media (forced-colors: active)': {\n      ':disabled': {\n        [`& ~ .${switchClassNames.indicator}`]: {\n          color: 'GrayText',\n          ...shorthands.borderColor('GrayText'),\n        },\n\n        [`& ~ .${switchClassNames.label}`]: {\n          color: 'GrayText',\n        },\n      },\n    },\n  },\n\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\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 rootStyles = useRootStyles();\n  const indicatorStyles = useIndicatorStyles();\n  const inputStyles = useInputStyles();\n  const labelStyles = useLabelStyles();\n\n  const { label, labelPosition } = state;\n\n  state.root.className = mergeClasses(\n    switchClassNames.root,\n    rootStyles.base,\n    labelPosition === 'above' && rootStyles.vertical,\n    state.root.className,\n  );\n\n  state.indicator.className = mergeClasses(\n    switchClassNames.indicator,\n    indicatorStyles.base,\n    label && labelPosition === 'above' && indicatorStyles.labelAbove,\n    state.indicator.className,\n  );\n\n  state.input.className = mergeClasses(\n    switchClassNames.input,\n    inputStyles.base,\n    inputStyles.highContrast,\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"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/SwitchField/SwitchField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAOA,MAAA,QAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AAMa,OAAA,CAAA,qBAAA,gBAAwB,aAAA,CAAA,kBAAA,CAAmB,aAAnB,CAAxB;AAEA,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAAE,SAAS,EAAE,QAAA,CAAA,MAAb;IAAqB,UAAU,EAAE,OAAA,CAAA;EAAjC,CAA9B,CAAd;EACA,aAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAJiE,CAArD;AAMb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Switch } from '../../Switch';\n\n// The Field's `label` prop overrides the Switch's built-in `label`.\n// Therefore, the Switch's `labelPosition` has no effect and is omitted to avoid confusion.\nexport type SwitchFieldProps = Omit<FieldProps<typeof Switch>, 'labelPosition'>;\n\nexport const switchFieldClassNames = getFieldClassNames('SwitchField');\n\nexport const SwitchField: ForwardRefComponent<SwitchFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Switch, classNames: switchFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nSwitchField.displayName = 'SwitchField';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-switch/src/components/SwitchField/SwitchField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAOA,MAAA,QAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AAMa,OAAA,CAAA,qBAAA,gBAAwB,aAAA,CAAA,kBAAA,CAAmB,aAAnB,CAAxB;AAEA,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,aAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAAE,SAAS,EAAE,QAAA,CAAA,MAAb;IAAqB,UAAU,EAAE,OAAA,CAAA;EAAjC,CAA9B,CAAd;EACA,aAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAJiE,CAArD;AAMb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Switch } from '../../Switch';\n\n// The Field's `label` prop overrides the Switch's built-in `label`.\n// Therefore, the Switch's `labelPosition` has no effect and is omitted to avoid confusion.\nexport type SwitchFieldProps = Omit<FieldProps<typeof Switch>, 'labelPosition'>;\n\nexport const switchFieldClassNames = getFieldClassNames('SwitchField');\n\nexport const SwitchField: ForwardRefComponent<SwitchFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Switch, classNames: switchFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nSwitchField.displayName = 'SwitchField';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/SwitchField/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './SwitchField';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-switch/src/components/SwitchField/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './SwitchField';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,QAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,MAAA;EAAM;AAAN,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,qBAAA;EAAqB;AAArB,CAAA,E,CACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;;AAIF,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,WAAA;EAAW;AAAX,CAAA;AAAqC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,qBAAA;EAAqB;AAArB,CAAA","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\nexport { SwitchField as SwitchField_unstable, switchFieldClassNames } from './SwitchField';\nexport type { SwitchFieldProps as SwitchFieldProps_unstable } from './SwitchField';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-switch/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,QAAA,gBAAA,OAAA,CAAA,UAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,QAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,MAAA;EAAM;AAAN,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,qBAAA;EAAqB;AAArB,CAAA,E,CACA;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,QAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;;AAIF,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,WAAA;EAAW;AAAX,CAAA;AAAqC,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,uBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,aAAA,CAAA,qBAAA;EAAqB;AAArB,CAAA","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\nexport { SwitchField as SwitchField_unstable, switchFieldClassNames } from './SwitchField';\nexport type { SwitchFieldProps as SwitchFieldProps_unstable } from './SwitchField';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-switch",
-  "version": "9.0.11",
+  "version": "9.0.13",
   "description": "Fluent UI React Switch component.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -20,10 +20,9 @@
     "lint": "just-scripts lint",
     "start": "yarn storybook",
     "test": "jest --passWithNoTests",
-    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-switch/src && yarn docs",
     "storybook": "start-storybook",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
@@ -32,12 +31,12 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-field": "9.0.0-alpha.8",
+    "@fluentui/react-field": "9.0.0-alpha.10",
     "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-label": "^9.0.10",
-    "@fluentui/react-tabster": "^9.3.0",
-    "@fluentui/react-theme": "^9.1.2",
-    "@fluentui/react-utilities": "^9.2.1",
+    "@fluentui/react-label": "^9.0.12",
+    "@fluentui/react-tabster": "^9.3.2",
+    "@fluentui/react-theme": "^9.1.3",
+    "@fluentui/react-utilities": "^9.2.2",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },