@mrshmllw/smores-react 6.0.1 → 6.0.2

package/dist/Text/Text.js

@@ -1,173 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { theme } from '../theme.js';
-import { linkStyleOverride } from '../Link/Link.js';
-import { Box } from '../Box/Box.js';
-import { fontStyleMapping } from './fontMapping.js';
-
-const Text = forwardRef(
-  ({
-    children,
-    typo = "body-regular",
-    className = "",
-    tag = "p",
-    align = "left",
-    color = "liquorice",
-    cursor = "inherit",
-    title = "",
-    ...props
-  }, ref) => /* @__PURE__ */ jsx(
-    Container,
-    {
-      as: tag,
-      className,
-      typo,
-      align,
-      color,
-      cursor,
-      title,
-      ...props,
-      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] })}
-  `
-);
-
-export { Text };
-//# sourceMappingURL=Text.js.map

package/dist/Text/Text.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Text.js","sources":["../../src/Text/Text.tsx"],"sourcesContent":["import React, { FC, forwardRef, LabelHTMLAttributes, ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Color, theme } from '../theme'\nimport { linkStyleOverride } from '../Link/Link'\nimport { Box } from '../Box'\nimport { MarginProps } from '../utils/space'\nimport { fontStyleMapping } from './fontMapping'\n\ninterface IText {\n  /** typography class name to apply predefined styles */\n  typo: string\n  /** HTML tag  */\n  as: any\n  /** text-align  */\n  align: string\n  /** color from the theme  */\n  color: Color\n  cursor: string\n}\n\n/**\n * @deprecated Use only new Typo\n */\n\nexport type DeprecatedTypo =\n  | 'header-large'\n  | 'header-medium'\n  | 'header-small'\n  | 'desc-heavy'\n  | 'desc-medium'\n  | 'desc-light'\n  | 'desc-small'\n  | 'base'\n  | 'base-small'\n  | 'base-xsmall'\n  | 'label-large'\n\nexport type Typo =\n  | 'hero-alternate'\n  | 'hero'\n  | 'heading-alternate'\n  | 'heading-large'\n  | 'heading-medium'\n  | 'heading-small'\n  | 'headline-regular'\n  | 'headline-small'\n  | 'body-standfirst'\n  | 'body-regular'\n  | 'body-small'\n  | 'caption'\n  | 'label'\n\ntype Props = {\n  children: ReactNode\n  tag?: any\n  className?: string\n  // Record<never, never> matches any non-null and non-undefined type so\n  // IntelliSense can suggest Typo to autocomplete\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  typo?: Typo | (string & Record<never, never>)\n  align?: string\n  color?: Color\n  cursor?: string\n  title?: string\n} & MarginProps\n\nexport type TextProps = Props & Omit<LabelHTMLAttributes<HTMLElement>, 'color'>\n\nexport const Text: FC<TextProps> = forwardRef<HTMLElement, TextProps>(\n  (\n    {\n      children,\n      typo = 'body-regular',\n      className = '',\n      tag = 'p',\n      align = 'left',\n      color = 'liquorice',\n      cursor = 'inherit',\n      title = '',\n      ...props\n    },\n    ref,\n  ) => (\n    <Container\n      as={tag}\n      className={className}\n      typo={typo}\n      align={align}\n      color={color}\n      cursor={cursor}\n      title={title}\n      {...props}\n      ref={ref}\n    >\n      {children}\n    </Container>\n  ),\n)\n\nText.displayName = 'Text'\n\nconst isNewTypo = (value: string): value is Typo => {\n  return Object.keys(fontStyleMapping).includes(value)\n}\n\nconst Container = styled(Box)<IText>(\n  ({ align, color, cursor, typo }) => css`\n    /** TYPOGRAPHY STYLES */\n\n    ${isNewTypo(typo) && fontStyleMapping[typo]}\n\n    /** DEPRECATED TYPOGRAPHY STYLES */\n    ${typo === 'header-large' &&\n    css`\n      font-size: 24px;\n      line-height: 31px;\n      font-weight: 500;\n\n      @media (min-width: 768px) {\n        font-size: 42px;\n        line-height: 54px;\n      }\n    `}\n\n  ${typo === 'header-medium' &&\n    css`\n      font-size: 21px;\n      line-height: 27px;\n      font-weight: 500;\n\n      @media (min-width: 768px) {\n        font-size: 32px;\n        line-height: 41px;\n      }\n    `}\n\n  ${typo === 'header-small' &&\n    css`\n      font-size: 18px;\n      line-height: 23px;\n      font-weight: 500;\n\n      @media (min-width: 768px) {\n        font-size: 21px;\n        line-height: 27px;\n      }\n    `}\n\n  ${typo === 'desc-heavy' &&\n    css`\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 700;\n\n      @media (min-width: 768px) {\n        font-size: 16px;\n        line-height: 23px;\n      }\n    `}\n\n  ${typo === 'desc-medium' &&\n    css`\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 500;\n\n      @media (min-width: 768px) {\n        font-size: 16px;\n        line-height: 23px;\n      }\n    `}\n\n  ${typo === 'desc-light' &&\n    css`\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 16px;\n        line-height: 23px;\n      }\n    `}\n\n  ${typo === 'desc-small' &&\n    css`\n      font-size: 12px;\n      line-height: 16px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 14px;\n        line-height: 18px;\n      }\n    `}\n\n  ${typo === 'base' &&\n    css`\n      font-size: 14px;\n      line-height: 23px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 16px;\n        line-height: 26px;\n      }\n    `}\n\n  ${typo === 'base-small' &&\n    css`\n      font-size: 12px;\n      line-height: 20px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 14px;\n        line-height: 23px;\n      }\n    `}\n\n  ${typo === 'base-xsmall' &&\n    css`\n      font-size: 10px;\n      line-height: 16px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 12px;\n        line-height: 19px;\n      }\n    `}\n  \n  ${typo === 'label-large' &&\n    css`\n      font-size: 12px;\n      line-height: 100%;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.75px;\n    `}\n\n    text-align: ${align};\n    cursor: ${cursor};\n    color: ${theme.colors[color]};\n    ${linkStyleOverride({ color: theme.colors[color] })}\n  `,\n)\n"],"names":[],"mappings":";;;;;;;;AAqEO,MAAM,IAAsB,GAAA,UAAA;AAAA,EACjC,CACE;AAAA,IACE,QAAA;AAAA,IACA,IAAO,GAAA,cAAA;AAAA,IACP,SAAY,GAAA,EAAA;AAAA,IACZ,GAAM,GAAA,GAAA;AAAA,IACN,KAAQ,GAAA,MAAA;AAAA,IACR,KAAQ,GAAA,WAAA;AAAA,IACR,MAAS,GAAA,SAAA;AAAA,IACT,KAAQ,GAAA,EAAA;AAAA,IACR,GAAG,KAAA;AAAA,KAEL,GAEA,qBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA,GAAA;AAAA,MACJ,SAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA;AAAA,MACA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,KAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACJ,GAAA;AAAA,MAEC,QAAA;AAAA,KAAA;AAAA,GACH;AAEJ,EAAA;AAEA,IAAA,CAAK,WAAc,GAAA,MAAA,CAAA;AAEnB,MAAM,SAAA,GAAY,CAAC,KAAiC,KAAA;AAClD,EAAA,OAAO,MAAO,CAAA,IAAA,CAAK,gBAAgB,CAAA,CAAE,SAAS,KAAK,CAAA,CAAA;AACrD,CAAA,CAAA;AAEA,MAAM,SAAA,GAAY,OAAO,GAAG,CAAA;AAAA,EAC1B,CAAC,EAAE,KAAA,EAAO,KAAO,EAAA,MAAA,EAAQ,MAAW,KAAA,GAAA,CAAA;AAAA;AAAA;AAAA,IAAA,EAGhC,SAAU,CAAA,IAAI,CAAK,IAAA,gBAAA,CAAiB,IAAI,CAAC,CAAA;AAAA;AAAA;AAAA,IAAA,EAGzC,SAAS,cACX,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASC,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,SAAS,eACT,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASC,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,SAAS,cACT,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASC,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,SAAS,YACT,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASC,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,SAAS,aACT,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASC,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,SAAS,YACT,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASC,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,SAAS,YACT,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASC,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,SAAS,MACT,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASC,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,SAAS,YACT,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASC,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,SAAS,aACT,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASC,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,SAAS,aACT,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMC,CAAA,CAAA;AAAA;AAAA,gBAAA,EAEa,KAAK,CAAA;AAAA,YAAA,EACT,MAAM,CAAA;AAAA,WACP,EAAA,KAAA,CAAM,MAAO,CAAA,KAAK,CAAC,CAAA;AAAA,IAC1B,EAAA,iBAAA,CAAkB,EAAE,KAAO,EAAA,KAAA,CAAM,OAAO,KAAK,CAAA,EAAG,CAAC,CAAA;AAAA,EAAA,CAAA;AAEvD,CAAA;;;;"}

package/dist/Text/fontMapping.js

@@ -1,90 +0,0 @@
-import { theme } from '../theme.js';
-
-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;
-  `
-};
-
-export { fontStyleMapping };
-//# sourceMappingURL=fontMapping.js.map

