@pisell/materials 1.0.48 → 1.0.49

package/lib/components/calendar/index.js

@@ -0,0 +1,32 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/calendar/index.tsx
+var calendar_exports = {};
+__export(calendar_exports, {
+  default: () => calendar_default
+});
+module.exports = __toCommonJS(calendar_exports);
+var import_antd = require("antd");
+var import_hoc = require("../../utils/hoc");
+var Calendar = (0, import_hoc.withMomentProps)(import_antd.Calendar, [
+  "defaultValue",
+  "validRange",
+  "value.defaultValue"
+]);
+var calendar_default = Calendar;

package/lib/components/cascader/index.d.ts

@@ -0,0 +1,2 @@
+declare const Cascader: any;
+export default Cascader;

package/lib/components/cascader/index.js

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/cascader/index.tsx
+var cascader_exports = {};
+__export(cascader_exports, {
+  default: () => cascader_default
+});
+module.exports = __toCommonJS(cascader_exports);
+var import_antd = require("antd");
+var import_hoc = require("../../utils/hoc");
+var Cascader = (0, import_hoc.withWrap)(import_antd.Cascader);
+var cascader_default = Cascader;

package/lib/components/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<import("antd").CheckboxProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<any>>;
+export default Checkbox;

package/lib/components/checkbox/index.js

@@ -0,0 +1,29 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/checkbox/index.tsx
+var checkbox_exports = {};
+__export(checkbox_exports, {
+  default: () => checkbox_default
+});
+module.exports = __toCommonJS(checkbox_exports);
+var import_antd = require("antd");
+var import_hoc = require("../../utils/hoc");
+var Checkbox = (0, import_hoc.withWrap)(import_antd.Checkbox);
+Checkbox.Group = import_antd.Checkbox.Group;
+var checkbox_default = Checkbox;

package/lib/components/config-provider/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ConfigProviderProps as OriginalConfigProviderProps } from "antd/es/config-provider";
+import "dayjs/locale/zh-cn";
+export interface ConfigProviderProps extends OriginalConfigProviderProps {
+    [key: string]: any;
+}
+declare const ConfigProvider: (props: ConfigProviderProps) => JSX.Element;
+export default ConfigProvider;

package/lib/components/config-provider/index.js

@@ -0,0 +1,54 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/config-provider/index.tsx
+var config_provider_exports = {};
+__export(config_provider_exports, {
+  default: () => config_provider_default
+});
+module.exports = __toCommonJS(config_provider_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_dayjs = __toESM(require("dayjs"));
+var import_zh_cn = require("dayjs/locale/zh-cn");
+var import_zh_CN = __toESM(require("antd/locale/zh_CN"));
+var ConfigProvider = (props) => {
+  const { locale, ...rest } = props;
+  let localeData = locale;
+  if (typeof locale === "string") {
+    if (locale.toLowerCase() === "zh-cn") {
+      import_dayjs.default.locale("zh-cn");
+      localeData = import_zh_CN.default;
+    } else if (locale.toLowerCase() === "en-us") {
+      import_dayjs.default.locale("en");
+      localeData = void 0;
+    }
+  }
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.ConfigProvider, { locale: localeData, ...rest });
+};
+var config_provider_default = ConfigProvider;

package/lib/components/date-picker/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const DatePicker: (props: any) => JSX.Element;
+export default DatePicker;

package/lib/components/date-picker/index.js

@@ -0,0 +1,50 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/date-picker/index.tsx
+var date_picker_exports = {};
+__export(date_picker_exports, {
+  default: () => date_picker_default
+});
+module.exports = __toCommonJS(date_picker_exports);
+var import_antd = require("antd");
+var import_hoc = require("../../utils/hoc");
+var import_dayjs = __toESM(require("dayjs"));
+var import_date_picker = require("@pisell/date-picker");
+var import_localeData = __toESM(require("dayjs/plugin/localeData"));
+var import_weekday = __toESM(require("dayjs/plugin/weekday"));
+import_dayjs.default.extend(import_weekday.default);
+import_dayjs.default.extend(import_localeData.default);
+var DatePicker = (0, import_hoc.withMomentProps)(import_antd.DatePicker, [
+  "defaultPickerValue",
+  "defaultValue",
+  "showTime.defaultValue",
+  "value"
+]);
+DatePicker.RangePicker = import_date_picker.RangePicker;
+var date_picker_default = DatePicker;

package/lib/components/div/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface DivProps {
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+}
+declare const Div: (props: DivProps) => JSX.Element;
+export default Div;

