@once-ui-system/core 1.0.0

package/dist/components/LetterFx.js.map

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

package/dist/components/Line.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { Flex } from ".";
+interface LineProps extends React.ComponentProps<typeof Flex> {
+    vert?: boolean;
+    style?: React.CSSProperties;
+}
+declare const Line: React.ForwardRefExoticComponent<Omit<LineProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Line };
+//# sourceMappingURL=Line.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/Line.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAEzB,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC3D,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,IAAI,+FAiBR,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/Line.js

@@ -0,0 +1,25 @@
+"use strict";
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Line = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require(".");
+const Line = (0, react_1.forwardRef)((_a, ref) => {
+    var { vert, className, style } = _a, rest = __rest(_a, ["vert", "className", "style"]);
+    return ((0, jsx_runtime_1.jsx)(_1.Flex, Object.assign({ ref: ref, minWidth: (vert && "1") || undefined, minHeight: (!vert && "1") || undefined, width: (vert && "1") || undefined, height: (!vert && "1") || undefined, fillWidth: !vert, fillHeight: vert, background: "neutral-strong", direction: vert ? "column" : "row", className: className, style: style }, rest)));
+});
+exports.Line = Line;
+Line.displayName = "Line";
+//# sourceMappingURL=Line.js.map

package/dist/components/Line.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Line.js","sourceRoot":"","sources":["../../src/once-ui/components/Line.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;AAEb,iCAA0C;AAC1C,wBAAyB;AAOzB,MAAM,IAAI,GAAG,IAAA,kBAAU,EAA4B,CAAC,EAAmC,EAAE,GAAG,EAAE,EAAE;QAA5C,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,OAAW,EAAN,IAAI,cAAjC,8BAAmC,CAAF;IACnF,OAAO,CACL,uBAAC,OAAI,kBACH,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,IAAI,IAAI,GAAG,CAAC,IAAI,SAAS,EACpC,SAAS,EAAE,CAAC,CAAC,IAAI,IAAI,GAAG,CAAC,IAAI,SAAS,EACtC,KAAK,EAAE,CAAC,IAAI,IAAI,GAAG,CAAC,IAAI,SAAS,EACjC,MAAM,EAAE,CAAC,CAAC,IAAI,IAAI,GAAG,CAAC,IAAI,SAAS,EACnC,SAAS,EAAE,CAAC,IAAI,EAChB,UAAU,EAAE,IAAI,EAChB,UAAU,EAAC,gBAAgB,EAC3B,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,EAClC,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,IACR,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAGM,oBAAI;AADb,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/components/Logo.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface LogoProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    className?: string;
+    size?: "xs" | "s" | "m" | "l" | "xl";
+    style?: React.CSSProperties;
+    icon?: string;
+    wordmark?: string;
+    href?: string;
+}
+declare const Logo: React.FC<LogoProps>;
+export { Logo };
+//# sourceMappingURL=Logo.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/Logo.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAczC,UAAU,SAAU,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAiE7B,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/Logo.js

@@ -0,0 +1,53 @@
+"use strict";
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Logo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const link_1 = __importDefault(require("next/link"));
+const classnames_1 = __importDefault(require("classnames"));
+const _1 = require(".");
+const sizeMap = {
+    xs: "20",
+    s: "24",
+    m: "32",
+    l: "40",
+    xl: "48",
+};
+const Logo = (_a) => {
+    var { size = "m", href, icon, wordmark, className, style } = _a, props = __rest(_a, ["size", "href", "icon", "wordmark", "className", "style"]);
+    (0, react_1.useEffect)(() => {
+        if (!icon && !wordmark) {
+            console.warn("Both 'icon' and 'wordmark' props are set to false. The logo will not render any content.");
+        }
+    }, [icon, wordmark]);
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [icon && (
+            // @ts-ignore
+            (0, jsx_runtime_1.jsx)("img", { style: {
+                    height: `var(--static-space-${sizeMap[size]})`,
+                    width: "auto",
+                }, alt: "Trademark", src: icon })), wordmark && (
+            // @ts-ignore
+            (0, jsx_runtime_1.jsx)("img", { style: {
+                    height: `var(--static-space-${sizeMap[size]})`,
+                    width: "auto",
+                }, alt: "Trademark", src: wordmark }))] }));
+    return href ? ((0, jsx_runtime_1.jsx)(link_1.default, Object.assign({ className: (0, classnames_1.default)("radius-l", "display-flex", "fit-height", className), style: style, href: href, "aria-label": "Trademark" }, props, { children: content }))) : ((0, jsx_runtime_1.jsx)(_1.Flex, { className: (0, classnames_1.default)(className), radius: "l", fitHeight: true, style: style, "aria-label": "Trademark", children: content }));
+};
+exports.Logo = Logo;
+Logo.displayName = "Logo";
+//# sourceMappingURL=Logo.js.map

