h2o-library 1.7.0 → 1.7.1

package/dist/components/index.d.ts

@@ -37,3 +37,5 @@ export * from "./src/date-range-picker";
 export * from "./src/legend";
 export * from "./src/chart";
 export * from "./src/expandable-table";
+export * from "./src/chip";
+export * from "./src/segmented-toggle";

package/dist/components/src/checkbox.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
     label?: string;
     className?: string;
+    labelClassName?: string;
     isCard?: boolean;
     isIndeterminate?: boolean;
 }

package/dist/components/src/chip.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { IconType } from "../../types";
+type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+    label: string;
+    icon?: IconType;
+    variant?: "neutral" | "primary" | "success" | "warning" | "error";
+    iconStrokeWidth?: number;
+    iconClassName?: string;
+    iconSize?: number;
+};
+export declare const Chip: ({ className, label, icon, variant, iconStrokeWidth, iconClassName, iconSize, ...props }: ChipProps) => React.JSX.Element;
+export {};

package/dist/components/src/message.d.ts

@@ -1,9 +1,12 @@
 import React from "react";
-export type MessageVariant = "info" | "muted" | "error" | "warning";
+export type MessageVariant = "info" | "muted" | "error" | "warning" | "success";
 interface MessageProps {
     variant: MessageVariant;
     className?: string;
+    iconSize?: number;
+    iconStrokeWidth?: number;
+    iconClassName?: string;
     message?: string | null;
 }
-export declare const Message: ({ variant, className, message }: MessageProps) => React.JSX.Element | null;
+export declare const Message: ({ variant, className, iconSize, iconStrokeWidth, iconClassName, message, }: MessageProps) => React.JSX.Element | null;
 export {};

package/dist/components/src/modal.d.ts

@@ -6,5 +6,11 @@ export interface ModalProps {
     description?: string;
     children: React.ReactNode;
     className?: string;
+    titleContainerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    closeButtonClassName?: string;
+    headerClassName?: string;
+    contentClassName?: string;
 }
-export declare const Modal: ({ isOpen, onClose, title, description, children, className, }: ModalProps) => React.ReactPortal | null;
+export declare const Modal: ({ isOpen, onClose, title, description, children, className, titleContainerClassName, titleClassName, descriptionClassName, closeButtonClassName, headerClassName, contentClassName, }: ModalProps) => React.ReactPortal | null;

package/dist/components/src/segmented-toggle.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { IconType } from "../../types";
+import type { IconProps as IconPropsType } from "./icon";
+export type SegmentedToggleOption = {
+    label: string;
+    value: string;
+    icon?: IconType;
+    iconProps?: Omit<IconPropsType, "icon">;
+    labelProps?: React.HTMLAttributes<HTMLSpanElement>;
+};
+export interface SegmentedToggleProps {
+    options: SegmentedToggleOption[];
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    optionClassName?: string;
+    selected: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+}
+export declare function SegmentedToggle({ options, size, className, optionClassName, selected, onChange, disabled, }: SegmentedToggleProps): React.JSX.Element;

package/dist/components/src/side-panel.d.ts

@@ -2,9 +2,15 @@ import React from "react";
 export interface SidePanelProps {
     isOpen: boolean;
     onClose: () => void;
+    position?: "left" | "right";
     title?: string;
     description?: string;
     children: React.ReactNode;
     className?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    closeButtonClassName?: string;
+    headerClassName?: string;
+    contentClassName?: string;
 }
-export declare const SidePanel: ({ isOpen, onClose, title, description, children, className, }: SidePanelProps) => JSX.Element | null;
+export declare const SidePanel: ({ isOpen, onClose, position, title, description, children, className, titleClassName, descriptionClassName, closeButtonClassName, headerClassName, contentClassName, }: SidePanelProps) => JSX.Element | null;

package/dist/components/src/textarea.d.ts

@@ -9,5 +9,7 @@ export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
     containerClassName?: string;
     tooltip?: string;
     tooltipPosition?: TooltipPosition;
+    maxLength?: number;
+    enableResize?: boolean;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/css/index.css

