@soul-refiner/design-system 2.5.0-alpha.3 → 2.5.0-alpha.5

package/dist/src/icons/time/calendar_plus.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Icon } from '../../components/iconography/icon/icon';
+export const CalendarPlus = (props) => {
+    return (React.createElement(Icon, { ...props },
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.00065 4.00004H5.33398V3.33337H10.6673V4.00004H12.0007V3.33337H13.334V5.33337H2.66732V3.33337H4.00065V4.00004ZM2.66732 6.66671V13.3334H13.334V6.66671H2.66732ZM5.33398 2.00004H10.6673V1.33337H12.0007V2.00004H13.334C14.0704 2.00004 14.6673 2.59699 14.6673 3.33337V13.3334C14.6673 14.0698 14.0704 14.6667 13.334 14.6667H2.66732C1.93094 14.6667 1.33398 14.0698 1.33398 13.3334V3.33337C1.33398 2.59699 1.93094 2.00004 2.66732 2.00004H4.00065V1.33337H5.33398V2.00004ZM5.33398 10.6667V9.33337H7.33398V7.33337H8.66732V9.33337H10.6673V10.6667H8.66732V12.6667H7.33398V10.6667H5.33398Z" })));
+};

package/dist/src/icons/time/calendar_scroll.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Icon } from '../../components/iconography/icon/icon';
+export const CalendarScroll = (props) => {
+    return (React.createElement(Icon, { ...props },
+        React.createElement("path", { d: "M6.35937 11.0666L8.00097 12.7086L9.64257 11.0666L8.95097 10.3834L8.00097 11.3334L7.05097 10.3834L6.35937 11.0666Z" }),
+        React.createElement("path", { d: "M6.35937 8.93347L7.05097 9.61667L8.00097 8.66667L8.95097 9.61667L9.64257 8.93347L8.00097 7.29187L6.35937 8.93347Z" }),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.6673 2.00004H5.33398V1.33337H4.00065V2.00004H2.66732C1.93094 2.00004 1.33398 2.59699 1.33398 3.33337V13.3334C1.33398 14.0698 1.93094 14.6667 2.66732 14.6667H13.334C14.0704 14.6667 14.6673 14.0698 14.6673 13.3334V3.33337C14.6673 2.59699 14.0704 2.00004 13.334 2.00004H12.0007V1.33337H10.6673V2.00004ZM5.33398 4.00004H4.00065V3.33337H2.66732V5.33337H13.334V3.33337H12.0007V4.00004H10.6673V3.33337H5.33398V4.00004ZM2.66732 13.3334V6.66671H13.334V13.3334H2.66732Z" })));
+};

package/dist/src/icons/time/clock.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Icon } from '../../components/iconography/icon/icon';
+export const Clock = (props) => {
+    return (React.createElement(Icon, { ...props },
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.99935 15.3333C3.94926 15.3333 0.666016 12.05 0.666016 7.99996C0.666016 3.94987 3.94926 0.666626 7.99935 0.666626C12.0494 0.666626 15.3327 3.94987 15.3327 7.99996C15.3327 12.05 12.0494 15.3333 7.99935 15.3333ZM7.99935 14C11.3131 14 13.9993 11.3137 13.9993 7.99996C13.9993 4.68625 11.3131 1.99996 7.99935 1.99996C4.68564 1.99996 1.99935 4.68625 1.99935 7.99996C1.99935 11.3137 4.68564 14 7.99935 14ZM11.3327 7.33329H8.66602V3.99996H7.33268V8.66663H11.3327V7.33329Z" })));
+};

package/dist/src/icons/time/clock_history.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Icon } from '../../components/iconography/icon/icon';
+export const ClockHistory = (props) => {
+    return (React.createElement(Icon, { ...props },
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.33268 3.99996H3.40874C4.69579 2.52754 6.10549 1.99996 7.99935 1.99996C11.3131 1.99996 13.9993 4.68625 13.9993 7.99996C13.9993 11.3137 11.3131 14 7.99935 14C4.68564 14 1.99935 11.3137 1.99935 7.99996H0.666016C0.666016 12.05 3.94926 15.3333 7.99935 15.3333C12.0494 15.3333 15.3327 12.05 15.3327 7.99996C15.3327 3.94987 12.0494 0.666626 7.99935 0.666626C5.8571 0.666626 4.1574 1.27366 2.66602 2.83759V1.32743H1.33268V5.33329H5.33268V3.99996ZM11.3327 7.33329H8.66602V3.99996H7.33268V8.66663H11.3327V7.33329Z" })));
+};

package/dist/src/icons/time/index.js

@@ -0,0 +1,19 @@
+export { Alarm } from './alarm';
+export { AlarmCheckmark } from './alarm_checkmark';
+export { AlarmMinus } from './alarm_minus';
+export { AlarmPlus } from './alarm_plus';
+export { AlarmSlash } from './alarm_slash';
+export { AlarmSnooze } from './alarm_snooze';
+export { Calendar } from './calendar';
+export { CalendarAdd } from './calendar_add';
+export { CalendarCheckmark } from './calendar_checkmark';
+export { CalendarClose } from './calendar_close';
+export { CalendarDates } from './calendar_dates';
+export { CalendarMinus } from './calendar_minus';
+export { CalendarPlus } from './calendar_plus';
+export { CalendarScroll } from './calendar_scroll';
+export { Clock } from './clock';
+export { ClockHistory } from './clock_history';
+export { Stopwatch } from './stopwatch';
+export { Timer } from './timer';
+export { Watch } from './watch';

package/dist/src/icons/time/stopwatch.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Icon } from '../../components/iconography/icon/icon';
+export const Stopwatch = (props) => {
+    return (React.createElement(Icon, { ...props },
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.33333 2.70325V1.99996H6.66667V0.666626H9.33333V1.99996H8.66667V2.70325C9.82367 2.83115 10.8815 3.28802 11.7446 3.97827L12.8609 2.85706L13.8058 3.7978L12.6875 4.92098C13.5089 5.9475 14 7.24971 14 8.66663C14 11.9803 11.3137 14.6666 8 14.6666C4.68629 14.6666 2 11.9803 2 8.66663C2 5.57826 4.33337 3.03487 7.33333 2.70325ZM8 13.3333C10.5773 13.3333 12.6667 11.244 12.6667 8.66663C12.6667 6.0893 10.5773 3.99996 8 3.99996C5.42267 3.99996 3.33333 6.0893 3.33333 8.66663C3.33333 11.244 5.42267 13.3333 8 13.3333ZM8.66667 9.33329V5.33329H7.33333V9.33329H8.66667Z" })));
+};

package/dist/src/icons/time/timer.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Icon } from '../../components/iconography/icon/icon';
+export const Timer = (props) => {
+    return (React.createElement(Icon, { ...props },
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.66602 4.66663V2.03658C11.666 2.36821 13.9993 4.91159 13.9993 7.99996C13.9993 11.3137 11.3131 14 7.99935 14C4.68564 14 1.99935 11.3137 1.99935 7.99996C1.99935 6.38247 2.64146 4.8684 3.76468 3.74936L2.82363 2.8048C1.45178 4.17155 0.666016 6.02434 0.666016 7.99996C0.666016 12.05 3.94926 15.3333 7.99935 15.3333C12.0494 15.3333 15.3327 12.05 15.3327 7.99996C15.3327 3.94987 12.0494 0.666626 7.99935 0.666626H7.33268V4.66663H8.66602ZM7.99935 6.66663C7.87991 6.66663 7.76414 6.68233 7.65399 6.71179L5.13742 4.19522L4.19461 5.13803L6.71118 7.6546C6.68172 7.76475 6.66602 7.88052 6.66602 7.99996C6.66602 8.73634 7.26297 9.33329 7.99935 9.33329C8.73573 9.33329 9.33268 8.73634 9.33268 7.99996C9.33268 7.26358 8.73573 6.66663 7.99935 6.66663Z" })));
+};

package/dist/src/icons/time/watch.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Icon } from '../../components/iconography/icon/icon';
+export const Watch = (props) => {
+    return (React.createElement(Icon, { ...props },
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.99935 0.666626H5.99935C5.7017 0.666626 5.4401 0.863944 5.35833 1.15015L4.56779 3.91705C3.40496 4.89539 2.66602 6.36138 2.66602 7.99996C2.66602 9.63854 3.40496 11.1045 4.56779 12.0829L5.35833 14.8498C5.4401 15.136 5.7017 15.3333 5.99935 15.3333H9.99935C10.297 15.3333 10.5586 15.136 10.6404 14.8498L11.4309 12.0829C12.4335 11.2393 13.121 10.0333 13.2914 8.66663H13.9993V7.33329H13.2914C13.121 5.96665 12.4335 4.76059 11.4309 3.91705L10.6404 1.15015C10.5586 0.863944 10.297 0.666626 9.99935 0.666626ZM7.99935 2.66663C8.62126 2.66663 9.21831 2.77307 9.77328 2.96874L9.49648 1.99996H6.50222L6.22542 2.96874C6.78038 2.77307 7.37744 2.66663 7.99935 2.66663ZM6.50222 14L6.22542 13.0312C6.78038 13.2268 7.37744 13.3333 7.99935 13.3333C8.62126 13.3333 9.21831 13.2268 9.77328 13.0312L9.49648 14H6.50222ZM11.9993 7.99996C11.9993 10.2091 10.2085 12 7.99935 12C5.79021 12 3.99935 10.2091 3.99935 7.99996C3.99935 5.79082 5.79021 3.99996 7.99935 3.99996C10.2085 3.99996 11.9993 5.79082 11.9993 7.99996ZM8.66602 7.33329H9.99935V8.66663H7.33268V5.33329H8.66602V7.33329Z" })));
+};

package/dist/src/index.js

@@ -0,0 +1,6 @@
+import './styles/globals.css';
+export * from './components';
+import * as Icons_1 from './icons';
+export { Icons_1 as Icons };
+import * as emoji from './emoji/emojis.json';
+export { emoji };

package/dist/src/types/attributes.js

@@ -0,0 +1 @@
+export {};

package/dist/src/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/src/utils/date.d.ts

@@ -1,5 +1,5 @@
 export declare const zeroPad: (value: number, length: number) => string;
-export declare const getMonthDays: (month?: number, year?: number) => 29 | 28 | 30 | 31;
+export declare const getMonthDays: (month?: number, year?: number) => 28 | 31 | 29 | 30;
 export declare const getMonthFirstDay: (month?: number, year?: number) => number;
 export declare const isDate: (date: Date) => boolean;
 export declare const isSameMonth: (date: Date, basedate?: Date) => boolean;

package/dist/src/utils/date.js

@@ -0,0 +1,100 @@
+import { THIS_MONTH } from '../common/date';
+import { THIS_YEAR } from '../common/date';
+import { CALENDAR_WEEKS } from '../common/date';
+export const zeroPad = (value, length) => {
+    return `${value}`.padStart(length, '0');
+};
+export const getMonthDays = (month = THIS_MONTH, year = THIS_YEAR) => {
+    const MONTHS_WITH_30 = [4, 6, 9, 11];
+    const leapYear = year % 4 === 0;
+    return month === 2
+        ? leapYear
+            ? 29
+            : 28
+        : MONTHS_WITH_30.includes(month)
+            ? 30
+            : 31;
+};
+export const getMonthFirstDay = (month = THIS_MONTH, year = THIS_YEAR) => {
+    return +new Date(`${year}-${zeroPad(month, 2)}-01`).getDay() + 1;
+};
+export const isDate = (date) => {
+    const isDate = Object.prototype.toString.call(date) === '[object Date]';
+    const isValidDate = date && !Number.isNaN(date.valueOf());
+    return isDate && isValidDate;
+};
+export const isSameMonth = (date, basedate = new Date()) => {
+    if (!(isDate(date) && isDate(basedate)))
+        return false;
+    const basedateMonth = +basedate.getMonth() + 1;
+    const basedateYear = basedate.getFullYear();
+    const dateMonth = +date.getMonth() + 1;
+    const dateYear = date.getFullYear();
+    return +basedateMonth === +dateMonth && +basedateYear === +dateYear;
+};
+export const isSameDay = (date, basedate = new Date()) => {
+    if (!(isDate(date) && isDate(basedate)))
+        return false;
+    const basedateDate = basedate.getDate();
+    const basedateMonth = +basedate.getMonth() + 1;
+    const basedateYear = basedate.getFullYear();
+    const dateDate = date.getDate();
+    const dateMonth = +date.getMonth() + 1;
+    const dateYear = date.getFullYear();
+    return (+basedateDate === +dateDate &&
+        +basedateMonth === +dateMonth &&
+        +basedateYear === +dateYear);
+};
+export const getDateISO = (date = new Date()) => {
+    if (!isDate(date))
+        return null;
+    return [
+        date.getFullYear(),
+        zeroPad(+date.getMonth() + 1, 2),
+        zeroPad(+date.getDate(), 2),
+    ].join('-');
+};
+export const getPreviousMonth = (month, year) => {
+    const prevMonth = month > 1 ? month - 1 : 12;
+    const prevMonthYear = month > 1 ? year : year - 1;
+    return { month: prevMonth, year: prevMonthYear };
+};
+export const getNextMonth = (month, year) => {
+    const nextMonth = month < 12 ? month + 1 : 1;
+    const nextMonthYear = month < 12 ? year : year + 1;
+    return { month: nextMonth, year: nextMonthYear };
+};
+export const buildCalendar = (month = THIS_MONTH, year = THIS_YEAR) => {
+    const monthDays = getMonthDays(month, year);
+    const monthFirstDay = getMonthFirstDay(month, year);
+    const daysFromPrevMonth = monthFirstDay - 1;
+    const daysFromNextMonth = CALENDAR_WEEKS * 7 - (daysFromPrevMonth + monthDays);
+    const { month: prevMonth, year: prevMonthYear } = getPreviousMonth(month, year);
+    const { month: nextMonth, year: nextMonthYear } = getNextMonth(month, year);
+    const prevMonthDays = getMonthDays(prevMonth, prevMonthYear);
+    const prevMonthDates = [...new Array(daysFromPrevMonth)].map((n, index) => {
+        const day = index + 1 + (prevMonthDays - daysFromPrevMonth);
+        return [prevMonthYear, zeroPad(prevMonth, 2), zeroPad(day, 2)];
+    });
+    const thisMonthDates = [...new Array(monthDays)].map((n, index) => {
+        const day = index + 1;
+        return [year, zeroPad(month, 2), zeroPad(day, 2)];
+    });
+    const nextMonthDates = [...new Array(daysFromNextMonth)].map((n, index) => {
+        const day = index + 1;
+        return [nextMonthYear, zeroPad(nextMonth, 2), zeroPad(day, 2)];
+    });
+    return calendarIntoWeeks([
+        ...prevMonthDates,
+        ...thisMonthDates,
+        ...nextMonthDates,
+    ]);
+};
+export const calendarIntoWeeks = (calendar) => {
+    const res = [];
+    while (calendar.length > 0) {
+        const chunk = calendar.splice(0, 7);
+        res.push(chunk);
+    }
+    return res;
+};

package/dist/src/utils/file.js

@@ -0,0 +1,22 @@
+const sizeMap = {
+    kb: 1024,
+    mb: 1024 * 1024,
+    gb: 1024 * 1024 * 1024,
+    tb: 1024 * 1024 * 1024 * 1024, // Supporting terabytes
+};
+export function toBytes(size) {
+    // Normalize input to handle various cases and spacing: "1.5mb", "2 MB", etc.
+    const normalizedSize = size.toLowerCase().replace(/\s+/g, ''); // Remove all spaces and convert to lower case
+    // Extract numeric and unit parts, allowing for floating point numbers
+    const match = new RegExp(/^(\d+(\.\d+)?)(kb|mb|gb|tb)$/).exec(normalizedSize);
+    if (!match) {
+        throw new Error("Invalid size format. Please ensure the format is like '1.5 mb', '2GB', etc.");
+    }
+    const [, value, , unit] = match;
+    const numericValue = parseFloat(value);
+    const byteSize = sizeMap[unit];
+    if (!byteSize) {
+        throw new Error(`Unknown unit of size. Supported units are: ${Object.keys(sizeMap).join(', ')}.`);
+    }
+    return numericValue * byteSize;
+}

package/dist/src/utils/function.js

@@ -0,0 +1 @@
+export const callAll = (...fns) => (...args) => fns.forEach((fn) => fn && fn(...args));

package/dist/src/utils/index.js

@@ -0,0 +1,4 @@
+export { buildCalendar, calendarIntoWeeks, getDateISO, getMonthDays, getMonthFirstDay, getNextMonth, getPreviousMonth, isDate, isSameDay, isSameMonth, zeroPad, } from './date';
+export { toBytes } from './file';
+export { callAll } from './function';
+export { secondsToTimestamp } from './time';

package/dist/src/utils/time.js

@@ -0,0 +1,22 @@
+export const secondsToTimestamp = (seconds) => {
+    if (seconds > 3600) {
+        const hours = Math.floor(seconds / 3600);
+        const minutes = Math.floor((seconds - hours * 3600) / 60);
+        const secs = seconds % 60;
+        const hoursStr = hours < 10 ? `0${hours}` : `${hours}`;
+        const minStr = minutes < 10 ? `0${minutes}` : `${minutes}`;
+        const secStr = secs < 10 ? `0${secs}` : `${secs}`;
+        return `${hoursStr}:${minStr}:${secStr}`;
+    }
+    else if (seconds > 60) {
+        const minutes = Math.floor(seconds / 60);
+        const secs = seconds % 60;
+        const minStr = minutes < 10 ? `0${minutes}` : `${minutes}`;
+        const secStr = secs < 10 ? `0${secs}` : `${secs}`;
+        return `${minStr}:${secStr}`;
+    }
+    else {
+        const secStr = seconds < 10 ? `0${seconds}` : `${seconds}`;
+        return `00:${secStr}`;
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "2.5.0-alpha.3",
+  "version": "2.5.0-alpha.5",
   "main": "dist/index.js",
   "types": "dist/src/index.d.ts",
   "license": "MIT",

package/dist/common/colors.js

@@ -1 +0,0 @@
-"use strict";const COLORS=["inherit","page-bg","white","primary-blue-0","primary-blue-1","primary-blue-2","primary-blue-3","primary-blue-4","grey-0","grey-1","grey-2","grey-3","grey-4","grey-5","grey-6","grey-7","grey-8","grey-9","grey-10","red-0","red-1","red-2","red-3","red-4","red-5","red-6","red-7","red-8","red-9","red-10","green-0","green-1","green-2","green-3","green-4","green-5","green-6","green-7","green-8","green-9","green-10","blue-0","blue-1","blue-2","blue-3","blue-4","blue-5","blue-6","blue-7","blue-8","blue-9","blue-10","turquoise-0","turquoise-1","turquoise-2","turquoise-3","turquoise-4","turquoise-5","turquoise-6","turquoise-7","turquoise-8","turquoise-9","turquoise-10","purple-0","purple-1","purple-2","purple-3","purple-4","purple-5","purple-6","purple-7","purple-8","purple-9","purple-10","yellow-0","yellow-1","yellow-2","yellow-3","yellow-4","yellow-5","yellow-6","yellow-7","yellow-8","yellow-9","yellow-10","orange-0","orange-1","orange-2","orange-3","orange-4","orange-5","orange-6","orange-7","orange-8","orange-9","orange-10","hue-pink-1","hue-pink-2","hue-pink-3","hue-purple-1","hue-purple-2","hue-purple-3","hue-ocean-1","hue-ocean-2","hue-ocean-3","hue-mint-1","hue-mint-2","hue-mint-3","hue-blue-1","hue-blue-2","hue-blue-3","hue-orange-1","hue-orange-2","hue-orange-3","special-yellow-1","special-yellow-2","special-orange-1","special-orange-2","special-red-1","special-red-2","special-pink-1","special-pink-2","special-purple-1","special-purple-2","special-blue-1","special-blue-2","special-turquoise-1","special-turquoise-2","special-green-1","special-green-2","special-grape-1","special-grape-2"],colorReference=Object.fromEntries(COLORS.map(e=>[e,`var(--color-${e})`]));exports.COLORS=COLORS,exports.colorReference=colorReference;

package/dist/common/date.js

@@ -1 +0,0 @@
-"use strict";const THIS_YEAR=+(new Date).getFullYear(),THIS_MONTH=+(new Date).getMonth()+1,CALENDAR_WEEKS=(exports.WEEKDAYS=void 0,!function(E){E.MON="Mon",E.TUE="Tue",E.WED="Wed",E.THU="Thu",E.FRI="Fri",E.SAT="Sat",E.SUN="Sun"}(exports.WEEKDAYS||(exports.WEEKDAYS={})),exports.MONTHS=void 0,!function(E){E.JAN="Jan",E.FEB="Feb",E.MAR="Mar",E.APR="Apr",E.MAY="May",E.JUN="Jun",E.JUL="Jul",E.AUG="Aug",E.SEP="Sep",E.OCT="Oct",E.NOV="Nov",E.DEC="Dec"}(exports.MONTHS||(exports.MONTHS={})),6);exports.CALENDAR_WEEKS=CALENDAR_WEEKS,exports.THIS_MONTH=THIS_MONTH,exports.THIS_YEAR=THIS_YEAR;

package/dist/common/styles.js

@@ -1,34 +0,0 @@
-"use strict";var styled=require("styled-components"),colors=require("./colors.js");exports.Styles=void 0,function(e){e.backgroundColor=styled.css`
-    background-color: ${({$backgroundColor:e})=>e?colors.colorReference[e]:"var(--page-bg)"};
-  `,e.borderRadius=styled.css`
-    border-radius: ${({$borderRadius:e})=>e?`var(--${e})`:""};
-  `,e.color=styled.css`
-    color: ${({$color:e})=>e?colors.colorReference[e]:"var(--color-grey-3)"};
-  `,e.elevation=styled.css`
-    box-shadow: ${({$elevation:e})=>e?`var(--elevation-${e})`:"none"};
-  `,e.flex=styled.css`
-    align-items: ${({$align:e})=>e??"normal"};
-    gap: ${({$gap:e})=>e&&"number"==typeof e?e+"px":e&&"string"==typeof e?`var(--${e})`:"0px"};
-    flex: ${({$flex:e})=>e??"none"};
-    flex-flow: ${({$flow:e})=>e??"row"};
-    flex-direction: ${({$dir:e})=>e??"row"};
-    justify-content: ${({$justify:e})=>e??"normal"};
-  `,e.margin=styled.css`
-    margin: ${({$margin:e})=>e&&"number"==typeof e?e+"px":e&&"string"==typeof e?`var(--${e})`:"0px"};
-  `,e.padding=styled.css`
-    padding: ${({$padding:e})=>e&&"number"==typeof e?e+"px;":e&&"string"==typeof e&&e.includes("px")?e:e&&"string"==typeof e?`var(--${e});`:"0px"};
-  `,e.styleable=styled.css`
-    ${({sx:e})=>e||""}
-  `,e.textClamp=styled.css`
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    line-clamp: ${({$textClampLines:e})=>e??1};
-    -webkit-line-clamp: ${({$textClampLines:e})=>e??1};
-    -webkit-box-orient: vertical;
-  `,e.typography=styled.css`
-    font-style: ${({$italic:e})=>e?"italic":"normal"};
-    text-decoration: ${({$strikethrough:e,$underline:o})=>e?"line-through":o?"underline":"none"};
-  `,e.weight=styled.css`
-    font-weight: ${({$bold:e,$semiBold:o,$mediumBold:s})=>e?700:o?600:s?500:400};
-  `}(exports.Styles||(exports.Styles={}));

package/dist/components/actions/button/button.js

@@ -1,239 +0,0 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),styles=require("../../../common/styles.js"),paragraph=require("../../atoms/typography/paragraph.js"),box=require("../../atoms/box/box.js"),chevron_down=require("../../../icons/arrow/chevron_down.js"),chevron_up=require("../../../icons/arrow/chevron_up.js");function _interopDefaultCompat(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var React__default=_interopDefaultCompat(React),styled__default=_interopDefaultCompat(styled);const LG_ICON_SIZE=20,LG_ICON_SIZE_WO_CHILDREN=24,LG_FONT_SIZE=16,LG_PADDING="11px 19px",LG_PADDING_WO_CHILDREN="11px",SM_ICON_SIZE=16,SM_FONT_SIZE=14,SM_PADDING="5px 15px",SM_PADDING_WO_CHILDREN="7px",Button=({as:r="button",children:o,disabled:e,fluid:l=!1,href:a,icon:t,isDropdownOpen:d,roundness:s="large",size:c="large",sx:i,type:n="primary",showChevron:p=!0,customDropdownIcon:u,...b})=>{n=Components()[n],t=React__default.default.Children.map(t,r=>{if(React__default.default.isValidElement(r))return{...r,props:{...r.props??{},size:"large"!==c||o?"large"===c?LG_ICON_SIZE:SM_ICON_SIZE:LG_ICON_SIZE_WO_CHILDREN}}})?.[0];let y=void 0;p&&(!0===d?y=u?React__default.default.createElement(u,{sx:"margin-left:auto;",size:"large"===c?LG_ICON_SIZE:SM_ICON_SIZE}):React__default.default.createElement(chevron_up.ChevronUp,{sx:"margin-left:auto;",size:"large"===c?LG_ICON_SIZE:SM_ICON_SIZE}):!1===d&&(y=u?React__default.default.createElement(u,{sx:"margin-left:auto;",size:"large"===c?LG_ICON_SIZE:SM_ICON_SIZE}):React__default.default.createElement(chevron_down.ChevronDown,{sx:"margin-left:auto;",size:"large"===c?LG_ICON_SIZE:SM_ICON_SIZE})));p=o?"large"===c?LG_PADDING:SM_PADDING:"large"===c?LG_PADDING_WO_CHILDREN:SM_PADDING_WO_CHILDREN;return React__default.default.createElement(n,{as:r,disabled:e,href:a,$align:"center",$display:"flex",$fluid:l,$gap:"large"===c?12:8,$hasChildren:!!o,$justify:"center",$padding:p,$roundness:s,$size:c,$sx:i,...b},t,o&&React__default.default.createElement(paragraph.P,{as:"span",$mediumBold:!0,$fontSize:"large"===c?LG_FONT_SIZE:SM_FONT_SIZE,$color:"inherit"},o),!!o&&y)},Components=()=>({primary:Primary,secondary:Secondary,outlined:Outlined,danger:Danger,raised:Raised,special:Special,text:Text,dropdown:Dropdown}),base=styled.css`
-  font-family: var(--font-inter);
-  display: flex;
-  border-radius: ${({$roundness:r})=>"large"===r?"32px":"medium-small"===r?"8px":"small"===r?"4px":"0px"};
-  cursor: pointer;
-  user-select: none;
-  box-sizing: border-box;
-  outline: none;
-  ${({$fluid:r})=>r?`flex-basis: max-content;
-    flex: 1 !important;
-    width: max-content`:""}
-
-  svg {
-    fill: currentColor;
-  }
-
-  &:disabled {
-    background-color: var(--color-grey-9) !important;
-    border: 1px solid var(--color-grey-8) !important;
-    color: var(--color-grey-7) !important;
-    cursor: unset !important;
-  }
-`,Primary=styled__default.default(box.Box)`
-  background-color: var(--color-primary-blue-2);
-  color: var(--color-white);
-  border: 1px solid var(--color-primary-blue-2);
-
-  &:hover {
-    border: 1px solid var(--color-primary-blue-1);
-    background-color: var(--color-primary-blue-1);
-  }
-
-  &:focus {
-    border: 1px solid var(--color-primary-blue-3);
-    background-color: var(--color-primary-blue-1);
-  }
-
-  &:active {
-    border: 1px solid var(--color-primary-blue-0);
-    background-color: var(--color-primary-blue-0);
-  }
-
-  ${base}
-  ${styles.Styles.flex}
-  ${styles.Styles.padding}
-
-  ${({$sx:r})=>r||""}
-`,Secondary=styled__default.default(box.Box)`
-  background-color: var(--color-primary-blue-4);
-  color: var(--color-primary-blue-2);
-  border: 1px solid var(--color-primary-blue-4);
-
-  &:hover {
-    color: var(--color-primary-blue-1);
-    border: 1px solid var(--color-primary-blue-1);
-  }
-
-  &:focus {
-    border: 1px solid var(--color-primary-blue-2);
-    color: var(--color-primary-blue-1);
-  }
-
-  &:active {
-    border: 1px solid var(--color-primary-blue-0);
-    color: var(--color-primary-blue-0);
-  }
-
-  ${base}
-  ${styles.Styles.flex}
-  ${styles.Styles.padding}
-
-  ${({$sx:r})=>r||""}
-`,Outlined=styled__default.default(box.Box)`
-  background-color: var(--color-white);
-  color: var(--color-grey-3);
-  border: 1px solid var(--color-grey-8);
-
-  &.icon {
-    border: 1px solid var(--color-white);
-  }
-
-  &:hover {
-    background-color: var(--color-grey-10);
-    border: 1px solid var(--color-grey-8);
-
-    &.icon {
-      border: 1px solid var(--color-grey-8);
-    }
-  }
-
-  &:focus {
-    background-color: var(--color-grey-10);
-    border: 1px solid var(--color-primary-blue-3);
-
-    &.icon {
-      border: 1px solid var(--color-grey-8);
-    }
-  }
-
-  &:active {
-    background-color: var(--color-grey-9);
-    border: 1px solid var(--color-grey-8);
-  }
-
-  ${base}
-  ${styles.Styles.flex}
-  ${styles.Styles.padding}
-
-  ${({$sx:r})=>r||""}
-`,Danger=styled__default.default(box.Box)`
-  background-color: var(--color-red-4);
-  color: var(--color-white);
-  border: 1px solid var(--color-red-4);
-
-  &:hover {
-    border: 1px solid var(--color-red-3);
-    background-color: var(--color-red-3);
-  }
-
-  &:focus {
-    border: 1px solid var(--color-primary-blue-2);
-    background-color: var(--color-red-3);
-  }
-
-  &:active {
-    border: 1px solid var(--color-red-2);
-    background-color: var(--color-red-2);
-  }
-
-  ${base}
-  ${styles.Styles.flex}
-  ${styles.Styles.padding}
-
-  ${({$sx:r})=>r||""}
-`,Text=styled__default.default(box.Box)`
-  background-color: transparent;
-  border-color: transparent !important;
-  border: 1px solid transparent;
-  color: var(--color-primary-blue-2);
-
-  &:hover {
-    color: var(--color-primary-blue-1);
-  }
-
-  &:focus {
-    color: var(--color-primary-blue-1);
-    border: 1px solid var(--color-primary-blue-2);
-  }
-
-  &:active {
-    color: var(--color-primary-blue-0);
-  }
-
-  &:disabled {
-    background-color: transparent !important;
-    border: 1px solid transparent !important;
-  }
-
-  ${base}
-  ${styles.Styles.flex}
-  ${styles.Styles.padding}
-  ${({$sx:r})=>r||""}
-`,Raised=styled__default.default(box.Box)`
-  background-color: var(--color-white);
-  color: var(--color-grey-3);
-  border: 1px solid var(--color-white);
-  box-shadow: var(--elevation-1);
-
-  &:hover {
-    background-color: var(--color-grey-9);
-    border: 1px solid var(--color-grey-9);
-  }
-
-  &:active {
-    background-color: var(--color-grey-8);
-    border: 1px solid var(--color-grey-8);
-  }
-
-  &:disabled {
-    border: 1px solid var(--color-grey-9) !important;
-  }
-
-  ${base}
-  ${styles.Styles.flex}
-  ${styles.Styles.padding}
-
-  ${({$sx:r})=>r||""}
-`,Special=styled__default.default(box.Box)`
-  background-color: transparent;
-  border: 1px solid transparent;
-  color: var(--color-primary-grey-3);
-
-  &:hover {
-    background-color: var(--color-grey-10);
-  }
-
-  &:focus-visible {
-    background-color: var(--color-grey-10);
-    border: 1px solid var(--color-primary-blue-2);
-  }
-
-  &:active {
-    background-color: var(--color-grey-9);
-    border: 1px solid var(--color-grey-9);
-  }
-
-  &:disabled {
-    background-color: transparent !important;
-    border: 1px solid transparent !important;
-  }
-
-  ${base}
-  ${styles.Styles.flex}
-  ${styles.Styles.padding}
-
-  ${({$sx:r})=>r||""}
-`,Dropdown=styled__default.default(box.Box)`
-  width: 100%;
-  background-color: var(--color-blue-10);
-  color: var(--color-grey-3);
-  border: 1px solid var(--color-primary-blue-2);
-  justify-content: flex-start;
-  padding: 16px;
-  border: 0;
-
-  &:hover {
-    border: 0;
-    background-color: var(--color-blue-10);
-  }
-
-  ${base}
-  ${styles.Styles.flex}
-  ${styles.Styles.padding}
-
-  border-radius: 8px;
-
-  ${({$sx:r})=>r||""}
-`;exports.Button=Button;

package/dist/components/actions/dropdown/dropdown.js

@@ -1,81 +0,0 @@
-"use client";
-"use strict";var React=require("react"),styled=require("styled-components"),box=require("../../atoms/box/box.js"),checkbox=require("../../input/checkbox/checkbox.js"),paragraph=require("../../atoms/typography/paragraph.js");function _interopDefaultCompat(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var React__default=_interopDefaultCompat(React);const Dropdown=({checkbox:l,children:e,closeOnChange:a=!0,closeOnBlur:t=!0,defaultValue:o="",disabled:r=!1,hasArrow:n,maintainState:c=!0,multiple:d,offset:i=[0,16],onChange:u,open:p="right",options:s,sx:f,trigger:x,containerSx:_,additionalOptions:g,additionalOnChange:b,defaultAdditionalValue:h,useFullWidth:$=!1,...v})=>{const y=React__default.default.useId(),m=React__default.default.useRef(null);var k=React__default.default.useRef(null);const[R,C]=React__default.default.useState(!1),[w,E]=React__default.default.useState(()=>o||(d?[]:"")),[S,O]=React__default.default.useState(h||"");React__default.default.useEffect(()=>{r&&C(!1)},[r]);h=()=>{r||C(e=>!e)};const D=d?e=>{e.stopPropagation();const t=e.target.getAttribute("data-value")??"";Array.isArray(w)&&w.includes(t)?E(e=>e.filter(e=>e!==t)):E(e=>[t,...e]),a&&C(!1),u&&u(e)}:e=>{e.stopPropagation();var t=e.target.getAttribute("data-value")??"";w!==t?E(t):E(""),a&&C(!1),u&&u(e)},A=e=>{e.stopPropagation();e=e.target.getAttribute("data-value")??"";S!==e?O(e):O(""),b&&b(e)},W=e=>c&&(d?w.includes(e):e===w);let B=null;return e&&(B=React__default.default.Children.map(e,e=>{if(React__default.default.isValidElement(e)){const{onClick:t,...a}=e.props;return e=a,React__default.default.createElement(Option,{key:e.value,checkbox:!!l,onClick:D,selected:W(e.value),...e})}return null})),s&&(B=s.map((e,t)=>"string"==typeof e&&"break"===e?React__default.default.createElement(Spacer,{key:y+"-spacer-"+t}):React__default.default.createElement(Option,{key:e.value,checkbox:!!l,onClick:D,selected:W(e.value),...e}))),React__default.default.createElement(Wrapper,{$sx:f,tabIndex:0,ref:m,onBlurCapture:e=>{t&&m?.current&&!m?.current?.contains(e.relatedTarget)&&C(!1)},...v},React__default.default.cloneElement(x,"string"==typeof x.type||"Button"!==x.type?.displayName&&"Button"!==x.type?.name?{onClick:h}:{isDropdownOpen:R,onClick:h}),R&&React__default.default.createElement(Container,{$hasArrow:n,$offset:i,$openDirection:p,ref:k,$sx:_,$useFullWidth:$},React__default.default.createElement("div",{style:{display:"flex"}},React__default.default.createElement("div",{style:{display:"flex",flexDirection:"column",width:"100%"}},B),!!g?.length&&React__default.default.createElement("div",{style:{display:"flex",flexDirection:"column"}},g.map(e=>React__default.default.createElement(Option,{key:e.value,onClick:A,selected:S===e.value,label:e.label,value:e.value}))))))},Wrapper=styled.styled.div`
-  position: relative;
-  display: block;
-  outline: none;
-  ${({$sx:e})=>e||""}
-`,Container=styled.styled.div`
-  z-index: 1;
-  background-color: var(--color-white);
-  position: absolute;
-  ${({$useFullWidth:e})=>e?"width: 100%;":"width: max-content;"}
-  z-index: 100;
-  outline: none;
-  cursor: pointer;
-  box-shadow: var(--elevation-2);
-  border-radius: 8px;
-  overflow: auto;
-  & > div:first-of-type {
-    border-radius: 8px 8px 0px 0px;
-  }
-
-  & > div:last-of-type {
-    border-radius: 0px 0px 8px 8px;
-  }
-
-  ${({$sx:e})=>e||""}
-
-  ${({$openDirection:e})=>"left"===e?"right: 100%;":""}
-
-  ${({$hasArrow:e,$offset:t})=>e?`
-    &:before {
-      content: '';
-      position: absolute;
-      width: 15px;
-      height: 15px;
-      transform: rotate(45deg) translate(${(t?.[0]||0)+8}px, ${(t?.[1]||0)-32}px);
-      background-color: var(--color-white);
-    }
-    `:""}
-  ${({$offset:e})=>e?`transform: translate(${e[0]}px, ${e[1]}px);`:""}
-`,Option=({checkbox:e,disabled:t,icon:a,label:l,onClick:o,selected:r,sublabel:n,sx:c,value:d,color:i})=>React__default.default.createElement(OptionWrapper,{"data-value":d,onClick:t?void 0:o,$disabled:t,$hasCheckbox:!!e,$hasSublabel:!!n,$selected:r,$sx:c},e?React__default.default.createElement(checkbox.Checkbox,{selected:r}):a,React__default.default.createElement(box.Box,{$dir:"column",$display:"flex"},l&&React__default.default.createElement(paragraph.P,{$color:i||"grey-4",$fontSize:14,$lineHeight:20,$mediumBold:!0,$textClampLines:1},l),n&&React__default.default.createElement(paragraph.P,{$color:"grey-4",$fontSize:12,$lineHeight:16,$textClampLines:1},n))),OptionWrapper=(Option.displayName="Dropdown.Option",Dropdown.Option=Option,styled.styled.div`
-  position: relative;
-  z-index: 1;
-  padding: ${({$hasSublabel:e})=>e?10:12}px 16px;
-  user-select: none;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  & > * {
-    pointer-events: none;
-  }
-
-  ${({$disabled:e,$selected:t,$hasCheckbox:a})=>e?`cursor: initial;
-      color: var(--color-grey-7);
-      background-color: var(--color-grey-10);`:a?`&:hover {
-        background-color: var(--color-grey-10);
-      }`:t?`
-      background-color: var(--color-grey-9);
-      &:active {
-        background-color: var(--color-grey-8);
-      }`:`
-    &:hover {
-      background-color: var(--color-grey-10);
-    }
-
-    &:active {
-      background-color: var(--color-grey-8);
-    }
-    `}
-  ${({$sx:e})=>e||""}
-`),Spacer=({sx:e})=>React__default.default.createElement(SpacerWrapper,{$sx:e}),SpacerWrapper=(Spacer.displayName="Dropdown.Spacer",Dropdown.Spacer=Spacer,styled.styled.div`
-  width: 100%;
-  height: 1px;
-  background-color: var(--color-grey-8);
-
-  &:hover {
-    appearance: none;
-  }
-  ${({$sx:e})=>e||""}
-`);exports.Dropdown=Dropdown;