@mrshmllw/smores-react 2.19.2 → 3.0.0

package/dist/Tag/__tests__/Tag.js

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import 'jest-styled-components';
 import { Tag } from '../Tag';
 test('renders', () => {
-    const { container } = render(React.createElement(Tag, { label: "Cancelled - Refunded Manually", color: "error" }));
+    const { container } = render(React.createElement(Tag, { label: "Cancelled - Refunded Manually", color: "strawberry" }));
     expect(container.firstChild).toMatchSnapshot();
 });
 //# sourceMappingURL=Tag.js.map

package/dist/Tag/__tests__/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/Tag/__tests__/Tag.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE;IACnB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,GAAG,IAAC,KAAK,EAAC,+BAA+B,EAAC,KAAK,EAAC,OAAO,GAAG,CAC5D,CAAA;IACD,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;AAChD,CAAC,CAAC,CAAA"}
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/Tag/__tests__/Tag.js"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,wBAAwB,CAAA;AAE/B,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE;IACnB,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,oBAAC,GAAG,IAAC,KAAK,EAAC,+BAA+B,EAAC,KAAK,EAAC,YAAY,GAAG,CACjE,CAAA;IACD,MAAM,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,eAAe,EAAE,CAAA;AAChD,CAAC,CAAC,CAAA"}

package/dist/Text/Text.js

@@ -16,7 +16,7 @@ import { linkStyleOverride } from '../Link/Link';
 import { Box } from '../Box';
 import { fontStyleMapping } from './fontMapping';
 export const Text = forwardRef((_a, ref) => {
-    var { children, typo = 'body-regular', className = '', tag = 'p', align = 'left', color = 'secondary', cursor = 'inherit', title = '' } = _a, props = __rest(_a, ["children", "typo", "className", "tag", "align", "color", "cursor", "title"]);
+    var { children, typo = 'body-regular', className = '', tag = 'p', align = 'left', color = 'liquorice', cursor = 'inherit', title = '' } = _a, props = __rest(_a, ["children", "typo", "className", "tag", "align", "color", "cursor", "title"]);
     return (React.createElement(Container, Object.assign({ as: tag, className: className, typo: typo, align: align, color: color, cursor: cursor, title: title }, props, { ref: ref }), children));
 });
 Text.displayName = 'Text';

package/dist/Text/Text.stories.js

@@ -28,9 +28,9 @@ const TypoCollection = ({ typos, }) => {
             React.createElement(Text, { tag: "p", typo: "base" }, "Single Line"),
             React.createElement(Text, { tag: "p", typo: "base" }, "Paragraph")),
         typos.map((typo) => (React.createElement(Grid, { key: typo },
-            React.createElement(Text, { tag: "p", typo: "base", color: "subtext" }, typo),
-            React.createElement(Text, { tag: "p", typo: typo, color: "secondary" }, "They waited patiently for what seemed a very long time."),
-            !['hero-alternate', 'hero', 'label'].includes(typo) && (React.createElement(Text, { tag: "p", typo: typo, color: "secondary" }, "They waited patiently for what seemed a very long time. They waited patiently for what seemed a very long time.")))))));
+            React.createElement(Text, { tag: "p", typo: "base", color: "sesame" }, typo),
+            React.createElement(Text, { tag: "p", typo: typo, color: "liquorice" }, "They waited patiently for what seemed a very long time."),
+            !['hero-alternate', 'hero', 'label'].includes(typo) && (React.createElement(Text, { tag: "p", typo: typo, color: "liquorice" }, "They waited patiently for what seemed a very long time. They waited patiently for what seemed a very long time.")))))));
 };
 const Grid = styled(Box) `
   display: grid;
@@ -48,7 +48,7 @@ export const Label = Template.bind({});
 Label.args = {
     tag: 'label',
     typo: 'label',
-    color: 'secondary',
+    color: 'liquorice',
 };
 export const WithTitle = Template.bind({});
 WithTitle.args = {

package/dist/Text/Text.stories.js.map

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

package/dist/Text/fontMapping.js

@@ -2,7 +2,7 @@ import { theme } from '../theme';
 export const fontStyleMapping = {
     'hero-alternate': `
     font-size: 40px;
