@toptal/picasso-switch 1.0.10-alpha-fx-4618-migrate-section-bdcbfe499.9 → 1.0.10

package/dist-package/src/Switch/Switch.d.ts

@@ -10,6 +10,8 @@ export interface Props extends BaseProps, TextLabelProps, Omit<ButtonHTMLAttribu
     label?: ReactNode;
     /** Callback invoked when `Switch` changed its value */
     onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    /** Value of the `Switch` (applicable only for controlled component) */
+    value?: string;
 }
 export declare const Switch: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
 export default Switch;

package/dist-package/src/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/Switch/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvE,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC5D,OAAO,KAAqB,MAAM,OAAO,CAAA;AAIzC,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACpE,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC1C,OAAO,EAAE,OAAO,KACb,IAAI,CAAA;CACV;AAED,eAAO,MAAM,MAAM,iFAwFjB,CAAA;AASF,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/Switch/Switch.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAA;AACvE,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC5D,OAAO,KAAqB,MAAM,OAAO,CAAA;AAOzC,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,cAAc,EACd,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IACpE,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAC1C,OAAO,EAAE,OAAO,KACb,IAAI,CAAA;IACT,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,MAAM,iFAsDjB,CAAA;AASF,eAAe,MAAM,CAAA"}

package/dist-package/src/Switch/Switch.js

@@ -9,38 +9,23 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Switch as MUISwitch } from '@mui/base/Switch';
+import { Switch as MUISwitch } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 import React, { forwardRef } from 'react';
 import { FormControlLabel } from '@toptal/picasso-form';
