keystone-design-bootstrap 1.0.3

package/src/design_system/elements/select/select.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import type { FC, ReactNode, Ref, RefAttributes } from "react";
+import { createContext, isValidElement } from "react";
+import { ChevronDown } from "@untitledui/icons";
+import type { SelectProps as AriaSelectProps } from "react-aria-components";
+import { Button as AriaButton, ListBox as AriaListBox, Select as AriaSelect, SelectValue as AriaSelectValue } from "react-aria-components";
+import { Avatar } from '../avatar/avatar';
+import { HintText } from '../input/hint-text';
+import { Label } from '../input/label';
+import { cx } from '../../../utils/cx';
+import { isReactComponent } from '../../../utils/is-react-component';
+import { ComboBox } from './combobox';
+import { Popover } from "./popover";
+import { SelectItem } from "./select-item";
+
+export type SelectItemType = {
+    id: string;
+    label?: string;
+    avatarUrl?: string;
+    isDisabled?: boolean;
+    supportingText?: string;
+    icon?: FC | ReactNode;
+};
+
+export interface CommonProps {
+    hint?: string;
+    label?: string;
+    tooltip?: string;
+    size?: "sm" | "md";
+    placeholder?: string;
+}
+
+interface SelectProps extends Omit<AriaSelectProps<SelectItemType>, "children" | "items">, RefAttributes<HTMLDivElement>, CommonProps {
+    items?: SelectItemType[];
+    popoverClassName?: string;
+    placeholderIcon?: FC | ReactNode;
+    children: ReactNode | ((item: SelectItemType) => ReactNode);
+}
+
+interface SelectValueProps {
+    isOpen: boolean;
+    size: "sm" | "md";
+    isFocused: boolean;
+    isDisabled: boolean;
+    placeholder?: string;
+    ref?: Ref<HTMLButtonElement>;
+    placeholderIcon?: FC | ReactNode;
+}
+
+export const sizes = {
+    sm: { root: "py-2 px-3", shortcut: "pr-2.5" },
+    md: { root: "py-2.5 px-3.5", shortcut: "pr-3" },
+};
+
+const SelectValue = ({ isOpen, isFocused, isDisabled, size, placeholder, placeholderIcon, ref }: SelectValueProps) => {
+    return (
+        <AriaButton
+            ref={ref}
+            className={cx(
+                "relative flex w-full cursor-pointer items-center rounded-lg bg-primary shadow-xs ring-1 ring-primary outline-hidden transition duration-100 ease-linear ring-inset",
+                (isFocused || isOpen) && "ring-2 ring-brand",
+                isDisabled && "cursor-not-allowed bg-disabled_subtle text-disabled",
+            )}
+        >
+            <AriaSelectValue<SelectItemType>
+                className={cx(
+                    "flex h-max w-full items-center justify-start gap-2 truncate text-left align-middle",
+
+                    // Icon styles
+                    "*:data-icon:size-5 *:data-icon:shrink-0 *:data-icon:text-fg-quaternary in-disabled:*:data-icon:text-fg-disabled",
+
+                    sizes[size].root,
+                )}
+            >
+                {(state) => {
+                    const Icon = state.selectedItem?.icon || placeholderIcon;
+                    return (
+                        <>
+                            {state.selectedItem?.avatarUrl ? (
+                                <Avatar size="xs" src={state.selectedItem.avatarUrl} alt={state.selectedItem.label} />
+                            ) : isReactComponent(Icon) ? (
+                                <Icon data-icon aria-hidden="true" />
+                            ) : isValidElement(Icon) ? (
+                                Icon
+                            ) : null}
+
+                            {state.selectedItem ? (
+                                <section className="flex w-full gap-2 truncate">
+                                    <p className="truncate text-md font-medium text-primary">{state.selectedItem?.label}</p>
+                                    {state.selectedItem?.supportingText && <p className="text-md text-tertiary">{state.selectedItem?.supportingText}</p>}
+                                </section>
+                            ) : (
+                                <p className={cx("text-md text-placeholder", isDisabled && "text-disabled")}>{placeholder}</p>
+                            )}
+
+                            <ChevronDown
+                                aria-hidden="true"
+                                className={cx("ml-auto shrink-0 text-fg-quaternary", size === "sm" ? "size-4 stroke-[2.5px]" : "size-5")}
+                            />
+                        </>
+                    );
+                }}
+            </AriaSelectValue>
+        </AriaButton>
+    );
+};
+
+export const SelectContext = createContext<{ size: "sm" | "md" }>({ size: "sm" });
+
+const Select = ({ placeholder = "Select", placeholderIcon, size = "sm", children, items, label, hint, tooltip, className, ...rest }: SelectProps) => {
+    return (
+        <SelectContext.Provider value={{ size }}>
+            <AriaSelect {...rest} className={(state) => cx("flex flex-col gap-1.5", typeof className === "function" ? className(state) : className)}>
+                {(state) => (
+                    <>
+                        {label && (
+                            <Label isRequired={state.isRequired} tooltip={tooltip}>
+                                {label}
+                            </Label>
+                        )}
+
+                        <SelectValue {...state} {...{ size, placeholder }} placeholderIcon={placeholderIcon} />
+
+                        <Popover size={size} className={rest.popoverClassName}>
+                            <AriaListBox items={items} className="size-full outline-hidden">
+                                {children}
+                            </AriaListBox>
+                        </Popover>
+
+                        {hint && <HintText isInvalid={state.isInvalid}>{hint}</HintText>}
+                    </>
+                )}
+            </AriaSelect>
+        </SelectContext.Provider>
+    );
+};
+
+const _Select = Select as typeof Select & {
+    ComboBox: typeof ComboBox;
+    Item: typeof SelectItem;
+};
+_Select.ComboBox = ComboBox;
+_Select.Item = SelectItem;
+
+export { _Select as Select };

