@addsign/moje-agenda-shared-lib 0.0.97 → 0.0.99

package/dist/components/form/RadioGroup.d.ts

@@ -0,0 +1,8 @@
+import { IFormFieldGlobalProps, IOptionItem } from '../../types';
+
+export interface IRadioGroupProps extends IFormFieldGlobalProps {
+    options?: IOptionItem[];
+    valueKey?: string;
+    labelKey?: string;
+}
+export default function RadioGroup({ label, name, value, description, onInputChange, options, errors, required, disabled, register, }: IRadioGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/RadioGroup.js

@@ -0,0 +1,59 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+function RadioGroup({
+  label,
+  name,
+  value,
+  description,
+  onInputChange,
+  options,
+  errors = {},
+  required,
+  disabled,
+  register = () => {
+  }
+}) {
+  var _a;
+  return /* @__PURE__ */ jsxs("div", { className: "w-full min-h-30 flex-col justify-start items-start gap-1.5  sharedLibrary", children: [
+    /* @__PURE__ */ jsx("div", { className: "self-stretch  flex-col justify-start items-start gap-1.5 flex ", children: label && /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "text-slate-700 text-sm leading-tight font-medium",
+        htmlFor: name,
+        children: [
+          label,
+          " ",
+          required ? "*" : ""
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: options == null ? void 0 : options.map((option, index) => /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "inline-flex items-center space-x-2 my-2",
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "radio",
+              name,
+              value: option.value,
+              checked: value === option.value,
+              disabled,
+              ...register(name),
+              onChange: onInputChange,
+              className: "text-indigo-600 border-gray-300 focus:ring-indigo-500 mr-2"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-gray-900 text-sm font-normal leading-tight", children: option.label })
+        ]
+      },
+      index
+    )) }),
+    description && /* @__PURE__ */ jsx("div", { className: "HintText self-stretch text-slate-600 text-sm font-normal leading-tight", children: description }),
+    errors[name] && /* @__PURE__ */ jsx("div", { className: "HintText self-stretch text-red-600 text-sm font-normal leading-tight", children: (_a = errors[name]) == null ? void 0 : _a.message })
+  ] });
+}
+export {
+  RadioGroup as default
+};
+//# sourceMappingURL=RadioGroup.js.map

package/dist/components/form/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../../lib/components/form/RadioGroup.tsx"],"sourcesContent":["import { IFormFieldGlobalProps, IOptionItem } from \"../../types\";\r\n\r\nexport interface IRadioGroupProps extends IFormFieldGlobalProps {\r\n  options?: IOptionItem[];\r\n  valueKey?: string;\r\n  labelKey?: string;\r\n}\r\n\r\nexport default function RadioGroup({\r\n  label,\r\n  name,\r\n  value,\r\n  description,\r\n  onInputChange,\r\n  options,\r\n  errors = {},\r\n  required,\r\n  disabled,\r\n  register = () => {},\r\n}: IRadioGroupProps) {\r\n  return (\r\n    <div className=\"w-full min-h-30 flex-col justify-start items-start gap-1.5  sharedLibrary\">\r\n      <div className=\"self-stretch  flex-col justify-start items-start gap-1.5 flex \">\r\n        {label && (\r\n          <label\r\n            className=\"text-slate-700 text-sm leading-tight font-medium\"\r\n            htmlFor={name}\r\n          >\r\n            {label} {required ? \"*\" : \"\"}\r\n          </label>\r\n        )}\r\n      </div>\r\n      <div className=\"flex flex-col\">\r\n        {options?.map((option, index) => (\r\n          <label\r\n            key={index}\r\n            className=\"inline-flex items-center space-x-2 my-2\"\r\n          >\r\n            <input\r\n              type=\"radio\"\r\n              name={name}\r\n              value={option.value}\r\n              checked={value === option.value}\r\n              disabled={disabled}\r\n              {...register(name)} // Spread the rest of register's return value\r\n              onChange={onInputChange}\r\n              className=\"text-indigo-600 border-gray-300 focus:ring-indigo-500 mr-2\"\r\n            />\r\n            <span className=\"text-gray-900 text-sm font-normal leading-tight\">\r\n              {option.label}\r\n            </span>\r\n          </label>\r\n        ))}\r\n      </div>\r\n      {description && (\r\n        <div className=\"HintText self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n          {description}\r\n        </div>\r\n      )}\r\n      {errors[name] && (\r\n        <div className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\">\r\n          {errors[name]?.message}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"names":[],"mappings":";AAQA,SAAwB,WAAW;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AAAA,EACA;AAAA,EACA,WAAW,MAAM;AAAA,EAAC;AACpB,GAAqB;;AAEjB,SAAA,qBAAC,OAAI,EAAA,WAAU,6EACb,UAAA;AAAA,IAAC,oBAAA,OAAA,EAAI,WAAU,kEACZ,UACC,SAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS;AAAA,QAER,UAAA;AAAA,UAAA;AAAA,UAAM;AAAA,UAAE,WAAW,MAAM;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAGhC;AAAA,IACA,oBAAC,SAAI,WAAU,iBACZ,6CAAS,IAAI,CAAC,QAAQ,UACrB;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL;AAAA,cACA,OAAO,OAAO;AAAA,cACd,SAAS,UAAU,OAAO;AAAA,cAC1B;AAAA,cACC,GAAG,SAAS,IAAI;AAAA,cACjB,UAAU;AAAA,cACV,WAAU;AAAA,YAAA;AAAA,UACZ;AAAA,UACC,oBAAA,QAAA,EAAK,WAAU,mDACb,iBAAO,OACV;AAAA,QAAA;AAAA,MAAA;AAAA,MAfK;AAAA,IAiBR,IACH;AAAA,IACC,eACC,oBAAC,OAAI,EAAA,WAAU,0EACZ,UACH,aAAA;AAAA,IAED,OAAO,IAAI,KACT,oBAAA,OAAA,EAAI,WAAU,wEACZ,WAAA,YAAO,IAAI,MAAX,mBAAc,QACjB,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/components/form/SelectField.d.ts