@@ -1 +1 @@
-:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/date-range-picker.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";@import "./src/chart.css";@import "./src/legend.css";@import "./src/expandable-table.css";
+:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--secondary-bg:0 0% 98%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/date-range-picker.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";@import "./src/chart.css";@import "./src/legend.css";@import "./src/expandable-table.css";@import "./src/chip.css";@import "./src/segmented-toggle.css";

package/dist/css/src/chip.css

@@ -0,0 +1,54 @@
+.chip-base {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  line-height: 1;
+  text-wrap: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chip-has-icon {
+  padding-left: 0.25rem;
+}
+
+.chip-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.chip-neutral {
+  background-color: hsl(var(--secondary-bg));
+  color: hsl(var(--foreground) / 0.8);
+  border: 1.5px solid hsl(var(--muted) / 0.6);
+}
+
+.chip-primary {
+  background-color: hsl(var(--primary-muted));
+  color: hsl(var(--primary));
+  border: 1.5px solid hsl(var(--primary) / 0.2);
+}
+
+.chip-success {
+  background-color: hsl(var(--success-bg) / 0.4);
+  color: hsl(var(--success));
+  border: 1.5px solid hsl(var(--success) / 0.5);
+}
+
+.chip-warning {
+  background-color: hsl(var(--warning-bg) / 0.4);
+  color: hsl(var(--warning-200));
+  border: 1.5px solid hsl(var(--warning-200) / 0.5);
+}
+
+.chip-error {
+  background-color: hsl(var(--destructive-bg) / 0.4);
+  color: hsl(var(--destructive));
+  border: 1.5px solid hsl(var(--destructive) / 0.5);
+}

package/dist/css/src/index.css

@@ -26,6 +26,8 @@
   --muted: 0 0 80%;
   --muted-200: 0 0 67%;
 
+  --secondary-bg: 0 0% 98%;
+
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
   --radius-lg: 0.5rem;
@@ -64,3 +66,5 @@
 @import "./src/chart.css";
 @import "./src/legend.css";
 @import "./src/expandable-table.css";
+@import "./src/chip.css";
+@import "./src/segmented-toggle.css";

package/dist/css/src/message.css

@@ -32,3 +32,9 @@
   color: hsl(var(--warning));
   border: 1px solid hsl(var(--warning) / 0.3);
 }
+
+.message-success {
+  background-color: hsl(var(--success-bg) / 0.4);
+  color: hsl(var(--success));
+  border: 1px solid hsl(var(--success) / 0.3);
+}

package/dist/css/src/segmented-toggle.css

@@ -0,0 +1,89 @@
+.segmented-toggle {
+  display: flex;
+  width: fit-content;
+  border-radius: 0.3rem;
+  border: 1.5px solid hsl(var(--muted) / 0.6);
+  background-color: hsl(var(--secondary-bg));
+  transition: border-color 0.2s ease-in-out;
+  padding: 0.2rem;
+  gap: 0.125rem;
+  overflow: hidden;
+}
+
+.segmented-toggle:hover {
+  border-color: hsl(var(--primary));
+}
+
+.segmented-toggle-option {
+  padding: 0.375rem 0.5rem;
+  color: hsl(var(--muted-200));
+  background: none;
+  border: none;
+  cursor: pointer;
+  font: inherit;
+  transition: all 0.2s ease-in-out;
+  border-radius: var(--radius-sm);
+  line-height: 1;
+  text-wrap: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+}
+
+.segmented-toggle-option:hover:not(.segmented-toggle-option-disabled):not(
+    .segmented-toggle-option-selected
+  ) {
+  color: hsl(var(--foreground));
+}
+
+.segmented-toggle-option-selected {
+  background-color: hsl(var(--primary));
+  color: white;
+}
+
+.segmented-toggle-option-selected:hover:not(.segmented-toggle-option-disabled) {
+  background-color: hsl(var(--primary-200));
+}
+
+.segmented-toggle-option-content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.3rem;
+}
+
+.segmented-toggle-option-icon {
+  flex-shrink: 0;
+}
+
+/* Sizes */
+.segmented-toggle--sm .segmented-toggle-option {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+}
+
+.segmented-toggle--md .segmented-toggle-option {
+  font-size: 0.875rem;
+  padding: 0.3rem 0.75rem;
+}
+
+.segmented-toggle--lg .segmented-toggle-option {
+  font-size: 1rem;
+  padding: 0.375rem 1rem;
+}
+
+.segmented-toggle-option-disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.segmented-toggle-option-disabled:hover {
+  background-color: inherit !important;
+  color: inherit !important;
+}
+
+.segmented-toggle-option-disabled.segmented-toggle-option-selected {
+  opacity: 0.7;
+}

