@uxf/ui 1.0.0-beta.57 → 1.0.0-beta.58

package/textarea/index.js

@@ -1,8 +1,17 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Textarea = void 0;
-var textarea_1 = require("./textarea");
-Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return __importDefault(textarea_1).default; } });
+__exportStar(require("./textarea"), exports);

package/textarea/textarea.d.ts

@@ -14,5 +14,4 @@ export interface TextareaProps extends FormControlProps<string, HTMLTextAreaElem
     placeholder?: string;
     rows?: number;
 }
-declare const _default: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
-export default _default;
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/textarea/textarea.js

@@ -23,13 +23,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Textarea = void 0;
 const classes_1 = require("@uxf/core/constants/classes");
+const useLatest_1 = require("@uxf/core/hooks/useLatest");
 const composeRefs_1 = require("@uxf/core/utils/composeRefs");
 const cx_1 = require("@uxf/core/utils/cx");
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
 const react_1 = __importStar(require("react"));
 const form_control_1 = require("../form-control");
-const use_latest_1 = require("../hooks/use-latest");
-const forward_ref_1 = require("../utils/forward-ref");
 function autoHeightHandler(element, rows = 4) {
     element.style.height = "auto";
     if (rows > 1) {
@@ -41,14 +42,14 @@ function autoHeightHandler(element, rows = 4) {
     }
 }
 const EVENTS = ["input", "cut", "paste", "drop"];
-function Textarea(props, ref) {
+exports.Textarea = (0, forwardRef_1.forwardRef)("Textarea", (props, ref) => {
     var _a;
     const innerRef = (0, react_1.useRef)(null);
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const generatedId = (0, react_1.useId)();
     const id = (_a = props.id) !== null && _a !== void 0 ? _a : generatedId;
     const errorId = props.isInvalid ? `${id}--error-message` : undefined;
-    const rootClassName = (0, cx_1.cx)("uxf-textarea", isFocused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED);
+    const rootClassName = (0, cx_1.cx)("uxf-textarea", isFocused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isRequired && classes_1.CLASSES.IS_REQUIRED, props.isReadOnly && classes_1.CLASSES.IS_READONLY);
     const onFocus = (e) => {
         var _a;
         setIsFocused(true);
@@ -59,7 +60,7 @@ function Textarea(props, ref) {
         setIsFocused(false);
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     };
-    const latestRows = (0, use_latest_1.useLatest)(props.rows);
+    const latestRows = (0, useLatest_1.useLatest)(props.rows);
     (0, react_1.useEffect)(() => {
         const node = innerRef.current;
         if (!node || props.disableAutoHeight) {
@@ -75,7 +76,6 @@ function Textarea(props, ref) {
         };
     }, [props.disableAutoHeight, latestRows]);
     return (react_1.default.createElement(form_control_1.FormControl, { className: rootClassName, errorId: errorId, form: props.form, helperText: props.helperText, inputId: id, isRequired: props.isRequired, label: props.label },
-        react_1.default.createElement("div", { className: (0, cx_1.cx)("uxf-textarea__wrapper", isFocused && classes_1.CLASSES.IS_FOCUSED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, props.isInvalid && classes_1.CLASSES.IS_INVALID, props.isReadOnly && classes_1.CLASSES.IS_READONLY), onClick: () => { var _a; return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } },
+        react_1.default.createElement("div", { className: "uxf-textarea__wrapper", onClick: () => { var _a; return (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); } },
             react_1.default.createElement("textarea", { "aria-describedby": errorId, "aria-invalid": props.isInvalid, autoComplete: props.autoComplete, className: "uxf-textarea__element", disabled: props.isDisabled, form: props.form, id: id, maxLength: props.maxLength, minLength: props.minLength, name: props.name, onBlur: onBlur, onChange: (event) => { var _a; return (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, event.target.value, event); }, onFocus: onFocus, placeholder: props.placeholder, readOnly: props.isReadOnly, ref: (0, composeRefs_1.composeRefs)(innerRef, ref), required: props.isRequired, value: props.value }))));
-}
-exports.default = (0, forward_ref_1.forwardRef)("Textarea", Textarea);
+});

package/textarea/textarea.stories.js

@@ -1,32 +1,44 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = void 0;
 const index_1 = require("./index");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 exports.default = {
     title: "UI/Textarea",
     component: index_1.Textarea,
 };
 function Default() {
-    return (react_1.default.createElement("div", { className: "space-y-2" },
-        react_1.default.createElement(index_1.Textarea, { id: "textarea", label: "Textarea", onChange: () => {
-                // eslint-disable-next-line no-console
-                console.log("textarea onChange");
-            }, placeholder: "Placeholder text...." }),
-        react_1.default.createElement(index_1.Textarea, { id: "textarea-readonly", label: "Readonly", isReadOnly: true, onChange: () => {
-                // eslint-disable-next-line no-console
-                console.log("textarea OnChange");
-            } }),
-        react_1.default.createElement(index_1.Textarea, { isDisabled: true, id: "textarea-disabled", label: "Textarea disabled", onChange: () => {
-                // eslint-disable-next-line no-console
-                console.log("textarea OnChange");
-            } }),
-        react_1.default.createElement(index_1.Textarea, { rows: 10, id: "textarea-rows10", label: "Textarea rows = 10", placeholder: "Placeholder text....", onChange: () => {
-                // eslint-disable-next-line no-console
-                console.log("textarea OnChange");
-            } })));
+    const [value, onChange] = (0, react_1.useState)("test");
+    const storyTextAreas = (react_1.default.createElement("div", { className: "space-y-2" },
+        react_1.default.createElement(index_1.Textarea, { id: "textarea", label: "Textarea", onChange: onChange, placeholder: "Placeholder text....", value: value }),
+        react_1.default.createElement(index_1.Textarea, { id: "textarea-readonly", label: "Readonly", isReadOnly: true, onChange: onChange, value: value }),
+        react_1.default.createElement(index_1.Textarea, { isDisabled: true, id: "textarea-disabled", label: "Textarea disabled", onChange: onChange, value: value }),
+        react_1.default.createElement(index_1.Textarea, { id: "textarea-rows10", isInvalid: true, label: "Textarea rows = 10, invalid", placeholder: "Placeholder text....", rows: 10, onChange: onChange, value: value })));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "light space-y-2 p-20" }, storyTextAreas),
+        react_1.default.createElement("div", { className: "dark space-y-2 bg-gray-900 p-20" }, storyTextAreas)));
 }
 exports.Default = Default;

