linkedunion-design-kit 1.11.3 → 1.11.5

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { default as LUIcon } from "./src/components/Icons/LUIcon";
+export type { IconName } from "./src/components/Icons/type";
 export { default as Card } from "./src/components/Card/card";
 export { default as LuImage } from "./src/components/Images/LuImage";
 export { default as Title } from "./src/components/Title/Title";
@@ -23,6 +24,7 @@ export { AppIcon } from "./src/components/AppIcons";
 export { Tabs, TabsList, TabsTrigger, TabsContent, } from "./src/components/Tabs/tabs";
 export { Select, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, SelectValue, } from "./src/components/Dropdown/select";
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./src/components/Alerts/AlertDialog";
+export { Alert, AlertAction, AlertCancel, AlertHeader, AlertTitle, AlertDescription, AlertFooter, } from "./src/components/Alerts/Alert/alert";
 export { Avatar, AvatarImage, AvatarFallback, } from "./src/components/Avatar/Avatar/Avatar";
 export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, TableButton, TableCellPadded, TableFooter, } from "./src/components/Table/Table";
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuLabel, DropdownMenuSubTrigger, DropdownMenuSub, DropdownMenuSubContent, } from "./src/components/Dropdown/DropdownMenu/DropdownMenu";
@@ -31,8 +33,7 @@ export { default as Combobox } from "./src/components/Dropdown/Combobox/Combobox
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./src/components/Pagination/pagination";
 export { Skeleton } from "./src/components/Skeleton/skeleton";
 export { Tabs as VerticalTabs, TabsContent as VerticalTabsContent, TabsList as VerticalTabsList, tabSizes as verticalTabsSize, TabsTrigger as VerticalTabsTrigger, TabsHeading as VerticalTabsHeading, } from "./src/components/VerticalTabs/VerticalTabs";
-export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, sizes, } from "./src/components/Modal/Modal";
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogSubTitle, DialogBody, DialogFooter, DialogAction, DialogClose, } from "./src/components/Modal/Modal";
 export { DatePicker } from "./src/components/DatePicker/DatePicker";
 export { DateRangePicker } from "./src/components/DateRangePicker/DateRangePicker";
 export { TimePicker } from "./src/components/TimePicker/TimePicker";
-export { Alert, AlertAction, AlertCancel, AlertHeader, AlertTitle, AlertDescription, AlertFooter, } from "./src/components/Alerts/Alert/alert";

package/dist/index.js

@@ -23,6 +23,7 @@ export { AppIcon } from "./src/components/AppIcons";
 export { Tabs, TabsList, TabsTrigger, TabsContent, } from "./src/components/Tabs/tabs";
 export { Select, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator, SelectValue, } from "./src/components/Dropdown/select";
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./src/components/Alerts/AlertDialog";
+export { Alert, AlertAction, AlertCancel, AlertHeader, AlertTitle, AlertDescription, AlertFooter, } from "./src/components/Alerts/Alert/alert";
 export { Avatar, AvatarImage, AvatarFallback, } from "./src/components/Avatar/Avatar/Avatar";
 export { Table, TableHeader, TableBody, TableRow, TableHead, TableCell, TableCaption, TableButton, TableCellPadded, TableFooter, } from "./src/components/Table/Table";
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuCheckboxItem, DropdownMenuLabel, DropdownMenuSubTrigger, DropdownMenuSub, DropdownMenuSubContent, } from "./src/components/Dropdown/DropdownMenu/DropdownMenu";
@@ -31,8 +32,7 @@ export { default as Combobox } from "./src/components/Dropdown/Combobox/Combobox
 export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, } from "./src/components/Pagination/pagination";
 export { Skeleton } from "./src/components/Skeleton/skeleton";
 export { Tabs as VerticalTabs, TabsContent as VerticalTabsContent, TabsList as VerticalTabsList, tabSizes as verticalTabsSize, TabsTrigger as VerticalTabsTrigger, TabsHeading as VerticalTabsHeading, } from "./src/components/VerticalTabs/VerticalTabs";
-export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, sizes, } from "./src/components/Modal/Modal";
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogSubTitle, DialogBody, DialogFooter, DialogAction, DialogClose, } from "./src/components/Modal/Modal";
 export { DatePicker } from "./src/components/DatePicker/DatePicker";
 export { DateRangePicker } from "./src/components/DateRangePicker/DateRangePicker";
 export { TimePicker } from "./src/components/TimePicker/TimePicker";
-export { Alert, AlertAction, AlertCancel, AlertHeader, AlertTitle, AlertDescription, AlertFooter, } from "./src/components/Alerts/Alert/alert";

package/dist/src/components/Card/contactProfile/ContactProfile.js

