@nu-art/ts-styles 0.200.67

package/defaults.scss

@@ -0,0 +1,18 @@
+@import "./styles/components/TS_Dropdown/default";
+@import "./styles/components/TS_Input/default";
+@import "./styles/components/TS_Button/default";
+@import "./styles/components/TS_TextArea/default";
+@import "./styles/components/TS_Tabs/default";
+@import "./styles/components/TS_Table/default";
+@import "./styles/components/TS_Tooltip/default";
+@import "./styles/components/Dialogs/default";
+@import "./styles/components/TS_Radio/default";
+@import "./styles/components/TS_BusyButton/default";
+@import "./styles/components/TS_Checkbox/default";
+@import "./styles/components/TS_Tree/default";
+@import "./styles/components/TS_EditableText/default";
+@import "./styles/components/TS_PropRenderer/default";
+@import "./styles/components/QScrollWrapper/default";
+@import "./styles/components/TS_Workspace/default";
+@import "./styles/components/TS_Dialog/default";
+@import "./styles/components/TS_Toast/default";

package/icons/icons.d.ts

@@ -0,0 +1,73 @@
+import { HTMLAttributes } from 'react';
+export type IconStyle = {
+    color: string;
+    width: number;
+    height: number;
+};
+export type IconAttributes = HTMLAttributes<HTMLDivElement>;
+export type IconData = {
+    ratio: number;
+    value: string;
+};
+export declare const iconsRenderer: (key: IconData, props: IconAttributes) => JSX.Element;
+export declare const TS_Icons: {
+    Filter: {
+        component: (props: IconAttributes) => JSX.Element;
+        url: any;
+    };
+    Search: {
+        component: (props: IconAttributes) => JSX.Element;
+        url: any;
+    };
+    attention: {
+        component: (props: IconAttributes) => JSX.Element;
+        url: any;
+    };
+    bell: {
+        component: (props: IconAttributes) => JSX.Element;
+        url: any;
+    };
+    bin: {
+        component: (props: IconAttributes) => JSX.Element;
+        url: any;
+    };
+    more: {
+        component: (props: IconAttributes) => JSX.Element;
+        url: any;
+    };
+    treeCollapse: {
+        component: (props: IconAttributes) => JSX.Element;
+        url: any;
+    };
+    v: {
+        component: (props: IconAttributes) => JSX.Element;
+        url: any;
+    };
+    x: {
+        component: (props: IconAttributes) => JSX.Element;
+        url: any;
+    };
+    gear: {
+        component: (props: IconAttributes) => JSX.Element;
+        url: any;
+    };
+    information: {
+        component: (props: IconAttributes) => JSX.Element;
+        url: any;
+    };
+    filterStop: {
+        component: (props: IconAttributes) => JSX.Element;
+        url: any;
+    };
+    clear: {
+        component: (props: IconAttributes) => JSX.Element;
+        url: any;
+    };
+    save: {
+        component: (props: IconAttributes) => JSX.Element;
+        url: any;
+    };
+};
+export declare const tsIconKeys: () => TSIcons[];
+export type TSIconsType = typeof TS_Icons;
+export type TSIcons = keyof TSIconsType;

