linkedunion-design-kit 1.7.1 → 1.7.2

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { Display } from "./src/components/Typography/Display/display";
 export { Caption } from "./src/components/ui/caption";
 export { default as Tooltip } from "./src/components/ToolTip/Tooltip";
 export { Button } from "./src/components/Button/Button";
+export { PhotoGallery } from "./src/components/Card/PhotoGallery";
 export { Label } from "./src/components/Label/Label";
 export { Slider } from "./src/components/Slider/slider";
 export { RadioButton } from "./src/components/RadioButton/radio-button";

package/dist/index.js

@@ -17,6 +17,7 @@ export { Display } from "./src/components/Typography/Display/display";
 export { Caption } from "./src/components/ui/caption";
 export { default as Tooltip } from "./src/components/ToolTip/Tooltip";
 export { Button } from "./src/components/Button/Button";
+export { PhotoGallery } from "./src/components/Card/PhotoGallery";
 export { Label } from "./src/components/Label/Label";
 export { Slider } from "./src/components/Slider/slider";
 export { RadioButton } from "./src/components/RadioButton/radio-button";

package/dist/src/components/Card/PhotoGallery.d.ts

@@ -0,0 +1,2 @@
+import { CardInterface } from "./type";
+export declare const PhotoGallery: ({ image, item, altText, editor, }: CardInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Card/PhotoGallery.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import LUIcon from "../Icons/LUIcon";
+import LuImage from "../Images/LuImage";
+import { Heading } from "../Typography/Heading/heading";
+export var PhotoGallery = function (_a) {
+    var image = _a.image, item = _a.item, _b = _a.altText, altText = _b === void 0 ? "Photo Gallery" : _b, editor = _a.editor;
+    return (_jsxs("div", { className: "group relative max-w-md max-h-md ".concat(editor === null || editor === void 0 ? void 0 : editor.card, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage), children: [_jsx(LuImage, { src: image, width: 448, height: 448, alt: altText, className: "aspect-square object-cover transition-transform" }), _jsx("div", { className: "absolute ".concat(editor === null || editor === void 0 ? void 0 : editor.cardOverlay, " inset-0 bg-linear-to-t from-black to-transparent") }), _jsx(Heading, { variant: "h4-700", className: "absolute line-clamp-1 text-white bottom-4 uppercase !px-5 ".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: item === null || item === void 0 ? void 0 : item.title }), _jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/40 opacity-0 group-hover:!opacity-100 transition-opacity duration-300 ease-out", children: _jsx(LUIcon, { icon: "magnifying-glass", size: "4xl", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardText, " text-gray-100") }) })] }));
+};

package/dist/src/components/Card/PhotoGallery.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from "@storybook/react";
+import { CardInterface } from "./type";
+declare const _default: Meta;
+export default _default;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, CardInterface>;

package/dist/src/components/Card/PhotoGallery.stories.js

@@ -0,0 +1,46 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PhotoGallery } from "./PhotoGallery";
+import { Dummy_Image, Dummy_Title } from "../../utils/constants";
+import Card from "./card";
+export default {
+    title: "Components/NewCard/PhotoGallery",
+    component: PhotoGallery,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return _jsx(Card, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    type: "photoGallery",
+    item: {
+        title: Dummy_Title,
+    },
+    image: Dummy_Image,
+    editor: {
+        card: "",
+        cardImage: "",
+        cardOverlay: "",
+        cardText: "",
+    },
+};
+Default.argTypes = {
+    type: {
+        control: false,
+        table: {
+            type: { summary: "string" },
+            defaultValue: {
+                summary: "photoGallery",
+            },
+        },
+    },
+};

package/dist/src/components/Card/PostByCategory/PostByCategory.js

@@ -27,7 +27,7 @@ export var PostByCategory = function (_a) {
     // Common button component
     var CardButton = function (_a) {
         var _b = _a.className, className = _b === void 0 ? "" : _b;
-        return (_jsx(Link, { href: href || "#", passHref: true, children: _jsx(Button, { endIcon: "angle-right", size: "lg", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn, " max-sm:w-full ").concat(className), children: btnLabel }) }));
+        return (_jsx(Link, { href: href || "#", passHref: true, children: _jsx(Button, { endIcon: "angle-right", size: "lg", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn, " ").concat(className), children: btnLabel }) }));
     };
     // Horizontal layout
     if (orientation === "horizontal") {

package/dist/src/components/Card/PostByCategory.d.ts

@@ -0,0 +1,2 @@
+import { CardInterface } from "./type";
+export declare const PostByCategory: ({ item, image, href, btnLabel, editor, mediaPosition, orientation, }: CardInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Card/PostByCategory.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import LuImage from "../Images/LuImage";
+import Link from "next/link";
+import { Heading } from "../Typography/Heading/heading";
+import { Body } from "../Typography/Body/body";
+import { Button } from "../Button/Button";
+export var PostByCategory = function (_a) {
+    var item = _a.item, image = _a.image, href = _a.href, btnLabel = _a.btnLabel, editor = _a.editor, mediaPosition = _a.mediaPosition, orientation = _a.orientation;
+    // Normalize mediaPosition based on orientation
+    var safeMediaPosition = orientation === "horizontal"
+        ? mediaPosition === "left" || mediaPosition === "right"
+            ? mediaPosition
+            : "right"
+        : mediaPosition === "top" || mediaPosition === "bottom"
+            ? mediaPosition
+            : "top";
+    // Common card media component to avoid duplication
+    var CardMedia = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (_jsx(LuImage, { src: image, width: 240, height: 240, className: "".concat(className, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage), alt: "Image" }));
+    };
+    // Common content section component
+    var CardContent = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (_jsxs("div", { className: "flex flex-col gap-1 ".concat(className), children: [_jsx(Heading, { variant: "h5-700", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle), children: item === null || item === void 0 ? void 0 : item.title }), _jsx(Body, { variant: "body-base", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: item === null || item === void 0 ? void 0 : item.description })] }));
+    };
+    // Common button component
+    var CardButton = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (_jsx(Link, { href: href || "#", passHref: true, className: className, children: _jsx(Button, { endIcon: "angle-right", size: "lg", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn), children: btnLabel }) }));
+    };
+    // Horizontal layout
+    if (orientation === "horizontal") {
+        return (_jsxs("div", { className: "p-5 bg-white rounded-xl inline-flex ".concat(safeMediaPosition === "right" ? "flex-row-reverse" : "", " gap-5 items-center shadow-lg ").concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsx(CardMedia, { className: "max-w-[240px] aspect-square rounded-lg object-cover" }), _jsxs("div", { className: "flex flex-col gap-1 w-full", children: [_jsx(CardContent, {}), _jsx(CardButton, { className: "mt-5" })] })] }));
+    }
+    // Vertical layout
+    return (_jsxs("div", { className: "p-8 bg-white rounded-xl inline-flex flex-col gap-5 max-w-[480px] items-center shadow-lg ".concat(editor === null || editor === void 0 ? void 0 : editor.card), children: [_jsxs("div", { className: "flex ".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, {})] }), _jsx(CardButton, {})] }));
+};

