@krrli/cm-designsystem 1.1.0 → 1.19.8

package/dist/components/button/Button.d.ts

@@ -0,0 +1,54 @@
+import { type VariantProps } from "tailwind-variants";
+import type { IconBaseProps } from "../icons/IconBase";
+declare const buttonStyles: import("tailwind-variants").TVReturnType<{
+    intent: {
+        primary: string[];
+        secondary: string[];
+        tertiary: string[];
+    };
+    size: {
+        md: string[];
+        lg: string[];
+    };
+}, undefined, string[], {
+    intent: {
+        primary: string[];
+        secondary: string[];
+        tertiary: string[];
+    };
+    size: {
+        md: string[];
+        lg: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    intent: {
+        primary: string[];
+        secondary: string[];
+        tertiary: string[];
+    };
+    size: {
+        md: string[];
+        lg: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+type ButtonVariants = VariantProps<typeof buttonStyles>;
+type ButtonIntent = "primary" | "secondary" | "tertiary";
+type ButtonSize = "md" | "lg";
+type BaseButtonProps = ButtonVariants & {
+    intent: ButtonIntent;
+    size: ButtonSize;
+    onClick: () => void;
+    className?: string;
+    children?: React.ReactElement<IconBaseProps>;
+};
+type ButtonWithLabel = BaseButtonProps & {
+    label: string;
+    ariaLabel?: string;
+};
+type ButtonIconOnly = BaseButtonProps & {
+    label?: undefined;
+    ariaLabel: string;
+};
+type ButtonProps = ButtonWithLabel | ButtonIconOnly;
+export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/button/Button.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { twMerge } from "tailwind-merge";
+import { tv } from "tailwind-variants";
+import { Label } from "../typography/Label";
+const buttonStyles = tv({
+    base: [
+        "flex",
+        "gap-2",
+        "text-white",
+        "rounded-lg",
+        "hover:ring-3",
+        "hover:ring-solid",
+        "active:ring-4",
+        "transition",
+        "duration-350",
+        "active:duration-300",
+        "ease-in-out",
+    ],
+    variants: {
+        intent: {
+            primary: [
+                "bg-slate-600",
+                "hover:bg-slate-700",
+                "hover:ring-slate-100",
+                "active:ring-violet-200",
+            ],
+            secondary: [
+                "bg-violet-600",
+                "hover:bg-violet-700",
+                "hover:ring-violet-100",
+                "active:ring-violet-200",
+            ],
+            tertiary: [
+                "bg-linear-to-r",
+                "from-pink-500",
+                "from-0%",
+                "to-100%",
+                "to-violet-600",
+                "hover:to-80%",
+                "hover:ring-violet-100",
+                "active:to-70%",
+                "active:ring-violet-200",
+            ],
+        },
+        size: {
+            md: ["pt-3", "pb-3", "pl-3", "pr-3"],
+            lg: ["pt-4", "pb-4", "pl-6", "pr-6"],
+        },
+    },
+});
+export const Button = (props) => {
+    const { label, ariaLabel, children, ...rest } = props;
+    // Set aria-label when no visible label exists
+    const finalAriaLabel = label ? undefined : ariaLabel;
+    return (_jsxs("button", { ...rest, className: twMerge(props.className, buttonStyles(props)), onClick: props.onClick, "aria-label": finalAriaLabel, children: [_jsx(Label, { as: "span", size: "md", children: label }), children] }));
+};

package/dist/components/button/Button.test.d.ts

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

package/dist/components/button/Button.test.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { Mumble } from "../icons/generated";
+import { Button } from "./Button";
+describe("Button", () => {
+    test("should render button with icon", async () => {
+        // Arrange
+        render(_jsx(Button, { intent: "primary", size: "md", label: "button", onClick: vi.fn(), children: _jsx(Mumble, {}) }));
+        // Assert
+        expect(screen.getByRole("button")).toBeVisible();
+        expect(screen.getByRole("button")).toHaveTextContent("button");
+        expect(screen.getByText("Mumble")).toBeVisible();
+    });
+    test("should render button without icon", async () => {
+        // Arrange
+        render(_jsx(Button, { intent: "primary", size: "md", label: "button", onClick: vi.fn() }));
+        // Assert
+        expect(screen.getByRole("button")).toBeVisible();
+        expect(screen.getByRole("button")).toHaveTextContent("button");
+        expect(screen.queryByText("Mumble")).not.toBeInTheDocument();
+    });
+    test("should call onClick when clicked", () => {
+        // Arrange
+        const onClick = vi.fn();
+        render(_jsx(Button, { intent: "primary", size: "md", label: "button", onClick: onClick, children: _jsx(Mumble, {}) }));
+        fireEvent.click(screen.getByRole("button"));
+        expect(onClick).toHaveBeenCalled();
+    });
+});

package/dist/components/color/ColorDoc.d.ts

@@ -0,0 +1,4 @@
+export declare const ColorDoc: ({ colorName, colorIntensity, }: {
+    colorName: string;
+    colorIntensity: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/color/ColorDoc.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ColorDoc = ({ colorName, colorIntensity, }) => {
+    return (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: `flex h-31.25 w-31.25 items-center justify-center rounded-lg bg-${getCssVariableSuffix(colorName, colorIntensity)}`, children: _jsx("span", { className: "rounded-lg bg-white p-1", children: `${getCssVariableSuffix(colorName, colorIntensity)}` }) }), _jsxs("div", { className: "flex flex-col items-center", children: [_jsx("span", { children: `--color-${getCssVariableSuffix(colorName, colorIntensity)}` }), _jsx("span", { children: `.text-${getCssVariableSuffix(colorName, colorIntensity)}` }), _jsx("span", { children: `.bg-${getCssVariableSuffix(colorName, colorIntensity)}` })] })] }));
+};
+const getCssVariableSuffix = (colorName, colorIntensity) => {
+    if (colorIntensity == null) {
+        return colorName;
+    }
+    return `${colorName}-${colorIntensity}`;
+};

