@clerk/ui 1.0.0-snapshot.v20251204175016 → 1.0.0-snapshot.v20251211120550

package/dist/components/OrganizationProfile/InviteMembersScreen.js

@@ -9,7 +9,6 @@ import { useActionContext } from "../../elements/Action/ActionRoot.js";
 import { SuccessPage } from "../../elements/SuccessPage.js";
 import { InviteMembersForm } from "./InviteMembersForm.js";
 import { IconCircle } from "../../elements/IconCircle.js";
-import "@clerk/shared/utils";
 import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { useOrganization } from "@clerk/shared/react";
 

package/dist/components/OrganizationProfile/InviteMembersScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"InviteMembersScreen.js","names":["Email"],"sources":["../../../src/components/OrganizationProfile/InviteMembersScreen.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\nimport { runIfFunctionOrReturn } from '@clerk/shared/utils';\n\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { FormContainer } from '@/ui/elements/FormContainer';\nimport { IconCircle } from '@/ui/elements/IconCircle';\nimport { SuccessPage } from '@/ui/elements/SuccessPage';\n\nimport { useWizard, Wizard } from '../../common';\nimport { useOrganizationProfileContext } from '../../contexts';\nimport { descriptors, Flex, localizationKeys, Text } from '../../customizables';\nimport { useActionContext } from '../../elements/Action/ActionRoot';\nimport { Email } from '../../icons';\nimport { InviteMembersForm } from './InviteMembersForm';\n\ntype InviteMembersScreenProps = {\n  onReset?: () => void;\n};\n\nexport const InviteMembersScreen = withCardStateProvider((props: InviteMembersScreenProps) => {\n  const { close } = useActionContext();\n  const { onReset = close } = props;\n  const title = localizationKeys('organizationProfile.invitePage.title');\n  const subtitle = localizationKeys('organizationProfile.invitePage.subtitle');\n  const card = useCardState();\n  const wizard = useWizard({ onNextStep: () => card.setError(undefined) });\n  const { organization } = useOrganization();\n\n  if (!organization) {\n    return null;\n  }\n\n  return (\n    <Wizard {...wizard.props}>\n      <FormContainer\n        headerTitle={title}\n        headerSubtitle={subtitle}\n      >\n        <InviteMembersForm\n          onSuccess={wizard.nextStep}\n          onReset={onReset}\n        />\n      </FormContainer>\n      <SuccessPage\n        title={title}\n        onFinish={close}\n        contents={<InvitationsSentMessage />}\n      />\n    </Wizard>\n  );\n});\n\nexport const InvitationsSentMessage = () => {\n  return (\n    <Flex\n      direction='col'\n      center\n      gap={4}\n    >\n      <IconCircle\n        boxElementDescriptor={descriptors.invitationsSentIconBox}\n        iconElementDescriptor={descriptors.invitationsSentIcon}\n        icon={Email}\n      />\n      <Text localizationKey={localizationKeys('organizationProfile.invitePage.successMessage')} />\n    </Flex>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAmBA,MAAa,sBAAsB,uBAAuB,UAAoC;CAC5F,MAAM,EAAE,UAAU,kBAAkB;CACpC,MAAM,EAAE,UAAU,UAAU;CAC5B,MAAM,QAAQ,iBAAiB,uCAAuC;CACtE,MAAM,WAAW,iBAAiB,0CAA0C;CAC5E,MAAM,OAAO,cAAc;CAC3B,MAAM,SAAS,UAAU,EAAE,kBAAkB,KAAK,SAAS,OAAU,EAAE,CAAC;CACxE,MAAM,EAAE,iBAAiB,iBAAiB;AAE1C,KAAI,CAAC,aACH,QAAO;AAGT,QACE,qBAAC;EAAO,GAAI,OAAO;aACjB,oBAAC;GACC,aAAa;GACb,gBAAgB;aAEhB,oBAAC;IACC,WAAW,OAAO;IACT;KACT;IACY,EAChB,oBAAC;GACQ;GACP,UAAU;GACV,UAAU,oBAAC,2BAAyB;IACpC;GACK;EAEX;AAEF,MAAa,+BAA+B;AAC1C,QACE,qBAAC;EACC,WAAU;EACV;EACA,KAAK;aAEL,oBAAC;GACC,sBAAsB,YAAY;GAClC,uBAAuB,YAAY;GACnC,MAAMA;IACN,EACF,oBAAC,QAAK,iBAAiB,iBAAiB,gDAAgD,GAAI;GACvF"}
+{"version":3,"file":"InviteMembersScreen.js","names":["Email"],"sources":["../../../src/components/OrganizationProfile/InviteMembersScreen.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\n\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { FormContainer } from '@/ui/elements/FormContainer';\nimport { IconCircle } from '@/ui/elements/IconCircle';\nimport { SuccessPage } from '@/ui/elements/SuccessPage';\n\nimport { useWizard, Wizard } from '../../common';\nimport { descriptors, Flex, localizationKeys, Text } from '../../customizables';\nimport { useActionContext } from '../../elements/Action/ActionRoot';\nimport { Email } from '../../icons';\nimport { InviteMembersForm } from './InviteMembersForm';\ntype InviteMembersScreenProps = {\n  onReset?: () => void;\n};\n\nexport const InviteMembersScreen = withCardStateProvider((props: InviteMembersScreenProps) => {\n  const { close } = useActionContext();\n  const { onReset = close } = props;\n  const title = localizationKeys('organizationProfile.invitePage.title');\n  const subtitle = localizationKeys('organizationProfile.invitePage.subtitle');\n  const card = useCardState();\n  const wizard = useWizard({ onNextStep: () => card.setError(undefined) });\n  const { organization } = useOrganization();\n\n  if (!organization) {\n    return null;\n  }\n\n  return (\n    <Wizard {...wizard.props}>\n      <FormContainer\n        headerTitle={title}\n        headerSubtitle={subtitle}\n      >\n        <InviteMembersForm\n          onSuccess={wizard.nextStep}\n          onReset={onReset}\n        />\n      </FormContainer>\n      <SuccessPage\n        title={title}\n        onFinish={close}\n        contents={<InvitationsSentMessage />}\n      />\n    </Wizard>\n  );\n});\n\nexport const InvitationsSentMessage = () => {\n  return (\n    <Flex\n      direction='col'\n      center\n      gap={4}\n    >\n      <IconCircle\n        boxElementDescriptor={descriptors.invitationsSentIconBox}\n        iconElementDescriptor={descriptors.invitationsSentIcon}\n        icon={Email}\n      />\n      <Text localizationKey={localizationKeys('organizationProfile.invitePage.successMessage')} />\n    </Flex>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAa,sBAAsB,uBAAuB,UAAoC;CAC5F,MAAM,EAAE,UAAU,kBAAkB;CACpC,MAAM,EAAE,UAAU,UAAU;CAC5B,MAAM,QAAQ,iBAAiB,uCAAuC;CACtE,MAAM,WAAW,iBAAiB,0CAA0C;CAC5E,MAAM,OAAO,cAAc;CAC3B,MAAM,SAAS,UAAU,EAAE,kBAAkB,KAAK,SAAS,OAAU,EAAE,CAAC;CACxE,MAAM,EAAE,iBAAiB,iBAAiB;AAE1C,KAAI,CAAC,aACH,QAAO;AAGT,QACE,qBAAC;EAAO,GAAI,OAAO;aACjB,oBAAC;GACC,aAAa;GACb,gBAAgB;aAEhB,oBAAC;IACC,WAAW,OAAO;IACT;KACT;IACY,EAChB,oBAAC;GACQ;GACP,UAAU;GACV,UAAU,oBAAC,2BAAyB;IACpC;GACK;EAEX;AAEF,MAAa,+BAA+B;AAC1C,QACE,qBAAC;EACC,WAAU;EACV;EACA,KAAK;aAEL,oBAAC;GACC,sBAAsB,YAAY;GAClC,uBAAuB,YAAY;GACnC,MAAMA;IACN,EACF,oBAAC,QAAK,iBAAiB,iBAAiB,gDAAgD,GAAI;GACvF"}

package/dist/components/OrganizationProfile/MembersSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"MembersSearch.js","names":["MagnifyingGlass","t"],"sources":["../../../src/components/OrganizationProfile/MembersSearch.tsx"],"sourcesContent":["import type { useOrganization } from '@clerk/shared/react';\nimport type { GetMembersParams } from '@clerk/shared/types';\nimport { useEffect, useRef } from 'react';\n\nimport { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '@/customizables';\nimport { MagnifyingGlass } from '@/icons';\nimport { Spinner } from '@/primitives';\nimport { mqu } from '@/styledSystem';\nimport { Animated } from '@/ui/elements/Animated';\nimport { InputWithIcon } from '@/ui/elements/InputWithIcon';\n\nimport { ACTIVE_MEMBERS_PAGE_SIZE } from './OrganizationMembers';\n\ntype MembersSearchProps = {\n  /**\n   * Controlled query param state by parent component\n   */\n  query: GetMembersParams['query'];\n  /**\n   * Controlled input field value by parent component\n   */\n  value: string;\n  /**\n   * Paginated organization memberships\n   */\n  memberships: ReturnType<typeof useOrganization>['memberships'];\n  /**\n   * Handler for change event on input field\n   */\n  onSearchChange: (value: string) => void;\n  /**\n   * Handler for `query` value changes\n   */\n  onQueryTrigger: (query: string) => void;\n};\n\nconst membersSearchDebounceMs = 500;\n\nexport const MembersSearch = ({ query, value, memberships, onSearchChange, onQueryTrigger }: MembersSearchProps) => {\n  const { t } = useLocalizations();\n\n  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const eventValue = event.target.value;\n    onSearchChange(eventValue);\n\n    const shouldClearQuery = eventValue === '';\n    if (shouldClearQuery) {\n      onQueryTrigger(eventValue);\n    }\n  };\n\n  // Debounce the input value changes until the user stops typing\n  // to trigger the `query` param setter\n  function handleKeyUp() {\n    if (debounceTimer.current) {\n      clearTimeout(debounceTimer.current);\n    }\n\n    debounceTimer.current = setTimeout(() => {\n      onQueryTrigger(value.trim());\n    }, membersSearchDebounceMs);\n  }\n\n  // If search is not performed on a initial page, resets pagination offset\n  // based on the response count\n  useEffect(() => {\n    if (!query || !memberships?.data) {\n      return;\n    }\n\n    const hasOnePageLeft = (memberships?.count ?? 0) <= ACTIVE_MEMBERS_PAGE_SIZE;\n    if (hasOnePageLeft) {\n      memberships?.fetchPage?.(1);\n    }\n  }, [query, memberships]);\n\n  const isFetchingNewData = value && !!memberships?.isLoading && !!memberships.data?.length;\n\n  return (\n    <Animated asChild>\n      <Flex\n        sx={{\n          width: '50%',\n          [mqu.sm]: {\n            width: 'auto',\n          },\n        }}\n      >\n        <InputWithIcon\n          value={value}\n          type='search'\n          autoCapitalize='none'\n          spellCheck={false}\n          aria-label='Search'\n          placeholder={t(localizationKeys('organizationProfile.membersPage.action__search'))}\n          leftIcon={\n            isFetchingNewData ? (\n              <Spinner size='xs' />\n            ) : (\n              <Icon\n                icon={MagnifyingGlass}\n                elementDescriptor={descriptors.organizationProfileMembersSearchInputIcon}\n                sx={t => ({ color: t.colors.$colorMutedForeground })}\n              />\n            )\n          }\n          onKeyUp={handleKeyUp}\n          onChange={handleChange}\n          elementDescriptor={descriptors.organizationProfileMembersSearchInput}\n        />\n      </Flex>\n    </Animated>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAoCA,MAAM,0BAA0B;AAEhC,MAAa,iBAAiB,EAAE,OAAO,OAAO,aAAa,gBAAgB,qBAAyC;CAClH,MAAM,EAAE,MAAM,kBAAkB;CAEhC,MAAM,gBAAgB,OAA6C,KAAK;CAExE,MAAM,gBAAgB,UAA+C;EACnE,MAAM,aAAa,MAAM,OAAO;AAChC,iBAAe,WAAW;AAG1B,MADyB,eAAe,GAEtC,gBAAe,WAAW;;CAM9B,SAAS,cAAc;AACrB,MAAI,cAAc,QAChB,cAAa,cAAc,QAAQ;AAGrC,gBAAc,UAAU,iBAAiB;AACvC,kBAAe,MAAM,MAAM,CAAC;KAC3B,wBAAwB;;AAK7B,iBAAgB;AACd,MAAI,CAAC,SAAS,CAAC,aAAa,KAC1B;AAIF,OADwB,aAAa,SAAS,MAAM,yBAElD,cAAa,YAAY,EAAE;IAE5B,CAAC,OAAO,YAAY,CAAC;CAExB,MAAM,oBAAoB,SAAS,CAAC,CAAC,aAAa,aAAa,CAAC,CAAC,YAAY,MAAM;AAEnF,QACE,oBAAC;EAAS;YACR,oBAAC;GACC,IAAI;IACF,OAAO;KACN,IAAI,KAAK,EACR,OAAO,QACR;IACF;aAED,oBAAC;IACQ;IACP,MAAK;IACL,gBAAe;IACf,YAAY;IACZ,cAAW;IACX,aAAa,EAAE,iBAAiB,iDAAiD,CAAC;IAClF,UACE,oBACE,oBAAC,WAAQ,MAAK,OAAO,GAErB,oBAAC;KACC,MAAMA;KACN,mBAAmB,YAAY;KAC/B,KAAI,SAAM,EAAE,OAAOC,IAAE,OAAO,uBAAuB;MACnD;IAGN,SAAS;IACT,UAAU;IACV,mBAAmB,YAAY;KAC/B;IACG;GACE"}
+{"version":3,"file":"MembersSearch.js","names":["MagnifyingGlass","t"],"sources":["../../../src/components/OrganizationProfile/MembersSearch.tsx"],"sourcesContent":["import type { useOrganization } from '@clerk/shared/react';\nimport type { GetMembersParams } from '@clerk/shared/types';\nimport { useEffect, useRef } from 'react';\n\nimport { descriptors, Flex, Icon, localizationKeys, useLocalizations } from '@/customizables';\nimport { MagnifyingGlass } from '@/icons';\nimport { Spinner } from '@/primitives';\nimport { mqu } from '@/styledSystem';\nimport { Animated } from '@/ui/elements/Animated';\nimport { InputWithIcon } from '@/ui/elements/InputWithIcon';\n\nimport { ACTIVE_MEMBERS_PAGE_SIZE } from './OrganizationMembers';\n\ntype MembersSearchProps = {\n  /**\n   * Controlled query param state by parent component\n   */\n  query: GetMembersParams['query'];\n  /**\n   * Controlled input field value by parent component\n   */\n  value: string;\n  /**\n   * Paginated Organization memberships\n   */\n  memberships: ReturnType<typeof useOrganization>['memberships'];\n  /**\n   * Handler for change event on input field\n   */\n  onSearchChange: (value: string) => void;\n  /**\n   * Handler for `query` value changes\n   */\n  onQueryTrigger: (query: string) => void;\n};\n\nconst membersSearchDebounceMs = 500;\n\nexport const MembersSearch = ({ query, value, memberships, onSearchChange, onQueryTrigger }: MembersSearchProps) => {\n  const { t } = useLocalizations();\n\n  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const eventValue = event.target.value;\n    onSearchChange(eventValue);\n\n    const shouldClearQuery = eventValue === '';\n    if (shouldClearQuery) {\n      onQueryTrigger(eventValue);\n    }\n  };\n\n  // Debounce the input value changes until the user stops typing\n  // to trigger the `query` param setter\n  function handleKeyUp() {\n    if (debounceTimer.current) {\n      clearTimeout(debounceTimer.current);\n    }\n\n    debounceTimer.current = setTimeout(() => {\n      onQueryTrigger(value.trim());\n    }, membersSearchDebounceMs);\n  }\n\n  // If search is not performed on a initial page, resets pagination offset\n  // based on the response count\n  useEffect(() => {\n    if (!query || !memberships?.data) {\n      return;\n    }\n\n    const hasOnePageLeft = (memberships?.count ?? 0) <= ACTIVE_MEMBERS_PAGE_SIZE;\n    if (hasOnePageLeft) {\n      memberships?.fetchPage?.(1);\n    }\n  }, [query, memberships]);\n\n  const isFetchingNewData = value && !!memberships?.isLoading && !!memberships.data?.length;\n\n  return (\n    <Animated asChild>\n      <Flex\n        sx={{\n          width: '50%',\n          [mqu.sm]: {\n            width: 'auto',\n          },\n        }}\n      >\n        <InputWithIcon\n          value={value}\n          type='search'\n          autoCapitalize='none'\n          spellCheck={false}\n          aria-label='Search'\n          placeholder={t(localizationKeys('organizationProfile.membersPage.action__search'))}\n          leftIcon={\n            isFetchingNewData ? (\n              <Spinner size='xs' />\n            ) : (\n              <Icon\n                icon={MagnifyingGlass}\n                elementDescriptor={descriptors.organizationProfileMembersSearchInputIcon}\n                sx={t => ({ color: t.colors.$colorMutedForeground })}\n              />\n            )\n          }\n          onKeyUp={handleKeyUp}\n          onChange={handleChange}\n          elementDescriptor={descriptors.organizationProfileMembersSearchInput}\n        />\n      </Flex>\n    </Animated>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;AAoCA,MAAM,0BAA0B;AAEhC,MAAa,iBAAiB,EAAE,OAAO,OAAO,aAAa,gBAAgB,qBAAyC;CAClH,MAAM,EAAE,MAAM,kBAAkB;CAEhC,MAAM,gBAAgB,OAA6C,KAAK;CAExE,MAAM,gBAAgB,UAA+C;EACnE,MAAM,aAAa,MAAM,OAAO;AAChC,iBAAe,WAAW;AAG1B,MADyB,eAAe,GAEtC,gBAAe,WAAW;;CAM9B,SAAS,cAAc;AACrB,MAAI,cAAc,QAChB,cAAa,cAAc,QAAQ;AAGrC,gBAAc,UAAU,iBAAiB;AACvC,kBAAe,MAAM,MAAM,CAAC;KAC3B,wBAAwB;;AAK7B,iBAAgB;AACd,MAAI,CAAC,SAAS,CAAC,aAAa,KAC1B;AAIF,OADwB,aAAa,SAAS,MAAM,yBAElD,cAAa,YAAY,EAAE;IAE5B,CAAC,OAAO,YAAY,CAAC;CAExB,MAAM,oBAAoB,SAAS,CAAC,CAAC,aAAa,aAAa,CAAC,CAAC,YAAY,MAAM;AAEnF,QACE,oBAAC;EAAS;YACR,oBAAC;GACC,IAAI;IACF,OAAO;KACN,IAAI,KAAK,EACR,OAAO,QACR;IACF;aAED,oBAAC;IACQ;IACP,MAAK;IACL,gBAAe;IACf,YAAY;IACZ,cAAW;IACX,aAAa,EAAE,iBAAiB,iDAAiD,CAAC;IAClF,UACE,oBACE,oBAAC,WAAQ,MAAK,OAAO,GAErB,oBAAC;KACC,MAAMA;KACN,mBAAmB,YAAY;KAC/B,KAAI,SAAM,EAAE,OAAOC,IAAE,OAAO,uBAAuB;MACnD;IAGN,SAAS;IACT,UAAU;IACV,mBAAmB,YAAY;KAC/B;IACG;GACE"}

package/dist/components/OrganizationProfile/OrganizationMembers.js.map

@@ -1 +1 @@
-{"version":3,"file":"OrganizationMembers.js","names":["query"],"sources":["../../../src/components/OrganizationProfile/OrganizationMembers.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\nimport { useState } from 'react';\n\nimport { Animated } from '@/ui/elements/Animated';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Header } from '@/ui/elements/Header';\nimport { Tab, TabPanel, TabPanels, Tabs, TabsList } from '@/ui/elements/Tabs';\n\nimport { NotificationCountBadge, useProtect } from '../../common';\nimport { useEnvironment, useOrganizationProfileContext } from '../../contexts';\nimport { Col, descriptors, Flex, localizationKeys } from '../../customizables';\nimport { Action } from '../../elements/Action';\nimport { mqu } from '../../styledSystem';\nimport { ActiveMembersList } from './ActiveMembersList';\nimport { MembersActionsRow } from './MembersActions';\nimport { MembersSearch } from './MembersSearch';\nimport { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';\nimport { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';\n\nexport const ACTIVE_MEMBERS_PAGE_SIZE = 10;\n\nexport const OrganizationMembers = withCardStateProvider(() => {\n  const { organizationSettings } = useEnvironment();\n  const card = useCardState();\n  const canManageMemberships = useProtect({ permission: 'org:sys_memberships:manage' });\n  const canReadMemberships = useProtect({ permission: 'org:sys_memberships:read' });\n  const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;\n\n  const [query, setQuery] = useState('');\n  const [search, setSearch] = useState('');\n\n  const { membershipRequests, memberships, invitations } = useOrganization({\n    membershipRequests: isDomainsEnabled || undefined,\n    invitations: canManageMemberships || undefined,\n    memberships: canReadMemberships\n      ? {\n          keepPreviousData: true,\n          query: query || undefined,\n        }\n      : undefined,\n  });\n\n  if (canManageMemberships === null) {\n    return null;\n  }\n\n  return (\n    <Col\n      elementDescriptor={descriptors.page}\n      gap={2}\n    >\n      <Col\n        elementDescriptor={descriptors.profilePage}\n        elementId={descriptors.profilePage.setId('organizationMembers')}\n        gap={4}\n      >\n        <Action.Root animate={false}>\n          <Animated asChild>\n            <Header.Root\n              contentSx={{\n                [mqu.md]: {\n                  flexDirection: 'row',\n                  width: '100%',\n                  justifyContent: 'space-between',\n                },\n              }}\n            >\n              <Header.Title\n                localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')}\n                textVariant='h2'\n              />\n            </Header.Root>\n          </Animated>\n          <Card.Alert>{card.error}</Card.Alert>\n          <Tabs>\n            <TabsList sx={t => ({ gap: t.space.$2 })}>\n              {canReadMemberships && (\n                <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__members')}>\n                  {!!memberships?.count && (\n                    <NotificationCountBadge\n                      shouldAnimate={!query}\n                      notificationCount={memberships.count}\n                      colorScheme='outline'\n                    />\n                  )}\n                </Tab>\n              )}\n              {canManageMemberships && (\n                <Tab\n                  localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__invitations')}\n                >\n                  {invitations?.data && !invitations.isLoading && (\n                    <NotificationCountBadge\n                      notificationCount={invitations.count}\n                      colorScheme='outline'\n                    />\n                  )}\n                </Tab>\n              )}\n              {canManageMemberships && isDomainsEnabled && (\n                <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__requests')}>\n                  {membershipRequests?.data && !membershipRequests.isLoading && (\n                    <NotificationCountBadge\n                      notificationCount={membershipRequests.count}\n                      colorScheme='outline'\n                    />\n                  )}\n                </Tab>\n              )}\n            </TabsList>\n            <TabPanels>\n              {canReadMemberships && (\n                <TabPanel sx={{ width: '100%' }}>\n                  <Flex\n                    gap={4}\n                    direction='col'\n                    sx={{\n                      width: '100%',\n                    }}\n                  >\n                    <Flex\n                      gap={2}\n                      direction='col'\n                      sx={{\n                        width: '100%',\n                      }}\n                    >\n                      <MembersActionsRow\n                        actionSlot={\n                          <MembersSearch\n                            query={query}\n                            value={search}\n                            memberships={memberships}\n                            onSearchChange={query => setSearch(query)}\n                            onQueryTrigger={query => setQuery(query)}\n                          />\n                        }\n                      />\n                      <ActiveMembersList\n                        pageSize={ACTIVE_MEMBERS_PAGE_SIZE}\n                        memberships={memberships}\n                      />\n                    </Flex>\n                  </Flex>\n                </TabPanel>\n              )}\n              {canManageMemberships && (\n                <TabPanel sx={{ width: '100%' }}>\n                  <OrganizationMembersTabInvitations />\n                </TabPanel>\n              )}\n              {canManageMemberships && isDomainsEnabled && (\n                <TabPanel sx={{ width: '100%' }}>\n                  <OrganizationMembersTabRequests />\n                </TabPanel>\n              )}\n            </TabPanels>\n          </Tabs>\n        </Action.Root>\n      </Col>\n    </Col>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,2BAA2B;AAExC,MAAa,sBAAsB,4BAA4B;CAC7D,MAAM,EAAE,yBAAyB,gBAAgB;CACjD,MAAM,OAAO,cAAc;CAC3B,MAAM,uBAAuB,WAAW,EAAE,YAAY,8BAA8B,CAAC;CACrF,MAAM,qBAAqB,WAAW,EAAE,YAAY,4BAA4B,CAAC;CACjF,MAAM,mBAAmB,sBAAsB,SAAS,WAAW;CAEnE,MAAM,CAAC,OAAO,YAAY,SAAS,GAAG;CACtC,MAAM,CAAC,QAAQ,aAAa,SAAS,GAAG;CAExC,MAAM,EAAE,oBAAoB,aAAa,gBAAgB,gBAAgB;EACvE,oBAAoB,oBAAoB;EACxC,aAAa,wBAAwB;EACrC,aAAa,qBACT;GACE,kBAAkB;GAClB,OAAO,SAAS;GACjB,GACD;EACL,CAAC;AAEF,KAAI,yBAAyB,KAC3B,QAAO;AAGT,QACE,oBAAC;EACC,mBAAmB,YAAY;EAC/B,KAAK;YAEL,oBAAC;GACC,mBAAmB,YAAY;GAC/B,WAAW,YAAY,YAAY,MAAM,sBAAsB;GAC/D,KAAK;aAEL,qBAAC,OAAO;IAAK,SAAS;;KACpB,oBAAC;MAAS;gBACR,oBAAC,OAAO;OACN,WAAW,GACR,IAAI,KAAK;QACR,eAAe;QACf,OAAO;QACP,gBAAgB;QACjB,EACF;iBAED,oBAAC,OAAO;QACN,iBAAiB,iBAAiB,iDAAiD;QACnF,aAAY;SACZ;QACU;OACL;KACX,oBAAC,KAAK,mBAAO,KAAK,QAAmB;KACrC,qBAAC,mBACC,qBAAC;MAAS,KAAI,OAAM,EAAE,KAAK,EAAE,MAAM,IAAI;;OACpC,sBACC,oBAAC;QAAI,iBAAiB,iBAAiB,6DAA6D;kBACjG,CAAC,CAAC,aAAa,SACd,oBAAC;SACC,eAAe,CAAC;SAChB,mBAAmB,YAAY;SAC/B,aAAY;UACZ;SAEA;OAEP,wBACC,oBAAC;QACC,iBAAiB,iBAAiB,iEAAiE;kBAElG,aAAa,QAAQ,CAAC,YAAY,aACjC,oBAAC;SACC,mBAAmB,YAAY;SAC/B,aAAY;UACZ;SAEA;OAEP,wBAAwB,oBACvB,oBAAC;QAAI,iBAAiB,iBAAiB,8DAA8D;kBAClG,oBAAoB,QAAQ,CAAC,mBAAmB,aAC/C,oBAAC;SACC,mBAAmB,mBAAmB;SACtC,aAAY;UACZ;SAEA;;OAEC,EACX,qBAAC;MACE,sBACC,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC;QACC,KAAK;QACL,WAAU;QACV,IAAI,EACF,OAAO,QACR;kBAED,qBAAC;SACC,KAAK;SACL,WAAU;SACV,IAAI,EACF,OAAO,QACR;oBAED,oBAAC,qBACC,YACE,oBAAC;UACQ;UACP,OAAO;UACM;UACb,iBAAgB,YAAS,UAAUA,QAAM;UACzC,iBAAgB,YAAS,SAASA,QAAM;WACxC,GAEJ,EACF,oBAAC;UACC,UAAU;UACG;WACb;UACG;SACF;QACE;MAEZ,wBACC,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,sCAAoC;QAC5B;MAEZ,wBAAwB,oBACvB,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,mCAAiC;QACzB;SAEH,IACP;;KACK;IACV;GACF;EAER"}
+{"version":3,"file":"OrganizationMembers.js","names":["query"],"sources":["../../../src/components/OrganizationProfile/OrganizationMembers.tsx"],"sourcesContent":["import { useOrganization } from '@clerk/shared/react';\nimport { useState } from 'react';\n\nimport { Animated } from '@/ui/elements/Animated';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Header } from '@/ui/elements/Header';\nimport { Tab, TabPanel, TabPanels, Tabs, TabsList } from '@/ui/elements/Tabs';\n\nimport { NotificationCountBadge, useProtect } from '../../common';\nimport { useEnvironment } from '../../contexts';\nimport { Col, descriptors, Flex, localizationKeys } from '../../customizables';\nimport { Action } from '../../elements/Action';\nimport { mqu } from '../../styledSystem';\nimport { ActiveMembersList } from './ActiveMembersList';\nimport { MembersActionsRow } from './MembersActions';\nimport { MembersSearch } from './MembersSearch';\nimport { OrganizationMembersTabInvitations } from './OrganizationMembersTabInvitations';\nimport { OrganizationMembersTabRequests } from './OrganizationMembersTabRequests';\n\nexport const ACTIVE_MEMBERS_PAGE_SIZE = 10;\n\nexport const OrganizationMembers = withCardStateProvider(() => {\n  const { organizationSettings } = useEnvironment();\n  const card = useCardState();\n  const canManageMemberships = useProtect({ permission: 'org:sys_memberships:manage' });\n  const canReadMemberships = useProtect({ permission: 'org:sys_memberships:read' });\n  const isDomainsEnabled = organizationSettings?.domains?.enabled && canManageMemberships;\n\n  const [query, setQuery] = useState('');\n  const [search, setSearch] = useState('');\n\n  const { membershipRequests, memberships, invitations } = useOrganization({\n    membershipRequests: isDomainsEnabled || undefined,\n    invitations: canManageMemberships || undefined,\n    memberships: canReadMemberships\n      ? {\n          keepPreviousData: true,\n          query: query || undefined,\n        }\n      : undefined,\n  });\n\n  if (canManageMemberships === null) {\n    return null;\n  }\n\n  return (\n    <Col\n      elementDescriptor={descriptors.page}\n      gap={2}\n    >\n      <Col\n        elementDescriptor={descriptors.profilePage}\n        elementId={descriptors.profilePage.setId('organizationMembers')}\n        gap={4}\n      >\n        <Action.Root animate={false}>\n          <Animated asChild>\n            <Header.Root\n              contentSx={{\n                [mqu.md]: {\n                  flexDirection: 'row',\n                  width: '100%',\n                  justifyContent: 'space-between',\n                },\n              }}\n            >\n              <Header.Title\n                localizationKey={localizationKeys('organizationProfile.start.headerTitle__members')}\n                textVariant='h2'\n              />\n            </Header.Root>\n          </Animated>\n          <Card.Alert>{card.error}</Card.Alert>\n          <Tabs>\n            <TabsList sx={t => ({ gap: t.space.$2 })}>\n              {canReadMemberships && (\n                <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__members')}>\n                  {!!memberships?.count && (\n                    <NotificationCountBadge\n                      shouldAnimate={!query}\n                      notificationCount={memberships.count}\n                      colorScheme='outline'\n                    />\n                  )}\n                </Tab>\n              )}\n              {canManageMemberships && (\n                <Tab\n                  localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__invitations')}\n                >\n                  {invitations?.data && !invitations.isLoading && (\n                    <NotificationCountBadge\n                      notificationCount={invitations.count}\n                      colorScheme='outline'\n                    />\n                  )}\n                </Tab>\n              )}\n              {canManageMemberships && isDomainsEnabled && (\n                <Tab localizationKey={localizationKeys('organizationProfile.membersPage.start.headerTitle__requests')}>\n                  {membershipRequests?.data && !membershipRequests.isLoading && (\n                    <NotificationCountBadge\n                      notificationCount={membershipRequests.count}\n                      colorScheme='outline'\n                    />\n                  )}\n                </Tab>\n              )}\n            </TabsList>\n            <TabPanels>\n              {canReadMemberships && (\n                <TabPanel sx={{ width: '100%' }}>\n                  <Flex\n                    gap={4}\n                    direction='col'\n                    sx={{\n                      width: '100%',\n                    }}\n                  >\n                    <Flex\n                      gap={2}\n                      direction='col'\n                      sx={{\n                        width: '100%',\n                      }}\n                    >\n                      <MembersActionsRow\n                        actionSlot={\n                          <MembersSearch\n                            query={query}\n                            value={search}\n                            memberships={memberships}\n                            onSearchChange={query => setSearch(query)}\n                            onQueryTrigger={query => setQuery(query)}\n                          />\n                        }\n                      />\n                      <ActiveMembersList\n                        pageSize={ACTIVE_MEMBERS_PAGE_SIZE}\n                        memberships={memberships}\n                      />\n                    </Flex>\n                  </Flex>\n                </TabPanel>\n              )}\n              {canManageMemberships && (\n                <TabPanel sx={{ width: '100%' }}>\n                  <OrganizationMembersTabInvitations />\n                </TabPanel>\n              )}\n              {canManageMemberships && isDomainsEnabled && (\n                <TabPanel sx={{ width: '100%' }}>\n                  <OrganizationMembersTabRequests />\n                </TabPanel>\n              )}\n            </TabPanels>\n          </Tabs>\n        </Action.Root>\n      </Col>\n    </Col>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,2BAA2B;AAExC,MAAa,sBAAsB,4BAA4B;CAC7D,MAAM,EAAE,yBAAyB,gBAAgB;CACjD,MAAM,OAAO,cAAc;CAC3B,MAAM,uBAAuB,WAAW,EAAE,YAAY,8BAA8B,CAAC;CACrF,MAAM,qBAAqB,WAAW,EAAE,YAAY,4BAA4B,CAAC;CACjF,MAAM,mBAAmB,sBAAsB,SAAS,WAAW;CAEnE,MAAM,CAAC,OAAO,YAAY,SAAS,GAAG;CACtC,MAAM,CAAC,QAAQ,aAAa,SAAS,GAAG;CAExC,MAAM,EAAE,oBAAoB,aAAa,gBAAgB,gBAAgB;EACvE,oBAAoB,oBAAoB;EACxC,aAAa,wBAAwB;EACrC,aAAa,qBACT;GACE,kBAAkB;GAClB,OAAO,SAAS;GACjB,GACD;EACL,CAAC;AAEF,KAAI,yBAAyB,KAC3B,QAAO;AAGT,QACE,oBAAC;EACC,mBAAmB,YAAY;EAC/B,KAAK;YAEL,oBAAC;GACC,mBAAmB,YAAY;GAC/B,WAAW,YAAY,YAAY,MAAM,sBAAsB;GAC/D,KAAK;aAEL,qBAAC,OAAO;IAAK,SAAS;;KACpB,oBAAC;MAAS;gBACR,oBAAC,OAAO;OACN,WAAW,GACR,IAAI,KAAK;QACR,eAAe;QACf,OAAO;QACP,gBAAgB;QACjB,EACF;iBAED,oBAAC,OAAO;QACN,iBAAiB,iBAAiB,iDAAiD;QACnF,aAAY;SACZ;QACU;OACL;KACX,oBAAC,KAAK,mBAAO,KAAK,QAAmB;KACrC,qBAAC,mBACC,qBAAC;MAAS,KAAI,OAAM,EAAE,KAAK,EAAE,MAAM,IAAI;;OACpC,sBACC,oBAAC;QAAI,iBAAiB,iBAAiB,6DAA6D;kBACjG,CAAC,CAAC,aAAa,SACd,oBAAC;SACC,eAAe,CAAC;SAChB,mBAAmB,YAAY;SAC/B,aAAY;UACZ;SAEA;OAEP,wBACC,oBAAC;QACC,iBAAiB,iBAAiB,iEAAiE;kBAElG,aAAa,QAAQ,CAAC,YAAY,aACjC,oBAAC;SACC,mBAAmB,YAAY;SAC/B,aAAY;UACZ;SAEA;OAEP,wBAAwB,oBACvB,oBAAC;QAAI,iBAAiB,iBAAiB,8DAA8D;kBAClG,oBAAoB,QAAQ,CAAC,mBAAmB,aAC/C,oBAAC;SACC,mBAAmB,mBAAmB;SACtC,aAAY;UACZ;SAEA;;OAEC,EACX,qBAAC;MACE,sBACC,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC;QACC,KAAK;QACL,WAAU;QACV,IAAI,EACF,OAAO,QACR;kBAED,qBAAC;SACC,KAAK;SACL,WAAU;SACV,IAAI,EACF,OAAO,QACR;oBAED,oBAAC,qBACC,YACE,oBAAC;UACQ;UACP,OAAO;UACM;UACb,iBAAgB,YAAS,UAAUA,QAAM;UACzC,iBAAgB,YAAS,SAASA,QAAM;WACxC,GAEJ,EACF,oBAAC;UACC,UAAU;UACG;WACb;UACG;SACF;QACE;MAEZ,wBACC,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,sCAAoC;QAC5B;MAEZ,wBAAwB,oBACvB,oBAAC;OAAS,IAAI,EAAE,OAAO,QAAQ;iBAC7B,oBAAC,mCAAiC;QACzB;SAEH,IACP;;KACK;IACV;GACF;EAER"}

package/dist/components/PaymentMethods/PaymentMethods.js

@@ -70,7 +70,6 @@ const PaymentMethods = withCardStateProvider(() => {
 	const { data: paymentMethods, isLoading, revalidate: revalidatePaymentMethods } = usePaymentMethods();
 	const sortedPaymentMethods = useMemo(() => paymentMethods.sort((a, b) => a.isDefault && !b.isDefault ? -1 : 1), [paymentMethods]);
 	if (!resource) return null;
-	if (__BUILD_DISABLE_RHC__ && sortedPaymentMethods.length === 0) return null;
 	return /* @__PURE__ */ jsx(ProfileSection.Root, {
 		title: localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.title`),
 		centered: false,
@@ -99,7 +98,7 @@ const PaymentMethods = withCardStateProvider(() => {
 						revalidate: revalidatePaymentMethods
 					})
 				})
-			})] }, paymentMethod.id)), __BUILD_DISABLE_RHC__ ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Action.Trigger, {
+			})] }, paymentMethod.id)), /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Action.Trigger, {
 				value: "add",
 				children: /* @__PURE__ */ jsx(ProfileSection.ArrowButton, {
 					id: "paymentMethods",

package/dist/components/PaymentMethods/PaymentMethods.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentMethods.js","names":["AddPaymentMethod.Root","AddPaymentMethod.FormHeader","AddPaymentMethod.FormSubtitle"],"sources":["../../../src/components/PaymentMethods/PaymentMethods.tsx"],"sourcesContent":["import { useClerk, useOrganizationContext } from '@clerk/shared/react';\nimport type { BillingPaymentMethodResource } from '@clerk/shared/types';\nimport { Fragment, useMemo, useRef } from 'react';\n\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { FullHeightLoader } from '@/ui/elements/FullHeightLoader';\nimport { ProfileSection } from '@/ui/elements/Section';\nimport { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';\nimport { handleError } from '@/ui/utils/errorHandler';\n\nimport { RemoveResourceForm } from '../../common';\nimport { DevOnly } from '../../common/DevOnly';\nimport { usePaymentMethods, useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from '../../contexts';\nimport { localizationKeys } from '../../customizables';\nimport { Action } from '../../elements/Action';\nimport { useActionContext } from '../../elements/Action/ActionRoot';\nimport * as AddPaymentMethod from './AddPaymentMethod';\nimport { PaymentMethodRow } from './PaymentMethodRow';\nimport { TestPaymentMethod } from './TestPaymentMethod';\n\nconst AddScreen = withCardStateProvider(({ onSuccess }: { onSuccess: () => void }) => {\n  const { close } = useActionContext();\n  const clerk = useClerk();\n  const subscriberType = useSubscriberTypeContext();\n  const localizationRoot = useSubscriberTypeLocalizationRoot();\n\n  const onAddPaymentMethodSuccess = async (context: { gateway: 'stripe'; paymentToken: string }) => {\n    const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;\n    await resource?.addPaymentMethod(context);\n    onSuccess();\n    close();\n    return Promise.resolve();\n  };\n\n  return (\n    <AddPaymentMethod.Root\n      onSuccess={onAddPaymentMethodSuccess}\n      cancelAction={close}\n    >\n      <AddPaymentMethod.FormHeader\n        text={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.add`)}\n      />\n      <AddPaymentMethod.FormSubtitle\n        text={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.addSubtitle`)}\n      />\n      <DevOnly>\n        <TestPaymentMethod />\n      </DevOnly>\n    </AddPaymentMethod.Root>\n  );\n});\n\nconst RemoveScreen = ({\n  paymentMethod,\n  revalidate,\n}: {\n  paymentMethod: BillingPaymentMethodResource;\n  revalidate: () => void;\n}) => {\n  const { close } = useActionContext();\n  const card = useCardState();\n  const subscriberType = useSubscriberTypeContext();\n  const localizationRoot = useSubscriberTypeLocalizationRoot();\n  const ref = useRef(\n    `${paymentMethod.paymentType === 'card' ? paymentMethod.cardType : paymentMethod.paymentType} ${paymentMethod.paymentType === 'card' ? `⋯ ${paymentMethod.last4}` : '-'}`,\n  );\n  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance\n  const organizationCtx = useOrganizationContext();\n\n  if (!ref.current) {\n    return null;\n  }\n\n  const removePaymentMethod = async () => {\n    await paymentMethod\n      .remove({ orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined })\n      .then(revalidate)\n      .catch((error: any) => {\n        handleError(error, [], card.setError);\n      });\n  };\n\n  return (\n    <RemoveResourceForm\n      title={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.title`)}\n      messageLine1={localizationKeys(\n        `${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.messageLine1`,\n        {\n          identifier: ref.current,\n        },\n      )}\n      messageLine2={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.messageLine2`)}\n      successMessage={localizationKeys(\n        `${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.successMessage`,\n        {\n          paymentMethod: ref.current,\n        },\n      )}\n      deleteResource={removePaymentMethod}\n      onSuccess={close}\n      onReset={close}\n    />\n  );\n};\n\nexport const PaymentMethods = withCardStateProvider(() => {\n  const clerk = useClerk();\n  const subscriberType = useSubscriberTypeContext();\n  const localizationRoot = useSubscriberTypeLocalizationRoot();\n  const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;\n\n  const { data: paymentMethods, isLoading, revalidate: revalidatePaymentMethods } = usePaymentMethods();\n\n  const sortedPaymentMethods = useMemo(\n    () => paymentMethods.sort((a, b) => (a.isDefault && !b.isDefault ? -1 : 1)),\n    [paymentMethods],\n  );\n\n  if (!resource) {\n    return null;\n  }\n\n  if (__BUILD_DISABLE_RHC__ && sortedPaymentMethods.length === 0) {\n    return null;\n  }\n\n  return (\n    <ProfileSection.Root\n      title={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.title`)}\n      centered={false}\n      id='paymentMethods'\n      sx={t => ({\n        flex: 1,\n        borderTopWidth: t.borderWidths.$normal,\n        borderTopStyle: t.borderStyles.$solid,\n        borderTopColor: t.colors.$borderAlpha100,\n      })}\n    >\n      <Action.Root>\n        <ProfileSection.ItemList\n          id='paymentMethods'\n          disableAnimation\n        >\n          {isLoading ? (\n            <FullHeightLoader />\n          ) : (\n            <>\n              {sortedPaymentMethods.map(paymentMethod => (\n                <Fragment key={paymentMethod.id}>\n                  <ProfileSection.Item id='paymentMethods'>\n                    <PaymentMethodRow paymentMethod={paymentMethod} />\n                    <PaymentMethodMenu\n                      paymentMethod={paymentMethod}\n                      revalidate={revalidatePaymentMethods}\n                    />\n                  </ProfileSection.Item>\n\n                  <Action.Open value={`remove-${paymentMethod.id}`}>\n                    <Action.Card variant='destructive'>\n                      <RemoveScreen\n                        paymentMethod={paymentMethod}\n                        revalidate={revalidatePaymentMethods}\n                      />\n                    </Action.Card>\n                  </Action.Open>\n                </Fragment>\n              ))}\n              {__BUILD_DISABLE_RHC__ ? null : (\n                <>\n                  <Action.Trigger value='add'>\n                    <ProfileSection.ArrowButton\n                      id='paymentMethods'\n                      localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.add`)}\n                    />\n                  </Action.Trigger>\n                  <Action.Open value='add'>\n                    <Action.Card>\n                      <AddScreen onSuccess={revalidatePaymentMethods} />\n                    </Action.Card>\n                  </Action.Open>\n                </>\n              )}\n            </>\n          )}\n        </ProfileSection.ItemList>\n      </Action.Root>\n    </ProfileSection.Root>\n  );\n});\n\nconst PaymentMethodMenu = ({\n  paymentMethod,\n  revalidate,\n}: {\n  paymentMethod: BillingPaymentMethodResource;\n  revalidate: () => void;\n}) => {\n  const { open } = useActionContext();\n  const card = useCardState();\n  const subscriberType = useSubscriberTypeContext();\n  const localizationRoot = useSubscriberTypeLocalizationRoot();\n  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance\n  const organizationCtx = useOrganizationContext();\n\n  const actions = [\n    {\n      label: localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.actionLabel__remove`),\n      isDestructive: true,\n      onClick: () => open(`remove-${paymentMethod.id}`),\n      isDisabled: !paymentMethod.isRemovable,\n    },\n  ];\n\n  if (!paymentMethod.isDefault) {\n    actions.unshift({\n      label: localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.actionLabel__default`),\n      isDestructive: false,\n      onClick: () => {\n        paymentMethod\n          .makeDefault({ orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined })\n          .then(revalidate)\n          .catch((error: Error) => {\n            handleError(error, [], card.setError);\n          });\n      },\n      isDisabled: false,\n    });\n  }\n\n  return <ThreeDotsMenu actions={actions} />;\n};\n"],"mappings":"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"}
+{"version":3,"file":"PaymentMethods.js","names":["AddPaymentMethod.Root","AddPaymentMethod.FormHeader","AddPaymentMethod.FormSubtitle"],"sources":["../../../src/components/PaymentMethods/PaymentMethods.tsx"],"sourcesContent":["import { useClerk, useOrganizationContext } from '@clerk/shared/react';\nimport type { BillingPaymentMethodResource } from '@clerk/shared/types';\nimport { Fragment, useMemo, useRef } from 'react';\n\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { FullHeightLoader } from '@/ui/elements/FullHeightLoader';\nimport { ProfileSection } from '@/ui/elements/Section';\nimport { ThreeDotsMenu } from '@/ui/elements/ThreeDotsMenu';\nimport { handleError } from '@/ui/utils/errorHandler';\n\nimport { RemoveResourceForm } from '../../common';\nimport { DevOnly } from '../../common/DevOnly';\nimport { usePaymentMethods, useSubscriberTypeContext, useSubscriberTypeLocalizationRoot } from '../../contexts';\nimport { localizationKeys } from '../../customizables';\nimport { Action } from '../../elements/Action';\nimport { useActionContext } from '../../elements/Action/ActionRoot';\nimport * as AddPaymentMethod from './AddPaymentMethod';\nimport { PaymentMethodRow } from './PaymentMethodRow';\nimport { TestPaymentMethod } from './TestPaymentMethod';\n\nconst AddScreen = withCardStateProvider(({ onSuccess }: { onSuccess: () => void }) => {\n  const { close } = useActionContext();\n  const clerk = useClerk();\n  const subscriberType = useSubscriberTypeContext();\n  const localizationRoot = useSubscriberTypeLocalizationRoot();\n\n  const onAddPaymentMethodSuccess = async (context: { gateway: 'stripe'; paymentToken: string }) => {\n    const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;\n    await resource?.addPaymentMethod(context);\n    onSuccess();\n    close();\n    return Promise.resolve();\n  };\n\n  return (\n    <AddPaymentMethod.Root\n      onSuccess={onAddPaymentMethodSuccess}\n      cancelAction={close}\n    >\n      <AddPaymentMethod.FormHeader\n        text={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.add`)}\n      />\n      <AddPaymentMethod.FormSubtitle\n        text={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.addSubtitle`)}\n      />\n      <DevOnly>\n        <TestPaymentMethod />\n      </DevOnly>\n    </AddPaymentMethod.Root>\n  );\n});\n\nconst RemoveScreen = ({\n  paymentMethod,\n  revalidate,\n}: {\n  paymentMethod: BillingPaymentMethodResource;\n  revalidate: () => void;\n}) => {\n  const { close } = useActionContext();\n  const card = useCardState();\n  const subscriberType = useSubscriberTypeContext();\n  const localizationRoot = useSubscriberTypeLocalizationRoot();\n  const ref = useRef(\n    `${paymentMethod.paymentType === 'card' ? paymentMethod.cardType : paymentMethod.paymentType} ${paymentMethod.paymentType === 'card' ? `⋯ ${paymentMethod.last4}` : '-'}`,\n  );\n  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance\n  const organizationCtx = useOrganizationContext();\n\n  if (!ref.current) {\n    return null;\n  }\n\n  const removePaymentMethod = async () => {\n    await paymentMethod\n      .remove({ orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined })\n      .then(revalidate)\n      .catch((error: any) => {\n        handleError(error, [], card.setError);\n      });\n  };\n\n  return (\n    <RemoveResourceForm\n      title={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.title`)}\n      messageLine1={localizationKeys(\n        `${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.messageLine1`,\n        {\n          identifier: ref.current,\n        },\n      )}\n      messageLine2={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.messageLine2`)}\n      successMessage={localizationKeys(\n        `${localizationRoot}.billingPage.paymentMethodsSection.removeMethod.successMessage`,\n        {\n          paymentMethod: ref.current,\n        },\n      )}\n      deleteResource={removePaymentMethod}\n      onSuccess={close}\n      onReset={close}\n    />\n  );\n};\n\nexport const PaymentMethods = withCardStateProvider(() => {\n  const clerk = useClerk();\n  const subscriberType = useSubscriberTypeContext();\n  const localizationRoot = useSubscriberTypeLocalizationRoot();\n  const resource = subscriberType === 'organization' ? clerk?.organization : clerk.user;\n\n  const { data: paymentMethods, isLoading, revalidate: revalidatePaymentMethods } = usePaymentMethods();\n\n  const sortedPaymentMethods = useMemo(\n    () => paymentMethods.sort((a, b) => (a.isDefault && !b.isDefault ? -1 : 1)),\n    [paymentMethods],\n  );\n\n  if (!resource) {\n    return null;\n  }\n\n  if (__BUILD_DISABLE_RHC__ && sortedPaymentMethods.length === 0) {\n    return null;\n  }\n\n  return (\n    <ProfileSection.Root\n      title={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.title`)}\n      centered={false}\n      id='paymentMethods'\n      sx={t => ({\n        flex: 1,\n        borderTopWidth: t.borderWidths.$normal,\n        borderTopStyle: t.borderStyles.$solid,\n        borderTopColor: t.colors.$borderAlpha100,\n      })}\n    >\n      <Action.Root>\n        <ProfileSection.ItemList\n          id='paymentMethods'\n          disableAnimation\n        >\n          {isLoading ? (\n            <FullHeightLoader />\n          ) : (\n            <>\n              {sortedPaymentMethods.map(paymentMethod => (\n                <Fragment key={paymentMethod.id}>\n                  <ProfileSection.Item id='paymentMethods'>\n                    <PaymentMethodRow paymentMethod={paymentMethod} />\n                    <PaymentMethodMenu\n                      paymentMethod={paymentMethod}\n                      revalidate={revalidatePaymentMethods}\n                    />\n                  </ProfileSection.Item>\n\n                  <Action.Open value={`remove-${paymentMethod.id}`}>\n                    <Action.Card variant='destructive'>\n                      <RemoveScreen\n                        paymentMethod={paymentMethod}\n                        revalidate={revalidatePaymentMethods}\n                      />\n                    </Action.Card>\n                  </Action.Open>\n                </Fragment>\n              ))}\n              {__BUILD_DISABLE_RHC__ ? null : (\n                <>\n                  <Action.Trigger value='add'>\n                    <ProfileSection.ArrowButton\n                      id='paymentMethods'\n                      localizationKey={localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.add`)}\n                    />\n                  </Action.Trigger>\n                  <Action.Open value='add'>\n                    <Action.Card>\n                      <AddScreen onSuccess={revalidatePaymentMethods} />\n                    </Action.Card>\n                  </Action.Open>\n                </>\n              )}\n            </>\n          )}\n        </ProfileSection.ItemList>\n      </Action.Root>\n    </ProfileSection.Root>\n  );\n});\n\nconst PaymentMethodMenu = ({\n  paymentMethod,\n  revalidate,\n}: {\n  paymentMethod: BillingPaymentMethodResource;\n  revalidate: () => void;\n}) => {\n  const { open } = useActionContext();\n  const card = useCardState();\n  const subscriberType = useSubscriberTypeContext();\n  const localizationRoot = useSubscriberTypeLocalizationRoot();\n  // Do not use `useOrganization` to avoid triggering the in-app enable organizations prompt in development instance\n  const organizationCtx = useOrganizationContext();\n\n  const actions = [\n    {\n      label: localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.actionLabel__remove`),\n      isDestructive: true,\n      onClick: () => open(`remove-${paymentMethod.id}`),\n      isDisabled: !paymentMethod.isRemovable,\n    },\n  ];\n\n  if (!paymentMethod.isDefault) {\n    actions.unshift({\n      label: localizationKeys(`${localizationRoot}.billingPage.paymentMethodsSection.actionLabel__default`),\n      isDestructive: false,\n      onClick: () => {\n        paymentMethod\n          .makeDefault({ orgId: subscriberType === 'organization' ? organizationCtx?.organization?.id : undefined })\n          .then(revalidate)\n          .catch((error: Error) => {\n            handleError(error, [], card.setError);\n          });\n      },\n      isDisabled: false,\n    });\n  }\n\n  return <ThreeDotsMenu actions={actions} />;\n};\n"],"mappings":"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"}

package/dist/components/PricingTable/PricingTableMatrix.js

@@ -19,7 +19,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/PricingTable/PricingTableMatrix.tsx
 function PricingTableMatrix({ plans = [], planPeriod, setPlanPeriod, onSelect, highlightedPlan }) {
 	const prefersReducedMotion = usePrefersReducedMotion();
-	const { animations: layoutAnimations } = useAppearance().parsedLayout;
+	const { animations: layoutAnimations } = useAppearance().parsedOptions;
 	const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;
 	const segmentedControlId = `${React$1.useId()}-segmented-control`;
 	const { buttonPropsForPlan } = usePlansContext();

package/dist/components/PricingTable/PricingTableMatrix.js.map

@@ -1 +1 @@
-{"version":3,"file":"PricingTableMatrix.js","names":["React","feePeriodNoticeAnimation: ThemableCssProp","t","highlightBackgroundColor: ThemableCssProp","InformationCircle","Check"],"sources":["../../../src/components/PricingTable/PricingTableMatrix.tsx"],"sourcesContent":["import type { BillingPlanResource, BillingSubscriptionPlanPeriod } from '@clerk/shared/types';\nimport * as React from 'react';\n\nimport { Avatar } from '@/ui/elements/Avatar';\nimport { SegmentedControl } from '@/ui/elements/SegmentedControl';\nimport { colors } from '@/ui/utils/colors';\n\nimport { usePlansContext } from '../../contexts';\nimport {\n  Badge,\n  Box,\n  Button,\n  descriptors,\n  Flex,\n  Heading,\n  Icon,\n  localizationKeys,\n  Span,\n  Text,\n  useAppearance,\n  useLocalizations,\n} from '../../customizables';\nimport { usePrefersReducedMotion } from '../../hooks';\nimport { Check, InformationCircle } from '../../icons';\nimport { common, InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';\n\ninterface PricingTableMatrixProps {\n  plans: BillingPlanResource[] | undefined;\n  highlightedPlan?: BillingPlanResource['slug'];\n  planPeriod: BillingSubscriptionPlanPeriod;\n  setPlanPeriod: (val: BillingSubscriptionPlanPeriod) => void;\n  onSelect: (plan: BillingPlanResource, event?: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport function PricingTableMatrix({\n  plans = [],\n  planPeriod,\n  setPlanPeriod,\n  onSelect,\n  highlightedPlan,\n}: PricingTableMatrixProps) {\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const { animations: layoutAnimations } = useAppearance().parsedLayout;\n  const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n  const pricingTableMatrixId = React.useId();\n  const segmentedControlId = `${pricingTableMatrixId}-segmented-control`;\n\n  const { buttonPropsForPlan } = usePlansContext();\n  const { t } = useLocalizations();\n\n  const feePeriodNoticeAnimation: ThemableCssProp = t => ({\n    transition: isMotionSafe\n      ? `grid-template-rows ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`\n      : 'none',\n  });\n\n  const highlightBackgroundColor: ThemableCssProp = t => ({\n    background: common.mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha25),\n  });\n\n  const gridTemplateColumns = React.useMemo(() => `repeat(${plans.length + 1}, minmax(9.375rem,1fr))`, [plans.length]);\n\n  const renderBillingCycleControls = React.useMemo(() => plans.some(plan => Boolean(plan.annualMonthlyFee)), [plans]);\n\n  const getAllFeatures = React.useMemo(() => {\n    const featuresSet = new Set<string>();\n    plans.forEach(({ features }) => {\n      features.forEach(({ name }) => featuresSet.add(name));\n    });\n    return Array.from(featuresSet);\n  }, [plans]);\n\n  if (!plans.length) {\n    return null;\n  }\n\n  return (\n    <InternalThemeProvider>\n      <Box\n        elementDescriptor={descriptors.pricingTableMatrix}\n        sx={t => ({\n          position: 'relative',\n          minWidth: '100%',\n          display: 'grid',\n          isolation: 'isolate',\n          backgroundColor: t.colors.$colorBackground,\n          [mqu.md]: {\n            overflowX: 'auto',\n          },\n        })}\n      >\n        <Box\n          elementDescriptor={descriptors.pricingTableMatrixTable}\n          role='table'\n        >\n          <Box\n            elementDescriptor={[descriptors.pricingTableMatrixRowGroup, descriptors.pricingTableMatrixRowGroupHeader]}\n            role='rowgroup'\n            sx={t => ({\n              position: 'sticky',\n              top: 0,\n              backgroundColor: t.colors.$colorBackground,\n              borderBottomWidth: t.borderWidths.$normal,\n              borderBottomStyle: t.borderStyles.$solid,\n              borderBottomColor: t.colors.$borderAlpha100,\n              zIndex: 1,\n            })}\n          >\n            <Box\n              elementDescriptor={[descriptors.pricingTableMatrixRow, descriptors.pricingTableMatrixRowHeader]}\n              role='row'\n              sx={{\n                display: 'grid',\n                gridTemplateColumns,\n              }}\n            >\n              <Box\n                elementDescriptor={descriptors.pricingTableMatrixColumnHeader}\n                role='columnheader'\n                sx={t => ({\n                  display: 'flex',\n                  flexDirection: 'column',\n                  alignItems: 'flex-start',\n                  justifyContent: 'flex-end',\n                  rowGap: t.space.$3,\n                  paddingBlockEnd: t.space.$12,\n                  paddingInlineStart: t.space.$3,\n                })}\n              >\n                {renderBillingCycleControls ? (\n                  <>\n                    <Text\n                      id={segmentedControlId}\n                      colorScheme='secondary'\n                      variant='caption'\n                      localizationKey={localizationKeys('billing.pricingTable.billingCycle')}\n                    >\n                      Billing cycle\n                    </Text>\n                    <SegmentedControl.Root\n                      aria-labelledby={segmentedControlId}\n                      value={planPeriod}\n                      onChange={value => setPlanPeriod(value as BillingSubscriptionPlanPeriod)}\n                    >\n                      <SegmentedControl.Button\n                        value='month'\n                        text={localizationKeys('billing.monthly')}\n                      />\n                      <SegmentedControl.Button\n                        value='annual'\n                        text={localizationKeys('billing.annually')}\n                      />\n                    </SegmentedControl.Root>\n                  </>\n                ) : null}\n              </Box>\n              {plans.map(plan => {\n                const highlight = plan.slug === highlightedPlan;\n                const planFee = !plan.annualMonthlyFee\n                  ? plan.fee\n                  : planPeriod === 'annual'\n                    ? plan.annualMonthlyFee\n                    : plan.fee;\n\n                return (\n                  <Box\n                    elementDescriptor={descriptors.pricingTableMatrixColumnHeader}\n                    key={plan.slug}\n                    role='columnheader'\n                    sx={[\n                      t => ({\n                        display: 'flex',\n                        flexDirection: 'column',\n                        alignItems: 'flex-start',\n                        flex: 1,\n                        borderStartStartRadius: t.radii.$xl,\n                        borderStartEndRadius: t.radii.$xl,\n                      }),\n                      highlight && highlightBackgroundColor,\n                    ]}\n                    data-highlighted={highlight}\n                  >\n                    <Box\n                      sx={t => ({\n                        width: '100%',\n                        padding: t.space.$4,\n                      })}\n                    >\n                      {plan.avatarUrl || highlight ? (\n                        <Span\n                          sx={t => ({\n                            width: '100%',\n                            display: 'flex',\n                            alignItems: 'flex-start',\n                            justifyContent: 'space-between',\n                            marginBlockEnd: t.space.$3,\n                          })}\n                        >\n                          {plan.avatarUrl ? (\n                            <Avatar\n                              elementDescriptor={descriptors.pricingTableMatrixAvatar}\n                              size={_ => 40}\n                              title={plan.name}\n                              initials={plan.name[0]}\n                              rounded={false}\n                              imageUrl={plan.avatarUrl}\n                            />\n                          ) : null}\n                          {highlight ? (\n                            <Badge\n                              elementDescriptor={descriptors.pricingTableMatrixBadge}\n                              colorScheme='secondary'\n                              localizationKey={localizationKeys('billing.popular')}\n                            />\n                          ) : null}\n                        </Span>\n                      ) : null}\n                      <Heading\n                        elementDescriptor={descriptors.pricingTableMatrixPlanName}\n                        textVariant='h3'\n                      >\n                        {plan.name}\n                      </Heading>\n                      <Flex\n                        align='center'\n                        wrap='wrap'\n                        sx={t => ({\n                          marginTop: t.space.$2,\n                          columnGap: t.space.$1x5,\n                        })}\n                      >\n                        {plan.hasBaseFee ? (\n                          <>\n                            <Text\n                              elementDescriptor={descriptors.pricingTableMatrixFee}\n                              variant='h2'\n                              colorScheme='body'\n                            >\n                              {planFee.currencySymbol}\n                              {planFee.amountFormatted}\n                            </Text>\n                            <Text\n                              elementDescriptor={descriptors.pricingTableMatrixFeePeriod}\n                              variant='caption'\n                              colorScheme='secondary'\n                              sx={t => ({\n                                textTransform: 'lowercase',\n                                ':before': {\n                                  content: '\"/\"',\n                                  marginInlineEnd: t.space.$1,\n                                },\n                              })}\n                              localizationKey={localizationKeys('billing.month')}\n                            />\n                            {plan.annualMonthlyFee ? (\n                              <Box\n                                elementDescriptor={descriptors.pricingTableMatrixFeePeriodNotice}\n                                sx={[\n                                  _ => ({\n                                    width: '100%',\n                                    display: 'grid',\n                                    gridTemplateRows: planPeriod === 'annual' ? '1fr' : '0fr',\n                                  }),\n                                  feePeriodNoticeAnimation,\n                                ]}\n                                // @ts-ignore - Needed until React 19 support\n                                inert={planPeriod !== 'annual' ? 'true' : undefined}\n                              >\n                                <Box\n                                  elementDescriptor={descriptors.pricingTableMatrixFeePeriodNoticeInner}\n                                  sx={{\n                                    overflow: 'hidden',\n                                    minHeight: 0,\n                                  }}\n                                >\n                                  <Text\n                                    elementDescriptor={descriptors.pricingTableMatrixFeePeriodNoticeLabel}\n                                    variant='caption'\n                                    colorScheme='secondary'\n                                    sx={t => ({\n                                      width: '100%',\n                                      display: 'flex',\n                                      alignItems: 'center',\n                                      columnGap: t.space.$1,\n                                    })}\n                                  >\n                                    <Icon\n                                      icon={InformationCircle}\n                                      colorScheme='neutral'\n                                      size='sm'\n                                      aria-hidden\n                                    />{' '}\n                                    <Span localizationKey={localizationKeys('billing.billedAnnually')} />\n                                  </Text>\n                                </Box>\n                              </Box>\n                            ) : null}\n                          </>\n                        ) : (\n                          <Text\n                            elementDescriptor={descriptors.pricingTableMatrixFee}\n                            variant='h2'\n                            localizationKey={localizationKeys('billing.free')}\n                            colorScheme='body'\n                          />\n                        )}\n                      </Flex>\n                    </Box>\n                    {!plan.isDefault ? (\n                      <Box\n                        sx={t => ({\n                          width: '100%',\n                          marginBlockStart: 'auto',\n                          marginBlockEnd: t.space.$8,\n                          paddingBlockStart: t.space.$2,\n                          paddingBlockEnd: t.space.$4,\n                          paddingInline: t.space.$4,\n                        })}\n                      >\n                        <Button\n                          block\n                          textVariant='buttonSmall'\n                          size='xs'\n                          onClick={event => {\n                            onSelect(plan, event);\n                          }}\n                          {...buttonPropsForPlan({ plan, selectedPlanPeriod: planPeriod })}\n                          colorScheme={highlight ? 'primary' : 'secondary'}\n                        />\n                      </Box>\n                    ) : null}\n                  </Box>\n                );\n              })}\n            </Box>\n          </Box>\n          <Box\n            elementDescriptor={[descriptors.pricingTableMatrixRowGroup, descriptors.pricingTableMatrixRowGroupBody]}\n            role='rowgroup'\n          >\n            {getAllFeatures.map(feature => {\n              return (\n                <Box\n                  elementDescriptor={[descriptors.pricingTableMatrixRow, descriptors.pricingTableMatrixRowBody]}\n                  key={feature}\n                  role='row'\n                  sx={t => ({\n                    position: 'relative',\n                    display: 'grid',\n                    gridTemplateColumns,\n                    borderBottomWidth: t.borderWidths.$normal,\n                    borderBottomStyle: t.borderStyles.$solid,\n                    borderBottomColor: t.colors.$borderAlpha100,\n                    ':after': {\n                      content: '\"\"',\n                      position: 'absolute',\n                      inset: 0,\n                      pointerEvents: 'none',\n                      backgroundColor: t.colors.$neutralAlpha25,\n                      opacity: 0,\n                    },\n                    ':hover:after': {\n                      opacity: 1,\n                    },\n                  })}\n                >\n                  <Box\n                    elementDescriptor={descriptors.pricingTableMatrixCell}\n                    role='cell'\n                    sx={t => ({\n                      padding: t.space.$3,\n                    })}\n                  >\n                    <Text colorScheme='body'>{feature}</Text>\n                  </Box>\n                  {plans.map(plan => {\n                    const highlight = plan.slug === highlightedPlan;\n                    const hasFeature = plan.features.some(f => f.name === feature);\n                    return (\n                      <Box\n                        elementDescriptor={descriptors.pricingTableMatrixCell}\n                        key={plan.slug}\n                        role='cell'\n                        sx={[\n                          t => ({\n                            display: 'grid',\n                            placeContent: 'center',\n                            padding: t.space.$3,\n                          }),\n                          highlight && highlightBackgroundColor,\n                        ]}\n                        data-highlighted={highlight}\n                        data-checked={hasFeature}\n                      >\n                        {hasFeature && (\n                          <Icon\n                            icon={Check}\n                            colorScheme='neutral'\n                            size='sm'\n                            aria-label={t(localizationKeys('billing.pricingTable.included'))}\n                          />\n                        )}\n                      </Box>\n                    );\n                  })}\n                </Box>\n              );\n            })}\n            <Box\n              elementDescriptor={descriptors.pricingTableMatrixFooter}\n              sx={{\n                display: 'grid',\n                gridTemplateColumns,\n              }}\n            >\n              <Box elementDescriptor={[descriptors.pricingTableMatrixCell, descriptors.pricingTableMatrixCellFooter]} />\n              {plans.map(plan => {\n                const highlight = plan.slug === highlightedPlan;\n                return (\n                  <Box\n                    elementDescriptor={[descriptors.pricingTableMatrixCell, descriptors.pricingTableMatrixCellFooter]}\n                    key={plan.slug}\n                    sx={[\n                      t => ({\n                        height: t.space.$10,\n                        borderEndStartRadius: t.radii.$xl,\n                        borderEndEndRadius: t.radii.$xl,\n                      }),\n                      highlight && highlightBackgroundColor,\n                    ]}\n                    data-highlighted={highlight}\n                  />\n                );\n              })}\n            </Box>\n          </Box>\n        </Box>\n      </Box>\n    </InternalThemeProvider>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"PricingTableMatrix.js","names":["React","feePeriodNoticeAnimation: ThemableCssProp","t","highlightBackgroundColor: ThemableCssProp","InformationCircle","Check"],"sources":["../../../src/components/PricingTable/PricingTableMatrix.tsx"],"sourcesContent":["import type { BillingPlanResource, BillingSubscriptionPlanPeriod } from '@clerk/shared/types';\nimport * as React from 'react';\n\nimport { Avatar } from '@/ui/elements/Avatar';\nimport { SegmentedControl } from '@/ui/elements/SegmentedControl';\nimport { colors } from '@/ui/utils/colors';\n\nimport { usePlansContext } from '../../contexts';\nimport {\n  Badge,\n  Box,\n  Button,\n  descriptors,\n  Flex,\n  Heading,\n  Icon,\n  localizationKeys,\n  Span,\n  Text,\n  useAppearance,\n  useLocalizations,\n} from '../../customizables';\nimport { usePrefersReducedMotion } from '../../hooks';\nimport { Check, InformationCircle } from '../../icons';\nimport { common, InternalThemeProvider, mqu, type ThemableCssProp } from '../../styledSystem';\n\ninterface PricingTableMatrixProps {\n  plans: BillingPlanResource[] | undefined;\n  highlightedPlan?: BillingPlanResource['slug'];\n  planPeriod: BillingSubscriptionPlanPeriod;\n  setPlanPeriod: (val: BillingSubscriptionPlanPeriod) => void;\n  onSelect: (plan: BillingPlanResource, event?: React.MouseEvent<HTMLElement>) => void;\n}\n\nexport function PricingTableMatrix({\n  plans = [],\n  planPeriod,\n  setPlanPeriod,\n  onSelect,\n  highlightedPlan,\n}: PricingTableMatrixProps) {\n  const prefersReducedMotion = usePrefersReducedMotion();\n  const { animations: layoutAnimations } = useAppearance().parsedOptions;\n  const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;\n  const pricingTableMatrixId = React.useId();\n  const segmentedControlId = `${pricingTableMatrixId}-segmented-control`;\n\n  const { buttonPropsForPlan } = usePlansContext();\n  const { t } = useLocalizations();\n\n  const feePeriodNoticeAnimation: ThemableCssProp = t => ({\n    transition: isMotionSafe\n      ? `grid-template-rows ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`\n      : 'none',\n  });\n\n  const highlightBackgroundColor: ThemableCssProp = t => ({\n    background: common.mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha25),\n  });\n\n  const gridTemplateColumns = React.useMemo(() => `repeat(${plans.length + 1}, minmax(9.375rem,1fr))`, [plans.length]);\n\n  const renderBillingCycleControls = React.useMemo(() => plans.some(plan => Boolean(plan.annualMonthlyFee)), [plans]);\n\n  const getAllFeatures = React.useMemo(() => {\n    const featuresSet = new Set<string>();\n    plans.forEach(({ features }) => {\n      features.forEach(({ name }) => featuresSet.add(name));\n    });\n    return Array.from(featuresSet);\n  }, [plans]);\n\n  if (!plans.length) {\n    return null;\n  }\n\n  return (\n    <InternalThemeProvider>\n      <Box\n        elementDescriptor={descriptors.pricingTableMatrix}\n        sx={t => ({\n          position: 'relative',\n          minWidth: '100%',\n          display: 'grid',\n          isolation: 'isolate',\n          backgroundColor: t.colors.$colorBackground,\n          [mqu.md]: {\n            overflowX: 'auto',\n          },\n        })}\n      >\n        <Box\n          elementDescriptor={descriptors.pricingTableMatrixTable}\n          role='table'\n        >\n          <Box\n            elementDescriptor={[descriptors.pricingTableMatrixRowGroup, descriptors.pricingTableMatrixRowGroupHeader]}\n            role='rowgroup'\n            sx={t => ({\n              position: 'sticky',\n              top: 0,\n              backgroundColor: t.colors.$colorBackground,\n              borderBottomWidth: t.borderWidths.$normal,\n              borderBottomStyle: t.borderStyles.$solid,\n              borderBottomColor: t.colors.$borderAlpha100,\n              zIndex: 1,\n            })}\n          >\n            <Box\n              elementDescriptor={[descriptors.pricingTableMatrixRow, descriptors.pricingTableMatrixRowHeader]}\n              role='row'\n              sx={{\n                display: 'grid',\n                gridTemplateColumns,\n              }}\n            >\n              <Box\n                elementDescriptor={descriptors.pricingTableMatrixColumnHeader}\n                role='columnheader'\n                sx={t => ({\n                  display: 'flex',\n                  flexDirection: 'column',\n                  alignItems: 'flex-start',\n                  justifyContent: 'flex-end',\n                  rowGap: t.space.$3,\n                  paddingBlockEnd: t.space.$12,\n                  paddingInlineStart: t.space.$3,\n                })}\n              >\n                {renderBillingCycleControls ? (\n                  <>\n                    <Text\n                      id={segmentedControlId}\n                      colorScheme='secondary'\n                      variant='caption'\n                      localizationKey={localizationKeys('billing.pricingTable.billingCycle')}\n                    >\n                      Billing cycle\n                    </Text>\n                    <SegmentedControl.Root\n                      aria-labelledby={segmentedControlId}\n                      value={planPeriod}\n                      onChange={value => setPlanPeriod(value as BillingSubscriptionPlanPeriod)}\n                    >\n                      <SegmentedControl.Button\n                        value='month'\n                        text={localizationKeys('billing.monthly')}\n                      />\n                      <SegmentedControl.Button\n                        value='annual'\n                        text={localizationKeys('billing.annually')}\n                      />\n                    </SegmentedControl.Root>\n                  </>\n                ) : null}\n              </Box>\n              {plans.map(plan => {\n                const highlight = plan.slug === highlightedPlan;\n                const planFee = !plan.annualMonthlyFee\n                  ? plan.fee\n                  : planPeriod === 'annual'\n                    ? plan.annualMonthlyFee\n                    : plan.fee;\n\n                return (\n                  <Box\n                    elementDescriptor={descriptors.pricingTableMatrixColumnHeader}\n                    key={plan.slug}\n                    role='columnheader'\n                    sx={[\n                      t => ({\n                        display: 'flex',\n                        flexDirection: 'column',\n                        alignItems: 'flex-start',\n                        flex: 1,\n                        borderStartStartRadius: t.radii.$xl,\n                        borderStartEndRadius: t.radii.$xl,\n                      }),\n                      highlight && highlightBackgroundColor,\n                    ]}\n                    data-highlighted={highlight}\n                  >\n                    <Box\n                      sx={t => ({\n                        width: '100%',\n                        padding: t.space.$4,\n                      })}\n                    >\n                      {plan.avatarUrl || highlight ? (\n                        <Span\n                          sx={t => ({\n                            width: '100%',\n                            display: 'flex',\n                            alignItems: 'flex-start',\n                            justifyContent: 'space-between',\n                            marginBlockEnd: t.space.$3,\n                          })}\n                        >\n                          {plan.avatarUrl ? (\n                            <Avatar\n                              elementDescriptor={descriptors.pricingTableMatrixAvatar}\n                              size={_ => 40}\n                              title={plan.name}\n                              initials={plan.name[0]}\n                              rounded={false}\n                              imageUrl={plan.avatarUrl}\n                            />\n                          ) : null}\n                          {highlight ? (\n                            <Badge\n                              elementDescriptor={descriptors.pricingTableMatrixBadge}\n                              colorScheme='secondary'\n                              localizationKey={localizationKeys('billing.popular')}\n                            />\n                          ) : null}\n                        </Span>\n                      ) : null}\n                      <Heading\n                        elementDescriptor={descriptors.pricingTableMatrixPlanName}\n                        textVariant='h3'\n                      >\n                        {plan.name}\n                      </Heading>\n                      <Flex\n                        align='center'\n                        wrap='wrap'\n                        sx={t => ({\n                          marginTop: t.space.$2,\n                          columnGap: t.space.$1x5,\n                        })}\n                      >\n                        {plan.hasBaseFee ? (\n                          <>\n                            <Text\n                              elementDescriptor={descriptors.pricingTableMatrixFee}\n                              variant='h2'\n                              colorScheme='body'\n                            >\n                              {planFee.currencySymbol}\n                              {planFee.amountFormatted}\n                            </Text>\n                            <Text\n                              elementDescriptor={descriptors.pricingTableMatrixFeePeriod}\n                              variant='caption'\n                              colorScheme='secondary'\n                              sx={t => ({\n                                textTransform: 'lowercase',\n                                ':before': {\n                                  content: '\"/\"',\n                                  marginInlineEnd: t.space.$1,\n                                },\n                              })}\n                              localizationKey={localizationKeys('billing.month')}\n                            />\n                            {plan.annualMonthlyFee ? (\n                              <Box\n                                elementDescriptor={descriptors.pricingTableMatrixFeePeriodNotice}\n                                sx={[\n                                  _ => ({\n                                    width: '100%',\n                                    display: 'grid',\n                                    gridTemplateRows: planPeriod === 'annual' ? '1fr' : '0fr',\n                                  }),\n                                  feePeriodNoticeAnimation,\n                                ]}\n                                // @ts-ignore - Needed until React 19 support\n                                inert={planPeriod !== 'annual' ? 'true' : undefined}\n                              >\n                                <Box\n                                  elementDescriptor={descriptors.pricingTableMatrixFeePeriodNoticeInner}\n                                  sx={{\n                                    overflow: 'hidden',\n                                    minHeight: 0,\n                                  }}\n                                >\n                                  <Text\n                                    elementDescriptor={descriptors.pricingTableMatrixFeePeriodNoticeLabel}\n                                    variant='caption'\n                                    colorScheme='secondary'\n                                    sx={t => ({\n                                      width: '100%',\n                                      display: 'flex',\n                                      alignItems: 'center',\n                                      columnGap: t.space.$1,\n                                    })}\n                                  >\n                                    <Icon\n                                      icon={InformationCircle}\n                                      colorScheme='neutral'\n                                      size='sm'\n                                      aria-hidden\n                                    />{' '}\n                                    <Span localizationKey={localizationKeys('billing.billedAnnually')} />\n                                  </Text>\n                                </Box>\n                              </Box>\n                            ) : null}\n                          </>\n                        ) : (\n                          <Text\n                            elementDescriptor={descriptors.pricingTableMatrixFee}\n                            variant='h2'\n                            localizationKey={localizationKeys('billing.free')}\n                            colorScheme='body'\n                          />\n                        )}\n                      </Flex>\n                    </Box>\n                    {!plan.isDefault ? (\n                      <Box\n                        sx={t => ({\n                          width: '100%',\n                          marginBlockStart: 'auto',\n                          marginBlockEnd: t.space.$8,\n                          paddingBlockStart: t.space.$2,\n                          paddingBlockEnd: t.space.$4,\n                          paddingInline: t.space.$4,\n                        })}\n                      >\n                        <Button\n                          block\n                          textVariant='buttonSmall'\n                          size='xs'\n                          onClick={event => {\n                            onSelect(plan, event);\n                          }}\n                          {...buttonPropsForPlan({ plan, selectedPlanPeriod: planPeriod })}\n                          colorScheme={highlight ? 'primary' : 'secondary'}\n                        />\n                      </Box>\n                    ) : null}\n                  </Box>\n                );\n              })}\n            </Box>\n          </Box>\n          <Box\n            elementDescriptor={[descriptors.pricingTableMatrixRowGroup, descriptors.pricingTableMatrixRowGroupBody]}\n            role='rowgroup'\n          >\n            {getAllFeatures.map(feature => {\n              return (\n                <Box\n                  elementDescriptor={[descriptors.pricingTableMatrixRow, descriptors.pricingTableMatrixRowBody]}\n                  key={feature}\n                  role='row'\n                  sx={t => ({\n                    position: 'relative',\n                    display: 'grid',\n                    gridTemplateColumns,\n                    borderBottomWidth: t.borderWidths.$normal,\n                    borderBottomStyle: t.borderStyles.$solid,\n                    borderBottomColor: t.colors.$borderAlpha100,\n                    ':after': {\n                      content: '\"\"',\n                      position: 'absolute',\n                      inset: 0,\n                      pointerEvents: 'none',\n                      backgroundColor: t.colors.$neutralAlpha25,\n                      opacity: 0,\n                    },\n                    ':hover:after': {\n                      opacity: 1,\n                    },\n                  })}\n                >\n                  <Box\n                    elementDescriptor={descriptors.pricingTableMatrixCell}\n                    role='cell'\n                    sx={t => ({\n                      padding: t.space.$3,\n                    })}\n                  >\n                    <Text colorScheme='body'>{feature}</Text>\n                  </Box>\n                  {plans.map(plan => {\n                    const highlight = plan.slug === highlightedPlan;\n                    const hasFeature = plan.features.some(f => f.name === feature);\n                    return (\n                      <Box\n                        elementDescriptor={descriptors.pricingTableMatrixCell}\n                        key={plan.slug}\n                        role='cell'\n                        sx={[\n                          t => ({\n                            display: 'grid',\n                            placeContent: 'center',\n                            padding: t.space.$3,\n                          }),\n                          highlight && highlightBackgroundColor,\n                        ]}\n                        data-highlighted={highlight}\n                        data-checked={hasFeature}\n                      >\n                        {hasFeature && (\n                          <Icon\n                            icon={Check}\n                            colorScheme='neutral'\n                            size='sm'\n                            aria-label={t(localizationKeys('billing.pricingTable.included'))}\n                          />\n                        )}\n                      </Box>\n                    );\n                  })}\n                </Box>\n              );\n            })}\n            <Box\n              elementDescriptor={descriptors.pricingTableMatrixFooter}\n              sx={{\n                display: 'grid',\n                gridTemplateColumns,\n              }}\n            >\n              <Box elementDescriptor={[descriptors.pricingTableMatrixCell, descriptors.pricingTableMatrixCellFooter]} />\n              {plans.map(plan => {\n                const highlight = plan.slug === highlightedPlan;\n                return (\n                  <Box\n                    elementDescriptor={[descriptors.pricingTableMatrixCell, descriptors.pricingTableMatrixCellFooter]}\n                    key={plan.slug}\n                    sx={[\n                      t => ({\n                        height: t.space.$10,\n                        borderEndStartRadius: t.radii.$xl,\n                        borderEndEndRadius: t.radii.$xl,\n                      }),\n                      highlight && highlightBackgroundColor,\n                    ]}\n                    data-highlighted={highlight}\n                  />\n                );\n              })}\n            </Box>\n          </Box>\n        </Box>\n      </Box>\n    </InternalThemeProvider>\n  );\n}\n"],"mappings":"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"}

package/dist/components/SessionTasks/tasks/TaskResetPassword/index.js

@@ -66,7 +66,7 @@ const TaskResetPasswordInternal = () => {
 	};
 	const resetPassword = () => {
 		return card.runAsync(async () => {
-			if (!clerk.user) return;
+			if (!canSubmit || !clerk.user) return;
 			passwordField.clearFeedback();
 			confirmField.clearFeedback();
 			try {
@@ -94,9 +94,9 @@ const TaskResetPasswordInternal = () => {
 		children: /* @__PURE__ */ jsx(Flow.Part, {
 			part: "resetPassword",
 			children: /* @__PURE__ */ jsxs(Card.Root, { children: [/* @__PURE__ */ jsxs(Card.Content, { children: [
-				/* @__PURE__ */ jsx(Header.Root, {
+				/* @__PURE__ */ jsxs(Header.Root, {
 					showLogo: true,
-					children: /* @__PURE__ */ jsx(Header.Title, { localizationKey: localizationKeys("taskResetPassword.title") })
+					children: [/* @__PURE__ */ jsx(Header.Title, { localizationKey: localizationKeys("taskResetPassword.title") }), /* @__PURE__ */ jsx(Header.Subtitle, { localizationKey: localizationKeys("taskResetPassword.subtitle") })]
 				}),
 				/* @__PURE__ */ jsx(Card.Alert, { children: card.error }),
 				/* @__PURE__ */ jsx(Col, {

package/dist/components/SessionTasks/tasks/TaskResetPassword/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["e: any"],"sources":["../../../../../src/components/SessionTasks/tasks/TaskResetPassword/index.tsx"],"sourcesContent":["import { useClerk, useReverification } from '@clerk/shared/react';\nimport type { UserResource } from '@clerk/shared/types';\n\nimport { useEnvironment, useSignOutContext, withCoreSessionSwitchGuard } from '@/ui/contexts';\nimport { useSessionTasksContext, useTaskResetPasswordContext } from '@/ui/contexts/components/SessionTasks';\nimport { Col, descriptors, Flow, localizationKeys, useLocalizations } from '@/ui/customizables';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { Header } from '@/ui/elements/Header';\nimport { useConfirmPassword } from '@/ui/hooks';\nimport { useMultipleSessions } from '@/ui/hooks/useMultipleSessions';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createPasswordError } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { withTaskGuard } from '../shared';\n\nconst TaskResetPasswordInternal = () => {\n  const clerk = useClerk();\n  const card = useCardState();\n  const {\n    userSettings: { passwordSettings },\n  } = useEnvironment();\n\n  const { t, locale } = useLocalizations();\n  const { redirectUrlComplete } = useTaskResetPasswordContext();\n  const { otherSessions } = useMultipleSessions({ user: clerk.user });\n  const { navigateAfterSignOut, navigateAfterMultiSessionSingleSignOutUrl } = useSignOutContext();\n  const updatePasswordWithReverification = useReverification(\n    (user: UserResource, opts: Parameters<UserResource['updatePassword']>) => user.updatePassword(...opts),\n  );\n  const { navigateOnSetActive } = useSessionTasksContext();\n\n  const handleSignOut = () => {\n    if (otherSessions.length === 0) {\n      return clerk?.signOut(navigateAfterSignOut);\n    }\n\n    return clerk?.signOut(navigateAfterMultiSessionSingleSignOutUrl, { sessionId: clerk.session?.id });\n  };\n\n  const passwordField = useFormControl('newPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__newPassword'),\n    isRequired: true,\n    validatePassword: true,\n    buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),\n  });\n\n  const confirmField = useFormControl('confirmPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__confirmPassword'),\n    isRequired: true,\n  });\n\n  const sessionsField = useFormControl('signOutOfOtherSessions', '', {\n    type: 'checkbox',\n    label: localizationKeys('formFieldLabel__signOutOfOtherSessions'),\n    defaultChecked: true,\n  });\n\n  const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({\n    passwordField,\n    confirmPasswordField: confirmField,\n  });\n\n  const canSubmit = isPasswordMatch;\n\n  const validateForm = () => {\n    if (passwordField.value) {\n      setConfirmPasswordFeedback(confirmField.value);\n    }\n  };\n\n  const resetPassword = () => {\n    return card.runAsync(async () => {\n      if (!clerk.user) {\n        return;\n      }\n\n      passwordField.clearFeedback();\n      confirmField.clearFeedback();\n\n      try {\n        await updatePasswordWithReverification(clerk.user, [\n          {\n            newPassword: passwordField.value,\n            signOutOfOtherSessions: sessionsField.checked,\n          },\n        ]);\n\n        // Update session to have the latest list of tasks (eg: if reset-password gets resolved)\n        await clerk.setActive({\n          session: clerk.session,\n          navigate: async ({ session }) => {\n            await navigateOnSetActive?.({ session, redirectUrlComplete });\n          },\n        });\n      } catch (e: any) {\n        return handleError(e, [passwordField, confirmField], card.setError);\n      }\n    });\n  };\n\n  const identifier = clerk.user?.primaryEmailAddress?.emailAddress ?? clerk.user?.username;\n\n  return (\n    <Flow.Root flow='taskResetPassword'>\n      <Flow.Part part='resetPassword'>\n        <Card.Root>\n          <Card.Content>\n            <Header.Root showLogo>\n              <Header.Title localizationKey={localizationKeys('taskResetPassword.title')} />\n            </Header.Root>\n            <Card.Alert>{card.error}</Card.Alert>\n            <Col\n              elementDescriptor={descriptors.main}\n              gap={8}\n            >\n              <Form.Root\n                onSubmit={() => {\n                  void resetPassword();\n                }}\n                onBlur={validateForm}\n                gap={8}\n              >\n                <Col gap={6}>\n                  {/* For password managers */}\n                  <input\n                    readOnly\n                    data-testid='hidden-identifier'\n                    id='identifier-field'\n                    name='identifier'\n                    value={clerk.user?.primaryEmailAddress?.emailAddress || clerk.user?.username || ''}\n                    style={{ display: 'none' }}\n                  />\n                  <Form.ControlRow elementId={passwordField.id}>\n                    <Form.PasswordInput\n                      {...passwordField.props}\n                      isRequired\n                      minLength={6}\n                    />\n                  </Form.ControlRow>\n                  <Form.ControlRow elementId={confirmField.id}>\n                    <Form.PasswordInput\n                      {...confirmField.props}\n                      onChange={e => {\n                        if (e.target.value) {\n                          setConfirmPasswordFeedback(e.target.value);\n                        }\n                        return confirmField.props.onChange(e);\n                      }}\n                    />\n                  </Form.ControlRow>\n                  <Form.ControlRow elementId={sessionsField.id}>\n                    <Form.Checkbox {...sessionsField.props} />\n                  </Form.ControlRow>\n                </Col>\n                <Col gap={3}>\n                  <Form.SubmitButton\n                    isLoading={card.isLoading}\n                    isDisabled={!canSubmit}\n                    localizationKey={localizationKeys('taskResetPassword.formButtonPrimary')}\n                  />\n                </Col>\n              </Form.Root>\n            </Col>\n          </Card.Content>\n\n          <Card.Footer>\n            <Card.Action\n              elementId='signOut'\n              gap={2}\n              justify='center'\n              sx={() => ({ width: '100%' })}\n            >\n              {identifier && (\n                <Card.ActionText\n                  truncate\n                  localizationKey={localizationKeys('taskResetPassword.signOut.actionText', {\n                    identifier,\n                  })}\n                />\n              )}\n              <Card.ActionLink\n                sx={() => ({ flexShrink: 0 })}\n                onClick={() => {\n                  void handleSignOut();\n                }}\n                localizationKey={localizationKeys('taskResetPassword.signOut.actionLink')}\n              />\n            </Card.Action>\n          </Card.Footer>\n        </Card.Root>\n      </Flow.Part>\n    </Flow.Root>\n  );\n};\n\nexport const TaskResetPassword = withCoreSessionSwitchGuard(\n  withTaskGuard(withCardStateProvider(TaskResetPasswordInternal), 'reset-password'),\n);\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["e: any"],"sources":["../../../../../src/components/SessionTasks/tasks/TaskResetPassword/index.tsx"],"sourcesContent":["import { useClerk, useReverification } from '@clerk/shared/react';\nimport type { UserResource } from '@clerk/shared/types';\n\nimport { useEnvironment, useSignOutContext, withCoreSessionSwitchGuard } from '@/ui/contexts';\nimport { useSessionTasksContext, useTaskResetPasswordContext } from '@/ui/contexts/components/SessionTasks';\nimport { Col, descriptors, Flow, localizationKeys, useLocalizations } from '@/ui/customizables';\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { Header } from '@/ui/elements/Header';\nimport { useConfirmPassword } from '@/ui/hooks';\nimport { useMultipleSessions } from '@/ui/hooks/useMultipleSessions';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createPasswordError } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { withTaskGuard } from '../shared';\n\nconst TaskResetPasswordInternal = () => {\n  const clerk = useClerk();\n  const card = useCardState();\n  const {\n    userSettings: { passwordSettings },\n  } = useEnvironment();\n\n  const { t, locale } = useLocalizations();\n  const { redirectUrlComplete } = useTaskResetPasswordContext();\n  const { otherSessions } = useMultipleSessions({ user: clerk.user });\n  const { navigateAfterSignOut, navigateAfterMultiSessionSingleSignOutUrl } = useSignOutContext();\n  const updatePasswordWithReverification = useReverification(\n    (user: UserResource, opts: Parameters<UserResource['updatePassword']>) => user.updatePassword(...opts),\n  );\n  const { navigateOnSetActive } = useSessionTasksContext();\n\n  const handleSignOut = () => {\n    if (otherSessions.length === 0) {\n      return clerk?.signOut(navigateAfterSignOut);\n    }\n\n    return clerk?.signOut(navigateAfterMultiSessionSingleSignOutUrl, { sessionId: clerk.session?.id });\n  };\n\n  const passwordField = useFormControl('newPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__newPassword'),\n    isRequired: true,\n    validatePassword: true,\n    buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),\n  });\n\n  const confirmField = useFormControl('confirmPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__confirmPassword'),\n    isRequired: true,\n  });\n\n  const sessionsField = useFormControl('signOutOfOtherSessions', '', {\n    type: 'checkbox',\n    label: localizationKeys('formFieldLabel__signOutOfOtherSessions'),\n    defaultChecked: true,\n  });\n\n  const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({\n    passwordField,\n    confirmPasswordField: confirmField,\n  });\n\n  const canSubmit = isPasswordMatch;\n\n  const validateForm = () => {\n    if (passwordField.value) {\n      setConfirmPasswordFeedback(confirmField.value);\n    }\n  };\n\n  const resetPassword = () => {\n    return card.runAsync(async () => {\n      if (!canSubmit || !clerk.user) {\n        return;\n      }\n\n      passwordField.clearFeedback();\n      confirmField.clearFeedback();\n\n      try {\n        await updatePasswordWithReverification(clerk.user, [\n          {\n            newPassword: passwordField.value,\n            signOutOfOtherSessions: sessionsField.checked,\n          },\n        ]);\n\n        // Update session to have the latest list of tasks (eg: if reset-password gets resolved)\n        await clerk.setActive({\n          session: clerk.session,\n          navigate: async ({ session }) => {\n            await navigateOnSetActive?.({ session, redirectUrlComplete });\n          },\n        });\n      } catch (e: any) {\n        return handleError(e, [passwordField, confirmField], card.setError);\n      }\n    });\n  };\n\n  const identifier = clerk.user?.primaryEmailAddress?.emailAddress ?? clerk.user?.username;\n\n  return (\n    <Flow.Root flow='taskResetPassword'>\n      <Flow.Part part='resetPassword'>\n        <Card.Root>\n          <Card.Content>\n            <Header.Root showLogo>\n              <Header.Title localizationKey={localizationKeys('taskResetPassword.title')} />\n              <Header.Subtitle localizationKey={localizationKeys('taskResetPassword.subtitle')} />\n            </Header.Root>\n            <Card.Alert>{card.error}</Card.Alert>\n            <Col\n              elementDescriptor={descriptors.main}\n              gap={8}\n            >\n              <Form.Root\n                onSubmit={() => {\n                  void resetPassword();\n                }}\n                onBlur={validateForm}\n                gap={8}\n              >\n                <Col gap={6}>\n                  {/* For password managers */}\n                  <input\n                    readOnly\n                    data-testid='hidden-identifier'\n                    id='identifier-field'\n                    name='identifier'\n                    value={clerk.user?.primaryEmailAddress?.emailAddress || clerk.user?.username || ''}\n                    style={{ display: 'none' }}\n                  />\n                  <Form.ControlRow elementId={passwordField.id}>\n                    <Form.PasswordInput\n                      {...passwordField.props}\n                      isRequired\n                      minLength={6}\n                    />\n                  </Form.ControlRow>\n                  <Form.ControlRow elementId={confirmField.id}>\n                    <Form.PasswordInput\n                      {...confirmField.props}\n                      onChange={e => {\n                        if (e.target.value) {\n                          setConfirmPasswordFeedback(e.target.value);\n                        }\n                        return confirmField.props.onChange(e);\n                      }}\n                    />\n                  </Form.ControlRow>\n                  <Form.ControlRow elementId={sessionsField.id}>\n                    <Form.Checkbox {...sessionsField.props} />\n                  </Form.ControlRow>\n                </Col>\n                <Col gap={3}>\n                  <Form.SubmitButton\n                    isLoading={card.isLoading}\n                    isDisabled={!canSubmit}\n                    localizationKey={localizationKeys('taskResetPassword.formButtonPrimary')}\n                  />\n                </Col>\n              </Form.Root>\n            </Col>\n          </Card.Content>\n\n          <Card.Footer>\n            <Card.Action\n              elementId='signOut'\n              gap={2}\n              justify='center'\n              sx={() => ({ width: '100%' })}\n            >\n              {identifier && (\n                <Card.ActionText\n                  truncate\n                  localizationKey={localizationKeys('taskResetPassword.signOut.actionText', {\n                    identifier,\n                  })}\n                />\n              )}\n              <Card.ActionLink\n                sx={() => ({ flexShrink: 0 })}\n                onClick={() => {\n                  void handleSignOut();\n                }}\n                localizationKey={localizationKeys('taskResetPassword.signOut.actionLink')}\n              />\n            </Card.Action>\n          </Card.Footer>\n        </Card.Root>\n      </Flow.Part>\n    </Flow.Root>\n  );\n};\n\nexport const TaskResetPassword = withCoreSessionSwitchGuard(\n  withTaskGuard(withCardStateProvider(TaskResetPasswordInternal), 'reset-password'),\n);\n"],"mappings":"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"}

package/dist/components/SignIn/ResetPassword.js

@@ -60,6 +60,7 @@ const ResetPasswordInternal = () => {
 		if (passwordField.value) setConfirmPasswordFeedback(confirmField.value);
 	};
 	const resetPassword = async () => {
+		if (!canSubmit) return;
 		passwordField.clearFeedback();
 		confirmField.clearFeedback();
 		try {

package/dist/components/SignIn/ResetPassword.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResetPassword.js","names":["e: any"],"sources":["../../../src/components/SignIn/ResetPassword.tsx"],"sourcesContent":["import { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors';\nimport React from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { Header } from '@/ui/elements/Header';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createPasswordError } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { useCoreSignIn, useEnvironment } from '../../contexts';\nimport { Col, descriptors, localizationKeys, useLocalizations } from '../../customizables';\nimport { useConfirmPassword } from '../../hooks';\nimport { useSupportEmail } from '../../hooks/useSupportEmail';\nimport { useRouter } from '../../router';\n\nconst ResetPasswordInternal = () => {\n  const signIn = useCoreSignIn();\n  const card = useCardState();\n  const { navigate } = useRouter();\n  const supportEmail = useSupportEmail();\n  const {\n    userSettings: { passwordSettings },\n  } = useEnvironment();\n\n  const { t, locale } = useLocalizations();\n\n  const requiresNewPassword =\n    signIn.status === 'needs_new_password' &&\n    signIn.firstFactorVerification.strategy !== 'reset_password_email_code' &&\n    signIn.firstFactorVerification.strategy !== 'reset_password_phone_code';\n\n  React.useEffect(() => {\n    if (requiresNewPassword) {\n      card.setError(t(localizationKeys('signIn.resetPassword.requiredMessage')));\n    }\n  }, []);\n\n  const passwordField = useFormControl('password', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__newPassword'),\n    isRequired: true,\n    validatePassword: true,\n    buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),\n  });\n\n  const confirmField = useFormControl('confirmPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__confirmPassword'),\n    isRequired: true,\n  });\n\n  const sessionsField = useFormControl('signOutOfOtherSessions', '', {\n    type: 'checkbox',\n    label: localizationKeys('formFieldLabel__signOutOfOtherSessions'),\n    defaultChecked: true,\n  });\n\n  const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({\n    passwordField,\n    confirmPasswordField: confirmField,\n  });\n\n  const canSubmit = isPasswordMatch;\n\n  const validateForm = () => {\n    if (passwordField.value) {\n      setConfirmPasswordFeedback(confirmField.value);\n    }\n  };\n\n  const resetPassword = async () => {\n    passwordField.clearFeedback();\n    confirmField.clearFeedback();\n    try {\n      const { status, createdSessionId } = await signIn.resetPassword({\n        password: passwordField.value,\n        signOutOfOtherSessions: sessionsField.checked,\n      });\n\n      switch (status) {\n        case 'complete':\n          if (createdSessionId) {\n            const queryParams = new URLSearchParams();\n            queryParams.set('createdSessionId', createdSessionId);\n            return navigate(`../reset-password-success?${queryParams.toString()}`);\n          }\n          return console.error(clerkInvalidFAPIResponse(status, supportEmail));\n        case 'needs_second_factor':\n          return navigate('../factor-two');\n        default:\n          return console.error(clerkInvalidFAPIResponse(status, supportEmail));\n      }\n    } catch (e: any) {\n      return handleError(e, [passwordField, confirmField], card.setError);\n    }\n  };\n\n  const goBack = () => {\n    return navigate('../');\n  };\n\n  return (\n    <Card.Root>\n      <Card.Content>\n        <Header.Root showLogo>\n          <Header.Title localizationKey={localizationKeys('signIn.resetPassword.title')} />\n        </Header.Root>\n        <Card.Alert>{card.error}</Card.Alert>\n        <Col\n          elementDescriptor={descriptors.main}\n          gap={8}\n        >\n          <Form.Root\n            onSubmit={resetPassword}\n            onBlur={validateForm}\n            gap={8}\n          >\n            <Col gap={6}>\n              {/* For password managers */}\n              <input\n                readOnly\n                data-testid='hidden-identifier'\n                id='identifier-field'\n                name='identifier'\n                value={signIn.identifier || ''}\n                style={{ display: 'none' }}\n              />\n              <Form.ControlRow elementId={passwordField.id}>\n                <Form.PasswordInput\n                  {...passwordField.props}\n                  isRequired\n                  autoFocus\n                />\n              </Form.ControlRow>\n              <Form.ControlRow elementId={confirmField.id}>\n                <Form.PasswordInput\n                  {...confirmField.props}\n                  onChange={e => {\n                    if (e.target.value) {\n                      setConfirmPasswordFeedback(e.target.value);\n                    }\n                    return confirmField.props.onChange(e);\n                  }}\n                />\n              </Form.ControlRow>\n              {!requiresNewPassword && (\n                <Form.ControlRow elementId={sessionsField.id}>\n                  <Form.Checkbox {...sessionsField.props} />\n                </Form.ControlRow>\n              )}\n            </Col>\n            <Col gap={3}>\n              <Form.SubmitButton\n                isDisabled={!canSubmit}\n                localizationKey={localizationKeys('signIn.resetPassword.formButtonPrimary')}\n              />\n              <Card.Action elementId='alternativeMethods'>\n                <Card.ActionLink\n                  elementDescriptor={descriptors.backLink}\n                  localizationKey={localizationKeys('backButton')}\n                  onClick={goBack}\n                />\n              </Card.Action>\n            </Col>\n          </Form.Root>\n        </Col>\n      </Card.Content>\n      <Card.Footer />\n    </Card.Root>\n  );\n};\n\nexport const ResetPassword = withCardStateProvider(ResetPasswordInternal);\n"],"mappings":"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"}
+{"version":3,"file":"ResetPassword.js","names":["e: any"],"sources":["../../../src/components/SignIn/ResetPassword.tsx"],"sourcesContent":["import { clerkInvalidFAPIResponse } from '@clerk/shared/internal/clerk-js/errors';\nimport React from 'react';\n\nimport { Card } from '@/ui/elements/Card';\nimport { useCardState, withCardStateProvider } from '@/ui/elements/contexts';\nimport { Form } from '@/ui/elements/Form';\nimport { Header } from '@/ui/elements/Header';\nimport { handleError } from '@/ui/utils/errorHandler';\nimport { createPasswordError } from '@/ui/utils/passwordUtils';\nimport { useFormControl } from '@/ui/utils/useFormControl';\n\nimport { useCoreSignIn, useEnvironment } from '../../contexts';\nimport { Col, descriptors, localizationKeys, useLocalizations } from '../../customizables';\nimport { useConfirmPassword } from '../../hooks';\nimport { useSupportEmail } from '../../hooks/useSupportEmail';\nimport { useRouter } from '../../router';\n\nconst ResetPasswordInternal = () => {\n  const signIn = useCoreSignIn();\n  const card = useCardState();\n  const { navigate } = useRouter();\n  const supportEmail = useSupportEmail();\n  const {\n    userSettings: { passwordSettings },\n  } = useEnvironment();\n\n  const { t, locale } = useLocalizations();\n\n  const requiresNewPassword =\n    signIn.status === 'needs_new_password' &&\n    signIn.firstFactorVerification.strategy !== 'reset_password_email_code' &&\n    signIn.firstFactorVerification.strategy !== 'reset_password_phone_code';\n\n  React.useEffect(() => {\n    if (requiresNewPassword) {\n      card.setError(t(localizationKeys('signIn.resetPassword.requiredMessage')));\n    }\n  }, []);\n\n  const passwordField = useFormControl('password', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__newPassword'),\n    isRequired: true,\n    validatePassword: true,\n    buildErrorMessage: errors => createPasswordError(errors, { t, locale, passwordSettings }),\n  });\n\n  const confirmField = useFormControl('confirmPassword', '', {\n    type: 'password',\n    label: localizationKeys('formFieldLabel__confirmPassword'),\n    isRequired: true,\n  });\n\n  const sessionsField = useFormControl('signOutOfOtherSessions', '', {\n    type: 'checkbox',\n    label: localizationKeys('formFieldLabel__signOutOfOtherSessions'),\n    defaultChecked: true,\n  });\n\n  const { setConfirmPasswordFeedback, isPasswordMatch } = useConfirmPassword({\n    passwordField,\n    confirmPasswordField: confirmField,\n  });\n\n  const canSubmit = isPasswordMatch;\n\n  const validateForm = () => {\n    if (passwordField.value) {\n      setConfirmPasswordFeedback(confirmField.value);\n    }\n  };\n\n  const resetPassword = async () => {\n    if (!canSubmit) {\n      return;\n    }\n\n    passwordField.clearFeedback();\n    confirmField.clearFeedback();\n    try {\n      const { status, createdSessionId } = await signIn.resetPassword({\n        password: passwordField.value,\n        signOutOfOtherSessions: sessionsField.checked,\n      });\n\n      switch (status) {\n        case 'complete':\n          if (createdSessionId) {\n            const queryParams = new URLSearchParams();\n            queryParams.set('createdSessionId', createdSessionId);\n            return navigate(`../reset-password-success?${queryParams.toString()}`);\n          }\n          return console.error(clerkInvalidFAPIResponse(status, supportEmail));\n        case 'needs_second_factor':\n          return navigate('../factor-two');\n        default:\n          return console.error(clerkInvalidFAPIResponse(status, supportEmail));\n      }\n    } catch (e: any) {\n      return handleError(e, [passwordField, confirmField], card.setError);\n    }\n  };\n\n  const goBack = () => {\n    return navigate('../');\n  };\n\n  return (\n    <Card.Root>\n      <Card.Content>\n        <Header.Root showLogo>\n          <Header.Title localizationKey={localizationKeys('signIn.resetPassword.title')} />\n        </Header.Root>\n        <Card.Alert>{card.error}</Card.Alert>\n        <Col\n          elementDescriptor={descriptors.main}\n          gap={8}\n        >\n          <Form.Root\n            onSubmit={resetPassword}\n            onBlur={validateForm}\n            gap={8}\n          >\n            <Col gap={6}>\n              {/* For password managers */}\n              <input\n                readOnly\n                data-testid='hidden-identifier'\n                id='identifier-field'\n                name='identifier'\n                value={signIn.identifier || ''}\n                style={{ display: 'none' }}\n              />\n              <Form.ControlRow elementId={passwordField.id}>\n                <Form.PasswordInput\n                  {...passwordField.props}\n                  isRequired\n                  autoFocus\n                />\n              </Form.ControlRow>\n              <Form.ControlRow elementId={confirmField.id}>\n                <Form.PasswordInput\n                  {...confirmField.props}\n                  onChange={e => {\n                    if (e.target.value) {\n                      setConfirmPasswordFeedback(e.target.value);\n                    }\n                    return confirmField.props.onChange(e);\n                  }}\n                />\n              </Form.ControlRow>\n              {!requiresNewPassword && (\n                <Form.ControlRow elementId={sessionsField.id}>\n                  <Form.Checkbox {...sessionsField.props} />\n                </Form.ControlRow>\n              )}\n            </Col>\n            <Col gap={3}>\n              <Form.SubmitButton\n                isDisabled={!canSubmit}\n                localizationKey={localizationKeys('signIn.resetPassword.formButtonPrimary')}\n              />\n              <Card.Action elementId='alternativeMethods'>\n                <Card.ActionLink\n                  elementDescriptor={descriptors.backLink}\n                  localizationKey={localizationKeys('backButton')}\n                  onClick={goBack}\n                />\n              </Card.Action>\n            </Col>\n          </Form.Root>\n        </Col>\n      </Card.Content>\n      <Card.Footer />\n    </Card.Root>\n  );\n};\n\nexport const ResetPassword = withCardStateProvider(ResetPasswordInternal);\n"],"mappings":"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"}

package/dist/components/SignUp/SignUpForm.js

@@ -11,7 +11,7 @@ import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 //#region src/components/SignUp/SignUpForm.tsx
 const SignUpForm = (props) => {
 	const { handleSubmit, fields, formState, canToggleEmailPhone, onlyLegalAcceptedMissing = false, handleEmailPhoneToggle } = props;
-	const { showOptionalFields } = useAppearance().parsedLayout;
+	const { showOptionalFields } = useAppearance().parsedOptions;
 	const shouldShow = (name) => {
 		if ((name === "emailAddress" || name === "phoneNumber") && canToggleEmailPhone) return !!fields[name];
 		return !!fields[name] && (showOptionalFields || fields[name]?.required);

package/dist/components/SignUp/SignUpForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"SignUpForm.js","names":[],"sources":["../../../src/components/SignUp/SignUpForm.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Form } from '@/ui/elements/Form';\nimport { LegalCheckbox } from '@/ui/elements/LegalConsentCheckbox';\nimport type { FormControlState } from '@/ui/utils/useFormControl';\n\nimport { Col, localizationKeys, useAppearance } from '../../customizables';\nimport { CaptchaElement } from '../../elements/CaptchaElement';\nimport { mqu } from '../../styledSystem';\nimport type { ActiveIdentifier, Fields } from './signUpFormHelpers';\n\ntype SignUpFormProps = {\n  handleSubmit: React.FormEventHandler;\n  fields: Fields;\n  formState: Record<Exclude<keyof Fields, 'ticket'>, FormControlState<any>>;\n  canToggleEmailPhone: boolean;\n  handleEmailPhoneToggle: (type: ActiveIdentifier) => void;\n  onlyLegalAcceptedMissing?: boolean;\n};\n\nexport const SignUpForm = (props: SignUpFormProps) => {\n  const {\n    handleSubmit,\n    fields,\n    formState,\n    canToggleEmailPhone,\n    onlyLegalAcceptedMissing = false,\n    handleEmailPhoneToggle,\n  } = props;\n  const { showOptionalFields } = useAppearance().parsedLayout;\n\n  const shouldShow = (name: keyof typeof fields) => {\n    // In case both email & phone are optional, then don't take into account the\n    // Layout showOptionalFields prop and the required field.\n    if ((name === 'emailAddress' || name === 'phoneNumber') && canToggleEmailPhone) {\n      return !!fields[name];\n    }\n\n    return !!fields[name] && (showOptionalFields || fields[name]?.required);\n  };\n\n  return (\n    <Form.Root\n      onSubmit={handleSubmit}\n      gap={8}\n    >\n      {!onlyLegalAcceptedMissing && (\n        <Col gap={6}>\n          {(shouldShow('firstName') || shouldShow('lastName')) && (\n            <Form.ControlRow\n              elementId='name'\n              sx={{\n                [mqu.sm]: {\n                  flexWrap: 'wrap',\n                },\n              }}\n            >\n              {shouldShow('firstName') && (\n                <Form.PlainInput\n                  {...formState.firstName.props}\n                  isRequired={fields.firstName?.required}\n                  isOptional={!fields.firstName?.required}\n                />\n              )}\n              {shouldShow('lastName') && (\n                <Form.PlainInput\n                  {...formState.lastName.props}\n                  isRequired={fields.lastName?.required}\n                  isOptional={!fields.lastName?.required}\n                />\n              )}\n            </Form.ControlRow>\n          )}\n          {shouldShow('username') && (\n            <Form.ControlRow elementId='username'>\n              <Form.PlainInput\n                {...formState.username.props}\n                isRequired={fields.username?.required}\n                isOptional={!fields.username?.required}\n              />\n            </Form.ControlRow>\n          )}\n          {shouldShow('emailAddress') && (\n            <Form.ControlRow elementId='emailAddress'>\n              <Form.PlainInput\n                {...formState.emailAddress.props}\n                isRequired={fields.emailAddress?.required}\n                isOptional={!fields.emailAddress?.required}\n                isDisabled={fields.emailAddress?.disabled}\n                actionLabel={canToggleEmailPhone ? localizationKeys('signUp.start.actionLink__use_phone') : undefined}\n                onActionClicked={canToggleEmailPhone ? () => handleEmailPhoneToggle('phoneNumber') : undefined}\n              />\n            </Form.ControlRow>\n          )}\n          {shouldShow('phoneNumber') && (\n            <Form.ControlRow elementId='phoneNumber'>\n              <Form.PhoneInput\n                {...formState.phoneNumber.props}\n                isRequired={fields.phoneNumber?.required}\n                isOptional={!fields.phoneNumber?.required}\n                actionLabel={canToggleEmailPhone ? localizationKeys('signUp.start.actionLink__use_email') : undefined}\n                onActionClicked={canToggleEmailPhone ? () => handleEmailPhoneToggle('emailAddress') : undefined}\n              />\n            </Form.ControlRow>\n          )}\n          {shouldShow('password') && (\n            <Form.ControlRow elementId='password'>\n              <Form.PasswordInput\n                {...formState.password.props}\n                isRequired={fields.password?.required}\n                isOptional={!fields.password?.required}\n              />\n            </Form.ControlRow>\n          )}\n        </Col>\n      )}\n      <Col center>\n        <CaptchaElement />\n        <Col\n          gap={6}\n          sx={{\n            width: '100%',\n          }}\n        >\n          {shouldShow('legalAccepted') && (\n            <Form.ControlRow elementId='legalAccepted'>\n              <LegalCheckbox\n                {...formState.legalAccepted.props}\n                isRequired={fields.legalAccepted?.required}\n              />\n            </Form.ControlRow>\n          )}\n          <Form.SubmitButton\n            hasArrow\n            localizationKey={localizationKeys('formButtonPrimary')}\n          />\n        </Col>\n      </Col>\n    </Form.Root>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAoBA,MAAa,cAAc,UAA2B;CACpD,MAAM,EACJ,cACA,QACA,WACA,qBACA,2BAA2B,OAC3B,2BACE;CACJ,MAAM,EAAE,uBAAuB,eAAe,CAAC;CAE/C,MAAM,cAAc,SAA8B;AAGhD,OAAK,SAAS,kBAAkB,SAAS,kBAAkB,oBACzD,QAAO,CAAC,CAAC,OAAO;AAGlB,SAAO,CAAC,CAAC,OAAO,UAAU,sBAAsB,OAAO,OAAO;;AAGhE,QACE,qBAAC,KAAK;EACJ,UAAU;EACV,KAAK;aAEJ,CAAC,4BACA,qBAAC;GAAI,KAAK;;KACN,WAAW,YAAY,IAAI,WAAW,WAAW,KACjD,qBAAC,KAAK;KACJ,WAAU;KACV,IAAI,GACD,IAAI,KAAK,EACR,UAAU,QACX,EACF;gBAEA,WAAW,YAAY,IACtB,oBAAC,KAAK;MACJ,GAAI,UAAU,UAAU;MACxB,YAAY,OAAO,WAAW;MAC9B,YAAY,CAAC,OAAO,WAAW;OAC/B,EAEH,WAAW,WAAW,IACrB,oBAAC,KAAK;MACJ,GAAI,UAAU,SAAS;MACvB,YAAY,OAAO,UAAU;MAC7B,YAAY,CAAC,OAAO,UAAU;OAC9B;MAEY;IAEnB,WAAW,WAAW,IACrB,oBAAC,KAAK;KAAW,WAAU;eACzB,oBAAC,KAAK;MACJ,GAAI,UAAU,SAAS;MACvB,YAAY,OAAO,UAAU;MAC7B,YAAY,CAAC,OAAO,UAAU;OAC9B;MACc;IAEnB,WAAW,eAAe,IACzB,oBAAC,KAAK;KAAW,WAAU;eACzB,oBAAC,KAAK;MACJ,GAAI,UAAU,aAAa;MAC3B,YAAY,OAAO,cAAc;MACjC,YAAY,CAAC,OAAO,cAAc;MAClC,YAAY,OAAO,cAAc;MACjC,aAAa,sBAAsB,iBAAiB,qCAAqC,GAAG;MAC5F,iBAAiB,4BAA4B,uBAAuB,cAAc,GAAG;OACrF;MACc;IAEnB,WAAW,cAAc,IACxB,oBAAC,KAAK;KAAW,WAAU;eACzB,oBAAC,KAAK;MACJ,GAAI,UAAU,YAAY;MAC1B,YAAY,OAAO,aAAa;MAChC,YAAY,CAAC,OAAO,aAAa;MACjC,aAAa,sBAAsB,iBAAiB,qCAAqC,GAAG;MAC5F,iBAAiB,4BAA4B,uBAAuB,eAAe,GAAG;OACtF;MACc;IAEnB,WAAW,WAAW,IACrB,oBAAC,KAAK;KAAW,WAAU;eACzB,oBAAC,KAAK;MACJ,GAAI,UAAU,SAAS;MACvB,YAAY,OAAO,UAAU;MAC7B,YAAY,CAAC,OAAO,UAAU;OAC9B;MACc;;IAEhB,EAER,qBAAC;GAAI;cACH,oBAAC,mBAAiB,EAClB,qBAAC;IACC,KAAK;IACL,IAAI,EACF,OAAO,QACR;eAEA,WAAW,gBAAgB,IAC1B,oBAAC,KAAK;KAAW,WAAU;eACzB,oBAAC;MACC,GAAI,UAAU,cAAc;MAC5B,YAAY,OAAO,eAAe;OAClC;MACc,EAEpB,oBAAC,KAAK;KACJ;KACA,iBAAiB,iBAAiB,oBAAoB;MACtD;KACE;IACF;GACI"}
+{"version":3,"file":"SignUpForm.js","names":[],"sources":["../../../src/components/SignUp/SignUpForm.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Form } from '@/ui/elements/Form';\nimport { LegalCheckbox } from '@/ui/elements/LegalConsentCheckbox';\nimport type { FormControlState } from '@/ui/utils/useFormControl';\n\nimport { Col, localizationKeys, useAppearance } from '../../customizables';\nimport { CaptchaElement } from '../../elements/CaptchaElement';\nimport { mqu } from '../../styledSystem';\nimport type { ActiveIdentifier, Fields } from './signUpFormHelpers';\n\ntype SignUpFormProps = {\n  handleSubmit: React.FormEventHandler;\n  fields: Fields;\n  formState: Record<Exclude<keyof Fields, 'ticket'>, FormControlState<any>>;\n  canToggleEmailPhone: boolean;\n  handleEmailPhoneToggle: (type: ActiveIdentifier) => void;\n  onlyLegalAcceptedMissing?: boolean;\n};\n\nexport const SignUpForm = (props: SignUpFormProps) => {\n  const {\n    handleSubmit,\n    fields,\n    formState,\n    canToggleEmailPhone,\n    onlyLegalAcceptedMissing = false,\n    handleEmailPhoneToggle,\n  } = props;\n  const { showOptionalFields } = useAppearance().parsedOptions;\n\n  const shouldShow = (name: keyof typeof fields) => {\n    // In case both email & phone are optional, then don't take into account the\n    // Options showOptionalFields prop and the required field.\n    if ((name === 'emailAddress' || name === 'phoneNumber') && canToggleEmailPhone) {\n      return !!fields[name];\n    }\n\n    return !!fields[name] && (showOptionalFields || fields[name]?.required);\n  };\n\n  return (\n    <Form.Root\n      onSubmit={handleSubmit}\n      gap={8}\n    >\n      {!onlyLegalAcceptedMissing && (\n        <Col gap={6}>\n          {(shouldShow('firstName') || shouldShow('lastName')) && (\n            <Form.ControlRow\n              elementId='name'\n              sx={{\n                [mqu.sm]: {\n                  flexWrap: 'wrap',\n                },\n              }}\n            >\n              {shouldShow('firstName') && (\n                <Form.PlainInput\n                  {...formState.firstName.props}\n                  isRequired={fields.firstName?.required}\n                  isOptional={!fields.firstName?.required}\n                />\n              )}\n              {shouldShow('lastName') && (\n                <Form.PlainInput\n                  {...formState.lastName.props}\n                  isRequired={fields.lastName?.required}\n                  isOptional={!fields.lastName?.required}\n                />\n              )}\n            </Form.ControlRow>\n          )}\n          {shouldShow('username') && (\n            <Form.ControlRow elementId='username'>\n              <Form.PlainInput\n                {...formState.username.props}\n                isRequired={fields.username?.required}\n                isOptional={!fields.username?.required}\n              />\n            </Form.ControlRow>\n          )}\n          {shouldShow('emailAddress') && (\n            <Form.ControlRow elementId='emailAddress'>\n              <Form.PlainInput\n                {...formState.emailAddress.props}\n                isRequired={fields.emailAddress?.required}\n                isOptional={!fields.emailAddress?.required}\n                isDisabled={fields.emailAddress?.disabled}\n                actionLabel={canToggleEmailPhone ? localizationKeys('signUp.start.actionLink__use_phone') : undefined}\n                onActionClicked={canToggleEmailPhone ? () => handleEmailPhoneToggle('phoneNumber') : undefined}\n              />\n            </Form.ControlRow>\n          )}\n          {shouldShow('phoneNumber') && (\n            <Form.ControlRow elementId='phoneNumber'>\n              <Form.PhoneInput\n                {...formState.phoneNumber.props}\n                isRequired={fields.phoneNumber?.required}\n                isOptional={!fields.phoneNumber?.required}\n                actionLabel={canToggleEmailPhone ? localizationKeys('signUp.start.actionLink__use_email') : undefined}\n                onActionClicked={canToggleEmailPhone ? () => handleEmailPhoneToggle('emailAddress') : undefined}\n              />\n            </Form.ControlRow>\n          )}\n          {shouldShow('password') && (\n            <Form.ControlRow elementId='password'>\n              <Form.PasswordInput\n                {...formState.password.props}\n                isRequired={fields.password?.required}\n                isOptional={!fields.password?.required}\n              />\n            </Form.ControlRow>\n          )}\n        </Col>\n      )}\n      <Col center>\n        <CaptchaElement />\n        <Col\n          gap={6}\n          sx={{\n            width: '100%',\n          }}\n        >\n          {shouldShow('legalAccepted') && (\n            <Form.ControlRow elementId='legalAccepted'>\n              <LegalCheckbox\n                {...formState.legalAccepted.props}\n                isRequired={fields.legalAccepted?.required}\n              />\n            </Form.ControlRow>\n          )}\n          <Form.SubmitButton\n            hasArrow\n            localizationKey={localizationKeys('formButtonPrimary')}\n          />\n        </Col>\n      </Col>\n    </Form.Root>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAoBA,MAAa,cAAc,UAA2B;CACpD,MAAM,EACJ,cACA,QACA,WACA,qBACA,2BAA2B,OAC3B,2BACE;CACJ,MAAM,EAAE,uBAAuB,eAAe,CAAC;CAE/C,MAAM,cAAc,SAA8B;AAGhD,OAAK,SAAS,kBAAkB,SAAS,kBAAkB,oBACzD,QAAO,CAAC,CAAC,OAAO;AAGlB,SAAO,CAAC,CAAC,OAAO,UAAU,sBAAsB,OAAO,OAAO;;AAGhE,QACE,qBAAC,KAAK;EACJ,UAAU;EACV,KAAK;aAEJ,CAAC,4BACA,qBAAC;GAAI,KAAK;;KACN,WAAW,YAAY,IAAI,WAAW,WAAW,KACjD,qBAAC,KAAK;KACJ,WAAU;KACV,IAAI,GACD,IAAI,KAAK,EACR,UAAU,QACX,EACF;gBAEA,WAAW,YAAY,IACtB,oBAAC,KAAK;MACJ,GAAI,UAAU,UAAU;MACxB,YAAY,OAAO,WAAW;MAC9B,YAAY,CAAC,OAAO,WAAW;OAC/B,EAEH,WAAW,WAAW,IACrB,oBAAC,KAAK;MACJ,GAAI,UAAU,SAAS;MACvB,YAAY,OAAO,UAAU;MAC7B,YAAY,CAAC,OAAO,UAAU;OAC9B;MAEY;IAEnB,WAAW,WAAW,IACrB,oBAAC,KAAK;KAAW,WAAU;eACzB,oBAAC,KAAK;MACJ,GAAI,UAAU,SAAS;MACvB,YAAY,OAAO,UAAU;MAC7B,YAAY,CAAC,OAAO,UAAU;OAC9B;MACc;IAEnB,WAAW,eAAe,IACzB,oBAAC,KAAK;KAAW,WAAU;eACzB,oBAAC,KAAK;MACJ,GAAI,UAAU,aAAa;MAC3B,YAAY,OAAO,cAAc;MACjC,YAAY,CAAC,OAAO,cAAc;MAClC,YAAY,OAAO,cAAc;MACjC,aAAa,sBAAsB,iBAAiB,qCAAqC,GAAG;MAC5F,iBAAiB,4BAA4B,uBAAuB,cAAc,GAAG;OACrF;MACc;IAEnB,WAAW,cAAc,IACxB,oBAAC,KAAK;KAAW,WAAU;eACzB,oBAAC,KAAK;MACJ,GAAI,UAAU,YAAY;MAC1B,YAAY,OAAO,aAAa;MAChC,YAAY,CAAC,OAAO,aAAa;MACjC,aAAa,sBAAsB,iBAAiB,qCAAqC,GAAG;MAC5F,iBAAiB,4BAA4B,uBAAuB,eAAe,GAAG;OACtF;MACc;IAEnB,WAAW,WAAW,IACrB,oBAAC,KAAK;KAAW,WAAU;eACzB,oBAAC,KAAK;MACJ,GAAI,UAAU,SAAS;MACvB,YAAY,OAAO,UAAU;MAC7B,YAAY,CAAC,OAAO,UAAU;OAC9B;MACc;;IAEhB,EAER,qBAAC;GAAI;cACH,oBAAC,mBAAiB,EAClB,qBAAC;IACC,KAAK;IACL,IAAI,EACF,OAAO,QACR;eAEA,WAAW,gBAAgB,IAC1B,oBAAC,KAAK;KAAW,WAAU;eACzB,oBAAC;MACC,GAAI,UAAU,cAAc;MAC5B,YAAY,OAAO,eAAe;OAClC;MACc,EAEpB,oBAAC,KAAK;KACJ;KACA,iBAAiB,iBAAiB,oBAAoB;MACtD;KACE;IACF;GACI"}

package/dist/components/SignUp/SignUpStart.js

@@ -42,7 +42,7 @@ function SignUpStartInternal() {
 	const clerk = useClerk();
 	const status = useLoadingStatus();
 	const signUp = useCoreSignUp();
-	const { showOptionalFields } = useAppearance().parsedLayout;
+	const { showOptionalFields } = useAppearance().parsedOptions;
 	const { userSettings, authConfig } = useEnvironment();
 	const { navigate } = useRouter();
 	const { attributes } = userSettings;