@thunderid/react 0.1.0 → 0.2.0

package/dist/components/primitives/Toggle/Toggle.js

@@ -0,0 +1,60 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import FormControl_default from "../FormControl/FormControl.js";
+import InputLabel_default from "../InputLabel/InputLabel.js";
+import Toggle_styles_default from "./Toggle.styles.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/primitives/Toggle/Toggle.tsx
+/**
+* A Toggle component that represents a boolean input. It is built on top of a hidden checkbox input
+* and styled to look like a switch.
+*
+* The component is wrapped in a FormControl to display error messages and helper text.
+* The label is associated with the input for accessibility.
+*
+* @param props - Props for the Toggle component
+* @returns A JSX element representing the Toggle
+*/
+const Toggle = ({ label, error, className, required, helperText, style = {},...rest }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const hasError = !!error;
+	const styles = Toggle_styles_default(theme, colorScheme, hasError, !!required);
+	return /* @__PURE__ */ jsx(FormControl_default, {
+		error,
+		helperText,
+		className: cx(withVendorCSSClassPrefix(bem("toggle")), className),
+		helperTextMarginLeft: `calc(${theme.vars.spacing.unit} * 5.5)`,
+		children: /* @__PURE__ */ jsxs("label", {
+			style,
+			className: cx(withVendorCSSClassPrefix(bem("toggle", "container")), styles["container"]),
+			children: [
+				/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					role: "switch",
+					className: cx(withVendorCSSClassPrefix(bem("toggle", "input")), styles["input"]),
+					"aria-invalid": hasError,
+					"aria-required": required,
+					...rest
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cx(withVendorCSSClassPrefix(bem("toggle", "track")), styles["track"]),
+					children: /* @__PURE__ */ jsx("span", { className: cx(withVendorCSSClassPrefix(bem("toggle", "thumb")), styles["thumb"]) })
+				}),
+				label && /* @__PURE__ */ jsx(InputLabel_default, {
+					required,
+					error: hasError,
+					variant: "inline",
+					className: cx(withVendorCSSClassPrefix(bem("toggle", "label")), styles["label"], styles["errorLabel"], { [withVendorCSSClassPrefix(bem("toggle", "label", "error"))]: hasError }),
+					children: label
+				})
+			]
+		})
+	});
+};
+var Toggle_default = Toggle;
+
+//#endregion
+export { Toggle_default as default };
+//# sourceMappingURL=Toggle.js.map

package/dist/components/primitives/Toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","names":["Toggle: FC<ToggleProps>","useTheme","styles: Record<string, string>","useStyles","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/Toggle/Toggle.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 {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, InputHTMLAttributes} from 'react';\nimport useStyles from './Toggle.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\n/**\n * Props for the Toggle component.\n */\nexport interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n  className?: string;\n  error?: string;\n  helperText?: string;\n  label?: string;\n  required?: boolean;\n}\n\n/**\n * A Toggle component that represents a boolean input. It is built on top of a hidden checkbox input\n * and styled to look like a switch.\n *\n * The component is wrapped in a FormControl to display error messages and helper text.\n * The label is associated with the input for accessibility.\n *\n * @param props - Props for the Toggle component\n * @returns A JSX element representing the Toggle\n */\nconst Toggle: FC<ToggleProps> = ({label, error, className, required, helperText, style = {}, ...rest}: ToggleProps) => {\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('toggle')), className)}\n      helperTextMarginLeft={`calc(${theme.vars.spacing.unit} * 5.5)`}\n    >\n      <label style={style} className={cx(withVendorCSSClassPrefix(bem('toggle', 'container')), styles['container'])}>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          className={cx(withVendorCSSClassPrefix(bem('toggle', 'input')), styles['input'])}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n        />\n        <div className={cx(withVendorCSSClassPrefix(bem('toggle', 'track')), styles['track'])}>\n          <span className={cx(withVendorCSSClassPrefix(bem('toggle', 'thumb')), styles['thumb'])} />\n        </div>\n        {label && (\n          <InputLabel\n            required={required}\n            error={hasError}\n            variant=\"inline\"\n            className={cx(withVendorCSSClassPrefix(bem('toggle', 'label')), styles['label'], styles['errorLabel'], {\n              [withVendorCSSClassPrefix(bem('toggle', 'label', 'error'))]: hasError,\n            })}\n          >\n            {label}\n          </InputLabel>\n        )}\n      </label>\n    </FormControl>\n  );\n};\n\nexport default Toggle;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA+CA,MAAMA,UAA2B,EAAC,OAAO,OAAO,WAAW,UAAU,YAAY,QAAQ,EAAE,CAAE,GAAG,WAAuB;CACrH,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,sBAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,oBAACC;EACQ;EACK;EACZ,WAAW,GAAG,yBAAyB,IAAI,SAAS,CAAC,EAAE,UAAU;EACjE,sBAAsB,QAAQ,MAAM,KAAK,QAAQ,KAAK;YAEtD,qBAAC;GAAa;GAAO,WAAW,GAAG,yBAAyB,IAAI,UAAU,YAAY,CAAC,EAAE,OAAO,aAAa;;IAC3G,oBAAC;KACC,MAAK;KACL,MAAK;KACL,WAAW,GAAG,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;KAChF,gBAAc;KACd,iBAAe;KACf,GAAI;MACJ;IACF,oBAAC;KAAI,WAAW,GAAG,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;eACnF,oBAAC,UAAK,WAAW,GAAG,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS,GAAI;MACtF;IACL,SACC,oBAACC;KACW;KACV,OAAO;KACP,SAAQ;KACR,WAAW,GAAG,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,GACpG,yBAAyB,IAAI,UAAU,SAAS,QAAQ,CAAC,GAAG,UAC9D,CAAC;eAED;MACU;;IAET;GACI;;AAIlB,qBAAe"}