-    font-family: 'ClearfaceITC';
+    font-family: 'MarshmallowYouth';
     font-weight: ${theme.font.weight.bold};
     line-height: 44px;
 

package/dist/TextInput/Collection.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const CollectionPage: FC;

package/dist/TextInput/Collection.js

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { Text } from '../Text';
+import { Box } from '../Box';
+import { TextInput } from './TextInput';
+import { noop } from '../utils/noop';
+import { SupportMessage } from '../SupportMessage';
+const variationList = [
+    {
+        id: 'days',
+        placeholder: 'Enter name...',
+        errorMsg: 'This field is required',
+        label: 'First name',
+        onChange: noop,
+        onInputChange: noop,
+        onBlur: noop,
+        value: '',
+    },
+];
+export const CollectionPage = () => {
+    const [, setValue] = useState('');
+    return (React.createElement(Box, { flex: true, direction: "column" }, variationList.map(({ id, placeholder, errorMsg, label }) => {
+        return (React.createElement(Box, { key: id, flex: true, direction: "column", mb: "32px" },
+            React.createElement(Title, { tag: "span", typo: "header-medium" }, "TextInput variations"),
+            React.createElement(Row, { label: "Generic" },
+                React.createElement(TextInput, { id: id, label: label, value: "", placeholder: placeholder, error: false, errorMsg: errorMsg, onChange: setValue })),
+            React.createElement(Row, { label: "Fallback" },
+                React.createElement(TextInput, { id: id, label: label, value: "", placeholder: placeholder, fallback: true, error: false, errorMsg: errorMsg, onChange: setValue })),
+            React.createElement(Row, { label: "Disabled" },
+                React.createElement(TextInput, { id: id, label: label, value: "", placeholder: placeholder, disabled: true, error: false, errorMsg: errorMsg, onChange: setValue })),
+            React.createElement(Row, { label: "Required" },
+                React.createElement(TextInput, { id: id, label: label, value: "", required: true, placeholder: placeholder, error: false, errorMsg: errorMsg, onChange: setValue })),
+            React.createElement(Row, { label: "Leading Icon" },
+                React.createElement(TextInput, { id: id, label: label, frontIcon: "search", value: "", placeholder: placeholder, error: false, errorMsg: errorMsg, onChange: setValue })),
+            React.createElement(Row, { label: "Trailing Icon" },
+                React.createElement(TextInput, { id: id, label: label, trailingIcon: "car", value: "", placeholder: placeholder, error: false, errorMsg: errorMsg, onChange: setValue })),
+            React.createElement(Row, { label: "Assistive text" },
+                React.createElement(TextInput, { id: id, label: label, value: "", placeholder: placeholder, assistiveText: "Some assistive text", error: false, errorMsg: errorMsg, onChange: setValue })),
+            React.createElement(Row, { label: "Completed" },
+                React.createElement(TextInput, { id: id, label: label, value: "", placeholder: placeholder, error: false, completed: true, errorMsg: errorMsg, onChange: setValue })),
+            React.createElement(Row, { label: "As title" },
+                React.createElement(TextInput, { id: id, label: label, value: "", renderAsTitle: true, placeholder: placeholder, error: false, errorMsg: errorMsg, onChange: setValue })),
+            React.createElement(Row, { label: "Error" },
+                React.createElement(TextInput, { id: id, label: label, value: "", required: true, placeholder: placeholder, assistiveText: "Some assistive text", error: true, errorMsg: errorMsg, onChange: setValue })),
+            React.createElement(Row, { label: "React element error" },
+                React.createElement(TextInput, { id: id, label: label, required: true, value: "", placeholder: placeholder, error: true, errorMsg: React.createElement(SupportMessage, { type: "warning", description: "error!!" }), onChange: setValue })),
+            React.createElement(Row, { label: "Fallback Error" },
+                React.createElement(TextInput, { id: id, label: label, required: true, value: "", placeholder: placeholder, fallback: true, error: true, errorMsg: errorMsg, onChange: setValue }))));
+    })));
+};
+const Row = ({ label, children, }) => {
+    return (React.createElement(RowWrapper, { mt: "32px" },
+        React.createElement(Box, { width: "140px" },
+            React.createElement(Text, { tag: "span", typo: "label-large" }, label)),
+        children));
+};
+const RowWrapper = styled(Box) `
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+`;
+const LABEL_WIDTH = '140px';
+const Title = styled(Text) `
+  margin-bottom: 12px;
+  font-size: 18px;
+  line-height: 20px;
+  margin-left: ${LABEL_WIDTH};
+`;
+//# sourceMappingURL=Collection.js.map