-import cx from 'classnames';
+import styles from './styles';
+const useStyles = makeStyles(styles, { name: 'PicassoSwitch' });
 export const Switch = forwardRef(function Switch(props, ref) {
-    const { label, id, className, style, disabled, onChange, checked, titleCase, color, // eslint-disable-line
-    'data-testid': dataTestId } = props, rest = __rest(props, ["label", "id", "className", "style", "disabled", "onChange", "checked", "titleCase", "color", 'data-testid']);
-    const onChangeCallback = event => {
-        if (onChange) {
-            onChange(event, event.target.checked);
-        }
-    };
-    const switchElement = (React.createElement(MUISwitch, Object.assign({}, rest, { color: 'primary', ref: ref, checked: checked, className: className, style: style, disabled: disabled, id: id, onChange: onChangeCallback, "data-testid": label ? undefined : dataTestId, slotProps: {
-            root: {
-                className: 'w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group',
-            },
-            track: {
-                className: cx('w-full h-full border border-solid bg-gray-600 border-gray-600 opacity-100 rounded-[12px]', 'transition-colors duration-300 ease-out', 'group-[.base--checked]:bg-blue-500 group-[.base--checked]:border-blue-500', 'group-[.base--disabled]:opacity-40', 'group-[.base--disabled:not(.base--checked)]:bg-black'),
-            },
-            thumb: {
-                className: cx('w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px]', 'transition-transform duration-150 ease-out', 'group-[:not(.base--disabled):hover]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)]', 'group-[.base--focusVisible]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)]', 'group-[.base--checked]:translate-x-[16px]'),
-            },
-            input: {
-                className: cx('w-full h-full m-0 p-0 opacity-0 absolute top-0 left-0 cursor-pointer z-20', 'group-[.base--disabled]:cursor-default'),
-            },
-        } })));
+    const { label, id, className, style, disabled, onChange, value, checked, titleCase, color, // eslint-disable-line
+    'data-testid': dataTestId } = props, rest = __rest(props, ["label", "id", "className", "style", "disabled", "onChange", "value", "checked", "titleCase", "color", 'data-testid']);
+    const classes = useStyles();
+    const switchElement = (React.createElement(MUISwitch, Object.assign({}, rest, { color: 'primary', ref: ref, checked: checked, className: className, style: style, disabled: disabled, id: id, onChange: onChange, value: value, "data-testid": label ? undefined : dataTestId })));
     if (!label) {
         return switchElement;
     }
     return (React.createElement(FormControlLabel, { classes: {
-            root: 'items-start text-lg',
-            label: 'ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em-0.5em+1px)]',
+            root: classes.root,
+            label: classes.label,
         }, control: switchElement, disabled: disabled, label: label, titleCase: titleCase, "data-testid": dataTestId }));
 });
 Switch.defaultProps = {

package/dist-package/src/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/Switch/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAGtD,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,MAAM,YAAY,CAAA;AAmB3B,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAA2B,SAAS,MAAM,CACxE,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,KAAK,EACL,EAAE,EACF,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,SAAS,EACT,KAAK,EAAE,sBAAsB;IAC7B,aAAa,EAAE,UAAU,KAEvB,KAAK,EADJ,IAAI,UACL,KAAK,EAZH,6GAYL,CAAQ,CAAA;IAET,MAAM,gBAAgB,GAElB,KAAK,CAAC,EAAE;QACV,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;SACtC;IACH,CAAC,CAAA;IAED,MAAM,aAAa,GAAG,CACpB,oBAAC,SAAS,oBACJ,IAAI,IACR,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,gBAAgB,iBACb,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAC3C,SAAS,EAAE;YACT,IAAI,EAAE;gBACJ,SAAS,EACP,6FAA6F;aAChG;YACD,KAAK,EAAE;gBACL,SAAS,EAAE,EAAE,CACX,0FAA0F,EAC1F,yCAAyC,EACzC,2EAA2E,EAC3E,oCAAoC,EACpC,sDAAsD,CACvD;aACF;YACD,KAAK,EAAE;gBACL,SAAS,EAAE,EAAE,CACX,4GAA4G,EAC5G,4CAA4C,EAC5C,6EAA6E,EAC7E,qEAAqE,EACrE,2CAA2C,CAC5C;aACF;YACD,KAAK,EAAE;gBACL,SAAS,EAAE,EAAE,CACX,2EAA2E,EAC3E,wCAAwC,CACzC;aACF;SACF,IACD,CACH,CAAA;IAED,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,aAAa,CAAA;KACrB;IAED,OAAO,CACL,oBAAC,gBAAgB,IACf,OAAO,EAAE;YACP,IAAI,EAAE,qBAAqB;YAC3B,KAAK,EAAE,yDAAyD;SACjE,EACD,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,iBACP,UAAU,GACvB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,YAAY,GAAG;IACpB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;CACnB,CAAA;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA;AAE7B,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../../src/Switch/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAGrD,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAEvD,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,CAAA;AAqBtE,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAA2B,SAAS,MAAM,CACxE,KAAK,EACL,GAAG;IAEH,MAAM,EACJ,KAAK,EACL,EAAE,EACF,SAAS,EACT,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,OAAO,EACP,SAAS,EACT,KAAK,EAAE,sBAAsB;IAC7B,aAAa,EAAE,UAAU,KAEvB,KAAK,EADJ,IAAI,UACL,KAAK,EAbH,sHAaL,CAAQ,CAAA;IAET,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,aAAa,GAAG,CACpB,oBAAC,SAAS,oBACJ,IAAI,IACR,KAAK,EAAC,SAAS,EACf,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,iBACC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,IAC3C,CACH,CAAA;IAED,IAAI,CAAC,KAAK,EAAE;QACV,OAAO,aAAa,CAAA;KACrB;IAED,OAAO,CACL,oBAAC,gBAAgB,IACf,OAAO,EAAE;YACP,IAAI,EAAE,OAAO,CAAC,IAAI;YAClB,KAAK,EAAE,OAAO,CAAC,KAAK;SACrB,EACD,OAAO,EAAE,aAAa,EACtB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,iBACP,UAAU,GACvB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,CAAC,YAAY,GAAG;IACpB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;CACnB,CAAA;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA;AAE7B,eAAe,MAAM,CAAA"}

package/dist-package/src/Switch/styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: () => import("@material-ui/styles").StyleRules<{}, "root" | "label">;
+export default _default;
+//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/Switch/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Switch/styles.ts"],"names":[],"mappings":";AA4EA,wBASI"}

package/dist-package/src/Switch/styles.js

@@ -0,0 +1,79 @@
+import { createStyles } from '@material-ui/core/styles';
+import { outline } from '@toptal/picasso-shared';
+import { PicassoProvider } from '@toptal/picasso-provider';
+const CONTROL_WIDTH = '1em';
+const LABEL_LEFT_MARGIN = '0.5em';
+const LABEL_TOP_MARGIN = '0.25em';
+const THUMB_SIZE = 22;
+const TRACK_HEIGHT = THUMB_SIZE + 2;
+const TRACK_WIDTH = 40;
+PicassoProvider.override(({ palette, transitions }) => ({
+    MuiSwitch: {
+        root: {
+            width: TRACK_WIDTH,
+            height: TRACK_HEIGHT,
+            padding: 0,
+            overflow: 'visible',
+        },
+        switchBase: {
+            top: 1,
+            left: 1,
+            padding: 0,
+            color: palette.common.white,
+            '&$checked': {
+                transform: 'translateX(16px)',
+                color: palette.common.white,
+                '& + $track': {
+                    backgroundColor: palette.primary.main,
+                    borderColor: palette.primary.main,
+                    opacity: 1,
+                },
+                '&$disabled + $track': {
+                    opacity: 0.4,
+                    backgroundColor: palette.primary.main,
+                    borderColor: palette.primary.main,
+                },
+            },
+            '&:hover, &.Mui-focusVisible': Object.assign({}, outline(palette.primary.main, 4)),
+            '&$disabled': {
+                '& + $track': {
+                    opacity: 0.4,
+                    backgroundColor: palette.grey.main2,
+                    borderColor: palette.grey.main2,
+                },
+            },
+        },
+        thumb: {
+            width: THUMB_SIZE,
+            height: THUMB_SIZE,
+            color: palette.common.white,
+            // fix for bad subpixel rendering on 150% displays
+            '@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.5)': {
+                transform: 'translate(-0.2px, -0.3px)',
+            },
+        },
+        track: {
+            borderRadius: TRACK_HEIGHT / 2,
+            border: `1px solid ${palette.grey.main2}`,
+            backgroundColor: palette.grey.main2,
+            borderColor: palette.grey.main2,
+            opacity: 1,
+            transition: transitions.create(['background-color', 'border']),
+        },
+        disabled: {
+            '& + $track': {
+                opacity: 0.4,
+            },
+        },
+    },
+}));
+export default () => createStyles({
+    root: { alignItems: 'flex-start', fontSize: '1rem' },
+    label: {
+        marginLeft: LABEL_LEFT_MARGIN,
+        marginTop: LABEL_TOP_MARGIN,
+        // 1px is needed for safari
+        maxWidth: `calc(100% - ${CONTROL_WIDTH} - ${LABEL_LEFT_MARGIN} + 1px)`,
+    },
+});
+//# sourceMappingURL=styles.js.map

package/dist-package/src/Switch/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Switch/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAE1D,MAAM,aAAa,GAAG,KAAK,CAAA;AAC3B,MAAM,iBAAiB,GAAG,OAAO,CAAA;AACjC,MAAM,gBAAgB,GAAG,QAAQ,CAAA;AAEjC,MAAM,UAAU,GAAG,EAAE,CAAA;AACrB,MAAM,YAAY,GAAG,UAAU,GAAG,CAAC,CAAA;AACnC,MAAM,WAAW,GAAG,EAAE,CAAA;AAEtB,eAAe,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC;IACtD,SAAS,EAAE;QACT,IAAI,EAAE;YACJ,KAAK,EAAE,WAAW;YAClB,MAAM,EAAE,YAAY;YACpB,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE,SAAS;SACpB;QACD,UAAU,EAAE;YACV,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,OAAO,EAAE,CAAC;YACV,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;YAC3B,WAAW,EAAE;gBACX,SAAS,EAAE,kBAAkB;gBAC7B,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;gBAC3B,YAAY,EAAE;oBACZ,eAAe,EAAE,OAAO,CAAC,OAAO,CAAC,IAAI;oBACrC,WAAW,EAAE,OAAO,CAAC,OAAO,CAAC,IAAI;oBACjC,OAAO,EAAE,CAAC;iBACX;gBACD,qBAAqB,EAAE;oBACrB,OAAO,EAAE,GAAG;oBACZ,eAAe,EAAE,OAAO,CAAC,OAAO,CAAC,IAAI;oBACrC,WAAW,EAAE,OAAO,CAAC,OAAO,CAAC,IAAI;iBAClC;aACF;YACD,6BAA6B,oBACxB,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CACpC;YACD,YAAY,EAAE;gBACZ,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;oBACZ,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;oBACnC,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;iBAChC;aACF;SACF;QACD,KAAK,EAAE;YACL,KAAK,EAAE,UAAU;YACjB,MAAM,EAAE,UAAU;YAClB,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;YAC3B,kDAAkD;YAClD,wFAAwF,EACtF;gBACE,SAAS,EAAE,2BAA2B;aACvC;SACJ;QACD,KAAK,EAAE;YACL,YAAY,EAAE,YAAY,GAAG,CAAC;YAC9B,MAAM,EAAE,aAAa,OAAO,CAAC,IAAI,CAAC,KAAK,EAAE;YACzC,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;YACnC,WAAW,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;YAC/B,OAAO,EAAE,CAAC;YACV,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;SAC/D;QACD,QAAQ,EAAE;YACR,YAAY,EAAE;gBACZ,OAAO,EAAE,GAAG;aACb;SACF;KACF;CACF,CAAC,CAAC,CAAA;AAEH,eAAe,GAAG,EAAE,CAClB,YAAY,CAAC;IACX,IAAI,EAAE,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,EAAE;IACpD,KAAK,EAAE;QACL,UAAU,EAAE,iBAAiB;QAC7B,SAAS,EAAE,gBAAgB;QAC3B,2BAA2B;QAC3B,QAAQ,EAAE,eAAe,aAAa,MAAM,iBAAiB,SAAS;KACvE;CACF,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-switch",
-  "version": "1.0.10-alpha-fx-4618-migrate-section-bdcbfe499.9+bdcbfe499",
+  "version": "1.0.10",
   "description": "Toptal UI components library - Switch",
   "publishConfig": {
     "access": "public"
@@ -22,31 +22,28 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@mui/base": "5.0.0-beta.40",
-    "@toptal/picasso-form": "3.0.2-alpha-fx-4618-migrate-section-bdcbfe499.9+bdcbfe499",
-    "@toptal/picasso-shared": "15.0.1-alpha-fx-4618-migrate-section-bdcbfe499.9+bdcbfe499",
-    "classnames": "^2.5.1"
+    "@toptal/picasso-form": "3.0.2",
+    "@toptal/picasso-shared": "15.0.0"
   },
   "sideEffects": [
     "**/styles.ts",
     "**/styles.js"
   ],
   "peerDependencies": {
+    "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
-    "@toptal/picasso-tailwind": "^2.5.0",
     "react": ">=16.12.0 < 19.0.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "4.2.2-alpha-fx-4618-migrate-section-bdcbfe499.17+bdcbfe499",
-    "@toptal/picasso-test-utils": "1.1.2-alpha-fx-4618-migrate-section-bdcbfe499.9+bdcbfe499"
+    "@toptal/picasso-provider": "4.2.1",
+    "@toptal/picasso-test-utils": "1.1.1"
   },
   "files": [
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
-  ],
-  "gitHead": "bdcbfe4990a9041d6effc060e31f96d3d21e346f"
+  ]
 }

