Manifest Debugger

import { DsAutocomplete, DsIcon } from "@drivenets/design-system";

const Default = () => <DsAutocomplete
    onValueChange={fn()}
    onInputValueChange={fn()}
    options={mockOptions}
    showTrigger
    placeholder="Select or type to search..."
    style={{ width: '300px' }} />;

const SearchMode = () => <DsAutocomplete
    onValueChange={fn()}
    onInputValueChange={fn()}
    options={mockOptions}
    showTrigger={false}
    placeholder="Start typing to search..."
    style={{ width: '300px' }} />;

const SearchWithIcon = () => <DsAutocomplete
    onValueChange={fn()}
    onInputValueChange={fn()}
    options={countries}
    showTrigger={false}
    startAdornment={<DsIcon icon="search" size="medium" aria-label="search icon" />}
    placeholder="Search countries..."
    style={{ width: '300px' }} />;

const AllVariants = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
        <div style={{ width: '300px' }}>
            <p>Default (with trigger)</p>
            <DsAutocomplete options={mockOptions} showTrigger placeholder="Select or type..." />
        </div>
        <div style={{ width: '300px' }}>
            <p>Search Mode (no trigger)</p>
            <DsAutocomplete options={mockOptions} showTrigger={false} placeholder="Start typing..." />
        </div>
        <div style={{ width: '300px' }}>
            <p>Search with Icon</p>
            <DsAutocomplete
                options={countries}
                showTrigger={false}
                startAdornment={<DsIcon icon="search" size="medium" aria-label="search icon" />}
                placeholder="Search countries..."
            />
        </div>
    </div>
);

const States = () => (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '20px' }}>
        <div style={{ width: '300px' }}>
            <p>Disabled</p>
            <DsAutocomplete options={mockOptions} disabled placeholder="Disabled autocomplete..." />
        </div>
        <div style={{ width: '300px' }}>
            <p>Invalid</p>
            <DsAutocomplete options={mockOptions} invalid placeholder="Invalid autocomplete..." />
        </div>
    </div>
);

const AsyncSearch = () => {
    const [options, setOptions] = useState<DsAutocompleteOption[]>([]);
    const [loading, setLoading] = useState(false);

    const handleInputValueChange = async (value: string) => {
        args.onInputValueChange?.(value);

        if (!value) {
            setOptions([]);
            return;
        }

        setLoading(true);
        const results = await fetchCountries(value);
        setOptions(results);
        setLoading(false);
    };

    return (
        <DsAutocomplete
            onValueChange={fn()}
            options={options}
            loading={loading}
            onInputValueChange={handleInputValueChange}
            showTrigger={false}
            startAdornment={<DsIcon icon="search" size="medium" aria-label="search icon" />}
            placeholder="Search countries (async)..."
            locale={{ noMatches: 'No results found' }}
            style={{ width: '300px' }} />
    );
};

const AsyncOptions = () => {
    const [options, setOptions] = useState<DsAutocompleteOption[]>([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        void fetchAllCountries().then((results) => {
            setOptions(results);
            setLoading(false);
        });
    }, []);

    return (
        <DsAutocomplete
            onValueChange={fn()}
            onInputValueChange={fn()}
            options={options}
            loading={loading}
            placeholder="Select a country..."
            style={{ width: '300px' }} />
    );
};

import { DsButtonV3, DsButtonV3 as DsButtonV3Wrapped } from "@drivenets/design-system";

const Default = () => <DsButtonV3
    onClick={fn()}
    color="default"
    variant="primary"
    size="medium"
    icon="check_circle">Button</DsButtonV3>;

const MatrixDefault = () => (
    <div className={storyStyles.matrix}>
        <p className={storyStyles.sectionTitle}>Default</p>
        <MatrixGrid color="default" />
    </div>
);

const MatrixError = () => (
    <div className={storyStyles.matrix}>
        <p className={storyStyles.sectionTitle}>Error</p>
        <MatrixGrid color="error" />
    </div>
);

const MatrixOnDark = () => (
    <div className={storyStyles.matrix}>
        <div className={storyStyles.onDark}>
            <p className={classNames(storyStyles.sectionTitle, storyStyles.onDarkSectionTitle)}>
                On Dark — Default
            </p>
            <MatrixGrid color="light" />
        </div>
    </div>
);

const MatrixIcons = () => (
    <div className={storyStyles.matrix}>
        <p className={storyStyles.sectionTitle}>Icons — Default</p>
        <IconMatrixGrid rows={defaultIconMatrixRows} />

        <div className={storyStyles.onDark}>
            <p
                className={classNames(
                    storyStyles.sectionTitle,
                    storyStyles.onDarkSectionTitle,
                    storyStyles.sectionTitleSpaced,
                )}
            >
                Icons — On Dark
            </p>
            <IconMatrixGrid rows={onDarkIconMatrixRows} isOnDark />
        </div>
    </div>
);

const ResponsiveSize = () => (
    <div className={storyStyles.responsiveRow}>
        <DsButtonV3Wrapped size={{ lg: 'large', md: 'small' }} icon="check_circle" onClick={fn()}>
            lg: large / md: small
        </DsButtonV3Wrapped>

        <DsButtonV3Wrapped size={{ lg: 'medium', md: 'tiny' }} icon="check_circle" onClick={fn()}>
            lg: medium / md: tiny
        </DsButtonV3Wrapped>

        <DsButtonV3Wrapped size="medium" icon="check_circle" onClick={fn()}>
            static: medium
        </DsButtonV3Wrapped>
    </div>
);

import { DsChip } from "@drivenets/design-system";

const Default = () => <DsChip label="Default Label" />;

import { DsChipGroup } from "@drivenets/design-system";

const Default = function Render() {
    const [filters, setFilters] = useState(sampleFilters);

    const handleClearAll = () => {
        setFilters([]);
    };

    const handleAddFilter = () => {
        const newId = `new-${String(Date.now())}`;
        setFilters((prev) => [
            ...prev,
            {
                id: newId,
                label: `New Filter ${String(prev.length + 1)}`,
            },
        ]);
    };

    const handleFilterDelete = (filter: ChipItem) => {
        setFilters((prev) => prev.filter((f) => f.id !== filter.id));
    };

    const handleFilterSelect = (filter: ChipItem) => {
        setFilters((prev) => prev.map((f) => (f.id === filter.id ? { ...f, selected: !f.selected } : f)));
    };

    return (
        <div className={styles.container}>
            <DsChipGroup
                items={filters}
                onClearAll={handleClearAll}
                onItemDelete={handleFilterDelete}
                onItemSelect={handleFilterSelect}
            />
            <div className={styles.controlsContainer}>
                <button onClick={handleAddFilter} className={styles.addButton}>
                    Add Filter
                </button>
                <p className={styles.infoText}>Total filters: {filters.length}</p>
                <p className={styles.infoText}>
                    Selected filters: [
                    {filters
                        .filter((filter) => filter.selected)
                        .map((filter) => `"${filter.label}"`)
                        .join(', ')}
                    ]
                </p>
            </div>
        </div>
    );
};

import { DsCommentBubble } from "@drivenets/design-system";