package/dist/TextInput/Collection.js.map

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

package/dist/TextInput/TextInput.d.ts

@@ -6,9 +6,6 @@ interface Props extends CommonFieldProps {
     name?: string;
     value: string;
     onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
-    trailingIcon?: string;
-    disabled?: boolean;
-    outlined?: boolean;
 }
 /** on change or on input required */
 type InputProps = {

package/dist/TextInput/TextInput.js

@@ -10,73 +10,20 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { forwardRef } from 'react';
-import styled from 'styled-components';
-import { darken } from 'polished';
-import { theme } from '../theme';
 import { Field } from '../fields/Field';
 import { Box } from '../Box';
-import { Icon } from '../Icon';
 import { useUniqueId } from '../utils/id';
+import { Input, StyledFrontIcon, StyledTrailingIcon, } from '../fields/components/CommonInput';
 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, trailingIcon } = _a, fieldProps = __rest(_a, ["id", "type", "placeholder", "name", "value", "outlined", "error", "onBlur", "onChange", "onInputChange", "disabled", "trailingIcon"]);
+    var { id: idProp, type = 'text', placeholder, name, value, error = false, onBlur, onChange, onInputChange, disabled = false, frontIcon, trailingIcon, fallback } = _a, fieldProps = __rest(_a, ["id", "type", "placeholder", "name", "value", "error", "onBlur", "onChange", "onInputChange", "disabled", "frontIcon", "trailingIcon", "fallback"]);
     const id = useUniqueId(idProp);
-    return (React.createElement(Field, Object.assign({}, fieldProps, { htmlFor: id, error: error, outlined: outlined }),
-        React.createElement(Box, { flex: true },
-            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) => {
+    return (React.createElement(Field, Object.assign({}, 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, fallback: fallback, autoComplete: "off", onChange: (e) => {
                     onChange && onChange(e.currentTarget.value);
                     onInputChange && onInputChange(e);
                 }, onBlur: onBlur }),
-            trailingIcon && React.createElement(StyledIcon, { render: trailingIcon, color: "subtext" }))));
+            trailingIcon && (React.createElement(StyledTrailingIcon, { disabled: disabled, render: trailingIcon, color: "sesame" })))));
 });
