@zenkigen-inc/component-ui 1.1.2 → 1.2.0

package/dist/index.d.ts

@@ -10,6 +10,7 @@ export * from './icon-button';
 export * from './loading';
 export * from './modal';
 export * from './notification-inline';
+export * from './pagination-select';
 export * from './radio';
 export * from './search';
 export * from './select';

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { userColors, typography, buttonColors, focusVisible, iconColors, tagColors, tagLightColors } from '@zenkigen-inc/component-theme';
 import clsx$1, { clsx } from 'clsx';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import aa, { useState, useCallback, useEffect, createContext, useContext, useRef, cloneElement, forwardRef } from 'react';
+import aa, { useState, useCallback, useEffect, createContext, useContext, useRef, forwardRef } from 'react';
 import { iconElements } from '@zenkigen-inc/component-icons';
 
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -345,11 +345,7 @@ function Dropdown(_ref) {
     }
   }, [isVisible]);
   var wrapperClasses = clsx$1('relative', 'flex shrink-0 items-center gap-1', 'rounded', isDisabled && 'cursor-not-allowed');
-  var childrenButtonClasses = clsx$1('flex items-center justify-center', 'rounded', 'hover:bg-hover-hover02', 'active:bg-active-active02', focusVisible.normal, isDisabled && 'pointer-events-none', {
-    'h-6 w-6': size === 'x-small',
-    'h-8 w-8': size === 'small',
-    'h-10 w-10': size === 'medium',
-    'h-12 w-12': size === 'large',
+  var childrenButtonClasses = clsx$1('flex items-center justify-center', 'rounded', 'hover:bg-hover-hover02', 'active:bg-active-active02', focusVisible.normal, isDisabled && 'pointer-events-none', 'p-1', {
     'border border-border-uiBorder02': variant === 'outline'
   });
   var buttonClasses = clsx$1('flex items-center', 'rounded', buttonColors[variant].base, buttonColors[variant].hover, buttonColors[variant].active, buttonColors[variant].disabled, focusVisible.normal, isDisabled && 'pointer-events-none', {
@@ -358,9 +354,6 @@ function Dropdown(_ref) {
     'h-10 px-4': size === 'large'
   });
   var labelClasses = clsx$1('flex', 'items-center', !isArrowHidden ? size === 'x-small' ? 'mr-1' : 'mr-2' : null, typography.label[size === 'x-small' ? 'label3regular' : size === 'small' || size === 'medium' ? 'label2regular' : 'label1regular']);
-  var targetWithProps = target && /*#__PURE__*/cloneElement(target, {
-    isDisabled: isDisabled
-  });
   return /*#__PURE__*/jsx(DropdownContext.Provider, {
     value: {
       isVisible: isVisible,
@@ -378,7 +371,7 @@ function Dropdown(_ref) {
         className: childrenButtonClasses,
         onClick: handleToggle,
         disabled: isDisabled,
-        children: targetWithProps
+        children: target
       }) : /*#__PURE__*/jsxs("button", {
         type: "button",
         title: title,
@@ -31435,85 +31428,29 @@ if (process.env.NODE_ENV === 'production') {
 }
 });
 
+function ModalBody(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/jsx("div", {
+    className: "overflow-y-auto",
+    children: children
+  });
+}
+
 var ModalContext = /*#__PURE__*/createContext({
-  width: 480,
   setIsOpen: function setIsOpen() {
     return false;
   }
 });
 
-var sizeSmallLimit = 420;
-function ModalButtonTab(_ref) {
-  var primaryButtonLabel = _ref.primaryButtonLabel,
-    secondaryButtonLabel = _ref.secondaryButtonLabel,
-    onClickPrimaryButton = _ref.onClickPrimaryButton,
-    onClickSecondaryButton = _ref.onClickSecondaryButton,
-    isDanger = _ref.isDanger,
-    isNoBorder = _ref.isNoBorder,
-    isWithCheckbox = _ref.isWithCheckbox,
-    checkboxLabel = _ref.checkboxLabel,
-    isChecked = _ref.isChecked,
-    onChange = _ref.onChange,
-    subButtonLabel = _ref.subButtonLabel,
-    onClickSubButton = _ref.onClickSubButton;
-  var _useContext = useContext(ModalContext),
-    width = _useContext.width,
-    setIsOpen = _useContext.setIsOpen;
-  var handleClickPrimaryButton = useCallback(function () {
-    onClickPrimaryButton();
-    setIsOpen(false);
-  }, [onClickPrimaryButton, setIsOpen]);
-  var handleClickSecondaryButton = useCallback(function () {
-    onClickSecondaryButton();
-    setIsOpen(false);
-  }, [onClickSecondaryButton, setIsOpen]);
-  var handleClickSubButton = useCallback(function () {
-    onClickSubButton == null || onClickSubButton();
-  }, [onClickSubButton]);
+function ModalFooter(_ref) {
+  var children = _ref.children,
+    isNoBorder = _ref.isNoBorder;
   var wrapperClasses = clsx$1('flex', 'shrink-0', 'items-center', 'w-full', 'rounded-b-lg', 'py-4', 'px-6', {
-    'justify-between': isWithCheckbox || subButtonLabel && sizeSmallLimit <= width,
-    'justify-end': !isWithCheckbox || !subButtonLabel,
-    'justify-center': subButtonLabel && width < sizeSmallLimit,
-    'border-t-[1px] border-border-uiBorder01': !isNoBorder,
-    'gap-y-4': width < sizeSmallLimit,
-    'flex-wrap': width < sizeSmallLimit && isWithCheckbox,
-    'flex-wrap-reverse': width < sizeSmallLimit && subButtonLabel
-  });
-  var buttonContainerClasses = clsx$1('flex', 'items-center', {
-    'w-full justify-center': width < sizeSmallLimit,
-    'gap-x-2': width < sizeSmallLimit,
-    'gap-x-4': sizeSmallLimit <= width
+    'border-t-[1px] border-border-uiBorder01': !isNoBorder
   });
-  return /*#__PURE__*/jsxs("div", {
+  return /*#__PURE__*/jsx("div", {
     className: wrapperClasses,
-    children: [isWithCheckbox ? /*#__PURE__*/jsx("div", {
-      children: /*#__PURE__*/jsx(Checkbox, {
-        id: "modal-checkbox",
-        label: checkboxLabel,
-        isChecked: isChecked,
-        onChange: onChange
-      })
-    }) : subButtonLabel && onClickSubButton ? /*#__PURE__*/jsx(Button, {
-      variant: "text",
-      size: "large",
-      onClick: handleClickSubButton,
-      children: subButtonLabel
-    }, "0") : null, /*#__PURE__*/jsxs("div", {
-      className: buttonContainerClasses,
-      children: [/*#__PURE__*/jsx(Button, {
-        variant: "outline",
-        size: "large",
-        width: width < sizeSmallLimit ? 132 : 'auto',
-        onClick: handleClickSecondaryButton,
-        children: secondaryButtonLabel
-      }, "1"), /*#__PURE__*/jsx(Button, {
-        variant: isDanger ? 'fillDanger' : 'fill',
-        size: "large",
-        width: width < sizeSmallLimit ? 132 : 'auto',
-        onClick: handleClickPrimaryButton,
-        children: primaryButtonLabel
-      }, "2")]
-    })]
+    children: children
   });
 }
 
@@ -31530,7 +31467,9 @@ function ModalHeader(_ref) {
   });
   return /*#__PURE__*/jsxs("div", {
     className: headerClasses,
-    children: [children, !isNoCloseButton && /*#__PURE__*/jsx(IconButton, {
+    children: [/*#__PURE__*/jsx("div", {
+      children: children
+    }), !isNoCloseButton && /*#__PURE__*/jsx(IconButton, {
       icon: "close",
       size: "small",
       variant: "text",
@@ -31541,52 +31480,8 @@ function ModalHeader(_ref) {
   });
 }
 
-var TabItem = function TabItem(props) {
-  var _clsx;
-  var classes = clsx('relative', 'flex', 'z-0', 'py-2', 'leading-[24px]', 'before:h-px', 'before:absolute', 'before:left-0', 'before:right-0', 'before:bottom-0', 'hover:text-text-text01', 'disabled:text-disabled-disabled01', 'disabled:pointer-events-none', (_clsx = {}, _clsx["" + typography.label.label2regular] = !props.isSelected, _clsx['text-interactive-interactive02 hover:before:bg-border-uiBorder02Dark'] = !props.isSelected, _clsx["" + typography.label.label2bold] = props.isSelected, _clsx['before:bg-interactive-interactive01 hover:before:bg-interactive-interactive01 pointer-events-none'] = props.isSelected, _clsx));
-  return /*#__PURE__*/jsx("button", {
-    type: "button",
-    role: "tab",
-    "aria-selected": props.isSelected,
-    className: classes,
-    disabled: props.isDisabled,
-    onClick: function onClick() {
-      return props.onClick(props.id);
-    },
-    children: props.children
-  });
-};
-
-function Tab(_ref) {
-  var children = _ref.children;
-  var classes = clsx('flex', 'px-6', 'gap-4', 'relative', 'before:bg-border-uiBorder01', 'before:h-px', 'before:bottom-0', 'before:left-0', 'before:right-0', 'before:absolute', {});
-  return /*#__PURE__*/jsx("div", {
-    role: "tablist",
-    className: classes,
-    children: children
-  });
-}
-Tab.Item = TabItem;
-
-function ModalTab(_ref) {
-  var tabItems = _ref.tabItems,
-    selectedTab = _ref.selectedTab,
-    setSelectedTab = _ref.setSelectedTab;
-  return /*#__PURE__*/jsx("div", {
-    className: "mt-2 w-full",
-    children: /*#__PURE__*/jsx(Tab, {
-      children: tabItems.map(function (item) {
-        return /*#__PURE__*/jsx(TabItem, {
-          id: item.id,
-          isSelected: selectedTab === item.id,
-          onClick: setSelectedTab,
-          children: item.label
-        }, item.id);
-      })
-    })
-  });
-}
-
+var LIMIT_WIDTH = 320;
+var LIMIT_HEIGHT = 184;
 function Modal(_ref) {
   var children = _ref.children,
     _ref$width = _ref.width,
@@ -31594,37 +31489,29 @@ function Modal(_ref) {
     height = _ref.height,
     isOpen = _ref.isOpen,
     setIsOpen = _ref.setIsOpen,
-    portalTargetRef = _ref.portalTargetRef,
-    headerElement = _ref.headerElement,
-    tabElement = _ref.tabElement,
-    buttonTabElement = _ref.buttonTabElement;
-  var wrapperClasses = 'flex items-center justify-center z-overlay bg-background-backgroundOverlayBlack fixed left-0 top-0 h-full w-full';
-  var modalBaseClasses = 'flex shrink-0 flex-col bg-background-uiBackground01 rounded-lg shadow-modalShadow';
-  var contentClasses = 'flex items-center justify-center overflow-y-auto';
+    portalTargetRef = _ref.portalTargetRef;
+  var renderWidth = typeof width === 'number' ? Math.max(width, LIMIT_WIDTH) : width;
+  var renderHeight = typeof height === 'number' ? Math.max(height, LIMIT_HEIGHT) : height;
   return /*#__PURE__*/reactDom.createPortal(isOpen && /*#__PURE__*/jsx(ModalContext.Provider, {
     value: {
-      width: width,
       setIsOpen: setIsOpen
     },
     children: /*#__PURE__*/jsx("div", {
-      className: wrapperClasses,
-      children: /*#__PURE__*/jsxs("div", {
-        className: modalBaseClasses,
+      className: "fixed left-0 top-0 z-overlay flex h-full w-full items-center justify-center bg-background-backgroundOverlayBlack",
+      children: /*#__PURE__*/jsx("div", {
+        className: "flex shrink-0 flex-col rounded-lg bg-background-uiBackground01 shadow-modalShadow",
         style: {
-          width: width,
-          height: height
+          width: renderWidth,
+          height: renderHeight
         },
-        children: [headerElement, tabElement, /*#__PURE__*/jsx("div", {
-          className: contentClasses,
-          children: children
-        }), buttonTabElement]
+        children: children
       })
     })
   }), !portalTargetRef || (portalTargetRef == null ? void 0 : portalTargetRef.current) === null ? document.body : portalTargetRef.current);
 }
+Modal.Body = ModalBody;
 Modal.Header = ModalHeader;
-Modal.Tab = ModalTab;
-Modal.ButtonTab = ModalButtonTab;
+Modal.Footer = ModalFooter;
 
 var _excluded$1 = ["state", "size"];
 function NotificationInline(_ref) {
@@ -31680,132 +31567,6 @@ function NotificationInline(_ref) {
   });
 }
 
-function Radio(_ref) {
-  var name = _ref.name,
-    value = _ref.value,
-    id = _ref.id,
-    label = _ref.label,
-    _ref$isChecked = _ref.isChecked,
-    isChecked = _ref$isChecked === void 0 ? false : _ref$isChecked,
-    _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
-    onChange = _ref.onChange;
-  var _useState = useState(false),
-    isMouseOver = _useState[0],
-    setIsMouseOver = _useState[1];
-  var handleMouseOverInput = useCallback(function () {
-    setIsMouseOver(true);
-  }, []);
-  var handleMouseOutInput = useCallback(function () {
-    setIsMouseOver(false);
-  }, []);
-  var handleChange = useCallback(function (e) {
-    return !isDisabled && (onChange == null ? void 0 : onChange(e));
-  }, [isDisabled, onChange]);
-  var inputClasses = clsx$1('absolute', 'z-[1]', 'opacity-0', 'peer', 'h-6', 'w-6', {
-    'cursor-not-allowed': isDisabled,
-    'cursor-pointer': !isDisabled
-  });
-  var boxClasses = clsx$1('inline-flex', 'items-center', 'justify-center', 'h-5', 'w-5', 'bg-white', 'border', 'border-solid', 'rounded-full', focusVisible.normalPeer, {
-    'border-disabled-disabled01 hover:border-disabled-disabled01': isDisabled && !isMouseOver,
-    'border-hover-hoverUiBorder': !isDisabled && isMouseOver,
-    'border-border-uiBorder03': !isDisabled,
-    'cursor-not-allowed': isDisabled,
-    'cursor-pointer': !isDisabled
-  });
-  var afterClasses = clsx$1('h-3', 'w-3', 'absolute', 'top-0', 'right-0', 'bottom-0', 'left-0', 'block', 'm-auto', 'rounded-full', {
-    'bg-disabled-disabled01': isDisabled && isChecked,
-    'bg-active-activeSelectedUi': !isDisabled && isChecked,
-    'scale-0': !isChecked,
-    'scale-100': isChecked
-  });
-  var hoverIndicatorClasses = clsx$1('w-3', 'h-3', 'inline-block', 'rounded-full', !isDisabled && !isChecked && isMouseOver && 'bg-hover-hoverUi');
-  var labelClasses = clsx$1('flex-[1_0_0]', 'ml-2', typography.label.label2regular, 'break-all', 'select-none', {
-    'pointer-events-none cursor-not-allowed text-disabled-disabled01': isDisabled,
-    'cursor-pointer text-text-text01': !isDisabled
-  });
-  return /*#__PURE__*/jsxs("div", {
-    className: "flex items-center",
-    children: [/*#__PURE__*/jsxs("div", {
-      className: "flex h-6 w-6 items-center justify-center",
-      children: [/*#__PURE__*/jsx("input", {
-        type: "checkbox",
-        value: value,
-        name: name,
-        id: id,
-        checked: isChecked,
-        disabled: isDisabled,
-        onChange: handleChange,
-        onMouseOver: handleMouseOverInput,
-        onMouseLeave: handleMouseOutInput,
-        className: inputClasses
-      }), /*#__PURE__*/jsx("div", {
-        className: boxClasses,
-        children: /*#__PURE__*/jsxs("div", {
-          className: "relative flex h-5 w-5 flex-[0_0_auto] items-center justify-center",
-          children: [/*#__PURE__*/jsx("span", {
-            className: afterClasses
-          }), /*#__PURE__*/jsx("span", {
-            className: hoverIndicatorClasses
-          })]
-        })
-      })]
-    }), /*#__PURE__*/jsx("label", {
-      htmlFor: id,
-      className: labelClasses,
-      children: label
-    })]
-  });
-}
-
-var _excluded = ["width", "size"];
-var Search = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _clsx;
-  var _ref$width = _ref.width,
-    width = _ref$width === void 0 ? '100%' : _ref$width,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'medium' : _ref$size,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var classes = clsx('flex', 'items-center', 'rounded-full', 'border', 'border-border-uiBorder02', 'focus-within:border-active-activeInput', {
-    'h-8 px-3': size === 'medium'
-  }, {
-    'h-10 px-4': size === 'large'
-  });
-  var inputClasses = clsx('ml-2.5', 'mr-2.5', 'h-full', 'flex-1', 'outline-0', 'text-text-text01', 'placeholder:text-text-textPlaceholder', (_clsx = {}, _clsx["" + typography.label.label2regular] = size === 'medium', _clsx["" + typography.label.label1regular] = size === 'large', _clsx));
-  return /*#__PURE__*/jsx("div", {
-    className: "relative",
-    ref: ref,
-    children: /*#__PURE__*/jsx("form", {
-      onSubmit: props.onSubmit,
-      children: /*#__PURE__*/jsxs("div", {
-        className: classes,
-        style: {
-          width: width
-        },
-        children: [/*#__PURE__*/jsx(Icon, {
-          name: "search",
-          color: "icon01",
-          size: "medium"
-        }), /*#__PURE__*/jsx("input", {
-          type: "text",
-          size: 1,
-          value: props.value,
-          className: inputClasses,
-          placeholder: props.placeholder,
-          onChange: props.onChange
-        }), props.onClickClearButton && props.value && props.value.length !== 0 && /*#__PURE__*/jsx(IconButton, {
-          variant: "text",
-          icon: "close",
-          size: size === 'medium' ? 'small' : 'medium',
-          isNoPadding: true,
-          onClick: props.onClickClearButton
-        })]
-      })
-    })
-  });
-});
-Search.displayName = 'Search';
-
 var SelectContext = /*#__PURE__*/createContext({
   size: 'medium',
   setIsOptionListOpen: function setIsOptionListOpen() {
@@ -31984,6 +31745,200 @@ function Select(_ref) {
 }
 Select.Option = SelectItem$1;
 
+function PaginationSelect(_ref) {
+  var totalSize = _ref.totalSize,
+    currentPage = _ref.currentPage,
+    sizePerPage = _ref.sizePerPage,
+    _ref$countLabel = _ref.countLabel,
+    countLabel = _ref$countLabel === void 0 ? '件' : _ref$countLabel,
+    _ref$pageLabel = _ref.pageLabel,
+    pageLabel = _ref$pageLabel === void 0 ? 'ページ' : _ref$pageLabel,
+    _ref$optionListMaxHei = _ref.optionListMaxHeight,
+    optionListMaxHeight = _ref$optionListMaxHei === void 0 ? 190 : _ref$optionListMaxHei,
+    onClickPrevButton = _ref.onClickPrevButton,
+    onClickNextButton = _ref.onClickNextButton,
+    _onChange = _ref.onChange;
+  var pageMax = Math.ceil(totalSize / sizePerPage);
+  var optionsList = [].concat(Array(pageMax)).map(function (_, index) {
+    var value = (index + 1).toString();
+    return {
+      id: value,
+      value: value,
+      label: value
+    };
+  });
+  return /*#__PURE__*/jsxs("nav", {
+    "aria-label": "pagination",
+    className: "flex items-center gap-x-1",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex items-center gap-x-2",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: clsx$1('text-text-text01', typography.label.label2regular),
+        children: [(currentPage - 1) * sizePerPage + 1, " -", ' ', currentPage * sizePerPage > totalSize ? totalSize : currentPage * sizePerPage, countLabel]
+      }), /*#__PURE__*/jsx(Select, {
+        size: "medium",
+        variant: "outline",
+        selectedOption: optionsList.find(function (option) {
+          return option.value === currentPage.toString();
+        }),
+        optionListMaxHeight: optionListMaxHeight,
+        onChange: function onChange(option) {
+          return option && _onChange(Number(option.value));
+        },
+        children: optionsList && optionsList.map(function (option) {
+          return /*#__PURE__*/jsx(Select.Option, {
+            option: option
+          }, option.id);
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: clsx$1('text-text-text03', typography.label.label2regular),
+        children: ["/ ", pageMax, pageLabel]
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex items-center",
+      children: [/*#__PURE__*/jsx(IconButton, {
+        variant: "text",
+        icon: "angle-left",
+        size: "small",
+        isDisabled: currentPage === 1,
+        onClick: onClickPrevButton
+      }), /*#__PURE__*/jsx(IconButton, {
+        variant: "text",
+        icon: "angle-right",
+        size: "small",
+        isDisabled: currentPage === pageMax,
+        onClick: onClickNextButton
+      })]
+    })]
+  });
+}
+
+function Radio(_ref) {
+  var name = _ref.name,
+    value = _ref.value,
+    id = _ref.id,
+    label = _ref.label,
+    _ref$isChecked = _ref.isChecked,
+    isChecked = _ref$isChecked === void 0 ? false : _ref$isChecked,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    onChange = _ref.onChange;
+  var _useState = useState(false),
+    isMouseOver = _useState[0],
+    setIsMouseOver = _useState[1];
+  var handleMouseOverInput = useCallback(function () {
+    setIsMouseOver(true);
+  }, []);
+  var handleMouseOutInput = useCallback(function () {
+    setIsMouseOver(false);
+  }, []);
+  var handleChange = useCallback(function (e) {
+    return !isDisabled && (onChange == null ? void 0 : onChange(e));
+  }, [isDisabled, onChange]);
+  var inputClasses = clsx$1('absolute', 'z-[1]', 'opacity-0', 'peer', 'h-6', 'w-6', {
+    'cursor-not-allowed': isDisabled,
+    'cursor-pointer': !isDisabled
+  });
+  var boxClasses = clsx$1('inline-flex', 'items-center', 'justify-center', 'h-5', 'w-5', 'bg-white', 'border', 'border-solid', 'rounded-full', focusVisible.normalPeer, {
+    'border-disabled-disabled01 hover:border-disabled-disabled01': isDisabled && !isMouseOver,
+    'border-hover-hoverUiBorder': !isDisabled && isMouseOver,
+    'border-border-uiBorder03': !isDisabled,
+    'cursor-not-allowed': isDisabled,
+    'cursor-pointer': !isDisabled
+  });
+  var afterClasses = clsx$1('h-3', 'w-3', 'absolute', 'top-0', 'right-0', 'bottom-0', 'left-0', 'block', 'm-auto', 'rounded-full', {
+    'bg-disabled-disabled01': isDisabled && isChecked,
+    'bg-active-activeSelectedUi': !isDisabled && isChecked,
+    'scale-0': !isChecked,
+    'scale-100': isChecked
+  });
+  var hoverIndicatorClasses = clsx$1('w-3', 'h-3', 'inline-block', 'rounded-full', !isDisabled && !isChecked && isMouseOver && 'bg-hover-hoverUi');
+  var labelClasses = clsx$1('flex-[1_0_0]', 'ml-2', typography.label.label2regular, 'break-all', 'select-none', {
+    'pointer-events-none cursor-not-allowed text-disabled-disabled01': isDisabled,
+    'cursor-pointer text-text-text01': !isDisabled
+  });
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex items-center",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex h-6 w-6 items-center justify-center",
+      children: [/*#__PURE__*/jsx("input", {
+        type: "checkbox",
+        value: value,
+        name: name,
+        id: id,
+        checked: isChecked,
+        disabled: isDisabled,
+        onChange: handleChange,
+        onMouseOver: handleMouseOverInput,
+        onMouseLeave: handleMouseOutInput,
+        className: inputClasses
+      }), /*#__PURE__*/jsx("div", {
+        className: boxClasses,
+        children: /*#__PURE__*/jsxs("div", {
+          className: "relative flex h-5 w-5 flex-[0_0_auto] items-center justify-center",
+          children: [/*#__PURE__*/jsx("span", {
+            className: afterClasses
+          }), /*#__PURE__*/jsx("span", {
+            className: hoverIndicatorClasses
+          })]
+        })
+      })]
+    }), /*#__PURE__*/jsx("label", {
+      htmlFor: id,
+      className: labelClasses,
+      children: label
+    })]
+  });
+}
+
+var _excluded = ["width", "size"];
+var Search = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _clsx;
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '100%' : _ref$width,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var classes = clsx('flex', 'items-center', 'rounded-full', 'border', 'border-border-uiBorder02', 'focus-within:border-active-activeInput', {
+    'h-8 px-3': size === 'medium'
+  }, {
+    'h-10 px-4': size === 'large'
+  });
+  var inputClasses = clsx('ml-2.5', 'mr-2.5', 'h-full', 'flex-1', 'outline-0', 'text-text-text01', 'placeholder:text-text-textPlaceholder', (_clsx = {}, _clsx["" + typography.label.label2regular] = size === 'medium', _clsx["" + typography.label.label1regular] = size === 'large', _clsx));
+  return /*#__PURE__*/jsx("div", {
+    className: "relative",
+    ref: ref,
+    children: /*#__PURE__*/jsx("form", {
+      onSubmit: props.onSubmit,
+      children: /*#__PURE__*/jsxs("div", {
+        className: classes,
+        style: {
+          width: width
+        },
+        children: [/*#__PURE__*/jsx(Icon, {
+          name: "search",
+          color: "icon01",
+          size: "medium"
+        }), /*#__PURE__*/jsx("input", {
+          type: "text",
+          size: 1,
+          value: props.value,
+          className: inputClasses,
+          placeholder: props.placeholder,
+          onChange: props.onChange
+        }), props.onClickClearButton && props.value && props.value.length !== 0 && /*#__PURE__*/jsx(IconButton, {
+          variant: "text",
+          icon: "close",
+          size: size === 'medium' ? 'small' : 'medium',
+          isNoPadding: true,
+          onClick: props.onClickClearButton
+        })]
+      })
+    })
+  });
+});
+Search.displayName = 'Search';
+
 function SelectItem(_ref) {
   var children = _ref.children,
     isSortKey = _ref.isSortKey,
@@ -32123,6 +32078,33 @@ function SelectSort(_ref) {
   });
 }
 
+var TabItem = function TabItem(props) {
+  var _clsx;
+  var classes = clsx('relative', 'flex', 'z-0', 'py-2', 'leading-[24px]', 'before:h-px', 'before:absolute', 'before:left-0', 'before:right-0', 'before:bottom-0', 'hover:text-text-text01', 'disabled:text-disabled-disabled01', 'disabled:pointer-events-none', (_clsx = {}, _clsx["" + typography.label.label2regular] = !props.isSelected, _clsx['text-interactive-interactive02 hover:before:bg-border-uiBorder02Dark'] = !props.isSelected, _clsx["" + typography.label.label2bold] = props.isSelected, _clsx['before:bg-interactive-interactive01 hover:before:bg-interactive-interactive01 pointer-events-none'] = props.isSelected, _clsx));
+  return /*#__PURE__*/jsx("button", {
+    type: "button",
+    role: "tab",
+    "aria-selected": props.isSelected,
+    className: classes,
+    disabled: props.isDisabled,
+    onClick: function onClick() {
+      return props.onClick(props.id);
+    },
+    children: props.children
+  });
+};
+
+function Tab(_ref) {
+  var children = _ref.children;
+  var classes = clsx('flex', 'px-6', 'gap-4', 'relative', 'before:bg-border-uiBorder01', 'before:h-px', 'before:bottom-0', 'before:left-0', 'before:right-0', 'before:absolute', {});
+  return /*#__PURE__*/jsx("div", {
+    role: "tablist",
+    className: classes,
+    children: children
+  });
+}
+Tab.Item = TabItem;
+
 function TableCell(_ref) {
   var children = _ref.children,
     className = _ref.className;
@@ -32488,5 +32470,5 @@ function Tooltip(_ref) {
   });
 }
 
-export { Avatar, Breadcrumb, Button, Checkbox, Dropdown, EvaluationStar, Heading, Icon, IconButton, Loading, Modal, NotificationInline, Radio, Search, Select, SelectSort, Tab, TabItem, Table, TableCell, TableRow, Tag, Toast, ToastProvider, Toggle, Tooltip, useToast };
+export { Avatar, Breadcrumb, Button, Checkbox, Dropdown, EvaluationStar, Heading, Icon, IconButton, Loading, Modal, NotificationInline, PaginationSelect, Radio, Search, Select, SelectSort, Tab, TabItem, Table, TableCell, TableRow, Tag, Toast, ToastProvider, Toggle, Tooltip, useToast };
 //# sourceMappingURL=index.esm.js.map