@addev-be/ui 0.7.2 → 0.7.4

package/dist/components/search/QuickSearchBar.js

@@ -0,0 +1,69 @@
+"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.QuickSearchBar = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles = __importStar(require("./styles"));
+var react_1 = require("react");
+var layout_1 = require("../layout");
+var forms_1 = require("../forms");
+var QuickSearchResults_1 = require("./QuickSearchResults");
+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 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 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();
+    var destRect = new DOMRect(rect.x, rect.y, rect.width, 0);
+    var globalSearch = (0, services_1.useGlobalSearchRequestHandler)();
+    (0, react_1.useEffect)(function () {
+        if (debouncedTerm) {
+            globalSearch({
+                types: ['Customer', 'ScanGroup'],
+                searchTerm: debouncedTerm,
+                limit: 5,
+            }).then(function (response) {
+                setResults(response.data);
+                setDropdownVisible(true);
+            });
+        }
+    }, [globalSearch, debouncedTerm]);
+    var onFocus = (0, react_1.useCallback)(function () {
+        setDropdownVisible(true);
+        requestAnimationFrame(function () {
+            var _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 }))] }) }))] }));
+};
+exports.QuickSearchBar = QuickSearchBar;

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

@@ -0,0 +1,8 @@
+import { SearchResults, SearchTypeDefinitions } from './types';
+type QuickSearchResultsProps<R> = {
+    definitions: SearchTypeDefinitions<R>;
+    results: SearchResults<R>;
+    term: string;
+};
+export declare const QuickSearchResults: <R>(props: QuickSearchResultsProps<R>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/search/QuickSearchResults.js

@@ -0,0 +1,70 @@
+"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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QuickSearchResults = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles = __importStar(require("./styles"));
+var react_1 = require("react");
+var lodash_1 = require("lodash");
+var QuickSearchResults = function (props) {
+    var definitions = props.definitions, allResults = props.results, term = props.term;
+    var _a = (0, react_1.useState)(-1), highlightedIndex = _a[0], setHighlightedIndex = _a[1];
+    var notEmptyResults = (0, lodash_1.pickBy)(allResults, function (results) { return results.length > 0; });
+    var resultsArray = (0, react_1.useMemo)(function () {
+        return Object.keys(notEmptyResults).reduce(function (acc, type) { return __spreadArray(__spreadArray([], acc, true), notEmptyResults[type].map(function (result) { return ({
+            result: result,
+            type: type,
+        }); }), true); }, []);
+    }, [notEmptyResults]);
+    var elements = (0, react_1.useMemo)(function () {
+        var elements = [];
+        var currentType = null;
+        resultsArray.forEach(function (_a, index) {
+            var result = _a.result, type = _a.type;
+            var definition = definitions[type];
+            if (currentType !== type) {
+                currentType = type;
+                elements.push((0, jsx_runtime_1.jsx)(styles.QuickSearchResultsTitle, { children: definition.title }, "title-".concat(String(type))));
+            }
+            elements.push((0, jsx_runtime_1.jsx)(styles.QuickSearchResultsItem, { onClick: function () { var _a; return (_a = definition.onClick) === null || _a === void 0 ? void 0 : _a.call(definition, result); }, onMouseEnter: function () { return setHighlightedIndex(index); }, className: highlightedIndex === index ? 'highlighted' : '', children: definition.quickRenderer(result, term) }, "result-".concat(index)));
+        });
+        return elements;
+    }, [definitions, highlightedIndex, resultsArray, term]);
+    var highlightedResult = resultsArray[highlightedIndex];
+    var highlightedDefinition = highlightedResult
+        ? definitions[highlightedResult === null || highlightedResult === void 0 ? void 0 : highlightedResult.type]
+        : null;
+    return ((0, jsx_runtime_1.jsxs)(styles.QuickSearchResultsContainer, { children: [(0, jsx_runtime_1.jsx)(styles.QuickSearchResultsListContainer, { children: elements }), highlightedDefinition && ((0, jsx_runtime_1.jsxs)(styles.QuickSearchResultsDetailsContainer, { children: [highlightedDefinition.titleRenderer(highlightedResult.result, term), (0, jsx_runtime_1.jsx)(styles.QuickSearchResultsDetailsDivider, {}), highlightedDefinition.detailsRenderer(highlightedResult.result, term)] }))] }));
+};
+exports.QuickSearchResults = QuickSearchResults;

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

@@ -0,0 +1,5 @@
+export * from './QuickSearchBar';
+export * from './QuickSearchResults';
+export * from './HighlightedText';
+export * from './types';
+export { QuickSearchResultDetailsTitle, QuickSearchResultsDetailsList, QuickSearchResultsDetailsTerm, } from './styles';

package/dist/components/search/index.js

@@ -0,0 +1,25 @@
+"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 __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 });
+exports.QuickSearchResultsDetailsTerm = exports.QuickSearchResultsDetailsList = exports.QuickSearchResultDetailsTitle = void 0;
+__exportStar(require("./QuickSearchBar"), exports);
+__exportStar(require("./QuickSearchResults"), exports);
+__exportStar(require("./HighlightedText"), exports);
+__exportStar(require("./types"), exports);
+var styles_1 = require("./styles");
+Object.defineProperty(exports, "QuickSearchResultDetailsTitle", { enumerable: true, get: function () { return styles_1.QuickSearchResultDetailsTitle; } });
+Object.defineProperty(exports, "QuickSearchResultsDetailsList", { enumerable: true, get: function () { return styles_1.QuickSearchResultsDetailsList; } });
+Object.defineProperty(exports, "QuickSearchResultsDetailsTerm", { enumerable: true, get: function () { return styles_1.QuickSearchResultsDetailsTerm; } });

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

@@ -0,0 +1,28 @@
+export declare const QuickSearchDropdownContainer: 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;
+export declare const QuickSearchResultsContainer: 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;
+export declare const QuickSearchResultsListContainer: 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;
+export declare const QuickSearchResultsTitle: 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;
+export declare const QuickSearchResultsItem: 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;
+export declare const QuickSearchResultsDetailsContainer: 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;
+export declare const QuickSearchResultsDetailsDivider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>> & string;
+export declare const QuickSearchResultDetailsTitle: 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;
+export declare const QuickSearchResultsDetailsList: 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<HTMLDListElement>, HTMLDListElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDListElement>, HTMLDListElement>, "ref"> & {
+    ref?: ((instance: HTMLDListElement | 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<HTMLDListElement> | null | undefined;
+}>, never>, never>> & string;
+export declare const QuickSearchResultsDetailsTerm: 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<HTMLElement>, HTMLElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    ref?: ((instance: HTMLElement | 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<HTMLElement> | null | undefined;
+}>, never>, never>> & string;

package/dist/components/search/styles.js

@@ -0,0 +1,40 @@
+"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.QuickSearchResultsDetailsTerm = exports.QuickSearchResultsDetailsList = exports.QuickSearchResultDetailsTitle = exports.QuickSearchResultsDetailsDivider = exports.QuickSearchResultsDetailsContainer = exports.QuickSearchResultsItem = exports.QuickSearchResultsTitle = exports.QuickSearchResultsListContainer = exports.QuickSearchResultsContainer = exports.QuickSearchDropdownContainer = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.QuickSearchDropdownContainer = styled_components_1.default.div.attrs({
+    className: 'QuickSearchDropdownContainer',
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n"])));
+exports.QuickSearchResultsContainer = styled_components_1.default.div.attrs({
+    className: 'QuickSearchResultsContainer',
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  flex: 1;\n  padding: var(--space-2) 0;\n  overflow: hidden;\n"], ["\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  flex: 1;\n  padding: var(--space-2) 0;\n  overflow: hidden;\n"])));
+exports.QuickSearchResultsListContainer = styled_components_1.default.div.attrs({
+    className: 'QuickSearchResultsListContainer',
+})(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"])));
+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"])));
+exports.QuickSearchResultsDetailsContainer = styled_components_1.default.div.attrs({
+    className: 'QuickSearchResultsDetailsContainer',
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  padding: var(--space-2);\n  flex: 1;\n"], ["\n  display: flex;\n  flex-direction: column;\n  padding: var(--space-2);\n  flex: 1;\n"])));
+exports.QuickSearchResultsDetailsDivider = styled_components_1.default.hr(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  margin: var(--space-2) 0;\n  height: 1px;\n  border: none;\n  background-color: var(--color-neutral-200);\n"], ["\n  margin: var(--space-2) 0;\n  height: 1px;\n  border: none;\n  background-color: var(--color-neutral-200);\n"])));
+exports.QuickSearchResultDetailsTitle = styled_components_1.default.div.attrs({
+    className: 'QuickSearchResultDetailsTitle',
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  margin: 0;\n"], ["\n  margin: 0;\n"])));
+exports.QuickSearchResultsDetailsList = styled_components_1.default.dl.attrs({
+    className: 'QuickSearchResultsDetailsList',
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: grid;\n  grid-template-columns: 1fr 3fr;\n  grid-gap: var(--space-2);\n"], ["\n  display: grid;\n  grid-template-columns: 1fr 3fr;\n  grid-gap: var(--space-2);\n"])));
+exports.QuickSearchResultsDetailsTerm = styled_components_1.default.dt.attrs({
+    className: 'QuickSearchResultsDetailsTerm',
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  text-transform: uppercase;\n  font-size: var(--text-sm);\n  font-weight: bold;\n  color: var(--color-neutral-500);\n"], ["\n  text-transform: uppercase;\n  font-size: var(--text-sm);\n  font-weight: bold;\n  color: var(--color-neutral-500);\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

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

@@ -0,0 +1,21 @@
+import { FC, ReactNode } from 'react';
+export type SearchTypeDefinition<T> = {
+    title: string;
+    quickRenderer: (result: T, term: string) => ReactNode;
+    titleRenderer: (result: T, term: string) => ReactNode;
+    detailsRenderer: (result: T, term: string) => ReactNode;
+    onClick?: (result: T) => void;
+};
+export type SearchTypeDefinitions<R> = {
+    [K in keyof R]: SearchTypeDefinition<R[K]>;
+};
+export type SearchResults<R> = {
+    [K in keyof R]: Array<R[K]>;
+};
+export type SearchDetailsFC<T> = FC<{
+    searchResult: T;
+}>;
+export type ResultArray<R> = {
+    result: R[keyof R];
+    type: keyof R;
+}[];

package/dist/components/search/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,8 @@
+import { CardFooter, CardHeader } from './styles';
+import { FC, HTMLAttributes } from 'react';
+type CardFC = FC<HTMLAttributes<HTMLDivElement>> & {
+    Header: typeof CardHeader;
+    Footer: typeof CardFooter;
+};
+export declare const Card: CardFC;
+export {};

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

@@ -0,0 +1,34 @@
+"use strict";
+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 __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.Card = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles_1 = require("./styles");
+var Card = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (0, jsx_runtime_1.jsx)(styles_1.CardContainer, __assign({}, props, { children: children }));
+};
+exports.Card = Card;
+exports.Card.Header = styles_1.CardHeader;
+exports.Card.Footer = styles_1.CardFooter;

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

@@ -0,0 +1,9 @@
+export declare const CardContainer: 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;
+export declare const CardHeader: 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;
+export declare const CardFooter: 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/ui/Card/styles.js

@@ -0,0 +1,21 @@
+"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.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"])));
+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"])));
+exports.CardFooter = styled_components_1.default.div.attrs({
+    className: 'CardFooter',
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding-top: var(--space-2);\n  border-top: 1px solid var(--color-neutral-200);\n  margin-top: var(--space-2);\n  gap: var(--space-2);\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding-top: var(--space-2);\n  border-top: 1px solid var(--color-neutral-200);\n  margin-top: var(--space-2);\n  gap: var(--space-2);\n"])));
+var templateObject_1, templateObject_2, templateObject_3;

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

@@ -0,0 +1,11 @@
+import { Divider, MenuItemContainer, SubMenu } from './styles';
+import { FC, HTMLAttributes, PropsWithChildren } from 'react';
+type ContextMenuFC = FC<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> & {
+    Item: typeof MenuItemContainer;
+    ParentItem: typeof ParentMenuItem;
+    Divider: typeof Divider;
+    SubMenu: typeof SubMenu;
+};
+export declare const ContextMenu: ContextMenuFC;
+export declare const ParentMenuItem: FC<HTMLAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,63 @@
+"use strict";
+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 __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.ParentMenuItem = exports.ContextMenu = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles_1 = require("./styles");
+var react_1 = require("react");
+var ContextMenu = function (_a) {
+    var children = _a.children;
+    return ((0, jsx_runtime_1.jsx)(styles_1.MenuContainer, { onClick: function (e) { return e.stopPropagation(); }, children: children }));
+};
+exports.ContextMenu = ContextMenu;
+var ParentMenuItem = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var _b = (0, react_1.useState)(false), isOpened = _b[0], setIsOpened = _b[1];
+    var _c = (0, react_1.useState)(false), isSubMenuLeft = _c[0], setIsSubMenuLeft = _c[1];
+    var _d = (0, react_1.useState)(null), currentTimeout = _d[0], setCurrentTimeout = _d[1];
+    var containerRef = (0, react_1.useRef)(null);
+    var stopTimeout = (0, react_1.useCallback)(function () {
+        if (currentTimeout) {
+            clearTimeout(currentTimeout);
+        }
+        setCurrentTimeout(null);
+    }, [currentTimeout]);
+    var startTimeout = (0, react_1.useCallback)(function (open) {
+        stopTimeout();
+        setCurrentTimeout(window.setTimeout(function () {
+            var _a;
+            var rect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            setIsSubMenuLeft(!!rect && rect.right + 280 > window.innerWidth);
+            setIsOpened(open);
+        }, open ? 100 : 300));
+    }, [stopTimeout]);
+    var open = (0, react_1.useCallback)(function () { return startTimeout(true); }, [startTimeout]);
+    var close = (0, react_1.useCallback)(function () { return startTimeout(false); }, [startTimeout]);
+    return ((0, jsx_runtime_1.jsx)(styles_1.MenuItemContainer, __assign({ ref: containerRef }, props, { className: "".concat(isOpened ? 'opened' : '', " ").concat(isSubMenuLeft ? 'left' : ''), onMouseEnter: open, onMouseLeave: close, "$withArrow": true, children: children })));
+};
+exports.ParentMenuItem = ParentMenuItem;
+exports.ContextMenu.Item = styles_1.MenuItemContainer;
+exports.ContextMenu.ParentItem = exports.ParentMenuItem;
+exports.ContextMenu.Divider = styles_1.Divider;
+exports.ContextMenu.SubMenu = styles_1.SubMenu;

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

@@ -0,0 +1,18 @@
+import { ThemeColor } from '../../../providers/ThemeProvider/types';
+export declare const MenuContainer: 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;
+export declare const SubMenu: 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;
+export declare const MenuItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<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>, {
+    $color?: ThemeColor;
+    disabled?: boolean;
+    $withArrow?: boolean;
+    $opened?: boolean;
+}>> & string;
+export declare const Divider: 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/ui/ContextMenu/styles.js

@@ -0,0 +1,56 @@
+"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.Divider = exports.MenuItemContainer = exports.SubMenu = exports.MenuContainer = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var menuContainerCss = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  color: var(--color-neutral-900);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1) 0;\n  box-shadow: var(--shadow-lg);\n  background-color: var(--color-neutral-100);\n  min-width: 20em;\n  outline: 1px solid var(--color-neutral-200);\n  display: flex;\n  flex-direction: column;\n"], ["\n  position: absolute;\n  color: var(--color-neutral-900);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1) 0;\n  box-shadow: var(--shadow-lg);\n  background-color: var(--color-neutral-100);\n  min-width: 20em;\n  outline: 1px solid var(--color-neutral-200);\n  display: flex;\n  flex-direction: column;\n"])));
+exports.MenuContainer = styled_components_1.default.div.attrs({
+    className: 'MenuContainer',
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  inset: 0;\n"], ["\n  ", "\n  inset: 0;\n"])), menuContainerCss);
+exports.MenuContainer.displayName = 'MenuContainer';
+exports.SubMenu = styled_components_1.default.div.attrs({
+    className: 'SubMenu',
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  top: 0;\n  left: 100%;\n  margin-top: -var(--space-1);\n"], ["\n  ", "\n  top: 0;\n  left: 100%;\n  margin-top: -var(--space-1);\n"])), menuContainerCss);
+exports.SubMenu.displayName = 'SubMenu';
+exports.MenuItemContainer = styled_components_1.default.div.attrs({
+    className: 'MenuItemContainer',
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  font-family: var(--font-sans);\n  font-weight: normal;\n  text-align: left;\n  padding: var(--space-1) var(--space-2);\n  font-size: var(--text-base);\n  line-height: var(--leading-6);\n  border: none;\n  cursor: pointer;\n\n  ", "\n\n  ", "\n\n  svg {\n    fill: currentColor;\n    width: var(--space-4);\n    height: var(--space-4);\n    margin-right: var(--space-2);\n  }\n\n  & > ", " {\n    display: none;\n    margin-top: calc(0px - var(--space-1));\n  }\n  &.opened > ", " {\n    display: block;\n  }\n  &.opened.left > ", " {\n    left: auto;\n    right: 100%;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  font-family: var(--font-sans);\n  font-weight: normal;\n  text-align: left;\n  padding: var(--space-1) var(--space-2);\n  font-size: var(--text-base);\n  line-height: var(--leading-6);\n  border: none;\n  cursor: pointer;\n\n  ", "\n\n  ", "\n\n  svg {\n    fill: currentColor;\n    width: var(--space-4);\n    height: var(--space-4);\n    margin-right: var(--space-2);\n  }\n\n  & > ", " {\n    display: none;\n    margin-top: calc(0px - var(--space-1));\n  }\n  &.opened > ", " {\n    display: block;\n  }\n  &.opened.left > ", " {\n    left: auto;\n    right: 100%;\n  }\n"])), function (_a) {
+    var $withArrow = _a.$withArrow;
+    return $withArrow && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      &::after {\n        content: '';\n        position: absolute;\n        right: var(--space-2);\n        top: 50%;\n        transform: translateY(-50%);\n        border: 4px solid transparent;\n        border-left-color: var(--color-neutral-600);\n      }\n    "], ["\n      &::after {\n        content: '';\n        position: absolute;\n        right: var(--space-2);\n        top: 50%;\n        transform: translateY(-50%);\n        border: 4px solid transparent;\n        border-left-color: var(--color-neutral-600);\n      }\n    "])));
+}, function (_a) {
+    var $color = _a.$color, disabled = _a.disabled;
+    return disabled
+        ? (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          color: var(--color-neutral-300);\n          background-color: var(--color-neutral-100);\n          cursor: default;\n        "], ["\n          color: var(--color-neutral-300);\n          background-color: var(--color-neutral-100);\n          cursor: default;\n        "]))) : $color
+        ? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n          color: var(--color-", "-600);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-", "-200);\n          }\n        "], ["\n          color: var(--color-", "-600);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-", "-200);\n          }\n        "])), $color, $color) : (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n          color: var(--color-neutral-900);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-neutral-200);\n          }\n        "], ["\n          color: var(--color-neutral-900);\n          background-color: var(--color-neutral-100);\n          &:hover {\n            background-color: var(--color-neutral-200);\n          }\n        "])));
+}, exports.SubMenu, exports.SubMenu, exports.SubMenu);
+exports.MenuItemContainer.displayName = 'MenuItemContainer';
+exports.Divider = styled_components_1.default.div.attrs({
+    className: 'Divider',
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  border-top: 1px solid var(--color-neutral-200);\n  margin: var(--space-1) 0;\n"], ["\n  border-top: 1px solid var(--color-neutral-200);\n  margin: var(--space-1) 0;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

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

@@ -0,0 +1,9 @@
+import { FC, PropsWithChildren } from 'react';
+type MessageType = 'success' | 'info' | 'warning' | 'error';
+type MessageProps = PropsWithChildren<{
+    className?: string;
+    title?: string;
+    type: MessageType;
+}>;
+export declare const Message: FC<MessageProps>;
+export {};

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

@@ -0,0 +1,53 @@
+"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.Message = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles = __importStar(require("./styles"));
+var Icons_1 = require("../../../Icons");
+var colorsMap = {
+    success: {
+        baseColor: 'green',
+        iconComponent: Icons_1.CircleCheckIcon,
+    },
+    info: {
+        baseColor: 'sky',
+        iconComponent: Icons_1.CircleInfoIcon,
+    },
+    warning: {
+        baseColor: 'amber',
+        iconComponent: Icons_1.TriangleExclamationIcon,
+    },
+    error: {
+        baseColor: 'red',
+        iconComponent: Icons_1.CircleXMarkIcon,
+    },
+};
+var Message = function (_a) {
+    var children = _a.children, title = _a.title, type = _a.type;
+    var _b = colorsMap[type], Icon = _b.iconComponent, _c = _b.baseColor, baseColor = _c === void 0 ? 'neutral' : _c;
+    return ((0, jsx_runtime_1.jsxs)(styles.MessageContainer, { "$baseColor": baseColor, children: [(0, jsx_runtime_1.jsx)(Icon, { className: "MessageIcon" }), (0, jsx_runtime_1.jsxs)(styles.MessageContent, { children: [title && (0, jsx_runtime_1.jsx)("h3", { children: title }), (0, jsx_runtime_1.jsx)("div", { children: children })] })] }));
+};
+exports.Message = Message;

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

@@ -0,0 +1,9 @@
+import { ThemeColor } from '../../../providers';
+export declare const MessageContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<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>, {
+    $baseColor: ThemeColor;
+}>> & string;
+export declare const MessageContent: 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;