package/dist/components/file-upload/FileUpload.d.ts

@@ -0,0 +1,83 @@
+import { type VariantProps } from "tailwind-variants";
+declare const fileUploadStyles: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            input?: import("tailwind-merge").ClassNameValue;
+            action?: import("tailwind-merge").ClassNameValue;
+            dropzone?: import("tailwind-merge").ClassNameValue;
+            uploadIcon?: import("tailwind-merge").ClassNameValue;
+            titleText?: import("tailwind-merge").ClassNameValue;
+            subtitleText?: import("tailwind-merge").ClassNameValue;
+            preview?: import("tailwind-merge").ClassNameValue;
+            previewLabel?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            input?: import("tailwind-merge").ClassNameValue;
+            action?: import("tailwind-merge").ClassNameValue;
+            dropzone?: import("tailwind-merge").ClassNameValue;
+            uploadIcon?: import("tailwind-merge").ClassNameValue;
+            titleText?: import("tailwind-merge").ClassNameValue;
+            subtitleText?: import("tailwind-merge").ClassNameValue;
+            preview?: import("tailwind-merge").ClassNameValue;
+            previewLabel?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    dropzone: string[];
+    uploadIcon: string[];
+    titleText: string[];
+    subtitleText: string[];
+    action: string[];
+    input: string[];
+    preview: string[];
+    previewLabel: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            input?: import("tailwind-merge").ClassNameValue;
+            action?: import("tailwind-merge").ClassNameValue;
+            dropzone?: import("tailwind-merge").ClassNameValue;
+            uploadIcon?: import("tailwind-merge").ClassNameValue;
+            titleText?: import("tailwind-merge").ClassNameValue;
+            subtitleText?: import("tailwind-merge").ClassNameValue;
+            preview?: import("tailwind-merge").ClassNameValue;
+            previewLabel?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    dropzone: string[];
+    uploadIcon: string[];
+    titleText: string[];
+    subtitleText: string[];
+    action: string[];
+    input: string[];
+    preview: string[];
+    previewLabel: string[];
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string[];
+    dropzone: string[];
+    uploadIcon: string[];
+    titleText: string[];
+    subtitleText: string[];
+    action: string[];
+    input: string[];
+    preview: string[];
+    previewLabel: string[];
+}, undefined, unknown, unknown, undefined>>;
+type FileUploadVariants = VariantProps<typeof fileUploadStyles>;
+interface FileUploadProps extends FileUploadVariants {
+    title?: string;
+    subtitle?: string;
+    actionLabel?: string;
+    onFileSelect: (file: File | null) => void;
+}
+export declare const FileUpload: ({ title, subtitle, actionLabel, ...props }: FileUploadProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/file-upload/FileUpload.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { tv } from "tailwind-variants";
+import { Button } from "../button/Button";
+import { Cancel, Upload } from "../icons/generated";
+import { Label } from "../typography/Label";
+import { Paragraph } from "../typography/Paragraph";
+const fileUploadStyles = tv({
+    slots: {
+        base: ["flex", "flex-col", "items-center", "gap-4"],
+        dropzone: [
+            "flex",
+            "w-full",
+            "cursor-pointer",
+            "flex-col",
+            "items-center",
+            "justify-center",
+            "gap-2",
+            "rounded-xl",
+            "border-2",
+            "border-dashed",
+            "border-slate-200",
+            "pt-12",
+            "pr-4",
+            "pb-12",
+            "pl-4",
+        ],
+        uploadIcon: ["h-8", "w-8", "text-slate-500"],
+        titleText: ["text-slate-500"],
+        subtitleText: ["text-slate-500"],
+        action: [
+            "flex",
+            "w-full",
+            "items-center",
+            "justify-center",
+            "bg-slate-300",
+            "text-slate-600",
+            "hover:bg-slate-300",
+        ],
+        input: ["hidden"],
+        preview: ["flex", "items-center", "gap-2"],
+        previewLabel: ["truncate"],
+    },
+});
+export const FileUpload = ({ title = "Drag & Drop your File", subtitle = "JPEG or PNG, max. 50 MB", actionLabel = ".. or select your File", ...props }) => {
+    const { base, dropzone, titleText, subtitleText, uploadIcon, action, input, preview, previewLabel, } = fileUploadStyles(props);
+    const [file, setFile] = useState(null);
+    const handleFileChange = (e) => {
+        const selected = e.target.files?.[0] || null;
+        if (selected) {
+            setFile(selected);
+            props.onFileSelect(selected);
+        }
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        if (e.dataTransfer.files?.[0]) {
+            setFile(e.dataTransfer.files[0]);
+        }
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+    };
+    return (_jsxs("div", { className: base(props), children: [_jsxs("div", { role: "region", "aria-label": "File upload dropzone", className: dropzone(props), onDrop: handleDrop, onDragOver: handleDragOver, onClick: () => document.getElementById("fileInput")?.click(), onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        document.getElementById("fileInput")?.click();
+                    }
+                }, children: [_jsx(Upload, { className: uploadIcon(props) }), _jsx(Label, { size: "xl", className: titleText(props), children: title }), _jsx(Paragraph, { size: "md", className: subtitleText(props), children: subtitle })] }), _jsx(Button, { className: action(props), intent: "primary", size: "md", label: actionLabel, onClick: () => document.getElementById("fileInput")?.click(), children: _jsx(Upload, {}) }), _jsx("input", { id: "fileInput", "aria-label": title, type: "file", accept: ".jpg,.png", className: input(props), onChange: handleFileChange }), file && (_jsxs("div", { className: preview(props), children: [_jsx(Label, { size: "md", className: previewLabel(props), children: file.name }), _jsx(Cancel, { onClick: () => setFile(null) })] }))] }));
+};

