@shoplflow/base 0.45.14 → 0.45.15

package/dist/index.cjs

@@ -799,7 +799,9 @@ var Container = styled6__default.default.div`
   ${({ hasChangeAnimation }) => hasChangeAnimation && react$1.css`
       transition:
         width 0.3s ease-in-out,
-        max-width 0.3s ease-in-out;
+        max-width 0.3s ease-in-out,
+        height 0.3s ease-in-out,
+        max-height 0.3s ease-in-out;
     `}
   display: flex;
   flex-direction: column;
@@ -3670,6 +3672,12 @@ var StyledInput = styled6__default.default.input`
     box-sizing: inherit;
   }
 `;
+var LeftElementWrapper2 = styled6__default.default.div`
+  padding: ${({ sizeVar }) => sizeVar === "S" ? "0 0 0 8px" : "0 0 0 12px"};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
 var RightElementWrapper2 = styled6__default.default.div`
   padding: ${({ sizeVar, type, initialType }) => {
   if (initialType === "password" || type === "password") {
@@ -3828,7 +3836,8 @@ var Input = React3.forwardRef(
       minWidth,
       gap,
       initIsFocused,
-      rightSourceStyle
+      rightSourceStyle,
+      leftSource
     } = _b, rest = __objRest(_b, [
       "onFocus",
       "onBlur",
@@ -3852,7 +3861,8 @@ var Input = React3.forwardRef(
       "minWidth",
       "gap",
       "initIsFocused",
-      "rightSourceStyle"
+      "rightSourceStyle",
+      "leftSource"
     ]);
     const [text, setText] = React3.useState("");
     const [isFocused, setIsFocused] = React3.useState(Boolean(initIsFocused));
@@ -3969,6 +3979,7 @@ var Input = React3.forwardRef(
         gap,
         sizeVar,
         children: [
+          leftSource && /* @__PURE__ */ jsxRuntime.jsx(LeftElementWrapper2, { sizeVar, initialType, style: rightSourceStyle, children: leftSource }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: "100%" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               StyledInput,

package/dist/index.d.cts

@@ -1100,7 +1100,7 @@ declare const InputSizeVariants: {
     readonly M: "M";
 };
 declare type InputSizeVariantType = $Values<typeof InputSizeVariants>;
-interface InputProps extends InputOptionProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'width'>, DisableProps, RightElementProps {
+interface InputProps extends InputOptionProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'width'>, DisableProps, LeftElementProps, RightElementProps {
 }
 interface InputOptionProps extends ErrorProps, SizeVariantProps<InputSizeVariantType> {
     width?: string;

package/dist/index.d.ts

@@ -1100,7 +1100,7 @@ declare const InputSizeVariants: {
     readonly M: "M";
 };
 declare type InputSizeVariantType = $Values<typeof InputSizeVariants>;
-interface InputProps extends InputOptionProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'width'>, DisableProps, RightElementProps {
+interface InputProps extends InputOptionProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'width'>, DisableProps, LeftElementProps, RightElementProps {
 }
 interface InputOptionProps extends ErrorProps, SizeVariantProps<InputSizeVariantType> {
     width?: string;

package/dist/index.js

@@ -772,7 +772,9 @@ var Container = styled6.div`
   ${({ hasChangeAnimation }) => hasChangeAnimation && css`
       transition:
         width 0.3s ease-in-out,
-        max-width 0.3s ease-in-out;
+        max-width 0.3s ease-in-out,
+        height 0.3s ease-in-out,
+        max-height 0.3s ease-in-out;
     `}
   display: flex;
   flex-direction: column;
@@ -3643,6 +3645,12 @@ var StyledInput = styled6.input`
     box-sizing: inherit;
   }
 `;
+var LeftElementWrapper2 = styled6.div`
+  padding: ${({ sizeVar }) => sizeVar === "S" ? "0 0 0 8px" : "0 0 0 12px"};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
 var RightElementWrapper2 = styled6.div`
   padding: ${({ sizeVar, type, initialType }) => {
   if (initialType === "password" || type === "password") {
@@ -3801,7 +3809,8 @@ var Input = forwardRef(
       minWidth,
       gap,
       initIsFocused,
-      rightSourceStyle
+      rightSourceStyle,
+      leftSource
     } = _b, rest = __objRest(_b, [
       "onFocus",
       "onBlur",
@@ -3825,7 +3834,8 @@ var Input = forwardRef(
       "minWidth",
       "gap",
       "initIsFocused",
-      "rightSourceStyle"
+      "rightSourceStyle",
+      "leftSource"
     ]);
     const [text, setText] = useState("");
     const [isFocused, setIsFocused] = useState(Boolean(initIsFocused));
@@ -3942,6 +3952,7 @@ var Input = forwardRef(
         gap,
         sizeVar,
         children: [
+          leftSource && /* @__PURE__ */ jsx(LeftElementWrapper2, { sizeVar, initialType, style: rightSourceStyle, children: leftSource }),
           /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "100%" }, children: [
             /* @__PURE__ */ jsx(
               StyledInput,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoplflow/base",
-  "version": "0.45.14",
+  "version": "0.45.15",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {
@@ -99,8 +99,8 @@
     "react-dom": "^18.2.0",
     "simplebar-react": "^3.2.6",
     "@shoplflow/hada-assets": "^0.1.10",
-    "@shoplflow/utils": "^0.7.2",
-    "@shoplflow/shopl-assets": "^0.12.33"
+    "@shoplflow/shopl-assets": "^0.12.34",
+    "@shoplflow/utils": "^0.7.2"
   },
   "homepage": "https://github.com/shopl/shoplflow#readme",
   "scripts": {