@scaleflex/ui-tw 0.0.1 → 0.0.3

package/core/dots-navigation/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './dots-navigation.component';
-export type { DotsNavigationProps } from './dots-navigation.props';

package/core/dots-navigation/index.js

@@ -1 +0,0 @@
-export { default } from './dots-navigation.component';

package/core/input/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './input.component';
-export type { InputProps } from './input.props';

package/core/input/index.js

@@ -1 +0,0 @@
-export { default } from './input.component';

package/core/input/input.component.d.ts

@@ -1,3 +0,0 @@
-import type { InputProps } from './input.props';
-declare const Input: ({ inputType, children, iconStart, iconEnd, iconChange, inputActions, clearIcon, iconClickStart, iconClickEnd, clearIconClick, size, className, style, fullWidth, readOnly, disabled, hideCopyIcon, focusOnMount, focusOnClick, isEllipsis, copyTextMessage, copySuccessIcon, error, renderTags, showPlaceholder, InputProps: InputPropsData, ref, ...rest }: InputProps) => JSX.Element;
-export default Input;

package/core/input/input.component.js

@@ -1,293 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["inputType", "children", "iconStart", "iconEnd", "iconChange", "inputActions", "clearIcon", "iconClickStart", "iconClickEnd", "clearIconClick", "size", "className", "style", "fullWidth", "readOnly", "disabled", "hideCopyIcon", "focusOnMount", "focusOnClick", "isEllipsis", "copyTextMessage", "copySuccessIcon", "error", "renderTags", "showPlaceholder", "InputProps", "ref"];
-import CopyOutline from '@scaleflex/icons-tw/copy-outline';
-import EyeClosed from '@scaleflex/icons-tw/eye-closed';
-import EyeOpen from '@scaleflex/icons-tw/eye-open';
-import Success from '@scaleflex/icons-tw/success';
-import React, { useEffect, useRef, useState } from 'react';
-import { cn } from '../../utils/functions/shadcn-utils';
-import { InputSize } from '../../utils/types';
-import { handleCopyIcon } from './input.utils';
-import { Type } from './types';
-var getIconSize = function getIconSize(sizeName, iconType) {
-  switch (sizeName) {
-    case InputSize.Md:
-      return iconType === 'start' ? 15 : 14;
-    case InputSize.Sm:
-    default:
-      return iconType === 'start' ? 13 : 10;
-  }
-};
-var getPasswordIconSize = function getPasswordIconSize(sizeName) {
-  switch (sizeName) {
-    case InputSize.Md:
-      return 16;
-    case InputSize.Sm:
-    default:
-      return 14;
-  }
-};
-var Input = function Input(_ref) {
-  var _rest$selectedItems;
-  var inputType = _ref.inputType,
-    children = _ref.children,
-    iconStart = _ref.iconStart,
-    iconEnd = _ref.iconEnd,
-    iconChange = _ref.iconChange,
-    inputActions = _ref.inputActions,
-    clearIcon = _ref.clearIcon,
-    iconClickStart = _ref.iconClickStart,
-    iconClickEnd = _ref.iconClickEnd,
-    clearIconClick = _ref.clearIconClick,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? InputSize.Md : _ref$size,
-    className = _ref.className,
-    style = _ref.style,
-    _ref$fullWidth = _ref.fullWidth,
-    fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$hideCopyIcon = _ref.hideCopyIcon,
-    hideCopyIcon = _ref$hideCopyIcon === void 0 ? false : _ref$hideCopyIcon,
-    _ref$focusOnMount = _ref.focusOnMount,
-    focusOnMount = _ref$focusOnMount === void 0 ? false : _ref$focusOnMount,
-    _ref$focusOnClick = _ref.focusOnClick,
-    focusOnClick = _ref$focusOnClick === void 0 ? true : _ref$focusOnClick,
-    _ref$isEllipsis = _ref.isEllipsis,
-    isEllipsis = _ref$isEllipsis === void 0 ? false : _ref$isEllipsis,
-    _ref$copyTextMessage = _ref.copyTextMessage,
-    copyTextMessage = _ref$copyTextMessage === void 0 ? 'Copied!' : _ref$copyTextMessage,
-    _ref$copySuccessIcon = _ref.copySuccessIcon,
-    copySuccessIcon = _ref$copySuccessIcon === void 0 ? /*#__PURE__*/React.createElement(Success, {
-      size: 16
-    }) : _ref$copySuccessIcon,
-    _ref$error = _ref.error,
-    error = _ref$error === void 0 ? false : _ref$error,
-    renderTags = _ref.renderTags,
-    showPlaceholder = _ref.showPlaceholder,
-    InputPropsData = _ref.InputProps,
-    ref = _ref.ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isHovering = _useState2[0],
-    setIsHovering = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    showCopyMessage = _useState4[0],
-    setShowCopyMessage = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isVisible = _useState6[0],
-    setIsVisible = _useState6[1];
-  var inputRef = useRef(null);
-  var isSelectedItems = (_rest$selectedItems = rest.selectedItems) === null || _rest$selectedItems === void 0 ? void 0 : _rest$selectedItems.length;
-  var placeholder = rest.value || isSelectedItems ? '' : rest.placeholder;
-  var showCopyIcon = isHovering && readOnly && rest.value.length > 0 && !hideCopyIcon;
-  var handleFocus = function handleFocus() {
-    var _inputRef$current;
-    if (disabled || readOnly) return;
-    showPlaceholder === null || showPlaceholder === void 0 || showPlaceholder(false);
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
-  };
-  useEffect(function () {
-    if (focusOnMount) {
-      handleFocus();
-    }
-  }, []);
-  useEffect(function () {
-    setTimeout(function () {
-      return setShowCopyMessage(false);
-    }, 2000);
-  }, [showCopyMessage]);
-  var handleEntering = function handleEntering() {
-    setTimeout(function () {
-      setIsHovering(true);
-    }, 150);
-  };
-  var handleLeaving = function handleLeaving() {
-    setTimeout(function () {
-      setIsHovering(false);
-    }, 200);
-  };
-  var handleIconClick = function handleIconClick(event, type) {
-    if (disabled || readOnly) return;
-    if (focusOnClick) {
-      handleFocus();
-    }
-    if (type === 'start') {
-      if (iconClickStart) {
-        iconClickStart(event);
-      }
-    } else if (type === 'end') {
-      if (iconClickEnd) {
-        iconClickEnd(event);
-      }
-    } else if (clearIconClick) {
-      var _inputRef$current2;
-      event.stopPropagation();
-      (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.blur();
-      clearIconClick(event);
-    }
-  };
-  var handleInputChange = function handleInputChange(event) {
-    var _rest$onChange;
-    var value = event.target.value;
-    if (value !== null && value !== void 0 && value.startsWith('-0')) {
-      return;
-    }
-    (_rest$onChange = rest.onChange) === null || _rest$onChange === void 0 || _rest$onChange.call(rest, event);
-  };
-  var renderIcon = function renderIcon(_icon, type) {
-    return _icon ? /*#__PURE__*/React.createElement("span", {
-      className: cn('renderIcon', 'text-icons-primary', 'flex', 'shrink-0', "".concat((iconClickStart || iconClickEnd) && !disabled && !readOnly ? 'pointer' : 'default'), "".concat(type === 'end' ? 'text-icons-secondary' : ''), "".concat(disabled && '!text-textplaceholder')),
-      onClick: function onClick(event) {
-        return handleIconClick(event, type);
-      }
-    }, typeof _icon === 'function' ? _icon({
-      size: getIconSize(size, type)
-    }) : _icon) : undefined;
-  };
-  var renderClearIcon = function renderClearIcon() {
-    return disabled || readOnly || !clearIcon ? undefined : /*#__PURE__*/React.createElement("span", {
-      className: "renderClearIcon text-icons-primary flex cursor-pointer",
-      onClick: function onClick(event) {
-        return handleIconClick(event, 'clear');
-      }
-    }, typeof clearIcon === 'function' ? clearIcon({
-      size: getIconSize(size, 'clear')
-    }) : clearIcon);
-  };
-  var copyIconClasses = 'text-icons-secondary flex cursor-pointer';
-  var renderCopyIcon = function renderCopyIcon(icon) {
-    return showCopyIcon ? /*#__PURE__*/React.createElement("span", {
-      className: copyIconClasses,
-      onClick: function onClick() {
-        return handleCopyIcon(rest.value, setShowCopyMessage);
-      }
-    }, icon) : undefined;
-  };
-  var toggleVisibility = function toggleVisibility(event) {
-    event.stopPropagation();
-    setIsVisible(!isVisible);
-  };
-  var renderPasswordIcon = function renderPasswordIcon() {
-    return /*#__PURE__*/React.createElement("span", {
-      className: copyIconClasses,
-      onClick: function onClick(event) {
-        return toggleVisibility(event);
-      }
-    }, isVisible ? /*#__PURE__*/React.createElement(EyeClosed, {
-      size: getPasswordIconSize(size)
-    }) : /*#__PURE__*/React.createElement(EyeOpen, {
-      size: getPasswordIconSize(size)
-    }));
-  };
-  var getInputType = function getInputType() {
-    if (!inputType && rest !== null && rest !== void 0 && rest.type) {
-      return rest === null || rest === void 0 ? void 0 : rest.type;
-    }
-    if (inputType === Type.Password && !isVisible) {
-      return Type.Password;
-    }
-    return Type.Text;
-  };
-  var renderField = function renderField() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: cn('inline-flex h-full max-h-30 w-full flex-wrap gap-2 [&::-webkit-scrollbar]:hidden', "".concat(isSelectedItems ? 'overflow-y-auto' : ''))
-    }, renderTags && renderTags(), /*#__PURE__*/React.createElement("input", _extends({
-      className: cn('file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex min-w-0 rounded-md text-base transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive', '[&::placeholder]:text-textplaceholder m-0 block w-full min-w-fit border-0 bg-transparent p-0 text-inherit outline-none', "".concat(isEllipsis ? 'text-ellipsis' : ''))
-    }, rest, {
-      "data-slot": "input",
-      placeholder: placeholder,
-      ref: inputRef,
-      readOnly: Boolean(readOnly),
-      type: getInputType(),
-      onChange: handleInputChange
-    })));
-  };
-  var renderCopyText = function renderCopyText() {
-    var bottomValue = size === InputSize.Md ? 'bottom-11' : 'bottom-9';
-    return /*#__PURE__*/React.createElement("div", {
-      className: "shadow-(0px 2px 6px) shadow-large-shadow absolute right-0 flex max-h-8 items-center gap-1.5 rounded-sm bg-white ".concat(bottomValue, " ")
-    }, /*#__PURE__*/React.createElement("span", {
-      className: "text-icons-primary flex"
-    }, copySuccessIcon), /*#__PURE__*/React.createElement("span", {
-      className: "text-textprimary flex flex-nowrap"
-    }, copyTextMessage), /*#__PURE__*/React.createElement("span", {
-      className: "text-textprimary flex whitespace-nowrap"
-    }, copyTextMessage));
-  };
-  var renderInputActions = function renderInputActions(inputActions) {
-    if (!inputActions) return;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "box-border w-full pt-4"
-    }, inputActions);
-  };
-
-  // ==========================
-  // ==========================
-
-  var divContainerWrapClassNames = cn(className, 'relative', 'flex', 'box-border', 'gap-2', 'cursor-text', 'transition-all', 'duration-100', 'ease-out', 'border-1', 'border-solid', 'rounded-sm', 'box-content', 'hover:[&_svg]:!text-secondary-hover');
-  if (inputActions) {
-    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'items-stretch', 'column');
-  } else {
-    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'row');
-  }
-  if (fullWidth) {
-    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'w-full');
-  } else {
-    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'w-80'); // w-80 == 320px
-  }
-  if (readOnly || disabled) {
-    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'bg-background-hover');
-    if (disabled) {
-      divContainerWrapClassNames = cn(divContainerWrapClassNames, 'pointer-events-none', 'text-textplaceholder', 'border-borders-secondary');
-    }
-    if (readOnly) {
-      divContainerWrapClassNames = cn(divContainerWrapClassNames, 'border-borders-item');
-    }
-
-    //.
-  } else {
-    // !readonly && !disabled
-    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'pointer-events-auto', 'bg-background-stateless', 'border-borders-primary-stateless', 'hover:bg-background-stateless', 'hover:border-borders-primary-hover', 'hover:[&_svg]:text-icons-primary',
-    // &:hover svg { color: ... }
-
-    'focus-within:!bg-background-secondary', 'focus-within:border-accent-primary', 'focus-within:hover:border-accent-primary');
-  }
-  if (InputSize.Sm) {
-    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'py-2 px-3 h-8');
-  }
-  if (InputSize.Md) {
-    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'py-3 px-4 h-10');
-  }
-  if (isSelectedItems) {
-    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'h-fit');
-  }
-  if (error) {
-    divContainerWrapClassNames = cn(divContainerWrapClassNames, 'bg-background-secondary', 'border-1', 'border-error');
-  }
-
-  // ==========================
-  // ==========================
-
-  var divContainerClassNames = cn('flex', 'items-center', 'w-full', 'gap-2', 'box-border');
-  divContainerClassNames = cn(divContainerClassNames, '');
-  return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref,
-    className: divContainerWrapClassNames,
-    onMouseEnter: handleEntering,
-    onMouseLeave: handleLeaving,
-    style: style
-  }, InputPropsData || {}), /*#__PURE__*/React.createElement("div", {
-    className: divContainerClassNames
-  }, renderIcon(iconStart, 'start'), renderField(), renderCopyIcon(/*#__PURE__*/React.createElement(CopyOutline, {
-    size: getIconSize(size, 'copy')
-  })), showCopyMessage && renderCopyText(), renderClearIcon(), inputType === Type.Password && renderPasswordIcon(), renderIcon(iconEnd, 'end'), renderIcon(iconChange, ''), children && /*#__PURE__*/React.createElement(React.Fragment, null, children)), renderInputActions(inputActions));
-};
-export default Input;

