@toptal/picasso-switch 1.0.11 → 2.0.0

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

@@ -10,8 +10,6 @@ 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":"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"}
+{"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"}

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

@@ -9,23 +9,38 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Switch as MUISwitch } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Switch as MUISwitch } from '@mui/base/Switch';
 import React, { forwardRef } from 'react';
 import { FormControlLabel } from '@toptal/picasso-form';
-import styles from './styles';
-const useStyles = makeStyles(styles, { name: 'PicassoSwitch' });
+import cx from 'classnames';
 export const Switch = forwardRef(function Switch(props, ref) {
-    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 })));
+    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-[200%] h-full m-0 p-0 opacity-0 absolute top-0 -left-[50%] cursor-pointer z-20', 'group-[.base--disabled]:cursor-default'),
+            },
+        } })));
     if (!label) {
         return switchElement;
     }
     return (React.createElement(FormControlLabel, { classes: {
-            root: classes.root,
-            label: classes.label,
+            root: 'items-start text-lg',
+            label: 'ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em-0.5em+1px)]',
         }, 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,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"}
+{"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,kFAAkF,EAClF,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-switch",
-  "version": "1.0.11",
+  "version": "2.0.0",
   "description": "Toptal UI components library - Switch",
   "publishConfig": {
     "access": "public"
@@ -22,16 +22,18 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-form": "3.0.3",
-    "@toptal/picasso-shared": "15.0.0"
+    "@toptal/picasso-form": "3.0.4",
+    "@toptal/picasso-shared": "15.0.0",
+    "@mui/base": "5.0.0-beta.40",
+    "classnames": "^2.5.1"
   },
   "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": {

package/src/Switch/Switch.tsx

@@ -1,14 +1,9 @@
-import { Switch as MUISwitch } from '@material-ui/core'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
+import { Switch as MUISwitch } from '@mui/base/Switch'
 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 styles from './styles'
-
-const useStyles = makeStyles<Theme>(styles, { name: 'PicassoSwitch' })
+import cx from 'classnames'
 
 export interface Props
   extends BaseProps,
@@ -25,8 +20,6 @@ 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(
@@ -40,7 +33,6 @@ export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
     style,
     disabled,
     onChange,
-    value,
     checked,
     titleCase,
     color, // eslint-disable-line
@@ -48,7 +40,13 @@ export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
     ...rest
   } = props
 
-  const classes = useStyles()
+  const onChangeCallback: React.ChangeEventHandler<
+    HTMLInputElement
+  > = event => {
+    if (onChange) {
+      onChange(event, event.target.checked)
+    }
+  }
 
   const switchElement = (
     <MUISwitch
@@ -60,9 +58,38 @@ export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
       style={style}
       disabled={disabled}
       id={id}
-      onChange={onChange}
-      value={value}
+      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-[200%] h-full m-0 p-0 opacity-0 absolute top-0 -left-[50%] cursor-pointer z-20',
+            'group-[.base--disabled]:cursor-default'
+          ),
+        },
+      }}
     />
   )
 
@@ -73,8 +100,8 @@ export const Switch = forwardRef<HTMLButtonElement, Props>(function Switch(
   return (
     <FormControlLabel
       classes={{
-        root: classes.root,
-        label: classes.label,
+        root: 'items-start text-lg',
+        label: 'ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em-0.5em+1px)]',
       }}
       control={switchElement}
       disabled={disabled}

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

@@ -2,35 +2,27 @@
 
 exports[`Switch behaves correctly when interacting 1`] = `
 <label
-  class="PicassoFormControlLabel-root PicassoSwitch-root"
+  class="PicassoFormControlLabel-root items-start text-lg"
   data-testid="switch"
 >
   <span
-    class="MuiSwitch-root"
+    class="base-Switch base- w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group"
+    color="primary"
   >
     <span
-      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>
+      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"
+    />
     <span
-      class="MuiSwitch-track"
+      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-[200%] h-full m-0 p-0 opacity-0 absolute top-0 -left cursor-pointer z-20 group-[.base--disabled]:cursor"
+      role="switch"
+      type="checkbox"
     />
   </span>
   <span
-    class="PicassoFormLabel-root PicassoFormLabel-inline PicassoFormControlLabel-label PicassoSwitch-label"
+    class="PicassoFormLabel-root PicassoFormLabel-inline PicassoFormControlLabel-label ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em"
   >
     <span
       class="PicassoFormLabel-medium"
@@ -47,28 +39,20 @@ exports[`Switch renders default Switch without label 1`] = `
     class="Picasso-root"
   >
     <span
-      class="MuiSwitch-root"
+      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"
     >
       <span
-        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>
+        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"
+      />
       <span
-        class="MuiSwitch-track"
+        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-[200%] h-full m-0 p-0 opacity-0 absolute top-0 -left cursor-pointer z-20 group-[.base--disabled]:cursor"
+        role="switch"
+        type="checkbox"
       />
     </span>
   </div>
@@ -77,37 +61,28 @@ exports[`Switch renders default Switch without label 1`] = `
 
 exports[`Switch renders disabled state 1`] = `
 <label
-  class="PicassoFormControlLabel-root PicassoSwitch-root PicassoFormControlLabel-disabled"
+  class="PicassoFormControlLabel-root items-start text-lg PicassoFormControlLabel-disabled"
   data-testid="switch"
 >
   <span
-    class="MuiSwitch-root"
+    class="base-Switch base- w-[40px] h-[24px] p-0 relative inline-flex z-0 overflow-visible shrink-0 align-middle group"
+    color="primary"
   >
     <span
-      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>
+      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"
+    />
     <span
-      class="MuiSwitch-track"
+      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-[200%] h-full m-0 p-0 opacity-0 absolute top-0 -left cursor-pointer z-20 group-[.base--disabled]:cursor"
+      disabled=""
+      role="switch"
+      type="checkbox"
     />
   </span>
   <span
-    class="PicassoFormLabel-root PicassoFormLabel-disabled PicassoFormLabel-inline PicassoFormControlLabel-label PicassoSwitch-label"
+    class="PicassoFormLabel-root PicassoFormLabel-disabled PicassoFormLabel-inline PicassoFormControlLabel-label ml-[0.5em] mt-[0.25em] max-w-[calc(100%-1em"
   >
     <span
       class="PicassoFormLabel-medium"

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

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

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

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

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

@@ -1 +0,0 @@
-{"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/src/Switch/styles.ts

@@ -1,86 +0,0 @@
-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)`,
-    },
-  })