@soul-refiner/design-system 2.0.4 → 2.1.1-alpha.1

package/dist/components/iconography/avatar/icons/subscribed.js

@@ -1,18 +1 @@
-'use strict';
-
-var React = require('react');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const Subscribed = () => (React__default.default.createElement("svg", { fill: "none", viewBox: "0 0 20 20" },
-    React__default.default.createElement("path", { fill: "#fff", fillRule: "evenodd", d: "M19.088 9.994a9.088 9.088 0 1 1-18.176 0 9.088 9.088 0 0 1 18.176 0Z", clipRule: "evenodd" }),
-    React__default.default.createElement("path", { fill: "url(#a)", d: "M17.088 9.994a7.088 7.088 0 1 1-14.176 0 7.088 7.088 0 0 1 14.176 0Z" }),
-    React__default.default.createElement("path", { fill: "#fff", d: "M9.25 5h1.5v.936c.338.048.648.134.927.26.458.202.813.485 1.067.847.255.362.386.781.394 1.258h-1.665a.976.976 0 0 0-.413-.734c-.244-.175-.575-.262-.992-.262-.283 0-.523.039-.718.117a1.01 1.01 0 0 0-.45.316.748.748 0 0 0-.152.461.645.645 0 0 0 .092.375c.07.107.165.2.285.278.12.075.26.141.418.199.157.054.326.101.505.14l.738.172c.359.078.688.183.988.313.299.13.559.29.778.48a2.003 2.003 0 0 1 .698 1.559c-.003.49-.131.914-.385 1.273-.252.357-.615.634-1.091.832-.302.125-.643.21-1.024.255V15h-1.5v-.942a4.002 4.002 0 0 1-.923-.242c-.49-.198-.872-.49-1.148-.879-.273-.39-.416-.873-.429-1.449h1.681c.019.269.098.492.237.672.142.177.33.311.566.402.238.089.507.133.806.133.294 0 .55-.041.767-.125.219-.083.389-.199.509-.347a.79.79 0 0 0 .18-.512c0-.18-.054-.33-.164-.453a1.248 1.248 0 0 0-.473-.313 4.908 4.908 0 0 0-.759-.234l-.894-.219c-.693-.164-1.24-.42-1.641-.77-.402-.348-.601-.818-.598-1.41-.003-.484.13-.907.397-1.269.27-.362.64-.645 1.111-.848.242-.104.5-.181.775-.232V5Z" }),
-    React__default.default.createElement("defs", null,
-        React__default.default.createElement("radialGradient", { id: "a", cx: "0", cy: "0", r: "1", gradientTransform: "rotate(-49.924 18.2 -.497) scale(14.7338 19.4196)", gradientUnits: "userSpaceOnUse" },
-            React__default.default.createElement("stop", { stopColor: "#09B3A1" }),
-            React__default.default.createElement("stop", { offset: "1", stopColor: "#3AC15E" })))));
-
-exports.Subscribed = Subscribed;
+"use strict";var React=require("react");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Subscribed=()=>React__default.default.createElement("svg",{fill:"none",viewBox:"0 0 20 20"},React__default.default.createElement("path",{fill:"#fff",fillRule:"evenodd",d:"M19.088 9.994a9.088 9.088 0 1 1-18.176 0 9.088 9.088 0 0 1 18.176 0Z",clipRule:"evenodd"}),React__default.default.createElement("path",{fill:"url(#a)",d:"M17.088 9.994a7.088 7.088 0 1 1-14.176 0 7.088 7.088 0 0 1 14.176 0Z"}),React__default.default.createElement("path",{fill:"#fff",d:"M9.25 5h1.5v.936c.338.048.648.134.927.26.458.202.813.485 1.067.847.255.362.386.781.394 1.258h-1.665a.976.976 0 0 0-.413-.734c-.244-.175-.575-.262-.992-.262-.283 0-.523.039-.718.117a1.01 1.01 0 0 0-.45.316.748.748 0 0 0-.152.461.645.645 0 0 0 .092.375c.07.107.165.2.285.278.12.075.26.141.418.199.157.054.326.101.505.14l.738.172c.359.078.688.183.988.313.299.13.559.29.778.48a2.003 2.003 0 0 1 .698 1.559c-.003.49-.131.914-.385 1.273-.252.357-.615.634-1.091.832-.302.125-.643.21-1.024.255V15h-1.5v-.942a4.002 4.002 0 0 1-.923-.242c-.49-.198-.872-.49-1.148-.879-.273-.39-.416-.873-.429-1.449h1.681c.019.269.098.492.237.672.142.177.33.311.566.402.238.089.507.133.806.133.294 0 .55-.041.767-.125.219-.083.389-.199.509-.347a.79.79 0 0 0 .18-.512c0-.18-.054-.33-.164-.453a1.248 1.248 0 0 0-.473-.313 4.908 4.908 0 0 0-.759-.234l-.894-.219c-.693-.164-1.24-.42-1.641-.77-.402-.348-.601-.818-.598-1.41-.003-.484.13-.907.397-1.269.27-.362.64-.645 1.111-.848.242-.104.5-.181.775-.232V5Z"}),React__default.default.createElement("defs",null,React__default.default.createElement("radialGradient",{id:"a",cx:"0",cy:"0",r:"1",gradientTransform:"rotate(-49.924 18.2 -.497) scale(14.7338 19.4196)",gradientUnits:"userSpaceOnUse"},React__default.default.createElement("stop",{stopColor:"#09B3A1"}),React__default.default.createElement("stop",{offset:"1",stopColor:"#3AC15E"}))));exports.Subscribed=Subscribed;