package/dist/components/form/Form.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+import { type VariantProps } from "tailwind-variants";
+declare const formStyles: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            fields?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            fields?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    fields: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            base?: import("tailwind-merge").ClassNameValue;
+            fields?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    fields: string[];
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string[];
+    fields: string[];
+}, undefined, unknown, unknown, undefined>>;
+type FormVariants = VariantProps<typeof formStyles>;
+interface FormProps extends FormVariants {
+    children?: React.ReactNode;
+}
+export declare const Form: React.FC<FormProps> & {
+    Fields: typeof FormFields;
+    Action: typeof FormAction;
+};
+export declare function FormFields({ children }: {
+    children: React.ReactNode;
+}): React.ReactNode;
+export declare namespace FormFields {
+    var displayName: string;
+}
+export declare function FormAction({ children }: {
+    children: React.ReactElement;
+}): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare namespace FormAction {
+    var displayName: string;
+}
+export {};

package/dist/components/form/Form.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixForm from "@radix-ui/react-form";
+import React from "react";
+import { tv } from "tailwind-variants";
+const formStyles = tv({
+    slots: {
+        base: ["gap-16", "flex", "flex-col"],
+        fields: ["gap-4", "flex", "flex-col"],
+    },
+});
+export const Form = (props) => {
+    const { base, fields } = formStyles(props);
+    let fieldElements = null;
+    let actionElement = null;
+    React.Children.forEach(props.children, (child) => {
+        if (!React.isValidElement(child))
+            return;
+        switch (child.type) {
+            case FormFields:
+                fieldElements = child;
+                break;
+            case FormAction:
+                actionElement = child;
+                break;
+        }
+    });
+    return (_jsxs(RadixForm.Root, { className: base(), children: [_jsx("div", { className: fields(), children: fieldElements }), _jsx(RadixForm.Submit, { asChild: true, children: actionElement })] }));
+};
+FormFields.displayName = "FormField";
+export function FormFields({ children }) {
+    return children;
+}
+FormAction.displayName = "ModalActions";
+export function FormAction({ children }) {
+    return children;
+}
+Form.Fields = FormFields;
+Form.Action = FormAction;

