@automattic/vip-design-system 2.1.0 → 2.3.0

package/build/system/Drawer/Drawer.stories.js

@@ -1,18 +1,15 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.VIPMobileMenu = exports.Default = exports.ByParts = void 0;
-var _ai = require("react-icons/ai");
-var _bi = require("react-icons/bi");
-var _md = require("react-icons/md");
+exports["default"] = exports.Default = exports.ByParts = void 0;
 var _Drawer = require("./Drawer");
 var _ = require("..");
-var _Logo = require("../Toolbar/Logo");
-var _CustomLink = require("../utils/stories/CustomLink");
 var _jsxRuntime = require("theme-ui/jsx-runtime");
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
 /** @jsxImportSource theme-ui */
 var _default = exports["default"] = {
-  title: 'Drawer',
+  title: 'Navigation/Drawer',
   component: _Drawer.Drawer,
   parameters: {
     docs: {
@@ -30,7 +27,9 @@ var Default = exports.Default = {
         trigger: (0, _jsxRuntime.jsx)(_.Button, {
           children: "Open "
         }),
-        width: 320,
+        dimensions: {
+          width: 320
+        },
         children: (0, _jsxRuntime.jsx)("p", {
           sx: {
             ml: 3
@@ -55,7 +54,9 @@ var Default = exports.Default = {
         }),
         variant: "right",
         label: "Dialog",
-        width: 500,
+        dimensions: {
+          width: 500
+        },
         children: (0, _jsxRuntime.jsx)("p", {
           sx: {
             ml: 3
@@ -68,7 +69,9 @@ var Default = exports.Default = {
         }),
         variant: "bottom",
         label: "Dialog",
-        height: 200,
+        dimensions: {
+          height: 200
+        },
         children: (0, _jsxRuntime.jsx)("p", {
           sx: {
             ml: 3
@@ -81,7 +84,9 @@ var Default = exports.Default = {
         }),
         variant: "left",
         label: "Dialog",
-        width: 600,
+        dimensions: {
+          width: 600
+        },
         children: (0, _jsxRuntime.jsx)("p", {
           sx: {
             ml: 3
@@ -125,7 +130,9 @@ var ByParts = exports.ByParts = {
             children: "Open "
           })
         }), (0, _jsxRuntime.jsx)(_Drawer.Content, {
-          width: 320,
+          dimensions: {
+            width: 320
+          },
           label: "My XYZ Dialog",
           children: (0, _jsxRuntime.jsx)("p", {
             sx: {
@@ -137,217 +144,4 @@ var ByParts = exports.ByParts = {
       })
     });
   }
-};
-var VIPMobileMenu = exports.VIPMobileMenu = {
-  render: function render() {
-    return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-      children: (0, _jsxRuntime.jsxs)(_Drawer.Root, {
-        children: [(0, _jsxRuntime.jsx)(_Drawer.Trigger, {
-          children: (0, _jsxRuntime.jsxs)(_.Button, {
-            type: "button",
-            variant: "tertiary",
-            sx: {
-              display: 'flex',
-              alignItems: 'center',
-              fontSize: 2,
-              gap: 1,
-              mx: 2
-            },
-            children: ["Menu", (0, _jsxRuntime.jsx)(_md.MdMenu, {
-              size: 24,
-              sx: {
-                mt: function mt(theme) {
-                  var _theme$space;
-                  return (theme == null || (_theme$space = theme.space) == null ? void 0 : _theme$space[1]) / 2 + "px";
-                }
-              }
-            })]
-          })
-        }), (0, _jsxRuntime.jsx)(_Drawer.Content, {
-          label: "Dialog X",
-          variant: "left",
-          width: 320,
-          children: (0, _jsxRuntime.jsxs)("div", {
-            sx: {
-              backgroundColor: 'toolbar.background',
-              boxShadow: 'none'
-            },
-            children: [(0, _jsxRuntime.jsx)("div", {
-              sx: {
-                height: 56,
-                width: '100%',
-                p: 4,
-                px: 5
-              },
-              children: (0, _jsxRuntime.jsx)(_Logo.Logo, {})
-            }), (0, _jsxRuntime.jsx)("div", {
-              sx: {
-                overflowX: 'hidden',
-                overflowY: 'auto',
-                height: 'calc(100vh - 56px)',
-                display: 'flex',
-                flex: 1
-              },
-              children: (0, _jsxRuntime.jsxs)(_.Flex, {
-                sx: {
-                  width: '100%',
-                  flexDirection: 'column'
-                },
-                children: [(0, _jsxRuntime.jsxs)(_.Nav.Primary, {
-                  label: "Main Links",
-                  orientation: "vertical",
-                  sx: {
-                    p: 4
-                  },
-                  children: [(0, _jsxRuntime.jsx)(_.NavItem.MenuInverse, {
-                    href: "/apps",
-                    active: true,
-                    as: _CustomLink.CustomLink,
-                    children: "My Applications"
-                  }), (0, _jsxRuntime.jsx)(_.NavItem.MenuInverse, {
-                    href: "/orgs",
-                    as: _CustomLink.CustomLink,
-                    children: "My Organizations"
-                  })]
-                }), (0, _jsxRuntime.jsx)(_.Box, {
-                  sx: {
-                    alignSelf: 'stretch',
-                    backgroundColor: 'layer.1',
-                    minHeight: "calc(100vh - 56px)",
-                    pt: 2,
-                    px: 4,
-                    width: '100%',
-                    a: {
-                      border: 'none'
-                    }
-                  },
-                  children: (0, _jsxRuntime.jsxs)(_.Nav.Menu, {
-                    sx: {
-                      mb: 4
-                    },
-                    label: "Nav Menu",
-                    children: [(0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-                      href: "https://wordpress.com",
-                      renderIcon: function renderIcon(size) {
-                        return (0, _jsxRuntime.jsx)(_bi.BiGridAlt, {
-                          size: size
-                        });
-                      },
-                      as: _CustomLink.CustomLink,
-                      children: "Overview"
-                    }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-                      as: _CustomLink.CustomLink,
-                      href: "https://random-website.com/",
-                      renderIcon: function renderIcon(size) {
-                        return (0, _jsxRuntime.jsx)(_bi.BiWindows, {
-                          size: size
-                        });
-                      },
-                      children: "Network Sites"
-                    }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-                      as: _CustomLink.CustomLink,
-                      href: "https://random-website.com/",
-                      renderIcon: function renderIcon(size) {
-                        return (0, _jsxRuntime.jsx)(_ai.AiOutlineLock, {
-                          size: size
-                        });
-                      },
-                      children: "Domains & TLS"
-                    }), (0, _jsxRuntime.jsxs)(_.NavItem.MenuGroup, {
-                      active: true,
-                      label: "Logs",
-                      renderIcon: function renderIcon(size) {
-                        return (0, _jsxRuntime.jsx)(_bi.BiHistory, {
-                          size: size
-                        });
-                      },
-                      children: [(0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-                        active: true,
-                        as: _CustomLink.CustomLink,
-                        href: "https://google.com/",
-                        children: "Audit"
-                      }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-                        as: _CustomLink.CustomLink,
-                        href: "https://wpvip.com/",
-                        children: "Runtime"
-                      }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-                        as: _CustomLink.CustomLink,
-                        href: "https://dashboard.wpvip.com/",
-                        children: "Slow Query"
-                      })]
-                    }), (0, _jsxRuntime.jsxs)(_.NavItem.MenuGroup, {
-                      label: "Performance",
-                      renderIcon: function renderIcon(size) {
-                        return (0, _jsxRuntime.jsx)(_bi.BiTachometer, {
-                          size: size
-                        });
-                      },
-                      children: [(0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-                        as: _CustomLink.CustomLink,
-                        href: "https://random-website.com/",
-                        children: "Metrics"
-                      }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-                        as: _CustomLink.CustomLink,
-                        href: "https://random-website.com/",
-                        children: "Monitor"
-                      }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-                        as: _CustomLink.CustomLink,
-                        href: "https://random-website.com/",
-                        children: "Cache"
-                      })]
-                    }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-                      as: _CustomLink.CustomLink,
-                      href: "https://random-website.com/",
-                      renderIcon: function renderIcon(size) {
-                        return (0, _jsxRuntime.jsx)(_bi.BiCodeAlt, {
-                          size: size
-                        });
-                      },
-                      children: "Code [v]"
-                    }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-                      as: _CustomLink.CustomLink,
-                      href: "https://random-website.com/",
-                      renderIcon: function renderIcon(size) {
-                        return (0, _jsxRuntime.jsx)(_bi.BiData, {
-                          size: size
-                        });
-                      },
-                      children: "Database [v]"
-                    }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-                      as: _CustomLink.CustomLink,
-                      href: "https://random-website.com/",
-                      renderIcon: function renderIcon(size) {
-                        return (0, _jsxRuntime.jsx)(_md.MdOutlinePhotoLibrary, {
-                          size: size
-                        });
-                      },
-                      children: "Media [v]"
-                    }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-                      as: _CustomLink.CustomLink,
-                      href: "https://random-website.com/",
-                      renderIcon: function renderIcon(size) {
-                        return (0, _jsxRuntime.jsx)(_bi.BiBell, {
-                          size: size
-                        });
-                      },
-                      children: "Notifications"
-                    }), (0, _jsxRuntime.jsx)(_.NavItem.Menu, {
-                      as: _CustomLink.CustomLink,
-                      href: "https://random-website.com/",
-                      renderIcon: function renderIcon(size) {
-                        return (0, _jsxRuntime.jsx)(_bi.BiBulb, {
-                          size: size
-                        });
-                      },
-                      children: "Features"
-                    })]
-                  })
-                })]
-              })
-            })]
-          })
-        })]
-      })
-    });
-  }
 };

