@thunderid/react 0.1.0 → 0.3.0

package/dist/components/primitives/Card/Card.js

@@ -0,0 +1,173 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import Typography_default from "../Typography/Typography.js";
+import Card_styles_default from "./Card.styles.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/primitives/Card/Card.tsx
+/**
+* Card component that provides a flexible container for content.
+*
+* @example
+* ```tsx
+* <Card variant="elevated" clickable>
+*   <Card.Header>
+*     <Card.Title>Card Title</Card.Title>
+*     <Card.Description>Card Description</Card.Description>
+*     <Card.Action>
+*       <Button variant="link">Action</Button>
+*     </Card.Action>
+*   </Card.Header>
+*   <Card.Content>
+*     <p>Card content goes here</p>
+*   </Card.Content>
+*   <Card.Footer>
+*     <Button>Cancel</Button>
+*     <Button variant="outline">Submit</Button>
+*   </Card.Footer>
+* </Card>
+* ```
+*/
+const Card = forwardRef(({ variant = "default", clickable = false, children, className, style,...rest }, ref) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = Card_styles_default(theme, colorScheme, variant, clickable);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		style,
+		className: cx(withVendorCSSClassPrefix(bem("card")), styles["card"], styles["variant"], styles["clickable"], withVendorCSSClassPrefix(bem("card", null, variant)), { [withVendorCSSClassPrefix(bem("card", null, "clickable"))]: clickable }, className),
+		...rest,
+		children
+	});
+});
+/**
+* Card header component that contains the title, description, and optional actions.
+*/
+const CardHeader = forwardRef(({ children, className, style,...rest }, ref) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = Card_styles_default(theme, colorScheme, "default", false);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		style,
+		className: cx(withVendorCSSClassPrefix(bem("card", "header")), styles["header"], className),
+		...rest,
+		children
+	});
+});
+/**
+* Card title component.
+*/
+const CardTitle = ({ children, level = 3, className, style,...rest }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = Card_styles_default(theme, colorScheme, "default", false);
+	const getVariantFromLevel = (lvl) => {
+		switch (lvl) {
+			case 1: return "h1";
+			case 2: return "h2";
+			case 3: return "h3";
+			case 4: return "h4";
+			case 5: return "h5";
+			case 6: return "h6";
+			default: return "h3";
+		}
+	};
+	const getComponentFromLevel = (lvl) => {
+		switch (lvl) {
+			case 1: return "h1";
+			case 2: return "h2";
+			case 3: return "h3";
+			case 4: return "h4";
+			case 5: return "h5";
+			case 6: return "h6";
+			default: return "h3";
+		}
+	};
+	const { color,...filteredRest } = rest;
+	return /* @__PURE__ */ jsx(Typography_default, {
+		component: getComponentFromLevel(level),
+		variant: getVariantFromLevel(level),
+		style,
+		className: cx(withVendorCSSClassPrefix(bem("card", "title")), styles["title"], className),
+		fontWeight: 600,
+		...filteredRest,
+		children
+	});
+};
+/**
+* Card description component.
+*/
+const CardDescription = ({ children, className, style,...rest }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = Card_styles_default(theme, colorScheme, "default", false);
+	const { color,...filteredRest } = rest;
+	return /* @__PURE__ */ jsx(Typography_default, {
+		component: "p",
+		variant: "body2",
+		color: "textSecondary",
+		style,
+		className: cx(withVendorCSSClassPrefix(bem("card", "description")), styles["description"], className),
+		...filteredRest,
+		children
+	});
+};
+/**
+* Card action component for action elements in the header.
+*/
+const CardAction = forwardRef(({ children, className, style,...rest }, ref) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = Card_styles_default(theme, colorScheme, "default", false);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		style,
+		className: cx(withVendorCSSClassPrefix(bem("card", "action")), styles["action"], className),
+		...rest,
+		children
+	});
+});
+/**
+* Card content component that contains the main content of the card.
+*/
+const CardContent = forwardRef(({ children, className, style,...rest }, ref) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = Card_styles_default(theme, colorScheme, "default", false);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		style,
+		className: cx(withVendorCSSClassPrefix(bem("card", "content")), styles["content"], className),
+		...rest,
+		children
+	});
+});
+/**
+* Card footer component that contains footer actions or additional information.
+*/
+const CardFooter = forwardRef(({ children, className, style,...rest }, ref) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = Card_styles_default(theme, colorScheme, "default", false);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		style,
+		className: cx(withVendorCSSClassPrefix(bem("card", "footer")), styles["footer"], className),
+		...rest,
+		children
+	});
+});
+Card.displayName = "Card";
+CardHeader.displayName = "Card.Header";
+CardTitle.displayName = "Card.Title";
+CardDescription.displayName = "Card.Description";
+CardAction.displayName = "Card.Action";
+CardContent.displayName = "Card.Content";
+CardFooter.displayName = "Card.Footer";
+Card.Header = CardHeader;
+Card.Title = CardTitle;
+Card.Description = CardDescription;
+Card.Action = CardAction;
+Card.Content = CardContent;
+Card.Footer = CardFooter;
+var Card_default = Card;
+
+//#endregion
+export { Card_default as default };
+//# sourceMappingURL=Card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","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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"}

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