package/src/design_system/elements/shared-assets/credit-card/credit-card.tsx

@@ -0,0 +1,237 @@
+"use client";
+
+import { useMemo } from "react";
+import { cx, sortCx } from '../../../../utils/cx';
+import { MastercardIcon, MastercardIconWhite, PaypassIcon } from "./icons";
+
+const styles = sortCx({
+    // Normal
+    transparent: {
+        root: "bg-black/10 bg-linear-to-br from-white/30 to-transparent backdrop-blur-[6px] before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-white",
+        footerText: "text-white",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white/10",
+    },
+    "transparent-gradient": {
+        root: "bg-black/10 bg-linear-to-br from-white/30 to-transparent backdrop-blur-[6px] before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-white",
+        footerText: "text-white",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white/10",
+    },
+    "brand-dark": {
+        root: "bg-linear-to-tr from-brand-900 to-brand-700 before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-white",
+        footerText: "text-white",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white/10",
+    },
+    "brand-light": {
+        root: "bg-brand-100 before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-black/10 before:ring-inset",
+        company: "text-gray-700",
+        footerText: "text-gray-700",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white",
+    },
+    "gray-dark": {
+        root: "bg-linear-to-tr from-gray-900 to-gray-700 before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-white",
+        footerText: "text-white",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white/10",
+    },
+    "gray-light": {
+        root: "bg-gray-100 before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-black/10 before:ring-inset",
+        company: "text-gray-700",
+        footerText: "text-gray-700",
+        paypassIcon: "text-gray-400",
+        cardTypeRoot: "bg-white",
+    },
+
+    // Strip
+    "transparent-strip": {
+        root: "bg-linear-to-br from-white/30 to-transparent backdrop-blur-[6px] before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-white",
+        footerText: "text-white",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white/10",
+    },
+    "gray-strip": {
+        root: "bg-gray-100 before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-gray-700",
+        footerText: "text-white",
+        paypassIcon: "text-gray-400",
+        cardTypeRoot: "bg-white/10",
+    },
+    "gradient-strip": {
+        root: "bg-linear-to-b from-[#A5C0EE] to-[#FBC5EC] before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-white",
+        footerText: "text-white",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white/10",
+    },
+    "salmon-strip": {
+        root: "bg-[#F4D9D0] before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-gray-700",
+        footerText: "text-white",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white/10",
+    },
+
+    // Vertical strip
+    "gray-strip-vertical": {
+        root: "bg-linear-to-br from-white/30 to-transparent before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-white",
+        footerText: "text-white",
+        paypassIcon: "text-gray-400",
+        cardTypeRoot: "bg-white/10",
+    },
+    "gradient-strip-vertical": {
+        root: "bg-linear-to-b from-[#FBC2EB] to-[#A18CD1] before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-white",
+        footerText: "text-white",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white/10",
+    },
+    "salmon-strip-vertical": {
+        root: "bg-[#F4D9D0] before:pointer-events-none before:absolute before:inset-0 before:z-1 before:rounded-[inherit] before:mask-linear-135 before:mask-linear-to-white/20 before:ring-1 before:ring-white/30 before:ring-inset",
+        company: "text-white",
+        footerText: "text-white",
+        paypassIcon: "text-white",
+        cardTypeRoot: "bg-white/10",
+    },
+});
+
+const _NORMAL_TYPES = ["transparent", "transparent-gradient", "brand-dark", "brand-light", "gray-dark", "gray-light"] as const;
+const STRIP_TYPES = ["transparent-strip", "gray-strip", "gradient-strip", "salmon-strip"] as const;
+const VERTICAL_STRIP_TYPES = ["gray-strip-vertical", "gradient-strip-vertical", "salmon-strip-vertical"] as const;
+
+const CARD_WITH_COLOR_LOGO = ["brand-dark", "brand-light", "gray-dark", "gray-light"] as const;
+
+type CreditCardType = (typeof _NORMAL_TYPES)[number] | (typeof STRIP_TYPES)[number] | (typeof VERTICAL_STRIP_TYPES)[number];
+
+interface CreditCardProps {
+    company?: string;
+    cardNumber?: string;
+    cardHolder?: string;
+    cardExpiration?: string;
+    type?: CreditCardType;
+    className?: string;
+    width?: number;
+}
+
+const calculateScale = (desiredWidth: number, originalWidth: number, originalHeight: number) => {
+    // Calculate the scale factor
+    const scale = desiredWidth / originalWidth;
+
+    // Calculate the new dimensions
+    const scaledWidth = originalWidth * scale;
+    const scaledHeight = originalHeight * scale;
+
+    return {
+        scale: scale.toFixed(4), // Scale rounded to 4 decimal places
+        scaledWidth: scaledWidth.toFixed(2), // Width rounded to 2 decimal places
+        scaledHeight: scaledHeight.toFixed(2), // Height rounded to 2 decimal places
+    };
+};
+
+export const CreditCard = ({
+    company = "Untitled.",
+    cardNumber = "1234 1234 1234 1234",
+    cardHolder = "OLIVIA RHYE",
+    cardExpiration = "06/28",
+    type = "brand-dark",
+    className,
+    width,
+}: CreditCardProps) => {
+    const originalWidth = 316;
+    const originalHeight = 190;
+
+    const { scale, scaledWidth, scaledHeight } = useMemo(() => {
+        if (!width)
+            return {
+                scale: 1,
+                scaledWidth: originalWidth,
+                scaledHeight: originalHeight,
+            };
+
+        return calculateScale(width, originalWidth, originalHeight);
+    }, [width]);
+
+    return (
+        <div
+            style={{
+                width: `${scaledWidth}px`,
+                height: `${scaledHeight}px`,
+            }}
+            className={cx("relative flex", className)}
+        >
+            <div
+                style={{
+                    transform: `scale(${scale})`,
+                    width: `${originalWidth}px`,
+                    height: `${originalHeight}px`,
+                }}
+                className={cx("absolute top-0 left-0 flex origin-top-left flex-col justify-between overflow-hidden rounded-2xl p-4", styles[type].root)}
+            >
+                {/* Horizontal strip */}
+                {STRIP_TYPES.includes(type as (typeof STRIP_TYPES)[number]) && (
+                    <div className="pointer-events-none absolute inset-x-0 bottom-0 z-0 h-1/2 bg-gray-800"></div>
+                )}
+                {/* Vertical stripe */}
+                {VERTICAL_STRIP_TYPES.includes(type as (typeof VERTICAL_STRIP_TYPES)[number]) && (
+                    <div className="pointer-events-none absolute inset-y-0 right-22 left-0 z-0 bg-gray-800"></div>
+                )}
+                {/* Gradient diffusor */}
+                {type === "transparent-gradient" && (
+                    <div className="absolute -top-4 -left-4 grid grid-cols-2 blur-3xl">
+                        <div className="size-20 rounded-tl-full bg-pink-500 opacity-30 mix-blend-normal" />
+                        <div className="size-20 rounded-tr-full bg-orange-500 opacity-50 mix-blend-normal" />
+                        <div className="size-20 rounded-bl-full bg-blue-500 opacity-30 mix-blend-normal" />
+                        <div className="size-20 rounded-br-full bg-success-500 opacity-30 mix-blend-normal" />
+                    </div>
+                )}
+
+                <div className="relative flex items-start justify-between px-1 pt-1">
+                    <div className={cx("text-md leading-[normal] font-semibold", styles[type].company)}>{company}</div>
+
+                    <PaypassIcon className={styles[type].paypassIcon} />
+                </div>
+
+                <div className="relative flex items-end justify-between gap-3">
+                    <div className="flex min-w-0 flex-col gap-2">
+                        <div className="flex items-end gap-1">
+                            <p
+                                style={{
+                                    wordBreak: "break-word",
+                                }}
+                                className={cx("text-xs leading-snug font-semibold tracking-[0.6px] uppercase", styles[type].footerText)}
+                            >
+                                {cardHolder}
+                            </p>
+                            <p
+                                className={cx(
+                                    "ml-auto text-right text-xs leading-[normal] font-semibold tracking-[0.6px] tabular-nums",
+                                    styles[type].footerText,
+                                )}
+                            >
+                                {cardExpiration}
+                            </p>
+                        </div>
+                        <div className={cx("text-md leading-[normal] font-semibold tracking-[1px] tabular-nums", styles[type].footerText)}>
+                            {cardNumber}
+
+                            {/* This is just a placeholder to always keep the space for card number even if there's no card number yet. */}
+                            <span className="pointer-events-none invisible inline-block w-0 max-w-0 opacity-0">1</span>
+                        </div>
+                    </div>
+
+                    <div className={cx("flex h-8 w-11.5 shrink-0 items-center justify-center rounded", styles[type].cardTypeRoot)}>
+                        {CARD_WITH_COLOR_LOGO.includes(type as (typeof CARD_WITH_COLOR_LOGO)[number]) ? <MastercardIcon /> : <MastercardIconWhite />}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};

package/src/design_system/elements/shared-assets/credit-card/icons.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import type { SVGProps } from "react";
+
+export const PaypassIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="20" height="24" viewBox="0 0 20 24" fill="none" {...props}>
+            <g clipPath="url(#clip0_1307_7682)">
+                <path
+                    d="M15.1429 1.28571C17.0236 4.54326 18.0138 8.23849 18.0138 12C18.0138 15.7615 17.0236 19.4567 15.1429 22.7143M10.4286 3.64285C11.8956 6.18374 12.6679 9.06602 12.6679 12C12.6679 14.934 11.8956 17.8162 10.4286 20.3571M5.92859 5.80713C6.98933 7.66394 7.54777 9.77022 7.54777 11.9143C7.54777 14.0583 6.98933 16.1646 5.92859 18.0214M1.42859 8.14285C2.19306 9.29983 2.59834 10.6362 2.59834 12C2.59834 13.3638 2.19306 14.7002 1.42859 15.8571"
+                    stroke="currentColor"
+                    strokeWidth="2.57143"
+                    strokeLinecap="round"
+                />
+            </g>
+            <defs>
+                <clipPath id="clip0_1307_7682">
+                    <rect width="20" height="24" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    );
+};
+
+export const MastercardIconWhite = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="30" height="19" viewBox="0 0 30 19" fill="none" {...props}>
+            <path
+                opacity="0.5"
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M14.9053 16.4392C13.3266 17.7699 11.2787 18.5733 9.04092 18.5733C4.04776 18.5733 0 14.5737 0 9.63994C0 4.70619 4.04776 0.706604 9.04092 0.706604C11.2787 0.706604 13.3266 1.50993 14.9053 2.84066C16.484 1.50993 18.5319 0.706604 20.7697 0.706604C25.7629 0.706604 29.8106 4.70619 29.8106 9.63994C29.8106 14.5737 25.7629 18.5733 20.7697 18.5733C18.5319 18.5733 16.484 17.7699 14.9053 16.4392Z"
+                fill="white"
+            />
+            <path
+                opacity="0.5"
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M14.9053 16.4392C16.8492 14.8007 18.0818 12.3625 18.0818 9.63994C18.0818 6.91733 16.8492 4.47919 14.9053 2.84066C16.484 1.50993 18.5319 0.706604 20.7697 0.706604C25.7628 0.706604 29.8106 4.70619 29.8106 9.63994C29.8106 14.5737 25.7628 18.5733 20.7697 18.5733C18.5319 18.5733 16.484 17.7699 14.9053 16.4392Z"
+                fill="white"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M14.9053 16.4392C16.8492 14.8007 18.0818 12.3625 18.0818 9.63995C18.0818 6.91736 16.8492 4.47924 14.9053 2.8407C12.9614 4.47924 11.7288 6.91736 11.7288 9.63995C11.7288 12.3625 12.9614 14.8007 14.9053 16.4392Z"
+                fill="white"
+            />
+        </svg>
+    );
+};
+
+export const MastercardIcon = (props: SVGProps<SVGSVGElement>) => {
+    return (
+        <svg width="30" height="19" viewBox="0 0 30 19" fill="none" {...props}>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M14.9053 16.4393C13.3266 17.77 11.2787 18.5733 9.04092 18.5733C4.04776 18.5733 0 14.5737 0 9.64C0 4.70625 4.04776 0.706665 9.04092 0.706665C11.2787 0.706665 13.3266 1.51 14.9053 2.84072C16.484 1.51 18.5319 0.706665 20.7697 0.706665C25.7629 0.706665 29.8106 4.70625 29.8106 9.64C29.8106 14.5737 25.7629 18.5733 20.7697 18.5733C18.5319 18.5733 16.484 17.77 14.9053 16.4393Z"
+                fill="#ED0006"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M14.9053 16.4393C16.8492 14.8007 18.0818 12.3626 18.0818 9.64C18.0818 6.91739 16.8492 4.47925 14.9053 2.84072C16.484 1.50999 18.5319 0.706665 20.7697 0.706665C25.7628 0.706665 29.8106 4.70625 29.8106 9.64C29.8106 14.5737 25.7628 18.5733 20.7697 18.5733C18.5319 18.5733 16.484 17.77 14.9053 16.4393Z"
+                fill="#F9A000"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M14.9053 16.4393C16.8492 14.8008 18.0818 12.3627 18.0818 9.64007C18.0818 6.91748 16.8492 4.47936 14.9053 2.84082C12.9614 4.47936 11.7288 6.91748 11.7288 9.64007C11.7288 12.3627 12.9614 14.8008 14.9053 16.4393Z"
+                fill="#FF5E00"
+            />
+        </svg>
+    );
+};

