@openuidev/react-ui 0.9.16

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

@@ -0,0 +1,3 @@
+export * from "./FormControl";
+export * from "./Hint";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/FormControl/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FormControl/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC"}

package/dist/components/FormControl/index.js

@@ -0,0 +1,3 @@
+export * from "./FormControl";
+export * from "./Hint";
+//# sourceMappingURL=index.js.map

package/dist/components/FormControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/FormControl/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC"}

package/dist/components/FormControl/stories/FormControl.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FormControl } from "../FormControl";
+declare const meta: Meta<typeof FormControl>;
+export default meta;
+type Story = StoryObj<typeof FormControl>;
+export declare const WithLabelAndHint: Story;
+export declare const WithMultipleChildren: Story;
+export declare const LengthValidation: Story;
+//# sourceMappingURL=FormControl.stories.d.ts.map

package/dist/components/FormControl/stories/FormControl.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControl.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/FormControl/stories/FormControl.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAKvD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAgDlC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,eAAO,MAAM,gBAAgB,EAAE,KAa9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA0B9B,CAAC"}

package/dist/components/FormControl/stories/FormControl.stories.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, Info } from "lucide-react";
+import { useState } from "react";
+import { Input } from "../../Input";
+import { Label } from "../../Label";
+import { FormControl } from "../FormControl";
+import { Hint } from "../Hint";
+const meta = {
+    title: "Components/FormControl",
+    component: FormControl,
+    tags: ["!dev", "autodocs"],
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "```tsx\nimport { FormControl, Hint } from '@openui-ui/react-ui';\n```",
+            },
+        },
+    },
+    argTypes: {
+        children: {
+            control: false,
+            description: "The child elements of the form control that accept Label, Input, and Hint components",
+            table: {
+                category: "Content",
+                type: { summary: "ReactNode[] | ReactNode" },
+            },
+        },
+        className: {
+            control: false,
+            description: "Additional CSS class name for custom styling",
+            table: {
+                category: "Styling",
+                type: { summary: "string" },
+            },
+        },
+        style: {
+            control: false,
+            description: "Inline CSS styles for custom styling",
+            table: {
+                category: "Styling",
+                type: { summary: "CSSProperties" },
+            },
+        },
+        hasError: {
+            control: "boolean",
+            description: "Toggles error styling for child inputs and hints",
+            table: {
+                category: "Behavior",
+                type: { summary: "boolean" },
+                defaultValue: { summary: "false" },
+            },
+        },
+    },
+};
+export default meta;
+export const WithLabelAndHint = {
+    render: (args) => (_jsxs(FormControl, { children: [_jsx(Label, { htmlFor: "username", required: true, children: "Username" }), _jsx(Input, { placeholder: "Enter username", id: "username" }), _jsxs(Hint, { children: [_jsx(Info, { size: 14 }), _jsx("span", { children: "Must be at least 4 characters long" })] })] })),
+};
+export const WithMultipleChildren = {
+    render: (args) => (_jsxs(FormControl, { children: [_jsx(Label, { htmlFor: "profile-information", children: "Profile Information" }), _jsx(Input, { placeholder: "Full name", id: "profile-information" }), _jsx(Input, { placeholder: "Bio" }), _jsx(Hint, { children: "This information will be displayed on your public profile" })] })),
+};
+export const LengthValidation = {
+    render: () => {
+        const [value, setValue] = useState("");
+        const hasError = value.length > 0 && (value.length > 10 || value.length < 3);
+        const helperText = hasError
+            ? "Name must be between 3 and 10 characters"
+            : "Enter a name between 3 and 10 characters";
+        return (_jsx("div", { style: { width: 420 }, children: _jsxs(FormControl, { hasError: hasError, children: [_jsx(Label, { htmlFor: "name-validated", children: "Name" }), _jsx(Input, { id: "name-validated", placeholder: "Type here", value: value, onChange: (e) => setValue(e.target.value) }), _jsxs(Hint, { children: [hasError ? _jsx(AlertCircle, { size: 14 }) : _jsx(Info, { size: 14 }), _jsx("span", { children: helperText })] })] }) }));
+    },
+};
+//# sourceMappingURL=FormControl.stories.js.map

package/dist/components/FormControl/stories/FormControl.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormControl.stories.js","sourceRoot":"","sources":["../../../../src/components/FormControl/stories/FormControl.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,16 @@
+import { ButtonHTMLAttributes, ReactNode } from "react";
+type IconButtonVariant = "primary" | "secondary" | "tertiary";
+type IconButtonSize = "3-extra-small" | "2-extra-small" | "extra-small" | "small" | "medium" | "large";
+type IconButtonShape = "square" | "circle";
+type IconButtonAppearance = "normal" | "destructive";
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    icon: ReactNode;
+    variant?: IconButtonVariant;
+    size?: IconButtonSize;
+    shape?: IconButtonShape;
+    className?: string;
+    appearance?: IconButtonAppearance;
+}
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=IconButton.d.ts.map