package/icons/icons.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.tsIconKeys = exports.TS_Icons = exports.iconsRenderer = void 0;
+const React = require("react");
+const ts_common_1 = require("@nu-art/ts-common");
+const icon__filter_svg_1 = require("./svgs/icon__filter.svg");
+const icon__search_svg_1 = require("./svgs/icon__search.svg");
+const icon__attention_svg_1 = require("./svgs/icon__attention.svg");
+const icon__bell_svg_1 = require("./svgs/icon__bell.svg");
+const icon__bin_svg_1 = require("./svgs/icon__bin.svg");
+const icon__x_svg_1 = require("./svgs/icon__x.svg");
+const icon__v_svg_1 = require("./svgs/icon__v.svg");
+const icon__more_svg_1 = require("./svgs/icon__more.svg");
+const icon__treeCollapse_svg_1 = require("./svgs/icon__treeCollapse.svg");
+const icon__gear_svg_1 = require("./svgs/icon__gear.svg");
+const icon__information_svg_1 = require("./svgs/icon__information.svg");
+const icon__filter_stop_svg_1 = require("./svgs/icon__filter-stop.svg");
+const icon__clear_svg_1 = require("./svgs/icon__clear.svg");
+const icon__save_svg_1 = require("./svgs/icon__save.svg");
+class RenderIcon extends React.Component {
+    render() {
+        var _a;
+        const className = 'icon--wrapper' + ((_a = this.props.className) !== null && _a !== void 0 ? _a : '');
+        return React.createElement("div", Object.assign({}, this.props, { className: className, style: { WebkitMaskImage: `url(${this.props.icon})`, maskImage: `url(${this.props.icon})` } }));
+    }
+}
+const iconsRenderer = (key, props) => {
+    return React.createElement(RenderIcon, Object.assign({}, props, { icon: key.value }));
+};
+exports.iconsRenderer = iconsRenderer;
+const genIcon = (Icon) => {
+    return (props) => {
+        var _a;
+        return React.createElement("div", Object.assign({}, props, { className: 'icon--wrapper' + ((_a = props.className) !== null && _a !== void 0 ? _a : '') }),
+            React.createElement(Icon, null));
+    };
+};
+exports.TS_Icons = {
+    Filter: { component: genIcon(icon__filter_svg_1.ReactComponent), url: icon__filter_svg_1.default },
+    Search: { component: genIcon(icon__search_svg_1.ReactComponent), url: icon__search_svg_1.default },
+    attention: { component: genIcon(icon__attention_svg_1.ReactComponent), url: icon__attention_svg_1.default },
+    bell: { component: genIcon(icon__bell_svg_1.ReactComponent), url: icon__bell_svg_1.default },
+    bin: { component: genIcon(icon__bin_svg_1.ReactComponent), url: icon__bin_svg_1.default },
+    more: { component: genIcon(icon__more_svg_1.ReactComponent), url: icon__more_svg_1.default },
+    treeCollapse: { component: genIcon(icon__treeCollapse_svg_1.ReactComponent), url: icon__treeCollapse_svg_1.default },
+    v: { component: genIcon(icon__v_svg_1.ReactComponent), url: icon__v_svg_1.default },
+    x: { component: genIcon(icon__x_svg_1.ReactComponent), url: icon__x_svg_1.default },
+    gear: { component: genIcon(icon__gear_svg_1.ReactComponent), url: icon__gear_svg_1.default },
+    information: { component: genIcon(icon__information_svg_1.ReactComponent), url: icon__information_svg_1.default },
+    filterStop: { component: genIcon(icon__filter_stop_svg_1.ReactComponent), url: icon__filter_stop_svg_1.default },
+    clear: { component: genIcon(icon__clear_svg_1.ReactComponent), url: icon__clear_svg_1.default },
+    save: { component: genIcon(icon__save_svg_1.ReactComponent), url: icon__save_svg_1.default },
+};
+const tsIconKeys = () => {
+    return (0, ts_common_1._keys)(exports.TS_Icons);
+};
+exports.tsIconKeys = tsIconKeys;

package/icons/index.d.ts

@@ -0,0 +1 @@
+export * from './icons';

package/icons/index.js

@@ -0,0 +1,17 @@
+"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 });
+__exportStar(require("./icons"), exports);

package/icons/svgs/icon__attention.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56" stroke-width="0">
+    <path d="M28,0A28,28,0,1,1,0,28,28,28,0,0,1,28,0" fill="#000000"/>
+    <path
+        d="M28.022,43.652a4,4,0,0,1-2.836-1.042,3.326,3.326,0,0,1-1.118-2.525A3.218,3.218,0,0,1,25.2,37.55a4.137,4.137,0,0,1,2.826-.988,4.015,4.015,0,0,1,2.814,1,3.271,3.271,0,0,1,1.1,2.524,3.342,3.342,0,0,1-1.085,2.557,3.983,3.983,0,0,1-2.825,1.01m3.523-31.3-.838,21.227h-5.5l-.8-21.227Z"
+        fill="#fff"
+        data-no-fill="true"
+    />
+</svg>

package/icons/svgs/icon__bell.svg

@@ -0,0 +1,6 @@
+<svg id="Bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="0">
+    <g fill="none" fill-rule="evenodd">
+        <path fill="#000"
+              d="M12 2.25c3.22 0 5.908 2.455 6.2 5.662l.446 4.91c.04.432.299.812.686 1.005l.003.002c.867.434 1.415 1.32 1.415 2.289v.382c0 1.243-1.007 2.25-2.25 2.25h-3.75v.5c0 1.463-1.142 2.658-2.582 2.745L12 22c-1.519 0-2.75-1.231-2.75-2.75v-.5H5.5c-1.243 0-2.25-1.007-2.25-2.25v-.382c0-.97.548-1.855 1.415-2.289l.003-.002c.387-.193.647-.573.686-1.004L5.8 7.912C6.092 4.705 8.78 2.25 12 2.25zm1.25 16.5h-2.5v.5c0 .647.492 1.18 1.122 1.244L12 20.5c.69 0 1.25-.56 1.25-1.25v-.5zM12 3.75c-2.444 0-4.485 1.864-4.706 4.297l-.446 4.911c-.086.949-.657 1.785-1.51 2.211-.361.181-.588.548-.588.949v.382c0 .414.336.75.75.75h13c.414 0 .75-.336.75-.75v-.382c0-.401-.227-.768-.585-.947-.856-.428-1.427-1.264-1.513-2.213l-.446-4.91C16.485 5.613 14.444 3.75 12 3.75z"/>
+    </g>
+</svg>

