@shipfox/react-ui 0.10.0 → 0.12.0

package/dist/components/dynamic-item/dynamic-item.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/dynamic-item/dynamic-item.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Button} from 'components/button/button';\nimport {ItemTitle} from 'components/item';\nimport {MovingBorder} from 'components/moving-border';\nimport {cn} from 'utils/cn';\nimport illustration1 from '../../assets/illustration-1.svg';\nimport illustration2 from '../../assets/illustration-2.svg';\nimport illustrationBg from '../../assets/illustration-gradient.svg';\nimport {Avatar} from '../avatar/avatar';\nimport {AvatarGroup, AvatarGroupTooltip} from '../avatar/avatar-group';\nimport {Icon} from '../icon/icon';\nimport {DynamicItem} from './dynamic-item';\n\nconst meta = {\n  title: 'Components/DynamicItem',\n  component: DynamicItem,\n  tags: ['autodocs'],\n} satisfies Meta<typeof DynamicItem>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const OrganizationItem: Story = {\n  args: {},\n  render: () => (\n    <div className=\"flex flex-col gap-16 w-full max-w-476\">\n      <DynamicItem\n        variant=\"default\"\n        leftElement={<Avatar content=\"logo\" logoName=\"slack\" radius=\"rounded\" size=\"xl\" />}\n        title=\"Slack\"\n        description=\"3 members\"\n        rightElement={\n          <AvatarGroup size=\"md\">\n            <Avatar content=\"image\" fallback=\"John Doe\">\n              <AvatarGroupTooltip>John Doe</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Jane Smith\">\n              <AvatarGroupTooltip>Jane Smith</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Bob Johnson\">\n              <AvatarGroupTooltip>Bob Johnson</AvatarGroupTooltip>\n            </Avatar>\n          </AvatarGroup>\n        }\n      />\n      <DynamicItem\n        variant=\"default\"\n        leftElement={<Avatar content=\"logo\" logoName=\"stripe\" radius=\"rounded\" size=\"xl\" />}\n        title=\"Stripe\"\n        description=\"2 members\"\n        rightElement={\n          <AvatarGroup size=\"md\">\n            <Avatar content=\"image\" fallback=\"Alice Brown\">\n              <AvatarGroupTooltip>Alice Brown</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Carlos Vega\">\n              <AvatarGroupTooltip>Carlos Vega</AvatarGroupTooltip>\n            </Avatar>\n          </AvatarGroup>\n        }\n      />\n      <DynamicItem\n        variant=\"default\"\n        leftElement={<Avatar content=\"logo\" logoName=\"shipfox\" radius=\"rounded\" size=\"xl\" />}\n        title=\"Shipfox\"\n        description=\"9 members\"\n        rightElement={\n          <AvatarGroup size=\"md\" maxVisible={4} animateOnHover>\n            <Avatar content=\"image\" fallback=\"Linda Tran\">\n              <AvatarGroupTooltip>Linda Tran</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Michael Chen\">\n              <AvatarGroupTooltip>Michael Chen</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Sarah Williams\">\n              <AvatarGroupTooltip>Sarah Williams</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"David Lee\">\n              <AvatarGroupTooltip>David Lee</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Emily Davis\">\n              <AvatarGroupTooltip>Emily Davis</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"James Wilson\">\n              <AvatarGroupTooltip>James Wilson</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Olivia Martinez\">\n              <AvatarGroupTooltip>Olivia Martinez</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Noah Anderson\">\n              <AvatarGroupTooltip>Noah Anderson</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Sophia Taylor\">\n              <AvatarGroupTooltip>Sophia Taylor</AvatarGroupTooltip>\n            </Avatar>\n          </AvatarGroup>\n        }\n      />\n    </div>\n  ),\n};\n\nexport const ConnectGithubAccountItem: Story = {\n  args: {},\n  render: () => (\n    <div className=\"flex flex-col gap-16 w-full max-w-476\">\n      <DynamicItem\n        variant=\"default\"\n        leftElement={\n          <div className=\"relative\">\n            <Avatar content=\"logoPlaceholder\" logoName=\"slack\" radius=\"full\" size=\"lg\" />\n            <Avatar\n              content=\"logoPlaceholder\"\n              logoName=\"github\"\n              radius=\"full\"\n              size=\"2xs\"\n              logoClassName=\"p-0\"\n              className=\"absolute bottom-0 left-27\"\n            />\n          </div>\n        }\n        title=\"Slack\"\n        description=\"Connect Github organization\"\n        rightElement={\n          <Button variant=\"primary\" size=\"sm\">\n            Connect\n          </Button>\n        }\n      />\n\n      <DynamicItem\n        variant=\"default\"\n        leftElement={\n          <div className=\"relative\">\n            <Avatar content=\"logoPlaceholder\" logoName=\"slack\" radius=\"full\" size=\"lg\" />\n            <Avatar\n              content=\"logo\"\n              logoName=\"github\"\n              radius=\"full\"\n              size=\"2xs\"\n              logoClassName=\"p-0\"\n              className=\"absolute bottom-0 left-27\"\n            />\n          </div>\n        }\n        title=\"Slack\"\n        description=\"Personal account (kye-nguyen)\"\n        rightElement={\n          <Button variant=\"primary\" size=\"sm\">\n            Change account\n          </Button>\n        }\n      />\n\n      <DynamicItem\n        variant=\"default\"\n        leftElement={\n          <div className=\"relative\">\n            <Avatar content=\"logoPlaceholder\" logoName=\"slack\" radius=\"full\" size=\"lg\" />\n            <Avatar\n              content=\"logo\"\n              logoName=\"github\"\n              radius=\"full\"\n              size=\"2xs\"\n              logoClassName=\"p-0\"\n              className=\"absolute bottom-0 left-27\"\n            />\n          </div>\n        }\n        title=\"Slack\"\n        description=\"Organization (slack-github)\"\n        rightElement={\n          <Button variant=\"secondary\" size=\"sm\">\n            Change account\n          </Button>\n        }\n      />\n    </div>\n  ),\n};\n\nexport const WithCustomElementsItem: Story = {\n  args: {},\n  render: () => {\n    return (\n      <div className=\"flex flex-col gap-16 w-full max-w-672\">\n        <DynamicItem\n          variant=\"default\"\n          leftElement={\n            <div className=\"flex shrink-0 items-center justify-center text-tag-success-icon\">\n              <Icon name=\"checkCircleSolid\" size=\"sm\" />\n            </div>\n          }\n          title=\"Give access to your Github organizations\"\n          description=\"We'll use this permission to sync your organization's.\"\n          action={\n            <div className=\"flex gap-8 mx-auto sm:mx-0\">\n              <Button variant=\"primary\" size=\"sm\">\n                Github access\n              </Button>\n              <Button variant=\"transparentMuted\" size=\"sm\">\n                Skip for now\n              </Button>\n            </div>\n          }\n          rightElement={\n            <img\n              src={illustration1}\n              alt=\"illustration-1\"\n              className=\"hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 -translate-x-46 w-fit object-contain\"\n            />\n          }\n        />\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    );\n  },\n};\n"],"names":["Button","ItemTitle","MovingBorder","cn","illustration1","illustration2","illustrationBg","Avatar","AvatarGroup","AvatarGroupTooltip","Icon","DynamicItem","meta","title","component","tags","OrganizationItem","args","render","div","className","variant","leftElement","content","logoName","radius","size","description","rightElement","fallback","maxVisible","animateOnHover","ConnectGithubAccountItem","logoClassName","WithCustomElementsItem","name","action","img","src","alt","style","borderRadius","duration","rx","ry","span","color"],"mappings":";AACA,SAAQA,MAAM,QAAO,2BAA2B;AAChD,SAAQC,SAAS,QAAO,kBAAkB;AAC1C,SAAQC,YAAY,QAAO,2BAA2B;AACtD,SAAQC,EAAE,QAAO,WAAW;AAC5B,OAAOC,mBAAmB,kCAAkC;AAC5D,OAAOC,mBAAmB,kCAAkC;AAC5D,OAAOC,oBAAoB,yCAAyC;AACpE,SAAQC,MAAM,QAAO,mBAAmB;AACxC,SAAQC,WAAW,EAAEC,kBAAkB,QAAO,yBAAyB;AACvE,SAAQC,IAAI,QAAO,eAAe;AAClC,SAAQC,WAAW,QAAO,iBAAiB;AAE3C,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWH;IACXI,MAAM;QAAC;KAAW;AACpB;AAEA,eAAeH,KAAK;AAGpB,OAAO,MAAMI,mBAA0B;IACrCC,MAAM,CAAC;IACPC,QAAQ,kBACN,MAACC;YAAIC,WAAU;;8BACb,KAACT;oBACCU,SAAQ;oBACRC,2BAAa,KAACf;wBAAOgB,SAAQ;wBAAOC,UAAS;wBAAQC,QAAO;wBAAUC,MAAK;;oBAC3Eb,OAAM;oBACNc,aAAY;oBACZC,4BACE,MAACpB;wBAAYkB,MAAK;;0CAChB,KAACnB;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;;;;8BAK5B,KAACE;oBACCU,SAAQ;oBACRC,2BAAa,KAACf;wBAAOgB,SAAQ;wBAAOC,UAAS;wBAASC,QAAO;wBAAUC,MAAK;;oBAC5Eb,OAAM;oBACNc,aAAY;oBACZC,4BACE,MAACpB;wBAAYkB,MAAK;;0CAChB,KAACnB;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;;;;8BAK5B,KAACE;oBACCU,SAAQ;oBACRC,2BAAa,KAACf;wBAAOgB,SAAQ;wBAAOC,UAAS;wBAAUC,QAAO;wBAAUC,MAAK;;oBAC7Eb,OAAM;oBACNc,aAAY;oBACZC,4BACE,MAACpB;wBAAYkB,MAAK;wBAAKI,YAAY;wBAAGC,cAAc;;0CAClD,KAACxB;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;0CAEtB,KAACF;gCAAOgB,SAAQ;gCAAQM,UAAS;0CAC/B,cAAA,KAACpB;8CAAmB;;;;;;;;AAOlC,EAAE;AAEF,OAAO,MAAMuB,2BAAkC;IAC7Cf,MAAM,CAAC;IACPC,QAAQ,kBACN,MAACC;YAAIC,WAAU;;8BACb,KAACT;oBACCU,SAAQ;oBACRC,2BACE,MAACH;wBAAIC,WAAU;;0CACb,KAACb;gCAAOgB,SAAQ;gCAAkBC,UAAS;gCAAQC,QAAO;gCAAOC,MAAK;;0CACtE,KAACnB;gCACCgB,SAAQ;gCACRC,UAAS;gCACTC,QAAO;gCACPC,MAAK;gCACLO,eAAc;gCACdb,WAAU;;;;oBAIhBP,OAAM;oBACNc,aAAY;oBACZC,4BACE,KAAC5B;wBAAOqB,SAAQ;wBAAUK,MAAK;kCAAK;;;8BAMxC,KAACf;oBACCU,SAAQ;oBACRC,2BACE,MAACH;wBAAIC,WAAU;;0CACb,KAACb;gCAAOgB,SAAQ;gCAAkBC,UAAS;gCAAQC,QAAO;gCAAOC,MAAK;;0CACtE,KAACnB;gCACCgB,SAAQ;gCACRC,UAAS;gCACTC,QAAO;gCACPC,MAAK;gCACLO,eAAc;gCACdb,WAAU;;;;oBAIhBP,OAAM;oBACNc,aAAY;oBACZC,4BACE,KAAC5B;wBAAOqB,SAAQ;wBAAUK,MAAK;kCAAK;;;8BAMxC,KAACf;oBACCU,SAAQ;oBACRC,2BACE,MAACH;wBAAIC,WAAU;;0CACb,KAACb;gCAAOgB,SAAQ;gCAAkBC,UAAS;gCAAQC,QAAO;gCAAOC,MAAK;;0CACtE,KAACnB;gCACCgB,SAAQ;gCACRC,UAAS;gCACTC,QAAO;gCACPC,MAAK;gCACLO,eAAc;gCACdb,WAAU;;;;oBAIhBP,OAAM;oBACNc,aAAY;oBACZC,4BACE,KAAC5B;wBAAOqB,SAAQ;wBAAYK,MAAK;kCAAK;;;;;AAOhD,EAAE;AAEF,OAAO,MAAMQ,yBAAgC;IAC3CjB,MAAM,CAAC;IACPC,QAAQ;QACN,qBACE,MAACC;YAAIC,WAAU;;8BACb,KAACT;oBACCU,SAAQ;oBACRC,2BACE,KAACH;wBAAIC,WAAU;kCACb,cAAA,KAACV;4BAAKyB,MAAK;4BAAmBT,MAAK;;;oBAGvCb,OAAM;oBACNc,aAAY;oBACZS,sBACE,MAACjB;wBAAIC,WAAU;;0CACb,KAACpB;gCAAOqB,SAAQ;gCAAUK,MAAK;0CAAK;;0CAGpC,KAAC1B;gCAAOqB,SAAQ;gCAAmBK,MAAK;0CAAK;;;;oBAKjDE,4BACE,KAACS;wBACCC,KAAKlC;wBACLmC,KAAI;wBACJnB,WAAU;;;8BAIhB,MAACD;oBAAIC,WAAU;;sCACb,KAACiB;4BACCC,KAAKjC;4BACLkC,KAAI;4BACJnB,WAAU;;sCAEZ,MAACD;4BAAIC,WAAWjB,GAAG;;8CACjB,KAACgB;oCAAIC,WAAU;oCAAmBoB,OAAO;wCAACC,cAAc;oCAAqB;8CAC3E,cAAA,KAACvC;wCAAawC,UAAU;wCAAMC,IAAG;wCAAMC,IAAG;kDACxC,cAAA,KAACzB;4CAAIC,WAAU;;;;8CAGnB,KAACD;oCACCC,WAAU;oCACVoB,OAAO;wCACLC,cAAc;oCAChB;8CAEA,cAAA,KAAC9B;wCACCU,SAAQ;wCACRR,qBACE,MAACM;4CAAIC,WAAU;;8DACb,KAACyB;oDAAKzB,WAAU;8DACd,cAAA,KAACV;wDACCyB,MAAK;wDACLT,MAAK;wDACLoB,OAAM;;;8DAGV,KAAC7C;8DAAU;;;;wCAGf0B,aAAY;wCACZC,4BACE,KAACS;4CACCC,KAAKhC;4CACLiC,KAAI;4CACJnB,WAAU;;;;;;;;;;IAS5B;AACF,EAAE"}
+{"version":3,"sources":["../../../src/components/dynamic-item/dynamic-item.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Button} from 'components/button/button';\nimport {ItemTitle} from 'components/item';\nimport {MovingBorder} from 'components/moving-border';\nimport {cn} from 'utils/cn';\nimport illustration1 from '../../assets/illustration-1.svg';\nimport illustration2 from '../../assets/illustration-2.svg';\nimport illustrationBg from '../../assets/illustration-gradient.svg';\nimport {Avatar} from '../avatar/avatar';\nimport {AvatarGroup, AvatarGroupTooltip} from '../avatar/avatar-group';\nimport {Icon} from '../icon/icon';\nimport {DynamicItem} from './dynamic-item';\n\nconst meta = {\n  title: 'Components/DynamicItem',\n  component: DynamicItem,\n  tags: ['autodocs'],\n} satisfies Meta<typeof DynamicItem>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const OrganizationItem: Story = {\n  args: {},\n  render: () => (\n    <div className=\"flex flex-col gap-16 w-full max-w-476\">\n      <DynamicItem\n        variant=\"default\"\n        leftElement={<Avatar content=\"logo\" logoName=\"slack\" radius=\"rounded\" size=\"xl\" />}\n        title=\"Slack\"\n        description=\"3 members\"\n        rightElement={\n          <AvatarGroup size=\"md\">\n            <Avatar content=\"image\" fallback=\"John Doe\">\n              <AvatarGroupTooltip>John Doe</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Jane Smith\">\n              <AvatarGroupTooltip>Jane Smith</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Bob Johnson\">\n              <AvatarGroupTooltip>Bob Johnson</AvatarGroupTooltip>\n            </Avatar>\n          </AvatarGroup>\n        }\n      />\n      <DynamicItem\n        variant=\"default\"\n        leftElement={<Avatar content=\"logo\" logoName=\"stripe\" radius=\"rounded\" size=\"xl\" />}\n        title=\"Stripe\"\n        description=\"2 members\"\n        rightElement={\n          <AvatarGroup size=\"md\">\n            <Avatar content=\"image\" fallback=\"Alice Brown\">\n              <AvatarGroupTooltip>Alice Brown</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Carlos Vega\">\n              <AvatarGroupTooltip>Carlos Vega</AvatarGroupTooltip>\n            </Avatar>\n          </AvatarGroup>\n        }\n      />\n      <DynamicItem\n        variant=\"default\"\n        leftElement={<Avatar content=\"logo\" logoName=\"shipfox\" radius=\"rounded\" size=\"xl\" />}\n        title=\"Shipfox\"\n        description=\"9 members\"\n        rightElement={\n          <AvatarGroup size=\"md\" maxVisible={4} animateOnHover>\n            <Avatar content=\"image\" fallback=\"Linda Tran\">\n              <AvatarGroupTooltip>Linda Tran</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Michael Chen\">\n              <AvatarGroupTooltip>Michael Chen</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Sarah Williams\">\n              <AvatarGroupTooltip>Sarah Williams</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"David Lee\">\n              <AvatarGroupTooltip>David Lee</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Emily Davis\">\n              <AvatarGroupTooltip>Emily Davis</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"James Wilson\">\n              <AvatarGroupTooltip>James Wilson</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Olivia Martinez\">\n              <AvatarGroupTooltip>Olivia Martinez</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Noah Anderson\">\n              <AvatarGroupTooltip>Noah Anderson</AvatarGroupTooltip>\n            </Avatar>\n            <Avatar content=\"image\" fallback=\"Sophia Taylor\">\n              <AvatarGroupTooltip>Sophia Taylor</AvatarGroupTooltip>\n            </Avatar>\n          </AvatarGroup>\n        }\n      />\n    </div>\n  ),\n};\n\nexport const ConnectGithubAccountItem: Story = {\n  args: {},\n  render: () => (\n    <div className=\"flex flex-col gap-16 w-full max-w-476\">\n      <DynamicItem\n        variant=\"default\"\n        leftElement={\n          <div className=\"relative\">\n            <Avatar content=\"logoPlaceholder\" logoName=\"slack\" radius=\"full\" size=\"lg\" />\n            <Avatar\n              content=\"logoPlaceholder\"\n              logoName=\"github\"\n              radius=\"full\"\n              size=\"2xs\"\n              logoClassName=\"p-0\"\n              className=\"absolute bottom-0 left-27\"\n            />\n          </div>\n        }\n        title=\"Slack\"\n        description=\"Connect Github organization\"\n        rightElement={\n          <Button variant=\"primary\" size=\"sm\">\n            Connect\n          </Button>\n        }\n      />\n\n      <DynamicItem\n        variant=\"default\"\n        leftElement={\n          <div className=\"relative\">\n            <Avatar content=\"logoPlaceholder\" logoName=\"slack\" radius=\"full\" size=\"lg\" />\n            <Avatar\n              content=\"logo\"\n              logoName=\"github\"\n              radius=\"full\"\n              size=\"2xs\"\n              logoClassName=\"p-0\"\n              className=\"absolute bottom-0 left-27\"\n            />\n          </div>\n        }\n        title=\"Slack\"\n        description={\n          <p className=\"text-xs leading-20 text-tag-warning-icon inline-flex items-center gap-2\">\n            Personal account (kyle-nguyen)\n            <Icon name=\"info\" size=\"sm\" className=\"shrink-0 size-16 text-tag-warning-icon\" />\n          </p>\n        }\n        rightElement={\n          <Button variant=\"primary\" size=\"sm\">\n            Change account\n          </Button>\n        }\n      />\n\n      <DynamicItem\n        variant=\"default\"\n        leftElement={\n          <div className=\"relative\">\n            <Avatar content=\"logoPlaceholder\" logoName=\"slack\" radius=\"full\" size=\"lg\" />\n            <Avatar\n              content=\"logo\"\n              logoName=\"github\"\n              radius=\"full\"\n              size=\"2xs\"\n              logoClassName=\"p-0\"\n              className=\"absolute bottom-0 left-27\"\n            />\n          </div>\n        }\n        title=\"Slack\"\n        description=\"Organization (slack-github)\"\n        rightElement={\n          <Button variant=\"secondary\" size=\"sm\">\n            Change account\n          </Button>\n        }\n      />\n    </div>\n  ),\n};\n\nexport const WithCustomElementsItem: Story = {\n  args: {},\n  render: () => {\n    return (\n      <div className=\"flex flex-col gap-16 w-full max-w-672\">\n        <DynamicItem\n          variant=\"default\"\n          leftElement={\n            <div className=\"flex shrink-0 items-center justify-center text-tag-success-icon\">\n              <Icon name=\"checkCircleSolid\" size=\"sm\" />\n            </div>\n          }\n          title=\"Give access to your Github organizations\"\n          description=\"We'll use this permission to sync your organization's.\"\n          action={\n            <div className=\"flex gap-8 mx-auto sm:mx-0\">\n              <Button variant=\"primary\" size=\"sm\">\n                Github access\n              </Button>\n              <Button variant=\"transparentMuted\" size=\"sm\">\n                Skip for now\n              </Button>\n            </div>\n          }\n          rightElement={\n            <img\n              src={illustration1}\n              alt=\"illustration-1\"\n              className=\"hidden sm:block absolute overflow-clip right-2 top-1/2 -translate-y-1/2 -translate-x-46 w-fit object-contain\"\n            />\n          }\n        />\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    );\n  },\n};\n"],"names":["Button","ItemTitle","MovingBorder","cn","illustration1","illustration2","illustrationBg","Avatar","AvatarGroup","AvatarGroupTooltip","Icon","DynamicItem","meta","title","component","tags","OrganizationItem","args","render","div","className","variant","leftElement","content","logoName","radius","size","description","rightElement","fallback","maxVisible","animateOnHover","ConnectGithubAccountItem","logoClassName","p","name","WithCustomElementsItem","action","img","src","alt","style","borderRadius","duration","rx","ry","span","color"],"mappings":"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"}

