@shipfox/react-ui 0.13.0 → 0.14.0

package/dist/components/modal/modal.stories.js

@@ -4,6 +4,7 @@ import { screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Button, ButtonLink } from '../../components/button/index.js';
 import { CodeBlock, CodeBlockBody, CodeBlockContent, CodeBlockCopyButton, CodeBlockFilename, CodeBlockFiles, CodeBlockFooter, CodeBlockHeader, CodeBlockItem } from '../../components/code-block/index.js';
+import { Confetti } from '../../components/confetti/index.js';
 import { DatePicker } from '../../components/date-picker/index.js';
 import { DynamicItem } from '../../components/dynamic-item/index.js';
 import { Icon } from '../../components/icon/index.js';
@@ -12,7 +13,7 @@ import { ItemTitle } from '../../components/item/index.js';
 import { Label } from '../../components/label/index.js';
 import { MovingBorder } from '../../components/moving-border/index.js';
 import { Text } from '../../components/typography/index.js';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { cn } from '../../utils/cn.js';
 import illustration2 from '../../assets/illustration-2.svg';
 import illustrationBg from '../../assets/illustration-gradient.svg';
@@ -250,183 +251,241 @@ export const GithubActions = {
     },
     render: ()=>{
         const [open, setOpen] = useState(false);
-        return /*#__PURE__*/ _jsx("div", {
+        const [footerState, setFooterState] = useState('running');
+        const confettiRef = useRef(null);
+        useEffect(()=>{
+            if (open && footerState === 'running') {
+                const timer = setTimeout(()=>{
+                    setFooterState('done');
+                }, 3000);
+                return ()=>{
+                    clearTimeout(timer);
+                };
+            }
+        }, [
+            open,
+            footerState
+        ]);
+        useEffect(()=>{
+            if (footerState === 'done' && open) {
+                const timer = setTimeout(()=>{
+                    if (confettiRef.current) {
+                        void confettiRef.current.fire();
+                    }
+                }, 200);
+                return ()=>{
+                    clearTimeout(timer);
+                };
+            }
+        }, [
+            footerState,
+            open
+        ]);
+        useEffect(()=>{
+            if (!open) {
+                setFooterState('running');
+            }
+        }, [
+            open
+        ]);
+        return /*#__PURE__*/ _jsxs("div", {
             className: "flex h-[50vh] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip",
-            children: /*#__PURE__*/ _jsxs(Modal, {
-                open: open,
-                onOpenChange: setOpen,
-                children: [
-                    /*#__PURE__*/ _jsx(ModalTrigger, {
-                        asChild: true,
-                        children: /*#__PURE__*/ _jsx(Button, {
-                            children: "Run GitHub Actions on Shipfox"
-                        })
-                    }),
-                    /*#__PURE__*/ _jsxs(ModalContent, {
-                        "aria-describedby": undefined,
-                        overlayClassName: "bg-background-modal-overlay",
-                        children: [
-                            /*#__PURE__*/ _jsx(ModalTitle, {
-                                className: "sr-only",
+            children: [
+                /*#__PURE__*/ _jsx(Confetti, {
+                    ref: confettiRef,
+                    manualstart: true,
+                    options: {
+                        particleCount: 200,
+                        spread: 100,
+                        colors: [
+                            '#ff6b6b',
+                            '#4ecdc4',
+                            '#ffe66d',
+                            '#95e1d3'
+                        ]
+                    },
+                    className: "fixed inset-0 pointer-events-none z-100",
+                    style: {
+                        width: '100%',
+                        height: '100%'
+                    }
+                }),
+                /*#__PURE__*/ _jsxs(Modal, {
+                    open: open,
+                    onOpenChange: setOpen,
+                    children: [
+                        /*#__PURE__*/ _jsx(ModalTrigger, {
+                            asChild: true,
+                            children: /*#__PURE__*/ _jsx(Button, {
                                 children: "Run GitHub Actions on Shipfox"
-                            }),
-                            /*#__PURE__*/ _jsx(ModalHeader, {
-                                title: "Run GitHub Actions on Shipfox"
-                            }),
-                            /*#__PURE__*/ _jsxs(ModalBody, {
-                                className: "gap-32",
-                                children: [
-                                    /*#__PURE__*/ _jsxs("div", {
-                                        className: "flex flex-col gap-20 w-full",
-                                        children: [
-                                            /*#__PURE__*/ _jsx(Text, {
-                                                size: "sm",
-                                                className: "text-foreground-neutral-subtle w-full",
-                                                children: "This will run your jobs on Shipfox's optimized infrastructure. Giving you faster builds, and dedicated resources."
-                                            }),
-                                            /*#__PURE__*/ _jsxs("div", {
-                                                className: "relative",
-                                                children: [
-                                                    /*#__PURE__*/ _jsx("img", {
-                                                        src: illustration2,
-                                                        alt: "illustration-2",
-                                                        className: "hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 translate-x-8 w-fit object-contain z-50"
-                                                    }),
-                                                    /*#__PURE__*/ _jsxs("div", {
-                                                        className: cn('relative overflow-hidden bg-transparent p-1 rounded-8'),
-                                                        children: [
-                                                            /*#__PURE__*/ _jsx("div", {
-                                                                className: "absolute inset-0",
-                                                                style: {
-                                                                    borderRadius: 'calc(0.5rem * 0.96)'
-                                                                },
-                                                                children: /*#__PURE__*/ _jsx(MovingBorder, {
-                                                                    duration: 6000,
-                                                                    rx: "30%",
-                                                                    ry: "30%",
-                                                                    children: /*#__PURE__*/ _jsx("div", {
-                                                                        className: "h-100 w-200 bg-[radial-gradient(#ff9e7a_40%,transparent_60%)]"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(ModalContent, {
+                            "aria-describedby": undefined,
+                            overlayClassName: "bg-background-modal-overlay",
+                            children: [
+                                /*#__PURE__*/ _jsx(ModalTitle, {
+                                    className: "sr-only",
+                                    children: "Run GitHub Actions on Shipfox"
+                                }),
+                                /*#__PURE__*/ _jsx(ModalHeader, {
+                                    title: "Run GitHub Actions on Shipfox"
+                                }),
+                                /*#__PURE__*/ _jsxs(ModalBody, {
+                                    className: "gap-32",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex flex-col gap-20 w-full",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Text, {
+                                                    size: "sm",
+                                                    className: "text-foreground-neutral-subtle w-full",
+                                                    children: "This will run your jobs on Shipfox's optimized infrastructure. Giving you faster builds, and dedicated resources."
+                                                }),
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    className: "relative",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("img", {
+                                                            src: illustration2,
+                                                            alt: "illustration-2",
+                                                            className: "hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 translate-x-8 w-fit object-contain z-50"
+                                                        }),
+                                                        /*#__PURE__*/ _jsxs("div", {
+                                                            className: cn('relative overflow-hidden bg-transparent p-1 rounded-8'),
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx("div", {
+                                                                    className: "absolute inset-0",
+                                                                    style: {
+                                                                        borderRadius: 'calc(0.5rem * 0.96)'
+                                                                    },
+                                                                    children: /*#__PURE__*/ _jsx(MovingBorder, {
+                                                                        duration: 6000,
+                                                                        rx: "30%",
+                                                                        ry: "30%",
+                                                                        children: /*#__PURE__*/ _jsx("div", {
+                                                                            className: "h-100 w-200 bg-[radial-gradient(#ff9e7a_40%,transparent_60%)]"
+                                                                        })
                                                                     })
-                                                                })
-                                                            }),
-                                                            /*#__PURE__*/ _jsx("div", {
-                                                                className: "relative",
-                                                                style: {
-                                                                    borderRadius: 'calc(0.5rem * 0.96)'
-                                                                },
-                                                                children: /*#__PURE__*/ _jsx(DynamicItem, {
-                                                                    variant: "default",
-                                                                    title: /*#__PURE__*/ _jsxs("div", {
-                                                                        className: "flex items-center gap-6",
-                                                                        children: [
-                                                                            /*#__PURE__*/ _jsx("span", {
-                                                                                className: "flex shrink-0 items-center justify-center text-tag-success-icon w-16 h-16",
-                                                                                children: /*#__PURE__*/ _jsx(Icon, {
-                                                                                    name: "money",
-                                                                                    size: "sm",
-                                                                                    color: "var(--foreground-neutral-subtle, #a1a1aa)"
+                                                                }),
+                                                                /*#__PURE__*/ _jsx("div", {
+                                                                    className: "relative",
+                                                                    style: {
+                                                                        borderRadius: 'calc(0.5rem * 0.96)'
+                                                                    },
+                                                                    children: /*#__PURE__*/ _jsx(DynamicItem, {
+                                                                        variant: "default",
+                                                                        title: /*#__PURE__*/ _jsxs("div", {
+                                                                            className: "flex items-center gap-6",
+                                                                            children: [
+                                                                                /*#__PURE__*/ _jsx("span", {
+                                                                                    className: "flex shrink-0 items-center justify-center text-tag-success-icon w-16 h-16",
+                                                                                    children: /*#__PURE__*/ _jsx(Icon, {
+                                                                                        name: "money",
+                                                                                        size: "sm",
+                                                                                        color: "var(--foreground-neutral-subtle, #a1a1aa)"
+                                                                                    })
+                                                                                }),
+                                                                                /*#__PURE__*/ _jsx(ItemTitle, {
+                                                                                    children: "6000 free credits/month to run your jobs"
                                                                                 })
-                                                                            }),
-                                                                            /*#__PURE__*/ _jsx(ItemTitle, {
-                                                                                children: "6000 free credits/month to run your jobs"
-                                                                            })
-                                                                        ]
-                                                                    }),
-                                                                    description: "~500 builds/month. No payment required.",
-                                                                    rightElement: /*#__PURE__*/ _jsx("img", {
-                                                                        src: illustrationBg,
-                                                                        alt: "illustration-bg",
-                                                                        className: "hidden sm:block absolute overflow-clip right-4 w-fit object-contain scale-105"
+                                                                            ]
+                                                                        }),
+                                                                        description: "~500 builds/month. No payment required.",
+                                                                        rightElement: /*#__PURE__*/ _jsx("img", {
+                                                                            src: illustrationBg,
+                                                                            alt: "illustration-bg",
+                                                                            className: "hidden sm:block absolute overflow-clip right-4 w-fit object-contain scale-105"
+                                                                        })
                                                                     })
                                                                 })
-                                                            })
-                                                        ]
-                                                    })
-                                                ]
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ _jsxs("div", {
-                                        className: "flex flex-col gap-20 w-full",
-                                        children: [
-                                            /*#__PURE__*/ _jsxs("div", {
-                                                className: "flex flex-col gap-6",
-                                                children: [
-                                                    /*#__PURE__*/ _jsxs("div", {
-                                                        className: "flex items-center justify-center w-full",
-                                                        children: [
-                                                            /*#__PURE__*/ _jsx(Text, {
-                                                                className: "flex-1 font-semibold text-foreground-neutral-base overflow-ellipsis overflow-hidden whitespace-nowrap",
-                                                                children: "Update your GitHub Actions workflow"
-                                                            }),
-                                                            /*#__PURE__*/ _jsx(ButtonLink, {
-                                                                variant: "base",
-                                                                size: "sm",
-                                                                href: "#",
-                                                                iconRight: "bookOpen",
-                                                                children: "See docs"
-                                                            })
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ _jsx(Text, {
-                                                        size: "sm",
-                                                        className: "text-foreground-neutral-subtle w-full",
-                                                        children: "Replace the runs-on line in your workflow file to use Shipfox runners."
-                                                    })
-                                                ]
-                                            }),
-                                            /*#__PURE__*/ _jsxs(CodeBlock, {
-                                                data: [
-                                                    {
-                                                        language: 'yaml',
-                                                        filename: '.github/workflows/<workflow-name>.yml',
-                                                        code: diffCode
-                                                    }
-                                                ],
-                                                defaultValue: "yaml",
-                                                children: [
-                                                    /*#__PURE__*/ _jsxs(CodeBlockHeader, {
-                                                        children: [
-                                                            /*#__PURE__*/ _jsx(CodeBlockFiles, {
-                                                                children: (item)=>/*#__PURE__*/ _jsx(CodeBlockFilename, {
-                                                                        value: item.language,
-                                                                        children: item.filename
+                                                            ]
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex flex-col gap-20 w-full",
+                                            children: [
+                                                /*#__PURE__*/ _jsxs("div", {
+                                                    className: "flex flex-col gap-6",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsxs("div", {
+                                                            className: "flex items-center justify-center w-full",
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx(Text, {
+                                                                    className: "flex-1 font-semibold text-foreground-neutral-base overflow-ellipsis overflow-hidden whitespace-nowrap",
+                                                                    children: "Update your GitHub Actions workflow"
+                                                                }),
+                                                                /*#__PURE__*/ _jsx(ButtonLink, {
+                                                                    variant: "base",
+                                                                    size: "sm",
+                                                                    href: "#",
+                                                                    iconRight: "bookOpen",
+                                                                    children: "See docs"
+                                                                })
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(Text, {
+                                                            size: "sm",
+                                                            className: "text-foreground-neutral-subtle w-full",
+                                                            children: "Replace the runs-on line in your workflow file to use Shipfox runners."
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsxs(CodeBlock, {
+                                                    data: [
+                                                        {
+                                                            language: 'yaml',
+                                                            filename: '.github/workflows/<workflow-name>.yml',
+                                                            code: diffCode
+                                                        }
+                                                    ],
+                                                    defaultValue: "yaml",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsxs(CodeBlockHeader, {
+                                                            children: [
+                                                                /*#__PURE__*/ _jsx(CodeBlockFiles, {
+                                                                    children: (item)=>/*#__PURE__*/ _jsx(CodeBlockFilename, {
+                                                                            value: item.language,
+                                                                            children: item.filename
+                                                                        })
+                                                                }),
+                                                                /*#__PURE__*/ _jsx(CodeBlockCopyButton, {})
+                                                            ]
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(CodeBlockBody, {
+                                                            children: (item)=>/*#__PURE__*/ _jsx(CodeBlockItem, {
+                                                                    value: item.language,
+                                                                    children: /*#__PURE__*/ _jsx(CodeBlockContent, {
+                                                                        language: item.language,
+                                                                        children: item.code
                                                                     })
-                                                            }),
-                                                            /*#__PURE__*/ _jsx(CodeBlockCopyButton, {})
-                                                        ]
-                                                    }),
-                                                    /*#__PURE__*/ _jsx(CodeBlockBody, {
-                                                        children: (item)=>/*#__PURE__*/ _jsx(CodeBlockItem, {
-                                                                value: item.language,
-                                                                children: /*#__PURE__*/ _jsx(CodeBlockContent, {
-                                                                    language: item.language,
-                                                                    children: item.code
                                                                 })
-                                                            })
-                                                    }),
-                                                    /*#__PURE__*/ _jsx(CodeBlockFooter, {
-                                                        state: "running",
-                                                        message: "Waiting for Shipfox runner event…",
-                                                        description: "This usually takes 30-60 seconds after you commit the workflow file."
-                                                    })
-                                                ]
-                                            })
-                                        ]
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(CodeBlockFooter, {
+                                                            state: footerState,
+                                                            message: footerState === 'running' ? 'Waiting for Shipfox runner event…' : 'Runners connected!',
+                                                            description: footerState === 'running' ? 'This usually takes 30-60 seconds after you commit the workflow file.' : ''
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(ModalFooter, {
+                                    children: /*#__PURE__*/ _jsx(Button, {
+                                        variant: "primary",
+                                        onClick: ()=>setOpen(false),
+                                        children: "Got it"
                                     })
-                                ]
-                            }),
-                            /*#__PURE__*/ _jsx(ModalFooter, {
-                                children: /*#__PURE__*/ _jsx(Button, {
-                                    variant: "primary",
-                                    onClick: ()=>setOpen(false),
-                                    children: "Got it"
                                 })
-                            })
-                        ]
-                    })
-                ]
-            })
+                            ]
+                        })
+                    ]
+                })
+            ]
         });
     }
 };

package/dist/components/modal/modal.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/modal/modal.stories.tsx"],"sourcesContent":["import {argosScreenshot} from '@argos-ci/storybook/vitest';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {screen, within} from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport {Button, ButtonLink} from 'components/button';\nimport {\n  CodeBlock,\n  CodeBlockBody,\n  CodeBlockContent,\n  CodeBlockCopyButton,\n  CodeBlockFilename,\n  CodeBlockFiles,\n  CodeBlockFooter,\n  CodeBlockHeader,\n  CodeBlockItem,\n} from 'components/code-block';\nimport {DatePicker} from 'components/date-picker';\nimport {DynamicItem} from 'components/dynamic-item';\nimport {Icon} from 'components/icon';\nimport {Input} from 'components/input';\nimport {ItemTitle} from 'components/item';\nimport {Label} from 'components/label';\nimport {MovingBorder} from 'components/moving-border';\nimport {Text} from 'components/typography';\nimport {useState} from 'react';\nimport {cn} from 'utils/cn';\nimport illustration2 from '../../assets/illustration-2.svg';\nimport illustrationBg from '../../assets/illustration-gradient.svg';\nimport {\n  Modal,\n  ModalBody,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalTitle,\n  ModalTrigger,\n} from './modal';\n\nconst OPEN_MODAL_REGEX = /open modal/i;\nconst IMPORT_JOBS_REGEX = /import past jobs from github/i;\nconst GITHUB_ACTIONS_REGEX = /run github actions on shipfox/i;\n\nconst DEFAULT_START_DATE = new Date('2025-12-06T00:00:00.000Z');\n\nconst meta = {\n  title: 'Components/Modal',\n  component: Modal,\n  tags: ['autodocs'],\n  parameters: {\n    layout: 'centered',\n  },\n} satisfies Meta<typeof Modal>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  play: async (ctx) => {\n    const {canvasElement, step} = ctx;\n    const canvas = within(canvasElement);\n    const user = userEvent.setup();\n\n    await step('Open the modal', async () => {\n      const triggerButton = canvas.getByRole('button', {name: OPEN_MODAL_REGEX});\n      await user.click(triggerButton);\n    });\n\n    await step('Wait for dialog to appear and render', async () => {\n      await screen.findByRole('dialog');\n      await new Promise((resolve) => setTimeout(resolve, 100));\n    });\n\n    await argosScreenshot(ctx, 'Default Modal Open');\n  },\n  render: () => {\n    const [open, setOpen] = useState(false);\n\n    return (\n      <div className=\"flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip\">\n        <Modal open={open} onOpenChange={setOpen}>\n          <ModalTrigger asChild>\n            <Button>Open Modal</Button>\n          </ModalTrigger>\n          <ModalContent aria-describedby={undefined}>\n            <ModalTitle className=\"sr-only\">Modal Title</ModalTitle>\n            <ModalHeader>\n              <Text\n                size=\"lg\"\n                className=\"flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap\"\n              >\n                Modal Title\n              </Text>\n            </ModalHeader>\n            <ModalBody>\n              <Text size=\"sm\" className=\"text-foreground-neutral-subtle w-full\">\n                This modal automatically adapts between dialog (desktop) and drawer (mobile) based\n                on screen size. Try resizing your browser window!\n              </Text>\n            </ModalBody>\n            <ModalFooter>\n              <Button variant=\"transparent\" onClick={() => setOpen(false)}>\n                Cancel\n              </Button>\n              <Button variant=\"primary\" onClick={() => setOpen(false)}>\n                Confirm\n              </Button>\n            </ModalFooter>\n          </ModalContent>\n        </Modal>\n      </div>\n    );\n  },\n};\n\nexport const ImportForm: Story = {\n  play: async (ctx) => {\n    const {canvasElement, step} = ctx;\n    const canvas = within(canvasElement);\n    const user = userEvent.setup();\n\n    await step('Open the modal', async () => {\n      const triggerButton = canvas.getByRole('button', {name: IMPORT_JOBS_REGEX});\n      await user.click(triggerButton);\n    });\n\n    await step('Wait for dialog to appear and render', async () => {\n      await screen.findByRole('dialog');\n      await new Promise((resolve) => setTimeout(resolve, 100));\n    });\n\n    await argosScreenshot(ctx, 'Import Form Modal Open');\n  },\n  render: () => {\n    const [open, setOpen] = useState(false);\n    const [date, setDate] = useState<Date | undefined>(DEFAULT_START_DATE);\n\n    return (\n      <div className=\"flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip\">\n        <Modal open={open} onOpenChange={setOpen}>\n          <ModalTrigger asChild>\n            <Button>Import past jobs from GitHub</Button>\n          </ModalTrigger>\n          <ModalContent aria-describedby={undefined} overlayClassName=\"bg-background-modal-overlay\">\n            <ModalTitle className=\"sr-only\">Import past jobs from GitHub</ModalTitle>\n            <ModalHeader title=\"Import past jobs from GitHub\" />\n            <ModalBody className=\"gap-20\">\n              <Text size=\"sm\" className=\"text-foreground-neutral-subtle w-full\">\n                Backfill your CI history by importing past runs from your GitHub repo. We&apos;ll\n                handle the rest by creating a background task to import the data for you.\n              </Text>\n              <div className=\"flex flex-col gap-20 w-full\">\n                <div className=\"flex flex-col gap-8 w-full\">\n                  <Label>Repository owner</Label>\n                  <Input placeholder=\"apache\" />\n                </div>\n                <div className=\"flex flex-col gap-8 w-full\">\n                  <Label>Repository name</Label>\n                  <Input placeholder=\"kafka\" />\n                </div>\n                <div className=\"flex flex-col gap-8 w-full\">\n                  <Label htmlFor=\"start-date\">Start date</Label>\n                  <DatePicker\n                    id=\"start-date\"\n                    date={date}\n                    onDateSelect={setDate}\n                    onClear={() => setDate(undefined)}\n                    placeholder=\"DD/MM/YYYY\"\n                  />\n                </div>\n              </div>\n            </ModalBody>\n            <ModalFooter>\n              <Button variant=\"transparent\" onClick={() => setOpen(false)}>\n                Cancel\n              </Button>\n              <Button variant=\"primary\" onClick={() => setOpen(false)}>\n                Import\n              </Button>\n            </ModalFooter>\n          </ModalContent>\n        </Modal>\n      </div>\n    );\n  },\n};\n\nconst diffCode = `jobs:\n  build:\n-   runs-on: ubuntu-latest\n+   runs-on: shipfox-2vcpu-ubuntu-2404`;\n\nexport const GithubActions: Story = {\n  parameters: {\n    viewport: {\n      defaultViewport: 'large',\n    },\n  },\n  play: async (ctx) => {\n    const {canvasElement, step} = ctx;\n    const canvas = within(canvasElement);\n    const user = userEvent.setup();\n\n    await step('Open the modal', async () => {\n      const triggerButton = canvas.getByRole('button', {name: GITHUB_ACTIONS_REGEX});\n      await user.click(triggerButton);\n    });\n\n    await step('Wait for dialog to appear and render', async () => {\n      await screen.findByRole('dialog');\n      await new Promise((resolve) => setTimeout(resolve, 100));\n    });\n\n    await argosScreenshot(ctx, 'Github Actions Modal Open');\n  },\n  render: () => {\n    const [open, setOpen] = useState(false);\n\n    return (\n      <div className=\"flex h-[50vh] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip\">\n        <Modal open={open} onOpenChange={setOpen}>\n          <ModalTrigger asChild>\n            <Button>Run GitHub Actions on Shipfox</Button>\n          </ModalTrigger>\n          <ModalContent aria-describedby={undefined} overlayClassName=\"bg-background-modal-overlay\">\n            <ModalTitle className=\"sr-only\">Run GitHub Actions on Shipfox</ModalTitle>\n            <ModalHeader title=\"Run GitHub Actions on Shipfox\" />\n            <ModalBody className=\"gap-32\">\n              <div className=\"flex flex-col gap-20 w-full\">\n                <Text size=\"sm\" className=\"text-foreground-neutral-subtle w-full\">\n                  This will run your jobs on Shipfox&apos;s optimized infrastructure. Giving you\n                  faster builds, and dedicated resources.\n                </Text>\n                <div className=\"relative\">\n                  <img\n                    src={illustration2}\n                    alt=\"illustration-2\"\n                    className=\"hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 translate-x-8 w-fit object-contain z-50\"\n                  />\n                  <div className={cn('relative overflow-hidden bg-transparent p-1 rounded-8')}>\n                    <div className=\"absolute inset-0\" style={{borderRadius: 'calc(0.5rem * 0.96)'}}>\n                      <MovingBorder duration={6000} rx=\"30%\" ry=\"30%\">\n                        <div className=\"h-100 w-200 bg-[radial-gradient(#ff9e7a_40%,transparent_60%)]\" />\n                      </MovingBorder>\n                    </div>\n                    <div\n                      className=\"relative\"\n                      style={{\n                        borderRadius: 'calc(0.5rem * 0.96)',\n                      }}\n                    >\n                      <DynamicItem\n                        variant=\"default\"\n                        title={\n                          <div className=\"flex items-center gap-6\">\n                            <span className=\"flex shrink-0 items-center justify-center text-tag-success-icon w-16 h-16\">\n                              <Icon\n                                name=\"money\"\n                                size=\"sm\"\n                                color=\"var(--foreground-neutral-subtle, #a1a1aa)\"\n                              />\n                            </span>\n                            <ItemTitle>6000 free credits/month to run your jobs</ItemTitle>\n                          </div>\n                        }\n                        description=\"~500 builds/month. No payment required.\"\n                        rightElement={\n                          <img\n                            src={illustrationBg}\n                            alt=\"illustration-bg\"\n                            className=\"hidden sm:block absolute overflow-clip right-4 w-fit object-contain scale-105\"\n                          />\n                        }\n                      />\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div className=\"flex flex-col gap-20 w-full\">\n                <div className=\"flex flex-col gap-6\">\n                  <div className=\"flex items-center justify-center w-full\">\n                    <Text className=\"flex-1 font-semibold text-foreground-neutral-base overflow-ellipsis overflow-hidden whitespace-nowrap\">\n                      Update your GitHub Actions workflow\n                    </Text>\n                    <ButtonLink variant=\"base\" size=\"sm\" href=\"#\" iconRight=\"bookOpen\">\n                      See docs\n                    </ButtonLink>\n                  </div>\n                  <Text size=\"sm\" className=\"text-foreground-neutral-subtle w-full\">\n                    Replace the runs-on line in your workflow file to use Shipfox runners.\n                  </Text>\n                </div>\n\n                <CodeBlock\n                  data={[\n                    {\n                      language: 'yaml',\n                      filename: '.github/workflows/<workflow-name>.yml',\n                      code: diffCode,\n                    },\n                  ]}\n                  defaultValue=\"yaml\"\n                >\n                  <CodeBlockHeader>\n                    <CodeBlockFiles>\n                      {(item) => (\n                        <CodeBlockFilename value={item.language}>{item.filename}</CodeBlockFilename>\n                      )}\n                    </CodeBlockFiles>\n                    <CodeBlockCopyButton />\n                  </CodeBlockHeader>\n                  <CodeBlockBody>\n                    {(item) => (\n                      <CodeBlockItem value={item.language}>\n                        <CodeBlockContent language={item.language}>{item.code}</CodeBlockContent>\n                      </CodeBlockItem>\n                    )}\n                  </CodeBlockBody>\n                  <CodeBlockFooter\n                    state=\"running\"\n                    message=\"Waiting for Shipfox runner event…\"\n                    description=\"This usually takes 30-60 seconds after you commit the workflow file.\"\n                  />\n                </CodeBlock>\n              </div>\n            </ModalBody>\n            <ModalFooter>\n              <Button variant=\"primary\" onClick={() => setOpen(false)}>\n                Got it\n              </Button>\n            </ModalFooter>\n          </ModalContent>\n        </Modal>\n      </div>\n    );\n  },\n};\n\nexport const OpenedModal: Story = {\n  play: async (ctx) => {\n    const {canvasElement, step} = ctx;\n    const canvas = within(canvasElement);\n    const user = userEvent.setup();\n\n    await step('Open the modal', async () => {\n      const triggerButton = canvas.getByRole('button', {name: OPEN_MODAL_REGEX});\n      await user.click(triggerButton);\n    });\n\n    await step('Wait for dialog to appear and render', async () => {\n      await screen.findByRole('dialog');\n      await new Promise((resolve) => setTimeout(resolve, 100));\n    });\n\n    await argosScreenshot(ctx, 'Opened Modal State');\n  },\n  render: () => {\n    const [open, setOpen] = useState(false);\n\n    return (\n      <div className=\"flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip\">\n        <Modal open={open} onOpenChange={setOpen}>\n          <ModalTrigger asChild>\n            <Button>Open Modal</Button>\n          </ModalTrigger>\n          <ModalContent aria-describedby={undefined}>\n            <ModalTitle className=\"sr-only\">Modal Title</ModalTitle>\n            <ModalHeader>\n              <Text\n                size=\"lg\"\n                className=\"flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap\"\n              >\n                Modal Title\n              </Text>\n            </ModalHeader>\n            <ModalBody>\n              <Text size=\"sm\" className=\"text-foreground-neutral-subtle w-full\">\n                This modal automatically adapts between dialog (desktop) and drawer (mobile) based\n                on screen size. Try resizing your browser window!\n              </Text>\n            </ModalBody>\n            <ModalFooter>\n              <Button variant=\"transparent\" onClick={() => setOpen(false)}>\n                Cancel\n              </Button>\n              <Button variant=\"primary\" onClick={() => setOpen(false)}>\n                Confirm\n              </Button>\n            </ModalFooter>\n          </ModalContent>\n        </Modal>\n      </div>\n    );\n  },\n};\n"],"names":["argosScreenshot","screen","within","userEvent","Button","ButtonLink","CodeBlock","CodeBlockBody","CodeBlockContent","CodeBlockCopyButton","CodeBlockFilename","CodeBlockFiles","CodeBlockFooter","CodeBlockHeader","CodeBlockItem","DatePicker","DynamicItem","Icon","Input","ItemTitle","Label","MovingBorder","Text","useState","cn","illustration2","illustrationBg","Modal","ModalBody","ModalContent","ModalFooter","ModalHeader","ModalTitle","ModalTrigger","OPEN_MODAL_REGEX","IMPORT_JOBS_REGEX","GITHUB_ACTIONS_REGEX","DEFAULT_START_DATE","Date","meta","title","component","tags","parameters","layout","Default","play","ctx","canvasElement","step","canvas","user","setup","triggerButton","getByRole","name","click","findByRole","Promise","resolve","setTimeout","render","open","setOpen","div","className","onOpenChange","asChild","aria-describedby","undefined","size","variant","onClick","ImportForm","date","setDate","overlayClassName","placeholder","htmlFor","id","onDateSelect","onClear","diffCode","GithubActions","viewport","defaultViewport","img","src","alt","style","borderRadius","duration","rx","ry","span","color","description","rightElement","href","iconRight","data","language","filename","code","defaultValue","item","value","state","message","OpenedModal"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/modal/modal.stories.tsx"],"sourcesContent":["import {argosScreenshot} from '@argos-ci/storybook/vitest';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {screen, within} from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport {Button, ButtonLink} from 'components/button';\nimport {\n  CodeBlock,\n  CodeBlockBody,\n  CodeBlockContent,\n  CodeBlockCopyButton,\n  CodeBlockFilename,\n  CodeBlockFiles,\n  CodeBlockFooter,\n  CodeBlockHeader,\n  CodeBlockItem,\n} from 'components/code-block';\nimport {Confetti, type ConfettiRef} from 'components/confetti';\nimport {DatePicker} from 'components/date-picker';\nimport {DynamicItem} from 'components/dynamic-item';\nimport {Icon} from 'components/icon';\nimport {Input} from 'components/input';\nimport {ItemTitle} from 'components/item';\nimport {Label} from 'components/label';\nimport {MovingBorder} from 'components/moving-border';\nimport {Text} from 'components/typography';\nimport {useEffect, useRef, useState} from 'react';\nimport {cn} from 'utils/cn';\nimport illustration2 from '../../assets/illustration-2.svg';\nimport illustrationBg from '../../assets/illustration-gradient.svg';\nimport {\n  Modal,\n  ModalBody,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalTitle,\n  ModalTrigger,\n} from './modal';\n\nconst OPEN_MODAL_REGEX = /open modal/i;\nconst IMPORT_JOBS_REGEX = /import past jobs from github/i;\nconst GITHUB_ACTIONS_REGEX = /run github actions on shipfox/i;\n\nconst DEFAULT_START_DATE = new Date('2025-12-06T00:00:00.000Z');\n\nconst meta = {\n  title: 'Components/Modal',\n  component: Modal,\n  tags: ['autodocs'],\n  parameters: {\n    layout: 'centered',\n  },\n} satisfies Meta<typeof Modal>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  play: async (ctx) => {\n    const {canvasElement, step} = ctx;\n    const canvas = within(canvasElement);\n    const user = userEvent.setup();\n\n    await step('Open the modal', async () => {\n      const triggerButton = canvas.getByRole('button', {name: OPEN_MODAL_REGEX});\n      await user.click(triggerButton);\n    });\n\n    await step('Wait for dialog to appear and render', async () => {\n      await screen.findByRole('dialog');\n      await new Promise((resolve) => setTimeout(resolve, 100));\n    });\n\n    await argosScreenshot(ctx, 'Default Modal Open');\n  },\n  render: () => {\n    const [open, setOpen] = useState(false);\n\n    return (\n      <div className=\"flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip\">\n        <Modal open={open} onOpenChange={setOpen}>\n          <ModalTrigger asChild>\n            <Button>Open Modal</Button>\n          </ModalTrigger>\n          <ModalContent aria-describedby={undefined}>\n            <ModalTitle className=\"sr-only\">Modal Title</ModalTitle>\n            <ModalHeader>\n              <Text\n                size=\"lg\"\n                className=\"flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap\"\n              >\n                Modal Title\n              </Text>\n            </ModalHeader>\n            <ModalBody>\n              <Text size=\"sm\" className=\"text-foreground-neutral-subtle w-full\">\n                This modal automatically adapts between dialog (desktop) and drawer (mobile) based\n                on screen size. Try resizing your browser window!\n              </Text>\n            </ModalBody>\n            <ModalFooter>\n              <Button variant=\"transparent\" onClick={() => setOpen(false)}>\n                Cancel\n              </Button>\n              <Button variant=\"primary\" onClick={() => setOpen(false)}>\n                Confirm\n              </Button>\n            </ModalFooter>\n          </ModalContent>\n        </Modal>\n      </div>\n    );\n  },\n};\n\nexport const ImportForm: Story = {\n  play: async (ctx) => {\n    const {canvasElement, step} = ctx;\n    const canvas = within(canvasElement);\n    const user = userEvent.setup();\n\n    await step('Open the modal', async () => {\n      const triggerButton = canvas.getByRole('button', {name: IMPORT_JOBS_REGEX});\n      await user.click(triggerButton);\n    });\n\n    await step('Wait for dialog to appear and render', async () => {\n      await screen.findByRole('dialog');\n      await new Promise((resolve) => setTimeout(resolve, 100));\n    });\n\n    await argosScreenshot(ctx, 'Import Form Modal Open');\n  },\n  render: () => {\n    const [open, setOpen] = useState(false);\n    const [date, setDate] = useState<Date | undefined>(DEFAULT_START_DATE);\n\n    return (\n      <div className=\"flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip\">\n        <Modal open={open} onOpenChange={setOpen}>\n          <ModalTrigger asChild>\n            <Button>Import past jobs from GitHub</Button>\n          </ModalTrigger>\n          <ModalContent aria-describedby={undefined} overlayClassName=\"bg-background-modal-overlay\">\n            <ModalTitle className=\"sr-only\">Import past jobs from GitHub</ModalTitle>\n            <ModalHeader title=\"Import past jobs from GitHub\" />\n            <ModalBody className=\"gap-20\">\n              <Text size=\"sm\" className=\"text-foreground-neutral-subtle w-full\">\n                Backfill your CI history by importing past runs from your GitHub repo. We&apos;ll\n                handle the rest by creating a background task to import the data for you.\n              </Text>\n              <div className=\"flex flex-col gap-20 w-full\">\n                <div className=\"flex flex-col gap-8 w-full\">\n                  <Label>Repository owner</Label>\n                  <Input placeholder=\"apache\" />\n                </div>\n                <div className=\"flex flex-col gap-8 w-full\">\n                  <Label>Repository name</Label>\n                  <Input placeholder=\"kafka\" />\n                </div>\n                <div className=\"flex flex-col gap-8 w-full\">\n                  <Label htmlFor=\"start-date\">Start date</Label>\n                  <DatePicker\n                    id=\"start-date\"\n                    date={date}\n                    onDateSelect={setDate}\n                    onClear={() => setDate(undefined)}\n                    placeholder=\"DD/MM/YYYY\"\n                  />\n                </div>\n              </div>\n            </ModalBody>\n            <ModalFooter>\n              <Button variant=\"transparent\" onClick={() => setOpen(false)}>\n                Cancel\n              </Button>\n              <Button variant=\"primary\" onClick={() => setOpen(false)}>\n                Import\n              </Button>\n            </ModalFooter>\n          </ModalContent>\n        </Modal>\n      </div>\n    );\n  },\n};\n\nconst diffCode = `jobs:\n  build:\n-   runs-on: ubuntu-latest\n+   runs-on: shipfox-2vcpu-ubuntu-2404`;\n\nexport const GithubActions: Story = {\n  parameters: {\n    viewport: {\n      defaultViewport: 'large',\n    },\n  },\n  play: async (ctx) => {\n    const {canvasElement, step} = ctx;\n    const canvas = within(canvasElement);\n    const user = userEvent.setup();\n\n    await step('Open the modal', async () => {\n      const triggerButton = canvas.getByRole('button', {name: GITHUB_ACTIONS_REGEX});\n      await user.click(triggerButton);\n    });\n\n    await step('Wait for dialog to appear and render', async () => {\n      await screen.findByRole('dialog');\n      await new Promise((resolve) => setTimeout(resolve, 100));\n    });\n\n    await argosScreenshot(ctx, 'Github Actions Modal Open');\n  },\n  render: () => {\n    const [open, setOpen] = useState(false);\n    const [footerState, setFooterState] = useState<'running' | 'done'>('running');\n    const confettiRef = useRef<ConfettiRef>(null);\n\n    useEffect(() => {\n      if (open && footerState === 'running') {\n        const timer = setTimeout(() => {\n          setFooterState('done');\n        }, 3000);\n\n        return () => {\n          clearTimeout(timer);\n        };\n      }\n    }, [open, footerState]);\n\n    useEffect(() => {\n      if (footerState === 'done' && open) {\n        const timer = setTimeout(() => {\n          if (confettiRef.current) {\n            void confettiRef.current.fire();\n          }\n        }, 200);\n\n        return () => {\n          clearTimeout(timer);\n        };\n      }\n    }, [footerState, open]);\n\n    useEffect(() => {\n      if (!open) {\n        setFooterState('running');\n      }\n    }, [open]);\n\n    return (\n      <div className=\"flex h-[50vh] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip\">\n        <Confetti\n          ref={confettiRef}\n          manualstart\n          options={{\n            particleCount: 200,\n            spread: 100,\n            colors: ['#ff6b6b', '#4ecdc4', '#ffe66d', '#95e1d3'],\n          }}\n          className=\"fixed inset-0 pointer-events-none z-100\"\n          style={{width: '100%', height: '100%'}}\n        />\n        <Modal open={open} onOpenChange={setOpen}>\n          <ModalTrigger asChild>\n            <Button>Run GitHub Actions on Shipfox</Button>\n          </ModalTrigger>\n          <ModalContent aria-describedby={undefined} overlayClassName=\"bg-background-modal-overlay\">\n            <ModalTitle className=\"sr-only\">Run GitHub Actions on Shipfox</ModalTitle>\n            <ModalHeader title=\"Run GitHub Actions on Shipfox\" />\n            <ModalBody className=\"gap-32\">\n              <div className=\"flex flex-col gap-20 w-full\">\n                <Text size=\"sm\" className=\"text-foreground-neutral-subtle w-full\">\n                  This will run your jobs on Shipfox&apos;s optimized infrastructure. Giving you\n                  faster builds, and dedicated resources.\n                </Text>\n                <div className=\"relative\">\n                  <img\n                    src={illustration2}\n                    alt=\"illustration-2\"\n                    className=\"hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 translate-x-8 w-fit object-contain z-50\"\n                  />\n                  <div className={cn('relative overflow-hidden bg-transparent p-1 rounded-8')}>\n                    <div className=\"absolute inset-0\" style={{borderRadius: 'calc(0.5rem * 0.96)'}}>\n                      <MovingBorder duration={6000} rx=\"30%\" ry=\"30%\">\n                        <div className=\"h-100 w-200 bg-[radial-gradient(#ff9e7a_40%,transparent_60%)]\" />\n                      </MovingBorder>\n                    </div>\n                    <div\n                      className=\"relative\"\n                      style={{\n                        borderRadius: 'calc(0.5rem * 0.96)',\n                      }}\n                    >\n                      <DynamicItem\n                        variant=\"default\"\n                        title={\n                          <div className=\"flex items-center gap-6\">\n                            <span className=\"flex shrink-0 items-center justify-center text-tag-success-icon w-16 h-16\">\n                              <Icon\n                                name=\"money\"\n                                size=\"sm\"\n                                color=\"var(--foreground-neutral-subtle, #a1a1aa)\"\n                              />\n                            </span>\n                            <ItemTitle>6000 free credits/month to run your jobs</ItemTitle>\n                          </div>\n                        }\n                        description=\"~500 builds/month. No payment required.\"\n                        rightElement={\n                          <img\n                            src={illustrationBg}\n                            alt=\"illustration-bg\"\n                            className=\"hidden sm:block absolute overflow-clip right-4 w-fit object-contain scale-105\"\n                          />\n                        }\n                      />\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div className=\"flex flex-col gap-20 w-full\">\n                <div className=\"flex flex-col gap-6\">\n                  <div className=\"flex items-center justify-center w-full\">\n                    <Text className=\"flex-1 font-semibold text-foreground-neutral-base overflow-ellipsis overflow-hidden whitespace-nowrap\">\n                      Update your GitHub Actions workflow\n                    </Text>\n                    <ButtonLink variant=\"base\" size=\"sm\" href=\"#\" iconRight=\"bookOpen\">\n                      See docs\n                    </ButtonLink>\n                  </div>\n                  <Text size=\"sm\" className=\"text-foreground-neutral-subtle w-full\">\n                    Replace the runs-on line in your workflow file to use Shipfox runners.\n                  </Text>\n                </div>\n\n                <CodeBlock\n                  data={[\n                    {\n                      language: 'yaml',\n                      filename: '.github/workflows/<workflow-name>.yml',\n                      code: diffCode,\n                    },\n                  ]}\n                  defaultValue=\"yaml\"\n                >\n                  <CodeBlockHeader>\n                    <CodeBlockFiles>\n                      {(item) => (\n                        <CodeBlockFilename value={item.language}>{item.filename}</CodeBlockFilename>\n                      )}\n                    </CodeBlockFiles>\n                    <CodeBlockCopyButton />\n                  </CodeBlockHeader>\n                  <CodeBlockBody>\n                    {(item) => (\n                      <CodeBlockItem value={item.language}>\n                        <CodeBlockContent language={item.language}>{item.code}</CodeBlockContent>\n                      </CodeBlockItem>\n                    )}\n                  </CodeBlockBody>\n                  <CodeBlockFooter\n                    state={footerState}\n                    message={\n                      footerState === 'running'\n                        ? 'Waiting for Shipfox runner event…'\n                        : 'Runners connected!'\n                    }\n                    description={\n                      footerState === 'running'\n                        ? 'This usually takes 30-60 seconds after you commit the workflow file.'\n                        : ''\n                    }\n                  />\n                </CodeBlock>\n              </div>\n            </ModalBody>\n            <ModalFooter>\n              <Button variant=\"primary\" onClick={() => setOpen(false)}>\n                Got it\n              </Button>\n            </ModalFooter>\n          </ModalContent>\n        </Modal>\n      </div>\n    );\n  },\n};\n\nexport const OpenedModal: Story = {\n  play: async (ctx) => {\n    const {canvasElement, step} = ctx;\n    const canvas = within(canvasElement);\n    const user = userEvent.setup();\n\n    await step('Open the modal', async () => {\n      const triggerButton = canvas.getByRole('button', {name: OPEN_MODAL_REGEX});\n      await user.click(triggerButton);\n    });\n\n    await step('Wait for dialog to appear and render', async () => {\n      await screen.findByRole('dialog');\n      await new Promise((resolve) => setTimeout(resolve, 100));\n    });\n\n    await argosScreenshot(ctx, 'Opened Modal State');\n  },\n  render: () => {\n    const [open, setOpen] = useState(false);\n\n    return (\n      <div className=\"flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip\">\n        <Modal open={open} onOpenChange={setOpen}>\n          <ModalTrigger asChild>\n            <Button>Open Modal</Button>\n          </ModalTrigger>\n          <ModalContent aria-describedby={undefined}>\n            <ModalTitle className=\"sr-only\">Modal Title</ModalTitle>\n            <ModalHeader>\n              <Text\n                size=\"lg\"\n                className=\"flex-1 overflow-ellipsis overflow-hidden whitespace-nowrap\"\n              >\n                Modal Title\n              </Text>\n            </ModalHeader>\n            <ModalBody>\n              <Text size=\"sm\" className=\"text-foreground-neutral-subtle w-full\">\n                This modal automatically adapts between dialog (desktop) and drawer (mobile) based\n                on screen size. Try resizing your browser window!\n              </Text>\n            </ModalBody>\n            <ModalFooter>\n              <Button variant=\"transparent\" onClick={() => setOpen(false)}>\n                Cancel\n              </Button>\n              <Button variant=\"primary\" onClick={() => setOpen(false)}>\n                Confirm\n              </Button>\n            </ModalFooter>\n          </ModalContent>\n        </Modal>\n      </div>\n    );\n  },\n};\n"],"names":["argosScreenshot","screen","within","userEvent","Button","ButtonLink","CodeBlock","CodeBlockBody","CodeBlockContent","CodeBlockCopyButton","CodeBlockFilename","CodeBlockFiles","CodeBlockFooter","CodeBlockHeader","CodeBlockItem","Confetti","DatePicker","DynamicItem","Icon","Input","ItemTitle","Label","MovingBorder","Text","useEffect","useRef","useState","cn","illustration2","illustrationBg","Modal","ModalBody","ModalContent","ModalFooter","ModalHeader","ModalTitle","ModalTrigger","OPEN_MODAL_REGEX","IMPORT_JOBS_REGEX","GITHUB_ACTIONS_REGEX","DEFAULT_START_DATE","Date","meta","title","component","tags","parameters","layout","Default","play","ctx","canvasElement","step","canvas","user","setup","triggerButton","getByRole","name","click","findByRole","Promise","resolve","setTimeout","render","open","setOpen","div","className","onOpenChange","asChild","aria-describedby","undefined","size","variant","onClick","ImportForm","date","setDate","overlayClassName","placeholder","htmlFor","id","onDateSelect","onClear","diffCode","GithubActions","viewport","defaultViewport","footerState","setFooterState","confettiRef","timer","clearTimeout","current","fire","ref","manualstart","options","particleCount","spread","colors","style","width","height","img","src","alt","borderRadius","duration","rx","ry","span","color","description","rightElement","href","iconRight","data","language","filename","code","defaultValue","item","value","state","message","OpenedModal"],"mappings":"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"}

package/dist/components/shiny-text/index.d.ts

@@ -0,0 +1,2 @@
+export * from './shiny-text';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/shiny-text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/shiny-text/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/shiny-text/index.js

@@ -0,0 +1,3 @@
+export * from './shiny-text.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/shiny-text/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shiny-text/index.ts"],"sourcesContent":["export * from './shiny-text';\n"],"names":[],"mappings":"AAAA,cAAc,eAAe"}

package/dist/components/shiny-text/shiny-text.d.ts

@@ -0,0 +1,10 @@
+type ShinyTextProps = {
+    text: string;
+    disabled?: boolean;
+    speed?: number;
+    className?: string;
+};
+declare function ShinyText({ text, disabled, speed, className }: ShinyTextProps): import("react/jsx-runtime").JSX.Element;
+export { ShinyText };
+export type { ShinyTextProps };
+//# sourceMappingURL=shiny-text.d.ts.map

package/dist/components/shiny-text/shiny-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shiny-text.d.ts","sourceRoot":"","sources":["../../../src/components/shiny-text/shiny-text.tsx"],"names":[],"mappings":"AAEA,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,iBAAS,SAAS,CAAC,EAAC,IAAI,EAAE,QAAgB,EAAE,KAAS,EAAE,SAAc,EAAC,EAAE,cAAc,2CAQrF;AAED,OAAO,EAAC,SAAS,EAAC,CAAC;AACnB,YAAY,EAAC,cAAc,EAAC,CAAC"}