package/icons/svgs/icon__bin.svg

@@ -0,0 +1,10 @@
+<svg class="svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M210.71872 291.04128l63.52896 0 29.57312 520.99072c0.59392 10.83392 9.58464 19.31264 20.43904 19.31264l387.74784 0c10.8544 0 19.84512-8.4992 20.43904-19.33312l29.10208-520.97024 63.56992 0c11.32544 0 20.48-9.17504 20.48-20.48s-9.15456-20.48-20.48-20.48l-76.61568 0c-1.1264 0-2.10944 0.47104-3.19488 0.63488-1.06496-0.16384-2.048-0.63488-3.13344-0.63488l-107.43808 0L634.73664 196.48512c0-11.30496-9.15456-20.48-20.48-20.48l-192.69632 0c-11.32544 0-20.48 9.17504-20.48 20.48l0 53.59616-107.47904 0c-0.94208 0-1.78176 0.43008-2.70336 0.55296-0.94208-0.14336-1.78176-0.55296-2.7648-0.55296l-77.39392 0c-11.32544 0-20.48 9.17504-20.48 20.48S199.39328 291.04128 210.71872 291.04128zM442.04032 216.96512l151.73632 0 0 33.11616-151.73632 0L442.04032 216.96512zM720.52736 291.04128 692.6336 790.40512 343.61344 790.40512l-28.34432-499.36384L720.52736 291.04128z"/>
+    <path
+        d="M416.50176 752.00512c0.4096 0 0.77824 0 1.18784-0.02048 11.30496-0.63488 19.92704-10.32192 19.27168-21.6064l-21.54496-379.5968c-0.63488-11.30496-10.58816-19.80416-21.6064-19.29216-11.30496 0.63488-19.92704 10.32192-19.27168 21.6064l21.54496 379.5968C396.6976 743.58784 405.72928 752.00512 416.50176 752.00512z"/>
+    <path
+        d="M617.41056 751.98464c0.4096 0.02048 0.77824 0.02048 1.18784 0.02048 10.77248 0 19.80416-8.41728 20.41856-19.31264l21.54496-379.5968c0.63488-11.28448-7.9872-20.97152-19.27168-21.6064-11.12064-0.47104-20.95104 7.9872-21.6064 19.29216l-21.54496 379.5968C597.504 741.66272 606.12608 751.34976 617.41056 751.98464z"/>
+    <path
+        d="M517.91872 752.00512c11.32544 0 20.48-9.17504 20.48-20.48L538.39872 351.92832c0-11.30496-9.15456-20.48-20.48-20.48s-20.48 9.17504-20.48 20.48l0 379.5968C497.43872 742.83008 506.59328 752.00512 517.91872 752.00512z"/>
+</svg>

package/icons/svgs/icon__clear.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="SVGRepo_iconCarrier">
+        <path
+            d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM15.36 14.3C15.65 14.59 15.65 15.07 15.36 15.36C15.21 15.51 15.02 15.58 14.83 15.58C14.64 15.58 14.45 15.51 14.3 15.36L12 13.06L9.7 15.36C9.55 15.51 9.36 15.58 9.17 15.58C8.98 15.58 8.79 15.51 8.64 15.36C8.35 15.07 8.35 14.59 8.64 14.3L10.94 12L8.64 9.7C8.35 9.41 8.35 8.93 8.64 8.64C8.93 8.35 9.41 8.35 9.7 8.64L12 10.94L14.3 8.64C14.59 8.35 15.07 8.35 15.36 8.64C15.65 8.93 15.65 9.41 15.36 9.7L13.06 12L15.36 14.3Z"
+            fill="#686868"/>
+    </g>
+</svg>

package/icons/svgs/icon__filter-stop.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <defs>
+        <clipPath id="clip-path">
+            <rect id="Rectangle_28476" width="13.106" height="12.288" transform="translate(0 0)" fill="none"/>
+        </clipPath>
+    </defs>
+    <g transform="translate(1 2)">
+        <g clip-path="url(#clip-path)">
+            <path d="M7.3,9.408v1.453l-1.405-.7V8l-1-1V10.47a.5.5,0,0,0,.277.447l2.405,1.2a.5.5,0,0,0,.723-.448V10.408Z"/>
+            <path d="M3.48,1.35h8.048L7.841,5.711l.709.709,4.438-5.247A.5.5,0,0,0,12.606.35H2.48Z"/>
+            <path d="M11.688,12.288a.6.6,0,0,1-.424-.176L.176,1.024A.6.6,0,0,1,1.024.176L12.112,11.264a.6.6,0,0,1-.424,1.024"/>
+        </g>
+    </g>
+</svg>

package/icons/svgs/icon__filter.svg