@@ -32,7 +32,7 @@ export var ContactProfile = function (_a) {
     };
     // Horizontal layout
     if (orientation === "horizontal") {
-        return (_jsxs("div", { className: "!p-5 bg-white rounded-xl flex ".concat(safeMediaPosition === "left" ? "sm:flex-row" : "sm:flex-row-reverse", " max-w-5xl !gap-5 items-center shadow-lg ").concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsx(CardMedia, { className: "".concat(safeMediaPosition === "right" ? "order-3" : "order-1", " w-full max-w-40 aspect-square object-cover") }), _jsxs("div", { className: "flex-1 flex flex-col !gap-1 md:!gap-2.5 text-center sm:!text-left h-full justify-center min-w-0 ".concat(safeMediaPosition === "right" ? "order-1" : "order-2"), children: [_jsx(CardContent, {}), _jsx(CardButton, {})] })] }));
+        return (_jsxs("div", { className: "!p-5 bg-white rounded-xl flex ".concat(safeMediaPosition === "left" ? "sm:flex-row" : "sm:flex-row-reverse", " max-w-5xl !gap-5 items-center shadow-lg ").concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsx(CardMedia, { className: "".concat(safeMediaPosition === "right" ? "order-3" : "order-1", " w-full max-w-40 aspect-square object-cover") }), _jsxs("div", { className: "flex-1 flex flex-col !gap-1 md:!gap-2.5 sm:!text-left h-full justify-center min-w-0 ".concat(safeMediaPosition === "right" ? "order-1" : "order-2"), children: [_jsx(CardContent, {}), _jsx(CardButton, {})] })] }));
     }
     // Vertical layout
     return (_jsxs("div", { className: "p-8 bg-white rounded-xl flex flex-col gap-6 max-w-md items-center shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsxs("div", { className: "flex w-full ".concat(safeMediaPosition === "top" ? "flex-col" : "flex-col-reverse", " items-center !gap-5 text-center"), children: [_jsx(CardMedia, { className: "w-full h-full aspect-5/4 object-cover" }), _jsx(CardContent, { className: "h-20" })] }), _jsx(CardButton, {})] }));

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

@@ -1,2 +1,2 @@
 import { DatePickerProps } from "./types";
-export declare function DatePicker({ className, variant, size, color, shape, date, onChange, placeholder, disabled, startIcon, endIcon, shadow, minDate, maxDate, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePicker({ className, variant, size, color, shape, date, onChange, placeholder, disabled, startIcon, endIcon, shadow, minDate, maxDate, triggerClassName, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/DatePicker/DatePicker.js

@@ -33,12 +33,12 @@ import { Button } from "../Button/Button/Button";
 import { Default_DatePicker_Variant, Default_DatePicker_Color, Default_DatePicker_Shape, Default_DatePicker_Size, datePickerStyles, Default_DatePicker_Shadow, } from ".";
 import { useState } from "react";
 export function DatePicker(_a) {
-    var className = _a.className, _b = _a.variant, variant = _b === void 0 ? Default_DatePicker_Variant : _b, _c = _a.size, size = _c === void 0 ? Default_DatePicker_Size : _c, _d = _a.color, color = _d === void 0 ? Default_DatePicker_Color : _d, _e = _a.shape, shape = _e === void 0 ? Default_DatePicker_Shape : _e, date = _a.date, onChange = _a.onChange, _f = _a.placeholder, placeholder = _f === void 0 ? "MM/DD/YYYY" : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, startIcon = _a.startIcon, endIcon = _a.endIcon, _h = _a.shadow, shadow = _h === void 0 ? Default_DatePicker_Shadow : _h, minDate = _a.minDate, maxDate = _a.maxDate, props = __rest(_a, ["className", "variant", "size", "color", "shape", "date", "onChange", "placeholder", "disabled", "startIcon", "endIcon", "shadow", "minDate", "maxDate"]);
+    var className = _a.className, _b = _a.variant, variant = _b === void 0 ? Default_DatePicker_Variant : _b, _c = _a.size, size = _c === void 0 ? Default_DatePicker_Size : _c, _d = _a.color, color = _d === void 0 ? Default_DatePicker_Color : _d, _e = _a.shape, shape = _e === void 0 ? Default_DatePicker_Shape : _e, date = _a.date, onChange = _a.onChange, _f = _a.placeholder, placeholder = _f === void 0 ? "MM/DD/YYYY" : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, startIcon = _a.startIcon, endIcon = _a.endIcon, _h = _a.shadow, shadow = _h === void 0 ? Default_DatePicker_Shadow : _h, minDate = _a.minDate, maxDate = _a.maxDate, triggerClassName = _a.triggerClassName, props = __rest(_a, ["className", "variant", "size", "color", "shape", "date", "onChange", "placeholder", "disabled", "startIcon", "endIcon", "shadow", "minDate", "maxDate", "triggerClassName"]);
     var _j = useState(false), open = _j[0], setOpen = _j[1];
     var iconSizeClass = getIconSize(size);
     var paddingClass = getPadding(size, !!startIcon, !!endIcon);
     var iconPosition = getIconPosition(size || Default_DatePicker_Size);
-    return (_jsxs(Popover, { open: !disabled && open, onOpenChange: disabled ? undefined : setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: "relative", children: [startIcon && (_jsx(LUIcon, { icon: startIcon, size: iconSizeClass, className: cn("absolute top-1/2 -translate-y-1/2 pointer-events-none z-10", iconPosition.left) })), _jsx(Button, { color: "light-gray", "aria-expanded": open, "data-slot": "date-picker-input", className: cn("w-full justify-between !p-0 hover:!bg-transparent active:!bg-transparent", inputVariants({ variant: variant, size: size, color: color, shape: shape }), "text-left flex items-center", !date && "text-muted-foreground", open &&
+    return (_jsxs(Popover, { open: !disabled && open, onOpenChange: disabled ? undefined : setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: cn("relative", triggerClassName), children: [startIcon && (_jsx(LUIcon, { icon: startIcon, size: iconSizeClass, className: cn("absolute top-1/2 -translate-y-1/2 pointer-events-none z-10", iconPosition.left) })), _jsx(Button, { color: "light-gray", "aria-expanded": open, "data-slot": "date-picker-input", className: cn("w-full justify-between !p-0 hover:!bg-transparent active:!bg-transparent", inputVariants({ variant: variant, size: size, color: color, shape: shape }), "text-left flex items-center", !date && "text-muted-foreground", open &&
                                 color === "default" &&
                                 "border-blue-600 ring-2 ring-blue-200", disabled && [
                                 variant === "filled" && "bg-gray-100",

package/dist/src/components/DatePicker/types.d.ts

@@ -16,4 +16,5 @@ export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     size?: keyof typeof inputVariantConfig.size;
     color?: keyof typeof inputVariantConfig.color;
     variant?: keyof typeof inputVariantConfig.variant;
+    triggerClassName?: string;
 }

package/dist/src/components/Icons/type.d.ts

@@ -3,6 +3,7 @@ import { iconSize, iconWithBgColor, IconShape } from ".";
 export type iconSize = keyof typeof iconSize;
 export type shape = keyof typeof IconShape;
 export type color = keyof typeof iconWithBgColor;
+export type IconName = keyof typeof iconList;
 export interface IconProps extends React.HTMLAttributes<HTMLOrSVGElement> {
     size?: iconSize;
     icon: keyof typeof iconList;

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

@@ -1,12 +1,6 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-export declare const sizes: {
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    full: string;
-};
+import { footerVariants, headerVariants, sizes } from ".";
 declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
 declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
@@ -15,17 +9,33 @@ declare const DialogAction: React.ForwardRefExoticComponent<DialogPrimitive.Dial
 declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
     size?: keyof typeof sizes;
+    shadow?: boolean;
+    showCloseIcon?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
+type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+    variant?: keyof typeof headerVariants;
+    size?: keyof typeof sizes;
+};
 declare const DialogHeader: {
+    ({ className, variant, size, ...props }: DialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const DialogBody: {
     ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+type DialogFooterProps = React.HTMLAttributes<HTMLDivElement> & {
+    size?: keyof typeof sizes;
+    variant?: keyof typeof footerVariants;
+};
 declare const DialogFooter: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    ({ className, size, variant, ...props }: DialogFooterProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & {
     size?: keyof typeof sizes;
 } & React.RefAttributes<HTMLHeadingElement>>;
-declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogAction, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
+declare const DialogSubTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & {
+    size?: keyof typeof sizes;
+} & React.RefAttributes<HTMLParagraphElement>>;
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogAction, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogSubTitle, };

package/dist/src/components/Modal/Modal.js

@@ -25,14 +25,8 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cn } from "../../lib/utils";
 import LUIcon from "../Icons/LUIcon";
-import { variant } from "../Typography/Heading/heading";
-export var sizes = {
-    sm: "max-w-xs",
-    md: "max-w-lg",
-    lg: "max-w-4xl",
-    xl: "max-w-6xl",
-    full: "w-full",
-};
+import { footerSizeClasses, footerVariants, headerVariants, iconSizes, sizes, subTitleSizeClasses, titleSizeClasses, } from ".";
+var ModalSizeContext = React.createContext("md");
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
@@ -44,35 +38,45 @@ var DialogOverlay = React.forwardRef(function (_a, ref) {
 });
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 var DialogContent = React.forwardRef(function (_a, ref) {
-    var className = _a.className, children = _a.children, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "children", "size"]);
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, __assign({ ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-0 border bg-background !py-4 px-6 rounded-lg shadow-lg", "transition-all duration-300 ease-in-out", "data-[state=open]:opacity-100 data-[state=open]:scale-100", "data-[state=closed]:opacity-0 data-[state=closed]:scale-95", sizes[size], className) }, props, { children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-offset-2 hover:cursor-pointer disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [_jsx(LUIcon, { icon: "xMark", size: "md" }), _jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
+    var className = _a.className, children = _a.children, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.shadow, shadow = _c === void 0 ? true : _c, _d = _a.showCloseIcon, showCloseIcon = _d === void 0 ? true : _d, props = __rest(_a, ["className", "children", "size", "shadow", "showCloseIcon"]);
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsx(ModalSizeContext.Provider, { value: size, children: _jsxs(DialogPrimitive.Content, __assign({ ref: ref, className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-0 bg-white rounded-lg transition-all duration-300 ease-in-out data-[state=open]:opacity-100 data-[state=open]:scale-100 data-[state=closed]:opacity-0 data-[state=closed]:scale-95 overflow-hidden", sizes[size], shadow ? "shadow-backdrop-shadow-xl" : "shadow-none", className) }, props, { children: [children, showCloseIcon && (_jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 z-[100] opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-offset-2 hover:cursor-pointer disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [_jsx(LUIcon, { icon: "xMark", size: iconSizes[size] }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })) })] }));
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 var DialogHeader = function (_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", __assign({ className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className) }, props)));
+    var _b;
+    var className = _a.className, _c = _a.variant, variant = _c === void 0 ? "none" : _c, size = _a.size, props = __rest(_a, ["className", "variant", "size"]);
+    var contextSize = React.useContext(ModalSizeContext);
+    var effectiveSize = (_b = size !== null && size !== void 0 ? size : contextSize) !== null && _b !== void 0 ? _b : "md";
+    return (_jsx("div", __assign({ className: cn("flex flex-col text-center sm:text-left bg-white sticky top-0 z-10", headerVariants[variant], className), "data-size": effectiveSize }, props)));
 };
 DialogHeader.displayName = "DialogHeader";
-var DialogFooter = function (_a) {
+var DialogBody = function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", __assign({ className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className) }, props)));
+    return (_jsx("div", __assign({ className: cn("py-4 px-4", className) }, props)));
 };
-DialogFooter.displayName = "DialogFooter";
-var titleSizeClasses = {
-    sm: variant["h5-600"],
-    md: variant["h5-600"],
-    lg: variant["h4-500"],
-    xl: variant["h4-500"],
-    full: variant["h4-500"],
+DialogBody.displayName = "DialogBody";
+var DialogFooter = function (_a) {
+    var _b;
+    var className = _a.className, size = _a.size, _c = _a.variant, variant = _c === void 0 ? "none" : _c, props = __rest(_a, ["className", "size", "variant"]);
+    var contextSize = React.useContext(ModalSizeContext);
+    var effectiveSize = (_b = size !== null && size !== void 0 ? size : contextSize) !== null && _b !== void 0 ? _b : "md";
+    return (_jsx("div", __assign({ className: cn("flex", footerSizeClasses[effectiveSize], footerVariants[variant], className), "data-size": effectiveSize }, props)));
 };
+DialogFooter.displayName = "DialogFooter";
 var DialogTitle = React.forwardRef(function (_a, ref) {
-    var className = _a.className, _b = _a.size, size = _b === void 0 ? "md" : _b, props = __rest(_a, ["className", "size"]);
-    return (_jsx(DialogPrimitive.Title, __assign({ ref: ref, className: cn(titleSizeClasses[size], "leading-normal tracking-tight text-gray-950", className) }, props)));
+    var _b;
+    var className = _a.className, size = _a.size, children = _a.children, props = __rest(_a, ["className", "size", "children"]);
+    var contextSize = React.useContext(ModalSizeContext);
+    var effectiveSize = (_b = size !== null && size !== void 0 ? size : contextSize) !== null && _b !== void 0 ? _b : "md";
+    return (_jsx(DialogPrimitive.Title, __assign({ ref: ref, className: cn("leading-normal text-gray-950", titleSizeClasses[effectiveSize], className), "data-size": effectiveSize }, props, { children: children })));
 });
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(DialogPrimitive.Description, __assign({ ref: ref, className: cn("text-sm text-muted-foreground", className) }, props)));
+var DialogSubTitle = React.forwardRef(function (_a, ref) {
+    var _b;
+    var className = _a.className, size = _a.size, props = __rest(_a, ["className", "size"]);
+    var contextSize = React.useContext(ModalSizeContext);
+    var effectiveSize = (_b = size !== null && size !== void 0 ? size : contextSize) !== null && _b !== void 0 ? _b : "md";
+    return (_jsx(DialogPrimitive.Description, __assign({ ref: ref, className: cn(subTitleSizeClasses[effectiveSize], "text-gray-950", className), "data-size": effectiveSize }, props)));
 });
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogAction, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };
+DialogSubTitle.displayName = DialogPrimitive.Description.displayName;
+export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogAction, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogSubTitle, };

package/dist/src/components/Modal/Modal.stories.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import { sizes } from "./Modal";
 declare const _default: {
     title: string;
     component: React.FC<import("@radix-ui/react-dialog").DialogProps>;
@@ -20,13 +19,89 @@ declare const _default: {
                 };
             };
         };
+        headerVariants: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        footerVariants: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        shadow: {
+            control: {
+                type: string;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
+        showCloseIcon: {
+            control: {
+                type: string;
+            };
+            description: string;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: boolean;
+                };
+            };
+        };
     };
 };
 export default _default;
-export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<import("@radix-ui/react-dialog").DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    size?: keyof typeof sizes;
-} & React.RefAttributes<HTMLDivElement>>;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, any>;
 export declare const SimpleModal: () => import("react/jsx-runtime").JSX.Element;
 export declare const ModalSizes: () => import("react/jsx-runtime").JSX.Element;
+export declare const HeaderVariants: () => import("react/jsx-runtime").JSX.Element;
+export declare const FooterVariants: () => import("react/jsx-runtime").JSX.Element;
+export declare const FooterButtonsLeftPosition: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const FooterButtonsRightPosition: () => import("react/jsx-runtime").JSX.Element;
+export declare const FooterButtonsMiddlePosition: () => import("react/jsx-runtime").JSX.Element;
+export declare const ShadowVariations: () => import("react/jsx-runtime").JSX.Element;
 export declare const InformationModalWithoutFooter: () => import("react/jsx-runtime").JSX.Element;
 export declare const ModalWithActionButtons: () => import("react/jsx-runtime").JSX.Element;
+export declare const OutlineModal: () => import("react/jsx-runtime").JSX.Element;
+export declare const FullWidthButtonsModal: () => import("react/jsx-runtime").JSX.Element;
+export declare const BlockButtonModal: () => import("react/jsx-runtime").JSX.Element;
+export declare const NoCloseIconModal: () => import("react/jsx-runtime").JSX.Element;
+export declare const ModalWithoutHeader: () => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Modal/Modal.stories.js

@@ -9,14 +9,26 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, DialogAction, sizes, } from "./Modal";
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogSubTitle, DialogBody, DialogFooter, DialogClose, DialogAction, } from "./Modal";
 import { Button } from "../Button/Button/Button";
 import { Body } from "../Typography/Body/body";
 import { Heading } from "../Typography/Heading/heading";
 import LUIcon from "../Icons/LUIcon";
 import { Avatar, AvatarFallback, AvatarImage } from "../Avatar/Avatar/Avatar";
 import { Dummy_Para } from "../../utils/constants";
+import { footerVariants, headerVariants, sizes } from ".";
 export default {
     title: "Components/Modal",
     component: Dialog,
@@ -31,14 +43,73 @@ export default {
                 defaultValue: { summary: "md" },
             },
         },
+        headerVariants: {
+            control: { type: "select" },
+            options: Object.keys(headerVariants),
+            description: "Defines the variant style of the modal header.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "none" },
+            },
+        },
+        footerVariants: {
+            control: { type: "select" },
+            options: Object.keys(footerVariants),
+            description: "Defines the variant style of the modal footer.",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "none" },
+            },
+        },
+        shadow: {
+            control: { type: "boolean" },
+            description: "Enable or disable modal shadow.",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: true },
+            },
+        },
+        showCloseIcon: {
+            control: { type: "boolean" },
+            description: "Show or hide the close icon in the modal.",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: true },
+            },
+        },
     },
 };
-var Template = function (args) { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Modal" }) }), _jsxs(DialogContent, __assign({}, args, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Modal Title" }), _jsx(DialogDescription, { children: "This is a modal rendered using the Template story." })] }), _jsx("div", { children: "You can put any content here." }), _jsx(DialogFooter, { children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] }))] })); };
+var Template = function (args) {
+    var headerVariantProp = args.headerVariants, footerVariantProp = args.footerVariants, shadow = args.shadow, contentProps = __rest(args, ["headerVariants", "footerVariants", "shadow"]);
+    return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Modal" }) }), _jsxs(DialogContent, __assign({}, contentProps, { shadow: shadow, children: [_jsxs(DialogHeader, { variant: headerVariantProp, children: [_jsx(DialogTitle, { children: "Modal Title" }), _jsx(DialogSubTitle, { children: "Subtitle" })] }), _jsx(DialogBody, { children: "You can put any content here." }), _jsx(DialogFooter, { variant: footerVariantProp, children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] }))] }));
+};
 export var Default = Template.bind({});
 Default.args = {
     size: "md",
+    headerVariants: "none",
+    footerVariants: "none",
+    shadow: true,
+    showCloseIcon: true,
+};
+export var SimpleModal = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Modal" }) }), _jsxs(DialogContent, { size: "sm", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Simple Modal" }), _jsx(DialogSubTitle, { children: "Subtitle" })] }), _jsx(DialogBody, { children: "You can put any content here." }), _jsx(DialogFooter, { children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] })); };
+export var ModalSizes = function () { return (_jsx("div", { className: "flex flex-row gap-4", children: Object.keys(sizes).map(function (size) { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs(Button, { children: ["Open ", size, " Modal"] }) }), _jsxs(DialogContent, { size: size, children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { children: [size, " Modal"] }), _jsxs(DialogSubTitle, { children: ["This is a ", size, " modal example using the Modal component."] })] }), _jsx(DialogBody, { children: "You can put any content here." }), _jsx(DialogFooter, { children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] }, size)); }) })); };
+export var HeaderVariants = function () { return (_jsx("div", { className: "flex flex-row gap-4", children: Object.keys(headerVariants).map(function (variant) { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs(Button, { children: ["Open ", variant, " Header"] }) }), _jsxs(DialogContent, { size: "md", children: [_jsxs(DialogHeader, { variant: variant, children: [_jsxs(DialogTitle, { children: [variant, " Header"] }), _jsxs(DialogSubTitle, { children: ["This modal uses the \"", variant, "\" header variant."] })] }), _jsx(DialogBody, { children: _jsxs(Body, { variant: "body-md", children: ["This demonstrates the ", variant, " header style."] }) }), _jsx(DialogFooter, { children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] }, variant)); }) })); };
+export var FooterVariants = function () { return (_jsx("div", { className: "flex flex-row gap-4", children: Object.keys(footerVariants).map(function (variant) { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs(Button, { children: ["Open ", variant, " Footer"] }) }), _jsxs(DialogContent, { size: "md", children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { children: [variant, " Footer"] }), _jsxs(DialogSubTitle, { children: ["This modal uses the \"", variant, "\" footer variant."] })] }), _jsx(DialogBody, { children: _jsxs(Body, { variant: "body-md", children: ["This demonstrates the ", variant, " footer style."] }) }), _jsx(DialogFooter, { variant: variant, children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] }, variant)); }) })); };
+export var FooterButtonsLeftPosition = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Modal" }) }), _jsxs(DialogContent, { size: "md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Confirm Action" }), _jsx(DialogSubTitle, { children: "SubTitle" })] }), _jsx(DialogBody, { children: _jsx(Body, { variant: "body-md", children: Dummy_Para }) }), _jsxs(DialogFooter, { className: "gap-2", children: [_jsx(Button, { onClick: function () { return alert("Action confirmed!"); }, children: "Confirm" }), _jsx(Button, { variant: "outline", onClick: function () { return alert("Action cancelled!"); }, children: "Cancel" }), _jsx(Button, { className: "ms-auto", children: "Help" })] })] })] })); };
+FooterButtonsLeftPosition.parameters = {
+    docs: {
+        description: {
+            story: "On lg, footer buttons will be lg; on md, footer buttons will be md; and so on. The button size matches the modal size.",
+        },
+    },
 };