package/dist/components/IconButton/IconButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,KAAK,iBAAiB,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAC9D,KAAK,cAAc,GACf,eAAe,GACf,eAAe,GACf,aAAa,GACb,OAAO,GACP,QAAQ,GACR,OAAO,CAAC;AACZ,KAAK,eAAe,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC3C,KAAK,oBAAoB,GAAG,QAAQ,GAAG,aAAa,CAAC;AAErD,MAAM,WAAW,eAAgB,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC9E,IAAI,EAAE,SAAS,CAAC;IAChB,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,oBAAoB,CAAC;CACnC;AA4BD,eAAO,MAAM,UAAU,+GA6BrB,CAAC"}

package/dist/components/IconButton/IconButton.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef } from "react";
+const normalIconButtonVariants = {
+    primary: "openui-icon-button-primary",
+    secondary: "openui-icon-button-secondary",
+    tertiary: "openui-icon-button-tertiary",
+};
+const destructiveIconButtonVariants = {
+    primary: "openui-icon-button-destructive-primary",
+    secondary: "openui-icon-button-destructive-secondary",
+    tertiary: "openui-icon-button-destructive-tertiary",
+};
+const iconButtonSizes = {
+    "3-extra-small": "openui-icon-button-3-extra-small",
+    "2-extra-small": "openui-icon-button-2-extra-small",
+    "extra-small": "openui-icon-button-extra-small",
+    small: "openui-icon-button-small",
+    medium: "openui-icon-button-medium",
+    large: "openui-icon-button-large",
+};
+const iconButtonShapes = {
+    square: "openui-icon-button-square",
+    circle: "openui-icon-button-circle",
+};
+export const IconButton = forwardRef((props, ref) => {
+    const { className, icon, variant = "primary", size = "medium", shape = "square", appearance = "normal", ...rest } = props;
+    const iconButtonVariants = appearance === "normal" ? normalIconButtonVariants : destructiveIconButtonVariants;
+    return (_jsx("button", { ref: ref, className: clsx("openui-icon-button", iconButtonVariants[variant], iconButtonSizes[size], iconButtonShapes[shape], className), ...rest, children: icon && _jsx("span", { className: "openui-icon-button-icon", children: icon }) }));
+});
+IconButton.displayName = "IconButton";
+//# sourceMappingURL=IconButton.js.map

package/dist/components/IconButton/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sourceRoot":"","sources":["../../../src/components/IconButton/IconButton.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAwB,UAAU,EAAa,MAAM,OAAO,CAAC;AAsBpE,MAAM,wBAAwB,GAAG;IAC/B,OAAO,EAAE,4BAA4B;IACrC,SAAS,EAAE,8BAA8B;IACzC,QAAQ,EAAE,6BAA6B;CAC/B,CAAC;AAEX,MAAM,6BAA6B,GAAG;IACpC,OAAO,EAAE,wCAAwC;IACjD,SAAS,EAAE,0CAA0C;IACrD,QAAQ,EAAE,yCAAyC;CAC3C,CAAC;AAEX,MAAM,eAAe,GAAG;IACtB,eAAe,EAAE,kCAAkC;IACnD,eAAe,EAAE,kCAAkC;IACnD,aAAa,EAAE,gCAAgC;IAC/C,KAAK,EAAE,0BAA0B;IACjC,MAAM,EAAE,2BAA2B;IACnC,KAAK,EAAE,0BAA0B;CACzB,CAAC;AAEX,MAAM,gBAAgB,GAAG;IACvB,MAAM,EAAE,2BAA2B;IACnC,MAAM,EAAE,2BAA2B;CAC3B,CAAC;AAEX,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAqC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACtF,MAAM,EACJ,SAAS,EACT,IAAI,EACJ,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,QAAQ,EAChB,UAAU,GAAG,QAAQ,EACrB,GAAG,IAAI,EACR,GAAG,KAAK,CAAC;IAEV,MAAM,kBAAkB,GACtB,UAAU,KAAK,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,6BAA6B,CAAC;IAErF,OAAO,CACL,iBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CACb,oBAAoB,EACpB,kBAAkB,CAAC,OAAO,CAAC,EAC3B,eAAe,CAAC,IAAI,CAAC,EACrB,gBAAgB,CAAC,KAAK,CAAC,EACvB,SAAS,CACV,KACG,IAAI,YAEP,IAAI,IAAI,eAAM,SAAS,EAAC,yBAAyB,YAAE,IAAI,GAAQ,GACzD,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/components/IconButton/dependencies.d.ts

