@mrshmllw/smores-react 4.0.1 → 5.0.0

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.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.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 };