@mrshmllw/smores-react 4.0.1 → 6.0.0

package/dist/Icon/svgAssets/Wellbeing.svg.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const SvgWellbeing = (props) => /* @__PURE__ */ React.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M17.5 2c-2.659 0-4.334 1.205-5.5 2.296C10.834 3.205 9.159 2 6.5 2 2.034 2 0 5.784 0 9.3c0 6.377 7.61 11.051 11.635 12.631a.998.998 0 00.73 0C16.39 20.351 24 15.677 24 9.3 24 5.784 21.966 2 17.5 2zM12 19.921C7.847 18.188 2 14.072 2 9.3 2 6.662 3.392 4 6.5 4c2.236 0 3.491 1.088 4.788 2.402.375.381 1.049.381 1.424 0C14.009 5.088 15.264 4 17.5 4 20.608 4 22 6.662 22 9.3c0 4.772-5.847 8.888-10 10.621zm4.241-12.572l-5.391 6.289L7.6 11.2a1 1 0 10-1.199 1.6l4 3a.995.995 0 001.359-.15l6-7a.999.999 0 10-1.519-1.301z", fill: "currentColor" }));
+
+export { SvgWellbeing as default };

package/dist/Icon/svgAssets/WheelFlat.svg.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const SvgWheelFlat = (props) => /* @__PURE__ */ React.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 12a1 1 0 100 2 1 1 0 000-2zm-3 1a3 3 0 116 0 3 3 0 01-6 0z", fill: "#112035" }), /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.95 13.309a1 1 0 011.261-.642l4.755 1.545a1 1 0 11-.618 1.902l-4.755-1.545a1 1 0 01-.642-1.26zM16.702 6.528a1 1 0 01.221 1.397l-2.938 4.045a1 1 0 01-1.618-1.176l2.938-4.045a1 1 0 011.397-.221zM7.298 6.528a1 1 0 011.397.221l2.938 4.045a1 1 0 01-1.618 1.176L7.077 7.925a1 1 0 01.221-1.397zM11.05 13.309a1 1 0 01-.643 1.26l-4.755 1.545a1 1 0 01-.618-1.902l4.755-1.545a1 1 0 011.26.642z", fill: "#112035" }), /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.707 11.146a6 6 0 00-11.413 3.708 5.973 5.973 0 001.42 2.347 1 1 0 01-1.428 1.4 7.974 7.974 0 01-1.894-3.129m13.315-4.326a6.002 6.002 0 01-1.421 6.056 1 1 0 101.43 1.398 8 8 0 10-13.324-3.128", fill: "#112035" }), /* @__PURE__ */ React.createElement("path", { d: "M1 22h22", stroke: "#112035", strokeWidth: 2, strokeMiterlimit: 10, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 13C0 6.373 5.373 1 12 1s12 5.373 12 12c0 4.065-2.027 7.65-5.113 9.818a1 1 0 01-.575.182H5.687a1 1 0 01-.575-.182C2.027 20.65 0 17.065 0 13zM12 3C6.477 3 2 7.477 2 13a9.977 9.977 0 004.012 8h11.976A9.975 9.975 0 0022 13c0-5.523-4.477-10-10-10z", fill: "#112035" }));
+
+export { SvgWheelFlat as default };

package/dist/Icon/svgAssets/Windscreen.svg.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const SvgWindscreen = (props) => /* @__PURE__ */ React.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0 18.75c0 .042.003.084.008.125A1 1 0 001 20h22a1 1 0 00.992-1.125A1.01 1.01 0 0024 18.75V10.5A6.5 6.5 0 0017.5 4h-11A6.5 6.5 0 000 10.5v8.25zm22-8.25V18H10.04l4.768-4.768a1 1 0 00-1.415-1.415L7.211 18H2v-7.5A4.5 4.5 0 016.5 6h11a4.5 4.5 0 014.5 4.5zM10 7a1 1 0 000 2h4a1 1 0 100-2h-4z", fill: "currentColor" }));
+
+export { SvgWindscreen as default };

