@redsift/design-system 11.6.0-muiv5-alpha.4 → 11.6.0-muiv5-alpha.5

package/components/text-field/styles.js

@@ -1,252 +0,0 @@
-import styled, { css } from 'styled-components';
-import { TextFieldVariant } from './types.js';
-import { baseStyling } from '../shared/styles.js';
-import { Theme } from '../../types/colors.js';
-
-/**
- * Component style.
- */
-const StyledTextField = styled.div`
-  height: fit-content;
-  position: relative;
-  width: fit-content;
-  margin: 0;
-  min-width: 0;
-  padding: 0;
-  ${baseStyling}
-
-  border: 0;
-  display: inline-flex;
-  flex-direction: column;
-  vertical-align: top;
-
-  ${_ref => {
-  let {
-    label,
-    $hasLeftIcon,
-    $hasContent,
-    $isFocused,
-    $isDisabled,
-    $isInvalid,
-    $color,
-    $isGradient,
-    $theme,
-    $variant
-  } = _ref;
-  return css`
-    ${$isDisabled ? css`
-          pointer-events: none;
-        ` : ''}
-
-    .redsift-text-field__label {
-      font-family: var(--redsift-typography-input-text-font-family);
-      font-size: var(--redsift-typography-input-text-font-size);
-      font-weight: var(--redsift-typography-input-text-font-weight);
-      line-height: var(--redsift-typography-input-text-line-height);
-      left: ${$hasLeftIcon && !$hasContent ? '32px' : '0'};
-      overflow: hidden;
-      pointer-events: none;
-      position: absolute;
-      text-overflow: ellipsis;
-      top: ${$hasContent ? '-8px' : '-7px'};
-      transform-origin: top left;
-      transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
-        max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
-      white-space: nowrap;
-      z-index: 1;
-
-      ${!$hasContent ? css`
-            max-width: calc(100% - 24px);
-            transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, 16px) scale(1);
-          ` : css`
-            max-width: calc(133% - 32px);
-            transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, 1px) scale(0.733);
-          `}
-
-      ${!$isGradient ? css`
-            color: var(
-              --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid ? 'error' : $isFocused ? $color : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}
-            );
-          ` : css`
-            background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'});
-            ${$variant !== TextFieldVariant.underline ? css`
-                  padding-right: 7px;
-                  padding-left: 5px;
-                ` : ''}
-            > span {
-              background: var(
-                --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid ? 'error' : $isFocused ? $color : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}
-              );
-              background-clip: text;
-              color: transparent;
-            }
-          `}
-    }
-
-    .redsift-text-field__input-wrapper {
-      align-items: flex-start;
-      box-sizing: border-box;
-      cursor: text;
-      display: inline-flex;
-      min-height: 42px;
-      position: relative;
-    }
-
-    .redsift-text-field-input-wrapper__pills-and-input {
-      align-items: flex-start;
-      box-sizing: border-box;
-      display: flex;
-      flex-direction: column-reverse;
-      flex-wrap: wrap;
-      flex: 1 1 auto;
-      padding-bottom: 7px;
-      ${$variant !== TextFieldVariant.underline && !$hasLeftIcon ? css`
-            padding-left: 16px;
-          ` : ''}
-      padding-top: ${label ? '9px' : '7px'};
-
-      .redsift-pill {
-        margin: 3px 6px 3px 0;
-      }
-    }
-
-    .redsift-text-field-input-wrapper-pills-and-input__input {
-      background: none;
-      border: 0;
-      box-sizing: content-box;
-      display: flex;
-      flex: 1 1 auto;
-      font-family: var(--redsift-typography-input-text-font-family);
-      font-size: var(--redsift-typography-input-text-font-size);
-      font-weight: var(--redsift-typography-input-text-font-weight);
-      line-height: var(--redsift-typography-input-text-line-height);
-      min-width: 0;
-      min-width: 100px;
-      padding: 2px 0;
-      width: 100%;
-
-      ${$isDisabled ? css`
-            color: var(--redsift-color-grey-l2);
-          ` : css`
-            color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});
-          `}
-    }
-
-    .redsift-text-field-input-wrapper-pills-and-input__input::placeholder {
-      color: var(--redsift-color-neutral-mid-grey);
-    }
-
-    .redsift-text-field-input-wrapper-pills-and-input__input:focus {
-      outline: 0;
-    }
-
-    .redsift-text-field-input-wrapper__fieldset {
-      border-style: solid;
-      bottom: 0;
-      left: 1px;
-      margin: 0;
-      min-width: 0%;
-      overflow: hidden;
-      padding: 0 8px;
-      pointer-events: none;
-      position: absolute;
-      right: 0;
-      text-align: left;
-      top: -5px;
-
-      ${!$isGradient || $isDisabled || !$isFocused || $isInvalid ? css`
-            ${$variant === TextFieldVariant.underline ? css`
-                  border-bottom-width: 2px;
-                ` : css`
-                  border-radius: 4px;
-                  border-width: 2px;
-                `}
-            border-color: var(
-              --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid ? 'error' : $isFocused ? $color : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}
-            );
-          ` : css`
-            ${$variant === TextFieldVariant.underline ? css`
-                  border-bottom: 2px solid transparent;
-                ` : css`
-                  border: 2px solid transparent;
-                  border-radius: 4px;
-                `}
-            background: transparent;
-            background-clip: padding-box, border-box;
-            background-origin: border-box;
-            background-image: linear-gradient(
-                90deg,
-                var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'}),
-                var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'})
-              ),
-              var(--redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-default);
-          `}
-    }
-
-    .redsift-text-field-input-wrapper-fieldset__legend {
-      display: block;
-      float: unset;
-      font-size: 11px;
-      height: 11px;
-      overflow: hidden;
-      padding: 0;
-      visibility: hidden;
-      white-space: nowrap;
-      width: auto;
-
-      ${!$hasContent ? css`
-            max-width: 0.01px;
-            transition: max-width 50ms cubic-bezier(0, 0, 0.2, 1) 0ms;
-          ` : css`
-            max-width: 100%;
-            transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;
-          `}
-    }
-
-    .redsift-text-field-input-wrapper-fieldset__legend > span {
-      display: inline-block;
-      opacity: 0;
-      padding-left: 5px;
-      padding-right: 5px;
-      visibility: visible;
-    }
-
-    .redsift-text-field-input-wrapper__toolbar {
-      position: relative;
-      top: 9px;
-    }
-
-    .redsift-icon-button:not(.redsift-pill > .redsift-icon-button) {
-      padding: 2px;
-      position: relative;
-      top: -2px;
-      height: 28px;
-      width: 28px;
-    }
-
-    ${$variant !== TextFieldVariant.underline ? css`
-          .redsift-icon.left {
-            padding-left: 12px;
-            padding-right: 8px;
-            line-height: 28px;
-          }
-
-          .redsift-text-field-input-wrapper__toolbar {
-            padding-right: 8px;
-          }
-        ` : css`
-          .redsift-icon.left {
-            padding-right: 8px;
-          }
-        `}
-
-    .redsift-icon.left,
-    .redsift-icon.right {
-      top: 9px;
-    }
-  `;
-}}
-`;
-
-export { StyledTextField };
-//# sourceMappingURL=styles.js.map