package/dist/components/Logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.js","sourceRoot":"","sources":["../../src/once-ui/components/Logo.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,iCAAyC;AACzC,qDAA6B;AAC7B,4DAAoC;AAEpC,wBAAyB;AAEzB,MAAM,OAAO,GAAiC;IAC5C,EAAE,EAAE,IAAI;IACR,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,CAAC,EAAE,IAAI;IACP,EAAE,EAAE,IAAI;CACT,CAAC;AAWF,MAAM,IAAI,GAAwB,CAAC,EAQlC,EAAE,EAAE;QAR8B,EACjC,IAAI,GAAG,GAAG,EACV,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,KAAK,OAEN,EADI,KAAK,cAPyB,0DAQlC,CADS;IAER,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACvB,OAAO,CAAC,IAAI,CACV,0FAA0F,CAC3F,CAAC;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAErB,MAAM,OAAO,GAAG,CACd,6DACG,IAAI,IAAI;YACP,aAAa;YACb,gCACE,KAAK,EAAE;oBACL,MAAM,EAAE,sBAAsB,OAAO,CAAC,IAAI,CAAC,GAAG;oBAC9C,KAAK,EAAE,MAAM;iBACd,EACD,GAAG,EAAC,WAAW,EACf,GAAG,EAAE,IAAI,GACT,CACH,EACA,QAAQ,IAAI;YACX,aAAa;YACb,gCACE,KAAK,EAAE;oBACL,MAAM,EAAE,sBAAsB,OAAO,CAAC,IAAI,CAAC,GAAG;oBAC9C,KAAK,EAAE,MAAM;iBACd,EACD,GAAG,EAAC,WAAW,EACf,GAAG,EAAE,QAAQ,GACb,CACH,IACA,CACJ,CAAC;IAEF,OAAO,IAAI,CAAC,CAAC,CAAC,CACZ,uBAAC,cAAI,kBACH,SAAS,EAAE,IAAA,oBAAU,EAAC,UAAU,EAAE,cAAc,EAAE,YAAY,EAAE,SAAS,CAAC,EAC1E,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,gBACC,WAAW,IAClB,KAAK,cAER,OAAO,IACH,CACR,CAAC,CAAC,CAAC,CACF,uBAAC,OAAI,IACH,SAAS,EAAE,IAAA,oBAAU,EAAC,SAAS,CAAC,EAChC,MAAM,EAAC,GAAG,EACV,SAAS,QACT,KAAK,EAAE,KAAK,gBACD,WAAW,YAErB,OAAO,GACH,CACR,CAAC;AACJ,CAAC,CAAC;AAGO,oBAAI;AADb,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/components/LogoCloud.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Grid, Logo } from ".";
+import type { ComponentProps } from "react";
+type LogoProps = ComponentProps<typeof Logo>;
+interface LogoCloudProps extends React.ComponentProps<typeof Grid> {
+    logos: LogoProps[];
+    className?: string;
+    style?: React.CSSProperties;
+    limit?: number;
+    rotationInterval?: number;
+}
+declare const LogoCloud: React.ForwardRefExoticComponent<Omit<LogoCloudProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { LogoCloud };
+//# sourceMappingURL=LogoCloud.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LogoCloud.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/LogoCloud.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAE/D,OAAO,EAAE,IAAI,EAAQ,IAAI,EAAE,MAAM,GAAG,CAAC;AAErC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,KAAK,SAAS,GAAG,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC;AAE7C,UAAU,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAChE,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAKD,QAAA,MAAM,SAAS,oGAwDd,CAAC;AAGF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/LogoCloud.js

