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

package/dist/Table/types.d.ts

@@ -0,0 +1,114 @@
+import React, { ReactElement, ReactNode } from 'react';
+import { ButtonProps } from '../Button/Button';
+import { IconStrictProps } from '../IconStrict';
+import { Color } from '../theme';
+export type TableStylesProps = {
+    hasKeyline?: boolean;
+    fixedHeader?: boolean;
+    headerHeight?: string;
+    stripedColor?: Color;
+    stickyCell?: boolean;
+    headerColor?: Color;
+    rowColor?: Color;
+    rowBorderColor?: Color;
+    rowActionsBgColor?: Color;
+    minWidth?: string;
+    maxWidth?: string;
+    noWrapContent?: boolean;
+    truncateContent?: boolean;
+    rowPadding?: string;
+    columnPadding?: string;
+    hideOverflow?: boolean;
+    clickableRow?: boolean;
+};
+export type Primitive = string | number | boolean | bigint;
+export type BaseRowAction<T> = {
+    onClick: (rowData: T) => void;
+    showCondition?: (rowData: T) => boolean;
+};
+export type RowAction<T> = RowActionButtonDefault<T> | RowActionElementOverride<T>;
+export type RowActionButtonDefault<T> = {
+    iconButton?: Pick<IconStrictProps, 'size' | 'render' | 'iconColor' | 'backgroundColor' | 'id' | 'title'> & {
+        tooltipText?: string;
+    };
+    genericButton?: Pick<ButtonProps, 'children' | 'loading' | 'disabled' | 'primary' | 'secondary' | 'fallbackStyle' | 'textBtn' | 'smallButton' | 'id'>;
+} & BaseRowAction<T>;
+export type RowActionElementOverride<T> = {
+    element: ReactElement<any>;
+} & BaseRowAction<T>;
+export type RowActions<T> = {
+    actions: RowAction<T>[];
+    minWidth?: string;
+    bgColor?: Color;
+};
+type RowCellRenderer<T> = (row: T, rowIndex: number, column: TableColumn<T>, id: string | number) => React.ReactNode;
+export interface TableColumn<T> {
+    name?: string | number | React.ReactNode;
+    minWidth?: string;
+    maxWidth?: string;
+    noWrapContent?: boolean;
+    truncateContent?: boolean;
+    hideOverflow?: boolean;
+    cell?: RowCellRenderer<T>;
+}
+/** @template T - The type of data the table displays. */
+interface CommonTableProps<T> {
+    /** Array of columns to display in the table. */
+    columns: TableColumn<T>[];
+    /** Sets the height of the header. */
+    headerHeight?: string;
+    /** If true, the table header will be fixed/sticky. */
+    fixedHeader?: boolean;
+    /** If true, the table header will have a key line. */
+    hasKeyline?: boolean;
+    /** If present, the table rows will have alternating colors. */
+    stripedColor?: Color;
+    /** A function to determine if a row is expandable. */
+    expandable?: (rowData: T) => boolean;
+    /** The color for the table header. */
+    headerColor?: Color;
+    /** The default color for each table row. */
+    rowColor?: Color;
+    /** The default color for each table row border. */
+    rowBorderColor?: Color;
+    /** A React element to show when a row is expanded. */
+    subTable?: {
+        table: (rowData: T) => ReactElement<any>;
+        showOnExpand?: (rowData: T) => boolean;
+    };
+    /** Settings for sub rows. */
+    subRows?: {
+        /** Function that returns a React element for the sub row. */
+        rows: (rowData: T) => ReactElement<any> | ReactElement<any>[];
+        /** If true, the sub rows will only be shown when the row is expanded. */
+        showOnExpand?: (rowData: T) => boolean;
+    };
+    /** Function to apply to a row, to make the entire row clickable, useful for navigation. */
+    clickableRow?: (rowData: T) => void;
+    /** Array of actions that can be performed on each row. */
+    rowActions?: RowActions<T>;
+    /** The Y padding for each row. */
+    rowPadding?: string;
+    /** The X padding for each row. */
+    columnPadding?: string;
+    /** Hides the table header. Table defaults to always showing the header. */
+    hideTableHeader?: boolean;
+}
+export interface TableProps<T> extends CommonTableProps<T> {
+    /** Array of data to be displayed in the table. */
+    data: T[];
+    /** The text to show when there is no available data to map through. */
+    noDataContent?: ReactNode;
+}
+export interface TableRowProps<T> extends CommonTableProps<T> {
+    rowData: T;
+    rowIndex: number;
+    showActions?: boolean;
+}
+export interface RowActionsProps<T> extends Pick<CommonTableProps<T>, 'expandable' | 'rowActions'> {
+    rowData: T;
+    toggleExpansion: () => void;
+    isExpanded?: boolean;
+}
+export type TableHeaderProps<T> = CommonTableProps<T>;
+export {};