package/components/text-field/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sources":["../../../src/components/text-field/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledTextFieldProps, TextFieldVariant } from './types';\nimport { Theme } from '@redsift/design-system/types';\n\n/**\n * Component style.\n */\nexport const StyledTextField = styled.div<StyledTextFieldProps>`\n  height: fit-content;\n  position: relative;\n  width: fit-content;\n  margin: 0;\n  min-width: 0;\n  padding: 0;\n  ${baseStyling}\n\n  border: 0;\n  display: inline-flex;\n  flex-direction: column;\n  vertical-align: top;\n\n  ${({\n    label,\n    $hasLeftIcon,\n    $hasContent,\n    $isFocused,\n    $isDisabled,\n    $isInvalid,\n    $color,\n    $isGradient,\n    $theme,\n    $variant,\n  }) => css`\n    ${$isDisabled\n      ? css`\n          pointer-events: none;\n        `\n      : ''}\n\n    .redsift-text-field__label {\n      font-family: var(--redsift-typography-input-text-font-family);\n      font-size: var(--redsift-typography-input-text-font-size);\n      font-weight: var(--redsift-typography-input-text-font-weight);\n      line-height: var(--redsift-typography-input-text-line-height);\n      left: ${$hasLeftIcon && !$hasContent ? '32px' : '0'};\n      overflow: hidden;\n      pointer-events: none;\n      position: absolute;\n      text-overflow: ellipsis;\n      top: ${$hasContent ? '-8px' : '-7px'};\n      transform-origin: top left;\n      transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n        max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n      white-space: nowrap;\n      z-index: 1;\n\n      ${!$hasContent\n        ? css`\n            max-width: calc(100% - 24px);\n            transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, 16px) scale(1);\n          `\n        : css`\n            max-width: calc(133% - 32px);\n            transform: translate(${$variant === TextFieldVariant.underline ? '0px' : '14px'}, 1px) scale(0.733);\n          `}\n\n      ${!$isGradient\n        ? css`\n            color: var(\n              --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n                  ? 'error'\n                  : $isFocused\n                  ? $color\n                  : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n            );\n          `\n        : css`\n            background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'});\n            ${$variant !== TextFieldVariant.underline\n              ? css`\n                  padding-right: 7px;\n                  padding-left: 5px;\n                `\n              : ''}\n            > span {\n              background: var(\n                --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n                    ? 'error'\n                    : $isFocused\n                    ? $color\n                    : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n              );\n              background-clip: text;\n              color: transparent;\n            }\n          `}\n    }\n\n    .redsift-text-field__input-wrapper {\n      align-items: flex-start;\n      box-sizing: border-box;\n      cursor: text;\n      display: inline-flex;\n      min-height: 42px;\n      position: relative;\n    }\n\n    .redsift-text-field-input-wrapper__pills-and-input {\n      align-items: flex-start;\n      box-sizing: border-box;\n      display: flex;\n      flex-direction: column-reverse;\n      flex-wrap: wrap;\n      flex: 1 1 auto;\n      padding-bottom: 7px;\n      ${$variant !== TextFieldVariant.underline && !$hasLeftIcon\n        ? css`\n            padding-left: 16px;\n          `\n        : ''}\n      padding-top: ${label ? '9px' : '7px'};\n\n      .redsift-pill {\n        margin: 3px 6px 3px 0;\n      }\n    }\n\n    .redsift-text-field-input-wrapper-pills-and-input__input {\n      background: none;\n      border: 0;\n      box-sizing: content-box;\n      display: flex;\n      flex: 1 1 auto;\n      font-family: var(--redsift-typography-input-text-font-family);\n      font-size: var(--redsift-typography-input-text-font-size);\n      font-weight: var(--redsift-typography-input-text-font-weight);\n      line-height: var(--redsift-typography-input-text-line-height);\n      min-width: 0;\n      min-width: 100px;\n      padding: 2px 0;\n      width: 100%;\n\n      ${$isDisabled\n        ? css`\n            color: var(--redsift-color-grey-l2);\n          `\n        : css`\n            color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n          `}\n    }\n\n    .redsift-text-field-input-wrapper-pills-and-input__input::placeholder {\n      color: var(--redsift-color-neutral-mid-grey);\n    }\n\n    .redsift-text-field-input-wrapper-pills-and-input__input:focus {\n      outline: 0;\n    }\n\n    .redsift-text-field-input-wrapper__fieldset {\n      border-style: solid;\n      bottom: 0;\n      left: 1px;\n      margin: 0;\n      min-width: 0%;\n      overflow: hidden;\n      padding: 0 8px;\n      pointer-events: none;\n      position: absolute;\n      right: 0;\n      text-align: left;\n      top: -5px;\n\n      ${!$isGradient || $isDisabled || !$isFocused || $isInvalid\n        ? css`\n            ${$variant === TextFieldVariant.underline\n              ? css`\n                  border-bottom-width: 2px;\n                `\n              : css`\n                  border-radius: 4px;\n                  border-width: 2px;\n                `}\n            border-color: var(\n              --redsift-color-${$theme}-components-buttons-secondary-button-${$isInvalid\n              ? 'error'\n              : $isFocused\n              ? $color\n              : 'grey'}-text-${$isDisabled ? 'disabled' : 'default'}\n            );\n          `\n        : css`\n            ${$variant === TextFieldVariant.underline\n              ? css`\n                  border-bottom: 2px solid transparent;\n                `\n              : css`\n                  border: 2px solid transparent;\n                  border-radius: 4px;\n                `}\n            background: transparent;\n            background-clip: padding-box, border-box;\n            background-origin: border-box;\n            background-image: linear-gradient(\n                90deg,\n                var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'}),\n                var(--redsift-color-neutral-${$theme === Theme.dark ? 'x-dark-grey' : 'white'})\n              ),\n              var(--redsift-color-${$theme}-components-buttons-secondary-button-${$color}-text-default);\n          `}\n    }\n\n    .redsift-text-field-input-wrapper-fieldset__legend {\n      display: block;\n      float: unset;\n      font-size: 11px;\n      height: 11px;\n      overflow: hidden;\n      padding: 0;\n      visibility: hidden;\n      white-space: nowrap;\n      width: auto;\n\n      ${!$hasContent\n        ? css`\n            max-width: 0.01px;\n            transition: max-width 50ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n          `\n        : css`\n            max-width: 100%;\n            transition: max-width 100ms cubic-bezier(0, 0, 0.2, 1) 50ms;\n          `}\n    }\n\n    .redsift-text-field-input-wrapper-fieldset__legend > span {\n      display: inline-block;\n      opacity: 0;\n      padding-left: 5px;\n      padding-right: 5px;\n      visibility: visible;\n    }\n\n    .redsift-text-field-input-wrapper__toolbar {\n      position: relative;\n      top: 9px;\n    }\n\n    .redsift-icon-button:not(.redsift-pill > .redsift-icon-button) {\n      padding: 2px;\n      position: relative;\n      top: -2px;\n      height: 28px;\n      width: 28px;\n    }\n\n    ${$variant !== TextFieldVariant.underline\n      ? css`\n          .redsift-icon.left {\n            padding-left: 12px;\n            padding-right: 8px;\n            line-height: 28px;\n          }\n\n          .redsift-text-field-input-wrapper__toolbar {\n            padding-right: 8px;\n          }\n        `\n      : css`\n          .redsift-icon.left {\n            padding-right: 8px;\n          }\n        `}\n\n    .redsift-icon.left,\n    .redsift-icon.right {\n      top: 9px;\n    }\n  `}\n`;\n"],"names":["StyledTextField","styled","div","baseStyling","_ref","label","$hasLeftIcon","$hasContent","$isFocused","$isDisabled","$isInvalid","$color","$isGradient","$theme","$variant","css","TextFieldVariant","underline","Theme","dark"],"mappings":"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"}