package/dist/components/index.d.ts

@@ -2,9 +2,13 @@ export * from './alert';
 export * from './avatar';
 export * from './badge';
 export * from './button';
+export * from './calendar';
 export * from './checkbox';
 export * from './code-block';
+export * from './date-picker';
+export * from './date-time-range-picker';
 export * from './dot-grid';
+export * from './dropdown-menu';
 export * from './dynamic-item';
 export * from './form';
 export * from './icon';
@@ -13,6 +17,7 @@ export * from './input';
 export * from './item';
 export * from './label';
 export * from './modal';
+export * from './popover';
 export * from './textarea';
 export * from './theme';
 export * from './toast';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,0BAA0B,CAAC;AACzC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC"}

package/dist/components/index.js

@@ -2,9 +2,13 @@ export * from './alert/index.js';
 export * from './avatar/index.js';
 export * from './badge/index.js';
 export * from './button/index.js';
+export * from './calendar/index.js';
 export * from './checkbox/index.js';
 export * from './code-block/index.js';
+export * from './date-picker/index.js';
+export * from './date-time-range-picker/index.js';
 export * from './dot-grid/index.js';
+export * from './dropdown-menu/index.js';
 export * from './dynamic-item/index.js';
 export * from './form/index.js';
 export * from './icon/index.js';
