@mrshmllw/smores-react 10.7.0-crumbs-feature-vite-bundling.2 → 10.7.0

package/dist/TextInput/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,UAAU,GAEX,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,EACL,KAAK,EACL,eAAe,EACf,kBAAkB,GACnB,MAAM,kCAAkC,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAoCzC;;;;;;;GAOG;AACH,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,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,YAAY,EACZ,aAAa,EACb,gBAAgB,GAAG,KAAK,EACxB,aAAa,EACb,GAAG,UAAU,EACE,EACjB,GAAmC;IAEnC,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAE9B,MAAM,kBAAkB,GAAG,CAAC,CAAyC,EAAE,EAAE;QACvE,IAAI,CAAC,CAAC,aAAa,KAAK,iBAAiB,IAAI,UAAU,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC;YACnE,UAAU,EAAE,CAAA;QACd,CAAC;IACH,CAAC,CAAA;IAED,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,iBACH,QAAQ,EACnB,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,cAAc,EAAE,kBAAkB,EAClC,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,YACJ,KAAK,gBACD,SAAS,oBACL,aAAa,EAC7B,YAAY,EAAE,gBAAgB,EAC9B,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,EACd,SAAS,EAAE,aAAa,GACxB;YACD,YAAY,IAAI,CACf,oBAAC,kBAAkB,iBACN,QAAQ,EACnB,MAAM,EAAE,YAAY,EACpB,KAAK,EAAC,QAAQ,GACd,CACH,CACG,CACA,CACT,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import React, {\n  FocusEvent,\n  FormEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLInputAutoCompleteAttribute,\n} from 'react'\n\nimport { Box } from '../Box'\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport {\n  Input,\n  StyledFrontIcon,\n  StyledTrailingIcon,\n} from '../fields/components/CommonInput'\nimport { useUniqueId } from '../utils/id'\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   * Triggers after animation end (animation duration is 2s),\n   * the animation starts when a user selects or hovers over an autofill option\n   */\n  onAutoFill?: () => void\n}\n\ntype InputMode = 'text' | 'email' | 'numeric'\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) & {\n  autoCompleteAttr?: HTMLInputAutoCompleteAttribute\n  inputModeAttr?: InputMode\n}\n\nexport type TextInputProps = Props & InputProps\n\n/**\n * A reusable TextInput component that supports various input types, custom styling, icons,\n * and autofill detection.\n *\n * ### Caveats:\n * - `onAutoFill` triggers after animation end (animation duration is 2s),\n * the animation starts when a user selects or hovers over an autofill option\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    onAutoFill,\n    disabled = false,\n    frontIcon,\n    trailingIcon,\n    fallbackStyle,\n    autoCompleteAttr = 'off',\n    inputModeAttr,\n    ...fieldProps\n  }: TextInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const id = useUniqueId(idProp)\n\n  const handleAnimationEnd = (e: React.AnimationEvent<HTMLInputElement>) => {\n    if (e.animationName === 'onAutoFillStart' && onAutoFill && !!value) {\n      onAutoFill()\n    }\n  }\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          onAnimationEnd={handleAnimationEnd}\n          placeholder={placeholder}\n          value={value}\n          $error={error}\n          $frontIcon={frontIcon}\n          $fallbackStyle={fallbackStyle}\n          autoComplete={autoCompleteAttr}\n          onChange={(e: FormEvent<HTMLInputElement>) => {\n            onChange && onChange(e.currentTarget.value)\n            onInputChange && onInputChange(e)\n          }}\n          onBlur={onBlur}\n          inputMode={inputModeAttr}\n        />\n        {trailingIcon && (\n          <StyledTrailingIcon\n            $disabled={disabled}\n            render={trailingIcon}\n            color=\"sesame\"\n          />\n        )}\n      </Box>\n    </Field>\n  )\n})\n"]}

package/dist/TextInput/index.js

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

package/dist/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","sourcesContent":["export { TextInput } from './TextInput'\n"]}

package/dist/Textarea/Textarea.d.ts

@@ -1,4 +1,4 @@
-import { default as React, FocusEvent, FormEvent } from 'react';
+import React, { FocusEvent, FormEvent } from 'react';
 import { CommonFieldProps } from '../fields/commonFieldTypes';
 import { MarginProps } from '../utils/space';
 type BaseProps = {

package/dist/Textarea/Textarea.js

@@ -0,0 +1,37 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { Field } from '../fields/Field';
+import { theme } from '../theme';
+import { useUniqueId } from '../utils/id';
+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/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,iBAAiB,CAAA;AAEvC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AA+BzC,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,YACA,KAAK,EACb,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,aACT,MAAM,oBACC,aAAa,EAC7B,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;AASF,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAU;;;;gBAIhC,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CACnC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;sBACxC,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;WAK/B,KAAK,CAAC,MAAM,CAAC,SAAS;YACrB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;YACxB,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,MAAM,EAAE,EAAE,EAAE,CAC7B,KAAK,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;;;;;;oBAMpC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAC7B,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ;;CAE7D,CAAA","sourcesContent":["import React, { FocusEvent, FormEvent, ForwardedRef, forwardRef } from 'react'\nimport styled from 'styled-components'\n\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { theme } from '../theme'\nimport { useUniqueId } from '../utils/id'\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  $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"]}

package/dist/Textarea/index.js

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

package/dist/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","sourcesContent":["export { Textarea } from './Textarea'\n"]}

package/dist/Toggle/Toggle.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+import { theme } from '../theme';
+import { focusOutline } from '../utils/focusOutline';
+export const Toggle = ({ id, checked, onToggle, disabled, ...marginProps }) => {
+    return (React.createElement(Switch, { forwardedAs: "label", htmlFor: id, ...marginProps },
+        React.createElement(Checkbox, { id: id, disabled: disabled, type: "checkbox", checked: checked, onChange: onToggle, onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    onToggle();
+                }
+            }, "aria-label": "toggle" }),
+        React.createElement(Slider, { "$disabled": disabled })));
+};
+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;
+
+  &:before {
+    position: absolute;
+    content: '';
+    height: 24px;
+    width: 24px;
+    left: 4px;
+    bottom: 4px;
+    background-color: ${theme.colors.mascarpone};
+    transition: 0.2s transform;
+    border-radius: 50%;
+  }
+
+  ${({ $disabled }) => $disabled
+    ? css `
+          cursor: not-allowed;
+        `
+    : css `
+          &:hover {
+            background-color: ${theme.colors.marzipan};
+          }
+        `}
+`;
+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/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,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAapD,MAAM,CAAC,MAAM,MAAM,GAAc,CAAC,EAChC,EAAE,EACF,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,MAAM,IAAC,WAAW,EAAC,OAAO,EAAC,OAAO,EAAE,EAAE,KAAM,WAAW;QACtD,oBAAC,QAAQ,IACP,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAClB,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,gBACU,QAAQ,GACnB;QACF,oBAAC,MAAM,iBAAY,QAAQ,GAAI,CACxB,CACV,CAAA;AACH,CAAC,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;;;;;CAWzB,CAAA;AAED,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,CAAyB;;;;;;;sBAO7B,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;;;;;;;;;wBAalB,KAAK,CAAC,MAAM,CAAC,UAAU;;;;;IAK3C,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAClB,SAAS;IACP,CAAC,CAAC,GAAG,CAAA;;SAEF;IACH,CAAC,CAAC,GAAG,CAAA;;gCAEqB,KAAK,CAAC,MAAM,CAAC,QAAQ;;SAE5C;CACR,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","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { theme } from '../theme'\nimport { focusOutline } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\nexport type Props = {\n  /** unique ID */\n  id?: string\n  /** checked flag  */\n  checked: boolean\n  disabled?: boolean\n  /** onToggle listener  */\n  onToggle: () => void\n} & MarginProps\n\nexport const Toggle: FC<Props> = ({\n  id,\n  checked,\n  onToggle,\n  disabled,\n  ...marginProps\n}) => {\n  return (\n    <Switch forwardedAs=\"label\" htmlFor={id} {...marginProps}>\n      <Checkbox\n        id={id}\n        disabled={disabled}\n        type=\"checkbox\"\n        checked={checked}\n        onChange={onToggle}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            onToggle()\n          }\n        }}\n        aria-label=\"toggle\"\n      />\n      <Slider $disabled={disabled} />\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<{ $disabled?: boolean }>`\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  &: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  ${({ $disabled }) =>\n    $disabled\n      ? css`\n          cursor: not-allowed;\n        `\n      : css`\n          &:hover {\n            background-color: ${theme.colors.marzipan};\n          }\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"]}