package/dist/components/icon-button/IconButton.d.ts

@@ -0,0 +1,50 @@
+import React from "react";
+import { type VariantProps } from "tailwind-variants";
+import type { IconBaseProps } from "../icons/IconBase";
+declare const iconButtonStyles: import("tailwind-variants").TVReturnType<{
+    intent: {
+        primary: {
+            base: string[];
+        };
+        secondary: {
+            base: string[];
+        };
+    };
+}, {
+    base: string[];
+    icon: string[];
+}, undefined, {
+    intent: {
+        primary: {
+            base: string[];
+        };
+        secondary: {
+            base: string[];
+        };
+    };
+}, {
+    base: string[];
+    icon: string[];
+}, import("tailwind-variants").TVReturnType<{
+    intent: {
+        primary: {
+            base: string[];
+        };
+        secondary: {
+            base: string[];
+        };
+    };
+}, {
+    base: string[];
+    icon: string[];
+}, undefined, unknown, unknown, undefined>>;
+type IconButtonVariants = VariantProps<typeof iconButtonStyles>;
+type IconButtonIntent = "primary" | "secondary";
+interface IconButtonProps extends IconButtonVariants {
+    label: string;
+    intent: IconButtonIntent;
+    onClick: () => void;
+    children: React.ReactElement<IconBaseProps>;
+}
+export declare const IconButton: (props: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/icon-button/IconButton.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { tv } from "tailwind-variants";
+import { Label } from "../typography/Label";
+const iconButtonStyles = tv({
+    slots: {
+        base: ["flex", "gap-1", "transition", "duration-350", "ease-in-out"],
+        icon: ["w-3", "h-3"],
+    },
+    variants: {
+        intent: {
+            primary: { base: ["text-slate-500", "hover:text-slate-600"] },
+            secondary: { base: ["text-violet-600", "hover:text-violet-900"] },
+        },
+    },
+});
+export const IconButton = (props) => {
+    const { base, icon } = iconButtonStyles();
+    return (_jsxs("button", { className: base(props), onClick: props.onClick, "aria-label": props.label, children: [React.cloneElement(props.children, {
+                className: `${icon(props)}`,
+            }), _jsx(Label, { as: "span", size: "sm", children: props.label })] }));
+};

package/dist/components/icon-button/IconButton.test.d.ts

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

package/dist/components/icon-button/IconButton.test.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { Profile } from "../icons/generated";
+import { IconButton } from "./IconButton";
+describe("IconButton", () => {
+    test("should render icon-button with icon", async () => {
+        // Arrange
+        render(_jsx(IconButton, { intent: "primary", label: "button", onClick: vi.fn(), children: _jsx(Profile, {}) }));
+        // Assert
+        expect(screen.getByRole("button")).toBeVisible();
+        expect(screen.getByRole("button")).toHaveTextContent("button");
+        expect(screen.getByText("Profile")).toBeVisible();
+    });
+    test("should call onClick when clicked", () => {
+        // Arrange
+        const onClick = vi.fn();
+        render(_jsx(IconButton, { intent: "primary", label: "button", onClick: onClick, children: _jsx(Profile, {}) }));
+        fireEvent.click(screen.getByRole("button"));
+        expect(onClick).toHaveBeenCalled();
+    });
+});

package/dist/components/icons/IconBase.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+export type IconBaseProps = React.SVGProps<SVGSVGElement> & {
+    label?: string;
+};
+export declare const IconBase: React.FC<IconBaseProps>;

package/dist/components/icons/IconBase.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// src/components/icons/IconBase.tsx
+import { AccessibleIcon } from "@radix-ui/react-accessible-icon";
+import * as React from "react";
+import { tv } from "tailwind-variants";
+const iconStyles = tv({
+    base: ["w-4", "h-4"],
+});
+export const IconBase = ({ label = "", children, ...props }) => (_jsx(AccessibleIcon, { label: label, children: _jsx("svg", { className: iconStyles(), fill: "currentColor", viewBox: props.viewBox || "0 0 16 16", ...props, children: children }) }));

package/dist/components/icons/generated/ArrowDown.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const ArrowDown: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/ArrowDown.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const ArrowDown = (props) => (_jsxs(IconBase, { label: "ArrowDown", ...props, children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { fill: "currentColor", d: "M12 9H9V1a1 1 0 0 0-2 0v8H4a1 1 0 0 0-.78 1.625l4 5a1 1 0 0 0 1.561 0l4-5A1 1 0 0 0 12.001 9" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h16v16H0z" }) }) })] }));

package/dist/components/icons/generated/ArrowLeft.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const ArrowLeft: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/ArrowLeft.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const ArrowLeft = (props) => (_jsxs(IconBase, { label: "ArrowLeft", ...props, children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { fill: "currentColor", d: "M15 7H7V4a1 1 0 0 0-1.625-.781l-5 4a1 1 0 0 0 0 1.562l5 4A1 1 0 0 0 7 12V9h8a1 1 0 0 0 0-2" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h16v16H0z" }) }) })] }));

package/dist/components/icons/generated/ArrowRight.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const ArrowRight: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/ArrowRight.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const ArrowRight = (props) => (_jsxs(IconBase, { label: "ArrowRight", ...props, children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { fill: "currentColor", d: "M10.625 3.219A1 1 0 0 0 9 3.999v3H1a1 1 0 1 0 0 2h8v3a1 1 0 0 0 1.625.782l5-4a1 1 0 0 0 0-1.562z" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h16v16H0z" }) }) })] }));

package/dist/components/icons/generated/ArrowUp.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const ArrowUp: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/ArrowUp.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const ArrowUp = (props) => (_jsxs(IconBase, { label: "ArrowUp", ...props, children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { fill: "currentColor", d: "M8.781.375a1.036 1.036 0 0 0-1.562 0l-4 5A1 1 0 0 0 4 7h3v8a1 1 0 1 0 2 0V7h3a1 1 0 0 0 .781-1.625z" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h16v16H0z" }) }) })] }));

package/dist/components/icons/generated/Calendar.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const Calendar: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/Calendar.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const Calendar = (props) => (_jsxs(IconBase, { label: "Calendar", ...props, children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { fill: "currentColor", d: "M14 3h-1V1a1 1 0 0 0-2 0v2H5V1a1 1 0 0 0-2 0v2H2a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2M2 14V7h12v7z" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h16v16H0z" }) }) })] }));

package/dist/components/icons/generated/Cancel.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const Cancel: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/Cancel.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const Cancel = (props) => (_jsx(IconBase, { label: "Cancel", ...props, children: _jsx("path", { fill: "currentColor", d: "M12.558 1.258a.5.5 0 0 0-.711.004L8 5.2 4.154 1.262a.5.5 0 0 0-.712-.004L1.258 3.442a.5.5 0 0 0 .004.712L5.2 8l-3.938 3.847a.5.5 0 0 0-.004.71l2.184 2.185a.5.5 0 0 0 .712-.004L8 10.8l3.847 3.938a.5.5 0 0 0 .71.004l2.185-2.184a.5.5 0 0 0-.004-.711L10.8 8l3.938-3.846a.5.5 0 0 0 .004-.712z" }) }));

package/dist/components/icons/generated/Checkmark.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const Checkmark: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/Checkmark.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const Checkmark = (props) => (_jsx(IconBase, { label: "Checkmark", ...props, children: _jsx("path", { fill: "currentColor", d: "M5.6 9.6 2.753 6.754a.5.5 0 0 0-.707 0L.353 8.446a.5.5 0 0 0 0 .708l4.893 4.893a.5.5 0 0 0 .707 0l9.693-9.693a.5.5 0 0 0 0-.708l-1.693-1.692a.5.5 0 0 0-.707 0z" }) }));

package/dist/components/icons/generated/Edit.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const Edit: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/Edit.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const Edit = (props) => (_jsxs(IconBase, { label: "Edit", ...props, children: [_jsx("g", { fill: "currentColor", clipPath: "url(#a)", children: _jsx("path", { d: "M8.1 3.5.3 11.3c-.2.2-.3.4-.3.7v3c0 .6.4 1 1 1h3c.3 0 .5-.1.7-.3l7.8-7.8zm7.6-.2-3-3c-.4-.4-1-.4-1.4 0L9.5 2.1l4.4 4.4 1.8-1.8c.4-.4.4-1 0-1.4" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h16v16H0z" }) }) })] }));

package/dist/components/icons/generated/Eye.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const Eye: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/Eye.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const Eye = (props) => (_jsxs(IconBase, { label: "Eye", ...props, children: [_jsx("path", { fill: "currentColor", d: "M8 14c4.707 0 7.744-5.284 7.871-5.508a1 1 0 0 0 .001-.98C15.746 7.287 12.732 2 8 2 3.245 2 .251 7.289.126 7.514a1 1 0 0 0 .002.975C.254 8.713 3.27 14 8 14M8 4c2.84 0 5.036 2.835 5.818 4-.784 1.166-2.98 4-5.818 4-2.84 0-5.038-2.838-5.819-4.001C2.958 6.835 5.146 4 8.001 4" }), _jsx("path", { fill: "currentColor", d: "M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4" })] }));

package/dist/components/icons/generated/Fullscreen.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const Fullscreen: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;