@studio-helga/once-ui-core 1.7.8

package/dist/components/Input.d.ts

@@ -0,0 +1,24 @@
+import React, { InputHTMLAttributes, ReactNode } from "react";
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    id: string;
+    label?: string;
+    placeholder?: string;
+    height?: "xs" | "s" | "m" | "l" | "xl";
+    error?: boolean;
+    errorMessage?: ReactNode;
+    description?: ReactNode;
+    radius?: "none" | "top" | "right" | "bottom" | "left" | "top-left" | "top-right" | "bottom-right" | "bottom-left";
+    className?: string;
+    style?: React.CSSProperties;
+    hasPrefix?: ReactNode;
+    hasSuffix?: ReactNode;
+    variant?: "default" | "ghost";
+    characterCount?: boolean;
+    cursor?: undefined | "interactive";
+    validate?: (value: ReactNode) => ReactNode | null;
+    loading?: boolean;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };
+export type { InputProps };
+//# sourceMappingURL=Input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/components/Input.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAIZ,mBAAmB,EAEnB,SAAS,EACV,MAAM,OAAO,CAAC;AAMf,UAAU,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IAChE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACvC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EACH,MAAM,GACN,KAAK,GACL,OAAO,GACP,QAAQ,GACR,MAAM,GACN,UAAU,GACV,WAAW,GACX,cAAc,GACd,aAAa,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,SAAS,GAAG,IAAI,CAAC;IAClD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,KAAK,qFAiMV,CAAC;AAIF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/components/Input.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, forwardRef, useCallback, } from "react";
+import classNames from "classnames";
+import { Column, Row, Text, Spinner } from ".";
+import styles from "./Input.module.scss";
+import { useDebounce } from "../hooks/useDebounce";
+const Input = forwardRef(({ id, label, placeholder, height = "m", error = false, errorMessage, description, radius, className, style, hasPrefix, hasSuffix, variant = "default", characterCount, loading = false, children, onFocus, onBlur, validate, cursor, ...props }, ref) => {
+    const [isFocused, setIsFocused] = useState(false);
+    const [isFilled, setIsFilled] = useState(!!props.value);
+    const [validationError, setValidationError] = useState(null);
+    const debouncedValue = useDebounce(props.value, 1000);
+    const handleFocus = (event) => {
+        setIsFocused(true);
+        if (onFocus)
+            onFocus(event);
+    };
+    const handleBlur = (event) => {
+        setIsFocused(false);
+        if (event.target.value) {
+            setIsFilled(true);
+        }
+        else {
+            setIsFilled(false);
+        }
+        if (onBlur)
+            onBlur(event);
+    };
+    useEffect(() => {
+        setIsFilled(!!props.value);
+    }, [props.value]);
+    const validateInput = useCallback(() => {
+        if (!debouncedValue) {
+            setValidationError(null);
+            return;
+        }
+        if (validate) {
+            const error = validate(debouncedValue);
+            if (error) {
+                setValidationError(error);
+            }
+            else {
+                setValidationError(errorMessage || null);
+            }
+        }
+        else {
+            setValidationError(null);
+        }
+    }, [debouncedValue, validate, errorMessage]);
+    useEffect(() => {
+        validateInput();
+    }, [debouncedValue, validateInput]);
+    const displayError = validationError || errorMessage;
+    const fontSizeMap = {
+        xs: "font-s",
+        s: "font-s",
+        m: "font-m",
+        l: "font-l",
+        xl: "font-xl",
+    };
+    const inputClassNames = classNames(styles.input, "font-body", "font-default", fontSizeMap[height], cursor === "interactive" ? "cursor-interactive" : undefined, {
+        [styles.filled]: isFilled,
+        [styles.focused]: isFocused,
+        [styles.withPrefix]: hasPrefix,
+        [styles.withSuffix]: hasSuffix,
+        [styles.placeholder]: placeholder,
+        [styles.hasChildren]: children,
+        [styles.error]: displayError && debouncedValue !== "",
+    });
+    return (_jsxs(Column, { gap: "8", style: style, fillWidth: true, fitHeight: true, className: classNames(className, {
+            [styles.error]: (error || (displayError && debouncedValue !== "")) && props.value !== "",
+        }), children: [_jsxs(Row, { transition: "micro-medium", border: variant === "ghost" ? "transparent" : "neutral-medium", background: variant === "ghost" ? "transparent" : "neutral-alpha-weak", overflow: "hidden", vertical: "stretch", className: classNames(styles.base, height && styles[height], radius === "none" ? "radius-none" : radius ? `radius-l-${radius}` : "radius-l"), children: [hasPrefix && (_jsx(Row, { paddingLeft: "12", className: styles.prefix, position: "static", children: hasPrefix })), _jsxs(Column, { fillWidth: true, padding: "4", children: [_jsx("input", { ...props, ref: ref, id: id, placeholder: placeholder, onFocus: handleFocus, onBlur: handleBlur, className: inputClassNames, "aria-describedby": displayError ? `${id}-error` : undefined, "aria-invalid": !!displayError }), label && (_jsx(Text, { as: "label", variant: "label-default-m", htmlFor: id, className: classNames(styles.label, styles.inputLabel, {
+                                    [styles.floating]: isFocused || isFilled || placeholder,
+                                }), children: label })), children] }), characterCount && props.maxLength && (_jsx(Row, { paddingRight: "12", className: styles.suffix, position: "static", children: _jsx(Text, { variant: "label-default-s", onBackground: props.maxLength - String(props.value || '').length <= 5
+                                ? "danger-weak"
+                                : props.maxLength - String(props.value || '').length <= 10
+                                    ? "warning-weak"
+                                    : "neutral-weak", children: props.maxLength - String(props.value || '').length }) })), loading && (_jsx(Row, { paddingRight: "12", className: styles.suffix, position: "static", children: _jsx(Spinner, { size: "s" }) })), hasSuffix && !loading && (_jsx(Row, { paddingRight: "12", className: styles.suffix, position: "static", children: hasSuffix }))] }), displayError && errorMessage !== false && (_jsx(Row, { paddingX: "16", id: `${id}-error`, textVariant: "body-default-s", onBackground: "danger-weak", children: validationError || errorMessage })), description && (_jsx(Row, { paddingX: "16", id: `${id}-description`, textVariant: "body-default-s", onBackground: "neutral-weak", children: description }))] }));
+});
+Input.displayName = "Input";
+export { Input };
+//# sourceMappingURL=Input.js.map