package/dist/Text/fontMapping.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fontMapping.js","sources":["../../src/Text/fontMapping.ts"],"sourcesContent":["import { theme } from '../theme'\nimport { Typo } from './Text'\n\nexport const fontStyleMapping: Record<Typo, string> = {\n  'hero-alternate': `\n    font-size: 40px;\n    font-family: 'MarshmallowYouth';\n    font-weight: ${theme.font.weight.bold};\n    line-height: 40px;\n\n    @media (min-width: 768px) {\n      font-size: 56px;\n      line-height: 52px;\n    }\n  `,\n  hero: `\n    font-size: 32px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 40px;\n\n    @media (min-width: 768px) {\n      font-size: 40px;\n      line-height: 44px;\n    }\n  `,\n  'heading-alternate': `\n    font-size: 40px;\n    font-family: 'MarshmallowYouth';\n    font-weight: ${theme.font.weight.bold};\n    line-height: 40px;\n  `,\n  'heading-large': `\n    font-size: 28px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 32px;\n\n    @media (min-width: 768px) {\n      font-size: 32px;\n      line-height: 40px;\n    }\n  `,\n  'heading-medium': `\n    font-size: 24px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 32px;\n  `,\n  'heading-small': `\n    font-size: 20px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 28px;\n  `,\n  'headline-regular': `\n    font-size: 16px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 20px;\n  `,\n  'headline-small': `\n    font-size: 14px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 20px;\n  `,\n  'body-standfirst': `\n    font-size: 18px;\n    font-weight: ${theme.font.weight.normal};\n    line-height: 24px;\n  `,\n  'body-regular': `\n    font-size: 16px;\n    font-weight: ${theme.font.weight.normal};\n    line-height: 20px;\n  `,\n  'body-small': `\n    font-size: 14px;\n    font-weight: ${theme.font.weight.normal};\n    line-height: 20px;\n  `,\n  caption: `\n    font-size: 12px;\n    font-weight: ${theme.font.weight.normal};\n    line-height: 16px;\n  `,\n  label: `\n    font-size: 10px;\n    line-height: 12px;\n    font-weight: ${theme.font.weight.medium};\n    text-transform: uppercase;\n  `,\n}\n"],"names":[],"mappings":";;AAGO,MAAM,gBAAyC,GAAA;AAAA,EACpD,gBAAkB,EAAA,CAAA;AAAA;AAAA;AAAA,iBAGD,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,IAAI,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAQvC,IAAM,EAAA,CAAA;AAAA;AAAA,iBAEW,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAQzC,mBAAqB,EAAA,CAAA;AAAA;AAAA;AAAA,iBAGJ,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,IAAI,CAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAGvC,eAAiB,EAAA,CAAA;AAAA;AAAA,iBAEA,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAQzC,gBAAkB,EAAA,CAAA;AAAA;AAAA,iBAED,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAGzC,eAAiB,EAAA,CAAA;AAAA;AAAA,iBAEA,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAGzC,kBAAoB,EAAA,CAAA;AAAA;AAAA,iBAEH,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAGzC,gBAAkB,EAAA,CAAA;AAAA;AAAA,iBAED,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAGzC,iBAAmB,EAAA,CAAA;AAAA;AAAA,iBAEF,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAGzC,cAAgB,EAAA,CAAA;AAAA;AAAA,iBAEC,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAGzC,YAAc,EAAA,CAAA;AAAA;AAAA,iBAEG,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAGzC,OAAS,EAAA,CAAA;AAAA;AAAA,iBAEQ,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAGzC,KAAO,EAAA,CAAA;AAAA;AAAA;AAAA,iBAGU,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAAA,CAAA;AAG3C;;;;"}