package/core/input/input.mixin.d.ts

@@ -1,18 +0,0 @@
-import type { WithTheme } from '../../theme/entity';
-export declare const sizeInputMixin: {
-    sm: string;
-    md: string;
-};
-export declare const sizeCrossInputMixin: {
-    sm: string;
-    md: string;
-};
-export declare const fontSizeInputMixin: {
-    sm: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").RuleSet<object>;
-    md: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").RuleSet<object>;
-};
-export declare const sizeInputLabelMixin: {
-    sm: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").RuleSet<object>;
-    md: ({ theme: { typography: { font }, }, }: WithTheme) => import("styled-components").RuleSet<object>;
-};
-export declare const errorMixin: ({ theme: { palette } }: WithTheme) => import("styled-components").RuleSet<object>;

package/core/input/input.mixin.js

@@ -1,25 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { css } from 'styled-components';
-import { InputSize } from '../../utils/types';
-import { Color as PaletteColor } from '../../utils/types/palette';
-import { FontVariant as FV } from '../../utils/types/typography';
-export var sizeInputMixin = _defineProperty(_defineProperty({}, InputSize.Sm, "\n    padding: 8px 12px;\n    height: 32px;\n  "), InputSize.Md, "\n    padding: 11px 16px;\n    height: 40px;\n  ");
-export var sizeCrossInputMixin = _defineProperty(_defineProperty({}, InputSize.Sm, "\n    padding: 4px 6px 4px 12px;\n    max-height: 32px;\n  "), InputSize.Md, "\n    padding: 0px 4px 0px 16px;\n    max-height: 40px;\n  ");
-export var fontSizeInputMixin = _defineProperty(_defineProperty({}, InputSize.Sm, function (_ref) {
-  var font = _ref.theme.typography.font;
-  return css(["", ""], font[FV.InputMd]);
-}), InputSize.Md, function (_ref2) {
-  var font = _ref2.theme.typography.font;
-  return css(["", ""], font[FV.InputLg]);
-});
-export var sizeInputLabelMixin = _defineProperty(_defineProperty({}, InputSize.Sm, function (_ref3) {
-  var font = _ref3.theme.typography.font;
-  return css(font[FV.LabelSmall]);
-}), InputSize.Md, function (_ref4) {
-  var font = _ref4.theme.typography.font;
-  return css(font[FV.LabelMedium]);
-});
-export var errorMixin = function errorMixin(_ref5) {
-  var palette = _ref5.theme.palette;
-  return css(["background:", " !important;border:1px solid ", " !important;"], palette[PaletteColor.BackgroundSecondary], palette[PaletteColor.Error]);
-};