package/components/text-field/types.d.ts

@@ -1,99 +0,0 @@
-import { ComponentProps, ReactNode, MutableRefObject, ChangeEvent } from 'react';
-import { ValueOf } from '../../types/helpers.js';
-import { ButtonsColorPalette, Theme } from '../../types/colors.js';
-import { StylingProps } from '../../types/styles.js';
-import { IconButtonProps } from '../icon-button/types.js';
-import { IconProps } from '../icon/types.js';
-import { PillProps } from '../pill/types.js';
-
-/**
- * Component variant.
- */
-declare const TextFieldVariant: {
-    readonly default: "default";
-    readonly underline: "underline";
-};
-type TextFieldVariant = ValueOf<typeof TextFieldVariant>;
-/**
- * Component color.
- */
-type TextFieldColor = ButtonsColorPalette;
-/**
- * Component props.
- */
-interface TextFieldProps extends Omit<ComponentProps<'div'>, 'onChange'>, StylingProps {
-    /** Whether the component can be autofocused. */
-    autoFocus?: boolean;
-    /** Color variant. */
-    color?: TextFieldColor;
-    /** Force color even when not focused. */
-    forceColor?: boolean;
-    /**
-     * Default value.
-     * Used for uncontrolled version.
-     */
-    defaultValue?: string;
-    /** Whether the clear button is displayed or not. */
-    hasClearButton?: boolean | Omit<Partial<IconButtonProps>, 'ref'>;
-    /** Place for icon buttons between the clear button and the separator. */
-    internal?: ReactNode | ((value?: string, isDisabled?: boolean, isInvalid?: boolean, isRequired?: boolean) => ReactNode);
-    /** Place for icon buttons after the separator. */
-    after?: ReactNode | ((value?: string, isDisabled?: boolean, isInvalid?: boolean, isRequired?: boolean) => ReactNode);
-    /** Custom props to pass to the input element. */
-    inputProps?: ComponentProps<'input'>;
-    /** Custom ref object to pass to the input element. */
-    inputRef?: MutableRefObject<HTMLInputElement>;
-    /** @deprecated Whether the component should use the product colors or shades of grey. */
-    isColored?: boolean;
-    /** Whether the component is disabled or not. */
-    isDisabled?: boolean;
-    /** Whether the component is invalid or not. */
-    isInvalid?: boolean;
-    /** Whether the component is read only or not. */
-    isReadOnly?: boolean;
-    /** Whether the component is required or not. */
-    isRequired?: boolean;
-    /** Label */
-    label?: string;
-    /**
-     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
-     * Can also be a ReactElement.
-     */
-    leftIcon?: Omit<IconProps, 'ref'>;
-    /** Name to pass to the input element. */
-    name?: string;
-    /** Method to handle component change. */
-    onChange?(value?: string, name?: string, event?: ChangeEvent<HTMLInputElement>): void;
-    /** Method to handle component clear. */
-    onClear?(): void;
-    /** List of Pills. */
-    pills?: Omit<PillProps, 'ref'>[];
-    /** Placeholder. */
-    placeholder?: string;
-    /** Theme. */
-    theme?: Theme;
-    /** Input type. */
-    type?: string;
-    /**
-     * Input value.
-     * Used for controlled version.
-     */
-    value?: string;
-    /** TextField variant. */
-    variant?: TextFieldVariant;
-}
-type StyledTextFieldProps = Omit<TextFieldProps, 'color' | 'isColored' | 'isDisabled' | 'isInvalid' | 'isRequired' | 'onChange'> & {
-    $color: TextFieldProps['color'];
-    $isGradient: boolean;
-    $hasLeftIcon: boolean;
-    $hasContent: boolean;
-    $isDisabled: TextFieldProps['isDisabled'];
-    $isInvalid: TextFieldProps['isInvalid'];
-    $isFocused: boolean;
-    $isFocusVisible: boolean;
-    $isRequired: TextFieldProps['isRequired'];
-    $theme: TextFieldProps['theme'];
-    $variant: TextFieldProps['variant'];
-};
-
-export { StyledTextFieldProps, TextFieldColor, TextFieldProps, TextFieldVariant };