package/toggle/index.d.ts

@@ -1 +1 @@
-export { default as Toggle } from "./toggle";
+export * from "./toggle";

package/toggle/index.js

@@ -1,8 +1,17 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Toggle = void 0;
-var toggle_1 = require("./toggle");
-Object.defineProperty(exports, "Toggle", { enumerable: true, get: function () { return __importDefault(toggle_1).default; } });
+__exportStar(require("./toggle"), exports);

package/toggle/toggle.d.ts

@@ -1,9 +1,8 @@
-import { CSSProperties } from "react";
+import React, { CSSProperties } from "react";
 import { FormControlProps } from "../types";
 export interface ToggleProps extends FormControlProps<boolean> {
     className?: string;
     label: string;
     style?: Partial<CSSProperties>;
 }
-declare function Toggle(props: ToggleProps): JSX.Element;
-export default Toggle;
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;

package/toggle/toggle.js

@@ -3,13 +3,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = void 0;
 const react_1 = require("@headlessui/react");
-const react_2 = __importDefault(require("react"));
-const cx_1 = require("@uxf/core/utils/cx");
 const classes_1 = require("@uxf/core/constants/classes");
-function Toggle(props) {
-    return (react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)(props.value && classes_1.CLASSES.IS_SELECTED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, "uxf-toggle", props.className), disabled: props.isDisabled, onChange: props.onChange, style: props.style },
+const cx_1 = require("@uxf/core/utils/cx");
+const forwardRef_1 = require("@uxf/core/utils/forwardRef");
+const react_2 = __importDefault(require("react"));
+exports.Toggle = (0, forwardRef_1.forwardRef)("Toggle", (props, ref) => {
+    return (react_2.default.createElement(react_1.Switch, { checked: props.value, className: (0, cx_1.cx)(props.value && classes_1.CLASSES.IS_SELECTED, props.isDisabled && classes_1.CLASSES.IS_DISABLED, "uxf-toggle", props.className), disabled: props.isDisabled, onChange: props.onChange, style: props.style, ref: ref },
         react_2.default.createElement("span", { className: "uxf-toggle__label" }, props.label),
         react_2.default.createElement("span", { className: "uxf-toggle__inner" })));
-}
-exports.default = Toggle;
+});

