@mrshmllw/smores-react 4.0.1 → 6.0.0

package/dist/RadioGroup/RadioItem.js

@@ -1,46 +1,86 @@
-import React, { forwardRef } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { theme } from '../theme';
-import { useUniqueId } from '../utils/id';
-import { Box } from '../Box';
-import { Icon } from '../Icon';
-import { Text } from '../Text';
-import { RadioElement } from './RadioElement';
-import { ITEM_GAP } from './constants';
-export const RadioItem = forwardRef(function RadioItem({ name, visual, icon, iconPosition = 'center', label, value, checked, onChange, onBlur, displayType, isError, fallbackStyle, bodyCopy, }, ref) {
+import { theme } from '../theme.js';
+import { useUniqueId } from '../utils/id.js';
+import { Box } from '../Box/Box.js';
+import { Icon } from '../Icon/Icon.js';
+import { Text } from '../Text/Text.js';
+import { RadioElement } from './RadioElement.js';
+import { ITEM_GAP } from './constants.js';
+
+const RadioItem = forwardRef(
+  function RadioItem2({
+    name,
+    visual,
+    icon,
+    iconPosition = "center",
+    label,
+    value,
+    checked,
+    onChange,
+    onBlur,
+    displayType,
+    isError,
+    fallbackStyle,
+    bodyCopy
+  }, ref) {
     const id = useUniqueId();
-    return (React.createElement(Wrapper, { htmlFor: id, checked: checked, displayType: displayType, "data-testid": value, isError: isError, fallbackStyle: fallbackStyle },
-        visual && !icon && (React.createElement(VisualWrapper, null,
-            React.createElement(Visual, { visualUrl: visual }))),
-        !visual && icon && (React.createElement(IconWrapper, { iconPosition: iconPosition },
-            React.createElement(Icon, { render: icon, size: 24 }))),
-        React.createElement(Box, { flex: true, alignItems: "center" },
-            React.createElement(RadioElement, { ref: ref, name: name, id: id, value: value, checked: checked, onChange: onChange, onBlur: onBlur, isError: isError, mr: "8px" }),
-            React.createElement(Box, null,
-                React.createElement(RadioText, { isError: isError }, label),
-                bodyCopy && (React.createElement(Box, null,
-                    React.createElement(Text, { typo: "caption" }, bodyCopy)))))));
-});
-const VisualWrapper = styled.div `
+    return /* @__PURE__ */ jsxs(
+      Wrapper,
+      {
+        htmlFor: id,
+        checked,
+        displayType,
+        "data-testid": value,
+        isError,
+        fallbackStyle,
+        children: [
+          visual && !icon && /* @__PURE__ */ jsx(VisualWrapper, { children: /* @__PURE__ */ jsx(Visual, { visualUrl: visual }) }),
+          !visual && icon && /* @__PURE__ */ jsx(IconWrapper, { iconPosition, children: /* @__PURE__ */ jsx(Icon, { render: icon, size: 24 }) }),
+          /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", children: [
+            /* @__PURE__ */ jsx(
+              RadioElement,
+              {
+                ref,
+                name,
+                id,
+                value,
+                checked,
+                onChange,
+                onBlur,
+                isError,
+                mr: "8px"
+              }
+            ),
+            /* @__PURE__ */ jsxs(Box, { children: [
+              /* @__PURE__ */ jsx(RadioText, { isError, children: label }),
+              bodyCopy && /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { typo: "caption", children: bodyCopy }) })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+const VisualWrapper = styled.div`
   width: 100%;
   max-width: 120px;
   margin: 0 auto 8px;
 `;
-const IconWrapper = styled.div `
+const IconWrapper = styled.div`
   display: flex;
   padding-bottom: 12px;
 
-  ${({ iconPosition }) => iconPosition === 'center' &&
-    css `
+  ${({ iconPosition }) => iconPosition === "center" && css`
       justify-content: center;
     `}
 
-  ${({ iconPosition }) => iconPosition === 'start' &&
-    css `
+  ${({ iconPosition }) => iconPosition === "start" && css`
       justify-content: flex-start;
     `}
 `;
-const Visual = styled.div `
+const Visual = styled.div`
   width: 100%;
   padding-top: 100%;
   background-image: url('${(p) => p.visualUrl}');
@@ -48,32 +88,23 @@ const Visual = styled.div `
   background-repeat: no-repeat;
   background-position: center;
 `;
-const Wrapper = styled.label `
+const Wrapper = styled.label`
   display: flex;
   flex-direction: column;
   cursor: pointer;
 
-  ${({ displayType, checked, isError, fallbackStyle }) => css `
-    ${(displayType === 'horizontal-card' || displayType === 'vertical-card') &&
-    css `
+  ${({ displayType, checked, isError, fallbackStyle }) => css`
+    ${(displayType === "horizontal-card" || displayType === "vertical-card") && css`
       border-radius: 12px;
-      background-color: ${fallbackStyle
-        ? theme.colors.cream
-        : theme.colors.custard};
-      padding: ${checked ? '10px' : '12px'};
-      border: ${checked &&
-        (isError
-            ? `2px solid ${theme.colors.strawberry}`
-            : `2px solid ${theme.colors.liquorice}`)};
+      background-color: ${fallbackStyle ? theme.colors.cream : theme.colors.custard};
+      padding: ${checked ? "10px" : "12px"};
+      border: ${checked && (isError ? `2px solid ${theme.colors.strawberry}` : `2px solid ${theme.colors.liquorice}`)};
 
       &:hover {
-        background-color: ${fallbackStyle
-        ? theme.colors.coconut
-        : theme.colors.oatmeal};
+        background-color: ${fallbackStyle ? theme.colors.coconut : theme.colors.oatmeal};
       }
     `}
-    ${displayType === 'horizontal-card' &&
-    css `
+    ${displayType === "horizontal-card" && css`
       width: 100%;
       justify-content: center;
 
@@ -87,11 +118,12 @@ const Wrapper = styled.label `
     `}
   `}
 `;
-const RadioText = styled.span `
+const RadioText = styled.span`
   line-height: 16px;
   font-size: 16px;
   font-weight: ${theme.font.weight.medium};
   color: ${({ isError }) => isError ? theme.colors.strawberry : theme.colors.liquorice};
   margin-top: 4px;
 `;
-//# sourceMappingURL=RadioItem.js.map
+
+export { RadioItem };

package/dist/RadioGroup/constants.js

@@ -1,2 +1,3 @@
-export const ITEM_GAP = 12;
-//# sourceMappingURL=constants.js.map
+const ITEM_GAP = 12;
+
+export { ITEM_GAP };

package/dist/Row/Row.d.ts

@@ -1,10 +1,11 @@
 import { FC } from 'react';
+import { Icons } from 'Icon/iconsList';
 import { Color } from '../theme';
 import { MarginProps } from '../utils/space';
 export type RowProps = {
-    iconLeft?: string;
+    iconLeft?: Icons;
     iconLeftColor?: Color;
-    iconRight?: string;
+    iconRight?: Icons;
     iconRightColor?: Color;
     handleClick?: () => void;
     heading: string;

package/dist/Row/Row.js

@@ -1,30 +1,69 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import styled, { css } from 'styled-components';
-import { theme } from '../theme';
-import { Icon } from '../Icon';
-import { Box } from '../Box';
-import { Text } from '../Text';
-export const Row = ({ iconLeft, iconLeftColor = 'liquorice', iconRight, iconRightColor = 'marzipan', handleClick, heading, subHeading, type, borderTop = true, borderBottom = true, boldHeading, ...marginProps }) => {
-    const windowWidth = screen.width;
-    return (React.createElement(Container, { type: type, iconLeft: iconLeft, borderTop: borderTop, borderBottom: borderBottom, iconRight: iconRight, onClick: handleClick, boldHeading: boldHeading, ...marginProps },
-        iconLeft && (React.createElement(Icon, { render: iconLeft, size: windowWidth > 768 ? 24 : 18, color: iconLeftColor })),
-        React.createElement(Box, null,
-            React.createElement(Text, { tag: "h1", typo: "base" }, heading),
-            React.createElement(Text, { tag: "p", typo: "desc-small", color: "sesame" }, subHeading)),
-        iconRight && (React.createElement(Icon, { className: "iconRight", render: iconRight, size: 24, rotate: iconRight === 'caret' ? -90 : 0, color: iconRightColor }))));
+import { Box } from '../Box/Box.js';
+import { Icon } from '../Icon/Icon.js';
+import { Text } from '../Text/Text.js';
+import { theme } from '../theme.js';
+
+const Row = ({
+  iconLeft,
+  iconLeftColor = "liquorice",
+  iconRight,
+  iconRightColor = "marzipan",
+  handleClick,
+  heading,
+  subHeading,
+  type,
+  borderTop = true,
+  borderBottom = true,
+  boldHeading,
+  ...marginProps
+}) => {
+  const windowWidth = screen.width;
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      type,
+      iconLeft,
+      borderTop,
+      borderBottom,
+      iconRight,
+      onClick: handleClick,
+      boldHeading,
+      ...marginProps,
+      children: [
+        iconLeft && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            render: iconLeft,
+            size: windowWidth > 768 ? 24 : 18,
+            color: iconLeftColor
+          }
+        ),
+        /* @__PURE__ */ jsxs(Box, { children: [
+          /* @__PURE__ */ jsx(Text, { tag: "h1", typo: "base", children: heading }),
+          /* @__PURE__ */ jsx(Text, { tag: "p", typo: "desc-small", color: "sesame", children: subHeading })
+        ] }),
+        iconRight && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: "iconRight",
+            render: iconRight,
+            size: 24,
+            rotate: iconRight === "caret" ? -90 : 0,
+            color: iconRightColor
+          }
+        )
+      ]
+    }
+  );
 };
-const Container = styled(Box)(({ type, iconLeft, borderTop, borderBottom, boldHeading }) => css `
-    border-radius: ${(type === 'first' && `16px 16px 0 0`) ||
-    (type === 'curved' && `16px`) ||
-    (type === 'last' && `0 0 16px 16px`) ||
-    0};
-
-    border-top: ${borderTop && type !== 'curved' && type !== 'first'
-    ? `1px solid ${theme.colors.oatmeal}`
-    : 'none'};
-    border-bottom: ${borderBottom && type !== 'curved' && type !== 'last'
-    ? `1px solid ${theme.colors.oatmeal}`
-    : 'none'};
+const Container = styled(Box)(
+  ({ type, iconLeft, borderTop, borderBottom, boldHeading }) => css`
+    border-radius: ${type === "first" && `16px 16px 0 0` || type === "curved" && `16px` || type === "last" && `0 0 16px 16px` || 0};
+
+    border-top: ${borderTop && type !== "curved" && type !== "first" ? `1px solid ${theme.colors.oatmeal}` : "none"};
+    border-bottom: ${borderBottom && type !== "curved" && type !== "last" ? `1px solid ${theme.colors.oatmeal}` : "none"};
 
     background-color: ${theme.colors.custard};
     display: grid;
@@ -46,5 +85,7 @@ const Container = styled(Box)(({ type, iconLeft, borderTop, borderBottom, boldHe
     @media (min-width: 768px) {
       grid-gap: 24px;
     }
-  `);
-//# sourceMappingURL=Row.js.map
+  `
+);
+
+export { Row };

package/dist/SearchInput/SearchInput.js

@@ -1,62 +1,119 @@
-import React, { forwardRef, useMemo, useState, } from 'react';
-import { Box } from '../Box';
-import { Field } from '../fields/Field';
-import { Input, StyledFrontIcon } from '../fields/components/CommonInput';
-import { useUniqueId } from '../utils/id';
-import { useControllableState } from '../utils/useControlledState';
-import { SearchOptions } from './SearchOptions';
-export const SearchInput = forwardRef(function SearchInput({ id: idProp, name = 'search_input', className = '', placeholder, searchList, showIcon = false, renderAsTitle = false, value, onBlur, onFound, fallbackStyle, resultsRelativePosition = false, resultsBorder = true, ...otherProps }, ref) {
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useMemo } from 'react';
+import { Box } from '../Box/Box.js';
+import { Field } from '../fields/Field/Field.js';
+import { StyledFrontIcon, Input } from '../fields/components/CommonInput.js';
+import { useUniqueId } from '../utils/id.js';
+import { useControllableState } from '../utils/useControlledState.js';
+import { SearchOptions } from './SearchOptions.js';
+
+const SearchInput = forwardRef(
+  function SearchInput2({
+    id: idProp,
+    name = "search_input",
+    className = "",
+    placeholder,
+    searchList,
+    showIcon = false,
+    renderAsTitle = false,
+    value,
+    onBlur,
+    onFound,
+    fallbackStyle,
+    resultsRelativePosition = false,
+    resultsBorder = true,
+    ...otherProps
+  }, ref) {
     const id = useUniqueId(idProp);
     const [showOptions, setShowOptions] = useState(false);
     const [selectedValue, setSelectedValue] = useControllableState({
-        initialState: null,
-        stateProp: value,
+      initialState: null,
+      stateProp: value
     });
     const [searchQuery, setSearchQuery] = useState(null);
     const filteredList = useMemo(() => {
-        if (searchQuery === null || searchQuery === '') {
-            return searchList;
-        }
-        return searchList.filter(({ label }) => label.toLowerCase().includes(searchQuery.toLocaleLowerCase()));
+      if (searchQuery === null || searchQuery === "") {
+        return searchList;
+      }
+      return searchList.filter(
+        ({ label }) => label.toLowerCase().includes(searchQuery.toLocaleLowerCase())
+      );
     }, [searchQuery]);
     const getDisplayedInputText = () => {
-        if (searchQuery !== null) {
-            return searchQuery;
-        }
-        if (selectedValue !== null) {
-            return (searchList.find((option) => option.label === selectedValue || option.value === selectedValue)?.label || '');
-        }
-        return '';
+      if (searchQuery !== null) {
+        return searchQuery;
+      }
+      if (selectedValue !== null) {
+        return searchList.find(
+          (option) => option.label === selectedValue || option.value === selectedValue
+        )?.label || "";
+      }
+      return "";
     };
     const isSelected = selectedValue !== null;
     const displayedInputText = getDisplayedInputText();
     const updateSearchQuery = (query) => {
-        setSearchQuery(query);
-        if (query === null) {
-            setShowOptions(false);
-        }
-        else {
-            setShowOptions(2 <= query.length);
-        }
+      setSearchQuery(query);
+      if (query === null) {
+        setShowOptions(false);
+      } else {
+        setShowOptions(2 <= query.length);
+      }
     };
     const handleInputChange = (event) => {
-        const nextValue = event.currentTarget.value;
-        updateSearchQuery(nextValue);
+      const nextValue = event.currentTarget.value;
+      updateSearchQuery(nextValue);
     };
     const handleSelect = (nextValue) => {
-        updateSearchQuery(null);
-        setSelectedValue(nextValue.label);
-        onFound(nextValue.value);
+      updateSearchQuery(null);
+      setSelectedValue(nextValue.label);
+      onFound(nextValue.value);
     };
-    return (React.createElement(Field, { className: className, renderAsTitle: renderAsTitle, htmlFor: id, ...otherProps },
-        React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-start" },
-            showIcon && React.createElement(StyledFrontIcon, { render: "search", color: "sesame" }),
-            React.createElement(Input, { id: id, name: name, ref: ref, placeholder: placeholder, frontIcon: showIcon ? 'present' : '', fallbackStyle: fallbackStyle, autoComplete: "off", value: displayedInputText, onChange: handleInputChange, selected: isSelected, onBlur: (e) => {
-                    if (displayedInputText === '') {
-                        setSearchQuery(null);
-                    }
-                    onBlur?.(e);
-                } })),
-        showOptions && (React.createElement(SearchOptions, { displayedList: filteredList, onSelect: handleSelect, positionRelative: resultsRelativePosition, resultsBorder: resultsBorder }))));
-});
-//# sourceMappingURL=SearchInput.js.map
+    return /* @__PURE__ */ jsxs(
+      Field,
+      {
+        className,
+        renderAsTitle,
+        htmlFor: id,
+        ...otherProps,
+        children: [
+          /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", justifyContent: "flex-start", children: [
+            showIcon && /* @__PURE__ */ jsx(StyledFrontIcon, { render: "search", color: "sesame" }),
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                id,
+                name,
+                ref,
+                placeholder,
+                frontIcon: showIcon ? "search" : void 0,
+                fallbackStyle,
+                autoComplete: "off",
+                value: displayedInputText,
+                onChange: handleInputChange,
+                selected: isSelected,
+                onBlur: (e) => {
+                  if (displayedInputText === "") {
+                    setSearchQuery(null);
+                  }
+                  onBlur?.(e);
+                }
+              }
+            )
+          ] }),
+          showOptions && /* @__PURE__ */ jsx(
+            SearchOptions,
+            {
+              displayedList: filteredList,
+              onSelect: handleSelect,
+              positionRelative: resultsRelativePosition,
+              resultsBorder
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { SearchInput };

package/dist/SearchInput/SearchOptions.js

@@ -1,17 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
 import { darken } from 'polished';
-import React from 'react';
 import styled, { css } from 'styled-components';
-import { Box } from '../Box';
-import { theme } from '../theme';
-export const SearchOptions = ({ displayedList, onSelect, positionRelative, resultsBorder, }) => {
-    return (React.createElement(BoxWithPositionRelative, null,
-        React.createElement(StyledResultsContainer, { positionRelative: positionRelative },
-            React.createElement(ResultsList, { resultsBorder: resultsBorder }, displayedList.length ? (displayedList.map((el, i) => (React.createElement("li", { key: i, onClick: () => onSelect(el) }, el.label)))) : (React.createElement("li", null, "No results"))))));
+import { Box } from '../Box/Box.js';
+import { theme } from '../theme.js';
+
+const SearchOptions = ({
+  displayedList,
+  onSelect,
+  positionRelative,
+  resultsBorder
+}) => {
+  return /* @__PURE__ */ jsx(BoxWithPositionRelative, { children: /* @__PURE__ */ jsx(StyledResultsContainer, { positionRelative, children: /* @__PURE__ */ jsx(ResultsList, { resultsBorder, children: displayedList.length ? displayedList.map((el, i) => /* @__PURE__ */ jsx("li", { onClick: () => onSelect(el), children: el.label }, i)) : /* @__PURE__ */ jsx("li", { children: "No results" }) }) }) });
 };
-const StyledResultsContainer = styled.div `
+const StyledResultsContainer = styled.div`
   box-sizing: border-box;
   overflow-y: hidden;
-  ${({ positionRelative }) => !positionRelative && 'position: absolute;'}
+  ${({ positionRelative }) => !positionRelative && "position: absolute;"}
   width: 100%;
   left: 0px;
   top: -8px;
@@ -20,7 +24,7 @@ const StyledResultsContainer = styled.div `
     max-height: 192px;
   }
 `;
-const ResultsList = styled.ul `
+const ResultsList = styled.ul`
   position: relative;
   list-style: none;
   overflow-y: auto;
@@ -30,8 +34,7 @@ const ResultsList = styled.ul `
   border-radius: 12px;
   margin-top: 14px;
   z-index: 1000;
-  ${({ resultsBorder }) => resultsBorder &&
-    css `
+  ${({ resultsBorder }) => resultsBorder && css`
       border: 2px solid ${theme.colors.oatmeal};
     `}
 
@@ -53,7 +56,8 @@ const ResultsList = styled.ul `
     }
   }
 `;
-const BoxWithPositionRelative = styled(Box) `
+const BoxWithPositionRelative = styled(Box)`
   position: relative;
 `;
-//# sourceMappingURL=SearchOptions.js.map
+
+export { SearchOptions };

package/dist/Snackbar/SnackbarContainer.js

@@ -1,38 +1,55 @@
-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 { SnackbarItem } from './SnackbarItem';
-export const SnackbarContext = createContext({
-    addSnackbar: () => {
-        throw new Error('Please add the SnackbarContainer to your application');
-    },
+import { SnackbarItem } from './SnackbarItem.js';
+
+const SnackbarContext = createContext({
+  addSnackbar: () => {
+    throw new Error("Please add the SnackbarContainer to your application");
+  }
 });
-export const useSnackbarContext = () => useContext(SnackbarContext);
-export const SnackbarContainer = ({ children, }) => {
-    let snackbarId = 0;
-    const [snackbars, setSnackbars] = useState([]);
-    // create snackbar unique ID
-    const newSnackId = useCallback(() => {
-        const newId = `MM_SNACKBAR_${snackbarId}`;
-        snackbarId++;
-        return newId;
-    }, [snackbarId]);
-    const addSnackbar = (snackbar) => {
-        const newSnack = {
-            ...snackbar,
-            id: newSnackId(),
-        };
-        setSnackbars([...snackbars, newSnack]);
-    };
-    const deleteSnackbar = (id) => {
-        setSnackbars(snackbars.filter((snackbar) => snackbar.id !== id));
+const useSnackbarContext = () => useContext(SnackbarContext);
+const SnackbarContainer = ({
+  children
+}) => {
+  let snackbarId = 0;
+  const [snackbars, setSnackbars] = useState([]);
+  const newSnackId = useCallback(() => {
+    const newId = `MM_SNACKBAR_${snackbarId}`;
+    snackbarId++;
+    return newId;
+  }, [snackbarId]);
+  const addSnackbar = (snackbar) => {
+    const newSnack = {
+      ...snackbar,
+      id: newSnackId()
     };
-    return (React.createElement(SnackbarContext.Provider, { value: {
-            addSnackbar,
-        } },
+    setSnackbars([...snackbars, newSnack]);
+  };
+  const deleteSnackbar = (id) => {
+    setSnackbars(snackbars.filter((snackbar) => snackbar.id !== id));
+  };
+  return /* @__PURE__ */ jsxs(
+    SnackbarContext.Provider,
+    {
+      value: {
+        addSnackbar
+      },
+      children: [
         children,
-        React.createElement(SnackbarWrapper, null, snackbars.map((snackbar) => (React.createElement(SnackbarItem, { key: snackbar.id, ...snackbar, deleteSnack: deleteSnackbar }))))));
+        /* @__PURE__ */ jsx(SnackbarWrapper, { children: snackbars.map((snackbar) => /* @__PURE__ */ jsx(
+          SnackbarItem,
+          {
+            ...snackbar,
+            deleteSnack: deleteSnackbar
+          },
+          snackbar.id
+        )) })
+      ]
+    }
+  );
 };
-const SnackbarWrapper = styled.div `
+const SnackbarWrapper = styled.div`
   position: fixed;
   bottom: 35px;
   left: 0;
@@ -42,4 +59,5 @@ const SnackbarWrapper = styled.div `
   max-width: 875px;
   z-index: 1000;
 `;
-//# sourceMappingURL=SnackbarContainer.js.map
+
+export { SnackbarContainer, SnackbarContext, useSnackbarContext };