package/components/text-field/types.js

@@ -1,18 +0,0 @@
-/**
- * Component variant.
- */
-const TextFieldVariant = {
-  default: 'default',
-  underline: 'underline'
-};
-
-/**
- * Component color.
- */
-
-/**
- * Component props.
- */
-
-export { TextFieldVariant };
-//# sourceMappingURL=types.js.map

package/components/text-field/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sources":["../../../src/components/text-field/types.ts"],"sourcesContent":["import { ChangeEvent, ComponentProps, MutableRefObject, ReactNode } from 'react';\nimport { ButtonsColorPalette, StylingProps, Theme, ValueOf } from '../../types';\nimport { IconProps } from '../icon';\nimport { IconButtonProps } from '../icon-button';\nimport { PillProps } from '../pill';\n\n/**\n * Component variant.\n */\nexport const TextFieldVariant = {\n  default: 'default',\n  underline: 'underline',\n} as const;\nexport type TextFieldVariant = ValueOf<typeof TextFieldVariant>;\n\n/**\n * Component color.\n */\nexport type TextFieldColor = ButtonsColorPalette;\n\n/**\n * Component props.\n */\nexport interface TextFieldProps extends Omit<ComponentProps<'div'>, 'onChange'>, StylingProps {\n  /** Whether the component can be autofocused. */\n  autoFocus?: boolean;\n  /** Color variant. */\n  color?: TextFieldColor;\n  /** Force color even when not focused. */\n  forceColor?: boolean;\n  /**\n   * Default value.\n   * Used for uncontrolled version.\n   */\n  defaultValue?: string;\n  /** Whether the clear button is displayed or not. */\n  hasClearButton?: boolean | Omit<Partial<IconButtonProps>, 'ref'>;\n  /** Place for icon buttons between the clear button and the separator. */\n  internal?:\n    | ReactNode\n    | ((value?: string, isDisabled?: boolean, isInvalid?: boolean, isRequired?: boolean) => ReactNode);\n  /** Place for icon buttons after the separator. */\n  after?: ReactNode | ((value?: string, isDisabled?: boolean, isInvalid?: boolean, isRequired?: boolean) => ReactNode);\n  /** Custom props to pass to the input element. */\n  inputProps?: ComponentProps<'input'>;\n  /** Custom ref object to pass to the input element. */\n  inputRef?: MutableRefObject<HTMLInputElement>;\n  /** @deprecated Whether the component should use the product colors or shades of grey. */\n  isColored?: boolean;\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Whether the component is invalid or not. */\n  isInvalid?: boolean;\n  /** Whether the component is read only or not. */\n  isReadOnly?: boolean;\n  /** Whether the component is required or not. */\n  isRequired?: boolean;\n  /** Label */\n  label?: string;\n  /**\n   * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />\n   * Can also be a ReactElement.\n   */\n  leftIcon?: Omit<IconProps, 'ref'>;\n  /** Name to pass to the input element. */\n  name?: string;\n  /** Method to handle component change. */\n  onChange?(value?: string, name?: string, event?: ChangeEvent<HTMLInputElement>): void;\n  /** Method to handle component clear. */\n  onClear?(): void;\n  /** List of Pills. */\n  pills?: Omit<PillProps, 'ref'>[];\n  /** Placeholder. */\n  placeholder?: string;\n  /** Theme. */\n  theme?: Theme;\n  /** Input type. */\n  type?: string;\n  /**\n   * Input value.\n   * Used for controlled version.\n   */\n  value?: string;\n  /** TextField variant. */\n  variant?: TextFieldVariant;\n}\n\nexport type StyledTextFieldProps = Omit<\n  TextFieldProps,\n  'color' | 'isColored' | 'isDisabled' | 'isInvalid' | 'isRequired' | 'onChange'\n> & {\n  $color: TextFieldProps['color'];\n  $isGradient: boolean;\n  $hasLeftIcon: boolean;\n  $hasContent: boolean;\n  $isDisabled: TextFieldProps['isDisabled'];\n  $isInvalid: TextFieldProps['isInvalid'];\n  $isFocused: boolean;\n  $isFocusVisible: boolean;\n  $isRequired: TextFieldProps['isRequired'];\n  $theme: TextFieldProps['theme'];\n  $variant: TextFieldProps['variant'];\n};\n"],"names":["TextFieldVariant","default","underline"],"mappings":"AAMA;AACA;AACA;AACO,MAAMA,gBAAgB,GAAG;AAC9BC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,SAAS,EAAE,WAAA;AACb,EAAU;;AAGV;AACA;AACA;;AAGA;AACA;AACA;;;;"}