package/dist/Icon/svgAssets/WindscreenRepair.svg.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const SvgWindscreenRepair = (props) => /* @__PURE__ */ React.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.26 3.764a.72.72 0 00-1.16-.2l-2.429 2.428-1.005-.336-.335-1.003 2.421-2.42a.724.724 0 00-.202-1.161c-1.884-.89-4.161-.688-5.807.513a5.71 5.71 0 00-2.27 5.704l-4.932 4.927c-1.27 1.269-1.366 3.26-.218 4.533a3.23 3.23 0 001.025.764v4.4c0 .72.584 1.304 1.304 1.304h18.782c.72 0 1.305-.584 1.305-1.304v-7.305a6 6 0 00-6-6H17.3a5.731 5.731 0 00-.04-4.844zm-1.019 6.41a5.743 5.743 0 01-5.209 1.67L6 16.874a3.241 3.241 0 01-2.086.937v3.84h5.671a.907.907 0 01.073-.081l5.652-5.652a.908.908 0 011.284 1.284l-4.45 4.45h10.03v-7.044a4.435 4.435 0 00-4.434-4.434H16.24zm-1.575-.926a3.974 3.974 0 01-3.82 1.019 1.601 1.601 0 01-.188-.07c-.169-.07-.331-.138-.454-.015l-4.908 4.9c-.321.322-.994.859-1.449.841-.456-.011-.856-.146-1.182-.545-.538-.784-.092-1.623.568-2.28l4.815-4.81c.168-.168.296-.663.234-.893-.424-1.591-.066-3.173 1.274-4.15a3.885 3.885 0 012.29-.728c.117 0 .14-.01.155-.016.017-.008.022-.01.162.017l-.797.727-.512.553a1 1 0 00-.25.894c.029.131.06.258.087.34l.545 1.633a.667.667 0 00.421.42l1.635.544c.238.079 1.02.022 1.199-.155l1.663-1.63c.25 1.27-.544 2.463-1.488 3.404z", fill: "currentColor" }));
+
+export { SvgWindscreenRepair as default };

