linkedunion-design-kit 1.5.2 → 1.5.4

package/dist/utils/index.js

@@ -1,1597 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.customAspectRatio = exports.customBorderRadius = exports.customBorderWidth = exports.customOpacity = exports.customButtonIconSize = exports.customIconSize = exports.customLogoSize = exports.customMinHeight = exports.customMinWidth = exports.customHeight = exports.customWidth = exports.customSize = exports.customTextWrap = exports.customTextDecoration = exports.customTextTransform = exports.customTextAlignment = exports.customLineHeight = exports.customFontWeight = exports.customFontSize = exports.sectionTypeList = exports.avatarBackgroundSize = exports.headingsList = exports.avatarShapeList = exports.textColorList = exports.avatarSizesList = exports.landscapeAspectRatioList = exports.portraitAspectRatioList = exports.buttonWithIconList = exports.buttonSizeList = exports.buttonColorsList = exports.iconColorList = exports.buttonIconSizeList = exports.iconSizeList = exports.borderWidthList = exports.borderRadiusList = exports.spacings = exports.minHeights = exports.minWidths = exports.heights = exports.widths = exports.sizes = exports.textWraps = exports.textDecorations = exports.textTransform = exports.textAlignment = exports.lineHeights = exports.fontWeights = exports.fontSizes = exports.defaultCardProps = exports.text = void 0;
-exports.table_row_className = exports.table_sub_heading_className = exports.table_header_className = exports.table_data_className = exports.customHeadings = exports.customizeTextColors = exports.customizeAvatarShape = exports.customAvatarSize = exports.customIconButtonSize = exports.customButtonSize = exports.customButtonOutlineColors = exports.customButtonColors = exports.customIconColors = exports.customBoxShadow = void 0;
-exports.generateUtilities = generateUtilities;
-var index_1 = require("../components/MediaCard/index");
-var enums_1 = require("./enums");
-//************Used for typography and color utilities Storybook************
-exports.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popular in the 1960s with the release of Let set sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Ald PageMaker including versions of Lorem Ipsum.";
-exports.defaultCardProps = {
-    type: index_1.SectionTypeEnum.postByCategoriesTheme,
-    image: "/images/demo-image.jpg",
-    layout: enums_1.OrientationEnum.horizontal,
-    heading: "Heading Text",
-    body: "The quick brown fox jumps over the lazy dog.",
-    className: "",
-    btnLabel: "View More",
-    href: "https://www.google.com/",
-    card_title_color: "lu-text-default",
-    id: 1,
-};
-exports.fontSizes = [
-    { key: "lu-base-font-size", label: "lu-base-font-size: 16px" },
-    { key: "lu-font-size-x-small", label: "lu-font-size-x-small: 12px" },
-    { key: "lu-font-size-small", label: "lu-font-size-small: 14px" },
-    { key: "lu-font-size-medium", label: "lu-font-size-medium: 16px" },
-    { key: "lu-font-size-large", label: "lu-font-size-large: 18px" },
-    { key: "lu-font-size-x-large", label: "lu-font-size-x-large: 20px" },
-    { key: "lu-font-size-2x-large", label: "lu-font-size-2x-large: 24px" },
-    { key: "lu-font-size-3x-large", label: "lu-font-size-3x-large: 28px" },
-    { key: "lu-font-size-4x-large", label: "lu-font-size-4x-large: 32px" },
-    { key: "lu-font-size-5x-large", label: "lu-font-size-5x-large: 36px" },
-    { key: "lu-font-size-6x-large", label: "lu-font-size-6x-large: 40px" },
-    { key: "lu-font-size-7x-large", label: "lu-font-size-7x-large: 48px" },
-    { key: "lu-font-size-huge", label: "lu-font-size-huge: 64px" },
-];
-exports.fontWeights = [
-    { key: "lu-font-weight-thin", label: "lu-font-weight-thin: 100" },
-    {
-        key: "lu-font-weight-extra-light",
-        label: "lu-font-weight-extra-light: 200",
-    },
-    { key: "lu-font-weight-light", label: "lu-font-weight-light: 300" },
-    { key: "lu-font-weight-regular", label: "lu-font-weight-regular: 400" },
-    { key: "lu-font-weight-medium", label: "lu-font-weight-medium: 500" },
-    { key: "lu-font-weight-semibold", label: "lu-font-weight-semibold: 600" },
-    { key: "lu-font-weight-bold", label: "lu-font-weight-bold: 700" },
-    { key: "lu-font-weight-extra-bold", label: "lu-font-weight-extra-bold: 800" },
-    { key: "lu-font-weight-black", label: "lu-font-weight-black: 900" },
-];
-exports.lineHeights = [
-    { key: "lu-line-height-xs", label: "lu-line-height-xs: 1" },
-    { key: "lu-line-height-sm", label: "lu-line-height-sm: 1.25" },
-    { key: "lu-line-height-base", label: "lu-line-height-base: 1.5" },
-    { key: "lu-line-height-lg", label: "lu-line-height-lg: 2" },
-];
-exports.textAlignment = [
-    { key: "lu-text-left", label: "lu-text-left: left" },
-    { key: "lu-text-center", label: "lu-text-center: center" },
-    { key: "lu-text-right", label: "lu-text-right: right" },
-    { key: "lu-text-justify", label: "lu-text-justify: justify" },
-    {
-        key: "lu-text-space-between",
-        label: "lu-text-space-between: space-between",
-    },
-];
-exports.textTransform = [
-    { key: "lu-text-lowercase", label: "lu-text-lowercase: lowercase" },
-    { key: "lu-text-uppercase", label: "lu-text-uppercase: uppercase" },
-    { key: "lu-text-capitalize", label: "lu-text-capitalize: capitalize" },
-];
-exports.textDecorations = [
-    { key: "lu-text-decoration-none", label: "lu-text-decoration-none: none" },
-    {
-        key: "lu-text-decoration-underline",
-        label: "lu-text-decoration-underline: underline",
-    },
-    {
-        key: "lu-text-decoration-line-through",
-        label: "lu-text-decoration-line-through: line-through",
-    },
-];
-exports.textWraps = [
-    { key: "lu-text-wrap", label: "lu-text-wrap: normal" },
-    { key: "lu-text-nowrap", label: "lu-text-nowrap: nowrap" },
-];
-exports.sizes = [
-    { key: "lu-size-050", label: "lu-size-050: 4px" },
-    { key: "lu-size-100", label: "lu-size-100: 8px" },
-    { key: "lu-size-200", label: "lu-size-200: 16px" },
-    { key: "lu-size-300", label: "lu-size-300: 24px" },
-    { key: "lu-size-400", label: "lu-size-400: 32px" },
-    { key: "lu-size-500", label: "lu-size-500: 40px" },
-    { key: "lu-size-600", label: "lu-size-600: 48px" },
-    { key: "lu-size-800", label: "lu-size-800: 64px" },
-    { key: "lu-size-1000", label: "lu-size-1000: 80px" },
-    { key: "lu-size-1500", label: "lu-size-1500: 120px" },
-    { key: "lu-size-2000", label: "lu-size-2000: 160px" },
-    { key: "lu-size-2500", label: "lu-size-2500: 200px" },
-];
-exports.widths = [
-    { key: "lu-width-5", label: "lu-width-5: 5%" },
-    { key: "lu-width-10", label: "lu-width-10: 10%" },
-    { key: "lu-width-25", label: "lu-width-25: 25%" },
-    { key: "lu-width-50", label: "lu-width-50: 50%" },
-    { key: "lu-width-75", label: "lu-width-75: 75%" },
-    { key: "lu-width-100", label: "lu-width-100: 100%" },
-];
-exports.heights = [
-    { key: "lu-height-5", label: "lu-height-5: 5%" },
-    { key: "lu-height-10", label: "lu-height-10: 10%" },
-    { key: "lu-height-25", label: "lu-height-25: 25%" },
-    { key: "lu-height-50", label: "lu-height-50: 50%" },
-    { key: "lu-height-75", label: "lu-height-75: 75%" },
-    { key: "lu-height-100", label: "lu-height-100: 100%" },
-];
-exports.minWidths = [
-    { key: "lu-min-width-100", label: "lu-min-width-100: 8px" },
-    { key: "lu-min-width-200", label: "lu-min-width-200: 16px" },
-    { key: "lu-min-width-300", label: "lu-min-width-300: 24px" },
-    { key: "lu-min-width-400", label: "lu-min-width-400: 32px" },
-    { key: "lu-min-width-500", label: "lu-min-width-500: 40px" },
-    { key: "lu-min-width-600", label: "lu-min-width-600: 48px" },
-    { key: "lu-min-width-800", label: "lu-min-width-800: 64px" },
-    { key: "lu-min-width-1000", label: "lu-min-width-1000: 80px" },
-    { key: "lu-min-width-1500", label: "lu-min-width-1500: 120px" },
-    { key: "lu-min-width-2000", label: "lu-min-width-2000: 160px" },
-    { key: "lu-min-width-2500", label: "lu-min-width-2500: 200px" },
-    { key: "lu-min-width-3000", label: "lu-min-width-3000: 240px" },
-];
-exports.minHeights = [
-    { key: "lu-min-height-100", label: "lu-min-height-100: 8px" },
-    { key: "lu-min-height-200", label: "lu-min-height-200: 16px" },
-    { key: "lu-min-height-300", label: "lu-min-height-300: 24px" },
-    { key: "lu-min-height-400", label: "lu-min-height-400: 32px" },
-    { key: "lu-min-height-500", label: "lu-min-height-500: 40px" },
-    { key: "lu-min-height-600", label: "lu-min-height-600: 48px" },
-    { key: "lu-min-height-800", label: "lu-min-height-800: 64px" },
-    { key: "lu-min-height-1000", label: "lu-min-height-1000: 80px" },
-    { key: "lu-min-height-1500", label: "lu-min-height-1500: 120px" },
-    { key: "lu-min-height-2000", label: "lu-min-height-2000: 160px" },
-    { key: "lu-min-height-2500", label: "lu-min-height-2500: 200px" },
-    { key: "lu-min-height-3000", label: "lu-min-height-3000: 240px" },
-];
-exports.spacings = [
-    { key: "lu-space-0", label: "lu-space-0: 0px" },
-    { key: "lu-space-050", label: "lu-space-050: 4px" },
-    { key: "lu-space-100", label: "lu-space-100: 8px" },
-    { key: "lu-space-150", label: "lu-space-150: 12px" },
-    { key: "lu-space-200", label: "lu-space-200: 16px" },
-    { key: "lu-space-250", label: "lu-space-250: 20px" },
-    { key: "lu-space-300", label: "lu-space-300: 24px" },
-    { key: "lu-space-400", label: "lu-space-400: 32px" },
-    { key: "lu-space-500", label: "lu-space-500: 40px" },
-    { key: "lu-space-600", label: "lu-space-600: 48px" },
-    { key: "lu-space-800", label: "lu-space-800: 64px" },
-    { key: "lu-space-1000", label: "lu-space-1000: 80px" },
-    { key: "lu-space-1500", label: "lu-space-1500: 120px" },
-    { key: "lu-space-2000", label: "lu-space-2000: 160px" },
-    { key: "lu-space-2500", label: "lu-space-2500: 200px" },
-    { key: "lu-space-3000", label: "lu-space-3000: 240px" },
-];
-exports.borderRadiusList = [
-    { key: "lu-border-rounded-none", label: "lu-border-rounded-none: 0px" },
-    { key: "lu-border-rounded-xs", label: "lu-border-rounded-xs: 2px" },
-    { key: "lu-border-rounded-sm", label: "lu-border-rounded-sm: 4px" },
-    { key: "lu-border-rounded-md", label: "lu-border-rounded-md: 6px" },
-    { key: "lu-border-rounded-lg", label: "lu-border-rounded-lg: 8px" },
-    { key: "lu-border-rounded-xl", label: "lu-border-rounded-xl: 12px" },
-    { key: "lu-border-rounded-2xl", label: "lu-border-rounded-2xl: 16px" },
-    { key: "lu-border-rounded-3xl", label: "lu-border-rounded-3xl: 24px" },
-    { key: "lu-border-rounded-full", label: "lu-border-rounded-full: 9999px" },
-];
-exports.borderWidthList = [
-    { key: "lu-border-width-125", label: "lu-border-width-125: 1px" },
-    { key: "lu-border-width-025", label: "lu-border-width-025: 2px" },
-    { key: "lu-border-width-050", label: "lu-border-width-050: 4px" },
-    { key: "lu-border-width-100", label: "lu-border-width-100: 8px" },
-];
-exports.iconSizeList = [
-    { key: "lu-icon-xx-small", label: "lu-icon-xx-small: 8px" },
-    { key: "lu-icon-x-small", label: "lu-icon-x-small: 12px" },
-    { key: "lu-icon-small", label: "lu-icon-small: 14px" },
-    { key: "lu-icon-medium", label: "lu-icon-medium: 16px" },
-    { key: "lu-icon-large", label: "lu-icon-large: 18px" },
-    { key: "lu-icon-x-large", label: "lu-icon-x-large: 20px" },
-    { key: "lu-icon-2x-large", label: "lu-icon-2x-large: 24px" },
-    { key: "lu-icon-3x-large", label: "lu-icon-3x-large: 28px" },
-    { key: "lu-icon-4x-large", label: "lu-icon-4x-large: 32px" },
-    { key: "lu-icon-5x-large", label: "lu-icon-5x-large: 36px" },
-    { key: "lu-icon-6x-large", label: "lu-icon-6x-large: 40px" },
-    { key: "lu-icon-7x-large", label: "lu-icon-7x-large: 48px" },
-    { key: "lu-icon-huge", label: "lu-icon-huge: 64px" },
-    { key: "lu-icon-massive", label: "lu-icon-massive: 80px" },
-];
-exports.buttonIconSizeList = [
-    { key: "lu-icon-xx-small", label: "lu-icon-xx-small: 8px" },
-    { key: "lu-icon-x-small", label: "lu-icon-x-small: 12px" },
-    { key: "lu-icon-small", label: "lu-icon-small: 14px" },
-    { key: "lu-icon-medium", label: "lu-icon-medium: 16px" },
-    { key: "lu-icon-large", label: "lu-icon-large: 18px" },
-    { key: "lu-icon-x-large", label: "lu-icon-x-large: 20px" },
-];
-exports.iconColorList = [
-    { key: "lu-disabled-icon-light", label: "lu-disabled-icon-light: #D2D3D5" },
-    { key: "lu-disabled-icon-dark", label: "lu-disabled-icon-dark: #9DA1A5" },
-    { key: "lu-primary-icon-default", label: "lu-primary-icon-default: #276AB3" },
-    { key: "lu-primary-icon-midtone", label: "lu-primary-icon-midtone: #E2EDF9" },
-    { key: "lu-primary-icon-light", label: "lu-primary-icon-light: #FBFCFE" },
-    { key: "lu-success-icon-default", label: "lu-success-icon-default: #198653" },
-    { key: "lu-success-icon-midtone", label: "lu-success-icon-midtone: #D1E7DD" },
-    { key: "lu-success-icon-light", label: "lu-success-icon-light: #FCFDFC" },
-    { key: "lu-warning-icon-default", label: "lu-warning-icon-default: #FFD333" },
-    { key: "lu-warning-icon-midtone", label: "lu-warning-icon-midtone: #FFF4CC" },
-    { key: "lu-warning-icon-dark", label: "lu-warning-icon-dark: #473800" },
-    { key: "lu-danger-icon-default", label: "lu-danger-icon-default: #E0061B" },
-    { key: "lu-danger-icon-midtone", label: "lu-danger-icon-midtone: #FFF0F1" },
-    { key: "lu-danger-icon-light", label: "lu-danger-icon-light: #FFFAFA" },
-    { key: "lu-info-icon-default", label: "lu-info-icon-default: #6249DE" },
-    { key: "lu-info-icon-midtone", label: "lu-info-icon-midtone: #ECE9FB" },
-    { key: "lu-info-icon-light", label: "lu-info-icon-light: #FBFBFE" },
-    { key: "lu-neutral-icon-light", label: "lu-neutral-icon-light: #FAFAFA" },
-    { key: "lu-neutral-icon-dark", label: "lu-neutral-icon-dark: #070808" },
-];
-exports.buttonColorsList = [
-    { key: "lu-btn-primary", label: "lu-btn-primary" },
-    { key: "lu-btn-primary-light", label: "lu-btn-primary-light" },
-    { key: "lu-btn-success", label: "lu-btn-success" },
-    { key: "lu-btn-success-light", label: "lu-btn-success-light" },
-    { key: "lu-btn-warning", label: "lu-btn-warning" },
-    { key: "lu-btn-warning-light", label: "lu-btn-warning-light" },
-    { key: "lu-btn-danger", label: "lu-btn-danger" },
-    { key: "lu-btn-danger-light", label: "lu-btn-danger-light" },
-    { key: "lu-btn-info", label: "lu-btn-info" },
-    { key: "lu-btn-info-light", label: "lu-btn-info-light" },
-    { key: "lu-btn-gray", label: "lu-btn-gray" },
-    { key: "lu-btn-gray-light", label: "lu-btn-gray-light" },
-    { key: "lu-btn-disabled", label: "lu-btn-disabled" },
-];
-exports.buttonSizeList = [
-    { key: "lu-btn-sm", label: "lu-btn-sm" },
-    { key: "lu-btn-md", label: "lu-btn-md" },
-    { key: "lu-btn-lg", label: "lu-btn-lg" },
-    { key: "lu-btn-xl", label: "lu-btn-xl" },
-];
-exports.buttonWithIconList = [
-    { key: "lu-btn-sm", label: "lu-btn-sm" },
-    { key: "lu-btn-md", label: "lu-btn-md" },
-    { key: "lu-btn-lg", label: "lu-btn-lg" },
-    { key: "lu-btn-xl", label: "lu-btn-xl" },
-];
-exports.portraitAspectRatioList = [
-    { key: "lu-aspect-square", label: "lu-aspect-square: 1/1" },
-    { key: "lu-aspect-1-2-por", label: "lu-aspect-1-2-por: 1/2" },
-    { key: "lu-aspect-2-3-por", label: "lu-aspect-2-3-por: 2/3" },
-    { key: "lu-aspect-3-4-por", label: "lu-aspect-3-4-por: 3/4" },
-    { key: "lu-aspect-4-5-por", label: "lu-aspect-4-5-por: 4/5" },
-    { key: "lu-aspect-5-7-por", label: "lu-aspect-5-7-por: 5/7" },
-    { key: "lu-aspect-9-16-por", label: "lu-aspect-9-16-por: 9/16" },
-    { key: "lu-aspect-9-21-por", label: "lu-aspect-9-21-por: 9/21" },
-];
-exports.landscapeAspectRatioList = [
-    { key: "lu-aspect-square", label: "lu-aspect-square: 1/1" },
-    { key: "lu-aspect-2-1-landsc", label: "lu-aspect-2-1-landsc: 2/1" },
-    { key: "lu-aspect-3-2-landsc", label: "lu-aspect-3-2-landsc: 3/2" },
-    { key: "lu-aspect-4-3-landsc", label: "lu-aspect-4-3-landsc: 4/3" },
-    { key: "lu-aspect-5-4-landsc", label: "lu-aspect-5-4-landsc: 5/4" },
-    { key: "lu-aspect-7-5-landsc", label: "lu-aspect-7-5-landsc: 7/5" },
-    { key: "lu-aspect-16-9-landsc", label: "lu-aspect-16-9-landsc: 16/9" },
-    { key: "lu-aspect-21-9-landscape", label: "lu-aspect-21-9-landscape: 21/9" },
-];
-exports.avatarSizesList = [
-    { key: "lu-avatar-massive", label: "lu-avatar-massive" },
-    { key: "lu-avatar-huge", label: "lu-avatar-huge" },
-    { key: "lu-avatar-7x-large", label: "lu-avatar-7x-large" },
-    { key: "lu-avatar-6x-large", label: "lu-avatar-6x-large" },
-    { key: "lu-avatar-5x-large", label: "lu-avatar-5x-large" },
-    { key: "lu-avatar-4x-large", label: "lu-avatar-4x-large" },
-    { key: "lu-avatar-3x-large", label: "lu-avatar-3x-large" },
-    { key: "lu-avatar-2x-large", label: "lu-avatar-2x-large" },
-    { key: "lu-avatar-x-large", label: "lu-avatar-x-large" },
-    { key: "lu-avatar-large", label: "lu-avatar-large" },
-    { key: "lu-avatar-medium", label: "lu-avatar-medium" },
-    { key: "lu-avatar-small", label: "lu-avatar-small" },
-];
-exports.textColorList = [
-    { key: "lu-text-base", label: "lu-text-base" },
-    { key: "lu-text-default", label: "lu-text-default" },
-    { key: "lu-text-secondary", label: "lu-text-secondary" },
-    { key: "lu-text-caption", label: "lu-text-caption" },
-    { key: "lu-text-placeholder", label: "lu-text-placeholder" },
-    { key: "lu-text-disabled", label: "lu-text-disabled" },
-    { key: "lu-text-primary", label: "lu-text-primary" },
-    { key: "lu-text-success", label: "lu-text-success" },
-    { key: "lu-text-warning", label: "lu-text-warning" },
-    { key: "lu-text-danger", label: "lu-text-danger" },
-    { key: "lu-text-gray", label: "lu-text-gray" },
-    { key: "lu-text-info", label: "lu-text-info" },
-    { key: "lu-text-link-default", label: "lu-text-link-default" },
-    { key: "lu-text-link-pressed", label: "lu-text-link-pressed" },
-];
-exports.avatarShapeList = [
-    { key: "square", label: "square" },
-    { key: "circle", label: "circle" },
-];
-exports.headingsList = [
-    { key: "lu-heading-h1", label: "lu-heading-h1" },
-    { key: "lu-heading-h2", label: "lu-heading-h2" },
-    { key: "lu-heading-h3", label: "lu-heading-h3" },
-    { key: "lu-heading-h4", label: "lu-heading-h4" },
-    { key: "lu-heading-h5", label: "lu-heading-h5" },
-    { key: "lu-heading-h6", label: "lu-heading-h6" },
-];
-var avatarBackgroundSize = function (size) {
-    if (size === "lu-avatar-massive") {
-        return {
-            width: "200px",
-            height: "200px",
-        };
-    }
-    else if (size === "lu-avatar-huge") {
-        return {
-            width: "160px",
-            height: "160px",
-        };
-    }
-    else if (size === "lu-avatar-7x-large") {
-        return {
-            width: "144px",
-            height: "144px",
-        };
-    }
-    else if (size === "lu-avatar-6x-large") {
-        return {
-            width: "128px",
-            height: "128px",
-        };
-    }
-    else if (size === "lu-avatar-5x-large") {
-        return {
-            width: "116px",
-            height: "116px",
-        };
-    }
-    else if (size === "lu-avatar-4x-large") {
-        return {
-            width: "96px",
-            height: "96px",
-        };
-    }
-    else if (size === "lu-avatar-3x-large") {
-        return {
-            width: "76px",
-            height: "76px",
-        };
-    }
-    else if (size === "lu-avatar-2x-large") {
-        return {
-            width: "64px",
-            height: "64px",
-        };
-    }
-    else if (size === "lu-avatar-x-large") {
-        return {
-            width: "52px",
-            height: "52px",
-        };
-    }
-    else if (size === "lu-avatar-large") {
-        return {
-            width: "42px",
-            height: "42px",
-        };
-    }
-    else if (size === "lu-avatar-medium") {
-        return {
-            width: "32px",
-            height: "32px",
-        };
-    }
-    else if (size === "lu-avatar-small") {
-        return {
-            width: "30px",
-            height: "30px",
-        };
-    }
-};
-exports.avatarBackgroundSize = avatarBackgroundSize;
-exports.sectionTypeList = Object.values(index_1.SectionTypeEnum).map(function (type) { return ({
-    key: type,
-    label: type,
-}); });
-//Plugin for generating utilities (Used in tailwind.config.js)
-function generateUtilities(property, theme) {
-    var utilities = theme(property);
-    var newUtilities = Object.keys(utilities).reduce(function (acc, key) {
-        var _a;
-        acc[".".concat(key)] = (_a = {}, _a[property] = utilities[key], _a);
-        return acc;
-    }, {});
-    return newUtilities;
-}
-//************Used for tailwind configuration************
-exports.customFontSize = {
-    "lu-base-font-size": "var(--core-200)",
-    "lu-font-size-x-small": "var(--core-150)",
-    "lu-font-size-small": "var(--core-175)",
-    "lu-font-size-medium": "var(--core-200)",
-    "lu-font-size-large": "var(--core-225)",
-    "lu-font-size-x-large": "var(--core-250)",
-    "lu-font-size-2x-large": "var(--core-300)",
-    "lu-font-size-3x-large": "var(--core-350)",
-    "lu-font-size-4x-large": "var(--core-400)",
-    "lu-font-size-5x-large": "var(--core-450)",
-    "lu-font-size-6x-large": "var(--core-500)",
-    "lu-font-size-7x-large": "var(--core-600)",
-    "lu-font-size-huge": "var(--core-800)",
-};
-exports.customFontWeight = {
-    "lu-font-weight-thin": "100",
-    "lu-font-weight-extra-light": "200",
-    "lu-font-weight-light": "300",
-    "lu-font-weight-regular": "400",
-    "lu-font-weight-medium": "500",
-    "lu-font-weight-semibold": "600",
-    "lu-font-weight-bold": "700",
-    "lu-font-weight-extra-bold": "800",
-    "lu-font-weight-black": "900",
-};
-exports.customLineHeight = {
-    "lu-line-height-xs": "1",
-    "lu-line-height-sm": "1.25",
-    "lu-line-height-base": "1.5",
-    "lu-line-height-lg": "2",
-};
-exports.customTextAlignment = {
-    "lu-text-left": "left",
-    "lu-text-center": "center",
-    "lu-text-right": "right",
-    "lu-text-justify": "justify",
-    "lu-text-space-between": "space-between",
-};
-exports.customTextTransform = {
-    "lu-text-lowercase": "lowercase",
-    "lu-text-uppercase": "uppercase",
-    "lu-text-capitalize": "capitalize",
-};
-exports.customTextDecoration = {
-    "lu-text-decoration-none": "none",
-    "lu-text-decoration-underline": "underline",
-    "lu-text-decoration-line-through": "line-through",
-};
-exports.customTextWrap = {
-    "lu-text-wrap": "normal",
-    "lu-text-nowrap": "nowrap",
-};
-exports.customSize = {
-    "lu-size-050": "var(--core-050)",
-    "lu-size-100": "var(--core-100)",
-    "lu-size-200": "var(--core-200)",
-    "lu-size-300": "var(--core-300)",
-    "lu-size-400": "var(--core-400)",
-    "lu-size-500": "var(--core-500)",
-    "lu-size-600": "var(--core-600)",
-    "lu-size-800": "var(--core-800)",
-    "lu-size-1000": "var(--core-1000)",
-    "lu-size-1500": "var(--core-1500)",
-    "lu-size-2000": "var(--core-2000)",
-    "lu-size-2500": "var(--core-2500)",
-};
-exports.customWidth = {
-    "lu-width-5": "5%",
-    "lu-width-10": "10%",
-    "lu-width-25": "25%",
-    "lu-width-50": "50%",
-    "lu-width-75": "75%",
-    "lu-width-100": "100%",
-};
-exports.customHeight = {
-    "lu-height-5": "5%",
-    "lu-height-10": "10%",
-    "lu-height-25": "25%",
-    "lu-height-50": "50%",
-    "lu-height-75": "75%",
-    "lu-height-100": "100%",
-};
-exports.customMinWidth = {
-    "lu-min-width-100": "var(--core-100)",
-    "lu-min-width-200": "var(--core-200)",
-    "lu-min-width-300": "var(--core-300)",
-    "lu-min-width-400": "var(--core-400)",
-    "lu-min-width-500": "var(--core-500)",
-    "lu-min-width-600": "var(--core-600)",
-    "lu-min-width-800": "var(--core-800)",
-    "lu-min-width-1000": "var(--core-1000)",
-    "lu-min-width-1500": "var(--core-1500)",
-    "lu-min-width-2000": "var(--core-2000)",
-    "lu-min-width-2500": "var(--core-2500)",
-    "lu-min-width-3000": "var(--core-3000)",
-};
-exports.customMinHeight = {
-    "lu-min-height-100": "var(--core-100)",
-    "lu-min-height-200": "var(--core-200)",
-    "lu-min-height-300": "var(--core-300)",
-    "lu-min-height-400": "var(--core-400)",
-    "lu-min-height-500": "var(--core-500)",
-    "lu-min-height-600": "var(--core-600)",
-    "lu-min-height-800": "var(--core-800)",
-    "lu-min-height-1000": "var(--core-1000)",
-    "lu-min-height-1500": "var(--core-1500)",
-    "lu-min-height-2000": "var(--core-2000)",
-    "lu-min-height-2500": "var(--core-2500)",
-    "lu-min-height-3000": "var(--core-3000)",
-};
-exports.customLogoSize = {
-    "lu-primary-logo": "75px",
-    "lu-secondary-logo": "var(--core-400)",
-    "lu-favicon-logo": "var(--core-400)",
-};
-exports.customIconSize = {
-    ".lu-icon-xx-small": {
-        width: "var(--core-100)",
-        height: "var(--core-100)",
-    },
-    ".lu-icon-x-small": {
-        width: "var(--core-150)",
-        height: "var(--core-150)",
-    },
-    ".lu-icon-small": {
-        width: "var(--core-175)",
-        height: "var(--core-175)",
-    },
-    ".lu-icon-medium": {
-        width: "var(--core-200)",
-        height: "var(--core-200)",
-    },
-    ".lu-icon-large": {
-        width: "var(--core-225)",
-        height: "var(--core-225)",
-    },
-    ".lu-icon-x-large": {
-        width: "var(--core-250)",
-        height: "var(--core-250)",
-    },
-    ".lu-icon-2x-large": {
-        width: "var(--core-300)",
-        height: "var(--core-300)",
-    },
-    ".lu-icon-3x-large": {
-        width: "var(--core-350)",
-        height: "var(--core-350)",
-    },
-    ".lu-icon-4x-large": {
-        width: "var(--core-400)",
-        height: "var(--core-400)",
-    },
-    ".lu-icon-5x-large": {
-        width: "var(--core-450)",
-        height: "var(--core-450)",
-    },
-    ".lu-icon-6x-large": {
-        width: "var(--core-500)",
-        height: "var(--core-500)",
-    },
-    ".lu-icon-7x-large": {
-        width: "var(--core-600)",
-        height: "var(--core-600)",
-    },
-    ".lu-icon-huge": {
-        width: "var(--core-800)",
-        height: "var(--core-800)",
-    },
-    ".lu-icon-massive": {
-        width: "var(--core-1000)",
-        height: "var(--core-1000)",
-    },
-};
-exports.customButtonIconSize = {
-    ".lu-icon-xx-small": {
-        width: "var(--core-100)",
-        height: "var(--core-100)",
-    },
-    ".lu-icon-x-small": {
-        width: "var(--core-150)",
-        height: "var(--core-150)",
-    },
-    ".lu-icon-small": {
-        width: "var(--core-175)",
-        height: "var(--core-175)",
-    },
-    ".lu-icon-medium": {
-        width: "var(--core-200)",
-        height: "var(--core-200)",
-    },
-    ".lu-icon-large": {
-        width: "var(--core-225)",
-        height: "var(--core-225)",
-    },
-    ".lu-icon-x-large": {
-        width: "var(--core-250)",
-        height: "var(--core-250)",
-    },
-};
-exports.customOpacity = {
-    "lu-opacity-0": "0.0",
-    "lu-opacity-5": "0.05",
-    "lu-opacity-10": "0.1",
-    "lu-opacity-15": "0.15",
-    "lu-opacity-20": "0.2",
-    "lu-opacity-25": "0.25",
-    "lu-opacity-30": "0.3",
-    "lu-opacity-40": "0.4",
-    "lu-opacity-50": "0.5",
-    "lu-opacity-60": "0.6",
-    "lu-opacity-70": "0.7",
-    "lu-opacity-75": "0.75",
-    "lu-opacity-80": "0.8",
-    "lu-opacity-90": "0.9",
-    "lu-opacity-95": "0.95",
-    "lu-opacity-100": "1",
-};
-exports.customBorderWidth = {
-    ".lu-border-width-0125": { borderWidth: "var(--core-0125)" },
-    ".lu-border-width-025": { borderWidth: "var(--core-025)" },
-    ".lu-border-width-050": { borderWidth: "var(--core-050)" },
-    ".lu-border-width-100": { borderWidth: "var(--core-100)" },
-    ".lu-border-width-125": { borderWidth: "var(--core-125)" },
-};
-exports.customBorderRadius = {
-    ".lu-border-rounded-none": { borderRadius: "var(--core-0)" },
-    ".lu-border-rounded-xs": { borderRadius: "var(--core-025)" },
-    ".lu-border-rounded-sm": { borderRadius: "var(--core-050)" },
-    ".lu-border-rounded-md": { borderRadius: "var(--core-075)" },
-    ".lu-border-rounded-lg": { borderRadius: "var(--core-100)" },
-    ".lu-border-rounded-xl": { borderRadius: "var(--core-150)" },
-    ".lu-border-rounded-2xl": { borderRadius: "var(--core-200)" },
-    ".lu-border-rounded-3xl": { borderRadius: "var(--core-300)" },
-    ".lu-border-rounded-full": { borderRadius: "9999px" },
-};
-// TODO: fix this name class name keep simple and short and remove landsc from  cspell list
-exports.customAspectRatio = {
-    ".lu-aspect-square": { aspectRatio: "1 / 1" },
-    ".lu-aspect-2-1-landsc": { aspectRatio: "2 / 1" },
-    ".lu-aspect-1-2-por": { aspectRatio: "1 / 2" },
-    ".lu-aspect-3-2-landsc": { aspectRatio: "3 / 2" },
-    ".lu-aspect-2-3-por": { aspectRatio: "2 / 3" },
-    ".lu-aspect-4-3-landsc": { aspectRatio: "4 / 3" },
-    ".lu-aspect-3-4-por": { aspectRatio: "3 / 4" },
-    ".lu-aspect-5-4-landsc": { aspectRatio: "5 / 4" },
-    ".lu-aspect-4-5-por": { aspectRatio: "4 / 5" },
-    ".lu-aspect-7-5-landsc": { aspectRatio: "7 / 5" },
-    ".lu-aspect-5-7-por": { aspectRatio: "5 / 7" },
-    ".lu-aspect-16-9-landsc": { aspectRatio: "16 / 9" },
-    ".lu-aspect-9-16-por": { aspectRatio: "9 / 16" },
-    ".lu-aspect-21-9-landscape": { aspectRatio: "21 / 9" },
-    ".lu-aspect-9-21-por": { aspectRatio: "9 / 21" },
-};
-exports.customBoxShadow = {
-    "lu-shadow-xs": "0px 4px 4px 0 rgba(52, 52, 52, 0.05)",
-    "lu-shadow-sm": "0px 4px 8px 0 rgba(52, 52, 52, 0.1)",
-    "lu-shadow-md": "0px 4px 12px 0 rgba(52, 52, 52, 0.15)",
-    "lu-shadow-lg": "0px 4px 18px 0 rgba(52, 52, 52, 0.15)",
-    "lu-shadow-xl": "0px 8px 24px 0 rgba(52, 52, 52, 0.15)",
-};
-// TODO: fix this name midtone to to other and remove landsc from  cspell list
-exports.customIconColors = {
-    ".lu-disabled-icon-light": { fill: "#D2D3D5" },
-    ".lu-disabled-icon-dark": { fill: "var(--neutral-400)" },
-    ".lu-primary-icon-default": { fill: "var( --primary-600)" },
-    ".lu-primary-icon-midtone": { fill: "var(--primary-100)" },
-    ".lu-primary-icon-light": { fill: "var(--primary-0)" },
-    ".lu-success-icon-default": { fill: "var(--success-600)" },
-    ".lu-success-icon-midtone": { fill: "var(--success-200)" },
-    ".lu-success-icon-light": { fill: "var(--success-0)" },
-    ".lu-warning-icon-default": { fill: "var(--warning-500)" },
-    ".lu-warning-icon-midtone": { fill: "var(--warning-200)" },
-    ".lu-warning-icon-dark": { fill: "var(--warning-1000)" },
-    ".lu-danger-icon-default": { fill: "var(--danger-600)" },
-    ".lu-danger-icon-midtone": { fill: "var(--danger-100)" },
-    ".lu-danger-icon-light": { fill: "var(--danger-0)" },
-    ".lu-info-icon-default": { fill: "var(--info-600)" },
-    ".lu-info-icon-midtone": { fill: "var(--info-100)" },
-    ".lu-info-icon-light": { fill: "var(--info-0)" },
-    ".lu-neutral-icon-light": { fill: "var(--neutral-0)" },
-    ".lu-neutral-icon-dark": { fill: "var(--neutral-1000)" },
-};
-exports.customButtonColors = {
-    ".lu-btn-primary": {
-        color: "var(--primary-0)",
-        backgroundColor: "var(--primary-600)",
-        fill: "var(--primary-0)",
-        "&:hover": {
-            backgroundColor: "var(--primary-700)",
-            color: "var(--primary-0)",
-            fill: "var(--primary-0)",
-            ".icon": {
-                color: "var(--primary-0)",
-                fill: "var(--primary-0)",
-            },
-        },
-        "&:focus": {
-            backgroundColor: "var(--primary-600)",
-            color: "var(--primary-0)",
-            fill: "var(--primary-0)",
-        },
-        "&:active": {
-            backgroundColor: "var(--primary-800)",
-            color: "var(--primary-0)",
-            fill: "var(--primary-0)",
-        },
-    },
-    ".lu-btn-primary-light": {
-        color: "var(--primary-600)",
-        backgroundColor: "var(--primary-100)",
-        fill: "var(--primary-600)",
-        "&:hover": {
-            backgroundColor: "var(--primary-700)",
-            color: "var(--primary-0)",
-            fill: "var(--primary-0)",
-            ".icon": {
-                color: "var(--primary-0)",
-                fill: "var(--primary-0)",
-            },
-        },
-        "&:focus": {
-            backgroundColor: "var(--primary-600)",
-            color: "var(--primary-0)",
-            fill: "var(--primary-0)",
-            ".icon": {
-                color: "var(--primary-0)",
-                fill: "var(--primary-0)",
-            },
-        },
-        "&:active": {
-            backgroundColor: "var(--primary-800)",
-            color: "var(--primary-0)",
-            fill: "var(--primary-0)",
-            ".icon": {
-                color: "var(--primary-0)",
-                fill: "var(--primary-0)",
-            },
-        },
-    },
-    ".lu-btn-success": {
-        color: "var(--success-0)",
-        backgroundColor: "var(--success-600)",
-        fill: "var(--success-0)",
-        "&:hover": {
-            backgroundColor: "var(--success-700)",
-            color: "var(--success-0)",
-            fill: "var(--success-0)",
-            ".icon": {
-                color: "var(--success-0)",
-                fill: "var(--success-0)",
-            },
-        },
-        "&:focus": {
-            backgroundColor: "var(--success-600)",
-            color: "var(--success-0)",
-            fill: "var(--success-0)",
-        },
-        "&:active": {
-            backgroundColor: "var(--success-800)",
-            color: "var(--success-0)",
-            fill: "var(--success-0)",
-        },
-    },
-    ".lu-btn-success-light": {
-        color: "var(--success-600)",
-        backgroundColor: "var(--success-100)",
-        fill: "var(--success-600)",
-        "&:hover": {
-            backgroundColor: "var(--success-700)",
-            color: "var(--success-0)",
-            fill: "var(--success-0)",
-            ".icon": {
-                color: "var(--success-0)",
-                fill: "var(--success-0)",
-            },
-        },
-        "&:focus": {
-            backgroundColor: "var(--success-600)",
-            color: "var(--success-0)",
-            fill: "var(--success-0)",
-            ".icon": {
-                color: "var(--success-0)",
-                fill: "var(--success-0)",
-            },
-        },
-        "&:active": {
-            backgroundColor: "var(--success-800)",
-            color: "var(--success-0)",
-            fill: "var(--success-0)",
-            ".icon": {
-                color: "var(--success-0)",
-                fill: "var(--success-0)",
-            },
-        },
-    },
-    ".lu-btn-warning": {
-        color: "var(--warning-1000)",
-        backgroundColor: "var(--warning-500)",
-        fill: "var(--warning-1000)",
-        "&:hover": {
-            backgroundColor: "var(--warning-600)",
-            color: "var(--warning-1000)",
-            fill: "var(--warning-1000)",
-            ".icon": {
-                color: "var(--warning-1000)",
-                fill: "var(--warning-1000)",
-            },
-        },
-        "&:focus": {
-            backgroundColor: "var(--warning-500)",
-            color: "var(--warning-1000)",
-            fill: "var(--warning-1000)",
-        },
-        "&:active": {
-            backgroundColor: "var(--warning-700)",
-            color: "var(--warning-1000)",
-            fill: "var(--warning-1000)",
-        },
-    },
-    ".lu-btn-warning-light": {
-        color: "var(--warning-900)",
-        backgroundColor: "var(--warning-100)",
-        fill: "var(--warning-900)",
-        "&:hover": {
-            backgroundColor: "var(--warning-600)",
-            color: "var(--warning-1000)",
-            fill: "var(--warning-1000)",
-            ".icon": {
-                color: "var(--warning-1000)",
-                fill: "var(--warning-1000)",
-            },
-        },
-        "&:focus": {
-            backgroundColor: "var(--warning-500)",
-            color: "var(--warning-1000)",
-            fill: "var(--warning-1000)",
-            ".icon": {
-                color: "var(--warning-1000)",
-                fill: "var(--warning-1000)",
-            },
-        },
-        "&:active": {
-            backgroundColor: "var(--warning-700)",
-            color: "var(--warning-1000)",
-            fill: "var(--warning-1000)",
-            ".icon": {
-                color: "var(--warning-1000)",
-                fill: "var(--warning-1000)",
-            },
-        },
-    },
-    ".lu-btn-danger": {
-        color: "var(--danger-0)",
-        backgroundColor: "var(--danger-600)",
-        fill: "var(--danger-0)",
-        "&:hover": {
-            backgroundColor: "var(--danger-700)",
-            color: "var(--danger-0)",
-            fill: "var(--danger-0)",
-            ".icon": {
-                color: "var(--danger-0)",
-                fill: "var(--danger-0)",
-            },
-        },
-        "&:focus": {
-            backgroundColor: "var(--danger-600)",
-            color: "var(--danger-0)",
-            fill: "var(--danger-0)",
-        },
-        "&:active": {
-            backgroundColor: "var(--danger-800)",
-            color: "var(--danger-0)",
-            fill: "var(--danger-0)",
-        },
-    },
-    ".lu-btn-danger-light": {
-        color: "var(--danger-600)",
-        backgroundColor: "var(--danger-100)",
-        fill: "var(--danger-600)",
-        "&:hover": {
-            backgroundColor: "var(--danger-700)",
-            color: "var(--danger-0)",
-            fill: "var(--danger-0)",
-            ".icon": {
-                color: "var(--danger-0)",
-                fill: "var(--danger-0)",
-            },
-        },
-        "&:focus": {
-            backgroundColor: "var(--danger-600)",
-            color: "var(--danger-0)",
-            fill: "var(--danger-0)",
-            ".icon": {
-                color: "var(--danger-0)",
-                fill: "var(--danger-0)",
-            },
-        },
-        "&:active": {
-            backgroundColor: "var(--danger-800)",
-            color: "var(--danger-0)",
-            fill: "var(--danger-0)",
-            ".icon": {
-                color: "var(--danger-0)",
-                fill: "var(--danger-0)",
-            },
-        },
-    },
-    ".lu-btn-info": {
-        color: "var(--info-0)",
-        backgroundColor: "var(--info-600)",
-        fill: "var(--info-0)",
-        "&:hover": {
-            backgroundColor: "var(--info-700)",
-            color: "var(--info-0)",
-            fill: "var(--info-0)",
-            ".icon": {
-                color: "var(--info-0)",
-                fill: "var(--info-0)",
-            },
-        },
-        "&:focus": {
-            backgroundColor: "var(--info-600)",
-            color: "var(--info-0)",
-            fill: "var(--info-0)",
-        },
-        "&:active": {
-            backgroundColor: "var(--info-800)",
-            color: "var(--info-0)",
-            fill: "var(--info-0)",
-        },
-    },
-    ".lu-btn-info-light": {
-        color: "var(--info-600)",
-        backgroundColor: "var(--info-100)",
-        fill: "var(--info-600)",
-        "&:hover": {
-            backgroundColor: "var(--info-700)",
-            color: "var(--info-0)",
-            fill: "var(--info-0)",
-            ".icon": {
-                color: "var(--info-0)",
-                fill: "var(--info-0)",
-            },
-        },
-        "&:focus": {
-            backgroundColor: "var(--info-600)",
-            color: "var(--info-0)",
-            fill: "var(--info-0)",
-            ".icon": {
-                color: "var(--info-0)",
-                fill: "var(--info-0)",
-            },
-        },
-        "&:active": {
-            backgroundColor: "var(--info-800)",
-            color: "var(--info-0)",
-            fill: "var(--info-0)",
-            ".icon": {
-                color: "var(--info-0)",
-                fill: "var(--info-0)",
-            },
-        },
-    },
-    ".lu-btn-gray": {
-        color: "var(--neutral-1000)",
-        backgroundColor: "var(--neutral-0)",
-        fill: "var(--neutral-1000)",
-        "&:hover": {
-            backgroundColor: "var(--neutral-100)",
-            color: "var(--neutral-1000)",
-            fill: "var(--neutral-1000)",
-            ".icon": {
-                color: "var(--neutral-1000)",
-                fill: "var(--neutral-1000)",
-            },
-        },
-        "&:focus": {
-            backgroundColor: "var(--neutral-0)",
-            color: "var(--neutral-1000)",
-            fill: "var(--neutral-1000)",
-        },
-        "&:active": {
-            backgroundColor: "var(--neutral-300)",
-            color: "var(--neutral-1000)",
-            fill: "var(--neutral-1000)",
-        },
-    },
-    ".lu-btn-gray-light": {
-        color: "var(--neutral-0)",
-        backgroundColor: "var(--neutral-900)",
-        fill: "var(--neutral-0)",
-        "&:hover": {
-            backgroundColor: "var(--neutral-100)",
-            color: "var(--neutral-1000)",
-            fill: "var(--neutral-1000)",
-            ".icon": {
-                color: "var(--neutral-1000)",
-                fill: "var(--neutral-1000)",
-            },
-        },
-        "&:focus": {
-            backgroundColor: "var(--neutral-0)",
-            color: "var(--neutral-1000)",
-            fill: "var(--neutral-1000)",
-            ".icon": {
-                color: "var(--neutral-1000)",
-                fill: "var(--neutral-1000)",
-            },
-        },
-        "&:active": {
-            backgroundColor: "var(--neutral-300)",
-            color: "var(--neutral-1000)",
-            fill: "var(--neutral-1000)",
-            ".icon": {
-                color: "var(--neutral-1000)",
-                fill: "var(--neutral-1000)",
-            },
-        },
-    },
-    ".lu-btn-disabled": {
-        color: "#9DA1A5",
-        backgroundColor: "#D2D3D5",
-        fill: "#9DA1A5",
-    },
-};
-exports.customButtonOutlineColors = {
-    ".outline-button.lu-btn-primary-light": {
-        color: "var(--primary-600)",
-        borderColor: "var(--primary-100) !important",
-        fill: "var(--primary-600)",
-        backgroundColor: "var(--white)",
-        border: "2px solid",
-        "&:hover": {
-            borderColor: "var(--primary-700) !important",
-            color: "var(--primary-700)",
-            fill: "var(--primary-700)",
-            ".icon": {
-                color: "var(--primary-700)",
-                fill: "var(--primary-700)",
-            },
-        },
-        "&:focus": {
-            borderColor: "var(--primary-600) !important",
-            color: "var(--primary-600)",
-            fill: "var(--primary-600)",
-            ".icon": {
-                color: "var(--primary-600)",
-                fill: "var(--primary-600)",
-            },
-        },
-        "&:active": {
-            borderColor: "var(--primary-800) !important",
-            color: "var(--primary-800)",
-            fill: "var(--primary-800)",
-            ".icon": {
-                color: "var(--primary-800)",
-                fill: "var(--primary-800)",
-            },
-        },
-    },
-    ".outline-button.lu-btn-primary": {
-        color: "var(--primary-600)",
-        borderColor: "var(--primary-600)",
-        fill: "var(--primary-600)",
-        backgroundColor: "var(--white)",
-        border: "2px solid",
-        "&:hover": {
-            borderColor: "var(--primary-700)",
-            color: "var(--primary-700)",
-            fill: "var(--primary-700)",
-            ".icon": {
-                color: "var(--primary-700)",
-                fill: "var(--primary-700)",
-            },
-        },
-        "&:focus": {
-            borderColor: "var(--primary-600)",
-            color: "var(--primary-600)",
-            fill: "var(--primary-600)",
-            ".icon": {
-                color: "var(--primary-600)",
-                fill: "var(--primary-600)",
-            },
-        },
-        "&:active": {
-            borderColor: "var(--primary-800)",
-            color: "var(--primary-800)",
-            fill: "var(--primary-800)",
-            ".icon": {
-                color: "var(--primary-800)",
-                fill: "var(--primary-800)",
-            },
-        },
-    },
-    ".outline-button.lu-btn-success": {
-        color: "var(--success-600)",
-        borderColor: "var(--success-600)",
-        fill: "var(--success-600)",
-        backgroundColor: "var(--white)",
-        border: "2px solid",
-        "&:hover": {
-            borderColor: "var(--success-700)",
-            color: "var(--success-700)",
-            fill: "var(--success-700)",
-            ".icon": {
-                color: "var(--success-700)",
-                fill: "var(--success-700)",
-            },
-        },
-        "&:focus": {
-            borderColor: "var(--success-600)",
-            color: "var(--success-600)",
-            fill: "var(--success-600)",
-            ".icon": {
-                color: "var(--success-600)",
-                fill: "var(--success-600)",
-            },
-        },
-        "&:active": {
-            borderColor: "var(--success-800)",
-            color: "var(--success-800)",
-            fill: "var(--success-800)",
-            ".icon": {
-                color: "var(--success-800)",
-                fill: "var(--success-800)",
-            },
-        },
-    },
-    ".outline-button.lu-btn-success-light": {
-        color: "var(--success-600)",
-        borderColor: "var(--success-100) !important",
-        fill: "var(--success-600)",
-        backgroundColor: "var(--white)",
-        border: "2px solid",
-        "&:hover": {
-            borderColor: "var(--success-700) !important",
-            color: "var(--success-700)",
-            fill: "var(--success-700)",
-            ".icon": {
-                color: "var(--success-700)",
-                fill: "var(--success-700)",
-            },
-        },
-        "&:focus": {
-            borderColor: "var(--success-600) !important",
-            color: "var(--success-600)",
-            fill: "var(--success-600)",
-            ".icon": {
-                color: "var(--success-600)",
-                fill: "var(--success-600)",
-            },
-        },
-        "&:active": {
-            borderColor: "var(--success-800) !important",
-            color: "var(--success-800)",
-            fill: "var(--success-800)",
-            ".icon": {
-                color: "var(--success-800)",
-                fill: "var(--success-800)",
-            },
-        },
-    },
-    ".outline-button.lu-btn-warning": {
-        color: "var(--warning-500)",
-        borderColor: "var(--warning-500)",
-        fill: "var(--warning-500)",
-        backgroundColor: "var(--white)",
-        border: "2px solid",
-        "&:hover": {
-            borderColor: "var(--warning-600)",
-            color: "var(--warning-600)",
-            fill: "var(--warning-600)",
-            ".icon": {
-                fill: "var(--warning-600)",
-                color: "var(--warning-600)",
-            },
-        },
-        "&:focus": {
-            borderColor: "var(--warning-500)",
-            color: "var(--warning-500)",
-            fill: "var(--warning-500)",
-            ".icon": {
-                color: "var(--warning-500)",
-                fill: "var(--warning-500)",
-            },
-        },
-        "&:active": {
-            borderColor: "var(--warning-700)",
-            color: "var(--warning-700)",
-            fill: "var(--warning-700)",
-            ".icon": {
-                color: "var(--warning-700)",
-                fill: "var(--warning-700)",
-            },
-        },
-    },
-    ".outline-button.lu-btn-warning-light": {
-        color: "var(--warning-500)",
-        borderColor: "var(--warning-100) !important",
-        fill: "var(--warning-500)",
-        backgroundColor: "var(--white)",
-        border: "2px solid",
-        "&:hover": {
-            borderColor: "var(--warning-600) !important",
-            color: "var(--warning-600)",
-            fill: "var(--warning-600)",
-            ".icon": {
-                fill: "var(--warning-600)",
-                color: "var(--warning-600)",
-            },
-        },
-        "&:focus": {
-            borderColor: "var(--warning-500) !important",
-            color: "var(--warning-500)",
-            fill: "var(--warning-500)",
-            ".icon": {
-                color: "var(--warning-500)",
-                fill: "var(--warning-500)",
-            },
-        },
-        "&:active": {
-            borderColor: "var(--warning-700) !important",
-            color: "var(--warning-700)",
-            fill: "var(--warning-700)",
-            ".icon": {
-                color: "var(--warning-700)",
-                fill: "var(--warning-700)",
-            },
-        },
-    },
-    ".outline-button.lu-btn-danger": {
-        color: "var(--danger-600)",
-        borderColor: "var(--danger-600)",
-        fill: "var(--danger-600)",
-        backgroundColor: "var(--white)",
-        border: "2px solid",
-        "&:hover": {
-            borderColor: "var(--danger-700)",
-            color: "var(--danger-700)",
-            fill: "var(--danger-700)",
-            ".icon": {
-                color: "var(--danger-700)",
-                fill: "var(--danger-700)",
-            },
-        },
-        "&:focus": {
-            borderColor: "var(--danger-600)",
-            color: "var(--danger-600)",
-            fill: "var(--danger-600)",
-            ".icon": {
-                color: "var(--danger-600)",
-                fill: "var(--danger-600)",
-            },
-        },
-        "&:active": {
-            borderColor: "var(--danger-800)",
-            color: "var(--danger-800)",
-            fill: "var(--danger-800)",
-            ".icon": {
-                color: "var(--danger-800)",
-                fill: "var(--danger-800)",
-            },
-        },
-    },
-    ".outline-button.lu-btn-danger-light": {
-        color: "var(--danger-600)",
-        borderColor: "var(--danger-100) !important",
-        fill: "var(--danger-600)",
-        backgroundColor: "var(--white)",
-        border: "2px solid",
-        "&:hover": {
-            borderColor: "var(--danger-700) !important",
-            color: "var(--danger-700)",
-            fill: "var(--danger-700)",
-            ".icon": {
-                color: "var(--danger-700)",
-                fill: "var(--danger-700)",
-            },
-        },
-        "&:focus": {
-            borderColor: "var(--danger-600) !important",
-            color: "var(--danger-600)",
-            fill: "var(--danger-600)",
-            ".icon": {
-                color: "var(--danger-600)",
-                fill: "var(--danger-600)",
-            },
-        },
-        "&:active": {
-            borderColor: "var(--danger-800) !important",
-            color: "var(--danger-800)",
-            fill: "var(--danger-800)",
-            ".icon": {
-                color: "var(--danger-800)",
-                fill: "var(--danger-800)",
-            },
-        },
-    },
-    ".outline-button.lu-btn-info": {
-        color: "var(--info-600)",
-        borderColor: "var(--info-600)",
-        fill: "var(--info-600)",
-        backgroundColor: "var(--white)",
-        border: "2px solid",
-        "&:hover": {
-            borderColor: "var(--info-700)",
-            color: "var(--info-700)",
-            fill: "var(--info-700)",
-            ".icon": {
-                color: "var(--info-700)",
-                fill: "var(--info-700)",
-            },
-        },
-        "&:focus": {
-            borderColor: "var(--info-600)",
-            color: "var(--info-600)",
-            fill: "var(--info-600)",
-            ".icon": {
-                color: "var(--info-600)",
-                fill: "var(--info-600)",
-            },
-        },
-        "&:active": {
-            borderColor: "var(--info-800)",
-            color: "var(--info-800)",
-            fill: "var(--info-800)",
-            ".icon": {
-                color: "var(--info-800)",
-                fill: "var(--info-800)",
-            },
-        },
-    },
-    ".outline-button.lu-btn-info-light": {
-        color: "var(--info-600)",
-        borderColor: "var(--info-100) !important",
-        fill: "var(--info-600)",
-        backgroundColor: "var(--white)",
-        border: "2px solid",
-        "&:hover": {
-            borderColor: "var(--info-700) !important",
-            color: "var(--info-700)",
-            fill: "var(--info-700)",
-            ".icon": {
-                color: "var(--info-700)",
-                fill: "var(--info-700)",
-            },
-        },
-        "&:focus": {
-            borderColor: "var(--info-600) !important",
-            color: "var(--info-600)",
-            fill: "var(--info-600)",
-            ".icon": {
-                color: "var(--info-600)",
-                fill: "var(--info-600)",
-            },
-        },
-        "&:active": {
-            borderColor: "var(--info-800) !important",
-            color: "var(--info-800)",
-            fill: "var(--info-800)",
-            ".icon": {
-                color: "var(--info-800)",
-                fill: "var(--info-800)",
-            },
-        },
-    },
-    ".outline-button.lu-btn-gray": {
-        color: "var(--neutral-0)",
-        borderColor: "var(--neutral-0)",
-        fill: "var(--neutral-0)",
-        backgroundColor: "var(--white)",
-        border: "2px solid",
-        "&:hover": {
-            borderColor: "var(--neutral-100)",
-            color: "var(--neutral-100)",
-            fill: "var(--neutral-100)",
-            ".icon": {
-                color: "var(--neutral-100)",
-                fill: "var(--neutral-100)",
-            },
-        },
-        "&:focus": {
-            borderColor: "var(--neutral-0)",
-            color: "var(--neutral-0)",
-            fill: "var(--neutral-0)",
-            ".icon": {
-                color: "var(--neutral-0)",
-                fill: "var(--neutral-0)",
-            },
-        },
-        "&:active": {
-            borderColor: "var(--neutral-300)",
-            color: "var(--neutral-300)",
-            fill: "var(--neutral-300)",
-            ".icon": {
-                color: "var(--neutral-300)",
-                fill: "var(--neutral-300)",
-            },
-        },
-    },
-    ".outline-button.lu-btn-gray-light": {
-        color: "var(--neutral-900)",
-        borderColor: "var(--neutral-900) !important",
-        fill: "var(--neutral-900)",
-        backgroundColor: "var(--white)",
-        border: "2px solid",
-        "&:hover": {
-            borderColor: "var(--neutral-100) !important",
-            color: "var(--neutral-100)",
-            fill: "var(--neutral-100)",
-            ".icon": {
-                color: "var(--neutral-100)",
-                fill: "var(--neutral-100)",
-            },
-        },
-        "&:focus": {
-            borderColor: "var(--neutral-0) !important",
-            color: "var(--neutral-0)",
-            fill: "var(--neutral-0)",
-            ".icon": {
-                color: "var(--neutral-0)",
-                fill: "var(--neutral-0)",
-            },
-        },
-        "&:active": {
-            borderColor: "var(--neutral-300) !important",
-            color: "var(--neutral-300)",
-            fill: "var(--neutral-300)",
-            ".icon": {
-                color: "var(--neutral-300)",
-                fill: "var(--neutral-300)",
-            },
-        },
-    },
-    ".outline-button.lu-btn-disabled": {
-        color: "#D2D3D5",
-        borderColor: "#D2D3D5",
-        fill: "#D2D3D5",
-        backgroundColor: "var(--white)",
-        border: "2px solid",
-    },
-};
-exports.customButtonSize = {
-    ".lu-btn-xl": {
-        //padding: top right bottom left
-        padding: "var(--core-200) var(--core-300)",
-        fontSize: "var(--core-250)",
-        fontWeight: "400",
-    },
-    ".lu-btn-lg": {
-        padding: "var(--core-150) var(--core-250)",
-        fontSize: "var(--core-225)",
-        fontWeight: "400",
-    },
-    ".lu-btn-md": {
-        padding: "var(--core-100) var(--core-200)",
-        fontSize: "var(--core-200)",
-        fontWeight: "400",
-    },
-    ".lu-btn-sm": {
-        padding: "var(--core-100) var(--core-150)",
-        fontSize: "var(--core-200)",
-        fontWeight: "400",
-    },
-};
-exports.customIconButtonSize = {
-    ".icon-only.lu-btn-xl": {
-        //padding: top right bottom left
-        padding: "var(--core-200)",
-    },
-    ".icon-only.lu-btn-lg": {
-        padding: "var(--core-150)",
-    },
-    ".icon-only.lu-btn-md": {
-        padding: "var(--core-100)",
-    },
-    ".icon-only.lu-btn-sm": {
-        padding: "var(--core-100)",
-    },
-};
-exports.customAvatarSize = {
-    ".lu-avatar-massive": {
-        width: "var(--core-1500)",
-        height: "var(--core-1500)",
-    },
-    ".lu-avatar-huge": {
-        width: "var( --core-1000)",
-        height: "var( --core-1000)",
-    },
-    ".lu-avatar-7x-large": {
-        width: "var(--core-800)",
-        height: "var(--core-800)",
-    },
-    ".lu-avatar-6x-large": {
-        width: "var(--core-600)",
-        height: "var(--core-600)",
-    },
-    ".lu-avatar-5x-large": {
-        width: "var(--core-450)",
-        height: "var(--core-450)",
-    },
-    ".lu-avatar-4x-large": {
-        width: "var(--core-400)",
-        height: "var(--core-400)",
-    },
-    ".lu-avatar-3x-large": {
-        width: "var(--core-350)",
-        height: "var(--core-350)",
-    },
-    ".lu-avatar-2x-large": {
-        width: "var(--core-300)",
-        height: "var(--core-300)",
-    },
-    ".lu-avatar-x-large": {
-        width: "var(--core-250)",
-        height: "var(--core-250)",
-    },
-    ".lu-avatar-large": {
-        width: "var(--core-225)",
-        height: "var(--core-225)",
-    },
-    ".lu-avatar-medium": {
-        width: "var(--core-200)",
-        height: "var(--core-200)",
-    },
-    ".lu-avatar-small": {
-        width: "var(--core-175)",
-        height: "var(--core-175)",
-    },
-};
-exports.customizeAvatarShape = {
-    ".square": { borderRadius: "0px" },
-    ".circle": { borderRadius: "9999px" },
-};
-exports.customizeTextColors = {
-    ".lu-text-base": { color: "var(--neutral-0)" },
-    ".lu-text-default": { color: "var(--black)" },
-    ".lu-text-secondary": { color: "var(--neutral-800)" },
-    ".lu-text-caption": { color: "var(--neutral-500)" },
-    ".lu-text-placeholder": { color: "var(--neutral-400)" },
-    ".lu-text-disabled": { color: "var(--neutral-400)" },
-    ".lu-text-primary": { color: "var(--primary-600)" },
-    ".lu-text-success": { color: "var(--success-600)" },
-    ".lu-text-warning": { color: "var(--warning-500)" },
-    ".lu-text-danger": { color: "var(--danger-600)" },
-    ".lu-text-gray": { color: "var(--neutral-600)" },
-    ".lu-text-info": { color: "var(--info-600)" },
-    ".lu-text-link-default": { color: "var(--primary-400)" },
-    ".lu-text-link-pressed": { color: "var(--primary-600)" },
-};
-exports.customHeadings = {
-    ".lu-heading-h1": {
-        fontSize: "var(--core-600)",
-        fontWeight: "bold",
-        lineHeight: "1",
-        color: "var(--black)",
-    },
-    ".lu-heading-h2": {
-        fontSize: "var(--core-450)",
-        fontWeight: "bold",
-        lineHeight: "1",
-        color: "var(--black)",
-    },
-    ".lu-heading-h3": {
-        fontSize: "var(--core-400)",
-        fontWeight: "bold",
-        lineHeight: "1",
-        color: "var(--black)",
-    },
-    ".lu-heading-h4": {
-        fontSize: "var(--core-350)",
-        fontWeight: "600",
-        lineHeight: "1",
-        color: "var(--black)",
-    },
-    ".lu-heading-h5": {
-        fontSize: "var(--core-300)",
-        fontWeight: "600",
-        lineHeight: "1",
-        color: "var(--black)",
-    },
-    ".lu-heading-h6": {
-        fontSize: "var(--core-250)",
-        fontWeight: "600",
-        lineHeight: "1",
-        color: "var(--black)",
-    },
-};
-// Components CSS Classes
-exports.table_data_className = "bg-gray-100 lu-pt-050 lu-pr-100 lu-pb-050 lu-pl-100 rounded gap-2.5";
-exports.table_header_className = "lu-pd-200";
-exports.table_sub_heading_className = "lu-text-center lu-text-uppercase lu-font-weight-semibold lu-font-size-large lu-pd-200";
-exports.table_row_className = "lu-pd-200";