@addev-be/ui 0.16.4 → 0.16.7

package/dist/components/layout/Dropdown/index.js

@@ -74,12 +74,33 @@ var getDropdownStyle = function (dropdown) {
     return dropdownStyle;
 };
 var Dropdown = function (_a) {
-    var children = _a.children, onClose = _a.onClose, $backdropAlpha = _a.$backdropAlpha, props = __rest(_a, ["children", "onClose", "$backdropAlpha"]);
+    var children = _a.children, onClose = _a.onClose, _b = _a.usePortal, usePortal = _b === void 0 ? true : _b, props = __rest(_a, ["children", "onClose", "usePortal"]);
     var createPortal = (0, providers_1.usePortals)().createPortal;
+    var firstClick = (0, react_1.useRef)(true);
+    var containerRef = (0, react_1.useRef)(null);
     var style = (0, react_1.useMemo)(function () { return getDropdownStyle(props); }, [props]);
+    var onDocumentClick = (0, react_1.useCallback)(function (ev) {
+        if (firstClick.current) {
+            firstClick.current = false;
+            return;
+        }
+        if (containerRef.current &&
+            !containerRef.current.contains(ev.target)) {
+            return onClose === null || onClose === void 0 ? void 0 : onClose();
+        }
+    }, [onClose]);
+    (0, react_1.useEffect)(function () {
+        if (containerRef.current) {
+            document.addEventListener('click', onDocumentClick);
+            return function () {
+                document.removeEventListener('click', onDocumentClick);
+            };
+        }
+    }, [onDocumentClick]);
     var modalPortal = (0, react_1.useMemo)(function () {
-        return createPortal((0, jsx_runtime_1.jsx)(styles.DropdownBackdrop, { onClick: onClose, "$alpha": $backdropAlpha, children: (0, jsx_runtime_1.jsx)(styles.DropdownContainer, __assign({}, props, { style: style, children: children })) }));
-    }, [$backdropAlpha, children, createPortal, onClose, props, style]);
+        var content = ((0, jsx_runtime_1.jsx)(styles.DropdownContainer, __assign({ ref: containerRef }, props, { style: style, children: children })));
+        return usePortal ? createPortal(content) : content;
+    }, [children, createPortal, props, style, usePortal]);
     return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: modalPortal });
 };
 exports.Dropdown = Dropdown;

package/dist/components/layout/Grid/index.d.ts

@@ -0,0 +1,6 @@
+import { GridContainer, GridItemContainer } from './styles';
+type GridFC = typeof GridContainer & {
+    Item: typeof GridItemContainer;
+};
+export declare const Grid: GridFC;
+export {};

package/dist/components/layout/Grid/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Grid = void 0;
+var styles_1 = require("./styles");
+exports.Grid = styles_1.GridContainer;
+exports.Grid.Item = styles_1.GridItemContainer;

package/dist/components/layout/Grid/styles.d.ts

@@ -0,0 +1,14 @@
+type GridProps = {
+    columns?: number;
+};
+export declare const GridContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, GridProps>> & string;
+type GridItemProps = {
+    row?: number;
+    col?: number;
+    rowSpan?: number;
+    colSpan?: number;
+};
+export declare const GridItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, GridItemProps>, never>> & string;
+export {};

package/dist/components/layout/Grid/styles.js

