@clerk/ui 1.0.0-snapshot.v20251217194100 → 1.0.0-snapshot.v20251218165926

package/dist/components/devPrompts/EnableOrganizationsPrompt/index.js

@@ -1,13 +1,12 @@
 import { useEnvironment } from "../../../contexts/EnvironmentContext.js";
 import { InternalThemeProvider } from "../../../styledSystem/InternalThemeProvider.js";
-import { common } from "../../../styledSystem/common.js";
-import { Box, Flex, Span } from "../../../customizables/index.js";
+import { Flex } from "../../../customizables/index.js";
 import { Modal } from "../../../elements/Modal.js";
 import { Portal } from "../../../elements/Portal.js";
 import { ClerkLogoIcon, PromptContainer, PromptSuccessIcon, basePromptElementStyles } from "../shared.js";
-import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react";
+import React, { forwardRef, useId, useLayoutEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "@emotion/react/jsx-runtime";
-import { useClerk } from "@clerk/shared/react";
+import { createContextAndHook, useClerk } from "@clerk/shared/react";
 import { css } from "@emotion/react";
 
 //#region src/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -19,6 +18,7 @@ const EnableOrganizationsPromptInternal = ({ caller, onSuccess, onClose }) => {
 	const [allowPersonalAccount, setAllowPersonalAccount] = useState(false);
 	const initialFocusRef = useRef(null);
 	const environment = useEnvironment();
+	const radioGroupLabelId = useId();
 	const isComponent = !caller.startsWith("use");
 	const hasPersonalAccountsEnabled = typeof environment?.organizationSettings.forceOrganizationSelection !== "undefined";
 	const handleEnableOrganizations = () => {
@@ -91,6 +91,7 @@ const EnableOrganizationsPromptInternal = ({ caller, onSuccess, onClose }) => {
 									"."
 								]
 							}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("p", {
+								id: radioGroupLabelId,
 								css: [basePromptElementStyles, css`
                         color: #b4b4b4;
                         font-size: 0.8125rem;
@@ -118,31 +119,32 @@ const EnableOrganizationsPromptInternal = ({ caller, onSuccess, onClose }) => {
 								children: "Learn more"
 							})] })
 						}),
-						hasPersonalAccountsEnabled && /* @__PURE__ */ jsx(Box, {
-							sx: (t) => ({
-								display: "grid",
-								gridTemplateRows: isEnabled ? "0fr" : "1fr",
-								transition: `grid-template-rows ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,
-								marginInline: "-0.5rem",
-								overflow: "hidden"
-							}),
-							...isEnabled && { inert: "" },
-							children: /* @__PURE__ */ jsx(Flex, {
-								sx: (t) => ({
-									minHeight: 0,
-									paddingInline: "0.5rem",
-									opacity: isEnabled ? 0 : 1,
-									transition: `opacity ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`
-								}),
-								children: /* @__PURE__ */ jsx(Flex, {
-									sx: (t) => ({ marginTop: t.sizes.$2 }),
-									children: /* @__PURE__ */ jsx(Switch, {
-										label: "Allow personal account",
-										description: "Allow users to work outside of an organization by providing a personal account. We do not recommend for B2B SaaS apps.",
-										checked: allowPersonalAccount,
-										onChange: () => setAllowPersonalAccount((prev) => !prev)
-									})
-								})
+						hasPersonalAccountsEnabled && !isEnabled && /* @__PURE__ */ jsx(Flex, {
+							sx: (t) => ({ marginTop: t.sizes.$2 }),
+							direction: "col",
+							children: /* @__PURE__ */ jsxs(RadioGroup, {
+								value: allowPersonalAccount ? "optional" : "required",
+								onChange: (value) => setAllowPersonalAccount(value === "optional"),
+								labelledBy: radioGroupLabelId,
+								children: [/* @__PURE__ */ jsx(RadioGroupItem, {
+									value: "required",
+									label: /* @__PURE__ */ jsxs(Flex, {
+										wrap: "wrap",
+										sx: (t) => ({
+											columnGap: t.sizes.$2,
+											rowGap: t.sizes.$1
+										}),
+										children: [/* @__PURE__ */ jsx("span", { children: "Membership required" }), /* @__PURE__ */ jsx(PromptBadge, { children: "Standard" })]
+									}),
+									description: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+										className: "block",
+										children: "Users need to belong to at least one organization."
+									}), /* @__PURE__ */ jsx("span", { children: "Common for most B2B SaaS applications" })] })
+								}), /* @__PURE__ */ jsx(RadioGroupItem, {
+									value: "optional",
+									label: "Membership optional",
+									description: "Users can work outside of an organization with a personal account"
+								})]
 							})
 						})
 					]
@@ -267,103 +269,164 @@ const PromptButton = forwardRef(({ variant = "solid",...props }, ref) => {
 		...props
 	});
 });