package/dist/Table/types.js

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

package/dist/Table/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Table/types.ts"],"names":[],"mappings":"","sourcesContent":["import React, { ReactElement, ReactNode } from 'react'\nimport { ButtonProps } from '../Button/Button'\nimport { IconStrictProps } from '../IconStrict'\nimport { Color } from '../theme'\n\nexport type TableStylesProps = {\n  hasKeyline?: boolean\n  fixedHeader?: boolean\n  headerHeight?: string\n  stripedColor?: Color\n  stickyCell?: boolean\n  headerColor?: Color\n  rowColor?: Color\n  rowBorderColor?: Color\n  rowActionsBgColor?: Color\n  minWidth?: string\n  maxWidth?: string\n  noWrapContent?: boolean\n  truncateContent?: boolean\n  rowPadding?: string\n  columnPadding?: string\n  hideOverflow?: boolean\n  clickableRow?: boolean\n}\n\nexport type Primitive = string | number | boolean | bigint\n\nexport type BaseRowAction<T> = {\n  onClick: (rowData: T) => void\n  showCondition?: (rowData: T) => boolean\n}\n\nexport type RowAction<T> =\n  | RowActionButtonDefault<T>\n  | RowActionElementOverride<T>\n\nexport type RowActionButtonDefault<T> = {\n  iconButton?: Pick<\n    IconStrictProps,\n    'size' | 'render' | 'iconColor' | 'backgroundColor' | 'id' | 'title'\n  > & { tooltipText?: string }\n  genericButton?: Pick<\n    ButtonProps,\n    | 'children'\n    | 'loading'\n    | 'disabled'\n    | 'primary'\n    | 'secondary'\n    | 'fallbackStyle'\n    | 'textBtn'\n    | 'smallButton'\n    | 'id'\n  >\n} & BaseRowAction<T>\n\nexport type RowActionElementOverride<T> = {\n  element: ReactElement<any>\n} & BaseRowAction<T>\n\nexport type RowActions<T> = {\n  actions: RowAction<T>[]\n  minWidth?: string\n  bgColor?: Color\n}\n\ntype RowCellRenderer<T> = (\n  row: T,\n  rowIndex: number,\n  column: TableColumn<T>,\n  id: string | number,\n) => React.ReactNode\n\nexport interface TableColumn<T> {\n  name?: string | number | React.ReactNode\n  minWidth?: string\n  maxWidth?: string\n  noWrapContent?: boolean\n  truncateContent?: boolean\n  hideOverflow?: boolean\n  cell?: RowCellRenderer<T>\n}\n\n/** @template T - The type of data the table displays. */\ninterface CommonTableProps<T> {\n  /** Array of columns to display in the table. */\n  columns: TableColumn<T>[]\n  /** Sets the height of the header. */\n  headerHeight?: string\n  /** If true, the table header will be fixed/sticky. */\n  fixedHeader?: boolean\n  /** If true, the table header will have a key line. */\n  hasKeyline?: boolean\n  /** If present, the table rows will have alternating colors. */\n  stripedColor?: Color\n  /** A function to determine if a row is expandable. */\n  expandable?: (rowData: T) => boolean\n  /** The color for the table header. */\n  headerColor?: Color\n  /** The default color for each table row. */\n  rowColor?: Color\n  /** The default color for each table row border. */\n  rowBorderColor?: Color\n  /** A React element to show when a row is expanded. */\n  subTable?: {\n    table: (rowData: T) => ReactElement<any>\n    showOnExpand?: (rowData: T) => boolean\n  }\n  /** Settings for sub rows. */\n  subRows?: {\n    /** Function that returns a React element for the sub row. */\n    rows: (rowData: T) => ReactElement<any> | ReactElement<any>[]\n    /** If true, the sub rows will only be shown when the row is expanded. */\n    showOnExpand?: (rowData: T) => boolean\n  }\n  /** Function to apply to a row, to make the entire row clickable, useful for navigation. */\n  clickableRow?: (rowData: T) => void\n  /** Array of actions that can be performed on each row. */\n  rowActions?: RowActions<T>\n  /** The Y padding for each row. */\n  rowPadding?: string\n  /** The X padding for each row. */\n  columnPadding?: string\n  /** Hides the table header. Table defaults to always showing the header. */\n  hideTableHeader?: boolean\n}\n\nexport interface TableProps<T> extends CommonTableProps<T> {\n  /** Array of data to be displayed in the table. */\n  data: T[]\n  /** The text to show when there is no available data to map through. */\n  noDataContent?: ReactNode\n}\n\nexport interface TableRowProps<T> extends CommonTableProps<T> {\n  rowData: T\n  rowIndex: number\n  showActions?: boolean\n}\n\nexport interface RowActionsProps<T>\n  extends Pick<CommonTableProps<T>, 'expandable' | 'rowActions'> {\n  rowData: T\n  toggleExpansion: () => void\n  isExpanded?: boolean\n}\n\nexport type TableHeaderProps<T> = CommonTableProps<T>\n"]}