@@ -0,0 +1,29 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridItemContainer = exports.GridContainer = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.GridContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: repeat(\n    ", ",\n    minmax(0, 1fr)\n  );\n  grid-template-rows: masonry;\n"], ["\n  display: grid;\n  grid-template-columns: repeat(\n    ", ",\n    minmax(0, 1fr)\n  );\n  grid-template-rows: masonry;\n"])), function (_a) {
+    var _b = _a.columns, columns = _b === void 0 ? 12 : _b;
+    return columns;
+});
+exports.GridItemContainer = styled_components_1.default.div.attrs(function (_a) {
+    var col = _a.col, colSpan = _a.colSpan, row = _a.row, rowSpan = _a.rowSpan;
+    return ({
+        style: {
+            gridColumn: [col, !!colSpan && "span ".concat(colSpan)]
+                .filter(Boolean)
+                .join(' / '),
+            gridRow: [row, !!rowSpan && "span ".concat(rowSpan)]
+                .filter(Boolean)
+                .join(' / '),
+        },
+    });
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+var templateObject_1, templateObject_2;

package/dist/components/layout/Masonry/index.d.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from 'react';
+import { MasonryContainerProps } from './styles';
+export declare const Masonry: FC<PropsWithChildren<MasonryContainerProps>>;

package/dist/components/layout/Masonry/index.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Masonry = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styles_1 = require("./styles");
+var Masonry = function (_a) {
+    var children = _a.children, _b = _a.columns, columns = _b === void 0 ? 3 : _b;
+    var childrenByColumn = (0, react_1.useMemo)(function () {
+        var arr = Array.from({ length: columns }, function () { return []; });
+        if (Array.isArray(children)) {
+            children.forEach(function (child, index) {
+                arr[index % columns].push(child);
+            });
+        }
+        return arr;
+    }, [children, columns]);
+    return ((0, jsx_runtime_1.jsx)(styles_1.MasonryContainer, { columns: columns, children: childrenByColumn.map(function (column, index) { return ((0, jsx_runtime_1.jsx)(styles_1.MasonryColumnContainer, { children: column }, index)); }) }));
+};
+exports.Masonry = Masonry;

package/dist/components/layout/Masonry/styles.d.ts

@@ -0,0 +1,5 @@
+export type MasonryContainerProps = {
+    columns?: number;
+};
+export declare const MasonryContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, MasonryContainerProps>> & string;
+export declare const MasonryColumnContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/layout/Masonry/styles.js

@@ -0,0 +1,17 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MasonryColumnContainer = exports.MasonryContainer = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.MasonryContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-gap: var(--space-2);\n  grid-template-columns: repeat(\n    ", ",\n    minmax(0, 1fr)\n  );\n"], ["\n  display: grid;\n  grid-gap: var(--space-2);\n  grid-template-columns: repeat(\n    ", ",\n    minmax(0, 1fr)\n  );\n"])), function (_a) {
+    var _b = _a.columns, columns = _b === void 0 ? 4 : _b;
+    return columns;
+});
+exports.MasonryColumnContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n"])));
+var templateObject_1, templateObject_2;

package/dist/components/layout/index.d.ts

@@ -1,3 +1,6 @@
+export * from './Columns';
 export * from './Dropdown';
-export * from './Modal';
+export * from './Grid';
 export * from './Loading';
+export * from './Masonry';
+export * from './Modal';

package/dist/components/layout/index.js

@@ -14,6 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Columns"), exports);
 __exportStar(require("./Dropdown"), exports);
-__exportStar(require("./Modal"), exports);
+__exportStar(require("./Grid"), exports);
 __exportStar(require("./Loading"), exports);
+__exportStar(require("./Masonry"), exports);
+__exportStar(require("./Modal"), exports);

package/dist/components/search/QuickSearchBar.js

