oolib 2.110.1 → 2.111.1

package/dist/stories/RadioButton.stories.js

@@ -0,0 +1,264 @@
+"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 __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));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioButton = exports.RadioInput = exports.RadioList = void 0;
+var react_1 = require("react");
+var RadioAndCheckbox_1 = require("../components/RadioAndCheckbox");
+var react_json_view_1 = __importDefault(require("react-json-view"));
+var Divider_1 = require("../components/Divider");
+var themes_1 = require("../themes");
+var greyColor100 = themes_1.colors.greyColor100;
+var ops = [
+    { value: 'op1', display: "Squidward" },
+    { value: 'op2', display: "Mr krabs" },
+    { value: 'op3', display: "Patric" },
+    { value: 'op4', display: "SpongeBob SquarePants !!" },
+    { value: 'op5', display: "Bob Marley" },
+    //{ value: 'other', display: "Other"},
+];
+exports.default = {
+    title: "Components/RadioButton",
+};
+var RadioList = function (args) {
+    var _a = (0, react_1.useState)(), chosenOption = _a[0], setChosenOption = _a[1];
+    var _b = (0, react_1.useState)(ops), options = _b[0], setOptions = _b[1];
+    (0, react_1.useEffect)(function () {
+        setOptions(options.map(function (op, idx) {
+            if (op.value === 'other')
+                return op;
+            var argsText = args["option".concat(idx + 1)];
+            return argsText !== op.display ? __assign(__assign({}, op), { display: argsText }) : op;
+        }));
+    }, [args.option1, args.option2, args.option3, args.option4, args.option5]);
+    (0, react_1.useEffect)(function () {
+        if (args.markOptions) {
+            setOptions(options.map(function (op) {
+                if (op.value !== args.corrrectOption) {
+                    return op.isCorrect ? __assign(__assign({}, op), { isCorrect: false }) : op;
+                }
+                return __assign(__assign({}, op), { isCorrect: true });
+            }));
+        }
+    }, [args.markOptions, args.corrrectOption]);
+    return (React.createElement("div", { style: { backgroundColor: args.invert && greyColor100, padding: '4rem' } },
+        React.createElement(RadioAndCheckbox_1.RadioList, { options: options, readOnly: args.readOnly, value: chosenOption, onChange: function (id, val) { return setChosenOption(val); }, rightWrongResult: args.markOptions, label: args.label, listType: args.listingStyle, injectOtherOption: args.addOther, disabled: args.disabled, invert: args.invert, S: args.size == "S", commonIsCorrectDesc: args.feedbackMessage, optionsLimit: args.optionsLimit, saveValueAsString: args.saveValueAsString }),
+        React.createElement("br", null),
+        " ",
+        React.createElement(Divider_1.Divider, null),
+        " ",
+        React.createElement("br", null),
+        React.createElement("details", { style: { margin: '2rem 0' } },
+            React.createElement("summary", { style: { fontSize: '1.4rem', marginBottom: 10 } }, "Dev only area"),
+            React.createElement(react_json_view_1.default, { theme: "monokai", displayDataTypes: false, style: { fontSize: '1.3rem' }, name: "Value", src: typeof (chosenOption) === 'string' ? { stringValue: chosenOption } : chosenOption || {} }))));
+};
+exports.RadioList = RadioList;
+exports.RadioList.args = {
+    size: "Medium",
+    listingStyle: 'horizontal',
+    optionsLimit: ops.length,
+    // label: '',
+    option1: ops[0].display,
+    option2: ops[1].display,
+    option3: ops[2].display,
+    option4: ops[3].display,
+    option5: ops[4].display,
+    addOther: false,
+    markOptions: false,
+    corrrectOption: ops[3].value,
+    feedbackMessage: 'this is correct because I chose so',
+    saveValueAsString: false,
+    disabled: false,
+    readOnly: false,
+    invert: false,
+};
+exports.RadioList.argTypes = {
+    corrrectOption: {
+        name: "Correct Option",
+        control: { type: 'select' },
+        options: ops.map(function (op) { return op.value; }),
+    },
+    size: {
+        name: "Size",
+        control: { type: 'select' },
+        options: ['Small', 'Medium'],
+        mapping: {
+            Small: 'S',
+            Medium: 'M',
+        },
+    },
+    listingStyle: {
+        name: "Listing Style",
+        control: { type: 'select' },
+        options: ['horizontal', 'vertical'],
+    },
+    disabled: {
+        name: "Disabled",
+    },
+    invert: {
+        name: "Invert"
+    },
+    readOnly: {
+        name: "Read Only"
+    },
+    optionsLimit: {
+        name: "Options Limit",
+        control: { type: 'select' },
+        options: Array.from({ length: ops.length + 1 }, function (_, index) { return index; }),
+    },
+    saveValueAsString: {
+        name: "Save Value as String"
+    },
+    feedbackMessage: {
+        name: 'Feedback Message'
+    },
+    markOptions: {
+        name: "Mark Options"
+    },
+    addOther: {
+        name: "Add Other"
+    },
+    // label: {
+    //   name: "Label",
+    //   control: {type: 'text'},
+    //   defaultValue: 'who lives in a pinapple under the sea?'
+    // },
+    option1: {
+        name: "option 1",
+        control: { type: 'text' },
+    },
+    option2: {
+        name: "option 2",
+        control: { type: 'text' },
+    },
+    option3: {
+        name: "option 3",
+        control: { type: 'text' },
+    },
+    option4: {
+        name: "option 4",
+        control: { type: 'text' },
+    },
+    option5: {
+        name: "option 5",
+        control: { type: 'text' },
+    }
+};
+var RadioInput = function (args) {
+    var _a = (0, react_1.useState)(), value = _a[0], setValue = _a[1];
+    var _b = (0, react_1.useState)({ value: 'smth', display: args.label }), option = _b[0], setOption = _b[1];
+    (0, react_1.useEffect)(function () {
+        setOption(__assign(__assign({}, option), { display: args.option1 }));
+    }, [args.option1]);
+    (0, react_1.useEffect)(function () {
+        setOption(__assign(__assign({}, option), { isCorrect: args.optionIsCorrect }));
+    }, [args.optionIsCorrect]);
+    return (React.createElement("div", { style: {
+            padding: '4rem',
+            backgroundColor: args.invert ? greyColor100 : 'unset'
+        } },
+        React.createElement(RadioAndCheckbox_1.RadioInput, __assign({}, args, { value: value, option: option, S: args.size == "Small",
+            rightWrongResult: args.markOptions,
+            onClick: function (option) { return setValue(option); } }))));
+};
+exports.RadioInput = RadioInput;
+exports.RadioInput.args = {
+    size: 'Medium',
+    markOptions: false,
+    optionIsCorrect: false,
+    disabled: false,
+    invert: false
+};
+exports.RadioInput.argTypes = {
+    optionIsCorrect: {
+        name: "Options is Correct"
+    },
+    // label: {
+    //   name: "Text",
+    //   control: {type: 'text'},
+    // },
+    size: {
+        name: "Size",
+        control: { type: "inline-radio" },
+        options: ['Small', 'Medium']
+    },
+    markOptions: {
+        name: "Mark Options"
+    },
+    disabled: {
+        name: "Disabled"
+    },
+    invert: {
+        name: "Invert"
+    }
+};
+var RadioButton = function (args) {
+    var _a = (0, react_1.useState)(false), chosen = _a[0], setChosen = _a[1];
+    return (React.createElement("div", { style: {
+            padding: '4rem',
+            backgroundColor: args.invert ? greyColor100 : 'unset'
+        } },
+        React.createElement(RadioAndCheckbox_1.RadioButton, __assign({}, args, { isSelected: chosen, onClick: function () { return setChosen(!chosen); }, S: args.size === 'Small' }))));
+};
+exports.RadioButton = RadioButton;
+exports.RadioButton.args = {
+    size: 'Medium',
+    disabled: false,
+    invert: false,
+};
+exports.RadioButton.argTypes = {
+    size: {
+        name: "Size",
+        control: { type: "inline-radio" },
+        options: ['Small', 'Medium']
+    },
+    disabled: {
+        name: "Disabled"
+    },
+    invert: {
+        name: "Invert"
+    }
+};
+var commonExcluded = [
+    'option2',
+    'option3',
+    'option4',
+    'option5',
+    'corrrectOption',
+    'listingStyle',
+    'label',
+    'feedbackMessage',
+    'optionsLimit',
+    'addOther',
+    'readOnly',
+    'saveValueAsString'
+];
+exports.RadioInput.parameters = {
+    controls: { exclude: commonExcluded }
+};
+exports.RadioButton.parameters = {
+    controls: {
+        exclude: __spreadArray(__spreadArray([], commonExcluded, true), ['option1', 'markOptions'], false)
+    }
+};