package/dist/components/Input.js.map

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

package/dist/components/Input.module.scss

@@ -0,0 +1,196 @@
+.base {
+    backdrop-filter: var(--backdrop-filter);
+    min-height: var(--static-space-56);
+
+    &.focused, &.filled {
+        border-color: var(--neutral-border-medium);
+    }
+
+    &:has(.placeholder):has(.floating) {
+        .placeholder {
+            padding-top: var(--static-space-12);
+        }
+    }
+}
+
+.resizeHandle {
+    &::after {
+        pointer-events: none;
+        content: '';
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: var(--static-space-32);
+        height: var(--static-space-32);
+        border: 1px solid var(--neutral-border-strong);
+        transform: translateX(50%) translateY(50%) rotate(45deg);
+        background-color: var(--neutral-alpha-weak);
+    }
+
+    ::-webkit-resizer {
+        display: none;
+    }
+}
+
+.label {
+    position: absolute;
+    left: var(--static-space-16);
+    transition: transform 0.3s, top 0.3s, left 0.3s;
+    color: var(--neutral-on-background-medium);
+    pointer-events: none;
+    transform-origin: left;
+
+    &.floating {
+        transform: scale(0.75);
+    }
+}
+
+.inputLabel {
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.textareaLabel {
+    top: calc(var(--static-space-16) + var(--static-space-2));
+}
+
+.xs {
+    min-height: var(--static-space-40);
+
+    .label, .textareaLabel {
+        &.floating {
+            top: calc(var(--static-space-4) - var(--static-space-1));
+        }
+    }
+
+    .inputLabel, .textareaLabel {
+        &.floating {
+            transform: scale(0.6);
+        }
+    }
+}
+
+.s {
+    min-height: var(--static-space-48);
+
+    .label, .textareaLabel {
+        &.floating {
+            top: calc(var(--static-space-4) - var(--static-space-1));
+        }
+    }
+}
+
+.m {
+    min-height: var(--static-space-56);
+    
+    .label, .textareaLabel {
+        &.floating {
+            top: calc(var(--static-space-8) - var(--static-space-2));
+        }
+    }
+}
+
+.l {
+    min-height: var(--static-space-64);
+    
+    .label {
+        &.floating {
+            top: calc(var(--static-space-8) - var(--static-space-2));
+        }
+    }
+
+    .textareaLabel {
+        &.floating {
+            top: var(--static-space-4);
+        }
+    }
+}
+
+.xl {
+    min-height: var(--static-space-72);
+    
+    .label {
+        &.floating {
+            top: calc(var(--static-space-12) - var(--static-space-2));
+        }
+    }
+    
+    .textareaLabel {
+        &.floating {
+            top: var(--static-space-4);
+        }
+    }
+}
+
+.input {
+    width: 100%;
+    height: 100%;
+    border: none;
+    background: none;
+    color: var(--neutral-on-background-strong);
+    padding: 0 var(--static-space-12);
+    outline: none;
+    border-radius: var(--radius-s);
+
+    &.placeholder {
+        padding-top: 0;
+    }
+
+    &.textarea.placeholder {
+        padding-top: var(--static-space-12);
+        padding-bottom: var(--static-space-12);
+    }
+
+    &:not(.placeholder) {
+        padding-top: var(--static-space-16);
+    }
+
+    &.placeholder.hasChildren {
+        padding-top: var(--static-space-16);
+    }
+
+    &::placeholder {
+        color: var(--neutral-on-background-weak);
+    }
+
+    &:disabled {
+        color: var(--neutral-on-background-weak);
+        cursor: not-allowed;
+    }
+
+    &:autofill, &:-webkit-autofill {
+        background-color: var(--static-transparent) !important;
+        -webkit-box-shadow: 0 0 0 var(--static-space-32) var(--neutral-background-medium) inset !important;
+        -webkit-text-fill-color: var(--neutral-on-background-strong) !important;
+    }
+}
+
+.error {
+    .base {
+        background-color: var(--danger-background-medium);
+        border-color: var(--danger-border-medium);
+    }
+
+    .input, .prefix, .suffix {
+        color: var(--danger-on-background-medium);
+    }
+
+    .label {
+        color: var(--danger-on-background-weak);
+    }
+
+    .resizeHandle {
+        &::after {
+            border-color: var(--danger-border-medium);
+            background-color: var(--danger-alpha-weak);
+        }
+    }
+}
+
+.prefix, .suffix {
+    align-self: center;
+}
+
+.input[type="color"] {
+    opacity: 0;
+}

package/dist/components/InteractiveDetails.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { IconButtonProps } from ".";
+interface InteractiveDetailsProps {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+    iconButtonProps?: IconButtonProps;
+    onClick: () => void;
+    className?: string;
+    id?: string;
+}
+declare const InteractiveDetails: React.FC<InteractiveDetailsProps>;
+export { InteractiveDetails };
+export type { InteractiveDetailsProps };
+//# sourceMappingURL=InteractiveDetails.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InteractiveDetails.d.ts","sourceRoot":"","sources":["../../src/components/InteractiveDetails.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAA4B,eAAe,EAAO,MAAM,GAAG,CAAC;AAEnE,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAiCxD,CAAC;AAIH,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAC9B,YAAY,EAAE,uBAAuB,EAAE,CAAC"}

package/dist/components/InteractiveDetails.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Text, Column, IconButton, Row } from ".";
+const InteractiveDetails = forwardRef(({ label, description, iconButtonProps, onClick, className, id, disabled }, ref) => {
+    return (_jsxs(Column, { ref: ref, cursor: disabled ? "not-allowed" : undefined, className: className, onClick: onClick, id: id, children: [_jsxs(Row, { gap: "4", vertical: "center", children: [_jsx(Text, { as: "span", variant: "label-default-m", onBackground: disabled ? "neutral-weak" : "neutral-strong", children: label }), iconButtonProps?.tooltip && (_jsx("div", { onClick: (e) => e.stopPropagation(), children: _jsx(IconButton, { size: "s", variant: "ghost", icon: "help", ...iconButtonProps }) }))] }), description && (_jsx(Text, { as: "span", variant: "body-default-s", onBackground: "neutral-weak", children: description }))] }));
+});
+InteractiveDetails.displayName = "InteractiveDetails";
+export { InteractiveDetails };
+//# sourceMappingURL=InteractiveDetails.js.map