@@ -0,0 +1,5 @@
+<svg id="Filter_Enable" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-width="0">
+    <path id="Icon_feather-filter" data-name="Icon feather-filter"
+          d="M3,4H15.025a.5.5,0,0,1,.382.823l-4.692,5.548v4.952a.5.5,0,0,1-.724.447l-2.405-1.2a.5.5,0,0,1-.276-.447V10.371L2.618,4.823A.5.5,0,0,1,3,4ZM13.947,5H4.078L8.192,9.865a.5.5,0,0,1,.118.323v3.623l1.405.7V10.188a.5.5,0,0,1,.118-.323Z"
+          transform="translate(-1.5 -2)"/>
+</svg>

package/icons/svgs/icon__gear.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" stroke-width="0">
+    <g>
+        <path
+            d="M 8.109375 2.921875 C 7.734375 3.023438 7.429688 3.105469 7.425781 3.109375 C 7.425781 3.113281 7.417969 3.425781 7.410156 3.804688 C 7.40625 4.183594 7.398438 4.554688 7.394531 4.628906 L 7.386719 4.761719 L 7.316406 4.796875 C 7.210938 4.851562 7.011719 4.964844 6.886719 5.042969 L 6.777344 5.109375 L 6.640625 5.035156 C 6.566406 4.996094 6.242188 4.816406 5.921875 4.636719 L 5.335938 4.3125 L 4.832031 4.8125 L 4.328125 5.316406 L 4.726562 6.027344 C 4.941406 6.421875 5.121094 6.746094 5.121094 6.75 C 5.121094 6.757812 5.101562 6.785156 5.082031 6.816406 C 5.019531 6.910156 4.898438 7.117188 4.824219 7.25 L 4.761719 7.378906 L 4.265625 7.386719 C 3.996094 7.390625 3.628906 7.394531 3.449219 7.398438 L 3.128906 7.40625 L 2.945312 8.089844 C 2.84375 8.464844 2.765625 8.777344 2.769531 8.78125 C 2.773438 8.785156 3.082031 8.972656 3.460938 9.199219 L 4.144531 9.609375 L 4.144531 10.355469 L 3.464844 10.761719 C 3.089844 10.988281 2.78125 11.175781 2.773438 11.179688 C 2.765625 11.183594 2.808594 11.367188 2.945312 11.867188 C 3.046875 12.242188 3.128906 12.550781 3.132812 12.554688 C 3.132812 12.554688 3.441406 12.5625 3.820312 12.570312 C 4.195312 12.574219 4.558594 12.582031 4.628906 12.585938 L 4.75 12.59375 L 4.820312 12.726562 C 4.882812 12.851562 5.039062 13.117188 5.09375 13.199219 L 5.117188 13.230469 L 4.730469 13.933594 C 4.515625 14.316406 4.339844 14.636719 4.339844 14.640625 C 4.339844 14.640625 4.566406 14.871094 4.839844 15.144531 L 5.34375 15.648438 L 5.648438 15.476562 C 5.816406 15.382812 6.132812 15.210938 6.351562 15.089844 L 6.75 14.867188 L 6.867188 14.941406 C 7.007812 15.03125 7.179688 15.128906 7.308594 15.195312 L 7.398438 15.238281 L 7.402344 15.398438 C 7.402344 15.875 7.425781 16.839844 7.433594 16.847656 C 7.445312 16.859375 8.742188 17.210938 8.78125 17.214844 C 8.796875 17.214844 8.890625 17.066406 9.214844 16.53125 L 9.625 15.847656 L 10.003906 15.84375 L 10.382812 15.84375 L 10.792969 16.53125 C 11.019531 16.90625 11.203125 17.214844 11.203125 17.21875 C 11.207031 17.222656 12.5625 16.859375 12.570312 16.851562 C 12.574219 16.847656 12.585938 16.5625 12.589844 16.21875 C 12.59375 15.875 12.601562 15.511719 12.605469 15.414062 L 12.613281 15.230469 L 12.730469 15.167969 C 12.847656 15.105469 13.117188 14.945312 13.199219 14.890625 L 13.242188 14.859375 L 13.324219 14.90625 C 13.367188 14.929688 13.6875 15.105469 14.035156 15.300781 L 14.664062 15.648438 L 15.167969 15.144531 L 15.671875 14.644531 L 15.277344 13.933594 L 14.882812 13.21875 L 14.96875 13.078125 C 15.042969 12.957031 15.132812 12.800781 15.222656 12.625 L 15.246094 12.585938 L 15.929688 12.574219 C 16.308594 12.566406 16.671875 12.558594 16.742188 12.558594 L 16.871094 12.554688 L 17.050781 11.894531 C 17.148438 11.53125 17.230469 11.222656 17.234375 11.210938 C 17.238281 11.183594 17.21875 11.171875 16.542969 10.765625 L 15.84375 10.347656 L 15.84375 9.613281 L 16.542969 9.195312 C 17.0625 8.882812 17.238281 8.773438 17.234375 8.761719 C 17.234375 8.753906 17.148438 8.445312 17.050781 8.078125 C 16.953125 7.710938 16.871094 7.40625 16.867188 7.40625 C 16.867188 7.402344 16.503906 7.398438 16.066406 7.390625 C 15.625 7.382812 15.253906 7.378906 15.242188 7.375 C 15.226562 7.371094 15.210938 7.347656 15.183594 7.296875 C 15.128906 7.1875 15.027344 7.007812 14.941406 6.878906 L 14.867188 6.757812 L 15.265625 6.046875 C 15.480469 5.652344 15.660156 5.328125 15.660156 5.324219 C 15.660156 5.3125 14.667969 4.320312 14.65625 4.320312 C 14.652344 4.320312 14.339844 4.492188 13.964844 4.699219 C 13.585938 4.910156 13.261719 5.089844 13.242188 5.097656 C 13.214844 5.113281 13.210938 5.109375 13.125 5.054688 C 13.011719 4.980469 12.800781 4.859375 12.6875 4.804688 L 12.601562 4.761719 L 12.601562 4.652344 C 12.601562 4.527344 12.578125 3.117188 12.574219 3.113281 C 12.574219 3.113281 12.265625 3.027344 11.890625 2.925781 L 11.203125 2.742188 L 11.183594 2.777344 C 11.171875 2.800781 10.980469 3.117188 10.757812 3.484375 L 10.355469 4.152344 L 9.644531 4.152344 L 9.21875 3.445312 C 8.984375 3.058594 8.792969 2.738281 8.789062 2.742188 C 8.785156 2.742188 8.480469 2.824219 8.109375 2.921875 Z M 10.429688 6.453125 C 11.214844 6.558594 11.917969 6.890625 12.46875 7.425781 C 13.066406 8.003906 13.433594 8.75 13.535156 9.589844 C 13.558594 9.789062 13.558594 10.171875 13.535156 10.371094 C 13.390625 11.589844 12.679688 12.609375 11.601562 13.152344 C 10.941406 13.488281 10.222656 13.605469 9.496094 13.5 C 8.0625 13.292969 6.90625 12.246094 6.550781 10.835938 C 6.519531 10.710938 6.492188 10.554688 6.46875 10.390625 C 6.449219 10.242188 6.449219 9.699219 6.472656 9.539062 C 6.53125 9.125 6.636719 8.777344 6.816406 8.414062 C 7.140625 7.753906 7.636719 7.230469 8.292969 6.867188 C 8.683594 6.652344 9.183594 6.492188 9.613281 6.449219 C 9.675781 6.445312 9.738281 6.4375 9.753906 6.4375 C 9.828125 6.425781 10.3125 6.4375 10.429688 6.453125 Z M 10.429688 6.453125 "/>
+    </g>
+</svg>

