@plutonhq/core-frontend 0.0.1

package/dist/components/common/form/PasswordField/PasswordField.module.scss

@@ -0,0 +1,78 @@
+.inputField {
+   .input {
+      padding: 8px 12px;
+      border: 1px solid var(--field-line-color);
+      border-radius: 6px;
+      background: transparent;
+      color: var(--content-text-color);
+      font-size: 0.75rem;
+      width: 200px;
+      box-sizing: border-box;
+      transition: all 0.2s ease;
+
+      &:focus {
+         outline: none;
+         border-color: var(--line-active-color);
+      }
+
+      &::placeholder {
+         color: var(--content-text-color-light);
+      }
+      &.disabled {
+         background-color: var(--line-color);
+      }
+   }
+
+   .viewPassBtn {
+      position: absolute;
+      right: 5px;
+      z-index: 2;
+      opacity: 0.3;
+   }
+
+   &.inputFieldLarge {
+      .input {
+         padding: 15px;
+         font-size: 0.8rem;
+      }
+   }
+
+   &.inputFieldInline {
+      .fieldInner {
+         display: flex;
+         flex-direction: row;
+         justify-content: space-between;
+         gap: 8px;
+      }
+      .input {
+         width: 50%;
+      }
+   }
+
+   &.inputFieldFull {
+      width: 100%;
+      .fieldInner {
+         display: flex;
+         flex-direction: column;
+         gap: 8px;
+         align-items: flex-start;
+      }
+      .input {
+         width: 100%;
+      }
+   }
+
+   &.fieldHasError {
+      input {
+         border-color: var(--error-bg-color-active);
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .inputField {
+      .input {
+         width: 100%;
+      }
+   }
+}

package/dist/components/common/form/PasswordField/PasswordField.module.scss.js

@@ -0,0 +1,24 @@
+const d = "PasswordField-module__inputField___Wbld7", e = "PasswordField-module__input___1gyCD", i = "PasswordField-module__disabled___mX2JE", l = "PasswordField-module__viewPassBtn___O5-V6", _ = "PasswordField-module__inputFieldLarge___zt2Dw", s = "PasswordField-module__inputFieldInline___Kiot2", n = "PasswordField-module__fieldInner___NdtMz", t = "PasswordField-module__inputFieldFull___EwIxQ", o = "PasswordField-module__fieldHasError___KXjth", u = {
+  inputField: d,
+  input: e,
+  disabled: i,
+  viewPassBtn: l,
+  inputFieldLarge: _,
+  inputFieldInline: s,
+  fieldInner: n,
+  inputFieldFull: t,
+  fieldHasError: o
+};
+export {
+  u as default,
+  i as disabled,
+  o as fieldHasError,
+  n as fieldInner,
+  e as input,
+  d as inputField,
+  t as inputFieldFull,
+  s as inputFieldInline,
+  _ as inputFieldLarge,
+  l as viewPassBtn
+};
+//# sourceMappingURL=PasswordField.module.scss.js.map

package/dist/components/common/form/PasswordField/PasswordField.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordField.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/components/common/form/RadioIconSelect/RadioIconSelect.d.ts

@@ -0,0 +1,20 @@
+interface RadioIconSelectProps {
+    label: string;
+    options: {
+        label: string;
+        description: string;
+        value: string;
+        icon: string;
+        disabled?: boolean;
+    }[];
+    fieldValue: string;
+    layout?: 'grid' | 'list';
+    disabled?: boolean;
+    showDescription?: boolean;
+    hint?: string;
+    inline?: boolean;
+    onUpdate: (type: string) => void;
+}
+declare const RadioIconSelect: ({ label, options, fieldValue, showDescription, disabled, hint, inline, layout, onUpdate, }: RadioIconSelectProps) => import("react/jsx-runtime").JSX.Element;
+export default RadioIconSelect;
+//# sourceMappingURL=RadioIconSelect.d.ts.map

package/dist/components/common/form/RadioIconSelect/RadioIconSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioIconSelect.d.ts","sourceRoot":"","sources":["../../../../../src/components/common/form/RadioIconSelect/RadioIconSelect.tsx"],"names":[],"mappings":"AAIA,UAAU,oBAAoB;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;IACnG,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,QAAA,MAAM,eAAe,GAAI,4FAUtB,oBAAoB,4CAuCtB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/common/form/RadioIconSelect/RadioIconSelect.js

@@ -0,0 +1,50 @@
+import { jsx as e, jsxs as n, Fragment as k } from "react/jsx-runtime";
+import r from "../../Icon/Icon.js";
+import y from "../FormField/FormField.js";
+import i from "./RadioIconSelect.module.scss.js";
+const D = ({
+  label: p,
+  options: m,
+  fieldValue: l,
+  showDescription: d = !1,
+  disabled: a = !1,
+  hint: I,
+  inline: h = !1,
+  layout: F = "grid",
+  onUpdate: f
+}) => {
+  const $ = a;
+  return /* @__PURE__ */ e(y, { type: "radioIconSelect", label: p, classes: i.radioIconField, hint: I, inline: h, children: /* @__PURE__ */ e(
+    "div",
+    {
+      className: `${i.radioIconFieldOptions} ${a ? i.radioIconFieldOptionsDisabled : ""} ${d ? i.radioIconFieldOptionsDesc : ""} ${F === "list" ? i.radioIconFieldList : ""}`,
+      children: m.map((b) => {
+        const { label: c, value: o, icon: v, description: t, disabled: s = !1 } = b;
+        return /* @__PURE__ */ n(
+          "div",
+          {
+            className: `${i.radioIconFieldOption} ${s ? i.radioIconFieldDisabled : ""} ${l === o ? i.radioIconFieldActive : ""}`,
+            onClick: () => !s && !$ && f(o),
+            "data-tooltip-id": "appTooltip",
+            "data-tooltip-content": t,
+            "data-tooltip-place": "top",
+            "data-tooltip-delay-show": 300,
+            children: [
+              l === o && /* @__PURE__ */ e(r, { classes: "checkMark", type: "check-circle-filled", size: 14 }),
+              /* @__PURE__ */ e("div", { className: i.radioIconFieldIcon, children: /* @__PURE__ */ e(r, { type: v, size: 30 }) }),
+              /* @__PURE__ */ e("div", { className: i.radioIconFieldContent, children: d ? /* @__PURE__ */ n(k, { children: [
+                /* @__PURE__ */ e("h4", { children: c }),
+                /* @__PURE__ */ e("p", { children: t })
+              ] }) : /* @__PURE__ */ e("h4", { children: c }) })
+            ]
+          },
+          o
+        );
+      })
+    }
+  ) });
+};
+export {
+  D as default
+};
+//# sourceMappingURL=RadioIconSelect.js.map

package/dist/components/common/form/RadioIconSelect/RadioIconSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioIconSelect.js","sources":["../../../../../src/components/common/form/RadioIconSelect/RadioIconSelect.tsx"],"sourcesContent":["import Icon from '../../Icon/Icon';\r\nimport FormField from '../FormField/FormField';\r\nimport classes from './RadioIconSelect.module.scss';\r\n\r\ninterface RadioIconSelectProps {\r\n   label: string;\r\n   options: { label: string; description: string; value: string; icon: string; disabled?: boolean }[];\r\n   fieldValue: string;\r\n   layout?: 'grid' | 'list';\r\n   disabled?: boolean;\r\n   showDescription?: boolean;\r\n   hint?: string;\r\n   inline?: boolean;\r\n   onUpdate: (type: string) => void;\r\n}\r\n\r\nconst RadioIconSelect = ({\r\n   label,\r\n   options,\r\n   fieldValue,\r\n   showDescription = false,\r\n   disabled = false,\r\n   hint,\r\n   inline = false,\r\n   layout = 'grid',\r\n   onUpdate,\r\n}: RadioIconSelectProps) => {\r\n   const radioDisabled = disabled;\r\n   return (\r\n      <FormField type=\"radioIconSelect\" label={label} classes={classes.radioIconField} hint={hint} inline={inline}>\r\n         <div\r\n            className={`${classes.radioIconFieldOptions} ${disabled ? classes.radioIconFieldOptionsDisabled : ''} ${showDescription ? classes.radioIconFieldOptionsDesc : ''} ${layout === 'list' ? classes.radioIconFieldList : ''}`}\r\n         >\r\n            {options.map((option) => {\r\n               const { label, value, icon, description, disabled = false } = option;\r\n               return (\r\n                  <div\r\n                     key={value}\r\n                     className={`${classes.radioIconFieldOption} ${disabled ? classes.radioIconFieldDisabled : ''} ${fieldValue === value ? classes.radioIconFieldActive : ''}`}\r\n                     onClick={() => !disabled && !radioDisabled && onUpdate(value)}\r\n                     data-tooltip-id=\"appTooltip\"\r\n                     data-tooltip-content={description}\r\n                     data-tooltip-place=\"top\"\r\n                     data-tooltip-delay-show={300}\r\n                  >\r\n                     {fieldValue === value && <Icon classes=\"checkMark\" type=\"check-circle-filled\" size={14} />}\r\n                     <div className={classes.radioIconFieldIcon}>\r\n                        <Icon type={icon} size={30} />\r\n                     </div>\r\n                     <div className={classes.radioIconFieldContent}>\r\n                        {showDescription ? (\r\n                           <>\r\n                              <h4>{label}</h4>\r\n                              <p>{description}</p>\r\n                           </>\r\n                        ) : (\r\n                           <h4>{label}</h4>\r\n                        )}\r\n                     </div>\r\n                  </div>\r\n               );\r\n            })}\r\n         </div>\r\n      </FormField>\r\n   );\r\n};\r\n\r\nexport default RadioIconSelect;\r\n"],"names":["RadioIconSelect","label","options","fieldValue","showDescription","disabled","hint","inline","layout","onUpdate","radioDisabled","jsx","FormField","classes","option","value","icon","description","jsxs","Icon","Fragment"],"mappings":";;;;AAgBA,MAAMA,IAAkB,CAAC;AAAA,EACtB,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC,IAAS;AAAA,EACT,UAAAC;AACH,MAA4B;AACzB,QAAMC,IAAgBL;AACtB,SACG,gBAAAM,EAACC,KAAU,MAAK,mBAAkB,OAAAX,GAAc,SAASY,EAAQ,gBAAgB,MAAAP,GAAY,QAAAC,GAC1F,UAAA,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,WAAW,GAAGE,EAAQ,qBAAqB,IAAIR,IAAWQ,EAAQ,gCAAgC,EAAE,IAAIT,IAAkBS,EAAQ,4BAA4B,EAAE,IAAIL,MAAW,SAASK,EAAQ,qBAAqB,EAAE;AAAA,MAEtN,UAAAX,EAAQ,IAAI,CAACY,MAAW;AACtB,cAAM,EAAE,OAAAb,GAAO,OAAAc,GAAO,MAAAC,GAAM,aAAAC,GAAa,UAAAZ,IAAW,GAAA,IAAUS;AAC9D,eACG,gBAAAI;AAAA,UAAC;AAAA,UAAA;AAAA,YAEE,WAAW,GAAGL,EAAQ,oBAAoB,IAAIR,IAAWQ,EAAQ,yBAAyB,EAAE,IAAIV,MAAeY,IAAQF,EAAQ,uBAAuB,EAAE;AAAA,YACxJ,SAAS,MAAM,CAACR,KAAY,CAACK,KAAiBD,EAASM,CAAK;AAAA,YAC5D,mBAAgB;AAAA,YAChB,wBAAsBE;AAAA,YACtB,sBAAmB;AAAA,YACnB,2BAAyB;AAAA,YAExB,UAAA;AAAA,cAAAd,MAAeY,uBAAUI,GAAA,EAAK,SAAQ,aAAY,MAAK,uBAAsB,MAAM,GAAA,CAAI;AAAA,cACxF,gBAAAR,EAAC,OAAA,EAAI,WAAWE,EAAQ,oBACrB,UAAA,gBAAAF,EAACQ,GAAA,EAAK,MAAMH,GAAM,MAAM,GAAA,CAAI,EAAA,CAC/B;AAAA,gCACC,OAAA,EAAI,WAAWH,EAAQ,uBACpB,cACE,gBAAAK,EAAAE,GAAA,EACG,UAAA;AAAA,gBAAA,gBAAAT,EAAC,MAAA,EAAI,UAAAV,EAAAA,CAAM;AAAA,gBACX,gBAAAU,EAAC,OAAG,UAAAM,EAAA,CAAY;AAAA,cAAA,EAAA,CACnB,IAEA,gBAAAN,EAAC,MAAA,EAAI,UAAAV,GAAM,EAAA,CAEjB;AAAA,YAAA;AAAA,UAAA;AAAA,UArBKc;AAAA,QAAA;AAAA,MAwBd,CAAC;AAAA,IAAA;AAAA,EAAA,GAEP;AAEN;"}

package/dist/components/common/form/RadioIconSelect/RadioIconSelect.module.scss

@@ -0,0 +1,104 @@
+.radioIconField {
+   width: 100%;
+   position: relative;
+   .fieldLabel {
+      font-weight: 600;
+   }
+}
+
+.radioIconFieldOptions {
+   display: flex;
+   gap: 12px;
+   width: 100%;
+   &.radioIconFieldList {
+      flex-direction: column;
+   }
+}
+
+.radioIconFieldIcon {
+   color: var(--icon-color);
+}
+
+.radioIconFieldContent {
+   margin-top: 6px;
+   h4 {
+      margin: 0;
+      font-weight: 600;
+   }
+}
+
+.radioIconFieldOptionsDisabled {
+   .radioIconFieldOption {
+      opacity: 0.7;
+      cursor: not-allowed;
+      user-select: none;
+   }
+}
+
+.radioIconFieldOption {
+   display: flex;
+   flex-direction: column;
+   flex: 1 1 0px;
+   align-items: center;
+   text-align: center;
+   border: 1px solid var(--field-line-color);
+   padding: 15px;
+   padding-right: 25px;
+   border-radius: 6px;
+   cursor: pointer;
+   font-size: 0.75rem;
+   position: relative;
+
+   :global(.checkMark) {
+      color: var(--primary-color);
+      position: absolute;
+      top: 5px;
+      right: 5px;
+   }
+
+   &.radioIconFieldActive {
+      background-color: var(--background-color);
+      border-color: var(--primary-color);
+   }
+   &.radioIconFieldDisabled {
+      opacity: 0.7;
+      cursor: not-allowed;
+      user-select: none;
+   }
+}
+
+.radioIconFieldOptionsDesc {
+   display: flex;
+   gap: 12px;
+
+   .radioIconFieldOption {
+      flex-direction: row;
+      text-align: left;
+      gap: 15px;
+
+      .radioIconFieldContent {
+         h4 {
+            margin-bottom: 5px;
+            font-weight: 600;
+         }
+         p {
+            margin: 0;
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .radioIconFieldOptions {
+      flex-direction: column;
+      align-items: flex-start;
+      width: 100%;
+      .radioIconFieldOption {
+         width: 100%;
+         box-sizing: border-box;
+         align-items: flex-start;
+         flex-direction: row;
+         gap: 10px;
+      }
+   }
+}

package/dist/components/common/form/RadioIconSelect/RadioIconSelect.module.scss.js

@@ -0,0 +1,26 @@
+const o = "RadioIconSelect-module__radioIconField___UlNWq", i = "RadioIconSelect-module__radioIconFieldOptions___Wu0l8", d = "RadioIconSelect-module__radioIconFieldList___y2ath", e = "RadioIconSelect-module__radioIconFieldIcon___B8ldk", c = "RadioIconSelect-module__radioIconFieldContent___C44OQ", n = "RadioIconSelect-module__radioIconFieldOptionsDisabled___Mph2B", l = "RadioIconSelect-module__radioIconFieldOption___gCxGk", a = "RadioIconSelect-module__radioIconFieldActive___W0LDh", _ = "RadioIconSelect-module__radioIconFieldDisabled___7IcwU", t = "RadioIconSelect-module__radioIconFieldOptionsDesc___mmixR", I = {
+  radioIconField: o,
+  radioIconFieldOptions: i,
+  radioIconFieldList: d,
+  radioIconFieldIcon: e,
+  radioIconFieldContent: c,
+  radioIconFieldOptionsDisabled: n,
+  radioIconFieldOption: l,
+  radioIconFieldActive: a,
+  radioIconFieldDisabled: _,
+  radioIconFieldOptionsDesc: t
+};
+export {
+  I as default,
+  o as radioIconField,
+  a as radioIconFieldActive,
+  c as radioIconFieldContent,
+  _ as radioIconFieldDisabled,
+  e as radioIconFieldIcon,
+  d as radioIconFieldList,
+  l as radioIconFieldOption,
+  i as radioIconFieldOptions,
+  t as radioIconFieldOptionsDesc,
+  n as radioIconFieldOptionsDisabled
+};
+//# sourceMappingURL=RadioIconSelect.module.scss.js.map

package/dist/components/common/form/RadioIconSelect/RadioIconSelect.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioIconSelect.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/components/common/form/Select/Select.d.ts

@@ -0,0 +1,27 @@
+type SelectOptionType = {
+    id?: string;
+    icon?: string;
+    pro?: boolean;
+    image?: JSX.Element;
+    label: string;
+    value: string;
+    disabled?: boolean;
+};
+type SelectProps = {
+    label?: string;
+    size?: 'large' | 'medium' | 'small' | 'mini';
+    full?: boolean;
+    inline?: boolean;
+    description?: string;
+    customClasses?: string;
+    disabled?: boolean;
+    hint?: string;
+    error?: string;
+    search?: boolean;
+    fieldValue: string;
+    options: SelectOptionType[];
+    onUpdate: (f: string) => void;
+};
+declare const Select: ({ label, options, description, customClasses, fieldValue, size, full, inline, disabled, hint, error, search, onUpdate, }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export default Select;
+//# sourceMappingURL=Select.d.ts.map

package/dist/components/common/form/Select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/components/common/form/Select/Select.tsx"],"names":[],"mappings":"AAKA,KAAK,gBAAgB,GAAG;IACrB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,KAAK,WAAW,GAAG;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC7C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC,CAAC;AAEF,QAAA,MAAM,MAAM,GAAI,0HAcb,WAAW,4CA2Eb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/components/common/form/Select/Select.js

@@ -0,0 +1,76 @@
+import { jsx as a, jsxs as t } from "react/jsx-runtime";
+import { useState as I } from "react";
+import s from "./Select.module.scss.js";
+import d from "../../Icon/Icon.js";
+import j from "../FormField/FormField.js";
+const E = ({
+  label: b = "",
+  options: c = [],
+  description: $,
+  customClasses: g = "",
+  fieldValue: i = "",
+  size: w = "medium",
+  full: x = !1,
+  inline: y = !1,
+  disabled: m = !1,
+  hint: N = "",
+  error: u = "",
+  search: C = !1,
+  onUpdate: F
+}) => {
+  const [n, h] = I(!1), [r, p] = I(""), f = c.length > 0 && i ? c.findIndex((e) => e.value === i) : null, l = f === -1 ? c[0] : c[f || 0], S = l && l.label ? l.label : c[0] && c[0].label || "Select Item..", z = l && l.value ? l.value : c[0] && c[0].value || "", D = l && l.image ? l.image : "", v = l && l.icon ? l.icon : "", k = (e) => {
+    F(e), h(!1);
+  }, o = r ? c.filter((e) => e.label.toLowerCase().includes(r.toLowerCase())) : c;
+  return /* @__PURE__ */ a(
+    j,
+    {
+      type: "select",
+      label: b,
+      description: $,
+      hint: N,
+      error: u,
+      required: !1,
+      inline: y,
+      classes: `${s.selectField} ${s[w]} ${x ? s.selectFieldFull : ""} ${g} ${u ? s.fieldHasError : ""}`,
+      children: /* @__PURE__ */ t("div", { className: `${s.dropdown} ${m ? s.dropdownDisabled : ""}`, children: [
+        /* @__PURE__ */ t("div", { className: s.selected, onClick: () => h(m ? !1 : !n), children: [
+          /* @__PURE__ */ t("span", { children: [
+            D,
+            " ",
+            v && /* @__PURE__ */ a(d, { type: v, size: 13 }),
+            " ",
+            S
+          ] }),
+          /* @__PURE__ */ a("button", { className: s.dropBtn, children: /* @__PURE__ */ a(d, { type: n ? "caret-up" : "caret-down", size: 12 }) })
+        ] }),
+        n && /* @__PURE__ */ t("div", { children: [
+          C && /* @__PURE__ */ t("div", { className: s.search, children: [
+            /* @__PURE__ */ a(d, { type: "search", size: 15 }),
+            /* @__PURE__ */ a("input", { placeholder: "Search Providers...", value: r, onChange: (e) => p(e.target.value) }),
+            r && /* @__PURE__ */ a("button", { onClick: () => p(""), children: /* @__PURE__ */ a(d, { type: "close", size: 15 }) })
+          ] }),
+          /* @__PURE__ */ t("div", { className: `${s.lists} styled__scrollbar`, children: [
+            /* @__PURE__ */ a("ul", { children: o.length > 0 && o.map((e, L) => /* @__PURE__ */ t(
+              "li",
+              {
+                onClick: () => !e.pro && !e.disabled && k(e.value),
+                className: `${e.value === z ? s.selectedItem : ""} ${e.disabled ? s.disabledItem : ""}`,
+                children: [
+                  e.icon && /* @__PURE__ */ a(d, { type: e.icon, size: 13 }),
+                  e.image && e.image,
+                  e.label
+                ]
+              },
+              L
+            )) }),
+            r && !o && /* @__PURE__ */ a("div", { children: "No Providers Found" })
+          ] })
+        ] })
+      ] })
+    }
+  );
+};
+export {
+  E as default
+};
+//# sourceMappingURL=Select.js.map

package/dist/components/common/form/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../../../src/components/common/form/Select/Select.tsx"],"sourcesContent":["import { useState } from 'react';\r\nimport classes from './Select.module.scss';\r\nimport Icon from '../../Icon/Icon';\r\nimport FormField from '../FormField/FormField';\r\n\r\ntype SelectOptionType = {\r\n   id?: string;\r\n   icon?: string;\r\n   pro?: boolean;\r\n   image?: JSX.Element;\r\n   label: string;\r\n   value: string;\r\n   disabled?: boolean;\r\n};\r\n\r\ntype SelectProps = {\r\n   label?: string;\r\n   size?: 'large' | 'medium' | 'small' | 'mini';\r\n   full?: boolean;\r\n   inline?: boolean;\r\n   description?: string;\r\n   customClasses?: string;\r\n   disabled?: boolean;\r\n   hint?: string;\r\n   error?: string;\r\n   search?: boolean;\r\n   fieldValue: string;\r\n   options: SelectOptionType[];\r\n   onUpdate: (f: string) => void;\r\n};\r\n\r\nconst Select = ({\r\n   label = '',\r\n   options = [],\r\n   description,\r\n   customClasses = '',\r\n   fieldValue = '',\r\n   size = 'medium',\r\n   full = false,\r\n   inline = false,\r\n   disabled = false,\r\n   hint = '',\r\n   error = '',\r\n   search = false,\r\n   onUpdate,\r\n}: SelectProps) => {\r\n   const [showDropDown, setShowDropDown] = useState(false);\r\n   const [searchText, setSearchText] = useState('');\r\n\r\n   const selectedItemIndex = options.length > 0 && fieldValue ? options.findIndex((x) => x.value === fieldValue) : null;\r\n   const selectedItem = selectedItemIndex === -1 ? options[0] : options[selectedItemIndex || 0];\r\n   const selectedItemLabel = selectedItem && selectedItem.label ? selectedItem.label : (options[0] && options[0].label) || 'Select Item..';\r\n   const selectedItemValue = selectedItem && selectedItem.value ? selectedItem.value : (options[0] && options[0].value) || '';\r\n   const selectedItemImage = selectedItem && selectedItem.image ? selectedItem.image : '';\r\n   const selectedItemIcon = selectedItem && selectedItem.icon ? selectedItem.icon : '';\r\n\r\n   const updateOption = (val: string) => {\r\n      onUpdate(val);\r\n      setShowDropDown(false);\r\n   };\r\n\r\n   const optionsItems = searchText ? options.filter((s) => s.label.toLowerCase().includes(searchText.toLowerCase())) : options;\r\n\r\n   return (\r\n      <FormField\r\n         type=\"select\"\r\n         label={label}\r\n         description={description}\r\n         hint={hint}\r\n         error={error}\r\n         required={false}\r\n         inline={inline}\r\n         classes={`${classes.selectField} ${classes[size]} ${full ? classes.selectFieldFull : ''} ${customClasses} ${error ? classes.fieldHasError : ''}`}\r\n      >\r\n         <div className={`${classes.dropdown} ${disabled ? classes.dropdownDisabled : ''}`}>\r\n            <div className={classes.selected} onClick={() => setShowDropDown(!disabled ? !showDropDown : false)}>\r\n               <span>\r\n                  {selectedItemImage} {selectedItemIcon && <Icon type={selectedItemIcon} size={13} />} {selectedItemLabel}\r\n               </span>\r\n               <button className={classes.dropBtn}>\r\n                  <Icon type={showDropDown ? 'caret-up' : 'caret-down'} size={12} />\r\n               </button>\r\n            </div>\r\n            {showDropDown && (\r\n               <div>\r\n                  {search && (\r\n                     <div className={classes.search}>\r\n                        <Icon type=\"search\" size={15} />\r\n                        <input placeholder=\"Search Providers...\" value={searchText} onChange={(e) => setSearchText(e.target.value)} />\r\n                        {searchText && (\r\n                           <button onClick={() => setSearchText('')}>\r\n                              <Icon type=\"close\" size={15} />\r\n                           </button>\r\n                        )}\r\n                     </div>\r\n                  )}\r\n                  <div className={`${classes.lists} styled__scrollbar`}>\r\n                     <ul>\r\n                        {optionsItems.length > 0 &&\r\n                           optionsItems.map((item, indx) => {\r\n                              return (\r\n                                 <li\r\n                                    key={indx}\r\n                                    onClick={() => !item.pro && !item.disabled && updateOption(item.value)}\r\n                                    className={`${item.value === selectedItemValue ? classes.selectedItem : ''} ${item.disabled ? classes.disabledItem : ''}`}\r\n                                 >\r\n                                    {item.icon && <Icon type={item.icon} size={13} />}\r\n                                    {item.image && item.image}\r\n                                    {item.label}\r\n                                 </li>\r\n                              );\r\n                           })}\r\n                     </ul>\r\n                     {searchText && !optionsItems && <div>No Providers Found</div>}\r\n                  </div>\r\n               </div>\r\n            )}\r\n         </div>\r\n      </FormField>\r\n   );\r\n};\r\n\r\nexport default Select;\r\n"],"names":["Select","label","options","description","customClasses","fieldValue","size","full","inline","disabled","hint","error","search","onUpdate","showDropDown","setShowDropDown","useState","searchText","setSearchText","selectedItemIndex","x","selectedItem","selectedItemLabel","selectedItemValue","selectedItemImage","selectedItemIcon","updateOption","val","optionsItems","s","jsx","FormField","classes","jsxs","Icon","item","indx"],"mappings":"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"}

package/dist/components/common/form/Select/Select.module.scss

@@ -0,0 +1,193 @@
+.selectField {
+   .search {
+      border: 1px solid;
+      border-color: var(--field-line-color);
+      border-radius: 4px 4px 0 0;
+      border-bottom: 0;
+      position: relative;
+      top: -1px;
+      color: var(--icon-color);
+      span {
+         position: absolute;
+         margin: 5px;
+      }
+      button {
+         position: absolute;
+         right: 0;
+         margin: 5px;
+         color: var(--icon-color);
+         span {
+            position: relative;
+            margin: 0;
+         }
+      }
+      input {
+         padding: 8px 12px;
+         padding-left: 24px;
+         width: 100%;
+         border: none;
+         box-sizing: border-box;
+         background-color: var(--content-background-color);
+         &:focus {
+            outline: none;
+            background-color: var(--field-line-color);
+         }
+      }
+   }
+
+   .dropdown {
+      min-width: 150px;
+      width: 50%;
+      position: relative;
+      margin-top: 0px;
+
+      .selected {
+         padding: 8px 10px;
+         border: 1px solid;
+         background: var(--field-bg);
+         border-color: var(--field-line-color);
+         border-radius: 6px;
+         display: flex;
+         justify-content: space-between;
+         align-items: center;
+         cursor: pointer;
+         span {
+            user-select: none;
+            font-size: 0.75rem;
+         }
+         img {
+            margin-right: 5px;
+            max-height: 16px;
+            width: auto;
+            vertical-align: top;
+         }
+
+         .dropBtn {
+            background: transparent;
+            color: var(--icon-color);
+         }
+      }
+
+      .lists {
+         border: 1px solid var(--line-color);
+         margin-top: -1px;
+         position: absolute;
+         z-index: 9999;
+         background: var(--field-bg);
+         width: calc(100% - 2px);
+         border-radius: 0 0 4px 4px;
+         max-height: 210px;
+         overflow: auto;
+         font-size: 0.75rem;
+         ul {
+            margin: 0;
+            padding: 0;
+            list-style-type: none;
+
+            li {
+               padding: 8px 10px;
+               cursor: pointer;
+
+               img {
+                  margin-right: 5px;
+                  max-height: 16px;
+                  width: auto;
+                  vertical-align: top;
+               }
+               :global(.icon) {
+                  margin-right: 5px;
+                  opacity: 0.7;
+               }
+
+               &.disabledItem {
+                  opacity: 0.6;
+                  user-select: none;
+                  cursor: not-allowed;
+               }
+
+               &.selectedItem {
+                  color: var(--field-bg);
+                  background: var(--primary-color);
+               }
+
+               &:hover {
+                  background: var(--background-color);
+                  color: inherit;
+               }
+            }
+         }
+      }
+      &.dropdownDisabled .selected {
+         background-color: var(--line-color);
+         cursor: default;
+      }
+   }
+
+   &.selectFieldFull {
+      .dropdown {
+         width: 100%;
+      }
+   }
+
+   &.selectFieldLarge {
+      .selected {
+         padding: 12px;
+      }
+   }
+   &.selectFieldDisabled {
+      .selected {
+         background-color: var(--line-color);
+      }
+   }
+
+   &.fieldHasError {
+      .selected {
+         border-color: var(--error-bg-color-active);
+      }
+   }
+   &.selectFieldOpen {
+      .selected {
+         border-radius: 6px 6px 0 0;
+      }
+   }
+
+   &.selectFieldInline {
+      .fieldInner {
+         justify-content: space-between;
+      }
+   }
+   &.selectFieldMini {
+      margin-top: -3px;
+      .dropdown {
+         width: auto;
+         min-width: unset;
+         .selected {
+            padding: 2px 4px 2px 8px;
+            border-radius: 4px;
+            span {
+               font-size: 0.7rem;
+            }
+         }
+         .lists {
+            left: 0;
+            right: 0;
+            margin: 0 auto;
+            border-radius: 6px;
+            font-size: 0.9em;
+            margin-top: 4px;
+            width: max-content;
+            li {
+               padding: 6px 10px;
+            }
+         }
+      }
+   }
+}
+
+@media only screen and (max-width: 768px) {
+   .selectField {
+      .dropdown {
+         width: 100%;
+      }
+   }
+}