package/dist/Toggle/index.js

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

package/dist/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","sourcesContent":["export { Toggle } from './Toggle'\n"]}

package/dist/Tooltip/Tooltip.d.ts

@@ -1,5 +1,5 @@
-import { default as React, FC, ReactNode } from 'react';
-import { Side } from '@floating-ui/react';
+import React, { FC, ReactNode } from 'react';
+import { type Side } from '@floating-ui/react';
 export interface TooltipProps {
     children: ReactNode;
     content: string | ReactNode;
@@ -27,7 +27,7 @@ export interface TooltipProps {
 }
 export type TooltipVariant = 'primary' | 'fallback' | 'bubblegum';
 export declare const Tooltip: FC<TooltipProps>;
-export declare const Tip: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const Tip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $maxWidth?: number;
     $background: string;
 }>> & string;

package/dist/Tooltip/Tooltip.js

@@ -0,0 +1,86 @@
+import React, { useRef, useState } from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../Box';
+import { Text } from '../Text';
+import { theme } from '../theme';
+import { autoUpdate, flip, FloatingPortal, offset, shift, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, arrow, FloatingArrow, inline, } from '@floating-ui/react';
+const tooltipVariants = {
+    primary: {
+        textColor: 'liquorice',
+        bgColor: 'custard',
+    },
+    fallback: {
+        textColor: 'cream',
+        bgColor: 'feijoa',
+    },
+    bubblegum: {
+        textColor: 'liquorice',
+        bgColor: 'bubblegum',
+    },
+};
+const ARROW_HEIGHT = 8;
+const GAP = 4;
+export const Tooltip = ({ children, title, content, position, maxWidth = 500, underline = false, portalContainer, inline: inlineProp, variant = 'primary', }) => {
+    const [showTip, setShowTip] = useState(false);
+    const arrowRef = useRef(null);
+    const variantValue = tooltipVariants[variant];
+    const randomId = crypto.randomUUID();
+    const { refs, floatingStyles, context } = useFloating({
+        open: showTip,
+        placement: position,
+        onOpenChange: setShowTip,
+        middleware: [
+            offset(ARROW_HEIGHT + GAP),
+            flip(),
+            shift(),
+            inlineProp ? inline() : undefined,
+            arrow({ element: arrowRef, padding: 14 }),
+        ],
+        whileElementsMounted: autoUpdate,
+    });
+    const hover = useHover(context, { move: false });
+    const focus = useFocus(context);
+    const dismiss = useDismiss(context);
+    const role = useRole(context, { role: 'tooltip' });
+    // Merge all the interactions into prop getters
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        hover,
+        focus,
+        dismiss,
+        role,
+    ]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(UnderlinedChild, { id: randomId, "$underline": underline, ref: refs.setReference, ...getReferenceProps() }, children),
+        showTip && (React.createElement(FloatingPortal, { root: portalContainer },
+            React.createElement(Tip, { ref: refs.setFloating, className: "tooltip", "$maxWidth": maxWidth, "$background": theme.colors[variantValue.bgColor], style: floatingStyles, ...getFloatingProps() },
+                React.createElement(FloatingArrow, { ref: arrowRef, context: context, fill: theme.colors[variantValue.bgColor] }),
+                title && (React.createElement(Text, { tag: "h5", typo: "desc-medium", color: variantValue.textColor }, title)),
+                (typeof content === 'string' && (React.createElement(Text, { typo: "desc-light", color: variantValue.textColor }, content))) ||
+                    content)))));
+};
+const UnderlinedChild = styled(Box) `
+  cursor: pointer;
+  width: fit-content;
+  display: inline-flex;
+
+  ${({ $underline }) => $underline &&
+    css `
+      border-bottom: 1px dashed ${theme.colors.marshmallowPink};
+    `}
+`;
+export const Tip = styled.div `
+  position: absolute;
+  margin: auto;
+  z-index: 1000;
+  background: ${({ $background }) => $background};
+  padding: 16px 12px 20px;
+  border-radius: 16px;
+  max-width: 450px;
+  pointer-events: none;
+  cursor: default;
+
+  // this is the trick that will make sure the content can go up to maxWidth
+  margin-right: ${({ $maxWidth }) => $maxWidth && -$maxWidth / 2 + 'px'};
+  max-width: ${({ $maxWidth }) => $maxWidth && $maxWidth + 'px'};
+`;
+//# sourceMappingURL=Tooltip.js.map