package/dist/components/InteractiveDetails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InteractiveDetails.js","sourceRoot":"","sources":["../../src/components/InteractiveDetails.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,EAAmB,GAAG,EAAE,MAAM,GAAG,CAAC;AAYnE,MAAM,kBAAkB,GAAsC,UAAU,CAGtE,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE;IACnF,OAAO,CACL,MAAC,MAAM,IACL,GAAG,EAAE,GAAG,EACR,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAC5C,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,EAAE,EAAE,EAAE,aAEN,MAAC,GAAG,IAAC,GAAG,EAAC,GAAG,EAAC,QAAQ,EAAC,QAAQ,aAC5B,KAAC,IAAI,IACH,EAAE,EAAC,MAAM,EACT,OAAO,EAAC,iBAAiB,EACzB,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,gBAAgB,YAEzD,KAAK,GACD,EACN,eAAe,EAAE,OAAO,IAAI,CAC3B,cAAK,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,YACtC,KAAC,UAAU,IAAC,IAAI,EAAC,GAAG,EAAC,OAAO,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,eAAe,GAAI,GACpE,CACP,IACG,EACL,WAAW,IAAI,CACd,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,gBAAgB,EAAC,YAAY,EAAC,cAAc,YACjE,WAAW,GACP,CACR,IACM,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,WAAW,GAAG,oBAAoB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,CAAC"}