-const StyledInput = styled.input `
-  border: none;
-  border-bottom: 1px solid;
-  border-color: ${({ error }) => theme.colors[`${error ? 'error' : 'outline'}`]};
-  background-color: transparent;
-  color: ${({ error }) => theme.colors[`${error ? 'error' : 'secondary'}`]};
-  font-size: 16px;
-  width: 100%;
-  outline: none;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'initial')};
-  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
-  padding: ${({ outlined }) => (outlined ? '17px 14px' : '1px 2px')};
-  &:hover,
-  &:focus-within {
-    border-color: ${({ error }) => error ? theme.colors.error : darken(0.1, theme.colors.outline)};
-  }
-
-  ${({ outlined, error }) => outlined &&
-    `
-      background-color: ${theme.colors.white};
-      border: 2px solid ${error ? theme.colors.error : theme.colors.outline};
-      border-radius: 8px;
-      height: auto;
-    `}
-
-  ${({ value }) => value &&
-    value != '' &&
-    `
-      border-color: ${theme.colors.outline};
-    `}
-
-  ${({ trailingIcon }) => trailingIcon &&
-    trailingIcon != '' &&
-    `
-      padding-right: 24px;
-    `}
-
-  ${({ outlined }) => outlined &&
-    `
-      border-radius: 8px;
-      height: auto;
-    `}
-
-  &::placeholder {
-    color: ${theme.colors.subtext};
-  }
-`;
-const StyledIcon = styled(Icon) `
-  position: relative;
-  left: -24px;
-`;
 //# 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,EAAyB,UAAU,EAAgB,MAAM,OAAO,CAAA;AAE9E,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EACL,KAAK,EACL,eAAe,EACf,kBAAkB,GACnB,MAAM,kCAAkC,CAAA;AAyBzC,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,SAAS,CACpD,EAeiB,EACjB,GAAmC;QAhBnC,EACE,EAAE,EAAE,MAAM,EACV,IAAI,GAAG,MAAM,EACb,WAAW,EACX,IAAI,EACJ,KAAK,EACL,KAAK,GAAG,KAAK,EACb,MAAM,EACN,QAAQ,EACR,aAAa,EACb,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,YAAY,EACZ,QAAQ,OAEO,EADZ,UAAU,cAdf,mJAeC,CADc;IAIf,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAE9B,OAAO,CACL,oBAAC,KAAK,oBAAK,UAAU,IAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK;QAC9C,oBAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,YAAY;YACtD,SAAS,IAAI,CACZ,oBAAC,eAAe,IACd,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,SAAS,EACjB,KAAK,EAAC,QAAQ,GACd,CACH;YACD,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,SAAS,EAAE,SAAS,EACpB,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,MAAM,GACd;YACD,YAAY,IAAI,CACf,oBAAC,kBAAkB,IACjB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,YAAY,EACpB,KAAK,EAAC,QAAQ,GACd,CACH,CACG,CACA,CACT,CAAA;AACH,CAAC,CAAC,CAAA"}

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

@@ -11,15 +11,7 @@ declare const _default: {
 };
 export default _default;
 export declare const Default: any;
-export declare const TypeEmail: any;
+export declare const DefaultFallback: any;
 export declare const TypePassword: any;
-export declare const Error: any;
-export declare const WithOutline: any;
-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 AssistiveText: any;
-export declare const WithReactElementError: any;
+export declare const Collection: any;
 export declare const WorkingExample: any;

package/dist/TextInput/TextInput.stories.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { TextInput } from './TextInput';
-import { SupportMessage } from '../SupportMessage';
 import { Container } from './Container';
 import { noop } from '../utils/noop';