package/dist/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { FC, ReactNode, useRef, useState } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Color, theme } from '../theme'\nimport {\n  autoUpdate,\n  flip,\n  FloatingPortal,\n  offset,\n  shift,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  arrow,\n  FloatingArrow,\n  inline,\n  type Side,\n} from '@floating-ui/react'\n\nexport interface TooltipProps {\n  children: ReactNode\n  content: string | ReactNode\n  position?: Side\n  maxWidth?: number\n  title?: string\n  underline?: boolean\n  variant?: TooltipVariant\n  portalContainer?:\n    | HTMLElement\n    | null\n    | React.MutableRefObject<HTMLElement | null>\n  /**\n   * If true, the tooltip will position itself inline its children\n   *\n   * Used for inline content like blocks of text that span multiple lines\n   *\n   * @example\n   * ```tsx\n   * <Text>\n   *   Marshmallow car insurance, the best insurance in town.\n   *   <Tooltip inline content=\"Tooltip content\">Hover here</Tooltip>\n   *   to learn more as the Policy Holder\n   * </Text>\n   * ```\n   */\n  inline?: boolean\n}\n\nexport type TooltipVariant = 'primary' | 'fallback' | 'bubblegum'\n\ntype VariantValue = { textColor: Color; bgColor: Color }\n\nconst tooltipVariants = {\n  primary: {\n    textColor: 'liquorice',\n    bgColor: 'custard',\n  },\n  fallback: {\n    textColor: 'cream',\n    bgColor: 'feijoa',\n  },\n  bubblegum: {\n    textColor: 'liquorice',\n    bgColor: 'bubblegum',\n  },\n} satisfies Record<TooltipVariant, VariantValue>\n\nconst ARROW_HEIGHT = 8\nconst GAP = 4\n\nexport const Tooltip: FC<TooltipProps> = ({\n  children,\n  title,\n  content,\n  position,\n  maxWidth = 500,\n  underline = false,\n  portalContainer,\n  inline: inlineProp,\n  variant = 'primary',\n}) => {\n  const [showTip, setShowTip] = useState<boolean>(false)\n  const arrowRef = useRef(null)\n\n  const variantValue = tooltipVariants[variant]\n\n  const randomId = crypto.randomUUID()\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: showTip,\n    placement: position,\n    onOpenChange: setShowTip,\n    middleware: [\n      offset(ARROW_HEIGHT + GAP),\n      flip(),\n      shift(),\n      inlineProp ? inline() : undefined,\n      arrow({ element: arrowRef, padding: 14 }),\n    ],\n    whileElementsMounted: autoUpdate,\n  })\n\n  const hover = useHover(context, { move: false })\n  const focus = useFocus(context)\n  const dismiss = useDismiss(context)\n  const role = useRole(context, { role: 'tooltip' })\n\n  // Merge all the interactions into prop getters\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    hover,\n    focus,\n    dismiss,\n    role,\n  ])\n\n  return (\n    <>\n      <UnderlinedChild\n        id={randomId}\n        $underline={underline}\n        ref={refs.setReference}\n        {...getReferenceProps()}\n      >\n        {children}\n      </UnderlinedChild>\n      {showTip && (\n        <FloatingPortal root={portalContainer}>\n          <Tip\n            ref={refs.setFloating}\n            className=\"tooltip\"\n            $maxWidth={maxWidth}\n            $background={theme.colors[variantValue.bgColor]}\n            style={floatingStyles}\n            {...getFloatingProps()}\n          >\n            <FloatingArrow\n              ref={arrowRef}\n              context={context}\n              fill={theme.colors[variantValue.bgColor]}\n            />\n            {title && (\n              <Text tag=\"h5\" typo=\"desc-medium\" color={variantValue.textColor}>\n                {title}\n              </Text>\n            )}\n            {(typeof content === 'string' && (\n              <Text typo=\"desc-light\" color={variantValue.textColor}>\n                {content}\n              </Text>\n            )) ||\n              content}\n          </Tip>\n        </FloatingPortal>\n      )}\n    </>\n  )\n}\n\nconst UnderlinedChild = styled(Box)<{ $underline: boolean }>`\n  cursor: pointer;\n  width: fit-content;\n  display: inline-flex;\n\n  ${({ $underline }) =>\n    $underline &&\n    css`\n      border-bottom: 1px dashed ${theme.colors.marshmallowPink};\n    `}\n`\n\nexport const Tip = styled.div<{\n  $maxWidth?: number\n  $background: string\n}>`\n  position: absolute;\n  margin: auto;\n  z-index: 1000;\n  background: ${({ $background }) => $background};\n  padding: 16px 12px 20px;\n  border-radius: 16px;\n  max-width: 450px;\n  pointer-events: none;\n  cursor: default;\n\n  // this is the trick that will make sure the content can go up to maxWidth\n  margin-right: ${({ $maxWidth }) => $maxWidth && -$maxWidth / 2 + 'px'};\n  max-width: ${({ $maxWidth }) => $maxWidth && $maxWidth + 'px'};\n`\n"]}