@@ -0,0 +1,3 @@
+declare const dependencies: string[];
+export default dependencies;
+//# sourceMappingURL=dependencies.d.ts.map

package/dist/components/IconButton/dependencies.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependencies.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/dependencies.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY,UAAiB,CAAC;AACpC,eAAe,YAAY,CAAC"}

package/dist/components/IconButton/dependencies.js

@@ -0,0 +1,3 @@
+const dependencies = ["IconButton"];
+export default dependencies;
+//# sourceMappingURL=dependencies.js.map

package/dist/components/IconButton/dependencies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependencies.js","sourceRoot":"","sources":["../../../src/components/IconButton/dependencies.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAC,YAAY,CAAC,CAAC;AACpC,eAAe,YAAY,CAAC"}

package/dist/components/IconButton/iconButton.css

@@ -0,0 +1 @@
+.openui-icon-button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,0);cursor:pointer;transition:all .12s ease;padding:0;flex-shrink:0}.openui-icon-button-icon{display:flex;align-items:center;justify-content:center}.openui-icon-button-primary{background-color:var(--openui-interactive-accent-default, oklch(9.7% 0 0deg));color:var(--openui-text-accent-primary, oklch(99.4% 0 89.876deg));border-color:var(--openui-border-accent, oklch(9.7% 0 0deg / 0.08));box-shadow:var(--openui-shadow-m, 0 4px 6px -2px oklch(0% 0 0deg / 0.025), 0 2px 2px -2px oklch(0% 0 0deg / 0.05))}.openui-icon-button-primary:not(:disabled):hover{background-color:var(--openui-interactive-accent-hover, oklch(9.7% 0 0deg / 0.8));box-shadow:none}.openui-icon-button-primary:disabled{background-color:var(--openui-interactive-accent-disabled, oklch(9.7% 0 0deg / 0.4));cursor:not-allowed;box-shadow:none}.openui-icon-button-primary:not(:disabled):active{background-color:var(--openui-interactive-accent-pressed, oklch(9.7% 0 0deg))}.openui-icon-button-secondary{background-color:rgba(0,0,0,0);color:var(--openui-text-neutral-primary, oklch(9.7% 0 0deg));border-color:var(--openui-border-interactive, oklch(9.7% 0 0deg / 0.12));box-shadow:var(--openui-shadow-m, 0 4px 6px -2px oklch(0% 0 0deg / 0.025), 0 2px 2px -2px oklch(0% 0 0deg / 0.05))}.openui-icon-button-secondary:not(:disabled):hover{background-color:var(--openui-highlight, oklch(9.7% 0 0deg / 0.04));box-shadow:none}.openui-icon-button-secondary:disabled{background-color:rgba(0,0,0,0);color:var(--openui-text-neutral-tertiary, oklch(9.7% 0 0deg / 0.2));cursor:not-allowed;box-shadow:none}.openui-icon-button-secondary:not(:disabled):active{background-color:var(--openui-highlight, oklch(9.7% 0 0deg / 0.04))}.openui-icon-button-tertiary{background-color:rgba(0,0,0,0);color:var(--openui-text-neutral-primary, oklch(9.7% 0 0deg))}.openui-icon-button-tertiary:not(:disabled):hover{background-color:var(--openui-highlight, oklch(9.7% 0 0deg / 0.04))}.openui-icon-button-tertiary:disabled{background-color:rgba(0,0,0,0);border-color:var(--openui-border-default, oklch(9.7% 0 0deg / 0.06));color:var(--openui-text-neutral-tertiary, oklch(9.7% 0 0deg / 0.2));cursor:not-allowed}.openui-icon-button-tertiary:not(:disabled):active{background-color:var(--openui-highlight, oklch(9.7% 0 0deg / 0.04));border-color:var(--openui-border-interactive, oklch(9.7% 0 0deg / 0.12))}.openui-icon-button-destructive-primary{background-color:var(--openui-interactive-destructive-accent-default, oklch(57.7% 0.215 27.325deg));color:var(--openui-text-danger-inverted-primary, oklch(98.2% 0.009 17.303deg));border-color:var(--openui-border-accent, oklch(9.7% 0 0deg / 0.08))}.openui-icon-button-destructive-primary:not(:disabled):hover{background-color:var(--openui-interactive-destructive-accent-hover, oklch(63.7% 0.208 25.331deg))}.openui-icon-button-destructive-primary:disabled{background-color:var(--openui-interactive-destructive-accent-disabled, oklch(57.7% 0.215 27.325deg / 0.4));cursor:not-allowed}.openui-icon-button-destructive-primary:not(:disabled):active{background-color:var(--openui-interactive-destructive-accent-pressed, oklch(50.5% 0.19 27.518deg))}.openui-icon-button-destructive-secondary{background-color:var(--openui-interactive-destructive-default, oklch(57.7% 0.215 27.325deg / 0.02));color:var(--openui-text-danger-primary, oklch(50.5% 0.19 27.518deg));border-color:var(--openui-border-danger, oklch(57.7% 0.215 27.325deg / 0.08))}.openui-icon-button-destructive-secondary:not(:disabled):hover{background-color:var(--openui-interactive-destructive-hover, oklch(57.7% 0.215 27.325deg / 0.08))}.openui-icon-button-destructive-secondary:disabled{background-color:var(--openui-interactive-destructive-disabled, oklch(57.7% 0.215 27.325deg / 0.02));color:var(--openui-text-danger-tertiary, oklch(80.8% 0.103 19.571deg));cursor:not-allowed}.openui-icon-button-destructive-secondary:not(:disabled):active{background-color:var(--openui-interactive-destructive-hover, oklch(57.7% 0.215 27.325deg / 0.08))}.openui-icon-button-destructive-tertiary{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);color:var(--openui-text-danger-primary, oklch(50.5% 0.19 27.518deg))}.openui-icon-button-destructive-tertiary:not(:disabled):hover{background-color:var(--openui-interactive-destructive-hover, oklch(57.7% 0.215 27.325deg / 0.08))}.openui-icon-button-destructive-tertiary:disabled{color:var(--openui-text-danger-tertiary, oklch(80.8% 0.103 19.571deg));cursor:not-allowed}.openui-icon-button-destructive-tertiary:not(:disabled):active{background-color:var(--openui-interactive-destructive-hover, oklch(57.7% 0.215 27.325deg / 0.08));border-color:var(--openui-border-danger, oklch(57.7% 0.215 27.325deg / 0.08))}.openui-icon-button-3-extra-small{width:20px;height:20px}.openui-icon-button-3-extra-small .openui-icon-button-icon{height:10px;width:10px}.openui-icon-button-2-extra-small{width:24px;height:24px}.openui-icon-button-2-extra-small .openui-icon-button-icon{height:12px;width:12px}.openui-icon-button-extra-small{width:28px;height:28px}.openui-icon-button-extra-small .openui-icon-button-icon{height:14px;width:14px}.openui-icon-button-small{width:32px;height:32px}.openui-icon-button-small .openui-icon-button-icon{height:16px;width:16px}.openui-icon-button-medium{width:36px;height:36px}.openui-icon-button-medium .openui-icon-button-icon{height:16px;width:16px}.openui-icon-button-large{width:40px;height:40px;min-width:40px;min-height:40px;font-size:16px}.openui-icon-button-large .openui-icon-button-icon{height:16px;width:16px}.openui-icon-button-square{border-radius:var(--openui-radius-s, 6px)}.openui-icon-button-square.openui-icon-button-2-extra-small{border-radius:calc(var(--openui-radius-s, 6px) - 1px)}.openui-icon-button-square.openui-icon-button-extra-small{border-radius:var(--openui-radius-s, 6px)}.openui-icon-button-square.openui-icon-button-small{border-radius:calc(var(--openui-radius-s, 6px) + 1px)}.openui-icon-button-square.openui-icon-button-medium{border-radius:var(--openui-radius-m, 8px)}.openui-icon-button-square.openui-icon-button-large{border-radius:var(--openui-radius-l, 10px)}.openui-icon-button-circle{border-radius:var(--openui-radius-full, 9999px)}

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

