@dmsi/wedgekit-react 0.0.229 → 0.0.231

package/dist/components/Upload.cjs

@@ -62,7 +62,7 @@ __export(Upload_exports, {
   Upload: () => Upload
 });
 module.exports = __toCommonJS(Upload_exports);
-var import_clsx5 = __toESM(require("clsx"), 1);
+var import_clsx6 = __toESM(require("clsx"), 1);
 
 // src/classNames.ts
 var import_clsx = __toESM(require("clsx"), 1);
@@ -417,8 +417,288 @@ var Button = (_a) => {
 };
 Button.displayName = "Button";
 
-// src/components/Upload.tsx
+// src/components/Stack.tsx
+var import_clsx5 = __toESM(require("clsx"), 1);
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var getFlexClassNames = ({ items, justify, grow }) => (0, import_clsx5.default)(
+  "flex",
+  items === "start" && "items-start",
+  grow && "grow",
+  items === "start" && "items-start",
+  items === "center" && "items-center",
+  items === "end" && "items-end",
+  items === "start-center" && "items-start desktop:items-center",
+  justify === "start" && "justify-start",
+  justify === "center" && "justify-center",
+  justify === "end" && "justify-end",
+  justify === "end" && "justify-end",
+  justify === "between" && "justify-between",
+  justify === "around" && "justify-around"
+);
+var useGapClassNames = (sizing) => {
+  return (0, import_clsx5.default)(
+    sizing === "layout-group" && "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-compact-layout-group-gap",
+    sizing === "layout" && "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-compact-layout-gap",
+    sizing === "container" && "gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-compact-container-gap",
+    sizing === "component" && "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-compact-component-gap"
+  );
+};
+var Stack = (_a) => {
+  var _b = _a, {
+    children,
+    items,
+    justify,
+    grow,
+    padding,
+    paddingX,
+    paddingY,
+    margin,
+    marginX,
+    marginY,
+    horizontal,
+    horizontalMobile,
+    elevation = 0,
+    rounded,
+    centered,
+    width,
+    minHeight,
+    maxWidth,
+    minWidth,
+    height,
+    maxHeight,
+    borderColor,
+    backgroundColor,
+    sizing = "none",
+    overflowY = "inherit",
+    overflowX = "inherit",
+    flexShrink,
+    flexGrow,
+    position,
+    top,
+    left,
+    id,
+    noGap,
+    marginTop,
+    marginBottom,
+    testid
+  } = _b, props = __objRest(_b, [
+    "children",
+    "items",
+    "justify",
+    "grow",
+    "padding",
+    "paddingX",
+    "paddingY",
+    "margin",
+    "marginX",
+    "marginY",
+    "horizontal",
+    "horizontalMobile",
+    "elevation",
+    "rounded",
+    "centered",
+    "width",
+    "minHeight",
+    "maxWidth",
+    "minWidth",
+    "height",
+    "maxHeight",
+    "borderColor",
+    "backgroundColor",
+    "sizing",
+    "overflowY",
+    "overflowX",
+    "flexShrink",
+    "flexGrow",
+    "position",
+    "top",
+    "left",
+    "id",
+    "noGap",
+    "marginTop",
+    "marginBottom",
+    "testid"
+  ]);
+  const flexClassNames = getFlexClassNames({ items, justify, grow });
+  const gapClassNames = useGapClassNames(sizing);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    __spreadProps(__spreadValues({
+      id,
+      "data-testid": testid
+    }, props), {
+      style: {
+        height: height === "full" ? "100%" : height !== void 0 ? `${height}px` : void 0,
+        maxHeight: maxHeight !== void 0 ? `${maxHeight}px` : void 0,
+        minHeight: minHeight !== void 0 ? `${minHeight}px` : void 0,
+        maxWidth: maxWidth !== void 0 ? `${maxWidth}px` : void 0,
+        width: width !== void 0 && typeof width === "number" ? `${width}px` : void 0,
+        minWidth: minWidth !== void 0 ? `${minWidth}px` : void 0,
+        border: borderColor ? `1px solid var(--color-${borderColor})` : void 0,
+        backgroundColor: backgroundColor ? `var(--color-${backgroundColor})` : void 0,
+        flexGrow: flexGrow !== void 0 ? flexGrow : void 0,
+        flexShrink: flexShrink !== void 0 ? flexShrink : void 0,
+        position: position !== void 0 ? position : void 0,
+        top: top !== void 0 ? `${top}px` : void 0,
+        left: left !== void 0 ? `${left}px` : void 0
+      },
+      className: (0, import_clsx5.default)(
+        "scrollbar-thin",
+        "max-w-screen",
+        width !== "fit" && "w-full",
+        width === "full" && "w-full",
+        width === "max" && "w-max",
+        centered && "mx-auto",
+        overflowY == "auto" && "overflow-y-auto",
+        overflowY == "hidden" && "overflow-y-hidden",
+        overflowY == "scroll" && "overflow-y-scroll",
+        overflowX == "auto" && "overflow-x-auto",
+        overflowX == "hidden" && "overflow-x-hidden",
+        overflowX == "scroll" && "overflow-x-scroll",
+        padding && sizing === "container" && "p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding",
+        padding && sizing === "layout" && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding",
+        padding && sizing === "layout-group" && "p-mobile-layout-group-padding desktop:p-desktop-layout-group-padding compact:p-desktop-compact-layout-group-padding",
+        padding && sizing === "component" && "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+        paddingX && sizing === "container" && "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding",
+        paddingX && sizing === "layout" && "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding",
+        paddingX && sizing === "layout-group" && "px-mobile-layout-group-padding desktop:px-desktop-layout-group-padding compact:px-desktop-compact-layout-group-padding",
+        paddingX && sizing === "component" && "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding",
+        paddingY && sizing === "container" && "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding",
+        paddingY && sizing === "layout" && "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding",
+        paddingY && sizing === "layout-group" && paddingYUsingLayoutGroupGap,
+        paddingY && sizing === "component" && "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding",
+        margin && sizing === "container" && "m-mobile-container-padding desktop:m-desktop-container-padding compact:m-compact-container-padding",
+        marginX && sizing === "container" && "mx-mobile-container-padding desktop:mx-desktop-container-padding compact:mx-compact-container-padding",
+        marginTop && sizing === "container" && "mt-mobile-container-padding desktop:mt-desktop-container-padding compact:mt-compact-container-padding",
+        marginBottom && sizing === "container" && "mb-mobile-container-padding desktop:mb-desktop-container-padding compact:mb-compact-container-padding",
+        marginY && sizing === "container" && "my-mobile-container-padding desktop:my-desktop-container-padding compact:my-compact-container-padding",
+        horizontal ? "desktop:flex-row" : "desktop:flex-col",
+        horizontalMobile ? "flex-row" : "flex-col",
+        flexClassNames,
+        !noGap && gapClassNames,
+        elevation === 0 && "shadow-none",
+        elevation === 2 && "shadow-2",
+        elevation === 4 && "shadow-4",
+        elevation === 16 && "shadow-16",
+        rounded && "rounded"
+      ),
+      children
+    })
+  );
+};
+
+// src/components/Spinner.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Spinner = ({ size = "small", testid }) => {
+  const dimension = size === "large" ? 48 : 24;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "svg",
+    {
+      "data-testid": testid,
+      width: dimension,
+      height: dimension,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "#1D1E1E",
+      className: "animate-spin",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "4", r: "2", opacity: "1", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "0s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.875s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.75s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.625s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.5s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.375s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.25s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            begin: "-0.125s",
+            dur: "1s",
+            from: "1",
+            to: "0",
+            repeatCount: "indefinite"
+          }
+        ) })
+      ]
+    }
+  );
+};
+Spinner.displayName = "Spinner";
+
+// src/components/Upload.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function Upload(props) {
   const _a = props, {
     isLoading,
@@ -437,11 +717,11 @@ function Upload(props) {
     "onRemove",
     "testid"
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "label",
     {
       style: __spreadValues({}, style),
-      className: (0, import_clsx5.default)(
+      className: (0, import_clsx6.default)(
         "border border-dashed border-border-primary-normal",
         "flex flex-col items-center justify-center",
         "p-6",
@@ -452,7 +732,7 @@ function Upload(props) {
       ),
       "data-testid": testid,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "input",
           __spreadProps(__spreadValues({}, rest), {
             type: "file",
@@ -460,16 +740,37 @@ function Upload(props) {
             "data-testid": testid ? `${testid}-file-input` : void 0
           })
         ),
-        isLoading && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { testid: testid ? `${testid}-loading-icon` : void 0, name: "cached", className: "text-icon-primary-normal animate-spin" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Paragraph, { testid: testid ? `${testid}-loading-text` : void 0, color: "text-secondary-normal", children: "Loading..." })
-        ] }),
-        !value && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { testid: testid ? `${testid}-icon` : void 0, name: "cloud_upload", className: "text-icon-primary-normal" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Paragraph, { testid: testid ? `${testid}-text` : void 0, color: errorText ? "text-primary-error" : "text-secondary-normal", children: errorText ? errorText : text })
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          Stack,
+          {
+            centered: true,
+            items: "center",
+            justify: "center",
+            sizing: "container",
+            padding: true,
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Spinner, { size: "large" })
+          }
+        ),
+        !value && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Icon,
+            {
+              testid: testid ? `${testid}-icon` : void 0,
+              name: "cloud_upload",
+              className: "text-icon-primary-normal"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            Paragraph,
+            {
+              testid: testid ? `${testid}-text` : void 0,
+              color: errorText ? "text-primary-error" : "text-secondary-normal",
+              children: errorText ? errorText : text
+            }
+          )
         ] }),