package/dist/Tooltip/index.js

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

package/dist/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA","sourcesContent":["export { Tooltip } from './Tooltip'\n"]}

package/dist/fields/Field/Field.d.ts

@@ -1,4 +1,4 @@
-import { default as React, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { CommonFieldProps } from '../commonFieldTypes';
 export interface FieldProps extends CommonFieldProps {
     htmlFor?: string;

package/dist/fields/Field/Field.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { InternalField } from '../components/InternalField';
+export const Field = ({ children, ...fieldProps }) => {
+    return (React.createElement(InternalField, { fieldType: "field", ...fieldProps }, children));
+};
+//# sourceMappingURL=Field.js.map

package/dist/fields/Field/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/fields/Field/Field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAGxC,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAO3D,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,UAAU,EAAc,EAAE,EAAE;IAC/D,OAAO,CACL,oBAAC,aAAa,IAAC,SAAS,EAAC,OAAO,KAAK,UAAU,IAC5C,QAAQ,CACK,CACjB,CAAA;AACH,CAAC,CAAA","sourcesContent":["import React, { ReactNode } from 'react'\n\nimport { CommonFieldProps } from '../commonFieldTypes'\nimport { InternalField } from '../components/InternalField'\n\nexport interface FieldProps extends CommonFieldProps {\n  htmlFor?: string\n  children: ReactNode\n}\n\nexport const Field = ({ children, ...fieldProps }: FieldProps) => {\n  return (\n    <InternalField fieldType=\"field\" {...fieldProps}>\n      {children}\n    </InternalField>\n  )\n}\n"]}

package/dist/fields/Field/index.js

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

package/dist/fields/Field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/fields/Field/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA","sourcesContent":["export * from './Field'\n"]}

package/dist/fields/Fieldset/Fieldset.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import { MarginProps } from '../../utils/space';
 import { CommonFieldProps } from '../commonFieldTypes';
 export type FieldsetProps = CommonFieldProps & MarginProps;

package/dist/fields/Fieldset/Fieldset.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { InternalField } from '../components/InternalField';
+export const Fieldset = ({ children, renderAsTitle = true, id, ...fieldProps }) => {
+    return (React.createElement(InternalField, { htmlFor: id, fieldType: "fieldset", renderAsTitle: renderAsTitle, ...fieldProps }, children));
+};
+//# sourceMappingURL=Fieldset.js.map

package/dist/fields/Fieldset/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.js","sourceRoot":"","sources":["../../../src/fields/Fieldset/Fieldset.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAA;AAI3D,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,QAAQ,EACR,aAAa,GAAG,IAAI,EACpB,EAAE,EACF,GAAG,UAAU,EACC,EAAE,EAAE;IAClB,OAAO,CACL,oBAAC,aAAa,IACZ,OAAO,EAAE,EAAE,EACX,SAAS,EAAC,UAAU,EACpB,aAAa,EAAE,aAAa,KACxB,UAAU,IAEb,QAAQ,CACK,CACjB,CAAA;AACH,CAAC,CAAA","sourcesContent":["import React from 'react'\n\nimport { MarginProps } from '../../utils/space'\nimport { CommonFieldProps } from '../commonFieldTypes'\nimport { InternalField } from '../components/InternalField'\n\nexport type FieldsetProps = CommonFieldProps & MarginProps\n\nexport const Fieldset = ({\n  children,\n  renderAsTitle = true,\n  id,\n  ...fieldProps\n}: FieldsetProps) => {\n  return (\n    <InternalField\n      htmlFor={id}\n      fieldType=\"fieldset\"\n      renderAsTitle={renderAsTitle}\n      {...fieldProps}\n    >\n      {children}\n    </InternalField>\n  )\n}\n"]}

package/dist/fields/Fieldset/index.js

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

package/dist/fields/Fieldset/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/fields/Fieldset/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA","sourcesContent":["export * from './Fieldset'\n"]}

package/dist/fields/commonFieldTypes.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=commonFieldTypes.js.map

package/dist/fields/commonFieldTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commonFieldTypes.js","sourceRoot":"","sources":["../../src/fields/commonFieldTypes.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactElement, ReactNode } from 'react'\nimport { Icons } from '../Icon/iconsList'\nimport { MarginProps } from '../utils/space'\n\nexport interface CommonFieldProps extends MarginProps {\n  id?: string\n  className?: string\n  children?: ReactNode\n  label?: string\n  renderAsTitle?: boolean\n  assistiveText?: string | ReactElement<any>\n  required?: boolean\n  error?: boolean\n  errorMsg?: string | ReactElement<any>\n  completed?: boolean\n  frontIcon?: Icons\n  trailingIcon?: Icons\n  fallbackStyle?: boolean\n  disabled?: boolean\n}\n"]}

package/dist/fields/components/CommonInput.d.ts

@@ -12,19 +12,19 @@ interface IInput {
 interface SIcon {
     $disabled?: boolean;
 }
-export declare const Input: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, IInput>> & string;
-export declare const StyledFrontIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<{
+export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, IInput>> & string;
+export declare const StyledFrontIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
     className?: string;
     render: Icons;
     size?: number;
-    color?: import('../..').Color;
+    color?: import("../..").Color;
     rotate?: number;
-} & import('../..').MarginProps, SIcon>> & string & Omit<import('react').FC<import('../../Icon/Icon').IconProps>, keyof import('react').Component<any, {}, any>>;
-export declare const StyledTrailingIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<{
+} & import("../..").MarginProps, SIcon>> & string & Omit<import("react").FC<import("../../Icon/Icon").IconProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledTrailingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
     className?: string;
     render: Icons;
     size?: number;
-    color?: import('../..').Color;
+    color?: import("../..").Color;
     rotate?: number;
-} & import('../..').MarginProps, SIcon>> & string & Omit<import('react').FC<import('../../Icon/Icon').IconProps>, keyof import('react').Component<any, {}, any>>;
+} & import("../..").MarginProps, SIcon>> & string & Omit<import("react").FC<import("../../Icon/Icon").IconProps>, keyof import("react").Component<any, {}, any>>;
 export {};

