@mrshmllw/smores-react 4.0.0 → 5.0.0

package/README.md

@@ -131,7 +131,6 @@ yalc remove --all
 * [Link](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Link)
 * [Loader](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Loader)
 * [Logo](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Logo)
-* [Message](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Message) (deprecated - use Support Message instead)
 * [Modal](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Modal)
 * [NumberInput](https://github.com/marshmallow-insurance/smores-react/tree/master/src/NumberInput)
 * [Pagination](https://github.com/marshmallow-insurance/smores-react/tree/master/src/Pagination)
@@ -159,7 +158,6 @@ const App = () => (
   <>
     <Text>Hey you</Text>
     <Button
-      color="green"
       onClick={() => console.log('thanks for clicking :)')}
     >
       Click me!

package/dist/Accordion/Accordion.js

@@ -1,49 +1,107 @@
-import React, { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import styled, { css } from 'styled-components';
-import { Box } from '../Box';
-import { Icon } from '../Icon';
-import { theme } from '../theme';
-import { Text } from '../Text';
-export const Accordion = ({ title, children, onToggle, filledBackground, defaultIsOpen = false, borderTop = false, borderColor = 'oatmeal', backgroundColor = 'custard', subTitle, fullBorder = false, ...marginProps }) => {
-    const [isOpen, setIsOpen] = useState(defaultIsOpen);
-    const px = fullBorder ? '16px' : '0';
-    const handleToggle = () => {
-        const nextOpenState = !isOpen;
-        onToggle?.(nextOpenState);
-        setIsOpen(nextOpenState);
-    };
-    return (React.createElement(Wrapper, { borderTop: borderTop, fullBorder: fullBorder, filledBackground: filledBackground, borderColor: borderColor, backgroundColor: backgroundColor, ...marginProps },
-        React.createElement(TopContainer, { flex: true, alignItems: "center", justifyContent: "space-between", onClick: handleToggle, py: "16px", pr: "16px", pl: px },
-            React.createElement(TitleContainer, null,
-                React.createElement(Text, { tag: "h2", typo: "headline-regular", color: "liquorice" }, title),
-                subTitle && (React.createElement(Text, { tag: "label", color: "liquorice", typo: "label", mt: { custom: 4 } }, subTitle))),
-            React.createElement(CaretIcon, { render: "caret", size: 24, color: "marzipan", isOpen: isOpen, borderTop: borderTop })),
-        isOpen && (React.createElement(Box, { pt: "12px", pb: "16px", px: px }, children))));
+import { Box } from '../Box/Box.js';
+import { Icon } from '../Icon/Icon.js';
+import { theme } from '../theme.js';
+import { Text } from '../Text/Text.js';
+
+const Accordion = ({
+  title,
+  children,
+  onToggle,
+  filledBackground,
+  defaultIsOpen = false,
+  borderTop = false,
+  borderColor = "oatmeal",
+  backgroundColor = "custard",
+  subTitle,
+  fullBorder = false,
+  ...marginProps
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultIsOpen);
+  const px = fullBorder ? "16px" : "0";
+  const handleToggle = () => {
+    const nextOpenState = !isOpen;
+    onToggle?.(nextOpenState);
+    setIsOpen(nextOpenState);
+  };
+  return /* @__PURE__ */ jsxs(
+    Wrapper,
+    {
+      borderTop,
+      fullBorder,
+      filledBackground,
+      borderColor,
+      backgroundColor,
+      ...marginProps,
+      children: [
+        /* @__PURE__ */ jsxs(
+          TopContainer,
+          {
+            flex: true,
+            alignItems: "center",
+            justifyContent: "space-between",
+            onClick: handleToggle,
+            py: "16px",
+            pr: "16px",
+            pl: px,
+            children: [
+              /* @__PURE__ */ jsxs(TitleContainer, { children: [
+                /* @__PURE__ */ jsx(Text, { tag: "h2", typo: "headline-regular", color: "liquorice", children: title }),
+                subTitle && /* @__PURE__ */ jsx(Text, { tag: "label", color: "liquorice", typo: "label", mt: { custom: 4 }, children: subTitle })
+              ] }),
+              /* @__PURE__ */ jsx(
+                CaretIcon,
+                {
+                  render: "caret",
+                  size: 24,
+                  color: "marzipan",
+                  isOpen,
+                  borderTop
+                }
+              )
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx(Box, { pt: "12px", pb: "16px", px, children })
+      ]
+    }
+  );
 };
-const Wrapper = styled(Box)(({ borderTop, fullBorder, filledBackground, borderColor = 'oatmeal', backgroundColor = 'custard', }) => css `
+const Wrapper = styled(Box)(
+  ({
+    borderTop,
+    fullBorder,
+    filledBackground,
+    borderColor = "oatmeal",
+    backgroundColor = "custard"
+  }) => css`
     border-bottom: 1px solid ${theme.colors[borderColor]};
     ${borderTop && `border-top: 1px solid ${theme.colors[borderColor]};`}
 
-    ${fullBorder &&
-    css `
+    ${fullBorder && css`
       border: 1px solid ${theme.colors[borderColor]};
       border-radius: 16px;
     `}
 
-    ${filledBackground &&
-    css `
+    ${filledBackground && css`
       background-color: ${theme.colors[backgroundColor]};
     `}
-  `);
-const TitleContainer = styled.div `
+  `
+);
+const TitleContainer = styled.div`
   display: flex;
   flex-direction: column;
 `;
-const TopContainer = styled(Box) `
+const TopContainer = styled(Box)`
   cursor: pointer;
 `;
-const CaretIcon = styled(Icon)(({ isOpen }) => css `
-    transform: ${isOpen ? 'rotate(180deg)' : 'rotate(0deg)'};
+const CaretIcon = styled(Icon)(
+  ({ isOpen }) => css`
+    transform: ${isOpen ? "rotate(180deg)" : "rotate(0deg)"};
     transition: transform 0.6s ease;
-  `);
-//# sourceMappingURL=Accordion.js.map
+  `
+);
+
+export { Accordion };

package/dist/ActionDropdown/ActionDropdown.js

@@ -1,21 +1,57 @@
-import React, { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import styled, { css } from 'styled-components';
-import { Box } from '../Box';
-import { Icon } from '../Icon';
-import { Text } from '../Text';
-import { List } from './List';
-import { theme } from '../theme';
-export const ActionDropdown = ({ id, className = '', label, value, list, onSelect, ...marginProps }) => {
-    const [open, setOpen] = useState(false);
-    return (React.createElement(Container, { id: id, className: className, onClick: () => setOpen((currentOpen) => !currentOpen), ...marginProps },
-        label && (React.createElement(Text, { tag: "label", color: "sesame", typo: "label" }, label)),
-        React.createElement(Label, { text: value.textColor ?? 'liquorice', bg: value.bgColor ?? 'sesame' },
-            React.createElement(SelectedOption, null, value.label),
-            React.createElement(Icon, { render: "caret", color: value.textColor ?? 'sesame', size: 24, rotate: open ? 180 : 0 })),
-        React.createElement(OuterContainer, { open: open },
-            React.createElement(List, { options: list, selectOption: onSelect }))));
+import { Box } from '../Box/Box.js';
+import { Icon } from '../Icon/Icon.js';
+import { Text } from '../Text/Text.js';
+import { List } from './List.js';
+import { theme } from '../theme.js';
+
+const ActionDropdown = ({
+  id,
+  className = "",
+  label,
+  value,
+  list,
+  onSelect,
+  ...marginProps
+}) => {
+  const [open, setOpen] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      id,
+      className,
+      onClick: () => setOpen((currentOpen) => !currentOpen),
+      ...marginProps,
+      children: [
+        label && /* @__PURE__ */ jsx(Text, { tag: "label", color: "sesame", typo: "label", children: label }),
+        /* @__PURE__ */ jsxs(
+          Label,
+          {
+            text: value.textColor ?? "liquorice",
+            bg: value.bgColor ?? "sesame",
+            children: [
+              /* @__PURE__ */ jsx(SelectedOption, { children: value.label }),
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  render: "caret",
+                  color: value.textColor ?? "sesame",
+                  size: 24,
+                  rotate: open ? 180 : 0
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(OuterContainer, { open, children: /* @__PURE__ */ jsx(List, { options: list, selectOption: onSelect }) })
+      ]
+    }
+  );
 };
-const Label = styled.div(({ text, bg }) => css `
+const Label = styled.div(
+  ({ text, bg }) => css`
     color: ${theme.colors[text]};
     background-color: ${theme.colors[bg]};
     position: relative;
@@ -29,15 +65,16 @@ const Label = styled.div(({ text, bg }) => css `
     padding: 16px 16px 14px;
     box-sizing: border-box;
     user-select: none;
-  `);
-const SelectedOption = styled.span `
+  `
+);
+const SelectedOption = styled.span`
   font-size: 14px;
   font-weight: bold;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 `;
-const Container = styled(Box) `
+const Container = styled(Box)`
   position: relative;
   display: block;
   width: 210px;
@@ -47,16 +84,19 @@ const Container = styled(Box) `
   outline: none;
   border-radius: 8px;
 `;
-const OuterContainer = styled.div(({ open }) => css `
+const OuterContainer = styled.div(
+  ({ open }) => css`
     position: absolute;
     width: 100%;
     border-radius: 12px;
     margin-top: 8px;
-    display: ${open ? 'block' : 'none'};
-    max-height: ${open ? '235px' : '48px'};
+    display: ${open ? "block" : "none"};
+    max-height: ${open ? "235px" : "48px"};
     background-color: ${theme.colors.custard};
-    overflow-y: ${open ? 'auto' : 'hidden'};
+    overflow-y: ${open ? "auto" : "hidden"};
     z-index: 4;
     transition: all 0.2s ease-in-out;
-  `);
-//# sourceMappingURL=ActionDropdown.js.map
+  `
+);
+
+export { ActionDropdown };

package/dist/ActionDropdown/List.js

@@ -1,14 +1,15 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import styled from 'styled-components';
-import { theme } from '../theme';
+import { theme } from '../theme.js';
 import { darken } from 'polished';
-export const List = ({ options, selectOption }) => (React.createElement(Container, null, options.map((option) => (React.createElement(ListItem, { key: option.value, onClick: () => selectOption(option) }, option.label)))));
-const Container = styled.ul `
+
+const List = ({ options, selectOption }) => /* @__PURE__ */ jsx(Container, { children: options.map((option) => /* @__PURE__ */ jsx(ListItem, { onClick: () => selectOption(option), children: option.label }, option.value)) });
+const Container = styled.ul`
   padding: 0;
   margin: 0;
   max-height: 188px;
 `;
-const ListItem = styled.li `
+const ListItem = styled.li`
   padding: 16px 24px;
   text-align: left;
   overflow: hidden;
@@ -27,4 +28,5 @@ const ListItem = styled.li `
     border-bottom: none;
   }
 `;
-//# sourceMappingURL=List.js.map
+
+export { List };

package/dist/Banner/BannerContainer.js

@@ -1,38 +1,46 @@
-import React, { createContext, useState, useCallback, useContext, } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useContext, useState, useCallback } from 'react';
 import styled from 'styled-components';
-import { BannerItem } from './BannerItem';
-export const BannerContext = createContext({
-    addBanner: () => {
-        throw new Error('Please add the BannerContainer to your application');
-    },
+import { BannerItem } from './BannerItem.js';
+
+const BannerContext = createContext({
+  addBanner: () => {
+    throw new Error("Please add the BannerContainer to your application");
+  }
 });
-export const useBannerContext = () => useContext(BannerContext);
-export const BannerContainer = ({ children }) => {
-    let bannerId = 0;
-    const [banner, setBanner] = useState([]);
-    // create banner unique ID
-    const newBannerId = useCallback(() => {
-        const newId = `MM_BANNER_${bannerId}`;
-        bannerId++;
-        return newId;
-    }, [bannerId]);
-    const addBanner = (banner) => {
-        const newBanner = {
-            ...banner,
-            id: newBannerId(),
-        };
-        setBanner([newBanner]);
+const useBannerContext = () => useContext(BannerContext);
+const BannerContainer = ({ children }) => {
+  let bannerId = 0;
+  const [banner, setBanner] = useState([]);
+  const newBannerId = useCallback(() => {
+    const newId = `MM_BANNER_${bannerId}`;
+    bannerId++;
+    return newId;
+  }, [bannerId]);
+  const addBanner = (banner2) => {
+    const newBanner = {
+      ...banner2,
+      id: newBannerId()
     };
-    const deleteBanner = (id) => {
-        setBanner(banner.filter((banner) => banner.id !== id));
-    };
-    return (React.createElement(BannerContext.Provider, { value: {
-            addBanner,
-        } },
+    setBanner([newBanner]);
+  };
+  const deleteBanner = (id) => {
+    setBanner(banner.filter((banner2) => banner2.id !== id));
+  };
+  return /* @__PURE__ */ jsxs(
+    BannerContext.Provider,
+    {
+      value: {
+        addBanner
+      },
+      children: [
         children,
-        React.createElement(BannerWrapper, null, banner.map((banner) => (React.createElement(BannerItem, { key: banner.id, ...banner, deleteBanner: deleteBanner }))))));
+        /* @__PURE__ */ jsx(BannerWrapper, { children: banner.map((banner2) => /* @__PURE__ */ jsx(BannerItem, { ...banner2, deleteBanner }, banner2.id)) })
+      ]
+    }
+  );
 };
-const BannerWrapper = styled.div `
+const BannerWrapper = styled.div`
   position: fixed;
   top: 0;
   left: 0;
@@ -40,4 +48,5 @@ const BannerWrapper = styled.div `
   width: 100%;
   z-index: 99;
 `;
-//# sourceMappingURL=BannerContainer.js.map
+
+export { BannerContainer, BannerContext, useBannerContext };

package/dist/Banner/BannerItem.js

@@ -1,64 +1,122 @@
-import { Box } from '../Box';
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box } from '../Box/Box.js';
 import styled, { css } from 'styled-components';
-import { Icon } from '../Icon';
-import { theme } from '../theme';
-import { Text } from '../Text';
-import { useTimeout } from '../hooks';
+import { Icon } from '../Icon/Icon.js';
+import { theme } from '../theme.js';
+import { Text } from '../Text/Text.js';
+import 'react';
+import { useTimeout } from '../hooks/useTimeout/index.js';
+
 const styles = {
-    upsell: {
-        iconColor: 'liquorice',
-        backgroundColor: theme.colors.marshmallowPink,
-        textColor: 'liquorice',
-    },
-    critical: {
-        iconColor: 'mascarpone',
-        backgroundColor: theme.colors.strawberry,
-        textColor: 'mascarpone',
-    },
-    general: {
-        iconColor: 'mascarpone',
-        backgroundColor: theme.colors.liquorice,
-        textColor: 'mascarpone',
-    },
-    success: {
-        iconColor: 'mascarpone',
-        backgroundColor: theme.colors.apple,
-        textColor: 'mascarpone',
-    },
+  upsell: {
+    iconColor: "liquorice",
+    backgroundColor: theme.colors.marshmallowPink,
+    textColor: "liquorice"
+  },
+  critical: {
+    iconColor: "mascarpone",
+    backgroundColor: theme.colors.strawberry,
+    textColor: "mascarpone"
+  },
+  general: {
+    iconColor: "mascarpone",
+    backgroundColor: theme.colors.liquorice,
+    textColor: "mascarpone"
+  },
+  success: {
+    iconColor: "mascarpone",
+    backgroundColor: theme.colors.apple,
+    textColor: "mascarpone"
+  }
 };
-export const BannerItem = ({ type, autoCloseTime = 4, id, message, topOffset, exploreAction, showExploreText, showExploreIcon, leadingIcon, canManuallyClose, showCloseIcon, deleteBanner, noTimeout, }) => {
-    const autoCloseBaner = () => {
-        if (noTimeout)
-            return;
-        if (type !== 'critical')
-            return deleteBanner(id);
-        else {
-            return;
-        }
-    };
-    useTimeout(() => autoCloseBaner(), autoCloseTime * 1000);
-    const textColor = styles[type].textColor;
-    const iconColor = styles[type].iconColor;
-    return (React.createElement(BannerWrapper, { p: "24px", mt: { custom: topOffset }, key: id, flex: true, justifyContent: "space-between", type: type },
-        React.createElement(Box, { flex: true, alignItems: "center" },
-            leadingIcon && (React.createElement(Icon, { mr: "12px", render: leadingIcon, size: 24, color: iconColor })),
-            React.createElement(Text, { typo: "headline-small", color: textColor }, message)),
-        React.createElement(Box, { flex: true, alignItems: "center" },
-            canManuallyClose && (React.createElement(GenericButton, { onClick: () => deleteBanner(id), "aria-label": `close banner ${message}` }, showCloseIcon ? (React.createElement(Icon, { render: "cross", size: 16, color: iconColor })) : (React.createElement(UnderlinedText, { tag: "span", typo: "desc-medium", color: textColor }, "Dismiss")))),
-            exploreAction && (React.createElement(GenericButton, { onClick: exploreAction, "aria-label": `cta ${message}` },
-                React.createElement(Box, { flex: true, alignItems: "center" },
-                    showExploreText && (React.createElement(UnderlinedText, { ml: "12px", tag: "span", typo: "desc-medium", color: textColor }, "Explore")),
-                    showExploreIcon && (React.createElement(Icon, { render: "arrow", ml: "12px", size: 24, color: iconColor, rotate: 180 }))))))));
+const BannerItem = ({
+  type,
+  autoCloseTime = 4,
+  id,
+  message,
+  topOffset,
+  exploreAction,
+  showExploreText,
+  showExploreIcon,
+  leadingIcon,
+  canManuallyClose,
+  showCloseIcon,
+  deleteBanner,
+  noTimeout
+}) => {
+  const autoCloseBaner = () => {
+    if (noTimeout)
+      return;
+    if (type !== "critical")
+      return deleteBanner(id);
+    else {
+      return;
+    }
+  };
+  useTimeout(() => autoCloseBaner(), autoCloseTime * 1e3);
+  const textColor = styles[type].textColor;
+  const iconColor = styles[type].iconColor;
+  return /* @__PURE__ */ jsxs(
+    BannerWrapper,
+    {
+      p: "24px",
+      mt: { custom: topOffset },
+      flex: true,
+      justifyContent: "space-between",
+      type,
+      children: [
+        /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", children: [
+          leadingIcon && /* @__PURE__ */ jsx(Icon, { mr: "12px", render: leadingIcon, size: 24, color: iconColor }),
+          /* @__PURE__ */ jsx(Text, { typo: "headline-small", color: textColor, children: message })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", children: [
+          canManuallyClose && /* @__PURE__ */ jsx(
+            GenericButton,
+            {
+              onClick: () => deleteBanner(id),
+              "aria-label": `close banner ${message}`,
+              children: showCloseIcon ? /* @__PURE__ */ jsx(Icon, { render: "cross", size: 16, color: iconColor }) : /* @__PURE__ */ jsx(UnderlinedText, { tag: "span", typo: "desc-medium", color: textColor, children: "Dismiss" })
+            }
+          ),
+          exploreAction && /* @__PURE__ */ jsx(GenericButton, { onClick: exploreAction, "aria-label": `cta ${message}`, children: /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", children: [
+            showExploreText && /* @__PURE__ */ jsx(
+              UnderlinedText,
+              {
+                ml: "12px",
+                tag: "span",
+                typo: "desc-medium",
+                color: textColor,
+                children: "Explore"
+              }
+            ),
+            showExploreIcon && /* @__PURE__ */ jsx(
+              Icon,
+              {
+                render: "arrow",
+                ml: "12px",
+                size: 24,
+                color: iconColor,
+                rotate: 180
+              }
+            )
+          ] }) })
+        ] })
+      ]
+    },
+    id
+  );
 };
-const BannerWrapper = styled(Box)(({ type }) => css `
+const BannerWrapper = styled(Box)(
+  ({ type }) => css`
     border-radius: 0px 0px 16px 16px;
     background-color: ${styles[type].backgroundColor};
-  `);
-const GenericButton = styled.button `
+  `
+);
+const GenericButton = styled.button`
   cursor: pointer;
 `;
-const UnderlinedText = styled(Text) `
+const UnderlinedText = styled(Text)`
   text-decoration: underline;
 `;
-//# sourceMappingURL=BannerItem.js.map
+
+export { BannerItem };

package/dist/Banner/hooks.js

@@ -1,6 +1,8 @@
-import { useBannerContext } from './BannerContainer';
-export const useBanner = () => {
-    const { addBanner } = useBannerContext();
-    return { addBanner };
+import { useBannerContext } from './BannerContainer.js';
+
+const useBanner = () => {
+  const { addBanner } = useBannerContext();
+  return { addBanner };
 };
-//# sourceMappingURL=hooks.js.map
+
+export { useBanner };

package/dist/Box/Box.js

@@ -1,11 +1,13 @@
 import styled from 'styled-components';
-import { flex } from '../utils/flex';
-import { measure } from '../utils/measure';
-import { margin, padding } from '../utils/space';
-export const Box = styled.div `
+import { flex } from '../utils/flex.js';
+import { measure } from '../utils/measure.js';
+import { margin, padding } from '../utils/space.js';
+
+const Box = styled.div`
   ${margin};
   ${padding};
   ${flex};
   ${measure};
 `;
-//# sourceMappingURL=Box.js.map
+
+export { Box };