-export var SimpleModal = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Modal" }) }), _jsxs(DialogContent, { size: "sm", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Simple Modal" }), _jsx(DialogDescription, { children: "This is a simple modal example using the Modal component." })] }), _jsx("div", { className: "py-4", children: "You can put any content here." }), _jsx(DialogFooter, { children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] })); };
-export var ModalSizes = function () { return (_jsx("div", { className: "flex flex-row gap-4", children: Object.keys(sizes).map(function (size) { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsxs(Button, { children: ["Open ", size, " Modal"] }) }), _jsxs(DialogContent, { size: size, children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { children: [size, " Modal"] }), _jsxs(DialogDescription, { children: ["This is a ", size, " modal example using the Modal component."] })] }), _jsx("div", { className: "py-4", children: "You can put any content here." }), _jsx(DialogFooter, { children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] }, size)); }) })); };
-export var InformationModalWithoutFooter = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Info Modal" }) }), _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { size: "lg", className: "text-center", children: "Contact Profile" }) }), _jsxs("div", { className: "flex flex-col items-center justify-center gap-7", children: [_jsxs(Avatar, { size: "huge", children: [_jsx(AvatarImage, { alt: "Avatar", src: "/images/avatar.png" }), _jsx(AvatarFallback, { children: "AB" })] }), _jsxs("div", { className: "flex flex-col items-center", children: [_jsx(Body, { variant: "body-md", children: "Designation" }), _jsx(Heading, { variant: "heading-md", children: "Heading" })] }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx(LUIcon, { icon: "envelope", size: "lg" }), _jsx(Body, { variant: "body-md", className: "text-gray-600 truncate min-w-0", children: "testing@gmail.com" })] }), _jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx(LUIcon, { icon: "phone", size: "lg" }), _jsx(Body, { variant: "body-md", className: "text-gray-600 truncate min-w-0", children: "03764734829" })] })] }), _jsx(Body, { variant: "body-md", children: Dummy_Para })] })] })] })); };
-export var ModalWithActionButtons = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Modal" }) }), _jsxs(DialogContent, { size: "md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Confirm Action" }), _jsx(DialogDescription, { children: "Are you sure you want to proceed with this action? This cannot be undone." })] }), _jsx("div", { className: "py-4", children: _jsx(Body, { variant: "body-md", children: Dummy_Para }) }), _jsxs(DialogFooter, { children: [_jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Cancel" }) }), _jsx(DialogAction, { asChild: true, children: _jsx(Button, { variant: "fill", onClick: function () { return alert("Action confirmed!"); }, children: "Confirm" }) })] })] })] })); };
+export var FooterButtonsRightPosition = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Modal" }) }), _jsxs(DialogContent, { size: "md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Confirm Action" }), _jsx(DialogSubTitle, { children: "SubTitle" })] }), _jsx(DialogBody, { children: _jsx(Body, { variant: "body-md", children: Dummy_Para }) }), _jsxs(DialogFooter, { children: [_jsx(Button, { children: "Help" }), _jsx(Button, { onClick: function () { return alert("Action confirmed!"); }, className: "ms-auto mr-2", children: "Confirm" }), _jsx(Button, { variant: "outline", onClick: function () { return alert("Action cancelled!"); }, children: "Cancel" })] })] })] })); };
+export var FooterButtonsMiddlePosition = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Modal" }) }), _jsxs(DialogContent, { size: "md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Confirm Action" }), _jsx(DialogSubTitle, { children: "SubTitle" })] }), _jsx(DialogBody, { children: _jsx(Body, { variant: "body-md", children: Dummy_Para }) }), _jsxs(DialogFooter, { className: "flex-row justify-center items-center gap-2", children: [_jsx(Button, { onClick: function () { return alert("Action confirmed!"); }, children: "Confirm" }), _jsx(Button, { variant: "outline", onClick: function () { return alert("Action cancelled!"); }, children: "Cancel" })] })] })] })); };
+export var ShadowVariations = function () { return (_jsxs("div", { className: "flex flex-row gap-4", children: [_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Shadow" }) }), _jsxs(DialogContent, { size: "md", shadow: true, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Shadow True" }), _jsx(DialogSubTitle, { children: "This modal uses the custom shadow." })] }), _jsx(DialogBody, { children: _jsx(Body, { variant: "body-md", children: "This demonstrates the shadow style." }) }), _jsx(DialogFooter, { children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] }), _jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open No Shadow" }) }), _jsxs(DialogContent, { size: "md", shadow: false, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Shadow False" }), _jsx(DialogSubTitle, { children: "This modal has no shadow." })] }), _jsx(DialogBody, { children: _jsx(Body, { variant: "body-md", children: "This demonstrates the no shadow style." }) }), _jsx(DialogFooter, { children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] })] })); };
+export var InformationModalWithoutFooter = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Info Modal" }) }), _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { size: "lg", className: "text-center", children: "Contact Profile" }) }), _jsxs(DialogBody, { className: "flex flex-col items-center justify-center gap-7", children: [_jsxs(Avatar, { size: "huge", children: [_jsx(AvatarImage, { alt: "Avatar", src: "/images/avatar.png" }), _jsx(AvatarFallback, { children: "AB" })] }), _jsxs("div", { className: "flex flex-col items-center", children: [_jsx(Body, { variant: "body-md", children: "Designation" }), _jsx(Heading, { variant: "heading-md", children: "Heading" })] }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx(LUIcon, { icon: "envelope", size: "lg" }), _jsx(Body, { variant: "body-md", className: "text-gray-600 truncate min-w-0", children: "testing@gmail.com" })] }), _jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx(LUIcon, { icon: "phone", size: "lg" }), _jsx(Body, { variant: "body-md", className: "text-gray-600 truncate min-w-0", children: "03764734829" })] })] }), _jsx(Body, { variant: "body-md", children: Dummy_Para })] })] })] })); };
+export var ModalWithActionButtons = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Modal" }) }), _jsxs(DialogContent, { size: "md", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Confirm Action" }), _jsx(DialogSubTitle, { children: "Are you sure you want to proceed with this action? This cannot be undone." })] }), _jsx(DialogBody, { children: _jsx(Body, { variant: "body-md", children: Dummy_Para }) }), _jsxs(DialogFooter, { children: [_jsx(DialogAction, { asChild: true, children: _jsx(Button, { variant: "fill", className: "mr-2", onClick: function () { return alert("Action confirmed!"); }, children: "Confirm" }) }), _jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Cancel" }) })] })] })] })); };
+export var OutlineModal = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Outline Modal" }) }), _jsxs(DialogContent, { size: "md", children: [_jsxs(DialogHeader, { variant: "outline", children: [_jsx(DialogTitle, { children: "Outline Modal" }), _jsx(DialogSubTitle, { children: "This modal uses the \"outline\" header variant." })] }), _jsx(DialogBody, { children: _jsx(Body, { variant: "body-md", children: Dummy_Para }) }), _jsx(DialogFooter, { variant: "outline", children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] })); };
+export var FullWidthButtonsModal = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Full Width Modal" }) }), _jsxs(DialogContent, { size: "lg", children: [_jsxs(DialogHeader, { variant: "outline", children: [_jsx(DialogTitle, { children: "Outline Modal" }), _jsx(DialogSubTitle, { children: "This modal uses the \"outline\" shadow variant." })] }), _jsx(DialogBody, { children: _jsx(Body, { variant: "body-md", children: Dummy_Para }) }), _jsxs(DialogFooter, { variant: "outline", children: [_jsx(DialogAction, { asChild: true, children: _jsx(Button, { variant: "fill", size: "lg", className: "w-1/2 mr-2", onClick: function () { return alert("Action confirmed!"); }, children: "Confirm" }) }), _jsx(DialogClose, { asChild: true, children: _jsx(Button, { variant: "outline", size: "lg", className: "w-1/2", onClick: function () { return alert("Action cancelled!"); }, children: "Close" }) })] })] })] })); };
+export var BlockButtonModal = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Block Modal" }) }), _jsxs(DialogContent, { size: "lg", children: [_jsxs(DialogHeader, { variant: "outline", children: [_jsx(DialogTitle, { children: "Outline Modal" }), _jsx(DialogSubTitle, { children: "This modal uses the \"outline\" shadow variant." })] }), _jsx(DialogBody, { children: _jsx(Body, { variant: "body-md", children: Dummy_Para }) }), _jsx(DialogFooter, { variant: "outline", children: _jsx(DialogAction, { asChild: true, children: _jsx(Button, { variant: "fill", size: "lg", className: "w-full", onClick: function () { return alert("Action confirmed!"); }, children: "Confirm" }) }) })] })] })); };
+export var NoCloseIconModal = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Modal Without Close Icon" }) }), _jsxs(DialogContent, { size: "md", showCloseIcon: false, children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "No Close Icon" }), _jsx(DialogSubTitle, { children: "This modal does not show the close icon." })] }), _jsx(DialogBody, { children: "You can put any content here. Use the footer button to close." }), _jsx(DialogFooter, { children: _jsx(DialogClose, { asChild: true, children: _jsx(Button, { children: "Close" }) }) })] })] })); };
+export var ModalWithoutHeader = function () { return (_jsxs(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { children: "Open Info Modal" }) }), _jsxs(DialogContent, { size: "lg", children: [_jsx(DialogHeader, { className: "min-h-[3rem]", variant: "outline" }), _jsxs(DialogBody, { className: "flex flex-col items-center justify-center gap-7", children: [_jsxs(Avatar, { size: "huge", children: [_jsx(AvatarImage, { alt: "Avatar", src: "/images/avatar.png" }), _jsx(AvatarFallback, { children: "AB" })] }), _jsxs("div", { className: "flex flex-col items-center", children: [_jsx(Body, { variant: "body-md", children: "Designation" }), _jsx(Heading, { variant: "heading-md", children: "Heading" })] }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx(LUIcon, { icon: "envelope", size: "lg" }), _jsx(Body, { variant: "body-md", className: "text-gray-600 truncate min-w-0", children: "testing@gmail.com" })] }), _jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx(LUIcon, { icon: "phone", size: "lg" }), _jsx(Body, { variant: "body-md", className: "text-gray-600 truncate min-w-0", children: "03764734829" })] })] }), _jsx(Body, { variant: "body-md", children: Dummy_Para })] })] })] })); };