@@ -0,0 +1,97 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/primitives/Card/Card.styles.ts
+/**
+* Creates styles for the Card component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param variant - The card variant
+* @param clickable - Whether the card is clickable
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, variant, clickable) => useMemo(() => {
+	const baseCard = css`
+      border-radius: ${theme.vars.borderRadius.medium};
+      background-color: ${theme.vars.colors.background.surface};
+      font-family: ${theme.vars.typography.fontFamily};
+      transition: all 0.2s ease-in-out;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      padding: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	const variantStyles = {
+		default: css`
+        /* Base styles only */
+      `,
+		elevated: css`
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        border: none;
+      `,
+		outlined: css`
+        border: 1px solid ${theme.vars.colors.border};
+      `
+	};
+	const clickableStyles = css`
+      cursor: pointer;
+
+      &:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+    `;
+	const headerStyles = css`
+      padding: 0 calc(${theme.vars.spacing.unit} * 2);
+      margin-top: calc(${theme.vars.spacing.unit} * 2);
+      display: flex;
+      flex-direction: column;
+      gap: ${theme.vars.spacing.unit};
+    `;
+	const titleStyles = css`
+      margin: 0;
+      /* Typography component will handle color, fontSize, fontWeight, lineHeight */
+    `;
+	const descriptionStyles = css`
+      margin: 0;
+      color: ${theme.vars.colors.text.secondary};
+      font-size: ${theme.vars.typography.fontSizes.sm};
+      line-height: 1.5;
+    `;
+	const actionStyles = css`
+      margin-top: ${theme.vars.spacing.unit};
+    `;
+	const contentStyles = css`
+      padding: 0 calc(${theme.vars.spacing.unit} * 2);
+      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
+      flex: 1;
+    `;
+	const footerStyles = css`
+      padding: 0 calc(${theme.vars.spacing.unit} * 2) calc(${theme.vars.spacing.unit} * 2);
+      display: flex;
+      align-items: center;
+      gap: ${theme.vars.spacing.unit};
+    `;
+	return {
+		action: actionStyles,
+		card: baseCard,
+		clickable: clickable ? clickableStyles : "",
+		content: contentStyles,
+		description: descriptionStyles,
+		footer: footerStyles,
+		header: headerStyles,
+		title: titleStyles,
+		variant: variantStyles[variant]
+	};
+}, [
+	theme,
+	colorScheme,
+	variant,
+	clickable
+]);
+var Card_styles_default = useStyles;
+
+//#endregion
+export { Card_styles_default as default };
+//# sourceMappingURL=Card.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.styles.js","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,cAEA,cAAc;CACZ,MAAMA,WAAmB,GAAG;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,GAAG;;;EAGZ,UAAU,GAAG;;;;EAIb,UAAU,GAAG;4BACS,MAAM,KAAK,OAAO,OAAO;;EAEhD;CAED,MAAMC,kBAA0B,GAAG;;;;;;;;CASnC,MAAMC,eAAuB,GAAG;wBACZ,MAAM,KAAK,QAAQ,KAAK;yBACvB,MAAM,KAAK,QAAQ,KAAK;;;aAGpC,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,cAAsB,GAAG;;;;CAK/B,MAAMC,oBAA4B,GAAG;;eAE1B,MAAM,KAAK,OAAO,KAAK,UAAU;mBAC7B,MAAM,KAAK,WAAW,UAAU,GAAG;;;CAIlD,MAAMC,eAAuB,GAAG;oBAChB,MAAM,KAAK,QAAQ,KAAK;;CAGxC,MAAMC,gBAAwB,GAAG;wBACb,MAAM,KAAK,QAAQ,KAAK;4BACpB,MAAM,KAAK,QAAQ,KAAK;;;CAIhD,MAAMC,eAAuB,GAAG;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/components/primitives/Checkbox/Checkbox.js

@@ -0,0 +1,42 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import Checkbox_styles_default from "./Checkbox.styles.js";
+import FormControl_default from "../FormControl/FormControl.js";
+import InputLabel_default from "../InputLabel/InputLabel.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/primitives/Checkbox/Checkbox.tsx
+const Checkbox = ({ label, error, className, required, helperText, style = {},...rest }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const hasError = !!error;
+	const styles = Checkbox_styles_default(theme, colorScheme, hasError, !!required);
+	return /* @__PURE__ */ jsx(FormControl_default, {
+		error,
+		helperText,
+		className: cx(withVendorCSSClassPrefix(bem("checkbox")), className),
+		helperTextMarginLeft: `calc(${theme.vars.spacing.unit} * 3.5)`,
+		children: /* @__PURE__ */ jsxs("div", {
+			style,
+			className: cx(withVendorCSSClassPrefix(bem("checkbox", "container")), styles["container"]),
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "checkbox",
+				className: cx(withVendorCSSClassPrefix(bem("checkbox", "input")), styles["input"], styles["errorInput"], { [withVendorCSSClassPrefix(bem("checkbox", "input", "error"))]: hasError }),
+				"aria-invalid": hasError,
+				"aria-required": required,
+				...rest
+			}), label && /* @__PURE__ */ jsx(InputLabel_default, {
+				required,
+				error: hasError,
+				variant: "inline",
+				className: cx(withVendorCSSClassPrefix(bem("checkbox", "label")), styles["label"], styles["errorLabel"], { [withVendorCSSClassPrefix(bem("checkbox", "label", "error"))]: hasError }),
+				children: label
+			})]
+		})
+	});
+};
+var Checkbox_default = Checkbox;
+
+//#endregion
+export { Checkbox_default as default };
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","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,kBAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,wBAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,oBAACC;EACQ;EACK;EACZ,WAAW,GAAG,yBAAyB,IAAI,WAAW,CAAC,EAAE,UAAU;EACnE,sBAAsB,QAAQ,MAAM,KAAK,QAAQ,KAAK;YAEtD,qBAAC;GAAW;GAAO,WAAW,GAAG,yBAAyB,IAAI,YAAY,YAAY,CAAC,EAAE,OAAO,aAAa;cAC3G,oBAAC;IACC,MAAK;IACL,WAAW,GAAG,yBAAyB,IAAI,YAAY,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,GACtG,yBAAyB,IAAI,YAAY,SAAS,QAAQ,CAAC,GAAG,UAChE,CAAC;IACF,gBAAc;IACd,iBAAe;IACf,GAAI;KACJ,EACD,SACC,oBAACC;IACW;IACV,OAAO;IACP,SAAQ;IACR,WAAW,GAAG,yBAAyB,IAAI,YAAY,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,GACtG,yBAAyB,IAAI,YAAY,SAAS,QAAQ,CAAC,GAAG,UAChE,CAAC;cAED;KACU;IAEX;GACM;;AAIlB,uBAAe"}

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

@@ -0,0 +1,76 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/primitives/Checkbox/Checkbox.styles.ts
+/**
+* Creates styles for the Checkbox component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param hasError - Whether the checkbox has an error state
+* @param required - Whether the checkbox is required
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, hasError, required) => useMemo(() => {
+	const containerStyles = css`
+      display: flex;
+      align-items: center;
+    `;
+	const inputStyles = css`
+      width: calc(${theme.vars.spacing.unit} * 2.5);
+      height: calc(${theme.vars.spacing.unit} * 2.5);
+      margin-inline-end: ${theme.vars.spacing.unit};
+      accent-color: ${theme.vars.colors.primary.main};
+      cursor: pointer;
+
+      &:focus {
+        outline: 2px solid ${theme.vars.colors.primary.main};
+        outline-offset: 2px;
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+    `;
+	const errorInputStyles = css`
+      accent-color: ${theme.vars.colors.error.main};
+
+      &:focus {
+        outline-color: ${theme.vars.colors.error.main};
+      }
+    `;
+	const labelStyles = css`
+      color: ${theme.vars.colors.text.primary};
+      font-size: ${theme.vars.typography.fontSizes.sm};
+      font-family: ${theme.vars.typography.fontFamily};
+      cursor: pointer;
+
+      &:hover {
+        color: ${theme.vars.colors.text.primary};
+      }
+    `;
+	const errorLabelStyles = css`
+      color: ${theme.vars.colors.error.main};
+    `;
+	const requiredStyles = css`
+      /* Required indicator styles will be handled by InputLabel */
+    `;
+	return {
+		container: containerStyles,
+		errorInput: hasError ? errorInputStyles : "",
+		errorLabel: hasError ? errorLabelStyles : "",
+		input: inputStyles,
+		label: labelStyles,
+		required: required ? requiredStyles : ""
+	};
+}, [
+	theme,
+	colorScheme,
+	hasError,
+	required
+]);
+var Checkbox_styles_default = useStyles;
+
+//#endregion
+export { Checkbox_styles_default as default };
+//# sourceMappingURL=Checkbox.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.styles.js","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,aACvE,cAAc;CACZ,MAAMA,kBAA0B,GAAG;;;;CAKnC,MAAMC,cAAsB,GAAG;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,GAAG;sBAClB,MAAM,KAAK,OAAO,MAAM,KAAK;;;yBAG1B,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIlD,MAAMC,cAAsB,GAAG;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,GAAG;eACzB,MAAM,KAAK,OAAO,MAAM,KAAK;;CAGxC,MAAMC,iBAAyB,GAAG;;;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"}

package/dist/components/primitives/CopyableText/CopyableText.js

@@ -0,0 +1,60 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import Button_default from "../Button/Button.js";
+import CopyableText_styles_default from "./CopyableText.styles.js";
+import { useCallback, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/primitives/CopyableText/CopyableText.tsx
+/**
+* A React component that displays a text value with an optional label and a button to copy the value to
+* the clipboard. When the button is clicked, it attempts to copy the value using the Clipboard API, and
+* falls back to a textarea method if the API is not supported.
+* After copying, it shows a "Copied!" message for 3 seconds before resetting.
+*/
+const CopyableText = ({ label, value }) => {
+	const { theme } = useTheme_default();
+	const styles = CopyableText_styles_default(theme);
+	const { t } = useTranslation_default();
+	const [copied, setCopied] = useState(false);
+	const handleCopy = useCallback(async () => {
+		try {
+			await navigator.clipboard.writeText(value);
+		} catch {
+			const textArea = document.createElement("textarea");
+			textArea.value = value;
+			document.body.appendChild(textArea);
+			textArea.select();
+			document.execCommand("copy");
+			document.body.removeChild(textArea);
+		}
+		setCopied(true);
+		setTimeout(() => setCopied(false), 3e3);
+	}, [value]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: styles["container"],
+		children: [label && /* @__PURE__ */ jsx("span", {
+			className: styles["label"],
+			children: label
+		}), /* @__PURE__ */ jsxs("div", {
+			className: styles["valueBox"],
+			children: [/* @__PURE__ */ jsx("span", {
+				className: styles["valueText"],
+				children: value
+			}), /* @__PURE__ */ jsx(Button_default, {
+				variant: "outline",
+				size: "small",
+				className: styles["copyButton"],
+				onClick: () => {
+					handleCopy().catch(() => void 0);
+				},
+				children: copied ? t("elements.display.copyable_text.copied") : t("elements.display.copyable_text.copy")
+			})]
+		})]
+	});
+};
+var CopyableText_default = CopyableText;
+
+//#endregion
+export { CopyableText_default as default };
+//# sourceMappingURL=CopyableText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyableText.js","names":["CopyableText: FC<CopyableTextProps>","useTheme","styles: Record<string, string>","useStyles","useTranslation","handleCopy: ReturnType<typeof useCallback>","textArea: HTMLTextAreaElement","Button"],"sources":["../../../../src/components/primitives/CopyableText/CopyableText.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 {FC, ReactElement, useCallback, useState} from 'react';\nimport useStyles from './CopyableText.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport Button from '../Button/Button';\n\nexport interface CopyableTextProps {\n  /**\n   * Optional label displayed above the value box.\n   */\n  label?: string;\n  /**\n   * The text value to display and copy.\n   */\n  value: string;\n}\n\n/**\n * A React component that displays a text value with an optional label and a button to copy the value to\n * the clipboard. When the button is clicked, it attempts to copy the value using the Clipboard API, and\n * falls back to a textarea method if the API is not supported.\n * After copying, it shows a \"Copied!\" message for 3 seconds before resetting.\n */\nconst CopyableText: FC<CopyableTextProps> = ({label, value}: CopyableTextProps): ReactElement => {\n  const {theme} = useTheme();\n  const styles: Record<string, string> = useStyles(theme);\n  const {t} = useTranslation();\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy: ReturnType<typeof useCallback> = useCallback(async (): Promise<void> => {\n    try {\n      await navigator.clipboard.writeText(value);\n    } catch {\n      const textArea: HTMLTextAreaElement = document.createElement('textarea');\n      textArea.value = value;\n      document.body.appendChild(textArea);\n      textArea.select();\n      document.execCommand('copy');\n      document.body.removeChild(textArea);\n    }\n    setCopied(true);\n    setTimeout(() => setCopied(false), 3000);\n  }, [value]);\n\n  return (\n    <div className={styles['container']}>\n      {label && <span className={styles['label']}>{label}</span>}\n      <div className={styles['valueBox']}>\n        <span className={styles['valueText']}>{value}</span>\n        <Button\n          variant=\"outline\"\n          size=\"small\"\n          className={styles['copyButton']}\n          onClick={() => {\n            handleCopy().catch(() => undefined);\n          }}\n        >\n          {copied ? t('elements.display.copyable_text.copied') : t('elements.display.copyable_text.copy')}\n        </Button>\n      </div>\n    </div>\n  );\n};\n\nexport default CopyableText;\n"],"mappings":";;;;;;;;;;;;;;AAyCA,MAAMA,gBAAuC,EAAC,OAAO,YAA4C;CAC/F,MAAM,EAAC,UAASC,kBAAU;CAC1B,MAAMC,SAAiCC,4BAAU,MAAM;CACvD,MAAM,EAAC,MAAKC,wBAAgB;CAC5B,MAAM,CAAC,QAAQ,aAAa,SAAS,MAAM;CAE3C,MAAMC,aAA6C,YAAY,YAA2B;AACxF,MAAI;AACF,SAAM,UAAU,UAAU,UAAU,MAAM;UACpC;GACN,MAAMC,WAAgC,SAAS,cAAc,WAAW;AACxE,YAAS,QAAQ;AACjB,YAAS,KAAK,YAAY,SAAS;AACnC,YAAS,QAAQ;AACjB,YAAS,YAAY,OAAO;AAC5B,YAAS,KAAK,YAAY,SAAS;;AAErC,YAAU,KAAK;AACf,mBAAiB,UAAU,MAAM,EAAE,IAAK;IACvC,CAAC,MAAM,CAAC;AAEX,QACE,qBAAC;EAAI,WAAW,OAAO;aACpB,SAAS,oBAAC;GAAK,WAAW,OAAO;aAAW;IAAa,EAC1D,qBAAC;GAAI,WAAW,OAAO;cACrB,oBAAC;IAAK,WAAW,OAAO;cAAe;KAAa,EACpD,oBAACC;IACC,SAAQ;IACR,MAAK;IACL,WAAW,OAAO;IAClB,eAAe;AACb,iBAAY,CAAC,YAAY,OAAU;;cAGpC,SAAS,EAAE,wCAAwC,GAAG,EAAE,sCAAsC;KACxF;IACL;GACF;;AAIV,2BAAe"}

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

@@ -0,0 +1,45 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/primitives/CopyableText/CopyableText.styles.ts
+const useStyles = (theme) => useMemo(() => ({
+	container: css`
+        display: flex;
+        flex-direction: column;
+        gap: calc(${theme.vars.spacing.unit} * 0.5);
+        width: 100%;
+      `,
+	copyButton: css`
+        flex-shrink: 0;
+        white-space: nowrap;
+      `,
+	label: css`
+        color: ${theme.vars.colors.text.secondary};
+        font-size: 0.875rem;
+        font-weight: 500;
+      `,
+	valueBox: css`
+        align-items: center;
+        background-color: ${theme.vars.colors.background.surface};
+        border: 1px solid ${theme.vars.colors.border};
+        border-radius: ${theme.vars.borderRadius.small};
+        display: flex;
+        gap: calc(${theme.vars.spacing.unit} * 1);
+        padding: calc(${theme.vars.spacing.unit} * 0.75) calc(${theme.vars.spacing.unit} * 1);
+      `,
+	valueText: css`
+        color: ${theme.vars.colors.text.primary};
+        flex: 1;
+        font-family: monospace;
+        font-size: 0.85rem;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        word-break: break-all;
+      `
+}), [theme]);
+var CopyableText_styles_default = useStyles;
+
+//#endregion
+export { CopyableText_styles_default as default };
+//# sourceMappingURL=CopyableText.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyableText.styles.js","names":[],"sources":["../../../../src/components/primitives/CopyableText/CopyableText.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): Record<string, string> =>\n  useMemo(\n    () => ({\n      container: css`\n        display: flex;\n        flex-direction: column;\n        gap: calc(${theme.vars.spacing.unit} * 0.5);\n        width: 100%;\n      `,\n      copyButton: css`\n        flex-shrink: 0;\n        white-space: nowrap;\n      `,\n      label: css`\n        color: ${theme.vars.colors.text.secondary};\n        font-size: 0.875rem;\n        font-weight: 500;\n      `,\n      valueBox: css`\n        align-items: center;\n        background-color: ${theme.vars.colors.background.surface};\n        border: 1px solid ${theme.vars.colors.border};\n        border-radius: ${theme.vars.borderRadius.small};\n        display: flex;\n        gap: calc(${theme.vars.spacing.unit} * 1);\n        padding: calc(${theme.vars.spacing.unit} * 0.75) calc(${theme.vars.spacing.unit} * 1);\n      `,\n      valueText: css`\n        color: ${theme.vars.colors.text.primary};\n        flex: 1;\n        font-family: monospace;\n        font-size: 0.85rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        word-break: break-all;\n      `,\n    }),\n    [theme],\n  );\n\nexport default useStyles;\n"],"mappings":";;;;AAsBA,MAAM,aAAa,UACjB,eACS;CACL,WAAW,GAAG;;;oBAGA,MAAM,KAAK,QAAQ,KAAK;;;CAGtC,YAAY,GAAG;;;;CAIf,OAAO,GAAG;iBACC,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAI5C,UAAU,GAAG;;4BAES,MAAM,KAAK,OAAO,WAAW,QAAQ;4BACrC,MAAM,KAAK,OAAO,OAAO;yBAC5B,MAAM,KAAK,aAAa,MAAM;;oBAEnC,MAAM,KAAK,QAAQ,KAAK;wBACpB,MAAM,KAAK,QAAQ,KAAK,gBAAgB,MAAM,KAAK,QAAQ,KAAK;;CAElF,WAAW,GAAG;iBACH,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;;;;CAS3C,GACD,CAAC,MAAM,CACR;AAEH,kCAAe"}

package/dist/components/primitives/DatePicker/DatePicker.js

@@ -0,0 +1,43 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import FormControl_default from "../FormControl/FormControl.js";
+import InputLabel_default from "../InputLabel/InputLabel.js";
+import DatePicker_styles_default from "./DatePicker.styles.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/primitives/DatePicker/DatePicker.tsx
+const DatePicker = ({ label, error, className, required, disabled, helperText, dateFormat = "yyyy-MM-dd", style = {},...rest }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const hasError = !!error;
+	const styles = DatePicker_styles_default(theme, colorScheme, hasError, !!disabled);
+	return /* @__PURE__ */ jsxs(FormControl_default, {
+		error,
+		helperText,
+		className: cx(withVendorCSSClassPrefix(bem("date-picker")), className),
+		style,
+		children: [label && /* @__PURE__ */ jsx(InputLabel_default, {
+			required,
+			error: hasError,
+			className: cx(withVendorCSSClassPrefix(bem("date-picker", "label")), styles["label"]),
+			children: label
+		}), /* @__PURE__ */ jsx("input", {
+			type: "date",
+			pattern: "\\d{4}-\\d{2}-\\d{2}",
+			placeholder: dateFormat,
+			className: cx(withVendorCSSClassPrefix(bem("date-picker", "input")), styles["input"], styles["errorInput"], styles["disabledInput"], {
+				[withVendorCSSClassPrefix(bem("date-picker", "input", "error"))]: hasError,
+				[withVendorCSSClassPrefix(bem("date-picker", "input", "disabled"))]: disabled
+			}),
+			disabled,
+			"aria-invalid": hasError,
+			"aria-required": required,
+			...rest
+		})]
+	});
+};
+var DatePicker_default = DatePicker;
+
+//#endregion
+export { DatePicker_default as default };
+//# sourceMappingURL=DatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","names":["DatePicker: FC<DatePickerProps>","useTheme","styles: Record<string, string>","useStyles","FormControl","InputLabel"],"sources":["../../../../src/components/primitives/DatePicker/DatePicker.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 './DatePicker.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Custom date format for the regex pattern\n   */\n  dateFormat?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Error message to display below the input\n   */\n  error?: string;\n  /**\n   * Helper text to display below the input\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the input\n   */\n  label?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n}\n\nconst DatePicker: FC<DatePickerProps> = ({\n  label,\n  error,\n  className,\n  required,\n  disabled,\n  helperText,\n  dateFormat = 'yyyy-MM-dd',\n  style = {},\n  ...rest\n}: DatePickerProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, hasError, !!disabled);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('date-picker')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel\n          required={required}\n          error={hasError}\n          className={cx(withVendorCSSClassPrefix(bem('date-picker', 'label')), styles['label'])}\n        >\n          {label}\n        </InputLabel>\n      )}\n      <input\n        type=\"date\"\n        pattern=\"\\d{4}-\\d{2}-\\d{2}\"\n        placeholder={dateFormat}\n        className={cx(\n          withVendorCSSClassPrefix(bem('date-picker', 'input')),\n          styles['input'],\n          styles['errorInput'],\n          styles['disabledInput'],\n          {\n            [withVendorCSSClassPrefix(bem('date-picker', 'input', 'error'))]: hasError,\n            [withVendorCSSClassPrefix(bem('date-picker', 'input', 'disabled'))]: disabled,\n          },\n        )}\n        disabled={disabled}\n        aria-invalid={hasError}\n        aria-required={required}\n        {...rest}\n      />\n    </FormControl>\n  );\n};\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;AAyDA,MAAMA,cAAmC,EACvC,OACA,OACA,WACA,UACA,UACA,YACA,aAAa,cACb,QAAQ,EAAE,CACV,GAAG,WACkB;CACrB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,0BAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,qBAACC;EACQ;EACK;EACZ,WAAW,GAAG,yBAAyB,IAAI,cAAc,CAAC,EAAE,UAAU;EAC/D;aAEN,SACC,oBAACC;GACW;GACV,OAAO;GACP,WAAW,GAAG,yBAAyB,IAAI,eAAe,QAAQ,CAAC,EAAE,OAAO,SAAS;aAEpF;IACU,EAEf,oBAAC;GACC,MAAK;GACL,SAAQ;GACR,aAAa;GACb,WAAW,GACT,yBAAyB,IAAI,eAAe,QAAQ,CAAC,EACrD,OAAO,UACP,OAAO,eACP,OAAO,kBACP;KACG,yBAAyB,IAAI,eAAe,SAAS,QAAQ,CAAC,GAAG;KACjE,yBAAyB,IAAI,eAAe,SAAS,WAAW,CAAC,GAAG;IACtE,CACF;GACS;GACV,gBAAc;GACd,iBAAe;GACf,GAAI;IACJ;GACU;;AAIlB,yBAAe"}