@@ -0,0 +1,53 @@
+"use strict";
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LogoCloud = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const classnames_1 = __importDefault(require("classnames"));
+const _1 = require(".");
+const LogoCloud_module_scss_1 = __importDefault(require("./LogoCloud.module.scss"));
+const ANIMATION_DURATION = 5000;
+const STAGGER_DELAY = 25;
+const LogoCloud = (0, react_1.forwardRef)((_a, ref) => {
+    var { logos, className, style, limit = 6, rotationInterval = ANIMATION_DURATION } = _a, rest = __rest(_a, ["logos", "className", "style", "limit", "rotationInterval"]);
+    const [visibleLogos, setVisibleLogos] = (0, react_1.useState)(() => logos.slice(0, limit));
+    const [key, setKey] = (0, react_1.useState)(0);
+    const shouldRotate = logos.length > limit;
+    (0, react_1.useEffect)(() => {
+        if (!shouldRotate) {
+            setVisibleLogos(logos);
+            return;
+        }
+        const interval = setInterval(() => {
+            setVisibleLogos((currentLogos) => {
+                const currentIndices = currentLogos.map((logo) => logos.findIndex((l) => l === logo));
+                const nextIndices = currentIndices
+                    .map((index) => (index + 1) % logos.length)
+                    .sort((a, b) => a - b);
+                const nextLogos = nextIndices.map((index) => logos[index]);
+                setKey((k) => k + 1);
+                return nextLogos;
+            });
+        }, rotationInterval + STAGGER_DELAY * limit);
+        return () => clearInterval(interval);
+    }, [logos, limit, rotationInterval, shouldRotate]);
+    return ((0, jsx_runtime_1.jsx)(_1.Grid, Object.assign({ ref: ref, className: (0, classnames_1.default)(LogoCloud_module_scss_1.default.container, className), style: style }, rest, { children: visibleLogos.map((logo, index) => ((0, jsx_runtime_1.jsx)(_1.Flex, { vertical: "center", horizontal: "center", paddingX: "24", paddingY: "20", radius: "l", children: (0, jsx_runtime_1.jsx)(_1.Logo, Object.assign({ className: shouldRotate ? LogoCloud_module_scss_1.default.logo : LogoCloud_module_scss_1.default.staticLogo, style: Object.assign(Object.assign({}, logo.style), { animationDelay: `${index * STAGGER_DELAY}ms` }) }, logo)) }, `${key}-${index}`))) })));
+});
+exports.LogoCloud = LogoCloud;
+LogoCloud.displayName = "LogoCloud";
+//# sourceMappingURL=LogoCloud.js.map

package/dist/components/LogoCloud.js.map

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

package/dist/components/LogoCloud.module.scss

@@ -0,0 +1,42 @@
+.logo {
+    animation: fadeInOut 5s ease-out both;
+    will-change: opacity, filter, transform;
+    transform-origin: center;
+}
+
+.staticLogo {
+    animation: fadeIn 1s ease-out forwards;
+    will-change: opacity, filter, transform;
+    transform-origin: center;
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+        filter: blur(1.5rem);
+        transform: scale(0.2);
+    }
+    100% {
+        opacity: 1;
+        filter: blur(0);
+        transform: scale(1);
+    }
+}
+
+@keyframes fadeInOut {
+    0% {
+        opacity: 0;
+        filter: blur(1.5rem);
+        transform: scale(0.2);
+    }
+    4%, 96% {
+        opacity: 1;
+        filter: blur(0);
+        transform: scale(1);
+    }
+    100% {
+        opacity: 0;
+        filter: blur(1.5rem);
+        transform: scale(0.2);
+    }
+}

