pixel-react 1.2.6 → 1.2.7

package/lib/index.esm.js

@@ -708,10 +708,8 @@ const Drawer = ({
   onCloseIconClick,
   customHeader,
   customFooter,
-  tertiaryButtonProps = {
-    left: {},
-    right: {}
-  },
+  leftTertiaryButtonProps = {},
+  rightTertiaryButtonProps = {},
   zIndex = 999
 }) => {
   const [isExpanded, setIsExpanded] = useState(_isExpanded);
@@ -825,15 +823,17 @@ const Drawer = ({
               onClick: leftPrimaryButtonProps.onClick,
               variant: "primary",
               transparentBackground: true
-            }), tertiaryButtonProps.left?.label && jsx(Button$1, {
-              ...tertiaryButtonProps.left,
+            }), leftTertiaryButtonProps?.label && jsx(Button$1, {
+              ...leftTertiaryButtonProps,
+              onClick: leftTertiaryButtonProps.onClick,
               variant: "tertiary",
               transparentBackground: true
             })]
           }), jsxs("div", {
             className: "button-container",
-            children: [tertiaryButtonProps.right?.label && jsx(Button$1, {
-              ...tertiaryButtonProps.right,
+            children: [rightTertiaryButtonProps?.label && jsx(Button$1, {
+              ...rightTertiaryButtonProps,
+              onClick: rightTertiaryButtonProps.onClick,
               variant: "tertiary",
               transparentBackground: true
             }), secondaryButtonProps.label && jsx(Button$1, {
@@ -860,7 +860,7 @@ styleInject(css_248z$U);
 var css_248z$T = "";
 styleInject(css_248z$T);
 
-var css_248z$S = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm, .ff-tooltip {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-tooltip-container {\n  cursor: auto;\n  display: inline-block;\n}\n\n.ff-tooltip {\n  position: fixed;\n  width: max-content;\n  max-width: 60vw;\n  word-wrap: break-word;\n  background-color: var(--tooltip-bg-color);\n  line-height: 18px;\n  color: var(--tooltip-text-color);\n  text-align: center;\n  border-radius: 5px;\n  padding: 6px 12px;\n  opacity: 0;\n}\n.ff-tooltip--visible {\n  opacity: 1;\n  transition: opacity 0.3s;\n}";
+var css_248z$S = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm, .ff-tooltip {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-tooltip-container {\n  cursor: pointer;\n  display: inline-block;\n}\n\n.ff-tooltip {\n  position: fixed;\n  width: max-content;\n  max-width: 60vw;\n  word-wrap: break-word;\n  background-color: var(--tooltip-bg-color);\n  line-height: 18px;\n  color: var(--tooltip-text-color);\n  text-align: center;\n  border-radius: 5px;\n  padding: 6px 12px;\n  opacity: 0;\n}\n.ff-tooltip--visible {\n  opacity: 1;\n  transition: opacity 0.3s;\n}";
 styleInject(css_248z$S);
 
 const checkEmpty = value => {
@@ -1124,7 +1124,7 @@ const Accordion = ({
   });
 };
 
-var css_248z$Q = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs, .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm, .ff-multiselect-wrapper .ff-multiselect__main .default-label, .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-more-chip {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8, .ff-multiselect-wrapper .ff-multiselect__main .active-default-label, .ff-multiselect-wrapper .error-text {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-multiselect-wrapper {\n  box-sizing: border-box;\n  transition: all 0.3s ease;\n  cursor: pointer;\n  position: relative;\n  border: 1px solid var(--default-icon-color);\n  border-radius: 4px;\n  background: var(--drawer-footer-bg);\n  min-width: 150px;\n  width: 100%;\n  height: 32px;\n}\n.ff-multiselect-wrapper .ff-multiselect {\n  position: relative;\n  padding: 3px;\n  border: none;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ff-multiselect-wrapper .ff-multiselect__main {\n  display: flex;\n  flex: 1;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .default-label {\n  font-family: Poppins;\n  font-weight: 400;\n  letter-spacing: 0.5px;\n  transition: all 0.3s ease;\n  color: var(--default-icon-color);\n  line-height: 18px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .active-default-label {\n  font-size: 8px !important;\n  height: 8px;\n  font-family: Poppins;\n  font-weight: 400;\n  letter-spacing: 0.5px;\n  transition: all 0.3s ease;\n  background-color: var(--multi-select-label-bg);\n  line-height: 12px;\n  color: var(--default-icon-color);\n  padding: 0 4px;\n  position: absolute;\n  left: 8px;\n  top: -6px;\n  pointer-events: none;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 5px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  border: 0.5px solid #f1ebf2;\n  padding: 0 1px 0 4px;\n  gap: 4px;\n  border-radius: 15px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n  line-height: 14px;\n  color: var(--tooltip-bg-color);\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label.pr-2 {\n  padding: 5px 2px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-close-icon {\n  cursor: pointer;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container {\n  flex: 1;\n  min-width: 20px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input {\n  width: 100%;\n  min-width: 30px;\n  max-width: calc(100% - 0px);\n  padding: 2px;\n  box-sizing: border-box;\n  border: none;\n  font-size: 12px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input:focus {\n  outline: none;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-more-chip {\n  display: flex;\n  align-items: center;\n  width: 1.2rem;\n  font-weight: 600;\n  line-height: 16px;\n  color: var(--brand-color);\n}\n.ff-multiselect-wrapper .ff-multiselect__toggle {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow {\n  transition: transform 0.3s ease;\n  transform: rotate(360deg);\n}\n.ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow svg path {\n  transition: all 0.3s ease;\n}\n.ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow--opened-dropdown {\n  transform: rotate(180deg);\n  transition: transform 0.3s ease;\n}\n.ff-multiselect-wrapper:hover {\n  border: 1px solid var(--tooltip-bg-color);\n}\n.ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--tooltip-bg-color);\n}\n.ff-multiselect-wrapper:hover .ff-select-arrow svg path {\n  fill: var(--tooltip-bg-color);\n  transition: all 0.3s ease;\n}\n.ff-multiselect-wrapper--with-options {\n  height: fit-content;\n}\n.ff-multiselect-wrapper--opened-dropdown {\n  border: 1px solid var(--brand-color);\n  height: fit-content;\n  cursor: default;\n}\n.ff-multiselect-wrapper--opened-dropdown .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--brand-color);\n}\n.ff-multiselect-wrapper--opened-dropdown:hover {\n  border: 1px solid var(--brand-color);\n}\n.ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--brand-color);\n}\n.ff-multiselect-wrapper--error {\n  border: 1px solid var(--error-light);\n}\n.ff-multiselect-wrapper--error .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--error-light);\n}\n.ff-multiselect-wrapper--error:hover {\n  border: 1px solid var(--error-light);\n}\n.ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--error-light);\n}\n.ff-multiselect-wrapper--disabled {\n  pointer-events: none;\n  border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-wrapper--disabled .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--multi-select-border);\n}\n.ff-multiselect-wrapper--disabled:hover {\n  border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--multi-select-border);\n}\n.ff-multiselect-wrapper--disabled .ff-select-arrow svg path {\n  fill: var(--multi-select-border);\n  transition: all 0.3s ease;\n}\n.ff-multiselect-wrapper--disabled:hover .ff-select-arrow svg path {\n  fill: var(--multi-select-border);\n  transition: all 0.3s ease;\n}\n.ff-multiselect-wrapper--disabled .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n  color: var(--text-color-light);\n}\n.ff-multiselect-wrapper .error-text {\n  position: absolute;\n  margin-top: 0.25rem;\n  left: 12px;\n  color: var(--error-light);\n  letter-spacing: 0.5px;\n}";
+var css_248z$Q = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs, .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm, .ff-multiselect-wrapper .ff-multiselect__main .default-label, .ff-multiselect-wrapper .ff-multiselect .ff-multiselect-more-chip {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8, .ff-multiselect-wrapper .ff-multiselect__main .active-default-label, .ff-multiselect-wrapper .error-text {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-multiselect-wrapper {\n  box-sizing: border-box;\n  transition: all 0.3s ease;\n  cursor: pointer;\n  position: relative;\n  border: 1px solid var(--default-icon-color);\n  border-radius: 4px;\n  background: var(--drawer-footer-bg);\n  min-width: 150px;\n  width: 100%;\n  height: 32px;\n}\n.ff-multiselect-wrapper .ff-multiselect {\n  position: relative;\n  padding: 3px;\n  border: none;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ff-multiselect-wrapper .ff-multiselect__main {\n  display: flex;\n  flex: 1;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .default-label {\n  font-family: Poppins;\n  font-weight: 400;\n  letter-spacing: 0.5px;\n  transition: all 0.3s ease;\n  color: var(--default-icon-color);\n  line-height: 18px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .active-default-label {\n  font-size: 8px !important;\n  height: 8px;\n  font-family: Poppins;\n  font-weight: 400;\n  letter-spacing: 0.5px;\n  transition: all 0.3s ease;\n  background-color: var(--multi-select-label-bg);\n  line-height: 12px;\n  color: var(--default-icon-color);\n  padding: 0 4px;\n  position: absolute;\n  left: 8px;\n  top: -6px;\n  pointer-events: none;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 5px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  border: 0.5px solid #f1ebf2;\n  padding: 0 1px 0 4px;\n  gap: 4px;\n  border-radius: 15px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n  line-height: 14px;\n  color: var(--tooltip-bg-color);\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label.label-padding {\n  padding: 5px 2px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-close-icon {\n  color: var(--brand-color);\n  cursor: pointer;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container {\n  flex: 1;\n  min-width: 20px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input {\n  width: 100%;\n  min-width: 30px;\n  max-width: calc(100% - 0px);\n  padding: 2px;\n  box-sizing: border-box;\n  border: none;\n  font-size: 12px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input:focus {\n  outline: none;\n}\n.ff-multiselect-wrapper .ff-multiselect .ff-multiselect-more-chip {\n  display: flex;\n  align-items: center;\n  width: 1rem;\n  font-weight: 600;\n  line-height: 16px;\n  color: var(--brand-color);\n}\n.ff-multiselect-wrapper .ff-multiselect__toggle {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow {\n  transition: transform 0.3s ease;\n  transform: rotate(360deg);\n}\n.ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow svg path {\n  transition: all 0.3s ease;\n}\n.ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow--opened-dropdown {\n  transform: rotate(180deg);\n  transition: transform 0.3s ease;\n}\n.ff-multiselect-wrapper:hover {\n  border: 1px solid var(--tooltip-bg-color);\n}\n.ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--tooltip-bg-color);\n}\n.ff-multiselect-wrapper:hover .ff-select-arrow svg path {\n  fill: var(--tooltip-bg-color);\n  transition: all 0.3s ease;\n}\n.ff-multiselect-wrapper--with-options {\n  height: fit-content;\n}\n.ff-multiselect-wrapper--opened-dropdown {\n  border: 1px solid var(--brand-color);\n  height: fit-content;\n  cursor: default;\n}\n.ff-multiselect-wrapper--opened-dropdown .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--brand-color);\n}\n.ff-multiselect-wrapper--opened-dropdown:hover {\n  border: 1px solid var(--brand-color);\n}\n.ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--brand-color);\n}\n.ff-multiselect-wrapper--error {\n  border: 1px solid var(--error-light);\n}\n.ff-multiselect-wrapper--error .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--error-light);\n}\n.ff-multiselect-wrapper--error:hover {\n  border: 1px solid var(--error-light);\n}\n.ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--error-light);\n}\n.ff-multiselect-wrapper--disabled {\n  pointer-events: none;\n  border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-wrapper--disabled .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--multi-select-border);\n}\n.ff-multiselect-wrapper--disabled:hover {\n  border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--multi-select-border);\n}\n.ff-multiselect-wrapper--disabled .ff-select-arrow svg path {\n  fill: var(--multi-select-border);\n  transition: all 0.3s ease;\n}\n.ff-multiselect-wrapper--disabled:hover .ff-select-arrow svg path {\n  fill: var(--multi-select-border);\n  transition: all 0.3s ease;\n}\n.ff-multiselect-wrapper--disabled .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n  color: var(--text-color-light);\n}\n.ff-multiselect-wrapper .error-text {\n  position: absolute;\n  margin-top: 0.25rem;\n  left: 12px;\n  color: var(--error-light);\n  letter-spacing: 0.5px;\n}";
 styleInject(css_248z$Q);
 
 const dropdownDefaultCSSData$1 = {
@@ -1136,6 +1136,56 @@ const dropdownDefaultCSSData$1 = {
 var css_248z$P = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd, .ff-multiselect-dropdown-container .no-options, .ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-multiselect-dropdown-container {\n  position: absolute;\n  background: var(--drawer-footer-bg);\n  z-index: 1000;\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  border: 0.5px solid var(--ff-select-option-border-color);\n  border-radius: 4px;\n  box-sizing: border-box;\n  margin-block: 4px;\n  max-height: 160px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper {\n  max-height: 128px;\n  overflow-y: auto;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar {\n  width: 4px;\n  height: 40px;\n  border-radius: 12px 0px 0px 0px;\n  background: var(--description-text);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-track {\n  background: var(--ff-select-scroll-track-bg);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb {\n  background: var(--ff-select-scroll-thumb-color);\n  border-radius: 10px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb:hover {\n  background: var(--ff-select-scroll-thumb-hover);\n}\n.ff-multiselect-dropdown-container .no-options {\n  color: var(--pop-up-background-blur);\n  text-align: center;\n  margin: 0;\n  padding: 10px;\n  line-height: 12px;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  height: 32px;\n  padding: 4px 8px;\n  gap: 4px;\n  border-radius: 4px 0px 0px 0px;\n  background-color: white;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n  color: var(--ff-select-text-color);\n}\n.ff-multiselect-dropdown-container .dropdown-option-container:hover {\n  background-color: var(--hover-color);\n}\n.ff-multiselect-dropdown-container:focus {\n  outline: none;\n}\n.ff-multiselect-dropdown-container .select-button-container {\n  box-sizing: border-box;\n  width: 100%;\n  border-top: 1px solid var(--slider-table-color);\n  height: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}";
 styleInject(css_248z$P);
 
+var css_248z$O = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-checkbox--overlay {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  cursor: pointer;\n  position: relative;\n}\n.ff-checkbox--overlay .ff-checkbox-input {\n  display: none;\n}\n.ff-checkbox--overlay .ff-checkbox-custom {\n  width: 16px;\n  height: 16px;\n  border: 1px solid var(--checkbox-border-color);\n  box-sizing: border-box;\n  border-radius: 2px;\n  margin-right: 8px;\n  background-color: var(--checkbox-bg-color);\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::before {\n  content: \"\";\n  width: 9px;\n  height: 2px;\n  background-color: var(--checkbox-partial-color);\n  border-radius: 2px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(180deg);\n  opacity: 0;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::after {\n  content: \"\";\n  width: 16px;\n  height: 16px;\n  border: 4px solid var(--checkbox-hover-color);\n  border-radius: 4px;\n  position: absolute;\n  opacity: 0;\n  background-color: var(--checkbox-hover-color);\n  z-index: -1;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover {\n  border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover::after {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom {\n  background: var(--brand-color);\n  border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom {\n  background: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom::after {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom {\n  opacity: 0.5;\n  cursor: not-allowed;\n  border: 1px solid var(--checkbox-border-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom::after {\n  opacity: 0;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial {\n  background-color: var(--brand-color);\n  border: none;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial::before {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover {\n  background-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover::after {\n  opacity: 1;\n}";
+styleInject(css_248z$O);
+
+const Checkbox = ({
+  id,
+  name,
+  label,
+  disabled = false,
+  checked: initialChecked = false,
+  partial = false,
+  onChange
+}) => {
+  const [checked, setChecked] = useState(initialChecked);
+  useEffect(() => {
+    setChecked(initialChecked);
+  }, [initialChecked]);
+  const handleCheckboxChange = event => {
+    if (!disabled) {
+      setChecked(prev => !prev), onChange?.(event);
+    }
+  };
+  return jsxs("label", {
+    className: "ff-checkbox--overlay",
+    htmlFor: id,
+    children: [jsx("input", {
+      type: "checkbox",
+      className: "ff-checkbox-input",
+      id: id,
+      name: name,
+      checked: checked,
+      onChange: handleCheckboxChange,
+      disabled: disabled
+    }), jsx("span", {
+      className: classNames('ff-checkbox-custom', {
+        'ff-checkbox-checked': checked,
+        'ff-storybook-checkbox--partial': partial && !checked
+      }),
+      children: checked && jsx(Icon, {
+        name: "tick",
+        height: 6,
+        width: 8,
+        color: "var(--primary-icon-color)"
+      })
+    }), jsx(Typography, {
+      as: "span",
+      children: label
+    })]
+  });
+};
+
 const Dropdown$2 = /*#__PURE__*/forwardRef(({
   options,
   handleOptionChange,
@@ -1188,11 +1238,10 @@ const Dropdown$2 = /*#__PURE__*/forwardRef(({
       }) : filteredOptions.map(info => jsxs("div", {
         role: "option",
         className: `dropdown-option-container`,
-        onClick: () => handleOptionChange(info, !info.isChecked),
-        children: [jsx("input", {
-          type: "checkbox",
+        onClick: () => !info?.isDisabled && handleOptionChange(info, !info.isChecked),
+        children: [jsx(Checkbox, {
           checked: info.isChecked,
-          readOnly: true
+          disabled: info?.isDisabled
         }), jsx(Typography, {
           as: "span",
           className: "dropdown-option-label",
@@ -1212,21 +1261,24 @@ const Dropdown$2 = /*#__PURE__*/forwardRef(({
 
 const ChipElement = ({
   label,
-  onChipCloseClick
+  onChipCloseClick,
+  disableChip
 }) => {
   if (label) {
     return jsxs("div", {
       className: "ff-multiselect-chip",
-      children: [jsxs("span", {
-        className: "ff-multiselect-chip-label",
-        children: [" ", label]
-      }), jsx(Icon, {
-        color: "#71347b",
+      children: [jsx("span", {
+        className: `ff-multiselect-chip-label ${disableChip && 'label-padding'}`,
+        children: jsx(Tooltip, {
+          placement: "bottom",
+          title: label?.length > 25 ? label : '',
+          zIndex: 101,
+          children: label?.length > 25 ? label?.slice(0, 25) + '...' : label
+        })
+      }), !disableChip && jsx(Icon, {
         className: "ff-multiselect-chip-close-icon",
         onClick: onChipCloseClick,
-        name: "close_pill",
-        height: 13,
-        width: 13
+        name: "close_pill"
       })]
     });
   }
@@ -1246,7 +1298,8 @@ const MultiSelect = ({
   errorMessage = 'Fill this field',
   withSelectButton = false,
   onSelect = () => {},
-  displayCount = false
+  displayCount = false,
+  placeholderForSearching = 'Search'
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [allOptions, setAllOptions] = useState(options);
@@ -1421,18 +1474,20 @@ const MultiSelect = ({
           children: [displayCount ? jsx(Fragment, {
             children: selectedOptions.slice(0, maxVisibleChips).map(option => jsx(ChipElement, {
               label: option?.label || '',
-              onChipCloseClick: e => handleChipCloseClick(option, e)
+              onChipCloseClick: e => handleChipCloseClick(option, e),
+              disableChip: option?.isDisabled || false
             }, option?.label))
           }) : selectedOptions.map(option => jsx(ChipElement, {
             label: option?.label || '',
-            onChipCloseClick: e => handleChipCloseClick(option, e)
+            onChipCloseClick: e => handleChipCloseClick(option, e),
+            disableChip: option?.isDisabled || false
           }, option?.label)), jsx("div", {
             className: "ff-multiselect-input-container",
             children: jsx("input", {
               value: searchedKeyword,
               type: type,
               autoComplete: "off",
-              placeholder: "search...",
+              placeholder: placeholderForSearching,
               ref: inputRef,
               onChange: handleSearch,
               onKeyDown: handleKeyEnter,
@@ -1442,12 +1497,12 @@ const MultiSelect = ({
                 display: isOpen || selectedOptions.length ? 'inherit' : 'none'
               }
             })
-          }), hiddenCount > 0 && jsxs("div", {
-            className: "ff-multiselect-more-chip",
-            onClick: toggleDropdown,
-            children: ["+", hiddenCount]
           })]
         })]
+      }), hiddenCount > 0 && displayCount && jsxs("div", {
+        className: "ff-multiselect-more-chip",
+        onClick: toggleDropdown,
+        children: ["+", hiddenCount]
       }), jsx("div", {
         onClick: toggleDropdown,
         className: "ff-multiselect__toggle",
@@ -1480,8 +1535,8 @@ const MultiSelect = ({
   });
 };
 
-var css_248z$O = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-toaster-overlay {\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  pointer-events: none;\n  justify-content: flex-end;\n  align-items: flex-end;\n}\n.ff-toaster-overlay .ff-toaster {\n  background-color: var(--drawer-footer-bg);\n  display: flex;\n  border-radius: 10px;\n  margin: 16px;\n  pointer-events: auto;\n  min-width: 320px;\n  max-width: 600px;\n  gap: 8px;\n  box-shadow: 0px 1px 4px 0px var(--toaster-boxshadow);\n  animation: slideInToasterBottomRight 0.5s forwards;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container {\n  padding: 8px;\n  display: flex;\n  border-radius: 10px;\n  gap: 8px;\n  width: 100%;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 8px;\n  padding: 1px;\n  -webkit-mask: linear-gradient(var(--drawer-footer-bg) 0 0) content-box, linear-gradient(var(--drawer-footer-bg) 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  z-index: -1;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 4px;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__title {\n  max-width: 500px;\n  word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__message {\n  max-width: 500px;\n  word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__prompt {\n  margin-top: 4px;\n  display: flex;\n  gap: 10px;\n}\n.ff-toaster-overlay .ff-toaster--success::before {\n  background: var(--toaster-success-border);\n}\n.ff-toaster-overlay .ff-toaster--warning::before {\n  background: var(--toaster-warning-border);\n}\n.ff-toaster-overlay .ff-toaster--info::before {\n  background: var(--toaster-info-border);\n}\n.ff-toaster-overlay .ff-toaster--danger::before, .ff-toaster-overlay .ff-toaster--confirm::before {\n  background: var(--toaster-danger_confirm-border);\n}\n.ff-toaster-overlay .ff-toaster .ff-close-icon-wrapper {\n  box-sizing: border-box;\n  cursor: pointer;\n  height: fit-content;\n  width: fit-content;\n  border-radius: 8px;\n  padding: 8px;\n  background: var(--toast-close-icon-wrapper-bg);\n  margin-left: auto;\n}\n.ff-toaster-overlay.exiting {\n  animation: slideOutToasterBottomRight 0.5s forwards;\n}\n\n@keyframes slideOutToasterBottomRight {\n  from {\n    transform: translateX(0%);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n@keyframes slideInToasterBottomRight {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0%);\n  }\n}\n.fireflink-stories-toaster-container .fireflink-stories-toaster-container-row {\n  display: flex;\n  gap: 5px;\n  margin: 15px;\n}";
-styleInject(css_248z$O);
+var css_248z$N = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-toaster-overlay {\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  pointer-events: none;\n  justify-content: flex-end;\n  align-items: flex-end;\n}\n.ff-toaster-overlay .ff-toaster {\n  background-color: var(--drawer-footer-bg);\n  display: flex;\n  border-radius: 10px;\n  margin: 16px;\n  pointer-events: auto;\n  min-width: 320px;\n  max-width: 600px;\n  gap: 8px;\n  box-shadow: 0px 1px 4px 0px var(--toaster-boxshadow);\n  animation: slideInToasterBottomRight 0.5s forwards;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container {\n  padding: 8px;\n  display: flex;\n  border-radius: 10px;\n  gap: 8px;\n  width: 100%;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 8px;\n  padding: 1px;\n  -webkit-mask: linear-gradient(var(--drawer-footer-bg) 0 0) content-box, linear-gradient(var(--drawer-footer-bg) 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  z-index: -1;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 4px;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__title {\n  max-width: 500px;\n  word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__message {\n  max-width: 500px;\n  word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__prompt {\n  margin-top: 4px;\n  display: flex;\n  gap: 10px;\n}\n.ff-toaster-overlay .ff-toaster--success::before {\n  background: var(--toaster-success-border);\n}\n.ff-toaster-overlay .ff-toaster--warning::before {\n  background: var(--toaster-warning-border);\n}\n.ff-toaster-overlay .ff-toaster--info::before {\n  background: var(--toaster-info-border);\n}\n.ff-toaster-overlay .ff-toaster--danger::before, .ff-toaster-overlay .ff-toaster--confirm::before {\n  background: var(--toaster-danger_confirm-border);\n}\n.ff-toaster-overlay .ff-toaster .ff-close-icon-wrapper {\n  box-sizing: border-box;\n  cursor: pointer;\n  height: fit-content;\n  width: fit-content;\n  border-radius: 8px;\n  padding: 8px;\n  background: var(--toast-close-icon-wrapper-bg);\n  margin-left: auto;\n}\n.ff-toaster-overlay.exiting {\n  animation: slideOutToasterBottomRight 0.5s forwards;\n}\n\n@keyframes slideOutToasterBottomRight {\n  from {\n    transform: translateX(0%);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n@keyframes slideInToasterBottomRight {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0%);\n  }\n}\n.fireflink-stories-toaster-container .fireflink-stories-toaster-container-row {\n  display: flex;\n  gap: 5px;\n  margin: 15px;\n}";
+styleInject(css_248z$N);
 
 const Toaster = ({
   isOpen = false,
@@ -1589,8 +1644,8 @@ const Toaster = ({
   }), document.body);
 };
 
-var css_248z$N = "/* Container */\n.ff-container {\n  margin-right: auto;\n  margin-left: auto;\n  width: 90%;\n  display: grid;\n}\n\n.ff-container-fluid {\n  width: 100%;\n  margin-right: auto;\n  margin-left: auto;\n  display: grid;\n}\n\n/* Row */\n.ff-row {\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n}\n\n/* Column sizes based on a 12-column layout */\n.ff-col {\n  grid-column: span 12;\n}\n\n.ff-col-1 {\n  grid-column: span 1;\n}\n\n.ff-col-2 {\n  grid-column: span 2;\n}\n\n.ff-col-3 {\n  grid-column: span 3;\n}\n\n.ff-col-4 {\n  grid-column: span 4;\n}\n\n.ff-col-5 {\n  grid-column: span 5;\n}\n\n.ff-col-6 {\n  grid-column: span 6;\n}\n\n.ff-col-7 {\n  grid-column: span 7;\n}\n\n.ff-col-8 {\n  grid-column: span 8;\n}\n\n.ff-col-9 {\n  grid-column: span 9;\n}\n\n.ff-col-10 {\n  grid-column: span 10;\n}\n\n.ff-col-11 {\n  grid-column: span 11;\n}\n\n.ff-col-12 {\n  grid-column: span 12;\n}\n\n@media (max-width: 768px) {\n  /* Stacking columns on small screens */\n  .ff-col {\n    grid-column: span 12;\n  }\n}";
-styleInject(css_248z$N);
+var css_248z$M = "/* Container */\n.ff-container {\n  margin-right: auto;\n  margin-left: auto;\n  width: 90%;\n  display: grid;\n}\n\n.ff-container-fluid {\n  width: 100%;\n  margin-right: auto;\n  margin-left: auto;\n  display: grid;\n}\n\n/* Row */\n.ff-row {\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n}\n\n/* Column sizes based on a 12-column layout */\n.ff-col {\n  grid-column: span 12;\n}\n\n.ff-col-1 {\n  grid-column: span 1;\n}\n\n.ff-col-2 {\n  grid-column: span 2;\n}\n\n.ff-col-3 {\n  grid-column: span 3;\n}\n\n.ff-col-4 {\n  grid-column: span 4;\n}\n\n.ff-col-5 {\n  grid-column: span 5;\n}\n\n.ff-col-6 {\n  grid-column: span 6;\n}\n\n.ff-col-7 {\n  grid-column: span 7;\n}\n\n.ff-col-8 {\n  grid-column: span 8;\n}\n\n.ff-col-9 {\n  grid-column: span 9;\n}\n\n.ff-col-10 {\n  grid-column: span 10;\n}\n\n.ff-col-11 {\n  grid-column: span 11;\n}\n\n.ff-col-12 {\n  grid-column: span 12;\n}\n\n@media (max-width: 768px) {\n  /* Stacking columns on small screens */\n  .ff-col {\n    grid-column: span 12;\n  }\n}";
+styleInject(css_248z$M);
 
 const Container = ({
   children,
@@ -1632,8 +1687,8 @@ const Col = ({
   });
 };
 
-var css_248z$M = ".ff--switch-container {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.ff--switch-container .ff--switch-checkbox {\n  height: 0;\n  width: 0;\n  display: none;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button {\n  right: -1px;\n  border: 1px solid var(--brand-color);\n  background: var(--toggle-button-bg-color);\n  transition: all 0.3s;\n  box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button .ff-checked-icon--primary svg path {\n  fill: var(--brand-color);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label--primary {\n  background: var(--brand-color);\n  transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label:disabled {\n  cursor: default;\n  color: var(--disable-color);\n  background: var(--disable-color);\n}\n.ff--switch-container .ff--switch-checkbox:disabled {\n  cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  border-radius: 8px;\n  position: relative;\n  background: var(--toggle-strip-color);\n  transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-label--disabled {\n  opacity: 0.5;\n  cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button {\n  position: absolute;\n  left: 0;\n  border: 1px solid var(--toggle-strip-color);\n  display: flex;\n  background: var(--toggle-button-bg-color);\n  border-radius: 50%;\n  box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n  transition: all 0.3s;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button .ff-unchecked-icon--primary svg path {\n  fill: var(--toggle-disable-icon-color);\n}\n.ff--switch-container .default--small {\n  width: 24px;\n  height: 10px;\n}\n.ff--switch-container .default--small .ff--switch-button {\n  width: 16px;\n  height: 16px;\n  transform: translateX(0);\n}\n.ff--switch-container .default--small .ff--switch-button.checked {\n  transform: translateX(10px);\n}\n.ff--switch-container .default--medium {\n  width: 32px;\n  height: 14px;\n}\n.ff--switch-container .default--medium .ff--switch-button {\n  width: 20px;\n  height: 20px;\n  transform: translateX(0);\n}\n.ff--switch-container .default--medium .ff--switch-button.checked {\n  transform: translateX(14px);\n}\n.ff--switch-container .default--large {\n  width: 40px;\n  height: 16px;\n}\n.ff--switch-container .default--large .ff--switch-button {\n  width: 24px;\n  height: 24px;\n  transform: translateX(0);\n}\n.ff--switch-container .default--large .ff--switch-button.checked {\n  transform: translateX(16px);\n}";
-styleInject(css_248z$M);
+var css_248z$L = ".ff--switch-container {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.ff--switch-container .ff--switch-checkbox {\n  height: 0;\n  width: 0;\n  display: none;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button {\n  right: -1px;\n  border: 1px solid var(--brand-color);\n  background: var(--toggle-button-bg-color);\n  transition: all 0.3s;\n  box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button .ff-checked-icon--primary svg path {\n  fill: var(--brand-color);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label--primary {\n  background: var(--brand-color);\n  transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label:disabled {\n  cursor: default;\n  color: var(--disable-color);\n  background: var(--disable-color);\n}\n.ff--switch-container .ff--switch-checkbox:disabled {\n  cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  border-radius: 8px;\n  position: relative;\n  background: var(--toggle-strip-color);\n  transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-label--disabled {\n  opacity: 0.5;\n  cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button {\n  position: absolute;\n  left: 0;\n  border: 1px solid var(--toggle-strip-color);\n  display: flex;\n  background: var(--toggle-button-bg-color);\n  border-radius: 50%;\n  box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n  transition: all 0.3s;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button .ff-unchecked-icon--primary svg path {\n  fill: var(--toggle-disable-icon-color);\n}\n.ff--switch-container .default--small {\n  width: 24px;\n  height: 10px;\n}\n.ff--switch-container .default--small .ff--switch-button {\n  width: 16px;\n  height: 16px;\n  transform: translateX(0);\n}\n.ff--switch-container .default--small .ff--switch-button.checked {\n  transform: translateX(10px);\n}\n.ff--switch-container .default--medium {\n  width: 32px;\n  height: 14px;\n}\n.ff--switch-container .default--medium .ff--switch-button {\n  width: 20px;\n  height: 20px;\n  transform: translateX(0);\n}\n.ff--switch-container .default--medium .ff--switch-button.checked {\n  transform: translateX(14px);\n}\n.ff--switch-container .default--large {\n  width: 40px;\n  height: 16px;\n}\n.ff--switch-container .default--large .ff--switch-button {\n  width: 24px;\n  height: 24px;\n  transform: translateX(0);\n}\n.ff--switch-container .default--large .ff--switch-button.checked {\n  transform: translateX(16px);\n}";
+styleInject(css_248z$L);
 
 const Toggle = ({
   onChange,
@@ -1711,8 +1766,8 @@ const Toggle = ({
   });
 };
 
-var css_248z$L = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs, .ff-chip-wrapper .ff-default-chip-style {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm, .ff-chip-wrapper .ff-default-chip-style--custom {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-chip-wrapper {\n  display: inline-flex;\n  margin: 5px;\n  justify-content: center;\n  align-items: center;\n}\n.ff-chip-wrapper .ff-default-chip-style {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  width: fit-content;\n  gap: 5px;\n  height: 17px;\n  border-radius: 25px;\n  padding: 1px 6px;\n  line-height: 15px;\n  border: none;\n  transition: transform 0.5s ease, box-shadow 0.5s ease, padding 1s ease;\n  box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--fullText:hover {\n  box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n  padding-right: 12px;\n}\n.ff-chip-wrapper .ff-default-chip-style--primary {\n  background-color: var(--ff-chips-fill-color);\n  color: var(--ff-chip-bg);\n  color: var(--ff-chip-text-color);\n}\n.ff-chip-wrapper .ff-default-chip-style--success {\n  background-color: var(--ff-success);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--error {\n  background-color: var(--ff-error-light);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--warning {\n  background-color: var(--ff-warning);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--custom {\n  background: rgba(97, 11, 134, 0.1019607843);\n  color: #610b86;\n  padding: 2px 8px;\n  border-radius: 12px;\n  cursor: pointer;\n  white-space: nowrap;\n  box-shadow: none;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n.ff-chip-wrapper .ff-default-chip-style--custom:hover {\n  background-color: #610b86;\n  color: #fdfaff;\n}";
-styleInject(css_248z$L);
+var css_248z$K = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs, .ff-chip-wrapper .ff-default-chip-style {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm, .ff-chip-wrapper .ff-default-chip-style--custom {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-chip-wrapper {\n  display: inline-flex;\n  margin: 5px;\n  justify-content: center;\n  align-items: center;\n}\n.ff-chip-wrapper .ff-default-chip-style {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  width: fit-content;\n  gap: 5px;\n  height: 17px;\n  border-radius: 25px;\n  padding: 1px 6px;\n  line-height: 15px;\n  border: none;\n  transition: transform 0.5s ease, box-shadow 0.5s ease, padding 1s ease;\n  box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--fullText:hover {\n  box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n  padding-right: 12px;\n}\n.ff-chip-wrapper .ff-default-chip-style--primary {\n  background-color: var(--ff-chips-fill-color);\n  color: var(--ff-chip-bg);\n  color: var(--ff-chip-text-color);\n}\n.ff-chip-wrapper .ff-default-chip-style--success {\n  background-color: var(--ff-success);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--error {\n  background-color: var(--ff-error-light);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--warning {\n  background-color: var(--ff-warning);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--custom {\n  background: rgba(97, 11, 134, 0.1019607843);\n  color: #610b86;\n  padding: 2px 8px;\n  border-radius: 12px;\n  cursor: pointer;\n  white-space: nowrap;\n  box-shadow: none;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n.ff-chip-wrapper .ff-default-chip-style--custom:hover {\n  background-color: #610b86;\n  color: #fdfaff;\n}";
+styleInject(css_248z$K);
 
 const Chip = ({
   label = '',
@@ -1741,8 +1796,8 @@ const Chip = ({
   });
 };
 
-var css_248z$K = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm, .ff-input-container .ff-input, .ff-input-container .ff-input-label-container {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8, .ff-input-container:focus-within .ff-input-label-container, .ff-input-container:focus-within .ff-input::placeholder, .ff-input-container:focus-within .ff-input-label-container::placeholder, .ff-input-container .ff-input-message, .ff-input-container--float .ff-input-label-container {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-input-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n.ff-input-container .ff-input, .ff-input-container .ff-input-label-container {\n  padding: 6px 8px;\n  border: 1px solid var(--input-default-border-color);\n  border-radius: 4px;\n  outline: none;\n  line-height: 18px;\n}\n.ff-input-container .ff-input--medium {\n  padding: 10px 9px;\n}\n.ff-input-container .ff-input:disabled, .ff-input-container .ff-input-label-container:disabled {\n  cursor: not-allowed;\n}\n.ff-input-container .ff-input::placeholder, .ff-input-container .ff-input-label-container::placeholder {\n  opacity: 0;\n  line-height: 18px;\n}\n.ff-input-container .ff-input--disabled {\n  background: transparent;\n  border-color: var(--input-default-border-color);\n}\n.ff-input-container .ff-input--danger {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-container .ff-input--transparentBackground {\n  background: transparent;\n}\n.ff-input-container .ff-input--no-border {\n  border: none;\n}\n.ff-input-container .ff-input-label-container {\n  display: flex;\n  gap: 2px;\n  position: absolute;\n  border: none;\n  outline: none;\n  line-height: 18px;\n  margin-top: 1px;\n  transition: all 0.3s ease-in-out;\n}\n.ff-input-container .ff-input-label-container--medium {\n  line-height: 25px;\n}\n.ff-input-container .ff-input-label-container .ff-input-label {\n  color: var(--input-default-label-color);\n}\n.ff-input-container .ff-input-label-container .ff-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-input-container .ff-input-label-container .ff-input-label--disabled {\n  color: var(--input-default-border-color);\n  background-color: var(--input-label-bg-color);\n}\n.ff-input-container .ff-input-label-container .required-asterisk {\n  color: var(--input-error-text-color);\n}\n.ff-input-container:hover .ff-input-label {\n  color: var(--input-hover-border-color);\n}\n.ff-input-container:hover .ff-input-label--no-hover {\n  color: var(--input-default-label-color);\n}\n.ff-input-container:hover .ff-input-label--disabled {\n  color: var(--input-default-border-color);\n}\n.ff-input-container:hover .ff-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-input-container:hover .ff-input, .ff-input-container:hover .ff-input-label-container {\n  border-color: var(--brand-color);\n}\n.ff-input-container:hover .ff-input--no-hover {\n  border-color: var(--input-default-border-color);\n}\n.ff-input-container:hover .ff-input--disabled {\n  background: transparent;\n  border-color: var(--input-default-border-color);\n}\n.ff-input-container:hover .ff-input--danger {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-container:focus-within .ff-input-label-container {\n  top: -6px;\n  background-color: var(--input-label-bg-color);\n  line-height: 12px;\n  padding: 0px 2px;\n  margin-left: 10px;\n}\n.ff-input-container:focus-within .ff-input-label--primary {\n  color: var(--brand-color);\n}\n.ff-input-container:focus-within .ff-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-input-container:focus-within .ff-input--primary {\n  border-color: var(--brand-color);\n}\n.ff-input-container:focus-within .ff-input--danger {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-container:focus-within .ff-input::placeholder, .ff-input-container:focus-within .ff-input-label-container::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-input-container .ff-input-message {\n  padding: 0px 4px;\n  margin-left: 8px;\n  line-height: 12px;\n}\n.ff-input-container .ff-input-message--danger {\n  color: var(--input-error-text-color);\n}\n.ff-input-container--float .ff-input-label-container {\n  top: -6px;\n  background-color: var(--input-label-bg-color);\n  line-height: 12px;\n  padding: 0px 2px;\n  margin-left: 10px;\n}\n.ff-input-container--float--disabled {\n  cursor: not-allowed;\n}\n.ff-input-container--float--disabled .ff-input-label-container {\n  cursor: not-allowed;\n}";
-styleInject(css_248z$K);
+var css_248z$J = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm, .ff-input-container .ff-input, .ff-input-container .ff-input-label-container {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8, .ff-input-container:focus-within .ff-input-label-container, .ff-input-container:focus-within .ff-input::placeholder, .ff-input-container:focus-within .ff-input-label-container::placeholder, .ff-input-container .ff-input-message, .ff-input-container--float .ff-input-label-container {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-input-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n.ff-input-container .ff-input, .ff-input-container .ff-input-label-container {\n  padding: 6px 8px;\n  border: 1px solid var(--input-default-border-color);\n  border-radius: 4px;\n  outline: none;\n  line-height: 18px;\n}\n.ff-input-container .ff-input--medium {\n  padding: 10px 9px;\n}\n.ff-input-container .ff-input:disabled, .ff-input-container .ff-input-label-container:disabled {\n  cursor: not-allowed;\n}\n.ff-input-container .ff-input::placeholder, .ff-input-container .ff-input-label-container::placeholder {\n  opacity: 0;\n  line-height: 18px;\n}\n.ff-input-container .ff-input--disabled {\n  background: transparent;\n  border-color: var(--input-default-border-color);\n}\n.ff-input-container .ff-input--danger {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-container .ff-input--transparentBackground {\n  background: transparent;\n}\n.ff-input-container .ff-input--no-border {\n  border: none;\n}\n.ff-input-container .ff-input-label-container {\n  display: flex;\n  gap: 2px;\n  position: absolute;\n  border: none;\n  outline: none;\n  line-height: 18px;\n  margin-top: 1px;\n  transition: all 0.3s ease-in-out;\n}\n.ff-input-container .ff-input-label-container--medium {\n  line-height: 25px;\n}\n.ff-input-container .ff-input-label-container .ff-input-label {\n  color: var(--input-default-label-color);\n}\n.ff-input-container .ff-input-label-container .ff-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-input-container .ff-input-label-container .ff-input-label--disabled {\n  color: var(--input-default-border-color);\n  background-color: var(--input-label-bg-color);\n}\n.ff-input-container .ff-input-label-container .required-asterisk {\n  color: var(--input-error-text-color);\n}\n.ff-input-container:hover .ff-input-label {\n  color: var(--input-hover-border-color);\n}\n.ff-input-container:hover .ff-input-label--no-hover {\n  color: var(--input-default-label-color);\n}\n.ff-input-container:hover .ff-input-label--disabled {\n  color: var(--input-default-border-color);\n}\n.ff-input-container:hover .ff-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-input-container:hover .ff-input, .ff-input-container:hover .ff-input-label-container {\n  border-color: var(--brand-color);\n}\n.ff-input-container:hover .ff-input--no-hover {\n  border-color: var(--input-default-border-color);\n}\n.ff-input-container:hover .ff-input--disabled {\n  background: transparent;\n  border-color: var(--input-default-border-color);\n}\n.ff-input-container:hover .ff-input--danger {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-container:focus-within .ff-input-label-container {\n  top: -6px;\n  background-color: var(--input-label-bg-color);\n  line-height: 12px;\n  padding: 0px 2px;\n  margin-left: 10px;\n}\n.ff-input-container:focus-within .ff-input-label--primary {\n  color: var(--brand-color);\n}\n.ff-input-container:focus-within .ff-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-input-container:focus-within .ff-input--primary {\n  border-color: var(--brand-color);\n}\n.ff-input-container:focus-within .ff-input--danger {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-container:focus-within .ff-input::placeholder, .ff-input-container:focus-within .ff-input-label-container::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-input-container .ff-input-message {\n  padding: 0px 4px;\n  margin-left: 8px;\n  line-height: 12px;\n}\n.ff-input-container .ff-input-message--danger {\n  color: var(--input-error-text-color);\n}\n.ff-input-container--float .ff-input-label-container {\n  top: -6px;\n  background-color: var(--input-label-bg-color);\n  line-height: 12px;\n  padding: 0px 2px;\n  margin-left: 10px;\n}\n.ff-input-container--float--disabled {\n  cursor: not-allowed;\n}\n.ff-input-container--float--disabled .ff-input-label-container {\n  cursor: not-allowed;\n}";
+styleInject(css_248z$J);
 
 const Input = ({
   type = 'text',
@@ -1820,8 +1875,8 @@ const Input = ({
   });
 };
 
-var css_248z$J = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8, .ff-radial-chart-container svg text {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-radial-chart-container {\n  cursor: pointer;\n}\n.ff-radial-chart-container svg text {\n  font-size: var(--fontSize) !important;\n  font-weight: 400;\n}";
-styleInject(css_248z$J);
+var css_248z$I = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8, .ff-radial-chart-container svg text {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-radial-chart-container {\n  cursor: pointer;\n}\n.ff-radial-chart-container svg text {\n  font-size: var(--fontSize) !important;\n  font-weight: 400;\n}";
+styleInject(css_248z$I);
 
 const useColorMappings$1 = () => useMemo(() => {
   return {
@@ -1963,8 +2018,8 @@ const RadialChart = ({
   });
 };
 
-var css_248z$I = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm, .ff-expandable-chip-menu--medium, .ff-expandable-chip-menu .ff-sub-chip--medium {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-expandable-chip-menu {\n  display: inline-flex;\n  gap: 16px;\n  align-items: center;\n  border-radius: 16px;\n  cursor: pointer;\n  overflow: hidden;\n  width: auto;\n  padding: 4px 8px;\n  transition: all 0.3s ease;\n}\n.ff-expandable-chip-menu--primary {\n  border: 0.5px solid var(--brand-color);\n  background-color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-label-chip {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 4px;\n  white-space: nowrap;\n  padding: 2px 0;\n}\n.ff-expandable-chip-menu .ff-label-chip .arrow-icon {\n  height: 14px;\n  width: 14px;\n  display: grid;\n  place-items: center;\n}\n.ff-expandable-chip-menu .ff-label-chip--primary {\n  color: var(--brand-color);\n}\n.ff-expandable-chip-menu--disabled {\n  opacity: 0.5;\n}\n.ff-expandable-chip-menu--disabled:disabled {\n  pointer-events: none;\n}\n.ff-expandable-chip-menu--medium {\n  line-height: 18px;\n}\n.ff-expandable-chip-menu .ff-sub-chips {\n  display: flex;\n  gap: 8px;\n  max-width: 500px;\n  overflow-x: auto;\n  -ms-overflow-style: none;\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 0.3s ease, opacity 0.3s ease;\n  opacity: 0;\n}\n.ff-expandable-chip-menu .ff-sub-chips::-webkit-scrollbar {\n  display: none;\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chips {\n  transform: scaleX(1);\n  opacity: 1;\n}\n.ff-expandable-chip-menu .ff-sub-chip {\n  padding: 2px 8px;\n  border-radius: 12px;\n  white-space: nowrap;\n  transition: background-color 0.3s ease, color 0.3s ease;\n  opacity: 0;\n  transform: translateX(-10px);\n  animation: fadeIn 0.5s ease forwards;\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary {\n  background: var(--expandable-menu-option-bg);\n  color: var(--brand-color);\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary:hover, .ff-expandable-chip-menu .ff-sub-chip--primary.selected {\n  background-color: var(--brand-color);\n  color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-sub-chip--medium {\n  line-height: 18px;\n}\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n    transform: translateX(-10px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chip {\n  animation: fadeIn 0.5s ease forwards;\n}";
-styleInject(css_248z$I);
+var css_248z$H = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm, .ff-expandable-chip-menu--medium, .ff-expandable-chip-menu .ff-sub-chip--medium {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-expandable-chip-menu {\n  display: inline-flex;\n  gap: 16px;\n  align-items: center;\n  border-radius: 16px;\n  cursor: pointer;\n  overflow: hidden;\n  width: auto;\n  padding: 4px 8px;\n  transition: all 0.3s ease;\n}\n.ff-expandable-chip-menu--primary {\n  border: 0.5px solid var(--brand-color);\n  background-color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-label-chip {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 4px;\n  white-space: nowrap;\n  padding: 2px 0;\n}\n.ff-expandable-chip-menu .ff-label-chip .arrow-icon {\n  height: 14px;\n  width: 14px;\n  display: grid;\n  place-items: center;\n}\n.ff-expandable-chip-menu .ff-label-chip--primary {\n  color: var(--brand-color);\n}\n.ff-expandable-chip-menu--disabled {\n  opacity: 0.5;\n}\n.ff-expandable-chip-menu--disabled:disabled {\n  pointer-events: none;\n}\n.ff-expandable-chip-menu--medium {\n  line-height: 18px;\n}\n.ff-expandable-chip-menu .ff-sub-chips {\n  display: flex;\n  gap: 8px;\n  max-width: 500px;\n  overflow-x: auto;\n  -ms-overflow-style: none;\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 0.3s ease, opacity 0.3s ease;\n  opacity: 0;\n}\n.ff-expandable-chip-menu .ff-sub-chips::-webkit-scrollbar {\n  display: none;\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chips {\n  transform: scaleX(1);\n  opacity: 1;\n}\n.ff-expandable-chip-menu .ff-sub-chip {\n  padding: 2px 8px;\n  border-radius: 12px;\n  white-space: nowrap;\n  transition: background-color 0.3s ease, color 0.3s ease;\n  opacity: 0;\n  transform: translateX(-10px);\n  animation: fadeIn 0.5s ease forwards;\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary {\n  background: var(--expandable-menu-option-bg);\n  color: var(--brand-color);\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary:hover, .ff-expandable-chip-menu .ff-sub-chip--primary.selected {\n  background-color: var(--brand-color);\n  color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-sub-chip--medium {\n  line-height: 18px;\n}\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n    transform: translateX(-10px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chip {\n  animation: fadeIn 0.5s ease forwards;\n}";
+styleInject(css_248z$H);
 
 const ExpandableMenu = ({
   label = '',
@@ -2053,8 +2108,8 @@ const useClickOutside = (ref, callback, ignoreRefs = []) => {
   }, [ref, callback, ignoreRefs]);
 };
 
-var css_248z$H = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-select-dropdown-wrapper .ff-select-options-wrapper {\n  max-height: 160px;\n  z-index: 100;\n  position: absolute;\n  min-width: 100px;\n  border: 1px solid var(--ff-select-option-border-color);\n  box-sizing: border-box;\n  margin-top: 4px;\n  border-radius: 4px;\n  background-color: var(--ff-select-background-color);\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  overflow: hidden auto;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper::-webkit-scrollbar-track {\n  background-color: transparent;\n  border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper .ff-select-option {\n  width: calc(100% - 18px);\n  border: 1px solid transparent;\n  border-radius: 4px;\n  padding: 0px 8px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper .ff-select-option:hover {\n  border-color: var(--ff-select-background-color);\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper .ff-select-no-option {\n  width: calc(100% - 16px);\n  margin: 0;\n  overflow: hidden;\n  padding: 0px 8px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: not-allowed;\n}";
-styleInject(css_248z$H);
+var css_248z$G = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-select-dropdown-wrapper .ff-select-options-wrapper {\n  max-height: 160px;\n  z-index: 100;\n  position: absolute;\n  min-width: 100px;\n  border: 1px solid var(--ff-select-option-border-color);\n  box-sizing: border-box;\n  margin-top: 4px;\n  border-radius: 4px;\n  background-color: var(--ff-select-background-color);\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  overflow: hidden auto;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper::-webkit-scrollbar-track {\n  background-color: transparent;\n  border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper .ff-select-option {\n  width: calc(100% - 18px);\n  border: 1px solid transparent;\n  border-radius: 4px;\n  padding: 0px 8px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper .ff-select-option:hover {\n  border-color: var(--ff-select-background-color);\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper .ff-select-no-option {\n  width: calc(100% - 16px);\n  margin: 0;\n  overflow: hidden;\n  padding: 0px 8px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: not-allowed;\n}";
+styleInject(css_248z$G);
 
 const ffid = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, char => ((char === 'x' ? Math.random() * 16 : Math.random() * 16 & 0x3 | 0x8) | 0).toString(16));
 
@@ -2150,8 +2205,8 @@ const Dropdown$1 = ({
   });
 };
 
-var css_248z$G = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm, .ff-select-wrapper .ff-select, .ff-select-wrapper .ff-select-input {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8, .ff-select-wrapper .ff-select-fieldset .ff-select-legend, .ff-select-wrapper .ff-select-label--active {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-select-wrapper {\n  position: relative;\n}\n.ff-select-wrapper .ff-select-input {\n  cursor: pointer;\n}\n.ff-select-wrapper .ff-select {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  min-height: 32px;\n  min-width: 100px;\n  display: flex;\n  align-items: end;\n  position: relative;\n}\n.ff-select-wrapper .ff-select-fieldset {\n  margin: 0;\n  padding: 25px 0px 0px 8px;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  border-radius: 4px;\n  display: block;\n}\n.ff-select-wrapper .ff-select-fieldset--border-radius {\n  border-radius: 0px 4px 4px 0px;\n}\n.ff-select-wrapper .ff-select-fieldset--no-label {\n  padding: 30px 0px 0px 8px;\n}\n.ff-select-wrapper .ff-select-fieldset--default {\n  opacity: 0;\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-fieldset--active {\n  opacity: 1;\n  border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select-fieldset--option {\n  opacity: 1;\n}\n.ff-select-wrapper .ff-select-fieldset--no-border {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select-fieldset--error {\n  border-color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend {\n  padding: 0 2px;\n  letter-spacing: 0.5px;\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--default {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 0;\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--active {\n  transition: opacity 0.25s ease-out, transform 0.25s ease-out, font-size 0.25s ease-out, padding 0.25s ease-out;\n  opacity: 1;\n  color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--option {\n  opacity: 1;\n  color: var(--ff-select-default-color);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--error {\n  color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--required {\n  margin-right: 2px;\n}\n.ff-select-wrapper .ff-select-input {\n  position: absolute;\n  top: 6px;\n  right: auto;\n  bottom: auto;\n  left: auto;\n  width: 100%;\n  min-height: calc(100% - 8px);\n  padding: 0 28px 0 8px;\n  border-radius: 4px;\n  border: 1px solid transparent;\n  z-index: 100;\n  background: transparent;\n  outline: none;\n}\n.ff-select-wrapper .ff-select-input:hover ~ .ff-select-label {\n  color: var(--ff-select-text-hover-color);\n}\n.ff-select-wrapper .ff-select-input--border-radius {\n  border-radius: 0px 4px 4px 0px;\n}\n.ff-select-wrapper .ff-select-input--default {\n  opacity: 1;\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-input--default:hover {\n  border-color: var(--ff-select-text-color);\n}\n.ff-select-wrapper .ff-select-input--default:hover ~ .ff-select-fieldset--option {\n  border-color: var(--ff-select-text-color);\n}\n.ff-select-wrapper .ff-select-input--default:hover ~ .ff-select-fieldset--option .ff-select-legend--option {\n  color: var(--ff-select-text-color);\n}\n.ff-select-wrapper .ff-select-input--no-label {\n  min-height: calc(100% - 2px);\n  margin-top: 0px;\n  top: 0px;\n}\n.ff-select-wrapper .ff-select-input--active {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--active:hover {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--no-border {\n  border: none;\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--no-border:hover {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--no-border:hover ~ .ff-select-fieldset--no-border {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--disable {\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-input--disable:hover {\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-input--disable:hover ~ .ff-select-label--default {\n  color: var(--ff-select-default-color);\n}\n.ff-select-wrapper .ff-select-input--error {\n  border-color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-input--error:hover {\n  border-color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-label {\n  position: absolute;\n  top: 13px;\n  right: auto;\n  bottom: auto;\n  left: 8px;\n  z-index: 1;\n  font-size: 12px;\n  top: 60%;\n  padding-left: 8px;\n}\n.ff-select-wrapper .ff-select-label--default {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 1;\n  color: var(--ff-select-default-color);\n  transform: translateY(-50%);\n}\n.ff-select-wrapper .ff-select-label--active {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 0;\n  transform: translateY(-150%);\n  padding: 0 6px;\n}\n.ff-select-wrapper .ff-select-label--required {\n  margin-right: 2px;\n}\n.ff-select-wrapper .ff-select-arrow {\n  position: absolute;\n  top: 60%;\n  height: 100%;\n  right: 10px;\n  transform: rotateX(180deg) translateY(50%);\n  cursor: pointer;\n}\n.ff-select-wrapper .ff-select-arrow--no-label {\n  top: 50%;\n}\n.ff-select-wrapper .ff-select-arrow--down {\n  transform: rotateX(0deg) translateY(-50%);\n  z-index: 101;\n}\n.ff-select-wrapper-error-text {\n  position: absolute;\n  top: auto;\n  right: auto;\n  bottom: -14px;\n  left: 12px;\n  white-space: nowrap;\n}";
-styleInject(css_248z$G);
+var css_248z$F = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm, .ff-select-wrapper .ff-select, .ff-select-wrapper .ff-select-input {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8, .ff-select-wrapper .ff-select-fieldset .ff-select-legend, .ff-select-wrapper .ff-select-label--active {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-select-wrapper {\n  position: relative;\n}\n.ff-select-wrapper .ff-select-input {\n  cursor: pointer;\n}\n.ff-select-wrapper .ff-select {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  min-height: 32px;\n  min-width: 100px;\n  display: flex;\n  align-items: end;\n  position: relative;\n}\n.ff-select-wrapper .ff-select-fieldset {\n  margin: 0;\n  padding: 25px 0px 0px 8px;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  border-radius: 4px;\n  display: block;\n}\n.ff-select-wrapper .ff-select-fieldset--border-radius {\n  border-radius: 0px 4px 4px 0px;\n}\n.ff-select-wrapper .ff-select-fieldset--no-label {\n  padding: 30px 0px 0px 8px;\n}\n.ff-select-wrapper .ff-select-fieldset--default {\n  opacity: 0;\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-fieldset--active {\n  opacity: 1;\n  border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select-fieldset--option {\n  opacity: 1;\n}\n.ff-select-wrapper .ff-select-fieldset--no-border {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select-fieldset--error {\n  border-color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend {\n  padding: 0 2px;\n  letter-spacing: 0.5px;\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--default {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 0;\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--active {\n  transition: opacity 0.25s ease-out, transform 0.25s ease-out, font-size 0.25s ease-out, padding 0.25s ease-out;\n  opacity: 1;\n  color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--option {\n  opacity: 1;\n  color: var(--ff-select-default-color);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--error {\n  color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--required {\n  margin-right: 2px;\n}\n.ff-select-wrapper .ff-select-input {\n  position: absolute;\n  top: 6px;\n  right: auto;\n  bottom: auto;\n  left: auto;\n  width: 100%;\n  min-height: calc(100% - 8px);\n  padding: 0 28px 0 8px;\n  border-radius: 4px;\n  border: 1px solid transparent;\n  z-index: 100;\n  background: transparent;\n  outline: none;\n}\n.ff-select-wrapper .ff-select-input:hover ~ .ff-select-label {\n  color: var(--ff-select-text-hover-color);\n}\n.ff-select-wrapper .ff-select-input--border-radius {\n  border-radius: 0px 4px 4px 0px;\n}\n.ff-select-wrapper .ff-select-input--default {\n  opacity: 1;\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-input--default:hover {\n  border-color: var(--ff-select-text-color);\n}\n.ff-select-wrapper .ff-select-input--default:hover ~ .ff-select-fieldset--option {\n  border-color: var(--ff-select-text-color);\n}\n.ff-select-wrapper .ff-select-input--default:hover ~ .ff-select-fieldset--option .ff-select-legend--option {\n  color: var(--ff-select-text-color);\n}\n.ff-select-wrapper .ff-select-input--no-label {\n  min-height: calc(100% - 2px);\n  margin-top: 0px;\n  top: 0px;\n}\n.ff-select-wrapper .ff-select-input--active {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--active:hover {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--no-border {\n  border: none;\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--no-border:hover {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--no-border:hover ~ .ff-select-fieldset--no-border {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--disable {\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-input--disable:hover {\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-input--disable:hover ~ .ff-select-label--default {\n  color: var(--ff-select-default-color);\n}\n.ff-select-wrapper .ff-select-input--error {\n  border-color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-input--error:hover {\n  border-color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-label {\n  position: absolute;\n  top: 13px;\n  right: auto;\n  bottom: auto;\n  left: 8px;\n  z-index: 1;\n  font-size: 12px;\n  top: 60%;\n  padding-left: 8px;\n}\n.ff-select-wrapper .ff-select-label--default {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 1;\n  color: var(--ff-select-default-color);\n  transform: translateY(-50%);\n}\n.ff-select-wrapper .ff-select-label--active {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 0;\n  transform: translateY(-150%);\n  padding: 0 6px;\n}\n.ff-select-wrapper .ff-select-label--required {\n  margin-right: 2px;\n}\n.ff-select-wrapper .ff-select-arrow {\n  position: absolute;\n  top: 60%;\n  height: 100%;\n  right: 10px;\n  transform: rotateX(180deg) translateY(50%);\n  cursor: pointer;\n}\n.ff-select-wrapper .ff-select-arrow--no-label {\n  top: 50%;\n}\n.ff-select-wrapper .ff-select-arrow--down {\n  transform: rotateX(0deg) translateY(-50%);\n  z-index: 101;\n}\n.ff-select-wrapper-error-text {\n  position: absolute;\n  top: auto;\n  right: auto;\n  bottom: -14px;\n  left: 12px;\n  white-space: nowrap;\n}";
+styleInject(css_248z$F);
 
 const portalPosition = {
   positionX: 0,
@@ -2518,8 +2573,8 @@ const Select$1 = ({
   });
 };
 
-var css_248z$F = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm, .ff-textarea-container {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8, .ff-textarea-container .msg-character-count, .ff-textarea-container:focus-within .ff-textarea-label-container, .ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder, .ff-textarea-container .ff-textarea-message, .ff-textarea-container--float .ff-textarea-label-container {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-textarea-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  gap: 5px;\n}\n.ff-textarea-container .msg-character-count {\n  display: flex;\n  color: var(--text-area-default-color);\n  justify-content: flex-end;\n}\n.ff-textarea-container .ff-textarea, .ff-textarea-container .ff-textarea-label-container {\n  padding: 8px;\n  width: 100%;\n  min-height: 80px;\n  gap: 0px;\n  border: 1px solid var(--default-icon-color);\n  border-radius: 4px;\n  outline: none;\n  line-height: 18px;\n  font-weight: 400;\n}\n.ff-textarea-container .ff-textarea--resize {\n  resize: none;\n}\n.ff-textarea-container .ff-textarea:disabled, .ff-textarea-container .ff-textarea-label-container:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ff-textarea-container .ff-textarea:disabled:hover, .ff-textarea-container .ff-textarea-label-container:disabled:hover {\n  border-color: var(--default-icon-color);\n  color: inherit;\n}\n.ff-textarea-container .ff-textarea::placeholder, .ff-textarea-container .ff-textarea-label-container::placeholder {\n  opacity: 0;\n}\n.ff-textarea-container .ff-textarea--danger {\n  border-color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea--transparentBackground {\n  background: transparent;\n}\n.ff-textarea-container .ff-textarea-label-container {\n  display: flex;\n  position: absolute;\n  border: none;\n  outline: none;\n  margin-top: 1px;\n  transition: all 0.3s ease-in-out;\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label {\n  padding: 1px;\n  height: 10px;\n  width: auto;\n  background-color: var(--drawer-footer-bg);\n  color: var(--text-area-default-color);\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label--danger {\n  color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea-label-container .required-asterisk {\n  color: var(--error_light);\n}\n.ff-textarea-container:hover .ff-textarea-label {\n  color: var(--text-color);\n}\n.ff-textarea-container:hover .ff-textarea, .ff-textarea-container:hover .ff-textarea-label-container {\n  border-color: var(--text-color);\n}\n.ff-textarea-container:focus-within .ff-textarea-label-container {\n  font-weight: 400;\n  line-height: 12px;\n  letter-spacing: 0.5px;\n  text-align: left;\n  top: -6px;\n  background-color: transparent;\n  padding: 0px 2px;\n  margin-left: 7px;\n}\n.ff-textarea-container:focus-within .ff-textarea-label--primary {\n  color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea--primary {\n  border-color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-textarea-container .ff-textarea-message {\n  padding: 0px 4px;\n  margin-left: 8px;\n  line-height: 12px;\n}\n.ff-textarea-container .ff-textarea-message--danger {\n  color: var(--error_light);\n}\n.ff-textarea-container--float .ff-textarea-label-container {\n  letter-spacing: 0.5px;\n  top: -6px;\n  background-color: transparent;\n  line-height: 12px;\n  padding: 0px 2px;\n  margin-left: 7px;\n}\n.ff-textarea-container--disabled {\n  cursor: not-allowed;\n}\n.ff-textarea-container--disabled:hover .ff-textarea-label {\n  color: var(--text-area-default-color);\n}\n.ff-textarea-container--disabled:hover .ff-textarea, .ff-textarea-container--disabled:hover .ff-textarea-container .ff-textarea-label-container, .ff-textarea-container .ff-textarea-container--disabled:hover .ff-textarea-label-container {\n  border-color: var(--default-icon-color);\n}\n.ff-textarea-container--disabled .ff-textarea-label-container {\n  cursor: not-allowed;\n}";
-styleInject(css_248z$F);
+var css_248z$E = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm, .ff-textarea-container {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8, .ff-textarea-container .msg-character-count, .ff-textarea-container:focus-within .ff-textarea-label-container, .ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder, .ff-textarea-container .ff-textarea-message, .ff-textarea-container--float .ff-textarea-label-container {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-textarea-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  gap: 5px;\n}\n.ff-textarea-container .msg-character-count {\n  display: flex;\n  color: var(--text-area-default-color);\n  justify-content: flex-end;\n}\n.ff-textarea-container .ff-textarea, .ff-textarea-container .ff-textarea-label-container {\n  padding: 8px;\n  width: 100%;\n  min-height: 80px;\n  gap: 0px;\n  border: 1px solid var(--default-icon-color);\n  border-radius: 4px;\n  outline: none;\n  line-height: 18px;\n  font-weight: 400;\n}\n.ff-textarea-container .ff-textarea--resize {\n  resize: none;\n}\n.ff-textarea-container .ff-textarea:disabled, .ff-textarea-container .ff-textarea-label-container:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ff-textarea-container .ff-textarea:disabled:hover, .ff-textarea-container .ff-textarea-label-container:disabled:hover {\n  border-color: var(--default-icon-color);\n  color: inherit;\n}\n.ff-textarea-container .ff-textarea::placeholder, .ff-textarea-container .ff-textarea-label-container::placeholder {\n  opacity: 0;\n}\n.ff-textarea-container .ff-textarea--danger {\n  border-color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea--transparentBackground {\n  background: transparent;\n}\n.ff-textarea-container .ff-textarea-label-container {\n  display: flex;\n  position: absolute;\n  border: none;\n  outline: none;\n  margin-top: 1px;\n  transition: all 0.3s ease-in-out;\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label {\n  padding: 1px;\n  height: 10px;\n  width: auto;\n  background-color: var(--drawer-footer-bg);\n  color: var(--text-area-default-color);\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label--danger {\n  color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea-label-container .required-asterisk {\n  color: var(--error_light);\n}\n.ff-textarea-container:hover .ff-textarea-label {\n  color: var(--text-color);\n}\n.ff-textarea-container:hover .ff-textarea, .ff-textarea-container:hover .ff-textarea-label-container {\n  border-color: var(--text-color);\n}\n.ff-textarea-container:focus-within .ff-textarea-label-container {\n  font-weight: 400;\n  line-height: 12px;\n  letter-spacing: 0.5px;\n  text-align: left;\n  top: -6px;\n  background-color: transparent;\n  padding: 0px 2px;\n  margin-left: 7px;\n}\n.ff-textarea-container:focus-within .ff-textarea-label--primary {\n  color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea--primary {\n  border-color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-textarea-container .ff-textarea-message {\n  padding: 0px 4px;\n  margin-left: 8px;\n  line-height: 12px;\n}\n.ff-textarea-container .ff-textarea-message--danger {\n  color: var(--error_light);\n}\n.ff-textarea-container--float .ff-textarea-label-container {\n  letter-spacing: 0.5px;\n  top: -6px;\n  background-color: transparent;\n  line-height: 12px;\n  padding: 0px 2px;\n  margin-left: 7px;\n}\n.ff-textarea-container--disabled {\n  cursor: not-allowed;\n}\n.ff-textarea-container--disabled:hover .ff-textarea-label {\n  color: var(--text-area-default-color);\n}\n.ff-textarea-container--disabled:hover .ff-textarea, .ff-textarea-container--disabled:hover .ff-textarea-container .ff-textarea-label-container, .ff-textarea-container .ff-textarea-container--disabled:hover .ff-textarea-label-container {\n  border-color: var(--default-icon-color);\n}\n.ff-textarea-container--disabled .ff-textarea-label-container {\n  cursor: not-allowed;\n}";
+styleInject(css_248z$E);
 
 const truncateText = (text, maxLength) => {
   if (!text || maxLength <= 0) return '';
@@ -2594,8 +2649,8 @@ const Textarea = ({
   });
 };
 
-var css_248z$E = ".ff-status-button {\n  border: none;\n  border-radius: 4px;\n  padding: 0 4px;\n  cursor: pointer;\n  width: 76px;\n  height: 16px;\n}\n.ff-status-button__text {\n  color: inherit;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 76px;\n  text-transform: capitalize;\n}\n.ff-status-button--passed {\n  background-color: var(--status-button-bg-passed);\n  color: var(--status-button-text-passed);\n}\n.ff-status-button--failed {\n  background-color: var(--status-button-bg-failed);\n  color: var(--status-button-text-failed);\n}\n.ff-status-button--running {\n  background-color: var(--status-button-bg-running);\n  color: var(--status-button-text-running);\n}\n.ff-status-button--skipped {\n  background-color: var(--status-button-bg-skipped);\n  color: var(--status-button-text-skipped);\n}\n.ff-status-button--warning {\n  background-color: var(--status-button-bg-warning);\n  color: var(--status-button-text-warning);\n}\n.ff-status-button--terminated {\n  background-color: var(--status-button-bg-terminated);\n  color: var(--status-button-text-terminated);\n}\n.ff-status-button--partially-executed {\n  background-color: var(--status-button-bg-partiallyExecuted);\n  color: var(--status-button-text-partiallyExecuted);\n}\n.ff-status-button--aborted {\n  background-color: var(--status-button-bg-aborted);\n  color: var(--status-button-text-aborted);\n}\n.ff-status-button--not-executed {\n  background-color: var(--status-button-bg-notExecuted);\n  color: var(--status-button-text-notExecuted);\n}\n.ff-status-button:disabled {\n  opacity: 50%;\n  cursor: not-allowed;\n}";
-styleInject(css_248z$E);
+var css_248z$D = ".ff-status-button {\n  border: none;\n  border-radius: 4px;\n  padding: 0 4px;\n  cursor: pointer;\n  width: 76px;\n  height: 16px;\n}\n.ff-status-button__text {\n  color: inherit;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 76px;\n  text-transform: capitalize;\n}\n.ff-status-button--passed {\n  background-color: var(--status-button-bg-passed);\n  color: var(--status-button-text-passed);\n}\n.ff-status-button--failed {\n  background-color: var(--status-button-bg-failed);\n  color: var(--status-button-text-failed);\n}\n.ff-status-button--running {\n  background-color: var(--status-button-bg-running);\n  color: var(--status-button-text-running);\n}\n.ff-status-button--skipped {\n  background-color: var(--status-button-bg-skipped);\n  color: var(--status-button-text-skipped);\n}\n.ff-status-button--warning {\n  background-color: var(--status-button-bg-warning);\n  color: var(--status-button-text-warning);\n}\n.ff-status-button--terminated {\n  background-color: var(--status-button-bg-terminated);\n  color: var(--status-button-text-terminated);\n}\n.ff-status-button--partially-executed {\n  background-color: var(--status-button-bg-partiallyExecuted);\n  color: var(--status-button-text-partiallyExecuted);\n}\n.ff-status-button--aborted {\n  background-color: var(--status-button-bg-aborted);\n  color: var(--status-button-text-aborted);\n}\n.ff-status-button--not-executed {\n  background-color: var(--status-button-bg-notExecuted);\n  color: var(--status-button-text-notExecuted);\n}\n.ff-status-button:disabled {\n  opacity: 50%;\n  cursor: not-allowed;\n}";
+styleInject(css_248z$D);
 
 const StatusButton = ({
   status = 'passed',
@@ -2623,8 +2678,8 @@ const StatusButton = ({
   });
 };
 
-var css_248z$D = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm, .ff-menu-option-container .ff-option-card .ff-options {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-menu-option-container {\n  cursor: pointer;\n  position: relative;\n}\n.ff-menu-option-container .ff-icon-label {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container:hover {\n  background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark {\n  background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover {\n  background-color: var(--menu-variant-dark-icon-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--brand-color);\n  cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked:hover {\n  background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked.dark {\n  background-color: var(--menu-variant-dark-icon-color);\n}\n.ff-menu-option-container .ff-option-card {\n  position: absolute;\n  border: 1px solid var(--option-card-border-color);\n  background: var(--option-card-bg-color);\n  border-radius: 4px;\n  margin: 2px;\n  min-height: 32px;\n  min-width: 111px;\n  z-index: 100000;\n  white-space: nowrap;\n}\n.ff-menu-option-container .ff-option-card .ff-options {\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  line-height: 16px;\n  gap: 8px;\n}\n.ff-menu-option-container .ff-option-card .ff-options:hover {\n  background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-option-card .ff-options label {\n  cursor: pointer;\n}\n.ff-menu-option-container .ff-option-card .ff-disable-option {\n  opacity: 0.5;\n  cursor: no-drop;\n}\n.ff-menu-option-container .ff-option-card .ff-disable-option label {\n  cursor: no-drop;\n}";
-styleInject(css_248z$D);
+var css_248z$C = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm, .ff-menu-option-container .ff-option-card .ff-options {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-menu-option-container {\n  cursor: pointer;\n  position: relative;\n}\n.ff-menu-option-container .ff-icon-label {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container:hover {\n  background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark {\n  background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover {\n  background-color: var(--menu-variant-dark-icon-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--brand-color);\n  cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked:hover {\n  background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked.dark {\n  background-color: var(--menu-variant-dark-icon-color);\n}\n.ff-menu-option-container .ff-option-card {\n  position: absolute;\n  border: 1px solid var(--option-card-border-color);\n  background: var(--option-card-bg-color);\n  border-radius: 4px;\n  margin: 2px;\n  min-height: 32px;\n  min-width: 111px;\n  z-index: 100000;\n  white-space: nowrap;\n}\n.ff-menu-option-container .ff-option-card .ff-options {\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  line-height: 16px;\n  gap: 8px;\n}\n.ff-menu-option-container .ff-option-card .ff-options:hover {\n  background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-option-card .ff-options label {\n  cursor: pointer;\n}\n.ff-menu-option-container .ff-option-card .ff-disable-option {\n  opacity: 0.5;\n  cursor: no-drop;\n}\n.ff-menu-option-container .ff-option-card .ff-disable-option label {\n  cursor: no-drop;\n}";
+styleInject(css_248z$C);
 
 const Option$2 = ({
   option,
@@ -2749,8 +2804,8 @@ const MenuOption = ({
   });
 };
 
-var css_248z$C = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm, .ff-table tbody tr td {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd, .ff-table thead tr th {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-fixed-header-table {\n  overflow-y: auto;\n}\n\n.ff-table-icon {\n  position: absolute;\n  top: 10px;\n  right: 0;\n  margin-right: 10px;\n  z-index: 100;\n  cursor: pointer;\n}\n\n.ff-table {\n  width: 100%;\n}\n.ff-table th,\n.ff-table td {\n  text-align: left;\n  font-size: 12px;\n  padding: 9px 8px;\n}\n.ff-table thead tr th {\n  border-bottom: 1px solid var(--slider-table-color);\n  text-transform: uppercase;\n}\n.ff-table thead tr th:first-child div {\n  align-items: center;\n}\n.ff-table thead tr th:first-child div .ff-table-checkbox {\n  padding-right: 8px;\n}\n.ff-table tbody tr .action-column {\n  opacity: 0;\n}\n.ff-table tbody tr .icon-container {\n  padding-left: 10px;\n  opacity: 0;\n  display: flex;\n  justify-content: flex-end;\n  transition: opacity 0.3s ease, transform 0.3s ease;\n  transform: translateX(20px);\n}\n.ff-table tbody tr:hover {\n  background-color: var(--hover-color);\n}\n.ff-table tbody tr:hover .icon-container {\n  opacity: 1;\n  transform: translateX(0);\n}\n.ff-table tbody tr td {\n  position: relative;\n  color: var(--table-column-text-color);\n}\n.ff-table tbody tr td.clickable-cell {\n  cursor: pointer;\n}\n.ff-table tbody tr td:first-child div {\n  align-items: center;\n}\n.ff-table tbody tr td:first-child div .ff-table-checkbox {\n  padding-right: 8px;\n}\n.ff-table .primary-bg {\n  background-color: var(--brand-color);\n}\n.ff-table .secondary-bg {\n  background-color: var(--slider-table-color);\n}\n.ff-table .default-bg {\n  background-color: transparent;\n}\n.ff-table .default-color {\n  color: var(--table-header-text-color);\n}\n.ff-table .primary-color {\n  color: var(--brand-color);\n}\n\n.border-borderRadius {\n  border: 1px solid var(--slider-table-color);\n  border-radius: 5px;\n  border-collapse: none !important;\n}\n\n.ff-fixed-header {\n  position: sticky !important;\n  top: 0;\n  z-index: 99;\n  background-color: Var(--file-details-bg);\n}\n\n.no-data-content {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\ntbody tr.disabled-row {\n  opacity: 0.5;\n  cursor: not-allowed;\n}";
-styleInject(css_248z$C);
+var css_248z$B = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm, .ff-table tbody tr td {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd, .ff-table thead tr th {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-fixed-header-table {\n  overflow-y: auto;\n}\n\n.ff-table-icon {\n  position: absolute;\n  top: 10px;\n  right: 0;\n  margin-right: 10px;\n  z-index: 100;\n  cursor: pointer;\n}\n\n.ff-table {\n  width: 100%;\n}\n.ff-table th,\n.ff-table td {\n  text-align: left;\n  font-size: 12px;\n  padding: 9px 8px;\n}\n.ff-table thead tr th {\n  border-bottom: 1px solid var(--slider-table-color);\n  text-transform: uppercase;\n}\n.ff-table thead tr th:first-child div {\n  align-items: center;\n}\n.ff-table thead tr th:first-child div .ff-table-checkbox {\n  padding-right: 8px;\n}\n.ff-table tbody tr .action-column {\n  opacity: 0;\n}\n.ff-table tbody tr .icon-container {\n  padding-left: 10px;\n  opacity: 0;\n  display: flex;\n  justify-content: flex-end;\n  transition: opacity 0.3s ease, transform 0.3s ease;\n  transform: translateX(20px);\n}\n.ff-table tbody tr:hover {\n  background-color: var(--hover-color);\n}\n.ff-table tbody tr:hover .icon-container {\n  opacity: 1;\n  transform: translateX(0);\n}\n.ff-table tbody tr td {\n  position: relative;\n  color: var(--table-column-text-color);\n}\n.ff-table tbody tr td.clickable-cell {\n  cursor: pointer;\n}\n.ff-table tbody tr td:first-child div {\n  align-items: center;\n}\n.ff-table tbody tr td:first-child div .ff-table-checkbox {\n  padding-right: 8px;\n}\n.ff-table .primary-bg {\n  background-color: var(--brand-color);\n}\n.ff-table .secondary-bg {\n  background-color: var(--slider-table-color);\n}\n.ff-table .default-bg {\n  background-color: transparent;\n}\n.ff-table .default-color {\n  color: var(--table-header-text-color);\n}\n.ff-table .primary-color {\n  color: var(--brand-color);\n}\n\n.border-borderRadius {\n  border: 1px solid var(--slider-table-color);\n  border-radius: 5px;\n  border-collapse: none !important;\n}\n\n.ff-fixed-header {\n  position: sticky !important;\n  top: 0;\n  z-index: 99;\n  background-color: Var(--file-details-bg);\n}\n\n.no-data-content {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\ntbody tr.disabled-row {\n  opacity: 0.5;\n  cursor: not-allowed;\n}";
+styleInject(css_248z$B);
 
 const isFunction$2 = functionToCheck => {
   return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
@@ -2798,56 +2853,6 @@ const prepareData = (dataObj, columnObj) => {
   }
 };
 
-var css_248z$B = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-checkbox--overlay {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  cursor: pointer;\n  position: relative;\n}\n.ff-checkbox--overlay .ff-checkbox-input {\n  display: none;\n}\n.ff-checkbox--overlay .ff-checkbox-custom {\n  width: 16px;\n  height: 16px;\n  border: 1px solid var(--checkbox-border-color);\n  box-sizing: border-box;\n  border-radius: 2px;\n  margin-right: 8px;\n  background-color: var(--checkbox-bg-color);\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::before {\n  content: \"\";\n  width: 9px;\n  height: 2px;\n  background-color: var(--checkbox-partial-color);\n  border-radius: 2px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(180deg);\n  opacity: 0;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::after {\n  content: \"\";\n  width: 16px;\n  height: 16px;\n  border: 4px solid var(--checkbox-hover-color);\n  border-radius: 4px;\n  position: absolute;\n  opacity: 0;\n  background-color: var(--checkbox-hover-color);\n  z-index: -1;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover {\n  border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover::after {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom {\n  background: var(--brand-color);\n  border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom {\n  background: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom::after {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom {\n  opacity: 0.5;\n  cursor: not-allowed;\n  border: 1px solid var(--checkbox-border-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom::after {\n  opacity: 0;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial {\n  background-color: var(--brand-color);\n  border: none;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial::before {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover {\n  background-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover::after {\n  opacity: 1;\n}";
-styleInject(css_248z$B);
-
-const Checkbox = ({
-  id,
-  name,
-  label,
-  disabled = false,
-  checked: initialChecked = false,
-  partial = false,
-  onChange
-}) => {
-  const [checked, setChecked] = useState(initialChecked);
-  useEffect(() => {
-    setChecked(initialChecked);
-  }, [initialChecked]);
-  const handleCheckboxChange = event => {
-    if (!disabled) {
-      setChecked(prev => !prev), onChange?.(event);
-    }
-  };
-  return jsxs("label", {
-    className: "ff-checkbox--overlay",
-    htmlFor: id,
-    children: [jsx("input", {
-      type: "checkbox",
-      className: "ff-checkbox-input",
-      id: id,
-      name: name,
-      checked: checked,
-      onChange: handleCheckboxChange,
-      disabled: disabled
-    }), jsx("span", {
-      className: classNames('ff-checkbox-custom', {
-        'ff-checkbox-checked': checked,
-        'ff-storybook-checkbox--partial': partial && !checked
-      }),
-      children: checked && jsx(Icon, {
-        name: "tick",
-        height: 6,
-        width: 8,
-        color: "var(--primary-icon-color)"
-      })
-    }), jsx(Typography, {
-      as: "span",
-      children: label
-    })]
-  });
-};
-
 // import NoData from '../NoData/NoData';
 const Table$1 = ({
   data = [],
@@ -8240,6 +8245,7 @@ const Forms = ({
     handleSubmit
   } = methods;
   return jsx("form", {
+    id: id,
     onSubmit: handleSubmit(onSubmit),
     children: children(methods)
   });
@@ -51430,7 +51436,7 @@ const ExcelFile = ({
   });
 };
 
-var css_248z = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-expandable-chip-menu {\n  width: 75px;\n  height: 32px;\n  border: 0.5px solid;\n  border-radius: 16px;\n  color: var(--brand-color);\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-expandable-chip-menu .ff-label-chip--active {\n  color: var(--ff-header-text-color);\n}\n.ff-expandable-chip-menu--active {\n  background: var(--brand-color);\n}";
+var css_248z = "@font-face {\n  font-family: \"Poppins\";\n  font-weight: 400;\n  src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 500;\n  src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 600;\n  src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n  font-family: \"Poppins\";\n  font-weight: 700;\n  src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 80px;\n}\n\n.ff-Module-chip {\n  width: 75px;\n  height: 32px;\n  border: 0.5px solid;\n  border-radius: 16px;\n  color: var(--brand-color);\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-Module-chip .ff-Module-label-chip--active {\n  color: var(--ff-header-text-color);\n}\n.ff-Module-chip--active {\n  background: var(--brand-color);\n}";
 styleInject(css_248z);
 
 const ModuleChip = ({
@@ -51439,13 +51445,13 @@ const ModuleChip = ({
   onClick = () => {}
 }) => {
   return jsx("div", {
-    className: classNames('ff-expandable-chip-menu', {
-      'ff-expandable-chip-menu--active': isActive
+    className: classNames('ff-Module-chip', {
+      'ff-Module-chip--active': isActive
     }),
     onClick: onClick,
     children: jsx("div", {
-      className: classNames(`ff-label-chip `, {
-        'ff-label-chip--active': isActive
+      className: classNames(`ff-Module-label-chip `, {
+        'ff-Module-label-chip--active': isActive
       }),
       children: jsx(Typography, {
         fontSize: '14px',