linkedunion-design-kit 0.1.2 → 0.1.4

package/dist/utils/index.js

@@ -0,0 +1,1496 @@
+//************Used for typography and color utilities Storybook************
+export var 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 popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
+export var colorGroups = {
+    primary: [
+        "bg-primary-0",
+        "bg-primary-100",
+        "bg-primary-200",
+        "bg-primary-300",
+        "bg-primary-400",
+        "bg-primary-500",
+        "bg-primary-600",
+        "bg-primary-700",
+        "bg-primary-800",
+        "bg-primary-900",
+        "bg-primary-1000",
+    ],
+    gray: [
+        "bg-gray-0",
+        "bg-gray-100",
+        "bg-gray-200",
+        "bg-gray-300",
+        "bg-gray-400",
+        "bg-gray-500",
+        "bg-gray-600",
+        "bg-gray-700",
+        "bg-gray-800",
+        "bg-gray-900",
+        "bg-gray-1000",
+    ],
+    success: [
+        "bg-success-0",
+        "bg-success-100",
+        "bg-success-200",
+        "bg-success-300",
+        "bg-success-400",
+        "bg-success-500",
+        "bg-success-600",
+        "bg-success-700",
+        "bg-success-800",
+        "bg-success-900",
+        "bg-success-1000",
+    ],
+    warning: [
+        "bg-warning-0",
+        "bg-warning-100",
+        "bg-warning-200",
+        "bg-warning-300",
+        "bg-warning-400",
+        "bg-warning-500",
+        "bg-warning-600",
+        "bg-warning-700",
+        "bg-warning-800",
+        "bg-warning-900",
+        "bg-warning-1000",
+    ],
+    danger: [
+        "bg-danger-0",
+        "bg-danger-100",
+        "bg-danger-200",
+        "bg-danger-300",
+        "bg-danger-400",
+        "bg-danger-500",
+        "bg-danger-600",
+        "bg-danger-700",
+        "bg-danger-800",
+        "bg-danger-900",
+        "bg-danger-1000",
+    ],
+    info: [
+        "bg-info-0",
+        "bg-info-100",
+        "bg-info-200",
+        "bg-info-300",
+        "bg-info-400",
+        "bg-info-500",
+        "bg-info-600",
+        "bg-info-700",
+        "bg-info-800",
+        "bg-info-900",
+        "bg-info-1000",
+    ]
+};
+export var 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' },
+];
+export var 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' },
+];
+export var 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' }
+];
+export var 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' },
+];
+export var 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' },
+];
+export var 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-linethrough', label: 'lu-text-decoration-linethrough: linethrough' },
+];
+export var textWraps = [
+    { key: 'lu-text-wrap', label: 'lu-text-wrap: normal' },
+    { key: 'lu-text-nowrap', label: 'lu-text-nowrap: nowrap' },
+];
+export var 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' }
+];
+export var 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%' }
+];
+export var 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%' }
+];
+export var 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' },
+];
+export var 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' },
+];
+export var 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' }
+];
+export var 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' },
+];
+export var 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' },
+];
+export var 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' },
+];
+export var 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' },
+];
+export var 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' }
+];
+export var 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' },
+];
+export var butttonSizeList = [
+    { 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' },
+];
+export var 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' },
+];
+export var 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' }
+];
+export var 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' },
+];
+//Plugin for generating utilities (Used in tailwind.config.js)
+export default 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************
+export var customColors = {
+    white: '#FEFEFE',
+    black: '#0F0F0F',
+    primary: {
+        0: '#FBFCFE',
+        100: '#E2EDF9',
+        200: '#B8D3EF',
+        300: '#8EB9E6',
+        400: '#649EDD',
+        500: '#3A84D4',
+        600: '#276AB3',
+        700: '#1E528A',
+        800: '#153960',
+        900: '#0C2036',
+        1000: '#03080D'
+    },
+    gray: {
+        0: '#FCFCFD',
+        100: '#ECEDEE',
+        200: '#D2D4D5',
+        300: '#B7BABD',
+        400: '#9DA1A5',
+        500: '#82878C',
+        600: '#696E72',
+        700: '#515458',
+        800: '#383B3D',
+        900: '#202122',
+        1000: '#070808'
+    },
+    success: {
+        0: '#FCFDFC',
+        100: '#EBF5F0',
+        200: '#D1E7DD',
+        300: '#A3CFBB',
+        400: '#75B798',
+        500: '#479F76',
+        600: '#198653',
+        700: '#146C43',
+        800: '#0F5132',
+        900: '#0A3622',
+        1000: '#051B11'
+    },
+    warning: {
+        0: '#FFFDF5',
+        100: '#FFF9E5',
+        200: '#FFF4CC',
+        300: '#FFE999',
+        400: '#FFDE66',
+        500: '#FFD333',
+        600: '#FFC700',
+        700: '#DBAC00',
+        800: '#8A6C00',
+        900: '#665000',
+        1000: '#473800'
+    },
+    danger: {
+        0: '#FFFAFA',
+        100: '#FFE0E4',
+        200: '#FEC6CB',
+        300: '#FD9EA7',
+        400: '#FC7784',
+        500: '#FA4F5F',
+        600: '#E0061B',
+        700: '#B30515',
+        800: '#73030E',
+        900: '#460208',
+        1000: '#230104'
+    },
+    info: {
+        0: '#FBFBFE',
+        100: '#ECE9FB',
+        200: '#D5CFF6',
+        300: '#C3BAF2',
+        400: '#ADA0EE',
+        500: '#8976E6',
+        600: '#6249DE',
+        700: '#4226CF',
+        800: '#341EA4',
+        900: '#261679',
+        1000: '#190E4E'
+    },
+};
+export var 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)',
+};
+export var 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',
+};
+export var customLineHeight = {
+    'lu-line-height-xs': '1',
+    'lu-line-height-sm': '1.25',
+    'lu-line-height-base': '1.5',
+    'lu-line-height-lg': '2',
+};
+export var customTextAlignment = {
+    'lu-text-left': 'left',
+    'lu-text-center': 'center',
+    'lu-text-right': 'right',
+    'lu-text-justify': 'justify',
+    'lu-text-space-between': 'space-between',
+};
+export var customTextTransform = {
+    'lu-text-lowercase': 'lowercase',
+    'lu-text-uppercase': 'uppercase',
+    'lu-text-capitalize': 'capitalize',
+};
+export var customTextDecoration = {
+    'lu-text-decoration-none': 'none',
+    'lu-text-decoration-underline': 'underline',
+    'lu-text-decoration-linethrough': 'line-through',
+};
+export var customTextWrap = {
+    'lu-text-wrap': 'normal',
+    'lu-text-nowrap': 'nowrap',
+};
+export var 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)',
+};
+export var 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%'
+};
+export var 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%'
+};
+export var 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)',
+};
+export var 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)',
+};
+export var customLogoSize = {
+    'lu-primary-logo': '75px',
+    'lu-secondary-logo': 'var(--core-400)',
+    'lu-favicon-logo': 'var(--core-400)'
+};
+export var 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)',
+    },
+};
+export var 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)',
+    },
+};
+export var 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',
+};
+export var customBorderWidth = {
+    '.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)' },
+};
+export var 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' },
+};
+export var 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' },
+};
+export var 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)',
+};
+export var 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)' }
+};
+export var 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'
+    }
+};
+export var 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'
+    }
+};
+export var 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',
+    },
+};
+export var 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)'
+    },
+};
+// Components CSS Classes
+export var table_data_className = 'bg-gray-100 lu-pt-050 lu-pr-100 lu-pb-050 lu-pl-100 rounded gap-2.5';
+export var table_header_className = 'lu-pd-200';
+export var table_sub_heading_className = "lu-text-center lu-text-uppercase lu-font-weight-semibold lu-font-size-large lu-pd-200";
+export var table_row_className = "lu-pd-200";