package/dist/components/Mask.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { Flex } from ".";
+export interface MaskProps extends Omit<React.ComponentProps<typeof Flex>, "radius" | "cursor"> {
+    cursor?: boolean;
+    x?: number;
+    y?: number;
+    radius?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+declare const Mask: React.ForwardRefExoticComponent<Omit<MaskProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Mask };
+//# sourceMappingURL=Mask.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Mask.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/Mask.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiE,MAAM,OAAO,CAAC;AACtF,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAIzB,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC7F,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,QAAA,MAAM,IAAI,+FAqGT,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/Mask.js

@@ -0,0 +1,98 @@
+"use strict";
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mask = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const _1 = require(".");
+const Mask_module_scss_1 = __importDefault(require("./Mask.module.scss"));
+const classnames_1 = __importDefault(require("classnames"));
+const Mask = (0, react_1.forwardRef)((_a, forwardedRef) => {
+    var { cursor = false, x, y, radius = 50, children, className, style } = _a, rest = __rest(_a, ["cursor", "x", "y", "radius", "children", "className", "style"]);
+    const [cursorPosition, setCursorPosition] = (0, react_1.useState)({ x: 0, y: 0 });
+    const [smoothPosition, setSmoothPosition] = (0, react_1.useState)({ x: 0, y: 0 });
+    const maskRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (forwardedRef) {
+            if (typeof forwardedRef === "function") {
+                forwardedRef(maskRef.current);
+            }
+            else if (forwardedRef && "current" in forwardedRef) {
+                forwardedRef.current = maskRef.current;
+            }
+        }
+    }, [forwardedRef]);
+    (0, react_1.useEffect)(() => {
+        if (!cursor)
+            return;
+        const handleMouseMove = (event) => {
+            if (maskRef.current) {
+                const rect = maskRef.current.getBoundingClientRect();
+                setCursorPosition({
+                    x: event.clientX - rect.left,
+                    y: event.clientY - rect.top,
+                });
+            }
+        };
+        document.addEventListener("mousemove", handleMouseMove);
+        return () => {
+            document.removeEventListener("mousemove", handleMouseMove);
+        };
+    }, [cursor]);
+    (0, react_1.useEffect)(() => {
+        if (!cursor)
+            return;
+        let animationFrameId;
+        const updateSmoothPosition = () => {
+            setSmoothPosition((prev) => {
+                const dx = cursorPosition.x - prev.x;
+                const dy = cursorPosition.y - prev.y;
+                const easingFactor = 0.05;
+                return {
+                    x: Math.round(prev.x + dx * easingFactor),
+                    y: Math.round(prev.y + dy * easingFactor),
+                };
+            });
+            animationFrameId = requestAnimationFrame(updateSmoothPosition);
+        };
+        animationFrameId = requestAnimationFrame(updateSmoothPosition);
+        return () => {
+            cancelAnimationFrame(animationFrameId);
+        };
+    }, [cursorPosition, cursor]);
+    const maskStyle = () => {
+        if (cursor) {
+            return {
+                "--mask-position-x": `${smoothPosition.x}px`,
+                "--mask-position-y": `${smoothPosition.y}px`,
+                "--mask-radius": `${radius}vh`,
+            };
+        }
+        if (x != null && y != null) {
+            return {
+                "--mask-position-x": `${x}%`,
+                "--mask-position-y": `${y}%`,
+                "--mask-radius": `${radius}vh`,
+            };
+        }
+        return {};
+    };
+    return ((0, jsx_runtime_1.jsx)(_1.Flex, Object.assign({ ref: maskRef, fill: true, className: (0, classnames_1.default)(Mask_module_scss_1.default.mask, className), top: "0", left: "0", zIndex: 0, overflow: "hidden", style: Object.assign(Object.assign({}, maskStyle()), style) }, rest, { children: children })));
+});
+exports.Mask = Mask;
+Mask.displayName = "Mask";
+//# sourceMappingURL=Mask.js.map

package/dist/components/Mask.js.map

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

package/dist/components/Mask.module.scss

@@ -0,0 +1,8 @@
+.mask {
+  mask-size: 100% 100%;
+  mask-image: radial-gradient(
+    var(--mask-radius) at var(--mask-position-x) var(--mask-position-y),
+    black 0%,
+    transparent 100%
+  );
+}

package/dist/components/Media.d.ts