package/dist/TextInput/TextInput.js

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

package/dist/TextInput/TextInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextInput.js","sources":["../../src/TextInput/TextInput.tsx"],"sourcesContent":["import React, { FocusEvent, FormEvent, forwardRef, ForwardedRef } from 'react'\n\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { Box } from '../Box'\nimport { useUniqueId } from '../utils/id'\nimport {\n  Input,\n  StyledFrontIcon,\n  StyledTrailingIcon,\n} from '../fields/components/CommonInput'\n\ninterface Props extends CommonFieldProps {\n  type?: 'text' | 'email' | 'password' | 'time' | 'date' | 'tel'\n  placeholder: string\n  name?: string\n  value: string\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n}\n\n/** on change or on input required */\ntype InputProps =\n  | {\n      /** on change is required and on input optional */\n      onChange: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLInputElement>) => void\n    }\n  | {\n      /** on input is required and on change optional */\n      onChange?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLInputElement>) => void\n    }\n\nexport type TextInputProps = Props & InputProps\n\nexport const TextInput = forwardRef(function TextInput(\n  {\n    id: idProp,\n    type = 'text',\n    placeholder,\n    name,\n    value,\n    error = false,\n    onBlur,\n    onChange,\n    onInputChange,\n    disabled = false,\n    frontIcon,\n    trailingIcon,\n    fallbackStyle,\n    ...fieldProps\n  }: TextInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const id = useUniqueId(idProp)\n\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <Box flex alignItems=\"center\" justifyContent=\"flex-start\">\n        {frontIcon && (\n          <StyledFrontIcon\n            disabled={disabled}\n            render={frontIcon}\n            color=\"sesame\"\n          />\n        )}\n        <Input\n          disabled={disabled}\n          type={type}\n          id={id}\n          name={name}\n          ref={ref}\n          placeholder={placeholder}\n          value={value}\n          error={error}\n          frontIcon={frontIcon}\n          fallbackStyle={fallbackStyle}\n          autoComplete=\"off\"\n          onChange={(e: FormEvent<HTMLInputElement>) => {\n            onChange && onChange(e.currentTarget.value)\n            onInputChange && onInputChange(e)\n          }}\n          onBlur={onBlur}\n        />\n        {trailingIcon && (\n          <StyledTrailingIcon\n            disabled={disabled}\n            render={trailingIcon}\n            color=\"sesame\"\n          />\n        )}\n      </Box>\n    </Field>\n  )\n})\n"],"names":["TextInput"],"mappings":";;;;;;;AAmCa,MAAA,SAAA,GAAY,UAAW,CAAA,SAASA,UAC3C,CAAA;AAAA,EACE,EAAI,EAAA,MAAA;AAAA,EACJ,IAAO,GAAA,MAAA;AAAA,EACP,WAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAQ,GAAA,KAAA;AAAA,EACR,MAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,SAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,GAAG,UAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,EAAA,GAAK,YAAY,MAAM,CAAA,CAAA;AAE7B,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAO,GAAG,UAAA,EAAY,SAAS,EAAI,EAAA,KAAA,EAClC,QAAC,kBAAA,IAAA,CAAA,GAAA,EAAA,EAAI,IAAI,EAAA,IAAA,EAAC,UAAW,EAAA,QAAA,EAAS,gBAAe,YAC1C,EAAA,QAAA,EAAA;AAAA,IACC,SAAA,oBAAA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,MAAQ,EAAA,SAAA;AAAA,QACR,KAAM,EAAA,QAAA;AAAA,OAAA;AAAA,KACR;AAAA,oBAEF,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,IAAA;AAAA,QACA,EAAA;AAAA,QACA,IAAA;AAAA,QACA,GAAA;AAAA,QACA,WAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,aAAA;AAAA,QACA,YAAa,EAAA,KAAA;AAAA,QACb,QAAA,EAAU,CAAC,CAAmC,KAAA;AAC5C,UAAY,QAAA,IAAA,QAAA,CAAS,CAAE,CAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAC1C,UAAA,aAAA,IAAiB,cAAc,CAAC,CAAA,CAAA;AAAA,SAClC;AAAA,QACA,MAAA;AAAA,OAAA;AAAA,KACF;AAAA,IACC,YACC,oBAAA,GAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,MAAQ,EAAA,YAAA;AAAA,QACR,KAAM,EAAA,QAAA;AAAA,OAAA;AAAA,KACR;AAAA,GAAA,EAEJ,CACF,EAAA,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/Textarea/Textarea.js

@@ -1,72 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import styled from 'styled-components';
-import { theme } from '../theme.js';
-import { useUniqueId } from '../utils/id.js';
-import { Field } from '../fields/Field/Field.js';
-
-const Textarea = forwardRef(function Textarea2({
-  id: idProp,
-  name,
-  value,
-  onChange,
-  onInputChange,
-  resize = "none",
-  error = false,
-  placeholder,
-  disabled = false,
-  maxLength,
-  onBlur,
-  rows = 4,
-  fallbackStyle,
-  ...fieldProps
-}, ref) {
-  const id = useUniqueId(idProp);
-  return /* @__PURE__ */ jsx(Field, { ...fieldProps, htmlFor: id, error, children: /* @__PURE__ */ jsx(
-    StyledTextArea,
-    {
-      ref,
-      error,
-      id,
-      name,
-      disabled,
-      resize,
-      fallbackStyle,
-      placeholder,
-      value,
-      onChange: (e) => {
-        onChange?.(e.currentTarget.value);
-        onInputChange?.(e);
-      },
-      maxLength,
-      onBlur,
-      rows
-    }
-  ) });
-});
-const StyledTextArea = styled.textarea`
-  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};
-  }
-`;
-
-export { Textarea };
-//# sourceMappingURL=Textarea.js.map

package/dist/Textarea/Textarea.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Textarea.js","sources":["../../src/Textarea/Textarea.tsx"],"sourcesContent":["import React, { FocusEvent, FormEvent, ForwardedRef, forwardRef } from 'react'\nimport styled from 'styled-components'\n\nimport { theme } from '../theme'\nimport { useUniqueId } from '../utils/id'\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { MarginProps } from '../utils/space'\n\ntype BaseProps = {\n  id?: string\n  placeholder?: string\n  name?: string\n  value: string\n  error?: boolean\n  errorMsg?: string\n  resize?: 'none' | 'both'\n  disabled?: boolean\n  maxLength?: number\n  onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void\n  rows?: number\n  fallbackStyle?: boolean\n} & CommonFieldProps &\n  MarginProps\n\ntype TruncateProps =\n  | {\n      onChange: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLTextAreaElement>) => void\n    }\n  | {\n      onChange?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLTextAreaElement>) => void\n    }\n\nexport type TextareaProps = BaseProps & TruncateProps\n\nexport const Textarea = forwardRef(function Textarea(\n  {\n    id: idProp,\n    name,\n    value,\n    onChange,\n    onInputChange,\n    resize = 'none',\n    error = false,\n    placeholder,\n    disabled = false,\n    maxLength,\n    onBlur,\n    rows = 4,\n    fallbackStyle,\n    ...fieldProps\n  }: TextareaProps,\n  ref: ForwardedRef<HTMLTextAreaElement>,\n) {\n  const id = useUniqueId(idProp)\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <StyledTextArea\n        ref={ref}\n        error={error}\n        id={id}\n        name={name}\n        disabled={disabled}\n        resize={resize}\n        fallbackStyle={fallbackStyle}\n        placeholder={placeholder}\n        value={value}\n        onChange={(e: FormEvent<HTMLTextAreaElement>) => {\n          onChange?.(e.currentTarget.value)\n          onInputChange?.(e)\n        }}\n        maxLength={maxLength}\n        onBlur={onBlur}\n        rows={rows}\n      />\n    </Field>\n  )\n})\n\ninterface TextArea {\n  resize: 'none' | 'both'\n  disabled: boolean\n  error: boolean\n  value: string\n  fallbackStyle?: boolean\n}\n\nconst StyledTextArea = styled.textarea<TextArea>`\n  font-size: 16px;\n  font: inherit;\n  line-height: 20px;\n  background: ${({ fallbackStyle }) =>\n    fallbackStyle ? theme.colors.custard : theme.colors.cream};\n  border: 2px solid ${theme.colors.oatmeal};\n  box-sizing: border-box;\n  border-radius: 12px;\n  width: 100%;\n  padding: 18px 14px;\n  color: ${theme.colors.liquorice};\n  resize: ${({ resize }) => resize};\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'text')};\n  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};\n  border-color: ${({ error }) =>\n    theme.colors[`${error ? 'strawberry' : 'oatmeal'}`]};\n  outline: none;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    border-color: ${({ error }) =>\n      error ? theme.colors.strawberry : theme.colors.marzipan};\n  }\n`\n"],"names":["Textarea"],"mappings":";;;;;;;AAqCa,MAAA,QAAA,GAAW,UAAW,CAAA,SAASA,SAC1C,CAAA;AAAA,EACE,EAAI,EAAA,MAAA;AAAA,EACJ,IAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,MAAS,GAAA,MAAA;AAAA,EACT,KAAQ,GAAA,KAAA;AAAA,EACR,WAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,SAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAO,GAAA,CAAA;AAAA,EACP,aAAA;AAAA,EACA,GAAG,UAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,EAAA,GAAK,YAAY,MAAM,CAAA,CAAA;AAC7B,EAAA,2BACG,KAAO,EAAA,EAAA,GAAG,UAAY,EAAA,OAAA,EAAS,IAAI,KAClC,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAA;AAAA,MACA,EAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,aAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAA,EAAU,CAAC,CAAsC,KAAA;AAC/C,QAAW,QAAA,GAAA,CAAA,CAAE,cAAc,KAAK,CAAA,CAAA;AAChC,QAAA,aAAA,GAAgB,CAAC,CAAA,CAAA;AAAA,OACnB;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,IAAA;AAAA,KAAA;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ,CAAC,EAAA;AAUD,MAAM,iBAAiB,MAAO,CAAA,QAAA,CAAA;AAAA;AAAA;AAAA;AAAA,cAId,EAAA,CAAC,EAAE,aAAA,EACf,KAAA,aAAA,GAAgB,MAAM,MAAO,CAAA,OAAA,GAAU,KAAM,CAAA,MAAA,CAAO,KAAK,CAAA;AAAA,oBACvC,EAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAK/B,EAAA,KAAA,CAAM,OAAO,SAAS,CAAA;AAAA,UAAA,EACrB,CAAC,EAAE,MAAO,EAAA,KAAM,MAAM,CAAA;AAAA,UAAA,EACtB,CAAC,EAAE,QAAA,EAAgB,KAAA,QAAA,GAAW,gBAAgB,MAAO,CAAA;AAAA,WAAA,EACpD,CAAC,EAAE,QAAA,EAAgB,KAAA,QAAA,GAAW,QAAQ,GAAI,CAAA;AAAA,gBACrC,EAAA,CAAC,EAAE,KAAA,EACjB,KAAA,KAAA,CAAM,MAAO,CAAA,CAAA,EAAG,KAAQ,GAAA,YAAA,GAAe,SAAS,CAAA,CAAE,CAAC,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMnC,EAAA,CAAC,EAAE,KAAA,EACjB,KAAA,KAAA,GAAQ,MAAM,MAAO,CAAA,UAAA,GAAa,KAAM,CAAA,MAAA,CAAO,QAAQ,CAAA;AAAA;AAAA,CAAA;;;;"}

