@mrshmllw/smores-react 4.0.1 → 5.0.0

package/dist/fields/components/InternalField.js

@@ -1,48 +1,95 @@
-import React from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import styled, { css } from 'styled-components';
-import { Text } from '../../Text';
-import { Box } from '../../Box';
-import { Icon } from '../../Icon';
-export const InternalField = ({ children, fieldType, renderAsTitle, htmlFor, className, label, assistiveText, error, errorMsg, required, completed, ...marginProps }) => {
-    const labelTag = fieldType === 'field' ? 'label' : 'legend';
-    return (React.createElement(Container, { as: fieldType === 'field' ? 'div' : 'fieldset', className: className, ...marginProps },
-        label && (React.createElement(React.Fragment, null, renderAsTitle ? (React.createElement(Box, { mb: "16px" },
-            React.createElement(Text, { tag: labelTag, typo: "heading-small", htmlFor: htmlFor }, label),
-            assistiveText && (React.createElement(Text, { tag: "p", color: "sesame", mt: { custom: 4 } }, assistiveText)))) : (React.createElement(Text, { tag: labelTag, typo: "label", color: error ? 'strawberry' : 'sesame', htmlFor: htmlFor, mb: { custom: 4 } },
-            label,
-            required && (React.createElement(Text, { tag: "span", typo: "body-small", color: "strawberry" }, "*")))))),
-        React.createElement(Box, null, children),
-        fieldType === 'field' && assistiveText && !renderAsTitle && (React.createElement(Text, { tag: labelTag, typo: "caption", color: error ? 'strawberry' : 'sesame', mt: { custom: 4 } }, assistiveText)),
-        error &&
-            errorMsg &&
-            (typeof errorMsg === 'string' ? (React.createElement(Text, { tag: "span", typo: "caption", color: "strawberry", mt: "8px" }, errorMsg)) : (React.createElement(Box, { mt: "8px" }, errorMsg))),
-        completed !== undefined && (React.createElement(AnimationWrapper, { displayStatus: completed, isError: !!(error && errorMsg) },
-            React.createElement(StatusWrapper, { mt: '8px' },
-                React.createElement(Icon, { render: "included", size: 16, color: "apple" }),
-                React.createElement(Text, { typo: "caption", color: "apple" }, "Complete"))))));
+import { Text } from '../../Text/Text.js';
+import { Box } from '../../Box/Box.js';
+import { Icon } from '../../Icon/Icon.js';
+
+const InternalField = ({
+  children,
+  fieldType,
+  renderAsTitle,
+  htmlFor,
+  className,
+  label,
+  assistiveText,
+  error,
+  errorMsg,
+  required,
+  completed,
+  ...marginProps
+}) => {
+  const labelTag = fieldType === "field" ? "label" : "legend";
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      as: fieldType === "field" ? "div" : "fieldset",
+      className,
+      ...marginProps,
+      children: [
+        label && /* @__PURE__ */ jsx(Fragment, { children: renderAsTitle ? /* @__PURE__ */ jsxs(Box, { mb: "16px", children: [
+          /* @__PURE__ */ jsx(Text, { tag: labelTag, typo: "heading-small", htmlFor, children: label }),
+          assistiveText && /* @__PURE__ */ jsx(Text, { tag: "p", color: "sesame", mt: { custom: 4 }, children: assistiveText })
+        ] }) : /* @__PURE__ */ jsxs(
+          Text,
+          {
+            tag: labelTag,
+            typo: "label",
+            color: error ? "strawberry" : "sesame",
+            htmlFor,
+            mb: { custom: 4 },
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx(Text, { tag: "span", typo: "body-small", color: "strawberry", children: "*" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Box, { children }),
+        fieldType === "field" && assistiveText && !renderAsTitle && /* @__PURE__ */ jsx(
+          Text,
+          {
+            tag: labelTag,
+            typo: "caption",
+            color: error ? "strawberry" : "sesame",
+            mt: { custom: 4 },
+            children: assistiveText
+          }
+        ),
+        error && errorMsg && (typeof errorMsg === "string" ? /* @__PURE__ */ jsx(Text, { tag: "span", typo: "caption", color: "strawberry", mt: "8px", children: errorMsg }) : /* @__PURE__ */ jsx(Box, { mt: "8px", children: errorMsg })),
+        completed !== void 0 && /* @__PURE__ */ jsx(
+          AnimationWrapper,
+          {
+            displayStatus: completed,
+            isError: !!(error && errorMsg),
+            children: /* @__PURE__ */ jsxs(StatusWrapper, { mt: "8px", children: [
+              /* @__PURE__ */ jsx(Icon, { render: "included", size: 16, color: "apple" }),
+              /* @__PURE__ */ jsx(Text, { typo: "caption", color: "apple", children: "Complete" })
+            ] })
+          }
+        )
+      ]
+    }
+  );
 };
-const AnimationWrapper = styled(Box) `
+const AnimationWrapper = styled(Box)`
   width: 0;
   overflow: hidden;
 
-  ${({ displayStatus }) => displayStatus &&
-    css `
+  ${({ displayStatus }) => displayStatus && css`
       transition: width 0.6s ease-in;
       width: 100%;
     `}
 
   /* This enables animation to appear when previous state is error */
-  ${({ isError }) => isError &&
-    css `
+  ${({ isError }) => isError && css`
       height: 0;
     `}
 `;
-const StatusWrapper = styled(Box) `
+const StatusWrapper = styled(Box)`
   display: flex;
   align-items: center;
   gap: 4px;
 `;
-const Container = styled(Box) `
+const Container = styled(Box)`
   display: flex;
   flex-direction: column;
   position: relative;
@@ -51,4 +98,5 @@ const Container = styled(Box) `
   // In case, the element is a 'fieldset', we remove the border
   border: 0;
 `;
-//# sourceMappingURL=InternalField.js.map
+
+export { InternalField };

package/dist/fontStyle.js

@@ -1,6 +1,7 @@
 import { createGlobalStyle } from 'styled-components';
-import { theme } from './theme';
-export const FontStyle = createGlobalStyle `
+import { theme } from './theme.js';
+
+const FontStyle = createGlobalStyle`
   @font-face {
     font-family: 'Circular';
     src: url('https://uploads-ssl.webflow.com/5baa461315ee32413d16236d/5f7f0665430aaedf8cb0bbf3_CircularXXSub-RegularSubset.woff2') format('woff2');
@@ -32,4 +33,5 @@ export const FontStyle = createGlobalStyle `
     font-style: normal;
   }
 `;
-//# sourceMappingURL=fontStyle.js.map
+
+export { FontStyle };

package/dist/hooks/useClickOutside/index.js

@@ -1,24 +1,32 @@
 import { useCallback, useRef } from 'react';
-import { useEventListener } from '../useEventListener';
-export const useOnClickOutside = ({ ref, callback, }) => {
-    const onClickOutsideListener = useCallback((event) => {
-        if (!ref || !ref.current || ref.current.contains(event.target)) {
-            return;
-        }
-        callback(event);
-    }, [ref, callback]);
-    const documentRef = useRef(document.body);
-    useEventListener({
-        eventName: 'click',
-        ref: documentRef,
-        callback: onClickOutsideListener,
-        capture: true,
-    });
-    useEventListener({
-        eventName: 'touchend',
-        ref: documentRef,
-        callback: onClickOutsideListener,
-        capture: true,
-    });
+import { useEventListener } from '../useEventListener/index.js';
+
+const useOnClickOutside = ({
+  ref,
+  callback
+}) => {
+  const onClickOutsideListener = useCallback(
+    (event) => {
+      if (!ref || !ref.current || ref.current.contains(event.target)) {
+        return;
+      }
+      callback(event);
+    },
+    [ref, callback]
+  );
+  const documentRef = useRef(document.body);
+  useEventListener({
+    eventName: "click",
+    ref: documentRef,
+    callback: onClickOutsideListener,
+    capture: true
+  });
+  useEventListener({
+    eventName: "touchend",
+    ref: documentRef,
+    callback: onClickOutsideListener,
+    capture: true
+  });
 };
-//# sourceMappingURL=index.js.map
+
+export { useOnClickOutside };

package/dist/hooks/useEventListener/index.js

@@ -1,14 +1,21 @@
 import { useEffect } from 'react';
-export const useEventListener = ({ eventName, callback, ref, capture = false, }) => {
-    useEffect(() => {
-        const refElement = ref && ref.current;
-        if (!refElement)
-            return;
-        const listenerOptions = { capture };
-        refElement.addEventListener(eventName, callback, listenerOptions);
-        return () => {
-            refElement.removeEventListener(eventName, callback, listenerOptions);
-        };
-    }, [eventName, ref, callback, capture]);
+
+const useEventListener = ({
+  eventName,
+  callback,
+  ref,
+  capture = false
+}) => {
+  useEffect(() => {
+    const refElement = ref && ref.current;
+    if (!refElement)
+      return;
+    const listenerOptions = { capture };
+    refElement.addEventListener(eventName, callback, listenerOptions);
+    return () => {
+      refElement.removeEventListener(eventName, callback, listenerOptions);
+    };
+  }, [eventName, ref, callback, capture]);
 };
-//# sourceMappingURL=index.js.map
+
+export { useEventListener };

package/dist/hooks/useScript/index.js

@@ -1,13 +1,18 @@
 import { useEffect } from 'react';
-export const useScript = ({ url, async = true, }) => {
-    useEffect(() => {
-        const script = document.createElement('script');
-        script.src = url;
-        script.async = async;
-        document.body.appendChild(script);
-        return () => {
-            document.body.removeChild(script);
-        };
-    }, [url]);
+
+const useScript = ({
+  url,
+  async = true
+}) => {
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.src = url;
+    script.async = async;
+    document.body.appendChild(script);
+    return () => {
+      document.body.removeChild(script);
+    };
+  }, [url]);
 };
-//# sourceMappingURL=index.js.map
+
+export { useScript };

package/dist/hooks/useTimeout/index.js

@@ -1,12 +1,14 @@
-import { useEffect, useRef } from 'react';
-export const useTimeout = (callback, delay) => {
-    const savedCallback = useRef(callback);
-    useEffect(() => {
-        savedCallback.current = callback;
-    }, [callback]);
-    useEffect(() => {
-        const id = setTimeout(() => savedCallback.current(), delay);
-        return () => clearTimeout(id);
-    }, [delay]);
+import { useRef, useEffect } from 'react';
+
+const useTimeout = (callback, delay) => {
+  const savedCallback = useRef(callback);
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+  useEffect(() => {
+    const id = setTimeout(() => savedCallback.current(), delay);
+    return () => clearTimeout(id);
+  }, [delay]);
 };
-//# sourceMappingURL=index.js.map
+
+export { useTimeout };

package/dist/index.d.ts

@@ -40,4 +40,4 @@ export * from './fields/Fieldset';
 export * from './fontStyle';
 export * from './hooks';
 export * from './theme';
-export { MarginProps, PaddingProps, SpacingProp } from './utils/space';
+export * from './utils/space';

package/dist/index.js

@@ -1,43 +1,49 @@
-export * from './Accordion';
-export * from './ActionDropdown';
-export * from './Banner';
-export * from './Box';
-export * from './BrandCard';
-export * from './Button';
-export * from './Card';
-export * from './CheckBox';
-export * from './CheckBoxGroup';
-export * from './Chip';
-export * from './Datepicker';
-export * from './Divider';
-export * from './Dropdown';
-export * from './Emoji';
-export * from './Icon';
-export * from './IconStrict';
-export * from './IconWrapper';
-export * from './LabelledText';
-export * from './Link';
-export * from './Loader';
-export * from './Logo';
-export * from './Modal';
-export * from './NumberInput';
-export * from './CurrencyInput';
-export * from './Pagination';
-export * from './RadioGroup';
-export * from './Row';
-export * from './SearchInput';
-export * from './Snackbar';
-export * from './SupportMessage';
-export * from './Table';
-export * from './Tag';
-export * from './Text';
-export * from './TextInput';
-export * from './Textarea';
-export * from './Toggle';
-export * from './Tooltip';
-export * from './fields/Field';
-export * from './fields/Fieldset';
-export * from './fontStyle';
-export * from './hooks';
-export * from './theme';
-//# sourceMappingURL=index.js.map
+export { Accordion } from './Accordion/Accordion.js';
+export { ActionDropdown } from './ActionDropdown/ActionDropdown.js';
+export { BannerContainer, BannerContext, useBannerContext } from './Banner/BannerContainer.js';
+export { useBanner } from './Banner/hooks.js';
+export { Box } from './Box/Box.js';
+export { BrandCard } from './BrandCard/BrandCard.js';
+export { Button } from './Button/Button.js';
+export { Card } from './Card/Card.js';
+export { CheckBox } from './CheckBox/CheckBox.js';
+export { CheckBoxGroup } from './CheckBoxGroup/CheckBoxGroup.js';
+export { Chip } from './Chip/Chip.js';
+export { Datepicker } from './Datepicker/Datepicker.js';
+export { Divider } from './Divider/Divider.js';
+export { Dropdown } from './Dropdown/Dropdown.js';
+export { Emoji } from './Emoji/Emoji.js';
+export { Icon } from './Icon/Icon.js';
+export { IconStrict } from './IconStrict/IconStrict.js';
+export { IconWrapper } from './IconWrapper/IconWrapper.js';
+export { LabelledText } from './LabelledText/LabelledText.js';
+export { Link, linkStyleOverride } from './Link/Link.js';
+export { Loader } from './Loader/Loader.js';
+export { Logo } from './Logo/Logo.js';
+export { Modal } from './Modal/Modal.js';
+export { NumberInput } from './NumberInput/NumberInput.js';
+export { CurrencyInput } from './CurrencyInput/CurrencyInput.js';
+export { Pagination } from './Pagination/Pagination.js';
+export { RadioGroup } from './RadioGroup/RadioGroup.js';
+export { Row } from './Row/Row.js';
+export { SearchInput } from './SearchInput/SearchInput.js';
+export { SnackbarContainer, SnackbarContext, useSnackbarContext } from './Snackbar/SnackbarContainer.js';
+export { useSnackbar } from './Snackbar/hooks.js';
+export { SupportMessage } from './SupportMessage/SupportMessage.js';
+export { Table } from './Table/Table.js';
+export { TableRow } from './Table/components/TableRow.js';
+export { Tag } from './Tag/Tag.js';
+export { Text } from './Text/Text.js';
+export { TextInput } from './TextInput/TextInput.js';
+export { Textarea } from './Textarea/Textarea.js';
+export { Toggle } from './Toggle/Toggle.js';
+export { Tooltip } from './Tooltip/Tooltip.js';
+export { Field } from './fields/Field/Field.js';
+export { Fieldset } from './fields/Fieldset/Fieldset.js';
+export { FontStyle } from './fontStyle.js';
+export { useEventListener } from './hooks/useEventListener/index.js';
+export { useOnClickOutside } from './hooks/useClickOutside/index.js';
+export { useScript } from './hooks/useScript/index.js';
+export { useTimeout } from './hooks/useTimeout/index.js';
+export { theme } from './theme.js';
+export { margin, padding, resolveSpacing } from './utils/space.js';

package/dist/theme.js

@@ -1,62 +1,92 @@
 const colors = {
-    // Core Primary
-    lollipop: '#FF69B5', // 120
-    marshmallowPink: '#FF88C8', // 100
-    bubblegum: '#FFB3DA', // 60
-    fairyFloss: '#FFCCE7', // 40
-    // Core Secondary
-    boba: '#0E0E0C', // 120
-    liquorice: '#292924', // 100
-    sesame: '#636768', // 60
-    chia: '#D2D2D2', // 40
-    // Core Tertiary
-    custard: '#F1E9DC', // 120
-    mascarpone: '#F8F2EA', // 100
-    coconut: '#FBF8F5', // 60
-    cream: '#FFFFFF', // 0
-    // Brand Secondary
-    spearmint: '#294636', // 1 100
-    feijoa: '#3B5848', // 1 60
-    blueberry: '#89A2B6', // 2 100
-    macaroon: '#BBCFDF', // 2 60
-    pistachio: '#838E49', // 3 100
-    matcha: '#DBE1B0', // 3 60
-    caramel: '#C26B2A', // 4 100
-    peanut: '#F8C699', // 4 60
-    marzipan: '#A1957C', // 5 100
-    oatmeal: '#DAD2C4', // 5 60
-    // Traffic light
-    strawberry: '#DF2929', // Error 100
-    watermelon: '#F5CFCC', // Error 20
-    apple: '#008933', // Success 100
-    mint: '#C9E2CE', // Success 20
-    lemon: '#FFD23A', // Warning 100
-    sherbert: '#FCF0D0', // Warning 20
-    tangerine: '#FF9F2C', // Agent Warning 100
-    // Third-party brand colours
-    compareTheMarket: '#004A8E',
-    confused: '#000A8C',
-    onfido: '#3640F5',
-    twitter: '#55ACEE',
-    premfina: '#F08422',
-    checkout: '#56AC88',
-    facebook: '#3B5998',
-    stripe: '#6772E5',
-    intercom: '#286EFA',
-    ravelin: '#2A4AFC',
-    rac: '#EA7D24',
-    hometree: '#17171C',
+  // Core Primary
+  lollipop: "#FF69B5",
+  // 120
+  marshmallowPink: "#FF88C8",
+  // 100
+  bubblegum: "#FFB3DA",
+  // 60
+  fairyFloss: "#FFCCE7",
+  // 40
+  // Core Secondary
+  boba: "#0E0E0C",
+  // 120
+  liquorice: "#292924",
+  // 100
+  sesame: "#636768",
+  // 60
+  chia: "#D2D2D2",
+  // 40
+  // Core Tertiary
+  custard: "#F1E9DC",
+  // 120
+  mascarpone: "#F8F2EA",
+  // 100
+  coconut: "#FBF8F5",
+  // 60
+  cream: "#FFFFFF",
+  // 0
+  // Brand Secondary
+  spearmint: "#294636",
+  // 1 100
+  feijoa: "#3B5848",
+  // 1 60
+  blueberry: "#89A2B6",
+  // 2 100
+  macaroon: "#BBCFDF",
+  // 2 60
+  pistachio: "#838E49",
+  // 3 100
+  matcha: "#DBE1B0",
+  // 3 60
+  caramel: "#C26B2A",
+  // 4 100
+  peanut: "#F8C699",
+  // 4 60
+  marzipan: "#A1957C",
+  // 5 100
+  oatmeal: "#DAD2C4",
+  // 5 60
+  // Traffic light
+  strawberry: "#DF2929",
+  // Error 100
+  watermelon: "#F5CFCC",
+  // Error 20
+  apple: "#008933",
+  // Success 100
+  mint: "#C9E2CE",
+  // Success 20
+  lemon: "#FFD23A",
+  // Warning 100
+  sherbert: "#FCF0D0",
+  // Warning 20
+  tangerine: "#FF9F2C",
+  // Agent Warning 100
+  // Third-party brand colours
+  compareTheMarket: "#004A8E",
+  confused: "#000A8C",
+  onfido: "#3640F5",
+  twitter: "#55ACEE",
+  premfina: "#F08422",
+  checkout: "#56AC88",
+  facebook: "#3B5998",
+  stripe: "#6772E5",
+  intercom: "#286EFA",
+  ravelin: "#2A4AFC",
+  rac: "#EA7D24",
+  hometree: "#17171C"
 };
 const font = {
-    weight: {
-        normal: 400,
-        medium: 500,
-        bold: 700,
-    },
-    system: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+  weight: {
+    normal: 400,
+    medium: 500,
+    bold: 700
+  },
+  system: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'
 };
-export const theme = {
-    colors,
-    font,
+const theme = {
+  colors,
+  font
 };
-//# sourceMappingURL=theme.js.map
+
+export { theme };

package/dist/utils/date.js

@@ -1,9 +1,10 @@
-const ukTimeFormat = new Intl.DateTimeFormat('en-GB', {
-    timeZone: 'Europe/London',
+const ukTimeFormat = new Intl.DateTimeFormat("en-GB", {
+  timeZone: "Europe/London"
 });
-export const convertToUkDate = (date) => {
-    const dateString = ukTimeFormat.format(date);
-    const [day, month, year] = dateString.split('/');
-    return new Date(Number(year), Number(month) - 1, Number(day));
+const convertToUkDate = (date) => {
+  const dateString = ukTimeFormat.format(date);
+  const [day, month, year] = dateString.split("/");
+  return new Date(Number(year), Number(month) - 1, Number(day));
 };
-//# sourceMappingURL=date.js.map
+
+export { convertToUkDate };

package/dist/utils/debounce.js

@@ -1,19 +1,14 @@
-/**
- * Debounces a method.
- * @param fn - The function to be debounced.
- * @param delay - The debouncing delay.
- * @returns A debounced version of the function.
- */
-export const debounce = (fn, delay) => {
-    let timeout;
-    return (...args) => {
-        if (timeout) {
-            clearTimeout(timeout);
-        }
-        timeout = setTimeout(() => {
-            fn(...args);
-            timeout = undefined;
-        }, delay);
-    };
+const debounce = (fn, delay) => {
+  let timeout;
+  return (...args) => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => {
+      fn(...args);
+      timeout = void 0;
+    }, delay);
+  };
 };
-//# sourceMappingURL=debounce.js.map
+
+export { debounce };