@thunderid/react 0.1.0 → 0.3.0

package/dist/cjs/components/primitives/KeyValueInput/KeyValueInput.styles.cjs

@@ -0,0 +1,175 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/primitives/KeyValueInput/KeyValueInput.styles.ts
+/**
+* Creates styles for the KeyValueInput component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param disabled - Whether the component is disabled
+* @param readOnly - Whether the component is read-only
+* @param hasError - Whether the component has an error
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, disabled, readOnly, hasError) => (0, react.useMemo)(() => {
+	const container = __emotion_css.css`
+      display: flex;
+      flex-direction: column;
+      font-family: ${theme.vars.typography.fontFamily};
+      gap: calc(${theme.vars.spacing.unit} / 2);
+    `;
+	const label = __emotion_css.css`
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: ${theme.vars.colors.text.primary};
+      margin-bottom: calc(${theme.vars.spacing.unit} / 2);
+    `;
+	const requiredIndicator = __emotion_css.css`
+      color: ${theme.vars.colors.error.main};
+    `;
+	const pairsList = __emotion_css.css`
+      display: flex;
+      flex-direction: column;
+      gap: calc(${theme.vars.spacing.unit} / 4);
+    `;
+	const pairRow = __emotion_css.css`
+      display: flex;
+      align-items: center;
+      gap: calc(${theme.vars.spacing.unit} / 2);
+      padding: calc(${theme.vars.spacing.unit} / 2);
+      border-radius: ${theme.vars.borderRadius.small};
+      background-color: transparent;
+      border: none;
+
+      &:hover {
+        background-color: ${theme.vars.colors.action.hover};
+      }
+    `;
+	const pairInput = __emotion_css.css`
+      flex: 1;
+      min-width: 0;
+    `;
+	const addRow = __emotion_css.css`
+      display: flex;
+      align-items: center;
+      gap: calc(${theme.vars.spacing.unit} / 2);
+      padding: calc(${theme.vars.spacing.unit} / 2);
+      border: none;
+      border-radius: ${theme.vars.borderRadius.small};
+      background-color: transparent;
+      margin-top: calc(${theme.vars.spacing.unit} / 2);
+    `;
+	const removeButton = __emotion_css.css`
+      min-width: auto;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      background-color: transparent;
+      color: ${theme.vars.colors.text.secondary};
+      border: none;
+      border-radius: ${theme.vars.borderRadius.small};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: ${disabled ? "not-allowed" : "pointer"};
+
+      &:hover:not(:disabled) {
+        background-color: ${theme.vars.colors.action.hover};
+        color: ${theme.vars.colors.error.main};
+      }
+
+      &:disabled {
+        opacity: 0.6;
+      }
+    `;
+	const addButton = __emotion_css.css`
+      min-width: auto;
+      width: 24px;
+      height: 24px;
+      padding: 0;
+      background-color: transparent;
+      color: ${theme.vars.colors.primary.main};
+      border: none;
+      border-radius: ${theme.vars.borderRadius.small};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: ${disabled ? "not-allowed" : "pointer"};
+
+      &:hover:not(:disabled) {
+        background-color: ${theme.vars.colors.primary.main};
+        color: ${theme.vars.colors.primary.contrastText};
+      }
+
+      &:disabled {
+        opacity: 0.6;
+      }
+    `;
+	const helperText = __emotion_css.css`
+      font-size: 0.75rem;
+      color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.text.secondary};
+      margin-top: calc(${theme.vars.spacing.unit} / 2);
+    `;
+	const emptyState = __emotion_css.css`
+      padding: ${theme.vars.spacing.unit};
+      text-align: center;
+      color: ${theme.vars.colors.text.secondary};
+      font-style: italic;
+      font-size: 0.75rem;
+    `;
+	const readOnlyPair = __emotion_css.css`
+      display: flex;
+      align-items: center;
+      gap: calc(${theme.vars.spacing.unit} / 2);
+      padding: calc(${theme.vars.spacing.unit} / 4) 0;
+      min-height: 20px;
+    `;
+	const readOnlyKey = __emotion_css.css`
+      font-size: 0.75rem;
+      font-weight: 500;
+      color: ${theme.vars.colors.text.secondary};
+      min-width: 80px;
+      flex-shrink: 0;
+    `;
+	const readOnlyValue = __emotion_css.css`
+      font-size: 0.75rem;
+      color: ${theme.vars.colors.text.primary};
+      word-break: break-word;
+      flex: 1;
+    `;
+	return {
+		addButton,
+		addRow,
+		container,
+		counterText: __emotion_css.css`
+      font-size: 0.75rem;
+      color: ${theme.vars.colors.text.secondary};
+      margin-top: calc(${theme.vars.spacing.unit} / 2);
+    `,
+		emptyState,
+		helperText,
+		label,
+		pairInput,
+		pairRow,
+		pairsList,
+		readOnlyKey,
+		readOnlyPair,
+		readOnlyValue,
+		removeButton,
+		requiredIndicator
+	};
+}, [
+	theme,
+	colorScheme,
+	disabled,
+	readOnly,
+	hasError
+]);
+var KeyValueInput_styles_default = useStyles;
+
+//#endregion
+exports.default = KeyValueInput_styles_default;
+//# sourceMappingURL=KeyValueInput.styles.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueInput.styles.cjs","names":["container: string","label: string","requiredIndicator: string","pairsList: string","pairRow: string","pairInput: string","addRow: string","removeButton: string","addButton: string","helperText: string","emptyState: string","readOnlyPair: string","readOnlyKey: string","readOnlyValue: string"],"sources":["../../../../../src/components/primitives/KeyValueInput/KeyValueInput.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 KeyValueInput 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 disabled - Whether the component is disabled\n * @param readOnly - Whether the component is read-only\n * @param hasError - Whether the component has an error\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  disabled: boolean,\n  readOnly: boolean,\n  hasError: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const container: string = css`\n      display: flex;\n      flex-direction: column;\n      font-family: ${theme.vars.typography.fontFamily};\n      gap: calc(${theme.vars.spacing.unit} / 2);\n    `;\n\n    const label: string = css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${theme.vars.colors.text.primary};\n      margin-bottom: calc(${theme.vars.spacing.unit} / 2);\n    `;\n\n    const requiredIndicator: string = css`\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    const pairsList: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} / 4);\n    `;\n\n    const pairRow: string = css`\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} / 2);\n      padding: calc(${theme.vars.spacing.unit} / 2);\n      border-radius: ${theme.vars.borderRadius.small};\n      background-color: transparent;\n      border: none;\n\n      &:hover {\n        background-color: ${theme.vars.colors.action.hover};\n      }\n    `;\n\n    const pairInput: string = css`\n      flex: 1;\n      min-width: 0;\n    `;\n\n    const addRow: string = css`\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} / 2);\n      padding: calc(${theme.vars.spacing.unit} / 2);\n      border: none;\n      border-radius: ${theme.vars.borderRadius.small};\n      background-color: transparent;\n      margin-top: calc(${theme.vars.spacing.unit} / 2);\n    `;\n\n    const removeButton: string = css`\n      min-width: auto;\n      width: 24px;\n      height: 24px;\n      padding: 0;\n      background-color: transparent;\n      color: ${theme.vars.colors.text.secondary};\n      border: none;\n      border-radius: ${theme.vars.borderRadius.small};\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n\n      &:hover:not(:disabled) {\n        background-color: ${theme.vars.colors.action.hover};\n        color: ${theme.vars.colors.error.main};\n      }\n\n      &:disabled {\n        opacity: 0.6;\n      }\n    `;\n\n    const addButton: string = css`\n      min-width: auto;\n      width: 24px;\n      height: 24px;\n      padding: 0;\n      background-color: transparent;\n      color: ${theme.vars.colors.primary.main};\n      border: none;\n      border-radius: ${theme.vars.borderRadius.small};\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n\n      &:hover:not(:disabled) {\n        background-color: ${theme.vars.colors.primary.main};\n        color: ${theme.vars.colors.primary.contrastText};\n      }\n\n      &:disabled {\n        opacity: 0.6;\n      }\n    `;\n\n    const helperText: string = css`\n      font-size: 0.75rem;\n      color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.text.secondary};\n      margin-top: calc(${theme.vars.spacing.unit} / 2);\n    `;\n\n    const emptyState: string = css`\n      padding: ${theme.vars.spacing.unit};\n      text-align: center;\n      color: ${theme.vars.colors.text.secondary};\n      font-style: italic;\n      font-size: 0.75rem;\n    `;\n\n    const readOnlyPair: string = css`\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} / 2);\n      padding: calc(${theme.vars.spacing.unit} / 4) 0;\n      min-height: 20px;\n    `;\n\n    const readOnlyKey: string = css`\n      font-size: 0.75rem;\n      font-weight: 500;\n      color: ${theme.vars.colors.text.secondary};\n      min-width: 80px;\n      flex-shrink: 0;\n    `;\n\n    const readOnlyValue: string = css`\n      font-size: 0.75rem;\n      color: ${theme.vars.colors.text.primary};\n      word-break: break-word;\n      flex: 1;\n    `;\n\n    const counterText: string = css`\n      font-size: 0.75rem;\n      color: ${theme.vars.colors.text.secondary};\n      margin-top: calc(${theme.vars.spacing.unit} / 2);\n    `;\n\n    return {\n      addButton,\n      addRow,\n      container,\n      counterText,\n      emptyState,\n      helperText,\n      label,\n      pairInput,\n      pairRow,\n      pairsList,\n      readOnlyKey,\n      readOnlyPair,\n      readOnlyValue,\n      removeButton,\n      requiredIndicator,\n    };\n  }, [theme, colorScheme, disabled, readOnly, hasError]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;AA+BA,MAAM,aACJ,OACA,aACA,UACA,UACA,sCAEc;CACZ,MAAMA,YAAoB,iBAAG;;;qBAGZ,MAAM,KAAK,WAAW,WAAW;kBACpC,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,QAAgB,iBAAG;;;eAGd,MAAM,KAAK,OAAO,KAAK,QAAQ;4BAClB,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,oBAA4B,iBAAG;eAC1B,MAAM,KAAK,OAAO,MAAM,KAAK;;CAGxC,MAAMC,YAAoB,iBAAG;;;kBAGf,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,UAAkB,iBAAG;;;kBAGb,MAAM,KAAK,QAAQ,KAAK;sBACpB,MAAM,KAAK,QAAQ,KAAK;uBACvB,MAAM,KAAK,aAAa,MAAM;;;;;4BAKzB,MAAM,KAAK,OAAO,OAAO,MAAM;;;CAIvD,MAAMC,YAAoB,iBAAG;;;;CAK7B,MAAMC,SAAiB,iBAAG;;;kBAGZ,MAAM,KAAK,QAAQ,KAAK;sBACpB,MAAM,KAAK,QAAQ,KAAK;;uBAEvB,MAAM,KAAK,aAAa,MAAM;;yBAE5B,MAAM,KAAK,QAAQ,KAAK;;CAG7C,MAAMC,eAAuB,iBAAG;;;;;;eAMrB,MAAM,KAAK,OAAO,KAAK,UAAU;;uBAEzB,MAAM,KAAK,aAAa,MAAM;;;;gBAIrC,WAAW,gBAAgB,UAAU;;;4BAGzB,MAAM,KAAK,OAAO,OAAO,MAAM;iBAC1C,MAAM,KAAK,OAAO,MAAM,KAAK;;;;;;;CAQ1C,MAAMC,YAAoB,iBAAG;;;;;;eAMlB,MAAM,KAAK,OAAO,QAAQ,KAAK;;uBAEvB,MAAM,KAAK,aAAa,MAAM;;;;gBAIrC,WAAW,gBAAgB,UAAU;;;4BAGzB,MAAM,KAAK,OAAO,QAAQ,KAAK;iBAC1C,MAAM,KAAK,OAAO,QAAQ,aAAa;;;;;;;CAQpD,MAAMC,aAAqB,iBAAG;;eAEnB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,KAAK,UAAU;yBACjE,MAAM,KAAK,QAAQ,KAAK;;CAG7C,MAAMC,aAAqB,iBAAG;iBACjB,MAAM,KAAK,QAAQ,KAAK;;eAE1B,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK5C,MAAMC,eAAuB,iBAAG;;;kBAGlB,MAAM,KAAK,QAAQ,KAAK;sBACpB,MAAM,KAAK,QAAQ,KAAK;;;CAI1C,MAAMC,cAAsB,iBAAG;;;eAGpB,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK5C,MAAMC,gBAAwB,iBAAG;;eAEtB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;AAW1C,QAAO;EACL;EACA;EACA;EACA,aAV0B,iBAAG;;eAEpB,MAAM,KAAK,OAAO,KAAK,UAAU;yBACvB,MAAM,KAAK,QAAQ,KAAK;;EAQ3C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAS,CAAC;AAExD,mCAAe"}

package/dist/cjs/components/primitives/Logo/Logo.cjs

@@ -0,0 +1,37 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+const require_Logo_styles = require('./Logo.styles.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/primitives/Logo/Logo.tsx
+/**
+* Logo component that displays the brand logo from theme or custom source.
+*
+* @param props - The props for the Logo component.
+* @returns The rendered Logo component.
+*/
+const Logo = ({ className, src, alt, title, size = "medium" }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const styles = require_Logo_styles.default(theme, colorScheme, size);
+	const logoConfig = theme.images?.logo;
+	const logoSrc = src || logoConfig?.["url"];
+	const logoAlt = alt || logoConfig?.["alt"] || "Logo";
+	const logoTitle = title || logoConfig?.["title"];
+	if (!logoSrc) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+		src: logoSrc,
+		alt: logoAlt,
+		title: logoTitle,
+		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("logo")), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("logo", size)), styles["logo"], styles["size"], className)
+	});
+};
+var Logo_default = Logo;
+
+//#endregion
+exports.default = Logo_default;
+//# sourceMappingURL=Logo.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.cjs","names":["Logo: FC<LogoProps>","useTheme","styles: Record<string, string>","useStyles","logoConfig: Record<string, string> | undefined","logoSrc: string | undefined","logoAlt: string","logoTitle: string | undefined"],"sources":["../../../../../src/components/primitives/Logo/Logo.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 {FC} from 'react';\nimport useStyles from './Logo.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport type LogoSize = 'small' | 'medium' | 'large';\n\n/**\n * Props for the Logo component.\n */\nexport interface LogoProps {\n  /**\n   * Custom alt text for the logo.\n   */\n  alt?: string;\n  /**\n   * Custom CSS class name for the logo.\n   */\n  className?: string;\n  /**\n   * Size of the logo.\n   */\n  size?: LogoSize;\n  /**\n   * Custom logo URL to override theme logo.\n   */\n  src?: string;\n  /**\n   * Custom title for the logo.\n   */\n  title?: string;\n}\n\n/**\n * Logo component that displays the brand logo from theme or custom source.\n *\n * @param props - The props for the Logo component.\n * @returns The rendered Logo component.\n */\nconst Logo: FC<LogoProps> = ({className, src, alt, title, size = 'medium'}: LogoProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, size);\n\n  const logoConfig: Record<string, string> | undefined = theme.images?.logo as Record<string, string> | undefined;\n\n  const logoSrc: string | undefined = src || logoConfig?.['url'];\n\n  const logoAlt: string = alt || logoConfig?.['alt'] || 'Logo';\n\n  const logoTitle: string | undefined = title || logoConfig?.['title'];\n\n  if (!logoSrc) {\n    return null;\n  }\n\n  return (\n    <img\n      src={logoSrc}\n      alt={logoAlt}\n      title={logoTitle}\n      className={cx(\n        withVendorCSSClassPrefix(bem('logo')),\n        withVendorCSSClassPrefix(bem('logo', size)),\n        styles['logo'],\n        styles['size'],\n        className,\n      )}\n    />\n  );\n};\n\nexport default Logo;\n"],"mappings":";;;;;;;;;;;;;;;;;AA0DA,MAAMA,QAAuB,EAAC,WAAW,KAAK,KAAK,OAAO,OAAO,eAAyB;CACxF,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,4BAAU,OAAO,aAAa,KAAK;CAE1E,MAAMC,aAAiD,MAAM,QAAQ;CAErE,MAAMC,UAA8B,OAAO,aAAa;CAExD,MAAMC,UAAkB,OAAO,aAAa,UAAU;CAEtD,MAAMC,YAAgC,SAAS,aAAa;AAE5D,KAAI,CAAC,QACH,QAAO;AAGT,QACE,2CAAC;EACC,KAAK;EACL,KAAK;EACL,OAAO;EACP,gHAC+B,OAAO,CAAC,iFACR,QAAQ,KAAK,CAAC,EAC3C,OAAO,SACP,OAAO,SACP,UACD;GACD;;AAIN,mBAAe"}