const Initial = () => <DsCommentBubble
    referenceTag="Resource allocation"
    onSend={fn()}
    onClose={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    onActionRequiredChange={fn()}
    onValueChange={fn()}
    onEditMessage={fn()}
    onDeleteMessage={fn()}
    onMessageMarkUnread={fn()}
    onMessageResolved={fn()}
    value="" />;

const Typing = () => <DsCommentBubble
    referenceTag="Resource allocation"
    onSend={fn()}
    onClose={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    onActionRequiredChange={fn()}
    onValueChange={fn()}
    onEditMessage={fn()}
    onDeleteMessage={fn()}
    onMessageMarkUnread={fn()}
    onMessageResolved={fn()}
    value="This is a new comment..." />;

const TypingWithActionRequired = () => <DsCommentBubble
    referenceTag="Resource allocation"
    onSend={fn()}
    onClose={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    onActionRequiredChange={fn()}
    onValueChange={fn()}
    onEditMessage={fn()}
    onDeleteMessage={fn()}
    onMessageMarkUnread={fn()}
    onMessageResolved={fn()}
    value="This needs attention!"
    actionRequired />;

const TypingWithoutActionRequired = () => <DsCommentBubble
    referenceTag="Resource allocation"
    onSend={fn()}
    onClose={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    onActionRequiredChange={fn()}
    onValueChange={fn()}
    onEditMessage={fn()}
    onDeleteMessage={fn()}
    onMessageMarkUnread={fn()}
    onMessageResolved={fn()}
    value="This is a new comment..."
    hideActionRequired />;

const Thread = () => <DsCommentBubble
    referenceTag="Resource allocation"
    onSend={fn()}
    onClose={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    onActionRequiredChange={fn()}
    onValueChange={fn()}
    onEditMessage={fn()}
    onDeleteMessage={fn()}
    onMessageMarkUnread={fn()}
    onMessageResolved={fn()}
    comment={createMockComment()}
    currentUser={currentUser} />;

const ThreadWithActionRequired = () => <DsCommentBubble
    referenceTag="Resource allocation"
    onSend={fn()}
    onClose={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    onActionRequiredChange={fn()}
    onValueChange={fn()}
    onEditMessage={fn()}
    onDeleteMessage={fn()}
    onMessageMarkUnread={fn()}
    onMessageResolved={fn()}
    comment={createMockComment()}
    actionRequired
    currentUser={currentUser} />;

const ThreadWithoutActionRequired = () => <DsCommentBubble
    referenceTag="Resource allocation"
    onSend={fn()}
    onClose={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    onActionRequiredChange={fn()}
    onValueChange={fn()}
    onEditMessage={fn()}
    onDeleteMessage={fn()}
    onMessageMarkUnread={fn()}
    onMessageResolved={fn()}
    comment={createMockComment()}
    currentUser={currentUser}
    hideActionRequired
    actionRequired />;

const SendButtonClick = () => <DsCommentBubble
    referenceTag="Resource allocation"
    onSend={fn()}
    onClose={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    onActionRequiredChange={fn()}
    onValueChange={fn()}
    onEditMessage={fn()}
    onDeleteMessage={fn()}
    onMessageMarkUnread={fn()}
    onMessageResolved={fn()}
    value="Test message to send" />;

const SendWithEnterKey = () => <DsCommentBubble
    referenceTag="Resource allocation"
    onSend={fn()}
    onClose={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    onActionRequiredChange={fn()}
    onValueChange={fn()}
    onEditMessage={fn()}
    onDeleteMessage={fn()}
    onMessageMarkUnread={fn()}
    onMessageResolved={fn()}
    value="Enter key message" />;

const SendDisabledWhenEmpty = () => <DsCommentBubble
    referenceTag="Resource allocation"
    onSend={fn()}
    onClose={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    onActionRequiredChange={fn()}
    onValueChange={fn()}
    onEditMessage={fn()}
    onDeleteMessage={fn()}
    onMessageMarkUnread={fn()}
    onMessageResolved={fn()}
    value="" />;

const ThreadSendDisabledWhenEmpty = () => <DsCommentBubble
    referenceTag="Resource allocation"
    onSend={fn()}
    onClose={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    onActionRequiredChange={fn()}
    onValueChange={fn()}
    onEditMessage={fn()}
    onDeleteMessage={fn()}
    onMessageMarkUnread={fn()}
    onMessageResolved={fn()}
    comment={createMockComment()}
    currentUser={currentUser}
    value="" />;

const ThreadSendEnabled = () => <DsCommentBubble
    referenceTag="Resource allocation"
    onSend={fn()}
    onClose={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    onActionRequiredChange={fn()}
    onValueChange={fn()}
    onEditMessage={fn()}
    onDeleteMessage={fn()}
    onMessageMarkUnread={fn()}
    onMessageResolved={fn()}
    comment={createMockComment()}
    currentUser={currentUser}
    value="A reply" />;

const ThreadCloseButton = () => <DsCommentBubble
    referenceTag="Resource allocation"
    onSend={fn()}
    onClose={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    onActionRequiredChange={fn()}
    onValueChange={fn()}
    onEditMessage={fn()}
    onDeleteMessage={fn()}
    onMessageMarkUnread={fn()}
    onMessageResolved={fn()}
    comment={createMockComment()}
    currentUser={currentUser} />;

const ThreadResolveButton = () => <DsCommentBubble
    referenceTag="Resource allocation"
    onSend={fn()}
    onClose={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    onActionRequiredChange={fn()}
    onValueChange={fn()}
    onEditMessage={fn()}
    onDeleteMessage={fn()}
    onMessageMarkUnread={fn()}
    onMessageResolved={fn()}
    comment={createMockComment()}
    currentUser={currentUser} />;

const TextareaValueChange = () => <DsCommentBubble
    referenceTag="Resource allocation"
    onSend={fn()}
    onClose={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    onActionRequiredChange={fn()}
    onValueChange={fn()}
    onEditMessage={fn()}
    onDeleteMessage={fn()}
    onMessageMarkUnread={fn()}
    onMessageResolved={fn()}
    comment={createMockComment()}
    currentUser={currentUser}
    value="" />;

const InitialWithReferenceTag = () => <DsCommentBubble
    referenceTag="My tag"
    onSend={fn()}
    onClose={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    onActionRequiredChange={fn()}
    onValueChange={fn()}
    onEditMessage={fn()}
    onDeleteMessage={fn()}
    onMessageMarkUnread={fn()}
    onMessageResolved={fn()} />;

const ThreadWithReferenceTag = () => <DsCommentBubble
    referenceTag="Resource allocation"
    onSend={fn()}
    onClose={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    onActionRequiredChange={fn()}
    onValueChange={fn()}
    onEditMessage={fn()}
    onDeleteMessage={fn()}
    onMessageMarkUnread={fn()}
    onMessageResolved={fn()}
    comment={createMockComment()}
    currentUser={currentUser} />;

const FullInteractiveFlow = function FullFlowStory() {
    const [value, setValue] = useState('');
    const [actionRequired, setActionRequired] = useState(false);
    const [comment, setComment] = useState<CommentData | undefined>(undefined);

    const handleSend = (content: string, isActionRequired: boolean) => {
        if (!comment) {
            const newComment: CommentData = {
                id: 'comment-1',
                numericId: 63,
                author: currentUser,
                createdAt: new Date(),
                isResolved: false,
                messages: [
                    {
                        id: 'msg-1',
                        author: currentUser,
                        content,
                        createdAt: new Date(),
                        isInitialMessage: true,
                    },
                ],
            };
            setComment(newComment);
            setActionRequired(isActionRequired);
        } else {
            const newMessage = {
                id: `msg-${String(Date.now())}`,
                author: currentUser,
                content,
                createdAt: new Date(),
            };

            setComment((prev) => {
                if (!prev) {
                    return prev;
                }
                return {
                    ...prev,
                    messages: [...prev.messages, newMessage],
                };
            });
        }
        setValue('');
    };

    const handleEditMessage = (messageId: string, newContent: string) => {
        if (!comment) {
            return;
        }
        setComment((prev) => {
            if (!prev) {
                return prev;
            }
            return {
                ...prev,
                messages: prev.messages.map((msg) =>
                    msg.id === messageId ? { ...msg, content: newContent } : msg,
                ),
            };
        });
    };

    const handleDeleteMessage = (messageId: string) => {
        if (!comment) {
            return;
        }
        setComment((prev) => {
            if (!prev) {
                return prev;
            }
            return {
                ...prev,
                messages: prev.messages.filter((msg) => msg.id !== messageId),
            };
        });
    };

    const handleClose = () => {
        setComment(undefined);
        setValue('');
        setActionRequired(false);
    };

    return (
        <div className={styles.interactiveContainer}>
            <p className={styles.instructions}>
                <strong>Full Flow Test:</strong>
                <br />
                1. Start by typing in the bubble - it will expand and show the footer
                <br />
                2. Send your first comment to create a thread
                <br />
                3. Add more replies to see the thread grow
                <br />
                4. Close to reset and start over
            </p>
            <DsCommentBubble
                comment={comment}
                currentUser={currentUser}
                referenceTag="Resource allocation"
                value={value}
                onValueChange={setValue}
                actionRequired={actionRequired}
                onActionRequiredChange={setActionRequired}
                onSend={handleSend}
                onEditMessage={handleEditMessage}
                onDeleteMessage={handleDeleteMessage}
                onMessageMarkUnread={(id) => console.log('Mark unread message:', id)}
                onMessageResolved={(id) => console.log('Resolved message:', id)}
                onClose={handleClose}
                onResolve={() => console.log('Resolve clicked')}
                onToggleActionRequired={() => console.log('Toggle action required')}
                onForward={() => console.log('Forward')}
                onMarkUnread={() => console.log('Mark unread')}
                onCopyLink={() => console.log('Copy link')}
                onDelete={() => console.log('Delete')}
            />
        </div>
    );
};

const InteractiveThread = function InteractiveThreadStory() {
    const [value, setValue] = useState('');
    const [actionRequired, setActionRequired] = useState(false);
    const [comment, setComment] = useState(createMockComment());

    const handleSend = (content: string) => {
        const newMessage = {
            id: `msg-${String(Date.now())}`,
            author: currentUser,
            content,
            createdAt: new Date(),
        };

        setComment((prev) => ({
            ...prev,
            messages: [...prev.messages, newMessage],
        }));
        setValue('');
    };

    const handleEditMessage = (messageId: string, newContent: string) => {
        setComment((prev) => ({
            ...prev,
            messages: prev.messages.map((msg) => (msg.id === messageId ? { ...msg, content: newContent } : msg)),
        }));
    };

    const handleDeleteMessage = (messageId: string) => {
        setComment((prev) => ({
            ...prev,
            messages: prev.messages.filter((msg) => msg.id !== messageId),
        }));
    };

    return (
        <DsCommentBubble
            comment={comment}
            currentUser={currentUser}
            referenceTag="Resource allocation"
            value={value}
            onValueChange={setValue}
            actionRequired={actionRequired}
            onActionRequiredChange={setActionRequired}
            onSend={handleSend}
            onEditMessage={handleEditMessage}
            onDeleteMessage={handleDeleteMessage}
            onMessageMarkUnread={(id) => console.log('Mark unread message:', id)}
            onMessageResolved={(id) => console.log('Resolved message:', id)}
            onClose={() => console.log('Close clicked')}
            onResolve={() => console.log('Resolve clicked')}
            onToggleActionRequired={() => console.log('Toggle action required')}
            onForward={() => console.log('Forward')}
            onMarkUnread={() => console.log('Mark unread')}
            onCopyLink={() => console.log('Copy link')}
            onDelete={() => console.log('Delete')}
        />
    );
};

const AllTypes = () => (
    <div className={styles.grid}>
        <div className={styles.column}>
            <h4 className={styles.heading}>Initial</h4>
            <DsCommentBubble />
        </div>

        <div className={styles.column}>
            <h4 className={styles.heading}>Typing</h4>
            <DsCommentBubble value="This is a comment..." />
        </div>

        <div className={styles.column}>
            <h4 className={styles.heading}>Typing (Action Required)</h4>
            <DsCommentBubble value="This needs attention!" actionRequired />
        </div>

        <div className={styles.column}>
            <h4 className={styles.heading}>Thread</h4>
            <DsCommentBubble comment={createMockComment()} currentUser={currentUser} />
        </div>

        <div className={styles.column}>
            <h4 className={styles.heading}>Thread (Action Required)</h4>
            <DsCommentBubble comment={createMockComment()} currentUser={currentUser} actionRequired />
        </div>
    </div>
);

import { DsCommentCard } from "@drivenets/design-system";

const DefaultCard = () => <DsCommentCard
    onClick={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    comment={createMockComment()}
    overflow="hidden" />;

const ActionRequired = () => <DsCommentCard
    onClick={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    comment={createMockComment({ isActionRequired: true })}
    overflow="hidden" />;

const DisabledState = () => <DsCommentCard
    onClick={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    comment={createMockComment()}
    disabled
    overflow="hidden" />;

const FullMessage = () => <DsCommentCard
    onClick={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    comment={createMockComment()}
    overflow="displayed" />;

const SingleMessage = () => <DsCommentCard
    onClick={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    comment={createMockComment({
        messages: [
            {
                id: 'msg-1',
                author: {
                    id: 'user-1',
                    name: 'Karen J.',
                    avatarSrc: 'https://i.pravatar.cc/40?img=1',
                },
                content: 'This is a short single message comment.',
                createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000),
                isInitialMessage: true,
            },
        ],
    })}
    overflow="hidden" />;

const Default = () => (
    <div className={styles.grid}>
        <div className={styles.column}>
            <h4 className={styles.heading}>Default</h4>
            <DsCommentCard comment={createMockComment()} overflow="hidden" />
        </div>

        <div className={styles.column}>
            <h4 className={styles.heading}>Action Required</h4>
            <DsCommentCard comment={createMockComment()} overflow="hidden" />
        </div>

        <div className={styles.column}>
            <h4 className={styles.heading}>Disabled</h4>
            <DsCommentCard comment={createMockComment()} disabled={true} overflow="hidden" />
        </div>

        <div className={styles.column}>
            <h4 className={styles.heading}>Full Message</h4>
            <DsCommentCard comment={createMockComment()} overflow="displayed" />
        </div>
    </div>
);

const WithReferenceTag = () => <DsCommentCard
    onClick={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    comment={createMockComment({ referenceTag: 'Resource allocation' })}
    overflow="hidden" />;

const WithCallbacks = () => <DsCommentCard
    onClick={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    comment={createMockComment()}
    overflow="hidden" />;

const SingleReply = () => <DsCommentCard
    onClick={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    comment={createMockComment({
        messages: [
            {
                id: 'msg-1',
                author: { id: 'user-1', name: 'Karen J.' },
                content: 'Initial message',
                createdAt: new Date(Date.now() - 24 * 60 * 60 * 1000),
                isInitialMessage: true,
            },
            {
                id: 'msg-2',
                author: { id: 'user-2', name: 'John D.' },
                content: 'One reply',
                createdAt: new Date(Date.now() - 12 * 60 * 60 * 1000),
            },
        ],
    })}
    overflow="hidden" />;

const CustomFormatter = () => <DsCommentCard
    onClick={fn()}
    onResolve={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    comment={createMockComment()}
    overflow="hidden"
    formatTimestamp={(date: Date) => {
        const options: Intl.DateTimeFormatOptions = {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
        };
        return date.toLocaleDateString('en-US', options);
    }} />;

import { DsCommentBubble, DsCommentIndicator } from "@drivenets/design-system";

const Placeholder = () => <DsCommentIndicator type="placeholder" onClick={fn()} />;

const DefaultIndicator = () => <DsCommentIndicator type="default" avatarSrc="https://i.pravatar.cc/40?img=1" onClick={fn()} />;

const ActionRequired = () => <DsCommentIndicator
    type="action-required"
    avatarSrc="https://i.pravatar.cc/40?img=2"
    onClick={fn()} />;

const Default = () => (
    <div className={styles.container}>
        <div className={styles.header}>
            <div className={styles.headerCell}>Placeholder</div>
            <div className={styles.headerCell}>No action required</div>
            <div className={styles.headerCell}>Action Required</div>
        </div>
        <div className={styles.row}>
            <DsCommentIndicator type="placeholder" onClick={fn()} />
            <DsCommentIndicator type="default" avatarSrc="https://i.pravatar.cc/40?img=1" onClick={fn()} />
            <DsCommentIndicator
                type="action-required"
                avatarSrc="https://i.pravatar.cc/40?img=2"
                onClick={fn()}
            />
        </div>
    </div>
);

const WithEmptyBubble = function WithEmptyBubbleStory() {
    const [isOpen, setIsOpen] = useState(false);
    const [value, setValue] = useState('');
    const [actionRequired, setActionRequired] = useState(false);
    const [comment, setComment] = useState<CommentData | undefined>(undefined);

    const handleSend = (content: string, isActionRequired: boolean) => {
        if (!comment) {
            const newComment: CommentData = {
                id: 'comment-1',
                numericId: 42,
                author: currentUser,
                createdAt: new Date(),
                isResolved: false,
                messages: [
                    {
                        id: 'msg-1',
                        author: currentUser,
                        content,
                        createdAt: new Date(),
                        isInitialMessage: true,
                    },
                ],
            };
            setComment(newComment);
            setActionRequired(isActionRequired);
        } else {
            const newMessage = {
                id: `msg-${String(Date.now())}`,
                author: currentUser,
                content,
                createdAt: new Date(),
            };

            setComment((prev) => {
                if (!prev) {
                    return prev;
                }
                return {
                    ...prev,
                    messages: [...prev.messages, newMessage],
                };
            });
        }
        setValue('');
    };

    const handleEditMessage = (messageId: string, newContent: string) => {
        if (!comment) {
            return;
        }
        setComment((prev) => {
            if (!prev) {
                return prev;
            }
            return {
                ...prev,
                messages: prev.messages.map((msg) =>
                    msg.id === messageId ? { ...msg, content: newContent } : msg,
                ),
            };
        });
    };

    const handleDeleteMessage = (messageId: string) => {
        if (!comment) {
            return;
        }
        setComment((prev) => {
            if (!prev) {
                return prev;
            }
            return {
                ...prev,
                messages: prev.messages.filter((msg) => msg.id !== messageId),
            };
        });
    };

    const handleClose = () => {
        setComment(undefined);
        setValue('');
        setActionRequired(false);
    };

    return (
        <div className={styles.interactiveContainer}>
            <p className={styles.instructions}>
                Click the <strong>+</strong> icon to open an empty comment bubble, then follow the complete flow:
                <br />
                1. Type a message → Typing mode appears
                <br />
                2. Send → Creates thread with your first comment
                <br />
                3. Add replies → Thread grows with multiple messages
            </p>

            <div className={styles.indicatorWrapper}>
                <DsCommentIndicator type="placeholder" onClick={() => setIsOpen(!isOpen)} />

                {isOpen && (
                    <div className={styles.bubbleWrapper}>
                        <DsCommentBubble
                            comment={comment}
                            currentUser={currentUser}
                            referenceTag="Resource allocation"
                            value={value}
                            onValueChange={setValue}
                            actionRequired={actionRequired}
                            onActionRequiredChange={setActionRequired}
                            onSend={handleSend}
                            onEditMessage={handleEditMessage}
                            onDeleteMessage={handleDeleteMessage}
                            onMessageMarkUnread={(id) => console.log('Mark unread:', id)}
                            onMessageResolved={(id) => console.log('Resolved:', id)}
                            onClose={comment ? handleClose : () => setIsOpen(false)}
                            onResolve={() => console.log('Resolve clicked')}
                            onToggleActionRequired={() => console.log('Toggle action required')}
                            onForward={() => console.log('Forward')}
                            onMarkUnread={() => console.log('Mark unread')}
                            onCopyLink={() => console.log('Copy link')}
                            onDelete={() => console.log('Delete')}
                        />
                    </div>
                )}
            </div>
        </div>
    );
};

const WithExistingComments = function WithExistingCommentsStory() {
    const [isOpen, setIsOpen] = useState(false);
    const [value, setValue] = useState('');
    const [actionRequired, setActionRequired] = useState(false);
    const [comment, setComment] = useState(createMockComment());

    const handleSend = (content: string) => {
        const newMessage = {
            id: `msg-${String(Date.now())}`,
            author: currentUser,
            content,
            createdAt: new Date(),
        };

        setComment((prev) => ({
            ...prev,
            messages: [...prev.messages, newMessage],
        }));
        setValue('');
    };

    const handleEditMessage = (messageId: string, newContent: string) => {
        setComment((prev) => ({
            ...prev,
            messages: prev.messages.map((msg) => (msg.id === messageId ? { ...msg, content: newContent } : msg)),
        }));
    };

    const handleDeleteMessage = (messageId: string) => {
        setComment((prev) => ({
            ...prev,
            messages: prev.messages.filter((msg) => msg.id !== messageId),
        }));
    };

    return (
        <div className={styles.interactiveContainer}>
            <p className={styles.instructions}>
                Click the <strong>avatar</strong> to view existing comments and add replies
            </p>

            <div className={styles.indicatorWrapper}>
                <DsCommentIndicator
                    type="default"
                    avatarSrc={comment.author.avatarSrc}
                    onClick={() => setIsOpen(!isOpen)}
                />

                {isOpen && (
                    <div className={styles.bubbleWrapper}>
                        <DsCommentBubble
                            comment={comment}
                            currentUser={currentUser}
                            referenceTag="Resource allocation"
                            value={value}
                            onValueChange={setValue}
                            actionRequired={actionRequired}
                            onActionRequiredChange={setActionRequired}
                            onSend={handleSend}
                            onEditMessage={handleEditMessage}
                            onDeleteMessage={handleDeleteMessage}
                            onMessageMarkUnread={(id) => console.log('Mark unread:', id)}
                            onMessageResolved={(id) => console.log('Resolved:', id)}
                            onClose={() => setIsOpen(false)}
                            onResolve={() => console.log('Resolve clicked')}
                            onToggleActionRequired={() => console.log('Toggle action required')}
                            onForward={() => console.log('Forward')}
                            onMarkUnread={() => console.log('Mark unread')}
                            onCopyLink={() => console.log('Copy link')}
                            onDelete={() => console.log('Delete')}
                        />
                    </div>
                )}
            </div>
        </div>
    );
};

const WithActionRequired = function WithActionRequiredStory() {
    const [isOpen, setIsOpen] = useState(false);
    const [value, setValue] = useState('');
    const [actionRequired, setActionRequired] = useState(true);
    const [comment, setComment] = useState(createMockComment());

    const handleSend = (content: string) => {
        const newMessage = {
            id: `msg-${String(Date.now())}`,
            author: currentUser,
            content,
            createdAt: new Date(),
        };

        setComment((prev) => ({
            ...prev,
            messages: [...prev.messages, newMessage],
        }));
        setValue('');
    };

    return (
        <div className={styles.interactiveContainer}>
            <p className={styles.instructions}>
                Click the <strong>action required avatar</strong> to view urgent comments
            </p>

            <div className={styles.indicatorWrapper}>
                <DsCommentIndicator
                    type="action-required"
                    avatarSrc={comment.author.avatarSrc}
                    onClick={() => setIsOpen(!isOpen)}
                />

                {isOpen && (
                    <div className={styles.bubbleWrapper}>
                        <DsCommentBubble
                            comment={comment}
                            currentUser={currentUser}
                            referenceTag="Resource allocation"
                            value={value}
                            onValueChange={setValue}
                            actionRequired={actionRequired}
                            onActionRequiredChange={setActionRequired}
                            onSend={handleSend}
                            onClose={() => setIsOpen(false)}
                            onResolve={() => console.log('Resolve clicked')}
                            onToggleActionRequired={() => console.log('Toggle action required')}
                            onForward={() => console.log('Forward')}
                            onMarkUnread={() => console.log('Mark unread')}
                            onCopyLink={() => console.log('Copy link')}
                            onDelete={() => console.log('Delete')}
                        />
                    </div>
                )}
            </div>
        </div>
    );
};

import { DsButton, DsCommentsDrawer } from "@drivenets/design-system";

const Default = () => <DsCommentsDrawer
    onOpenChange={fn()}
    onShowResolvedChange={fn()}
    onSearchChange={fn()}
    onCommentClick={fn()}
    onResolveComment={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    open
    comments={createMockComments()} />;

const WithSearch = () => <DsCommentsDrawer
    onOpenChange={fn()}
    onShowResolvedChange={fn()}
    onSearchChange={fn()}
    onCommentClick={fn()}
    onResolveComment={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    open
    comments={createMockComments()}
    searchQuery="Karen" />;

const Empty = () => <DsCommentsDrawer
    onOpenChange={fn()}
    onShowResolvedChange={fn()}
    onSearchChange={fn()}
    onCommentClick={fn()}
    onResolveComment={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    open
    comments={[]} />;

const ShowResolvedToggle = () => <DsCommentsDrawer
    onOpenChange={fn()}
    onShowResolvedChange={fn()}
    onSearchChange={fn()}
    onCommentClick={fn()}
    onResolveComment={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    open
    comments={createMockComments()}
    showResolved={false} />;

const HideResolvedToggle = () => <DsCommentsDrawer
    onOpenChange={fn()}
    onShowResolvedChange={fn()}
    onSearchChange={fn()}
    onCommentClick={fn()}
    onResolveComment={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    open
    comments={createMockComments()}
    showResolved />;

const CommentCardClick = () => <DsCommentsDrawer
    onOpenChange={fn()}
    onShowResolvedChange={fn()}
    onSearchChange={fn()}
    onCommentClick={fn()}
    onResolveComment={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    open
    comments={createMockComments()} />;

const SearchFiltering = () => <DsCommentsDrawer
    onOpenChange={fn()}
    onShowResolvedChange={fn()}
    onSearchChange={fn()}
    onCommentClick={fn()}
    onResolveComment={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    open
    comments={createMockComments()}
    searchQuery="dark mode" />;

const SearchById = () => <DsCommentsDrawer
    onOpenChange={fn()}
    onShowResolvedChange={fn()}
    onSearchChange={fn()}
    onCommentClick={fn()}
    onResolveComment={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    open
    comments={createMockComments()}
    searchQuery="#65" />;

const CustomEmptyMessage = () => <DsCommentsDrawer
    onOpenChange={fn()}
    onShowResolvedChange={fn()}
    onSearchChange={fn()}
    onCommentClick={fn()}
    onResolveComment={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    open
    comments={[]}
    noCommentsMessage="Nothing to see here!" />;

const NoResolvedComments = () => <DsCommentsDrawer
    onOpenChange={fn()}
    onShowResolvedChange={fn()}
    onSearchChange={fn()}
    onCommentClick={fn()}
    onResolveComment={fn()}
    onToggleActionRequired={fn()}
    onForward={fn()}
    onMarkUnread={fn()}
    onCopyLink={fn()}
    onDelete={fn()}
    open
    comments={createMockComments().filter((c) => !c.isResolved)} />;

const Interactive = function InteractiveStory() {
    const [open, setOpen] = useState(false);
    const [searchQuery, setSearchQuery] = useState('');
    const [showResolved, setShowResolved] = useState(false);
    const [comments, setComments] = useState(createMockComments());

    const handleResolve = (commentId: string) => {
        setComments((prev) => prev.map((c) => (c.id === commentId ? { ...c, isResolved: true } : c)));
    };

    return (
        <div className={styles.storyWrapper}>
            <DsButton onClick={() => setOpen(true)}>Open Comments Drawer</DsButton>

            <DsCommentsDrawer
                open={open}
                onOpenChange={setOpen}
                comments={comments}
                searchQuery={searchQuery}
                onSearchChange={setSearchQuery}
                showResolved={showResolved}
                onShowResolvedChange={setShowResolved}
                onCommentClick={(comment) => console.log('Comment clicked:', comment.id)}
                onResolveComment={handleResolve}
                onToggleActionRequired={(commentId) => console.log('Toggle action required:', commentId)}
                onForward={(commentId) => console.log('Forward:', commentId)}
                onMarkUnread={(commentId) => console.log('Mark unread:', commentId)}
                onCopyLink={(commentId) => console.log('Copy link:', commentId)}
                onDelete={(commentId) => console.log('Delete:', commentId)}
            />
        </div>
    );
};

const WithFilters = function WithFiltersStory() {
    const [open, setOpen] = useState(true);
    const [searchQuery, setSearchQuery] = useState('');
    const [showResolved, setShowResolved] = useState(false);
    const [comments] = useState(createMockComments());

    return (
        <div className={styles.storyWrapper}>
            <div className={styles.filterDemo}>
                <h3 className={styles.filterDemoTitle}>Filter Demonstration</h3>
                <p className={styles.filterDemoText}>
                    The drawer is open by default. Click the filter icon to explore filtering options.
                </p>
                <p className={styles.filterDemoText}>
                    <strong>Try filtering by:</strong>
                </p>
                <ul className={styles.filterDemoList}>
                    <li>Author: &quot;Karen J.&quot; to see 2 comments</li>
                    <li>Label: &quot;Bug&quot; to see 2 comments</li>
                    <li>Status: &quot;Action required&quot; to see 1 comment</li>
                    <li>Multiple filters at once (e.g., Author + Label)</li>
                </ul>
            </div>

            <DsCommentsDrawer
                open={open}
                onOpenChange={setOpen}
                comments={comments}
                searchQuery={searchQuery}
                onSearchChange={setSearchQuery}
                showResolved={showResolved}
                onShowResolvedChange={setShowResolved}
                onCommentClick={(comment) => console.log('Comment clicked:', comment.id)}
                onResolveComment={(commentId) => console.log('Resolve:', commentId)}
                onToggleActionRequired={(commentId) => console.log('Toggle action required:', commentId)}
                onForward={(commentId) => console.log('Forward:', commentId)}
                onMarkUnread={(commentId) => console.log('Mark unread:', commentId)}
                onCopyLink={(commentId) => console.log('Copy link:', commentId)}
                onDelete={(commentId) => console.log('Delete:', commentId)}
            />
        </div>
    );
};

import { DsButton, DsConfirmation } from "@drivenets/design-system";

const Default = function Render() {
    const [open, setOpen] = useState(false);
    return (
        <>
            <DsButton onClick={() => setOpen(true)}>Open Confirmation</DsButton>
            <DsConfirmation open={open} onOpenChange={setOpen}>
                <DsConfirmation.Header>
                    <DsConfirmation.Title>Confirm Action</DsConfirmation.Title>
                    <DsConfirmation.CloseTrigger />
                </DsConfirmation.Header>
                <DsConfirmation.Body>Are you sure you want to proceed with this action?</DsConfirmation.Body>
                <DsConfirmation.Footer>
                    <DsConfirmation.Actions>
                        <DsButton
                            design="v1.2"
                            buttonType="secondary"
                            size="large"
                            onClick={() => {
                                console.log('Reject clicked');
                                setOpen(false);
                            }}
                        >
                            No
                        </DsButton>
                        <DsButton
                            design="v1.2"
                            variant="filled"
                            size="large"
                            onClick={() => {
                                console.log('Accept clicked');
                                setOpen(false);
                            }}
                        >
                            Yes
                        </DsButton>
                    </DsConfirmation.Actions>
                </DsConfirmation.Footer>
            </DsConfirmation>
        </>
    );
};

const WithCancel = function Render() {
    const [open, setOpen] = useState(false);
    return (
        <>
            <DsButton onClick={() => setOpen(true)}>Open Confirmation</DsButton>
            <DsConfirmation open={open} onOpenChange={setOpen}>
                <DsConfirmation.Header>
                    <DsConfirmation.Title>Save Changes</DsConfirmation.Title>
                    <DsConfirmation.CloseTrigger />
                </DsConfirmation.Header>
                <DsConfirmation.Body>Do you want to save your changes before closing?</DsConfirmation.Body>
                <DsConfirmation.Footer>
                    <DsButton
                        design="v1.2"
                        buttonType="tertiary"
                        size="large"
                        onClick={() => {
                            console.log('Cancel clicked');
                            setOpen(false);
                        }}
                    >
                        Cancel
                    </DsButton>
                    <DsConfirmation.Actions>
                        <DsButton
                            design="v1.2"
                            buttonType="secondary"
                            size="large"
                            onClick={() => {
                                console.log('Discard clicked');
                                setOpen(false);
                            }}
                        >
                            Discard
                        </DsButton>
                        <DsButton
                            design="v1.2"
                            variant="filled"
                            size="large"
                            onClick={() => {
                                console.log('Save clicked');
                                setOpen(false);
                            }}
                        >
                            Save
                        </DsButton>
                    </DsConfirmation.Actions>
                </DsConfirmation.Footer>
            </DsConfirmation>
        </>
    );
};

const Danger = function Render() {
    const [open, setOpen] = useState(false);
    return (
        <>
            <DsButton onClick={() => setOpen(true)}>Open Confirmation</DsButton>
            <DsConfirmation open={open} onOpenChange={setOpen}>
                <DsConfirmation.Header>
                    <DsConfirmation.Title>Delete Item</DsConfirmation.Title>
                    <DsConfirmation.CloseTrigger />
                </DsConfirmation.Header>
                <DsConfirmation.Body>
                    Are you sure you want to delete this item? This action cannot be undone.
                </DsConfirmation.Body>
                <DsConfirmation.Footer>
                    <DsConfirmation.Actions>
                        <DsButton
                            design="v1.2"
                            buttonType="secondary"
                            size="large"
                            onClick={() => {
                                console.log('Cancel clicked');
                                setOpen(false);
                            }}
                        >
                            Cancel
                        </DsButton>
                        <DsButton
                            design="v1.2"
                            variant="danger"
                            size="large"
                            onClick={() => {
                                console.log('Delete clicked');
                                setOpen(false);
                            }}
                        >
                            Delete
                        </DsButton>
                    </DsConfirmation.Actions>
                </DsConfirmation.Footer>
            </DsConfirmation>
        </>
    );
};

const CustomBody = function Render() {
    const [open, setOpen] = useState(false);
    const [selectedOption, setSelectedOption] = useState('option1');

    return (
        <>
            <DsButton onClick={() => setOpen(true)}>Open Custom Confirmation</DsButton>
            <DsConfirmation style={{ maxBlockSize: 'none' }} open={open} onOpenChange={setOpen}>
                <DsConfirmation.Header>
                    <DsConfirmation.Title>Advanced Configuration</DsConfirmation.Title>
                    <DsConfirmation.CloseTrigger />
                </DsConfirmation.Header>
                <DsConfirmation.Body>
                    <div className={styles.customBodyContainer}>
                        <p className={styles.customBodyText}>Please select your preferred configuration option:</p>
                        <div className={styles.radioGroup}>
                            <label className={styles.radioLabel}>
                                <input
                                    type="radio"
                                    name="config-option"
                                    value="option1"
                                    checked={selectedOption === 'option1'}
                                    onChange={(e) => setSelectedOption(e.target.value)}
                                />
                                <span>Standard configuration (recommended)</span>
                            </label>
                            <label className={styles.radioLabel}>
                                <input
                                    type="radio"
                                    name="config-option"
                                    value="option2"
                                    checked={selectedOption === 'option2'}
                                    onChange={(e) => setSelectedOption(e.target.value)}
                                />
                                <span>Advanced configuration with custom settings</span>
                            </label>
                            <label className={styles.radioLabel}>
                                <input
                                    type="radio"
                                    name="config-option"
                                    value="option3"
                                    checked={selectedOption === 'option3'}
                                    onChange={(e) => setSelectedOption(e.target.value)}
                                />
                                <span>Custom configuration (manual setup)</span>
                            </label>
                        </div>
                        <div className={styles.infoNote}>
                            <strong>Note:</strong> This action will apply the selected configuration to your current
                            project. You can change this setting later in the project settings.
                        </div>
                    </div>
                </DsConfirmation.Body>
                <DsConfirmation.Footer>
                    <DsConfirmation.Actions>
                        <DsButton
                            design="v1.2"
                            buttonType="secondary"
                            size="large"
                            onClick={() => {
                                console.log('Cancel clicked');
                                setOpen(false);
                            }}
                        >
                            Cancel
                        </DsButton>
                        <DsButton
                            design="v1.2"
                            variant="filled"
                            size="large"
                            onClick={() => {
                                console.log('Apply configuration:', selectedOption);
                                setOpen(false);
                            }}
                        >
                            Apply Configuration
                        </DsButton>
                    </DsConfirmation.Actions>
                </DsConfirmation.Footer>
            </DsConfirmation>
        </>
    );
};

import { DsDateInput } from "@drivenets/design-system";

const Default = function Render() {
    const [value, setValue] = useState<string>();

    return <DsDateInput className={styles.containerSingle} value={value} onValueChange={setValue} />;
};

const RangeMode = function Render() {
    const [value, setValue] = useState<[string, string]>();

    return <DsDateInput className={styles.containerRange} value={value} onValueChange={setValue} range />;
};

const WithDefaultValue = () => <DsDateInput className={styles.containerSingle} defaultValue="2024-12-25" />;

const RangeWithDefaultValue = () => <DsDateInput
    className={styles.containerRange}
    defaultValue={['2024-12-01', '2024-12-31']}
    range />;

const WithMinMax = function Render() {
    const [value, setValue] = useState<string>();
    const today = new Date();
    const minDate = new Date(today.getFullYear(), today.getMonth(), 1).toISOString().split('T')[0];
    const maxDate = new Date(today.getFullYear(), today.getMonth() + 3, 0).toISOString().split('T')[0];

    return (
        <div className={styles.containerSingle}>
            <DsDateInput
                value={value}
                onValueChange={setValue}
                placeholder="MM/DD/YYYY"
                min={minDate}
                max={maxDate}
            />
            <p className={styles.helperText}>Allowed: Current month to next 3 months only</p>
        </div>
    );
};

const Disabled = () => <DsDateInput className={styles.containerSingle} value="2024-12-25" disabled />;

const ReadOnly = () => <DsDateInput className={styles.containerSingle} value="2024-12-25" readOnly />;

const HideClearButton = function Render() {
    const [value, setValue] = useState<string>();

    return (
        <DsDateInput
            className={styles.containerSingle}
            value={value}
            onValueChange={setValue}
            hideClearButton
        />
    );
};

const ControlledOpen = function Render() {
    const [value, setValue] = useState<string>();
    const [open, setOpen] = useState(false);

    return (
        <div className={styles.containerSingle}>
            <div className={styles.buttonContainer}>
                <button onClick={() => setOpen(!open)}>{open ? 'Close' : 'Open'} Calendar</button>
            </div>
            <DsDateInput value={value} onValueChange={setValue} open={open} onOpenChange={setOpen} />
        </div>
    );
};

const Uncontrolled = function Render() {
    return (
        <div className={styles.containerSingle}>
            <DsDateInput defaultValue="2024-12-25" />
        </div>
    );
};

const ManualTyping = function Render() {
    const [value, setValue] = useState<[string, string]>();

    return (
        <div className={styles.containerRange}>
            <DsDateInput value={value} onValueChange={setValue} range />
            <div className={styles.infoContainer}>
                <p>Try typing: &#34;12/01/2024 - 12/31/2024&#34;</p>
                <p>Validation happens on blur</p>
                <p>Invalid format resets to empty</p>
                <p>Current value: {JSON.stringify(value)}</p>
            </div>
        </div>
    );
};

import { DsDatePicker } from "@drivenets/design-system";

const Default = () => {
    const [value, setValue] = useState<Date | null>(null);

    return <DsDatePicker className={styles.container} value={value} onChange={setValue} />;
};

const WithTime = () => {
    const [value, setValue] = useState<Date | null>(null);

    return <DsDatePicker withTime className={styles.container} value={value} onChange={setValue} />;
};

const WithDefaultValue = () => <DsDatePicker
    className={styles.container}
    withTime
    defaultValue={new Date('2024-12-25T14:30:00')} />;

const Controlled = () => {
    const [value, setValue] = useState<Date | null>(new Date('2026-01-15T09:45:00'));

    return (
        <div className={styles.container}>
            <DsDatePicker withTime value={value} onChange={setValue} />
            <p className={styles.infoContainer}>Value: {value?.toLocaleString() ?? 'undefined'}</p>
        </div>
    );
};

const Disabled = () => <DsDatePicker
    className={styles.container}
    value={new Date('2024-12-25T14:30:00')}
    disabled />;

const ReadOnly = () => <DsDatePicker
    className={styles.container}
    value={new Date('2024-12-25T14:30:00')}
    readOnly />;

const WithMinMax = () => {
    const [value, setValue] = useState<Date | null>(null);

    return (
        <div className={styles.container}>
            <DsDatePicker
                withTime
                min={(() => {
                    const date = new Date();
                    return new Date(date.getFullYear(), date.getMonth(), 1, 0, 30);
                })()}
                max={(() => {
                    const date = new Date();
                    return new Date(date.getFullYear(), date.getMonth() + 2, 0, 23, 20); // last day of next month
                })()}
                value={value}
                onChange={setValue} />
            <p className={styles.helperText}>Allowed: {args.min?.toLocaleString()}- {args.max?.toLocaleString()}
            </p>
        </div>
    );
};

import { DsDatePicker, DsDateRangePicker, DsSegmentGroup } from "@drivenets/design-system";

const Default = () => {
    const [value, setValue] = useState<DateRangeValue>([null, null]);

    return <DsDateRangePicker className={styles.container} value={value} onChange={setValue} />;
};

const WithTime = () => {
    const [value, setValue] = useState<DateRangeValue>([null, null]);

    return <DsDateRangePicker withTime className={styles.container} value={value} onChange={setValue} />;
};

const Vertical = () => {
    const [value, setValue] = useState<DateRangeValue>([null, null]);

    return (
        <DsDateRangePicker
            orientation="vertical"
            className={styles.verticalContainer}
            value={value}
            onChange={setValue} />
    );
};

const WithMinMax = () => {
    const [value, setValue] = useState<DateRangeValue>([null, null]);

    return (
        <div>
            <DsDateRangePicker
                withTime
                min={(() => {
                    const date = new Date();
                    return new Date(date.getFullYear(), date.getMonth(), 1, 0, 30);
                })()}
                max={(() => {
                    const date = new Date();
                    return new Date(date.getFullYear(), date.getMonth() + 2, 0, 23, 20); // last day of next month
                })()}
                className={styles.container}
                value={value}
                onChange={setValue} />
            <p className={styles.helperText}>Allowed: {args.min?.toLocaleString()}- {args.max?.toLocaleString()}
            </p>
        </div>
    );
};

const Disabled = () => <DsDateRangePicker
    className={styles.container}
    value={[new Date('2026-01-10T00:00:00'), new Date('2026-01-20T00:00:00')]}
    disabled />;

const HiddenClearAll = () => {
    const [value, setValue] = useState<DateRangeValue>([
        new Date('2026-01-10T00:00:00'),
        new Date('2026-01-20T00:00:00'),
    ]);

    return (
        <DsDateRangePicker
            hideClearAll
            className={styles.container}
            value={value}
            onChange={setValue} />
    );
};

const DateOrRange = function Render(args) {
    const [mode, setMode] = useState('date');
    const [dateValue, setDateValue] = useState<Date | null>(null);
    const [rangeValue, setRangeValue] = useState<DateRangeValue>([null, null]);

    return (
        <div className={styles.dateOrRangeContainer}>
            <DsSegmentGroup.Root value={mode} onValueChange={(v) => setMode(v ?? 'date')} size="default">
                <DsSegmentGroup.Item value="date" label="Date" />
                <DsSegmentGroup.Item value="range" label="Range" />
            </DsSegmentGroup.Root>

            {mode === 'date' ? (
                <DsDatePicker
                    value={dateValue}
                    onChange={(v) => {
                        setDateValue(v);
                        args.onChange?.([v, null]);
                    }}
                    min={args.min}
                    max={args.max}
                    withTime={args.withTime}
                    disabled={args.disabled}
                    readOnly={args.readOnly}
                />
            ) : (
                <DsDateRangePicker
                    {...args}
                    value={rangeValue}
                    onChange={(v) => {
                        setRangeValue(v);
                        args.onChange?.(v);
                    }}
                />
            )}
        </div>
    );
};

import { DsButton, DsDialog, DsIcon } from "@drivenets/design-system";

const Centered = () => {
    const [open, setOpen] = React.useState(false);

    return (
        <>
            <DsButton onClick={() => setOpen(true)}>Open Dialog</DsButton>
            <DsDialog
                open={open}
                onOpenChange={setOpen}
                title="Centered Dialog"
                description="This dialog appears in the center of the screen">
                <div className={styles.dialogContent}>This is a centered dialog example</div>
            </DsDialog>
        </>
    );
};

const CustomPosition = () => {
    const [open, setOpen] = React.useState(false);

    return (
        <>
            <DsIcon
                className={styles.menuIcon}
                icon="menu"
                size="large"
                onClick={() => setOpen(true)} />
            <DsDialog
                open={open}
                onOpenChange={setOpen}
                title="Custom Position Dialog"
                description="This dialog appears relative to the menu icon"
                customPosition={{ top: 60, left: 20 }}>
                <div className={styles.dialogContent}>This is a custom positioned dialog example</div>
            </DsDialog>
        </>
    );
};

import { DsDivider } from "@drivenets/design-system";

const Default = (args) => (
    <div
        className={classNames(styles.storyContainer, {
            [styles.storyContainerVertical]: args.orientation === 'vertical',
        })}
    >
        {args.orientation === 'vertical' ? (
            <>
                <div className={styles.storyContentSide}>Left content</div>
                <DsDivider {...args} />
                <div className={styles.storyContentSide}>Right content</div>
            </>
        ) : (
            <div className={styles.storyContent}>
                <div className={styles.storyText}>Top content</div>
                <DsDivider {...args} />
                <div className={styles.storyText}>Bottom content</div>
            </div>
        )}
    </div>
);

const Showcase = () => (
    <div className={styles.showcaseContainer}>
        <table className={styles.showcaseTable}>
            <thead>
                <tr>
                    <th className={styles.showcaseHeader}>Variant</th>
                    <th className={styles.showcaseHeader}>Preview</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td className={styles.showcaseCell}>
                        <span className={styles.showcaseCellBold}>Horizontal</span>
                        <span className={styles.showcaseCellInline}>default</span>
                    </td>
                    <td className={styles.showcaseCell}>
                        <div className={styles.horizontalDividerWrapper}>
                            <DsDivider />
                        </div>
                    </td>
                </tr>

                <tr>
                    <td className={styles.showcaseCell}>
                        <span className={styles.showcaseCellBold}>Vertical</span>
                        <span className={styles.showcaseCellInline}>default</span>
                    </td>
                    <td className={styles.showcaseCell}>
                        <div className={styles.verticalDividerContainer}>
                            <div className={styles.verticalDividerContent}>Left</div>
                            <DsDivider orientation="vertical" />
                            <div className={styles.verticalDividerContent}>Right</div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td className={styles.showcaseCell}>
                        <span className={styles.showcaseCellBold}>Custom</span>
                        <span className={styles.showcaseCellInline}>component=&quot;span&quot;</span>
                    </td>
                    <td className={styles.showcaseCell}>
                        <div className={styles.horizontalDividerWrapper}>
                            <DsDivider component="span" />
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
);

const Horizontal = () => <div className={styles.horizontalContainer}>
    <div className={styles.storyText}>Above</div>
    <DsDivider orientation="horizontal" />
    <div className={styles.storyText}>Below</div>
</div>;

const Vertical = () => <div
    className={classNames(styles.storyContainer, styles.storyContainerVertical)}>
    <div className={styles.storyContentSide}>Left</div>
    <DsDivider orientation="vertical" />
    <div className={styles.storyContentSide}>Right</div>
</div>;

const WithCustomComponent = () => <div className={styles.horizontalContainer}>
    <div className={styles.storyText}>Above</div>
    <DsDivider orientation="horizontal" component="span" />
    <div className={styles.storyText}>Below</div>
</div>;

import { DsButton, DsDrawer, DsIcon, DsSystemStatus, DsTextInput, DsTypography } from "@drivenets/design-system";

const Default = () => {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <div className={styles.storyWrapper}>
            <DsButton onClick={() => setIsOpen(true)}>Open Drawer</DsButton>
            <DsDrawer open={isOpen} onOpenChange={setIsOpen}>
                (<>
                    <DsDrawer.Header>
                        <DsDrawer.Title>
                            Default Drawer <DsSystemStatus status="healthy" label="Active" />
                        </DsDrawer.Title>
                        <div className={styles.headerActions}>
                            <button className={styles.expand} aria-label="Expand">
                                <DsIcon icon="open_in_full" size="tiny" />
                            </button>
                            <div className={styles.divider} />
                            <DsDrawer.CloseTrigger />
                        </div>
                        <DsTypography className={styles.description} variant="body-xs-reg">
                            This is a description caption under a title.
                        </DsTypography>
                    </DsDrawer.Header>
                    <DsDrawer.Toolbar>
                        <DsTextInput
                            placeholder="Search..."
                            style={{ flex: 1 }}
                            slots={{ startAdornment: <DsIcon icon="search" size="tiny" /> }}
                        />
                        <DsIcon icon="filter_list" size="tiny" />
                    </DsDrawer.Toolbar>
                    <DsDrawer.Body className={styles.body}>
                        <div className={styles.section}>
                            <DsTypography className={styles.sectionHeader} variant="body-md-semi-bold">
                                Drawer content header
                            </DsTypography>
                            <DsTypography variant="heading2" className={styles.sectionContent}>
                                Out of scope section
                            </DsTypography>
                        </div>
                        <div className={styles.section}>
                            <DsTypography className={styles.sectionHeader} variant="body-md-semi-bold">
                                Drawer content header
                            </DsTypography>
                            <DsTypography variant="heading2" className={styles.sectionContent}>
                                Out of scope section
                            </DsTypography>
                            <DsTypography variant="heading2" className={styles.sectionContent}>
                                Out of scope section
                            </DsTypography>
                        </div>
                    </DsDrawer.Body>
                    <DsDrawer.Footer>
                        <DsDrawer.Actions>
                            <DsButton design="v1.2" buttonType="tertiary" size="large">
                                Cancel
                            </DsButton>
                            <DsButton design="v1.2" size="large">
                                Save
                            </DsButton>
                        </DsDrawer.Actions>
                    </DsDrawer.Footer>
                </>)
            </DsDrawer>
        </div>
    );
};

const WithTabs = () => {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <div className={styles.storyWrapper}>
            <DsButton onClick={() => setIsOpen(true)}>Open Drawer</DsButton>
            <DsDrawer columns={8} open={isOpen} onOpenChange={setIsOpen}>
                (<>
                    <DsDrawer.Header>
                        <DsDrawer.Title>
                            Drawer with Tabs <DsSystemStatus status="healthy" label="Active" />
                        </DsDrawer.Title>
                        <div className={styles.headerActions}>
                            <button className={styles.expand} aria-label="Expand">
                                <DsIcon icon="open_in_full" size="tiny" />
                            </button>
                            <div className={styles.divider} />
                            <DsDrawer.CloseTrigger />
                        </div>
                        <DsTypography className={styles.description} variant="body-xs-reg">
                            This is a description caption under a title.
                        </DsTypography>
                    </DsDrawer.Header>
                    <DsDrawer.Body className={styles.body}>
                        <div style={{ flex: 0 }} className={styles.section}>
                            <Tabs />
                        </div>
                        <div className={styles.section}>
                            <DsTypography className={styles.sectionHeader} variant="body-md-semi-bold">
                                Drawer content header
                            </DsTypography>
                            <DsTypography variant="heading2" className={styles.sectionContent}>
                                Out of scope section
                            </DsTypography>
                        </div>
                    </DsDrawer.Body>
                    <DsDrawer.Footer>
                        <DsDrawer.Actions>
                            <DsButton design="v1.2" buttonType="tertiary" size="large">
                                Cancel
                            </DsButton>
                            <DsButton design="v1.2" size="large">
                                Save
                            </DsButton>
                        </DsDrawer.Actions>
                    </DsDrawer.Footer>
                </>)
            </DsDrawer>
        </div>
    );
};

const WithBackdropAndScroll = () => {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <div className={styles.storyWrapper}>
            <DsButton onClick={() => setIsOpen(true)}>Open Drawer</DsButton>
            <DsDrawer backdrop open={isOpen} onOpenChange={setIsOpen}>
                (<>
                    <DsDrawer.Header>
                        <DsDrawer.Title>Basic Drawer</DsDrawer.Title>
                        <DsDrawer.CloseTrigger />
                    </DsDrawer.Header>
                    <DsDrawer.Body className={styles.body}>
                        <div className={styles.section}>
                            <DsTypography className={styles.sectionHeader} variant="body-md-semi-bold">
                                Drawer content header
                            </DsTypography>
                            <DsTypography style={{ minHeight: '300px' }} variant="heading2" className={styles.sectionContent}>
                                Out of scope section
                            </DsTypography>
                        </div>
                        <div className={styles.section}>
                            <DsTypography className={styles.sectionHeader} variant="body-md-semi-bold">
                                Drawer content header
                            </DsTypography>
                            <DsTypography style={{ minHeight: '200px' }} variant="heading2" className={styles.sectionContent}>
                                Out of scope section
                            </DsTypography>
                            <DsTypography style={{ minHeight: '500px' }} variant="heading2" className={styles.sectionContent}>
                                Out of scope section
                            </DsTypography>
                        </div>
                    </DsDrawer.Body>
                </>)
            </DsDrawer>
        </div>
    );
};

const DockToStart = () => {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <div className={styles.storyWrapper}>
            <DsButton onClick={() => setIsOpen(true)}>Open Drawer</DsButton>
            <DsDrawer position="start" open={isOpen} onOpenChange={setIsOpen}>
                (<>
                    <DsDrawer.Header>
                        <DsDrawer.Title>Basic Drawer</DsDrawer.Title>
                        <DsDrawer.CloseTrigger />
                    </DsDrawer.Header>
                    <DsDrawer.Body className={styles.body}>
                        <div className={styles.section}>
                            <DsTypography className={styles.sectionHeader} variant="body-md-semi-bold">
                                Drawer content header
                            </DsTypography>
                            <DsTypography variant="heading2" className={styles.sectionContent}>
                                Out of scope section
                            </DsTypography>
                        </div>
                        <div className={styles.section}>
                            <DsTypography className={styles.sectionHeader} variant="body-md-semi-bold">
                                Drawer content header
                            </DsTypography>
                            <DsTypography variant="heading2" className={styles.sectionContent}>
                                Out of scope section
                            </DsTypography>
                            <DsTypography variant="heading2" className={styles.sectionContent}>
                                Out of scope section
                            </DsTypography>
                        </div>
                    </DsDrawer.Body>
                </>)
            </DsDrawer>
        </div>
    );
};

const WithGridContent = () => {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <div className={styles.storyWrapper}>
            <DsButton onClick={() => setIsOpen(true)}>Open Drawer</DsButton>
            <DsDrawer columns={10} open={isOpen} onOpenChange={setIsOpen}>
                (<>
                    <DsDrawer.Header>
                        <DsDrawer.Title>Basic Drawer</DsDrawer.Title>
                        <DsDrawer.CloseTrigger />
                    </DsDrawer.Header>
                    <DsDrawer.Body className={styles.bodyGrid}>
                        <div style={{ gridRow: 'span 2' }} className={styles.section}>
                            <DsTypography className={styles.sectionHeader} variant="body-md-semi-bold">
                                Drawer content header
                            </DsTypography>
                            <DsTypography variant="heading2" className={styles.sectionContent}>
                                Out of scope section
                            </DsTypography>
                        </div>
                        <div className={styles.section}>
                            <DsTypography className={styles.sectionHeader} variant="body-md-semi-bold">
                                Drawer content header
                            </DsTypography>
                            <DsTypography variant="heading2" className={styles.sectionContent}>
                                Out of scope section
                            </DsTypography>
                        </div>
                        <div className={styles.section}>
                            <DsTypography className={styles.sectionHeader} variant="body-md-semi-bold">
                                Drawer content header
                            </DsTypography>
                            <DsTypography variant="heading2" className={styles.sectionContent}>
                                Out of scope section
                            </DsTypography>
                        </div>
                    </DsDrawer.Body>
                </>)
            </DsDrawer>
        </div>
    );
};

const Responsive = function Render() {
    const [openDrawer, setOpenDrawer] = useState<string | null>(null);

    const close = () => setOpenDrawer(null);

    const variants = [
        { label: '3 cols → 4 on md', columns: { lg: 3, md: 4 } },
        { label: '4 cols → 6 on md', columns: { lg: 4, md: 6 } },
        { label: '5 cols → 6 on md', columns: { lg: 5, md: 6 } },
        { label: '6 cols → 10 on md', columns: { lg: 6, md: 10 } },
        { label: '8 cols → 10 on md', columns: { lg: 8, md: 10 } },
    ] satisfies Array<{ label: string; columns: ResponsiveValue<DsDrawerColumns> }>;

    return (
        <div className={styles.storyWrapper}>
            <DsTypography variant="body-md-semi-bold">
                Resize the window below 1440 px to see the responsive column change.
            </DsTypography>

            <div className={styles.responsiveButtons}>
                {variants.map(({ label }) => (
                    <DsButton key={label} onClick={() => setOpenDrawer(label)}>
                        {label}
                    </DsButton>
                ))}
            </div>

            {variants.map(({ label, columns }) => (
                <DsDrawer
                    key={label}
                    open={openDrawer === label}
                    onOpenChange={(open) => !open && close()}
                    columns={columns}
                >
                    <DsDrawer.Header>
                        <DsDrawer.Title>{label}</DsDrawer.Title>
                        <DsDrawer.CloseTrigger />
                    </DsDrawer.Header>
                    <DsDrawer.Body className={styles.body}>
                        <div className={styles.section}>
                            <DsTypography className={styles.sectionHeader} variant="body-md-semi-bold">
                                lg: {columns.lg} columns · md: {columns.md} columns
                            </DsTypography>
                            <DsTypography variant="heading2" className={styles.sectionContent}>
                                Drawer content
                            </DsTypography>
                        </div>
                    </DsDrawer.Body>
                </DsDrawer>
            ))}
        </div>
    );
};

const ToggleFullSize = () => {
    const [isOpen, setIsOpen] = useState(false);
    const [isFullScreen, setIsFullScreen] = useState(false);

    const toggleFullScreen = () => {
        setIsFullScreen(!isFullScreen);
    };

    return (
        <div className={styles.storyWrapper}>
            <DsButton onClick={() => setIsOpen(true)}>Open Drawer</DsButton>
            <DsDrawer
                open={isOpen}
                onOpenChange={setIsOpen}
                columns={isFullScreen ? 12 : args.columns || 4}>
                <DsDrawer.Header>
                    <DsDrawer.Title>Expandable Drawer</DsDrawer.Title>
                    <div className={styles.headerActions}>
                        <button
                            className={styles.expand}
                            aria-label={isFullScreen ? 'Collapse' : 'Expand'}
                            onClick={toggleFullScreen}>
                            <DsIcon icon={isFullScreen ? 'close_fullscreen' : 'open_in_full'} size="tiny" />
                        </button>
                        <div className={styles.divider} />
                        <DsDrawer.CloseTrigger />
                    </div>
                </DsDrawer.Header>
                <DsDrawer.Body className={styles.body}>
                    <div className={styles.section}>
                        <DsTypography className={styles.sectionHeader} variant="body-md-semi-bold">Drawer content header
                                                        </DsTypography>
                        <DsTypography variant="heading2" className={styles.sectionContent}>Out of scope section
                                                        </DsTypography>
                    </div>
                </DsDrawer.Body>
            </DsDrawer>
        </div>
    );
};

import { DsButton, DsExpandableTextInput, DsTable } from "@drivenets/design-system";

const Default = () => <DsExpandableTextInput icon="search" />;

const SmallSize = () => <DsExpandableTextInput icon="search" size="small" />;

const CustomIcon = () => <DsExpandableTextInput icon="search_insights" />;

const Placeholder = () => <DsExpandableTextInput icon="search" placeholder="Type to search" />;

const Controlled = function Render(args) {
    const [value, setValue] = useState(args.value);

    return (
        <DsExpandableTextInput
            icon="search"
            value={value}
            onChange={(e) => setValue(e.target.value)}
            onClear={() => setValue('')}
        />
    );
};

const DefaultValue = () => <DsExpandableTextInput icon="search" defaultValue="initial search" />;

const WithTable = function Render() {
    const [search, setSearch] = useState('');

    return (
        <div style={{ width: '500px' }}>
            <div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'end', gap: '8px' }}>
                <DsExpandableTextInput
                    icon="search"
                    placeholder="Type to search..."
                    value={search}
                    onChange={(e) => setSearch(e.target.value)}
                    onClear={() => setSearch('')}
                />

                <DsButton size="small">Click</DsButton>
            </div>
            <DsTable columns={columns} data={people} columnFilters={[{ id: 'firstName', value: search }]} />
        </div>
    );
};

import { DefaultDescription, DsFormControl } from "@drivenets/design-system";

const Default = () => <DsFormControl
    label="Event Date"
    required
    message="Select a date for your event"
    style={{ width: '300px' }}><DsFormControl.DatePicker /></DsFormControl>;

const WithTime = () => <DsFormControl
    label="Appointment"
    required
    message="Select date and time"
    style={{ width: '300px' }}><DsFormControl.DatePicker withTime /></DsFormControl>;

const WithDescription = () => <DsFormControl label="Event Date" required style={{ width: '300px' }}>(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.DatePicker />
    </>)</DsFormControl>;

const Error = () => <DsFormControl
    status="error"
    label="Event Date"
    required
    message="Date is required."
    messageIcon="error"
    style={{ width: '300px' }}>(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.DatePicker />
    </>)</DsFormControl>;

const Disabled = () => <DsFormControl label="Event Date" style={{ width: '300px' }}><DsFormControl.DatePicker disabled /></DsFormControl>;

const WithValidation = function Render() {
    const [value, setValue] = useState<Date | null>(null);
    const [touched, setTouched] = useState(false);
    const error = touched && !value ? 'Date is required' : undefined;

    return (
        <DsFormControl
            label="Event Date"
            required
            status={error ? 'error' : undefined}
            messageIcon="cancel"
            message={error}
            style={{ width: '300px' }}
        >
            <DsFormControl.DatePicker
                value={value}
                onChange={(v) => {
                    setValue(v);
                    setTouched(true);
                }}
            />
        </DsFormControl>
    );
};

import { DefaultDescription, DsFormControl, DsIcon } from "@drivenets/design-system";

const Default = () => <DsFormControl label="Input label" required message="This is a message">(<DsFormControl.NumberInput placeholder="Enter number" min={1} max={100} step={1} defaultValue={10} />)</DsFormControl>;

const WithCustomWidth = () => <DsFormControl label="Input label" required style={{ width: '300px' }}>(<DsFormControl.NumberInput placeholder="Enter number" min={1} max={100} step={1} defaultValue={10} />)</DsFormControl>;

const WithCustomStyles = () => <DsFormControl
    label="Input label"
    required
    style={{
        width: '400px',
        padding: '16px',
        border: '2px solid #e0e0e0',
        borderRadius: '8px',
        backgroundColor: '#f9f9f9',
    }}>(<DsFormControl.NumberInput placeholder="Enter number" min={1} max={100} step={1} defaultValue={10} />)</DsFormControl>;

const WithDescription = () => <DsFormControl
    label="Input label"
    required
    style={{
        width: '300px',
    }}>(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.NumberInput placeholder="Enter number" min={1} max={100} step={1} defaultValue={10} />
    </>)</DsFormControl>;

const WithHelpIcon = () => <DsFormControl
    label="Input label"
    required
    slots={{
        endAdornment: (
            <button
                type="button"
                className={styles.helpIcon}
                onClick={() => alert('Help clicked!')}
                aria-label="Help"
            >
                <DsIcon icon="info" size="small" />
            </button>
        ),
    }}>(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.NumberInput placeholder="Enter number" min={1} max={100} step={1} defaultValue={10} />
    </>)</DsFormControl>;

const Success = () => <DsFormControl
    status="success"
    label="Input label"
    message="This is a success caption under a number input."
    messageIcon="check_circle">(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.NumberInput placeholder="Enter number" min={1} max={100} step={1} defaultValue={10} />
    </>)</DsFormControl>;

const Error = () => <DsFormControl
    status="error"
    label="Input label"
    message="This is an error caption under a number input."
    messageIcon="error">(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.NumberInput placeholder="Enter number" min={1} max={100} step={1} defaultValue={10} />
    </>)</DsFormControl>;

const Warning = () => <DsFormControl
    status="warning"
    label="Input label"
    message="This is a warning caption under a number input."
    messageIcon="info">(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.NumberInput placeholder="Enter number" min={1} max={100} step={1} defaultValue={10} />
    </>)</DsFormControl>;

const Disabled = () => <DsFormControl label="Input label">(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.NumberInput
            placeholder="Disabled Input"
            disabled
            min={1}
            max={100}
            step={1}
            defaultValue={10}
        />
    </>)</DsFormControl>;

import { DefaultDescription, DsFormControl, DsIcon } from "@drivenets/design-system";

const Default = () => <DsFormControl label="Input label" required message="This is a message"><DsFormControl.PasswordInput placeholder="Enter password" /></DsFormControl>;

const WithCustomWidth = () => <DsFormControl label="Input label" required style={{ width: '300px' }}><DsFormControl.PasswordInput placeholder="Enter password" /></DsFormControl>;

const WithCustomStyles = () => <DsFormControl
    label="Input label"
    required
    style={{
        width: '400px',
        padding: '16px',
        border: '2px solid #e0e0e0',
        borderRadius: '8px',
        backgroundColor: '#f9f9f9',
    }}><DsFormControl.PasswordInput placeholder="Password input with custom styling" /></DsFormControl>;

const WithDescription = () => <DsFormControl
    label="Input label"
    required
    style={{
        width: '300px',
    }}>(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.PasswordInput placeholder="Enter password" />
    </>)</DsFormControl>;

const WithHelpIcon = () => <DsFormControl
    label="Input label"
    required
    slots={{
        endAdornment: (
            <button
                type="button"
                className={styles.helpIcon}
                onClick={() => alert('Help clicked!')}
                aria-label="Help"
            >
                <DsIcon icon="info" size="small" />
            </button>
        ),
    }}>(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.PasswordInput placeholder="Search" />
    </>)</DsFormControl>;

const Success = () => <DsFormControl
    status="success"
    label="Input label"
    message="This is a success caption under a password input."
    messageIcon="check_circle">(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.PasswordInput />
    </>)</DsFormControl>;

const Error = () => <DsFormControl
    status="error"
    label="Input label"
    message="This is an error caption under a password input."
    messageIcon="error">(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.PasswordInput />
    </>)</DsFormControl>;

const Warning = () => <DsFormControl
    status="warning"
    label="Input label"
    message="This is a warning caption under a password input."
    messageIcon="info">(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.PasswordInput />
    </>)</DsFormControl>;

const Disabled = () => <DsFormControl label="Input label">(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.PasswordInput placeholder="Disabled Input" disabled />
    </>)</DsFormControl>;

import { DefaultDescription, DsFormControl, DsIcon } from "@drivenets/design-system";

const Default = function Render() {
    const [value, setValue] = useState('');

    return (
        <DsFormControl label="Input" required={true} message="This is a message">
            <DsFormControl.Select
                placeholder="Select an option"
                value={value}
                onValueChange={setValue}
                clearable
                options={[
                    { label: 'Option 1', value: 'option1', icon: 'download' },
                    { label: 'Option 2', value: 'option2', icon: 'save' },
                    { label: 'Option 3', value: 'option3', icon: 'description' },
                ]}
            />
        </DsFormControl>
    );
};

const WithCustomWidth = function Render() {
    const [value, setValue] = useState('');

    return (
        <DsFormControl label="Input" required={true} style={{ width: '300px' }}>
            <DsFormControl.Select
                placeholder="Select an option"
                value={value}
                onValueChange={setValue}
                clearable
                options={[
                    { label: 'Option 1', value: 'option1', icon: 'download' },
                    { label: 'Option 2', value: 'option2', icon: 'save' },
                    { label: 'Option 3', value: 'option3', icon: 'description' },
                ]}
            />
        </DsFormControl>
    );
};

const WithCustomStyles = function Render() {
    const [value, setValue] = useState('');

    return (
        <DsFormControl
            label="Input"
            required={true}
            style={{
                width: '400px',
                padding: '16px',
                border: '2px solid #e0e0e0',
                borderRadius: '8px',
                backgroundColor: '#f9f9f9',
            }}
        >
            <DsFormControl.Select
                placeholder="Select an option"
                value={value}
                onValueChange={setValue}
                clearable
                options={[
                    { label: 'Option 1', value: 'option1', icon: 'download' },
                    { label: 'Option 2', value: 'option2', icon: 'save' },
                    { label: 'Option 3', value: 'option3', icon: 'description' },
                ]}
            />
        </DsFormControl>
    );
};

const WithDescription = function Render() {
    const [value, setValue] = useState('');

    return (
        <DsFormControl label="Input" required={true} style={{ width: '300px' }}>
            <DsFormControl.Description>
                <DefaultDescription />
            </DsFormControl.Description>
            <DsFormControl.Select
                placeholder="Select an option"
                value={value}
                onValueChange={setValue}
                clearable
                options={[
                    { label: 'Option 1', value: 'option1', icon: 'download' },
                    { label: 'Option 2', value: 'option2', icon: 'save' },
                    { label: 'Option 3', value: 'option3', icon: 'description' },
                ]}
            />
        </DsFormControl>
    );
};

const WithHelpIcon = function Render() {
    const [value, setValue] = useState('');

    return (
        <DsFormControl
            label="Input"
            required={true}
            slots={{
                endAdornment: (
                    <button
                        type="button"
                        className={styles.helpIcon}
                        onClick={() => alert('Help clicked!')}
                        aria-label="Help"
                    >
                        <DsIcon icon="info" size="small" />
                    </button>
                ),
            }}
        >
            <DsFormControl.Description>
                <DefaultDescription />
            </DsFormControl.Description>
            <DsFormControl.Select
                value={value}
                onValueChange={setValue}
                clearable
                options={[
                    { value: 'option1', label: 'Option 1' },
                    { value: 'option2', label: 'Option 2' },
                    { value: 'option3', label: 'Option 3' },
                ]}
                placeholder="Select an option"
            />
        </DsFormControl>
    );
};

const Success = function Render() {
    const [value, setValue] = useState('');

    return (
        <DsFormControl
            status="success"
            label="Input"
            message="This is a success caption under a select input."
            messageIcon="check_circle"
        >
            <DsFormControl.Description>
                <DefaultDescription />
            </DsFormControl.Description>
            <DsFormControl.Select
                placeholder="Select an option"
                value={value}
                onValueChange={setValue}
                clearable
                options={[
                    { label: 'Option 1', value: 'option1', icon: 'download' },
                    { label: 'Option 2', value: 'option2', icon: 'save' },
                    { label: 'Option 3', value: 'option3', icon: 'description' },
                ]}
            />
        </DsFormControl>
    );
};

const Error = function Render() {
    const [value, setValue] = useState('');

    return (
        <DsFormControl
            status="error"
            label="Input"
            message="This is an error caption under a select input."
            messageIcon="error"
        >
            <DsFormControl.Description>
                <DefaultDescription />
            </DsFormControl.Description>
            <DsFormControl.Select
                placeholder="Select an option"
                value={value}
                onValueChange={setValue}
                clearable
                options={[
                    { label: 'Option 1', value: 'option1', icon: 'download' },
                    { label: 'Option 2', value: 'option2', icon: 'save' },
                    { label: 'Option 3', value: 'option3', icon: 'description' },
                ]}
            />
        </DsFormControl>
    );
};

const Warning = function Render() {
    const [value, setValue] = useState('');

    return (
        <DsFormControl
            status="warning"
            label="Input"
            message="This is a warning caption under a select input."
            messageIcon="info"
        >
            <DsFormControl.Description>
                <DefaultDescription />
            </DsFormControl.Description>
            <DsFormControl.Select
                placeholder="Select an option"
                value={value}
                onValueChange={setValue}
                clearable
                options={[
                    { label: 'Option 1', value: 'option1', icon: 'download' },
                    { label: 'Option 2', value: 'option2', icon: 'save' },
                    { label: 'Option 3', value: 'option3', icon: 'description' },
                ]}
            />
        </DsFormControl>
    );
};

const Disabled = function Render() {
    const [value, setValue] = useState('');

    return (
        <DsFormControl label="Input">
            <DsFormControl.Description>
                <DefaultDescription />
            </DsFormControl.Description>
            <DsFormControl.Select
                placeholder="Select an option"
                value={value}
                onValueChange={setValue}
                clearable
                options={[
                    { label: 'Option 1', value: 'option1', icon: 'download' },
                    { label: 'Option 2', value: 'option2', icon: 'save' },
                    { label: 'Option 3', value: 'option3', icon: 'description' },
                ]}
                disabled
            />
        </DsFormControl>
    );
};

import { DefaultDescription, DsFormControl, DsIcon } from "@drivenets/design-system";

const Default = () => <DsFormControl label="Input label" required message="This is a message"><DsFormControl.Textarea placeholder="Input" /></DsFormControl>;

const WithCustomWidth = () => <DsFormControl label="Input label" required style={{ width: '300px' }}><DsFormControl.Textarea placeholder="Input with custom width" /></DsFormControl>;

const WithCustomStyles = () => <DsFormControl
    label="Input label"
    required
    style={{
        width: '400px',
        padding: '16px',
        border: '2px solid #e0e0e0',
        borderRadius: '8px',
        backgroundColor: '#f9f9f9',
    }}><DsFormControl.Textarea placeholder="Input with custom styling" /></DsFormControl>;

const WithDescription = () => <DsFormControl
    label="Input label"
    required
    style={{
        width: '300px',
    }}>(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.Textarea placeholder="Search" />
    </>)</DsFormControl>;

const WithHelpIcon = () => <DsFormControl
    label="Input label"
    required
    slots={{
        endAdornment: (
            <button
                type="button"
                className={styles.helpIcon}
                onClick={() => alert('Help clicked!')}
                aria-label="Help"
            >
                <DsIcon icon="info" size="small" />
            </button>
        ),
    }}>(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.Textarea placeholder="Search" />
    </>)</DsFormControl>;

const Success = () => <DsFormControl
    status="success"
    label="Input label"
    message="This is a success caption under a text input."
    messageIcon="check_circle">(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.Textarea />
    </>)</DsFormControl>;

const Error = () => <DsFormControl
    status="error"
    label="Input label"
    message="This is an error caption under a text input."
    messageIcon="error">(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.Textarea />
    </>)</DsFormControl>;

const Warning = () => <DsFormControl
    status="warning"
    label="Input label"
    message="This is a warning caption under a text input."
    messageIcon="info">(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.Textarea />
    </>)</DsFormControl>;

const Disabled = () => <DsFormControl label="Input label">(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.Textarea placeholder="Disabled Input" disabled />
    </>)</DsFormControl>;

import { DefaultDescription, DsFormControl } from "@drivenets/design-system";

const Default = () => <DsFormControl
    label="Start Time"
    required
    message="Select a time"
    style={{ width: '300px' }}><DsFormControl.TimePicker /></DsFormControl>;

const WithDescription = () => <DsFormControl label="Start Time" required style={{ width: '300px' }}>(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.TimePicker />
    </>)</DsFormControl>;

const Error = () => <DsFormControl
    status="error"
    label="Start Time"
    required
    message="Time is required."
    messageIcon="error"
    style={{ width: '300px' }}>(<>
        <DsFormControl.Description>
            <DefaultDescription />
        </DsFormControl.Description>
        <DsFormControl.TimePicker />
    </>)</DsFormControl>;

const Disabled = () => <DsFormControl label="Start Time" style={{ width: '300px' }}><DsFormControl.TimePicker disabled /></DsFormControl>;

const WithMinMax = () => {
    const [value, setValue] = useState<Date | null>(null);

    return (
        <DsFormControl
            label="Business Hours"
            message="Select a time between 9:00 AM and 5:00 PM"
            style={{ width: '300px' }}>
            <DsFormControl.TimePicker
                value={value}
                onChange={setValue}
                min={new Date('2026-01-15T09:00:00')}
                max={new Date('2026-01-15T17:00:00')} />
        </DsFormControl>
    );
};

const WithValidation = function Render() {
    const [value, setValue] = useState<Date | null>(null);
    const [touched, setTouched] = useState(false);
    const error = touched && !value ? 'Time is required' : undefined;

    return (
        <DsFormControl
            label="Start Time"
            required
            status={error ? 'error' : undefined}
            messageIcon="cancel"
            message={error}
            style={{ width: '300px' }}
        >
            <DsFormControl.TimePicker
                value={value}
                onChange={(v) => {
                    setValue(v);
                    setTouched(true);
                }}
            />
        </DsFormControl>
    );
};

import { DsFormControl, DsIcon } from "@drivenets/design-system";

const Default = () => <DsFormControl label="Input label" required message="This is a message"><DsFormControl.TextInput placeholder="Input" /></DsFormControl>;

const WithCustomWidth = () => <DsFormControl label="Input label" required style={{ width: '300px' }}><DsFormControl.TextInput placeholder="Input with custom width" /></DsFormControl>;

const WithCustomStyles = () => <DsFormControl
    label="Input label"
    required
    style={{
        width: '400px',
        padding: '16px',
        border: '2px solid #e0e0e0',
        borderRadius: '8px',
        backgroundColor: '#f9f9f9',
    }}><DsFormControl.TextInput placeholder="Input with custom styling" /></DsFormControl>;

const WithDescription = () => <DsFormControl
    label="Input label"
    required
    style={{
        width: '300px',
    }}>(<>
        <DsFormControl.Description>
            This is a description text. It&apos;s an optional and will not exceeds more than 2 rows. A{' '}
            <button
                type="button"
                style={{
                    background: 'none',
                    border: 'none',
                    padding: 0,
                    margin: 0,
                    cursor: 'pointer',
                    color: 'var(--color-dap-blue-600)',
                    textDecoration: 'underline',
                    fontSize: 'inherit',
                    fontFamily: 'inherit',
                }}
                onClick={() => alert('Learn more clicked!')}
            >
                Learn more
            </button>{' '}
            can be added.
        </DsFormControl.Description>
        <DsFormControl.TextInput
            placeholder="Search"
            slots={{ startAdornment: <DsIcon icon="search" size="tiny" /> }}
        />
    </>)</DsFormControl>;

const WithHelpIcon = () => <DsFormControl
    label="Input label"
    required
    slots={{
        endAdornment: (
            <button
                type="button"
                onClick={() => alert('Help clicked!')}
                aria-label="Help"
                style={{
                    background: 'none',
                    border: 'none',
                    padding: '4px',
                    cursor: 'pointer',
                    color: 'var(--color-dap-gray-500)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    width: '16px',
                    height: '16px',
                    borderRadius: '50%',
                }}
            >
                <DsIcon icon="info" size="small" />
            </button>
        ),
    }}>(<>
        <DsFormControl.Description>
            This is a description text. It&apos;s an optional and will not exceeds more than 2 rows. A{' '}
            <button
                type="button"
                style={{
                    background: 'none',
                    border: 'none',
                    padding: 0,
                    margin: 0,
                    cursor: 'pointer',
                    color: 'var(--color-dap-blue-600)',
                    textDecoration: 'underline',
                    fontSize: 'inherit',
                    fontFamily: 'inherit',
                }}
                onClick={() => alert('Learn more clicked!')}
            >
                Learn more
            </button>{' '}
            can be added.
        </DsFormControl.Description>
        <DsFormControl.TextInput
            placeholder="Search"
            slots={{ startAdornment: <DsIcon icon="search" size="tiny" /> }}
        />
    </>)</DsFormControl>;

const WithIcon = () => <DsFormControl label="Input label" required message="This is a message">(<DsFormControl.TextInput
        placeholder="Input"
        slots={{ startAdornment: <DsIcon icon="call" size="tiny" /> }}
    />)</DsFormControl>;

const Success = () => <DsFormControl
    status="success"
    label="Input label"
    message="This is a success caption under a text input."
    messageIcon="check_circle">(<>
        <DsFormControl.Description>
            This is a description text. It&apos;s an optional and will not exceeds more than 2 rows. A{' '}
            <button
                type="button"
                style={{
                    background: 'none',
                    border: 'none',
                    padding: 0,
                    margin: 0,
                    cursor: 'pointer',
                    color: 'var(--color-dap-blue-600)',
                    textDecoration: 'underline',
                    fontSize: 'inherit',
                    fontFamily: 'inherit',
                }}
                onClick={() => alert('Learn more clicked!')}
            >
                Learn more
            </button>{' '}
            can be added.
        </DsFormControl.Description>
        <DsFormControl.TextInput
            type="text"
            slots={{ endAdornment: <DsIcon icon="visibility" size="tiny" /> }}
        />
    </>)</DsFormControl>;

const Error = () => <DsFormControl
    status="error"
    label="Input label"
    message="This is an error caption under a text input."
    messageIcon="error">(<>
        <DsFormControl.Description>
            This is a description text. It&apos;s an optional and will not exceeds more than 2 rows. A{' '}
            <button
                type="button"
                style={{
                    background: 'none',
                    border: 'none',
                    padding: 0,
                    margin: 0,
                    cursor: 'pointer',
                    color: 'var(--color-dap-blue-600)',
                    textDecoration: 'underline',
                    fontSize: 'inherit',
                    fontFamily: 'inherit',
                }}
                onClick={() => alert('Learn more clicked!')}
            >
                Learn more
            </button>{' '}
            can be added.
        </DsFormControl.Description>
        <DsFormControl.TextInput
            slots={{
                startAdornment: <DsIcon icon="search" size="tiny" />,
                endAdornment: <DsIcon icon="error" size="tiny" />,
            }}
        />
    </>)</DsFormControl>;

const Warning = () => <DsFormControl
    status="warning"
    label="Input label"
    message="This is a warning caption under a text input."
    messageIcon="info">(<>
        <DsFormControl.Description>
            This is a description text. It&apos;s an optional and will not exceeds more than 2 rows. A{' '}
            <button
                type="button"
                style={{
                    background: 'none',
                    border: 'none',
                    padding: 0,
                    margin: 0,
                    cursor: 'pointer',
                    color: 'var(--color-dap-blue-600)',
                    textDecoration: 'underline',
                    fontSize: 'inherit',
                    fontFamily: 'inherit',
                }}
                onClick={() => alert('Learn more clicked!')}
            >
                Learn more
            </button>{' '}
            can be added.
        </DsFormControl.Description>
        <DsFormControl.TextInput />
    </>)</DsFormControl>;

const Disabled = () => <DsFormControl label="Input label" required><DsFormControl.TextInput placeholder="Disabled Input" disabled /></DsFormControl>;

import { DefaultDescription, DsFormControl, DsIcon } from "@drivenets/design-system";

const Default = () => <DsFormControl
    label="Event Date"
    required
    style={{ width: '400px' }}
    message="Select a date for your event">
    <DsFormControl.DateInput />
</DsFormControl>;

const WithCustomWidth = () => <DsFormControl label="Event Date" required style={{ width: '400px' }}>
    <DsFormControl.DateInput />
</DsFormControl>;

const WithCustomStyles = () => <DsFormControl
    label="Event Date"
    required
    style={{
        width: '400px',
        padding: '16px',
        border: '2px solid #e0e0e0',
        borderRadius: '8px',
        backgroundColor: '#f9f9f9',
    }}>
    <DsFormControl.DateInput />
</DsFormControl>;

const WithDescription = () => <DsFormControl label="Event Date" required style={{ width: '400px' }}>
    <DsFormControl.Description>
        <DefaultDescription />
    </DsFormControl.Description>
    <DsFormControl.DateInput />
</DsFormControl>;

const WithHelpIcon = () => <DsFormControl
    label="Event Date"
    required
    style={{ width: '400px' }}
    slots={{
        endAdornment: (
            <button
                type="button"
                className={styles.helpIcon}
                onClick={() => alert('Help clicked!')}
                aria-label="Help"
            >
                <DsIcon icon="info" size="small" />
            </button>
        ),
    }}>
    <DsFormControl.Description>
        <DefaultDescription />
    </DsFormControl.Description>
    <DsFormControl.DateInput />
</DsFormControl>;

const Success = function Render() {
    const [value] = useState('2024-12-25');

    return (
        <div style={{ width: '400px' }}>
            <DsFormControl
                status="success"
                label="Event Date"
                message="Valid date selected."
                messageIcon="check_circle"
            >
                <DsFormControl.Description>
                    <DefaultDescription />
                </DsFormControl.Description>
                <DsFormControl.DateInput value={value} />
            </DsFormControl>
        </div>
    );
};

const Error = () => <DsFormControl
    status="error"
    label="Event Date"
    required
    message="Date is required."
    messageIcon="error"
    style={{ width: '400px' }}>
    <DsFormControl.Description>
        <DefaultDescription />
    </DsFormControl.Description>
    <DsFormControl.DateInput />
</DsFormControl>;

const Warning = function Render() {
    const [value] = useState('2024-12-25');

    return (
        <div style={{ width: '400px' }}>
            <DsFormControl
                status="warning"
                label="Event Date"
                message="Date is approaching deadline."
                messageIcon="info"
            >
                <DsFormControl.Description>
                    <DefaultDescription />
                </DsFormControl.Description>
                <DsFormControl.DateInput value={value} />
            </DsFormControl>
        </div>
    );
};

const Disabled = () => <DsFormControl label="Event Date" style={{ width: '400px' }}>
    <DsFormControl.Description>
        <DefaultDescription />
    </DsFormControl.Description>
    <DsFormControl.DateInput disabled />
</DsFormControl>;

const RangeMode = () => <DsFormControl
    label="Date Range"
    required
    message="Select start and end dates"
    style={{ width: '400px' }}>
    <DsFormControl.DateInput range />
</DsFormControl>;

const RangeWithValidation = function Render() {
    const [value, setValue] = useState<[string, string]>();
    const [touched, setTouched] = useState(false);
    const error = touched && !value ? 'Start and end dates are required' : undefined;

    return (
        <div style={{ width: '400px' }}>
            <DsFormControl
                label="Date Range"
                required
                status={error ? 'error' : undefined}
                messageIcon="cancel"
                message={error}
            >
                <DsFormControl.DateInput
                    value={value}
                    onValueChange={(value) => {
                        setValue(value);
                        setTouched(true);
                    }}
                    range
                />
            </DsFormControl>
        </div>
    );
};

const WithValidation = function Render() {
    const [value, setValue] = useState<string>();
    const [touched, setTouched] = useState(false);
    const error = touched && !value ? 'Date is required' : undefined;

    return (
        <div style={{ width: '400px' }}>
            <DsFormControl
                label="Event Date"
                required
                status={error ? 'error' : undefined}
                messageIcon="cancel"
                message={error}
            >
                <DsFormControl.DateInput
                    value={value}
                    onValueChange={(value) => {
                        setValue(value);
                        setTouched(true);
                    }}
                />
            </DsFormControl>
        </div>
    );
};

import { DsButton, DsGrid, DsGridItem } from "@drivenets/design-system";

const Default = () => <DsGrid className="my-grid" rows={6}>(<>
        <DsGridItem className="card" colSpan={4}>
            <div>Element 1</div>
        </DsGridItem>
        <DsGridItem className="card" colSpan={4} rowSpan={2}>
            <div>Element 2</div>
        </DsGridItem>
        <DsGridItem className="card" colSpan={4} rowSpan={2}>
            <div>Element 3</div>
        </DsGridItem>
        <DsGridItem className="card" colSpan={4} rowSpan={2}>
            <div>Element 4</div>
        </DsGridItem>
        <DsGridItem className="card" colSpan={4} rowSpan={2} rowStart={5} colStart={2}>
            <div>Element 4</div>
        </DsGridItem>
    </>)</DsGrid>;

const Responsive = () => <DsGrid
    className="my-grid"
    gutter={{ lg: 16, md: 8 }}
    margin={{ lg: '16px 20px', md: 8 }}
    rows={4}>(<>
        <DsGridItem className="card" colSpan={{ lg: 4, md: 6 }}>
            <div>Card 1 — lg:4 md:6</div>
        </DsGridItem>
        <DsGridItem className="card" colSpan={{ lg: 4, md: 6 }}>
            <div>Card 2 — lg:4 md:6</div>
        </DsGridItem>
        <DsGridItem className="card" colSpan={{ lg: 4, md: 12 }}>
            <div>Card 3 — lg:4 md:12</div>
        </DsGridItem>
        <DsGridItem className="card" colSpan={{ lg: 6, md: 12 }} rowSpan={{ lg: 2, md: 1 }}>
            <div>Card 4 — lg:6×2 md:12×1</div>
        </DsGridItem>
        <DsGridItem className="card" colSpan={{ lg: 6, md: 12 }}>
            <div>Card 5 — lg:6 md:12</div>
        </DsGridItem>
    </>)</DsGrid>;

const NavigationLayout = () => {
    const [isCollapsed, setIsCollapsed] = useState(false);

    return (
        <div className="layout">
            <div className="header">
                <div className="logo">
                    <DsButton
                        className="toggle"
                        design="v1.2"
                        onClick={() => setIsCollapsed(!isCollapsed)}>Toggle
                                                </DsButton>
                </div>
                <div className="title" />
            </div>
            <div className="main">
                <div className={`sidebar ${isCollapsed ? 'collapsed' : ''}`}>
                    <div className="sidebar-content" />
                </div>
                <main className="content-wrapper">
                    <DsGrid className="navigation-grid" rows={4}><>
                            <DsGridItem className="card" colSpan={4}>
                                <div>Dashboard Card 1</div>
                            </DsGridItem>
                            <DsGridItem className="card" colSpan={4}>
                                <div>Dashboard Card 2</div>
                            </DsGridItem>
                            <DsGridItem className="card" colSpan={4}>
                                <div>Dashboard Card 3</div>
                            </DsGridItem>
                            <DsGridItem className="card" colSpan={6}>
                                <div>Dashboard Card 4</div>
                            </DsGridItem>
                            <DsGridItem className="card" colSpan={6}>
                                <div>Dashboard Card 5</div>
                            </DsGridItem>
                        </></DsGrid>
                </main>
            </div>
        </div>
    );
};

import {
    DsIcon,
    DsKeyValuePair,
    DsSelect,
    DsTag,
    DsTextarea,
    DsTextInput,
    DsTooltip,
} from "@drivenets/design-system";

const ReadOnlyVertical = () => <DsKeyValuePair
    keyLabel="Start time"
    value="2024-05-23 16:47"
    readOnly
    orientation="vertical" />;

const ReadOnlyHorizontal = () => <DsKeyValuePair
    keyLabel="MAC"
    value="00:1A:2B:3C:4D:5E"
    readOnly
    orientation="horizontal" />;

const CustomLabel = () => <DsKeyValuePair
    keyLabel={(<span className={storyStyles.iconLabel}>
        <DsIcon icon="info" size="tiny" />Serial Number
                    </span>)}
    value="99887766"
    readOnly
    orientation="horizontal" />;

const EditableVertical = function Render() {
    const [serial, setSerial] = useState('99887766');

    return (
        <DsKeyValuePair
            keyLabel="Serial Number"
            value={serial}
            orientation="vertical"
            className={storyStyles.editableVerticalDemo}
            editInput={<DsTextInput value={serial} onValueChange={setSerial} size="small" />}
        />
    );
};

const EditableHorizontal = function Render() {
    const [model, setModel] = useState('Cisco RTR-X2000');

    return (
        <DsKeyValuePair
            keyLabel="Model"
            value={model}
            orientation="horizontal"
            className={storyStyles.editableHorizontalDemo}
            editInput={<DsTextInput value={model} onValueChange={setModel} size="small" />}
        />
    );
};

const WithTrailingIcon = function Render() {
    const [val, setVal] = useState('Editable value');

    return (
        <DsKeyValuePair
            keyLabel="Editable"
            orientation="horizontal"
            className={storyStyles.editableHorizontalDemo}
            value={
                <span className={storyStyles.valueWithIcon}>
                    {val}
                    <DsTooltip content="Additional info about this field">
                        <DsIcon icon="info" size="tiny" />
                    </DsTooltip>
                </span>
            }
            editInput={
                <span className={storyStyles.valueWithIcon}>
                    <DsTextInput
                        value={val}
                        onValueChange={setVal}
                        size="small"
                        className={storyStyles.mediumInput}
                    />
                    <DsTooltip content="Additional info about this field">
                        <DsIcon icon="info" size="tiny" />
                    </DsTooltip>
                </span>
            }
        />
    );
};

const Group = function Render() {
    const [serial, setSerial] = useState('99887766');
    const [manufacturer, setManufacturer] = useState('cisco');

    return (
        <div className={storyStyles.pairsColumn}>
            <DsKeyValuePair keyLabel="MAC" value="00:1A:2B:3C:4D:5E" readOnly orientation="horizontal" />
            <DsKeyValuePair
                keyLabel="SN"
                value={serial}
                orientation="horizontal"
                editInput={
                    <DsTextInput
                        value={serial}
                        onValueChange={setSerial}
                        size="small"
                        className={storyStyles.narrowInput}
                    />
                }
            />
            <DsKeyValuePair keyLabel="Model" value="Cisco RTR-X2000" readOnly orientation="horizontal" />
            <DsKeyValuePair
                keyLabel="MFR"
                value={MANUFACTURER_OPTIONS.find((o) => o.value === manufacturer)?.label ?? manufacturer}
                orientation="horizontal"
                editInput={
                    <DsSelect
                        options={MANUFACTURER_OPTIONS}
                        value={manufacturer}
                        onValueChange={setManufacturer}
                        size="small"
                    />
                }
            />
        </div>
    );
};

const ResponsiveWidth = function Render() {
    const [width, setWidth] = useState(DEFAULT_WIDTH);
    const [serial, setSerial] = useState('99887766');
    const [description, setDescription] = useState(LONG_TEXT);

    return (
        <div className={storyStyles.responsiveDemo}>
            <div className={storyStyles.responsiveSlider}>
                <span>{MIN_WIDTH}px</span>
                <input
                    type="range"
                    min={MIN_WIDTH}
                    max={MAX_WIDTH}
                    value={width}
                    onChange={(e) => setWidth(Number(e.target.value))}
                    className={storyStyles.responsiveSliderInput}
                />
                <span>{MAX_WIDTH}px</span>
                <span>({width}px)</span>
            </div>

            <div className={storyStyles.responsivePairs} style={{ width }}>
                <DsKeyValuePair keyLabel="MAC" value="00:1A:2B:3C:4D:5E" readOnly orientation="horizontal" />
                <DsKeyValuePair
                    keyLabel="Serial Number"
                    value={serial}
                    orientation="horizontal"
                    editInput={
                        <DsTextInput
                            value={serial}
                            onValueChange={setSerial}
                            size="small"
                            className={storyStyles.narrowInput}
                        />
                    }
                />
                <DsKeyValuePair keyLabel="Model" value="Cisco RTR-X2000" readOnly orientation="horizontal" />
                <DsKeyValuePair
                    keyLabel="Firmware Version"
                    value="v4.2.1-build.2847"
                    readOnly
                    orientation="horizontal"
                />
                <DsKeyValuePair
                    keyLabel="Description"
                    value={description}
                    orientation="horizontal"
                    editInput={
                        <DsTextarea
                            value={description}
                            onValueChange={setDescription}
                            rows={4}
                            className={storyStyles.descriptionTextarea}
                        />
                    }
                />
            </div>
        </div>
    );
};

const ValueTypes = function Render() {
    const [editable, setEditable] = useState('Editable value');
    const [manufacturer, setManufacturer] = useState('cisco');
    const [description, setDescription] = useState(LONG_TEXT);
    const [empty, setEmpty] = useState('');

    return (
        <div className={storyStyles.pairsColumn}>
            <DsKeyValuePair keyLabel="Read-only" value="Read only value" readOnly orientation="horizontal" />

            <DsKeyValuePair
                keyLabel="Editable"
                value={editable}
                orientation="horizontal"
                editInput={
                    <DsTextInput
                        value={editable}
                        onValueChange={setEditable}
                        size="small"
                        className={storyStyles.mediumInput}
                    />
                }
            />

            <DsKeyValuePair
                keyLabel="MFR"
                value={MANUFACTURER_OPTIONS.find((o) => o.value === manufacturer)?.label ?? manufacturer}
                orientation="horizontal"
                editInput={
                    <DsSelect
                        options={MANUFACTURER_OPTIONS}
                        value={manufacturer}
                        onValueChange={setManufacturer}
                        size="small"
                    />
                }
            />

            <DsKeyValuePair
                keyLabel="Status"
                value={
                    <span className={storyStyles.statusBadge}>
                        <DsIcon icon="check_circle" size="tiny" />
                        Active
                    </span>
                }
                readOnly
                orientation="horizontal"
            />

            <DsKeyValuePair
                keyLabel="Tags"
                value={
                    <span className={storyStyles.tagGroup}>
                        <DsTag label="Tag-name" size="small" />
                        <DsTag label="Tag-name" size="small" />
                        <DsTag label="Tag-name" size="small" />
                    </span>
                }
                readOnly
                orientation="horizontal"
            />

            <DsKeyValuePair
                keyLabel="Description"
                value={<span className={storyStyles.fullTextValue}>{description}</span>}
                orientation="horizontal"
                editInput={
                    <DsTextarea
                        value={description}
                        onValueChange={setDescription}
                        rows={4}
                        className={storyStyles.descriptionTextarea}
                    />
                }
            />

            <DsKeyValuePair
                keyLabel="Empty Value"
                value={empty || undefined}
                orientation="horizontal"
                editInput={<DsTextInput value={empty} onValueChange={setEmpty} size="small" />}
            />
        </div>
    );
};

import { DsNumberInput } from "@drivenets/design-system";

const Default = () => <DsNumberInput placeholder="Enter number" defaultValue={0} style={{ width: '200px' }} />;

const WithMinMax = () => <DsNumberInput
    placeholder="Enter number"
    defaultValue={50}
    min={0}
    max={100}
    step={1}
    style={{ width: '200px' }} />;

const Controlled = () => {
    const [value, setValue] = useState(42);

    return (
        <div
            style={{ display: 'flex', flexDirection: 'column', gap: '16px', alignItems: 'center' }}>
            <DsNumberInput
                placeholder="Enter number"
                min={0}
                max={100}
                step={1}
                style={{ width: '200px' }}
                value={value}
                defaultValue={0}
                onValueChange={(newValue) => setValue(newValue)} />
            <div>Current value: {value}</div>
            <button onClick={() => setValue(0)}>Reset to 0</button>
            <button onClick={() => setValue(100)}>Set to 100</button>
        </div>
    );
};

const Small = () => <DsNumberInput
    size="small"
    placeholder="Small number input"
    defaultValue={10}
    style={{ width: '150px' }} />;

const Disabled = () => <DsNumberInput
    placeholder="Disabled input"
    defaultValue={25}
    disabled
    style={{ width: '200px' }} />;

import { DsButton, DsNextStepButton, DsPanel, DsStep, DsStepContent, DsStepper } from "@drivenets/design-system";

const Default = function Render({ variant }) {
    const [open, setOpen] = useState(true);

    return (
        <>
            {!open && <DsButton onClick={() => setOpen(true)}>Open Panel</DsButton>}

            <DsPanel open={open} onOpenChange={setOpen} variant={variant}>
                <p>
                    This is a panel. It can contain any content you like, such as text, images, or other components.
                </p>

                <p>It is collapsible. Hover it to see the trigger button.</p>

                <DsButton size="small">Primary Action</DsButton>
            </DsPanel>
        </>
    );
};

const Responsive = function Render() {
    const [open, setOpen] = useState(true);

    return (
        <>
            {!open && <DsButton onClick={() => setOpen(true)}>Open Panel</DsButton>}

            <DsPanel open={open} onOpenChange={setOpen} width={{ lg: 480, md: 240 }}>
                <p>This panel uses a responsive width.</p>
                <p>Large screens: 480px. Medium screens: 240px.</p>

                <DsButton size="small">Primary Action</DsButton>
            </DsPanel>
        </>
    );
};

const Draggable = function Render() {
    const [panelVariant, setPanelVariant] = useState<DsPanelVariant>('docked');
    const [activeStep, setActiveStep] = useState(0);

    const isFloating = panelVariant === 'floating';

    const togglePanelVariant = () => {
        setPanelVariant(isFloating ? 'docked' : 'floating');
    };

    const steps = [
        { label: 'Configure network', description: 'Set up interfaces and routing policies' },
        { label: 'Assign resources', description: 'Allocate compute and storage for the deployment' },
        { label: 'Review & deploy', description: 'Verify configuration and launch' },
    ];

    return (
        <div style={{ position: 'relative', width: 600, height: 500 }}>
            <DsPanel
                open
                variant={panelVariant}
                draggable={isFloating}
                disablePadding={isFloating}
                slotProps={{
                    collapseButton: {
                        onClick: togglePanelVariant,
                        collapsed: isFloating,
                    },
                }}
            >
                <DsStepper
                    count={steps.length}
                    activeStep={activeStep}
                    onStepChange={({ step }) => setActiveStep(step)}
                    variant={isFloating ? 'single' : undefined}
                    floating={isFloating}
                >
                    {steps.map((s, index) => (
                        <DsStep index={index} key={index}>
                            <DsStepContent
                                index={index}
                                label={s.label}
                                description={s.description}
                                actions={
                                    <DsNextStepButton>{index === steps.length - 1 ? 'Deploy' : 'Next'}</DsNextStepButton>
                                }
                            />
                        </DsStep>
                    ))}
                </DsStepper>
            </DsPanel>
        </div>
    );
};

import { DsPasswordInput } from "@drivenets/design-system";

const Default = () => <DsPasswordInput placeholder="Enter password" style={{ width: '200px' }} />;

const Controlled = () => {
    const [value, setValue] = useState('initial-password');

    return (
        <div
            style={{ display: 'flex', flexDirection: 'column', gap: '16px', alignItems: 'center' }}>
            <DsPasswordInput
                placeholder="Enter password"
                style={{ width: '200px' }}
                value={value}
                onValueChange={(newValue) => setValue(newValue)} />
            <div>Current value: {value}</div>
            <button onClick={() => setValue('new-password')}>Set new password</button>
            <button onClick={() => setValue('')}>Clear password</button>
        </div>
    );
};

import { DsButton, DsIcon, DsPopover } from "@drivenets/design-system";
import { Close as PopoverClose } from "@radix-ui/react-popover";

const Default = () => <DsPopover
    trigger={(<DsButton>
        <DsIcon icon="info" />Open Popover
                    </DsButton>)}>(<div>
        <strong>ID:</strong>123456, Dallas, USA
                        <p>Facility Types: Tier 1, Tier 2</p>
        <p>Devices: 11, 2898</p>
        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
            <PopoverClose asChild>
                <DsIcon className="action-icon" icon="fullscreen" />
            </PopoverClose>
            <PopoverClose asChild>
                <DsIcon className="action-icon" icon="view_list" />
            </PopoverClose>
            <PopoverClose asChild>
                <DsIcon className="action-icon" icon="star" />
            </PopoverClose>
        </div>
    </div>)</DsPopover>;

import { DsIcon, DsProgressArc } from "@drivenets/design-system";

const Default = () => <DsProgressArc value={50} />;

const AllVariants = () => (
    <div className={styles.grid}>
        <div className={styles.cell}>
            <DsProgressArc size="small" value={50} />
            <span className={styles.label}>Small / Default</span>
        </div>
        <div className={styles.cell}>
            <DsProgressArc size="small" variant="success" />
            <span className={styles.label}>Small / Success</span>
        </div>
        <div className={styles.cell}>
            <DsProgressArc size="small" variant="error" value={50} />
            <span className={styles.label}>Small / Error</span>
        </div>

        <div className={styles.cell}>
            <DsProgressArc size="medium" value={50} />
            <span className={styles.label}>Medium / Default</span>
        </div>
        <div className={styles.cell}>
            <DsProgressArc size="medium" variant="success" />
            <span className={styles.label}>Medium / Success</span>
        </div>
        <div className={styles.cell}>
            <DsProgressArc size="medium" variant="error" value={50} />
            <span className={styles.label}>Medium / Error</span>
        </div>
    </div>
);

const Sizes = () => (
    <div className={styles.row}>
        <div className={styles.cell}>
            <DsProgressArc size="small" value={75} />
            <span className={styles.label}>Small</span>
        </div>
        <div className={styles.cell}>
            <DsProgressArc size="medium" value={75} />
            <span className={styles.label}>Medium</span>
        </div>
    </div>
);

const Success = () => <DsProgressArc variant="success" />;

const Error = () => <DsProgressArc variant="error" value={50} />;

const CustomIcon = () => <DsProgressArc value={80}><DsIcon icon="warning" size="small" /></DsProgressArc>;

const ZeroProgress = () => <DsProgressArc value={0} />;

const FullProgress = () => <DsProgressArc value={100} />;

import { DsIcon, DsProgressDonut } from "@drivenets/design-system";

const Default = () => <DsProgressDonut value={50} />;

const AllVariants = () => (
    <div className={styles.grid}>
        <div className={styles.cell}>
            <DsProgressDonut size="small" value={50} />
            <span className={styles.label}>Small / Default</span>
        </div>
        <div className={styles.cell}>
            <DsProgressDonut size="small" variant="success" />
            <span className={styles.label}>Small / Success</span>
        </div>
        <div className={styles.cell}>
            <DsProgressDonut size="small" variant="error" value={50} />
            <span className={styles.label}>Small / Error</span>
        </div>

        <div className={styles.cell}>
            <DsProgressDonut size="medium" value={50} />
            <span className={styles.label}>Medium / Default</span>
        </div>
        <div className={styles.cell}>
            <DsProgressDonut size="medium" variant="success" />
            <span className={styles.label}>Medium / Success</span>
        </div>
        <div className={styles.cell}>
            <DsProgressDonut size="medium" variant="error" value={50} />
            <span className={styles.label}>Medium / Error</span>
        </div>
    </div>
);

const Sizes = () => (
    <div className={styles.row}>
        <div className={styles.cell}>
            <DsProgressDonut size="small" value={75} />
            <span className={styles.label}>Small</span>
        </div>
        <div className={styles.cell}>
            <DsProgressDonut size="medium" value={75} />
            <span className={styles.label}>Medium</span>
        </div>
    </div>
);

const Success = () => <DsProgressDonut variant="success" />;

const Error = () => <DsProgressDonut variant="error" value={50} />;

const CustomIcon = () => <DsProgressDonut value={80}><DsIcon icon="warning" size="small" /></DsProgressDonut>;

const ZeroProgress = () => <DsProgressDonut value={0} />;

const FullProgress = () => <DsProgressDonut value={100} />;

import { DsIcon, DsSelect, DsStatusBadge, DsTag } from "@drivenets/design-system";

const Default = () => <ControlledSelectWrapper
    options={mockOptions}
    clearable
    style={{
        width: '200px',
    }} />;

const WithIcons = () => <ControlledSelectWrapper
    options={mockOptions.slice(0, 3).map((item) => ({
        ...item,
        icon: 'nutrition',
    }))}
    style={{
        width: '200px',
    }}
    clearable />;

const Sizes = () => <div className={styles.sizesContainer}>
    <div className={styles.sizeItem}>
        <div className={styles.sizeLabel}>Default</div>
        <ControlledSelectWrapper
            options={mockOptions.slice(0, 5)}
            clearable
            style={{
                width: '200px',
            }}
            size="default" />
    </div>
    <div className={styles.sizeItem}>
        <div className={styles.sizeLabel}>Small</div>
        <ControlledSelectWrapper
            options={mockOptions.slice(0, 5)}
            clearable
            style={{
                width: '200px',
            }}
            size="small" />
    </div>
</div>;

const WithSearch = () => <ControlledSelectWrapper
    options={[
        ...mockOptions,
        {
            value: 'nectarine',
            label: 'Nectarine',
        },
    ]}
    clearable
    style={{
        width: '200px',
    }} />;

const MultiSelect = () => <ControlledSelectWrapper
    options={mockOptions}
    style={{
        width: '250px',
    }}
    multiple
    clearable />;

const MultiSelectWithSearch = () => <ControlledSelectWrapper
    options={[
        ...mockOptions,
        {
            value: 'nectarine',
            label: 'Nectarine',
        },
    ]}
    style={{
        width: '250px',
    }}
    multiple
    clearable />;

const CustomRenderOption = () => <ControlledSelectWrapper
    options={countryOptions}
    renderOption={renderCountryOption}
    clearable
    style={{
        width: '250px',
    }} />;

const CustomRenderOptionMultiSelect = () => <ControlledSelectWrapper
    options={countryOptions}
    renderOption={renderCountryOption}
    multiple
    clearable
    style={{
        width: '300px',
    }} />;

const CustomRenderOptionWithSearch = () => <ControlledSelectWrapper
    options={[...mockOptions, ...countryOptions]}
    renderOption={(option) => (
        <span className={styles.customOption}>
            <DsIcon icon="public" size="tiny" />
            {option.label}
        </span>
    )}
    clearable
    style={{
        width: '300px',
    }} />;

const CustomRenderValue = () => {
    const [value, setValue] = useState('');

    const renderValue = (selected: DsSelectOption) => {
        const info = versionStatusMap[selected.value];

        return (
            <span className={styles.customOption}>
                {selected.label}
                {info && (
                    <DsStatusBadge status={info.status} label={info.label} size="small" ghost icon="check_circle" />
                )}
            </span>
        );
    };

    return (
        <DsSelect
            options={versionOptions}
            value={value}
            onValueChange={setValue}
            renderValue={renderValue}
            clearable
            style={{ width: '250px' }}
        />
    );
};

const CustomRenderValueMultiSelect = () => {
    const [value, setValue] = useState<string[]>([]);

    const renderOption = (option: DsSelectOption) => (
        <span className={styles.customOption}>
            <DsTag label={option.value.toUpperCase()} size="small" />
            {option.label}
        </span>
    );

    const renderValue = (selected: DsSelectOption[]) => (
        <span className={styles.customOption}>
            {selected.map((opt) => (
                <DsTag key={opt.value} label={opt.value.toUpperCase()} size="small" />
            ))}
        </span>
    );

    return (
        <DsSelect
            options={countryOptions}
            value={value}
            onValueChange={setValue}
            renderOption={renderOption}
            renderValue={renderValue}
            multiple
            clearable
            style={{ width: '300px' }}
        />
    );
};

const CustomRenderValueAndOption = () => {
    const [value, setValue] = useState('');

    const renderOption = (option: DsSelectOption) => {
        const info = versionStatusMap[option.value];

        if (!info) {
            return option.label;
        }

        return (
            <span className={styles.customOption}>
                {option.label}
                <DsStatusBadge status={info.status} label={info.label} size="small" ghost icon="check_circle" />
            </span>
        );
    };

    const renderValue = (selected: DsSelectOption) => {
        const info = versionStatusMap[selected.value];

        return (
            <span className={styles.customOption}>
                {selected.label}
                {info && (
                    <DsStatusBadge status={info.status} label={info.label} size="small" ghost icon="check_circle" />
                )}
            </span>
        );
    };

    return (
        <DsSelect
            options={versionOptions}
            value={value}
            onValueChange={setValue}
            renderOption={renderOption}
            renderValue={renderValue}
            clearable
            style={{ width: '250px' }}
        />
    );
};

const CustomRenderValueAndOptionMultiSelect = () => {
    const [value, setValue] = useState<string[]>([]);

    const renderOption = (option: DsSelectOption) => {
        const info = versionStatusMap[option.value];

        if (!info) {
            return option.label;
        }

        return (
            <span className={styles.customOption}>
                {option.label}
                <DsStatusBadge status={info.status} label={info.label} size="small" ghost icon="check_circle" />
            </span>
        );
    };

    const renderValue = (selected: DsSelectOption[]) => {
        const option = selected[0];
        const info = option ? versionStatusMap[option.value] : undefined;

        return (
            <span className={styles.customOption}>
                {option?.label}
                {info && (
                    <DsStatusBadge status={info.status} label={info.label} size="small" ghost icon="check_circle" />
                )}
                {selected.length > 1 && ` +${String(selected.length - 1)}`}
            </span>
        );
    };

    return (
        <DsSelect
            options={versionOptions}
            value={value}
            onValueChange={setValue}
            renderOption={renderOption}
            renderValue={renderValue}
            multiple
            clearable
            style={{ width: '300px' }}
        />
    );
};

const KeyboardInteractions = () => <ControlledSelectWrapper
    options={[
        ...mockOptions,
        {
            value: 'nectarine',
            label: 'Nectarine',
        },
    ]}
    clearable
    style={{
        width: '250px',
    }} />;

import { DsSplitButton } from "@drivenets/design-system";

const Default = () => {
    const [value, setValue] = useState('30');
    const [loading, setLoading] = useState(false);

    const handleAction = () => {
        setLoading(true);
        setTimeout(() => setLoading(false), 2000);
    };

    return (
        <DsSplitButton
            size="medium"
            disabled={false}
            slotProps={{
                button: {
                    ...args.slotProps.button,
                    loading,
                    icon: 'refresh',
                    onClick: handleAction,
                },
                select: {
                    ...args.slotProps.select,
                    value,
                    onValueChange: setValue,
                } as DsSelectProps,
            }} />
    );
};

const Loading = () => <DsSplitButton
    size="medium"
    disabled={false}
    slotProps={{
        button: {
            loading: true,
        },
        select: {
            options: refreshOptions,
            value: '30',
            onValueChange: fn(),
        },
    }} />;

const Disabled = () => <DsSplitButton
    size="medium"
    disabled
    slotProps={{
        button: { icon: 'refresh' },
        select: {
            options: refreshOptions,
            value: '30',
            onValueChange: fn(),
            multiple: false,
        },
    }} />;

import { DsStack } from "@drivenets/design-system";

const Default = () => <DsStack direction="column" gap={8}>
    <Box>Item 1</Box>
    <Box>Item 2</Box>
    <Box>Item 3</Box>
</DsStack>;

const Row = () => <DsStack direction="row" gap={16} alignItems="center">
    <Box>Item 1</Box>
    <Box>Item 2</Box>
    <Box>Item 3</Box>
</DsStack>;

const Responsive = () => <DsStack
    direction={{ md: 'column', lg: 'row' }}
    gap={{ md: 8, lg: 24 }}
    alignItems="center"
    className={styles.container}>
    <Box>Item 1</Box>
    <Box>Item 2</Box>
    <Box>Item 3</Box>
</DsStack>;

const SpaceBetween = () => <DsStack
    direction="row"
    justifyContent="space-between"
    alignItems="center"
    width="100%"
    className={styles.container}>
    <Box>Left</Box>
    <Box>Right</Box>
</DsStack>;

const Wrapping = () => <DsStack direction="row" gap={8} flexWrap="wrap" className={styles.container}>
    {Array.from({ length: 10 }, (_, i) => (
        <Box key={i}>Item {i + 1}</Box>
    ))}
</DsStack>;

const Nested = () => (
    <DsStack gap={24}>
        <DsStack direction="row" gap={16} alignItems="center">
            <Box>Row 1 - A</Box>
            <Box>Row 1 - B</Box>
            <Box>Row 1 - C</Box>
        </DsStack>

        <DsStack direction="row" gap={16} alignItems="center">
            <Box>Row 2 - A</Box>
            <Box>Row 2 - B</Box>
        </DsStack>
    </DsStack>
);

import {
    DsIcon,
    DsStack,
    DsStatusBadgeV2,
    DsStatusBadgeV2 as DsStatusBadgeV2Responsive,
} from "@drivenets/design-system";

const Default = () => <DsStatusBadgeV2 phase="active" label="Active" />;

const AllPhases = () => (
    <DsStack direction="column" gap="var(--xl)">
        <DsStack direction="column" gap="var(--xs)">
            <div className={styles.sectionTitle}>Primary — Medium</div>
            <DsStack direction="row" flexWrap="wrap" gap="var(--standard)" alignItems="center">
                <DsStatusBadgeV2 phase="not-started" label={phaseLabels['not-started']} />
                <DsStatusBadgeV2 phase="temporary" label={phaseLabels.temporary} />
                <DsStatusBadgeV2 phase="in-review" label={phaseLabels['in-review']} />
                <DsStatusBadgeV2 phase="pending" label={phaseLabels.pending} />
                <DsStatusBadgeV2 phase="active" label={phaseLabels.active} />
                <DsStatusBadgeV2 phase="execution" label={phaseLabels.execution} />
                <DsStatusBadgeV2 phase="result-succeeded" label={phaseLabels['result-succeeded']} />
                <DsStatusBadgeV2 phase="result-warning" label={phaseLabels['result-warning']} />
                <DsStatusBadgeV2 phase="result-failed" label={phaseLabels['result-failed']} />
                <DsStatusBadgeV2 phase="deprecated" label={phaseLabels.deprecated} />
            </DsStack>
        </DsStack>

        <DsStack direction="column" gap="var(--xs)">
            <div className={styles.sectionTitle}>Primary — Small</div>
            <DsStack direction="row" flexWrap="wrap" gap="var(--standard)" alignItems="center">
                <DsStatusBadgeV2 phase="not-started" label={phaseLabels['not-started']} size="small" />
                <DsStatusBadgeV2 phase="temporary" label={phaseLabels.temporary} size="small" />
                <DsStatusBadgeV2 phase="in-review" label={phaseLabels['in-review']} size="small" />
                <DsStatusBadgeV2 phase="pending" label={phaseLabels.pending} size="small" />
                <DsStatusBadgeV2 phase="active" label={phaseLabels.active} size="small" />
                <DsStatusBadgeV2 phase="execution" label={phaseLabels.execution} size="small" />
                <DsStatusBadgeV2 phase="result-succeeded" label={phaseLabels['result-succeeded']} size="small" />
                <DsStatusBadgeV2 phase="result-warning" label={phaseLabels['result-warning']} size="small" />
                <DsStatusBadgeV2 phase="result-failed" label={phaseLabels['result-failed']} size="small" />
                <DsStatusBadgeV2 phase="deprecated" label={phaseLabels.deprecated} size="small" />
            </DsStack>
        </DsStack>

        <DsStack direction="column" gap="var(--xs)">
            <div className={styles.sectionTitle}>Secondary — Medium</div>
            <DsStack direction="row" flexWrap="wrap" gap="var(--standard)" alignItems="center">
                <DsStatusBadgeV2 phase="not-started" label={phaseLabels['not-started']} variant="secondary" />
                <DsStatusBadgeV2 phase="temporary" label={phaseLabels.temporary} variant="secondary" />
                <DsStatusBadgeV2 phase="in-review" label={phaseLabels['in-review']} variant="secondary" />
                <DsStatusBadgeV2 phase="pending" label={phaseLabels.pending} variant="secondary" />
                <DsStatusBadgeV2 phase="active" label={phaseLabels.active} variant="secondary" />
                <DsStatusBadgeV2 phase="execution" label={phaseLabels.execution} variant="secondary" />
                <DsStatusBadgeV2
                    phase="result-succeeded"
                    label={phaseLabels['result-succeeded']}
                    variant="secondary"
                />
                <DsStatusBadgeV2 phase="result-warning" label={phaseLabels['result-warning']} variant="secondary" />
                <DsStatusBadgeV2 phase="result-failed" label={phaseLabels['result-failed']} variant="secondary" />
                <DsStatusBadgeV2 phase="deprecated" label={phaseLabels.deprecated} variant="secondary" />
            </DsStack>
        </DsStack>

        <DsStack direction="column" gap="var(--xs)">
            <div className={styles.sectionTitle}>Secondary — Small</div>
            <DsStack direction="row" flexWrap="wrap" gap="var(--standard)" alignItems="center">
                <DsStatusBadgeV2
                    phase="not-started"
                    label={phaseLabels['not-started']}
                    variant="secondary"
                    size="small"
                />
                <DsStatusBadgeV2 phase="temporary" label={phaseLabels.temporary} variant="secondary" size="small" />
                <DsStatusBadgeV2
                    phase="in-review"
                    label={phaseLabels['in-review']}
                    variant="secondary"
                    size="small"
                />
                <DsStatusBadgeV2 phase="pending" label={phaseLabels.pending} variant="secondary" size="small" />
                <DsStatusBadgeV2 phase="active" label={phaseLabels.active} variant="secondary" size="small" />
                <DsStatusBadgeV2 phase="execution" label={phaseLabels.execution} variant="secondary" size="small" />
                <DsStatusBadgeV2
                    phase="result-succeeded"
                    label={phaseLabels['result-succeeded']}
                    variant="secondary"
                    size="small"
                />
                <DsStatusBadgeV2
                    phase="result-warning"
                    label={phaseLabels['result-warning']}
                    variant="secondary"
                    size="small"
                />
                <DsStatusBadgeV2
                    phase="result-failed"
                    label={phaseLabels['result-failed']}
                    variant="secondary"
                    size="small"
                />
                <DsStatusBadgeV2
                    phase="deprecated"
                    label={phaseLabels.deprecated}
                    variant="secondary"
                    size="small"
                />
            </DsStack>
        </DsStack>
    </DsStack>
);

const IconOnly = () => (
    <DsStack direction="column" gap="var(--xl)">
        <DsStack direction="column" gap="var(--xs)">
            <div className={styles.sectionTitle}>Icon-only (hover for tooltip)</div>
            <DsStack direction="row" flexWrap="wrap" gap="var(--standard)" alignItems="center">
                <DsStatusBadgeV2 phase="not-started" label={phaseLabels['not-started']} iconOnly />
                <DsStatusBadgeV2 phase="temporary" label={phaseLabels.temporary} iconOnly />
                <DsStatusBadgeV2 phase="in-review" label={phaseLabels['in-review']} iconOnly />
                <DsStatusBadgeV2 phase="pending" label={phaseLabels.pending} iconOnly />
                <DsStatusBadgeV2 phase="active" label={phaseLabels.active} iconOnly />
                <DsStatusBadgeV2 phase="execution" label={phaseLabels.execution} iconOnly />
                <DsStatusBadgeV2 phase="result-succeeded" label={phaseLabels['result-succeeded']} iconOnly />
                <DsStatusBadgeV2 phase="result-warning" label={phaseLabels['result-warning']} iconOnly />
                <DsStatusBadgeV2 phase="result-failed" label={phaseLabels['result-failed']} iconOnly />
                <DsStatusBadgeV2 phase="deprecated" label={phaseLabels.deprecated} iconOnly />
            </DsStack>
        </DsStack>

        <DsStack direction="column" gap="var(--xs)">
            <div className={styles.sectionTitle}>Icon-only — Small</div>
            <DsStack direction="row" flexWrap="wrap" gap="var(--standard)" alignItems="center">
                <DsStatusBadgeV2 phase="not-started" label={phaseLabels['not-started']} iconOnly size="small" />
                <DsStatusBadgeV2 phase="temporary" label={phaseLabels.temporary} iconOnly size="small" />
                <DsStatusBadgeV2 phase="in-review" label={phaseLabels['in-review']} iconOnly size="small" />
                <DsStatusBadgeV2 phase="pending" label={phaseLabels.pending} iconOnly size="small" />
                <DsStatusBadgeV2 phase="active" label={phaseLabels.active} iconOnly size="small" />
                <DsStatusBadgeV2 phase="execution" label={phaseLabels.execution} iconOnly size="small" />
                <DsStatusBadgeV2
                    phase="result-succeeded"
                    label={phaseLabels['result-succeeded']}
                    iconOnly
                    size="small"
                />
                <DsStatusBadgeV2
                    phase="result-warning"
                    label={phaseLabels['result-warning']}
                    iconOnly
                    size="small"
                />
                <DsStatusBadgeV2 phase="result-failed" label={phaseLabels['result-failed']} iconOnly size="small" />
                <DsStatusBadgeV2 phase="deprecated" label={phaseLabels.deprecated} iconOnly size="small" />
            </DsStack>
        </DsStack>

        <DsStack direction="column" gap="var(--xs)">
            <div className={styles.sectionTitle}>Icon-only Secondary</div>
            <DsStack direction="row" flexWrap="wrap" gap="var(--standard)" alignItems="center">
                <DsStatusBadgeV2
                    phase="not-started"
                    label={phaseLabels['not-started']}
                    iconOnly
                    variant="secondary"
                />
                <DsStatusBadgeV2 phase="temporary" label={phaseLabels.temporary} iconOnly variant="secondary" />
                <DsStatusBadgeV2 phase="in-review" label={phaseLabels['in-review']} iconOnly variant="secondary" />
                <DsStatusBadgeV2 phase="pending" label={phaseLabels.pending} iconOnly variant="secondary" />
                <DsStatusBadgeV2 phase="active" label={phaseLabels.active} iconOnly variant="secondary" />
                <DsStatusBadgeV2 phase="execution" label={phaseLabels.execution} iconOnly variant="secondary" />
                <DsStatusBadgeV2
                    phase="result-succeeded"
                    label={phaseLabels['result-succeeded']}
                    iconOnly
                    variant="secondary"
                />
                <DsStatusBadgeV2
                    phase="result-warning"
                    label={phaseLabels['result-warning']}
                    iconOnly
                    variant="secondary"
                />
                <DsStatusBadgeV2
                    phase="result-failed"
                    label={phaseLabels['result-failed']}
                    iconOnly
                    variant="secondary"
                />
                <DsStatusBadgeV2 phase="deprecated" label={phaseLabels.deprecated} iconOnly variant="secondary" />
            </DsStack>
        </DsStack>
    </DsStack>
);

const TextOnly = () => (
    <DsStack direction="column" gap="var(--xs)">
        <div className={styles.sectionTitle}>Text-only (icon=null)</div>
        <DsStack direction="row" flexWrap="wrap" gap="var(--standard)" alignItems="center">
            <DsStatusBadgeV2 phase="not-started" label={phaseLabels['not-started']} icon={null} />
            <DsStatusBadgeV2 phase="temporary" label={phaseLabels.temporary} icon={null} />
            <DsStatusBadgeV2 phase="in-review" label={phaseLabels['in-review']} icon={null} />
            <DsStatusBadgeV2 phase="pending" label={phaseLabels.pending} icon={null} />
            <DsStatusBadgeV2 phase="active" label={phaseLabels.active} icon={null} />
            <DsStatusBadgeV2 phase="execution" label={phaseLabels.execution} icon={null} />
            <DsStatusBadgeV2 phase="result-succeeded" label={phaseLabels['result-succeeded']} icon={null} />
            <DsStatusBadgeV2 phase="result-warning" label={phaseLabels['result-warning']} icon={null} />
            <DsStatusBadgeV2 phase="result-failed" label={phaseLabels['result-failed']} icon={null} />
            <DsStatusBadgeV2 phase="deprecated" label={phaseLabels.deprecated} icon={null} />
        </DsStack>
    </DsStack>
);

const PhaseReference = () => (
    <DsStack direction="column" gap="var(--xs)">
        <table className={styles.docsTable}>
            <thead>
                <tr>
                    <th>Phase</th>
                    <th>Badge</th>
                    <th>Icon</th>
                    <th>Example Domain Statuses</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        <code>not-started</code>
                    </td>
                    <td>
                        <DsStatusBadgeV2 phase="not-started" label={phaseLabels['not-started']} />
                    </td>
                    <td>
                        <DsIcon icon={phaseIconMap['not-started']} size="tiny" filled />
                    </td>
                    <td>{phaseExamples['not-started']}</td>
                </tr>
                <tr>
                    <td>
                        <code>temporary</code>
                    </td>
                    <td>
                        <DsStatusBadgeV2 phase="temporary" label={phaseLabels.temporary} />
                    </td>
                    <td>
                        <DsIcon icon={phaseIconMap.temporary} size="tiny" filled />
                    </td>
                    <td>{phaseExamples.temporary}</td>
                </tr>
                <tr>
                    <td>
                        <code>in-review</code>
                    </td>
                    <td>
                        <DsStatusBadgeV2 phase="in-review" label={phaseLabels['in-review']} />
                    </td>
                    <td>
                        <DsIcon icon={phaseIconMap['in-review']} size="tiny" filled />
                    </td>
                    <td>{phaseExamples['in-review']}</td>
                </tr>
                <tr>
                    <td>
                        <code>pending</code>
                    </td>
                    <td>
                        <DsStatusBadgeV2 phase="pending" label={phaseLabels.pending} />
                    </td>
                    <td>
                        <DsIcon icon={phaseIconMap.pending} size="tiny" filled />
                    </td>
                    <td>{phaseExamples.pending}</td>
                </tr>
                <tr>
                    <td>
                        <code>active</code>
                    </td>
                    <td>
                        <DsStatusBadgeV2 phase="active" label={phaseLabels.active} />
                    </td>
                    <td>
                        <DsIcon icon={phaseIconMap.active} size="tiny" filled />
                    </td>
                    <td>{phaseExamples.active}</td>
                </tr>
                <tr>
                    <td>
                        <code>execution</code>
                    </td>
                    <td>
                        <DsStatusBadgeV2 phase="execution" label={phaseLabels.execution} />
                    </td>
                    <td>
                        <DsIcon icon={phaseIconMap.execution} size="tiny" filled />
                    </td>
                    <td>{phaseExamples.execution}</td>
                </tr>
                <tr>
                    <td>
                        <code>result-succeeded</code>
                    </td>
                    <td>
                        <DsStatusBadgeV2 phase="result-succeeded" label={phaseLabels['result-succeeded']} />
                    </td>
                    <td>
                        <DsIcon icon={phaseIconMap['result-succeeded']} size="tiny" filled />
                    </td>
                    <td>{phaseExamples['result-succeeded']}</td>
                </tr>
                <tr>
                    <td>
                        <code>result-warning</code>
                    </td>
                    <td>
                        <DsStatusBadgeV2 phase="result-warning" label={phaseLabels['result-warning']} />
                    </td>
                    <td>
                        <DsIcon icon={phaseIconMap['result-warning']} size="tiny" filled />
                    </td>
                    <td>{phaseExamples['result-warning']}</td>
                </tr>
                <tr>
                    <td>
                        <code>result-failed</code>
                    </td>
                    <td>
                        <DsStatusBadgeV2 phase="result-failed" label={phaseLabels['result-failed']} />
                    </td>
                    <td>
                        <DsIcon icon={phaseIconMap['result-failed']} size="tiny" filled />
                    </td>
                    <td>{phaseExamples['result-failed']}</td>
                </tr>
                <tr>
                    <td>
                        <code>deprecated</code>
                    </td>
                    <td>
                        <DsStatusBadgeV2 phase="deprecated" label={phaseLabels.deprecated} />
                    </td>
                    <td>
                        <DsIcon icon={phaseIconMap.deprecated} size="tiny" filled />
                    </td>
                    <td>{phaseExamples.deprecated}</td>
                </tr>
            </tbody>
        </table>
    </DsStack>
);

const ResponsiveSize = () => (
    <DsStack direction="row" gap="var(--sm)" alignItems="center" flexWrap="wrap">
        <DsStatusBadgeV2Responsive
            phase="active"
            label="lg: medium / md: small"
            size={{ lg: 'medium', md: 'small' }}
        />
        <DsStatusBadgeV2Responsive
            phase="pending"
            label="lg: small / md: medium"
            size={{ lg: 'small', md: 'medium' }}
        />
        <DsStatusBadgeV2Responsive phase="execution" label="static: medium" size="medium" />
    </DsStack>
);

import { DsIcon, DsNextStepButton, DsPanel, DsStep, DsStepContent, DsStepper } from "@drivenets/design-system";

const Default = function Render() {
    return (
        <div style={{ width: 300 }}>
            <DsStepper count={steps.length}>
                {steps.map((step, index) => (
                    <DsStep index={index} key={index}>
                        <DsStepContent
                            index={index}
                            label={step.label}
                            description={step.description}
                            actions={
                                <DsNextStepButton>{index === steps.length - 1 ? 'Finish' : 'Next'}</DsNextStepButton>
                            }
                        />
                    </DsStep>
                ))}
            </DsStepper>
        </div>
    );
};

const Compact = function Render() {
    return (
        <div style={{ width: 300 }}>
            <DsStepper count={steps.length}>
                {steps.map((step, index) => (
                    <DsStep index={index} key={index}>
                        <DsStepContent
                            index={index}
                            label={step.label}
                            actions={
                                <DsNextStepButton>{index === steps.length - 1 ? 'Finish' : 'Next'}</DsNextStepButton>
                            }
                        />
                    </DsStep>
                ))}
            </DsStepper>
        </div>
    );
};

const WithPanel = function Render() {
    const [activeStep, setActiveStep] = useState(0);
    const [panelVariant, setPanelVariant] = useState<DsPanelVariant>('docked');

    const isFloating = panelVariant === 'floating';

    const togglePanelVariant = () => {
        setPanelVariant(isFloating ? 'docked' : 'floating');
    };

    return (
        <DsPanel
            open
            variant={panelVariant}
            draggable={isFloating}
            disablePadding={isFloating}
            slotProps={{
                collapseButton: {
                    onClick: togglePanelVariant,
                    collapsed: isFloating,
                },
            }}
        >
            <DsStepper
                count={steps.length}
                activeStep={activeStep}
                onStepChange={({ step }) => setActiveStep(step)}
                variant={isFloating ? 'single' : undefined}
                floating={isFloating}
            >
                {steps.map((step, index) => (
                    <DsStep index={index} key={index}>
                        <DsStepContent
                            index={index}
                            label={step.label}
                            description={step.description}
                            actions={
                                <DsNextStepButton>{index === steps.length - 1 ? 'Finish' : 'Next'}</DsNextStepButton>
                            }
                        />
                    </DsStep>
                ))}
            </DsStepper>
        </DsPanel>
    );
};

const Horizontal = function Render() {
    return (
        <DsStepper
            count={horizontalSteps.length}
            orientation="horizontal"
            actions={<DsNextStepButton>Next</DsNextStepButton>}
        >
            {horizontalSteps.map((step, index) => (
                <DsStep index={index} key={index}>
                    <DsStepContent index={index} label={step.label} description={step.description} />
                </DsStep>
            ))}
        </DsStepper>
    );
};

const HorizontalFewSteps = function Render() {
    return (
        <DsStepper
            count={fewSteps.length}
            orientation="horizontal"
            actions={<DsNextStepButton>Next</DsNextStepButton>}
        >
            {fewSteps.map((step, index) => (
                <DsStep index={index} key={index}>
                    <DsStepContent index={index} label={step.label} description={step.description} />
                </DsStep>
            ))}
        </DsStepper>
    );
};

const HorizontalCompactFewSteps = function Render() {
    return (
        <DsStepper
            count={fewCompactSteps.length}
            orientation="horizontal"
            actions={<DsNextStepButton>Next</DsNextStepButton>}
        >
            {fewCompactSteps.map((step, index) => (
                <DsStep index={index} key={index}>
                    <DsStepContent index={index} label={step.label} />
                </DsStep>
            ))}
        </DsStepper>
    );
};

const CustomizedHorizontal = function Render() {
    const [activeStep, setActiveStep] = useState(0);

    return (
        <DsStepper
            count={customSteps.length}
            orientation="horizontal"
            activeStep={activeStep}
            onStepChange={({ step }) => setActiveStep(step)}
            actions={
                <DsNextStepButton variant="ghost">
                    {activeStep === customSteps.length - 1 ? 'Finish' : 'Continue'}
                </DsNextStepButton>
            }
        >
            {customSteps.map((step, index) => (
                <DsStep index={index} key={index} slots={{ indicator: <DsIcon icon={step.icon} size="small" /> }}>
                    <DsStepContent index={index} label={step.label} description={step.description} />
                </DsStep>
            ))}
        </DsStepper>
    );
};

const CustomizedVertical = function Render() {
    const [activeStep, setActiveStep] = useState(0);

    return (
        <div style={{ width: 350 }}>
            <DsStepper count={3} activeStep={activeStep} onStepChange={({ step }) => setActiveStep(step)}>
                <DsStep index={0}>
                    <DsStepContent
                        index={0}
                        label="Project details"
                        description="Enter project name and basic configuration"
                        actions={<DsNextStepButton>Next</DsNextStepButton>}
                    />
                </DsStep>

                <DsStep
                    index={1}
                    className={activeStep === 1 ? styles.approveStep : undefined}
                    slots={{
                        indicator: <DsIcon icon="monitor_heart" size="small" />,
                    }}
                    slotProps={{
                        indicator: {
                            className: activeStep === 1 ? styles.approveIcon : undefined,
                        },
                    }}
                >
                    <DsStepContent
                        index={1}
                        label={
                            <span className={activeStep === 1 ? styles.approveTitle : undefined}>Verify health</span>
                        }
                        description="Confirm all services report healthy status"
                        actions={
                            <DsNextStepButton className={activeStep === 1 ? styles.approveButton : undefined}>
                                Approve
                            </DsNextStepButton>
                        }
                    />
                </DsStep>

                <DsStep index={2}>
                    <DsStepContent
                        index={2}
                        label="Design policy"
                        description="Define the design constraints and rules"
                        actions={<DsNextStepButton>Finish</DsNextStepButton>}
                    />
                </DsStep>
            </DsStepper>
        </div>
    );
};

const WithDisabledSteps = function Render() {
    return (
        <div style={{ width: 350 }}>
            <DsStepper count={4}>
                <DsStep index={0}>
                    <DsStepContent
                        index={0}
                        label="Basic information"
                        description="Enter your project details"
                        actions={<DsNextStepButton>Next</DsNextStepButton>}
                    />
                </DsStep>

                <DsStep index={1} disabled>
                    <DsStepContent
                        index={1}
                        label="Advanced settings"
                        description="Configure advanced options (requires approval)"
                        actions={<DsNextStepButton>Next</DsNextStepButton>}
                    />
                </DsStep>

                <DsStep index={2}>
                    <DsStepContent
                        index={2}
                        label="Review"
                        description="Review your configuration"
                        actions={<DsNextStepButton>Next</DsNextStepButton>}
                    />
                </DsStep>

                <DsStep index={3} disabled>
                    <DsStepContent
                        index={3}
                        label="Deploy"
                        description="Deploy to production (requires elevated permissions)"
                        actions={<DsNextStepButton>Finish</DsNextStepButton>}
                    />
                </DsStep>
            </DsStepper>
        </div>
    );
};

const WithErrorStep = function Render() {
    return (
        <div style={{ width: 350 }}>
            <DsStepper count={4}>
                <DsStep index={0}>
                    <DsStepContent
                        index={0}
                        label="Configuration"
                        description="Enter deployment configuration"
                        actions={<DsNextStepButton>Next</DsNextStepButton>}
                    />
                </DsStep>

                <DsStep index={1} variant="error">
                    <DsStepContent
                        index={1}
                        label="Validation"
                        description="Configuration validation failed"
                        actions={<DsNextStepButton>Retry</DsNextStepButton>}
                    />
                </DsStep>

                <DsStep index={2}>
                    <DsStepContent
                        index={2}
                        label="Review"
                        description="Review and confirm changes"
                        actions={<DsNextStepButton>Next</DsNextStepButton>}
                    />
                </DsStep>

                <DsStep index={3}>
                    <DsStepContent
                        index={3}
                        label="Complete"
                        description="Finalize deployment"
                        actions={<DsNextStepButton>Finish</DsNextStepButton>}
                    />
                </DsStep>
            </DsStepper>
        </div>
    );
};

import { DsSystemStatus } from "@drivenets/design-system";

const Default = () => <DsSystemStatus status="healthy" />;

const CustomLabel = () => <DsSystemStatus status="error" label="Critical Error" />;

import { DsTextarea } from "@drivenets/design-system";

const Default = () => <DsTextarea placeholder="Enter your text here..." rows={3} />;

const Disabled = () => <DsTextarea
    value="This textarea is disabled"
    disabled
    placeholder="Disabled textarea" />;

const MaxLength = () => <DsTextarea placeholder="Maximum 50 characters allowed" maxLength={50} rows={3} />;

import { DsIcon, DsTextInput } from "@drivenets/design-system";

const Default = () => <DsTextInput placeholder="Enter text..." size="default" style={{ width: '200px' }} />;

const Small = () => <DsTextInput size="small" placeholder="Small input..." style={{ width: '150px' }} />;

const WithValue = () => <DsTextInput value="Hello World" placeholder="Enter text..." />;

const Disabled = () => <DsTextInput placeholder="Disabled input" disabled style={{ width: '200px' }} />;

const Controlled = () => {
    const [value, setValue] = useState('initial value');

    return (
        <div
            style={{ display: 'flex', flexDirection: 'column', gap: '16px', alignItems: 'center' }}>
            <DsTextInput
                type="text"
                placeholder="Controlled input"
                style={{ width: '200px' }}
                value={value}
                onValueChange={(newValue) => setValue(newValue)} />
            <div>Current value: {value}</div>
            <button onClick={() => setValue('updated value')}>Update value</button>
            <button onClick={() => setValue('')}>Clear value</button>
        </div>
    );
};

const WithStartAdornment = () => <DsTextInput
    placeholder="Enter amount..."
    slots={{
        startAdornment: (
            <span
                style={{
                    color: 'var(--font-secondary)',
                    fontSize: '12px',
                    fontWeight: 'bold',
                }}
            >
                $
            </span>
        ),
    }}
    style={{ width: '200px' }} />;

const WithEndAdornment = function Render() {
    const [value, setValue] = useState('');

    return (
        <DsTextInput
            placeholder="Enter text..."
            value={value}
            onValueChange={setValue}
            slots={{
                endAdornment: (
                    <button type="button" onClick={() => setValue('')}>
                        <DsIcon icon="close" size="tiny" />
                    </button>
                ),
            }}
            style={{ width: '200px' }}
        />
    );
};

const WithBothAdornments = function Render() {
    const [value, setValue] = useState('');

    return (
        <DsTextInput
            placeholder="Search..."
            value={value}
            onValueChange={setValue}
            slots={{
                startAdornment: <DsIcon icon="search" size="tiny" />,
                endAdornment: (
                    <button type="button" onClick={() => setValue('')}>
                        <DsIcon icon="close" size="tiny" />
                    </button>
                ),
            }}
            style={{ width: '200px' }}
        />
    );
};

const CustomEmailAdornments = function Render() {
    const [value, setValue] = useState('');

    return (
        <DsTextInput
            size="small"
            type="email"
            placeholder="Enter email address..."
            value={value}
            onValueChange={setValue}
            slots={{
                startAdornment: (
                    <span
                        style={{
                            backgroundColor: 'var(--color-background-action-weak)',
                            borderRadius: '4px',
                            padding: '2px 6px',
                            fontSize: '12px',
                            color: 'var(--font-secondary)',
                            fontWeight: 'bold',
                        }}
                    >
                        @
                    </span>
                ),
                endAdornment: (
                    <button type="button" onClick={() => console.log('Send clicked')}>
                        <DsIcon icon="send" size="tiny" filled={!!value} />
                    </button>
                ),
            }}
            style={{ width: '250px' }}
        />
    );
};

const DisabledAdornments = () => <DsTextInput
    value="Disabled value"
    disabled
    slots={{
        startAdornment: (
            <button type="button" disabled={true}>
                <DsIcon icon="lock" size="tiny" />
            </button>
        ),
        endAdornment: (
            <button type="button" disabled={true}>
                <DsIcon icon="visibility" size="tiny" />
            </button>
        ),
    }}
    style={{ width: '200px' }} />;

const Interactive = function Render() {
    const [value, setValue] = useState('');
    const showClear = !!value;

    const handleValueChange = (newValue: string) => {
        setValue(newValue);
    };

    const handleClear = () => {
        setValue('');
    };

    return (
        <>
            <DsTextInput
                placeholder="Type something..."
                value={value}
                onValueChange={handleValueChange}
                slots={{
                    startAdornment: <DsIcon icon="search" size="tiny" />,
                    endAdornment: showClear && (
                        <button type="button" onClick={handleClear}>
                            <DsIcon icon="close" size="tiny" />
                        </button>
                    ),
                }}
                style={{ width: '200px' }}
            />
            <div style={{ marginTop: '8px', fontSize: '12px', color: 'var(--font-secondary)' }}>
                Character count: {value.length}
            </div>
        </>
    );
};

import { DsButton, DsThreadItem } from "@drivenets/design-system";

const Default = () => <DsThreadItem />;

const CurrentUserMessage = () => <DsThreadItem
    id="msg-2"
    isCommentAuthorMessage={false}
    canModify={false}
    content="This is my message, so it appears aligned to the right." />;

const LongMessage = () => <DsThreadItem
    id="msg-3"
    content="I think we should consider adjusting the timeline to ensure we have enough resources for the development phase. This will help us maintain quality standards and meet all the project requirements." />;

const NoAvatar = () => <DsThreadItem
    id="msg-4"
    author={{
        id: 'user-2',
        name: 'John Doe',
        avatarSrc: undefined,
    }}
    content="Message from a user without an avatar." />;

const RecentMessage = () => <DsThreadItem
    id="msg-5"
    createdAt={new Date(Date.now() - 30000)}
    content="Just posted this message." />;

const OldMessage = () => <DsThreadItem
    id="msg-6"
    createdAt={new Date(Date.now() - 86400000 * 3)}
    content="This message was posted a few days ago." />;

const MultilineMessage = () => <DsThreadItem
    id="msg-7"
    content={`Line 1: First line of the message
Line 2: Second line with more details
Line 3: Final line with conclusion`} />;

const EditAndSave = () => <DsThreadItem />;

const EditSaveDisabledWhenEmpty = () => <DsThreadItem />;

const EditSaveDisabledWhenUnchanged = () => <DsThreadItem />;

const DeleteAction = () => <DsThreadItem />;

const MarkUnreadAction = () => <DsThreadItem />;

const ResolvedAction = () => <DsThreadItem />;

const NoActionsWhenCannotModify = () => <DsThreadItem
    canModify={false}
    onEdit={undefined}
    onDelete={undefined}
    onMarkUnread={undefined}
    onResolved={undefined} />;

const ContentChangeWhileNotEditing = function Render() {
    const [content, setContent] = useState(INITIAL_CONTENT);

    return (
        <>
            <DsThreadItem
                id="msg-ext-1"
                author={mockAuthor}
                content={content}
                createdAt={new Date(Date.now() - 3600000)}
                isCommentAuthorMessage
                canModify
                onEdit={fn()}
                onDelete={fn()}
            />

            <DsButton design="v1.2" size="small" onClick={() => setContent(UPDATED_CONTENT)}>
                Simulate external update
            </DsButton>
        </>
    );
};

const ContentChangeWhileEditing = function Render() {
    const [content, setContent] = useState(INITIAL_CONTENT);

    return (
        <>
            <DsThreadItem
                id="msg-ext-2"
                author={mockAuthor}
                content={content}
                createdAt={new Date(Date.now() - 3600000)}
                isCommentAuthorMessage
                canModify
                onEdit={fn()}
                onDelete={fn()}
            />

            <DsButton design="v1.2" size="small" onClick={() => setContent(UPDATED_CONTENT)}>
                Simulate external update
            </DsButton>
        </>
    );
};

const ContentChangeWhileEditingThenCancel = function Render() {
    const [content, setContent] = useState(INITIAL_CONTENT);

    return (
        <>
            <DsThreadItem
                id="msg-ext-3"
                author={mockAuthor}
                content={content}
                createdAt={new Date(Date.now() - 3600000)}
                isCommentAuthorMessage
                canModify
                onEdit={fn()}
                onDelete={fn()}
            />

            <DsButton design="v1.2" size="small" onClick={() => setContent(UPDATED_CONTENT)}>
                Simulate external update
            </DsButton>
        </>
    );
};

import { DsTimePicker } from "@drivenets/design-system";

const Default = () => {
    const [value, setValue] = useState<Date | null>();

    return (
        <DsTimePicker
            className={styles.container}
            value={value}
            onChange={(v) => {
                setValue(v);
                args.onChange?.(v);
            }} />
    );
};

const WithDefaultValue = () => <DsTimePicker className={styles.container} defaultValue={createTime(14, 30)} />;

const Controlled = () => {
    const defaultDate = createTime(9, 45);

    const [value, setValue] = useState<Date | null>(defaultDate);

    useEffect(() => {
        const interval = setInterval(() => {
            const date = createTime(Math.floor(Math.random() * 24), Math.floor(Math.random() * 60));
            setValue(date);
        }, 5000);

        return () => clearInterval(interval);
    }, []);

    return (
        <div>
            <DsTimePicker
                className={styles.container}
                value={value}
                onChange={(v) => {
                    setValue(v);
                    args.onChange?.(v);
                }} />
            <p className={styles.infoContainer}>In this example:</p>
            <p className={styles.infoContainer}>Value is randomly changing every 5 seconds. As user is typing the input do not show the new value
                                    until input loses focus.
                                </p>
            <p className={styles.infoContainer}>Value:{' '}
                {value
                    ? `${String(value.getHours()).padStart(2, '0')}:${String(value.getMinutes()).padStart(2, '0')}`
                    : 'undefined'}
            </p>
        </div>
    );
};

const Disabled = () => <DsTimePicker className={styles.container} value={createTime(14, 30)} disabled />;

const ReadOnly = () => <DsTimePicker className={styles.container} value={createTime(14, 30)} readOnly />;

const WithMinMax = () => {
    const [value, setValue] = useState<Date | null>(createTime(13, 50));

    return (
        <div>
            <DsTimePicker
                min={createTime(9, 30)}
                max={createTime(17, 40)}
                className={styles.container}
                value={value}
                onChange={(v) => {
                    setValue(v);
                    args.onChange?.(v);
                }} />
            <p className={styles.infoContainer}>Value:{' '}
                {value
                    ? `${String(value.getHours()).padStart(2, '0')}:${String(value.getMinutes()).padStart(2, '0')}`
                    : 'none'}
            </p>
            <p className={styles.infoContainer}>Range: {args.min?.toLocaleTimeString()}– {args.max?.toLocaleTimeString()}
            </p>
        </div>
    );
};

import { DsIcon, DsTooltip } from "@drivenets/design-system";

const Default = () => <DsTooltip content="This is the mouse over tooltip message."><DsIcon icon="info" /></DsTooltip>;

const LongText = () => <DsTooltip
    content="This tooltip contains a long message that spans multiple lines to verify the content is fully visible without truncation. The tooltip should expand vertically to accommodate all text, regardless of length. Users rely on tooltips to reveal information that may be clipped elsewhere in the interface, so cutting off tooltip content defeats the purpose."><DsIcon icon="info" /></DsTooltip>;

const RichContent = () => <DsTooltip
    content={(<div>
        <strong>Multi-line</strong>tooltip with <em>JSX</em>
        <br />
        <span style={{ color: '#9cdcfe' }}>No truncation should occur.</span>
    </div>)}><DsIcon icon="info" /></DsTooltip>;

const CustomWidthWithEllipsis = () => <DsTooltip
    content="Narrow tooltip with custom max-width and text overflow ellipsis applied via slotProps."
    slotProps={{
        content: {
            style: {
                maxWidth: 200,
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
            },
        },
    }}><DsIcon icon="info" /></DsTooltip>;

import { DsStack, DsTypography } from "@drivenets/design-system";

const Default = () => <DsTypography variant="body-md-reg" color="main">{sample}</DsTypography>;

const Variants = () => (
    <DsStack direction="column" gap="var(--sm)">
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>heading1</code>
            <DsTypography variant="heading1">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>heading2</code>
            <DsTypography variant="heading2">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>heading3</code>
            <DsTypography variant="heading3">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>heading4</code>
            <DsTypography variant="heading4">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>body-md-reg</code>
            <DsTypography variant="body-md-reg">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>body-md-md</code>
            <DsTypography variant="body-md-md">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>body-md-semi-bold</code>
            <DsTypography variant="body-md-semi-bold">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>body-md-bold</code>
            <DsTypography variant="body-md-bold">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>body-md-link</code>
            <DsTypography variant="body-md-link">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>body-sm-reg</code>
            <DsTypography variant="body-sm-reg">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>body-sm-md</code>
            <DsTypography variant="body-sm-md">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>body-sm-semi-bold</code>
            <DsTypography variant="body-sm-semi-bold">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>body-sm-bold</code>
            <DsTypography variant="body-sm-bold">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>body-sm-link</code>
            <DsTypography variant="body-sm-link">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>body-xs-reg</code>
            <DsTypography variant="body-xs-reg">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>body-xs-md</code>
            <DsTypography variant="body-xs-md">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>body-xs-semi-bold</code>
            <DsTypography variant="body-xs-semi-bold">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>body-xs-bold</code>
            <DsTypography variant="body-xs-bold">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>body-xs-link</code>
            <DsTypography variant="body-xs-link">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>code-sm-reg</code>
            <DsTypography variant="code-sm-reg">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>code-sm-semi-bold</code>
            <DsTypography variant="code-sm-semi-bold">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>code-xs-reg</code>
            <DsTypography variant="code-xs-reg">{sample}</DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>code-xs-semi-bold</code>
            <DsTypography variant="code-xs-semi-bold">{sample}</DsTypography>
        </div>
    </DsStack>
);

const Colors = () => (
    <DsStack direction="column" gap="var(--sm)">
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>main</code>
            <DsTypography variant="body-md-md" color="main">
                {sample}
            </DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>secondary</code>
            <DsTypography variant="body-md-md" color="secondary">
                {sample}
            </DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>action</code>
            <DsTypography variant="body-md-md" color="action">
                {sample}
            </DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>action-hover</code>
            <DsTypography variant="body-md-md" color="action-hover">
                {sample}
            </DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>action-secondary</code>
            <DsTypography variant="body-md-md" color="action-secondary">
                {sample}
            </DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>action-secondary-hover</code>
            <DsTypography variant="body-md-md" color="action-secondary-hover">
                {sample}
            </DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>disabled</code>
            <DsTypography variant="body-md-md" color="disabled">
                {sample}
            </DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>placeholder</code>
            <DsTypography variant="body-md-md" color="placeholder">
                {sample}
            </DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>highlight</code>
            <DsTypography variant="body-md-md" color="highlight">
                {sample}
            </DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>success</code>
            <DsTypography variant="body-md-md" color="success">
                {sample}
            </DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>warning</code>
            <DsTypography variant="body-md-md" color="warning">
                {sample}
            </DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>error</code>
            <DsTypography variant="body-md-md" color="error">
                {sample}
            </DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>code</code>
            <DsTypography variant="body-md-md" color="code">
                {sample}
            </DsTypography>
        </div>
    </DsStack>
);

const ColorsOnDark = () => (
    <div className={storyStyles.onDark}>
        <div className={storyStyles.row}>
            <code className={classNames(storyStyles.label, storyStyles.onDarkLabel)}>on-action</code>
            <DsTypography variant="body-md-md" color="on-action">
                {sample}
            </DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={classNames(storyStyles.label, storyStyles.onDarkLabel)}>on-disabled</code>
            <DsTypography variant="body-md-md" color="on-disabled">
                {sample}
            </DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={classNames(storyStyles.label, storyStyles.onDarkLabel)}>light-disabled</code>
            <DsTypography variant="body-md-md" color="light-disabled">
                {sample}
            </DsTypography>
        </div>
    </div>
);

const EscapeHatch = () => (
    <DsStack direction="column" gap="var(--sm)">
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>{'color="success"'}</code>
            <DsTypography variant="body-md-md" color="success">
                Semantic token.
            </DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>{'color="var(--color-dap-purple-600)"'}</code>
            <DsTypography variant="body-md-md" color="var(--color-dap-purple-600)">
                Custom primitive token via color prop.
            </DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>{'color="#ff8800"'}</code>
            <DsTypography variant="body-md-md" color="#ff8800">
                Inline hex color via color prop.
            </DsTypography>
        </div>
        <div className={storyStyles.row}>
            <code className={storyStyles.label}>style overrides color prop</code>
            <DsTypography variant="body-md-md" color="success" style={{ color: '#d70a00' }}>
                Inline style still wins when both are set.
            </DsTypography>
        </div>
    </DsStack>
);

const AsChild = () => (
    <DsStack direction="column" gap="var(--sm)">
        <DsTypography variant="heading3" asChild>
            <a href="#anchor">Heading rendered as anchor via asChild</a>
        </DsTypography>
        <DsTypography variant="body-md-md" color="action" asChild>
            <button type="button">Button styled like body-md-md / action</button>
        </DsTypography>
    </DsStack>
);

import { DsButtonV3, DsDrawer, DsIcon, DsStatusBadge, DsTypography, DsWorkspace } from "@drivenets/design-system";

const Default = () => (
    <DsWorkspace>
        <DsWorkspace.Header>
            <WorkspaceHeader />
        </DsWorkspace.Header>

        <DsWorkspace.SubHeader>
            <div className={styles.subHeaderContent}>
                <DsTypography variant="body-sm-semi-bold">Dashboard</DsTypography>
                <DsTypography variant="body-xs-reg">Last updated 2 min ago</DsTypography>
            </div>
        </DsWorkspace.SubHeader>

        <DsWorkspace.Content>
            <div className={styles.mainContent}>
                <div className={styles.card}>
                    <DsTypography variant="heading3">Welcome</DsTypography>
                    <DsTypography variant="body-md-reg">This is the main content area of the workspace.</DsTypography>
                </div>
                <div className={styles.card}>
                    <DsTypography variant="heading3">Section 2</DsTypography>
                    <DsTypography variant="body-md-reg">Another content section.</DsTypography>
                </div>
            </div>
        </DsWorkspace.Content>

        <DsWorkspace.Footer>
            <div className={styles.footerContent}>
                <span>v1.2.0</span>
                <div className={styles.footerActions}>
                    <DsButtonV3 variant="tertiary" size="small">
                        Help
                    </DsButtonV3>
                    <DsButtonV3 variant="tertiary" size="small">
                        Feedback
                    </DsButtonV3>
                </div>
            </div>
        </DsWorkspace.Footer>
    </DsWorkspace>
);

const WithDrawer = function Render() {
    const [drawerOpen, setDrawerOpen] = useState(false);

    return (
        <DsWorkspace>
            <DsWorkspace.Header>
                <WorkspaceHeader onAction={() => setDrawerOpen(true)} />
            </DsWorkspace.Header>

            <DsWorkspace.SubHeader>
                <div className={styles.subHeaderContent}>
                    <DsTypography variant="body-sm-semi-bold">Dashboard</DsTypography>
                </div>
            </DsWorkspace.SubHeader>

            <DsWorkspace.Content>
                <div className={styles.mainContent}>
                    <div className={styles.card}>
                        <DsTypography variant="heading3">Drawer containment</DsTypography>
                        <DsTypography variant="body-md-reg">
                            Click &quot;Save project&quot; in the header to open the drawer. It renders inside Content —
                            below the header/subheader and above the footer.
                        </DsTypography>
                    </div>
                </div>

                <DsDrawer open={drawerOpen} onOpenChange={setDrawerOpen} columns={4}>
                    <DsDrawer.Header>
                        <DsDrawer.Title>Details</DsDrawer.Title>
                        <DsDrawer.CloseTrigger />
                    </DsDrawer.Header>
                    <DsDrawer.Body>
                        <div className={styles.mainContent}>
                            <DsTypography variant="body-md-reg">
                                This drawer is contained within the content area.
                            </DsTypography>
                        </div>
                    </DsDrawer.Body>
                    <DsDrawer.Footer>
                        <DsDrawer.Actions>
                            <DsButtonV3 variant="tertiary" size="large" onClick={() => setDrawerOpen(false)}>
                                Cancel
                            </DsButtonV3>
                            <DsButtonV3 variant="primary" size="large">
                                Save
                            </DsButtonV3>
                        </DsDrawer.Actions>
                    </DsDrawer.Footer>
                </DsDrawer>
            </DsWorkspace.Content>

            <DsWorkspace.Footer>
                <div className={styles.footerContent}>
                    <span>v1.2.0</span>
                </div>
            </DsWorkspace.Footer>
        </DsWorkspace>
    );
};

const WithDrawerAndBackdrop = function Render() {
    const [drawerOpen, setDrawerOpen] = useState(false);

    return (
        <DsWorkspace>
            <DsWorkspace.Header>
                <WorkspaceHeader onAction={() => setDrawerOpen(true)} />
            </DsWorkspace.Header>

            <DsWorkspace.SubHeader>
                <div className={styles.subHeaderContent}>
                    <DsTypography variant="body-sm-semi-bold">Dashboard</DsTypography>
                </div>
            </DsWorkspace.SubHeader>

            <DsWorkspace.Content>
                <div className={styles.mainContent}>
                    <div className={styles.card}>
                        <DsTypography variant="heading3">Backdrop containment</DsTypography>
                        <DsTypography variant="body-md-reg">
                            Click &quot;Save project&quot; to open the drawer. The backdrop only covers the content area,
                            not the header or footer.
                        </DsTypography>
                    </div>
                </div>

                <DsDrawer open={drawerOpen} onOpenChange={setDrawerOpen} columns={4} backdrop>
                    <DsDrawer.Header>
                        <DsDrawer.Title>Modal Drawer</DsDrawer.Title>
                        <DsDrawer.CloseTrigger />
                    </DsDrawer.Header>
                    <DsDrawer.Body>
                        <div className={styles.mainContent}>
                            <DsTypography variant="body-md-reg">The backdrop is scoped to the content area.</DsTypography>
                        </div>
                    </DsDrawer.Body>
                </DsDrawer>
            </DsWorkspace.Content>

            <DsWorkspace.Footer>
                <div className={styles.footerContent}>
                    <span>v1.2.0</span>
                </div>
            </DsWorkspace.Footer>
        </DsWorkspace>
    );
};

const FillParent = () => (
    <div style={{ height: 400, border: '2px dashed var(--border)' }}>
        <DsWorkspace fillParent>
            <DsWorkspace.Header>
                <WorkspaceHeader />
            </DsWorkspace.Header>

            <DsWorkspace.Content>
                <div className={styles.mainContent}>
                    <DsTypography variant="body-md-reg">
                        This workspace fills its parent container (400px) instead of the viewport.
                    </DsTypography>
                </div>
            </DsWorkspace.Content>

            <DsWorkspace.Footer>
                <div className={styles.footerContent}>
                    <span>v1.2.0</span>
                </div>
            </DsWorkspace.Footer>
        </DsWorkspace>
    </div>
);

const HeaderOnly = () => (
    <DsWorkspace>
        <DsWorkspace.Header>
            <WorkspaceHeader />
        </DsWorkspace.Header>

        <DsWorkspace.Content>
            <div className={styles.mainContent}>
                <div className={styles.card}>
                    <DsTypography variant="heading3">No SubHeader or Footer</DsTypography>
                    <DsTypography variant="body-md-reg">
                        All sub-components are optional. Use only what you need.
                    </DsTypography>
                </div>
            </div>
        </DsWorkspace.Content>
    </DsWorkspace>
);

import { SampleForm } from "@drivenets/design-system";

const Default = () => <SampleForm />;