package/dist/fields/components/CommonInput.js

@@ -0,0 +1,81 @@
+import styled, { css } from 'styled-components';
+import { Icon } from '../../Icon';
+import { theme } from '../../theme';
+export const Input = styled.input `
+  border: none;
+  color: ${({ $error }) => theme.colors[`${$error ? 'strawberry' : 'liquorice'}`]};
+  font-size: 16px;
+  width: 100%;
+  outline: none;
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'initial')};
+  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
+  padding: 18px 14px;
+  background-color: ${({ $fallbackStyle }) => $fallbackStyle ? theme.colors.custard : theme.colors.cream};
+  border: 2px solid
+    ${({ $error }) => ($error ? theme.colors.strawberry : theme.colors.oatmeal)};
+
+  ${({ disabled, $error }) => !disabled &&
+    !$error &&
+    css `
+      &:hover,
+      &:focus-within {
+        border-color: ${theme.colors.marzipan};
+      }
+    `}
+
+  border-radius: 12px;
+  height: auto;
+
+  ${({ $frontIcon }) => $frontIcon &&
+    `
+      padding-left: 42px;
+    `}
+
+  ${({ $trailingIcon }) => $trailingIcon &&
+    `
+      padding-right: 42px;
+    `}
+
+  /* Remove the spinner on Firefox and Webkit browsers */
+  -moz-appearance: textfield;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  &::placeholder {
+    color: ${theme.colors.sesame};
+  }
+
+  &:-webkit-autofill {
+    animation-name: onAutoFillStart;
+    animation-duration: 2s;
+  }
+
+  @keyframes onAutoFillStart {
+    from {
+      background-color: inherit;
+    }
+    to {
+      background-color: inherit;
+    }
+  }
+`;
+export const StyledFrontIcon = styled(Icon) `
+  position: relative;
+  left: 36px;
+  margin-left: -24px;
+  z-index: 1;
+  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};
+  color: ${theme.colors.liquorice};
+`;
+export const StyledTrailingIcon = styled(Icon) `
+  position: relative;
+  right: 36px;
+  margin-right: -36px;
+  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};
+  color: ${theme.colors.liquorice};
+`;
+//# sourceMappingURL=CommonInput.js.map