package/dist/components/iconography/icon/icon.js

@@ -1,19 +1,4 @@
 "use client";
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var colors = require('../../../common/colors.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const Icon = ({ as, children, color = 'grey-3', size = 16, sx, ...rest }) => {
-    return (React__default.default.createElement(SVG, { as: as, width: size, height: size, viewBox: "0 0 16 16", fill: colors.colorReference[color], xmlns: "http://www.w3.org/2000/svg", "$sx": sx, ...rest }, children));
-};
-const SVG = styled.styled.svg `
-  ${({ $sx }) => ($sx ? $sx : '')}
-`;
-
-exports.Icon = Icon;
+"use strict";var React=require("react"),styled=require("styled-components"),colors=require("../../../common/colors.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Icon=({as:e,children:t,color:o="grey-3",size:r=16,sx:c,...s})=>React__default.default.createElement(SVG,{as:e,width:r,height:r,viewBox:"0 0 16 16",fill:colors.colorReference[o],xmlns:"http://www.w3.org/2000/svg",$sx:c,...s},t),SVG=styled.styled.svg`
+  ${({$sx:e})=>e||""}
+`;exports.Icon=Icon;

package/dist/components/input/calendar/calendar.js

@@ -1,131 +1,16 @@
 "use client";
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var date$1 = require('../../../common/date.js');
-var button = require('../../actions/button/button.js');
-var paragraph = require('../../atoms/typography/paragraph.js');
-var chevron_left = require('../../../icons/arrow/chevron_left.js');
-var chevron_right = require('../../../icons/arrow/chevron_right.js');
-var calendar = require('../../../icons/time/calendar.js');
-var date = require('../../../utils/date.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-const CalendarInput = ({ selectedDate, onSelect: parentOnSelect, disablePastDates, }) => {
-    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 pickerRef = React__default.default.useRef(null);
-    const [show, setShow] = React__default.default.useState(false);
-    const [displayDate, setDisplayDate] = React__default.default.useState(() => selectedDate?.toDateString() || new Date().toDateString());
-    const [componentSelectedDate, setComponentSelectedDate] = React__default.default.useState(() => selectedDate?.toDateString() || new Date().toDateString());
-    React__default.default.useEffect(() => {
-        setComponentSelectedDate(selectedDate?.toDateString() || new Date().toDateString());
-    }, [selectedDate]);
-    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 onSelect = (newDate) => {
-        setComponentSelectedDate(newDate.toDateString());
-    };
-    const handleApply = () => {
-        parentOnSelect(new Date(componentSelectedDate));
-        setShow(false);
-    };
-    const handleClick = (event) => {
-        const target = event.target;
-        const day = target.getAttribute('data-day');
-        const month = target.getAttribute('data-month');
-        const year = target.getAttribute('data-year');
-        onSelect(new Date(`${month}-${day}-${year}`));
-    };
-    const handleCancel = () => {
-        setComponentSelectedDate(selectedDate?.toDateString() || new Date().toDateString());
-        setShow(false);
-    };
-    const calendar$1 = date.buildCalendar(new Date(displayDate).getMonth() + 1, new Date(displayDate).getFullYear());
-    const [month, day, year] = (selectedDate || new Date())
-        .toLocaleString('default', {
-        year: '2-digit',
-        month: '2-digit',
-        day: '2-digit',
-    })
-        .split('/');
-    return (React__default.default.createElement(Wrapper, { onBlurCapture: handleBlur, ref: pickerRef, tabIndex: 0 },
-        React__default.default.createElement(InputWrapper, null,
-            React__default.default.createElement(Input, { value: selectedDate ? `${month} / ${day} / ${year}` : '', onFocus: handleShow, style: { letterSpacing: '1px', fontSize: '16px' }, readOnly: true }),
-            React__default.default.createElement(calendar.Calendar, null)),
-        show && (React__default.default.createElement(DateSelector, null,
-            React__default.default.createElement(InnerWrapper, null,
-                React__default.default.createElement("div", null,
-                    React__default.default.createElement(MonthBar, null,
-                        React__default.default.createElement(Arrow, { onClick: handlePreviousMonth },
-                            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(displayDate).getMonth(), 11))]} ${new Date(displayDate).getFullYear()}`),
-                        React__default.default.createElement(Arrow, { onClick: handleNextMonth },
-                            React__default.default.createElement(chevron_right.ChevronRight, { size: 24 }))),
-                    React__default.default.createElement(WeekdayWrapper, null, Object.values(date$1.WEEKDAYS).map((day) => (React__default.default.createElement(paragraph.P, { key: day }, day)))),
-                    React__default.default.createElement(Calendar, null, calendar$1.map((week, index) => {
-                        return (React__default.default.createElement(Week, { key: 'week-' + index.toString(36) }, week.map((day, dayIndex) => {
-                            const dateObj = new Date(`${day[1]}-${day[2]}-${day[0]}`);
-                            const isPastDate = today.getTime() - dateObj.getTime() > 0;
-                            const isCurrMonth = day[1] !==
-                                date.zeroPad(new Date(displayDate).getMonth() + 1, 2);
-                            const isNotCurrent = disablePastDates
-                                ? isPastDate
-                                : isCurrMonth;
-                            const isToday = Math.abs(dateObj.getTime() - today.getTime()) < 0.5;
-                            const isSelected = new Date(componentSelectedDate).getTime() ===
-                                dateObj.getTime();
-                            return (React__default.default.createElement(Day, { className: `${isToday ? 'today' : ''}${isNotCurrent ? ' not-current' : ''}${isSelected ? ' selected' : ''}`.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__default.default.createElement(BottomWrapper, null,
-                        React__default.default.createElement(button.Button, { onClick: handleCancel, size: "small", sx: "width: 80px;", type: "outlined" }, "Cancel"),
-                        React__default.default.createElement(button.Button, { onClick: handleApply, size: "small", sx: "width: 80px;" }, "Apply"))))))));
-};
-const Wrapper = styled.styled.div `
+"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"),calendar=require("../../../icons/time/calendar.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 CalendarInput=({selectedDate:e,onSelect:t,disablePastDates:l})=>{const o=new Date;o.setHours(0),o.setMinutes(0),o.setSeconds(0),o.setMilliseconds(0),new Date(o).setDate(1);const a=React__default.default.useRef(null),[r,n]=React__default.default.useState(!1),[d,i]=React__default.default.useState(()=>e?.toDateString()||(new Date).toDateString()),[u,c]=React__default.default.useState(()=>e?.toDateString()||(new Date).toDateString());React__default.default.useEffect(()=>{c(e?.toDateString()||(new Date).toDateString())},[e]);const s=e=>{var e=e.target,t=e.getAttribute("data-day"),a=e.getAttribute("data-month"),e=e.getAttribute("data-year");a=new Date(a+`-${t}-`+e),c(a.toDateString())};var f=date.buildCalendar(new Date(d).getMonth()+1,new Date(d).getFullYear()),[p,g,y]=(e||new Date).toLocaleString("default",{year:"2-digit",month:"2-digit",day:"2-digit"}).split("/");return React__default.default.createElement(Wrapper,{onBlurCapture:e=>{a?.current&&!a?.current?.contains(e.relatedTarget)&&n(!1)},ref:a,tabIndex:0},React__default.default.createElement(InputWrapper,null,React__default.default.createElement(Input,{value:e?p+` / ${g} / `+y:"",onFocus:()=>n(e=>!e),style:{letterSpacing:"1px",fontSize:"16px"},readOnly:!0}),React__default.default.createElement(calendar.Calendar,null)),r&&React__default.default.createElement(DateSelector,null,React__default.default.createElement(InnerWrapper,null,React__default.default.createElement("div",null,React__default.default.createElement(MonthBar,null,React__default.default.createElement(Arrow,{onClick:()=>{i(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(d).getMonth(),11))]+" "+new Date(d).getFullYear()),React__default.default.createElement(Arrow,{onClick:()=>{i(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,f.map((e,t)=>React__default.default.createElement(Week,{key:"week-"+t.toString(36)},e.map((e,t)=>{var a=new Date(`${e[1]}-${e[2]}-`+e[0]),r=0<o.getTime()-a.getTime(),n=e[1]!==date.zeroPad(new Date(d).getMonth()+1,2),r=l?r:n,n=Math.abs(a.getTime()-o.getTime())<.5,a=new Date(u).getTime()===a.getTime();return React__default.default.createElement(Day,{className:((n?"today":"")+(r?" not-current":"")+(a?" selected":"")).trim(),"data-day":e[2],"data-month":e[1],"data-year":e[0],key:"day-"+t.toString(36),onClick:s},(""+e[2]).startsWith("0")?(""+e[2])[1]:e[2])})))),React__default.default.createElement(BottomWrapper,null,React__default.default.createElement(button.Button,{onClick:()=>{c(e?.toDateString()||(new Date).toDateString()),n(!1)},size:"small",sx:"width: 80px;",type:"outlined"},"Cancel"),React__default.default.createElement(button.Button,{onClick:()=>{t(new Date(u)),n(!1)},size:"small",sx:"width: 80px;"},"Apply"))))))},Wrapper=styled.styled.div`
   position: relative;
   width: fit-content;
   font-family: var(--font-inter);
-`;
-const DateSelector = styled.styled.div `
+`,DateSelector=styled.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);
-`;
-const InnerWrapper = styled.styled.div `
+`,InnerWrapper=styled.styled.div`
   display: flex;
   gap: 31px;
   padding: 30px;
@@ -143,15 +28,13 @@ const InnerWrapper = styled.styled.div `
     transform: rotate(45deg);
     box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
   }
-`;
-const MonthBar = styled.styled.div `
+`,MonthBar=styled.styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 32px;
   user-select: none;
-`;
-const Arrow = styled.styled.button `
+`,Arrow=styled.styled.button`
   appearance: none;
   border: none;
   outline: none;
@@ -170,25 +53,21 @@ const Arrow = styled.styled.button `
       fill: #ffffff;
     }
   }
