@quen-ui/components 1.0.1 → 1.2.0

package/dist/Card/styles.cjs.js

@@ -26,10 +26,16 @@ const getSizing = (size) => {
       `;
   }
 };
-const CardStyled = styled.div.attrs({ className: "quen-ui__card" })`
+const CardStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["shadow"].includes(prop)
+}).attrs({ className: "quen-ui__card" })`
   border-radius: ${({ theme }) => theme.components.Card.radius};
   border: 1px solid ${({ theme }) => theme.components.Card.borderColor};
-  max-width: 350px;
+  width: 350px;
+  
+  ${({ shadow, theme }) => shadow && styled.css`
+    box-shadow: ${theme.components.Card.shadow};
+  `};
 `;
 const CardHeaderStyled = styled.div`
   ${({ size }) => getSizing(size)};
@@ -46,7 +52,7 @@ const CardContentStyled = styled.div`
 const CardActionsStyled = styled.div`
   ${({ size }) => getSizing(size)};
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
 `;
 exports.CardActionsStyled = CardActionsStyled;

package/dist/Card/styles.d.ts

@@ -1,5 +1,7 @@
 import { TQuenSize } from '../types/size';
-export declare const CardStyled: 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>, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>>, never>, never>> & string;
+export declare const CardStyled: 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>, {
+    shadow?: boolean;
+}>> & string;
 export declare const CardHeaderStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     size: TQuenSize;
 }>> & string;

package/dist/Card/styles.es.js

@@ -24,10 +24,16 @@ const getSizing = (size) => {
       `;
   }
 };
-const CardStyled = styled.div.attrs({ className: "quen-ui__card" })`
+const CardStyled = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["shadow"].includes(prop)
+}).attrs({ className: "quen-ui__card" })`
   border-radius: ${({ theme }) => theme.components.Card.radius};
   border: 1px solid ${({ theme }) => theme.components.Card.borderColor};
-  max-width: 350px;
+  width: 350px;
+  
+  ${({ shadow, theme }) => shadow && css`
+    box-shadow: ${theme.components.Card.shadow};
+  `};
 `;
 const CardHeaderStyled = styled.div`
   ${({ size }) => getSizing(size)};
@@ -44,7 +50,7 @@ const CardContentStyled = styled.div`
 const CardActionsStyled = styled.div`
   ${({ size }) => getSizing(size)};
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
 `;
 export {

package/dist/Card/types.d.ts

@@ -24,5 +24,7 @@ export interface ICardProps {
     leftContent?: React.ReactNode;
     style?: React.CSSProperties;
     onClickExtra?: () => void;
+    /** Show shadow */
+    shadow?: boolean;
     [key: string]: any;
 }

package/dist/Dropdown/Dropdown.cjs.js

@@ -14,68 +14,72 @@ const Dropdown = ({
   width,
   anchorRef,
   onClickClose,
+  onClickOutside,
+  notCloseOutside,
   ...props
 }) => {
-  const [anchorRect, setAnchorRect] = React.useState(helpers.DEFAULT_RECT_ELEMENT);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const isControlled = typeof open !== "undefined";
+  const openState = isControlled ? open : isOpen;
   const dropdownRef = React.useRef(null);
   const [containerDropdown, setContainerDropdown] = React.useState(null);
+  const [anchorRect, setAnchorRect] = React.useState(helpers.DEFAULT_RECT_ELEMENT);
+  const lastInternalMousedownRef = React.useRef(0);
   const [state, toggle] = reactTransitionState.useTransitionState({
     timeout: 500,
     unmountOnExit: true,
-    initialEntered: open
+    initialEntered: openState
   });
+  React.useEffect(() => {
+    if (isControlled) toggle(open);
+  }, [open, isControlled, toggle]);
+  const calculateAnchorRect = React.useCallback(() => {
+    if (anchorRef.current) {
+      setAnchorRect(helpers.calculateRectElement(anchorRef.current));
+    }
+  }, [anchorRef]);
+  const handleInternalMouseDown = React.useCallback(
+    (e) => {
+      lastInternalMousedownRef.current = e.timeStamp || Date.now();
+    },
+    []
+  );
   hooks.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(helpers.calculateRectElement(anchorRef.current));
-    }
-  };
-  const handleClickAnchorRef = () => {
-    toggle();
-  };
+  React.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]);
+  React.useLayoutEffect(() => {
+    calculateAnchorRect();
+  }, [state, calculateAnchorRect]);
   React.useEffect(() => {
     window.addEventListener("resize", calculateAnchorRect);
     window.addEventListener("scroll", calculateAnchorRect, true);
     return () => {
       window.removeEventListener("resize", calculateAnchorRect);
-      window.addEventListener("scroll", calculateAnchorRect, true);
-    };
-  }, [anchorRect]);
-  React.useEffect(() => {
-    if (typeof open === "undefined") {
-      anchorRef.current?.addEventListener("click", handleClickAnchorRef);
-    }
-    return () => {
-      anchorRef.current?.removeEventListener("click", handleClickAnchorRef);
+      window.removeEventListener("scroll", calculateAnchorRect, true);
     };
-  }, [anchorRef]);
-  React.useEffect(() => {
-    if (typeof open !== "undefined") {
-      toggle(open);
-    }
-  }, [open]);
-  React.useLayoutEffect(() => {
-    calculateAnchorRect();
-  }, [state]);
+  }, [calculateAnchorRect]);
   React.useEffect(() => {
-    const container = document.getElementsByTagName("body").item(0);
-    setContainerDropdown(container);
+    if (typeof document !== "undefined") setContainerDropdown(document.body);
   }, []);
