@mrshmllw/smores-react 4.0.1 → 5.0.0

package/dist/BrandCard/BrandCard.js

@@ -1,23 +1,59 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import styled from 'styled-components';
-import { theme } from '../theme';
-import { Box } from '../Box';
-import { Text } from '../Text';
-export const BrandCard = ({ title, body, visual, visualHeight = '', alignVisual, visualBottom, tag, buttonAction, fallbackStyle = false, bgColour = 'matcha', maxWidth = '', ...otherProps }) => {
-    return (React.createElement(Container, { maxWidth: maxWidth, visual: visual, fallbackStyle: fallbackStyle, bgColor: bgColour, ...otherProps },
-        tag && React.createElement(TagWrapper, null, tag),
-        visual && !visualBottom && (React.createElement(VisualWrapper, { visualHeight: visualHeight },
-            React.createElement(Visual, { visualUrl: visual, visualHeight: visualHeight, alignVisual: alignVisual }))),
-        React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "space-between", mt: "16px" },
-            React.createElement(Box, { flex: true, alignItems: "center" },
-                React.createElement(Box, null,
-                    title && (React.createElement(Text, { typo: "hero-alternate", color: "liquorice" }, title)),
-                    body && (React.createElement(Text, { typo: "body-regular", color: "liquorice" }, body))))),
-        buttonAction && React.createElement(Box, { mt: "16px" }, buttonAction),
-        visual && visualBottom && (React.createElement(VisualWrapper, { visualHeight: visualHeight, mt: "16px" },
-            React.createElement(Visual, { visualUrl: visual, visualHeight: visualHeight, alignVisual: alignVisual })))));
+import { theme } from '../theme.js';
+import { Box } from '../Box/Box.js';
+import { Text } from '../Text/Text.js';
+
+const BrandCard = ({
+  title,
+  body,
+  visual,
+  visualHeight = "",
+  alignVisual,
+  visualBottom,
+  tag,
+  buttonAction,
+  fallbackStyle = false,
+  bgColour = "matcha",
+  maxWidth = "",
+  ...otherProps
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      maxWidth,
+      visual,
+      fallbackStyle,
+      bgColor: bgColour,
+      ...otherProps,
+      children: [
+        tag && /* @__PURE__ */ jsx(TagWrapper, { children: tag }),
+        visual && !visualBottom && /* @__PURE__ */ jsx(VisualWrapper, { visualHeight, children: /* @__PURE__ */ jsx(
+          Visual,
+          {
+            visualUrl: visual,
+            visualHeight,
+            alignVisual
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { flex: true, alignItems: "center", justifyContent: "space-between", mt: "16px", children: /* @__PURE__ */ jsx(Box, { flex: true, alignItems: "center", children: /* @__PURE__ */ jsxs(Box, { children: [
+          title && /* @__PURE__ */ jsx(Text, { typo: "hero-alternate", color: "liquorice", children: title }),
+          body && /* @__PURE__ */ jsx(Text, { typo: "body-regular", color: "liquorice", children: body })
+        ] }) }) }),
+        buttonAction && /* @__PURE__ */ jsx(Box, { mt: "16px", children: buttonAction }),
+        visual && visualBottom && /* @__PURE__ */ jsx(VisualWrapper, { visualHeight, mt: "16px", children: /* @__PURE__ */ jsx(
+          Visual,
+          {
+            visualUrl: visual,
+            visualHeight,
+            alignVisual
+          }
+        ) })
+      ]
+    }
+  );
 };
-const Container = styled(Box) `
+const Container = styled(Box)`
   background: ${({ fallbackStyle, bgColor }) => fallbackStyle ? theme.colors.cream : theme.colors[bgColor]};
   box-sizing: border-box;
   border-radius: 16px 16px 0px 0px;
@@ -26,23 +62,24 @@ const Container = styled(Box) `
   position: relative;
   overflow: hidden;
 `;
-const TagWrapper = styled(Box) `
+const TagWrapper = styled(Box)`
   position: absolute;
   top: 16px;
   right: 16px;
 `;
-const VisualWrapper = styled(Box) `
+const VisualWrapper = styled(Box)`
   width: 100%;
 
   ${({ visualHeight }) => visualHeight && `height: ${visualHeight};`}
 `;
-const Visual = styled(Box) `
+const Visual = styled(Box)`
   width: 100%;
   background-image: url('${(p) => p.visualUrl}');
   background-size: contain;
   background-repeat: no-repeat;
-  background-position: ${({ alignVisual }) => alignVisual ? alignVisual : 'left'};
+  background-position: ${({ alignVisual }) => alignVisual ? alignVisual : "left"};
 
-  ${({ visualHeight }) => visualHeight ? `height: ${visualHeight};` : 'padding-top: 100%;'}
+  ${({ visualHeight }) => visualHeight ? `height: ${visualHeight};` : "padding-top: 100%;"}
 `;
-//# sourceMappingURL=BrandCard.js.map
+
+export { BrandCard };

package/dist/Button/Button.js

@@ -1,22 +1,93 @@
-import React, { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { Box } from '../Box';
-import { Icon as IconComponent } from '../Icon';
-import { Loader } from '../Loader';
-import { theme } from '../theme';
-import { focusOutlineStyle } from '../utils/focusOutline';
-export const Button = forwardRef((props, ref) => {
-    const { children, id, className = '', disabled = false, handleClick, loading = false, primary = false, secondary = false, fallbackStyle = false, textBtn = false, smallButton = false, icon = '', trailingIcon = false, forcedWidth = '', form, type, ...otherProps } = props;
-    return (React.createElement(Container, { as: "button", id: id, className: className, disabled: disabled || loading, onClick: handleClick, "$loading": loading, primary: primary, secondary: secondary, fallbackStyle: fallbackStyle, textBtn: textBtn, smallButton: smallButton, icon: icon, trailingIcon: trailingIcon, forcedWidth: forcedWidth, ...(form ? { form } : {}), type: type, ...otherProps, ref: ref },
-        loading && (React.createElement(LoaderContainer, null,
-            React.createElement(Loader, { color: 'liquorice', height: "16" }))),
-        React.createElement(ContentContainer, { icon: icon, "$loading": loading },
-            !trailingIcon && icon && (React.createElement(IconContainer, { trailingIcon: trailingIcon, render: icon, size: smallButton ? 16 : 24, color: 'liquorice' })),
-            React.createElement(ChildrenContainer, { className: "childrenContainer" }, children),
-            trailingIcon && icon && textBtn && (React.createElement(IconContainer, { trailingIcon: trailingIcon, render: icon, size: smallButton ? 16 : 24, color: 'liquorice', className: "iconContainer" })))));
+import { Box } from '../Box/Box.js';
+import { Icon } from '../Icon/Icon.js';
+import { Loader } from '../Loader/Loader.js';
+import { theme } from '../theme.js';
+import { focusOutlineStyle } from '../utils/focusOutline.js';
+
+const Button = forwardRef((props, ref) => {
+  const {
+    children,
+    id,
+    className = "",
+    disabled = false,
+    handleClick,
+    loading = false,
+    primary = false,
+    secondary = false,
+    fallbackStyle = false,
+    textBtn = false,
+    smallButton = false,
+    icon,
+    trailingIcon = false,
+    forcedWidth = "",
+    form,
+    type,
+    ...otherProps
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      as: "button",
+      id,
+      className,
+      disabled: disabled || loading,
+      onClick: handleClick,
+      $loading: loading,
+      primary,
+      secondary,
+      fallbackStyle,
+      textBtn,
+      smallButton,
+      icon,
+      trailingIcon,
+      forcedWidth,
+      ...form ? { form } : {},
+      type,
+      ...otherProps,
+      ref,
+      children: [
+        loading && /* @__PURE__ */ jsx(LoaderContainer, { children: /* @__PURE__ */ jsx(Loader, { color: "liquorice", height: "16" }) }),
+        /* @__PURE__ */ jsxs(ContentContainer, { icon, $loading: loading, children: [
+          !trailingIcon && icon && /* @__PURE__ */ jsx(
+            IconContainer,
+            {
+              trailingIcon,
+              render: icon,
+              size: smallButton ? 16 : 24,
+              color: "liquorice"
+            }
+          ),
+          /* @__PURE__ */ jsx(ChildrenContainer, { className: "childrenContainer", children }),
+          trailingIcon && icon && textBtn && /* @__PURE__ */ jsx(
+            IconContainer,
+            {
+              trailingIcon,
+              render: icon,
+              size: smallButton ? 16 : 24,
+              color: "liquorice",
+              className: "iconContainer"
+            }
+          )
+        ] })
+      ]
+    }
+  );
 });
-Button.displayName = 'Button';
-const Container = styled(Box)(({ disabled, $loading, primary, secondary, forcedWidth, fallbackStyle, textBtn, smallButton, }) => css `
+Button.displayName = "Button";
+const Container = styled(Box)(
+  ({
+    disabled,
+    $loading,
+    primary,
+    secondary,
+    forcedWidth,
+    fallbackStyle,
+    textBtn,
+    smallButton
+  }) => css`
     position: relative;
     background-color: ${theme.colors.marshmallowPink};
     box-shadow: none;
@@ -25,16 +96,15 @@ const Container = styled(Box)(({ disabled, $loading, primary, secondary, forcedW
     outline: none;
     border-radius: 10000px;
     font-weight: ${theme.font.weight.medium};
-    cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};
+    cursor: ${disabled || $loading ? "not-allowed" : "pointer"};
     line-height: 100%;
     font-size: 16px;
-    opacity: ${disabled ? '0.5' : '1'};
-    width: ${forcedWidth ? forcedWidth : 'auto'};
+    opacity: ${disabled ? "0.5" : "1"};
+    width: ${forcedWidth ? forcedWidth : "auto"};
 
     ${focusOutlineStyle}
 
-    ${primary &&
-    css `
+    ${primary && css`
       color: ${theme.colors.liquorice};
 
       &:hover {
@@ -44,8 +114,7 @@ const Container = styled(Box)(({ disabled, $loading, primary, secondary, forcedW
         background-color: ${theme.colors.lollipop};
       }
     `}
-    ${secondary &&
-    css `
+    ${secondary && css`
       background-color: ${theme.colors.oatmeal};
 
       &:hover {
@@ -55,8 +124,7 @@ const Container = styled(Box)(({ disabled, $loading, primary, secondary, forcedW
         background-color: ${theme.colors.custard};
       }
     `}
-  ${fallbackStyle &&
-    css `
+  ${fallbackStyle && css`
       background-color: ${theme.colors.cream};
 
       &:hover {
@@ -66,8 +134,7 @@ const Container = styled(Box)(({ disabled, $loading, primary, secondary, forcedW
         background-color: ${theme.colors.mascarpone};
       }
     `}
-  ${smallButton &&
-    css `
+  ${smallButton && css`
       padding: 0 10px;
       min-width: 54px;
       font-size: 14px;
@@ -80,8 +147,7 @@ const Container = styled(Box)(({ disabled, $loading, primary, secondary, forcedW
         margin: 0 5px 0 0;
       }
     `}
-  ${textBtn &&
-    css `
+  ${textBtn && css`
       background-color: transparent;
       padding: 0;
       border-radius: 0;
@@ -95,8 +161,9 @@ const Container = styled(Box)(({ disabled, $loading, primary, secondary, forcedW
         color: ${theme.colors.sesame};
       }
     `}
-  `);
-const LoaderContainer = styled.div `
+  `
+);
+const LoaderContainer = styled.div`
   position: absolute;
   top: 0;
   bottom: 0;
@@ -106,17 +173,20 @@ const LoaderContainer = styled.div `
   align-items: center;
   justify-content: center;
 `;
-const ContentContainer = styled.div `
+const ContentContainer = styled.div`
   display: flex;
   align-items: center;
-  justify-content: ${({ icon }) => (icon ? 'space-evenly' : 'center')};
-  opacity: ${({ $loading }) => ($loading ? '0' : '1')};
+  justify-content: ${({ icon }) => icon ? "space-evenly" : "center"};
+  opacity: ${({ $loading }) => $loading ? "0" : "1"};
 `;
-const IconContainer = styled(IconComponent)(({ trailingIcon }) => css `
-    margin: ${trailingIcon ? '0 0 0 10px' : '0 10px 0 0'};
-  `);
-const ChildrenContainer = styled.div `
+const IconContainer = styled(Icon)(
+  ({ trailingIcon }) => css`
+    margin: ${trailingIcon ? "0 0 0 10px" : "0 10px 0 0"};
+  `
+);
+const ChildrenContainer = styled.div`
   padding: 16px 0;
   flex-grow: 1;
 `;
-//# sourceMappingURL=Button.js.map
+
+export { Button };

package/dist/Card/Card.js

@@ -1,30 +1,79 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
-import { theme } from '../theme';
-import { Box } from '../Box';
-import { Icon } from '../Icon';
-import { Text } from '../Text';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { darken } from 'polished';
-import { focusOutlineStyle } from '../utils/focusOutline';
-export const Card = ({ children, leadingIcon, title, body, visual, tag, cardOnClickAction, rightAction, buttonAction, fallbackStyle = false, visualHeight = '', className = '', maxWidth = '', marginX = '', marginY = '', narrow = false, wide = false, ...otherProps }) => {
-    const addChildMargin = (!!leadingIcon || !!title || !!body) && children;
-    const isNotClickable = !cardOnClickAction;
-    return (React.createElement(Container, { className: className, maxWidth: maxWidth, marginX: marginX, marginY: marginY, narrow: narrow, wide: wide, visual: visual, fallbackStyle: fallbackStyle, isNotClickable: isNotClickable, onClick: cardOnClickAction, tabIndex: isNotClickable ? undefined : 0, ...otherProps },
-        tag && visual && React.createElement(TagWrapper, null, tag),
-        visual && (React.createElement(VisualWrapper, { visualHeight: visualHeight },
-            React.createElement(Visual, { visualUrl: visual, visualHeight: visualHeight }))),
-        React.createElement(Box, { p: visual ? '16px' : { custom: '0px' } },
-            React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "space-between" },
-                React.createElement(Box, { flex: true, alignItems: "center" },
-                    leadingIcon && (React.createElement(Icon, { mr: "12px", render: leadingIcon, size: 24, color: "liquorice" })),
-                    React.createElement(Box, null,
-                        title && (React.createElement(Text, { typo: "headline-regular", color: "liquorice" }, title)),
-                        body && (React.createElement(Text, { typo: "body-regular", color: "sesame" }, body)))),
-                rightAction && rightAction),
-            React.createElement(Box, { mt: addChildMargin ? '16px' : { custom: '0px' } }, children),
-            buttonAction && React.createElement(Box, { mt: "16px" }, buttonAction))));
+import styled, { css } from 'styled-components';
+import { Box } from '../Box/Box.js';
+import { Icon } from '../Icon/Icon.js';
+import { Text } from '../Text/Text.js';
+import { theme } from '../theme.js';
+import { focusOutlineStyle } from '../utils/focusOutline.js';
+
+const Card = ({
+  children,
+  leadingIcon,
+  title,
+  body,
+  visual,
+  tag,
+  cardOnClickAction,
+  rightAction,
+  buttonAction,
+  fallbackStyle = false,
+  visualHeight = "",
+  className = "",
+  maxWidth = "",
+  marginX = "",
+  marginY = "",
+  narrow = false,
+  wide = false,
+  ...otherProps
+}) => {
+  const addChildMargin = (!!leadingIcon || !!title || !!body) && children;
+  const isNotClickable = !cardOnClickAction;
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      className,
+      maxWidth,
+      marginX,
+      marginY,
+      narrow,
+      wide,
+      visual,
+      fallbackStyle,
+      isNotClickable,
+      onClick: cardOnClickAction,
+      tabIndex: isNotClickable ? void 0 : 0,
+      ...otherProps,
+      children: [
+        tag && visual && /* @__PURE__ */ jsx(TagWrapper, { children: tag }),
+        visual && /* @__PURE__ */ jsx(VisualWrapper, { visualHeight, children: /* @__PURE__ */ jsx(Visual, { visualUrl: visual, visualHeight }) }),
+        /* @__PURE__ */ jsxs(Box, { p: visual ? "16px" : { custom: "0px" }, children: [
+          /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", children: [
+              leadingIcon && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  mr: "12px",
+                  render: leadingIcon,
+                  size: 24,
+                  color: "liquorice"
+                }
+              ),
+              /* @__PURE__ */ jsxs(Box, { children: [
+                title && /* @__PURE__ */ jsx(Text, { typo: "headline-regular", color: "liquorice", children: title }),
+                body && /* @__PURE__ */ jsx(Text, { typo: "body-regular", color: "sesame", children: body })
+              ] })
+            ] }),
+            rightAction && rightAction
+          ] }),
+          /* @__PURE__ */ jsx(Box, { mt: addChildMargin ? "16px" : { custom: "0px" }, children }),
+          buttonAction && /* @__PURE__ */ jsx(Box, { mt: "16px", children: buttonAction })
+        ] })
+      ]
+    }
+  );
 };