package/dist/src/components/Modal/index.d.ts

@@ -0,0 +1,45 @@
+export declare const sizes: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+};
+export declare const iconSizes: {
+    readonly sm: "sm";
+    readonly md: "md";
+    readonly lg: "lg";
+    readonly xl: "lg";
+    readonly full: "lg";
+};
+export declare const headerVariants: {
+    fill: string;
+    outline: string;
+    none: string;
+};
+export declare const footerVariants: {
+    fill: string;
+    outline: string;
+    none: string;
+};
+export declare const footerSizeClasses: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+};
+export declare const titleSizeClasses: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+};
+export declare const subTitleSizeClasses: {
+    readonly sm: `!pt-0 !px-4 !pb-3 ${string}`;
+    readonly md: `!pt-0 !px-4 !pb-3 ${string}`;
+    readonly lg: `!pt-0 !px-4 !pb-4 ${string}`;
+    readonly xl: `!pt-0 !px-4 !pb-4 ${string}`;
+    readonly full: `!pt-0 !px-4 !pb-4 ${string}`;
+};

package/dist/src/components/Modal/index.js

@@ -0,0 +1,47 @@
+import { variant } from "../Typography/Heading/heading";
+import { variant as bodyVariant } from "../Typography/Body/body";
+export var sizes = {
+    sm: "max-w-[min(20rem,calc(100%-2rem))]",
+    md: "max-w-[min(32rem,calc(100%-2rem))]",
+    lg: "max-w-[min(56rem,calc(100%-2rem))]",
+    xl: "max-w-[min(72rem,calc(100%-2rem))]",
+    full: "max-w-[calc(100%-2rem)]",
+};
+export var iconSizes = {
+    sm: "sm",
+    md: "md",
+    lg: "lg",
+    xl: "lg",
+    full: "lg",
+};
+export var headerVariants = {
+    fill: "bg-gray-50",
+    outline: "border-b border-gray-200",
+    none: "",
+};
+export var footerVariants = {
+    fill: "bg-gray-50",
+    outline: "border-t border-gray-200",
+    none: "",
+};
+export var footerSizeClasses = {
+    sm: "!px-4 !py-3",
+    md: "!px-4 !py-3",
+    lg: "!px-4 !py-4",
+    xl: "!px-4 !py-4",
+    full: "!px-4 !py-4",
+};
+export var titleSizeClasses = {
+    sm: "!pt-3 !px-4 !pb-0 ".concat(variant["h5-600"]),
+    md: "!pt-3 !px-4 !pb-0 ".concat(variant["h5-600"]),
+    lg: "!pt-4 !px-4 !pb-0 ".concat(variant["h4-600"]),
+    xl: "!pt-4 !px-4 !pb-0 ".concat(variant["h4-600"]),
+    full: "!pt-4 !px-4 !pb-0 ".concat(variant["h4-600"]),
+};
+export var subTitleSizeClasses = {
+    sm: "!pt-0 !px-4 !pb-3 ".concat(bodyVariant["body-sm"]),
+    md: "!pt-0 !px-4 !pb-3 ".concat(bodyVariant["body-md"]),
+    lg: "!pt-0 !px-4 !pb-4 ".concat(bodyVariant["body-lg"]),
+    xl: "!pt-0 !px-4 !pb-4 ".concat(bodyVariant["body-lg"]),
+    full: "!pt-0 !px-4 !pb-4 ".concat(bodyVariant["body-lg"]),
+};

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