package/core/input/input.props.d.ts

@@ -1,40 +0,0 @@
-import { IconProps } from '@scaleflex/icons-tw/icon.props';
-import React, { Ref } from 'react';
-import type { Values } from '../../utils/types';
-import { InputBackgroundColor, InputSize } from '../../utils/types';
-export type InputSizeType = Values<typeof InputSize>;
-export type InputBackgroundType = Values<typeof InputBackgroundColor>;
-export type IconFuncType = (props: IconProps) => React.ReactNode;
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-    readOnly?: boolean;
-    disabled?: boolean;
-    isEllipsis?: boolean;
-    isHovering?: boolean;
-    size?: InputSizeType;
-    iconStart?: React.ReactNode | IconFuncType;
-    iconEnd?: React.ReactNode | IconFuncType;
-    inputActions?: React.ReactNode;
-    iconChange?: React.ReactNode | IconFuncType;
-    clearIcon?: React.ReactNode | IconFuncType;
-    inputType?: string;
-    type?: any;
-    error?: boolean;
-    fullWidth?: boolean;
-    isSearchInput?: boolean;
-    hideCopyIcon?: boolean;
-    copyTextMessage?: string;
-    copySuccessIcon?: React.ReactNode;
-    value?: any;
-    selectedItems?: any;
-    isSelectedItems?: boolean;
-    renderTags?: () => React.ReactNode;
-    iconClickStart?: (event: Event) => void;
-    iconClickEnd?: (event: Event) => void;
-    clearIconClick?: (event: Event) => void;
-    focusOnMount?: boolean;
-    focusOnClick?: boolean;
-    showPlaceholder?: (value: boolean) => void;
-    placeholder?: string;
-    InputProps?: React.HtmlHTMLAttributes<HTMLDivElement>;
-    ref?: Ref<HTMLInputElement>;
-}

