@quen-ui/components 1.1.0 → 1.2.0

package/dist/Dropdown/Dropdown.es.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useState, useRef, useEffect, useLayoutEffect } from "react";
+import { useState, useRef, useEffect, useCallback, useLayoutEffect } from "react";
 import { createPortal } from "react-dom";
 import { useTransitionState } from "react-transition-state";
 import { useOnClickOutside } from "@quen-ui/hooks";
@@ -13,68 +13,72 @@ const Dropdown = ({
   width,
   anchorRef,
   onClickClose,
+  onClickOutside,
+  notCloseOutside,
   ...props
 }) => {
-  const [anchorRect, setAnchorRect] = useState(DEFAULT_RECT_ELEMENT);
+  const [isOpen, setIsOpen] = useState(false);
+  const isControlled = typeof open !== "undefined";
+  const openState = isControlled ? open : isOpen;
   const dropdownRef = useRef(null);
   const [containerDropdown, setContainerDropdown] = useState(null);
+  const [anchorRect, setAnchorRect] = useState(DEFAULT_RECT_ELEMENT);
+  const lastInternalMousedownRef = useRef(0);
   const [state, toggle] = useTransitionState({
     timeout: 500,
     unmountOnExit: true,
-    initialEntered: open
+    initialEntered: openState
   });
+  useEffect(() => {
+    if (isControlled) toggle(open);
+  }, [open, isControlled, toggle]);
+  const calculateAnchorRect = useCallback(() => {
+    if (anchorRef.current) {
+      setAnchorRect(calculateRectElement(anchorRef.current));
+    }
+  }, [anchorRef]);
+  const handleInternalMouseDown = useCallback(
+    (e) => {
+      lastInternalMousedownRef.current = e.timeStamp || Date.now();
+    },
+    []
+  );
   useOnClickOutside(
-    anchorRef,
-    () => {
-      if (typeof open === "undefined") {
-        toggle(false);
-        onClickClose?.();
-      }
+    [anchorRef, dropdownRef],
+    (e) => {
+      if (e.timeStamp - lastInternalMousedownRef.current < 2100) return;
+      onClickOutside?.();
+      onClickClose?.();
+      if (!isControlled) setIsOpen(false);
     },
-    {
-      excludeRef: dropdownRef
-    }
+    { isActive: !notCloseOutside && openState }
   );
-  const calculateAnchorRect = () => {
-    if (anchorRef && anchorRef.current) {
-      setAnchorRect(calculateRectElement(anchorRef.current));
-    }
-  };
-  const handleClickAnchorRef = () => {
-    toggle();
-  };
+  useEffect(() => {
+    if (isControlled || !anchorRef.current) return;
+    const el = anchorRef.current;
+    const handleClick = () => {
+      toggle();
+      setIsOpen((prev) => !prev);
+    };
+    el.addEventListener("click", handleClick);
+    return () => el.removeEventListener("click", handleClick);
+  }, [anchorRef, toggle, isControlled]);
+  useLayoutEffect(() => {
+    calculateAnchorRect();
+  }, [state, calculateAnchorRect]);
   useEffect(() => {
     window.addEventListener("resize", calculateAnchorRect);
     window.addEventListener("scroll", calculateAnchorRect, true);
     return () => {
       window.removeEventListener("resize", calculateAnchorRect);
-      window.addEventListener("scroll", calculateAnchorRect, true);
-    };
-  }, [anchorRect]);
-  useEffect(() => {
-    if (typeof open === "undefined") {
-      anchorRef.current?.addEventListener("click", handleClickAnchorRef);
-    }
-    return () => {
-      anchorRef.current?.removeEventListener("click", handleClickAnchorRef);
+      window.removeEventListener("scroll", calculateAnchorRect, true);
     };
-  }, [anchorRef]);
-  useEffect(() => {
-    if (typeof open !== "undefined") {
-      toggle(open);
-    }
-  }, [open]);
-  useLayoutEffect(() => {
-    calculateAnchorRect();
-  }, [state]);
+  }, [calculateAnchorRect]);
   useEffect(() => {
-    const container = document.getElementsByTagName("body").item(0);
-    setContainerDropdown(container);
+    if (typeof document !== "undefined") setContainerDropdown(document.body);
   }, []);