package/dist/stories/ResourceInput.stories.d.ts

@@ -0,0 +1,9 @@
+declare namespace _default {
+    let title: string;
+    namespace args {
+        let invert: boolean;
+    }
+}
+export default _default;
+export function ResourceInput(args: any): React.JSX.Element;
+import React from "react";

package/dist/stories/ResourceInput.stories.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;
+};
+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.ResourceInput = void 0;
+var react_1 = __importStar(require("react"));
+var ResourceInput_1 = require("../components/ResourceInput");
+var Wrappers_1 = require("../components/Wrappers");
+var Container_1 = require("../components/Container");
+var themes_1 = require("../themes");
+exports.default = {
+    title: "Components/ResourceInput",
+    args: {
+        invert: false,
+    },
+};
+var ResourceInput = function (args) {
+    var _a = (0, react_1.useState)([]), value = _a[0], setValue = _a[1];
+    return (react_1.default.createElement(Container_1.Container, { style: { background: args.invert ? themes_1.colors.greyColor90 : themes_1.colors.white, padding: '2rem' } },
+        react_1.default.createElement(Wrappers_1.Wrapper700, null,
+            react_1.default.createElement(ResourceInput_1.ResourceInput, { id: "Resource Input", label: "Resource Input Component", sublabel: "Allowed formats: jpeg, png, jpg, pdf, csv, wav, mp3, xls, ppt, pptx, zip, xlsx, mp4, gif, docx, doc", onChange: function (data) { return setValue(__spreadArray(__spreadArray([], value, true), [data], false)); }, value: value, multiple: true, allowedFormats: ["jpeg", "png", "jpg", "pdf", "csv", "wav", "mp3", "xls", "ppt", "pptx", "zip", "xlsx", "mp4", "gif", "docx", "doc"], invert: args.invert }))));
+};
+exports.ResourceInput = ResourceInput;

