@vygruppen/spor-react 9.8.3 → 9.9.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@9.8.3 build
+> @vygruppen/spor-react@9.9.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -9,12 +9,12 @@
 CJS Build start
 ESM Build start
 DTS Build start
-CJS dist/index.js 509.04 KB
-CJS ⚡️ Build success in 2230ms
+CJS dist/index.js 511.25 KB
+CJS ⚡️ Build success in 2246ms
 ESM dist/index.mjs                      2.11 KB
-ESM dist/CountryCodeSelect-C2XKHNTP.mjs 1.19 KB
-ESM dist/chunk-ZDOSE4VD.mjs             398.42 KB
-ESM ⚡️ Build success in 2232ms
-DTS ⚡️ Build success in 11754ms
-DTS dist/index.d.ts  337.67 KB
-DTS dist/index.d.mts 337.67 KB
+ESM dist/CountryCodeSelect-U25NF65N.mjs 1.19 KB
+ESM dist/chunk-TEDOVPXZ.mjs             400.45 KB
+ESM ⚡️ Build success in 2246ms
+DTS ⚡️ Build success in 11587ms
+DTS dist/index.d.ts  338.81 KB
+DTS dist/index.d.mts 338.81 KB

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @vygruppen/spor-react
 
+## 9.9.0
+
+### Minor Changes
+
+- 70e5a92: InfoSelect: bugfixes. #1043
+- d4f8abf: Added possibility for title with ClosableAlert and StaticAlert. Some minor bugfixes with colors on darkmode.
+
+### Patch Changes
+
+- 0baf753: PressableCard: Make variant optional. Fix background on darkmode.
+
 ## 9.8.3
 
 ### Patch Changes

package/dist/{CountryCodeSelect-C2XKHNTP.mjs → CountryCodeSelect-U25NF65N.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-ZDOSE4VD.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-TEDOVPXZ.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-ZDOSE4VD.mjs → chunk-TEDOVPXZ.mjs}

@@ -1,7 +1,7 @@
 import tokens11__default from '@vygruppen/spor-design-tokens';
 import * as tokens11 from '@vygruppen/spor-design-tokens';
 export { tokens11 as tokens };
-import { forwardRef, Divider as Divider$1, Stack as Stack$1, useRadio, useStyleConfig, chakra, Box, Card, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button as Button$1, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, useRadioGroup, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+import { forwardRef, Divider as Divider$1, Stack as Stack$1, useRadio, useStyleConfig, chakra, Box, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Center, Flex, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useMultiStyleConfig, Badge as Badge$1, Code as Code$1, Text, PopoverAnchor, FormLabel, useFormControlContext, PopoverContent, PopoverArrow, PopoverBody, FocusLock, Popover, InputGroup, PopoverTrigger, Portal, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, Button as Button$1, useControllableState, Radio as Radio$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Textarea as Textarea$1, Link, ModalHeader as ModalHeader$1, useModalContext, DrawerContent as DrawerContent$1, Tabs as Tabs$1, Table as Table$1, defineStyleConfig as defineStyleConfig$1, createMultiStyleConfigHelpers as createMultiStyleConfigHelpers$1, useRadioGroup, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, useColorMode, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, useColorModeValue, Breadcrumb as Breadcrumb$1, BreadcrumbItem as BreadcrumbItem$1, BreadcrumbLink as BreadcrumbLink$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerBody, DrawerHeader, useMediaQuery, DrawerCloseButton, DarkMode, PopoverCloseButton, usePopoverContext, UnorderedList, ChakraProvider, useToast as useToast$1, useInterval } from '@chakra-ui/react';
 export { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Center, Collapse, Container, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, Fade, Flex, FormHelperText, Grid, GridItem, HStack, Image, Img, InputGroup, LightMode, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, OrderedList, Portal, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, UnorderedList, VStack, Wrap, WrapItem, defineStyleConfig, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import * as React73 from 'react';
 import React73__default, { useId, createContext, useEffect, forwardRef as forwardRef$1, useRef, useState, Suspense, useContext, useCallback, useMemo, useLayoutEffect } from 'react';
@@ -859,11 +859,11 @@ var StaticCard = forwardRef(
     const styles3 = useStyleConfig("StaticCard", {
       colorScheme
     });
-    return /* @__PURE__ */ React73__default.createElement(Box, { __css: styles3, ...props, ref }, children, /* @__PURE__ */ React73__default.createElement(Card, null));
+    return /* @__PURE__ */ React73__default.createElement(Box, { __css: styles3, ...props, ref }, children);
   }
 );
 var PressableCard = forwardRef(
-  ({ children, variant = "base", ...props }, ref) => {
+  ({ children, variant = "floating", ...props }, ref) => {
     const styles3 = useStyleConfig("PressableCard", {
       variant
     });
@@ -1546,6 +1546,7 @@ var BaseAlert = ({
 // src/alert/ClosableAlert.tsx
 var ClosableAlert = ({
   variant,
+  title,
   children,
   onClose: externalOnClose = () => {
   }
@@ -1570,7 +1571,7 @@ var ClosableAlert = ({
       "aria-label": t2(texts6.close),
       sx: styles3.closeButton
     }
-  ), /* @__PURE__ */ React73__default.createElement(AlertIcon, { variant }), children);
+  ), /* @__PURE__ */ React73__default.createElement(AlertIcon, { variant }), /* @__PURE__ */ React73__default.createElement(Flex, { direction: "column", gap: title ? 2 : void 0, textAlign: "left" }, title && /* @__PURE__ */ React73__default.createElement(Box, { fontWeight: "bold" }, title), /* @__PURE__ */ React73__default.createElement(Box, { marginRight: 1 }, children)));
 };
 var texts6 = createTexts({
   close: {
@@ -1616,16 +1617,21 @@ var ExpandableAlert = ({
             overflow: "hidden",
             "-webkit-line-clamp": "1",
             "-webkit-box-orient": "vertical"
-          }
+          },
+          color: "darkGrey"
         },
         title
       )),
-      /* @__PURE__ */ React73__default.createElement(AccordionIcon, null)
+      /* @__PURE__ */ React73__default.createElement(AccordionIcon, { color: "darkGrey" })
     )), /* @__PURE__ */ React73__default.createElement(AccordionPanel, null, children))
   ));
 };