package/core/input/input.props.js

@@ -1 +0,0 @@
-export {};

package/core/input/input.styles.d.ts

@@ -1,78 +0,0 @@
-import type { InputProps } from './input.props';
-declare const Styled: {
-    Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }>, never>, {
-        $isSelectedItems?: boolean;
-        $fullWidth?: boolean;
-        $error?: boolean;
-        $hasInputActions?: boolean;
-    } & InputProps & {
-        theme: import("styled-components").DefaultTheme;
-    }>> & string;
-    Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }>, never>, InputProps>> & string;
-    Base: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-        ref?: ((instance: HTMLInputElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLInputElement> | null | undefined;
-    }>, never>, {
-        $isEllipsis?: boolean;
-    } & {
-        theme: import("styled-components").DefaultTheme;
-    }>> & string;
-    Icon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-    }>, never>, {
-        $iconType: string;
-    } & InputProps & {
-        theme: import("styled-components").DefaultTheme;
-    }>> & string;
-    CopyIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-    }>, never>, {
-        theme: import("styled-components").DefaultTheme;
-    }>> & string;
-    PasswordIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-    }>, never>, "theme"> & {
-        theme: import("styled-components").DefaultTheme;
-    }, import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-    }>, never>, "theme"> & {
-        theme: import("styled-components").DefaultTheme;
-    }>, never>, never>> & string;
-    ClearIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-    }>, never>, {
-        theme: import("styled-components").DefaultTheme;
-    }>> & string;
-    NotificationBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }>, never>, {
-        isTextarea?: boolean;
-    } & InputProps & {
-        theme: import("styled-components").DefaultTheme;
-    }>> & string;
-    NotificationIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-    }>, never>, {
-        theme: import("styled-components").DefaultTheme;
-    }>> & string;
-    NotificationText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
-        ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-    }>, never>, {
-        theme: import("styled-components").DefaultTheme;
-    }>> & string;
-    FieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }>, never>, {
-        $isSelectedItems: boolean;
-    }>> & string;
-    InputActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }>, never>, never>> & string;
-    InputContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }>, never>, never>> & string;
-};
-export default Styled;