@@ -0,0 +1,17 @@
+import React, { CSSProperties } from "react";
+import { Flex } from ".";
+export interface MediaProps extends React.ComponentProps<typeof Flex> {
+    aspectRatio?: string;
+    height?: number;
+    alt?: string;
+    loading?: boolean;
+    objectFit?: CSSProperties["objectFit"];
+    enlarge?: boolean;
+    src: string;
+    unoptimized?: boolean;
+    sizes?: string;
+    priority?: boolean;
+}
+declare const Media: React.FC<MediaProps>;
+export { Media };
+//# sourceMappingURL=Media.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Media.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/Media.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,aAAa,EAA+B,MAAM,OAAO,CAAC;AAG1E,OAAO,EAAE,IAAI,EAAY,MAAM,GAAG,CAAC;AAEnC,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAqN/B,CAAC;AAGF,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/Media.js

@@ -0,0 +1,115 @@
+"use strict";
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Media = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const image_1 = __importDefault(require("next/image"));
+const _1 = require(".");
+const Media = (_a) => {
+    var { aspectRatio, height, alt = "", loading = false, objectFit = "cover", enlarge = false, src, unoptimized = false, priority, sizes = "100vw" } = _a, rest = __rest(_a, ["aspectRatio", "height", "alt", "loading", "objectFit", "enlarge", "src", "unoptimized", "priority", "sizes"]);
+    const [isEnlarged, setIsEnlarged] = (0, react_1.useState)(false);
+    const imageRef = (0, react_1.useRef)(null);
+    const handleClick = () => {
+        if (enlarge) {
+            setIsEnlarged(!isEnlarged);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        const handleEscape = (event) => {
+            if (event.key === "Escape" && isEnlarged) {
+                setIsEnlarged(false);
+            }
+        };
+        const handleWheel = (event) => {
+            if (isEnlarged) {
+                setIsEnlarged(false);
+            }
+        };
+        document.addEventListener("keydown", handleEscape);
+        window.addEventListener("wheel", handleWheel, { passive: true });
+        return () => {
+            document.removeEventListener("keydown", handleEscape);
+            window.removeEventListener("wheel", handleWheel);
+        };
+    }, [isEnlarged]);
+    (0, react_1.useEffect)(() => {
+        if (isEnlarged) {
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            document.body.style.overflow = "auto";
+        }
+        return () => {
+            document.body.style.overflow = "auto";
+        };
+    }, [isEnlarged]);
+    const calculateTransform = () => {
+        if (!imageRef.current)
+            return {};
+        const rect = imageRef.current.getBoundingClientRect();
+        const scaleX = window.innerWidth / rect.width;
+        const scaleY = window.innerHeight / rect.height;
+        const scale = Math.min(scaleX, scaleY) * 0.9;
+        const translateX = (window.innerWidth - rect.width) / 2 - rect.left;
+        const translateY = (window.innerHeight - rect.height) / 2 - rect.top;
+        return {
+            transform: isEnlarged
+                ? `translate(${translateX}px, ${translateY}px) scale(${scale})`
+                : "translate(0, 0) scale(1)",
+            transition: "all 0.3s ease-in-out",
+            zIndex: isEnlarged ? 10 : undefined,
+        };
+    };
+    const isYouTubeVideo = (url) => {
+        const youtubeRegex = /(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+        return youtubeRegex.test(url);
+    };
+    const getYouTubeEmbedUrl = (url) => {
+        const match = url.match(/(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
+        return match
+            ? `https://www.youtube.com/embed/${match[1]}?controls=0&rel=0&modestbranding=1`
+            : "";
+    };
+    const isVideo = src === null || src === void 0 ? void 0 : src.endsWith(".mp4");
+    const isYouTube = isYouTubeVideo(src);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(_1.Flex, Object.assign({ ref: imageRef, fillWidth: true, overflow: "hidden", zIndex: 0, cursor: enlarge ? "interactive" : "", style: Object.assign({ outline: "none", isolation: "isolate", height: aspectRatio ? "" : height ? `${height}rem` : "100%", aspectRatio, borderRadius: isEnlarged ? "0" : undefined }, calculateTransform()), onClick: handleClick }, rest, { children: [loading && (0, jsx_runtime_1.jsx)(_1.Skeleton, { shape: "block" }), !loading && isVideo && ((0, jsx_runtime_1.jsx)("video", { src: src, autoPlay: true, loop: true, muted: true, playsInline: true, style: {
+                            width: "100%",
+                            height: "100%",
+                            objectFit: objectFit,
+                        } })), !loading && isYouTube && ((0, jsx_runtime_1.jsx)("iframe", { width: "100%", height: "100%", src: getYouTubeEmbedUrl(src), frameBorder: "0", allow: "accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, style: {
+                            objectFit: objectFit,
+                        } })), !loading && !isVideo && !isYouTube && ((0, jsx_runtime_1.jsx)(image_1.default, { src: src, alt: alt, priority: priority, sizes: sizes, unoptimized: unoptimized, fill: true, style: {
+                            objectFit: objectFit,
+                        } }))] })), isEnlarged && enlarge && ((0, jsx_runtime_1.jsx)(_1.Flex, { horizontal: "center", vertical: "center", position: "fixed", background: "overlay", pointerEvents: "none", onClick: handleClick, top: "0", left: "0", zIndex: isEnlarged ? 9 : undefined, opacity: isEnlarged ? 100 : 0, cursor: "interactive", transition: "macro-medium", style: {
+                    backdropFilter: isEnlarged ? "var(--backdrop-filter)" : "0px",
+                    width: "100vw",
+                    height: "100vh",
+                }, children: (0, jsx_runtime_1.jsx)(_1.Flex, { style: {
+                        height: "100vh",
+                        transform: "translate(-50%, -50%)",
+                    }, onClick: (e) => e.stopPropagation(), children: isVideo ? ((0, jsx_runtime_1.jsx)("video", { src: src, autoPlay: true, loop: true, muted: true, playsInline: true, style: {
+                            width: "90vw",
+                            height: "auto",
+                            objectFit: "contain",
+                        } })) : ((0, jsx_runtime_1.jsx)(image_1.default, { src: src, alt: alt, fill: true, sizes: "90vw", unoptimized: unoptimized, style: {
+                            objectFit: "contain",
+                        } })) }) }))] }));
+};
+exports.Media = Media;
+Media.displayName = "Media";
+//# sourceMappingURL=Media.js.map