@@ -0,0 +1,2 @@
+export * from "./IconButton";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/IconButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/IconButton/index.js

@@ -0,0 +1,2 @@
+export * from "./IconButton";
+//# sourceMappingURL=index.js.map

package/dist/components/IconButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/IconButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/IconButton/stories/iconButton.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { IconButton } from "../IconButton";
+declare const meta: Meta<typeof IconButton>;
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+export declare const PrimaryButton: Story;
+export declare const SecondaryButton: Story;
+export declare const TertiaryButton: Story;
+//# sourceMappingURL=iconButton.stories.d.ts.map

package/dist/components/IconButton/stories/iconButton.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconButton.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/stories/iconButton.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CA6EjC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAC;AAGzC,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAC;AAGF,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAC;AAGF,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAC"}

package/dist/components/IconButton/stories/iconButton.stories.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Download } from "lucide-react";
+import { IconButton } from "../IconButton";
+const meta = {
+    title: "Components/IconButton",
+    component: IconButton,
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "```tsx\nimport { IconButton } from '@openui-ui/react-ui';\n```",
+            },
+        },
+    },
+    argTypes: {
+        icon: {
+            control: false,
+            description: "The icon to display in the button",
+            table: {
+                category: "Content",
+                type: { summary: "ReactNode" },
+            },
+        },
+        variant: {
+            control: "radio",
+            options: ["primary", "secondary", "tertiary"],
+            description: "The variant of the button",
+            table: {
+                category: "Appearance",
+                type: { summary: "string" },
+                defaultValue: { summary: "primary" },
+            },
+        },
+        size: {
+            control: "radio",
+            options: ["2-extra-small", "extra-small", "small", "medium", "large"],
+            description: "The size of the button",
+            table: {
+                category: "Appearance",
+                type: { summary: "string" },
+                defaultValue: { summary: "medium" },
+            },
+        },
+        shape: {
+            control: "radio",
+            options: ["square", "circle"],
+            description: "The shape of the button",
+            table: {
+                category: "Appearance",
+                type: { summary: "string" },
+                defaultValue: { summary: "square" },
+            },
+        },
+        disabled: {
+            control: "boolean",
+            description: "Whether the button is disabled",
+            table: {
+                category: "Behavior",
+                type: { summary: "boolean" },
+                defaultValue: { summary: "false" },
+            },
+        },
+        className: {
+            control: false,
+            description: "Additional CSS classes to apply to the button",
+            table: {
+                category: "Styling",
+                type: { summary: "string" },
+            },
+        },
+        appearance: {
+            control: "radio",
+            options: ["normal", "destructive"],
+            description: "The appearance of the button",
+            table: {
+                category: "Appearance",
+            },
+        },
+    },
+    tags: ["!dev", "autodocs"],
+};
+export default meta;
+// Basic button stories
+export const PrimaryButton = {
+    args: {
+        icon: _jsx(Download, {}),
+        disabled: false,
+        variant: "primary",
+        shape: "square",
+        size: "medium",
+        appearance: "normal",
+    },
+    render: (args) => _jsx(IconButton, { ...args }),
+};
+// Secondary button stories
+export const SecondaryButton = {
+    args: {
+        ...PrimaryButton.args,
+        variant: "secondary",
+    },
+};
+// Tertiary button stories
+export const TertiaryButton = {
+    name: "Tertiary (Ghost)",
+    args: {
+        ...PrimaryButton.args,
+        variant: "tertiary",
+    },
+};
+//# sourceMappingURL=iconButton.stories.js.map

