@mrshmllw/smores-react 6.0.0 → 6.0.2

package/dist/src/Tag/Tag.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Text } from '../Text';
+import { theme } from '../theme';
+import { Box } from '../Box';
+export const Tag = ({ label, color, borderColor, bgColor, className, ...marginProps }) => (React.createElement(Wrapper, { bgColor: bgColor, className: className, borderColor: borderColor, ...marginProps, alignContent: "center", justifyContent: "center" },
+    React.createElement(TagText, { tag: "span", typo: "label", color: color }, label)));
+const Wrapper = styled(Box) `
+  background-color: ${({ bgColor }) => bgColor && theme.colors[bgColor]};
+  border: ${({ borderColor }) => borderColor && `1px solid ${theme.colors[borderColor]}`};
+
+  border-radius: 6px;
+  padding: 4px 8px;
+
+  height: 22px;
+
+  box-sizing: border-box;
+  display: inline-flex;
+`;
+const TagText = styled(Text) `
+  display: flex;
+  align-items: center;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 12px;
+  text-transform: uppercase;
+`;
+//# sourceMappingURL=Tag.js.map

package/dist/src/Tag/Tag.js.map

@@ -0,0 +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;AAGtC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAU5B,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,GAAG,WAAW,EACf,EAAE,EAAE,CAAC,CACJ,oBAAC,OAAO,IACN,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,KACpB,WAAW,EACf,YAAY,EAAC,QAAQ,EACrB,cAAc,EAAC,QAAQ;IAEvB,oBAAC,OAAO,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,KAAK,IAC1C,KAAK,CACE,CACF,CACX,CAAA;AAID,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAc;sBACnB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;YAC3D,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAC5B,WAAW,IAAI,aAAa,KAAK,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE;;;;;;;;;CAS1D,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;CAO3B,CAAA"}

package/dist/src/Tag/index.js

@@ -0,0 +1,2 @@
+export { Tag } from './Tag';
+//# sourceMappingURL=index.js.map

package/dist/src/Tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA"}

package/dist/src/Text/Text.js

@@ -0,0 +1,152 @@
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { theme } from '../theme';
+import { linkStyleOverride } from '../Link/Link';
+import { Box } from '../Box';
+import { fontStyleMapping } from './fontMapping';
+export const Text = forwardRef(({ children, typo = 'body-regular', className = '', tag = 'p', align = 'left', color = 'liquorice', cursor = 'inherit', title = '', ...props }, ref) => (React.createElement(Container, { as: tag, className: className, typo: typo, align: align, color: color, cursor: cursor, title: title, ...props, ref: ref }, children)));
+Text.displayName = 'Text';
+const isNewTypo = (value) => {
+    return Object.keys(fontStyleMapping).includes(value);
+};
+const Container = styled(Box)(({ align, color, cursor, typo }) => css `
+    /** TYPOGRAPHY STYLES */
+
+    ${isNewTypo(typo) && fontStyleMapping[typo]}
+
+    /** DEPRECATED TYPOGRAPHY STYLES */
+    ${typo === 'header-large' &&
+    css `
+      font-size: 24px;
+      line-height: 31px;
+      font-weight: 500;
+
+      @media (min-width: 768px) {
+        font-size: 42px;
+        line-height: 54px;
+      }
+    `}
+
+  ${typo === 'header-medium' &&
+    css `
+      font-size: 21px;
+      line-height: 27px;
+      font-weight: 500;
+
+      @media (min-width: 768px) {
+        font-size: 32px;
+        line-height: 41px;
+      }
+    `}
+
+  ${typo === 'header-small' &&
+    css `
+      font-size: 18px;
+      line-height: 23px;
+      font-weight: 500;
+
+      @media (min-width: 768px) {
+        font-size: 21px;
+        line-height: 27px;
+      }
+    `}
+
+  ${typo === 'desc-heavy' &&
+    css `
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: 700;
+
+      @media (min-width: 768px) {
+        font-size: 16px;
+        line-height: 23px;
+      }
+    `}
+
+  ${typo === 'desc-medium' &&
+    css `
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: 500;
+
+      @media (min-width: 768px) {
+        font-size: 16px;
+        line-height: 23px;
+      }
+    `}
+
+  ${typo === 'desc-light' &&
+    css `
+      font-size: 14px;
+      line-height: 20px;
+      font-weight: 400;
+
+      @media (min-width: 768px) {
+        font-size: 16px;
+        line-height: 23px;
+      }
+    `}
+
+  ${typo === 'desc-small' &&
+    css `
+      font-size: 12px;
+      line-height: 16px;
+      font-weight: 400;
+
+      @media (min-width: 768px) {
+        font-size: 14px;
+        line-height: 18px;
+      }
+    `}
+
+  ${typo === 'base' &&
+    css `
+      font-size: 14px;
+      line-height: 23px;
+      font-weight: 400;
+
+      @media (min-width: 768px) {
+        font-size: 16px;
+        line-height: 26px;
+      }
+    `}
+
+  ${typo === 'base-small' &&
+    css `
+      font-size: 12px;
+      line-height: 20px;
+      font-weight: 400;
+
+      @media (min-width: 768px) {
+        font-size: 14px;
+        line-height: 23px;
+      }
+    `}
+
+  ${typo === 'base-xsmall' &&
+    css `
+      font-size: 10px;
+      line-height: 16px;
+      font-weight: 400;
+
+      @media (min-width: 768px) {
+        font-size: 12px;
+        line-height: 19px;
+      }
+    `}
+  
+  ${typo === 'label-large' &&
+    css `
+      font-size: 12px;
+      line-height: 100%;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.75px;
+    `}
+
+    text-align: ${align};
+    cursor: ${cursor};
+    color: ${theme.colors[color]};
+    ${linkStyleOverride({ color: theme.colors[color] })}
+  `);
+//# sourceMappingURL=Text.js.map