package/lib/components/div/index.js

@@ -0,0 +1,40 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/div/index.tsx
+var div_exports = {};
+__export(div_exports, {
+  default: () => div_default
+});
+module.exports = __toCommonJS(div_exports);
+var import_react = __toESM(require("react"));
+var Div = (props) => {
+  const { children, style = {} } = props;
+  return /* @__PURE__ */ import_react.default.createElement("div", { style }, children);
+};
+var div_default = Div;

package/lib/components/drawer/index.d.ts

@@ -0,0 +1,2 @@
+declare const Drawer: any;
+export default Drawer;

package/lib/components/drawer/index.js

@@ -0,0 +1,45 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/drawer/index.tsx
+var drawer_exports = {};
+__export(drawer_exports, {
+  default: () => drawer_default
+});
+module.exports = __toCommonJS(drawer_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var Drawer = (props) => {
+  const innerProps = {};
+  if (props.__designMode === "design") {
+    innerProps.open = true;
+  }
+  console.log(props, "Drawer props", innerProps);
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.Drawer, { ...props, ...innerProps });
+};
+var drawer_default = Drawer;

package/lib/components/dropdown/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (props: any) => JSX.Element;
+export default _default;

package/lib/components/dropdown/index.js

@@ -0,0 +1,45 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/dropdown/index.tsx
+var dropdown_exports = {};
+__export(dropdown_exports, {
+  default: () => dropdown_default
+});
+module.exports = __toCommonJS(dropdown_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_hoc = require("../../utils/hoc");
+var Dropdown = (props) => {
+  const innerProps = {};
+  if (props.__designMode === "design") {
+    innerProps.open = true;
+  }
+  return /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown, { ...props, ...innerProps });
+};
+var dropdown_default = (0, import_hoc.withSingleChild)(Dropdown, ["children", "overlay"]);

package/lib/components/filter/components/Dropdown/index.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import "./index.less";
+export declare type FilterItemProps = {
+    type: "single" | "input" | "datePicker" | "rangePicker";
+    name: string;
+    props: object;
+    label: string;
+    other: Record<string, any>;
+};
+export interface DropdownProps {
+    list: FilterItemProps[];
+    quickFilter: FilterItemProps[];
+    otherFilter: FilterItemProps[];
+}
+declare const Dropdown: React.FC<DropdownProps>;
+export default Dropdown;

package/lib/components/filter/components/Dropdown/index.js

@@ -0,0 +1,123 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/filter/components/Dropdown/index.tsx
+var Dropdown_exports = {};
+__export(Dropdown_exports, {
+  default: () => Dropdown_default
+});
+module.exports = __toCommonJS(Dropdown_exports);
+var import_react = __toESM(require("react"));
+var import_icon = require("@pisell/icon");
+var import_index = require("./index.less");
+var import_FilterItem = __toESM(require("../FilterItem"));
+var import_antd = require("antd");
+var import_MultipleContainersSortList = __toESM(require("../../../MultipleContainersSortList"));
+var titleMap = {
+  quickFilter: "Quick Filter",
+  otherFilter: "Filter"
+};
+var tooltipMap = {
+  quickFilter: "Enable quick filtering directly on the page for convenient filtering operations, with a maximum of three filters allowed.\n",
+  otherFilter: "Select filter criteria in the list to perform filtering operations and display corresponding results."
+};
+var DragItem = import_react.default.forwardRef((props, ref) => {
+  const { attributes, listeners, setActivatorNodeRef, style } = props;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref,
+      ...attributes,
+      style,
+      className: "filter-dropdown-drag-item"
+    },
+    /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+      import_icon.DotsSix,
+      {
+        ref: setActivatorNodeRef,
+        ...listeners,
+        className: "dots-six-icon"
+      }
+    )),
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "filter-dropdown-drag-item-right" }, props.children)
+  );
+});
+var Dropdown = (props) => {
+  const { quickFilter, otherFilter } = props;
+  const list = (0, import_react.useMemo)(() => {
+    return {
+      quickFilter: quickFilter || [],
+      otherFilter: otherFilter || []
+    };
+  }, [quickFilter, otherFilter]);
+  const handleSortChange = (list2) => {
+  };
+  const renderContainer = (0, import_react.useCallback)(({ children, ref, id }) => {
+    return /* @__PURE__ */ import_react.default.createElement("div", { className: "filter-dropdown-container-wrap" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "filter-dropdown-container-title-wrap" }, /* @__PURE__ */ import_react.default.createElement("span", { className: "filter-dropdown-container-title" }, titleMap[id]), /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: tooltipMap[id] }, /* @__PURE__ */ import_react.default.createElement(import_icon.HelpCircle, { className: "filter-dropdown-container-icon-help" }))), /* @__PURE__ */ import_react.default.createElement("div", { ref, className: "filter-dropdown-container-filter-wrap" }, children));
+  }, []);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: "filter-dropdown-wrap" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "filter-dropdown-wrap-content" }, /* @__PURE__ */ import_react.default.createElement(
+    import_MultipleContainersSortList.default,
+    {
+      list,
+      rowKey: "name",
+      renderContainer,
+      onChange: handleSortChange
+    },
+    ({
+      item,
+      index,
+      style,
+      props: props2,
+      attributes,
+      setActivatorNodeRef,
+      listeners
+    }) => {
+      return /* @__PURE__ */ import_react.default.createElement(
+        DragItem,
+        {
+          ...props2,
+          index,
+          attributes,
+          setActivatorNodeRef,
+          listeners,
+          style
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_FilterItem.default,
+          {
+            name: item.name,
+            label: item.label,
+            type: item.type,
+            other: item.other
+          }
+        )
+      );
+    }
+  )));
+};
+var Dropdown_default = Dropdown;