package/dist/src/components/Card/PostByCategory.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import Card from "./card";
+declare const meta: Meta<typeof Card>;
+export default meta;
+type Story = StoryObj<typeof Card>;
+export declare const PostByCategoryHorizontalLeft: Story;
+export declare const PostByCategoryHorizontalRight: Story;
+export declare const PostByCategoryVerticalTop: Story;
+export declare const PostByCategoryVerticalBottom: Story;

package/dist/src/components/Card/PostByCategory.stories.js

@@ -0,0 +1,54 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import Card from "./card";
+import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../utils/constants";
+var meta = {
+    title: "Components/NewCard/PostByCategory",
+    component: Card,
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+// Base card args
+var baseCardArgs = {
+    type: "postByCategory",
+    item: {
+        image: Dummy_Image,
+        title: Dummy_Title,
+        description: Dummy_Para,
+        subtitle: Dummy_Subtitle,
+    },
+    image: Dummy_Image,
+    href: Dummy_Url,
+    btnLabel: "View More",
+    editor: {
+        card: "",
+        cardImage: "",
+        cardTitle: "",
+        cardText: "",
+        cardBtn: "",
+    },
+};
+// PostByCategory Card Stories
+export var PostByCategoryHorizontalLeft = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "left" }),
+};
+export var PostByCategoryHorizontalRight = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "right" }),
+};
+export var PostByCategoryVerticalTop = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "top" }),
+};
+export var PostByCategoryVerticalBottom = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "bottom" }),
+};