package/dist/Icon/svgAssets/WindscreenReplacement.svg.js

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+const SvgWindscreenReplacement = (props) => /* @__PURE__ */ React.createElement("svg", { width: "100%", height: "100%", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.643 7.35l-.059-4.005L8.73 4.437 5.562 1.985l-1.55 3.694-3.892.949 1.923 3.514-1.686 3.635 1.973.344.017.003v7.789c0 .72.584 1.304 1.305 1.304h18.782c.72 0 1.304-.584 1.304-1.304v-7.304a6 6 0 00-6-6H14.4L12.642 7.35zm2.659 2.824l-2.498 2.052.207 4-3.918-.834-2.999 2.657-1.79-3.584-.392-.068v7.255h5.672a.907.907 0 01.073-.082l5.652-5.652a.908.908 0 011.284 1.284l-4.45 4.45h10.03V14.61a4.435 4.435 0 00-4.434-4.435h-2.437zm-1.972-.406L11.09 8.163l-.04-2.757-2.652.752-2.18-1.687L5.15 7.013l-2.678.653 1.323 2.418-1.16 2.501 2.716.474 1.232 2.466 2.064-1.828 2.696.574-.143-2.753 2.13-1.75zm-3.324-1.715a.656.656 0 01.042.938L7.39 11.837a.681.681 0 01-.977.02l-1.208-1.185a.656.656 0 010-.94.685.685 0 01.957 0l.708.696 2.18-2.334a.685.685 0 01.955-.041z", fill: "currentColor" }));
+
+export { SvgWindscreenReplacement as default };

package/dist/IconStrict/IconStrict.d.ts

@@ -1,4 +1,5 @@
 import { FC, FormEvent } from 'react';
+import { Icons } from 'Icon/iconsList';
 import { Color } from '../theme';
 import { MarginProps } from '../utils/space';
 export type IconStrictProps = {
@@ -7,7 +8,7 @@ export type IconStrictProps = {
     /** set size of the Icon (including background) */
     size?: 16 | 24 | 36 | 48;
     /** specify what Icon to render  */
-    render: string;
+    render: Icons;
     /** set icon colour */
     iconColor?: Color;
     /** set background colour */

package/dist/IconStrict/IconStrict.js

@@ -1,54 +1,83 @@
-import React from 'react';
+import { jsx } from 'react/jsx-runtime';
 import styled, { css } from 'styled-components';
 import { darken } from 'polished';
-import { Icon } from '../Icon';
-import { theme } from '../theme';
-import { focusOutlineStyle } from '../utils/focusOutline';
+import { Icon } from '../Icon/Icon.js';
+import { theme } from '../theme.js';
+import { focusOutlineStyle } from '../utils/focusOutline.js';
+
 const iconSizes = {
-    48: {
-        smallSize: 28,
-        padding: 10,
-    },
-    36: {
-        smallSize: 20,
-        padding: 8,
-    },
-    24: {
-        smallSize: 12,
-        padding: 6,
-    },
-    16: {
-        smallSize: 10,
-        padding: 3,
-    },
+  48: {
+    smallSize: 28,
+    padding: 10
+  },
+  36: {
+    smallSize: 20,
+    padding: 8
+  },
+  24: {
+    smallSize: 12,
+    padding: 6
+  },
+  16: {
+    smallSize: 10,
+    padding: 3
+  }
 };
-export const IconStrict = ({ className = '', size = 16, render, iconColor, backgroundColor, rotate, handleClick, ...marginProps }) => (React.createElement(IconContainer, { as: handleClick ? 'button' : 'div', className: className, size: size, ...marginProps, backgroundColor: backgroundColor, onClick: handleClick, onKeyDown: (e) => {
-        if (!handleClick)
-            return;
-        if (e.key === 'Enter') {
-            handleClick;
-        }
-    } },
-    React.createElement(Icon, { render: render, className: className, size: backgroundColor ? iconSizes[size].smallSize : size, color: iconColor, rotate: rotate, ...marginProps })));
-const IconContainer = styled.div(({ size, backgroundColor, onClick }) => css `
+const IconStrict = ({
+  className = "",
+  size = 16,
+  render,
+  iconColor,
+  backgroundColor,
+  rotate,
+  handleClick,
+  ...marginProps
+}) => /* @__PURE__ */ jsx(
+  IconContainer,
+  {
+    as: handleClick ? "button" : "div",
+    className,
+    size,
+    ...marginProps,
+    backgroundColor,
+    onClick: handleClick,
+    onKeyDown: (e) => {
+      if (!handleClick)
+        return;
+      if (e.key === "Enter") ;
+    },
+    children: /* @__PURE__ */ jsx(
+      Icon,
+      {
+        render,
+        className,
+        size: backgroundColor ? iconSizes[size].smallSize : size,
+        color: iconColor,
+        rotate,
+        ...marginProps
+      }
+    )
+  }
+);
+const IconContainer = styled.div(
+  ({ size, backgroundColor, onClick }) => css`
     padding: ${backgroundColor ? `${iconSizes[size].padding}px` : 0};
     width: 100%;
     max-width: ${size}px;
     height: ${size}px;
     border-radius: 100%;
-    background-color: ${backgroundColor
-    ? theme.colors[backgroundColor]
-    : 'none'};
-    cursor: ${onClick ? 'pointer' : 'default'};
+    background-color: ${backgroundColor ? theme.colors[backgroundColor] : "none"};
+    cursor: ${onClick ? "pointer" : "default"};
 
-    ${onClick &&
-    `
+    ${onClick && `
     &:hover {
-      background-color: ${backgroundColor ? darken(0.1, theme.colors[backgroundColor]) : 'none'};
+      background-color: ${backgroundColor ? darken(0.1, theme.colors[backgroundColor]) : "none"};
     }
       
     `}
 
     ${focusOutlineStyle}
-  `);
-//# sourceMappingURL=IconStrict.js.map
+  `
+);
+
+export { IconStrict };

package/dist/IconWrapper/IconWrapper.d.ts

@@ -1,11 +1,12 @@
 import { FC, ReactNode } from 'react';
+import { Icons } from 'Icon/iconsList';
 import { MarginProps } from '../utils/space';
 export type IconWrapperProps = {
     /** className attribute to apply classes from props */
     className?: string;
     children: ReactNode;
     /** specify what Icon to render  */
-    render: string;
+    render: Icons;
     /** set size of the Icon  */
     size?: number;
     /** TOP-RIGHT-BOTTOM-LEFT position of the Icon */

package/dist/IconWrapper/IconWrapper.js

@@ -1,17 +1,31 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import styled, { css } from 'styled-components';
-import { Box } from '../Box';
-import { Icon } from '../Icon';
-export const IconWrapper = ({ className = '', children, size = 16, render = 'included', t = 'auto', r = 'auto', b = 'auto', l = 'auto', ...marginProps }) => (React.createElement(Container, { className: className, ...marginProps },
-    children,
-    React.createElement(IconContainer, { size: size, t: t, r: r, b: b, l: l },
-        render === 'included' && (React.createElement(Icon, { render: "included", size: size, color: "apple" })),
-        render === 'excluded' && (React.createElement(Icon, { render: "excluded", size: size, color: "strawberry" })))));
-const Container = styled(Box) `
+import { Box } from '../Box/Box.js';
+import { Icon } from '../Icon/Icon.js';
+
+const IconWrapper = ({
+  className = "",
+  children,
+  size = 16,
+  render = "included",
+  t = "auto",
+  r = "auto",
+  b = "auto",
+  l = "auto",
+  ...marginProps
+}) => /* @__PURE__ */ jsxs(Container, { className, ...marginProps, children: [
+  children,
+  /* @__PURE__ */ jsxs(IconContainer, { size, t, r, b, l, children: [
+    render === "included" && /* @__PURE__ */ jsx(Icon, { render: "included", size, color: "apple" }),
+    render === "excluded" && /* @__PURE__ */ jsx(Icon, { render: "excluded", size, color: "strawberry" })
+  ] })
+] });
+const Container = styled(Box)`
   position: relative;
   width: fit-content;
 `;
-const IconContainer = styled.div(({ size, t, r, b, l }) => css `
+const IconContainer = styled.div(
+  ({ size, t, r, b, l }) => css`
     position: absolute;
     width: 100%;
     max-width: ${size}px;
@@ -20,5 +34,7 @@ const IconContainer = styled.div(({ size, t, r, b, l }) => css `
     right: ${r};
     bottom: ${b};
     left: ${l};
-  `);
-//# sourceMappingURL=IconWrapper.js.map
+  `
+);
+
+export { IconWrapper };

package/dist/LabelledText/LabelledText.js

@@ -1,11 +1,18 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import styled from 'styled-components';
-import { Box } from '../Box';
-import { Text } from '../Text';
-export const LabelledText = ({ label, children, labelMargin = 8, ...marginProps }) => (React.createElement(Container, { ...marginProps, labelMargin: labelMargin + 'px' },
-    React.createElement(Text, { tag: "label", color: "sesame", typo: "label" }, label),
-    children));
-const Container = styled(Box) `
+import { Box } from '../Box/Box.js';
+import { Text } from '../Text/Text.js';
+
+const LabelledText = ({
+  label,
+  children,
+  labelMargin = 8,
+  ...marginProps
+}) => /* @__PURE__ */ jsxs(Container, { ...marginProps, labelMargin: labelMargin + "px", children: [
+  /* @__PURE__ */ jsx(Text, { tag: "label", color: "sesame", typo: "label", children: label }),
+  children
+] });
+const Container = styled(Box)`
   display: flex;
   flex-direction: column;
 
@@ -13,4 +20,5 @@ const Container = styled(Box) `
     margin-bottom: ${({ labelMargin }) => labelMargin};
   }
 `;
-//# sourceMappingURL=LabelledText.js.map
+
+export { LabelledText };

package/dist/Link/Link.d.ts

@@ -1,4 +1,5 @@
 import { FC, MouseEventHandler, ReactNode } from 'react';
+import { Icons } from 'Icon/iconsList';
 type LinkTypo = 'regular' | 'small';
 export type LinkProps = {
     className?: string;
@@ -9,7 +10,7 @@ export type LinkProps = {
     download?: boolean;
     typo?: LinkTypo;
     highlight?: boolean;
-    iconToRender?: string;
+    iconToRender?: Icons;
     isTrailingIcon?: boolean;
 };
 export declare const Link: FC<LinkProps>;

package/dist/Link/Link.js

@@ -1,63 +1,102 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { darken } from 'polished';
-import { focusOutline } from '../utils/focusOutline';
-import { theme } from '../theme';
-import { Icon } from '../Icon';
-export const Link = ({ className, href, onClick, openInNewTab, download, children, typo = 'regular', highlight = false, iconToRender = openInNewTab ? 'new-window' : '', isTrailingIcon = true, }) => {
-    return (React.createElement(LinkWrapper, { href: href, className: className, onClick: onClick, download: download, typo: typo, highlight: highlight, ...(openInNewTab && {
-            rel: 'noopener noreferrer',
-            target: '_blank',
-        }) },
-        iconToRender && !isTrailingIcon && (React.createElement(Icon, { mt: { custom: '3px' }, mr: { custom: '4px' }, render: iconToRender, size: typo === 'regular' ? 14 : 12, color: highlight ? 'lollipop' : 'liquorice' })),
+import styled, { css } from 'styled-components';
+import { Icon } from '../Icon/Icon.js';
+import { theme } from '../theme.js';
+import { focusOutline } from '../utils/focusOutline.js';
+
+const Link = ({
+  className,
+  href,
+  onClick,
+  openInNewTab,
+  download,
+  children,
+  typo = "regular",
+  highlight = false,
+  iconToRender = openInNewTab ? "new-window" : void 0,
+  isTrailingIcon = true
+}) => {
+  return /* @__PURE__ */ jsxs(
+    LinkWrapper,
+    {
+      href,
+      className,
+      onClick,
+      download,
+      typo,
+      highlight,
+      ...openInNewTab && {
+        rel: "noopener noreferrer",
+        target: "_blank"
+      },
+      children: [
+        iconToRender && !isTrailingIcon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            mt: { custom: "3px" },
+            mr: { custom: "4px" },
+            render: iconToRender,
+            size: typo === "regular" ? 14 : 12,
+            color: highlight ? "lollipop" : "liquorice"
+          }
+        ),
         children,
-        iconToRender && isTrailingIcon && (React.createElement(Icon, { mt: { custom: '3px' }, ml: { custom: '4px' }, render: iconToRender, size: typo === 'regular' ? 14 : 12, color: highlight ? 'lollipop' : 'liquorice' }))));
+        iconToRender && isTrailingIcon && /* @__PURE__ */ jsx(
+          Icon,
+          {
+            mt: { custom: "3px" },
+            ml: { custom: "4px" },
+            render: iconToRender,
+            size: typo === "regular" ? 14 : 12,
+            color: highlight ? "lollipop" : "liquorice"
+          }
+        )
+      ]
+    }
+  );
 };
-const LinkWrapper = styled.a(({ typo, highlight }) => css `
-      ${focusOutline()}
-      display: inline-flex;
-      flex-direction: row;
+const LinkWrapper = styled.a(
+  ({ typo, highlight }) => css`
+    ${focusOutline()}
+    display: inline-flex;
+    flex-direction: row;
 
-      ${typo === 'regular' &&
-    css `
-        font-size: 16px;
-        line-height: 20px;
-      `}
+    ${typo === "regular" && css`
+      font-size: 16px;
+      line-height: 20px;
+    `}
 
-      ${typo === 'small' &&
-    css `
-        font-size: 14px;
-        line-height: 20px;
-      `}
+    ${typo === "small" && css`
+      font-size: 14px;
+      line-height: 20px;
+    `}
 
       font-weight: ${theme.font.weight.medium};
-      text-decoration: underline;
-      color: ${highlight ? theme.colors.lollipop : theme.colors.liquorice};
+    text-decoration: underline;
+    color: ${highlight ? theme.colors.lollipop : theme.colors.liquorice};
 
-      background: none;
-      cursor: pointer;
+    background: none;
+    cursor: pointer;
 
-      &:hover {
-        color: ${theme.colors.sesame};
+    &:hover {
+      color: ${theme.colors.sesame};
 
-        path {
-          fill: ${theme.colors.sesame};
-        }
+      path {
+        fill: ${theme.colors.sesame};
       }
+    }
 
-      &:active {
-        color: ${theme.colors.liquorice};
+    &:active {
+      color: ${theme.colors.liquorice};
 
-        path {
-          fill: ${theme.colors.liquorice};
-        }
+      path {
+        fill: ${theme.colors.liquorice};
       }
-    `);
-/**
- * Internal utility to override styling in other components (see Text)
- * @internal
- */
-export const linkStyleOverride = ({ color }) => css `
+    }
+  `
+);
+const linkStyleOverride = ({ color }) => css`
   & ${LinkWrapper} {
     color: ${color};
 
@@ -74,4 +113,5 @@ export const linkStyleOverride = ({ color }) => css `
     }
   }
 `;
-//# sourceMappingURL=Link.js.map
+
+export { Link, linkStyleOverride };

package/dist/Loader/Loader.js

@@ -1,12 +1,37 @@
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import styled from 'styled-components';
-import { theme } from '../theme';
-export const Loader = ({ height, color = 'marshmallowPink', }) => (React.createElement(LoaderSvg, { viewBox: "0 0 60 32", height: height, color: color },
-    React.createElement("g", { transform: "translate(30,18.5455) translate(-30,-9)" },
-        React.createElement(MarshOne, { id: "Marshmallow1", d: "M73.999,81.9767L73.6592,70.6087C73.6352,69.8071,73.1892,69.0806,72.4916,68.707C71.1747,68.0014,69.0105,67.648,66.0001,67.6467C62.9894,67.648,60.8254,68.0014,59.5084,68.707C58.8109,69.0806,58.3648,69.8071,58.3408,70.6087L58.001,81.9767C57.983,82.5754,58.2138,83.1538,58.6366,83.5705C60.0408,84.9546,62.4906,85.6467,65.986,85.6467C65.9907,85.6467,65.9953,85.6467,66.0001,85.6467C66.0047,85.6467,66.0094,85.6467,66.014,85.6467C69.5095,85.6467,71.9593,84.9546,73.3634,83.5705C73.7863,83.1538,74.0169,82.5754,73.999,81.9767", transform: "translate(-58,-67.6467)" }),
-        React.createElement(MarshTwo, { id: "Marshmallow2", d: "M73.999,81.9767L73.6592,70.6087C73.6352,69.8071,73.1892,69.0806,72.4916,68.707C71.1747,68.0014,69.0105,67.648,66.0001,67.6467C62.9894,67.648,60.8254,68.0014,59.5084,68.707C58.8109,69.0806,58.3648,69.8071,58.3408,70.6087L58.001,81.9767C57.983,82.5754,58.2138,83.1538,58.6366,83.5705C60.0408,84.9546,62.4906,85.6467,65.986,85.6467C65.9907,85.6467,65.9953,85.6467,66.0001,85.6467C66.0047,85.6467,66.0094,85.6467,66.014,85.6467C69.5095,85.6467,71.9593,84.9546,73.3634,83.5705C73.7863,83.1538,74.0169,82.5754,73.999,81.9767", transform: "translate(-36,-67.6467)" }),
-        React.createElement(MarshThree, { id: "Marshmallow3", d: "M73.999,81.9767L73.6592,70.6087C73.6352,69.8071,73.1892,69.0806,72.4916,68.707C71.1747,68.0014,69.0105,67.648,66.0001,67.6467C62.9894,67.648,60.8254,68.0014,59.5084,68.707C58.8109,69.0806,58.3648,69.8071,58.3408,70.6087L58.001,81.9767C57.983,82.5754,58.2138,83.1538,58.6366,83.5705C60.0408,84.9546,62.4906,85.6467,65.986,85.6467C65.9907,85.6467,65.9953,85.6467,66.0001,85.6467C66.0047,85.6467,66.0094,85.6467,66.014,85.6467C69.5095,85.6467,71.9593,84.9546,73.3634,83.5705C73.7863,83.1538,74.0169,82.5754,73.999,81.9767", transform: "translate(-14,-67.6467)" }))));
-const LoaderSvg = styled.svg `
+import { theme } from '../theme.js';
+
+const Loader = ({
+  height,
+  color = "marshmallowPink"
+}) => /* @__PURE__ */ jsx(LoaderSvg, { viewBox: "0 0 60 32", height, color, children: /* @__PURE__ */ jsxs("g", { transform: "translate(30,18.5455) translate(-30,-9)", children: [
+  /* @__PURE__ */ jsx(
+    MarshOne,
+    {
+      id: "Marshmallow1",
+      d: "M73.999,81.9767L73.6592,70.6087C73.6352,69.8071,73.1892,69.0806,72.4916,68.707C71.1747,68.0014,69.0105,67.648,66.0001,67.6467C62.9894,67.648,60.8254,68.0014,59.5084,68.707C58.8109,69.0806,58.3648,69.8071,58.3408,70.6087L58.001,81.9767C57.983,82.5754,58.2138,83.1538,58.6366,83.5705C60.0408,84.9546,62.4906,85.6467,65.986,85.6467C65.9907,85.6467,65.9953,85.6467,66.0001,85.6467C66.0047,85.6467,66.0094,85.6467,66.014,85.6467C69.5095,85.6467,71.9593,84.9546,73.3634,83.5705C73.7863,83.1538,74.0169,82.5754,73.999,81.9767",
+      transform: "translate(-58,-67.6467)"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    MarshTwo,
+    {
+      id: "Marshmallow2",
+      d: "M73.999,81.9767L73.6592,70.6087C73.6352,69.8071,73.1892,69.0806,72.4916,68.707C71.1747,68.0014,69.0105,67.648,66.0001,67.6467C62.9894,67.648,60.8254,68.0014,59.5084,68.707C58.8109,69.0806,58.3648,69.8071,58.3408,70.6087L58.001,81.9767C57.983,82.5754,58.2138,83.1538,58.6366,83.5705C60.0408,84.9546,62.4906,85.6467,65.986,85.6467C65.9907,85.6467,65.9953,85.6467,66.0001,85.6467C66.0047,85.6467,66.0094,85.6467,66.014,85.6467C69.5095,85.6467,71.9593,84.9546,73.3634,83.5705C73.7863,83.1538,74.0169,82.5754,73.999,81.9767",
+      transform: "translate(-36,-67.6467)"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    MarshThree,
+    {
+      id: "Marshmallow3",
+      d: "M73.999,81.9767L73.6592,70.6087C73.6352,69.8071,73.1892,69.0806,72.4916,68.707C71.1747,68.0014,69.0105,67.648,66.0001,67.6467C62.9894,67.648,60.8254,68.0014,59.5084,68.707C58.8109,69.0806,58.3648,69.8071,58.3408,70.6087L58.001,81.9767C57.983,82.5754,58.2138,83.1538,58.6366,83.5705C60.0408,84.9546,62.4906,85.6467,65.986,85.6467C65.9907,85.6467,65.9953,85.6467,66.0001,85.6467C66.0047,85.6467,66.0094,85.6467,66.014,85.6467C69.5095,85.6467,71.9593,84.9546,73.3634,83.5705C73.7863,83.1538,74.0169,82.5754,73.999,81.9767",
+      transform: "translate(-14,-67.6467)"
+    }
+  )
+] }) });
+const LoaderSvg = styled.svg`
   height: ${(p) => p.height};
 
   path {
@@ -233,16 +258,17 @@ const LoaderSvg = styled.svg `
     }
   }
 `;
-const MarshOne = styled.path `
+const MarshOne = styled.path`
   animation: Marshmallow1_t 1.6s linear infinite both,
     Marshmallow1_d 1.6s linear infinite both;
 `;
-const MarshTwo = styled.path `
+const MarshTwo = styled.path`
   animation: Marshmallow2_t 1.6s linear infinite both,
     Marshmallow2_d 1.6s linear infinite both;
 `;
-const MarshThree = styled.path `
+const MarshThree = styled.path`
   animation: Marshmallow3_t 1.6s linear infinite both,
     Marshmallow3_d 1.6s linear infinite both;
 `;
-//# sourceMappingURL=Loader.js.map
+
+export { Loader };