@thunderid/react 0.11.3 → 0.11.4

package/dist/cjs/components/presentation/auth/SignUp/BaseSignUp.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSignUp.styles.cjs","names":["signUp: string","card: string","logoContainer: string","header: string","title: string","subtitle: string","messageItem: string","errorContainer: string","contentContainer: string","loadingContainer: string","loadingText: string","divider: string","centeredContainer: string","passkeyContainer: string","passkeyText: string","form: string","formDivider: string","authenticatorSection: string","authenticatorItem: string","noAuthenticatorCard: string","errorAlert: string","messagesAlert: string","flowMessagesContainer: string"],"sources":["../../../../../../src/components/presentation/auth/SignUp/BaseSignUp.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/**\n * Creates styles for the BaseSignUp component\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const signUp: string = css`\n      min-width: 420px;\n      margin: 0 auto;\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const card: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      gap: calc(${theme.vars.spacing.unit} * 2);\n      min-width: 420px;\n    `;\n\n    const logoContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const header: string = css`\n      gap: 0;\n      align-items: center;\n    `;\n\n    const title: string = css`\n      margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const subtitle: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const messageItem: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const errorContainer: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const contentContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const loadingContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      padding: calc(${theme.vars.spacing.unit} * 4);\n    `;\n\n    const loadingText: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} * 2);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const divider: string = css`\n      margin: calc(${theme.vars.spacing.unit} * 1) 0;\n    `;\n\n    const centeredContainer: string = css`\n      text-align: center;\n      padding: calc(${theme.vars.spacing.unit} * 4);\n    `;\n\n    const passkeyContainer: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const passkeyText: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} * 1);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const form: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const formDivider: string = css`\n      margin: calc(${theme.vars.spacing.unit} * 1) 0;\n    `;\n\n    const authenticatorSection: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const authenticatorItem: string = css`\n      width: 100%;\n    `;\n\n    const noAuthenticatorCard: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const errorAlert: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const messagesAlert: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const flowMessagesContainer: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const flowMessageItem: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    return {\n      authenticatorItem,\n      authenticatorSection,\n      card,\n      centeredContainer,\n      contentContainer,\n      divider,\n      errorAlert,\n      errorContainer,\n      flowMessageItem,\n      flowMessagesContainer,\n      form,\n      formDivider,\n      header,\n      loadingContainer,\n      loadingText,\n      logoContainer,\n      messageItem,\n      messagesAlert,\n      noAuthenticatorCard,\n      passkeyContainer,\n      passkeyText,\n      signUp,\n      subtitle,\n      title,\n    };\n  }, [\n    theme.vars.colors.background.surface,\n    theme.vars.colors.text.primary,\n    theme.vars.colors.text.secondary,\n    theme.vars.borderRadius.large,\n    theme.vars.spacing.unit,\n    theme.vars.typography.fontFamily,\n    colorScheme,\n  ]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AA4BA,MAAM,aAAa,OAAc,yCACjB;CACZ,MAAMA,SAAiB,iBAAG;;;qBAGT,MAAM,KAAK,WAAW,WAAW;;CAGlD,MAAMC,OAAe,iBAAG;oBACR,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;kBACnC,MAAM,KAAK,QAAQ,KAAK;;;CAItC,MAAMC,gBAAwB,iBAAG;;;;4BAIT,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,SAAiB,iBAAG;;;;CAK1B,MAAMC,QAAgB,iBAAG;yBACJ,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,QAAQ;;CAG1C,MAAMC,WAAmB,iBAAG;4BACJ,MAAM,KAAK,QAAQ,KAAK;eACrC,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,cAAsB,iBAAG;4BACP,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,iBAAyB,iBAAG;4BACV,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,mBAA2B,iBAAG;;;kBAGtB,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,mBAA2B,iBAAG;;;;sBAIlB,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,cAAsB,iBAAG;yBACV,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,UAAkB,iBAAG;qBACV,MAAM,KAAK,QAAQ,KAAK;;CAGzC,MAAMC,oBAA4B,iBAAG;;sBAEnB,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,mBAA2B,iBAAG;4BACZ,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,cAAsB,iBAAG;yBACV,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,OAAe,iBAAG;;;kBAGV,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,cAAsB,iBAAG;qBACd,MAAM,KAAK,QAAQ,KAAK;;CAGzC,MAAMC,uBAA+B,iBAAG;;;kBAG1B,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,oBAA4B,iBAAG;;;CAIrC,MAAMC,sBAA8B,iBAAG;oBACvB,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;sBAC/B,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,aAAqB,iBAAG;4BACN,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,gBAAwB,iBAAG;4BACT,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,wBAAgC,iBAAG;4BACjB,MAAM,KAAK,QAAQ,KAAK;;AAOhD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,iBAb8B,iBAAG;4BACX,MAAM,KAAK,QAAQ,KAAK;;EAa9C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CACD,MAAM,KAAK,OAAO,WAAW;CAC7B,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,QAAQ;CACnB,MAAM,KAAK,WAAW;CACtB;CACD,CAAC;AAEJ,gCAAe"}
+{"version":3,"file":"BaseSignUp.styles.cjs","names":["signUp: string","card: string","logoContainer: string","header: string","title: string","subtitle: string","messageItem: string","errorContainer: string","contentContainer: string","loadingContainer: string","loadingText: string","divider: string","centeredContainer: string","passkeyContainer: string","passkeyText: string","form: string","formDivider: string","authenticatorSection: string","authenticatorItem: string","noAuthenticatorCard: string","errorAlert: string","messagesAlert: string","flowMessagesContainer: string"],"sources":["../../../../../../src/components/presentation/auth/SignUp/BaseSignUp.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/**\n * Creates styles for the BaseSignUp component\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const signUp: string = css`\n      min-width: 420px;\n      margin: 0 auto;\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const card: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      gap: calc(${theme.vars.spacing.unit} * 2);\n      min-width: 420px;\n    `;\n\n    const logoContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const header: string = css`\n      gap: 0;\n      align-items: center;\n    `;\n\n    const title: string = css`\n      margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const subtitle: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const messageItem: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const errorContainer: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const contentContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const loadingContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      padding: calc(${theme.vars.spacing.unit} * 4);\n    `;\n\n    const loadingText: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} * 2);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const divider: string = css`\n      margin: calc(${theme.vars.spacing.unit} * 1) 0;\n    `;\n\n    const centeredContainer: string = css`\n      text-align: center;\n      padding: calc(${theme.vars.spacing.unit} * 4);\n    `;\n\n    const passkeyContainer: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const passkeyText: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} * 1);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const form: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const formDivider: string = css`\n      margin: calc(${theme.vars.spacing.unit} * 1) 0;\n    `;\n\n    const authenticatorSection: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const authenticatorItem: string = css`\n      width: 100%;\n    `;\n\n    const noAuthenticatorCard: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const errorAlert: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const messagesAlert: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const flowMessagesContainer: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const flowMessageItem: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    return {\n      authenticatorItem,\n      authenticatorSection,\n      card,\n      centeredContainer,\n      contentContainer,\n      divider,\n      errorAlert,\n      errorContainer,\n      flowMessageItem,\n      flowMessagesContainer,\n      form,\n      formDivider,\n      header,\n      loadingContainer,\n      loadingText,\n      logoContainer,\n      messageItem,\n      messagesAlert,\n      noAuthenticatorCard,\n      passkeyContainer,\n      passkeyText,\n      signUp,\n      subtitle,\n      title,\n    };\n  }, [\n    theme.vars.colors.background.surface,\n    theme.vars.colors.text.primary,\n    theme.vars.colors.text.secondary,\n    theme.vars.borderRadius.large,\n    theme.vars.spacing.unit,\n    theme.vars.typography.fontFamily,\n    colorScheme,\n  ]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,aAAa,OAAc,yCACjB;CACZ,MAAMA,SAAiB,iBAAG;;;qBAGT,MAAM,KAAK,WAAW,WAAW;;CAGlD,MAAMC,OAAe,iBAAG;oBACR,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;kBACnC,MAAM,KAAK,QAAQ,KAAK;;;CAItC,MAAMC,gBAAwB,iBAAG;;;;4BAIT,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,SAAiB,iBAAG;;;;CAK1B,MAAMC,QAAgB,iBAAG;yBACJ,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,QAAQ;;CAG1C,MAAMC,WAAmB,iBAAG;4BACJ,MAAM,KAAK,QAAQ,KAAK;eACrC,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,cAAsB,iBAAG;4BACP,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,iBAAyB,iBAAG;4BACV,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,mBAA2B,iBAAG;;;kBAGtB,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,mBAA2B,iBAAG;;;;sBAIlB,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,cAAsB,iBAAG;yBACV,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,UAAkB,iBAAG;qBACV,MAAM,KAAK,QAAQ,KAAK;;CAGzC,MAAMC,oBAA4B,iBAAG;;sBAEnB,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,mBAA2B,iBAAG;4BACZ,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,cAAsB,iBAAG;yBACV,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,OAAe,iBAAG;;;kBAGV,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,cAAsB,iBAAG;qBACd,MAAM,KAAK,QAAQ,KAAK;;CAGzC,MAAMC,uBAA+B,iBAAG;;;kBAG1B,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,oBAA4B,iBAAG;;;CAIrC,MAAMC,sBAA8B,iBAAG;oBACvB,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;sBAC/B,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,aAAqB,iBAAG;4BACN,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,gBAAwB,iBAAG;4BACT,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,wBAAgC,iBAAG;4BACjB,MAAM,KAAK,QAAQ,KAAK;;AAOhD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,iBAb8B,iBAAG;4BACX,MAAM,KAAK,QAAQ,KAAK;;EAa9C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CACD,MAAM,KAAK,OAAO,WAAW;CAC7B,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,QAAQ;CACnB,MAAM,KAAK,WAAW;CACtB;CACD,CAAC;AAEJ,gCAAe"}

package/dist/cjs/components/presentation/auth/SignUp/SignUp.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SignUp.cjs","names":["SignUp: FC<SignUpProps>","useThunderID","urlParams: URLSearchParams","executionIdFromUrl: string","applicationIdFromUrl: string","effectiveApplicationId: any","challengeToken: string | undefined","initialPayload: EmbeddedSignUpFlowRequest | any","EmbeddedFlowType","redirectURL: string | undefined","EmbeddedSignUpFlowType","oauthRedirectUrl: any","BaseSignUp"],"sources":["../../../../../../src/components/presentation/auth/SignUp/SignUp.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025-2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {\n  EmbeddedSignUpFlowRequest,\n  EmbeddedSignUpFlowResponse,\n  EmbeddedSignUpFlowType,\n  EmbeddedFlowType,\n} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode} from 'react';\n// eslint-disable-next-line import/no-named-as-default\nimport BaseSignUp, {BaseSignUpProps, BaseSignUpRenderProps} from './BaseSignUp';\nimport useThunderID from '../../../../contexts/ThunderID/useThunderID';\n\n/**\n * Render props function parameters (re-exported from BaseSignUp for convenience)\n */\nexport type SignUpRenderProps = BaseSignUpRenderProps;\n\n/**\n * Props for the SignUp component.\n */\nexport type SignUpProps = BaseSignUpProps & {\n  /**\n   * Render props function for custom UI\n   */\n  children?: (props: SignUpRenderProps) => ReactNode;\n};\n\n/**\n * A styled SignUp component for ThunderIDV2 (AKA Thunder) platform that provides embedded sign-up flow with pre-built styling.\n * This component handles the API calls for sign-up and delegates UI logic to BaseSignUp.\n */\nconst SignUp: FC<SignUpProps> = ({\n  className,\n  size = 'medium',\n  afterSignUpUrl,\n  onError,\n  onComplete,\n  shouldRedirectAfterSignUp = true,\n  children,\n  ...rest\n}: SignUpProps): ReactElement => {\n  const {signUp, isInitialized, applicationId, scopes} = useThunderID();\n\n  /**\n   * Initialize the sign-up flow.\n   */\n  const handleInitialize = async (payload?: EmbeddedSignUpFlowRequest): Promise<EmbeddedSignUpFlowResponse> => {\n    const urlParams: URLSearchParams = new URL(window.location.href).searchParams;\n    const executionIdFromUrl: string = urlParams.get('executionId') || '';\n    const applicationIdFromUrl: string = urlParams.get('applicationId') ?? '';\n\n    const effectiveApplicationId: any = applicationId ?? applicationIdFromUrl;\n\n    const challengeToken: string | undefined = (payload as any)?.challengeToken;\n\n    let initialPayload: EmbeddedSignUpFlowRequest | any;\n    if (executionIdFromUrl) {\n      initialPayload = {\n        executionId: executionIdFromUrl,\n        ...(challengeToken ? {challengeToken} : {}),\n      };\n    } else if (!payload || !('flowType' in payload)) {\n      initialPayload = {\n        ...(payload || {}),\n        flowType: EmbeddedFlowType.Registration,\n        ...(effectiveApplicationId && {applicationId: effectiveApplicationId}),\n        ...(scopes && {scopes}),\n      };\n    } else {\n      initialPayload = payload;\n    }\n\n    return (await signUp(initialPayload)) as EmbeddedSignUpFlowResponse;\n  };\n\n  /**\n   * Handle sign-up steps.\n   */\n  const handleOnSubmit = async (payload: EmbeddedSignUpFlowRequest): Promise<EmbeddedSignUpFlowResponse> =>\n    (await signUp(payload)) as EmbeddedSignUpFlowResponse;\n\n  /**\n   * Handle successful sign-up and redirect.\n   */\n  const handleComplete = (response: EmbeddedSignUpFlowResponse): any => {\n    onComplete?.(response);\n\n    if (!shouldRedirectAfterSignUp) {\n      return;\n    }\n\n    const redirectURL: string | undefined = (response?.data as Record<string, unknown>)?.['redirectURL'] as\n      | string\n      | undefined;\n\n    if (\n      response?.type === EmbeddedSignUpFlowType.Redirection &&\n      redirectURL &&\n      !redirectURL.includes('oauth') && // Not a social provider redirect\n      !redirectURL.includes('auth') // Not an auth provider redirect\n    ) {\n      window.location.href = redirectURL;\n      return;\n    }\n\n    const oauthRedirectUrl: any = (response as any)?.redirectUrl;\n    if (oauthRedirectUrl) {\n      window.location.href = oauthRedirectUrl;\n      return;\n    }\n\n    // For non-redirection responses (regular sign-up completion), handle redirect if configured.\n    // Skip when assertion is present — the SDK stored the session and the caller handled navigation.\n    if (response?.type !== EmbeddedSignUpFlowType.Redirection && afterSignUpUrl && !(response as any)?.assertion) {\n      window.location.href = afterSignUpUrl;\n    }\n  };\n\n  return (\n    <BaseSignUp\n      afterSignUpUrl={afterSignUpUrl}\n      onInitialize={handleInitialize}\n      onSubmit={handleOnSubmit}\n      onError={onError}\n      onComplete={handleComplete}\n      className={className}\n      size={size}\n      isInitialized={isInitialized}\n      children={children}\n      showTitle={true}\n      showSubtitle={true}\n      {...rest}\n    />\n  );\n};\n\nexport default SignUp;\n"],"mappings":";;;;;;;;;;;;;AAgDA,MAAMA,UAA2B,EAC/B,WACA,OAAO,UACP,gBACA,SACA,YACA,4BAA4B,MAC5B,SACA,GAAG,WAC4B;CAC/B,MAAM,EAAC,QAAQ,eAAe,eAAe,WAAUC,8BAAc;;;;CAKrE,MAAM,mBAAmB,OAAO,YAA6E;EAC3G,MAAMC,YAA6B,IAAI,IAAI,OAAO,SAAS,KAAK,CAAC;EACjE,MAAMC,qBAA6B,UAAU,IAAI,cAAc,IAAI;EACnE,MAAMC,uBAA+B,UAAU,IAAI,gBAAgB,IAAI;EAEvE,MAAMC,yBAA8B,iBAAiB;EAErD,MAAMC,iBAAsC,SAAiB;EAE7D,IAAIC;AACJ,MAAI,mBACF,kBAAiB;GACf,aAAa;GACb,GAAI,iBAAiB,EAAC,gBAAe,GAAG,EAAE;GAC3C;WACQ,CAAC,WAAW,EAAE,cAAc,SACrC,kBAAiB;GACf,GAAI,WAAW,EAAE;GACjB,UAAUC,qCAAiB;GAC3B,GAAI,0BAA0B,EAAC,eAAe,wBAAuB;GACrE,GAAI,UAAU,EAAC,QAAO;GACvB;MAED,kBAAiB;AAGnB,SAAQ,MAAM,OAAO,eAAe;;;;;CAMtC,MAAM,iBAAiB,OAAO,YAC3B,MAAM,OAAO,QAAQ;;;;CAKxB,MAAM,kBAAkB,aAA8C;AACpE,eAAa,SAAS;AAEtB,MAAI,CAAC,0BACH;EAGF,MAAMC,eAAmC,UAAU,QAAmC;AAItF,MACE,UAAU,SAASC,2CAAuB,eAC1C,eACA,CAAC,YAAY,SAAS,QAAQ,IAC9B,CAAC,YAAY,SAAS,OAAO,EAC7B;AACA,UAAO,SAAS,OAAO;AACvB;;EAGF,MAAMC,mBAAyB,UAAkB;AACjD,MAAI,kBAAkB;AACpB,UAAO,SAAS,OAAO;AACvB;;AAKF,MAAI,UAAU,SAASD,2CAAuB,eAAe,kBAAkB,CAAE,UAAkB,UACjG,QAAO,SAAS,OAAO;;AAI3B,QACE,2CAACE;EACiB;EAChB,cAAc;EACd,UAAU;EACD;EACT,YAAY;EACD;EACL;EACS;EACL;EACV,WAAW;EACX,cAAc;EACd,GAAI;GACJ;;AAIN,qBAAe"}
+{"version":3,"file":"SignUp.cjs","names":["SignUp: FC<SignUpProps>","useThunderID","urlParams: URLSearchParams","executionIdFromUrl: string","applicationIdFromUrl: string","effectiveApplicationId: any","challengeToken: string | undefined","initialPayload: EmbeddedSignUpFlowRequest | any","EmbeddedFlowType","redirectURL: string | undefined","EmbeddedSignUpFlowType","oauthRedirectUrl: any","BaseSignUp"],"sources":["../../../../../../src/components/presentation/auth/SignUp/SignUp.tsx"],"sourcesContent":["// Copyright 2025-2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  EmbeddedSignUpFlowRequest,\n  EmbeddedSignUpFlowResponse,\n  EmbeddedSignUpFlowType,\n  EmbeddedFlowType,\n} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode} from 'react';\n// eslint-disable-next-line import/no-named-as-default\nimport BaseSignUp, {BaseSignUpProps, BaseSignUpRenderProps} from './BaseSignUp';\nimport useThunderID from '../../../../contexts/ThunderID/useThunderID';\n\n/**\n * Render props function parameters (re-exported from BaseSignUp for convenience)\n */\nexport type SignUpRenderProps = BaseSignUpRenderProps;\n\n/**\n * Props for the SignUp component.\n */\nexport type SignUpProps = BaseSignUpProps & {\n  /**\n   * Render props function for custom UI\n   */\n  children?: (props: SignUpRenderProps) => ReactNode;\n};\n\n/**\n * A styled SignUp component for ThunderIDV2 (AKA Thunder) platform that provides embedded sign-up flow with pre-built styling.\n * This component handles the API calls for sign-up and delegates UI logic to BaseSignUp.\n */\nconst SignUp: FC<SignUpProps> = ({\n  className,\n  size = 'medium',\n  afterSignUpUrl,\n  onError,\n  onComplete,\n  shouldRedirectAfterSignUp = true,\n  children,\n  ...rest\n}: SignUpProps): ReactElement => {\n  const {signUp, isInitialized, applicationId, scopes} = useThunderID();\n\n  /**\n   * Initialize the sign-up flow.\n   */\n  const handleInitialize = async (payload?: EmbeddedSignUpFlowRequest): Promise<EmbeddedSignUpFlowResponse> => {\n    const urlParams: URLSearchParams = new URL(window.location.href).searchParams;\n    const executionIdFromUrl: string = urlParams.get('executionId') || '';\n    const applicationIdFromUrl: string = urlParams.get('applicationId') ?? '';\n\n    const effectiveApplicationId: any = applicationId ?? applicationIdFromUrl;\n\n    const challengeToken: string | undefined = (payload as any)?.challengeToken;\n\n    let initialPayload: EmbeddedSignUpFlowRequest | any;\n    if (executionIdFromUrl) {\n      initialPayload = {\n        executionId: executionIdFromUrl,\n        ...(challengeToken ? {challengeToken} : {}),\n      };\n    } else if (!payload || !('flowType' in payload)) {\n      initialPayload = {\n        ...(payload || {}),\n        flowType: EmbeddedFlowType.Registration,\n        ...(effectiveApplicationId && {applicationId: effectiveApplicationId}),\n        ...(scopes && {scopes}),\n      };\n    } else {\n      initialPayload = payload;\n    }\n\n    return (await signUp(initialPayload)) as EmbeddedSignUpFlowResponse;\n  };\n\n  /**\n   * Handle sign-up steps.\n   */\n  const handleOnSubmit = async (payload: EmbeddedSignUpFlowRequest): Promise<EmbeddedSignUpFlowResponse> =>\n    (await signUp(payload)) as EmbeddedSignUpFlowResponse;\n\n  /**\n   * Handle successful sign-up and redirect.\n   */\n  const handleComplete = (response: EmbeddedSignUpFlowResponse): any => {\n    onComplete?.(response);\n\n    if (!shouldRedirectAfterSignUp) {\n      return;\n    }\n\n    const redirectURL: string | undefined = (response?.data as Record<string, unknown>)?.['redirectURL'] as\n      | string\n      | undefined;\n\n    if (\n      response?.type === EmbeddedSignUpFlowType.Redirection &&\n      redirectURL &&\n      !redirectURL.includes('oauth') && // Not a social provider redirect\n      !redirectURL.includes('auth') // Not an auth provider redirect\n    ) {\n      window.location.href = redirectURL;\n      return;\n    }\n\n    const oauthRedirectUrl: any = (response as any)?.redirectUrl;\n    if (oauthRedirectUrl) {\n      window.location.href = oauthRedirectUrl;\n      return;\n    }\n\n    // For non-redirection responses (regular sign-up completion), handle redirect if configured.\n    // Skip when assertion is present — the SDK stored the session and the caller handled navigation.\n    if (response?.type !== EmbeddedSignUpFlowType.Redirection && afterSignUpUrl && !(response as any)?.assertion) {\n      window.location.href = afterSignUpUrl;\n    }\n  };\n\n  return (\n    <BaseSignUp\n      afterSignUpUrl={afterSignUpUrl}\n      onInitialize={handleInitialize}\n      onSubmit={handleOnSubmit}\n      onError={onError}\n      onComplete={handleComplete}\n      className={className}\n      size={size}\n      isInitialized={isInitialized}\n      children={children}\n      showTitle={true}\n      showSubtitle={true}\n      {...rest}\n    />\n  );\n};\n\nexport default SignUp;\n"],"mappings":";;;;;;;;;;;;;AAiCA,MAAMA,UAA2B,EAC/B,WACA,OAAO,UACP,gBACA,SACA,YACA,4BAA4B,MAC5B,SACA,GAAG,WAC4B;CAC/B,MAAM,EAAC,QAAQ,eAAe,eAAe,WAAUC,8BAAc;;;;CAKrE,MAAM,mBAAmB,OAAO,YAA6E;EAC3G,MAAMC,YAA6B,IAAI,IAAI,OAAO,SAAS,KAAK,CAAC;EACjE,MAAMC,qBAA6B,UAAU,IAAI,cAAc,IAAI;EACnE,MAAMC,uBAA+B,UAAU,IAAI,gBAAgB,IAAI;EAEvE,MAAMC,yBAA8B,iBAAiB;EAErD,MAAMC,iBAAsC,SAAiB;EAE7D,IAAIC;AACJ,MAAI,mBACF,kBAAiB;GACf,aAAa;GACb,GAAI,iBAAiB,EAAC,gBAAe,GAAG,EAAE;GAC3C;WACQ,CAAC,WAAW,EAAE,cAAc,SACrC,kBAAiB;GACf,GAAI,WAAW,EAAE;GACjB,UAAUC,qCAAiB;GAC3B,GAAI,0BAA0B,EAAC,eAAe,wBAAuB;GACrE,GAAI,UAAU,EAAC,QAAO;GACvB;MAED,kBAAiB;AAGnB,SAAQ,MAAM,OAAO,eAAe;;;;;CAMtC,MAAM,iBAAiB,OAAO,YAC3B,MAAM,OAAO,QAAQ;;;;CAKxB,MAAM,kBAAkB,aAA8C;AACpE,eAAa,SAAS;AAEtB,MAAI,CAAC,0BACH;EAGF,MAAMC,eAAmC,UAAU,QAAmC;AAItF,MACE,UAAU,SAASC,2CAAuB,eAC1C,eACA,CAAC,YAAY,SAAS,QAAQ,IAC9B,CAAC,YAAY,SAAS,OAAO,EAC7B;AACA,UAAO,SAAS,OAAO;AACvB;;EAGF,MAAMC,mBAAyB,UAAkB;AACjD,MAAI,kBAAkB;AACpB,UAAO,SAAS,OAAO;AACvB;;AAKF,MAAI,UAAU,SAASD,2CAAuB,eAAe,kBAAkB,CAAE,UAAkB,UACjG,QAAO,SAAS,OAAO;;AAI3B,QACE,2CAACE;EACiB;EAChB,cAAc;EACd,UAAU;EACD;EACT,YAAY;EACD;EACL;EACS;EACL;EACV,WAAW;EACX,cAAc;EACd,GAAI;GACJ;;AAIN,qBAAe"}

package/dist/cjs/components/primitives/AffixedField/AffixedField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AffixedField.cjs","names":["AffixedField: FC<AffixedFieldProps>","useTheme","hasError: boolean","prefixList: PrefixOption[]","hasPrefix: boolean","hasFixedPrefix: boolean","styles: Record<string, string>","useStyles","prefixDescriptionId: string","containerClassName: string","inputClassName: string","selectedValue: string","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/AffixedField/AffixedField.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {PrefixOption, bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {ChangeEvent, FC, InputHTMLAttributes, ReactElement, useId} from 'react';\nimport useStyles from './AffixedField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface AffixedFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'prefix'> {\n  /** Additional CSS class names applied to the outer form control. */\n  className?: string;\n  /** Whether the field is disabled. */\n  disabled?: boolean;\n  /** Error message to render below the field. */\n  error?: string;\n  /** Helper text to render below the field. */\n  helperText?: string;\n  /** Label rendered above the field. */\n  label?: string;\n  /**\n   * Called when the user changes the selected prefix. Only fires when `prefixes` is an\n   * array with two or more entries and the user picks a different one.\n   */\n  onPrefixChange?: (prefixValue: string) => void;\n  /**\n   * Currently selected prefix `value` (must match one of the resolved prefix entries'\n   * `value`). Required when `prefixes` resolves to a non-empty list. Ignored otherwise.\n   */\n  prefixValue?: string;\n  /**\n   * Leading affix. `string` renders as a fixed span; `PrefixOption[]` renders as a fixed\n   * span (single entry) or dropdown (multiple entries). Empty or undefined renders a\n   * plain input with no leading element.\n   */\n  prefixes?: string | PrefixOption[];\n  /** Whether the field is required. */\n  required?: boolean;\n}\n\n/**\n * Converts the polymorphic `prefixes` prop into a uniform list. A string is treated\n * as a single fixed entry so the rest of the component can iterate a single shape.\n */\nconst normalizePrefixes = (prefixes: string | PrefixOption[] | undefined): PrefixOption[] => {\n  if (typeof prefixes === 'string') {\n    return prefixes.length > 0 ? [{label: prefixes, value: prefixes}] : [];\n  }\n  return prefixes ?? [];\n};\n\nconst AffixedField: FC<AffixedFieldProps> = ({\n  label,\n  error,\n  required,\n  className,\n  disabled,\n  helperText,\n  prefixes,\n  prefixValue,\n  onPrefixChange,\n  type = 'text',\n  style = {},\n  ...rest\n}: AffixedFieldProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError: boolean = !!error;\n  const prefixList: PrefixOption[] = normalizePrefixes(prefixes);\n  const hasPrefix: boolean = prefixList.length > 0;\n  const hasFixedPrefix: boolean = prefixList.length === 1;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, disabled ?? false, hasError, hasPrefix);\n  // Stable id for the visually-hidden prefix announcement; only referenced when a\n  // fixed prefix is present, but generated unconditionally so the hook order is stable.\n  const prefixDescriptionId: string = `${useId()}-prefix`;\n\n  const containerClassName: string = cx(\n    withVendorCSSClassPrefix(bem('affixed-field', 'container')),\n    styles['inputContainer'],\n  );\n\n  const inputClassName: string = cx(withVendorCSSClassPrefix(bem('affixed-field', 'input')), styles['input']);\n\n  const renderPrefix = (): ReactElement | null => {\n    if (prefixList.length === 0) return null;\n\n    if (prefixList.length === 1) {\n      return (\n        <>\n          <span\n            className={cx(withVendorCSSClassPrefix(bem('affixed-field', 'prefix-span')), styles['prefixSpan'])}\n            aria-hidden=\"true\"\n          >\n            {prefixList[0].label}\n          </span>\n          {/* Assistive-tech-only mirror of the fixed prefix; wired to the input via aria-describedby. */}\n          <span id={prefixDescriptionId} className={styles['visuallyHidden']}>\n            {prefixList[0].label}\n          </span>\n        </>\n      );\n    }\n\n    const selectedValue: string = prefixValue ?? prefixList[0].value;\n    return (\n      <select\n        className={cx(withVendorCSSClassPrefix(bem('affixed-field', 'prefix-select')), styles['prefixSelect'])}\n        value={selectedValue}\n        disabled={disabled}\n        onChange={(e: ChangeEvent<HTMLSelectElement>): void => onPrefixChange?.(e.target.value)}\n        aria-label=\"Prefix\"\n      >\n        {prefixList.map((p: PrefixOption) => (\n          <option key={p.value} value={p.value}>\n            {p.label}\n          </option>\n        ))}\n      </select>\n    );\n  };\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('affixed-field')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={hasError}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={containerClassName}>\n        {renderPrefix()}\n        <input\n          className={inputClassName}\n          type={type}\n          disabled={disabled}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n          aria-describedby={\n            [rest['aria-describedby'], hasFixedPrefix ? prefixDescriptionId : undefined].filter(Boolean).join(' ') ||\n            undefined\n          }\n        />\n      </div>\n    </FormControl>\n  );\n};\n\nexport default AffixedField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA6DA,MAAM,qBAAqB,aAAkE;AAC3F,KAAI,OAAO,aAAa,SACtB,QAAO,SAAS,SAAS,IAAI,CAAC;EAAC,OAAO;EAAU,OAAO;EAAS,CAAC,GAAG,EAAE;AAExE,QAAO,YAAY,EAAE;;AAGvB,MAAMA,gBAAuC,EAC3C,OACA,OACA,UACA,WACA,UACA,YACA,UACA,aACA,gBACA,OAAO,QACP,QAAQ,EAAE,CACV,GAAG,WACoB;CACvB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,WAAoB,CAAC,CAAC;CAC5B,MAAMC,aAA6B,kBAAkB,SAAS;CAC9D,MAAMC,YAAqB,WAAW,SAAS;CAC/C,MAAMC,iBAA0B,WAAW,WAAW;CACtD,MAAMC,SAAiCC,oCAAU,OAAO,aAAa,YAAY,OAAO,UAAU,UAAU;CAG5G,MAAMC,sBAA8B,qBAAU,CAAC;CAE/C,MAAMC,0HACyB,iBAAiB,YAAY,CAAC,EAC3D,OAAO,kBACR;CAED,MAAMC,sHAAyD,iBAAiB,QAAQ,CAAC,EAAE,OAAO,SAAS;CAE3G,MAAM,qBAA0C;AAC9C,MAAI,WAAW,WAAW,EAAG,QAAO;AAEpC,MAAI,WAAW,WAAW,EACxB,QACE,qFACE,2CAAC;GACC,gHAA2C,iBAAiB,cAAc,CAAC,EAAE,OAAO,cAAc;GAClG,eAAY;aAEX,WAAW,GAAG;IACV,EAEP,2CAAC;GAAK,IAAI;GAAqB,WAAW,OAAO;aAC9C,WAAW,GAAG;IACV,IACN;EAIP,MAAMC,gBAAwB,eAAe,WAAW,GAAG;AAC3D,SACE,2CAAC;GACC,gHAA2C,iBAAiB,gBAAgB,CAAC,EAAE,OAAO,gBAAgB;GACtG,OAAO;GACG;GACV,WAAW,MAA4C,iBAAiB,EAAE,OAAO,MAAM;GACvF,cAAW;aAEV,WAAW,KAAK,MACf,2CAAC;IAAqB,OAAO,EAAE;cAC5B,EAAE;MADQ,EAAE,MAEN,CACT;IACK;;AAIb,QACE,4CAACC;EACQ;EACK;EACZ,gHAA2C,gBAAgB,CAAC,EAAE,UAAU;EACjE;aAEN,SACC,2CAACC;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,4CAAC;GAAI,WAAW;cACb,cAAc,EACf,2CAAC;IACC,WAAW;IACL;IACI;IACV,gBAAc;IACd,iBAAe;IACf,GAAI;IACJ,oBACE,CAAC,KAAK,qBAAqB,iBAAiB,sBAAsB,OAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,IACtG;KAEF;IACE;GACM;;AAIlB,2BAAe"}
+{"version":3,"file":"AffixedField.cjs","names":["AffixedField: FC<AffixedFieldProps>","useTheme","hasError: boolean","prefixList: PrefixOption[]","hasPrefix: boolean","hasFixedPrefix: boolean","styles: Record<string, string>","useStyles","prefixDescriptionId: string","containerClassName: string","inputClassName: string","selectedValue: string","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/AffixedField/AffixedField.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {PrefixOption, bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {ChangeEvent, FC, InputHTMLAttributes, ReactElement, useId} from 'react';\nimport useStyles from './AffixedField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface AffixedFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'prefix'> {\n  /** Additional CSS class names applied to the outer form control. */\n  className?: string;\n  /** Whether the field is disabled. */\n  disabled?: boolean;\n  /** Error message to render below the field. */\n  error?: string;\n  /** Helper text to render below the field. */\n  helperText?: string;\n  /** Label rendered above the field. */\n  label?: string;\n  /**\n   * Called when the user changes the selected prefix. Only fires when `prefixes` is an\n   * array with two or more entries and the user picks a different one.\n   */\n  onPrefixChange?: (prefixValue: string) => void;\n  /**\n   * Currently selected prefix `value` (must match one of the resolved prefix entries'\n   * `value`). Required when `prefixes` resolves to a non-empty list. Ignored otherwise.\n   */\n  prefixValue?: string;\n  /**\n   * Leading affix. `string` renders as a fixed span; `PrefixOption[]` renders as a fixed\n   * span (single entry) or dropdown (multiple entries). Empty or undefined renders a\n   * plain input with no leading element.\n   */\n  prefixes?: string | PrefixOption[];\n  /** Whether the field is required. */\n  required?: boolean;\n}\n\n/**\n * Converts the polymorphic `prefixes` prop into a uniform list. A string is treated\n * as a single fixed entry so the rest of the component can iterate a single shape.\n */\nconst normalizePrefixes = (prefixes: string | PrefixOption[] | undefined): PrefixOption[] => {\n  if (typeof prefixes === 'string') {\n    return prefixes.length > 0 ? [{label: prefixes, value: prefixes}] : [];\n  }\n  return prefixes ?? [];\n};\n\nconst AffixedField: FC<AffixedFieldProps> = ({\n  label,\n  error,\n  required,\n  className,\n  disabled,\n  helperText,\n  prefixes,\n  prefixValue,\n  onPrefixChange,\n  type = 'text',\n  style = {},\n  ...rest\n}: AffixedFieldProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError: boolean = !!error;\n  const prefixList: PrefixOption[] = normalizePrefixes(prefixes);\n  const hasPrefix: boolean = prefixList.length > 0;\n  const hasFixedPrefix: boolean = prefixList.length === 1;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, disabled ?? false, hasError, hasPrefix);\n  // Stable id for the visually-hidden prefix announcement; only referenced when a\n  // fixed prefix is present, but generated unconditionally so the hook order is stable.\n  const prefixDescriptionId: string = `${useId()}-prefix`;\n\n  const containerClassName: string = cx(\n    withVendorCSSClassPrefix(bem('affixed-field', 'container')),\n    styles['inputContainer'],\n  );\n\n  const inputClassName: string = cx(withVendorCSSClassPrefix(bem('affixed-field', 'input')), styles['input']);\n\n  const renderPrefix = (): ReactElement | null => {\n    if (prefixList.length === 0) return null;\n\n    if (prefixList.length === 1) {\n      return (\n        <>\n          <span\n            className={cx(withVendorCSSClassPrefix(bem('affixed-field', 'prefix-span')), styles['prefixSpan'])}\n            aria-hidden=\"true\"\n          >\n            {prefixList[0].label}\n          </span>\n          {/* Assistive-tech-only mirror of the fixed prefix; wired to the input via aria-describedby. */}\n          <span id={prefixDescriptionId} className={styles['visuallyHidden']}>\n            {prefixList[0].label}\n          </span>\n        </>\n      );\n    }\n\n    const selectedValue: string = prefixValue ?? prefixList[0].value;\n    return (\n      <select\n        className={cx(withVendorCSSClassPrefix(bem('affixed-field', 'prefix-select')), styles['prefixSelect'])}\n        value={selectedValue}\n        disabled={disabled}\n        onChange={(e: ChangeEvent<HTMLSelectElement>): void => onPrefixChange?.(e.target.value)}\n        aria-label=\"Prefix\"\n      >\n        {prefixList.map((p: PrefixOption) => (\n          <option key={p.value} value={p.value}>\n            {p.label}\n          </option>\n        ))}\n      </select>\n    );\n  };\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('affixed-field')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={hasError}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={containerClassName}>\n        {renderPrefix()}\n        <input\n          className={inputClassName}\n          type={type}\n          disabled={disabled}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n          aria-describedby={\n            [rest['aria-describedby'], hasFixedPrefix ? prefixDescriptionId : undefined].filter(Boolean).join(' ') ||\n            undefined\n          }\n        />\n      </div>\n    </FormControl>\n  );\n};\n\nexport default AffixedField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA8CA,MAAM,qBAAqB,aAAkE;AAC3F,KAAI,OAAO,aAAa,SACtB,QAAO,SAAS,SAAS,IAAI,CAAC;EAAC,OAAO;EAAU,OAAO;EAAS,CAAC,GAAG,EAAE;AAExE,QAAO,YAAY,EAAE;;AAGvB,MAAMA,gBAAuC,EAC3C,OACA,OACA,UACA,WACA,UACA,YACA,UACA,aACA,gBACA,OAAO,QACP,QAAQ,EAAE,CACV,GAAG,WACoB;CACvB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,WAAoB,CAAC,CAAC;CAC5B,MAAMC,aAA6B,kBAAkB,SAAS;CAC9D,MAAMC,YAAqB,WAAW,SAAS;CAC/C,MAAMC,iBAA0B,WAAW,WAAW;CACtD,MAAMC,SAAiCC,oCAAU,OAAO,aAAa,YAAY,OAAO,UAAU,UAAU;CAG5G,MAAMC,sBAA8B,qBAAU,CAAC;CAE/C,MAAMC,0HACyB,iBAAiB,YAAY,CAAC,EAC3D,OAAO,kBACR;CAED,MAAMC,sHAAyD,iBAAiB,QAAQ,CAAC,EAAE,OAAO,SAAS;CAE3G,MAAM,qBAA0C;AAC9C,MAAI,WAAW,WAAW,EAAG,QAAO;AAEpC,MAAI,WAAW,WAAW,EACxB,QACE,qFACE,2CAAC;GACC,gHAA2C,iBAAiB,cAAc,CAAC,EAAE,OAAO,cAAc;GAClG,eAAY;aAEX,WAAW,GAAG;IACV,EAEP,2CAAC;GAAK,IAAI;GAAqB,WAAW,OAAO;aAC9C,WAAW,GAAG;IACV,IACN;EAIP,MAAMC,gBAAwB,eAAe,WAAW,GAAG;AAC3D,SACE,2CAAC;GACC,gHAA2C,iBAAiB,gBAAgB,CAAC,EAAE,OAAO,gBAAgB;GACtG,OAAO;GACG;GACV,WAAW,MAA4C,iBAAiB,EAAE,OAAO,MAAM;GACvF,cAAW;aAEV,WAAW,KAAK,MACf,2CAAC;IAAqB,OAAO,EAAE;cAC5B,EAAE;MADQ,EAAE,MAEN,CACT;IACK;;AAIb,QACE,4CAACC;EACQ;EACK;EACZ,gHAA2C,gBAAgB,CAAC,EAAE,UAAU;EACjE;aAEN,SACC,2CAACC;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,4CAAC;GAAI,WAAW;cACb,cAAc,EACf,2CAAC;IACC,WAAW;IACL;IACI;IACV,gBAAc;IACd,iBAAe;IACf,GAAI;IACJ,oBACE,CAAC,KAAK,qBAAqB,iBAAiB,sBAAsB,OAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,IACtG;KAEF;IACE;GACM;;AAIlB,2BAAe"}

package/dist/cjs/components/primitives/AffixedField/AffixedField.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AffixedField.styles.cjs","names":["borderColor: string","focusColor: string","borderRadius: string","inputContainer: string","inputBase: string","input: string","prefixBase: string","prefixSpan: string"],"sources":["../../../../../src/components/primitives/AffixedField/AffixedField.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/**\n * Creates styles for the AffixedField component. The container is a horizontal flex\n * row with a prefix element (span or select) joined to a shared-border input.\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  disabled: boolean,\n  hasError: boolean,\n  hasPrefix: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const borderColor: string = hasError ? theme.vars.colors.error.main : theme.vars.colors.border;\n    const focusColor: string = hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main;\n    const borderRadius: string = theme.vars.components?.Field?.root?.borderRadius ?? theme.vars.borderRadius.medium;\n\n    const inputContainer: string = css`\n      position: relative;\n      display: flex;\n      align-items: stretch;\n      width: 100%;\n    `;\n\n    const inputBase: string = css`\n      flex: 1;\n      min-width: 0;\n      padding-block: ${theme.vars.spacing.unit};\n      padding-inline: calc(${theme.vars.spacing.unit} * 1.5);\n      border: 1px solid ${borderColor};\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-family: ${theme.vars.typography.fontFamily};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};\n      outline: none;\n      transition:\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n\n      &::placeholder {\n        color: ${theme.vars.colors.text.secondary};\n        opacity: 0.7;\n      }\n\n      &:focus {\n        border-color: ${focusColor};\n        box-shadow: 0 0 0 2px ${focusColor}20;\n      }\n\n      &:disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${focusColor};\n      }\n    `;\n\n    const input: string = hasPrefix\n      ? css`\n          ${inputBase};\n          border-start-start-radius: 0;\n          border-end-start-radius: 0;\n          border-start-end-radius: ${borderRadius};\n          border-end-end-radius: ${borderRadius};\n          border-inline-start: none;\n        `\n      : css`\n          ${inputBase};\n          border-radius: ${borderRadius};\n        `;\n\n    const prefixBase: string = css`\n      display: flex;\n      align-items: center;\n      padding-inline: calc(${theme.vars.spacing.unit} * 1.5);\n      border: 1px solid ${borderColor};\n      border-start-start-radius: ${borderRadius};\n      border-end-start-radius: ${borderRadius};\n      background-color: ${theme.vars.colors.background.surface};\n      color: ${theme.vars.colors.text.primary};\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-family: ${theme.vars.typography.fontFamily};\n      white-space: nowrap;\n    `;\n\n    const prefixSpan: string = css`\n      ${prefixBase};\n      user-select: none;\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const prefixSelect: string = css`\n      ${prefixBase};\n      cursor: pointer;\n      appearance: auto;\n      padding-inline-end: calc(${theme.vars.spacing.unit} * 1.5);\n\n      &:disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${focusColor};\n        box-shadow: 0 0 0 2px ${focusColor}20;\n        z-index: 1;\n      }\n    `;\n\n    /**\n     * Visually hides content while keeping it discoverable by assistive tech. Used\n     * to expose the fixed prefix value to screen readers via `aria-describedby` while\n     * the sighted-user span stays `aria-hidden` (decorative).\n     */\n    const visuallyHidden: string = css`\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: 0;\n    `;\n\n    return {\n      input,\n      inputContainer,\n      prefixSelect,\n      prefixSpan,\n      visuallyHidden,\n    };\n  }, [theme, colorScheme, disabled, hasError, hasPrefix]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;AA0BA,MAAM,aACJ,OACA,aACA,UACA,UACA,uCAEc;CACZ,MAAMA,cAAsB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO;CACxF,MAAMC,aAAqB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ;CAC/F,MAAMC,eAAuB,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa;CAEzG,MAAMC,iBAAyB,iBAAG;;;;;;CAOlC,MAAMC,YAAoB,iBAAG;;;uBAGV,MAAM,KAAK,QAAQ,KAAK;6BAClB,MAAM,KAAK,QAAQ,KAAK;0BAC3B,YAAY;mBACnB,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;;iBAOjG,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;wBAK1B,WAAW;gCACH,WAAW;;;;;;;;;wBASnB,WAAW;;;CAI/B,MAAMC,QAAgB,YAClB,iBAAG;YACC,UAAU;;;qCAGe,aAAa;mCACf,aAAa;;YAGxC,iBAAG;YACC,UAAU;2BACK,aAAa;;CAGpC,MAAMC,aAAqB,iBAAG;;;6BAGL,MAAM,KAAK,QAAQ,KAAK;0BAC3B,YAAY;mCACH,aAAa;iCACf,aAAa;0BACpB,MAAM,KAAK,OAAO,WAAW,QAAQ;eAChD,MAAM,KAAK,OAAO,KAAK,QAAQ;mBAC3B,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;;CAIlD,MAAMC,aAAqB,iBAAG;QAC1B,WAAW;;eAEJ,MAAM,KAAK,OAAO,KAAK,UAAU;;AAuC5C,QAAO;EACL;EACA;EACA,cAvC2B,iBAAG;QAC5B,WAAW;;;iCAGc,MAAM,KAAK,QAAQ,KAAK;;;;;;;;;wBASjC,WAAW;gCACH,WAAW;;;;EA0BrC;EACA,gBAjB6B,iBAAG;;;;;;;;;;;EAkBjC;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAU,CAAC;AAEzD,kCAAe"}
+{"version":3,"file":"AffixedField.styles.cjs","names":["borderColor: string","focusColor: string","borderRadius: string","inputContainer: string","inputBase: string","input: string","prefixBase: string","prefixSpan: string"],"sources":["../../../../../src/components/primitives/AffixedField/AffixedField.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/**\n * Creates styles for the AffixedField component. The container is a horizontal flex\n * row with a prefix element (span or select) joined to a shared-border input.\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  disabled: boolean,\n  hasError: boolean,\n  hasPrefix: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const borderColor: string = hasError ? theme.vars.colors.error.main : theme.vars.colors.border;\n    const focusColor: string = hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main;\n    const borderRadius: string = theme.vars.components?.Field?.root?.borderRadius ?? theme.vars.borderRadius.medium;\n\n    const inputContainer: string = css`\n      position: relative;\n      display: flex;\n      align-items: stretch;\n      width: 100%;\n    `;\n\n    const inputBase: string = css`\n      flex: 1;\n      min-width: 0;\n      padding-block: ${theme.vars.spacing.unit};\n      padding-inline: calc(${theme.vars.spacing.unit} * 1.5);\n      border: 1px solid ${borderColor};\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-family: ${theme.vars.typography.fontFamily};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};\n      outline: none;\n      transition:\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n\n      &::placeholder {\n        color: ${theme.vars.colors.text.secondary};\n        opacity: 0.7;\n      }\n\n      &:focus {\n        border-color: ${focusColor};\n        box-shadow: 0 0 0 2px ${focusColor}20;\n      }\n\n      &:disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${focusColor};\n      }\n    `;\n\n    const input: string = hasPrefix\n      ? css`\n          ${inputBase};\n          border-start-start-radius: 0;\n          border-end-start-radius: 0;\n          border-start-end-radius: ${borderRadius};\n          border-end-end-radius: ${borderRadius};\n          border-inline-start: none;\n        `\n      : css`\n          ${inputBase};\n          border-radius: ${borderRadius};\n        `;\n\n    const prefixBase: string = css`\n      display: flex;\n      align-items: center;\n      padding-inline: calc(${theme.vars.spacing.unit} * 1.5);\n      border: 1px solid ${borderColor};\n      border-start-start-radius: ${borderRadius};\n      border-end-start-radius: ${borderRadius};\n      background-color: ${theme.vars.colors.background.surface};\n      color: ${theme.vars.colors.text.primary};\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-family: ${theme.vars.typography.fontFamily};\n      white-space: nowrap;\n    `;\n\n    const prefixSpan: string = css`\n      ${prefixBase};\n      user-select: none;\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const prefixSelect: string = css`\n      ${prefixBase};\n      cursor: pointer;\n      appearance: auto;\n      padding-inline-end: calc(${theme.vars.spacing.unit} * 1.5);\n\n      &:disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${focusColor};\n        box-shadow: 0 0 0 2px ${focusColor}20;\n        z-index: 1;\n      }\n    `;\n\n    /**\n     * Visually hides content while keeping it discoverable by assistive tech. Used\n     * to expose the fixed prefix value to screen readers via `aria-describedby` while\n     * the sighted-user span stays `aria-hidden` (decorative).\n     */\n    const visuallyHidden: string = css`\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: 0;\n    `;\n\n    return {\n      input,\n      inputContainer,\n      prefixSelect,\n      prefixSpan,\n      visuallyHidden,\n    };\n  }, [theme, colorScheme, disabled, hasError, hasPrefix]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,aACJ,OACA,aACA,UACA,UACA,uCAEc;CACZ,MAAMA,cAAsB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO;CACxF,MAAMC,aAAqB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ;CAC/F,MAAMC,eAAuB,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa;CAEzG,MAAMC,iBAAyB,iBAAG;;;;;;CAOlC,MAAMC,YAAoB,iBAAG;;;uBAGV,MAAM,KAAK,QAAQ,KAAK;6BAClB,MAAM,KAAK,QAAQ,KAAK;0BAC3B,YAAY;mBACnB,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;;iBAOjG,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;wBAK1B,WAAW;gCACH,WAAW;;;;;;;;;wBASnB,WAAW;;;CAI/B,MAAMC,QAAgB,YAClB,iBAAG;YACC,UAAU;;;qCAGe,aAAa;mCACf,aAAa;;YAGxC,iBAAG;YACC,UAAU;2BACK,aAAa;;CAGpC,MAAMC,aAAqB,iBAAG;;;6BAGL,MAAM,KAAK,QAAQ,KAAK;0BAC3B,YAAY;mCACH,aAAa;iCACf,aAAa;0BACpB,MAAM,KAAK,OAAO,WAAW,QAAQ;eAChD,MAAM,KAAK,OAAO,KAAK,QAAQ;mBAC3B,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;;CAIlD,MAAMC,aAAqB,iBAAG;QAC1B,WAAW;;eAEJ,MAAM,KAAK,OAAO,KAAK,UAAU;;AAuC5C,QAAO;EACL;EACA;EACA,cAvC2B,iBAAG;QAC5B,WAAW;;;iCAGc,MAAM,KAAK,QAAQ,KAAK;;;;;;;;;wBASjC,WAAW;gCACH,WAAW;;;;EA0BrC;EACA,gBAjB6B,iBAAG;;;;;;;;;;;EAkBjC;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAU,CAAC;AAEzD,kCAAe"}

package/dist/cjs/components/primitives/Alert/Alert.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.cjs","names":["CircleCheck","CircleAlert","TriangleAlert","Info","AlertVariantContext: Context<AlertVariant>","Alert: ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>>","useTheme","styles: ReturnType<typeof useStyles>","useStyles","IconComponent: FC<SVGProps<SVGSVGElement>>","AlertTitle: FC<AlertTitleProps>","Typography","AlertDescription: FC<AlertDescriptionProps>"],"sources":["../../../../../src/components/primitives/Alert/Alert.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {\n  Context,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  ForwardRefExoticComponent,\n  createContext,\n  useContext,\n  FC,\n  SVGProps,\n} from 'react';\nimport useStyles from './Alert.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport CircleAlert from '../Icons/CircleAlert';\nimport CircleCheck from '../Icons/CircleCheck';\nimport Info from '../Icons/Info';\nimport TriangleAlert from '../Icons/TriangleAlert';\nimport Typography from '../Typography/Typography';\n\nexport type AlertVariant = 'success' | 'error' | 'warning' | 'info';\n\nexport interface AlertProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Alert content\n   */\n  children?: ReactNode;\n  /**\n   * Whether to show the default icon for the variant\n   */\n  showIcon?: boolean;\n  /**\n   * The visual variant of the alert that determines color scheme and icon\n   */\n  variant?: AlertVariant;\n}\n\nexport interface AlertTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Title content\n   */\n  children?: ReactNode;\n}\n\nexport interface AlertDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Description content\n   */\n  children?: ReactNode;\n}\n\nconst getDefaultIcon = (variant: AlertVariant): FC<SVGProps<SVGSVGElement>> => {\n  switch (variant) {\n    case 'success':\n      return CircleCheck;\n    case 'error':\n      return CircleAlert;\n    case 'warning':\n      return TriangleAlert;\n    case 'info':\n      return Info;\n    default:\n      return Info;\n  }\n};\n\nconst AlertVariantContext: Context<AlertVariant> = createContext<AlertVariant>('info');\n\nexport const useAlertVariant = (): AlertVariant => useContext(AlertVariantContext);\n\n/**\n * Alert component that displays important information with different severity levels.\n *\n * @example\n * ```tsx\n * <Alert variant=\"success\" showIcon>\n *   <Alert.Title>Success! Your changes have been saved</Alert.Title>\n *   <Alert.Description>\n *     This is an alert with icon, title and description.\n *   </Alert.Description>\n * </Alert>\n * ```\n */\nconst Alert: ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  AlertProps\n>(({variant = 'info', showIcon = true, children, className, style, ...rest}: AlertProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, variant);\n  const IconComponent: FC<SVGProps<SVGSVGElement>> = getDefaultIcon(variant);\n\n  return (\n    <AlertVariantContext.Provider value={variant}>\n      <div\n        ref={ref}\n        role=\"alert\"\n        style={style}\n        className={cx(\n          withVendorCSSClassPrefix(bem('alert')),\n          styles['alert'],\n          styles['variant'],\n          withVendorCSSClassPrefix(bem('alert', null, variant)),\n          className,\n        )}\n        {...rest}\n      >\n        {showIcon && (\n          <div className={cx(withVendorCSSClassPrefix(bem('alert', 'icon')), styles['icon'])}>\n            <IconComponent />\n          </div>\n        )}\n        <div className={cx(withVendorCSSClassPrefix(bem('alert', 'content')), styles['content'])}>{children}</div>\n      </div>\n    </AlertVariantContext.Provider>\n  );\n});\n\n/**\n * Alert title component.\n */\nconst AlertTitle: FC<AlertTitleProps> = ({children, className, style, ...rest}: AlertTitleProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const variant: AlertVariant = useAlertVariant();\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, variant);\n\n  const {color, ...filteredRest} = rest;\n\n  return (\n    <Typography\n      component=\"h3\"\n      variant=\"h6\"\n      fontWeight={600}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('alert', 'title')), styles['title'], className)}\n      {...filteredRest}\n    >\n      {children}\n    </Typography>\n  );\n};\n\n/**\n * Alert description component.\n */\nconst AlertDescription: FC<AlertDescriptionProps> = ({children, className, style, ...rest}: AlertDescriptionProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const variant: AlertVariant = useAlertVariant();\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, variant);\n\n  const {color, ...filteredRest} = rest;\n\n  return (\n    <Typography\n      component=\"p\"\n      variant=\"body2\"\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('alert', 'description')), styles['description'], className)}\n      {...filteredRest}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nAlert.displayName = 'Alert';\nAlertTitle.displayName = 'Alert.Title';\nAlertDescription.displayName = 'Alert.Description';\n\n(Alert as any).Title = AlertTitle;\n(Alert as any).Description = AlertDescription;\n\nexport interface AlertComponent extends ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>> {\n  Description: typeof AlertDescription;\n  Title: typeof AlertTitle;\n}\n\nexport default Alert as AlertComponent;\nexport {Alert, AlertTitle, AlertDescription};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAwEA,MAAM,kBAAkB,YAAuD;AAC7E,SAAQ,SAAR;EACE,KAAK,UACH,QAAOA;EACT,KAAK,QACH,QAAOC;EACT,KAAK,UACH,QAAOC;EACT,KAAK,OACH,QAAOC;EACT,QACE,QAAOA;;;AAIb,MAAMC,+CAAyE,OAAO;AAEtF,MAAa,8CAAiD,oBAAoB;;;;;;;;;;;;;;AAelF,MAAMC,+BAGH,EAAC,UAAU,QAAQ,WAAW,MAAM,UAAU,WAAW,MAAO,GAAG,QAAmB,QAA6B;CACpH,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAuCC,6BAAU,OAAO,aAAa,QAAQ;CACnF,MAAMC,gBAA6C,eAAe,QAAQ;AAE1E,QACE,2CAAC,oBAAoB;EAAS,OAAO;YACnC,4CAAC;GACM;GACL,MAAK;GACE;GACP,gHAC+B,QAAQ,CAAC,EACtC,OAAO,UACP,OAAO,2FACsB,SAAS,MAAM,QAAQ,CAAC,EACrD,UACD;GACD,GAAI;cAEH,YACC,2CAAC;IAAI,gHAA2C,SAAS,OAAO,CAAC,EAAE,OAAO,QAAQ;cAChF,2CAAC,kBAAgB;KACb,EAER,2CAAC;IAAI,gHAA2C,SAAS,UAAU,CAAC,EAAE,OAAO,WAAW;IAAG;KAAe;IACtG;GACuB;EAEjC;;;;AAKF,MAAMC,cAAmC,EAAC,UAAU,WAAW,MAAO,GAAG,WAA2B;CAClG,MAAM,EAAC,OAAO,gBAA4CJ,0BAAU;CAEpE,MAAMC,SAAuCC,6BAAU,OAAO,aADhC,iBAAiB,CACoC;CAEnF,MAAM,EAAC,MAAO,GAAG,iBAAgB;AAEjC,QACE,2CAACG;EACC,WAAU;EACV,SAAQ;EACR,YAAY;EACL;EACP,gHAA2C,SAAS,QAAQ,CAAC,EAAE,OAAO,UAAU,UAAU;EAC1F,GAAI;EAEH;GACU;;;;;AAOjB,MAAMC,oBAA+C,EAAC,UAAU,WAAW,MAAO,GAAG,WAAiC;CACpH,MAAM,EAAC,OAAO,gBAA4CN,0BAAU;CAEpE,MAAMC,SAAuCC,6BAAU,OAAO,aADhC,iBAAiB,CACoC;CAEnF,MAAM,EAAC,MAAO,GAAG,iBAAgB;AAEjC,QACE,2CAACG;EACC,WAAU;EACV,SAAQ;EACD;EACP,gHAA2C,SAAS,cAAc,CAAC,EAAE,OAAO,gBAAgB,UAAU;EACtG,GAAI;EAEH;GACU;;AAIjB,MAAM,cAAc;AACpB,WAAW,cAAc;AACzB,iBAAiB,cAAc;AAE/B,AAAC,MAAc,QAAQ;AACvB,AAAC,MAAc,cAAc;AAO7B,oBAAe"}
+{"version":3,"file":"Alert.cjs","names":["CircleCheck","CircleAlert","TriangleAlert","Info","AlertVariantContext: Context<AlertVariant>","Alert: ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>>","useTheme","styles: ReturnType<typeof useStyles>","useStyles","IconComponent: FC<SVGProps<SVGSVGElement>>","AlertTitle: FC<AlertTitleProps>","Typography","AlertDescription: FC<AlertDescriptionProps>"],"sources":["../../../../../src/components/primitives/Alert/Alert.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {\n  Context,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  ForwardRefExoticComponent,\n  createContext,\n  useContext,\n  FC,\n  SVGProps,\n} from 'react';\nimport useStyles from './Alert.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport CircleAlert from '../Icons/CircleAlert';\nimport CircleCheck from '../Icons/CircleCheck';\nimport Info from '../Icons/Info';\nimport TriangleAlert from '../Icons/TriangleAlert';\nimport Typography from '../Typography/Typography';\n\nexport type AlertVariant = 'success' | 'error' | 'warning' | 'info';\n\nexport interface AlertProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Alert content\n   */\n  children?: ReactNode;\n  /**\n   * Whether to show the default icon for the variant\n   */\n  showIcon?: boolean;\n  /**\n   * The visual variant of the alert that determines color scheme and icon\n   */\n  variant?: AlertVariant;\n}\n\nexport interface AlertTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Title content\n   */\n  children?: ReactNode;\n}\n\nexport interface AlertDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Description content\n   */\n  children?: ReactNode;\n}\n\nconst getDefaultIcon = (variant: AlertVariant): FC<SVGProps<SVGSVGElement>> => {\n  switch (variant) {\n    case 'success':\n      return CircleCheck;\n    case 'error':\n      return CircleAlert;\n    case 'warning':\n      return TriangleAlert;\n    case 'info':\n      return Info;\n    default:\n      return Info;\n  }\n};\n\nconst AlertVariantContext: Context<AlertVariant> = createContext<AlertVariant>('info');\n\nexport const useAlertVariant = (): AlertVariant => useContext(AlertVariantContext);\n\n/**\n * Alert component that displays important information with different severity levels.\n *\n * @example\n * ```tsx\n * <Alert variant=\"success\" showIcon>\n *   <Alert.Title>Success! Your changes have been saved</Alert.Title>\n *   <Alert.Description>\n *     This is an alert with icon, title and description.\n *   </Alert.Description>\n * </Alert>\n * ```\n */\nconst Alert: ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  AlertProps\n>(({variant = 'info', showIcon = true, children, className, style, ...rest}: AlertProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, variant);\n  const IconComponent: FC<SVGProps<SVGSVGElement>> = getDefaultIcon(variant);\n\n  return (\n    <AlertVariantContext.Provider value={variant}>\n      <div\n        ref={ref}\n        role=\"alert\"\n        style={style}\n        className={cx(\n          withVendorCSSClassPrefix(bem('alert')),\n          styles['alert'],\n          styles['variant'],\n          withVendorCSSClassPrefix(bem('alert', null, variant)),\n          className,\n        )}\n        {...rest}\n      >\n        {showIcon && (\n          <div className={cx(withVendorCSSClassPrefix(bem('alert', 'icon')), styles['icon'])}>\n            <IconComponent />\n          </div>\n        )}\n        <div className={cx(withVendorCSSClassPrefix(bem('alert', 'content')), styles['content'])}>{children}</div>\n      </div>\n    </AlertVariantContext.Provider>\n  );\n});\n\n/**\n * Alert title component.\n */\nconst AlertTitle: FC<AlertTitleProps> = ({children, className, style, ...rest}: AlertTitleProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const variant: AlertVariant = useAlertVariant();\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, variant);\n\n  const {color, ...filteredRest} = rest;\n\n  return (\n    <Typography\n      component=\"h3\"\n      variant=\"h6\"\n      fontWeight={600}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('alert', 'title')), styles['title'], className)}\n      {...filteredRest}\n    >\n      {children}\n    </Typography>\n  );\n};\n\n/**\n * Alert description component.\n */\nconst AlertDescription: FC<AlertDescriptionProps> = ({children, className, style, ...rest}: AlertDescriptionProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const variant: AlertVariant = useAlertVariant();\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, variant);\n\n  const {color, ...filteredRest} = rest;\n\n  return (\n    <Typography\n      component=\"p\"\n      variant=\"body2\"\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('alert', 'description')), styles['description'], className)}\n      {...filteredRest}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nAlert.displayName = 'Alert';\nAlertTitle.displayName = 'Alert.Title';\nAlertDescription.displayName = 'Alert.Description';\n\n(Alert as any).Title = AlertTitle;\n(Alert as any).Description = AlertDescription;\n\nexport interface AlertComponent extends ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>> {\n  Description: typeof AlertDescription;\n  Title: typeof AlertTitle;\n}\n\nexport default Alert as AlertComponent;\nexport {Alert, AlertTitle, AlertDescription};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyDA,MAAM,kBAAkB,YAAuD;AAC7E,SAAQ,SAAR;EACE,KAAK,UACH,QAAOA;EACT,KAAK,QACH,QAAOC;EACT,KAAK,UACH,QAAOC;EACT,KAAK,OACH,QAAOC;EACT,QACE,QAAOA;;;AAIb,MAAMC,+CAAyE,OAAO;AAEtF,MAAa,8CAAiD,oBAAoB;;;;;;;;;;;;;;AAelF,MAAMC,+BAGH,EAAC,UAAU,QAAQ,WAAW,MAAM,UAAU,WAAW,MAAO,GAAG,QAAmB,QAA6B;CACpH,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAuCC,6BAAU,OAAO,aAAa,QAAQ;CACnF,MAAMC,gBAA6C,eAAe,QAAQ;AAE1E,QACE,2CAAC,oBAAoB;EAAS,OAAO;YACnC,4CAAC;GACM;GACL,MAAK;GACE;GACP,gHAC+B,QAAQ,CAAC,EACtC,OAAO,UACP,OAAO,2FACsB,SAAS,MAAM,QAAQ,CAAC,EACrD,UACD;GACD,GAAI;cAEH,YACC,2CAAC;IAAI,gHAA2C,SAAS,OAAO,CAAC,EAAE,OAAO,QAAQ;cAChF,2CAAC,kBAAgB;KACb,EAER,2CAAC;IAAI,gHAA2C,SAAS,UAAU,CAAC,EAAE,OAAO,WAAW;IAAG;KAAe;IACtG;GACuB;EAEjC;;;;AAKF,MAAMC,cAAmC,EAAC,UAAU,WAAW,MAAO,GAAG,WAA2B;CAClG,MAAM,EAAC,OAAO,gBAA4CJ,0BAAU;CAEpE,MAAMC,SAAuCC,6BAAU,OAAO,aADhC,iBAAiB,CACoC;CAEnF,MAAM,EAAC,MAAO,GAAG,iBAAgB;AAEjC,QACE,2CAACG;EACC,WAAU;EACV,SAAQ;EACR,YAAY;EACL;EACP,gHAA2C,SAAS,QAAQ,CAAC,EAAE,OAAO,UAAU,UAAU;EAC1F,GAAI;EAEH;GACU;;;;;AAOjB,MAAMC,oBAA+C,EAAC,UAAU,WAAW,MAAO,GAAG,WAAiC;CACpH,MAAM,EAAC,OAAO,gBAA4CN,0BAAU;CAEpE,MAAMC,SAAuCC,6BAAU,OAAO,aADhC,iBAAiB,CACoC;CAEnF,MAAM,EAAC,MAAO,GAAG,iBAAgB;AAEjC,QACE,2CAACG;EACC,WAAU;EACV,SAAQ;EACD;EACP,gHAA2C,SAAS,cAAc,CAAC,EAAE,OAAO,gBAAgB,UAAU;EACtG,GAAI;EAEH;GACU;;AAIjB,MAAM,cAAc;AACpB,WAAW,cAAc;AACzB,iBAAiB,cAAc;AAE/B,AAAC,MAAc,QAAQ;AACvB,AAAC,MAAc,cAAc;AAO7B,oBAAe"}

package/dist/cjs/components/primitives/Alert/Alert.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.styles.cjs","names":["baseAlert: string","variantStyles: Record<string, string>","iconStyles: string","contentStyles: string","titleStyles: string"],"sources":["../../../../../src/components/primitives/Alert/Alert.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type AlertVariant = 'success' | 'error' | 'warning' | 'info';\n\n/**\n * Creates styles for the Alert component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param variant - The alert variant\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, variant: AlertVariant): Record<string, string> =>\n  useMemo(() => {\n    const baseAlert: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 2);\n      border-radius: ${theme.vars.borderRadius.medium};\n      border: 1px solid;\n      font-family: ${theme.vars.typography.fontFamily};\n      display: flex;\n      gap: calc(${theme.vars.spacing.unit} * 1.5);\n      align-items: flex-start;\n    `;\n\n    const variantStyles: Record<string, string> = {\n      error: css`\n        background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, white);\n        border-color: ${theme.vars.colors.error.main};\n        color: ${theme.vars.colors.error.main};\n      `,\n      info: css`\n        background-color: color-mix(in srgb, ${theme.vars.colors.info.main} 20%, white);\n        border-color: ${theme.vars.colors.info.main};\n        color: ${theme.vars.colors.info.main};\n      `,\n      success: css`\n        background-color: color-mix(in srgb, ${theme.vars.colors.success.main} 20%, white);\n        border-color: ${theme.vars.colors.success.main};\n        color: ${theme.vars.colors.success.main};\n      `,\n      warning: css`\n        background-color: color-mix(in srgb, ${theme.vars.colors.warning.main} 20%, white);\n        border-color: ${theme.vars.colors.warning.main};\n        color: ${theme.vars.colors.warning.main};\n      `,\n    };\n\n    const iconStyles: string = css`\n      flex-shrink: 0;\n      margin-top: calc(${theme.vars.spacing.unit} * 0.25);\n      width: calc(${theme.vars.spacing.unit} * 2.5);\n      height: calc(${theme.vars.spacing.unit} * 2.5);\n      color: ${theme.vars.colors[variant]?.contrastText};\n    `;\n\n    const contentStyles: string = css`\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    const titleStyles: string = css`\n      margin: 0;\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-weight: 600;\n      line-height: 1.4;\n      color: ${theme.vars.colors[variant]?.contrastText};\n    `;\n\n    const descriptionStyles: string = css`\n      margin: 0;\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      line-height: 1.4;\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    return {\n      alert: baseAlert,\n      content: contentStyles,\n      description: descriptionStyles,\n      icon: iconStyles,\n      title: titleStyles,\n      variant: variantStyles[variant],\n    };\n  }, [theme, colorScheme, variant]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;AA+BA,MAAM,aAAa,OAAc,aAAqB,qCACtC;CACZ,MAAMA,YAAoB,iBAAG;sBACX,MAAM,KAAK,QAAQ,KAAK;uBACvB,MAAM,KAAK,aAAa,OAAO;;qBAEjC,MAAM,KAAK,WAAW,WAAW;;kBAEpC,MAAM,KAAK,QAAQ,KAAK;;;CAItC,MAAMC,gBAAwC;EAC5C,OAAO,iBAAG;+CAC+B,MAAM,KAAK,OAAO,MAAM,KAAK;wBACpD,MAAM,KAAK,OAAO,MAAM,KAAK;iBACpC,MAAM,KAAK,OAAO,MAAM,KAAK;;EAExC,MAAM,iBAAG;+CACgC,MAAM,KAAK,OAAO,KAAK,KAAK;wBACnD,MAAM,KAAK,OAAO,KAAK,KAAK;iBACnC,MAAM,KAAK,OAAO,KAAK,KAAK;;EAEvC,SAAS,iBAAG;+CAC6B,MAAM,KAAK,OAAO,QAAQ,KAAK;wBACtD,MAAM,KAAK,OAAO,QAAQ,KAAK;iBACtC,MAAM,KAAK,OAAO,QAAQ,KAAK;;EAE1C,SAAS,iBAAG;+CAC6B,MAAM,KAAK,OAAO,QAAQ,KAAK;wBACtD,MAAM,KAAK,OAAO,QAAQ,KAAK;iBACtC,MAAM,KAAK,OAAO,QAAQ,KAAK;;EAE3C;CAED,MAAMC,aAAqB,iBAAG;;yBAET,MAAM,KAAK,QAAQ,KAAK;oBAC7B,MAAM,KAAK,QAAQ,KAAK;qBACvB,MAAM,KAAK,QAAQ,KAAK;eAC9B,MAAM,KAAK,OAAO,UAAU,aAAa;;CAGpD,MAAMC,gBAAwB,iBAAG;;;;aAIxB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,cAAsB,iBAAG;;mBAEhB,MAAM,KAAK,WAAW,UAAU,GAAG;;;eAGvC,MAAM,KAAK,OAAO,UAAU,aAAa;;AAUpD,QAAO;EACL,OAAO;EACP,SAAS;EACT,aAVgC,iBAAG;;mBAEtB,MAAM,KAAK,WAAW,UAAU,GAAG;;eAEvC,MAAM,KAAK,OAAO,KAAK,UAAU;;EAO1C,MAAM;EACN,OAAO;EACP,SAAS,cAAc;EACxB;GACA;CAAC;CAAO;CAAa;CAAQ,CAAC;AAEnC,2BAAe"}
+{"version":3,"file":"Alert.styles.cjs","names":["baseAlert: string","variantStyles: Record<string, string>","iconStyles: string","contentStyles: string","titleStyles: string"],"sources":["../../../../../src/components/primitives/Alert/Alert.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type AlertVariant = 'success' | 'error' | 'warning' | 'info';\n\n/**\n * Creates styles for the Alert component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param variant - The alert variant\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, variant: AlertVariant): Record<string, string> =>\n  useMemo(() => {\n    const baseAlert: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 2);\n      border-radius: ${theme.vars.borderRadius.medium};\n      border: 1px solid;\n      font-family: ${theme.vars.typography.fontFamily};\n      display: flex;\n      gap: calc(${theme.vars.spacing.unit} * 1.5);\n      align-items: flex-start;\n    `;\n\n    const variantStyles: Record<string, string> = {\n      error: css`\n        background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, white);\n        border-color: ${theme.vars.colors.error.main};\n        color: ${theme.vars.colors.error.main};\n      `,\n      info: css`\n        background-color: color-mix(in srgb, ${theme.vars.colors.info.main} 20%, white);\n        border-color: ${theme.vars.colors.info.main};\n        color: ${theme.vars.colors.info.main};\n      `,\n      success: css`\n        background-color: color-mix(in srgb, ${theme.vars.colors.success.main} 20%, white);\n        border-color: ${theme.vars.colors.success.main};\n        color: ${theme.vars.colors.success.main};\n      `,\n      warning: css`\n        background-color: color-mix(in srgb, ${theme.vars.colors.warning.main} 20%, white);\n        border-color: ${theme.vars.colors.warning.main};\n        color: ${theme.vars.colors.warning.main};\n      `,\n    };\n\n    const iconStyles: string = css`\n      flex-shrink: 0;\n      margin-top: calc(${theme.vars.spacing.unit} * 0.25);\n      width: calc(${theme.vars.spacing.unit} * 2.5);\n      height: calc(${theme.vars.spacing.unit} * 2.5);\n      color: ${theme.vars.colors[variant]?.contrastText};\n    `;\n\n    const contentStyles: string = css`\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    const titleStyles: string = css`\n      margin: 0;\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-weight: 600;\n      line-height: 1.4;\n      color: ${theme.vars.colors[variant]?.contrastText};\n    `;\n\n    const descriptionStyles: string = css`\n      margin: 0;\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      line-height: 1.4;\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    return {\n      alert: baseAlert,\n      content: contentStyles,\n      description: descriptionStyles,\n      icon: iconStyles,\n      title: titleStyles,\n      variant: variantStyles[variant],\n    };\n  }, [theme, colorScheme, variant]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,aAAa,OAAc,aAAqB,qCACtC;CACZ,MAAMA,YAAoB,iBAAG;sBACX,MAAM,KAAK,QAAQ,KAAK;uBACvB,MAAM,KAAK,aAAa,OAAO;;qBAEjC,MAAM,KAAK,WAAW,WAAW;;kBAEpC,MAAM,KAAK,QAAQ,KAAK;;;CAItC,MAAMC,gBAAwC;EAC5C,OAAO,iBAAG;+CAC+B,MAAM,KAAK,OAAO,MAAM,KAAK;wBACpD,MAAM,KAAK,OAAO,MAAM,KAAK;iBACpC,MAAM,KAAK,OAAO,MAAM,KAAK;;EAExC,MAAM,iBAAG;+CACgC,MAAM,KAAK,OAAO,KAAK,KAAK;wBACnD,MAAM,KAAK,OAAO,KAAK,KAAK;iBACnC,MAAM,KAAK,OAAO,KAAK,KAAK;;EAEvC,SAAS,iBAAG;+CAC6B,MAAM,KAAK,OAAO,QAAQ,KAAK;wBACtD,MAAM,KAAK,OAAO,QAAQ,KAAK;iBACtC,MAAM,KAAK,OAAO,QAAQ,KAAK;;EAE1C,SAAS,iBAAG;+CAC6B,MAAM,KAAK,OAAO,QAAQ,KAAK;wBACtD,MAAM,KAAK,OAAO,QAAQ,KAAK;iBACtC,MAAM,KAAK,OAAO,QAAQ,KAAK;;EAE3C;CAED,MAAMC,aAAqB,iBAAG;;yBAET,MAAM,KAAK,QAAQ,KAAK;oBAC7B,MAAM,KAAK,QAAQ,KAAK;qBACvB,MAAM,KAAK,QAAQ,KAAK;eAC9B,MAAM,KAAK,OAAO,UAAU,aAAa;;CAGpD,MAAMC,gBAAwB,iBAAG;;;;aAIxB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,cAAsB,iBAAG;;mBAEhB,MAAM,KAAK,WAAW,UAAU,GAAG;;;eAGvC,MAAM,KAAK,OAAO,UAAU,aAAa;;AAUpD,QAAO;EACL,OAAO;EACP,SAAS;EACT,aAVgC,iBAAG;;mBAEtB,MAAM,KAAK,WAAW,UAAU,GAAG;;eAEvC,MAAM,KAAK,OAAO,KAAK,UAAU;;EAO1C,MAAM;EACN,OAAO;EACP,SAAS,cAAc;EACxB;GACA;CAAC;CAAO;CAAa;CAAQ,CAAC;AAEnC,2BAAe"}

package/dist/cjs/components/primitives/Avatar/Avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.cjs","names":["Avatar: FC<AvatarProps>","useTheme","resolvedIcon: ResolvedLogo | undefined","hasImage: boolean","hash: number","charCode: number","seed: number","hue1: number","hue2: number","saturation: number","styles: ReturnType<typeof useStyles>","useStyles","isDefaultState: boolean"],"sources":["../../../../../src/components/primitives/Avatar/Avatar.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem, resolveLogoUri, ResolvedLogo} from '@thunderid/browser';\nimport {FC, JSX, useMemo} from 'react';\nimport useStyles from './Avatar.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport interface AvatarProps {\n  /**\n   * Alternative text for the avatar image\n   */\n  alt?: string;\n  /**\n   * Background generation strategy\n   * - 'random': Generate background color based on ASCII values of the name\n   * - 'none': Use default theme background\n   * - string: Use custom background color\n   * @default 'random'\n   */\n  background?: 'random' | 'none' | string;\n  /**\n   * Optional className for the avatar\n   */\n  className?: string;\n  /**\n   * The avatar image. Accepts a plain URL, or any `resolveLogoUri`-compatible\n   * spec (`emoji:<glyph>`, or `avatar:shape=...,variant=...,content=...,colors=...,bg=...`).\n   */\n  imageUrl?: string;\n  /**\n   * Loading state of the avatar\n   */\n  isLoading?: boolean;\n  /**\n   * The name to use for generating initials when no image is provided\n   */\n  name?: string;\n  /**\n   * The size of the avatar in pixels\n   */\n  size?: number;\n  /**\n   * The variant of the avatar shape\n   * @default 'circular'\n   */\n  variant?: 'circular' | 'square';\n}\n\nexport const Avatar: FC<AvatarProps> = ({\n  alt = 'User avatar',\n  background = 'random',\n  className = '',\n  imageUrl,\n  name,\n  size = 64,\n  variant = 'circular',\n  isLoading = false,\n}: AvatarProps): JSX.Element => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n\n  const resolvedIcon: ResolvedLogo | undefined = useMemo(\n    () => (imageUrl ? resolveLogoUri(imageUrl, name ?? alt) : undefined),\n    [imageUrl, name, alt],\n  );\n\n  const hasImage: boolean = resolvedIcon?.kind !== 'emoji' && Boolean(resolvedIcon?.imgSrc);\n\n  const generateBackgroundColor = (inputString: string): string => {\n    const hash: number = inputString.split('').reduce((acc: number, char: string) => {\n      const charCode: number = char.charCodeAt(0);\n\n      return ((acc << 5) - acc + charCode) & 0xffffffff;\n    }, 0);\n\n    const seed: number = Math.abs(hash);\n\n    const generateColor = (offset: number): string => {\n      const hue1: number = (seed + offset) % 360;\n      const hue2: number = (hue1 + 60 + (seed % 120)) % 360;\n\n      const saturation: number = 70 + (seed % 20);\n      const lightness1: number = 55 + (seed % 15);\n      const lightness2: number = 60 + ((seed + offset) % 15);\n\n      return `hsl(${hue1}, ${saturation}%, ${lightness1}%), hsl(${hue2}, ${saturation}%, ${lightness2}%)`;\n    };\n\n    const angle: number = 45 + (seed % 91);\n\n    const colors: string = generateColor(seed);\n    return `linear-gradient(${angle}deg, ${colors})`;\n  };\n\n  const backgroundColor: string | undefined = useMemo(() => {\n    if (!name || hasImage) {\n      return undefined;\n    }\n\n    if (background === 'random') {\n      return generateBackgroundColor(name);\n    }\n\n    if (background === 'none') {\n      return undefined;\n    }\n\n    return background;\n  }, [background, name, hasImage]);\n\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, size, variant, backgroundColor);\n\n  // Determine if we're in the default state (no image, no name, not loading)\n  const isDefaultState: boolean = !imageUrl && !name && !isLoading;\n\n  const getInitials = (fullName: string): string =>\n    fullName\n      .split(' ')\n      .map((part: string) => part[0])\n      .slice(0, 2)\n      .join('')\n      .toUpperCase();\n\n  const renderContent = (): JSX.Element | string => {\n    if (resolvedIcon?.kind === 'emoji') {\n      return (\n        <span role=\"img\" aria-label={alt}>\n          {resolvedIcon.glyph}\n        </span>\n      );\n    }\n\n    if (hasImage) {\n      return (\n        <img\n          src={resolvedIcon?.imgSrc}\n          alt={alt}\n          className={cx(withVendorCSSClassPrefix(bem('avatar', 'image')), styles['image'])}\n        />\n      );\n    }\n\n    if (name) {\n      return getInitials(name);\n    }\n\n    if (isLoading) {\n      return <div className={cx(withVendorCSSClassPrefix(bem('avatar', 'skeleton')), styles['skeleton'])} />;\n    }\n\n    // Default user icon\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 640 640\"\n        className={cx(withVendorCSSClassPrefix(bem('avatar', 'icon')), styles['icon'])}\n      >\n        <path d=\"M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z\" />\n      </svg>\n    );\n  };\n\n  return (\n    <div\n      className={cx(\n        withVendorCSSClassPrefix(bem('avatar')),\n        styles['avatar'],\n        styles['variant'],\n        withVendorCSSClassPrefix(bem('avatar', null, variant)),\n        isDefaultState && withVendorCSSClassPrefix(bem('avatar', 'default')),\n        className,\n      )}\n    >\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;;;AAiEA,MAAaA,UAA2B,EACtC,MAAM,eACN,aAAa,UACb,YAAY,IACZ,UACA,MACA,OAAO,IACP,UAAU,YACV,YAAY,YACkB;CAC9B,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CAEpE,MAAMC,wCACG,mDAA0B,UAAU,QAAQ,IAAI,GAAG,QAC1D;EAAC;EAAU;EAAM;EAAI,CACtB;CAED,MAAMC,WAAoB,cAAc,SAAS,WAAW,QAAQ,cAAc,OAAO;CAEzF,MAAM,2BAA2B,gBAAgC;EAC/D,MAAMC,OAAe,YAAY,MAAM,GAAG,CAAC,QAAQ,KAAa,SAAiB;GAC/E,MAAMC,WAAmB,KAAK,WAAW,EAAE;AAE3C,WAAS,OAAO,KAAK,MAAM,WAAY;KACtC,EAAE;EAEL,MAAMC,OAAe,KAAK,IAAI,KAAK;EAEnC,MAAM,iBAAiB,WAA2B;GAChD,MAAMC,QAAgB,OAAO,UAAU;GACvC,MAAMC,QAAgB,OAAO,KAAM,OAAO,OAAQ;GAElD,MAAMC,aAAqB,KAAM,OAAO;AAIxC,UAAO,OAAO,KAAK,IAAI,WAAW,KAHP,KAAM,OAAO,GAGU,UAAU,KAAK,IAAI,WAAW,KAFrD,MAAO,OAAO,UAAU,GAE6C;;AAMlG,SAAO,mBAHe,KAAM,OAAO,GAGH,OADT,cAAc,KAAK,CACI;;CAmBhD,MAAMC,SAAuCC,8BAAU,OAAO,aAAa,MAAM,kCAhBvB;AACxD,MAAI,CAAC,QAAQ,SACX;AAGF,MAAI,eAAe,SACjB,QAAO,wBAAwB,KAAK;AAGtC,MAAI,eAAe,OACjB;AAGF,SAAO;IACN;EAAC;EAAY;EAAM;EAAS,CAAC,CAE0E;CAG1G,MAAMC,iBAA0B,CAAC,YAAY,CAAC,QAAQ,CAAC;CAEvD,MAAM,eAAe,aACnB,SACG,MAAM,IAAI,CACV,KAAK,SAAiB,KAAK,GAAG,CAC9B,MAAM,GAAG,EAAE,CACX,KAAK,GAAG,CACR,aAAa;CAElB,MAAM,sBAA4C;AAChD,MAAI,cAAc,SAAS,QACzB,QACE,2CAAC;GAAK,MAAK;GAAM,cAAY;aAC1B,aAAa;IACT;AAIX,MAAI,SACF,QACE,2CAAC;GACC,KAAK,cAAc;GACd;GACL,gHAA2C,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;IAChF;AAIN,MAAI,KACF,QAAO,YAAY,KAAK;AAG1B,MAAI,UACF,QAAO,2CAAC,SAAI,gHAA2C,UAAU,WAAW,CAAC,EAAE,OAAO,YAAY,GAAI;AAIxG,SACE,2CAAC;GACC,OAAM;GACN,SAAQ;GACR,gHAA2C,UAAU,OAAO,CAAC,EAAE,OAAO,QAAQ;aAE9E,2CAAC,UAAK,GAAE,ygBAAygB;IAC7gB;;AAIV,QACE,2CAAC;EACC,gHAC+B,SAAS,CAAC,EACvC,OAAO,WACP,OAAO,2FACsB,UAAU,MAAM,QAAQ,CAAC,EACtD,iGAA+C,UAAU,UAAU,CAAC,EACpE,UACD;YAEA,eAAe;GACZ"}
+{"version":3,"file":"Avatar.cjs","names":["Avatar: FC<AvatarProps>","useTheme","resolvedIcon: ResolvedLogo | undefined","hasImage: boolean","hash: number","charCode: number","seed: number","hue1: number","hue2: number","saturation: number","styles: ReturnType<typeof useStyles>","useStyles","isDefaultState: boolean"],"sources":["../../../../../src/components/primitives/Avatar/Avatar.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem, resolveLogoUri, ResolvedLogo} from '@thunderid/browser';\nimport {FC, JSX, useMemo} from 'react';\nimport useStyles from './Avatar.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport interface AvatarProps {\n  /**\n   * Alternative text for the avatar image\n   */\n  alt?: string;\n  /**\n   * Background generation strategy\n   * - 'random': Generate background color based on ASCII values of the name\n   * - 'none': Use default theme background\n   * - string: Use custom background color\n   * @default 'random'\n   */\n  background?: 'random' | 'none' | string;\n  /**\n   * Optional className for the avatar\n   */\n  className?: string;\n  /**\n   * The avatar image. Accepts a plain URL, or any `resolveLogoUri`-compatible\n   * spec (`emoji:<glyph>`, or `avatar:shape=...,variant=...,content=...,colors=...,bg=...`).\n   */\n  imageUrl?: string;\n  /**\n   * Loading state of the avatar\n   */\n  isLoading?: boolean;\n  /**\n   * The name to use for generating initials when no image is provided\n   */\n  name?: string;\n  /**\n   * The size of the avatar in pixels\n   */\n  size?: number;\n  /**\n   * The variant of the avatar shape\n   * @default 'circular'\n   */\n  variant?: 'circular' | 'square';\n}\n\nexport const Avatar: FC<AvatarProps> = ({\n  alt = 'User avatar',\n  background = 'random',\n  className = '',\n  imageUrl,\n  name,\n  size = 64,\n  variant = 'circular',\n  isLoading = false,\n}: AvatarProps): JSX.Element => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n\n  const resolvedIcon: ResolvedLogo | undefined = useMemo(\n    () => (imageUrl ? resolveLogoUri(imageUrl, name ?? alt) : undefined),\n    [imageUrl, name, alt],\n  );\n\n  const hasImage: boolean = resolvedIcon?.kind !== 'emoji' && Boolean(resolvedIcon?.imgSrc);\n\n  const generateBackgroundColor = (inputString: string): string => {\n    const hash: number = inputString.split('').reduce((acc: number, char: string) => {\n      const charCode: number = char.charCodeAt(0);\n\n      return ((acc << 5) - acc + charCode) & 0xffffffff;\n    }, 0);\n\n    const seed: number = Math.abs(hash);\n\n    const generateColor = (offset: number): string => {\n      const hue1: number = (seed + offset) % 360;\n      const hue2: number = (hue1 + 60 + (seed % 120)) % 360;\n\n      const saturation: number = 70 + (seed % 20);\n      const lightness1: number = 55 + (seed % 15);\n      const lightness2: number = 60 + ((seed + offset) % 15);\n\n      return `hsl(${hue1}, ${saturation}%, ${lightness1}%), hsl(${hue2}, ${saturation}%, ${lightness2}%)`;\n    };\n\n    const angle: number = 45 + (seed % 91);\n\n    const colors: string = generateColor(seed);\n    return `linear-gradient(${angle}deg, ${colors})`;\n  };\n\n  const backgroundColor: string | undefined = useMemo(() => {\n    if (!name || hasImage) {\n      return undefined;\n    }\n\n    if (background === 'random') {\n      return generateBackgroundColor(name);\n    }\n\n    if (background === 'none') {\n      return undefined;\n    }\n\n    return background;\n  }, [background, name, hasImage]);\n\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, size, variant, backgroundColor);\n\n  // Determine if we're in the default state (no image, no name, not loading)\n  const isDefaultState: boolean = !imageUrl && !name && !isLoading;\n\n  const getInitials = (fullName: string): string =>\n    fullName\n      .split(' ')\n      .map((part: string) => part[0])\n      .slice(0, 2)\n      .join('')\n      .toUpperCase();\n\n  const renderContent = (): JSX.Element | string => {\n    if (resolvedIcon?.kind === 'emoji') {\n      return (\n        <span role=\"img\" aria-label={alt}>\n          {resolvedIcon.glyph}\n        </span>\n      );\n    }\n\n    if (hasImage) {\n      return (\n        <img\n          src={resolvedIcon?.imgSrc}\n          alt={alt}\n          className={cx(withVendorCSSClassPrefix(bem('avatar', 'image')), styles['image'])}\n        />\n      );\n    }\n\n    if (name) {\n      return getInitials(name);\n    }\n\n    if (isLoading) {\n      return <div className={cx(withVendorCSSClassPrefix(bem('avatar', 'skeleton')), styles['skeleton'])} />;\n    }\n\n    // Default user icon\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 640 640\"\n        className={cx(withVendorCSSClassPrefix(bem('avatar', 'icon')), styles['icon'])}\n      >\n        <path d=\"M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z\" />\n      </svg>\n    );\n  };\n\n  return (\n    <div\n      className={cx(\n        withVendorCSSClassPrefix(bem('avatar')),\n        styles['avatar'],\n        styles['variant'],\n        withVendorCSSClassPrefix(bem('avatar', null, variant)),\n        isDefaultState && withVendorCSSClassPrefix(bem('avatar', 'default')),\n        className,\n      )}\n    >\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;;;AAkDA,MAAaA,UAA2B,EACtC,MAAM,eACN,aAAa,UACb,YAAY,IACZ,UACA,MACA,OAAO,IACP,UAAU,YACV,YAAY,YACkB;CAC9B,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CAEpE,MAAMC,wCACG,mDAA0B,UAAU,QAAQ,IAAI,GAAG,QAC1D;EAAC;EAAU;EAAM;EAAI,CACtB;CAED,MAAMC,WAAoB,cAAc,SAAS,WAAW,QAAQ,cAAc,OAAO;CAEzF,MAAM,2BAA2B,gBAAgC;EAC/D,MAAMC,OAAe,YAAY,MAAM,GAAG,CAAC,QAAQ,KAAa,SAAiB;GAC/E,MAAMC,WAAmB,KAAK,WAAW,EAAE;AAE3C,WAAS,OAAO,KAAK,MAAM,WAAY;KACtC,EAAE;EAEL,MAAMC,OAAe,KAAK,IAAI,KAAK;EAEnC,MAAM,iBAAiB,WAA2B;GAChD,MAAMC,QAAgB,OAAO,UAAU;GACvC,MAAMC,QAAgB,OAAO,KAAM,OAAO,OAAQ;GAElD,MAAMC,aAAqB,KAAM,OAAO;AAIxC,UAAO,OAAO,KAAK,IAAI,WAAW,KAHP,KAAM,OAAO,GAGU,UAAU,KAAK,IAAI,WAAW,KAFrD,MAAO,OAAO,UAAU,GAE6C;;AAMlG,SAAO,mBAHe,KAAM,OAAO,GAGH,OADT,cAAc,KAAK,CACI;;CAmBhD,MAAMC,SAAuCC,8BAAU,OAAO,aAAa,MAAM,kCAhBvB;AACxD,MAAI,CAAC,QAAQ,SACX;AAGF,MAAI,eAAe,SACjB,QAAO,wBAAwB,KAAK;AAGtC,MAAI,eAAe,OACjB;AAGF,SAAO;IACN;EAAC;EAAY;EAAM;EAAS,CAAC,CAE0E;CAG1G,MAAMC,iBAA0B,CAAC,YAAY,CAAC,QAAQ,CAAC;CAEvD,MAAM,eAAe,aACnB,SACG,MAAM,IAAI,CACV,KAAK,SAAiB,KAAK,GAAG,CAC9B,MAAM,GAAG,EAAE,CACX,KAAK,GAAG,CACR,aAAa;CAElB,MAAM,sBAA4C;AAChD,MAAI,cAAc,SAAS,QACzB,QACE,2CAAC;GAAK,MAAK;GAAM,cAAY;aAC1B,aAAa;IACT;AAIX,MAAI,SACF,QACE,2CAAC;GACC,KAAK,cAAc;GACd;GACL,gHAA2C,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;IAChF;AAIN,MAAI,KACF,QAAO,YAAY,KAAK;AAG1B,MAAI,UACF,QAAO,2CAAC,SAAI,gHAA2C,UAAU,WAAW,CAAC,EAAE,OAAO,YAAY,GAAI;AAIxG,SACE,2CAAC;GACC,OAAM;GACN,SAAQ;GACR,gHAA2C,UAAU,OAAO,CAAC,EAAE,OAAO,QAAQ;aAE9E,2CAAC,UAAK,GAAE,ygBAAygB;IAC7gB;;AAIV,QACE,2CAAC;EACC,gHAC+B,SAAS,CAAC,EACvC,OAAO,WACP,OAAO,2FACsB,UAAU,MAAM,QAAQ,CAAC,EACtD,iGAA+C,UAAU,UAAU,CAAC,EACpE,UACD;YAEA,eAAe;GACZ"}

package/dist/cjs/components/primitives/Avatar/Avatar.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.styles.cjs","names":["baseAvatar: string","variantStyles: Record<string, string>","imageStyles: string","skeletonStyles: string"],"sources":["../../../../../src/components/primitives/Avatar/Avatar.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type AvatarVariant = 'circular' | 'square';\n\n/**\n * Creates styles for the Avatar component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param size - The size of the avatar in pixels\n * @param variant - The avatar variant\n * @param backgroundColor - The background color for the avatar\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  size: number,\n  variant: AvatarVariant,\n  backgroundColor?: string,\n): Record<string, string> =>\n  useMemo(() => {\n    const baseAvatar: string = css`\n      align-items: center;\n      background: ${backgroundColor || theme.vars.colors.background.surface};\n      border: ${backgroundColor ? 'none' : `1px solid ${theme.vars.colors.border}`};\n      border-radius: ${variant === 'circular' ? '50%' : '8px'};\n      color: ${backgroundColor ? '#ffffff' : theme.vars.colors.text.primary};\n      display: flex;\n      font-size: ${size * 0.4}px;\n      font-family: ${theme.vars.typography.fontFamily};\n      font-weight: 600;\n      height: ${size}px;\n      justify-content: center;\n      overflow: hidden;\n      text-shadow: ${backgroundColor ? '0 1px 2px rgba(0, 0, 0, 0.1)' : 'none'};\n      width: ${size}px;\n    `;\n\n    const variantStyles: Record<string, string> = {\n      circular: css`\n        border-radius: 50%;\n      `,\n      square: css`\n        border-radius: 8px;\n      `,\n    };\n\n    const imageStyles: string = css`\n      height: 100%;\n      object-fit: cover;\n      width: 100%;\n    `;\n\n    const skeletonStyles: string = css`\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n      background-size: 200% 100%;\n      animation: skeleton-loading 1.5s infinite;\n      border-radius: ${variant === 'circular' ? '50%' : '8px'};\n\n      @keyframes skeleton-loading {\n        0% {\n          background-position: -200% 0;\n        }\n        100% {\n          background-position: 200% 0;\n        }\n      }\n    `;\n\n    const iconStyles: string = css`\n      width: 60%;\n      height: 60%;\n      fill: ${backgroundColor ? '#ffffff' : theme.vars.colors.text.secondary};\n      opacity: 0.8;\n    `;\n\n    return {\n      avatar: baseAvatar,\n      icon: iconStyles,\n      image: imageStyles,\n      skeleton: skeletonStyles,\n      variant: variantStyles[variant],\n    };\n  }, [theme, colorScheme, size, variant, backgroundColor]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;AAiCA,MAAM,aACJ,OACA,aACA,MACA,SACA,6CAEc;CACZ,MAAMA,aAAqB,iBAAG;;oBAEd,mBAAmB,MAAM,KAAK,OAAO,WAAW,QAAQ;gBAC5D,kBAAkB,SAAS,aAAa,MAAM,KAAK,OAAO,SAAS;uBAC5D,YAAY,aAAa,QAAQ,MAAM;eAC/C,kBAAkB,YAAY,MAAM,KAAK,OAAO,KAAK,QAAQ;;mBAEzD,OAAO,GAAI;qBACT,MAAM,KAAK,WAAW,WAAW;;gBAEtC,KAAK;;;qBAGA,kBAAkB,iCAAiC,OAAO;eAChE,KAAK;;CAGhB,MAAMC,gBAAwC;EAC5C,UAAU,iBAAG;;;EAGb,QAAQ,iBAAG;;;EAGZ;CAED,MAAMC,cAAsB,iBAAG;;;;;CAM/B,MAAMC,iBAAyB,iBAAG;;;;;;uBAMf,YAAY,aAAa,QAAQ,MAAM;;;;;;;;;;;AAmB1D,QAAO;EACL,QAAQ;EACR,MATyB,iBAAG;;;cAGpB,kBAAkB,YAAY,MAAM,KAAK,OAAO,KAAK,UAAU;;;EAOvE,OAAO;EACP,UAAU;EACV,SAAS,cAAc;EACxB;GACA;CAAC;CAAO;CAAa;CAAM;CAAS;CAAgB,CAAC;AAE1D,4BAAe"}
+{"version":3,"file":"Avatar.styles.cjs","names":["baseAvatar: string","variantStyles: Record<string, string>","imageStyles: string","skeletonStyles: string"],"sources":["../../../../../src/components/primitives/Avatar/Avatar.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type AvatarVariant = 'circular' | 'square';\n\n/**\n * Creates styles for the Avatar component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param size - The size of the avatar in pixels\n * @param variant - The avatar variant\n * @param backgroundColor - The background color for the avatar\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  size: number,\n  variant: AvatarVariant,\n  backgroundColor?: string,\n): Record<string, string> =>\n  useMemo(() => {\n    const baseAvatar: string = css`\n      align-items: center;\n      background: ${backgroundColor || theme.vars.colors.background.surface};\n      border: ${backgroundColor ? 'none' : `1px solid ${theme.vars.colors.border}`};\n      border-radius: ${variant === 'circular' ? '50%' : '8px'};\n      color: ${backgroundColor ? '#ffffff' : theme.vars.colors.text.primary};\n      display: flex;\n      font-size: ${size * 0.4}px;\n      font-family: ${theme.vars.typography.fontFamily};\n      font-weight: 600;\n      height: ${size}px;\n      justify-content: center;\n      overflow: hidden;\n      text-shadow: ${backgroundColor ? '0 1px 2px rgba(0, 0, 0, 0.1)' : 'none'};\n      width: ${size}px;\n    `;\n\n    const variantStyles: Record<string, string> = {\n      circular: css`\n        border-radius: 50%;\n      `,\n      square: css`\n        border-radius: 8px;\n      `,\n    };\n\n    const imageStyles: string = css`\n      height: 100%;\n      object-fit: cover;\n      width: 100%;\n    `;\n\n    const skeletonStyles: string = css`\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n      background-size: 200% 100%;\n      animation: skeleton-loading 1.5s infinite;\n      border-radius: ${variant === 'circular' ? '50%' : '8px'};\n\n      @keyframes skeleton-loading {\n        0% {\n          background-position: -200% 0;\n        }\n        100% {\n          background-position: 200% 0;\n        }\n      }\n    `;\n\n    const iconStyles: string = css`\n      width: 60%;\n      height: 60%;\n      fill: ${backgroundColor ? '#ffffff' : theme.vars.colors.text.secondary};\n      opacity: 0.8;\n    `;\n\n    return {\n      avatar: baseAvatar,\n      icon: iconStyles,\n      image: imageStyles,\n      skeleton: skeletonStyles,\n      variant: variantStyles[variant],\n    };\n  }, [theme, colorScheme, size, variant, backgroundColor]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,aACJ,OACA,aACA,MACA,SACA,6CAEc;CACZ,MAAMA,aAAqB,iBAAG;;oBAEd,mBAAmB,MAAM,KAAK,OAAO,WAAW,QAAQ;gBAC5D,kBAAkB,SAAS,aAAa,MAAM,KAAK,OAAO,SAAS;uBAC5D,YAAY,aAAa,QAAQ,MAAM;eAC/C,kBAAkB,YAAY,MAAM,KAAK,OAAO,KAAK,QAAQ;;mBAEzD,OAAO,GAAI;qBACT,MAAM,KAAK,WAAW,WAAW;;gBAEtC,KAAK;;;qBAGA,kBAAkB,iCAAiC,OAAO;eAChE,KAAK;;CAGhB,MAAMC,gBAAwC;EAC5C,UAAU,iBAAG;;;EAGb,QAAQ,iBAAG;;;EAGZ;CAED,MAAMC,cAAsB,iBAAG;;;;;CAM/B,MAAMC,iBAAyB,iBAAG;;;;;;uBAMf,YAAY,aAAa,QAAQ,MAAM;;;;;;;;;;;AAmB1D,QAAO;EACL,QAAQ;EACR,MATyB,iBAAG;;;cAGpB,kBAAkB,YAAY,MAAM,KAAK,OAAO,KAAK,UAAU;;;EAOvE,OAAO;EACP,UAAU;EACV,SAAS,cAAc;EACxB;GACA;CAAC;CAAO;CAAa;CAAM;CAAS;CAAgB,CAAC;AAE1D,4BAAe"}

package/dist/cjs/components/primitives/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","names":["Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>","useTheme","styles: Record<string, string | null>","useStyles","isIconVariant: boolean","spinnerWidth: string","Spinner"],"sources":["../../../../../src/components/primitives/Button/Button.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ButtonHTMLAttributes, forwardRef, ReactNode, ForwardRefExoticComponent, RefAttributes, Ref} from 'react';\nimport useStyles from './Button.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport Spinner, {SpinnerSize} from '../Spinner/Spinner';\n\nexport type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;\nexport type ButtonVariant = 'solid' | 'outline' | 'text' | 'icon';\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {\n  /**\n   * The button color that determines the color scheme\n   */\n  color?: ButtonColor;\n  /**\n   * Icon to display after the button text\n   */\n  endIcon?: ReactNode;\n  /**\n   * Whether the button should take the full width of its container\n   */\n  fullWidth?: boolean;\n  /**\n   * Whether the button is in a loading state\n   */\n  loading?: boolean;\n  /**\n   * The shape of the button: square or round\n   */\n  shape?: 'square' | 'round';\n  /**\n   * The size of the button\n   */\n  size?: ButtonSize;\n  /**\n   * Icon to display before the button text\n   */\n  startIcon?: ReactNode;\n  /**\n   * The button variant that determines the visual style\n   */\n  variant?: ButtonVariant;\n}\n\nconst getSpinnerWidth = (sizeVal: ButtonSize, spacingUnit: string): string => {\n  if (sizeVal === 'small') {\n    return `calc(${spacingUnit} * 1.5)`;\n  }\n  if (sizeVal === 'medium') {\n    return `calc(${spacingUnit} * 2)`;\n  }\n  return `calc(${spacingUnit} * 2.5)`;\n};\n\n/**\n * Button component with multiple variants and types.\n *\n * @example\n * ```tsx\n * // Primary solid button\n * <Button color=\"primary\" variant=\"solid\">\n *   Click me\n * </Button>\n *\n * // Secondary outline button\n * <Button color=\"secondary\" variant=\"outline\" size=\"large\">\n *   Cancel\n * </Button>\n *\n * // Text button with loading state\n * <Button color=\"tertiary\" variant=\"text\" loading>\n *   Loading...\n * </Button>\n *\n * // Button with icons\n * <Button\n *   color=\"primary\"\n *   startIcon={<Icon />}\n *   endIcon={<Arrow />}\n * >\n *   Save and Continue\n * </Button>\n * ```\n */\nconst Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<\n  HTMLButtonElement,\n  ButtonProps\n>(\n  (\n    {\n      color = 'primary',\n      variant = 'solid',\n      size = 'medium',\n      fullWidth = false,\n      loading = false,\n      startIcon,\n      endIcon,\n      children,\n      className,\n      disabled,\n      style,\n      shape = 'square',\n      ...rest\n    }: ButtonProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n    const styles: Record<string, string | null> = useStyles(\n      theme,\n      colorScheme,\n      color,\n      variant,\n      size,\n      fullWidth,\n      disabled || false,\n      loading,\n      shape,\n    );\n\n    const isIconVariant: boolean = variant === 'icon';\n\n    const spinnerWidth: string = getSpinnerWidth(size, theme.vars.spacing.unit);\n\n    return (\n      <button\n        ref={ref}\n        style={style}\n        className={cx(\n          withVendorCSSClassPrefix(bem('button')),\n          withVendorCSSClassPrefix(bem('button', variant)),\n          withVendorCSSClassPrefix(bem('button', color)),\n          withVendorCSSClassPrefix(bem('button', size)),\n          withVendorCSSClassPrefix(bem('button', shape)),\n          fullWidth ? withVendorCSSClassPrefix(bem('button', 'fullWidth')) : undefined,\n          loading ? withVendorCSSClassPrefix(bem('button', 'loading')) : undefined,\n          disabled || loading ? withVendorCSSClassPrefix(bem('button', 'disabled')) : undefined,\n          styles['button'],\n          styles['size'],\n          styles['variant'],\n          styles['fullWidth'],\n          styles['loading'],\n          styles['shape'],\n          className,\n        )}\n        disabled={disabled || loading}\n        {...rest}\n      >\n        {loading && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'spinner')), styles['spinner'])}>\n            <Spinner\n              size={size as SpinnerSize}\n              color=\"currentColor\"\n              style={{\n                height: spinnerWidth,\n                width: spinnerWidth,\n              }}\n            />\n          </span>\n        )}\n        {!loading && isIconVariant && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'icon')), styles['icon'])}>\n            {children || startIcon || endIcon}\n          </span>\n        )}\n        {!loading && !isIconVariant && startIcon && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'start-icon')), styles['startIcon'])}>\n            {startIcon}\n          </span>\n        )}\n        {!isIconVariant && children && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'content')), styles['content'])}>{children}</span>\n        )}\n        {!loading && !isIconVariant && endIcon && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'end-icon')), styles['endIcon'])}>{endIcon}</span>\n        )}\n      </button>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;;;;AAgEA,MAAM,mBAAmB,SAAqB,gBAAgC;AAC5E,KAAI,YAAY,QACd,QAAO,QAAQ,YAAY;AAE7B,KAAI,YAAY,SACd,QAAO,QAAQ,YAAY;AAE7B,QAAO,QAAQ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiC7B,MAAMA,gCAKF,EACE,QAAQ,WACR,UAAU,SACV,OAAO,UACP,YAAY,OACZ,UAAU,OACV,WACA,SACA,UACA,WACA,UACA,OACA,QAAQ,SACR,GAAG,QAEL,QACG;CACH,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAwCC,8BAC5C,OACA,aACA,OACA,SACA,MACA,WACA,YAAY,OACZ,SACA,MACD;CAED,MAAMC,gBAAyB,YAAY;CAE3C,MAAMC,eAAuB,gBAAgB,MAAM,MAAM,KAAK,QAAQ,KAAK;AAE3E,QACE,4CAAC;EACM;EACE;EACP,gHAC+B,SAAS,CAAC,iFACV,UAAU,QAAQ,CAAC,iFACnB,UAAU,MAAM,CAAC,iFACjB,UAAU,KAAK,CAAC,iFAChB,UAAU,MAAM,CAAC,EAC9C,2FAAyC,UAAU,YAAY,CAAC,GAAG,QACnE,yFAAuC,UAAU,UAAU,CAAC,GAAG,QAC/D,YAAY,yFAAuC,UAAU,WAAW,CAAC,GAAG,QAC5E,OAAO,WACP,OAAO,SACP,OAAO,YACP,OAAO,cACP,OAAO,YACP,OAAO,UACP,UACD;EACD,UAAU,YAAY;EACtB,GAAI;;GAEH,WACC,2CAAC;IAAK,gHAA2C,UAAU,UAAU,CAAC,EAAE,OAAO,WAAW;cACxF,2CAACC;KACO;KACN,OAAM;KACN,OAAO;MACL,QAAQ;MACR,OAAO;MACR;MACD;KACG;GAER,CAAC,WAAW,iBACX,2CAAC;IAAK,gHAA2C,UAAU,OAAO,CAAC,EAAE,OAAO,QAAQ;cACjF,YAAY,aAAa;KACrB;GAER,CAAC,WAAW,CAAC,iBAAiB,aAC7B,2CAAC;IAAK,gHAA2C,UAAU,aAAa,CAAC,EAAE,OAAO,aAAa;cAC5F;KACI;GAER,CAAC,iBAAiB,YACjB,2CAAC;IAAK,gHAA2C,UAAU,UAAU,CAAC,EAAE,OAAO,WAAW;IAAG;KAAgB;GAE9G,CAAC,WAAW,CAAC,iBAAiB,WAC7B,2CAAC;IAAK,gHAA2C,UAAU,WAAW,CAAC,EAAE,OAAO,WAAW;cAAG;KAAe;;GAExG;EAGd;AAED,OAAO,cAAc;AAErB,qBAAe"}
+{"version":3,"file":"Button.cjs","names":["Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>","useTheme","styles: Record<string, string | null>","useStyles","isIconVariant: boolean","spinnerWidth: string","Spinner"],"sources":["../../../../../src/components/primitives/Button/Button.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ButtonHTMLAttributes, forwardRef, ReactNode, ForwardRefExoticComponent, RefAttributes, Ref} from 'react';\nimport useStyles from './Button.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport Spinner, {SpinnerSize} from '../Spinner/Spinner';\n\nexport type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;\nexport type ButtonVariant = 'solid' | 'outline' | 'text' | 'icon';\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {\n  /**\n   * The button color that determines the color scheme\n   */\n  color?: ButtonColor;\n  /**\n   * Icon to display after the button text\n   */\n  endIcon?: ReactNode;\n  /**\n   * Whether the button should take the full width of its container\n   */\n  fullWidth?: boolean;\n  /**\n   * Whether the button is in a loading state\n   */\n  loading?: boolean;\n  /**\n   * The shape of the button: square or round\n   */\n  shape?: 'square' | 'round';\n  /**\n   * The size of the button\n   */\n  size?: ButtonSize;\n  /**\n   * Icon to display before the button text\n   */\n  startIcon?: ReactNode;\n  /**\n   * The button variant that determines the visual style\n   */\n  variant?: ButtonVariant;\n}\n\nconst getSpinnerWidth = (sizeVal: ButtonSize, spacingUnit: string): string => {\n  if (sizeVal === 'small') {\n    return `calc(${spacingUnit} * 1.5)`;\n  }\n  if (sizeVal === 'medium') {\n    return `calc(${spacingUnit} * 2)`;\n  }\n  return `calc(${spacingUnit} * 2.5)`;\n};\n\n/**\n * Button component with multiple variants and types.\n *\n * @example\n * ```tsx\n * // Primary solid button\n * <Button color=\"primary\" variant=\"solid\">\n *   Click me\n * </Button>\n *\n * // Secondary outline button\n * <Button color=\"secondary\" variant=\"outline\" size=\"large\">\n *   Cancel\n * </Button>\n *\n * // Text button with loading state\n * <Button color=\"tertiary\" variant=\"text\" loading>\n *   Loading...\n * </Button>\n *\n * // Button with icons\n * <Button\n *   color=\"primary\"\n *   startIcon={<Icon />}\n *   endIcon={<Arrow />}\n * >\n *   Save and Continue\n * </Button>\n * ```\n */\nconst Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<\n  HTMLButtonElement,\n  ButtonProps\n>(\n  (\n    {\n      color = 'primary',\n      variant = 'solid',\n      size = 'medium',\n      fullWidth = false,\n      loading = false,\n      startIcon,\n      endIcon,\n      children,\n      className,\n      disabled,\n      style,\n      shape = 'square',\n      ...rest\n    }: ButtonProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n    const styles: Record<string, string | null> = useStyles(\n      theme,\n      colorScheme,\n      color,\n      variant,\n      size,\n      fullWidth,\n      disabled || false,\n      loading,\n      shape,\n    );\n\n    const isIconVariant: boolean = variant === 'icon';\n\n    const spinnerWidth: string = getSpinnerWidth(size, theme.vars.spacing.unit);\n\n    return (\n      <button\n        ref={ref}\n        style={style}\n        className={cx(\n          withVendorCSSClassPrefix(bem('button')),\n          withVendorCSSClassPrefix(bem('button', variant)),\n          withVendorCSSClassPrefix(bem('button', color)),\n          withVendorCSSClassPrefix(bem('button', size)),\n          withVendorCSSClassPrefix(bem('button', shape)),\n          fullWidth ? withVendorCSSClassPrefix(bem('button', 'fullWidth')) : undefined,\n          loading ? withVendorCSSClassPrefix(bem('button', 'loading')) : undefined,\n          disabled || loading ? withVendorCSSClassPrefix(bem('button', 'disabled')) : undefined,\n          styles['button'],\n          styles['size'],\n          styles['variant'],\n          styles['fullWidth'],\n          styles['loading'],\n          styles['shape'],\n          className,\n        )}\n        disabled={disabled || loading}\n        {...rest}\n      >\n        {loading && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'spinner')), styles['spinner'])}>\n            <Spinner\n              size={size as SpinnerSize}\n              color=\"currentColor\"\n              style={{\n                height: spinnerWidth,\n                width: spinnerWidth,\n              }}\n            />\n          </span>\n        )}\n        {!loading && isIconVariant && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'icon')), styles['icon'])}>\n            {children || startIcon || endIcon}\n          </span>\n        )}\n        {!loading && !isIconVariant && startIcon && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'start-icon')), styles['startIcon'])}>\n            {startIcon}\n          </span>\n        )}\n        {!isIconVariant && children && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'content')), styles['content'])}>{children}</span>\n        )}\n        {!loading && !isIconVariant && endIcon && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'end-icon')), styles['endIcon'])}>{endIcon}</span>\n        )}\n      </button>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;;;;AAiDA,MAAM,mBAAmB,SAAqB,gBAAgC;AAC5E,KAAI,YAAY,QACd,QAAO,QAAQ,YAAY;AAE7B,KAAI,YAAY,SACd,QAAO,QAAQ,YAAY;AAE7B,QAAO,QAAQ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiC7B,MAAMA,gCAKF,EACE,QAAQ,WACR,UAAU,SACV,OAAO,UACP,YAAY,OACZ,UAAU,OACV,WACA,SACA,UACA,WACA,UACA,OACA,QAAQ,SACR,GAAG,QAEL,QACG;CACH,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAwCC,8BAC5C,OACA,aACA,OACA,SACA,MACA,WACA,YAAY,OACZ,SACA,MACD;CAED,MAAMC,gBAAyB,YAAY;CAE3C,MAAMC,eAAuB,gBAAgB,MAAM,MAAM,KAAK,QAAQ,KAAK;AAE3E,QACE,4CAAC;EACM;EACE;EACP,gHAC+B,SAAS,CAAC,iFACV,UAAU,QAAQ,CAAC,iFACnB,UAAU,MAAM,CAAC,iFACjB,UAAU,KAAK,CAAC,iFAChB,UAAU,MAAM,CAAC,EAC9C,2FAAyC,UAAU,YAAY,CAAC,GAAG,QACnE,yFAAuC,UAAU,UAAU,CAAC,GAAG,QAC/D,YAAY,yFAAuC,UAAU,WAAW,CAAC,GAAG,QAC5E,OAAO,WACP,OAAO,SACP,OAAO,YACP,OAAO,cACP,OAAO,YACP,OAAO,UACP,UACD;EACD,UAAU,YAAY;EACtB,GAAI;;GAEH,WACC,2CAAC;IAAK,gHAA2C,UAAU,UAAU,CAAC,EAAE,OAAO,WAAW;cACxF,2CAACC;KACO;KACN,OAAM;KACN,OAAO;MACL,QAAQ;MACR,OAAO;MACR;MACD;KACG;GAER,CAAC,WAAW,iBACX,2CAAC;IAAK,gHAA2C,UAAU,OAAO,CAAC,EAAE,OAAO,QAAQ;cACjF,YAAY,aAAa;KACrB;GAER,CAAC,WAAW,CAAC,iBAAiB,aAC7B,2CAAC;IAAK,gHAA2C,UAAU,aAAa,CAAC,EAAE,OAAO,aAAa;cAC5F;KACI;GAER,CAAC,iBAAiB,YACjB,2CAAC;IAAK,gHAA2C,UAAU,UAAU,CAAC,EAAE,OAAO,WAAW;IAAG;KAAgB;GAE9G,CAAC,WAAW,CAAC,iBAAiB,WAC7B,2CAAC;IAAK,gHAA2C,UAAU,WAAW,CAAC,EAAE,OAAO,WAAW;cAAG;KAAe;;GAExG;EAGd;AAED,OAAO,cAAc;AAErB,qBAAe"}

package/dist/cjs/components/primitives/Button/Button.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.cjs","names":["iconSizeMap: Record<string, string>","iconDimension: string","baseButton: string","sizeStyles: Record<string, string>","variantStyles: Record<string, string>","spinnerStyles: string","iconStyles: string"],"sources":["../../../../../src/components/primitives/Button/Button.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;\nexport type ButtonVariant = 'solid' | 'outline' | 'text' | 'icon';\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\n/**\n * Creates styles for the Button component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param color - The button color\n * @param variant - The button variant\n * @param size - The button size\n * @param fullWidth - Whether the button should take full width\n * @param disabled - Whether the button is disabled\n * @param loading - Whether the button is in loading state\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  color: ButtonColor,\n  variant: ButtonVariant,\n  size: ButtonSize,\n  fullWidth: boolean,\n  disabled: boolean,\n  loading: boolean,\n  shape: 'square' | 'round' = 'square',\n): Record<string, string | null> =>\n  useMemo(() => {\n    const iconSizeMap: Record<string, string> = {\n      large: `calc(${theme.vars.spacing.unit} * 5)`,\n      medium: `calc(${theme.vars.spacing.unit} * 4)`,\n      small: `calc(${theme.vars.spacing.unit} * 3)`,\n    };\n\n    const iconDimension: string = iconSizeMap[size] || iconSizeMap['medium'];\n\n    const baseButton: string = css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: calc(${theme.vars.spacing.unit} * 1);\n      border-radius: ${shape === 'round'\n        ? '50%'\n        : theme.vars.components?.Button?.root?.borderRadius || theme.vars.borderRadius.medium};\n      font-weight: 500;\n      cursor: ${disabled || loading ? 'not-allowed' : 'pointer'};\n      outline: none;\n      text-decoration: none;\n      white-space: nowrap;\n      width: ${fullWidth ? '100%' : 'auto'};\n      opacity: ${disabled || loading ? 0.6 : 1};\n      font-family: ${theme.vars.typography.fontFamily};\n      border-width: 1px;\n      border-style: solid;\n      ${variant === 'icon'\n        ? `\n        padding: 0;\n        min-width: unset;\n        min-height: unset;\n        width: ${iconDimension};\n        height: ${iconDimension};\n        justify-content: center;\n        align-items: center;\n      `\n        : ''}\n    `;\n\n    const sizeStyles: Record<string, string> = {\n      large: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.lg};`\n          : `padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 3);\n             font-size: ${theme.vars.typography.fontSizes.lg};\n             min-height: calc(${theme.vars.spacing.unit} * 5);`}\n      `,\n      medium: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.md};`\n          : `padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 2);\n             font-size: ${theme.vars.typography.fontSizes.md};\n             min-height: calc(${theme.vars.spacing.unit} * 4);`}\n      `,\n      small: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.sm};`\n          : `padding: calc(${theme.vars.spacing.unit} * 0.5) calc(${theme.vars.spacing.unit} * 1);\n             font-size: ${theme.vars.typography.fontSizes.sm};\n             min-height: calc(${theme.vars.spacing.unit} * 3);`}\n      `,\n    };\n\n    const variantStyles: Record<string, string> = {\n      'primary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.primary.dark};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.primary.dark};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.primary.dark};\n          outline: none;\n        }\n      `,\n      'primary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: ${theme.vars.colors.primary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n          opacity: 0.9;\n        }\n      `,\n      'primary-solid': css`\n        background-color: ${theme.vars.colors.primary.main};\n        color: ${theme.vars.colors.primary.contrastText};\n        border-color: ${theme.vars.colors.primary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.9;\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.8;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.8;\n        }\n      `,\n      'primary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          outline: none;\n        }\n      `,\n      'secondary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.secondary.dark};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.secondary.dark};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.secondary.dark};\n          outline: none;\n        }\n      `,\n      'secondary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: ${theme.vars.colors.secondary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n          opacity: 0.9;\n        }\n      `,\n      'secondary-solid': css`\n        background-color: ${theme.vars.colors.secondary.main};\n        color: ${theme.vars.colors.secondary.contrastText};\n        border-color: ${theme.vars.colors.secondary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.9;\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.8;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.8;\n        }\n      `,\n      'secondary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          outline: none;\n        }\n      `,\n      'tertiary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.text.primary};\n          outline: none;\n        }\n      `,\n      'tertiary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: ${theme.vars.colors.border};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.action.hover};\n          border-color: ${theme.vars.colors.text.secondary};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.action.selected};\n          border-color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.action.focus};\n          border-color: ${theme.vars.colors.text.primary};\n        }\n      `,\n      'tertiary-solid': css`\n        background-color: ${theme.vars.colors.text.secondary};\n        color: ${theme.vars.colors.background.surface};\n        border-color: ${theme.vars.colors.text.secondary};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n          opacity: 0.9;\n        }\n      `,\n      'tertiary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.text.primary};\n          outline: none;\n        }\n      `,\n    };\n\n    const spinnerStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    const iconStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    const contentStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    return {\n      button: baseButton,\n      content: contentStyles,\n      endIcon: iconStyles,\n      fullWidth: fullWidth\n        ? css`\n            width: 100%;\n          `\n        : null,\n      icon: iconStyles,\n      loading: loading\n        ? css`\n            pointer-events: none;\n          `\n        : null,\n      shape:\n        shape === 'round'\n          ? css`\n              border-radius: 50%;\n            `\n          : null,\n      size: sizeStyles[size],\n      spinner: spinnerStyles,\n      startIcon: iconStyles,\n      variant: variantStyles[`${color}-${variant}`] || variantStyles['primary-solid'],\n    };\n  }, [theme, colorScheme, color, variant, size, fullWidth, disabled, loading]);\n\nexport default useStyles;\n"],"mappings":"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"}
+{"version":3,"file":"Button.styles.cjs","names":["iconSizeMap: Record<string, string>","iconDimension: string","baseButton: string","sizeStyles: Record<string, string>","variantStyles: Record<string, string>","spinnerStyles: string","iconStyles: string"],"sources":["../../../../../src/components/primitives/Button/Button.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;\nexport type ButtonVariant = 'solid' | 'outline' | 'text' | 'icon';\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\n/**\n * Creates styles for the Button component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param color - The button color\n * @param variant - The button variant\n * @param size - The button size\n * @param fullWidth - Whether the button should take full width\n * @param disabled - Whether the button is disabled\n * @param loading - Whether the button is in loading state\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  color: ButtonColor,\n  variant: ButtonVariant,\n  size: ButtonSize,\n  fullWidth: boolean,\n  disabled: boolean,\n  loading: boolean,\n  shape: 'square' | 'round' = 'square',\n): Record<string, string | null> =>\n  useMemo(() => {\n    const iconSizeMap: Record<string, string> = {\n      large: `calc(${theme.vars.spacing.unit} * 5)`,\n      medium: `calc(${theme.vars.spacing.unit} * 4)`,\n      small: `calc(${theme.vars.spacing.unit} * 3)`,\n    };\n\n    const iconDimension: string = iconSizeMap[size] || iconSizeMap['medium'];\n\n    const baseButton: string = css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: calc(${theme.vars.spacing.unit} * 1);\n      border-radius: ${shape === 'round'\n        ? '50%'\n        : theme.vars.components?.Button?.root?.borderRadius || theme.vars.borderRadius.medium};\n      font-weight: 500;\n      cursor: ${disabled || loading ? 'not-allowed' : 'pointer'};\n      outline: none;\n      text-decoration: none;\n      white-space: nowrap;\n      width: ${fullWidth ? '100%' : 'auto'};\n      opacity: ${disabled || loading ? 0.6 : 1};\n      font-family: ${theme.vars.typography.fontFamily};\n      border-width: 1px;\n      border-style: solid;\n      ${variant === 'icon'\n        ? `\n        padding: 0;\n        min-width: unset;\n        min-height: unset;\n        width: ${iconDimension};\n        height: ${iconDimension};\n        justify-content: center;\n        align-items: center;\n      `\n        : ''}\n    `;\n\n    const sizeStyles: Record<string, string> = {\n      large: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.lg};`\n          : `padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 3);\n             font-size: ${theme.vars.typography.fontSizes.lg};\n             min-height: calc(${theme.vars.spacing.unit} * 5);`}\n      `,\n      medium: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.md};`\n          : `padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 2);\n             font-size: ${theme.vars.typography.fontSizes.md};\n             min-height: calc(${theme.vars.spacing.unit} * 4);`}\n      `,\n      small: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.sm};`\n          : `padding: calc(${theme.vars.spacing.unit} * 0.5) calc(${theme.vars.spacing.unit} * 1);\n             font-size: ${theme.vars.typography.fontSizes.sm};\n             min-height: calc(${theme.vars.spacing.unit} * 3);`}\n      `,\n    };\n\n    const variantStyles: Record<string, string> = {\n      'primary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.primary.dark};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.primary.dark};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.primary.dark};\n          outline: none;\n        }\n      `,\n      'primary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: ${theme.vars.colors.primary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n          opacity: 0.9;\n        }\n      `,\n      'primary-solid': css`\n        background-color: ${theme.vars.colors.primary.main};\n        color: ${theme.vars.colors.primary.contrastText};\n        border-color: ${theme.vars.colors.primary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.9;\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.8;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.8;\n        }\n      `,\n      'primary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          outline: none;\n        }\n      `,\n      'secondary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.secondary.dark};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.secondary.dark};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.secondary.dark};\n          outline: none;\n        }\n      `,\n      'secondary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: ${theme.vars.colors.secondary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n          opacity: 0.9;\n        }\n      `,\n      'secondary-solid': css`\n        background-color: ${theme.vars.colors.secondary.main};\n        color: ${theme.vars.colors.secondary.contrastText};\n        border-color: ${theme.vars.colors.secondary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.9;\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.8;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.8;\n        }\n      `,\n      'secondary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          outline: none;\n        }\n      `,\n      'tertiary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.text.primary};\n          outline: none;\n        }\n      `,\n      'tertiary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: ${theme.vars.colors.border};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.action.hover};\n          border-color: ${theme.vars.colors.text.secondary};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.action.selected};\n          border-color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.action.focus};\n          border-color: ${theme.vars.colors.text.primary};\n        }\n      `,\n      'tertiary-solid': css`\n        background-color: ${theme.vars.colors.text.secondary};\n        color: ${theme.vars.colors.background.surface};\n        border-color: ${theme.vars.colors.text.secondary};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n          opacity: 0.9;\n        }\n      `,\n      'tertiary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.text.primary};\n          outline: none;\n        }\n      `,\n    };\n\n    const spinnerStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    const iconStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    const contentStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    return {\n      button: baseButton,\n      content: contentStyles,\n      endIcon: iconStyles,\n      fullWidth: fullWidth\n        ? css`\n            width: 100%;\n          `\n        : null,\n      icon: iconStyles,\n      loading: loading\n        ? css`\n            pointer-events: none;\n          `\n        : null,\n      shape:\n        shape === 'round'\n          ? css`\n              border-radius: 50%;\n            `\n          : null,\n      size: sizeStyles[size],\n      spinner: spinnerStyles,\n      startIcon: iconStyles,\n      variant: variantStyles[`${color}-${variant}`] || variantStyles['primary-solid'],\n    };\n  }, [theme, colorScheme, color, variant, size, fullWidth, disabled, loading]);\n\nexport default useStyles;\n"],"mappings":"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"}

package/dist/cjs/components/primitives/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","names":["Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>","useTheme","styles: Record<string, string>","useStyles","CardHeader: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>","CardTitle: FC<CardTitleProps>","Typography","CardDescription: FC<CardDescriptionProps>","CardAction: ForwardRefExoticComponent<CardActionProps & RefAttributes<HTMLDivElement>>","CardContent: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>>","CardFooter: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>"],"sources":["../../../../../src/components/primitives/Card/Card.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {\n  HTMLAttributes,\n  forwardRef,\n  ReactNode,\n  ForwardRefExoticComponent,\n  RefAttributes,\n  Ref,\n  ElementType,\n  FC,\n} from 'react';\nimport useStyles from './Card.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport Typography from '../Typography/Typography';\nimport {TypographyVariant} from '../Typography/Typography.styles';\n\nexport type CardVariant = 'default' | 'outlined' | 'elevated';\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Card content\n   */\n  children?: ReactNode;\n  /**\n   * Whether the card should be clickable (shows hover effects)\n   */\n  clickable?: boolean;\n  /**\n   * The visual variant of the card\n   */\n  variant?: CardVariant;\n}\n\nexport interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Header content\n   */\n  children?: ReactNode;\n}\n\nexport interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Title content\n   */\n  children?: ReactNode;\n  /**\n   * The heading level to use\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Description content\n   */\n  children?: ReactNode;\n}\n\nexport interface CardActionProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Action content\n   */\n  children?: ReactNode;\n}\n\nexport interface CardContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Content\n   */\n  children?: ReactNode;\n}\n\nexport interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Footer content\n   */\n  children?: ReactNode;\n}\n\n/**\n * Card component that provides a flexible container for content.\n *\n * @example\n * ```tsx\n * <Card variant=\"elevated\" clickable>\n *   <Card.Header>\n *     <Card.Title>Card Title</Card.Title>\n *     <Card.Description>Card Description</Card.Description>\n *     <Card.Action>\n *       <Button variant=\"link\">Action</Button>\n *     </Card.Action>\n *   </Card.Header>\n *   <Card.Content>\n *     <p>Card content goes here</p>\n *   </Card.Content>\n *   <Card.Footer>\n *     <Button>Cancel</Button>\n *     <Button variant=\"outline\">Submit</Button>\n *   </Card.Footer>\n * </Card>\n * ```\n */\nconst Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardProps\n>(\n  (\n    {variant = 'default', clickable = false, children, className, style, ...rest}: CardProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n    const styles: Record<string, string> = useStyles(theme, colorScheme, variant, clickable);\n\n    return (\n      <div\n        ref={ref}\n        style={style}\n        className={cx(\n          withVendorCSSClassPrefix(bem('card')),\n          styles['card'],\n          styles['variant'],\n          styles['clickable'],\n          withVendorCSSClassPrefix(bem('card', null, variant)),\n          {\n            [withVendorCSSClassPrefix(bem('card', null, 'clickable'))]: clickable,\n          },\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\n/**\n * Card header component that contains the title, description, and optional actions.\n */\nconst CardHeader: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardHeaderProps\n>(({children, className, style, ...rest}: CardHeaderProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'header')), styles['header'], className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\n/**\n * Card title component.\n */\nconst CardTitle: FC<CardTitleProps> = ({children, level = 3, className, style, ...rest}: CardTitleProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  const getVariantFromLevel = (lvl: number): string => {\n    switch (lvl) {\n      case 1:\n        return 'h1';\n      case 2:\n        return 'h2';\n      case 3:\n        return 'h3';\n      case 4:\n        return 'h4';\n      case 5:\n        return 'h5';\n      case 6:\n        return 'h6';\n      default:\n        return 'h3';\n    }\n  };\n\n  const getComponentFromLevel = (lvl: number): string => {\n    switch (lvl) {\n      case 1:\n        return 'h1';\n      case 2:\n        return 'h2';\n      case 3:\n        return 'h3';\n      case 4:\n        return 'h4';\n      case 5:\n        return 'h5';\n      case 6:\n        return 'h6';\n      default:\n        return 'h3';\n    }\n  };\n\n  const {color, ...filteredRest} = rest;\n\n  return (\n    <Typography\n      component={getComponentFromLevel(level) as ElementType}\n      variant={getVariantFromLevel(level) as TypographyVariant}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'title')), styles['title'], className)}\n      fontWeight={600}\n      {...filteredRest}\n    >\n      {children}\n    </Typography>\n  );\n};\n\n/**\n * Card description component.\n */\nconst CardDescription: FC<CardDescriptionProps> = ({children, className, style, ...rest}: CardDescriptionProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  const {color, ...filteredRest} = rest;\n\n  return (\n    <Typography\n      component=\"p\"\n      variant=\"body2\"\n      color=\"textSecondary\"\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'description')), styles['description'], className)}\n      {...filteredRest}\n    >\n      {children}\n    </Typography>\n  );\n};\n\n/**\n * Card action component for action elements in the header.\n */\nconst CardAction: ForwardRefExoticComponent<CardActionProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardActionProps\n>(({children, className, style, ...rest}: CardActionProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'action')), styles['action'], className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\n/**\n * Card content component that contains the main content of the card.\n */\nconst CardContent: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardContentProps\n>(({children, className, style, ...rest}: CardContentProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'content')), styles['content'], className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\n/**\n * Card footer component that contains footer actions or additional information.\n */\nconst CardFooter: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardFooterProps\n>(({children, className, style, ...rest}: CardFooterProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'footer')), styles['footer'], className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\nCard.displayName = 'Card';\nCardHeader.displayName = 'Card.Header';\nCardTitle.displayName = 'Card.Title';\nCardDescription.displayName = 'Card.Description';\nCardAction.displayName = 'Card.Action';\nCardContent.displayName = 'Card.Content';\nCardFooter.displayName = 'Card.Footer';\n\n(Card as any).Header = CardHeader;\n(Card as any).Title = CardTitle;\n(Card as any).Description = CardDescription;\n(Card as any).Action = CardAction;\n(Card as any).Content = CardContent;\n(Card as any).Footer = CardFooter;\n\nexport interface CardComponent extends ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> {\n  Action: typeof CardAction;\n  Content: typeof CardContent;\n  Description: typeof CardDescription;\n  Footer: typeof CardFooter;\n  Header: typeof CardHeader;\n  Title: typeof CardTitle;\n}\n\nexport default Card as CardComponent;\nexport {Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter};\n"],"mappings":"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"}
+{"version":3,"file":"Card.cjs","names":["Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>","useTheme","styles: Record<string, string>","useStyles","CardHeader: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>","CardTitle: FC<CardTitleProps>","Typography","CardDescription: FC<CardDescriptionProps>","CardAction: ForwardRefExoticComponent<CardActionProps & RefAttributes<HTMLDivElement>>","CardContent: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>>","CardFooter: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>"],"sources":["../../../../../src/components/primitives/Card/Card.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {\n  HTMLAttributes,\n  forwardRef,\n  ReactNode,\n  ForwardRefExoticComponent,\n  RefAttributes,\n  Ref,\n  ElementType,\n  FC,\n} from 'react';\nimport useStyles from './Card.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport Typography from '../Typography/Typography';\nimport {TypographyVariant} from '../Typography/Typography.styles';\n\nexport type CardVariant = 'default' | 'outlined' | 'elevated';\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Card content\n   */\n  children?: ReactNode;\n  /**\n   * Whether the card should be clickable (shows hover effects)\n   */\n  clickable?: boolean;\n  /**\n   * The visual variant of the card\n   */\n  variant?: CardVariant;\n}\n\nexport interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Header content\n   */\n  children?: ReactNode;\n}\n\nexport interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Title content\n   */\n  children?: ReactNode;\n  /**\n   * The heading level to use\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Description content\n   */\n  children?: ReactNode;\n}\n\nexport interface CardActionProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Action content\n   */\n  children?: ReactNode;\n}\n\nexport interface CardContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Content\n   */\n  children?: ReactNode;\n}\n\nexport interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Footer content\n   */\n  children?: ReactNode;\n}\n\n/**\n * Card component that provides a flexible container for content.\n *\n * @example\n * ```tsx\n * <Card variant=\"elevated\" clickable>\n *   <Card.Header>\n *     <Card.Title>Card Title</Card.Title>\n *     <Card.Description>Card Description</Card.Description>\n *     <Card.Action>\n *       <Button variant=\"link\">Action</Button>\n *     </Card.Action>\n *   </Card.Header>\n *   <Card.Content>\n *     <p>Card content goes here</p>\n *   </Card.Content>\n *   <Card.Footer>\n *     <Button>Cancel</Button>\n *     <Button variant=\"outline\">Submit</Button>\n *   </Card.Footer>\n * </Card>\n * ```\n */\nconst Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardProps\n>(\n  (\n    {variant = 'default', clickable = false, children, className, style, ...rest}: CardProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n    const styles: Record<string, string> = useStyles(theme, colorScheme, variant, clickable);\n\n    return (\n      <div\n        ref={ref}\n        style={style}\n        className={cx(\n          withVendorCSSClassPrefix(bem('card')),\n          styles['card'],\n          styles['variant'],\n          styles['clickable'],\n          withVendorCSSClassPrefix(bem('card', null, variant)),\n          {\n            [withVendorCSSClassPrefix(bem('card', null, 'clickable'))]: clickable,\n          },\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\n/**\n * Card header component that contains the title, description, and optional actions.\n */\nconst CardHeader: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardHeaderProps\n>(({children, className, style, ...rest}: CardHeaderProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'header')), styles['header'], className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\n/**\n * Card title component.\n */\nconst CardTitle: FC<CardTitleProps> = ({children, level = 3, className, style, ...rest}: CardTitleProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  const getVariantFromLevel = (lvl: number): string => {\n    switch (lvl) {\n      case 1:\n        return 'h1';\n      case 2:\n        return 'h2';\n      case 3:\n        return 'h3';\n      case 4:\n        return 'h4';\n      case 5:\n        return 'h5';\n      case 6:\n        return 'h6';\n      default:\n        return 'h3';\n    }\n  };\n\n  const getComponentFromLevel = (lvl: number): string => {\n    switch (lvl) {\n      case 1:\n        return 'h1';\n      case 2:\n        return 'h2';\n      case 3:\n        return 'h3';\n      case 4:\n        return 'h4';\n      case 5:\n        return 'h5';\n      case 6:\n        return 'h6';\n      default:\n        return 'h3';\n    }\n  };\n\n  const {color, ...filteredRest} = rest;\n\n  return (\n    <Typography\n      component={getComponentFromLevel(level) as ElementType}\n      variant={getVariantFromLevel(level) as TypographyVariant}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'title')), styles['title'], className)}\n      fontWeight={600}\n      {...filteredRest}\n    >\n      {children}\n    </Typography>\n  );\n};\n\n/**\n * Card description component.\n */\nconst CardDescription: FC<CardDescriptionProps> = ({children, className, style, ...rest}: CardDescriptionProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  const {color, ...filteredRest} = rest;\n\n  return (\n    <Typography\n      component=\"p\"\n      variant=\"body2\"\n      color=\"textSecondary\"\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'description')), styles['description'], className)}\n      {...filteredRest}\n    >\n      {children}\n    </Typography>\n  );\n};\n\n/**\n * Card action component for action elements in the header.\n */\nconst CardAction: ForwardRefExoticComponent<CardActionProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardActionProps\n>(({children, className, style, ...rest}: CardActionProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'action')), styles['action'], className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\n/**\n * Card content component that contains the main content of the card.\n */\nconst CardContent: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardContentProps\n>(({children, className, style, ...rest}: CardContentProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'content')), styles['content'], className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\n/**\n * Card footer component that contains footer actions or additional information.\n */\nconst CardFooter: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardFooterProps\n>(({children, className, style, ...rest}: CardFooterProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'footer')), styles['footer'], className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\nCard.displayName = 'Card';\nCardHeader.displayName = 'Card.Header';\nCardTitle.displayName = 'Card.Title';\nCardDescription.displayName = 'Card.Description';\nCardAction.displayName = 'Card.Action';\nCardContent.displayName = 'Card.Content';\nCardFooter.displayName = 'Card.Footer';\n\n(Card as any).Header = CardHeader;\n(Card as any).Title = CardTitle;\n(Card as any).Description = CardDescription;\n(Card as any).Action = CardAction;\n(Card as any).Content = CardContent;\n(Card as any).Footer = CardFooter;\n\nexport interface CardComponent extends ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> {\n  Action: typeof CardAction;\n  Content: typeof CardContent;\n  Description: typeof CardDescription;\n  Footer: typeof CardFooter;\n  Header: typeof CardHeader;\n  Title: typeof CardTitle;\n}\n\nexport default Card as CardComponent;\nexport {Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter};\n"],"mappings":"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"}

package/dist/cjs/components/primitives/Card/Card.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.styles.cjs","names":["baseCard: string","variantStyles: Record<string, string>","clickableStyles: string","headerStyles: string","titleStyles: string","descriptionStyles: string","actionStyles: string","contentStyles: string","footerStyles: string"],"sources":["../../../../../src/components/primitives/Card/Card.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type CardVariant = 'default' | 'outlined' | 'elevated';\n\n/**\n * Creates styles for the Card component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param variant - The card variant\n * @param clickable - Whether the card is clickable\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  variant: CardVariant,\n  clickable: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const baseCard: string = css`\n      border-radius: ${theme.vars.borderRadius.medium};\n      background-color: ${theme.vars.colors.background.surface};\n      font-family: ${theme.vars.typography.fontFamily};\n      transition: all 0.2s ease-in-out;\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const variantStyles: Record<string, string> = {\n      default: css`\n        /* Base styles only */\n      `,\n      elevated: css`\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n        border: none;\n      `,\n      outlined: css`\n        border: 1px solid ${theme.vars.colors.border};\n      `,\n    };\n\n    const clickableStyles: string = css`\n      cursor: pointer;\n\n      &:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      }\n    `;\n\n    const headerStyles: string = css`\n      padding: 0 calc(${theme.vars.spacing.unit} * 2);\n      margin-top: calc(${theme.vars.spacing.unit} * 2);\n      display: flex;\n      flex-direction: column;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    const titleStyles: string = css`\n      margin: 0;\n      /* Typography component will handle color, fontSize, fontWeight, lineHeight */\n    `;\n\n    const descriptionStyles: string = css`\n      margin: 0;\n      color: ${theme.vars.colors.text.secondary};\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      line-height: 1.5;\n    `;\n\n    const actionStyles: string = css`\n      margin-top: ${theme.vars.spacing.unit};\n    `;\n\n    const contentStyles: string = css`\n      padding: 0 calc(${theme.vars.spacing.unit} * 2);\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n      flex: 1;\n    `;\n\n    const footerStyles: string = css`\n      padding: 0 calc(${theme.vars.spacing.unit} * 2) calc(${theme.vars.spacing.unit} * 2);\n      display: flex;\n      align-items: center;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    return {\n      action: actionStyles,\n      card: baseCard,\n      clickable: clickable ? clickableStyles : '',\n      content: contentStyles,\n      description: descriptionStyles,\n      footer: footerStyles,\n      header: headerStyles,\n      title: titleStyles,\n      variant: variantStyles[variant],\n    };\n  }, [theme, colorScheme, variant, clickable]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;AAgCA,MAAM,aACJ,OACA,aACA,SACA,uCAEc;CACZ,MAAMA,WAAmB,iBAAG;uBACT,MAAM,KAAK,aAAa,OAAO;0BAC5B,MAAM,KAAK,OAAO,WAAW,QAAQ;qBAC1C,MAAM,KAAK,WAAW,WAAW;;;;;;sBAMhC,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,gBAAwC;EAC5C,SAAS,iBAAG;;;EAGZ,UAAU,iBAAG;;;;EAIb,UAAU,iBAAG;4BACS,MAAM,KAAK,OAAO,OAAO;;EAEhD;CAED,MAAMC,kBAA0B,iBAAG;;;;;;;;CASnC,MAAMC,eAAuB,iBAAG;wBACZ,MAAM,KAAK,QAAQ,KAAK;yBACvB,MAAM,KAAK,QAAQ,KAAK;;;aAGpC,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,cAAsB,iBAAG;;;;CAK/B,MAAMC,oBAA4B,iBAAG;;eAE1B,MAAM,KAAK,OAAO,KAAK,UAAU;mBAC7B,MAAM,KAAK,WAAW,UAAU,GAAG;;;CAIlD,MAAMC,eAAuB,iBAAG;oBAChB,MAAM,KAAK,QAAQ,KAAK;;CAGxC,MAAMC,gBAAwB,iBAAG;wBACb,MAAM,KAAK,QAAQ,KAAK;4BACpB,MAAM,KAAK,QAAQ,KAAK;;;CAIhD,MAAMC,eAAuB,iBAAG;wBACZ,MAAM,KAAK,QAAQ,KAAK,aAAa,MAAM,KAAK,QAAQ,KAAK;;;aAGxE,MAAM,KAAK,QAAQ,KAAK;;AAGjC,QAAO;EACL,QAAQ;EACR,MAAM;EACN,WAAW,YAAY,kBAAkB;EACzC,SAAS;EACT,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,SAAS,cAAc;EACxB;GACA;CAAC;CAAO;CAAa;CAAS;CAAU,CAAC;AAE9C,0BAAe"}
+{"version":3,"file":"Card.styles.cjs","names":["baseCard: string","variantStyles: Record<string, string>","clickableStyles: string","headerStyles: string","titleStyles: string","descriptionStyles: string","actionStyles: string","contentStyles: string","footerStyles: string"],"sources":["../../../../../src/components/primitives/Card/Card.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type CardVariant = 'default' | 'outlined' | 'elevated';\n\n/**\n * Creates styles for the Card component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param variant - The card variant\n * @param clickable - Whether the card is clickable\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  variant: CardVariant,\n  clickable: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const baseCard: string = css`\n      border-radius: ${theme.vars.borderRadius.medium};\n      background-color: ${theme.vars.colors.background.surface};\n      font-family: ${theme.vars.typography.fontFamily};\n      transition: all 0.2s ease-in-out;\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const variantStyles: Record<string, string> = {\n      default: css`\n        /* Base styles only */\n      `,\n      elevated: css`\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n        border: none;\n      `,\n      outlined: css`\n        border: 1px solid ${theme.vars.colors.border};\n      `,\n    };\n\n    const clickableStyles: string = css`\n      cursor: pointer;\n\n      &:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      }\n    `;\n\n    const headerStyles: string = css`\n      padding: 0 calc(${theme.vars.spacing.unit} * 2);\n      margin-top: calc(${theme.vars.spacing.unit} * 2);\n      display: flex;\n      flex-direction: column;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    const titleStyles: string = css`\n      margin: 0;\n      /* Typography component will handle color, fontSize, fontWeight, lineHeight */\n    `;\n\n    const descriptionStyles: string = css`\n      margin: 0;\n      color: ${theme.vars.colors.text.secondary};\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      line-height: 1.5;\n    `;\n\n    const actionStyles: string = css`\n      margin-top: ${theme.vars.spacing.unit};\n    `;\n\n    const contentStyles: string = css`\n      padding: 0 calc(${theme.vars.spacing.unit} * 2);\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n      flex: 1;\n    `;\n\n    const footerStyles: string = css`\n      padding: 0 calc(${theme.vars.spacing.unit} * 2) calc(${theme.vars.spacing.unit} * 2);\n      display: flex;\n      align-items: center;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    return {\n      action: actionStyles,\n      card: baseCard,\n      clickable: clickable ? clickableStyles : '',\n      content: contentStyles,\n      description: descriptionStyles,\n      footer: footerStyles,\n      header: headerStyles,\n      title: titleStyles,\n      variant: variantStyles[variant],\n    };\n  }, [theme, colorScheme, variant, clickable]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,aACJ,OACA,aACA,SACA,uCAEc;CACZ,MAAMA,WAAmB,iBAAG;uBACT,MAAM,KAAK,aAAa,OAAO;0BAC5B,MAAM,KAAK,OAAO,WAAW,QAAQ;qBAC1C,MAAM,KAAK,WAAW,WAAW;;;;;;sBAMhC,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,gBAAwC;EAC5C,SAAS,iBAAG;;;EAGZ,UAAU,iBAAG;;;;EAIb,UAAU,iBAAG;4BACS,MAAM,KAAK,OAAO,OAAO;;EAEhD;CAED,MAAMC,kBAA0B,iBAAG;;;;;;;;CASnC,MAAMC,eAAuB,iBAAG;wBACZ,MAAM,KAAK,QAAQ,KAAK;yBACvB,MAAM,KAAK,QAAQ,KAAK;;;aAGpC,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,cAAsB,iBAAG;;;;CAK/B,MAAMC,oBAA4B,iBAAG;;eAE1B,MAAM,KAAK,OAAO,KAAK,UAAU;mBAC7B,MAAM,KAAK,WAAW,UAAU,GAAG;;;CAIlD,MAAMC,eAAuB,iBAAG;oBAChB,MAAM,KAAK,QAAQ,KAAK;;CAGxC,MAAMC,gBAAwB,iBAAG;wBACb,MAAM,KAAK,QAAQ,KAAK;4BACpB,MAAM,KAAK,QAAQ,KAAK;;;CAIhD,MAAMC,eAAuB,iBAAG;wBACZ,MAAM,KAAK,QAAQ,KAAK,aAAa,MAAM,KAAK,QAAQ,KAAK;;;aAGxE,MAAM,KAAK,QAAQ,KAAK;;AAGjC,QAAO;EACL,QAAQ;EACR,MAAM;EACN,WAAW,YAAY,kBAAkB;EACzC,SAAS;EACT,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,SAAS,cAAc;EACxB;GACA;CAAC;CAAO;CAAa;CAAS;CAAU,CAAC;AAE9C,0BAAe"}

