@bikdotai/bik-component-library 0.0.849-beta.0 → 0.0.849-beta.1

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 (112) hide show
  1. package/dist/cjs/components/agent-builder/AgentBuilder.js +1 -1
  2. package/dist/cjs/components/agent-builder/AgentBuilder.js.map +1 -1
  3. package/dist/cjs/components/agent-builder/components/CreateSubAgentPanel.js +2 -2
  4. package/dist/cjs/components/agent-builder/components/CreateSubAgentPanel.js.map +1 -1
  5. package/dist/cjs/components/agent-builder/components/MentionEditor.js +1 -1
  6. package/dist/cjs/components/agent-builder/components/MentionEditor.js.map +1 -1
  7. package/dist/cjs/components/agent-builder/components/MentionField.js +1 -1
  8. package/dist/cjs/components/agent-builder/components/MentionField.js.map +1 -1
  9. package/dist/cjs/components/agent-builder/components/MentionPicker.js +11 -11
  10. package/dist/cjs/components/agent-builder/components/MentionPicker.js.map +1 -1
  11. package/dist/cjs/components/agent-builder/constants/tools.js +1 -1
  12. package/dist/cjs/components/agent-builder/constants/tools.js.map +1 -1
  13. package/dist/cjs/components/agent-builder/context/AgentBuilderContext.js +1 -1
  14. package/dist/cjs/components/agent-builder/context/AgentBuilderContext.js.map +1 -1
  15. package/dist/cjs/components/agent-builder/steps/Step3HowItResponds.js +1 -1
  16. package/dist/cjs/components/agent-builder/steps/Step3HowItResponds.js.map +1 -1
  17. package/dist/cjs/components/agent-builder/utils/mentionSerialization.js +2 -2
  18. package/dist/cjs/components/agent-builder/utils/mentionSerialization.js.map +1 -1
  19. package/dist/cjs/components/bik-layout/CommonStyles.js +6 -4
  20. package/dist/cjs/components/bik-layout/CommonStyles.js.map +1 -1
  21. package/dist/cjs/components/button/themes.js +3 -3
  22. package/dist/cjs/components/button/themes.js.map +1 -1
  23. package/dist/cjs/components/datePicker/DatePicker.js +1 -1
  24. package/dist/cjs/components/datePicker/DatePicker.js.map +1 -1
  25. package/dist/cjs/components/datePicker/DatePicker.styled.js +14 -20
  26. package/dist/cjs/components/datePicker/DatePicker.styled.js.map +1 -1
  27. package/dist/cjs/components/dropdown/ChipInput.js +1 -1
  28. package/dist/cjs/components/dropdown/ChipInput.js.map +1 -1
  29. package/dist/cjs/components/dropdown/Common.styled.js +5 -6
  30. package/dist/cjs/components/dropdown/Common.styled.js.map +1 -1
  31. package/dist/cjs/components/dropdown/Dropdown.js +1 -1
  32. package/dist/cjs/components/dropdown/Dropdown.js.map +1 -1
  33. package/dist/cjs/components/input/Input.js +1 -1
  34. package/dist/cjs/components/input/Input.js.map +1 -1
  35. package/dist/cjs/components/input/Input.styled.js +12 -25
  36. package/dist/cjs/components/input/Input.styled.js.map +1 -1
  37. package/dist/cjs/components/tabs/Tabs.js +1 -1
  38. package/dist/cjs/components/tabs/Tabs.js.map +1 -1
  39. package/dist/cjs/components/tabs/Tabs.styles.js +8 -22
  40. package/dist/cjs/components/tabs/Tabs.styles.js.map +1 -1
  41. package/dist/cjs/components/tag/Tag.js +1 -1
  42. package/dist/cjs/components/tag/Tag.js.map +1 -1
  43. package/dist/cjs/components/tag/Tag.styled.js +0 -4
  44. package/dist/cjs/components/tag/Tag.styled.js.map +1 -1
  45. package/dist/cjs/components/tag/model.js.map +1 -1
  46. package/dist/cjs/editor/BikEditor.styles.js +6 -0
  47. package/dist/cjs/editor/BikEditor.styles.js.map +1 -1
  48. package/dist/esm/components/agent-builder/AgentBuilder.js +71 -69
  49. package/dist/esm/components/agent-builder/AgentBuilder.js.map +1 -1
  50. package/dist/esm/components/agent-builder/AgentBuilder.model.d.ts +8 -0
  51. package/dist/esm/components/agent-builder/components/CreateSubAgentPanel.d.ts +3 -0
  52. package/dist/esm/components/agent-builder/components/CreateSubAgentPanel.js +113 -110
  53. package/dist/esm/components/agent-builder/components/CreateSubAgentPanel.js.map +1 -1
  54. package/dist/esm/components/agent-builder/components/MentionEditor.d.ts +7 -0
  55. package/dist/esm/components/agent-builder/components/MentionEditor.js +89 -74
  56. package/dist/esm/components/agent-builder/components/MentionEditor.js.map +1 -1
  57. package/dist/esm/components/agent-builder/components/MentionField.js +28 -26
  58. package/dist/esm/components/agent-builder/components/MentionField.js.map +1 -1
  59. package/dist/esm/components/agent-builder/components/MentionPicker.d.ts +14 -1
  60. package/dist/esm/components/agent-builder/components/MentionPicker.js +153 -124
  61. package/dist/esm/components/agent-builder/components/MentionPicker.js.map +1 -1
  62. package/dist/esm/components/agent-builder/constants/tools.d.ts +1 -1
  63. package/dist/esm/components/agent-builder/constants/tools.js +6 -5
  64. package/dist/esm/components/agent-builder/constants/tools.js.map +1 -1
  65. package/dist/esm/components/agent-builder/context/AgentBuilderContext.d.ts +7 -0
  66. package/dist/esm/components/agent-builder/context/AgentBuilderContext.js +99 -96
  67. package/dist/esm/components/agent-builder/context/AgentBuilderContext.js.map +1 -1
  68. package/dist/esm/components/agent-builder/steps/Step3HowItResponds.js +79 -77
  69. package/dist/esm/components/agent-builder/steps/Step3HowItResponds.js.map +1 -1
  70. package/dist/esm/components/agent-builder/utils/mentionSerialization.d.ts +13 -3
  71. package/dist/esm/components/agent-builder/utils/mentionSerialization.js +52 -40
  72. package/dist/esm/components/agent-builder/utils/mentionSerialization.js.map +1 -1
  73. package/dist/esm/components/bik-layout/CommonStyles.js +3 -1
  74. package/dist/esm/components/bik-layout/CommonStyles.js.map +1 -1
  75. package/dist/esm/components/button/themes.js +1 -1
  76. package/dist/esm/components/button/themes.js.map +1 -1
  77. package/dist/esm/components/datePicker/DatePicker.js +21 -22
  78. package/dist/esm/components/datePicker/DatePicker.js.map +1 -1
  79. package/dist/esm/components/datePicker/DatePicker.styled.d.ts +0 -10
  80. package/dist/esm/components/datePicker/DatePicker.styled.js +16 -23
  81. package/dist/esm/components/datePicker/DatePicker.styled.js.map +1 -1
  82. package/dist/esm/components/dropdown/ChipInput.d.ts +0 -1
  83. package/dist/esm/components/dropdown/ChipInput.js +30 -37
  84. package/dist/esm/components/dropdown/ChipInput.js.map +1 -1
  85. package/dist/esm/components/dropdown/Common.styled.js +6 -7
  86. package/dist/esm/components/dropdown/Common.styled.js.map +1 -1
  87. package/dist/esm/components/dropdown/Dropdown.d.ts +0 -2
  88. package/dist/esm/components/dropdown/Dropdown.js +89 -96
  89. package/dist/esm/components/dropdown/Dropdown.js.map +1 -1
  90. package/dist/esm/components/input/Input.js +101 -104
  91. package/dist/esm/components/input/Input.js.map +1 -1
  92. package/dist/esm/components/input/Input.model.d.ts +0 -2
  93. package/dist/esm/components/input/Input.styled.d.ts +0 -2
  94. package/dist/esm/components/input/Input.styled.js +25 -38
  95. package/dist/esm/components/input/Input.styled.js.map +1 -1
  96. package/dist/esm/components/tabs/Tabs.js +81 -103
  97. package/dist/esm/components/tabs/Tabs.js.map +1 -1
  98. package/dist/esm/components/tabs/Tabs.model.d.ts +0 -7
  99. package/dist/esm/components/tabs/Tabs.styles.d.ts +0 -2
  100. package/dist/esm/components/tabs/Tabs.styles.js +9 -23
  101. package/dist/esm/components/tabs/Tabs.styles.js.map +1 -1
  102. package/dist/esm/components/tag/Tag.d.ts +1 -1
  103. package/dist/esm/components/tag/Tag.js +15 -17
  104. package/dist/esm/components/tag/Tag.js.map +1 -1
  105. package/dist/esm/components/tag/Tag.styled.d.ts +0 -1
  106. package/dist/esm/components/tag/Tag.styled.js +6 -10
  107. package/dist/esm/components/tag/Tag.styled.js.map +1 -1
  108. package/dist/esm/components/tag/model.d.ts +0 -5
  109. package/dist/esm/components/tag/model.js.map +1 -1
  110. package/dist/esm/editor/BikEditor.styles.js +6 -0
  111. package/dist/esm/editor/BikEditor.styles.js.map +1 -1
  112. package/package.json +1 -1