-const Container = styled(Box) `
+const Container = styled(Box)`
   background: ${({ fallbackStyle }) => fallbackStyle ? theme.colors.cream : theme.colors.custard};
   box-sizing: border-box;
   border-radius: 16px;
@@ -35,38 +84,41 @@ const Container = styled(Box) `
   margin-bottom: ${(p) => p.marginY};
   margin-left: ${(p) => p.marginX};
 
-  padding: ${({ visual }) => (visual ? '0px' : '16px')};
+  padding: ${({ visual }) => visual ? "0px" : "16px"};
   position: relative;
   overflow: hidden;
 
-  ${({ isNotClickable, fallbackStyle }) => !isNotClickable &&
-    css `
+  ${({ isNotClickable, fallbackStyle }) => !isNotClickable && css`
       cursor: pointer;
       &:hover {
-        background: ${darken(0.1, fallbackStyle ? theme.colors.cream : theme.colors.custard)};
+        background: ${darken(
+  0.1,
+  fallbackStyle ? theme.colors.cream : theme.colors.custard
+)};
       }
 
       ${focusOutlineStyle}
     `};
 `;
-const TagWrapper = styled(Box) `
+const TagWrapper = styled(Box)`
   position: absolute;
   top: 12px;
   right: 12px;
 `;