package/src/design_system/elements/shared-assets/iphone-mockup.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import type { SVGProps } from "react";
+import { useId } from "react";
+import { cx } from '../../../utils/cx';
+
+interface IPhoneMockupProps extends SVGProps<SVGSVGElement> {
+    /**
+     * The image to display on the phone.
+     */
+    image: string;
+    /**
+     * The dark mode image to display in dark mode.
+     * If not provided, the light mode image will be used in dark mode.
+     */
+    imageDark?: string;
+    /**
+     * The theme of the phone.
+     * @default "light"
+     */
+    theme?: "light" | "dark";
+}
+
+export const IPhoneMockup = ({ image, imageDark, theme, className, ...svgProps }: IPhoneMockupProps) => {
+    // We need to use a unique ID because there might be
+    // multiple instances of this element in the same page.
+    const id = useId();
+
+    return (
+        <svg
+            width="314"
+            viewBox="0 0 314 640"
+            fill="none"
+            preserveAspectRatio="xMidYMin slice"
+            {...svgProps}
+            className={cx("h-auto", theme === undefined ? "text-black dark:text-white" : theme === "light" ? "text-black" : "text-white", className)}
+        >
+            <defs>
+                <pattern id={`screen-${id}`} patternContentUnits="objectBoundingBox" width="1" height="1">
+                    <use xlinkHref={`#screen-image-${id}`} className={cx(imageDark && "dark:hidden")} transform="scale(0.00133333 0.000615764)" />
+                    {imageDark && <use xlinkHref={`#screen-image-dark-${id}`} className="not-dark:hidden" transform="scale(0.00133333 0.000615764)" />}{" "}
+                </pattern>
+                <clipPath id="status-bar-box">
+                    <rect width="281.69" height="609.953" fill="white" transform="translate(15.7744 14.2725)" />
+                </clipPath>
+
+                {/* Light mode image (hidden in dark mode) */}
+                <image id={`screen-image-${id}`} width="750" height="1624" xlinkHref={image} className={cx(imageDark && "dark:hidden")} />
+                {/* Dark mode image (hidden in light mode) */}
+                {imageDark && <image id={`screen-image-dark-${id}`} width="750" height="1624" xlinkHref={imageDark} className="not-dark:hidden" />}
+            </defs>
+
+            {/* Status bar */}
+            <g clipPath="url(#status-bar-box)">
+                <rect
+                    width="281.69"
+                    height="609.953"
+                    transform="translate(15.7744 14.2725)"
+                    className={cx(theme === undefined ? "fill-white dark:fill-black" : theme === "light" ? "fill-white" : "fill-black")}
+                />
+                {/* The screen */}
+                <rect width="281.69" height="609.953" transform="translate(15.7744 38.3096)" fill={`url(#screen-${id})`} />
+                <path
+                    opacity="0.35"
+                    d="M268.545 29.2961C268.545 28.3972 269.273 27.6686 270.172 27.6686H282.692C283.591 27.6686 284.319 28.3972 284.319 29.2961V33.8031C284.319 34.702 283.591 35.4307 282.692 35.4307H270.172C269.273 35.4307 268.545 34.702 268.545 33.8031V29.2961Z"
+                    strokeWidth="0.751174"
+                    stroke="currentColor"
+                />
+                <path
+                    opacity="0.4"
+                    d="M285.446 30.0479V33.0525C286.05 32.7981 286.443 32.2061 286.443 31.5502C286.443 30.8943 286.05 30.3023 285.446 30.0479Z"
+                    fill="currentColor"
+                />
+                <path
+                    d="M269.671 29.7975C269.671 29.2443 270.12 28.7959 270.673 28.7959H282.191C282.744 28.7959 283.193 29.2443 283.193 29.7975V33.3029C283.193 33.8561 282.744 34.3045 282.191 34.3045H270.673C270.12 34.3045 269.671 33.8561 269.671 33.3029V29.7975Z"
+                    fill="currentColor"
+                />
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M258.651 29.0017C260.316 29.0018 261.917 29.6413 263.123 30.7882C263.214 30.8768 263.359 30.8757 263.449 30.7857L264.317 29.9094C264.362 29.8637 264.388 29.802 264.387 29.7377C264.387 29.6734 264.361 29.6119 264.315 29.5668C261.149 26.5324 256.154 26.5324 252.987 29.5668C252.941 29.6119 252.915 29.6733 252.915 29.7376C252.915 29.8019 252.94 29.8637 252.985 29.9094L253.854 30.7857C253.943 30.8758 254.088 30.8769 254.179 30.7882C255.386 29.6413 256.987 29.0017 258.651 29.0017ZM258.651 31.8527C259.566 31.8527 260.448 32.1926 261.126 32.8065C261.218 32.8936 261.362 32.8917 261.451 32.8022L262.319 31.9258C262.364 31.8799 262.39 31.8175 262.389 31.7527C262.388 31.6879 262.362 31.6261 262.315 31.5811C260.251 29.6608 257.054 29.6608 254.989 31.5811C254.943 31.6261 254.916 31.688 254.916 31.7528C254.915 31.8176 254.94 31.8799 254.986 31.9258L255.853 32.8022C255.943 32.8917 256.087 32.8936 256.179 32.8065C256.856 32.193 257.738 31.8531 258.651 31.8527ZM260.389 33.7709C260.39 33.8359 260.365 33.8985 260.318 33.9441L258.818 35.4582C258.774 35.5027 258.714 35.5277 258.652 35.5277C258.589 35.5277 258.529 35.5027 258.485 35.4582L256.984 33.9441C256.938 33.8985 256.913 33.8358 256.914 33.7709C256.915 33.7059 256.943 33.6443 256.992 33.6008C257.95 32.7903 259.353 32.7903 260.311 33.6008C260.36 33.6444 260.388 33.7059 260.389 33.7709Z"
+                    fill="currentColor"
+                />
+                <path
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    d="M248.388 27.5439H247.637C247.222 27.5439 246.886 27.8803 246.886 28.2951V34.8053C246.886 35.2202 247.222 35.5565 247.637 35.5565H248.388C248.803 35.5565 249.139 35.2202 249.139 34.8053V28.2951C249.139 27.8803 248.803 27.5439 248.388 27.5439ZM244.131 29.2964H244.883C245.297 29.2964 245.634 29.6328 245.634 30.0476V34.805C245.634 35.2199 245.297 35.5562 244.883 35.5562H244.131C243.717 35.5562 243.38 35.2199 243.38 34.805V30.0476C243.38 29.6328 243.717 29.2964 244.131 29.2964ZM241.377 31.0497H240.626C240.211 31.0497 239.874 31.386 239.874 31.8008V34.8055C239.874 35.2204 240.211 35.5567 240.626 35.5567H241.377C241.792 35.5567 242.128 35.2204 242.128 34.8055V31.8008C242.128 31.386 241.792 31.0497 241.377 31.0497ZM237.871 32.552H237.12C236.705 32.552 236.369 32.8883 236.369 33.3032V34.8055C236.369 35.2204 236.705 35.5567 237.12 35.5567H237.871C238.286 35.5567 238.623 35.2204 238.623 34.8055V33.3032C238.623 32.8883 238.286 32.552 237.871 32.552Z"
+                    fill="currentColor"
+                />
+                <path
+                    d="M43.8087 35.4986C45.8279 35.4986 47.0273 33.9196 47.0273 31.2457C47.0273 30.2389 46.8347 29.3917 46.4661 28.7369C45.9324 27.7191 45.0136 27.1689 43.8528 27.1689C42.1252 27.1689 40.9038 28.3298 40.9038 29.9583C40.9038 31.4878 42.0042 32.5992 43.5171 32.5992C44.4469 32.5992 45.2007 32.1645 45.5748 31.4108H45.5913C45.5913 31.4108 45.6133 31.4108 45.6188 31.4108C45.6298 31.4108 45.6683 31.4108 45.6683 31.4108C45.6683 33.2264 44.9806 34.3102 43.8197 34.3102C43.1375 34.3102 42.6094 33.9361 42.4278 33.3364H41.0138C41.2504 34.6403 42.3563 35.4986 43.8087 35.4986ZM43.8583 31.4713C42.945 31.4713 42.2958 30.8221 42.2958 29.9143C42.2958 29.0285 42.978 28.3518 43.8638 28.3518C44.7495 28.3518 45.4318 29.0395 45.4318 29.9363C45.4318 30.8221 44.766 31.4713 43.8583 31.4713Z"
+                    fill="currentColor"
+                />
+                <path
+                    d="M49.3492 35.4216C49.8719 35.4216 50.2295 35.0475 50.2295 34.5523C50.2295 34.0516 49.8719 33.683 49.3492 33.683C48.8321 33.683 48.4689 34.0516 48.4689 34.5523C48.4689 35.0475 48.8321 35.4216 49.3492 35.4216ZM49.3492 31.2953C49.8719 31.2953 50.2295 30.9266 50.2295 30.4315C50.2295 29.9308 49.8719 29.5622 49.3492 29.5622C48.8321 29.5622 48.4689 29.9308 48.4689 30.4315C48.4689 30.9266 48.8321 31.2953 49.3492 31.2953Z"
+                    fill="currentColor"
+                />
+                <path
+                    d="M55.3794 35.306H56.7383V33.8261H57.8112V32.6267H56.7383V27.367H54.7357C53.3327 29.4797 52.2159 31.2457 51.5006 32.5607V33.8261H55.3794V35.306ZM52.8156 32.5772C53.7399 30.9487 54.5651 29.6447 55.3244 28.5224H55.4014V32.6597H52.8156V32.5772Z"
+                    fill="currentColor"
+                />
+                <path d="M60.8373 35.306H62.2568V27.367H60.8428L58.7687 28.8195V30.1839L60.7438 28.7975H60.8373V35.306Z" fill="currentColor" />
+                <rect x="106.667" y="614.46" width="100.657" height="3.75587" rx="1.87793" fill="currentColor" />
+            </g>
+            <path
+                d="M311.294 163.718H312.406C313.02 163.718 313.517 164.218 313.517 164.834V237.763C313.517 238.379 313.02 238.879 312.406 238.879H311.294V163.718Z"
+                fill="#303030"
+            />
+            <path
+                d="M2.22266 254.506L1.11089 254.506C0.496874 254.506 -0.000880198 254.006 -0.000880144 253.39L-0.000876321 209.484C-0.000876268 208.867 0.496878 208.367 1.11089 208.367L2.22266 208.367L2.22266 254.506Z"
+                fill="#303030"
+            />
+            <path
+                d="M2.22266 193.484L1.11089 193.484C0.496874 193.484 -0.000880198 192.985 -0.000880144 192.368L-0.000876321 148.462C-0.000876268 147.846 0.496878 147.346 1.11089 147.346L2.22266 147.346L2.22266 193.484Z"
+                fill="#333333"
+            />
+            <path
+                d="M2.22266 125.021L1.11089 125.021C0.496878 125.021 -0.000877337 124.521 -0.000877283 123.904L-0.000875404 102.323C-0.00087535 101.707 0.496879 101.207 1.11089 101.207L2.22266 101.207L2.22266 125.021Z"
+                fill="#333333"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M4.58058 33.4236C2.22266 40.7098 2.22266 49.713 2.22266 67.7195V570.778C2.22266 588.785 2.22266 597.788 4.58058 605.074C9.3461 619.8 20.8451 631.345 35.5118 636.13C42.7688 638.498 51.7358 638.498 69.6698 638.498H243.846C261.78 638.498 270.747 638.498 278.004 636.13C292.671 631.345 304.17 619.8 308.936 605.074C311.294 597.788 311.294 588.785 311.294 570.778V67.7194C311.294 49.713 311.294 40.7098 308.936 33.4236C304.17 18.6976 292.671 7.15221 278.004 2.36745C270.747 0 261.78 0 243.846 0H69.6698C51.7358 0 42.7688 0 35.5118 2.36745C20.8451 7.15221 9.3461 18.6976 4.58058 33.4236ZM80.7881 18.2322V21.5809L80.841 21.5793L80.7878 21.953C80.7878 30.7894 87.9223 37.9526 96.7231 37.9526H216.794C225.595 37.9526 232.729 30.7894 232.729 21.953L232.676 21.5793L232.729 21.5809V18.2322C232.729 15.9717 234.554 14.1392 236.805 14.1392L246.352 14.1392C261.276 14.1392 268.738 14.1392 274.69 16.3971C284.044 19.9461 291.428 27.36 294.963 36.7521C297.212 42.7274 297.212 50.2197 297.212 65.2041V573.294C297.212 588.278 297.212 595.77 294.963 601.746C291.428 611.138 284.044 618.552 274.69 622.101C268.738 624.358 261.276 624.358 246.352 624.358H67.165C52.2408 624.358 44.7787 624.358 38.8273 622.101C29.473 618.552 22.0889 611.138 18.5542 601.746C16.3054 595.77 16.3054 588.278 16.3054 573.294V65.2041C16.3054 50.2197 16.3054 42.7274 18.5542 36.7521C22.0889 27.36 29.473 19.9461 38.8273 16.3971C44.7787 14.1392 52.2408 14.1392 67.165 14.1392L76.7116 14.1392C78.963 14.1392 80.7881 15.9717 80.7881 18.2322Z"
+                fill="#333333"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M244.144 1.48831H69.3739C51.6581 1.48831 42.9759 1.49749 35.9704 3.78291C21.7549 8.42045 10.6098 19.6106 5.99091 33.8835C3.71468 40.9173 3.70553 49.6344 3.70553 67.4217V571.076C3.70553 588.863 3.71468 597.58 5.99091 604.614C10.6098 618.887 21.7549 630.077 35.9704 634.715C42.9759 637 51.6581 637.009 69.3739 637.009H244.144C261.859 637.009 270.541 637 277.547 634.715C291.762 630.077 302.908 618.887 307.527 604.614C309.803 597.58 309.812 588.863 309.812 571.076V67.4217C309.812 49.6344 309.803 40.9173 307.527 33.8835C302.908 19.6106 291.762 8.42045 277.547 3.78291C270.541 1.49749 261.859 1.48831 244.144 1.48831ZM5.28601 33.6535C2.96436 40.8276 2.96436 49.6923 2.96436 67.4217V571.076C2.96436 588.805 2.96436 597.67 5.28601 604.844C9.97821 619.344 21.3003 630.711 35.7414 635.422C42.8867 637.753 51.7158 637.753 69.3739 637.753H244.144C261.802 637.753 270.631 637.753 277.776 635.422C292.217 630.711 303.539 619.344 308.231 604.844C310.553 597.67 310.553 588.805 310.553 571.076V67.4217C310.553 49.6923 310.553 40.8276 308.231 33.6535C303.539 19.1541 292.217 7.78631 277.776 3.07517C270.631 0.744141 261.802 0.744141 244.144 0.744141H69.3739C51.7158 0.744141 42.8867 0.744141 35.7414 3.07517C21.3003 7.78631 9.97821 19.1541 5.28601 33.6535Z"
+                fill="#303030"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M8.10672 34.5732C5.93018 41.299 5.93018 49.6096 5.93018 66.231V572.266C5.93018 588.888 5.93018 597.198 8.10672 603.924C12.5057 617.517 23.1201 628.174 36.6586 632.591C43.3574 634.777 51.6346 634.777 68.1891 634.777H245.33C261.885 634.777 270.162 634.777 276.861 632.591C290.399 628.174 301.014 617.517 305.413 603.924C307.589 597.198 307.589 588.888 307.589 572.266V66.231C307.589 49.6096 307.589 41.299 305.413 34.5732C301.014 20.98 290.399 10.3227 276.861 5.90604C270.162 3.7207 261.885 3.7207 245.33 3.7207H68.1891C51.6346 3.7207 43.3574 3.7207 36.6586 5.90604C23.1201 10.3227 12.5057 20.98 8.10672 34.5732ZM80.7888 18.232V21.5808L80.8418 21.5791L80.7886 21.9528C80.7886 30.7892 87.9231 37.9525 96.7239 37.9525H216.795C225.596 37.9525 232.73 30.7892 232.73 21.9528L232.677 21.5791L232.73 21.5808V18.232C232.73 15.9716 234.555 14.1391 236.806 14.1391L246.353 14.1391C261.277 14.1391 268.739 14.1391 274.69 16.397C284.045 19.9459 291.429 27.3599 294.964 36.7519C297.212 42.7273 297.212 50.2195 297.212 65.204V573.293C297.212 588.278 297.212 595.77 294.964 601.745C291.429 611.137 284.045 618.551 274.69 622.1C268.739 624.358 261.277 624.358 246.353 624.358H67.1657C52.2415 624.358 44.7794 624.358 38.8281 622.1C29.4738 618.551 22.0897 611.137 18.555 601.745C16.3062 595.77 16.3062 588.278 16.3062 573.293V65.204C16.3062 50.2195 16.3062 42.7273 18.555 36.7519C22.0897 27.3599 29.4738 19.9459 38.8281 16.397C44.7794 14.1391 52.2415 14.1391 67.1658 14.1391L76.7124 14.1391C78.9638 14.1391 80.7888 15.9716 80.7888 18.232Z"
+                fill="#121515"
+            />
+            <rect x="245.33" width="4.44705" height="3.72085" fill="#414141" />
+            <rect x="307.588" y="63.999" width="3.70594" height="4.46502" fill="#414141" />
+            <rect x="2.22363" y="63.999" width="3.70589" height="4.46502" fill="#414141" />
+            <rect x="2.22363" y="570.033" width="3.70589" height="4.465" fill="#414141" />
+            <rect x="307.588" y="570.033" width="3.70594" height="4.465" fill="#414141" />
+            <rect x="63.7402" y="634.777" width="4.44707" height="3.72084" fill="#414141" />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M188.259 29.7671C191.534 29.7671 194.188 27.1017 194.188 23.8137C194.188 20.5258 191.534 17.8604 188.259 17.8604C184.984 17.8604 182.33 20.5258 182.33 23.8137C182.33 27.1017 184.984 29.7671 188.259 29.7671Z"
+                fill="#262C2D"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M188.259 27.5345C190.305 27.5345 191.965 25.8686 191.965 23.8136C191.965 21.7587 190.305 20.0928 188.259 20.0928C186.212 20.0928 184.553 21.7587 184.553 23.8136C184.553 25.8686 186.212 27.5345 188.259 27.5345Z"
+                fill="#121515"
+            />
+            <path
+                opacity="0.4"
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M188.26 23.0701C188.67 23.0701 189.002 22.7368 189.002 22.3256C189.002 21.9144 188.67 21.5811 188.26 21.5811C187.851 21.5811 187.519 21.9144 187.519 22.3256C187.519 22.7368 187.851 23.0701 188.26 23.0701Z"
+                fill="#636F73"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M138.601 23.8136C138.601 22.5806 139.6 21.5811 140.833 21.5811H172.686C173.919 21.5811 174.918 22.5806 174.918 23.8136C174.918 25.0465 173.919 26.0461 172.686 26.0461H140.833C139.6 26.0461 138.601 25.0465 138.601 23.8136Z"
+                fill="#262C2D"
+            />
+        </svg>
+    );
+};

package/src/design_system/elements/shared-assets/section-divider.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import type { HTMLAttributes } from "react";
+import { cx } from '../../../utils/cx';
+
+export const SectionDivider = (props: HTMLAttributes<HTMLDivElement>) => {
+    return (
+        <div {...props} className={cx("mx-auto max-w-container px-4 md:px-8", props.className)}>
+            <hr className="h-px w-full border-none bg-border-secondary" />
+        </div>
+    );
+};