package/dist/src/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../../src/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,UAAU,EAAkC,MAAM,OAAO,CAAA;AAC7E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAE5B,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AA8DhD,MAAM,CAAC,MAAM,IAAI,GAAkB,UAAU,CAC3C,CACE,EACE,QAAQ,EACR,IAAI,GAAG,cAAc,EACrB,SAAS,GAAG,EAAE,EACd,GAAG,GAAG,GAAG,EACT,KAAK,GAAG,MAAM,EACd,KAAK,GAAG,WAAW,EACnB,MAAM,GAAG,SAAS,EAClB,KAAK,GAAG,EAAE,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE,CAAC,CACH,oBAAC,SAAS,IACR,EAAE,EAAE,GAAG,EACP,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,KACR,KAAK,EACT,GAAG,EAAE,GAAG,IAEP,QAAQ,CACC,CACb,CACF,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,MAAM,SAAS,GAAG,CAAC,KAAa,EAAiB,EAAE;IACjD,OAAO,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;AACtD,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;MAGnC,SAAS,CAAC,IAAI,CAAC,IAAI,gBAAgB,CAAC,IAAI,CAAC;;;MAGzC,IAAI,KAAK,cAAc;IACzB,GAAG,CAAA;;;;;;;;;KASF;;IAED,IAAI,KAAK,eAAe;IACxB,GAAG,CAAA;;;;;;;;;KASF;;IAED,IAAI,KAAK,cAAc;IACvB,GAAG,CAAA;;;;;;;;;KASF;;IAED,IAAI,KAAK,YAAY;IACrB,GAAG,CAAA;;;;;;;;;KASF;;IAED,IAAI,KAAK,aAAa;IACtB,GAAG,CAAA;;;;;;;;;KASF;;IAED,IAAI,KAAK,YAAY;IACrB,GAAG,CAAA;;;;;;;;;KASF;;IAED,IAAI,KAAK,YAAY;IACrB,GAAG,CAAA;;;;;;;;;KASF;;IAED,IAAI,KAAK,MAAM;IACf,GAAG,CAAA;;;;;;;;;KASF;;IAED,IAAI,KAAK,YAAY;IACrB,GAAG,CAAA;;;;;;;;;KASF;;IAED,IAAI,KAAK,aAAa;IACtB,GAAG,CAAA;;;;;;;;;KASF;;IAED,IAAI,KAAK,aAAa;IACtB,GAAG,CAAA;;;;;;KAMF;;kBAEa,KAAK;cACT,MAAM;aACP,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;MAC1B,iBAAiB,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;GACpD,CACF,CAAA"}

package/dist/src/Text/fontMapping.js

