@northlight/ui 2.42.4 → 2.43.1

package/dist/sandbox/index.js

@@ -1,5 +1,5 @@
 import { render, within, screen, cleanup } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import userEventImport from '@testing-library/user-event';
 import { useRef, createContext, useContext, forwardRef as forwardRef$1, useImperativeHandle, useEffect, cloneElement, Children, isValidElement, memo, useMemo, useState, createElement, Component } from 'react';
 import { useToken as useToken$1, extendTheme, forwardRef, useStyleConfig, Icon as Icon$2, Heading, Text, FormLabel as FormLabel$1, VisuallyHidden, Badge as Badge$1, Flex, Box, Spinner as Spinner$2, Button as Button$2, Checkbox as Checkbox$2, FormControl, Stack, FormErrorMessage, CheckboxGroup, IconButton as IconButton$1, useMultiStyleConfig, Popover as Popover$2, HStack, SlideFade, Table as Table$2, chakra, Thead, Tr, Tbody, Select as Select$2, PopoverAnchor, InputGroup, InputRightElement, PopoverContent, Link as Link$1, Spacer, Tooltip as Tooltip$2, VStack, Portal, RadioGroup as RadioGroup$1, Tag as Tag$2, TagLabel, TagRightIcon, useEditableControls, useEditableState, Editable, InputLeftElement, Input as Input$1, EditablePreview, EditableInput, Modal as Modal$2, ModalOverlay, ModalContent, ModalCloseButton, ModalBody as ModalBody$1, ModalHeader, Slider, SliderTrack, SliderFilledTrack, SliderThumb, ModalFooter, Progress as Progress$1, ChakraProvider, NumberInputStepper as NumberInputStepper$1, Center, Divider, NumberIncrementStepper, NumberDecrementStepper, NumberInput as NumberInput$2, NumberInputField, Switch as Switch$2, Textarea as Textarea$2, useClipboard } from '@chakra-ui/react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -1215,58 +1215,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
         }
       }
     })
@@ -9831,6 +9872,8 @@ forwardRef((props, ref) => {
   );
 });
 
+var _a;
+const userEvent = (_a = userEventImport.default) != null ? _a : userEventImport;
 if (typeof window !== "undefined" && !window.matchMedia) {
   window.matchMedia = (query) => ({
     matches: false,
@@ -10541,7 +10584,7 @@ function SandboxViewerContent({
     const container = getContainer();
     if (!container)
       return;
-    const user = userEvent.setup();
+    const user = userEventImport.setup();
     const context = {
       screen: within(container),
       documentScreen: screen,