package/dist/fields/components/CommonInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommonInput.js","sourceRoot":"","sources":["../../../src/fields/components/CommonInput.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAEjC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAiBnC,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAQ;;WAE9B,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CACtB,KAAK,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;;;;YAI9C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;aACvD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;;sBAEjC,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CACzC,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK;;MAExD,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;;IAE3E,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,CACzB,CAAC,QAAQ;IACT,CAAC,MAAM;IACP,GAAG,CAAA;;;wBAGiB,KAAK,CAAC,MAAM,CAAC,QAAQ;;KAExC;;;;;IAKD,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CACnB,UAAU;IACV;;KAEC;;IAED,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb;;KAEC;;;;;;;;;;;;aAYQ,KAAK,CAAC,MAAM,CAAC,MAAM;;;;;;;;;;;;;;;;CAgB/B,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAO;;;;;aAKrC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;WAC9C,KAAK,CAAC,MAAM,CAAC,SAAS;CAChC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAO;;;;aAIxC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;WAC9C,KAAK,CAAC,MAAM,CAAC,SAAS;CAChC,CAAA","sourcesContent":["import styled, { css } from 'styled-components'\nimport { Icon } from '../../Icon'\nimport { Icons } from '../../Icon/iconsList'\nimport { theme } from '../../theme'\n\ninterface IInput {\n  $error?: boolean\n  disabled?: boolean\n  selected?: boolean\n  step?: number\n  value?: string\n  $frontIcon?: Icons\n  $trailingIcon?: Icons\n  $fallbackStyle?: boolean\n}\n\ninterface SIcon {\n  $disabled?: boolean\n}\n\nexport const Input = styled.input<IInput>`\n  border: none;\n  color: ${({ $error }) =>\n    theme.colors[`${$error ? 'strawberry' : 'liquorice'}`]};\n  font-size: 16px;\n  width: 100%;\n  outline: none;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'initial')};\n  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};\n  padding: 18px 14px;\n  background-color: ${({ $fallbackStyle }) =>\n    $fallbackStyle ? theme.colors.custard : theme.colors.cream};\n  border: 2px solid\n    ${({ $error }) => ($error ? theme.colors.strawberry : theme.colors.oatmeal)};\n\n  ${({ disabled, $error }) =>\n    !disabled &&\n    !$error &&\n    css`\n      &:hover,\n      &:focus-within {\n        border-color: ${theme.colors.marzipan};\n      }\n    `}\n\n  border-radius: 12px;\n  height: auto;\n\n  ${({ $frontIcon }) =>\n    $frontIcon &&\n    `\n      padding-left: 42px;\n    `}\n\n  ${({ $trailingIcon }) =>\n    $trailingIcon &&\n    `\n      padding-right: 42px;\n    `}\n\n  /* Remove the spinner on Firefox and Webkit browsers */\n  -moz-appearance: textfield;\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  &::placeholder {\n    color: ${theme.colors.sesame};\n  }\n\n  &:-webkit-autofill {\n    animation-name: onAutoFillStart;\n    animation-duration: 2s;\n  }\n\n  @keyframes onAutoFillStart {\n    from {\n      background-color: inherit;\n    }\n    to {\n      background-color: inherit;\n    }\n  }\n`\n\nexport const StyledFrontIcon = styled(Icon)<SIcon>`\n  position: relative;\n  left: 36px;\n  margin-left: -24px;\n  z-index: 1;\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  color: ${theme.colors.liquorice};\n`\n\nexport const StyledTrailingIcon = styled(Icon)<SIcon>`\n  position: relative;\n  right: 36px;\n  margin-right: -36px;\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  color: ${theme.colors.liquorice};\n`\n"]}