package/dist/components/IconButton/stories/iconButton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconButton.stories.js","sourceRoot":"","sources":["../../../../src/components/IconButton/stories/iconButton.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/Image/Image.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+type AspectRatioType = "1:1" | "3:2" | "3:4" | "4:3" | "16:9";
+type ScaleType = "fit" | "fill";
+export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    src: string;
+    alt?: string;
+    styles?: React.CSSProperties;
+    className?: string;
+    aspectRatio?: AspectRatioType;
+    scale?: ScaleType;
+}
+export declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLImageElement>>;
+export {};
+//# sourceMappingURL=Image.d.ts.map

package/dist/components/Image/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,KAAK,eAAe,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC;AAC9D,KAAK,SAAS,GAAG,KAAK,GAAG,MAAM,CAAC;AAEhC,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC;IAC3E,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAeD,eAAO,MAAM,KAAK,qFA2BhB,CAAC"}

package/dist/components/Image/Image.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as AspectRatio from "@radix-ui/react-aspect-ratio";
+import clsx from "clsx";
+import { forwardRef } from "react";
+const aspectRatioMap = {
+    "1:1": 1,
+    "3:2": 3 / 2,
+    "3:4": 3 / 4,
+    "4:3": 4 / 3,
+    "16:9": 16 / 9,
+};
+const scaleMap = {
+    fit: "openui-image-fit",
+    fill: "openui-image-fill",
+};
+export const Image = forwardRef((props, ref) => {
+    const { src, alt, styles, className, aspectRatio = "3:2", scale = "fill", ...rest } = props;
+    const imageClasses = clsx("openui-image", {
+        [`${scaleMap[scale]}`]: scale,
+    }, className);
+    const image = (_jsx("img", { ref: ref, src: src, alt: alt, className: imageClasses, style: styles, onError: (e) => {
+            e.currentTarget.style.display = "none";
+            console.error(`Failed to load image: ${src}`);
+        }, ...rest }));
+    return _jsx(AspectRatio.Root, { ratio: aspectRatioMap[aspectRatio], children: image });
+});
+Image.displayName = "Image";
+//# sourceMappingURL=Image.js.map