@@ -13,6 +17,7 @@ export * from './input/index.js';
 export * from './item/index.js';
 export * from './label/index.js';
 export * from './modal/index.js';
+export * from './popover/index.js';
 export * from './textarea/index.js';
 export * from './theme/index.js';
 export * from './toast/index.js';

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './alert';\nexport * from './avatar';\nexport * from './badge';\nexport * from './button';\nexport * from './checkbox';\nexport * from './code-block';\nexport * from './dot-grid';\nexport * from './dynamic-item';\nexport * from './form';\nexport * from './icon';\nexport * from './inline-tips';\nexport * from './input';\nexport * from './item';\nexport * from './label';\nexport * from './modal';\nexport * from './textarea';\nexport * from './theme';\nexport * from './toast';\nexport * from './tooltip';\nexport * from './typography';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,eAAe;AAC7B,cAAc,aAAa;AAC3B,cAAc,iBAAiB;AAC/B,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,gBAAgB;AAC9B,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,eAAe"}
+{"version":3,"sources":["../../src/components/index.ts"],"sourcesContent":["export * from './alert';\nexport * from './avatar';\nexport * from './badge';\nexport * from './button';\nexport * from './calendar';\nexport * from './checkbox';\nexport * from './code-block';\nexport * from './date-picker';\nexport * from './date-time-range-picker';\nexport * from './dot-grid';\nexport * from './dropdown-menu';\nexport * from './dynamic-item';\nexport * from './form';\nexport * from './icon';\nexport * from './inline-tips';\nexport * from './input';\nexport * from './item';\nexport * from './label';\nexport * from './modal';\nexport * from './popover';\nexport * from './textarea';\nexport * from './theme';\nexport * from './toast';\nexport * from './tooltip';\nexport * from './typography';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,UAAU;AACxB,cAAc,WAAW;AACzB,cAAc,aAAa;AAC3B,cAAc,aAAa;AAC3B,cAAc,eAAe;AAC7B,cAAc,gBAAgB;AAC9B,cAAc,2BAA2B;AACzC,cAAc,aAAa;AAC3B,cAAc,kBAAkB;AAChC,cAAc,iBAAiB;AAC/B,cAAc,SAAS;AACvB,cAAc,SAAS;AACvB,cAAc,gBAAgB;AAC9B,cAAc,UAAU;AACxB,cAAc,SAAS;AACvB,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,eAAe"}

package/dist/components/inline-tips/inline-tips.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { argosScreenshot } from '@argos-ci/storybook/vitest';
 import { Code, Header } from '../../components/typography/index.js';
 import { InlineTips, InlineTipsAction, InlineTipsActions, InlineTipsContent, InlineTipsDescription, InlineTipsTitle } from './inline-tips.js';
 const meta = {
@@ -42,6 +43,10 @@ const variants = [
     'secondary'
 ];
 export const Default = {
+    play: async (ctx)=>{
+        await new Promise((resolve)=>setTimeout(resolve, 100));
+        await argosScreenshot(ctx, 'InlineTips Default');
+    },
     render: (args)=>{
         return /*#__PURE__*/ _jsxs(InlineTips, {
             ...args,

package/dist/components/inline-tips/inline-tips.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/inline-tips/inline-tips.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Code, Header} from 'components/typography';\nimport {\n  InlineTips,\n  InlineTipsAction,\n  InlineTipsActions,\n  InlineTipsContent,\n  InlineTipsDescription,\n  InlineTipsTitle,\n} from './inline-tips';\n\nconst meta = {\n  title: 'Components/InlineTips',\n  component: InlineTips,\n  tags: ['autodocs'],\n  argTypes: {\n    type: {\n      control: 'select',\n      options: ['default', 'info', 'success', 'error'],\n    },\n    variant: {\n      control: 'select',\n      options: ['primary', 'secondary'],\n    },\n  },\n  args: {\n    type: 'default',\n    variant: 'primary',\n  },\n} satisfies Meta<typeof InlineTips>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst types = ['default', 'info', 'success', 'error'] as const;\nconst variants = ['primary', 'secondary'] as const;\n\nexport const Default: Story = {\n  render: (args) => {\n    return (\n      <InlineTips {...args}>\n        <InlineTipsContent>\n          <InlineTipsTitle>Title</InlineTipsTitle>\n          <InlineTipsDescription>Description</InlineTipsDescription>\n        </InlineTipsContent>\n        <InlineTipsActions>\n          <InlineTipsAction variant={args.variant}>Label</InlineTipsAction>\n          <InlineTipsAction variant={args.variant}>Label</InlineTipsAction>\n        </InlineTipsActions>\n      </InlineTips>\n    );\n  },\n};\n\nexport const Variants: Story = {\n  render: () => {\n    return (\n      <div className=\"flex flex-col gap-16\">\n        {variants.map((variant) => (\n          <InlineTips key={variant} type=\"default\" variant={variant}>\n            <InlineTipsContent>\n              <InlineTipsTitle>Title</InlineTipsTitle>\n              <InlineTipsDescription>Description</InlineTipsDescription>\n            </InlineTipsContent>\n            <InlineTipsActions>\n              <InlineTipsAction variant=\"primary\">Label</InlineTipsAction>\n              <InlineTipsAction variant=\"secondary\">Label</InlineTipsAction>\n            </InlineTipsActions>\n          </InlineTips>\n        ))}\n      </div>\n    );\n  },\n};\n\nexport const DesignMock: Story = {\n  render: () => {\n    const content = {\n      default: {title: 'Title', description: 'Description'},\n      info: {title: 'Title', description: 'Description'},\n      success: {title: 'Title', description: 'Description'},\n      error: {title: 'Title', description: 'Description'},\n    };\n\n    return (\n      <div className=\"flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base\">\n        <Header variant=\"h3\" className=\"text-foreground-neutral-subtle\">\n          INLINE TIPS\n        </Header>\n        <div className=\"flex flex-col gap-16\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            Primary\n          </Code>\n          {types.map((type) => (\n            <InlineTips key={type} type={type} variant=\"primary\">\n              <InlineTipsContent>\n                <InlineTipsTitle>{content[type].title}</InlineTipsTitle>\n                <InlineTipsDescription>{content[type].description}</InlineTipsDescription>\n              </InlineTipsContent>\n              <InlineTipsActions>\n                <InlineTipsAction variant=\"primary\">Label</InlineTipsAction>\n                <InlineTipsAction variant=\"secondary\">Label</InlineTipsAction>\n              </InlineTipsActions>\n            </InlineTips>\n          ))}\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            Secondary\n          </Code>\n          {types.map((type) => (\n            <InlineTips key={type} type={type} variant=\"secondary\">\n              <InlineTipsContent>\n                <InlineTipsTitle>{content[type].title}</InlineTipsTitle>\n                <InlineTipsDescription>{content[type].description}</InlineTipsDescription>\n              </InlineTipsContent>\n              <InlineTipsActions>\n                <InlineTipsAction variant=\"primary\">Label</InlineTipsAction>\n                <InlineTipsAction variant=\"secondary\">Label</InlineTipsAction>\n              </InlineTipsActions>\n            </InlineTips>\n          ))}\n        </div>\n      </div>\n    );\n  },\n};\n"],"names":["Code","Header","InlineTips","InlineTipsAction","InlineTipsActions","InlineTipsContent","InlineTipsDescription","InlineTipsTitle","meta","title","component","tags","argTypes","type","control","options","variant","args","types","variants","Default","render","Variants","div","className","map","DesignMock","content","default","description","info","success","error"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/inline-tips/inline-tips.stories.tsx"],"sourcesContent":["import {argosScreenshot} from '@argos-ci/storybook/vitest';\nimport type {Meta, StoryObj} from '@storybook/react';\nimport {Code, Header} from 'components/typography';\nimport {\n  InlineTips,\n  InlineTipsAction,\n  InlineTipsActions,\n  InlineTipsContent,\n  InlineTipsDescription,\n  InlineTipsTitle,\n} from './inline-tips';\n\nconst meta = {\n  title: 'Components/InlineTips',\n  component: InlineTips,\n  tags: ['autodocs'],\n  argTypes: {\n    type: {\n      control: 'select',\n      options: ['default', 'info', 'success', 'error'],\n    },\n    variant: {\n      control: 'select',\n      options: ['primary', 'secondary'],\n    },\n  },\n  args: {\n    type: 'default',\n    variant: 'primary',\n  },\n} satisfies Meta<typeof InlineTips>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst types = ['default', 'info', 'success', 'error'] as const;\nconst variants = ['primary', 'secondary'] as const;\n\nexport const Default: Story = {\n  play: async (ctx) => {\n    await new Promise((resolve) => setTimeout(resolve, 100));\n    await argosScreenshot(ctx, 'InlineTips Default');\n  },\n  render: (args) => {\n    return (\n      <InlineTips {...args}>\n        <InlineTipsContent>\n          <InlineTipsTitle>Title</InlineTipsTitle>\n          <InlineTipsDescription>Description</InlineTipsDescription>\n        </InlineTipsContent>\n        <InlineTipsActions>\n          <InlineTipsAction variant={args.variant}>Label</InlineTipsAction>\n          <InlineTipsAction variant={args.variant}>Label</InlineTipsAction>\n        </InlineTipsActions>\n      </InlineTips>\n    );\n  },\n};\n\nexport const Variants: Story = {\n  render: () => {\n    return (\n      <div className=\"flex flex-col gap-16\">\n        {variants.map((variant) => (\n          <InlineTips key={variant} type=\"default\" variant={variant}>\n            <InlineTipsContent>\n              <InlineTipsTitle>Title</InlineTipsTitle>\n              <InlineTipsDescription>Description</InlineTipsDescription>\n            </InlineTipsContent>\n            <InlineTipsActions>\n              <InlineTipsAction variant=\"primary\">Label</InlineTipsAction>\n              <InlineTipsAction variant=\"secondary\">Label</InlineTipsAction>\n            </InlineTipsActions>\n          </InlineTips>\n        ))}\n      </div>\n    );\n  },\n};\n\nexport const DesignMock: Story = {\n  render: () => {\n    const content = {\n      default: {title: 'Title', description: 'Description'},\n      info: {title: 'Title', description: 'Description'},\n      success: {title: 'Title', description: 'Description'},\n      error: {title: 'Title', description: 'Description'},\n    };\n\n    return (\n      <div className=\"flex flex-col gap-32 pb-64 pt-32 px-32 bg-background-neutral-base\">\n        <Header variant=\"h3\" className=\"text-foreground-neutral-subtle\">\n          INLINE TIPS\n        </Header>\n        <div className=\"flex flex-col gap-16\">\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            Primary\n          </Code>\n          {types.map((type) => (\n            <InlineTips key={type} type={type} variant=\"primary\">\n              <InlineTipsContent>\n                <InlineTipsTitle>{content[type].title}</InlineTipsTitle>\n                <InlineTipsDescription>{content[type].description}</InlineTipsDescription>\n              </InlineTipsContent>\n              <InlineTipsActions>\n                <InlineTipsAction variant=\"primary\">Label</InlineTipsAction>\n                <InlineTipsAction variant=\"secondary\">Label</InlineTipsAction>\n              </InlineTipsActions>\n            </InlineTips>\n          ))}\n          <Code variant=\"label\" className=\"text-foreground-neutral-subtle\">\n            Secondary\n          </Code>\n          {types.map((type) => (\n            <InlineTips key={type} type={type} variant=\"secondary\">\n              <InlineTipsContent>\n                <InlineTipsTitle>{content[type].title}</InlineTipsTitle>\n                <InlineTipsDescription>{content[type].description}</InlineTipsDescription>\n              </InlineTipsContent>\n              <InlineTipsActions>\n                <InlineTipsAction variant=\"primary\">Label</InlineTipsAction>\n                <InlineTipsAction variant=\"secondary\">Label</InlineTipsAction>\n              </InlineTipsActions>\n            </InlineTips>\n          ))}\n        </div>\n      </div>\n    );\n  },\n};\n"],"names":["argosScreenshot","Code","Header","InlineTips","InlineTipsAction","InlineTipsActions","InlineTipsContent","InlineTipsDescription","InlineTipsTitle","meta","title","component","tags","argTypes","type","control","options","variant","args","types","variants","Default","play","ctx","Promise","resolve","setTimeout","render","Variants","div","className","map","DesignMock","content","default","description","info","success","error"],"mappings":"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"}

package/dist/components/item/item.stories.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../components/button/button.js';
+import { DatePicker } from '../../components/date-picker/index.js';
 import { Icon } from '../../components/icon/icon.js';
 import { Input } from '../../components/input/input.js';
 import { Label } from '../../components/label/label.js';
+import { useState } from 'react';
 import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemSeparator, ItemTitle } from './item.js';
 const meta = {
     title: 'Components/Item',
@@ -32,6 +34,7 @@ const meta = {
     }
 };
 export default meta;
+const DEFAULT_START_DATE = new Date('2024-01-01T00:00:00.000Z');
 export const Default = {
     args: {
         variant: 'default'
@@ -119,7 +122,9 @@ export const Variants = {
 };
 export const ImportPastJobsModal = {
     args: {},
-    render: ()=>/*#__PURE__*/ _jsx("div", {
+    render: ()=>{
+        const [date, setDate] = useState(DEFAULT_START_DATE);
+        return /*#__PURE__*/ _jsx("div", {
             className: "flex w-full max-w-lg flex-col",
             children: /*#__PURE__*/ _jsxs(Item, {
                 variant: "neutral",
@@ -129,7 +134,7 @@ export const ImportPastJobsModal = {
                         children: [
                             /*#__PURE__*/ _jsx(ItemTitle, {
                                 className: "text-lg font-medium text-foreground-neutral-base",
-                                children: "Import past jobs from Github"
+                                children: "Import past jobs from GitHub"
                             }),
                             /*#__PURE__*/ _jsxs("div", {
                                 className: "flex items-center gap-8",
@@ -156,7 +161,7 @@ export const ImportPastJobsModal = {
                         children: [
                             /*#__PURE__*/ _jsx(ItemDescription, {
                                 className: "mb-16 text-sm text-foreground-neutral-subtle",
-                                children: "Backfill your CI history by importing past runs from your Github repo. We'll handle the rest by creating a background task to import the data for you."
+                                children: "Backfill your CI history by importing past runs from your GitHub repo. We'll handle the rest by creating a background task to import the data for you."
                             }),
                             /*#__PURE__*/ _jsxs("div", {
                                 className: "flex flex-col gap-20",
@@ -196,11 +201,12 @@ export const ImportPastJobsModal = {
                                                 htmlFor: "start-date",
                                                 children: "Start date"
                                             }),
-                                            /*#__PURE__*/ _jsx(Input, {
+                                            /*#__PURE__*/ _jsx(DatePicker, {
                                                 id: "start-date",
-                                                type: "datetime-local",
-                                                defaultValue: "September 5th, 2025",
-                                                className: "pl-32"
+                                                date: date,
+                                                onDateSelect: setDate,
+                                                onClear: ()=>setDate(undefined),
+                                                placeholder: "DD/MM/YYYY"
                                             })
                                         ]
                                     })
@@ -226,7 +232,8 @@ export const ImportPastJobsModal = {
                     })
                 ]
             })
-        })
+        });
+    }
 };
 
 //# sourceMappingURL=item.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/item/item.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Button} from 'components/button/button';\nimport {Icon} from 'components/icon/icon';\nimport {Input} from 'components/input/input';\nimport {Label} from 'components/label/label';\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemSeparator,\n  ItemTitle,\n} from './item';\n\nconst meta = {\n  title: 'Components/Item',\n  component: Item,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['default', 'neutral'],\n    },\n    size: {\n      control: 'select',\n      options: ['default', 'sm'],\n    },\n  },\n  args: {\n    variant: 'default',\n    size: 'default',\n  },\n} satisfies Meta<typeof Item>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n  args: {\n    variant: 'default',\n  },\n  render: (args) => (\n    <Item {...args} className=\"px-12 py-12\">\n      <ItemContent>\n        <ItemTitle>Basic Item</ItemTitle>\n        <ItemDescription>A simple item with title and description.</ItemDescription>\n      </ItemContent>\n      <ItemActions className=\"pt-8\">\n        <Button variant=\"secondary\" size=\"sm\">\n          Action\n        </Button>\n      </ItemActions>\n    </Item>\n  ),\n};\n\nexport const Variants: Story = {\n  args: {},\n  render: () => (\n    <ItemGroup className=\"flex w-full max-w-md flex-col gap-12\">\n      <Item variant=\"default\" className=\"px-12 py-12\">\n        <ItemContent>\n          <ItemTitle>Default Variant</ItemTitle>\n          <ItemDescription>Standard styling with subtle background and borders.</ItemDescription>\n        </ItemContent>\n        <ItemActions className=\"pt-8\">\n          <Button variant=\"secondary\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"neutral\" className=\"px-12 py-12\">\n        <ItemContent>\n          <ItemTitle>Neutral Variant</ItemTitle>\n          <ItemDescription>Neutral style with subtle background and borders.</ItemDescription>\n        </ItemContent>\n        <ItemActions className=\"pt-8\">\n          <Button variant=\"primary\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n    </ItemGroup>\n  ),\n};\n\nexport const ImportPastJobsModal: Story = {\n  args: {},\n  render: () => (\n    <div className=\"flex w-full max-w-lg flex-col\">\n      <Item variant=\"neutral\">\n        <ItemHeader className=\"justify-between px-24 py-16\">\n          <ItemTitle className=\"text-lg font-medium text-foreground-neutral-base\">\n            Import past jobs from Github\n          </ItemTitle>\n          <div className=\"flex items-center gap-8\">\n            <kbd className=\"flex items-center justify-center rounded-8 border border-border-neutral-base shadow-button-neutral bg-background-field-base text-xs text-foreground-neutral-subtle px-4\">\n              esc\n            </kbd>\n            <Button\n              variant=\"transparent\"\n              size=\"xs\"\n              className=\"rounded-4 p-2 cursor-pointer bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2 w-24 h-24\"\n            >\n              <Icon name=\"close\" />\n            </Button>\n          </div>\n        </ItemHeader>\n        <ItemSeparator />\n        <ItemContent className=\"px-24 py-16\">\n          <ItemDescription className=\"mb-16 text-sm text-foreground-neutral-subtle\">\n            Backfill your CI history by importing past runs from your Github repo. We'll handle the\n            rest by creating a background task to import the data for you.\n          </ItemDescription>\n          <div className=\"flex flex-col gap-20\">\n            <div className=\"flex flex-col gap-8\">\n              <Label htmlFor=\"repo-owner\">Repository owner</Label>\n              <Input id=\"repo-owner\" type=\"text\" defaultValue=\"apache\" />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Label htmlFor=\"repo-name\">Repository name</Label>\n              <Input id=\"repo-name\" type=\"text\" defaultValue=\"kafka\" />\n            </div>\n            <div className=\"flex flex-col gap-8\">\n              <Label htmlFor=\"start-date\">Start date</Label>\n              <Input\n                id=\"start-date\"\n                type=\"datetime-local\"\n                defaultValue=\"September 5th, 2025\"\n                className=\"pl-32\"\n              />\n            </div>\n          </div>\n        </ItemContent>\n        <ItemSeparator />\n        <ItemFooter className=\"justify-end gap-8 px-24 py-16\">\n          <Button variant=\"transparent\" size=\"sm\">\n            Cancel\n          </Button>\n          <Button variant=\"primary\" size=\"sm\">\n            Import\n          </Button>\n        </ItemFooter>\n      </Item>\n    </div>\n  ),\n};\n"],"names":["Button","Icon","Input","Label","Item","ItemActions","ItemContent","ItemDescription","ItemFooter","ItemGroup","ItemHeader","ItemSeparator","ItemTitle","meta","title","component","tags","argTypes","variant","control","options","size","args","Default","render","className","Variants","ImportPastJobsModal","div","kbd","name","htmlFor","id","type","defaultValue"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/item/item.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport {Button} from 'components/button/button';\nimport {DatePicker} from 'components/date-picker';\nimport {Icon} from 'components/icon/icon';\nimport {Input} from 'components/input/input';\nimport {Label} from 'components/label/label';\nimport {useState} from 'react';\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemFooter,\n  ItemGroup,\n  ItemHeader,\n  ItemSeparator,\n  ItemTitle,\n} from './item';\n\nconst meta = {\n  title: 'Components/Item',\n  component: Item,\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['default', 'neutral'],\n    },\n    size: {\n      control: 'select',\n      options: ['default', 'sm'],\n    },\n  },\n  args: {\n    variant: 'default',\n    size: 'default',\n  },\n} satisfies Meta<typeof Item>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nconst DEFAULT_START_DATE = new Date('2024-01-01T00:00:00.000Z');\n\nexport const Default: Story = {\n  args: {\n    variant: 'default',\n  },\n  render: (args) => (\n    <Item {...args} className=\"px-12 py-12\">\n      <ItemContent>\n        <ItemTitle>Basic Item</ItemTitle>\n        <ItemDescription>A simple item with title and description.</ItemDescription>\n      </ItemContent>\n      <ItemActions className=\"pt-8\">\n        <Button variant=\"secondary\" size=\"sm\">\n          Action\n        </Button>\n      </ItemActions>\n    </Item>\n  ),\n};\n\nexport const Variants: Story = {\n  args: {},\n  render: () => (\n    <ItemGroup className=\"flex w-full max-w-md flex-col gap-12\">\n      <Item variant=\"default\" className=\"px-12 py-12\">\n        <ItemContent>\n          <ItemTitle>Default Variant</ItemTitle>\n          <ItemDescription>Standard styling with subtle background and borders.</ItemDescription>\n        </ItemContent>\n        <ItemActions className=\"pt-8\">\n          <Button variant=\"secondary\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n      <Item variant=\"neutral\" className=\"px-12 py-12\">\n        <ItemContent>\n          <ItemTitle>Neutral Variant</ItemTitle>\n          <ItemDescription>Neutral style with subtle background and borders.</ItemDescription>\n        </ItemContent>\n        <ItemActions className=\"pt-8\">\n          <Button variant=\"primary\" size=\"sm\">\n            Action\n          </Button>\n        </ItemActions>\n      </Item>\n    </ItemGroup>\n  ),\n};\n\nexport const ImportPastJobsModal: Story = {\n  args: {},\n  render: () => {\n    const [date, setDate] = useState<Date | undefined>(DEFAULT_START_DATE);\n\n    return (\n      <div className=\"flex w-full max-w-lg flex-col\">\n        <Item variant=\"neutral\">\n          <ItemHeader className=\"justify-between px-24 py-16\">\n            <ItemTitle className=\"text-lg font-medium text-foreground-neutral-base\">\n              Import past jobs from GitHub\n            </ItemTitle>\n            <div className=\"flex items-center gap-8\">\n              <kbd className=\"flex items-center justify-center rounded-8 border border-border-neutral-base shadow-button-neutral bg-background-field-base text-xs text-foreground-neutral-subtle px-4\">\n                esc\n              </kbd>\n              <Button\n                variant=\"transparent\"\n                size=\"xs\"\n                className=\"rounded-4 p-2 cursor-pointer bg-transparent border-none text-foreground-neutral-muted hover:text-foreground-neutral-base hover:bg-background-components-hover transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-background-accent-blue-base focus-visible:ring-offset-2 w-24 h-24\"\n              >\n                <Icon name=\"close\" />\n              </Button>\n            </div>\n          </ItemHeader>\n          <ItemSeparator />\n          <ItemContent className=\"px-24 py-16\">\n            <ItemDescription className=\"mb-16 text-sm text-foreground-neutral-subtle\">\n              Backfill your CI history by importing past runs from your GitHub repo. We'll handle\n              the rest by creating a background task to import the data for you.\n            </ItemDescription>\n            <div className=\"flex flex-col gap-20\">\n              <div className=\"flex flex-col gap-8\">\n                <Label htmlFor=\"repo-owner\">Repository owner</Label>\n                <Input id=\"repo-owner\" type=\"text\" defaultValue=\"apache\" />\n              </div>\n              <div className=\"flex flex-col gap-8\">\n                <Label htmlFor=\"repo-name\">Repository name</Label>\n                <Input id=\"repo-name\" type=\"text\" defaultValue=\"kafka\" />\n              </div>\n              <div className=\"flex flex-col gap-8\">\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          </ItemContent>\n          <ItemSeparator />\n          <ItemFooter className=\"justify-end gap-8 px-24 py-16\">\n            <Button variant=\"transparent\" size=\"sm\">\n              Cancel\n            </Button>\n            <Button variant=\"primary\" size=\"sm\">\n              Import\n            </Button>\n          </ItemFooter>\n        </Item>\n      </div>\n    );\n  },\n};\n"],"names":["Button","DatePicker","Icon","Input","Label","useState","Item","ItemActions","ItemContent","ItemDescription","ItemFooter","ItemGroup","ItemHeader","ItemSeparator","ItemTitle","meta","title","component","tags","argTypes","variant","control","options","size","args","DEFAULT_START_DATE","Date","Default","render","className","Variants","ImportPastJobsModal","date","setDate","div","kbd","name","htmlFor","id","type","defaultValue","onDateSelect","onClear","undefined","placeholder"],"mappings":";AACA,SAAQA,MAAM,QAAO,2BAA2B;AAChD,SAAQC,UAAU,QAAO,yBAAyB;AAClD,SAAQC,IAAI,QAAO,uBAAuB;AAC1C,SAAQC,KAAK,QAAO,yBAAyB;AAC7C,SAAQC,KAAK,QAAO,yBAAyB;AAC7C,SAAQC,QAAQ,QAAO,QAAQ;AAC/B,SACEC,IAAI,EACJC,WAAW,EACXC,WAAW,EACXC,eAAe,EACfC,UAAU,EACVC,SAAS,EACTC,UAAU,EACVC,aAAa,EACbC,SAAS,QACJ,SAAS;AAEhB,MAAMC,OAAO;IACXC,OAAO;IACPC,WAAWX;IACXY,MAAM;QAAC;KAAW;IAClBC,UAAU;QACRC,SAAS;YACPC,SAAS;YACTC,SAAS;gBAAC;gBAAW;aAAU;QACjC;QACAC,MAAM;YACJF,SAAS;YACTC,SAAS;gBAAC;gBAAW;aAAK;QAC5B;IACF;IACAE,MAAM;QACJJ,SAAS;QACTG,MAAM;IACR;AACF;AAEA,eAAeR,KAAK;AAGpB,MAAMU,qBAAqB,IAAIC,KAAK;AAEpC,OAAO,MAAMC,UAAiB;IAC5BH,MAAM;QACJJ,SAAS;IACX;IACAQ,QAAQ,CAACJ,qBACP,MAAClB;YAAM,GAAGkB,IAAI;YAAEK,WAAU;;8BACxB,MAACrB;;sCACC,KAACM;sCAAU;;sCACX,KAACL;sCAAgB;;;;8BAEnB,KAACF;oBAAYsB,WAAU;8BACrB,cAAA,KAAC7B;wBAAOoB,SAAQ;wBAAYG,MAAK;kCAAK;;;;;AAM9C,EAAE;AAEF,OAAO,MAAMO,WAAkB;IAC7BN,MAAM,CAAC;IACPI,QAAQ,kBACN,MAACjB;YAAUkB,WAAU;;8BACnB,MAACvB;oBAAKc,SAAQ;oBAAUS,WAAU;;sCAChC,MAACrB;;8CACC,KAACM;8CAAU;;8CACX,KAACL;8CAAgB;;;;sCAEnB,KAACF;4BAAYsB,WAAU;sCACrB,cAAA,KAAC7B;gCAAOoB,SAAQ;gCAAYG,MAAK;0CAAK;;;;;8BAK1C,MAACjB;oBAAKc,SAAQ;oBAAUS,WAAU;;sCAChC,MAACrB;;8CACC,KAACM;8CAAU;;8CACX,KAACL;8CAAgB;;;;sCAEnB,KAACF;4BAAYsB,WAAU;sCACrB,cAAA,KAAC7B;gCAAOoB,SAAQ;gCAAUG,MAAK;0CAAK;;;;;;;AAO9C,EAAE;AAEF,OAAO,MAAMQ,sBAA6B;IACxCP,MAAM,CAAC;IACPI,QAAQ;QACN,MAAM,CAACI,MAAMC,QAAQ,GAAG5B,SAA2BoB;QAEnD,qBACE,KAACS;YAAIL,WAAU;sBACb,cAAA,MAACvB;gBAAKc,SAAQ;;kCACZ,MAACR;wBAAWiB,WAAU;;0CACpB,KAACf;gCAAUe,WAAU;0CAAmD;;0CAGxE,MAACK;gCAAIL,WAAU;;kDACb,KAACM;wCAAIN,WAAU;kDAA0K;;kDAGzL,KAAC7B;wCACCoB,SAAQ;wCACRG,MAAK;wCACLM,WAAU;kDAEV,cAAA,KAAC3B;4CAAKkC,MAAK;;;;;;;kCAIjB,KAACvB;kCACD,MAACL;wBAAYqB,WAAU;;0CACrB,KAACpB;gCAAgBoB,WAAU;0CAA+C;;0CAI1E,MAACK;gCAAIL,WAAU;;kDACb,MAACK;wCAAIL,WAAU;;0DACb,KAACzB;gDAAMiC,SAAQ;0DAAa;;0DAC5B,KAAClC;gDAAMmC,IAAG;gDAAaC,MAAK;gDAAOC,cAAa;;;;kDAElD,MAACN;wCAAIL,WAAU;;0DACb,KAACzB;gDAAMiC,SAAQ;0DAAY;;0DAC3B,KAAClC;gDAAMmC,IAAG;gDAAYC,MAAK;gDAAOC,cAAa;;;;kDAEjD,MAACN;wCAAIL,WAAU;;0DACb,KAACzB;gDAAMiC,SAAQ;0DAAa;;0DAC5B,KAACpC;gDACCqC,IAAG;gDACHN,MAAMA;gDACNS,cAAcR;gDACdS,SAAS,IAAMT,QAAQU;gDACvBC,aAAY;;;;;;;;kCAKpB,KAAC/B;kCACD,MAACH;wBAAWmB,WAAU;;0CACpB,KAAC7B;gCAAOoB,SAAQ;gCAAcG,MAAK;0CAAK;;0CAGxC,KAACvB;gCAAOoB,SAAQ;gCAAUG,MAAK;0CAAK;;;;;;;IAO9C;AACF,EAAE"}

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 { DatePicker } from '../../components/date-picker/index.js';
 import { DynamicItem } from '../../components/dynamic-item/index.js';
 import { Icon } from '../../components/icon/index.js';
 import { Input } from '../../components/input/index.js';
@@ -19,6 +20,7 @@ import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalTitle, M
 const OPEN_MODAL_REGEX = /open modal/i;
 const IMPORT_JOBS_REGEX = /import past jobs from github/i;
 const GITHUB_ACTIONS_REGEX = /run github actions on shipfox/i;
+const DEFAULT_START_DATE = new Date('2025-12-06T00:00:00.000Z');
 const meta = {
     title: 'Components/Modal',
     component: Modal,
@@ -122,6 +124,7 @@ export const ImportForm = {
     },
     render: ()=>{
         const [open, setOpen] = useState(false);
+        const [date, setDate] = useState(DEFAULT_START_DATE);
         return /*#__PURE__*/ _jsx("div", {
             className: "flex h-[calc(100vh/2)] w-[calc(100vw/2)] items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip",
             children: /*#__PURE__*/ _jsxs(Modal, {
@@ -131,7 +134,7 @@ export const ImportForm = {
                     /*#__PURE__*/ _jsx(ModalTrigger, {
                         asChild: true,
                         children: /*#__PURE__*/ _jsx(Button, {
-                            children: "Import past jobs from Github"
+                            children: "Import past jobs from GitHub"
                         })
                     }),
                     /*#__PURE__*/ _jsxs(ModalContent, {
@@ -139,10 +142,10 @@ export const ImportForm = {
                         children: [
                             /*#__PURE__*/ _jsx(ModalTitle, {
                                 className: "sr-only",
-                                children: "Import past jobs from Github"
+                                children: "Import past jobs from GitHub"
                             }),
                             /*#__PURE__*/ _jsx(ModalHeader, {
-                                title: "Import past jobs from Github"
+                                title: "Import past jobs from GitHub"
                             }),
                             /*#__PURE__*/ _jsxs(ModalBody, {
                                 className: "gap-20",
@@ -150,7 +153,7 @@ export const ImportForm = {
                                     /*#__PURE__*/ _jsx(Text, {
                                         size: "sm",
                                         className: "text-foreground-neutral-subtle w-full",
-                                        children: "Backfill your CI history by importing past runs from your Github repo. We'll handle the rest by creating a background task to import the data for you."
+                                        children: "Backfill your CI history by importing past runs from your GitHub repo. We'll handle the rest by creating a background task to import the data for you."
                                     }),
                                     /*#__PURE__*/ _jsxs("div", {
                                         className: "flex flex-col gap-20 w-full",
@@ -181,10 +184,15 @@ export const ImportForm = {
                                                 className: "flex flex-col gap-8 w-full",
                                                 children: [
                                                     /*#__PURE__*/ _jsx(Label, {
+                                                        htmlFor: "start-date",
                                                         children: "Start date"
                                                     }),
-                                                    /*#__PURE__*/ _jsx(Input, {
-                                                        placeholder: "September 5th, 2025"
+                                                    /*#__PURE__*/ _jsx(DatePicker, {
+                                                        id: "start-date",
+                                                        date: date,
+                                                        onDateSelect: setDate,
+                                                        onClear: ()=>setDate(undefined),
+                                                        placeholder: "DD/MM/YYYY"
                                                     })
                                                 ]
                                             })

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 {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 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\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}>\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>Start date</Label>\n                  <Input placeholder=\"September 5th, 2025\" />\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}>\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","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","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","placeholder","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 {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}>\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}>\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","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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"}

package/dist/components/popover/index.d.ts

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

package/dist/components/popover/index.d.ts.map

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

package/dist/components/popover/index.js

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

package/dist/components/popover/index.js.map

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

package/dist/components/popover/popover.d.ts

@@ -0,0 +1,10 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import type { ComponentProps } from 'react';
+declare function Popover({ ...props }: ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverTrigger({ ...props }: ComponentProps<typeof PopoverPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverAnchor({ ...props }: ComponentProps<typeof PopoverPrimitive.Anchor>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: ComponentProps<typeof PopoverPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverArrow({ className, ...props }: ComponentProps<typeof PopoverPrimitive.Arrow>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverClose({ ...props }: ComponentProps<typeof PopoverPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent, PopoverArrow, PopoverClose };
+//# sourceMappingURL=popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/popover/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,OAAO,CAAC;AAG1C,iBAAS,OAAO,CAAC,EAAC,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAExE;AAED,iBAAS,cAAc,CAAC,EAAC,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAElF;AAED,iBAAS,aAAa,CAAC,EAAC,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,MAAM,CAAC,2CAEhF;AAMD,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAgB,EAChB,UAAc,EACd,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAmBjD;AAED,iBAAS,YAAY,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAOzF;AAED,iBAAS,YAAY,CAAC,EAAC,GAAG,KAAK,EAAC,EAAE,cAAc,CAAC,OAAO,gBAAgB,CAAC,KAAK,CAAC,2CAE9E;AAED,OAAO,EAAC,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,YAAY,EAAE,YAAY,EAAC,CAAC"}