@@ -5,4 +5,4 @@ export interface ISelectFieldProps extends IFormFieldGlobalProps {
     valueKey?: string;
     labelKey?: string;
 }
-export default function SelectField({ label, name, value, description, onInputChange, options, placeholder, className, errors, clearable, }: ISelectFieldProps): import("react/jsx-runtime").JSX.Element;
+export default function SelectField({ label, name, value, description, onInputChange, options, placeholder, className, errors, clearable, required, }: ISelectFieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/form/SelectField.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { b as MdClose, M as MdExpandLess, a as MdExpandMore, c as MdCheck } from "../../index-CxF6lTek.js";
+import { d as MdClose, b as MdExpandLess, c as MdExpandMore, a as MdCheck } from "../../index-BMFehNPK.js";
 import { u as useClickAway } from "../../useClickAway-CH9ykBsx.js";
 function SelectField({
   label,
@@ -12,7 +12,8 @@ function SelectField({
   placeholder,
   className,
   errors = {},
-  clearable
+  clearable,
+  required
 }) {
   var _a;
   const [isFocused, setIsFocused] = React.useState(false);
@@ -95,12 +96,16 @@ function SelectField({
       ref,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "self-stretch flex-col justify-start items-start gap-1.5 flex", children: [
-          label && /* @__PURE__ */ jsx(
+          label && /* @__PURE__ */ jsxs(
             "label",
             {
               className: "text-slate-700 text-sm font-medium  leading-tight",
               htmlFor: name,
-              children: label
+              children: [
+                label,
+                " ",
+                required ? "*" : ""
+              ]
             }
           ),
           /* @__PURE__ */ jsxs(

package/dist/components/form/SelectField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectField.js","sources":["../../../lib/components/form/SelectField.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { IFormFieldGlobalProps, IOptionItem } from \"../../types\";\r\nimport { MdCheck, MdClose, MdExpandLess, MdExpandMore } from \"react-icons/md\";\r\nimport { useClickAway } from \"react-use\";\r\n\r\nexport interface ISelectFieldProps extends IFormFieldGlobalProps {\r\n  options?: IOptionItem[];\r\n  valueKey?: string;\r\n  labelKey?: string;\r\n}\r\n\r\nexport default function SelectField({\r\n  label,\r\n  name,\r\n  value,\r\n  description,\r\n  onInputChange,\r\n  options,\r\n  placeholder,\r\n  className,\r\n  errors = {},\r\n  clearable,\r\n}: ISelectFieldProps) {\r\n  const [isFocused, setIsFocused] = React.useState(false);\r\n  const ref = React.useRef(null);\r\n  const handleClear = (e: any) => {\r\n    // value;\r\n    e.stopPropagation(); // Add this line\r\n\r\n    setIsFocused(false);\r\n    onInputChange({\r\n      ...e,\r\n      target: {\r\n        value: \"\",\r\n        name: name,\r\n      },\r\n    });\r\n  };\r\n  const handleToggleFocus = () => {\r\n    setIsFocused((prev) => !prev);\r\n  };\r\n\r\n  useClickAway(ref, () => {\r\n    setIsFocused(false);\r\n  });\r\n\r\n  const hangleChange = (option: IOptionItem) => {\r\n    const tmp: any = {\r\n      target: {\r\n        value: option.value,\r\n        name: name,\r\n      },\r\n    };\r\n\r\n    onInputChange(tmp);\r\n    setIsFocused(false);\r\n  };\r\n  const currentlySelectedOption = React.useMemo(() => {\r\n    if (value === null || value === undefined || value === \"\") return null;\r\n    return options?.find((option) => option.value === value);\r\n  }, [options, value]);\r\n\r\n  const listOfOptions = () => {\r\n    if (!options) return [];\r\n    return (\r\n      <div\r\n        id=\"list\"\r\n        className=\"max-h-[390px] min-w-32  w-full whitespace-nowrap absolute  z-[100000] -top-[1px] mt-[4px] bg-white rounded-lg shadow-xl border\r\n         border-gray-200 justify-start items-start inline-flex  overflow-auto cursor-default\"\r\n      >\r\n        <div className=\"grow shrink basis-0 py-1 flex-col justify-start items-start inline-flex\">\r\n          {options.map((option, index) => {\r\n            return (\r\n              <div\r\n                className=\"group self-stretch px-1.5 py-px justify-start items-center inline-flex hover:bg-gray-50 \"\r\n                onClick={() => hangleChange(option)}\r\n                key={index}\r\n              >\r\n                <div className=\"grow shrink basis-0 px-1  py-2 rounded-md flex-col justify-start items-start gap-2 inline-flex\">\r\n                  <div className=\"self-stretch justify-start items-center gap-2 inline-flex\">\r\n                    <div className=\"text-gray-900 text-sm font-normal  leading-normal\">\r\n                      {option.label}\r\n                    </div>\r\n                    {option.description && (\r\n                      <div className=\"text-slate-600 sm-base font-normal leading-normal\">\r\n                        {option.description}\r\n                      </div>\r\n                    )}\r\n                  </div>\r\n                </div>\r\n                <div className=\"w-5 h-5 relative\">\r\n                  {option.value === value && value !== \"\" && (\r\n                    <MdCheck size={22} className=\"text-primary\" />\r\n                  )}{\" \"}\r\n                  {option.value !== value && (\r\n                    <MdCheck\r\n                      size={22}\r\n                      className=\"text-transparent group-hover:text-gray-300\"\r\n                    />\r\n                  )}\r\n                </div>\r\n              </div>\r\n            );\r\n          })}\r\n        </div>\r\n      </div>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        className={\r\n          \"min-h-30 flex-col justify-start items-start gap-1.5  w-full relative \" +\r\n          className\r\n        }\r\n        id=\"component\"\r\n        ref={ref}\r\n      >\r\n        <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex\">\r\n          {label && (\r\n            <label\r\n              className=\"text-slate-700 text-sm font-medium  leading-tight\"\r\n              htmlFor={name}\r\n            >\r\n              {label}\r\n            </label>\r\n          )}\r\n          <div\r\n            className={`self-stretch w-full px-3  py-1 bg-white rounded-lg  border justify-start items-center gap-0 inline-flex outline-none \r\n               ${isFocused ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 \" : \"\"}`}\r\n            onClick={() => handleToggleFocus()}\r\n          >\r\n            <div className=\"grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] \">\r\n              <div className=\"text-gray-900 text-sm font-normal leading-normal text-ellipsis overflow-hidden w-full\">\r\n                {currentlySelectedOption?.label}\r\n                {!currentlySelectedOption?.label && placeholder && (\r\n                  <span className=\"text-slate-400 font-normal\">\r\n                    {\" \"}\r\n                    {placeholder}\r\n                  </span>\r\n                )}\r\n              </div>\r\n              <div className=\"text-slate-600 text-base font-normal leading-normal\">\r\n                {currentlySelectedOption?.description}\r\n              </div>\r\n            </div>\r\n            {clearable &&\r\n              value !== \"\" &&\r\n              value !== null &&\r\n              value !== undefined && (\r\n                <div\r\n                  className=\"w-6 h-6 relative  cursor-pointer  \"\r\n                  onClick={handleClear}\r\n                >\r\n                  <div className=\"absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg\">\r\n                    <MdClose />\r\n                  </div>{\" \"}\r\n                </div>\r\n              )}\r\n            <div className=\"w-6 h-6 relative  cursor-pointer \">\r\n              <div className=\"absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg\">\r\n                {isFocused && <MdExpandLess />}\r\n                {!isFocused && <MdExpandMore />}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>{\" \"}\r\n        <div className=\"w-full relative\">{isFocused && listOfOptions()}</div>\r\n        {description && !isFocused && (\r\n          <div className=\"self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n            {description}\r\n          </div>\r\n        )}\r\n        {errors[name] && (\r\n          <div className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\">\r\n            {errors[name]?.message}\r\n          </div>\r\n        )}\r\n      </div>\r\n    </>\r\n  );\r\n}\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectField.js","sources":["../../../lib/components/form/SelectField.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { IFormFieldGlobalProps, IOptionItem } from \"../../types\";\r\nimport { MdCheck, MdClose, MdExpandLess, MdExpandMore } from \"react-icons/md\";\r\nimport { useClickAway } from \"react-use\";\r\n\r\nexport interface ISelectFieldProps extends IFormFieldGlobalProps {\r\n  options?: IOptionItem[];\r\n  valueKey?: string;\r\n  labelKey?: string;\r\n}\r\n\r\nexport default function SelectField({\r\n  label,\r\n  name,\r\n  value,\r\n  description,\r\n  onInputChange,\r\n  options,\r\n  placeholder,\r\n  className,\r\n  errors = {},\r\n  clearable,\r\n  required,\r\n}: ISelectFieldProps) {\r\n  const [isFocused, setIsFocused] = React.useState(false);\r\n  const ref = React.useRef(null);\r\n  const handleClear = (e: any) => {\r\n    // value;\r\n    e.stopPropagation(); // Add this line\r\n\r\n    setIsFocused(false);\r\n    onInputChange({\r\n      ...e,\r\n      target: {\r\n        value: \"\",\r\n        name: name,\r\n      },\r\n    });\r\n  };\r\n  const handleToggleFocus = () => {\r\n    setIsFocused((prev) => !prev);\r\n  };\r\n\r\n  useClickAway(ref, () => {\r\n    setIsFocused(false);\r\n  });\r\n\r\n  const hangleChange = (option: IOptionItem) => {\r\n    const tmp: any = {\r\n      target: {\r\n        value: option.value,\r\n        name: name,\r\n      },\r\n    };\r\n\r\n    onInputChange(tmp);\r\n    setIsFocused(false);\r\n  };\r\n  const currentlySelectedOption = React.useMemo(() => {\r\n    if (value === null || value === undefined || value === \"\") return null;\r\n    return options?.find((option) => option.value === value);\r\n  }, [options, value]);\r\n\r\n  const listOfOptions = () => {\r\n    if (!options) return [];\r\n    return (\r\n      <div\r\n        id=\"list\"\r\n        className=\"max-h-[390px] min-w-32  w-full whitespace-nowrap absolute  z-[100000] -top-[1px] mt-[4px] bg-white rounded-lg shadow-xl border\r\n         border-gray-200 justify-start items-start inline-flex  overflow-auto cursor-default\"\r\n      >\r\n        <div className=\"grow shrink basis-0 py-1 flex-col justify-start items-start inline-flex\">\r\n          {options.map((option, index) => {\r\n            return (\r\n              <div\r\n                className=\"group self-stretch px-1.5 py-px justify-start items-center inline-flex hover:bg-gray-50 \"\r\n                onClick={() => hangleChange(option)}\r\n                key={index}\r\n              >\r\n                <div className=\"grow shrink basis-0 px-1  py-2 rounded-md flex-col justify-start items-start gap-2 inline-flex\">\r\n                  <div className=\"self-stretch justify-start items-center gap-2 inline-flex\">\r\n                    <div className=\"text-gray-900 text-sm font-normal  leading-normal\">\r\n                      {option.label}\r\n                    </div>\r\n                    {option.description && (\r\n                      <div className=\"text-slate-600 sm-base font-normal leading-normal\">\r\n                        {option.description}\r\n                      </div>\r\n                    )}\r\n                  </div>\r\n                </div>\r\n                <div className=\"w-5 h-5 relative\">\r\n                  {option.value === value && value !== \"\" && (\r\n                    <MdCheck size={22} className=\"text-primary\" />\r\n                  )}{\" \"}\r\n                  {option.value !== value && (\r\n                    <MdCheck\r\n                      size={22}\r\n                      className=\"text-transparent group-hover:text-gray-300\"\r\n                    />\r\n                  )}\r\n                </div>\r\n              </div>\r\n            );\r\n          })}\r\n        </div>\r\n      </div>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        className={\r\n          \"min-h-30 flex-col justify-start items-start gap-1.5  w-full relative \" +\r\n          className\r\n        }\r\n        id=\"component\"\r\n        ref={ref}\r\n      >\r\n        <div className=\"self-stretch flex-col justify-start items-start gap-1.5 flex\">\r\n          {label && (\r\n            <label\r\n              className=\"text-slate-700 text-sm font-medium  leading-tight\"\r\n              htmlFor={name}\r\n            >\r\n              {label} {required ? \"*\" : \"\"}\r\n            </label>\r\n          )}\r\n          <div\r\n            className={`self-stretch w-full px-3  py-1 bg-white rounded-lg  border justify-start items-center gap-0 inline-flex outline-none \r\n               ${isFocused ? \"outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 \" : \"\"}`}\r\n            onClick={() => handleToggleFocus()}\r\n          >\r\n            <div className=\"grow shrink basis-0 min-h-5 xl:min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] \">\r\n              <div className=\"text-gray-900 text-sm font-normal leading-normal text-ellipsis overflow-hidden w-full\">\r\n                {currentlySelectedOption?.label}\r\n                {!currentlySelectedOption?.label && placeholder && (\r\n                  <span className=\"text-slate-400 font-normal\">\r\n                    {\" \"}\r\n                    {placeholder}\r\n                  </span>\r\n                )}\r\n              </div>\r\n              <div className=\"text-slate-600 text-base font-normal leading-normal\">\r\n                {currentlySelectedOption?.description}\r\n              </div>\r\n            </div>\r\n            {clearable &&\r\n              value !== \"\" &&\r\n              value !== null &&\r\n              value !== undefined && (\r\n                <div\r\n                  className=\"w-6 h-6 relative  cursor-pointer  \"\r\n                  onClick={handleClear}\r\n                >\r\n                  <div className=\"absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg\">\r\n                    <MdClose />\r\n                  </div>{\" \"}\r\n                </div>\r\n              )}\r\n            <div className=\"w-6 h-6 relative  cursor-pointer \">\r\n              <div className=\"absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg\">\r\n                {isFocused && <MdExpandLess />}\r\n                {!isFocused && <MdExpandMore />}\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>{\" \"}\r\n        <div className=\"w-full relative\">{isFocused && listOfOptions()}</div>\r\n        {description && !isFocused && (\r\n          <div className=\"self-stretch text-slate-600 text-sm font-normal leading-tight\">\r\n            {description}\r\n          </div>\r\n        )}\r\n        {errors[name] && (\r\n          <div className=\"HintText self-stretch text-red-600 text-sm font-normal leading-tight\">\r\n            {errors[name]?.message}\r\n          </div>\r\n        )}\r\n      </div>\r\n    </>\r\n  );\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/components/layout/IconInCircle.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { k as MdOutlinePending, c as MdCheck } from "../../index-CxF6lTek.js";
+import { M as MdOutlinePending, a as MdCheck } from "../../index-BMFehNPK.js";
 const IconInCircle = ({
   isComplete,
   size = 20,

package/dist/{index-CxF6lTek.js → index-BMFehNPK.js}

@@ -45,20 +45,20 @@ function MdOutlinePending(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0z" }, "child": [] }, { "tag": "path", "attr": { "d": "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }, "child": [] }, { "tag": "circle", "attr": { "cx": "7", "cy": "12", "r": "1.5" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "1.5" }, "child": [] }, { "tag": "circle", "attr": { "cx": "17", "cy": "12", "r": "1.5" }, "child": [] }] })(props);
 }
 export {
-  MdExpandLess as M,
-  MdExpandMore as a,
-  MdClose as b,
-  MdCheck as c,
-  MdOutlineFilterAlt as d,
-  MdOutlineFilterAltOff as e,
-  MdSearch as f,
-  MdArrowBack as g,
-  MdArrowForward as h,
-  MdArrowUpward as i,
-  MdArrowDownward as j,
-  MdOutlinePending as k,
+  MdOutlinePending as M,
+  MdCheck as a,
+  MdExpandLess as b,
+  MdExpandMore as c,
+  MdClose as d,
+  MdOutlineFilterAlt as e,
+  MdOutlineFilterAltOff as f,
+  MdSearch as g,
+  MdArrowBack as h,
+  MdArrowForward as i,
+  MdArrowUpward as j,
+  MdArrowDownward as k,
   MdRefresh as l,
   MdInsertDriveFile as m,
   MdDeleteOutline as n
 };
-//# sourceMappingURL=index-CxF6lTek.js.map
+//# sourceMappingURL=index-BMFehNPK.js.map