-`;
-const WeekdayWrapper = styled.styled.div `
+`,WeekdayWrapper=styled.styled.div`
   display: flex;
   gap: 32px;
   user-select: none;
-`;
-const Calendar = styled.styled.div `
+`,Calendar=styled.styled.div`
   display: flex;
   flex-direction: column;
   gap: 32px;
   margin: 32px 0px;
   user-select: none;
-`;
-const Week = styled.styled.div `
+`,Week=styled.styled.div`
   display: flex;
   gap: 32px;
   border-radius: 24px;
-`;
-const Day = styled.styled.button `
+`,Day=styled.styled.button`
   outline: none;
   border: none;
   background: transparent;
@@ -222,13 +101,11 @@ const Day = styled.styled.button `
       background-color: var(--color-blue-9);
     }
   }
-`;
-const BottomWrapper = styled.styled.div `
+`,BottomWrapper=styled.styled.div`
   display: flex;
   justify-content: flex-end;
   gap: 18px;
-`;
-const Input = styled.styled.input `
+`,Input=styled.styled.input`
   max-width: 140px;
   padding: 0px;
   flex: 1;
@@ -243,8 +120,7 @@ const Input = styled.styled.input `
   &::placeholder {
     color: var(--color-grey-6);
   }
-`;
-const InputWrapper = styled.styled.div `
+`,InputWrapper=styled.styled.div`
   width: fit-content;
   display: flex;
   gap: 8px;
