@mrshmllw/smores-react 4.0.1 → 5.0.0

package/dist/Text/fontMapping.js

@@ -1,6 +1,7 @@
-import { theme } from '../theme';
-export const fontStyleMapping = {
-    'hero-alternate': `
+import { theme } from '../theme.js';
+
+const fontStyleMapping = {
+  "hero-alternate": `
     font-size: 40px;
     font-family: 'MarshmallowYouth';
     font-weight: ${theme.font.weight.bold};
@@ -11,7 +12,7 @@ export const fontStyleMapping = {
       line-height: 52px;
     }
   `,
-    hero: `
+  hero: `
     font-size: 32px;
     font-weight: ${theme.font.weight.medium};
     line-height: 40px;
@@ -21,13 +22,13 @@ export const fontStyleMapping = {
       line-height: 44px;
     }
   `,
-    'heading-alternate': `
+  "heading-alternate": `
     font-size: 40px;
     font-family: 'MarshmallowYouth';
     font-weight: ${theme.font.weight.bold};
     line-height: 40px;
   `,
-    'heading-large': `
+  "heading-large": `
     font-size: 28px;
     font-weight: ${theme.font.weight.medium};
     line-height: 32px;
@@ -37,51 +38,52 @@ export const fontStyleMapping = {
       line-height: 40px;
     }
   `,
-    'heading-medium': `
+  "heading-medium": `
     font-size: 24px;
     font-weight: ${theme.font.weight.medium};
     line-height: 32px;
   `,
-    'heading-small': `
+  "heading-small": `
     font-size: 20px;
     font-weight: ${theme.font.weight.medium};
     line-height: 28px;
   `,
-    'headline-regular': `
+  "headline-regular": `
     font-size: 16px;
     font-weight: ${theme.font.weight.medium};
     line-height: 20px;
   `,
-    'headline-small': `
+  "headline-small": `
     font-size: 14px;
     font-weight: ${theme.font.weight.medium};
     line-height: 20px;
   `,
-    'body-standfirst': `
+  "body-standfirst": `
     font-size: 18px;
     font-weight: ${theme.font.weight.normal};
     line-height: 24px;
   `,
-    'body-regular': `
+  "body-regular": `
     font-size: 16px;
     font-weight: ${theme.font.weight.normal};
     line-height: 20px;
   `,
-    'body-small': `
+  "body-small": `
     font-size: 14px;
     font-weight: ${theme.font.weight.normal};
     line-height: 20px;
   `,
-    caption: `
+  caption: `
     font-size: 12px;
     font-weight: ${theme.font.weight.normal};
     line-height: 16px;
   `,
-    label: `
+  label: `
     font-size: 10px;
     line-height: 12px;
     font-weight: ${theme.font.weight.medium};
     text-transform: uppercase;
-  `,
+  `
 };
-//# sourceMappingURL=fontMapping.js.map
+
+export { fontStyleMapping };

package/dist/TextInput/TextInput.js