package/dist/components/Image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../../src/components/Image/Image.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,WAAW,MAAM,8BAA8B,CAAC;AAC5D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAc1C,MAAM,cAAc,GAAoC;IACtD,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,CAAC,GAAG,CAAC;IACZ,KAAK,EAAE,CAAC,GAAG,CAAC;IACZ,KAAK,EAAE,CAAC,GAAG,CAAC;IACZ,MAAM,EAAE,EAAE,GAAG,CAAC;CACf,CAAC;AAEF,MAAM,QAAQ,GAA8B;IAC1C,GAAG,EAAE,kBAAkB;IACvB,IAAI,EAAE,mBAAmB;CAC1B,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,UAAU,CAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAC3E,MAAM,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,GAAG,KAAK,EAAE,KAAK,GAAG,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAE5F,MAAM,YAAY,GAAG,IAAI,CACvB,cAAc,EACd;QACE,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,KAAK;KAC9B,EACD,SAAS,CACV,CAAC;IAEF,MAAM,KAAK,GAAG,CACZ,cACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,YAAY,EACvB,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YACvC,OAAO,CAAC,KAAK,CAAC,yBAAyB,GAAG,EAAE,CAAC,CAAC;QAChD,CAAC,KACG,IAAI,GACR,CACH,CAAC;IAEF,OAAO,KAAC,WAAW,CAAC,IAAI,IAAC,KAAK,EAAE,cAAc,CAAC,WAAW,CAAC,YAAG,KAAK,GAAoB,CAAC;AAC1F,CAAC,CAAC,CAAC;AAEH,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/components/Image/dependencies.d.ts

@@ -0,0 +1,3 @@
+declare const dependencies: string[];
+export default dependencies;
+//# sourceMappingURL=dependencies.d.ts.map

package/dist/components/Image/dependencies.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependencies.d.ts","sourceRoot":"","sources":["../../../src/components/Image/dependencies.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY,UAAY,CAAC;AAC/B,eAAe,YAAY,CAAC"}

package/dist/components/Image/dependencies.js

@@ -0,0 +1,3 @@
+const dependencies = ["Image"];
+export default dependencies;
+//# sourceMappingURL=dependencies.js.map

package/dist/components/Image/dependencies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependencies.js","sourceRoot":"","sources":["../../../src/components/Image/dependencies.ts"],"names":[],"mappings":"AAAA,MAAM,YAAY,GAAG,CAAC,OAAO,CAAC,CAAC;AAC/B,eAAe,YAAY,CAAC"}

package/dist/components/Image/image.css

@@ -0,0 +1 @@
+.openui-image{display:flex;box-sizing:border-box;max-width:100%;height:auto;overflow:clip;border-radius:var(--openui-radius-m, 8px);border:1px solid var(--openui-border-default, oklch(9.7% 0 0deg / 0.06));background-color:var(--openui-foreground, oklch(99.4% 0 89.876deg))}.openui-image-fit{object-fit:contain;width:100%;height:100%}.openui-image-fill{object-fit:cover;width:100%;height:100%}

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

@@ -0,0 +1,2 @@
+export * from "./Image";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Image/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Image/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/Image/index.js

@@ -0,0 +1,2 @@
+export * from "./Image";
+//# sourceMappingURL=index.js.map

package/dist/components/Image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Image/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/Image/stories/Image.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Image } from "../Image";
+declare const meta: Meta<typeof Image>;
+export default meta;
+type Story = StoryObj<typeof Image>;
+export declare const Default: Story;
+//# sourceMappingURL=Image.stories.d.ts.map

package/dist/components/Image/stories/Image.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/Image/stories/Image.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,CAyE5B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,KAAK,CAAC,CAAC;AASpC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC"}

