@popsure/dirty-swan 0.33.5 → 0.34.0

package/dist/esm/components/input/currency/index.js

@@ -1,7 +1,7 @@
 import { a as __rest, _ as __assign } from '../../../tslib.es6-5bc94358.js';
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
-import Input from '../index.js';
+import { Input } from '../index.js';
 import '../../../index-e9e37a34.js';
 import '../../../index-fb46adf9.js';
 import '../../../style-inject.es-1f59c1d0.js';

package/dist/esm/components/input/currency/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/currency/format/index.ts","../../../../../../src/lib/components/input/currency/index.tsx"],"sourcesContent":["export const formatInput = (input: string): string => {\n  const decimalSeparator = input.includes(',') ? ',' : '.';\n  const parts = input.split(decimalSeparator);\n  const floor = parts[0];\n  const ceiling = parts[1];\n  parts[0] = floor.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ' ');\n  if (ceiling) {\n    parts[1] = ceiling.slice(0, Math.min(ceiling.length, 2));\n  }\n  return parts.join('.');\n};\n\nexport function reverseFormatInput(input: string): number {\n  return Number(input.replace(/,/, '.').replace(/\\s/g, ''));\n}\n","import { useEffect, useRef, useState } from 'react';\n\nimport { formatInput, reverseFormatInput } from './format';\nimport Input, { InputProps } from '..';\n\nconst CurrencyInput = ({\n  value,\n  onChange,\n  type,\n  ...props\n}: {\n  value?: number;\n  placeholder?: string;\n  onChange?: (value: number) => void;\n} & Omit<InputProps, 'onChange' | 'value' | 'ref'>) => {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const [cursor, setCursor] = useState<number | null>(null);\n  const [shadowValue, setShadowValue] = useState('');\n\n  const formattedShadowValue = formatInput(\n    shadowValue\n      .replace(/ /g, '') // remove all whitespace\n      .replace(',', '.') // change commas to dot for decimal separator\n      .replace('.', 'DECIMAL_SEPARATOR') // Gymnastic  to remove all the but the first decimal separators 🤸\n      .replace(/\\./g, '')\n      .replace('DECIMAL_SEPARATOR', '.') // End of the Gymnastic 🤸\n      .replace(/[^\\d\\\\.]/g, '') // remove all non decimal and dot\n  );\n\n  useEffect(() => {\n    if (value && value !== reverseFormatInput(shadowValue)) {\n      setShadowValue(formatInput(value.toString()));\n    }\n    // eslint-disable-next-line\n  }, [value]);\n\n  useEffect(() => {\n    onChange?.(reverseFormatInput(shadowValue));\n    // eslint-disable-next-line\n  }, [shadowValue]);\n\n  useEffect(() => {\n    if (!inputRef.current || !cursor) {\n      return;\n    }\n\n    const cursorDiff =  String(formattedShadowValue).length - String(shadowValue).length;\n    const newCursor = cursorDiff + cursor;\n\n    inputRef.current.selectionStart = newCursor;\n    inputRef.current.selectionEnd = newCursor;\n  },[cursor, formattedShadowValue, shadowValue])\n\n  return (\n    <Input\n      prefix=\"€\"\n      ref={inputRef}\n      type=\"string\"\n      value={formattedShadowValue}\n      onChange={(e) => {\n        setCursor(e.target.selectionStart);\n        setShadowValue(e.target.value);\n      }}\n      {...props}\n    />\n  );\n};\n\nexport default CurrencyInput;\n"],"names":["_jsx"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/currency/format/index.ts","../../../../../../src/lib/components/input/currency/index.tsx"],"sourcesContent":["export const formatInput = (input: string): string => {\n  const decimalSeparator = input.includes(',') ? ',' : '.';\n  const parts = input.split(decimalSeparator);\n  const floor = parts[0];\n  const ceiling = parts[1];\n  parts[0] = floor.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ' ');\n  if (ceiling) {\n    parts[1] = ceiling.slice(0, Math.min(ceiling.length, 2));\n  }\n  return parts.join('.');\n};\n\nexport function reverseFormatInput(input: string): number {\n  return Number(input.replace(/,/, '.').replace(/\\s/g, ''));\n}\n","import { useEffect, useRef, useState } from 'react';\n\nimport { formatInput, reverseFormatInput } from './format';\nimport { Input, InputProps } from '..';\n\nconst CurrencyInput = ({\n  value,\n  onChange,\n  type,\n  ...props\n}: {\n  value?: number;\n  placeholder?: string;\n  onChange?: (value: number) => void;\n} & Omit<InputProps, 'onChange' | 'value' | 'ref'>) => {\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const [cursor, setCursor] = useState<number | null>(null);\n  const [shadowValue, setShadowValue] = useState('');\n\n  const formattedShadowValue = formatInput(\n    shadowValue\n      .replace(/ /g, '') // remove all whitespace\n      .replace(',', '.') // change commas to dot for decimal separator\n      .replace('.', 'DECIMAL_SEPARATOR') // Gymnastic  to remove all the but the first decimal separators 🤸\n      .replace(/\\./g, '')\n      .replace('DECIMAL_SEPARATOR', '.') // End of the Gymnastic 🤸\n      .replace(/[^\\d\\\\.]/g, '') // remove all non decimal and dot\n  );\n\n  useEffect(() => {\n    if (value && value !== reverseFormatInput(shadowValue)) {\n      setShadowValue(formatInput(value.toString()));\n    }\n    // eslint-disable-next-line\n  }, [value]);\n\n  useEffect(() => {\n    onChange?.(reverseFormatInput(shadowValue));\n    // eslint-disable-next-line\n  }, [shadowValue]);\n\n  useEffect(() => {\n    if (!inputRef.current || !cursor) {\n      return;\n    }\n\n    const cursorDiff =  String(formattedShadowValue).length - String(shadowValue).length;\n    const newCursor = cursorDiff + cursor;\n\n    inputRef.current.selectionStart = newCursor;\n    inputRef.current.selectionEnd = newCursor;\n  },[cursor, formattedShadowValue, shadowValue])\n\n  return (\n    <Input\n      prefix=\"€\"\n      ref={inputRef}\n      type=\"string\"\n      value={formattedShadowValue}\n      onChange={(e) => {\n        setCursor(e.target.selectionStart);\n        setShadowValue(e.target.value);\n      }}\n      {...props}\n    />\n  );\n};\n\nexport default CurrencyInput;\n"],"names":["_jsx"],"mappings":";;;;;;;;AAAO,IAAM,WAAW,GAAG,UAAC,KAAa;IACvC,IAAM,gBAAgB,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;IACzD,IAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAC5C,IAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IACvB,IAAM,OAAO,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;IACzB,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,uBAAuB,EAAE,GAAG,CAAC,CAAC;IACvD,IAAI,OAAO,EAAE;QACX,KAAK,CAAC,CAAC,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC;KAC1D;IACD,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzB,CAAC,CAAC;SAEc,kBAAkB,CAAC,KAAa;IAC9C,OAAO,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;AAC5D;;ICTM,aAAa,GAAG,UAAC,EAS2B;QARhD,KAAK,WAAA,EACL,QAAQ,cAAA,SACJ,MACD,KAAK,cAJa,6BAKtB;IAKC,IAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IACjD,IAAA,KAAsB,QAAQ,CAAgB,IAAI,CAAC,EAAlD,MAAM,QAAA,EAAE,SAAS,QAAiC,CAAC;IACpD,IAAA,KAAgC,QAAQ,CAAC,EAAE,CAAC,EAA3C,WAAW,QAAA,EAAE,cAAc,QAAgB,CAAC;IAEnD,IAAM,oBAAoB,GAAG,WAAW,CACtC,WAAW;SACR,OAAO,CAAC,IAAI,EAAE,EAAE,CAAC;SACjB,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC;SACjB,OAAO,CAAC,GAAG,EAAE,mBAAmB,CAAC;SACjC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC;SAClB,OAAO,CAAC,mBAAmB,EAAE,GAAG,CAAC;SACjC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC;KAC5B,CAAC;IAEF,SAAS,CAAC;QACR,IAAI,KAAK,IAAI,KAAK,KAAK,kBAAkB,CAAC,WAAW,CAAC,EAAE;YACtD,cAAc,CAAC,WAAW,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;SAC/C;;KAEF,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC;QACR,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC,CAAC;;KAE7C,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,SAAS,CAAC;QACR,IAAI,CAAC,QAAQ,CAAC,OAAO,IAAI,CAAC,MAAM,EAAE;YAChC,OAAO;SACR;QAED,IAAM,UAAU,GAAI,MAAM,CAAC,oBAAoB,CAAC,CAAC,MAAM,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,MAAM,CAAC;QACrF,IAAM,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;QAEtC,QAAQ,CAAC,OAAO,CAAC,cAAc,GAAG,SAAS,CAAC;QAC5C,QAAQ,CAAC,OAAO,CAAC,YAAY,GAAG,SAAS,CAAC;KAC3C,EAAC,CAAC,MAAM,EAAE,oBAAoB,EAAE,WAAW,CAAC,CAAC,CAAA;IAE9C,QACEA,IAAC,KAAK,aACJ,MAAM,EAAC,QAAG,EACV,GAAG,EAAE,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,oBAAoB,EAC3B,QAAQ,EAAE,UAAC,CAAC;YACV,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC;YACnC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;SAChC,IACG,KAAK,UACT,EACF;AACJ;;;;"}

package/dist/esm/components/input/iban/index.js

@@ -1,6 +1,6 @@
 import { a as __rest, _ as __assign } from '../../../tslib.es6-5bc94358.js';
 import { jsx } from 'react/jsx-runtime';
-import Input from '../index.js';
+import { Input } from '../index.js';
 import 'react';
 import '../../../index-e9e37a34.js';
 import '../../../index-fb46adf9.js';

package/dist/esm/components/input/iban/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/iban/formatIban/index.ts","../../../../../../src/lib/components/input/iban/index.tsx"],"sourcesContent":["const IBAN_CHAR_LIMIT = 4;\n\nexport const formatIban = (iban?: string): string => {\n  if (iban) {\n    const cleanIban = iban\n      .replace(/\\s\\s+/g, ' ')\n      .replace(/[^0-9a-zA-Z]/gi, '')\n      .toUpperCase();\n\n    const values: string[] = [];\n\n    cleanIban.split('').forEach((char, idx) => {\n      if (idx % IBAN_CHAR_LIMIT === 0) {\n        values.push(cleanIban.substring(idx, idx + IBAN_CHAR_LIMIT));\n      }\n    });\n\n    return values.join(' ');\n  }\n\n  return '';\n};\n","import Input, { InputProps } from '..';\n\nimport { formatIban } from './formatIban';\n\nconst IbanInput = ({\n  value,\n  onChange,\n  ...props\n}: {\n  value?: string;\n  onChange: (value: string) => void;\n} & Omit<InputProps, 'onChange' | 'value' | 'ref'>) => (\n  <Input\n    value={formatIban(value)}\n    onChange={(e) => onChange(formatIban(e.target.value))}\n    {...props}\n  />\n);\n\nexport default IbanInput;\n"],"names":["_jsx"],"mappings":";;;;;;;;AAAA,IAAM,eAAe,GAAG,CAAC,CAAC;AAEnB,IAAM,UAAU,GAAG,UAAC,IAAa;IACtC,IAAI,IAAI,EAAE;QACR,IAAM,WAAS,GAAG,IAAI;aACnB,OAAO,CAAC,QAAQ,EAAE,GAAG,CAAC;aACtB,OAAO,CAAC,gBAAgB,EAAE,EAAE,CAAC;aAC7B,WAAW,EAAE,CAAC;QAEjB,IAAM,QAAM,GAAa,EAAE,CAAC;QAE5B,WAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,UAAC,IAAI,EAAE,GAAG;YACpC,IAAI,GAAG,GAAG,eAAe,KAAK,CAAC,EAAE;gBAC/B,QAAM,CAAC,IAAI,CAAC,WAAS,CAAC,SAAS,CAAC,GAAG,EAAE,GAAG,GAAG,eAAe,CAAC,CAAC,CAAC;aAC9D;SACF,CAAC,CAAC;QAEH,OAAO,QAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACzB;IAED,OAAO,EAAE,CAAC;AACZ,CAAC;;ICjBK,SAAS,GAAG,UAAC,EAO+B;IANhD,IAAA,KAAK,WAAA,EACL,QAAQ,cAAA,EACL,KAAK,cAHS,qBAIlB,CADS;IAI6C,QACrDA,IAAC,KAAK,aACJ,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,EACxB,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAA,IACjD,KAAK,UACT,EACH;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/lib/components/input/iban/formatIban/index.ts","../../../../../../src/lib/components/input/iban/index.tsx"],"sourcesContent":["const IBAN_CHAR_LIMIT = 4;\n\nexport const formatIban = (iban?: string): string => {\n  if (iban) {\n    const cleanIban = iban\n      .replace(/\\s\\s+/g, ' ')\n      .replace(/[^0-9a-zA-Z]/gi, '')\n      .toUpperCase();\n\n    const values: string[] = [];\n\n    cleanIban.split('').forEach((char, idx) => {\n      if (idx % IBAN_CHAR_LIMIT === 0) {\n        values.push(cleanIban.substring(idx, idx + IBAN_CHAR_LIMIT));\n      }\n    });\n\n    return values.join(' ');\n  }\n\n  return '';\n};\n","import { Input, InputProps } from '..';\n\nimport { formatIban } from './formatIban';\n\nconst IbanInput = ({\n  value,\n  onChange,\n  ...props\n}: {\n  value?: string;\n  onChange: (value: string) => void;\n} & Omit<InputProps, 'onChange' | 'value' | 'ref'>) => (\n  <Input\n    value={formatIban(value)}\n    onChange={(e) => onChange(formatIban(e.target.value))}\n    {...props}\n  />\n);\n\nexport default IbanInput;\n"],"names":["_jsx"],"mappings":";;;;;;;;AAAA,IAAM,eAAe,GAAG,CAAC,CAAC;AAEnB,IAAM,UAAU,GAAG,UAAC,IAAa;IACtC,IAAI,IAAI,EAAE;QACR,IAAM,WAAS,GAAG,IAAI;aACnB,OAAO,CAAC,QAAQ,EAAE,GAAG,CAAC;aACtB,OAAO,CAAC,gBAAgB,EAAE,EAAE,CAAC;aAC7B,WAAW,EAAE,CAAC;QAEjB,IAAM,QAAM,GAAa,EAAE,CAAC;QAE5B,WAAS,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,UAAC,IAAI,EAAE,GAAG;YACpC,IAAI,GAAG,GAAG,eAAe,KAAK,CAAC,EAAE;gBAC/B,QAAM,CAAC,IAAI,CAAC,WAAS,CAAC,SAAS,CAAC,GAAG,EAAE,GAAG,GAAG,eAAe,CAAC,CAAC,CAAC;aAC9D;SACF,CAAC,CAAC;QAEH,OAAO,QAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACzB;IAED,OAAO,EAAE,CAAC;AACZ,CAAC;;ICjBK,SAAS,GAAG,UAAC,EAO+B;IANhD,IAAA,KAAK,WAAA,EACL,QAAQ,cAAA,EACL,KAAK,cAHS,qBAIlB,CADS;IAI6C,QACrDA,IAAC,KAAK,aACJ,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,EACxB,QAAQ,EAAE,UAAC,CAAC,IAAK,OAAA,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAA,IACjD,KAAK,UACT,EACH;;;;;"}

package/dist/esm/components/input/index.js

@@ -25,5 +25,5 @@ var Input = React__default.forwardRef(function (_a, ref) {
             error && (jsx("p", __assign({ className: "p-p--small tc-red-500 w100 " + styles.error }, { children: error }), void 0))] }), void 0));
 });
 