@@ -262,6 +138,4 @@ const InputWrapper = styled.styled.div `
   &:focus-within {
     border-color: var(--color-primary-blue-2);
   }
-`;
-
-exports.CalendarInput = CalendarInput;
+`;exports.CalendarInput=CalendarInput;

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

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

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

@@ -1,225 +1,9 @@
 "use client";
-'use strict';
-
-var React = require('react');
-var styled = require('styled-components');
-var date$1 = require('../../../common/date.js');
-var button = require('../../actions/button/button.js');
-var paragraph = require('../../atoms/typography/paragraph.js');
-var chevron_left = require('../../../icons/arrow/chevron_left.js');
-var chevron_right = require('../../../icons/arrow/chevron_right.js');
-var arrow_right = require('../../../icons/arrow/arrow_right.js');
-var date = require('../../../utils/date.js');
-
-function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-
-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__default.default.useRef(null);
-    const [show, setShow] = React__default.default.useState(false);
-    const [displayDate, setDisplayDate] = React__default.default.useState(() => endDate?.toDateString() ?? startDate.toDateString());
-    const [componentStartDate, setComponentStartDate] = React__default.default.useState(() => startDate.toDateString());
-    const [componentEndDate, setComponentEndDate] = React__default.default.useState(() => endDate?.toDateString() ?? startDate.toDateString());
-    const [firstClick, setFirstClick] = React__default.default.useState(true);
-    React__default.default.useEffect(() => {
-        setComponentStartDate(startDate.toDateString());
-    }, [startDate]);
-    React__default.default.useEffect(() => {
-        setComponentEndDate((endDate ?? new Date())?.toDateString());
-    }, [endDate]);
-    React__default.default.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(), date.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(), date.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 = date.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(date.getMonthDays(displayDateObj.getMonth() + 1));
-    return (React__default.default.createElement(Wrapper, { onBlurCapture: handleBlur, ref: pickerRef, tabIndex: 0 },
-        React__default.default.createElement(Trigger, { onClick: handleShow },
-            label && (React__default.default.createElement(React__default.default.Fragment, null,
-                label,
-                ' | ')),
-            React__default.default.createElement("span", null, startDate.toLocaleDateString('en-US').replaceAll('/', '-')),
-            !!endDate && startDate.toDateString() !== endDate?.toDateString() && (React__default.default.createElement(arrow_right.ArrowRight, { sx: "padding: 0px 8px; margin-bottom: -2px;" })),
-            startDate.toDateString() !== endDate?.toDateString() && (React__default.default.createElement("span", null, endDate?.toLocaleDateString('en-US').replaceAll('/', '-')))),
-        show && (React__default.default.createElement(DateSelector, null,
-            React__default.default.createElement(InnerWrapper, null,
-                !!endDate && (React__default.default.createElement(Left, null,
-                    React__default.default.createElement(button.Button, { size: "small", type: "text", onClick: handleSetToday }, "Today"),
-                    React__default.default.createElement(button.Button, { size: "small", type: "text", onClick: handleSetYesterday }, "Yesterday"),
-                    React__default.default.createElement(button.Button, { size: "small", type: "text", onClick: handleLastSevenDays }, "Last 7 days"),
-                    React__default.default.createElement(button.Button, { size: "small", type: "text", onClick: handleLastThirtyDays }, "Last 30 days"),
-                    React__default.default.createElement(button.Button, { size: "small", type: "text", onClick: handleThisMonth }, "This month"),
-                    React__default.default.createElement(button.Button, { size: "small", type: "text", onClick: handleLastMonth }, "Last month"),
-                    React__default.default.createElement(button.Button, { size: "small", type: "text", onClick: handleLastYear }, "Last Year"))),
-                React__default.default.createElement("div", null,
-                    React__default.default.createElement(MonthBar, null,
-                        React__default.default.createElement(Arrow, { onClick: handlePreviousMonth },
-                            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(displayDate).getMonth(), 11))]} ${new Date(displayDate).getFullYear()}`),
-                        React__default.default.createElement(Arrow, { onClick: handleNextMonth },
-                            React__default.default.createElement(chevron_right.ChevronRight, { size: 24 }))),
-                    React__default.default.createElement(WeekdayWrapper, null, Object.values(date$1.WEEKDAYS).map((day) => (React__default.default.createElement(paragraph.P, { key: day }, day)))),
-                    React__default.default.createElement(Calendar, null, calendar.map((week, index) => {
-                        return (React__default.default.createElement(Week, { key: 'week-' + index.toString(36) }, week.map((day, dayIndex) => {
-                            const isCurrMonth = day[1] !==
-                                date.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__default.default.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__default.default.createElement(BottomWrapper, null,
-                        React__default.default.createElement(button.Button, { onClick: handleCancel, size: "small", sx: "width: 80px;", type: "outlined" }, "Cancel"),
-                        React__default.default.createElement(button.Button, { onClick: handleApply, size: "small", sx: "width: 80px;" }, "Apply"))))))));
-};
-const Wrapper = styled.styled.div `
+"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`
   position: relative;
   width: fit-content;
   font-family: var(--font-inter);