@@ -0,0 +1,87 @@
+import { theme } from '../theme';
+export const fontStyleMapping = {
+    'hero-alternate': `
+    font-size: 40px;
+    font-family: 'MarshmallowYouth';
+    font-weight: ${theme.font.weight.bold};
+    line-height: 40px;
+
+    @media (min-width: 768px) {
+      font-size: 56px;
+      line-height: 52px;
+    }
+  `,
+    hero: `
+    font-size: 32px;
+    font-weight: ${theme.font.weight.medium};
+    line-height: 40px;
+
+    @media (min-width: 768px) {
+      font-size: 40px;
+      line-height: 44px;
+    }
+  `,
+    'heading-alternate': `
+    font-size: 40px;
+    font-family: 'MarshmallowYouth';
+    font-weight: ${theme.font.weight.bold};
+    line-height: 40px;
+  `,
+    'heading-large': `
+    font-size: 28px;
+    font-weight: ${theme.font.weight.medium};
+    line-height: 32px;
+
+    @media (min-width: 768px) {
+      font-size: 32px;
+      line-height: 40px;
+    }
+  `,
+    'heading-medium': `
+    font-size: 24px;
+    font-weight: ${theme.font.weight.medium};
+    line-height: 32px;
+  `,
+    'heading-small': `
+    font-size: 20px;
+    font-weight: ${theme.font.weight.medium};
+    line-height: 28px;
+  `,
+    'headline-regular': `
+    font-size: 16px;
+    font-weight: ${theme.font.weight.medium};
+    line-height: 20px;
+  `,
+    'headline-small': `
+    font-size: 14px;
+    font-weight: ${theme.font.weight.medium};
+    line-height: 20px;
+  `,
+    'body-standfirst': `
+    font-size: 18px;
+    font-weight: ${theme.font.weight.normal};
+    line-height: 24px;
+  `,
+    'body-regular': `
+    font-size: 16px;
+    font-weight: ${theme.font.weight.normal};
+    line-height: 20px;
+  `,
+    'body-small': `
+    font-size: 14px;
+    font-weight: ${theme.font.weight.normal};
+    line-height: 20px;
+  `,
+    caption: `
+    font-size: 12px;
+    font-weight: ${theme.font.weight.normal};
+    line-height: 16px;
+  `,
+    label: `
+    font-size: 10px;
+    line-height: 12px;
+    font-weight: ${theme.font.weight.medium};
+    text-transform: uppercase;
+  `,
+};
+//# sourceMappingURL=fontMapping.js.map

package/dist/src/Text/fontMapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fontMapping.js","sourceRoot":"","sources":["../../../src/Text/fontMapping.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAGhC,MAAM,CAAC,MAAM,gBAAgB,GAAyB;IACpD,gBAAgB,EAAE;;;mBAGD,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;;;GAOtC;IACD,IAAI,EAAE;;mBAEW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;GAOxC;IACD,mBAAmB,EAAE;;;mBAGJ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;GAEtC;IACD,eAAe,EAAE;;mBAEA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;GAOxC;IACD,gBAAgB,EAAE;;mBAED,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,eAAe,EAAE;;mBAEA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,kBAAkB,EAAE;;mBAEH,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,gBAAgB,EAAE;;mBAED,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,iBAAiB,EAAE;;mBAEF,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,cAAc,EAAE;;mBAEC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,YAAY,EAAE;;mBAEG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,OAAO,EAAE;;mBAEQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,KAAK,EAAE;;;mBAGU,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;CACF,CAAA"}

package/dist/src/Text/index.js

@@ -0,0 +1,2 @@
+export * from './Text';
+//# sourceMappingURL=index.js.map

package/dist/src/Text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Text/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA"}

package/dist/src/TextInput/TextInput.js

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

package/dist/src/TextInput/TextInput.js.map