package/icons/svgs/icon__information.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 416.979 416.979" xml:space="preserve" stroke-width="0">
+<g>
+	<path d="M356.004,61.156c-81.37-81.47-213.377-81.551-294.848-0.182c-81.47,81.371-81.552,213.379-0.181,294.85
+		c81.369,81.47,213.378,81.551,294.849,0.181C437.293,274.636,437.375,142.626,356.004,61.156z M237.6,340.786
+		c0,3.217-2.607,5.822-5.822,5.822h-46.576c-3.215,0-5.822-2.605-5.822-5.822V167.885c0-3.217,2.607-5.822,5.822-5.822h46.576
+		c3.215,0,5.822,2.604,5.822,5.822V340.786z M208.49,137.901c-18.618,0-33.766-15.146-33.766-33.765
+		c0-18.617,15.147-33.766,33.766-33.766c18.619,0,33.766,15.148,33.766,33.766C242.256,122.755,227.107,137.901,208.49,137.901z"/>
+</g>
+</svg>

package/icons/svgs/icon__more.svg

@@ -0,0 +1,5 @@
+<svg id="More" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <path
+        d="M19.188,8.75a2,2,0,1,0-2,2A2.006,2.006,0,0,0,19.188,8.75Zm0,12a2,2,0,1,0-2,2A2.006,2.006,0,0,0,19.188,20.75Zm0-6a2,2,0,1,0-2,2A2.006,2.006,0,0,0,19.188,14.75Z"
+        transform="translate(-9.188 -6.75)"/>
+</svg>

package/icons/svgs/icon__save.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 448 512">
+    <path
+        d="M48 96V416c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V170.5c0-4.2-1.7-8.3-4.7-11.3l33.9-33.9c12 12 18.7 28.3 18.7 45.3V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96C0 60.7 28.7 32 64 32H309.5c17 0 33.3 6.7 45.3 18.7l74.5 74.5-33.9 33.9L320.8 84.7c-.3-.3-.5-.5-.8-.8V184c0 13.3-10.7 24-24 24H104c-13.3 0-24-10.7-24-24V80H64c-8.8 0-16 7.2-16 16zm80-16v80H272V80H128zm32 240a64 64 0 1 1 128 0 64 64 0 1 1 -128 0z"/>
+</svg>