-`;
-const Trigger = styled.styled.button `
+`,Trigger=styled.styled.button`
   padding: 12px 24px;
   background-color: #ffffff;
   border: 1px solid var(--color-grey-6);
@@ -250,16 +34,14 @@ const Trigger = styled.styled.button `
     background-color: var(--color-blue-3);
     border-color: var(--color-blue-3);
   }
-`;
-const DateSelector = styled.styled.div `
+`,DateSelector=styled.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);
-`;
-const InnerWrapper = styled.styled.div `
+`,InnerWrapper=styled.styled.div`
   display: flex;
   gap: 31px;
   padding: 30px;
@@ -277,8 +59,7 @@ const InnerWrapper = styled.styled.div `
     transform: rotate(45deg);
     box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
   }
-`;
-const Left = styled.styled.div `
+`,Left=styled.styled.div`
   display: flex;
   flex-flow: column nowrap;
   gap: 24px;
@@ -305,15 +86,13 @@ const Left = styled.styled.div `
       }
     }
   }
-`;
-const MonthBar = styled.styled.div `
+`,MonthBar=styled.styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 32px;
   user-select: none;
-`;
-const Arrow = styled.styled.button `
+`,Arrow=styled.styled.button`
   appearance: none;
   border: none;
   outline: none;
@@ -332,25 +111,21 @@ const Arrow = styled.styled.button `
       fill: #ffffff;
     }
   }
-`;
-const WeekdayWrapper = styled.styled.div `
+`,WeekdayWrapper=styled.styled.div`
   display: flex;
   gap: 32px;
   user-select: none;
-`;
-const Calendar = styled.styled.div `
+`,Calendar=styled.styled.div`
   display: flex;
   flex-direction: column;
   gap: 32px;
   margin: 32px 0px;
   user-select: none;
-`;
-const Week = styled.styled.div `
+`,Week=styled.styled.div`
   display: flex;
   gap: 32px;
   border-radius: 24px;
-`;
-const Day = styled.styled.button `
+`,Day=styled.styled.button`
   outline: none;
   border: none;
   background: transparent;
@@ -519,11 +294,8 @@ const Day = styled.styled.button `
       }
     }
   }
-`;
-const BottomWrapper = styled.styled.div `
+`,BottomWrapper=styled.styled.div`
   display: flex;
   justify-content: flex-end;
   gap: 18px;
-`;
-
-exports.DatePicker = DatePicker;
+`;exports.DatePicker=DatePicker;