@verma-consulting/design-library 0.1.53 → 0.1.55

package/dist/index.mjs

@@ -1084,14 +1084,45 @@ var EmptyState = ({ label, m = 8, icon }) => {
 var EmptyState_default = EmptyState;
 
 // src/Pill.tsx
-import { Button, Typography as Typography4, Icon } from "@mui/material";
+import { Box as Box7, Button, Icon, Typography as Typography4 } from "@mui/material";
 import { alpha as alpha8, useTheme as useTheme7 } from "@mui/material/styles";
 import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+function renderIconSlot(node, side) {
+  if (node == null) return null;
+  const spacing = side === "left" ? { pr: 1 } : { ml: 1 };
+  if (typeof node === "string") {
+    return /* @__PURE__ */ jsx11(
+      Icon,
+      {
+        baseClassName: "material-icons",
+        fontSize: "small",
+        color: "inherit",
+        sx: spacing,
+        "data-testid": side === "left" ? "pill-left-icon" : "pill-right-icon",
+        children: node
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx11(
+    Box7,
+    {
+      component: "span",
+      sx: {
+        display: "inline-flex",
+        alignItems: "center",
+        color: "inherit",
+        ...spacing
+      },
+      "data-testid": side === "left" ? "pill-left-icon" : "pill-right-icon",
+      children: node
+    }
+  );
+}
 var Pill = ({
-  variant = "filter",
+  variant: _variant = "filter",
   leftIcon = null,
   rightIcon = null,
-  color = null,
+  color,
   isSelected = false,
   onClick = () => null,
   label = "",
@@ -1102,7 +1133,7 @@ var Pill = ({
     Button,
     {
       variant: isSelected ? "contained" : "outlined",
-      color: color || "primary",
+      color: color != null ? color : "primary",
       sx: {
         ...glassSurface(theme),
         borderRadius: 16,
@@ -1119,27 +1150,9 @@ var Pill = ({
       onClick,
       disabled,
       children: /* @__PURE__ */ jsxs6("div", { style: { display: "flex", alignItems: "center" }, children: [
-        leftIcon && /* @__PURE__ */ jsx11(
-          Icon,
-          {
-            className: leftIcon,
-            fontSize: 14,
-            color: "inherit",
-            style: { paddingRight: 8 },
-            "data-testid": "pill-left-icon"
-          }
-        ),
+        renderIconSlot(leftIcon, "left"),
         /* @__PURE__ */ jsx11(Typography4, { variant: "subtitle2", color: "inherit", fontWeight: 700, children: label }),
-        rightIcon && /* @__PURE__ */ jsx11(
-          Icon,
-          {
-            className: rightIcon,
-            fontSize: 14,
-            color: "inherit",
-            style: { marginLeft: 8 },
-            "data-testid": "pill-right-icon"
-          }
-        )
+        renderIconSlot(rightIcon, "right")
       ] })
     }
   );
@@ -1578,7 +1591,7 @@ var SearchableSelect_default = SearchableSelect;
 import {
   Drawer,
   Typography as Typography6,
-  Box as Box7,
+  Box as Box8,
   IconButton as IconButton6,
   Grid as Grid2,
   useTheme as useTheme10,
@@ -1636,7 +1649,7 @@ var FormDrawer = ({
       ],
       children: [
         /* @__PURE__ */ jsx16(
-          Box7,
+          Box8,
           {
             sx: {
               position: "relative",
@@ -1667,7 +1680,7 @@ var FormDrawer = ({
           }
         ),
         /* @__PURE__ */ jsx16(
-          Box7,
+          Box8,
           {
             sx: {
               flex: 1,
@@ -1680,7 +1693,7 @@ var FormDrawer = ({
           }
         ),
         actions != null ? /* @__PURE__ */ jsx16(
-          Box7,
+          Box8,
           {
             sx: {
               flexShrink: 0,
@@ -1706,7 +1719,7 @@ import {
 } from "react";
 import {
   Autocomplete as Autocomplete2,
-  Box as Box8,
+  Box as Box9,
   Stack,
   TextField as TextField2,
   useTheme as useTheme11,
@@ -1949,7 +1962,7 @@ var PhoneNumberField = ({
   };
   const selectedCountry = countries.find((c) => c.code === country);
   return /* @__PURE__ */ jsx17(
-    Box8,
+    Box9,
     {
       ref: wrapperRef,
       onFocusCapture: () => setIsFocused(true),
@@ -1998,8 +2011,8 @@ var PhoneNumberField = ({
                     whiteSpace: "nowrap"
                   }
                 },
-                renderOption: (props, option) => /* @__PURE__ */ createElement(Box8, { component: "li", ...props, key: option.code }, /* @__PURE__ */ jsx17(
-                  Box8,
+                renderOption: (props, option) => /* @__PURE__ */ createElement(Box9, { component: "li", ...props, key: option.code }, /* @__PURE__ */ jsx17(
+                  Box9,
                   {
                     component: "img",
                     loading: "lazy",
@@ -2064,7 +2077,7 @@ var PhoneNumberField_default = PhoneNumberField;
 import { useEffect as useEffect5, useState as useState6 } from "react";
 import {
   Autocomplete as Autocomplete3,
-  Box as Box9,
+  Box as Box10,
   TextField as TextField3,
   Typography as Typography7,
   FormLabel as FormLabel2
@@ -2122,7 +2135,7 @@ var CountrySelect = ({
   const selectedOption = COUNTRIES.find((country) => country.code === value);
   if (!editMode) {
     return /* @__PURE__ */ jsxs11(
-      Box9,
+      Box10,
       {
         component: "div",
         onClick: () => {
@@ -2136,7 +2149,7 @@ var CountrySelect = ({
         children: [
           /* @__PURE__ */ jsx18(FormLabel2, { className: classes.formLabel, children: label }),
           /* @__PURE__ */ jsxs11(
-            Box9,
+            Box10,
             {
               sx: {
                 display: "flex",
@@ -2146,7 +2159,7 @@ var CountrySelect = ({
               },
               children: [
                 selectedOption ? /* @__PURE__ */ jsx18(
-                  Box9,
+                  Box10,
                   {
                     component: "img",
                     loading: "lazy",
@@ -2211,7 +2224,7 @@ var CountrySelect = ({
           }
         }
       },
-      renderOption: (props, option) => /* @__PURE__ */ createElement2(Box9, { component: "li", ...props, key: option.code }, /* @__PURE__ */ jsx18(
+      renderOption: (props, option) => /* @__PURE__ */ createElement2(Box10, { component: "li", ...props, key: option.code }, /* @__PURE__ */ jsx18(
         "img",
         {
           loading: "lazy",
@@ -2238,7 +2251,7 @@ var CountrySelect = ({
             ...params.InputProps,
             startAdornment: /* @__PURE__ */ jsxs11(Fragment3, { children: [
               selectedOption ? /* @__PURE__ */ jsx18(
-                Box9,
+                Box10,
                 {
                   component: "img",
                   loading: "lazy",
@@ -2288,7 +2301,7 @@ import {
   useRef as useRef5,
   useState as useState7
 } from "react";
-import { Box as Box10, TextField as TextField4 } from "@mui/material";
+import { Box as Box11, TextField as TextField4 } from "@mui/material";
 import { jsx as jsx19 } from "react/jsx-runtime";
 function toCells(s, len) {
   const slice = (s || "").slice(0, len);
@@ -2408,7 +2421,7 @@ var OTPField = ({
   };
   const inputType = secret ? "password" : type === "numeric" ? "tel" : "text";
   return /* @__PURE__ */ jsx19(
-    Box10,
+    Box11,
     {
       sx: [
         {