package/icons/svgs/icon__search.svg

@@ -0,0 +1,6 @@
+<svg id="Search_Enable_16x16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+    <rect id="Rectangle_27893" data-name="Rectangle 27893" width="16" height="16" fill="none" opacity="0"/>
+    <path id="Icon_ionic-ios-search" data-name="Icon ionic-ios-search"
+          d="M17.347,16.555l-3.616-3.649a5.153,5.153,0,1,0-.782.792l3.592,3.626a.556.556,0,0,0,.785.02A.56.56,0,0,0,17.347,16.555ZM9.683,13.742a4.069,4.069,0,1,1,2.878-1.192A4.043,4.043,0,0,1,9.683,13.742Z"
+          transform="translate(-3 -2.993)" stroke="#000" stroke-width="0.2"/>
+</svg>

package/icons/svgs/icon__treeCollapse.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-width="0">
+    <path d="M6,0,0,6,1.41,7.41,6,2.83l4.59,4.58L12,6Z" transform="translate(11.41 2) rotate(90)" fill="#a1a1a1"/>
+</svg>

package/icons/svgs/icon__v.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 24" stroke-width="0">
+    <path fill="#000" fill-rule="evenodd" stroke="#000" stroke-width="1"
+          d="M24.71 1.084a.844.844 0 0 0-1.192.208L9.978 20.81l-7.59-7.75a.842.842 0 0 0-1.209 0 .886.886 0 0 0 0 1.236l8.114 8.285a.839.839 0 0 0 .766.495.85.85 0 0 0 .698-.368L24.914 2.3a.886.886 0 0 0-.203-1.217"/>
+</svg>

package/icons/svgs/icon__x.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10" stroke-width="0">
+    <path fill="#000" fill-rule="evenodd"
+          d="M8.3.757L5 4.057 1.7.757a.667.667 0 0 0-.943.943l3.3 3.3-3.3 3.3a.667.667 0 0 0 .943.943l3.3-3.3 3.3 3.3a.667.667 0 0 0 .943-.943L5.943 5l3.3-3.3A.667.667 0 0 0 8.3.757"/>
+</svg>

package/index.d.ts

@@ -0,0 +1 @@
+export * from './icons';

package/index.js

@@ -0,0 +1,17 @@
+"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 });
+__exportStar(require("./icons"), exports);

package/index.scss

@@ -0,0 +1 @@
+@forward "./styles/functions-and-mixins";

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@nu-art/ts-styles",
+  "version": "0.200.67",
+  "author": "nu-art",
+  "description": "Styles by Cipher",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "tsc"
+  },
+  "license": "ISC",
+  "publishConfig": {
+    "directory": "dist",
+    "linkDirectory": true
+  },
+  "dependencies": {
+    "@nu-art/ts-common": "0.200.67",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.29"
+  }
+}

package/styles/functions-and-mixins/_colors.scss

@@ -0,0 +1,27 @@
+@use 'sass:math';
+@use 'sass:list';
+
+//(Dir en) Grey
+$darker_grey: #504c4c;
+$almost-pure-grey: #707070;
+$sidewalk_grey: #8A959B;
+$very-light-grey: #F7F7F7;
+$scroll-track-background-grey: #eeeeee;
+$scroll-thumb-grey: #cccccc;
+
+//Others
+$white: white;
+$very_pastel_teal: #d2e0e2;
+$very-light-cyan: #f2f8ff;
+$near_white: #f0f0f0;
+$very_pastel_grey: #e5e9ee;
+
+//Uniques
+$unique_light_blue: #88DFFF;
+$unique_green: #4FC63C;
+$unique_orange: #FFA808;
+$unique_red: #F35B5B;
+$unique_glowing_red: #FF3D64;
+$unique_turquoise: #1DDBC6;
+$unique_green_select: #D6EEF0;
+$unique_light_blue_select: #F2F8FF;

package/styles/functions-and-mixins/_palette.scss