+import { CollectionPage } from './Collection';
 export default {
     title: 'Text Input',
     component: TextInput,
@@ -18,15 +18,15 @@ Default.args = {
     onInputChange: noop,
     onBlur: noop,
 };
-export const TypeEmail = Template.bind({});
-TypeEmail.args = {
+export const DefaultFallback = Template.bind({});
+DefaultFallback.args = {
     id: 'textInput',
     name: 'textInput',
     placeholder: 'Placeholder text',
+    fallback: true,
     onChange: noop,
     onInputChange: noop,
     onBlur: noop,
-    type: 'email',
 };
 export const TypePassword = Template.bind({});
 TypePassword.args = {
@@ -38,113 +38,7 @@ TypePassword.args = {
     onBlur: noop,
     type: 'password',
 };
-export const Error = Template.bind({});
-Error.args = {
-    id: 'textInput',
-    name: 'textInput',
-    placeholder: 'Placeholder text',
-    onChange: noop,
-    onInputChange: noop,
-    onBlur: noop,
-    error: true,
-    errorMsg: 'Oh boy, something went wrong!',
-};
-export const WithOutline = Template.bind({});
-WithOutline.args = {
-    id: 'textInput',
-    name: 'textInput',
-    outlined: true,
-    label: 'with outline',
-    placeholder: 'Placeholder text',
-    onChange: noop,
-    onInputChange: noop,
-    onBlur: noop,
-};
-export const WithOutlineError = Template.bind({});
-WithOutlineError.args = {
-    id: 'textInput',
-    name: 'textInput',
-    outlined: true,
-    label: 'with outline',
-    placeholder: 'Placeholder text',
-    onChange: noop,
-    onInputChange: noop,
-    onBlur: noop,
-    error: true,
-    errorMsg: 'Oh boy, something went wrong!',
-};
-export const WithLabel = Template.bind({});
-WithLabel.args = {
-    id: 'textInput',
-    name: 'textInput',
-    placeholder: 'Placeholder text',
-    onChange: noop,
-    onInputChange: noop,
-    onBlur: noop,
-    label: 'label',
-    outlined: false,
-};
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-    id: 'textInput',
-    name: 'textInput',
-    placeholder: 'Placeholder text',
-    onChange: noop,
-    onInputChange: noop,
-    onBlur: noop,
-    label: 'label',
-    trailingIcon: 'at',
-};
-export const Disabled = Template.bind({});
-Disabled.args = {
-    id: 'textInput',
-    name: 'textInput',
-    placeholder: 'Placeholder text',
-    onChange: noop,
-    onInputChange: noop,
-    onBlur: noop,
-    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,
-};
-export const AssistiveText = Template.bind({});
-AssistiveText.args = {
-    id: 'textInput',
-    name: 'textInput',
-    placeholder: 'Enter name',
-    onChange: noop,
-    onInputChange: noop,
-    onBlur: noop,
-    label: 'Please enter your name',
-    outlined: true,
-    required: true,
-    assistiveText: 'Some more information...',
-    renderAsTitle: true,
-};
-export const WithReactElementError = Template.bind({});
-WithReactElementError.args = {
-    id: 'textInput',
-    name: 'textInput',
-    outlined: true,
-    label: 'with Support Message as Error',
-    placeholder: 'Placeholder text',
-    onChange: noop,
-    onInputChange: noop,
-    onBlur: noop,
-    error: true,
-    errorMsg: React.createElement(SupportMessage, { type: "warning", description: "error!!" }),
-};
+export const Collection = CollectionPage.bind({});
 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":"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"}
+{"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;AACpC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAA;AAE7C,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,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEhD,eAAe,CAAC,IAAI,GAAG;IACrB,EAAE,EAAE,WAAW;IACf,IAAI,EAAE,WAAW;IACjB,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,IAAI;IACd,aAAa,EAAE,IAAI;IACnB,MAAM,EAAE,IAAI;CACb,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,UAAU,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEjD,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/Textarea/Container.js

@@ -3,6 +3,6 @@ import { Textarea } from './Textarea';
 export const Container = () => {
     const [value, setValue] = useState('');
     return (React.createElement("form", null,
-        React.createElement(Textarea, { id: "textarea_id", label: "Textarea label", value: value, resize: "both", onChange: setValue, disabled: false, error: value.length > 255, errorMsg: `Your text is ${value.length} characters long. The maximum is 255 characters. Please make it shorter`, placeholder: "Here is some placeholder text." })));
+        React.createElement(Textarea, { id: "textarea_id", label: "Textarea label", value: value, resize: "both", onChange: setValue, assistiveText: "This is some assistive text", disabled: false, error: value.length > 255, errorMsg: `Your text is ${value.length} characters long. The maximum is 255 characters. Please make it shorter`, placeholder: "Here is some placeholder text." })));
 };
 //# sourceMappingURL=Container.js.map

package/dist/Textarea/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../src/Textarea/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAEtC,OAAO,CACL;QACE,oBAAC,QAAQ,IACP,EAAE,EAAC,aAAa,EAChB,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAC,MAAM,EACb,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,KAAK,EACf,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,GAAG,EACzB,QAAQ,EAAE,gBAAgB,KAAK,CAAC,MAAM,yEAAyE,EAC/G,WAAW,EAAC,gCAAgC,GAC5C,CACG,CACR,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Container.js","sourceRoot":"","sources":["../../src/Textarea/Container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAErC,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;IAEtC,OAAO,CACL;QACE,oBAAC,QAAQ,IACP,EAAE,EAAC,aAAa,EAChB,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAC,MAAM,EACb,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAC,6BAA6B,EAC3C,QAAQ,EAAE,KAAK,EACf,KAAK,EAAE,KAAK,CAAC,MAAM,GAAG,GAAG,EACzB,QAAQ,EAAE,gBAAgB,KAAK,CAAC,MAAM,yEAAyE,EAC/G,WAAW,EAAC,gCAAgC,GAC5C,CACG,CACR,CAAA;AACH,CAAC,CAAA"}

package/dist/Textarea/Textarea.d.ts

@@ -13,6 +13,7 @@ type BaseProps = {
     maxLength?: number;
     onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void;
     rows?: number;
+    fallback?: boolean;
 } & CommonFieldProps & MarginProps;
 type TruncateProps = {
     onChange: (e: string) => void;

package/dist/Textarea/Textarea.js

@@ -11,45 +11,39 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from 'react';
 import styled from 'styled-components';
-import { darken } from 'polished';
 import { theme } from '../theme';
 import { useUniqueId } from '../utils/id';
 import { Field } from '../fields/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"]);
+    var { id: idProp, name, value, onChange, onInputChange, resize = 'none', error = false, placeholder, disabled = false, maxLength, onBlur, rows = 4, fallback } = _a, fieldProps = __rest(_a, ["id", "name", "value", "onChange", "onInputChange", "resize", "error", "placeholder", "disabled", "maxLength", "onBlur", "rows", "fallback"]);
     const id = useUniqueId(idProp);
     return (React.createElement(Field, Object.assign({}, fieldProps, { htmlFor: id, error: error }),
-        React.createElement(StyledTextArea, { ref: ref, error: error, id: id, name: name, disabled: disabled, resize: resize, placeholder: placeholder, value: value, onChange: (e) => {
+        React.createElement(StyledTextArea, { ref: ref, error: error, id: id, name: name, disabled: disabled, resize: resize, fallback: fallback, 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 StyledTextArea = styled.textarea `
   font-size: 16px;
+  font: inherit;
   line-height: 20px;
-  background: ${theme.colors.white};
-  border: 2px solid ${theme.colors.outline};
+  background: ${({ fallback }) => fallback ? theme.colors.custard : theme.colors.cream};
+  border: 2px solid ${theme.colors.oatmeal};
   box-sizing: border-box;
-  border-radius: 8px;
+  border-radius: 12px;
   width: 100%;
-  padding: 16px;
-  color: ${theme.colors.secondary};
+  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 ? 'error' : 'outline'}`]};
+  border-color: ${({ error }) => theme.colors[`${error ? 'strawberry' : 'oatmeal'}`]};
   outline: none;
 
   &:hover,
   &:focus,
   &:focus-visible {
-    border-color: ${({ error }) => error ? theme.colors.error : darken(0.1, theme.colors.outline)};
+    border-color: ${({ error }) => error ? theme.colors.strawberry : theme.colors.marzipan};
   }
-
-  ${({ value }) => value &&
-    value != '' &&
-    `
-      border-color: ${theme.colors.outline};
-    `}
 `;
 //# 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":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAuC,UAAU,EAAE,MAAM,OAAO,CAAA;AAC9E,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,iBAAiB,CAAA;AA+BvC,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,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK;QAC9C,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,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"}
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/Textarea/Textarea.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAuC,UAAU,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAgCvC,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAC,SAAS,QAAQ,CAClD,EAegB,EAChB,GAAsC;QAhBtC,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,EACR,QAAQ,OAEM,EADX,UAAU,cAdf,6IAeC,CADc;IAIf,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL,oBAAC,KAAK,oBAAK,UAAU,IAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK;QAC9C,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,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;AAUF,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAU;;;;gBAIhC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC7B,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;sBAClC,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,YAAY,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;;;;;;oBAMnC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAC5B,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;;CAE5D,CAAA"}

package/dist/Textarea/Textarea.stories.js

@@ -45,6 +45,8 @@ Required.args = {
     value: '',
     onChange: noop,
     disabled: false,
+    maxLength: 200,
+    showCharacterCount: true,
     placeholder: 'Here is some placeholder text.',
     required: true,
 };

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,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,CAAC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEjD,gBAAgB,CAAC,IAAI,GAAG;IACtB,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,KAAK;IACf,aAAa,EAAE,IAAI;CACpB,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,SAAS,EAAE,GAAG;IACd,kBAAkB,EAAE,IAAI;IACxB,WAAW,EAAE,gCAAgC;IAC7C,QAAQ,EAAE,IAAI;CACf,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAEjD,gBAAgB,CAAC,IAAI,GAAG;IACtB,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,KAAK;IACf,aAAa,EAAE,IAAI;CACpB,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.js

@@ -17,13 +17,17 @@ import { Box } from '../Box';
 export const Toggle = (_a) => {
     var { id, checked, onToggle } = _a, marginProps = __rest(_a, ["id", "checked", "onToggle"]);
     return (React.createElement(Switch, Object.assign({ as: "label", id: id }, marginProps),
-        React.createElement(Checkbox, { type: "checkbox", checked: checked, onChange: onToggle }),
+        React.createElement(Checkbox, { type: "checkbox", checked: checked, onChange: onToggle, onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    onToggle();
+                }
+            } }),
         React.createElement(Slider, null)));
 };
 const Switch = styled(Box) `
   position: relative;
   display: inline-block;
-  width: 50px;
+  width: 56px;
   height: 32px;
 
   input {
@@ -39,21 +43,24 @@ const Slider = styled.span `
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: ${theme.colors.bgPrimary};
-  border: 1px solid;
-  border-color: ${theme.colors.bgPrimary};
+  background-color: ${theme.colors.oatmeal};
+  border: none;
   border-radius: 28px;
-  transition: 0.2s background-color border-color;
+  transition: 0.2s background-color;
   outline: none;
 
+  &:hover {
+    background-color: ${theme.colors.marzipan};
+  }
+
   &:before {
     position: absolute;
     content: '';
     height: 24px;
     width: 24px;
-    left: 3px;
-    bottom: 3px;
-    background-color: ${theme.colors.white};
+    left: 4px;
+    bottom: 4px;
+    background-color: ${theme.colors.mascarpone};
     transition: 0.2s transform;
     border-radius: 50%;
   }
@@ -62,13 +69,12 @@ const Checkbox = styled.input `
   ${focusOutline({ selector: `&:focus-visible + ${Slider}` })}
 
   &:checked + ${Slider} {
-    background-color: ${theme.colors.success};
-    border: 1px solid;
-    border-color: ${theme.colors.success};
+    background-color: ${theme.colors.liquorice};
+    border: none;
   }
 
   &:checked + ${Slider}:before {
-    transform: translateX(18px);
+    transform: translateX(24px);
   }
 `;
 //# sourceMappingURL=Toggle.js.map