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/cjs/components/agent-builder/utils/mentionSerialization.js CHANGED Viewed

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../constants/tools.js"),d=(e,t="Manifest")=>!e||e===i.ToolSource.Manifest?t:i.TOOL_SOURCE_LABELS[e]??e,L=e=>{const t=e?String(e):"";return t==="BIK"?"BIK":t==="BSP"?"BSP":"Manifest"},f=(e,t,n="Manifest")=>[...e.map(o=>({id:o.tool_id,label:`${d(o.source,n)} : ${o.display_name}`,meta:{kind:"tool",plainLabel:o.display_name,source:o.source,authRequired:o.auth_required}})),...t.map(o=>({id:o.id,label:`sub-agent: ${o.name}`,meta:{kind:"subagent",plainLabel:o.name}}))],p=e=>e.replace(/^\{\{|\}\}$/g,""),$=(e=[])=>{const t=[],n=o=>{const a=o.actualValue;if(a){const l=p(a);t.push({id:l,label:`{{${l}}}`,meta:{kind:"variable",plainLabel:o.displayName}})}Object.values(o.variables??{}).forEach(n)};return e.forEach(n),t},b=e=>e.tool_key==="send_slack_message"?String(e.params.channelId?.value??"").trim()||"Send Slack message":String(e.params.sendTo?.value??"").split(",").map(t=>t.trim()).filter(Boolean)[0]||"Send email",g=e=>e.name||"Rest API",S=e=>{const t=g(e);return{id:e.id,label:`${i.TOOL_SOURCE_LABELS[i.ToolSource.RestApi]} : ${t}`,meta:{kind:"tool",plainLabel:t,source:i.ToolSource.RestApi}}},T=e=>{const t=e.tool_key==="send_slack_message"?i.ToolSource.Slack:i.ToolSource.EmailHandover,n=b(e);return{id:e.id,label:`${i.TOOL_SOURCE_LABELS[t]} : ${n}`,meta:{kind:"tool",plainLabel:n,source:t}}},_=(e=[],t=[])=>[...t.map(S),...e.map(T)],r=e=>e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),s=e=>r(e).replace(/"/g,"&quot;"),k=(e,t,n,o)=>`<span data-type="mentionAgent" class="bik-mention bik-mention--agent" data-id="${s(e)}" data-label="${s(t)}" data-kind="${s(n)}"`+(o?` data-source="${s(o)}"`:"")+`>${r(t)}</span>`,E=(e,t,n,o)=>k(e,t,n,o),O=e=>{const t=new Map;for(const n of e){const o=n.meta;o?.kind==="tool"?t.set(`tool:${String(n.id)}`,n):o?.kind==="subagent"?t.set(`subagent:${String(n.id)}`,n):o?.kind==="variable"&&t.set(`variable:${String(n.id)}`,n)}return t},c=/\{\{((?:tool|subagent|variable):[^{}]+)\}\}/g,v=(e,t)=>{let n="",o=0;c.lastIndex=0;let a;for(;(a=c.exec(e))!==null;){n+=r(e.slice(o,a.index));const l=t.get(a[1]);if(l){const m=l.meta;n+=k(String(l.id),l.label,m.kind,m.source)}else n+=r(a[0]);o=c.lastIndex}return n+=r(e.slice(o)),n.replace(/\n/g,"<br>")},I=(e,t=[])=>{if(!e)return"";const n=O(t);return e.split(/\n{2,}/).map(o=>`<p>${v(o,n)}</p>`).join("")},M=(e,t,n)=>t==="variable"?`{{variable:${e}}}`:(t??(n.has(e)?"tool":"subagent"))==="tool"?`{{tool:${e}}}`:`{{subagent:${e}}}`,u=(e,t)=>{switch(e.type){case"text":return e.text??"";case"mentionAgent":case"mentionTeam":{const n=e.attrs?.id;if(n==null)return"";const o=e.attrs?.kind;return M(String(n),o==null?null:String(o),t)}case"variable":return`{{${String(e.attrs?.variableName??"")}}}`;case"hardBreak":return`
-`;case"orderedList":case"bulletList":{const n=e.type==="orderedList";return(e.content??[]).map((o,a)=>`${n?`${a+1}.`:"-"} ${u(o,t).replace(/\n+$/,"")}`).join(`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../constants/tools.js"),d=(e,t="Manifest")=>!e||e===i.ToolSource.Manifest?t:i.TOOL_SOURCE_LABELS[e]??e,f=e=>{const t=e?String(e):"";return t==="BIK"?"BIK":t==="BSP"?"BSP":"Manifest"},L=(e,t,n="Manifest")=>[...e.map(a=>({id:a.tool_id,label:`${d(a.source,n)} : ${a.display_name}`,meta:{kind:"tool",plainLabel:a.display_name,source:a.source,authRequired:a.auth_required}})),...t.map(a=>({id:a.id,label:`sub-agent: ${a.name}`,meta:{kind:"subagent",plainLabel:a.name}}))],p=e=>e.replace(/^\{\{|\}\}$/g,""),$=(e=[])=>{const t=[],n=a=>{const o=a.actualValue;if(o){const l=p(o);t.push({id:l,label:`{{${l}}}`,meta:{kind:"variable",plainLabel:a.displayName}})}Object.values(a.variables??{}).forEach(n)};return e.forEach(n),t},b=e=>{if(e.tool_key==="send_slack_message")return String(e.params.channelId?.value??"").trim()||"Send Slack message";if(e.tool_key==="send_email"){const t=String(e.params.name?.value??"").trim();return t||String(e.params.sendTo?.value??"").split(",").map(n=>n.trim()).filter(Boolean)[0]||"Send email"}return e.tool_key},g=e=>e.name||"Rest API",S=e=>{const t=g(e);return{id:e.id,label:`${i.TOOL_SOURCE_LABELS[i.ToolSource.RestApi]} : ${t}`,meta:{kind:"tool",plainLabel:t,source:i.ToolSource.RestApi}}},T=e=>{const t=e.tool_key==="send_slack_message"?i.ToolSource.Slack:i.ToolSource.EmailHandover,n=b(e);return{id:e.id,label:`${i.TOOL_SOURCE_LABELS[t]} : ${n}`,meta:{kind:"tool",plainLabel:n,source:t}}},_=(e=[],t=[])=>[...t.map(S),...e.map(T)],r=e=>e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"),s=e=>r(e).replace(/"/g,"&quot;"),k=(e,t,n,a)=>`<span data-type="mentionAgent" class="bik-mention bik-mention--agent" data-id="${s(e)}" data-label="${s(t)}" data-kind="${s(n)}"`+(a?` data-source="${s(a)}"`:"")+`>${r(t)}</span>`,E=(e,t,n,a)=>k(e,t,n,a),O=e=>{const t=new Map;for(const n of e){const a=n.meta;a?.kind==="tool"?t.set(`tool:${String(n.id)}`,n):a?.kind==="subagent"?t.set(`subagent:${String(n.id)}`,n):a?.kind==="variable"&&t.set(`variable:${String(n.id)}`,n)}return t},c=/\{\{((?:tool|subagent|variable):[^{}]+)\}\}/g,v=(e,t)=>{let n="",a=0;c.lastIndex=0;let o;for(;(o=c.exec(e))!==null;){n+=r(e.slice(a,o.index));const l=t.get(o[1]);if(l){const m=l.meta;n+=k(String(l.id),l.label,m.kind,m.source)}else n+=r(o[0]);a=c.lastIndex}return n+=r(e.slice(a)),n.replace(/\n/g,"<br>")},I=(e,t=[])=>{if(!e)return"";const n=O(t);return e.split(/\n{2,}/).map(a=>`<p>${v(a,n)}</p>`).join("")},M=(e,t,n)=>t==="variable"?`{{variable:${e}}}`:(t??(n.has(e)?"tool":"subagent"))==="tool"?`{{tool:${e}}}`:`{{subagent:${e}}}`,u=(e,t)=>{switch(e.type){case"text":return e.text??"";case"mentionAgent":case"mentionTeam":{const n=e.attrs?.id;if(n==null)return"";const a=e.attrs?.kind;return M(String(n),a==null?null:String(a),t)}case"variable":return`{{${String(e.attrs?.variableName??"")}}}`;case"hardBreak":return`
+`;case"orderedList":case"bulletList":{const n=e.type==="orderedList";return(e.content??[]).map((a,o)=>`${n?`${o+1}.`:"-"} ${u(a,t).replace(/\n+$/,"")}`).join(`
 `)+`
-`}default:{const n=(e.content??[]).map(a=>u(a,t)).join("");return["paragraph","heading","listItem","blockquote"].includes(e.type)?`${n}
-`:n}}},A=(e,t)=>{if(!e)return"";const n=new Set(t.map(o=>o.tool_id));return u(e,n).replace(/\n+$/,"")};exports.TOOL_SOURCE_LABELS=i.TOOL_SOURCE_LABELS;exports.appTypeLabel=L;exports.buildAgentMentionItems=f;exports.buildCustomToolMentionItems=_;exports.buildMentionHtml=E;exports.buildVariableMentionItems=$;exports.configToolMentionItem=T;exports.configToolName=b;exports.editorDocToInstructions=A;exports.instructionsToEditorHtml=I;exports.restApiMentionItem=S;exports.restApiToolName=g;exports.toolSourceLabel=d;exports.variableTokenName=p;
+`}default:{const n=(e.content??[]).map(o=>u(o,t)).join("");return["paragraph","heading","listItem","blockquote"].includes(e.type)?`${n}
+`:n}}},A=(e,t)=>{if(!e)return"";const n=new Set(t.map(a=>a.tool_id));return u(e,n).replace(/\n+$/,"")};exports.TOOL_SOURCE_LABELS=i.TOOL_SOURCE_LABELS;exports.appTypeLabel=f;exports.buildAgentMentionItems=L;exports.buildCustomToolMentionItems=_;exports.buildMentionHtml=E;exports.buildVariableMentionItems=$;exports.configToolMentionItem=T;exports.configToolName=b;exports.editorDocToInstructions=A;exports.instructionsToEditorHtml=I;exports.restApiMentionItem=S;exports.restApiToolName=g;exports.toolSourceLabel=d;exports.variableTokenName=p;
 //# sourceMappingURL=mentionSerialization.js.map

package/dist/cjs/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":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),y=require("./Button.styled.js"),i=require("./themes.js"),M=require("../spinner/Spinner.js"),O=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=O(u),S=u.forwardRef(({version:e,id:v,buttonType:n="primary",size:s="small",buttonText:m,disabled:a,IconComponent:x,LeadingIcon:h,TrailingIcon:j,isLoading:l,inverse:c,onClick:q,matchParentWidth:C,subtitle:E,darkMode:f,activated:R,error:_,buttonTextColor:g,buttonFontSize:k,customIconColor:r,buttonColor:w,LeadingIconStyles:D,gap:P,...p},F)=>{const G=i.GetButtonTextComponent(s,n,a),B=i.getButtonIconColor(s,n,c,a,l,f),o=u.useCallback(()=>{const N=s==="chip"||s==="xs"?16:20;return{height:N,width:N,color:r||B,style:{display:"block"},className:"icon"}},[s,r,B]);return t.jsx(y.Button,{"data-test":p["data-test"],version:e,onClick:l?()=>{}:q,ref:F,id:v,disabled:a,size:s,buttonType:n,isLoading:l,inverse:c,matchParentWidth:C,darkMode:f,activated:R,error:_,buttonColor:w,gap:P,...p,children:t.jsxs("div",{className:"button-container",children:[n.startsWith("dash")&&t.jsx(y.ButtonCustomDashedBorder,{}),t.jsx("div",{className:"overlay-container",children:l&&t.jsx(M.Spinner,{className:"spinner",size:"small",color:i.SpinnerColorMap(n,c)})}),x&&t.jsx("div",{className:"icon-component",children:d.default.createElement(x,o())}),h&&t.jsx("div",{className:"icon-leading",style:{zIndex:1,...D},children:d.default.createElement(h,o())}),m?t.jsxs(G,{className:"text",style:{color:g,fontSize:k},children:[m,t.jsx("div",{className:"text-subtitle",children:E})]}):t.jsx(t.Fragment,{}),j&&t.jsx("div",{className:"icon-trailing",style:{zIndex:1},children:d.default.createElement(j,o())})]})})});S.displayName="Button";exports.Button=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),y=require("./Button.styled.js"),i=require("./themes.js"),G=require("../spinner/Spinner.js"),M=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=M(u),S=u.forwardRef(({version:e,id:v,buttonType:n="primary",size:s="small",buttonText:m,disabled:a,IconComponent:x,LeadingIcon:h,TrailingIcon:j,isLoading:l,inverse:c,onClick:q,matchParentWidth:C,subtitle:E,darkMode:f,activated:R,error:_,buttonTextColor:g,buttonFontSize:k,customIconColor:r,buttonColor:w,LeadingIconStyles:D,...p},P)=>{const F=i.GetButtonTextComponent(s,n,a),B=i.getButtonIconColor(s,n,c,a,l,f),o=u.useCallback(()=>{const N=s==="chip"||s==="xs"?16:20;return{height:N,width:N,color:r||B,style:{display:"block"},className:"icon"}},[s,r,B]);return t.jsx(y.Button,{"data-test":p["data-test"],version:e,onClick:l?()=>{}:q,ref:P,id:v,disabled:a,size:s,buttonType:n,isLoading:l,inverse:c,matchParentWidth:C,darkMode:f,activated:R,error:_,buttonColor:w,...p,children:t.jsxs("div",{className:"button-container",children:[n.startsWith("dash")&&t.jsx(y.ButtonCustomDashedBorder,{}),t.jsx("div",{className:"overlay-container",children:l&&t.jsx(G.Spinner,{className:"spinner",size:"small",color:i.SpinnerColorMap(n,c)})}),x&&t.jsx("div",{className:"icon-component",children:d.default.createElement(x,o())}),h&&t.jsx("div",{className:"icon-leading",style:{zIndex:1,...D},children:d.default.createElement(h,o())}),m?t.jsxs(F,{className:"text",style:{color:g,fontSize:k},children:[m,t.jsx("div",{className:"text-subtitle",children:E})]}):t.jsx(t.Fragment,{}),j&&t.jsx("div",{className:"icon-trailing",style:{zIndex:1},children:d.default.createElement(j,o())})]})})});S.displayName="Button";exports.Button=S;
 //# sourceMappingURL=Button.js.map

package/dist/cjs/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":"mSAWaA,EAASC,EAAAA,WACrB,CACC,CACC,QAAAC,EACA,GAAAC,EACA,WAAAC,EAAa,UACb,KAAAC,EAAO,QACP,WAAAC,EACA,SAAAC,EACA,cAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAC,EACA,QAAAC,EACA,QAAAC,EACA,iBAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,~~IAAAC,EACA,~~GAAGC,CAAA,EAEJC,IACI,CACJ,MAAMC,EAAoBC,EAAAA,~~uBACzBvB~~,EACAD,EACAG,CAAA,~~EAGKsB~~,EAAYC,EAAAA,~~mBACjBzB~~,EACAD,EACAQ,EACAL,EACAI,EACAK,CAAA,~~EAGKe~~,EAAeC,EAAAA,YAAY,IAAM,CACtC,MAAMC,~~EAAW5B~~,IAAS,QAAUA,IAAS,KAAO,GAAK,GACzD,MAAO,CACN,~~OAAQ4B~~,EACR,MAAOA,EACP,~~MAAOZ~~,~~GAAoCQ~~,EAC3C,MAAO,CAAE,QAAS,OAAA,EAClB,UAAW,MAAA,CAEb,EAAG,~~CAACxB~~,EAAMgB,~~EAAiBQ~~,CAAS,CAAC,EAErC,OACCK,EAAAA,IAACC,EAAAA,OAAA,CACA,YAAWV,EAAK,WAAW,EAC3B,~~QAAAvB~~,EACA,QACCS,EACG,IAAM,CAEN,EACAE,EAEJ,~~IAAAa~~,EACA,~~GAAAvB~~,EACA,SAAAI,EACA,KAAAF,EACA,WAAAD,EACA,UAAAO,EACA,QAAAC,EACA,iBAAAE,EACA,SAAAE,EACA,UAAAC,EACA,MAAAC,EACA,YAAAI,~~EACA,IAAAE,~~EACC,~~GAAGC~~,EAEJ,SAAAW,EAAAA,KAAC,MAAA,CAAI,UAAU,mBACb,SAAA,~~CAAAhC~~,EAAW,WAAW,MAAM,~~GAAK8B~~,EAAAA,IAACG,EAAAA,yBAAA,CAAA,CAA4B,EAC/DH,EAAAA,IAAC,MAAA,CAAI,UAAU,oBACb,~~SAAAvB~~,~~GACAuB~~,EAAAA,IAACI,EAAAA,QAAA,CACA,UAAU,UACV,KAAK,QACL,MAAOC,EAAAA,~~gBAAgBnC~~,EAAYQ,CAAO,CAAA,CAAA,EAG7C,EACCJ,~~GACA0B~~,EAAAA,IAAC,MAAA,CAAI,UAAU,iBACb,mBAAM,~~cAAc1B~~,~~EAAeuB~~,EAAA,CAAc,CAAA,CACnD,~~EAEAtB~~,~~GACAyB~~,EAAAA,IAAC,MAAA,CACA,UAAU,eACV,MAAO,CAAE,OAAQ,EAAG,~~GAAGX~~,CAAA,EAEtB,~~SAAAiB~~,EAAAA,QAAM,~~cAAc/B~~,~~EAAasB~~,EAAA,CAAc,CAAA,CAAA,~~EAGjDzB~~,~~EACA8B~~,EAAAA,KAACT,EAAA,CACA,UAAU,OACV,MAAO,CACN,~~MAAOR~~,EACP,SAAUC,CAAA,EAGV,SAAA,CAAAd,~~EACD4B~~,EAAAA,IAAC,MAAA,CAAI,UAAU,gBAAiB,~~SAAAnB~~,CAAA,CAAS,CAAA,CAAA,CAAA,~~EAG1CmB~~,EAAAA,IAAAO,EAAAA,SAAA,EAAE,~~EAEF/B~~,~~GACAwB~~,EAAAA,IAAC,MAAA,CAAI,UAAU,gBAAgB,MAAO,CAAE,OAAQ,CAAA,EAC9C,SAAAM,EAAAA,QAAM,~~cAAc9B~~,~~EAAcqB~~,EAAA,CAAc,CAAA,CAClD,CAAA,CAAA,CAEF,CAAA,CAAA,CAGH,CACD,~~EAEA/B~~,EAAO,YAAc"}
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":"mSAWaA,EAASC,EAAAA,WACrB,CACC,CACC,QAAAC,EACA,GAAAC,EACA,WAAAC,EAAa,UACb,KAAAC,EAAO,QACP,WAAAC,EACA,SAAAC,EACA,cAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAC,EACA,QAAAC,EACA,QAAAC,EACA,iBAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,GAAGC,CAAA,EAEJC,IACI,CACJ,MAAMC,EAAoBC,EAAAA,uBACzBtB,EACAD,EACAG,CAAA,EAGKqB,EAAYC,EAAAA,mBACjBxB,EACAD,EACAQ,EACAL,EACAI,EACAK,CAAA,EAGKc,EAAeC,EAAAA,YAAY,IAAM,CACtC,MAAMC,EAAW3B,IAAS,QAAUA,IAAS,KAAO,GAAK,GACzD,MAAO,CACN,OAAQ2B,EACR,MAAOA,EACP,MAAOX,GAAoCO,EAC3C,MAAO,CAAE,QAAS,OAAA,EAClB,UAAW,MAAA,CAEb,EAAG,CAACvB,EAAMgB,EAAiBO,CAAS,CAAC,EAErC,OACCK,EAAAA,IAACC,EAAAA,OAAA,CACA,YAAWV,EAAK,WAAW,EAC3B,QAAAtB,EACA,QACCS,EACG,IAAM,CAEN,EACAE,EAEJ,IAAAY,EACA,GAAAtB,EACA,SAAAI,EACA,KAAAF,EACA,WAAAD,EACA,UAAAO,EACA,QAAAC,EACA,iBAAAE,EACA,SAAAE,EACA,UAAAC,EACA,MAAAC,EACA,YAAAI,EACC,GAAGE,EAEJ,SAAAW,EAAAA,KAAC,MAAA,CAAI,UAAU,mBACb,SAAA,CAAA/B,EAAW,WAAW,MAAM,GAAK6B,EAAAA,IAACG,EAAAA,yBAAA,CAAA,CAA4B,EAC/DH,EAAAA,IAAC,MAAA,CAAI,UAAU,oBACb,SAAAtB,GACAsB,EAAAA,IAACI,EAAAA,QAAA,CACA,UAAU,UACV,KAAK,QACL,MAAOC,EAAAA,gBAAgBlC,EAAYQ,CAAO,CAAA,CAAA,EAG7C,EACCJ,GACAyB,EAAAA,IAAC,MAAA,CAAI,UAAU,iBACb,mBAAM,cAAczB,EAAesB,EAAA,CAAc,CAAA,CACnD,EAEArB,GACAwB,EAAAA,IAAC,MAAA,CACA,UAAU,eACV,MAAO,CAAE,OAAQ,EAAG,GAAGV,CAAA,EAEtB,SAAAgB,EAAAA,QAAM,cAAc9B,EAAaqB,EAAA,CAAc,CAAA,CAAA,EAGjDxB,EACA6B,EAAAA,KAACT,EAAA,CACA,UAAU,OACV,MAAO,CACN,MAAOP,EACP,SAAUC,CAAA,EAGV,SAAA,CAAAd,EACD2B,EAAAA,IAAC,MAAA,CAAI,UAAU,gBAAiB,SAAAlB,CAAA,CAAS,CAAA,CAAA,CAAA,EAG1CkB,EAAAA,IAAAO,EAAAA,SAAA,EAAE,EAEF9B,GACAuB,EAAAA,IAAC,MAAA,CAAI,UAAU,gBAAgB,MAAO,CAAE,OAAQ,CAAA,EAC9C,SAAAM,EAAAA,QAAM,cAAc7B,EAAcoB,EAAA,CAAc,CAAA,CAClD,CAAA,CAAA,CAEF,CAAA,CAAA,CAGH,CACD,EAEA9B,EAAO,YAAc"}

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

@@ -3,7 +3,7 @@
 	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;":""}
@@ -165,7 +165,7 @@
 		.button-container {
 		display: flex;
-		gap: ${t=>t.gap!==void 0?`${t.gap}px`:"8.33px"};
+		gap: 8.33px;
 		${t=>t.matchParentWidth?"margin: auto;":""}
 	}
 `,l=()=>i.jsxs(i.Fragment,{children:[i.jsx("div",{className:"line-top"}),i.jsx("div",{className:"line-left"}),i.jsx("div",{className:"line-bottom"}),i.jsx("div",{className:"line-right"})]});exports.Button=c;exports.ButtonCustomDashedBorder=l;

package/dist/cjs/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/cjs/components/chip-selector/ChipSelector.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),a=require("./ChipSelector.styled.js"),d=e=>{const i=e.size??"medium",t=e.disabled??!1;return l.jsx(a.Chip,{type:"button",selected:e.selected,size:i,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})};exports.ChipSelector=d;
2	+ //# sourceMappingURL=ChipSelector.js.map

package/dist/cjs/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":"2JAUaA,EAA6CC,GAAU,CACnE,MAAMC,EAAOD,EAAM,MAAQ,SACrBE,EAAaF,EAAM,UAAY,GAErC,OACCG,EAAAA,IAACC,EAAAA,KAAA,CACA,KAAK,SACL,SAAUJ,EAAM,SAChB,KAAAC,EACA,MAAOD,EAAM,MACb,SAAUE,EACV,eAAcF,EAAM,SACpB,aAAYA,EAAM,WAAaA,EAAM,MACrC,YAAWA,EAAM,WACjB,cAAY,gBACZ,QAAS,IAAM,CACTE,GACJF,EAAM,SAASA,EAAM,KAAK,CAE5B,EAEC,SAAAA,EAAM,KAAA,CAAA,CAGV"}

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

@@ -0,0 +1,36 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("styled-components"),t=require("../../constants/Theme.js"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=i(o),d={small:"32px",medium:"48px"},n={small:"0px 8px",medium:"0px 12px"},a=r.default.button`
+	box-sizing: border-box;
+	height: ${e=>d[e.size]};
+	${e=>e.width?`width: ${e.width}px;`:""}
+	padding: ${e=>n[e.size]};
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 4px;
+	border: 1px solid
+		${e=>e.selected?t.COLORS.background.inverseLight:t.COLORS.stroke.primary};
+	background: ${e=>e.selected?t.COLORS.background.brandLight:t.COLORS.surface.standard};
+	color: ${e=>e.selected?t.COLORS.content.primary:t.COLORS.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: ${t.COLORS.content.inactive};
+		border-color: ${t.COLORS.stroke.primary};
+		background: ${t.COLORS.surface.subdued};
+	}
+	:hover:not(:disabled) {
+		background: ${e=>e.selected?t.COLORS.background.brandLight:t.COLORS.surface.hovered};
+	}
+`,s=r.default.div`
+	display: flex;
+	flex-direction: row;
+	gap: ${e=>e.gap}px;
+	flex-wrap: ${e=>e.wrap?"wrap":"nowrap"};
+`;exports.Chip=a;exports.ChipGroup=s;
+//# sourceMappingURL=ChipSelector.styled.js.map

package/dist/cjs/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":"0NAKMA,EAA8C,CACnD,MAAO,OACP,OAAQ,MACT,EAEMC,EAA+C,CACpD,MAAO,UACP,OAAQ,UACT,EAEaC,EAAOC,EAAAA,QAAO;AAAA;AAAA,WAMfC,GAAUJ,EAAkBI,EAAM,IAAI,CAAC;AAAA,GAC/CA,GAAWA,EAAM,MAAQ,UAAUA,EAAM,KAAK,MAAQ,EAAG;AAAA,YAChDA,GAAUH,EAAmBG,EAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMhDA,GACFA,EAAM,SAAWC,EAAAA,OAAO,WAAW,aAAeA,EAAAA,OAAO,OAAO,OAAO;AAAA,eAC1DD,GACdA,EAAM,SAAWC,EAAAA,OAAO,WAAW,WAAaA,EAAAA,OAAO,QAAQ,QAAQ;AAAA,UAC9DD,GACTA,EAAM,SAAWC,EAAAA,OAAO,QAAQ,QAAUA,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA,gBAEnDD,GAAWA,EAAM,SAAW,IAAM,GAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAO5CC,EAAAA,OAAO,QAAQ,QAAQ;AAAA,kBAChBA,EAAAA,OAAO,OAAO,OAAO;AAAA,gBACvBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA,gBAIrBD,GACdA,EAAM,SAAWC,EAAAA,OAAO,WAAW,WAAaA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAI5DC,EAAYH,EAAAA,QAAO;AAAA;AAAA;AAAA,QAGvBC,GAAUA,EAAM,GAAG;AAAA,cACbA,GAAWA,EAAM,KAAO,OAAS,QAAS;AAAA"}

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

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),s=require("./ChipSelector.js"),h=require("./ChipSelector.styled.js"),v=e=>{const n=e.multiSelect??!0,i=e.allowEmpty??!0,c=t=>{const a=e.value.includes(t);if(!n)return a?i?[]:e.value:[t];if(a){const l=e.value.filter(d=>d!==t);return!l.length&&!i?e.value:l}return e.options.map(l=>l.value).filter(l=>l===t\|\|e.value.includes(l))},r=t=>{const a=c(t);a!==e.value&&e.onChange(a)};return u.jsx(h.ChipGroup,{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=>u.jsx(s.ChipSelector,{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))})};exports.ChipSelectorGroup=v;
2	+ //# sourceMappingURL=ChipSelectorGroup.js.map

package/dist/cjs/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":"0LAYaA,EAAuDC,GAAU,CAC7E,MAAMC,EAAcD,EAAM,aAAe,GACnCE,EAAaF,EAAM,YAAc,GAEjCG,EAAkBC,GAAoC,CAC3D,MAAMC,EAAaL,EAAM,MAAM,SAASI,CAAO,EAE/C,GAAI,CAACH,EAEJ,OAAII,EACIH,EAAa,GAAKF,EAAM,MAEzB,CAACI,CAAO,EAGhB,GAAIC,EAAY,CACf,MAAMC,EAAYN,EAAM,MAAM,OAAQO,GAAUA,IAAUH,CAAO,EACjE,MAAO,CAACE,EAAU,QAAU,CAACJ,EAAaF,EAAM,MAAQM,CACzD,CAIA,OAAON,EAAM,QACX,IAAKQ,GAAWA,EAAO,KAAK,EAC5B,OAAQD,GAAUA,IAAUH,GAAWJ,EAAM,MAAM,SAASO,CAAK,CAAC,CACrE,EAEME,EAAkBL,GAAuB,CAC9C,MAAMM,EAAOP,EAAeC,CAAO,EAC/BM,IAASV,EAAM,OAClBA,EAAM,SAASU,CAAI,CAErB,EAEA,OACCC,EAAAA,IAACC,EAAAA,UAAA,CACA,KAAK,QACL,aAAYZ,EAAM,UAClB,IAAKA,EAAM,KAAO,EAClB,KAAMA,EAAM,MAAQ,GACpB,YAAWA,EAAM,WAAW,EAC5B,cAAY,sBAEX,SAAAA,EAAM,QAAQ,IAAKQ,GACnBG,EAAAA,IAACE,EAAAA,aAAA,CAEA,MAAOL,EAAO,MACd,MAAOA,EAAO,MACd,UAAWA,EAAO,UAClB,SAAUA,EAAO,SACjB,SAAUR,EAAM,MAAM,SAASQ,EAAO,KAAK,EAC3C,KAAMR,EAAM,KACZ,MAAOQ,EAAO,WAAa,OAAYR,EAAM,UAC7C,WAAY,GAAGA,EAAM,WAAW,GAAK,MAAM,IAAIQ,EAAO,KAAK,GAC3D,SAAUC,CAAA,EATLD,EAAO,KAAA,CAWb,CAAA,CAAA,CAGJ"}

package/dist/cjs/components/combo-box/ComboBox.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),r=require("react"),K=require("../../assets/icons/chevronDown.svg.js"),I=require("./ComboBox.styled.js"),M=require("../input/Input.js"),V=(n,c)=>{const u=c.trim().toLowerCase();return u?n.filter(d=>d.value.toLowerCase().startsWith(u)):n},F=({value:n,options:c,onChange:u,validate:d,format:m,sanitize:R,filter:g=V,placeholder:k,errorMessage:E,disabled:O,onInvalidBlur:q,"data-test":L})=>{const[s,i]=r.useState(n),[h,A]=r.useState(!1),[w,B]=r.useState(-1),p=r.useRef(null),C=r.useRef(null),x=r.useRef(-1),v=r.useRef(!1),l=e=>{x.current=e,B(e)},o=e=>{v.current=e,A(e)},b=e=>d?d(e):e.trim().length>0;r.useEffect(()=>{i(e=>b(e)&&(m?m(e):e)===n?e:n)},[n]);const a=r.useMemo(()=>{const e=s.trim();return c.some(t=>t.value===e)?c:g(c,s)},[g,c,s]);r.useEffect(()=>{if(!h)return;const e=t=>{p.current?.contains(t.target)\|\|o(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[h]),r.useEffect(()=>{if(w<0)return;const e=C.current?.children[w];e instanceof HTMLElement&&e.scrollIntoView&&e.scrollIntoView({block:"nearest"})},[w]);const j=e=>{i(e.value),u(e.value),o(!1),l(-1)},S=e=>{const t=e;if(t.key==="ArrowDown"\|\|t.key==="ArrowUp"){if(t.preventDefault(),!v.current){o(!0);return}const y=t.key==="ArrowDown"?1:-1,D=x.current+y;D<0?l(a.length-1):D>=a.length?l(0):l(D);return}if(t.key==="Enter"&&v.current&&x.current>=0){t.preventDefault(),j(a[x.current]);return}t.key==="Escape"&&o(!1)},T=()=>{if(b(s)){const e=m?m(s):s;i(e),e!==n&&u(e);return}i(n),q?.()};return f.jsxs(I.ComboBoxWrapper,{ref:p,"data-test":L,children:[f.jsx("div",{children:f.jsx(M.Input,{width:"100%",placeholder:k,value:s,isDisabled:O,errorMessage:E,state:E?"invalid":O?"disabled":"active",rightIcon:{icon:K.default,callback:()=>o(!v.current),"data-test":"combo-box-toggle"},onKeyDownEvent:S,noKeyDownChange:!0,onFocus:()=>o(!0),onChangeText:e=>{const t=R?R(e):e;i(t),o(!0),l(-1),b(t)&&u(t)},onBlur:T})}),h&&!!a.length&&f.jsx(I.OptionList,{ref:C,role:"listbox",children:a.map((e,t)=>f.jsx(I.OptionItem,{role:"option","aria-selected":e.value===n,isActive:t===w,isSelected:e.value===n,onMouseDown:y=>{y.preventDefault(),j(e)},children:e.label??e.value},e.value))})]})};exports.ComboBox=F;
2	+ //# sourceMappingURL=ComboBox.js.map

package/dist/cjs/components/combo-box/ComboBox.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ComboBox.js","sources":["../../../../src/components/combo-box/ComboBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from 'react';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport { Input } from '../input';\nimport { ComboBoxWrapper, OptionItem, OptionList } from './ComboBox.styled';\nimport { ComboBoxOption, ComboBoxProps } from './model';\n\n/** Options whose value starts with what has been typed. */\nconst defaultFilter = (\n\toptions: ComboBoxOption[],\n\ttext: string,\n): ComboBoxOption[] => {\n\tconst query = text.trim().toLowerCase();\n\tif (!query) return options;\n\treturn options.filter((option) =>\n\t\toption.value.toLowerCase().startsWith(query),\n\t);\n};\n\n/**\n * A text field that can be typed into or picked from a list.\n *\n * Sits between Dropdown, whose box is not editable, and Input, which offers no\n * options. Reach for it when a field has common values worth listing but must\n * still accept anything valid the user types — a time, a duration, a currency.\n *\n * Typing is validated rather than constrained, so a half-finished entry stays in\n * the box instead of being rewritten on every keystroke; `validate` decides what\n * is worth committing and `format` tidies the text once the field is left.\n */\nexport const ComboBox: React.FC<ComboBoxProps> = ({\n\tvalue,\n\toptions,\n\tonChange,\n\tvalidate,\n\tformat,\n\tsanitize,\n\tfilter = defaultFilter,\n\tplaceholder,\n\terrorMessage,\n\tdisabled,\n\tonInvalidBlur,\n\t'data-test': dataTest,\n}) => {\n\t// What the box shows while typing. Separate from `value` so a partial entry\n\t// survives a keystroke rather than being parsed away.\n\tconst [text, setText] = useState(value);\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst [activeIndex, setActiveIndex] = useState(-1);\n\tconst wrapperRef = useRef<HTMLDivElement | null>(null);\n\tconst listRef = useRef<HTMLUListElement | null>(null);\n\t// Mirrors activeIndex for the key handler, which closes over the value from\n\t// its own render — two arrow presses in one frame would otherwise both read\n\t// the same starting index.\n\tconst activeIndexRef = useRef(-1);\n\t// Same reason as activeIndexRef: the handler must see the list state left by\n\t// the keypress before it, not the one from its own render.\n\tconst isOpenRef = useRef(false);\n\n\tconst moveActiveIndex = (next: number) => {\n\t\tactiveIndexRef.current = next;\n\t\tsetActiveIndex(next);\n\t};\n\n\tconst setListOpen = (open: boolean) => {\n\t\tisOpenRef.current = open;\n\t\tsetIsOpen(open);\n\t};\n\n\tconst isValid = (candidate: string) =>\n\t\tvalidate ? validate(candidate) : candidate.trim().length > 0;\n\n\t// Mirror committed changes from outside — a loaded value, a reset, a\n\t// recommendation — without disturbing text being typed right now.\n\tuseEffect(() => {\n\t\tsetText((prev) => {\n\t\t\tif (!isValid(prev)) return value;\n\t\t\t// Compare through `format` so text that already means the committed\n\t\t\t// value is left as typed. Without this, typing \"11:4\" is rewritten to\n\t\t\t// the formatted \"11:04\" and the next keystroke lands as \"11:045\".\n\t\t\tconst asCommitted = format ? format(prev) : prev;\n\t\t\treturn asCommitted === value ? prev : value;\n\t\t});\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [value]);\n\n\t// An exact match still shows every option, so neighbouring values stay\n\t// reachable after picking one.\n\tconst visibleOptions = useMemo(() => {\n\t\tconst query = text.trim();\n\t\tif (options.some((option) => option.value === query)) return options;\n\t\treturn filter(options, text);\n\t}, [filter, options, text]);\n\n\tuseEffect(() => {\n\t\tif (!isOpen) return;\n\n\t\tconst handlePointerDown = (event: MouseEvent) => {\n\t\t\tif (!wrapperRef.current?.contains(event.target as Node)) {\n\t\t\t\tsetListOpen(false);\n\t\t\t}\n\t\t};\n\n\t\tdocument.addEventListener('mousedown', handlePointerDown);\n\t\treturn () => document.removeEventListener('mousedown', handlePointerDown);\n\t}, [isOpen]);\n\n\t// Keep the keyboard cursor in view when it moves past the visible rows.\n\tuseEffect(() => {\n\t\tif (activeIndex < 0) return;\n\t\tconst activeNode = listRef.current?.children[activeIndex];\n\t\t// Guarded because scrollIntoView is not implemented everywhere the library\n\t\t// renders — jsdom being the common case.\n\t\tif (activeNode instanceof HTMLElement && activeNode.scrollIntoView) {\n\t\t\tactiveNode.scrollIntoView({ block: 'nearest' });\n\t\t}\n\t}, [activeIndex]);\n\n\tconst selectOption = (option: ComboBoxOption) => {\n\t\tsetText(option.value);\n\t\tonChange(option.value);\n\t\tsetListOpen(false);\n\t\tmoveActiveIndex(-1);\n\t};\n\n\t// Typed as the DOM Event the Input hook passes; the fields read below are\n\t// KeyboardEvent's, so it is narrowed on entry.\n\tconst handleKeyDown = (nativeEvent: Event) => {\n\t\tconst event = nativeEvent as unknown as KeyboardEvent;\n\t\tif (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n\t\t\tevent.preventDefault();\n\t\t\tif (!isOpenRef.current) {\n\t\t\t\tsetListOpen(true);\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst step = event.key === 'ArrowDown' ? 1 : -1;\n\t\t\tconst next = activeIndexRef.current + step;\n\t\t\tif (next < 0) moveActiveIndex(visibleOptions.length - 1);\n\t\t\telse if (next >= visibleOptions.length) moveActiveIndex(0);\n\t\t\telse moveActiveIndex(next);\n\t\t\treturn;\n\t\t}\n\n\t\tif (\n\t\t\tevent.key === 'Enter' &&\n\t\t\tisOpenRef.current &&\n\t\t\tactiveIndexRef.current >= 0\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\tselectOption(visibleOptions[activeIndexRef.current]);\n\t\t\treturn;\n\t\t}\n\n\t\tif (event.key === 'Escape') setListOpen(false);\n\t};\n\n\tconst handleBlur = () => {\n\t\tif (isValid(text)) {\n\t\t\tconst formatted = format ? format(text) : text;\n\t\t\tsetText(formatted);\n\t\t\tif (formatted !== value) onChange(formatted);\n\t\t\treturn;\n\t\t}\n\t\t// Unusable text falls back to the last committed value.\n\t\tsetText(value);\n\t\tonInvalidBlur?.();\n\t};\n\n\treturn (\n\t\t<ComboBoxWrapper ref={wrapperRef} data-test={dataTest}>\n\t\t\t<div>\n\t\t\t\t<Input\n\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tvalue={text}\n\t\t\t\t\tisDisabled={disabled}\n\t\t\t\t\terrorMessage={errorMessage}\n\t\t\t\t\tstate={errorMessage ? 'invalid' : disabled ? 'disabled' : 'active'}\n\t\t\t\t\t// Input handles its own keydown, so the arrow/Enter handling goes\n\t\t\t\t\t// through its hook rather than a wrapper that never sees the event.\n\t\t\t\t\t// Same chevron Dropdown uses, so the field reads as one rather than\n\t\t\t\t\t// looking like a plain text box that happens to suggest values.\n\t\t\t\t\trightIcon={{\n\t\t\t\t\t\ticon: DownIcon,\n\t\t\t\t\t\tcallback: () => setListOpen(!isOpenRef.current),\n\t\t\t\t\t\t'data-test': 'combo-box-toggle',\n\t\t\t\t\t}}\n\t\t\t\t\tonKeyDownEvent={handleKeyDown}\n\t\t\t\t\t// Without this Input re-fires onChangeText on every keypress, which\n\t\t\t\t\t// would re-open the list on Escape and fight the arrow keys.\n\t\t\t\t\tnoKeyDownChange\n\t\t\t\t\tonFocus={() => setListOpen(true)}\n\t\t\t\t\tonChangeText={(input: string) => {\n\t\t\t\t\t\tconst cleaned = sanitize ? sanitize(input) : input;\n\t\t\t\t\t\tsetText(cleaned);\n\t\t\t\t\t\tsetListOpen(true);\n\t\t\t\t\t\tmoveActiveIndex(-1);\n\t\t\t\t\t\tif (isValid(cleaned)) onChange(cleaned);\n\t\t\t\t\t}}\n\t\t\t\t\tonBlur={handleBlur}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{isOpen && !!visibleOptions.length && (\n\t\t\t\t<OptionList ref={listRef} role=\"listbox\">\n\t\t\t\t\t{visibleOptions.map((option, index) => (\n\t\t\t\t\t\t<OptionItem\n\t\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\taria-selected={option.value === value}\n\t\t\t\t\t\t\tisActive={index === activeIndex}\n\t\t\t\t\t\t\tisSelected={option.value === value}\n\t\t\t\t\t\t\t// mousedown fires before the input's blur, so the click is not\n\t\t\t\t\t\t\t// lost to the field closing first.\n\t\t\t\t\t\t\tonMouseDown={(event) => {\n\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\tselectOption(option);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{option.label ?? option.value}\n\t\t\t\t\t\t</OptionItem>\n\t\t\t\t\t))}\n\t\t\t\t</OptionList>\n\t\t\t)}\n\t\t</ComboBoxWrapper>\n\t);\n};\n\nexport default ComboBox;\n"],"names":["defaultFilter","options","text","query","option","ComboBox","value","onChange","validate","format","sanitize","filter","placeholder","errorMessage","disabled","onInvalidBlur","dataTest","setText","useState","isOpen","setIsOpen","activeIndex","setActiveIndex","wrapperRef","useRef","listRef","activeIndexRef","isOpenRef","moveActiveIndex","next","setListOpen","open","isValid","candidate","useEffect","prev","visibleOptions","useMemo","handlePointerDown","event","activeNode","selectOption","handleKeyDown","nativeEvent","step","handleBlur","formatted","jsxs","ComboBoxWrapper","jsx","Input","DownIcon","input","cleaned","OptionList","index","OptionItem"],"mappings":"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"}

package/dist/cjs/components/combo-box/ComboBox.styled.js ADDED Viewed

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),e=require("../../constants/Theme.js"),i=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},o=i(r),n=o.default.div`
+	position: relative;
+	width: 100%;
+`,a=o.default.ul`
+	position: absolute;
+	top: calc(100% + 4px);
+	left: 0;
+	right: 0;
+	z-index: 5;
+	margin: 0;
+	padding: 4px 0;
+	list-style: none;
+	max-height: 240px;
+	overflow-y: auto;
+	background: ${e.COLORS.surface.standard};
+	border: 1px solid ${e.COLORS.stroke.primary};
+	border-radius: 4px;
+	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
+`,s=o.default.li`
+	padding: 10px 12px;
+	cursor: pointer;
+	font-family: 'Inter', sans-serif;
+	font-size: 14px;
+	line-height: 20px;
+	color: ${t=>t.isSelected?e.COLORS.content.brand:e.COLORS.content.primary};
+	font-weight: ${t=>t.isSelected?600:400};
+	background: ${t=>t.isActive?e.COLORS.surface.hovered:"transparent"};
+	:hover {
+		background: ${e.COLORS.surface.hovered};
+	}
+`;exports.ComboBoxWrapper=n;exports.OptionItem=s;exports.OptionList=a;
+//# sourceMappingURL=ComboBox.styled.js.map

package/dist/cjs/components/combo-box/ComboBox.styled.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"ComboBox.styled.js","sources":["../../../../src/components/combo-box/ComboBox.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\n/** Anchors the option list to the input below it. */\nexport const ComboBoxWrapper = styled.div`\n\tposition: relative;\n\twidth: 100%;\n`;\n\n/**\n * The option list. Sits above neighbouring fields — date pickers in the same\n * form commonly overlay at z-index 4, so this clears them.\n */\nexport const OptionList = styled.ul`\n\tposition: absolute;\n\ttop: calc(100% + 4px);\n\tleft: 0;\n\tright: 0;\n\tz-index: 5;\n\tmargin: 0;\n\tpadding: 4px 0;\n\tlist-style: none;\n\tmax-height: 240px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);\n`;\n\n/** `isActive` tracks the keyboard cursor, which is separate from selection. */\nexport const OptionItem = styled.li<{ isActive: boolean; isSelected: boolean }>`\n\tpadding: 10px 12px;\n\tcursor: pointer;\n\tfont-family: 'Inter', sans-serif;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${(props) =>\n\t\tprops.isSelected ? COLORS.content.brand : COLORS.content.primary};\n\tfont-weight: ${(props) => (props.isSelected ? 600 : 400)};\n\tbackground: ${(props) =>\n\t\tprops.isActive ? COLORS.surface.hovered : 'transparent'};\n\n\t:hover {\n\t\tbackground: ${COLORS.surface.hovered};\n\t}\n`;\n"],"names":["ComboBoxWrapper","styled","OptionList","COLORS","OptionItem","props"],"mappings":"0NAIaA,EAAkBC,EAAAA,QAAO;AAAA;AAAA;AAAA,EASzBC,EAAaD,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAWlBE,EAAAA,OAAO,QAAQ,QAAQ;AAAA,qBACjBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA,EAM7BC,EAAaH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMtBI,GACTA,EAAM,WAAaF,EAAAA,OAAO,QAAQ,MAAQA,EAAAA,OAAO,QAAQ,OAAO;AAAA,gBACjDE,GAAWA,EAAM,WAAa,IAAM,GAAI;AAAA,eACzCA,GACdA,EAAM,SAAWF,EAAAA,OAAO,QAAQ,QAAU,aAAa;AAAA;AAAA;AAAA,gBAGzCA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA"}

package/dist/cjs/components/datePicker/DatePickerWrapper.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),m=require("react-calendar"),h=require("../../hooks/useOutside.js"),k=require("../../utils/DateUtils.js"),t=require("../../constants/Theme.js"),b=require("../../assets/icons/calendar.svg.js"),O=require("../TypographyStyle.js"),S=require("./DatePickerWrapper.styled.js"),a=require("./model.js"),w=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},j=w(m),q=({val:e,onChange:d,calendarProps:y,disabled:n,pickerStyles:D,nativeID:C,maxDate:g,minDate:L,dateButtonType:o,dateButtonStyles:f})=>{const[i,c]=s.useState(!1),R=s.useRef(null),u=s.useRef(null);h.useOutside(u,()=>{c(!1)});const l=()=>e?Array.isArray(e)?e?.[0]?.toString()&&e?.[1]?.toString()?`${new Date(e?.[0]?.toString()).toLocaleDateString()}-${new Date(e?.[1]?.toString()).toLocaleDateString()}`:`${k.default.getPastDate(new Date,30).toLocaleDateString()}-${new Date().toLocaleDateString()}`:new Date(e.toString()).toLocaleDateString():new Date().toLocaleDateString();return r.jsxs(r.Fragment,{children:[r.jsxs(S.DateBtn,{id:C,ref:R,bgColor:n?t.COLORS.background.base:t.COLORS.surface.standard,borderColor:t.COLORS.stroke.primary,onClick:()=>c(!i),dateButtonType:o||a.DateButtonType.DEFAULT,style:f,children:[o===a.DateButtonType.LARGE?r.jsx(O.BodyPrimary,{style:{color:n?t.COLORS.content.inactive:t.COLORS.content.primary,flex:1},children:l()}):r.jsx(O.BodySecondary,{style:{color:n?t.COLORS.content.inactive:t.COLORS.content.primary,flex:1},children:l()}),r.jsx(b.default,{width:o===a.DateButtonType.LARGE?24:20,height:o===a.DateButtonType.LARGE?24:20,color:n?t.COLORS.content.inactive:t.COLORS.content.primary})]}),i&&!n&&r.jsx(S.PickerContainer,{ref:u,style:{...D},contentPrimary:t.COLORS.content.primary,subDued:t.COLORS.surface.subdued,brandColor:t.COLORS.background.brand,bgColor:t.COLORS.surface.standard,borderColor:t.COLORS.stroke.primary,children:r.jsx(j.default,{tileClassName:["custom__tile"],className:["custom__calendar"],onChange:p=>{d(p),c(!1)},maxDate:g,minDate:L,value:e?Array.isArray(e)?e.length===2?[new Date(e[0]),new Date(e[1])]:null:new Date(e):null,...y})})]})};exports.DatePickerWrapper=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),b=require("date-fns"),u=require("react"),q=require("react-calendar"),w=require("../../hooks/useOutside.js"),j=require("../../utils/DateUtils.js"),t=require("../../constants/Theme.js"),x=require("../../assets/icons/calendar.svg.js"),f=require("../TypographyStyle.js"),C=require("./DatePickerWrapper.styled.js"),c=require("./model.js"),P=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},A=P(q),_=({val:e,onChange:S,calendarProps:D,disabled:o,pickerStyles:R,nativeID:p,maxDate:g,minDate:m,dateButtonType:a,dateButtonStyles:L,displayFormat:l,placeholder:h})=>{const[O,i]=u.useState(!1),k=u.useRef(null),d=u.useRef(null);w.useOutside(d,()=>{i(!1)});const n=s=>l?b.format(s,l):s.toLocaleDateString(),y=()=>e?Array.isArray(e)?e?.[0]?.toString()&&e?.[1]?.toString()?`${n(new Date(e[0].toString()))}-${n(new Date(e[1].toString()))}`:`${n(j.default.getPastDate(new Date,30))}-${n(new Date)}`:n(new Date(e.toString())):h??n(new Date);return r.jsxs(r.Fragment,{children:[r.jsxs(C.DateBtn,{id:p,ref:k,bgColor:o?t.COLORS.background.base:t.COLORS.surface.standard,borderColor:t.COLORS.stroke.primary,onClick:()=>i(!O),dateButtonType:a||c.DateButtonType.DEFAULT,style:L,children:[a===c.DateButtonType.LARGE?r.jsx(f.BodyPrimary,{style:{color:o?t.COLORS.content.inactive:t.COLORS.content.primary,flex:1},children:y()}):r.jsx(f.BodySecondary,{style:{color:o?t.COLORS.content.inactive:t.COLORS.content.primary,flex:1},children:y()}),r.jsx(x.default,{width:a===c.DateButtonType.LARGE?24:20,height:a===c.DateButtonType.LARGE?24:20,color:o?t.COLORS.content.inactive:t.COLORS.content.primary})]}),O&&!o&&r.jsx(C.PickerContainer,{ref:d,style:{...R},contentPrimary:t.COLORS.content.primary,subDued:t.COLORS.surface.subdued,brandColor:t.COLORS.background.brand,bgColor:t.COLORS.surface.standard,borderColor:t.COLORS.stroke.primary,children:r.jsx(A.default,{tileClassName:["custom__tile"],className:["custom__calendar"],onChange:s=>{S(s),i(!1)},maxDate:g,minDate:m,value:e?Array.isArray(e)?e.length===2?[new Date(e[0]),new Date(e[1])]:null:new Date(e):null,...D})})]})};exports.DatePickerWrapper=_;
 //# sourceMappingURL=DatePickerWrapper.js.map

package/dist/cjs/components/datePicker/DatePickerWrapper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePickerWrapper.js","sources":["../../../../src/components/datePicker/DatePickerWrapper.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport Calendar, { CalendarProps } from 'react-calendar';\nimport { CSSProperties } from 'styled-components';\nimport { useOutside } from '@src/hooks/useOutside';\nimport DateUtils from '@src/utils/DateUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport CalendarIcon from '../../assets/icons/calendar.svg';\nimport { BodyPrimary, BodySecondary } from '../TypographyStyle';\nimport { DateBtn, PickerContainer } from './DatePickerWrapper.styled';\nimport { DateButtonType } from './model';\n\nexport const DatePickerWrapper: React.FC<{\n\tval?: Date \| Date[];\n\tonChange: (val: Date \| Date[]) => void;\n\tcalendarProps?: CalendarProps;\n\tpickerStyles?: CSSProperties;\n\tdateButtonStyles?: CSSProperties;\n\tnativeID?: string;\n\tdisabled?: boolean;\n\tmaxDate?: Date;\n\tminDate?: Date;\n\tdateButtonType?: DateButtonType;\n}> = ({\n\tval,\n\tonChange,\n\tcalendarProps,\n\tdisabled,\n\tpickerStyles,\n\tnativeID,\n\tmaxDate,\n\tminDate,\n\tdateButtonType,\n\tdateButtonStyles,\n}) => {\n\tconst [showPicker, setPicker] = useState(false);\n\t// const [openUpwards, setOpenUpwards] = useState(false);\n\tconst buttonRef = useRef<HTMLDivElement \| null>(null);\n\tconst pickerRef = useRef<HTMLDivElement \| null>(null);\n\n\tuseOutside(pickerRef, () => {\n\t\tsetPicker(false);\n\t});\n\n\t// useEffect(() => {\n\t// \tif (buttonRef.current && pickerRef.current) {\n\t// \t\tconst buttonRect = buttonRef.current.getBoundingClientRect();\n\t// \t\tconst pickerHeight = pickerRef.current.offsetHeight;\n\t// \t\tconst spaceBelow = window.innerHeight - buttonRect.bottom;\n\n\t// \t\t// If not enough space below, open upwards\n\t// \t\tsetOpenUpwards(spaceBelow < pickerHeight);\n\t// \t}\n\t// }, [showPicker]);\n\n\tconst getDisplayValue = () => {\n\t\~~treturn~~ val\n\t\t\t? Array.isArray(val)\n\t\t\~~t\t?~~ val?.[0]?.toString() && val?.[1]?.toString()\n\t\t\t\t\t? `${new Date(val?.[0]?.toString())~~.toLocaleDateString(~~)}-${~~new Date~~(\n\t\t\t\t\t\~~t\tval?.~~[1]?.toString(),\n\t\t\t\t\t )~~.toLocaleDateString()~~}`\n\t\t\t\t\t: `${DateUtils.getPastDate(\n\t\t\t\t\t\t\tnew Date(),\n\t\t\t\t\t\t\~~t30,\~~n\t\t\~~t\t\t ).toLocaleDateString()}-${new~~ ~~Date~~(~~).toLocaleDateString()}`\n\t\t\t\t:~~ new Date(val.toString())~~.toLocaleDateString(~~)~~\n\t\t\t: new Date().toLocaleDateString()~~;\n\t};\n\treturn (\n\t\t<>\n\t\t\t<DateBtn\n\t\t\t\tid={nativeID}\n\t\t\t\tref={buttonRef}\n\t\t\t\tbgColor={disabled ? COLORS.background.base : COLORS.surface.standard}\n\t\t\t\tborderColor={COLORS.stroke.primary}\n\t\t\t\tonClick={() => setPicker(!showPicker)}\n\t\t\t\tdateButtonType={dateButtonType \|\| DateButtonType.DEFAULT}\n\t\t\t\tstyle={dateButtonStyles}\n\t\t\t>\n\t\t\t\t{dateButtonType === DateButtonType.LARGE ? (\n\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: disabled\n\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t) : (\n\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: disabled\n\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t)}\n\t\t\t\t<CalendarIcon\n\t\t\t\t\twidth={dateButtonType === DateButtonType.LARGE ? 24 : 20}\n\t\t\t\t\theight={dateButtonType === DateButtonType.LARGE ? 24 : 20}\n\t\t\t\t\tcolor={disabled ? COLORS.content.inactive : COLORS.content.primary}\n\t\t\t\t/>\n\t\t\t</DateBtn>\n\t\t\t{showPicker && !disabled && (\n\t\t\t\t<PickerContainer\n\t\t\t\t\tref={\n\t\t\t\t\t\tpickerRef as\n\t\t\t\t\t\t\t\| ((instance: HTMLDivElement \| null) => void)\n\t\t\t\t\t\t\t\| React.RefObject<HTMLDivElement>\n\t\t\t\t\t\t\t\| null\n\t\t\t\t\t\t\t\| undefined\n\t\t\t\t\t}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t...pickerStyles,\n\t\t\t\t\t\t// top: openUpwards ? 'auto' : 'calc(100% + 8px)',\n\t\t\t\t\t\t// bottom: openUpwards ? 'calc(100% + 8px)' : 'auto',\n\t\t\t\t\t}}\n\t\t\t\t\tcontentPrimary={COLORS.content.primary}\n\t\t\t\t\tsubDued={COLORS.surface.subdued}\n\t\t\t\t\tbrandColor={COLORS.background.brand}\n\t\t\t\t\tbgColor={COLORS.surface.standard}\n\t\t\t\t\tborderColor={COLORS.stroke.primary}\n\t\t\t\t>\n\t\t\t\t\t<Calendar\n\t\t\t\t\t\ttileClassName={['custom__tile']}\n\t\t\t\t\t\tclassName={['custom__calendar']}\n\t\t\t\t\t\tonChange={(d) => {\n\t\t\t\t\t\t\tonChange(d);\n\t\t\t\t\t\t\tsetPicker(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tmaxDate={maxDate}\n\t\t\t\t\t\tminDate={minDate}\n\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\tval\n\t\t\t\t\t\t\t\t? Array.isArray(val)\n\t\t\t\t\t\t\t\t\t? val.length === 2\n\t\t\t\t\t\t\t\t\t\t? [new Date(val[0]), new Date(val[1])]\n\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t: new Date(val)\n\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{...calendarProps}\n\t\t\t\t\t/>\n\t\t\t\t</PickerContainer>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["DatePickerWrapper","val","onChange","calendarProps","disabled","pickerStyles","nativeID","maxDate","minDate","dateButtonType","dateButtonStyles","showPicker","setPicker","useState","buttonRef","useRef","pickerRef","useOutside","getDisplayValue","DateUtils","jsxs","Fragment","DateBtn","COLORS","DateButtonType","jsx","BodyPrimary","BodySecondary","CalendarIcon","PickerContainer","Calendar","d"],"mappings":"~~4eAWaA~~,~~EAWR~~,CAAC,CACL,IAAAC,EACA,SAAAC,EACA,cAAAC,EACA,SAAAC,EACA,aAAAC,EACA,SAAAC,EACA,QAAAC,EACA,QAAAC,EACA,eAAAC,EACA,iBAAAC,CACD,IAAM,CACL,KAAM,CAACC,EAAYC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EAExCC,EAAYC,EAAAA,OAA8B,IAAI,EAC9CC,EAAYD,EAAAA,OAA8B,IAAI,EAEpDE,EAAAA,WAAWD,EAAW,IAAM,CAC3BJ,EAAU,EAAK,CAChB,CAAC,~~EAaD~~,MAAMM,EAAkB,~~IAChBjB~~,~~EACJ~~,MAAM,QAAQA,CAAG,~~EAChBA~~,IAAM,CAAC,GAAG,~~YAAcA~~,IAAM,CAAC,GAAG,~~SAAA~~,~~EACjC~~,~~GAAG~~,IAAI,~~KAAKA~~,~~IAAM~~,CAAC,~~GAAG~~,~~SAAA~~,~~CAAU~~,~~EAAE~~,~~oBAAoB~~,~~IAAI~~,IAAI,~~KAC9DA~~,~~IAAM~~,CAAC,~~GAAG~~,~~SAAA~~,~~CAAS~~,~~EACjB~~,~~mBAAA~~,~~CAAoB~~,~~GACtB~~,~~GAAGkB~~,~~EAAAA~~,~~QAAU~~,~~gBACT~~,~~KACJ~~,~~EAAA~~,~~EACE~~,~~oBAAoB~~,~~QAAQ~~,~~OAAO~~,~~oBAAoB~~,~~GAC1D~~,IAAI,~~KAAKlB~~,EAAI,~~UAAU~~,~~EAAE~~,~~qBAC1B~~,~~IAAI~~,~~KAAA~~,~~EAAO~~,~~mBAAA~~,~~EAEf~~,~~OACCmB~~,EAAAA,KAAAC,WAAA,CACC,SAAA,CAAAD,EAAAA,KAACE,EAAAA,QAAA,CACA,~~GAAIhB~~,EACJ,~~IAAKQ~~,EACL,~~QAASV~~,~~EAAWmB~~,SAAO,WAAW,KAAOA,EAAAA,OAAO,QAAQ,SAC5D,YAAaA,EAAAA,OAAO,OAAO,QAC3B,QAAS,~~IAAMX~~,EAAU,CAACD,CAAU,EACpC,~~eAAgBF~~,~~GAAkBe~~,EAAAA,eAAe,QACjD,~~MAAOd~~,EAEN,SAAA,CAAAD,~~IAAmBe~~,EAAAA,eAAe,MAClCC,EAAAA,IAACC,EAAAA,YAAA,CACA,MAAO,CACN,~~MAAOtB~~,~~EACJmB~~,SAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,QAClB,KAAM,CAAA,EAGN,SAAAL,EAAA,CAAgB,CAAA,EAGlBO,EAAAA,IAACE,EAAAA,cAAA,CACA,MAAO,CACN,~~MAAOvB~~,~~EACJmB~~,SAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,QAClB,KAAM,CAAA,EAGN,SAAAL,EAAA,CAAgB,CAAA,EAGnBO,EAAAA,IAACG,EAAAA,QAAA,CACA,~~MAAOnB~~,~~IAAmBe~~,EAAAA,eAAe,MAAQ,GAAK,GACtD,~~OAAQf~~,~~IAAmBe~~,EAAAA,eAAe,MAAQ,GAAK,GACvD,~~MAAOpB~~,~~EAAWmB~~,EAAAA,OAAO,QAAQ,SAAWA,EAAAA,OAAO,QAAQ,OAAA,CAAA,CAC5D,CAAA,CAAA,~~EAEAZ~~,GAAc,~~CAACP~~,~~GACfqB~~,EAAAA,IAACI,EAAAA,gBAAA,CACA,~~IACCb~~,EAMD,MAAO,CACN,~~GAAGX~~,CAAA,EAIJ,~~eAAgBkB~~,EAAAA,OAAO,QAAQ,QAC/B,QAASA,EAAAA,OAAO,QAAQ,QACxB,WAAYA,EAAAA,OAAO,WAAW,MAC9B,QAASA,EAAAA,OAAO,QAAQ,SACxB,YAAaA,EAAAA,OAAO,OAAO,QAE3B,SAAAE,EAAAA,IAACK,EAAAA,QAAA,CACA,cAAe,CAAC,cAAc,EAC9B,UAAW,CAAC,kBAAkB,EAC9B,SAAWC,GAAM,~~CAChB7B~~,~~EAAS6B~~,CAAC,~~EACVnB~~,EAAU,EAAK,CAChB,EACA,~~QAAAL~~,EACA,QAAAC,EACA,MACCP,EACG,MAAM,QAAQA,CAAG,EAChBA,EAAI,SAAW,EACd,CAAC,IAAI,KAAKA,EAAI,CAAC,CAAC,EAAG,IAAI,KAAKA,EAAI,CAAC,CAAC,CAAC,EACnC,KACD,IAAI,KAAKA,CAAG,EACb,KAEH,GAAGE,CAAA,CAAA,CACL,CAAA,CACD,EAEF,CAEF"}
1	+ {"version":3,"file":"DatePickerWrapper.js","sources":["../../../../src/components/datePicker/DatePickerWrapper.tsx"],"sourcesContent":["import { format as formatDate } from 'date-fns';\nimport React, { useRef, useState } from 'react';\nimport Calendar, { CalendarProps } from 'react-calendar';\nimport { CSSProperties } from 'styled-components';\nimport { useOutside } from '@src/hooks/useOutside';\nimport DateUtils from '@src/utils/DateUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport CalendarIcon from '../../assets/icons/calendar.svg';\nimport { BodyPrimary, BodySecondary } from '../TypographyStyle';\nimport { DateBtn, PickerContainer } from './DatePickerWrapper.styled';\nimport { DateButtonType } from './model';\n\nexport const DatePickerWrapper: React.FC<{\n\tval?: Date \| Date[];\n\tonChange: (val: Date \| Date[]) => void;\n\tcalendarProps?: CalendarProps;\n\tpickerStyles?: CSSProperties;\n\tdateButtonStyles?: CSSProperties;\n\tnativeID?: string;\n\tdisabled?: boolean;\n\tmaxDate?: Date;\n\tminDate?: Date;\n\tdateButtonType?: DateButtonType;\n\t/*\n\t date-fns format for the button label, e.g. 'dd MMM yyyy' -> \"10 Aug 2026\".\n\t * Omit to keep the locale default (toLocaleDateString).\n\t /\n\tdisplayFormat?: string;\n\t/* Shown instead of a date when `val` is empty. /\n\tplaceholder?: string;\n}> = ({\n\tval,\n\tonChange,\n\tcalendarProps,\n\tdisabled,\n\tpickerStyles,\n\tnativeID,\n\tmaxDate,\n\tminDate,\n\tdateButtonType,\n\tdateButtonStyles,\n\tdisplayFormat,\n\tplaceholder,\n}) => {\n\tconst [showPicker, setPicker] = useState(false);\n\t// const [openUpwards, setOpenUpwards] = useState(false);\n\tconst buttonRef = useRef<HTMLDivElement \| null>(null);\n\tconst pickerRef = useRef<HTMLDivElement \| null>(null);\n\n\tuseOutside(pickerRef, () => {\n\t\tsetPicker(false);\n\t});\n\n\t// useEffect(() => {\n\t// \tif (buttonRef.current && pickerRef.current) {\n\t// \t\tconst buttonRect = buttonRef.current.getBoundingClientRect();\n\t// \t\tconst pickerHeight = pickerRef.current.offsetHeight;\n\t// \t\tconst spaceBelow = window.innerHeight - buttonRect.bottom;\n\n\t// \t\t// If not enough space below, open upwards\n\t// \t\tsetOpenUpwards(spaceBelow < pickerHeight);\n\t// \t}\n\t// }, [showPicker]);\n\n\t/* Honours `displayFormat` when given, else the locale default. */\n\tconst formatOne = (date: Date) =>\n\t\tdisplayFormat ? formatDate(date, displayFormat) : date.toLocaleDateString();\n\n\tconst getDisplayValue = () => {\n\t\tif (!val) {\n\t\t\treturn placeholder ?? formatOne(new Date());\n\t\t}\n\n\t\tif (Array.isArray(val)) {\n\t\t\treturn val?.[0]?.toString() && val?.[1]?.toString()\n\t\t\t\t? `${formatOne(new Date(val[0].toString()))}-${formatOne(\n\t\t\t\t\t\tnew Date(val[1].toString()),\n\t\t\t\t )}`\n\t\t\t\t: `${formatOne(DateUtils.getPastDate(new Date(), 30))}-${formatOne(\n\t\t\t\t\t\tnew Date(),\n\t\t\t\t )}`;\n\t\t}\n\n\t\treturn formatOne(new Date(val.toString()));\n\t};\n\treturn (\n\t\t<>\n\t\t\t<DateBtn\n\t\t\t\tid={nativeID}\n\t\t\t\tref={buttonRef}\n\t\t\t\tbgColor={disabled ? COLORS.background.base : COLORS.surface.standard}\n\t\t\t\tborderColor={COLORS.stroke.primary}\n\t\t\t\tonClick={() => setPicker(!showPicker)}\n\t\t\t\tdateButtonType={dateButtonType \|\| DateButtonType.DEFAULT}\n\t\t\t\tstyle={dateButtonStyles}\n\t\t\t>\n\t\t\t\t{dateButtonType === DateButtonType.LARGE ? (\n\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: disabled\n\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t) : (\n\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tcolor: disabled\n\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{getDisplayValue()}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t)}\n\t\t\t\t<CalendarIcon\n\t\t\t\t\twidth={dateButtonType === DateButtonType.LARGE ? 24 : 20}\n\t\t\t\t\theight={dateButtonType === DateButtonType.LARGE ? 24 : 20}\n\t\t\t\t\tcolor={disabled ? COLORS.content.inactive : COLORS.content.primary}\n\t\t\t\t/>\n\t\t\t</DateBtn>\n\t\t\t{showPicker && !disabled && (\n\t\t\t\t<PickerContainer\n\t\t\t\t\tref={\n\t\t\t\t\t\tpickerRef as\n\t\t\t\t\t\t\t\| ((instance: HTMLDivElement \| null) => void)\n\t\t\t\t\t\t\t\| React.RefObject<HTMLDivElement>\n\t\t\t\t\t\t\t\| null\n\t\t\t\t\t\t\t\| undefined\n\t\t\t\t\t}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\t...pickerStyles,\n\t\t\t\t\t\t// top: openUpwards ? 'auto' : 'calc(100% + 8px)',\n\t\t\t\t\t\t// bottom: openUpwards ? 'calc(100% + 8px)' : 'auto',\n\t\t\t\t\t}}\n\t\t\t\t\tcontentPrimary={COLORS.content.primary}\n\t\t\t\t\tsubDued={COLORS.surface.subdued}\n\t\t\t\t\tbrandColor={COLORS.background.brand}\n\t\t\t\t\tbgColor={COLORS.surface.standard}\n\t\t\t\t\tborderColor={COLORS.stroke.primary}\n\t\t\t\t>\n\t\t\t\t\t<Calendar\n\t\t\t\t\t\ttileClassName={['custom__tile']}\n\t\t\t\t\t\tclassName={['custom__calendar']}\n\t\t\t\t\t\tonChange={(d) => {\n\t\t\t\t\t\t\tonChange(d);\n\t\t\t\t\t\t\tsetPicker(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tmaxDate={maxDate}\n\t\t\t\t\t\tminDate={minDate}\n\t\t\t\t\t\tvalue={\n\t\t\t\t\t\t\tval\n\t\t\t\t\t\t\t\t? Array.isArray(val)\n\t\t\t\t\t\t\t\t\t? val.length === 2\n\t\t\t\t\t\t\t\t\t\t? [new Date(val[0]), new Date(val[1])]\n\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t: new Date(val)\n\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{...calendarProps}\n\t\t\t\t\t/>\n\t\t\t\t</PickerContainer>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["DatePickerWrapper","val","onChange","calendarProps","disabled","pickerStyles","nativeID","maxDate","minDate","dateButtonType","dateButtonStyles","displayFormat","placeholder","showPicker","setPicker","useState","buttonRef","useRef","pickerRef","useOutside","formatOne","date","formatDate","getDisplayValue","DateUtils","jsxs","Fragment","DateBtn","COLORS","DateButtonType","jsx","BodyPrimary","BodySecondary","CalendarIcon","PickerContainer","Calendar","d"],"mappings":"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"}

package/dist/cjs/components/dropdown-button/DropdownButton.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("../dropdown/DropdownPopover/index.js"),b=require("../button/themes.js"),i=require("./DropdownButton.style.js"),c=require("../icon-button/IconButton.js"),p=require("../tooltips/Tooltip.js"),x=require("../spinner/Spinner.js"),a=require("../button/Button.js"),y=o=>{const r=!!o.iconButtonProps,d=r?o.iconButtonProps?.disabled:o.buttonProps?.disabled;if(r){const{iconButtonProps:n,iconButtonTooltip:e}=o,s=t.jsx(c.IconButton,{...n,style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px"}});return t.jsxs(i.DropdownButtonStyle,{type:void 0,disabled:d,isIconButton:!0,iconButtonType:n?.iconButtonType??"primary",iconButtonSize:n?.size??"default",children:[e?t.jsx(p.Tooltip,{body:e.body,tooltipContent:e.tooltipContent,placement:e.placement,children:s}):s,t.jsx("div",{className:"dd-button-divider"}),t.jsx("div",{style:{display:"flex",alignItems:"center"},children:t.jsx(u.DropdownPopover,{...o.dropdownProps,isChildLoading:!1,children:t.jsx(c.IconButton,{Icon:o.iconProps,iconButtonType:n?.iconButtonType??"primary",size:n?.size,disabled:d,style:{display:"flex",borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"}})})})]})}const{onClick:B,LeadingIcon:P,LeadingIconStyles:R,IconComponent:h,TrailingIcon:g,...l}=o.buttonProps;return t.jsxs(i.DropdownButtonStyle,{type:o.buttonProps.buttonType,disabled:o.buttonProps.disabled,size:o.buttonProps.size,children:[o.buttonProps?.isLoading&&t.jsx(i.LoaderContainer,{type:o.buttonProps.buttonType,children:t.jsx(x.Spinner,{className:"spinner",size:"small",color:b.SpinnerColorMap(o.buttonProps.buttonType||"primary",o.buttonProps.inverse)})}),t.jsx(a.Button,{...o.buttonProps,isLoading:!1,style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:"0px",...o.buttonProps?.size==="xs"?{border:"none",boxShadow:"none",borderRadius:"0px"}:{}}}),t.jsx("div",{className:"dd-button-divider"}),t.jsx(u.DropdownPopover,{...o.dropdownProps,isChildLoading:o.buttonProps?.isLoading,children:t.jsx(a.Button,{...l,isLoading:!1,buttonText:"",TrailingIcon:o.iconProps,style:{borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px",...o.buttonProps?.size==="xs"?{border:"none",boxShadow:"none",borderRadius:"0px"}:{},...o.chevronStyle??{}}})})]})};exports.DropdownButton=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("../dropdown/DropdownPopover/index.js"),b=require("../button/themes.js"),i=require("./DropdownButton.style.js"),a=require("../icon-button/IconButton.js"),p=require("../tooltips/Tooltip.js"),x=require("../spinner/Spinner.js"),c=require("../button/Button.js"),y=o=>{const r=!!o.iconButtonProps,s=r?o.iconButtonProps?.disabled:o.buttonProps?.disabled;if(r){const{iconButtonProps:n,iconButtonTooltip:e}=o,d=t.jsx(a.IconButton,{...n,style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px"}});return t.jsxs(i.DropdownButtonStyle,{type:void 0,disabled:s,isIconButton:!0,iconButtonType:n?.iconButtonType??"primary",iconButtonSize:n?.size??"default",children:[e?t.jsx(p.Tooltip,{body:e.body,tooltipContent:e.tooltipContent,placement:e.placement,children:d}):d,t.jsx("div",{className:"dd-button-divider"}),t.jsx("div",{style:{display:"flex",alignItems:"center"},children:t.jsx(u.DropdownPopover,{...o.dropdownProps,isChildLoading:!1,children:t.jsx(a.IconButton,{Icon:o.iconProps,iconButtonType:n?.iconButtonType??"primary",size:n?.size,disabled:s,style:{display:"flex",borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"}})})})]})}const{onClick:B,LeadingIcon:P,LeadingIconStyles:R,IconComponent:g,TrailingIcon:h,...l}=o.buttonProps;return t.jsxs(i.DropdownButtonStyle,{type:o.buttonProps.buttonType,disabled:o.buttonProps.disabled,size:o.buttonProps.size,children:[o.buttonProps?.isLoading&&t.jsx(i.LoaderContainer,{type:o.buttonProps.buttonType,children:t.jsx(x.Spinner,{className:"spinner",size:"small",color:b.SpinnerColorMap(o.buttonProps.buttonType||"primary",o.buttonProps.inverse)})}),t.jsx(c.Button,{...o.buttonProps,isLoading:!1,style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:"0px",...o.buttonProps?.size==="xs"?{border:"none",boxShadow:"none",borderRadius:"0px"}:{}}}),t.jsx("div",{className:"dd-button-divider"}),t.jsx(u.DropdownPopover,{...o.dropdownProps,isChildLoading:o.buttonProps?.isLoading,children:t.jsx(c.Button,{...l,isLoading:!1,buttonText:"",TrailingIcon:o.iconProps,style:{borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px",...o.buttonProps?.size==="xs"?{border:"none",boxShadow:"none",borderRadius:"0px"}:{}}})})]})};exports.DropdownButton=y;
 //# sourceMappingURL=DropdownButton.js.map

package/dist/cjs/components/dropdown-button/DropdownButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropdownButton.js","sources":["../../../../src/components/dropdown-button/DropdownButton.tsx"],"sourcesContent":["import React from 'react';\nimport { DropdownPopover, DropdownProps } from '@src/components/dropdown';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\nimport { SpinnerColorMap } from '../button/themes';\nimport { IconButton } from '../icon-button';\nimport { IconButtonProps } from '../icon-button/model';\nimport { Spinner } from '../spinner';\nimport { Placement, Tooltip } from '../tooltips';\nimport { DropdownButtonStyle, LoaderContainer } from './DropdownButton.style';\n\nexport interface DropdownButtonProps {\n\tdropdownProps: DropdownProps;\n\ticonProps: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tbuttonProps?: ButtonProps;\n\ticonButtonProps?: IconButtonProps;\n\t/*\n\t Optional tooltip shown only on the main icon button (icon mode),\n\t * not on the dropdown/chevron trigger.\n\t /\n\ticonButtonTooltip?: {\n\t\tbody?: string;\n\t\ttooltipContent?: JSX.Element;\n\t\tplacement?: Placement;\n\t};\n~~\t/\n\t Style overrides for the chevron/trigger button (button mode only),\n\t * e.g. a tighter padding than the main button's.\n\t */\n\tchevronStyle?: React.CSSProperties;\n~~}\n\nexport const DropdownButton: React.FC<DropdownButtonProps> = (props) => {\n\tconst isIconMode = !!props.iconButtonProps;\n\tconst disabled = isIconMode\n\t\t? props.iconButtonProps?.disabled\n\t\t: props.buttonProps?.disabled;\n\n\tif (isIconMode) {\n\t\tconst { iconButtonProps, iconButtonTooltip } = props;\n\t\tconst iconButton = (\n\t\t\t<IconButton\n\t\t\t\t{...iconButtonProps!}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\tborderTopLeftRadius: '4px',\n\t\t\t\t\tborderBottomLeftRadius: '4px',\n\t\t\t\t}}\n\t\t\t/>\n\t\t);\n\t\treturn (\n\t\t\t<DropdownButtonStyle\n\t\t\t\ttype={undefined}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tisIconButton\n\t\t\t\ticonButtonType={iconButtonProps?.iconButtonType ?? 'primary'}\n\t\t\t\ticonButtonSize={iconButtonProps?.size ?? 'default'}\n\t\t\t>\n\t\t\t\t{iconButtonTooltip ? (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={iconButtonTooltip.body}\n\t\t\t\t\t\ttooltipContent={iconButtonTooltip.tooltipContent}\n\t\t\t\t\t\tplacement={iconButtonTooltip.placement}\n\t\t\t\t\t>\n\t\t\t\t\t\t{iconButton}\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\ticonButton\n\t\t\t\t)}\n\t\t\t\t<div className=\"dd-button-divider\"></div>\n\t\t\t\t<div style={{ display: 'flex', alignItems: 'center' }}>\n\t\t\t\t\t<DropdownPopover {...props.dropdownProps} isChildLoading={false}>\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\tIcon={props.iconProps}\n\t\t\t\t\t\t\ticonButtonType={iconButtonProps?.iconButtonType ?? 'primary'}\n\t\t\t\t\t\t\tsize={iconButtonProps?.size}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\t\t\t\tborderTopRightRadius: '4px',\n\t\t\t\t\t\t\t\tborderBottomRightRadius: '4px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</DropdownPopover>\n\t\t\t\t</div>\n\t\t\t</DropdownButtonStyle>\n\t\t);\n\t}\n\n\tconst {\n\t\tonClick,\n\t\tLeadingIcon,\n\t\tLeadingIconStyles,\n\t\tIconComponent,\n\t\tTrailingIcon,\n\t\t...childButtonProps\n\t} = props.buttonProps!;\n\n\treturn (\n\t\t<DropdownButtonStyle\n\t\t\ttype={props.buttonProps!.buttonType}\n\t\t\tdisabled={props.buttonProps!.disabled}\n\t\t\tsize={props.buttonProps!.size}\n\t\t>\n\t\t\t{props.buttonProps?.isLoading && (\n\t\t\t\t<LoaderContainer type={props.buttonProps.buttonType}>\n\t\t\t\t\t<Spinner\n\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tcolor={SpinnerColorMap(\n\t\t\t\t\t\t\tprops.buttonProps.buttonType \|\| 'primary',\n\t\t\t\t\t\t\tprops.buttonProps.inverse,\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t</LoaderContainer>\n\t\t\t)}\n\n\t\t\t<Button\n\t\t\t\t{...props.buttonProps!}\n\t\t\t\tisLoading={false}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\tborderTopLeftRadius: '4px',\n\t\t\t\t\tborderBottomLeftRadius: '4px',\n\t\t\t\t\tborderRight: '0px',\n\t\t\t\t\t...(props.buttonProps?.size === 'xs'\n\t\t\t\t\t\t? { border: 'none', boxShadow: 'none', borderRadius: '0px' }\n\t\t\t\t\t\t: {}),\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<div className=\"dd-button-divider\"></div>\n\t\t\t<DropdownPopover\n\t\t\t\t{...props.dropdownProps}\n\t\t\t\tisChildLoading={props.buttonProps?.isLoading}\n\t\t\t>\n\t\t\t\t<Button\n\t\t\t\t\t{...childButtonProps}\n\t\t\t\t\tisLoading={false}\n\t\t\t\t\tbuttonText={''}\n\t\t\t\t\tTrailingIcon={props.iconProps}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\t\tborderTopRightRadius: '4px',\n\t\t\t\t\t\tborderBottomRightRadius: '4px',\n\t\t\t\t\t\t...(props.buttonProps?.size === 'xs'\n\t\t\t\t\t\t\t? { border: 'none', boxShadow: 'none', borderRadius: '0px' }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t~~\t...(props.chevronStyle ?? {~~}~~),\n\t\t\t\t\t~~}}\n\t\t\t\t/>\n\t\t\t</DropdownPopover>\n\t\t</DropdownButtonStyle>\n\t);\n};\n"],"names":["DropdownButton","props","isIconMode","disabled","iconButtonProps","iconButtonTooltip","iconButton","jsx","IconButton","jsxs","DropdownButtonStyle","Tooltip","DropdownPopover","onClick","LeadingIcon","LeadingIconStyles","IconComponent","TrailingIcon","childButtonProps","LoaderContainer","Spinner","SpinnerColorMap","Button"],"mappings":"~~iYAgCaA~~,EAAiDC,GAAU,CACvE,MAAMC,EAAa,CAAC,CAACD,EAAM,gBACrBE,EAAWD,EACdD,EAAM,iBAAiB,SACvBA,EAAM,aAAa,SAEtB,GAAIC,EAAY,CACf,KAAM,CAAE,gBAAAE,EAAiB,kBAAAC,CAAA,EAAsBJ,EACzCK,EACLC,EAAAA,IAACC,EAAAA,WAAA,CACC,GAAGJ,EACJ,MAAO,CACN,aAAc,MACd,oBAAqB,MACrB,uBAAwB,KAAA,CACzB,CAAA,EAGF,OACCK,EAAAA,KAACC,EAAAA,oBAAA,CACA,KAAM,OACN,SAAAP,EACA,aAAY,GACZ,eAAgBC,GAAiB,gBAAkB,UACnD,eAAgBA,GAAiB,MAAQ,UAExC,SAAA,CAAAC,EACAE,EAAAA,IAACI,EAAAA,QAAA,CACA,KAAMN,EAAkB,KACxB,eAAgBA,EAAkB,eAClC,UAAWA,EAAkB,UAE5B,SAAAC,CAAA,CAAA,EAGFA,EAEDC,EAAAA,IAAC,MAAA,CAAI,UAAU,mBAAA,CAAoB,EACnCA,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,QAAS,OAAQ,WAAY,QAAA,EAC1C,eAACK,EAAAA,gBAAA,CAAiB,GAAGX,EAAM,cAAe,eAAgB,GACzD,SAAAM,EAAAA,IAACC,EAAAA,WAAA,CACA,KAAMP,EAAM,UACZ,eAAgBG,GAAiB,gBAAkB,UACnD,KAAMA,GAAiB,KACvB,SAAAD,EACA,MAAO,CACN,QAAS,OACT,aAAc,MACd,qBAAsB,MACtB,wBAAyB,KAAA,CAC1B,CAAA,EAEF,CAAA,CACD,CAAA,CAAA,CAAA,CAGH,CAEA,KAAM,CACL,QAAAU,EACA,YAAAC,EACA,kBAAAC,EACA,cAAAC,EACA,aAAAC,EACA,GAAGC,CAAA,EACAjB,EAAM,YAEV,OACCQ,EAAAA,KAACC,EAAAA,oBAAA,CACA,KAAMT,EAAM,YAAa,WACzB,SAAUA,EAAM,YAAa,SAC7B,KAAMA,EAAM,YAAa,KAExB,SAAA,CAAAA,EAAM,aAAa,WACnBM,EAAAA,IAACY,EAAAA,iBAAgB,KAAMlB,EAAM,YAAY,WACxC,SAAAM,EAAAA,IAACa,EAAAA,QAAA,CACA,UAAU,UACV,KAAK,QACL,MAAOC,EAAAA,gBACNpB,EAAM,YAAY,YAAc,UAChCA,EAAM,YAAY,OAAA,CACnB,CAAA,EAEF,EAGDM,EAAAA,IAACe,EAAAA,OAAA,CACC,GAAGrB,EAAM,YACV,UAAW,GACX,MAAO,CACN,aAAc,MACd,oBAAqB,MACrB,uBAAwB,MACxB,YAAa,MACb,GAAIA,EAAM,aAAa,OAAS,KAC7B,CAAE,OAAQ,OAAQ,UAAW,OAAQ,aAAc,KAAA,EACnD,CAAA,CAAC,CACL,CAAA,EAEDM,EAAAA,IAAC,MAAA,CAAI,UAAU,mBAAA,CAAoB,EACnCA,EAAAA,IAACK,EAAAA,gBAAA,CACC,GAAGX,EAAM,cACV,eAAgBA,EAAM,aAAa,UAEnC,SAAAM,EAAAA,IAACe,EAAAA,OAAA,CACC,GAAGJ,EACJ,UAAW,GACX,WAAY,GACZ,aAAcjB,EAAM,UACpB,MAAO,CACN,aAAc,MACd,qBAAsB,MACtB,wBAAyB,MACzB,GAAIA,EAAM,aAAa,OAAS,KAC7B,CAAE,OAAQ,OAAQ,UAAW,OAAQ,aAAc,KAAA,EACnD,CAAA,~~EACH,GAAIA,EAAM,cAAgB,CAAA,~~CAAC,~~CAC5B~~,CAAA,CACD,CAAA,CACD,CAAA,CAAA,CAGH"}
1	+ {"version":3,"file":"DropdownButton.js","sources":["../../../../src/components/dropdown-button/DropdownButton.tsx"],"sourcesContent":["import React from 'react';\nimport { DropdownPopover, DropdownProps } from '@src/components/dropdown';\nimport { Button } from '../button';\nimport { ButtonProps } from '../button/model';\nimport { SpinnerColorMap } from '../button/themes';\nimport { IconButton } from '../icon-button';\nimport { IconButtonProps } from '../icon-button/model';\nimport { Spinner } from '../spinner';\nimport { Placement, Tooltip } from '../tooltips';\nimport { DropdownButtonStyle, LoaderContainer } from './DropdownButton.style';\n\nexport interface DropdownButtonProps {\n\tdropdownProps: DropdownProps;\n\ticonProps: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tbuttonProps?: ButtonProps;\n\ticonButtonProps?: IconButtonProps;\n\t/*\n\t Optional tooltip shown only on the main icon button (icon mode),\n\t * not on the dropdown/chevron trigger.\n\t */\n\ticonButtonTooltip?: {\n\t\tbody?: string;\n\t\ttooltipContent?: JSX.Element;\n\t\tplacement?: Placement;\n\t};\n}\n\nexport const DropdownButton: React.FC<DropdownButtonProps> = (props) => {\n\tconst isIconMode = !!props.iconButtonProps;\n\tconst disabled = isIconMode\n\t\t? props.iconButtonProps?.disabled\n\t\t: props.buttonProps?.disabled;\n\n\tif (isIconMode) {\n\t\tconst { iconButtonProps, iconButtonTooltip } = props;\n\t\tconst iconButton = (\n\t\t\t<IconButton\n\t\t\t\t{...iconButtonProps!}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\tborderTopLeftRadius: '4px',\n\t\t\t\t\tborderBottomLeftRadius: '4px',\n\t\t\t\t}}\n\t\t\t/>\n\t\t);\n\t\treturn (\n\t\t\t<DropdownButtonStyle\n\t\t\t\ttype={undefined}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tisIconButton\n\t\t\t\ticonButtonType={iconButtonProps?.iconButtonType ?? 'primary'}\n\t\t\t\ticonButtonSize={iconButtonProps?.size ?? 'default'}\n\t\t\t>\n\t\t\t\t{iconButtonTooltip ? (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={iconButtonTooltip.body}\n\t\t\t\t\t\ttooltipContent={iconButtonTooltip.tooltipContent}\n\t\t\t\t\t\tplacement={iconButtonTooltip.placement}\n\t\t\t\t\t>\n\t\t\t\t\t\t{iconButton}\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\ticonButton\n\t\t\t\t)}\n\t\t\t\t<div className=\"dd-button-divider\"></div>\n\t\t\t\t<div style={{ display: 'flex', alignItems: 'center' }}>\n\t\t\t\t\t<DropdownPopover {...props.dropdownProps} isChildLoading={false}>\n\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\tIcon={props.iconProps}\n\t\t\t\t\t\t\ticonButtonType={iconButtonProps?.iconButtonType ?? 'primary'}\n\t\t\t\t\t\t\tsize={iconButtonProps?.size}\n\t\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\t\t\t\tborderTopRightRadius: '4px',\n\t\t\t\t\t\t\t\tborderBottomRightRadius: '4px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</DropdownPopover>\n\t\t\t\t</div>\n\t\t\t</DropdownButtonStyle>\n\t\t);\n\t}\n\n\tconst {\n\t\tonClick,\n\t\tLeadingIcon,\n\t\tLeadingIconStyles,\n\t\tIconComponent,\n\t\tTrailingIcon,\n\t\t...childButtonProps\n\t} = props.buttonProps!;\n\n\treturn (\n\t\t<DropdownButtonStyle\n\t\t\ttype={props.buttonProps!.buttonType}\n\t\t\tdisabled={props.buttonProps!.disabled}\n\t\t\tsize={props.buttonProps!.size}\n\t\t>\n\t\t\t{props.buttonProps?.isLoading && (\n\t\t\t\t<LoaderContainer type={props.buttonProps.buttonType}>\n\t\t\t\t\t<Spinner\n\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tcolor={SpinnerColorMap(\n\t\t\t\t\t\t\tprops.buttonProps.buttonType \|\| 'primary',\n\t\t\t\t\t\t\tprops.buttonProps.inverse,\n\t\t\t\t\t\t)}\n\t\t\t\t\t/>\n\t\t\t\t</LoaderContainer>\n\t\t\t)}\n\n\t\t\t<Button\n\t\t\t\t{...props.buttonProps!}\n\t\t\t\tisLoading={false}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\tborderTopLeftRadius: '4px',\n\t\t\t\t\tborderBottomLeftRadius: '4px',\n\t\t\t\t\tborderRight: '0px',\n\t\t\t\t\t...(props.buttonProps?.size === 'xs'\n\t\t\t\t\t\t? { border: 'none', boxShadow: 'none', borderRadius: '0px' }\n\t\t\t\t\t\t: {}),\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<div className=\"dd-button-divider\"></div>\n\t\t\t<DropdownPopover\n\t\t\t\t{...props.dropdownProps}\n\t\t\t\tisChildLoading={props.buttonProps?.isLoading}\n\t\t\t>\n\t\t\t\t<Button\n\t\t\t\t\t{...childButtonProps}\n\t\t\t\t\tisLoading={false}\n\t\t\t\t\tbuttonText={''}\n\t\t\t\t\tTrailingIcon={props.iconProps}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: '0px',\n\t\t\t\t\t\tborderTopRightRadius: '4px',\n\t\t\t\t\t\tborderBottomRightRadius: '4px',\n\t\t\t\t\t\t...(props.buttonProps?.size === 'xs'\n\t\t\t\t\t\t\t? { border: 'none', boxShadow: 'none', borderRadius: '0px' }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</DropdownPopover>\n\t\t</DropdownButtonStyle>\n\t);\n};\n"],"names":["DropdownButton","props","isIconMode","disabled","iconButtonProps","iconButtonTooltip","iconButton","jsx","IconButton","jsxs","DropdownButtonStyle","Tooltip","DropdownPopover","onClick","LeadingIcon","LeadingIconStyles","IconComponent","TrailingIcon","childButtonProps","LoaderContainer","Spinner","SpinnerColorMap","Button"],"mappings":"iYA2BaA,EAAiDC,GAAU,CACvE,MAAMC,EAAa,CAAC,CAACD,EAAM,gBACrBE,EAAWD,EACdD,EAAM,iBAAiB,SACvBA,EAAM,aAAa,SAEtB,GAAIC,EAAY,CACf,KAAM,CAAE,gBAAAE,EAAiB,kBAAAC,CAAA,EAAsBJ,EACzCK,EACLC,EAAAA,IAACC,EAAAA,WAAA,CACC,GAAGJ,EACJ,MAAO,CACN,aAAc,MACd,oBAAqB,MACrB,uBAAwB,KAAA,CACzB,CAAA,EAGF,OACCK,EAAAA,KAACC,EAAAA,oBAAA,CACA,KAAM,OACN,SAAAP,EACA,aAAY,GACZ,eAAgBC,GAAiB,gBAAkB,UACnD,eAAgBA,GAAiB,MAAQ,UAExC,SAAA,CAAAC,EACAE,EAAAA,IAACI,EAAAA,QAAA,CACA,KAAMN,EAAkB,KACxB,eAAgBA,EAAkB,eAClC,UAAWA,EAAkB,UAE5B,SAAAC,CAAA,CAAA,EAGFA,EAEDC,EAAAA,IAAC,MAAA,CAAI,UAAU,mBAAA,CAAoB,EACnCA,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,QAAS,OAAQ,WAAY,QAAA,EAC1C,eAACK,EAAAA,gBAAA,CAAiB,GAAGX,EAAM,cAAe,eAAgB,GACzD,SAAAM,EAAAA,IAACC,EAAAA,WAAA,CACA,KAAMP,EAAM,UACZ,eAAgBG,GAAiB,gBAAkB,UACnD,KAAMA,GAAiB,KACvB,SAAAD,EACA,MAAO,CACN,QAAS,OACT,aAAc,MACd,qBAAsB,MACtB,wBAAyB,KAAA,CAC1B,CAAA,EAEF,CAAA,CACD,CAAA,CAAA,CAAA,CAGH,CAEA,KAAM,CACL,QAAAU,EACA,YAAAC,EACA,kBAAAC,EACA,cAAAC,EACA,aAAAC,EACA,GAAGC,CAAA,EACAjB,EAAM,YAEV,OACCQ,EAAAA,KAACC,EAAAA,oBAAA,CACA,KAAMT,EAAM,YAAa,WACzB,SAAUA,EAAM,YAAa,SAC7B,KAAMA,EAAM,YAAa,KAExB,SAAA,CAAAA,EAAM,aAAa,WACnBM,EAAAA,IAACY,EAAAA,iBAAgB,KAAMlB,EAAM,YAAY,WACxC,SAAAM,EAAAA,IAACa,EAAAA,QAAA,CACA,UAAU,UACV,KAAK,QACL,MAAOC,EAAAA,gBACNpB,EAAM,YAAY,YAAc,UAChCA,EAAM,YAAY,OAAA,CACnB,CAAA,EAEF,EAGDM,EAAAA,IAACe,EAAAA,OAAA,CACC,GAAGrB,EAAM,YACV,UAAW,GACX,MAAO,CACN,aAAc,MACd,oBAAqB,MACrB,uBAAwB,MACxB,YAAa,MACb,GAAIA,EAAM,aAAa,OAAS,KAC7B,CAAE,OAAQ,OAAQ,UAAW,OAAQ,aAAc,KAAA,EACnD,CAAA,CAAC,CACL,CAAA,EAEDM,EAAAA,IAAC,MAAA,CAAI,UAAU,mBAAA,CAAoB,EACnCA,EAAAA,IAACK,EAAAA,gBAAA,CACC,GAAGX,EAAM,cACV,eAAgBA,EAAM,aAAa,UAEnC,SAAAM,EAAAA,IAACe,EAAAA,OAAA,CACC,GAAGJ,EACJ,UAAW,GACX,WAAY,GACZ,aAAcjB,EAAM,UACpB,MAAO,CACN,aAAc,MACd,qBAAsB,MACtB,wBAAyB,MACzB,GAAIA,EAAM,aAAa,OAAS,KAC7B,CAAE,OAAQ,OAAQ,UAAW,OAAQ,aAAc,KAAA,EACnD,CAAA,CAAC,CACL,CAAA,CACD,CAAA,CACD,CAAA,CAAA,CAGH"}

package/dist/cjs/components/schedule-builder/RefreshSegmentToggle.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),n=require("../TypographyStyle.js"),s=require("./ScheduleBuilder.styled.js"),u=require("../switch/Switch.js"),d=({value:o,onChange:c,canRefresh:t=!0,title:i="Refresh segment before each run",caption:l="Recomputes who is in the segment before each run","data-test":h="refresh-segment-before-each-run"})=>e.jsxs(s.RefreshSegmentRow,{children:[e.jsxs(s.RefreshSegmentCopy,{children:[e.jsx(n.TitleSmall,{color:r.COLORS.content.primary,children:i}),e.jsx(n.BodyCaption,{color:r.COLORS.content.secondary,children:l})]}),e.jsx(u.Switch,{value:t&&o,disabled:!t,onValueChange:async a=>c(a),"data-test":h})]});exports.RefreshSegmentToggle=d;
2	+ //# sourceMappingURL=RefreshSegmentToggle.js.map

package/dist/cjs/components/schedule-builder/RefreshSegmentToggle.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"RefreshSegmentToggle.js","sources":["../../../../src/components/schedule-builder/RefreshSegmentToggle.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '../../constants/Theme';\nimport { Switch } from '../switch';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\nimport {\n\tRefreshSegmentCopy,\n\tRefreshSegmentRow,\n} from './ScheduleBuilder.styled';\n\nexport interface RefreshSegmentToggleProps {\n\tvalue: boolean;\n\tonChange: (value: boolean) => void;\n\t/**\n\t * False when the audience cannot be recomputed — a static uploaded list, for\n\t * instance. The switch reads off and goes inert rather than disappearing, so\n\t * the merchant can see the option exists and is unavailable.\n\t */\n\tcanRefresh?: boolean;\n\ttitle?: string;\n\tcaption?: string;\n\t'data-test'?: string;\n}\n\n/**\n * \"Refresh segment before each run\".\n *\n * Kept separate from the pickers because it is not part of the schedule — it\n * decides how the audience is resolved at send time, and a screen may want the\n * schedule without offering this at all.\n */\nexport const RefreshSegmentToggle: React.FC<RefreshSegmentToggleProps> = ({\n\tvalue,\n\tonChange,\n\tcanRefresh = true,\n\ttitle = 'Refresh segment before each run',\n\tcaption = 'Recomputes who is in the segment before each run',\n\t'data-test': dataTest = 'refresh-segment-before-each-run',\n}) => (\n\t<RefreshSegmentRow>\n\t\t<RefreshSegmentCopy>\n\t\t\t<TitleSmall color={COLORS.content.primary}>{title}</TitleSmall>\n\t\t\t<BodyCaption color={COLORS.content.secondary}>{caption}</BodyCaption>\n\t\t</RefreshSegmentCopy>\n\t\t<Switch\n\t\t\tvalue={canRefresh && value}\n\t\t\tdisabled={!canRefresh}\n\t\t\t// Switch's contract is async; this toggle is synchronous, so adapt rather\n\t\t\t// than push the Promise into every caller.\n\t\t\tonValueChange={async (next: boolean) => onChange(next)}\n\t\t\tdata-test={dataTest}\n\t\t/>\n\t</RefreshSegmentRow>\n);\n"],"names":["RefreshSegmentToggle","value","onChange","canRefresh","title","caption","dataTest","RefreshSegmentRow","jsxs","RefreshSegmentCopy","jsx","TitleSmall","COLORS","BodyCaption","Switch","next"],"mappings":"wQA8BaA,EAA4D,CAAC,CACzE,MAAAC,EACA,SAAAC,EACA,WAAAC,EAAa,GACb,MAAAC,EAAQ,kCACR,QAAAC,EAAU,mDACV,YAAaC,EAAW,iCACzB,WACEC,oBAAA,CACA,SAAA,CAAAC,OAACC,EAAAA,mBAAA,CACA,SAAA,CAAAC,MAACC,EAAAA,WAAA,CAAW,MAAOC,EAAAA,OAAO,QAAQ,QAAU,SAAAR,EAAM,QACjDS,EAAAA,YAAA,CAAY,MAAOD,EAAAA,OAAO,QAAQ,UAAY,SAAAP,CAAA,CAAQ,CAAA,EACxD,EACAK,EAAAA,IAACI,EAAAA,OAAA,CACA,MAAOX,GAAcF,EACrB,SAAU,CAACE,EAGX,cAAe,MAAOY,GAAkBb,EAASa,CAAI,EACrD,YAAWT,CAAA,CAAA,CACZ,CAAA,CACD"}