package/dist/components/primitives/Toggle/Toggle.styles.js

@@ -0,0 +1,98 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/primitives/Toggle/Toggle.styles.ts
+const useStyles = (theme, colorScheme, hasError, required) => useMemo(() => {
+	const containerStyles = css`
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+    `;
+	const inputStyles = css`
+      border: 0;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute;
+      width: 1px;
+      white-space: nowrap;
+
+      &:focus-visible + div {
+        outline: 2px solid ${theme.vars.colors.primary.main};
+        outline-offset: 2px;
+      }
+
+      &:disabled + div {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+    `;
+	const trackStyles = css`
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      width: 36px;
+      height: 20px;
+      background-color: ${theme.vars.colors.text.secondary};
+      opacity: 0.2;
+      border-radius: 9999px;
+      transition: all 0.2s ease-in-out;
+
+      input:checked + & {
+        background-color: ${theme.vars.colors.primary.main};
+        opacity: 1;
+      }
+
+      input:disabled + & {
+        opacity: 0.4;
+      }
+    `;
+	const thumbStyles = css`
+      position: absolute;
+      left: 2px;
+      width: 16px;
+      height: 16px;
+      background-color: #fff;
+      border-radius: 50%;
+      transition: transform 0.2s ease-in-out;
+
+      input:checked + * > & {
+        transform: translateX(16px);
+      }
+    `;
+	const labelStyles = css`
+      margin-left: calc(${theme.vars.spacing.unit} * 1.5);
+      color: ${theme.vars.colors.text.primary};
+      font-size: ${theme.vars.typography.fontSizes.sm};
+      font-family: ${theme.vars.typography.fontFamily};
+      cursor: pointer;
+
+      input:disabled ~ & {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+    `;
+	const errorLabelStyles = css`
+      color: ${theme.vars.colors.error.main};
+    `;
+	return {
+		container: containerStyles,
+		errorLabel: hasError ? errorLabelStyles : "",
+		input: inputStyles,
+		label: labelStyles,
+		thumb: thumbStyles,
+		track: trackStyles
+	};
+}, [
+	theme,
+	colorScheme,
+	hasError,
+	required
+]);
+var Toggle_styles_default = useStyles;
+
+//#endregion
+export { Toggle_styles_default as default };
+//# sourceMappingURL=Toggle.styles.js.map