@@ -51,6 +51,12 @@ var QuickSearchBar = function (_a) {
                 types: ['Customer', 'ScanGroup'],
                 searchTerm: debouncedTerm,
                 limit: 5,
+                conditions: [
+                    {
+                        field: 'DeletedAt',
+                        operator: 'isNull',
+                    },
+                ],
             }).then(function (response) {
                 setResults(response.data);
                 setDropdownVisible(true);

package/dist/components/ui/Avatar/index.d.ts

@@ -0,0 +1,10 @@
+import * as styles from './styles';
+import { FC, PropsWithChildren } from 'react';
+import { ThemeColorWithIntensity } from '../../../providers';
+type AvatarProps = PropsWithChildren<{
+    className?: string;
+    name?: string;
+    color?: ThemeColorWithIntensity;
+} & styles.AvatarContainerProps>;
+export declare const Avatar: FC<AvatarProps>;
+export {};

package/dist/components/ui/Avatar/index.js

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles = __importStar(require("./styles"));
+var react_1 = require("react");
+var hash_js_1 = require("hash.js");
+var getInitials = function (name) {
+    var matches = name.matchAll(/(?:^|\s+)([A-Z0-9])/g);
+    return Array.from(matches)
+        .slice(0, 2)
+        .map(function (m) { return m[1]; })
+        .join('');
+};
+var Avatar = function (_a) {
+    var children = _a.children, className = _a.className, color = _a.color, name = _a.name, _b = _a.size, size = _b === void 0 ? 'md' : _b;
+    var initials = (0, react_1.useMemo)(function () { return getInitials(name || ''); }, [name]);
+    var backgroundColor = (0, react_1.useMemo)(function () {
+        if (color)
+            return "var(--color-".concat(color, ")");
+        var h = parseInt((0, hash_js_1.sha256)()
+            .update(name || '')
+            .digest('hex')
+            .substring(0, 4), 16) % 360;
+        return "hsl(".concat(h, ", 50%, 50%)");
+    }, [color, name]);
+    return ((0, jsx_runtime_1.jsx)(styles.AvatarContainer, { size: size, className: className, style: { backgroundColor: backgroundColor }, children: initials || children }));
+};
+exports.Avatar = Avatar;

package/dist/components/ui/Avatar/styles.d.ts

@@ -0,0 +1,4 @@
+export type AvatarContainerProps = {
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+export declare const AvatarContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, AvatarContainerProps>> & string;

package/dist/components/ui/Avatar/styles.js

@@ -0,0 +1,43 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarContainer = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var stylesMap = {
+    xs: (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    width: var(--size-6);\n    height: var(--size-6);\n    min-width: var(--size-6);\n    min-height: var(--size-6);\n    font-size: var(--text-xs);\n    line-height: var(--text-xs);\n  "], ["\n    width: var(--size-6);\n    height: var(--size-6);\n    min-width: var(--size-6);\n    min-height: var(--size-6);\n    font-size: var(--text-xs);\n    line-height: var(--text-xs);\n  "]))),
+    sm: (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: var(--size-8);\n    height: var(--size-8);\n    min-width: var(--size-8);\n    min-height: var(--size-8);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm);\n  "], ["\n    width: var(--size-8);\n    height: var(--size-8);\n    min-width: var(--size-8);\n    min-height: var(--size-8);\n    font-size: var(--text-sm);\n    line-height: var(--text-sm);\n  "]))),
+    md: (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    width: var(--size-10);\n    height: var(--size-10);\n    min-width: var(--size-10);\n    min-height: var(--size-10);\n    font-size: var(--text-md);\n    line-height: var(--text-md);\n  "], ["\n    width: var(--size-10);\n    height: var(--size-10);\n    min-width: var(--size-10);\n    min-height: var(--size-10);\n    font-size: var(--text-md);\n    line-height: var(--text-md);\n  "]))),
+    lg: (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    width: var(--size-12);\n    height: var(--size-12);\n    min-width: var(--size-12);\n    min-height: var(--size-12);\n    font-size: var(--text-lg);\n    line-height: var(--text-lg);\n  "], ["\n    width: var(--size-12);\n    height: var(--size-12);\n    min-width: var(--size-12);\n    min-height: var(--size-12);\n    font-size: var(--text-lg);\n    line-height: var(--text-lg);\n  "]))),
+    xl: (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    width: var(--size-14);\n    height: var(--size-14);\n    min-width: var(--size-14);\n    min-height: var(--size-14);\n    font-size: var(--text-2xl);\n    line-height: var(--text-2xl);\n  "], ["\n    width: var(--size-14);\n    height: var(--size-14);\n    min-width: var(--size-14);\n    min-height: var(--size-14);\n    font-size: var(--text-2xl);\n    line-height: var(--text-2xl);\n  "]))),
+};
+exports.AvatarContainer = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--rounded-full);\n  user-select: none;\n\n  ", "\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--rounded-full);\n  user-select: none;\n\n  ", "\n"])), function (_a) {
+    var size = _a.size;
+    return stylesMap[size];
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/ui/Card/styles.js

@@ -11,7 +11,7 @@ exports.CardFooter = exports.CardHeader = exports.CardContainer = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.CardContainer = styled_components_1.default.div.attrs({
     className: 'CardContainer',
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  background-color: var(--color-white);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-md);\n  padding: var(--space-4);\n  border: 1px solid var(--color-neutral-100);\n"], ["\n  display: flex;\n  flex-direction: column;\n  background-color: var(--color-white);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-md);\n  padding: var(--space-4);\n  border: 1px solid var(--color-neutral-100);\n"])));
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  background-color: var(--color-neutral-0);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-md);\n  padding: var(--space-4);\n  border: 1px solid var(--color-neutral-100);\n"], ["\n  display: flex;\n  flex-direction: column;\n  background-color: var(--color-neutral-0);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-md);\n  padding: var(--space-4);\n  border: 1px solid var(--color-neutral-100);\n"])));
 exports.CardHeader = styled_components_1.default.div.attrs({
     className: 'CardHeader',
 })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding-bottom: var(--space-2);\n  border-bottom: 1px solid var(--color-neutral-200);\n  margin-bottom: var(--space-2);\n  gap: var(--space-2);\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding-bottom: var(--space-2);\n  border-bottom: 1px solid var(--color-neutral-200);\n  margin-bottom: var(--space-2);\n  gap: var(--space-2);\n"])));

package/dist/components/ui/Ellipsis.d.ts

@@ -0,0 +1,13 @@
+type EllipsisProps = React.HTMLAttributes<HTMLElement> & {
+    as?: keyof JSX.IntrinsicElements;
+    $width?: string;
+    $maxWidth?: string;
+    $multiline?: boolean;
+    $lineClamp?: number;
+};
+/**
+ * Ellipsis component that truncates text with an ellipsis when it overflows
+ * Can be rendered as any HTML element (div, span, p, etc.) using the "as" prop
+ */
+export declare const Ellipsis: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, EllipsisProps>> & string;
+export {};

package/dist/components/ui/Ellipsis.js

@@ -0,0 +1,28 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Ellipsis = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+/**
+ * Ellipsis component that truncates text with an ellipsis when it overflows
+ * Can be rendered as any HTML element (div, span, p, etc.) using the "as" prop
+ */
+exports.Ellipsis = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  width: ", ";\n  max-width: ", ";\n\n  ", "\n"], ["\n  overflow: hidden;\n  width: ", ";\n  max-width: ", ";\n\n  ", "\n"])), function (_a) {
+    var $width = _a.$width;
+    return $width || 'auto';
+}, function (_a) {
+    var $maxWidth = _a.$maxWidth;
+    return $maxWidth || '100%';
+}, function (_a) {
+    var $multiline = _a.$multiline, _b = _a.$lineClamp, $lineClamp = _b === void 0 ? 1 : _b;
+    return $multiline
+        ? "\n        display: -webkit-box;\n        -webkit-line-clamp: ".concat($lineClamp, ";\n        -webkit-box-orient: vertical;\n        white-space: normal;\n        line-height: 1.25;\n        max-height: calc(").concat(1.25 * $lineClamp, "em);\n      ")
+        : "\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      ";
+});
+var templateObject_1;

package/dist/components/ui/Label.d.ts

@@ -0,0 +1,9 @@
+import { ThemeColor } from '../../providers/ThemeProvider/types';
+export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, LabelProps>> & string;
+export type LabelProps = {
+    color?: ThemeColor;
+    size?: 'small' | 'medium' | 'large';
+    rounded?: boolean;
+    bordered?: boolean;
+};
+export declare const Label: (props: import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, keyof LabelProps> & LabelProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").JSX.Element | null;

package/dist/components/ui/Label.js

@@ -0,0 +1,74 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Label = exports.StyledLabel = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importStar(require("styled-components"));
+exports.StyledLabel = styled_components_1.default.span.withConfig({
+    shouldForwardProp: function () { return true; },
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-sans);\n  font-weight: 500;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &.small {\n    padding: var(--space-0_5) var(--space-1_5);\n    font-size: var(--text-xs);\n    border-radius: var(--rounded-sm);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-3);\n      height: var(--space-3);\n    }\n  }\n\n  &.medium {\n    padding: var(--space-1) var(--space-2);\n    font-size: var(--text-sm);\n    border-radius: var(--rounded-md);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-3_5);\n      height: var(--space-3_5);\n    }\n  }\n\n  &.large {\n    padding: var(--space-1_5) var(--space-2_5);\n    font-size: var(--text-base);\n    border-radius: var(--rounded-lg);\n    svg {\n      margin-right: var(--space-1_5);\n      width: var(--space-4);\n      height: var(--space-4);\n    }\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: var(--font-sans);\n  font-weight: 500;\n\n  ", "\n\n  ", "\n\n  ", "\n\n  &.small {\n    padding: var(--space-0_5) var(--space-1_5);\n    font-size: var(--text-xs);\n    border-radius: var(--rounded-sm);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-3);\n      height: var(--space-3);\n    }\n  }\n\n  &.medium {\n    padding: var(--space-1) var(--space-2);\n    font-size: var(--text-sm);\n    border-radius: var(--rounded-md);\n    svg {\n      margin-right: var(--space-1);\n      width: var(--space-3_5);\n      height: var(--space-3_5);\n    }\n  }\n\n  &.large {\n    padding: var(--space-1_5) var(--space-2_5);\n    font-size: var(--text-base);\n    border-radius: var(--rounded-lg);\n    svg {\n      margin-right: var(--space-1_5);\n      width: var(--space-4);\n      height: var(--space-4);\n    }\n  }\n"])), function (_a) {
+    var color = _a.color;
+    return color
+        ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-700);\n          svg {\n            fill: var(--color-", "-700);\n          }\n        "], ["\n          background-color: var(--color-", "-100);\n          color: var(--color-", "-700);\n          svg {\n            fill: var(--color-", "-700);\n          }\n        "])), color, color, color) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          background-color: var(--color-neutral-100);\n          color: var(--color-neutral-700);\n          svg {\n            fill: var(--color-neutral-700);\n          }\n        "], ["\n          background-color: var(--color-neutral-100);\n          color: var(--color-neutral-700);\n          svg {\n            fill: var(--color-neutral-700);\n          }\n        "])));
+}, function (_a) {
+    var bordered = _a.bordered, color = _a.color;
+    return bordered
+        ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          border: 1px solid\n            ", ";\n        "], ["\n          border: 1px solid\n            ", ";\n        "])), color ? "var(--color-".concat(color, "-200)") : 'var(--color-neutral-200)') : 'border: none;';
+}, function (_a) {
+    var rounded = _a.rounded;
+    return rounded && 'border-radius: var(--rounded-full);';
+});
+exports.Label = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.className, className = _c === void 0 ? '' : _c, props = __rest(_a, ["children", "size", "className"]);
+    return ((0, jsx_runtime_1.jsx)(exports.StyledLabel, __assign({ ref: ref, className: "".concat(size, " ").concat(className) }, props, { children: children })));
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/ui/ToastNotification.d.ts