package/src/Switch/Switch.tsx

@@ -1,9 +1,14 @@
-import { Switch as MUISwitch } from '@mui/base/Switch'
+import { Switch as MUISwitch } from '@material-ui/core'
+import type { Theme } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import type { BaseProps, TextLabelProps } from '@toptal/picasso-shared'
 import type { ButtonHTMLAttributes, ReactNode } from 'react'
 import React, { forwardRef } from 'react'
 import { FormControlLabel } from '@toptal/picasso-form'
-import cx from 'classnames'
+
+import styles from './styles'
+
+const useStyles = makeStyles<Theme>(styles, { name: 'PicassoSwitch' })
 
 export interface Props
   extends BaseProps,
@@ -20,6 +25,8 @@ export interface Props
     event: React.ChangeEvent<HTMLInputElement>,
     checked: boolean
   ) => void
+  /** Value of the `Switch` (applicable only for controlled component) */
+  value?: string
 }
 
 export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
@@ -33,6 +40,7 @@ export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
     style,
     disabled,
     onChange,
+    value,
     checked,
     titleCase,
     color, // eslint-disable-line
@@ -40,13 +48,7 @@ export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
     ...rest
   } = props
 
-  const onChangeCallback: React.ChangeEventHandler<
-    HTMLInputElement
-  > = event => {
-    if (onChange) {
-      onChange(event, event.target.checked)
-    }
-  }
+  const classes = useStyles()
 
   const switchElement = (
     <MUISwitch
@@ -58,38 +60,9 @@ export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
       style={style}
       disabled={disabled}
       id={id}
-      onChange={onChangeCallback}
+      onChange={onChange}
+      value={value}
       data-testid={label ? undefined : dataTestId}
-      slotProps={{
-        root: {
-          className:
-            'w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group',
-        },
-        track: {
-          className: cx(
-            'w-full h-full border border-solid bg-gray-600 border-gray-600 opacity-100 rounded-[12px]',
-            'transition-colors duration-300 ease-out',
-            'group-[.base--checked]:bg-blue-500 group-[.base--checked]:border-blue-500',
-            'group-[.base--disabled]:opacity-40',
-            'group-[.base--disabled:not(.base--checked)]:bg-black'
-          ),
-        },
-        thumb: {
-          className: cx(
-            'w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px]',
-            'transition-transform duration-150 ease-out',
-            'group-[:not(.base--disabled):hover]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)]',
-            'group-[.base--focusVisible]:shadow-[0_0_0_4px_rgba(32,78,207,0.48)]',
-            'group-[.base--checked]:translate-x-[16px]'
-          ),
-        },
-        input: {
-          className: cx(
-            'w-full h-full m-0 p-0 opacity-0 absolute top-0 left-0 cursor-pointer z-20',
-            'group-[.base--disabled]:cursor-default'
-          ),
-        },
-      }}
     />
   )
 
