npm - linkedunion-design-kit - Versions diffs - 0.1.3 → 0.1.5 - Mend

linkedunion-design-kit 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (85) hide show

package/dist/utils/index.d.ts CHANGED Viewed

@@ -47,10 +47,58 @@ export declare const heights: {
     key: string;
     label: string;
 }[];
+export declare const minWidths: {
+    key: string;
+    label: string;
+}[];
+export declare const minHeights: {
+    key: string;
+    label: string;
+}[];
 export declare const spacings: {
     key: string;
     label: string;
 }[];
+export declare const borderRadiusList: {
+    key: string;
+    label: string;
+}[];
+export declare const borderWidthList: {
+    key: string;
+    label: string;
+}[];
+export declare const iconSizeList: {
+    key: string;
+    label: string;
+}[];
+export declare const buttonIconSizeList: {
+    key: string;
+    label: string;
+}[];
+export declare const iconColorList: {
+    key: string;
+    label: string;
+}[];
+export declare const buttonColorsList: {
+    key: string;
+    label: string;
+}[];
+export declare const butttonSizeList: {
+    key: string;
+    label: string;
+}[];
+export declare const buttonWithIconList: {
+    key: string;
+    label: string;
+}[];
+export declare const portraitaspectRatioList: {
+    key: string;
+    label: string;
+}[];
+export declare const landscapeaspectRatioList: {
+    key: string;
+    label: string;
+}[];
 export default function generateUtilities(property: string, theme: (property: string) => Record<string, string>): Record<string, Record<string, string>>;
 export declare const customColors: {
     white: string;
@@ -202,6 +250,7 @@ export declare const customSize: {
     'lu-size-2500': string;
 };
 export declare const customWidth: {
+    'lu-width-5': string;
     'lu-width-10': string;
     'lu-width-25': string;
     'lu-width-50': string;
@@ -209,6 +258,7 @@ export declare const customWidth: {
     'lu-width-100': string;
 };
 export declare const customHeight: {
+    'lu-height-5': string;
     'lu-height-10': string;
     'lu-height-25': string;
     'lu-height-50': string;
@@ -216,6 +266,9 @@ export declare const customHeight: {
     'lu-height-100': string;
 };
 export declare const customMinWidth: {
+    'lu-min-width-100': string;
+    'lu-min-width-200': string;
+    'lu-min-width-300': string;
     'lu-min-width-400': string;
     'lu-min-width-500': string;
     'lu-min-width-600': string;
@@ -227,6 +280,9 @@ export declare const customMinWidth: {
     'lu-min-width-3000': string;
 };
 export declare const customMinHeight: {
+    'lu-min-height-100': string;
+    'lu-min-height-200': string;
+    'lu-min-height-300': string;
     'lu-min-height-400': string;
     'lu-min-height-500': string;
     'lu-min-height-600': string;
@@ -242,23 +298,89 @@ export declare const customLogoSize: {
     'lu-secondary-logo': string;
     'lu-favicon-logo': string;
 };
-export declare const customSpacing: {
-    'lu-space-0': string;
-    'lu-space-050': string;
-    'lu-space-100': string;
-    'lu-space-150': string;
-    'lu-space-200': string;
-    'lu-space-250': string;
-    'lu-space-300': string;
-    'lu-space-400': string;
-    'lu-space-500': string;
-    'lu-space-600': string;
-    'lu-space-800': string;
-    'lu-space-1000': string;
-    'lu-space-1500': string;
-    'lu-space-2000': string;
-    'lu-space-2500': string;
-    'lu-space-3000': string;
+export declare const customIconSize: {
+    '.lu-icon-xx-small': {
+        width: string;
+        height: string;
+    };
+    '.lu-icon-x-small': {
+        width: string;
+        height: string;
+    };
+    '.lu-icon-small': {
+        width: string;
+        height: string;
+    };
+    '.lu-icon-medium': {
+        width: string;
+        height: string;
+    };
+    '.lu-icon-large': {
+        width: string;
+        height: string;
+    };
+    '.lu-icon-x-large': {
+        width: string;
+        height: string;
+    };
+    '.lu-icon-2x-large': {
+        width: string;
+        height: string;
+    };
+    '.lu-icon-3x-large': {
+        width: string;
+        height: string;
+    };
+    '.lu-icon-4x-large': {
+        width: string;
+        height: string;
+    };
+    '.lu-icon-5x-large': {
+        width: string;
+        height: string;
+    };
+    '.lu-icon-6x-large': {
+        width: string;
+        height: string;
+    };
+    '.lu-icon-7x-large': {
+        width: string;
+        height: string;
+    };
+    '.lu-icon-huge': {
+        width: string;
+        height: string;
+    };
+    '.lu-icon-massive': {
+        width: string;
+        height: string;
+    };
+};
+export declare const customButtonIconSize: {
+    '.lu-icon-xx-small': {
+        width: string;
+        height: string;
+    };
+    '.lu-icon-x-small': {
+        width: string;
+        height: string;
+    };
+    '.lu-icon-small': {
+        width: string;
+        height: string;
+    };
+    '.lu-icon-medium': {
+        width: string;
+        height: string;
+    };
+    '.lu-icon-large': {
+        width: string;
+        height: string;
+    };
+    '.lu-icon-x-large': {
+        width: string;
+        height: string;
+    };
 };
 export declare const customOpacity: {
     'lu-opacity-0': string;
@@ -279,38 +401,94 @@ export declare const customOpacity: {
     'lu-opacity-100': string;
 };
 export declare const customBorderWidth: {
-    'lu-border-width-0125': string;
-    'lu-border-width-025': string;
-    'lu-border-width-050': string;
-    'lu-border-width-100': string;
+    '.lu-border-width-025': {
+        borderWidth: string;
+    };
+    '.lu-border-width-050': {
+        borderWidth: string;
+    };
+    '.lu-border-width-100': {
+        borderWidth: string;
+    };
+    '.lu-border-width-125': {
+        borderWidth: string;
+    };
 };
 export declare const customBorderRadius: {
-    'lu-border-rounded-none': string;
-    'lu-border-rounded-xs': string;
-    'lu-border-rounded-sm': string;
-    'lu-border-rounded-md': string;
-    'lu-border-rounded-lg': string;
-    'lu-border-rounded-xl': string;
-    'lu-border-rounded-2xl': string;
-    'lu-border-rounded-3xl': string;
-    'lu-border-rounded-full': string;
+    '.lu-border-rounded-none': {
+        borderRadius: string;
+    };
+    '.lu-border-rounded-xs': {
+        borderRadius: string;
+    };
+    '.lu-border-rounded-sm': {
+        borderRadius: string;
+    };
+    '.lu-border-rounded-md': {
+        borderRadius: string;
+    };
+    '.lu-border-rounded-lg': {
+        borderRadius: string;
+    };
+    '.lu-border-rounded-xl': {
+        borderRadius: string;
+    };
+    '.lu-border-rounded-2xl': {
+        borderRadius: string;
+    };
+    '.lu-border-rounded-3xl': {
+        borderRadius: string;
+    };
+    '.lu-border-rounded-full': {
+        borderRadius: string;
+    };
 };
 export declare const customAspectRatio: {
-    'lu-aspect-square': string;
-    'lu-aspect-2/1-landsc': string;
-    'lu-aspect-1/2-por': string;
-    'lu-aspect-3/2-landsc': string;
-    'lu-aspect-2/3-por': string;
-    'lu-aspect-4/3-landsc': string;
-    'lu-aspect-3/4-por': string;
-    'lu-aspect-5/4-landsc': string;
-    'lu-aspect-4/5-por': string;
-    'lu-aspect-7/5-landsc': string;
-    'lu-aspect-5/7-por': string;
-    'lu-aspect-16/9-landsc': string;
-    'lu-aspect-9/16-por': string;
-    'lu-aspect-21/9-landscape': string;
-    'lu-aspect-9/21-por': string;
+    '.lu-aspect-square': {
+        aspectRatio: string;
+    };
+    '.lu-aspect-2-1-landsc': {
+        aspectRatio: string;
+    };
+    '.lu-aspect-1-2-por': {
+        aspectRatio: string;
+    };
+    '.lu-aspect-3-2-landsc': {
+        aspectRatio: string;
+    };
+    '.lu-aspect-2-3-por': {
+        aspectRatio: string;
+    };
+    '.lu-aspect-4-3-landsc': {
+        aspectRatio: string;
+    };
+    '.lu-aspect-3-4-por': {
+        aspectRatio: string;
+    };
+    '.lu-aspect-5-4-landsc': {
+        aspectRatio: string;
+    };
+    '.lu-aspect-4-5-por': {
+        aspectRatio: string;
+    };
+    '.lu-aspect-7-5-landsc': {
+        aspectRatio: string;
+    };
+    '.lu-aspect-5-7-por': {
+        aspectRatio: string;
+    };
+    '.lu-aspect-16-9-landsc': {
+        aspectRatio: string;
+    };
+    '.lu-aspect-9-16-por': {
+        aspectRatio: string;
+    };
+    '.lu-aspect-21-9-landscape': {
+        aspectRatio: string;
+    };
+    '.lu-aspect-9-21-por': {
+        aspectRatio: string;
+    };
 };
 export declare const customBoxShadow: {
     'lu-shadow-xs': string;
@@ -319,3 +497,862 @@ export declare const customBoxShadow: {
     'lu-shadow-lg': string;
     'lu-shadow-xl': string;
 };
+export declare const customIconColors: {
+    '.lu-disabled-icon-light': {
+        fill: string;
+    };
+    '.lu-disabled-icon-dark': {
+        fill: string;
+    };
+    '.lu-primary-icon-default': {
+        fill: string;
+    };
+    '.lu-primary-icon-midtone': {
+        fill: string;
+    };
+    '.lu-primary-icon-light': {
+        fill: string;
+    };
+    '.lu-success-icon-default': {
+        fill: string;
+    };
+    '.lu-success-icon-midtone': {
+        fill: string;
+    };
+    '.lu-success-icon-light': {
+        fill: string;
+    };
+    '.lu-warning-icon-default': {
+        fill: string;
+    };
+    '.lu-warning-icon-midtone': {
+        fill: string;
+    };
+    '.lu-warning-icon-dark': {
+        fill: string;
+    };
+    '.lu-danger-icon-default': {
+        fill: string;
+    };
+    '.lu-danger-icon-midtone': {
+        fill: string;
+    };
+    '.lu-danger-icon-light': {
+        fill: string;
+    };
+    '.lu-info-icon-default': {
+        fill: string;
+    };
+    '.lu-info-icon-midtone': {
+        fill: string;
+    };
+    '.lu-info-icon-light': {
+        fill: string;
+    };
+    '.lu-neutral-icon-light': {
+        fill: string;
+    };
+    '.lu-neutral-icon-dark': {
+        fill: string;
+    };
+};
+export declare const customButtonColors: {
+    '.lu-btn-primary': {
+        color: string;
+        backgroundColor: string;
+        fill: string;
+        '&:hover': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+        };
+        '&:active': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+        };
+    };
+    '.lu-btn-primary-light': {
+        color: string;
+        backgroundColor: string;
+        fill: string;
+        '&:hover': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:active': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+    };
+    '.lu-btn-success': {
+        color: string;
+        backgroundColor: string;
+        fill: string;
+        '&:hover': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+        };
+        '&:active': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+        };
+    };
+    '.lu-btn-success-light': {
+        color: string;
+        backgroundColor: string;
+        fill: string;
+        '&:hover': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:active': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+    };
+    '.lu-btn-warning': {
+        color: string;
+        backgroundColor: string;
+        fill: string;
+        '&:hover': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+        };
+        '&:active': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+        };
+    };
+    '.lu-btn-warning-light': {
+        color: string;
+        backgroundColor: string;
+        fill: string;
+        '&:hover': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:active': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+    };
+    '.lu-btn-danger': {
+        color: string;
+        backgroundColor: string;
+        fill: string;
+        '&:hover': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+        };
+        '&:active': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+        };
+    };
+    '.lu-btn-danger-light': {
+        color: string;
+        backgroundColor: string;
+        fill: string;
+        '&:hover': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:active': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+    };
+    '.lu-btn-info': {
+        color: string;
+        backgroundColor: string;
+        fill: string;
+        '&:hover': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+        };
+        '&:active': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+        };
+    };
+    '.lu-btn-info-light': {
+        color: string;
+        backgroundColor: string;
+        fill: string;
+        '&:hover': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:active': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+    };
+    '.lu-btn-gray': {
+        color: string;
+        backgroundColor: string;
+        fill: string;
+        '&:hover': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+        };
+        '&:active': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+        };
+    };
+    '.lu-btn-gray-light': {
+        color: string;
+        backgroundColor: string;
+        fill: string;
+        '&:hover': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:active': {
+            backgroundColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+    };
+    '.lu-btn-disabled': {
+        color: string;
+        backgroundColor: string;
+        fill: string;
+    };
+};
+export declare const customButtonOutlineColors: {
+    '.outline-button.lu-btn-primary-light': {
+        color: string;
+        borderColor: string;
+        fill: string;
+        backgroundColor: string;
+        border: string;
+        '&:hover': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:active': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+    };
+    '.outline-button.lu-btn-primary': {
+        color: string;
+        borderColor: string;
+        fill: string;
+        backgroundColor: string;
+        border: string;
+        '&:hover': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:active': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+    };
+    '.outline-button.lu-btn-success': {
+        color: string;
+        borderColor: string;
+        fill: string;
+        backgroundColor: string;
+        border: string;
+        '&:hover': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:active': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+    };
+    '.outline-button.lu-btn-success-light': {
+        color: string;
+        borderColor: string;
+        fill: string;
+        backgroundColor: string;
+        border: string;
+        '&:hover': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:active': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+    };
+    '.outline-button.lu-btn-warning': {
+        color: string;
+        borderColor: string;
+        fill: string;
+        backgroundColor: string;
+        border: string;
+        '&:hover': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                fill: string;
+                color: string;
+            };
+        };
+        '&:focus': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:active': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+    };
+    '.outline-button.lu-btn-warning-light': {
+        color: string;
+        borderColor: string;
+        fill: string;
+        backgroundColor: string;
+        border: string;
+        '&:hover': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                fill: string;
+                color: string;
+            };
+        };
+        '&:focus': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:active': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+    };
+    '.outline-button.lu-btn-danger': {
+        color: string;
+        borderColor: string;
+        fill: string;
+        backgroundColor: string;
+        border: string;
+        '&:hover': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:active': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+    };
+    '.outline-button.lu-btn-danger-light': {
+        color: string;
+        borderColor: string;
+        fill: string;
+        backgroundColor: string;
+        border: string;
+        '&:hover': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:active': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+    };
+    '.outline-button.lu-btn-info': {
+        color: string;
+        borderColor: string;
+        fill: string;
+        backgroundColor: string;
+        border: string;
+        '&:hover': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:active': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+    };
+    '.outline-button.lu-btn-info-light': {
+        color: string;
+        borderColor: string;
+        fill: string;
+        backgroundColor: string;
+        border: string;
+        '&:hover': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:active': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+    };
+    '.outline-button.lu-btn-gray': {
+        color: string;
+        borderColor: string;
+        fill: string;
+        backgroundColor: string;
+        border: string;
+        '&:hover': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:active': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+    };
+    '.outline-button.lu-btn-gray-light': {
+        color: string;
+        borderColor: string;
+        fill: string;
+        backgroundColor: string;
+        border: string;
+        '&:hover': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:focus': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+        '&:active': {
+            borderColor: string;
+            color: string;
+            fill: string;
+            '.icon': {
+                color: string;
+                fill: string;
+            };
+        };
+    };
+    '.outline-button.lu-btn-disabled': {
+        color: string;
+        borderColor: string;
+        fill: string;
+        backgroundColor: string;
+        border: string;
+    };
+};
+export declare const customButtonSize: {
+    '.lu-btn-xl': {
+        padding: string;
+        fontSize: string;
+        fontWeight: string;
+    };
+    '.lu-btn-lg': {
+        padding: string;
+        fontSize: string;
+        fontWeight: string;
+    };
+    '.lu-btn-md': {
+        padding: string;
+        fontSize: string;
+        fontWeight: string;
+    };
+    '.lu-btn-sm': {
+        padding: string;
+        fontSize: string;
+        fontWeight: string;
+    };
+};
+export declare const customIconButtonSize: {
+    '.icon-only.lu-btn-xl': {
+        padding: string;
+    };
+    '.icon-only.lu-btn-lg': {
+        padding: string;
+    };
+    '.icon-only.lu-btn-md': {
+        padding: string;
+    };
+    '.icon-only.lu-btn-sm': {
+        padding: string;
+    };
+};
+export declare const table_data_className = "bg-gray-100 lu-pt-050 lu-pr-100 lu-pb-050 lu-pl-100 rounded gap-2.5";
+export declare const table_header_className = "lu-pd-200";
+export declare const table_sub_heading_className = "lu-text-center lu-text-uppercase lu-font-weight-semibold lu-font-size-large lu-pd-200";
+export declare const table_row_className = "lu-pd-200";