@majoo-ui/react 1.63.3 → 2.0.1

package/Separator.esm.js

@@ -0,0 +1,3002 @@
+import * as React from 'react';
+import React__default, { useState, createContext, useContext, useEffect, useCallback, cloneElement, useRef, createElement } from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { q as iteratorHelperThrowsOnInvalidIterator$1, r as iteratorCreateProxy, t as callWithSafeIterationClosing$1, T as Text, P as PropTypes, F as Flex, C as ConditionalWrapper, _ as __rest, l as __awaiter, a as Paragraph, B as Box, M as ModalDialog, c as ModalDialogTitle, d as ModalDialogContent } from './ModalDialog.esm.js';
+import { a as aCallable$2, i as iteratorHelperWithoutClosingOnEarlyError$2, _ as _export, b as anObject$2, c as iteratorClose$2, f as functionCall, g as getIteratorDirect$2, s as styled, k as keyframes, d as iterate$1, J as objectDefineProperty, K as wellKnownSymbol$1, L as objectCreate, p as fails$2, M as arrayIncludes, w as classofRaw, B as descriptors, N as toObject$1, A as lengthOfArrayLike$1, h as colors$1, H as commonjsGlobal, I as getDefaultExportFromCjs } from './stitches.config.esm.js';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { CircleQuestionOutline, CloseOutline, CircleInfoOutline, SearchOutline, CloseFilled, CaretDownOutline } from '@majoo-ui/icons';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { renderToString } from 'react-dom/server';
+import Downshift from 'downshift';
+import debounce from 'lodash.debounce';
+import { useTranslation } from 'react-i18next';
+import { foundations } from '@majoo-ui/core';
+import InfiniteScroll from 'react-infinite-scroller';
+import { Portal } from '@majoo-ui/helpers';
+import { useFloating, offset, shift, flip, useInteractions, useClick, useDismiss, FloatingFocusManager, FloatingPortal } from '@floating-ui/react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+
+var $$3 = _export;
+var call$1 = functionCall;
+var aCallable$1 = aCallable$2;
+var anObject$1 = anObject$2;
+var getIteratorDirect$1 = getIteratorDirect$2;
+var createIteratorProxy = iteratorCreateProxy;
+var callWithSafeIterationClosing = callWithSafeIterationClosing$1;
+var iteratorClose$1 = iteratorClose$2;
+var iteratorHelperThrowsOnInvalidIterator = iteratorHelperThrowsOnInvalidIterator$1;
+var iteratorHelperWithoutClosingOnEarlyError$1 = iteratorHelperWithoutClosingOnEarlyError$2;
+
+var FILTER_WITHOUT_THROWING_ON_INVALID_ITERATOR = !iteratorHelperThrowsOnInvalidIterator('filter', function () { /* empty */ });
+var filterWithoutClosingOnEarlyError = !FILTER_WITHOUT_THROWING_ON_INVALID_ITERATOR
+  && iteratorHelperWithoutClosingOnEarlyError$1('filter', TypeError);
+
+var FORCED$1 = FILTER_WITHOUT_THROWING_ON_INVALID_ITERATOR || filterWithoutClosingOnEarlyError;
+
+var IteratorProxy = createIteratorProxy(function () {
+  var iterator = this.iterator;
+  var predicate = this.predicate;
+  var next = this.next;
+  var result, done, value;
+  while (true) {
+    result = anObject$1(call$1(next, iterator));
+    done = this.done = !!result.done;
+    if (done) return;
+    value = result.value;
+    if (callWithSafeIterationClosing(iterator, predicate, [value, this.counter++], true)) return value;
+  }
+});
+
+// `Iterator.prototype.filter` method
+// https://tc39.es/ecma262/#sec-iterator.prototype.filter
+$$3({ target: 'Iterator', proto: true, real: true, forced: FORCED$1 }, {
+  filter: function filter(predicate) {
+    anObject$1(this);
+    try {
+      aCallable$1(predicate);
+    } catch (error) {
+      iteratorClose$1(this, 'throw', error);
+    }
+
+    if (filterWithoutClosingOnEarlyError) return call$1(filterWithoutClosingOnEarlyError, this, predicate);
+
+    return new IteratorProxy(getIteratorDirect$1(this), {
+      predicate: predicate
+    });
+  }
+});
+
+const Badge = styled(Text, {
+  // Reset
+  alignItems: 'center',
+  appearance: 'none',
+  borderWidth: '0',
+  boxSizing: 'border-box',
+  display: 'inline-flex',
+  flexShrink: 0,
+  fontFamily: 'inherit',
+  fontSize: '$caption',
+  fontWeight: 600,
+  justifyContent: 'center',
+  lineHeight: '1',
+  verticalAlign: 'middle',
+  outline: 'none',
+  padding: '$spacing-01 $spacing-02',
+  textDecoration: 'none',
+  userSelect: 'none',
+  WebkitTapHighlightColor: 'rgba(0,0,0,0)',
+  '&:disabled': {
+    backgroundColor: '$btnDisable',
+    pointerEvents: 'none',
+    color: '$textDisable'
+  },
+  // Custom
+  borderRadius: '$md',
+  color: '$textPrimary',
+  whiteSpace: 'nowrap',
+  fontVariantNumeric: 'tabular-nums',
+  backgroundColor: '$btnDisable',
+  variants: {
+    colorScheme: {
+      gray: {
+        subtleColor: 'gray'
+      },
+      primary: {
+        subtleColor: 'primary'
+      },
+      secondary: {
+        subtleColor: 'secondary'
+      },
+      blue: {
+        subtleColor: 'blue'
+      },
+      orange: {
+        subtleColor: 'orange'
+      },
+      red: {
+        subtleColor: 'red'
+      },
+      purple: {
+        subtleColor: 'purple'
+      },
+      green: {
+        subtleColor: 'green'
+      }
+    },
+    badgeVariant: {
+      outline: {
+        backgroundColor: 'transparent',
+        border: '1px solid CurrentColor'
+      },
+      solid: {
+        color: '$white'
+      },
+      subtle: {},
+      alpha: {}
+    }
+  },
+  compoundVariants: [{
+    badgeVariant: 'outline',
+    css: {
+      backgroundColor: 'transparent',
+      border: '1px solid CurrentColor'
+    }
+  }, {
+    colorScheme: 'gray',
+    badgeVariant: 'outline',
+    css: {
+      color: '$gray500'
+    }
+  }, {
+    colorScheme: 'primary',
+    badgeVariant: 'outline',
+    css: {
+      color: '$bgBrand'
+    }
+  }, {
+    colorScheme: 'secondary',
+    badgeVariant: 'outline',
+    css: {
+      color: '$secondary500'
+    }
+  }, {
+    colorScheme: 'blue',
+    badgeVariant: 'outline',
+    css: {
+      color: '$blue500'
+    }
+  }, {
+    colorScheme: 'orange',
+    badgeVariant: 'outline',
+    css: {
+      color: '$orange500'
+    }
+  }, {
+    colorScheme: 'red',
+    badgeVariant: 'outline',
+    css: {
+      color: '$red500'
+    }
+  }, {
+    colorScheme: 'purple',
+    badgeVariant: 'outline',
+    css: {
+      color: '$purple500'
+    }
+  }, {
+    colorScheme: 'green',
+    badgeVariant: 'outline',
+    css: {
+      color: '$green500'
+    }
+  }, {
+    colorScheme: 'dark',
+    badgeVariant: 'outline',
+    css: {
+      color: '$borderActive'
+    }
+  }, {
+    colorScheme: 'gray',
+    badgeVariant: 'solid',
+    css: {
+      backgroundColor: '$gray500'
+    }
+  }, {
+    colorScheme: 'primary',
+    badgeVariant: 'solid',
+    css: {
+      backgroundColor: '$bgBrand'
+    }
+  }, {
+    colorScheme: 'secondary',
+    badgeVariant: 'solid',
+    css: {
+      backgroundColor: '$secondary500'
+    }
+  }, {
+    colorScheme: 'blue',
+    badgeVariant: 'solid',
+    css: {
+      backgroundColor: '$blue500'
+    }
+  }, {
+    colorScheme: 'orange',
+    badgeVariant: 'solid',
+    css: {
+      backgroundColor: '$orange500'
+    }
+  }, {
+    colorScheme: 'red',
+    badgeVariant: 'solid',
+    css: {
+      backgroundColor: '$red500'
+    }
+  }, {
+    colorScheme: 'purple',
+    badgeVariant: 'solid',
+    css: {
+      backgroundColor: '$purple500'
+    }
+  }, {
+    colorScheme: 'green',
+    badgeVariant: 'solid',
+    css: {
+      backgroundColor: '$green500'
+    }
+  }, {
+    colorScheme: 'dark',
+    badgeVariant: 'solid',
+    css: {
+      backgroundColor: '$borderActive'
+    }
+  }, {
+    colorScheme: 'gray',
+    badgeVariant: 'alpha',
+    css: {
+      backgroundColor: 'color-mix(in srgb, var(--colors-gray500) 50%, transparent)'
+    }
+  }, {
+    colorScheme: 'primary',
+    badgeVariant: 'alpha',
+    css: {
+      backgroundColor: 'color-mix(in srgb, var(--colors-bgBrand) 50%, transparent)'
+    }
+  }, {
+    colorScheme: 'secondary',
+    badgeVariant: 'alpha',
+    css: {
+      backgroundColor: 'color-mix(in srgb, var(--colors-secondary500) 50%, transparent)'
+    }
+  }, {
+    colorScheme: 'blue',
+    badgeVariant: 'alpha',
+    css: {
+      backgroundColor: 'color-mix(in srgb, var(--colors-blue500) 50%, transparent)'
+    }
+  }, {
+    colorScheme: 'orange',
+    badgeVariant: 'alpha',
+    css: {
+      backgroundColor: 'color-mix(in srgb, var(--colors-orange500) 50%, transparent)'
+    }
+  }, {
+    colorScheme: 'red',
+    badgeVariant: 'alpha',
+    css: {
+      backgroundColor: 'color-mix(in srgb, var(--colors-red500) 50%, transparent)'
+    }
+  }, {
+    colorScheme: 'purple',
+    badgeVariant: 'alpha',
+    css: {
+      backgroundColor: 'color-mix(in srgb, var(--colors-purple500) 50%, transparent)'
+    }
+  }, {
+    colorScheme: 'green',
+    badgeVariant: 'alpha',
+    css: {
+      backgroundColor: 'color-mix(in srgb, var(--colors-green500) 50%, transparent)'
+    }
+  }, {
+    colorScheme: 'dark',
+    badgeVariant: 'alpha',
+    css: {
+      backgroundColor: 'color-mix(in srgb, var(--colors-borderActive) 50%, transparent)'
+    }
+  }],
+  defaultVariants: {
+    colorScheme: 'grey',
+    badgeVariant: 'subtle'
+  }
+});
+Badge.defaultProps = {
+  as: 'span',
+  colorScheme: 'grey',
+  badgeVariant: 'subtle'
+};
+Badge.displayName = 'Badge';
+
+const {
+  zIndices: zIndices$2
+} = foundations;
+const slideUpAndFade = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateY(2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateY(0)'
+  }
+});
+const slideRightAndFade = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateX(-2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateX(0)'
+  }
+});
+const slideDownAndFade = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateY(-2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateY(0)'
+  }
+});
+const slideLeftAndFade = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateX(2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateX(0)'
+  }
+});
+const StyledContent = styled(TooltipPrimitive.Content, {
+  zIndex: zIndices$2.tooltip,
+  borderRadius: 8,
+  padding: '8px',
+  fontSize: '$helper',
+  letterSpacing: '$helper',
+  lineHeight: '$helper',
+  fontWeight: '400',
+  backgroundColor: '$white',
+  boxShadow: '$large',
+  '@media (prefers-reduced-motion: no-preference)': {
+    animationDuration: '400ms',
+    animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+    animationFillMode: 'forwards',
+    willChange: 'transform, opacity',
+    '&[data-state="delayed-open"]': {
+      '&[data-side="top"]': {
+        animationName: slideDownAndFade
+      },
+      '&[data-side="right"]': {
+        animationName: slideLeftAndFade
+      },
+      '&[data-side="bottom"]': {
+        animationName: slideUpAndFade
+      },
+      '&[data-side="left"]': {
+        animationName: slideRightAndFade
+      }
+    }
+  },
+  maxWidth: '100vw'
+});
+const TriggerSpan = styled('span', {
+  display: 'flex'
+});
+const StyledArrow = styled(TooltipPrimitive.Arrow, {
+  boxShadow: '$large'
+});
+const TooltipBase = styled(TooltipPrimitive.Root, {
+  defaultVariants: {
+    color: 'ligth'
+  }
+});
+
+// Exports
+const Provider = TooltipPrimitive.Provider;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const dark = {
+  color: foundations.colors.white,
+  backgroundColor: foundations.colors.gray800
+};
+const ligth = {
+  color: foundations.colors.textPrimary,
+  backgroundColor: foundations.colors.bgWhite
+};
+const darkArrow = {
+  fill: foundations.colors.gray800
+};
+const lightArrow = {
+  fill: foundations.colors.bgWhite
+};
+const Tooltip = ({
+  children,
+  label,
+  color,
+  css,
+  withClick,
+  side,
+  align,
+  delayDuration,
+  ...rest
+}) => {
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/jsx(Provider, {
+    children: /*#__PURE__*/jsxs(TooltipBase, {
+      ...rest,
+      open: withClick ? open : undefined,
+      delayDuration: delayDuration,
+      children: [/*#__PURE__*/jsx(TooltipTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/jsx(TriggerSpan, {
+          onClick: () => withClick && !open && setOpen(prev => !prev),
+          children: children
+        })
+      }), /*#__PURE__*/jsx(TooltipPrimitive.Portal, {
+        children: /*#__PURE__*/jsxs(StyledContent, {
+          align: align,
+          side: side,
+          sideOffset: 5,
+          css: color === 'dark' ? {
+            ...dark,
+            ...css
+          } : {
+            ...ligth,
+            ...css
+          },
+          onPointerDownOutside: () => setTimeout(() => {
+            setOpen(false);
+          }, 200),
+          children: [label, /*#__PURE__*/jsx(StyledArrow, {
+            offset: 10,
+            css: color === 'dark' ? darkArrow : lightArrow
+          })]
+        })
+      })]
+    })
+  });
+};
+Tooltip.propTypes = {
+  children: PropTypes.node,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  color: PropTypes.string,
+  side: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
+  align: PropTypes.oneOf(['start', 'center', 'end'])
+};
+Tooltip.defaultProps = {
+  color: 'dark',
+  side: 'bottom',
+  align: 'center',
+  label: '',
+  children: /*#__PURE__*/jsx("div", {}),
+  delayDuration: 200
+};
+
+var $$2 = _export;
+var call = functionCall;
+var iterate = iterate$1;
+var aCallable = aCallable$2;
+var anObject = anObject$2;
+var getIteratorDirect = getIteratorDirect$2;
+var iteratorClose = iteratorClose$2;
+var iteratorHelperWithoutClosingOnEarlyError = iteratorHelperWithoutClosingOnEarlyError$2;
+
+var someWithoutClosingOnEarlyError = iteratorHelperWithoutClosingOnEarlyError('some', TypeError);
+
+// `Iterator.prototype.some` method
+// https://tc39.es/ecma262/#sec-iterator.prototype.some
+$$2({ target: 'Iterator', proto: true, real: true, forced: someWithoutClosingOnEarlyError }, {
+  some: function some(predicate) {
+    anObject(this);
+    try {
+      aCallable(predicate);
+    } catch (error) {
+      iteratorClose(this, 'throw', error);
+    }
+
+    if (someWithoutClosingOnEarlyError) return call(someWithoutClosingOnEarlyError, this, predicate);
+
+    var record = getIteratorDirect(this);
+    var counter = 0;
+    return iterate(record, function (value, stop) {
+      if (predicate(value, counter++)) return stop();
+    }, { IS_RECORD: true, INTERRUPTED: true }).stopped;
+  }
+});
+
+var wellKnownSymbol = wellKnownSymbol$1;
+var create = objectCreate;
+var defineProperty = objectDefineProperty.f;
+
+var UNSCOPABLES = wellKnownSymbol('unscopables');
+var ArrayPrototype = Array.prototype;
+
+// Array.prototype[@@unscopables]
+// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
+if (ArrayPrototype[UNSCOPABLES] === undefined) {
+  defineProperty(ArrayPrototype, UNSCOPABLES, {
+    configurable: true,
+    value: create(null)
+  });
+}
+
+// add a key to Array.prototype[@@unscopables]
+var addToUnscopables$1 = function (key) {
+  ArrayPrototype[UNSCOPABLES][key] = true;
+};
+
+var $$1 = _export;
+var $includes = arrayIncludes.includes;
+var fails$1 = fails$2;
+var addToUnscopables = addToUnscopables$1;
+
+// FF99+ bug
+var BROKEN_ON_SPARSE = fails$1(function () {
+  // eslint-disable-next-line es/no-array-prototype-includes -- detection
+  return !Array(1).includes();
+});
+
+// Safari 26.4- bug
+var BROKEN_ON_SPARSE_WITH_FROM_INDEX = fails$1(function () {
+  // eslint-disable-next-line no-sparse-arrays, es/no-array-prototype-includes -- detection
+  return [, 1].includes(undefined, 1);
+});
+
+// `Array.prototype.includes` method
+// https://tc39.es/ecma262/#sec-array.prototype.includes
+$$1({ target: 'Array', proto: true, forced: BROKEN_ON_SPARSE || BROKEN_ON_SPARSE_WITH_FROM_INDEX }, {
+  includes: function includes(el /* , fromIndex = 0 */) {
+    return $includes(this, el, arguments.length > 1 ? arguments[1] : undefined);
+  }
+});
+
+// https://tc39.es/ecma262/#sec-array.prototype-@@unscopables
+addToUnscopables('includes');
+
+const StyledLabel = styled(LabelPrimitive.Root, Text, {
+  display: 'inline-block',
+  fontSize: '$label',
+  lineHeight: '$label',
+  fontWeight: '500',
+  variants: {
+    variant: {
+      required: {
+        '&::after': {
+          color: '$textRed',
+          content: '*'
+        }
+      }
+    }
+  }
+});
+const StyledHelpIcon = styled(CircleQuestionOutline, {
+  size: '16px'
+});
+const LabelVariantsEnum = ['required', 'optional', 'with-tooltip'];
+const FormLabel = ({
+  children,
+  htmlFor,
+  variant,
+  variants,
+  tooltipLabel,
+  count,
+  maxCount,
+  labelCss,
+  ...props
+}) => {
+  return /*#__PURE__*/jsxs(Flex, {
+    justify: "between",
+    className: "form-label",
+    children: [/*#__PURE__*/jsxs(Flex, {
+      align: "center",
+      gap: 3,
+      ...props,
+      children: [/*#__PURE__*/jsx(StyledLabel, {
+        htmlFor: htmlFor,
+        variant: variant,
+        css: labelCss,
+        children: children
+      }), (variant === LabelVariantsEnum[1] || variants.includes(LabelVariantsEnum[1])) && /*#__PURE__*/jsx(Badge, {
+        css: {
+          padding: '$spacing-02 $spacing-03',
+          color: '$gray600',
+          backgroundColor: '$gray150',
+          borderRadius: '100px',
+          fontSize: '$label',
+          lineHeight: '$label'
+        },
+        children: "Opsional"
+      }), (variant === LabelVariantsEnum[2] || variants.includes(LabelVariantsEnum[2])) && /*#__PURE__*/jsx(Tooltip, {
+        label: tooltipLabel,
+        children: /*#__PURE__*/jsx(StyledHelpIcon, {})
+      })]
+    }), maxCount && /*#__PURE__*/jsxs(Text, {
+      variant: "label",
+      color: "disable",
+      children: [count, "/", maxCount]
+    })]
+  });
+};
+FormLabel.propTypes = {
+  variant: PropTypes.oneOf(LabelVariantsEnum),
+  variants: PropTypes.array,
+  htmlFor: PropTypes.string,
+  tooltipLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  count: PropTypes.number,
+  maxCount: PropTypes.number
+};
+FormLabel.defaultProps = {
+  variants: []
+};
+FormLabel.displayName = 'FormLabel';
+
+const CheckboxContext = /*#__PURE__*/createContext();
+const CheckboxGroup = ({
+  children,
+  onChange,
+  value,
+  defaultValue,
+  disabled
+}) => {
+  const [selectedItems, setSelectedItems] = useState(defaultValue);
+  const checkItem = (item, index) => {
+    if (!value) {
+      setSelectedItems(current => {
+        const items = [...current, item];
+        if (onChange) onChange(items);
+        return items;
+      });
+    } else {
+      if (onChange) onChange([...value, item], index);
+    }
+  };
+  const uncheckItem = (item, index) => {
+    if (!value) {
+      setSelectedItems(current => {
+        const items = current.filter(currItem => currItem !== item);
+        if (onChange) onChange(items);
+        return items;
+      });
+    } else {
+      if (onChange) onChange(value.filter(currItem => currItem !== item), index);
+    }
+  };
+  const values = {
+    checkItem,
+    uncheckItem,
+    checkedItems: value || selectedItems
+  };
+  return /*#__PURE__*/jsx(CheckboxContext.Provider, {
+    value: values,
+    children: React__default.Children.map(children, child => /*#__PURE__*/React__default.cloneElement(child, {
+      disabled: child.props.disabled || disabled
+    }))
+  });
+};
+CheckboxGroup.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  defaultValue: PropTypes.array
+};
+CheckboxGroup.defaultProps = {
+  defaultValue: []
+};
+CheckboxGroup.displayName = 'CheckboxGroup';
+
+const CheckOutline = props => /*#__PURE__*/jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlSpace: "preserve",
+  width: "1em",
+  height: "1em",
+  style: {
+    shapeRendering: 'geometricPrecision',
+    textRendering: 'geometricPrecision',
+    imageRendering: 'optimizeQuality',
+    fillRule: 'evenodd',
+    clipRule: 'evenodd'
+  },
+  viewBox: "0 0 13.06 13.06",
+  ...props,
+  children: [/*#__PURE__*/jsx("path", {
+    d: "M0 2.5A2.5 2.5 0 0 1 2.5 0h8.05a2.5 2.5 0 0 1 2.5 2.5v8.05a2.5 2.5 0 0 1-2.5 2.5H2.5c-.66 0-1.3-.26-1.77-.73S0 11.21 0 10.55V2.5z",
+    style: {
+      fill: 'none',
+      fillRule: 'nonzero'
+    }
+  }), /*#__PURE__*/jsx("path", {
+    d: "M10.12 4.53a.47.47 0 0 0 .14-.33.47.47 0 0 0-.14-.33.47.47 0 0 0-.33-.14.47.47 0 0 0-.33.14L5.13 8.2 3.6 6.66a.47.47 0 0 0-.33-.14.47.47 0 0 0-.33.14.47.47 0 0 0-.14.33c0 .12.05.24.14.33l1.87 1.87c.04.04.09.08.15.1.06.02.12.04.18.04s.12-.01.18-.04c.06-.02.11-.06.15-.1l4.66-4.66z",
+    style: {
+      fill: '#fefefe',
+      fillRule: 'nonzero'
+    }
+  })]
+});
+
+const SvgMinusOutline = props => /*#__PURE__*/jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlSpace: "preserve",
+  width: "1em",
+  height: "1em",
+  style: {
+    shapeRendering: 'geometricPrecision',
+    textRendering: 'geometricPrecision',
+    imageRendering: 'optimizeQuality',
+    fillRule: 'evenodd',
+    clipRule: 'evenodd'
+  },
+  viewBox: "0 0 18.22 18.22",
+  ...props,
+  children: [/*#__PURE__*/jsx("path", {
+    d: "M15.61 0H2.6A2.595 2.595 0 0 0 0 2.6v13.01a2.595 2.595 0 0 0 2.6 2.6h13.01a2.595 2.595 0 0 0 2.6-2.6V2.6a2.595 2.595 0 0 0-2.6-2.6z",
+    style: {
+      fill: 'none',
+      fillRule: 'nonzero'
+    }
+  }), /*#__PURE__*/jsx("path", {
+    style: {
+      fill: '#fefefe',
+      fillRule: 'nonzero'
+    },
+    d: "M14.31 10.41H3.9v-2.6h10.41z"
+  })]
+});
+
+const StyledIndicator = styled(CheckboxPrimitive.Indicator, {
+  alignItems: 'center',
+  display: 'flex',
+  height: '125%',
+  justifyContent: 'center',
+  width: '125%'
+});
+const StyledCheckbox = styled(CheckboxPrimitive.Root, {
+  all: 'unset',
+  cursor: 'pointer',
+  backgroundColor: 'white',
+  $$cbSize: '13px',
+  minWidth: '$$cbSize',
+  minHeight: '$$cbSize',
+  width: '$$cbSize',
+  height: '$$cbSize',
+  border: '1.5px solid $bgOutline',
+  borderRadius: '3px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  '&:hover': {
+    border: '1.5px solid $primary400'
+  },
+  '&:focus': {
+    outline: '1.5px solid #82C4E0',
+    outlineOffset: '1px'
+  },
+  '&[data-state=checked]': {
+    backgroundColor: '$primary500',
+    border: '1.5px solid $primary500',
+    color: 'white',
+    '&:hover': {
+      backgroundColor: '$primary600',
+      border: '1.5px solid $primary600'
+    },
+    '&:focus': {}
+  },
+  '&:disabled': {
+    pointerEvents: 'none',
+    border: '1.5px solid $gray200',
+    '&[data-state=checked]': {
+      backgroundColor: '$gray200',
+      color: 'white'
+    }
+  }
+});
+const Checkbox = ({
+  id,
+  checked,
+  indeterminate,
+  disabled,
+  onCheckedChange,
+  label,
+  index,
+  value,
+  ...props
+}) => {
+  const context = useContext(CheckboxContext);
+  const [isChecked, setChecked] = useState(false);
+  useEffect(() => {
+    const checkValue = context && context.checkedItems.includes(value) || checked || indeterminate;
+    setChecked(checkValue ?? false);
+  }, [checked, indeterminate, context]);
+  return /*#__PURE__*/jsx(StyledCheckbox, {
+    id: id,
+    disabled: disabled,
+    checked: isChecked,
+    onCheckedChange: isChecked => {
+      if (context) {
+        if (isChecked) context.checkItem(value, index);
+        if (!isChecked) context.uncheckItem(value, index);
+      }
+      if (onCheckedChange) onCheckedChange(isChecked);
+    },
+    ...props,
+    children: /*#__PURE__*/jsx(StyledIndicator, {
+      children: indeterminate ? /*#__PURE__*/jsx(SvgMinusOutline, {}) : /*#__PURE__*/jsx(CheckOutline, {})
+    })
+  });
+};
+const InputCheckbox = ({
+  ...props
+}) => {
+  return props.label ? /*#__PURE__*/jsxs(Flex, {
+    align: "center",
+    gap: 4,
+    children: [/*#__PURE__*/jsx(Checkbox, {
+      ...props
+    }), /*#__PURE__*/jsx(FormLabel, {
+      htmlFor: props.id,
+      labelCss: {
+        fontSize: '$long-content-regular',
+        lineHeight: '$long-content-regular',
+        letterSpacing: '$long-content-regular',
+        fontWeight: '400',
+        color: props.disabled ? '$textDisable' : '$textPrimary',
+        cursor: 'default'
+      },
+      children: props.label
+    })]
+  }) : /*#__PURE__*/jsx(Checkbox, {
+    ...props
+  });
+};
+InputCheckbox.propTypes = {
+  checked: PropTypes.bool,
+  indeterminate: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onCheckedChange: PropTypes.func,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  index: PropTypes.number,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object])
+};
+InputCheckbox.displayName = 'InputCheckbox';
+
+const InputGroupStyle = styled('div', {
+  display: 'flex',
+  width: '100%',
+  position: 'relative',
+  alignItems: 'center',
+  '& > input:last-child': {
+    borderStartStartRadius: 0,
+    borderEndStartRadius: 0
+  },
+  '& > input:first-child': {
+    borderEndEndRadius: 0,
+    borderStartEndRadius: 0
+  },
+  '& > input:not(:first-child):not(:last-child)': {
+    borderRadius: 0
+  },
+  variants: {
+    readOnly: {
+      true: {
+        backgroundColor: '$formDisable'
+      }
+    },
+    disabled: {
+      true: {
+        backgroundColor: '$formDisable',
+        color: '$textDisable',
+        cursor: 'not-allowed',
+        '&::placeholder': {
+          color: '$textDisable'
+        },
+        '&:hover': {
+          border: '1px solid $bgOutline',
+          borderRadius: '$lg',
+          '& > .addon': {
+            border: '1px solid $bgOutline'
+          }
+        },
+        '& > input': {
+          color: '$textDisable !important',
+          cursor: 'not-allowed !important',
+          border: 'none !important',
+          '&:hover': {
+            border: 'none !important'
+          }
+        }
+      }
+    },
+    isInvalid: {
+      true: {
+        border: '1px solid $red400',
+        '&:focus': {
+          border: '1px solid $red400'
+        },
+        '&:hover': {
+          border: '1px solid $red400'
+        }
+      }
+    },
+    size: {
+      sm: {
+        height: 32
+      },
+      lg: {
+        height: 40
+      }
+    },
+    isElement: {
+      true: {
+        '& > input:last-child': {
+          paddingLeft: 0,
+          border: 'none',
+          backgroundColor: 'transparent'
+        },
+        '& > input:first-child': {
+          paddingRight: 0,
+          border: 'none',
+          backgroundColor: 'transparent'
+        },
+        '& > input:not(:first-child):not(:last-child)': {
+          paddingLeft: 0,
+          paddingRight: 0,
+          border: 'none',
+          backgroundColor: 'transparent'
+        }
+      }
+    },
+    isLetter: {
+      true: {
+        borderRadius: '$lg',
+        border: '1px solid $bgOutline',
+        '&:focus': {
+          border: '1px solid $primary400'
+        },
+        '&:active': {
+          border: '1px solid $primary400'
+        },
+        '&:hover': {
+          border: '1px solid $primary400'
+        },
+        '&:disabled': {
+          backgroundColor: '$formDisable',
+          color: '$textDisable',
+          cursor: 'not-allowed',
+          '&::placeholder': {
+            color: '$textDisable'
+          },
+          '&:hover': {
+            border: '1px solid $bgOutline'
+          }
+        }
+      }
+    },
+    mobileOnly: {
+      true: {
+        '@lg': {
+          display: 'none !important'
+        }
+      }
+    },
+    desktopOnly: {
+      true: {
+        display: 'none !important',
+        '@lg': {
+          display: 'flex !important'
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    isLetter: false,
+    size: 'lg'
+  }
+});
+const InputGroup = ({
+  children,
+  size = 'lg',
+  ...rest
+}) => {
+  const isLetter = children.some(child => child && (child.type.name === 'InputPrefix' || child.type.name === 'InputSuffix' || child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement'));
+  const isElement = children.some(child => child && (child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement'));
+  const clone = children.map((child, index) => {
+    if (child === null) return null;
+    return isLetter ? child.type.name === 'InputText' ? /*#__PURE__*/React__default.cloneElement(child, {
+      inputGroup: true,
+      size: size,
+      key: index
+    }) : /*#__PURE__*/React__default.cloneElement(child, {
+      size: size,
+      key: index
+    }) : /*#__PURE__*/React__default.cloneElement(child, {
+      size: size,
+      key: index
+    });
+  });
+  return /*#__PURE__*/jsx(InputGroupStyle, {
+    ...rest,
+    children: clone,
+    isLetter: isLetter,
+    size: size,
+    isElement: isElement
+  });
+};
+InputGroup.propTypes = {
+  /**
+    Adjust Input Text Size
+   */
+  size: PropTypes.oneOf(['sm', 'lg']),
+  /**
+    Children must be InputText, InputAddon, or InputPrefixes
+   */
+  children: PropTypes.node.isRequired,
+  /** Error state */
+  isInvalid: PropTypes.bool,
+  /** read-only state */
+  readOnly: PropTypes.bool,
+  /** disabled state */
+  disabled: PropTypes.bool
+};
+
+const InputLetter = styled(Text, {
+  flex: '0 0 auto',
+  width: 'auto',
+  display: 'flex',
+  alignItems: 'center',
+  padding: '6px $spacing-05',
+  variants: {
+    size: {
+      sm: {
+        height: 32
+      },
+      lg: {
+        height: 40
+      }
+    },
+    color: {
+      primary: {
+        color: '$iconPrimary'
+      },
+      disabled: {
+        color: '$iconDisable'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'lg',
+    color: 'primary'
+  }
+});
+const InputPrefix = styled(InputLetter, {
+  padding: '6px 0px 6px $spacing-05',
+  defaultVariants: {
+    variant: 'placeholder',
+    color: 'secondary',
+    as: 'div'
+  }
+});
+InputPrefix.name = 'InputPrefix';
+InputPrefix.displayName = 'InputPrefix';
+InputPrefix.defaultProps = {
+  as: 'div'
+};
+InputPrefix.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+};
+const InputSuffix = styled(InputLetter, {
+  padding: '6px $spacing-05 6px 0px',
+  defaultVariants: {
+    variant: 'placeholder',
+    color: 'secondary',
+    as: 'div'
+  }
+});
+InputSuffix.name = 'InputSuffix';
+InputSuffix.displayName = 'InputSuffix';
+InputSuffix.defaultProps = {
+  as: 'div'
+};
+InputSuffix.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+};
+
+const disabledStyle = {
+  backgroundColor: '$formDisable',
+  color: '$textDisable',
+  cursor: 'not-allowed',
+  '&::placeholder': {
+    color: '$textDisable'
+  },
+  '&:hover': {
+    border: '1px solid $bgOutline'
+  }
+};
+const StyledInput = styled('input', {
+  // Reset
+  appearance: 'none',
+  boxSizing: 'border-box',
+  fontFamily: 'inherit',
+  margin: '0',
+  outline: 'none',
+  width: '100%',
+  WebkitTapHighlightColor: 'rgba(0,0,0,0)',
+  '&::before': {
+    boxSizing: 'border-box'
+  },
+  '&::after': {
+    boxSizing: 'border-box'
+  },
+  // Custom
+  background: 'none',
+  color: '$textPrimary',
+  fontVariantNumeric: 'tabular-nums',
+  fontSize: '$short-content-regular',
+  letterSpacing: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  fontWeight: '400',
+  padding: '10px $spacing-05',
+  border: '1px solid $bgOutline',
+  borderRadius: '$lg',
+  '&:focus': {
+    border: '1px solid $primary400'
+  },
+  '&:active': {
+    border: '1px solid $primary400'
+  },
+  '&:hover': {
+    border: '1px solid $primary600'
+  },
+  '&:disabled': disabledStyle,
+  '&[data-state="readonly"]': {
+    backgroundColor: '$formDisable'
+  },
+  '&::placeholder': {
+    color: '$textDisable'
+  },
+  compoundVariants: [{
+    inputGroup: true,
+    isInvalid: true,
+    css: {
+      border: 'none',
+      '&:focus': {
+        border: 'none'
+      },
+      '&:hover': {
+        border: 'none'
+      }
+    }
+  }],
+  variants: {
+    isDisabled: {
+      true: disabledStyle
+    },
+    isReadOnly: {
+      true: {
+        backgroundColor: '$formDisable'
+      }
+    },
+    inputGroup: {
+      true: {
+        border: 'none',
+        borderRadius: '$lg',
+        '&:focus': {
+          border: 'none'
+        },
+        '&:active': {
+          border: 'none'
+        },
+        '&:hover': {
+          border: 'none'
+        },
+        '&:disabled': {
+          backgroundColor: 'transparent',
+          color: '$textDisable',
+          cursor: 'default',
+          '&::placeholder': {
+            color: '$textDisable'
+          },
+          '&:hover': {
+            border: '1px solid $bgOutline'
+          }
+        }
+      }
+    },
+    asChild: {
+      true: {
+        paddingLeft: 0,
+        paddingRight: 0,
+        border: 'none',
+        borderRadius: '$lg',
+        '&:focus': {
+          border: 'none'
+        },
+        '&:active': {
+          border: 'none'
+        },
+        '&:hover': {
+          border: 'none'
+        },
+        '&:disabled': {
+          backgroundColor: 'transparent',
+          color: '$textDisable',
+          cursor: 'default',
+          '&::placeholder': {
+            color: '$textDisable'
+          },
+          '&:hover': {
+            border: 'none'
+          }
+        }
+      }
+    },
+    /**
+     * Please insert size with string 'sm' | 'lg'
+     */
+    size: {
+      sm: {
+        height: 32
+      },
+      lg: {
+        height: 40
+      }
+    },
+    isInvalid: {
+      true: {
+        border: '1px solid $red400',
+        '&:focus': {
+          border: '1px solid $red400'
+        },
+        '&:hover': {
+          border: '1px solid $red400'
+        }
+      }
+    },
+    isPicker: {
+      true: {
+        fontSize: '$placeholder',
+        letterSpacing: '$placeholder',
+        lineHeight: '$placeholder',
+        fontVariantNumeric: 'unset',
+        caretColor: 'transparent',
+        cursor: 'pointer',
+        padding: '0'
+      }
+    }
+  },
+  defaultVariants: {
+    size: 'lg'
+  }
+});
+const InputText = /*#__PURE__*/React__default.forwardRef(({
+  disabled,
+  readOnly,
+  ...props
+}, ref) => /*#__PURE__*/jsx(StyledInput, {
+  ref: ref,
+  disabled: disabled,
+  isDisabled: disabled,
+  readOnly: readOnly,
+  isReadOnly: readOnly,
+  ...props
+}));
+InputText.propTypes = {
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  isInvalid: PropTypes.bool,
+  size: PropTypes.string,
+  isPicker: PropTypes.bool
+};
+InputText.displayName = 'InputText';
+
+var classof = classofRaw;
+
+// `IsArray` abstract operation
+// https://tc39.es/ecma262/#sec-isarray
+// eslint-disable-next-line es/no-array-isarray -- safe
+var isArray$1 = Array.isArray || function isArray(argument) {
+  return classof(argument) === 'Array';
+};
+
+var DESCRIPTORS = descriptors;
+var isArray = isArray$1;
+
+var $TypeError$1 = TypeError;
+// eslint-disable-next-line es/no-object-getownpropertydescriptor -- safe
+var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;
+
+// Safari < 13 does not throw an error in this case
+var SILENT_ON_NON_WRITABLE_LENGTH_SET = DESCRIPTORS && !function () {
+  // makes no sense without proper strict mode support
+  if (this !== undefined) return true;
+  try {
+    // eslint-disable-next-line es/no-object-defineproperty -- safe
+    Object.defineProperty([], 'length', { writable: false }).length = 1;
+  } catch (error) {
+    return error instanceof TypeError;
+  }
+}();
+
+var arraySetLength = SILENT_ON_NON_WRITABLE_LENGTH_SET ? function (O, length) {
+  if (isArray(O) && !getOwnPropertyDescriptor(O, 'length').writable) {
+    throw new $TypeError$1('Cannot set read only .length');
+  } return O.length = length;
+} : function (O, length) {
+  return O.length = length;
+};
+
+var $TypeError = TypeError;
+var MAX_SAFE_INTEGER = 0x1FFFFFFFFFFFFF; // 2 ** 53 - 1 == 9007199254740991
+
+var doesNotExceedSafeInteger$1 = function (it) {
+  if (it > MAX_SAFE_INTEGER) throw new $TypeError('Maximum allowed index exceeded');
+  return it;
+};
+
+var $ = _export;
+var toObject = toObject$1;
+var lengthOfArrayLike = lengthOfArrayLike$1;
+var setArrayLength = arraySetLength;
+var doesNotExceedSafeInteger = doesNotExceedSafeInteger$1;
+var fails = fails$2;
+
+var INCORRECT_TO_LENGTH = fails(function () {
+  return [].push.call({ length: 0x100000000 }, 1) !== 4294967297;
+});
+
+// V8 <= 121 and Safari <= 15.4; FF < 23 throws InternalError
+// https://bugs.chromium.org/p/v8/issues/detail?id=12681
+var properErrorOnNonWritableLength = function () {
+  try {
+    // eslint-disable-next-line es/no-object-defineproperty -- safe
+    Object.defineProperty([], 'length', { writable: false }).push();
+  } catch (error) {
+    return error instanceof TypeError;
+  }
+};
+
+var FORCED = INCORRECT_TO_LENGTH || !properErrorOnNonWritableLength();
+
+// `Array.prototype.push` method
+// https://tc39.es/ecma262/#sec-array.prototype.push
+$({ target: 'Array', proto: true, arity: 1, forced: FORCED }, {
+  // eslint-disable-next-line no-unused-vars -- required for `.length`
+  push: function push(item) {
+    var O = toObject(this);
+    var len = lengthOfArrayLike(O);
+    var argCount = arguments.length;
+    doesNotExceedSafeInteger(len + argCount);
+    for (var i = 0; i < argCount; i++) {
+      O[len] = arguments[i];
+      len++;
+    }
+    setArrayLength(O, len);
+    return len;
+  }
+});
+
+const InputLeftElement = styled(InputPrefix, {
+  paddingRight: 8
+});
+InputLeftElement.defaultProps = {
+  as: 'div',
+  color: 'primary',
+  size: 'lg'
+};
+InputLeftElement.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.node]),
+  color: PropTypes.string,
+  size: PropTypes.string
+};
+InputLeftElement.name = 'InputLeftElement';
+const InputRightElement = styled(InputSuffix, {
+  paddingLeft: 8
+});
+InputRightElement.defaultProps = {
+  as: 'div',
+  color: 'primary',
+  size: 'lg'
+};
+InputRightElement.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.node]),
+  color: PropTypes.string,
+  size: PropTypes.string
+};
+InputRightElement.name = 'InputRightElement';
+
+const TagWrapper = styled('div', {
+  boxSizing: 'border-box',
+  listStyle: 'none',
+  display: 'inline-flex',
+  alignItems: 'center',
+  height: 'auto',
+  width: 'auto',
+  justifyContent: 'center',
+  fontSize: '12px',
+  fontWeight: 500,
+  lineHeight: '16px',
+  borderRadius: '$sm',
+  background: '$bgGray',
+  color: '$textPrimary',
+  variants: {
+    size: {
+      sm: {
+        minWidth: '45px',
+        maxWidth: '118px',
+        height: '20px',
+        padding: '2px 4px'
+      },
+      lg: {
+        minWidth: '53px',
+        maxWidth: '126px',
+        height: '24px',
+        padding: '4px 8px'
+      }
+    },
+    disabled: {
+      true: {
+        background: '$bgInactive',
+        cursor: 'not-allowed',
+        color: '$textDisable'
+      }
+    },
+    readOnly: {
+      true: {
+        cursor: 'not-allowed'
+      }
+    },
+    type: {
+      success: {
+        background: '$bgSuccess',
+        color: '$textGreen'
+      },
+      error: {
+        background: '$bgFailed',
+        color: '$textRed'
+      },
+      primary: {
+        background: '$bgAccent',
+        color: '$textBrand'
+      },
+      varian: {
+        background: '$bgWhite',
+        color: '$textBrand',
+        border: '1px solid $bgBorder'
+      }
+    }
+  }
+});
+const TagComponent = styled('span', {
+  textAlign: 'center',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+});
+const StyledIconRight = styled('div', {
+  marginLeft: '6px',
+  display: 'flex',
+  verticalAlign: 'middle',
+  alignItems: 'center',
+  cursor: 'pointer',
+  variants: {
+    disabled: {
+      true: {
+        background: '$bgInactive',
+        cursor: 'not-allowed'
+      }
+    },
+    readOnly: {
+      true: {
+        cursor: 'not-allowed'
+      }
+    }
+  }
+});
+const StyledIconLeft = styled('div', {
+  margin: '0 3px',
+  display: 'flex',
+  verticalAlign: 'middle',
+  alignItems: 'center',
+  color: 'inherit'
+});
+const Tag = /*#__PURE__*/React__default.forwardRef(({
+  className,
+  children,
+  onClick,
+  size,
+  icon,
+  isRemovable,
+  disabled,
+  type,
+  onRemove,
+  readOnly,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/jsxs(TagWrapper, {
+    ref: ref,
+    onClick: onClick,
+    size: size,
+    disabled: disabled,
+    type: type,
+    readOnly: readOnly,
+    css: {
+      ...props.css
+    },
+    ...props,
+    children: [icon !== undefined ? /*#__PURE__*/jsx(StyledIconLeft, {
+      children: icon
+    }) : null, /*#__PURE__*/jsx(TagComponent, {
+      children: children
+    }), isRemovable ? /*#__PURE__*/jsx(StyledIconRight, {
+      disabled: disabled,
+      onClick: onRemove,
+      readOnly: readOnly,
+      children: /*#__PURE__*/jsx(CloseOutline, {
+        size: 16,
+        color: colors$1.iconSecondary,
+        style: {
+          verticalAlign: 'middle'
+        }
+      })
+    }) : null]
+  });
+});
+Tag.propTypes = {
+  size: PropTypes.string,
+  disabled: PropTypes.bool,
+  type: PropTypes.string,
+  icon: PropTypes.element,
+  isRemovable: PropTypes.bool,
+  onRemove: PropTypes.func,
+  onClick: PropTypes.func,
+  readOnly: PropTypes.bool
+};
+Tag.defaultProps = {
+  size: 'sm',
+  isRemovable: false,
+  disabled: false,
+  readOnly: false
+};
+
+const SvgCloseFilled = props => /*#__PURE__*/jsxs("svg", {
+  width: props.size,
+  height: props.size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  ...props,
+  children: [/*#__PURE__*/jsx("mask", {
+    id: "path-1-inside-1_2883_7918",
+    fill: "white",
+    children: /*#__PURE__*/jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM8.54289 8.54289C8.93342 8.15237 9.56658 8.15237 9.95711 8.54289L12 10.5858L14.0429 8.54289C14.4334 8.15237 15.0666 8.15237 15.4571 8.54289C15.8476 8.93342 15.8476 9.56658 15.4571 9.95711L13.4142 12L15.4571 14.0429C15.8476 14.4334 15.8476 15.0666 15.4571 15.4571C15.0666 15.8476 14.4334 15.8476 14.0429 15.4571L12 13.4142L9.95711 15.4571C9.56658 15.8476 8.93342 15.8476 8.54289 15.4571C8.15237 15.0666 8.15237 14.4334 8.54289 14.0429L10.5858 12L8.54289 9.95711C8.15237 9.56658 8.15237 8.93342 8.54289 8.54289Z"
+    })
+  }), /*#__PURE__*/jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM8.54289 8.54289C8.93342 8.15237 9.56658 8.15237 9.95711 8.54289L12 10.5858L14.0429 8.54289C14.4334 8.15237 15.0666 8.15237 15.4571 8.54289C15.8476 8.93342 15.8476 9.56658 15.4571 9.95711L13.4142 12L15.4571 14.0429C15.8476 14.4334 15.8476 15.0666 15.4571 15.4571C15.0666 15.8476 14.4334 15.8476 14.0429 15.4571L12 13.4142L9.95711 15.4571C9.56658 15.8476 8.93342 15.8476 8.54289 15.4571C8.15237 15.0666 8.15237 14.4334 8.54289 14.0429L10.5858 12L8.54289 9.95711C8.15237 9.56658 8.15237 8.93342 8.54289 8.54289Z",
+    fill: props.color
+  }), /*#__PURE__*/jsx("path", {
+    d: "M9.95711 8.54289L8.54289 9.95711L8.54289 9.95711L9.95711 8.54289ZM8.54289 8.54289L9.95711 9.95711L9.95711 9.95711L8.54289 8.54289ZM12 10.5858L10.5858 12L12 13.4142L13.4142 12L12 10.5858ZM14.0429 8.54289L15.4571 9.95711L15.4571 9.95711L14.0429 8.54289ZM15.4571 8.54289L14.0429 9.95711L14.0429 9.95711L15.4571 8.54289ZM15.4571 9.95711L14.0429 8.54289L14.0429 8.54289L15.4571 9.95711ZM13.4142 12L12 10.5858L10.5858 12L12 13.4142L13.4142 12ZM15.4571 14.0429L16.8713 12.6287L16.8713 12.6287L15.4571 14.0429ZM15.4571 15.4571L16.8713 16.8713L16.8713 16.8713L15.4571 15.4571ZM14.0429 15.4571L12.6287 16.8713L12.6287 16.8713L14.0429 15.4571ZM12 13.4142L13.4142 12L12 10.5858L10.5858 12L12 13.4142ZM9.95711 15.4571L11.3713 16.8713L11.3713 16.8713L9.95711 15.4571ZM8.54289 15.4571L7.12868 16.8713L7.12868 16.8713L8.54289 15.4571ZM8.54289 14.0429L7.12868 12.6287L7.12868 12.6287L8.54289 14.0429ZM10.5858 12L12 13.4142L13.4142 12L12 10.5858L10.5858 12ZM8.54289 9.95711L9.95711 8.54289L9.95711 8.54289L8.54289 9.95711ZM19 12C19 15.866 15.866 19 12 19V23C18.0751 23 23 18.0751 23 12H19ZM12 5C15.866 5 19 8.13401 19 12H23C23 5.92487 18.0751 1 12 1V5ZM5 12C5 8.13401 8.13401 5 12 5V1C5.92487 1 1 5.92487 1 12H5ZM12 19C8.13401 19 5 15.866 5 12H1C1 18.0751 5.92487 23 12 23V19ZM11.3713 7.12868C10.1997 5.95711 8.30025 5.95711 7.12868 7.12868L9.95711 9.95711C9.56658 10.3476 8.93342 10.3476 8.54289 9.95711L11.3713 7.12868ZM13.4142 9.17157L11.3713 7.12868L8.54289 9.95711L10.5858 12L13.4142 9.17157ZM12.6287 7.12868L10.5858 9.17157L13.4142 12L15.4571 9.95711L12.6287 7.12868ZM16.8713 7.12868C15.6997 5.95711 13.8003 5.95711 12.6287 7.12868L15.4571 9.95711C15.0666 10.3476 14.4334 10.3476 14.0429 9.95711L16.8713 7.12868ZM16.8713 11.3713C18.0429 10.1997 18.0429 8.30025 16.8713 7.12868L14.0429 9.95711C13.6524 9.56658 13.6524 8.93342 14.0429 8.54289L16.8713 11.3713ZM14.8284 13.4142L16.8713 11.3713L14.0429 8.54289L12 10.5858L14.8284 13.4142ZM16.8713 12.6287L14.8284 10.5858L12 13.4142L14.0429 15.4571L16.8713 12.6287ZM16.8713 16.8713C18.0429 15.6997 18.0429 13.8003 16.8713 12.6287L14.0429 15.4571C13.6524 15.0666 13.6524 14.4334 14.0429 14.0429L16.8713 16.8713ZM12.6287 16.8713C13.8003 18.0429 15.6997 18.0429 16.8713 16.8713L14.0429 14.0429C14.4334 13.6524 15.0666 13.6524 15.4571 14.0429L12.6287 16.8713ZM10.5858 14.8284L12.6287 16.8713L15.4571 14.0429L13.4142 12L10.5858 14.8284ZM11.3713 16.8713L13.4142 14.8284L10.5858 12L8.54289 14.0429L11.3713 16.8713ZM7.12868 16.8713C8.30025 18.0429 10.1997 18.0429 11.3713 16.8713L8.54289 14.0429C8.93342 13.6524 9.56658 13.6524 9.95711 14.0429L7.12868 16.8713ZM7.12868 12.6287C5.95711 13.8003 5.95711 15.6997 7.12868 16.8713L9.95711 14.0429C10.3476 14.4334 10.3476 15.0666 9.95711 15.4571L7.12868 12.6287ZM9.17157 10.5858L7.12868 12.6287L9.95711 15.4571L12 13.4142L9.17157 10.5858ZM7.12868 11.3713L9.17157 13.4142L12 10.5858L9.95711 8.54289L7.12868 11.3713ZM7.12868 7.12868C5.95711 8.30025 5.95711 10.1997 7.12868 11.3713L9.95711 8.54289C10.3476 8.93342 10.3476 9.56658 9.95711 9.95711L7.12868 7.12868Z",
+    fill: props.color,
+    mask: "url(#path-1-inside-1_2883_7918)"
+  })]
+});
+SvgCloseFilled.defaultProps = {
+  color: '#404545',
+  size: 24
+};
+
+const SvgSearchOutline = props => /*#__PURE__*/jsxs("svg", {
+  width: props.size,
+  height: props.size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  ...props,
+  children: [/*#__PURE__*/jsx("circle", {
+    cx: 11.3091,
+    cy: 11.3091,
+    r: 6.30911,
+    stroke: props.color,
+    strokeWidth: 2
+  }), /*#__PURE__*/jsx("path", {
+    d: "M16.5249 15.1049C16.1345 14.7142 15.5014 14.7139 15.1106 15.1042C14.7199 15.4945 14.7196 16.1277 15.1099 16.5184L16.5249 15.1049ZM19.2939 20.7067C19.6842 21.0974 20.3173 21.0977 20.7081 20.7074C21.0988 20.3171 21.0991 19.6839 20.7088 19.2932L19.2939 20.7067ZM15.1099 16.5184L19.2939 20.7067L20.7088 19.2932L16.5249 15.1049L15.1099 16.5184Z",
+    fill: props.color
+  })]
+});
+SvgSearchOutline.defaultProps = {
+  color: '#404545',
+  size: 24
+};
+
+const {
+  colors
+} = foundations;
+const InputSearchbox = ({
+  size,
+  onChange,
+  css,
+  disabled,
+  withDebounce,
+  defaultValue,
+  mobileOnly,
+  desktopOnly,
+  ...props
+}) => {
+  const {
+    t
+  } = useTranslation(['MajooUI/inputSearchbox', 'translation']);
+  const [value, setValue] = useState(defaultValue);
+  const inputValue = props?.value ?? value;
+  const debounceChange = useCallback(debounce(e => onChange?.(e), 1000), [onChange]);
+  const handleChange = useCallback(e => {
+    setValue(e.target.value);
+    if (withDebounce) {
+      debounceChange(e.target.value);
+    } else {
+      onChange?.(e.target.value);
+    }
+  }, [onChange, debounceChange, withDebounce]);
+  const handleClearButtonClick = e => {
+    e.preventDefault();
+    if (!disabled) {
+      setValue('');
+      if (onChange) onChange('');
+    }
+  };
+  return /*#__PURE__*/jsxs(InputGroup, {
+    size: size,
+    css: css,
+    disabled: disabled,
+    mobileOnly: mobileOnly,
+    desktopOnly: desktopOnly,
+    children: [/*#__PURE__*/jsx(InputLeftElement, {
+      children: /*#__PURE__*/jsx(SvgSearchOutline, {})
+    }), /*#__PURE__*/jsx(InputText, {
+      placeholder: t('placeholder', 'Cari ...'),
+      onChange: handleChange,
+      value: value,
+      disabled: disabled,
+      css: {
+        height: 'fit-content'
+      },
+      ...props
+    }), /*#__PURE__*/jsx(InputRightElement, {
+      children: inputValue?.length > 0 ? /*#__PURE__*/jsx(SvgCloseFilled, {
+        color: colors.iconSecondary
+      }) : /*#__PURE__*/jsx("div", {}),
+      onClick: handleClearButtonClick
+    })]
+  });
+};
+InputSearchbox.propTypes = {
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  size: PropTypes.oneOf(['sm', 'lg']),
+  isInvalid: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func,
+  withDebounce: PropTypes.bool,
+  mobileOnly: PropTypes.bool,
+  desktopOnly: PropTypes.bool
+};
+InputSearchbox.defaultProps = {
+  size: 'sm'
+};
+InputSearchbox.displayName = 'InputSearchbox';
+
+/** Detect free variable `global` from Node.js. */
+
+var freeGlobal$1 = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+var _freeGlobal = freeGlobal$1;
+
+var freeGlobal = _freeGlobal;
+
+/** Detect free variable `self`. */
+var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+/** Used as a reference to the global object. */
+var root$1 = freeGlobal || freeSelf || Function('return this')();
+
+var _root = root$1;
+
+var root = _root;
+
+/** Built-in value references. */
+var Symbol$2 = root.Symbol;
+
+var _Symbol = Symbol$2;
+
+var Symbol$1 = _Symbol;
+
+/** Used for built-in method references. */
+var objectProto$1 = Object.prototype;
+
+/** Used to check objects for own properties. */
+var hasOwnProperty = objectProto$1.hasOwnProperty;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString$1 = objectProto$1.toString;
+
+/** Built-in value references. */
+var symToStringTag$1 = Symbol$1 ? Symbol$1.toStringTag : undefined;
+
+/**
+ * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the raw `toStringTag`.
+ */
+function getRawTag$1(value) {
+  var isOwn = hasOwnProperty.call(value, symToStringTag$1),
+      tag = value[symToStringTag$1];
+
+  try {
+    value[symToStringTag$1] = undefined;
+    var unmasked = true;
+  } catch (e) {}
+
+  var result = nativeObjectToString$1.call(value);
+  if (unmasked) {
+    if (isOwn) {
+      value[symToStringTag$1] = tag;
+    } else {
+      delete value[symToStringTag$1];
+    }
+  }
+  return result;
+}
+
+var _getRawTag = getRawTag$1;
+
+/** Used for built-in method references. */
+
+var objectProto = Object.prototype;
+
+/**
+ * Used to resolve the
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+ * of values.
+ */
+var nativeObjectToString = objectProto.toString;
+
+/**
+ * Converts `value` to a string using `Object.prototype.toString`.
+ *
+ * @private
+ * @param {*} value The value to convert.
+ * @returns {string} Returns the converted string.
+ */
+function objectToString$1(value) {
+  return nativeObjectToString.call(value);
+}
+
+var _objectToString = objectToString$1;
+
+var Symbol = _Symbol,
+    getRawTag = _getRawTag,
+    objectToString = _objectToString;
+
+/** `Object#toString` result references. */
+var nullTag = '[object Null]',
+    undefinedTag = '[object Undefined]';
+
+/** Built-in value references. */
+var symToStringTag = Symbol ? Symbol.toStringTag : undefined;
+
+/**
+ * The base implementation of `getTag` without fallbacks for buggy environments.
+ *
+ * @private
+ * @param {*} value The value to query.
+ * @returns {string} Returns the `toStringTag`.
+ */
+function baseGetTag$1(value) {
+  if (value == null) {
+    return value === undefined ? undefinedTag : nullTag;
+  }
+  return (symToStringTag && symToStringTag in Object(value))
+    ? getRawTag(value)
+    : objectToString(value);
+}
+
+var _baseGetTag = baseGetTag$1;
+
+/**
+ * Checks if `value` is the
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+ * @example
+ *
+ * _.isObject({});
+ * // => true
+ *
+ * _.isObject([1, 2, 3]);
+ * // => true
+ *
+ * _.isObject(_.noop);
+ * // => true
+ *
+ * _.isObject(null);
+ * // => false
+ */
+
+function isObject$1(value) {
+  var type = typeof value;
+  return value != null && (type == 'object' || type == 'function');
+}
+
+var isObject_1 = isObject$1;
+
+var baseGetTag = _baseGetTag,
+    isObject = isObject_1;
+
+/** `Object#toString` result references. */
+var asyncTag = '[object AsyncFunction]',
+    funcTag = '[object Function]',
+    genTag = '[object GeneratorFunction]',
+    proxyTag = '[object Proxy]';
+
+/**
+ * Checks if `value` is classified as a `Function` object.
+ *
+ * @static
+ * @memberOf _
+ * @since 0.1.0
+ * @category Lang
+ * @param {*} value The value to check.
+ * @returns {boolean} Returns `true` if `value` is a function, else `false`.
+ * @example
+ *
+ * _.isFunction(_);
+ * // => true
+ *
+ * _.isFunction(/abc/);
+ * // => false
+ */
+function isFunction(value) {
+  if (!isObject(value)) {
+    return false;
+  }
+  // The use of `Object#toString` avoids issues with the `typeof` operator
+  // in Safari 9 which returns 'object' for typed arrays and other constructors.
+  var tag = baseGetTag(value);
+  return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
+}
+
+var isFunction_1 = isFunction;
+
+var isFunction$1 = /*@__PURE__*/getDefaultExportFromCjs(isFunction_1);
+
+const {
+  zIndices: zIndices$1
+} = foundations;
+const PopoverContext = /*#__PURE__*/createContext();
+const Popover = ({
+  children,
+  open = false,
+  onOpenChange,
+  placement,
+  sideOffset = 5,
+  hideOnScroll = false,
+  flip: flip$1 = true,
+  onClose
+}) => {
+  const [openState, setOpenState] = useState(false);
+  useEffect(() => {
+    setOpenState(open);
+  }, [open]);
+  useEffect(() => {
+    if (onOpenChange) onOpenChange(openState);
+  }, [openState, onOpenChange]);
+  const floatingHook = useFloating({
+    open: openState,
+    middleware: [offset(sideOffset), shift(), flip$1 && flip()],
+    onOpenChange: isOpen => {
+      setOpenState(isOpen);
+      !isOpen && onClose?.();
+    },
+    placement
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps
+  } = useInteractions([useClick(floatingHook.context, {
+    keyboardHandlers: false
+  }), useDismiss(floatingHook.context, {
+    ancestorScroll: hideOnScroll
+  })]);
+  const value = {
+    openState,
+    setOpenState,
+    floatingHook,
+    getReferenceProps,
+    getFloatingProps
+  };
+  return /*#__PURE__*/jsx(PopoverContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+const PopoverTrigger = ({
+  children,
+  disabled
+}) => {
+  const {
+    floatingHook: {
+      refs
+    },
+    getReferenceProps
+  } = useContext(PopoverContext);
+  return disabled ? children : /*#__PURE__*/cloneElement(children, getReferenceProps({
+    ref: refs.setReference,
+    ...children.props
+  }));
+};
+const PopoverContent = ({
+  children,
+  isMobile,
+  style,
+  portalled
+}) => {
+  const {
+    openState,
+    floatingHook: {
+      x,
+      y,
+      strategy,
+      context,
+      refs
+    },
+    getFloatingProps
+  } = useContext(PopoverContext);
+  return openState ? /*#__PURE__*/jsx(ConditionalWrapper, {
+    condition: portalled,
+    wrapper: child => /*#__PURE__*/jsx(FloatingPortal, {
+      children: child
+    }),
+    children: /*#__PURE__*/jsx(FloatingFocusManager, {
+      context: context,
+      modal: false,
+      order: ['reference', 'content'],
+      returnFocus: false,
+      children: /*#__PURE__*/jsx("div", {
+        ...getFloatingProps({
+          ref: refs.setFloating,
+          style: {
+            position: strategy,
+            top: isMobile ? 0 : y ?? '',
+            left: isMobile ? 0 : x ?? '',
+            zIndex: zIndices$1.popover,
+            ...style
+          }
+        }),
+        children: children
+      })
+    })
+  }) : /*#__PURE__*/jsx(Fragment, {});
+};
+const PopoverClose = ({
+  children,
+  ...props
+}) => {
+  const {
+    setOpenState
+  } = useContext(PopoverContext);
+  return /*#__PURE__*/jsx(Flex, {
+    ...props,
+    onClick: () => {
+      if (props.onClick) props.onClick();
+      setOpenState(false);
+    },
+    children: children
+  });
+};
+Popover.propTypes = {
+  open: PropTypes.bool,
+  onOpenChange: PropTypes.func,
+  placement: PropTypes.oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end']),
+  sideOffset: PropTypes.number,
+  hideOnScroll: PropTypes.bool
+};
+Popover.displayName = 'Popover';
+
+function extractStringFromHTML(html = '') {
+  const regex = />([^<>]+)</g;
+  return Array.from(html.matchAll(regex), m => m[1]);
+}
+
+const {
+  zIndices
+} = foundations;
+const SelectContainer = styled('div', {
+  margin: 0,
+  flexDirection: 'column',
+  display: 'block',
+  position: 'relative',
+  fontFamily: 'inherit',
+  fontVariantNumeric: 'tabular-nums',
+  fontSize: '$short-content-regular',
+  fontWeight: '400',
+  textAlign: 'left',
+  alignItems: 'center',
+  letterSpacing: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  color: '$textPrimary',
+  width: '100%',
+  variants: {
+    mobileOnly: {
+      true: {
+        '@lg': {
+          display: 'none !important'
+        }
+      }
+    },
+    desktopOnly: {
+      true: {
+        display: 'none !important',
+        '@lg': {
+          display: 'block !important'
+        }
+      }
+    }
+  }
+});
+const SelectBox = styled(Flex, {
+  margin: 0,
+  position: 'relative',
+  appearance: 'none',
+  background: 'none',
+  boxSizing: 'border-box',
+  border: '1px solid $bgOutline',
+  borderRadius: '$lg',
+  outline: 'none',
+  '&:focus-within': {
+    border: '1px solid $primary400'
+  },
+  '&:hover': {
+    border: '1px solid $primary600'
+  },
+  variants: {
+    size: {
+      sm: {
+        height: 32
+      },
+      lg: {
+        height: 40
+      }
+    },
+    disabled: {
+      true: {
+        backgroundColor: '$formDisable',
+        color: '$textDisable',
+        cursor: 'not-allowed',
+        '&:hover': {
+          border: '1px solid $bgOutline'
+        },
+        '&:focus-within': {
+          border: '1px solid $bgOutline'
+        }
+      }
+    },
+    readOnly: {
+      true: {
+        backgroundColor: '$formDisable',
+        color: '$textPrimary',
+        '&:hover': {
+          border: '1px solid $bgOutline'
+        },
+        '&:focus-within': {
+          border: '1px solid $bgOutline'
+        }
+      }
+    },
+    isInvalid: {
+      true: {
+        border: '1px solid $formError',
+        '&:focus-within': {
+          border: '1px solid $formError'
+        },
+        '&:hover': {
+          border: '1px solid $formError'
+        }
+      }
+    }
+  }
+});
+const Button = styled('button', {
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  flex: 1,
+  minWidth: 0,
+  background: 'none',
+  outline: 'none',
+  border: 'none',
+  cursor: 'pointer',
+  color: '$textContent',
+  alignItems: 'center',
+  '&:disabled': {
+    cursor: 'not-allowed',
+    color: '$textDisable'
+  },
+  variants: {
+    size: {
+      sm: {
+        padding: '5px 16px'
+      },
+      lg: {
+        padding: '11px 16px 12px'
+      }
+    },
+    readOnly: {
+      true: {
+        color: '$textPrimary'
+      }
+    }
+  }
+});
+const Input = styled('input', {
+  marginLeft: '$spacing-05',
+  display: 'flex',
+  width: '100%',
+  height: '100%',
+  background: 'none',
+  outline: 'none',
+  border: 'none',
+  cursor: 'text',
+  color: '$textPrimary',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  '&:disabled': {
+    cursor: 'not-allowed',
+    color: '$textDisable'
+  },
+  '&::placeholder': {
+    color: '$textDisable',
+    opacity: 1
+  },
+  variants: {
+    isReadOnly: {
+      true: {
+        color: '$textPrimary'
+      }
+    }
+  }
+});
+const IconContainer = styled('div', {
+  flex: ' 0 0 auto',
+  width: 'auto',
+  display: 'flex',
+  alignItems: 'center',
+  paddingRight: '$spacing-05',
+  cursor: 'pointer',
+  variants: {
+    disabled: {
+      true: {
+        cursor: 'not-allowed'
+      }
+    }
+  }
+});
+const OptionWrapper = styled('div', {
+  display: 'none',
+  overflow: 'auto',
+  fontFamily: 'inherit',
+  fontVariantNumeric: 'tabular-nums',
+  fontSize: '$short-content-regular',
+  fontWeight: '400',
+  textAlign: 'left',
+  zIndex: 1,
+  borderRadius: '$sm',
+  backgroundColor: '$bgWhite',
+  boxShadow: '0px 2px 12px #00000014',
+  width: '100%',
+  maxHeight: '300px',
+  position: 'absolute',
+  float: 'left',
+  top: '100%',
+  left: '0',
+  variants: {
+    placement: {
+      bottom: {
+        top: '100%',
+        left: '0',
+        transform: 'none'
+      },
+      top: {
+        top: '0',
+        left: '0',
+        transform: 'translate(0, -100%)'
+      }
+    },
+    withFooter: {
+      true: {
+        maxHeight: 'calc(100vh - 64px - 96px)'
+      }
+    },
+    isMobile: {
+      true: {
+        display: 'block',
+        position: 'unset',
+        boxShadow: 'none',
+        inset: 'unset',
+        borderRadius: 'unset',
+        maxHeight: 'calc(100vh - 64px - 56px)'
+      }
+    }
+  },
+  defaultVariants: {
+    placement: 'bottom'
+  }
+});
+const SelectOption = styled('div', {
+  flexDirection: 'column',
+  display: 'block',
+  borderRadius: '$lg',
+  padding: '12px 16px',
+  overflowY: 'auto',
+  minHeight: '40px',
+  height: '100%'
+});
+const SelectItem = styled('div', {
+  overflow: 'hidden',
+  padding: '$spacing-05 0',
+  backgroundColor: 'rgb(235, 245, 255)',
+  cursor: 'pointer',
+  lineHeight: '20px',
+  '&:not(:last-child)': {
+    borderBottom: '1px solid $bgBorder'
+  },
+  variants: {
+    hasGroup: {
+      true: {
+        paddingLeft: '$spacing-06'
+      }
+    },
+    isGroup: {
+      true: {
+        padding: '$spacing-03 0',
+        borderBottom: 'none !important'
+      }
+    }
+  }
+});
+const StyledFooter = styled('div', {
+  position: 'sticky',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  backgroundColor: '$bgWhite',
+  boxShadow: '0px 4px 6px #00000014',
+  borderTop: '1px solid $bgBorder',
+  pointerEvents: 'auto'
+});
+const StyledDiv = styled('div', {
+  color: '$textDisable',
+  display: 'flex',
+  alignItems: 'center'
+});
+const StyledText = {
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+};
+const SelectInputSearch = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
+  var {
+      showLeadingIcon = false,
+      showClearIcon = true,
+      disabled,
+      placeholder,
+      readOnly,
+      inputProps,
+      handleInputValue,
+      noStyling,
+      onChange
+    } = _a,
+    props = __rest(_a, ["showLeadingIcon", "showClearIcon", "disabled", "placeholder", "readOnly", "inputProps", "handleInputValue", "noStyling", "onChange"]);
+  const inputRef = React.useRef(null);
+  return jsxs(InputGroup, {
+    css: !noStyling && {
+      height: '100%',
+      border: 'none',
+      '&:hover': {
+        border: 'none'
+      }
+    },
+    disabled: disabled,
+    children: [jsx(InputLeftElement, {
+      children: showLeadingIcon && jsx(SearchOutline, {}),
+      css: !showLeadingIcon ? {
+        width: '$spacing-05',
+        padding: 0
+      } : undefined
+    }), jsx(Input, Object.assign({}, inputProps, props, {
+      placeholder: placeholder,
+      readOnly: readOnly,
+      isReadOnly: readOnly,
+      ref: forwardedRef,
+      disabled: disabled,
+      css: {
+        marginLeft: 0,
+        height: 'fit-content'
+      }
+    })), showClearIcon ? jsx(InputRightElement, {
+      children: showClearIcon && (inputProps.value || '').length > 0 && !disabled ? jsx(CloseFilled, {}) : jsx("div", {}),
+      onClick: e => {
+        if (!disabled) {
+          inputProps.onChange(Object.assign(Object.assign({}, e), {
+            target: Object.assign(Object.assign({}, e.target), {
+              value: ''
+            })
+          }));
+          if (handleInputValue) handleInputValue('');
+          if (inputRef.current) inputRef.current.focus();
+        }
+      }
+    }) : null]
+  });
+});
+function isHTMLElement(element) {
+  return 'offsetTop' in element;
+}
+const InputSelect = /*#__PURE__*/React.forwardRef((_a, ref) => {
+  var {
+      option,
+      onChange,
+      value,
+      placeholder,
+      searchPlaceholder,
+      embedSearch = false,
+      size = 'lg',
+      disabled = false,
+      search = false,
+      iconColor = 'currentColor',
+      hideArrowicon = false,
+      showLeadingIcon,
+      placement = 'bottom',
+      disabledOptions,
+      textSelector = 'name',
+      valueSelector = 'value',
+      readOnly = false,
+      isInvalid = false,
+      noOptionIcon = false,
+      fetchData,
+      onSearch,
+      isLoading = false,
+      showTooltip = false,
+      css,
+      renderFooter,
+      optionCss,
+      emptyDataMessage,
+      mobileOnly,
+      desktopOnly,
+      onStateChange,
+      isMobile = false,
+      mobileTitle,
+      withDebounce = true,
+      renderAsLabel = true
+    } = _a,
+    props = __rest(_a, ["option", "onChange", "value", "placeholder", "searchPlaceholder", "embedSearch", "size", "disabled", "search", "iconColor", "hideArrowicon", "showLeadingIcon", "placement", "disabledOptions", "textSelector", "valueSelector", "readOnly", "isInvalid", "noOptionIcon", "fetchData", "onSearch", "isLoading", "showTooltip", "css", "renderFooter", "optionCss", "emptyDataMessage", "mobileOnly", "desktopOnly", "onStateChange", "isMobile", "mobileTitle", "withDebounce", "renderAsLabel"]);
+  const {
+    t
+  } = useTranslation(['MajooUI/inputSelect', 'translation']);
+  const [options, setOptions] = useState([]);
+  const [item, setItem] = useState([]);
+  const [groupedItems, setGroupedItems] = useState([]);
+  const [selectedValue, setSelectedValue] = useState(value);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [query, setQuery] = useState();
+  const [openOptions, setOpenOptions] = useState(false);
+  const [open, setOpen] = useState(false);
+  const selectBoxRef = useRef(null);
+  const scrollerRef = useRef(null);
+  useEffect(() => {
+    var _a;
+    if (search && Boolean(query)) {
+      (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+        top: 0
+      });
+      return;
+    }
+    const scrollToSelectedElement = () => {
+      const element = document.querySelector(`[data-index="${selectedIndex}"]`);
+      const scrollContainer = scrollerRef.current;
+      if (element && isHTMLElement(element) && scrollContainer) {
+        const elementPosition = element.offsetTop - scrollContainer.offsetTop;
+        scrollContainer.scrollTop = elementPosition;
+      }
+    };
+    scrollToSelectedElement();
+  }, [query, search, openOptions, open, selectedIndex]);
+  const handleInputValue = (value, isReset = false) => {
+    if (onSearch && !isReset) onSearch(value);
+    if (fetchData) return;
+    if (value === '') {
+      return setItem(options);
+    } else {
+      setItem(options.filter(item => {
+        const nameIsIncluded = item.name.toLowerCase().includes(value.toLocaleLowerCase());
+        if (item.render && isFunction$1(item.render)) {
+          const extractedString = item.render() ? extractStringFromHTML(renderToString(item.render())).join(',') : '';
+          return nameIsIncluded || extractedString.toLowerCase().includes(value.toLocaleLowerCase());
+        }
+        return nameIsIncluded;
+      }));
+    }
+  };
+  const generateOptions = (data, valueSelector = '', textSelector = '') => {
+    return data.map(option => {
+      if (typeof option === 'object') {
+        const name = textSelector ? option[textSelector] : Object.values(option)[0];
+        const value = valueSelector ? option[valueSelector] : Object.values(option)[1];
+        return {
+          name,
+          value,
+          isDisabled: option.isDisabled === undefined && disabledOptions && disabledOptions.length > 0 ? disabledOptions.includes(value) : option.isDisabled,
+          render: option.render,
+          group: option.group
+        };
+      }
+      return {
+        name: option,
+        value: option,
+        isDisabled: disabledOptions && disabledOptions.includes(option),
+        render: option.render,
+        group: option.group
+      };
+    });
+  };
+  const debouncedSearch = React.useRef(debounce(query => __awaiter(void 0, void 0, void 0, function* () {
+    setQuery(query);
+    if (onSearch) onSearch(query);
+  }), 1000)).current;
+  useEffect(() => {
+    var _a;
+    (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+      top: 0
+    });
+  }, [query]);
+  useEffect(() => {
+    setSelectedValue(value);
+  }, [value]);
+  useEffect(() => {
+    if (groupedItems && value) {
+      const itemIndex = (groupedItems.length > 0 ? groupedItems : item !== null && item !== void 0 ? item : []).findIndex(val => String(val.value) === String(value.value));
+      if (itemIndex >= 0) {
+        setSelectedIndex(itemIndex);
+      }
+    }
+  }, [value, groupedItems, item]);
+  useEffect(() => {
+    const generatedOption = generateOptions(option, valueSelector, textSelector);
+    setItem(generatedOption);
+    setOptions(generatedOption);
+  }, [option, disabledOptions, valueSelector, textSelector]);
+  useEffect(() => {
+    return () => {
+      debouncedSearch.cancel();
+    };
+  }, [debouncedSearch]);
+  useEffect(() => {
+    setGroupedItems(item.sort(function (a, b) {
+      const nameA = (typeof a.group === 'string' ? a.group.toUpperCase() : a.group) || ''; // ignore upper and lowercase
+      const nameB = (typeof b.group === 'string' ? b.group.toUpperCase() : b.group) || ''; // ignore upper and lowercase
+      if (!a.group) return 1;
+      if (!b.group) return -1;
+      if (nameA < nameB) {
+        return -1;
+      }
+      if (nameA > nameB) {
+        return 1;
+      }
+      return 0;
+    }).reduce((prev, current) => {
+      let addedGroupItems = [];
+      if (prev) addedGroupItems = [...prev];
+      const group = current.group;
+      if ((!prev || !prev.find(val => val.value === `#group#${group}#`)) && group) {
+        addedGroupItems.push({
+          name: group,
+          value: `#group#${group}#`,
+          isGroup: true,
+          render: () => jsx(Paragraph, {
+            color: "primary",
+            paragraph: "shortContentBold",
+            children: group
+          })
+        });
+      }
+      addedGroupItems.push(current);
+      return addedGroupItems;
+    }, []));
+  }, [item]);
+  const stateReducer = (_, changes) => {
+    switch (changes.type) {
+      case Downshift.stateChangeTypes.blurButton:
+        return {
+          isOpen: true
+        };
+      default:
+        return changes;
+    }
+  };
+  return jsx(Downshift, Object.assign({}, props, {
+    onChange: onChange,
+    itemToString: item => item ? item.name : '',
+    selectedItem: selectedValue !== undefined ? selectedValue : null,
+    onSelect: (selectedItem, _) => setSelectedValue(selectedItem),
+    onStateChange: state => {
+      if (state && (state.type === '__autocomplete_mouseup__' || String(state.type) === '1') && 'inputValue' in state) {
+        handleInputValue(String(state.inputValue ? state.inputValue : '').toLowerCase());
+      }
+      if (!('isOpen' in state)) return;
+      if (state.isOpen && embedSearch) handleInputValue('', true);
+      if (!state.isOpen && fetchData && query && query.length > 0 && onSearch) {
+        onSearch('');
+        setQuery('');
+      }
+      if (onStateChange) onStateChange(state);
+    },
+    stateReducer: stateReducer,
+    children: ({
+      getRootProps,
+      getToggleButtonProps,
+      getMenuProps,
+      getInputProps,
+      getItemProps,
+      isOpen,
+      selectedItem,
+      highlightedIndex
+    }) => {
+      var _a, _b;
+      const handleDownOption = () => {
+        if (hideArrowicon || noOptionIcon) {
+          return null;
+        }
+        return jsx(IconContainer, Object.assign({}, getToggleButtonProps({
+          disabled: disabled || readOnly
+        }), {
+          disabled: disabled,
+          readOnly: readOnly,
+          children: jsx(CaretDownOutline, {
+            color: readOnly ? colors$1.gray300 : iconColor
+          })
+        }));
+      };
+      setOpen(isOpen);
+      return !isMobile ? jsx(Popover, {
+        open: openOptions,
+        onOpenChange: setOpenOptions,
+        placement: placement,
+        hideOnScroll: true,
+        children: jsxs(SelectContainer, {
+          css: css,
+          ref: selectBoxRef,
+          mobileOnly: mobileOnly,
+          desktopOnly: desktopOnly,
+          children: [jsx(ConditionalWrapper, {
+            condition: showTooltip && selectedValue,
+            wrapper: children => jsx(Tooltip, {
+              color: "dark",
+              label: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.name,
+              children: children
+            }),
+            children: jsx(PopoverTrigger, {
+              children: jsxs(SelectBox, Object.assign({}, getRootProps({
+                refKey: 'ref'
+              }, {
+                suppressRefError: true
+              }), {
+                size: size,
+                disabled: disabled,
+                readOnly: readOnly,
+                isInvalid: isInvalid,
+                children: [search && !disabled && !readOnly ? jsx(Box, {
+                  style: {
+                    width: '100%',
+                    flex: 1
+                  },
+                  children: jsx(SelectInputSearch, {
+                    ref: ref,
+                    showLeadingIcon: showLeadingIcon,
+                    showClearIcon: hideArrowicon,
+                    disabled: disabled,
+                    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t('placeholder', 'Pilih Item'),
+                    readOnly: readOnly,
+                    handleInputValue: !fetchData ? handleInputValue : query => {
+                      if (onSearch) onSearch(query);
+                      setQuery(query);
+                    },
+                    inputProps: getInputProps({
+                      onChange: event => {
+                        setOpenOptions(true);
+                        if (event.type !== 'change') return;
+                        const query = event.target.value;
+                        if (!fetchData) handleInputValue(query);else debouncedSearch(query);
+                      },
+                      disabled
+                    }),
+                    onClick: !isOpen ? getToggleButtonProps({
+                      disabled: disabled || readOnly
+                    }).onClick : undefined
+                  })
+                }) : jsx(Button, Object.assign({
+                  ref: ref
+                }, getToggleButtonProps({
+                  disabled: disabled || readOnly
+                }), {
+                  disabled: disabled,
+                  size: size,
+                  readOnly: readOnly,
+                  type: "button",
+                  children: selectedItem ? selectedItem.render && renderAsLabel ? selectedItem.render(selectedItem) : jsx(Text, {
+                    color: disabled ? 'disable' : 'primary',
+                    css: StyledText,
+                    children: selectedItem.name
+                  }) : jsx(Text, {
+                    color: "disable",
+                    css: StyledText,
+                    children: placeholder !== null && placeholder !== void 0 ? placeholder : t('placeholder', 'Pilih Item')
+                  })
+                })), handleDownOption()]
+              }))
+            })
+          }), jsx(Portal, {
+            children: jsx(PopoverContent, {
+              style: {
+                width: (_b = (_a = selectBoxRef === null || selectBoxRef === void 0 ? void 0 : selectBoxRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0,
+                zIndex: zIndices.tooltip
+              },
+              children: jsxs(Fragment, {
+                children: [isOpen && isLoading && jsx(Flex, {
+                  justify: "center",
+                  align: "center",
+                  css: {
+                    position: 'absolute',
+                    inset: 0,
+                    zIndex: '$tooltip',
+                    top: item.length > 0 ? '0px' : placement === 'top' ? '-20px' : '20px',
+                    // bottom: '80px',
+                    width: '100%',
+                    height: scrollerRef.current ? scrollerRef.current.clientHeight : '40px',
+                    backgroundColor: '$bgWhite',
+                    opacity: 0.8,
+                    transform: placement === 'top' ? 'translate(0, -100%)' : 'none'
+                  },
+                  children: jsx(Text, {
+                    variant: "caption",
+                    children: "Loading...."
+                  })
+                }), jsx(ConditionalWrapper, {
+                  condition: renderFooter && typeof renderFooter === 'function',
+                  wrapper: child => jsxs(Box, {
+                    css: {
+                      position: 'absolute',
+                      float: 'left',
+                      display: isOpen ? 'block' : 'none',
+                      zIndex: '$popover',
+                      width: '100%'
+                    },
+                    children: [child, renderFooter && typeof renderFooter === 'function' && jsx(StyledFooter, {
+                      children: renderFooter === null || renderFooter === void 0 ? void 0 : renderFooter()
+                    })]
+                  }),
+                  children: jsxs(OptionWrapper, Object.assign({}, getMenuProps({
+                    ref: scrollerRef
+                  }, {
+                    suppressRefError: true
+                  }), {
+                    css: Object.assign({
+                      display: isOpen ? 'block' : 'none',
+                      zIndex: '$popover',
+                      pointerEvents: 'auto'
+                    }, optionCss),
+                    withFooter: renderFooter && typeof renderFooter === 'function',
+                    placement: placement,
+                    children: [!search && embedSearch && isOpen && jsx(SelectContainer, {
+                      css: {
+                        position: 'sticky',
+                        top: 0,
+                        zIndex: '$sticky',
+                        padding: '$spacing-04 $spacing-05 0',
+                        backgroundColor: '$bgWhite'
+                      },
+                      children: jsx(InputSearchbox, {
+                        size: 'sm',
+                        onChange: handleInputValue,
+                        placeholder: searchPlaceholder !== null && searchPlaceholder !== void 0 ? searchPlaceholder : t('searchPlaceholder', 'Cari ...'),
+                        withDebounce: withDebounce
+                      })
+                    }), item.length > 0 || isLoading ? jsx(ConditionalWrapper, {
+                      condition: !!fetchData && item.length > 0,
+                      wrapper: children => jsx(InfiniteScroll, {
+                        loadMore: _ => {
+                          if (!isLoading && fetchData) fetchData({
+                            query
+                          });
+                        },
+                        hasMore: true,
+                        threshold: 5,
+                        useWindow: false,
+                        children: children
+                      }),
+                      children: jsx(PopoverClose, {
+                        css: {
+                          display: 'block !important'
+                        },
+                        children: jsx(SelectOption, {
+                          children: (groupedItems.length > 0 ? groupedItems : item).map((item, index) => {
+                            var _a;
+                            return /*#__PURE__*/createElement(SelectItem, Object.assign({}, getItemProps({
+                              item,
+                              disabled: item.isDisabled || item.isGroup,
+                              onClick: () => setSelectedIndex(index)
+                            }), {
+                              key: (_a = item.value) !== null && _a !== void 0 ? _a : index,
+                              hasGroup: !!item.group,
+                              isGroup: item.isGroup,
+                              "data-index": index,
+                              css: Object.assign({}, !item.isGroup ? item.isDisabled ? {
+                                backgroundColor: 'unset',
+                                cursor: 'not-allowed',
+                                color: '$textDisable'
+                              } : {
+                                backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
+                                fontWeight: 'normal',
+                                color: selectedItem && selectedItem.value === item.value ? '$textBrand' : '$textPrimary'
+                              } : {
+                                backgroundColor: 'unset',
+                                cursor: 'default'
+                              })
+                            }), item.render ? item.render(selectedItem) : item.name);
+                          })
+                        })
+                      })
+                    }) : jsx(SelectOption, {
+                      children: jsxs(StyledDiv, {
+                        children: [jsx("div", {
+                          style: {
+                            marginRight: '6px'
+                          },
+                          children: jsx(CircleInfoOutline, {
+                            size: "16px",
+                            color: colors$1.iconDisable,
+                            style: {
+                              verticalAlign: 'text-bottom'
+                            }
+                          })
+                        }), emptyDataMessage || t('noItemPlaceholder', 'Item tidak ditemukan')]
+                      })
+                    })]
+                  }))
+                })]
+              })
+            })
+          })]
+        })
+      }) : jsx(SelectContainer, {
+        css: css,
+        ref: selectBoxRef,
+        mobileOnly: mobileOnly,
+        desktopOnly: desktopOnly,
+        children: jsxs(ConditionalWrapper, {
+          condition: showTooltip && selectedValue,
+          wrapper: children => jsx(Tooltip, {
+            color: "dark",
+            label: selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.name,
+            children: children
+          }),
+          children: [jsxs(SelectBox, Object.assign({}, getRootProps({
+            refKey: 'ref'
+          }, {
+            suppressRefError: true
+          }), {
+            size: size,
+            disabled: disabled,
+            readOnly: readOnly,
+            isInvalid: isInvalid,
+            children: [jsx(Button, Object.assign({
+              ref: ref
+            }, getToggleButtonProps({
+              disabled: disabled || readOnly
+            }), {
+              disabled: disabled,
+              size: size,
+              readOnly: readOnly,
+              type: "button",
+              children: selectedItem ? selectedItem.render && renderAsLabel ? selectedItem.render(selectedItem) : jsx(Text, {
+                color: disabled ? 'disable' : 'primary',
+                css: StyledText,
+                children: selectedItem.name
+              }) : jsx(Text, {
+                color: "disable",
+                css: StyledText,
+                children: placeholder !== null && placeholder !== void 0 ? placeholder : t('placeholder', 'Pilih Item')
+              })
+            })), handleDownOption()]
+          })), jsxs(ModalDialog, {
+            isMobile: true,
+            open: isOpen,
+            children: [jsx(ModalDialogTitle, {
+              children: mobileTitle || placeholder || t('placeholder', 'Pilih Item')
+            }), jsx(ModalDialogContent, {
+              css: {
+                padding: 0,
+                maxHeight: 'unset',
+                position: 'relative'
+              },
+              children: jsxs(Fragment, {
+                children: [isOpen && isLoading && jsx(Flex, {
+                  justify: "center",
+                  align: "center",
+                  css: {
+                    position: 'absolute',
+                    inset: 0,
+                    zIndex: '$tooltip',
+                    top: item.length > 0 ? '0px' : placement === 'top' ? '-20px' : '20px',
+                    // bottom: '80px',
+                    width: '100%',
+                    height: scrollerRef.current ? scrollerRef.current.clientHeight : '40px',
+                    backgroundColor: '$bgWhite',
+                    opacity: 0.8
+                  },
+                  children: jsx(Text, {
+                    variant: "caption",
+                    children: "Loading...."
+                  })
+                }), jsxs(OptionWrapper, Object.assign({}, getMenuProps({
+                  ref: scrollerRef
+                }, {
+                  suppressRefError: true
+                }), {
+                  css: Object.assign({
+                    pointerEvents: 'auto'
+                  }, optionCss),
+                  withFooter: renderFooter && typeof renderFooter === 'function',
+                  isMobile: true,
+                  children: [(search || embedSearch) && isOpen && jsx(SelectContainer, {
+                    css: {
+                      position: 'sticky',
+                      top: 0,
+                      zIndex: '$sticky',
+                      padding: '$spacing-04 $spacing-05 0',
+                      backgroundColor: '$bgWhite'
+                    },
+                    children: jsx(InputSearchbox, {
+                      size: 'sm',
+                      onChange: handleInputValue,
+                      placeholder: searchPlaceholder !== null && searchPlaceholder !== void 0 ? searchPlaceholder : t('searchPlaceholder', 'Cari ...'),
+                      withDebounce: withDebounce
+                    })
+                  }), item.length > 0 || isLoading ? jsx(ConditionalWrapper, {
+                    condition: !!fetchData && item.length > 0,
+                    wrapper: children => jsx(InfiniteScroll, {
+                      loadMore: _ => {
+                        if (!isLoading && fetchData) fetchData({
+                          query
+                        });
+                      },
+                      hasMore: true,
+                      threshold: 5,
+                      useWindow: false,
+                      children: children
+                    }),
+                    children: jsx(SelectOption, {
+                      children: (groupedItems.length > 0 ? groupedItems : item).map((item, index) => {
+                        var _a;
+                        return /*#__PURE__*/createElement(SelectItem, Object.assign({}, getItemProps({
+                          item,
+                          disabled: item.isDisabled || item.isGroup
+                        }), {
+                          key: (_a = item.value) !== null && _a !== void 0 ? _a : index,
+                          isGroup: item.isGroup,
+                          css: Object.assign({}, !item.isGroup ? item.isDisabled ? {
+                            backgroundColor: 'unset',
+                            cursor: 'not-allowed',
+                            color: '$textDisable'
+                          } : {
+                            backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
+                            fontWeight: 'normal',
+                            color: selectedItem && selectedItem.value === item.value ? '$textBrand' : '$textPrimary'
+                          } : {
+                            backgroundColor: 'unset',
+                            cursor: 'default'
+                          })
+                        }), item.render ? item.render(selectedItem) : item.name);
+                      })
+                    })
+                  }) : jsx(SelectOption, {
+                    children: jsxs(StyledDiv, {
+                      children: [jsx("div", {
+                        style: {
+                          marginRight: '6px'
+                        },
+                        children: jsx(CircleInfoOutline, {
+                          size: "16px",
+                          color: colors$1.iconDisable,
+                          style: {
+                            verticalAlign: 'text-bottom'
+                          }
+                        })
+                      }), emptyDataMessage || t('noItemPlaceholder', 'Item tidak ditemukan')]
+                    })
+                  }), renderFooter && typeof renderFooter === 'function' && jsx(StyledFooter, {
+                    children: renderFooter()
+                  })]
+                }))]
+              })
+            })]
+          })]
+        })
+      });
+    }
+  }));
+});
+
+const StyledSeparator = styled(SeparatorPrimitive.Root, {
+  backgroundColor: '$gray150',
+  '&[data-orientation=horizontal]': {
+    height: 1,
+    width: '100%'
+  },
+  '&[data-orientation=vertical]': {
+    width: 1
+  },
+  variants: {
+    responsive: {
+      true: {
+        display: 'none',
+        '@md': {
+          display: 'block'
+        }
+      }
+    },
+    mobileOnly: {
+      true: {
+        '@lg': {
+          display: 'none !important'
+        }
+      }
+    },
+    desktopOnly: {
+      true: {
+        display: 'none !important',
+        '@lg': {
+          display: 'block !important'
+        }
+      }
+    }
+  }
+});
+const Separator = StyledSeparator;
+Separator.displayName = 'Separator';
+
+export { Badge as B, CheckboxGroup as C, FormLabel as F, InputText as I, OptionWrapper as O, Popover as P, StyledInput as S, Tag as T, _baseGetTag as _, Separator as a, InputSearchbox as b, InputCheckbox as c, SelectContainer as d, PopoverTrigger as e, SelectBox as f, PopoverContent as g, SelectOption as h, isArray$1 as i, SelectItem as j, InputGroup as k, InputLeftElement as l, Input as m, InputRightElement as n, InputSelect as o, Tooltip as p, PopoverClose as q, _root as r, isObject_1 as s, isFunction_1 as t, _Symbol as u, isFunction$1 as v, IconContainer as w, InputPrefix as x, InputSuffix as y };