-        value && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        value && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "img",
             {
               "data-testid": testid ? `${testid}-uploaded-image` : void 0,
@@ -478,7 +779,7 @@ function Upload(props) {
               className: "absolute inset-0 object-contain object-center max-h-full max-w-full self-center justify-self-center"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             Button,
             {
               testid: testid ? `${testid}-remove-image-button` : void 0,
@@ -488,7 +789,7 @@ function Upload(props) {
                 onRemove == null ? void 0 : onRemove();
               },
               iconOnly: true,
-              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { name: "delete" })
+              leftIcon: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "delete" })
             }
           ) })
         ] })

package/dist/components/Upload.js

@@ -1,3 +1,9 @@
+import {
+  Spinner
+} from "../chunk-PLMGI5K5.js";
+import {
+  Stack
+} from "../chunk-BOWQUDUU.js";
 import {
   Paragraph
 } from "../chunk-CJELWEO2.js";
@@ -60,13 +66,34 @@ function Upload(props) {
             "data-testid": testid ? `${testid}-file-input` : void 0
           })
         ),
-        isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Icon, { testid: testid ? `${testid}-loading-icon` : void 0, name: "cached", className: "text-icon-primary-normal animate-spin" }),
-          /* @__PURE__ */ jsx(Paragraph, { testid: testid ? `${testid}-loading-text` : void 0, color: "text-secondary-normal", children: "Loading..." })
-        ] }),
+        isLoading && /* @__PURE__ */ jsx(
+          Stack,
+          {
+            centered: true,
+            items: "center",
+            justify: "center",
+            sizing: "container",
+            padding: true,
+            children: /* @__PURE__ */ jsx(Spinner, { size: "large" })
+          }
+        ),
         !value && !isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(Icon, { testid: testid ? `${testid}-icon` : void 0, name: "cloud_upload", className: "text-icon-primary-normal" }),