package/dist/Tag/Tag.d.ts

@@ -0,0 +1,11 @@
+import { FC } from 'react';
+import { MarginProps } from '../utils/space';
+import { Color } from '../theme';
+export type TagProps = {
+    label: string;
+    color: Color;
+    bgColor: Color;
+    borderColor?: Color;
+    className?: string;
+} & MarginProps;
+export declare const Tag: FC<TagProps>;

package/dist/Tag/Tag.js

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

package/dist/Tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/Tag/Tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAItC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAUvC,MAAM,CAAC,MAAM,GAAG,GAAiB,CAAC,EAChC,KAAK,EACL,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,GAAG,WAAW,EACf,EAAE,EAAE,CAAC,CACJ,oBAAC,OAAO,gBACI,OAAO,EACjB,SAAS,EAAE,SAAS,kBACN,WAAW,KACrB,WAAW,EACf,YAAY,EAAC,QAAQ,EACrB,cAAc,EAAC,QAAQ;IAEvB,oBAAC,OAAO,IAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,KAAK,IAC1C,KAAK,CACE,CACF,CACX,CAAA;AAID,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAc;sBACnB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,IAAI,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;YAC9D,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE,CAC7B,YAAY,IAAI,aAAa,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE;;;;;;;;;CAS5D,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;;;CAO3B,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled from 'styled-components'\nimport { MarginProps } from '../utils/space'\n\nimport { TransientProps } from 'utils/utilTypes'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { Color, theme } from '../theme'\n\nexport type TagProps = {\n  label: string\n  color: Color\n  bgColor: Color\n  borderColor?: Color\n  className?: string\n} & MarginProps\n\nexport const Tag: FC<TagProps> = ({\n  label,\n  color,\n  borderColor,\n  bgColor,\n  className,\n  ...marginProps\n}) => (\n  <Wrapper\n    $bgColor={bgColor}\n    className={className}\n    $borderColor={borderColor}\n    {...marginProps}\n    alignContent=\"center\"\n    justifyContent=\"center\"\n  >\n    <TagText tag=\"span\" typo=\"label\" color={color}>\n      {label}\n    </TagText>\n  </Wrapper>\n)\n\ntype WrapperProps = TransientProps<Pick<TagProps, 'bgColor' | 'borderColor'>>\n\nconst Wrapper = styled(Box)<WrapperProps>`\n  background-color: ${({ $bgColor }) => $bgColor && theme.colors[$bgColor]};\n  border: ${({ $borderColor }) =>\n    $borderColor && `1px solid ${theme.colors[$borderColor]}`};\n\n  border-radius: 6px;\n  padding: 4px 8px;\n\n  height: 22px;\n\n  box-sizing: border-box;\n  display: inline-flex;\n`\n\nconst TagText = styled(Text)`\n  display: flex;\n  align-items: center;\n  font-size: 10px;\n  font-weight: 500;\n  line-height: 12px;\n  text-transform: uppercase;\n`\n"]}

package/dist/Tag/index.d.ts

@@ -0,0 +1 @@
+export { Tag } from './Tag';

package/dist/Tag/index.js

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

package/dist/Tag/index.js.map

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

package/dist/Text/Text.d.ts

