@nulogy/components 9.0.0 → 9.0.1

package/dist/main.js

@@ -51868,16 +51868,15 @@
           onClick = _ref.onClick;
       return /*#__PURE__*/React__default["default"].createElement(AnimatedBox, {
         position: "relative",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: toggled ? "flex-end" : "flex-start",
         height: "24px",
         width: "48px",
         bg: disabled ? "grey" : getSwitchBackground(toggled),
         borderRadius: "20px",
         padding: "2px",
         boxShadow: "small",
-        whileHover: "hover",
+        animate: toggled ? "toggled" : "initial",
+        whileHover: "active",
+        whileFocus: "active",
         onClick: onClick
       }, children);
     };
@@ -51887,18 +51886,20 @@
           children = _ref2.children;
       return /*#__PURE__*/React__default["default"].createElement(motion.div, {
         className: "slider",
-        layout: true,
+        initial: false,
         variants: {
-          hover: {
+          active: {
             boxShadow: disabled ? undefined : Theme.shadows.focus,
             scale: disabled ? undefined : animationConfig.scale
+          },
+          toggled: {
+            marginLeft: Theme.space.x3
+          },
+          initial: {
+            marginLeft: Theme.space.none
           }
         },
         transition: animationConfig.transition,
-        whileFocus: {
-          boxShadow: disabled ? undefined : Theme.shadows.focus,
-          scale: disabled ? undefined : animationConfig.scale
-        },
         style: {
           height: "20px",
           width: "20px",

package/dist/main.module.js

@@ -51851,16 +51851,15 @@ var Switch = function Switch(_ref) {
       onClick = _ref.onClick;
   return /*#__PURE__*/React__default.createElement(AnimatedBox, {
     position: "relative",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: toggled ? "flex-end" : "flex-start",
     height: "24px",
     width: "48px",
     bg: disabled ? "grey" : getSwitchBackground(toggled),
     borderRadius: "20px",
     padding: "2px",
     boxShadow: "small",
-    whileHover: "hover",
+    animate: toggled ? "toggled" : "initial",
+    whileHover: "active",
+    whileFocus: "active",
     onClick: onClick
   }, children);
 };
@@ -51870,18 +51869,20 @@ var Slider = function Slider(_ref2) {
       children = _ref2.children;
   return /*#__PURE__*/React__default.createElement(motion.div, {
     className: "slider",
-    layout: true,
+    initial: false,
     variants: {
-      hover: {
+      active: {
         boxShadow: disabled ? undefined : Theme.shadows.focus,
         scale: disabled ? undefined : animationConfig.scale
+      },
+      toggled: {
+        marginLeft: Theme.space.x3
+      },
+      initial: {
+        marginLeft: Theme.space.none
       }
     },
     transition: animationConfig.transition,
-    whileFocus: {
-      boxShadow: disabled ? undefined : Theme.shadows.focus,
-      scale: disabled ? undefined : animationConfig.scale
-    },
     style: {
       height: "20px",
       width: "20px",

package/dist/src/Toggle/Toggle.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
-import { DefaultNDSThemeType } from "../theme.type";
 import { ComponentSize } from "../NDSProvider/ComponentSizeContext";
+import { DefaultNDSThemeType } from "../theme.type";
 declare const ToggleComponent: React.ForwardRefExoticComponent<SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & {
     onChange?: (...args: any[]) => any;
     size?: ComponentSize;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nulogy/components",
-  "version": "9.0.0",
+  "version": "9.0.1",
   "description": "Component library for the Nulogy Design System - http://nulogy.design",
   "private": false,
   "publishConfig": {