-          /* @__PURE__ */ jsx(Paragraph, { testid: testid ? `${testid}-text` : void 0, color: errorText ? "text-primary-error" : "text-secondary-normal", children: errorText ? errorText : text })
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              testid: testid ? `${testid}-icon` : void 0,
+              name: "cloud_upload",
+              className: "text-icon-primary-normal"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Paragraph,
+            {
+              testid: testid ? `${testid}-text` : void 0,
+              color: errorText ? "text-primary-error" : "text-secondary-normal",
+              children: errorText ? errorText : text
+            }
+          )
         ] }),
         value && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(

package/dist/components/index.cjs

@@ -1361,6 +1361,7 @@ var InputBase = (_a) => {
     removeBorder,
     wrapperClassName,
     focus,
+    secondaryIconColor,
     fullWidth = true
   } = _b, props = __objRest(_b, [
     "id",
@@ -1380,6 +1381,7 @@ var InputBase = (_a) => {
     "removeBorder",
     "wrapperClassName",
     "focus",
+    "secondaryIconColor",
     "fullWidth"
   ]);
   const attributes = {
@@ -1445,6 +1447,7 @@ var InputBase = (_a) => {
             Label,
             {
               id: id ? `${id}-label` : void 0,
+              color: error ? "text-primary-error" : void 0,
               className: (0, import_clsx7.default)(
                 props.disabled || props.readOnly ? "cursor-default" : "cursor-pointer"
               ),
@@ -1496,11 +1499,18 @@ var InputBase = (_a) => {
                   )
                 })
               ),
-              after
+              secondaryIconColor ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "contents text-text-secondary-normal", children: after }) : after
             ]
           }
         ),
