@addev-be/ui 0.20.1 → 0.20.3

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

@@ -1,5 +1,9 @@
+export * from './AutoTextArea';
 export * from './Button';
 export * from './Select';
 export * from './IconButton';
 export * from './IndeterminateCheckbox';
+export * from './Form';
+export * from './Form/Row';
 export * from './styles';
+export * from './NumberInput';

package/dist/components/forms/index.js

@@ -14,8 +14,12 @@ 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("./AutoTextArea"), exports);
 __exportStar(require("./Button"), exports);
 __exportStar(require("./Select"), exports);
 __exportStar(require("./IconButton"), exports);
 __exportStar(require("./IndeterminateCheckbox"), exports);
+__exportStar(require("./Form"), exports);
+__exportStar(require("./Form/Row"), exports);
 __exportStar(require("./styles"), exports);
+__exportStar(require("./NumberInput"), exports);

package/dist/components/forms/styles.d.ts

@@ -1,7 +1,21 @@
+import { NumericFormat } from 'react-number-format';
 export declare const inputStyle: import("styled-components").RuleSet<object>;
-export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & {
-    ref?: ((instance: HTMLInputElement | 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<HTMLInputElement> | null | undefined;
-}>, never>, never>> & string;
+export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
+export declare const StyledNumericFormat: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react-number-format/types/types").InternalNumberFormatBase & {
+    thousandSeparator?: boolean | string;
+    decimalSeparator?: string;
+    allowedDecimalSeparators?: Array<string>;
+    thousandsGroupStyle?: "thousand" | "lakh" | "wan" | "none";
+    decimalScale?: number;
+    fixedDecimalScale?: boolean;
+    allowNegative?: boolean;
+    allowLeadingZeros?: boolean;
+    suffix?: string;
+    prefix?: string;
+} & Omit<import("react-number-format").InputAttributes, never> & Omit<unknown, "type" | "onFocus" | "onBlur" | "onChange" | "onKeyDown" | "onMouseUp" | "ref" | "value" | "defaultValue" | "prefix" | "inputMode" | "displayType" | "renderText" | "getInputRef" | "valueIsNumericString" | "onValueChange" | "isAllowed" | "thousandSeparator" | "decimalSeparator" | "allowedDecimalSeparators" | "thousandsGroupStyle" | "decimalScale" | "fixedDecimalScale" | "allowNegative" | "allowLeadingZeros" | "suffix"> & {
+    customInput?: import("react").ComponentType<unknown> | undefined;
+}, never>> & string & Omit<typeof NumericFormat, keyof import("react").Component<any, {}, any>>;
+export declare const StyledTextArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, never>> & string;
 export declare const StackedLabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<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;
 }>, never>, never>> & string;

package/dist/components/forms/styles.js