package/toggle/toggle.stories.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
-import { Toggle } from "./index";
+import React from "react";
 declare const _default: {
     title: string;
-    component: typeof Toggle;
+    component: React.ForwardRefExoticComponent<import("./toggle").ToggleProps & React.RefAttributes<HTMLButtonElement>>;
 };
 export default _default;
 export declare function Default(): JSX.Element;

package/utils/icons-config.js

@@ -0,0 +1,43 @@
+/** @type {import('@uxf/icons-generator/types').Config['icons']} */
+module.exports = {
+    camera: {
+        width: 512,
+        height: 512,
+        data: `<path d="M144 288C144 226.1 194.1 176 256 176C317.9 176 368 226.1 368 288C368 349.9 317.9 400 256 400C194.1 400 144 349.9 144 288zM256 224C220.7 224 192 252.7 192 288C192 323.3 220.7 352 256 352C291.3 352 320 323.3 320 288C320 252.7 291.3 224 256 224zM362.9 64.82L373.3 96H448C483.3 96 512 124.7 512 160V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V160C0 124.7 28.65 96 64 96H138.7L149.1 64.82C155.6 45.22 173.9 32 194.6 32H317.4C338.1 32 356.4 45.22 362.9 64.82H362.9zM64 144C55.16 144 48 151.2 48 160V416C48 424.8 55.16 432 64 432H448C456.8 432 464 424.8 464 416V160C464 151.2 456.8 144 448 144H338.7L317.4 80H194.6L173.3 144H64z" fill="currentColor"/>`,
+    },
+    caretDown: {
+        width: 320,
+        height: 512,
+        data: `<path d="M137.4 374.6a32.05 32.05 0 0 0 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9S301 191.9 288 191.9L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z" fill="currentColor"/>`,
+    },
+    check: {
+        width: 512,
+        height: 512,
+        data: `<path d="M470.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 338.7 425.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" fill="currentColor"/>`,
+    },
+    chevronDown: {
+        width: 512,
+        height: 512,
+        data: `<path d="M256 429.3l22.6-22.6 192-192L493.3 192 448 146.7l-22.6 22.6L256 338.7 86.6 169.4 64 146.7 18.7 192l22.6 22.6 192 192L256 429.3z" fill="currentColor"/>`,
+    },
+    chevronLeft: {
+        width: 384,
+        height: 512,
+        data: `<path d="M41.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.3 256 278.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z" fill="currentColor"/>`,
+    },
+    chevronRight: {
+        width: 384,
+        height: 512,
+        data: `<path d="M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z" fill="currentColor"/>`,
+    },
+    chevronUp: {
+        width: 512,
+        height: 512,
+        data: `<path d="M256 82.7l22.6 22.6 192 192L493.3 320 448 365.3l-22.6-22.6L256 173.3 86.6 342.6 64 365.3 18.7 320l22.6-22.6 192-192L256 82.7z" fill="currentColor"/>`,
+    },
+    xmarkLarge: {
+        width: 448,
+        height: 512,
+        data: `<path d="M393.4 41.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L269.3 256l169.3 169.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 301.3 54.6 470.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L178.7 256 9.4 86.6c-12.5-12.5-12.5-32.7 0-45.2s32.8-12.5 45.3 0L224 210.7 393.4 41.4z" fill="currentColor"/>`,
+    },
+};