-  if (disabled) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(styles.DropdownWrapper, { children: state.isEnter && containerDropdown && reactDom.createPortal(
+  if (disabled) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(styles.DropdownWrapper, { onMouseDown: handleInternalMouseDown, children: state.isEnter && containerDropdown && reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(
       DropdownPortal,
       {

package/dist/Dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
 import { ReactNode } from 'react';
 import { IDropdownProps } from './types';
-declare const Dropdown: <ITEM>({ disabled, open, direction, width, anchorRef, onClickClose, ...props }: IDropdownProps<ITEM>) => ReactNode;
+declare const Dropdown: <ITEM>({ disabled, open, direction, width, anchorRef, onClickClose, onClickOutside, notCloseOutside, ...props }: IDropdownProps<ITEM>) => ReactNode;
 export default Dropdown;

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/Form/Form.cjs.js

@@ -40,7 +40,7 @@ const Form = ({
   };
   React.useEffect(() => {
     form.setSubmitCallback(() => handleSubmit);
-  }, []);
+  }, [form.getFieldsValue, form.getFieldsError]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     FormContext.Provider,
     {

package/dist/Form/Form.es.js

@@ -38,7 +38,7 @@ const Form = ({
   };
   useEffect(() => {
     form.setSubmitCallback(() => handleSubmit);
-  }, []);
+  }, [form.getFieldsValue, form.getFieldsError]);
   return /* @__PURE__ */ jsx(
     FormContext.Provider,
     {

package/dist/Image/styles.cjs.js

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styled = require("styled-components");
 const Button = require("../Button/Button.cjs.js");
-const ImageContainer = styled.div`
+const ImageContainer = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["width", "height", "preview"].includes(prop)
+})`
   position: relative;
   width: ${({ width }) => typeof width === "number" ? `${width}px` : width || "auto"};
   height: ${({ height }) => typeof height === "number" ? `${height}px` : height || "auto"};

package/dist/Image/styles.es.js

@@ -1,6 +1,8 @@
 import styled from "styled-components";
 import Button from "../Button/Button.es.js";
-const ImageContainer = styled.div`
+const ImageContainer = styled.div.withConfig({
+  shouldForwardProp: (prop) => !["width", "height", "preview"].includes(prop)
+})`
   position: relative;
   width: ${({ width }) => typeof width === "number" ? `${width}px` : width || "auto"};
   height: ${({ height }) => typeof height === "number" ? `${height}px` : height || "auto"};

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