@@ -0,0 +1,21 @@
+import { FC, LabelHTMLAttributes, ReactNode } from 'react';
+import { Color } from '../theme';
+import { MarginProps } from '../utils/space';
+/**
+ * @deprecated Use only new Typo
+ */
+export type DeprecatedTypo = 'header-large' | 'header-medium' | 'header-small' | 'desc-heavy' | 'desc-medium' | 'desc-light' | 'desc-small' | 'base' | 'base-small' | 'base-xsmall' | 'label-large';
+export type Typo = 'hero-alternate' | 'hero' | 'heading-alternate' | 'heading-large' | 'heading-medium' | 'heading-small' | 'headline-regular' | 'headline-small' | 'body-standfirst' | 'body-regular' | 'body-small' | 'caption' | 'label';
+type Props = {
+    children: ReactNode;
+    tag?: any;
+    className?: string;
+    typo?: Typo | (string & Record<never, never>);
+    align?: string;
+    color?: Color;
+    cursor?: string;
+    title?: string;
+} & MarginProps;
+export type TextProps = Props & Omit<LabelHTMLAttributes<HTMLElement>, 'color'>;
+export declare const Text: FC<TextProps>;
+export {};

package/dist/Text/Text.js

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

package/dist/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sourceRoot":"","sources":["../../src/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAM,UAAU,EAAkC,MAAM,OAAO,CAAA;AAC7E,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAE/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAChD,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AAEvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AA2DhD,MAAM,CAAC,MAAM,IAAI,GAAkB,UAAU,CAC3C,CACE,EACE,QAAQ,EACR,IAAI,GAAG,cAAc,EACrB,SAAS,GAAG,EAAE,EACd,GAAG,GAAG,GAAG,EACT,KAAK,GAAG,MAAM,EACd,KAAK,GAAG,WAAW,EACnB,MAAM,GAAG,SAAS,EAClB,KAAK,GAAG,EAAE,EACV,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE,CAAC,CACH,oBAAC,SAAS,IACR,WAAW,EAAE,GAAG,EAChB,SAAS,EAAE,SAAS,WACb,IAAI,YACH,KAAK,YACL,KAAK,EACb,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,KACR,KAAK,EACT,GAAG,EAAE,GAAG,IAEP,QAAQ,CACC,CACb,CACF,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM,CAAA;AAEzB,MAAM,SAAS,GAAG,CAAC,KAAa,EAAiB,EAAE;IACjD,OAAO,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;AACtD,CAAC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;MAGvC,SAAS,CAAC,KAAK,CAAC,IAAI,gBAAgB,CAAC,KAAK,CAAC;;;MAG3C,KAAK,KAAK,cAAc;IAC1B,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,eAAe;IACzB,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,cAAc;IACxB,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,YAAY;IACtB,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,aAAa;IACvB,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,YAAY;IACtB,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,YAAY;IACtB,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,MAAM;IAChB,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,YAAY;IACtB,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,aAAa;IACvB,GAAG,CAAA;;;;;;;;;KASF;;IAED,KAAK,KAAK,aAAa;IACvB,GAAG,CAAA;;;;;;KAMF;;kBAEa,MAAM;cACV,OAAO;aACR,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC;MAC3B,iBAAiB,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;GACrD,CACF,CAAA","sourcesContent":["import React, { FC, forwardRef, LabelHTMLAttributes, ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Box } from '../Box'\nimport { linkStyleOverride } from '../Link/Link'\nimport { Color, theme } from '../theme'\nimport { MarginProps } from '../utils/space'\nimport { fontStyleMapping } from './fontMapping'\n\ninterface IText {\n  /** typography class name to apply predefined styles */\n  $typo: string\n  /** text-align  */\n  $align: string\n  /** color from the theme  */\n  $color: Color\n  $cursor: string\n}\n\n/**\n * @deprecated Use only new Typo\n */\n\nexport type DeprecatedTypo =\n  | 'header-large'\n  | 'header-medium'\n  | 'header-small'\n  | 'desc-heavy'\n  | 'desc-medium'\n  | 'desc-light'\n  | 'desc-small'\n  | 'base'\n  | 'base-small'\n  | 'base-xsmall'\n  | 'label-large'\n\nexport type Typo =\n  | 'hero-alternate'\n  | 'hero'\n  | 'heading-alternate'\n  | 'heading-large'\n  | 'heading-medium'\n  | 'heading-small'\n  | 'headline-regular'\n  | 'headline-small'\n  | 'body-standfirst'\n  | 'body-regular'\n  | 'body-small'\n  | 'caption'\n  | 'label'\n\ntype Props = {\n  children: ReactNode\n  tag?: any\n  className?: string\n  // Record<never, never> matches any non-null and non-undefined type so\n  // IntelliSense can suggest Typo to autocomplete\n  typo?: Typo | (string & Record<never, never>)\n  align?: string\n  color?: Color\n  cursor?: string\n  title?: string\n} & MarginProps\n\nexport type TextProps = Props & Omit<LabelHTMLAttributes<HTMLElement>, 'color'>\n\nexport const Text: FC<TextProps> = forwardRef<HTMLElement, TextProps>(\n  (\n    {\n      children,\n      typo = 'body-regular',\n      className = '',\n      tag = 'p',\n      align = 'left',\n      color = 'liquorice',\n      cursor = 'inherit',\n      title = '',\n      ...props\n    },\n    ref,\n  ) => (\n    <Container\n      forwardedAs={tag}\n      className={className}\n      $typo={typo}\n      $align={align}\n      $color={color}\n      cursor={cursor}\n      title={title}\n      {...props}\n      ref={ref}\n    >\n      {children}\n    </Container>\n  ),\n)\n\nText.displayName = 'Text'\n\nconst isNewTypo = (value: string): value is Typo => {\n  return Object.keys(fontStyleMapping).includes(value)\n}\n\nconst Container = styled(Box)<IText>(\n  ({ $align, $color, $cursor, $typo }) => css`\n    /** TYPOGRAPHY STYLES */\n\n    ${isNewTypo($typo) && fontStyleMapping[$typo]}\n\n    /** DEPRECATED TYPOGRAPHY STYLES */\n    ${$typo === 'header-large' &&\n    css`\n      font-size: 24px;\n      line-height: 31px;\n      font-weight: 500;\n\n      @media (min-width: 768px) {\n        font-size: 42px;\n        line-height: 54px;\n      }\n    `}\n\n  ${$typo === 'header-medium' &&\n    css`\n      font-size: 21px;\n      line-height: 27px;\n      font-weight: 500;\n\n      @media (min-width: 768px) {\n        font-size: 32px;\n        line-height: 41px;\n      }\n    `}\n\n  ${$typo === 'header-small' &&\n    css`\n      font-size: 18px;\n      line-height: 23px;\n      font-weight: 500;\n\n      @media (min-width: 768px) {\n        font-size: 21px;\n        line-height: 27px;\n      }\n    `}\n\n  ${$typo === 'desc-heavy' &&\n    css`\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 700;\n\n      @media (min-width: 768px) {\n        font-size: 16px;\n        line-height: 23px;\n      }\n    `}\n\n  ${$typo === 'desc-medium' &&\n    css`\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 500;\n\n      @media (min-width: 768px) {\n        font-size: 16px;\n        line-height: 23px;\n      }\n    `}\n\n  ${$typo === 'desc-light' &&\n    css`\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 16px;\n        line-height: 23px;\n      }\n    `}\n\n  ${$typo === 'desc-small' &&\n    css`\n      font-size: 12px;\n      line-height: 16px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 14px;\n        line-height: 18px;\n      }\n    `}\n\n  ${$typo === 'base' &&\n    css`\n      font-size: 14px;\n      line-height: 23px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 16px;\n        line-height: 26px;\n      }\n    `}\n\n  ${$typo === 'base-small' &&\n    css`\n      font-size: 12px;\n      line-height: 20px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 14px;\n        line-height: 23px;\n      }\n    `}\n\n  ${$typo === 'base-xsmall' &&\n    css`\n      font-size: 10px;\n      line-height: 16px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 12px;\n        line-height: 19px;\n      }\n    `}\n  \n  ${$typo === 'label-large' &&\n    css`\n      font-size: 12px;\n      line-height: 100%;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.75px;\n    `}\n\n    text-align: ${$align};\n    cursor: ${$cursor};\n    color: ${theme.colors[$color]};\n    ${linkStyleOverride({ color: theme.colors[$color] })}\n  `,\n)\n"]}

package/dist/Text/fontMapping.d.ts

@@ -0,0 +1,2 @@
+import { Typo } from './Text';
+export declare const fontStyleMapping: Record<Typo, string>;

package/dist/Text/fontMapping.js

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

package/dist/Text/fontMapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fontMapping.js","sourceRoot":"","sources":["../../src/Text/fontMapping.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAGhC,MAAM,CAAC,MAAM,gBAAgB,GAAyB;IACpD,gBAAgB,EAAE;;;mBAGD,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;;;;;;GAOtC;IACD,IAAI,EAAE;;mBAEW,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;GAOxC;IACD,mBAAmB,EAAE;;;mBAGJ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI;;GAEtC;IACD,eAAe,EAAE;;mBAEA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;;;;;;GAOxC;IACD,gBAAgB,EAAE;;mBAED,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,eAAe,EAAE;;mBAEA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,kBAAkB,EAAE;;mBAEH,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,gBAAgB,EAAE;;mBAED,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,iBAAiB,EAAE;;mBAEF,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,cAAc,EAAE;;mBAEC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,YAAY,EAAE;;mBAEG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,OAAO,EAAE;;mBAEQ,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;IACD,KAAK,EAAE;;;mBAGU,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;;GAExC;CACF,CAAA","sourcesContent":["import { theme } from '../theme'\nimport { Typo } from './Text'\n\nexport const fontStyleMapping: Record<Typo, string> = {\n  'hero-alternate': `\n    font-size: 40px;\n    font-family: 'MarshmallowYouth';\n    font-weight: ${theme.font.weight.bold};\n    line-height: 40px;\n\n    @media (min-width: 768px) {\n      font-size: 56px;\n      line-height: 52px;\n    }\n  `,\n  hero: `\n    font-size: 32px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 40px;\n\n    @media (min-width: 768px) {\n      font-size: 40px;\n      line-height: 44px;\n    }\n  `,\n  'heading-alternate': `\n    font-size: 40px;\n    font-family: 'MarshmallowYouth';\n    font-weight: ${theme.font.weight.bold};\n    line-height: 40px;\n  `,\n  'heading-large': `\n    font-size: 28px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 32px;\n\n    @media (min-width: 768px) {\n      font-size: 32px;\n      line-height: 40px;\n    }\n  `,\n  'heading-medium': `\n    font-size: 24px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 32px;\n  `,\n  'heading-small': `\n    font-size: 20px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 28px;\n  `,\n  'headline-regular': `\n    font-size: 16px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 20px;\n  `,\n  'headline-small': `\n    font-size: 14px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 20px;\n  `,\n  'body-standfirst': `\n    font-size: 18px;\n    font-weight: ${theme.font.weight.normal};\n    line-height: 24px;\n  `,\n  'body-regular': `\n    font-size: 16px;\n    font-weight: ${theme.font.weight.normal};\n    line-height: 20px;\n  `,\n  'body-small': `\n    font-size: 14px;\n    font-weight: ${theme.font.weight.normal};\n    line-height: 20px;\n  `,\n  caption: `\n    font-size: 12px;\n    font-weight: ${theme.font.weight.normal};\n    line-height: 16px;\n  `,\n  label: `\n    font-size: 10px;\n    line-height: 12px;\n    font-weight: ${theme.font.weight.medium};\n    text-transform: uppercase;\n  `,\n}\n"]}

package/dist/Text/index.d.ts

@@ -0,0 +1 @@
+export * from './Text';

package/dist/Text/index.js

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

package/dist/Text/index.js.map

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

package/dist/TextDateOfBirthInput/TextDateOfBirthInput.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import { FieldsetProps } from '../fields/Fieldset';
+export type DateObject = {
+    day?: string | null;
+    month?: string | null;
+    year?: string | null;
+};
+export type TextDateOfBirthInputProps = {
+    value: DateObject;
+    onChange: (value: DateObject) => void;
+    showCompleted?: boolean;
+    hookformError?: {
+        type: string;
+        message?: string;
+    };
+    dataTestId?: string;
+} & Pick<FieldsetProps, 'label' | 'assistiveText'>;
+/**
+ * Renders a set of input fields to collect a date of birth as separate day, month,
+ * and year fields.
+ *
+ * ### Date of birth input validations
+ * - All fields are present and correctly formatted.
+ * - The age is at least 17 years old.
+ * - The year is not before 1900.
+ */
+export declare const TextDateOfBirthInput: React.ForwardRefExoticComponent<{
+    value: DateObject;
+    onChange: (value: DateObject) => void;
+    showCompleted?: boolean;
+    hookformError?: {
+        type: string;
+        message?: string;
+    };
+    dataTestId?: string;
+} & Pick<FieldsetProps, "label" | "assistiveText"> & React.RefAttributes<HTMLInputElement>>;

package/dist/TextDateOfBirthInput/TextDateOfBirthInput.js

@@ -0,0 +1,48 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+import { Box } from '../Box';
+import { Fieldset } from '../fields/Fieldset';
+import { TextInput } from '../TextInput';
+import { InputValidationError } from '../utils/dateOfBirth/schema';
+/**
+ * Renders a set of input fields to collect a date of birth as separate day, month,
+ * and year fields.
+ *
+ * ### Date of birth input validations
+ * - All fields are present and correctly formatted.
+ * - The age is at least 17 years old.
+ * - The year is not before 1900.
+ */
+export const TextDateOfBirthInput = forwardRef(function TextDateOfBirthInput({ onChange, value, label, assistiveText, hookformError, showCompleted = false, dataTestId, }, ref) {
+    const inputValidationErrorValues = Object.values(InputValidationError);
+    return (React.createElement(Fieldset, { label: label, assistiveText: assistiveText, completed: showCompleted && Boolean(value.day && value.month && value.year), error: Boolean(hookformError), errorMsg: hookformError?.message, "data-testid": dataTestId },
+        React.createElement(Box, { flex: true, gap: "16px" },
+            React.createElement(SetWidthTextInput, { ref: ref, label: "day", autoCompleteAttr: "bday-day", inputModeAttr: "numeric", "$width": 60, value: value.day || '', placeholder: "", onChange: (day) => {
+                    onChange({
+                        ...value,
+                        day,
+                    });
+                }, error: Boolean(hookformError?.type?.includes('day') ||
+                    (hookformError?.type &&
+                        inputValidationErrorValues.includes(hookformError.type))) }),
+            React.createElement(SetWidthTextInput, { label: "month", autoCompleteAttr: "bday-month", inputModeAttr: "numeric", "$width": 60, value: value.month || '', placeholder: "", onChange: (month) => {
+                    onChange({
+                        ...value,
+                        month,
+                    });
+                }, error: Boolean(hookformError?.type?.includes('month') ||
+                    (hookformError?.type &&
+                        inputValidationErrorValues.includes(hookformError.type))) }),
+            React.createElement(SetWidthTextInput, { label: "year", autoCompleteAttr: "bday-year", inputModeAttr: "numeric", "$width": 80, value: value.year || '', placeholder: "", onChange: (year) => {
+                    onChange({
+                        ...value,
+                        year,
+                    });
+                }, error: Boolean(hookformError?.type?.includes('year') ||
+                    (hookformError?.type &&
+                        inputValidationErrorValues.includes(hookformError.type))) }))));
+});
+const SetWidthTextInput = styled(TextInput) `
+  width: ${({ $width }) => `${$width}px`};
+`;
+//# sourceMappingURL=TextDateOfBirthInput.js.map

package/dist/TextDateOfBirthInput/TextDateOfBirthInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextDateOfBirthInput.js","sourceRoot":"","sources":["../../src/TextDateOfBirthInput/TextDateOfBirthInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef } from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { Fieldset, FieldsetProps } from '../fields/Fieldset'\nimport { TextInput } from '../TextInput'\nimport { InputValidationError } from '../utils/dateOfBirth/schema'\n\nexport type DateObject = {\n  day?: string | null\n  month?: string | null\n  year?: string | null\n}\n\nexport type TextDateOfBirthInputProps = {\n  value: DateObject\n  onChange: (value: DateObject) => void\n  showCompleted?: boolean\n  hookformError?: {\n    type: string\n    message?: string\n  }\n  dataTestId?: string\n} & Pick<FieldsetProps, 'label' | 'assistiveText'>\n\n/**\n * Renders a set of input fields to collect a date of birth as separate day, month,\n * and year fields.\n *\n * ### Date of birth input validations\n * - All fields are present and correctly formatted.\n * - The age is at least 17 years old.\n * - The year is not before 1900.\n */\nexport const TextDateOfBirthInput = forwardRef<\n  HTMLInputElement,\n  TextDateOfBirthInputProps\n>(function TextDateOfBirthInput(\n  {\n    onChange,\n    value,\n    label,\n    assistiveText,\n    hookformError,\n    showCompleted = false,\n    dataTestId,\n  },\n  ref,\n) {\n  const inputValidationErrorValues = Object.values(InputValidationError)\n\n  return (\n    <Fieldset\n      label={label}\n      assistiveText={assistiveText}\n      completed={\n        showCompleted && Boolean(value.day && value.month && value.year)\n      }\n      error={Boolean(hookformError)}\n      errorMsg={hookformError?.message}\n      data-testid={dataTestId}\n    >\n      <Box flex gap=\"16px\">\n        <SetWidthTextInput\n          ref={ref}\n          label=\"day\"\n          autoCompleteAttr=\"bday-day\"\n          inputModeAttr=\"numeric\"\n          $width={60}\n          value={value.day || ''}\n          placeholder=\"\"\n          onChange={(day) => {\n            onChange({\n              ...value,\n              day,\n            })\n          }}\n          error={Boolean(\n            hookformError?.type?.includes('day') ||\n              (hookformError?.type &&\n                inputValidationErrorValues.includes(\n                  hookformError.type as InputValidationError,\n                )),\n          )}\n        />\n        <SetWidthTextInput\n          label=\"month\"\n          autoCompleteAttr=\"bday-month\"\n          inputModeAttr=\"numeric\"\n          $width={60}\n          value={value.month || ''}\n          placeholder=\"\"\n          onChange={(month) => {\n            onChange({\n              ...value,\n              month,\n            })\n          }}\n          error={Boolean(\n            hookformError?.type?.includes('month') ||\n              (hookformError?.type &&\n                inputValidationErrorValues.includes(\n                  hookformError.type as InputValidationError,\n                )),\n          )}\n        />\n        <SetWidthTextInput\n          label=\"year\"\n          autoCompleteAttr=\"bday-year\"\n          inputModeAttr=\"numeric\"\n          $width={80}\n          value={value.year || ''}\n          placeholder=\"\"\n          onChange={(year) => {\n            onChange({\n              ...value,\n              year,\n            })\n          }}\n          error={Boolean(\n            hookformError?.type?.includes('year') ||\n              (hookformError?.type &&\n                inputValidationErrorValues.includes(\n                  hookformError.type as InputValidationError,\n                )),\n          )}\n        />\n      </Box>\n    </Fieldset>\n  )\n})\n\nconst SetWidthTextInput = styled(TextInput)<{ $width: number }>`\n  width: ${({ $width }) => `${$width}px`};\n`\n"]}

package/dist/TextDateOfBirthInput/index.d.ts

@@ -0,0 +1 @@
+export * from './TextDateOfBirthInput';

package/dist/TextDateOfBirthInput/index.js

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

package/dist/TextDateOfBirthInput/index.js.map

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

package/dist/TextInput/TextInput.d.ts

@@ -0,0 +1,39 @@
+import React, { FocusEvent, FormEvent, HTMLInputAutoCompleteAttribute } from 'react';
+import { CommonFieldProps } from '../fields/commonFieldTypes';
+interface Props extends CommonFieldProps {
+    type?: 'text' | 'email' | 'password' | 'time' | 'date' | 'tel';
+    placeholder: string;
+    name?: string;
+    value: string;
+    onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Triggers after animation end (animation duration is 2s),
+     * the animation starts when a user selects or hovers over an autofill option
+     */
+    onAutoFill?: () => void;
+}
+type InputMode = 'text' | 'email' | 'numeric';
+/** on change or on input required */
+type InputProps = ({
+    /** on change is required and on input optional */
+    onChange: (e: string) => void;
+    onInputChange?: (e: FormEvent<HTMLInputElement>) => void;
+} | {
+    /** on input is required and on change optional */
+    onChange?: (e: string) => void;
+    onInputChange: (e: FormEvent<HTMLInputElement>) => void;
+}) & {
+    autoCompleteAttr?: HTMLInputAutoCompleteAttribute;
+    inputModeAttr?: InputMode;
+};
+export type TextInputProps = Props & InputProps;
+/**
+ * A reusable TextInput component that supports various input types, custom styling, icons,
+ * and autofill detection.
+ *
+ * ### Caveats:
+ * - `onAutoFill` triggers after animation end (animation duration is 2s),
+ * the animation starts when a user selects or hovers over an autofill option
+ */
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
+export {};