package/utils/storybook-config.js

@@ -29,7 +29,7 @@ exports.defaultConfig = {
     Button: {
         sizes: ["xs", "sm", "default", "lg", "xl"],
         colors: ["default", "white", "success", "warning", "error"],
-        variants: ["outlined", "default"],
+        variants: ["default", "outlined", "text"],
     },
     Input: {},
     Select: {},

package/utils/tailwind-config.js

@@ -0,0 +1,152 @@
+const plugin = require("tailwindcss/plugin");
+const { em } = require("@uxf/styles/units/em");
+const { rem } = require("@uxf/styles/units/rem");
+
+/** @type {Record<string, string>} */
+const CONTAINERS = {
+    xs: rem(540),
+    sm: rem(720),
+    md: rem(928),
+    lg: rem(1024),
+    xl: rem(1216),
+};
+
+/** @type {Record<string, string>} */
+const SCREENS = {
+    xs: em(576),
+    sm: em(768),
+    md: em(992),
+    lg: em(1200),
+    xl: em(1440),
+};
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [],
+    theme: {
+        containers: CONTAINERS,
+        screens: SCREENS,
+        extend: {
+            borderRadius: {
+                inherit: "inherit",
+            },
+            colors: {
+                inherit: "inherit",
+                primary: {
+                    50: "#eff6ff",
+                    100: "#dbeafe",
+                    200: "#bfdbfe",
+                    300: "#93c5fd",
+                    400: "#60a5fa",
+                    500: "#3b82f6",
+                    600: "#2563eb",
+                    700: "#1d4ed8",
+                    800: "#1e40af",
+                    900: "#1e3a8a",
+                },
+                success: {
+                    50: "#f0fdf4",
+                    100: "#dcfce7",
+                    200: "#bbf7d0",
+                    300: "#86efac",
+                    400: "#4ade80",
+                    500: "#22c55e",
+                    600: "#16a34a",
+                    700: "#15803d",
+                    800: "#166534",
+                    900: "#14532d",
+                },
+                warning: {
+                    50: "#fff7ed",
+                    100: "#ffedd5",
+                    200: "#fed7aa",
+                    300: "#fdba74",
+                    400: "#fb923c",
+                    500: "#f97316",
+                    600: "#ea580c",
+                    700: "#c2410c",
+                    800: "#9a3412",
+                    900: "#7c2d12",
+                },
+                error: {
+                    50: "#fef2f2",
+                    100: "#fee2e2",
+                    200: "#fecaca",
+                    300: "#fca5a5",
+                    400: "#f87171",
+                    500: "#ef4444",
+                    600: "#dc2626",
+                    700: "#b91c1c",
+                    800: "#991b1b",
+                    900: "#7f1d1d",
+                },
+            },
+            zIndex: {
+                1: "1",
+                focus: "5",
+                fixed: "10",
+                menu: "25",
+                header: "50",
+                modal: "100",
+                dropdown: "200",
+                flashMessage: "250",
+                tooltip: "300",
+            },
+        },
+    },
+    corePlugins: {
+        aspectRatio: false,
+        container: false,
+    },
+    plugins: [
+        require("@tailwindcss/aspect-ratio"),
+        require("@tailwindcss/line-clamp"),
+        plugin(
+            ({ addComponents, theme }) => {
+                const screens = theme("screens", SCREENS);
+                const containers = theme("containers", CONTAINERS);
+
+                const mqs = Object.entries(screens);
+                const widths = mqs
+                    .map((item) => {
+                        const key = item[0];
+                        const value = item[1];
+                        const width = containers[key];
+                        if (width) {
+                            return { [`@media (min-width: ${value})`]: { ".container": { "max-width": width } } };
+                        }
+                    })
+                    .filter((i) => i);
+
+                addComponents([
+                    {
+                        ".container": {
+                            "margin-left": "auto",
+                            "margin-right": "auto",
+                            width: "100%",
+                        },
+                    },
+                    ...widths,
+                ]);
+            },
+            {
+                content: [],
+                theme: {
+                    containers: CONTAINERS,
+                },
+            },
+        ),
+        plugin(({ addVariant }) => {
+            addVariant("is-active", "&.is-active");
+            addVariant("is-selected", "&.is-selected");
+            addVariant("is-hoverable", ["&.is-hoverable:active", "&.is-hoverable:hover"]);
+            addVariant("is-focused", "&.is-focused");
+            addVariant("is-required", ["&.is-required", "&:required"]);
+            addVariant("is-invalid", "&.is-invalid");
+            addVariant("is-loading", ["&.is-loading"]);
+            addVariant("is-readonly", ["&.is-readonly", "&:readonly"]);
+            addVariant("is-disabled", ["&.is-disabled", "&:disabled"]);
+            addVariant("is-empty", ["&.is-empty"]);
+        }),
+    ],
+};