package/dist/components/Kbd.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode } from "react";
+import { Flex } from ".";
+interface KbdProps extends React.ComponentProps<typeof Flex> {
+    label?: string;
+    children?: ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const Kbd: React.ForwardRefExoticComponent<Omit<KbdProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Kbd };
+export type { KbdProps };
+//# sourceMappingURL=Kbd.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.d.ts","sourceRoot":"","sources":["../../src/components/Kbd.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,IAAI,EAAQ,MAAM,GAAG,CAAC;AAE/B,UAAU,QAAS,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,GAAG,8FAsBR,CAAC;AAIF,OAAO,EAAE,GAAG,EAAE,CAAC;AACf,YAAY,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Kbd.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Flex, Text } from ".";
+const Kbd = forwardRef(({ label, children, className, style, ...rest }, ref) => (_jsx(Flex, { as: "kbd", ref: ref, horizontal: "center", minWidth: "32", background: "neutral-strong", radius: "s", paddingX: "4", paddingY: "2", onBackground: "neutral-medium", border: "neutral-strong", className: className, style: style, ...rest, children: _jsx(Text, { as: "span", variant: "label-default-s", children: label || children }) })));
+Kbd.displayName = "Kbd";
+export { Kbd };
+//# sourceMappingURL=Kbd.js.map

package/dist/components/Kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.js","sourceRoot":"","sources":["../../src/components/Kbd.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAa,UAAU,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAS/B,MAAM,GAAG,GAAG,UAAU,CACpB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACvD,KAAC,IAAI,IACH,EAAE,EAAC,KAAK,EACR,GAAG,EAAE,GAAG,EACR,UAAU,EAAC,QAAQ,EACnB,QAAQ,EAAC,IAAI,EACb,UAAU,EAAC,gBAAgB,EAC3B,MAAM,EAAC,GAAG,EACV,QAAQ,EAAC,GAAG,EACZ,QAAQ,EAAC,GAAG,EACZ,YAAY,EAAC,gBAAgB,EAC7B,MAAM,EAAC,gBAAgB,EACvB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,KACR,IAAI,YAER,KAAC,IAAI,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,iBAAiB,YACtC,KAAK,IAAI,QAAQ,GACb,GACF,CACR,CACF,CAAC;AAEF,GAAG,CAAC,WAAW,GAAG,KAAK,CAAC;AAExB,OAAO,EAAE,GAAG,EAAE,CAAC"}

