npm - @bikdotai/bik-component-library - Versions diffs - 0.0.867-beta.0 → 0.0.868-beta.0 - Mend

@bikdotai/bik-component-library 0.0.867-beta.0 → 0.0.868-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (138) hide show

package/dist/esm/components/agent-builder/utils/mentionSerialization.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mentionSerialization.js","sources":["../../../../../src/components/agent-builder/utils/mentionSerialization.ts"],"sourcesContent":["import type { ApplicationType } from '@bikdotai/bik-models/growth';\nimport { MentionItem } from '@src/editor';\nimport type {\n\tSubHeader,\n\tVariableListInterfaceV3,\n\tVariableV3,\n} from '../../variable-picker-v3/model';\nimport {\n\tAgentTool,\n\tConfigToolConfig,\n\tRestApiToolConfig,\n\tSubAgentRef,\n} from '../AgentBuilder.model';\nimport { TOOL_SOURCE_LABELS, ToolSource } from '../constants/tools';\n\n/*\n Serialization helpers between the BikEditor document and the firebase\n * `instructions` string.\n \n Firebase stores `instructions` as PLAIN TEXT with inline reference tokens:\n * - `{{subagent:<agentId>}}` — hand-off to another agent\n * - `{{tool:<tool_id>}}` — an action the agent can call\n * - `{{variable:<name>}}` — a template variable picked from the catalog\n \n In the editor those references are inserted via the `@` mention menu (which we\n * populate with BOTH tools and sub-agents). Mention nodes keep their `id` in the\n * ProseMirror doc JSON (the rendered HTML drops it), so we serialize from the doc\n * JSON — not from HTML.\n /\n\nexport interface MentionKindMeta {\n\t/* Distinguishes a tool / sub-agent / variable reference. /\n\tkind: 'tool' \| 'subagent' \| 'variable';\n\t/* Plain item name (no prefix) shown in the picker dropdown rows. /\n\tplainLabel?: string;\n\t/* For tools: the source bucket (manifest / shopify / …) the picker groups by. /\n\tsource?: string;\n\t/* For tools: touches customer-private data → shows a shield in the picker. /\n\tauthRequired?: boolean;\n}\n\n// Source labels moved to constants/tools.ts; re-exported for existing importers.\nexport { TOOL_SOURCE_LABELS };\n\n/\n Human label for a tool source. The native tools are named after whichever host\n * product the merchant is in — \"Manifest\" in Manifest, \"BIK\" in BIK — so both an\n * explicit `manifest` source and a missing one resolve to `appLabel`. Every other\n * source is a vendor name, then the raw key.\n /\nexport const toolSourceLabel = (\n\tsource: string \| undefined,\n\tappLabel = 'Manifest',\n): string => {\n\tif (!source \|\| source === ToolSource.Manifest) {\n\t\treturn appLabel;\n\t}\n\treturn TOOL_SOURCE_LABELS[source as ToolSource] ?? source;\n};\n\n/* Human label for the host application, used as the tool-chip prefix. /\nexport const appTypeLabel = (applicationType?: ApplicationType): string => {\n\tconst key = applicationType ? String(applicationType) : '';\n\tif (key === 'BIK') {\n\t\treturn 'BIK';\n\t}\n\tif (key === 'BSP') {\n\t\treturn 'BSP';\n\t}\n\treturn 'Manifest';\n};\n\n/\n Build the combined `@` mention list from the available tools + sub-agents.\n \n The `label` is the CHIP text shown once inserted — tools read\n * `\"<App> : <tool name>\"` (e.g. \"Manifest : Look up order\"), sub-agents read\n * `\"sub-agent: <name>\"`. `meta.plainLabel` is the un-prefixed name for the\n * picker rows, and `meta.kind` drives the `{{tool}}` / `{{subagent}}` colour.\n /\nexport const buildAgentMentionItems = (\n\ttools: AgentTool[],\n\tsubAgents: SubAgentRef[],\n\tappLabel = 'Manifest',\n): MentionItem[] => [\n\t...tools.map(\n\t\t(t): MentionItem => ({\n\t\t\tid: t.tool_id,\n\t\t\tlabel: `${toolSourceLabel(t.source, appLabel)} : ${t.display_name}`,\n\t\t\tmeta: {\n\t\t\t\tkind: 'tool',\n\t\t\t\tplainLabel: t.display_name,\n\t\t\t\tsource: t.source,\n\t\t\t\tauthRequired: t.auth_required,\n\t\t\t},\n\t\t}),\n\t),\n\t...subAgents.map(\n\t\t(s): MentionItem => ({\n\t\t\tid: s.id,\n\t\t\tlabel: `sub-agent: ${s.name}`,\n\t\t\tmeta: { kind: 'subagent', plainLabel: s.name },\n\t\t}),\n\t),\n];\n\n/* Strip the `{{ }}` wrapper from a variable token (`{{a.b}}` → `a.b`). /\nexport const variableTokenName = (actualValue: string): string =>\n\tactualValue.replace(/^\\{\\{\|\\}\\}$/g, '');\n\n/\n Flatten the (nested) variable catalog into mention items, so stored\n * `{{<name>}}` tokens rehydrate as `Variable: <display name>` chips. The item\n * id is the BARE token name (no braces) — `resolveMentionToken` re-wraps it on\n * save. Merge alongside {@link buildAgentMentionItems} for serialization.\n /\nexport const buildVariableMentionItems = (\n\tvariablesData: VariableListInterfaceV3[] = [],\n): MentionItem[] => {\n\tconst items: MentionItem[] = [];\n\tconst walk = (entry: VariableListInterfaceV3 \| SubHeader \| VariableV3) => {\n\t\tconst actual = (entry as VariableV3).actualValue;\n\t\tif (actual) {\n\t\t\tconst name = variableTokenName(actual);\n\t\t\titems.push({\n\t\t\t\tid: name,\n\t\t\t\t// Chip text is the raw token — designers want variables to read as\n\t\t\t\t// {{a.b.c}} (styled purple by the editor), not a labelled chip.\n\t\t\t\tlabel: `{{${name}}}`,\n\t\t\t\tmeta: { kind: 'variable', plainLabel: entry.displayName },\n\t\t\t});\n\t\t}\n\t\tObject.values(entry.variables ?? {}).forEach(walk);\n\t};\n\tvariablesData.forEach(walk);\n\treturn items;\n};\n\n/* Display name for a shared config tool: first recipient / channel, else generic. /\nexport const configToolName = (t: ConfigToolConfig): string => {\n\tif (t.tool_key === 'send_slack_message') {\n\t\treturn (\n\t\t\tString(t.params['channelId']?.value ?? '').trim() \|\| 'Send Slack message'\n\t\t);\n\t}\n\treturn (\n\t\tString(t.params['sendTo']?.value ?? '')\n\t\t\t.split(',')\n\t\t\t.map((s) => s.trim())\n\t\t\t.filter(Boolean)[0] \|\| 'Send email'\n\t);\n};\n\n/* Display name for a Rest API tool row / chip. /\nexport const restApiToolName = (t: RestApiToolConfig): string =>\n\tt.name \|\| 'Rest API';\n\n/* The `@`-mention chip item for a Rest API tool (kind 'tool', restapi source). /\nexport const restApiMentionItem = (t: RestApiToolConfig): MentionItem => {\n\tconst name = restApiToolName(t);\n\treturn {\n\t\tid: t.id,\n\t\tlabel: `${TOOL_SOURCE_LABELS[ToolSource.RestApi]} : ${name}`,\n\t\tmeta: { kind: 'tool', plainLabel: name, source: ToolSource.RestApi },\n\t};\n};\n\n/* The `@`-mention chip item for a shared config tool (email / Slack). /\nexport const configToolMentionItem = (t: ConfigToolConfig): MentionItem => {\n\tconst source =\n\t\tt.tool_key === 'send_slack_message'\n\t\t\t? ToolSource.Slack\n\t\t\t: ToolSource.EmailHandover;\n\tconst name = configToolName(t);\n\treturn {\n\t\tid: t.id,\n\t\tlabel: `${TOOL_SOURCE_LABELS[source]} : ${name}`,\n\t\tmeta: { kind: 'tool', plainLabel: name, source },\n\t};\n};\n\n/\n Mention items for the inline-configured custom tools (Rest API + email / Slack)\n * so their `{{tool:<id>}}` tokens rehydrate as chips — they live on the agent\n * value, not in the catalog `availableTools`. Merge alongside\n * {@link buildAgentMentionItems} in the editor's mention list.\n /\nexport const buildCustomToolMentionItems = (\n\tconfigTools: ConfigToolConfig[] = [],\n\trestApiTools: RestApiToolConfig[] = [],\n): MentionItem[] => [\n\t...restApiTools.map(restApiMentionItem),\n\t...configTools.map(configToolMentionItem),\n];\n\nconst escapeHtml = (raw: string): string =>\n\traw.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');\n\nconst escapeAttr = (raw: string): string =>\n\tescapeHtml(raw).replace(/\"/g, '"');\n\n/\n The HTML for a single mention chip. Must round-trip through the TipTap mention\n * extension's `parseHTML` (`span[data-type=\"mentionAgent\"]`, reading\n * `data-id`/`data-label`/`data-kind`) — see MentionExtension.ts. `normalizeHtml`\n * is taught to keep `data-type=\"mention…\"` spans so this survives to the parser.\n /\nconst mentionSpanHtml = (\n\tid: string,\n\tlabel: string,\n\tkind: string,\n\tsource?: string,\n): string =>\n\t`<span data-type=\"mentionAgent\" class=\"bik-mention bik-mention--agent\"` +\n\t` data-id=\"${escapeAttr(id)}\" data-label=\"${escapeAttr(label)}\"` +\n\t` data-kind=\"${escapeAttr(kind)}\"` +\n\t(source ? ` data-source=\"${escapeAttr(source)}\"` : '') +\n\t`>${escapeHtml(label)}</span>`;\n\n/\n Public: HTML for one mention chip, for inserting at the cursor (e.g. when a\n * tool / sub-agent is added from the Step-3 side panel). Round-trips through the\n * same parser path as the rehydrated chips. `source` (tool source bucket) drives\n * the chip's leading icon.\n /\nexport const buildMentionHtml = (\n\tid: string,\n\tlabel: string,\n\tkind: 'tool' \| 'subagent' \| 'variable',\n\tsource?: string,\n): string => mentionSpanHtml(id, label, kind, source);\n\n/\n `{{tool:<id>}}` / `{{subagent:<id>}}` / `{{<variableName>}}` → the mention\n * item that produced them. The map key is the token's INNER text.\n /\nconst buildTokenLookup = (\n\tmentionItems: MentionItem[],\n): Map<string, MentionItem> => {\n\tconst byToken = new Map<string, MentionItem>();\n\tfor (const item of mentionItems) {\n\t\tconst meta = item.meta as unknown as MentionKindMeta \| undefined;\n\t\t// Everything is keyed by its kind-prefixed id (a tool's id is its tool_id).\n\t\tif (meta?.kind === 'tool') {\n\t\t\tbyToken.set(`tool:${String(item.id)}`, item);\n\t\t} else if (meta?.kind === 'subagent') {\n\t\t\tbyToken.set(`subagent:${String(item.id)}`, item);\n\t\t} else if (meta?.kind === 'variable') {\n\t\t\tbyToken.set(`variable:${String(item.id)}`, item);\n\t\t}\n\t}\n\treturn byToken;\n};\n\n// Matches the kind-prefixed reference tokens we render as chips. Other\n// `{{var}}` tokens fall through untouched (left as literal text for the\n// variable decoration).\nconst REFERENCE_TOKEN = /\\{\\{((?:tool\|subagent\|variable):[^{}]+)\\}\\}/g;\n\n/* Escape plain text, swapping recognised reference tokens for mention spans. /\nconst inlineToHtml = (\n\tsegment: string,\n\tbyToken: Map<string, MentionItem>,\n): string => {\n\tlet out = '';\n\tlet lastIndex = 0;\n\tREFERENCE_TOKEN.lastIndex = 0;\n\tlet match: RegExpExecArray \| null;\n\twhile ((match = REFERENCE_TOKEN.exec(segment)) !== null) {\n\t\tout += escapeHtml(segment.slice(lastIndex, match.index));\n\t\tconst item = byToken.get(match[1]);\n\t\tif (item) {\n\t\t\tconst meta = item.meta as unknown as MentionKindMeta;\n\t\t\tout += mentionSpanHtml(\n\t\t\t\tString(item.id),\n\t\t\t\titem.label,\n\t\t\t\tmeta.kind,\n\t\t\t\tmeta.source,\n\t\t\t);\n\t\t} else {\n\t\t\t// Not in any available list (removed tool / unknown variable) → keep the\n\t\t\t// raw token as literal text.\n\t\t\tout += escapeHtml(match[0]);\n\t\t}\n\t\tlastIndex = REFERENCE_TOKEN.lastIndex;\n\t}\n\tout += escapeHtml(segment.slice(lastIndex));\n\treturn out.replace(/\\n/g, '<br>');\n};\n\n/\n Convert the stored instructions string into HTML for `BikEditor.initialContent`.\n * `{{tool:KEY}}` / `{{subagent:ID}}` tokens are rehydrated into mention chips\n * (resolved via `mentionItems`); any other `{{…}}` token is left as literal text\n * for the editor's variable decoration. Newlines become paragraph / line breaks.\n /\nexport const instructionsToEditorHtml = (\n\ttext: string,\n\tmentionItems: MentionItem[] = [],\n): string => {\n\tif (!text) {\n\t\treturn '';\n\t}\n\tconst byToken = buildTokenLookup(mentionItems);\n\treturn text\n\t\t.split(/\\n{2,}/)\n\t\t.map((para) => `<p>${inlineToHtml(para, byToken)}</p>`)\n\t\t.join('');\n};\n\ninterface ProseMirrorNode {\n\ttype: string;\n\ttext?: string;\n\tattrs?: Record<string, unknown>;\n\tcontent?: ProseMirrorNode[];\n}\n\n/\n The token for a mention node. All kinds store their id in the node, so the\n * token value is just that id — the kind only picks the prefix. The node's\n * `kind` attr is authoritative; `toolIds` is a fallback for older content\n * saved before the kind attr existed.\n /\nconst resolveMentionToken = (\n\tid: string,\n\tkind: string \| null,\n\ttoolIds: Set<string>,\n): string => {\n\tif (kind === 'variable') {\n\t\treturn `{{variable:${id}}}`;\n\t}\n\tconst resolved = kind ?? (toolIds.has(id) ? 'tool' : 'subagent');\n\treturn resolved === 'tool' ? `{{tool:${id}}}` : `{{subagent:${id}}}`;\n};\n\nconst nodeToText = (node: ProseMirrorNode, toolIds: Set<string>): string => {\n\tswitch (node.type) {\n\t\tcase 'text':\n\t\t\treturn node.text ?? '';\n\t\tcase 'mentionAgent':\n\t\tcase 'mentionTeam': {\n\t\t\tconst id = node.attrs?.['id'];\n\t\t\tif (id == null) {\n\t\t\t\treturn '';\n\t\t\t}\n\t\t\tconst kind = node.attrs?.['kind'];\n\t\t\treturn resolveMentionToken(\n\t\t\t\tString(id),\n\t\t\t\tkind == null ? null : String(kind),\n\t\t\t\ttoolIds,\n\t\t\t);\n\t\t}\n\t\tcase 'variable':\n\t\t\treturn `{{${String(node.attrs?.['variableName'] ?? '')}}}`;\n\t\tcase 'hardBreak':\n\t\t\treturn '\\n';\n\t\tcase 'orderedList':\n\t\tcase 'bulletList': {\n\t\t\t// Flattening to plain text otherwise drops the list markers, so a\n\t\t\t// numbered / bulleted list looks \"removed\" after publish. Emit an\n\t\t\t// ordinal (\"1. \") / bullet (\"- \") prefix per item to preserve it.\n\t\t\tconst ordered = node.type === 'orderedList';\n\t\t\treturn (\n\t\t\t\t(node.content ?? [])\n\t\t\t\t\t.map(\n\t\t\t\t\t\t(item, i) =>\n\t\t\t\t\t\t\t`${ordered ? `${i + 1}.` : '-'} ${nodeToText(\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\ttoolIds,\n\t\t\t\t\t\t\t).replace(/\\n+$/, '')}`,\n\t\t\t\t\t)\n\t\t\t\t\t.join('\\n') + '\\n'\n\t\t\t);\n\t\t}\n\t\tdefault: {\n\t\t\tconst inner = (node.content ?? [])\n\t\t\t\t.map((child) => nodeToText(child, toolIds))\n\t\t\t\t.join('');\n\t\t\t// Block nodes terminate with a newline so paragraphs stay separated.\n\t\t\tconst BLOCK_NODES = ['paragraph', 'heading', 'listItem', 'blockquote'];\n\t\t\treturn BLOCK_NODES.includes(node.type) ? `${inner}\\n` : inner;\n\t\t}\n\t}\n};\n\n/\n Convert a BikEditor document (from `ref.getJSON()`) into the firebase\n * instructions string, replacing mention nodes with `{{subagent:<id>}}` /\n * `{{tool:<tool_id>}}` tokens.\n */\nexport const editorDocToInstructions = (\n\tdoc: Record<string, unknown> \| null,\n\ttools: AgentTool[],\n): string => {\n\tif (!doc) {\n\t\treturn '';\n\t}\n\tconst toolIds = new Set(tools.map((t) => t.tool_id));\n\treturn nodeToText(doc as unknown as ProseMirrorNode, toolIds).replace(\n\t\t/\\n+$/,\n\t\t'',\n\t);\n};\n"],"names":["toolSourceLabel","source","appLabel","ToolSource","TOOL_SOURCE_LABELS","appTypeLabel","applicationType","key","buildAgentMentionItems","tools","subAgents","t","s","variableTokenName","actualValue","buildVariableMentionItems","variablesData","items","walk","entry","actual","name","configToolName","restApiToolName","restApiMentionItem","configToolMentionItem","buildCustomToolMentionItems","configTools","restApiTools","escapeHtml","raw","escapeAttr","mentionSpanHtml","id","label","kind","buildMentionHtml","buildTokenLookup","mentionItems","byToken","item","meta","REFERENCE_TOKEN","inlineToHtml","segment","out","lastIndex","match","instructionsToEditorHtml","text","para","resolveMentionToken","toolIds","nodeToText","node","ordered","i","inner","child","editorDocToInstructions","doc"],"mappings":"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"}
1	+ {"version":3,"file":"mentionSerialization.js","sources":["../../../../../src/components/agent-builder/utils/mentionSerialization.ts"],"sourcesContent":["import type { ApplicationType } from '@bikdotai/bik-models/growth';\nimport { MentionItem } from '@src/editor';\nimport type {\n\tSubHeader,\n\tVariableListInterfaceV3,\n\tVariableV3,\n} from '../../variable-picker-v3/model';\nimport {\n\tAgentTool,\n\tConfigToolConfig,\n\tRestApiToolConfig,\n\tSubAgentRef,\n} from '../AgentBuilder.model';\nimport { TOOL_SOURCE_LABELS, ToolSource } from '../constants/tools';\n\n/*\n Serialization helpers between the BikEditor document and the firebase\n * `instructions` string.\n \n Firebase stores `instructions` as PLAIN TEXT with inline reference tokens:\n * - `{{subagent:<agentId>}}` — hand-off to another agent\n * - `{{tool:<tool_id>}}` — an action the agent can call\n * - `{{variable:<name>}}` — a template variable picked from the catalog\n \n In the editor those references are inserted via the `@` mention menu (which we\n * populate with BOTH tools and sub-agents). Mention nodes keep their `id` in the\n * ProseMirror doc JSON (the rendered HTML drops it), so we serialize from the doc\n * JSON — not from HTML.\n /\n\nexport interface MentionKindMeta {\n\t/* Distinguishes a tool / sub-agent / variable reference. /\n\tkind: 'tool' \| 'subagent' \| 'variable';\n\t/* Plain item name (no prefix) shown in the picker dropdown rows. /\n\tplainLabel?: string;\n\t/* For tools: the source bucket (manifest / shopify / …) the picker groups by. /\n\tsource?: string;\n\t/* For tools: touches customer-private data → shows a shield in the picker. /\n\tauthRequired?: boolean;\n}\n\n// Source labels moved to constants/tools.ts; re-exported for existing importers.\nexport { TOOL_SOURCE_LABELS };\n\n/\n Human label for a tool source. The native tools are named after whichever host\n * product the merchant is in — \"Manifest\" in Manifest, \"BIK\" in BIK — so both an\n * explicit `manifest` source and a missing one resolve to `appLabel`. Every other\n * source is a vendor name, then the raw key.\n /\nexport const toolSourceLabel = (\n\tsource: string \| undefined,\n\tappLabel = 'Manifest',\n): string => {\n\tif (!source \|\| source === ToolSource.Manifest) {\n\t\treturn appLabel;\n\t}\n\treturn TOOL_SOURCE_LABELS[source as ToolSource] ?? source;\n};\n\n/* Human label for the host application, used as the tool-chip prefix. /\nexport const appTypeLabel = (applicationType?: ApplicationType): string => {\n\tconst key = applicationType ? String(applicationType) : '';\n\tif (key === 'BIK') {\n\t\treturn 'BIK';\n\t}\n\tif (key === 'BSP') {\n\t\treturn 'BSP';\n\t}\n\treturn 'Manifest';\n};\n\n/\n Build the combined `@` mention list from the available tools + sub-agents.\n \n The `label` is the CHIP text shown once inserted — tools read\n * `\"<App> : <tool name>\"` (e.g. \"Manifest : Look up order\"), sub-agents read\n * `\"sub-agent: <name>\"`. `meta.plainLabel` is the un-prefixed name for the\n * picker rows, and `meta.kind` drives the `{{tool}}` / `{{subagent}}` colour.\n /\nexport const buildAgentMentionItems = (\n\ttools: AgentTool[],\n\tsubAgents: SubAgentRef[],\n\tappLabel = 'Manifest',\n): MentionItem[] => [\n\t...tools.map(\n\t\t(t): MentionItem => ({\n\t\t\tid: t.tool_id,\n\t\t\tlabel: `${toolSourceLabel(t.source, appLabel)} : ${t.display_name}`,\n\t\t\tmeta: {\n\t\t\t\tkind: 'tool',\n\t\t\t\tplainLabel: t.display_name,\n\t\t\t\tsource: t.source,\n\t\t\t\tauthRequired: t.auth_required,\n\t\t\t},\n\t\t}),\n\t),\n\t...subAgents.map(\n\t\t(s): MentionItem => ({\n\t\t\tid: s.id,\n\t\t\tlabel: `sub-agent: ${s.name}`,\n\t\t\tmeta: { kind: 'subagent', plainLabel: s.name },\n\t\t}),\n\t),\n];\n\n/* Strip the `{{ }}` wrapper from a variable token (`{{a.b}}` → `a.b`). /\nexport const variableTokenName = (actualValue: string): string =>\n\tactualValue.replace(/^\\{\\{\|\\}\\}$/g, '');\n\n/\n Flatten the (nested) variable catalog into mention items, so stored\n * `{{<name>}}` tokens rehydrate as `Variable: <display name>` chips. The item\n * id is the BARE token name (no braces) — `resolveMentionToken` re-wraps it on\n * save. Merge alongside {@link buildAgentMentionItems} for serialization.\n /\nexport const buildVariableMentionItems = (\n\tvariablesData: VariableListInterfaceV3[] = [],\n): MentionItem[] => {\n\tconst items: MentionItem[] = [];\n\tconst walk = (entry: VariableListInterfaceV3 \| SubHeader \| VariableV3) => {\n\t\tconst actual = (entry as VariableV3).actualValue;\n\t\tif (actual) {\n\t\t\tconst name = variableTokenName(actual);\n\t\t\titems.push({\n\t\t\t\tid: name,\n\t\t\t\t// Chip text is the raw token — designers want variables to read as\n\t\t\t\t// {{a.b.c}} (styled purple by the editor), not a labelled chip.\n\t\t\t\tlabel: `{{${name}}}`,\n\t\t\t\tmeta: { kind: 'variable', plainLabel: entry.displayName },\n\t\t\t});\n\t\t}\n\t\tObject.values(entry.variables ?? {}).forEach(walk);\n\t};\n\tvariablesData.forEach(walk);\n\treturn items;\n};\n\n/* Display name for a shared config tool: the merchant's action name when set\n * (MAP-7245), else first recipient / channel (pre-action-name tools), else\n * generic. /\nexport const configToolName = (t: ConfigToolConfig): string => {\n\tif (t.tool_key === 'send_slack_message') {\n\t\treturn (\n\t\t\tString(t.params['channelId']?.value ?? '').trim() \|\| 'Send Slack message'\n\t\t);\n\t}\n\tif (t.tool_key === 'send_email') {\n\t\tconst actionName = String(t.params['name']?.value ?? '').trim();\n\t\tif (actionName) {\n\t\t\treturn actionName;\n\t\t}\n\t\treturn (\n\t\t\tString(t.params['sendTo']?.value ?? '')\n\t\t\t\t.split(',')\n\t\t\t\t.map((s) => s.trim())\n\t\t\t\t.filter(Boolean)[0] \|\| 'Send email'\n\t\t);\n\t}\n\t// Future config-tool keys: no bespoke naming yet — fall back to the key.\n\treturn t.tool_key;\n};\n\n/* Display name for a Rest API tool row / chip. /\nexport const restApiToolName = (t: RestApiToolConfig): string =>\n\tt.name \|\| 'Rest API';\n\n/* The `@`-mention chip item for a Rest API tool (kind 'tool', restapi source). /\nexport const restApiMentionItem = (t: RestApiToolConfig): MentionItem => {\n\tconst name = restApiToolName(t);\n\treturn {\n\t\tid: t.id,\n\t\tlabel: `${TOOL_SOURCE_LABELS[ToolSource.RestApi]} : ${name}`,\n\t\tmeta: { kind: 'tool', plainLabel: name, source: ToolSource.RestApi },\n\t};\n};\n\n/* The `@`-mention chip item for a shared config tool (email / Slack). /\nexport const configToolMentionItem = (t: ConfigToolConfig): MentionItem => {\n\tconst source =\n\t\tt.tool_key === 'send_slack_message'\n\t\t\t? ToolSource.Slack\n\t\t\t: ToolSource.EmailHandover;\n\tconst name = configToolName(t);\n\treturn {\n\t\tid: t.id,\n\t\tlabel: `${TOOL_SOURCE_LABELS[source]} : ${name}`,\n\t\tmeta: { kind: 'tool', plainLabel: name, source },\n\t};\n};\n\n/\n Mention items for the inline-configured custom tools (Rest API + email / Slack)\n * so their `{{tool:<id>}}` tokens rehydrate as chips — they live on the agent\n * value, not in the catalog `availableTools`. Merge alongside\n * {@link buildAgentMentionItems} in the editor's mention list.\n /\nexport const buildCustomToolMentionItems = (\n\tconfigTools: ConfigToolConfig[] = [],\n\trestApiTools: RestApiToolConfig[] = [],\n): MentionItem[] => [\n\t...restApiTools.map(restApiMentionItem),\n\t...configTools.map(configToolMentionItem),\n];\n\nconst escapeHtml = (raw: string): string =>\n\traw.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');\n\nconst escapeAttr = (raw: string): string =>\n\tescapeHtml(raw).replace(/\"/g, '"');\n\n/\n The HTML for a single mention chip. Must round-trip through the TipTap mention\n * extension's `parseHTML` (`span[data-type=\"mentionAgent\"]`, reading\n * `data-id`/`data-label`/`data-kind`) — see MentionExtension.ts. `normalizeHtml`\n * is taught to keep `data-type=\"mention…\"` spans so this survives to the parser.\n /\nconst mentionSpanHtml = (\n\tid: string,\n\tlabel: string,\n\tkind: string,\n\tsource?: string,\n): string =>\n\t`<span data-type=\"mentionAgent\" class=\"bik-mention bik-mention--agent\"` +\n\t` data-id=\"${escapeAttr(id)}\" data-label=\"${escapeAttr(label)}\"` +\n\t` data-kind=\"${escapeAttr(kind)}\"` +\n\t(source ? ` data-source=\"${escapeAttr(source)}\"` : '') +\n\t`>${escapeHtml(label)}</span>`;\n\n/\n Public: HTML for one mention chip, for inserting at the cursor (e.g. when a\n * tool / sub-agent is added from the Step-3 side panel). Round-trips through the\n * same parser path as the rehydrated chips. `source` (tool source bucket) drives\n * the chip's leading icon.\n /\nexport const buildMentionHtml = (\n\tid: string,\n\tlabel: string,\n\tkind: 'tool' \| 'subagent' \| 'variable',\n\tsource?: string,\n): string => mentionSpanHtml(id, label, kind, source);\n\n/\n `{{tool:<id>}}` / `{{subagent:<id>}}` / `{{<variableName>}}` → the mention\n * item that produced them. The map key is the token's INNER text.\n /\nconst buildTokenLookup = (\n\tmentionItems: MentionItem[],\n): Map<string, MentionItem> => {\n\tconst byToken = new Map<string, MentionItem>();\n\tfor (const item of mentionItems) {\n\t\tconst meta = item.meta as unknown as MentionKindMeta \| undefined;\n\t\t// Everything is keyed by its kind-prefixed id (a tool's id is its tool_id).\n\t\tif (meta?.kind === 'tool') {\n\t\t\tbyToken.set(`tool:${String(item.id)}`, item);\n\t\t} else if (meta?.kind === 'subagent') {\n\t\t\tbyToken.set(`subagent:${String(item.id)}`, item);\n\t\t} else if (meta?.kind === 'variable') {\n\t\t\tbyToken.set(`variable:${String(item.id)}`, item);\n\t\t}\n\t}\n\treturn byToken;\n};\n\n// Matches the kind-prefixed reference tokens we render as chips. Other\n// `{{var}}` tokens fall through untouched (left as literal text for the\n// variable decoration).\nconst REFERENCE_TOKEN = /\\{\\{((?:tool\|subagent\|variable):[^{}]+)\\}\\}/g;\n\n/* Escape plain text, swapping recognised reference tokens for mention spans. /\nconst inlineToHtml = (\n\tsegment: string,\n\tbyToken: Map<string, MentionItem>,\n): string => {\n\tlet out = '';\n\tlet lastIndex = 0;\n\tREFERENCE_TOKEN.lastIndex = 0;\n\tlet match: RegExpExecArray \| null;\n\twhile ((match = REFERENCE_TOKEN.exec(segment)) !== null) {\n\t\tout += escapeHtml(segment.slice(lastIndex, match.index));\n\t\tconst item = byToken.get(match[1]);\n\t\tif (item) {\n\t\t\tconst meta = item.meta as unknown as MentionKindMeta;\n\t\t\tout += mentionSpanHtml(\n\t\t\t\tString(item.id),\n\t\t\t\titem.label,\n\t\t\t\tmeta.kind,\n\t\t\t\tmeta.source,\n\t\t\t);\n\t\t} else {\n\t\t\t// Not in any available list (removed tool / unknown variable) → keep the\n\t\t\t// raw token as literal text.\n\t\t\tout += escapeHtml(match[0]);\n\t\t}\n\t\tlastIndex = REFERENCE_TOKEN.lastIndex;\n\t}\n\tout += escapeHtml(segment.slice(lastIndex));\n\treturn out.replace(/\\n/g, '<br>');\n};\n\n/\n Convert the stored instructions string into HTML for `BikEditor.initialContent`.\n * `{{tool:KEY}}` / `{{subagent:ID}}` tokens are rehydrated into mention chips\n * (resolved via `mentionItems`); any other `{{…}}` token is left as literal text\n * for the editor's variable decoration. Newlines become paragraph / line breaks.\n /\nexport const instructionsToEditorHtml = (\n\ttext: string,\n\tmentionItems: MentionItem[] = [],\n): string => {\n\tif (!text) {\n\t\treturn '';\n\t}\n\tconst byToken = buildTokenLookup(mentionItems);\n\treturn text\n\t\t.split(/\\n{2,}/)\n\t\t.map((para) => `<p>${inlineToHtml(para, byToken)}</p>`)\n\t\t.join('');\n};\n\ninterface ProseMirrorNode {\n\ttype: string;\n\ttext?: string;\n\tattrs?: Record<string, unknown>;\n\tcontent?: ProseMirrorNode[];\n}\n\n/\n The token for a mention node. All kinds store their id in the node, so the\n * token value is just that id — the kind only picks the prefix. The node's\n * `kind` attr is authoritative; `toolIds` is a fallback for older content\n * saved before the kind attr existed.\n /\nconst resolveMentionToken = (\n\tid: string,\n\tkind: string \| null,\n\ttoolIds: Set<string>,\n): string => {\n\tif (kind === 'variable') {\n\t\treturn `{{variable:${id}}}`;\n\t}\n\tconst resolved = kind ?? (toolIds.has(id) ? 'tool' : 'subagent');\n\treturn resolved === 'tool' ? `{{tool:${id}}}` : `{{subagent:${id}}}`;\n};\n\nconst nodeToText = (node: ProseMirrorNode, toolIds: Set<string>): string => {\n\tswitch (node.type) {\n\t\tcase 'text':\n\t\t\treturn node.text ?? '';\n\t\tcase 'mentionAgent':\n\t\tcase 'mentionTeam': {\n\t\t\tconst id = node.attrs?.['id'];\n\t\t\tif (id == null) {\n\t\t\t\treturn '';\n\t\t\t}\n\t\t\tconst kind = node.attrs?.['kind'];\n\t\t\treturn resolveMentionToken(\n\t\t\t\tString(id),\n\t\t\t\tkind == null ? null : String(kind),\n\t\t\t\ttoolIds,\n\t\t\t);\n\t\t}\n\t\tcase 'variable':\n\t\t\treturn `{{${String(node.attrs?.['variableName'] ?? '')}}}`;\n\t\tcase 'hardBreak':\n\t\t\treturn '\\n';\n\t\tcase 'orderedList':\n\t\tcase 'bulletList': {\n\t\t\t// Flattening to plain text otherwise drops the list markers, so a\n\t\t\t// numbered / bulleted list looks \"removed\" after publish. Emit an\n\t\t\t// ordinal (\"1. \") / bullet (\"- \") prefix per item to preserve it.\n\t\t\tconst ordered = node.type === 'orderedList';\n\t\t\treturn (\n\t\t\t\t(node.content ?? [])\n\t\t\t\t\t.map(\n\t\t\t\t\t\t(item, i) =>\n\t\t\t\t\t\t\t`${ordered ? `${i + 1}.` : '-'} ${nodeToText(\n\t\t\t\t\t\t\t\titem,\n\t\t\t\t\t\t\t\ttoolIds,\n\t\t\t\t\t\t\t).replace(/\\n+$/, '')}`,\n\t\t\t\t\t)\n\t\t\t\t\t.join('\\n') + '\\n'\n\t\t\t);\n\t\t}\n\t\tdefault: {\n\t\t\tconst inner = (node.content ?? [])\n\t\t\t\t.map((child) => nodeToText(child, toolIds))\n\t\t\t\t.join('');\n\t\t\t// Block nodes terminate with a newline so paragraphs stay separated.\n\t\t\tconst BLOCK_NODES = ['paragraph', 'heading', 'listItem', 'blockquote'];\n\t\t\treturn BLOCK_NODES.includes(node.type) ? `${inner}\\n` : inner;\n\t\t}\n\t}\n};\n\n/\n Convert a BikEditor document (from `ref.getJSON()`) into the firebase\n * instructions string, replacing mention nodes with `{{subagent:<id>}}` /\n * `{{tool:<tool_id>}}` tokens.\n */\nexport const editorDocToInstructions = (\n\tdoc: Record<string, unknown> \| null,\n\ttools: AgentTool[],\n): string => {\n\tif (!doc) {\n\t\treturn '';\n\t}\n\tconst toolIds = new Set(tools.map((t) => t.tool_id));\n\treturn nodeToText(doc as unknown as ProseMirrorNode, toolIds).replace(\n\t\t/\\n+$/,\n\t\t'',\n\t);\n};\n"],"names":["toolSourceLabel","source","appLabel","ToolSource","TOOL_SOURCE_LABELS","appTypeLabel","applicationType","key","buildAgentMentionItems","tools","subAgents","t","s","variableTokenName","actualValue","buildVariableMentionItems","variablesData","items","walk","entry","actual","name","configToolName","actionName","restApiToolName","restApiMentionItem","configToolMentionItem","buildCustomToolMentionItems","configTools","restApiTools","escapeHtml","raw","escapeAttr","mentionSpanHtml","id","label","kind","buildMentionHtml","buildTokenLookup","mentionItems","byToken","item","meta","REFERENCE_TOKEN","inlineToHtml","segment","out","lastIndex","match","instructionsToEditorHtml","text","para","resolveMentionToken","toolIds","nodeToText","node","ordered","i","inner","child","editorDocToInstructions","doc"],"mappings":";AAkDO,MAAMA,IAAkB,CAC9BC,GACAC,IAAW,eAEP,CAACD,KAAUA,MAAWE,EAAW,WAC7BD,IAEDE,EAAmBH,CAAoB,KAAKA,GAIvCI,IAAe,CAACC,MAA8C;AAC1E,QAAMC,IAAMD,IAAkB,OAAOA,CAAe,IAAI;AACxD,SAAIC,MAAQ,QACJ,QAEJA,MAAQ,QACJ,QAED;AACR,GAUaC,IAAyB,CACrCC,GACAC,GACAR,IAAW,eACQ;AAAA,EACnB,GAAGO,EAAM;AAAA,IACR,CAACE,OAAoB;AAAA,MACpB,IAAIA,EAAE;AAAA,MACN,OAAO,GAAGX,EAAgBW,EAAE,QAAQT,CAAQ,CAAC,MAAMS,EAAE,YAAY;AAAA,MACjE,MAAM;AAAA,QACL,MAAM;AAAA,QACN,YAAYA,EAAE;AAAA,QACd,QAAQA,EAAE;AAAA,QACV,cAAcA,EAAE;AAAA,MAAA;AAAA,IACjB;AAAA,EACD;AAAA,EAED,GAAGD,EAAU;AAAA,IACZ,CAACE,OAAoB;AAAA,MACpB,IAAIA,EAAE;AAAA,MACN,OAAO,cAAcA,EAAE,IAAI;AAAA,MAC3B,MAAM,EAAE,MAAM,YAAY,YAAYA,EAAE,KAAA;AAAA,IAAK;AAAA,EAC9C;AAEF,GAGaC,IAAoB,CAACC,MACjCA,EAAY,QAAQ,gBAAgB,EAAE,GAQ1BC,IAA4B,CACxCC,IAA2C,OACxB;AACnB,QAAMC,IAAuB,CAAA,GACvBC,IAAO,CAACC,MAA4D;AACzE,UAAMC,IAAUD,EAAqB;AACrC,QAAIC,GAAQ;AACX,YAAMC,IAAOR,EAAkBO,CAAM;AACrC,MAAAH,EAAM,KAAK;AAAA,QACV,IAAII;AAAA;AAAA;AAAA,QAGJ,OAAO,KAAKA,CAAI;AAAA,QAChB,MAAM,EAAE,MAAM,YAAY,YAAYF,EAAM,YAAA;AAAA,MAAY,CACxD;AAAA,IACF;AACA,WAAO,OAAOA,EAAM,aAAa,CAAA,CAAE,EAAE,QAAQD,CAAI;AAAA,EAClD;AACA,SAAAF,EAAc,QAAQE,CAAI,GACnBD;AACR,GAKaK,IAAiB,CAACX,MAAgC;AAC9D,MAAIA,EAAE,aAAa;AAClB,WACC,OAAOA,EAAE,OAAO,WAAc,SAAS,EAAE,EAAE,KAAA,KAAU;AAGvD,MAAIA,EAAE,aAAa,cAAc;AAChC,UAAMY,IAAa,OAAOZ,EAAE,OAAO,MAAS,SAAS,EAAE,EAAE,KAAA;AACzD,WAAIY,KAIH,OAAOZ,EAAE,OAAO,QAAW,SAAS,EAAE,EACpC,MAAM,GAAG,EACT,IAAI,CAACC,MAAMA,EAAE,KAAA,CAAM,EACnB,OAAO,OAAO,EAAE,CAAC,KAAK;AAAA,EAE1B;AAEA,SAAOD,EAAE;AACV,GAGaa,IAAkB,CAACb,MAC/BA,EAAE,QAAQ,YAGEc,IAAqB,CAACd,MAAsC;AACxE,QAAMU,IAAOG,EAAgBb,CAAC;AAC9B,SAAO;AAAA,IACN,IAAIA,EAAE;AAAA,IACN,OAAO,GAAGP,EAAmBD,EAAW,OAAO,CAAC,MAAMkB,CAAI;AAAA,IAC1D,MAAM,EAAE,MAAM,QAAQ,YAAYA,GAAM,QAAQlB,EAAW,QAAA;AAAA,EAAQ;AAErE,GAGauB,IAAwB,CAACf,MAAqC;AAC1E,QAAMV,IACLU,EAAE,aAAa,uBACZR,EAAW,QACXA,EAAW,eACTkB,IAAOC,EAAeX,CAAC;AAC7B,SAAO;AAAA,IACN,IAAIA,EAAE;AAAA,IACN,OAAO,GAAGP,EAAmBH,CAAM,CAAC,MAAMoB,CAAI;AAAA,IAC9C,MAAM,EAAE,MAAM,QAAQ,YAAYA,GAAM,QAAApB,EAAA;AAAA,EAAO;AAEjD,GAQa0B,IAA8B,CAC1CC,IAAkC,IAClCC,IAAoC,CAAA,MACjB;AAAA,EACnB,GAAGA,EAAa,IAAIJ,CAAkB;AAAA,EACtC,GAAGG,EAAY,IAAIF,CAAqB;AACzC,GAEMI,IAAa,CAACC,MACnBA,EAAI,QAAQ,MAAM,OAAO,EAAE,QAAQ,MAAM,MAAM,EAAE,QAAQ,MAAM,MAAM,GAEhEC,IAAa,CAACD,MACnBD,EAAWC,CAAG,EAAE,QAAQ,MAAM,QAAQ,GAQjCE,IAAkB,CACvBC,GACAC,GACAC,GACAnC,MAEA,kFACa+B,EAAWE,CAAE,CAAC,iBAAiBF,EAAWG,CAAK,CAAC,gBAC9CH,EAAWI,CAAI,CAAC,OAC9BnC,IAAS,iBAAiB+B,EAAW/B,CAAM,CAAC,MAAM,MACnD,IAAI6B,EAAWK,CAAK,CAAC,WAQTE,IAAmB,CAC/BH,GACAC,GACAC,GACAnC,MACYgC,EAAgBC,GAAIC,GAAOC,GAAMnC,CAAM,GAM9CqC,IAAmB,CACxBC,MAC8B;AAC9B,QAAMC,wBAAc,IAAA;AACpB,aAAWC,KAAQF,GAAc;AAChC,UAAMG,IAAOD,EAAK;AAElB,IAAIC,GAAM,SAAS,SAClBF,EAAQ,IAAI,QAAQ,OAAOC,EAAK,EAAE,CAAC,IAAIA,CAAI,IACjCC,GAAM,SAAS,aACzBF,EAAQ,IAAI,YAAY,OAAOC,EAAK,EAAE,CAAC,IAAIA,CAAI,IACrCC,GAAM,SAAS,cACzBF,EAAQ,IAAI,YAAY,OAAOC,EAAK,EAAE,CAAC,IAAIA,CAAI;AAAA,EAEjD;AACA,SAAOD;AACR,GAKMG,IAAkB,gDAGlBC,IAAe,CACpBC,GACAL,MACY;AACZ,MAAIM,IAAM,IACNC,IAAY;AAChB,EAAAJ,EAAgB,YAAY;AAC5B,MAAIK;AACJ,UAAQA,IAAQL,EAAgB,KAAKE,CAAO,OAAO,QAAM;AACxD,IAAAC,KAAOhB,EAAWe,EAAQ,MAAME,GAAWC,EAAM,KAAK,CAAC;AACvD,UAAMP,IAAOD,EAAQ,IAAIQ,EAAM,CAAC,CAAC;AACjC,QAAIP,GAAM;AACT,YAAMC,IAAOD,EAAK;AAClB,MAAAK,KAAOb;AAAA,QACN,OAAOQ,EAAK,EAAE;AAAA,QACdA,EAAK;AAAA,QACLC,EAAK;AAAA,QACLA,EAAK;AAAA,MAAA;AAAA,IAEP;AAGC,MAAAI,KAAOhB,EAAWkB,EAAM,CAAC,CAAC;AAE3B,IAAAD,IAAYJ,EAAgB;AAAA,EAC7B;AACA,SAAAG,KAAOhB,EAAWe,EAAQ,MAAME,CAAS,CAAC,GACnCD,EAAI,QAAQ,OAAO,MAAM;AACjC,GAQaG,IAA2B,CACvCC,GACAX,IAA8B,OAClB;AACZ,MAAI,CAACW;AACJ,WAAO;AAER,QAAMV,IAAUF,EAAiBC,CAAY;AAC7C,SAAOW,EACL,MAAM,QAAQ,EACd,IAAI,CAACC,MAAS,MAAMP,EAAaO,GAAMX,CAAO,CAAC,MAAM,EACrD,KAAK,EAAE;AACV,GAeMY,IAAsB,CAC3BlB,GACAE,GACAiB,MAEIjB,MAAS,aACL,cAAcF,CAAE,QAEPE,MAASiB,EAAQ,IAAInB,CAAE,IAAI,SAAS,iBACjC,SAAS,UAAUA,CAAE,OAAO,cAAcA,CAAE,MAG3DoB,IAAa,CAACC,GAAuBF,MAAiC;AAC3E,UAAQE,EAAK,MAAA;AAAA,IACZ,KAAK;AACJ,aAAOA,EAAK,QAAQ;AAAA,IACrB,KAAK;AAAA,IACL,KAAK,eAAe;AACnB,YAAMrB,IAAKqB,EAAK,OAAQ;AACxB,UAAIrB,KAAM;AACT,eAAO;AAER,YAAME,IAAOmB,EAAK,OAAQ;AAC1B,aAAOH;AAAA,QACN,OAAOlB,CAAE;AAAA,QACTE,KAAQ,OAAO,OAAO,OAAOA,CAAI;AAAA,QACjCiB;AAAA,MAAA;AAAA,IAEF;AAAA,IACA,KAAK;AACJ,aAAO,KAAK,OAAOE,EAAK,OAAQ,gBAAmB,EAAE,CAAC;AAAA,IACvD,KAAK;AACJ,aAAO;AAAA;AAAA,IACR,KAAK;AAAA,IACL,KAAK,cAAc;AAIlB,YAAMC,IAAUD,EAAK,SAAS;AAC9B,cACEA,EAAK,WAAW,CAAA,GACf;AAAA,QACA,CAACd,GAAMgB,MACN,GAAGD,IAAU,GAAGC,IAAI,CAAC,MAAM,GAAG,IAAIH;AAAA,UACjCb;AAAA,UACAY;AAAA,QAAA,EACC,QAAQ,QAAQ,EAAE,CAAC;AAAA,MAAA,EAEtB,KAAK;AAAA,CAAI,IAAI;AAAA;AAAA,IAEjB;AAAA,IACA,SAAS;AACR,YAAMK,KAASH,EAAK,WAAW,CAAA,GAC7B,IAAI,CAACI,MAAUL,EAAWK,GAAON,CAAO,CAAC,EACzC,KAAK,EAAE;AAGT,aADoB,CAAC,aAAa,WAAW,YAAY,YAAY,EAClD,SAASE,EAAK,IAAI,IAAI,GAAGG,CAAK;AAAA,IAAOA;AAAA,IACzD;AAAA,EAAA;AAEF,GAOaE,IAA0B,CACtCC,GACApD,MACY;AACZ,MAAI,CAACoD;AACJ,WAAO;AAER,QAAMR,IAAU,IAAI,IAAI5C,EAAM,IAAI,CAACE,MAAMA,EAAE,OAAO,CAAC;AACnD,SAAO2C,EAAWO,GAAmCR,CAAO,EAAE;AAAA,IAC7D;AAAA,IACA;AAAA,EAAA;AAEF;"}

package/dist/esm/components/button/Button.js CHANGED Viewed

@@ -1,9 +1,9 @@
-import { jsx as t, jsxs as B, Fragment as G } from "react/jsx-runtime";
-import s, { forwardRef as P, useCallback as W } from "react";
-import { Button as $, ButtonCustomDashedBorder as q } from "./Button.styled.js";
-import { getButtonIconColor as z, SpinnerColorMap as A, GetButtonTextComponent as H } from "./themes.js";
-import { Spinner as J } from "../spinner/Spinner.js";
-const K = P(
+import { jsx as t, jsxs as B, Fragment as F } from "react/jsx-runtime";
+import s, { forwardRef as G, useCallback as P } from "react";
+import { Button as W, ButtonCustomDashedBorder as $ } from "./Button.styled.js";
+import { getButtonIconColor as q, SpinnerColorMap as z, GetButtonTextComponent as A } from "./themes.js";
+import { Spinner as H } from "../spinner/Spinner.js";
+const J = G(
   ({
     version: u,
     id: v,
@@ -27,21 +27,20 @@ const K = P(
     customIconColor: c,
     buttonColor: R,
     LeadingIconStyles: _,
-    gap: g,
     ...N
-  }, D) => {
-    const F = H(
+  }, g) => {
+    const D = A(
       e,
       l,
       a
-    ), f = z(
+    ), f = q(
       e,
       l,
       n,
       a,
       r,
       p
-    ), o = W(() => {
+    ), o = P(() => {
       const x = e === "chip" || e === "xs" ? 16 : 20;
       return {
         height: x,
@@ -52,13 +51,13 @@ const K = P(
       };
     }, [e, c, f]);
     return /* @__PURE__ */ t(
-      $,
+      W,
       {
         "data-test": N["data-test"],
         version: u,
         onClick: r ? () => {
         } : y,
-        ref: D,
+        ref: g,
         id: v,
         disabled: a,
         size: e,
@@ -70,16 +69,15 @@ const K = P(
         activated: S,
         error: j,
         buttonColor: R,
-        gap: g,
         ...N,
         children: /* @__PURE__ */ B("div", { className: "button-container", children: [
-          l.startsWith("dash") && /* @__PURE__ */ t(q, {}),
+          l.startsWith("dash") && /* @__PURE__ */ t($, {}),
           /* @__PURE__ */ t("div", { className: "overlay-container", children: r && /* @__PURE__ */ t(
-            J,
+            H,
             {
               className: "spinner",
               size: "small",
-              color: A(l, n)
+              color: z(l, n)
             }
           ) }),
           i && /* @__PURE__ */ t("div", { className: "icon-component", children: s.createElement(i, o()) }),
@@ -92,7 +90,7 @@ const K = P(
             }
           ),
           m ? /* @__PURE__ */ B(
-            F,
+            D,
             {
               className: "text",
               style: {
@@ -104,15 +102,15 @@ const K = P(
                 /* @__PURE__ */ t("div", { className: "text-subtitle", children: E })
               ]
             }
-          ) : /* @__PURE__ */ t(G, {}),
+          ) : /* @__PURE__ */ t(F, {}),
           h && /* @__PURE__ */ t("div", { className: "icon-trailing", style: { zIndex: 1 }, children: s.createElement(h, o()) })
         ] })
       }
     );
   }
 );
-K.displayName = "Button";
+J.displayName = "Button";
 export {
-  K as Button
+  J as Button
 };
 //# sourceMappingURL=Button.js.map

package/dist/esm/components/button/Button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import { forwardRef, useCallback } from 'react';\nimport React from 'react';\nimport { Spinner } from '../spinner';\nimport * as Sc from './Button.styled';\nimport { ButtonProps } from './model';\nimport {\n\tgetButtonIconColor,\n\tGetButtonTextComponent,\n\tSpinnerColorMap,\n} from './themes';\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tversion,\n\t\t\tid,\n\t\t\tbuttonType = 'primary',\n\t\t\tsize = 'small',\n\t\t\tbuttonText,\n\t\t\tdisabled,\n\t\t\tIconComponent,\n\t\t\tLeadingIcon,\n\t\t\tTrailingIcon,\n\t\t\tisLoading,\n\t\t\tinverse,\n\t\t\tonClick,\n\t\t\tmatchParentWidth,\n\t\t\tsubtitle,\n\t\t\tdarkMode,\n\t\t\tactivated,\n\t\t\terror,\n\t\t\tbuttonTextColor,\n\t\t\tbuttonFontSize,\n\t\t\tcustomIconColor,\n\t\t\tbuttonColor,\n\t\t\tLeadingIconStyles,\n\t\t\~~tgap,\n\~~t~~\t\t~~...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ButtonTextElement = GetButtonTextComponent(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tdisabled,\n\t\t);\n\n\t\tconst iconColor = getButtonIconColor(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tinverse,\n\t\t\tdisabled,\n\t\t\tisLoading,\n\t\t\tdarkMode,\n\t\t);\n\n\t\tconst getIconProps = useCallback(() => {\n\t\t\tconst iconSize = size === 'chip' \|\| size === 'xs' ? 16 : 20;\n\t\t\treturn {\n\t\t\t\theight: iconSize,\n\t\t\t\twidth: iconSize,\n\t\t\t\tcolor: customIconColor ? customIconColor : iconColor,\n\t\t\t\tstyle: { display: 'block' },\n\t\t\t\tclassName: 'icon',\n\t\t\t};\n\t\t}, [size, customIconColor, iconColor]);\n\n\t\treturn (\n\t\t\t<Sc.Button\n\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\tversion={version}\n\t\t\t\tonClick={\n\t\t\t\t\tisLoading\n\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t// Do nothing\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: onClick\n\t\t\t\t}\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tsize={size}\n\t\t\t\tbuttonType={buttonType}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tinverse={inverse}\n\t\t\t\tmatchParentWidth={matchParentWidth}\n\t\t\t\tdarkMode={darkMode}\n\t\t\t\tactivated={activated}\n\t\t\t\terror={error}\n\t\t\t\tbuttonColor={buttonColor}\n\t\t\t\~~tgap={gap}\n\~~t~~\t\t\t~~{...rest}\n\t\t\t>\n\t\t\t\t<div className=\"button-container\">\n\t\t\t\t\t{buttonType.startsWith('dash') && <Sc.ButtonCustomDashedBorder />}\n\t\t\t\t\t<div className=\"overlay-container\">\n\t\t\t\t\t\t{isLoading && (\n\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tcolor={SpinnerColorMap(buttonType, inverse)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{IconComponent && (\n\t\t\t\t\t\t<div className=\"icon-component\">\n\t\t\t\t\t\t\t{React.createElement(IconComponent, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{LeadingIcon && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tstyle={{ zIndex: 1, ...LeadingIconStyles }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{buttonText ? (\n\t\t\t\t\t\t<ButtonTextElement\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: buttonTextColor,\n\t\t\t\t\t\t\t\tfontSize: buttonFontSize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{buttonText}\n\t\t\t\t\t\t\t<div className=\"text-subtitle\">{subtitle}</div>\n\t\t\t\t\t\t</ButtonTextElement>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t\t{TrailingIcon && (\n\t\t\t\t\t\t<div className=\"icon-trailing\" style={{ zIndex: 1 }}>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Sc.Button>\n\t\t);\n\t},\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error","buttonTextColor","buttonFontSize","customIconColor","buttonColor","LeadingIconStyles","~~gap","~~rest","ref","ButtonTextElement","GetButtonTextComponent","iconColor","getButtonIconColor","getIconProps","useCallback","iconSize","jsx","Sc.Button","jsxs","Sc.ButtonCustomDashedBorder","Spinner","SpinnerColorMap","React","Fragment"],"mappings":";;;;;AAWO,MAAMA,IAASC;AAAA,EACrB,CACC;AAAA,IACC,SAAAC;AAAA,IACA,IAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,MAAAC,IAAO;AAAA,IACP,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,~~KAAAC;AAAA,IACA,~~GAAGC;AAAA,EAAA,GAEJC,MACI;AACJ,UAAMC,IAAoBC;AAAA,~~MACzBvB~~;AAAA,MACAD;AAAA,MACAG;AAAA,IAAA,~~GAGKsB~~,IAAYC;AAAA,~~MACjBzB~~;AAAA,MACAD;AAAA,MACAQ;AAAA,MACAL;AAAA,MACAI;AAAA,MACAK;AAAA,IAAA,~~GAGKe~~,IAAeC,EAAY,MAAM;AACtC,YAAMC,~~IAAW5B~~,MAAS,UAAUA,MAAS,OAAO,KAAK;AACzD,aAAO;AAAA,QACN,~~QAAQ4B~~;AAAA,QACR,OAAOA;AAAA,QACP,~~OAAOZ~~,~~KAAoCQ~~;AAAA,QAC3C,OAAO,EAAE,SAAS,QAAA;AAAA,QAClB,WAAW;AAAA,MAAA;AAAA,IAEb,GAAG,~~CAACxB~~,GAAMgB,~~GAAiBQ~~,CAAS,CAAC;AAErC,WACC,gBAAAK;AAAA,MAACC;AAAAA,MAAA;AAAA,QACA,aAAWV,EAAK,WAAW;AAAA,QAC3B,~~SAAAvB~~;AAAA,QACA,SACCS,IACG,MAAM;AAAA,QAEN,IACAE;AAAA,QAEJ,~~KAAAa~~;AAAA,QACA,~~IAAAvB~~;AAAA,QACA,UAAAI;AAAA,QACA,MAAAF;AAAA,QACA,YAAAD;AAAA,QACA,WAAAO;AAAA,QACA,SAAAC;AAAA,QACA,kBAAAE;AAAA,QACA,UAAAE;AAAA,QACA,WAAAC;AAAA,QACA,OAAAC;AAAA,QACA,aAAAI;AAAA,~~QACA,KAAAE;AAAA,~~QACC,~~GAAGC~~;AAAA,QAEJ,UAAA,gBAAAW,EAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,~~UAAAhC~~,EAAW,WAAW,MAAM,KAAK,~~gBAAA8B~~,EAACG,GAAA,CAAA,CAA4B;AAAA,UAC/D,gBAAAH,EAAC,OAAA,EAAI,WAAU,qBACb,~~UAAAvB~~,KACA,~~gBAAAuB~~;AAAA,YAACI;AAAA,YAAA;AAAA,cACA,WAAU;AAAA,cACV,MAAK;AAAA,cACL,OAAOC,~~EAAgBnC~~,GAAYQ,CAAO;AAAA,YAAA;AAAA,UAAA,GAG7C;AAAA,UACCJ,KACA,~~gBAAA0B~~,EAAC,OAAA,EAAI,WAAU,kBACb,YAAM,~~cAAc1B~~,~~GAAeuB~~,EAAA,CAAc,EAAA,CACnD;AAAA,~~UAEAtB~~,KACA,~~gBAAAyB~~;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,WAAU;AAAA,cACV,OAAO,EAAE,QAAQ,GAAG,~~GAAGX~~,EAAA;AAAA,cAEtB,~~UAAAiB~~,EAAM,~~cAAc/B~~,~~GAAasB~~,EAAA,CAAc;AAAA,YAAA;AAAA,UAAA;AAAA,~~UAGjDzB~~,IACA,~~gBAAA8B~~;AAAA,YAACT;AAAA,YAAA;AAAA,cACA,WAAU;AAAA,cACV,OAAO;AAAA,gBACN,~~OAAOR~~;AAAA,gBACP,UAAUC;AAAA,cAAA;AAAA,cAGV,UAAA;AAAA,gBAAAd;AAAA,gBACD,~~gBAAA4B~~,EAAC,OAAA,EAAI,WAAU,iBAAiB,~~UAAAnB~~,EAAA,CAAS;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA,IAG1C,~~gBAAAmB~~,EAAAO,GAAA,EAAE;AAAA,~~UAEF/B~~,KACA,~~gBAAAwB~~,EAAC,OAAA,EAAI,WAAU,iBAAgB,OAAO,EAAE,QAAQ,EAAA,GAC9C,UAAAM,EAAM,~~cAAc9B~~,~~GAAcqB~~,EAAA,CAAc,EAAA,CAClD;AAAA,QAAA,EAAA,CAEF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGH;AACD;~~AAEA/B~~,EAAO,cAAc;"}
1	+ {"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import { forwardRef, useCallback } from 'react';\nimport React from 'react';\nimport { Spinner } from '../spinner';\nimport * as Sc from './Button.styled';\nimport { ButtonProps } from './model';\nimport {\n\tgetButtonIconColor,\n\tGetButtonTextComponent,\n\tSpinnerColorMap,\n} from './themes';\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tversion,\n\t\t\tid,\n\t\t\tbuttonType = 'primary',\n\t\t\tsize = 'small',\n\t\t\tbuttonText,\n\t\t\tdisabled,\n\t\t\tIconComponent,\n\t\t\tLeadingIcon,\n\t\t\tTrailingIcon,\n\t\t\tisLoading,\n\t\t\tinverse,\n\t\t\tonClick,\n\t\t\tmatchParentWidth,\n\t\t\tsubtitle,\n\t\t\tdarkMode,\n\t\t\tactivated,\n\t\t\terror,\n\t\t\tbuttonTextColor,\n\t\t\tbuttonFontSize,\n\t\t\tcustomIconColor,\n\t\t\tbuttonColor,\n\t\t\tLeadingIconStyles,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ButtonTextElement = GetButtonTextComponent(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tdisabled,\n\t\t);\n\n\t\tconst iconColor = getButtonIconColor(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tinverse,\n\t\t\tdisabled,\n\t\t\tisLoading,\n\t\t\tdarkMode,\n\t\t);\n\n\t\tconst getIconProps = useCallback(() => {\n\t\t\tconst iconSize = size === 'chip' \|\| size === 'xs' ? 16 : 20;\n\t\t\treturn {\n\t\t\t\theight: iconSize,\n\t\t\t\twidth: iconSize,\n\t\t\t\tcolor: customIconColor ? customIconColor : iconColor,\n\t\t\t\tstyle: { display: 'block' },\n\t\t\t\tclassName: 'icon',\n\t\t\t};\n\t\t}, [size, customIconColor, iconColor]);\n\n\t\treturn (\n\t\t\t<Sc.Button\n\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\tversion={version}\n\t\t\t\tonClick={\n\t\t\t\t\tisLoading\n\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t// Do nothing\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: onClick\n\t\t\t\t}\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tsize={size}\n\t\t\t\tbuttonType={buttonType}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tinverse={inverse}\n\t\t\t\tmatchParentWidth={matchParentWidth}\n\t\t\t\tdarkMode={darkMode}\n\t\t\t\tactivated={activated}\n\t\t\t\terror={error}\n\t\t\t\tbuttonColor={buttonColor}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<div className=\"button-container\">\n\t\t\t\t\t{buttonType.startsWith('dash') && <Sc.ButtonCustomDashedBorder />}\n\t\t\t\t\t<div className=\"overlay-container\">\n\t\t\t\t\t\t{isLoading && (\n\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tcolor={SpinnerColorMap(buttonType, inverse)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{IconComponent && (\n\t\t\t\t\t\t<div className=\"icon-component\">\n\t\t\t\t\t\t\t{React.createElement(IconComponent, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{LeadingIcon && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tstyle={{ zIndex: 1, ...LeadingIconStyles }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{buttonText ? (\n\t\t\t\t\t\t<ButtonTextElement\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: buttonTextColor,\n\t\t\t\t\t\t\t\tfontSize: buttonFontSize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{buttonText}\n\t\t\t\t\t\t\t<div className=\"text-subtitle\">{subtitle}</div>\n\t\t\t\t\t\t</ButtonTextElement>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t\t{TrailingIcon && (\n\t\t\t\t\t\t<div className=\"icon-trailing\" style={{ zIndex: 1 }}>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Sc.Button>\n\t\t);\n\t},\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error","buttonTextColor","buttonFontSize","customIconColor","buttonColor","LeadingIconStyles","rest","ref","ButtonTextElement","GetButtonTextComponent","iconColor","getButtonIconColor","getIconProps","useCallback","iconSize","jsx","Sc.Button","jsxs","Sc.ButtonCustomDashedBorder","Spinner","SpinnerColorMap","React","Fragment"],"mappings":"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"}

package/dist/esm/components/button/Button.styled.d.ts CHANGED Viewed

@@ -11,6 +11,5 @@ export declare const Button: import('styled-components').StyledComponent<"button
     activated?: boolean | undefined;
     error?: boolean | undefined;
     buttonColor?: string | undefined;
-    gap?: number | undefined;
 }, never>;
 export declare const ButtonCustomDashedBorder: () => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/button/Button.styled.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import { jsxs as c, Fragment as l, jsx as n } from "react/jsx-runtime";
 import r from "styled-components";
 import { COLORS as e } from "../../constants/Theme.js";
-import { getBackgroundColor as u, getPadding as i, getBorder as b, getColor as g, getDashedBorderStyling as o, getClickEffect as a, generateDisabledStyling as y, getDisabledTextColor as $, getHoverButtonBackgroundCustom as h, getHoverButtonBackground as s, getHoverButtonTextDecorationStyle as v, generateInverseHoverBackground as x, getLoadingBorder as m, getLoadingBackground as d, getLoadingButtonBackgroundCustom as z } from "./themes.js";
+import { getBackgroundColor as u, getPadding as i, getBorder as b, getColor as g, getDashedBorderStyling as o, getClickEffect as a, generateDisabledStyling as y, getDisabledTextColor as h, getHoverButtonBackgroundCustom as $, getHoverButtonBackground as s, getHoverButtonTextDecorationStyle as v, generateInverseHoverBackground as x, getLoadingBorder as m, getLoadingBackground as d, getLoadingButtonBackgroundCustom as z } from "./themes.js";
 const C = r.button`
 	all: unset;
 	outline: none;
 	cursor: pointer;
 	display: flex;
-	gap: ${(t) => t.gap !== void 0 ? `${t.gap}px` : "8.83px"};
+	gap: 8.83px;
 	border-radius: ${(t) => t.buttonType == "text" ? "0" : "4px"};
 	overflow: hidden;
 	${(t) => t.matchParentWidth ? "flex-grow: 1;" : ""}
@@ -93,7 +93,7 @@ const C = r.button`
 		cursor: ${(t) => t.buttonType === "text" ? "auto" : "not-allowed"};
 		${(t) => y(t.buttonType, t.size, t.inverse)}
 		.text {
-			color: ${(t) => $(t.inverse)} !important;
+			color: ${(t) => h(t.inverse)} !important;
 		}
 		${(t) => o(
   t.buttonType,
@@ -183,7 +183,7 @@ const C = r.button`
 				width: 100%;
 				${t.matchParentWidth ? "justify-content: center;" : ""}
 				padding: ${i(t.buttonType, t.size)};
-				{${t.buttonColor ? `background-color: ${h(
+				{${t.buttonColor ? `background-color: ${$(
     t.buttonColor,
     15
   )}` : ""}}
@@ -208,7 +208,7 @@ const C = r.button`
 		.button-container {
 		display: flex;
-		gap: ${(t) => t.gap !== void 0 ? `${t.gap}px` : "8.33px"};
+		gap: 8.33px;
 		${(t) => t.matchParentWidth ? "margin: auto;" : ""}
 	}
 `, w = () => /* @__PURE__ */ c(l, { children: [

package/dist/esm/components/button/Button.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n\tgap?: number;\n}>`\n\tall: unset;\n\toutline: none;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: ${(props) => (props.gap !== undefined ? `${props.gap}px` : '8.83px')};\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' \|\| props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'special'\n\t\t\t\t\t\t? `background-color: ${COLORS.background.brandLight};`\n\t\t\t\t\t\t: props.buttonType === 'secondaryGray'\n\t\t\t\t\t\t? `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\tprops.size !== 'xs' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\t\t${getLoadingBackground(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.buttonColor,\n\t\t)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t.icon-leading,\n\t\t\t.icon-component,\n\t\t\t.icon-trailing {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tline-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: ${(props) => (props.gap !== undefined ? `${props.gap}px` : '8.33px')};\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingBackground","getLoadingButtonBackgroundCustom","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"mappings":"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"}
1	+ {"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\toutline: none;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' \|\| props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'special'\n\t\t\t\t\t\t? `background-color: ${COLORS.background.brandLight};`\n\t\t\t\t\t\t: props.buttonType === 'secondaryGray'\n\t\t\t\t\t\t? `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\tprops.size !== 'xs' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\t\t${getLoadingBackground(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.buttonColor,\n\t\t)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t.icon-leading,\n\t\t\t.icon-component,\n\t\t\t.icon-trailing {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tline-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingBackground","getLoadingButtonBackgroundCustom","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"mappings":"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"}

package/dist/esm/components/button/model.d.ts CHANGED Viewed

@@ -40,11 +40,6 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      * @default undefined
      */
     LeadingIconStyles?: React.CSSProperties;
-    /**
-     * Gap in px between the icon(s) and the button text.
-     * @default 8.83
-     */
-    gap?: number;
     /**
      * The icon component that is the left of the buttonText
      * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react

package/dist/esm/components/chip-selector/ChipSelector.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { ChipSelectorProps } from './model';
+/**
+ * A single compact, selectable chip.
+ *
+ * Most callers want ChipSelectorGroup, which manages the selection for them.
+ * Use this directly only when the surrounding layout is bespoke.
+ */
+export declare const ChipSelector: React.FC<ChipSelectorProps>;

package/dist/esm/components/chip-selector/ChipSelector.js ADDED Viewed

@@ -0,0 +1,27 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Chip as l } from "./ChipSelector.styled.js";
+const s = (e) => {
+  const a = e.size ?? "medium", t = e.disabled ?? !1;
+  return /* @__PURE__ */ i(
+    l,
+    {
+      type: "button",
+      selected: e.selected,
+      size: a,
+      width: e.width,
+      disabled: t,
+      "aria-pressed": e.selected,
+      "aria-label": e.ariaLabel ?? e.label,
+      "data-test": e.dataTestId,
+      "data-testid": "chip-selector",
+      onClick: () => {
+        t || e.onSelect(e.value);
+      },
+      children: e.label
+    }
+  );
+};
+export {
+  s as ChipSelector
+};
+//# sourceMappingURL=ChipSelector.js.map

package/dist/esm/components/chip-selector/ChipSelector.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ChipSelector.js","sources":["../../../../src/components/chip-selector/ChipSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { Chip } from './ChipSelector.styled';\nimport { ChipSelectorProps } from './model';\n\n/**\n * A single compact, selectable chip.\n *\n * Most callers want ChipSelectorGroup, which manages the selection for them.\n * Use this directly only when the surrounding layout is bespoke.\n */\nexport const ChipSelector: React.FC<ChipSelectorProps> = (props) => {\n\tconst size = props.size ?? 'medium';\n\tconst isDisabled = props.disabled ?? false;\n\n\treturn (\n\t\t<Chip\n\t\t\ttype=\"button\"\n\t\t\tselected={props.selected}\n\t\t\tsize={size}\n\t\t\twidth={props.width}\n\t\t\tdisabled={isDisabled}\n\t\t\taria-pressed={props.selected}\n\t\t\taria-label={props.ariaLabel ?? props.label}\n\t\t\tdata-test={props.dataTestId}\n\t\t\tdata-testid=\"chip-selector\"\n\t\t\tonClick={() => {\n\t\t\t\tif (!isDisabled) {\n\t\t\t\t\tprops.onSelect(props.value);\n\t\t\t\t}\n\t\t\t}}\n\t\t>\n\t\t\t{props.label}\n\t\t</Chip>\n\t);\n};\n"],"names":["ChipSelector","props","size","isDisabled","jsx","Chip"],"mappings":";;AAUO,MAAMA,IAA4C,CAACC,MAAU;AACnE,QAAMC,IAAOD,EAAM,QAAQ,UACrBE,IAAaF,EAAM,YAAY;AAErC,SACC,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAK;AAAA,MACL,UAAUJ,EAAM;AAAA,MAChB,MAAAC;AAAA,MACA,OAAOD,EAAM;AAAA,MACb,UAAUE;AAAA,MACV,gBAAcF,EAAM;AAAA,MACpB,cAAYA,EAAM,aAAaA,EAAM;AAAA,MACrC,aAAWA,EAAM;AAAA,MACjB,eAAY;AAAA,MACZ,SAAS,MAAM;AACd,QAAKE,KACJF,EAAM,SAASA,EAAM,KAAK;AAAA,MAE5B;AAAA,MAEC,UAAAA,EAAM;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/esm/components/chip-selector/ChipSelector.styled.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { ChipSize } from './model';
+export declare const Chip: import('styled-components').StyledComponent<"button", any, {
+    selected: boolean;
+    size: ChipSize;
+    width?: number | undefined;
+}, never>;
+export declare const ChipGroup: import('styled-components').StyledComponent<"div", any, {
+    gap: number;
+    wrap: boolean;
+}, never>;

package/dist/esm/components/chip-selector/ChipSelector.styled.js ADDED Viewed

@@ -0,0 +1,48 @@
+import i from "styled-components";
+import { COLORS as r } from "../../constants/Theme.js";
+const o = {
+  small: "32px",
+  medium: "48px"
+}, t = {
+  small: "0px 8px",
+  medium: "0px 12px"
+}, a = i.button`
+	box-sizing: border-box;
+	height: ${(e) => o[e.size]};
+	${(e) => e.width ? `width: ${e.width}px;` : ""}
+	padding: ${(e) => t[e.size]};
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 4px;
+	border: 1px solid
+		${(e) => e.selected ? r.background.inverseLight : r.stroke.primary};
+	background: ${(e) => e.selected ? r.background.brandLight : r.surface.standard};
+	color: ${(e) => e.selected ? r.content.primary : r.content.secondary};
+	font-family: inherit;
+	font-weight: ${(e) => e.selected ? 600 : 400};
+	font-size: 14px;
+	line-height: 20px;
+	cursor: pointer;
+	:disabled {
+		cursor: not-allowed;
+		color: ${r.content.inactive};
+		border-color: ${r.stroke.primary};
+		background: ${r.surface.subdued};
+	}
+	:hover:not(:disabled) {
+		background: ${(e) => e.selected ? r.background.brandLight : r.surface.hovered};
+	}
+`, p = i.div`
+	display: flex;
+	flex-direction: row;
+	gap: ${(e) => e.gap}px;
+	flex-wrap: ${(e) => e.wrap ? "wrap" : "nowrap"};
+`;
+export {
+  a as Chip,
+  p as ChipGroup
+};
+//# sourceMappingURL=ChipSelector.styled.js.map

package/dist/esm/components/chip-selector/ChipSelector.styled.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ChipSelector.styled.js","sources":["../../../../src/components/chip-selector/ChipSelector.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { ChipSize } from './model';\n\n/** Medium matches the 48px input height so chips align with inputs beside them. */\nconst ChipHeightMapping: Record<ChipSize, string> = {\n\tsmall: '32px',\n\tmedium: '48px',\n};\n\nconst ChipPaddingMapping: Record<ChipSize, string> = {\n\tsmall: '0px 8px',\n\tmedium: '0px 12px',\n};\n\nexport const Chip = styled.button<{\n\tselected: boolean;\n\tsize: ChipSize;\n\twidth?: number;\n}>`\n\tbox-sizing: border-box;\n\theight: ${(props) => ChipHeightMapping[props.size]};\n\t${(props) => (props.width ? `width: ${props.width}px;` : '')}\n\tpadding: ${(props) => ChipPaddingMapping[props.size]};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: 4px;\n\tborder: 1px solid\n\t\t${(props) =>\n\t\t\tprops.selected ? COLORS.background.inverseLight : COLORS.stroke.primary};\n\tbackground: ${(props) =>\n\t\tprops.selected ? COLORS.background.brandLight : COLORS.surface.standard};\n\tcolor: ${(props) =>\n\t\tprops.selected ? COLORS.content.primary : COLORS.content.secondary};\n\tfont-family: inherit;\n\tfont-weight: ${(props) => (props.selected ? 600 : 400)};\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcursor: pointer;\n\n\t:disabled {\n\t\tcursor: not-allowed;\n\t\tcolor: ${COLORS.content.inactive};\n\t\tborder-color: ${COLORS.stroke.primary};\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n\n\t:hover:not(:disabled) {\n\t\tbackground: ${(props) =>\n\t\t\tprops.selected ? COLORS.background.brandLight : COLORS.surface.hovered};\n\t}\n`;\n\nexport const ChipGroup = styled.div<{ gap: number; wrap: boolean }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: ${(props) => props.gap}px;\n\tflex-wrap: ${(props) => (props.wrap ? 'wrap' : 'nowrap')};\n`;\n"],"names":["ChipHeightMapping","ChipPaddingMapping","Chip","styled","props","COLORS","ChipGroup"],"mappings":";;AAKA,MAAMA,IAA8C;AAAA,EACnD,OAAO;AAAA,EACP,QAAQ;AACT,GAEMC,IAA+C;AAAA,EACpD,OAAO;AAAA,EACP,QAAQ;AACT,GAEaC,IAAOC,EAAO;AAAA;AAAA,WAMhB,CAACC,MAAUJ,EAAkBI,EAAM,IAAI,CAAC;AAAA,GAChD,CAACA,MAAWA,EAAM,QAAQ,UAAUA,EAAM,KAAK,QAAQ,EAAG;AAAA,YACjD,CAACA,MAAUH,EAAmBG,EAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMjD,CAACA,MACFA,EAAM,WAAWC,EAAO,WAAW,eAAeA,EAAO,OAAO,OAAO;AAAA,eAC3D,CAACD,MACdA,EAAM,WAAWC,EAAO,WAAW,aAAaA,EAAO,QAAQ,QAAQ;AAAA,UAC/D,CAACD,MACTA,EAAM,WAAWC,EAAO,QAAQ,UAAUA,EAAO,QAAQ,SAAS;AAAA;AAAA,gBAEpD,CAACD,MAAWA,EAAM,WAAW,MAAM,GAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAO5CC,EAAO,QAAQ,QAAQ;AAAA,kBAChBA,EAAO,OAAO,OAAO;AAAA,gBACvBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA,gBAItB,CAACD,MACdA,EAAM,WAAWC,EAAO,WAAW,aAAaA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAI5DC,IAAYH,EAAO;AAAA;AAAA;AAAA,QAGxB,CAACC,MAAUA,EAAM,GAAG;AAAA,cACd,CAACA,MAAWA,EAAM,OAAO,SAAS,QAAS;AAAA;"}

package/dist/esm/components/chip-selector/ChipSelectorGroup.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { ChipSelectorGroupProps } from './model';
+/**
+ * A row or grid of compact selectable chips — weekday pickers, month-date
+ * pickers, and similar cases where options are short and shown all at once.
+ *
+ * The group owns the add/remove logic and reports the whole next selection, so
+ * callers store what they are given instead of repeating toggle code.
+ */
+export declare const ChipSelectorGroup: React.FC<ChipSelectorGroupProps>;

package/dist/esm/components/chip-selector/ChipSelectorGroup.js ADDED Viewed

@@ -0,0 +1,48 @@
+import { jsx as u } from "react/jsx-runtime";
+import { ChipSelector as m } from "./ChipSelector.js";
+import { ChipGroup as v } from "./ChipSelector.styled.js";
+const s = (e) => {
+  const n = e.multiSelect ?? !0, i = e.allowEmpty ?? !0, d = (t) => {
+    const l = e.value.includes(t);
+    if (!n)
+      return l ? i ? [] : e.value : [t];
+    if (l) {
+      const a = e.value.filter((c) => c !== t);
+      return !a.length && !i ? e.value : a;
+    }
+    return e.options.map((a) => a.value).filter((a) => a === t || e.value.includes(a));
+  }, r = (t) => {
+    const l = d(t);
+    l !== e.value && e.onChange(l);
+  };
+  return /* @__PURE__ */ u(
+    v,
+    {
+      role: "group",
+      "aria-label": e.ariaLabel,
+      gap: e.gap ?? 8,
+      wrap: e.wrap ?? !1,
+      "data-test": e["data-test"],
+      "data-testid": "chip-selector-group",
+      children: e.options.map((t) => /* @__PURE__ */ u(
+        m,
+        {
+          value: t.value,
+          label: t.label,
+          ariaLabel: t.ariaLabel,
+          disabled: t.disabled,
+          selected: e.value.includes(t.value),
+          size: e.size,
+          width: t.fitContent ? void 0 : e.chipWidth,
+          dataTestId: `${e["data-test"] ?? "chip"}-${t.value}`,
+          onSelect: r
+        },
+        t.value
+      ))
+    }
+  );
+};
+export {
+  s as ChipSelectorGroup
+};
+//# sourceMappingURL=ChipSelectorGroup.js.map

package/dist/esm/components/chip-selector/ChipSelectorGroup.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ChipSelectorGroup.js","sources":["../../../../src/components/chip-selector/ChipSelectorGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { ChipSelector } from './ChipSelector';\nimport { ChipGroup } from './ChipSelector.styled';\nimport { ChipSelectorGroupProps, ChipValue } from './model';\n\n/**\n * A row or grid of compact selectable chips — weekday pickers, month-date\n * pickers, and similar cases where options are short and shown all at once.\n *\n * The group owns the add/remove logic and reports the whole next selection, so\n * callers store what they are given instead of repeating toggle code.\n */\nexport const ChipSelectorGroup: React.FC<ChipSelectorGroupProps> = (props) => {\n\tconst multiSelect = props.multiSelect ?? true;\n\tconst allowEmpty = props.allowEmpty ?? true;\n\n\tconst buildNextValue = (clicked: ChipValue): ChipValue[] => {\n\t\tconst isSelected = props.value.includes(clicked);\n\n\t\tif (!multiSelect) {\n\t\t\t// Re-picking the only selection clears it, unless a value is required.\n\t\t\tif (isSelected) {\n\t\t\t\treturn allowEmpty ? [] : props.value;\n\t\t\t}\n\t\t\treturn [clicked];\n\t\t}\n\n\t\tif (isSelected) {\n\t\t\tconst remaining = props.value.filter((value) => value !== clicked);\n\t\t\treturn !remaining.length && !allowEmpty ? props.value : remaining;\n\t\t}\n\n\t\t// Order by the options given, so the selection reads the way it is shown\n\t\t// rather than in the order the user happened to click.\n\t\treturn props.options\n\t\t\t.map((option) => option.value)\n\t\t\t.filter((value) => value === clicked || props.value.includes(value));\n\t};\n\n\tconst onChipSelected = (clicked: ChipValue) => {\n\t\tconst next = buildNextValue(clicked);\n\t\tif (next !== props.value) {\n\t\t\tprops.onChange(next);\n\t\t}\n\t};\n\n\treturn (\n\t\t<ChipGroup\n\t\t\trole=\"group\"\n\t\t\taria-label={props.ariaLabel}\n\t\t\tgap={props.gap ?? 8}\n\t\t\twrap={props.wrap ?? false}\n\t\t\tdata-test={props['data-test']}\n\t\t\tdata-testid=\"chip-selector-group\"\n\t\t>\n\t\t\t{props.options.map((option) => (\n\t\t\t\t<ChipSelector\n\t\t\t\t\tkey={option.value}\n\t\t\t\t\tvalue={option.value}\n\t\t\t\t\tlabel={option.label}\n\t\t\t\t\tariaLabel={option.ariaLabel}\n\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\tselected={props.value.includes(option.value)}\n\t\t\t\t\tsize={props.size}\n\t\t\t\t\twidth={option.fitContent ? undefined : props.chipWidth}\n\t\t\t\t\tdataTestId={`${props['data-test'] ?? 'chip'}-${option.value}`}\n\t\t\t\t\tonSelect={onChipSelected}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</ChipGroup>\n\t);\n};\n"],"names":["ChipSelectorGroup","props","multiSelect","allowEmpty","buildNextValue","clicked","isSelected","remaining","value","option","onChipSelected","next","jsx","ChipGroup","ChipSelector"],"mappings":";;;AAYO,MAAMA,IAAsD,CAACC,MAAU;AAC7E,QAAMC,IAAcD,EAAM,eAAe,IACnCE,IAAaF,EAAM,cAAc,IAEjCG,IAAiB,CAACC,MAAoC;AAC3D,UAAMC,IAAaL,EAAM,MAAM,SAASI,CAAO;AAE/C,QAAI,CAACH;AAEJ,aAAII,IACIH,IAAa,KAAKF,EAAM,QAEzB,CAACI,CAAO;AAGhB,QAAIC,GAAY;AACf,YAAMC,IAAYN,EAAM,MAAM,OAAO,CAACO,MAAUA,MAAUH,CAAO;AACjE,aAAO,CAACE,EAAU,UAAU,CAACJ,IAAaF,EAAM,QAAQM;AAAA,IACzD;AAIA,WAAON,EAAM,QACX,IAAI,CAACQ,MAAWA,EAAO,KAAK,EAC5B,OAAO,CAACD,MAAUA,MAAUH,KAAWJ,EAAM,MAAM,SAASO,CAAK,CAAC;AAAA,EACrE,GAEME,IAAiB,CAACL,MAAuB;AAC9C,UAAMM,IAAOP,EAAeC,CAAO;AACnC,IAAIM,MAASV,EAAM,SAClBA,EAAM,SAASU,CAAI;AAAA,EAErB;AAEA,SACC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,MAAK;AAAA,MACL,cAAYZ,EAAM;AAAA,MAClB,KAAKA,EAAM,OAAO;AAAA,MAClB,MAAMA,EAAM,QAAQ;AAAA,MACpB,aAAWA,EAAM,WAAW;AAAA,MAC5B,eAAY;AAAA,MAEX,UAAAA,EAAM,QAAQ,IAAI,CAACQ,MACnB,gBAAAG;AAAA,QAACE;AAAA,QAAA;AAAA,UAEA,OAAOL,EAAO;AAAA,UACd,OAAOA,EAAO;AAAA,UACd,WAAWA,EAAO;AAAA,UAClB,UAAUA,EAAO;AAAA,UACjB,UAAUR,EAAM,MAAM,SAASQ,EAAO,KAAK;AAAA,UAC3C,MAAMR,EAAM;AAAA,UACZ,OAAOQ,EAAO,aAAa,SAAYR,EAAM;AAAA,UAC7C,YAAY,GAAGA,EAAM,WAAW,KAAK,MAAM,IAAIQ,EAAO,KAAK;AAAA,UAC3D,UAAUC;AAAA,QAAA;AAAA,QATLD,EAAO;AAAA,MAAA,CAWb;AAAA,IAAA;AAAA,EAAA;AAGJ;"}

package/dist/esm/components/chip-selector/index.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { ChipSelector } from './ChipSelector';
+import { ChipSelectorGroup } from './ChipSelectorGroup';
+export { ChipSelector, ChipSelectorGroup };
+export * from './model';