-export default Input;
+export { Input };
 //# sourceMappingURL=index.js.map

package/dist/esm/components/input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/input/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classnames from 'classnames';\nimport generateId from '../../util/generateId';\n\nimport styles from './style.module.scss';\n\n// Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.\nexport type InputProps = {\n  error?: string;\n  prefix?: string;\n  label?: string;\n  id?: string;\n  hideLabel?: boolean;\n} & Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &\n  Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>>;\n\nexport default React.forwardRef(\n  (\n    {\n      className,\n      placeholder,\n      label,\n      id,\n      prefix,\n      error,\n      disabled,\n      hideLabel = false,\n      ...props\n    }: InputProps,\n    ref?: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const [uniqueId] = useState(id ?? generateId());\n    return (\n      <div className={`${styles.container} ${className ?? ''}`}>\n        {label && (\n          <label\n            htmlFor={uniqueId}\n            className={classnames('p-p', styles.label, {\n              [styles['label--with-error']]: error,\n              'sr-only': hideLabel,\n            })}\n          >\n            {label}\n          </label>\n        )}\n        <div style={{ position: 'relative' }}>\n          <input\n            id={uniqueId}\n            data-testid=\"ds-input-input\"\n            type=\"text\"\n            ref={ref}\n            className={classnames(\n              error ? 'p-input--error' : 'p-input',\n              !label && placeholder && placeholder.length > 0\n                ? styles.input\n                : styles['input--no-placeholder'],\n              { [styles['input--with-prefix']]: prefix }\n            )}\n            placeholder={label ? placeholder : ' '}\n            disabled={disabled}\n            {...props}\n          />\n          {prefix && (\n            <span\n              className={classnames(\n                styles.prefix,\n                { [styles['prefix--with-error']]: error },\n                { [styles['prefix--disabled']]: disabled }\n              )}\n            >\n              {prefix}\n            </span>\n          )}\n          {!label && (\n            <label\n              htmlFor={uniqueId}\n              className={classnames(\n                styles.placeholder,\n                { [styles['placeholder--with-prefix']]: prefix },\n                { [styles['placeholder--with-error']]: error }\n              )}\n            >\n              {placeholder}\n            </label>\n          )}\n        </div>\n        {error && (\n          <p className={`p-p--small tc-red-500 w100 ${styles.error}`}>\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["React","_jsxs","_jsx"],"mappings":";;;;;;;;;;;AAgBA,YAAeA,cAAK,CAAC,UAAU,CAC7B,UACE,EAUa,EACb,GAA0C;;IAVxC,IAAA,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,EAAE,QAAA,EACF,MAAM,YAAA,EACN,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACd,KAAK,cATV,uFAUC,CADS;IAIH,IAAA,QAAQ,GAAI,QAAQ,CAAC,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,EAAE,CAAC,GAAhC,CAAiC;IAChD,QACEC,uBAAK,SAAS,EAAK,MAAM,CAAC,SAAS,UAAI,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,iBACrD,KAAK,KACJC,wBACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAE,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK;oBACvC,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,KAAK;oBACpC,aAAS,GAAE,SAAS;wBACpB,gBAED,KAAK,YACA,CACT;YACDD,uBAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,iBAClCC,wBACE,EAAE,EAAE,QAAQ,iBACA,gBAAgB,EAC5B,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,KAAK,GAAG,gBAAgB,GAAG,SAAS,EACpC,CAAC,KAAK,IAAI,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC;8BAC3C,MAAM,CAAC,KAAK;8BACZ,MAAM,CAAC,uBAAuB,CAAC,YACjC,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,MAAM,MACzC,EACD,WAAW,EAAE,KAAK,GAAG,WAAW,GAAG,GAAG,EACtC,QAAQ,EAAE,QAAQ,IACd,KAAK,UACT;oBACD,MAAM,KACLA,uBACE,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,MAAM,YACX,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,KAAK,iBACrC,GAAC,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,MACzC,gBAEA,MAAM,YACF,CACR;oBACA,CAAC,KAAK,KACLA,wBACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,WAAW,YAChB,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,MAAM,iBAC5C,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,KAAK,MAC7C,gBAEA,WAAW,YACN,CACT,aACG;YACL,KAAK,KACJA,oBAAG,SAAS,EAAE,gCAA8B,MAAM,CAAC,KAAO,gBACvD,KAAK,YACJ,CACL,aACG,EACN;AACJ,CAAC,CACF;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/lib/components/input/index.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport classnames from 'classnames';\nimport generateId from '../../util/generateId';\n\nimport styles from './style.module.scss';\n\n// Something weird is going on with enterKeyHint that makes it a required field under certain circumstances. The & Omit<…> and & Pick<…> is a hacky way to go around that.\nexport type InputProps =  Omit<JSX.IntrinsicElements['input'], 'enterKeyHint'> &\n Partial<Pick<JSX.IntrinsicElements['input'], 'enterKeyHint'>> & {\n  error?: string;\n  prefix?: string;\n  label?: string;\n  id?: string;\n  hideLabel?: boolean;\n};\n\nexport const Input = React.forwardRef(\n  (\n    {\n      className,\n      placeholder,\n      label,\n      id,\n      prefix,\n      error,\n      disabled,\n      hideLabel = false,\n      ...props\n    }: InputProps,\n    ref?: React.ForwardedRef<HTMLInputElement>\n  ) => {\n    const [uniqueId] = useState(id ?? generateId());\n    return (\n      <div className={`${styles.container} ${className ?? ''}`}>\n        {label && (\n          <label\n            htmlFor={uniqueId}\n            className={classnames('p-p', styles.label, {\n              [styles['label--with-error']]: error,\n              'sr-only': hideLabel,\n            })}\n          >\n            {label}\n          </label>\n        )}\n        <div style={{ position: 'relative' }}>\n          <input\n            id={uniqueId}\n            data-testid=\"ds-input-input\"\n            type=\"text\"\n            ref={ref}\n            className={classnames(\n              error ? 'p-input--error' : 'p-input',\n              !label && placeholder && placeholder.length > 0\n                ? styles.input\n                : styles['input--no-placeholder'],\n              { [styles['input--with-prefix']]: prefix }\n            )}\n            placeholder={label ? placeholder : ' '}\n            disabled={disabled}\n            {...props}\n          />\n          {prefix && (\n            <span\n              className={classnames(\n                styles.prefix,\n                { [styles['prefix--with-error']]: error },\n                { [styles['prefix--disabled']]: disabled }\n              )}\n            >\n              {prefix}\n            </span>\n          )}\n          {!label && (\n            <label\n              htmlFor={uniqueId}\n              className={classnames(\n                styles.placeholder,\n                { [styles['placeholder--with-prefix']]: prefix },\n                { [styles['placeholder--with-error']]: error }\n              )}\n            >\n              {placeholder}\n            </label>\n          )}\n        </div>\n        {error && (\n          <p className={`p-p--small tc-red-500 w100 ${styles.error}`}>\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["React","_jsxs","_jsx"],"mappings":";;;;;;;;;;;IAgBa,KAAK,GAAGA,cAAK,CAAC,UAAU,CACnC,UACE,EAUa,EACb,GAA0C;;IAVxC,IAAA,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,EAAE,QAAA,EACF,MAAM,YAAA,EACN,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACd,KAAK,cATV,uFAUC,CADS;IAIH,IAAA,QAAQ,GAAI,QAAQ,CAAC,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,EAAE,CAAC,GAAhC,CAAiC;IAChD,QACEC,uBAAK,SAAS,EAAK,MAAM,CAAC,SAAS,UAAI,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAE,iBACrD,KAAK,KACJC,wBACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAE,UAAU,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK;oBACvC,GAAC,MAAM,CAAC,mBAAmB,CAAC,IAAG,KAAK;oBACpC,aAAS,GAAE,SAAS;wBACpB,gBAED,KAAK,YACA,CACT;YACDD,uBAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,iBAClCC,wBACE,EAAE,EAAE,QAAQ,iBACA,gBAAgB,EAC5B,IAAI,EAAC,MAAM,EACX,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,KAAK,GAAG,gBAAgB,GAAG,SAAS,EACpC,CAAC,KAAK,IAAI,WAAW,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC;8BAC3C,MAAM,CAAC,KAAK;8BACZ,MAAM,CAAC,uBAAuB,CAAC,YACjC,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,MAAM,MACzC,EACD,WAAW,EAAE,KAAK,GAAG,WAAW,GAAG,GAAG,EACtC,QAAQ,EAAE,QAAQ,IACd,KAAK,UACT;oBACD,MAAM,KACLA,uBACE,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,MAAM,YACX,GAAC,MAAM,CAAC,oBAAoB,CAAC,IAAG,KAAK,iBACrC,GAAC,MAAM,CAAC,kBAAkB,CAAC,IAAG,QAAQ,MACzC,gBAEA,MAAM,YACF,CACR;oBACA,CAAC,KAAK,KACLA,wBACE,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAE,UAAU,CACnB,MAAM,CAAC,WAAW,YAChB,GAAC,MAAM,CAAC,0BAA0B,CAAC,IAAG,MAAM,iBAC5C,GAAC,MAAM,CAAC,yBAAyB,CAAC,IAAG,KAAK,MAC7C,gBAEA,WAAW,YACN,CACT,aACG;YACL,KAAK,KACJA,oBAAG,SAAS,EAAE,gCAA8B,MAAM,CAAC,KAAO,gBACvD,KAAK,YACJ,CACL,aACG,EACN;AACJ,CAAC;;;;"}

