@mrshmllw/smores-react 2.1.22 → 2.1.25

package/dist/TextInput/TextInput.d.ts

@@ -1,11 +1,7 @@
-import { FormEvent, FC, RefObject } from 'react';
+import React, { FormEvent } from 'react';
 declare type DefaultProps = {
-    /** ID, usually used for tests  */
-    id: string;
-    /** className attribute to apply classes from props */
+    id?: string;
     className?: string;
-    /** ref attribute for input */
-    ref?: RefObject<HTMLInputElement>;
     /** Input type for proper browser support */
     type?: 'text' | 'email' | 'password' | 'time' | 'date';
     /** used to render outlined style */
@@ -28,6 +24,8 @@ declare type DefaultProps = {
     trailingIcon?: string;
     /** Disabled flag */
     disabled?: boolean;
+    /** Required flag */
+    required?: boolean;
 };
 /** on change or on input required */
 declare type TruncateProps = {
@@ -40,5 +38,5 @@ declare type TruncateProps = {
     onInputChange: (e: FormEvent<HTMLInputElement>) => void;
 };
 export declare type TextInputProps = DefaultProps & TruncateProps;
-export declare const TextInput: FC<TextInputProps>;
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/TextInput/TextInput.js

@@ -1,22 +1,27 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { darken } from 'polished';
 import { Box } from '../Box';
 import { Text } from '../Text';
 import { Icon } from '../Icon';
 import { theme } from '../theme';
-export const TextInput = ({ id, className = '', type = 'text', placeholder, label, name, value, outlined = false, error = false, errorMsg, trailingIcon, ref, onBlur, onChange, onInputChange, disabled = false, }) => (React.createElement(Container, { className: className, hasLabel: !!label, hasError: !!errorMsg },
-    label && (React.createElement(Box, { mb: outlined ? '4px' : '0px' },
-        React.createElement(Text, { tag: "label", color: "subtext", typo: "label", htmlFor: id }, label))),
-    React.createElement(Content, { value: value, outlined: outlined, error: error },
-        React.createElement(Input, { disabled: disabled, type: type, id: id, name: name, ref: ref, placeholder: placeholder, value: value, error: error, outlined: outlined, autoComplete: "off", onChange: (e) => {
-                onChange && onChange(e.currentTarget.value);
-                onInputChange && onInputChange(e);
-            }, onBlur: (e) => {
-                onBlur && onBlur(e);
-            } }),
-        trailingIcon && React.createElement(Icon, { render: trailingIcon, color: "subtext" })),
-    error && React.createElement(ErrorBox, null, errorMsg)));
+import { useUniqueId } from '../utils/id';
+export const TextInput = forwardRef(function TextInput({ id: idProp, className = '', type = 'text', placeholder, label, name, value, outlined = false, error = false, errorMsg, trailingIcon, onBlur, onChange, onInputChange, disabled = false, required = false, }, ref) {
+    const id = useUniqueId(idProp);
+    return (React.createElement(Container, { className: className, hasLabel: !!label, hasError: !!errorMsg },
+        label && (React.createElement(Box, { mb: outlined ? '4px' : '0px' },
+            React.createElement(Text, { tag: "label", color: "subtext", typo: "label", htmlFor: id }, label),
+            required && (React.createElement(Text, { tag: "label", color: "error", typo: "label" }, "*")))),
+        React.createElement(Content, { value: value, outlined: outlined, error: error },
+            React.createElement(Input, { disabled: disabled, type: type, id: id, name: name, ref: ref, placeholder: placeholder, value: value, error: error, outlined: outlined, autoComplete: "off", onChange: (e) => {
+                    onChange && onChange(e.currentTarget.value);
+                    onInputChange && onInputChange(e);
+                }, onBlur: (e) => {
+                    onBlur && onBlur(e);
+                } }),
+            trailingIcon && React.createElement(Icon, { render: trailingIcon, color: "subtext" })),
+        error && React.createElement(ErrorBox, null, errorMsg)));
+});
 const Container = styled.div `
   display: flex;
   flex-direction: column;

package/dist/TextInput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,UAAU,EAAgB,MAAM,OAAO,CAAA;AAClE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AA8CzC,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,SAAS,CACpD,EACE,EAAE,EAAE,MAAM,EACV,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,MAAM,EACb,WAAW,EACX,KAAK,EACL,IAAI,EACJ,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,QAAQ,EACR,aAAa,EACb,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,GACD,EACjB,GAAmC;IAEnC,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAE9B,OAAO,CACL,oBAAC,SAAS,IAAC,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ;QACrE,KAAK,IAAI,CACR,oBAAC,GAAG,IAAC,EAAE,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;YAC/B,oBAAC,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,EAAE,IACvD,KAAK,CACD;YACN,QAAQ,IAAI,CACX,oBAAC,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,QAErC,CACR,CACG,CACP;QAED,oBAAC,OAAO,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK;YACrD,oBAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAA8B,EAAE,EAAE;oBAC3C,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;oBAC3C,aAAa,IAAI,aAAa,CAAC,CAAC,CAAC,CAAA;gBACnC,CAAC,EACD,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;oBACZ,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,CAAA;gBACrB,CAAC,GACD;YACD,YAAY,IAAI,oBAAC,IAAI,IAAC,MAAM,EAAE,YAAY,EAAE,KAAK,EAAC,SAAS,GAAG,CACvD;QACT,KAAK,IAAI,oBAAC,QAAQ,QAAE,QAAQ,CAAY,CAC/B,CACb,CAAA;AACH,CAAC,CAAC,CAAA;AAOF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAY;;;;CAIvC,CAAA;AASD,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAQ;;kBAEhB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC5B,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;sBAC5B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CACnC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;;;;oBAMhC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC5B,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;IAGhE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,CACxB,QAAQ;IACR;0BACsB,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO;;;KAGtE;;IAED,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACd,KAAK;IACL,KAAK,IAAI,EAAE;IACX;sBACkB,KAAK,CAAC,MAAM,CAAC,OAAO;KACrC;CACJ,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAQ;;;WAGvB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;;;;YAI9D,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;aACvD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;aAC1C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC;;;aAGtD,KAAK,CAAC,MAAM,CAAC,OAAO;;CAEhC,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;WAEjB,KAAK,CAAC,MAAM,CAAC,KAAK;;CAE5B,CAAA"}

package/dist/TextInput/TextInput.stories.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { TextInputProps } from './TextInput';
 declare const _default: {
     title: string;
-    component: React.FC<TextInputProps>;
+    component: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
     argTypes: {
         onChange: {
             action: string;
@@ -19,4 +19,5 @@ export declare const WithOutlineError: any;
 export declare const WithLabel: any;
 export declare const WithIcon: any;
 export declare const Disabled: any;
+export declare const Required: any;
 export declare const WorkingExample: any;

package/dist/TextInput/TextInput.stories.js

@@ -105,6 +105,18 @@ Disabled.args = {
     label: 'label',
     disabled: true,
 };
+export const Required = Template.bind({});
+Required.args = {
+    id: 'textInput',
+    name: 'textInput',
+    placeholder: 'Enter name',
+    onChange: noop,
+    onInputChange: noop,
+    onBlur: noop,
+    label: 'Please enter your name',
+    outlined: true,
+    required: true,
+};
 const WorkingExampleTemplate = () => React.createElement(Container, null);
 export const WorkingExample = WorkingExampleTemplate.bind({});
 //# sourceMappingURL=TextInput.stories.js.map

package/dist/TextInput/TextInput.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.stories.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,SAAS,EAAkB,MAAM,aAAa,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAEpC,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,EAAE,QAAQ,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE;CAC9C,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAqB,EAAE,EAAE,CAAC,oBAAC,SAAS,oBAAK,KAAK,EAAI,CAAA;AAEpE,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;CACb,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,GAAG;IACf,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;IACZ,IAAI,EAAE,OAAO;CACd,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE7C,YAAY,CAAC,IAAI,GAAG;IAClB,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;IACZ,IAAI,EAAE,UAAU;CACjB,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtC,KAAK,CAAC,IAAI,GAAG;IACX,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,+BAA+B;CAC1C,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE5C,WAAW,CAAC,IAAI,GAAG;IACjB,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;CACb,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEjD,gBAAgB,CAAC,IAAI,GAAG;IACtB,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE,cAAc;IACrB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,+BAA+B;CAC1C,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE1C,SAAS,CAAC,IAAI,GAAG;IACf,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,KAAK;CAChB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,OAAO;IACd,YAAY,EAAE,IAAI;CACnB,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,IAAI;CACf,CAAA;AAED,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,oBAAC,SAAS,OAAG,CAAA;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
+{"version":3,"file":"TextInput.stories.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.stories.tsx"],"names":[],"mappings":"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"}

package/dist/Textarea/Textarea.d.ts

@@ -1,11 +1,7 @@
-import { FC, FormEvent, RefObject } from 'react';
+import React, { FormEvent } from 'react';
 declare type BaseProps = {
-    /** ID, usually used for tests  */
-    id: string;
-    /** className attribute to apply classses from props */
+    id?: string;
     className?: string;
-    /** ref attribute for input */
-    ref?: RefObject<HTMLTextAreaElement>;
     /** Placeholder */
     placeholder?: string;
     /** label displayed above the input  */
@@ -28,6 +24,8 @@ declare type BaseProps = {
     onBlur?: (e: FormEvent<HTMLTextAreaElement>) => void;
     /** number of rows of input */
     rows?: number;
+    /** Required flag */
+    required?: boolean;
 };
 /** on change or on input required */
 declare type TruncateProps = {
@@ -40,5 +38,5 @@ declare type TruncateProps = {
     onInputChange: (e: FormEvent<HTMLTextAreaElement>) => void;
 };
 export declare type TextareaProps = BaseProps & TruncateProps;
-export declare const Textarea: FC<TextareaProps>;
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export {};

package/dist/Textarea/Textarea.js

@@ -1,20 +1,25 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import styled from 'styled-components';
 import { darken } from 'polished';
 import { Text } from '../Text';
 import { Box } from '../Box';
 import { theme } from '../theme';
-export const Textarea = ({ id, name, label, value, onChange, onInputChange, className, resize = 'none', error = false, errorMsg, placeholder, disabled = false, maxLength, onBlur, ref, rows = 4, }) => (React.createElement(Box, { flex: true, direction: "column", className: className },
-    label && (React.createElement(Box, { mb: "4px" },
-        React.createElement(Text, { tag: "label", color: "subtext", typo: "label", htmlFor: id }, label))),
-    React.createElement(Box, { flex: true, direction: "column" },
-        React.createElement(Field, { error: error, id: id, name: name, disabled: disabled, resize: resize, placeholder: placeholder, value: value, onChange: (e) => {
-                onChange && onChange(e.currentTarget.value);
-                onInputChange && onInputChange(e);
-            }, maxLength: maxLength, ref: ref, onBlur: (e) => {
-                onBlur && onBlur(e);
-            }, rows: rows })),
-    error && React.createElement(ErrorBox, null, errorMsg)));
+import { useUniqueId } from '../utils/id';
+export const Textarea = forwardRef(function Textarea({ id: idProp, name, label, value, onChange, onInputChange, className, resize = 'none', error = false, errorMsg, placeholder, disabled = false, maxLength, onBlur, rows = 4, required = false, }, ref) {
+    const id = useUniqueId(idProp);
+    return (React.createElement(Box, { flex: true, direction: "column", className: className },
+        label && (React.createElement(Box, { mb: "4px" },
+            React.createElement(Text, { tag: "label", color: "subtext", typo: "label", htmlFor: id }, label),
+            required && (React.createElement(Text, { tag: "label", color: "error", typo: "label" }, "*")))),
+        React.createElement(Box, { flex: true, direction: "column" },
+            React.createElement(Field, { error: error, id: id, name: name, disabled: disabled, resize: resize, placeholder: placeholder, value: value, onChange: (e) => {
+                    onChange && onChange(e.currentTarget.value);
+                    onInputChange && onInputChange(e);
+                }, maxLength: maxLength, ref: ref, onBlur: (e) => {
+                    onBlur && onBlur(e);
+                }, rows: rows })),
+        error && React.createElement(ErrorBox, null, errorMsg)));
+});
 const Field = styled.textarea `
   font-size: 16px;
   line-height: 20px;

package/dist/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA2B,UAAU,EAAE,MAAM,OAAO,CAAA;AAClE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AA8CzC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EACE,EAAE,EAAE,MAAM,EACV,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,aAAa,EACb,SAAS,EACT,MAAM,GAAG,MAAM,EACf,KAAK,GAAG,KAAK,EACb,QAAQ,EACR,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,MAAM,EACN,IAAI,GAAG,CAAC,EACR,QAAQ,GAAG,KAAK,GACF,EAChB,GAAsC;IAEtC,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL,oBAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAE,SAAS;QAC9C,KAAK,IAAI,CACR,oBAAC,GAAG,IAAC,EAAE,EAAC,KAAK;YACX,oBAAC,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAE,EAAE,IACvD,KAAK,CACD;YACN,QAAQ,IAAI,CACX,oBAAC,IAAI,IAAC,GAAG,EAAC,OAAO,EAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,QAErC,CACR,CACG,CACP;QAED,oBAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ;YAC1B,oBAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAiC,EAAE,EAAE;oBAC9C,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;oBAC3C,aAAa,IAAI,aAAa,CAAC,CAAC,CAAC,CAAA;gBACnC,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE;oBACZ,MAAM,IAAI,MAAM,CAAC,CAAC,CAAC,CAAA;gBACrB,CAAC,EACD,IAAI,EAAE,IAAI,GACV,CACE;QACL,KAAK,IAAI,oBAAC,QAAQ,QAAE,QAAQ,CAAY,CACrC,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AASF,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAW;;;gBAGxB,KAAK,CAAC,MAAM,CAAC,KAAK;sBACZ,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;WAK/B,KAAK,CAAC,MAAM,CAAC,SAAS;YACrB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;YACtB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC;aACpD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;kBACrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC5B,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;;;;;;oBAM9B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC5B,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;;IAGhE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CACd,KAAK;IACL,KAAK,IAAI,EAAE;IACX;sBACkB,KAAK,CAAC,MAAM,CAAC,OAAO;KACrC;CACJ,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAA;;;WAGjB,KAAK,CAAC,MAAM,CAAC,KAAK;CAC5B,CAAA"}

package/dist/Textarea/Textarea.stories.d.ts

@@ -2,10 +2,11 @@ import React from 'react';
 import { TextareaProps } from './Textarea';
 declare const _default: {
     title: string;
-    component: React.FC<TextareaProps>;
+    component: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 };
 export default _default;
 export declare const Default: any;
 export declare const Disabled: any;
 export declare const Error: any;
+export declare const Required: any;
 export declare const WorkingExample: any;

package/dist/Textarea/Textarea.stories.js

@@ -38,6 +38,16 @@ Error.args = {
     error: true,
     errorMsg: 'Something really quite terrible has gone wrong here!',
 };
+export const Required = Template.bind({});
+Required.args = {
+    id: 'textarea_id',
+    label: 'Textarea label',
+    value: '',
+    onChange: noop,
+    disabled: false,
+    placeholder: 'Here is some placeholder text.',
+    required: true,
+};
 const WorkingExampleTemplate = () => React.createElement(Container, null);
 export const WorkingExample = WorkingExampleTemplate.bind({});
 //# sourceMappingURL=Textarea.stories.js.map

package/dist/Textarea/Textarea.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.stories.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAA;AAEpD,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,QAAQ;CACpB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,oBAAC,QAAQ,oBAAK,KAAK,EAAI,CAAA;AAElE,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,gCAAgC;CAC9C,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,IAAI;IACd,WAAW,EAAE,gCAAgC;CAC9C,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtC,KAAK,CAAC,IAAI,GAAG;IACX,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,gCAAgC;IAC7C,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,sDAAsD;CACjE,CAAA;AAED,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,oBAAC,SAAS,OAAG,CAAA;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
+{"version":3,"file":"Textarea.stories.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,QAAQ,EAAiB,MAAM,YAAY,CAAA;AAEpD,eAAe;IACb,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,QAAQ;CACpB,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE,CAAC,oBAAC,QAAQ,oBAAK,KAAK,EAAI,CAAA;AAElE,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,gCAAgC;CAC9C,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,IAAI;IACd,WAAW,EAAE,gCAAgC;CAC9C,CAAA;AAED,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtC,KAAK,CAAC,IAAI,GAAG;IACX,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,gCAAgC;IAC7C,MAAM,EAAE,MAAM;IACd,KAAK,EAAE,IAAI;IACX,QAAQ,EAAE,sDAAsD;CACjE,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEzC,QAAQ,CAAC,IAAI,GAAG;IACd,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,gBAAgB;IACvB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,gCAAgC;IAC7C,QAAQ,EAAE,IAAI;CACf,CAAA;AAED,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,oBAAC,SAAS,OAAG,CAAA;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,sBAAsB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}

package/dist/Toggle/Toggle.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 declare type Props = {
     /** unique ID */
-    id: string;
+    id?: string;
     /** checked flag  */
     checked: boolean;
     /** onToggle listener  */

package/dist/Toggle/Toggle.stories.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 declare const _default: {
     title: string;
     component: React.FC<{
-        id: string;
+        id?: string | undefined;
         checked: boolean;
         onToggle: () => void;
     }>;

package/dist/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/setupTests.js

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+//# sourceMappingURL=setupTests.js.map

package/dist/setupTests.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"setupTests.js","sourceRoot":"","sources":["../src/setupTests.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAA"}

package/dist/utils/date.d.ts

@@ -0,0 +1 @@
+export declare const convertToUkDate: (date: Date) => Date;

package/dist/utils/date.js

@@ -0,0 +1,9 @@
+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));
+};
+//# sourceMappingURL=date.js.map

package/dist/utils/date.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date.js","sourceRoot":"","sources":["../../src/utils/date.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE;IACpD,QAAQ,EAAE,eAAe;CAC1B,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,IAAU,EAAQ,EAAE;IAClD,MAAM,UAAU,GAAG,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;IAC5C,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,CAAA;IAEhD,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAA;AAC/D,CAAC,CAAA"}

package/dist/utils/deprecated.d.ts

@@ -0,0 +1,9 @@
+export declare const isLocal: boolean;
+declare type UseDeprecatedWarningParams = {
+    enabled?: boolean;
+    title: string;
+    message: string;
+    componentProps?: Record<string, any>;
+};
+export declare const useDeprecatedWarning: ({ enabled, title, message, componentProps, }: UseDeprecatedWarningParams) => void;
+export {};

package/dist/utils/deprecated.js

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+const env = process.env.REACT_APP_NODE_ENV || process.env.ENV;
+export const isLocal = env === 'local';
+const stripUndefinedProps = (props) => {
+    const propKeys = Object.keys(props);
+    return propKeys.reduce((acc, key) => {
+        if (props[key] !== undefined) {
+            acc[key] = props[key];
+        }
+        return acc;
+    }, {});
+};
+export const useDeprecatedWarning = ({ enabled = true, title, message, componentProps, }) => {
+    useEffect(() => {
+        if (isLocal && enabled) {
+            const logs = [
+                `%c[Deprecated] ${title}`,
+                'font-weight:bold;',
+                '\n',
+                '\n',
+                message,
+            ];
+            if (componentProps) {
+                logs.push('\n', '\n', 'Component props:', stripUndefinedProps(componentProps));
+            }
+            console.warn(...logs);
+        }
+    }, [enabled]);
+};
+//# sourceMappingURL=deprecated.js.map

package/dist/utils/deprecated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"deprecated.js","sourceRoot":"","sources":["../../src/utils/deprecated.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,kBAAkB,IAAI,OAAO,CAAC,GAAG,CAAC,GAAG,CAAA;AAE7D,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,KAAK,OAAO,CAAA;AAEtC,MAAM,mBAAmB,GAAG,CAAC,KAA8B,EAAE,EAAE;IAC7D,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAEnC,OAAO,QAAQ,CAAC,MAAM,CAA0B,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;QAC3D,IAAI,KAAK,CAAC,GAAG,CAAC,KAAK,SAAS,EAAE;YAC5B,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;SACtB;QACD,OAAO,GAAG,CAAA;IACZ,CAAC,EAAE,EAAE,CAAC,CAAA;AACR,CAAC,CAAA;AASD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,OAAO,GAAG,IAAI,EACd,KAAK,EACL,OAAO,EACP,cAAc,GACa,EAAQ,EAAE;IACrC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,IAAI,OAAO,EAAE;YACtB,MAAM,IAAI,GAAU;gBAClB,kBAAkB,KAAK,EAAE;gBACzB,mBAAmB;gBACnB,IAAI;gBACJ,IAAI;gBACJ,OAAO;aACR,CAAA;YAED,IAAI,cAAc,EAAE;gBAClB,IAAI,CAAC,IAAI,CACP,IAAI,EACJ,IAAI,EACJ,kBAAkB,EAClB,mBAAmB,CAAC,cAAc,CAAC,CACpC,CAAA;aACF;YAED,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAA;SACtB;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;AACf,CAAC,CAAA"}

package/dist/utils/id.d.ts

@@ -0,0 +1,2 @@
+export declare const smoresIdPrefix = "MM_SMORES";
+export declare const useUniqueId: (id?: string) => string;

package/dist/utils/id.js

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+let idCount = 0;
+export const smoresIdPrefix = 'MM_SMORES';
+const createId = () => {
+    const id = `${smoresIdPrefix}_${idCount}`;
+    idCount += 1;
+    return id;
+};
+export const useUniqueId = (id) => {
+    const returnedId = useMemo(() => id || createId(), [id]);
+    return returnedId;
+};
+//# sourceMappingURL=id.js.map

package/dist/utils/id.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"id.js","sourceRoot":"","sources":["../../src/utils/id.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,IAAI,OAAO,GAAG,CAAC,CAAA;AAEf,MAAM,CAAC,MAAM,cAAc,GAAG,WAAW,CAAA;AAEzC,MAAM,QAAQ,GAAG,GAAW,EAAE;IAC5B,MAAM,EAAE,GAAG,GAAG,cAAc,IAAI,OAAO,EAAE,CAAA;IACzC,OAAO,IAAI,CAAC,CAAA;IAEZ,OAAO,EAAE,CAAA;AACX,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAW,EAAE,EAAE;IACzC,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,IAAI,QAAQ,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;IAExD,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA"}

package/dist/utils/id.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/id.test.js

@@ -0,0 +1,30 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { renderHook } from '@testing-library/react-hooks';
+import { smoresIdPrefix, useUniqueId } from './id';
+describe('useUniqueId', () => {
+    it('should persist the same id across render', () => __awaiter(void 0, void 0, void 0, function* () {
+        const hook = renderHook(() => useUniqueId());
+        expect(hook.result.current).toBe(`${smoresIdPrefix}_0`);
+        hook.rerender();
+        expect(hook.result.current).toBe(`${smoresIdPrefix}_0`);
+    }));
+    it('should have different id if called from different instance', () => __awaiter(void 0, void 0, void 0, function* () {
+        const hook1 = renderHook(() => useUniqueId());
+        const hook2 = renderHook(() => useUniqueId());
+        expect(hook1.result.current).not.toBe(hook2.result.current);
+    }));
+    it('should keep to provided id if present', () => __awaiter(void 0, void 0, void 0, function* () {
+        const someRandomId = 'someRandomId';
+        const hook = renderHook(() => useUniqueId(someRandomId));
+        expect(hook.result.current).toBe(someRandomId);
+    }));
+});
+//# sourceMappingURL=id.test.js.map

package/dist/utils/id.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"id.test.js","sourceRoot":"","sources":["../../src/utils/id.test.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAA;AAEzD,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,MAAM,CAAA;AAElD,QAAQ,CAAC,aAAa,EAAE,GAAG,EAAE;IAC3B,EAAE,CAAC,0CAA0C,EAAE,GAAS,EAAE;QACxD,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,CAAA;QAE5C,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,cAAc,IAAI,CAAC,CAAA;QACvD,IAAI,CAAC,QAAQ,EAAE,CAAA;QACf,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,cAAc,IAAI,CAAC,CAAA;IACzD,CAAC,CAAA,CAAC,CAAA;IAEF,EAAE,CAAC,4DAA4D,EAAE,GAAS,EAAE;QAC1E,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,CAAA;QAC7C,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,CAAA;QAE7C,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA;IAC7D,CAAC,CAAA,CAAC,CAAA;IAEF,EAAE,CAAC,uCAAuC,EAAE,GAAS,EAAE;QACrD,MAAM,YAAY,GAAG,cAAc,CAAA;QACnC,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,CAAA;QAExD,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IAChD,CAAC,CAAA,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "2.1.22",
+  "version": "2.1.25",
   "main": "./dist/index.js",
   "description": "Collection of React components used by Marshmallow Technology",
   "keywords": [
@@ -39,11 +39,14 @@
     "@storybook/storybook-deployer": "^2.8.7",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^12.0.0",
-    "@types/jest": "^26.0.14",
+    "@testing-library/react-hooks": "^8.0.0",
+    "@types/jest": "^28.1.1",
+    "@types/node": "^17.0.35",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.9",
     "@types/styled-components": "^5.1.3",
-    "@types/uuid": "^8.3.0",
+    "@types/testing-library__jest-dom": "^5.14.3",
+    "@types/testing-library__react": "^10.2.0",
     "@typescript-eslint/eslint-plugin": "^4.3.0",
     "@typescript-eslint/parser": "^4.3.0",
     "babel-eslint": "^10.1.0",
@@ -54,10 +57,11 @@
     "eslint-plugin-jest": "^26.0.0",
     "eslint-plugin-react": "^7.29.2",
     "eslint-plugin-react-hooks": "^4.1.2",
-    "husky": "^7.0.0",
+    "husky": "^8.0.1",
     "jest": "^28.0.3",
+    "jest-environment-jsdom": "^28.1.0",
     "jest-styled-components": "^7.0.3",
-    "lint-staged": "^12.0.2",
+    "lint-staged": "^13.0.0",
     "prettier": "^2.1.2",
     "storybook-addon-performance": "^0.16.1"
   },
@@ -67,8 +71,7 @@
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "styled-components": "^5.2.1",
-    "typescript": "^4.4.2",
-    "uuid": "^8.3.2"
+    "typescript": "^4.4.2"
   },
   "repository": {
     "type": "git",