@m4l/components 9.3.2-B04082025-beta.3 → 9.3.2-B11082025-beta.1

package/components/ToastContainer/constants.js

@@ -1,8 +1,679 @@
 const TOAST_KEY_COMPONENT = "M4LToastContainer";
 const DEFAULT_CLOSE_TIME = 3e4;
 const ICONS_PATH = "frontend/components/toast/assets/icons";
+const TOAST_NATIVE_STYLES = {
+  "&": {
+    "--toastify-color-light": "#fff",
+    "--toastify-color-dark": "#121212",
+    "--toastify-color-info": "#3498db",
+    "--toastify-color-success": "#07bc0c",
+    "--toastify-color-warning": "#f1c40f",
+    "--toastify-color-error": "#e74c3c",
+    "--toastify-color-transparent": "hsla(0, 0%, 100%, 0.7)",
+    "--toastify-icon-color-info": "var(--toastify-color-info)",
+    "--toastify-icon-color-success": "var(--toastify-color-success)",
+    "--toastify-icon-color-warning": "var(--toastify-color-warning)",
+    "--toastify-icon-color-error": "var(--toastify-color-error)",
+    "--toastify-toast-width": "320px",
+    "--toastify-toast-offset": "16px",
+    "--toastify-toast-top": "max(var(--toastify-toast-offset), env(safe-area-inset-top))",
+    "--toastify-toast-right": "max(var(--toastify-toast-offset), env(safe-area-inset-right))",
+    "--toastify-toast-left": "max(var(--toastify-toast-offset), env(safe-area-inset-left))",
+    "--toastify-toast-bottom": "max(var(--toastify-toast-offset), env(safe-area-inset-bottom))",
+    "--toastify-toast-background": "#fff",
+    "--toastify-toast-min-height": "64px",
+    "--toastify-toast-max-height": "800px",
+    "--toastify-toast-bd-radius": "6px",
+    "--toastify-font-family": "sans-serif",
+    "--toastify-z-index": "9999",
+    "--toastify-text-color-light": "#757575",
+    "--toastify-text-color-dark": "#fff",
+    "--toastify-text-color-info": "#fff",
+    "--toastify-text-color-success": "#fff",
+    "--toastify-text-color-warning": "#fff",
+    "--toastify-text-color-error": "#fff",
+    "--toastify-spinner-color": "#616161",
+    "--toastify-spinner-color-empty-area": "#e0e0e0",
+    "--toastify-color-progress-light": "linear-gradient(90deg, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55)",
+    "--toastify-color-progress-dark": "#bb86fc",
+    "--toastify-color-progress-info": "var(--toastify-color-info)",
+    "--toastify-color-progress-success": "var(--toastify-color-success)",
+    "--toastify-color-progress-warning": "var(--toastify-color-warning)",
+    "--toastify-color-progress-error": "var(--toastify-color-error)",
+    "--toastify-color-progress-bgo": "0.2"
+  },
+  ".Toastify__toast-container": {
+    zIndex: "var(--toastify-z-index)",
+    position: "fixed",
+    padding: "4px",
+    width: "var(--toastify-toast-width)",
+    boxSizing: "border-box",
+    color: "#fff"
+  },
+  ".Toastify__toast-container--top-left": {
+    top: "var(--toastify-toast-top)",
+    left: "var(--toastify-toast-left)"
+  },
+  ".Toastify__toast-container--top-center": {
+    top: "var(--toastify-toast-top)",
+    left: "50%",
+    transform: "translateX(-50%)"
+  },
+  ".Toastify__toast-container--top-right": {
+    top: "var(--toastify-toast-top)",
+    right: "var(--toastify-toast-right)"
+  },
+  ".Toastify__toast-container--bottom-left": {
+    bottom: "var(--toastify-toast-bottom)",
+    left: "var(--toastify-toast-left)"
+  },
+  ".Toastify__toast-container--bottom-center": {
+    bottom: "var(--toastify-toast-bottom)",
+    left: "50%",
+    transform: "translateX(-50%)"
+  },
+  ".Toastify__toast-container--bottom-right": {
+    bottom: "var(--toastify-toast-bottom)",
+    right: "var(--toastify-toast-right)"
+  },
+  "@media only screen and (max-width: 480px)": {
+    ".Toastify__toast": {
+      marginBottom: 0,
+      borderRadius: 0
+    },
+    ".Toastify__toast-container": {
+      width: "100vw",
+      padding: "0",
+      left: "env(safe-area-inset-left)",
+      margin: "0"
+    },
+    ".Toastify__toast-container--top-center, .Toastify__toast-container--top-left, .Toastify__toast-container--top-right": {
+      top: "env(safe-area-inset-top)",
+      transform: "translateX(0)"
+    },
+    ".Toastify__toast-container--bottom-center, .Toastify__toast-container--bottom-left, .Toastify__toast-container--bottom-right": {
+      bottom: "env(safe-area-inset-bottom)",
+      transform: "translateX(0)"
+    },
+    ".Toastify__toast-container--rtl": {
+      right: "env(safe-area-inset-right)",
+      left: "auto"
+    }
+  },
+  ".Toastify__toast": {
+    "--y": "0",
+    position: "relative",
+    msTouchAction: "none",
+    touchAction: "none",
+    minHeight: "var(--toastify-toast-min-height)",
+    boxSizing: "border-box",
+    marginBottom: "1rem",
+    padding: "8px",
+    borderRadius: "var(--toastify-toast-bd-radius)",
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+    display: "flex",
+    msFlexPack: "justify",
+    justifyContent: "space-between",
+    maxHeight: "var(--toastify-toast-max-height)",
+    fontFamily: "var(--toastify-font-family)",
+    cursor: "default",
+    direction: "ltr",
+    zIndex: 0,
+    overflow: "hidden"
+  },
+  ".Toastify__toast--stacked": {
+    position: "absolute",
+    width: "100%",
+    transform: "translate3d(0, var(--y), 0) scale(var(--s))",
+    transition: "transform 0.3s"
+  },
+  ".Toastify__toast--stacked[data-collapsed] .Toastify__close-button, .Toastify__toast--stacked[data-collapsed] .Toastify__toast-body": {
+    transition: "opacity 0.1s"
+  },
+  '.Toastify__toast--stacked[data-collapsed="false"]': {
+    overflow: "visible"
+  },
+  '.Toastify__toast--stacked[data-collapsed="true"]:not(:last-child) > *': {
+    opacity: 0
+  },
+  ".Toastify__toast--stacked:after": {
+    content: '""',
+    position: "absolute",
+    left: 0,
+    right: 0,
+    height: "calc(var(--g) * 1px)",
+    bottom: "100%",
+    test: "bruce"
+  },
+  '.Toastify__toast--stacked[data-pos="top"]': {
+    top: 0
+  },
+  '.Toastify__toast--stacked[data-pos="bot"]': {
+    bottom: 0
+  },
+  '.Toastify__toast--stacked[data-pos="bot"].Toastify__toast--stacked:before': {
+    transformOrigin: "top"
+  },
+  '.Toastify__toast--stacked[data-pos="top"].Toastify__toast--stacked:before': {
+    transformOrigin: "bottom"
+  },
+  ".Toastify__toast--stacked:before": {
+    content: '""',
+    position: "absolute",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: "100%",
+    transform: "scaleY(3)",
+    zIndex: -1
+  },
+  ".Toastify__toast--rtl": {
+    direction: "rtl"
+  },
+  ".Toastify__toast--close-on-click": {
+    cursor: "pointer"
+  },
+  ".Toastify__toast-body": {
+    margin: "auto 0",
+    msFlex: "1 1 auto",
+    flex: "1 1 auto",
+    padding: "6px",
+    display: "flex",
+    msFlexAlign: "center",
+    alignItems: "center"
+  },
+  ".Toastify__toast-body > div:last-child": {
+    wordBreak: "break-word",
+    msFlex: "1",
+    flex: "1"
+  },
+  ".Toastify__toast-icon": {
+    marginInlineEnd: "10px",
+    width: "20px",
+    msFlexNegative: 0,
+    flexShrink: 0,
+    display: "flex"
+  },
+  ".Toastify--animate": {
+    animationFillMode: "both",
+    animationDuration: "0.5s"
+  },
+  ".Toastify--animate-icon": {
+    animationFillMode: "both",
+    animationDuration: "0.3s"
+  },
+  ".Toastify__toast-theme--dark": {
+    background: "var(--toastify-color-dark)",
+    color: "var(--toastify-text-color-dark)"
+  },
+  ".Toastify__toast-theme--colored.Toastify__toast--default, .Toastify__toast-theme--light": {
+    background: "var(--toastify-color-light)",
+    color: "var(--toastify-text-color-light)"
+  },
+  ".Toastify__toast-theme--colored.Toastify__toast--info": {
+    color: "var(--toastify-text-color-info)",
+    background: "var(--toastify-color-info)"
+  },
+  ".Toastify__toast-theme--colored.Toastify__toast--success": {
+    color: "var(--toastify-text-color-success)",
+    background: "var(--toastify-color-success)"
+  },
+  ".Toastify__toast-theme--colored.Toastify__toast--warning": {
+    color: "var(--toastify-text-color-warning)",
+    background: "var(--toastify-color-warning)"
+  },
+  ".Toastify__toast-theme--colored.Toastify__toast--error": {
+    color: "var(--toastify-text-color-error)",
+    background: "var(--toastify-color-error)"
+  },
+  ".Toastify__progress-bar-theme--light": {
+    background: "var(--toastify-color-progress-light)"
+  },
+  ".Toastify__progress-bar-theme--dark": {
+    background: "var(--toastify-color-progress-dark)"
+  },
+  ".Toastify__progress-bar--info": {
+    background: "var(--toastify-color-progress-info)"
+  },
+  ".Toastify__progress-bar--success": {
+    background: "var(--toastify-color-progress-success)"
+  },
+  ".Toastify__progress-bar--warning": {
+    background: "var(--toastify-color-progress-warning)"
+  },
+  ".Toastify__progress-bar--error": {
+    background: "var(--toastify-color-progress-error)"
+  },
+  ".Toastify__progress-bar-theme--colored.Toastify__progress-bar--error, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--info, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning": {
+    background: "var(--toastify-color-transparent)"
+  },
+  ".Toastify__progress-bar-theme--colored.Toastify__progress-bar--success, .Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning": {
+    background: "var(--toastify-color-transparent)"
+  },
+  ".Toastify__close-button": {
+    color: "#fff",
+    background: "transparent",
+    outline: "none",
+    border: "none",
+    padding: "0",
+    cursor: "pointer",
+    opacity: 0.7,
+    transition: "0.3s ease",
+    msFlexItemAlign: "start",
+    alignSelf: "flex-start",
+    zIndex: 1
+  },
+  ".Toastify__close-button--light": {
+    color: "#000",
+    opacity: 0.3
+  },
+  ".Toastify__close-button > svg": {
+    fill: "currentColor",
+    height: "16px",
+    width: "14px"
+  },
+  ".Toastify__close-button:focus, .Toastify__close-button:hover": {
+    opacity: 1
+  },
+  "@keyframes Toastify__trackProgress": {
+    "0%": {
+      transform: "scaleX(1)"
+    },
+    "to": {
+      transform: "scaleX(0)"
+    }
+  },
+  ".Toastify__progress-bar": {
+    position: "absolute",
+    bottom: "0",
+    left: "0",
+    width: "100%",
+    height: "100%",
+    zIndex: "var(--toastify-z-index)",
+    opacity: 0.7,
+    transformOrigin: "left",
+    borderBottomLeftRadius: "var(--toastify-toast-bd-radius)"
+  },
+  ".Toastify__progress-bar--animated": {
+    animation: "Toastify__trackProgress linear 1 forwards"
+  },
+  ".Toastify__progress-bar--controlled": {
+    transition: "transform 0.2s"
+  },
+  ".Toastify__progress-bar--rtl": {
+    right: 0,
+    left: "auto",
+    transformOrigin: "right",
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: "var(--toastify-toast-bd-radius)"
+  },
+  ".Toastify__progress-bar--wrp": {
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    width: "100%",
+    height: "5px",
+    borderBottomLeftRadius: "var(--toastify-toast-bd-radius)"
+  },
+  '.Toastify__progress-bar--wrp[data-hidden="true"]': {
+    opacity: 0
+  },
+  ".Toastify__progress-bar--bg": {
+    opacity: "var(--toastify-color-progress-bgo)",
+    width: "100%",
+    height: "100%"
+  },
+  ".Toastify__spinner": {
+    width: "20px",
+    height: "20px",
+    boxSizing: "border-box",
+    border: "2px solid",
+    borderRadius: "100%",
+    borderColor: "var(--toastify-spinner-color-empty-area)",
+    borderRightColor: "var(--toastify-spinner-color)",
+    animation: "Toastify__spin 0.65s linear infinite"
+  },
+  "@keyframes Toastify__bounceInRight": {
+    "0%, 60%, 75%, 90%, to": {
+      animationTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)"
+    },
+    "0%": {
+      opacity: 0,
+      transform: "translate3d(3000px, 0, 0)"
+    },
+    "60%": {
+      opacity: 1,
+      transform: "translate3d(-25px, 0, 0)"
+    },
+    "75%": {
+      transform: "translate3d(10px, 0, 0)"
+    },
+    "90%": {
+      transform: "translate3d(-5px, 0, 0)"
+    },
+    "to": {
+      transform: "none"
+    }
+  },
+  "@keyframes Toastify__bounceOutRight": {
+    "20%": {
+      opacity: 1,
+      transform: "translate3d(-20px, var(--y), 0)"
+    },
+    "to": {
+      opacity: 0,
+      transform: "translate3d(2000px, var(--y), 0)"
+    }
+  },
+  "@keyframes Toastify__bounceInLeft": {
+    "0%, 60%, 75%, 90%, to": {
+      animationTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)"
+    },
+    "0%": {
+      opacity: 0,
+      transform: "translate3d(-3000px, 0, 0)"
+    },
+    "60%": {
+      opacity: 1,
+      transform: "translate3d(25px, 0, 0)"
+    },
+    "75%": {
+      transform: "translate3d(-10px, 0, 0)"
+    },
+    "90%": {
+      transform: "translate3d(5px, 0, 0)"
+    },
+    "to": {
+      transform: "none"
+    }
+  },
+  "@keyframes Toastify__bounceOutLeft": {
+    "20%": {
+      opacity: 1,
+      transform: "translate3d(20px, var(--y), 0)"
+    },
+    "to": {
+      opacity: 0,
+      transform: "translate3d(-2000px, var(--y), 0)"
+    }
+  },
+  "@keyframes Toastify__bounceInUp": {
+    "0%, 60%, 75%, 90%, to": {
+      animationTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)"
+    },
+    "0%": {
+      opacity: 0,
+      transform: "translate3d(0, 3000px, 0)"
+    },
+    "60%": {
+      opacity: 1,
+      transform: "translate3d(0, -20px, 0)"
+    },
+    "75%": {
+      transform: "translate3d(0, 10px, 0)"
+    },
+    "90%": {
+      transform: "translate3d(0, -5px, 0)"
+    },
+    "to": {
+      transform: "translateZ(0)"
+    }
+  },
+  "@keyframes Toastify__bounceOutUp": {
+    "20%": {
+      transform: "translate3d(0, calc(var(--y) - 10px), 0)"
+    },
+    "40%, 45%": {
+      opacity: 1,
+      transform: "translate3d(0, calc(var(--y) + 20px), 0)"
+    },
+    "to": {
+      opacity: 0,
+      transform: "translate3d(0, -2000px, 0)"
+    }
+  },
+  "@keyframes Toastify__bounceInDown": {
+    "0%, 60%, 75%, 90%, to": {
+      animationTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)"
+    },
+    "0%": {
+      opacity: 0,
+      transform: "translate3d(0, -3000px, 0)"
+    },
+    "60%": {
+      opacity: 1,
+      transform: "translate3d(0, 25px, 0)"
+    },
+    "75%": {
+      transform: "translate3d(0, -10px, 0)"
+    },
+    "90%": {
+      transform: "translate3d(0, 5px, 0)"
+    },
+    "to": {
+      transform: "none"
+    }
+  },
+  "@keyframes Toastify__bounceOutDown": {
+    "20%": {
+      transform: "translate3d(0, calc(var(--y) - 10px), 0)"
+    },
+    "40%, 45%": {
+      opacity: 1,
+      transform: "translate3d(0, calc(var(--y) + 20px), 0)"
+    },
+    "to": {
+      opacity: 0,
+      transform: "translate3d(0, 2000px, 0)"
+    }
+  },
+  ".Toastify__bounce-enter--bottom-left, .Toastify__bounce-enter--top-left": {
+    animationName: "Toastify__bounceInLeft"
+  },
+  ".Toastify__bounce-enter--bottom-right, .Toastify__bounce-enter--top-right": {
+    animationName: "Toastify__bounceInRight"
+  },
+  ".Toastify__bounce-enter--top-center": {
+    animationName: "Toastify__bounceInDown"
+  },
+  ".Toastify__bounce-enter--bottom-center": {
+    animationName: "Toastify__bounceInUp"
+  },
+  ".Toastify__bounce-exit--bottom-left, .Toastify__bounce-exit--top-left": {
+    animationName: "Toastify__bounceOutLeft"
+  },
+  ".Toastify__bounce-exit--bottom-right, .Toastify__bounce-exit--top-right": {
+    animationName: "Toastify__bounceOutRight"
+  },
+  ".Toastify__bounce-exit--top-center": {
+    animationName: "Toastify__bounceOutUp"
+  },
+  ".Toastify__bounce-exit--bottom-center": {
+    animationName: "Toastify__bounceOutDown"
+  },
+  "@keyframes Toastify__zoomIn": {
+    "0%": {
+      opacity: 0,
+      transform: "scale3d(0.3, 0.3, 0.3)"
+    },
+    "50%": {
+      opacity: 1
+    }
+  },
+  "@keyframes Toastify__zoomOut": {
+    "0%": {
+      opacity: 1
+    },
+    "50%": {
+      opacity: 0,
+      transform: "translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3)"
+    },
+    "to": {
+      opacity: 0
+    }
+  },
+  ".Toastify__zoom-enter": {
+    animationName: "Toastify__zoomIn"
+  },
+  ".Toastify__zoom-exit": {
+    animationName: "Toastify__zoomOut"
+  },
+  "@keyframes Toastify__flipIn": {
+    "0%": {
+      transform: "perspective(400px) rotateX(90deg)",
+      animationTimingFunction: "ease-in",
+      opacity: 0
+    },
+    "40%": {
+      transform: "perspective(400px) rotateX(-20deg)",
+      animationTimingFunction: "ease-in"
+    },
+    "60%": {
+      transform: "perspective(400px) rotateX(10deg)",
+      opacity: 1
+    },
+    "80%": {
+      transform: "perspective(400px) rotateX(-5deg)"
+    },
+    "to": {
+      transform: "perspective(400px)"
+    }
+  },
+  "@keyframes Toastify__flipOut": {
+    "0%": {
+      transform: "translate3d(0, var(--y), 0) perspective(400px)"
+    },
+    "30%": {
+      transform: "translate3d(0, var(--y), 0) perspective(400px) rotateX(-20deg)",
+      opacity: 1
+    },
+    "to": {
+      transform: "translate3d(0, var(--y), 0) perspective(400px) rotateX(90deg)",
+      opacity: 0
+    }
+  },
+  ".Toastify__flip-enter": {
+    animationName: "Toastify__flipIn"
+  },
+  ".Toastify__flip-exit": {
+    animationName: "Toastify__flipOut"
+  },
+  "@keyframes Toastify__slideInRight": {
+    "0%": {
+      transform: "translate3d(110%, 0, 0)",
+      visibility: "visible"
+    },
+    "to": {
+      transform: "translate3d(0, var(--y), 0)"
+    }
+  },
+  "@keyframes Toastify__slideInLeft": {
+    "0%": {
+      transform: "translate3d(-110%, 0, 0)",
+      visibility: "visible"
+    },
+    "to": {
+      transform: "translate3d(0, var(--y), 0)"
+    }
+  },
+  "@keyframes Toastify__slideInUp": {
+    "0%": {
+      transform: "translate3d(0, 110%, 0)",
+      visibility: "visible"
+    },
+    "to": {
+      transform: "translate3d(0, var(--y), 0)"
+    }
+  },
+  "@keyframes Toastify__slideInDown": {
+    "0%": {
+      transform: "translate3d(0, -110%, 0)",
+      visibility: "visible"
+    },
+    "to": {
+      transform: "translate3d(0, var(--y), 0)"
+    }
+  },
+  "@keyframes Toastify__slideOutRight": {
+    "0%": {
+      transform: "translate3d(0, var(--y), 0)"
+    },
+    "to": {
+      visibility: "hidden",
+      transform: "translate3d(110%, var(--y), 0)"
+    }
+  },
+  "@keyframes Toastify__slideOutLeft": {
+    "0%": {
+      transform: "translate3d(0, var(--y), 0)"
+    },
+    "to": {
+      visibility: "hidden",
+      transform: "translate3d(-110%, var(--y), 0)"
+    }
+  },
+  "@keyframes Toastify__slideOutDown": {
+    "0%": {
+      transform: "translate3d(0, var(--y), 0)"
+    },
+    "to": {
+      visibility: "hidden",
+      transform: "translate3d(0, 500px, 0)"
+    }
+  },
+  "@keyframes Toastify__slideOutUp": {
+    "0%": {
+      transform: "translate3d(0, var(--y), 0)"
+    },
+    "to": {
+      visibility: "hidden",
+      transform: "translate3d(0, -500px, 0)"
+    }
+  },
+  ".Toastify__slide-enter--bottom-left, .Toastify__slide-enter--top-left": {
+    animationName: "Toastify__slideInLeft"
+  },
+  ".Toastify__slide-enter--bottom-right, .Toastify__slide-enter--top-right": {
+    animationName: "Toastify__slideInRight"
+  },
+  ".Toastify__slide-enter--top-center": {
+    animationName: "Toastify__slideInDown"
+  },
+  ".Toastify__slide-enter--bottom-center": {
+    animationName: "Toastify__slideInUp"
+  },
+  ".Toastify__slide-exit--bottom-left, .Toastify__slide-exit--top-left": {
+    animationName: "Toastify__slideOutLeft",
+    animationTimingFunction: "ease-in",
+    animationDuration: "0.3s"
+  },
+  ".Toastify__slide-exit--bottom-right, .Toastify__slide-exit--top-right": {
+    animationName: "Toastify__slideOutRight",
+    animationTimingFunction: "ease-in",
+    animationDuration: "0.3s"
+  },
+  ".Toastify__slide-exit--top-center": {
+    animationName: "Toastify__slideOutUp",
+    animationTimingFunction: "ease-in",
+    animationDuration: "0.3s"
+  },
+  ".Toastify__slide-exit--bottom-center": {
+    animationName: "Toastify__slideOutDown",
+    animationTimingFunction: "ease-in",
+    animationDuration: "0.3s"
+  },
+  "@keyframes Toastify__spin": {
+    "0%": {
+      transform: "rotate(0deg)"
+    },
+    "to": {
+      transform: "rotate(1turn)"
+    }
+  }
+};
 export {
   DEFAULT_CLOSE_TIME as D,
   ICONS_PATH as I,
-  TOAST_KEY_COMPONENT as T
+  TOAST_KEY_COMPONENT as T,
+  TOAST_NATIVE_STYLES as a
 };

package/components/hook-form/RHFColorPicker/RHFColorPicker.styles.js

@@ -6,7 +6,8 @@ const rhfcolorPickerStyles = {
   root: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings["sp0-5"]
+    gap: theme.vars.size.baseSpacings["sp0-5"],
+    width: "100%"
   })
 };
 export {

package/components/hook-form/RHFDateTime/RHFDateTime.styles.js

@@ -5,7 +5,8 @@ const rhfDateTimeStyles = {
   root: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings["sp0-5"]
+    gap: theme.vars.size.baseSpacings["sp0-5"],
+    width: "100%"
   })
 };
 export {

package/components/hook-form/RHFNumberInput/RHFNumberInput.styles.js

@@ -8,7 +8,8 @@ const rhfNumberInputStyles = {
   root: ({ theme }) => ({
     display: "flex",
     flexDirection: "column",
-    gap: theme.vars.size.baseSpacings.sp1
+    gap: theme.vars.size.baseSpacings.sp1,
+    width: "100%"
   })
 };
 export {