package/dist/components/primitives/Toggle/Toggle.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.styles.js","names":["containerStyles: string","inputStyles: string","trackStyles: string","thumbStyles: string","labelStyles: string","errorLabelStyles: string"],"sources":["../../../../src/components/primitives/Toggle/Toggle.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\nconst useStyles = (theme: Theme, colorScheme: string, hasError: boolean, required: boolean): Record<string, string> =>\n  useMemo(() => {\n    const containerStyles: string = css`\n      display: inline-flex;\n      align-items: center;\n      cursor: pointer;\n    `;\n\n    const inputStyles: string = css`\n      border: 0;\n      clip: rect(0 0 0 0);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      width: 1px;\n      white-space: nowrap;\n\n      &:focus-visible + div {\n        outline: 2px solid ${theme.vars.colors.primary.main};\n        outline-offset: 2px;\n      }\n\n      &:disabled + div {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n    `;\n\n    const trackStyles: string = css`\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      width: 36px;\n      height: 20px;\n      background-color: ${theme.vars.colors.text.secondary};\n      opacity: 0.2;\n      border-radius: 9999px;\n      transition: all 0.2s ease-in-out;\n\n      input:checked + & {\n        background-color: ${theme.vars.colors.primary.main};\n        opacity: 1;\n      }\n\n      input:disabled + & {\n        opacity: 0.4;\n      }\n    `;\n\n    const thumbStyles: string = css`\n      position: absolute;\n      left: 2px;\n      width: 16px;\n      height: 16px;\n      background-color: #fff;\n      border-radius: 50%;\n      transition: transform 0.2s ease-in-out;\n\n      input:checked + * > & {\n        transform: translateX(16px);\n      }\n    `;\n\n    const labelStyles: string = css`\n      margin-left: calc(${theme.vars.spacing.unit} * 1.5);\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      input:disabled ~ & {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n    `;\n\n    const errorLabelStyles: string = css`\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    return {\n      container: containerStyles,\n      errorLabel: hasError ? errorLabelStyles : '',\n      input: inputStyles,\n      label: labelStyles,\n      thumb: thumbStyles,\n      track: trackStyles,\n    };\n  }, [theme, colorScheme, hasError, required]);\n\nexport default useStyles;\n"],"mappings":";;;;AAsBA,MAAM,aAAa,OAAc,aAAqB,UAAmB,aACvE,cAAc;CACZ,MAAMA,kBAA0B,GAAG;;;;;CAMnC,MAAMC,cAAsB,GAAG;;;;;;;;;;;;6BAYN,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;;;;;;CAUxD,MAAMC,cAAsB,GAAG;;;;;;0BAMT,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;4BAM/B,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;;;;;CASvD,MAAMC,cAAsB,GAAG;;;;;;;;;;;;;CAc/B,MAAMC,cAAsB,GAAG;0BACT,MAAM,KAAK,QAAQ,KAAK;eACnC,MAAM,KAAK,OAAO,KAAK,QAAQ;mBAC3B,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;;;;;;;CASlD,MAAMC,mBAA2B,GAAG;eACzB,MAAM,KAAK,OAAO,MAAM,KAAK;;AAGxC,QAAO;EACL,WAAW;EACX,YAAY,WAAW,mBAAmB;EAC1C,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACR;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,4BAAe"}

package/dist/components/primitives/Typography/Typography.js

@@ -0,0 +1,60 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import Typography_styles_default from "./Typography.styles.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/primitives/Typography/Typography.tsx
+const variantMapping = {
+	body1: "p",
+	body2: "p",
+	button: "span",
+	caption: "span",
+	h1: "h1",
+	h2: "h2",
+	h3: "h3",
+	h4: "h4",
+	h5: "h5",
+	h6: "h6",
+	overline: "span",
+	subtitle1: "h6",
+	subtitle2: "h6"
+};
+/**
+* Typography component for consistent text rendering throughout the application.
+* Integrates with the theme system and provides semantic HTML elements.
+*/
+const Typography = ({ children, variant = "body1", component, align = "left", color = "textPrimary", noWrap = false, className, style = {}, inline = false, fontWeight, fontSize, lineHeight, gutterBottom = false,...rest }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = Typography_styles_default(theme, colorScheme, variant, align, color, noWrap, inline, gutterBottom, fontWeight, fontSize, lineHeight);
+	const Component = component || variantMapping[variant] || "span";
+	const getVariantClass = (variantName) => {
+		switch (variantName) {
+			case "h1": return styles["typographyH1"];
+			case "h2": return styles["typographyH2"];
+			case "h3": return styles["typographyH3"];
+			case "h4": return styles["typographyH4"];
+			case "h5": return styles["typographyH5"];
+			case "h6": return styles["typographyH6"];
+			case "subtitle1": return styles["typographySubtitle1"];
+			case "subtitle2": return styles["typographySubtitle2"];
+			case "body1": return styles["typographyBody1"];
+			case "body2": return styles["typographyBody2"];
+			case "caption": return styles["typographyCaption"];
+			case "overline": return styles["typographyOverline"];
+			case "button": return styles["typographyButton"];
+			default: return "";
+		}
+	};
+	return /* @__PURE__ */ jsx(Component, {
+		className: cx(withVendorCSSClassPrefix(bem("typography")), withVendorCSSClassPrefix(bem("typography", variant)), styles["typography"], getVariantClass(variant), noWrap && styles["typographyNoWrap"], inline && styles["typographyInline"], gutterBottom && styles["typographyGutterBottom"], className),
+		style,
+		...rest,
+		children
+	});
+};
+var Typography_default = Typography;
+
+//#endregion
+export { Typography_default as default };
+//# sourceMappingURL=Typography.js.map

package/dist/components/primitives/Typography/Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.js","names":["variantMapping: Record<TypographyVariant, ElementType>","Typography: FC<TypographyProps>","useTheme","styles: Record<string, string>","useStyles","Component: ElementType"],"sources":["../../../../src/components/primitives/Typography/Typography.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 {CSSProperties, FC, ReactNode, ElementType} from 'react';\nimport useStyles, {TypographyVariant, TypographyAlign, TypographyColor} from './Typography.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport interface TypographyProps {\n  /**\n   * Text alignment\n   */\n  align?: TypographyAlign;\n  /**\n   * The content to be rendered\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Color variant\n   */\n  color?: TypographyColor;\n  /**\n   * The HTML element or React component to render\n   */\n  component?: ElementType;\n  /**\n   * Custom font size (overrides variant sizing)\n   */\n  fontSize?: string | number;\n  /**\n   * Custom font weight\n   */\n  fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold' | number;\n  /**\n   * Whether to disable gutters (margin bottom)\n   */\n  gutterBottom?: boolean;\n  /**\n   * Whether the text should be displayed inline\n   */\n  inline?: boolean;\n  /**\n   * Line height\n   */\n  lineHeight?: string | number;\n  /**\n   * Whether the text should be clipped with ellipsis when it overflows\n   */\n  noWrap?: boolean;\n  /**\n   * Custom styles\n   */\n  style?: CSSProperties;\n  /**\n   * The typography variant to apply\n   */\n  variant?: TypographyVariant;\n}\n\n// Default component mapping for variants\nconst variantMapping: Record<TypographyVariant, ElementType> = {\n  body1: 'p',\n  body2: 'p',\n  button: 'span',\n  caption: 'span',\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  h6: 'h6',\n  overline: 'span',\n  subtitle1: 'h6',\n  subtitle2: 'h6',\n};\n\n/**\n * Typography component for consistent text rendering throughout the application.\n * Integrates with the theme system and provides semantic HTML elements.\n */\nconst Typography: FC<TypographyProps> = ({\n  children,\n  variant = 'body1',\n  component,\n  align = 'left',\n  color = 'textPrimary',\n  noWrap = false,\n  className,\n  style = {},\n  inline = false,\n  fontWeight,\n  fontSize,\n  lineHeight,\n  gutterBottom = false,\n  ...rest\n}: TypographyProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(\n    theme,\n    colorScheme,\n    variant,\n    align,\n    color,\n    noWrap,\n    inline,\n    gutterBottom,\n    fontWeight,\n    fontSize,\n    lineHeight,\n  );\n\n  const Component: ElementType = component || variantMapping[variant] || 'span';\n\n  const getVariantClass = (variantName: TypographyVariant): string => {\n    switch (variantName) {\n      case 'h1':\n        return styles['typographyH1'];\n      case 'h2':\n        return styles['typographyH2'];\n      case 'h3':\n        return styles['typographyH3'];\n      case 'h4':\n        return styles['typographyH4'];\n      case 'h5':\n        return styles['typographyH5'];\n      case 'h6':\n        return styles['typographyH6'];\n      case 'subtitle1':\n        return styles['typographySubtitle1'];\n      case 'subtitle2':\n        return styles['typographySubtitle2'];\n      case 'body1':\n        return styles['typographyBody1'];\n      case 'body2':\n        return styles['typographyBody2'];\n      case 'caption':\n        return styles['typographyCaption'];\n      case 'overline':\n        return styles['typographyOverline'];\n      case 'button':\n        return styles['typographyButton'];\n      default:\n        return '';\n    }\n  };\n\n  const typographyClassName: string = cx(\n    withVendorCSSClassPrefix(bem('typography')),\n    withVendorCSSClassPrefix(bem('typography', variant)),\n    styles['typography'],\n    getVariantClass(variant),\n    noWrap && styles['typographyNoWrap'],\n    inline && styles['typographyInline'],\n    gutterBottom && styles['typographyGutterBottom'],\n    className,\n  );\n\n  return (\n    <Component className={typographyClassName} style={style} {...rest}>\n      {children}\n    </Component>\n  );\n};\n\nexport default Typography;\n"],"mappings":";;;;;;;AAgFA,MAAMA,iBAAyD;CAC7D,OAAO;CACP,OAAO;CACP,QAAQ;CACR,SAAS;CACT,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,UAAU;CACV,WAAW;CACX,WAAW;CACZ;;;;;AAMD,MAAMC,cAAmC,EACvC,UACA,UAAU,SACV,WACA,QAAQ,QACR,QAAQ,eACR,SAAS,OACT,WACA,QAAQ,EAAE,EACV,SAAS,OACT,YACA,UACA,YACA,eAAe,MACf,GAAG,WACkB;CACrB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,SAAiCC,0BACrC,OACA,aACA,SACA,OACA,OACA,QACA,QACA,cACA,YACA,UACA,WACD;CAED,MAAMC,YAAyB,aAAa,eAAe,YAAY;CAEvE,MAAM,mBAAmB,gBAA2C;AAClE,UAAQ,aAAR;GACE,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,YACH,QAAO,OAAO;GAChB,KAAK,YACH,QAAO,OAAO;GAChB,KAAK,QACH,QAAO,OAAO;GAChB,KAAK,QACH,QAAO,OAAO;GAChB,KAAK,UACH,QAAO,OAAO;GAChB,KAAK,WACH,QAAO,OAAO;GAChB,KAAK,SACH,QAAO,OAAO;GAChB,QACE,QAAO;;;AAeb,QACE,oBAAC;EAAU,WAZuB,GAClC,yBAAyB,IAAI,aAAa,CAAC,EAC3C,yBAAyB,IAAI,cAAc,QAAQ,CAAC,EACpD,OAAO,eACP,gBAAgB,QAAQ,EACxB,UAAU,OAAO,qBACjB,UAAU,OAAO,qBACjB,gBAAgB,OAAO,2BACvB,UACD;EAGmD;EAAO,GAAI;EAC1D;GACS;;AAIhB,yBAAe"}

package/dist/components/primitives/Typography/Typography.styles.js

@@ -0,0 +1,273 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/primitives/Typography/Typography.styles.ts
+/**
+* Creates styles for the Typography component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param variant - The typography variant
+* @param align - Text alignment
+* @param color - Color variant
+* @param noWrap - Whether text should be truncated with ellipsis
+* @param inline - Whether text should be displayed inline
+* @param gutterBottom - Whether to add bottom margin
+* @param fontWeight - Custom font weight
+* @param fontSize - Custom font size
+* @param lineHeight - Custom line height
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, variant, align, color, noWrap, inline, gutterBottom, fontWeight, fontSize, lineHeight) => useMemo(() => {
+	const getColorValue = (colorVariant) => {
+		switch (colorVariant) {
+			case "primary": return theme.colors.primary.main;
+			case "secondary": return theme.colors.secondary.main;
+			case "error": return theme.colors.error.main;
+			case "textPrimary": return theme.colors.text.primary;
+			case "textSecondary": return theme.colors.text.secondary;
+			case "inherit": return "inherit";
+			default: return theme.colors.text.primary;
+		}
+	};
+	const getVariantStyles = (variantName) => {
+		switch (variantName) {
+			case "h1": return {
+				fontSize: theme.vars.typography.fontSizes["3xl"],
+				fontWeight: 600,
+				letterSpacing: "-0.00735em",
+				lineHeight: 1.235
+			};
+			case "h2": return {
+				fontSize: theme.vars.typography.fontSizes["2xl"],
+				fontWeight: 600,
+				letterSpacing: "0em",
+				lineHeight: 1.334
+			};
+			case "h3": return {
+				fontSize: theme.vars.typography.fontSizes.xl,
+				fontWeight: 600,
+				letterSpacing: "0.0075em",
+				lineHeight: 1.6
+			};
+			case "h4": return {
+				fontSize: theme.vars.typography.fontSizes.lg,
+				fontWeight: 600,
+				letterSpacing: "0.00938em",
+				lineHeight: 1.5
+			};
+			case "h5": return {
+				fontSize: theme.vars.typography.fontSizes.md,
+				fontWeight: 600,
+				letterSpacing: "0em",
+				lineHeight: 1.334
+			};
+			case "h6": return {
+				fontSize: theme.vars.typography.fontSizes.sm,
+				fontWeight: 500,
+				letterSpacing: "0.0075em",
+				lineHeight: 1.6
+			};
+			case "subtitle1": return {
+				fontSize: theme.vars.typography.fontSizes.md,
+				fontWeight: 400,
+				letterSpacing: "0.00938em",
+				lineHeight: 1.75
+			};
+			case "subtitle2": return {
+				fontSize: theme.vars.typography.fontSizes.sm,
+				fontWeight: 500,
+				letterSpacing: "0.00714em",
+				lineHeight: 1.57
+			};
+			case "body1": return {
+				fontSize: theme.vars.typography.fontSizes.md,
+				fontWeight: 400,
+				letterSpacing: "0.00938em",
+				lineHeight: 1.5
+			};
+			case "body2": return {
+				fontSize: theme.vars.typography.fontSizes.sm,
+				fontWeight: 400,
+				letterSpacing: "0.01071em",
+				lineHeight: 1.43
+			};
+			case "caption": return {
+				fontSize: theme.vars.typography.fontSizes.xs,
+				fontWeight: 400,
+				letterSpacing: "0.03333em",
+				lineHeight: 1.66
+			};
+			case "overline": return {
+				fontSize: theme.vars.typography.fontSizes.xs,
+				fontWeight: 400,
+				letterSpacing: "0.08333em",
+				lineHeight: 2.66,
+				textTransform: "uppercase"
+			};
+			case "button": return {
+				fontSize: theme.vars.typography.fontSizes.sm,
+				fontWeight: 500,
+				letterSpacing: "0.02857em",
+				lineHeight: 1.75,
+				textTransform: "uppercase"
+			};
+			default: return {};
+		}
+	};
+	const variantStyles = getVariantStyles(variant);
+	const colorValue = getColorValue(color);
+	const typography = css`
+      margin: 0;
+      font-family: ${theme.vars.typography.fontFamily};
+      color: ${colorValue};
+      text-align: ${align};
+      display: ${inline ? "inline" : "block"};
+      ${variantStyles["fontSize"] ? `font-size: ${variantStyles["fontSize"]};` : ""}
+      ${variantStyles["fontWeight"] ? `font-weight: ${variantStyles["fontWeight"]};` : ""}
+      ${variantStyles["lineHeight"] ? `line-height: ${variantStyles["lineHeight"]};` : ""}
+      ${variantStyles["letterSpacing"] ? `letter-spacing: ${variantStyles["letterSpacing"]};` : ""}
+      ${variantStyles["textTransform"] ? `text-transform: ${variantStyles["textTransform"]};` : ""}
+
+      /* Custom overrides */
+      ${fontWeight ? `font-weight: ${fontWeight} !important;` : ""}
+      ${fontSize ? `font-size: ${typeof fontSize === "number" ? `${fontSize}px` : fontSize} !important;` : ""}
+      ${lineHeight ? `line-height: ${lineHeight} !important;` : ""}
+
+      /* Conditional styles */
+      ${noWrap ? `
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      ` : ""}
+
+      ${gutterBottom ? `
+        margin-bottom: ${theme.spacing.unit}px;
+      ` : ""}
+    `;
+	const typographyNoWrap = css`
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `;
+	const typographyInline = css`
+      display: inline;
+    `;
+	const typographyGutterBottom = css`
+      margin-bottom: ${theme.spacing.unit}px;
+    `;
+	const typographyH1 = css`
+      font-size: ${theme.vars.typography.fontSizes["3xl"]};
+      font-weight: 600;
+      line-height: 1.235;
+      letter-spacing: -0.00735em;
+    `;
+	const typographyH2 = css`
+      font-size: ${theme.vars.typography.fontSizes["2xl"]};
+      font-weight: 600;
+      line-height: 1.334;
+      letter-spacing: 0em;
+    `;
+	const typographyH3 = css`
+      font-size: ${theme.vars.typography.fontSizes.xl};
+      font-weight: 600;
+      line-height: 1.6;
+      letter-spacing: 0.0075em;
+    `;
+	const typographyH4 = css`
+      font-size: ${theme.vars.typography.fontSizes.lg};
+      font-weight: 600;
+      line-height: 1.5;
+      letter-spacing: 0.00938em;
+    `;
+	const typographyH5 = css`
+      font-size: ${theme.vars.typography.fontSizes.md};
+      font-weight: 600;
+      line-height: 1.334;
+      letter-spacing: 0em;
+    `;
+	const typographyH6 = css`
+      font-size: ${theme.vars.typography.fontSizes.sm};
+      font-weight: 500;
+      line-height: 1.6;
+      letter-spacing: 0.0075em;
+    `;
+	const typographySubtitle1 = css`
+      font-size: ${theme.vars.typography.fontSizes.md};
+      font-weight: 400;
+      line-height: 1.75;
+      letter-spacing: 0.00938em;
+    `;
+	const typographySubtitle2 = css`
+      font-size: ${theme.vars.typography.fontSizes.sm};
+      font-weight: 500;
+      line-height: 1.57;
+      letter-spacing: 0.00714em;
+    `;
+	const typographyBody1 = css`
+      font-size: ${theme.vars.typography.fontSizes.md};
+      font-weight: 400;
+      line-height: 1.5;
+      letter-spacing: 0.00938em;
+    `;
+	const typographyBody2 = css`
+      font-size: ${theme.vars.typography.fontSizes.sm};
+      font-weight: 400;
+      line-height: 1.43;
+      letter-spacing: 0.01071em;
+    `;
+	const typographyCaption = css`
+      font-size: ${theme.vars.typography.fontSizes.xs};
+      font-weight: 400;
+      line-height: 1.66;
+      letter-spacing: 0.03333em;
+    `;
+	const typographyOverline = css`
+      font-size: ${theme.vars.typography.fontSizes.xs};
+      font-weight: 400;
+      line-height: 2.66;
+      letter-spacing: 0.08333em;
+      text-transform: uppercase;
+    `;
+	return {
+		typography,
+		typographyBody1,
+		typographyBody2,
+		typographyButton: css`
+      font-size: ${theme.vars.typography.fontSizes.sm};
+      font-weight: 500;
+      line-height: 1.75;
+      letter-spacing: 0.02857em;
+      text-transform: uppercase;
+    `,
+		typographyCaption,
+		typographyGutterBottom,
+		typographyH1,
+		typographyH2,
+		typographyH3,
+		typographyH4,
+		typographyH5,
+		typographyH6,
+		typographyInline,
+		typographyNoWrap,
+		typographyOverline,
+		typographySubtitle1,
+		typographySubtitle2
+	};
+}, [
+	theme,
+	colorScheme,
+	variant,
+	align,
+	color,
+	noWrap,
+	inline,
+	gutterBottom,
+	fontWeight,
+	fontSize,
+	lineHeight
+]);
+var Typography_styles_default = useStyles;
+
+//#endregion
+export { Typography_styles_default as default };
+//# sourceMappingURL=Typography.styles.js.map

package/dist/components/primitives/Typography/Typography.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.styles.js","names":["variantStyles: Record<string, string | number>","colorValue: string","typography: string","typographyNoWrap: string","typographyInline: string","typographyGutterBottom: string","typographyH1: string","typographyH2: string","typographyH3: string","typographyH4: string","typographyH5: string","typographyH6: string","typographySubtitle1: string","typographySubtitle2: string","typographyBody1: string","typographyBody2: string","typographyCaption: string","typographyOverline: string"],"sources":["../../../../src/components/primitives/Typography/Typography.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 TypographyVariant =\n  | 'h1'\n  | 'h2'\n  | 'h3'\n  | 'h4'\n  | 'h5'\n  | 'h6'\n  | 'subtitle1'\n  | 'subtitle2'\n  | 'body1'\n  | 'body2'\n  | 'caption'\n  | 'overline'\n  | 'button';\n\nexport type TypographyAlign = 'left' | 'center' | 'right' | 'justify';\n\nexport type TypographyColor =\n  | 'primary'\n  | 'secondary'\n  | 'error'\n  | 'success'\n  | 'warning'\n  | 'info'\n  | 'textPrimary'\n  | 'textSecondary'\n  | 'inherit';\n\n/**\n * Creates styles for the Typography 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 typography variant\n * @param align - Text alignment\n * @param color - Color variant\n * @param noWrap - Whether text should be truncated with ellipsis\n * @param inline - Whether text should be displayed inline\n * @param gutterBottom - Whether to add bottom margin\n * @param fontWeight - Custom font weight\n * @param fontSize - Custom font size\n * @param lineHeight - Custom line height\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  variant: TypographyVariant,\n  align: TypographyAlign,\n  color: TypographyColor,\n  noWrap: boolean,\n  inline: boolean,\n  gutterBottom: boolean,\n  fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold' | number,\n  fontSize?: string | number,\n  lineHeight?: string | number,\n): Record<string, string> =>\n  useMemo(() => {\n    const getColorValue = (colorVariant: TypographyColor): string => {\n      switch (colorVariant) {\n        case 'primary':\n          return theme.colors.primary.main;\n        case 'secondary':\n          return theme.colors.secondary.main;\n        case 'error':\n          return theme.colors.error.main;\n        case 'textPrimary':\n          return theme.colors.text.primary;\n        case 'textSecondary':\n          return theme.colors.text.secondary;\n        case 'inherit':\n          return 'inherit';\n        default:\n          return theme.colors.text.primary;\n      }\n    };\n\n    const getVariantStyles = (variantName: TypographyVariant): Record<string, string | number> => {\n      switch (variantName) {\n        case 'h1':\n          return {\n            fontSize: theme.vars.typography.fontSizes['3xl'],\n            fontWeight: 600,\n            letterSpacing: '-0.00735em',\n            lineHeight: 1.235,\n          };\n        case 'h2':\n          return {\n            fontSize: theme.vars.typography.fontSizes['2xl'],\n            fontWeight: 600,\n            letterSpacing: '0em',\n            lineHeight: 1.334,\n          };\n        case 'h3':\n          return {\n            fontSize: theme.vars.typography.fontSizes.xl,\n            fontWeight: 600,\n            letterSpacing: '0.0075em',\n            lineHeight: 1.6,\n          };\n        case 'h4':\n          return {\n            fontSize: theme.vars.typography.fontSizes.lg,\n            fontWeight: 600,\n            letterSpacing: '0.00938em',\n            lineHeight: 1.5,\n          };\n        case 'h5':\n          return {\n            fontSize: theme.vars.typography.fontSizes.md,\n            fontWeight: 600,\n            letterSpacing: '0em',\n            lineHeight: 1.334,\n          };\n        case 'h6':\n          return {\n            fontSize: theme.vars.typography.fontSizes.sm,\n            fontWeight: 500,\n            letterSpacing: '0.0075em',\n            lineHeight: 1.6,\n          };\n        case 'subtitle1':\n          return {\n            fontSize: theme.vars.typography.fontSizes.md,\n            fontWeight: 400,\n            letterSpacing: '0.00938em',\n            lineHeight: 1.75,\n          };\n        case 'subtitle2':\n          return {\n            fontSize: theme.vars.typography.fontSizes.sm,\n            fontWeight: 500,\n            letterSpacing: '0.00714em',\n            lineHeight: 1.57,\n          };\n        case 'body1':\n          return {\n            fontSize: theme.vars.typography.fontSizes.md,\n            fontWeight: 400,\n            letterSpacing: '0.00938em',\n            lineHeight: 1.5,\n          };\n        case 'body2':\n          return {\n            fontSize: theme.vars.typography.fontSizes.sm,\n            fontWeight: 400,\n            letterSpacing: '0.01071em',\n            lineHeight: 1.43,\n          };\n        case 'caption':\n          return {\n            fontSize: theme.vars.typography.fontSizes.xs,\n            fontWeight: 400,\n            letterSpacing: '0.03333em',\n            lineHeight: 1.66,\n          };\n        case 'overline':\n          return {\n            fontSize: theme.vars.typography.fontSizes.xs,\n            fontWeight: 400,\n            letterSpacing: '0.08333em',\n            lineHeight: 2.66,\n            textTransform: 'uppercase' as const,\n          };\n        case 'button':\n          return {\n            fontSize: theme.vars.typography.fontSizes.sm,\n            fontWeight: 500,\n            letterSpacing: '0.02857em',\n            lineHeight: 1.75,\n            textTransform: 'uppercase' as const,\n          };\n        default:\n          return {};\n      }\n    };\n\n    const variantStyles: Record<string, string | number> = getVariantStyles(variant);\n    const colorValue: string = getColorValue(color);\n\n    const typography: string = css`\n      margin: 0;\n      font-family: ${theme.vars.typography.fontFamily};\n      color: ${colorValue};\n      text-align: ${align};\n      display: ${inline ? 'inline' : 'block'};\n      ${variantStyles['fontSize'] ? `font-size: ${variantStyles['fontSize']};` : ''}\n      ${variantStyles['fontWeight'] ? `font-weight: ${variantStyles['fontWeight']};` : ''}\n      ${variantStyles['lineHeight'] ? `line-height: ${variantStyles['lineHeight']};` : ''}\n      ${variantStyles['letterSpacing'] ? `letter-spacing: ${variantStyles['letterSpacing']};` : ''}\n      ${variantStyles['textTransform'] ? `text-transform: ${variantStyles['textTransform']};` : ''}\n\n      /* Custom overrides */\n      ${fontWeight ? `font-weight: ${fontWeight} !important;` : ''}\n      ${fontSize ? `font-size: ${typeof fontSize === 'number' ? `${fontSize}px` : fontSize} !important;` : ''}\n      ${lineHeight ? `line-height: ${lineHeight} !important;` : ''}\n\n      /* Conditional styles */\n      ${noWrap\n        ? `\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      `\n        : ''}\n\n      ${gutterBottom\n        ? `\n        margin-bottom: ${theme.spacing.unit}px;\n      `\n        : ''}\n    `;\n\n    const typographyNoWrap: string = css`\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    `;\n\n    const typographyInline: string = css`\n      display: inline;\n    `;\n\n    const typographyGutterBottom: string = css`\n      margin-bottom: ${theme.spacing.unit}px;\n    `;\n\n    const typographyH1: string = css`\n      font-size: ${theme.vars.typography.fontSizes['3xl']};\n      font-weight: 600;\n      line-height: 1.235;\n      letter-spacing: -0.00735em;\n    `;\n\n    const typographyH2: string = css`\n      font-size: ${theme.vars.typography.fontSizes['2xl']};\n      font-weight: 600;\n      line-height: 1.334;\n      letter-spacing: 0em;\n    `;\n\n    const typographyH3: string = css`\n      font-size: ${theme.vars.typography.fontSizes.xl};\n      font-weight: 600;\n      line-height: 1.6;\n      letter-spacing: 0.0075em;\n    `;\n\n    const typographyH4: string = css`\n      font-size: ${theme.vars.typography.fontSizes.lg};\n      font-weight: 600;\n      line-height: 1.5;\n      letter-spacing: 0.00938em;\n    `;\n\n    const typographyH5: string = css`\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-weight: 600;\n      line-height: 1.334;\n      letter-spacing: 0em;\n    `;\n\n    const typographyH6: string = css`\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-weight: 500;\n      line-height: 1.6;\n      letter-spacing: 0.0075em;\n    `;\n\n    const typographySubtitle1: string = css`\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-weight: 400;\n      line-height: 1.75;\n      letter-spacing: 0.00938em;\n    `;\n\n    const typographySubtitle2: string = css`\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-weight: 500;\n      line-height: 1.57;\n      letter-spacing: 0.00714em;\n    `;\n\n    const typographyBody1: string = css`\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-weight: 400;\n      line-height: 1.5;\n      letter-spacing: 0.00938em;\n    `;\n\n    const typographyBody2: string = css`\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-weight: 400;\n      line-height: 1.43;\n      letter-spacing: 0.01071em;\n    `;\n\n    const typographyCaption: string = css`\n      font-size: ${theme.vars.typography.fontSizes.xs};\n      font-weight: 400;\n      line-height: 1.66;\n      letter-spacing: 0.03333em;\n    `;\n\n    const typographyOverline: string = css`\n      font-size: ${theme.vars.typography.fontSizes.xs};\n      font-weight: 400;\n      line-height: 2.66;\n      letter-spacing: 0.08333em;\n      text-transform: uppercase;\n    `;\n\n    const typographyButton: string = css`\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-weight: 500;\n      line-height: 1.75;\n      letter-spacing: 0.02857em;\n      text-transform: uppercase;\n    `;\n\n    return {\n      typography,\n      typographyBody1,\n      typographyBody2,\n      typographyButton,\n      typographyCaption,\n      typographyGutterBottom,\n      typographyH1,\n      typographyH2,\n      typographyH3,\n      typographyH4,\n      typographyH5,\n      typographyH6,\n      typographyInline,\n      typographyNoWrap,\n      typographyOverline,\n      typographySubtitle1,\n      typographySubtitle2,\n    };\n  }, [theme, colorScheme, variant, align, color, noWrap, inline, gutterBottom, fontWeight, fontSize, lineHeight]);\n\nexport default useStyles;\n"],"mappings":"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"}

package/dist/contexts/Branding/BrandingContext.js

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+
+//#region src/contexts/Branding/BrandingContext.ts
+const BrandingContext = createContext(null);
+BrandingContext.displayName = "BrandingContext";
+var BrandingContext_default = BrandingContext;
+
+//#endregion
+export { BrandingContext_default as default };
+//# sourceMappingURL=BrandingContext.js.map

package/dist/contexts/Branding/BrandingContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BrandingContext.js","names":["BrandingContext: Context<BrandingContextValue | null>"],"sources":["../../../src/contexts/Branding/BrandingContext.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 {BrandingPreference, Theme} from '@thunderid/browser';\nimport {Context, createContext} from 'react';\n\nexport interface BrandingContextValue {\n  /**\n   * The active theme mode from branding preference ('light' | 'dark')\n   */\n  activeTheme: 'light' | 'dark' | null;\n  /**\n   * The raw branding preference data\n   */\n  brandingPreference: BrandingPreference | null;\n  /**\n   * Error state\n   */\n  error: Error | null;\n  /**\n   * Function to manually fetch branding preference\n   */\n  fetchBranding: () => Promise<void>;\n  /**\n   * Loading state\n   */\n  isLoading: boolean;\n  /**\n   * Function to refetch branding preference\n   * This bypasses the single-call restriction and forces a new API call\n   */\n  refetch: () => Promise<void>;\n  /**\n   * The transformed theme object\n   */\n  theme: Theme | null;\n}\n\nconst BrandingContext: Context<BrandingContextValue | null> = createContext<BrandingContextValue | null>(null);\n\nBrandingContext.displayName = 'BrandingContext';\n\nexport default BrandingContext;\n"],"mappings":";;;AAqDA,MAAMA,kBAAwD,cAA2C,KAAK;AAE9G,gBAAgB,cAAc;AAE9B,8BAAe"}