magnaui 0.1.0

package/dist/components/ui/content-label.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import * as KeyIcon from "./key-icon.js";
+export const Root = React.forwardRef(function ContentLabel({ title, sublabel, description, leading, badge, trailing, variant = 'basic', size = 'medium', className, ...props }, ref) {
+    const large = size === 'large';
+    return (_jsxs("div", { ref: ref, ...props, className: cn('flex w-[300px] max-w-full items-center gap-3.5', className), children: [variant !== 'basic' && (leading || variant === 'icon') && (_jsx("span", { className: cn('flex shrink-0 items-center justify-center', large ? 'size-12' : 'size-10', variant === 'avatar' && 'overflow-hidden rounded-full'), children: leading ?? _jsx(KeyIcon.Root, { size: large ? 48 : 40 }) })), _jsxs("div", { className: 'min-w-0 flex-1 space-y-1', children: [_jsxs("div", { className: 'flex flex-wrap items-center gap-1', children: [_jsx("span", { className: cn('text-text-strong-950', large ? 'text-label-md' : 'text-label-sm'), children: title }), sublabel && (_jsx("span", { className: 'text-paragraph-xs text-text-sub-600', children: sublabel }))] }), description && (_jsx("p", { className: cn('text-text-sub-600', large ? 'text-paragraph-sm' : 'text-paragraph-xs'), children: description }))] }), badge, trailing] }));
+});

package/dist/components/ui/counter-input.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+export type CounterInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'value' | 'defaultValue' | 'min' | 'max' | 'step'> & {
+    value?: number | '';
+    defaultValue?: number | '';
+    onValueChange?: (value: number | '') => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: 'medium' | 'small' | 'xsmall';
+    hasError?: boolean;
+    decrementLabel?: string;
+    incrementLabel?: string;
+};
+declare const Root: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "max" | "min" | "type" | "defaultValue" | "value" | "step"> & {
+    value?: number | "";
+    defaultValue?: number | "";
+    onValueChange?: (value: number | "") => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: "medium" | "small" | "xsmall";
+    hasError?: boolean;
+    decrementLabel?: string;
+    incrementLabel?: string;
+} & React.RefAttributes<HTMLInputElement>>;
+export { Root };

package/dist/components/ui/counter-input.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as Input from "./input.js";
+import * as CompactButton from "./compact-button.js";
+import { FormAsset } from "./form-asset.js";
+import { cn } from "../../utils/cn.js";
+const Root = React.forwardRef(function CounterInput({ value, defaultValue = '', onValueChange, min, max, step = 1, size = 'medium', hasError, className, disabled, readOnly, onChange, onBlur, onKeyDown, decrementLabel = 'Decrease value', incrementLabel = 'Increase value', ...props }, ref) {
+    const [internal, setInternal] = React.useState(defaultValue);
+    const current = value ?? internal;
+    const clamp = (next) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, next));
+    const update = (next) => {
+        if (disabled || readOnly)
+            return;
+        if (value === undefined)
+            setInternal(next);
+        onValueChange?.(next);
+    };
+    const increment = (direction) => update(clamp(Number(((current === '' ? (min ?? 0) : current) +
+        direction * (step > 0 ? step : 1)).toPrecision(12))));
+    return (_jsx(Input.Root, { size: size, hasError: hasError, className: className, children: _jsx(Input.Wrapper, { asChild: true, className: cn(size === 'medium'
+                ? 'gap-2 px-2'
+                : size === 'small'
+                    ? 'gap-1.5 px-1.5'
+                    : 'gap-1 px-1'), children: _jsxs("div", { children: [_jsx(CompactButton.Root, { type: 'button', variant: 'ghost', fullRadius: false, disabled: disabled ||
+                            readOnly ||
+                            (current !== '' && min !== undefined && current <= min), "aria-label": decrementLabel, onClick: () => increment(-1), children: _jsx(FormAsset, { file: '7c034.svg' }) }), _jsx(Input.Input, { ...props, ref: ref, type: 'number', min: min, max: max, step: step, disabled: disabled, readOnly: readOnly, value: current, "aria-invalid": hasError || props['aria-invalid'], className: 'min-w-0 text-center [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none', onChange: (event) => {
+                            const next = event.target.value === '' ? '' : event.target.valueAsNumber;
+                            if (next === '' || Number.isFinite(next))
+                                update(next);
+                            onChange?.(event);
+                        }, onBlur: (event) => {
+                            if (current !== '')
+                                update(clamp(current));
+                            onBlur?.(event);
+                        }, onKeyDown: (event) => {
+                            onKeyDown?.(event);
+                            if (!event.defaultPrevented &&
+                                ['ArrowUp', 'ArrowDown'].includes(event.key)) {
+                                event.preventDefault();
+                                increment(event.key === 'ArrowUp' ? 1 : -1);
+                            }
+                        } }), _jsx(CompactButton.Root, { type: 'button', variant: 'ghost', fullRadius: false, disabled: disabled ||
+                            readOnly ||
+                            (current !== '' && max !== undefined && current >= max), "aria-label": incrementLabel, onClick: () => increment(1), children: _jsx(FormAsset, { file: '60456.svg' }) })] }) }) }));
+});
+export { Root };