package/dist/src/components/Card/card.js

@@ -1,10 +1,11 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { PostByCategory } from "./PostByCategory/PostByCategory";
-import { ContactProfile } from "./ContactProfile";
 import { MultiNews } from "./MultiNews";
 import { SinglePost } from "./SinglePost";
 import { Dummy_Url } from "../../utils/constants";
+import { PhotoGallery } from "./PhotoGallery";
+import { ContactProfile } from "./contactProfile/ContactProfile";
 var Card = function (_a) {
     var item = _a.item, image = _a.image, _b = _a.href, href = _b === void 0 ? Dummy_Url : _b, _c = _a.btnLabel, btnLabel = _c === void 0 ? "View More" : _c, editor = _a.editor, _d = _a.mediaPosition, mediaPosition = _d === void 0 ? "left" : _d, _e = _a.type, type = _e === void 0 ? "postByCategory" : _e, _f = _a.orientation, orientation = _f === void 0 ? "horizontal" : _f;
     var cardProps = {
@@ -22,6 +23,7 @@ var Card = function (_a) {
         contactProfile: ContactProfile,
         multipleNews: MultiNews,
         singlePost: SinglePost,
+        photoGallery: PhotoGallery,
     };
     return (_jsx(_Fragment, { children: type && cardComponents[type]
             ? React.createElement(cardComponents[type], cardProps)

package/dist/src/components/Card/contactProfile/ContactProfile.d.ts

@@ -0,0 +1,2 @@
+import { CardInterface } from "../type";
+export declare const ContactProfile: ({ item, image, href, btnLabel, editor, mediaPosition, orientation, }: CardInterface) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Link from "next/link";
+import LuImage from "../../Images/LuImage";
+import { Heading } from "../../Typography/Heading/heading";
+import { Body } from "../../Typography/Body/body";
+import { Button } from "../../Button/Button";
+export var ContactProfile = function (_a) {
+    var item = _a.item, image = _a.image, href = _a.href, btnLabel = _a.btnLabel, editor = _a.editor, mediaPosition = _a.mediaPosition, orientation = _a.orientation;
+    // Normalize mediaPosition based on orientation
+    var safeMediaPosition = orientation === "horizontal"
+        ? mediaPosition === "left" || mediaPosition === "right"
+            ? mediaPosition
+            : "right"
+        : mediaPosition === "top" || mediaPosition === "bottom"
+            ? mediaPosition
+            : "top";
+    // Common card media component to avoid duplication
+    var CardMedia = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (_jsx(LuImage, { src: image, width: 240, height: 240, className: "w-full h-full rounded-full max-w-40 mx-auto aspect-square object-cover ".concat(className, " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardImage), alt: "Image" }));
+    };
+    // Common content section component
+    var CardContent = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (_jsxs("div", { className: "flex flex-col !gap-1 ".concat(className, " "), children: [_jsx(Heading, { variant: "h5-700", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardTitle, " capitalize line-clamp-1 !m-0"), children: item === null || item === void 0 ? void 0 : item.title }), _jsx(Body, { variant: "body-md", className: " ".concat(orientation === "horizontal" ? "line-clamp-1" : "line-clamp-2", " ").concat(editor === null || editor === void 0 ? void 0 : editor.cardText), children: item === null || item === void 0 ? void 0 : item.description })] }));
+    };
+    // Common button component
+    var CardButton = function (_a) {
+        var _b = _a.className, className = _b === void 0 ? "" : _b;
+        return (_jsx(Link, { href: href || "#", passHref: true, children: _jsx(Button, { endIcon: "angle-right", size: "sm", className: "".concat(editor === null || editor === void 0 ? void 0 : editor.cardBtn, "  ").concat(className), children: btnLabel }) }));
+    };
+    // Horizontal layout
+    if (orientation === "horizontal") {
+        return (_jsxs("div", { className: "!p-5 bg-white rounded-xl grid ".concat(safeMediaPosition === "left" ? "sm:grid-cols-[auto_1fr]" : "sm:grid-cols-[1fr_auto]", " max-w-5xl !gap-10 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 flex-col !gap-1 md:!gap-5 text-center sm:!text-left h-full justify-center ".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-5 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/Card/contactProfile/ContactProfile.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ContactProfile } from "./ContactProfile";
+declare const meta: Meta<typeof ContactProfile>;
+export default meta;
+type Story = StoryObj<typeof ContactProfile>;
+export declare const ContactProfileHorizontalLeft: Story;
+export declare const ContactProfileHorizontalRight: Story;
+export declare const ContactProfileVerticalTop: Story;
+export declare const ContactProfileVerticalBottom: Story;

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

@@ -0,0 +1,52 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { Dummy_Image, Dummy_Para, Dummy_Subtitle, Dummy_Title, Dummy_Url, } from "../../../utils/constants";
+import { ContactProfile } from "./ContactProfile";
+var meta = {
+    title: "Components/NewCard/ContactProfile",
+    component: ContactProfile,
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+var baseCardArgs = {
+    type: "contactProfile",
+    item: {
+        image: Dummy_Image,
+        title: Dummy_Title,
+        description: Dummy_Para,
+        subtitle: Dummy_Subtitle,
+    },
+    image: Dummy_Image,
+    href: Dummy_Url,
+    btnLabel: "View More",
+    editor: {
+        card: "",
+        cardImage: "",
+        cardTitle: "",
+        cardText: "",
+        cardBtn: "",
+    },
+};
+export var ContactProfileHorizontalLeft = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "left" }),
+};
+export var ContactProfileHorizontalRight = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "horizontal", mediaPosition: "right" }),
+};
+export var ContactProfileVerticalTop = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "top" }),
+};
+export var ContactProfileVerticalBottom = {
+    args: __assign(__assign({}, baseCardArgs), { orientation: "vertical", mediaPosition: "bottom" }),
+};

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

@@ -5,6 +5,7 @@ export interface EditorInterface {
     cardText?: string;
     cardBtn?: string;
     cardSubtitle?: string;
+    cardOverlay?: string;
 }
 export interface CardDataProps {
     image?: string;
@@ -19,6 +20,7 @@ export interface CardInterface {
     href?: string;
     btnLabel?: string;
     editor?: EditorInterface;
-    type?: "postByCategory" | "contactProfile" | "multipleNews" | "singlePost";
+    type?: "postByCategory" | "contactProfile" | "multipleNews" | "singlePost" | "photoGallery";
     orientation?: "horizontal" | "vertical";
+    altText?: string;
 }

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

@@ -0,0 +1,9 @@
+import { VariantProps } from "class-variance-authority";
+import React from "react";
+import { labelVariants } from "../ui/label";
+export interface LabelProps extends React.HTMLAttributes<HTMLLabelElement> {
+    htmlFor?: string;
+    className?: string;
+    children: React.ReactNode;
+    variant?: VariantProps<typeof labelVariants>["variant"];
+}

package/dist/src/components/Label/type.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/ui/body.js

@@ -0,0 +1 @@
+"use strict";

package/dist/src/components/ui/label.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { type VariantProps } from "class-variance-authority";
+export declare const variant: {
+    default: string;
+    editorLabel: string;
+};
+declare const labelVariants: (props?: ({
+    variant?: "default" | "editorLabel" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Label({ className, variant, ...props }: React.ComponentProps<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>): import("react/jsx-runtime").JSX.Element;
+export { Label, labelVariants };

package/dist/src/components/ui/label.js

@@ -0,0 +1,41 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    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 } from "react/jsx-runtime";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+export var variant = {
+    default: "!text-base leading-none !font-medium",
+    editorLabel: "!text-lg !font-medium leading-[1.5] !mb-1",
+};
+var labelVariants = cva("flex items-center !gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", {
+    variants: { variant: variant },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Label(_a) {
+    var className = _a.className, variant = _a.variant, props = __rest(_a, ["className", "variant"]);
+    return (_jsx(LabelPrimitive.Root, __assign({ "data-slot": "label", className: cn(labelVariants({ variant: variant, className: className })) }, props)));
+}
+export { Label, labelVariants };

package/dist/styles/global.css

@@ -8,6 +8,7 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --spacing: 0.25rem;
+    --container-md: 28rem;
     --container-5xl: 64rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
@@ -48,6 +49,7 @@
     --radius-xl: 0.75rem;
     --radius-2xl: 1rem;
     --radius-3xl: 1.5rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -210,9 +212,15 @@
   .relative {
     position: relative;
   }
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
   .left-1 {
     left: calc(var(--spacing) * 1);
   }
@@ -222,6 +230,12 @@
   .order-1 {
     order: 1;
   }
+  .order-2 {
+    order: 2;
+  }
+  .order-3 {
+    order: 3;
+  }
   .order-last {
     order: 9999;
   }
@@ -258,6 +272,9 @@
   .\!mx-auto {
     margin-inline: auto !important;
   }
+  .mx-auto {
+    margin-inline: auto;
+  }
   .\!mt-2 {
     margin-top: calc(var(--spacing) * 2) !important;
   }
@@ -534,18 +551,21 @@
   .max-w-5xl {
     max-width: var(--container-5xl);
   }
+  .max-w-40 {
+    max-width: calc(var(--spacing) * 40);
+  }
   .max-w-\[160px\] {
     max-width: 160px;
   }
   .max-w-\[240px\] {
     max-width: 240px;
   }
-  .max-w-\[365px\] {
-    max-width: 365px;
-  }
   .max-w-\[480px\] {
     max-width: 480px;
   }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
   .min-w-0 {
     min-width: calc(var(--spacing) * 0);
   }
@@ -632,6 +652,9 @@
   .\!gap-5 {
     gap: calc(var(--spacing) * 5) !important;
   }
+  .\!gap-10 {
+    gap: calc(var(--spacing) * 10) !important;
+  }
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -647,9 +670,6 @@
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
-  .gap-10 {
-    gap: calc(var(--spacing) * 10);
-  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -777,6 +797,9 @@
   .bg-background {
     background-color: var(--background);
   }
+  .bg-black\/40 {
+    background-color: color-mix(in oklab, #0f0f0f 40%, transparent);
+  }
   .bg-blue-50 {
     background-color: #fbfcfe;
   }
@@ -984,6 +1007,21 @@
   .bg-yellow-950 {
     background-color: #473800;
   }
+  .bg-linear-to-t {
+    --tw-gradient-position: to top;
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      --tw-gradient-position: to top in oklab;
+    }
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .from-black {
+    --tw-gradient-from: #0f0f0f;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-transparent {
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .\!fill-primary {
     fill: var(--primary) !important;
   }
@@ -1448,6 +1486,9 @@
   .capitalize {
     text-transform: capitalize;
   }
+  .uppercase {
+    text-transform: uppercase;
+  }
   .no-underline {
     text-decoration-line: none;
   }
@@ -1512,6 +1553,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-shadow {
     transition-property: box-shadow;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1533,10 +1579,18 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
   }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .\!zoom-in-95 {
     --tw-enter-scale: calc(95*1%) !important;
     --tw-enter-scale: .95 !important;
@@ -1556,6 +1610,13 @@
   .running {
     animation-play-state: running;
   }
+  .group-hover\:\!opacity-100 {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        opacity: 100% !important;
+      }
+    }
+  }
   .group-data-\[disabled\=true\]\:pointer-events-none {
     &:is(:where(.group)[data-disabled="true"] *) {
       pointer-events: none;
@@ -2996,11 +3057,6 @@
       margin-top: 7px;
     }
   }
-  .max-sm\:w-full {
-    @media (width < 40rem) {
-      width: 100%;
-    }
-  }
   .sm\:col-span-2 {
     @media (width >= 40rem) {
       grid-column: span 2 / span 2;
@@ -3021,6 +3077,16 @@
       grid-template-columns: repeat(4, minmax(0, 1fr));
     }
   }
+  .sm\:grid-cols-\[1fr_auto\] {
+    @media (width >= 40rem) {
+      grid-template-columns: 1fr auto;
+    }
+  }
+  .sm\:grid-cols-\[auto_1fr\] {
+    @media (width >= 40rem) {
+      grid-template-columns: auto 1fr;
+    }
+  }
   .sm\:\!text-left {
     @media (width >= 40rem) {
       text-align: left !important;
@@ -3251,6 +3317,48 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-leading {
   syntax: "*";
   inherits: false;
@@ -3422,6 +3530,15 @@
       --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-shadow: 0 0 #0000;

package/package.json

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