package/components/theme/context.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import { Theme } from '../../types/colors.js';
-
-declare const ThemeContext: React.Context<{
-    theme?: Theme | undefined;
-} | null>;
-declare const ThemeProvider: React.Provider<{
-    theme?: Theme | undefined;
-} | null>;
-
-export { ThemeContext, ThemeProvider };

package/components/theme/context.js

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const ThemeContext = /*#__PURE__*/React.createContext(null);
-const ThemeProvider = ThemeContext.Provider;
-
-export { ThemeContext, ThemeProvider };
-//# sourceMappingURL=context.js.map

package/components/theme/context.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.js","sources":["../../../src/components/theme/context.ts"],"sourcesContent":["import React from 'react';\nimport { Theme } from '../../types';\n\nexport const ThemeContext = React.createContext<{ theme?: Theme } | null>(null);\n\nexport const ThemeProvider = ThemeContext.Provider;\n"],"names":["ThemeContext","React","createContext","ThemeProvider","Provider"],"mappings":";;AAGO,MAAMA,YAAY,gBAAGC,KAAK,CAACC,aAAa,CAA2B,IAAI,EAAC;AAElEC,MAAAA,aAAa,GAAGH,YAAY,CAACI;;;;"}

package/components/theme/useTheme.d.ts

@@ -1,5 +0,0 @@
-import { Theme } from '../../types/colors.js';
-
-declare function useTheme(theme?: Theme): Theme;
-
-export { useTheme };

package/components/theme/useTheme.js

@@ -1,13 +0,0 @@
-import { useContext } from 'react';
-import { ThemeContext } from './context.js';
-import { Theme } from '../../types/colors.js';
-
-function useTheme(theme) {
-  var _ref;
-  const themeState = useContext(ThemeContext);
-  const contextTheme = (_ref = theme !== null && theme !== void 0 ? theme : themeState === null || themeState === void 0 ? void 0 : themeState.theme) !== null && _ref !== void 0 ? _ref : Theme.light;
-  return contextTheme;
-}
-
-export { useTheme };
-//# sourceMappingURL=useTheme.js.map