package/dist/Toggle/Toggle.js

@@ -1,85 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { Box } from '../Box/Box.js';
-import { theme } from '../theme.js';
-import { focusOutline } from '../utils/focusOutline.js';
-
-const Toggle = ({
-  id,
-  checked,
-  onToggle,
-  ...marginProps
-}) => {
-  return /* @__PURE__ */ jsxs(Switch, { as: "label", id, ...marginProps, children: [
-    /* @__PURE__ */ jsx(
-      Checkbox,
-      {
-        type: "checkbox",
-        checked,
-        onChange: onToggle,
-        onKeyDown: (e) => {
-          if (e.key === "Enter") {
-            onToggle();
-          }
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(Slider, {})
-  ] });
-};
-const Switch = styled(Box)`
-  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);
-  }
-`;
-
-export { Toggle };
-//# sourceMappingURL=Toggle.js.map

package/dist/Toggle/Toggle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Toggle.js","sources":["../../src/Toggle/Toggle.tsx"],"sourcesContent":["import React, { FC } from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { theme } from '../theme'\nimport { focusOutline } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\ntype Props = {\n  /** unique ID */\n  id?: string\n  /** checked flag  */\n  checked: boolean\n  /** onToggle listener  */\n  onToggle: () => void\n} & MarginProps\n\nexport const Toggle: FC<Props> = ({\n  id,\n  checked,\n  onToggle,\n  ...marginProps\n}) => {\n  return (\n    <Switch as=\"label\" id={id} {...marginProps}>\n      <Checkbox\n        type=\"checkbox\"\n        checked={checked}\n        onChange={onToggle}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            onToggle()\n          }\n        }}\n      />\n      <Slider />\n    </Switch>\n  )\n}\n\nconst Switch = styled(Box)`\n  position: relative;\n  display: inline-block;\n  width: 56px;\n  height: 32px;\n\n  input {\n    opacity: 0;\n    width: 0;\n    height: 0;\n  }\n`\n\nconst Slider = styled.span`\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ${theme.colors.oatmeal};\n  border: none;\n  border-radius: 28px;\n  transition: 0.2s background-color;\n  outline: none;\n\n  &:hover {\n    background-color: ${theme.colors.marzipan};\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 24px;\n    width: 24px;\n    left: 4px;\n    bottom: 4px;\n    background-color: ${theme.colors.mascarpone};\n    transition: 0.2s transform;\n    border-radius: 50%;\n  }\n`\n\nconst Checkbox = styled.input`\n  ${focusOutline({ selector: `&:focus-visible + ${Slider}` })}\n\n  &:checked + ${Slider} {\n    background-color: ${theme.colors.pistachio};\n    border: none;\n  }\n\n  &:checked + ${Slider}:before {\n    transform: translateX(24px);\n  }\n`\n"],"names":[],"mappings":";;;;;;AAiBO,MAAM,SAAoB,CAAC;AAAA,EAChC,EAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG,WAAA;AACL,CAAM,KAAA;AACJ,EAAA,4BACG,MAAO,EAAA,EAAA,EAAA,EAAG,OAAQ,EAAA,EAAA,EAAS,GAAG,WAC7B,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,UAAA;AAAA,QACL,OAAA;AAAA,QACA,QAAU,EAAA,QAAA;AAAA,QACV,SAAA,EAAW,CAAC,CAAM,KAAA;AAChB,UAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,YAAS,QAAA,EAAA,CAAA;AAAA,WACX;AAAA,SACF;AAAA,OAAA;AAAA,KACF;AAAA,wBACC,MAAO,EAAA,EAAA,CAAA;AAAA,GACV,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,MAAA,GAAS,OAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAazB,MAAM,SAAS,MAAO,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAOA,EAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOlB,EAAA,KAAA,CAAM,OAAO,QAAQ,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUrB,EAAA,KAAA,CAAM,OAAO,UAAU,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAM/C,MAAM,WAAW,MAAO,CAAA,KAAA,CAAA;AAAA,EAAA,EACpB,aAAa,EAAE,QAAA,EAAU,qBAAqB,MAAM,CAAA,CAAA,EAAI,CAAC,CAAA;AAAA;AAAA,cAAA,EAE7C,MAAM,CAAA;AAAA,sBACE,EAAA,KAAA,CAAM,OAAO,SAAS,CAAA;AAAA;AAAA;AAAA;AAAA,cAAA,EAI9B,MAAM,CAAA;AAAA;AAAA;AAAA,CAAA;;;;"}