package/dist/components/Media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Media.js","sourceRoot":"","sources":["../../src/once-ui/components/Media.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;AAEb,iCAA0E;AAC1E,uDAA+B;AAE/B,wBAAmC;AAenC,MAAM,KAAK,GAAyB,CAAC,EAYpC,EAAE,EAAE;QAZgC,EACnC,WAAW,EACX,MAAM,EACN,GAAG,GAAG,EAAE,EACR,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,OAAO,EACnB,OAAO,GAAG,KAAK,EACf,GAAG,EACH,WAAW,GAAG,KAAK,EACnB,QAAQ,EACR,KAAK,GAAG,OAAO,OAEhB,EADI,IAAI,cAX4B,8GAYpC,CADQ;IAEP,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,IAAI,OAAO,EAAE,CAAC;YACZ,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;QAC7B,CAAC;IACH,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC5C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,IAAI,UAAU,EAAE,CAAC;gBACzC,aAAa,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YACxC,IAAI,UAAU,EAAE,CAAC;gBACf,aAAa,CAAC,KAAK,CAAC,CAAC;YACvB,CAAC;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QACnD,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAEjE,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;YACtD,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACnD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,UAAU,EAAE,CAAC;YACf,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;QAC1C,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC;QACxC,CAAC;QAED,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC;QACxC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,IAAI,CAAC,QAAQ,CAAC,OAAO;YAAE,OAAO,EAAE,CAAC;QAEjC,MAAM,IAAI,GAAG,QAAQ,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC;QACtD,MAAM,MAAM,GAAG,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC;QAC9C,MAAM,MAAM,GAAG,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC;QAChD,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,GAAG,CAAC;QAE7C,MAAM,UAAU,GAAG,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC;QACpE,MAAM,UAAU,GAAG,CAAC,MAAM,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC;QAErE,OAAO;YACL,SAAS,EAAE,UAAU;gBACnB,CAAC,CAAC,aAAa,UAAU,OAAO,UAAU,aAAa,KAAK,GAAG;gBAC/D,CAAC,CAAC,0BAA0B;YAC9B,UAAU,EAAE,sBAAsB;YAClC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;SACpC,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,GAAW,EAAE,EAAE;QACrC,MAAM,YAAY,GAChB,sGAAsG,CAAC;QACzG,OAAO,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,GAAW,EAAE,EAAE;QACzC,MAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CACrB,sGAAsG,CACvG,CAAC;QACF,OAAO,KAAK;YACV,CAAC,CAAC,iCAAiC,KAAK,CAAC,CAAC,CAAC,oCAAoC;YAC/E,CAAC,CAAC,EAAE,CAAC;IACT,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;IACtC,MAAM,SAAS,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;IAEtC,OAAO,CACL,6DACE,wBAAC,OAAI,kBACH,GAAG,EAAE,QAAQ,EACb,SAAS,QACT,QAAQ,EAAC,QAAQ,EACjB,MAAM,EAAE,CAAC,EACT,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EACpC,KAAK,kBACH,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,KAAK,CAAC,CAAC,CAAC,MAAM,EAC3D,WAAW,EACX,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,IACvC,kBAAkB,EAAE,GAEzB,OAAO,EAAE,WAAW,IAChB,IAAI,eAEP,OAAO,IAAI,uBAAC,WAAQ,IAAC,KAAK,EAAC,OAAO,GAAG,EACrC,CAAC,OAAO,IAAI,OAAO,IAAI,CACtB,kCACE,GAAG,EAAE,GAAG,EACR,QAAQ,QACR,IAAI,QACJ,KAAK,QACL,WAAW,QACX,KAAK,EAAE;4BACL,KAAK,EAAE,MAAM;4BACb,MAAM,EAAE,MAAM;4BACd,SAAS,EAAE,SAAS;yBACrB,GACD,CACH,EACA,CAAC,OAAO,IAAI,SAAS,IAAI,CACxB,mCACE,KAAK,EAAC,MAAM,EACZ,MAAM,EAAC,MAAM,EACb,GAAG,EAAE,kBAAkB,CAAC,GAAG,CAAC,EAC5B,WAAW,EAAC,GAAG,EACf,KAAK,EAAC,gFAAgF,EACtF,eAAe,QACf,KAAK,EAAE;4BACL,SAAS,EAAE,SAAS;yBACrB,GACD,CACH,EACA,CAAC,OAAO,IAAI,CAAC,OAAO,IAAI,CAAC,SAAS,IAAI,CACrC,uBAAC,eAAK,IACJ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,IAAI,QACJ,KAAK,EAAE;4BACL,SAAS,EAAE,SAAS;yBACrB,GACD,CACH,KACI,EAEN,UAAU,IAAI,OAAO,IAAI,CACxB,uBAAC,OAAI,IACH,UAAU,EAAC,QAAQ,EACnB,QAAQ,EAAC,QAAQ,EACjB,QAAQ,EAAC,OAAO,EAChB,UAAU,EAAC,SAAS,EACpB,aAAa,EAAC,MAAM,EACpB,OAAO,EAAE,WAAW,EACpB,GAAG,EAAC,GAAG,EACP,IAAI,EAAC,GAAG,EACR,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EAClC,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAC7B,MAAM,EAAC,aAAa,EACpB,UAAU,EAAC,cAAc,EACzB,KAAK,EAAE;oBACL,cAAc,EAAE,UAAU,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,KAAK;oBAC7D,KAAK,EAAE,OAAO;oBACd,MAAM,EAAE,OAAO;iBAChB,YAED,uBAAC,OAAI,IACH,KAAK,EAAE;wBACL,MAAM,EAAE,OAAO;wBACf,SAAS,EAAE,uBAAuB;qBACnC,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,YAElC,OAAO,CAAC,CAAC,CAAC,CACT,kCACE,GAAG,EAAE,GAAG,EACR,QAAQ,QACR,IAAI,QACJ,KAAK,QACL,WAAW,QACX,KAAK,EAAE;4BACL,KAAK,EAAE,MAAM;4BACb,MAAM,EAAE,MAAM;4BACd,SAAS,EAAE,SAAS;yBACrB,GACD,CACH,CAAC,CAAC,CAAC,CACF,uBAAC,eAAK,IACJ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,QACJ,KAAK,EAAC,MAAM,EACZ,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE;4BACL,SAAS,EAAE,SAAS;yBACrB,GACD,CACH,GACI,GACF,CACR,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAGO,sBAAK;AADd,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/components/NavIcon.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Flex } from ".";
+interface NavIconProps extends React.ComponentProps<typeof Flex> {
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: () => void;
+    isActive: boolean;
+}
+declare const NavIcon: React.ForwardRefExoticComponent<Omit<Partial<NavIconProps>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { NavIcon };
+//# sourceMappingURL=NavIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NavIcon.d.ts","sourceRoot":"","sources":["../../src/once-ui/components/NavIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAGzB,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,OAAO,2GAsBZ,CAAC;AAIF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/components/NavIcon.js