@@ -1,17 +1,66 @@
-import React, { forwardRef } from 'react';
-import { Field } from '../fields/Field';
-import { Box } from '../Box';
-import { useUniqueId } from '../utils/id';
-import { Input, StyledFrontIcon, StyledTrailingIcon, } from '../fields/components/CommonInput';
-export const TextInput = forwardRef(function TextInput({ id: idProp, type = 'text', placeholder, name, value, error = false, onBlur, onChange, onInputChange, disabled = false, frontIcon, trailingIcon, fallbackStyle, ...fieldProps }, ref) {
-    const id = useUniqueId(idProp);
-    return (React.createElement(Field, { ...fieldProps, htmlFor: id, error: error },
-        React.createElement(Box, { flex: true, alignItems: "center", justifyContent: "flex-start" },
-            frontIcon && (React.createElement(StyledFrontIcon, { disabled: disabled, render: frontIcon, color: "sesame" })),
-            React.createElement(Input, { disabled: disabled, type: type, id: id, name: name, ref: ref, placeholder: placeholder, value: value, error: error, frontIcon: frontIcon, fallbackStyle: fallbackStyle, autoComplete: "off", onChange: (e) => {
-                    onChange && onChange(e.currentTarget.value);
-                    onInputChange && onInputChange(e);
-                }, onBlur: onBlur }),
-            trailingIcon && (React.createElement(StyledTrailingIcon, { disabled: disabled, render: trailingIcon, color: "sesame" })))));
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Field } from '../fields/Field/Field.js';
+import { Box } from '../Box/Box.js';
+import { useUniqueId } from '../utils/id.js';
+import { StyledFrontIcon, Input, StyledTrailingIcon } from '../fields/components/CommonInput.js';
+
+const TextInput = forwardRef(function TextInput2({
+  id: idProp,
+  type = "text",
+  placeholder,
+  name,
+  value,
+  error = false,
+  onBlur,
+  onChange,
+  onInputChange,
+  disabled = false,
+  frontIcon,
+  trailingIcon,
+  fallbackStyle,
+  ...fieldProps
+}, ref) {
+  const id = useUniqueId(idProp);
+  return /* @__PURE__ */ jsx(Field, { ...fieldProps, htmlFor: id, error, children: /* @__PURE__ */ jsxs(Box, { flex: true, alignItems: "center", justifyContent: "flex-start", children: [
+    frontIcon && /* @__PURE__ */ jsx(
+      StyledFrontIcon,
+      {
+        disabled,
+        render: frontIcon,
+        color: "sesame"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        disabled,
+        type,
+        id,
+        name,
+        ref,
+        placeholder,
+        value,
+        error,
+        frontIcon,
+        fallbackStyle,
+        autoComplete: "off",
+        onChange: (e) => {
+          onChange && onChange(e.currentTarget.value);
+          onInputChange && onInputChange(e);
+        },
+        onBlur
+      }
+    ),
+    trailingIcon && /* @__PURE__ */ jsx(
+      StyledTrailingIcon,
+      {
+        disabled,
+        render: trailingIcon,
+        color: "sesame"
+      }
+    )
+  ] }) });
 });
-//# sourceMappingURL=TextInput.js.map
+
+export { TextInput };

package/dist/Textarea/Textarea.js

@@ -1,17 +1,50 @@
-import React, { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import styled from 'styled-components';
-import { theme } from '../theme';
-import { useUniqueId } from '../utils/id';
-import { Field } from '../fields/Field';
-export const Textarea = forwardRef(function Textarea({ id: idProp, name, value, onChange, onInputChange, resize = 'none', error = false, placeholder, disabled = false, maxLength, onBlur, rows = 4, fallbackStyle, ...fieldProps }, ref) {
-    const id = useUniqueId(idProp);
-    return (React.createElement(Field, { ...fieldProps, htmlFor: id, error: error },
-        React.createElement(StyledTextArea, { ref: ref, error: error, id: id, name: name, disabled: disabled, resize: resize, fallbackStyle: fallbackStyle, placeholder: placeholder, value: value, onChange: (e) => {
-                onChange?.(e.currentTarget.value);
-                onInputChange?.(e);
-            }, maxLength: maxLength, onBlur: onBlur, rows: rows })));
+import { theme } from '../theme.js';
+import { useUniqueId } from '../utils/id.js';
+import { Field } from '../fields/Field/Field.js';
+
+const Textarea = forwardRef(function Textarea2({
+  id: idProp,
+  name,
+  value,
+  onChange,
+  onInputChange,
+  resize = "none",
+  error = false,
+  placeholder,
+  disabled = false,
+  maxLength,
+  onBlur,
+  rows = 4,
+  fallbackStyle,
+  ...fieldProps
+}, ref) {
+  const id = useUniqueId(idProp);
+  return /* @__PURE__ */ jsx(Field, { ...fieldProps, htmlFor: id, error, children: /* @__PURE__ */ jsx(
+    StyledTextArea,
+    {
+      ref,
+      error,
+      id,
+      name,
+      disabled,
+      resize,
+      fallbackStyle,
+      placeholder,
+      value,
+      onChange: (e) => {
+        onChange?.(e.currentTarget.value);
+        onInputChange?.(e);
+      },
+      maxLength,
+      onBlur,
+      rows
+    }
+  ) });
 });
-const StyledTextArea = styled.textarea `
+const StyledTextArea = styled.textarea`
   font-size: 16px;
   font: inherit;
   line-height: 20px;
@@ -23,9 +56,9 @@ const StyledTextArea = styled.textarea `
   padding: 18px 14px;
   color: ${theme.colors.liquorice};
   resize: ${({ resize }) => resize};
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'text')};
-  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
-  border-color: ${({ error }) => theme.colors[`${error ? 'strawberry' : 'oatmeal'}`]};
+  cursor: ${({ disabled }) => disabled ? "not-allowed" : "text"};
+  opacity: ${({ disabled }) => disabled ? "0.5" : "1"};
+  border-color: ${({ error }) => theme.colors[`${error ? "strawberry" : "oatmeal"}`]};
   outline: none;
 
   &:hover,
@@ -34,4 +67,5 @@ const StyledTextArea = styled.textarea `
     border-color: ${({ error }) => error ? theme.colors.strawberry : theme.colors.marzipan};
   }
 `;
-//# sourceMappingURL=Textarea.js.map
+
+export { Textarea };

package/dist/Toggle/Toggle.js

@@ -1,18 +1,33 @@
-import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import styled from 'styled-components';
-import { Box } from '../Box';
-import { theme } from '../theme';
-import { focusOutline } from '../utils/focusOutline';
-export const Toggle = ({ id, checked, onToggle, ...marginProps }) => {
-    return (React.createElement(Switch, { as: "label", id: id, ...marginProps },
-        React.createElement(Checkbox, { type: "checkbox", checked: checked, onChange: onToggle, onKeyDown: (e) => {
-                if (e.key === 'Enter') {
-                    onToggle();
-                }
-            } }),
-        React.createElement(Slider, null)));
+import { Box } from '../Box/Box.js';
+import { theme } from '../theme.js';
+import { focusOutline } from '../utils/focusOutline.js';
+
+const Toggle = ({
+  id,
+  checked,
+  onToggle,
+  ...marginProps
+}) => {
+  return /* @__PURE__ */ jsxs(Switch, { as: "label", id, ...marginProps, children: [
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        type: "checkbox",
+        checked,
+        onChange: onToggle,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            onToggle();
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(Slider, {})
+  ] });
 };
-const Switch = styled(Box) `
+const Switch = styled(Box)`
   position: relative;
   display: inline-block;
   width: 56px;
@@ -24,7 +39,7 @@ const Switch = styled(Box) `
     height: 0;
   }
 `;
-const Slider = styled.span `
+const Slider = styled.span`
   position: absolute;
   cursor: pointer;
   top: 0;
@@ -53,7 +68,7 @@ const Slider = styled.span `
     border-radius: 50%;
   }
 `;
-const Checkbox = styled.input `
+const Checkbox = styled.input`
   ${focusOutline({ selector: `&:focus-visible + ${Slider}` })}
 
   &:checked + ${Slider} {
@@ -65,4 +80,5 @@ const Checkbox = styled.input `
     transform: translateX(24px);
   }
 `;
-//# sourceMappingURL=Toggle.js.map
+
+export { Toggle };