package/dist/components/LetterFx.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactNode } from "react";
+type LetterFxProps = {
+    children: ReactNode;
+    trigger?: "hover" | "instant" | "custom";
+    speed?: "fast" | "medium" | "slow";
+    charset?: string[];
+    onTrigger?: (triggerFn: () => void) => void;
+    className?: string;
+    style?: React.CSSProperties;
+};
+declare const LetterFx: React.ForwardRefExoticComponent<LetterFxProps & React.RefAttributes<HTMLSpanElement>>;
+export { LetterFx };
+//# sourceMappingURL=LetterFx.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LetterFx.d.ts","sourceRoot":"","sources":["../../src/components/LetterFx.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAwD,SAAS,EAAE,MAAM,OAAO,CAAC;AAuE/F,KAAK,aAAa,GAAG;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;IACzC,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,IAAI,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,QAAA,MAAM,QAAQ,uFA0Db,CAAC;AAIF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/LetterFx.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect, forwardRef } from "react";
+import classNames from "classnames";
+const defaultCharset = ["X", "$", "@", "a", "H", "z", "o", "0", "y", "#", "?", "*", "0", "1", "+"];
+function getRandomCharacter(charset) {
+    const randomIndex = Math.floor(Math.random() * charset.length);
+    return charset[randomIndex];
+}
+function createEventHandler(originalText, setText, inProgress, setInProgress, speed, charset, setHasAnimated) {
+    const speedSettings = {
+        fast: {
+            BASE_DELAY: 10,
+            REVEAL_DELAY: 10,
+            INITIAL_RANDOM_DURATION: 100,
+        },
+        medium: {
+            BASE_DELAY: 30,
+            REVEAL_DELAY: 30,
+            INITIAL_RANDOM_DURATION: 300,
+        },
+        slow: {
+            BASE_DELAY: 60,
+            REVEAL_DELAY: 60,
+            INITIAL_RANDOM_DURATION: 600,
+        },
+    };
+    const { BASE_DELAY, REVEAL_DELAY, INITIAL_RANDOM_DURATION } = speedSettings[speed];
+    const generateRandomText = () => originalText
+        .split("")
+        .map((char) => (char === " " ? " " : getRandomCharacter(charset)))
+        .join("");
+    return async () => {
+        if (inProgress)
+            return;
+        setInProgress(true);
+        let randomizedText = generateRandomText();
+        const endTime = Date.now() + INITIAL_RANDOM_DURATION;
+        while (Date.now() < endTime) {
+            setText(randomizedText);
+            await new Promise((resolve) => setTimeout(resolve, BASE_DELAY));
+            randomizedText = generateRandomText();
+        }
+        for (let i = 0; i < originalText.length; i++) {
+            await new Promise((resolve) => setTimeout(resolve, REVEAL_DELAY));
+            setText(`${originalText.substring(0, i + 1)}${randomizedText.substring(i + 1)}`);
+        }
+        setInProgress(false);
+        if (setHasAnimated) {
+            setHasAnimated(true);
+        }
+    };
+}
+const LetterFx = forwardRef(({ children, trigger = "hover", speed = "medium", charset = defaultCharset, onTrigger, className, style, }, ref) => {
+    const [text, setText] = useState(typeof children === "string" ? children : "");
+    const [inProgress, setInProgress] = useState(false);
+    const [hasAnimated, setHasAnimated] = useState(false);
+    const originalText = useRef(typeof children === "string" ? children : "");
+    const eventHandler = useCallback(() => {
+        createEventHandler(originalText.current, setText, inProgress, setInProgress, speed, charset, trigger === "instant" ? setHasAnimated : undefined)();
+    }, [inProgress, speed, charset, trigger, setHasAnimated]);
+    useEffect(() => {
+        if (typeof children === "string") {
+            setText(children);
+            originalText.current = children;
+            if (trigger === "instant" && !hasAnimated) {
+                eventHandler();
+            }
+        }
+    }, [children, trigger, eventHandler, hasAnimated]);
+    useEffect(() => {
+        if (trigger === "custom" && onTrigger) {
+            onTrigger(eventHandler);
+        }
+    }, [trigger, onTrigger, eventHandler]);
+    return (_jsx("span", { ref: ref, className: classNames(className), style: style, onMouseOver: trigger === "hover" ? eventHandler : undefined, children: text }));
+});
+LetterFx.displayName = "LetterFx";
+export { LetterFx };
+//# sourceMappingURL=LetterFx.js.map

package/dist/components/LetterFx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LetterFx.js","sourceRoot":"","sources":["../../src/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/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,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Flex } from ".";
+const Line = forwardRef(({ vert, className, style, ...rest }, ref) => {
+    return (_jsx(Flex, { 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 }));
+});
+Line.displayName = "Line";
+export { Line };
+//# sourceMappingURL=Line.js.map