package/dist/fields/components/InternalField.d.ts

@@ -1,4 +1,4 @@
-import { default as React, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { CommonFieldProps } from '../commonFieldTypes';
 interface InternalFieldProps extends CommonFieldProps {
     children: ReactNode;

package/dist/fields/components/InternalField.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../../Box';
+import { Icon } from '../../Icon';
+import { Text } from '../../Text';
+export const InternalField = ({ children, fieldType, renderAsTitle, htmlFor, className, label, assistiveText, error, errorMsg, required, completed, ...marginProps }) => {
+    const labelTag = fieldType === 'field' ? 'label' : 'legend';
+    return (React.createElement(Container, { forwardedAs: fieldType === 'field' ? 'div' : 'fieldset', className: className, ...marginProps },
+        label && (React.createElement(React.Fragment, null, renderAsTitle ? (React.createElement(Box, { mb: "16px" },
+            React.createElement(Text, { tag: labelTag, typo: "heading-small", htmlFor: htmlFor }, label),
+            assistiveText && (React.createElement(Text, { tag: "p", color: "sesame", mt: { custom: 4 } }, assistiveText)))) : (React.createElement(Text, { tag: labelTag, typo: "label", color: error ? 'strawberry' : 'sesame', htmlFor: htmlFor, mb: { custom: 4 } },
+            label,
+            required && (React.createElement(Text, { tag: "span", typo: "body-small", color: "strawberry" }, "*")))))),
+        React.createElement(Box, null, children),
+        fieldType === 'field' && assistiveText && !renderAsTitle && (React.createElement(Text, { tag: labelTag, typo: "caption", color: error ? 'strawberry' : 'sesame', mt: { custom: 4 } }, assistiveText)),
+        error &&
+            errorMsg &&
+            (typeof errorMsg === 'string' ? (React.createElement(Text, { tag: "span", typo: "caption", color: "strawberry", mt: "8px" }, errorMsg)) : (React.createElement(Box, { mt: "8px" }, errorMsg))),
+        completed !== undefined && (React.createElement(AnimationWrapper, { "$displayStatus": completed, "$isError": !!(error && errorMsg) },
+            React.createElement(StatusWrapper, { mt: '8px' },
+                React.createElement(Icon, { render: "included", size: 16, color: "apple" }),
+                React.createElement(Text, { typo: "caption", color: "apple" }, "Complete"))))));
+};
+const AnimationWrapper = styled(Box) `
+  width: 0;
+  overflow: hidden;
+
+  ${({ $displayStatus }) => $displayStatus &&
+    css `
+      transition: width 0.6s ease-in;
+      width: 100%;
+    `}
+
+  /* This enables animation to appear when previous state is error */
+  ${({ $isError }) => $isError &&
+    css `
+      height: 0;
+    `}
+`;
+const StatusWrapper = styled(Box) `
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+const Container = styled(Box) `
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+
+  // In case, the element is a 'fieldset', we remove the border
+  border: 0;
+`;
+//# sourceMappingURL=InternalField.js.map

package/dist/fields/components/InternalField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InternalField.js","sourceRoot":"","sources":["../../../src/fields/components/InternalField.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../../Box'\nimport { Icon } from '../../Icon'\nimport { Text } from '../../Text'\nimport { CommonFieldProps } from '../commonFieldTypes'\n\ninterface InternalFieldProps extends CommonFieldProps {\n  children: ReactNode\n  className?: string\n  htmlFor?: string\n  fieldType: 'field' | 'fieldset'\n}\n\nexport const InternalField = ({\n  children,\n  fieldType,\n  renderAsTitle,\n  htmlFor,\n  className,\n  label,\n  assistiveText,\n  error,\n  errorMsg,\n  required,\n  completed,\n  ...marginProps\n}: InternalFieldProps) => {\n  const labelTag = fieldType === 'field' ? 'label' : 'legend'\n\n  return (\n    <Container\n      forwardedAs={fieldType === 'field' ? 'div' : 'fieldset'}\n      className={className}\n      {...marginProps}\n    >\n      {label && (\n        <>\n          {renderAsTitle ? (\n            <Box mb=\"16px\">\n              <Text tag={labelTag} typo=\"heading-small\" htmlFor={htmlFor}>\n                {label}\n              </Text>\n\n              {assistiveText && (\n                <Text tag=\"p\" color=\"sesame\" mt={{ custom: 4 }}>\n                  {assistiveText}\n                </Text>\n              )}\n            </Box>\n          ) : (\n            <Text\n              tag={labelTag}\n              typo=\"label\"\n              color={error ? 'strawberry' : 'sesame'}\n              htmlFor={htmlFor}\n              mb={{ custom: 4 }}\n            >\n              {label}\n              {required && (\n                <Text tag=\"span\" typo=\"body-small\" color=\"strawberry\">\n                  *\n                </Text>\n              )}\n            </Text>\n          )}\n        </>\n      )}\n\n      <Box>{children}</Box>\n      {fieldType === 'field' && assistiveText && !renderAsTitle && (\n        <Text\n          tag={labelTag}\n          typo=\"caption\"\n          color={error ? 'strawberry' : 'sesame'}\n          mt={{ custom: 4 }}\n        >\n          {assistiveText}\n        </Text>\n      )}\n\n      {error &&\n        errorMsg &&\n        (typeof errorMsg === 'string' ? (\n          <Text tag=\"span\" typo=\"caption\" color=\"strawberry\" mt=\"8px\">\n            {errorMsg}\n          </Text>\n        ) : (\n          <Box mt=\"8px\">{errorMsg}</Box>\n        ))}\n\n      {/* When completed is false, whitespace is rendered */}\n      {completed !== undefined && (\n        <AnimationWrapper\n          $displayStatus={completed}\n          $isError={!!(error && errorMsg)}\n        >\n          <StatusWrapper mt={'8px'}>\n            <Icon render=\"included\" size={16} color=\"apple\" />\n            <Text typo=\"caption\" color=\"apple\">\n              Complete\n            </Text>\n          </StatusWrapper>\n        </AnimationWrapper>\n      )}\n    </Container>\n  )\n}\n\nconst AnimationWrapper = styled(Box)<{\n  $displayStatus: boolean\n  $isError: boolean\n}>`\n  width: 0;\n  overflow: hidden;\n\n  ${({ $displayStatus }) =>\n    $displayStatus &&\n    css`\n      transition: width 0.6s ease-in;\n      width: 100%;\n    `}\n\n  /* This enables animation to appear when previous state is error */\n  ${({ $isError }) =>\n    $isError &&\n    css`\n      height: 0;\n    `}\n`\n\nconst StatusWrapper = styled(Box)`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n`\n\nconst Container = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n\n  // In case, the element is a 'fieldset', we remove the border\n  border: 0;\n`\n"]}

package/dist/fields/components/Placeholder.d.ts

@@ -1,2 +1,2 @@
-import { default as React } from 'react';
+import React from 'react';
 export declare const Placeholder: () => React.JSX.Element;

package/dist/fields/components/Placeholder.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Box } from '../../Box';
+import { theme } from '../../theme';
+export const Placeholder = () => {
+    return (React.createElement(Wrapper, null,
+        React.createElement(Svg, { xmlns: "http://www.w3.org/2000/svg" },
+            React.createElement(Line, { x1: "0", y1: "0", x2: "100%", y2: "100%" }),
+            React.createElement(Line, { x1: "100%", y1: "0", x2: "0", y2: "100%" }))));
+};
+const Wrapper = styled(Box) `
+  background-color: ${theme.colors.coconut};
+  border: 2px solid ${theme.colors.chia};
+  height: 40px;
+  width: auto;
+`;
+const Svg = styled.svg `
+  width: 100%;
+  height: 100%;
+`;
+const Line = styled.line `
+  stroke-width: 2px;
+  stroke: ${theme.colors.chia};
+`;
+//# sourceMappingURL=Placeholder.js.map

package/dist/fields/components/Placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Placeholder.js","sourceRoot":"","sources":["../../../src/fields/components/Placeholder.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAEnC,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,OAAO,CACL,oBAAC,OAAO;QACN,oBAAC,GAAG,IAAC,KAAK,EAAC,4BAA4B;YACrC,oBAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,MAAM,GAAG;YAC1C,oBAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,MAAM,GAAG,CACtC,CACE,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;sBACL,KAAK,CAAC,MAAM,CAAC,OAAO;sBACpB,KAAK,CAAC,MAAM,CAAC,IAAI;;;CAGtC,CAAA;AAED,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,CAAA;;;CAGrB,CAAA;AAED,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;YAEZ,KAAK,CAAC,MAAM,CAAC,IAAI;CAC5B,CAAA","sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../../Box'\nimport { theme } from '../../theme'\n\nexport const Placeholder = () => {\n  return (\n    <Wrapper>\n      <Svg xmlns=\"http://www.w3.org/2000/svg\">\n        <Line x1=\"0\" y1=\"0\" x2=\"100%\" y2=\"100%\" />\n        <Line x1=\"100%\" y1=\"0\" x2=\"0\" y2=\"100%\" />\n      </Svg>\n    </Wrapper>\n  )\n}\n\nconst Wrapper = styled(Box)`\n  background-color: ${theme.colors.coconut};\n  border: 2px solid ${theme.colors.chia};\n  height: 40px;\n  width: auto;\n`\n\nconst Svg = styled.svg`\n  width: 100%;\n  height: 100%;\n`\n\nconst Line = styled.line`\n  stroke-width: 2px;\n  stroke: ${theme.colors.chia};\n`\n"]}