@vygruppen/spor-react 3.1.2 → 3.3.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@3.1.2 build
+> @vygruppen/spor-react@3.3.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -10,12 +10,12 @@
 ESM Build start
 DTS Build start
 "toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/index.js".
-"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-GIRK7GTN.mjs".
-CJS dist/index.js 901.12 KB
-CJS ⚡️ Build success in 4689ms
+"toZoned" and "toTime" are imported from external module "@internationalized/date" but never used in "dist/chunk-INCE2TKZ.mjs".
+CJS dist/index.js 901.96 KB
+CJS ⚡️ Build success in 4644ms
 ESM dist/index.mjs                      2.01 KB
-ESM dist/CountryCodeSelect-PU2FEIUH.mjs 350.82 KB
-ESM dist/chunk-GIRK7GTN.mjs             418.55 KB
-ESM ⚡️ Build success in 4689ms
-DTS ⚡️ Build success in 18196ms
-DTS dist/index.d.ts 251.63 KB
+ESM dist/CountryCodeSelect-YQHGPTOR.mjs 350.82 KB
+ESM dist/chunk-INCE2TKZ.mjs             419.29 KB
+ESM ⚡️ Build success in 4645ms
+DTS ⚡️ Build success in 17821ms
+DTS dist/index.d.ts 251.94 KB

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @vygruppen/spor-react
 
+## 3.3.0
+
+### Minor Changes
+
+- 81c256bc: Accordion: Add new prop "spacing" for adding spacing between items.
+  Accordion: Do some design tweaks
+
+## 3.2.0
+
+### Minor Changes
+
+- 37b40a9b: Adds withInput prop to numericStepper
+
 ## 3.1.2
 
 ### Patch Changes