package/dist/stories/SimpleTable.stories.d.ts

@@ -0,0 +1,65 @@
+/// <reference types="mdx" />
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace noOfRows {
+            export let name: string;
+            export namespace _if {
+                let arg: string;
+                let truthy: boolean;
+            }
+            export { _if as if };
+        }
+        namespace noOfCols {
+            let name_1: string;
+            export { name_1 as name };
+            export namespace _if_1 {
+                let arg_1: string;
+                export { arg_1 as arg };
+                let truthy_1: boolean;
+                export { truthy_1 as truthy };
+            }
+            export { _if_1 as if };
+        }
+        namespace defaultColWidth {
+            let name_2: string;
+            export { name_2 as name };
+            export namespace _if_2 {
+                let arg_2: string;
+                export { arg_2 as arg };
+                let truthy_2: boolean;
+                export { truthy_2 as truthy };
+            }
+            export { _if_2 as if };
+        }
+        namespace lockTableHeader {
+            let name_3: string;
+            export { name_3 as name };
+        }
+        namespace lockTableColumn {
+            let name_4: string;
+            export { name_4 as name };
+        }
+    }
+    namespace args {
+        let lockTableHeader_1: boolean;
+        export { lockTableHeader_1 as lockTableHeader };
+        let lockTableColumn_1: boolean;
+        export { lockTableColumn_1 as lockTableColumn };
+        let noOfRows_1: number;
+        export { noOfRows_1 as noOfRows };
+        let noOfCols_1: number;
+        export { noOfCols_1 as noOfCols };
+        let defaultColWidth_1: number;
+        export { defaultColWidth_1 as defaultColWidth };
+    }
+    namespace parameters {
+        namespace docs {
+            export { SimpleTableDocs as page };
+        }
+    }
+}
+export default _default;
+export function SimpleTable(args: any): React.JSX.Element;
+import SimpleTableDocs from './SimpleTable.mdx';
+import React from "react";

