@scrippsproduct/networks-ui-library 1.1.0-alpha.0 → 1.1.0-alpha.2

package/dist/components/CustomDataList/CustomDataList.js

@@ -1,42 +1,42 @@
-import { jsxs as p, jsx as a } from "react/jsx-runtime";
-import R, { forwardRef as le, useState as b, useRef as T, useEffect as ne } from "react";
+import { jsxs as p, jsx as l } from "react/jsx-runtime";
+import z, { forwardRef as ne, useState as y, useRef as T, useCallback as ue, useEffect as de } from "react";
 import { classes as w } from "../../utils/helpers.js";
-import { CreateChoiceList as ue } from "../CreateChoiceList/CreateChoiceList.js";
-import { s as v, C as de, A as _e } from "../../Form.module-Cd8qH2rj.mjs";
-import { X as fe } from "../../x-C-QzJ-qD.mjs";
-import { P as E } from "../../index-DC2JJV3a.mjs";
-import { T as he } from "../../triangle-PcCcGXjr.mjs";
-import '../../assets/CustomDataList.css';function I() {
-  return I = Object.assign || function(c) {
-    for (var l = 1; l < arguments.length; l++) {
-      var d = arguments[l];
+import { CreateChoiceList as _e } from "../CreateChoiceList/CreateChoiceList.js";
+import { s as g, C as he, A as fe } from "../../Form.module-Cd8qH2rj.mjs";
+import { X as me } from "../../x-C-QzJ-qD.mjs";
+import { P as L } from "../../index-DC2JJV3a.mjs";
+import { T as pe } from "../../triangle-PcCcGXjr.mjs";
+import '../../assets/CustomDataList.css';function M() {
+  return M = Object.assign || function(i) {
+    for (var a = 1; a < arguments.length; a++) {
+      var d = arguments[a];
       for (var o in d)
-        Object.prototype.hasOwnProperty.call(d, o) && (c[o] = d[o]);
+        Object.prototype.hasOwnProperty.call(d, o) && (i[o] = d[o]);
     }
-    return c;
-  }, I.apply(this, arguments);
+    return i;
+  }, M.apply(this, arguments);
 }
-function me(c, l) {
-  if (c == null) return {};
-  var d = pe(c, l), o, _;
+function ge(i, a) {
+  if (i == null) return {};
+  var d = ve(i, a), o, h;
   if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(c);
-    for (_ = 0; _ < n.length; _++)
-      o = n[_], !(l.indexOf(o) >= 0) && Object.prototype.propertyIsEnumerable.call(c, o) && (d[o] = c[o]);
+    var n = Object.getOwnPropertySymbols(i);
+    for (h = 0; h < n.length; h++)
+      o = n[h], !(a.indexOf(o) >= 0) && Object.prototype.propertyIsEnumerable.call(i, o) && (d[o] = i[o]);
   }
   return d;
 }
-function pe(c, l) {
-  if (c == null) return {};
-  var d = {}, o = Object.keys(c), _, n;
+function ve(i, a) {
+  if (i == null) return {};
+  var d = {}, o = Object.keys(i), h, n;
   for (n = 0; n < o.length; n++)
-    _ = o[n], !(l.indexOf(_) >= 0) && (d[_] = c[_]);
+    h = o[n], !(a.indexOf(h) >= 0) && (d[h] = i[h]);
   return d;
 }
-var z = le(function(c, l) {
-  var d = c.color, o = d === void 0 ? "currentColor" : d, _ = c.size, n = _ === void 0 ? 24 : _, x = me(c, ["color", "size"]);
-  return /* @__PURE__ */ R.createElement("svg", I({
-    ref: l,
+var V = ne(function(i, a) {
+  var d = i.color, o = d === void 0 ? "currentColor" : d, h = i.size, n = h === void 0 ? 24 : h, j = ge(i, ["color", "size"]);
+  return /* @__PURE__ */ z.createElement("svg", M({
+    ref: a,
     xmlns: "http://www.w3.org/2000/svg",
     width: n,
     height: n,
@@ -46,237 +46,263 @@ var z = le(function(c, l) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, x), /* @__PURE__ */ R.createElement("circle", {
+  }, j), /* @__PURE__ */ z.createElement("circle", {
     cx: "11",
     cy: "11",
     r: "8"
-  }), /* @__PURE__ */ R.createElement("line", {
+  }), /* @__PURE__ */ z.createElement("line", {
     x1: "21",
     y1: "21",
     x2: "16.65",
     y2: "16.65"
   }));
 });
-z.propTypes = {
-  color: E.string,
-  size: E.oneOfType([E.string, E.number])
+V.propTypes = {
+  color: L.string,
+  size: L.oneOfType([L.string, L.number])
 };
-z.displayName = "Search";
+V.displayName = "Search";
 const u = {
-  "custom-data-list": "_custom-data-list_6b9v2_1",
-  "custom-data-list__select": "_custom-data-list__select_6b9v2_9",
-  "custom-data-list__selection": "_custom-data-list__selection_6b9v2_17",
-  "custom-data-list__selections": "_custom-data-list__selections_6b9v2_18",
-  "custom-data-list__selected": "_custom-data-list__selected_6b9v2_38",
-  "custom-data-list__remove": "_custom-data-list__remove_6b9v2_49",
-  "custom-data-list__choices-wrapper": "_custom-data-list__choices-wrapper_6b9v2_67",
-  "custom-data-list__choices": "_custom-data-list__choices_6b9v2_67",
-  "custom-data-list__choices-wrapper--hidden": "_custom-data-list__choices-wrapper--hidden_6b9v2_114",
-  "custom-data-list__icon": "_custom-data-list__icon_6b9v2_119",
-  "custom-data-list__filter-wrap": "_custom-data-list__filter-wrap_6b9v2_133",
-  "custom-data-list__filter": "_custom-data-list__filter_6b9v2_133",
-  "custom-data-list__filter-icon": "_custom-data-list__filter-icon_6b9v2_150",
-  "custom-data-list__select--touched": "_custom-data-list__select--touched_6b9v2_174"
+  "custom-data-list": "_custom-data-list_1ch50_1",
+  "custom-data-list__select": "_custom-data-list__select_1ch50_9",
+  "custom-data-list__selection": "_custom-data-list__selection_1ch50_17",
+  "custom-data-list__selections": "_custom-data-list__selections_1ch50_18",
+  "custom-data-list__selected": "_custom-data-list__selected_1ch50_38",
+  "custom-data-list__remove": "_custom-data-list__remove_1ch50_49",
+  "custom-data-list__choices-wrapper": "_custom-data-list__choices-wrapper_1ch50_67",
+  "custom-data-list__choices": "_custom-data-list__choices_1ch50_67",
+  "custom-data-list__choices-wrapper--hidden": "_custom-data-list__choices-wrapper--hidden_1ch50_114",
+  "custom-data-list__icon": "_custom-data-list__icon_1ch50_119",
+  "custom-data-list__filter-wrap": "_custom-data-list__filter-wrap_1ch50_133",
+  "custom-data-list__filter": "_custom-data-list__filter_1ch50_133",
+  "custom-data-list__filter-icon": "_custom-data-list__filter-icon_1ch50_150",
+  "custom-data-list__select--touched": "_custom-data-list__select--touched_1ch50_174"
 };
-function Se({
-  name: c,
-  options: l,
+function $e({
+  name: i,
+  options: a,
   label: d = "",
   placeholder: o = "",
-  width: _ = 100,
+  width: h = 100,
   multiple: n = !1,
-  showValidation: x = !0,
-  ...Q
+  showValidation: j = !0,
+  ...Y
 }) {
   var X, G, J;
-  const [Y, Z] = b(`${v["form-field__input"]}`), M = T(), y = T(), L = T(), [V, W] = b(""), [F, ee] = b("clean"), [O, q] = b([]), [C, k] = b([]), [$, K] = b([]), [A, te] = b(null), [N, H] = b("hidden"), f = T(-1), se = `input-width--${_}`, ie = ["Enter", "Escape", "ArrowDown", "ArrowUp"], U = (e) => {
-    let i = [];
-    const t = (s) => {
-      for (const r of s)
-        r.status !== "filtered" && i.push(r), r.subcategories.length && t(r.subcategories);
+  const [Z, ee] = y(`${g["form-field__input"]}`), F = T(null), v = T(null), O = T(null), [W, q] = y(""), [A, te] = y("clean"), [$, K] = y([]), [C, k] = y([]), [x, H] = y([]), [D, se] = y(null), [N, U] = y("hidden"), f = T(-1), ce = `input-width--${h}`, ie = ["Enter", "Escape", "ArrowDown", "ArrowUp"], R = ue((e) => {
+    let c = [];
+    const s = (t) => {
+      for (const r of t)
+        r.status !== "filtered" && c.push(r), r.subcategories.length && s(r.subcategories);
     };
-    return t(e), i;
-  }, j = (e, i, t = "selected") => {
-    if (!n && t === "selected" || t === "highlighted") {
-      for (const s of e)
-        if (s.status === t) {
-          s.status = "active";
+    return s(e), c;
+  }, []), E = (e, c, s = "selected") => {
+    if (!n && s === "selected" || s === "highlighted") {
+      for (const t of e)
+        if (t.status === s) {
+          t.status = "active";
           break;
         }
     }
-    for (const s of e) {
-      if (s.id === i && (n && s.status !== "selected" && t === "selected" && q([...O, s]), s.status !== "selected" && (s.status = t), t === "selected")) {
-        te(s);
+    for (const t of e) {
+      if (t.id === c && (n && t.status !== "selected" && s === "selected" && K([...$, t]), t.status !== "selected" && (t.status = s), s === "selected")) {
+        se(t);
         break;
       }
-      s.subcategories.length && j(s.subcategories, i, t);
+      t.subcategories.length && E(t.subcategories, c, s);
     }
     return e;
   }, B = (e) => {
-    let i = [];
-    const t = (s) => (s.parent_id ? (i.unshift(s.label), t(l.find((r) => r.id === s.parent_id))) : i.unshift(s.label), i);
-    return t(e).join(":");
-  }, ce = () => {
+    let c = [];
+    const s = (t) => (t.parent_id ? (c.unshift(t.label), s(a.find((r) => r.id === t.parent_id))) : c.unshift(t.label), c);
+    return s(e).join(":");
+  }, oe = () => {
     setTimeout(() => {
-      y.current.checkValidity() ? W("") : W(y.current.validationMessage);
+      v.current && v.current.checkValidity() ? q("") : v.current && q(v.current.validationMessage);
     }, 100);
   }, S = (e) => {
-    e == null || e.stopPropagation(), ee("touched"), Z(`${v["form-field__input"]} ${v["input--touched"]}`), N === "hidden" ? (H("visible"), M.current.focus()) : (H("hidden"), ce());
-  }, oe = (e) => {
-    const t = O.filter((m) => m.id !== e);
-    q([...t]);
-    let s = C;
-    const r = (m, h) => {
-      for (const P of m) {
-        if (P.id === h) {
+    e == null || e.stopPropagation(), te("touched"), ee(`${g["form-field__input"]} ${g["input--touched"]}`), N === "hidden" ? (U("visible"), F.current && F.current.focus()) : (U("hidden"), oe());
+  }, re = (e) => {
+    const s = $.filter((_) => _.id !== e);
+    K([...s]);
+    let t = C;
+    const r = (_, Q) => {
+      for (const P of _) {
+        if (P.id === Q) {
           P.status = "active";
           break;
         }
-        P.subcategories.length && r(P.subcategories, h);
+        P.subcategories.length && r(P.subcategories, Q);
       }
-      return m;
-    }, g = r(s, e);
-    k([...g]), document.querySelector(`select[name="${c}"] > option[value="${e}"]`).selected = !1;
-  }, re = (e) => {
-    if (e.stopPropagation(), e.keyCode === 40 || e.keyCode === 38)
-      D(e);
+      return _;
+    }, b = r(t, e);
+    k([...b]);
+    const m = document.querySelector(`select[name="${i}"] > option[value="${e}"]`);
+    m && (m.selected = !1);
+  }, le = (e) => {
+    if (e.stopPropagation(), "keyCode" in e && (e.keyCode === 40 || e.keyCode === 38))
+      I(e);
     else {
       f.current = -1;
-      const i = e.currentTarget.value, t = C, s = (m) => {
-        for (const h of m)
-          !h.label.toLowerCase().includes(i.toLowerCase()) && h.status !== "selected" && (h.status = "filtered"), h.subcategories.length && s(h.subcategories);
+      const c = e.currentTarget.value, s = C, t = (m) => {
+        for (const _ of m)
+          !_.label.toLowerCase().includes(c.toLowerCase()) && _.status !== "selected" && (_.status = "filtered"), _.subcategories.length && t(_.subcategories);
         return m;
       }, r = (m) => {
-        for (const h of m)
-          h.status === "filtered" && (h.status = "active"), h.subcategories.length && r(h.subcategories);
+        for (const _ of m)
+          _.status === "filtered" && (_.status = "active"), _.subcategories.length && r(_.subcategories);
         return m;
-      }, g = i === "" ? r(t) : s(t);
-      k([...g]), K([...U(g)]);
+      }, b = c === "" ? r(s) : t(s);
+      k([...b]), H([...R(b)]);
     }
   }, ae = (e) => {
-    const i = structuredClone(C), t = j(i, e);
-    k([...t]), S(null), document.querySelector(`select[name="${c}"] > option[value="${e}"]`).selected = !0;
-  }, D = (e) => {
+    const c = structuredClone(C), s = E(c, e);
+    k([...s]), S(null);
+    const t = document.querySelector(`select[name="${i}"] > option[value="${e}"]`);
+    t && (t.selected = !0);
+  }, I = (e) => {
     e.stopPropagation(), e.preventDefault();
-    const i = e.key, t = C, s = (r) => {
-      const g = $[r].id, m = j(t, g, "highlighted");
+    const c = e.key, s = C, t = (r) => {
+      const b = x[r].id, m = E(s, b, "highlighted");
       k([...m]);
     };
-    if (i === "ArrowDown" && N === "visible")
-      f.current < $.length - 1 ? (s(f.current + 1), f.current++) : (s(0), f.current = 0);
-    else if (i === "ArrowUp" && N === "visible")
-      f.current > 0 ? (s(f.current - 1), f.current--) : (s($.length - 1), f.current = $.length - 1);
-    else if (i === "Enter")
-      if (N === "visible" && f !== -1) {
-        const r = $[f.current].id, g = j(t, r);
-        k([...g]), S(), document.querySelector(`select[name="${c}"] > option[value="${r}"]`).selected = !0;
+    if (c === "ArrowDown" && N === "visible")
+      f.current < x.length - 1 ? (t(f.current + 1), f.current++) : (t(0), f.current = 0);
+    else if (c === "ArrowUp" && N === "visible")
+      f.current > 0 ? (t(f.current - 1), f.current--) : (t(x.length - 1), f.current = x.length - 1);
+    else if (c === "Enter")
+      if (N === "visible" && f.current !== -1) {
+        const r = x[f.current].id, b = E(s, r);
+        k([...b]), S(null);
+        const m = document.querySelector(`select[name="${i}"] > option[value="${r}"]`);
+        m && (m.selected = !0);
       } else
-        S();
-    else if (i === "Escape" && N === "visible")
-      S(), f.current = -1;
+        S(e);
+    else if (c === "Escape" && N === "visible")
+      S(e), f.current = -1;
     else
-      return !1;
-    30 * f.current > 160 ? L.current.scrollTo(0, 30 * f.current) : L.current.scrollTo(0, 0);
+      return;
+    30 * f.current > 160 && O.current ? O.current.scrollTo(0, 30 * f.current) : O.current && O.current.scrollTo(0, 0);
   };
-  return ne(() => {
-    let e = l.map((t) => ({
-      ...t,
+  return de(() => {
+    let e = a.map((s) => ({
+      ...s,
       subcategories: [],
       status: "active"
     }));
-    for (const t of e)
-      if (Number.parseInt(t.parent_id, 10)) {
-        let s = e.find((r) => r.id === t.parent_id);
-        s && s.subcategories.push(t);
+    for (const s of e)
+      if (Number.parseInt(s.parent_id, 10)) {
+        let t = e.find((r) => r.id === s.parent_id);
+        t && t.subcategories.push(s);
       }
-    const i = e.filter((t) => t.parent_id === null);
-    K(U(i)), k(i);
-  }, [l]), /* @__PURE__ */ p("label", { htmlFor: c, className: w([v["form-field"], v[se]]), children: [
-    x && /* @__PURE__ */ p(
+    const c = e.filter((s) => s.parent_id === null);
+    H(R(c)), k(c);
+  }, [a, R]), /* @__PURE__ */ p("label", { className: w([g["form-field"], g[ce]]), htmlFor: i, children: [
+    j && /* @__PURE__ */ p(
       "i",
       {
         className: w([
-          v["form-field__icon"],
-          (X = y.current) != null && X.validity.valid ? "" : v["form-field__icon--invalid"]
+          g["form-field__icon"],
+          (X = v.current) != null && X.validity.valid ? "" : g["form-field__icon--invalid"]
         ]),
         style: d === "" ? { top: "0.4em" } : {},
         children: [
-          ((G = y.current) == null ? void 0 : G.checkValidity()) && F === "touched" && /* @__PURE__ */ a(de, {}),
-          !((J = y.current) != null && J.checkValidity()) && F === "touched" && /* @__PURE__ */ a(_e, {})
+          ((G = v.current) == null ? void 0 : G.checkValidity()) && A === "touched" && /* @__PURE__ */ l(he, {}),
+          !((J = v.current) != null && J.checkValidity()) && A === "touched" && /* @__PURE__ */ l(fe, {})
         ]
       }
     ),
-    /* @__PURE__ */ a("span", { className: v["form-field__label"], children: d }),
+    /* @__PURE__ */ l("span", { className: g["form-field__label"], children: d }),
     /* @__PURE__ */ p(
       "select",
       {
-        name: c,
         className: w([
           u["custom-data-list__select"],
-          F === "touched" ? u["custom-data-list__select--touched"] : ""
+          A === "touched" ? u["custom-data-list__select--touched"] : ""
         ]),
         multiple: n,
-        ref: y,
-        ...Q,
+        name: i,
+        ref: v,
+        ...Y,
         children: [
-          /* @__PURE__ */ a("option", { value: "" }),
-          l.length && l.map((e) => /* @__PURE__ */ a("option", { value: e.id, selected: e.selected, children: e.label }, `option-${e.id}`))
+          /* @__PURE__ */ l("option", { value: "" }),
+          a.length && a.map((e) => /* @__PURE__ */ l(
+            "option",
+            {
+              selected: e.selected,
+              value: e.id,
+              children: e.label
+            },
+            `option-${e.id}`
+          ))
         ]
       }
     ),
-    /* @__PURE__ */ p("div", { className: w([Y, u["custom-data-list"], "custom-data-list"]), children: [
+    /* @__PURE__ */ p("div", { className: w([Z, u["custom-data-list"], "custom-data-list"]), children: [
       n && /* @__PURE__ */ p("ul", { className: `${u["custom-data-list__selections"]}`, onClick: S, children: [
-        O.length !== 0 && O.map((e) => /* @__PURE__ */ p("li", { className: u["custom-data-list__selected"], children: [
+        $.length !== 0 && $.map((e) => /* @__PURE__ */ p("li", { className: u["custom-data-list__selected"], children: [
           B(e),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ l(
             "button",
             {
+              className: u["custom-data-list__remove"],
               title: "remove",
               type: "button",
-              className: u["custom-data-list__remove"],
-              onClick: (i) => {
-                i.stopPropagation(), oe(e.id);
+              onClick: (c) => {
+                c.stopPropagation(), re(e.id);
               },
-              children: /* @__PURE__ */ a(fe, { width: 16, height: 16 })
+              children: /* @__PURE__ */ l(me, { height: 16, width: 16 })
             }
           )
         ] }, `selection-${e.id}`)),
-        O.length === 0 && o !== "" && /* @__PURE__ */ a("span", { className: w([u["custom-data-list__placeholder"], "custom-data-list__placeholder"]), children: o })
+        $.length === 0 && o !== "" && /* @__PURE__ */ l(
+          "li",
+          {
+            className: w([u["custom-data-list__placeholder"], "custom-data-list__placeholder"]),
+            children: o
+          }
+        )
       ] }),
       !n && /* @__PURE__ */ p("div", { className: u["custom-data-list__selection"], onClick: S, children: [
-        A && B(A),
-        !A && o !== "" && /* @__PURE__ */ a("span", { className: w([u["custom-data-list__placeholder"], "custom-data-list__placeholder"]), children: o })
+        D && B(D),
+        !D && o !== "" && /* @__PURE__ */ l("span", { className: w([u["custom-data-list__placeholder"], "custom-data-list__placeholder"]), children: o })
       ] }),
-      /* @__PURE__ */ p("div", { className: w([
-        u["custom-data-list__choices-wrapper"],
-        N === "visible" ? "" : u["custom-data-list__choices-wrapper--hidden"]
-      ]), children: [
-        /* @__PURE__ */ p("div", { className: u["custom-data-list__filter-wrap"], children: [
-          /* @__PURE__ */ a(
-            "input",
-            {
-              type: "text",
-              ref: M,
-              onChange: re,
-              onKeyDown: (e) => {
-                if (ie.includes(e.key))
-                  D(e);
-                else
-                  return !0;
-              },
-              className: u["custom-data-list__filter"]
-            }
-          ),
-          /* @__PURE__ */ a("i", { className: u["custom-data-list__filter-icon"], children: /* @__PURE__ */ a(z, { width: 14, height: 14 }) })
-        ] }),
-        /* @__PURE__ */ a("div", { className: u["custom-data-list__choices"], ref: L, onKeyDown: D, children: C.length !== 0 && /* @__PURE__ */ a(ue, { list: C, handleOnClick: ae }) })
-      ] }),
-      /* @__PURE__ */ a("i", { className: u["custom-data-list__icon"], children: /* @__PURE__ */ a(he, {}) })
+      /* @__PURE__ */ p(
+        "div",
+        {
+          className: w([
+            u["custom-data-list__choices-wrapper"],
+            N === "visible" ? "" : u["custom-data-list__choices-wrapper--hidden"]
+          ]),
+          children: [
+            /* @__PURE__ */ p("div", { className: u["custom-data-list__filter-wrap"], children: [
+              /* @__PURE__ */ l(
+                "input",
+                {
+                  className: u["custom-data-list__filter"],
+                  ref: F,
+                  type: "text",
+                  onChange: le,
+                  onKeyDown: (e) => {
+                    if (ie.includes(e.key))
+                      I(e);
+                    else
+                      return !0;
+                  }
+                }
+              ),
+              /* @__PURE__ */ l("i", { className: u["custom-data-list__filter-icon"], children: /* @__PURE__ */ l(V, { height: 14, width: 14 }) })
+            ] }),
+            /* @__PURE__ */ l("div", { className: u["custom-data-list__choices"], ref: O, onKeyDown: I, children: C.length !== 0 && /* @__PURE__ */ l(_e, { handleOnClick: ae, list: C }) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ l("i", { className: u["custom-data-list__icon"], children: /* @__PURE__ */ l(pe, {}) })
     ] }),
-    V !== "" && x && /* @__PURE__ */ a("div", { className: v["form-field__error-message"], children: V })
+    W !== "" && j && /* @__PURE__ */ l("div", { className: g["form-field__error-message"], children: W })
   ] });
 }
 export {
-  Se as CustomDataList,
-  Se as default
+  $e as CustomDataList,
+  $e as default
 };

package/dist/components/CustomDataList/index.d.ts

@@ -1 +1,2 @@
-export { CustomDataList, CustomDataList as default } from './CustomDataList';
+export { CustomDataList } from './CustomDataList';
+export { CustomDataList as default } from './CustomDataList';

package/dist/components/CustomSelect/CustomSelect.d.ts

@@ -1,14 +1,17 @@
-export function CustomSelect({ name, options, label, width, multiple, placeholder, ValidIcon, InvalidIcon, expandIconType, showValidation, ...attributes }: {
-    [x: string]: any;
-    name: any;
-    options: any;
-    label?: string | undefined;
-    width?: number | undefined;
-    multiple?: boolean | undefined;
-    placeholder?: string | undefined;
-    ValidIcon?: import('react-feather').Icon | undefined;
-    InvalidIcon?: import('react-feather').Icon | undefined;
-    expandIconType?: string | undefined;
-    showValidation?: boolean | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+import { Choice } from '../../types';
+type CustomSelectProps = {
+    name: string;
+    options: Choice[];
+    label?: string;
+    width?: number;
+    multiple?: boolean;
+    placeholder?: string;
+    ValidIcon?: React.ComponentType<any>;
+    InvalidIcon?: React.ComponentType<any>;
+    expandIconType?: 'default' | 'chevron';
+    showValidation?: boolean;
+    [x: string]: unknown;
+};
+export declare function CustomSelect({ name, options, label, width, multiple, placeholder, ValidIcon, InvalidIcon, expandIconType, // default, chevron
+showValidation, ...attributes }: CustomSelectProps): JSX.Element;
 export default CustomSelect;