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

package/dist/esm/components/agent-builder/components/ToolInstructionsField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolInstructionsField.js","sources":["../../../../../src/components/agent-builder/components/ToolInstructionsField.tsx"],"sourcesContent":["import { WandSparkles } from '@src/icons';\nimport React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type { VariableListInterfaceV3 } from '../../variable-picker-v3/model';\nimport {\n\tAiTextAreaInput,\n\tAiTextAreaShell,\n\tFieldBlock,\n} from '../AgentBuilder.styled';\nimport { MentionEditor } from './MentionEditor';\n\ninterface ToolInstructionsFieldProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tmaxLength: number;\n\tplaceholder?: string;\n\tminHeight?: string;\n\t/** \"Improve with AI\" — resolves with rewritten text. Omit to hide the button. */\n\tonImprove?: (text: string) => Promise<string>;\n\t/**\n\t * Variable catalog. When non-empty the field upgrades from a plain textarea\n\t * to a variables-only `@` mention editor: typing `@` opens the variable\n\t * categories directly (Variables is the sole category, so the picker skips\n\t * the Tools / Sub-agent root), and picks render as chips persisted as\n\t * `{{variable:<name>}}` tokens.\n\t */\n\tvariablesData?: VariableListInterfaceV3[];\n\t'data-test'?: string;\n}\n\n/**\n * A labelled multiline field with an inline \"Improve with AI\" action pinned to\n * the bottom-left of the box (Figma: Rest API / Handover-to-email drawers). The\n * button is hidden when `onImprove` is omitted.\n */\nexport const ToolInstructionsField: React.FC<ToolInstructionsFieldProps> = ({\n\tlabel,\n\tvalue,\n\tonChange,\n\tmaxLength,\n\tplaceholder,\n\tminHeight = '120px',\n\tonImprove,\n\tvariablesData,\n\t...rest\n}) => {\n\tconst [focused, setFocused] = useState(false);\n\tconst [improving, setImproving] = useState(false);\n\t// Bumped when \"Improve with AI\" replaces the text externally — the mention\n\t// editor only reads `value` on (re)mount, so it must be remounted.\n\tconst [editorEpoch, setEditorEpoch] = useState(0);\n\n\tconst withVariables = (variablesData?.length ?? 0) > 0;\n\n\tconst handleImprove = async () => {\n\t\tif (!onImprove || improving || value.trim().length === 0) {\n\t\t\treturn;\n\t\t}\n\t\tsetImproving(true);\n\t\ttry {\n\t\t\tonChange(await onImprove(value));\n\t\t\tif (withVariables) {\n\t\t\t\tsetEditorEpoch((e) => e + 1);\n\t\t\t}\n\t\t} finally {\n\t\t\tsetImproving(false);\n\t\t}\n\t};\n\n\tconst improveAction = onImprove ? (\n\t\t<ImproveRow>\n\t\t\t<Button\n\t\t\t\tdata-test={`${rest['data-test'] ?? 'tool'}-improve`}\n\t\t\t\tbuttonType=\"ai\"\n\t\t\t\tsize=\"small\"\n\t\t\t\tLeadingIcon={WandSparkles}\n\t\t\t\tbuttonText=\"Improve with AI\"\n\t\t\t\tisLoading={improving}\n\t\t\t\tdisabled={improving || value.trim().length === 0}\n\t\t\t\tonClick={handleImprove}\n\t\t\t/>\n\t\t</ImproveRow>\n\t) : undefined;\n\n\t// Variables enabled → the mention-editor variant. `mentionItems` / tool\n\t// hooks stay empty so Variables is the picker's ONLY category and `@` lands\n\t// straight in the variable list.\n\tif (withVariables) {\n\t\treturn (\n\t\t\t<MentionEditor\n\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\tlabel={label}\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={onChange}\n\t\t\t\tmaxLength={maxLength}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tminHeight={minHeight}\n\t\t\t\tresetKey={`improve-${editorEpoch}`}\n\t\t\t\tmentionItems={[]}\n\t\t\t\ttools={[]}\n\t\t\t\tvariablesData={variablesData}\n\t\t\t\t// Drawers get the same focused-field \"+ Add data\" affordance as the\n\t\t\t\t// main Step-3 editors.\n\t\t\t\taddDataButton\n\t\t\t\taction={improveAction}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<FieldBlock>\n\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t<AiTextAreaShell focused={focused} minHeight={minHeight}>\n\t\t\t\t<AiTextAreaInput\n\t\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tmaxLength={maxLength}\n\t\t\t\t\tonFocus={() => setFocused(true)}\n\t\t\t\t\tonBlur={() => setFocused(false)}\n\t\t\t\t\tonChange={(e) => onChange(e.target.value)}\n\t\t\t\t/>\n\t\t\t\t{improveAction}\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n\nconst ImproveRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n`;\n"],"names":["ToolInstructionsField","label","value","onChange","maxLength","placeholder","minHeight","onImprove","variablesData","rest","focused","setFocused","useState","improving","setImproving","editorEpoch","setEditorEpoch","withVariables","handleImprove","e","improveAction","jsx","ImproveRow","Button","WandSparkles","MentionEditor","FieldBlock","TitleSmall","COLORS","jsxs","AiTextAreaShell","AiTextAreaInput","styled"],"mappings":";;;;;;;;;AAuCO,MAAMA,IAA8D,CAAC;AAAA,EAC3E,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtC,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAG1C,CAACG,GAAaC,CAAc,IAAIJ,EAAS,CAAC,GAE1CK,KAAiBT,GAAe,UAAU,KAAK,GAE/CU,IAAgB,YAAY;AACjC,QAAI,GAACX,KAAaM,KAAaX,EAAM,KAAA,EAAO,WAAW,IAGvD;AAAA,MAAAY,EAAa,EAAI;AACjB,UAAI;AACH,QAAAX,EAAS,MAAMI,EAAUL,CAAK,CAAC,GAC3Be,KACHD,EAAe,CAACG,MAAMA,IAAI,CAAC;AAAA,MAE7B,UAAA;AACC,QAAAL,EAAa,EAAK;AAAA,MACnB;AAAA;AAAA,EACD,GAEMM,IAAgBb,IACrB,gBAAAc,EAACC,GAAA,EACA,UAAA,gBAAAD;AAAA,IAACE;AAAA,IAAA;AAAA,MACA,aAAW,GAAGd,EAAK,WAAW,KAAK,MAAM;AAAA,MACzC,YAAW;AAAA,MACX,MAAK;AAAA,MACL,aAAae;AAAAA,MACb,YAAW;AAAA,MACX,WAAWX;AAAA,MACX,UAAUA,KAAaX,EAAM,KAAA,EAAO,WAAW;AAAA,MAC/C,SAASgB;AAAA,IAAA;AAAA,EAAA,GAEX,IACG;AAKJ,SAAID,IAEF,gBAAAI;AAAA,IAACI;AAAA,IAAA;AAAA,MACA,aAAWhB,EAAK,WAAW;AAAA,MAC3B,OAAAR;AAAA,MACA,OAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,aAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAU,WAAWS,CAAW;AAAA,MAChC,cAAc,CAAA;AAAA,MACd,OAAO,CAAA;AAAA,MACP,eAAAP;AAAA,MAGA,eAAa;AAAA,MACb,QAAQY;AAAA,IAAA;AAAA,EAAA,sBAMTM,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAL,EAACM,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAU,UAAA3B,GAAM;AAAA,IAClD,gBAAA4B,EAACC,GAAA,EAAgB,SAAApB,GAAkB,WAAAJ,GAClC,UAAA;AAAA,MAAA,gBAAAe;AAAA,QAACU;AAAA,QAAA;AAAA,UACA,aAAWtB,EAAK,WAAW;AAAA,UAC3B,OAAAP;AAAA,UACA,aAAAG;AAAA,UACA,WAAAD;AAAA,UACA,SAAS,MAAMO,EAAW,EAAI;AAAA,UAC9B,QAAQ,MAAMA,EAAW,EAAK;AAAA,UAC9B,UAAU,CAACQ,MAAMhB,EAASgB,EAAE,OAAO,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAExCC;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACD;AAEF,GAEME,IAAaU,EAAO;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"ToolInstructionsField.js","sources":["../../../../../src/components/agent-builder/components/ToolInstructionsField.tsx"],"sourcesContent":["import { stripHtmlTags } from '@src/helpers/sanitize';\nimport { WandSparkles } from '@src/icons';\nimport React, { useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport type { VariableListInterfaceV3 } from '../../variable-picker-v3/model';\nimport {\n\tAiTextAreaInput,\n\tAiTextAreaShell,\n\tFieldBlock,\n} from '../AgentBuilder.styled';\nimport { MentionEditor } from './MentionEditor';\n\ninterface ToolInstructionsFieldProps {\n\tlabel: string;\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tmaxLength: number;\n\tplaceholder?: string;\n\tminHeight?: string;\n\t/** \"Improve with AI\" — resolves with rewritten text. Omit to hide the button. */\n\tonImprove?: (text: string) => Promise<string>;\n\t/**\n\t * Variable catalog. When non-empty the field upgrades from a plain textarea\n\t * to a variables-only `@` mention editor: typing `@` opens the variable\n\t * categories directly (Variables is the sole category, so the picker skips\n\t * the Tools / Sub-agent root), and picks render as chips persisted as\n\t * `{{variable:<name>}}` tokens.\n\t */\n\tvariablesData?: VariableListInterfaceV3[];\n\t'data-test'?: string;\n}\n\n/**\n * A labelled multiline field with an inline \"Improve with AI\" action pinned to\n * the bottom-left of the box (Figma: Rest API / Handover-to-email drawers). The\n * button is hidden when `onImprove` is omitted.\n */\nexport const ToolInstructionsField: React.FC<ToolInstructionsFieldProps> = ({\n\tlabel,\n\tvalue,\n\tonChange,\n\tmaxLength,\n\tplaceholder,\n\tminHeight = '120px',\n\tonImprove,\n\tvariablesData,\n\t...rest\n}) => {\n\tconst [focused, setFocused] = useState(false);\n\tconst [improving, setImproving] = useState(false);\n\t// Bumped when \"Improve with AI\" replaces the text externally — the mention\n\t// editor only reads `value` on (re)mount, so it must be remounted.\n\tconst [editorEpoch, setEditorEpoch] = useState(0);\n\n\tconst withVariables = (variablesData?.length ?? 0) > 0;\n\n\tconst handleImprove = async () => {\n\t\tif (!onImprove || improving || value.trim().length === 0) {\n\t\t\treturn;\n\t\t}\n\t\tsetImproving(true);\n\t\ttry {\n\t\t\tonChange(await onImprove(value));\n\t\t\tif (withVariables) {\n\t\t\t\tsetEditorEpoch((e) => e + 1);\n\t\t\t}\n\t\t} finally {\n\t\t\tsetImproving(false);\n\t\t}\n\t};\n\n\tconst improveAction = onImprove ? (\n\t\t<ImproveRow>\n\t\t\t<Button\n\t\t\t\tdata-test={`${rest['data-test'] ?? 'tool'}-improve`}\n\t\t\t\tbuttonType=\"ai\"\n\t\t\t\tsize=\"small\"\n\t\t\t\tLeadingIcon={WandSparkles}\n\t\t\t\tbuttonText=\"Improve with AI\"\n\t\t\t\tisLoading={improving}\n\t\t\t\tdisabled={improving || value.trim().length === 0}\n\t\t\t\tonClick={handleImprove}\n\t\t\t/>\n\t\t</ImproveRow>\n\t) : undefined;\n\n\t// Variables enabled → the mention-editor variant. `mentionItems` / tool\n\t// hooks stay empty so Variables is the picker's ONLY category and `@` lands\n\t// straight in the variable list.\n\tif (withVariables) {\n\t\treturn (\n\t\t\t<MentionEditor\n\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\tlabel={label}\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={onChange}\n\t\t\t\tmaxLength={maxLength}\n\t\t\t\tplaceholder={placeholder}\n\t\t\t\tminHeight={minHeight}\n\t\t\t\tresetKey={`improve-${editorEpoch}`}\n\t\t\t\tmentionItems={[]}\n\t\t\t\ttools={[]}\n\t\t\t\tvariablesData={variablesData}\n\t\t\t\t// Drawers get the same focused-field \"+ Add data\" affordance as the\n\t\t\t\t// main Step-3 editors.\n\t\t\t\taddDataButton\n\t\t\t\taction={improveAction}\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<FieldBlock>\n\t\t\t<TitleSmall color={COLORS.content.primary}>{label}</TitleSmall>\n\t\t\t<AiTextAreaShell focused={focused} minHeight={minHeight}>\n\t\t\t\t<AiTextAreaInput\n\t\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tplaceholder={placeholder}\n\t\t\t\t\tmaxLength={maxLength}\n\t\t\t\t\tonFocus={() => setFocused(true)}\n\t\t\t\t\tonBlur={() => setFocused(false)}\n\t\t\t\t\tonChange={(e) => onChange(stripHtmlTags(e.target.value))}\n\t\t\t\t/>\n\t\t\t\t{improveAction}\n\t\t\t</AiTextAreaShell>\n\t\t</FieldBlock>\n\t);\n};\n\nconst ImproveRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n`;\n"],"names":["ToolInstructionsField","label","value","onChange","maxLength","placeholder","minHeight","onImprove","variablesData","rest","focused","setFocused","useState","improving","setImproving","editorEpoch","setEditorEpoch","withVariables","handleImprove","e","improveAction","jsx","ImproveRow","Button","WandSparkles","MentionEditor","FieldBlock","TitleSmall","COLORS","jsxs","AiTextAreaShell","AiTextAreaInput","stripHtmlTags","styled"],"mappings":";;;;;;;;;;AAwCO,MAAMA,IAA8D,CAAC;AAAA,EAC3E,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACJ,MAAM;AACL,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GACtC,CAACC,GAAWC,CAAY,IAAIF,EAAS,EAAK,GAG1C,CAACG,GAAaC,CAAc,IAAIJ,EAAS,CAAC,GAE1CK,KAAiBT,GAAe,UAAU,KAAK,GAE/CU,IAAgB,YAAY;AACjC,QAAI,GAACX,KAAaM,KAAaX,EAAM,KAAA,EAAO,WAAW,IAGvD;AAAA,MAAAY,EAAa,EAAI;AACjB,UAAI;AACH,QAAAX,EAAS,MAAMI,EAAUL,CAAK,CAAC,GAC3Be,KACHD,EAAe,CAACG,MAAMA,IAAI,CAAC;AAAA,MAE7B,UAAA;AACC,QAAAL,EAAa,EAAK;AAAA,MACnB;AAAA;AAAA,EACD,GAEMM,IAAgBb,IACrB,gBAAAc,EAACC,GAAA,EACA,UAAA,gBAAAD;AAAA,IAACE;AAAA,IAAA;AAAA,MACA,aAAW,GAAGd,EAAK,WAAW,KAAK,MAAM;AAAA,MACzC,YAAW;AAAA,MACX,MAAK;AAAA,MACL,aAAae;AAAAA,MACb,YAAW;AAAA,MACX,WAAWX;AAAA,MACX,UAAUA,KAAaX,EAAM,KAAA,EAAO,WAAW;AAAA,MAC/C,SAASgB;AAAA,IAAA;AAAA,EAAA,GAEX,IACG;AAKJ,SAAID,IAEF,gBAAAI;AAAA,IAACI;AAAA,IAAA;AAAA,MACA,aAAWhB,EAAK,WAAW;AAAA,MAC3B,OAAAR;AAAA,MACA,OAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,aAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAU,WAAWS,CAAW;AAAA,MAChC,cAAc,CAAA;AAAA,MACd,OAAO,CAAA;AAAA,MACP,eAAAP;AAAA,MAGA,eAAa;AAAA,MACb,QAAQY;AAAA,IAAA;AAAA,EAAA,sBAMTM,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAL,EAACM,GAAA,EAAW,OAAOC,EAAO,QAAQ,SAAU,UAAA3B,GAAM;AAAA,IAClD,gBAAA4B,EAACC,GAAA,EAAgB,SAAApB,GAAkB,WAAAJ,GAClC,UAAA;AAAA,MAAA,gBAAAe;AAAA,QAACU;AAAA,QAAA;AAAA,UACA,aAAWtB,EAAK,WAAW;AAAA,UAC3B,OAAAP;AAAA,UACA,aAAAG;AAAA,UACA,WAAAD;AAAA,UACA,SAAS,MAAMO,EAAW,EAAI;AAAA,UAC9B,QAAQ,MAAMA,EAAW,EAAK;AAAA,UAC9B,UAAU,CAACQ,MAAMhB,EAAS6B,EAAcb,EAAE,OAAO,KAAK,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,MAEvDC;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACD;AAEF,GAEME,IAAaW,EAAO;AAAA;AAAA;AAAA;"}

package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { Placement } from '../tooltips';
 export interface AnalyticsTrendInterface {
     title: string;
     value?: number | string;
@@ -10,6 +11,8 @@ export interface AnalyticsTrendInterface {
     customRange?: Date[];
     type?: 'vertical' | 'horizontal';
     tooltip?: string;
+    tooltipPlacement?: Placement;
+    tooltipWidth?: number;
     card?: boolean;
     rightSeparator?: boolean;
     size?: 'big' | 'small';

package/dist/esm/components/analytics-chips-and-dropdowns/AnalyticsTrend.js

@@ -1,87 +1,89 @@
-import { jsx as t, jsxs as s, Fragment as Y } from "react/jsx-runtime";
-import Z, { useState as O, useEffect as U } from "react";
-import { ShimmerComponentStyled as k } from "../shimmer/ShimmerComponent/ShimmerStyled.js";
-import P from "../../utils/DateUtils.js";
-import { COLORS as l } from "../../constants/Theme.js";
-import tt from "../../assets/icons/arrow_down.svg.js";
-import et from "../../assets/icons/arrow_up.svg.js";
-import rt from "../../assets/icons/info.svg.js";
-import { BodyCaption as nt, TitleLarge as ot, TitleMedium as it, Caption as u } from "../TypographyStyle.js";
-import { truncateValueForInternationalStore as q, truncateValueForIndianStore as B } from "./chart/utils/calcPercentage.js";
-import { AnalyticsTrendContainer as lt, IconContainer as at } from "./CommonStyles.js";
-import { Tooltip as V } from "../tooltips/Tooltip.js";
-import { Tag as C } from "../tag/Tag.js";
-const wt = ({
-  title: h,
-  value: r,
-  trendPercent: e,
+import { jsx as t, jsxs as f, Fragment as P } from "react/jsx-runtime";
+import tt, { useState as _, useEffect as q } from "react";
+import { ShimmerComponentStyled as V } from "../shimmer/ShimmerComponent/ShimmerStyled.js";
+import et from "../../utils/DateUtils.js";
+import { COLORS as i } from "../../constants/Theme.js";
+import rt from "../../assets/icons/arrow_down.svg.js";
+import nt from "../../assets/icons/arrow_up.svg.js";
+import ot from "../../assets/icons/info.svg.js";
+import { BodyCaption as it, TitleLarge as lt, TitleMedium as at, Caption as m } from "../TypographyStyle.js";
+import { truncateValueForInternationalStore as G, truncateValueForIndianStore as H } from "./chart/utils/calcPercentage.js";
+import { AnalyticsTrendContainer as dt, IconContainer as ct } from "./CommonStyles.js";
+import { Tooltip as z } from "../tooltips/Tooltip.js";
+import { Tag as x } from "../tag/Tag.js";
+const Tt = ({
+  title: c,
+  value: n,
+  trendPercent: r,
   type: a = "horizontal",
-  timeline: n,
-  customRange: f,
-  tooltip: b,
-  card: y = !0,
-  rightSeparator: D = !1,
-  size: $ = "big",
-  share: o = !1,
+  timeline: o,
+  customRange: y,
+  tooltip: u,
+  tooltipPlacement: T = "right",
+  tooltipWidth: C = 300,
+  card: h = !0,
+  rightSeparator: s = !1,
+  size: D = "big",
+  share: l = !1,
   formatVal: A,
   prefixSymbol: d,
-  trailingIcon: v,
+  trailingIcon: p,
   onTrailIconClick: M,
-  iconTooltipBody: p,
-  funnelPercent: w,
-  isLoading: i,
-  trendRaw: g,
-  trendRawString: c,
-  suffixText: m,
-  trendStyle: G,
-  trendContainerStyle: H,
-  trendIconStyle: z,
-  containerStyle: J,
-  prevTrendDiff: F,
-  relativePercentageDiff: N,
-  isInternationalStore: I,
-  Icon: x,
-  iconContainerStyle: K,
-  tooltipTimelineText: S,
-  customTimelineText: W
+  iconTooltipBody: b,
+  funnelPercent: g,
+  isLoading: e,
+  trendRaw: F,
+  trendRawString: N,
+  suffixText: $,
+  trendStyle: J,
+  trendContainerStyle: K,
+  trendIconStyle: S,
+  containerStyle: L,
+  prevTrendDiff: I,
+  relativePercentageDiff: W,
+  isInternationalStore: j,
+  Icon: v,
+  iconContainerStyle: Q,
+  tooltipTimelineText: E,
+  customTimelineText: O
 }) => {
-  const L = $ === "big" ? ot : it, E = typeof e < "u" ? e < 0 ? "negative" : e === 0 ? "neutral" : "positive" : void 0, T = typeof e < "u" ? o ? Math.round(e) : Math.abs(Math.round(e)) : void 0, Q = () => typeof r > "u" ? "--" : typeof r == "number" && A ? r > 999 ? I ? `${d ?? ""}${q(
-    r
-  )} ${m ?? ""}` : `${d ?? ""}${B(
-    r
-  )} ${m ?? ""}` : `${d ?? ""}${new Intl.NumberFormat("en-IN", {
+  const R = D === "big" ? lt : at, U = typeof r < "u" ? r < 0 ? "negative" : r === 0 ? "neutral" : "positive" : void 0, w = typeof r < "u" ? l ? Math.round(r) : Math.abs(Math.round(r)) : void 0, X = () => typeof n > "u" ? "--" : typeof n == "number" && A ? n > 999 ? j ? `${d ?? ""}${G(
+    n
+  )} ${$ ?? ""}` : `${d ?? ""}${H(
+    n
+  )} ${$ ?? ""}` : `${d ?? ""}${new Intl.NumberFormat("en-IN", {
     maximumFractionDigits: 2
-  }).format(r)} ${m ?? ""}` : `${d ?? ""}${r} ${m ?? ""}`, R = (X) => {
-    const j = Math.abs(X);
-    return j % 1 !== 0 ? `${j.toFixed(1)} %` : `${j} %`;
+  }).format(n)} ${$ ?? ""}` : `${d ?? ""}${n} ${$ ?? ""}`, Y = (Z) => {
+    const k = Math.abs(Z);
+    return k % 1 !== 0 ? `${k.toFixed(1)} %` : `${k} %`;
   };
   return /* @__PURE__ */ t(
-    lt,
+    dt,
     {
-      card: y,
+      card: h,
       style: {
-        ...J
+        ...L
       },
-      children: /* @__PURE__ */ s(
+      children: /* @__PURE__ */ f(
         "div",
         {
           style: {
             display: "flex",
             flexDirection: "row",
-            gap: x ? 12 : 4,
-            borderRightWidth: D ? 1 : 0,
-            borderRightColor: l.stroke.primary,
+            gap: v ? 12 : 4,
+            borderRightWidth: s ? 1 : 0,
+            borderRightColor: i.stroke.primary,
             borderRightStyle: "solid",
-            paddingLeft: y ? 0 : 24,
-            paddingRight: y ? 0 : 24,
+            paddingLeft: h ? 0 : 24,
+            paddingRight: h ? 0 : 24,
             height: "100%",
-            justifyContent: x ? "flex-start" : "space-between",
+            justifyContent: v ? "flex-start" : "space-between",
             alignItems: "center",
-            ...H ?? {}
+            ...K ?? {}
           },
           children: [
-            !!x && /* @__PURE__ */ t(at, { style: { ...K }, children: /* @__PURE__ */ t(x, {}) }),
-            /* @__PURE__ */ s(
+            !!v && /* @__PURE__ */ t(ct, { style: { ...Q }, children: /* @__PURE__ */ t(v, {}) }),
+            /* @__PURE__ */ f(
               "div",
               {
                 style: {
@@ -89,10 +91,10 @@ const wt = ({
                   flexDirection: "column",
                   gap: 4,
                   height: "100%",
-                  ...G ?? {}
+                  ...J ?? {}
                 },
                 children: [
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ f(
                     "div",
                     {
                       style: {
@@ -103,36 +105,44 @@ const wt = ({
                       },
                       children: [
                         /* @__PURE__ */ t(
-                          nt,
+                          it,
                           {
                             style: {
-                              color: l.content.secondary
+                              color: i.content.secondary
                             },
-                            children: h
+                            children: c
                           }
                         ),
-                        b && /* @__PURE__ */ t(V, { body: b, placement: "right", width: 300, children: /* @__PURE__ */ t(
-                          "div",
+                        u && /* @__PURE__ */ t(
+                          z,
                           {
-                            style: {
-                              display: "flex",
-                              cursor: "pointer",
-                              height: "100%"
-                            },
+                            body: u,
+                            placement: T,
+                            width: C,
                             children: /* @__PURE__ */ t(
-                              rt,
+                              "div",
                               {
-                                color: l.content.primary,
-                                height: 16,
-                                width: 16
+                                style: {
+                                  display: "flex",
+                                  cursor: "pointer",
+                                  height: "100%"
+                                },
+                                children: /* @__PURE__ */ t(
+                                  ot,
+                                  {
+                                    color: i.content.primary,
+                                    height: 16,
+                                    width: 16
+                                  }
+                                )
                               }
                             )
                           }
-                        ) })
+                        )
                       ]
                     }
                   ),
-                  /* @__PURE__ */ s(
+                  /* @__PURE__ */ f(
                     "div",
                     {
                       style: {
@@ -140,94 +150,94 @@ const wt = ({
                         flexDirection: "row",
                         gap: 12,
                         alignItems: "center",
-                        ...o ? { justifyContent: "space-between" } : {}
+                        ...l ? { justifyContent: "space-between" } : {}
                       },
                       children: [
-                        i && /* @__PURE__ */ t(k, { width: 108, height: 26 }),
-                        !i && /* @__PURE__ */ t(
-                          L,
+                        e && /* @__PURE__ */ t(V, { width: 108, height: 26 }),
+                        !e && /* @__PURE__ */ t(
+                          R,
                           {
                             style: {
-                              color: l.content.primary
+                              color: i.content.primary
                             },
-                            children: Q()
+                            children: X()
                           }
                         ),
-                        typeof N == "number" && /* @__PURE__ */ t(
-                          C,
+                        typeof W == "number" && /* @__PURE__ */ t(
+                          x,
                           {
-                            tagText: `${N}%`,
+                            tagText: `${W}%`,
                             theme: "light",
                             type: "neutral"
                           }
                         ),
-                        a === "horizontal" && !i && !o && /* @__PURE__ */ t(
-                          _,
+                        a === "horizontal" && !e && !l && /* @__PURE__ */ t(
+                          B,
                           {
-                            timeline: n,
-                            customRange: f,
-                            percent: T,
-                            direction: E,
-                            trendRaw: g,
-                            trendRawString: c,
+                            timeline: o,
+                            customRange: y,
+                            percent: w,
+                            direction: U,
+                            trendRaw: F,
+                            trendRawString: N,
                             prefixSymbol: d,
-                            trendIconStyle: z,
-                            isInternationalStore: I,
-                            tooltipTimelineText: S,
-                            customTimelineText: W
+                            trendIconStyle: S,
+                            isInternationalStore: j,
+                            tooltipTimelineText: E,
+                            customTimelineText: O
                           }
                         ),
-                        i && !o && a === "horizontal" && /* @__PURE__ */ t(k, { height: 20, width: 141, marginTop: 6 }),
-                        a === "vertical" && !i && typeof w < "u" && /* @__PURE__ */ t(
-                          C,
+                        e && !l && a === "horizontal" && /* @__PURE__ */ t(V, { height: 20, width: 141, marginTop: 6 }),
+                        a === "vertical" && !e && typeof g < "u" && /* @__PURE__ */ t(
+                          x,
                           {
-                            tagText: `${w} %`,
+                            tagText: `${g} %`,
                             theme: "light",
                             type: "neutral"
                           }
                         ),
-                        o && !i && typeof T < "u" && /* @__PURE__ */ t(C, { tagText: `${T} %`, theme: "light", type: "neutral" }),
-                        !o && !i && F && F != 0 ? /* @__PURE__ */ t(
-                          C,
+                        l && !e && typeof w < "u" && /* @__PURE__ */ t(x, { tagText: `${w} %`, theme: "light", type: "neutral" }),
+                        !l && !e && I && I != 0 ? /* @__PURE__ */ t(
+                          x,
                           {
-                            tagText: R(F),
+                            tagText: Y(I),
                             theme: "light",
                             type: "neutral"
                           }
-                        ) : /* @__PURE__ */ t(Y, {})
+                        ) : /* @__PURE__ */ t(P, {})
                       ]
                     }
                   ),
-                  a === "vertical" && !i && !o && /* @__PURE__ */ t("div", { style: { marginTop: 10 }, children: /* @__PURE__ */ t(
-                    _,
+                  a === "vertical" && !e && !l && /* @__PURE__ */ t("div", { style: { marginTop: 10 }, children: /* @__PURE__ */ t(
+                    B,
                     {
-                      timeline: n,
-                      customRange: f,
-                      percent: T,
-                      direction: E,
-                      trendRaw: g,
-                      trendRawString: c,
+                      timeline: o,
+                      customRange: y,
+                      percent: w,
+                      direction: U,
+                      trendRaw: F,
+                      trendRawString: N,
                       prefixSymbol: d,
-                      trendIconStyle: z,
-                      isInternationalStore: I,
-                      tooltipTimelineText: S,
-                      customTimelineText: W
+                      trendIconStyle: S,
+                      isInternationalStore: j,
+                      tooltipTimelineText: E,
+                      customTimelineText: O
                     }
                   ) }),
-                  i && a === "vertical" && /* @__PURE__ */ t(k, { height: 20, width: 141, marginTop: 6 })
+                  e && a === "vertical" && /* @__PURE__ */ t(V, { height: 20, width: 141, marginTop: 6 })
                 ]
               }
             ),
-            p && !i && /* @__PURE__ */ t(V, { body: p, placement: "right", children: v && /* @__PURE__ */ t(
+            b && !e && /* @__PURE__ */ t(z, { body: b, placement: "right", children: p && /* @__PURE__ */ t(
               "div",
               {
                 "data-test": "analytics-trend-trailing-icon",
                 className: "icon--holder",
                 onClick: M,
-                children: Z.createElement(v, {
+                children: tt.createElement(p, {
                   height: 20,
                   width: 20,
-                  color: l.content.secondary
+                  color: i.content.secondary
                 })
               }
             ) })
@@ -236,42 +246,42 @@ const wt = ({
       )
     }
   );
-}, _ = ({
-  percent: h,
-  direction: r,
-  timeline: e,
+}, B = ({
+  percent: c,
+  direction: n,
+  timeline: r,
   customRange: a,
-  trendRaw: n,
-  trendRawString: f,
-  prefixSymbol: b,
-  trendIconStyle: y,
-  isInternationalStore: D,
-  tooltipTimelineText: $,
-  customTimelineText: o
+  trendRaw: o,
+  trendRawString: y,
+  prefixSymbol: u,
+  trendIconStyle: T,
+  isInternationalStore: C,
+  tooltipTimelineText: h,
+  customTimelineText: s
 }) => {
-  const A = () => {
-    let c = "--";
-    if (n)
-      return D ? c = String(
-        q(Math.abs(n))
-      ) : c = String(B(Math.abs(n))), n < 0 ? "-" + c : c;
-  }, d = () => {
-    const c = ((n ?? 0) > 0 ? "+" : "") + (b ?? "");
-    return typeof n > "u" ? "--" : `${c ?? ""}${A()}`;
-  }, [v, M] = O(
-    d()
-  ), [p, w] = O(
-    o || ""
+  const D = () => {
+    let e = "--";
+    if (o)
+      return C ? e = String(
+        G(Math.abs(o))
+      ) : e = String(H(Math.abs(o))), o < 0 ? "-" + e : e;
+  }, l = () => {
+    const e = ((o ?? 0) > 0 ? "+" : "") + (u ?? "");
+    return typeof o > "u" ? "--" : `${e ?? ""}${D()}`;
+  }, [A, d] = _(
+    l()
+  ), [p, M] = _(
+    s || ""
   );
-  U(() => {
-    o || w(
-      e === "today" ? "vs yesterday" : e === "yesterday" ? "vs 1 day before" : e === "7 days" ? "vs last 7 days" : e === "30 days" ? "vs last 30 days" : e === "custom" && a ? P.getAnalyticsCustomDateTimelineText(a) : ""
+  q(() => {
+    s || M(
+      r === "today" ? "vs yesterday" : r === "yesterday" ? "vs 1 day before" : r === "7 days" ? "vs last 7 days" : r === "30 days" ? "vs last 30 days" : r === "custom" && a ? et.getAnalyticsCustomDateTimelineText(a) : ""
     );
-  }, [e, a]), U(() => {
-    M(d());
-  }, [n]);
-  const i = r === "negative" ? tt : et, g = r === "negative" ? l.background.negative.vibrant : r === "positive" ? l.background.positive.vibrant : l.content.placeholder;
-  return /* @__PURE__ */ s(
+  }, [r, a]), q(() => {
+    d(l());
+  }, [o]);
+  const b = n === "negative" ? rt : nt, g = n === "negative" ? i.background.negative.vibrant : n === "positive" ? i.background.positive.vibrant : i.content.placeholder;
+  return /* @__PURE__ */ f(
     "div",
     {
       style: {
@@ -281,33 +291,33 @@ const wt = ({
         flexWrap: "wrap"
       },
       children: [
-        typeof h == "number" && /* @__PURE__ */ t(
-          i,
+        typeof c == "number" && /* @__PURE__ */ t(
+          b,
           {
             color: g,
             height: 16,
             width: 16,
-            style: { marginRight: 2, ...y ?? {} }
+            style: { marginRight: 2, ...T ?? {} }
           }
         ),
-        typeof h == "number" && r && /* @__PURE__ */ s(u, { style: { color: g }, children: [
-          r === "neutral" ? 0 : h < 1e3 ? h : ">999",
+        typeof c == "number" && n && /* @__PURE__ */ f(m, { style: { color: g }, children: [
+          n === "neutral" ? 0 : c < 1e3 ? c : ">999",
           "%"
         ] }),
-        !!n && /* @__PURE__ */ t(u, { style: { marginLeft: 4, color: l.content.placeholder }, children: `(${v})` }),
-        !n && (f?.length || 0) > 0 && /* @__PURE__ */ t(u, { style: { marginLeft: 4, color: l.content.placeholder }, children: `${f}` }),
-        e && ($ ? /* @__PURE__ */ t(V, { body: $, placement: "bottom", children: /* @__PURE__ */ t(
-          u,
+        !!o && /* @__PURE__ */ t(m, { style: { marginLeft: 4, color: i.content.placeholder }, children: `(${A})` }),
+        !o && (y?.length || 0) > 0 && /* @__PURE__ */ t(m, { style: { marginLeft: 4, color: i.content.placeholder }, children: `${y}` }),
+        r && (h ? /* @__PURE__ */ t(z, { body: h, placement: "bottom", children: /* @__PURE__ */ t(
+          m,
           {
-            style: { marginLeft: 4, color: l.content.placeholder },
-            children: o || p
+            style: { marginLeft: 4, color: i.content.placeholder },
+            children: s || p
           }
-        ) }) : /* @__PURE__ */ t(u, { style: { marginLeft: 4, color: l.content.placeholder }, children: o || p }))
+        ) }) : /* @__PURE__ */ t(m, { style: { marginLeft: 4, color: i.content.placeholder }, children: s || p }))
       ]
     }
   );
 };
 export {
-  wt as AnalyticsTrend
+  Tt as AnalyticsTrend
 };
 //# sourceMappingURL=AnalyticsTrend.js.map