@mrshmllw/smores-react 2.1.26 → 2.2.0

package/dist/SearchInput/SearchInput.js

@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { darken } from 'polished';
-import { Text } from '../Text';
-import { Box } from '../Box';
 import { theme } from '../theme';
 import { Icon } from '../Icon';
+import { Field } from '../Field';
 import { useUniqueId } from '../utils/id';
-export const SearchInput = ({ id: idProp, name = 'search_input', label, placeholder, searchList, onFound, resultsRelativePosition = false, outlined = false, showIcon = false, }) => {
+export const SearchInput = ({ id: idProp, name = 'search_input', label, className = '', placeholder, searchList, onFound, resultsRelativePosition = false, outlined = false, showIcon = false, renderAsTitle = false, }) => {
     const id = useUniqueId(idProp);
     const [active, setActive] = useState(false);
     const [list, setList] = useState([]);
@@ -15,10 +14,8 @@ export const SearchInput = ({ id: idProp, name = 'search_input', label, placehol
     const search = (e) => {
         const value = e.currentTarget.value;
         if (value) {
-            // start filtering if the input has at least 2 characters
             if (value.length >= 2) {
                 const filteredList = searchList.filter((el) => el.label.toLowerCase().includes(value.toLocaleLowerCase()));
-                // update the local state with the filtered results
                 setActive(true);
                 setList(filteredList);
             }
@@ -37,21 +34,15 @@ export const SearchInput = ({ id: idProp, name = 'search_input', label, placehol
         onFound(selectedItem.value);
         setSelected(true);
     };
-    return (React.createElement(Container, null,
-        label && (React.createElement(Box, { mb: outlined ? '4px' : '0px' },
-            React.createElement(Text, { tag: "label", color: "subtext", typo: "label", htmlFor: id }, label))),
-        React.createElement(InputBox, { outlined: outlined, selected: selected },
-            showIcon && React.createElement(SearchIcon, { size: 24, render: "search", color: "subtext" }),
-            React.createElement(Input, { id: id, type: "text", name: name, placeholder: placeholder, autoComplete: "off", value: selectedResult, onKeyUp: search, onChange: updateInputState, outlined: outlined, selected: selected })),
-        React.createElement(ResultsContainer, { show: active, absolutePosition: !resultsRelativePosition, outlined: outlined },
-            React.createElement(ResultsList, { outlined: outlined }, list.length ? (list.map((el, i) => (React.createElement("li", { key: i, onClick: () => select(el) }, el.label)))) : (React.createElement("li", null, "No results"))))));
+    return (React.createElement(Field, { className: className, renderAsTitle: renderAsTitle, id: id, label: label, outlined: outlined, value: selectedResult },
+        React.createElement(React.Fragment, null,
+            React.createElement(StyledInputBox, { outlined: outlined, selected: selected },
+                showIcon && React.createElement(SearchIcon, { size: 24, render: "search", color: "subtext" }),
+                React.createElement(StyledInput, { id: id, type: "text", name: name, placeholder: placeholder, autoComplete: "off", value: selectedResult, onKeyUp: search, onChange: updateInputState, outlined: outlined, selected: selected })),
+            React.createElement(StyledResultsContainer, { show: active, absolutePosition: !resultsRelativePosition, outlined: outlined },
+                React.createElement(ResultsList, { outlined: outlined }, list.length ? (list.map((el, i) => (React.createElement("li", { key: i, onClick: () => select(el) }, el.label)))) : (React.createElement("li", null, "No results")))))));
 };
-const Container = styled.div `
-  position: relative;
-  width: 100%;
-  background: ${theme.colors.white};
-`;
-const InputBox = styled.div `
+const StyledInputBox = styled.div `
   display: flex;
   align-items: center;
   border-bottom: ${({ outlined }) => outlined ? 'none' : `1px solid ${theme.colors.outline}`};
@@ -75,7 +66,7 @@ const InputBox = styled.div `
   `}
   color: ${({ outlined }) => outlined ? `${theme.colors.outline}` : `${theme.colors.secondary}`};
 `;
-const Input = styled.input `
+const StyledInput = styled.input `
   display: block;
   border: none;
   outline: none;
@@ -92,7 +83,7 @@ const Input = styled.input `
     height: auto;
   `}
 `;
-const ResultsContainer = styled.div `
+const StyledResultsContainer = styled.div `
   box-sizing: border-box;
   overflow-y: hidden;
   ${({ absolutePosition }) => absolutePosition && 'position: absolute;'}

package/dist/SearchInput/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":"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"}

package/dist/SupportMessage/SupportMessage.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, ReactElement } from 'react';
 declare type SupportMessageType = 'info' | 'info-outline' | 'alert' | 'warning';
 export declare type SupportMessageProps = {
     className?: string;
-    description: string;
+    description: string | ReactElement;
     type: SupportMessageType;
     title?: string;
 };

package/dist/SupportMessage/SupportMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SupportMessage.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAElC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAS,MAAM,UAAU,CAAA;AAQvC,MAAM,MAAM,GAA2C;IACrD,IAAI,EAAE;QACJ,SAAS,EAAE,WAAW;QACtB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;QACxC,IAAI,EAAE,MAAM;KACb;IACD,cAAc,EAAE;QACd,SAAS,EAAE,WAAW;QACtB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;QACnC,IAAI,EAAE,MAAM;KACb;IACD,KAAK,EAAE;QACL,SAAS,EAAE,cAAc;QACzB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW;QACzC,IAAI,EAAE,OAAO;KACd;IACD,OAAO,EAAE;QACP,SAAS,EAAE,OAAO;QAClB,eAAe,EAAE,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAClD,IAAI,EAAE,SAAS;KAChB;CACF,CAAA;AAWD,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACtD,SAAS,EACT,WAAW,EACX,IAAI,GAAG,MAAM,EACb,KAAK,GACN,EAAE,EAAE,CAAC,CACJ,oBAAC,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI;IACvC,oBAAC,WAAW;QACV,oBAAC,IAAI,IACH,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,EACzB,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,GAC7B,CACU;IACd,oBAAC,UAAU,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ;QAChC,KAAK,IAAI,oBAAC,KAAK,QAAE,KAAK,CAAS;QAC/B,WAAW,CACD,CACL,CACX,CAAA;AAMD,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE9B,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CACxB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;wBAEK,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe;MAC9C,IAAI,KAAK,cAAc,IAAI,qBAAqB,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;;;;;GAK3E,CACF,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;WAEnB,KAAK,CAAC,MAAM,CAAC,SAAS;;CAEhC,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAA;;iBAEL,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;WAC9B,KAAK,CAAC,MAAM,CAAC,SAAS;;;CAGhC,CAAA"}
+{"version":3,"file":"SupportMessage.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAA;AAC/C,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAElC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,KAAK,EAAS,MAAM,UAAU,CAAA;AAQvC,MAAM,MAAM,GAA2C;IACrD,IAAI,EAAE;QACJ,SAAS,EAAE,WAAW;QACtB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;QACxC,IAAI,EAAE,MAAM;KACb;IACD,cAAc,EAAE;QACd,SAAS,EAAE,WAAW;QACtB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK;QACnC,IAAI,EAAE,MAAM;KACb;IACD,KAAK,EAAE;QACL,SAAS,EAAE,cAAc;QACzB,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,WAAW;QACzC,IAAI,EAAE,OAAO;KACd;IACD,OAAO,EAAE;QACP,SAAS,EAAE,OAAO;QAClB,eAAe,EAAE,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QAClD,IAAI,EAAE,SAAS;KAChB;CACF,CAAA;AAWD,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,EACtD,SAAS,EACT,WAAW,EACX,IAAI,GAAG,MAAM,EACb,KAAK,GACN,EAAE,EAAE,CAAC,CACJ,oBAAC,OAAO,IAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI;IACvC,oBAAC,WAAW;QACV,oBAAC,IAAI,IACH,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,EACzB,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,GAC7B,CACU;IACd,oBAAC,UAAU,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ;QAChC,KAAK,IAAI,oBAAC,KAAK,QAAE,KAAK,CAAS;QAC/B,WAAW,CACD,CACL,CACX,CAAA;AAMD,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE9B,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CACxB,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;wBAEK,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe;MAC9C,IAAI,KAAK,cAAc,IAAI,qBAAqB,KAAK,CAAC,MAAM,CAAC,SAAS,EAAE;;;;;GAK3E,CACF,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;WAEnB,KAAK,CAAC,MAAM,CAAC,SAAS;;CAEhC,CAAA;AAED,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAA;;iBAEL,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;WAC9B,KAAK,CAAC,MAAM,CAAC,SAAS;;;CAGhC,CAAA"}

package/dist/SupportMessage/SupportMessage.stories.d.ts

@@ -6,4 +6,5 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: any;
+export declare const WithCustomDescription: any;
 export declare const Collection: any;

package/dist/SupportMessage/SupportMessage.stories.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { SupportMessage } from './SupportMessage';
+import { Link } from '../Link';
 import { CollectionPage } from './Collection';
 export default {
     title: 'SupportMessage',
@@ -13,5 +14,13 @@ const supportMessageArgs = {
     description: 'Some description text',
 };
 Default.args = supportMessageArgs;
+export const WithCustomDescription = Template.bind({});
+WithCustomDescription.args = {
+    type: 'info',
+    title: 'A SupportMessage using the Link component',
+    description: (React.createElement(React.Fragment, null,
+        "Some text rendered using a ",
+        React.createElement(Link, { href: '' }, "Link"))),
+};
 export const Collection = CollectionPage.bind({});
 //# sourceMappingURL=SupportMessage.stories.js.map

package/dist/SupportMessage/SupportMessage.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"SupportMessage.stories.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAuB,MAAM,kBAAkB,CAAA;AACtE,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE7C,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,cAAc;CAC1B,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAA0B,EAAE,EAAE,CAAC,CAC/C,oBAAC,cAAc,oBAAK,KAAK,kCAA+C,CACzE,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,MAAM,kBAAkB,GAAwB;IAC9C,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,uBAAuB;CACrC,CAAA;AAED,OAAO,CAAC,IAAI,GAAG,kBAAkB,CAAA;AAEjC,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}
+{"version":3,"file":"SupportMessage.stories.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAuB,MAAM,kBAAkB,CAAA;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE7C,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,cAAc;CAC1B,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAA0B,EAAE,EAAE,CAAC,CAC/C,oBAAC,cAAc,oBAAK,KAAK,kCAA+C,CACzE,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,MAAM,kBAAkB,GAAwB;IAC9C,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,uBAAuB;CACrC,CAAA;AAED,OAAO,CAAC,IAAI,GAAG,kBAAkB,CAAA;AAEjC,MAAM,CAAC,MAAM,qBAAqB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEtD,qBAAqB,CAAC,IAAI,GAAG;IAC3B,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,2CAA2C;IAClD,WAAW,EAAE,CACX;;QAC6B,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,WAAa,CACrD,CACJ;CACF,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}

package/dist/SupportMessage/SupportMessage.test.js

@@ -11,6 +11,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import 'jest-styled-components';
 import { SupportMessage } from './SupportMessage';
+import { Link } from '../Link';
 const supportMessageProps = {
     description: 'Type info support message',
     type: 'info',
@@ -26,5 +27,12 @@ describe('SupportMessage component', () => {
         expect(yield findByText('Type info support message')).toBeInTheDocument();
         expect(yield findByText('Info title')).toBeInTheDocument();
     }));
+    it('Renders a Link within the description', () => {
+        const { container } = render(React.createElement(React.Fragment, null,
+            "Some text rendered with a ",
+            React.createElement(Link, { href: '' }, "Link"),
+            ' '));
+        expect(container.firstChild).toMatchSnapshot();
+    });
 });
 //# sourceMappingURL=SupportMessage.test.js.map

package/dist/SupportMessage/SupportMessage.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"SupportMessage.test.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.test.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,cAAc,EAAuB,MAAM,kBAAkB,CAAA;AAEtE,MAAM,mBAAmB,GAAwB;IAC/C,WAAW,EAAE,2BAA2B;IACxC,IAAI,EAAE,MAAM;CACb,CAAA;AAED,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;IACxC,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAAA;IAC7B,EAAE,CAAC,2CAA2C,EAAE,GAAS,EAAE;QACzD,MAAM,CAAC,oBAAC,cAAc,oBAAK,mBAAmB,EAAI,CAAC,CAAA;QAEnD,MAAM,CAAC,MAAM,UAAU,CAAC,2BAA2B,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAA;IAC3E,CAAC,CAAA,CAAC,CAAA;IAEF,EAAE,CAAC,sDAAsD,EAAE,GAAS,EAAE;QACpE,MAAM,CAAC,oBAAC,cAAc,oBAAK,mBAAmB,IAAE,KAAK,EAAC,YAAY,IAAG,CAAC,CAAA;QAEtE,MAAM,CAAC,MAAM,UAAU,CAAC,2BAA2B,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAA;QACzE,MAAM,CAAC,MAAM,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAA;IAC5D,CAAC,CAAA,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
+{"version":3,"file":"SupportMessage.test.js","sourceRoot":"","sources":["../../src/SupportMessage/SupportMessage.test.tsx"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AACvD,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,cAAc,EAAuB,MAAM,kBAAkB,CAAA;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAE9B,MAAM,mBAAmB,GAAwB;IAC/C,WAAW,EAAE,2BAA2B;IACxC,IAAI,EAAE,MAAM;CACb,CAAA;AAED,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;IACxC,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAAA;IAC7B,EAAE,CAAC,2CAA2C,EAAE,GAAS,EAAE;QACzD,MAAM,CAAC,oBAAC,cAAc,oBAAK,mBAAmB,EAAI,CAAC,CAAA;QAEnD,MAAM,CAAC,MAAM,UAAU,CAAC,2BAA2B,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAA;IAC3E,CAAC,CAAA,CAAC,CAAA;IAEF,EAAE,CAAC,sDAAsD,EAAE,GAAS,EAAE;QACpE,MAAM,CAAC,oBAAC,cAAc,oBAAK,mBAAmB,IAAE,KAAK,EAAC,YAAY,IAAG,CAAC,CAAA;QAEtE,MAAM,CAAC,MAAM,UAAU,CAAC,2BAA2B,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAA;QACzE,MAAM,CAAC,MAAM,UAAU,CAAC,YAAY,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAA;IAC5D,CAAC,CAAA,CAAC,CAAA;IAEF,EAAE,CAAC,uCAAuC,EAAE,GAAG,EAAE;QAC/C,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B;;YAC4B,oBAAC,IAAI,IAAC,IAAI,EAAE,EAAE,WAAa;YAAC,GAAG,CACxD,CACJ,CAAA;QACD,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;IAChD,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/dist/Tag/Tag.d.ts

@@ -1,11 +1,20 @@
 import { FC } from 'react';
 import { Color } from '../theme';
-export declare type TagProps = {
+export declare type DefaultProps = {
     label: string;
     className?: string;
     color: Color;
+    typo?: string;
+};
+declare type GradientProps = {
     bgColor: Color;
     borderColor: Color;
-    typo?: string;
+    bgGradient?: boolean;
+} | {
+    bgColor?: Color;
+    borderColor?: Color;
+    bgGradient: boolean;
 };
+export declare type TagProps = DefaultProps & GradientProps;
 export declare const Tag: FC<TagProps>;
+export {};

package/dist/Tag/Tag.js

@@ -2,12 +2,14 @@ import React from 'react';
 import styled from 'styled-components';
 import { Text } from '../Text';
 import { theme } from '../theme';
-export const Tag = ({ label, color, borderColor, bgColor, className, typo, }) => (React.createElement(Wrapper, { bgColor: bgColor, className: className, borderColor: borderColor },
+export const Tag = ({ label, color, borderColor, bgColor, className, typo, bgGradient = false, }) => (React.createElement(Wrapper, { bgColor: bgColor, className: className, borderColor: borderColor, bgGradient: bgGradient },
     React.createElement(TagText, { tag: "span", typo: typo !== null && typo !== void 0 ? typo : 'label', color: color }, label)));
 const Wrapper = styled.div `
-  background-color: ${({ bgColor }) => theme.colors[bgColor]};
+  background-color: ${({ bgColor }) => bgColor && theme.colors[bgColor]};
+  background: ${({ bgGradient }) => bgGradient &&
+    `linear-gradient(90deg, rgba(247, 46, 73, 1) 0%, rgba(246, 148, 210, 1) 100%)`};
   border-radius: 8px;
-  border: 1px solid ${({ borderColor }) => theme.colors[borderColor]};
+  border: ${({ borderColor }) => borderColor && `1px solid ${theme.colors[borderColor]}`};
   box-sizing: border-box;
   display: inline-flex;
   height: 23px;

package/dist/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAWvC,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAI,GACL,EAAE,EAAE,CAAC,CACJ,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW;IACvE,oBAAC,OAAO,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,OAAO,EAAE,KAAK,EAAE,KAAK,IACpD,KAAK,CACE,CACF,CACX,CAAA;AAID,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAc;sBAClB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;sBAEtC,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC;;;;;CAKnE,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;CAK3B,CAAA"}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAyBvC,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,IAAI,EACJ,UAAU,GAAG,KAAK,GACnB,EAAE,EAAE,CAAC,CACJ,oBAAC,OAAO,IACN,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU;IAEtB,oBAAC,OAAO,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,OAAO,EAAE,KAAK,EAAE,KAAK,IACpD,KAAK,CACE,CACF,CACX,CAAA;AAID,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAc;sBAClB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;gBACvD,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAC/B,UAAU;IACV,8EAA8E;;YAEtE,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAC5B,WAAW,IAAI,aAAa,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE;;;;;CAK1D,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;CAK3B,CAAA"}

package/dist/Tag/Tag.stories.d.ts

@@ -6,3 +6,4 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: any;
+export declare const BgGradient: any;

package/dist/Tag/Tag.stories.js

@@ -17,4 +17,10 @@ Default.argTypes = {
     as: { table: { disable: true } },
     forwardedAs: { table: { disable: true } },
 };
+export const BgGradient = Template.bind({});
+BgGradient.args = {
+    label: 'This is a gradient background tag',
+    bgGradient: true,
+    color: 'white',
+};
 //# sourceMappingURL=Tag.stories.js.map

package/dist/Tag/Tag.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.stories.js","sourceRoot":"","sources":["../../src/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,GAAG,EAAY,MAAM,OAAO,CAAA;AAErC,eAAe;IACb,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,GAAG;CACf,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAe,EAAE,EAAE,CAAC,oBAAC,GAAG,oBAAK,KAAK,EAAI,CAAA;AAExD,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,eAAe;IACtB,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,SAAS;IACtB,KAAK,EAAE,OAAO;CACf,CAAA;AAED,OAAO,CAAC,QAAQ,GAAG;IACjB,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IAChC,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAC1C,CAAA"}
+{"version":3,"file":"Tag.stories.js","sourceRoot":"","sources":["../../src/Tag/Tag.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,GAAG,EAAY,MAAM,OAAO,CAAA;AAErC,eAAe;IACb,KAAK,EAAE,KAAK;IACZ,SAAS,EAAE,GAAG;CACf,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAe,EAAE,EAAE,CAAC,oBAAC,GAAG,oBAAK,KAAK,EAAI,CAAA;AAExD,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAExC,OAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,eAAe;IACtB,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,SAAS;IACtB,KAAK,EAAE,OAAO;CACf,CAAA;AAED,OAAO,CAAC,QAAQ,GAAG;IACjB,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACnC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IAChC,WAAW,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAC1C,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE3C,UAAU,CAAC,IAAI,GAAG;IAChB,KAAK,EAAE,mCAAmC;IAC1C,UAAU,EAAE,IAAI;IAChB,KAAK,EAAE,OAAO;CACf,CAAA"}

package/dist/TextInput/TextInput.d.ts

@@ -1,34 +1,16 @@
 import React, { FormEvent } from 'react';
-declare type DefaultProps = {
-    id?: string;
-    className?: string;
-    /** Input type for proper browser support */
+import { CommonFieldTypes } from 'Field/types/commonFieldTypes';
+interface Props extends CommonFieldTypes {
     type?: 'text' | 'email' | 'password' | 'time' | 'date';
-    /** used to render outlined style */
-    outlined?: boolean;
-    /** Placeholder */
     placeholder: string;
-    /** label displayed above the input  */
-    label?: string;
-    /** used for label - input connection */
     name?: string;
-    /** input value */
     value: string;
-    /** error flag */
-    error?: boolean;
-    /** error text message */
-    errorMsg?: string;
-    /** onBlur listener */
     onBlur?: (e: FormEvent<HTMLInputElement>) => void;
-    /** used for adding a trailing icon */
     trailingIcon?: string;
-    /** Disabled flag */
     disabled?: boolean;
-    /** Required flag */
-    required?: boolean;
-};
+}
 /** on change or on input required */
-declare type TruncateProps = {
+declare type InputProps = {
     /** on change is required and on input optional */
     onChange: (e: string) => void;
     onInputChange?: (e: FormEvent<HTMLInputElement>) => void;
@@ -37,6 +19,6 @@ declare type TruncateProps = {
     onChange?: (e: string) => void;
     onInputChange: (e: FormEvent<HTMLInputElement>) => void;
 };
-export declare type TextInputProps = DefaultProps & TruncateProps;
+export declare type TextInputProps = Props & InputProps;
 export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/TextInput/TextInput.js

@@ -1,59 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 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';
+import { Field } from '../Field';
 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) {
+export const TextInput = forwardRef(function TextInput(_a, ref) {
+    var { id: idProp, type = 'text', placeholder, name, value, outlined = false, error = false, onBlur, onChange, onInputChange, disabled = false } = _a, fieldProps = __rest(_a, ["id", "type", "placeholder", "name", "value", "outlined", "error", "onBlur", "onChange", "onInputChange", "disabled"]);
     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) => {
+    return (React.createElement(Field, Object.assign({}, fieldProps, { id: id, error: error, outlined: outlined, value: value }),
+        React.createElement(React.Fragment, null,
+            React.createElement(StyledInput, { 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;
-  height: auto;
-`;
-const Content = styled.div `
+const StyledInput = styled.input `
   border-bottom: 1px solid;
   border-color: ${({ error }) => theme.colors[`${error ? 'error' : 'outline'}`]};
-  background-color: ${({ outlined }) => outlined ? 'transparent' : theme.colors['white']};
-  display: flex;
-  height: 32px;
-
-  &:hover,
-  &:focus-within {
-    border-color: ${({ error }) => error ? theme.colors.error : darken(0.1, theme.colors.outline)};
-  }
-
-  ${({ outlined, error }) => outlined &&
-    `
-      border: 2px solid ${error ? theme.colors.error : theme.colors.outline};
-      border-radius: 8px;
-      height: auto;
-    `}
-
-  ${({ value }) => value &&
-    value != '' &&
-    `
-      border-color: ${theme.colors.outline};
-    `}
-`;
-const Input = styled.input `
-  border: none;
   background-color: transparent;
   color: ${({ error }) => theme.colors[`${error ? 'error' : 'secondary'}`]};
   font-size: 16px;
@@ -67,9 +42,4 @@ const Input = styled.input `
     color: ${theme.colors.subtext};
   }
 `;
-const ErrorBox = styled.span `
-  margin-top: 7px;
-  color: ${theme.colors.error};
-  font-size: 12px;
-`;
 //# sourceMappingURL=TextInput.js.map

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;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AA4BzC,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,SAAS,CACpD,EAaiB,EACjB,GAAmC;QAdnC,EACE,EAAE,EAAE,MAAM,EACV,IAAI,GAAG,MAAM,EACb,WAAW,EACX,IAAI,EACJ,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,KAAK,EACb,MAAM,EACN,QAAQ,EACR,aAAa,EACb,QAAQ,GAAG,KAAK,OAED,EADZ,UAAU,cAZf,sHAaC,CADc;IAIf,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAE9B,OAAO,CACL,oBAAC,KAAK,oBACA,UAAU,IACd,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK;QAEZ;YACE,oBAAC,WAAW,IACV,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,CACD,CACG,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AASF,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAO;;kBAErB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC5B,KAAK,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;;WAEvC,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"}

package/dist/Textarea/Textarea.d.ts

@@ -2,38 +2,24 @@ import React, { FormEvent } from 'react';
 declare type BaseProps = {
     id?: string;
     className?: string;
-    /** Placeholder */
     placeholder?: string;
-    /** label displayed above the input  */
     label?: string;
-    /** used for label - input connection */
     name?: string;
-    /** input value */
     value: string;
-    /** error flag */
     error?: boolean;
-    /** error text message */
     errorMsg?: string;
-    /** Allow user to resize the textarea vertically and horizontally or not */
     resize?: 'none' | 'both';
-    /** Disabled flag */
     disabled?: boolean;
-    /** maxLength property */
     maxLength?: number;
-    /** onBlur listener */
     onBlur?: (e: FormEvent<HTMLTextAreaElement>) => void;
-    /** number of rows of input */
     rows?: number;
-    /** Required flag */
     required?: boolean;
+    renderAsTitle?: boolean;
 };
-/** on change or on input required */
 declare type TruncateProps = {
-    /** on change is required and on input optional */
     onChange: (e: string) => void;
     onInputChange?: (e: FormEvent<HTMLTextAreaElement>) => void;
 } | {
-    /** on input is required and on change optional */
     onChange?: (e: string) => void;
     onInputChange: (e: FormEvent<HTMLTextAreaElement>) => void;
 };

package/dist/Textarea/Textarea.js

@@ -1,26 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 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';
 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) {
+import { Field } from '../Field';
+export const Textarea = forwardRef(function Textarea(_a, ref) {
+    var { id: idProp, name, value, onChange, onInputChange, resize = 'none', error = false, placeholder, disabled = false, maxLength, onBlur, rows = 4 } = _a, fieldProps = __rest(_a, ["id", "name", "value", "onChange", "onInputChange", "resize", "error", "placeholder", "disabled", "maxLength", "onBlur", "rows"]);
     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)));
+    return (React.createElement(Field, Object.assign({}, fieldProps, { id: id, error: error, value: value, fullHeight: true }),
+        React.createElement(StyledTextArea, { error: error, id: id, name: name, disabled: disabled, resize: resize, placeholder: placeholder, value: value, onChange: (e) => {
+                onChange === null || onChange === void 0 ? void 0 : onChange(e.currentTarget.value);
+                onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(e);
+            }, maxLength: maxLength, onBlur: onBlur, rows: rows })));
 });
-const Field = styled.textarea `
+const StyledTextArea = styled.textarea `
   font-size: 16px;
   line-height: 20px;
   background: ${theme.colors.white};
@@ -48,9 +52,4 @@ const Field = styled.textarea `
       border-color: ${theme.colors.outline};
     `}
 `;
-const ErrorBox = styled.span `
-  margin-top: 7px;
-  font-size: 12px;
-  color: ${theme.colors.error};
-`;
 //# sourceMappingURL=Textarea.js.map

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,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAgChC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EAcgB,EAChB,GAAsC;QAftC,EACE,EAAE,EAAE,MAAM,EACV,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,aAAa,EACb,MAAM,GAAG,MAAM,EACf,KAAK,GAAG,KAAK,EACb,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,MAAM,EACN,IAAI,GAAG,CAAC,OAEM,EADX,UAAU,cAbf,iIAcC,CADc;IAIf,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL,oBAAC,KAAK,oBAAK,UAAU,IAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU;QACnE,oBAAC,cAAc,IACb,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;gBAC9C,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;gBACjC,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAG,CAAC,CAAC,CAAA;YACpB,CAAC,EACD,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,GACV,CACI,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AASF,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAU;;;gBAGhC,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"}

package/dist/index.d.ts

@@ -29,3 +29,4 @@ export * from './Textarea';
 export * from './TextInput';
 export * from './theme';
 export * from './Toggle';
+export * from './Fieldset';

package/dist/index.js

@@ -29,4 +29,5 @@ export * from './Textarea';
 export * from './TextInput';
 export * from './theme';
 export * from './Toggle';
+export * from './Fieldset';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,4BAA4B,CAAA;AAC1C,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,4BAA4B,CAAA;AAC1C,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "2.1.26",
+  "version": "2.2.0",
   "main": "./dist/index.js",
   "description": "Collection of React components used by Marshmallow Technology",
   "keywords": [
@@ -41,7 +41,7 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^8.0.0",
     "@types/jest": "^28.1.1",
-    "@types/node": "^17.0.35",
+    "@types/node": "^18.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.9",
     "@types/styled-components": "^5.1.3",