@@ -1,2 +1,2 @@
 import { TimePickerProps } from "./types";
-export declare function TimePicker({ className, variant, size, color, shape, time, onChange, placeholder, disabled, startIcon, endIcon, shadow, ...props }: TimePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimePicker({ className, variant, size, color, shape, time, onChange, placeholder, disabled, startIcon, endIcon, shadow, triggerClassName, ...props }: TimePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/TimePicker/TimePicker.js

@@ -84,7 +84,7 @@ function TimePickerMenu(_a) {
     return (_jsxs("div", { className: "grid grid-cols-[124px_124px_124px]", children: [_jsx(MenuItem, { label: "Hour", data: hours, onClick: function (item) { return setHour(hour === item ? null : item); }, activeItem: hour, size: size }), _jsx(MenuItem, { label: "Minutes", data: minutes, onClick: function (item) { return setMinute(minute === item ? null : item); }, activeItem: minute, padZero: true, size: size }), _jsxs("div", { className: "flex flex-col", children: [_jsx(MenuItemLabel, { label: "AM/PM" }), _jsxs("div", { className: "space-y-1 h-full content-center -mt-6", children: [_jsx(PeriodButton, { onClick: function () { return setPeriod(period === "AM" ? null : "AM"); }, periodLabel: "AM", activePeriod: period, size: size }), _jsx(PeriodButton, { onClick: function () { return setPeriod(period === "PM" ? null : "PM"); }, periodLabel: "PM", activePeriod: period, size: size })] })] })] }));
 }
 export function TimePicker(_a) {
-    var className = _a.className, _b = _a.variant, variant = _b === void 0 ? Default_TimePicker_Variant : _b, _c = _a.size, size = _c === void 0 ? Default_TimePicker_Size : _c, _d = _a.color, color = _d === void 0 ? Default_TimePicker_Color : _d, _e = _a.shape, shape = _e === void 0 ? Default_TimePicker_Shape : _e, time = _a.time, onChange = _a.onChange, _f = _a.placeholder, placeholder = _f === void 0 ? "Select time" : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, startIcon = _a.startIcon, endIcon = _a.endIcon, _h = _a.shadow, shadow = _h === void 0 ? Default_TimePicker_Shadow : _h, props = __rest(_a, ["className", "variant", "size", "color", "shape", "time", "onChange", "placeholder", "disabled", "startIcon", "endIcon", "shadow"]);
+    var className = _a.className, _b = _a.variant, variant = _b === void 0 ? Default_TimePicker_Variant : _b, _c = _a.size, size = _c === void 0 ? Default_TimePicker_Size : _c, _d = _a.color, color = _d === void 0 ? Default_TimePicker_Color : _d, _e = _a.shape, shape = _e === void 0 ? Default_TimePicker_Shape : _e, time = _a.time, onChange = _a.onChange, _f = _a.placeholder, placeholder = _f === void 0 ? "Select time" : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, startIcon = _a.startIcon, endIcon = _a.endIcon, _h = _a.shadow, shadow = _h === void 0 ? Default_TimePicker_Shadow : _h, triggerClassName = _a.triggerClassName, props = __rest(_a, ["className", "variant", "size", "color", "shape", "time", "onChange", "placeholder", "disabled", "startIcon", "endIcon", "shadow", "triggerClassName"]);
     var _j = useState(false), open = _j[0], setOpen = _j[1];
     var iconSizeClass = getIconSize(size);
     var paddingClass = getPadding(size, !!startIcon, !!endIcon);
@@ -98,7 +98,7 @@ export function TimePicker(_a) {
         var displayHour = h % 12 || 12;
         return "".concat(displayHour, ":").concat(minutes, " ").concat(period);
     };
-    return (_jsxs(Popover, { open: !disabled && open, onOpenChange: disabled ? undefined : setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: "relative", children: [startIcon && (_jsx(LUIcon, { icon: startIcon, size: iconSizeClass, className: cn("absolute top-1/2 -translate-y-1/2 pointer-events-none z-10", iconPosition.left) })), _jsx(Button, { color: "light-gray", "aria-expanded": open, "data-slot": "time-picker-input", className: cn("w-full justify-between !p-0 hover:!bg-transparent active:!bg-transparent", inputVariants({ variant: variant, size: size, color: color, shape: shape }), "text-left flex items-center", !time && "text-muted-foreground", open &&
+    return (_jsxs(Popover, { open: !disabled && open, onOpenChange: disabled ? undefined : setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("div", { className: cn("relative", triggerClassName), children: [startIcon && (_jsx(LUIcon, { icon: startIcon, size: iconSizeClass, className: cn("absolute top-1/2 -translate-y-1/2 pointer-events-none z-10", iconPosition.left) })), _jsx(Button, { color: "light-gray", "aria-expanded": open, "data-slot": "time-picker-input", className: cn("w-full justify-between !p-0 hover:!bg-transparent active:!bg-transparent", inputVariants({ variant: variant, size: size, color: color, shape: shape }), "text-left flex items-center", !time && "text-muted-foreground", open &&
                                 color === "default" &&
                                 "border-blue-600 ring-2 ring-blue-200", disabled && [
                                 variant === "filled" && "bg-gray-100",

package/dist/src/components/TimePicker/types.d.ts

@@ -11,5 +11,6 @@ export interface TimePickerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     endIcon?: keyof typeof iconList;
     shape?: keyof typeof inputVariantConfig.shape;
     shadow?: keyof typeof timePickerMenuStyles.shadow;
+    triggerClassName?: string;
 }
 export type TimePeriod = "AM" | "PM" | null;

package/dist/src/utils/iconList.d.ts

@@ -170,4 +170,5 @@ export declare const iconList: {
     "ellipsis-vertical": string;
     exclamation: string;
     "fax-no": string;
+    briefcase: string;
 };

package/dist/src/utils/iconList.js

@@ -170,4 +170,5 @@ export var iconList = {
     "ellipsis-vertical": "M16.0005 8C13.7933 8 12.0005 6.20714 12.0005 4C12.0005 1.79286 13.7933 0 16.0005 0C18.2076 0 20.0005 1.79286 20.0005 4C20.0005 6.20714 18.2076 8 16.0005 8ZM16.0005 24C18.2076 24 20.0005 25.7929 20.0005 28C20.0005 30.2071 18.2076 32 16.0005 32C13.7933 32 12.0005 30.2071 12.0005 28C12.0005 25.7929 13.7933 24 16.0005 24ZM20.0005 16C20.0005 18.2071 18.2076 20 16.0005 20C13.7933 20 12.0005 18.2071 12.0005 16C12.0005 13.7929 13.7933 12 16.0005 12C18.2076 12 20.0005 13.7929 20.0005 16Z",
     exclamation: "M18 2C18 0.89375 17.1063 0 16 0C14.8937 0 14 0.89375 14 2V22C14 23.1063 14.8937 24 16 24C17.1063 24 18 23.1063 18 22V2ZM16 32C17.3812 32 18.5 30.8813 18.5 29.5C18.5 28.1187 17.3812 27 16 27C14.6187 27 13.5 28.1187 13.5 29.5C13.5 30.8813 14.6187 32 16 32Z",
     "fax-no": "M10 5V10H14V5H23.1688L26 7.83125V10H30V7.83125C30 6.76875 29.5812 5.75 28.8312 5L26 2.16875C25.25 1.41875 24.2313 1 23.1688 1H14C11.7938 1 10 2.79375 10 5ZM2 9C0.89375 9 0 9.89375 0 11V29C0 30.1063 0.89375 31 2 31H5C6.10625 31 7 30.1063 7 29V11C7 9.89375 6.10625 9 5 9H2ZM30 13H10V29C10 30.1063 10.8937 31 12 31H30C31.1063 31 32 30.1063 32 29V15C32 13.8937 31.1063 13 30 13ZM14 19C14 18.1687 14.6687 17.5 15.5 17.5C16.3313 17.5 17 18.1687 17 19C17 19.8313 16.3313 20.5 15.5 20.5C14.6687 20.5 14 19.8313 14 19ZM14 25C14 24.1687 14.6687 23.5 15.5 23.5C16.3313 23.5 17 24.1687 17 25C17 25.8313 16.3313 26.5 15.5 26.5C14.6687 26.5 14 25.8313 14 25ZM21 17.5C21.8313 17.5 22.5 18.1687 22.5 19C22.5 19.8313 21.8313 20.5 21 20.5C20.1687 20.5 19.5 19.8313 19.5 19C19.5 18.1687 20.1687 17.5 21 17.5ZM19.5 25C19.5 24.1687 20.1687 23.5 21 23.5C21.8313 23.5 22.5 24.1687 22.5 25C22.5 25.8313 21.8313 26.5 21 26.5C20.1687 26.5 19.5 25.8313 19.5 25ZM26.5 17.5C27.3313 17.5 28 18.1687 28 19C28 19.8313 27.3313 20.5 26.5 20.5C25.6687 20.5 25 19.8313 25 19C25 18.1687 25.6687 17.5 26.5 17.5ZM25 25C25 24.1687 25.6687 23.5 26.5 23.5C27.3313 23.5 28 24.1687 28 25C28 25.8313 27.3313 26.5 26.5 26.5C25.6687 26.5 25 25.8313 25 25Z",
+    briefcase: "M12.5 4H19.5C19.775 4 20 4.225 20 4.5V7H12V4.5C12 4.225 12.225 4 12.5 4ZM9 4.5V7H4C1.79375 7 0 8.79375 0 11V17H32V11C32 8.79375 30.2062 7 28 7H23V4.5C23 2.56875 21.4312 1 19.5 1H12.5C10.5688 1 9 2.56875 9 4.5ZM32 20H20V21C20 22.1063 19.1063 23 18 23H14C12.8938 23 12 22.1063 12 21V20H0V27C0 29.2062 1.79375 31 4 31H28C30.2062 31 32 29.2062 32 27V20Z",
 };

package/dist/styles/global.css

@@ -13,9 +13,7 @@
     --container-md: 28rem;
     --container-lg: 32rem;
     --container-2xl: 42rem;
-    --container-4xl: 56rem;
     --container-5xl: 64rem;
-    --container-6xl: 72rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -46,7 +44,6 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
-    --tracking-tight: -0.025em;
     --tracking-widest: 0.1em;
     --leading-normal: 1.5;
     --radius-xs: 0.125rem;
@@ -244,6 +241,9 @@
   .relative {
     position: relative;
   }
+  .sticky {
+    position: sticky;
+  }
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
@@ -325,6 +325,9 @@
   .z-50 {
     z-index: 50;
   }
+  .z-\[100\] {
+    z-index: 100;
+  }
   .z-\[1000\] {
     z-index: 1000;
   }
@@ -757,6 +760,9 @@
   .min-h-40 {
     min-height: calc(var(--spacing) * 40);
   }
+  .min-h-\[3rem\] {
+    min-height: 3rem;
+  }
   .min-h-\[42px\] {
     min-height: 42px;
   }
@@ -883,15 +889,9 @@
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
-  .max-w-4xl {
-    max-width: var(--container-4xl);
-  }
   .max-w-5xl {
     max-width: var(--container-5xl);
   }
-  .max-w-6xl {
-    max-width: var(--container-6xl);
-  }
   .max-w-40 {
     max-width: calc(var(--spacing) * 40);
   }
@@ -907,21 +907,27 @@
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
+  .max-w-\[min\(20rem\,calc\(100\%-2rem\)\)\] {
+    max-width: min(20rem, calc(100% - 2rem));
+  }
+  .max-w-\[min\(32rem\,calc\(100\%-2rem\)\)\] {
+    max-width: min(32rem, calc(100% - 2rem));
+  }
+  .max-w-\[min\(56rem\,calc\(100\%-2rem\)\)\] {
+    max-width: min(56rem, calc(100% - 2rem));
+  }
+  .max-w-\[min\(72rem\,calc\(100\%-2rem\)\)\] {
+    max-width: min(72rem, calc(100% - 2rem));
+  }
   .max-w-fit {
     max-width: fit-content;
   }
-  .max-w-lg {
-    max-width: var(--container-lg);
-  }
   .max-w-md {
     max-width: var(--container-md);
   }
   .max-w-sm {
     max-width: var(--container-sm);
   }
-  .max-w-xs {
-    max-width: var(--container-xs);
-  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -1152,13 +1158,6 @@
       margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .space-y-1\.5 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1820,9 +1819,6 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
-  .px-6 {
-    padding-inline: calc(var(--spacing) * 6);
-  }
   .px-9 {
     padding-inline: calc(var(--spacing) * 9);
   }
@@ -1883,6 +1879,15 @@
   .\!ps-12 {
     padding-inline-start: calc(var(--spacing) * 12) !important;
   }
+  .\!pt-0 {
+    padding-top: calc(var(--spacing) * 0) !important;
+  }
+  .\!pt-3 {
+    padding-top: calc(var(--spacing) * 3) !important;
+  }
+  .\!pt-4 {
+    padding-top: calc(var(--spacing) * 4) !important;
+  }
   .pr-2 {
     padding-right: calc(var(--spacing) * 2);
   }
@@ -1901,6 +1906,15 @@
   .pr-11 {
     padding-right: calc(var(--spacing) * 11);
   }
+  .\!pb-0 {
+    padding-bottom: calc(var(--spacing) * 0) !important;
+  }
+  .\!pb-3 {
+    padding-bottom: calc(var(--spacing) * 3) !important;
+  }
+  .\!pb-4 {
+    padding-bottom: calc(var(--spacing) * 4) !important;
+  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
@@ -2060,10 +2074,6 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
-  .tracking-tight {
-    --tw-tracking: var(--tracking-tight);
-    letter-spacing: var(--tracking-tight);
-  }
   .tracking-widest {
     --tw-tracking: var(--tracking-widest);
     letter-spacing: var(--tracking-widest);
@@ -2352,6 +2362,10 @@
     --tw-shadow: 0px 0px 15px -3px var(--tw-shadow-color, #0F0F0F1A), 0px 4px 6px -4px var(--tw-shadow-color, #0F0F0F1A);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-backdrop-shadow-xl {
+    --tw-shadow: 0px 0px 25px -5px var(--tw-shadow-color, #0304041A), 0px 8px 10px -6px var(--tw-shadow-color, #0304041A);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2360,6 +2374,10 @@
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-sm {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -4683,15 +4701,6 @@
       gap: calc(var(--spacing) * 2);
     }
   }
-  .sm\:space-x-2 {
-    @media (width >= 40rem) {
-      :where(& > :not(:last-child)) {
-        --tw-space-x-reverse: 0;
-        margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
-        margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
-      }
-    }
-  }
   .sm\:p-2 {
     @media (width >= 40rem) {
       padding: calc(var(--spacing) * 2);

package/dist/tailwind.config.js

@@ -17,6 +17,7 @@ var config = {
             },
             boxShadow: {
                 "backdrop-shadow-lg": "0px 0px 15px -3px #0F0F0F1A, 0px 4px 6px -4px #0F0F0F1A",
+                "backdrop-shadow-xl": "0px 0px 25px -5px #0304041A, 0px 8px 10px -6px #0304041A",
             },
             fontSize: {
                 tiny: "0.625rem", // 10px

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkedunion-design-kit",
-  "version": "1.11.3",
+  "version": "1.11.5",
   "private": false,
   "files": [
     "dist",