tide-design-system 2.0.24 → 2.0.26

package/dist/tide-design-system.esm.d.ts

@@ -600,395 +600,398 @@ export declare const BREAKPOINT: {
 export declare type Breakpoint = (typeof BREAKPOINT)[keyof typeof BREAKPOINT];
 
 declare const CSS_2: {
-    withBreakpoint: (utilities: string[], breakpoint: Breakpoint) => string[];
-    ALIGN: {
-        X: {
-            CENTER: string;
-            LEFT: string;
-            RIGHT: string;
+    readonly withBreakpoint: (utilities: string[], breakpoint: Breakpoint) => string[];
+    readonly ALIGN: {
+        readonly X: {
+            readonly CENTER: "tide-text-center";
+            readonly LEFT: "tide-text-left";
+            readonly RIGHT: "tide-text-right";
         };
-        Y: {
-            MIDDLE: string;
+        readonly Y: {
+            readonly MIDDLE: "tide-align-middle";
         };
     };
-    AXIS1: {
-        AROUND: string;
-        BETWEEN: string;
-        CENTER: string;
-        END: string;
-        START: string;
-    };
-    AXIS2: {
-        AROUND: string;
-        CENTER: string;
-        END: string;
-        START: string;
-    };
-    BG: {
-        BLUR: string;
-        ERROR: string;
-        INFO: string;
-        PRIMARY: string;
-        SECONDARY: string;
-        SUCCESS: string;
-        SURFACE: {
-            ACCENT: string;
-            ACCENT_VARIANT: string;
-            BRAND: string;
-            DEFAULT: string;
-            ERROR: string;
-            FLOATING: string;
-            GRADIENT: string;
-            INFO: string;
-            SUCCESS: string;
-            VARIANT: string;
-            WARNING: string;
+    readonly AXIS1: {
+        readonly AROUND: "tide-axis1-around";
+        readonly BETWEEN: "tide-axis1-between";
+        readonly CENTER: "tide-axis1-center";
+        readonly END: "tide-axis1-end";
+        readonly START: "tide-axis1-start";
+    };
+    readonly AXIS2: {
+        readonly AROUND: "tide-axis2-around";
+        readonly CENTER: "tide-axis2-center";
+        readonly END: "tide-axis2-end";
+        readonly START: "tide-axis2-start";
+    };
+    readonly BG: {
+        readonly BLUR: "tide-bg-blur";
+        readonly ERROR: "tide-bg-error";
+        readonly INFO: "tide-bg-info";
+        readonly PRIMARY: "tide-bg-primary";
+        readonly SECONDARY: "tide-bg-secondary";
+        readonly SUCCESS: "tide-bg-success";
+        readonly SURFACE: {
+            readonly ACCENT: "tide-bg-surface-accent";
+            readonly ACCENT_VARIANT: "tide-bg-surface-accent-variant";
+            readonly BRAND: "tide-bg-surface-brand";
+            readonly DEFAULT: "tide-bg-surface";
+            readonly ERROR: "tide-bg-surface-error";
+            readonly FLOATING: "tide-bg-surface-floating";
+            readonly GRADIENT: "tide-bg-surface-gradient";
+            readonly INFO: "tide-bg-surface-info";
+            readonly SUCCESS: "tide-bg-surface-success";
+            readonly VARIANT: "tide-bg-surface-variant";
+            readonly WARNING: "tide-bg-surface-warning";
         };
-        WARNING: string;
-    };
-    BORDER: {
-        COLOR: {
-            DEFAULT: string;
-            FLOATING: string;
-            HIGH: string;
-            LOW: string;
-            PRIMARY: string;
+        readonly WARNING: "tide-bg-warning";
+    };
+    readonly BORDER: {
+        readonly COLOR: {
+            readonly DEFAULT: "tide-border";
+            readonly FLOATING: "tide-border-floating";
+            readonly HIGH: "tide-border-high";
+            readonly LOW: "tide-border-low";
+            readonly PRIMARY: "tide-border-primary";
         };
-        RADIUS: {
-            QUARTER: string;
-            HALF: string;
-            ONE: string;
-            FULL: string;
+        readonly RADIUS: {
+            readonly QUARTER: "tide-radius-1/4";
+            readonly HALF: "tide-radius-1/2";
+            readonly ONE: "tide-radius-1";
+            readonly FULL: "tide-radius-full";
         };
-        BOTTOM: {
-            ONE: string;
-            TWO: string;
+        readonly BOTTOM: {
+            readonly ONE: "tide-border-bottom-1";
+            readonly TWO: "tide-border-bottom-2";
         };
-        FULL: {
-            ONE: string;
-            TWO: string;
+        readonly FULL: {
+            readonly ONE: "tide-border-1";
+            readonly TWO: "tide-border-2";
         };
-        LEFT: {
-            ONE: string;
-            TWO: string;
+        readonly LEFT: {
+            readonly ONE: "tide-border-left-1";
+            readonly TWO: "tide-border-left-2";
         };
-        RIGHT: {
-            ONE: string;
-            TWO: string;
+        readonly RIGHT: {
+            readonly ONE: "tide-border-right-1";
+            readonly TWO: "tide-border-right-2";
         };
-        TOP: {
-            ONE: string;
-            TWO: string;
+        readonly TOP: {
+            readonly ONE: "tide-border-top-1";
+            readonly TWO: "tide-border-top-2";
         };
     };
-    BOX_SIZING: {
-        BORDER_BOX: string;
-        CONTENT_BOX: string;
-    };
-    BREAK_WORD: {
-        ON: string;
-    };
-    COLUMNS: {
-        ONE: string;
-        TWO: string;
-        THREE: string;
-        FOUR: string;
-    };
-    CURSOR: {
-        NOT_ALLOWED: string;
-        POINTER: string;
-        TEXT: string;
-    };
-    DISPLAY: {
-        BLOCK: string;
-        CONTENTS: string;
-        FLEX: string;
-        GRID: string;
-        INITIAL: string;
-        INLINE: string;
-        INLINE_BLOCK: string;
-        INLINE_FLEX: string;
-        NONE: string;
-    };
-    FLEX: {
-        BASIS: {
-            ZERO: string;
+    readonly BOX_SIZING: {
+        readonly BORDER_BOX: "tide-box-border";
+        readonly CONTENT_BOX: "tide-box-content";
+    };
+    readonly BREAK_WORD: {
+        readonly ON: "tide-break-word";
+    };
+    readonly COLUMNS: {
+        readonly ONE: "tide-columns-1";
+        readonly TWO: "tide-columns-2";
+        readonly THREE: "tide-columns-3";
+        readonly FOUR: "tide-columns-4";
+    };
+    readonly CURSOR: {
+        readonly NOT_ALLOWED: "tide-cursor-not-allowed";
+        readonly POINTER: "tide-cursor-pointer";
+        readonly TEXT: "tide-cursor-text";
+    };
+    readonly DISPLAY: {
+        readonly BLOCK: "tide-display-block";
+        readonly CONTENTS: "tide-contents";
+        readonly FLEX: "tide-display-flex";
+        readonly GRID: "tide-display-grid";
+        readonly INITIAL: "initial";
+        readonly INLINE: "tide-display-inline";
+        readonly INLINE_BLOCK: "tide-display-inline-block";
+        readonly INLINE_FLEX: "tide-display-inline-flex";
+        readonly NONE: "tide-display-none";
+    };
+    readonly FLEX: {
+        readonly BASIS: {
+            readonly ZERO: "tide-flex-basis-0";
         };
-        DIRECTION: {
-            COLUMN: string;
-            COLUMN_REVERSE: string;
-            ROW: string;
-            ROW_REVERSE: string;
+        readonly DIRECTION: {
+            readonly COLUMN: "tide-flex-column";
+            readonly COLUMN_REVERSE: "tide-flex-column-reverse";
+            readonly ROW: "tide-flex-row";
+            readonly ROW_REVERSE: "tide-flex-row-reverse";
         };
-        GROW: {
-            OFF: string;
-            ON: string;
+        readonly GROW: {
+            readonly OFF: "tide-grow-none";
+            readonly ON: "tide-grow";
         };
-        SHRINK: {
-            OFF: string;
-            ON: string;
+        readonly SHRINK: {
+            readonly OFF: "tide-shrink-none";
+            readonly ON: "tide-shrink";
         };
-        WRAP: string;
-    };
-    FONT: {
-        COLOR: {
-            PRIMARY: string;
-            SECONDARY: string;
-            SURFACE: {
-                BRAND: string;
-                DEFAULT: string;
-                INVERSE: string;
-                VARIANT: string;
-                VARIANT_INVERSE: string;
+        readonly WRAP: "tide-flex-wrap";
+    };
+    readonly FONT: {
+        readonly COLOR: {
+            readonly PRIMARY: "tide-font-on-primary";
+            readonly SECONDARY: "tide-font-on-secondary";
+            readonly SURFACE: {
+                readonly BRAND: "tide-font-on-surface-brand";
+                readonly DEFAULT: "tide-font-on-surface";
+                readonly INVERSE: "tide-font-on-surface-inverse";
+                readonly VARIANT: "tide-font-on-surface-variant";
+                readonly VARIANT_INVERSE: "tide-font-on-surface-variant-inverse";
             };
         };
-        SIZE: {
-            TWELVE: string;
-            FOURTEEN: string;
-            SIXTEEN: string;
-            TWENTY: string;
-            TWENTY_FOUR: string;
-            THIRTY_TWO: string;
+        readonly SIZE: {
+            readonly TWELVE: "tide-font-12";
+            readonly FOURTEEN: "tide-font-14";
+            readonly SIXTEEN: "tide-font-16";
+            readonly TWENTY: "tide-font-20";
+            readonly TWENTY_FOUR: "tide-font-24";
+            readonly THIRTY_TWO: "tide-font-32";
         };
-        WEIGHT: {
-            FOUR_HUNDRED: string;
-            FIVE_HUNDRED: string;
-            SIX_HUNDRED: string;
-            SEVEN_HUNDRED: string;
+        readonly WEIGHT: {
+            readonly FOUR_HUNDRED: "tide-font-400";
+            readonly FIVE_HUNDRED: "tide-font-500";
+            readonly SIX_HUNDRED: "tide-font-600";
+            readonly SEVEN_HUNDRED: "tide-font-700";
         };
     };
-    GAP: {
-        QUARTER: string;
-        HALF: string;
-        ONE: string;
-        TWO: string;
-        FOUR: string;
-    };
-    GRID: {
-        END: {
-            ONE: string;
-            TWO: string;
-            THREE: string;
-            FOUR: string;
-            FIVE: string;
-            SIX: string;
-            SEVEN: string;
-            EIGHT: string;
-            NINE: string;
-            TEN: string;
-            ELEVEN: string;
-            TWELVE: string;
-            THIRTEEN: string;
+    readonly GAP: {
+        readonly QUARTER: "tide-gap-1/4";
+        readonly HALF: "tide-gap-1/2";
+        readonly ONE: "tide-gap-1";
+        readonly TWO: "tide-gap-2";
+        readonly FOUR: "tide-gap-4";
+    };
+    readonly GRID: {
+        readonly END: {
+            readonly ONE: "tide-end-1";
+            readonly TWO: "tide-end-2";
+            readonly THREE: "tide-end-3";
+            readonly FOUR: "tide-end-4";
+            readonly FIVE: "tide-end-5";
+            readonly SIX: "tide-end-6";
+            readonly SEVEN: "tide-end-7";
+            readonly EIGHT: "tide-end-8";
+            readonly NINE: "tide-end-9";
+            readonly TEN: "tide-end-10";
+            readonly ELEVEN: "tide-end-11";
+            readonly TWELVE: "tide-end-12";
+            readonly THIRTEEN: "tide-end-13";
         };
-        FLUID: string;
-        LAYOUT: string;
-        START: {
-            ZERO: string;
-            ONE: string;
-            TWO: string;
-            THREE: string;
-            FOUR: string;
-            FIVE: string;
-            SIX: string;
-            SEVEN: string;
-            EIGHT: string;
-            NINE: string;
-            TEN: string;
-            ELEVEN: string;
-            TWELVE: string;
+        readonly FLUID: "tide-fluid";
+        readonly LAYOUT: "tide-grid-layout";
+        readonly START: {
+            readonly ZERO: "tide-start-0";
+            readonly ONE: "tide-start-1";
+            readonly TWO: "tide-start-2";
+            readonly THREE: "tide-start-3";
+            readonly FOUR: "tide-start-4";
+            readonly FIVE: "tide-start-5";
+            readonly SIX: "tide-start-6";
+            readonly SEVEN: "tide-start-7";
+            readonly EIGHT: "tide-start-8";
+            readonly NINE: "tide-start-9";
+            readonly TEN: "tide-start-10";
+            readonly ELEVEN: "tide-start-11";
+            readonly TWELVE: "tide-start-12";
         };
-        XL: string;
+        readonly XL: "tide-grid-xl";
     };
-    HEIGHT: {
-        ZERO: string;
-        FULL: string;
+    readonly HEIGHT: {
+        readonly ZERO: "tide-width-0";
+        readonly FULL: "tide-height-full";
     };
-    ISOLATION: {
-        ISOLATE: string;
+    readonly ISOLATION: {
+        readonly ISOLATE: "tide-isolate";
     };
-    LIST_BULLETS: {
-        OFF: string;
+    readonly LIST_BULLETS: {
+        readonly OFF: "tide-list-none";
     };
-    MARGIN: {
-        BOTTOM: {
-            QUARTER: string;
-            HALF: string;
-            ONE: string;
-            TWO: string;
-            FOUR: string;
+    readonly MARGIN: {
+        readonly BOTTOM: {
+            readonly QUARTER: "tide-margin-bottom-1/4";
+            readonly HALF: "tide-margin-bottom-1/2";
+            readonly ONE: "tide-margin-bottom-1";
+            readonly TWO: "tide-margin-bottom-2";
+            readonly FOUR: "tide-margin-bottom-4";
         };
-        FULL: {
-            QUARTER: string;
-            HALF: string;
-            ONE: string;
-            TWO: string;
-            FOUR: string;
+        readonly FULL: {
+            readonly QUARTER: "tide-margin-1/4";
+            readonly HALF: "tide-margin-1/2";
+            readonly ONE: "tide-margin-1";
+            readonly TWO: "tide-margin-2";
+            readonly FOUR: "tide-margin-4";
         };
-        LEFT: {
-            AUTO: string;
-            QUARTER: string;
-            HALF: string;
-            ONE: string;
-            TWO: string;
-            FOUR: string;
+        readonly LEFT: {
+            readonly AUTO: "tide-margin-left-auto";
+            readonly QUARTER: "tide-margin-left-1/4";
+            readonly HALF: "tide-margin-left-1/2";
+            readonly ONE: "tide-margin-left-1";
+            readonly TWO: "tide-margin-left-2";
+            readonly FOUR: "tide-margin-left-4";
         };
-        RIGHT: {
-            AUTO: string;
-            QUARTER: string;
-            HALF: string;
-            ONE: string;
-            TWO: string;
-            FOUR: string;
+        readonly RIGHT: {
+            readonly AUTO: "tide-margin-right-auto";
+            readonly QUARTER: "tide-margin-right-1/4";
+            readonly HALF: "tide-margin-right-1/2";
+            readonly ONE: "tide-margin-right-1";
+            readonly TWO: "tide-margin-right-2";
+            readonly FOUR: "tide-margin-right-4";
         };
-        TOP: {
-            QUARTER: string;
-            HALF: string;
-            ONE: string;
-            TWO: string;
-            FOUR: string;
+        readonly TOP: {
+            readonly QUARTER: "tide-margin-top-1/4";
+            readonly HALF: "tide-margin-top-1/2";
+            readonly ONE: "tide-margin-top-1";
+            readonly TWO: "tide-margin-top-2";
+            readonly FOUR: "tide-margin-top-4";
         };
-        X: {
-            AUTO: string;
-            QUARTER: string;
-            HALF: string;
-            ONE: string;
-            TWO: string;
-            FOUR: string;
+        readonly X: {
+            readonly AUTO: "tide-margin-x-auto";
+            readonly QUARTER: "tide-margin-x-1/4";
+            readonly HALF: "tide-margin-x-1/2";
+            readonly ONE: "tide-margin-x-1";
+            readonly TWO: "tide-margin-x-2";
+            readonly FOUR: "tide-margin-x-4";
         };
-        Y: {
-            QUARTER: string;
-            HALF: string;
-            ONE: string;
-            TWO: string;
-            FOUR: string;
+        readonly Y: {
+            readonly QUARTER: "tide-margin-y-1/4";
+            readonly HALF: "tide-margin-y-1/2";
+            readonly ONE: "tide-margin-y-1";
+            readonly TWO: "tide-margin-y-2";
+            readonly FOUR: "tide-margin-y-4";
         };
     };
-    OBJECT: {
-        CENTER: string;
-        CONTAIN: string;
-        COVER: string;
-        SCALE_DOWN: string;
-    };
-    OPACITY: {
-        OFF: string;
-        ON: string;
-    };
-    OVERFLOW: {
-        X: {
-            AUTO: string;
-            HIDDEN: string;
-            SCROLL: string;
+    readonly OBJECT: {
+        readonly CENTER: "tide-object-center";
+        readonly CONTAIN: "tide-object-contain";
+        readonly COVER: "tide-object-cover";
+        readonly SCALE_DOWN: "tide-object-scale-down";
+    };
+    readonly OPACITY: {
+        readonly OFF: "tide-opacity-none";
+        readonly ON: "tide-opacity";
+    };
+    readonly OVERFLOW: {
+        readonly X: {
+            readonly AUTO: "tide-x-auto";
+            readonly HIDDEN: "tide-x-hidden";
+            readonly SCROLL: "tide-x-scroll";
         };
-        XY: {
-            AUTO: string;
-            HIDDEN: string;
+        readonly XY: {
+            readonly AUTO: "tide-xy-auto";
+            readonly HIDDEN: "tide-xy-hidden";
         };
-        Y: {
-            AUTO: string;
-            HIDDEN: string;
+        readonly Y: {
+            readonly AUTO: "tide-y-auto";
+            readonly HIDDEN: "tide-y-hidden";
         };
     };
-    PADDING: {
-        BOTTOM: {
-            QUARTER: string;
-            HALF: string;
-            ONE: string;
-            TWO: string;
-            FOUR: string;
+    readonly PADDING: {
+        readonly BOTTOM: {
+            readonly QUARTER: "tide-padding-bottom-1/4";
+            readonly HALF: "tide-padding-bottom-1/2";
+            readonly ONE: "tide-padding-bottom-1";
+            readonly TWO: "tide-padding-bottom-2";
+            readonly FOUR: "tide-padding-bottom-4";
         };
-        FULL: {
-            QUARTER: string;
-            HALF: string;
-            ONE: string;
-            TWO: string;
-            FOUR: string;
+        readonly FULL: {
+            readonly QUARTER: "tide-padding-1/4";
+            readonly HALF: "tide-padding-1/2";
+            readonly ONE: "tide-padding-1";
+            readonly TWO: "tide-padding-2";
+            readonly FOUR: "tide-padding-4";
         };
-        LEFT: {
-            QUARTER: string;
-            HALF: string;
-            ONE: string;
-            TWO: string;
-            FOUR: string;
+        readonly LEFT: {
+            readonly QUARTER: "tide-padding-left-1/4";
+            readonly HALF: "tide-padding-left-1/2";
+            readonly ONE: "tide-padding-left-1";
+            readonly TWO: "tide-padding-left-2";
+            readonly FOUR: "tide-padding-left-4";
         };
-        RIGHT: {
-            QUARTER: string;
-            HALF: string;
-            ONE: string;
-            TWO: string;
-            FOUR: string;
+        readonly RIGHT: {
+            readonly QUARTER: "tide-padding-right-1/4";
+            readonly HALF: "tide-padding-right-1/2";
+            readonly ONE: "tide-padding-right-1";
+            readonly TWO: "tide-padding-right-2";
+            readonly FOUR: "tide-padding-right-4";
         };
-        TOP: {
-            QUARTER: string;
-            HALF: string;
-            ONE: string;
-            TWO: string;
-            FOUR: string;
+        readonly TOP: {
+            readonly QUARTER: "tide-padding-top-1/4";
+            readonly HALF: "tide-padding-top-1/2";
+            readonly ONE: "tide-padding-top-1";
+            readonly TWO: "tide-padding-top-2";
+            readonly FOUR: "tide-padding-top-4";
         };
-        X: {
-            QUARTER: string;
-            HALF: string;
-            ONE: string;
-            TWO: string;
-            FOUR: string;
+        readonly X: {
+            readonly QUARTER: "tide-padding-x-1/4";
+            readonly HALF: "tide-padding-x-1/2";
+            readonly ONE: "tide-padding-x-1";
+            readonly TWO: "tide-padding-x-2";
+            readonly FOUR: "tide-padding-x-4";
         };
-        Y: {
-            QUARTER: string;
-            HALF: string;
-            ONE: string;
-            TWO: string;
-            FOUR: string;
+        readonly Y: {
+            readonly QUARTER: "tide-padding-y-1/4";
+            readonly HALF: "tide-padding-y-1/2";
+            readonly ONE: "tide-padding-y-1";
+            readonly TWO: "tide-padding-y-2";
+            readonly FOUR: "tide-padding-y-4";
         };
     };
-    POINTER_EVENTS: {
-        OFF: string;
-        ON: string;
+    readonly POINTER_EVENTS: {
+        readonly OFF: "tide-pointer-events-none";
+        readonly ON: "tide-pointer-events";
     };
-    POSITION: {
-        ABSOLUTE: string;
-        FIXED: string;
-        RELATIVE: string;
-        STICKY: string;
+    readonly POSITION: {
+        readonly ABSOLUTE: "tide-position-absolute";
+        readonly FIXED: "tide-position-fixed";
+        readonly RELATIVE: "tide-position-relative";
+        readonly STICKY: "tide-sticky";
     };
-    POSITIONING: {
-        BOTTOM: string;
-        LEFT: string;
-        RIGHT: string;
-        TOP: string;
+    readonly POSITIONING: {
+        readonly BOTTOM: "tide-bottom-0";
+        readonly LEFT: "tide-left-0";
+        readonly RIGHT: "tide-right-0";
+        readonly TOP: "tide-top-0";
     };
-    SCROLLBAR: {
-        OFF: string;
+    readonly SCROLLBAR: {
+        readonly OFF: "tide-scrollbar-none";
     };
-    SHADOW: {
-        BOTTOM: string;
-        TOP: string;
+    readonly SHADOW: {
+        readonly BOTTOM: "tide-shadow-bottom";
+        readonly TOP: "tide-shadow-top";
     };
-    SNAP: {
-        ON: string;
+    readonly SNAP: {
+        readonly ON: "tide-snap";
     };
-    SNAP_ALIGN: {
-        START: string;
+    readonly SNAP_ALIGN: {
+        readonly START: "tide-snap-start";
     };
-    TEXT_TRANSFORM: {
-        LOWER: string;
-        NONE: string;
-        UPPER: string;
+    readonly TEXT_TRANSFORM: {
+        readonly LOWER: "tide-text-transform-lower";
+        readonly NONE: "tide-text-transform-none";
+        readonly UPPER: "tide-text-transform-upper";
     };
-    UNDERLINE: {
-        HOVER: string;
-        OFF: string;
-        ON: string;
+    readonly UNDERLINE: {
+        readonly HOVER: "tide-underline-hover";
+        readonly OFF: "tide-underline-none";
+        readonly ON: "tide-underline";
     };
-    VISIBILITY: {
-        OFF: string;
-        ON: string;
+    readonly VISIBILITY: {
+        readonly OFF: "tide-visible-none";
+        readonly ON: "tide-visible";
     };
-    WHITESPACE_WRAP: {
-        OFF: string;
+    readonly WHITESPACE_WRAP: {
+        readonly OFF: "tide-whitespace-nowrap";
     };
-    WIDTH: {
-        ZERO: string;
-        FULL: string;
-        MAX_FULL: string;
+    readonly WIDTH: {
+        readonly ZERO: "tide-width-0";
+        readonly FULL: "tide-width-full";
+        readonly MAX_FULL: "tide-max-width-full";
+    };
+    readonly Z_INDEX: {
+        readonly ONE: "tide-z-index-1";
     };
 };
 export { CSS_2 as CSS }