package/dist/css/src/side-panel.css

@@ -3,11 +3,18 @@
   inset: 0;
   background-color: rgba(0, 0, 0, 0.5);
   display: flex;
-  justify-content: flex-end;
   z-index: 50;
   animation: overlayShow 0.15s ease-out;
 }
 
+.side-panel-overlay-right {
+  justify-content: flex-end;
+}
+
+.side-panel-overlay-left {
+  justify-content: flex-start;
+}
+
 .side-panel {
   background-color: hsl(var(--background));
   width: 100%;
@@ -15,7 +22,14 @@
   height: 100vh;
   display: flex;
   flex-direction: column;
-  animation: sidePanelShow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.side-panel-right {
+  animation: sidePanelShowRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.side-panel-left {
+  animation: sidePanelShowLeft 0.3s cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .side-panel-header {
@@ -63,7 +77,7 @@
   flex: 1;
 }
 
-@keyframes sidePanelShow {
+@keyframes sidePanelShowRight {
   from {
     opacity: 0;
     transform: translateX(100%);
@@ -73,3 +87,14 @@
     transform: translateX(0);
   }
 }
+
+@keyframes sidePanelShowLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}

package/dist/css/src/textarea.css

@@ -53,9 +53,10 @@
   border: 1.5px solid hsl(var(--muted));
   background: hsl(var(--background));
   transition: border-color 0.2s, background-color 0.2s;
+  height: 100%;
 }
 
-.textarea-wrapper::after {
+.textarea-wrapper-resizable::after {
   content: "";
   position: absolute;
   right: 0;
@@ -72,7 +73,7 @@
   transition: opacity 0.2s;
 }
 
-.textarea-wrapper:hover::after {
+.textarea-wrapper-resizable:hover::after {
   opacity: 1;
 }
 
@@ -109,12 +110,16 @@
   color: hsl(var(--foreground));
   background: none;
   padding: 0.75rem 1rem;
-  resize: vertical;
+  resize: none;
   appearance: none;
   -webkit-appearance: none;
   font-family: inherit;
 }
 
+.textarea-wrapper-resizable .textarea {
+  resize: vertical;
+}
+
 .textarea::-webkit-resizer {
   display: none;
 }
@@ -169,3 +174,18 @@
 .textarea-info-icon:hover {
   color: hsl(var(--primary));
 }
+
+/* Character counter (when maxLength is set) */
+.textarea-counter {
+  position: absolute;
+  right: 0.5rem;
+  bottom: 0.5rem;
+  font-size: 0.75rem;
+  color: hsl(var(--muted-200));
+  pointer-events: none;
+  line-height: 1;
+}
+
+.textarea-wrapper-resizable .textarea-counter {
+  right: 1.75rem;
+}

package/dist/esm/components/index.d.ts

@@ -37,3 +37,5 @@ export * from "./src/date-range-picker";
 export * from "./src/legend";
 export * from "./src/chart";
 export * from "./src/expandable-table";
+export * from "./src/chip";
+export * from "./src/segmented-toggle";

package/dist/esm/components/src/checkbox.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
     label?: string;
     className?: string;
+    labelClassName?: string;
     isCard?: boolean;
     isIndeterminate?: boolean;
 }

package/dist/esm/components/src/chip.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { IconType } from "../../types";
+type ChipProps = React.HTMLAttributes<HTMLDivElement> & {
+    className?: string;
+    label: string;
+    icon?: IconType;
+    variant?: "neutral" | "primary" | "success" | "warning" | "error";
+    iconStrokeWidth?: number;
+    iconClassName?: string;
+    iconSize?: number;
+};
+export declare const Chip: ({ className, label, icon, variant, iconStrokeWidth, iconClassName, iconSize, ...props }: ChipProps) => React.JSX.Element;
+export {};

package/dist/esm/components/src/message.d.ts

@@ -1,9 +1,12 @@
 import React from "react";
-export type MessageVariant = "info" | "muted" | "error" | "warning";
+export type MessageVariant = "info" | "muted" | "error" | "warning" | "success";
 interface MessageProps {
     variant: MessageVariant;
     className?: string;
+    iconSize?: number;
+    iconStrokeWidth?: number;
+    iconClassName?: string;
     message?: string | null;
 }
-export declare const Message: ({ variant, className, message }: MessageProps) => React.JSX.Element | null;
+export declare const Message: ({ variant, className, iconSize, iconStrokeWidth, iconClassName, message, }: MessageProps) => React.JSX.Element | null;
 export {};

package/dist/esm/components/src/modal.d.ts

@@ -6,5 +6,11 @@ export interface ModalProps {
     description?: string;
     children: React.ReactNode;
     className?: string;
+    titleContainerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    closeButtonClassName?: string;
+    headerClassName?: string;
+    contentClassName?: string;
 }
-export declare const Modal: ({ isOpen, onClose, title, description, children, className, }: ModalProps) => React.ReactPortal | null;
+export declare const Modal: ({ isOpen, onClose, title, description, children, className, titleContainerClassName, titleClassName, descriptionClassName, closeButtonClassName, headerClassName, contentClassName, }: ModalProps) => React.ReactPortal | null;

package/dist/esm/components/src/segmented-toggle.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { IconType } from "../../types";
+import type { IconProps as IconPropsType } from "./icon";
+export type SegmentedToggleOption = {
+    label: string;
+    value: string;
+    icon?: IconType;
+    iconProps?: Omit<IconPropsType, "icon">;
+    labelProps?: React.HTMLAttributes<HTMLSpanElement>;
+};
+export interface SegmentedToggleProps {
+    options: SegmentedToggleOption[];
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    optionClassName?: string;
+    selected: string;
+    onChange: (value: string) => void;
+    disabled?: boolean;
+}
+export declare function SegmentedToggle({ options, size, className, optionClassName, selected, onChange, disabled, }: SegmentedToggleProps): React.JSX.Element;

package/dist/esm/components/src/side-panel.d.ts

@@ -2,9 +2,15 @@ import React from "react";
 export interface SidePanelProps {
     isOpen: boolean;
     onClose: () => void;
+    position?: "left" | "right";
     title?: string;
     description?: string;
     children: React.ReactNode;
     className?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    closeButtonClassName?: string;
+    headerClassName?: string;
+    contentClassName?: string;
 }
-export declare const SidePanel: ({ isOpen, onClose, title, description, children, className, }: SidePanelProps) => JSX.Element | null;
+export declare const SidePanel: ({ isOpen, onClose, position, title, description, children, className, titleClassName, descriptionClassName, closeButtonClassName, headerClassName, contentClassName, }: SidePanelProps) => JSX.Element | null;

package/dist/esm/components/src/textarea.d.ts

@@ -9,5 +9,7 @@ export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
     containerClassName?: string;
     tooltip?: string;
     tooltipPosition?: TooltipPosition;
+    maxLength?: number;
+    enableResize?: boolean;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/esm/css/index.css

@@ -1 +1 @@
-:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/date-range-picker.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";@import "./src/chart.css";@import "./src/legend.css";@import "./src/expandable-table.css";
+:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--secondary-bg:0 0% 98%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/date-range-picker.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";@import "./src/chart.css";@import "./src/legend.css";@import "./src/expandable-table.css";@import "./src/chip.css";@import "./src/segmented-toggle.css";