-var StaticAlert = ({ children, ...props }) => {
-  return /* @__PURE__ */ React73__default.createElement(BaseAlert, { ...props }, /* @__PURE__ */ React73__default.createElement(AlertIcon, { variant: props.variant }), children);
+var StaticAlert = ({
+  children,
+  title,
+  ...props
+}) => {
+  return /* @__PURE__ */ React73__default.createElement(BaseAlert, { ...props }, /* @__PURE__ */ React73__default.createElement(AlertIcon, { variant: props.variant }), /* @__PURE__ */ React73__default.createElement(Flex, { direction: "column", gap: title ? 2 : void 0, textAlign: "left" }, title && /* @__PURE__ */ React73__default.createElement(Box, { fontWeight: "bold" }, title), /* @__PURE__ */ React73__default.createElement(Box, null, children)));
 };
 var Breadcrumb = (props) => {
   const iconColor = useColorModeValue("blackAlpha.400", "whiteAlpha.400");
@@ -3046,13 +3052,11 @@ function ListBoxSection({ section, state: state2 }) {
 // src/input/InfoSelect.tsx
 function InfoSelect({
   placeholder,
-  width = "100%",
-  height = "auto",
   onChange,
   value,
   isLabelSrOnly,
   defaultValue,
-  variant = "base",
+  variant,
   ...props
 }) {
   const renamedProps = {
@@ -3079,7 +3083,8 @@ function InfoSelect({
   const { buttonProps } = useButton(triggerProps, triggerRef);
   const { t: t2 } = useTranslation();
   const formControl = useFormControlProps(props);
-  return /* @__PURE__ */ React73__default.createElement(Box, { sx: styles3.container }, /* @__PURE__ */ React73__default.createElement(chakra.div, { ...labelProps, sx: styles3.label }, props.label), /* @__PURE__ */ React73__default.createElement(
+  const hasChosenValue = state2.selectedItem !== null;
+  return /* @__PURE__ */ React73__default.createElement(Box, { sx: styles3.container }, /* @__PURE__ */ React73__default.createElement(
     HiddenSelect,
     {
       state: state2,
@@ -3094,13 +3099,36 @@ function InfoSelect({
       ref: triggerRef,
       sx: styles3.button,
       ...buttonProps,
-      width,
-      height,
       "data-attachable": true,
       "aria-invalid": formControl.isInvalid,
       "aria-describedby": formControl["aria-describedby"]
     },
-    /* @__PURE__ */ React73__default.createElement(Box, { ...valueProps }, state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts11.selectAnOption)),
+    /* @__PURE__ */ React73__default.createElement(chakra.div, { sx: styles3.innerButton }, /* @__PURE__ */ React73__default.createElement(
+      chakra.div,
+      {
+        ...labelProps,
+        sx: {
+          ...styles3.label,
+          ...hasChosenValue && {
+            transform: "scale(0.825) translateY(-10px) translateX(-10%)",
+            transitionProperty: "var(--spor-transition-property-common)",
+            transitionDuration: "var(--spor-transition-duration-normal)"
+          }
+        }
+      },
+      props.label
+    ), /* @__PURE__ */ React73__default.createElement(
+      Box,
+      {
+        ...valueProps,
+        h: !hasChosenValue ? "0px" : "18px",
+        hidden: !hasChosenValue,
+        transform: "scale(1) translateY(-10px)",
+        transitionProperty: "var(--spor-transition-property-common)",
+        transitionDuration: "var(--spor-transition-duration-normal)"
+      },
+      state2.selectedItem ? state2.selectedItem.textValue ?? state2.selectedItem.rendered : placeholder ?? t2(texts11.selectAnOption)
+    )),
     /* @__PURE__ */ React73__default.createElement(Box, { sx: styles3.arrowIcon }, state2.isOpen ? /* @__PURE__ */ React73__default.createElement(DropdownUpFill24Icon, null) : /* @__PURE__ */ React73__default.createElement(DropdownDownFill24Icon, null))
   ), state2.isOpen && /* @__PURE__ */ React73__default.createElement(
     Popover3,
@@ -3445,7 +3473,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React73__default.lazy(() => import('./CountryCodeSelect-C2XKHNTP.mjs'));
+var LazyCountryCodeSelect = React73__default.lazy(() => import('./CountryCodeSelect-U25NF65N.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React73__default.createElement(Radio$1, { ...props, ref });
 });
@@ -9960,14 +9988,14 @@ function floatingBackground(state2, props) {
       return {
         backgroundColor: mode(
           "floating.surface.hover.light",
-          "floating.surface.hover.dark"
+          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
         )(props)
       };
     case "default":
       return {
         backgroundColor: mode(
-          "floating.surface.default.light",
-          "floating.surface.default.dark"
+          "white",
+          `color-mix(in srgb, white 10%, var(--spor-colors-bg-default-dark))`
         )(props)
       };
   }
@@ -10024,7 +10052,10 @@ function ghostBackground(state2, props) {
       };
     case "selected": {
       return {
-        backgroundColor: mode("mint", "whiteAlpha.200")(props)
+        backgroundColor: mode(
+          "ghost.surface.selected.light",
+          "ghost.surface.selected.dark"
+        )(props)
       };
     }
     case "default":
@@ -10033,6 +10064,18 @@ function ghostBackground(state2, props) {
       };
   }
 }
+function ghostText(state2, props) {
+  switch (state2) {
+    case "selected":
+      return {
+        color: mode("ghost.text.light", "ghost.text.dark")(props)
+      };
+    default:
+      return {
+        color: mode("ghost.text.light", "ghost.text.dark")(props)
+      };
+  }
+}
 
 // src/theme/components/accordion.ts
 var helpers = createMultiStyleConfigHelpers(accordionAnatomy.keys);
@@ -10182,7 +10225,8 @@ var config3 = helpers2.defineMultiStyleConfig({
     closeButton: {
       position: "absolute",
       top: 1,
-      right: 1
+      right: 1,
+      color: "darkGrey"
     }
   },
   variants: {
@@ -11869,18 +11913,28 @@ var config19 = helpers11.defineMultiStyleConfig({
     container: {},
     label: {
       position: "relative",
+      fontSize: ["mobile.xs", "desktop.sm"],
       ...props.isLabelSrOnly ? srOnly2 : {}
     },
+    innerButton: {
+      display: "flex",
+      flexDir: "column",
+      alignItems: "start",
+      justifyContent: "start"
+    },
     button: {
+      display: "flex",
       appearance: "none",
+      width: "100%",
+      height: "54px",
       borderTopRadius: "sm",
       borderBottomRadius: props.isOpen ? 0 : "sm",
       paddingY: 1.5,
       paddingX: 3,
-      display: "flex",
       justifyContent: "space-between",
       alignItems: "center",
       fontSize: "mobile.md",
+      h: 8,
       ...baseBorder("default", props),
       _hover: {
         ...baseBorder("hover", props)
@@ -11898,6 +11952,7 @@ var config19 = helpers11.defineMultiStyleConfig({
         ...baseBorder("invalid", props)
       }
     },
+    placeholder: {},
     arrowIcon: {}
   }),
   variants: {
@@ -12527,7 +12582,7 @@ var config25 = helpers16.defineMultiStyleConfig({
       marginY: 1,
       marginX: 1,
       borderRadius: "sm",
-      color: mode("darkGrey", "white")(props),
+      ...ghostText("default", props),
       cursor: "pointer",
       outline: "none",
       _active: {
@@ -12540,15 +12595,15 @@ var config25 = helpers16.defineMultiStyleConfig({
         ...ghostBackground("selected", props)
       },
       _selected: {
-        ...ghostBackground("selected", props)
+        ...ghostBackground("active", props)
       }
     },
     label: {},
     description: {
       fontSize: ["mobile.xs", "desktop.xs"],
-      color: mode("dimGrey", "silver")(props),
+      ...ghostText("default", props),
       "[aria-selected='true'] &": {
-        color: mode("lightGrey", "platinum")(props)
+        ...ghostText("selected", props)
       }
     }
   })
@@ -13725,9 +13780,14 @@ var config44 = defineStyleConfig$1({
     display: "block",
     borderRadius: "md",
     cursor: "pointer",
-    ...focusVisibleStyles(props),
+    transitionProperty: "common",
+    transitionDuration: "fast",
+    "button&, a&, label&, &.is-clickable": {
+      ...focusVisibleStyles(props)
+    },
     _disabled: {
       ...baseBackground("disabled", props),
+      ...baseBorder("disabled", props),
       ...baseText("disabled", props),
       outline: "none",
       pointerEvents: "none"

package/dist/index.d.mts

@@ -211,7 +211,7 @@ declare const StaticCard: _chakra_ui_system_dist_system_types.ComponentWithAs<As
 
 type PressableCardProps = BoxProps & {
     /** Defaults to "base"  */
-    variant: "floating" | "accent" | "base";
+    variant?: "floating" | "accent" | "base";
 };
 /**
  * `PressableCard` is a component that renders a pressable card.
@@ -333,6 +333,8 @@ type BaseAlertProps = BoxProps & {
     variant: "info" | "success" | "warning" | "alt-transport" | "error";
     /** The body content of the alert */
     children: React.ReactNode;
+    /** The title of the alert */
+    title?: string;
 };
 
 type ClosableAlertProps = BaseAlertProps & {
@@ -361,7 +363,7 @@ type ClosableAlertProps = BaseAlertProps & {
  *   <Text>Some info here</Text>
  * </ClosableAlert>
  */
-declare const ClosableAlert: ({ variant, children, onClose: externalOnClose, }: ClosableAlertProps) => React.JSX.Element | null;
+declare const ClosableAlert: ({ variant, title, children, onClose: externalOnClose, }: ClosableAlertProps) => React.JSX.Element | null;
 
 type ExpandableAlertProps = BaseAlertProps & {
     /** The title string  */
@@ -401,7 +403,7 @@ type StaticAlertProps = BaseAlertProps;
  * </StaticAlert>
  * ```
  */
-declare const StaticAlert: ({ children, ...props }: StaticAlertProps) => React.JSX.Element;
+declare const StaticAlert: ({ children, title, ...props }: StaticAlertProps) => React.JSX.Element;
 
 type BreadcrumbProps = Omit<BreadcrumbProps$1, "variant"> & {
     variant?: "base" | "ghost";
@@ -1174,7 +1176,7 @@ type InfoSelectProps<T extends object> = {
  *
  * @see https://spor.vy.no/components/info-select
  */
-declare function InfoSelect<T extends object>({ placeholder, width, height, onChange, value, isLabelSrOnly, defaultValue, variant, ...props }: InfoSelectProps<T>): React.JSX.Element;
+declare function InfoSelect<T extends object>({ placeholder, onChange, value, isLabelSrOnly, defaultValue, variant, ...props }: InfoSelectProps<T>): React.JSX.Element;
 
 type InputProps = Omit<InputProps$1, "variant" | "size"> & {
     /** The input's label */
@@ -2534,6 +2536,7 @@ declare const theme: {
                     position: string;
                     top: number;
                     right: number;
+                    color: string;
                 };
             } | undefined;
             sizes?: {
@@ -4619,6 +4622,13 @@ declare const theme: {
                     position: string;
                     width?: string | undefined;
                     whiteSpace?: string | undefined;
+                    fontSize: ("desktop.sm" | "mobile.xs")[];
+                };
+                innerButton: {
+                    display: string;
+                    flexDir: string;
+                    alignItems: string;
+                    justifyContent: string;
                 };
                 button: {
                     _disabled: {
@@ -4657,15 +4667,18 @@ declare const theme: {
                     outlineColor: string;
                     outlineStyle: string;
                     outlineOffset: string;
+                    display: string;
                     appearance: string;
+                    width: string;
+                    height: string;
                     borderTopRadius: string;
                     borderBottomRadius: string | number;
                     paddingY: number;
                     paddingX: number;
-                    display: string;
                     justifyContent: string;
                     alignItems: string;
                     fontSize: string;
+                    h: number;
                 } | {
                     _disabled: {
                         backgroundColor: string;
@@ -4701,16 +4714,20 @@ declare const theme: {
                     };
                     outline: string;
                     outlineColor: string;
+                    display: string;
                     appearance: string;
+                    width: string;
+                    height: string;
                     borderTopRadius: string;
                     borderBottomRadius: string | number;
                     paddingY: number;
                     paddingX: number;
-                    display: string;
                     justifyContent: string;
                     alignItems: string;
                     fontSize: string;
+                    h: number;
                 };
+                placeholder: {};
                 arrowIcon: {};
             }) | undefined;
             sizes?: {
@@ -5369,12 +5386,6 @@ declare const theme: {
                     backgroundColor: string;
                 };
                 item: {
-                    paddingX: number;
-                    paddingY: number;
-                    marginY: number;
-                    marginX: number;
-                    borderRadius: string;
-                    color: string;
                     cursor: string;
                     outline: string;
                     _active: {
@@ -5389,14 +5400,20 @@ declare const theme: {
                     _selected: {
                         backgroundColor: string;
                     };
+                    color: string;
+                    paddingX: number;
+                    paddingY: number;
+                    marginY: number;
+                    marginX: number;
+                    borderRadius: string;
                 };
                 label: {};
                 description: {
-                    fontSize: ("mobile.xs" | "desktop.xs")[];
-                    color: string;
                     "[aria-selected='true'] &": {
                         color: string;
                     };
+                    color: string;
+                    fontSize: ("mobile.xs" | "desktop.xs")[];
                 };
             }) | undefined;
             sizes?: {
@@ -7224,25 +7241,39 @@ declare const theme: {
         };
         PressableCard: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
+                appearance: string;
+                border: string;
+                overflow: string;
+                fontSize: string;
+                display: string;
+                borderRadius: string;
+                cursor: string;
+                transitionProperty: string;
+                transitionDuration: string;
+                "button&, a&, label&, &.is-clickable": {
+                    _focusVisible: {
+                        outlineWidth: string;
+                        outlineColor: string;
+                        outlineStyle: string;
+                        outlineOffset: string;
+                    };
+                };
                 _disabled: {
                     outline: string;
                     pointerEvents: string;
                     color: string;
-                    backgroundColor: string;
-                };
-                _focusVisible: {
                     outlineWidth: string;
                     outlineColor: string;
                     outlineStyle: string;
                     outlineOffset: string;
+                    backgroundColor: string;
+                } | {
+                    outline: string;
+                    pointerEvents: string;
+                    color: string;
+                    outlineColor: string;
+                    backgroundColor: string;
                 };
-                appearance: string;
-                border: string;
-                overflow: string;
-                fontSize: string;
-                display: string;
-                borderRadius: string;
-                cursor: string;
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.SystemStyleInterpolation;