package/dist/stories/SimpleTable.stories.js

@@ -0,0 +1,111 @@
+"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 __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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleTable = void 0;
+var react_1 = __importStar(require("react"));
+var SimpleTable_1 = require("../components/SimpleTable");
+var SimpleTable_mdx_1 = __importDefault(require("./SimpleTable.mdx"));
+var Wrappers_1 = require("../components/Wrappers");
+var Paddings_1 = require("../components/Paddings");
+var themes_1 = require("../themes");
+exports.default = {
+    title: "Components/SimpleTable",
+    argTypes: {
+        noOfRows: {
+            name: "Number of Rows",
+            if: { arg: 'lockTableHeader', truthy: false },
+        },
+        noOfCols: {
+            name: "Number of columns",
+            if: { arg: 'lockTableColumn', truthy: false },
+        },
+        defaultColWidth: {
+            name: "Default column width",
+            if: { arg: 'lockTableHeader', truthy: false },
+        },
+        lockTableHeader: {
+            name: "Lock Table Header"
+        },
+        lockTableColumn: {
+            name: "Lock Table column"
+        }
+    },
+    args: {
+        lockTableHeader: false,
+        lockTableColumn: false,
+        noOfRows: 3,
+        noOfCols: 3,
+        defaultColWidth: 200,
+    },
+    parameters: {
+        docs: {
+            page: SimpleTable_mdx_1.default,
+        },
+    },
+};
+var SimpleTable = function (args) {
+    var _a = (0, react_1.useState)(undefined), val = _a[0], setVal = _a[1];
+    var props = {
+        config: {
+            noOfRows: args.noOfRows,
+            noOfCols: args.noOfCols,
+            colHeaderData: args.lockTableColumn && [
+                "Verticle Edit",
+                "Latitude",
+                "Longitude"
+            ],
+            rowHeaderData: args.lockTableHeader && [
+                "Verticle Edit",
+                "Latitude",
+                "Longitude"
+            ]
+        },
+        defaultColWidth: args.defaultColWidth,
+        value: val,
+        onChange: function (k, v) { return setVal(v); }
+    };
+    (0, react_1.useEffect)(function () {
+        console.log({ data: props });
+    }, [props]);
+    return (react_1.default.createElement("div", { style: { backgroundColor: themes_1.colors.greyColor10 } },
+        react_1.default.createElement(Wrappers_1.Wrapper700, { style: { backgroundColor: 'white' } },
+            react_1.default.createElement(Paddings_1.PaddingTopBottom40, null,
+                react_1.default.createElement(SimpleTable_1.SimpleTable, __assign({}, props))))));
+};
+exports.SimpleTable = SimpleTable;

package/dist/stories/SkeletonLoader.stories.d.ts