package/dist/esm/components/input/input.stories.js

@@ -0,0 +1,85 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Input } from './index.js';
+import '../../tslib.es6-5bc94358.js';
+import '../../index-e9e37a34.js';
+import '../../index-fb46adf9.js';
+import '../../style-inject.es-1f59c1d0.js';
+
+var sharedConfig = {
+    value: {
+        defaultValue: '',
+        description: 'Current input value.',
+        control: { type: 'text' }
+    },
+    className: {
+        description: 'Wrapper classNames for custom styling',
+        defaultValue: '',
+        control: { type: 'text' }
+    },
+    placeholder: {
+        description: 'Placeholder for DirtySwan Input component',
+        defaultValue: 'Placeholder',
+        control: { type: 'text' }
+    },
+    label: {
+        description: 'Label of the Input component',
+        defaultValue: 'Input Label',
+        control: { type: 'text' }
+    },
+    hideLabel: {
+        description: 'Whether or not a label should be hidden.. This is needed for accessibility purposes and a label should always be provided',
+        defaultValue: false,
+        control: { type: 'boolean' }
+    },
+    prefix: {
+        description: 'A prefix that can be displayed on the left of the input. Specially useful for currencies.',
+        defaultValue: '£',
+        control: { type: 'text' }
+    },
+    id: {
+        description: 'Unique ID identifier of the input. Relevant for accessibility.',
+        defaultValue: '1234567890',
+        control: { type: 'text' }
+    },
+    error: {
+        description: 'Error message that will also make input show on error state.',
+        defaultValue: '',
+        control: { type: 'text' },
+        table: {
+            type: {
+                summary: 'string | boolean'
+            },
+        },
+    },
+    onChange: {
+        description: 'Function that is called when value of current input changes',
+        action: true,
+        table: {
+            category: "Callbacks",
+        },
+    },
+};
+
+var story = {
+    title: 'JSX/Inputs/Input',
+    component: Input,
+    argTypes: sharedConfig,
+    parameters: {
+        componentSubtitle: 'The default input component is used to gather informations from the user.'
+    }
+};
+var InputStory = function (_a) {
+    var onChange = _a.onChange, className = _a.className, placeholder = _a.placeholder, value = _a.value, label = _a.label, hideLabel = _a.hideLabel, prefix = _a.prefix, error = _a.error;
+    var _b = useState(value), newValue = _b[0], setValue = _b[1];
+    var handleOnChange = function (event) {
+        setValue(event.target.value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    };
+    return (jsx(Input, { onChange: handleOnChange, value: newValue, className: className, placeholder: placeholder, label: label, hideLabel: hideLabel, prefix: prefix, error: error }, void 0));
+};
+InputStory.storyName = 'Input';
+
+export default story;
+export { InputStory };
+//# sourceMappingURL=input.stories.js.map

package/dist/esm/components/input/input.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.stories.js","sources":["../../../../../src/lib/components/input/stories/config.ts","../../../../../src/lib/components/input/input.stories.tsx"],"sourcesContent":["const sharedConfig = {\n  value: {\n    defaultValue: '',\n    description: 'Current input value.',\n    control: { type: 'text' }\n  },\n  className: {\n    description: 'Wrapper classNames for custom styling',\n    defaultValue: '',\n    control: { type: 'text' }\n  },\n  placeholder: {\n    description: 'Placeholder for DirtySwan Input component',\n    defaultValue: 'Placeholder',\n    control: { type: 'text' }\n  },\n  label: {\n    description: 'Label of the Input component',\n    defaultValue: 'Input Label',\n    control: { type: 'text' }\n  },\n  hideLabel: {\n    description: 'Whether or not a label should be hidden.. This is needed for accessibility purposes and a label should always be provided',\n    defaultValue: false,\n    control: { type: 'boolean' }\n  },\n  prefix: {\n    description: 'A prefix that can be displayed on the left of the input. Specially useful for currencies.',\n    defaultValue: '£',\n    control: { type: 'text' }\n  },\n  id: {\n    description: 'Unique ID identifier of the input. Relevant for accessibility.',\n    defaultValue: '1234567890',\n    control: { type: 'text' }\n  },\n  error: {\n    description: 'Error message that will also make input show on error state.',\n    defaultValue: '',\n    control: { type: 'text' },\n    table: {\n      type: { \n        summary: 'string | boolean'\n      },\n    },\n  },\n  onChange: {\n    description: 'Function that is called when value of current input changes',\n    action: true,\n    table: {\n      category: \"Callbacks\",\n    },\n  },\n} \n\nexport default sharedConfig;","\nimport { ChangeEvent, useState } from 'react';\nimport { Input, InputProps } from '.';\nimport sharedConfig from './stories/config';\n\nconst story = {\n  title: 'JSX/Inputs/Input',\n  component: Input,\n  argTypes: sharedConfig,\n  parameters: {\n    componentSubtitle: 'The default input component is used to gather informations from the user.'\n  }\n};\n\nexport const InputStory = ({ \n  onChange,\n  className,\n  placeholder,\n  value,\n  label,\n  hideLabel,\n  prefix,\n  error\n}: InputProps) => {\n  const [newValue, setValue] = useState(value);\n\n  const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n    setValue(event.target.value)\n    onChange?.(event);\n  }\n\n  return (\n    <Input \n      onChange={handleOnChange}\n      value={newValue}\n      className={className}\n      placeholder={placeholder}\n      label={label}\n      hideLabel={hideLabel}\n      prefix={prefix}\n      error={error}\n    />\n  );\n};\n\nInputStory.storyName = 'Input';\n\nexport default story;\n"],"names":["_jsx"],"mappings":";;;;;;;;AAAA,IAAM,YAAY,GAAG;IACnB,KAAK,EAAE;QACL,YAAY,EAAE,EAAE;QAChB,WAAW,EAAE,sBAAsB;QACnC,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;KAC1B;IACD,SAAS,EAAE;QACT,WAAW,EAAE,uCAAuC;QACpD,YAAY,EAAE,EAAE;QAChB,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;KAC1B;IACD,WAAW,EAAE;QACX,WAAW,EAAE,2CAA2C;QACxD,YAAY,EAAE,aAAa;QAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;KAC1B;IACD,KAAK,EAAE;QACL,WAAW,EAAE,8BAA8B;QAC3C,YAAY,EAAE,aAAa;QAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;KAC1B;IACD,SAAS,EAAE;QACT,WAAW,EAAE,2HAA2H;QACxI,YAAY,EAAE,KAAK;QACnB,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;KAC7B;IACD,MAAM,EAAE;QACN,WAAW,EAAE,2FAA2F;QACxG,YAAY,EAAE,GAAG;QACjB,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;KAC1B;IACD,EAAE,EAAE;QACF,WAAW,EAAE,gEAAgE;QAC7E,YAAY,EAAE,YAAY;QAC1B,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;KAC1B;IACD,KAAK,EAAE;QACL,WAAW,EAAE,8DAA8D;QAC3E,YAAY,EAAE,EAAE;QAChB,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;QACzB,KAAK,EAAE;YACL,IAAI,EAAE;gBACJ,OAAO,EAAE,kBAAkB;aAC5B;SACF;KACF;IACD,QAAQ,EAAE;QACR,WAAW,EAAE,6DAA6D;QAC1E,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE;YACL,QAAQ,EAAE,WAAW;SACtB;KACF;CACF;;IChDK,KAAK,GAAG;IACZ,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,YAAY;IACtB,UAAU,EAAE;QACV,iBAAiB,EAAE,2EAA2E;KAC/F;EACD;IAEW,UAAU,GAAG,UAAC,EASd;QARX,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,KAAK,WAAA,EACL,SAAS,eAAA,EACT,MAAM,YAAA,EACN,KAAK,WAAA;IAEC,IAAA,KAAuB,QAAQ,CAAC,KAAK,CAAC,EAArC,QAAQ,QAAA,EAAE,QAAQ,QAAmB,CAAC;IAE7C,IAAM,cAAc,GAAG,UAAC,KAAoC;QAC1D,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAC5B,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,CAAC;KACnB,CAAA;IAED,QACEA,IAAC,KAAK,IACJ,QAAQ,EAAE,cAAc,EACxB,KAAK,EAAE,QAAQ,EACf,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,WACZ,EACF;AACJ,EAAE;AAEF,UAAU,CAAC,SAAS,GAAG,OAAO;;;;;"}

package/dist/esm/index-47663d39.js.map

@@ -1 +1 @@
-{"version":3,"file":"index-47663d39.js","sources":["../../src/lib/components/cards/icons/arrow-right.svg","../../src/lib/components/cards/icons/feather-logo.svg","../../src/lib/components/cards/icons/info.svg","../../src/lib/components/cards/icons/chevron-right.svg","../../../src/lib/components/cards/icons/index.ts","../../../src/lib/components/cards/cardButton/index.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%2012H19%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12%205L19%2012L12%2019%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cmask%20id%3D%22mask0%22%20mask-type%3D%22alpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%223%22%20y%3D%220%22%20width%3D%2222%22%20height%3D%2228%22%3E%3Cpath%20d%3D%22M23.8761%200C14.4485%204.03927%205.77595%2019.2529%203.53731%2026.0756C3.04003%2027.5912%202.60201%2029.2504%204.03812%2026.6043C4.89889%2025.0183%207.02902%2022.7858%2011.8864%2021.9848C15.7724%2021.344%2017.3995%2020.5116%2019.8916%2017.6795C18.7427%2018.0914%2017.2587%2018.9525%2014.0909%2017.9656C18.4837%2018.3512%2021.5108%2015.748%2022.6934%2012.044C19.7931%2013.3599%2017.3385%2012.4392%2016.6956%2012.1007C20.6519%2012.2002%2023.9887%209.68393%2024.7913%205.49304C25.2591%203.05005%2024.5097%200.800979%2023.8761%200Z%22%20fill%3D%22%236160A2%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23mask0%29%22%3E%3Cpath%20d%3D%22M21.1875%201.45451C12.8431%206.88225%205.56109%2019.9077%203.53731%2026.0756C3.04003%2027.5912%202.60201%2029.2504%204.03812%2026.6043C4.89889%2025.0183%207.02902%2022.7858%2011.8864%2021.9848C15.1146%2021.4525%2016.784%2020.7879%2018.6853%2018.9545C19.0219%2018.63%2019.1998%2017.9565%2018.7553%2018.1015C18.24%2018.2696%2017.709%2017.5612%2018.205%2017.3425C19.7521%2016.6603%2020.976%2015.4887%2021.8303%2014.0102C22.2446%2013.2932%2020.7231%2012.6796%2019.8955%2012.7075C18.8859%2012.7415%2019.6982%2011.6399%2020.6391%2011.2723C21.8973%2010.7807%2023.0427%2010.0842%2023.7916%209.26859C24.7617%208.21223%2024.48%207.11878%2024.7913%205.49304C24.969%204.56516%2024.971%203.66526%2024.8706%202.86204C24.6464%201.06951%2022.7019%200.469502%2021.1875%201.45451Z%22%20fill%3D%22%236160A2%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M30.4837%205.72996C30.4837%2014.8734%2023.1695%2022.4039%2014.0022%2022.4039C4.83493%2022.4039%20-2.47925%2014.8734%20-2.47925%205.72996C-2.47925%20-3.4135%204.83493%20-10.944%2014.0022%20-10.944C23.1695%20-10.944%2030.4837%20-3.4135%2030.4837%205.72996ZM14.0022%2018.0289C20.6884%2018.0289%2026.1087%2012.5225%2026.1087%205.72996C26.1087%20-1.06259%2020.6884%20-6.56903%2014.0022%20-6.56903C7.316%20-6.56903%201.89575%20-1.06259%201.89575%205.72996C1.89575%2012.5225%207.316%2018.0289%2014.0022%2018.0289Z%22%20fill%3D%22%2390DF9B%22%2F%3E%3Cpath%20d%3D%22M26.1087%205.72995C26.1087%2012.5225%2020.6884%2018.0289%2014.0022%2018.0289C7.316%2018.0289%201.89575%2012.5225%201.89575%205.72995C1.89575%20-1.06259%207.316%20-6.56903%2014.0022%20-6.56903C20.6884%20-6.56903%2026.1087%20-1.06259%2026.1087%205.72995Z%22%20fill%3D%22%238E8CEE%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23clip0%29%22%3E%3Cpath%20d%3D%22M10%2018.3334C14.6024%2018.3334%2018.3334%2014.6024%2018.3334%2010C18.3334%205.39765%2014.6024%201.66669%2010%201.66669C5.39765%201.66669%201.66669%205.39765%201.66669%2010C1.66669%2014.6024%205.39765%2018.3334%2010%2018.3334Z%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10%2013.3333V10%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%226.66665%22%20r%3D%220.833333%22%20fill%3D%22%238E8CEE%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%2018L15%2012L9%206%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"","import arrowRightImage from './arrow-right.svg';\nimport featherLogoImage from './feather-logo.svg';\nimport infoImage from './info.svg';\nimport chevronRightImage from './chevron-right.svg';\n\nexport interface Icon {\n  src: string;\n  alt: string;\n}\n\nexport interface IconSize {\n  width: number;\n  height: number;\n}\n\nconst arrowRight: Icon = {\n  src: arrowRightImage,\n  alt: 'arrow pointing right',\n};\n\nconst featherLogo: Icon = {\n  src: featherLogoImage,\n  alt: 'feather logo',\n};\n\nconst info: Icon = {\n  src: infoImage,\n  alt: 'circle with the letter i inside for information',\n};\n\nconst chevronRight: Icon = {\n  src: chevronRightImage,\n  alt: 'chevron facing right',\n};\n\nexport { arrowRight, featherLogo, info, chevronRight };\n","import { FormEvent, createElement, ReactNode } from 'react';\n\nimport styles from './style.module.scss';\nimport { chevronRight } from '../icons';\n\ninterface Props {\n  title: string;\n  description: string | ReactNode;\n  disabled?: boolean;\n  className?: string;\n}\n\ntype ActionProps =\n  | { href: string; onClick?: (e: FormEvent) => void }\n  | { href?: string; onClick: (e: FormEvent) => void };\n\nconst CardContent = ({\n  title,\n  description,\n}: {\n  title: string;\n  description: string | ReactNode;\n}) => (\n  <>\n    <div>\n      <div className=\"p-p--small\">{title}</div>\n      {typeof description === 'string' ? (\n        <div className=\"tc-primary-500 p-p\">{description}</div>\n      ) : (\n        description\n      )}\n    </div>\n    <img {...chevronRight} alt=\"Expander icon\" />\n  </>\n);\n\nconst CardButton = ({\n  title,\n  description,\n  disabled = false,\n  onClick,\n  href,\n  className,\n}: Props & ActionProps) => {\n  const component = href ? 'a' : 'button';\n  return (\n    <>\n      {createElement(component, {\n        className: `c-pointer ta-left w100 ${styles.container} ${\n          className ?? ''\n        }\n        `,\n        children: <CardContent title={title} description={description} />,\n        disabled,\n        ...(component === 'a' ? { href } : { onClick }),\n      })}\n    </>\n  );\n};\n\nexport default CardButton;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAAA,sBAAe;;ACAf,uBAAe;;ACAf,gBAAe;;ACAf,wBAAe;;ICeT,UAAU,GAAS;IACvB,GAAG,EAAE,eAAe;IACpB,GAAG,EAAE,sBAAsB;EAC3B;IAEI,WAAW,GAAS;IACxB,GAAG,EAAE,gBAAgB;IACrB,GAAG,EAAE,cAAc;EACnB;IAEI,IAAI,GAAS;IACjB,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,iDAAiD;EACtD;AAEF,IAAM,YAAY,GAAS;IACzB,GAAG,EAAE,iBAAiB;IACtB,GAAG,EAAE,sBAAsB;CAC5B;;ACjBD,IAAM,WAAW,GAAG,UAAC,EAMpB;QALC,KAAK,WAAA,EACL,WAAW,iBAAA;IAIP,QACJA,4BACEA,yBACEC,sBAAK,SAAS,EAAC,YAAY,gBAAE,KAAK,YAAO;oBACxC,OAAO,WAAW,KAAK,QAAQ,IAC9BA,sBAAK,SAAS,EAAC,oBAAoB,gBAAE,WAAW,YAAO,KAEvD,WAAW,CACZ,YACG;YACNA,wBAAS,YAAY,IAAE,GAAG,EAAC,eAAe,YAAG,YAC5C;AAXC,CAYL,CAAC;IAEI,UAAU,GAAG,UAAC,EAOE;QANpB,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,OAAO,aAAA,EACP,IAAI,UAAA,EACJ,SAAS,eAAA;IAET,IAAM,SAAS,GAAG,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;IACxC,QACEA,0BACG,aAAa,CAAC,SAAS,aACtB,SAAS,EAAE,4BAA0B,MAAM,CAAC,SAAS,UACnD,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,gBAEhB,EACD,QAAQ,EAAEA,IAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,WAAI,EACjE,QAAQ,UAAA,KACJ,SAAS,KAAK,GAAG,GAAG,EAAE,IAAI,MAAA,EAAE,GAAG,EAAE,OAAO,SAAA,EAAE,GAC9C,WACD,EACH;AACJ;;;;"}
+{"version":3,"file":"index-47663d39.js","sources":["../../src/lib/components/cards/icons/arrow-right.svg","../../src/lib/components/cards/icons/feather-logo.svg","../../src/lib/components/cards/icons/info.svg","../../src/lib/components/cards/icons/chevron-right.svg","../../../src/lib/components/cards/icons/index.ts","../../../src/lib/components/cards/cardButton/index.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%2012H19%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12%205L19%2012L12%2019%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cmask%20id%3D%22mask0%22%20mask-type%3D%22alpha%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%223%22%20y%3D%220%22%20width%3D%2222%22%20height%3D%2228%22%3E%3Cpath%20d%3D%22M23.8761%200C14.4485%204.03927%205.77595%2019.2529%203.53731%2026.0756C3.04003%2027.5912%202.60201%2029.2504%204.03812%2026.6043C4.89889%2025.0183%207.02902%2022.7858%2011.8864%2021.9848C15.7724%2021.344%2017.3995%2020.5116%2019.8916%2017.6795C18.7427%2018.0914%2017.2587%2018.9525%2014.0909%2017.9656C18.4837%2018.3512%2021.5108%2015.748%2022.6934%2012.044C19.7931%2013.3599%2017.3385%2012.4392%2016.6956%2012.1007C20.6519%2012.2002%2023.9887%209.68393%2024.7913%205.49304C25.2591%203.05005%2024.5097%200.800979%2023.8761%200Z%22%20fill%3D%22%236160A2%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23mask0%29%22%3E%3Cpath%20d%3D%22M21.1875%201.45451C12.8431%206.88225%205.56109%2019.9077%203.53731%2026.0756C3.04003%2027.5912%202.60201%2029.2504%204.03812%2026.6043C4.89889%2025.0183%207.02902%2022.7858%2011.8864%2021.9848C15.1146%2021.4525%2016.784%2020.7879%2018.6853%2018.9545C19.0219%2018.63%2019.1998%2017.9565%2018.7553%2018.1015C18.24%2018.2696%2017.709%2017.5612%2018.205%2017.3425C19.7521%2016.6603%2020.976%2015.4887%2021.8303%2014.0102C22.2446%2013.2932%2020.7231%2012.6796%2019.8955%2012.7075C18.8859%2012.7415%2019.6982%2011.6399%2020.6391%2011.2723C21.8973%2010.7807%2023.0427%2010.0842%2023.7916%209.26859C24.7617%208.21223%2024.48%207.11878%2024.7913%205.49304C24.969%204.56516%2024.971%203.66526%2024.8706%202.86204C24.6464%201.06951%2022.7019%200.469502%2021.1875%201.45451Z%22%20fill%3D%22%236160A2%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M30.4837%205.72996C30.4837%2014.8734%2023.1695%2022.4039%2014.0022%2022.4039C4.83493%2022.4039%20-2.47925%2014.8734%20-2.47925%205.72996C-2.47925%20-3.4135%204.83493%20-10.944%2014.0022%20-10.944C23.1695%20-10.944%2030.4837%20-3.4135%2030.4837%205.72996ZM14.0022%2018.0289C20.6884%2018.0289%2026.1087%2012.5225%2026.1087%205.72996C26.1087%20-1.06259%2020.6884%20-6.56903%2014.0022%20-6.56903C7.316%20-6.56903%201.89575%20-1.06259%201.89575%205.72996C1.89575%2012.5225%207.316%2018.0289%2014.0022%2018.0289Z%22%20fill%3D%22%2390DF9B%22%2F%3E%3Cpath%20d%3D%22M26.1087%205.72995C26.1087%2012.5225%2020.6884%2018.0289%2014.0022%2018.0289C7.316%2018.0289%201.89575%2012.5225%201.89575%205.72995C1.89575%20-1.06259%207.316%20-6.56903%2014.0022%20-6.56903C20.6884%20-6.56903%2026.1087%20-1.06259%2026.1087%205.72995Z%22%20fill%3D%22%238E8CEE%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url%28%23clip0%29%22%3E%3Cpath%20d%3D%22M10%2018.3334C14.6024%2018.3334%2018.3334%2014.6024%2018.3334%2010C18.3334%205.39765%2014.6024%201.66669%2010%201.66669C5.39765%201.66669%201.66669%205.39765%201.66669%2010C1.66669%2014.6024%205.39765%2018.3334%2010%2018.3334Z%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10%2013.3333V10%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%226.66665%22%20r%3D%220.833333%22%20fill%3D%22%238E8CEE%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E\"","export default \"data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%2018L15%2012L9%206%22%20stroke%3D%22%238E8CEE%22%20strokeWidth%3D%222%22%20strokeLinecap%3D%22round%22%20strokeLinejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E\"","import arrowRightImage from './arrow-right.svg';\nimport featherLogoImage from './feather-logo.svg';\nimport infoImage from './info.svg';\nimport chevronRightImage from './chevron-right.svg';\n\nexport interface Icon {\n  src: string;\n  alt: string;\n}\n\nexport interface IconSize {\n  width: number;\n  height: number;\n}\n\nconst arrowRight: Icon = {\n  src: arrowRightImage,\n  alt: 'arrow pointing right',\n};\n\nconst featherLogo: Icon = {\n  src: featherLogoImage,\n  alt: 'feather logo',\n};\n\nconst info: Icon = {\n  src: infoImage,\n  alt: 'circle with the letter i inside for information',\n};\n\nconst chevronRight: Icon = {\n  src: chevronRightImage,\n  alt: 'chevron facing right',\n};\n\nexport { arrowRight, featherLogo, info, chevronRight };\n","import { FormEvent, createElement, ReactNode } from 'react';\n\nimport styles from './style.module.scss';\nimport { chevronRight } from '../icons';\n\n\ntype ActionProps =\n  | { href: string; onClick?: (e: FormEvent) => void }\n  | { href?: string; onClick: (e: FormEvent) => void };\n\nexport type CardButtonProps = {\n  title: string;\n  description: string | ReactNode;\n  disabled?: boolean;\n  className?: string;\n} & ActionProps;\n\nconst CardContent = ({\n  title,\n  description,\n}: {\n  title: string;\n  description: string | ReactNode;\n}) => (\n  <>\n    <div>\n      <div className=\"p-p--small\">{title}</div>\n      {typeof description === 'string' ? (\n        <div className=\"tc-primary-500 p-p\">{description}</div>\n      ) : (\n        description\n      )}\n    </div>\n    <img {...chevronRight} alt=\"Expander icon\" />\n  </>\n);\n\nexport const CardButton = ({\n  title,\n  description,\n  disabled = false,\n  onClick,\n  href,\n  className,\n}: CardButtonProps) => {\n  const component = href ? 'a' : 'button';\n  return (\n    <>\n      {createElement(component, {\n        className: `c-pointer ta-left w100 ${styles.container} ${\n          className ?? ''\n        }\n        `,\n        children: <CardContent title={title} description={description} />,\n        disabled,\n        ...(component === 'a' ? { href } : { onClick }),\n      })}\n    </>\n  );\n};\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;;AAAA,sBAAe;;ACAf,uBAAe;;ACAf,gBAAe;;ACAf,wBAAe;;ICeT,UAAU,GAAS;IACvB,GAAG,EAAE,eAAe;IACpB,GAAG,EAAE,sBAAsB;EAC3B;IAEI,WAAW,GAAS;IACxB,GAAG,EAAE,gBAAgB;IACrB,GAAG,EAAE,cAAc;EACnB;IAEI,IAAI,GAAS;IACjB,GAAG,EAAE,SAAS;IACd,GAAG,EAAE,iDAAiD;EACtD;AAEF,IAAM,YAAY,GAAS;IACzB,GAAG,EAAE,iBAAiB;IACtB,GAAG,EAAE,sBAAsB;CAC5B;;AChBD,IAAM,WAAW,GAAG,UAAC,EAMpB;QALC,KAAK,WAAA,EACL,WAAW,iBAAA;IAIP,QACJA,4BACEA,yBACEC,sBAAK,SAAS,EAAC,YAAY,gBAAE,KAAK,YAAO;oBACxC,OAAO,WAAW,KAAK,QAAQ,IAC9BA,sBAAK,SAAS,EAAC,oBAAoB,gBAAE,WAAW,YAAO,KAEvD,WAAW,CACZ,YACG;YACNA,wBAAS,YAAY,IAAE,GAAG,EAAC,eAAe,YAAG,YAC5C;AAXC,CAYL,CAAC;IAEW,UAAU,GAAG,UAAC,EAOT;QANhB,KAAK,WAAA,EACL,WAAW,iBAAA,EACX,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,OAAO,aAAA,EACP,IAAI,UAAA,EACJ,SAAS,eAAA;IAET,IAAM,SAAS,GAAG,IAAI,GAAG,GAAG,GAAG,QAAQ,CAAC;IACxC,QACEA,0BACG,aAAa,CAAC,SAAS,aACtB,SAAS,EAAE,4BAA0B,MAAM,CAAC,SAAS,UACnD,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,gBAEhB,EACD,QAAQ,EAAEA,IAAC,WAAW,IAAC,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,WAAI,EACjE,QAAQ,UAAA,KACJ,SAAS,KAAK,GAAG,GAAG,EAAE,IAAI,MAAA,EAAE,GAAG,EAAE,OAAO,SAAA,EAAE,GAC9C,WACD,EACH;AACJ;;;;"}

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 export { D as DateSelector } from './index-639cf8b3.js';
 export { SignaturePad } from './components/signaturePad/index.js';
 export { AutocompleteAddress } from './components/autocompleteAddress/index.js';
-export { default as Input } from './components/input/index.js';
+export { Input } from './components/input/index.js';
 export { MultiDropzone } from './components/multiDropzone/index.js';
 export { DownloadButton } from './components/downloadButton/index.js';
 export { default as IbanInput } from './components/input/iban/index.js';

package/dist/esm/lib/components/cards/cardButton/index.d.ts

@@ -1,10 +1,4 @@
 import { FormEvent, ReactNode } from 'react';
-interface Props {
-    title: string;
-    description: string | ReactNode;
-    disabled?: boolean;
-    className?: string;
-}
 declare type ActionProps = {
     href: string;
     onClick?: (e: FormEvent) => void;
@@ -12,5 +6,11 @@ declare type ActionProps = {
     href?: string;
     onClick: (e: FormEvent) => void;
 };
-declare const CardButton: ({ title, description, disabled, onClick, href, className, }: Props & ActionProps) => JSX.Element;
-export default CardButton;
+export declare type CardButtonProps = {
+    title: string;
+    description: string | ReactNode;
+    disabled?: boolean;
+    className?: string;
+} & ActionProps;
+export declare const CardButton: ({ title, description, disabled, onClick, href, className, }: CardButtonProps) => JSX.Element;
+export {};

package/dist/esm/lib/components/cards/cardButton/index.stories.d.ts

@@ -0,0 +1,39 @@
+import { CardButtonProps } from '.';
+declare const story: {
+    title: string;
+    component: ({ title, description, disabled, onClick, href, className, }: CardButtonProps) => JSX.Element;
+    argTypes: {
+        title: {
+            defaultValue: string;
+            description: string;
+        };
+        description: {
+            defaultValue: string;
+            description: string;
+        };
+        disabled: {
+            defaultValue: boolean;
+            description: string;
+        };
+        className: {
+            defaultValue: string;
+            description: string;
+        };
+        onClick: {
+            description: string;
+            action: boolean;
+            table: {
+                category: string;
+            };
+        };
+        href: {
+            defaultValue: string;
+            description: string;
+        };
+    };
+};
+export declare const CardButtonStory: {
+    ({ title, description, disabled, className, href, onClick, }: CardButtonProps): JSX.Element;
+    storyName: string;
+};
+export default story;

package/dist/esm/lib/components/cards/cardWithLeftIcon/index.d.ts

@@ -1,14 +1,8 @@
-/// <reference types="react" />
 import { CardProps } from '..';
 import { Icon } from '../icons';
-declare const _default: ({ className, title, cardSize, children, leftIcon, rightIcon, state, dropshadow, ...props }: {
-    title: string;
-    children: import("react").ReactNode;
-    state?: ("actionable" | "static" | "muted") | undefined;
-    dropshadow?: boolean | undefined;
-} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    cardSize?: "big" | "small" | "xsmall" | "medium" | undefined;
-    leftIcon?: Icon | undefined;
-    rightIcon?: Icon | "arrow" | undefined;
-}) => JSX.Element;
-export default _default;
+export declare type CardWithLeftIconProps = CardProps & {
+    cardSize?: 'xsmall' | 'small' | 'medium' | 'big';
+    leftIcon?: Icon;
+    rightIcon?: 'arrow' | Icon;
+};
+export declare const CardWithLeftIcon: ({ className, title, cardSize, children, leftIcon, rightIcon, state, dropshadow, ...props }: CardWithLeftIconProps) => JSX.Element;

package/dist/esm/lib/components/cards/cardWithLeftIcon/index.stories.d.ts

@@ -0,0 +1,55 @@
+import { CardWithLeftIconProps } from '.';
+declare const story: {
+    title: string;
+    component: ({ className, title, cardSize, children, leftIcon, rightIcon, state, dropshadow, ...props }: CardWithLeftIconProps) => JSX.Element;
+    argTypes: {
+        title: {
+            defaultValue: string;
+            description: string;
+        };
+        children: {
+            type: string;
+            defaultValue: string;
+            description: string;
+        };
+        state: {
+            defaultValue: string;
+            description: string;
+        };
+        leftIcon: {
+            defaultValue: {
+                src: "https://assets.cdn.feather-insurance.com/assets/images/mortgage.svg";
+                alt: string;
+            };
+            description: string;
+        };
+        rightIcon: {
+            defaultValue: {
+                src: "https://assets.cdn.feather-insurance.com/assets/images/washingMachine.svg";
+                alt: string;
+            };
+            description: string;
+        };
+        cardSize: {
+            control: {
+                type: string;
+            };
+            defaultValue: string;
+            description: string;
+        };
+        dropshadow: {
+            defaultValue: boolean;
+            description: string;
+        };
+        className: {
+            defaultValue: string;
+            type: string;
+            description: string;
+        };
+    };
+};
+export declare const CardWithLeftIconStory: {
+    ({ title, dropshadow, children, className, cardSize, leftIcon, rightIcon, state, }: CardWithLeftIconProps): JSX.Element;
+    storyName: string;
+};
+export default story;

package/dist/esm/lib/components/cards/cardWithTopIcon/index.d.ts

@@ -1,15 +1,9 @@
-/// <reference types="react" />
 import { CardProps } from '..';
 import { Icon, IconSize } from '../icons';
-declare const _default: ({ className, title, cardSize, children, topIcon, topIconSize, rightIcon, state, dropshadow, ...props }: {
-    title: string;
-    children: import("react").ReactNode;
-    state?: ("actionable" | "static" | "muted") | undefined;
-    dropshadow?: boolean | undefined;
-} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+export declare type CardWithTopIconProps = CardProps & {
     topIcon: Icon;
     topIconSize: IconSize;
-    cardSize?: "big" | "small" | "medium" | undefined;
-    rightIcon?: Icon | "arrow" | undefined;
-}) => JSX.Element;
-export default _default;
+    cardSize?: 'small' | 'medium' | 'big';
+    rightIcon?: 'arrow' | Icon;
+};
+export declare const CardWithTopIcon: ({ className, title, cardSize, children, topIcon, topIconSize, rightIcon, state, dropshadow, ...props }: CardWithTopIconProps) => JSX.Element;

package/dist/esm/lib/components/cards/cardWithTopIcon/index.stories.d.ts

@@ -0,0 +1,59 @@
+import { CardWithTopIconProps } from '.';
+declare const story: {
+    title: string;
+    component: ({ className, title, cardSize, children, topIcon, topIconSize, rightIcon, state, dropshadow, ...props }: CardWithTopIconProps) => JSX.Element;
+    argTypes: {
+        title: {
+            defaultValue: string;
+            description: string;
+        };
+        children: {
+            type: string;
+            defaultValue: string;
+            description: string;
+        };
+        state: {
+            defaultValue: string;
+            description: string;
+        };
+        topIcon: {
+            defaultValue: {
+                src: "https://assets.cdn.feather-insurance.com/assets/images/mortgage.svg";
+                alt: string;
+            };
+            description: string;
+        };
+        topIconSize: {
+            defaultValue: {
+                width: number;
+                height: number;
+            };
+            description: string;
+        };
+        rightIcon: {
+            defaultValue: string;
+            description: string;
+        };
+        cardSize: {
+            control: {
+                type: string;
+            };
+            defaultValue: string;
+            description: string;
+        };
+        dropshadow: {
+            defaultValue: boolean;
+            description: string;
+        };
+        className: {
+            defaultValue: string;
+            type: string;
+            description: string;
+        };
+    };
+};
+export declare const CardWithTopIconStory: {
+    ({ title, dropshadow, cardSize, children, className, topIcon, topIconSize, rightIcon, state, }: CardWithTopIconProps): JSX.Element;
+    storyName: string;
+};
+export default story;

package/dist/esm/lib/components/cards/cardWithTopLeftIcon/index.d.ts

@@ -1,14 +1,8 @@
-/// <reference types="react" />
 import { CardProps } from '..';
 import { Icon } from '../icons';
-declare const _default: ({ className, title, cardSize, children, leftIcon, rightIcon, state, dropshadow, ...props }: {
-    title: string;
-    children: import("react").ReactNode;
-    state?: ("actionable" | "static" | "muted") | undefined;
-    dropshadow?: boolean | undefined;
-} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
-    cardSize?: "big" | "small" | "xsmall" | "medium" | undefined;
-    leftIcon?: Icon | "logo" | undefined;
-    rightIcon?: Icon | "arrow" | undefined;
-}) => JSX.Element;
-export default _default;
+export declare type CardWithTopLeftIconProps = CardProps & {
+    cardSize?: 'xsmall' | 'small' | 'medium' | 'big';
+    leftIcon?: 'logo' | Icon;
+    rightIcon?: 'arrow' | Icon;
+};
+export declare const CardWithTopLeftIcon: ({ className, title, cardSize, children, leftIcon, rightIcon, state, dropshadow, ...props }: CardWithTopLeftIconProps) => JSX.Element;

package/dist/esm/lib/components/cards/cardWithTopLeftIcon/index.stories.d.ts

@@ -0,0 +1,49 @@
+import { CardWithTopLeftIconProps } from '.';
+declare const story: {
+    title: string;
+    component: ({ className, title, cardSize, children, leftIcon, rightIcon, state, dropshadow, ...props }: CardWithTopLeftIconProps) => JSX.Element;
+    argTypes: {
+        title: {
+            defaultValue: string;
+            description: string;
+        };
+        children: {
+            type: string;
+            defaultValue: string;
+            description: string;
+        };
+        state: {
+            defaultValue: string;
+            description: string;
+        };
+        leftIcon: {
+            defaultValue: string;
+            description: string;
+        };
+        rightIcon: {
+            defaultValue: string;
+            description: string;
+        };
+        cardSize: {
+            control: {
+                type: string;
+            };
+            defaultValue: string;
+            description: string;
+        };
+        dropshadow: {
+            defaultValue: boolean;
+            description: string;
+        };
+        className: {
+            defaultValue: string;
+            type: string;
+            description: string;
+        };
+    };
+};
+export declare const CardWithTopLeftIconStory: {
+    ({ title, dropshadow, children, className, cardSize, leftIcon, rightIcon, state, }: CardWithTopLeftIconProps): JSX.Element;
+    storyName: string;
+};
+export default story;

package/dist/esm/lib/components/cards/index.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-import CardWithTopLeftIcon from './cardWithTopLeftIcon';
-import CardWithLeftIcon from './cardWithLeftIcon';
-import CardWithTopIcon from './cardWithTopIcon';
-import InfoCard from './infoCard';
-import CardButton from './cardButton';
+import { CardWithTopLeftIcon } from './cardWithTopLeftIcon';
+import { CardWithLeftIcon } from './cardWithLeftIcon';
+import { CardWithTopIcon } from './cardWithTopIcon';
+import { InfoCard } from './infoCard';
+import { CardButton } from './cardButton';
 declare type CardState = 'actionable' | 'static' | 'muted';
 export declare type CardProps = {
     title: string;

package/dist/esm/lib/components/cards/infoCard/index.d.ts

@@ -1,13 +1,7 @@
-/// <reference types="react" />
 import { CardProps } from '..';
 import { Icon } from '../icons';
-declare const _default: ({ className, title, children, topIcon, rightIcon, state, dropshadow, ...props }: {
-    title: string;
-    children: import("react").ReactNode;
-    state?: ("actionable" | "static" | "muted") | undefined;
-    dropshadow?: boolean | undefined;
-} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+export declare type InfoCardProps = CardProps & {
     topIcon: Icon;
-    rightIcon?: Icon | "info" | undefined;
-}) => JSX.Element;
-export default _default;
+    rightIcon?: 'info' | Icon;
+};
+export declare const InfoCard: ({ className, title, children, topIcon, rightIcon, state, dropshadow, ...props }: InfoCardProps) => JSX.Element;

package/dist/esm/lib/components/cards/infoCard/index.stories.d.ts

@@ -0,0 +1,47 @@
+import { InfoCardProps } from '.';
+declare const story: {
+    title: string;
+    component: ({ className, title, children, topIcon, rightIcon, state, dropshadow, ...props }: InfoCardProps) => JSX.Element;
+    argTypes: {
+        title: {
+            defaultValue: string;
+            description: string;
+        };
+        children: {
+            type: string;
+            defaultValue: string;
+            description: string;
+        };
+        state: {
+            defaultValue: string;
+            description: string;
+        };
+        topIcon: {
+            defaultValue: {
+                src: "https://assets.cdn.feather-insurance.com/assets/images/mortgage.svg";
+                alt: string;
+            };
+            description: string;
+        };
+        rightIcon: {
+            defaultValue: {
+                src: "https://assets.cdn.feather-insurance.com/assets/images/washingMachine.svg";
+                alt: string;
+            };
+            description: string;
+        };
+        dropshadow: {
+            defaultValue: boolean;
+            description: string;
+        };
+        className: {
+            defaultValue: string;
+            description: string;
+        };
+    };
+};
+export declare const InfoCardStory: {
+    ({ title, dropshadow, children, className, rightIcon, state, topIcon }: InfoCardProps): JSX.Element;
+    storyName: string;
+};
+export default story;