package/dist/components/Image/stories/Image.stories.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image } from "../Image";
+const meta = {
+    title: "Components/Image",
+    component: Image,
+    tags: ["!dev", "autodocs"],
+    decorators: [
+        (Story) => (_jsx("div", { style: {
+                maxWidth: 400,
+                margin: "auto",
+            }, children: _jsx(Story, {}) })),
+    ],
+    parameters: {
+        docs: {
+            description: {
+                component: "```tsx\nimport { Image } from '@openui-ui/react-ui';\n```",
+            },
+        },
+    },
+    argTypes: {
+        className: {
+            control: false,
+            description: "Additional CSS classes to apply to the image",
+            table: {
+                category: "Styling",
+            },
+        },
+        styles: {
+            control: false,
+            description: "Additional CSS styles to apply to the image",
+            table: {
+                category: "Styling",
+            },
+        },
+        aspectRatio: {
+            control: "select",
+            options: ["1:1", "3:2", "3:4", "4:3", "16:9"],
+            description: "Uses Radix UI AspectRatio component",
+            table: {
+                category: "Appearance",
+                type: { summary: "string" },
+                defaultValue: { summary: "3:2" },
+            },
+        },
+        scale: {
+            control: "radio",
+            options: ["fit", "fill"],
+            description: "The scaling behavior of the image",
+            table: {
+                category: "Appearance",
+                type: { summary: "string" },
+                defaultValue: { summary: "fit" },
+            },
+        },
+        src: {
+            control: "text",
+            description: "The source URL of the image",
+            table: {
+                category: "Content",
+            },
+        },
+        alt: {
+            control: "text",
+            description: "The alternative text for the image",
+            table: {
+                category: "Content",
+            },
+        },
+    },
+};
+export default meta;
+const randomImage = [
+    "https://images.unsplash.com/photo-1738168246881-40f35f8aba0a?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwyNnx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1736354485341-d165463e0133?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwyMnx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1738522477288-82f5db85cfc3?q=80&w=2973&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    "https://images.unsplash.com/photo-1736794781970-ae55b6e3a13e?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw3MHx8fGVufDB8fHx8fA%3D%3D",
+];
+export const Default = {
+    args: {
+        src: randomImage[Math.floor(Math.random() * randomImage.length)],
+        alt: "Sample image",
+        aspectRatio: "3:2",
+        scale: "fill",
+    },
+};
+//# sourceMappingURL=Image.stories.js.map

package/dist/components/Image/stories/Image.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.stories.js","sourceRoot":"","sources":["../../../../src/components/Image/stories/Image.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,MAAM,IAAI,GAAuB;IAC/B,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,CAAC,MAAM,EAAE,UAAU,CAAC;IAC1B,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cACE,KAAK,EAAE;gBACL,QAAQ,EAAE,GAAG;gBACb,MAAM,EAAE,MAAM;aACf,YAED,KAAC,KAAK,KAAG,GACL,CACP;KACF;IACD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EAAE,2DAA2D;aACvE;SACF;KACF;IACD,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,8CAA8C;YAC3D,KAAK,EAAE;gBACL,QAAQ,EAAE,SAAS;aACpB;SACF;QACD,MAAM,EAAE;YACN,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,6CAA6C;YAC1D,KAAK,EAAE;gBACL,QAAQ,EAAE,SAAS;aACpB;SACF;QACD,WAAW,EAAE;YACX,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC;YAC7C,WAAW,EAAE,qCAAqC;YAClD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC;YACxB,WAAW,EAAE,mCAAmC;YAChD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;gBAC3B,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;aACjC;SACF;QACD,GAAG,EAAE;YACH,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,6BAA6B;YAC1C,KAAK,EAAE;gBACL,QAAQ,EAAE,SAAS;aACpB;SACF;QACD,GAAG,EAAE;YACH,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,oCAAoC;YACjD,KAAK,EAAE;gBACL,QAAQ,EAAE,SAAS;aACpB;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAGpB,MAAM,WAAW,GAAG;IAClB,uLAAuL;IACvL,uLAAuL;IACvL,wKAAwK;IACxK,uLAAuL;CACxL,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,GAAG,EAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC;QAChE,GAAG,EAAE,cAAc;QACnB,WAAW,EAAE,KAAK;QAClB,KAAK,EAAE,MAAM;KACd;CACF,CAAC"}

package/dist/components/ImageBlock/ImageBlock.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+export interface ImageBlockProps extends React.HTMLAttributes<HTMLDivElement> {
+    src: string;
+    alt?: string;
+    imageLoading?: boolean;
+}
+export declare const ImageBlock: React.ForwardRefExoticComponent<ImageBlockProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ImageBlock.d.ts.map

package/dist/components/ImageBlock/ImageBlock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBlock.d.ts","sourceRoot":"","sources":["../../../src/components/ImageBlock/ImageBlock.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAG5D,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU,wFAkDtB,CAAC"}