@@ -0,0 +1,29 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const NavIcon_module_scss_1 = __importDefault(require("./NavIcon.module.scss"));
+const _1 = require(".");
+const classnames_1 = __importDefault(require("classnames"));
+const NavIcon = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, isActive, style, onClick } = _a, rest = __rest(_a, ["className", "isActive", "style", "onClick"]);
+    return ((0, jsx_runtime_1.jsxs)(_1.Flex, Object.assign({ ref: ref, tabIndex: 0, radius: "m", cursor: "interactive", width: "40", height: "40", minHeight: "40", minWidth: "40", className: className, style: style, onClick: onClick }, rest, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavIcon_module_scss_1.default.line, isActive && NavIcon_module_scss_1.default.active) }), (0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(NavIcon_module_scss_1.default.line, isActive && NavIcon_module_scss_1.default.active) })] })));
+});
+exports.NavIcon = NavIcon;
+NavIcon.displayName = "NavIcon";
+//# sourceMappingURL=NavIcon.js.map

package/dist/components/NavIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavIcon.js","sourceRoot":"","sources":["../../src/once-ui/components/NavIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA,iCAA0C;AAC1C,gFAA2C;AAC3C,wBAAyB;AACzB,4DAAoC;AASpC,MAAM,OAAO,GAAG,IAAA,kBAAU,EACxB,CAAC,EAAgD,EAAE,GAAG,EAAE,EAAE;QAAzD,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,OAAW,EAAN,IAAI,cAA9C,6CAAgD,CAAF;IAC7C,OAAO,CACL,wBAAC,OAAI,kBACH,GAAG,EAAE,GAAG,EACR,QAAQ,EAAE,CAAC,EACX,MAAM,EAAC,GAAG,EACV,MAAM,EAAC,aAAa,EACpB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,SAAS,EAAC,IAAI,EACd,QAAQ,EAAC,IAAI,EACb,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,IACZ,IAAI,eAER,gCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,6BAAM,CAAC,IAAI,EAAE,QAAQ,IAAI,6BAAM,CAAC,MAAM,CAAC,GAAI,EACtE,gCAAK,SAAS,EAAE,IAAA,oBAAU,EAAC,6BAAM,CAAC,IAAI,EAAE,QAAQ,IAAI,6BAAM,CAAC,MAAM,CAAC,GAAI,KACjE,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAIO,0BAAO;AAFhB,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/components/NavIcon.module.scss

@@ -0,0 +1,25 @@
+.line {
+    background-color: var(--neutral-on-background-strong);
+    height: 1px;
+    width: var(--static-space-24);
+    transition: transform 0.3s ease;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+
+    &:first-child {
+        transform: translateX(-50%) translateY(calc(-1 * var(--static-space-4)));
+    }
+    
+    &:last-child {
+        transform: translateX(-50%) translateY(var(--static-space-4));
+    }    
+}
+
+.active:first-child {
+    transform: translateX(-50%) translateY(0) rotate(45deg);
+}
+
+.active:last-child {
+    transform: translateX(-50%) translateY(0) rotate(-45deg);
+}