-        caption && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: id ? `${id}-caption` : void 0, "data-testid": testid ? `${testid}-caption` : void 0, children: caption })
+        caption && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            id: id ? `${id}-caption` : void 0,
+            "data-testid": testid ? `${testid}-caption` : void 0,
+            children: caption
+          }
+        )
       ]
     }
   );

package/dist/components/index.js

@@ -3,7 +3,7 @@ import {
 } from "../chunk-3WNXMCZV.js";
 import {
   Select
-} from "../chunk-2RUQFWER.js";
+} from "../chunk-2VRZB2A4.js";
 import {
   Checkbox
 } from "../chunk-E3UOI2D2.js";
@@ -12,7 +12,7 @@ import {
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader
-} from "../chunk-XOUEHNCC.js";
+} from "../chunk-Q7ETEWBW.js";
 import {
   Menu
 } from "../chunk-NA3ODQCN.js";
@@ -28,10 +28,10 @@ import "../chunk-VXWSAIB5.js";
 import "../chunk-T3F37S6Z.js";
 import {
   Search
-} from "../chunk-2WRRRPEB.js";
+} from "../chunk-7BBXPM5C.js";
 import {
   Input
-} from "../chunk-7W4I2NK3.js";
+} from "../chunk-5JVMULVC.js";
 import "../chunk-5UH6QUFB.js";
 import {
   Label

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dmsi/wedgekit-react",
   "private": false,
-  "version": "0.0.229",
+  "version": "0.0.231",
   "type": "module",
   "scripts": {
     "build": "tsup",

package/src/components/DateInput.tsx

@@ -248,6 +248,7 @@ export const DateInput = ({
         onBlur={handleBlur}
         onKeyDown={handleKeyDown}
         label={label}
+        secondaryIconColor
       />
       {visible &&
         !readOnly &&

package/src/components/DateRangeInput.tsx

@@ -594,6 +594,7 @@ export const DateRangeInput = ({
         onBlur={handleBlur}
         onKeyDown={handleKeyDown}
         label={label}
+        secondaryIconColor
       />
       {visible &&
         !readOnly &&

package/src/components/Input.tsx

@@ -56,6 +56,7 @@ export type InputBaseProps = {
   removeBorder?: boolean;
   wrapperClassName?: string;
   focus?: boolean;
+  secondaryIconColor?: boolean;
   fullWidth?: boolean; // If true, input takes full width of the container
 } & InputFormatting &
   Omit<ComponentProps<"input">, "align" | "id">;
@@ -78,6 +79,7 @@ export const InputBase = ({
   removeBorder,
   wrapperClassName,
   focus,
+  secondaryIconColor,
   fullWidth = true,
   ...props
 }: InputBaseProps) => {
@@ -151,6 +153,7 @@ export const InputBase = ({
         <div className={clsx("flex items-center", componentGap)}>
           <Label
             id={id ? `${id}-label` : undefined}
+            color={error ? "text-primary-error" : undefined}
             className={clsx(
               props.disabled || props.readOnly
                 ? "cursor-default"
@@ -205,10 +208,21 @@ export const InputBase = ({
           )}
         />
 
-        {after}
+        {secondaryIconColor ? (
+          <span className="contents text-text-secondary-normal">{after}</span>
+        ) : (
+          after
+        )}
       </div>
 
-      {caption && <div id={id ? `${id}-caption` : undefined} data-testid={testid ? `${testid}-caption` : undefined}>{caption}</div>}
+      {caption && (
+        <div
+          id={id ? `${id}-caption` : undefined}
+          data-testid={testid ? `${testid}-caption` : undefined}
+        >
+          {caption}
+        </div>
+      )}
     </label>
   );
 };
@@ -225,7 +239,7 @@ export const Input = ({
   id,
   testid,
   ...props
-}: Omit<ComponentProps<"input">,"onChange" | "align" | "children"> &
+}: Omit<ComponentProps<"input">, "onChange" | "align" | "children"> &
   InputBaseProps & {
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     onClear?: () => void;
@@ -240,7 +254,7 @@ export const Input = ({
   }, [propValue]);
 
   useEffect(() => {
-    if (variant !== 'currency') {
+    if (variant !== "currency") {
       return;
     }
 
@@ -254,7 +268,7 @@ export const Input = ({
 
     setInternalValue(formatted);
     setDisplayValue(formatCurrencyDisplay(formatted));
-  }, [])
+  }, []);
 
   const getInputProps = () => {
     const baseProps = {