@soul-refiner/design-system 2.5.0-alpha.4 → 2.5.0-alpha.6

package/dist/components/input/checkbox/checkbox.js

@@ -1,5 +1,12 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),styles=require("../../../common/styles.js"),checkmark=require("../../../icons/basic/checkmark.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Checkbox=({disabled:e,selected:r,sx:t,...o})=>React__default.default.createElement(Box,{$align:"center",$disabled:!!e,$display:"flex",$justify:"center",$selected:r,$sx:t,...o},r&&React__default.default.createElement(checkmark.Checkmark,{color:"white"})),Box=styled.styled.div`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { Styles } from '../../../common/styles';
+import { Checkmark } from '../../../icons/basic/checkmark';
+export const Checkbox = ({ disabled, selected, sx, ...rest }) => {
+    return (React.createElement(Box, { "$align": "center", "$disabled": !!disabled, "$display": "flex", "$justify": "center", "$selected": selected, "$sx": sx, ...rest }, selected && React.createElement(Checkmark, { color: "white" })));
+};
+const Box = styled.div `
   display: flex;
   width: 20px;
   height: 20px;
@@ -7,8 +14,10 @@
   cursor: pointer;
   box-sizing: border-box;
 
-  ${({$selected:e})=>e?`background-color: var(--color-primary-blue-2);
-    border: 1px solid var(--color-primary-blue-2);`:"border: 1px solid var(--color-grey-8);"}
-  ${styles.Styles.flex}
-  ${({$sx:e})=>e||""}
-`;exports.Checkbox=Checkbox;
+  ${({ $selected }) => $selected
+    ? `background-color: var(--color-primary-blue-2);
+    border: 1px solid var(--color-primary-blue-2);`
+    : 'border: 1px solid var(--color-grey-8);'}
+  ${Styles.flex}
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;

package/dist/components/input/checkbox/index.js

@@ -0,0 +1 @@
+export { Checkbox } from './checkbox';

package/dist/components/input/date/date.js

@@ -1,9 +1,221 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),date$1=require("../../../common/date.js"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),chevron_left=require("../../../icons/arrow/chevron_left.js"),chevron_right=require("../../../icons/arrow/chevron_right.js"),arrow_right=require("../../../icons/arrow/arrow_right.js"),date=require("../../../utils/date.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const DatePicker=({endDate:e,label:t,onSelect:a,startDate:r})=>{const u=new Date,o=(u.setHours(0),u.setMinutes(0),u.setSeconds(0),u.setMilliseconds(0),new Date(u)),l=(o.setDate(1),o.getMonth()+1),n=o.getFullYear(),s=!e,d=React__default.default.useRef(null),[i,c]=React__default.default.useState(!1),[f,p]=React__default.default.useState(()=>e?.toDateString()??r.toDateString()),[g,x]=React__default.default.useState(()=>r.toDateString()),[b,y]=React__default.default.useState(()=>e?.toDateString()??r.toDateString()),[h,m]=React__default.default.useState(!0);React__default.default.useEffect(()=>{x(r.toDateString())},[r]),React__default.default.useEffect(()=>{y((e??new Date)?.toDateString())},[e]),React__default.default.useEffect(()=>{var e;!s&&new Date(g).getTime()>new Date(b).getTime()&&(e=g,x(b),y(e))},[b,g]);const _=({type:e,value:t})=>{("start"===e?x:y)(t.toDateString())},v=e=>{s||m(e=>!e);var e=e.target,t=h?"start":"end",a=e.getAttribute("data-day"),r=e.getAttribute("data-month"),e=e.getAttribute("data-year");_({type:t,value:new Date(r+`-${a}-`+e)})};var D=date.buildCalendar(new Date(f).getMonth()+1,new Date(f).getFullYear());const w=new Date(g).getTime(),R=new Date(b).getTime();var k=new Date(f);const S=new Date(k),E=(S.setDate(1),new Date(k));return E.setDate(date.getMonthDays(k.getMonth()+1)),React__default.default.createElement(Wrapper,{onBlurCapture:e=>{d?.current&&!d?.current?.contains(e.relatedTarget)&&c(!1)},ref:d,tabIndex:0},React__default.default.createElement(Trigger,{onClick:()=>c(e=>!e)},t&&React__default.default.createElement(React__default.default.Fragment,null,t," | "),React__default.default.createElement("span",null,r.toLocaleDateString("en-US").replaceAll("/","-")),!!e&&r.toDateString()!==e?.toDateString()&&React__default.default.createElement(arrow_right.ArrowRight,{sx:"padding: 0px 8px; margin-bottom: -2px;"}),r.toDateString()!==e?.toDateString()&&React__default.default.createElement("span",null,e?.toLocaleDateString("en-US").replaceAll("/","-"))),i&&React__default.default.createElement(DateSelector,null,React__default.default.createElement(InnerWrapper,null,!!e&&React__default.default.createElement(Left,null,React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{_({type:"start",value:u}),_({type:"end",value:u}),p(u.toDateString()),m(!0)}},"Today"),React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{var e=new Date(u.getFullYear(),u.getMonth(),u.getDate()-1);_({type:"start",value:e}),_({type:"end",value:e}),p(u.toDateString()),m(!0)}},"Yesterday"),React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{var e=new Date(u.getFullYear(),u.getMonth(),u.getDate()-7);_({type:"start",value:e}),_({type:"end",value:u}),p(u.toDateString()),m(!0)}},"Last 7 days"),React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{var e=new Date(u);e.setMonth(l-2),_({type:"start",value:e}),_({type:"end",value:u}),p(u.toDateString()),m(!0)}},"Last 30 days"),React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{_({type:"start",value:o}),_({type:"end",value:new Date(o.getFullYear(),o.getMonth(),date.getMonthDays())}),p(u.toDateString()),m(!0)}},"This month"),React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{var e=new Date(o);e.setMonth(l-2),_({type:"start",value:e}),_({type:"end",value:new Date(e.getFullYear(),e.getMonth(),date.getMonthDays(e.getMonth()+1))}),p(e.toDateString()),m(!0)}},"Last month"),React__default.default.createElement(button.Button,{size:"small",type:"text",onClick:()=>{var e=new Date(u);e.setFullYear(n-1),_({type:"start",value:e}),_({type:"end",value:u}),p(u.toDateString()),m(!0)}},"Last Year")),React__default.default.createElement("div",null,React__default.default.createElement(MonthBar,null,React__default.default.createElement(Arrow,{onClick:()=>{p(e=>{e=new Date(e);return e.setMonth(e.getMonth()-1),e.toDateString()})}},React__default.default.createElement(chevron_left.ChevronLeft,{size:24})),React__default.default.createElement(paragraph.P,null,Object.values(date$1.MONTHS)[Math.max(0,Math.min(new Date(f).getMonth(),11))]+" "+new Date(f).getFullYear()),React__default.default.createElement(Arrow,{onClick:()=>{p(e=>{e=new Date(e);return e.setMonth(e.getMonth()+1),e.toDateString()})}},React__default.default.createElement(chevron_right.ChevronRight,{size:24}))),React__default.default.createElement(WeekdayWrapper,null,Object.values(date$1.WEEKDAYS).map(e=>React__default.default.createElement(paragraph.P,{key:e},e))),React__default.default.createElement(Calendar,null,D.map((e,t)=>React__default.default.createElement(Week,{key:"week-"+t.toString(36)},e.map((e,t)=>{var a=e[1]!==date.zeroPad(new Date(f).getMonth()+1,2),r=new Date(`${e[1]}-${e[2]}-`+e[0]),o=Math.abs(r.getTime()-u.getTime())<.5,l=r.toDateString(),n=l===g,d=!s&&l===b,r=!s&&w<=r.getTime()&&r.getTime()<=R&&!n&&!d,i=S.toDateString()===l,l=E.toDateString()===l;return React__default.default.createElement(Day,{className:((o?"today":"")+(a?" not-current":"")+(n?" start-date":"")+(d?" end-date":"")+(r?" between":"")+(i?" first-of-month":"")+(l?" last-of-month":"")).trim(),"data-day":e[2],"data-month":e[1],"data-year":e[0],key:"day-"+t.toString(36),onClick:v},(""+e[2]).startsWith("0")?(""+e[2])[1]:e[2])})))),React__default.default.createElement(BottomWrapper,null,React__default.default.createElement(button.Button,{onClick:()=>{x(r.toDateString()),y((e??new Date)?.toDateString()),m(!0),c(!1)},size:"small",sx:"width: 80px;",type:"outlined"},"Cancel"),React__default.default.createElement(button.Button,{onClick:()=>{a({type:"start",value:new Date(g)}),s||a({type:"end",value:new Date(b)}),s||m(!0),c(!1)},size:"small",sx:"width: 80px;"},"Apply"))))))},Wrapper=styled.styled.div`
+'use client';
+import React from 'react';
+import { styled } from 'styled-components';
+import { MONTHS } from '../../../common/date';
+import { WEEKDAYS } from '../../../common/date';
+import { Button } from '../../../components/actions/button/button';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { ChevronLeft } from '../../../icons/arrow/chevron_left';
+import { ChevronRight } from '../../../icons/arrow/chevron_right';
+import { ArrowRight } from '../../../icons/arrow/arrow_right';
+import { buildCalendar } from '../../../utils/date';
+import { getMonthDays } from '../../../utils/date';
+import { zeroPad } from '../../../utils/date';
+export const DatePicker = ({ endDate, label, onSelect: parentOnSelect, startDate, }) => {
+    const today = new Date();
+    today.setHours(0);
+    today.setMinutes(0);
+    today.setSeconds(0);
+    today.setMilliseconds(0);
+    const firstOfMonth = new Date(today);
+    firstOfMonth.setDate(1);
+    const thisMonth = firstOfMonth.getMonth() + 1;
+    const thisYear = firstOfMonth.getFullYear();
+    const isSingleDate = !endDate;
+    const pickerRef = React.useRef(null);
+    const [show, setShow] = React.useState(false);
+    const [displayDate, setDisplayDate] = React.useState(() => endDate?.toDateString() ?? startDate.toDateString());
+    const [componentStartDate, setComponentStartDate] = React.useState(() => startDate.toDateString());
+    const [componentEndDate, setComponentEndDate] = React.useState(() => endDate?.toDateString() ?? startDate.toDateString());
+    const [firstClick, setFirstClick] = React.useState(true);
+    React.useEffect(() => {
+        setComponentStartDate(startDate.toDateString());
+    }, [startDate]);
+    React.useEffect(() => {
+        setComponentEndDate((endDate ?? new Date())?.toDateString());
+    }, [endDate]);
+    React.useEffect(() => {
+        if (!isSingleDate &&
+            new Date(componentStartDate).getTime() >
+                new Date(componentEndDate).getTime()) {
+            const tempStart = componentStartDate;
+            setComponentStartDate(componentEndDate);
+            setComponentEndDate(tempStart);
+        }
+    }, [componentEndDate, componentStartDate]);
+    const handleShow = () => setShow((prev) => !prev);
+    const handleBlur = (event) => {
+        if (pickerRef?.current &&
+            !pickerRef?.current?.contains(event.relatedTarget)) {
+            setShow(false);
+        }
+    };
+    const handlePreviousMonth = () => {
+        setDisplayDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() - 1);
+            return newDate.toDateString();
+        });
+    };
+    const handleNextMonth = () => {
+        setDisplayDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() + 1);
+            return newDate.toDateString();
+        });
+    };
+    const handleFirstClick = () => !isSingleDate && setFirstClick((prev) => !prev);
+    const onSelect = ({ type, value, }) => {
+        if (type === 'start') {
+            setComponentStartDate(value.toDateString());
+        }
+        else {
+            setComponentEndDate(value.toDateString());
+        }
+    };
+    const handleClick = (event) => {
+        handleFirstClick();
+        const target = event.target;
+        const type = firstClick ? 'start' : 'end';
+        const day = target.getAttribute('data-day');
+        const month = target.getAttribute('data-month');
+        const year = target.getAttribute('data-year');
+        onSelect({ type, value: new Date(`${month}-${day}-${year}`) });
+    };
+    const handleApply = () => {
+        parentOnSelect({ type: 'start', value: new Date(componentStartDate) });
+        !isSingleDate &&
+            parentOnSelect({ type: 'end', value: new Date(componentEndDate) });
+        !isSingleDate && setFirstClick(true);
+        setShow(false);
+    };
+    const handleCancel = () => {
+        setComponentStartDate(startDate.toDateString());
+        setComponentEndDate((endDate ?? new Date())?.toDateString());
+        setFirstClick(true);
+        setShow(false);
+    };
+    const handleSetToday = () => {
+        onSelect({ type: 'start', value: today });
+        onSelect({ type: 'end', value: today });
+        setDisplayDate(today.toDateString());
+        setFirstClick(true);
+    };
+    const handleSetYesterday = () => {
+        const yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1);
+        onSelect({ type: 'start', value: yesterday });
+        onSelect({ type: 'end', value: yesterday });
+        setDisplayDate(today.toDateString());
+        setFirstClick(true);
+    };
+    const handleLastSevenDays = () => {
+        const lastWeekDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 7);
+        onSelect({ type: 'start', value: lastWeekDate });
+        onSelect({ type: 'end', value: today });
+        setDisplayDate(today.toDateString());
+        setFirstClick(true);
+    };
+    const handleLastThirtyDays = () => {
+        const lastMonthDate = new Date(today);
+        lastMonthDate.setMonth(thisMonth - 2);
+        onSelect({ type: 'start', value: lastMonthDate });
+        onSelect({ type: 'end', value: today });
+        setDisplayDate(today.toDateString());
+        setFirstClick(true);
+    };
+    const handleThisMonth = () => {
+        onSelect({ type: 'start', value: firstOfMonth });
+        onSelect({
+            type: 'end',
+            value: new Date(firstOfMonth.getFullYear(), firstOfMonth.getMonth(), getMonthDays()),
+        });
+        setDisplayDate(today.toDateString());
+        setFirstClick(true);
+    };
+    const handleLastMonth = () => {
+        const lastMonthDate = new Date(firstOfMonth);
+        lastMonthDate.setMonth(thisMonth - 2);
+        onSelect({ type: 'start', value: lastMonthDate });
+        onSelect({
+            type: 'end',
+            value: new Date(lastMonthDate.getFullYear(), lastMonthDate.getMonth(), getMonthDays(lastMonthDate.getMonth() + 1)),
+        });
+        setDisplayDate(lastMonthDate.toDateString());
+        setFirstClick(true);
+    };
+    const handleLastYear = () => {
+        const lastYearDate = new Date(today);
+        lastYearDate.setFullYear(thisYear - 1);
+        onSelect({ type: 'start', value: lastYearDate });
+        onSelect({ type: 'end', value: today });
+        setDisplayDate(today.toDateString());
+        setFirstClick(true);
+    };
+    const calendar = buildCalendar(new Date(displayDate).getMonth() + 1, new Date(displayDate).getFullYear());
+    const minRange = new Date(componentStartDate).getTime();
+    const maxRange = new Date(componentEndDate).getTime();
+    const displayDateObj = new Date(displayDate);
+    const displayFirstOfMonth = new Date(displayDateObj);
+    displayFirstOfMonth.setDate(1);
+    const displayLastOfMonth = new Date(displayDateObj);
+    displayLastOfMonth.setDate(getMonthDays(displayDateObj.getMonth() + 1));
+    return (React.createElement(Wrapper, { onBlurCapture: handleBlur, ref: pickerRef, tabIndex: 0 },
+        React.createElement(Trigger, { onClick: handleShow },
+            label && (React.createElement(React.Fragment, null,
+                label,
+                ' | ')),
+            React.createElement("span", null, startDate.toLocaleDateString('en-US').replaceAll('/', '-')),
+            !!endDate && startDate.toDateString() !== endDate?.toDateString() && (React.createElement(ArrowRight, { sx: "padding: 0px 8px; margin-bottom: -2px;" })),
+            startDate.toDateString() !== endDate?.toDateString() && (React.createElement("span", null, endDate?.toLocaleDateString('en-US').replaceAll('/', '-')))),
+        show && (React.createElement(DateSelector, null,
+            React.createElement(InnerWrapper, null,
+                !!endDate && (React.createElement(Left, null,
+                    React.createElement(Button, { size: "small", type: "text", onClick: handleSetToday }, "Today"),
+                    React.createElement(Button, { size: "small", type: "text", onClick: handleSetYesterday }, "Yesterday"),
+                    React.createElement(Button, { size: "small", type: "text", onClick: handleLastSevenDays }, "Last 7 days"),
+                    React.createElement(Button, { size: "small", type: "text", onClick: handleLastThirtyDays }, "Last 30 days"),
+                    React.createElement(Button, { size: "small", type: "text", onClick: handleThisMonth }, "This month"),
+                    React.createElement(Button, { size: "small", type: "text", onClick: handleLastMonth }, "Last month"),
+                    React.createElement(Button, { size: "small", type: "text", onClick: handleLastYear }, "Last Year"))),
+                React.createElement("div", null,
+                    React.createElement(MonthBar, null,
+                        React.createElement(Arrow, { onClick: handlePreviousMonth },
+                            React.createElement(ChevronLeft, { size: 24 })),
+                        React.createElement(P, null, `${Object.values(MONTHS)[Math.max(0, Math.min(new Date(displayDate).getMonth(), 11))]} ${new Date(displayDate).getFullYear()}`),
+                        React.createElement(Arrow, { onClick: handleNextMonth },
+                            React.createElement(ChevronRight, { size: 24 }))),
+                    React.createElement(WeekdayWrapper, null, Object.values(WEEKDAYS).map((day) => (React.createElement(P, { key: day }, day)))),
+                    React.createElement(Calendar, null, calendar.map((week, index) => {
+                        return (React.createElement(Week, { key: 'week-' + index.toString(36) }, week.map((day, dayIndex) => {
+                            const isCurrMonth = day[1] !==
+                                zeroPad(new Date(displayDate).getMonth() + 1, 2);
+                            const dateObj = new Date(`${day[1]}-${day[2]}-${day[0]}`);
+                            const isToday = Math.abs(dateObj.getTime() - today.getTime()) < 0.5;
+                            const time = dateObj.toDateString();
+                            const isStartDate = time === componentStartDate;
+                            const isEndDate = !isSingleDate && time === componentEndDate;
+                            const between = !isSingleDate &&
+                                minRange <= dateObj.getTime() &&
+                                dateObj.getTime() <= maxRange &&
+                                !isStartDate &&
+                                !isEndDate;
+                            const isFirstOfMonth = displayFirstOfMonth.toDateString() === time;
+                            const isLastOfMonth = displayLastOfMonth.toDateString() === time;
+                            return (React.createElement(Day, { className: `${isToday ? 'today' : ''}${isCurrMonth ? ' not-current' : ''}${isStartDate ? ' start-date' : ''}${isEndDate ? ' end-date' : ''}${between ? ' between' : ''}${isFirstOfMonth ? ' first-of-month' : ''}${isLastOfMonth ? ' last-of-month' : ''}`.trim(), "data-day": day[2], "data-month": day[1], "data-year": day[0], key: 'day-' + dayIndex.toString(36), onClick: handleClick }, `${day[2]}`.startsWith('0')
+                                ? `${day[2]}`[1]
+                                : day[2]));
+                        })));
+                    })),
+                    React.createElement(BottomWrapper, null,
+                        React.createElement(Button, { onClick: handleCancel, size: "small", sx: "width: 80px;", type: "outlined" }, "Cancel"),
+                        React.createElement(Button, { onClick: handleApply, size: "small", sx: "width: 80px;" }, "Apply"))))))));
+};
+const Wrapper = styled.div `
   position: relative;
   width: fit-content;
   font-family: var(--font-inter);
-`,Trigger=styled.styled.button`
+`;
+const Trigger = styled.button `
   padding: 12px 24px;
   background-color: #ffffff;
   border: 1px solid var(--color-grey-6);
@@ -34,14 +246,16 @@
     background-color: var(--color-blue-3);
     border-color: var(--color-blue-3);
   }
-`,DateSelector=styled.styled.div`
+`;
+const DateSelector = styled.div `
   transform: translateY(26px);
   position: absolute;
   z-index: 5;
   background-color: #ffffff;
   border-radius: 25px;
   box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
-`,InnerWrapper=styled.styled.div`
+`;
+const InnerWrapper = styled.div `
   display: flex;
   gap: 31px;
   padding: 30px;
@@ -59,7 +273,8 @@
     transform: rotate(45deg);
     box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
   }
-`,Left=styled.styled.div`
+`;
+const Left = styled.div `
   display: flex;
   flex-flow: column nowrap;
   gap: 24px;
@@ -86,13 +301,15 @@
       }
     }
   }
-`,MonthBar=styled.styled.div`
+`;
+const MonthBar = styled.div `
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 32px;
   user-select: none;
-`,Arrow=styled.styled.button`
+`;
+const Arrow = styled.button `
   appearance: none;
   border: none;
   outline: none;
@@ -111,21 +328,25 @@
       fill: #ffffff;
     }
   }
-`,WeekdayWrapper=styled.styled.div`
+`;
+const WeekdayWrapper = styled.div `
   display: flex;
   gap: 32px;
   user-select: none;
-`,Calendar=styled.styled.div`
+`;
+const Calendar = styled.div `
   display: flex;
   flex-direction: column;
   gap: 32px;
   margin: 32px 0px;
   user-select: none;
-`,Week=styled.styled.div`
+`;
+const Week = styled.div `
   display: flex;
   gap: 32px;
   border-radius: 24px;
-`,Day=styled.styled.button`
+`;
+const Day = styled.button `
   outline: none;
   border: none;
   background: transparent;
@@ -294,8 +515,9 @@
       }
     }
   }
-`,BottomWrapper=styled.styled.div`
+`;
+const BottomWrapper = styled.div `
   display: flex;
   justify-content: flex-end;
   gap: 18px;
-`;exports.DatePicker=DatePicker;
+`;

package/dist/components/input/date/index.js

@@ -0,0 +1 @@
+export { DatePicker } from './date';

package/dist/components/input/filter/filter.js

@@ -1,10 +1,140 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),button=require("../../actions/button/button.js"),paragraph=require("../../atoms/typography/paragraph.js"),chevron_down=require("../../../icons/arrow/chevron_down.js"),chevron_up=require("../../../icons/arrow/chevron_up.js"),close=require("../../../icons/basic/close.js"),styles=require("../../../common/styles.js"),filter_option=require("./filter_option.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled);const Filter=({closeOnBlur:t=!0,disabled:e,graphic:a,graphicAlignment:l="left",resetGraphic:r,label:o="",sx:n,triggerType:d,options:u,defaultValue:c="",closeOnChange:i=!0,optionOnChange:s,optionShowClose:p,checkbox:f,isRadio:_,applyOnClick:g,resetOnClick:v,applyResetActions:b})=>{const y=!!f,h=React__default.default.useRef(null);var m=React__default.default.useRef(null);const[x,R]=React__default.default.useState(!1),[C,E]=React__default.default.useState(()=>c||(y?[]:"")),[k,$]=React__default.default.useState("");React__default.default.useEffect(()=>{e&&R(!1)},[e]),React__default.default.useEffect(()=>{"outlined"===d&&void 0===c&&E(y?[u[0]?.value]:u[0]?.value)},[d,c]),React__default.default.useEffect(()=>{var e;x||(C.length?(e=u.find(e=>"string"!=typeof e&&P(e.value)),"string"==typeof C?$(e.label):$(1<C.length?e.label+" +"+(C.length-1):e.label)):$(o))},[C,u,x]);const w=y?e=>{e.stopPropagation();const t=e.target.getAttribute("data-value")??"";Array.isArray(C)&&C.includes(t)?E(e=>e.filter(e=>e!==t)):E(e=>[t,...e]),i&&!g&&R(!1),s&&s(e)}:e=>{e.stopPropagation();var t=e.target.getAttribute("data-value")??"";C!==t?E(t):E(""),i&&!g&&R(!1),s&&s(e)},P=e=>y?C.includes(e):e===C;var S=[...u.map((e,t)=>"string"==typeof e&&"break"===e?React__default.default.createElement(filter_option.Spacer,{key:React__default.default.useId()+"-spacer-"+t}):React__default.default.createElement(filter_option.Option,{key:e.value,onClick:w,selected:P(e.value),checkbox:f,radio:!y&&"pill"===d||!y&&_,showClose:void 0===p?0===t&&"pill"===d:p,onClose:()=>R(!1),...e})),"pill"===d&&React__default.default.createElement(filter_option.Spacer,{key:"spacer-"+u.length})],A=r&&("string"==typeof C?!!C:!!C.length);return React__default.default.createElement(Wrapper,{$sx:n,tabIndex:0,ref:h,onBlurCapture:e=>{t&&h?.current&&!h?.current?.contains(e.relatedTarget)&&R(!1)}},React__default.default.createElement(FilterTrigger,{disabled:e,graphic:a,graphicAlignment:l,label:o,onClick:()=>{e||R(e=>!e)},onReset:r?e=>{e.stopPropagation(),v&&v(e),E(y?[]:""),R(!1)}:void 0,open:x,resetGraphic:A,type:d,value:k}),x&&React__default.default.createElement(Container,{ref:m},React__default.default.createElement(React__default.default.Fragment,null,S,"pill"===d&&b&&React__default.default.createElement(box.Box,{$display:"flex",$dir:"row",$align:"center",$justify:"flex-end",$gap:8,sx:"margin-top: 8px; padding-right: 8px; padding-bottom: 8px;"},React__default.default.createElement(button.Button,{onClick:e=>{v&&v(e),E(y?[]:""),R(!1)},size:"small",type:"text"},"Reset"),React__default.default.createElement(button.Button,{onClick:e=>{g&&g(e),R(!1)},size:"small",type:"primary"},"Apply")))))},Wrapper=styled__default.default.div`
+'use client';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { Box } from '../../../components/atoms/box/box';
+import { Button } from '../../../components/actions/button/button';
+import { P } from '../../../components/atoms/typography/paragraph';
+import { ChevronDown } from '../../../icons/arrow/chevron_down';
+import { ChevronUp } from '../../../icons/arrow/chevron_up';
+import { Close } from '../../../icons/basic/close';
+import { Styles } from '../../../common/styles';
+import { Spacer } from './filter_option';
+import { Option } from './filter_option';
+const Filter = ({ closeOnBlur = true, disabled, graphic, graphicAlignment = 'left', resetGraphic, label = '', sx, triggerType, options, defaultValue = '', closeOnChange = true, optionOnChange, optionShowClose, checkbox, isRadio, applyOnClick, resetOnClick, applyResetActions, }) => {
+    const multiple = !!checkbox;
+    const wrapperRef = React.useRef(null);
+    const optionsRef = React.useRef(null);
+    const [open, setOpen] = React.useState(false);
+    const [selected, setSelected] = React.useState(() => defaultValue ? defaultValue : multiple ? [] : '');
+    const [filterLabel, setFilterLabel] = React.useState('');
+    React.useEffect(() => {
+        if (disabled) {
+            setOpen(false);
+        }
+    }, [disabled]);
+    React.useEffect(() => {
+        if (triggerType === 'outlined' && defaultValue === undefined) {
+            setSelected(multiple
+                ? [options[0]?.value]
+                : options[0]?.value);
+        }
+    }, [triggerType, defaultValue]);
+    React.useEffect(() => {
+        if (open) {
+            return;
+        }
+        if (!selected.length) {
+            setFilterLabel(label);
+            return;
+        }
+        // not using selected[0] since it is required to show the first
+        const firstSelected = options.find((option) => typeof option !== 'string' && isSelected(option.value));
+        if (typeof selected === 'string') {
+            setFilterLabel(firstSelected.label);
+            return;
+        }
+        setFilterLabel(selected.length > 1
+            ? `${firstSelected.label} +${selected.length - 1}`
+            : firstSelected.label);
+    }, [selected, options, open]);
+    const handleOpen = () => {
+        if (disabled) {
+            return;
+        }
+        setOpen((prev) => !prev);
+    };
+    const handleBlur = (event) => {
+        if (closeOnBlur &&
+            wrapperRef?.current &&
+            !wrapperRef?.current?.contains(event.relatedTarget)) {
+            setOpen(false);
+        }
+    };
+    const handleChangeSingle = (event) => {
+        event.stopPropagation();
+        const value = event.target.getAttribute('data-value') ?? '';
+        if (selected !== value) {
+            setSelected(value);
+        }
+        else {
+            setSelected('');
+        }
+        if (closeOnChange && !applyOnClick) {
+            setOpen(false);
+        }
+        if (optionOnChange)
+            optionOnChange(event);
+    };
+    const handleChangeMultiple = (event) => {
+        event.stopPropagation();
+        const value = event.target.getAttribute('data-value') ?? '';
+        if (Array.isArray(selected) && selected.includes(value)) {
+            setSelected((prev) => prev.filter((item) => item !== value));
+        }
+        else {
+            setSelected((prev) => [value, ...prev]);
+        }
+        if (closeOnChange && !applyOnClick) {
+            setOpen(false);
+        }
+        if (optionOnChange)
+            optionOnChange(event);
+    };
+    const handleChange = multiple ? handleChangeMultiple : handleChangeSingle;
+    const isSelected = (value) => multiple ? selected.includes(value) : value === selected;
+    const dropdownOptions = [
+        ...options.map((option, index) => {
+            if (typeof option === 'string' && option === 'break') {
+                return React.createElement(Spacer, { key: `${React.useId()}-spacer-${index}` });
+            }
+            return (React.createElement(Option, { key: option.value, onClick: handleChange, selected: isSelected(option.value), checkbox: checkbox, radio: (!multiple && triggerType === 'pill') || (!multiple && isRadio), showClose: optionShowClose === undefined
+                    ? index === 0 && triggerType === 'pill'
+                    : optionShowClose, onClose: () => setOpen(false), ...option }));
+        }),
+        triggerType === 'pill' && React.createElement(Spacer, { key: `spacer-${options.length}` }),
+    ];
+    const showResetGraphic = resetGraphic &&
+        (typeof selected === 'string' ? !!selected : !!selected.length);
+    return (React.createElement(Wrapper, { "$sx": sx, tabIndex: 0, ref: wrapperRef, onBlurCapture: handleBlur },
+        React.createElement(FilterTrigger, { disabled: disabled, graphic: graphic, graphicAlignment: graphicAlignment, label: label, onClick: handleOpen, onReset: resetGraphic
+                ? (event) => {
+                    event.stopPropagation();
+                    resetOnClick && resetOnClick(event);
+                    setSelected(multiple ? [] : '');
+                    setOpen(false);
+                }
+                : undefined, open: open, resetGraphic: showResetGraphic, type: triggerType, value: filterLabel }),
+        open && (React.createElement(Container, { ref: optionsRef },
+            React.createElement(React.Fragment, null,
+                dropdownOptions,
+                triggerType === 'pill' && applyResetActions && (React.createElement(Box, { "$display": "flex", "$dir": "row", "$align": "center", "$justify": "flex-end", "$gap": 8, sx: "margin-top: 8px; padding-right: 8px; padding-bottom: 8px;" },
+                    React.createElement(Button, { onClick: (event) => {
+                            resetOnClick && resetOnClick(event);
+                            setSelected(multiple ? [] : '');
+                            setOpen(false);
+                        }, size: "small", type: "text" }, "Reset"),
+                    React.createElement(Button, { onClick: (event) => {
+                            applyOnClick && applyOnClick(event);
+                            setOpen(false);
+                        }, size: "small", type: "primary" }, "Apply"))))))));
+};
+const Wrapper = styled.div `
   position: relative;
   display: block;
   outline: none;
-  ${({$sx:e})=>e||""}
-`,Container=styled__default.default.div`
+  ${({ $sx }) => ($sx ? $sx : '')}
+`;
+const Container = styled.div `
   position: absolute;
   width: max-content;
   z-index: 100;
@@ -21,7 +151,59 @@
   & > div:last-of-type {
     border-radius: 0px 0px 8px 8px;
   }
-`,textProps={as:"span",$fontSize:14,$lineHeight:20},wrapperProps={$align:"center",$dir:"row",$gap:16},FilterTrigger=({disabled:e,graphic:t,graphicAlignment:a,label:l,onClick:r,resetGraphic:o,open:n,onReset:d,type:u,value:c})=>"pill"===u?React__default.default.createElement(Pill,{disabled:e,onClick:r,$labelIsDefault:c===l,...wrapperProps},"left"===a?t:null,React__default.default.createElement(paragraph.P,{...textProps},c),o?React__default.default.createElement(close.Close,{color:"blue-3",onClick:d}):null,"right"===a?t:null,!t&&!o&&(n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null))):"labeled"===u?React__default.default.createElement(Labeled,{disabled:e,onClick:r,...wrapperProps},React__default.default.createElement(paragraph.P,{...textProps},l),React__default.default.createElement(LabelSeparator,null),React__default.default.createElement(paragraph.P,{$color:"primary-blue-2",$mediumBold:!0,...textProps},c),n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null)):"avatar"===u?React__default.default.createElement(Avatar,{$align:"center",$dir:"row",$gap:8,disabled:e,onClick:r},t,n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null)):"text"===u?React__default.default.createElement(Text,{disabled:e,onClick:r,...wrapperProps},React__default.default.createElement(paragraph.P,{$color:"grey-4",$semiBold:!0,...textProps},l,":"),React__default.default.createElement(paragraph.P,{$color:"primary-blue-2",$semiBold:!0,className:"filter-trigger-value",...textProps},c),n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null)):React__default.default.createElement(Outlined,{disabled:e,onClick:r,...wrapperProps},"left"===a?t:null,t,React__default.default.createElement(paragraph.P,{...textProps},c),"right"===a?t:null,!t&&(n?React__default.default.createElement(chevron_up.ChevronUp,null):React__default.default.createElement(chevron_down.ChevronDown,null))),sharedStyles=((Filter.Trigger=FilterTrigger).displayName="Filter.Trigger",styled.css`
+`;
+/********************************************************
+ *  Triggers
+ */
+const textProps = {
+    as: 'span',
+    $fontSize: 14,
+    $lineHeight: 20,
+};
+const wrapperProps = {
+    $align: 'center',
+    $dir: 'row',
+    $gap: 16,
+};
+const FilterTrigger = ({ disabled, graphic, graphicAlignment, label, onClick, resetGraphic, open, onReset, type, value, }) => {
+    if (type === 'pill') {
+        return (React.createElement(Pill, { disabled: disabled, onClick: onClick, "$labelIsDefault": value === label, ...wrapperProps },
+            graphicAlignment === 'left' ? graphic : null,
+            React.createElement(P, { ...textProps }, value),
+            resetGraphic ? React.createElement(Close, { color: "blue-3", onClick: onReset }) : null,
+            graphicAlignment === 'right' ? graphic : null,
+            !graphic && !resetGraphic && (open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null))));
+    }
+    if (type === 'labeled') {
+        return (React.createElement(Labeled, { disabled: disabled, onClick: onClick, ...wrapperProps },
+            React.createElement(P, { ...textProps }, label),
+            React.createElement(LabelSeparator, null),
+            React.createElement(P, { "$color": "primary-blue-2", "$mediumBold": true, ...textProps }, value),
+            open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null)));
+    }
+    if (type === 'avatar') {
+        return (React.createElement(Avatar, { "$align": "center", "$dir": "row", "$gap": 8, disabled: disabled, onClick: onClick },
+            graphic,
+            open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null)));
+    }
+    if (type === 'text') {
+        return (React.createElement(Text, { disabled: disabled, onClick: onClick, ...wrapperProps },
+            React.createElement(P, { "$color": "grey-4", "$semiBold": true, ...textProps },
+                label,
+                ":"),
+            React.createElement(P, { "$color": "primary-blue-2", "$semiBold": true, className: "filter-trigger-value", ...textProps }, value),
+            open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null)));
+    }
+    return (React.createElement(Outlined, { disabled: disabled, onClick: onClick, ...wrapperProps },
+        graphicAlignment === 'left' ? graphic : null,
+        graphic,
+        React.createElement(P, { ...textProps }, value),
+        graphicAlignment === 'right' ? graphic : null,
+        !graphic && (open ? React.createElement(ChevronUp, null) : React.createElement(ChevronDown, null))));
+};
+Filter.Trigger = FilterTrigger;
+FilterTrigger.displayName = 'Filter.Trigger';
+const sharedStyles = css `
   display: flex;
   padding: 10px 16px;
   border: none;
@@ -39,9 +221,10 @@
       fill: var(--color-grey-7);
     }
   }
-`),Outlined=styled__default.default.button`
+`;
+const Outlined = styled.button `
   ${sharedStyles}
-  ${styles.Styles.flex}
+  ${Styles.flex}
   border: 1px solid var(--color-grey-8);
   border-radius: 8px;
   background-color: var(--color-white);
@@ -50,15 +233,17 @@
   &:hover {
     background-color: var(--color-grey-9);
   }
-`,Pill=styled__default.default.button`
+`;
+const Pill = styled.button `
   ${sharedStyles}
-  ${styles.Styles.flex}
+  ${Styles.flex}
   border: 1px solid var(--color-grey-8);
   border-radius: 24px;
   background-color: var(--color-white);
   font-family: var(--font-inter);
 
-  ${({$labelIsDefault:e})=>e?"":`
+  ${({ $labelIsDefault }) => !$labelIsDefault
+    ? `
       & > * {
         color: var(--color-primary-blue-2);
         fill: currentColor;
@@ -72,10 +257,12 @@
       &:hover {
         background-color: var(--color-primary-blue-4);
       }
-    `}
-`,Labeled=styled__default.default.button`
+    `
+    : ''}
+`;
+const Labeled = styled.button `
   ${sharedStyles}
-  ${styles.Styles.flex}
+  ${Styles.flex}
   border-radius: 24px;
   border: 1px solid var(--color-grey-8);
   background-color: var(--color-white);
@@ -84,13 +271,15 @@
   &:hover {
     background-color: var(--color-grey-9);
   }
-`,LabelSeparator=styled__default.default.div`
+`;
+const LabelSeparator = styled.div `
   width: 1px;
   height: 20px;
   background-color: var(--color-grey-8);
-`,Avatar=styled__default.default.button`
+`;
+const Avatar = styled.button `
   ${sharedStyles}
-  ${styles.Styles.flex}
+  ${Styles.flex}
   padding: 4px 16px;
   border-radius: 32px;
   font-family: var(--font-inter);
@@ -108,9 +297,10 @@
       opacity: 0.5;
     }
   }
-`,Text=styled__default.default.button`
+`;
+const Text = styled.button `
   ${sharedStyles}
-  ${styles.Styles.flex}
+  ${Styles.flex}
   gap: 8px;
   background-color: transparent;
   border-radius: 32px;
@@ -130,4 +320,5 @@
     background-color: transparent;
     border: 1px solid transparent;
   }
-`;exports.Filter=Filter;
+`;
+export { Filter };