package/dist/cjs/components/primitives/Logo/Logo.styles.cjs

@@ -0,0 +1,53 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/primitives/Logo/Logo.styles.ts
+/**
+* Creates styles for the Logo component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param size - The size of the logo
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, size) => (0, react.useMemo)(() => {
+	const baseLogo = __emotion_css.css`
+      width: auto;
+      object-fit: contain;
+      display: block;
+    `;
+	const smallLogo = __emotion_css.css`
+      height: 32px;
+      max-width: 120px;
+    `;
+	const mediumLogo = __emotion_css.css`
+      height: 48px;
+      max-width: 180px;
+    `;
+	const largeLogo = __emotion_css.css`
+      height: 64px;
+      max-width: 240px;
+    `;
+	return {
+		large: largeLogo,
+		logo: baseLogo,
+		medium: mediumLogo,
+		size: {
+			large: largeLogo,
+			medium: mediumLogo,
+			small: smallLogo
+		}[size],
+		small: smallLogo
+	};
+}, [
+	theme,
+	colorScheme,
+	size
+]);
+var Logo_styles_default = useStyles;
+
+//#endregion
+exports.default = Logo_styles_default;
+//# sourceMappingURL=Logo.styles.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.styles.cjs","names":["baseLogo: string","smallLogo: string","mediumLogo: string","largeLogo: string"],"sources":["../../../../../src/components/primitives/Logo/Logo.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 LogoSize = 'small' | 'medium' | 'large';\n\n/**\n * Creates styles for the Logo component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param size - The size of the logo\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, size: LogoSize): Record<string, string> =>\n  useMemo(() => {\n    const baseLogo: string = css`\n      width: auto;\n      object-fit: contain;\n      display: block;\n    `;\n\n    const smallLogo: string = css`\n      height: 32px;\n      max-width: 120px;\n    `;\n\n    const mediumLogo: string = css`\n      height: 48px;\n      max-width: 180px;\n    `;\n\n    const largeLogo: string = css`\n      height: 64px;\n      max-width: 240px;\n    `;\n\n    const sizeStyles: Record<string, string> = {\n      large: largeLogo,\n      medium: mediumLogo,\n      small: smallLogo,\n    };\n\n    return {\n      large: largeLogo,\n      logo: baseLogo,\n      medium: mediumLogo,\n      size: sizeStyles[size],\n      small: smallLogo,\n    };\n  }, [theme, colorScheme, size]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;AA+BA,MAAM,aAAa,OAAc,aAAqB,kCACtC;CACZ,MAAMA,WAAmB,iBAAG;;;;;CAM5B,MAAMC,YAAoB,iBAAG;;;;CAK7B,MAAMC,aAAqB,iBAAG;;;;CAK9B,MAAMC,YAAoB,iBAAG;;;;AAW7B,QAAO;EACL,OAAO;EACP,MAAM;EACN,QAAQ;EACR,MAVyC;GACzC,OAAO;GACP,QAAQ;GACR,OAAO;GACR,CAMkB;EACjB,OAAO;EACR;GACA;CAAC;CAAO;CAAa;CAAK,CAAC;AAEhC,0BAAe"}

package/dist/cjs/components/primitives/MultiInput/MultiInput.cjs

@@ -0,0 +1,142 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+const require_FormControl = require('../FormControl/FormControl.cjs');
+const require_InputLabel = require('../InputLabel/InputLabel.cjs');
+const require_Checkbox = require('../Checkbox/Checkbox.cjs');
+const require_DatePicker = require('../DatePicker/DatePicker.cjs');
+const require_TextField = require('../TextField/TextField.cjs');
+const require_MultiInput_styles = require('./MultiInput.styles.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/primitives/MultiInput/MultiInput.tsx
+const MultiInput = ({ label, error, required, className, disabled, helperText, placeholder = "Enter value", values = [], onChange, type = "text", fieldType = "STRING", startIcon, endIcon, minFields = 1, maxFields, style = {} }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const canAddMore = !maxFields || values.length < maxFields;
+	const canRemove = values.length > minFields;
+	const styles = require_MultiInput_styles.default(theme, colorScheme, !!disabled, !!error, canAddMore, canRemove);
+	const PlusIcon = ({ iconClassName }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		className: (0, __emotion_css.cx)(styles["icon"], iconClassName),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 5v14M5 12h14" })
+	});
+	const BinIcon = ({ iconClassName }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		className: (0, __emotion_css.cx)(styles["icon"], iconClassName),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6" })
+	});
+	const handleAddValue = (0, react.useCallback)((newValue) => {
+		if (newValue.trim() !== "" && (!maxFields || values.length < maxFields)) onChange([...values, newValue.trim()]);
+	}, [
+		values,
+		onChange,
+		maxFields
+	]);
+	const handleRemoveValue = (0, react.useCallback)((index) => {
+		if (values.length > minFields) onChange(values.filter((_, i) => i !== index));
+	}, [
+		values,
+		onChange,
+		minFields
+	]);
+	const renderInputField = (0, react.useCallback)((value, onValueChange, attachedEndIcon, onEndIconClick) => {
+		const handleInputChange = (e) => {
+			onValueChange(e.target ? e.target.value : e);
+		};
+		const handleKeyDown = (e) => {
+			if (e.key === "Enter" && onEndIconClick) {
+				e.preventDefault();
+				onEndIconClick();
+			}
+		};
+		const commonProps = {
+			disabled,
+			endIcon: attachedEndIcon || endIcon,
+			error,
+			onChange: handleInputChange,
+			onEndIconClick,
+			onKeyDown: handleKeyDown,
+			placeholder,
+			startIcon,
+			value
+		};
+		switch (fieldType) {
+			case "DATE_TIME": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_DatePicker.default, { ...commonProps });
+			case "BOOLEAN": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.default, {
+				...commonProps,
+				checked: value === "true" || Boolean(value),
+				onChange: (e) => onValueChange(e.target.checked ? "true" : "false")
+			});
+			default: return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, {
+				...commonProps,
+				type
+			});
+		}
+	}, [
+		placeholder,
+		disabled,
+		startIcon,
+		endIcon,
+		error,
+		fieldType,
+		type
+	]);
+	const [currentInputValue, setCurrentInputValue] = (0, react.useState)("");
+	const handleInputSubmit = (0, react.useCallback)(() => {
+		if (currentInputValue.trim() !== "") {
+			handleAddValue(currentInputValue);
+			setCurrentInputValue("");
+		}
+	}, [currentInputValue, handleAddValue]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_FormControl.default, {
+		error,
+		helperText,
+		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input")), className),
+		style,
+		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputLabel.default, {
+			required,
+			error: !!error,
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "container")), styles["container"]),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "input-row")), styles["inputRow"]),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "input-wrapper")), styles["inputWrapper"]),
+					children: renderInputField(currentInputValue, setCurrentInputValue, canAddMore ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlusIcon, { iconClassName: styles["plusIcon"] }) : void 0, canAddMore ? handleInputSubmit : void 0)
+				})
+			}), values.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "list-container")), styles["listContainer"]),
+				children: values.map((value, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "list-item")), styles["listItem"]),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "list-item-text")), styles["listItemText"]),
+						children: value
+					}), canRemove && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: () => handleRemoveValue(index),
+						disabled,
+						className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "remove-button")), styles["removeButton"]),
+						title: "Remove value",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BinIcon, { iconClassName: styles["icon"] })
+					})]
+				}, index))
+			})]
+		})]
+	});
+};
+var MultiInput_default = MultiInput;
+
+//#endregion
+exports.default = MultiInput_default;
+//# sourceMappingURL=MultiInput.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiInput.cjs","names":["MultiInput: FC<MultiInputProps>","useTheme","canAddMore: boolean","canRemove: boolean","styles: Record<string, string>","useStyles","PlusIcon: FC<IconProps>","BinIcon: FC<IconProps>","handleAddValue: ReturnType<typeof useCallback>","handleRemoveValue: ReturnType<typeof useCallback>","renderInputField: ReturnType<typeof useCallback>","commonProps: Record<string, unknown>","DatePicker","Checkbox","TextField","handleInputSubmit: ReturnType<typeof useCallback>","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/MultiInput/MultiInput.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, KeyboardEvent, ReactElement, ReactNode, useCallback, useState} from 'react';\nimport useStyles from './MultiInput.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport Checkbox from '../Checkbox/Checkbox';\nimport DatePicker from '../DatePicker/DatePicker';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\nimport TextField from '../TextField/TextField';\n\nexport type MultiInputType = 'text' | 'email' | 'tel' | 'url' | 'password' | 'date' | 'boolean';\nexport type MultiInputFieldType = 'STRING' | 'DATE_TIME' | 'BOOLEAN';\n\nexport interface MultiInputProps {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Icon to display at the end (right) of each input (in addition to add/remove buttons)\n   */\n  endIcon?: ReactNode;\n  /**\n   * Error message to display below the inputs\n   */\n  error?: string;\n  /**\n   * Field type for different input components\n   */\n  fieldType?: MultiInputFieldType;\n  /**\n   * Helper text to display below the inputs\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the inputs\n   */\n  label?: string;\n  /**\n   * Maximum number of fields to allow (default: unlimited)\n   */\n  maxFields?: number;\n  /**\n   * Minimum number of fields to show (default: 1)\n   */\n  minFields?: number;\n  /**\n   * Callback when values change\n   */\n  onChange: (values: string[]) => void;\n  /**\n   * Placeholder text for input fields\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Icon to display at the start (left) of each input\n   */\n  startIcon?: ReactNode;\n  /**\n   * Custom style object\n   */\n  style?: CSSProperties;\n  /**\n   * Input type\n   */\n  type?: MultiInputType;\n  /**\n   * Array of values\n   */\n  values: string[];\n}\n\ninterface IconProps {\n  iconClassName?: string;\n}\n\nconst MultiInput: FC<MultiInputProps> = ({\n  label,\n  error,\n  required,\n  className,\n  disabled,\n  helperText,\n  placeholder = 'Enter value',\n  values = [],\n  onChange,\n  type = 'text',\n  fieldType = 'STRING',\n  startIcon,\n  endIcon,\n  minFields = 1,\n  maxFields,\n  style = {},\n}: MultiInputProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const canAddMore: boolean = !maxFields || values.length < maxFields;\n  const canRemove: boolean = values.length > minFields;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, !!disabled, !!error, canAddMore, canRemove);\n\n  const PlusIcon: FC<IconProps> = ({iconClassName}: IconProps): ReactElement => (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" className={cx(styles['icon'], iconClassName)}>\n      <path d=\"M12 5v14M5 12h14\" />\n    </svg>\n  );\n\n  const BinIcon: FC<IconProps> = ({iconClassName}: IconProps): ReactElement => (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" className={cx(styles['icon'], iconClassName)}>\n      <path d=\"M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6\" />\n    </svg>\n  );\n\n  const handleAddValue: ReturnType<typeof useCallback> = useCallback(\n    (newValue: string) => {\n      if (newValue.trim() !== '' && (!maxFields || values.length < maxFields)) {\n        onChange([...values, newValue.trim()]);\n      }\n    },\n    [values, onChange, maxFields],\n  );\n\n  const handleRemoveValue: ReturnType<typeof useCallback> = useCallback(\n    (index: number) => {\n      if (values.length > minFields) {\n        const updatedValues: string[] = values.filter((_: string, i: number) => i !== index);\n        onChange(updatedValues);\n      }\n    },\n    [values, onChange, minFields],\n  );\n\n  const renderInputField: ReturnType<typeof useCallback> = useCallback(\n    (\n      value: string,\n      onValueChange: (value: string) => void,\n      attachedEndIcon?: ReactNode,\n      onEndIconClick?: () => void,\n    ): ReactElement => {\n      const handleInputChange = (e: any): void => {\n        const newValue: string = e.target ? e.target.value : e;\n        onValueChange(newValue);\n      };\n\n      const handleKeyDown = (e: KeyboardEvent): void => {\n        if (e.key === 'Enter' && onEndIconClick) {\n          e.preventDefault();\n          onEndIconClick();\n        }\n      };\n\n      const finalEndIcon: ReactNode = attachedEndIcon || endIcon;\n\n      const commonProps: Record<string, unknown> = {\n        disabled,\n        endIcon: finalEndIcon,\n        error,\n        onChange: handleInputChange,\n        onEndIconClick,\n        onKeyDown: handleKeyDown,\n        placeholder,\n        startIcon,\n        value,\n      };\n\n      switch (fieldType) {\n        case 'DATE_TIME':\n          return <DatePicker {...commonProps} />;\n        case 'BOOLEAN':\n          return (\n            <Checkbox\n              {...commonProps}\n              checked={value === 'true' || Boolean(value)}\n              onChange={(e: any): void => onValueChange(e.target.checked ? 'true' : 'false')}\n            />\n          );\n        default:\n          return <TextField {...commonProps} type={type} />;\n      }\n    },\n    [placeholder, disabled, startIcon, endIcon, error, fieldType, type],\n  );\n\n  // State for the current input value\n  const [currentInputValue, setCurrentInputValue] = useState('');\n\n  const handleInputSubmit: ReturnType<typeof useCallback> = useCallback((): void => {\n    if (currentInputValue.trim() !== '') {\n      handleAddValue(currentInputValue);\n      setCurrentInputValue('');\n    }\n  }, [currentInputValue, handleAddValue]);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('multi-input')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={!!error}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'container')), styles['container'])}>\n        {/* Input field at the top */}\n        <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'input-row')), styles['inputRow'])}>\n          <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'input-wrapper')), styles['inputWrapper'])}>\n            {renderInputField(\n              currentInputValue,\n              setCurrentInputValue,\n              canAddMore ? <PlusIcon iconClassName={styles['plusIcon']} /> : undefined,\n              canAddMore ? handleInputSubmit : undefined,\n            )}\n          </div>\n        </div>\n\n        {/* List of added items */}\n        {values.length > 0 && (\n          <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'list-container')), styles['listContainer'])}>\n            {values.map((value: string, index: number) => (\n              <div\n                key={index}\n                className={cx(withVendorCSSClassPrefix(bem('multi-input', 'list-item')), styles['listItem'])}\n              >\n                <span\n                  className={cx(withVendorCSSClassPrefix(bem('multi-input', 'list-item-text')), styles['listItemText'])}\n                >\n                  {value}\n                </span>\n                {canRemove && (\n                  <button\n                    type=\"button\"\n                    onClick={(): void => handleRemoveValue(index)}\n                    disabled={disabled}\n                    className={cx(\n                      withVendorCSSClassPrefix(bem('multi-input', 'remove-button')),\n                      styles['removeButton'],\n                    )}\n                    title=\"Remove value\"\n                  >\n                    <BinIcon iconClassName={styles['icon']} />\n                  </button>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default MultiInput;\n"],"mappings":"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"}