-const TRACK_PADDING = "2px";
-const TRACK_INNER_WIDTH = (t) => t.sizes.$6;
-const TRACK_HEIGHT = (t) => t.sizes.$4;
-const THUMB_WIDTH = (t) => t.sizes.$3;
-const Switch = forwardRef(({ label, description, checked: controlledChecked, defaultChecked, onChange,...props }, ref) => {
+const PromptBadge = ({ children }) => {
+	return /* @__PURE__ */ jsx("span", {
+		css: css`
+        ${basePromptElementStyles};
+        display: inline-flex;
+        align-items: center;
+        padding: 0.125rem 0.375rem;
+        border-radius: 0.25rem;
+        font-size: 0.6875rem;
+        font-weight: 500;
+        line-height: 1.23;
+        background-color: #ebebeb;
+        color: #2b2b34;
+        white-space: nowrap;
+      `,
+		children
+	});
+};
+const [RadioGroupContext, useRadioGroup] = createContextAndHook("RadioGroupContext");
+const RadioGroup = ({ value, onChange, children, labelledBy }) => {
+	const name = useId();
+	const contextValue = React.useMemo(() => ({ value: {
+		name,
+		value,
+		onChange
+	} }), [
+		name,
+		value,
+		onChange
+	]);
+	return /* @__PURE__ */ jsx(RadioGroupContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Flex, {
+			role: "radiogroup",
+			direction: "col",
+			gap: 3,
+			"aria-orientation": "vertical",
+			"aria-labelledby": labelledBy,
+			children
+		})
+	});
+};
+const RADIO_INDICATOR_SIZE = "1rem";
+const RADIO_GAP = "0.5rem";
+const RadioGroupItem = ({ value, label, description }) => {
+	const { name, value: selectedValue, onChange } = useRadioGroup();
 	const descriptionId = useId();
-	const isControlled = controlledChecked !== void 0;
-	const [internalChecked, setInternalChecked] = useState(!!defaultChecked);
-	const checked = isControlled ? controlledChecked : internalChecked;
-	const handleChange = (e) => {
-		if (!isControlled) setInternalChecked(e.target.checked);
-		onChange?.(e);
-	};
+	const checked = value === selectedValue;
 	return /* @__PURE__ */ jsxs(Flex, {
 		direction: "col",
 		gap: 1,
-		children: [/* @__PURE__ */ jsxs(Flex, {
-			as: "label",
-			gap: 2,
-			align: "center",
-			sx: {
-				isolation: "isolate",
-				userSelect: "none",
-				"&:has(input:focus-visible) > input + span": {
-					outline: "2px solid white",
-					outlineOffset: "2px"
-				},
-				"&:has(input:disabled) > input + span": {
-					opacity: .6,
-					cursor: "not-allowed",
-					pointerEvents: "none"
-				}
-			},
+		children: [/* @__PURE__ */ jsxs("label", {
+			css: css`
+          ${basePromptElementStyles};
+          display: flex;
+          align-items: flex-start;
+          gap: ${RADIO_GAP};
+          cursor: pointer;
+          user-select: none;
+
+          &:has(input:focus-visible) > span:first-of-type {
+            outline: 2px solid white;
+            outline-offset: 2px;
+          }
+
+          &:hover:has(input:not(:checked)) > span:first-of-type {
+            background-color: rgba(255, 255, 255, 0.08);
+          }
+
+          &:hover:has(input:checked) > span:first-of-type {
+            background-color: rgba(108, 71, 255, 0.8);
+            background-color: color-mix(in srgb, #6c47ff 80%, transparent);
+          }
+        `,
 			children: [
 				/* @__PURE__ */ jsx("input", {
-					type: "checkbox",
-					...props,
-					ref,
-					role: "switch",
-					...isControlled ? { checked } : { defaultChecked },
-					onChange: handleChange,
-					css: { ...common.visuallyHidden() },
-					"aria-describedby": description ? descriptionId : void 0
+					type: "radio",
+					name,
+					value,
+					checked,
+					onChange: () => onChange(value),
+					"aria-describedby": description ? descriptionId : void 0,
+					css: css`
+            ${basePromptElementStyles};
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border-width: 0;
+          `
 				}),
-				/* @__PURE__ */ jsx(Span, {
-					sx: (t) => {
-						return {
-							display: "flex",
-							alignItems: "center",
-							paddingInline: TRACK_PADDING,
-							width: `calc(${TRACK_INNER_WIDTH(t)} + ${TRACK_PADDING} + ${TRACK_PADDING})`,
-							height: `calc(${TRACK_HEIGHT(t)} + ${TRACK_PADDING})`,
-							border: "1px solid rgba(255, 255, 255, 0.2)",
-							backgroundColor: checked ? "#6C47FF" : "rgba(0, 0, 0, 0.2)",
-							borderRadius: 999,
-							transition: "background-color 0.2s ease-in-out"
-						};
-					},
-					children: /* @__PURE__ */ jsx(Span, { sx: (t) => {
-						const size = THUMB_WIDTH(t);
-						const maxTranslateX = `calc(${TRACK_INNER_WIDTH(t)} - ${size} - ${TRACK_PADDING})`;
-						return {
-							width: size,
-							height: size,
-							borderRadius: 9999,
-							backgroundColor: "white",
-							boxShadow: "0px 0px 0px 1px rgba(0, 0, 0, 0.1)",
-							transform: `translateX(${checked ? maxTranslateX : "0"})`,
-							transition: "transform 0.2s ease-in-out",
-							"@media (prefers-reduced-motion: reduce)": { transition: "none" }
-						};
-					} })
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					css: css`
+            ${basePromptElementStyles};
+            position: relative;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: ${RADIO_INDICATOR_SIZE};
+            height: ${RADIO_INDICATOR_SIZE};
+            margin-top: 0.125rem;
+            flex-shrink: 0;
+            border-radius: 50%;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            background-color: transparent;
+            transition: 120ms ease-in-out;
+            transition-property: border-color, background-color, box-shadow;
+
+            ${checked && css`
+              border-width: 2px;
+              border-color: #6c47ff;
+              background-color: #6c47ff;
+              background-color: color-mix(in srgb, #6c47ff 100%, transparent);
+              box-shadow: 0 0 0 2px rgba(108, 71, 255, 0.2);
+            `}
+
+            &::after {
+              content: '';
+              position: absolute;
+              width: 0.375rem;
+              height: 0.375rem;
+              border-radius: 50%;
+              background-color: white;
+              opacity: ${checked ? 1 : 0};
+              transform: scale(${checked ? 1 : 0});
+              transition: 120ms ease-in-out;
+              transition-property: opacity, transform;
+            }
+          `
 				}),
 				/* @__PURE__ */ jsx("span", {
 					css: [basePromptElementStyles, css`
-                font-size: 0.875rem;
-                font-weight: 500;
-                line-height: 1.25;
-                color: white;
-              `],
+              font-size: 0.875rem;
+              font-weight: 500;
+              line-height: 1.25;
+              color: white;
+            `],
 					children: label
 				})
 			]
-		}), description ? /* @__PURE__ */ jsx(Span, {
+		}), description && /* @__PURE__ */ jsx("span", {
 			id: descriptionId,
-			sx: (t) => [basePromptElementStyles, {
-				display: "block",
-				paddingInlineStart: `calc(${TRACK_INNER_WIDTH(t)} + ${TRACK_PADDING} + ${TRACK_PADDING} + ${t.sizes.$2})`,
-				fontSize: "0.75rem",
-				lineHeight: "1.3333333333",
-				color: "#c3c3c6",
-				textWrap: "pretty"
-			}],
+			css: [basePromptElementStyles, css`
+              padding-inline-start: calc(${RADIO_INDICATOR_SIZE} + ${RADIO_GAP});
+              font-size: 0.75rem;
+              line-height: 1.33;
+              color: #c3c3c6;
+              text-wrap: pretty;
+            `],
 			children: description
-		}) : null]
+		})]
 	});
-});
+};
 const Link = forwardRef(({ children, css: cssProp,...props }, ref) => {
 	return /* @__PURE__ */ jsx("a", {
 		ref,

package/dist/components/devPrompts/EnableOrganizationsPrompt/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["params: EnableEnvironmentSettingParams","frontFaceType: 'idle' | 'success'","backFaceType: 'warning' | 'success'"],"sources":["../../../../src/components/devPrompts/EnableOrganizationsPrompt/index.tsx"],"sourcesContent":["import { useClerk } from '@clerk/shared/react';\nimport type { __internal_EnableOrganizationsPromptProps, EnableEnvironmentSettingParams } from '@clerk/shared/types';\n// eslint-disable-next-line no-restricted-imports\nimport type { SerializedStyles } from '@emotion/react';\n// eslint-disable-next-line no-restricted-imports\nimport { css, type Theme } from '@emotion/react';\nimport { forwardRef, useId, useLayoutEffect, useRef, useState } from 'react';\n\nimport { useEnvironment } from '@/ui/contexts';\nimport { Modal } from '@/ui/elements/Modal';\nimport { common, InternalThemeProvider } from '@/ui/styledSystem';\n\nimport { Box, Flex, Span } from '../../../customizables';\nimport { Portal } from '../../../elements/Portal';\nimport { basePromptElementStyles, ClerkLogoIcon, PromptContainer, PromptSuccessIcon } from '../shared';\n\nconst organizationsDashboardUrl = 'https://dashboard.clerk.com/~/organizations-settings';\n\nconst EnableOrganizationsPromptInternal = ({\n  caller,\n  onSuccess,\n  onClose,\n}: __internal_EnableOrganizationsPromptProps) => {\n  const clerk = useClerk();\n  const [isLoading, setIsLoading] = useState(false);\n  const [isEnabled, setIsEnabled] = useState(false);\n  const [allowPersonalAccount, setAllowPersonalAccount] = useState(false);\n\n  const initialFocusRef = useRef<HTMLHeadingElement>(null);\n  const environment = useEnvironment();\n\n  const isComponent = !caller.startsWith('use');\n\n  // 'forceOrganizationSelection' is omitted from the environment settings object if the instance does not have it available as a feature\n  const hasPersonalAccountsEnabled =\n    typeof environment?.organizationSettings.forceOrganizationSelection !== 'undefined';\n\n  const handleEnableOrganizations = () => {\n    setIsLoading(true);\n\n    const params: EnableEnvironmentSettingParams = {\n      enable_organizations: true,\n    };\n\n    if (hasPersonalAccountsEnabled) {\n      params.organization_allow_personal_accounts = allowPersonalAccount;\n    }\n\n    void environment\n      .__internal_enableEnvironmentSetting(params)\n      .then(() => {\n        setIsEnabled(true);\n        setIsLoading(false);\n      })\n      .catch(() => {\n        setIsLoading(false);\n      });\n  };\n\n  return (\n    <Portal>\n      <Modal\n        canCloseModal={false}\n        containerSx={() => ({ alignItems: 'center' })}\n        initialFocusRef={initialFocusRef}\n      >\n        <PromptContainer\n          sx={() => ({\n            display: 'flex',\n            flexDirection: 'column',\n            width: '30rem',\n            maxWidth: 'calc(100vw - 2rem)',\n          })}\n        >\n          <Flex\n            direction='col'\n            sx={t => ({\n              padding: `${t.sizes.$4} ${t.sizes.$6}`,\n              paddingBottom: t.sizes.$4,\n              gap: t.sizes.$2,\n            })}\n          >\n            <Flex\n              as='header'\n              align='center'\n              sx={t => ({\n                gap: t.sizes.$2,\n              })}\n            >\n              <CoinFlip isEnabled={isEnabled} />\n\n              <h1\n                css={[\n                  basePromptElementStyles,\n                  css`\n                    color: white;\n                    font-size: 0.875rem;\n                    font-weight: 500;\n                    outline: none;\n                  `,\n                ]}\n                tabIndex={-1}\n                ref={initialFocusRef}\n              >\n                {isEnabled ? 'Organizations feature enabled' : 'Organizations feature required'}\n              </h1>\n            </Flex>\n\n            <Flex\n              direction='col'\n              align='start'\n              sx={t => ({\n                gap: t.sizes.$0x5,\n              })}\n            >\n              {isEnabled ? (\n                <p\n                  css={[\n                    basePromptElementStyles,\n                    css`\n                      color: #b4b4b4;\n                      font-size: 0.8125rem;\n                      font-weight: 400;\n                      line-height: 1.3;\n                    `,\n                  ]}\n                >\n                  {clerk.user\n                    ? `The Organizations feature has been enabled for your application. A default organization named \"My Organization\" was created automatically. You can manage or rename it in your`\n                    : `The Organizations feature has been enabled for your application. You can manage it in your`}{' '}\n                  <Link\n                    href={organizationsDashboardUrl}\n                    target='_blank'\n                    rel='noopener noreferrer'\n                  >\n                    dashboard\n                  </Link>\n                  .\n                </p>\n              ) : (\n                <>\n                  <p\n                    css={[\n                      basePromptElementStyles,\n                      css`\n                        color: #b4b4b4;\n                        font-size: 0.8125rem;\n                        font-weight: 400;\n                        line-height: 1.23;\n                      `,\n                    ]}\n                  >\n                    Enable Organizations to use{' '}\n                    <code\n                      css={[\n                        basePromptElementStyles,\n                        css`\n                          font-size: 0.75rem;\n                          color: white;\n                          font-family: monospace;\n                          line-height: 1.23;\n                        `,\n                      ]}\n                    >\n                      {isComponent ? `<${caller} />` : caller}\n                    </code>{' '}\n                  </p>\n\n                  <Link\n                    href='https://clerk.com/docs/guides/organizations/overview'\n                    target='_blank'\n                    rel='noopener noreferrer'\n                  >\n                    Learn more\n                  </Link>\n                </>\n              )}\n            </Flex>\n\n            {hasPersonalAccountsEnabled && (\n              <Box\n                sx={t => ({\n                  display: 'grid',\n                  gridTemplateRows: isEnabled ? '0fr' : '1fr',\n                  transition: `grid-template-rows ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,\n                  marginInline: '-0.5rem',\n                  overflow: 'hidden',\n                })}\n                {...(isEnabled && { inert: '' })}\n              >\n                <Flex\n                  sx={t => ({\n                    minHeight: 0,\n                    paddingInline: '0.5rem',\n                    opacity: isEnabled ? 0 : 1,\n                    transition: `opacity ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,\n                  })}\n                >\n                  <Flex sx={t => ({ marginTop: t.sizes.$2 })}>\n                    <Switch\n                      label='Allow personal account'\n                      description='Allow users to work outside of an organization by providing a personal account. We do not recommend for B2B SaaS apps.'\n                      checked={allowPersonalAccount}\n                      onChange={() => setAllowPersonalAccount(prev => !prev)}\n                    />\n                  </Flex>\n                </Flex>\n              </Box>\n            )}\n          </Flex>\n\n          <span\n            css={css`\n              height: 1px;\n              display: block;\n              width: calc(100% - 2px);\n              margin-inline: auto;\n              background-color: #151515;\n              box-shadow: 0px 1px 0px 0px #424242;\n            `}\n          />\n\n          <Flex\n            justify='center'\n            sx={t => ({\n              padding: `${t.sizes.$4} ${t.sizes.$6}`,\n              gap: t.sizes.$3,\n              justifyContent: 'flex-end',\n            })}\n          >\n            {isEnabled ? (\n              <PromptButton\n                variant='solid'\n                onClick={() => {\n                  if (!clerk.user) {\n                    void clerk.redirectToSignIn();\n                    clerk.__internal_closeEnableOrganizationsPrompt?.();\n                  } else {\n                    onSuccess?.();\n                  }\n                }}\n              >\n                {clerk.user ? 'Continue' : 'Sign in to continue'}\n              </PromptButton>\n            ) : (\n              <>\n                <PromptButton\n                  variant='outline'\n                  onClick={() => {\n                    clerk?.__internal_closeEnableOrganizationsPrompt?.();\n                    onClose?.();\n                  }}\n                >\n                  I&apos;ll remove it myself\n                </PromptButton>\n\n                <PromptButton\n                  variant='solid'\n                  onClick={handleEnableOrganizations}\n                  disabled={isLoading}\n                >\n                  Enable Organizations\n                </PromptButton>\n              </>\n            )}\n          </Flex>\n        </PromptContainer>\n      </Modal>\n    </Portal>\n  );\n};\n\n/**\n * A prompt that allows the user to enable the Organizations feature for their development instance\n * @internal\n */\nexport const EnableOrganizationsPrompt = (props: __internal_EnableOrganizationsPromptProps) => {\n  return (\n    <InternalThemeProvider>\n      <EnableOrganizationsPromptInternal {...props} />\n    </InternalThemeProvider>\n  );\n};\n\nconst baseButtonStyles = css`\n  ${basePromptElementStyles};\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 1.75rem;\n  padding: 0.375rem 0.625rem;\n  border-radius: 0.375rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  letter-spacing: 0.12px;\n  color: white;\n  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32);\n  white-space: nowrap;\n  user-select: none;\n  color: white;\n  outline: none;\n\n  &:not(:disabled) {\n    transition: 120ms ease-in-out;\n    transition-property: background-color, border-color, box-shadow, color;\n  }\n\n  &:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  &:focus-visible:not(:disabled) {\n    outline: 2px solid white;\n    outline-offset: 2px;\n  }\n`;\n\nconst buttonSolidStyles = css`\n  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;\n  box-shadow:\n    0 0 3px 0 rgba(253, 224, 71, 0) inset,\n    0 0 0 1px rgba(255, 255, 255, 0.04) inset,\n    0 1px 0 0 rgba(255, 255, 255, 0.04) inset,\n    0 0 0 1px rgba(0, 0, 0, 0.12),\n    0 1.5px 2px 0 rgba(0, 0, 0, 0.48);\n\n  &:hover:not(:disabled) {\n    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.15) 100%), #5f5f5f;\n    box-shadow:\n      0 0 3px 0 rgba(253, 224, 71, 0) inset,\n      0 0 0 1px rgba(255, 255, 255, 0.04) inset,\n      0 1px 0 0 rgba(255, 255, 255, 0.04) inset,\n      0 0 0 1px rgba(0, 0, 0, 0.12),\n      0 1.5px 2px 0 rgba(0, 0, 0, 0.48);\n  }\n`;\n\nconst buttonOutlineStyles = css`\n  border: 1px solid rgba(118, 118, 132, 0.25);\n  background: rgba(69, 69, 69, 0.1);\n\n  &:hover:not(:disabled) {\n    border-color: rgba(118, 118, 132, 0.5);\n  }\n`;\n\nconst buttonVariantStyles = {\n  solid: buttonSolidStyles,\n  outline: buttonOutlineStyles,\n} as const;\n\ntype PromptButtonVariant = keyof typeof buttonVariantStyles;\n\ntype PromptButtonProps = Pick<React.ComponentProps<'button'>, 'onClick' | 'children' | 'disabled'> & {\n  variant?: PromptButtonVariant;\n};\n\nconst PromptButton = forwardRef<HTMLButtonElement, PromptButtonProps>(({ variant = 'solid', ...props }, ref) => {\n  return (\n    <button\n      ref={ref}\n      type='button'\n      css={[baseButtonStyles, buttonVariantStyles[variant]]}\n      {...props}\n    />\n  );\n});\n\ntype SwitchProps = React.ComponentProps<'input'> & {\n  label: string;\n  description?: string;\n};\n\nconst TRACK_PADDING = '2px';\nconst TRACK_INNER_WIDTH = (t: Theme) => t.sizes.$6;\nconst TRACK_HEIGHT = (t: Theme) => t.sizes.$4;\nconst THUMB_WIDTH = (t: Theme) => t.sizes.$3;\n\nconst Switch = forwardRef<HTMLInputElement, SwitchProps>(\n  ({ label, description, checked: controlledChecked, defaultChecked, onChange, ...props }, ref) => {\n    const descriptionId = useId();\n\n    const isControlled = controlledChecked !== undefined;\n    const [internalChecked, setInternalChecked] = useState(!!defaultChecked);\n    const checked = isControlled ? controlledChecked : internalChecked;\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (!isControlled) {\n        setInternalChecked(e.target.checked);\n      }\n      onChange?.(e);\n    };\n\n    return (\n      <Flex\n        direction='col'\n        gap={1}\n      >\n        <Flex\n          as='label'\n          gap={2}\n          align='center'\n          sx={{\n            isolation: 'isolate',\n            userSelect: 'none',\n            '&:has(input:focus-visible) > input + span': {\n              outline: '2px solid white',\n              outlineOffset: '2px',\n            },\n            '&:has(input:disabled) > input + span': {\n              opacity: 0.6,\n              cursor: 'not-allowed',\n              pointerEvents: 'none',\n            },\n          }}\n        >\n          <input\n            type='checkbox'\n            {...props}\n            ref={ref}\n            role='switch'\n            {...(isControlled ? { checked } : { defaultChecked })}\n            onChange={handleChange}\n            css={{ ...common.visuallyHidden() }}\n            aria-describedby={description ? descriptionId : undefined}\n          />\n          <Span\n            sx={t => {\n              const trackWidth = `calc(${TRACK_INNER_WIDTH(t)} + ${TRACK_PADDING} + ${TRACK_PADDING})`;\n              const trackHeight = `calc(${TRACK_HEIGHT(t)} + ${TRACK_PADDING})`;\n              return {\n                display: 'flex',\n                alignItems: 'center',\n                paddingInline: TRACK_PADDING,\n                width: trackWidth,\n                height: trackHeight,\n                border: '1px solid rgba(255, 255, 255, 0.2)',\n                backgroundColor: checked ? '#6C47FF' : 'rgba(0, 0, 0, 0.2)',\n                borderRadius: 999,\n                transition: 'background-color 0.2s ease-in-out',\n              };\n            }}\n          >\n            <Span\n              sx={t => {\n                const size = THUMB_WIDTH(t);\n                const maxTranslateX = `calc(${TRACK_INNER_WIDTH(t)} - ${size} - ${TRACK_PADDING})`;\n                return {\n                  width: size,\n                  height: size,\n                  borderRadius: 9999,\n                  backgroundColor: 'white',\n                  boxShadow: '0px 0px 0px 1px rgba(0, 0, 0, 0.1)',\n                  transform: `translateX(${checked ? maxTranslateX : '0'})`,\n                  transition: 'transform 0.2s ease-in-out',\n                  '@media (prefers-reduced-motion: reduce)': {\n                    transition: 'none',\n                  },\n                };\n              }}\n            />\n          </Span>\n          <span\n            css={[\n              basePromptElementStyles,\n              css`\n                font-size: 0.875rem;\n                font-weight: 500;\n                line-height: 1.25;\n                color: white;\n              `,\n            ]}\n          >\n            {label}\n          </span>\n        </Flex>\n        {description ? (\n          <Span\n            id={descriptionId}\n            sx={t => [\n              basePromptElementStyles,\n              {\n                display: 'block',\n                paddingInlineStart: `calc(${TRACK_INNER_WIDTH(t)} + ${TRACK_PADDING} + ${TRACK_PADDING} + ${t.sizes.$2})`,\n                fontSize: '0.75rem',\n                lineHeight: '1.3333333333',\n                color: '#c3c3c6',\n                textWrap: 'pretty',\n              },\n            ]}\n          >\n            {description}\n          </Span>\n        ) : null}\n      </Flex>\n    );\n  },\n);\n\nconst Link = forwardRef<HTMLAnchorElement, React.ComponentProps<'a'> & { css?: SerializedStyles }>(\n  ({ children, css: cssProp, ...props }, ref) => {\n    return (\n      <a\n        ref={ref}\n        {...props}\n        css={[\n          basePromptElementStyles,\n          css`\n            color: #a8a8ff;\n            font-size: inherit;\n            font-weight: 500;\n            line-height: 1.3;\n            font-size: 0.8125rem;\n            min-width: 0;\n          `,\n          cssProp,\n        ]}\n      >\n        {children}\n      </a>\n    );\n  },\n);\n\nconst CoinFlip = ({ isEnabled }: { isEnabled: boolean }) => {\n  const [rotation, setRotation] = useState(0);\n\n  useLayoutEffect(() => {\n    if (isEnabled) {\n      setRotation(r => (r === 0 ? 180 : 0));\n      return;\n    }\n\n    const interval = setInterval(() => {\n      setRotation(r => (r === 0 ? 180 : 0));\n    }, 2000);\n\n    return () => clearInterval(interval);\n  }, [isEnabled]);\n\n  let frontFaceType: 'idle' | 'success' = 'idle';\n  let backFaceType: 'warning' | 'success' = 'warning';\n\n  if (isEnabled) {\n    if (rotation === 0) {\n      frontFaceType = 'success';\n      backFaceType = 'warning';\n    } else {\n      backFaceType = 'success';\n      frontFaceType = 'idle';\n    }\n  }\n\n  const renderContent = (type: 'idle' | 'warning' | 'success') => {\n    switch (type) {\n      case 'idle':\n        return <ClerkLogoIcon />;\n      case 'success':\n        return (\n          <PromptSuccessIcon\n            css={css`\n              width: 1.25rem;\n              height: 1.25rem;\n            `}\n          />\n        );\n      case 'warning':\n        return (\n          <svg\n            css={css`\n              width: 1.25rem;\n              height: 1.25rem;\n            `}\n            viewBox='0 0 20 20'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n          >\n            <path\n              opacity='0.2'\n              d='M17.25 10C17.25 14.0041 14.0041 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 5.99594 5.99594 2.75 10 2.75C14.0041 2.75 17.25 5.99594 17.25 10Z'\n              fill='#EAB308'\n            />\n            <path\n              fillRule='evenodd'\n              clipRule='evenodd'\n              d='M10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5C13.5899 16.5 16.5 13.5899 16.5 10C16.5 6.41015 13.5899 3.5 10 3.5ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10Z'\n              fill='#EAB308'\n            />\n            <path\n              fillRule='evenodd'\n              clipRule='evenodd'\n              d='M10 6C10.5523 6 11 6.44772 11 7V9C11 9.55228 10.5523 10 10 10C9.44772 10 9 9.55228 9 9V7C9 6.44772 9.44772 6 10 6Z'\n              fill='#EAB308'\n            />\n            <path\n              fillRule='evenodd'\n              clipRule='evenodd'\n              d='M10 12C10.5523 12 11 12.4477 11 13V13.01C11 13.5623 10.5523 14.01 10 14.01C9.44772 14.01 9 13.5623 9 13.01V13C9 12.4477 9.44772 12 10 12Z'\n              fill='#EAB308'\n            />\n          </svg>\n        );\n    }\n  };\n\n  return (\n    <div\n      css={css`\n        perspective: 1000px;\n        width: 1.25rem;\n        height: 1.25rem;\n      `}\n    >\n      <div\n        css={css`\n          position: relative;\n          width: 100%;\n          height: 100%;\n          transform-style: preserve-3d;\n          transition: transform 0.6s ease-in-out;\n          transform: rotateY(${rotation}deg);\n\n          @media (prefers-reduced-motion: reduce) {\n            transition: none;\n          }\n        `}\n      >\n        <span\n          aria-hidden\n          css={css`\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            backface-visibility: hidden;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            -webkit-font-smoothing: antialiased;\n            transform: rotateY(0deg);\n          `}\n        >\n          {renderContent(frontFaceType)}\n        </span>\n\n        <span\n          aria-hidden\n          css={css`\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            backface-visibility: hidden;\n            transform: rotateY(180deg);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            -webkit-font-smoothing: antialiased;\n          `}\n        >\n          {renderContent(backFaceType)}\n        </span>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["params: EnableEnvironmentSettingParams","frontFaceType: 'idle' | 'success'","backFaceType: 'warning' | 'success'"],"sources":["../../../../src/components/devPrompts/EnableOrganizationsPrompt/index.tsx"],"sourcesContent":["import { createContextAndHook, useClerk } from '@clerk/shared/react';\nimport type { __internal_EnableOrganizationsPromptProps, EnableEnvironmentSettingParams } from '@clerk/shared/types';\n// eslint-disable-next-line no-restricted-imports\nimport type { SerializedStyles } from '@emotion/react';\n// eslint-disable-next-line no-restricted-imports\nimport { css } from '@emotion/react';\nimport React, { forwardRef, useId, useLayoutEffect, useRef, useState } from 'react';\n\nimport { useEnvironment } from '@/ui/contexts';\nimport { Modal } from '@/ui/elements/Modal';\nimport { InternalThemeProvider } from '@/ui/styledSystem';\n\nimport { Flex } from '../../../customizables';\nimport { Portal } from '../../../elements/Portal';\nimport { basePromptElementStyles, ClerkLogoIcon, PromptContainer, PromptSuccessIcon } from '../shared';\n\nconst organizationsDashboardUrl = 'https://dashboard.clerk.com/~/organizations-settings';\n\nconst EnableOrganizationsPromptInternal = ({\n  caller,\n  onSuccess,\n  onClose,\n}: __internal_EnableOrganizationsPromptProps): JSX.Element => {\n  const clerk = useClerk();\n  const [isLoading, setIsLoading] = useState(false);\n  const [isEnabled, setIsEnabled] = useState(false);\n  const [allowPersonalAccount, setAllowPersonalAccount] = useState(false);\n\n  const initialFocusRef = useRef<HTMLHeadingElement>(null);\n  const environment = useEnvironment();\n  const radioGroupLabelId = useId();\n\n  const isComponent = !caller.startsWith('use');\n\n  // 'forceOrganizationSelection' is omitted from the environment settings object if the instance does not have it available as a feature\n  const hasPersonalAccountsEnabled =\n    typeof environment?.organizationSettings.forceOrganizationSelection !== 'undefined';\n\n  const handleEnableOrganizations = () => {\n    setIsLoading(true);\n\n    const params: EnableEnvironmentSettingParams = {\n      enable_organizations: true,\n    };\n\n    if (hasPersonalAccountsEnabled) {\n      params.organization_allow_personal_accounts = allowPersonalAccount;\n    }\n\n    void environment\n      .__internal_enableEnvironmentSetting(params)\n      .then(() => {\n        setIsEnabled(true);\n        setIsLoading(false);\n      })\n      .catch(() => {\n        setIsLoading(false);\n      });\n  };\n\n  return (\n    <Portal>\n      <Modal\n        canCloseModal={false}\n        containerSx={() => ({ alignItems: 'center' })}\n        initialFocusRef={initialFocusRef}\n      >\n        <PromptContainer\n          sx={() => ({\n            display: 'flex',\n            flexDirection: 'column',\n            width: '30rem',\n            maxWidth: 'calc(100vw - 2rem)',\n          })}\n        >\n          <Flex\n            direction='col'\n            sx={t => ({\n              padding: `${t.sizes.$4} ${t.sizes.$6}`,\n              paddingBottom: t.sizes.$4,\n              gap: t.sizes.$2,\n            })}\n          >\n            <Flex\n              as='header'\n              align='center'\n              sx={t => ({\n                gap: t.sizes.$2,\n              })}\n            >\n              <CoinFlip isEnabled={isEnabled} />\n\n              <h1\n                css={[\n                  basePromptElementStyles,\n                  css`\n                    color: white;\n                    font-size: 0.875rem;\n                    font-weight: 500;\n                    outline: none;\n                  `,\n                ]}\n                tabIndex={-1}\n                ref={initialFocusRef}\n              >\n                {isEnabled ? 'Organizations feature enabled' : 'Organizations feature required'}\n              </h1>\n            </Flex>\n\n            <Flex\n              direction='col'\n              align='start'\n              sx={t => ({\n                gap: t.sizes.$0x5,\n              })}\n            >\n              {isEnabled ? (\n                <p\n                  css={[\n                    basePromptElementStyles,\n                    css`\n                      color: #b4b4b4;\n                      font-size: 0.8125rem;\n                      font-weight: 400;\n                      line-height: 1.3;\n                    `,\n                  ]}\n                >\n                  {clerk.user\n                    ? `The Organizations feature has been enabled for your application. A default organization named \"My Organization\" was created automatically. You can manage or rename it in your`\n                    : `The Organizations feature has been enabled for your application. You can manage it in your`}{' '}\n                  <Link\n                    href={organizationsDashboardUrl}\n                    target='_blank'\n                    rel='noopener noreferrer'\n                  >\n                    dashboard\n                  </Link>\n                  .\n                </p>\n              ) : (\n                <>\n                  <p\n                    id={radioGroupLabelId}\n                    css={[\n                      basePromptElementStyles,\n                      css`\n                        color: #b4b4b4;\n                        font-size: 0.8125rem;\n                        font-weight: 400;\n                        line-height: 1.23;\n                      `,\n                    ]}\n                  >\n                    Enable Organizations to use{' '}\n                    <code\n                      css={[\n                        basePromptElementStyles,\n                        css`\n                          font-size: 0.75rem;\n                          color: white;\n                          font-family: monospace;\n                          line-height: 1.23;\n                        `,\n                      ]}\n                    >\n                      {isComponent ? `<${caller} />` : caller}\n                    </code>{' '}\n                  </p>\n\n                  <Link\n                    href='https://clerk.com/docs/guides/organizations/overview'\n                    target='_blank'\n                    rel='noopener noreferrer'\n                  >\n                    Learn more\n                  </Link>\n                </>\n              )}\n            </Flex>\n\n            {hasPersonalAccountsEnabled && !isEnabled && (\n              <Flex\n                sx={t => ({ marginTop: t.sizes.$2 })}\n                direction='col'\n              >\n                <RadioGroup\n                  value={allowPersonalAccount ? 'optional' : 'required'}\n                  onChange={value => setAllowPersonalAccount(value === 'optional')}\n                  labelledBy={radioGroupLabelId}\n                >\n                  <RadioGroupItem\n                    value='required'\n                    label={\n                      <Flex\n                        wrap='wrap'\n                        sx={t => ({ columnGap: t.sizes.$2, rowGap: t.sizes.$1 })}\n                      >\n                        <span>Membership required</span>\n                        <PromptBadge>Standard</PromptBadge>\n                      </Flex>\n                    }\n                    description={\n                      <>\n                        <span className='block'>Users need to belong to at least one organization.</span>\n                        <span>Common for most B2B SaaS applications</span>\n                      </>\n                    }\n                  />\n                  <RadioGroupItem\n                    value='optional'\n                    label='Membership optional'\n                    description='Users can work outside of an organization with a personal account'\n                  />\n                </RadioGroup>\n              </Flex>\n            )}\n          </Flex>\n\n          <span\n            css={css`\n              height: 1px;\n              display: block;\n              width: calc(100% - 2px);\n              margin-inline: auto;\n              background-color: #151515;\n              box-shadow: 0px 1px 0px 0px #424242;\n            `}\n          />\n\n          <Flex\n            justify='center'\n            sx={t => ({\n              padding: `${t.sizes.$4} ${t.sizes.$6}`,\n              gap: t.sizes.$3,\n              justifyContent: 'flex-end',\n            })}\n          >\n            {isEnabled ? (\n              <PromptButton\n                variant='solid'\n                onClick={() => {\n                  if (!clerk.user) {\n                    void clerk.redirectToSignIn();\n                    clerk.__internal_closeEnableOrganizationsPrompt?.();\n                  } else {\n                    onSuccess?.();\n                  }\n                }}\n              >\n                {clerk.user ? 'Continue' : 'Sign in to continue'}\n              </PromptButton>\n            ) : (\n              <>\n                <PromptButton\n                  variant='outline'\n                  onClick={() => {\n                    clerk?.__internal_closeEnableOrganizationsPrompt?.();\n                    onClose?.();\n                  }}\n                >\n                  I&apos;ll remove it myself\n                </PromptButton>\n\n                <PromptButton\n                  variant='solid'\n                  onClick={handleEnableOrganizations}\n                  disabled={isLoading}\n                >\n                  Enable Organizations\n                </PromptButton>\n              </>\n            )}\n          </Flex>\n        </PromptContainer>\n      </Modal>\n    </Portal>\n  );\n};\n\n/**\n * A prompt that allows the user to enable the Organizations feature for their development instance\n * @internal\n */\nexport const EnableOrganizationsPrompt = (props: __internal_EnableOrganizationsPromptProps): JSX.Element => {\n  return (\n    <InternalThemeProvider>\n      <EnableOrganizationsPromptInternal {...props} />\n    </InternalThemeProvider>\n  );\n};\n\nconst baseButtonStyles = css`\n  ${basePromptElementStyles};\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 1.75rem;\n  padding: 0.375rem 0.625rem;\n  border-radius: 0.375rem;\n  font-size: 0.75rem;\n  font-weight: 500;\n  letter-spacing: 0.12px;\n  color: white;\n  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.32);\n  white-space: nowrap;\n  user-select: none;\n  color: white;\n  outline: none;\n\n  &:not(:disabled) {\n    transition: 120ms ease-in-out;\n    transition-property: background-color, border-color, box-shadow, color;\n  }\n\n  &:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n  }\n\n  &:focus-visible:not(:disabled) {\n    outline: 2px solid white;\n    outline-offset: 2px;\n  }\n`;\n\nconst buttonSolidStyles = css`\n  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.05) 100%), #454545;\n  box-shadow:\n    0 0 3px 0 rgba(253, 224, 71, 0) inset,\n    0 0 0 1px rgba(255, 255, 255, 0.04) inset,\n    0 1px 0 0 rgba(255, 255, 255, 0.04) inset,\n    0 0 0 1px rgba(0, 0, 0, 0.12),\n    0 1.5px 2px 0 rgba(0, 0, 0, 0.48);\n\n  &:hover:not(:disabled) {\n    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30.5%, rgba(0, 0, 0, 0.15) 100%), #5f5f5f;\n    box-shadow:\n      0 0 3px 0 rgba(253, 224, 71, 0) inset,\n      0 0 0 1px rgba(255, 255, 255, 0.04) inset,\n      0 1px 0 0 rgba(255, 255, 255, 0.04) inset,\n      0 0 0 1px rgba(0, 0, 0, 0.12),\n      0 1.5px 2px 0 rgba(0, 0, 0, 0.48);\n  }\n`;\n\nconst buttonOutlineStyles = css`\n  border: 1px solid rgba(118, 118, 132, 0.25);\n  background: rgba(69, 69, 69, 0.1);\n\n  &:hover:not(:disabled) {\n    border-color: rgba(118, 118, 132, 0.5);\n  }\n`;\n\nconst buttonVariantStyles = {\n  solid: buttonSolidStyles,\n  outline: buttonOutlineStyles,\n} as const;\n\ntype PromptButtonVariant = keyof typeof buttonVariantStyles;\n\ntype PromptButtonProps = Pick<React.ComponentProps<'button'>, 'onClick' | 'children' | 'disabled'> & {\n  variant?: PromptButtonVariant;\n};\n\nconst PromptButton = forwardRef<HTMLButtonElement, PromptButtonProps>(({ variant = 'solid', ...props }, ref) => {\n  return (\n    <button\n      ref={ref}\n      type='button'\n      css={[baseButtonStyles, buttonVariantStyles[variant]]}\n      {...props}\n    />\n  );\n});\n\ntype PromptBadgeProps = {\n  children: React.ReactNode;\n};\n\nconst PromptBadge = ({ children }: PromptBadgeProps): JSX.Element => {\n  return (\n    <span\n      css={css`\n        ${basePromptElementStyles};\n        display: inline-flex;\n        align-items: center;\n        padding: 0.125rem 0.375rem;\n        border-radius: 0.25rem;\n        font-size: 0.6875rem;\n        font-weight: 500;\n        line-height: 1.23;\n        background-color: #ebebeb;\n        color: #2b2b34;\n        white-space: nowrap;\n      `}\n    >\n      {children}\n    </span>\n  );\n};\n\ntype RadioGroupContextValue = {\n  name: string;\n  value: string;\n  onChange: (value: string) => void;\n};\n\nconst [RadioGroupContext, useRadioGroup] = createContextAndHook<RadioGroupContextValue>('RadioGroupContext');\n\ntype RadioGroupProps = {\n  value: string;\n  onChange: (value: string) => void;\n  children: React.ReactNode;\n  labelledBy?: string;\n};\n\nconst RadioGroup = ({ value, onChange, children, labelledBy }: RadioGroupProps): JSX.Element => {\n  const name = useId();\n  const contextValue = React.useMemo(() => ({ value: { name, value, onChange } }), [name, value, onChange]);\n\n  return (\n    <RadioGroupContext.Provider value={contextValue}>\n      <Flex\n        role='radiogroup'\n        direction='col'\n        gap={3}\n        aria-orientation='vertical'\n        aria-labelledby={labelledBy}\n      >\n        {children}\n      </Flex>\n    </RadioGroupContext.Provider>\n  );\n};\n\ntype RadioGroupItemProps = {\n  value: string;\n  label: React.ReactNode;\n  description?: React.ReactNode;\n};\n\nconst RADIO_INDICATOR_SIZE = '1rem';\nconst RADIO_GAP = '0.5rem';\n\nconst RadioGroupItem = ({ value, label, description }: RadioGroupItemProps): JSX.Element => {\n  const { name, value: selectedValue, onChange } = useRadioGroup();\n  const descriptionId = useId();\n  const checked = value === selectedValue;\n\n  return (\n    <Flex\n      direction='col'\n      gap={1}\n    >\n      <label\n        css={css`\n          ${basePromptElementStyles};\n          display: flex;\n          align-items: flex-start;\n          gap: ${RADIO_GAP};\n          cursor: pointer;\n          user-select: none;\n\n          &:has(input:focus-visible) > span:first-of-type {\n            outline: 2px solid white;\n            outline-offset: 2px;\n          }\n\n          &:hover:has(input:not(:checked)) > span:first-of-type {\n            background-color: rgba(255, 255, 255, 0.08);\n          }\n\n          &:hover:has(input:checked) > span:first-of-type {\n            background-color: rgba(108, 71, 255, 0.8);\n            background-color: color-mix(in srgb, #6c47ff 80%, transparent);\n          }\n        `}\n      >\n        <input\n          type='radio'\n          name={name}\n          value={value}\n          checked={checked}\n          onChange={() => onChange(value)}\n          aria-describedby={description ? descriptionId : undefined}\n          css={css`\n            ${basePromptElementStyles};\n            position: absolute;\n            width: 1px;\n            height: 1px;\n            padding: 0;\n            margin: -1px;\n            overflow: hidden;\n            clip: rect(0, 0, 0, 0);\n            white-space: nowrap;\n            border-width: 0;\n          `}\n        />\n\n        <span\n          aria-hidden='true'\n          css={css`\n            ${basePromptElementStyles};\n            position: relative;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: ${RADIO_INDICATOR_SIZE};\n            height: ${RADIO_INDICATOR_SIZE};\n            margin-top: 0.125rem;\n            flex-shrink: 0;\n            border-radius: 50%;\n            border: 1px solid rgba(255, 255, 255, 0.3);\n            background-color: transparent;\n            transition: 120ms ease-in-out;\n            transition-property: border-color, background-color, box-shadow;\n\n            ${checked &&\n            css`\n              border-width: 2px;\n              border-color: #6c47ff;\n              background-color: #6c47ff;\n              background-color: color-mix(in srgb, #6c47ff 100%, transparent);\n              box-shadow: 0 0 0 2px rgba(108, 71, 255, 0.2);\n            `}\n\n            &::after {\n              content: '';\n              position: absolute;\n              width: 0.375rem;\n              height: 0.375rem;\n              border-radius: 50%;\n              background-color: white;\n              opacity: ${checked ? 1 : 0};\n              transform: scale(${checked ? 1 : 0});\n              transition: 120ms ease-in-out;\n              transition-property: opacity, transform;\n            }\n          `}\n        />\n\n        <span\n          css={[\n            basePromptElementStyles,\n            css`\n              font-size: 0.875rem;\n              font-weight: 500;\n              line-height: 1.25;\n              color: white;\n            `,\n          ]}\n        >\n          {label}\n        </span>\n      </label>\n\n      {description && (\n        <span\n          id={descriptionId}\n          css={[\n            basePromptElementStyles,\n            css`\n              padding-inline-start: calc(${RADIO_INDICATOR_SIZE} + ${RADIO_GAP});\n              font-size: 0.75rem;\n              line-height: 1.33;\n              color: #c3c3c6;\n              text-wrap: pretty;\n            `,\n          ]}\n        >\n          {description}\n        </span>\n      )}\n    </Flex>\n  );\n};\n\nconst Link = forwardRef<HTMLAnchorElement, React.ComponentProps<'a'> & { css?: SerializedStyles }>(\n  ({ children, css: cssProp, ...props }, ref) => {\n    return (\n      <a\n        ref={ref}\n        {...props}\n        css={[\n          basePromptElementStyles,\n          css`\n            color: #a8a8ff;\n            font-size: inherit;\n            font-weight: 500;\n            line-height: 1.3;\n            font-size: 0.8125rem;\n            min-width: 0;\n          `,\n          cssProp,\n        ]}\n      >\n        {children}\n      </a>\n    );\n  },\n);\n\nconst CoinFlip = ({ isEnabled }: { isEnabled: boolean }): JSX.Element => {\n  const [rotation, setRotation] = useState(0);\n\n  useLayoutEffect(() => {\n    if (isEnabled) {\n      setRotation(r => (r === 0 ? 180 : 0));\n      return;\n    }\n\n    const interval = setInterval(() => {\n      setRotation(r => (r === 0 ? 180 : 0));\n    }, 2000);\n\n    return () => clearInterval(interval);\n  }, [isEnabled]);\n\n  let frontFaceType: 'idle' | 'success' = 'idle';\n  let backFaceType: 'warning' | 'success' = 'warning';\n\n  if (isEnabled) {\n    if (rotation === 0) {\n      frontFaceType = 'success';\n      backFaceType = 'warning';\n    } else {\n      backFaceType = 'success';\n      frontFaceType = 'idle';\n    }\n  }\n\n  const renderContent = (type: 'idle' | 'warning' | 'success') => {\n    switch (type) {\n      case 'idle':\n        return <ClerkLogoIcon />;\n      case 'success':\n        return (\n          <PromptSuccessIcon\n            css={css`\n              width: 1.25rem;\n              height: 1.25rem;\n            `}\n          />\n        );\n      case 'warning':\n        return (\n          <svg\n            css={css`\n              width: 1.25rem;\n              height: 1.25rem;\n            `}\n            viewBox='0 0 20 20'\n            fill='none'\n            xmlns='http://www.w3.org/2000/svg'\n          >\n            <path\n              opacity='0.2'\n              d='M17.25 10C17.25 14.0041 14.0041 17.25 10 17.25C5.99594 17.25 2.75 14.0041 2.75 10C2.75 5.99594 5.99594 2.75 10 2.75C14.0041 2.75 17.25 5.99594 17.25 10Z'\n              fill='#EAB308'\n            />\n            <path\n              fillRule='evenodd'\n              clipRule='evenodd'\n              d='M10 3.5C6.41015 3.5 3.5 6.41015 3.5 10C3.5 13.5899 6.41015 16.5 10 16.5C13.5899 16.5 16.5 13.5899 16.5 10C16.5 6.41015 13.5899 3.5 10 3.5ZM2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10Z'\n              fill='#EAB308'\n            />\n            <path\n              fillRule='evenodd'\n              clipRule='evenodd'\n              d='M10 6C10.5523 6 11 6.44772 11 7V9C11 9.55228 10.5523 10 10 10C9.44772 10 9 9.55228 9 9V7C9 6.44772 9.44772 6 10 6Z'\n              fill='#EAB308'\n            />\n            <path\n              fillRule='evenodd'\n              clipRule='evenodd'\n              d='M10 12C10.5523 12 11 12.4477 11 13V13.01C11 13.5623 10.5523 14.01 10 14.01C9.44772 14.01 9 13.5623 9 13.01V13C9 12.4477 9.44772 12 10 12Z'\n              fill='#EAB308'\n            />\n          </svg>\n        );\n    }\n  };\n\n  return (\n    <div\n      css={css`\n        perspective: 1000px;\n        width: 1.25rem;\n        height: 1.25rem;\n      `}\n    >\n      <div\n        css={css`\n          position: relative;\n          width: 100%;\n          height: 100%;\n          transform-style: preserve-3d;\n          transition: transform 0.6s ease-in-out;\n          transform: rotateY(${rotation}deg);\n\n          @media (prefers-reduced-motion: reduce) {\n            transition: none;\n          }\n        `}\n      >\n        <span\n          aria-hidden\n          css={css`\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            backface-visibility: hidden;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            -webkit-font-smoothing: antialiased;\n            transform: rotateY(0deg);\n          `}\n        >\n          {renderContent(frontFaceType)}\n        </span>\n\n        <span\n          aria-hidden\n          css={css`\n            position: absolute;\n            width: 100%;\n            height: 100%;\n            backface-visibility: hidden;\n            transform: rotateY(180deg);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            -webkit-font-smoothing: antialiased;\n          `}\n        >\n          {renderContent(backFaceType)}\n        </span>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/customizables/elementDescriptors.js

@@ -444,7 +444,16 @@ const APPEARANCE_KEYS = containsAllElementsConfigKeys([
 	"subscriptionDetailsDetailRowValue",
 	"enterpriseConnectionsRoot",
 	"enterpriseConnectionButton",
-	"enterpriseConnectionButtonText"
+	"enterpriseConnectionButtonText",
+	"web3SolanaWalletButtonsRoot",
+	"web3SolanaWalletButtons",
+	"web3SolanaWalletButtonsIconButton",
+	"web3SolanaWalletButtonsBlockButton",
+	"web3SolanaWalletButtonsBlockButtonText",
+	"web3SolanaWalletButtonsWalletIcon",
+	"web3SolanaWalletButtonsWalletInitialIcon",
+	"walletIcon",
+	"walletInitialIcon"
 ]).map(camelize);
 /**
 * Turns a key from the ElementsConfig object to a targettable classname

package/dist/customizables/elementDescriptors.js.map

@@ -1 +1 @@
-{"version":3,"file":"elementDescriptors.js","names":[],"sources":["../../src/customizables/elementDescriptors.ts"],"sourcesContent":["import type { ElementObjectKey, ElementsConfig, IdSelectors, StateSelectors } from '../internal/appearance';\nimport { containsAllOfType } from '../utils/containsAllOf';\nimport { fromEntries } from '../utils/fromEntries';\n\nexport const CLASS_PREFIX = 'cl-';\nexport const ID_CLASS_PREFIX = 'cl-id-';\nexport const OBJ_KEY_DELIMITER = '__';\n\nconst containsAllElementsConfigKeys = containsAllOfType<keyof ElementsConfig>();\nconst camelize = (s: string) => s.replace(/-./g, x => x[1].toUpperCase());\n/**\n * This object is strictly typed using the ElementsConfig type\n * and is used as the single source of truth to generate the\n * descriptor map\n */\nexport const APPEARANCE_KEYS = containsAllElementsConfigKeys([\n  'button',\n  'input',\n  'checkbox',\n  'radio',\n  'table',\n\n  'rootBox',\n  'cardBox',\n  'card',\n  'footerItem',\n  'popoverBox',\n\n  'disclosureRoot',\n  'disclosureTrigger',\n  'disclosureContentRoot',\n  'disclosureContentInner',\n  'disclosureContent',\n\n  'lineItemsRoot',\n  'lineItemsDivider',\n  'lineItemsGroup',\n  'lineItemsTitle',\n  'lineItemsTitleDescription',\n  'lineItemsDescription',\n  'lineItemsDescriptionInner',\n  'lineItemsDescriptionSuffix',\n  'lineItemsDescriptionPrefix',\n  'lineItemsDescriptionText',\n  'lineItemsCopyButton',\n  'lineItemsDowngradeNotice',\n\n  'actionCard',\n\n  'logoBox',\n  'logoImage',\n\n  'header',\n  'headerTitle',\n  'headerSubtitle',\n  'headerBackLink',\n\n  'main',\n\n  'footer',\n  'footerAction',\n  'footerActionText',\n  'footerActionLink',\n  'footerPages',\n  'footerPagesLink',\n\n  'backRow',\n  'backLink',\n\n  'socialButtonsRoot',\n  'socialButtons',\n  'socialButtonsIconButton',\n  'socialButtonsBlockButton',\n  'socialButtonsBlockButtonText',\n  'socialButtonsProviderIcon',\n  'socialButtonsProviderInitialIcon',\n\n  'lastAuthenticationStrategyBadge',\n\n  'enterpriseButtonsProviderIcon',\n\n  'providerIcon',\n  'providerInitialIcon',\n\n  'alternativeMethods',\n  'alternativeMethodsBlockButton',\n  'alternativeMethodsBlockButtonText',\n  'alternativeMethodsBlockButtonArrow',\n\n  'checkoutFormLineItemsRoot',\n  'checkoutFormElementsRoot',\n\n  'checkoutSuccessRoot',\n  'checkoutSuccessRings',\n  'checkoutSuccessBadge',\n  'checkoutSuccessTitle',\n  'checkoutSuccessDescription',\n\n  'otpCodeField',\n  'otpCodeFieldInputs',\n  'otpCodeFieldInput',\n  'otpCodeFieldInputContainer',\n  'otpCodeFieldErrorText',\n  'otpCodeFieldSuccessText',\n  'formResendCodeLink',\n\n  'dividerRow',\n  'dividerColumn',\n  'dividerText',\n  'dividerLine',\n\n  'drawerBackdrop',\n  'drawerRoot',\n  'drawerContent',\n  'drawerHeader',\n  'drawerTitle',\n  'drawerBody',\n  'drawerFooter',\n  'drawerFooterTitle',\n  'drawerFooterDescription',\n  'drawerClose',\n  'drawerConfirmationBackdrop',\n  'drawerConfirmationRoot',\n  'drawerConfirmationTitle',\n  'drawerConfirmationDescription',\n  'drawerConfirmationActions',\n\n  'formHeader',\n  'formHeaderTitle',\n  'formHeaderSubtitle',\n\n  'verificationLinkStatusBox',\n  'verificationLinkStatusIconBox',\n  'verificationLinkStatusIcon',\n  'verificationLinkStatusText',\n\n  'form',\n  'formContainer',\n  'formFieldRow',\n  'formField',\n  'formFieldLabelRow',\n  'formFieldLabel',\n  'formFieldRadioGroup',\n  'formFieldRadioGroupItem',\n  'formFieldRadioInput',\n  'formFieldRadioLabel',\n  'formFieldRadioLabelTitle',\n  'formFieldRadioLabelDescription',\n  'formFieldCheckboxInput',\n  'formFieldCheckboxLabel',\n  'formFieldAction',\n  'formFieldInput',\n  'formFieldErrorText',\n  'formFieldWarningText',\n  'formFieldSuccessText',\n  'formFieldInfoText',\n  'formFieldHintText',\n  'formButtonPrimary',\n  'formButtonReset',\n  'formFieldInputGroup',\n  'formFieldInputShowPasswordButton',\n  'formFieldInputShowPasswordIcon',\n  'formFieldInputCopyToClipboardButton',\n  'formFieldInputCopyToClipboardIcon',\n\n  'phoneInputBox',\n  'formInputGroup',\n\n  'avatarBox',\n  'avatarImage',\n  'avatarImageActions',\n  'avatarImageActionsUpload',\n  'avatarImageActionsRemove',\n\n  'userButtonBox',\n  'userButtonOuterIdentifier',\n  'userButtonTrigger',\n  'userButtonAvatarBox',\n  'userButtonAvatarImage',\n  'userButtonPopoverRootBox',\n  'userButtonPopoverCard',\n  'userButtonPopoverMain',\n  'userButtonPopoverActions',\n  'userButtonPopoverActionButton',\n  'userButtonPopoverActionButtonIconBox',\n  'userButtonPopoverActionButtonIcon',\n  'userButtonPopoverCustomItemButton',\n  'userButtonPopoverCustomItemButtonIconBox',\n  'userButtonPopoverActionItemButtonIcon',\n  'userButtonPopoverFooter',\n  'userButtonPopoverFooterPagesLink',\n\n  'organizationSwitcherTrigger',\n  'organizationSwitcherTriggerIcon',\n  'organizationSwitcherPopoverRootBox',\n  'organizationSwitcherPopoverCard',\n  'organizationSwitcherPopoverMain',\n  'organizationSwitcherPopoverActions',\n  'organizationSwitcherPopoverInvitationActions',\n  'organizationSwitcherPopoverInvitationActionsBox',\n  'organizationSwitcherPopoverActionButton',\n  'organizationSwitcherPreviewButton',\n  'organizationSwitcherInvitationAcceptButton',\n  'organizationSwitcherPopoverActionButtonIconBox',\n  'organizationSwitcherPopoverActionButtonIcon',\n  'organizationSwitcherPopoverFooter',\n\n  'organizationProfileMembersSearchInputIcon',\n  'organizationProfileMembersSearchInput',\n\n  'organizationListPreviewItems',\n  'organizationListPreviewItem',\n  'organizationListPreviewButton',\n  'organizationListPreviewItemActionButton',\n  'organizationListCreateOrganizationActionButton',\n\n  'taskChooseOrganizationPreviewItem',\n  'taskChooseOrganizationPreviewItems',\n  'taskChooseOrganizationCreateOrganizationActionButton',\n  'taskChooseOrganizationPreviewButton',\n\n  'userAvatarBox',\n  'userAvatarImage',\n\n  'userPreview',\n  'userPreviewAvatarContainer',\n  'userPreviewAvatarBox',\n  'userPreviewAvatarImage',\n  'userPreviewAvatarIcon',\n  'userPreviewTextContainer',\n  'userPreviewMainIdentifier',\n  'userPreviewMainIdentifierText',\n  'userPreviewSecondaryIdentifier',\n\n  'organizationPreview',\n  'organizationPreviewAvatarContainer',\n  'organizationPreviewAvatarBox',\n  'organizationPreviewAvatarImage',\n  'organizationPreviewTextContainer',\n  'organizationPreviewMainIdentifier',\n  'organizationPreviewSecondaryIdentifier',\n\n  'organizationAvatarUploaderContainer',\n\n  'membersPageInviteButton',\n\n  'identityPreview',\n  'identityPreviewText',\n  'identityPreviewEditButton',\n  'identityPreviewEditButtonIcon',\n\n  'passkeyIcon',\n\n  'accountSwitcherActionButton',\n  'accountSwitcherActionButtonIconBox',\n  'accountSwitcherActionButtonIcon',\n\n  'pricingTable',\n  'pricingTableCard',\n  'pricingTableCardHeader',\n  'pricingTableCardTitleContainer',\n  'pricingTableCardTitle',\n  'pricingTableCardDescription',\n  'pricingTableCardBody',\n  'pricingTableCardStatusRow',\n  'pricingTableCardStatus',\n  'pricingTableCardFeatures',\n  'pricingTableCardFeaturesList',\n  'pricingTableCardFeaturesListItem',\n  'pricingTableCardFeaturesListItemContent',\n  'pricingTableCardFeaturesListItemTitle',\n  'pricingTableCardPeriodToggle',\n  'pricingTableCardFeeContainer',\n  'pricingTableCardFee',\n  'pricingTableCardFeePeriod',\n  'pricingTableCardFeePeriodNotice',\n  'pricingTableCardFooter',\n  'pricingTableCardFooterButton',\n  'pricingTableCardFooterNotice',\n\n  'pricingTableMatrix',\n  'pricingTableMatrixTable',\n  'pricingTableMatrixRowGroup',\n  'pricingTableMatrixRowGroupHeader',\n  'pricingTableMatrixRowGroupBody',\n  'pricingTableMatrixRow',\n  'pricingTableMatrixRowHeader',\n  'pricingTableMatrixRowBody',\n  'pricingTableMatrixColumnHeader',\n  'pricingTableMatrixCell',\n  'pricingTableMatrixCellFooter',\n  'pricingTableMatrixAvatar',\n  'pricingTableMatrixBadge',\n  'pricingTableMatrixPlanName',\n  'pricingTableMatrixFee',\n  'pricingTableMatrixFeePeriod',\n  'pricingTableMatrixFeePeriodNotice',\n  'pricingTableMatrixFeePeriodNoticeInner',\n  'pricingTableMatrixFeePeriodNoticeLabel',\n  'pricingTableMatrixFooter',\n\n  'planDetailHeader',\n  'planDetailAvatar',\n  'planDetailBadgeAvatarTitleDescriptionContainer',\n  'planDetailBadgeContainer',\n  'planDetailBadge',\n  'planDetailTitle',\n  'planDetailTitleDescriptionContainer',\n  'planDetailDescription',\n  'planDetailAction',\n  'planDetailFeeContainer',\n  'planDetailFee',\n  'planDetailFeePeriod',\n  'planDetailFeePeriodNotice',\n  'planDetailFeePeriodNoticeInner',\n  'planDetailFeePeriodNoticeLabel',\n  'planDetailCaption',\n  'planDetailFeatures',\n  'planDetailFeaturesList',\n  'planDetailFeaturesListItem',\n  'planDetailFeaturesListItemContent',\n  'planDetailFeaturesListItemTitle',\n  'planDetailFeaturesListItemDescription',\n  'planDetailPeriodToggle',\n\n  'segmentedControlRoot',\n  'segmentedControlButton',\n\n  'switchRoot',\n  'switchIndicator',\n  'switchThumb',\n  'switchLabel',\n\n  'alert',\n  'alertIcon',\n  'alertText',\n  'alertTextContainer',\n\n  'tagInputContainer',\n  'tagPillIcon',\n  'tagPillContainer',\n\n  'tabPanel',\n  'tabButton',\n  'tabListContainer',\n\n  'tableHead',\n  'tableBody',\n  'tableRow',\n  'tableHeaderCell',\n  'tableBodyCell',\n\n  'paginationButton',\n  'paginationButtonIcon',\n  'paginationRowText',\n\n  'selectButton',\n  'selectSearchInput',\n  'selectButtonIcon',\n  'selectOptionsContainer',\n  'selectOption',\n\n  'paymentMethodRow',\n  'paymentMethodRowIcon',\n  'paymentMethodRowText',\n  'paymentMethodRowType',\n  'paymentMethodRowValue',\n  'paymentMethodRowBadge',\n\n  'statementRoot',\n  'statementHeader',\n  'statementHeaderTitleContainer',\n  'statementHeaderTitle',\n  'statementHeaderBadge',\n  'statementBody',\n  'statementSection',\n  'statementSectionHeader',\n  'statementSectionHeaderTitle',\n  'statementSectionContent',\n  'statementSectionContentItem',\n  'statementSectionContentDetailsList',\n  'statementSectionContentDetailsListItem',\n  'statementSectionContentDetailsListItemLabelContainer',\n  'statementSectionContentDetailsListItemLabel',\n  'statementSectionContentDetailsListItemValue',\n  'statementSectionContentDetailsHeader',\n  'statementSectionContentDetailsHeaderItem',\n  'statementSectionContentDetailsHeaderItemIcon',\n  'statementSectionContentDetailsHeaderTitle',\n  'statementSectionContentDetailsHeaderDescription',\n  'statementSectionContentDetailsHeaderSecondaryTitle',\n  'statementSectionContentDetailsHeaderSecondaryDescription',\n  'statementFooter',\n  'statementFooterLabel',\n  'statementFooterValueContainer',\n  'statementFooterCurrency',\n  'statementFooterValue',\n  'statementCopyButton',\n  'menuButton',\n  'menuButtonEllipsis',\n  'menuButtonEllipsisBordered',\n  'menuList',\n  'menuItem',\n\n  'paymentAttemptRoot',\n  'paymentAttemptHeader',\n  'paymentAttemptHeaderTitleContainer',\n  'paymentAttemptHeaderTitle',\n  'paymentAttemptHeaderBadge',\n  'paymentAttemptBody',\n  'paymentAttemptFooter',\n  'paymentAttemptFooterLabel',\n  'paymentAttemptFooterValueContainer',\n  'paymentAttemptFooterCurrency',\n  'paymentAttemptFooterValue',\n  'paymentAttemptCopyButton',\n\n  'modalBackdrop',\n  'modalContent',\n  'modalCloseButton',\n\n  'profileSection',\n  'profileSectionItemList',\n  'profileSectionItem',\n  'profileSectionHeader',\n  'profileSectionTitle',\n  'profileSectionTitleText',\n  'profileSectionSubtitle',\n  'profileSectionSubtitleText',\n  'profileSectionContent',\n  'profileSectionPrimaryButton',\n  'profileSectionButtonGroup',\n  'profilePage',\n\n  'formattedPhoneNumber',\n  'formattedPhoneNumberFlag',\n  'formattedPhoneNumberText',\n\n  'formattedDate',\n\n  'scrollBox',\n\n  'navbar',\n  'navbarButtons',\n  'navbarButton',\n  'navbarButtonIcon',\n  'navbarButtonText',\n  'navbarMobileMenuRow',\n  'navbarMobileMenuButton',\n  'navbarMobileMenuButtonIcon',\n\n  'pageScrollBox',\n  'page',\n\n  'activeDevice',\n  'activeDeviceListItem',\n  'activeDeviceIcon',\n\n  'impersonationFab',\n  'impersonationFabIcon',\n  'impersonationFabIconContainer',\n  'impersonationFabTitle',\n  'impersonationFabActionLink',\n\n  'invitationsSentIconBox',\n  'invitationsSentIcon',\n\n  'qrCodeRow',\n  'qrCodeContainer',\n\n  'tooltip',\n  'tooltipContent',\n  'tooltipText',\n\n  'badge',\n  'notificationBadge',\n  'buttonArrowIcon',\n  'spinner',\n\n  'apiKeys',\n  'apiKeysHeader',\n  'apiKeysSearchBox',\n  'apiKeysSearchInput',\n  'apiKeysAddButton',\n  'apiKeysTable',\n  'apiKeysCopyButton',\n  'apiKeysRevealButton',\n  'apiKeysCreateForm',\n  'apiKeysCreateFormNameInput',\n  'apiKeysCreateFormDescriptionInput',\n  'apiKeysCreateFormExpirationInput',\n  'apiKeysCreateFormSubmitButton',\n  'apiKeysCreateFormExpirationCaption',\n  'apiKeysRevokeModal',\n  'apiKeysRevokeModalInput',\n  'apiKeysRevokeModalSubmitButton',\n  'apiKeysCopyModal',\n  'apiKeysCopyModalInput',\n  'apiKeysCopyModalSubmitButton',\n\n  'subscriptionDetailsCard',\n  'subscriptionDetailsCardHeader',\n  'subscriptionDetailsCardBadge',\n  'subscriptionDetailsCardTitle',\n  'subscriptionDetailsCardBody',\n  'subscriptionDetailsCardFooter',\n  'subscriptionDetailsCardActions',\n  'subscriptionDetailsActionButton',\n  'subscriptionDetailsCancelButton',\n  'subscriptionDetailsDetailRow',\n  'subscriptionDetailsDetailRowLabel',\n  'subscriptionDetailsDetailRowValue',\n\n  'enterpriseConnectionsRoot',\n  'enterpriseConnectionButton',\n  'enterpriseConnectionButtonText',\n] as const).map(camelize) as (keyof ElementsConfig)[];\n\ntype TargettableClassname<K extends keyof ElementsConfig> = `${typeof CLASS_PREFIX}${K}`;\ntype AllowedIds<T extends keyof ElementsConfig> = ElementsConfig[T]['ids'];\ntype AllowedStates<T extends keyof ElementsConfig> = ElementsConfig[T]['states'];\ntype ObjectKeyWithState<K extends keyof ElementsConfig> = StateSelectors<K, ElementsConfig[K]['states']>;\ntype ObjectKeyWithIds<K extends keyof ElementsConfig> = IdSelectors<K, ElementsConfig[K]['ids']>;\ntype ObjectKeyWithIdAndState<K extends keyof ElementsConfig> = StateSelectors<\n  IdSelectors<K, ElementsConfig[K]['ids']>,\n  ElementsConfig[K]['states']\n>;\n\nexport type ElementId<Id = string> = { id: Id; __type: 'id' };\nexport type ElementDescriptor<K extends keyof ElementsConfig = any> = {\n  targettableClassname: TargettableClassname<K>;\n  objectKey: ElementObjectKey<K>;\n  getTargettableIdClassname: (params: { id: AllowedIds<K> | never }) => string;\n  getObjectKeyWithState: (state: AllowedStates<K> | never) => ObjectKeyWithState<K>;\n  getObjectKeyWithId: (param: ElementId<AllowedIds<K>> | never) => ObjectKeyWithIds<K>;\n  getObjectKeyWithIdAndState: (id: ElementId<AllowedIds<K>>, state: AllowedStates<K>) => ObjectKeyWithIdAndState<K>;\n  setId: <Id extends AllowedIds<K>>(id?: Id) => ElementId<Id> | undefined;\n};\n\ntype ElementDescriptors = { [k in keyof ElementsConfig as ElementObjectKey<k>]: ElementDescriptor<k> };\n\n/**\n * Turns a key from the ElementsConfig object to a targettable classname\n * socialButtons-buttonIcon ->  cl-socialButtons-buttonIcon\n */\nconst toTargettableClassname = <K extends keyof ElementsConfig>(key: K): TargettableClassname<K> => {\n  return (CLASS_PREFIX + (key as string)) as TargettableClassname<K>;\n};\n\n/**\n * Turns a key from the ElementsConfig object to a appearance.elements key\n * socialButtons-buttonIcon -> socialButtonsButtonIcon\n */\nconst toObjectKey = <K extends keyof ElementsConfig>(key: K): ElementObjectKey<K> => {\n  return key.replace(/([-][a-z])/, match => match[1].toUpperCase()) as ElementObjectKey<K>;\n};\n\nconst createElementDescriptor = <K extends keyof ElementsConfig>(key: K): ElementDescriptor<K> => {\n  const objectKey = toObjectKey(key);\n  return {\n    objectKey,\n    targettableClassname: toTargettableClassname(key),\n    // getTargettableIdClassname: params => ID_CLASS_PREFIX + params.id,\n    getTargettableIdClassname: params => toTargettableClassname(key) + '__' + params.id,\n    getObjectKeyWithState: state => (objectKey + OBJ_KEY_DELIMITER + state) as any,\n    getObjectKeyWithId: idObj => (objectKey + OBJ_KEY_DELIMITER + idObj.id) as any,\n    getObjectKeyWithIdAndState: (idObj, state) =>\n      (objectKey + OBJ_KEY_DELIMITER + idObj.id + OBJ_KEY_DELIMITER + state) as any,\n    setId: id => (id ? { id, __type: 'id' } : undefined),\n  };\n};\n\nconst createDescriptorMap = <K extends keyof ElementsConfig>(keys = APPEARANCE_KEYS): ElementDescriptors => {\n  const entries = keys.map(key => [toObjectKey(key), createElementDescriptor(key)]) as unknown as Array<\n    [K, ElementDescriptor<K>]\n  >;\n  return fromEntries(entries) as unknown as ElementDescriptors;\n};\n\nexport const descriptors = createDescriptorMap();\n"],"mappings":";;;;AAIA,MAAa,eAAe;AAE5B,MAAa,oBAAoB;AAEjC,MAAM,gCAAgC,mBAAyC;AAC/E,MAAM,YAAY,MAAc,EAAE,QAAQ,QAAO,MAAK,EAAE,GAAG,aAAa,CAAC;;;;;;AAMzE,MAAa,kBAAkB,8BAA8B;CAC3D;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CAEA;CAEA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CAEA;CAEA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CAEA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACD,CAAU,CAAC,IAAI,SAAS;;;;;AA6BzB,MAAM,0BAA0D,QAAoC;AAClG,QAAQ,eAAgB;;;;;;AAO1B,MAAM,eAA+C,QAAgC;AACnF,QAAO,IAAI,QAAQ,eAAc,UAAS,MAAM,GAAG,aAAa,CAAC;;AAGnE,MAAM,2BAA2D,QAAiC;CAChG,MAAM,YAAY,YAAY,IAAI;AAClC,QAAO;EACL;EACA,sBAAsB,uBAAuB,IAAI;EAEjD,4BAA2B,WAAU,uBAAuB,IAAI,GAAG,OAAO,OAAO;EACjF,wBAAuB,UAAU,YAAY,oBAAoB;EACjE,qBAAoB,UAAU,YAAY,oBAAoB,MAAM;EACpE,6BAA6B,OAAO,UACjC,YAAY,oBAAoB,MAAM,KAAK,oBAAoB;EAClE,QAAO,OAAO,KAAK;GAAE;GAAI,QAAQ;GAAM,GAAG;EAC3C;;AAGH,MAAM,uBAAuD,OAAO,oBAAwC;AAI1G,QAAO,YAHS,KAAK,KAAI,QAAO,CAAC,YAAY,IAAI,EAAE,wBAAwB,IAAI,CAAC,CAAC,CAGtD;;AAG7B,MAAa,cAAc,qBAAqB"}
+{"version":3,"file":"elementDescriptors.js","names":[],"sources":["../../src/customizables/elementDescriptors.ts"],"sourcesContent":["import type { ElementObjectKey, ElementsConfig, IdSelectors, StateSelectors } from '../internal/appearance';\nimport { containsAllOfType } from '../utils/containsAllOf';\nimport { fromEntries } from '../utils/fromEntries';\n\nexport const CLASS_PREFIX = 'cl-';\nexport const ID_CLASS_PREFIX = 'cl-id-';\nexport const OBJ_KEY_DELIMITER = '__';\n\nconst containsAllElementsConfigKeys = containsAllOfType<keyof ElementsConfig>();\nconst camelize = (s: string) => s.replace(/-./g, x => x[1].toUpperCase());\n/**\n * This object is strictly typed using the ElementsConfig type\n * and is used as the single source of truth to generate the\n * descriptor map\n */\nexport const APPEARANCE_KEYS = containsAllElementsConfigKeys([\n  'button',\n  'input',\n  'checkbox',\n  'radio',\n  'table',\n\n  'rootBox',\n  'cardBox',\n  'card',\n  'footerItem',\n  'popoverBox',\n\n  'disclosureRoot',\n  'disclosureTrigger',\n  'disclosureContentRoot',\n  'disclosureContentInner',\n  'disclosureContent',\n\n  'lineItemsRoot',\n  'lineItemsDivider',\n  'lineItemsGroup',\n  'lineItemsTitle',\n  'lineItemsTitleDescription',\n  'lineItemsDescription',\n  'lineItemsDescriptionInner',\n  'lineItemsDescriptionSuffix',\n  'lineItemsDescriptionPrefix',\n  'lineItemsDescriptionText',\n  'lineItemsCopyButton',\n  'lineItemsDowngradeNotice',\n\n  'actionCard',\n\n  'logoBox',\n  'logoImage',\n\n  'header',\n  'headerTitle',\n  'headerSubtitle',\n  'headerBackLink',\n\n  'main',\n\n  'footer',\n  'footerAction',\n  'footerActionText',\n  'footerActionLink',\n  'footerPages',\n  'footerPagesLink',\n\n  'backRow',\n  'backLink',\n\n  'socialButtonsRoot',\n  'socialButtons',\n  'socialButtonsIconButton',\n  'socialButtonsBlockButton',\n  'socialButtonsBlockButtonText',\n  'socialButtonsProviderIcon',\n  'socialButtonsProviderInitialIcon',\n\n  'lastAuthenticationStrategyBadge',\n\n  'enterpriseButtonsProviderIcon',\n\n  'providerIcon',\n  'providerInitialIcon',\n\n  'alternativeMethods',\n  'alternativeMethodsBlockButton',\n  'alternativeMethodsBlockButtonText',\n  'alternativeMethodsBlockButtonArrow',\n\n  'checkoutFormLineItemsRoot',\n  'checkoutFormElementsRoot',\n\n  'checkoutSuccessRoot',\n  'checkoutSuccessRings',\n  'checkoutSuccessBadge',\n  'checkoutSuccessTitle',\n  'checkoutSuccessDescription',\n\n  'otpCodeField',\n  'otpCodeFieldInputs',\n  'otpCodeFieldInput',\n  'otpCodeFieldInputContainer',\n  'otpCodeFieldErrorText',\n  'otpCodeFieldSuccessText',\n  'formResendCodeLink',\n\n  'dividerRow',\n  'dividerColumn',\n  'dividerText',\n  'dividerLine',\n\n  'drawerBackdrop',\n  'drawerRoot',\n  'drawerContent',\n  'drawerHeader',\n  'drawerTitle',\n  'drawerBody',\n  'drawerFooter',\n  'drawerFooterTitle',\n  'drawerFooterDescription',\n  'drawerClose',\n  'drawerConfirmationBackdrop',\n  'drawerConfirmationRoot',\n  'drawerConfirmationTitle',\n  'drawerConfirmationDescription',\n  'drawerConfirmationActions',\n\n  'formHeader',\n  'formHeaderTitle',\n  'formHeaderSubtitle',\n\n  'verificationLinkStatusBox',\n  'verificationLinkStatusIconBox',\n  'verificationLinkStatusIcon',\n  'verificationLinkStatusText',\n\n  'form',\n  'formContainer',\n  'formFieldRow',\n  'formField',\n  'formFieldLabelRow',\n  'formFieldLabel',\n  'formFieldRadioGroup',\n  'formFieldRadioGroupItem',\n  'formFieldRadioInput',\n  'formFieldRadioLabel',\n  'formFieldRadioLabelTitle',\n  'formFieldRadioLabelDescription',\n  'formFieldCheckboxInput',\n  'formFieldCheckboxLabel',\n  'formFieldAction',\n  'formFieldInput',\n  'formFieldErrorText',\n  'formFieldWarningText',\n  'formFieldSuccessText',\n  'formFieldInfoText',\n  'formFieldHintText',\n  'formButtonPrimary',\n  'formButtonReset',\n  'formFieldInputGroup',\n  'formFieldInputShowPasswordButton',\n  'formFieldInputShowPasswordIcon',\n  'formFieldInputCopyToClipboardButton',\n  'formFieldInputCopyToClipboardIcon',\n\n  'phoneInputBox',\n  'formInputGroup',\n\n  'avatarBox',\n  'avatarImage',\n  'avatarImageActions',\n  'avatarImageActionsUpload',\n  'avatarImageActionsRemove',\n\n  'userButtonBox',\n  'userButtonOuterIdentifier',\n  'userButtonTrigger',\n  'userButtonAvatarBox',\n  'userButtonAvatarImage',\n  'userButtonPopoverRootBox',\n  'userButtonPopoverCard',\n  'userButtonPopoverMain',\n  'userButtonPopoverActions',\n  'userButtonPopoverActionButton',\n  'userButtonPopoverActionButtonIconBox',\n  'userButtonPopoverActionButtonIcon',\n  'userButtonPopoverCustomItemButton',\n  'userButtonPopoverCustomItemButtonIconBox',\n  'userButtonPopoverActionItemButtonIcon',\n  'userButtonPopoverFooter',\n  'userButtonPopoverFooterPagesLink',\n\n  'organizationSwitcherTrigger',\n  'organizationSwitcherTriggerIcon',\n  'organizationSwitcherPopoverRootBox',\n  'organizationSwitcherPopoverCard',\n  'organizationSwitcherPopoverMain',\n  'organizationSwitcherPopoverActions',\n  'organizationSwitcherPopoverInvitationActions',\n  'organizationSwitcherPopoverInvitationActionsBox',\n  'organizationSwitcherPopoverActionButton',\n  'organizationSwitcherPreviewButton',\n  'organizationSwitcherInvitationAcceptButton',\n  'organizationSwitcherPopoverActionButtonIconBox',\n  'organizationSwitcherPopoverActionButtonIcon',\n  'organizationSwitcherPopoverFooter',\n\n  'organizationProfileMembersSearchInputIcon',\n  'organizationProfileMembersSearchInput',\n\n  'organizationListPreviewItems',\n  'organizationListPreviewItem',\n  'organizationListPreviewButton',\n  'organizationListPreviewItemActionButton',\n  'organizationListCreateOrganizationActionButton',\n\n  'taskChooseOrganizationPreviewItem',\n  'taskChooseOrganizationPreviewItems',\n  'taskChooseOrganizationCreateOrganizationActionButton',\n  'taskChooseOrganizationPreviewButton',\n\n  'userAvatarBox',\n  'userAvatarImage',\n\n  'userPreview',\n  'userPreviewAvatarContainer',\n  'userPreviewAvatarBox',\n  'userPreviewAvatarImage',\n  'userPreviewAvatarIcon',\n  'userPreviewTextContainer',\n  'userPreviewMainIdentifier',\n  'userPreviewMainIdentifierText',\n  'userPreviewSecondaryIdentifier',\n\n  'organizationPreview',\n  'organizationPreviewAvatarContainer',\n  'organizationPreviewAvatarBox',\n  'organizationPreviewAvatarImage',\n  'organizationPreviewTextContainer',\n  'organizationPreviewMainIdentifier',\n  'organizationPreviewSecondaryIdentifier',\n\n  'organizationAvatarUploaderContainer',\n\n  'membersPageInviteButton',\n\n  'identityPreview',\n  'identityPreviewText',\n  'identityPreviewEditButton',\n  'identityPreviewEditButtonIcon',\n\n  'passkeyIcon',\n\n  'accountSwitcherActionButton',\n  'accountSwitcherActionButtonIconBox',\n  'accountSwitcherActionButtonIcon',\n\n  'pricingTable',\n  'pricingTableCard',\n  'pricingTableCardHeader',\n  'pricingTableCardTitleContainer',\n  'pricingTableCardTitle',\n  'pricingTableCardDescription',\n  'pricingTableCardBody',\n  'pricingTableCardStatusRow',\n  'pricingTableCardStatus',\n  'pricingTableCardFeatures',\n  'pricingTableCardFeaturesList',\n  'pricingTableCardFeaturesListItem',\n  'pricingTableCardFeaturesListItemContent',\n  'pricingTableCardFeaturesListItemTitle',\n  'pricingTableCardPeriodToggle',\n  'pricingTableCardFeeContainer',\n  'pricingTableCardFee',\n  'pricingTableCardFeePeriod',\n  'pricingTableCardFeePeriodNotice',\n  'pricingTableCardFooter',\n  'pricingTableCardFooterButton',\n  'pricingTableCardFooterNotice',\n\n  'pricingTableMatrix',\n  'pricingTableMatrixTable',\n  'pricingTableMatrixRowGroup',\n  'pricingTableMatrixRowGroupHeader',\n  'pricingTableMatrixRowGroupBody',\n  'pricingTableMatrixRow',\n  'pricingTableMatrixRowHeader',\n  'pricingTableMatrixRowBody',\n  'pricingTableMatrixColumnHeader',\n  'pricingTableMatrixCell',\n  'pricingTableMatrixCellFooter',\n  'pricingTableMatrixAvatar',\n  'pricingTableMatrixBadge',\n  'pricingTableMatrixPlanName',\n  'pricingTableMatrixFee',\n  'pricingTableMatrixFeePeriod',\n  'pricingTableMatrixFeePeriodNotice',\n  'pricingTableMatrixFeePeriodNoticeInner',\n  'pricingTableMatrixFeePeriodNoticeLabel',\n  'pricingTableMatrixFooter',\n\n  'planDetailHeader',\n  'planDetailAvatar',\n  'planDetailBadgeAvatarTitleDescriptionContainer',\n  'planDetailBadgeContainer',\n  'planDetailBadge',\n  'planDetailTitle',\n  'planDetailTitleDescriptionContainer',\n  'planDetailDescription',\n  'planDetailAction',\n  'planDetailFeeContainer',\n  'planDetailFee',\n  'planDetailFeePeriod',\n  'planDetailFeePeriodNotice',\n  'planDetailFeePeriodNoticeInner',\n  'planDetailFeePeriodNoticeLabel',\n  'planDetailCaption',\n  'planDetailFeatures',\n  'planDetailFeaturesList',\n  'planDetailFeaturesListItem',\n  'planDetailFeaturesListItemContent',\n  'planDetailFeaturesListItemTitle',\n  'planDetailFeaturesListItemDescription',\n  'planDetailPeriodToggle',\n\n  'segmentedControlRoot',\n  'segmentedControlButton',\n\n  'switchRoot',\n  'switchIndicator',\n  'switchThumb',\n  'switchLabel',\n\n  'alert',\n  'alertIcon',\n  'alertText',\n  'alertTextContainer',\n\n  'tagInputContainer',\n  'tagPillIcon',\n  'tagPillContainer',\n\n  'tabPanel',\n  'tabButton',\n  'tabListContainer',\n\n  'tableHead',\n  'tableBody',\n  'tableRow',\n  'tableHeaderCell',\n  'tableBodyCell',\n\n  'paginationButton',\n  'paginationButtonIcon',\n  'paginationRowText',\n\n  'selectButton',\n  'selectSearchInput',\n  'selectButtonIcon',\n  'selectOptionsContainer',\n  'selectOption',\n\n  'paymentMethodRow',\n  'paymentMethodRowIcon',\n  'paymentMethodRowText',\n  'paymentMethodRowType',\n  'paymentMethodRowValue',\n  'paymentMethodRowBadge',\n\n  'statementRoot',\n  'statementHeader',\n  'statementHeaderTitleContainer',\n  'statementHeaderTitle',\n  'statementHeaderBadge',\n  'statementBody',\n  'statementSection',\n  'statementSectionHeader',\n  'statementSectionHeaderTitle',\n  'statementSectionContent',\n  'statementSectionContentItem',\n  'statementSectionContentDetailsList',\n  'statementSectionContentDetailsListItem',\n  'statementSectionContentDetailsListItemLabelContainer',\n  'statementSectionContentDetailsListItemLabel',\n  'statementSectionContentDetailsListItemValue',\n  'statementSectionContentDetailsHeader',\n  'statementSectionContentDetailsHeaderItem',\n  'statementSectionContentDetailsHeaderItemIcon',\n  'statementSectionContentDetailsHeaderTitle',\n  'statementSectionContentDetailsHeaderDescription',\n  'statementSectionContentDetailsHeaderSecondaryTitle',\n  'statementSectionContentDetailsHeaderSecondaryDescription',\n  'statementFooter',\n  'statementFooterLabel',\n  'statementFooterValueContainer',\n  'statementFooterCurrency',\n  'statementFooterValue',\n  'statementCopyButton',\n  'menuButton',\n  'menuButtonEllipsis',\n  'menuButtonEllipsisBordered',\n  'menuList',\n  'menuItem',\n\n  'paymentAttemptRoot',\n  'paymentAttemptHeader',\n  'paymentAttemptHeaderTitleContainer',\n  'paymentAttemptHeaderTitle',\n  'paymentAttemptHeaderBadge',\n  'paymentAttemptBody',\n  'paymentAttemptFooter',\n  'paymentAttemptFooterLabel',\n  'paymentAttemptFooterValueContainer',\n  'paymentAttemptFooterCurrency',\n  'paymentAttemptFooterValue',\n  'paymentAttemptCopyButton',\n\n  'modalBackdrop',\n  'modalContent',\n  'modalCloseButton',\n\n  'profileSection',\n  'profileSectionItemList',\n  'profileSectionItem',\n  'profileSectionHeader',\n  'profileSectionTitle',\n  'profileSectionTitleText',\n  'profileSectionSubtitle',\n  'profileSectionSubtitleText',\n  'profileSectionContent',\n  'profileSectionPrimaryButton',\n  'profileSectionButtonGroup',\n  'profilePage',\n\n  'formattedPhoneNumber',\n  'formattedPhoneNumberFlag',\n  'formattedPhoneNumberText',\n\n  'formattedDate',\n\n  'scrollBox',\n\n  'navbar',\n  'navbarButtons',\n  'navbarButton',\n  'navbarButtonIcon',\n  'navbarButtonText',\n  'navbarMobileMenuRow',\n  'navbarMobileMenuButton',\n  'navbarMobileMenuButtonIcon',\n\n  'pageScrollBox',\n  'page',\n\n  'activeDevice',\n  'activeDeviceListItem',\n  'activeDeviceIcon',\n\n  'impersonationFab',\n  'impersonationFabIcon',\n  'impersonationFabIconContainer',\n  'impersonationFabTitle',\n  'impersonationFabActionLink',\n\n  'invitationsSentIconBox',\n  'invitationsSentIcon',\n\n  'qrCodeRow',\n  'qrCodeContainer',\n\n  'tooltip',\n  'tooltipContent',\n  'tooltipText',\n\n  'badge',\n  'notificationBadge',\n  'buttonArrowIcon',\n  'spinner',\n\n  'apiKeys',\n  'apiKeysHeader',\n  'apiKeysSearchBox',\n  'apiKeysSearchInput',\n  'apiKeysAddButton',\n  'apiKeysTable',\n  'apiKeysCopyButton',\n  'apiKeysRevealButton',\n  'apiKeysCreateForm',\n  'apiKeysCreateFormNameInput',\n  'apiKeysCreateFormDescriptionInput',\n  'apiKeysCreateFormExpirationInput',\n  'apiKeysCreateFormSubmitButton',\n  'apiKeysCreateFormExpirationCaption',\n  'apiKeysRevokeModal',\n  'apiKeysRevokeModalInput',\n  'apiKeysRevokeModalSubmitButton',\n  'apiKeysCopyModal',\n  'apiKeysCopyModalInput',\n  'apiKeysCopyModalSubmitButton',\n\n  'subscriptionDetailsCard',\n  'subscriptionDetailsCardHeader',\n  'subscriptionDetailsCardBadge',\n  'subscriptionDetailsCardTitle',\n  'subscriptionDetailsCardBody',\n  'subscriptionDetailsCardFooter',\n  'subscriptionDetailsCardActions',\n  'subscriptionDetailsActionButton',\n  'subscriptionDetailsCancelButton',\n  'subscriptionDetailsDetailRow',\n  'subscriptionDetailsDetailRowLabel',\n  'subscriptionDetailsDetailRowValue',\n\n  'enterpriseConnectionsRoot',\n  'enterpriseConnectionButton',\n  'enterpriseConnectionButtonText',\n\n  'web3SolanaWalletButtonsRoot',\n  'web3SolanaWalletButtons',\n  'web3SolanaWalletButtonsIconButton',\n  'web3SolanaWalletButtonsBlockButton',\n  'web3SolanaWalletButtonsBlockButtonText',\n  'web3SolanaWalletButtonsWalletIcon',\n  'web3SolanaWalletButtonsWalletInitialIcon',\n\n  'walletIcon',\n  'walletInitialIcon',\n] as const).map(camelize) as (keyof ElementsConfig)[];\n\ntype TargettableClassname<K extends keyof ElementsConfig> = `${typeof CLASS_PREFIX}${K}`;\ntype AllowedIds<T extends keyof ElementsConfig> = ElementsConfig[T]['ids'];\ntype AllowedStates<T extends keyof ElementsConfig> = ElementsConfig[T]['states'];\ntype ObjectKeyWithState<K extends keyof ElementsConfig> = StateSelectors<K, ElementsConfig[K]['states']>;\ntype ObjectKeyWithIds<K extends keyof ElementsConfig> = IdSelectors<K, ElementsConfig[K]['ids']>;\ntype ObjectKeyWithIdAndState<K extends keyof ElementsConfig> = StateSelectors<\n  IdSelectors<K, ElementsConfig[K]['ids']>,\n  ElementsConfig[K]['states']\n>;\n\nexport type ElementId<Id = string> = { id: Id; __type: 'id' };\nexport type ElementDescriptor<K extends keyof ElementsConfig = any> = {\n  targettableClassname: TargettableClassname<K>;\n  objectKey: ElementObjectKey<K>;\n  getTargettableIdClassname: (params: { id: AllowedIds<K> | never }) => string;\n  getObjectKeyWithState: (state: AllowedStates<K> | never) => ObjectKeyWithState<K>;\n  getObjectKeyWithId: (param: ElementId<AllowedIds<K>> | never) => ObjectKeyWithIds<K>;\n  getObjectKeyWithIdAndState: (id: ElementId<AllowedIds<K>>, state: AllowedStates<K>) => ObjectKeyWithIdAndState<K>;\n  setId: <Id extends AllowedIds<K>>(id?: Id) => ElementId<Id> | undefined;\n};\n\ntype ElementDescriptors = { [k in keyof ElementsConfig as ElementObjectKey<k>]: ElementDescriptor<k> };\n\n/**\n * Turns a key from the ElementsConfig object to a targettable classname\n * socialButtons-buttonIcon ->  cl-socialButtons-buttonIcon\n */\nconst toTargettableClassname = <K extends keyof ElementsConfig>(key: K): TargettableClassname<K> => {\n  return (CLASS_PREFIX + (key as string)) as TargettableClassname<K>;\n};\n\n/**\n * Turns a key from the ElementsConfig object to a appearance.elements key\n * socialButtons-buttonIcon -> socialButtonsButtonIcon\n */\nconst toObjectKey = <K extends keyof ElementsConfig>(key: K): ElementObjectKey<K> => {\n  return key.replace(/([-][a-z])/, match => match[1].toUpperCase()) as ElementObjectKey<K>;\n};\n\nconst createElementDescriptor = <K extends keyof ElementsConfig>(key: K): ElementDescriptor<K> => {\n  const objectKey = toObjectKey(key);\n  return {\n    objectKey,\n    targettableClassname: toTargettableClassname(key),\n    // getTargettableIdClassname: params => ID_CLASS_PREFIX + params.id,\n    getTargettableIdClassname: params => toTargettableClassname(key) + '__' + params.id,\n    getObjectKeyWithState: state => (objectKey + OBJ_KEY_DELIMITER + state) as any,\n    getObjectKeyWithId: idObj => (objectKey + OBJ_KEY_DELIMITER + idObj.id) as any,\n    getObjectKeyWithIdAndState: (idObj, state) =>\n      (objectKey + OBJ_KEY_DELIMITER + idObj.id + OBJ_KEY_DELIMITER + state) as any,\n    setId: id => (id ? { id, __type: 'id' } : undefined),\n  };\n};\n\nconst createDescriptorMap = <K extends keyof ElementsConfig>(keys = APPEARANCE_KEYS): ElementDescriptors => {\n  const entries = keys.map(key => [toObjectKey(key), createElementDescriptor(key)]) as unknown as Array<\n    [K, ElementDescriptor<K>]\n  >;\n  return fromEntries(entries) as unknown as ElementDescriptors;\n};\n\nexport const descriptors = createDescriptorMap();\n"],"mappings":";;;;AAIA,MAAa,eAAe;AAE5B,MAAa,oBAAoB;AAEjC,MAAM,gCAAgC,mBAAyC;AAC/E,MAAM,YAAY,MAAc,EAAE,QAAQ,QAAO,MAAK,EAAE,GAAG,aAAa,CAAC;;;;;;AAMzE,MAAa,kBAAkB,8BAA8B;CAC3D;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CAEA;CAEA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CAEA;CAEA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CAEA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CAEA;CACA;CACD,CAAU,CAAC,IAAI,SAAS;;;;;AA6BzB,MAAM,0BAA0D,QAAoC;AAClG,QAAQ,eAAgB;;;;;;AAO1B,MAAM,eAA+C,QAAgC;AACnF,QAAO,IAAI,QAAQ,eAAc,UAAS,MAAM,GAAG,aAAa,CAAC;;AAGnE,MAAM,2BAA2D,QAAiC;CAChG,MAAM,YAAY,YAAY,IAAI;AAClC,QAAO;EACL;EACA,sBAAsB,uBAAuB,IAAI;EAEjD,4BAA2B,WAAU,uBAAuB,IAAI,GAAG,OAAO,OAAO;EACjF,wBAAuB,UAAU,YAAY,oBAAoB;EACjE,qBAAoB,UAAU,YAAY,oBAAoB,MAAM;EACpE,6BAA6B,OAAO,UACjC,YAAY,oBAAoB,MAAM,KAAK,oBAAoB;EAClE,QAAO,OAAO,KAAK;GAAE;GAAI,QAAQ;GAAM,GAAG;EAC3C;;AAGH,MAAM,uBAAuD,OAAO,oBAAwC;AAI1G,QAAO,YAHS,KAAK,KAAI,QAAO,CAAC,YAAY,IAAI,EAAE,wBAAwB,IAAI,CAAC,CAAC,CAGtD;;AAG7B,MAAa,cAAc,qBAAqB"}