@@ -0,0 +1 @@
+{"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,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,aAAa,EACb,GAAG,UAAU,EACE,EACjB,GAAmC;IAEnC,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAE9B,OAAO,CACL,oBAAC,KAAK,OAAK,UAAU,EAAE,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,aAAa,EAAE,aAAa,EAC5B,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/src/TextInput/index.js

@@ -0,0 +1,2 @@
+export { TextInput } from './TextInput';
+//# sourceMappingURL=index.js.map

package/dist/src/TextInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/TextInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA"}

package/dist/src/Textarea/Textarea.js

@@ -0,0 +1,37 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { theme } from '../theme';
+import { useUniqueId } from '../utils/id';
+import { Field } from '../fields/Field';
+export const Textarea = forwardRef(function Textarea({ id: idProp, name, value, onChange, onInputChange, resize = 'none', error = false, placeholder, disabled = false, maxLength, onBlur, rows = 4, fallbackStyle, ...fieldProps }, ref) {
+    const id = useUniqueId(idProp);
+    return (React.createElement(Field, { ...fieldProps, htmlFor: id, error: error },
+        React.createElement(StyledTextArea, { ref: ref, error: error, id: id, name: name, disabled: disabled, resize: resize, fallbackStyle: fallbackStyle, placeholder: placeholder, value: value, onChange: (e) => {
+                onChange?.(e.currentTarget.value);
+                onInputChange?.(e);
+            }, maxLength: maxLength, onBlur: onBlur, rows: rows })));
+});
+const StyledTextArea = styled.textarea `
+  font-size: 16px;
+  font: inherit;
+  line-height: 20px;
+  background: ${({ fallbackStyle }) => fallbackStyle ? theme.colors.custard : theme.colors.cream};
+  border: 2px solid ${theme.colors.oatmeal};
+  box-sizing: border-box;
+  border-radius: 12px;
+  width: 100%;
+  padding: 18px 14px;
+  color: ${theme.colors.liquorice};
+  resize: ${({ resize }) => resize};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'text')};
+  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
+  border-color: ${({ error }) => theme.colors[`${error ? 'strawberry' : 'oatmeal'}`]};
+  outline: none;
+
+  &:hover,
+  &:focus,
+  &:focus-visible {
+    border-color: ${({ error }) => error ? theme.colors.strawberry : theme.colors.marzipan};
+  }
+`;
+//# sourceMappingURL=Textarea.js.map

package/dist/src/Textarea/Textarea.js.map

@@ -0,0 +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;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,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,aAAa,EACb,GAAG,UAAU,EACC,EAChB,GAAsC;IAEtC,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAC9B,OAAO,CACL,oBAAC,KAAK,OAAK,UAAU,EAAE,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,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAiC,EAAE,EAAE;gBAC9C,QAAQ,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;gBACjC,aAAa,EAAE,CAAC,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,aAAa,EAAE,EAAE,EAAE,CAClC,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;sBACvC,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/src/Textarea/index.js

@@ -0,0 +1,2 @@
+export { Textarea } from './Textarea';
+//# sourceMappingURL=index.js.map

package/dist/src/Textarea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Textarea/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA"}

package/dist/src/Toggle/Toggle.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from '../Box';
+import { theme } from '../theme';
+import { focusOutline } from '../utils/focusOutline';
+export const Toggle = ({ id, checked, onToggle, ...marginProps }) => {
+    return (React.createElement(Switch, { as: "label", id: id, ...marginProps },
+        React.createElement(Checkbox, { type: "checkbox", checked: checked, onChange: onToggle, onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    onToggle();
+                }
+            } }),
+        React.createElement(Slider, null)));
+};
+const Switch = styled(Box) `
+  position: relative;
+  display: inline-block;
+  width: 56px;
+  height: 32px;
+
+  input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+`;
+const Slider = styled.span `
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: ${theme.colors.oatmeal};
+  border: none;
+  border-radius: 28px;
+  transition: 0.2s background-color;
+  outline: none;
+
+  &:hover {
+    background-color: ${theme.colors.marzipan};
+  }
+
+  &:before {
+    position: absolute;
+    content: '';
+    height: 24px;
+    width: 24px;
+    left: 4px;
+    bottom: 4px;
+    background-color: ${theme.colors.mascarpone};
+    transition: 0.2s transform;
+    border-radius: 50%;
+  }
+`;
+const Checkbox = styled.input `
+  ${focusOutline({ selector: `&:focus-visible + ${Slider}` })}
+
+  &:checked + ${Slider} {
+    background-color: ${theme.colors.pistachio};
+    border: none;
+  }
+
+  &:checked + ${Slider}:before {
+    transform: translateX(24px);
+  }
+`;
+//# sourceMappingURL=Toggle.js.map

package/dist/src/Toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../src/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAYpD,MAAM,CAAC,MAAM,MAAM,GAAc,CAAC,EAChC,EAAE,EACF,OAAO,EACP,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,MAAM,IAAC,EAAE,EAAC,OAAO,EAAC,EAAE,EAAE,EAAE,KAAM,WAAW;QACxC,oBAAC,QAAQ,IACP,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;gBACf,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;oBACtB,QAAQ,EAAE,CAAA;gBACZ,CAAC;YACH,CAAC,GACD;QACF,oBAAC,MAAM,OAAG,CACH,CACV,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;CAWzB,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;;;sBAOJ,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;wBAOlB,KAAK,CAAC,MAAM,CAAC,QAAQ;;;;;;;;;;wBAUrB,KAAK,CAAC,MAAM,CAAC,UAAU;;;;CAI9C,CAAA;AAED,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAA;IACzB,YAAY,CAAC,EAAE,QAAQ,EAAE,qBAAqB,MAAM,EAAE,EAAE,CAAC;;gBAE7C,MAAM;wBACE,KAAK,CAAC,MAAM,CAAC,SAAS;;;;gBAI9B,MAAM;;;CAGrB,CAAA"}

package/dist/src/Toggle/index.js

@@ -0,0 +1,2 @@
+export { Toggle } from './Toggle';
+//# sourceMappingURL=index.js.map

package/dist/src/Toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA"}