package/lib/components/filter/components/Dropdown/index.less

@@ -0,0 +1,76 @@
+.filter-dropdown-wrap {
+  width: 400px;
+  max-width: calc(100vw - 24px);
+  min-width: 250px;
+  padding: 4px;
+  max-height: 400px;
+  display: flex;
+  flex-direction: column;
+  .filter-dropdown-wrap-content {
+    flex: 1;
+    overflow: auto;
+  }
+  .filter-dropdown-wrap-footer {
+
+  }
+  .filter-dropdown-drag-item {
+    display: flex;
+    padding: 8px 12px 12px;
+    align-items: center;
+    border-radius: 8px;
+    background: var(--gray-50, #F9FAFB);
+    margin-bottom: 12px;
+    .dots-six-icon {
+      font-size: 24px;
+      color: #98A2B3;
+      cursor: pointer;
+    }
+    .pisell-lowcode-form-item {
+      margin-bottom: 0;
+    }
+    .filter-dropdown-drag-item-right {
+      margin-left: 16px;
+      flex: 1;
+      .filter-dropdown-drag-item-title {
+        color: var(--text-text-2, #777);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 20px;
+      }
+    }
+  }
+}
+.filter-dropdown-container-wrap {
+  border-bottom: 1px solid var(--surface-surface-4, #e2e2e2);
+  min-height: 70px;
+  margin-bottom: 20px;
+  &:last-child {
+    border: none;
+  }
+  .filter-dropdown-container-title-wrap {
+    color: var(--text-text-3, #919191);
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 22px;
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    .filter-dropdown-container-title {
+      margin-right: 6px;
+      color: var(--gray-900, #101828);
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 600;
+      line-height: 24px;
+    }
+    .filter-dropdown-container-icon-help {
+      font-size: 20px;
+      color: var(--gray-400,#98A2B3)
+    }
+  }
+  .filter-dropdown-container-filter-wrap {
+    min-height: 80px;
+  }
+}

package/lib/components/filter/components/FilterButton/index.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { DropdownProps } from "../Dropdown";
+export declare type FilterListProps = {
+    list: DropdownProps["list"];
+    quickFilter: DropdownProps["quickFilter"];
+    otherFilter: DropdownProps["otherFilter"];
+};
+declare const Filter: React.FC<FilterListProps>;
+export default Filter;

package/lib/components/filter/components/FilterButton/index.js

@@ -0,0 +1,65 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/filter/components/FilterButton/index.tsx
+var FilterButton_exports = {};
+__export(FilterButton_exports, {
+  default: () => FilterButton_default
+});
+module.exports = __toCommonJS(FilterButton_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_Dropdown = __toESM(require("../Dropdown"));
+var import_icon = require("@pisell/icon");
+var Filter = ({
+  list = [],
+  quickFilter,
+  otherFilter
+}) => {
+  const ref = (0, import_react.useRef)(null);
+  const content = (0, import_react.useMemo)(() => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_Dropdown.default,
+      {
+        list,
+        quickFilter,
+        otherFilter
+      }
+    );
+  }, [list, quickFilter, otherFilter]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref }, /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Popover,
+    {
+      content,
+      arrow: false,
+      getPopupContainer: () => ref.current
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_icon.FilterLines, null) }, "Filter")
+  ));
+};
+var FilterButton_default = Filter;