@@ -100,8 +73,8 @@ export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
   return (
     <FormControlLabel
       classes={{
-        root: 'items-start text-lg',
-        label: 'ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em-0.5em+1px)]',
+        root: classes.root,
+        label: classes.label,
       }}
       control={switchElement}
       disabled={disabled}

package/src/Switch/__snapshots__/test.tsx.snap

@@ -2,27 +2,35 @@
 
 exports[`Switch behaves correctly when interacting 1`] = `
 <label
-  class="PicassoFormControlLabel-root items-start text-lg"
+  class="PicassoFormControlLabel-root PicassoSwitch-root"
   data-testid="switch"
 >
   <span
-    class="base-Switch base- w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group"
-    color="primary"
+    class="MuiSwitch-root"
   >
     <span
-      class="base-Switch w-full h-full border border-solid bg-gray border-gray opacity-100 rounded-[12px] transition-colors duration-300 ease-out group-[.base--checked]:bg-blue group-[.base--checked]:border-blue group-[.base--disabled]:opacity group-[.base--disabled:not(.base--checked)]:bg"
-    />
+      aria-disabled="false"
+      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-checked Mui-checked"
+    >
+      <span
+        class="MuiIconButton-label"
+      >
+        <input
+          class="PrivateSwitchBase-input MuiSwitch-input"
+          type="checkbox"
+          value=""
+        />
+        <span
+          class="MuiSwitch-thumb"
+        />
+      </span>
+    </span>
     <span
-      class="base-Switch w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px] transition-transform duration-150 ease-out group-[:not(.base--disabled):hover]:shadow group-[.base--focusVisible]:shadow group-[.base--checked]:translate-x"
-    />
-    <input
-      class="base-Switch w-full h-full m-0 p-0 opacity-0 absolute top-0 left-0 cursor-pointer z-20 group-[.base--disabled]:cursor"
-      role="switch"
-      type="checkbox"
+      class="MuiSwitch-track"
     />
   </span>
   <span
-    class="PicassoFormLabel-root PicassoFormLabel-inline PicassoFormControlLabel-label ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em"
+    class="PicassoFormLabel-root PicassoFormLabel-inline PicassoFormControlLabel-label PicassoSwitch-label"
   >
     <span
       class="PicassoFormLabel-medium"
@@ -39,20 +47,28 @@ exports[`Switch renders default Switch without label 1`] = `
     class="Picasso-root"
   >
     <span
-      class="base-Switch w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group"
-      color="primary"
-      data-testid="switch"
+      class="MuiSwitch-root"
     >
       <span
-        class="base-Switch w-full h-full border border-solid bg-gray border-gray opacity-100 rounded-[12px] transition-colors duration-300 ease-out group-[.base--checked]:bg-blue group-[.base--checked]:border-blue group-[.base--disabled]:opacity group-[.base--disabled:not(.base--checked)]:bg"
-      />
+        aria-disabled="false"
+        class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary"
+        data-testid="switch"
+      >
+        <span
+          class="MuiIconButton-label"
+        >
+          <input
+            class="PrivateSwitchBase-input MuiSwitch-input"
+            type="checkbox"
+            value=""
+          />
+          <span
+            class="MuiSwitch-thumb"
+          />
+        </span>
+      </span>
       <span
-        class="base-Switch w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px] transition-transform duration-150 ease-out group-[:not(.base--disabled):hover]:shadow group-[.base--focusVisible]:shadow group-[.base--checked]:translate-x"
-      />
-      <input
-        class="base-Switch w-full h-full m-0 p-0 opacity-0 absolute top-0 left-0 cursor-pointer z-20 group-[.base--disabled]:cursor"
-        role="switch"
-        type="checkbox"
+        class="MuiSwitch-track"
       />
     </span>
   </div>
@@ -61,28 +77,37 @@ exports[`Switch renders default Switch without label 1`] = `
 
 exports[`Switch renders disabled state 1`] = `
 <label
-  class="PicassoFormControlLabel-root items-start text-lg PicassoFormControlLabel-disabled"
+  class="PicassoFormControlLabel-root PicassoSwitch-root PicassoFormControlLabel-disabled"
   data-testid="switch"
 >
   <span
-    class="base-Switch base- w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group"
-    color="primary"
+    class="MuiSwitch-root"
   >
     <span
-      class="base-Switch w-full h-full border border-solid bg-gray border-gray opacity-100 rounded-[12px] transition-colors duration-300 ease-out group-[.base--checked]:bg-blue group-[.base--checked]:border-blue group-[.base--disabled]:opacity group-[.base--disabled:not(.base--checked)]:bg"
-    />
+      aria-disabled="true"
+      class="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root MuiSwitch-switchBase MuiSwitch-colorPrimary PrivateSwitchBase-disabled Mui-disabled Mui-disabled Mui-disabled"
+      tabindex="-1"
+    >
+      <span
+        class="MuiIconButton-label"
+      >
+        <input
+          class="PrivateSwitchBase-input MuiSwitch-input"
+          disabled=""
+          type="checkbox"
+          value=""
+        />
+        <span
+          class="MuiSwitch-thumb"
+        />
+      </span>
+    </span>
     <span
-      class="base-Switch w-[22px] h-[22px] bg-current text-white block rounded-full shadow-1 absolute z-10 p-0 top-[1px] left-[1px] transition-transform duration-150 ease-out group-[:not(.base--disabled):hover]:shadow group-[.base--focusVisible]:shadow group-[.base--checked]:translate-x"
-    />
-    <input
-      class="base-Switch w-full h-full m-0 p-0 opacity-0 absolute top-0 left-0 cursor-pointer z-20 group-[.base--disabled]:cursor"
-      disabled=""
-      role="switch"
-      type="checkbox"
+      class="MuiSwitch-track"
     />
   </span>
   <span
-    class="PicassoFormLabel-root PicassoFormLabel-disabled PicassoFormLabel-inline PicassoFormControlLabel-label ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em"
+    class="PicassoFormLabel-root PicassoFormLabel-disabled PicassoFormLabel-inline PicassoFormControlLabel-label PicassoSwitch-label"
   >
     <span
       class="PicassoFormLabel-medium"

package/src/Switch/styles.ts

@@ -0,0 +1,86 @@
+import { createStyles } from '@material-ui/core/styles'
+import { outline } from '@toptal/picasso-shared'
+import { PicassoProvider } from '@toptal/picasso-provider'
+
+const CONTROL_WIDTH = '1em'
+const LABEL_LEFT_MARGIN = '0.5em'
+const LABEL_TOP_MARGIN = '0.25em'
+
+const THUMB_SIZE = 22
+const TRACK_HEIGHT = THUMB_SIZE + 2
+const TRACK_WIDTH = 40
+
+PicassoProvider.override(({ palette, transitions }) => ({
+  MuiSwitch: {
+    root: {
+      width: TRACK_WIDTH,
+      height: TRACK_HEIGHT,
+      padding: 0,
+      overflow: 'visible',
+    },
+    switchBase: {
+      top: 1,
+      left: 1,
+      padding: 0,
+      color: palette.common.white,
+      '&$checked': {
+        transform: 'translateX(16px)',
+        color: palette.common.white,
+        '& + $track': {
+          backgroundColor: palette.primary.main,
+          borderColor: palette.primary.main,
+          opacity: 1,
+        },
+        '&$disabled + $track': {
+          opacity: 0.4,
+          backgroundColor: palette.primary.main,
+          borderColor: palette.primary.main,
+        },
+      },
+      '&:hover, &.Mui-focusVisible': {
+        ...outline(palette.primary.main, 4),
+      },
+      '&$disabled': {
+        '& + $track': {
+          opacity: 0.4,
+          backgroundColor: palette.grey.main2,
+          borderColor: palette.grey.main2,
+        },
+      },
+    },
+    thumb: {
+      width: THUMB_SIZE,
+      height: THUMB_SIZE,
+      color: palette.common.white,
+      // fix for bad subpixel rendering on 150% displays
+      '@media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.5)':
+        {
+          transform: 'translate(-0.2px, -0.3px)',
+        },
+    },
+    track: {
+      borderRadius: TRACK_HEIGHT / 2,
+      border: `1px solid ${palette.grey.main2}`,
+      backgroundColor: palette.grey.main2,
+      borderColor: palette.grey.main2,
+      opacity: 1,
+      transition: transitions.create(['background-color', 'border']),
+    },
+    disabled: {
+      '& + $track': {
+        opacity: 0.4,
+      },
+    },
+  },
+}))
+
+export default () =>
+  createStyles({
+    root: { alignItems: 'flex-start', fontSize: '1rem' },
+    label: {
+      marginLeft: LABEL_LEFT_MARGIN,
+      marginTop: LABEL_TOP_MARGIN,
+      // 1px is needed for safari
+      maxWidth: `calc(100% - ${CONTROL_WIDTH} - ${LABEL_LEFT_MARGIN} + 1px)`,
+    },
+  })

package/LICENSE

@@ -1,20 +0,0 @@
-MIT License
-
-Copyright (c) 2021-2022 Toptal, LLC
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the “Software”), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.