mediacube-ui-v2 0.0.8 → 0.0.9

package/dist/composables/useDrawer.js

@@ -0,0 +1,72 @@
+import { reactive, h, render, getCurrentInstance, shallowRef, markRaw } from 'vue';
+import DrawerContainer from '@/components/templates/McDrawer/McDrawerContainer.vue';
+const closeServiceState = () => {
+    drawerServiceState.isOpen = false;
+    reactiveProps.drawers = [];
+};
+const drawerServiceState = reactive({
+    isOpen: false,
+    closeServiceState: closeServiceState
+});
+const drawerComponents = shallowRef({});
+const reactiveProps = reactive({ drawers: [] });
+const createDrawerContainer = () => {
+    const drawerContainerElement = document.createElement('div');
+    drawerContainerElement.id = 'drawer-container';
+    document.body.appendChild(drawerContainerElement);
+    const vnode = h(DrawerContainer, { drawerServiceState, reactiveProps });
+    render(vnode, drawerContainerElement);
+};
+// Если компонент DrawerContainer ещё не был добавлен в DOM, создаем его
+const ensureDrawerContainerExists = () => {
+    if (!document.getElementById('drawer-container')) {
+        createDrawerContainer();
+    }
+};
+const showDrawer = (componentName, // Component name from drawerComponents: {...}
+drawerProps = {}, componentProps = {}) => {
+    //@ts-ignore
+    if (!drawerComponents.value[componentName]) {
+        return console.warn('The component is not provided in Mediacube-ui DS\n' +
+            'Check and add to app.use(MediacubeUI, { drawerComponents: {...} })');
+    }
+    ensureDrawerContainerExists();
+    const id = Date.now();
+    const newDrawer = {
+        //@ts-ignore
+        component: markRaw(drawerComponents.value[componentName]),
+        componentName: componentName,
+        drawerProps: drawerProps,
+        componentProps: componentProps,
+        modelValue: true,
+        id,
+        close: () => {
+            //@ts-ignore
+            const drawerToClose = reactiveProps.drawers.findLast((d) => d.id === id);
+            drawerToClose && (drawerToClose.modelValue = false);
+            setTimeout(() => {
+                reactiveProps.drawers = reactiveProps.drawers.filter((d) => d.id !== drawerToClose?.id);
+            }, drawerProps?.duration || 300);
+        }
+    };
+    reactiveProps.drawers.push(newDrawer);
+    drawerServiceState.isOpen = true;
+};
+const closeDrawer = (componentName) => {
+    //@ts-ignore
+    const drawerToClose = reactiveProps.drawers.findLast((d) => d.componentName === componentName);
+    drawerToClose && drawerToClose.close();
+};
+const closeAllDrawers = () => {
+    reactiveProps.drawers.forEach((d) => {
+        d.close();
+    });
+};
+export function useDrawer() {
+    //@ts-ignore
+    const { proxy } = getCurrentInstance();
+    if (proxy.$dsOptions?.drawerComponents) {
+        drawerComponents.value = proxy.$dsOptions.drawerComponents;
+    }
+    return { showDrawer, closeDrawer, closeAllDrawers };
+}

package/dist/composables/useEncodeDecode.js

@@ -0,0 +1,25 @@
+class UseEncodeDecode {
+    static encode(value) {
+        if (value.constructor !== Object)
+            return value;
+        try {
+            return btoa(encodeURI(JSON.stringify(value)));
+        }
+        catch (e) {
+            console.error(e);
+            return value;
+        }
+    }
+    static decode(value) {
+        if (!value)
+            return value;
+        try {
+            return JSON.parse(decodeURI(atob(value)));
+        }
+        catch (e) {
+            console.error(e);
+            return value;
+        }
+    }
+}
+export { UseEncodeDecode };

package/dist/composables/useFieldErrors.js