package/dist/components/Line.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Line.js","sourceRoot":"","sources":["../../src/components/Line.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAOzB,MAAM,IAAI,GAAG,UAAU,CAA4B,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAC9F,OAAO,CACL,KAAC,IAAI,IACH,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,KACR,IAAI,GACR,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/List.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { Column } from ".";
+interface ListProps extends React.ComponentProps<typeof Column> {
+    as?: "ul" | "ol";
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const List: React.ForwardRefExoticComponent<Omit<ListProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { List };
+//# sourceMappingURL=List.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../src/components/List.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,GAAG,CAAC;AAE3B,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC;IAC7D,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,IAAI,+FAsCT,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/List.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Column } from ".";
+const List = forwardRef(({ as = "ul", className, children, style, ...props }, ref) => {
+    if (as === "ol") {
+        return (_jsx(Column, { as: "ol", fillWidth: true, margin: "0", paddingY: "0", paddingRight: "0", paddingLeft: "20", ref: ref, className: className, style: style, ...props, children: children }));
+    }
+    return (_jsx(Column, { as: "ul", fillWidth: true, margin: "0", paddingY: "0", paddingRight: "0", paddingLeft: "20", ref: ref, className: className, style: style, ...props, children: children }));
+});
+List.displayName = "List";
+export { List };
+//# sourceMappingURL=List.js.map

package/dist/components/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../src/components/List.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,GAAG,CAAC;AAS3B,MAAM,IAAI,GAAG,UAAU,CACrB,CAAC,EAAE,EAAE,GAAG,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC3D,IAAI,EAAE,KAAK,IAAI,EAAE,CAAC;QAChB,OAAO,CACL,KAAC,MAAM,IACL,EAAE,EAAC,IAAI,EACP,SAAS,QACT,MAAM,EAAC,GAAG,EACV,QAAQ,EAAC,GAAG,EACZ,YAAY,EAAC,GAAG,EAChB,WAAW,EAAC,IAAI,EAChB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,KACR,KAAK,YAER,QAAQ,GACF,CACV,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,MAAM,IACL,EAAE,EAAC,IAAI,EACP,SAAS,QACT,MAAM,EAAC,GAAG,EACV,QAAQ,EAAC,GAAG,EACZ,YAAY,EAAC,GAAG,EAChB,WAAW,EAAC,IAAI,EAChB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,KACR,KAAK,YAER,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/components/List.module.scss

@@ -0,0 +1,5 @@
+.listItem {
+  &::marker {
+    color: var(--neutral-on-background-weak);
+  }
+}

package/dist/components/ListItem.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { Text } from ".";
+interface ListItemProps extends React.ComponentProps<typeof Text> {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare const ListItem: React.ForwardRefExoticComponent<Omit<ListItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
+export { ListItem };
+//# sourceMappingURL=ListItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../src/components/ListItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAEzB,UAAU,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC;IAC/D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,QAAQ,kGAkBb,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/ListItem.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import styles from "./List.module.scss";
+import { Text } from ".";
+const ListItem = forwardRef(({ className, children, style, ...props }, ref) => {
+    const listItemClass = classNames(styles.listItem, className);
+    return (_jsx(Text, { as: "li", paddingY: "0", paddingRight: "0", paddingLeft: "8", className: listItemClass, style: style, ...props, children: children }));
+});
+ListItem.displayName = "ListItem";
+export { ListItem };
+//# sourceMappingURL=ListItem.js.map

package/dist/components/ListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../src/components/ListItem.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,CAAC;AAQzB,MAAM,QAAQ,GAAG,UAAU,CACzB,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAChD,MAAM,aAAa,GAAG,UAAU,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;IAE7D,OAAO,CACL,KAAC,IAAI,IACH,EAAE,EAAC,IAAI,EACP,QAAQ,EAAC,GAAG,EACZ,YAAY,EAAC,GAAG,EAChB,WAAW,EAAC,GAAG,EACf,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE,KAAK,KACR,KAAK,YAER,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/components/Logo.d.ts

@@ -0,0 +1,18 @@
+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;
+    dark?: boolean;
+    light?: boolean;
+    brand?: {
+        copy?: boolean;
+        url?: 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/components/Logo.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAezC,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;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,OAAO,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC1C;AAED,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CA2L7B,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,CAAC"}