@northlight/ui 2.43.0 → 2.43.1

package/dist/sandbox/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var react$3 = require('@testing-library/react');
-var userEvent = require('@testing-library/user-event');
+var userEventImport = require('@testing-library/user-event');
 var react = require('react');
 var react$2 = require('@chakra-ui/react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -1235,58 +1235,99 @@ const Tabs = {
 
 const Textarea$1 = {
   baseStyle: ({ theme: {
-    space: spacing,
-    colors: color,
-    borders: borderWidth,
-    radii: borderRadius
+    colors: color
   } }) => ({
-    paddingInlineStart: spacing["padding-inline"].textarea.default,
-    paddingInlineEnd: spacing["padding-inline"].textarea.default,
-    borderRadius: borderRadius.textarea.default,
-    borderWidth: borderWidth.textarea.default,
-    borderColor: color.border.textarea.default,
     color: color.text.default,
-    bgColor: color.background.textarea.default,
-    _hover: {
-      borderColor: color.border.textarea["default-hover"],
-      bgColor: color.background.textarea.hover
-    },
-    _focusVisible: {
-      borderColor: color.border.textarea.focus,
-      boxShadow: `0 0 0 1px ${color.border.textarea.focus}`,
-      bgColor: color.background.textarea.active
-    },
-    _invalid: {
-      boxShadow: "none",
-      borderColor: color.border.textarea.error,
-      bgColor: color.background.textarea.error
-    },
-    _readOnly: {
-      _focusVisible: {
-        borderColor: color.border.textarea.readonly,
-        bgColor: color.background.textarea.default
-      },
-      _hover: {
-        borderColor: color.border.textarea.readonly
-      }
-    },
-    _disabled: {
-      bgColor: color.background.textarea.disabled,
-      _hover: {
-        borderColor: color.border.textarea.default
-      }
-    },
     _placeholder: {
       color: color.text.textarea.placeholder
     }
   }),
   variants: {
-    outline: {},
-    ai: ({ theme: { colors: color } }) => ({
+    outline: ({ theme: {
+      space: spacing,
+      colors: color,
+      borders: borderWidth,
+      radii: borderRadius
+    } }) => ({
+      paddingInlineStart: spacing["padding-inline"].textarea.default,
+      paddingInlineEnd: spacing["padding-inline"].textarea.default,
+      borderRadius: borderRadius.textarea.default,
+      borderWidth: borderWidth.textarea.default,
+      borderColor: color.border.textarea.default,
+      bgColor: color.background.textarea.default,
+      _hover: {
+        borderColor: color.border.textarea["default-hover"],
+        bgColor: color.background.textarea.hover
+      },
+      _focusVisible: {
+        borderColor: color.border.textarea.focus,
+        boxShadow: `0 0 0 1px ${color.border.textarea.focus}`,
+        bgColor: color.background.textarea.active
+      },
+      _invalid: {
+        boxShadow: "none",
+        borderColor: color.border.textarea.error,
+        bgColor: color.background.textarea.error
+      },
+      _readOnly: {
+        _focusVisible: {
+          borderColor: color.border.textarea.readonly,
+          bgColor: color.background.textarea.default
+        },
+        _hover: {
+          borderColor: color.border.textarea.readonly
+        }
+      },
+      _disabled: {
+        bgColor: color.background.textarea.disabled,
+        _hover: {
+          borderColor: color.border.textarea.default
+        }
+      }
+    }),
+    ai: ({ theme: {
+      space: spacing,
+      colors: color,
+      borders: borderWidth,
+      radii: borderRadius
+    } }) => ({
+      paddingInlineStart: spacing["padding-inline"].textarea.default,
+      paddingInlineEnd: spacing["padding-inline"].textarea.default,
+      borderRadius: borderRadius.textarea.default,
+      borderWidth: borderWidth.textarea.default,
+      borderColor: color.border.textarea.default,
+      bgColor: color.background.textarea.default,
+      _hover: {
+        borderColor: color.border.textarea["default-hover"],
+        bgColor: color.background.textarea.hover
+      },
       _focusVisible: {
+        bgColor: color.background.textarea.active,
+        boxShadow: `inset 0 0 0 1px ${color.border.ai}`,
+        borderColor: color.border.ai,
+        _invalid: {
+          boxShadow: `inset 0 0 0 1px ${color.border.textarea.error}`,
+          bgColor: color.background.textarea.error,
+          borderColor: color.border.textarea.error
+        }
+      },
+      _invalid: {
+        bgColor: color.background.textarea.error,
+        borderColor: color.border.textarea.error
+      },
+      _readOnly: {
+        _focusVisible: {
+          borderColor: color.border.textarea.readonly,
+          bgColor: color.background.textarea.default
+        },
+        _hover: {
+          borderColor: color.border.textarea.readonly
+        }
+      },
+      _disabled: {
+        bgColor: color.background.textarea.disabled,
         _hover: {
-          boxShadow: `0 0 0 1px ${color.border.ai}`,
-          borderColor: color.border.ai
+          borderColor: color.border.textarea.default
         }
       }
     })
@@ -9851,6 +9892,8 @@ react$2.forwardRef((props, ref) => {
   );
 });
 
+var _a;
+const userEvent = (_a = userEventImport.default) != null ? _a : userEventImport;
 if (typeof window !== "undefined" && !window.matchMedia) {
   window.matchMedia = (query) => ({
     matches: false,
@@ -10561,7 +10604,7 @@ function SandboxViewerContent({
     const container = getContainer();
     if (!container)
       return;
-    const user = userEvent.setup();
+    const user = userEventImport.setup();
     const context = {
       screen: react$3.within(container),
       documentScreen: react$3.screen,