package/build/system/Drawer/styles.d.ts

@@ -1,5 +1,5 @@
 /** @jsxImportSource theme-ui */
 import { ThemeUIStyleObject } from 'theme-ui';
-import { DrawerProps } from './Drawer';
-export declare const drawerContentStyles: (variant: DrawerProps['variant'], width?: string | number, height?: string | number | undefined) => ThemeUIStyleObject;
+import { DrawerProps, responsiveDimensionsProp } from './Drawer';
+export declare const drawerContentStyles: (variant: DrawerProps['variant'], dimensions?: responsiveDimensionsProp) => ThemeUIStyleObject;
 export declare const drawerOverlayStyles: (variant: DrawerProps['variant']) => ThemeUIStyleObject;

package/build/system/Drawer/styles.js

@@ -28,13 +28,13 @@ var slideOut = function slideOut(theme, variant) {
     });
   }
 };
-var drawerContentStyles = exports.drawerContentStyles = function drawerContentStyles(variant, width, height) {
-  if (width === void 0) {
-    width = '100%';
-  }
-  if (height === void 0) {
-    height = undefined;
-  }
+var drawerContentStyles = exports.drawerContentStyles = function drawerContentStyles(variant, dimensions) {
+  var width = (dimensions == null ? void 0 : dimensions.width) || ['100%', '100%', '80vw'];
+  var height = (dimensions == null ? void 0 : dimensions.height) || '100vh';
+  var minWidth = (dimensions == null ? void 0 : dimensions.minWidth) || '16rem';
+  var minHeight = (dimensions == null ? void 0 : dimensions.minHeight) || '100vh';
+  var maxWidth = (dimensions == null ? void 0 : dimensions.maxWidth) || '22rem';
+  var maxHeight = (dimensions == null ? void 0 : dimensions.maxHeight) || '100vh';
   var defaultStyles = {
     p: 0,
     m: 0,
@@ -45,6 +45,10 @@ var drawerContentStyles = exports.drawerContentStyles = function drawerContentSt
     bottom: 0,
     width: width,
     height: height,
+    minWidth: minWidth,
+    minHeight: minHeight,
+    maxWidth: maxWidth,
+    maxHeight: maxHeight,
     variant: "drawer." + variant + ".styles",
     // Among other things, prevents text alignment inconsistencies when dialog can't be centered in the viewport evenly.
     // Affects animated and non-animated dialogs alike.
@@ -66,7 +70,7 @@ var drawerContentStyles = exports.drawerContentStyles = function drawerContentSt
       {
         return _extends({}, defaultStyles, {
           backgroundColor: 'layer.1',
-          top: [56, 56, 56, 64]
+          top: 64
         });
       }
     default:
@@ -111,7 +115,7 @@ var drawerOverlayStyles = exports.drawerOverlayStyles = function drawerOverlaySt
     case 'right-header':
       {
         return _extends({}, defaultStyles, {
-          top: [56, 56, 56, 64]
+          top: 64
         });
       }
     default:

package/build/system/Form/Checkbox/Checkbox.js

@@ -39,9 +39,6 @@ var Checkbox = exports.Checkbox = function Checkbox(_ref3) {
     variant = 'disabled';
   }
   return (0, _jsxRuntime.jsx)(StyledCheckbox, _extends({
-    sx: {
-      opacity: disabled ? 0.4 : 1
-    },
     onCheckedChange: disabled ? undefined : onCheckedChange,
     "aria-disabled": disabled,
     variant: variant

package/build/system/Form/Checkbox/Checkbox.stories.js

@@ -33,7 +33,7 @@ var Default = exports.Default = function Default() {
     checked2 = _useState2[0],
     setChecked2 = _useState2[1];
   return (0, _jsxRuntime.jsxs)(_.Form.Root, {
-    children: [['primary', 'success', 'brand'].map(function (variant) {
+    children: [['primary', 'brand'].map(function (variant) {
       return (0, _jsxRuntime.jsxs)(_.Form.Fieldset, {
         children: [(0, _jsxRuntime.jsxs)(_.Form.Legend, {
           children: ["Tell me your ", variant, " prefereces"]
@@ -120,7 +120,7 @@ var Indeterminate = exports.Indeterminate = function Indeterminate() {
     }
   }, [checkRef]);
   return (0, _jsxRuntime.jsxs)(_.Form.Root, {
-    children: [['primary', 'success', 'brand'].map(function (variant) {
+    children: [['primary', 'brand'].map(function (variant) {
       return (0, _jsxRuntime.jsxs)(_.Form.Fieldset, {
         children: [(0, _jsxRuntime.jsxs)(_.Form.Legend, {
           children: ["Indeterminate state ", variant]

package/build/system/Form/Checkbox/styles.js

@@ -7,6 +7,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 // The output willl be 16px because of the 1px border.
 var CHECKBOX_SIZE = 14;
 var checkboxStyle = exports.checkboxStyle = function checkboxStyle(variant) {
+  var variantColor = variant === 'disabled' ? 'input.background.disabled' : variant;
   return _extends({
     all: 'unset',
     position: 'relative',
@@ -14,7 +15,7 @@ var checkboxStyle = exports.checkboxStyle = function checkboxStyle(variant) {
   }, _Input.baseControlBorderStyle, _Input.baseControlFocusStyle, {
     width: CHECKBOX_SIZE,
     height: CHECKBOX_SIZE,
-    borderRadius: 1,
+    borderRadius: 0,
     display: 'flex',
     justifyContent: 'center',
     '&[aria-disabled="true"]': {
@@ -22,10 +23,10 @@ var checkboxStyle = exports.checkboxStyle = function checkboxStyle(variant) {
       cursor: 'not-allowed',
       pointerEvents: 'none'
     },
-    '&[data-state=checked]': {
-      backgroundColor: variant,
-      color: variant,
-      borderColor: variant
+    '&[data-state=checked], &[data-state=indeterminate]': {
+      backgroundColor: variantColor,
+      color: variantColor,
+      borderColor: variantColor
     },
     '& ~ label': {
       fontWeight: 'regular',
@@ -35,23 +36,27 @@ var checkboxStyle = exports.checkboxStyle = function checkboxStyle(variant) {
     },
     svg: {
       position: 'absolute',
+      fill: 'currentColor',
       top: 0,
       left: 0
     }
   });
 };
 var checkboxIndicatorStyle = exports.checkboxIndicatorStyle = function checkboxIndicatorStyle(variant) {
+  var backgroundColor = variant === 'disabled' ? 'icon.inverse-disabled' : 'icon.inverse';
   return {
     width: 14,
     height: 14,
-    backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='1 1 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.9259 4.9995L6.15142 12.4008L2.92603 9.33023L4.2591 7.92994L6.15142 9.73143L12.5928 3.59921L13.9259 4.9995Z' fill='white'/%3E%3C/svg%3E\")",
+    backgroundColor: backgroundColor,
+    maskImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='1 1 14 14' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.9259 4.9995L6.15142 12.4008L2.92603 9.33023L4.2591 7.92994L6.15142 9.73143L12.5928 3.59921L13.9259 4.9995Z' fill='currentcolor'/%3E%3C/svg%3E\")",
     '&[data-state=indeterminate]': {
-      marginTop: '6px',
-      backgroundImage: 'none',
-      backgroundColor: variant,
+      maskImage: 'none',
+      backgroundColor: backgroundColor,
       position: 'absolute',
-      width: 10,
-      height: 2
+      top: '50%',
+      width: 8,
+      height: 2,
+      marginTop: '-1px'
     }
   };
 };

package/build/system/Form/Radio/Radio.stories.js

@@ -32,7 +32,7 @@ var Default = exports.Default = function Default() {
     setChecked(_extends({}, checked, (_extends2 = {}, _extends2[radioName] = value, _extends2)));
   };
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [['primary', 'success', 'brand'].map(function (variant) {
+    children: [['primary', 'brand'].map(function (variant) {
       return (0, _jsxRuntime.jsxs)(_2.Box, {
         children: [(0, _jsxRuntime.jsx)(_2.Heading, {
           as: "h2",

package/build/system/Form/Toggle.d.ts

@@ -1,2 +1,14 @@
-export const Toggle: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+/** @jsxImportSource theme-ui */
+/// <reference types="react" />
+import * as Switch from '@radix-ui/react-switch';
+import { Argument } from 'classnames';
+export type ToggleProps = Switch.SwitchProps & {
+    name?: string;
+    className?: Argument;
+    onChange?: () => void;
+    variant?: string;
+};
+export declare const Toggle: {
+    ({ name, onChange, className, variant, ...rest }: ToggleProps): import("react").JSX.Element;
+    displayName: string;
+};

package/build/system/Form/Toggle.js

@@ -1,74 +1,73 @@
+"use strict";
+
+exports.__esModule = true;
+exports.Toggle = void 0;
+var Switch = _interopRequireWildcard(require("@radix-ui/react-switch"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _jsxRuntime = require("theme-ui/jsx-runtime");
+var _excluded = ["name", "onChange", "className", "variant"];
 /* eslint-disable max-len */
 /** @jsxImportSource theme-ui */
-
-/**
- * External dependencies
- */
-import * as Switch from '@radix-ui/react-switch';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
 // Documentation for Radix Switch component
 // https://www.radix-ui.com/docs/primitives/components/switch
-
-export const Toggle = React.forwardRef(
-	( { name = 'toggle', onChange, className = null, variant = 'primary', ...rest }, forwardRef ) => (
-		<Switch.Root
-			className={ classNames( 'vip-toggle-component', className ) }
-			sx={ {
-				all: 'unset',
-				cursor: 'pointer',
-				position: 'relative',
-				width: 40,
-				height: 20,
-				borderRadius: 5,
-				backgroundColor: 'muted',
-				backgroundRepeat: 'no-repeat',
-				backgroundPosition: 'right 2px top 2px',
-				backgroundImage: `url(
-				'data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.53846 3L3 4.53846L6.46156 8.00001L3.00003 11.4615L4.53848 13L8.00001 9.53847L11.4615 13L13 11.4615L9.53847 8.00001L13 4.53849L11.4615 3.00003L8.00001 6.46156L4.53846 3Z" fill="white"/></svg>')`,
-				WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-
-				'&:focus-visible': theme => theme.outline,
-				'&[disabled]': {
-					opacity: 0.7,
-				},
-				'&[data-state="checked"]': {
-					backgroundColor: variant,
-					backgroundPosition: 'left 2px top 2px',
-					backgroundImage: `url(
-					'data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.4999 4.9995L5.7254 12.4008L2.5 9.33023L3.83307 7.92994L5.7254 9.73144L12.1668 3.59921L13.4999 4.9995Z" fill="white"/></svg>')`,
-				},
-			} }
-			name={ name }
-			onCheckedChange={ onChange || undefined }
-			ref={ forwardRef }
-			{ ...rest }
-		>
-			<Switch.Thumb
-				sx={ {
-					display: 'block',
-					width: 16,
-					height: 16,
-					backgroundColor: 'white',
-					borderRadius: '100%',
-					boxShadow: 'rgb(0 0 0 / 5%) 0px 1px 5px, rgb(0 0 0 / 15%) 0px 1px 1px',
-					transition: 'transform 100ms',
-					transform: 'translateX(2px)',
-					willChange: 'transform',
-					'&[data-state="checked"]': { transform: 'translateX(22px)' },
-				} }
-			/>
-		</Switch.Root>
-	)
-);
-
-Toggle.displayName = 'Toggle';
-
-Toggle.propTypes = {
-	name: PropTypes.string,
-	className: PropTypes.any,
-	onChange: PropTypes.func,
-	variant: PropTypes.string,
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var Toggle = exports.Toggle = function Toggle(_ref) {
+  var _ref$name = _ref.name,
+    name = _ref$name === void 0 ? 'toggle' : _ref$name,
+    onChange = _ref.onChange,
+    className = _ref.className,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return (0, _jsxRuntime.jsx)(Switch.Root, _extends({
+    className: (0, _classnames["default"])('vip-toggle-component', className),
+    sx: {
+      all: 'unset',
+      cursor: 'pointer',
+      position: 'relative',
+      width: 40,
+      height: 20,
+      borderRadius: 5,
+      backgroundColor: 'muted',
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'right 2px top 2px',
+      backgroundImage: "url(\n            'data:image/svg+xml;utf8,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M4.53846 3L3 4.53846L6.46156 8.00001L3.00003 11.4615L4.53848 13L8.00001 9.53847L11.4615 13L13 11.4615L9.53847 8.00001L13 4.53849L11.4615 3.00003L8.00001 6.46156L4.53846 3Z\" fill=\"white\"/></svg>')",
+      WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+      '&:focus-visible': function focusVisible(theme) {
+        return theme.outline;
+      },
+      '&[disabled]': {
+        opacity: 0.7
+      },
+      '&[data-state="checked"]': {
+        backgroundColor: variant,
+        backgroundPosition: 'left 2px top 2px',
+        backgroundImage: "url(\n                'data:image/svg+xml;utf8,<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.4999 4.9995L5.7254 12.4008L2.5 9.33023L3.83307 7.92994L5.7254 9.73144L12.1668 3.59921L13.4999 4.9995Z\" fill=\"white\"/></svg>')"
+      }
+    },
+    name: name,
+    onCheckedChange: onChange
+  }, rest, {
+    children: (0, _jsxRuntime.jsx)(Switch.Thumb, {
+      sx: {
+        display: 'block',
+        width: 16,
+        height: 16,
+        backgroundColor: 'white',
+        borderRadius: '100%',
+        boxShadow: 'rgb(0 0 0 / 5%) 0px 1px 5px, rgb(0 0 0 / 15%) 0px 1px 1px',
+        transition: 'transform 100ms',
+        transform: 'translateX(2px)',
+        willChange: 'transform',
+        '&[data-state="checked"]': {
+          transform: 'translateX(22px)'
+        }
+      }
+    })
+  }));
 };
+Toggle.displayName = 'Toggle';