@@ -0,0 +1,20 @@
+import { computed, ref, watch } from 'vue';
+export function useFieldErrors(errors) {
+    const is_error_visible = ref(true);
+    const errorText = computed(() => {
+        if (errors === null || !errors?.length || !is_error_visible.value)
+            return null;
+        return errors.join(', ')?.replace(/-/gm, '‑');
+    });
+    watch(() => errors, () => {
+        is_error_visible.value = false;
+    });
+    const toggleErrorVisible = () => {
+        is_error_visible.value = false;
+    };
+    return {
+        is_error_visible,
+        errorText,
+        toggleErrorVisible
+    };
+}

package/dist/composables/useHelper.js

@@ -0,0 +1,79 @@
+function isEmpty(value) {
+    if (value == null)
+        return true;
+    if (Array.isArray(value) || typeof value === 'string') {
+        return value.length === 0;
+    }
+    if (typeof value === 'object') {
+        return Object.keys(value).length === 0;
+    }
+    return false;
+}
+function isEqual(value1, value2) {
+    if (value1 === value2) {
+        return true;
+    }
+    if (typeof value1 !== 'object' || typeof value2 !== 'object' || value1 === null || value2 === null) {
+        return false;
+    }
+    if (Array.isArray(value1) !== Array.isArray(value2)) {
+        return false;
+    }
+    const keys1 = Object.keys(value1);
+    const keys2 = Object.keys(value2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    for (const key of keys1) {
+        if (!isEqual(value1[key], value2[key])) {
+            return false;
+        }
+    }
+    return true;
+}
+function cloneDeep(value) {
+    if (value === null || typeof value !== 'object') {
+        return value;
+    }
+    if (Array.isArray(value)) {
+        return value.map(cloneDeep);
+    }
+    const clonedObj = {};
+    for (const key in value) {
+        if (hasProperty(value, key)) {
+            clonedObj[key] = cloneDeep(value[key]);
+        }
+    }
+    return clonedObj;
+}
+function uniqWith(array, comparator) {
+    return array.reduce((acc, current) => {
+        if (!acc.some((item) => comparator(item, current))) {
+            acc.push(current);
+        }
+        return acc;
+    }, []);
+}
+function deepMerge(target, source) {
+    for (const key in source) {
+        if (source[key] instanceof Object && key in target) {
+            Object.assign(source[key], deepMerge(target[key], source[key]));
+        }
+    }
+    Object.assign(target || {}, source);
+    return target;
+}
+function hasProperty(object, prop) {
+    return Object.prototype.hasOwnProperty.call(object, prop);
+}
+function isNumber(payload) {
+    return typeof payload === 'number';
+}
+function upperFirst(str) {
+    if (!str)
+        return str;
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+export function useHelper() {
+    return { isEmpty, isEqual, cloneDeep, uniqWith, deepMerge, hasProperty, isNumber, upperFirst };
+}

package/dist/composables/useModal.js

@@ -0,0 +1,71 @@
+import { reactive, h, render, getCurrentInstance, shallowRef, markRaw } from 'vue';
+import ModalContainer from '@/components/templates/McModal/McModalContainer.vue';
+const closeServiceState = () => {
+    modalServiceState.isOpen = false;
+    reactiveProps.modals = [];
+};
+const modalServiceState = reactive({
+    isOpen: false,
+    closeServiceState: closeServiceState
+});
+const modalComponents = shallowRef({});
+const reactiveProps = reactive({ modals: [] });
+const createModalContainer = () => {
+    const modalContainerElement = document.createElement('div');
+    modalContainerElement.id = 'modal-container';
+    document.body.appendChild(modalContainerElement);
+    const vnode = h(ModalContainer, { modalServiceState, reactiveProps });
+    render(vnode, modalContainerElement);
+};
+// Если компонент ModalContainer ещё не был добавлен в DOM, создаем его
+const ensureModalContainerExists = () => {
+    if (!document.getElementById('modal-container')) {
+        createModalContainer();
+    }
+};
+const showModal = (componentName, // Component name from modalComponents: {...}
+componentProps = {}) => {
+    //@ts-ignore
+    if (!modalComponents.value[componentName]) {
+        return console.warn('The component is not provided in Mediacube-ui DS\n' +
+            'Check and add to app.use(MediacubeUI, { modalComponents: {...} })');
+    }
+    ensureModalContainerExists();
+    const id = Date.now();
+    const newModal = {
+        //@ts-ignore
+        component: markRaw(modalComponents.value[componentName]),
+        componentName: componentName,
+        componentProps: componentProps,
+        modelValue: true,
+        id,
+        close: () => {
+            //@ts-ignore
+            const modalToClose = reactiveProps.modals.findLast((d) => d.id === id);
+            modalToClose && (modalToClose.modelValue = false);
+            setTimeout(() => {
+                reactiveProps.modals = reactiveProps.modals.filter((d) => d.id !== modalToClose?.id);
+            }, 300);
+        }
+    };
+    reactiveProps.modals.push(newModal);
+    modalServiceState.isOpen = true;
+};
+const closeModal = (componentName) => {
+    //@ts-ignore
+    const modalToClose = reactiveProps.modals.findLast((d) => d.componentName === componentName);
+    modalToClose && modalToClose.close();
+};
+const closeAllModals = () => {
+    reactiveProps.modals.forEach((d) => {
+        d.close();
+    });
+};
+export function useModal() {
+    //@ts-ignore
+    const { proxy } = getCurrentInstance();
+    if (proxy.$dsOptions?.modalComponents) {
+        modalComponents.value = proxy.$dsOptions.modalComponents;
+    }
+    return { showModal, closeModal, closeAllModals };
+}

package/dist/composables/useRandomNumber.js

@@ -0,0 +1,10 @@
+export function timestamp(postfixLength = 0) {
+    if (!postfixLength)
+        return Date.now();
+    const min = Math.pow(10, postfixLength - 1);
+    const max = Math.pow(10, postfixLength) - 1;
+    return +(String(Date.now()) + String(Math.floor(Math.random() * (max - min + 1)) + min));
+}
+export function useRandomNumber() {
+    return { timestamp };
+}

package/dist/composables/useTooltip.js

@@ -0,0 +1,154 @@
+import { useDebounceFn } from '@vueuse/core';
+import { useRandomNumber } from '@/composables/useRandomNumber';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { TooltipPositions, TooltipSizes } from '@/enums';
+import { Colors } from '@/types';
+import { useHelper } from '@/composables/useHelper';
+const debounce = useDebounceFn((method) => {
+    method();
+}, 150);
+const tooltipInstances = ref([]);
+const helper = useHelper();
+class TooltipInstance {
+    id;
+    target;
+    content;
+    visible = ref(false);
+    position = ref({ top: null, left: null, translate: 'translate(0, 0)' });
+    placement;
+    size;
+    arrow;
+    color;
+    textColor;
+    constructor(el, value) {
+        this.target = el;
+        this.content = value.content;
+        this.placement = value.placement || TooltipPositions.Top;
+        this.size = value.size || TooltipSizes.M;
+        this.id = useRandomNumber().timestamp(5);
+        this.arrow = helper.hasProperty(value, 'arrow') ? !!value.arrow : true;
+        this.color = value.color || Colors.black;
+        this.textColor = value.textColor || Colors.white;
+        this.target.addEventListener('mouseenter', this.showTooltip);
+        this.target.addEventListener('mouseleave', this.hideTooltip);
+        //@ts-ignore
+        tooltipInstances.value.push(this);
+    }
+    showTooltip = () => {
+        this.updateTooltipPosition();
+        this.visible.value = true;
+        let tooltipElement = document.getElementById(String(this.id));
+        if (!tooltipElement) {
+            const tooltipDiv = document.createElement('div');
+            tooltipDiv.classList.add('mc-tooltip');
+            tooltipDiv.id = String(this.id);
+            tooltipDiv.innerText = this.content || '';
+            tooltipDiv.style.setProperty('--tooltip-color', this.color);
+            tooltipDiv.style.setProperty('--tooltip-text-color', this.textColor);
+            tooltipDiv.setAttribute('tooltip-placement', this.placement);
+            tooltipDiv.setAttribute('tooltip-size', this.size);
+            tooltipDiv.setAttribute('tooltip-arrow', String(this.arrow));
+            document.getElementById('tooltip-container')?.appendChild(tooltipDiv);
+        }
+        tooltipElement = document.getElementById(String(this.id));
+        if (tooltipElement) {
+            tooltipElement.style.visibility = 'visible';
+            for (const key in this.position.value) {
+                if (key && helper.hasProperty(this.position.value, key)) {
+                    //@ts-ignore
+                    tooltipElement.style[key] = `${this.position.value[key]}px`;
+                }
+            }
+            tooltipElement.style.transform = this.position.value.translate;
+        }
+    };
+    hideTooltip = () => {
+        this.visible.value = false;
+        const tooltipElement = document.getElementById(String(this.id));
+        if (tooltipElement) {
+            tooltipElement.style.visibility = 'hidden';
+        }
+    };
+    updateTooltipPosition = () => {
+        const { top, left, width, height } = this.target.getBoundingClientRect();
+        const requiredTop = top + window.scrollY;
+        const requiredLeft = left + window.scrollX;
+        const space = 4;
+        const arrow = this.arrow ? 4 : 0;
+        switch (this.placement) {
+            case TooltipPositions.Right:
+                this.position.value = {
+                    top: requiredTop,
+                    left: requiredLeft + width + (space + arrow),
+                    translate: `translate(0, calc(-50% + ${height / 2}px))`
+                };
+                break;
+            case TooltipPositions.Left:
+                this.position.value = {
+                    top: requiredTop,
+                    left: requiredLeft - (space + arrow),
+                    translate: `translate(-100%, calc(-50% + ${height / 2}px))`
+                };
+                break;
+            case TooltipPositions.Top:
+                this.position.value = {
+                    top: requiredTop - (space + arrow),
+                    left: requiredLeft + width / 2,
+                    translate: 'translate(-50%, -100%)'
+                };
+                break;
+            case TooltipPositions.Bottom:
+                this.position.value = {
+                    top: requiredTop + height + (space + arrow),
+                    left: requiredLeft + width / 2,
+                    translate: 'translate(-50%, 0%)'
+                };
+                break;
+        }
+    };
+    destroy = () => {
+        this.target.removeEventListener('mouseenter', this.showTooltip);
+        this.target.removeEventListener('mouseleave', this.hideTooltip);
+        tooltipInstances.value = tooltipInstances.value.filter((instance) => instance.id !== this.id);
+        const tooltipToDestroy = document.getElementById(String(this.id));
+        tooltipToDestroy && tooltipToDestroy.remove();
+    };
+}
+const updateAllTooltips = debounce(() => {
+    tooltipInstances.value.forEach((instance) => instance.updateTooltipPosition());
+});
+const createTooltipContainer = () => {
+    const modalContainerElement = document.createElement('div');
+    modalContainerElement.id = 'tooltip-container';
+    document.body.appendChild(modalContainerElement);
+};
+const ensureTooltipContainerExists = () => {
+    if (!document.getElementById('tooltip-container')) {
+        createTooltipContainer();
+    }
+};
+onMounted(() => {
+    window.addEventListener('scroll', () => updateAllTooltips);
+    window.addEventListener('resize', () => updateAllTooltips);
+});
+onBeforeUnmount(() => {
+    window.removeEventListener('scroll', () => updateAllTooltips);
+    window.removeEventListener('resize', () => updateAllTooltips);
+});
+export function useTooltip() {
+    const tooltip = ref(null);
+    return {
+        mounted(el, binding) {
+            ensureTooltipContainerExists();
+            const content = binding.value.content;
+            if (!content)
+                return;
+            //@ts-ignore
+            tooltip.value = new TooltipInstance(el, binding.value);
+        },
+        updated() { },
+        beforeUnmount() {
+            tooltip.value?.destroy();
+        }
+    };
+}

package/dist/consts/table.js

@@ -0,0 +1,6 @@
+export const TABLE = {
+    defaultHeaderHeight: 40,
+    defaultRowHeight: 40,
+    defaultFooterRowHeight: 40,
+    defaultTableFirstColWidth: 251,
+};

package/dist/enums/Cell.js

@@ -0,0 +1,6 @@
+export var CellSizes;
+(function (CellSizes) {
+    CellSizes["S"] = "s";
+    CellSizes["M"] = "m";
+    CellSizes["L"] = "l";
+})(CellSizes || (CellSizes = {}));

package/dist/enums/Chip.js

@@ -0,0 +1,11 @@
+export var ChipSize;
+(function (ChipSize) {
+    ChipSize["Xs"] = "xs";
+    ChipSize["S"] = "s";
+    ChipSize["M"] = "m";
+})(ChipSize || (ChipSize = {}));
+export var ChipModifiers;
+(function (ChipModifiers) {
+    ChipModifiers["Invert"] = "invert";
+    ChipModifiers["Outline"] = "outline";
+})(ChipModifiers || (ChipModifiers = {}));

package/dist/enums/Datepicker.js

@@ -0,0 +1,42 @@
+export var DatepickerTypes;
+(function (DatepickerTypes) {
+    DatepickerTypes["TimePicker"] = "time-picker";
+    DatepickerTypes["DatePicker"] = "date-picker";
+    DatepickerTypes["DateTimePicker"] = "date-time-picker";
+    DatepickerTypes["WeekPicker"] = "week-picker";
+    DatepickerTypes["MonthPicker"] = "month-picker";
+    DatepickerTypes["YearPicker"] = "year-picker";
+})(DatepickerTypes || (DatepickerTypes = {}));
+export var DatepickerFormatsVariations;
+(function (DatepickerFormatsVariations) {
+    DatepickerFormatsVariations["Picker"] = "picker";
+    DatepickerFormatsVariations["Dayjs"] = "dayjs";
+    DatepickerFormatsVariations["Output"] = "output";
+})(DatepickerFormatsVariations || (DatepickerFormatsVariations = {}));
+export var DatepickerFormat;
+(function (DatepickerFormat) {
+    DatepickerFormat["TimePicker"] = "HH:mm";
+    DatepickerFormat["DateTimePicker"] = "dd.MM.yyyy HH:mm";
+    DatepickerFormat["DatePicker"] = "dd.MM.yyyy";
+    DatepickerFormat["WeekPicker"] = "ww.yyyy";
+    DatepickerFormat["MonthPicker"] = "MM.yyyy";
+    DatepickerFormat["YearPicker"] = "yyyy";
+})(DatepickerFormat || (DatepickerFormat = {}));
+export var DayjsFormat;
+(function (DayjsFormat) {
+    DayjsFormat["TimePicker"] = "HH:mm";
+    DayjsFormat["DateTimePicker"] = "DD.MM.YYYY HH:mm";
+    DayjsFormat["DatePicker"] = "DD.MM.YYYY";
+    DayjsFormat["WeekPicker"] = "WW.YYYY";
+    DayjsFormat["MonthPicker"] = "MM.YYYY";
+    DayjsFormat["YearPicker"] = "YYYY";
+})(DayjsFormat || (DayjsFormat = {}));
+export var DatepickerOutputFormat;
+(function (DatepickerOutputFormat) {
+    DatepickerOutputFormat["TimePicker"] = "HH:mm";
+    DatepickerOutputFormat["DateTimePicker"] = "YYYY-MM-DD HH:mm";
+    DatepickerOutputFormat["DatePicker"] = "YYYY-MM-DD";
+    DatepickerOutputFormat["WeekPicker"] = "YYYY-WW";
+    DatepickerOutputFormat["MonthPicker"] = "YYYY-MM-DD";
+    DatepickerOutputFormat["YearPicker"] = "YYYY";
+})(DatepickerOutputFormat || (DatepickerOutputFormat = {}));

package/dist/enums/Drawer.js

@@ -0,0 +1,5 @@
+export var DrawerPositions;
+(function (DrawerPositions) {
+    DrawerPositions["Left"] = "left";
+    DrawerPositions["Right"] = "right";
+})(DrawerPositions || (DrawerPositions = {}));

package/dist/enums/Dropdown.js

@@ -0,0 +1,12 @@
+export var DropdownListPositions;
+(function (DropdownListPositions) {
+    DropdownListPositions["Top"] = "top";
+    DropdownListPositions["Bottom"] = "bottom";
+    DropdownListPositions["Auto"] = "auto";
+})(DropdownListPositions || (DropdownListPositions = {}));
+export var DropdownPositions;
+(function (DropdownPositions) {
+    DropdownPositions["Left"] = "left";
+    DropdownPositions["Right"] = "right";
+    DropdownPositions["Auto"] = "auto";
+})(DropdownPositions || (DropdownPositions = {}));

package/dist/enums/Filter.js

@@ -0,0 +1,14 @@
+export var FilterRelations;
+(function (FilterRelations) {
+    FilterRelations["Exists"] = "exists";
+    FilterRelations["Is"] = "is";
+    FilterRelations["IsNot"] = "is_not";
+})(FilterRelations || (FilterRelations = {}));
+export var FilterTypes;
+(function (FilterTypes) {
+    FilterTypes["Relation"] = "relation";
+    FilterTypes["Date"] = "date";
+    FilterTypes["Text"] = "text";
+    FilterTypes["Range"] = "range";
+    FilterTypes["Fast"] = "fast";
+})(FilterTypes || (FilterTypes = {}));

package/dist/enums/Grid.js

@@ -0,0 +1,24 @@
+export var ColumnSizes;
+(function (ColumnSizes) {
+    ColumnSizes["Xs"] = "xs";
+    ColumnSizes["S"] = "s";
+    ColumnSizes["M"] = "m";
+    ColumnSizes["L"] = "l";
+    ColumnSizes["Xl"] = "xl";
+    ColumnSizes["Xxl"] = "xxl";
+})(ColumnSizes || (ColumnSizes = {}));
+export var ColumnJustifyAlignment;
+(function (ColumnJustifyAlignment) {
+    ColumnJustifyAlignment["Left"] = "left";
+    ColumnJustifyAlignment["Right"] = "right";
+    ColumnJustifyAlignment["Center"] = "center";
+    ColumnJustifyAlignment["Around"] = "around";
+    ColumnJustifyAlignment["Between"] = "between";
+})(ColumnJustifyAlignment || (ColumnJustifyAlignment = {}));
+export var ColumnAlignment;
+(function (ColumnAlignment) {
+    ColumnAlignment["Top"] = "top";
+    ColumnAlignment["Middle"] = "middle";
+    ColumnAlignment["Bottom"] = "bottom";
+    ColumnAlignment["Stretch"] = "stretch";
+})(ColumnAlignment || (ColumnAlignment = {}));

package/dist/enums/Input.js

@@ -0,0 +1,20 @@
+export var InputTypes;
+(function (InputTypes) {
+    InputTypes["Text"] = "text";
+    InputTypes["Password"] = "password";
+    InputTypes["Email"] = "email";
+    InputTypes["Date"] = "date";
+    InputTypes["Textarea"] = "textarea";
+    InputTypes["TextareaAutosize"] = "textarea-autosize";
+    InputTypes["Num"] = "num";
+    InputTypes["Int"] = "int";
+    InputTypes["AmountFormat"] = "amount_format";
+    InputTypes["Uppercase"] = "uppercase";
+    InputTypes["Lowercase"] = "lowercase";
+    InputTypes["PhoneNumber"] = "phone_number";
+})(InputTypes || (InputTypes = {}));
+export var Autocomplete;
+(function (Autocomplete) {
+    Autocomplete["On"] = "on";
+    Autocomplete["Off"] = "off";
+})(Autocomplete || (Autocomplete = {}));

package/dist/enums/Modal.js

@@ -0,0 +1,5 @@
+export var ModalVariation;
+(function (ModalVariation) {
+    ModalVariation["Default"] = "default";
+    ModalVariation["Info"] = "info";
+})(ModalVariation || (ModalVariation = {}));

package/dist/enums/Preview.js

@@ -0,0 +1,6 @@
+export var PreviewSizes;
+(function (PreviewSizes) {
+    PreviewSizes["S"] = "s";
+    PreviewSizes["M"] = "m";
+    PreviewSizes["L"] = "l";
+})(PreviewSizes || (PreviewSizes = {}));

package/dist/enums/Radio.js

@@ -0,0 +1,5 @@
+export var RadioVariation;
+(function (RadioVariation) {
+    RadioVariation["Circle"] = "circle";
+    RadioVariation["Checkmark"] = "checkmark";
+})(RadioVariation || (RadioVariation = {}));

package/dist/enums/RadioGroup.js

@@ -0,0 +1,5 @@
+export var RadioGroupDirection;
+(function (RadioGroupDirection) {
+    RadioGroupDirection["Column"] = "column";
+    RadioGroupDirection["Row"] = "row";
+})(RadioGroupDirection || (RadioGroupDirection = {}));

package/dist/enums/Select.js

@@ -0,0 +1,11 @@
+export var SelectGroupKeys;
+(function (SelectGroupKeys) {
+    SelectGroupKeys["Label"] = "label";
+    SelectGroupKeys["Values"] = "values";
+})(SelectGroupKeys || (SelectGroupKeys = {}));
+export var SelectListDirections;
+(function (SelectListDirections) {
+    SelectListDirections["Top"] = "above";
+    SelectListDirections["Bottom"] = "below";
+    SelectListDirections["Auto"] = "auto";
+})(SelectListDirections || (SelectListDirections = {}));

package/dist/enums/Sidebar.js

@@ -0,0 +1,5 @@
+export var SidebarTheme;
+(function (SidebarTheme) {
+    SidebarTheme["Black"] = "black";
+    SidebarTheme["White"] = "white";
+})(SidebarTheme || (SidebarTheme = {}));

package/dist/enums/Tab.js

@@ -0,0 +1,6 @@
+export var TabVariations;
+(function (TabVariations) {
+    TabVariations["Body"] = "body";
+    TabVariations["Captions"] = "caption";
+    TabVariations["Overline"] = "overline";
+})(TabVariations || (TabVariations = {}));

package/dist/enums/Title.js

@@ -0,0 +1,21 @@
+export var TitleSizes;
+(function (TitleSizes) {
+    TitleSizes["Xs"] = "xs";
+    TitleSizes["S"] = "s";
+    TitleSizes["M"] = "m";
+    TitleSizes["L"] = "l";
+    TitleSizes["Xl"] = "xl";
+    TitleSizes["Xxl"] = "xxl";
+})(TitleSizes || (TitleSizes = {}));
+export var TitleVariations;
+(function (TitleVariations) {
+    TitleVariations["H1"] = "h1";
+    TitleVariations["H2"] = "h2";
+    TitleVariations["H3"] = "h3";
+    TitleVariations["H4"] = "h4";
+    TitleVariations["Subtitle"] = "subtitle";
+    TitleVariations["Body"] = "body";
+    TitleVariations["Overline"] = "overline";
+    TitleVariations["Article"] = "article";
+    TitleVariations["Info"] = "info";
+})(TitleVariations || (TitleVariations = {}));