@@ -27,13 +27,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StackedLabelContainer = exports.Input = exports.inputStyle = void 0;
+exports.StackedLabelContainer = exports.StyledTextArea = exports.StyledNumericFormat = exports.Input = exports.inputStyle = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
-exports.inputStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: inherit;\n  font-size: inherit;\n  color: inherit;\n  border: 1px solid var(--color-gray-300);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1);\n  width: 100%;\n  box-sizing: border-box;\n\n  &:focus {\n    outline: 2px solid var(--color-primary-500);\n  }\n"], ["\n  font-family: inherit;\n  font-size: inherit;\n  color: inherit;\n  border: 1px solid var(--color-gray-300);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1);\n  width: 100%;\n  box-sizing: border-box;\n\n  &:focus {\n    outline: 2px solid var(--color-primary-500);\n  }\n"])));
-exports.Input = styled_components_1.default.input.attrs({
-    className: 'Input',
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.inputStyle);
+var react_number_format_1 = require("react-number-format");
+exports.inputStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: var(--font-sans);\n  font-size: inherit;\n  color: inherit;\n  border: 1px solid var(--color-gray-300);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1);\n  width: 100%;\n  box-sizing: border-box;\n\n  &:focus {\n    outline: 2px solid var(--color-primary-500);\n  }\n"], ["\n  font-family: var(--font-sans);\n  font-size: inherit;\n  color: inherit;\n  border: 1px solid var(--color-gray-300);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1);\n  width: 100%;\n  box-sizing: border-box;\n\n  &:focus {\n    outline: 2px solid var(--color-primary-500);\n  }\n"])));
+exports.Input = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.inputStyle);
+exports.StyledNumericFormat = (0, styled_components_1.default)(react_number_format_1.NumericFormat)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  text-align: right;\n"], ["\n  ", "\n  text-align: right;\n"])), exports.inputStyle);
+exports.StyledTextArea = styled_components_1.default.textarea(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n  display: block;\n"], ["\n  ", "\n  display: block;\n"])), exports.inputStyle);
 exports.StackedLabelContainer = styled_components_1.default.div.attrs({
     className: 'StackedLabelContainer',
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  color: var(--color-gray-900);\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  color: var(--color-gray-900);\n"])));
-var templateObject_1, templateObject_2, templateObject_3;
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  color: var(--color-gray-900);\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  color: var(--color-gray-900);\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

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

@@ -0,0 +1,6 @@
+import { SpaceProps } from '../../helpers';
+export type ColumnsProps = {
+    columns?: number | string[];
+} & SpaceProps;
+export declare const Columns: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ColumnsProps>> & string;
+export declare const Column: 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/Columns.js

@@ -0,0 +1,23 @@
+"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.Column = exports.Columns = void 0;
+var helpers_1 = require("../../helpers");
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.Columns = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-gap: var(--space-6);\n  grid-template-columns: ", ";\n\n  ", "\n"], ["\n  display: grid;\n  grid-gap: var(--space-6);\n  grid-template-columns: ", ";\n\n  ", "\n"])), function (_a) {
+    var columns = _a.columns;
+    if (typeof columns === 'number') {
+        return columns === 2
+            ? "repeat(2, calc(50% - var(--space-6) / 2))"
+            : "repeat(".concat(columns, ", 1fr)");
+    }
+    return (columns === null || columns === void 0 ? void 0 : columns.join(' ')) || 'none';
+}, helpers_1.space);
+exports.Column = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-6);\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-6);\n"])));
+var templateObject_1, templateObject_2;

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

@@ -5,6 +5,7 @@ type DropdownProps = PropsWithChildren<styles.DropdownContainerProps & {
     $autoPositionX?: boolean;
     $autoPositionY?: boolean;
     onClose?: () => void;
+    usePortal?: boolean;
     style?: CSSProperties;
 }>;
 export declare const Dropdown: FC<DropdownProps>;

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/Flexbox.d.ts

@@ -0,0 +1,11 @@
+import { SpaceProps } from '../../helpers';
+import { CSSProperties } from 'react';
+import { ThemeSpace } from '../../providers';
+type FlexboxProps = {
+    direction?: CSSProperties['flexDirection'];
+    justifyContent?: CSSProperties['justifyContent'];
+    alignItems?: CSSProperties['alignItems'];
+    gap?: ThemeSpace;
+} & SpaceProps;
+export declare const Flexbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FlexboxProps>> & string;
+export {};

package/dist/components/layout/Flexbox.js

@@ -0,0 +1,26 @@
+"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.Flexbox = void 0;
+var helpers_1 = require("../../helpers");
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.Flexbox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  gap: ", ";\n  ", "\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  gap: ", ";\n  ", "\n"])), function (_a) {
+    var direction = _a.direction;
+    return direction;
+}, function (_a) {
+    var justifyContent = _a.justifyContent;
+    return justifyContent;
+}, function (_a) {
+    var alignItems = _a.alignItems;
+    return alignItems;
+}, function (_a) {
+    var gap = _a.gap;
+    return (gap ? "var(--s-".concat(gap, ")") : undefined);
+}, helpers_1.space);
+var templateObject_1;

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/Modal/styles.js