-  if (disabled) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(DropdownWrapper, { children: state.isEnter && containerDropdown && createPortal(
+  if (disabled) return null;
+  return /* @__PURE__ */ jsx(DropdownWrapper, { onMouseDown: handleInternalMouseDown, children: state.isEnter && containerDropdown && createPortal(
     /* @__PURE__ */ jsx(
       DropdownPortal,
       {

package/dist/Dropdown/DropdownItem.cjs.js

@@ -10,22 +10,19 @@ const DropdownItem = ({
   getItemLeftContent,
   size
 }) => {
+  const isDisabled = getItemDisabled?.(item);
   const handleClick = (event) => {
-    event.preventDefault();
+    if (isDisabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
     getItemOnClick?.(item)?.(item, event);
     onItemClick?.(item, event);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    styles.DropdownItemStyled,
-    {
-      size,
-      disabled: getItemDisabled?.(item),
-      onClick: handleClick,
-      children: [
-        getItemLeftContent?.(item),
-        getItemLabel(item)
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(styles.DropdownItemStyled, { size, disabled: isDisabled, onClick: handleClick, children: [
+    getItemLeftContent?.(item),
+    getItemLabel(item)
+  ] });
 };
 module.exports = DropdownItem;

package/dist/Dropdown/DropdownItem.es.js

@@ -9,23 +9,20 @@ const DropdownItem = ({
   getItemLeftContent,
   size
 }) => {
+  const isDisabled = getItemDisabled?.(item);
   const handleClick = (event) => {
-    event.preventDefault();
+    if (isDisabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
     getItemOnClick?.(item)?.(item, event);
     onItemClick?.(item, event);
   };
-  return /* @__PURE__ */ jsxs(
-    DropdownItemStyled,
-    {
-      size,
-      disabled: getItemDisabled?.(item),
-      onClick: handleClick,
-      children: [
-        getItemLeftContent?.(item),
-        getItemLabel(item)
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(DropdownItemStyled, { size, disabled: isDisabled, onClick: handleClick, children: [
+    getItemLeftContent?.(item),
+    getItemLabel(item)
+  ] });
 };
 export {
   DropdownItem as default

package/dist/Dropdown/DropdownList.cjs.js

@@ -1,7 +1,6 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const hooks = require("@quen-ui/hooks");
 const Divider = require("../Divider/Divider.cjs.js");
 const styles = require("./styles.cjs.js");
 const helpers = require("./helpers.cjs.js");
@@ -23,7 +22,6 @@ const DropdownList = (props, ref) => {
     getItemOnClick,
     ...otherProps
   } = helpers.withDefaultGetters(props);
-  hooks.useOnClickOutside(ref, otherProps.onClickOutside);
   const groups = React.useMemo(() => {
     const _groups = items.reduce(
       (result, x) => {

package/dist/Dropdown/DropdownList.es.js

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import React__default, { forwardRef, useMemo } from "react";
-import { useOnClickOutside } from "@quen-ui/hooks";
 import Divider from "../Divider/Divider.es.js";
 import { DropdownListWrapper, DropdownItemsWrapper } from "./styles.es.js";
 import { withDefaultGetters } from "./helpers.es.js";
@@ -22,7 +21,6 @@ const DropdownList$1 = (props, ref) => {
     getItemOnClick,
     ...otherProps
   } = withDefaultGetters(props);
-  useOnClickOutside(ref, otherProps.onClickOutside);
   const groups = useMemo(() => {
     const _groups = items.reduce(
       (result, x) => {

package/dist/InputBase/InputBase.cjs.js

@@ -1,5 +1,6 @@
 "use strict";
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const styles = require("./styles.cjs.js");
 const Text = require("../typography/Text/Text.cjs.js");
 const InputBase = ({
@@ -14,19 +15,61 @@ const InputBase = ({
   children,
   leftContent,
   rightContent,
+  leftContentVariant = "icon",
+  rightContentVariant = "icon",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(styles.InputBaseWrapper, { className, style, ...props, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size, as: "label", htmlFor: id, children: [
-      label,
-      required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "quen-ui__input-base--required", children: "*" })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(styles.InputBaseContainer, { size, error, disabled, children: [
-      leftContent,
-      children,
-      rightContent
-    ] }),
-    typeof error === "string" && /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "quen-ui__input-base--error-message", size: "xs", children: error })
-  ] });
+  const leftContentRender = React.useMemo(() => {
+    if (leftContent) {
+      if (leftContentVariant === "text") {
+        return /* @__PURE__ */ jsxRuntime.jsx(styles.InputContentText, { size, children: leftContent });
+      } else if (leftContentVariant === "addon") {
+        return /* @__PURE__ */ jsxRuntime.jsx(styles.InputBaseAddonWrapper, { children: leftContent });
+      }
+      return leftContent;
+    }
+    return null;
+  }, [leftContent, leftContentVariant, size]);
+  const rightContentRender = React.useMemo(() => {
+    if (rightContent) {
+      if (rightContentVariant === "text") {
+        return /* @__PURE__ */ jsxRuntime.jsx(styles.InputContentText, { size, children: rightContent });
+      } else if (rightContentVariant === "addon") {
+        return /* @__PURE__ */ jsxRuntime.jsx(styles.InputBaseRightAddonWrapper, { children: rightContent });
+      }
+      return rightContent;
+    }
+    return null;
+  }, [rightContent, rightContentVariant, size]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    styles.InputBaseWrapper,
+    {
+      className,
+      style,
+      ...props,
+      size,
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(Text, { size, as: "label", htmlFor: id, children: [
+          label,
+          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "quen-ui__input-base--required", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          styles.InputBaseContainer,
+          {
+            size,
+            error,
+            disabled,
+            leftContent: !!leftContent && leftContentVariant !== "icon",
+            children: [
+              leftContentRender,
+              children,
+              rightContentRender
+            ]
+          }
+        ),
+        typeof error === "string" && /* @__PURE__ */ jsxRuntime.jsx(Text, { className: "quen-ui__input-base--error-message", size: "xs", children: error })
+      ]
+    }
+  );
 };
 module.exports = InputBase;

package/dist/InputBase/InputBase.d.ts

@@ -1,4 +1,4 @@
 import { PropsWithChildren } from 'react';
 import { IInputBaseProps } from './types';
-declare const InputBase: ({ label, className, size, id, required, style, error, disabled, children, leftContent, rightContent, ...props }: PropsWithChildren<IInputBaseProps>) => import("react/jsx-runtime").JSX.Element;
+declare const InputBase: ({ label, className, size, id, required, style, error, disabled, children, leftContent, rightContent, leftContentVariant, rightContentVariant, ...props }: PropsWithChildren<IInputBaseProps>) => import("react/jsx-runtime").JSX.Element;
 export default InputBase;

package/dist/InputBase/InputBase.es.js

@@ -1,5 +1,6 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { InputBaseWrapper, InputBaseContainer } from "./styles.es.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { InputContentText, InputBaseAddonWrapper, InputBaseRightAddonWrapper, InputBaseWrapper, InputBaseContainer } from "./styles.es.js";
 import Text from "../typography/Text/Text.es.js";
 const InputBase = ({
   label,
@@ -13,20 +14,62 @@ const InputBase = ({
   children,
   leftContent,
   rightContent,
+  leftContentVariant = "icon",
+  rightContentVariant = "icon",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(InputBaseWrapper, { className, style, ...props, children: [
-    label && /* @__PURE__ */ jsxs(Text, { size, as: "label", htmlFor: id, children: [
-      label,
-      required && /* @__PURE__ */ jsx("span", { className: "quen-ui__input-base--required", children: "*" })
-    ] }),
-    /* @__PURE__ */ jsxs(InputBaseContainer, { size, error, disabled, children: [
-      leftContent,
-      children,
-      rightContent
-    ] }),
-    typeof error === "string" && /* @__PURE__ */ jsx(Text, { className: "quen-ui__input-base--error-message", size: "xs", children: error })
-  ] });
+  const leftContentRender = useMemo(() => {
+    if (leftContent) {
+      if (leftContentVariant === "text") {
+        return /* @__PURE__ */ jsx(InputContentText, { size, children: leftContent });
+      } else if (leftContentVariant === "addon") {
+        return /* @__PURE__ */ jsx(InputBaseAddonWrapper, { children: leftContent });
+      }
+      return leftContent;
+    }
+    return null;
+  }, [leftContent, leftContentVariant, size]);
+  const rightContentRender = useMemo(() => {
+    if (rightContent) {
+      if (rightContentVariant === "text") {
+        return /* @__PURE__ */ jsx(InputContentText, { size, children: rightContent });
+      } else if (rightContentVariant === "addon") {
+        return /* @__PURE__ */ jsx(InputBaseRightAddonWrapper, { children: rightContent });
+      }
+      return rightContent;
+    }
+    return null;
+  }, [rightContent, rightContentVariant, size]);
+  return /* @__PURE__ */ jsxs(
+    InputBaseWrapper,
+    {
+      className,
+      style,
+      ...props,
+      size,
+      children: [
+        label && /* @__PURE__ */ jsxs(Text, { size, as: "label", htmlFor: id, children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "quen-ui__input-base--required", children: "*" })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          InputBaseContainer,
+          {
+            size,
+            error,
+            disabled,
+            leftContent: !!leftContent && leftContentVariant !== "icon",
+            children: [
+              leftContentRender,
+              children,
+              rightContentRender
+            ]
+          }
+        ),
+        typeof error === "string" && /* @__PURE__ */ jsx(Text, { className: "quen-ui__input-base--error-message", size: "xs", children: error })
+      ]
+    }
+  );
 };
 export {
   InputBase as default

package/dist/InputBase/styles.cjs.js

@@ -2,17 +2,26 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styled = require("styled-components");
 const polished = require("polished");
+const Text = require("../typography/Text/Text.cjs.js");
+const InputBaseAddonWrapper = styled.div`
+  margin-inline-start: -0.0625rem;
+`;
+const InputBaseRightAddonWrapper = styled.div`
+  margin-inline-end: -0.75rem;
+`;
 const InputBaseContainer = styled.div.attrs({
   className: "quen-ui__input-base__container"
 }).withConfig({
-  shouldForwardProp: (prop) => !["size", "error", "disabled"].includes(prop)
+  shouldForwardProp: (prop) => !["size", "error", "disabled", "leftContent"].includes(prop)
 })`
   height: ${({ size, theme }) => theme.control.height[size]};
   border-radius: ${({ theme }) => theme.control.radius};
   border: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.grayViolet[9]}`};
   display: flex;
   align-items: center;
-  padding-left: ${({ size }) => size === "xs" || size === "s" ? "0.385rem" : "0.75rem"};
+  ${({ size, leftContent }) => !leftContent && styled.css`
+      padding-left: ${size === "xs" || size === "s" ? "0.385rem" : "0.75rem"};
+    `};
   gap: 0.5rem;
 
   svg {
@@ -21,9 +30,18 @@ const InputBaseContainer = styled.div.attrs({
 
   &:hover {
     ${({ theme }) => styled.css`
+      border-bottom: ${theme.control.borderWidth} solid
+        ${theme.colors[theme.primaryColor][9]};
+    `};
+
+    ${InputBaseAddonWrapper} {
+      ${({ theme, size }) => styled.css`
+        height: ${polished.math(`${theme.control.height[size]} - 0.0625rem`)};
+        border-bottom-left-radius: ${theme.control.radius};
         border-bottom: ${theme.control.borderWidth} solid
           ${theme.colors[theme.primaryColor][9]};
-      `}
+      `};
+    }
   }
 
   ${({ error, theme }) => error && styled.css`
@@ -37,7 +55,18 @@ const InputBaseContainer = styled.div.attrs({
         ${theme.components.Input.disabledColor}!important;
     `};
 `;
-const InputBaseWrapper = styled.div`
+const InputContentText = styled(Text)`
+  background: ${({ theme }) => theme.components.Input.borderColor};
+  border-right: 1px solid ${({ theme }) => theme.components.Input.disabledColor};
+  height: ${({ theme, size = "m" }) => polished.math(`${theme.control.height[size]} - 0.0625rem`)};
+  display: flex;
+  align-items: center;
+  padding-left: ${({ size }) => size === "xs" || size === "s" ? "0.385rem" : "0.75rem"};
+  padding-right: ${({ size }) => size === "xs" || size === "s" ? "0.385rem" : "0.75rem"};
+`;
+const InputBaseWrapper = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -52,10 +81,21 @@ const InputBaseWrapper = styled.div`
   }
 
   &.quen-ui__input-base--focus-input {
+    ${InputContentText} {
+      height: ${({ theme, size = "m" }) => polished.math(`${theme.control.height[size]} - 0.125rem`)};
+    }
+
+    ${InputBaseAddonWrapper} {
+      height: ${({ theme, size = "m" }) => polished.math(`${theme.control.height[size]} - 0.125rem`)};
+    }
+
     ${InputBaseContainer} {
       border-bottom: ${({ theme }) => `${polished.math(`${theme.control.borderWidth} * 2`)} solid ${theme.colors[theme.primaryColor][9]}`};
     }
   }
 `;
+exports.InputBaseAddonWrapper = InputBaseAddonWrapper;
 exports.InputBaseContainer = InputBaseContainer;
+exports.InputBaseRightAddonWrapper = InputBaseRightAddonWrapper;
 exports.InputBaseWrapper = InputBaseWrapper;
+exports.InputContentText = InputContentText;

package/dist/InputBase/styles.d.ts

@@ -1,7 +1,13 @@
 import { TQuenSize } from '../types/size';
+export declare const InputBaseAddonWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InputBaseRightAddonWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const InputBaseContainer: 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>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, {
     size: TQuenSize;
     error?: string | boolean;
     disabled?: boolean;
+    leftContent?: boolean;
+}>> & string;
+export declare const InputContentText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('..').ITextProps, never>> & string & Omit<import('react').FC<import('..').ITextProps>, keyof import('react').Component<any, {}, any>>;
+export declare const InputBaseWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size: TQuenSize;
 }>> & string;
-export declare const InputBaseWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/InputBase/styles.es.js

@@ -1,16 +1,25 @@
 import styled, { css } from "styled-components";
 import { math } from "polished";
+import Text from "../typography/Text/Text.es.js";
+const InputBaseAddonWrapper = styled.div`
+  margin-inline-start: -0.0625rem;
+`;
+const InputBaseRightAddonWrapper = styled.div`
+  margin-inline-end: -0.75rem;
+`;
 const InputBaseContainer = styled.div.attrs({
   className: "quen-ui__input-base__container"
 }).withConfig({
-  shouldForwardProp: (prop) => !["size", "error", "disabled"].includes(prop)
+  shouldForwardProp: (prop) => !["size", "error", "disabled", "leftContent"].includes(prop)
 })`
   height: ${({ size, theme }) => theme.control.height[size]};
   border-radius: ${({ theme }) => theme.control.radius};
   border: ${({ theme }) => `${theme.control.borderWidth} solid ${theme.colors.grayViolet[9]}`};
   display: flex;
   align-items: center;
-  padding-left: ${({ size }) => size === "xs" || size === "s" ? "0.385rem" : "0.75rem"};
+  ${({ size, leftContent }) => !leftContent && css`
+      padding-left: ${size === "xs" || size === "s" ? "0.385rem" : "0.75rem"};
+    `};
   gap: 0.5rem;
 
   svg {
@@ -19,9 +28,18 @@ const InputBaseContainer = styled.div.attrs({
 
   &:hover {
     ${({ theme }) => css`
+      border-bottom: ${theme.control.borderWidth} solid
+        ${theme.colors[theme.primaryColor][9]};
+    `};
+
+    ${InputBaseAddonWrapper} {
+      ${({ theme, size }) => css`
+        height: ${math(`${theme.control.height[size]} - 0.0625rem`)};
+        border-bottom-left-radius: ${theme.control.radius};
         border-bottom: ${theme.control.borderWidth} solid
           ${theme.colors[theme.primaryColor][9]};
-      `}
+      `};
+    }
   }
 
   ${({ error, theme }) => error && css`
@@ -35,7 +53,18 @@ const InputBaseContainer = styled.div.attrs({
         ${theme.components.Input.disabledColor}!important;
     `};
 `;
-const InputBaseWrapper = styled.div`
+const InputContentText = styled(Text)`
+  background: ${({ theme }) => theme.components.Input.borderColor};
+  border-right: 1px solid ${({ theme }) => theme.components.Input.disabledColor};
+  height: ${({ theme, size = "m" }) => math(`${theme.control.height[size]} - 0.0625rem`)};
+  display: flex;
+  align-items: center;
+  padding-left: ${({ size }) => size === "xs" || size === "s" ? "0.385rem" : "0.75rem"};
+  padding-right: ${({ size }) => size === "xs" || size === "s" ? "0.385rem" : "0.75rem"};
+`;
+const InputBaseWrapper = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["size"].includes(prop)
+})`
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -50,12 +79,23 @@ const InputBaseWrapper = styled.div`
   }
 
   &.quen-ui__input-base--focus-input {
+    ${InputContentText} {
+      height: ${({ theme, size = "m" }) => math(`${theme.control.height[size]} - 0.125rem`)};
+    }
+
+    ${InputBaseAddonWrapper} {
+      height: ${({ theme, size = "m" }) => math(`${theme.control.height[size]} - 0.125rem`)};
+    }
+
     ${InputBaseContainer} {
       border-bottom: ${({ theme }) => `${math(`${theme.control.borderWidth} * 2`)} solid ${theme.colors[theme.primaryColor][9]}`};
     }
   }
 `;
 export {
+  InputBaseAddonWrapper,
   InputBaseContainer,
-  InputBaseWrapper
+  InputBaseRightAddonWrapper,
+  InputBaseWrapper,
+  InputContentText
 };

package/dist/InputBase/types.d.ts

@@ -13,8 +13,12 @@ export interface IInputBaseProps {
     error?: string | boolean;
     /** Left adornment (icon/prefix) */
     leftContent?: ReactNode;
-    /** 	Right adornment (icon/suffix) */
+    /** Determines the visual display mode of leftContent */
+    leftContentVariant?: "icon" | "text" | "addon";
+    /** Right adornment (icon/suffix) */
     rightContent?: ReactNode;
+    /** Determines the visual display mode of rightContent */
+    rightContentVariant?: "icon" | "text" | "addon";
     /** DOM ID for label association */
     id?: string;
     /** Container class name */

package/dist/InputDate/styles.d.ts

@@ -1,5 +1,5 @@
 import { IInputBaseProps } from '../InputBase';
 export declare const InputBaseStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<IInputBaseProps & {
     children?: import('react').ReactNode | undefined;
-}, IInputBaseProps>> & string & Omit<({ label, className, size, id, required, style, error, disabled, children, leftContent, rightContent, ...props }: import('react').PropsWithChildren<IInputBaseProps>) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+}, IInputBaseProps>> & string & Omit<({ label, className, size, id, required, style, error, disabled, children, leftContent, rightContent, leftContentVariant, rightContentVariant, ...props }: import('react').PropsWithChildren<IInputBaseProps>) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
 export declare const InputDateStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;

package/dist/InputNumber/styles.d.ts

@@ -1,7 +1,7 @@
 import { IInputBaseProps } from '../InputBase';
 export declare const InputBaseStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<IInputBaseProps & {
     children?: import('react').ReactNode | undefined;
-}, IInputBaseProps>> & string & Omit<({ label, className, size, id, required, style, error, disabled, children, leftContent, rightContent, ...props }: import('react').PropsWithChildren<IInputBaseProps>) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
+}, IInputBaseProps>> & string & Omit<({ label, className, size, id, required, style, error, disabled, children, leftContent, rightContent, leftContentVariant, rightContentVariant, ...props }: import('react').PropsWithChildren<IInputBaseProps>) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
 export declare const InputNumberStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('rc-input-number').InputNumberProps<import('rc-input-number').ValueType> & {
     children?: React.ReactNode;
 } & {

package/dist/Select/Select.cjs.js

@@ -8,7 +8,6 @@ const useSelect = require("./useSelect.cjs.js");
 const helpers = require("./helpers.cjs.js");
 const Tag = require("../Tag/Tag.cjs.js");
 const iconArrowBottom = require("../assets/icon-arrow-bottom.svg.cjs.js");
-const Flex = require("../Flex/Flex.cjs.js");
 const iconClose = require("../assets/icon-close.svg.cjs.js");
 const SelectComponent = (props) => {
   const {
@@ -62,6 +61,7 @@ const SelectComponent = (props) => {
       error,
       size,
       required,
+      rightContent,
       ...otherProps,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(styles.SelectDropDownStyles, { zIndex }),
@@ -80,10 +80,7 @@ const SelectComponent = (props) => {
             menuItemSelectedIcon: null,
             loading,
             prefix: leftContent,
-            suffixIcon: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { gap: 4, align: "center", children: [
-              rightContent,
-              /* @__PURE__ */ jsxRuntime.jsx(iconArrowBottom, { className: "icon-arrow" })
-            ] }),
+            suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(iconArrowBottom, { className: "icon-arrow" }),
             labelRender: (props2) => /* @__PURE__ */ jsxRuntime.jsx(Text, { size, children: props2.label }),
             open,
             disabled,