package/dist/components/ImageBlock/ImageBlock.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { forwardRef, useRef, useState } from "react";
+import { useResponsiveContainer } from "../../hooks/useResponsiveContainer";
+export const ImageBlock = forwardRef(({ src, alt, className, imageLoading, ...rest }, ref) => {
+    const [isImageLoading, setIsImageLoading] = useState(imageLoading ?? true);
+    const [hasError, setHasError] = useState(false);
+    const containerRef = useRef(null);
+    const { breakpoint } = useResponsiveContainer(containerRef);
+    const isMobile = breakpoint === "mobile";
+    if (!src)
+        return null;
+    return (_jsxs("div", { ref: (node) => {
+            containerRef.current = node;
+            if (typeof ref === "function")
+                ref(node);
+            else if (ref)
+                ref.current = node;
+        }, className: clsx("openui-image-block-wrapper", {
+            "openui-image-block-wrapper--mobile": isMobile,
+            "openui-image-block-wrapper--error": hasError,
+        }, className), style: src && !hasError ? { "--bg-image": `url(${src})` } : undefined, ...rest, children: [_jsx("img", { src: src, alt: alt, className: clsx("openui-image-block-image", {
+                    "openui-image-block-image--mobile": isMobile,
+                    "openui-image-block-image--error": hasError,
+                }), onLoad: () => {
+                    setIsImageLoading(false);
+                    setHasError(false);
+                }, onError: () => {
+                    setIsImageLoading(false);
+                    setHasError(true);
+                } }), isImageLoading && _jsx("div", { className: "openui-image-block-loader" })] }));
+});
+ImageBlock.displayName = "ImageBlock";
+//# sourceMappingURL=ImageBlock.js.map

package/dist/components/ImageBlock/ImageBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageBlock.js","sourceRoot":"","sources":["../../../src/components/ImageBlock/ImageBlock.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAc,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAQ5E,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IACtD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAU,YAAY,IAAI,IAAI,CAAC,CAAC;IACpF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IACzD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,EAAE,UAAU,EAAE,GAAG,sBAAsB,CAAC,YAAY,CAAC,CAAC;IAC5D,MAAM,QAAQ,GAAG,UAAU,KAAK,QAAQ,CAAC;IAEzC,IAAI,CAAC,GAAG;QAAE,OAAO,IAAI,CAAC;IAEtB,OAAO,CACL,eACE,GAAG,EAAE,CAAC,IAAI,EAAE,EAAE;YACX,YAA8D,CAAC,OAAO,GAAG,IAAI,CAAC;YAC/E,IAAI,OAAO,GAAG,KAAK,UAAU;gBAAE,GAAG,CAAC,IAAI,CAAC,CAAC;iBACpC,IAAI,GAAG;gBAAG,GAAqD,CAAC,OAAO,GAAG,IAAI,CAAC;QACtF,CAAC,EACD,SAAS,EAAE,IAAI,CACb,4BAA4B,EAC5B;YACE,oCAAoC,EAAE,QAAQ;YAC9C,mCAAmC,EAAE,QAAQ;SAC9C,EACD,SAAS,CACV,EACD,KAAK,EACH,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAE,EAAE,YAAY,EAAE,OAAO,GAAG,GAAG,EAA0B,CAAC,CAAC,CAAC,SAAS,KAErF,IAAI,aAER,cACE,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,0BAA0B,EAAE;oBAC1C,kCAAkC,EAAE,QAAQ;oBAC5C,iCAAiC,EAAE,QAAQ;iBAC5C,CAAC,EACF,MAAM,EAAE,GAAG,EAAE;oBACX,iBAAiB,CAAC,KAAK,CAAC,CAAC;oBACzB,WAAW,CAAC,KAAK,CAAC,CAAC;gBACrB,CAAC,EACD,OAAO,EAAE,GAAG,EAAE;oBACZ,iBAAiB,CAAC,KAAK,CAAC,CAAC;oBACzB,WAAW,CAAC,IAAI,CAAC,CAAC;gBACpB,CAAC,GACD,EACD,cAAc,IAAI,cAAK,SAAS,EAAC,2BAA2B,GAAG,IAC5D,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/components/ImageBlock/dependencies.d.ts

@@ -0,0 +1,3 @@
+declare const dependencies: string[];
+export default dependencies;
+//# sourceMappingURL=dependencies.d.ts.map

package/dist/components/ImageBlock/dependencies.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dependencies.d.ts","sourceRoot":"","sources":["../../../src/components/ImageBlock/dependencies.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY,UAAiB,CAAC;AACpC,eAAe,YAAY,CAAC"}

package/dist/components/ImageBlock/dependencies.js

@@ -0,0 +1,3 @@
+const dependencies = ["ImageBlock"];
+export default dependencies;
+//# sourceMappingURL=dependencies.js.map