package/core/input/input.styles.js

@@ -1,148 +0,0 @@
-import styled, { css } from 'styled-components';
-import { applyDisplayNames, generateClassNames } from '../../utils/functions';
-import { InputSize } from '../../utils/types';
-import { Color as PColor } from '../../utils/types/palette';
-import { BorderRadiusSize as BRSize } from '../../utils/types/shape';
-import { FontVariant as FV } from '../../utils/types/typography';
-import { errorMixin, fontSizeInputMixin, sizeInputMixin } from './input.mixin';
-import { getInputBackgroundColor, getInputBorderColor, getInputTextColor } from './input.utils';
-var baseClassName = 'Input';
-var Icon = /*#__PURE__*/styled.span.attrs({
-  className: generateClassNames(baseClassName, 'Icon')
-}).withConfig({
-  componentId: "sc-p6n03x-0"
-})(function (_ref) {
-  var iconClickStart = _ref.iconClickStart,
-    iconClickEnd = _ref.iconClickEnd,
-    disabled = _ref.disabled,
-    readOnly = _ref.readOnly,
-    $iconType = _ref.$iconType,
-    palette = _ref.theme.palette;
-  return css(["display:flex;color:", ";cursor:", ";flex-shrink:0;", ""], palette[PColor.IconsPrimary], (iconClickStart || iconClickEnd) && !disabled && !readOnly ? 'pointer' : 'default', $iconType === 'end' && css(["color:", ";"], palette[PColor.IconsSecondary]));
-});
-var CopyIcon = /*#__PURE__*/styled.span.attrs({
-  className: generateClassNames(baseClassName, 'CopyIcon')
-}).withConfig({
-  componentId: "sc-p6n03x-1"
-})(function (_ref2) {
-  var palette = _ref2.theme.palette;
-  return css(["display:flex;color:", ";cursor:pointer;"], palette[PColor.IconsSecondary]);
-});
-var PasswordIcon = /*#__PURE__*/styled(CopyIcon).attrs({
-  className: generateClassNames(baseClassName, 'PasswordIcon')
-}).withConfig({
-  componentId: "sc-p6n03x-2"
-})([""]);
-var Container = /*#__PURE__*/styled.div.attrs({
-  className: generateClassNames(baseClassName, 'Container')
-}).withConfig({
-  componentId: "sc-p6n03x-3"
-})(function () {
-  return css(["display:block;color:inherit;font-size:inherit;width:100%;min-width:0;margin:0;padding:0;border:0;background-color:transparent;outline:none;"]);
-});
-var Base = /*#__PURE__*/styled.input.attrs({
-  className: generateClassNames(baseClassName, 'Base')
-}).withConfig({
-  componentId: "sc-p6n03x-4"
-})(function (_ref3) {
-  var palette = _ref3.theme.palette,
-    _ref3$$isEllipsis = _ref3.$isEllipsis,
-    $isEllipsis = _ref3$$isEllipsis === void 0 ? false : _ref3$$isEllipsis;
-  return css(["display:block;color:inherit;width:100%;min-width:fit-content;margin:0;padding:0;border:0;background-color:transparent;outline:none;", " &::placeholder{color:", ";}"], $isEllipsis && css(["text-overflow:ellipsis;"]), palette[PColor.TextPlaceholder]);
-});
-var Input = /*#__PURE__*/styled.div.attrs({
-  className: generateClassNames(baseClassName, 'root')
-}).withConfig({
-  componentId: "sc-p6n03x-5"
-})(function (_ref4) {
-  var _ref4$size = _ref4.size,
-    size = _ref4$size === void 0 ? InputSize.Md : _ref4$size,
-    _ref4$$error = _ref4.$error,
-    $error = _ref4$$error === void 0 ? false : _ref4$$error,
-    _ref4$$fullWidth = _ref4.$fullWidth,
-    $fullWidth = _ref4$$fullWidth === void 0 ? false : _ref4$$fullWidth,
-    _ref4$readOnly = _ref4.readOnly,
-    readOnly = _ref4$readOnly === void 0 ? false : _ref4$readOnly,
-    _ref4$disabled = _ref4.disabled,
-    disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
-    _ref4$isHovering = _ref4.isHovering,
-    isHovering = _ref4$isHovering === void 0 ? false : _ref4$isHovering,
-    _ref4$$isSelectedItem = _ref4.$isSelectedItems,
-    $isSelectedItems = _ref4$$isSelectedItem === void 0 ? false : _ref4$$isSelectedItem,
-    _ref4$$hasInputAction = _ref4.$hasInputActions,
-    $hasInputActions = _ref4$$hasInputAction === void 0 ? false : _ref4$$hasInputAction,
-    theme = _ref4.theme;
-  return css(["position:relative;display:flex;flex-direction:", ";", " box-sizing:border-box;column-gap:8px;cursor:text;transition:all 100ms ease-out;width:", ";pointer-events:", ";background-color:", ";border-radius:", ";border:1px solid ", ";color:", ";", " ", ";", "{", "}", " ", " &:hover{color:", ";}", ""], !$hasInputActions ? 'row' : 'column', $hasInputActions && 'align-items: stretch;', $fullWidth ? '100%' : '300px', disabled ? 'none' : 'auto', getInputBackgroundColor(readOnly, disabled), theme.shape.borderRadius[BRSize.Md], getInputBorderColor(readOnly, disabled), disabled ? theme.palette[PColor.TextPlaceholder] : theme.palette[PColor.TextPrimary], sizeInputMixin[size], $isSelectedItems && "\n      height: fit-content;\n\n      ".concat(Base, " {\n        max-width: fit-content;\n        min-width: 20px;\n        flex-grow: 1;\n        width: 40px;\n      }\n    "), Base, fontSizeInputMixin[size], !readOnly && !disabled && css(["&:focus-within{background-color:", "!important;border:1px solid ", ";&:hover{border:1px solid ", ";", "{color:", ";}}}", " &:hover{background-color:", ";border:1px solid ", ";", "{color:", ";}}"], theme.palette[PColor.BackgroundSecondary], theme.palette[PColor.AccentStateless], theme.palette[PColor.AccentStateless], Icon, theme.palette[PColor.IconsPrimary], isHovering && css(["", "{color:", ";}"], Icon, theme.palette[PColor.IconsPrimaryHover]), theme.palette[PColor.BackgroundStateless], theme.palette[PColor.BordersPrimaryHover], Icon, theme.palette[PColor.IconsPrimaryHover]), disabled && css(["", "{color:", ";}"], Icon, theme.palette[PColor.IconsMuted]), getInputTextColor(readOnly, disabled), $error && errorMixin);
-});
-var ClearIcon = /*#__PURE__*/styled.span.attrs({
-  className: generateClassNames(baseClassName, 'ClearIcon')
-}).withConfig({
-  componentId: "sc-p6n03x-6"
-})(function (_ref5) {
-  var palette = _ref5.theme.palette;
-  return css(["display:flex;cursor:pointer;color:", ";"], palette[PColor.IconsPrimary]);
-});
-var NotificationBox = /*#__PURE__*/styled.div.attrs({
-  className: generateClassNames(baseClassName, 'NotificationBox')
-}).withConfig({
-  componentId: "sc-p6n03x-7"
-})(function (_ref6) {
-  var _ref6$size = _ref6.size,
-    size = _ref6$size === void 0 ? InputSize.Md : _ref6$size,
-    _ref6$isTextarea = _ref6.isTextarea,
-    isTextarea = _ref6$isTextarea === void 0 ? false : _ref6$isTextarea,
-    palette = _ref6.theme.palette;
-  return css(["display:flex;position:absolute;align-items:center;max-height:34px;right:0px;padding:8px 12px;gap:6px;bottom:", ";box-shadow:0px 2px 6px ", ";background-color:", ";border-radius:4px;align-items:center;", ""], size === InputSize.Md ? '45px' : '35px', palette[PColor.LargeShadow], palette[PColor.BackgroundStateless], isTextarea && "\n      bottom: ".concat(size === InputSize.Md ? 27 : 22, "px;\n      right: ").concat(size === InputSize.Md ? 16 : 12, "px;\n    "));
-});
-var NotificationIcon = /*#__PURE__*/styled.span.attrs({
-  className: generateClassNames(baseClassName, 'NotificationIcon')
-}).withConfig({
-  componentId: "sc-p6n03x-8"
-})(function (_ref7) {
-  var palette = _ref7.theme.palette;
-  return css(["display:flex;color:", ";"], palette[PColor.IconsPrimary]);
-});
-var NotificationText = /*#__PURE__*/styled.span.attrs({
-  className: generateClassNames(baseClassName, 'NotificationText')
-}).withConfig({
-  componentId: "sc-p6n03x-9"
-})(function (_ref8) {
-  var _ref8$theme = _ref8.theme,
-    palette = _ref8$theme.palette,
-    font = _ref8$theme.typography.font;
-  return css(["display:flex;white-space:nowrap;", ";color:", ";"], font[FV.TextSmall], palette[PColor.TextPrimary]);
-});
-var FieldWrapper = /*#__PURE__*/styled.div.attrs({
-  className: generateClassNames(baseClassName, 'fieldWrapper')
-}).withConfig({
-  componentId: "sc-p6n03x-10"
-})(function (_ref9) {
-  var $isSelectedItems = _ref9.$isSelectedItems;
-  return css(["width:100%;height:100%;display:inline-flex;flex-wrap:wrap;gap:8px;max-height:120px;", ";::-webkit-scrollbar{display:none;}"], $isSelectedItems && "\n      overflow-y: auto;\n    ");
-});
-var InputActions = /*#__PURE__*/styled.div.attrs({
-  className: generateClassNames(baseClassName, 'inputActions')
-}).withConfig({
-  componentId: "sc-p6n03x-11"
-})(["padding-top:16px;width:100%;box-sizing:border-box;"]);
-var InputContent = /*#__PURE__*/styled.div.attrs({
-  className: generateClassNames(baseClassName, 'inputContent')
-}).withConfig({
-  componentId: "sc-p6n03x-12"
-})(["display:flex;align-items:center;width:100%;column-gap:8px;box-sizing:border-box;"]);
-var Styled = applyDisplayNames({
-  Input: Input,
-  Container: Container,
-  Base: Base,
-  Icon: Icon,
-  CopyIcon: CopyIcon,
-  PasswordIcon: PasswordIcon,
-  ClearIcon: ClearIcon,
-  NotificationBox: NotificationBox,
-  NotificationIcon: NotificationIcon,
-  NotificationText: NotificationText,
-  FieldWrapper: FieldWrapper,
-  InputActions: InputActions,
-  InputContent: InputContent
-});
-export default Styled;