@@ -0,0 +1,14 @@
+import { FC, ReactNode } from 'react';
+export type ToastType = 'success' | 'error' | 'warning' | 'info';
+export type NotificationContainerProps = {
+    type?: ToastType;
+};
+export declare const ToastNotificationContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, NotificationContainerProps>> & string;
+export declare const ToastNotification: FC<{
+    title: string;
+    message: ReactNode;
+    type?: ToastType;
+    timer?: number;
+    color?: string;
+    onClose: () => void;
+}>;

package/dist/components/ui/ToastNotification.js

@@ -0,0 +1,78 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastNotification = exports.ToastNotificationContainer = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importStar(require("styled-components"));
+var Icons_1 = require("../../Icons");
+exports.ToastNotificationContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  position: fixed;\n  right: var(--space-12);\n  bottom: var(--space-12);\n  z-index: 9999;\n  border-radius: var(--rounded-lg);\n  box-shadow: 0 var(--space-2) var(--space-2) rgba(0, 0, 0, 0.4);\n  font-size: var(--text-lg);\n  padding: var(--space-4) var(--space-4);\n  color: var(--color-neutral-500);\n  background-color: var(--color-neutral-100);\n  flex-direction: row;\n  align-items: center;\n  gap: var(--space-4);\n\n  ", "\n"], ["\n  display: flex;\n  position: fixed;\n  right: var(--space-12);\n  bottom: var(--space-12);\n  z-index: 9999;\n  border-radius: var(--rounded-lg);\n  box-shadow: 0 var(--space-2) var(--space-2) rgba(0, 0, 0, 0.4);\n  font-size: var(--text-lg);\n  padding: var(--space-4) var(--space-4);\n  color: var(--color-neutral-500);\n  background-color: var(--color-neutral-100);\n  flex-direction: row;\n  align-items: center;\n  gap: var(--space-4);\n\n  ", "\n"])), function (_a) {
+    var _b = _a.type, type = _b === void 0 ? 'info' : _b;
+    return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    border-left: var(--space-2) solid\n      ", ";\n  "], ["\n    border-left: var(--space-2) solid\n      ", ";\n  "])), type === 'success'
+        ? 'var(--color-success-600)'
+        : type === 'error'
+            ? 'var(--color-danger-500)'
+            : type === 'warning'
+                ? 'var(--color-warning-500)'
+                : 'var(--color-info-500)');
+});
+var ContentWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n"])));
+var IconContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-12);\n  height: var(--space-12);\n  border-radius: var(--rounded-full);\n\n  ", "\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-12);\n  height: var(--space-12);\n  border-radius: var(--rounded-full);\n\n  ", "\n"])), function (_a) {
+    var _b = _a.type, type = _b === void 0 ? 'info' : _b;
+    return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    background-color: ", ";\n  "], ["\n    background-color: ", ";\n  "])), type === 'success'
+        ? 'var(--color-green-600)'
+        : type === 'error'
+            ? 'var(--color-danger-500)'
+            : type === 'warning'
+                ? 'var(--color-warning-500)'
+                : 'var(--color-info-500)');
+});
+var ToastNotification = function (_a) {
+    var title = _a.title, message = _a.message, _b = _a.type, type = _b === void 0 ? 'info' : _b, color = _a.color, _c = _a.timer, timer = _c === void 0 ? 2000 : _c, onClose = _a.onClose;
+    (0, react_1.useEffect)(function () {
+        var timeoutId = setTimeout(onClose, timer);
+        return function () { return clearTimeout(timeoutId); };
+    }, [onClose, timer]);
+    var icon = function () {
+        switch (type) {
+            case 'success':
+                return ((0, jsx_runtime_1.jsx)(Icons_1.CircleCheckIcon, { style: { fill: 'var(--color-neutral-100)' }, width: 26, height: 26 }));
+            case 'error':
+                return ((0, jsx_runtime_1.jsx)(Icons_1.CircleXMarkIcon, { style: { fill: 'var(--color-neutral-100)' }, width: 26, height: 26 }));
+            case 'warning':
+                return ((0, jsx_runtime_1.jsx)(Icons_1.TriangleExclamationIcon, { style: { fill: 'var(--color-neutral-100)' }, width: 26, height: 26 }));
+            case 'info':
+            default:
+                return ((0, jsx_runtime_1.jsx)(Icons_1.CircleInfoIcon, { style: { fill: 'var(--color-neutral-100)' }, width: 26, height: 26 }));
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(exports.ToastNotificationContainer, { type: type, color: color, children: [(0, jsx_runtime_1.jsx)(IconContainer, { type: type, children: icon() }), (0, jsx_runtime_1.jsxs)(ContentWrapper, { children: [(0, jsx_runtime_1.jsx)("strong", { children: title }), (0, jsx_runtime_1.jsx)("div", { children: message })] })] }));
+};
+exports.ToastNotification = ToastNotification;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/ui/index.d.ts

@@ -1,3 +1,6 @@
+export * from './Avatar';
 export * from './Card';
 export * from './ContextMenu';
+export * from './Ellipsis';
+export * from './Label';
 export * from './Message';

package/dist/components/ui/index.js

@@ -14,6 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Avatar"), exports);
 __exportStar(require("./Card"), exports);
 __exportStar(require("./ContextMenu"), exports);
+__exportStar(require("./Ellipsis"), exports);
+__exportStar(require("./Label"), exports);
 __exportStar(require("./Message"), exports);

package/dist/helpers/index.d.ts

@@ -1,3 +1,4 @@
 export * from './dates';
 export * from './numbers';
 export * from './text';
+export * from './responsive';

package/dist/helpers/index.js

@@ -17,3 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./dates"), exports);
 __exportStar(require("./numbers"), exports);
 __exportStar(require("./text"), exports);
+__exportStar(require("./responsive"), exports);

package/dist/helpers/numbers.d.ts

@@ -2,3 +2,6 @@ export declare const formatMoney: (number: number, decimals?: number, currency?:
 export declare const formatPercentage: (number: number, decimals?: number) => string;
 export declare const formatNumber: (number: number, decimals?: number) => string;
 export declare const formatNumberInvariant: (number: number, decimals?: number) => string;
+export declare const decimalSeparator: string;
+export declare const parseNumber: (value: string) => number;
+export declare const getCurrencySymbol: (currency: string) => (string | undefined)[];