@@ -1,5 +1,5 @@
1
1
  import { TagProps } from './model';
2
2
  export declare const Tag: {
3
- ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, hoverBackgroundColor, }: TagProps): import("react/jsx-runtime").JSX.Element;
3
+ ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, padding, height, leadingIconTooltip, trailingIconTooltip, tagColor, numberOfLines, backgroundColor, borderRadius, size, }: TagProps): import("react/jsx-runtime").JSX.Element;
4
4
  displayName: string;
5
5
  };
@@ -1,11 +1,11 @@
1
- import { jsx as l, jsxs as J } from "react/jsx-runtime";
1
+ import { jsx as l, jsxs as G } from "react/jsx-runtime";
2
2
  import m from "react";
3
3
  import { Tooltip as $ } from "../tooltips/Tooltip.js";
4
4
  import { AiBodyTiny as u, AiBodyCaption as B, BodyTiny as E, BodyCaption as T } from "../TypographyStyle.js";
5
- import { ValidTagTypeMap as K } from "./model.js";
6
- import { Tag as Q } from "./Tag.styled.js";
7
- import { getTagIconColor as S } from "./themes.js";
8
- const U = ({
5
+ import { ValidTagTypeMap as J } from "./model.js";
6
+ import { Tag as K } from "./Tag.styled.js";
7
+ import { getTagIconColor as Q } from "./themes.js";
8
+ const S = ({
9
9
  tagText: k,
10
10
  LeadingIcon: h,
11
11
  TrailingIcon: n,
@@ -30,24 +30,23 @@ const U = ({
30
30
  numberOfLines: r,
31
31
  backgroundColor: V,
32
32
  borderRadius: q,
33
- size: o = "regular",
34
- hoverBackgroundColor: D
33
+ size: o = "regular"
35
34
  }) => {
36
35
  let i = k;
37
- const F = d;
36
+ const D = d;
38
37
  let y = t;
39
- K[c][t] || (y = "neutral"), c === "circle" && typeof i == "number" && i > 99 && (i = "99+");
40
- const G = S(d, y), s = {
38
+ J[c][t] || (y = "neutral"), c === "circle" && typeof i == "number" && i > 99 && (i = "99+");
39
+ const F = Q(d, y), s = {
41
40
  height: c === "compressed" ? 12 : 16,
42
41
  width: c === "compressed" ? 12 : 16,
43
- color: G,
42
+ color: F,
44
43
  style: { display: "block" }
45
44
  };
46
45
  return /* @__PURE__ */ l(
47
- Q,
46
+ K,
48
47
  {
49
48
  cursor: j,
50
- theme: F,
49
+ theme: D,
51
50
  type: y,
52
51
  variant: c,
53
52
  version: x,
@@ -59,8 +58,7 @@ const U = ({
59
58
  backgroundColor: V,
60
59
  borderRadius: q,
61
60
  size: o,
62
- hoverBackgroundColor: D,
63
- children: /* @__PURE__ */ J("div", { className: "container", children: [
61
+ children: /* @__PURE__ */ G("div", { className: "container", children: [
64
62
  h && (g ? /* @__PURE__ */ l($, { ...g, children: /* @__PURE__ */ l(
65
63
  "button",
66
64
  {
@@ -129,8 +127,8 @@ const U = ({
129
127
  }
130
128
  );
131
129
  };
132
- U.displayName = "Tag";
130
+ S.displayName = "Tag";
133
131
  export {
134
- U as Tag
132
+ S as Tag
135
133
  };
136
134
  //# sourceMappingURL=Tag.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport {\n\tAiBodyCaption,\n\tAiBodyTiny,\n\tBodyCaption,\n\tBodyTiny,\n} from '../TypographyStyle';\nimport { TagProps, ValidTagTypeMap } from './model';\nimport * as Sc from './Tag.styled';\nimport { getTagIconColor } from './themes';\n\nexport const Tag = ({\n\ttagText,\n\tLeadingIcon,\n\tTrailingIcon,\n\tonLeadingIconClicked = undefined,\n\tleadingIconId,\n\ttrailingIconId,\n\tonTrailingIconClicked = undefined,\n\ttheme = 'light',\n\ttype = 'neutral',\n\tvariant = 'regular',\n\tversion,\n\tcursor,\n\talignIcon,\n\tnoBorder,\n\ttagHtmlText,\n\tcontentPadding,\n\tpadding,\n\theight,\n\tleadingIconTooltip,\n\ttrailingIconTooltip,\n\ttagColor,\n\tnumberOfLines,\n\tbackgroundColor,\n\tborderRadius,\n\tsize = 'regular',\n\thoverBackgroundColor,\n}: TagProps) => {\n\tlet displayTagText = tagText;\n\tconst displayTheme = theme;\n\tlet displayType = type;\n\n\tif (!ValidTagTypeMap[variant][type]) {\n\t\tdisplayType = 'neutral';\n\t}\n\n\tif (variant === 'circle') {\n\t\tif (typeof displayTagText === 'number' && displayTagText > 99) {\n\t\t\tdisplayTagText = '99+';\n\t\t}\n\t}\n\n\tconst iconColor = getTagIconColor(theme, displayType);\n\tconst iconProps = {\n\t\theight: variant === 'compressed' ? 12 : 16,\n\t\twidth: variant === 'compressed' ? 12 : 16,\n\t\tcolor: iconColor,\n\t\tstyle: { display: 'block' },\n\t};\n\n\treturn (\n\t\t<Sc.Tag\n\t\t\tcursor={cursor}\n\t\t\ttheme={displayTheme}\n\t\t\ttype={displayType}\n\t\t\tvariant={variant}\n\t\t\tversion={version}\n\t\t\talignIcon={alignIcon}\n\t\t\tnoBorder={noBorder}\n\t\t\tcontentPadding={contentPadding}\n\t\t\tpadding={padding}\n\t\t\theight={height}\n\t\t\tbackgroundColor={backgroundColor}\n\t\t\tborderRadius={borderRadius}\n\t\t\tsize={size}\n\t\t\thoverBackgroundColor={hoverBackgroundColor}\n\t\t>\n\t\t\t<div className=\"container\">\n\t\t\t\t{LeadingIcon &&\n\t\t\t\t\t(leadingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...leadingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` || 'leading-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: leadingIconId || 'leading-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` || 'leading-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: leadingIconId || 'leading-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\n\t\t\t\t{tagHtmlText &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{!tagHtmlText &&\n\t\t\t\t\tdisplayTagText !== '' &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{TrailingIcon &&\n\t\t\t\t\t(trailingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...trailingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` || 'trailing-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: trailingIconId || 'trailing-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` || 'trailing-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: trailingIconId || 'trailing-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\t\t\t</div>\n\t\t</Sc.Tag>\n\t);\n};\n\nTag.displayName = 'Tag';\n"],"names":["Tag","tagText","LeadingIcon","TrailingIcon","onLeadingIconClicked","leadingIconId","trailingIconId","onTrailingIconClicked","theme","type","variant","version","cursor","alignIcon","noBorder","tagHtmlText","contentPadding","padding","height","leadingIconTooltip","trailingIconTooltip","tagColor","numberOfLines","backgroundColor","borderRadius","size","hoverBackgroundColor","displayTagText","displayTheme","displayType","ValidTagTypeMap","iconColor","getTagIconColor","iconProps","jsx","Sc.Tag","jsxs","Tooltip","React","AiBodyTiny","AiBodyCaption","BodyTiny","BodyCaption"],"mappings":"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"}
1
+ {"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport {\n\tAiBodyCaption,\n\tAiBodyTiny,\n\tBodyCaption,\n\tBodyTiny,\n} from '../TypographyStyle';\nimport { TagProps, ValidTagTypeMap } from './model';\nimport * as Sc from './Tag.styled';\nimport { getTagIconColor } from './themes';\n\nexport const Tag = ({\n\ttagText,\n\tLeadingIcon,\n\tTrailingIcon,\n\tonLeadingIconClicked = undefined,\n\tleadingIconId,\n\ttrailingIconId,\n\tonTrailingIconClicked = undefined,\n\ttheme = 'light',\n\ttype = 'neutral',\n\tvariant = 'regular',\n\tversion,\n\tcursor,\n\talignIcon,\n\tnoBorder,\n\ttagHtmlText,\n\tcontentPadding,\n\tpadding,\n\theight,\n\tleadingIconTooltip,\n\ttrailingIconTooltip,\n\ttagColor,\n\tnumberOfLines,\n\tbackgroundColor,\n\tborderRadius,\n\tsize = 'regular',\n}: TagProps) => {\n\tlet displayTagText = tagText;\n\tconst displayTheme = theme;\n\tlet displayType = type;\n\n\tif (!ValidTagTypeMap[variant][type]) {\n\t\tdisplayType = 'neutral';\n\t}\n\n\tif (variant === 'circle') {\n\t\tif (typeof displayTagText === 'number' && displayTagText > 99) {\n\t\t\tdisplayTagText = '99+';\n\t\t}\n\t}\n\n\tconst iconColor = getTagIconColor(theme, displayType);\n\tconst iconProps = {\n\t\theight: variant === 'compressed' ? 12 : 16,\n\t\twidth: variant === 'compressed' ? 12 : 16,\n\t\tcolor: iconColor,\n\t\tstyle: { display: 'block' },\n\t};\n\n\treturn (\n\t\t<Sc.Tag\n\t\t\tcursor={cursor}\n\t\t\ttheme={displayTheme}\n\t\t\ttype={displayType}\n\t\t\tvariant={variant}\n\t\t\tversion={version}\n\t\t\talignIcon={alignIcon}\n\t\t\tnoBorder={noBorder}\n\t\t\tcontentPadding={contentPadding}\n\t\t\tpadding={padding}\n\t\t\theight={height}\n\t\t\tbackgroundColor={backgroundColor}\n\t\t\tborderRadius={borderRadius}\n\t\t\tsize={size}\n\t\t>\n\t\t\t<div className=\"container\">\n\t\t\t\t{LeadingIcon &&\n\t\t\t\t\t(leadingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...leadingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` || 'leading-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: leadingIconId || 'leading-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` || 'leading-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: leadingIconId || 'leading-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\n\t\t\t\t{tagHtmlText &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{!tagHtmlText &&\n\t\t\t\t\tdisplayTagText !== '' &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{TrailingIcon &&\n\t\t\t\t\t(trailingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...trailingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` || 'trailing-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: trailingIconId || 'trailing-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` || 'trailing-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: trailingIconId || 'trailing-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\t\t\t</div>\n\t\t</Sc.Tag>\n\t);\n};\n\nTag.displayName = 'Tag';\n"],"names":["Tag","tagText","LeadingIcon","TrailingIcon","onLeadingIconClicked","leadingIconId","trailingIconId","onTrailingIconClicked","theme","type","variant","version","cursor","alignIcon","noBorder","tagHtmlText","contentPadding","padding","height","leadingIconTooltip","trailingIconTooltip","tagColor","numberOfLines","backgroundColor","borderRadius","size","displayTagText","displayTheme","displayType","ValidTagTypeMap","iconColor","getTagIconColor","iconProps","jsx","Sc.Tag","jsxs","Tooltip","React","AiBodyTiny","AiBodyCaption","BodyTiny","BodyCaption"],"mappings":"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"}
@@ -13,5 +13,4 @@ export declare const Tag: import('styled-components').StyledComponent<"div", any
13
13
  backgroundColor?: string | undefined;
14
14
  borderRadius?: string | number | undefined;
15
15
  size?: "small" | "regular" | undefined;
16
- hoverBackgroundColor?: string | undefined;
17
16
  }, never>;
@@ -1,6 +1,6 @@
1
1
  import i from "styled-components";
2
- import { getPadding as a, getBackgroundColor as d, generateBorder as n, getTextColor as t } from "./themes.js";
3
- const o = i.div`
2
+ import { getPadding as a, getBackgroundColor as t, generateBorder as d, getTextColor as n } from "./themes.js";
3
+ const r = i.div`
4
4
  cursor: ${(e) => e.cursor ?? "default"};
5
5
  ${(e) => e.size !== "small" && (e.variant === "regular" ? `display: block;
6
6
  min-height: 26px;
@@ -11,17 +11,17 @@ const o = i.div`
11
11
  gap: 6px;
12
12
  ${(e) => e.height ? `height: ${e.height}px; box-sizing: border-box;` : e.size === "small" ? "height: 16px; box-sizing: border-box;" : ""}
13
13
  padding: ${(e) => e.padding ? e.padding : e.size === "small" ? "2px 6px" : e.contentPadding ? `${e.contentPadding}px` : a(e.variant)};
14
- background: ${(e) => e.backgroundColor ?? d(e.theme, e.type)};
14
+ background: ${(e) => e.backgroundColor ?? t(e.theme, e.type)};
15
15
 
16
16
  border-radius: ${(e) => e.borderRadius !== void 0 ? typeof e.borderRadius == "number" ? `${e.borderRadius}px` : e.borderRadius : e.variant === "regular" ? "4px" : "12px"};
17
17
 
18
- ${(e) => !e.noBorder && e.theme === "light" && `border: ${e.version === "2.0" ? 0.5 : 1}px solid ${n(
18
+ ${(e) => !e.noBorder && e.theme === "light" && `border: ${e.version === "2.0" ? 0.5 : 1}px solid ${d(
19
19
  e.type,
20
20
  e.theme
21
21
  )};`}
22
22
 
23
23
  .text {
24
- color: ${(e) => t(e.theme, e.type)};
24
+ color: ${(e) => n(e.theme, e.type)};
25
25
  }
26
26
 
27
27
  .icon-trailing {
@@ -33,13 +33,9 @@ const o = i.div`
33
33
  all: unset;
34
34
  display: flex;
35
35
  }
36
-
37
- ${(e) => e.hoverBackgroundColor && `&:hover {
38
- background: ${e.hoverBackgroundColor};
39
- }`}
40
36
  }
41
37
  `;
42
38
  export {
43
- o as Tag
39
+ r as Tag
44
40
  };
45
41
  //# sourceMappingURL=Tag.styled.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.styled.js","sources":["../../../../src/components/tag/Tag.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { TagTheme, TagType, TagVariant } from './model';\nimport {\n\tgenerateBorder,\n\tgetBackgroundColor,\n\tgetPadding,\n\tgetTextColor,\n} from './themes';\n\nexport const Tag = styled.div<{\n\ttheme: TagTheme;\n\ttype: TagType;\n\tvariant: TagVariant;\n\tversion?: '1.0' | '2.0' | '3.0';\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\tcontentPadding?: number;\n\tpadding?: string;\n\theight?: number;\n\tbackgroundColor?: string;\n\tborderRadius?: string | number;\n\tsize?: 'regular' | 'small';\n\thoverBackgroundColor?: string;\n}>`\n\tcursor: ${(props) => props.cursor ?? 'default'};\n\t${(props) =>\n\t\tprops.size !== 'small' &&\n\t\t(props.variant === 'regular'\n\t\t\t? `display: block;\n\t\t min-height: 26px;\n\t\t`\n\t\t\t: `min-height: 20px;`)}\n\t.container {\n\t\tdisplay: flex;\n\t\talign-items: ${(props) => (props.alignIcon ? props.alignIcon : 'center')};\n\t\tgap: 6px;\n\t\t${(props) =>\n\t\t\tprops.height\n\t\t\t\t? `height: ${props.height}px; box-sizing: border-box;`\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? 'height: 16px; box-sizing: border-box;'\n\t\t\t\t: ''}\n\t\tpadding: ${(props) =>\n\t\t\tprops.padding\n\t\t\t\t? props.padding\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? '2px 6px'\n\t\t\t\t: props.contentPadding\n\t\t\t\t? `${props.contentPadding}px`\n\t\t\t\t: getPadding(props.variant)};\n\t\tbackground: ${(props) =>\n\t\t\tprops.backgroundColor ?? getBackgroundColor(props.theme, props.type)};\n\n\t\tborder-radius: ${(props) =>\n\t\t\tprops.borderRadius !== undefined\n\t\t\t\t? typeof props.borderRadius === 'number'\n\t\t\t\t\t? `${props.borderRadius}px`\n\t\t\t\t\t: props.borderRadius\n\t\t\t\t: props.variant === 'regular'\n\t\t\t\t? '4px'\n\t\t\t\t: '12px'};\n\n\t\t${(props) =>\n\t\t\t!props.noBorder &&\n\t\t\tprops.theme === 'light' &&\n\t\t\t`border: ${props.version === '2.0' ? 0.5 : 1}px solid ${generateBorder(\n\t\t\t\tprops.type,\n\t\t\t\tprops.theme,\n\t\t\t)};`}\n\n\t\t.text {\n\t\t\tcolor: ${(props) => getTextColor(props.theme, props.type)};\n\t\t}\n\n\t\t.icon-trailing {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t.icon-leading {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t${(props) =>\n\t\t\tprops.hoverBackgroundColor &&\n\t\t\t`&:hover {\n\t\t\t\tbackground: ${props.hoverBackgroundColor};\n\t\t\t}`}\n\t}\n`;\n"],"names":["Tag","styled","props","getPadding","getBackgroundColor","generateBorder","getTextColor"],"mappings":";;AASO,MAAMA,IAAMC,EAAO;AAAA,WAgBf,CAACC,MAAUA,EAAM,UAAU,SAAS;AAAA,GAC5C,CAACA,MACFA,EAAM,SAAS,YACdA,EAAM,YAAY,YAChB;AAAA;AAAA,MAGA,oBAAoB;AAAA;AAAA;AAAA,iBAGR,CAACA,MAAWA,EAAM,YAAYA,EAAM,YAAY,QAAS;AAAA;AAAA,IAEtE,CAACA,MACFA,EAAM,SACH,WAAWA,EAAM,MAAM,gCACvBA,EAAM,SAAS,UACf,0CACA,EAAE;AAAA,aACK,CAACA,MACXA,EAAM,UACHA,EAAM,UACNA,EAAM,SAAS,UACf,YACAA,EAAM,iBACN,GAAGA,EAAM,cAAc,OACvBC,EAAWD,EAAM,OAAO,CAAC;AAAA,gBACf,CAACA,MACdA,EAAM,mBAAmBE,EAAmBF,EAAM,OAAOA,EAAM,IAAI,CAAC;AAAA;AAAA,mBAEpD,CAACA,MACjBA,EAAM,iBAAiB,SACpB,OAAOA,EAAM,gBAAiB,WAC7B,GAAGA,EAAM,YAAY,OACrBA,EAAM,eACPA,EAAM,YAAY,YAClB,QACA,MAAM;AAAA;AAAA,IAER,CAACA,MACF,CAACA,EAAM,YACPA,EAAM,UAAU,WAChB,WAAWA,EAAM,YAAY,QAAQ,MAAM,CAAC,YAAYG;AAAA,EACvDH,EAAM;AAAA,EACNA,EAAM;AACP,CAAC,GAAG;AAAA;AAAA;AAAA,YAGK,CAACA,MAAUI,EAAaJ,EAAM,OAAOA,EAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaxD,CAACA,MACFA,EAAM,wBACN;AAAA,kBACeA,EAAM,oBAAoB;AAAA,KACvC;AAAA;AAAA;"}
1
+ {"version":3,"file":"Tag.styled.js","sources":["../../../../src/components/tag/Tag.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { TagTheme, TagType, TagVariant } from './model';\nimport {\n\tgenerateBorder,\n\tgetBackgroundColor,\n\tgetPadding,\n\tgetTextColor,\n} from './themes';\n\nexport const Tag = styled.div<{\n\ttheme: TagTheme;\n\ttype: TagType;\n\tvariant: TagVariant;\n\tversion?: '1.0' | '2.0' | '3.0';\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\tcontentPadding?: number;\n\tpadding?: string;\n\theight?: number;\n\tbackgroundColor?: string;\n\tborderRadius?: string | number;\n\tsize?: 'regular' | 'small';\n}>`\n\tcursor: ${(props) => props.cursor ?? 'default'};\n\t${(props) =>\n\t\tprops.size !== 'small' &&\n\t\t(props.variant === 'regular'\n\t\t\t? `display: block;\n\t\t min-height: 26px;\n\t\t`\n\t\t\t: `min-height: 20px;`)}\n\t.container {\n\t\tdisplay: flex;\n\t\talign-items: ${(props) => (props.alignIcon ? props.alignIcon : 'center')};\n\t\tgap: 6px;\n\t\t${(props) =>\n\t\t\tprops.height\n\t\t\t\t? `height: ${props.height}px; box-sizing: border-box;`\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? 'height: 16px; box-sizing: border-box;'\n\t\t\t\t: ''}\n\t\tpadding: ${(props) =>\n\t\t\tprops.padding\n\t\t\t\t? props.padding\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? '2px 6px'\n\t\t\t\t: props.contentPadding\n\t\t\t\t? `${props.contentPadding}px`\n\t\t\t\t: getPadding(props.variant)};\n\t\tbackground: ${(props) =>\n\t\t\tprops.backgroundColor ?? getBackgroundColor(props.theme, props.type)};\n\n\t\tborder-radius: ${(props) =>\n\t\t\tprops.borderRadius !== undefined\n\t\t\t\t? typeof props.borderRadius === 'number'\n\t\t\t\t\t? `${props.borderRadius}px`\n\t\t\t\t\t: props.borderRadius\n\t\t\t\t: props.variant === 'regular'\n\t\t\t\t? '4px'\n\t\t\t\t: '12px'};\n\n\t\t${(props) =>\n\t\t\t!props.noBorder &&\n\t\t\tprops.theme === 'light' &&\n\t\t\t`border: ${props.version === '2.0' ? 0.5 : 1}px solid ${generateBorder(\n\t\t\t\tprops.type,\n\t\t\t\tprops.theme,\n\t\t\t)};`}\n\n\t\t.text {\n\t\t\tcolor: ${(props) => getTextColor(props.theme, props.type)};\n\t\t}\n\n\t\t.icon-trailing {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t.icon-leading {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n`;\n"],"names":["Tag","styled","props","getPadding","getBackgroundColor","generateBorder","getTextColor"],"mappings":";;AASO,MAAMA,IAAMC,EAAO;AAAA,WAef,CAACC,MAAUA,EAAM,UAAU,SAAS;AAAA,GAC5C,CAACA,MACFA,EAAM,SAAS,YACdA,EAAM,YAAY,YAChB;AAAA;AAAA,MAGA,oBAAoB;AAAA;AAAA;AAAA,iBAGR,CAACA,MAAWA,EAAM,YAAYA,EAAM,YAAY,QAAS;AAAA;AAAA,IAEtE,CAACA,MACFA,EAAM,SACH,WAAWA,EAAM,MAAM,gCACvBA,EAAM,SAAS,UACf,0CACA,EAAE;AAAA,aACK,CAACA,MACXA,EAAM,UACHA,EAAM,UACNA,EAAM,SAAS,UACf,YACAA,EAAM,iBACN,GAAGA,EAAM,cAAc,OACvBC,EAAWD,EAAM,OAAO,CAAC;AAAA,gBACf,CAACA,MACdA,EAAM,mBAAmBE,EAAmBF,EAAM,OAAOA,EAAM,IAAI,CAAC;AAAA;AAAA,mBAEpD,CAACA,MACjBA,EAAM,iBAAiB,SACpB,OAAOA,EAAM,gBAAiB,WAC7B,GAAGA,EAAM,YAAY,OACrBA,EAAM,eACPA,EAAM,YAAY,YAClB,QACA,MAAM;AAAA;AAAA,IAER,CAACA,MACF,CAACA,EAAM,YACPA,EAAM,UAAU,WAChB,WAAWA,EAAM,YAAY,QAAQ,MAAM,CAAC,YAAYG;AAAA,EACvDH,EAAM;AAAA,EACNA,EAAM;AACP,CAAC,GAAG;AAAA;AAAA;AAAA,YAGK,CAACA,MAAUI,EAAaJ,EAAM,OAAOA,EAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
@@ -118,9 +118,4 @@ export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
118
118
  * @default 'regular'
119
119
  */
120
120
  size?: 'regular' | 'small';
121
- /**
122
- * Background color on hover.
123
- * @default undefined (no hover effect)
124
- */
125
- hoverBackgroundColor?: string;
126
121
  }
@@ -1 +1 @@
1
- {"version":3,"file":"model.js","sources":["../../../../src/components/tag/model.ts"],"sourcesContent":["import React from 'react';\nimport { MouseEventHandler } from 'react';\nimport { TooltipProps } from '../tooltips/Tooltip';\n\nexport type TagTheme = 'light' | 'dark';\n\nexport type TagVariant = 'regular' | 'circle' | 'compressed';\n\nexport type TagType =\n\t| 'negative'\n\t| 'warning'\n\t| 'positive'\n\t| 'neutral'\n\t| 'white'\n\t| 'purple'\n\t| 'blue'\n\t| 'grey'\n\t| 'ai';\n\nexport const ValidTagTypeMap = {\n\tregular: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n\tcircle: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\tblue: true,\n\t\tgrey: true,\n\t\tai: true,\n\t},\n\tcompressed: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n};\n\nexport interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Set the theme of the Tag\n\t * @default default light\n\t */\n\ttheme?: TagTheme;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default neutral\n\t */\n\ttype?: TagType;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default regular\n\t */\n\tvariant?: TagVariant;\n\n\t/**\n\t * The icon component that is the right of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tTrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon id,\n\t * @default trailing-icon\n\t */\n\ttrailingIconId?: string;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * Tooltip props for the trailing icon\n\t * @default undefined\n\t */\n\ttrailingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\t/**\n\t * The icon component that is to the left of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tLeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * The left icon id,\n\t * @default leading-icon\n\t */\n\tleadingIconId?: string;\n\t/**\n\t * Tooltip props for the leading icon\n\t * @default undefined\n\t */\n\tleadingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\ttagText: string | number;\n\tversion?: '1.0' | '2.0' | '3.0';\n\t/** Custom CSS padding string, e.g. '4px 8px' */\n\tpadding?: string;\n\t/** Custom height in px */\n\theight?: number;\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\ttagHtmlText?: JSX.Element;\n\tcontentPadding?: number;\n\ttagColor?: string;\n\tnumberOfLines?: number;\n\t/**\n\t * Override the computed background color of the tag container.\n\t * @default undefined (uses theme/type color)\n\t */\n\tbackgroundColor?: string;\n\t/**\n\t * Override the border-radius of the tag container.\n\t * @default undefined (uses variant-based radius: 4px for regular, 12px otherwise)\n\t */\n\tborderRadius?: string | number;\n\t/**\n\t * Controls the size of the tag. 'small' sets height to 16px and uses tiny font.\n\t * @default 'regular'\n\t */\n\tsize?: 'regular' | 'small';\n\t/**\n\t * Background color on hover.\n\t * @default undefined (no hover effect)\n\t */\n\thoverBackgroundColor?: string;\n}\n"],"names":["ValidTagTypeMap"],"mappings":"AAmBO,MAAMA,IAAkB;AAAA,EAC9B,SAAS;AAAA,IACR,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,IAAI;AAAA,EAAA;AAAA,EAEL,QAAQ;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,MAAM;AAAA,IACN,MAAM;AAAA,IACN,IAAI;AAAA,EAAA;AAAA,EAEL,YAAY;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,IAAI;AAAA,EAAA;AAEN;"}
1
+ {"version":3,"file":"model.js","sources":["../../../../src/components/tag/model.ts"],"sourcesContent":["import React from 'react';\nimport { MouseEventHandler } from 'react';\nimport { TooltipProps } from '../tooltips/Tooltip';\n\nexport type TagTheme = 'light' | 'dark';\n\nexport type TagVariant = 'regular' | 'circle' | 'compressed';\n\nexport type TagType =\n\t| 'negative'\n\t| 'warning'\n\t| 'positive'\n\t| 'neutral'\n\t| 'white'\n\t| 'purple'\n\t| 'blue'\n\t| 'grey'\n\t| 'ai';\n\nexport const ValidTagTypeMap = {\n\tregular: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n\tcircle: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\tblue: true,\n\t\tgrey: true,\n\t\tai: true,\n\t},\n\tcompressed: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n};\n\nexport interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Set the theme of the Tag\n\t * @default default light\n\t */\n\ttheme?: TagTheme;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default neutral\n\t */\n\ttype?: TagType;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default regular\n\t */\n\tvariant?: TagVariant;\n\n\t/**\n\t * The icon component that is the right of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tTrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon id,\n\t * @default trailing-icon\n\t */\n\ttrailingIconId?: string;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * Tooltip props for the trailing icon\n\t * @default undefined\n\t */\n\ttrailingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\t/**\n\t * The icon component that is to the left of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tLeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * The left icon id,\n\t * @default leading-icon\n\t */\n\tleadingIconId?: string;\n\t/**\n\t * Tooltip props for the leading icon\n\t * @default undefined\n\t */\n\tleadingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\ttagText: string | number;\n\tversion?: '1.0' | '2.0' | '3.0';\n\t/** Custom CSS padding string, e.g. '4px 8px' */\n\tpadding?: string;\n\t/** Custom height in px */\n\theight?: number;\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\ttagHtmlText?: JSX.Element;\n\tcontentPadding?: number;\n\ttagColor?: string;\n\tnumberOfLines?: number;\n\t/**\n\t * Override the computed background color of the tag container.\n\t * @default undefined (uses theme/type color)\n\t */\n\tbackgroundColor?: string;\n\t/**\n\t * Override the border-radius of the tag container.\n\t * @default undefined (uses variant-based radius: 4px for regular, 12px otherwise)\n\t */\n\tborderRadius?: string | number;\n\t/**\n\t * Controls the size of the tag. 'small' sets height to 16px and uses tiny font.\n\t * @default 'regular'\n\t */\n\tsize?: 'regular' | 'small';\n}\n"],"names":["ValidTagTypeMap"],"mappings":"AAmBO,MAAMA,IAAkB;AAAA,EAC9B,SAAS;AAAA,IACR,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,IAAI;AAAA,EAAA;AAAA,EAEL,QAAQ;AAAA,IACP,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,MAAM;AAAA,IACN,MAAM;AAAA,IACN,IAAI;AAAA,EAAA;AAAA,EAEL,YAAY;AAAA,IACX,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,IAAI;AAAA,EAAA;AAEN;"}
@@ -91,6 +91,12 @@ const s = t.div`
91
91
  border-radius: 4px;
92
92
  font-weight: 500;
93
93
  }
94
+ .bik-mention[data-kind='variable'] {
95
+ color: #067647;
96
+ background: #ecfdf3;
97
+ border-radius: 4px;
98
+ font-weight: 500;
99
+ }
94
100
  .bik-variable {
95
101
  }
96
102
 
@@ -1 +1 @@
1
- {"version":3,"file":"BikEditor.styles.js","sources":["../../../src/editor/BikEditor.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BASE_COLORS, COLORS } from '../constants/Theme';\n\nexport const BikEditorShell = styled.div<{\n\tminHeight?: string;\n\tmaxHeight?: string;\n\ttightParagraphs?: boolean;\n\tjsonMode?: boolean;\n}>`\n\tposition: relative;\n\twidth: 100%;\n\n\t.ProseMirror {\n\t\tmin-height: ${({ minHeight }) => minHeight ?? '60px'};\n\t\tmax-height: ${({ maxHeight }) => maxHeight ?? 'none'};\n\t\toverflow-y: auto;\n\t\toutline: none;\n\t\tfont-size: 14px;\n\t\tline-height: 1.5;\n\t\tword-break: break-word;\n\n\t\t/* Paragraph spacing.\n\t\t Email/signature (rich): paragraphs carry the browser-default 1em block\n\t\t margin — the SAME spacing the sent HTML gets (we emit plain <p>, which\n\t\t renders against the default <p> margin in Gmail and our email viewer),\n\t\t so editor view == emitted HTML == Gmail. A single Enter = a new\n\t\t paragraph with a visible gap, like pasted Gmail/ChatGPT/Docs content.\n\t\t Other channels (WhatsApp/IG/FB/comments) are plain-text messaging, with\n\t\t no paragraph-gap concept — paragraphs are tight (margin:0) regardless of\n\t\t typed vs pasted. (A margin:0 attr still overrides to tight either way.) */\n\t\tp {\n\t\t\tmargin: ${({ tightParagraphs }) => (tightParagraphs ? '0' : '1em 0')};\n\t\t\tpadding: 0;\n\t\t}\n\n\t\tul,\n\t\tol {\n\t\t\tmargin: 0;\n\t\t\tpadding-left: 1.5em;\n\t\t}\n\n\t\tli + li {\n\t\t\tmargin-top: 2px;\n\t\t}\n\n\t\t/* The empty placeholder paragraph shouldn't inherit the rich-mode 1em\n\t\t block margin (email/SMTP/signature) — otherwise the placeholder text\n\t\t is pushed down. Real (non-empty) paragraphs keep their spacing. */\n\t\tp.is-editor-empty:first-child {\n\t\t\tmargin: 0;\n\t\t}\n\n\t\tp.is-editor-empty:first-child::before {\n\t\t\tcontent: attr(data-placeholder);\n\t\t\tfloat: left;\n\t\t\tcolor: #adb5bd;\n\t\t\tpointer-events: none;\n\t\t\theight: 0;\n\t\t}\n\n\t\t/* hidden in-flow copy of the placeholder so a multi-line\n\t\t placeholder grows the editor instead of showing a scrollbar (the\n\t\t zero-height float above adds no height). -1lh cancels the caret line. */\n\t\tp.is-editor-empty:first-child::after {\n\t\t\tcontent: attr(data-placeholder);\n\t\t\tdisplay: block;\n\t\t\tvisibility: hidden;\n\t\t\tpointer-events: none;\n\t\t\tmargin-top: -1.5em; /* one line at the editor's line-height: 1.5 */\n\t\t\tmargin-top: -1lh;\n\t\t}\n\n\t\t/* Characters pasted beyond the soft character limit — rendered grey so the\n\t\t overflow is visible but clearly marked (see CharacterLimitExtension). */\n\t\t.bik-editor-overflow {\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\t}\n\n\t.bik-mention {\n\t\tcolor: ${COLORS.content.brand};\n\t\tpadding: 1px 4px;\n\t}\n\t.bik-mention--team {\n\t\tcolor: ${COLORS.content.brand};\n\t}\n\t/* Typed mention chips (agent-builder): distinct colour per reference kind. */\n\t.bik-mention[data-kind='tool'] {\n\t\tcolor: #1570ef;\n\t\tbackground: #eff8ff;\n\t\tborder-radius: 4px;\n\t\tfont-weight: 500;\n\t}\n\t.bik-mention[data-kind='subagent'] {\n\t\tcolor: #6938ef;\n\t\tbackground: #f4f3ff;\n\t\tborder-radius: 4px;\n\t\tfont-weight: 500;\n\t}\n\t.bik-variable {\n\t}\n\n\t/* JSON body mode — scoped so normal-mode code blocks keep their default look\n\t (no reserved gutter, no monospace override). The frame is split: the header\n\t bar owns the top rounded border, the code area (BikJsonBody) owns its own\n\t full border so it can recolour on focus / error without touching the\n\t header. */\n\t${({ jsonMode }) =>\n\t\tjsonMode &&\n\t\tcss`\n\t\t\t/* The code block IS the editor surface, sitting below the header bar.\n\t\t\t White fills the scroller down to the min-height (no blank strip below\n\t\t\t short JSON); the header owns the grey. */\n\t\t\t.ProseMirror {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: ${COLORS.surface.standard};\n\t\t\t}\n\t\t\t/* ProseMirror appends an empty trailing paragraph AFTER the code block\n\t\t\t (a <p><br class=\"ProseMirror-trailingBreak\"></p> caret-escape node).\n\t\t\t In JSON mode there's nothing to escape to — it only renders as a blank\n\t\t\t line under the JSON, which is the \"extra space at the bottom\". Hide it. */\n\t\t\t.ProseMirror pre + p {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t\t.ProseMirror pre {\n\t\t\t\tposition: relative;\n\t\t\t\tmargin: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\t/* Left padding reserves the line-number gutter; each .bik-json-lineno\n\t\t\t\t widget hangs back into it with a matching negative margin. Wide\n\t\t\t\t enough for a 3-digit line number (up to 999). */\n\t\t\t\tpadding: 12px 12px 12px 4.2em;\n\t\t\t\tfont-family: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo,\n\t\t\t\t\tConsolas, 'Liberation Mono', monospace;\n\t\t\t\tfont-size: 13px;\n\t\t\t\tline-height: 1.6;\n\t\t\t\twhite-space: pre;\n\t\t\t\toverflow-x: auto;\n\t\t\t\ttab-size: 2;\n\t\t\t}\n\t\t\t.ProseMirror pre code {\n\t\t\t\tbackground: none;\n\t\t\t\tpadding: 0;\n\t\t\t\tfont-size: inherit;\n\t\t\t\tcolor: #1f2328;\n\t\t\t}\n\t\t\t/* Line-number gutter — a contenteditable=false sibling of <code> rendered\n\t\t\t by the code-block node view (JsonCodeBlockView), absolutely positioned\n\t\t\t into the reserved left padding. It scrolls with <pre> as one block, so\n\t\t\t numbers stay aligned with their lines. Stacked right borders form one\n\t\t\t continuous divider. */\n\t\t\t.bik-json-gutter {\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: 0;\n\t\t\t\ttop: 12px; /* == the code block's padding-top */\n\t\t\t\twidth: 3.5em; /* within the 4.2em reserved left padding */\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tuser-select: none;\n\t\t\t\t-webkit-user-select: none;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t.bik-json-lineno {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\theight: 1.6em; /* == code line-height (13px × 1.6) so rows align */\n\t\t\t\tline-height: 1.6;\n\t\t\t\tpadding-right: 0.7em;\n\t\t\t\ttext-align: right;\n\t\t\t\t/* Never let a 3-digit number (e.g. 210) break across two lines. */\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t\t\tborder-right: 1px solid ${COLORS.stroke.primary};\n\t\t\t}\n\t\t\t.bik-json-key {\n\t\t\t\tcolor: #0550ae;\n\t\t\t}\n\t\t\t.bik-json-string {\n\t\t\t\tcolor: #0a7d33;\n\t\t\t}\n\t\t\t.bik-json-number {\n\t\t\t\tcolor: #b5590a;\n\t\t\t}\n\t\t\t.bik-json-boolean,\n\t\t\t.bik-json-null {\n\t\t\t\tcolor: #8250df;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\t\t\t.bik-json-punct {\n\t\t\t\tcolor: #57606a;\n\t\t\t}\n\t\t`}\n\n\ta,\n\t.bik-link {\n\t\tcolor: #4f46e5;\n\t\ttext-decoration: underline;\n\t\ttext-decoration-color: #a5b4fc;\n\t\ttext-underline-offset: 2px;\n\t\tcursor: pointer;\n\t\t&:hover {\n\t\t\tcolor: #3730a3;\n\t\t\ttext-decoration-color: #6366f1;\n\t\t}\n\t}\n`;\n\n/**\n * jsonMode header bar: a \"JSON\" label on the left and the Beautify / Copy actions\n * on the right. Owns the frame's top rounded border (no bottom edge — the code\n * area below draws its own top border, so the seam stays a single line even when\n * it recolours on focus/error). Grey fill sets it apart from the white code\n * surface below.\n */\nexport const BikJsonHeader = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 8px;\n\tpadding: 8px 12px;\n\tbackground: ${COLORS.surface.subdued};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-bottom: none;\n\tborder-radius: 4px 4px 0 0;\n\n\t.bik-json-header-label {\n\t\tfont-family: inherit;\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 400;\n\t\tcolor: ${COLORS.content.secondary};\n\t\tuser-select: none;\n\t}\n\n\t.bik-json-header-actions {\n\t\tdisplay: flex;\n\t\tgap: 8px;\n\t}\n\n\tbutton {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\theight: 28px;\n\t\tpadding: 0 8px;\n\t\tfont-family: inherit;\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tcolor: ${COLORS.content.secondary};\n\t\tbackground: ${COLORS.surface.standard};\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t\tborder-radius: 4px;\n\t\tcursor: pointer;\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t}\n\t\t&:disabled {\n\t\t\topacity: 0.5;\n\t\t\tcursor: not-allowed;\n\t\t}\n\t}\n`;\n\n/**\n * jsonMode code surface below the header. Owns the recolourable border: brand on\n * focus, negative when the JSON is invalid (error wins over focus).\n */\nexport const BikJsonBody = styled.div<{ $error?: boolean }>`\n\tposition: relative;\n\toverflow: hidden;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid\n\t\t${({ $error }) =>\n\t\t\t$error ? COLORS.content.negative : COLORS.stroke.primary};\n\tborder-radius: 0 0 4px 4px;\n\n\t&:focus-within {\n\t\tborder-color: ${({ $error }) =>\n\t\t\t$error ? COLORS.content.negative : BASE_COLORS.brand['800']};\n\t}\n`;\n\n/**\n * jsonMode empty state: a centered code glyph + placeholder line over the code\n * area. Pointer-events off so clicks focus the editor.\n */\nexport const BikJsonEmptyState = styled.div`\n\tposition: absolute;\n\tinset: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 8px;\n\tcolor: ${COLORS.content.placeholder};\n\tfont-size: 14px;\n\tline-height: 20px;\n\tpointer-events: none;\n\tuser-select: none;\n`;\n\n/**\n * JSON parse-error alert rendered by BikEditor in jsonMode: a standalone rounded\n * card below the code area.\n */\nexport const BikJsonError = styled.div`\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 8px;\n\tmargin-top: 8px;\n\tpadding: 12px;\n\tfont-size: 12px;\n\tline-height: 16px;\n\tcolor: ${COLORS.content.negative};\n\tbackground: ${COLORS.background.negative.light};\n\tborder: 1px solid ${COLORS.stroke.negative.lightAlt};\n\tborder-radius: 4px;\n\tword-break: break-word;\n\n\tsvg {\n\t\tflex-shrink: 0;\n\t}\n\n\tstrong {\n\t\tfont-weight: 600;\n\t}\n`;\n"],"names":["BikEditorShell","styled","minHeight","maxHeight","tightParagraphs","COLORS","jsonMode","css","BikJsonHeader","BikJsonBody","$error","BASE_COLORS","BikJsonEmptyState","BikJsonError"],"mappings":"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"}
1
+ {"version":3,"file":"BikEditor.styles.js","sources":["../../../src/editor/BikEditor.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BASE_COLORS, COLORS } from '../constants/Theme';\n\nexport const BikEditorShell = styled.div<{\n\tminHeight?: string;\n\tmaxHeight?: string;\n\ttightParagraphs?: boolean;\n\tjsonMode?: boolean;\n}>`\n\tposition: relative;\n\twidth: 100%;\n\n\t.ProseMirror {\n\t\tmin-height: ${({ minHeight }) => minHeight ?? '60px'};\n\t\tmax-height: ${({ maxHeight }) => maxHeight ?? 'none'};\n\t\toverflow-y: auto;\n\t\toutline: none;\n\t\tfont-size: 14px;\n\t\tline-height: 1.5;\n\t\tword-break: break-word;\n\n\t\t/* Paragraph spacing.\n\t\t Email/signature (rich): paragraphs carry the browser-default 1em block\n\t\t margin — the SAME spacing the sent HTML gets (we emit plain <p>, which\n\t\t renders against the default <p> margin in Gmail and our email viewer),\n\t\t so editor view == emitted HTML == Gmail. A single Enter = a new\n\t\t paragraph with a visible gap, like pasted Gmail/ChatGPT/Docs content.\n\t\t Other channels (WhatsApp/IG/FB/comments) are plain-text messaging, with\n\t\t no paragraph-gap concept — paragraphs are tight (margin:0) regardless of\n\t\t typed vs pasted. (A margin:0 attr still overrides to tight either way.) */\n\t\tp {\n\t\t\tmargin: ${({ tightParagraphs }) => (tightParagraphs ? '0' : '1em 0')};\n\t\t\tpadding: 0;\n\t\t}\n\n\t\tul,\n\t\tol {\n\t\t\tmargin: 0;\n\t\t\tpadding-left: 1.5em;\n\t\t}\n\n\t\tli + li {\n\t\t\tmargin-top: 2px;\n\t\t}\n\n\t\t/* The empty placeholder paragraph shouldn't inherit the rich-mode 1em\n\t\t block margin (email/SMTP/signature) — otherwise the placeholder text\n\t\t is pushed down. Real (non-empty) paragraphs keep their spacing. */\n\t\tp.is-editor-empty:first-child {\n\t\t\tmargin: 0;\n\t\t}\n\n\t\tp.is-editor-empty:first-child::before {\n\t\t\tcontent: attr(data-placeholder);\n\t\t\tfloat: left;\n\t\t\tcolor: #adb5bd;\n\t\t\tpointer-events: none;\n\t\t\theight: 0;\n\t\t}\n\n\t\t/* hidden in-flow copy of the placeholder so a multi-line\n\t\t placeholder grows the editor instead of showing a scrollbar (the\n\t\t zero-height float above adds no height). -1lh cancels the caret line. */\n\t\tp.is-editor-empty:first-child::after {\n\t\t\tcontent: attr(data-placeholder);\n\t\t\tdisplay: block;\n\t\t\tvisibility: hidden;\n\t\t\tpointer-events: none;\n\t\t\tmargin-top: -1.5em; /* one line at the editor's line-height: 1.5 */\n\t\t\tmargin-top: -1lh;\n\t\t}\n\n\t\t/* Characters pasted beyond the soft character limit — rendered grey so the\n\t\t overflow is visible but clearly marked (see CharacterLimitExtension). */\n\t\t.bik-editor-overflow {\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\t}\n\n\t.bik-mention {\n\t\tcolor: ${COLORS.content.brand};\n\t\tpadding: 1px 4px;\n\t}\n\t.bik-mention--team {\n\t\tcolor: ${COLORS.content.brand};\n\t}\n\t/* Typed mention chips (agent-builder): distinct colour per reference kind. */\n\t.bik-mention[data-kind='tool'] {\n\t\tcolor: #1570ef;\n\t\tbackground: #eff8ff;\n\t\tborder-radius: 4px;\n\t\tfont-weight: 500;\n\t}\n\t.bik-mention[data-kind='subagent'] {\n\t\tcolor: #6938ef;\n\t\tbackground: #f4f3ff;\n\t\tborder-radius: 4px;\n\t\tfont-weight: 500;\n\t}\n\t.bik-mention[data-kind='variable'] {\n\t\tcolor: #067647;\n\t\tbackground: #ecfdf3;\n\t\tborder-radius: 4px;\n\t\tfont-weight: 500;\n\t}\n\t.bik-variable {\n\t}\n\n\t/* JSON body mode — scoped so normal-mode code blocks keep their default look\n\t (no reserved gutter, no monospace override). The frame is split: the header\n\t bar owns the top rounded border, the code area (BikJsonBody) owns its own\n\t full border so it can recolour on focus / error without touching the\n\t header. */\n\t${({ jsonMode }) =>\n\t\tjsonMode &&\n\t\tcss`\n\t\t\t/* The code block IS the editor surface, sitting below the header bar.\n\t\t\t White fills the scroller down to the min-height (no blank strip below\n\t\t\t short JSON); the header owns the grey. */\n\t\t\t.ProseMirror {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: ${COLORS.surface.standard};\n\t\t\t}\n\t\t\t/* ProseMirror appends an empty trailing paragraph AFTER the code block\n\t\t\t (a <p><br class=\"ProseMirror-trailingBreak\"></p> caret-escape node).\n\t\t\t In JSON mode there's nothing to escape to — it only renders as a blank\n\t\t\t line under the JSON, which is the \"extra space at the bottom\". Hide it. */\n\t\t\t.ProseMirror pre + p {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t\t.ProseMirror pre {\n\t\t\t\tposition: relative;\n\t\t\t\tmargin: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\t/* Left padding reserves the line-number gutter; each .bik-json-lineno\n\t\t\t\t widget hangs back into it with a matching negative margin. Wide\n\t\t\t\t enough for a 3-digit line number (up to 999). */\n\t\t\t\tpadding: 12px 12px 12px 4.2em;\n\t\t\t\tfont-family: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo,\n\t\t\t\t\tConsolas, 'Liberation Mono', monospace;\n\t\t\t\tfont-size: 13px;\n\t\t\t\tline-height: 1.6;\n\t\t\t\twhite-space: pre;\n\t\t\t\toverflow-x: auto;\n\t\t\t\ttab-size: 2;\n\t\t\t}\n\t\t\t.ProseMirror pre code {\n\t\t\t\tbackground: none;\n\t\t\t\tpadding: 0;\n\t\t\t\tfont-size: inherit;\n\t\t\t\tcolor: #1f2328;\n\t\t\t}\n\t\t\t/* Line-number gutter — a contenteditable=false sibling of <code> rendered\n\t\t\t by the code-block node view (JsonCodeBlockView), absolutely positioned\n\t\t\t into the reserved left padding. It scrolls with <pre> as one block, so\n\t\t\t numbers stay aligned with their lines. Stacked right borders form one\n\t\t\t continuous divider. */\n\t\t\t.bik-json-gutter {\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: 0;\n\t\t\t\ttop: 12px; /* == the code block's padding-top */\n\t\t\t\twidth: 3.5em; /* within the 4.2em reserved left padding */\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tuser-select: none;\n\t\t\t\t-webkit-user-select: none;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t.bik-json-lineno {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\theight: 1.6em; /* == code line-height (13px × 1.6) so rows align */\n\t\t\t\tline-height: 1.6;\n\t\t\t\tpadding-right: 0.7em;\n\t\t\t\ttext-align: right;\n\t\t\t\t/* Never let a 3-digit number (e.g. 210) break across two lines. */\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t\t\tborder-right: 1px solid ${COLORS.stroke.primary};\n\t\t\t}\n\t\t\t.bik-json-key {\n\t\t\t\tcolor: #0550ae;\n\t\t\t}\n\t\t\t.bik-json-string {\n\t\t\t\tcolor: #0a7d33;\n\t\t\t}\n\t\t\t.bik-json-number {\n\t\t\t\tcolor: #b5590a;\n\t\t\t}\n\t\t\t.bik-json-boolean,\n\t\t\t.bik-json-null {\n\t\t\t\tcolor: #8250df;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\t\t\t.bik-json-punct {\n\t\t\t\tcolor: #57606a;\n\t\t\t}\n\t\t`}\n\n\ta,\n\t.bik-link {\n\t\tcolor: #4f46e5;\n\t\ttext-decoration: underline;\n\t\ttext-decoration-color: #a5b4fc;\n\t\ttext-underline-offset: 2px;\n\t\tcursor: pointer;\n\t\t&:hover {\n\t\t\tcolor: #3730a3;\n\t\t\ttext-decoration-color: #6366f1;\n\t\t}\n\t}\n`;\n\n/**\n * jsonMode header bar: a \"JSON\" label on the left and the Beautify / Copy actions\n * on the right. Owns the frame's top rounded border (no bottom edge — the code\n * area below draws its own top border, so the seam stays a single line even when\n * it recolours on focus/error). Grey fill sets it apart from the white code\n * surface below.\n */\nexport const BikJsonHeader = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 8px;\n\tpadding: 8px 12px;\n\tbackground: ${COLORS.surface.subdued};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-bottom: none;\n\tborder-radius: 4px 4px 0 0;\n\n\t.bik-json-header-label {\n\t\tfont-family: inherit;\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 400;\n\t\tcolor: ${COLORS.content.secondary};\n\t\tuser-select: none;\n\t}\n\n\t.bik-json-header-actions {\n\t\tdisplay: flex;\n\t\tgap: 8px;\n\t}\n\n\tbutton {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\theight: 28px;\n\t\tpadding: 0 8px;\n\t\tfont-family: inherit;\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tcolor: ${COLORS.content.secondary};\n\t\tbackground: ${COLORS.surface.standard};\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t\tborder-radius: 4px;\n\t\tcursor: pointer;\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t}\n\t\t&:disabled {\n\t\t\topacity: 0.5;\n\t\t\tcursor: not-allowed;\n\t\t}\n\t}\n`;\n\n/**\n * jsonMode code surface below the header. Owns the recolourable border: brand on\n * focus, negative when the JSON is invalid (error wins over focus).\n */\nexport const BikJsonBody = styled.div<{ $error?: boolean }>`\n\tposition: relative;\n\toverflow: hidden;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid\n\t\t${({ $error }) =>\n\t\t\t$error ? COLORS.content.negative : COLORS.stroke.primary};\n\tborder-radius: 0 0 4px 4px;\n\n\t&:focus-within {\n\t\tborder-color: ${({ $error }) =>\n\t\t\t$error ? COLORS.content.negative : BASE_COLORS.brand['800']};\n\t}\n`;\n\n/**\n * jsonMode empty state: a centered code glyph + placeholder line over the code\n * area. Pointer-events off so clicks focus the editor.\n */\nexport const BikJsonEmptyState = styled.div`\n\tposition: absolute;\n\tinset: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 8px;\n\tcolor: ${COLORS.content.placeholder};\n\tfont-size: 14px;\n\tline-height: 20px;\n\tpointer-events: none;\n\tuser-select: none;\n`;\n\n/**\n * JSON parse-error alert rendered by BikEditor in jsonMode: a standalone rounded\n * card below the code area.\n */\nexport const BikJsonError = styled.div`\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 8px;\n\tmargin-top: 8px;\n\tpadding: 12px;\n\tfont-size: 12px;\n\tline-height: 16px;\n\tcolor: ${COLORS.content.negative};\n\tbackground: ${COLORS.background.negative.light};\n\tborder: 1px solid ${COLORS.stroke.negative.lightAlt};\n\tborder-radius: 4px;\n\tword-break: break-word;\n\n\tsvg {\n\t\tflex-shrink: 0;\n\t}\n\n\tstrong {\n\t\tfont-weight: 600;\n\t}\n`;\n"],"names":["BikEditorShell","styled","minHeight","maxHeight","tightParagraphs","COLORS","jsonMode","css","BikJsonHeader","BikJsonBody","$error","BASE_COLORS","BikJsonEmptyState","BikJsonError"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.849-beta.0",
3
+ "version": "0.0.849-beta.1",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",