@@ -48,7 +48,7 @@ exports.ModalMessage = styled_components_1.default.p.attrs({ className: 'ModalMe
 exports.ModalContent = styled_components_1.default.div.attrs({ className: 'ModalContent' })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: auto;\n  padding: var(--space-4);\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: auto;\n  padding: var(--space-4);\n"])));
 exports.ModalContentWithIcon = styled_components_1.default.div.attrs({
     className: 'ModalContentWithIcon',
-})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: var(--space-4);\n  gap: var(--space-2);\n\n  & > svg {\n    margin: var(--space-2);\n    width: var(--space-8);\n    height: var(--space-8);\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: var(--space-4);\n  gap: var(--space-2);\n\n  & > svg {\n    margin: var(--space-2);\n    width: var(--space-8);\n    height: var(--space-8);\n  }\n"])));
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: var(--space-4);\n  gap: var(--space-2);\n\n  & > svg {\n    margin: var(--space-2);\n    width: var(--space-6);\n    height: var(--space-6);\n  }\n\n  & > :not(svg) {\n    flex: 1;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: var(--space-4);\n  gap: var(--space-2);\n\n  & > svg {\n    margin: var(--space-2);\n    width: var(--space-6);\n    height: var(--space-6);\n  }\n\n  & > :not(svg) {\n    flex: 1;\n  }\n"])));
 exports.ModalFooter = styled_components_1.default.div.attrs({ className: 'ModalFooter' })(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding: var(--space-2);\n  background-color: var(--color-neutral-200);\n  padding: var(--space-4);\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding: var(--space-2);\n  background-color: var(--color-neutral-200);\n  padding: var(--space-4);\n"])));
 exports.ModalButtons = (0, styled_components_1.default)(exports.ModalFooter).attrs({
     className: 'ModalButtons',

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

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

package/dist/components/layout/index.js

@@ -14,6 +14,10 @@ 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("./Flexbox"), exports);
+__exportStar(require("./Grid"), exports);
 __exportStar(require("./Loading"), exports);
+__exportStar(require("./Masonry"), exports);
+__exportStar(require("./Modal"), exports);

package/dist/components/search/HighlightedText.js

@@ -27,16 +27,18 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var helpers_1 = require("../../helpers");
 var HighlightedText = function (_a) {
-    var _b;
     var text = _a.text, highlight = _a.highlight, props = __rest(_a, ["text", "highlight"]);
     var textWithoutHtml = (0, react_1.useMemo)(function () { return (0, helpers_1.extractTextFromHTML)(text); }, [text]);
-    console.log('textWithoutHtml', textWithoutHtml);
-    if (!highlight)
+    var parts = (0, react_1.useMemo)(function () {
+        var _a;
+        return highlight
+            ? (_a = textWithoutHtml === null || textWithoutHtml === void 0 ? void 0 : textWithoutHtml.split(new RegExp("(".concat((0, helpers_1.escapeForRegExp)(highlight), ")"), 'gi')).filter(Boolean)) !== null && _a !== void 0 ? _a : []
+            : [];
+    }, [highlight, textWithoutHtml]);
+    if (!highlight || !parts.length) {
         return (0, jsx_runtime_1.jsx)("span", __assign({}, props, { children: textWithoutHtml }));
-    var parts = (_b = textWithoutHtml === null || textWithoutHtml === void 0 ? void 0 : textWithoutHtml.split(new RegExp("(".concat((0, helpers_1.escapeForRegExp)(highlight), ")"), 'gi'))) !== null && _b !== void 0 ? _b : [];
-    return ((0, jsx_runtime_1.jsx)("span", __assign({}, props, { children: parts
-            .filter(function (part) { return !!part; })
-            .map(function (part, index) { return ((0, jsx_runtime_1.jsx)("span", { style: part.toLowerCase() === highlight.toLowerCase()
+    }
+    return ((0, jsx_runtime_1.jsx)("span", __assign({}, props, { children: parts.map(function (part, index) { return ((0, jsx_runtime_1.jsx)("span", { style: part.toLowerCase() === highlight.toLowerCase()
                 ? { backgroundColor: 'gold' }
                 : {}, children: part }, index)); }) })));
 };

package/dist/components/search/QuickSearchBar.d.ts

@@ -1,6 +1,10 @@
+import { ComponentProps, FC } from 'react';
 import { SearchTypeDefinitions } from './types';
+import { Input } from '../forms';
 type QuickSearchBarProps<R> = {
-    definitions: SearchTypeDefinitions<R>;
+    types: SearchTypeDefinitions<R>;
+    placeholder?: string;
+    inputComponent?: FC<ComponentProps<typeof Input>>;
 };
-export declare const QuickSearchBar: <R>({ definitions }: QuickSearchBarProps<R>) => import("react/jsx-runtime").JSX.Element;
+export declare const QuickSearchBar: <R>({ types, placeholder, inputComponent: InputComponent, }: QuickSearchBarProps<R>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/search/QuickSearchBar.js

@@ -34,12 +34,12 @@ var usehooks_1 = require("@uidotdev/usehooks");
 var services_1 = require("../../services");
 var QuickSearchBar = function (_a) {
     var _b, _c;
-    var definitions = _a.definitions;
-    var _d = (0, react_1.useState)(''), term = _d[0], setTerm = _d[1];
-    var _e = (0, react_1.useState)(false), dropdownVisible = _e[0], setDropdownVisible = _e[1];
+    var types = _a.types, placeholder = _a.placeholder, _d = _a.inputComponent, InputComponent = _d === void 0 ? forms_1.Input : _d;
+    var _e = (0, react_1.useState)(''), term = _e[0], setTerm = _e[1];
+    var _f = (0, react_1.useState)(false), dropdownVisible = _f[0], setDropdownVisible = _f[1];
     var debouncedTerm = (0, usehooks_1.useDebounce)(term, 300);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    var _f = (0, react_1.useState)(null), results = _f[0], setResults = _f[1];
+    var _g = (0, react_1.useState)(null), results = _g[0], setResults = _g[1];
     var fakeInputRef = (0, react_1.useRef)(null);
     var inputRef = (0, react_1.useRef)(null);
     var rect = (_c = (_b = fakeInputRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) !== null && _c !== void 0 ? _c : new DOMRect();
@@ -48,7 +48,7 @@ var QuickSearchBar = function (_a) {
     (0, react_1.useEffect)(function () {
         if (debouncedTerm) {
             globalSearch({
-                types: ['Customer', 'ScanGroup'],
+                types: types,
                 searchTerm: debouncedTerm,
                 limit: 5,
             }).then(function (response) {
@@ -56,7 +56,7 @@ var QuickSearchBar = function (_a) {
                 setDropdownVisible(true);
             });
         }
-    }, [globalSearch, debouncedTerm]);
+    }, [globalSearch, debouncedTerm, types]);
     var onFocus = (0, react_1.useCallback)(function () {
         setDropdownVisible(true);
         requestAnimationFrame(function () {
@@ -64,6 +64,6 @@ var QuickSearchBar = function (_a) {
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         });
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(forms_1.Input, { type: "text", ref: fakeInputRef, value: term, onFocus: onFocus }), dropdownVisible && rect && ((0, jsx_runtime_1.jsx)(layout_1.Dropdown, { "$sourceRect": destRect, onClose: function () { return setDropdownVisible(false); }, "$width": rect.width, "$height": [results ? 250 : rect.height, 400], "$autoPositionY": false, children: (0, jsx_runtime_1.jsxs)(styles.QuickSearchDropdownContainer, { children: [(0, jsx_runtime_1.jsx)(forms_1.Input, { type: "text", ref: inputRef, value: term, onChange: function (e) { return setTerm(e.target.value); }, onClick: function (e) { return e.stopPropagation(); } }), results && ((0, jsx_runtime_1.jsx)(QuickSearchResults_1.QuickSearchResults, { results: results, definitions: definitions, term: debouncedTerm }))] }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InputComponent, { type: "text", ref: fakeInputRef, value: term, onFocus: onFocus, placeholder: placeholder }), dropdownVisible && rect && ((0, jsx_runtime_1.jsx)(layout_1.Dropdown, { "$sourceRect": destRect, onClose: function () { return setDropdownVisible(false); }, "$width": rect.width, "$height": [results ? 250 : rect.height, 400], "$autoPositionY": false, children: (0, jsx_runtime_1.jsxs)(styles.QuickSearchDropdownContainer, { children: [(0, jsx_runtime_1.jsx)(InputComponent, { type: "text", ref: inputRef, value: term, placeholder: placeholder, onChange: function (e) { return setTerm(e.target.value); }, onClick: function (e) { return e.stopPropagation(); } }), results && ((0, jsx_runtime_1.jsx)(QuickSearchResults_1.QuickSearchResults, { results: results, definitions: types, term: debouncedTerm }))] }) }))] }));
 };
 exports.QuickSearchBar = QuickSearchBar;

package/dist/components/search/styles.js

@@ -20,7 +20,7 @@ exports.QuickSearchResultsListContainer = styled_components_1.default.div.attrs(
 })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: var(--space-2);\n  border-right: 1px solid var(--color-neutral-200);\n  flex: 1;\n  overflow: auto;\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: var(--space-2);\n  border-right: 1px solid var(--color-neutral-200);\n  flex: 1;\n  overflow: auto;\n"])));
 exports.QuickSearchResultsTitle = styled_components_1.default.div.attrs({
     className: 'QuickSearchResultsTitle',
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0;\n  margin-bottom: var(--space-1);\n  &:not(:first-child) {\n    margin-top: var(--space-2);\n  }\n  font-weight: bold;\n  font-size: var(--text-sm);\n  text-transform: uppercase;\n  letter-spacing: 120%;\n  color: var(--color-neutral-500);\n"], ["\n  margin: 0;\n  margin-bottom: var(--space-1);\n  &:not(:first-child) {\n    margin-top: var(--space-2);\n  }\n  font-weight: bold;\n  font-size: var(--text-sm);\n  text-transform: uppercase;\n  letter-spacing: 120%;\n  color: var(--color-neutral-500);\n"])));
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin: 0;\n  margin-bottom: var(--space-1);\n  &:not(:first-child) {\n    margin-top: var(--space-2);\n  }\n  font-weight: bold;\n  font-size: var(--text-sm);\n  text-transform: uppercase;\n  letter-spacing: 0.1em;\n  color: var(--color-neutral-500);\n"], ["\n  margin: 0;\n  margin-bottom: var(--space-1);\n  &:not(:first-child) {\n    margin-top: var(--space-2);\n  }\n  font-weight: bold;\n  font-size: var(--text-sm);\n  text-transform: uppercase;\n  letter-spacing: 0.1em;\n  color: var(--color-neutral-500);\n"])));
 exports.QuickSearchResultsItem = styled_components_1.default.div.attrs({
     className: 'QuickSearchResultsItem',
 })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: var(--space-2) var(--space-3);\n  cursor: pointer;\n  border-radius: 4px;\n  &:hover {\n    background-color: var(--color-neutral-100);\n  }\n"], ["\n  padding: var(--space-2) var(--space-3);\n  cursor: pointer;\n  border-radius: 4px;\n  &:hover {\n    background-color: var(--color-neutral-100);\n  }\n"])));

package/dist/components/search/types.d.ts

@@ -1,6 +1,9 @@
 import { FC, ReactNode } from 'react';
+import { ConditionDTO, OrderByDTO } from '../../services';
 export type SearchTypeDefinition<T> = {
     title: string;
+    orderBy?: OrderByDTO[];
+    conditions?: ConditionDTO[];
     quickRenderer: (result: T, term: string) => ReactNode;
     titleRenderer: (result: T, term: string) => ReactNode;
     detailsRenderer: (result: T, term: string) => ReactNode;

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 {};