package/components/theme/useTheme.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTheme.js","sources":["../../../src/components/theme/useTheme.ts"],"sourcesContent":["import { useContext } from 'react';\nimport { Theme } from '../../types';\nimport { ThemeContext } from './context';\n\nexport function useTheme(theme?: Theme): Theme {\n  const themeState = useContext(ThemeContext);\n  const contextTheme: Theme = theme ?? themeState?.theme ?? Theme.light;\n\n  return contextTheme;\n}\n"],"names":["useTheme","theme","_ref","themeState","useContext","ThemeContext","contextTheme","Theme","light"],"mappings":";;;;AAIO,SAASA,QAAQA,CAACC,KAAa,EAAS;AAAA,EAAA,IAAAC,IAAA,CAAA;AAC7C,EAAA,MAAMC,UAAU,GAAGC,UAAU,CAACC,YAAY,CAAC,CAAA;EAC3C,MAAMC,YAAmB,GAAAJ,CAAAA,IAAA,GAAGD,KAAK,aAALA,KAAK,KAAA,KAAA,CAAA,GAALA,KAAK,GAAIE,UAAU,KAAA,IAAA,IAAVA,UAAU,KAAVA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,UAAU,CAAEF,KAAK,MAAAC,IAAAA,IAAAA,IAAA,cAAAA,IAAA,GAAIK,KAAK,CAACC,KAAK,CAAA;AAErE,EAAA,OAAOF,YAAY,CAAA;AACrB;;;;"}

package/hooks/useBoundingRect.d.ts

@@ -1,8 +0,0 @@
-import { MutableRefObject, DependencyList } from 'react';
-
-/**
- * Get the bounding rect of a component.
- */
-declare const useBoundingClientRect: (ref: MutableRefObject<HTMLElement>, deps?: DependencyList) => DOMRect;
-
-export { useBoundingClientRect };

package/hooks/useBoundingRect.js

@@ -1,17 +0,0 @@
-import { useState, useEffect } from 'react';
-
-/**
- * Get the bounding rect of a component.
- */
-const useBoundingClientRect = (ref, deps) => {
-  const [boundingRect, setBoundingRect] = useState({});
-  useEffect(() => {
-    if (ref.current) {
-      setBoundingRect(ref.current.getBoundingClientRect());
-    }
-  }, deps);
-  return boundingRect;
-};
-
-export { useBoundingClientRect };
-//# sourceMappingURL=useBoundingRect.js.map

package/hooks/useBoundingRect.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useBoundingRect.js","sources":["../../src/hooks/useBoundingRect.ts"],"sourcesContent":["import { useState, useEffect, MutableRefObject, DependencyList } from 'react';\n\n/**\n * Get the bounding rect of a component.\n */\nexport const useBoundingClientRect = (\n  ref: MutableRefObject<HTMLElement>,\n  deps?: DependencyList\n) => {\n  const [boundingRect, setBoundingRect] = useState<DOMRect>({} as DOMRect);\n\n  useEffect(() => {\n    if (ref.current) {\n      setBoundingRect(ref.current.getBoundingClientRect());\n    }\n  }, deps);\n\n  return boundingRect;\n};\n"],"names":["useBoundingClientRect","ref","deps","boundingRect","setBoundingRect","useState","useEffect","current","getBoundingClientRect"],"mappings":";;AAEA;AACA;AACA;MACaA,qBAAqB,GAAGA,CACnCC,GAAkC,EAClCC,IAAqB,KAClB;EACH,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAGC,QAAQ,CAAU,EAAa,CAAC,CAAA;AAExEC,EAAAA,SAAS,CAAC,MAAM;IACd,IAAIL,GAAG,CAACM,OAAO,EAAE;MACfH,eAAe,CAACH,GAAG,CAACM,OAAO,CAACC,qBAAqB,EAAE,CAAC,CAAA;AACtD,KAAA;GACD,EAAEN,IAAI,CAAC,CAAA;AAER,EAAA,OAAOC,YAAY,CAAA;AACrB;;;;"}

package/hooks/useComputeNumberOfRows.d.ts

@@ -1,15 +0,0 @@
-/**
- * Hook that allows to calculate the number of rows needed for a text area.
- * @param minimumRows Minimum number of rows that we want to display.
- * @return rows to be used and a callback to recalculate
- */
-declare const useComputeNumberOfRows: (minimumRows: number) => {
-    /** number of rows to be used on the text area */
-    rows: number;
-    /**
-     * Callback in order to recalculate the number of rows due to a change on the text area
-     */
-    recomputeNumberOfRows(target: Element): void;
-};
-
-export { useComputeNumberOfRows };

package/hooks/useComputeNumberOfRows.js

@@ -1,40 +0,0 @@
-import { useState } from 'react';
-
-/**
- * Hook that allows to calculate the number of rows needed for a text area.
- * @param minimumRows Minimum number of rows that we want to display.
- * @return rows to be used and a callback to recalculate
- */
-const useComputeNumberOfRows = minimumRows => {
-  const [rows, setRows] = useState(minimumRows);
-  const recompute = target => {
-    /**
-     * HEAD's UP! This part is a little bit tricky. The idea here is to only
-     * display the necessary rows on the textarea. In order to dynamically adjust
-     * the height on that field, we need to:
-     * 1. Set the current amount of rows to the minimum. That will make the scroll appear.
-     * 2. With that, we will have the `scrollHeight`, meaning the height of the container adjusted to the current content
-     * 3. With the scroll height, we can figure out how many rows we need to use by dividing the scroll height
-     * by the line height.
-     * 4. With that number, we can readjust the number of rows on the text area. We need to do that here, if we leave that to
-     * the state change through React, there are some scenarios (resize, hitting ENTER or BACKSPACE which add or remove lines)
-     * when we will not see the update and the rows will be resized to the minimum.
-     * 5. In case there is any other update on the component that changes the UI, we need to keep the number of rows
-     * on the state in order to allow React to re-render. Therefore, we save them using `useState`
-     */
-    // eslint-disable-next-line no-param-reassign
-    target.rows = minimumRows;
-    let currentRows = target.scrollHeight / (target.clientHeight / minimumRows);
-    currentRows = currentRows >= minimumRows ? currentRows : minimumRows;
-    // eslint-disable-next-line no-param-reassign
-    target.rows = currentRows;
-    setRows(currentRows);
-  };
-  return {
-    recomputeNumberOfRows: recompute,
-    rows
-  };
-};
-
-export { useComputeNumberOfRows };
-//# sourceMappingURL=useComputeNumberOfRows.js.map