package/dist/cjs/components/primitives/MultiInput/MultiInput.styles.cjs

@@ -0,0 +1,115 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/primitives/MultiInput/MultiInput.styles.ts
+/**
+* Creates styles for the MultiInput component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param disabled - Whether the component is disabled
+* @param hasError - Whether the component has an error
+* @param canAddMore - Whether more items can be added
+* @param canRemove - Whether items can be removed
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, disabled, hasError, canAddMore, canRemove) => (0, react.useMemo)(() => {
+	const container = __emotion_css.css`
+      display: flex;
+      flex-direction: column;
+      gap: ${theme.vars.spacing.unit};
+    `;
+	const inputRow = __emotion_css.css`
+      display: flex;
+      align-items: center;
+      gap: ${theme.vars.spacing.unit};
+      position: relative;
+    `;
+	const inputWrapper = __emotion_css.css`
+      flex: 1;
+    `;
+	const plusIcon = __emotion_css.css`
+      background: ${theme.vars.colors.secondary.main};
+      border-radius: 50%;
+      outline: 4px ${theme.vars.colors.secondary.main} auto;
+      color: ${theme.vars.colors.secondary.contrastText};
+    `;
+	const listContainer = __emotion_css.css`
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    `;
+	const listItem = __emotion_css.css`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);
+      background-color: ${theme.vars.colors.background.surface};
+      border-radius: ${theme.vars.borderRadius.medium};
+      font-size: 1rem;
+      font-family: ${theme.vars.typography.fontFamily};
+      color: ${theme.vars.colors.text.primary};
+      margin-bottom: calc(${theme.vars.spacing.unit} / 2);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    `;
+	const listItemText = __emotion_css.css`
+      flex: 1;
+      word-break: break-word;
+    `;
+	const removeButton = __emotion_css.css`
+      padding: calc(${theme.vars.spacing.unit} / 2);
+      min-width: auto;
+      color: ${theme.vars.colors.error.main};
+      background: transparent;
+      border: none;
+      border-radius: ${theme.vars.borderRadius.small};
+      cursor: ${disabled ? "not-allowed" : "pointer"};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover:not(:disabled) {
+        background-color: ${theme.vars.colors.action.hover};
+      }
+
+      &:disabled {
+        opacity: 0.6;
+      }
+    `;
+	return {
+		container,
+		icon: __emotion_css.css`
+      width: 16px;
+      height: 16px;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      fill: none;
+    `,
+		inputRow,
+		inputWrapper,
+		listContainer,
+		listItem,
+		listItemText,
+		plusIcon,
+		removeButton
+	};
+}, [
+	theme,
+	colorScheme,
+	disabled,
+	hasError,
+	canAddMore,
+	canRemove
+]);
+var MultiInput_styles_default = useStyles;
+
+//#endregion
+exports.default = MultiInput_styles_default;
+//# sourceMappingURL=MultiInput.styles.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiInput.styles.cjs","names":["container: string","inputRow: string","inputWrapper: string","plusIcon: string","listContainer: string","listItem: string","listItemText: string","removeButton: string"],"sources":["../../../../../src/components/primitives/MultiInput/MultiInput.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 MultiInputType = 'text' | 'email' | 'tel' | 'url' | 'password' | 'date' | 'boolean';\nexport type MultiInputFieldType = 'STRING' | 'DATE_TIME' | 'BOOLEAN';\n\n/**\n * Creates styles for the MultiInput 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 disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @param canAddMore - Whether more items can be added\n * @param canRemove - Whether items can be removed\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  disabled: boolean,\n  hasError: boolean,\n  canAddMore: boolean,\n  canRemove: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const container: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    const inputRow: string = css`\n      display: flex;\n      align-items: center;\n      gap: ${theme.vars.spacing.unit};\n      position: relative;\n    `;\n\n    const inputWrapper: string = css`\n      flex: 1;\n    `;\n\n    const plusIcon: string = css`\n      background: ${theme.vars.colors.secondary.main};\n      border-radius: 50%;\n      outline: 4px ${theme.vars.colors.secondary.main} auto;\n      color: ${theme.vars.colors.secondary.contrastText};\n    `;\n\n    const listContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n    `;\n\n    const listItem: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);\n      background-color: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.medium};\n      font-size: 1rem;\n      font-family: ${theme.vars.typography.fontFamily};\n      color: ${theme.vars.colors.text.primary};\n      margin-bottom: calc(${theme.vars.spacing.unit} / 2);\n\n      &:last-child {\n        margin-bottom: 0;\n      }\n    `;\n\n    const listItemText: string = css`\n      flex: 1;\n      word-break: break-word;\n    `;\n\n    const removeButton: string = css`\n      padding: calc(${theme.vars.spacing.unit} / 2);\n      min-width: auto;\n      color: ${theme.vars.colors.error.main};\n      background: transparent;\n      border: none;\n      border-radius: ${theme.vars.borderRadius.small};\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      &:hover:not(:disabled) {\n        background-color: ${theme.vars.colors.action.hover};\n      }\n\n      &:disabled {\n        opacity: 0.6;\n      }\n    `;\n\n    const icon: string = css`\n      width: 16px;\n      height: 16px;\n      stroke: currentColor;\n      stroke-width: 2;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      fill: none;\n    `;\n\n    return {\n      container,\n      icon,\n      inputRow,\n      inputWrapper,\n      listContainer,\n      listItem,\n      listItemText,\n      plusIcon,\n      removeButton,\n    };\n  }, [theme, colorScheme, disabled, hasError, canAddMore, canRemove]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;;AAmCA,MAAM,aACJ,OACA,aACA,UACA,UACA,YACA,uCAEc;CACZ,MAAMA,YAAoB,iBAAG;;;aAGpB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,WAAmB,iBAAG;;;aAGnB,MAAM,KAAK,QAAQ,KAAK;;;CAIjC,MAAMC,eAAuB,iBAAG;;;CAIhC,MAAMC,WAAmB,iBAAG;oBACZ,MAAM,KAAK,OAAO,UAAU,KAAK;;qBAEhC,MAAM,KAAK,OAAO,UAAU,KAAK;eACvC,MAAM,KAAK,OAAO,UAAU,aAAa;;CAGpD,MAAMC,gBAAwB,iBAAG;;;;;CAMjC,MAAMC,WAAmB,iBAAG;;;;iBAIf,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,MAAM,KAAK,OAAO,WAAW,QAAQ;uBACxC,MAAM,KAAK,aAAa,OAAO;;qBAEjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;4BAClB,MAAM,KAAK,QAAQ,KAAK;;;;;;CAOhD,MAAMC,eAAuB,iBAAG;;;;CAKhC,MAAMC,eAAuB,iBAAG;sBACd,MAAM,KAAK,QAAQ,KAAK;;eAE/B,MAAM,KAAK,OAAO,MAAM,KAAK;;;uBAGrB,MAAM,KAAK,aAAa,MAAM;gBACrC,WAAW,gBAAgB,UAAU;;;;;;4BAMzB,MAAM,KAAK,OAAO,OAAO,MAAM;;;;;;;AAkBvD,QAAO;EACL;EACA,MAZmB,iBAAG;;;;;;;;;EAatB;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAY;CAAU,CAAC;AAErE,gCAAe"}