-const VisualWrapper = styled(Box) `
+const VisualWrapper = styled(Box)`
   width: 100%;
   margin-top: -16px;
 
   ${({ visualHeight }) => visualHeight && `height: ${visualHeight};`}
 `;
-const Visual = styled(Box) `
+const Visual = styled(Box)`
   width: 100%;
   background-image: url('${(p) => p.visualUrl}');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
 
-  ${({ visualHeight }) => visualHeight ? `height: ${visualHeight};` : 'padding-top: 100%;'}
+  ${({ visualHeight }) => visualHeight ? `height: ${visualHeight};` : "padding-top: 100%;"}
 `;
-//# sourceMappingURL=Card.js.map
+
+export { Card };

package/dist/CheckBox/CheckBox.js

@@ -1,26 +1,46 @@
-import React, { forwardRef } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { focusOutline } from '../utils/focusOutline';
-import { Text } from '../Text';
-import { theme } from '../theme';
-import { useUniqueId } from '../utils/id';
-export const CheckBox = forwardRef(function CheckBox({ id: idProp, checked, children, toggle, error, errorMsg }, ref) {
+import { focusOutline } from '../utils/focusOutline.js';
+import { Text } from '../Text/Text.js';
+import { theme } from '../theme.js';
+import { useUniqueId } from '../utils/id.js';
+
+const CheckBox = forwardRef(
+  function CheckBox2({ id: idProp, checked, children, toggle, error, errorMsg }, ref) {
     const id = useUniqueId(idProp);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(BoxContainer, { id: id },
-            React.createElement(Text, { tag: "span", typo: "base", color: error ? 'strawberry' : 'liquorice' }, children),
-            React.createElement("input", { ref: ref, type: "checkbox", checked: checked, onChange: toggle }),
-            React.createElement(Checkmark, { error: error })),
-        error && errorMsg && React.createElement(ErrorBox, null, errorMsg)));
-});
-const Checkmark = styled.span `
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(BoxContainer, { id, children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            tag: "span",
+            typo: "base",
+            color: error ? "strawberry" : "liquorice",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            type: "checkbox",
+            checked,
+            onChange: toggle
+          }
+        ),
+        /* @__PURE__ */ jsx(Checkmark, { error })
+      ] }),
+      error && errorMsg && /* @__PURE__ */ jsx(ErrorBox, { children: errorMsg })
+    ] });
+  }
+);
+const Checkmark = styled.span`
   position: absolute;
   left: 0;
   width: 24px;
   height: 24px;