package/dist/cjs/components/primitives/Checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","names":["Checkbox: FC<CheckboxProps>","useTheme","styles: Record<string, string>","useStyles","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/Checkbox/Checkbox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, InputHTMLAttributes} from 'react';\nimport useStyles from './Checkbox.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Error message to display below the checkbox\n   */\n  error?: string;\n  /**\n   * Helper text to display below the checkbox\n   */\n  helperText?: string;\n  /**\n   * Label text to display next to the checkbox\n   */\n  label?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n}\n\nconst Checkbox: FC<CheckboxProps> = ({\n  label,\n  error,\n  className,\n  required,\n  helperText,\n  style = {},\n  ...rest\n}: CheckboxProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, hasError, !!required);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('checkbox')), className)}\n      helperTextMarginLeft={`calc(${theme.vars.spacing.unit} * 3.5)`}\n    >\n      <div style={style} className={cx(withVendorCSSClassPrefix(bem('checkbox', 'container')), styles['container'])}>\n        <input\n          type=\"checkbox\"\n          className={cx(withVendorCSSClassPrefix(bem('checkbox', 'input')), styles['input'], styles['errorInput'], {\n            [withVendorCSSClassPrefix(bem('checkbox', 'input', 'error'))]: hasError,\n          })}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n        />\n        {label && (\n          <InputLabel\n            required={required}\n            error={hasError}\n            variant=\"inline\"\n            className={cx(withVendorCSSClassPrefix(bem('checkbox', 'label')), styles['label'], styles['errorLabel'], {\n              [withVendorCSSClassPrefix(bem('checkbox', 'label', 'error'))]: hasError,\n            })}\n          >\n            {label}\n          </InputLabel>\n        )}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;AAiDA,MAAMA,YAA+B,EACnC,OACA,OACA,WACA,UACA,YACA,QAAQ,EAAE,CACV,GAAG,WACgB;CACnB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,gCAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,2CAACC;EACQ;EACK;EACZ,gHAA2C,WAAW,CAAC,EAAE,UAAU;EACnE,sBAAsB,QAAQ,MAAM,KAAK,QAAQ,KAAK;YAEtD,4CAAC;GAAW;GAAO,gHAA2C,YAAY,YAAY,CAAC,EAAE,OAAO,aAAa;cAC3G,2CAAC;IACC,MAAK;IACL,gHAA2C,YAAY,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,kFACzE,YAAY,SAAS,QAAQ,CAAC,GAAG,UAChE,CAAC;IACF,gBAAc;IACd,iBAAe;IACf,GAAI;KACJ,EACD,SACC,2CAACC;IACW;IACV,OAAO;IACP,SAAQ;IACR,gHAA2C,YAAY,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,kFACzE,YAAY,SAAS,QAAQ,CAAC,GAAG,UAChE,CAAC;cAED;KACU;IAEX;GACM;;AAIlB,uBAAe"}
+{"version":3,"file":"Checkbox.cjs","names":["Checkbox: FC<CheckboxProps>","useTheme","styles: Record<string, string>","useStyles","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/Checkbox/Checkbox.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, InputHTMLAttributes} from 'react';\nimport useStyles from './Checkbox.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Error message to display below the checkbox\n   */\n  error?: string;\n  /**\n   * Helper text to display below the checkbox\n   */\n  helperText?: string;\n  /**\n   * Label text to display next to the checkbox\n   */\n  label?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n}\n\nconst Checkbox: FC<CheckboxProps> = ({\n  label,\n  error,\n  className,\n  required,\n  helperText,\n  style = {},\n  ...rest\n}: CheckboxProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, hasError, !!required);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('checkbox')), className)}\n      helperTextMarginLeft={`calc(${theme.vars.spacing.unit} * 3.5)`}\n    >\n      <div style={style} className={cx(withVendorCSSClassPrefix(bem('checkbox', 'container')), styles['container'])}>\n        <input\n          type=\"checkbox\"\n          className={cx(withVendorCSSClassPrefix(bem('checkbox', 'input')), styles['input'], styles['errorInput'], {\n            [withVendorCSSClassPrefix(bem('checkbox', 'input', 'error'))]: hasError,\n          })}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n        />\n        {label && (\n          <InputLabel\n            required={required}\n            error={hasError}\n            variant=\"inline\"\n            className={cx(withVendorCSSClassPrefix(bem('checkbox', 'label')), styles['label'], styles['errorLabel'], {\n              [withVendorCSSClassPrefix(bem('checkbox', 'label', 'error'))]: hasError,\n            })}\n          >\n            {label}\n          </InputLabel>\n        )}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;AAkCA,MAAMA,YAA+B,EACnC,OACA,OACA,WACA,UACA,YACA,QAAQ,EAAE,CACV,GAAG,WACgB;CACnB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,gCAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,2CAACC;EACQ;EACK;EACZ,gHAA2C,WAAW,CAAC,EAAE,UAAU;EACnE,sBAAsB,QAAQ,MAAM,KAAK,QAAQ,KAAK;YAEtD,4CAAC;GAAW;GAAO,gHAA2C,YAAY,YAAY,CAAC,EAAE,OAAO,aAAa;cAC3G,2CAAC;IACC,MAAK;IACL,gHAA2C,YAAY,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,kFACzE,YAAY,SAAS,QAAQ,CAAC,GAAG,UAChE,CAAC;IACF,gBAAc;IACd,iBAAe;IACf,GAAI;KACJ,EACD,SACC,2CAACC;IACW;IACV,OAAO;IACP,SAAQ;IACR,gHAA2C,YAAY,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,kFACzE,YAAY,SAAS,QAAQ,CAAC,GAAG,UAChE,CAAC;cAED;KACU;IAEX;GACM;;AAIlB,uBAAe"}

package/dist/cjs/components/primitives/Checkbox/Checkbox.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.cjs","names":["containerStyles: string","inputStyles: string","errorInputStyles: string","labelStyles: string","errorLabelStyles: string","requiredStyles: string"],"sources":["../../../../../src/components/primitives/Checkbox/Checkbox.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/**\n * Creates styles for the Checkbox component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param hasError - Whether the checkbox has an error state\n * @param required - Whether the checkbox is required\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, hasError: boolean, required: boolean): Record<string, string> =>\n  useMemo(() => {\n    const containerStyles: string = css`\n      display: flex;\n      align-items: center;\n    `;\n\n    const inputStyles: string = css`\n      width: calc(${theme.vars.spacing.unit} * 2.5);\n      height: calc(${theme.vars.spacing.unit} * 2.5);\n      margin-inline-end: ${theme.vars.spacing.unit};\n      accent-color: ${theme.vars.colors.primary.main};\n      cursor: pointer;\n\n      &:focus {\n        outline: 2px solid ${theme.vars.colors.primary.main};\n        outline-offset: 2px;\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n    `;\n\n    const errorInputStyles: string = css`\n      accent-color: ${theme.vars.colors.error.main};\n\n      &:focus {\n        outline-color: ${theme.vars.colors.error.main};\n      }\n    `;\n\n    const labelStyles: string = css`\n      color: ${theme.vars.colors.text.primary};\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-family: ${theme.vars.typography.fontFamily};\n      cursor: pointer;\n\n      &:hover {\n        color: ${theme.vars.colors.text.primary};\n      }\n    `;\n\n    const errorLabelStyles: string = css`\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    const requiredStyles: string = css`\n      /* Required indicator styles will be handled by InputLabel */\n    `;\n\n    return {\n      container: containerStyles,\n      errorInput: hasError ? errorInputStyles : '',\n      errorLabel: hasError ? errorLabelStyles : '',\n      input: inputStyles,\n      label: labelStyles,\n      required: required ? requiredStyles : '',\n    };\n  }, [theme, colorScheme, hasError, required]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAM,aAAa,OAAc,aAAqB,UAAmB,sCACzD;CACZ,MAAMA,kBAA0B,iBAAG;;;;CAKnC,MAAMC,cAAsB,iBAAG;oBACf,MAAM,KAAK,QAAQ,KAAK;qBACvB,MAAM,KAAK,QAAQ,KAAK;2BAClB,MAAM,KAAK,QAAQ,KAAK;sBAC7B,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;6BAIxB,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;;;;;;CAUxD,MAAMC,mBAA2B,iBAAG;sBAClB,MAAM,KAAK,OAAO,MAAM,KAAK;;;yBAG1B,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIlD,MAAMC,cAAsB,iBAAG;eACpB,MAAM,KAAK,OAAO,KAAK,QAAQ;mBAC3B,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;;;iBAIrC,MAAM,KAAK,OAAO,KAAK,QAAQ;;;CAI5C,MAAMC,mBAA2B,iBAAG;eACzB,MAAM,KAAK,OAAO,MAAM,KAAK;;CAGxC,MAAMC,iBAAyB,iBAAG;;;AAIlC,QAAO;EACL,WAAW;EACX,YAAY,WAAW,mBAAmB;EAC1C,YAAY,WAAW,mBAAmB;EAC1C,OAAO;EACP,OAAO;EACP,UAAU,WAAW,iBAAiB;EACvC;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,8BAAe"}
+{"version":3,"file":"Checkbox.styles.cjs","names":["containerStyles: string","inputStyles: string","errorInputStyles: string","labelStyles: string","errorLabelStyles: string","requiredStyles: string"],"sources":["../../../../../src/components/primitives/Checkbox/Checkbox.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/**\n * Creates styles for the Checkbox component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param hasError - Whether the checkbox has an error state\n * @param required - Whether the checkbox is required\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, hasError: boolean, required: boolean): Record<string, string> =>\n  useMemo(() => {\n    const containerStyles: string = css`\n      display: flex;\n      align-items: center;\n    `;\n\n    const inputStyles: string = css`\n      width: calc(${theme.vars.spacing.unit} * 2.5);\n      height: calc(${theme.vars.spacing.unit} * 2.5);\n      margin-inline-end: ${theme.vars.spacing.unit};\n      accent-color: ${theme.vars.colors.primary.main};\n      cursor: pointer;\n\n      &:focus {\n        outline: 2px solid ${theme.vars.colors.primary.main};\n        outline-offset: 2px;\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n    `;\n\n    const errorInputStyles: string = css`\n      accent-color: ${theme.vars.colors.error.main};\n\n      &:focus {\n        outline-color: ${theme.vars.colors.error.main};\n      }\n    `;\n\n    const labelStyles: string = css`\n      color: ${theme.vars.colors.text.primary};\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-family: ${theme.vars.typography.fontFamily};\n      cursor: pointer;\n\n      &:hover {\n        color: ${theme.vars.colors.text.primary};\n      }\n    `;\n\n    const errorLabelStyles: string = css`\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    const requiredStyles: string = css`\n      /* Required indicator styles will be handled by InputLabel */\n    `;\n\n    return {\n      container: containerStyles,\n      errorInput: hasError ? errorInputStyles : '',\n      errorLabel: hasError ? errorLabelStyles : '',\n      input: inputStyles,\n      label: labelStyles,\n      required: required ? requiredStyles : '',\n    };\n  }, [theme, colorScheme, hasError, required]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,aAAa,OAAc,aAAqB,UAAmB,sCACzD;CACZ,MAAMA,kBAA0B,iBAAG;;;;CAKnC,MAAMC,cAAsB,iBAAG;oBACf,MAAM,KAAK,QAAQ,KAAK;qBACvB,MAAM,KAAK,QAAQ,KAAK;2BAClB,MAAM,KAAK,QAAQ,KAAK;sBAC7B,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;6BAIxB,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;;;;;;CAUxD,MAAMC,mBAA2B,iBAAG;sBAClB,MAAM,KAAK,OAAO,MAAM,KAAK;;;yBAG1B,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIlD,MAAMC,cAAsB,iBAAG;eACpB,MAAM,KAAK,OAAO,KAAK,QAAQ;mBAC3B,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;;;iBAIrC,MAAM,KAAK,OAAO,KAAK,QAAQ;;;CAI5C,MAAMC,mBAA2B,iBAAG;eACzB,MAAM,KAAK,OAAO,MAAM,KAAK;;CAGxC,MAAMC,iBAAyB,iBAAG;;;AAIlC,QAAO;EACL,WAAW;EACX,YAAY,WAAW,mBAAmB;EAC1C,YAAY,WAAW,mBAAmB;EAC1C,OAAO;EACP,OAAO;EACP,UAAU,WAAW,iBAAiB;EACvC;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,8BAAe"}