package/hooks/use-latest.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare function useLatest<T>(current: T): import("react").MutableRefObject<T>;

package/hooks/use-latest.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLatest = void 0;
-const react_1 = require("react");
-function useLatest(current) {
-    const storedValue = (0, react_1.useRef)(current);
-    (0, react_1.useEffect)(() => {
-        storedValue.current = current;
-    });
-    return storedValue;
-}
-exports.useLatest = useLatest;

package/icon/camera-icon.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare function CameraIcon(props: any): JSX.Element;
-export default CameraIcon;

package/icon/camera-icon.js

@@ -1,11 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-function CameraIcon(props) {
-    return (react_1.default.createElement("svg", { viewBox: "0 0 512 512", ...props },
-        react_1.default.createElement("path", { fill: "currentColor", d: "M144 288C144 226.1 194.1 176 256 176C317.9 176 368 226.1 368 288C368 349.9 317.9 400 256 400C194.1 400 144 349.9 144 288zM256 224C220.7 224 192 252.7 192 288C192 323.3 220.7 352 256 352C291.3 352 320 323.3 320 288C320 252.7 291.3 224 256 224zM362.9 64.82L373.3 96H448C483.3 96 512 124.7 512 160V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V160C0 124.7 28.65 96 64 96H138.7L149.1 64.82C155.6 45.22 173.9 32 194.6 32H317.4C338.1 32 356.4 45.22 362.9 64.82H362.9zM64 144C55.16 144 48 151.2 48 160V416C48 424.8 55.16 432 64 432H448C456.8 432 464 424.8 464 416V160C464 151.2 456.8 144 448 144H338.7L317.4 80H194.6L173.3 144H64z" })));
-}
-exports.default = CameraIcon;

package/icon/chevron-down-icon.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare function ChevronDownIcon(props: any): JSX.Element;
-export default ChevronDownIcon;

package/icon/chevron-down-icon.js

@@ -1,11 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-function ChevronDownIcon(props) {
-    return (react_1.default.createElement("svg", { viewBox: "0 0 512 512", ...props },
-        react_1.default.createElement("path", { fill: "currentColor", d: "M256 429.3l22.6-22.6 192-192L493.3 192 448 146.7l-22.6 22.6L256 338.7 86.6 169.4 64 146.7 18.7 192l22.6 22.6 192 192L256 429.3z" })));
-}
-exports.default = ChevronDownIcon;

package/icon/chevron-up-icon.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare function ChevronUpIcon(props: any): JSX.Element;
-export default ChevronUpIcon;

package/icon/chevron-up-icon.js