package/dist/components/ui/datepicker.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+declare function Calendar({ classNames, components, showOutsideDays, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
+/** Figma 443:336: a reusable date-range preset button. */
+declare const PeriodRange: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    active?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+export { Calendar, PeriodRange };

package/dist/components/ui/datepicker.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
+import { compactButtonVariants } from "./compact-button.js";
+import { RiArrowLeftSLine, RiArrowRightSLine } from "@remixicon/react";
+const calendarStyles = {
+    multiple_months: '',
+    caption_start: 'p-5',
+    caption_end: 'p-5',
+    months: 'flex divide-x divide-stroke-soft-200',
+    month: 'space-y-2',
+    caption: 'relative flex h-9 items-center justify-center rounded-full bg-bg-weak-50',
+    caption_label: 'select-none text-label-sm text-text-sub-600',
+    nav: 'flex items-center',
+    nav_button: compactButtonVariants({ variant: 'white', size: 'large' }).root({
+        className: 'absolute',
+    }),
+    nav_button_previous: 'left-1.5 top-1/2 -translate-y-1/2',
+    nav_button_next: 'right-1.5 top-1/2 -translate-y-1/2',
+    table: 'w-full border-collapse',
+    head_row: 'flex gap-2',
+    head_cell: 'flex size-10 select-none items-center justify-center text-center text-label-sm uppercase text-text-soft-400',
+    row: 'mt-2 grid w-full auto-cols-auto grid-flow-col gap-2',
+    cell: 'group/cell relative size-10 shrink-0 select-none p-0 [&:has(.day-range-middle)]:bg-primary-alpha-10 first:[&:has([aria-selected])]:rounded-l-full last:[&:has([aria-selected])]:rounded-r-full [&:not(:has(button))+:has(.day-range-middle)]:rounded-l-full [&:not(:has(+_*_button))]:rounded-r-full before:absolute before:inset-y-0 before:-right-2 before:hidden before:w-2 before:bg-primary-alpha-10 [&:has(.day-range-middle)]:before:block last:[&:has(.day-range-middle)]:before:hidden [&:has(.day-range-start)]:before:block [&:has(.day-range-start)]:before:w-3 [&:has(.day-range-end):not(:first-child)]:before:!block [&:has(.day-range-end)]:before:left-0 [&:has(.day-range-end)]:before:right-auto [&:not(:has(+_*_[type=button]))]:before:hidden',
+    day: 'relative flex size-10 shrink-0 items-center justify-center rounded-full text-center text-label-sm text-text-sub-600 outline-none transition-colors duration-200 hover:bg-bg-weak-50 hover:text-text-strong-950 aria-[selected]:bg-primary-base aria-[selected]:text-static-white focus-visible:bg-bg-weak-50 focus-visible:text-text-strong-950',
+    day_range_start: 'day-range-start',
+    day_range_end: 'day-range-end',
+    day_selected: 'day-selected',
+    day_range_middle: 'day-range-middle !bg-transparent !text-primary-base',
+    day_today: 'day-today',
+    day_outside: 'day-outside !text-text-disabled-300 aria-[selected]:!text-static-white',
+    day_disabled: 'day-disabled !text-text-disabled-300',
+    day_hidden: 'invisible',
+};
+function Calendar({ classNames, components, showOutsideDays = true, ...props }) {
+    return (_jsx(DayPicker, { ...props, showOutsideDays: showOutsideDays, classNames: { ...calendarStyles, ...classNames }, components: {
+            IconLeft: () => _jsx(RiArrowLeftSLine, { className: 'size-5' }),
+            IconRight: () => _jsx(RiArrowRightSLine, { className: 'size-5' }),
+            ...components,
+        } }));
+}
+/** Figma 443:336: a reusable date-range preset button. */
+const PeriodRange = React.forwardRef(function PeriodRange({ active = false, className, ...props }, ref) {
+    return (_jsx("button", { ...props, ref: ref, type: props.type ?? 'button', "aria-pressed": active, className: cn('flex h-9 w-[168px] max-w-full items-center rounded-full bg-bg-white-0 py-2 pe-2 ps-3 text-start text-label-sm text-text-sub-600 outline-none hover:bg-bg-weak-50 focus-visible:ring-2 focus-visible:ring-primary-base disabled:pointer-events-none disabled:opacity-50', active && 'bg-bg-weak-50 text-text-strong-950', className) }));
+});
+export { Calendar, PeriodRange };

package/dist/components/ui/digit-input.d.ts

@@ -0,0 +1,11 @@
+import type { OTPInputProps } from "react-otp-input";
+type Props = Omit<OTPInputProps, 'renderInput'> & {
+    className?: string;
+    disabled?: boolean;
+    hasError?: boolean;
+};
+declare function Root({ value, numInputs, onChange, onPaste, shouldAutoFocus, placeholder, renderSeparator, containerStyle, inputStyle, inputType, className, disabled, hasError, }: Props): import("react/jsx-runtime").JSX.Element;
+declare namespace Root {
+    var displayName: string;
+}
+export { Root };

package/dist/components/ui/digit-input.js

@@ -0,0 +1,98 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+// A single controlled value is distributed to native fields. Focus movement, paste,
+// replacement and deletion are handled together so keyboard and mobile input agree.
+function Root({ value = '', numInputs = 4, onChange, onPaste, shouldAutoFocus, placeholder, renderSeparator, containerStyle, inputStyle, inputType = 'text', className, disabled, hasError, }) {
+    const fields = React.useRef([]);
+    const numeric = inputType === 'number' || inputType === 'tel';
+    const clean = (text) => numeric ? text.replace(/[^0-9]/g, '') : text.replace(/\s/g, '');
+    function focus(index) {
+        const input = fields.current[Math.max(0, Math.min(numInputs - 1, index))];
+        input?.focus();
+        input?.select();
+    }
+    React.useEffect(() => {
+        if (shouldAutoFocus)
+            fields.current[0]?.focus();
+    }, [shouldAutoFocus]);
+    function replace(index, text) {
+        const incoming = clean(text).slice(0, numInputs - index);
+        if (!incoming)
+            return;
+        const digits = value.split('');
+        for (let offset = 0; offset < incoming.length; offset++)
+            digits[index + offset] = incoming[offset];
+        onChange(digits.join('').slice(0, numInputs));
+        focus(index + incoming.length);
+    }
+    function erase(index) {
+        const digits = value.split('');
+        digits[index] = '';
+        onChange(digits.join(''));
+    }
+    return (_jsx("div", { className: cn('flex w-full items-center gap-2.5', className, typeof containerStyle === 'string' && containerStyle), style: typeof containerStyle === 'object' ? containerStyle : undefined, onPaste: (event) => {
+            onPaste?.(event);
+            if (event.defaultPrevented)
+                return;
+            const index = fields.current.indexOf(event.target);
+            if (index < 0 || disabled)
+                return;
+            event.preventDefault();
+            replace(index, event.clipboardData.getData('text'));
+        }, children: Array.from({ length: Math.max(0, numInputs) }, (_, index) => (_jsxs(React.Fragment, { children: [index > 0 &&
+                    (typeof renderSeparator === 'function'
+                        ? renderSeparator(index - 1)
+                        : renderSeparator), _jsx("input", { ref: (element) => {
+                        fields.current[index] = element;
+                    }, type: inputType, maxLength: 1, inputMode: numeric ? 'numeric' : 'text', autoComplete: index === 0 ? 'one-time-code' : 'off', "aria-label": `Digit ${index + 1} of ${numInputs}`, "aria-invalid": hasError || undefined, disabled: disabled, value: value[index] ?? '', placeholder: placeholder?.[index], onFocus: (event) => event.currentTarget.select(), onChange: (event) => {
+                        const native = event.nativeEvent;
+                        if (!event.target.value) {
+                            erase(index);
+                            // Some mobile keyboards send deletion through input events,
+                            // without a usable Backspace key event.
+                            if (native.inputType === 'deleteContentBackward')
+                                focus(index - 1);
+                            return;
+                        }
+                        // Native number fields ignore maxLength. A single typed character
+                        // must still replace one slot; paste/autofill may fill several.
+                        const text = native.inputType === 'insertText' && native.data?.length === 1
+                            ? native.data
+                            : event.target.value;
+                        replace(index, text);
+                    }, onKeyDown: (event) => {
+                        if (event.ctrlKey || event.metaKey || event.altKey)
+                            return;
+                        if (['ArrowUp', 'ArrowDown', ' ', 'Spacebar'].includes(event.key)) {
+                            event.preventDefault();
+                            return;
+                        }
+                        // React emits no change when typing the already selected value.
+                        if (event.key === value[index]) {
+                            event.preventDefault();
+                            focus(index + 1);
+                            return;
+                        }
+                        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+                            event.preventDefault();
+                            focus(index + (event.key === 'ArrowLeft' ? -1 : 1));
+                        }
+                        if (event.key === 'Backspace') {
+                            event.preventDefault();
+                            erase(value[index] ? index : Math.max(0, index - 1));
+                            focus(index - 1);
+                        }
+                        if (event.key === 'Delete') {
+                            event.preventDefault();
+                            erase(index);
+                        }
+                    }, style: {
+                        width: '1em',
+                        ...(typeof inputStyle === 'object' ? inputStyle : {}),
+                    }, className: cn('h-16 w-full min-w-0 rounded-full bg-bg-white-0 text-center text-title-h5 text-text-strong-950 shadow-regular-xs outline-none ring-1 ring-inset ring-stroke-soft-200 transition-all duration-200 hover:bg-bg-weak-50 hover:shadow-none hover:ring-transparent focus:shadow-button-important-focus focus:ring-stroke-strong-950 disabled:bg-bg-weak-50 disabled:text-text-disabled-300 disabled:shadow-none disabled:ring-transparent', hasError &&
+                        'ring-error-base hover:ring-error-base focus:shadow-button-error-focus focus:ring-error-base', typeof inputStyle === 'string' && inputStyle) })] }, index))) }));
+}
+Root.displayName = 'DigitInput';
+export { Root };

package/dist/components/ui/display-asset.d.ts

@@ -0,0 +1,3 @@
+import type { ImgHTMLAttributes } from "react";
+/** Preserve the source SVG's intrinsic geometry. The enclosing component owns its slot. */
+export declare function DisplayAsset({ className, ...props }: ImgHTMLAttributes<HTMLImageElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/display-asset.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+/** Preserve the source SVG's intrinsic geometry. The enclosing component owns its slot. */
+export function DisplayAsset({ className, ...props }) {
+    return (
+    // Exact local SVGs are already vector assets; retain their intrinsic dimensions.
+    // eslint-disable-next-line @next/next/no-img-element
+    _jsx("img", { alt: '', "aria-hidden": 'true', ...props, className: cn('block max-w-none shrink-0', className) }));
+}

package/dist/components/ui/display-assets.d.ts

@@ -0,0 +1,193 @@
+export declare const keyIconAssets: {
+    readonly gray: {
+        readonly '32': string;
+        readonly '40': string;
+        readonly '48': string;
+        readonly '56': string;
+        readonly '64': string;
+    };
+    readonly blue: {
+        readonly '32': string;
+        readonly '40': string;
+        readonly '48': string;
+        readonly '56': string;
+        readonly '64': string;
+    };
+    readonly orange: {
+        readonly '32': string;
+        readonly '40': string;
+        readonly '48': string;
+        readonly '56': string;
+        readonly '64': string;
+    };
+    readonly red: {
+        readonly '32': string;
+        readonly '40': string;
+        readonly '48': string;
+        readonly '56': string;
+        readonly '64': string;
+    };
+    readonly green: {
+        readonly '32': string;
+        readonly '40': string;
+        readonly '48': string;
+        readonly '56': string;
+        readonly '64': string;
+    };
+    readonly yellow: {
+        readonly '32': string;
+        readonly '40': string;
+        readonly '48': string;
+        readonly '56': string;
+        readonly '64': string;
+    };
+    readonly purple: {
+        readonly '32': string;
+        readonly '40': string;
+        readonly '48': string;
+        readonly '56': string;
+        readonly '64': string;
+    };
+    readonly pink: {
+        readonly '32': string;
+        readonly '40': string;
+        readonly '48': string;
+        readonly '56': string;
+        readonly '64': string;
+    };
+    readonly teal: {
+        readonly '32': string;
+        readonly '40': string;
+        readonly '48': string;
+        readonly '56': string;
+        readonly '64': string;
+    };
+};
+export declare const paymentIconAssets: {
+    readonly water: string;
+    readonly gas: string;
+    readonly electricity: string;
+    readonly donate: string;
+    readonly internet: string;
+    readonly phone: string;
+    readonly rent: string;
+    readonly tax: string;
+};
+export declare const legendDotAssets: {
+    readonly gray: {
+        readonly '16': string;
+        readonly '20': string;
+    };
+    readonly 'light-gray': {
+        readonly '16': string;
+        readonly '20': string;
+    };
+    readonly blue: {
+        readonly '16': string;
+        readonly '20': string;
+    };
+    readonly orange: {
+        readonly '16': string;
+        readonly '20': string;
+    };
+    readonly red: {
+        readonly '16': string;
+        readonly '20': string;
+    };
+    readonly green: {
+        readonly '16': string;
+        readonly '20': string;
+    };
+    readonly yellow: {
+        readonly '16': string;
+        readonly '20': string;
+    };
+    readonly purple: {
+        readonly '16': string;
+        readonly '20': string;
+    };
+    readonly sky: {
+        readonly '16': string;
+        readonly '20': string;
+    };
+    readonly pink: {
+        readonly '16': string;
+        readonly '20': string;
+    };
+    readonly teal: {
+        readonly '16': string;
+        readonly '20': string;
+    };
+};
+export declare const bannerAssets: {
+    readonly error: {
+        readonly filled: {
+            readonly icon: string;
+            readonly close: string;
+        };
+        readonly light: {
+            readonly icon: string;
+            readonly close: string;
+        };
+    };
+    readonly warning: {
+        readonly filled: {
+            readonly icon: string;
+            readonly close: string;
+        };
+        readonly light: {
+            readonly icon: string;
+            readonly close: string;
+        };
+    };
+    readonly success: {
+        readonly filled: {
+            readonly icon: string;
+            readonly close: string;
+        };
+        readonly light: {
+            readonly icon: string;
+            readonly close: string;
+        };
+    };
+    readonly information: {
+        readonly filled: {
+            readonly icon: string;
+            readonly close: string;
+        };
+        readonly light: {
+            readonly icon: string;
+            readonly close: string;
+        };
+    };
+    readonly feature: {
+        readonly filled: {
+            readonly icon: string;
+            readonly close: string;
+        };
+        readonly light: {
+            readonly icon: string;
+            readonly close: string;
+        };
+    };
+};
+export declare const statusModalAssets: {
+    readonly error: string;
+    readonly warning: string;
+    readonly success: string;
+    readonly information: string;
+};
+export declare const sortingAssets: {
+    readonly default: string;
+    readonly up: string;
+    readonly down: string;
+};
+export declare const passwordAssets: {
+    readonly empty: string;
+    readonly met: string;
+    readonly unmet: string;
+};
+export declare const displayAssets: {
+    readonly legendDisabled: string;
+    readonly contentClose: string;
+};

package/dist/components/ui/display-assets.js

@@ -0,0 +1,195 @@
+import { resolveMagnaAsset as __resolveMagnaAsset_1 } from "../../magna-assets.js";
+// Exact SVG assets supplied by the Figma design context.
+export const keyIconAssets = {
+    gray: {
+        '32': __resolveMagnaAsset_1('/magna/display/76be1.svg'),
+        '40': __resolveMagnaAsset_1('/magna/display/76be1.svg'),
+        '48': __resolveMagnaAsset_1('/magna/display/400d1.svg'),
+        '56': __resolveMagnaAsset_1('/magna/display/46574.svg'),
+        '64': __resolveMagnaAsset_1('/magna/display/38def.svg'),
+    },
+    blue: {
+        '32': __resolveMagnaAsset_1('/magna/display/16525.svg'),
+        '40': __resolveMagnaAsset_1('/magna/display/16525.svg'),
+        '48': __resolveMagnaAsset_1('/magna/display/d9698.svg'),
+        '56': __resolveMagnaAsset_1('/magna/display/7eeaf.svg'),
+        '64': __resolveMagnaAsset_1('/magna/display/c70b6.svg'),
+    },
+    orange: {
+        '32': __resolveMagnaAsset_1('/magna/display/6c384.svg'),
+        '40': __resolveMagnaAsset_1('/magna/display/6c384.svg'),
+        '48': __resolveMagnaAsset_1('/magna/display/4239a.svg'),
+        '56': __resolveMagnaAsset_1('/magna/display/cecfd.svg'),
+        '64': __resolveMagnaAsset_1('/magna/display/af15f.svg'),
+    },
+    red: {
+        '32': __resolveMagnaAsset_1('/magna/display/fbdce.svg'),
+        '40': __resolveMagnaAsset_1('/magna/display/fbdce.svg'),
+        '48': __resolveMagnaAsset_1('/magna/display/8a43e.svg'),
+        '56': __resolveMagnaAsset_1('/magna/display/d2cc2.svg'),
+        '64': __resolveMagnaAsset_1('/magna/display/edb55.svg'),
+    },
+    green: {
+        '32': __resolveMagnaAsset_1('/magna/display/3e51d.svg'),
+        '40': __resolveMagnaAsset_1('/magna/display/3e51d.svg'),
+        '48': __resolveMagnaAsset_1('/magna/display/90942.svg'),
+        '56': __resolveMagnaAsset_1('/magna/display/79287.svg'),
+        '64': __resolveMagnaAsset_1('/magna/display/bbddb.svg'),
+    },
+    yellow: {
+        '32': __resolveMagnaAsset_1('/magna/display/237a6.svg'),
+        '40': __resolveMagnaAsset_1('/magna/display/237a6.svg'),
+        '48': __resolveMagnaAsset_1('/magna/display/b0925.svg'),
+        '56': __resolveMagnaAsset_1('/magna/display/18a45.svg'),
+        '64': __resolveMagnaAsset_1('/magna/display/35edd.svg'),
+    },
+    purple: {
+        '32': __resolveMagnaAsset_1('/magna/display/5320a.svg'),
+        '40': __resolveMagnaAsset_1('/magna/display/5320a.svg'),
+        '48': __resolveMagnaAsset_1('/magna/display/06153.svg'),
+        '56': __resolveMagnaAsset_1('/magna/display/3f95e.svg'),
+        '64': __resolveMagnaAsset_1('/magna/display/61721.svg'),
+    },
+    pink: {
+        '32': __resolveMagnaAsset_1('/magna/display/648b1.svg'),
+        '40': __resolveMagnaAsset_1('/magna/display/648b1.svg'),
+        '48': __resolveMagnaAsset_1('/magna/display/b04fe.svg'),
+        '56': __resolveMagnaAsset_1('/magna/display/4ef80.svg'),
+        '64': __resolveMagnaAsset_1('/magna/display/bf1dc.svg'),
+    },
+    teal: {
+        '32': __resolveMagnaAsset_1('/magna/display/1db47.svg'),
+        '40': __resolveMagnaAsset_1('/magna/display/1db47.svg'),
+        '48': __resolveMagnaAsset_1('/magna/display/b8efe.svg'),
+        '56': __resolveMagnaAsset_1('/magna/display/6a48e.svg'),
+        '64': __resolveMagnaAsset_1('/magna/display/56cab.svg'),
+    },
+};
+export const paymentIconAssets = {
+    water: __resolveMagnaAsset_1('/magna/display/fb8ab.svg'),
+    gas: __resolveMagnaAsset_1('/magna/display/bd61c.svg'),
+    electricity: __resolveMagnaAsset_1('/magna/display/eac01.svg'),
+    donate: __resolveMagnaAsset_1('/magna/display/908e9.svg'),
+    internet: __resolveMagnaAsset_1('/magna/display/e894a.svg'),
+    phone: __resolveMagnaAsset_1('/magna/display/1c6fa.svg'),
+    rent: __resolveMagnaAsset_1('/magna/display/e59af.svg'),
+    tax: __resolveMagnaAsset_1('/magna/display/27ca8.svg'),
+};
+export const legendDotAssets = {
+    gray: {
+        '16': __resolveMagnaAsset_1('/magna/display/f8ebb.svg'),
+        '20': __resolveMagnaAsset_1('/magna/display/96ddd.svg'),
+    },
+    'light-gray': {
+        '16': __resolveMagnaAsset_1('/magna/display/60ab5.svg'),
+        '20': __resolveMagnaAsset_1('/magna/display/d71e2.svg'),
+    },
+    blue: {
+        '16': __resolveMagnaAsset_1('/magna/display/347ef.svg'),
+        '20': __resolveMagnaAsset_1('/magna/display/51b32.svg'),
+    },
+    orange: {
+        '16': __resolveMagnaAsset_1('/magna/display/cb00b.svg'),
+        '20': __resolveMagnaAsset_1('/magna/display/4e103.svg'),
+    },
+    red: {
+        '16': __resolveMagnaAsset_1('/magna/display/d428d.svg'),
+        '20': __resolveMagnaAsset_1('/magna/display/9e5a0.svg'),
+    },
+    green: {
+        '16': __resolveMagnaAsset_1('/magna/display/5fc70.svg'),
+        '20': __resolveMagnaAsset_1('/magna/display/a35a7.svg'),
+    },
+    yellow: {
+        '16': __resolveMagnaAsset_1('/magna/display/106a6.svg'),
+        '20': __resolveMagnaAsset_1('/magna/display/56a7a.svg'),
+    },
+    purple: {
+        '16': __resolveMagnaAsset_1('/magna/display/f479a.svg'),
+        '20': __resolveMagnaAsset_1('/magna/display/4477e.svg'),
+    },
+    sky: {
+        '16': __resolveMagnaAsset_1('/magna/display/6af80.svg'),
+        '20': __resolveMagnaAsset_1('/magna/display/48559.svg'),
+    },
+    pink: {
+        '16': __resolveMagnaAsset_1('/magna/display/8bdb8.svg'),
+        '20': __resolveMagnaAsset_1('/magna/display/6ce08.svg'),
+    },
+    teal: {
+        '16': __resolveMagnaAsset_1('/magna/display/d8f1d.svg'),
+        '20': __resolveMagnaAsset_1('/magna/display/90498.svg'),
+    },
+};
+export const bannerAssets = {
+    error: {
+        filled: {
+            icon: __resolveMagnaAsset_1('/magna/display/f01d5.svg'),
+            close: __resolveMagnaAsset_1('/magna/display/3a834.svg'),
+        },
+        light: {
+            icon: __resolveMagnaAsset_1('/magna/display/ec734.svg'),
+            close: __resolveMagnaAsset_1('/magna/display/8d235.svg'),
+        },
+    },
+    warning: {
+        filled: {
+            icon: __resolveMagnaAsset_1('/magna/display/bf02d.svg'),
+            close: __resolveMagnaAsset_1('/magna/display/3a834.svg'),
+        },
+        light: {
+            icon: __resolveMagnaAsset_1('/magna/display/469e4.svg'),
+            close: __resolveMagnaAsset_1('/magna/display/8d235.svg'),
+        },
+    },
+    success: {
+        filled: {
+            icon: __resolveMagnaAsset_1('/magna/display/65aad.svg'),
+            close: __resolveMagnaAsset_1('/magna/display/3a834.svg'),
+        },
+        light: {
+            icon: __resolveMagnaAsset_1('/magna/display/9e9ac.svg'),
+            close: __resolveMagnaAsset_1('/magna/display/8d235.svg'),
+        },
+    },
+    information: {
+        filled: {
+            icon: __resolveMagnaAsset_1('/magna/display/82602.svg'),
+            close: __resolveMagnaAsset_1('/magna/display/3a834.svg'),
+        },
+        light: {
+            icon: __resolveMagnaAsset_1('/magna/display/60c44.svg'),
+            close: __resolveMagnaAsset_1('/magna/display/8d235.svg'),
+        },
+    },
+    feature: {
+        filled: {
+            icon: __resolveMagnaAsset_1('/magna/display/be577.svg'),
+            close: __resolveMagnaAsset_1('/magna/display/3a834.svg'),
+        },
+        light: {
+            icon: __resolveMagnaAsset_1('/magna/display/943fb.svg'),
+            close: __resolveMagnaAsset_1('/magna/display/8d235.svg'),
+        },
+    },
+};
+export const statusModalAssets = {
+    error: __resolveMagnaAsset_1('/magna/display/7ea85.svg'),
+    warning: __resolveMagnaAsset_1('/magna/display/d92e5.svg'),
+    success: __resolveMagnaAsset_1('/magna/display/1c133.svg'),
+    information: __resolveMagnaAsset_1('/magna/display/665bc.svg'),
+};
+export const sortingAssets = {
+    default: __resolveMagnaAsset_1('/magna/display/e542b.svg'),
+    up: __resolveMagnaAsset_1('/magna/display/b464b.svg'),
+    down: __resolveMagnaAsset_1('/magna/display/c8a01.svg'),
+};
+export const passwordAssets = {
+    empty: __resolveMagnaAsset_1('/magna/display/ea9e5.svg'),
+    met: __resolveMagnaAsset_1('/magna/display/ee164.svg'),
+    unmet: __resolveMagnaAsset_1('/magna/display/6c7fb.svg'),
+};
+export const displayAssets = {
+    legendDisabled: __resolveMagnaAsset_1('/magna/display/691ac.svg'),
+    contentClose: __resolveMagnaAsset_1('/magna/display/e5a41.svg'),
+};