@@ -0,0 +1,81 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace color {
+            export let name: string;
+            export { availableColors as options };
+            export namespace control {
+                let type: string;
+            }
+        }
+        namespace width {
+            let name_1: string;
+            export { name_1 as name };
+            export namespace control_1 {
+                let type_1: string;
+                export { type_1 as type };
+                export let min: number;
+                export let max: number;
+                export let step: number;
+            }
+            export { control_1 as control };
+            export let defaultValue: number;
+        }
+        namespace height {
+            let name_2: string;
+            export { name_2 as name };
+            export namespace control_2 {
+                let type_2: string;
+                export { type_2 as type };
+                let min_1: number;
+                export { min_1 as min };
+                let max_1: number;
+                export { max_1 as max };
+                let step_1: number;
+                export { step_1 as step };
+            }
+            export { control_2 as control };
+            let defaultValue_1: number;
+            export { defaultValue_1 as defaultValue };
+        }
+        namespace textWidth {
+            let name_3: string;
+            export { name_3 as name };
+            export namespace control_3 {
+                let type_3: string;
+                export { type_3 as type };
+                let min_2: number;
+                export { min_2 as min };
+                let max_2: number;
+                export { max_2 as max };
+                let step_2: number;
+                export { step_2 as step };
+            }
+            export { control_3 as control };
+            let defaultValue_2: number;
+            export { defaultValue_2 as defaultValue };
+        }
+        namespace textHeight {
+            let name_4: string;
+            export { name_4 as name };
+            export namespace control_4 {
+                let type_4: string;
+                export { type_4 as type };
+                let min_3: number;
+                export { min_3 as min };
+                let max_3: number;
+                export { max_3 as max };
+                let step_3: number;
+                export { step_3 as step };
+            }
+            export { control_4 as control };
+            let defaultValue_3: number;
+            export { defaultValue_3 as defaultValue };
+        }
+    }
+    let args: {};
+}
+export default _default;
+export function SkeletonLoader(args: any): React.JSX.Element;
+declare const availableColors: string[];
+import React from "react";

package/dist/stories/SkeletonLoader.stories.js

@@ -0,0 +1,82 @@
+"use strict";
+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));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonLoader = void 0;
+var react_1 = __importDefault(require("react"));
+var SkeletonLoader_1 = require("../components/LoadersAndProgress/SkeletonLoader");
+var themes_1 = require("../themes");
+var Divider_1 = require("../components/Divider");
+var TextLoader_1 = require("../components/LoadersAndProgress/TextLoader");
+var Typo_1 = require("../components/Typo");
+var Paddings_1 = require("../components/Paddings");
+var availableColors = __spreadArray([undefined], Object.keys(themes_1.colors).sort(), true);
+exports.default = {
+    title: "Components/SkeletonLoader",
+    argTypes: {
+        color: {
+            name: "Color",
+            options: availableColors,
+            control: { type: "select" },
+        },
+        width: {
+            name: "Width",
+            control: { type: "range", min: 1, max: 1000, step: 1 },
+            defaultValue: 50,
+        },
+        height: {
+            name: "Height",
+            control: { type: "range", min: 1, max: 1000, step: 1 },
+            defaultValue: 50,
+        },
+        textWidth: {
+            name: "Text Width",
+            control: { type: "range", min: 1, max: 1000, step: 1 },
+            defaultValue: 80,
+        },
+        textHeight: {
+            name: "Text Height",
+            control: { type: "range", min: 1, max: 1000, step: 1 },
+            defaultValue: 15,
+        },
+    },
+    args: {},
+    // parameters: {
+    //   docs: {
+    //     page: ButtonDocs,
+    //   },
+    // },
+};
+var SkeletonLoader = function (args) {
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(Paddings_1.PaddingBottom30, null,
+            react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, 'Skeleton Loader (Base Component)'),
+            react_1.default.createElement(Typo_1.SANS_3, null, "All style attributes are completely controllable"),
+            react_1.default.createElement(Paddings_1.PaddingBottom10, null),
+            react_1.default.createElement(SkeletonLoader_1.SkeletonLoader, { style: {
+                    backgroundColor: themes_1.colors[args.color],
+                    width: args.width,
+                    height: args.height,
+                } })),
+        react_1.default.createElement(Divider_1.Divider, null),
+        react_1.default.createElement(Paddings_1.PaddingTop30, null),
+        react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, 'Text Loader'),
+        react_1.default.createElement(Typo_1.SANS_3, null, "Defaults to a height of 1.5rem and width of 8rem. Has a fixed color of primaryColor10"),
+        react_1.default.createElement(Paddings_1.PaddingBottom10, null),
+        react_1.default.createElement(TextLoader_1.TextLoader, { style: {
+                width: args.textWidth,
+                height: args.textHeight,
+                backgroundColor: themes_1.colors[args.color],
+            } })));
+};
+exports.SkeletonLoader = SkeletonLoader;