@@ -1,11 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-function ChevronUpIcon(props) {
-    return (react_1.default.createElement("svg", { viewBox: "0 0 512 512", ...props },
-        react_1.default.createElement("path", { fill: "currentColor", d: "M256 82.7l22.6 22.6 192 192L493.3 320 448 365.3l-22.6-22.6L256 173.3 86.6 342.6 64 365.3 18.7 320l22.6-22.6 192-192L256 82.7z" })));
-}
-exports.default = ChevronUpIcon;

package/icon/pin-icon.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare function PinIcon(props: any): JSX.Element;
-export default PinIcon;

package/icon/pin-icon.js

@@ -1,11 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-function PinIcon(props) {
-    return (react_1.default.createElement("svg", { viewBox: "0 0 29.65 40", ...props },
-        react_1.default.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M0 14.83C0 6.61 6.61 0 14.83 0c8.11 0 14.83 6.61 14.83 14.83 0 8.64-8.85 19.41-14.83 25.17C8.75 34.24 0 23.47 0 14.83zm9.28 0c0-3.09 2.45-5.55 5.55-5.55 2.99 0 5.44 2.45 5.44 5.55 0 2.99-2.45 5.44-5.44 5.44-3.1 0-5.55-2.46-5.55-5.44z", clipRule: "evenodd" })));
-}
-exports.default = PinIcon;

package/image-gallery/components/icon-chevron-left.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare function IconChevronLeft(): JSX.Element;
-export default IconChevronLeft;

package/image-gallery/components/icon-chevron-left.js

@@ -1,11 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-function IconChevronLeft() {
-    return (react_1.default.createElement("svg", { className: "h-10 w-10 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 },
-        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" })));
-}
-exports.default = IconChevronLeft;

package/image-gallery/components/icon-chevron-right.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare function IconChevronRight(): JSX.Element;
-export default IconChevronRight;

package/image-gallery/components/icon-chevron-right.js

@@ -1,11 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-function IconChevronRight() {
-    return (react_1.default.createElement("svg", { className: "h-10 w-10 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 },
-        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })));
-}
-exports.default = IconChevronRight;

package/image-gallery/components/icon-close.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare function IconClose(): JSX.Element;
-export default IconClose;

package/image-gallery/components/icon-close.js

@@ -1,11 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-function IconClose() {
-    return (react_1.default.createElement("svg", { fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, className: "h-10 w-10 text-white" },
-        react_1.default.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })));
-}
-exports.default = IconClose;

package/utils/cx.d.ts

@@ -1,3 +0,0 @@
-export declare type ClassArray = ClassValue[];
-export declare type ClassValue = ClassArray | Record<string, any> | string | number | null | boolean | undefined;
-export declare function cx(...classes: ClassValue[]): string;

package/utils/cx.js

@@ -1,54 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cx = void 0;
-function toVal(mix) {
-    let k;
-    let y;
-    let str = "";
-    if (typeof mix === "string" || typeof mix === "number") {
-        str += mix;
-    }
-    else if (typeof mix === "object") {
-        if (Array.isArray(mix)) {
-            for (k = 0; k < mix.length; k++) {
-                if (mix[k]) {
-                    if ((y = toVal(mix[k]))) {
-                        if (str) {
-                            str += " ";
-                        }
-                        str += y;
-                    }
-                }
-            }
-        }
-        else {
-            for (k in mix) {
-                if (mix === null || mix === void 0 ? void 0 : mix[k]) {
-                    if (str) {
-                        str += " ";
-                    }
-                    str += k;
-                }
-            }
-        }
-    }
-    return str;
-}
-function cx(...classes) {
-    let i = 0;
-    let tmp;
-    let x;
-    let str = "";
-    while (i < classes.length) {
-        if ((tmp = classes[i++])) {
-            if ((x = toVal(tmp))) {
-                if (str) {
-                    str += " ";
-                }
-                str += x;
-            }
-        }
-    }
-    return str;
-}
-exports.cx = cx;