package/hooks/useComputeNumberOfRows.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useComputeNumberOfRows.js","sources":["../../src/hooks/useComputeNumberOfRows.ts"],"sourcesContent":["import { useState } from 'react';\n\n/**\n * Hook that allows to calculate the number of rows needed for a text area.\n * @param minimumRows Minimum number of rows that we want to display.\n * @return rows to be used and a callback to recalculate\n */\nexport const useComputeNumberOfRows = (\n  minimumRows: number\n): {\n  /** number of rows to be used on the text area */\n  rows: number;\n  /**\n   * Callback in order to recalculate the number of rows due to a change on the text area\n   */\n  recomputeNumberOfRows(target: Element): void;\n} => {\n  const [rows, setRows] = useState(minimumRows);\n\n  const recompute = (target: Element) => {\n    /**\n     * HEAD's UP! This part is a little bit tricky. The idea here is to only\n     * display the necessary rows on the textarea. In order to dynamically adjust\n     * the height on that field, we need to:\n     * 1. Set the current amount of rows to the minimum. That will make the scroll appear.\n     * 2. With that, we will have the `scrollHeight`, meaning the height of the container adjusted to the current content\n     * 3. With the scroll height, we can figure out how many rows we need to use by dividing the scroll height\n     * by the line height.\n     * 4. With that number, we can readjust the number of rows on the text area. We need to do that here, if we leave that to\n     * the state change through React, there are some scenarios (resize, hitting ENTER or BACKSPACE which add or remove lines)\n     * when we will not see the update and the rows will be resized to the minimum.\n     * 5. In case there is any other update on the component that changes the UI, we need to keep the number of rows\n     * on the state in order to allow React to re-render. Therefore, we save them using `useState`\n     */\n    // eslint-disable-next-line no-param-reassign\n    (target as HTMLTextAreaElement).rows = minimumRows;\n    let currentRows = target.scrollHeight / (target.clientHeight / minimumRows);\n    currentRows = currentRows >= minimumRows ? currentRows : minimumRows;\n    // eslint-disable-next-line no-param-reassign\n    (target as HTMLTextAreaElement).rows = currentRows;\n\n    setRows(currentRows);\n  };\n\n  return {\n    recomputeNumberOfRows: recompute,\n    rows,\n  };\n};\n"],"names":["useComputeNumberOfRows","minimumRows","rows","setRows","useState","recompute","target","currentRows","scrollHeight","clientHeight","recomputeNumberOfRows"],"mappings":";;AAEA;AACA;AACA;AACA;AACA;AACaA,MAAAA,sBAAsB,GACjCC,WAAmB,IAQhB;EACH,MAAM,CAACC,IAAI,EAAEC,OAAO,CAAC,GAAGC,QAAQ,CAACH,WAAW,CAAC,CAAA;EAE7C,MAAMI,SAAS,GAAIC,MAAe,IAAK;AACrC;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACI;IACCA,MAAM,CAAyBJ,IAAI,GAAGD,WAAW,CAAA;IAClD,IAAIM,WAAW,GAAGD,MAAM,CAACE,YAAY,IAAIF,MAAM,CAACG,YAAY,GAAGR,WAAW,CAAC,CAAA;AAC3EM,IAAAA,WAAW,GAAGA,WAAW,IAAIN,WAAW,GAAGM,WAAW,GAAGN,WAAW,CAAA;AACpE;IACCK,MAAM,CAAyBJ,IAAI,GAAGK,WAAW,CAAA;IAElDJ,OAAO,CAACI,WAAW,CAAC,CAAA;GACrB,CAAA;EAED,OAAO;AACLG,IAAAA,qBAAqB,EAAEL,SAAS;AAChCH,IAAAA,IAAAA;GACD,CAAA;AACH;;;;"}

package/hooks/useIsLoaded.d.ts

@@ -1,5 +0,0 @@
-declare const useIsLoaded: () => {
-    isLoaded: boolean;
-};
-
-export { useIsLoaded };

package/hooks/useIsLoaded.js

@@ -1,14 +0,0 @@
-import { useState, useEffect } from 'react';
-
-const useIsLoaded = () => {
-  const [isLoaded, setIsLoaded] = useState(false);
-  useEffect(() => {
-    setIsLoaded(true);
-  });
-  return {
-    isLoaded
-  };
-};
-
-export { useIsLoaded };
-//# sourceMappingURL=useIsLoaded.js.map

package/hooks/useWindowSize.d.ts

@@ -1,8 +0,0 @@
-interface WindowSize {
-    height?: number;
-    width?: number;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-}
-declare const useWindowSize: () => WindowSize;
-
-export { useWindowSize };

package/hooks/useWindowSize.js

@@ -1,42 +0,0 @@
-import { useState, useEffect } from 'react';
-
-const useWindowSize = () => {
-  const [windowSize, setWindowSize] = useState({
-    width: undefined,
-    height: undefined,
-    size: undefined
-  });
-  useEffect(() => {
-    function handleResize() {
-      setWindowSize(windowSize => {
-        if (window.innerWidth === windowSize.width && window.innerHeight === windowSize.height) {
-          return windowSize;
-        }
-        let size;
-        if (window.innerWidth <= 480) {
-          size = 'xs';
-        } else if (window.innerWidth <= 768) {
-          size = 'sm';
-        } else if (window.innerWidth <= 1024) {
-          size = 'md';
-        } else if (window.innerWidth <= 1200) {
-          size = 'lg';
-        } else {
-          size = 'xl';
-        }
-        return {
-          width: window.innerWidth,
-          height: window.innerHeight,
-          size
-        };
-      });
-    }
-    window.addEventListener('resize', handleResize);
-    handleResize();
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-  return windowSize;
-};
-
-export { useWindowSize };
-//# sourceMappingURL=useWindowSize.js.map

package/hooks/useWindowSize.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useWindowSize.js","sources":["../../src/hooks/useWindowSize.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\ninterface WindowSize {\n  height?: number;\n  width?: number;\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n}\n\nexport const useWindowSize = () => {\n  const [windowSize, setWindowSize] = useState<WindowSize>({\n    width: undefined,\n    height: undefined,\n    size: undefined,\n  });\n\n  useEffect(() => {\n    function handleResize() {\n      setWindowSize((windowSize) => {\n        if (\n          window.innerWidth === windowSize.width &&\n          window.innerHeight === windowSize.height\n        ) {\n          return windowSize;\n        }\n\n        let size: WindowSize['size'];\n        if (window.innerWidth <= 480) {\n          size = 'xs';\n        } else if (window.innerWidth <= 768) {\n          size = 'sm';\n        } else if (window.innerWidth <= 1024) {\n          size = 'md';\n        } else if (window.innerWidth <= 1200) {\n          size = 'lg';\n        } else {\n          size = 'xl';\n        }\n        return {\n          width: window.innerWidth,\n          height: window.innerHeight,\n          size,\n        };\n      });\n    }\n\n    window.addEventListener('resize', handleResize);\n    handleResize();\n\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n  return windowSize;\n};\n"],"names":["useWindowSize","windowSize","setWindowSize","useState","width","undefined","height","size","useEffect","handleResize","window","innerWidth","innerHeight","addEventListener","removeEventListener"],"mappings":";;AAQaA,MAAAA,aAAa,GAAGA,MAAM;AACjC,EAAA,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGC,QAAQ,CAAa;AACvDC,IAAAA,KAAK,EAAEC,SAAS;AAChBC,IAAAA,MAAM,EAAED,SAAS;AACjBE,IAAAA,IAAI,EAAEF,SAAAA;AACR,GAAC,CAAC,CAAA;AAEFG,EAAAA,SAAS,CAAC,MAAM;IACd,SAASC,YAAYA,GAAG;MACtBP,aAAa,CAAED,UAAU,IAAK;AAC5B,QAAA,IACES,MAAM,CAACC,UAAU,KAAKV,UAAU,CAACG,KAAK,IACtCM,MAAM,CAACE,WAAW,KAAKX,UAAU,CAACK,MAAM,EACxC;AACA,UAAA,OAAOL,UAAU,CAAA;AACnB,SAAA;AAEA,QAAA,IAAIM,IAAwB,CAAA;AAC5B,QAAA,IAAIG,MAAM,CAACC,UAAU,IAAI,GAAG,EAAE;AAC5BJ,UAAAA,IAAI,GAAG,IAAI,CAAA;AACb,SAAC,MAAM,IAAIG,MAAM,CAACC,UAAU,IAAI,GAAG,EAAE;AACnCJ,UAAAA,IAAI,GAAG,IAAI,CAAA;AACb,SAAC,MAAM,IAAIG,MAAM,CAACC,UAAU,IAAI,IAAI,EAAE;AACpCJ,UAAAA,IAAI,GAAG,IAAI,CAAA;AACb,SAAC,MAAM,IAAIG,MAAM,CAACC,UAAU,IAAI,IAAI,EAAE;AACpCJ,UAAAA,IAAI,GAAG,IAAI,CAAA;AACb,SAAC,MAAM;AACLA,UAAAA,IAAI,GAAG,IAAI,CAAA;AACb,SAAA;QACA,OAAO;UACLH,KAAK,EAAEM,MAAM,CAACC,UAAU;UACxBL,MAAM,EAAEI,MAAM,CAACE,WAAW;AAC1BL,UAAAA,IAAAA;SACD,CAAA;AACH,OAAC,CAAC,CAAA;AACJ,KAAA;AAEAG,IAAAA,MAAM,CAACG,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC,CAAA;AAC/CA,IAAAA,YAAY,EAAE,CAAA;IAEd,OAAO,MAAMC,MAAM,CAACI,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC,CAAA;GAChE,EAAE,EAAE,CAAC,CAAA;AACN,EAAA,OAAOR,UAAU,CAAA;AACnB;;;;"}