package/dist/{CountryCodeSelect-PU2FEIUH.mjs → CountryCodeSelect-YQHGPTOR.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-GIRK7GTN.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-INCE2TKZ.mjs';
 import React from 'react';
 
 // ../../node_modules/awesome-phonenumber/index-esm.mjs

package/dist/{chunk-GIRK7GTN.mjs → chunk-INCE2TKZ.mjs}

@@ -1,4 +1,4 @@
-import { forwardRef, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Box, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, Stack as Stack$1, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, useMultiStyleConfig, FormLabel, Flex, useFormControlContext, useBreakpointValue, Popover, InputGroup, PopoverAnchor, Portal, PopoverContent, PopoverArrow, PopoverBody, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, 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, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverTrigger, PopoverCloseButton, ChakraProvider, HStack, useToast as useToast$1, useInterval } from '@chakra-ui/react';
+import { forwardRef, Box, Stack as Stack$1, Accordion as Accordion$1, Skeleton as Skeleton$1, useButtonGroup, Button as Button$1, Center, ButtonGroup as ButtonGroup$1, IconButton as IconButton$1, useStyleConfig, Badge as Badge$1, Code as Code$1, Text, useMultiStyleConfig, FormLabel, Flex, useFormControlContext, useBreakpointValue, Popover, InputGroup, PopoverAnchor, Portal, PopoverContent, PopoverArrow, PopoverBody, chakra, Checkbox as Checkbox$1, useCheckbox, FormControl as FormControl$1, InputLeftElement, Input as Input$1, InputRightElement, Select, useDisclosure, 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, AccordionItem, AccordionButton, AccordionIcon, AccordionPanel, SkeletonCircle as SkeletonCircle$1, SkeletonText as SkeletonText$1, Heading as Heading$1, CheckboxGroup as CheckboxGroup$1, List, ListItem, useColorModeValue, useFormControlProps, useFormControl, Drawer as Drawer$1, DrawerOverlay, DrawerCloseButton, DrawerBody, usePopoverContext, DarkMode, PopoverTrigger, PopoverCloseButton, ChakraProvider, HStack, 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, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalOverlay, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, ScaleFade, SimpleGrid, Slide, SlideFade, Spacer, Tab, TabList, TabPanel, TabPanels, TableCaption, Tbody, Td, Tfoot, Th, Thead, Tr, VStack, Wrap, WrapItem, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens10__default from '@vygruppen/spor-design-tokens';
 import * as tokens10 from '@vygruppen/spor-design-tokens';
@@ -769,6 +769,26 @@ var require_lodash = __commonJS({
     module.exports = mergeWith5;
   }
 });
+var Divider = forwardRef((props, ref) => {
+  return /* @__PURE__ */ React49__default.createElement(
+    Box,
+    {
+      as: "hr",
+      height: "2px",
+      border: "0",
+      borderRadius: "1px",
+      backgroundColor: "blackAlpha.200",
+      width: "100%",
+      ...props,
+      ref
+    }
+  );
+});
+var Stack = forwardRef(
+  ({ flexDirection, ...props }, ref) => {
+    return /* @__PURE__ */ React49__default.createElement(Stack$1, { ...props, direction: flexDirection, ref });
+  }
+);
 var AccordionContext = React49__default.createContext(null);
 var AccordionProvider = ({
   size: size2,
@@ -785,17 +805,20 @@ var useAccordionContext = () => {
   }
   return context;
 };
-var Accordion = forwardRef((props, ref) => {
-  const defaultIndex = typeof props.defaultIndex === "number" && props.allowMultiple ? [props.defaultIndex] : props.defaultIndex;
-  return /* @__PURE__ */ React49__default.createElement(AccordionProvider, { size: props.size }, /* @__PURE__ */ React49__default.createElement(
-    Accordion$1,
-    {
-      ...props,
-      ref,
-      defaultIndex
-    }
-  ));
-});
+var Accordion = forwardRef(
+  ({ children, spacing: spacing3 = 2, ...props }, ref) => {
+    const defaultIndex = typeof props.defaultIndex === "number" && props.allowMultiple ? [props.defaultIndex] : props.defaultIndex;
+    return /* @__PURE__ */ React49__default.createElement(AccordionProvider, { size: props.size }, /* @__PURE__ */ React49__default.createElement(
+      Accordion$1,
+      {
+        ...props,
+        ref,
+        defaultIndex
+      },
+      /* @__PURE__ */ React49__default.createElement(Stack, { spacing: spacing3 }, children)
+    ));
+  }
+);
 var Expandable = ({
   children,
   headingLevel,
@@ -823,7 +846,7 @@ var ExpandableItem = ({
 }) => {
   const { size: size2 } = useAccordionContext();
   warnAboutMismatchingIcon({ icon: leftIcon, size: size2 });
-  return /* @__PURE__ */ React49__default.createElement(AccordionItem, { ...rest }, /* @__PURE__ */ React49__default.createElement(Box, { as: headingLevel }, /* @__PURE__ */ React49__default.createElement(AccordionButton, null, /* @__PURE__ */ React49__default.createElement(Flex, { alignItems: "center" }, leftIcon && /* @__PURE__ */ React49__default.createElement(Box, { mr: 2 }, leftIcon), title), /* @__PURE__ */ React49__default.createElement(AccordionIcon, null))), /* @__PURE__ */ React49__default.createElement(AccordionPanel, null, children));
+  return /* @__PURE__ */ React49__default.createElement(AccordionItem, { ...rest }, /* @__PURE__ */ React49__default.createElement(Box, { as: headingLevel }, /* @__PURE__ */ React49__default.createElement(AccordionButton, null, /* @__PURE__ */ React49__default.createElement(Flex, { alignItems: "center" }, leftIcon && /* @__PURE__ */ React49__default.createElement(Box, { marginRight: 1 }, leftIcon), title), /* @__PURE__ */ React49__default.createElement(AccordionIcon, null))), /* @__PURE__ */ React49__default.createElement(AccordionPanel, null, children));
 };
 var warnAboutMismatchingIcon = ({ icon, size: size2 }) => {
   var _a6, _b5;
@@ -1501,28 +1524,6 @@ var ExpandableAlert = ({
 var StaticAlert = ({ children, ...props }) => {
   return /* @__PURE__ */ React49__default.createElement(BaseAlert, { ...props }, /* @__PURE__ */ React49__default.createElement(AlertIcon, { variant: props.variant }), children);
 };
-var Divider = forwardRef((props, ref) => {
-  return /* @__PURE__ */ React49__default.createElement(
-    Box,
-    {
-      as: "hr",
-      height: "2px",
-      border: "0",
-      borderRadius: "1px",
-      backgroundColor: "blackAlpha.200",
-      width: "100%",
-      ...props,
-      ref
-    }
-  );
-});
-var Stack = forwardRef(
-  ({ flexDirection, ...props }, ref) => {
-    return /* @__PURE__ */ React49__default.createElement(Stack$1, { ...props, direction: flexDirection, ref });
-  }
-);
-
-// src/card/Card.tsx
 var Card = forwardRef(
   ({ size: size2 = "sm", colorScheme = "white", children, ...props }, ref) => {
     const styles2 = useStyleConfig("Card", {
@@ -4969,6 +4970,7 @@ function NumericStepper({
   minValue = 0,
   maxValue = 99,
   isDisabled,
+  withInput = true,
   ...boxProps
 }) {
   const { t: t2 } = useTranslation();
@@ -4990,7 +4992,7 @@ function NumericStepper({
       visibility: value <= minValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled
     }
-  ), /* @__PURE__ */ React49__default.createElement(
+  ), withInput ? /* @__PURE__ */ React49__default.createElement(
     chakra.input,
     {
       type: "number",
@@ -5040,6 +5042,21 @@ function NumericStepper({
         onChange(numericInput);
       }
     }
+  ) : /* @__PURE__ */ React49__default.createElement(
+    chakra.text,
+    {
+      fontSize: "sm",
+      fontWeight: "bold",
+      width: "3ch",
+      marginX: 1,
+      paddingX: 1,
+      textAlign: "center",
+      color: textColor,
+      transition: "box-shadow .1s ease-out",
+      visibility: value === 0 ? "hidden" : "visible",
+      "aria-label": value.toString()
+    },
+    value
   ), /* @__PURE__ */ React49__default.createElement(
     VerySmallButton,
     {
@@ -5253,7 +5270,7 @@ var texts13 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-PU2FEIUH.mjs'));
+var LazyCountryCodeSelect = React49__default.lazy(() => import('./CountryCodeSelect-YQHGPTOR.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React49__default.createElement(Radio$1, { ...props, ref });
 });
@@ -10925,6 +10942,7 @@ var config3 = helpers.defineMultiStyleConfig({
       justifyContent: "space-between",
       color: "darkGrey",
       textAlign: "left",
+      fontWeight: "bold",
       ...focusVisible({
         notFocus: {
           boxShadow: getBoxShadowString({
@@ -10944,8 +10962,7 @@ var config3 = helpers.defineMultiStyleConfig({
       }
     },
     panel: {
-      pt: 2,
-      pb: 5,
+      paddingY: 2,
       borderBottomRadius: "sm"
     },
     icon: {
@@ -10960,8 +10977,7 @@ var config3 = helpers.defineMultiStyleConfig({
           backgroundColor: "seaMist"
         },
         _active: {
-          backgroundColor: "mint",
-          boxShadow: getBoxShadowString({ borderColor: "darkGrey" })
+          backgroundColor: "mint"
         }
       }
     },
@@ -10991,7 +11007,10 @@ var config3 = helpers.defineMultiStyleConfig({
     },
     card: {
       container: {
-        boxShadow: "md"
+        boxShadow: getBoxShadowString({
+          baseShadow: "sm",
+          borderColor: "silver"
+        })
       },
       button: {
         _expanded: {
@@ -11010,31 +11029,34 @@ var config3 = helpers.defineMultiStyleConfig({
     sm: {
       button: {
         fontSize: "desktop.xs",
-        px: 2,
-        py: 1
+        paddingX: 2,
+        paddingY: 1
       },
       panel: {
-        px: 2
+        fontSize: "desktop.xs",
+        paddingX: 2
       }
     },
     md: {
       button: {
         fontSize: "desktop.sm",
-        px: 3,
-        py: 1
+        paddingX: 3,
+        paddingY: 1
       },
       panel: {
-        px: 3
+        fontSize: "desktop.sm",
+        paddingX: 3
       }
     },
     lg: {
       button: {
         fontSize: "desktop.sm",
-        px: 3,
-        py: 2
+        paddingX: 3,
+        paddingY: 2
       },
       panel: {
-        px: 3
+        fontSize: "desktop.sm",
+        paddingX: 3
       }
     }
   },

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AccordionProps as AccordionProps$1, AccordionItemProps, BoxProps, ButtonProps as ButtonProps$1, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, As, StackProps as StackProps$1, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, SkeletonTextProps as SkeletonTextProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
+import { BoxProps, As, StackProps as StackProps$1, AccordionProps as AccordionProps$1, AccordionItemProps, ButtonProps as ButtonProps$1, ButtonGroupProps as ButtonGroupProps$1, IconButtonProps as IconButtonProps$1, ResponsiveValue, FlexProps, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, StackDirection, FormControlProps as FormControlProps$1, FormLabelProps as FormLabelProps$1, InputProps as InputProps$1, InputElementProps as InputElementProps$1, SelectProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, SwitchProps as SwitchProps$1, TextareaProps as TextareaProps$1, LinkProps as LinkProps$1, SkeletonTextProps as SkeletonTextProps$1, ModalHeaderProps as ModalHeaderProps$1, DrawerContentProps, DrawerProps as DrawerProps$1, PopoverProps, ChakraProviderProps, TabsProps as TabsProps$1, TableProps as TableProps$1, BadgeProps as BadgeProps$1, CodeProps as CodeProps$1, HeadingProps as HeadingProps$1, TextProps as TextProps$1 } from '@chakra-ui/react';
 export { AccordionButton, AccordionButtonProps, AccordionIcon, AccordionItem, AccordionItemProps, AccordionPanel, AccordionPanelProps, Box, BoxProps, Center, CenterProps, Collapse, CollapseProps, Container, ContainerProps, DarkMode, DrawerBody, DrawerCloseButton, DrawerFooter, DrawerOverlay, DrawerProps, Fade, FadeProps, Flex, FlexProps, FormHelperText, Grid, GridItem, GridItemProps, GridProps, HStack, Image, ImageProps, Img, ImgProps, InputGroup, InputGroupProps, LightMode, Modal, ModalBody, ModalBodyProps, ModalCloseButton, ModalContent, ModalContentProps, ModalFooter, ModalFooterProps, ModalOverlay, ModalOverlayProps, ModalProps, Popover, PopoverAnchor, PopoverArrow, PopoverArrowProps, PopoverBody, PopoverBodyProps, PopoverCloseButton, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverFooter, PopoverFooterProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTrigger, ScaleFade, ScaleFadeProps, SimpleGrid, SimpleGridProps, Slide, SlideFade, SlideFadeProps, SlideProps, Spacer, SpacerProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, TableBodyProps, TableCaption, TableCaptionProps, TableCellProps, TableColumnHeaderProps, TableFooterProps, TableHeadProps, TableRowProps, Tbody, Td, Tfoot, Th, Thead, Tr, UseClipboardOptions, UseDisclosureProps, UseOutsideClickProps, VStack, Wrap, WrapItem, WrapItemProps, WrapProps, extendTheme, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToken } from '@chakra-ui/react';
 import tokens__default from '@vygruppen/spor-design-tokens';
 import * as tokens from '@vygruppen/spor-design-tokens';
@@ -15,6 +15,49 @@ export { Item, Section } from 'react-stately';
 import * as _chakra_ui_theme_tools_dist_component from '@chakra-ui/theme-tools/dist/component';
 import * as _chakra_ui_styled_system from '@chakra-ui/styled-system';
 
+type DividerProps = BoxProps;
+/** A dividing line, used to divide content.
+ *
+ * You can specify margins if you need to give the content some space, or use a `Stack` component to do it for you
+ *
+ * ```tsx
+ * <Divider mt={4} mb={6} />
+ * ```
+ */
+declare const Divider: _chakra_ui_system_dist_system_types.ComponentWithAs<As, BoxProps>;
+
+type StackProps = Exclude<StackProps$1, "direction"> & {
+    flexDirection?: StackProps$1["direction"];
+};
+/**
+ * Adds consistent spacing between elements
+ *
+ * ```tsx
+ * <Stack>
+ *   <Text>Here's a paragraph</Text>
+ *   <Text>Here's another perfectly spaced paragraph</Text>
+ * </Stack>
+ * ```
+ *
+ * By default, the stack will be a column. You can change this by setting the `flexDirection` prop to any valid flex direction:
+ * ```tsx
+ * <Stack flexDirection="row">
+ *   <Checkbox>Here's a checkbox</Checkbox>
+ *   <Checkbox>Here's another checkbox, almost right next to the first one</Checkbox>
+ * </Stack>
+ * ```
+ *
+ * You can specify the spacing between elements with the `spacing` prop:
+ *
+ * ```tsx
+ * <Stack spacing={4}>
+ *   <Card>Here's one card</Card>
+ *   <Card>Here's another card, with a lot of space between it</Card>
+ * </Stack>
+ * ```
+ */
+declare const Stack: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", StackProps>;
+
 type AccordionProps = Omit<AccordionProps$1, "variant" | "size"> & {
     /**
      * The display variant of the accordion items.
@@ -25,6 +68,8 @@ type AccordionProps = Omit<AccordionProps$1, "variant" | "size"> & {
      */
     variant?: "list" | "outline" | "card";
     size?: "sm" | "md" | "lg";
+    /** The margin between accordion items */
+    spacing?: StackProps["spacing"];
 };
 /**
  * Wraps a set of ExpandableItem or AccordionItem components.
@@ -337,49 +382,6 @@ type FloatingActionButtonProps = BoxProps & {
  */
 declare const FloatingActionButton: ({ children, icon, variant, isTextVisible: externalIsTextVisible, placement, ...props }: FloatingActionButtonProps) => React__default.JSX.Element;
 
-type DividerProps = BoxProps;
-/** A dividing line, used to divide content.
- *
- * You can specify margins if you need to give the content some space, or use a `Stack` component to do it for you
- *
- * ```tsx
- * <Divider mt={4} mb={6} />
- * ```
- */
-declare const Divider: _chakra_ui_system_dist_system_types.ComponentWithAs<As, BoxProps>;
-
-type StackProps = Exclude<StackProps$1, "direction"> & {
-    flexDirection?: StackProps$1["direction"];
-};
-/**
- * Adds consistent spacing between elements
- *
- * ```tsx
- * <Stack>
- *   <Text>Here's a paragraph</Text>
- *   <Text>Here's another perfectly spaced paragraph</Text>
- * </Stack>
- * ```
- *
- * By default, the stack will be a column. You can change this by setting the `flexDirection` prop to any valid flex direction:
- * ```tsx
- * <Stack flexDirection="row">
- *   <Checkbox>Here's a checkbox</Checkbox>
- *   <Checkbox>Here's another checkbox, almost right next to the first one</Checkbox>
- * </Stack>
- * ```
- *
- * You can specify the spacing between elements with the `spacing` prop:
- *
- * ```tsx
- * <Stack spacing={4}>
- *   <Card>Here's one card</Card>
- *   <Card>Here's another card, with a lot of space between it</Card>
- * </Stack>
- * ```
- */
-declare const Stack: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", StackProps>;
-
 type CardProps = Exclude<BoxProps, "size"> & {
     size?: "sm" | "lg";
     children: React__default.ReactNode;
@@ -1096,6 +1098,8 @@ type NumericStepperProps = {
     maxValue?: number;
     /** Whether the stepper is disabled or not */
     isDisabled?: boolean;
+    /** Whether to show input field or not */
+    withInput?: boolean;
 } & Omit<BoxProps, "onChange">;
 /** A simple stepper component for integer values
  *
@@ -1121,7 +1125,7 @@ type NumericStepperProps = {
  * </FormControl>
  * ```
  */
-declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, ...boxProps }: NumericStepperProps): React__default.JSX.Element;
+declare function NumericStepper({ name: nameProp, id: idProp, value: valueProp, defaultValue, onChange: onChangeProp, minValue, maxValue, isDisabled, withInput, ...boxProps }: NumericStepperProps): React__default.JSX.Element;
 
 type PasswordInputProps = InputProps;
 declare const PasswordInput: _chakra_ui_system_dist_system_types.ComponentWithAs<"input", InputProps>;
@@ -1947,10 +1951,10 @@ declare const theme: {
                     justifyContent: string;
                     color: string;
                     textAlign: string;
+                    fontWeight: string;
                 };
                 panel: {
-                    pt: number;
-                    pb: number;
+                    paddingY: number;
                     borderBottomRadius: string;
                 };
                 icon: {
@@ -1961,31 +1965,34 @@ declare const theme: {
                 sm: {
                     button: {
                         fontSize: string;
-                        px: number;
-                        py: number;
+                        paddingX: number;
+                        paddingY: number;
                     };
                     panel: {
-                        px: number;
+                        fontSize: string;
+                        paddingX: number;
                     };
                 };
                 md: {
                     button: {
                         fontSize: string;
-                        px: number;
-                        py: number;
+                        paddingX: number;
+                        paddingY: number;
                     };
                     panel: {
-                        px: number;
+                        fontSize: string;
+                        paddingX: number;
                     };
                 };
                 lg: {
                     button: {
                         fontSize: string;
-                        px: number;
-                        py: number;
+                        paddingX: number;
+                        paddingY: number;
                     };
                     panel: {
-                        px: number;
+                        fontSize: string;
+                        paddingX: number;
                     };
                 };
             } | undefined;
@@ -1998,7 +2005,6 @@ declare const theme: {
                         };
                         _active: {
                             backgroundColor: string;
-                            boxShadow: string;
                         };
                     };
                 };
@@ -3455,12 +3461,12 @@ declare const theme: {
             }) | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("element" | "group" | "addon" | "field")[];
+                    keys: ("group" | "element" | "addon" | "field")[];
                 }>;
             } | undefined;
             variants?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("element" | "group" | "addon" | "field")[];
+                    keys: ("group" | "element" | "addon" | "field")[];
                 }>;
             } | undefined;
             defaultProps?: {
@@ -3468,7 +3474,7 @@ declare const theme: {
                 variant?: string | number | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: ("element" | "group" | "addon" | "field")[];
+            parts: ("group" | "element" | "addon" | "field")[];
         };
         LineIcon: {
             baseStyle?: {
@@ -5210,7 +5216,7 @@ declare const theme: {
             sizes?: {
                 "2xs": {
                     container: {
-                        [x: string]: string | 1 | 2 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | {
+                        [x: string]: string | 2 | 1 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | {
                             sm: string;
                             md: string;
                             lg: string;
@@ -5218,7 +5224,7 @@ declare const theme: {
                         } | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96;
                     };
                     excessLabel: {
-                        [x: string]: string | 1 | 2 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
+                        [x: string]: string | 2 | 1 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
                             sm: string;
                             md: string;
                             lg: string;
@@ -5228,7 +5234,7 @@ declare const theme: {
                 };
                 xs: {
                     container: {
-                        [x: string]: string | 1 | 2 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
+                        [x: string]: string | 2 | 1 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
                             sm: string;
                             md: string;
                             lg: string;
@@ -5236,7 +5242,7 @@ declare const theme: {
                         };
                     };
                     excessLabel: {
-                        [x: string]: string | 1 | 2 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
+                        [x: string]: string | 2 | 1 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
                             sm: string;
                             md: string;
                             lg: string;
@@ -5246,7 +5252,7 @@ declare const theme: {
                 };
                 sm: {
                     container: {
-                        [x: string]: string | 1 | 2 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
+                        [x: string]: string | 2 | 1 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
                             sm: string;
                             md: string;
                             lg: string;
@@ -5254,7 +5260,7 @@ declare const theme: {
                         };
                     };
                     excessLabel: {
-                        [x: string]: string | 1 | 2 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
+                        [x: string]: string | 2 | 1 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
                             sm: string;
                             md: string;
                             lg: string;
@@ -5264,7 +5270,7 @@ declare const theme: {
                 };
                 md: {
                     container: {
-                        [x: string]: string | 1 | 2 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
+                        [x: string]: string | 2 | 1 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
                             sm: string;
                             md: string;
                             lg: string;
@@ -5272,7 +5278,7 @@ declare const theme: {
                         };
                     };
                     excessLabel: {
-                        [x: string]: string | 1 | 2 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
+                        [x: string]: string | 2 | 1 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
                             sm: string;
                             md: string;
                             lg: string;
@@ -5282,7 +5288,7 @@ declare const theme: {
                 };
                 lg: {
                     container: {
-                        [x: string]: string | 1 | 2 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
+                        [x: string]: string | 2 | 1 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
                             sm: string;
                             md: string;
                             lg: string;
@@ -5290,7 +5296,7 @@ declare const theme: {
                         };
                     };
                     excessLabel: {
-                        [x: string]: string | 1 | 2 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
+                        [x: string]: string | 2 | 1 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
                             sm: string;
                             md: string;
                             lg: string;
@@ -5300,7 +5306,7 @@ declare const theme: {
                 };
                 xl: {
                     container: {
-                        [x: string]: string | 1 | 2 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
+                        [x: string]: string | 2 | 1 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
                             sm: string;
                             md: string;
                             lg: string;
@@ -5308,7 +5314,7 @@ declare const theme: {
                         };
                     };
                     excessLabel: {
-                        [x: string]: string | 1 | 2 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
+                        [x: string]: string | 2 | 1 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
                             sm: string;
                             md: string;
                             lg: string;
@@ -5318,7 +5324,7 @@ declare const theme: {
                 };
                 "2xl": {
                     container: {
-                        [x: string]: string | 1 | 2 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
+                        [x: string]: string | 2 | 1 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
                             sm: string;
                             md: string;
                             lg: string;
@@ -5326,7 +5332,7 @@ declare const theme: {
                         };
                     };
                     excessLabel: {
-                        [x: string]: string | 1 | 2 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
+                        [x: string]: string | 2 | 1 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
                             sm: string;
                             md: string;
                             lg: string;
@@ -5336,7 +5342,7 @@ declare const theme: {
                 };
                 full: {
                     container: {
-                        [x: string]: string | 1 | 2 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
+                        [x: string]: string | 2 | 1 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
                             sm: string;
                             md: string;
                             lg: string;
@@ -5344,7 +5350,7 @@ declare const theme: {
                         };
                     };
                     excessLabel: {
-                        [x: string]: string | 1 | 2 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
+                        [x: string]: string | 2 | 1 | 3 | 6 | 4 | 5 | 7 | 8 | 9 | 10 | 12 | 14 | 16 | 20 | 0.5 | 1.5 | 24 | 60 | 2.5 | 3.5 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 64 | 72 | 80 | 96 | {
                             sm: string;
                             md: string;
                             lg: string;
@@ -5732,12 +5738,12 @@ declare const theme: {
             } | undefined;
             sizes?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("button" | "list" | "icon" | "divider" | "item" | "groupTitle" | "command")[];
+                    keys: ("button" | "list" | "divider" | "icon" | "item" | "groupTitle" | "command")[];
                 }>;
             } | undefined;
             variants?: {
                 [key: string]: _chakra_ui_styled_system.PartsStyleInterpolation<{
-                    keys: ("button" | "list" | "icon" | "divider" | "item" | "groupTitle" | "command")[];
+                    keys: ("button" | "list" | "divider" | "icon" | "item" | "groupTitle" | "command")[];
                 }>;
             } | undefined;
             defaultProps?: {
@@ -5745,7 +5751,7 @@ declare const theme: {
                 variant?: string | number | undefined;
                 colorScheme?: string | undefined;
             } | undefined;
-            parts: ("button" | "list" | "icon" | "divider" | "item" | "groupTitle" | "command")[];
+            parts: ("button" | "list" | "divider" | "icon" | "item" | "groupTitle" | "command")[];
         };
         NumberInput: {
             baseStyle?: ((props: _chakra_ui_styled_system.StyleFunctionProps) => {
@@ -6618,8 +6624,8 @@ declare const theme: {
         "7xl": string;
         "8xl": string;
         0: string;
-        1: string;
         2: string;
+        1: string;
         3: string;
         6: string;
         4: string;

package/dist/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var React49 = require('react');
 var react = require('@chakra-ui/react');
+var React49 = require('react');
 var lottieReact = require('lottie-react');
 var sporLoader = require('@vygruppen/spor-loader');
 var reactAria = require('react-aria');
@@ -67,6 +67,42 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
+exports.Divider = void 0;
+var init_Divider = __esm({
+  "src/layout/Divider.tsx"() {
+    exports.Divider = react.forwardRef((props, ref) => {
+      return /* @__PURE__ */ React49__namespace.default.createElement(
+        react.Box,
+        {
+          as: "hr",
+          height: "2px",
+          border: "0",
+          borderRadius: "1px",
+          backgroundColor: "blackAlpha.200",
+          width: "100%",
+          ...props,
+          ref
+        }
+      );
+    });
+  }
+});
+exports.Stack = void 0;
+var init_Stack = __esm({
+  "src/layout/Stack.tsx"() {
+    exports.Stack = react.forwardRef(
+      ({ flexDirection, ...props }, ref) => {
+        return /* @__PURE__ */ React49__namespace.default.createElement(react.Stack, { ...props, direction: flexDirection, ref });
+      }
+    );
+  }
+});
+var init_layout = __esm({
+  "src/layout/index.tsx"() {
+    init_Divider();
+    init_Stack();
+  }
+});
 var AccordionContext, AccordionProvider, useAccordionContext;
 var init_AccordionContext = __esm({
   "src/accordion/AccordionContext.tsx"() {
@@ -91,18 +127,22 @@ var init_AccordionContext = __esm({
 exports.Accordion = void 0;
 var init_Accordion = __esm({
   "src/accordion/Accordion.tsx"() {
+    init_layout();
     init_AccordionContext();
-    exports.Accordion = react.forwardRef((props, ref) => {
-      const defaultIndex = typeof props.defaultIndex === "number" && props.allowMultiple ? [props.defaultIndex] : props.defaultIndex;
-      return /* @__PURE__ */ React49__namespace.default.createElement(AccordionProvider, { size: props.size }, /* @__PURE__ */ React49__namespace.default.createElement(
-        react.Accordion,
-        {
-          ...props,
-          ref,
-          defaultIndex
-        }
-      ));
-    });
+    exports.Accordion = react.forwardRef(
+      ({ children, spacing: spacing3 = 2, ...props }, ref) => {
+        const defaultIndex = typeof props.defaultIndex === "number" && props.allowMultiple ? [props.defaultIndex] : props.defaultIndex;
+        return /* @__PURE__ */ React49__namespace.default.createElement(AccordionProvider, { size: props.size }, /* @__PURE__ */ React49__namespace.default.createElement(
+          react.Accordion,
+          {
+            ...props,
+            ref,
+            defaultIndex
+          },
+          /* @__PURE__ */ React49__namespace.default.createElement(exports.Stack, { spacing: spacing3 }, children)
+        ));
+      }
+    );
   }
 });
 exports.Expandable = void 0; exports.ExpandableItem = void 0; var warnAboutMismatchingIcon;
@@ -137,7 +177,7 @@ var init_Expandable = __esm({
     }) => {
       const { size: size2 } = useAccordionContext();
       warnAboutMismatchingIcon({ icon: leftIcon, size: size2 });
-      return /* @__PURE__ */ React49__namespace.default.createElement(react.AccordionItem, { ...rest }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { as: headingLevel }, /* @__PURE__ */ React49__namespace.default.createElement(react.AccordionButton, null, /* @__PURE__ */ React49__namespace.default.createElement(react.Flex, { alignItems: "center" }, leftIcon && /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { mr: 2 }, leftIcon), title), /* @__PURE__ */ React49__namespace.default.createElement(react.AccordionIcon, null))), /* @__PURE__ */ React49__namespace.default.createElement(react.AccordionPanel, null, children));
+      return /* @__PURE__ */ React49__namespace.default.createElement(react.AccordionItem, { ...rest }, /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { as: headingLevel }, /* @__PURE__ */ React49__namespace.default.createElement(react.AccordionButton, null, /* @__PURE__ */ React49__namespace.default.createElement(react.Flex, { alignItems: "center" }, leftIcon && /* @__PURE__ */ React49__namespace.default.createElement(react.Box, { marginRight: 1 }, leftIcon), title), /* @__PURE__ */ React49__namespace.default.createElement(react.AccordionIcon, null))), /* @__PURE__ */ React49__namespace.default.createElement(react.AccordionPanel, null, children));
     };
     warnAboutMismatchingIcon = ({ icon, size: size2 }) => {
       var _a6, _b5;
@@ -1035,42 +1075,6 @@ var init_alert = __esm({
     init_StaticAlert();
   }
 });
-exports.Divider = void 0;
-var init_Divider = __esm({
-  "src/layout/Divider.tsx"() {
-    exports.Divider = react.forwardRef((props, ref) => {
-      return /* @__PURE__ */ React49__namespace.default.createElement(
-        react.Box,
-        {
-          as: "hr",
-          height: "2px",
-          border: "0",
-          borderRadius: "1px",
-          backgroundColor: "blackAlpha.200",
-          width: "100%",
-          ...props,
-          ref
-        }
-      );
-    });
-  }
-});
-exports.Stack = void 0;
-var init_Stack = __esm({
-  "src/layout/Stack.tsx"() {
-    exports.Stack = react.forwardRef(
-      ({ flexDirection, ...props }, ref) => {
-        return /* @__PURE__ */ React49__namespace.default.createElement(react.Stack, { ...props, direction: flexDirection, ref });
-      }
-    );
-  }
-});
-var init_layout = __esm({
-  "src/layout/index.tsx"() {
-    init_Divider();
-    init_Stack();
-  }
-});
 exports.Card = void 0;
 var init_Card = __esm({
   "src/card/Card.tsx"() {
@@ -5626,6 +5630,7 @@ function NumericStepper({
   minValue = 0,
   maxValue = 99,
   isDisabled,
+  withInput = true,
   ...boxProps
 }) {
   const { t: t2 } = useTranslation();
@@ -5647,7 +5652,7 @@ function NumericStepper({
       visibility: value <= minValue ? "hidden" : "visible",
       isDisabled: formControlProps.disabled
     }
-  ), /* @__PURE__ */ React49__namespace.default.createElement(
+  ), withInput ? /* @__PURE__ */ React49__namespace.default.createElement(
     react.chakra.input,
     {
       type: "number",
@@ -5697,6 +5702,21 @@ function NumericStepper({
         onChange(numericInput);
       }
     }
+  ) : /* @__PURE__ */ React49__namespace.default.createElement(
+    react.chakra.text,
+    {
+      fontSize: "sm",
+      fontWeight: "bold",
+      width: "3ch",
+      marginX: 1,
+      paddingX: 1,
+      textAlign: "center",
+      color: textColor,
+      transition: "box-shadow .1s ease-out",
+      visibility: value === 0 ? "hidden" : "visible",
+      "aria-label": value.toString()
+    },
+    value
   ), /* @__PURE__ */ React49__namespace.default.createElement(
     VerySmallButton,
     {
@@ -18915,6 +18935,7 @@ var init_accordion2 = __esm({
           justifyContent: "space-between",
           color: "darkGrey",
           textAlign: "left",
+          fontWeight: "bold",
           ...focusVisible({
             notFocus: {
               boxShadow: getBoxShadowString({
@@ -18934,8 +18955,7 @@ var init_accordion2 = __esm({
           }
         },
         panel: {
-          pt: 2,
-          pb: 5,
+          paddingY: 2,
           borderBottomRadius: "sm"
         },
         icon: {
@@ -18950,8 +18970,7 @@ var init_accordion2 = __esm({
               backgroundColor: "seaMist"
             },
             _active: {
-              backgroundColor: "mint",
-              boxShadow: getBoxShadowString({ borderColor: "darkGrey" })
+              backgroundColor: "mint"
             }
           }
         },
@@ -18981,7 +19000,10 @@ var init_accordion2 = __esm({
         },
         card: {
           container: {
-            boxShadow: "md"
+            boxShadow: getBoxShadowString({
+              baseShadow: "sm",
+              borderColor: "silver"
+            })
           },
           button: {
             _expanded: {
@@ -19000,31 +19022,34 @@ var init_accordion2 = __esm({
         sm: {
           button: {
             fontSize: "desktop.xs",
-            px: 2,
-            py: 1
+            paddingX: 2,
+            paddingY: 1
           },
           panel: {
-            px: 2
+            fontSize: "desktop.xs",
+            paddingX: 2
           }
         },
         md: {
           button: {
             fontSize: "desktop.sm",
-            px: 3,
-            py: 1
+            paddingX: 3,
+            paddingY: 1
           },
           panel: {
-            px: 3
+            fontSize: "desktop.sm",
+            paddingX: 3
           }
         },
         lg: {
           button: {
             fontSize: "desktop.sm",
-            px: 3,
-            py: 2
+            paddingX: 3,
+            paddingY: 2
           },
           panel: {
-            px: 3
+            fontSize: "desktop.sm",
+            paddingX: 3
           }
         }
       },

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-GIRK7GTN.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, Collapse, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, NumericStepper, PasswordInput, PhoneNumberInput, PlayPauseButton, Popover, PopoverAnchor, PopoverArrow, PopoverBody, PopoverCloseButton, PopoverContent, PopoverFooter, PopoverHeader, PopoverTrigger, PopoverWizardBody, ProgressBar, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, SimplePopover, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tr, TravelTag, VStack, VyLogo, WizardPopover, Wrap, WrapItem, createTexts, extendTheme, fontFaces, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useTheme, useToast, useToken, useTranslation } from './chunk-INCE2TKZ.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "3.1.2",
+  "version": "3.3.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/accordion/Accordion.tsx

@@ -1,10 +1,10 @@
 import {
   Accordion as ChakraAccordion,
   AccordionProps as ChakraAccordionProps,
-  As,
   forwardRef,
 } from "@chakra-ui/react";
 import React from "react";
+import { Stack, StackProps } from "../layout";
 import { AccordionProvider } from "./AccordionContext";
 export {
   AccordionButton,
@@ -28,6 +28,8 @@ export type AccordionProps = Omit<ChakraAccordionProps, "variant" | "size"> & {
    */
   variant?: "list" | "outline" | "card";
   size?: "sm" | "md" | "lg";
+  /** The margin between accordion items */
+  spacing?: StackProps["spacing"];
 };
 /**
  * Wraps a set of ExpandableItem or AccordionItem components.
@@ -45,18 +47,22 @@ export type AccordionProps = Omit<ChakraAccordionProps, "variant" | "size"> & {
  *
  * If you only have one expandable item, you can use the `<Expandable />` component instead.
  */
-export const Accordion = forwardRef<AccordionProps, "div">((props, ref) => {
-  const defaultIndex =
-    typeof props.defaultIndex === "number" && props.allowMultiple
-      ? [props.defaultIndex]
-      : props.defaultIndex;
-  return (
-    <AccordionProvider size={props.size}>
-      <ChakraAccordion
-        {...props}
-        ref={ref}
-        defaultIndex={defaultIndex as number[] | undefined}
-      />
-    </AccordionProvider>
-  );
-});
+export const Accordion = forwardRef<AccordionProps, "div">(
+  ({ children, spacing = 2, ...props }, ref) => {
+    const defaultIndex =
+      typeof props.defaultIndex === "number" && props.allowMultiple
+        ? [props.defaultIndex]
+        : props.defaultIndex;
+    return (
+      <AccordionProvider size={props.size}>
+        <ChakraAccordion
+          {...props}
+          ref={ref}
+          defaultIndex={defaultIndex as number[] | undefined}
+        >
+          <Stack spacing={spacing}>{children}</Stack>
+        </ChakraAccordion>
+      </AccordionProvider>
+    );
+  }
+);

package/src/accordion/Expandable.tsx

@@ -106,7 +106,7 @@ export const ExpandableItem = ({
       <Box as={headingLevel}>
         <AccordionButton>
           <Flex alignItems="center">
-            {leftIcon && <Box mr={2}>{leftIcon}</Box>}
+            {leftIcon && <Box marginRight={1}>{leftIcon}</Box>}
             {title}
           </Flex>
           <AccordionIcon />

package/src/input/NumericStepper.tsx

@@ -31,6 +31,8 @@ type NumericStepperProps = {
   maxValue?: number;
   /** Whether the stepper is disabled or not */
   isDisabled?: boolean;
+  /** Whether to show input field or not */
+  withInput?: boolean;
 } & Omit<BoxProps, "onChange">;
 /** A simple stepper component for integer values
  *
@@ -65,6 +67,7 @@ export function NumericStepper({
   minValue = 0,
   maxValue = 99,
   isDisabled,
+  withInput = true,
   ...boxProps
 }: NumericStepperProps) {
   const { t } = useTranslation();
@@ -87,54 +90,71 @@ export function NumericStepper({
         visibility={value <= minValue ? "hidden" : "visible"}
         isDisabled={formControlProps.disabled}
       />
-      <chakra.input
-        type="number"
-        min={minValue}
-        max={maxValue}
-        name={nameProp}
-        value={value}
-        {...formControlProps}
-        id={value !== 0 ? formControlProps.id : undefined}
-        fontSize="sm"
-        fontWeight="bold"
-        width="3ch"
-        marginX={1}
-        paddingX={1}
-        borderRadius="xs"
-        textAlign="center"
-        backgroundColor={backgroundColor}
-        color={textColor}
-        transition="box-shadow .1s ease-out"
-        visibility={value === 0 ? "hidden" : "visible"}
-        aria-live="assertive"
-        aria-label={value.toString()}
-        _hover={{
-          boxShadow: getBoxShadowString({
-            borderColor: "currentColor",
-            borderWidth: 1,
-          }),
-          _disabled: {
-            boxShadow: "none",
-          },
-        }}
-        _disabled={{
-          opacity: 0.5,
-        }}
-        _focus={{
-          outline: "none",
-          boxShadow: getBoxShadowString({
-            borderColor: focusColor,
-            borderWidth: 1,
-          }),
-        }}
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-          const numericInput = Number(e.target.value);
-          if (Number.isNaN(numericInput)) {
-            return;
-          }
-          onChange(numericInput);
-        }}
-      />
+      {withInput ? (
+        <chakra.input
+          type="number"
+          min={minValue}
+          max={maxValue}
+          name={nameProp}
+          value={value}
+          {...formControlProps}
+          id={value !== 0 ? formControlProps.id : undefined}
+          fontSize="sm"
+          fontWeight="bold"
+          width="3ch"
+          marginX={1}
+          paddingX={1}
+          borderRadius="xs"
+          textAlign="center"
+          backgroundColor={backgroundColor}
+          color={textColor}
+          transition="box-shadow .1s ease-out"
+          visibility={value === 0 ? "hidden" : "visible"}
+          aria-live="assertive"
+          aria-label={value.toString()}
+          _hover={{
+            boxShadow: getBoxShadowString({
+              borderColor: "currentColor",
+              borderWidth: 1,
+            }),
+            _disabled: {
+              boxShadow: "none",
+            },
+          }}
+          _disabled={{
+            opacity: 0.5,
+          }}
+          _focus={{
+            outline: "none",
+            boxShadow: getBoxShadowString({
+              borderColor: focusColor,
+              borderWidth: 1,
+            }),
+          }}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            const numericInput = Number(e.target.value);
+            if (Number.isNaN(numericInput)) {
+              return;
+            }
+            onChange(numericInput);
+          }}
+        />
+      ) : (
+        <chakra.text
+          fontSize="sm"
+          fontWeight="bold"
+          width="3ch"
+          marginX={1}
+          paddingX={1}
+          textAlign="center"
+          color={textColor}
+          transition="box-shadow .1s ease-out"
+          visibility={value === 0 ? "hidden" : "visible"}
+          aria-label={value.toString()}
+        >
+          {value}
+        </chakra.text>
+      )}
       <VerySmallButton
         icon={<AddIcon color="white" />}
         aria-label={t(texts.incrementButtonAriaLabel)}
@@ -242,4 +262,4 @@ const texts = createTexts({
     nn: "Legg til 1",
     sv: "Lägg till 1",
   },
-});
+});

package/src/theme/components/accordion.ts

@@ -21,6 +21,7 @@ const config = helpers.defineMultiStyleConfig({
       justifyContent: "space-between",
       color: "darkGrey",
       textAlign: "left",
+      fontWeight: "bold",
       ...focusVisible({
         notFocus: {
           boxShadow: getBoxShadowString({
@@ -40,8 +41,7 @@ const config = helpers.defineMultiStyleConfig({
       },
     },
     panel: {
-      pt: 2,
-      pb: 5,
+      paddingY: 2,
       borderBottomRadius: "sm",
     },
     icon: {
@@ -57,7 +57,6 @@ const config = helpers.defineMultiStyleConfig({
         },
         _active: {
           backgroundColor: "mint",
-          boxShadow: getBoxShadowString({ borderColor: "darkGrey" }),
         },
       },
     },
@@ -87,7 +86,10 @@ const config = helpers.defineMultiStyleConfig({
     },
     card: {
       container: {
-        boxShadow: "md",
+        boxShadow: getBoxShadowString({
+          baseShadow: "sm",
+          borderColor: "silver",
+        }),
       },
       button: {
         _expanded: {
@@ -106,31 +108,34 @@ const config = helpers.defineMultiStyleConfig({
     sm: {
       button: {
         fontSize: "desktop.xs",
-        px: 2,
-        py: 1,
+        paddingX: 2,
+        paddingY: 1,
       },
       panel: {
-        px: 2,
+        fontSize: "desktop.xs",
+        paddingX: 2,
       },
     },
     md: {
       button: {
         fontSize: "desktop.sm",
-        px: 3,
-        py: 1,
+        paddingX: 3,
+        paddingY: 1,
       },
       panel: {
-        px: 3,
+        fontSize: "desktop.sm",
+        paddingX: 3,
       },
     },
     lg: {
       button: {
         fontSize: "desktop.sm",
-        px: 3,
-        py: 2,
+        paddingX: 3,
+        paddingY: 2,
       },
       panel: {
-        px: 3,
+        fontSize: "desktop.sm",
+        paddingX: 3,
       },
     },
   },