-  border: ${({ error }) => error
-    ? `solid 2px ${theme.colors.strawberry}`
-    : `solid 2px ${theme.colors.liquorice}`};
+  border: ${({ error }) => error ? `solid 2px ${theme.colors.strawberry}` : `solid 2px ${theme.colors.liquorice}`};
   box-sizing: border-box;
   border-radius: 1px;
 
@@ -54,7 +74,7 @@ const Checkmark = styled.span `
     transform: rotate(43deg);
   }
 `;
-const BoxContainer = styled.label `
+const BoxContainer = styled.label`
   position: relative;
   display: flex;
   align-items: flex-start;
@@ -99,9 +119,10 @@ const BoxContainer = styled.label `
     border-radius: 6px;
   }
 `;
-const ErrorBox = styled.span `
+const ErrorBox = styled.span`
   padding-top: 8px;
   font-size: 12px;
   color: ${theme.colors.strawberry};
 `;
-//# sourceMappingURL=CheckBox.js.map
+
+export { CheckBox };

package/dist/CheckBoxGroup/CheckBoxGroup.js

@@ -1,11 +1,27 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import styled from 'styled-components';
-import { Box } from '../Box';
-import { CheckBox } from '../CheckBox';
-export const CheckBoxGroup = ({ list, onToggle, ...marginProps }) => (React.createElement(Container, null, list.map((item) => (React.createElement(CheckBox, { key: item.id, id: String(item.id), checked: item.checked, toggle: () => onToggle(item.id), ...marginProps }, item.label)))));
-const Container = styled(Box) `
+import { Box } from '../Box/Box.js';
+import { CheckBox } from '../CheckBox/CheckBox.js';
+
+const CheckBoxGroup = ({
+  list,
+  onToggle,
+  ...marginProps
+}) => /* @__PURE__ */ jsx(Container, { children: list.map((item) => /* @__PURE__ */ jsx(
+  CheckBox,
+  {
+    id: String(item.id),
+    checked: item.checked,
+    toggle: () => onToggle(item.id),
+    ...marginProps,
+    children: item.label
+  },
+  item.id
+)) });
+const Container = styled(Box)`
   display: flex;
   flex-direction: column;
   gap: 16px;
 `;
-//# sourceMappingURL=CheckBoxGroup.js.map
+
+export { CheckBoxGroup };

package/dist/Chip/Chip.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, ButtonHTMLAttributes } from 'react';
+import React, { ButtonHTMLAttributes, FC, ReactNode } from 'react';
 import { MarginProps } from '../utils/space';
 type Props = {
     children: ReactNode;