@@ -0,0 +1,69 @@
+@use 'sass:list';
+@use 'node_modules/@nu-art/thunderstorm/styles' as ts;
+
+$colorChunks: 7;
+$_black: ts.buildPalette(#000000, $colorChunks);
+$_gray-blue: ts.buildPalette(#2C3541, $colorChunks);
+$_dark-blue: ts.buildPalette(#004A72, $colorChunks);
+$_dark-green: ts.buildPalette(#2E5651, $colorChunks);
+$_purple: ts.buildPalette(#401F5C, $colorChunks);
+$_pink: ts.buildPalette(#8F1657, $colorChunks);
+$_ochre: ts.buildPalette(#876019, $colorChunks);
+$_orange: ts.buildPalette(#B94804, $colorChunks);
+$_red: ts.buildPalette(#D8042E, $colorChunks);
+$_gray: ts.buildPalette(#808080, $colorChunks);
+$_light-gray: ts.buildPalette(#D3D3D3, $colorChunks);
+$_monochromatic: ts.buildPalette(#9CAEB7, $colorChunks);
+$_green: ts.buildPalette(#2AA10F, $colorChunks);
+
+@function monochromatic($i) {
+  @return #{list.nth($_monochromatic,$i)}
+}
+
+@function black($i) {
+  @return #{list.nth($_black, $i)}
+}
+
+@function gray-blue($i) {
+  @return #{list.nth($_gray-blue, $i)}
+}
+
+@function dark-blue($i) {
+  @return #{list.nth($_dark-blue, $i)}
+}
+
+@function dark-green($i) {
+  @return #{list.nth($_dark-green, $i)}
+}
+
+@function green($i) {
+  @return #{list.nth($_green,$i)}
+}
+
+@function purple($i) {
+  @return #{list.nth($_purple, $i)}
+}
+
+@function pink($i) {
+  @return #{list.nth($_pink, $i)}
+}
+
+@function ochre($i) {
+  @return #{list.nth($_ochre, $i)}
+}
+
+@function orange($i) {
+  @return #{list.nth($_orange, $i)}
+}
+
+@function red($i) {
+  @return #{list.nth($_red, $i)}
+}
+
+@function gray($i) {
+  @return #{list.nth($_gray,$i)}
+}
+
+@function light-gray($i) {
+  @return #{list.nth($_light-gray,$i)}
+}

package/styles/functions-and-mixins/advisor.scss

@@ -0,0 +1,50 @@
+@use 'palette' as palette;
+@use 'components' as components;
+
+@mixin advisor-button-colors {
+  @include components.mouseInteractiveBackground(palette.gray(7), white);
+  border: 1px solid #CFD4D8;
+}
+
+@mixin advisor-rule-out-item {
+  cursor: pointer;
+  width: 100%;
+  height: 26px;
+  background: #EDF1F3;
+  border: 1px solid #CFD4D8;
+  padding: 0 10px;
+  justify-content: space-between;
+  border-radius: 1px;
+  margin: 4px 0;
+  color: black;
+
+  .rule-out-action__name {
+    font: {
+      size: 14px;
+      family: Arial;
+    }
+  }
+
+  &:hover {
+    background: #F5F7F8;
+  }
+
+  &:active {
+    background: #D6DBDF;
+  }
+
+  &.pending {
+    box-shadow: inset 1px 1px 0px #00000029;
+    background: #F5F7F8;
+
+    .rule-out-action__name {
+      color: #001E95;
+    }
+
+    .icon--wrapper {
+      svg path {
+        fill: #001E95;
+      }
+    }
+  }
+}

package/styles/functions-and-mixins/buttons.scss

@@ -0,0 +1,14 @@
+@mixin circleButton {
+  width: 25px;
+  height: 25px;
+  border: 3px solid black;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font: {
+    size: 20px;
+    weight: 600;
+  }
+  cursor: pointer;
+}

package/styles/functions-and-mixins/components.scss

@@ -0,0 +1,181 @@
+@use 'palette' as palette;
+@use 'sass:list';
+
+@mixin customScrollbar($direction,$showOnlyOnHover: false) {
+  $trackBG: palette.gray(7);
+  $thumbBG: palette.dark-blue(1);
+  //Scrollbar
+  &::-webkit-scrollbar {
+    background-color: $trackBG;
+  }
+
+  //Scrollbar Handle
+  &::-webkit-scrollbar-thumb {
+    background-color: $thumbBG;
+    border: 2px solid $trackBG;
+    border-radius: 4px;
+  }
+
+  //Direction Diff
+  @if $direction == 'horizontal' {
+    overflow-x: auto;
+    //noinspection ALL
+    @supports (overflow-x: overlay) {
+      overflow-x: overlay;
+    }
+    &::-webkit-scrollbar {
+      height: 12px;
+    }
+  }
+
+  @if $direction == 'vertical' {
+    overflow-y: auto;
+    //noinspection ALL
+    @supports (overflow-y: overlay) {
+      overflow-y: overlay;
+    }
+    &::-webkit-scrollbar {
+      width: 9px;
+    }
+  }
+
+  @if $direction == 'both' {
+    overflow: auto;
+    //noinspection ALL
+    @supports (overflow: overlay) {
+      overflow: overlay;
+    }
+    &::-webkit-scrollbar {
+      width: 9px;
+      height: 12px;
+    }
+  }
+
+  @if $showOnlyOnHover {
+    &::-webkit-scrollbar,
+    &::-webkit-scrollbar-thumb {
+      visibility: hidden;
+    }
+
+    &:hover {
+      &::-webkit-scrollbar,
+      &::-webkit-scrollbar-thumb {
+        visibility: visible;
+      }
+    }
+  }
+}
+
+@mixin fancyDropDown {
+  .ts-overlay {
+    background: transparent;
+  }
+
+  .ts-dropdown__header {
+    border: 2px solid black;
+    border-radius: 10px;
+    position: relative;
+
+    .ts-input {
+      background: transparent;
+      padding: 0 5px;
+      border: none;
+      font: {
+        size: 13px;
+        weight: bold;
+      }
+    }
+  }
+
+  .ts-dropdown__items-container {
+    @include customScrollbar('both');
+    border: 2px solid black;
+    border-top: none;
+    padding-top: 18px;
+    transform: translateY(-18px);
+
+    .ts-dropdown__unselect-item {
+      font-size: 13px;
+    }
+
+    .ts-dropdown__items {
+      overflow-y: visible;
+      border: none
+    }
+
+    .ts-tree__node {
+      .node-data {
+        font-size: 13px;
+      }
+    }
+
+    &.inverted {
+      border-top: 2px solid black;
+      border-bottom: none;
+      padding-top: 0;
+      padding-bottom: 18px;
+      transform: translateY(18px);
+    }
+  }
+}
+
+@mixin mouseInteractiveBackground($background,$hoverBackground: $background, $activeBackground: $hoverBackground) {
+  background: $background;
+  cursor: pointer;
+
+  &:hover {
+    background: $hoverBackground;
+  }
+
+  &:active {
+    background: $activeBackground;
+  }
+}
+
+@mixin setRule($rule,$value) {
+  $rule: $value;
+}
+
+@mixin setIconProp($prop,$value) {
+  *:not([data-no-#{$prop}="true"]):not(g) {
+    #{$prop}: $value;
+  }
+}
+
+@mixin mouseInteractiveIcon($color,$hoverColor:$color,$activeColor:$hoverColor,$transition: 0) {
+  $rules: fill, stroke;
+  cursor: pointer;
+
+  @if $transition != 0 {
+    $transitionRules: '';
+    @each $rule in $rules {
+      $i: index($rules, $rule);
+      $transitionRules: $transitionRules + #{$rule $transition};
+      @if $i != length($rules) {
+        $transitionRules: $transitionRules + ', ';
+      }
+    }
+    *:not(g) {
+      transition: #{$transitionRules};
+    }
+  }
+
+  @each $rule in $rules {
+    @include setIconProp($rule, $color);
+    &:hover {
+      @include setIconProp($rule, $hoverColor)
+    }
+    &:active {
+      @include setIconProp($rule, $activeColor)
+    }
+    //*:not([data-no-#{$rule}="true"]):not(g) {
+    //  #{$rule}: $color;
+    //}
+    //&:hover *:not([data-no-#{$rule}="true"]):not(g) {
+    //  #{$rule}: $hoverColor;
+    //}
+    //&:active *:not([data-no-#{$rule}="true"]):not(g) {
+    //  #{$rule}: $activeColor;
+    //}
+  }
+}

package/styles/functions-and-mixins/icons.scss

@@ -0,0 +1,63 @@
+@use 'palette' as palette;
+
+@mixin categoryPathItem {
+  font-size: 12px;
+  font-weight: 600;
+  background: palette.dark-green(3);
+  color: white;
+  border-radius: 10px;
+  padding: 2px 10px;
+  width: 120px;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+@mixin disease-profile-initials-icon {
+  //Dimensions
+  height: 16px;
+  width: fit-content;
+  min-width: 16px;
+  max-width: 36px;
+  padding: 0 4px;
+
+  //Font
+  font-size: 10px !important;
+  font-weight: 400;
+
+  //Display
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 3px;
+}
+
+@mixin tag($lightColor,$darkColor) {
+  background: $lightColor;
+  border: 2px solid $darkColor;
+  border-radius: 10px;
+  min-width: 50px;
+  height: 28px;
+  padding: 0 10px;
+  flex-shrink: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin disease-value-count {
+  flex-shrink: 0;
+  font: {
+    size: var(--workspace__default-font-size);
+    weight: bold;
+  }
+  color: var(--color__background__general-panel);
+  background: var(--color__disease-value-count__background);
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

package/styles/functions-and-mixins/index.scss

@@ -0,0 +1,11 @@
+//Core Functionality
+@forward "palette";
+@forward "colors";
+@forward "fonts";
+
+//Useful shit
+@forward "text";
+@forward "buttons";
+@forward "icons";
+@forward "components";
+@forward "advisor";

package/styles/functions-and-mixins/text.scss

@@ -0,0 +1,31 @@
+@use 'palette' as palette;
+
+@mixin text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin form-title {
+  font-size: 13px;
+  color: palette.gray-blue(3);
+}
+
+@mixin placeholderMessage {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  font: {
+    size: 60px;
+    weight: 600;
+  }
+  white-space: pre-wrap;
+  text-align: center;
+
+  color: #616161;
+  background: #bababa;
+  text-shadow: #e0e0e0 1px 1px 0;
+}